/* Lock Dex - app styles (extracted from index.html) */
:root{
  --bg:#0b0b13; --bg2:#08080d; --panel:#13131e; --panel2:#1a1a28; --line:#232334; --line2:#2e2e44;
  /* Text ladder. Contrast is verified against every ground it lands on
     (--bg2 #08080d, --bg #0b0b13, --panel #13131e, --panel2 #1a1a28).
     --faint carries every label, eyebrow, unit, caption and table header in
     the product at 9.5-10.5px, so it has to clear 4.5:1 on the *worst* of
     those grounds, not the darkest. It reads as a whisper because it is small,
     uppercase and wide-tracked - not because it is hard to see. */
  --text:#ecedf3;   /* 14.7:1 on --panel2 */
  --dim:#9094a6;    /*  5.7:1 on --panel2 */
  --faint:#7f8491;  /*  4.6:1 on --panel2 - was #5c6072 (2.8:1, failed AA) */
  /* ---- Accent identity (single source of truth) ----------------------------
     Emerald -> teal. To re-theme the whole app (e.g. "make it gold"), change
     just these accent lines; every component reads --accent* (CSS) or the THEME
     const in js/core.js (canvas). Contrast is verified against --bg (#0b0b13). */
  --accent:#10b981;        /* emerald-500 - accent text/lines on dark (7.6:1 on --bg) */
  --accent-2:#14b8a6;      /* teal-500    - secondary accent, glows, non-text details */
  --accent-3:#0f766e;      /* teal-700    - solid buttons/active surfaces w/ white text (5.5:1) */
  --accent-grad:linear-gradient(120deg,#059669 0%,#0f766e 45%,#0d9488 110%); /* white text >=3.7:1 */
  --accent-soft:rgba(16,185,129,.14);   /* soft fills, tinted panels */
  --accent-glow:rgba(16,185,129,.42);   /* glows / drop shadows */
  --blue:#3b82f6; --cyan:#38bdf8;
  --green:#4ade80; --red:#f87171; --amber:#fbbf24;
  --grad:var(--accent-grad);
  /* ---- Radius scale (single source of truth) -------------------------------
     Six steps, sized to the element: small parts get small corners so they stay
     crisp, large surfaces get soft ones so they read as sheets. Pills are for
     states and filters, never actions. Circles stay literal 50% - a circle is a
     shape, not a step on this scale. */
  --r-xs:5px;    /* thumbnails, badges, tiny chips */
  --r-sm:8px;    /* small controls */
  --r-md:10px;   /* buttons, inputs, icon buttons */
  --r-lg:14px;   /* panels, cards, stat tiles */
  --r-xl:18px;   /* dialogs, sheets, heroes */
  --r-pill:99px; /* chips, status pills, toasts, search field */
  /* ---- Scrims and shadows ---------------------------------------------------
     Black at four alphas, not eleven. A scrim darkens what is behind a floating
     layer; the named shadows are built from them so depth has one vocabulary. */
  --scrim-1:rgba(0,0,0,.2);   /* hairline lift on small floating chips */
  --scrim-2:rgba(0,0,0,.35);  /* card art badges, mid-weight lift */
  --scrim-3:rgba(0,0,0,.5);   /* menus, lists, pinned pills */
  --scrim-4:rgba(0,0,0,.7);   /* dialogs and sheets - the page falls away */
  --shadow-menu:0 14px 34px var(--scrim-3);
  --shadow-list:0 10px 30px var(--scrim-3);
  --shadow-pill:0 10px 30px var(--scrim-3);
  --shadow-dialog:0 30px 80px var(--scrim-4);
  --shadow-sheet:0 -12px 40px var(--scrim-4);
  /* text that sits ON a saturated fill */
  --on-green:#08210f;
  --on-amber:#1a1a05;
  --green-deep:#052e16;
  /* the viewfinder is deliberately true black - letterboxing round a camera
     frame should read as absence of signal, not as another dark surface */
  --camera-black:#000;
  --mono:ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
[data-theme="light"]{
  --bg:#f5f7f8;--bg2:#ffffff;--panel:#ffffff;--panel2:#edf1f2;--line:#dce2e4;--line2:#c5ced1;
  /* --faint was #748287 (3.49:1 on --panel2) - every label in the product sits
     on it, so it darkens until it clears 4.5:1 on the worst light ground. */
  --text:#162023;--dim:#4f5e62;--faint:#5f6d72;--green:#16834b;--red:#c53f48;--amber:#8f6110;
  /* Emerald is a dark-theme colour: #10b981 measures 2.54:1 as text on white and
     fails badly wherever the accent is a link, a price or a sort chevron. On
     light the accent darkens to the teal end, which passes both as text (5.47:1)
     and as a fill under white text. */
  --accent:#0f766e;--accent-2:#0d9488;--accent-3:#0b5f58;
  --accent-grad:linear-gradient(120deg,#0b6b52 0%,#0b5f58 45%,#0a6f66 110%);
  --accent-soft:rgba(15,118,110,.12);--accent-glow:rgba(15,118,110,.25);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100%}
::selection{background:rgba(16,185,129,.38)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:var(--r-sm)}
::-webkit-scrollbar-track{background:transparent}

/* ---------- top bar ---------- */
.top{position:fixed;top:0;left:0;right:0;height:52px;background:var(--bg2);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 14px;z-index:70}
.logo{display:flex;align-items:center;gap:9px;cursor:pointer;flex:none}
/* Brand mark. Option C: the fan stands alone in white, with no container -
   emerald stays reserved for live figures per the Live-Figure Rule, so the
   accent is not spent twice in the same header.
   --logo-gap paints the separations between cards, so it has to match the
   surface the mark sits on; the default suits every chrome surface and only
   the panel-backed contexts override it. */
.logo-mark{width:32px;height:32px;display:grid;place-items:center;flex:none;--logo-ink:var(--text);--logo-gap:var(--bg);color:var(--logo-ink)}
.logo-mark svg{width:100%;height:100%;display:block}
.logo b{font-size:15px;letter-spacing:.02em}
.logo b i{font-style:italic;color:var(--accent)}
.searchbar{flex:1;max-width:440px;display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);color:var(--faint);font:500 13px var(--sans);padding:8px 12px;border-radius:var(--r-md);cursor:pointer;text-align:left}
.searchbar:hover{border-color:var(--line2);color:var(--dim)}
.searchbar kbd{margin-left:auto;font:600 10px var(--mono);background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-xs);padding:2px 6px;color:var(--faint)}
.top .grow{flex:1}
.top-ic{width:34px;height:34px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--panel);color:var(--dim);font:600 15px var(--mono);cursor:pointer;display:grid;place-items:center}
.top-ic:hover{color:var(--text);border-color:var(--line2)}
.top-ic span,.top-ic svg{display:block;width:17px;height:17px}
#apiDot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--faint);display:inline-block}
#apiDot.ok{background:var(--green)} #apiDot.bad{background:var(--amber)}
.api-chip{display:flex;align-items:center;gap:7px;font:500 11px var(--mono);color:var(--faint);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 11px;background:var(--panel)}

/* ---------- shell ---------- */
.app{display:flex;min-height:100vh;padding-top:52px}
.app>aside{width:208px;border-right:1px solid var(--line);background:var(--bg2);position:fixed;top:52px;bottom:0;left:0;display:flex;flex-direction:column;gap:2px;padding:12px 10px;z-index:60;overflow-y:auto}
.side-sec{font:600 10px var(--mono);letter-spacing:.18em;color:var(--faint);text-transform:uppercase;padding:12px 10px 5px}
.app>aside button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;color:var(--dim);font:600 13px var(--sans);padding:9px 10px;border-radius:var(--r-md);cursor:pointer;text-align:left}
.app>aside button:hover{color:var(--text);background:var(--panel)}
.app>aside button.on{color:#fff;background:var(--accent-3)}
.app>aside button .ic{width:18px;display:flex;align-items:center;justify-content:center;flex:none}
.app>aside button .ic svg{width:17px;height:17px}
.app>aside button .tag{margin-left:auto;font:700 10px var(--mono);background:var(--green);color:var(--on-green);border-radius:var(--r-xs);padding:2px 5px;letter-spacing:.05em}
.app>aside .side-grow{flex:1;min-height:10px}.app>aside .admin-side-sec{padding-top:8px}
.main{flex:1;min-width:0;margin-left:208px;padding:24px 20px 110px}
/* Default analytical container. Measured against the reference comparison set:
   hierarchy comes from type, rhythm and chart height, not from filling the
   viewport, so this stays a calm 1240px. Dense evidence/inventory tables opt in
   to .wrap-wide when scanning genuinely benefits from the extra width. */
.wrap{max-width:1240px;margin:0 auto}
.wrap-wide{max-width:1440px}

/* mobile */
.tabbar{display:none}
.context-fab{position:fixed;right:24px;bottom:24px;z-index:72;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:var(--grad);color:#fff;box-shadow:0 12px 32px rgba(13,148,136,.34),0 0 0 5px rgba(8,8,13,.72);font:800 13px var(--sans);cursor:pointer;opacity:0;pointer-events:none;transform:translateY(12px) scale(.96);transition:opacity .18s,transform .18s,filter .18s}
.context-fab[hidden]{display:none}
.context-fab.show{opacity:1;pointer-events:auto;transform:none}
.context-fab:hover{filter:brightness(1.1);transform:translateY(-2px)}
.context-fab>span{display:grid;place-items:center;font:500 26px/1 var(--sans)}
.context-fab>b{display:none}
@media(max-width:920px){
  .app>aside{display:none}
  .main{margin-left:0;padding:16px 12px 110px}
  .tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;background:rgba(8,8,13,.97);border-top:1px solid var(--line);z-index:80;padding:6px 4px calc(6px + env(safe-area-inset-bottom));align-items:end;justify-content:space-around;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .tabbar button{flex:1;background:none;border:none;color:var(--faint);font:600 11px var(--sans);padding:8px 2px 4px;cursor:pointer;border-radius:var(--r-sm);position:relative}
  .tabbar button .ic{display:flex;align-items:center;justify-content:center;height:20px;margin-bottom:3px}
  .tabbar button .ic svg{width:20px;height:20px}
  .tabbar button.on{color:var(--accent)} .tabbar button.on .ic{color:var(--accent)}
  .tabbar button.on::before{content:"";position:absolute;top:-6px;left:20%;right:20%;height:3px;background:var(--accent);border-radius:0 0 var(--r-xs) var(--r-xs)}
  /* central purple "scan" CTA, floats above the bar */
  .tabbar .scan-cta{flex:0 0 68px;padding:0;transform:translateY(-18px);color:transparent}
  .tabbar .scan-btn{display:grid;place-items:center;width:56px;height:56px;margin:0 auto;
    background:radial-gradient(circle at 30% 30%,#34d399,#0d9488 60%,#065f46);
    border-radius:50%;color:#fff;
    box-shadow:0 6px 22px rgba(16,185,129,.5),0 0 0 6px rgba(11,11,19,.9)}
  .tabbar .scan-btn svg{width:26px;height:26px}
  .tabbar .scan-cta.on::before{display:none}
  .searchbar kbd{display:none}
  .api-chip span:last-child{display:none}
  .logo b{display:none}
  .context-fab{right:14px;bottom:88px}
}
/* mobile layout hardening */
@media(max-width:920px){
  html,body{overflow-x:hidden}
  h1{font-size:20px}
  .top{gap:8px;padding:0 10px}
  .top-ic{display:none} /* top-bar mini icons live in the bottom bar on mobile */
  .searchbar{font-size:12px;padding:8px 10px}
  .card-cols{grid-template-columns:1fr!important}
  .card-photo{max-width:340px;margin:0 auto}
  #cardChart{height:180px}
  .price-heroes{grid-template-columns:1fr}
  .own-bar{gap:7px}
  .own-bar .btn{flex:1;justify-content:center;min-width:44%}
  .listing a{max-width:64vw}
  .hl-item .t b{max-width:56vw}
  .hl-item .p{white-space:nowrap}
  .sum-strip,.cg-grid,.gp-grid{grid-template-columns:1fr 1fr}
  .corner-grid{grid-template-columns:1fr 1fr}
  .pred-card .g{font-size:32px}
  .modal{padding:16px}
  /* portfolio highlights: horizontal snap-scroll like pokepulse */
  .hl-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:88%;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px;margin:0 -12px;padding-left:12px;padding-right:12px}
  .hl-grid .hl{scroll-snap-align:start;min-width:88%}
  .hl-grid::-webkit-scrollbar{display:none}
  .hl-item{padding:10px 4px}
  .hl-item img,.hl-item .noimg{width:52px;height:74px;border-radius:var(--r-xs)}
  .hl-item .t b{font-size:15px;display:block;margin-bottom:2px;max-width:none;white-space:normal;line-height:1.15}
  .hl-item .t > span{font-size:12px;line-height:1.35;display:block}
  .hl-item .grade-badge,.hl-item .grade-badge span{display:inline-flex}
  .hl-item .grade-badge span{padding:3px 5px}
  .hl-item .p{font-size:13px}
  /* mobile items card list: bigger touch targets, sparkline + delta */
  .items-cards{display:flex;flex-direction:column;gap:0}
  .items-cards .item-card{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:14px 4px;border-bottom:1px solid var(--line);cursor:pointer;position:relative}
  .items-cards .item-card:last-child{border-bottom:none}
  .items-cards .item-card img,.items-cards .item-card .noimg{width:70px;height:98px;object-fit:cover;border-radius:var(--r-xs);background:#07070c}
  .items-cards .item-card .noimg{display:grid;place-items:center;font:700 10px var(--mono);color:var(--faint)}
  .items-cards .item-card .body b{font:800 17px var(--sans);display:block;line-height:1.15;margin:0 44px 3px 0}
  .items-cards .item-card .sub2{font:500 12px var(--mono);color:var(--faint);margin-bottom:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .items-cards .item-card .price-row{font:600 13px var(--sans);color:var(--accent);display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
  .items-cards .item-card .price-row .sep{color:var(--line2)}
  .items-cards .item-card .price-row .date{color:var(--faint);font-weight:500}
  .items-cards .item-card .spk-full{width:100%;height:34px;margin:2px 0 6px;display:block}
  .items-cards .item-card .foot{font:500 12px var(--mono);color:var(--faint);display:flex;gap:10px;align-items:center}
  .items-cards .item-card .foot .sep{color:var(--line2)}
  .items-cards .item-card .row-menu{position:absolute;top:14px;right:0;background:none;border:none;color:var(--faint);font:700 17px var(--mono);width:28px;height:28px;cursor:pointer;padding:0}
  .items-cards .item-card .badge.grade{transform:translateY(-2px)}
  .tbl-wrap{overflow-x:auto}
  table{min-width:0}
  /* items-top on mobile: Analytics + Manage row */
  .items-top{display:flex;gap:8px;margin-bottom:10px}
  .items-top .btn{flex:1;justify-content:center}
  /* set page mobile: two-up stat tiles */
  #setCardsWrap .sum-strip{grid-template-columns:1fr 1fr}
  #setCardsWrap .sum-strip .ctr-box:nth-child(3){grid-column:1 / -1}
  #setCardsWrap .sum-strip .ctr-box.hero{background:var(--accent-grad);border:none;color:#fff}
  #setCardsWrap .sum-strip .ctr-box.hero .lbl,#setCardsWrap .sum-strip .ctr-box.hero small{color:rgba(255,255,255,.9)}
}

/* ---------- shared ---------- */
.view{display:none}.view.active{display:block}
h1{font-size:26px;font-weight:800;letter-spacing:-.02em}
h2{font-size:17px;font-weight:700}
.eyebrow{font:600 11px var(--mono);letter-spacing:.18em;color:var(--faint);text-transform:uppercase;margin-bottom:6px}
.sub{color:var(--dim);font-size:13px;line-height:1.55}
.page-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.page-head .grow{flex:1}
/* pokepulse portfolio topbar */
.pf-topbar{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.pf-picker{background:none;border:none;color:var(--text);font:800 20px var(--sans);letter-spacing:-.01em;display:flex;align-items:center;gap:6px;cursor:pointer;padding:4px 2px}
.pf-picker .chev{color:var(--faint);font-size:15px}
.pf-ic{width:38px;height:38px;border-radius:var(--r-md);background:var(--panel);border:1px solid var(--line);color:var(--dim);cursor:pointer;display:grid;place-items:center}
.pf-ic svg{width:18px;height:18px}
/* Four key metrics sit above the chart: market value leads, then invested,
   return/coverage and collection. #dashStats uses display:contents so the three
   tiles it renders become siblings of the lead tile in this one grid. */
.pf-metrics{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:12px;margin:14px 0 4px;align-items:stretch}
.pf-metrics>#dashStats{display:contents}
.pf-metrics .stat{display:flex;flex-direction:column;justify-content:flex-start}
.pf-metrics .stat.lead{background:var(--accent-soft);border-color:var(--accent-3)}
/* phone order: value + movement full width, then the secondary metrics two-up.
   Kept next to the desktop rule and after it, so the narrower breakpoint wins. */
@media(max-width:920px){
  .pf-metrics{grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 4px}
  .pf-metrics .stat.lead{grid-column:1/-1}
  .pf-metrics .stat{padding:13px 14px}
  .pf-metrics .stat b{font-size:20px}
  .pf-val-row b{font-size:32px}
}
.pf-val-row{display:flex;align-items:center;gap:10px}
.pf-val-row b{font:900 32px var(--sans);letter-spacing:-.02em;line-height:1.1}
.pf-eye{background:none;border:none;color:var(--faint);cursor:pointer;display:grid;place-items:center;padding:4px}
.pf-eye svg{width:18px;height:18px}
.pf-24h{margin-top:7px;font:600 12px var(--mono);color:var(--faint);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pf-24h .delta{font:700 12px var(--sans)}
/* cost-basis coverage: a scoped subset return is honest, a portfolio-wide
   percentage built on missing cost is not */
.stat .scope{display:block;font:600 11px var(--sans);color:var(--faint);margin-top:6px;line-height:1.35}
.stat .fix{background:none;border:none;padding:0;margin-top:5px;color:var(--accent);font:700 11px var(--sans);cursor:pointer;text-align:left}
.stat .fix:hover,.stat .fix:focus-visible{text-decoration:underline}
.pf-range{margin-top:6px;padding:4px}
.pf-range button{background:none;border:none;color:var(--dim);font:700 12px var(--sans);padding:6px 12px;border-radius:var(--r-sm);cursor:pointer}
/* Solid accent fills carry white text, so they use --accent-3 (5.5:1), never
   --accent (#10b981), which measures 2.5:1 under white and fails. */
.pf-range button.on{background:var(--accent-3);color:#fff}
.pf-range .activity-toggle{background:var(--panel);border:1px solid var(--line);color:var(--dim);padding:6px 12px;border-radius:var(--r-sm);font:700 12px var(--sans);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.pf-range .activity-toggle.on{color:var(--accent);border-color:var(--accent)}
.pf-range .activity-toggle svg{width:14px;height:14px}
.pf-pill{background:var(--panel);border:1px solid var(--line);color:var(--dim);font:600 12px var(--sans);padding:7px 12px;border-radius:var(--r-md);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.pf-pill .chev{color:var(--faint);font-size:11px}
/* pokepulse "3 tile" stat row -> Invested / Return / Cost basis */
.stat-row .stat.cost{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
/* deal-picker (Portfolio / Inventory / Deal / Trade) modal */
.deal-picker{max-width:520px;margin:0 auto}
.deal-picker .dp-head{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 22px}
.deal-picker .dp-head h2{font:800 20px var(--sans);letter-spacing:-.02em}
.deal-picker .dp-head .close{background:none;border:none;color:var(--dim);font:600 15px var(--sans);cursor:pointer}
.deal-picker .dp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.deal-picker .dp-tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);padding:22px 14px;text-align:center;cursor:pointer;color:var(--text);position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;font:700 15px var(--sans)}
.deal-picker .dp-tile.on{background:var(--accent-3);border-color:var(--accent-3);color:#fff}
.deal-picker .dp-tile.on small{color:rgba(255,255,255,.85)}
.deal-picker .dp-tile small{color:var(--dim);font:500 12px var(--sans)}
.deal-picker .dp-tile .ico{width:24px;height:24px;color:currentColor}
.deal-picker .dp-tile .ico svg{width:100%;height:100%}
.deal-picker .dp-foot{margin-top:24px;text-align:center;font:500 12px var(--sans);color:var(--faint)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;margin-top:14px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);background:var(--panel2);color:var(--text);font:600 13px var(--sans);padding:9px 15px;border-radius:var(--r-md);cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--faint)}
.btn:focus-visible,.app>aside button:focus-visible,.tabbar button:focus-visible,.searchbar:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.primary{background:var(--accent-3);border-color:var(--accent-3);color:#fff}
.btn.primary:hover{filter:brightness(1.12)}
.btn.ghost{background:none}
.btn:disabled{opacity:.4;cursor:default}
.btn.small{padding:6px 11px;font-size:12px;border-radius:var(--r-sm)}
input[type=text],input[type=number],input[type=date],select,textarea{background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:var(--r-md);padding:9px 11px;font:400 13px var(--sans);width:100%}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
label.f{display:block;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:12px 0 5px}
.row{display:grid;gap:12px}
@media(min-width:640px){.row.c2{grid-template-columns:1fr 1fr}.row.c3{grid-template-columns:1fr 1fr 1fr}}
.up{color:var(--green)} .down{color:var(--red)}
.mono{font-family:var(--mono)}
.note{font-size:12px;color:var(--faint);margin-top:10px;line-height:1.5}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.toolbar .grow{flex:1}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--bg)}
.seg button{border:none;background:none;color:var(--dim);font:600 12px var(--sans);padding:7px 14px;cursor:pointer;border-right:1px solid var(--line)}
.seg button:last-child{border-right:none}
.seg button.on{background:var(--panel2);color:var(--text)}
.seg button small{color:var(--faint);font:600 10px var(--mono);margin-left:5px}
.chip{border:1px solid var(--line2);background:var(--panel2);color:var(--dim);font:600 12px var(--mono);padding:7px 12px;border-radius:var(--r-pill);cursor:pointer}
.chip.on{color:#fff;background:var(--accent-3);border-color:var(--accent-3)}
.mode-chips{display:flex;flex-wrap:wrap;gap:6px}
.crumb{font:600 12px var(--sans);color:var(--faint);margin-bottom:10px;display:flex;gap:7px;align-items:center}
.crumb a{color:var(--dim);text-decoration:none;cursor:pointer}
.crumb a:hover{color:var(--text)}

/* ---------- portfolio ---------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px 17px}
.stat .lbl{font:600 11px var(--sans);color:var(--dim);display:flex;align-items:center;gap:7px;margin-bottom:7px}
.stat b{display:block;font:700 26px var(--mono);letter-spacing:-.02em}
.stat small{display:block;font:600 11px var(--mono);color:var(--faint);margin-top:6px}
.stat.hero{background:var(--grad);border:none}
.stat.hero .lbl,.stat.hero small{color:rgba(255,255,255,.85)}
.stat.hero b{color:#fff}
.chart-panel{padding:14px 16px 10px}
.range-tabs{display:flex;gap:4px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.range-tabs button{border:1px solid var(--line);background:var(--bg);color:var(--dim);font:600 11px var(--mono);padding:5px 11px;border-radius:var(--r-sm);cursor:pointer}
.range-tabs button.on{background:var(--accent-3);border-color:var(--accent-3);color:#fff}
/* a range with too little stored history is offered as unavailable rather than
   drawn from data that does not exist */
.range-tabs button.lacks-data{opacity:.4;cursor:not-allowed}
.range-tabs button.lacks-data.on{background:none;border-color:var(--line);color:var(--faint)}
/* inline text button, for secondary actions inside a note line */
.linkish{background:none;border:none;padding:0;margin-left:6px;color:var(--accent);font:600 12px var(--sans);cursor:pointer}
.linkish:hover,.linkish:focus-visible{text-decoration:underline}
#dashChart,#dashChartHost{cursor:pointer}
/* The portfolio chart is the primary analytical surface, so it gets real height
   instead of a shallow strip. Both engines read clientHeight from these rules -
   lineChart() for the canvas, the adapter for the ECharts host - so the plot size
   has one source of truth and switching engines cannot shift the page. */
#dashChart,#dashChartHost{width:100%;height:380px;display:block}
/* Exactly one engine is visible, decided by renderPortfolio AFTER its awaits.
   The host defaults to hidden so a cold load shows one 380px panel, not both
   stacked at 760px collapsing when IndexedDB resolves - and if render throws
   early, the broken state is a single empty plot rather than two. */
#dashChartHost{display:none}
/* narrowest breakpoint last so it wins - these three rules are the only place
   the portfolio plot height is set */
@media(max-width:1100px){#dashChart,#dashChartHost{height:320px}}
@media(max-width:920px){#dashChart,#dashChartHost{height:260px}}
/* the host is focusable so arrow keys can walk the series */
#dashChartHost{position:relative;outline:none}
#dashChartHost:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-md)}
/* View data: the chart's values without hover, colour or a pointer. Tabular
   numerals so a column of money reads as a column. */
.chart-data{margin-top:10px;overflow-x:auto}
.chart-data table{width:100%;border-collapse:collapse;font:500 12px var(--mono);font-variant-numeric:tabular-nums}
.chart-data caption{caption-side:top;text-align:left;color:var(--faint);font:600 11px var(--sans);padding:0 0 8px}
.chart-data th,.chart-data td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.chart-data thead th{color:var(--dim);font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.chart-data tbody th{font-weight:600;color:var(--text)}
.chart-data tbody tr:last-child th,.chart-data tbody tr:last-child td{border-bottom:none}
.hl-grid{display:grid;gap:12px;margin-top:14px}
/* 921px, not 900: below the shell break the app is still in mobile chrome, and
   a 3-up grid inside it disagreed with its own navigation for 20px. */
@media(min-width:921px){.hl-grid{grid-template-columns:1fr 1fr 1fr}}
.hl{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px}
.hl h3{font-size:15px;margin-bottom:8px}
.hl .sec{font:600 10px var(--mono);letter-spacing:.14em;color:var(--faint);text-transform:uppercase;margin:8px 0 2px}
/* Row anatomy: identity / set+number+material / price / qty+total / movement.
   Each fact gets its own line-level role instead of one compressed metadata
   string, which is what made the reference rows scannable. */
.hl-item{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.hl-item:last-child{border-bottom:none}
.hl-item img,.hl-item .noimg{width:38px;height:53px;object-fit:cover;border-radius:var(--r-xs);background:#07070c;flex:none}
.hl-item .noimg{display:grid;place-items:center;font:700 10px var(--mono);color:var(--faint)}
.hl-item .t{min-width:0;flex:1}
.hl-item .t b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.hl-item .t .meta{display:block;font:500 11px var(--mono);color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
/* Direct child, not descendant: the grade badge lives inside the row's <b>,
   and a descendant selector here outranked `.grade-badge .co` (0,2,1 beats
   0,2,0) - repainting the badge's white-on-red company half in --faint at
   1.29:1. The meta line is always `.t > span`; nested spans inside it still
   inherit colour and font. */
.hl-item .t > span{font:500 11px var(--mono);color:var(--faint)}
.hl-item .v{text-align:right;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.hl-item .v .amt{display:inline-flex;align-items:center;gap:4px;justify-content:flex-end;font:800 13px var(--sans);letter-spacing:-.01em;white-space:nowrap}
/* The market glyph is inline with the figure and must be sized here: an unsized
   SVG falls back to its intrinsic box and swamps the row. Matches .mkt svg,
   which is where this glyph is sized everywhere else. */
.hl-item .v .amt svg{width:10px;height:10px;color:var(--faint);opacity:.7;flex:none}
.hl-item .v .qty,.hl-item .v .pct{font:500 11px var(--mono);color:var(--faint);white-space:nowrap}
/* When a mover's move happened. A move older than a week is dimmed AND marked,
   never colour alone - the panel otherwise presents whatever the data ends on
   as though it were current news. */
.hl-item .t .when{color:var(--faint)}
.hl-item .t .when.stale{color:var(--amber,#f59e0b);opacity:.9}
.hl-item .t .when.stale::before{content:"~ "}
/* A manual price the market disagrees with by 2x or more. The manual price
   stays authoritative - this only says the two no longer agree. */
.hl-item .v .pdiff{display:block;color:var(--amber,#f59e0b);opacity:.85}
/* A percentage measured on the market series while the row displays a manual
   price. The tag is what stops the two numbers reading as one fact. */
.hl-change{display:inline-flex;align-items:center;gap:4px;justify-content:flex-end}
.hl-change .basis{font:500 10px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);border-radius:var(--r-xs);padding:1px 3px;opacity:.8}
.hl-item .p{text-align:right;font:600 13px var(--mono)}
.hl-item .p small{display:block;font-size:11px}
/* actionable substitute panel when a highlight list would duplicate its neighbour */
.hl-empty{padding:6px 0 2px}
.hl-empty p{font:500 12px var(--sans);color:var(--dim);line-height:1.5;margin:0 0 9px}
.badge{font:700 10px var(--mono);letter-spacing:.05em;padding:2px 6px;border-radius:var(--r-xs);background:var(--panel2);border:1px solid var(--line2);color:var(--dim);vertical-align:1px}
.badge.grade{background:rgba(16,185,129,.16);border-color:var(--accent-3);color:#a7f3d0}
.badge.hit{background:var(--green-deep);border-color:var(--green);color:var(--green)}

/* items table */
.table-panel{padding:0;overflow:hidden}
.table-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 16px 10px}
.table-top input{max-width:260px}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}
th{font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none;white-space:nowrap}
th:hover{color:var(--dim)}
th .arr{font-size:10px}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
td.num,th.num{text-align:right;font-family:var(--mono)}
tr.rowlink{cursor:pointer} tr.rowlink:hover td{background:var(--panel2)}
.cell-card{display:flex;align-items:center;gap:10px;min-width:180px}
.cell-card img,.cell-card .noimg{width:30px;height:42px;object-fit:cover;border-radius:var(--r-xs);background:#07070c;flex:none}
.cell-card .noimg{display:grid;place-items:center;font:700 10px var(--mono);color:var(--faint)}
.cell-card .t b{display:block;font-size:13px;font-weight:600;max-width:230px;overflow:hidden;text-overflow:ellipsis}
.cell-card .t > span{font:500 10px var(--mono);color:var(--faint)}
td canvas{width:76px;height:26px;display:block}
.empty{border:1px dashed var(--line2);border-radius:var(--r-lg);padding:44px 20px;text-align:center;color:var(--dim);margin-top:16px;font-size:13px;line-height:1.6}

/* pokepulse-style search pill (Items panel + Manage) */
.pf-search{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px;flex:1;min-width:220px;max-width:340px}
.pf-search svg{width:15px;height:15px;color:var(--faint);flex:none}
.pf-search input{background:none;border:none;padding:0;flex:1;font:500 13px var(--sans);color:var(--text);width:auto;max-width:none}
.pf-search input:focus-visible{outline:none}
/* market price with faint platform globe glyph */
.mkt{display:inline-flex;align-items:center;gap:4px;color:var(--accent);white-space:nowrap}
.mkt svg{width:10px;height:10px;color:var(--faint);opacity:.7;flex:none}
td.num .mkt{justify-content:flex-end}
/* sort chevrons in table headers */
th .arr{display:inline-flex;align-items:center;margin-left:3px;vertical-align:middle}
th .arr svg{width:8px;height:8px}
th .arr.n{opacity:0;color:var(--faint);transition:opacity .12s}
th:hover .arr.n{opacity:.45}
th .arr.u,th .arr.d{color:var(--accent);opacity:.95}
th .arr.u svg{transform:rotate(180deg)}

/* ---------- portfolio manage ---------- */
.mg-bulk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel2)}
.mg-bulk .cnt{font:700 12px var(--sans);color:var(--text);margin-right:2px}
.mg-edit{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;margin-top:10px;display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.mg-edit .fld{flex:1;min-width:180px}
.mg-inp{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 8px;font:500 13px var(--mono);color:var(--text);width:100%}
.mg-inp.num{text-align:right}
td.mg-cell{padding:6px 10px}
td.mg-cell input{max-width:120px}
th.mg-chkcol,td.mg-chkcol{width:34px;text-align:center;padding-left:12px}
.mg-chk{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}
@media(max-width:920px){
  .mg-cards{display:flex;flex-direction:column;gap:0}
  .mg-cards .mg-card{display:grid;grid-template-columns:22px 58px 1fr;gap:11px;padding:13px 4px;border-bottom:1px solid var(--line);align-items:start}
  .mg-cards .mg-card:last-child{border-bottom:none}
  .mg-cards .mg-card img,.mg-cards .mg-card .noimg{width:58px;height:81px;object-fit:cover;border-radius:var(--r-xs);background:#07070c}
  .mg-cards .mg-card .noimg{display:grid;place-items:center;font:700 10px var(--mono);color:var(--faint)}
  .mg-cards .mg-card b{font:800 15px var(--sans);display:block;line-height:1.2;margin-bottom:2px}
  .mg-cards .mg-card .sub2{font:500 11px var(--mono);color:var(--faint);margin-bottom:8px}
  .mg-cards .mg-card .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
  .mg-cards .mg-card .grid3 label{font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:3px}
}

/* ---------- shared (read-only) portfolio ---------- */
.shared-wrap{max-width:760px;margin:0 auto;padding:26px 18px 60px}
.shared-brand{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.shared-brand .logo-mark{width:34px;height:34px}
.shared-brand b{font:800 17px var(--sans)}
.shared-brand b i{font-style:italic;color:var(--accent)}
.shared-brand .ro{margin-left:auto;font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 10px}
.shared-hero{background:var(--grad);border-radius:var(--r-xl);padding:20px 22px;margin-bottom:16px}
.shared-hero .lbl{font:600 11px var(--sans);color:rgba(255,255,255,.8);margin-bottom:6px}
.shared-hero b{font:900 32px var(--sans);letter-spacing:-.02em;color:#fff;display:block}
.shared-hero small{color:rgba(255,255,255,.8);font:600 12px var(--mono);margin-top:4px;display:block}

/* ---------- card detail page ---------- */
.own-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:9px 14px;margin-top:12px;font-size:13px}
.own-bar b.money{font-family:var(--mono);color:var(--accent)}
.own-bar .btn svg{width:14px;height:14px}
.card-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card-title-row h1{margin:0;min-width:0}
.card-title-row>.grade-badge{font-size:12px}
.card-title-row>.grade-badge .co,.card-title-row>.grade-badge .no{padding:5px 7px}
.card-title-actions{display:flex;gap:7px;margin-left:auto}
.card-title-actions .icon-btn{width:38px;height:38px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--dim);display:grid;place-items:center;cursor:pointer}
.card-title-actions .icon-btn:hover{border-color:var(--line2);color:var(--text)}
.card-title-actions .icon-btn svg{width:17px;height:17px}
.card-meta-line{line-height:1.7}
.research{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.research .lbl{font:600 10px var(--mono);letter-spacing:.14em;color:var(--faint)}
.price-heroes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,240px));gap:12px;margin-top:14px}
.ph{border-radius:var(--r-lg);padding:15px 17px;border:1px solid var(--line);background:var(--panel)}
.ph.grad{background:var(--grad);border:none}
.ph .lbl{font:600 11px var(--sans);color:var(--dim);margin-bottom:7px;display:flex;gap:7px;align-items:center}
.ph.grad .lbl,.ph.grad small{color:rgba(255,255,255,.85)}
.ph b{display:block;font:700 26px var(--mono)}
.ph.grad b{color:#fff}
.ph small{display:block;font:600 11px var(--mono);color:var(--faint);margin-top:5px}
.catalog-live-price{position:relative;padding-right:58px}
.catalog-live-price .price-refresh{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:var(--r-sm)}
.is-refreshing svg{animation:priceSpin .8s linear infinite}
@keyframes priceSpin{to{transform:rotate(360deg)}}
.grade-company-tabs{margin:10px 0;display:flex;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
.grade-company-tabs .chip{flex:0 0 auto}
.grade-ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:10px}
.grade-step{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;min-width:0}
.grade-step.current{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.grade-step-head{display:flex;align-items:center;justify-content:space-between;gap:7px;min-height:22px}
.grade-step .grade-badge{margin:0}
.grade-step .current-label{font:700 10px var(--mono);color:var(--accent);text-transform:uppercase}
.grade-step>b{display:block;font:750 17px var(--mono);margin-top:9px;color:var(--accent)}
.grade-step>small{display:block;font:600 10px var(--mono);color:var(--faint);margin-top:4px;white-space:normal}
.card-details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;margin:10px 0 0}
.card-details-grid>div{padding:10px 12px;border-top:1px solid var(--line)}
.card-details-grid dt{font:600 10px var(--mono);color:var(--faint);text-transform:uppercase}
.card-details-grid dd{margin:4px 0 0;font:600 13px var(--sans);overflow-wrap:anywhere}
.card-detail-footer{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:12px}
.card-cols{display:grid;gap:14px;margin-top:14px}
.card-media-stage{position:relative;min-width:0}
.card-action-rail{position:absolute;right:-52px;top:10px;z-index:5;display:flex;flex-direction:column;gap:8px}
.card-float-action{width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:rgba(18,18,29,.92);color:var(--dim);display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 22px var(--scrim-2);backdrop-filter:blur(12px);transition:transform .16s,border-color .16s,color .16s,filter .16s}
.card-float-action:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--text)}
.card-float-action:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.card-float-action.primary{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 10px 28px rgba(13,148,136,.45),0 0 0 4px rgba(16,185,129,.1)}
.card-float-action.primary:hover{filter:brightness(1.12)}
.card-float-action svg{width:18px;height:18px}
@media(min-width:860px){.card-cols{grid-template-columns:300px 1fr;gap:58px}}
.card-photo{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#07070c}
/* The hero is the one image whose box was not reserved: width:100% with no
   height meant the page reflowed when it loaded. Cards are 63:88 (a physical
   constant of the product), so reserve that and let anything non-card
   letterbox rather than stretch. The canvas keeps its own drawn ratio. */
.card-photo img,.card-photo canvas{width:100%;display:block}
.card-photo img{aspect-ratio:63/88;object-fit:contain}
.card-photo .cap{font:600 10px var(--mono);letter-spacing:.14em;color:var(--faint);text-align:center;padding:6px;border-top:1px solid var(--line)}
#cardChart{width:100%;height:240px;display:block}
@media(max-width:920px){.card-media-stage{width:min(340px,calc(100% - 54px));margin-left:auto;margin-right:auto}}
@media(max-width:480px){.card-media-stage{width:100%}.card-action-rail{right:8px;top:8px}.card-float-action{background:rgba(8,8,13,.88)}.card-float-action.primary{background:var(--grad)}.context-fab{display:none!important}}

/* centering readout / company grids */
.ctr-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:12px}
.ctr-box{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px}
.ctr-box .lbl{font:600 10px var(--mono);letter-spacing:.14em;color:var(--faint);text-transform:uppercase}
.ctr-box b{display:block;font:700 15px var(--mono);margin-top:4px}
.ctr-box small{display:block;font:600 11px var(--mono);color:var(--dim);margin-top:2px}
.cg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px;margin-top:12px}
.cg{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-md);padding:9px 6px;text-align:center}
.cg b{display:block;font:700 17px var(--mono)}
.cg span{font:600 10px var(--mono);letter-spacing:.12em;color:var(--faint)}

/* ---------- bench ---------- */
.steps{display:flex;margin-top:16px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.steps button{flex:1;background:var(--panel);border:none;border-right:1px solid var(--line);color:var(--faint);font:600 11px var(--mono);letter-spacing:.03em;padding:11px 2px;cursor:pointer;text-transform:uppercase}
.steps button:last-child{border-right:none}
.steps button.on{background:var(--panel2);color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
.steps button:disabled{opacity:.35;cursor:default}
.step-body{display:none}.step-body.on{display:block}
.analysis-overlay{position:fixed;inset:0;z-index:130;background:var(--scrim-heavy);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:var(--text);display:none;place-items:center;padding:24px}
.analysis-overlay.on{display:grid}
.analysis-card{width:min(520px,calc(100vw - 32px));background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:var(--r-sm);padding:24px 28px;box-shadow:var(--shadow-dialog);text-align:center}
.analysis-head{background:var(--bg);color:var(--text);border-radius:var(--r-sm);padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:left}
.analysis-head .eyebrow{color:var(--faint);margin:0}
.analysis-head b{display:block;font-size:26px;line-height:1.05}
.analysis-head span{font:800 26px var(--mono);color:var(--accent)}
.analysis-thumb{width:118px;height:162px;border-radius:var(--r-lg);background:var(--panel2);margin:24px auto 16px;display:grid;place-items:center;overflow:hidden}
.analysis-thumb img{width:100%;height:100%;object-fit:cover}
.analysis-bar{height:12px;border-radius:var(--r-pill);background:var(--line);overflow:hidden;margin-top:18px}
/* scaleX, not width: this bar fills while the bench is detecting the card and
   warping perspective, so the animation must stay off the layout thread */
.analysis-bar i{display:block;height:100%;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .25s ease}
.analysis-card small{display:inline-block;margin-top:14px;border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 12px;color:var(--dim);font-weight:700}
.drop{border:2px dashed var(--line2);border-radius:var(--r-lg);padding:34px 16px;text-align:center;color:var(--dim);cursor:pointer;font-size:13px;position:relative;overflow:hidden;min-height:150px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.drop.hover{border-color:var(--accent);color:var(--text)}
.drop b{color:var(--text)}
.drop .hint{font-size:12px;color:var(--faint)}
.drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#07070c}
.side-tabs{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-top:12px}
.side-tabs button{border:none;background:var(--bg);color:var(--dim);font:700 11px var(--mono);letter-spacing:.1em;padding:8px 20px;cursor:pointer}
.side-tabs button.on{background:var(--accent-3);color:#fff}
.side-tabs button:disabled{opacity:.35;cursor:default}
.canvas-wrap{position:relative;margin-top:12px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#07070c;touch-action:none;user-select:none}
canvas{display:block}
.canvas-wrap canvas{width:100%;height:auto}
.slider{display:flex;align-items:center;gap:10px;flex:1;min-width:200px}
.slider input[type=range]{flex:1;accent-color:var(--accent)}
.slider .val{font:600 12px var(--mono);color:var(--dim);min-width:52px;text-align:right}
.corner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:10px}
.corner{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-md);padding:10px;text-align:center}
.corner canvas{width:100%;border-radius:var(--r-sm);background:#07070c}
.corner .lbl{font:600 10px var(--mono);letter-spacing:.1em;color:var(--faint);text-transform:uppercase;margin:8px 0 6px}
.corner .scores{display:flex;justify-content:center;gap:4px;flex-wrap:wrap}
.corner .scores button{border:1px solid var(--line2);background:var(--bg);color:var(--dim);font:700 11px var(--mono);width:30px;padding:4px 0;border-radius:var(--r-xs);cursor:pointer}
.corner .scores button.on{background:var(--accent-3);border-color:var(--accent-3);color:#fff}
.pred-hero{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap;margin-top:14px}
.pred-card{flex:1;min-width:220px;background:var(--grad);border-radius:var(--r-lg);padding:16px 18px;display:flex;align-items:center;gap:16px}
.pred-card .g{font:800 46px var(--mono);color:#fff;line-height:1}
.pred-card .t{color:rgba(255,255,255,.9);min-width:0}
.pred-card .t b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pred-card .t span{font:600 10px var(--mono);letter-spacing:.14em}
.roi-pill{min-width:150px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;text-align:center}
.roi-pill b{display:block;font:800 32px var(--mono)}
.roi-pill span{font:600 10px var(--mono);letter-spacing:.14em;color:var(--faint)}
.sum-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:12px}
.gp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:10px}
.gp{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px}
.gp.on{border-color:var(--accent)}
.gp .lbl{font:600 10px var(--mono);letter-spacing:.1em;color:var(--faint)}
.gp b{display:block;font:700 17px var(--mono);margin-top:3px}
.gp small{display:block;font:600 11px var(--mono);margin-top:2px}

/* ---------- guided pre-grade workspace ---------- */
body.bench-active .wrap{max-width:1120px}
.bench-workspace{--bench-progress:0;--bench-content:980px;padding-bottom:30px}
.bench-head,.bench-workspace>.steps,.bench-workspace>.step-body{width:min(100%,var(--bench-content));margin-left:auto;margin-right:auto}
.bench-head{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:8px 0 20px;border-bottom:1px solid var(--line)}
.bench-head h1{font-size:32px;line-height:1.05}.bench-head p{max-width:620px;margin-top:8px;color:var(--dim);font-size:13px;line-height:1.45}
/* step status reads as one caption line on the content grid */
.bench-current{display:flex;align-items:baseline;gap:9px;width:min(100%,var(--bench-content));margin:11px auto 0;padding:0 8px}
.bench-current span{color:var(--faint);font:700 10px var(--mono);text-transform:uppercase;letter-spacing:.1em}
.bench-current b{color:var(--accent);font-size:13px}
.bench-workspace .steps{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin:18px auto 0;padding:0 8px;border:0;border-radius:0;overflow:visible;background:transparent}
.bench-workspace .steps:before,.bench-workspace .steps:after{content:"";position:absolute;left:8%;right:8%;top:15px;height:2px;background:var(--line);z-index:0}.bench-workspace .steps:after{right:auto;width:84%;transform:scaleX(var(--bench-progress));transform-origin:left center;background:var(--accent);transition:transform .2s}
.bench-workspace .steps button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:7px;padding:0 4px;border:0;background:transparent;color:var(--faint);font-family:var(--sans);text-transform:none;box-shadow:none}
.bench-workspace .steps button span{display:grid;place-items:center;width:31px;height:31px;border:2px solid var(--line2);border-radius:50%;background:var(--bg);font:750 11px var(--mono);transition:border-color .18s,background .18s,color .18s}
.bench-workspace .steps button b{font-size:12px}.bench-workspace .steps button.ready:not(:disabled) span{border-color:var(--accent);color:var(--accent)}.bench-workspace .steps button.on span{border-color:var(--accent-3);background:var(--accent-3);color:#fff}.bench-workspace .steps button.on{color:var(--text);box-shadow:none}.bench-workspace .steps button:disabled{opacity:.48}
.bench-workspace .step-body{margin-top:24px}
.bench-stage-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:14px}.bench-stage-intro h2{font-size:20px}.bench-tips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.bench-tips span{padding:5px 8px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--panel);color:var(--dim);font:650 10px var(--sans)}
.bench-upload-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.bench-upload{min-width:0}.bench-upload-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;padding:0 2px}.bench-upload-label b{font-size:12px}.bench-upload-label span{color:var(--faint);font:700 10px var(--mono);text-transform:uppercase;letter-spacing:.08em}
/* Upload zones hold a portrait card, so the slot is card-shaped: 63x88mm is the
   real trading-card ratio. Width is capped and centred rather than letting a wide
   grid column stretch the slot into a landscape box that photos never fill. */
.bench-workspace .drop{aspect-ratio:63/88;height:auto;min-height:0;width:100%;max-width:300px;margin-inline:auto;padding:18px;border:1px dashed var(--line2);border-radius:var(--r-sm);background:rgba(19,19,30,.72);font-size:13px;transition:border-color .16s,background .16s,transform .16s,box-shadow .16s}.bench-upload:first-child .drop{border-color:rgba(16,185,129,.38);background:rgba(16,185,129,.035)}.bench-workspace .drop:hover,.bench-workspace .drop.hover{transform:translateY(-2px);border-color:var(--accent);background:var(--accent-soft);box-shadow:0 12px 32px var(--scrim-1)}
.drop-icon{display:grid;place-items:center;width:42px;height:42px;margin:0 auto 10px;border:1px solid rgba(16,185,129,.32);border-radius:50%;background:var(--accent-soft);color:var(--accent)}.drop-icon svg{width:20px;height:20px}.bench-workspace .drop .hint{margin-top:3px;line-height:1.35}
.bench-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin:14px 0 0}.bench-actions .bench-paste{margin-right:auto;color:var(--faint);font-size:11px}
/* keyboard-shortcut guidance only on devices that actually have a keyboard: a
   wide touch tablet must not be told to press Ctrl+V either */
@media(pointer:coarse){.bench-actions .bench-paste{display:none}}.bench-actions .btn{min-width:170px;justify-content:center}.bench-actions .btn:disabled{opacity:1;border-color:var(--line);background:var(--panel);color:var(--faint)}
.bench-stage{margin-top:0;padding:18px;border-radius:var(--r-sm);background:var(--panel)}.bench-stage-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-bottom:13px;border-bottom:1px solid var(--line)}.bench-stage-title h2{font-size:20px}.bench-stage-title p{max-width:480px;color:var(--dim);font-size:12px;line-height:1.45;text-align:right}.guide-key{display:inline-block;width:16px;height:2px;margin:0 5px 3px 10px}.guide-key.outer{background:var(--red)}.guide-key.inner{background:var(--cyan)}.bench-footnote{padding-top:10px;border-top:1px solid var(--line)}
.bench-stage .canvas-wrap{border-radius:var(--r-sm);box-shadow:0 12px 34px var(--scrim-1)}.bench-stage .toolbar{margin-top:12px}.bench-stage .side-tabs{margin-top:14px}
.bench-workspace .corner{border-radius:var(--r-sm)}.bench-workspace .pred-card,.bench-workspace .roi-pill{border-radius:var(--r-sm)}.bench-report>.panel{border-radius:var(--r-sm)}

@media(max-width:700px){
  body.bench-active .main{padding:12px 12px 104px}.bench-workspace{padding-bottom:0}.bench-head{display:block;padding:2px 0 14px}.bench-head>div:first-child{min-width:0}.bench-head h1{font-size:20px}.bench-head p{display:none}.bench-current{margin-top:9px;padding:0}.bench-current b{font-size:12px}.bench-current span{font-size:10px}
  .bench-workspace .steps{margin:14px auto 0;padding:0}.bench-workspace .steps:before,.bench-workspace .steps:after{left:8.5%;right:8.5%;top:14px}.bench-workspace .steps:after{right:auto;width:83%}.bench-workspace .steps button{padding:0}.bench-workspace .steps button span{width:29px;height:29px}.bench-workspace .steps button b{display:none}.bench-workspace .step-body{margin-top:18px}
  .bench-stage-intro{align-items:flex-start;margin-bottom:12px}.bench-stage-intro h2{font-size:17px}.bench-tips{display:none}.bench-upload-grid{grid-template-columns:1fr;gap:14px}.bench-upload-label{margin-bottom:6px}.bench-upload-label span{font-size:10px}.bench-workspace .drop{max-width:232px;padding:12px 8px}.drop-icon{width:36px;height:36px;margin-bottom:7px}.drop-icon svg{width:18px;height:18px}.bench-workspace .drop b{font-size:12px}.bench-workspace .drop .hint{font-size:10px;padding:0 2px}
  .bench-actions{position:sticky;bottom:74px;z-index:20;margin:12px -4px 0;padding:9px 4px;background:rgba(11,11,19,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.bench-actions .bench-paste{display:none}.bench-actions .btn{width:100%;min-height:44px}
  .bench-stage{padding:12px;margin:0 -2px}.bench-stage-title{display:block;padding-bottom:10px}.bench-stage-title h2{font-size:17px}.bench-stage-title p{margin-top:5px;text-align:left;font-size:11px}.bench-stage .side-tabs{display:flex}.bench-stage .side-tabs button{flex:1}.bench-stage .toolbar{gap:7px}.bench-stage .toolbar .btn{flex:1;justify-content:center;min-width:44%}.bench-stage .slider{min-width:100%;order:-1}
  .bench-workspace .corner-grid{gap:7px}.bench-workspace .corner{padding:6px}.bench-workspace .corner .scores{gap:3px}.bench-workspace .corner .scores button{width:27px}.bench-workspace .analysis-card{padding:16px}.bench-workspace .analysis-head{padding:14px}.bench-workspace .analysis-head b{font-size:20px}
}

/* ---------- wishlist / binders / sets grids ---------- */
.wish-grid,.set-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:14px}
.wish-card,.set-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:13px;display:flex;flex-direction:column;gap:8px}
.wish-card .hd{display:flex;gap:10px;align-items:center;cursor:pointer}
.wish-card img{width:44px;height:61px;object-fit:cover;border-radius:var(--r-xs);background:#07070c;flex:none}
.wish-card .t{min-width:0;flex:1}
.wish-card .t b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wish-card .t span{font:500 11px var(--mono);color:var(--faint)}
.wish-card .prices{display:flex;gap:12px;font:600 12px var(--mono)}
.wish-card .prices .lbl{color:var(--faint);font-size:10px;letter-spacing:.1em;display:block}
/* pokepulse layout: date+code header row -> logo/title -> sparkline -> footer */
.set-card{cursor:pointer;min-height:240px;justify-content:flex-start;overflow:hidden;padding:12px 14px 14px;position:relative}
.set-card:hover{border-color:var(--line2)}
/* browse grids are div-based click targets, so they carry the shared focus ring */
.set-card:focus-visible,.catalog-card .img:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.catalog-card .img{cursor:pointer}
.set-card .set-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font:600 12px var(--mono);color:var(--faint)}
.set-card .set-head .code{background:var(--panel2);color:var(--dim);padding:2px 7px;border-radius:var(--r-xs);font-weight:700}
.set-card .logo{height:104px;display:grid;place-items:center;margin:6px -6px 4px;border-radius:var(--r-md);background:linear-gradient(180deg,var(--accent-soft),rgba(20,184,166,.04));overflow:hidden;position:relative}
.set-card .logo img{max-height:96px;max-width:90%;object-fit:contain;filter:drop-shadow(0 10px 14px var(--scrim-3))}
.set-card .logo.art img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;opacity:.9}
.set-card .spark-mini{width:100%;height:24px;display:block;margin:2px 0}
.set-card .foot{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin-top:6px;font-size:12px}
.set-card .foot .lbl{color:var(--faint);font:500 11px var(--sans)}
.set-card .foot b{font:800 15px var(--sans);color:var(--accent)}
.set-card .foot .card-n{color:var(--dim);font:500 12px var(--sans);text-align:right;align-self:end}
.set-card .foot .card-lbl{color:var(--faint);font:500 11px var(--sans);text-align:right}
.set-card b.title{display:none}
.set-card .meta{display:none}
.set-card .logo.art:has(img)+b{margin-top:-2px}
.set-card b{font-size:13px;line-height:1.15}
.set-card .meta{display:flex;justify-content:space-between;font:600 11px var(--mono);color:var(--faint)}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px}
.catalog-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.catalog-card:hover{border-color:var(--line2)}
.catalog-card .img{aspect-ratio:5/7;background:#07070c;cursor:pointer}
.catalog-card .img img{width:100%;height:100%;object-fit:contain}
.catalog-card .meta{padding:8px 10px 10px}
.catalog-card .meta b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catalog-card .meta span{font:500 10px var(--mono);color:var(--faint);display:block;margin:2px 0 6px}
.catalog-card .meta .px{font:700 12px var(--mono);color:var(--accent)}
.catalog-card .acts{display:flex;gap:5px;padding:0 10px 10px}
.catalog-card .acts button{flex:1;border:1px solid var(--line2);background:var(--panel2);color:var(--dim);font:600 11px var(--sans);padding:5px 4px;border-radius:var(--r-sm);cursor:pointer}
.catalog-card .acts button:hover{color:var(--text)}
.catalog-card .img.sealed{aspect-ratio:1/1;display:grid;place-items:center;padding:12px}
.catalog-card .img.sealed img{object-fit:contain}
.catalog-card .img.sealed .noimg{display:grid;place-items:center;width:100%;height:100%;font:700 11px var(--mono);color:var(--faint)}
/* per-row quick-actions menu */
.ctx-menu{position:fixed;z-index:120;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-md);padding:5px;display:flex;flex-direction:column;min-width:200px;box-shadow:var(--shadow-menu)}
.ctx-menu button{background:none;border:none;color:var(--text);text-align:left;padding:8px 11px;border-radius:var(--r-sm);font:500 13px var(--sans);cursor:pointer}
.ctx-menu button:hover{background:var(--panel2)}
.ctx-menu button.danger{color:var(--red)}
/* pokepulse-style portfolio picker */
.pf-menu{min-width:230px;padding:6px}
.pf-menu button{display:flex;align-items:center;gap:12px;padding:11px 12px;font:600 15px var(--sans);color:var(--text)}
.pf-menu button .dot{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--line2);background:transparent;flex:none;position:relative;display:grid;place-items:center}
.pf-menu button .dot.on{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 2.5px #0b0b13}
.pf-menu button .dot.plus{border-color:transparent;background:transparent;color:var(--accent);font:800 17px var(--mono);width:auto;height:auto}
.pf-menu button .lbl{flex:1;text-align:left}
.pf-menu button .star{color:#eab308;margin-left:2px}
.pf-menu .sep{height:1px;background:var(--line);margin:5px 4px}
/* card-search language sub-tabs (English / Japanese / Asia) */
.gs-langs{display:flex;flex-wrap:wrap;gap:6px;padding-left:2px;font-size:11px}
.gs-langs .chip{padding:5px 10px;font:600 11px var(--mono);letter-spacing:.02em;border:1px solid var(--line);color:var(--dim);background:transparent;border-radius:var(--r-pill);cursor:pointer}
.gs-langs .chip.on{background:var(--panel2);color:var(--text);border-color:var(--line2)}
/* pokepulse-style card-search result meta: put set/number/rarity on their
   own line each so users can tell OP04-064 (SEC) from OP04-064 (Alt Art) */
.ac-item .t .meta-row{display:flex;flex-wrap:wrap;gap:6px 10px;font:500 11px var(--mono);color:var(--faint);margin-top:2px}
.ac-item .t .meta-row .set{color:var(--dim)}
.ac-item .t .meta-row .num{color:var(--dim)}
.ac-item .t .meta-row .rar{color:var(--accent);font-weight:700}
.ctr-box.sel{border-color:var(--accent)}
.catalog-card .img{position:relative}
/* sits on top of card art, so it keeps a shadow to separate from the artwork */
.own-badge{position:absolute;top:6px;right:6px;z-index:2;background:var(--accent-3);color:#fff;font:700 10px var(--mono);padding:2px 7px;border-radius:var(--r-pill);box-shadow:0 2px 8px var(--scrim-2)}
/* pokepulse-exact split grade badge: coloured half with company + white half with grade */
.grade-badge{display:inline-flex;flex:0 0 auto;width:auto;max-width:max-content;align-items:stretch;align-self:center;vertical-align:middle;border-radius:var(--r-xs);overflow:hidden;font:800 10px var(--sans);letter-spacing:.02em;margin:0 2px 0 4px;line-height:1;transform:translateY(-1px);white-space:nowrap;box-shadow:0 1px 2px var(--scrim-2)}
.grade-badge .co{flex:0 0 auto;padding:3px 5px;color:#fff;white-space:nowrap}
.grade-badge .no{flex:0 0 auto;padding:3px 5px;background:#f4f4f5;color:#111;white-space:nowrap}
.grade-badge.psa .co{background:#dc2626} .grade-badge.psa.g10 .co{background:#dc2626}
.grade-badge.bgs .co{background:#27272a;color:#fff}
.grade-badge.bgs .no{background:#f5d76e;color:#111;box-shadow:inset 1px 0 0 #111}
.grade-badge.ace .co{background:#f97316}
.grade-badge.tag .co{background:#0ea5e9}
.grade-badge.cgc .co{background:#22c55e}
.grade-badge.mgc .co{background:#8b5cf6}
.grade-badge.getg .co{background:#14b8a6}
/* special 10s: BGS Black Label + CGC Pristine 10 — dark badge, gold/green text */
.grade-badge.bl .co{background:#111;color:#f5c518}
.grade-badge.bl .no{background:#111;color:#f5c518;box-shadow:inset 1px 0 0 #3a3a3a}
.grade-badge.pri .co{background:#0b132b;color:#4ade80}
.grade-badge.pri .no{background:#0b132b;color:#4ade80;box-shadow:inset 1px 0 0 #24304f}
/* deal draft bar */
.deal-draft-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 10px}
.deal-draft-bar select{width:auto;min-width:120px}
/* version-update toast */
.upd-toast{position:fixed;left:50%;bottom:78px;transform:translateX(-50%);z-index:200;display:none;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-pill);border-radius:var(--r-lg);padding:10px 14px;font:600 13px var(--sans);color:var(--text)}
.upd-toast.show{display:flex}
.upd-toast button{font:700 12px var(--sans);background:var(--accent,#3b82f6);color:#fff;border:0;border-radius:var(--r-sm);padding:6px 12px;cursor:pointer}
/* pokepulse-style More menu */
.mm-head{display:flex;align-items:center;gap:12px;padding:14px 4px 18px;border-bottom:1px solid var(--line);margin-bottom:14px}
.mm-head .avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#f97316,#dc2626);display:grid;place-items:center;color:#fff;font:800 17px var(--sans);flex:none}
.mm-head .name b{display:block;font:700 15px var(--sans)}
.mm-head .name span{display:block;color:var(--faint);font:500 12px var(--sans)}
.mm-head .actions{margin-left:auto;display:flex;gap:8px}
.mm-head .actions button{width:38px;height:38px;border-radius:var(--r-md);background:var(--panel);border:1px solid var(--line);color:var(--dim);cursor:pointer;font:700 15px var(--mono);position:relative;display:grid;place-items:center}
.mm-head .actions button svg{width:18px;height:18px}
.mm-head .actions button .dot{position:absolute;top:-4px;right:-4px;background:var(--accent-3);color:#fff;font:800 10px var(--mono);border-radius:var(--r-pill);padding:1px 5px;min-width:16px;text-align:center;line-height:1.4}
.mm-toggle{display:grid;grid-template-columns:1fr 1fr;background:transparent;border:none;border-radius:var(--r-lg);padding:0;gap:8px;margin-bottom:14px}
.mm-toggle button{background:var(--panel);border:1px solid var(--line);color:var(--dim);font:700 15px var(--sans);padding:14px;border-radius:var(--r-lg);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px}
.mm-toggle button.on{color:var(--text);border-color:var(--line2)}
.mm-toggle button.on .ic-svg svg *{stroke:var(--accent)}
.mm-toggle button .ic-svg{width:20px;height:20px;display:grid;place-items:center;color:var(--dim)}
.mm-toggle button .ic-svg svg{width:20px;height:20px}
.mm-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.mm-tiles button{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 8px 14px;color:var(--text);font:600 13px var(--sans);cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;transition:border-color .15s}
.mm-tiles button.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.mm-tiles button.on .ico{color:var(--accent)}
.mm-tiles button .ico{color:var(--dim);width:24px;height:24px}
.mm-tiles button .ico svg{width:100%;height:100%}
.mm-tiles button .tag{position:absolute;top:6px;right:6px;background:#4ade80;color:var(--on-green);font:700 10px var(--mono);padding:2px 5px;border-radius:var(--r-xs);letter-spacing:.05em}
.mm-sec{font:700 11px var(--mono);color:var(--faint);letter-spacing:.18em;margin:16px 4px 8px;text-transform:uppercase}
.mm-rows{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.mm-rows button{width:100%;background:none;border:none;color:var(--text);font:500 15px var(--sans);padding:14px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;text-align:left;border-bottom:1px solid var(--line)}
.mm-rows button:last-child{border-bottom:none}
.mm-rows button:hover{background:var(--panel2)}
.mm-rows button .ic{font:700 15px var(--mono);color:var(--dim);width:22px;text-align:center}
.mm-rows button .ico{width:22px;height:22px;color:var(--dim);flex:none;display:grid;place-items:center}
.mm-rows button .ico svg{width:22px;height:22px}
.mm-rows button .ico.game{width:26px;height:26px}
.mm-rows button .ico.game svg{width:26px;height:26px}
.mm-rows button .tag{margin-left:auto;background:#22c55e;color:var(--on-green);font:700 10px var(--mono);padding:2px 7px;border-radius:var(--r-pill);letter-spacing:.05em}
.mm-rows button.disabled{color:var(--faint);cursor:default}
.mm-cta{width:100%;padding:14px;border-radius:var(--r-md);font:700 15px var(--sans);cursor:pointer;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;border:none}
.mm-cta.discord{background:#5865f2;color:#fff}
.mm-cta.logout{background:rgba(220,38,38,.12);color:var(--red);border:1px solid rgba(220,38,38,.35);margin-top:10px}
/* pokepulse has no equivalent - the Grade a card CTA is our differentiator */
.mm-hero{width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;margin:12px 0 4px;background:linear-gradient(135deg,var(--accent-soft),rgba(20,184,166,.08));border:1px solid rgba(16,185,129,.35);border-radius:var(--r-lg);cursor:pointer;color:var(--text);text-align:left}
.mm-hero .ico{width:36px;height:36px;flex:none;display:grid;place-items:center;background:var(--accent-3);color:#fff;border-radius:var(--r-md)}
.mm-hero .ico svg{width:20px;height:20px}
.mm-hero>div{flex:1}
.mm-hero>div b{display:block;font:800 15px var(--sans);letter-spacing:-.01em}
.mm-hero>div span{display:block;font:500 12px var(--sans);color:var(--faint);margin-top:2px}
.mm-hero .arrow{color:var(--faint);font:800 17px var(--mono)}
/* trend delta with proper diagonal arrow */
.delta{display:inline-flex;align-items:center;gap:3px;font:700 12px var(--sans);white-space:nowrap}
.delta.up{color:#4ade80} .delta.down{color:#f87171}
.delta svg{width:12px;height:12px}
/* set tile hero variant */
.set-card.hero{background:var(--accent-grad);border-color:transparent;color:#fff}
.set-card.hero .meta span,.set-card.hero .meta{color:rgba(255,255,255,.85)}
/* synthetic set thumbnail (One Piece starter decks etc) */
.set-thumb-synth{width:100%;height:100%;display:grid;place-items:center;text-align:center;padding:8px;background:#0f0f18;border-radius:var(--r-sm);box-sizing:border-box;position:relative;overflow:hidden}
.set-thumb-synth .st-eyebrow{position:absolute;top:8px;left:0;right:0;font:800 10px var(--mono);letter-spacing:.28em;color:rgba(255,255,255,.75);text-transform:uppercase}
/* was 'Playfair Display' - never loaded (no @font-face, no stylesheet link),
   so it silently fell back to the system sans on every device. Say what we mean. */
.set-thumb-synth .st-title{font:900 clamp(15px,4.2vw,22px) var(--sans);letter-spacing:-.02em;color:#fff;line-height:1.05;text-shadow:0 2px 6px var(--scrim-3);word-break:break-word}
.set-thumb-synth .st-title em{font-style:normal;color:var(--amber)}

/* ---------- submissions ---------- */
.pipeline{display:flex;gap:6px;align-items:center;font:600 10px var(--mono);letter-spacing:.06em;flex-wrap:wrap}
.pipeline span{padding:4px 9px;border-radius:var(--r-pill);border:1px solid var(--line2);color:var(--faint)}
.pipeline span.done{color:var(--green);border-color:var(--green)}
.pipeline span.now{color:#fff;background:var(--accent-3);border-color:var(--accent-3)}
.sub-row{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px;margin-top:12px}
.sub-row .hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sub-row .hd b{font-size:15px}
.sub-row .hd .grow{flex:1}

/* ---------- deal calc ---------- */
.deal-cols{display:grid;gap:14px;margin-top:14px}
@media(min-width:800px){.deal-cols{grid-template-columns:1fr 1fr}}
.deal-line{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.deal-line .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deal-line .px{font-family:var(--mono)}
.deal-line button{border:none;background:none;color:var(--faint);cursor:pointer;font-size:15px}
.deal-total{display:flex;justify-content:space-between;font:700 15px var(--mono);padding-top:10px}
.deal-verdict{margin-top:14px;border-radius:var(--r-lg);padding:16px;text-align:center;font:700 17px var(--mono);border:1px solid var(--line)}

/* ---------- history ---------- */
.ev-day{font:600 10px var(--mono);letter-spacing:.14em;color:var(--faint);text-transform:uppercase;margin:16px 0 4px}
.ev{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.ev .ic{width:28px;height:28px;border-radius:var(--r-sm);background:var(--panel2);border:1px solid var(--line2);display:grid;place-items:center;font-size:12px;flex:none;color:var(--dim)}
.ev .ic svg{width:14px;height:14px}
.ev .t{flex:1}
.ev .tm{font:500 11px var(--mono);color:var(--faint)}

/* ---------- modal & bits ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(4,4,9,.75);backdrop-filter:blur(4px);display:none;z-index:100;overflow-y:auto;padding:24px 12px}
#searchBg{background:rgba(4,4,9,.52);backdrop-filter:none;padding:10px 12px}
.modal-bg.open{display:block}
.modal{background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-xl);max-width:640px;margin:0 auto;padding:20px}
.modal h2{font-size:17px}
.modal .close-row{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;align-items:center}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin-top:14px;font-size:13px}
.kv b{font:600 11px var(--mono);letter-spacing:.08em;color:var(--faint);text-transform:uppercase;padding-top:1px}
.price-box{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;margin-top:14px;background:var(--panel2)}
.price-box .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.price-box .big{font:700 20px var(--mono)}
.price-box .big small{display:block;font:600 10px var(--mono);color:var(--faint);letter-spacing:.08em}
.listing{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:6px 0;border-top:1px solid var(--line)}
.listing a{color:var(--cyan);text-decoration:none;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.listing span{font-family:var(--mono);flex:none}
.danger{color:var(--red)}
.pill{font:700 10px var(--mono);letter-spacing:.06em;padding:4px 8px;border-radius:var(--r-pill);border:1px solid var(--line2);color:var(--dim)}
.pill.raw{color:var(--dim)} .pill.sub{color:var(--amber);border-color:var(--amber)}
.pill.grading{color:var(--cyan);border-color:var(--cyan)} .pill.graded{color:var(--green);border-color:var(--green)}
.pill.sold{color:var(--red);border-color:var(--red)}

/* search overlay */
.gs-modal{max-width:min(760px,calc(100vw - 24px));margin:0 auto;padding:14px 16px;border-radius:var(--r-lg)}
.ac-list{position:absolute;left:0;right:0;top:100%;z-index:80;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-md);margin-top:4px;max-height:300px;overflow-y:auto;box-shadow:var(--shadow-list)}
.ac-item{display:flex;align-items:center;gap:10px;padding:8px 10px;cursor:pointer;border-bottom:1px solid var(--line)}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item.sel{background:var(--panel)}
.ac-item img{width:30px;height:42px;object-fit:cover;border-radius:var(--r-xs);background:#07070c;flex:none}
.ac-item .t{min-width:0;flex:1}
.ac-item .t b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-item .t > span{font:500 11px var(--mono);color:var(--faint)}
.ac-note{padding:9px 12px;font:500 12px var(--sans);color:var(--faint)}
#gsResults .ac-item{border-radius:var(--r-sm);border:none;border-bottom:1px solid var(--line)}
#gsResults .ac-item .btn{flex:none}
.gs-sec{font:600 10px var(--mono);letter-spacing:.16em;color:var(--faint);text-transform:uppercase;padding:10px 2px 4px}
.toast{position:fixed;box-shadow:var(--shadow-pill);bottom:76px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line2);color:var(--text);font:600 13px var(--sans);padding:10px 18px;border-radius:var(--r-pill);opacity:0;transition:opacity .25s;pointer-events:none;z-index:200;max-width:90vw;text-align:center}
.toast.show{opacity:1}

/* ---------- sign-in lock screen ---------- */
.lock-bg{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;background:rgba(8,8,13,.45);backdrop-filter:blur(22px) saturate(.8);-webkit-backdrop-filter:blur(22px) saturate(.8);padding:20px}
.lock-bg.open{display:flex}
.lock-card{width:100%;max-width:360px;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-xl);padding:28px;text-align:center;box-shadow:var(--shadow-dialog)}
.lock-card .logo-mark{width:52px;height:52px;margin:0 auto 14px;--logo-gap:var(--panel)}
.lock-card h2{font-size:20px;margin-bottom:4px}
.lock-card p{color:var(--dim);font-size:13px;margin-bottom:16px}
.lock-card input{margin-bottom:10px;text-align:center}
.lock-card .err{color:var(--red);font:600 12px var(--sans);min-height:16px;margin-bottom:6px}

/* guided corner walkthrough bar */
.guide-bar{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:6;display:flex;gap:8px;align-items:center;background:rgba(8,8,13,.88);border:1px solid var(--line2);border-radius:var(--r-pill);padding:5px 8px;box-shadow:var(--shadow-pill)}
.guide-bar span{font:700 12px var(--mono);letter-spacing:.04em;color:var(--text);padding:0 4px;white-space:nowrap}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- full-screen card scanner (Collectr-style) ---------- */
.scanview{position:fixed;inset:0;z-index:120;background:#05050a;display:none;flex-direction:column;color:#fff;overscroll-behavior:none}
.scanview.on{display:flex}
.sv-top{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;background:linear-gradient(rgba(5,5,10,.85),rgba(5,5,10,0))}
.sv-top .sv-title{flex:1;text-align:center;font:700 15px var(--sans)}
.sv-ic{width:40px;height:40px;border-radius:var(--r-md);background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.sv-ic:active{background:rgba(255,255,255,.2)}
.sv-ic svg{width:20px;height:20px}
.sv-stage{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--camera-black);display:flex;align-items:center;justify-content:center}
.sv-stage video,.sv-stage .sv-freeze{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sv-stage .sv-freeze{display:none;object-fit:contain;background:var(--camera-black)}
.sv-stage.frozen .sv-freeze{display:block}
.sv-fallback-art{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;color:var(--dim)}
.scanview.mode-fallback .sv-stage video{display:none}
.scanview.mode-fallback .sv-fallback-art{display:flex}
/* alignment guide: card aspect 63:88, dimmed mask outside via huge shadow */
.sv-guide{position:relative;width:min(70vw,46vh);aspect-ratio:63/88;border-radius:var(--r-xl);box-shadow:0 0 0 100vmax var(--scrim-3);outline:2px solid rgba(255,255,255,.28);pointer-events:none}
.scanview.mode-fallback .sv-guide{box-shadow:0 0 0 100vmax rgba(5,5,10,.82)}
.sv-guide i{position:absolute;width:30px;height:30px;border:3px solid #34d399}
.sv-guide i.tl{top:-2px;left:-2px;border-right:0;border-bottom:0;border-radius:var(--r-xl) 0 0 0}
.sv-guide i.tr{top:-2px;right:-2px;border-left:0;border-bottom:0;border-radius:0 var(--r-xl) 0 0}
.sv-guide i.bl{bottom:-2px;left:-2px;border-right:0;border-top:0;border-radius:0 0 0 var(--r-xl)}
.sv-guide i.br{bottom:-2px;right:-2px;border-left:0;border-top:0;border-radius:0 0 var(--r-xl) 0}
.scanview.scanning .sv-guide i{border-color:#4ade80}
.sv-hint{position:absolute;left:0;right:0;bottom:14px;z-index:5;text-align:center;font:600 15px var(--sans);color:#fff;text-shadow:0 1px 6px var(--scrim-4);pointer-events:none;padding:0 20px}
.sv-hint .sub{display:block;font:500 12px var(--sans);color:#c7c9d6;margin-top:4px;pointer-events:auto}
.sv-hint .sub a{color:#34d399;text-decoration:underline;cursor:pointer}
.sv-controls{position:relative;z-index:6;display:flex;align-items:center;justify-content:space-around;gap:12px;padding:16px 22px calc(18px + env(safe-area-inset-bottom));background:#05050a}
.sv-btn{background:none;border:none;color:#fff;display:flex;flex-direction:column;align-items:center;gap:5px;font:600 11px var(--sans);cursor:pointer;min-width:56px}
.sv-btn svg{width:24px;height:24px}
.sv-btn.dim{color:var(--faint)}
.sv-btn.wired{color:#fff}
.sv-shutter{width:66px;height:66px;border-radius:50%;background:#fff;border:4px solid rgba(255,255,255,.35);cursor:pointer;flex:none}
.sv-shutter:active{transform:scale(.94)}
.sv-count{position:absolute;top:calc(58px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:6;background:rgba(13,148,136,.94);color:#fff;font:700 11px var(--mono);padding:5px 12px;border-radius:var(--r-pill);box-shadow:0 4px 14px var(--scrim-2)}
/* result sheet + db panel: slide up from bottom */
.sv-sheet,.sv-dbpanel,.sv-basketpanel{position:absolute;left:0;right:0;bottom:0;z-index:8;background:var(--panel);border-top:1px solid var(--line2);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--shadow-sheet);transform:translateY(102%);transition:transform .22s ease;max-height:82%;overflow-y:auto;padding:16px 16px calc(20px + env(safe-area-inset-bottom))}
.sv-sheet.on,.sv-dbpanel.on,.sv-basketpanel.on{transform:translateY(0)}
.sv-sheet .row{display:flex;gap:12px;align-items:flex-start}
.sv-sheet .row img{width:74px;height:103px;object-fit:cover;border-radius:var(--r-sm);background:#07070c;flex:none}
.sv-sheet .row .noimg{width:74px;height:103px;border-radius:var(--r-sm);background:#07070c;display:grid;place-items:center;color:var(--faint);font:700 10px var(--mono);flex:none}
.sv-sheet .info{flex:1;min-width:0}
.sv-sheet .info b{font:800 17px var(--sans);display:block;line-height:1.15;color:var(--text)}
.sv-sheet .info .s{font:500 13px var(--mono);color:var(--dim);margin-top:3px;display:block}
.sv-sheet .conf{display:inline-block;margin-top:8px;font:700 11px var(--mono);padding:3px 9px;border-radius:var(--r-pill);background:rgba(74,222,128,.16);color:var(--green)}
.sv-sheet .conf.low{background:rgba(251,191,36,.16);color:var(--amber)}
.sv-sheet .px{font:800 17px var(--sans);color:var(--accent);margin-top:6px}
.sv-sheet .acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.sv-sheet .acts .btn{justify-content:center}
.sv-sheet .acts .wide{grid-column:1 / -1}
.sv-cands .cand{display:flex;gap:10px;align-items:center;padding:9px 4px;border-top:1px solid var(--line);cursor:pointer}
.sv-cands .cand img{width:40px;height:56px;object-fit:cover;border-radius:var(--r-xs);background:#07070c}
.sv-cands .cand .t{flex:1;min-width:0}
.sv-cands .cand .t b{font:700 13px var(--sans);display:block}
.sv-cands .cand .t span{font:500 11px var(--mono);color:var(--faint)}
.sv-dbpanel h3{font:700 15px var(--sans);margin-bottom:2px}
.sv-dbpanel .note{color:var(--dim);font-size:12px;margin-bottom:10px}
.sv-dbrow{display:flex;align-items:center;gap:10px;padding:8px 2px;border-top:1px solid var(--line)}
.sv-dbrow .t{flex:1;min-width:0}
.sv-dbrow .t b{font:600 13px var(--sans);display:block}
.sv-dbrow .t span{font:500 11px var(--mono);color:var(--faint)}
.sv-dbrow .st{font:700 10px var(--mono);padding:3px 7px;border-radius:var(--r-pill);white-space:nowrap}
.sv-dbrow .st.ok{background:rgba(74,222,128,.16);color:var(--green)}
.sv-dbrow .st.no{background:rgba(92,96,114,.2);color:var(--dim)}
.sv-dbrow .st.stale{background:rgba(251,191,36,.16);color:var(--amber)}
.sv-prog{height:8px;border-radius:var(--r-pill);background:var(--panel2);overflow:hidden;margin:10px 0 4px}
/* same reason: this one fills while bulk-indexing hashes hundreds of card images */
.sv-prog i{display:block;height:100%;background:var(--grad);width:100%;transform:scaleX(0);transform-origin:left center;transition:transform .2s}
/* live-mode frame controls: Card/Slab chips, brightness slider, torch */
.sv-framectl{position:relative;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px 0;background:#05050a}
.sv-framectl .chip.on{background:var(--accent-3);border-color:var(--accent-3);color:#fff}
.sv-bright{flex:1;display:flex;align-items:center;gap:8px;color:#fff;max-width:230px}
.sv-bright .ic{display:flex;color:var(--amber)}
.sv-bright .ic svg{width:18px;height:18px}
.sv-bright input[type=range]{flex:1;accent-color:#34d399;height:4px}
.sv-torch.sv-ic{width:40px;height:40px}
/* live shutter: big white ring, centred above the bottom controls */
.sv-shutterwrap{position:relative;z-index:6;display:flex;justify-content:center;padding:12px 0 4px;background:#05050a}
.sv-shutter.live{width:72px;height:72px;box-shadow:0 0 0 3px #05050a,0 0 0 6px rgba(255,255,255,.35)}
/* collapsed session-basket bar */
.sv-basketbar{position:relative;z-index:7;display:none;align-items:center;gap:10px;margin:0 12px 8px;padding:12px 15px;background:var(--accent-3);color:#fff;border-radius:var(--r-lg);cursor:pointer;box-shadow:0 8px 22px var(--scrim-3)}
.sv-basketbar.show{display:flex}
.sv-basketbar .ic{display:flex}.sv-basketbar .ic svg{width:20px;height:20px}
.sv-basketbar .lbl{flex:1;font:700 13px var(--sans)}
.sv-basketbar .n{background:rgba(255,255,255,.24);border-radius:var(--r-pill);padding:2px 9px;font:700 12px var(--mono)}
.sv-basketbar .t{font:800 15px var(--sans)}
.sv-basketbar .chev{display:flex}.sv-basketbar .chev svg{width:18px;height:18px;transform:rotate(180deg)}
/* expanded basket panel rows */
.sb-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.sb-head h3{flex:1;font:700 17px var(--sans)}
.sb-head .sb-hcount{font:700 12px var(--mono);color:var(--accent)}
.sb-row{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.sb-thumb{width:46px;height:64px;border-radius:var(--r-xs);background:#07070c;flex:none;overflow:hidden;cursor:pointer}
.sb-thumb img{width:100%;height:100%;object-fit:cover}
.sb-info{flex:1;min-width:0;cursor:pointer}
.sb-info b{font:700 13px var(--sans);display:block;line-height:1.2;color:var(--text)}
.sb-info .s{font:500 11px var(--mono);color:var(--dim);display:block;margin:2px 0 6px}
.sb-conds{display:flex;gap:4px;flex-wrap:wrap}
.sb-right{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none}
.sb-px{font:800 13px var(--sans);color:var(--accent)}
.sb-qty{display:flex;align-items:center;gap:8px}
.sb-qty button{width:26px;height:26px;border-radius:var(--r-sm);border:1px solid var(--line2);background:var(--panel2);color:var(--text);font-size:17px;line-height:1;cursor:pointer}
.sb-qty span{font:700 13px var(--mono);min-width:14px;text-align:center}
.sb-del{border:none;background:none;color:var(--faint);cursor:pointer;padding:2px}
.sb-del svg{width:16px;height:16px}
.sb-foot{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.sb-foot .btn{justify-content:center}
.chip.mini{padding:4px 8px;font-size:10px}
/* per-card buy% chips under a deal line */
.deal-line .sub{display:block;font:500 11px var(--mono);color:var(--faint);margin-top:2px}
.deal-buychips{display:flex;gap:5px;flex-wrap:wrap;padding:2px 0 9px}
/* auto-lock mini toast (centre of the viewfinder) */
.sv-minitoast{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.9);z-index:7;background:rgba(16,185,129,.96);color:#fff;font:700 13px var(--sans);padding:10px 18px;border-radius:var(--r-pill);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;box-shadow:var(--shadow-pill);white-space:nowrap;max-width:80%;overflow:hidden;text-overflow:ellipsis}
.sv-minitoast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(min-width:921px){
  .sv-guide{width:min(46vh*0.716,340px)}
  .sv-sheet,.sv-dbpanel,.sv-basketpanel{left:50%;transform:translate(-50%,102%);max-width:520px;border-radius:var(--r-xl) var(--r-xl) 0 0}
  .sv-sheet.on,.sv-dbpanel.on,.sv-basketpanel.on{transform:translate(-50%,0)}
}
/* ============ public landing (logged-out) - modern reskin ============ */
/* the landing takes over the whole viewport: kill the app-shell chrome offsets
   so the announcement bar sits flush against the very top of the screen */
body.landing .app{padding-top:0}
body.landing .main{margin-left:0;padding:0}
body.landing .wrap{max-width:none;margin:0}
#view-landing{padding:0;position:relative;overflow:hidden}
/* soft ambient glow behind the hero - one restrained accent, CSS-only */
#view-landing:before{content:"";position:absolute;top:-260px;left:50%;transform:translateX(-50%);width:min(1100px,140vw);height:720px;background:radial-gradient(60% 60% at 50% 40%,rgba(16,185,129,.20),rgba(20,184,166,.08) 55%,transparent 72%);pointer-events:none;z-index:0}
.ld-wrap{max-width:1080px;margin:0 auto;padding:0 22px 80px;position:relative;z-index:1}
.ld-top{display:flex;align-items:center;gap:10px;padding:20px 0}
.ld-top .logo-mark{width:36px;height:36px}
.ld-top b{font-size:17px;letter-spacing:-.01em}.ld-top b i{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ld-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:var(--r-pill);padding:8px 16px;font:600 12px var(--sans);color:var(--dim);margin-bottom:26px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ld-chip .dot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--green);box-shadow:0 0 8px var(--green);animation:lddot 2.4s ease-in-out infinite}
@keyframes lddot{50%{opacity:.45}}
.ld-hero{text-align:center;padding:78px 0 26px}
.ld-hero h1{font:800 clamp(46px,9.4vw,92px)/1.02 var(--sans);letter-spacing:-.035em;margin:0;text-wrap:balance}
/* The typewriter cycles words of different widths inside a centred headline, so
   the whole line used to re-centre on every keystroke. The slot reserves the
   width of the longest word with a hidden ghost and the live word is painted
   over it, so the headline never moves. */
.ld-hero h1 .tw-slot{position:relative;display:inline-block;text-align:left}
.ld-hero h1 .tw-ghost{visibility:hidden}
.ld-hero h1 .tw{position:absolute;left:0;top:0;white-space:nowrap;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ld-hero h1 .cursor{display:inline-block;width:.055em;height:.82em;border-radius:var(--r-xs);background:var(--accent);vertical-align:-.05em;margin-left:.06em;animation:ldblink 1.05s steps(1) infinite}
@keyframes ldblink{50%{opacity:0}}
.ld-hero p{color:var(--dim);font-size:clamp(15px,2.1vw,17px);line-height:1.55;max-width:600px;margin:26px auto 34px}
/* The CTA earns its prominence from the gradient fill and its size, not from a
   coloured halo. Emerald glows are pokepulse-era legacy being retired. */
.ld-cta{display:inline-flex;align-items:center;gap:8px;background:var(--grad);color:#fff;border:none;border-radius:var(--r-lg);padding:16px 40px;font:800 15px var(--sans);cursor:pointer;transition:transform .2s cubic-bezier(.2,.7,.3,1),filter .2s}
.ld-cta:hover{transform:translateY(-2px);filter:brightness(1.07)}
.ld-cta:active{transform:translateY(0)}
.ld-cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ld-stats{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:46px 0 10px}
/* Resting surfaces do not lift and do not cast. Hover brightens the border,
   the same way every panel in the app behaves. */
.ld-stat{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:var(--r-xl);padding:18px 26px;text-align:center;min-width:154px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:border-color .2s}
.ld-stat:hover{border-color:var(--line2)}
.ld-stat b{display:block;font:800 clamp(24px,3.6vw,30px) var(--sans);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em}
.ld-stat span{font:600 12px var(--sans);color:var(--dim);letter-spacing:.01em}
.ld-sec{margin-top:72px}
.ld-sec h2{font:800 clamp(24px,4vw,34px) var(--sans);letter-spacing:-.025em;margin-bottom:8px}
.ld-sec .sub{color:var(--dim);font-size:15px;line-height:1.5;max-width:620px;margin-bottom:22px}
.ld-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:14px}
.ld-tile{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:var(--r-xl);padding:14px;display:flex;flex-direction:column;gap:9px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:border-color .2s}
.ld-tile:hover{border-color:var(--line2)}
.ld-tile img{width:100%;height:124px;object-fit:contain;border-radius:var(--r-md);background:var(--panel2)}
.ld-tile .nm{font:600 13px var(--sans);line-height:1.3;min-height:32px}
.ld-tile .meta{font:500 11px var(--mono);color:var(--faint)}
.ld-tile .pr{display:flex;align-items:center;gap:8px;font:700 15px var(--sans)}
.ld-install{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.ld-install .step{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:var(--r-xl);padding:22px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:border-color .2s}
.ld-install .step:hover{border-color:var(--line2)}
.ld-install .n{display:inline-flex;width:28px;height:28px;border-radius:var(--r-pill);background:var(--grad);color:#fff;align-items:center;justify-content:center;font:700 13px var(--sans);margin-bottom:12px}
.ld-install b{display:block;font-size:15px;margin-bottom:5px}
.ld-install p{color:var(--dim);font-size:13px;line-height:1.5}
/* scroll-reveal (staggered fade-up); disabled under reduced-motion */
.ld-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.ld-reveal.in{opacity:1;transform:none}
.ld-hero .ld-chip,.ld-hero h1,.ld-hero p,.ld-hero .ld-cta,.ld-hero .ld-stats{opacity:0;animation:ldFadeUp .8s cubic-bezier(.2,.7,.3,1) forwards}
.ld-hero h1{animation-delay:.06s}.ld-hero p{animation-delay:.16s}.ld-hero .ld-cta{animation-delay:.26s}.ld-hero .ld-stats{animation-delay:.36s}
@keyframes ldFadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ld-reveal{opacity:1!important;transform:none!important;transition:none}.ld-hero .ld-chip,.ld-hero h1,.ld-hero p,.ld-hero .ld-cta,.ld-hero .ld-stats{opacity:1;animation:none}.ld-hero h1 .cursor{animation:none}}
.ld-modal-bg{position:fixed;inset:0;z-index:260;display:none;place-items:center;padding:22px;background:rgba(3,4,9,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.ld-modal-bg.on{display:grid}
.ld-auth{width:min(420px,100%);max-height:min(92vh,760px);overflow:auto;background:var(--panel);color:var(--text);border:1px solid var(--line2);border-radius:var(--r-xl);padding:26px 24px;box-shadow:0 32px 100px var(--scrim-4);position:relative}
.ld-auth .ld-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border:1px solid var(--line);background:var(--panel2);color:var(--dim);border-radius:var(--r-pill);font:700 15px var(--sans);cursor:pointer;display:grid;place-items:center;line-height:1}
.ld-auth .ld-x:hover{color:var(--text);border-color:var(--line2)}
.ld-auth h2{font:800 20px var(--sans);letter-spacing:-.02em;text-align:left;margin:0 36px 6px 0;color:var(--text)}
.ld-auth .sub{text-align:left;color:var(--dim);font-size:13px;line-height:1.45;margin-bottom:18px}
.ld-auth input{width:100%;height:46px;margin-bottom:10px;background:var(--bg);color:var(--text);border:1px solid var(--line2);border-radius:var(--r-lg);padding:0 14px;font:500 15px var(--sans)}
.ld-auth input::placeholder{color:var(--faint)}
.ld-auth input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),0 0 14px rgba(16,185,129,.12)}
.ld-auth .btn-main{width:100%;height:46px;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;border:none;border-radius:var(--r-lg);padding:0 14px;font:800 15px var(--sans);cursor:pointer;box-shadow:0 12px 30px rgba(16,185,129,.18);transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,filter .2s}
.ld-auth .btn-main:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 16px 38px rgba(16,185,129,.26)}
.ld-auth .btn-main:active{transform:translateY(0)}
.google-btn{width:100%;height:46px;display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#3c4043;border:1px solid #dadce0;border-radius:var(--r-lg);padding:0 14px;font:700 15px var(--sans);cursor:pointer;margin:2px 0 12px;transition:background .2s,box-shadow .2s,border-color .2s}
.google-btn:hover{background:#f8faff;border-color:#c9d2e0}
.google-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.google-btn svg{width:18px;height:18px;flex:none}
.ld-gwrap{display:none}
.ld-gwrap.on{display:block}
.auth-sep{display:flex;align-items:center;gap:10px;color:var(--faint);font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:4px 0 14px}
.auth-sep:before,.auth-sep:after{content:"";height:1px;background:var(--line);flex:1}
.ld-auth .swap{text-align:center;color:var(--dim);font-size:13px;margin-top:14px}
.ld-auth .swap a{color:var(--accent);cursor:pointer;font-weight:600}
.ld-auth .err{color:var(--red);font:700 12px var(--sans);min-height:16px;margin:4px 0 10px;text-align:left}
.ld-auth .okmsg{color:var(--green);font:600 13px var(--sans);text-align:center;margin:8px 0}
.ld-pending{text-align:center;padding:10px 0}
.ld-pending .big{width:54px;height:54px;display:grid;place-items:center;margin:0 auto 14px;border-radius:var(--r-xl);background:var(--grad);font:900 17px var(--sans);color:#fff}
.ld-foot{margin-top:60px;border-top:1px solid var(--line);padding-top:18px;color:var(--faint);font-size:12px;text-align:center;line-height:1.6}
@media(max-width:700px){.ld-install{grid-template-columns:1fr}.ld-hero{padding-top:40px}}
/* small-phone pass (375px): tighter type, wrapping chips, full-width cards, no side-scroll */
@media(max-width:480px){
  #view-landing{overflow-x:hidden}
  .ld-wrap{padding:0 16px 56px}
  .ld-hero{padding:30px 0 18px}
  .ld-hero h1{font-size:clamp(32px,11.5vw,46px)}
  .ld-hero p{font-size:15px;margin:18px auto 24px}
  .ld-chip{font-size:11px;padding:7px 12px;margin-bottom:18px;max-width:100%;white-space:normal;text-align:left}
  .ld-cta{width:100%;justify-content:center;padding:15px 20px}
  .ld-stats{gap:10px;margin:30px 0 6px}
  .ld-stat{flex:1 1 calc(50% - 5px);min-width:0;padding:14px 10px}
  .ld-sec{margin-top:48px}
  .ld-grid{grid-template-columns:1fr 1fr;gap:10px}
  .ld-install .step{padding:18px}
  .ld-auth{padding:22px 18px;border-radius:var(--r-xl)}
  .ld-modal-bg{padding:14px}
}
/* account chip (sidebar bottom) */
#acctChip{margin-top:6px}
.acct-chip{display:flex;align-items:center;gap:9px;width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 10px;cursor:pointer;text-align:left}
.acct-chip:hover{border-color:var(--line2)}
.acct-chip .av{width:28px;height:28px;border-radius:var(--r-pill);background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font:700 11px var(--sans);flex:none}
.acct-chip .nm{font:600 12px var(--sans);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-chip .rl{font:600 10px var(--mono);color:var(--faint);text-transform:uppercase}
/* View-as banner: neutral pill while read-only, AMBER while in manage mode
   (manage-mode writes belong to the impersonated user - make it unmissable) */
.viewas-banner{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:300;background:var(--panel2);color:var(--text);border:1px solid var(--line2);font:700 13px var(--sans);padding:9px 16px;border-radius:var(--r-pill);display:flex;gap:10px;align-items:center;box-shadow:var(--shadow-pill);max-width:92vw;flex-wrap:wrap;justify-content:center}
.viewas-banner button{background:var(--bg);color:var(--dim);border:1px solid var(--line2);border-radius:var(--r-pill);padding:4px 12px;font:700 12px var(--sans);cursor:pointer}
.viewas-banner button:hover{color:var(--text)}
.viewas-banner.manage{background:var(--amber);color:var(--on-amber);border-color:var(--amber)}
.viewas-banner.manage button{background:var(--on-amber);color:var(--amber);border:none}
/* light --amber is darkened for text legibility, so the one place it is a solid
   fill needs white on it rather than the dark-theme near-black. */
[data-theme="light"] .viewas-banner.manage{color:#fff}
[data-theme="light"] .viewas-banner.manage button{background:#fff;color:var(--amber)}
/* admin panel rows */
.adm-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.adm-row .who b{font:600 13px var(--sans);display:block}
.adm-row .who span{font:500 11px var(--mono);color:var(--faint)}
.adm-badge{font:700 10px var(--mono);padding:3px 8px;border-radius:var(--r-pill);text-transform:uppercase}
.adm-badge.pending{background:rgba(251,191,36,.16);color:var(--amber)}
.adm-badge.active{background:rgba(74,222,128,.16);color:var(--green)}
.adm-badge.rejected,.adm-badge.deactivated{background:rgba(248,113,113,.14);color:var(--red)}
.adm-badge.admin{background:rgba(16,185,129,.18);color:var(--accent)}
.admin-page{min-height:calc(100vh - 100px)}
.admin-shell{display:grid;grid-template-columns:210px minmax(0,1fr);min-height:calc(100vh - 100px);border:1px solid var(--line);background:var(--panel);border-radius:var(--r-sm);overflow:hidden}
.admin-pane-nav{display:flex;flex-direction:column;gap:4px;padding:14px 10px;background:var(--bg);border-right:1px solid var(--line)}
.admin-pane-title{display:flex;align-items:center;gap:10px;padding:4px 6px 18px}.admin-pane-title .logo-mark{width:34px;height:34px}.admin-pane-title b,.admin-pane-title small{display:block}.admin-pane-title b{font:750 13px var(--sans)}.admin-pane-title small{color:var(--faint);font:600 10px var(--mono);margin-top:2px}
.admin-pane-nav>button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:38px;padding:8px 10px;border:0;border-radius:var(--r-xs);background:transparent;color:var(--dim);font:650 12px var(--sans);text-align:left;cursor:pointer}.admin-pane-nav>button:hover{background:var(--panel2);color:var(--text)}.admin-pane-nav>button.on{background:var(--accent-soft);color:var(--accent)}.admin-pane-nav>button span{font:700 10px var(--mono);margin-left:8px}
.admin-pane-main{min-width:0;padding:22px;display:flex;flex-direction:column;gap:14px}.admin-main-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}.admin-main-head h1{font-size:26px;margin:3px 0 4px}.admin-main-head .sub{margin:0;max-width:700px}
.admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.admin-stat{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px}
.admin-stat b{display:block;font:900 26px var(--sans);color:var(--text)}
.admin-stat span{font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.admin-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.admin-tools input{min-width:240px;flex:1}
.admin-table{width:100%;border-collapse:separate;border-spacing:0}
.admin-table th,.admin-table td{padding:13px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.admin-table th{font:700 10px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.admin-table .who b{display:block;font:700 13px var(--sans)}
.admin-table .who span{display:block;color:var(--faint);font:500 11px var(--mono);margin-top:3px}
.admin-actions{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap}
.admin-cell-sub{display:block;color:var(--faint);font:500 10px var(--mono);margin-top:2px}.admin-table-panel{padding:0;overflow:hidden}
.admin-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.admin-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.admin-section-head h2{font-size:15px;margin:0 0 3px}.admin-section-head .sub{margin:0}
.admin-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer}.admin-switch span b,.admin-switch span small{display:block}.admin-switch span b{font:700 13px var(--sans)}.admin-switch span small{color:var(--faint);font:500 11px var(--sans);margin-top:3px}.admin-switch input{position:absolute;opacity:0;pointer-events:none}.admin-switch i{position:relative;width:42px;height:24px;border-radius:var(--r-pill);background:var(--line2);flex:none;transition:.2s}.admin-switch i:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}.admin-switch input:checked+i{background:var(--accent)}.admin-switch input:checked+i:after{transform:translateX(18px)}.admin-switch input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}
.admin-provider{display:flex;justify-content:space-between;gap:12px;color:var(--dim);font-size:12px}.admin-provider b{color:var(--text)}.admin-service-row{display:flex;align-items:center;gap:10px;margin:18px 0}.admin-service-row span b,.admin-service-row span small{display:block}.admin-service-row span small{color:var(--faint);font-size:11px;margin-top:2px}.adm-health-dot{display:block;width:9px;height:9px;border-radius:50%;background:var(--faint);flex:none}.adm-health-dot.ok{background:var(--green);box-shadow:0 0 0 4px rgba(74,222,128,.1)}.adm-health-dot.bad{background:var(--red);box-shadow:0 0 0 4px rgba(248,113,113,.1)}
.admin-catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.admin-catalog{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel2)}.admin-catalog b,.admin-catalog span,.admin-catalog small{display:block}.admin-catalog b{font:700 13px var(--sans)}.admin-catalog span{color:var(--text);font:800 17px var(--sans);margin-top:5px}.admin-catalog small{color:var(--faint);font:500 10px var(--mono);margin-top:2px}.admin-health{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.admin-health>div{display:flex;align-items:center;gap:8px}.admin-health>div b,.admin-health>div small{display:block}.admin-health>div small{color:var(--faint);font-size:11px}.admin-health .btn{margin-left:auto}
.ld-cta:disabled{cursor:not-allowed;filter:saturate(.2);opacity:.7;box-shadow:none}
@media(max-width:760px){.admin-page{min-height:0}.admin-shell{display:block;min-height:0;border:0;background:transparent}.admin-pane-nav{position:sticky;top:0;z-index:4;display:flex;flex-direction:row;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm);padding:6px;background:var(--bg)}.admin-pane-title,.admin-pane-nav .grow,.admin-pane-nav>button:nth-last-child(-n+2){display:none}.admin-pane-nav>button{width:auto;white-space:nowrap;min-height:34px}.admin-pane-main{padding:14px 0}.admin-overview-grid,.admin-catalog-grid{grid-template-columns:1fr}.admin-table,.admin-table tbody,.admin-table tr,.admin-table td{display:block}.admin-table thead{display:none}.admin-table tr{padding:12px;border-bottom:1px solid var(--line)}.admin-table td{border-bottom:0;padding:5px 0}.admin-actions{justify-content:flex-start}.admin-tools input{min-width:0;width:100%}.admin-tools select{width:100%}.admin-health{gap:14px}.admin-health .btn{margin-left:0;width:100%}}

/* ---------- user settings workspace ---------- */
.settings-workspace{min-height:calc(100vh - 100px)}
.settings-shell{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:calc(100vh - 100px);overflow:hidden;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel)}
.settings-directory{min-width:0;padding:22px 14px;background:var(--bg);border-right:1px solid var(--line)}
.settings-title{padding:0 8px 18px}.settings-title h1{font-size:26px}.settings-title p{margin-top:5px;color:var(--dim);font-size:13px}
.settings-search{height:40px;display:flex;align-items:center;gap:9px;margin:0 4px 20px;padding:0 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--faint);transition:border-color .16s,box-shadow .16s}
.settings-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.settings-search>span,.settings-search svg{display:block;width:16px;height:16px;flex:none}
.settings-search input{width:100%;padding:0;border:0;outline:0;background:transparent;color:var(--text);font:500 12px var(--sans)}
.settings-nav-group{margin-top:16px}.settings-nav-group[hidden],.settings-nav-group button[hidden]{display:none}.settings-nav-group h2{padding:0 8px 6px;color:var(--faint);font:700 10px var(--mono);text-transform:uppercase;letter-spacing:.12em}
.settings-nav-group button{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 12px;align-items:center;gap:10px;width:100%;min-height:52px;padding:7px 8px;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--dim);text-align:left;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .15s}
.settings-nav-group button:hover{transform:translateX(2px);background:var(--panel2);border-color:var(--line);color:var(--text)}.settings-nav-group button.on{background:var(--accent-soft);border-color:rgba(16,185,129,.28);color:var(--text)}
.settings-nav-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-sm);background:var(--panel2);color:var(--dim)}.settings-nav-group button.on .settings-nav-icon{background:var(--accent-3);color:#fff}.settings-nav-icon svg{width:17px;height:17px}
.settings-nav-group button b,.settings-nav-group button small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.settings-nav-group button b{font:700 13px var(--sans)}.settings-nav-group button small{margin-top:3px;color:var(--faint);font:500 11px var(--sans)}.settings-nav-group button>i{font:400 20px var(--sans);color:var(--faint);font-style:normal}
.settings-pane{min-width:0;padding:28px clamp(20px,4vw,54px) 60px;overflow-y:auto}.settings-pane>*{max-width:760px}.settings-pane-head{display:flex;gap:10px;margin-bottom:22px}.settings-pane-head h1{font-size:26px;margin:3px 0 5px}.settings-pane-head p{color:var(--dim);font-size:13px}.settings-back{display:none;width:34px;height:34px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel2);color:var(--text);font-size:20px;cursor:pointer;flex:none}
.settings-card{margin-top:12px;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel2)}.settings-card>h2{padding:13px 16px;border-bottom:1px solid var(--line);font-size:13px}.settings-card>p,.settings-card>.settings-actions,.settings-card>#accountPanel,.settings-card>#collabPanel,.settings-card>.theme-options,.settings-card>.settings-toggle-list,.settings-card>.settings-service,.settings-card>textarea,.settings-card>.settings-maint-log{margin-left:16px;margin-right:16px}.settings-note-first{margin-top:14px!important;color:var(--dim)}
.settings-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px;margin-bottom:16px}.settings-profile{display:flex;align-items:center;gap:12px;padding:16px 0}.settings-profile .logo-mark{flex:none}.settings-profile p{color:var(--dim);font-size:13px;line-height:1.5}.settings-profile p b{color:var(--text)}
.settings-info-row,.settings-service{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 16px}.settings-info-row span b,.settings-info-row span small,.settings-service span b,.settings-service span small{display:block}.settings-info-row span small,.settings-service span small{margin-top:4px;color:var(--faint);font-size:11px}.settings-service+.settings-service{border-top:1px solid var(--line)}.settings-service strong{max-width:48%;color:var(--dim);font:650 11px var(--mono);text-align:right}.settings-status{padding:4px 7px;border-radius:var(--r-xs);background:var(--accent-soft);color:var(--accent);font:700 10px var(--mono);text-transform:uppercase}.settings-status.ok{color:var(--green)}
.theme-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:16px 0}.theme-option{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer}.theme-option:hover{border-color:var(--line2);background:var(--panel)}.theme-option.on{border-color:var(--accent);background:var(--accent-soft)}.theme-option input{position:absolute;opacity:0;pointer-events:none}.theme-option>span{grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;color:var(--dim)}.theme-option svg{width:18px;height:18px}.theme-option b,.theme-option small{display:block}.theme-option b{font-size:12px}.theme-option small{margin-top:2px;color:var(--faint);font-size:10px}
.settings-toggle-list{padding-bottom:4px}.settings-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:58px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}.settings-toggle-row:last-child{border-bottom:0}.settings-toggle-row span b,.settings-toggle-row span small{display:block}.settings-toggle-row span b{font-size:13px}.settings-toggle-row span small{margin-top:4px;color:var(--faint);font-size:11px;line-height:1.35}.settings-toggle-row input{position:absolute;opacity:0;pointer-events:none}.settings-toggle-row i{position:relative;width:38px;height:22px;border-radius:var(--r-xl);background:var(--line2);flex:none;transition:background .16s}.settings-toggle-row i:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px var(--scrim-2);transition:transform .16s}.settings-toggle-row input:checked+i{background:var(--accent-3)}.settings-toggle-row input:checked+i:after{transform:translateX(16px)}.settings-toggle-row input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}
.settings-card textarea{width:calc(100% - 32px);margin-top:16px;resize:vertical;font-family:var(--mono)}.settings-maint-log{display:none;max-height:280px;overflow-y:auto;margin-top:8px;margin-bottom:16px;padding:9px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--dim);font:500 11px var(--mono)}.settings-card.danger-zone{border-color:rgba(248,113,113,.32)}.settings-card.danger-zone>h2{color:var(--red)}
.settings-card .adm-row{border-color:var(--line);background:var(--panel)}
@media(max-width:760px){.settings-workspace,.settings-shell{min-height:calc(100vh - 140px)}.settings-shell{display:block;border:0;background:transparent}.settings-directory{padding:8px 0 20px;border:0;background:transparent}.settings-shell.detail-open .settings-directory{display:none}.settings-pane{display:none;padding:4px 0 40px}.settings-shell.detail-open .settings-pane{display:block}.settings-back{display:grid;place-items:center}.settings-pane-head{align-items:flex-start}.settings-pane-head h1{font-size:20px}.theme-options{grid-template-columns:1fr}.settings-nav-group button{min-height:58px}.settings-service{align-items:flex-start;flex-direction:column}.settings-service strong{max-width:100%;text-align:left}.settings-card .toolbar{align-items:stretch}.settings-card .toolbar input{max-width:none!important}.settings-card .toolbar .btn{justify-content:center}}

/* Settings refinement: quieter PokePulse-style directory and glass surfaces. */
body.settings-active .main{padding:16px 16px 110px}
body.settings-active .wrap{max-width:none}
.settings-shell{grid-template-columns:260px minmax(0,1fr);background:rgba(19,19,30,.76);box-shadow:0 18px 50px var(--scrim-1);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.settings-directory{max-height:calc(100vh - 84px);overflow-y:auto;padding:24px 16px;background:rgba(8,8,13,.68);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.settings-title{padding:0 8px 16px}.settings-title h1{font-size:20px}.settings-title p{max-width:210px;line-height:1.35}
.settings-search{height:42px;margin:0 0 24px;background:rgba(35,35,52,.72)}
.settings-nav-group{margin-top:18px}.settings-nav-group h2{padding:0 8px 7px;color:var(--dim);letter-spacing:.1em}
.settings-nav-group button{grid-template-columns:24px minmax(0,1fr);min-height:40px;gap:8px;padding:7px 9px;border:0;color:var(--text)}
.settings-nav-group button:hover{transform:none;border:0;background:rgba(255,255,255,.055)}
.settings-nav-group button.on{border:0;background:var(--accent-soft);color:var(--accent)}
.settings-nav-icon{width:22px;height:22px;border-radius:0;background:transparent;color:var(--dim)}
.settings-nav-group button.on .settings-nav-icon{background:transparent;color:var(--accent)}
.settings-nav-icon svg{width:17px;height:17px}.settings-nav-group button b{font-size:13px}.settings-nav-group button>i{display:none}
.settings-pane{padding:40px clamp(34px,5vw,72px) 70px}.settings-pane>*{max-width:880px}.settings-pane-head{margin-bottom:18px}.settings-pane-head h1{font-size:26px;margin-top:3px}
.settings-card{margin-top:14px;background:rgba(26,26,40,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
[data-theme="light"] .settings-shell{background:rgba(255,255,255,.76)}[data-theme="light"] .settings-directory{background:rgba(237,241,242,.76)}[data-theme="light"] .settings-search,[data-theme="light"] .settings-card{background:rgba(255,255,255,.78)}
@media(max-width:760px){body.settings-active .main{padding:14px 12px 110px}.settings-shell{display:block;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}.settings-directory{max-height:none;overflow:visible;padding:8px 4px 24px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}.settings-nav-group button{min-height:46px}.settings-pane{padding:4px 0 40px}.settings-card{background:rgba(26,26,40,.82)}}

/* ---------- keyboard access for non-native controls ----------
   Rows, tiles and cards built from divs now carry role="button" (or
   role="checkbox") and a tab stop, so they need the same focus ring every
   native control in the app already has. Table rows keep their row semantics
   and take an inset ring, because an outline on a <tr> is clipped by the cells. */
[role="button"]:focus-visible,
[role="checkbox"]:focus-visible,
.hl-item:focus-visible,
.item-card:focus-visible,
.cell-card:focus-visible,
.sb-info:focus-visible,
.cand:focus-visible,
.hd:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
tr.rowlink{cursor:pointer}
tr.rowlink:focus-visible{outline:none}
tr.rowlink:focus-visible td{box-shadow:inset 0 2px 0 var(--accent),inset 0 -2px 0 var(--accent);background:var(--panel2)}
tr.rowlink:focus-visible td:first-child{box-shadow:inset 2px 0 0 var(--accent),inset 0 2px 0 var(--accent),inset 0 -2px 0 var(--accent)}
tr.rowlink:focus-visible td:last-child{box-shadow:inset -2px 0 0 var(--accent),inset 0 2px 0 var(--accent),inset 0 -2px 0 var(--accent)}

/* the saved-view and saved-report chips were a clickable name span plus an "x"
   span; both are now real buttons, styled to sit invisibly inside the chip */
.chip-act{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;line-height:inherit}
.chip-act:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs)}
.chip-x{color:var(--faint);font-size:13px}
.chip-x:hover{color:var(--red)}
/* tag chips on the card page are buttons now, not spans */
button.chip{font:600 12px var(--mono)}

/* touch targets
   Keyed to the INPUT METHOD, not the viewport. Width tells you nothing about
   how a device is being driven: a touchscreen laptop at 1400px was getting
   desktop-sized controls, and a narrow mouse-driven window was getting bloated
   ones. `pointer:coarse` asks the real question, and it means this rule no
   longer depends on a width breakpoint at all.
   44px is the thumb-sized floor. Where a control is deliberately dense - the
   mini condition chips, the bulk-select checkboxes - the drawn size is kept and
   the HIT AREA is extended past it, so touch gets 44px without the layout
   inflating. */
@media(pointer:coarse){
  .range-tabs button{min-height:44px;min-width:44px;padding:10px 12px}
  .chip,.gs-langs .chip{min-height:44px;display:inline-flex;align-items:center}
  .btn.small{min-height:44px}
  .seg button{min-height:44px}
  .pf-picker,.pf-range .activity-toggle,.pf-pill{min-height:44px}
  .pf-ic{width:44px;height:44px}
  .pf-eye{min-width:44px;min-height:44px}
  .top-ic{width:44px;height:44px}
  .tabbar button{min-height:44px}
  .chip-act{min-height:44px;display:inline-flex;align-items:center}

  /* dense controls: keep the drawn size, extend the reachable area */
  .chip.mini{min-height:0;position:relative}
  .chip.mini::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  .mg-chk{width:18px;height:18px;outline-offset:4px;position:relative}
  .mg-chk::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  th.mg-chkcol,td.mg-chkcol{position:relative}
  .mg-cards .mg-card input[type=checkbox]{width:18px;height:18px}
  /* inline text actions inside prose rows */
  .fix,.linkish{display:inline-flex;align-items:center;min-height:44px}
}