@font-face{font-family:'Twemoji Flags';src:url('/brand/twemoji-flags.woff2') format('woff2');unicode-range:U+1F1E6-1F1FF;font-display:swap}
/* HOSHINO — modern SaaS design system v3 (design-auditor spec, 2026-07-21).
   White canvas · slate neutrals · ONE indigo accent · semantic green/red.
   ZERO gold anywhere (founder-locked). The old --gold* names survive below as
   LEGACY ALIASES pointing at the indigo ramp so every var(--gold*) reference in
   872 lines + app.js inline styles re-skins in one move. Do not reintroduce gold. */
:root {
  /* Neutrals — Collectr near-black, warmed slightly for gold */
  --bg:#0a0a0b; --bg2:#121214; --panel:#17171a; --panel2:#121214;
  --line:#26262a; --line2:#34343a; --line-soft:#161618;
  --ink:#f6f1e6; --ink2:#cfcabf; --mut:#a7a29a; --mut2:#6e6a63;
  --navy:#f6f1e6;

  /* Accent — Kinsei metallic gold */
  --accent-50:#0c1829; --accent-100:#0f1f3a; --accent-200:#1a3566;
  --accent-500:#2F6BFF; --accent-600:#2F6BFF; --accent-700:#1E54E6;

  --gold:#2F6BFF; --gold-btn:#2F6BFF; --gold-dim:#1E54E6; --gold-soft:rgba(47,107,255,.12);

  /* Semantic */
  --pos:#35d6a0; --pos-soft:#0f2019; --pos-line:#1c3a30;
  --neg:#f0616d; --neg-soft:#241416; --neg-line:#40222a;
  --warn:#e0a33a; --warn-soft:#241b0e; --warn-line:#4a3a1e;
  --green:var(--pos); --green-dim:var(--pos-line); --red:var(--neg); --red-dim:var(--neg-line);
  --blue:#6b8cff; --amber:var(--warn);

  --radius:12px; --radius-sm:8px; --radius-lg:16px;
  --shadow-soft:0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35);
  --shadow:0 8px 24px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.55);
  --ring:0 0 0 3px rgba(47,107,255,.22);

  --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --sans:'Twemoji Flags',Inter,-apple-system,"Segoe UI",Roboto,system-ui,"Hiragino Sans","Noto Sans CJK JP","Noto Sans CJK SC","Noto Sans CJK KR","Microsoft YaHei","PingFang SC",sans-serif;

  /* Height of the fixed app top bar. Every fixed/sticky offset below reads this
     one number so the header and the content padding can never drift apart. */
  --topbar-h:52px;
}
/* :root was never closed here, so this rule was swallowed as a bogus declaration
   inside it and never applied. Closed above; the rule works now. */
.lang-switch{max-width:100%;cursor:pointer}
* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; background:var(--bg);
  color:var(--ink); font:14px/1.55 var(--sans); -webkit-font-smoothing:antialiased;
}
a { color:var(--gold); text-decoration:none; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#34343a; border-radius:6px; }
::-webkit-scrollbar-track { background:transparent; }

/* ── Login ─────────────────────────────────────────────────────────── */
.login-wrap { min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:24px; }
.login {
  width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:34px 30px; box-shadow:var(--shadow);
}
.login .logo { font-weight:800; letter-spacing:3px; font-size:22px; }
.login .logo span { color:var(--gold); }
.login .tag { color:var(--mut); margin:6px 0 24px; font-size:12.5px; letter-spacing:.3px; }
.login label { display:block; font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--mut); margin:14px 0 6px; }
.login input {
  width:100%; padding:11px 13px; background:var(--bg2); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--ink); font-size:14px; outline:none;
}
.login input:focus { border-color:var(--gold-dim); box-shadow:0 0 0 3px var(--gold-soft); }
.login .err { color:var(--red); font-size:12.5px; min-height:18px; margin-top:10px; }
.btn-gold {
  width:100%; margin-top:18px; padding:12px; background:#2F6BFF; color:#ffffff;
  border:0; border-radius:var(--radius-sm); font-weight:700; letter-spacing:.5px; cursor:pointer;
  transition:filter .15s;
}
.btn-gold:hover { filter:brightness(1.08); }
.btn-gold:disabled { opacity:.5; cursor:default; }
.login .quote { color:var(--gold-dim); font-style:italic; font-size:12px; text-align:center; margin-top:24px; line-height:1.5; }

/* ── App shell ─────────────────────────────────────────────────────── */
.shell { display:grid; grid-template-columns:230px 1fr; min-height:100vh; min-height:100dvh; }
.nav {
  background:linear-gradient(180deg,var(--bg2),var(--bg)); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; height:100dvh;
}
.nav .brand { padding:20px 22px 16px; font-weight:800; letter-spacing:3px; font-size:18px; border-bottom:1px solid var(--line); }
.nav .brand span { color:var(--gold); }
.nav .links { flex:1; overflow:auto; padding:10px 10px; }
.nav a.link {
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius-sm);
  color:var(--ink2); font-size:13.5px; cursor:pointer; margin-bottom:2px; border:1px solid transparent;
  transition:background .12s,color .12s;
}
.nav a.link:hover { background:#121214; color:var(--ink); }
.nav a.link.active { background:var(--gold-soft); color:var(--gold); border-color:var(--accent-200); }
.nav a.link .ic { width:18px; text-align:center; opacity:.85; }
.nav .foot { border-top:1px solid var(--line); padding:14px 16px; font-size:12px; color:var(--mut); }
.nav .foot .who { color:var(--ink2); font-weight:600; }
.nav .foot .quote { font-style:italic; color:var(--gold-dim); margin:8px 0 10px; line-height:1.45; font-size:12px; }
.nav .foot button { background:none; border:1px solid var(--line); color:var(--mut); padding:5px 10px; border-radius:6px; cursor:pointer; font-size:12px; }
.nav .foot button:hover { color:var(--ink); border-color:var(--mut2); }

.content { padding:26px 30px 60px; overflow:auto; min-width:0; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; gap:16px; flex-wrap:wrap; }
.page-head h1 { font-size:21px; margin:0; letter-spacing:.3px; }
.page-head .sub { color:var(--mut); font-size:12.5px; margin-top:3px; }

/* ── Cards / panels ────────────────────────────────────────────────── */
.grid { display:grid; gap:16px; }
.cols-2 { grid-template-columns:repeat(2,1fr); }
.cols-3 { grid-template-columns:repeat(3,1fr); }
.cols-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:1000px){ .cols-3,.cols-4{grid-template-columns:repeat(2,1fr);} .shell{grid-template-columns:64px 1fr;} .nav .brand,.nav .foot .quote,.nav .foot .who,.nav .foot .mut,.nav a.link span.lbl{display:none;} .nav .foot{padding:12px 6px;text-align:center;} .nav .links{padding:10px 8px;} }
@media (max-width:640px){ .cols-2,.cols-3,.cols-4{grid-template-columns:1fr;} }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; }
.panel.tight { padding:14px 16px; }
.panel h3 { margin:0 0 12px; font-size:13px; letter-spacing:.4px; text-transform:uppercase; color:var(--mut); font-weight:600; }
.panel .big { font-size:28px; font-weight:700; letter-spacing:.3px; font-variant-numeric:tabular-nums; }
.panel .big.gold { color:var(--gold); }
.panel .delta { font-size:13px; margin-top:4px; font-variant-numeric:tabular-nums; }
.pos { color:var(--green); } .neg { color:var(--red); }
.kpi-row { display:flex; align-items:baseline; gap:8px; }
.kpi-sub { color:var(--mut); font-size:12px; }

/* ── Tables ────────────────────────────────────────────────────────── */
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; color:var(--mut); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.6px; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:10px; border-bottom:1px solid var(--line); vertical-align:middle; }
tr:last-child td { border-bottom:0; }
tbody tr:hover { background:#121214; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono); }
.tbl-wrap { overflow:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }

/* ── Badges / chips ────────────────────────────────────────────────── */
.badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:12px; font-weight:700; letter-spacing:.4px; border:1px solid transparent; }
.badge.A1{ background:rgba(90,169,230,.12); color:var(--blue); border-color:rgba(90,169,230,.3);}
.badge.A2{ background:rgba(230,184,90,.12); color:var(--amber); border-color:rgba(230,184,90,.3);}
.badge.A3{ background:rgba(168,130,230,.12); color:#b09ae6; border-color:rgba(168,130,230,.3);}
.badge.A4{ background:rgba(61,220,132,.12); color:var(--green); border-color:rgba(61,220,132,.3);}
.badge.hold{ background:var(--gold-soft); color:var(--gold); border-color:var(--accent-200);}
.badge.live{ background:rgba(61,220,132,.12); color:var(--green); border-color:rgba(61,220,132,.3);}
.badge.stub{ background:#1a1a1e; color:var(--mut); border-color:var(--line); }
.badge.phase-accumulation{ background:rgba(90,169,230,.12); color:var(--blue);}
.badge.phase-momentum{ background:rgba(230,184,90,.14); color:var(--amber);}
.badge.phase-explosion{ background:rgba(255,92,92,.14); color:var(--red);}
.chip { display:inline-block; padding:3px 9px; border:1px solid var(--line); border-radius:20px; font-size:12px; color:var(--ink2); cursor:pointer; margin:0 6px 6px 0; background:var(--bg2); }
.chip:hover { border-color:var(--gold-dim); color:var(--ink); }
.chip.on { background:var(--gold-soft); color:var(--gold); border-color:rgba(47,107,255,.35); }

/* ── Buttons / inputs ──────────────────────────────────────────────── */
.btn { padding:8px 14px; background:var(--bg2); border:1px solid var(--line); color:var(--ink); border-radius:var(--radius-sm); cursor:pointer; font-size:13px; transition:border-color .12s,background .12s; }
.btn:hover { border-color:var(--mut2); }
.btn.primary { background:#2F6BFF;color:#ffffff;border:1px solid #1E4FD1;font-weight:700;box-shadow:0 1px 1px rgba(0,0,0,.28),0 10px 22px -12px rgba(47,107,255,.5),inset 0 1px 0 rgba(255,255,255,.15) }
.btn.primary:hover { filter:brightness(1.08); }
.btn.sm { padding:5px 10px; font-size:12px; }
.btn:disabled { opacity:.5; cursor:default; }
input.fld, select.fld, textarea.fld {
  background:var(--bg2); border:1px solid var(--line); color:var(--ink); border-radius:var(--radius-sm);
  padding:9px 12px; font-size:13px; outline:none; font-family:var(--sans);
}
input.fld:focus, select.fld:focus, textarea.fld:focus { border-color:var(--gold-dim); box-shadow:0 0 0 3px var(--gold-soft); }

/* ── Misc ──────────────────────────────────────────────────────────── */
.mut { color:var(--mut); } .small { font-size:13px; }
.empty { color:var(--mut); padding:30px; text-align:center; border:1px dashed var(--line); border-radius:var(--radius); background:var(--bg2); }
.bar { height:7px; border-radius:6px; background:#1a1a1e; overflow:hidden; }
.bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--gold-dim),var(--gold)); }
.bar.green > i { background:linear-gradient(90deg,var(--green-dim),var(--green)); }
.spinner { display:inline-block; width:14px; height:14px; border:2px solid var(--line); border-top-color:var(--gold); border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; }
@keyframes spin { to{ transform:rotate(360deg);} }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.between { justify-content:space-between; }
.divider { height:1px; background:var(--line); margin:14px 0; }
.rationale { color:var(--mut); font-size:12px; max-width:340px; }
.flag-ok { color:var(--green); } .flag-bad { color:var(--red); font-weight:700; }
.hero-pill { display:inline-flex; align-items:center; gap:6px; background:var(--gold-soft); color:var(--gold); border:1px solid var(--accent-200); padding:4px 11px; border-radius:20px; font-size:12px; font-weight:600; letter-spacing:.4px; }

/* Brain chat */
.chat { display:flex; flex-direction:column; height:calc(100vh - 150px); height:calc(100dvh - 150px); }
.chat .log { flex:1; overflow:auto; padding:6px 2px; }
.msg { max-width:78%; padding:11px 14px; border-radius:14px; margin:8px 0; white-space:pre-wrap; line-height:1.5; }
.msg.user { margin-left:auto; background:var(--gold-soft); border:1px solid var(--accent-200); color:var(--ink); }
.msg.bot { background:var(--panel); border:1px solid var(--line); color:var(--ink2); }
.chat .compose { display:flex; gap:10px; padding-top:12px; border-top:1px solid var(--line); }
.chat .compose input { flex:1; }

/* Scan dropzone */
.drop { border:1.5px dashed var(--line2); border-radius:var(--radius); padding:30px; text-align:center; color:var(--mut); background:var(--bg2); }
.scan-result dl { display:grid; grid-template-columns:140px 1fr; gap:8px 14px; margin:0; }
.scan-result dt { color:var(--mut); font-size:12px; }
.scan-result dd { margin:0; font-weight:600; }

.flash { position:fixed; bottom:22px; right:22px; background:var(--panel); border:1px solid var(--gold-dim); color:var(--ink); padding:12px 16px; border-radius:var(--radius-sm); box-shadow:var(--shadow); font-size:13px; z-index:80; }

/* ════════════════════════════════════════════════════════════════════ */
/* AUTOPILOT LAYER                                                        */
/* ════════════════════════════════════════════════════════════════════ */

/* ── Conviction badges ─────────────────────────────────────────────── */
.conv { display:inline-block; padding:2px 9px; border-radius:6px; font-size:12px; font-weight:800; letter-spacing:.7px; border:1px solid transparent; text-transform:uppercase; }
.conv.watch { background:#161d28; color:var(--mut); border-color:var(--line2); }
.conv.strong { background:rgba(61,220,132,.14); color:var(--green); border-color:rgba(61,220,132,.4); }
.conv.slam_dunk {
  background:linear-gradient(135deg,var(--accent-100),rgba(47,107,255,.06));
  color:var(--gold); border-color:rgba(47,107,255,.45);
  box-shadow:0 0 0 0 var(--accent-200); animation:slamPulse 1.8s ease-in-out infinite;
}
@keyframes slamPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(47,107,255,.40); }
  50%     { box-shadow:0 0 12px 1px rgba(47,107,255,.35); }
}

/* ── Header bell ───────────────────────────────────────────────────── */
.nav .brand-row { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding-right:14px; }
.nav .brand-row .brand { border-bottom:0; flex:1; }
.bell { position:relative; background:none; border:0; cursor:pointer; font-size:16px; padding:6px; line-height:1; color:var(--ink2); border-radius:8px; }
.bell:hover { background:#121214; }
.bell-badge { position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px; background:var(--red); color:#fff; font-size:12px; font-weight:800; border-radius:10px; align-items:center; justify-content:center; }

/* ── Today feed ────────────────────────────────────────────────────── */
.today-sec { margin-bottom:26px; }
.today-sec-head { display:flex; align-items:baseline; gap:12px; margin-bottom:12px; }
.today-sec-head h3 { margin:0; font-size:13px; letter-spacing:.5px; text-transform:uppercase; color:var(--ink2); }
.today-feed { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px; }
.today-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; display:flex; flex-direction:column; gap:12px; transition:border-color .15s,transform .12s; }
.today-card:hover { transform:translateY(-1px); }
.today-card.strong { border-color:rgba(61,220,132,.3); }
.today-card.slam_dunk { border-color:var(--accent-200); background:linear-gradient(180deg,rgba(47,107,255,.04),var(--panel)); box-shadow:0 0 24px rgba(47,107,255,.05); }
.tc-top { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.tc-name { font-size:16px; font-weight:700; margin-top:7px; letter-spacing:.2px; }
.tc-meta { margin-top:3px; }
.tc-metric { text-align:right; flex-shrink:0; }
.tc-metric .big { font-size:24px; line-height:1.1; font-variant-numeric:tabular-nums; }
.tc-why { display:flex; flex-wrap:wrap; gap:6px; }
.why-chip { background:var(--bg2); border:1px solid var(--line); color:var(--ink2); font-size:12px; padding:3px 9px; border-radius:14px; }
.tc-sub { font-variant-numeric:tabular-nums; }
.tc-actions { display:flex; gap:8px; margin-top:2px; flex-wrap:wrap; }
.tc-actions .btn { flex:1; min-width:84px; text-align:center; justify-content:center; }
.btn.ghost { background:transparent; }
.btn.ghost:hover { border-color:var(--red-dim); color:var(--red); }
a.btn { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }

.today-empty { text-align:center; padding:60px 20px; border:1px dashed var(--line); border-radius:var(--radius); background:var(--bg2); }
.today-empty .big-emoji { font-size:46px; margin-bottom:14px; }
.today-empty .big { font-size:20px; font-weight:700; margin-bottom:8px; }

/* ── Automation: guardrails + kill switch ──────────────────────────── */
.guard-panel { padding:18px 20px; }
.guard-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:14px; }
.guard-stat .num { font-size:17px; margin-top:2px; }
.kill-wrap { display:flex; align-items:center; }
.kill {
  display:flex; flex-direction:column; align-items:center; gap:4px; min-width:200px;
  background:#10151d; border:1.5px solid var(--line2); color:var(--ink2);
  padding:16px 22px; border-radius:14px; cursor:pointer; font-weight:800; letter-spacing:1px; font-size:13px;
  transition:all .15s;
}
.kill:hover { border-color:var(--red); color:var(--red); }
.kill .kill-dot { width:12px; height:12px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }
.kill .kill-sub { font-size:12px; font-weight:500; letter-spacing:.3px; color:var(--mut); text-transform:none; }
.kill.on { background:rgba(255,92,92,.1); border-color:var(--red); color:var(--red); animation:killPulse 1.4s ease-in-out infinite; }
.kill.on .kill-dot { background:var(--red); box-shadow:0 0 10px var(--red); }
.kill.on .kill-sub { color:var(--red); opacity:.8; }
@keyframes killPulse { 0%,100% { box-shadow:0 0 0 0 rgba(255,92,92,.3); } 50% { box-shadow:0 0 0 5px rgba(255,92,92,0); } }
.bar > i.over { background:linear-gradient(90deg,var(--red-dim),var(--red)); }

/* ── Automation: rules + audit ─────────────────────────────────────── */
.rule-add { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:6px; }
.rule-list { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.rule-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius-sm); }
.rule-row.off { opacity:.55; }
.chk { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink2); cursor:pointer; }
.audit-list { display:flex; flex-direction:column; max-height:340px; overflow:auto; }
.audit-row { display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:8px 2px; border-bottom:1px solid var(--line); }
.audit-act { font-weight:600; font-size:12.5px; grid-column:1; }
.audit-row .audit-when { grid-column:2; grid-row:1; text-align:right; white-space:nowrap; }
.audit-row .mut.small:not(.audit-when) { grid-column:1; }

/* ── Settings: dials + pills ───────────────────────────────────────── */
.pill-group { display:flex; flex-direction:column; gap:8px; }
.pill { text-align:left; background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 14px; cursor:pointer; color:var(--ink2); transition:all .12s; }
.pill:hover { border-color:var(--mut2); }
.pill.on { background:var(--gold-soft); border-color:rgba(47,107,255,.40); color:var(--ink); }
.pill-lbl { font-weight:700; font-size:13.5px; }
.pill-sub { font-size:12px; color:var(--mut); margin-top:2px; }
.dial-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; align-items:end; }
.dial-lbl { display:block; margin-bottom:6px; }
.dial-chk { padding-bottom:9px; }
.dial-grid .fld { width:100%; }
.chip-checks { display:flex; flex-wrap:wrap; gap:10px; }
.chip-chk { background:var(--bg2); border:1px solid var(--line); border-radius:20px; padding:6px 12px; }

/* ── Onboarding wizard ─────────────────────────────────────────────── */
.wizard { max-width:560px; margin:0 auto; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px 28px; box-shadow:var(--shadow); }
.wiz-dots { display:flex; gap:8px; justify-content:center; margin-bottom:22px; }
.wiz-dot { width:34px; height:4px; border-radius:3px; background:var(--line2); transition:background .2s; }
.wiz-dot.on { background:var(--gold); }
.wiz-body { min-height:220px; }
.wiz-h { font-size:19px; margin:0 0 6px; }
.wiz-body p { margin:0 0 18px; font-size:13px; }
.wiz-nav { display:flex; justify-content:space-between; margin-top:22px; gap:12px; }
.wiz-nav .btn { min-width:120px; justify-content:center; }

/* ── Health ────────────────────────────────────────────────────────── */
.status-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:20px; font-size:12px; font-weight:700; letter-spacing:.4px; border:1px solid; }
.status-pill.ok { background:rgba(61,220,132,.12); color:var(--green); border-color:rgba(61,220,132,.35); }
.status-pill.warn { background:rgba(230,184,90,.12); color:var(--amber); border-color:rgba(230,184,90,.35); }
.status-pill.down { background:var(--neg-soft); color:var(--red); border-color:rgba(255,92,92,.35); }
.fresh-row { display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--line); font-size:13px; }
.fresh-row:last-child { border-bottom:0; }
.dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.dot.ok { background:var(--green); } .dot.warn { background:var(--amber); } .dot.down { background:var(--red); }

/* ── Alerts drawer ─────────────────────────────────────────────────── */
.drawer-back { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:70; display:flex; justify-content:flex-end; }
.drawer { width:min(420px,92vw); height:100%; background:var(--bg2); border-left:1px solid var(--line); padding:18px 20px; overflow:auto; box-shadow:var(--shadow); }
.drawer-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.drawer-head h3 { margin:0; font-size:16px; }
.drawer-list { display:flex; flex-direction:column; gap:10px; }
.alert-row { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; }
.alert-row.unread { border-color:var(--gold-dim); }
.alert-title { font-weight:700; margin-left:8px; }
.alert-body { margin-top:6px; }

/* ════════════════════════════════════════════════════════════════════ */
/* WAVE 1 — TRUST GATE · INVENTORY · FINANCE                              */
/* ════════════════════════════════════════════════════════════════════ */

/* ── Trust verdict badges (clear/flag/veto) + sell-trigger ─────────── */
.trust { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:6px; font-size:12px; font-weight:800; letter-spacing:.5px; border:1px solid transparent; text-transform:uppercase; white-space:nowrap; }
.trust.clear { background:rgba(61,220,132,.14); color:var(--green); border-color:rgba(61,220,132,.4); }
.trust.flag  { background:rgba(230,184,90,.14); color:var(--amber); border-color:rgba(230,184,90,.45); }
.trust.veto  { background:rgba(255,92,92,.16); color:var(--red); border-color:rgba(255,92,92,.55); box-shadow:0 0 0 0 rgba(255,92,92,.4); animation:vetoPulse 1.8s ease-in-out infinite; }
.trust.sell  { background:var(--neg-soft); color:var(--red); border-color:rgba(255,92,92,.4); }
@keyframes vetoPulse { 0%,100% { box-shadow:0 0 0 0 rgba(255,92,92,.4); } 50% { box-shadow:0 0 10px 1px rgba(255,92,92,.3); } }

/* Veto'd today card — clearly blocked, no actions. */
.today-card.vetoed { border-color:rgba(255,92,92,.55); background:linear-gradient(180deg,rgba(255,92,92,.06),var(--panel)); }
.veto-banner { background:rgba(255,92,92,.1); border:1px solid rgba(255,92,92,.4); color:var(--red); font-weight:700; font-size:12.5px; padding:9px 12px; border-radius:var(--radius-sm); text-align:center; }

/* Veto / sell row tints in tables. */
tr.veto-row { background:rgba(255,92,92,.06); }
tr.veto-row:hover { background:rgba(255,92,92,.1); }
tr.veto-row td:first-child { box-shadow:inset 3px 0 0 var(--red); }
tr.sell-row td:first-child { box-shadow:inset 3px 0 0 var(--amber); }

/* ── Inventory ─────────────────────────────────────────────────────── */
code.barcode { font-family:var(--mono); font-size:12px; background:var(--bg2); border:1px solid var(--line); border-radius:5px; padding:2px 7px; color:var(--ink2); letter-spacing:.5px; }

/* ── Sources (global buy-side) ─────────────────────────────────────── */
.cov-h { text-transform:uppercase; letter-spacing:.6px; font-weight:700; margin-bottom:10px; }
.cov-row { margin-bottom:11px; }
.cov-row:last-child { margin-bottom:0; }
.src-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:4px; }
.src-card { background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius); padding:14px 15px; }
.src-card.on { border-color:rgba(61,220,132,.35); }
.src-name { font-weight:700; font-size:14px; }
.edge-stars { color:var(--gold); letter-spacing:1px; font-size:13px; }
.lang-chip { display:inline-block; padding:1px 7px; border-radius:5px; font-size:12px; font-weight:800; letter-spacing:.5px; background:var(--gold-soft); color:var(--gold); border:1px solid var(--accent-200); }
.trust.cf { text-transform:none; }

/* ════════════════════════════════════════════════════════════════════ */
/* WAVE 2 — SELL · ORDERS · TREASURY · LIQUIDITY · SAAS · GRADE MODEL     */
/* ════════════════════════════════════════════════════════════════════ */

/* 13-week cashflow mini-chart (no library — pure flex bars). */
.cf-chart { display:flex; align-items:flex-end; gap:6px; height:120px; padding:6px 2px 0; overflow-x:auto; }
.cf-col { flex:1; min-width:22px; display:flex; flex-direction:column; align-items:center; height:100%; }
.cf-bar-wrap { flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; }
.cf-bar { width:70%; max-width:26px; border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--gold),var(--gold-dim)); min-height:3px; transition:height .2s; }
.cf-bar.neg { background:linear-gradient(180deg,var(--red),var(--red-dim)); }
.cf-wk { font-size:12px; margin-top:5px; font-variant-numeric:tabular-nums; }

/* ── Mobile-first ──────────────────────────────────────────────────── */
@media (max-width:1000px){
  .today-feed { grid-template-columns:1fr; }
  .kill-wrap { width:100%; } .kill { width:100%; }
  .cf-chart { gap:3px; }
  .cf-col { min-width:16px; }
}
@media (max-width:640px){
  .content { padding:18px 14px 70px; }
  .page-head h1 { font-size:18px; }
  .today-card { padding:14px; }
  .tc-actions .btn { flex:1 1 100%; }
  .wizard { padding:20px 16px; }
  .guard-grid { grid-template-columns:repeat(2,1fr); }
  .drawer { width:100vw; }
  .rule-add .fld, .dial-grid .fld, .dial-grid select.fld { width:100%; flex:1 1 100%; }
  .src-grid { grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════════════════════════════ */
/* WAVE 3 — DEAL FEED · NEGOTIATION · BRIEF · INTEL · CONSIGNMENT ·        */
/*          COMPLIANCE · CAPITAL  (the compounding layer)                 */
/* ════════════════════════════════════════════════════════════════════ */

/* ── Deal Feed + content exports ───────────────────────────────────── */
.feed-list { display:flex; flex-direction:column; gap:10px; }
.feed-row { background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 13px; }
.feed-headline { font-weight:600; font-size:13.5px; margin:6px 0 2px; letter-spacing:.2px; }

/* ── Brief body (spoken script, preserve section headers) ──────────── */
.brief-body {
  white-space:pre-wrap; line-height:1.6; font-size:13.5px; color:var(--ink2);
  background:var(--bg2); border:1px solid var(--line); border-left:3px solid var(--gold-dim);
  border-radius:var(--radius-sm); padding:14px 16px; max-height:440px; overflow:auto;
}
.brief-body h2 { font-size:13px; }

/* ── Shared Wave-3 mobile-first ────────────────────────────────────── */
@media (max-width:640px){
  .rule-add .fld, .rule-add select.fld, .dial-grid .fld { width:100%; flex:1 1 100%; }
  .rule-add { gap:6px; }
  .feed-row, .rule-row { padding:11px; }
  .brief-body { font-size:13px; padding:12px; }
}

/* ════════════════════════════════════════════════════════════════════ */
/* SEA RAIL — the focused business (PRIMARY) + collapsed Engine group     */
/* ════════════════════════════════════════════════════════════════════ */

/* Collapsed "Engine (advanced)" nav group — demotes the 30 generic tabs. */
.eng-group { margin-top:8px; border-top:1px solid var(--line); padding-top:8px; }
.eng-toggle {
  display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; margin-bottom:2px;
  background:none; border:1px solid transparent; border-radius:var(--radius-sm);
  color:var(--mut); font-size:12px; letter-spacing:.5px; text-transform:uppercase; font-weight:700;
  cursor:pointer; transition:background .12s,color .12s; font-family:inherit;
}
.eng-toggle:hover { background:#121214; color:var(--ink2); }
.eng-toggle.open { color:var(--ink2); }
.eng-toggle .ic { width:18px; text-align:center; opacity:.85; }
.eng-toggle .eng-caret { margin-left:auto; font-size:12px; opacity:.7; }
.eng-links { display:flex; flex-direction:column; padding-left:6px; border-left:1px solid var(--line); margin-left:8px; }
.eng-links a.link { font-size:13px; }

/* On the rail-collapsed mobile nav, keep the toggle compact. */
@media (max-width:1000px){
  .eng-toggle .lbl, .eng-toggle .eng-caret { display:none; }
  .eng-links { margin-left:0; padding-left:0; border-left:0; }
}

/* ── Gate tracker (3 gates · progress vs threshold · go/no-go) ──────── */
.gate-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.gate-card {
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; display:flex; flex-direction:column; gap:9px;
}
.gate-card.go { border-color:rgba(61,220,132,.4); background:linear-gradient(180deg,rgba(61,220,132,.05),var(--bg2)); }
.gate-n { font-size:12px; text-transform:uppercase; letter-spacing:.7px; color:var(--mut); font-weight:700; }
.gate-label { font-size:14px; font-weight:700; margin-top:2px; color:var(--ink); }
.gate-val { font-variant-numeric:tabular-nums; }
.gate-cur { font-size:22px; font-weight:700; color:var(--gold); }
.gate-card.go .gate-cur { color:var(--green); }
.gate-badge { display:inline-block; padding:2px 9px; border-radius:6px; font-size:12px; font-weight:800; letter-spacing:.7px; border:1px solid transparent; }
.gate-badge.go { background:rgba(61,220,132,.14); color:var(--green); border-color:rgba(61,220,132,.45); }
.gate-badge.nogo { background:#161d28; color:var(--mut); border-color:var(--line2); }

/* ════════════════════════════════════════════════════════════════════ */
/* OPERATOR — the legal/ops legs (permits · payouts · custody · KYC ·     */
/*            insurance · attention queue). The audit's missing 60%.      */
/* ════════════════════════════════════════════════════════════════════ */

/* KPI cta tile — the "Open Operator" / quick-jump panel in a KPI band. */
.kpi-cta { display:flex; flex-direction:column; justify-content:center; }
.kpi-cta .btn { align-self:flex-start; }

/* Footer link to the public /verify cert page. */
.verify-link {
  display:inline-block; margin:10px 0 4px; font-size:12px; color:var(--mut);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:6px 10px;
  transition:border-color .12s,color .12s;
}
.verify-link:hover { color:var(--gold); border-color:var(--gold-dim); }
@media (max-width:1000px){ .verify-link { padding:6px; font-size:0; } .verify-link::first-letter { font-size:16px; } }

/* Attention queue — severity-coded rows. */
.attn-panel.has-attn { border-color:rgba(255,92,92,.35); }
.attn-list { display:flex; flex-direction:column; gap:8px; }
.attn-row {
  display:flex; align-items:flex-start; gap:11px; padding:11px 13px;
  background:var(--bg2); border:1px solid var(--line); border-left:3px solid var(--mut2);
  border-radius:var(--radius-sm);
}
.attn-row.sev-high { border-left-color:var(--red); background:linear-gradient(90deg,rgba(255,92,92,.06),var(--bg2)); }
.attn-row.sev-med  { border-left-color:var(--amber); }
.attn-row.sev-low  { border-left-color:var(--mut2); }
.attn-ic { font-size:15px; line-height:1.2; flex:0 0 auto; }
.attn-main { min-width:0; }
.attn-title { font-weight:600; font-size:13.5px; letter-spacing:.2px; }

/* Permit clock — breach-risk / breached row tints. */
tr.row-risk td { background:rgba(230,184,90,.05); }
tr.row-breach td { background:rgba(255,92,92,.06); }

/* Custody locate output. */
.locate-out { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:24px; margin-top:10px; }

/* Verify note panel (operator footer cta). */
.verify-note { border-left:3px solid var(--gold-dim); }

/* ════════════════════════════════════════════════════════════════════ */
/* CRITICAL MOBILE FIX — dashboard tables CARD-STACK at ≤640px instead of */
/* horizontally overflowing. An operator works shows from a phone.        */
/* Each <tr> becomes a self-contained card; the header row is hidden and  */
/* each <td> stacks as a line. Label-free but readable: the first cell is */
/* the card title, numeric/right cells align right.                       */
/* ════════════════════════════════════════════════════════════════════ */
/* Mobile tables: keep real headers + column alignment, scroll horizontally when
   wider than the screen. (The old stacked pattern dropped every column header,
   turning multi-number tables — Grade-EV ladder, market grid, arb routes — into
   unlabelled columns of numbers.) Scroll is scoped to the table, never the page. */
@media (max-width:640px){
  .tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tbl-wrap table { min-width:480px; }
  .tbl-wrap th, .tbl-wrap td { white-space:nowrap; }
  /* Let the first column (card name) wrap so rows stay short. */
  .tbl-wrap td:first-child { white-space:normal; min-width:120px; }
}

@media (max-width:900px){ .gate-grid { grid-template-columns:1fr; } }

/* ════════════════════════════════════════════════════════════════════ */
/* RE-ARCHITECTURE — grouped nav · HOME command center · phase awareness · */
/*   guided intake · command palette · mobile bottom-nav (DASHBOARD-IA)    */
/* ════════════════════════════════════════════════════════════════════ */

/* Grouped nav generalizes the .eng-* chrome; legacy items are muted. */
.nav-group { margin-top:6px; border-top:1px solid var(--line); padding-top:6px; }
.nav-group:first-child { border-top:0; margin-top:0; padding-top:0; }
.nav a.link.legacy { opacity:.62; }
.nav a.link.legacy:hover { opacity:1; }

/* Phase pill — validation (amber) vs operating (green). */
.phase-pill {
  display:inline-block; margin-left:10px; padding:2px 8px; border-radius:20px;
  font-size:12px; font-weight:800; letter-spacing:.6px; border:1px solid; vertical-align:middle;
}
.phase-pill.validation { background:rgba(230,184,90,.12); color:var(--amber); border-color:rgba(230,184,90,.4); }
.phase-pill.operating  { background:rgba(61,220,132,.12); color:var(--green); border-color:rgba(61,220,132,.4); }

/* Edge-trial chip — honest, quiet, and always one click from the plan page.
   Deliberately NOT a countdown-timer scare: it states what you have and how
   long, and the copy behind it says plainly that nothing is ever charged. */
.trial-chip {
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:calc(100% - 20px); margin:8px 10px 0; padding:6px 10px;
  background:rgba(61,220,132,.10); color:var(--green); border:1px solid rgba(61,220,132,.34);
  border-radius:20px; font:700 12px/1.3 inherit; letter-spacing:.3px; cursor:pointer;
  transition:border-color .12s, background .12s;
}
.trial-chip:hover { background:rgba(61,220,132,.16); border-color:rgba(61,220,132,.55); }
.trial-chip.ending { background:rgba(230,184,90,.12); color:var(--amber); border-color:rgba(230,184,90,.42); }
.trial-chip.ending:hover { background:rgba(230,184,90,.18); }
.trial-chip.lapsed { background:var(--bg2); color:var(--mut); border-color:var(--line2); }
.trial-chip.lapsed:hover { color:var(--ink2); border-color:var(--gold-dim); }

/* Search / command-palette launcher in the sidebar. */
.palette-btn {
  display:flex; align-items:center; gap:10px; width:calc(100% - 20px); margin:8px 10px 2px;
  padding:8px 12px; background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--mut); font-size:13px; cursor:pointer; font-family:inherit; transition:border-color .12s,color .12s;
}
.palette-btn:hover { border-color:var(--gold-dim); color:var(--ink2); }
.palette-btn .ic { width:18px; text-align:center; }
.palette-btn .kbd { margin-left:auto; font-size:12px; border:1px solid var(--line2); border-radius:5px; padding:1px 5px; color:var(--mut); }

/* HOME — phase banner. */
.phase-banner {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:11px 16px; border-radius:var(--radius); border:1px solid var(--line);
  font-size:13.5px; margin-bottom:16px; background:var(--panel);
}
.phase-banner.validation { border-left:3px solid var(--amber); }
.phase-banner.operating  { border-left:3px solid var(--green); }
.phase-banner .btn { margin-left:auto; }

/* HOME — first-run setup card. */
.setup-card { border:1px solid var(--gold-dim); background:linear-gradient(180deg,rgba(47,107,255,.04),var(--panel)); margin-bottom:16px; }

/* HOME — quick actions grid. */
.qa-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:4px; }
.qa-card {
  display:flex; align-items:center; gap:12px; text-align:left; padding:14px 16px; cursor:pointer;
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius); color:var(--ink);
  font-family:inherit; transition:border-color .12s,transform .12s,background .12s;
}
.qa-card:hover { border-color:var(--gold-dim); transform:translateY(-1px); background:var(--panel); }
.qa-ic { font-size:22px; line-height:1; flex:0 0 auto; }
.qa-main { display:flex; flex-direction:column; min-width:0; }
.qa-label { font-weight:700; font-size:13.5px; }
.qa-sub { color:var(--mut); font-size:12px; margin-top:2px; }

/* HOME — attention row action affordances. */
.attn-row .attn-act { margin-left:auto; flex:0 0 auto; align-self:center; }
.attn-go { color:var(--mut); font-size:16px; }
.attn-row:hover .attn-go { color:var(--gold); }

/* Deep-link section focus flash. */
.section-focus { outline:2px solid var(--gold-dim); outline-offset:4px; border-radius:var(--radius);
  animation:sectionFlash 1.8s ease-out; }
@keyframes sectionFlash { 0%{ outline-color:var(--gold); } 100%{ outline-color:transparent; } }

/* Rich empty state — optional CTA + "?" explainer. */
.empty-rich { flex-direction:column; gap:8px; }
.empty-q {
  margin-left:8px; width:20px; height:20px; border-radius:50%; border:1px solid var(--line2);
  background:var(--bg2); color:var(--mut); cursor:pointer; font-size:12px; font-weight:700;
}
.empty-q:hover { color:var(--gold); border-color:var(--gold-dim); }
.empty-help { font-size:12px; color:var(--mut); max-width:520px; margin-top:6px; line-height:1.5; text-align:left; }

/* Guided intake wizard — full-screen overlay reusing the wizard chrome. */
.intake-wiz { max-width:520px; }
.intake-cards { margin-bottom:8px; }
.intake-wiz .rule-row { padding:8px 0; }

/* Command palette. */
.palette-back { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:90; display:flex; justify-content:center; align-items:flex-start; padding-top:12vh; }
.palette { width:min(560px,92vw); background:var(--panel); border:1px solid var(--line2); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.palette-input { width:100%; padding:15px 18px; background:var(--bg2); border:0; border-bottom:1px solid var(--line); color:var(--ink); font-size:15px; outline:none; }
.palette-results { max-height:50vh; overflow:auto; padding:6px; }
.palette-row { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--radius-sm); cursor:pointer; }
.palette-row.active, .palette-row:hover { background:var(--gold-soft); }
.palette-row .pr-ic { width:20px; text-align:center; }
.palette-row .pr-label { flex:1; font-size:13.5px; }
.palette-row .pr-hint { font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--mut); border:1px solid var(--line); border-radius:5px; padding:1px 7px; }

/* Mobile bottom-nav — hidden on desktop. */
.bottom-nav { display:none; }

/* ── Mobile: real bottom-nav for the phone operator (≤700px) ─────────── */
@media (max-width:700px){
  .shell { grid-template-columns:1fr; }
  /* Collapse the full sidebar; the bottom-nav drives navigation instead. */
  .nav { position:fixed; bottom:0; left:0; right:0; top:auto; height:auto; flex-direction:row;
    z-index:60; border-right:0; border-top:1px solid var(--line); display:none; }
  .bottom-nav {
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:65; height:58px;
    background:var(--bg2); border-top:1px solid var(--line);
  }
  .bn-tab {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    background:none; border:0; color:var(--mut); font-family:inherit; cursor:pointer; padding:6px 2px;
  }
  .bn-tab.active { color:var(--gold); }
  .bn-ic { font-size:18px; line-height:1; }
  .bn-lbl { font-size:12px; letter-spacing:.2px; }
  .content { padding-bottom:78px; }
  .qa-grid { grid-template-columns:1fr 1fr; }
  .phase-banner .btn { margin-left:0; width:100%; }
  .palette { width:96vw; }
  /* Fatter tap targets on the HOME attention Pay/→ buttons. */
  .attn-row .btn.sm { padding:8px 14px; }
  .flip-grid { grid-template-columns:1fr; }
}

/* ── FLIP SCANNER — the cash engine view ─────────────────────────────── */
.flip-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; }
.flip-card { padding:16px; display:flex; flex-direction:column; gap:12px; }
.flip-head { display:flex; align-items:center; gap:12px; min-width:0; }
.flip-head.link { cursor:pointer; }
.flip-head.link:hover .flip-name strong { color:var(--gold); }
.flip-under { flex:none; text-align:right; font-size:25px; font-weight:800; line-height:1; color:var(--gold); display:flex; flex-direction:column; align-items:flex-end; }
.flip-under.hot { color:#15803d; }
.flip-under span { font-size:9.5px; font-weight:600; color:var(--mut); letter-spacing:.4px; text-transform:uppercase; margin-top:4px; }
.flip-name { margin:0 0 3px; font-size:15px; line-height:1.2; }
/* Hero: the two money numbers, set apart in their own panel so the eye lands there. */
.flip-hero { display:flex; gap:10px; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:11px 12px; }
.flip-hero-stat { flex:1; text-align:center; }
.flip-hero-v { font-size:21px; font-weight:800; line-height:1.1; }
.flip-hero-l { font-size:10px; color:var(--mut); text-transform:uppercase; letter-spacing:.5px; margin-top:3px; }
.flip-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:9px 16px; padding-top:12px; border-top:1px solid var(--line); }
.flip-route { padding:8px 10px; background:var(--panel2); border-radius:8px; }
/* Grade my card — photo + pre-grade side by side */
.gradeai-out { align-items:start; }
.gradeai-photo { width:100%; max-width:360px; border-radius:10px; border:1px solid var(--line); display:block; }
.flip-metric-v { font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace; font-size:14px; font-weight:600; margin-top:1px; }
.stat .stat-v { font-size:22px; font-weight:800; }
.badge.FLIP { background:var(--accent-50); color:var(--gold); border:1px solid var(--accent-200); }

/* ════════════════════════════════════════════════════════════════════
   HOSHINO PRO — the product surface
   ════════════════════════════════════════════════════════════════════ */

/* flow strip — the product in one row */
.flow-strip { display:flex; align-items:center; gap:2px; flex-wrap:wrap; background:var(--panel);
  border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.flow-step { display:flex; align-items:center; gap:7px; background:var(--panel2); color:var(--ink);
  border:1px solid var(--line); border-radius:10px; padding:9px 13px; cursor:pointer; font-size:13px; }
.flow-step:hover { border-color:var(--gold-dim); color:var(--gold); }
.flow-step .fs-ic { font-size:15px; }
.flow-arrow { color:var(--mut); margin:0 4px; }

/* mini rows (movers / alerts / academy lists) */
.mini-row { display:flex; align-items:center; gap:10px; padding:8px 6px; border-bottom:1px solid var(--line);
  cursor:pointer; border-radius:6px; }
.mini-row:hover { background:var(--panel2); }
.mini-row .grow, .grow { flex:1; min-width:0; }
.mini-row.unread { background:var(--gold-soft); }
.mini-img { width:30px; height:auto; border-radius:3px; }
.col.gap { display:flex; flex-direction:column; gap:8px; }
.row.wrap { flex-wrap:wrap; }

/* trend chips */
.trend-chip { font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px; }
.trend-chip.pos { color:var(--pos); background:var(--pos-soft); }
.trend-chip.neg { color:var(--neg); background:var(--neg-soft); }

/* card picker */
.picker { position:relative; flex:1; min-width:220px; }
.picker .fld { width:100%; }
.picker-drop { position:absolute; left:0; right:0; top:100%; z-index:40; background:var(--bg2);
  border:1px solid var(--line2); border-radius:0 0 10px 10px; max-height:280px; overflow:auto;
  box-shadow:0 12px 30px rgba(0,0,0,.5); }
/* Shown above the results when the engine had to drop terms it couldn't match.
   Amber, not jade: this is a caveat about the results, not a result. */
.picker-relax { padding:9px 12px; font-size:12.5px; line-height:1.5; color:var(--ink2);
  background:rgba(232,178,74,.08); border-bottom:1px solid rgba(232,178,74,.25); }
.picker-hit { display:flex; gap:10px; align-items:center; padding:9px 12px; cursor:pointer;
  border-top:1px solid var(--line); }
.picker-hit:hover { background:var(--panel2); }
.picker-hit img { width:30px; border-radius:3px; }
.picker-ph { width:30px; text-align:center; }

/* scan */
.cam-wrap { position:relative; margin-top:12px; border-radius:12px; overflow:hidden; border:1px solid var(--line2); }
.cam { width:100%; max-height:420px; object-fit:cover; display:block; background:#000; }
.cam-guide { position:absolute; inset:8% 22%; border:2px dashed rgba(255,255,255,.75); border-radius:12px;
  pointer-events:none; }
.dropzone { border:2px dashed var(--line2); border-radius:12px; padding:22px; text-align:center; cursor:pointer;
  transition:border-color .15s, background .15s; }
.dropzone:hover, .dropzone.over { border-color:var(--gold-dim); background:var(--gold-soft); }
.dz-ic { font-size:26px; margin-bottom:6px; color:var(--gold); }
.scan-hit h2 { margin:2px 0; }

/* card hub */
.hub-grid { display:grid; grid-template-columns:260px 1fr; gap:16px; align-items:start; }
.hub-img { width:100%; border-radius:12px; border:1px solid var(--line); display:block; }
.hub-img.ph { aspect-ratio:63/88; display:grid; place-items:center; font-size:40px; background:var(--panel); }
@media (max-width:900px) { .hub-grid { grid-template-columns:1fr; } .hub-left { max-width:280px; margin:0 auto; } }

/* charts */
.chart-wrap { width:100%; }
.line-chart { width:100%; height:170px; display:block; }
.chart-t { fill:var(--mut); font-size:12px; font-family:var(--sans,Inter,-apple-system,"Segoe UI",Roboto,system-ui,sans-serif); font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:-.01em; }
.chart-empty { padding:26px; text-align:center; }

/* buy row */
.buy-row { margin-top:4px; }

/* upgrade panel */
.upgrade-panel { text-align:center; border-color:var(--gold-dim); }
.upgrade-panel .up-ic { font-size:30px; color:var(--gold); margin-bottom:6px; }

/* plans */
/* Monthly ⇄ Annual switch above the plan grid. Both buttons are ≥44px tall so
   the control is usable on a phone, where this page is most often opened. */
.cycle-toggle { display:flex; gap:8px; margin:0 0 14px; flex-wrap:wrap; }
.cycle-toggle .btn { min-height:44px; }
.plans-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.plan-card { position:relative; background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:18px; display:flex; flex-direction:column; gap:8px; }
.plan-card.hero { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 14px 40px rgba(47,107,255,.08); }
.plan-card.current { outline:2px solid var(--line2); }
.plan-flag { position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:var(--gold);
  color:#ffffff; font-size:12px; font-weight:800; letter-spacing:.8px; padding:3px 10px; border-radius:999px; }
.plan-price { font-size:28px; font-weight:800; }
.plan-feats { margin:0; padding-left:18px; color:var(--mut); font-size:12.5px; display:flex; flex-direction:column; gap:5px; }
.plan-card button { margin-top:auto; }

/* academy */
.lesson-row { display:flex; align-items:center; gap:10px; padding:8px 6px; border-bottom:1px solid var(--line);
  cursor:pointer; border-radius:6px; }
.lesson-row:hover { background:var(--panel2); }
.lesson-row.locked { opacity:.55; }
.lesson-row .l-ic { width:20px; text-align:center; color:var(--gold); }
.lesson p { line-height:1.6; margin:10px 0; }
.post { padding:10px 0; border-bottom:1px solid var(--line); }
.replies { margin:8px 0 0 14px; padding-left:10px; border-left:2px solid var(--line2); }
.reply { padding:4px 0; }

/* api keys */
.key-reveal { border-color:var(--gold); }
.key-code { display:block; background:var(--bg2); border:1px solid var(--line2); border-radius:8px;
  padding:10px 12px; margin:8px 0; font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace; font-size:12.5px;
  word-break:break-all; user-select:all; }

/* misc product */
.cta-panel { border-color:var(--gold-dim); }
.row-best td { background:var(--gold-soft); }
.btn.danger { color:var(--neg); }
.fld.sm { padding:6px 8px; font-size:12.5px; width:auto; }
.auth-toggle { text-align:center; margin-top:16px; }
.auth-toggle a { color:var(--gold); }

/* ════════════════════════════════════════════════════════════════════
   LIGHT SAAS OVERRIDES — polish layer for the white theme.
   Later rules win: these retune every component that hardcoded a dark
   value, and add the soft-shadow / crisp-border language of a modern
   SaaS (Collectr-grade). Keep every selector name (structural tests).
   ════════════════════════════════════════════════════════════════════ */

/* — canvas + type — */
body { background:var(--bg); }
.page-head h1 { color:var(--navy); font-weight:800; font-size:22px; letter-spacing:-.2px; }
h2 { color:var(--navy); }
.content { background:linear-gradient(180deg,#121214 0%, #0a0a0b 240px); }

/* — panels: white cards with a whisper of depth — */
.panel { box-shadow:var(--shadow-soft); }
.tbl-wrap { box-shadow:var(--shadow-soft); }
.panel h3 { color:#475569; }

/* — buttons: gold = the buy/primary language; everything else crisp white — */
.btn { background:var(--panel); border-color:var(--line2); }
.btn:hover { background:var(--panel2); border-color:#c3cdd9; }
.btn.primary, .btn-gold { background:#2F6BFF;color:#ffffff;border:1px solid #1E4FD1;font-weight:700;box-shadow:0 1px 1px rgba(0,0,0,.28),0 10px 22px -12px rgba(47,107,255,.5),inset 0 1px 0 rgba(255,255,255,.15) }
.btn.primary:hover, .btn-gold:hover { filter:brightness(1.04); }
.btn.ghost { background:transparent; }
.plan-flag { background:linear-gradient(180deg,#dcb658,#c2933a); color:#2a1e04; }

/* — nav: white rail, calm hover, gold-tint active — */
.nav { background:var(--panel); border-right:1px solid var(--line); }
.nav a.link:hover { background:#1a1a1e; color:var(--ink); }
.nav a.link.active { background:var(--gold-soft); color:var(--gold-dim); border-color:var(--accent-200); }
.eng-toggle:hover { background:#1a1a1e; color:var(--ink2); }
.bell:hover { background:#1a1a1e; }
.palette-btn:hover { background:#1a1a1e; }

/* — tables: airy header band, gentle zebra hover — */
.tbl-wrap th { background:var(--panel); }
tbody tr:hover { background:var(--panel); }

/* — chips / badges that assumed dark backing — */
.badge.stub { background:#1a1a1e; color:var(--mut); border-color:var(--line); }
.conv.watch { background:#1a1a1e; color:#475569; border-color:var(--line2); }
.gate-badge.nogo { background:#1a1a1e; color:var(--mut); border-color:var(--line2); }
.bar { background:#26262a; }

/* — overlays: slate glass, not black glass — */
.drawer-back { background:rgba(15,28,46,.32); }
.palette-back { background:rgba(15,28,46,.36); }
.picker-drop { background:var(--panel); border-color:var(--line2); box-shadow:0 16px 40px rgba(15,28,46,.14); }
.picker-hit:hover { background:var(--panel); }
.mini-row:hover { background:var(--panel); }
.drawer, .palette { background:var(--panel); box-shadow:0 24px 60px rgba(15,28,46,.18); }
.flash { background:var(--panel); border:1px solid var(--line2); border-left:3px solid var(--gold-btn); box-shadow:var(--shadow); }

/* — operator bits that hardcoded dark — */
.kill { background:#121214; border-color:var(--line2); color:var(--ink2); }

/* — login: soft-branded welcome — */
.login-wrap { background:
  radial-gradient(900px 460px at 85% -10%, rgba(47,107,255,.08), transparent 60%),
  radial-gradient(700px 420px at -10% 110%, rgba(37,99,235,.05), transparent 60%),
  var(--bg); }
.login { box-shadow:var(--shadow); border-radius:18px; }
.login .logo { color:var(--navy); }
.login input { background:var(--panel); }

/* — product surfaces — */
.flow-strip { box-shadow:var(--shadow-soft); }
.flow-step { background:var(--panel); }
.flow-step:hover { background:var(--gold-soft); }
.hub-img { box-shadow:var(--shadow-soft); }
.upgrade-panel { background:var(--panel); }
.cta-panel { background:var(--panel); }
.plan-card { box-shadow:var(--shadow-soft); }
.plan-card.hero { box-shadow:0 0 0 1px var(--gold-btn), 0 18px 44px rgba(47,107,255,.14); }
.key-reveal { background:var(--panel); }
.key-code { background:#121214; }
.lesson-row:hover { background:var(--panel); }
.post { border-color:var(--line); }
.dropzone { background:var(--panel); }
.dropzone:hover, .dropzone.over { background:var(--gold-soft); }
.chart-t { fill:#94a3b8; }
.auth-toggle a { font-weight:600; }

/* — mobile bottom nav: DARK glass bar, safe-area aware (PWA).
   2026-08-01 fix: this was rgba(255,255,255,.94) — a leftover from the white
   theme that painted a WHITE bar over the near-black app. var(--bg2)=#121214
   → rgba(18,18,20,.94). Text stays on the jade/muted tokens (AA on dark:
   --mut #a7a29a ≈7:1, jade #2F6BFF/#1E54E6 ≈9-10:1 against #121214). — */
.bottom-nav { background:rgba(18,18,20,.94); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom, 0); }
.bn-tab { color:var(--mut); }
.bn-tab.active { color:var(--gold-dim); }

/* ════════════════════════════════════════════════════════════════════
   PWA + TOUCH POLISH — installable-app feel on iPhone + Android.
   Last block in the file: wins the cascade over anything above.
   ════════════════════════════════════════════════════════════════════ */

/* No grey tap-flash; no iOS text auto-resize; momentum scrolling everywhere. */
* { -webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.content, .nav .links, .picker-drop, .palette, .drawer, .tbl-wrap, .hits { -webkit-overflow-scrolling:touch; }

/* Chrome (nav + action controls) shouldn't select like body copy on a long-press. */
.nav, .bottom-nav, .btn, .btn-gold, .bn-tab, .flow-step, .tab { -webkit-user-select:none; user-select:none; }

/* Smooth, un-janky pressed state on the phone. */
.btn:active, .btn-gold:active, .bn-tab:active, .flow-step:active { transform:translateY(1px); }

@media (max-width:700px){
  /* Paint into the iOS notch / rounded corners; keep text off the edges. */
  .content { padding:max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
             calc(84px + env(safe-area-inset-bottom, 0)) max(16px, env(safe-area-inset-left)); }
  /* iOS zooms any focused field under 16px — pin phone inputs to 16px.
     The element selectors above are beaten by ANY class rule, so a field styled
     through a class keeps its small size and still triggers the zoom (and iOS
     never zooms back out). `.palette-input` at 15px was doing exactly that, so
     the class-level offenders are pinned explicitly. */
  input, select, textarea, .fld, .login input { font-size:16px; }
  .palette-input, .picker-input, input.fld, select.fld, textarea.fld { font-size:16px; }
  /* Apple-standard ≥44px tap targets on the bottom bar. */
  .bottom-nav { min-height:56px; }
  .bn-tab { min-height:52px; }
  .bn-ic { transition:transform .12s ease; }
  .bn-tab.active .bn-ic { transform:translateY(-1px) scale(1.08); }
  /* Full-width, thumb-friendly primary buttons in stacked forms. */
  .login { width:100%; }
}

/* When actually launched as an installed app, the login hero also clears the notch. */
@media (display-mode:standalone){
  .login-wrap { padding-top:env(safe-area-inset-top, 0); }
}

/* ── Portfolio stock-app hero (big value + today's move + sparkline) ── */
.port-hero { background:var(--panel); }
.port-hero-val { font-size:42px; font-weight:800; letter-spacing:-.6px; line-height:1.02; margin:2px 0 4px; color:var(--ink); }
.port-hero-chg { font-size:15px; font-weight:700; }
.port-hero-chg.pos { color:var(--pos); }
.port-hero-chg.neg { color:var(--neg); }
.port-hero-spark { width:240px; max-width:46%; opacity:.95; }
@media (max-width:640px){ .port-hero-spark { display:none; } .port-hero-val { font-size:34px; } }

/* ════════════════════════════════════════════════════════════════════
   V3 MODERN-SAAS POLISH (design-auditor spec) — final layer, wins cascade.
   Flat indigo primaries · neutral active nav w/ accent icon · border-first
   depth · disciplined type · AA contrast. ZERO gold.
   ════════════════════════════════════════════════════════════════════ */

/* layout rhythm */
/* The app shell used to stop at 1440px, which on a 2560px monitor left ~560px of
   dead margin down each side — the "blank spaces on the left and right for every
   tab". This is a data-dense product (grids, tables, card walls); width is USEFUL
   here, unlike a prose page where a long measure hurts reading.
   So the cap rises with the viewport, and the two things that make width pay off
   — more columns and larger type — scale with it in the block below. */
.content { max-width:2100px; margin:0 auto; padding:32px 40px 64px; }

/* ── large desktop: use the space, don't just stretch into it ──────────────── */
@media (min-width:1500px){
  body { font-size:15px; }
  .content { padding:38px 56px 72px; }
  .cols-3 { grid-template-columns:repeat(4,1fr); }
  .cols-4 { grid-template-columns:repeat(5,1fr); }
  .grid { gap:18px; }
  .page-head h1 { font-size:27px; }
  .page-head .sub { font-size:14px; }
  .today-feed { grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); }
  .src-grid  { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
}
@media (min-width:2000px){
  body { font-size:16px; }
  .content { padding:44px 72px 84px; }
  .cols-3 { grid-template-columns:repeat(5,1fr); }
  .cols-4 { grid-template-columns:repeat(6,1fr); }
  .page-head h1 { font-size:30px; }
}
.page-head { margin-bottom:24px; }
.page-head h1 { font-size:24px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.page-head .sub { font-size:13px; }

/* buttons — flat, crisp, one accent */
.btn { background:var(--panel); border:1px solid var(--line2); color:var(--ink2); font-weight:500;
  border-radius:var(--radius-sm); box-shadow:none; }
.btn:hover { background:#121214; border-color:#94a3b8; color:var(--ink); }
.btn.primary, .btn-gold { background:#2F6BFF;color:#ffffff;border:1px solid #1E4FD1;font-weight:700;box-shadow:0 1px 1px rgba(0,0,0,.28),0 10px 22px -12px rgba(47,107,255,.5),inset 0 1px 0 rgba(255,255,255,.15) }
.btn.primary:hover, .btn-gold:hover { filter:brightness(1.05); transform:translateY(-1px); }
.btn.ghost { background:transparent; border-color:transparent; color:var(--mut); }
.btn.ghost:hover { background:#1a1a1e; color:var(--ink2); border-color:transparent; }
.btn.ghost.danger { color:var(--neg); }
.btn.ghost.danger:hover { background:var(--neg-soft); border-color:var(--neg-line); }
:focus-visible { outline:2px solid var(--accent-600); outline-offset:2px; }

/* nav — white rail, neutral active + accent icon (the Linear pattern) */
.nav { background:var(--panel); }
.nav .brand { letter-spacing:-.01em; font-size:17px; font-weight:700; }
.nav .brand em { color:var(--accent-600); font-style:normal; }
.nav a.link.active { background:#1a1a1e; color:var(--ink); font-weight:600; border-color:transparent; }
.nav a.link.active .ic { color:var(--accent-600); opacity:1; }
.nav .foot .quote { display:none; }

/* login — calm card, whisper of indigo */
.login-wrap { background:
  radial-gradient(640px 420px at 50% -10%, rgba(99,102,241,.06), transparent 60%), var(--bg); }
.login { border-radius:var(--radius-lg); padding:36px 32px; }
.login .logo { letter-spacing:-.02em; font-size:24px; font-weight:700; }
.login label { text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:600; color:var(--ink2); }
.login input { background:var(--panel); }
.login input:focus { border-color:var(--accent-600); box-shadow:var(--ring); }
.login .quote { display:none; }
.auth-toggle a { color:var(--accent-700); font-weight:600; }

/* inputs */
.fld { background:var(--panel); border-color:var(--line2); border-radius:var(--radius-sm); }
.fld:focus { border-color:var(--accent-600); box-shadow:var(--ring); outline:none; }

/* tables — airy header band, quiet internals, Inter numerals */
.tbl-wrap { box-shadow:var(--shadow-soft); }
.tbl-wrap th, th { background:#121214; letter-spacing:.06em; }
td { border-bottom:1px solid var(--line-soft); }
td.num, th.num { font-family:var(--sans); }
tbody tr:hover { background:#121214; }

/* KPI cards */
.panel { box-shadow:var(--shadow-soft); }
.panel h3 { font-size:12px; letter-spacing:.08em; font-weight:650; }
.panel .big.gold { color:var(--accent-700); }

/* badges/chips — wash-50 + line-200 + text-700 recipe */
.badge.live { background:var(--pos-soft); color:var(--pos); border-color:var(--pos-line); font-weight:600; }
.badge.stub { background:#1a1a1e; color:#475569; border-color:var(--line); font-weight:600; }
.trend-chip { border:0; font-weight:700; }
.trend-chip.pos { background:var(--pos-soft); }
.trend-chip.neg { background:var(--neg-soft); }

/* plan cards — hero = indigo ring, no glow */
.plan-card.hero { box-shadow:0 0 0 1px var(--accent-600), var(--shadow); border-color:var(--accent-600); }
.plan-flag { background:linear-gradient(180deg,#dcb658,#c2933a); color:#2a1e04; letter-spacing:.04em; }

/* accent panels — faint indigo top wash */
.upgrade-panel, .cta-panel, .key-reveal { border-color:var(--accent-200);
  background:linear-gradient(180deg,#1a150c,#17171a 70%); }

/* overlays — slate glass */
.drawer-back { background:rgba(15,23,42,.40); }
.palette-back { background:rgba(15,23,42,.40); }
.flash { border-left:3px solid var(--accent-600); }

/* progress + spinners */
.bar { background:var(--line-soft); }
.bar > i { background:var(--accent-600); }
.spinner { border-top-color:var(--accent-600); }

/* contrast fixes — decorative token off real text */
.kbd, .pr-hint, .chart-t { color:var(--mut); fill:var(--mut); }

/* empty states — solid, calm */
.empty { border-style:solid; border-color:var(--line); background:var(--panel); color:var(--mut); }

/* mobile bottom nav — accent active */
.bn-tab.active { color:var(--accent-600); }
/* snkr (default, light) — the primary mobile nav must be white glass, not the onyx dark bar */
:root[data-theme="snkr"] .bottom-nav { background:rgba(255,255,255,.94); border-top-color:var(--line); }

/* portfolio hero */
.port-hero { background:var(--panel); }
.port-hero-chg.pos { color:var(--pos); }
.port-hero-chg.neg { color:var(--neg); }

/* Live-sync refresh pill — shown when another device updated data while this
   view has focused input (so we don't clobber typing). Tap to refetch. */
.sync-pill{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0));transform:translateX(-50%);
  z-index:95;background:var(--accent-600);color:#ffffff;font-size:13px;font-weight:600;
  padding:10px 16px;border-radius:999px;box-shadow:var(--shadow);cursor:pointer;border:0}
.sync-pill:hover{background:var(--accent-700)}
@media (max-width:700px){ .sync-pill{bottom:calc(74px + env(safe-area-inset-bottom,0))} }

/* ── Seller Showcase / Show Mode ─────────────────────────────────────── */
.show-grid-inner{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.show-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s;box-shadow:var(--shadow-soft)}
.show-card:hover{border-color:var(--accent-200);transform:translateY(-2px);box-shadow:var(--shadow)}
.show-card.deal{border-color:var(--accent-200)}
.show-img-wrap{position:relative;background:#121214;aspect-ratio:63/88;display:grid;place-items:center;overflow:hidden}
.show-img{width:100%;height:100%;object-fit:contain}
.show-img.ph{font-size:40px}
.show-grade{position:absolute;top:8px;right:8px;background:var(--accent-600);color:#ffffff;font-size:12px;font-weight:700;padding:2px 7px;border-radius:999px}
.show-body{padding:11px 12px}
.show-name{font-weight:600;font-size:13.5px;line-height:1.25;color:var(--ink)}
.show-set{margin:1px 0 6px}
.show-price{font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.show-sigs{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.sig{font-size:12px;font-weight:600;padding:2px 7px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.sig-deal{background:var(--pos-soft);color:var(--pos);border-color:var(--pos-line)}
.sig-good{background:var(--pos-soft);color:var(--pos);border-color:var(--pos-line)}
.sig-hot{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.sig-grade{background:var(--accent-50);color:var(--accent-700);border-color:var(--accent-200)}
.sig-rare{background:var(--accent-50);color:var(--accent-700);border-color:var(--accent-200)}
.sig-market{background:#17150e;color:#1d4ed8;border-color:#bfdbfe}
.sig-scarce{background:#1a1a1e;color:#475569;border-color:var(--line)}
.sig-info{background:#121214;color:var(--mut);border-color:var(--line)}
.show-note{margin-top:8px;font-size:12px;font-style:italic;color:var(--ink2)}

.show-detail-back{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:90;display:grid;place-items:center;padding:20px}
.show-detail{background:var(--panel);border-radius:var(--radius-lg);max-width:640px;width:100%;max-height:88vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;box-shadow:var(--shadow)}
.show-detail-img{width:100%;object-fit:contain;background:#121214;max-height:88vh}
.show-detail-img.ph{display:grid;place-items:center;font-size:64px;aspect-ratio:63/88}
.show-detail-body{padding:22px}
.show-detail-name{font-size:20px;font-weight:700;letter-spacing:-.01em}
.show-detail-price{font-size:34px;font-weight:800;letter-spacing:-.02em;margin-top:10px;font-variant-numeric:tabular-nums}
@media(max-width:640px){.show-detail{grid-template-columns:1fr}.show-detail-img{max-height:44vh}}

/* Kiosk / Present full-screen */
.kiosk{position:fixed;inset:0;background:var(--panel);z-index:88;display:flex;flex-direction:column;padding:16px env(safe-area-inset-right,16px) env(safe-area-inset-bottom,16px) env(safe-area-inset-left,16px)}
.kiosk-head{display:flex;justify-content:space-between;align-items:center;padding:8px 4px 14px}
.kiosk-title{font-size:20px;font-weight:700;letter-spacing:-.01em}
.kiosk-grid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;align-content:start}

/* ── Real-World Price hero (the moat, made obvious) ─────────────────────── */
.rw-hero{background:linear-gradient(180deg,#1a150c,#17171a 60%);border-color:var(--accent-200)}
.rw-price{font-size:38px;font-weight:800;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;margin:6px 0 2px}
.rw-compare{background:#121214;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;margin-top:14px;font-size:13px}
.rw-gap{color:var(--warn);font-weight:700}
.rw-regions{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px;margin-top:14px}
.rw-region{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 8px;text-align:center}
.rw-region-flag{font-size:18px}
.rw-region-label{font-size:12px;color:var(--mut);margin:2px 0}
.rw-region-price{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.rw-region:first-child{border-color:var(--pos-line);background:var(--pos-soft)}
.rw-region:last-child{border-color:var(--accent-200);background:var(--accent-50)}
.rw-arb{margin-top:14px;padding:14px;border-radius:var(--radius-sm);background:linear-gradient(135deg,rgba(21,128,61,.06),rgba(47,107,255,.05));border:1px solid var(--pos-line);font-size:13.5px;line-height:1.5}
.rw-lock{margin-top:14px;padding:14px 16px;border-radius:var(--radius-sm);border:1px dashed var(--accent-200);background:var(--accent-50);display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;font-size:13px;color:var(--ink2)}
.rw-lock .btn{white-space:nowrap}
.rw-platforms{margin-top:12px}
.rw-platforms summary{cursor:pointer;font-size:12.5px;color:var(--mut);font-weight:600}

/* MOBILE OVERFLOW FIX — the `.content { max-width:1440px; margin:0 auto }` centering
   rule sizes content to its own contents on small screens, overflowing the shell track
   and causing horizontal scroll (found in the iPhone-viewport members walkthrough).
   Force content to fill the track on mobile. Placed last so it wins the cascade. */
@media (max-width:700px){
  .content { max-width:100%; margin:0; width:100%; box-sizing:border-box; }
  html, body { overflow-x:hidden; }
}


/* ══ APP ELEVATION (2026-07-30) — jade-glow depth + readable sizing (matches the site) ══ */
body { font-size:15px; }
body {
  background:
    radial-gradient(700px 440px at 100% -2%, rgba(47,107,255,.06), transparent 58%),
    radial-gradient(560px 420px at 0% 5%, rgba(47,107,255,.045), transparent 56%),
    var(--bg);
}
.content { background:radial-gradient(920px 440px at 86% -50px, rgba(47,107,255,.05), transparent 60%); padding-top:30px; }
.today-card, .upgrade-panel, .cta-panel, .port-hero, .rw-hero {
  border-color:rgba(47,107,255,.18) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 20px 48px -28px rgba(47,107,255,.4) !important;
}
.panel { transition:border-color .15s ease, box-shadow .15s ease; }
.panel:hover { border-color:rgba(47,107,255,.20); }
table { font-size:13.5px; }
.panel .delta, .panel h3 { font-size:13.5px; }
::selection { background:rgba(47,107,255,.28); color:#f6f1e6; }

/* ══ POWER-USER LAYER (2026-07-31) — reusable filter+sort bar, saved-view chips,
      and the Deal Score badge. Colors come ONLY from jade/semantic tokens. ══ */
.fbar { display:flex; flex-direction:column; gap:10px; }
.fbar-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px; }
.fbar-field { display:flex; flex-direction:column; gap:3px; }
.fbar-lbl { font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--mut); }
.fbar-num { width:76px; }
.fbar-range { display:inline-flex; align-items:center; gap:5px; }
.fbar-reset { align-self:flex-end; }
.fbar-count { margin-left:auto; align-self:center; white-space:nowrap; }
.fbar-views { display:flex; flex-wrap:wrap; align-items:center; gap:0; padding-top:9px; border-top:1px solid var(--line); }
.fbar-views .fbar-lbl { margin:0 8px 6px 0; align-self:center; }
.fbar-userview { display:inline-flex; align-items:center; gap:5px; }
.fbar-x { cursor:pointer; opacity:.55; font-weight:700; }
.fbar-x:hover { opacity:1; color:var(--neg); }
.fbar-save { border-style:dashed; }

/* Deal Score badge — jade for elite/strong, neutral→muted as it weakens. */
.deal-score { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.3px; border:1px solid transparent; white-space:nowrap; }
.deal-score .ds-dot { width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85; }
.deal-score.s-elite { color:var(--gold); background:var(--gold-soft); border-color:var(--accent-200); }
.deal-score.s-strong { color:var(--pos); background:var(--pos-soft); border-color:var(--pos-line); }
.deal-score.s-ok { color:var(--ink2); background:var(--bg2); border-color:var(--line); }
.deal-score.s-weak { color:var(--mut); background:transparent; border-color:var(--line); }

@media (max-width:700px){
  .fbar-field { flex:1 1 44%; }
  .fbar-field select.fld { width:100%; }
  .fbar-range { width:100%; }
  .fbar-num { flex:1 1 0; width:auto; }
  .fbar-count { width:100%; margin:2px 0 0; }
}

/* ══ BUY FROM AROUND THE WORLD (2026-07-31) — live asks per platform, refreshing.
      The card page's #1 feature. Colors come ONLY from jade/semantic tokens. ══ */
.bawt-title { gap:8px; align-items:center; }
.live-dot { width:9px; height:9px; border-radius:50%; background:var(--pos); display:inline-block;
  box-shadow:0 0 0 0 rgba(53,214,160,.55); animation:livePulse 2s infinite; flex:0 0 auto; }
@keyframes livePulse {
  0% { box-shadow:0 0 0 0 rgba(53,214,160,.5); }
  70% { box-shadow:0 0 0 7px rgba(53,214,160,0); }
  100% { box-shadow:0 0 0 0 rgba(53,214,160,0); }
}
.bawt-stamp { white-space:nowrap; }
.bawt-nums { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:4px 0 12px; }
.bawt-num { background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; }
.bawt-num.buy { border-color:var(--accent-200); background:var(--gold-soft); }
.bawt-num-lbl { font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--mut); }
.bawt-num-val { font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--ink); margin-top:3px; }
.bawt-num.buy .bawt-num-val { color:var(--gold); }
.bawt-note { padding:10px 12px; border:1px dashed var(--line2); border-radius:var(--radius-sm); background:var(--bg2); margin-bottom:12px; }
.bawt-list { display:flex; flex-direction:column; gap:8px; }
.bawt-plat-card { border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel2); overflow:hidden; }
.bawt-plat-card.cheapest { border-color:var(--gold); background:var(--gold-soft); }
.bawt-row-head { cursor:pointer; padding:10px 12px; display:flex; flex-direction:column; gap:5px; }
.bawt-row-main { display:flex; align-items:center; gap:9px; }
.bawt-flag { font-size:17px; flex:0 0 auto; }
.bawt-plat { font-weight:600; display:inline-flex; align-items:center; gap:8px; }
.bawt-ask { margin-left:auto; font-weight:800; font-variant-numeric:tabular-nums; font-size:16px; }
.bawt-buytag { font-size:12px; font-weight:800; letter-spacing:.6px; padding:2px 7px; border-radius:6px;
  background:var(--gold); color:var(--bg); text-transform:uppercase; }
.bawt-row-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.bawt-buy { color:var(--gold); font-weight:700; }
.bawt-buy:hover { text-decoration:underline; }
.bawt-caret { margin-left:auto; color:var(--mut); }
.bawt-depth { border-top:1px solid var(--line); padding:8px 12px; display:flex; flex-direction:column; gap:6px; background:var(--bg2); }
.bawt-depth-row { display:flex; align-items:center; gap:10px; }
.bawt-open { color:var(--gold); }
.bawt-spread { margin-top:12px; padding:11px 14px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--panel2); display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; }
.bawt-spread.pos { border-color:var(--pos-line); background:var(--pos-soft); }
.bawt-spread-out { font-weight:800; white-space:nowrap; }
.bawt-spread-out.pos { color:var(--pos); }
.bawt-alert { margin-top:12px; }
.bawt-foot { margin-top:10px; }

/* ══ TREND & OUTLOOK + INVEST BOARD (2026-07-31) — the forecast surface. ══ */
.fc-chart { width:100%; height:150px; display:block; }
.fc-band { fill:var(--gold-soft); stroke:none; }
.fc-base { stroke:var(--gold); stroke-width:2; }
.fc-dot { fill:var(--gold); }
.fc-hsel-lbl { margin-top:2px; }
.fc-hsel { gap:6px; margin:6px 0 10px; }
.fc-hbtn { font-size:12px; font-weight:700; padding:4px 9px; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--mut); border:1px solid var(--line); }
.fc-hbtn:hover { border-color:var(--gold-dim); color:var(--ink2); }
.fc-hbtn.active { background:var(--gold-soft); color:var(--gold); border-color:var(--gold); }
.fc-lock { margin:10px 0; padding:11px 14px; border:1px dashed var(--accent-200); background:var(--accent-50);
  border-radius:var(--radius-sm); display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--ink2); font-size:12.5px; }
.fc-lock .btn { white-space:nowrap; }
.fc-nums { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:10px 0; }
.fc-num { background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; }
.fc-num-val { font-size:21px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:2px; color:var(--ink); }
.fc-num-val.gold { color:var(--gold); }
.fc-num-val.pos { color:var(--pos); }
.fc-num-val.neg { color:var(--neg); }
.fc-drivers { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.fc-driver { flex:1 1 30%; min-width:120px; background:var(--panel2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:8px 11px; display:flex; flex-direction:column; gap:2px; }
.fc-driver-val { font-weight:700; font-variant-numeric:tabular-nums; }
.fc-driver-val.pos { color:var(--pos); }
.fc-driver-val.neg { color:var(--neg); }
.fc-cats { margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.fc-cats-lbl { text-transform:uppercase; letter-spacing:.6px; }
.fc-cat { display:flex; align-items:center; gap:9px; font-size:12.5px; }
.fc-cat-dir { font-weight:800; }
.fc-cat-dir.pos { color:var(--pos); }
.fc-cat-dir.neg { color:var(--neg); }
.fc-verdict-rat { margin-top:12px; font-size:13px; line-height:1.5; }
.fc-disc { margin-top:8px; font-style:italic; }
.fc-boardlink { margin-top:10px; }

.verdict-badge { display:inline-block; padding:3px 10px; border-radius:7px; font-size:12px; font-weight:800;
  letter-spacing:.6px; text-transform:uppercase; border:1px solid transparent; }
.verdict-badge.v-buy { color:var(--pos); background:var(--pos-soft); border-color:var(--pos-line); }
.verdict-badge.v-hold { color:var(--warn); background:var(--warn-soft); border-color:var(--warn-line); }
.verdict-badge.v-avoid { color:var(--neg); background:var(--neg-soft); border-color:var(--neg-line); }

.invest-board td { vertical-align:middle; }
.invest-row { cursor:pointer; }
.invest-row:hover { background:var(--gold-soft); }
.invest-card { gap:9px; align-items:center; }
.invest-img { width:34px; height:auto; border-radius:4px; }
.invest-lock { margin-top:14px; }
.invest-disc { margin-top:10px; font-style:italic; }

@media (max-width:700px){
  .bawt-nums { grid-template-columns:1fr; }
  .fc-nums { grid-template-columns:1fr 1fr; }
  .fc-driver { flex:1 1 100%; }
  .bawt-row-meta { gap:9px; }
}

/* ══ TYPE FLOOR (P2-9, 2026-08-01) — nothing readable below 12px. Every
   9.5–11.5px rule above was raised to 12px (table headers 11→12, .small
   12→13). The single exception is the .verify-link mobile `font-size:0`
   hide-text trick (icon-only collapse), which is not typography. Do not
   reintroduce sub-12px text. ══ */

/* ══ FORM MODAL (P0-3, 2026-08-01) — the ONE inline dialog that replaced every
   chained window.prompt() flow. Jade tokens only. ══ */
.modal-back { position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:96;
  display:grid; place-items:center; padding:20px; }
.modal-card { width:min(440px,94vw); max-height:88vh; overflow:auto;
  border-color:var(--line2); box-shadow:var(--shadow); }
.modal-sub { margin:-4px 0 4px; line-height:1.5; }
.modal-fields { display:flex; flex-direction:column; gap:12px; margin-top:10px; }
.modal-field { display:flex; flex-direction:column; gap:5px; }
.modal-lbl { font-size:12px; color:var(--mut); }
.modal-field .fld { width:100%; }
.modal-hint { line-height:1.4; }
.modal-err { color:var(--neg); min-height:16px; margin-top:8px; }
.modal-actions { justify-content:flex-end; margin-top:12px; }
@media (max-width:700px){
  .modal-back { align-items:flex-end; padding:0; place-items:end center; }
  .modal-card { width:100%; max-width:100%; border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom:calc(18px + env(safe-area-inset-bottom, 0)); }
  .modal-actions .btn { flex:1; }
}

/* ══ USAGE METERS (P1-6) — plan-limit bars on Plan + Alerts; warn tint ≥80%. ══ */
.usage-meters .meter { margin-top:2px; }
.usage-meters .bar.hot > i { background:var(--warn); }

/* ══ RESERVE CAPTURE (P1-5) — inline email opt-in when checkout is reserved. ══ */
.reserve-capture { margin-top:10px; padding:11px 12px; border:1px dashed var(--accent-200);
  background:var(--accent-50); border-radius:var(--radius-sm); }
.reserve-capture .fld { flex:1; min-width:0; }

/* ══ HONEST SCAN NOTE (P0-2) — shown when no real photo measurement exists. ══ */
.scan-honest { margin-top:12px; padding:11px 13px; border:1px dashed var(--line2);
  background:var(--bg2); border-radius:var(--radius-sm); color:var(--ink2); font-size:13px; }

/* ══ NEW RELEASES strip (home) + kind facet (search) — jade/semantic tokens only. ══ */
.rel-strip { display:flex; gap:10px; overflow-x:auto; padding:4px 2px 6px; -webkit-overflow-scrolling:touch; }
.rel-card { flex:0 0 96px; cursor:pointer; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--panel2); padding:8px 8px 9px; transition:border-color .15s ease, transform .15s ease; }
.rel-card:hover { border-color:var(--gold-dim); transform:translateY(-1px); }
.rel-img { width:100%; height:auto; border-radius:4px; display:block; }
.rel-ph { width:100%; aspect-ratio:63/88; display:grid; place-items:center; font-size:22px;
  background:var(--gold-soft); border-radius:4px; }
.rel-name { font-size:11.5px; line-height:1.3; margin-top:6px; overflow:hidden; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.rel-set { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.picker-row { align-items:stretch; }
.picker-row .kind-facet { flex:0 0 auto; width:auto; min-width:112px; }

/* ══ ALERT CENTER (2026-08-02) — rules table (type chip · thumb · filter
   summary · channel toggles · active switch · expandable history) + the
   two-step rule-builder modal. Jade tokens only. ══ */
.ac-rules { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.ac-rule { border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel2); padding:10px 12px; }
.ac-rule.paused { opacity:.55; }
.ac-rule-main { display:flex; gap:12px; align-items:flex-start; }
.ac-thumb { width:38px; height:53px; object-fit:cover; border-radius:4px; cursor:pointer; flex:0 0 auto; }
.ac-thumb.ph { display:grid; place-items:center; background:var(--gold-soft); font-size:18px; }
.ac-name { font-weight:600; cursor:pointer; }
.ac-name:hover { color:var(--accent-700); }
.ac-sum { margin-top:2px; }
.ac-type { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; letter-spacing:.3px;
  padding:2px 9px; border-radius:999px; border:1px solid var(--line2); background:var(--bg2); color:var(--ink2); white-space:nowrap; }
.ac-type.t-deal { background:var(--gold-soft); color:var(--gold); border-color:var(--accent-200); }
.ac-type.t-new_listing { background:var(--pos-soft); color:var(--pos); border-color:var(--pos-line); }
.ac-type.t-price_below, .ac-type.t-price_above { background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); }
.ac-type.t-spread_above { background:var(--accent-50); color:var(--accent-700); border-color:var(--accent-200); }
.ac-type.t-pop_change { background:var(--neg-soft); color:var(--neg); border-color:var(--neg-line); }
.ac-rule-ctl { display:flex; flex-direction:column; gap:6px; align-items:flex-end; flex:0 0 auto; }
.ac-ch { font:inherit; font-size:12px; padding:3px 9px; border-radius:999px; border:1px solid var(--line);
  background:var(--bg2); color:var(--mut); cursor:pointer; }
.ac-ch.on { background:var(--gold-soft); color:var(--gold); border-color:var(--accent-200); }
.ac-ch.locked { opacity:.6; }
.ac-switch { width:38px; height:20px; border-radius:999px; border:1px solid var(--line2); background:var(--bg2);
  position:relative; cursor:pointer; padding:0; }
.ac-switch i { position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%;
  background:var(--mut); transition:left .15s ease, background .15s ease; }
.ac-switch.on { background:var(--accent-100); border-color:var(--accent-200); }
.ac-switch.on i { left:20px; background:var(--accent-600); }
.ac-hist { margin-top:10px; border-top:1px dashed var(--line); padding-top:8px; }
.ac-hist-row { display:flex; gap:10px; align-items:baseline; padding:4px 0; font-size:13px; border-bottom:1px solid var(--line-soft); }
.ac-hist-row:last-child { border-bottom:0; }
.ac-mail { font-size:11px; padding:1px 7px; border-radius:999px; border:1px solid var(--line2); color:var(--mut); white-space:nowrap; }
.ac-mail.sent, .ac-mail.flushed { color:var(--pos); border-color:var(--pos-line); background:var(--pos-soft); }
.ac-mail.pending { color:var(--warn); border-color:var(--warn-line); background:var(--warn-soft); }

/* rule-builder modal (two steps: type → filters/channels) */
.ac-modal { width:min(520px,94vw); }
.ac-cardline { display:flex; align-items:center; gap:10px; margin:10px 0 4px; padding:8px 10px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg2); }
.ac-cardline img { width:30px; height:42px; object-fit:cover; border-radius:3px; }
.ac-types { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.ac-type-card { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel2); padding:10px 12px;
  color:var(--ink); transition:border-color .15s ease, transform .15s ease; font:inherit; }
.ac-type-card:hover { border-color:var(--accent-200); transform:translateY(-1px); }
.ac-type-card.on { border-color:var(--accent-600); background:var(--accent-50); }
.ac-type-ic { font-size:17px; }
.ac-type-lbl { font-weight:700; }
.ac-type-sub { line-height:1.35; }
.ac-field { display:flex; flex-direction:column; gap:5px; margin-top:2px; }
.ac-chips { display:flex; flex-wrap:wrap; }
.ac-chips .chip { font:inherit; font-size:12px; }
.ac-more { border-style:dashed; }
@media (max-width:700px){
  .ac-rule-main { flex-wrap:wrap; }
  .ac-rule-ctl { flex-direction:row; width:100%; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
  .ac-types { grid-template-columns:1fr; }
}

/* ── CAPACITY LAYER — release timing + Apex + soft claims ─────────────
   Every one of these classes is only ever emitted behind a feature flag
   (or a non-zero claim count), so with the flags off none of it renders.
   Jade tokens only — no literal colour values anywhere in this block. */
.delay-note { display:flex; align-items:center; gap:9px; margin-bottom:14px; padding:10px 14px;
  border:1px solid var(--line); border-left:3px solid var(--gold-dim); border-radius:var(--radius-sm);
  background:var(--bg2); color:var(--ink2); font-size:12.5px; }
.delay-note-ic { color:var(--gold-dim); font-size:14px; }

.pending-panel { margin-bottom:14px; }
.pending-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px;
  border:1px dashed var(--line2); background:var(--bg2); color:var(--mut);
  font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums; }

.apex-teaser { display:flex; align-items:center; gap:12px; margin-bottom:14px; padding:13px 16px;
  border:1px solid var(--accent-200); border-radius:var(--radius); background:var(--gold-soft);
  color:var(--ink); text-decoration:none; transition:border-color .15s ease, transform .15s ease; }
.apex-teaser:hover { border-color:var(--gold-dim); transform:translateY(-1px); }
.apex-teaser-ic { font-size:18px; color:var(--gold); }
.apex-teaser-line { font-weight:700; color:var(--gold); letter-spacing:.2px; }

/* Japan Rail pilot banner — first-party feature callout in the Flip Scanner. */
.jrail-banner { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; padding:14px 16px;
  border:1px solid var(--accent-200); border-left:3px solid var(--gold); border-radius:var(--radius);
  background:var(--gold-soft); color:var(--ink); }
.jrail-ic { font-size:18px; line-height:1.3; flex:none; }
.jrail-body { flex:1; min-width:0; }
.jrail-h { font-weight:700; color:var(--gold); letter-spacing:.2px; margin-bottom:4px; }
.jrail-sub { color:var(--ink2); font-size:12.5px; line-height:1.55; max-width:70ch; }
.jrail-cta { display:inline-block; margin-top:9px; font-weight:600; color:var(--gold);
  border-bottom:1px solid var(--accent-200); transition:border-color .15s ease; }
.jrail-cta:hover { border-bottom-color:var(--gold); }
.jrail-x { flex:none; background:none; border:none; color:var(--mut); cursor:pointer; font-size:17px;
  line-height:1; padding:2px 5px; border-radius:6px; transition:color .15s ease, background .15s ease; }
.jrail-x:hover { color:var(--ink); background:var(--bg2); }

.claim-chip { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px;
  border:1px solid var(--line2); background:var(--panel2); color:var(--mut); font-size:12px; cursor:help; }

.radar-geo { margin-bottom:4px; }
.radar-geo .row > div { min-width:180px; }
.radar-row { padding:16px; margin-bottom:12px; }
.radar-name { font-size:15px; margin-bottom:5px; }
.radar-name.link:hover strong { color:var(--gold); }
.radar-why { line-height:1.5; max-width:64ch; }
.radar-side { display:flex; flex-direction:column; align-items:flex-end; gap:6px; margin-left:14px; }
.radar-profit { font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; }
@media (max-width:700px){
  .radar-side { margin-left:0; }
  .radar-why { max-width:none; }
}

/* ══ MOBILE SAFE-AREA RE-ASSERT (2026-08-01) — KEEP LAST. The V3 polish rule
   `.content{padding:32px 40px 64px}` (and the elevation `padding-top:30px`)
   land AFTER the ≤700px safe-area block and win the cascade, so phones lost
   the bottom clearance and content scrolled under the fixed bottom nav.
   This block must stay the FINAL .content rule in the file. ══ */
@media (max-width:700px){
  .content { padding:20px 16px calc(84px + env(safe-area-inset-bottom, 0)); }
}

/* ════════════════════════════════════════════════════════════════════
   APP TOP BAR · MORE SHEET · HONEST LOCKS · MOVER RANGES  (2026-08-04)
   Founder audit of the signed-in app. Every rule below exists for a
   reported symptom — see the comment above each block. All colour comes
   from the tokens at the top of this file; nothing here hardcodes a hex.
   ════════════════════════════════════════════════════════════════════ */

/* ── TOP BAR ──────────────────────────────────────────────────────────
   "No logo in mobile" / "it write plan pro … should be at the top menu bar
   with logo" / "it should have upgrade here, menu bar".
   The brand + plan + upgrade lived in .nav, which is display:none at
   700px and below — the phone app had NO header at all. This bar is
   FIXED (not grid-placed) so it cannot disturb the .shell grid. */
.topbar {
  position:fixed; top:0; left:230px; right:0; height:var(--topbar-h); z-index:58;
  display:flex; align-items:center; gap:8px; padding:0 16px;
  background:var(--bg2); border-bottom:1px solid var(--line);
}
.topbar .tb-spacer { flex:1; min-width:0; }
.tb-brand {
  display:inline-flex; align-items:center; gap:8px; background:none; border:0; cursor:pointer;
  color:var(--ink); font-family:inherit; font-weight:800; letter-spacing:.06em; font-size:15px;
  padding:6px 4px; border-radius:var(--radius-sm); min-width:0;
}
.tb-brand:hover { color:var(--gold); }
.tb-brand em { color:var(--accent-600); font-style:normal; }
.tb-mark { display:block; flex:none; }
.tb-word { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-back {
  background:none; border:1px solid var(--line); color:var(--ink2); font-family:inherit;
  font-size:20px; line-height:1; width:32px; height:32px; flex:none; border-radius:var(--radius-sm); cursor:pointer;
}
.tb-back:hover { color:var(--gold); border-color:var(--accent-200); }
.tb-theme {
  background:none; border:1px solid var(--line); color:var(--ink2); font-family:inherit;
  font-size:14px; line-height:1; width:32px; height:32px; flex:none; border-radius:var(--radius-sm); cursor:pointer;
}
.tb-theme:hover { color:var(--gold); border-color:var(--accent-200); }
.tb-tier {
  flex:none; background:var(--panel2); border:1px solid var(--line2); color:var(--ink2);
  font-family:inherit; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; cursor:pointer; white-space:nowrap;
}
.tb-tier:hover { color:var(--ink); border-color:var(--mut2); }
.tb-tier.is-trial, .tb-tier.tier-pro, .tb-tier.tier-dealer { color:var(--gold); border-color:var(--accent-200); background:var(--gold-soft); }
.tb-upgrade {
  flex:none; background:var(--gold-btn); border:0; color:var(--bg); font-family:inherit;
  font-size:12px; font-weight:700; padding:6px 13px; border-radius:999px; cursor:pointer; white-space:nowrap;
}
.tb-upgrade:hover { filter:brightness(1.08); }
.tb-bell {
  position:relative; flex:none; background:none; border:0; cursor:pointer; font-size:16px;
  padding:5px 6px; border-radius:var(--radius-sm); line-height:1;
}
.tb-bell .bell-badge {
  position:absolute; top:0; right:0; min-width:15px; height:15px; padding:0 3px;
  border-radius:999px; background:var(--neg); color:var(--ink);
  font-size:10px; font-weight:700; align-items:center; justify-content:center;
}
/* The fixed bar would otherwise sit on top of the first row of every page. */
.content { padding-top:calc(var(--topbar-h) + 22px); }
/* 701–1000px: the sidebar collapses to a 64px icon rail (see the .shell rule
   near the top of this file), so the bar has to start there, not at 230px. */
@media (max-width:1000px){ .topbar { left:64px; } }

/* ── MORE SHEET (phones) ─────────────────────────────────────────────
   "More" used to open the Cmd-K palette; on a phone that was the only route
   to the whole hidden sidebar, including Sign out. Plain list instead. */
.sheet-back { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:95; display:flex; align-items:flex-end; justify-content:center; }
.sheet {
  width:min(560px,100%); max-height:86vh; display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line2); border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:var(--shadow); overflow:hidden;
}
.sheet-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); }
.sheet-title { font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:12px; color:var(--mut); }
.sheet-x { background:none; border:0; color:var(--mut); font-size:16px; cursor:pointer; padding:4px 6px; }
.sheet-x:hover { color:var(--ink); }
.sheet-body { overflow:auto; padding:10px 12px calc(18px + env(safe-area-inset-bottom,0)); }
.sheet-grp { margin-top:12px; }
.sheet-grp-h { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--mut); padding:6px 8px; }
.sheet-items { display:flex; flex-direction:column; }
.sheet-item {
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:none; border:0; color:var(--ink); font-family:inherit; font-size:14.5px;
  padding:12px 10px; border-radius:var(--radius-sm); cursor:pointer; min-height:44px;
}
.sheet-item:hover { background:var(--panel2); }
.sheet-item.danger { color:var(--neg); }
.sheet-item .sh-ic { width:22px; text-align:center; opacity:.85; flex:none; }
.sheet-acct { display:flex; flex-direction:column; gap:4px; padding:0 8px; }
.sheet-lang { margin:8px 0; }

/* ── HONEST LOCK ─────────────────────────────────────────────────────
   "everywhere that's locked, blur so that it's easy to upgrade" — done
   WITHOUT blurring real data. The bars below are decorative placeholders
   drawn in CSS; the paid values were never sent to this browser, so there
   is nothing in the DOM to un-blur. */
.locked-panel { position:relative; overflow:hidden; border-style:dashed; border-color:var(--line2); }
.lp-skeleton { display:flex; flex-direction:column; gap:11px; filter:blur(3px); opacity:.5; pointer-events:none; user-select:none; }
.lp-bar { height:15px; border-radius:6px; background:linear-gradient(90deg,var(--line2),var(--panel2)); }
.lp-bar-0 { width:82%; } .lp-bar-1 { width:64%; } .lp-bar-2 { width:73%; }
.lp-body { display:flex; align-items:flex-start; gap:12px; margin-top:16px; flex-wrap:wrap; }
.lp-ic { font-size:17px; line-height:1.4; flex:none; }
.lp-what { font-weight:650; font-size:14px; }
.lp-sub { margin-top:4px; max-width:62ch; }
.lp-body .btn { flex:none; }
.locked-cell { color:var(--mut); cursor:help; }
.warn-panel { border-color:var(--warn-line); background:var(--warn-soft); }

/* ── INVEST BOARD ────────────────────────────────────────────────────
   Identity line under each name (set, number/total, rarity, year, market)
   and the baseline chip, which used to carry an inline style. */
.invest-idy { min-width:0; }
.invest-idy > div:first-child { font-weight:600; }
.invest-baseline { margin-left:6px; }
.invest-img { width:34px; height:auto; border-radius:3px; flex:none; }

/* ── MOVERS TIMEFRAME + honest window note (week / month / year) ───── */
.mv-head { margin:18px 0 10px; }
.mv-head h3 { margin:0; font-size:13px; letter-spacing:.4px; text-transform:uppercase; color:var(--mut); font-weight:600; }
.mv-range { gap:6px; }
.mv-honest { border:1px solid var(--warn-line); background:var(--warn-soft); border-radius:var(--radius-sm); padding:9px 12px; }
.mv-now { margin-right:10px; }

/* ── CARD PAGE EXITS ─────────────────────────────────────────────────
   "Cannot go back, search another card" — a card opened from the Invest
   board was a dead end. */
.card-exit-row { gap:8px; margin-bottom:14px; }
.card-search-again { margin-top:16px; }
.card-search-lbl { margin-bottom:8px; }

/* ── FLIP TILE — real art + full identity ────────────────────────────
   "the cards etc in flip scanner. It's not well built there". */
.flip-top { justify-content:space-between; align-items:flex-start; }
.flip-badges { text-align:right; display:flex; flex-direction:column; gap:4px; align-items:flex-end; }
.flip-idy { display:flex; align-items:center; gap:12px; margin:12px 0 10px; min-width:0; }
.flip-idy.link { cursor:pointer; }
.flip-idy.link:hover .flip-name strong { color:var(--gold); }
.flip-art { width:52px; height:72px; object-fit:cover; border-radius:5px; flex:none; background:var(--panel2); }
.flip-art.ph { display:flex; align-items:center; justify-content:center; font-size:22px; border:1px dashed var(--line2); }
.flip-name { font-size:15px; margin:0 0 3px; }
.flip-sub { margin-top:2px; }
.flip-foot { justify-content:space-between; align-items:center; margin-top:12px; }

/* ── MOBILE ──────────────────────────────────────────────────────────
   6 bottom tabs (Alerts was missing entirely and is a core paid feature),
   full-bleed top bar, and the label size that keeps "Portfolio" inside a
   62px tab at 375px. */
@media (max-width:700px){
  .topbar { left:0; padding:0 12px; padding-top:env(safe-area-inset-top,0); height:calc(var(--topbar-h) + env(safe-area-inset-top,0)); }
  .tb-word { font-size:14px; }
  .tb-tier { font-size:10.5px; padding:4px 8px; }
  .tb-upgrade { font-size:11px; padding:5px 10px; }
  .bn-lbl { font-size:10px; }
  .bn-ic { font-size:16px; }
  .bn-tab { padding:6px 1px; gap:2px; min-width:0; }
  .bn-lbl, .bn-ic { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .flip-art { width:46px; height:64px; }
  .lp-body .btn { width:100%; }
  .page-head { gap:10px; }
}
/* KEEP LAST — same reason as the safe-area block above: this file has later
   rules that reset .content padding, and the fixed top bar must not cover the
   first row of any page at any width. */
@media (max-width:700px){
  .content { padding:calc(var(--topbar-h) + env(safe-area-inset-top,0) + 16px) 16px calc(84px + env(safe-area-inset-bottom, 0)); }
}

/* ── prefers-reduced-motion ──────────────────────────────────────────────────
   The app had 27 animation/transition rules and no reduced-motion handling at
   all. For a user with vestibular sensitivity that is not a polish issue — the
   spinners, slide-ins and hover translates can cause real nausea, and the OS
   setting exists precisely so they can say so once instead of per-site.

   Motion is not removed entirely: `animation:none` on a SPINNER leaves a frozen
   graphic that reads as "hung". Instead everything is collapsed to ~1 frame so
   state changes are instant, and the spinner keeps a slow, non-vestibular fade
   so "working…" still communicates. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Anything that moves to indicate position stops moving. */
  .btn:active, .btn-gold:active, .bn-tab:active, .flow-step:active { transform: none; }
  /* …but "busy" still has to be legible, so the spinner pulses instead of spins. */
  .spinner {
    animation: ce-rm-pulse 1.6s ease-in-out infinite !important;
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
  }
  @keyframes ce-rm-pulse { 0%,100% { opacity:.35 } 50% { opacity:1 } }
}

/* ── MARKET PULSE banner ─────────────────────────────────────────────────────
   The retention strip at the top of the dashboard. Deliberately loud relative
   to the panels below it: it is the one element whose job is to be noticed on
   arrival and to change between visits. Cards inside it deep-link to the card
   page, which is where the buy path starts. */
.pulse { margin:0 0 18px; padding:18px 20px; border-radius:14px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--a600) 10%, transparent), color-mix(in srgb, var(--a600) 2%, transparent) 60%), var(--panel);
  border:1px solid color-mix(in srgb, var(--a600) 28%, transparent); }
.pulse-head { margin-bottom:14px; }
.pulse-tag { display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.14em;
  color:var(--a600); margin-bottom:7px; }
.pulse-title { margin:0; font-size:19px; font-weight:750; letter-spacing:-.01em; color:var(--ink); }
.pulse-dek { margin:5px 0 0; font-size:13.5px; line-height:1.5; color:var(--ink2); max-width:70ch; }

/* Horizontal scroll rather than wrap: a pulse rail is a glance, not a grid.
   Wrapping to a second row makes it read as a table and kills the scan. */
.pulse-rail { display:flex; gap:12px; overflow-x:auto; padding-bottom:4px;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.pulse-card { flex:0 0 132px; display:block; text-decoration:none; border-radius:10px;
  background:var(--bg2); border:1px solid var(--line); padding:9px; transition:.15s; }
.pulse-card:hover { border-color:var(--a600); transform:translateY(-2px); }
.pulse-card img { width:100%; aspect-ratio:5/7; object-fit:cover; border-radius:6px; display:block; background:var(--panel2); }
.pulse-noimg { width:100%; aspect-ratio:5/7; border-radius:6px; background:var(--panel2);
  display:flex; align-items:center; justify-content:center; color:var(--mut); font-size:20px; }
.pulse-meta { margin-top:7px; }
.pulse-name { font-size:12px; font-weight:650; color:var(--ink); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pulse-move { font-size:13px; font-weight:800; margin-top:3px; font-variant-numeric:tabular-nums; }
.pulse-move.up { color:var(--pos); }
.pulse-move.down { color:var(--warn); }
.pulse-price { font-size:11.5px; color:var(--mut); font-variant-numeric:tabular-nums; }
.pulse-more { display:flex; gap:9px; flex-wrap:wrap; margin-top:13px;
  padding-top:12px; border-top:1px solid var(--line); }
.pulse-link { font-size:12.5px; color:var(--ink2); background:none; border:0; padding:0;
  cursor:pointer; text-align:left; }
.pulse-link:hover { color:var(--a600); text-decoration:underline; }
@media (max-width:700px){
  .pulse { padding:15px 14px; margin-bottom:14px; }
  .pulse-title { font-size:17px; }
  .pulse-card { flex:0 0 116px; }
}

/* ── AI pre-grade (beta) sub-grade chips ─────────────────────────────── */
.pregrade-chip{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.pregrade-val{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2;margin:2px 0}
.pregrade-overall{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--navy)}
.pregrade-grid{gap:10px;margin-top:10px}
/* language flag on a card name (English name + 🇯🇵 marker for a JP/KR/ZH printing) */
.lang-flag{margin-left:4px;font-size:.9em;line-height:1;vertical-align:baseline}

/* Grade-my-card worked example — a professional grading-report presentation. All
   token-based, so it is correct in both Snkr (teal on white) and Onyx. */
.gx{margin-top:16px}
.gx-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:15px}
.gx-grid{display:grid;grid-template-columns:minmax(0,290px) 1fr;gap:24px;align-items:start}
@media(max-width:720px){.gx-grid{grid-template-columns:1fr}}
.gx-slab{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--panel2)}
.gx-slab-bar{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--gold-soft);border-bottom:1px solid var(--line)}
.gx-slab-grade{font-size:30px;font-weight:800;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums;flex:none}
.gx-slab-meta{flex:1;min-width:0}
.gx-slab-word{font-weight:800;letter-spacing:.12em;font-size:13px;color:var(--gold)}
.gx-slab-card{font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-slab-brand{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--mut);flex:none;writing-mode:horizontal-tb}
.gx-card{position:relative;aspect-ratio:63/88;background:linear-gradient(160deg,var(--panel),var(--panel2));display:grid;place-items:center}
.gx-card-img{width:100%;height:100%;object-fit:contain;display:block}
.gx-center-frame{position:absolute;top:6%;bottom:8%;left:9%;right:7%;border:1.5px dashed var(--gold);border-radius:4px;pointer-events:none;opacity:.75}
.gx-overall{display:flex;align-items:center;gap:15px;padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid var(--line)}
.gx-overall-num{font-size:46px;font-weight:800;line-height:.9;color:var(--ink);font-variant-numeric:tabular-nums}
.gx-overall-word{font-weight:700;font-size:15px}
.gx-subs{display:flex;flex-direction:column;gap:14px}
.gx-sub-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.gx-sub-label{font-weight:600;font-size:13px}
.gx-sub-val{font-weight:800;font-variant-numeric:tabular-nums;color:var(--gold);font-size:14px}
.gx-bar{height:6px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);overflow:hidden;margin:6px 0 4px}
.gx-bar i{display:block;height:100%;background:var(--gold);border-radius:999px}
.gx-sub-detail{font-size:12px;color:var(--mut)}
.gx-note{font-size:12px;color:var(--mut);line-height:1.55;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.cardthumb{width:34px;height:48px;object-fit:cover;border-radius:4px;background:var(--panel2);flex:0 0 auto}
.cardthumb.ph{display:inline-flex;align-items:center;justify-content:center;font-size:18px;color:var(--mut);border:1px solid var(--line)}
.pf-card{display:flex;align-items:center;gap:10px}
.pf-thumb{width:38px;height:53px}
.mini-img.ph{display:inline-flex;align-items:center;justify-content:center;font-size:14px;color:var(--mut);background:var(--panel2);border:1px solid var(--line)}

/* ═══════════════════════════════════════════════════════════════════════
   SNKR THEME — Snkrdunk-style light skin for the member app.
   Palette pulled live from snkrdunk.com: WHITE canvas, near-black ink, ONE
   teal accent (#2F6BFF), FLAT (depth from hairline #e5e5e5 borders, not
   shadows), TIGHT 4px radii, Inter. Activated by <html data-theme="snkr">;
   with no attribute the app stays the Onyx dark theme (unchanged). Because
   the app is ~83% tokenised, this token block re-skins nearly everything;
   the component rules below fix the handful of hardcoded dark values.
   Toggle it in the top bar (◐) — both themes coexist so you can compare.
   ═══════════════════════════════════════════════════════════════════════ */
:root[data-theme="snkr"] {
  --bg:#ffffff; --bg2:#f7f7f8; --panel:#ffffff; --panel2:#fafafa;
  --line:#e5e5e5; --line2:#ededed; --line-soft:#f3f3f3;
  --ink:#0b0b0c; --ink2:#42424a; --mut:#767676; --mut2:#9b9b9b;
  --navy:#0b0b0c;

  /* teal accent ramp */
  --accent-50:#eaf0ff; --accent-100:#dbe6ff; --accent-200:#b4caff;
  --accent-500:#2F6BFF; --accent-600:#1E54E6; --accent-700:#1E4FD1;
  --a600:#2F6BFF;

  /* legacy --gold* aliases → teal (kept so every var(--gold*) re-skins at once) */
  --gold:#2F6BFF; --gold-btn:#2F6BFF; --gold-dim:#1E54E6; --gold-soft:rgba(47,107,255,.10);

  /* semantics tuned for legibility on white */
  --pos:#0a8f5f; --pos-soft:#e7f6ee; --pos-line:#bce6d2;
  --neg:#d92d20; --neg-soft:#fdecea; --neg-line:#f5ccc8;
  --warn:#b7791f; --warn-soft:#fbf3e2; --warn-line:#eeddb0;
  --green:var(--pos); --green-dim:var(--pos-line); --red:var(--neg); --red-dim:var(--neg-line);
  --blue:#2563eb; --amber:#b7791f;

  /* tight radii + flat elevation — Snkr leans on borders, not shadow */
  --radius:4px; --radius-sm:3px; --radius-lg:8px;
  --shadow-soft:0 1px 2px rgba(17,17,17,.05);
  --shadow:0 1px 2px rgba(17,17,17,.06), 0 8px 24px -14px rgba(17,17,17,.14);
  --ring:0 0 0 3px rgba(47,107,255,.22);
}
/* Component fixers: rules that hardcode dark values and would survive the token flip. */
:root[data-theme="snkr"] body { background:var(--bg); color:var(--ink); }
:root[data-theme="snkr"] .content { background:#fff; }
:root[data-theme="snkr"] .btn.primary,
:root[data-theme="snkr"] .btn-gold { background-image:none; background-color:#2F6BFF; color:#fff; border:1px solid #1E4FD1; box-shadow:none; }
:root[data-theme="snkr"] .btn.primary:hover,
:root[data-theme="snkr"] .btn-gold:hover { background-image:none; background-color:#1E54E6; }
:root[data-theme="snkr"] .tbl-wrap th,
:root[data-theme="snkr"] th { background:#f5f6f7; color:#42424a; }
:root[data-theme="snkr"] tbody tr:hover { background:#f5f6f7; }
:root[data-theme="snkr"] .bar { background:#ececee; }
:root[data-theme="snkr"] .bell:hover,
:root[data-theme="snkr"] .palette-btn:hover { background:#f2f2f3; }
:root[data-theme="snkr"] .key-code { background:#f5f6f7; }
:root[data-theme="snkr"] .panel h3 { color:var(--ink); }
:root[data-theme="snkr"] .sig-market { background:#eef2ff; color:#1d4ed8; border-color:#c7d2fe; }
:root[data-theme="snkr"] .show-img-wrap,
:root[data-theme="snkr"] .show-detail-img { background:#f2f2f3; }
:root[data-theme="snkr"] ::-webkit-scrollbar-thumb { background:#d4d4d8; }
:root[data-theme="snkr"] ::selection { background:rgba(47,107,255,.18); color:#0b0b0c; }
/* Flat cards: strip the heavy dark-mode drop shadows, keep the hairline border. */
:root[data-theme="snkr"] .panel,
:root[data-theme="snkr"] .card,
:root[data-theme="snkr"] .flip-card,
:root[data-theme="snkr"] .radar-row,
:root[data-theme="snkr"] .pulse { box-shadow:none; }
/* iOS status bar: the app now paints white at the top in this theme. */
:root[data-theme="snkr"] .topbar { background:rgba(255,255,255,.9); }

/* ── Snkr straggler sweep (design audit) — components that hardcoded dark values
   and stayed black on the white theme: sidebar active/hover, button hovers, dark
   badges/chips, the "start in 60 seconds" band, real-world-price hero. ── */
:root[data-theme="snkr"] .nav a.link.active { background:var(--accent-50); color:var(--accent-700); border-color:transparent; }
:root[data-theme="snkr"] .nav a.link:hover { background:#f2f2f3; color:var(--ink); }
:root[data-theme="snkr"] .btn:hover { background:#f2f2f3; border-color:var(--line); color:var(--ink); }
:root[data-theme="snkr"] .btn.ghost:hover { background:#f2f2f3; color:var(--ink2); }
:root[data-theme="snkr"] .eng-toggle:hover { background:#f2f2f3; color:var(--ink2); }
:root[data-theme="snkr"] .badge.stub { background:#f2f2f3; color:var(--mut); }
:root[data-theme="snkr"] .conv.watch { background:#f2f2f3; color:var(--mut); }
:root[data-theme="snkr"] .gate-badge.nogo { background:#f2f2f3; color:var(--mut); }
:root[data-theme="snkr"] .sig-scarce { background:#f2f2f3; color:var(--mut); }
:root[data-theme="snkr"] .sig-info { background:#f5f6f7; color:var(--mut); }
:root[data-theme="snkr"] .kill { background:#fafafa; border-color:var(--line); color:var(--ink2); }
:root[data-theme="snkr"] .upgrade-panel,
:root[data-theme="snkr"] .cta-panel,
:root[data-theme="snkr"] .key-reveal { background:var(--accent-50); box-shadow:none; }
:root[data-theme="snkr"] .rw-hero { background:var(--accent-50); box-shadow:none; }
:root[data-theme="snkr"] .rw-compare { background:#fafafa; }
:root[data-theme="snkr"] .today-card,
:root[data-theme="snkr"] .port-hero { box-shadow:none; }
:root[data-theme="snkr"] .sync-pill,
:root[data-theme="snkr"] .show-grade { color:#fff; }

/* ── arbitrage: exact-listing deep link (the row's actionable click-through) ── */
.arb-buy-link { display:inline-block; margin-top:3px; font-size:11.5px; font-weight:700; color:var(--accent-600); text-decoration:none; border:1px solid var(--accent-200); border-radius:4px; padding:1px 7px; }
.arb-buy-link:hover { background:var(--accent-100); }
:root[data-theme="snkr"] .arb-buy-link { color:#2F6BFF; border-color:rgba(47,107,255,.35); }
:root[data-theme="snkr"] .arb-buy-link:hover { background:rgba(47,107,255,.08); }