/* Basic responsive styling */
:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#9aa4b2;
  --accent:#00c0ff;
  --glass: rgba(255,255,255,0.03);
  color-scheme: dark;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background: linear-gradient(180deg,#020617 0%, #081126 100%);
  color:#e6eef8;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.site-header{
  padding:1rem;
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.site-header h1{margin:0;font-size:1.25rem}
.controls{display:flex;gap:.5rem;align-items:center}
.controls input{padding:.5rem .75rem;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:var(--glass);color:inherit}
.controls select, .controls button{padding:.5rem .75rem;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit;cursor:pointer}
main{flex:1;padding:1rem}
.dashboard{display:grid;grid-template-columns:1fr 420px;gap:1rem;align-items:start}
.table-wrap{background:var(--card);padding:1rem;border-radius:12px;overflow:auto;max-height:70vh}
table{width:100%;border-collapse:collapse}
th,td{padding:.6rem .5rem;text-align:left;font-size:.9rem;border-bottom:1px solid rgba(255,255,255,0.02)}
th{color:var(--muted);font-weight:600}
tr:hover td{background:rgba(255,255,255,0.01)}
.coin-symbol{opacity:0.8;margin-left:.5rem;font-size:.8rem;color:var(--muted)}
.price-up{color:#4ade80}
.price-down{color:#fb7185}
.details{background:var(--card);padding:1rem;border-radius:12px;position:sticky;top:1rem;height:fit-content}
#priceChart{background:transparent;margin-top:.5rem}
footer{padding:.5rem 1rem;border-top:1px solid rgba(255,255,255,0.03);text-align:center;color:var(--muted);font-size:.85rem}

/* Responsive */
@media (max-width:1000px){
  .dashboard{grid-template-columns:1fr}
  .details{order:2}
}