/* ============================================================
   MEDULUS CONSOLE — design tokens + base + components
   Threat-intelligence aggregator UI. Dark + Light themes.
   Brand: Cyan-Indigo · Exo 2 (display) · JetBrains Mono (data)
   ============================================================ */

/* ---------- THEME TOKENS ---------- */
:root[data-theme="dark"] {
  --bg:        #090D15;
  --bg-2:      #06090F;
  --surface:   #10192A;
  --surface-2: #0C1422;
  --elev:      #16223A;
  --rail:      #0A111E;
  --border:    #1E2B43;
  --border-2:  #2A3A57;
  --hover:     #16223A;

  --text:      #DCE4F1;
  --text-2:    #95A6C2;
  --text-3:    #66768F;

  --accent:     #3FD3F7;
  --accent-2:   #6C6CF5;
  --accent-ink: #08121C;
  --grad:       linear-gradient(96deg,#39E6FF 0%,#3B82F6 52%,#6366F1 100%);
  --grad-soft:  linear-gradient(96deg,#39E6FF22 0%,#6366F122 100%);

  --crit: #FF5C7A; --crit-bg:#2A101A; --crit-bd:#5A1E2E;
  --high: #FF914D; --high-bg:#2A1810; --high-bd:#583620;
  --med:  #F2C24B; --med-bg:#26200C; --med-bd:#534726;
  --low:  #4FD3A4; --low-bg:#0E2018; --low-bd:#1E4636;
  --info: #6FA8FF; --info-bg:#0F1B30;

  --shadow: 0 18px 50px -12px rgba(0,0,0,.6);
  --shadow-sm: 0 4px 16px -6px rgba(0,0,0,.5);
  --glow: 0 0 24px -4px #39E6FF55;
  --grid-line: #ffffff08;
}

:root[data-theme="light"] {
  --bg:        #EBEEF3;
  --bg-2:      #E0E5EC;
  --surface:   #FFFFFF;
  --surface-2: #F5F7FB;
  --elev:      #FFFFFF;
  --rail:      #F4F6FA;
  --border:    #E2E7EF;
  --border-2:  #CFD8E4;
  --hover:     #F0F4F9;

  --text:      #121823;
  --text-2:    #4C5A70;
  --text-3:    #7E8BA1;

  --accent:     #0A86B8;
  --accent-2:   #4A3FCB;
  --accent-ink: #FFFFFF;
  --grad:       linear-gradient(96deg,#0A8FBE 0%,#2358DC 52%,#3F31B8 100%);
  --grad-soft:  linear-gradient(96deg,#0A8FBE14 0%,#3F31B814 100%);

  --crit: #D6314F; --crit-bg:#FCE7EC; --crit-bd:#F4C2CD;
  --high: #C2630A; --high-bg:#FCEEDD; --high-bd:#F2D4B0;
  --med:  #98700A; --med-bg:#FBF1D4; --med-bd:#EDDCA6;
  --low:  #0C8A66; --low-bg:#DDF3EC; --low-bd:#B4E2D3;
  --info: #2563C9; --info-bg:#E6EEFB;

  --shadow: 0 18px 44px -16px rgba(28,40,64,.22);
  --shadow-sm: 0 6px 18px -8px rgba(28,40,64,.16);
  --glow: 0 6px 22px -8px #0A8FBE44;
  --grid-line: #1020400a;
}

/* ---------- RESET / BASE ---------- */
*,*::before,*::after { box-sizing: border-box; }
html,body { margin:0; height:100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Exo 2', system-ui, -apple-system, sans-serif;
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background .35s ease, color .35s ease;
}
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
a { color: var(--accent); text-decoration: none; }
::selection { background: #39E6FF44; }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; border:2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- APP SHELL ---------- */
.app { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }

/* source rail */
.rail {
  background: var(--rail);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.rail__brand { display:flex; align-items:center; gap:12px; padding: 20px 20px 18px; border-bottom:1px solid var(--border); }
.rail__brand img { width: 38px; height: 38px; }
.rail__brand .wm { display:flex; flex-direction:column; line-height:1; }
.rail__brand .ely { font-family:'Poiret One',sans-serif; font-size:13px; letter-spacing:.06em; color: var(--text-2); }
.rail__brand .med {
  font-family:'Exo 2'; font-weight:600; font-size:23px; letter-spacing:-.01em;
  background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rail__scroll { overflow-y:auto; flex:1; padding: 14px 12px 20px; }
.rail__group { margin-bottom: 18px; }
.rail__label { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color: var(--text-3); padding: 0 12px 8px; }
.navitem {
  display:flex; align-items:center; gap:11px; padding: 9px 12px; border-radius:9px;
  color: var(--text-2); cursor:pointer; font-size:13.5px; font-weight:500;
  position:relative; transition: background .15s, color .15s; user-select:none;
  text-decoration: none;
}
.navitem:hover { background: var(--hover); color: var(--text); }
.navitem.active { background: var(--grad-soft); color: var(--text); }
.navitem.active::before { content:''; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:3px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.navitem .ico { width:17px; height:17px; flex:none; opacity:.92; }
.navitem .cnt { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--text-3); background: var(--surface); border:1px solid var(--border); padding:1px 7px; border-radius:20px; }
.navitem.active .cnt { color: var(--accent); border-color: var(--border-2); }

.rail__foot { padding: 14px 18px; border-top:1px solid var(--border); font-family:'JetBrains Mono',monospace; font-size:10.5px; color: var(--text-3); letter-spacing:.04em; }
.rail__foot b { color: var(--low); font-weight:500; }

/* main column */
.main { display:flex; flex-direction:column; min-width:0; }

/* topbar */
.topbar {
  display:flex; align-items:center; gap:18px; padding: 0 26px; height:62px;
  border-bottom:1px solid var(--border); background: color-mix(in srgb, var(--bg) 86%, transparent);
  position:sticky; top:0; z-index:20; backdrop-filter: blur(10px);
}
.topbar__title { display:flex; flex-direction:column; line-height:1.15; }
.topbar__title h1 { font-size:17px; font-weight:600; margin:0; letter-spacing:-.01em; }
.topbar__title .sub { font-size:11.5px; color: var(--text-3); font-family:'JetBrains Mono',monospace; letter-spacing:.04em; }
.topbar__spacer { flex:1; }

.search {
  display:flex; align-items:center; gap:9px; background: var(--surface-2); border:1px solid var(--border);
  border-radius:10px; padding: 8px 12px; width: 320px; color: var(--text-3);
}
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px #39E6FF18; }
.search input { background:none; border:none; outline:none; color: var(--text); font-family:'JetBrains Mono',monospace; font-size:12.5px; width:100%; }
.search input::placeholder { color: var(--text-3); }
.search kbd { font-family:'JetBrains Mono',monospace; font-size:10px; border:1px solid var(--border-2); border-radius:5px; padding:1px 5px; color: var(--text-3); }

.live { display:flex; align-items:center; gap:7px; font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--text-2); letter-spacing:.04em; }
.live .dot { width:7px; height:7px; border-radius:50%; background: var(--low); box-shadow:0 0 0 0 var(--low); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--low) 70%,transparent);} 70%{box-shadow:0 0 0 7px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }

.iconbtn { width:36px; height:36px; display:grid; place-items:center; border-radius:9px; border:1px solid var(--border); background: var(--surface-2); color: var(--text-2); cursor:pointer; transition: all .15s; }
.iconbtn:hover { color: var(--text); border-color: var(--border-2); background: var(--hover); }

/* content scroll area */
.content { padding: 26px; max-width: 1500px; width:100%; margin: 0 auto; }
.content--pad { padding: 26px 26px 60px; }

/* ---------- PRIMITIVES ---------- */
.panel { background: var(--surface); border:1px solid var(--border); border-radius:14px; }
.panel--pad { padding: 20px 22px; }
.panel__head { display:flex; align-items:center; gap:12px; padding: 16px 20px; border-bottom:1px solid var(--border); }
.panel__head h3 { margin:0; font-size:14px; font-weight:600; letter-spacing:.01em; }
.panel__head .ey { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-3); }
.panel__head .more { margin-left:auto; font-size:12px; color: var(--text-3); cursor:pointer; }
.panel__head .more:hover { color: var(--accent); }

.eyebrow { font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color: var(--accent); }

/* chips */
.sev { display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-weight:600; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:6px; border:1px solid transparent; white-space:nowrap; }
.sev .pip { width:6px; height:6px; border-radius:50%; }
.sev--crit { color:var(--crit); background:var(--crit-bg); border-color:var(--crit-bd); } .sev--crit .pip{ background:var(--crit);}
.sev--high { color:var(--high); background:var(--high-bg); border-color:var(--high-bd); } .sev--high .pip{ background:var(--high);}
.sev--med  { color:var(--med);  background:var(--med-bg);  border-color:var(--med-bd);  } .sev--med .pip{ background:var(--med);}
.sev--low  { color:var(--low);  background:var(--low-bg);  border-color:var(--low-bd);  } .sev--low .pip{ background:var(--low);}

/* source tags */
.src { display:inline-flex; align-items:center; gap:5px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.04em; font-weight:500; padding:2px 7px; border-radius:5px; border:1px solid var(--border-2); color: var(--text-2); background: var(--surface-2); white-space:nowrap; }
.src .d { width:5px; height:5px; border-radius:50%; }
.src--kev   { color:var(--crit); border-color:var(--crit-bd); } .src--kev .d{background:var(--crit);}
.src--edb   { color:var(--high); border-color:var(--high-bd); } .src--edb .d{background:var(--high);}
.src--msf   { color:var(--accent); border-color:var(--border-2); } .src--msf .d{background:var(--accent);}
.src--akb   { color:var(--info); border-color:var(--border-2); } .src--akb .d{background:var(--info);}
.src--vcdb  { color:var(--accent-2); border-color:var(--border-2); } .src--vcdb .d{background:var(--accent-2);}

/* priority bar */
.pbar { display:flex; align-items:center; gap:9px; }
.pbar__track { width:64px; height:6px; border-radius:4px; background: var(--surface-2); border:1px solid var(--border); overflow:hidden; }
.pbar__fill { height:100%; border-radius:4px; background: var(--grad); }
.pbar__num { font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:600; color: var(--text); min-width:42px; }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:'Exo 2'; font-size:13px; font-weight:500; padding:8px 14px; border-radius:9px; border:1px solid var(--border); background: var(--surface-2); color: var(--text); cursor:pointer; transition: all .15s; }
.btn:hover { border-color: var(--border-2); background: var(--hover); }
.btn--primary { background: var(--grad); border:none; color:#06121E; font-weight:600; }
.btn--primary:hover { filter: brightness(1.06); }
.btn--ghost { background:none; border-color: var(--border); }
.btn--sm { padding:5px 10px; font-size:12px; }

/* segmented */
.seg { display:inline-flex; background: var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:3px; gap:2px; }
.seg button { font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.04em; padding:5px 11px; border-radius:6px; border:none; background:none; color: var(--text-3); cursor:pointer; transition: all .15s; }
.seg button.on { background: var(--elev); color: var(--text); box-shadow: var(--shadow-sm); }

/* select */
.sel { font-family:'JetBrains Mono',monospace; font-size:12px; color: var(--text); background: var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:7px 10px; cursor:pointer; }
.sel:focus { outline:none; border-color: var(--accent); }

/* ---------- STAT CARDS ---------- */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.stat { background: var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px 18px 16px; position:relative; overflow:hidden; }
.stat::after { content:''; position:absolute; inset:0; background: var(--grad-soft); opacity:0; transition:opacity .25s; pointer-events:none; }
.stat:hover::after { opacity:1; }
.stat__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.stat__ico { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; border:1px solid var(--border); background: var(--surface-2); }
.stat__label { font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--text-3); }
.stat__num { font-family:'Exo 2'; font-weight:600; font-size:38px; line-height:1; letter-spacing:-.02em; }
.stat__delta { font-family:'JetBrains Mono',monospace; font-size:11.5px; margin-top:9px; display:flex; align-items:center; gap:6px; }
.delta-up { color: var(--crit); } .delta-down { color: var(--low); } .delta-flat{ color: var(--text-3); }

/* ---------- TABLE ---------- */
.tbl-wrap { overflow-x:auto; }
.tbl { width:100%; border-collapse: collapse; }
.tbl thead th { position:sticky; top:0; background: var(--surface); text-align:left; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color: var(--text-3); font-weight:500; padding:11px 14px; border-bottom:1px solid var(--border); cursor:pointer; user-select:none; white-space:nowrap; }
.tbl thead th .ar { opacity:.5; margin-left:5px; }
.tbl tbody tr { border-bottom:1px solid var(--border); cursor:pointer; transition: background .12s; }
.tbl tbody tr:hover { background: var(--hover); }
.tbl tbody tr.sel { background: var(--grad-soft); }
.tbl td { padding:13px 14px; vertical-align:middle; }
.tbl td.cve { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; color: var(--text); white-space:nowrap; }
.tbl td.cve .hot { color: var(--crit); }
.tbl .title { color: var(--text-2); font-size:13px; max-width:380px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tbl .date { font-family:'JetBrains Mono',monospace; font-size:12px; color: var(--text-3); white-space:nowrap; }
.srcs { display:flex; gap:5px; flex-wrap:wrap; }

/* sortable column headers */
.tbl thead th:not(.th-sortable) { cursor:default; }
.tbl thead th.th-sortable:hover { color: var(--text-2); }
.tbl thead th.sort-active { color: var(--text); }
.tbl thead th.sort-active .ar { opacity:.95; }

/* list pagination footer (shared by table + card-grid list pages) */
.pager { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 4px 2px; }
.pager__info { font-family:'JetBrains Mono',monospace; font-size:11.5px; color: var(--text-3); }
.pager__nav { display:flex; align-items:center; gap:8px; }
.pager__page { font-family:'JetBrains Mono',monospace; font-size:11.5px; color: var(--text-3); min-width:54px; text-align:center; }
.pager__btn { font-family:'JetBrains Mono',monospace; font-size:11.5px; color: var(--text); background: var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:6px 12px; cursor:pointer; transition: all .15s; }
.pager__btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pager__btn:disabled { opacity:.4; cursor:default; }

/* sparkline / spark bars */
.spark { display:flex; align-items:flex-end; gap:3px; height:46px; }
.spark i { flex:1; background: var(--grad); border-radius:2px 2px 0 0; opacity:.85; min-height:3px; }
.spark i:hover { opacity:1; }

/* due date */
.due { font-family:'JetBrains Mono',monospace; font-size:12px; }
.due.soon { color: var(--high); } .due.over { color: var(--crit); } .due.ok { color: var(--text-3); }

/* freshness */
.fresh { display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--border); }
.fresh:last-child { border-bottom:none; }
.fresh__name { font-size:13px; font-weight:500; }
.fresh__meta { font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--text-3); }
.fresh__bar { margin-left:auto; display:flex; align-items:center; gap:8px; }
.statuslamp { width:8px; height:8px; border-radius:50%; }
.lamp-ok{background:var(--low); box-shadow:0 0 8px var(--low);} .lamp-warn{background:var(--med);} .lamp-stale{background:var(--text-3);}

/* ---------- DETAIL (dossier layout) ---------- */
.dossier { max-width: 1180px; }
.back { display:inline-flex; align-items:center; gap:7px; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-3); cursor:pointer; margin-bottom:16px; }
.back:hover { color:var(--accent); }
.dossier__head { display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; padding:24px 26px; }
.dossier__id { font-family:'JetBrains Mono',monospace; font-size:26px; font-weight:600; letter-spacing:-.01em; }
.dossier__title { font-size:16px; color:var(--text-2); margin-top:6px; max-width:640px; line-height:1.45; }
.dcols { display:grid; grid-template-columns: 1fr 340px; gap:16px; align-items:start; }
@media (max-width:1080px){ .dcols{ grid-template-columns:1fr; } }
.sect { margin-bottom:16px; }
.sect__h { font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-3); margin:0 0 12px; display:flex; align-items:center; gap:8px; }
.sect__h .ln { flex:1; height:1px; background:var(--border); }

/* CVSS vector */
.vec { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.vec__cell { background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:10px; text-align:center; }
.vec__cell s { font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.1em; color:var(--text-3); text-decoration:none; display:block; }
.vec__cell b { font-size:13px; font-weight:600; margin-top:4px; display:block; }
.impacts { display:flex; gap:10px; margin-top:10px; }
.impact { flex:1; background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:10px 12px; }
.impact s { font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.1em; color:var(--text-3); text-decoration:none; }
.impact .bar { height:6px; border-radius:4px; background:var(--border); margin-top:8px; overflow:hidden; }
.impact .bar i { display:block; height:100%; border-radius:4px; }
.ih{background:var(--crit);} .il{background:var(--med);} .in{background:var(--text-3);opacity:.4;}

/* package / cpe table */
.ptable { width:100%; border-collapse:collapse; font-size:12.5px; }
.ptable th { text-align:left; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); font-weight:500; padding:8px 10px; border-bottom:1px solid var(--border); }
.ptable td { padding:9px 10px; border-bottom:1px solid var(--border); }
.ptable tr:last-child td { border-bottom:none; }
.eco { font-family:'JetBrains Mono',monospace; font-size:10px; padding:2px 7px; border-radius:5px; border:1px solid var(--border-2); color:var(--accent-2); background:var(--surface-2); }
.ver-int { color:var(--crit); } .ver-fix { color:var(--low); }

/* matrix chips (ATT&CK / D3FEND) */
.mtech { display:flex; flex-direction:column; gap:8px; }
.mrow { display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }
.mrow .mid { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; color:var(--accent); min-width:62px; }
.mrow .mid.d3 { color:var(--low); }
.mrow .mname { font-size:13px; }
.mrow .mtac { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }

/* references */
.refrow { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); cursor:pointer; }
.refrow:last-child { border-bottom:none; }
.refrow:hover .reflbl { color:var(--accent); }
.reftype { font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:5px; border:1px solid var(--border-2); color:var(--text-2); min-width:104px; text-align:center; }
.reflbl { font-size:13px; }
.refhost { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-3); }

/* side facts */
.sfact { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); }
.sfact:last-child { border-bottom:none; }
.sfact s { font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); text-decoration:none; }
.sfact b { font-size:13.5px; font-weight:500; }

/* callout */
.callout { border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:10px; padding:13px 15px; background:var(--surface-2); }
.callout.warn { border-left-color:var(--high); }
.callout.crit { border-left-color:var(--crit); }
.callout .ct { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:6px; }
.withheld { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-3); display:flex; align-items:center; gap:7px; margin-top:8px; }

/* conic priority ring */
.gauge { display:flex; align-items:center; gap:16px; }
.ring { --p:0; width:84px; height:84px; border-radius:50%; display:grid; place-items:center; background: conic-gradient(var(--accent) calc(var(--p)*1%), var(--surface-2) 0); }
.ring__in { width:66px; height:66px; border-radius:50%; background: var(--surface); display:grid; place-items:center; flex-direction:column; }
.ring__in b { font-family:'Exo 2'; font-weight:600; font-size:22px; }
.ring__in s { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em; color: var(--text-3); text-decoration:none; }

/* timeline */
.tl { position:relative; padding-left:20px; }
.tl::before { content:''; position:absolute; left:5px; top:4px; bottom:4px; width:2px; background: var(--border); }
.tl__item { position:relative; padding:0 0 16px; }
.tl__item::before { content:''; position:absolute; left:-19px; top:3px; width:10px; height:10px; border-radius:50%; background: var(--accent); border:2px solid var(--surface); box-shadow:0 0 0 2px var(--border); }
.tl__t { font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--text-3); }
.tl__d { font-size:13px; color: var(--text); margin-top:2px; }

/* misc */
.row { display:flex; align-items:center; gap:10px; }
.wrap-flex { display:flex; gap:8px; flex-wrap:wrap; }
.muted { color: var(--text-3); }
.divider { height:1px; background: var(--border); margin:18px 0; }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns: 2fr 1fr; gap:16px; }
@media (max-width: 1180px){ .stats{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:1fr;} }
@media (max-width: 860px){
  .app{ grid-template-columns:1fr; }
  .rail{ position:fixed; left:0; top:0; z-index:80; width:252px; transform:translateX(-100%); transition:transform .25s ease; box-shadow:var(--shadow); }
  .rail.open{ transform:translateX(0); }
  .search{ display:none; }
  .grid-2{ grid-template-columns:1fr; }
  .content{ padding:18px; }
}
.rail-scrim{ display:none; }
@media (max-width:860px){ .rail-scrim.show{ display:block; position:fixed; inset:0; background:rgba(2,5,10,.5); z-index:70; } }
.hamb{ display:none; }
@media (max-width:860px){ .hamb{ display:grid; } }

/* focus-visible accessibility */
a:focus-visible, button:focus-visible, .navitem:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}

/* empty state */
.empty { text-align:center; color:var(--text-3); padding:56px 24px; }
.empty .ei { color:var(--text-3); opacity:.6; margin-bottom:10px; }
.empty b { display:block; color:var(--text-2); font-size:14px; font-weight:500; }
.empty span { font-family:'JetBrains Mono',monospace; font-size:11px; }

/* loading state */
.loading { text-align:center; color:var(--text-3); padding:56px 24px; }
.loading .spinner { display:inline-block; width:24px; height:24px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; margin-bottom:10px; }
@keyframes spin { to{transform:rotate(360deg);} }
.loading b { display:block; color:var(--text-2); font-size:14px; font-weight:500; margin-top:8px; }

/* fade animation */
.fade-in { animation: fade .4s ease both; }
@keyframes fade { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }