/* ════════════════════════════════════════════════════════════════════
   MASBK — INSTRUMENT design system (shared, reusable).
   Extracted verbatim from the T-Brand source of truth so every demo page
   is identical. Tokens only. Dark default + graphite via one [data-theme].
   ════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0B0E12; --surface:#11151C; --surface-2:#161B24; --surface-3:#1D232E;
  --border:#28303C; --border-soft:rgba(220,232,245,.06); --dot:rgba(120,150,185,.10);
  --accent:#0F6FD6; --accent-bright:#2E86E8; --accent-deep:#0B57AB; --on-accent:#fff;
  --accent-10:rgba(15,111,214,.12); --accent-28:rgba(15,111,214,.30);
  --profit:#34C98A; --profit-soft:rgba(52,201,138,.14);
  --risk:#E2574A; --risk-soft:rgba(226,87,74,.14);
  --steel:#48566A; --steel-soft:rgba(72,86,106,.16);
  --amber:#E0A33E; --amber-soft:rgba(224,163,62,.16);
  --text:#E8EDF2; --text-2:#AEB8C4; --text-3:#7C8794; --muted:#586472; --dim:#3A4452;
  --grid:rgba(120,150,185,.10);
  --shadow:none;
}
:root[data-theme="graphite"]{
  --bg:#DEDFE2; --surface:#FFFFFF; --surface-2:#EAEAED; --surface-3:#F6F6F8;
  --border:#C8C9CE; --border-soft:rgba(25,25,35,.11); --dot:rgba(70,70,85,.10);
  --accent:#0F6FD6; --accent-bright:#2E86E8; --accent-deep:#0B57AB; --on-accent:#fff;
  --accent-10:rgba(15,111,214,.12); --accent-28:rgba(15,111,214,.30);
  --profit:#15885C; --profit-soft:rgba(21,136,92,.12);
  --risk:#C13B2E; --risk-soft:rgba(193,59,46,.12);
  --steel:#9AA6B4; --steel-soft:rgba(154,166,180,.20);
  --amber:#C5860F; --amber-soft:rgba(197,134,15,.14); --grid:rgba(70,70,85,.10);
  --text:#0E1419; --text-2:#3C4650; --text-3:#67717C; --muted:#8A949E; --dim:#B4BCC4;
  --shadow:0 1px 2px rgba(25,30,45,.06), 0 12px 30px rgba(25,30,45,.10);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--text); font-family:'Sora',system-ui,sans-serif; font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh; position:relative; transition:background .4s ease, color .4s ease; }
body::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(var(--dot) 1px, transparent 1.4px); background-size:22px 22px;
  mask-image:radial-gradient(ellipse 130% 85% at 50% 0%, #000 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 130% 85% at 50% 0%, #000 30%, transparent 100%); }
::selection{ background:var(--accent-28); color:var(--text); }
::-webkit-scrollbar{ width:8px; height:8px; } ::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; } ::-webkit-scrollbar-thumb:hover{ background:var(--accent-deep); }

.mono{ font-family:'Martian Mono',monospace; } .ar{ font-family:'IBM Plex Sans Arabic',sans-serif; } .tab{ font-variant-numeric:tabular-nums; }
.wrap{ max-width:1280px; margin:0 auto; padding:0 24px; position:relative; z-index:1; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:'Martian Mono',monospace; font-size:10px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent); padding:6px 14px; border:1px solid var(--accent-28); border-radius:100px; }
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.g-label{ font-family:'Martian Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-bottom:12px; margin-bottom:20px; border-bottom:1px solid var(--border); display:block; }
.g-label b{ color:var(--accent); font-weight:500; }

/* NAV + TOGGLE */
.nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:6px; padding:12px 24px;
  background:color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none; }
.nav::-webkit-scrollbar{ display:none; }
.nav-brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.01em; font-size:15px; margin-right:auto; white-space:nowrap; text-decoration:none; color:var(--text); }
.nav-brand .bk{ color:var(--accent); }
.nav a:not(.nav-brand){ font-family:'Martian Mono',monospace; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); text-decoration:none; padding:7px 11px; border-radius:7px; white-space:nowrap; transition:.2s; }
.nav a:not(.nav-brand):hover{ color:var(--text); background:var(--surface-2); } .nav a.active{ color:var(--accent); }
.theme-toggle{ display:flex; align-items:center; gap:8px; margin-left:8px; padding:7px 13px; border:1px solid var(--border); border-radius:100px; background:var(--surface); color:var(--text-2); cursor:pointer; font-family:'Martian Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; transition:.2s; }
.theme-toggle:hover{ border-color:var(--accent-28); color:var(--accent); } .theme-toggle svg{ width:15px; height:15px; }
[data-theme="dark"] .ic-sun{ display:none; } [data-theme="graphite"] .ic-moon{ display:none; }

/* LAYOUT */
.grid{ display:grid; gap:20px; } .g2{ grid-template-columns:repeat(2,1fr); } .g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); } .g6{ grid-template-columns:repeat(6,1fr); }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:24px; box-shadow:var(--shadow); transition:border-color .2s, transform .2s; }
.card:hover{ border-color:var(--accent-28); }

/* BUTTONS / BADGES */
.row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.btn{ font-family:'Sora'; font-weight:600; font-size:13.5px; padding:11px 20px; border-radius:7px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:9px; transition:.2s; } .btn svg{ width:16px; height:16px; }
.btn-primary{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); } .btn-primary:hover{ background:var(--accent-bright); }
[data-theme="graphite"] .btn-primary:hover{ background:var(--accent-deep); }
.btn-secondary{ background:var(--surface-2); color:var(--text); border-color:var(--border); } .btn-secondary:hover{ border-color:var(--accent-28); }
.btn-ghost{ background:transparent; color:var(--text-3); } .btn-ghost:hover{ color:var(--text); background:var(--surface); }
.badge{ font-family:'Martian Mono',monospace; font-size:10px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; padding:4px 10px; border-radius:4px; display:inline-flex; align-items:center; gap:6px; }
.badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.b-profit{ color:var(--profit); background:var(--profit-soft); } .b-risk{ color:var(--risk); background:var(--risk-soft); }
.b-accent{ color:var(--accent); background:var(--accent-10); } .b-neutral{ color:var(--text-3); background:var(--surface-2); }

/* KPI CARDS */
.kpi-card{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:20px; display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; box-shadow:var(--shadow); transition:border-color .2s, transform .2s; }
.kpi-card:hover{ border-color:var(--accent-28); transform:translateY(-2px); }
.kpi-card::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); }
.kpi-card.is-profit::before{ background:var(--profit); } .kpi-card.is-risk::before{ background:var(--risk); } .kpi-card.is-steel::before{ background:var(--steel); }
.kpi-label{ font-family:'Martian Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.kpi-val{ font-family:'Martian Mono',monospace; font-size:30px; font-weight:600; letter-spacing:-.03em; line-height:1; } .kpi-val .u{ font-size:.45em; color:var(--muted); font-weight:400; }
.kpi-delta{ font-family:'Martian Mono',monospace; font-size:12px; } .kpi-delta.up{ color:var(--profit); } .kpi-delta.dn{ color:var(--risk); } .kpi-delta.flat{ color:var(--text-3); }
.kpi-sub{ font-family:'Martian Mono',monospace; font-size:11px; color:var(--text-3); }

/* PANELS / TABLES */
.panel{ background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.panel-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid var(--border); }
.panel-head h4{ font-size:15px; font-weight:600; } .panel-head .mono{ font-size:10px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; }
.dt{ width:100%; border-collapse:collapse; font-size:13.5px; }
.dt th{ font-family:'Martian Mono',monospace; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:right; padding:12px 20px; background:var(--surface-3); border-bottom:1px solid var(--border); position:sticky; top:0; }
.dt th:first-child{ text-align:left; } .dt td{ padding:12px 20px; border-bottom:1px solid var(--border-soft); text-align:right; color:var(--text-2); }
.dt td:first-child{ text-align:left; color:var(--text); font-weight:500; } .dt tr:hover td{ background:var(--surface-2); }
.dt .num{ font-family:'Martian Mono',monospace; font-variant-numeric:tabular-nums; } .dt .pos{ color:var(--profit); } .dt .neg{ color:var(--risk); }

/* ACCENT DOCK (theme/accent dev tool, optional per page) */
.accent-dock{ position:fixed; right:18px; bottom:18px; z-index:60; display:flex; align-items:center; gap:12px; padding:10px 15px;
  background:color-mix(in srgb, var(--surface) 90%, transparent); border:1px solid var(--border); border-radius:100px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 10px 34px rgba(0,0,0,.34); }

@media(max-width:980px){ .g6{ grid-template-columns:repeat(3,1fr); } .g4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:760px){ .g6,.g4,.g3,.g2{ grid-template-columns:1fr; } }