/* ── CSS Variables (DARK) ────────────────────────────────────────────── */
html.dark {
  --t-hi:         #ffffff;    /* text-primary  */
  --t-med:        #a0a0a0;    /* text-secondary */
  --t-low:        #505050;    /* muted labels */
  --border:       #3a3a3a;    /* border */
  --border-hi:    #404040;    /* input-border */
  --surface-1:    #0f0f0f;    /* bg-primary  — page bg */
  --surface-2:    #0f0f0f;    /* bg-primary  — main content */
  --surface-3:    #1a1a1a;    /* bg-secondary — sidebar, topbar, cards */
  --surface-4:    #2d2d2d;    /* bg-tertiary — table headers, hover */
  --surface-card: #1f1f1f;    /* card-bg */
  --surface-input:#262626;    /* input-bg */
  --surface-icon: #2d2d2d;
  --toggle-off:   #3a3a3a;
  --accent:       #4f46e5;
  --accent-hover: #6366f1;
  --accent-dim:   rgba(79,70,229,.15);
  --accent-border:rgba(79,70,229,.4);
  --success:      #10b981;
  --danger:       #ef4444;
  --warning:      #f59e0b;
}

/* ── CSS Variables (LIGHT) ───────────────────────────────────────────── */
html:not(.dark) {
  --t-hi:      #0f0f1a;
  --t-med:     #555577;
  --t-low:     #aaaacc;
  --border:    #e2e2ee;
  --border-hi: #c8c8e0;
  --surface-1: #f5f5fa;
  --surface-2: #f5f5fa;
  --surface-3: #ffffff;
  --surface-4: #ededf5;
  --surface-icon: #e8e8f5;
  --toggle-off: #ccccdd;
  --accent:    #4f46e5;
  --accent-dim: rgba(79,70,229,.1);
  --accent-border: rgba(79,70,229,.3);
}

/* ── Reset & base ────────────────────────────────────────────────────── */
[v-cloak] { display: none; }

*, *::before, *::after {
  box-sizing: border-box;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

html, body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Override browser monospace for code/pre so they still use Inter */
code, pre, kbd, samp, .font-mono {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0;
}

html.dark body       { background: var(--surface-1); color: var(--t-hi); font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
html:not(.dark) body { background: var(--surface-1); color: var(--t-hi); font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }

/* ── Scrollbar ───────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
html.dark       ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
html:not(.dark) ::-webkit-scrollbar-thumb { background: #c0c0d8; border-radius: 99px; }

/* ── Transitions ─────────────────────────────────────────────────────── */
.fade-enter-active, .fade-leave-active { transition: opacity .15s ease; }
.fade-enter-from,   .fade-leave-to     { opacity: 0; }

.slide-enter-active { transition: all .2s cubic-bezier(.25,.8,.25,1); }
.slide-leave-active { transition: all .14s ease; }
.slide-enter-from   { opacity:0; transform:translateY(10px); }
.slide-leave-to     { opacity:0; transform:translateY(-4px); }

/* ── Sidebar ─────────────────────────────────────────────────────────── */
html.dark       .sidebar { background: var(--surface-3); border-right: 1px solid var(--border); }
html:not(.dark) .sidebar { background: var(--surface-3); border-right: 1px solid var(--border); }

/* ── Topbar ──────────────────────────────────────────────────────────── */
html.dark       .topbar { background: var(--surface-3); border-bottom: 1px solid var(--border); }
html:not(.dark) .topbar { background: var(--surface-3); border-bottom: 1px solid var(--border); }

/* ── Nav items ───────────────────────────────────────────────────────── */
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px; border-radius: 10px;
  font-size: .8125rem; font-weight: 500;
  transition: background .12s, color .12s;
  cursor: pointer; border: none; text-align: left;
}
html.dark       .nav-item         { color: var(--t-med); }
html.dark       .nav-item:hover   { background: var(--surface-4); color: #c0c0c0; }
html.dark       .nav-item.active  { background: var(--accent); color: #ffffff; font-weight: 600; }
html:not(.dark) .nav-item         { color: var(--t-med); }
html:not(.dark) .nav-item:hover   { background: var(--surface-4); color: #222; }
html:not(.dark) .nav-item.active  { background: var(--accent); color: #ffffff; font-weight: 600; }

.nav-item.active::before { display: none; }

/* ── Section label ───────────────────────────────────────────────────── */
.section-label {
  font-size: .625rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 14px 14px 5px; color: var(--t-low);
}

/* ── Generic card ────────────────────────────────────────────────────── */
.card {
  background: var(--surface-3);
  border: 1px solid var(--border);
}
html.dark       .card { box-shadow: 0 4px 24px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.03); }
html:not(.dark) .card { box-shadow: 0 2px 8px rgba(0,0,0,.06); }

/* ── Stat cards ──────────────────────────────────────────────────────── */
.stat-card {
  border-radius: 16px; padding: 20px;
  background: var(--surface-3);
  border: 1px solid var(--border);
}
html.dark       .stat-card         { box-shadow: 0 4px 24px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.03); }
html:not(.dark) .stat-card         { box-shadow: 0 2px 8px rgba(0,0,0,.06); }

/* green stat card */
html.dark .stat-card.green {
  background: linear-gradient(135deg, #0d1117 0%, #101820 100%);
  border-color: rgba(52,211,153,.25);
  box-shadow: 0 0 0 1px rgba(52,211,153,.06), 0 4px 20px rgba(0,0,0,.8);
}
html:not(.dark) .stat-card.green {
  background: linear-gradient(135deg, #f0fdf9 0%, #ccfbf1 100%);
  border-color: #6ee7b7;
  box-shadow: 0 2px 8px rgba(52,211,153,.12);
}

/* red stat card */
html.dark .stat-card.red {
  background: linear-gradient(135deg, #120808 0%, #1a0a0a 100%);
  border-color: rgba(248,113,113,.2);
  box-shadow: 0 0 0 1px rgba(248,113,113,.06), 0 4px 20px rgba(0,0,0,.8);
}
html:not(.dark) .stat-card.red {
  background: linear-gradient(135deg, #fff5f5 0%, #fee2e2 100%);
  border-color: #fca5a5;
  box-shadow: 0 2px 8px rgba(239,68,68,.1);
}

/* blue stat card */
html.dark .stat-card.blue {
  background: linear-gradient(135deg, #08090f 0%, #0c0e1a 100%);
  border-color: rgba(99,102,241,.25);
  box-shadow: 0 0 0 1px rgba(99,102,241,.06), 0 4px 20px rgba(0,0,0,.8);
}
html:not(.dark) .stat-card.blue {
  background: linear-gradient(135deg, #f5f5ff 0%, #ede9fe 100%);
  border-color: #a5b4fc;
  box-shadow: 0 2px 8px rgba(99,102,241,.1);
}

/* ── Stat icon containers ────────────────────────────────────────────── */
.stat-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
html.dark  .stat-icon.neutral { background: var(--surface-4); }
html:not(.dark) .stat-icon.neutral { background: #e8e8f5; }
html.dark  .stat-icon.green  { background: rgba(16,185,129,.15);  border: 1px solid rgba(16,185,129,.25); }
html:not(.dark) .stat-icon.green  { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.2); }
html.dark  .stat-icon.red    { background: rgba(239,68,68,.15);   border: 1px solid rgba(239,68,68,.25); }
html:not(.dark) .stat-icon.red    { background: rgba(220,38,38,.08);  border: 1px solid rgba(220,38,38,.15); }
html.dark  .stat-icon.blue   { background: rgba(79,70,229,.18);   border: 1px solid rgba(79,70,229,.3); }
html:not(.dark) .stat-icon.blue   { background: rgba(79,70,229,.08);  border: 1px solid rgba(79,70,229,.15); }

/* ── Table ───────────────────────────────────────────────────────────── */
.trow { transition: background .1s; }
html.dark       .trow:hover { background: var(--surface-4); }
html:not(.dark) .trow:hover { background: #f0f0fa; }

html.dark  .th {
  color: var(--t-low);
  background: var(--surface-input);
  border-bottom: 1px solid var(--border);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
html:not(.dark) .th {
  color: var(--t-low);
  background: var(--surface-4);
  border-bottom: 1px solid var(--border);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}

/* table row separator */
html.dark  table tbody tr { border-bottom: 1px solid var(--border); }
html:not(.dark) table tbody tr { border-bottom: 1px solid rgba(200,200,220,.4); }
table tbody tr:last-child { border-bottom: none; }

/* ── Input ───────────────────────────────────────────────────────────── */
.inp {
  width: 100%; padding: 9px 13px;
  border-radius: 9px; font-size: .8125rem;
  transition: border-color .15s, box-shadow .15s;
}
html.dark .inp {
  background: var(--surface-input);
  border: 1px solid var(--input-border);
  color: var(--t-hi);
}
html.dark .inp::placeholder { color: var(--t-low); }
html.dark .inp:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79,70,229,.2);
}
html:not(.dark) .inp {
  background: var(--surface-4);
  border: 1px solid var(--border);
  color: var(--t-hi);
}
html:not(.dark) .inp::placeholder { color: var(--t-low); }
html:not(.dark) .inp:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}

/* ── Badges ──────────────────────────────────────────────────────────── */
.badge-buy {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 99px;
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
}
html.dark       .badge-buy { background: rgba(34,197,94,.15);  color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
html:not(.dark) .badge-buy { background: rgba(22,163,74,.12);  color: #15803d; border: 1px solid rgba(22,163,74,.25); }

.badge-sell {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 99px;
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
}
html.dark       .badge-sell { background: rgba(239,68,68,.15); color: #f87171; border: 1px solid rgba(239,68,68,.3); }
html:not(.dark) .badge-sell { background: rgba(220,38,38,.1);  color: #b91c1c; border: 1px solid rgba(220,38,38,.2); }

/* ── Primary button ──────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 9px;
  font-size: .8125rem; font-weight: 600;
  background: var(--accent); color: #fff;
  border: none; cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .1s;
  box-shadow: 0 2px 10px rgba(79,70,229,.4);
}
.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 18px rgba(99,102,241,.5);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

/* ── Ghost button ────────────────────────────────────────────────────── */
.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 8px;
  font-size: .8125rem; font-weight: 500;
  cursor: pointer; transition: background .12s, color .12s;
}
html.dark       .btn-ghost { background: var(--surface-4); color: var(--t-med); border: 1px solid var(--border); }
html.dark       .btn-ghost:hover { background: var(--bg-tertiary,#2d2d2d); color: var(--t-hi); }
html:not(.dark) .btn-ghost { background: var(--surface-4); color: var(--t-med); border: 1px solid var(--border); }
html:not(.dark) .btn-ghost:hover { background: var(--border); color: var(--t-hi); }

/* ── Danger button ───────────────────────────────────────────────────── */
.btn-danger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 8px;
  font-size: .8125rem; font-weight: 500;
  cursor: pointer; transition: background .12s;
  background: rgba(239,68,68,.12); color: #ef4444;
  border: 1px solid rgba(239,68,68,.25);
}
.btn-danger:hover { background: rgba(239,68,68,.22); }

/* ── Progress bar ────────────────────────────────────────────────────── */
.prog-track {
  flex: 1; height: 5px; border-radius: 99px; overflow: hidden;
}
html.dark       .prog-track { background: var(--surface-4); }
html:not(.dark) .prog-track { background: var(--border); }
.prog-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #4f46e5, #818cf8);
  transition: width .4s ease;
}

/* ── Toggle switch ───────────────────────────────────────────────────── */
.toggle-track {
  position: relative; display: inline-block;
  width: 42px; height: 24px; border-radius: 12px;
  cursor: pointer; border: none;
  transition: background .2s;
  flex-shrink: 0;
}
.toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  transition: transform .2s cubic-bezier(.4,0,.2,1);
}

/* ── Live pill ───────────────────────────────────────────────────────── */
.live-pill {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 8px; margin: 0 8px 12px;
}
html.dark       .live-pill { background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.25); }
html:not(.dark) .live-pill { background: rgba(79,70,229,.07); border: 1px solid rgba(79,70,229,.2); }

/* ── Glow ────────────────────────────────────────────────────────────── */
.glow-green {
  box-shadow: 0 0 0 1px rgba(99,102,241,.4), 0 4px 24px rgba(99,102,241,.35);
}

/* ── Spin ────────────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .8s linear infinite; }

/* ── Pulse dot ───────────────────────────────────────────────────────── */
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.7)} }
.pulse { animation: pulse-dot 2s ease-in-out infinite; display: inline-block; }

/* ── Number font ─────────────────────────────────────────────────────── */
/* Override monospace — force everything to Inter */
.font-mono,
[class*="font-mono"],
code, pre, kbd, samp,
td, th, input, button, select, textarea, label, span, div, p, h1, h2, h3, h4, h5, h6, a {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}

.num {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  font-variant-numeric: tabular-nums;
}