:root{
  --bg:#0b0f1a; --surface:#121826; --primary:#4f8cff;
  --success:#00d68f; --warn:#ffb020; --danger:#ff5d5d;
  --text-base:#e6e9ef; --text-muted:#9aa4b2; --text-inv:#0b0f1a;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --font-sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --chart-up:#00d68f; --chart-down:#ff5d5d; --chart-neutral:#9aa4b2;
}

html,body{height:100%}
body{background:var(--bg); color:var(--text-base); font-family:var(--font-sans); line-height:1.5}

a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--text-muted)}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .8rem;border-radius:9999px;background:var(--primary);color:var(--text-inv)}
.btn.ghost{background:transparent;border:1px solid #243146}
.container{max-width:1200px;margin:0 auto;padding:0 var(--sp-4)}
.grid{display:grid;gap:var(--sp-4)}
@media(min-width:1024px){.grid-12{grid-template-columns:repeat(12,1fr)}}
.col-12{grid-column:span 12}
@media(min-width:1024px){
  .col-4{grid-column:span 4}
  .col-6{grid-column:span 6}
  .col-8{grid-column:span 8}
  .col-12{grid-column:span 12}
}

/* Card */
.card{background:var(--surface);border-radius:var(--r-xl);padding:var(--sp-4);box-shadow:0 4px 24px rgba(0,0,0,.25)}
.card>.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-3)}
.card-skel{background:linear-gradient(90deg,#1a2233 25%,#1e2940 37%,#1a2233 63%);border-radius:8px;animation:skeleton 1.4s ease infinite}
@keyframes skeleton{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}

/* Table */
.table{width:100%;border-collapse:separate;border-spacing:0 8px;font-size:14px}
.table thead th{color:var(--text-muted);text-align:left;padding:.5rem .75rem}
.table tbody tr{background:var(--surface);border-radius:12px}
.table tbody td{padding:.6rem .75rem;border-top:1px solid #243146;border-bottom:1px solid #243146}
.trend-up{color:var(--chart-up)}
.trend-down{color:var(--chart-down)}

/* Accessible focus */
:focus{outline:3px solid rgba(79,140,255,.6);outline-offset:2px}