/* ============================================================
   Vault — body treatment for shop.html / tools.html / grading-profit-calculator.html
   Visual / CSS only. No layout-breaking, no functional changes.
   Loaded AFTER premium.css so it wins.
   Tokens (mirrored from premium.css :root):
     --vault-gold        #E9C46A
     --vault-gold-soft   #F6E2A8
     --vault-amber       #F5B53D
     --vault-amethyst    #A974E8
     --vault-emerald     #3FBF87
     --vault-ruby        #E5574F
     --vault-sapphire    #4D8DF0
     --vault-steel       #8A93A8
     --vault-ink         #F4F2EC
     --vault-dim         #9A9CA8
     --vault-faint       #6c6e7a
     --vault-hair        rgba(255,255,255,.10)
     --vault-hair-2      rgba(255,255,255,.055)
     --vault-glass       rgba(255,255,255,.045)
     --vault-ease        cubic-bezier(.32,.72,0,1)
     --vault-font-display 'Clash Display'
     --vault-font-body    'Plus Jakarta Sans'
     --vault-font-mono    'JetBrains Mono'
   ============================================================ */

/* ---------- Local tokens (idempotent in case load order changes) ---------- */
:root{
  --vp-gold:#E9C46A; --vp-gold-soft:#F6E2A8; --vp-amber:#F5B53D;
  --vp-amethyst:#A974E8; --vp-emerald:#3FBF87; --vp-ruby:#E5574F;
  --vp-sapphire:#4D8DF0; --vp-steel:#8A93A8; --vp-ink:#F4F2EC;
  --vp-dim:#9A9CA8; --vp-faint:#9CA3AF;
  --vp-hair:rgba(255,255,255,.10); --vp-hair-2:rgba(255,255,255,.055);
  --vp-glass:rgba(255,255,255,.045);
  --vp-input:rgba(0,0,0,.35);
  --vp-ease:cubic-bezier(.32,.72,0,1);
  --vp-d:'Clash Display','Plus Jakarta Sans',system-ui,sans-serif;
  --vp-b:'Plus Jakarta Sans',system-ui,sans-serif;
  --vp-m:'JetBrains Mono',ui-monospace,monospace;
}

/* Deeper near-black so all 3 pages sit on consistent Vault canvas */
html body{ background:#06070C; color:var(--vp-ink); }

/* All headings → Clash Display 600 (override any inline Space Grotesk) */
html body h1, html body h2, html body h3, html body h4,
html body .panel-h, html body .setcard-title, html body .tile-title,
html body .kit-title, html body .kit-h, html body .panel h2,
html body .ssp-tag, html body .cat-tag{
  font-family:var(--vp-d) !important;
}
html body h1, html body h2{ font-weight:600 !important; letter-spacing:-.01em; }

/* Body copy → Plus Jakarta Sans */
html body, html body p, html body li, html body label, html body a,
html body input, html body select, html body button{
  font-family:var(--vp-b);
}

/* Numbers / eyebrows / prices → JetBrains Mono */
html body .skurow-lbl, html body .skurow-mkt, html body .skurow-low, html body .skurow-thin,
html body .ssp-tag, html body .ssp-mkt, html body .ssp-low, html body .ssp-date,
html body .ssp-pick-eyebrow, html body .ssp-thin, html body .ssp-note,
html body .setcard-eye, html body .setcard-credit,
html body .tile-cat, html body .tile-use,
html body .t-kicker, html body .panel-eyebrow, html body .panel-eyebrow .num,
html body .kit-cat, html body .kit-eyebrow, html body .kit-disc, html body .kit-note,
html body .calcres .lbl, html body .calcres .big, html body .calcres .estamp,
html body .calcres .brk .row span,
html body .kpi .k, html body .kpi .v, html body .verdict .vlbl, html body .verdict .vval,
html body .aff-box .aff-lbl, html body .aff-box .aff-disc,
html body .hero-stamp, html body .crumb,
html body .jumpnav-hint, html body .supply-tab{
  font-family:var(--vp-m) !important;
}

/* Prices: keep / restore gold gradient text */
html body .skurow-mkt, html body .ssp-mkt,
html body .calcres .big, html body .kpi .v, html body .profitOut, html body #profitOut, html body #roiOut, html body #beOut, html body #costOut{
  background:linear-gradient(92deg,#fff,#FFE5A8 40%,var(--vp-gold) 90%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  color:transparent !important; text-shadow:0 0 22px rgba(233,196,106,.22);
  letter-spacing:-.01em;
}

/* ============================================================
   Section eyebrows — small mono uppercase pills with glowing dot
   ============================================================ */
html body .panel-eyebrow, html body .t-kicker, html body .kit-eyebrow,
html body .cat-tag, html body .ssp-tag, html body .ssp-pick-eyebrow{
  display:inline-flex !important; align-items:center; gap:8px;
  padding:6px 12px !important; margin-bottom:10px;
  font-size:10.5px !important; letter-spacing:.2em !important; text-transform:uppercase;
  color:var(--vp-dim) !important; font-weight:600;
  background:var(--vp-glass) !important; border:1px solid var(--vp-hair) !important;
  border-radius:9999px !important;
}
html body .panel-eyebrow::before, html body .t-kicker::before,
html body .kit-eyebrow::before, html body .cat-tag::before,
html body .ssp-tag::before, html body .ssp-pick-eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--vp-gold);
  box-shadow:0 0 10px rgba(233,196,106,.85);
}
/* Hide the inline numeric chip on tools.html panel-eyebrow, replace with dot above */
html body .panel-eyebrow .num{ display:none !important; }

/* ============================================================
   Inputs / selects — glass
   ============================================================ */
html body .f input, html body .f select, html body .f textarea,
html body .fld input, html body .fld select, html body .fld textarea,
html body input[type="text"], html body input[type="number"], html body input[type="email"],
html body select{
  background:var(--vp-input) !important;
  border:1px solid var(--vp-hair) !important;
  color:var(--vp-ink) !important;
  border-radius:12px !important;
  font-family:var(--vp-b) !important;
  transition:border-color .25s var(--vp-ease), box-shadow .25s var(--vp-ease) !important;
}
html body .f input:focus, html body .fld input:focus,
html body .f select:focus, html body .fld select:focus,
html body input:focus, html body select:focus{
  outline:none !important;
  border-color:var(--vp-gold) !important;
  box-shadow:0 0 0 3px rgba(233,196,106,.18) !important;
}
html body .f label, html body .fld label{
  font-family:var(--vp-m) !important; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--vp-dim);
}
html body .fld .hint{ color:var(--vp-faint); letter-spacing:.05em; }

/* ============================================================
   shop.html — category chips + supply-tabs as glass pills
   ============================================================ */
html body .jumpnav{
  background:linear-gradient(180deg,rgba(6,7,12,.92),rgba(6,7,12,.72)) !important;
  border-bottom:1px solid var(--vp-hair) !important;
}
html body .jumpnav a, html body .supply-tab{
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  color:var(--vp-dim) !important;
  border-radius:9999px !important;
  font-family:var(--vp-b) !important; font-weight:600 !important;
  letter-spacing:0 !important;
  transition:color .25s var(--vp-ease), background .25s var(--vp-ease), border-color .25s var(--vp-ease), transform .25s var(--vp-ease) !important;
}
html body .jumpnav a:hover, html body .supply-tab:hover{
  color:var(--vp-ink) !important;
  border-color:var(--vp-gold) !important;
  background:rgba(255,255,255,.07) !important;
  transform:translateY(-1px);
}
html body .jumpnav a.is-on, html body .supply-tab.is-on{
  color:#241c06 !important;
  background:linear-gradient(180deg,var(--vp-gold-soft),var(--vp-gold)) !important;
  border-color:transparent !important;
  box-shadow:0 10px 26px -10px rgba(233,196,106,.55), inset 0 1px 0 rgba(255,255,255,.5) !important;
  font-weight:700 !important;
}
html body .jumpnav a::before, html body .supply-tab::before{
  background:currentColor !important; box-shadow:0 0 8px currentColor !important;
}

/* Hero CTAs on shop hero → primary gold pill, ghost glass pill */
html body .hero-cta{
  border-radius:9999px !important;
  font-family:var(--vp-b) !important; font-weight:700 !important;
}
html body .hero-cta.primary{
  background:linear-gradient(180deg,var(--vp-gold-soft),var(--vp-gold)) !important;
  color:#241c06 !important; border-color:transparent !important;
  box-shadow:0 14px 36px -12px rgba(233,196,106,.6), inset 0 1px 0 rgba(255,255,255,.5) !important;
}
html body .hero-cta.ghost{
  background:var(--vp-glass) !important; color:var(--vp-ink) !important;
  border:1px solid var(--vp-hair) !important;
}
html body .hero-cta:hover{ transform:translateY(-2px); }

/* Shop affiliate buy buttons inside SKU rows → all gold pills (primary intent) */
html body .skurow-btns .btn,
html body .skurow-btns .btn-tcg,
html body .skurow-btns .btn-ebay,
html body .skurow-btns .btn-amz{
  background:linear-gradient(180deg,var(--vp-gold-soft),var(--vp-gold)) !important;
  color:#241c06 !important;
  border:1px solid transparent !important;
  border-radius:9999px !important;
  font-family:var(--vp-b) !important; font-weight:700 !important;
  box-shadow:0 8px 22px -10px rgba(233,196,106,.55), inset 0 1px 0 rgba(255,255,255,.45) !important;
  transition:transform .25s var(--vp-ease), box-shadow .25s var(--vp-ease) !important;
}
html body .skurow-btns .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px -12px rgba(233,196,106,.7), inset 0 1px 0 rgba(255,255,255,.55) !important;
}

/* Set-tile (Shop by Set) — glass double-bezel + 5:7 visual feel via padding */
html body .set-tile{
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:18px !important;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06) !important;
  transition:transform .3s var(--vp-ease), border-color .3s var(--vp-ease) !important;
}
html body .set-tile:hover{ transform:translateY(-4px); border-color:rgba(233,196,106,.55) !important; }
html body .set-name{ font-family:var(--vp-d) !important; font-weight:600 !important; }

/* setcard tiles already get double-bezel from premium.css — reinforce + gold hover */
html body .setcard{ background:var(--vp-glass) !important; border:1px solid var(--vp-hair) !important; }
html body .setcard:hover{ border-color:rgba(233,196,106,.55) !important; }
html body .setcard-head{ background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(0,0,0,.18)) !important; }
html body .setcard-thumb{ border-radius:10px; }
/* Make setcard thumb behave 5:7 inside (small) — keep object-fit cover for tiny chip */
html body .setcard-eye, html body .setcard-credit{ color:var(--vp-faint) !important; }
html body .setcard-title{ color:var(--vp-ink) !important; }

/* Foil sheen for any tile containing product art */
html body .setcard, html body .set-tile, html body .ssp-row, html body .tile{
  position:relative; overflow:hidden;
}
html body .setcard::after, html body .set-tile::after, html body .tile::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.10) 50%, transparent 62%);
  background-size:240% 100%; background-position:240% 0;
  transition:background-position .9s var(--vp-ease);
  mix-blend-mode:overlay; border-radius:inherit; z-index:2;
}
html body .setcard:hover::after, html body .set-tile:hover::after, html body .tile:hover::after{
  background-position:-240% 0;
}

/* ssp-snap (daily snapshot) — Vault glass panel */
html body .ssp-snap{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)) !important;
  border:1px solid var(--vp-hair) !important; border-radius:18px !important;
}
html body .ssp-row{
  background:rgba(0,0,0,.35) !important; border:1px solid var(--vp-hair-2) !important;
  border-radius:14px !important;
}
html body .ssp-mkt, html body .ssp-low{
  color:var(--vp-gold) !important;
}
html body .ssp-mkt i, html body .ssp-low i{ color:var(--vp-faint) !important; }
html body .ssp-pick{
  background:rgba(233,196,106,.06) !important;
  border-left-color:var(--vp-gold) !important;
  border-radius:0 12px 12px 0;
}

/* Cat section (.cat.lift) — already gets bezel from premium .lift */
html body .cat.lift{
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 55%, rgba(233,196,106,.04)) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:22px !important;
  padding:36px 26px !important;
}
html body .cat-blurb{ color:var(--vp-dim) !important; }

/* Trust strip & xsell tiles */
html body .trust-strip{
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:18px !important;
  padding:22px !important;
}
html body .xsell a{
  background:var(--vp-glass) !important; border:1px solid var(--vp-hair) !important;
  border-radius:14px !important; transition:border-color .25s var(--vp-ease), transform .25s var(--vp-ease) !important;
}
html body .xsell a:hover{ border-color:rgba(233,196,106,.55) !important; transform:translateY(-2px); }

/* ============================================================
   tools.html (Grade & Net) — body treatment
   ============================================================ */
html body .t-hero{
  padding:48px 0 24px !important;
}
html body .t-hero h1{
  font-family:var(--vp-d) !important; font-weight:600 !important;
  font-size:clamp(36px, 5.5vw, 64px) !important; line-height:1.05;
}
html body .t-hero h1 .g{
  background:linear-gradient(92deg,var(--vp-gold-soft) 0%,var(--vp-gold) 60%,#C9A24B 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
html body .t-hero .lede{ color:var(--vp-dim) !important; font-size:17px; line-height:1.55; max-width:760px; }

/* The two main "tool" panels are .lift — premium.css already gives them bezel.
   Reinforce + tighten padding + add gold focus ring. */
html body main .lift{
  padding:28px 26px !important;
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:18px !important;
}
html body .panel-h{
  font-family:var(--vp-d) !important; font-weight:600 !important;
  font-size:clamp(22px,2.4vw,28px) !important; margin:4px 0 6px;
}
html body .panel-sub{ color:var(--vp-dim) !important; font-size:14px; }

/* Card preview chip */
html body .cardpv{
  background:rgba(0,0,0,.35) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:14px !important;
  color:var(--vp-dim) !important;
}
html body .cardpv .nm{ font-family:var(--vp-d) !important; color:var(--vp-ink) !important; }
html body .cardpv .st{ font-family:var(--vp-m) !important; color:var(--vp-faint) !important; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }

/* CTA — gold pill with circled arrow */
html body .cta{
  background:linear-gradient(180deg,var(--vp-gold-soft),var(--vp-gold)) !important;
  color:#241c06 !important; border:1px solid transparent !important;
  border-radius:9999px !important;
  font-family:var(--vp-b) !important; font-weight:700 !important;
  padding:12px 12px 12px 20px !important;
  box-shadow:0 14px 36px -12px rgba(233,196,106,.6), inset 0 1px 0 rgba(255,255,255,.5) !important;
  display:inline-flex !important; align-items:center; gap:10px;
}
html body .cta[aria-disabled="true"]{
  background:var(--vp-glass) !important; color:var(--vp-dim) !important;
  border:1px solid var(--vp-hair) !important; box-shadow:none !important;
  cursor:not-allowed;
}
html body .cta:not([aria-disabled="true"]):hover{ transform:translateY(-2px); }
html body .cta .arr{
  width:28px; height:28px; border-radius:50%;
  background:rgba(36,28,6,.18);
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .35s var(--vp-ease), background .25s var(--vp-ease);
  font-size:13px;
}
html body .cta:not([aria-disabled="true"]):hover .arr{ transform:translate(2px,-2px); background:rgba(36,28,6,.28); }
html body .cta[aria-disabled="true"] .arr{ background:var(--vp-glass); color:var(--vp-dim); }

/* Calculator result panel — prominent glass with gold numbers */
html body .calcres{
  background:linear-gradient(180deg, rgba(233,196,106,.06), rgba(255,255,255,.02) 60%, rgba(255,255,255,.015)) !important;
  border:1px solid rgba(233,196,106,.32) !important;
  border-radius:18px !important;
  padding:20px 22px !important;
  box-shadow:0 22px 50px -28px rgba(233,196,106,.4), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
html body .calcres .lbl{ color:var(--vp-dim) !important; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; }
html body .calcres .big{
  font-size:clamp(34px,5vw,52px) !important; font-weight:700 !important;
  letter-spacing:-.02em; line-height:1.1; margin:6px 0 10px;
}
html body .calcres .big.neg{
  background:linear-gradient(92deg,#fff,#FFC0BC 40%,var(--vp-ruby) 90%) !important;
  -webkit-background-clip:text; background-clip:text; color:transparent !important;
}
html body .calcres .estamp{
  display:inline-block; margin-left:10px; padding:3px 9px;
  background:var(--vp-glass); border:1px solid var(--vp-hair);
  border-radius:9999px; font-size:9.5px; letter-spacing:.18em; color:var(--vp-dim);
}
html body .calcres .brk .row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:8px 0; border-bottom:1px solid var(--vp-hair-2);
  font-family:var(--vp-m) !important; font-size:12.5px; color:var(--vp-dim);
}
html body .calcres .brk .row:last-child{
  border-bottom:0; padding-top:12px; margin-top:4px;
  border-top:1px solid var(--vp-hair);
  color:var(--vp-ink); font-weight:700;
}
html body .calcres .brk .row span:last-child{ color:var(--vp-ink); }

/* Honesty notes */
html body .honesty{
  background:var(--vp-glass) !important; border:1px solid var(--vp-hair) !important;
  border-left:3px solid var(--vp-gold) !important;
  border-radius:12px; padding:12px 14px; color:var(--vp-dim) !important; font-size:13px;
}
html body .honesty b{ color:var(--vp-ink); font-family:var(--vp-d); font-weight:600; }

/* Grading kit cards — double-bezel already; colored gradient icon badge on .kit-illo */
html body .kit-card{
  background:var(--vp-glass) !important; border:1px solid var(--vp-hair) !important;
  border-radius:18px !important; padding:18px !important;
  transition:transform .3s var(--vp-ease), border-color .3s var(--vp-ease) !important;
}
html body .kit-card:hover{ transform:translateY(-4px); border-color:rgba(233,196,106,.55) !important; }
html body .kit-illo{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:72px; height:72px; border-radius:18px;
  background:linear-gradient(135deg, var(--vp-amber), var(--vp-amethyst));
  box-shadow:0 14px 30px -14px rgba(245,181,61,.55), inset 0 1px 0 rgba(255,255,255,.25);
  color:#1a1402; padding:14px; margin-bottom:14px;
}
html body .kit-illo svg{ width:100%; height:100%; color:rgba(0,0,0,.78); stroke:currentColor; }
/* Distinct gradient per card (color-coded) */
html body .kit-grid .kit-card:nth-child(1) .kit-illo{ background:linear-gradient(135deg,var(--vp-sapphire),var(--vp-amethyst)); color:#fff; }
html body .kit-grid .kit-card:nth-child(2) .kit-illo{ background:linear-gradient(135deg,var(--vp-amethyst),var(--vp-ruby)); color:#fff; }
html body .kit-grid .kit-card:nth-child(3) .kit-illo{ background:linear-gradient(135deg,var(--vp-amber),var(--vp-ruby)); color:#1a1402; }
html body .kit-grid .kit-card:nth-child(4) .kit-illo{ background:linear-gradient(135deg,var(--vp-emerald),var(--vp-sapphire)); color:#fff; }
html body .kit-grid .kit-card:nth-child(5) .kit-illo{ background:linear-gradient(135deg,var(--vp-steel),var(--vp-sapphire)); color:#fff; }
html body .kit-grid .kit-card:nth-child(6) .kit-illo{ background:linear-gradient(135deg,var(--vp-gold),var(--vp-amber)); color:#1a1402; }
html body .kit-grid .kit-card:nth-child(n+1) .kit-illo svg{ color:currentColor; opacity:.92; }
html body .kit-title{ font-family:var(--vp-d) !important; font-weight:600 !important; color:var(--vp-ink) !important; font-size:18px; margin:6px 0 6px; }
html body .kit-why{ color:var(--vp-dim) !important; font-size:13.5px; line-height:1.5; }
html body .kit-btn{
  border-radius:9999px !important; font-family:var(--vp-b) !important; font-weight:700 !important;
  background:var(--vp-glass) !important; color:var(--vp-ink) !important;
  border:1px solid var(--vp-hair) !important; padding:9px 14px;
  transition:transform .25s var(--vp-ease), border-color .25s var(--vp-ease) !important;
}
html body .kit-btn.amz{
  background:linear-gradient(180deg,var(--vp-gold-soft),var(--vp-gold)) !important;
  color:#241c06 !important; border-color:transparent !important;
  box-shadow:0 10px 26px -10px rgba(233,196,106,.55), inset 0 1px 0 rgba(255,255,255,.5) !important;
}
html body .kit-btn:hover{ transform:translateY(-2px); border-color:var(--vp-gold) !important; }
html body .kit-h{ font-family:var(--vp-d) !important; font-weight:600 !important; }

/* ============================================================
   grading-profit-calculator.html — Vault form + result panel
   ============================================================ */
html body .calc-wrap{ gap:22px; }
html body .calc-wrap .panel{
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:20px !important;
  padding:26px !important;
  box-shadow:0 22px 50px -28px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
html body .calc-wrap .panel h2{
  font-family:var(--vp-d) !important; font-weight:600 !important;
  font-size:clamp(22px,2.4vw,28px); margin:0 0 4px;
}
html body .calc-wrap .panel .sub{ color:var(--vp-dim) !important; font-size:13.5px; }

/* Result panel — prominent, gold-trimmed */
html body .calc-wrap .panel.result-panel{
  background:linear-gradient(180deg, rgba(233,196,106,.05), rgba(255,255,255,.015)) !important;
  border-color:rgba(233,196,106,.32) !important;
  box-shadow:0 28px 60px -28px rgba(233,196,106,.32), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Toggle */
html body .toggle{
  display:flex; align-items:center; gap:12px;
  background:var(--vp-glass) !important; border:1px solid var(--vp-hair) !important;
  border-radius:14px !important; padding:12px 14px; cursor:pointer;
  transition:border-color .25s var(--vp-ease);
}
html body .toggle:hover{ border-color:var(--vp-gold) !important; }
html body .toggle .t-txt b{ font-family:var(--vp-d) !important; color:var(--vp-ink) !important; }
html body .toggle .t-txt small{ display:block; color:var(--vp-dim); font-size:12px; }

/* Verdict */
html body .verdict{
  display:flex; align-items:center; gap:14px;
  border-radius:16px !important; padding:14px 16px; margin:6px 0 14px;
  background:var(--vp-glass) !important; border:1px solid var(--vp-hair) !important;
}
html body .verdict.good{ border-color:rgba(63,191,135,.45) !important; background:rgba(63,191,135,.08) !important; }
html body .verdict.bad { border-color:rgba(229,87,79,.45) !important; background:rgba(229,87,79,.08) !important; }
html body .verdict.warn{ border-color:rgba(245,181,61,.45) !important; background:rgba(245,181,61,.08) !important; }
html body .verdict .ico{ font-size:24px; }
html body .verdict .vlbl{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--vp-dim); }
html body .verdict .vval{
  font-family:var(--vp-d) !important; font-weight:600 !important;
  font-size:clamp(20px,2.2vw,26px); color:var(--vp-ink);
}

/* KPI grid */
html body .kpi-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:12px; margin:10px 0;
}
html body .kpi{
  background:rgba(0,0,0,.35) !important; border:1px solid var(--vp-hair) !important;
  border-radius:14px !important; padding:14px 16px;
}
html body .kpi .k{ color:var(--vp-dim) !important; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; }
html body .kpi .v{
  font-family:var(--vp-m) !important; font-weight:700 !important;
  font-size:clamp(20px,2.4vw,28px) !important; margin-top:6px; line-height:1.1;
}
html body .kpi.pos .v{
  background:linear-gradient(92deg,#fff,#B7F1D2 40%,var(--vp-emerald) 90%) !important;
  -webkit-background-clip:text; background-clip:text; color:transparent !important;
}
html body .kpi.neg .v{
  background:linear-gradient(92deg,#fff,#FFC0BC 40%,var(--vp-ruby) 90%) !important;
  -webkit-background-clip:text; background-clip:text; color:transparent !important;
}

/* Breakdown rows */
html body .brk{ margin-top:8px; }
html body .brk .row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:8px 0; border-bottom:1px solid var(--vp-hair-2);
  font-family:var(--vp-m) !important; font-size:12.5px; color:var(--vp-dim);
}
html body .brk .row b, html body .brk .row span:last-child{ color:var(--vp-ink); }

/* Affiliate buttons block */
html body .aff-box{
  margin-top:18px; padding:16px;
  background:var(--vp-glass) !important; border:1px solid var(--vp-hair) !important;
  border-radius:16px !important;
}
html body .aff-box .aff-lbl{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--vp-dim); margin-bottom:10px;
}
html body .aff-grid{ display:flex; flex-wrap:wrap; gap:10px; }
html body .aff-btn{
  flex:1 1 220px; text-align:center;
  background:linear-gradient(180deg,var(--vp-gold-soft),var(--vp-gold)) !important;
  color:#241c06 !important; border:1px solid transparent !important;
  border-radius:9999px !important; padding:12px 16px;
  font-family:var(--vp-b) !important; font-weight:700 !important;
  text-decoration:none; transition:transform .25s var(--vp-ease), box-shadow .25s var(--vp-ease);
  box-shadow:0 10px 26px -10px rgba(233,196,106,.55), inset 0 1px 0 rgba(255,255,255,.5) !important;
}
html body .aff-btn:hover{ transform:translateY(-2px); }
html body .aff-btn.eby{
  background:var(--vp-glass) !important; color:var(--vp-ink) !important;
  border:1px solid var(--vp-hair) !important; box-shadow:none !important;
}
html body .aff-btn.eby:hover{ border-color:var(--vp-gold) !important; }
html body .aff-disc{ color:var(--vp-faint) !important; font-size:11.5px; margin-top:10px; }

/* Probability box */
html body .prob{
  background:rgba(0,0,0,.25) !important; border:1px solid var(--vp-hair) !important;
  border-radius:14px !important; padding:14px; margin-top:10px;
}
html body .prob .lbl{ color:var(--vp-dim); font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
html body .psum{ font-family:var(--vp-m); font-size:12px; color:var(--vp-dim); margin-top:8px; }

/* Hero on grading-profit-calculator */
html body section.hero h1{
  font-family:var(--vp-d) !important; font-weight:600 !important;
  font-size:clamp(34px,5vw,58px); line-height:1.05; letter-spacing:-.01em;
}
html body section.hero h1 .g{
  background:linear-gradient(92deg,var(--vp-gold-soft) 0%, var(--vp-gold) 60%, #C9A24B 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
html body section.hero .lede{ color:var(--vp-dim) !important; font-size:17px; line-height:1.55; }
html body .crumb{ color:var(--vp-faint); font-size:11.5px; letter-spacing:.04em; }
html body .crumb a{ color:var(--vp-dim); }
html body .crumb a:hover{ color:var(--vp-gold); }

/* Disclaimer / kofi tweaks (legal text untouched) */
html body .disclaimer, html body .kit-disc, html body .kofi-line{
  color:var(--vp-faint) !important;
}

/* Safety: no horizontal overflow anywhere */
html, body{ overflow-x:clip; }
html body .kpi-grid, html body .calcres, html body .calc-wrap{ min-width:0; }
html body img{ max-width:100%; height:auto; }

/* ============================================================
   PACK LAB (packs.html) — reveal cards, results grid, controls
   PRESERVE: pack ink-foil art (.pack/.foil/.plogo), rip animation,
   pull glow mechanic. Only theme reveal/result/CTA chrome.
   ============================================================ */
html body .hero h1{ font-family:var(--vp-d) !important; font-weight:600 !important; letter-spacing:-.01em; }
html body .hero h1 .g{
  background:linear-gradient(92deg,var(--vp-gold-soft) 0%, var(--vp-gold) 55%, #C9A24B 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}

/* Generic .btn / .btn.primary used across packs + decklab */
html body .btn{
  background:var(--vp-glass) !important;
  border:1px solid rgba(245,181,61,.55) !important;
  color:#EAEDF6 !important;
  border-radius:9999px !important;
  font-family:var(--vp-b) !important; font-weight:700 !important;
  transition:transform .25s var(--vp-ease), border-color .25s var(--vp-ease), box-shadow .25s var(--vp-ease), background .25s var(--vp-ease), color .25s var(--vp-ease) !important;
}
html body .btn:hover{ transform:translateY(-2px); border-color:var(--vp-gold) !important; background:rgba(245,181,61,.10) !important; color:#fff !important; }
html body .btn.primary,
html body .opencta{
  background:linear-gradient(180deg,#FFC85C,#E0A938) !important;
  color:#161006 !important; border-color:transparent !important; font-weight:800 !important;
  box-shadow:0 14px 36px -12px rgba(245,181,61,.6), 0 0 0 1px rgba(245,181,61,.35), inset 0 1px 0 rgba(255,255,255,.45) !important;
}
html body .btn.primary:hover, html body .opencta:hover{
  transform:translateY(-2px); filter:brightness(1.05);
  box-shadow:0 22px 48px -14px rgba(245,181,61,.78), 0 0 0 1px rgba(245,181,61,.55), inset 0 1px 0 rgba(255,255,255,.5) !important;
}
/* Reveal-tools small links */
html body .tbtn{
  font-family:var(--vp-m) !important; font-size:11.5px !important; letter-spacing:.14em;
  text-transform:uppercase; color:var(--vp-dim) !important;
  background:var(--vp-glass) !important; border:1px solid var(--vp-hair) !important;
  border-radius:9999px !important; padding:8px 14px !important;
  text-decoration:none !important; cursor:pointer;
  transition:border-color .25s var(--vp-ease), color .25s var(--vp-ease) !important;
}
html body .tbtn:hover{ color:var(--vp-ink) !important; border-color:var(--vp-gold) !important; }

/* Reveal card — preserve rarity glow; reinforce shell */
html body .revface{
  border-radius:18px !important;
  box-shadow:0 22px 60px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
html body .revmeta .rn{ font-family:var(--vp-d) !important; font-weight:600 !important; color:var(--vp-ink); }
html body .revmeta .rp{
  font-family:var(--vp-m) !important;
  background:linear-gradient(92deg,#fff,#FFE5A8 40%,var(--vp-gold) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:-.01em;
}
html body .revhint{ font-family:var(--vp-m) !important; color:var(--vp-faint) !important; letter-spacing:.06em; }
html body .counter{ font-family:var(--vp-m) !important; color:var(--vp-dim) !important; letter-spacing:.14em; text-transform:uppercase; }
html body .counter b{ color:var(--vp-gold) !important; }
html body .progress{
  background:var(--vp-glass) !important; border:1px solid var(--vp-hair-2);
}
html body .progress span{
  background:linear-gradient(90deg,var(--vp-gold-soft),var(--vp-gold)) !important;
}

/* Results grid — uncropped 5:7, glass double-bezel, gold mono prices */
html body .gridhead h2{ font-family:var(--vp-d) !important; font-weight:600 !important; }
html body .gridhead .best{ font-family:var(--vp-m) !important; color:var(--vp-dim); letter-spacing:.04em; }
html body .gridhead .best b{ color:var(--vp-gold) !important; }
html body .valbar{
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:18px !important;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
html body .valbar .stat span{
  font-family:var(--vp-m) !important; color:var(--vp-dim) !important;
  letter-spacing:.18em; text-transform:uppercase; font-size:10.5px;
}
html body .valbar .stat b{ font-family:var(--vp-m) !important; color:var(--vp-ink) !important; }
html body .valbar .stat b.cost{
  background:linear-gradient(92deg,#fff,#FFE5A8 40%,var(--vp-gold) 90%) !important;
  -webkit-background-clip:text; background-clip:text; color:transparent !important;
}
html body .gcard{
  padding:5px;
  background:var(--vp-glass);
  border:1px solid var(--vp-hair);
  border-radius:16px;
  transition:transform .3s var(--vp-ease), border-color .3s var(--vp-ease);
}
html body .gcard:hover{ transform:translateY(-4px); border-color:rgba(233,196,106,.55); }
html body .gface{
  border-radius:12px !important;
  background:linear-gradient(180deg,#15151b,#0c0c11) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.5) !important;
}
html body .gface img{ object-fit:contain !important; padding:6px; }
html body .gcap{
  font-family:var(--vp-b) !important; color:var(--vp-dim) !important;
  font-size:12px; line-height:1.3; min-height:2.6em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
html body .gcap .px{
  font-family:var(--vp-m) !important;
  background:linear-gradient(92deg,#fff,#FFE5A8 40%,var(--vp-gold) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Pack-modal sheet / card box → glass */
html body .sheet, html body .cardbox{
  background:linear-gradient(180deg,#15151b,#0c0c11) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:20px !important;
  box-shadow:0 30px 70px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
html body .sheet h3, html body .cinfo h3{ font-family:var(--vp-d) !important; font-weight:600 !important; }
html body .crow b, html body .orow .od{ font-family:var(--vp-m) !important; }

/* Disclaimer line tone */
html body .disc{ color:var(--vp-faint) !important; }

/* ============================================================
   DECK LAB (decklab.html)
   ============================================================ */
html body .deckchip{
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  color:var(--vp-ink) !important;
  font-family:var(--vp-b) !important;
  border-radius:9999px !important;
  transition:transform .25s var(--vp-ease), border-color .25s var(--vp-ease) !important;
}
html body .deckchip:hover{ transform:translateY(-1px); border-color:var(--vp-gold) !important; }
html body .deckchip i{ font-family:var(--vp-m) !important; color:var(--vp-faint) !important; letter-spacing:.04em; }
html body .deck-head h2, html body .deck-head h3{ font-family:var(--vp-d) !important; }
html body .ig-head{ font-family:var(--vp-d) !important; font-weight:600 !important; }
html body .ig-head .ct{ font-family:var(--vp-m) !important; color:var(--vp-faint) !important; letter-spacing:.08em; }

/* Deck card tile — uncropped 5:7, uniform height via 2-line clamp on caption */
html body .ig-cards .card{ position:relative; }
html body .ig-cards .card .face{
  border-radius:12px !important;
  background:linear-gradient(180deg,#15151b,#0c0c11) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.5) !important;
  border:1px solid var(--vp-hair) !important;
  overflow:hidden;
}
html body .ig-cards .card .face img{ object-fit:contain !important; padding:4px; }
html body .ig-cards .card .cap{
  font-family:var(--vp-b) !important;
  color:var(--vp-dim) !important;
  font-size:12px !important; line-height:1.3 !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important;
  overflow:hidden !important; min-height:2.6em !important;
  text-align:center;
}
html body .ig-cards .card .cap .px{
  display:inline; font-family:var(--vp-m) !important;
  background:linear-gradient(92deg,#fff,#FFE5A8 40%,var(--vp-gold) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
html body .ig-cards .card:hover .face{
  transform:translateY(-4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.65), 0 0 0 1px rgba(233,196,106,.45) !important;
}
html body .filler-card .face{
  background:var(--vp-glass) !important; border-style:dashed !important;
}
html body .filler-card .ftxt{ font-family:var(--vp-m) !important; color:var(--vp-faint) !important; letter-spacing:.04em; }

/* Brew/sourced helpers */
html body .brew-footer{
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:16px !important;
}
html body .brew-footer h4{
  font-family:var(--vp-m) !important; color:var(--vp-gold) !important;
  letter-spacing:.18em; text-transform:uppercase; font-size:11px;
}
html body .sourced-hint{
  background:linear-gradient(180deg, rgba(233,196,106,.08), rgba(255,255,255,.02)) !important;
  border:1px solid rgba(233,196,106,.3) !important;
  border-radius:14px !important;
}
html body .sourced-hint b{ font-family:var(--vp-d) !important; color:var(--vp-gold) !important; letter-spacing:.04em; }
html body .sourced-hint small{ font-family:var(--vp-m) !important; color:var(--vp-dim) !important; }
html body .brew-banner{
  background:linear-gradient(100deg, rgba(77,141,240,.10), rgba(169,116,232,.10)) !important;
  border:1px solid rgba(77,141,240,.4) !important; border-radius:14px !important;
}
html body .brew-banner b{ font-family:var(--vp-d) !important; }
html body .brew-loading{ font-family:var(--vp-m) !important; color:var(--vp-faint) !important; }

/* Deck-head buy / total numbers */
html body .deck-head b, html body .deck-head .price, html body .deck-head .cost{
  font-family:var(--vp-m) !important;
}

/* ============================================================
   COLLECTION (collection.html) — re-skin holdings + controls
   PRESERVE: localStorage logic + every #id. Only swap surfaces.
   ============================================================ */
html body .bar h2{ font-family:var(--vp-d) !important; font-weight:600 !important; }
html body .search input{
  background:var(--vp-input) !important;
  border:1px solid var(--vp-hair) !important;
  color:var(--vp-ink) !important;
  border-radius:12px !important;
  font-family:var(--vp-b) !important;
}
html body .search input:focus{
  outline:none !important; border-color:var(--vp-gold) !important;
  box-shadow:0 0 0 3px rgba(233,196,106,.18) !important;
}

/* Collection-page buttons (3 variants) */
html body .btn-primary{
  background:linear-gradient(180deg,var(--vp-gold-soft),var(--vp-gold)) !important;
  color:#241c06 !important; border:1px solid transparent !important;
  border-radius:9999px !important;
  font-family:var(--vp-b) !important; font-weight:700 !important;
  box-shadow:0 10px 26px -10px rgba(233,196,106,.55), inset 0 1px 0 rgba(255,255,255,.5) !important;
  transition:transform .25s var(--vp-ease), filter .15s !important;
}
html body .btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.05); }
html body .btn-ghost{
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  color:var(--vp-ink) !important;
  border-radius:9999px !important;
  font-family:var(--vp-b) !important;
}
html body .btn-ghost:hover{ border-color:var(--vp-gold) !important; }
html body .btn-danger{
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  color:var(--vp-ruby) !important;
  border-radius:9999px !important;
  font-family:var(--vp-b) !important;
}
html body .btn-danger:hover{
  border-color:var(--vp-ruby) !important;
  background:rgba(229,87,79,.10) !important;
}

/* Add-form glass panel */
html body .addform{
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:18px !important;
  padding:18px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
}
html body .addform label{ font-family:var(--vp-m) !important; color:var(--vp-dim) !important; letter-spacing:.16em; }
html body .addform input, html body .addform select{
  background:var(--vp-input) !important;
  border:1px solid var(--vp-hair) !important;
  color:var(--vp-ink) !important;
  border-radius:12px !important;
  font-family:var(--vp-m) !important;
}
html body .addform input:focus, html body .addform select:focus{
  outline:none !important; border-color:var(--vp-gold) !important;
  box-shadow:0 0 0 3px rgba(233,196,106,.18) !important;
}
html body .addform .picked .info b{ font-family:var(--vp-d) !important; color:var(--vp-ink) !important; }
html body .addform .picked .info span{ font-family:var(--vp-m) !important; color:var(--vp-faint) !important; }
html body .addform .picked img{
  border-radius:8px !important;
  background:linear-gradient(180deg,#15151b,#0c0c11) !important;
  object-fit:contain !important;
}

/* Bar sort select */
html body .bar select{
  background:var(--vp-input) !important;
  border:1px solid var(--vp-hair) !important;
  color:var(--vp-ink) !important;
  border-radius:12px !important;
  font-family:var(--vp-b) !important;
}
html body .bar select:focus{
  outline:none !important; border-color:var(--vp-gold) !important;
  box-shadow:0 0 0 3px rgba(233,196,106,.18) !important;
}

/* Holding row → glass double-bezel; uncropped 5:7 thumb */
html body .holding{
  background:linear-gradient(180deg,#15151b,#0c0c11) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:16px !important;
  padding:14px !important;
  box-shadow:0 12px 28px -16px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06) !important;
  transition:border-color .25s var(--vp-ease), transform .25s var(--vp-ease) !important;
}
html body .holding:hover{ border-color:rgba(233,196,106,.45) !important; }
html body .holding .img{
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair-2) !important;
  border-radius:10px !important;
}
html body .holding .img img{ object-fit:contain !important; padding:3px; }
html body .holding .nm{ font-family:var(--vp-d) !important; color:var(--vp-ink) !important; font-weight:600 !important; }
html body .holding .nm:hover{ color:var(--vp-gold) !important; }
html body .holding .mt, html body .holding .sub{ font-family:var(--vp-m) !important; color:var(--vp-faint) !important; }
html body .holding .mt .tag{
  background:var(--vp-glass) !important; border:1px solid var(--vp-hair-2) !important;
}
html body .holding .mt .tag.foil{ color:var(--vp-gold) !important; border-color:rgba(233,196,106,.4) !important; }
html body .holding .val{
  font-family:var(--vp-m) !important; font-weight:700 !important;
  background:linear-gradient(92deg,#fff,#FFE5A8 40%,var(--vp-gold) 90%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  color:transparent !important;
  letter-spacing:-.01em;
}
html body .holding .sub.up{ color:var(--vp-emerald) !important; }
html body .holding .sub.dn{ color:var(--vp-ruby) !important; }
html body .holding .ops button, html body .holding .qedit button{
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  color:var(--vp-dim) !important;
  font-family:var(--vp-m) !important;
  border-radius:8px !important;
}
html body .holding .ops button:hover, html body .holding .qedit button:hover{
  color:var(--vp-ink) !important; border-color:var(--vp-gold) !important;
}
html body .holding .ops button.del:hover{
  color:var(--vp-ruby) !important; border-color:var(--vp-ruby) !important;
}
html body .holding .qedit input{
  background:var(--vp-input) !important; border:1px solid var(--vp-hair) !important;
  color:var(--vp-ink) !important; font-family:var(--vp-m) !important; border-radius:8px !important;
}
html body .holding .qedit .fin-tog{
  background:var(--vp-glass) !important; border:1px solid var(--vp-hair) !important;
  color:var(--vp-dim) !important; border-radius:9999px !important;
}
html body .holding .qedit .fin-tog:hover{ border-color:var(--vp-gold) !important; color:var(--vp-ink) !important; }

/* Empty / loading / trend / note */
html body .empty{
  background:var(--vp-glass) !important;
  border:1px dashed var(--vp-hair) !important;
  border-radius:18px !important;
}
html body .empty h3{ font-family:var(--vp-d) !important; color:var(--vp-ink) !important; font-weight:600 !important; }
html body .empty p{ color:var(--vp-dim) !important; }
html body .empty .hint, html body .empty .sample-hint{
  font-family:var(--vp-m) !important; color:var(--vp-faint) !important; letter-spacing:.06em;
}
html body .loading, html body .brew-loading{ font-family:var(--vp-m) !important; color:var(--vp-faint) !important; }
html body .trend{
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:16px !important;
}
html body .trend .tlbl{ font-family:var(--vp-m) !important; color:var(--vp-dim) !important; letter-spacing:.18em; }
html body .trend .tstat{ font-family:var(--vp-m) !important; color:var(--vp-dim) !important; }
html body .trend .tstat b{ color:var(--vp-ink) !important; }
html body .trend .tstat.up b{ color:var(--vp-emerald) !important; }
html body .trend .tstat.dn b{ color:var(--vp-ruby) !important; }
html body .note{
  background:var(--vp-glass) !important; border:1px dashed var(--vp-hair) !important;
  border-radius:12px !important; color:var(--vp-dim) !important;
}
html body .note b{ color:var(--vp-ink) !important; font-family:var(--vp-d) !important; }
html body .toast{
  background:linear-gradient(180deg,#15151b,#0c0c11) !important;
  border:1px solid rgba(233,196,106,.5) !important;
  color:var(--vp-ink) !important;
  border-radius:12px !important; font-family:var(--vp-b) !important;
}

/* ============================================================
   Vault Phase 3 — cards.html (React /cards browser),
   news.html (/news/), players-collectors.html, inkdle.html.
   Visual-only overlay. Logic & IDs untouched.
   ============================================================ */

/* ---------- Shared utility: glass shell + foil sheen ---------- */
.vp-foil{position:relative;overflow:hidden}
.vp-foil::after{content:"";position:absolute;inset:-1px;background:linear-gradient(115deg,transparent 40%,rgba(246,226,168,.10) 50%,transparent 60%);transform:translateX(-120%);transition:transform .9s var(--vp-ease);pointer-events:none}
.vp-foil:hover::after{transform:translateX(120%)}

/* ============================================================
   1) /cards browser  (src/routes/cards.index.tsx)
   ============================================================ */
.wrap:has(> .finder){max-width:min(1680px,94vw) !important}
.crumb{font-family:var(--vp-m) !important;letter-spacing:.18em !important}
.crumb a:hover{color:var(--vp-gold) !important}
main.wrap > h1{font-family:var(--vp-d) !important;font-weight:600 !important;letter-spacing:-.02em !important;color:var(--vp-ink) !important}
.lede{font-family:var(--vp-b) !important;color:#C5C7D3 !important}
.lede .trust{font-family:var(--vp-m) !important;color:var(--vp-dim) !important}
h2.setsHead{font-family:var(--vp-d) !important;font-weight:600 !important;letter-spacing:-.01em !important;color:var(--vp-ink) !important;font-size:clamp(22px,2.4vw,30px) !important}

/* Finder panel — glass double-bezel */
.finder{
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:18px !important;
  padding:5px !important;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.65) !important;
}
.finder > *{position:relative;z-index:1}
.finder::before{
  content:"";display:block;position:absolute;inset:5px;border-radius:14px;
  background:linear-gradient(180deg,#15151b,#0c0c11);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08);
  pointer-events:none;z-index:0;
}
.finder{position:relative}
.finder-row{position:relative;z-index:1;padding:14px 14px 0}
.finder-empty,.finder-count{position:relative;z-index:1;padding:0 14px}
.finder-results{position:relative;z-index:1;padding:0 14px 14px}

.finder-input,.finder-select{
  background:var(--vp-input) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:12px !important;
  color:var(--vp-ink) !important;
  font-family:var(--vp-b) !important;
}
.finder-input:focus,.finder-select:focus{border-color:var(--vp-gold) !important;box-shadow:0 0 0 3px rgba(233,196,106,.22) !important}
.finder-count{font-family:var(--vp-m) !important;text-transform:uppercase;letter-spacing:.18em;color:var(--vp-dim) !important}

/* Card result tiles — glass double-bezel + 5:7 uncropped art */
.finder-results{grid-template-columns:repeat(auto-fill,minmax(190px,1fr)) !important;gap:12px !important}
.finder-card{
  flex-direction:column !important;
  align-items:stretch !important;
  padding:5px !important;
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:14px !important;
  min-height:0 !important;
  transition:transform .35s var(--vp-ease),border-color .25s !important;
  position:relative;overflow:hidden;
}
.finder-card::after{content:"";position:absolute;inset:-1px;background:linear-gradient(115deg,transparent 40%,rgba(246,226,168,.10) 50%,transparent 60%);transform:translateX(-120%);transition:transform .9s var(--vp-ease);pointer-events:none}
.finder-card:hover{transform:translateY(-4px) !important;border-color:rgba(233,196,106,.55) !important;background:var(--vp-glass) !important}
.finder-card:hover::after{transform:translateX(120%)}
.finder-thumb{
  flex:0 0 auto !important;
  width:100% !important;
  aspect-ratio:auto !important;
  padding-top:140% !important; /* 5:7 */
  height:auto !important;
  border-radius:10px !important;
  background:linear-gradient(180deg,#15151b,#0c0c11) !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08) !important;
  position:relative !important;
  overflow:hidden;
}
.finder-thumb img{position:absolute !important;inset:6px !important;width:auto !important;height:auto !important;max-width:calc(100% - 12px) !important;max-height:calc(100% - 12px) !important;margin:auto !important;object-fit:contain !important}
.finder-meta{padding:8px 8px 6px !important;gap:3px !important}
.finder-name{font-family:var(--vp-d) !important;font-weight:600 !important;color:var(--vp-ink) !important;font-size:13.5px !important;-webkit-line-clamp:2 !important;min-height:2.6em}
.finder-sub{font-family:var(--vp-m) !important;color:var(--vp-dim) !important;text-transform:uppercase;letter-spacing:.14em !important;font-size:9.5px !important}
.finder-price{
  font-family:var(--vp-m) !important;
  background:linear-gradient(180deg,var(--vp-gold-soft),var(--vp-gold));
  -webkit-background-clip:text;background-clip:text;color:transparent !important;
  font-weight:700 !important;font-size:13px !important;letter-spacing:.02em;
}

/* Featured sets row + Browse by set list — keep auto-fill, refine surface */
.featuredSets a,.sets a{
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:14px !important;
  transition:transform .35s var(--vp-ease),border-color .25s,background .25s !important;
}
.featuredSets a:hover,.sets a:hover{
  background:var(--vp-glass) !important;
  border-color:rgba(233,196,106,.55) !important;
  transform:translateY(-3px) !important;
}
.fs-tag,.sptag{font-family:var(--vp-m) !important;letter-spacing:.18em !important;color:var(--vp-gold-soft) !important;text-transform:uppercase}
.fs-go{font-family:var(--vp-d) !important;color:var(--vp-ink) !important}
.sn{font-family:var(--vp-d) !important;font-weight:600 !important;color:var(--vp-ink) !important}
.sm{font-family:var(--vp-m) !important;letter-spacing:.14em !important;text-transform:uppercase;color:var(--vp-dim) !important}
.spval{
  font-family:var(--vp-m) !important;
  background:linear-gradient(180deg,var(--vp-gold-soft),var(--vp-gold));
  -webkit-background-clip:text;background-clip:text;color:transparent !important;
  font-weight:700 !important;
}
.featuredSets{grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) !important}
.sets{grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) !important}

/* ============================================================
   2) /news/  (public/news/index.html + news article shell)
   ============================================================ */
main.wrap > .news-hero h1,
.news-hero h1{font-family:var(--vp-d) !important;font-weight:600 !important;letter-spacing:-.02em !important;color:var(--vp-ink) !important;font-size:clamp(34px,5vw,58px) !important}
.kicker{font-family:var(--vp-m) !important;letter-spacing:.22em !important;text-transform:uppercase;color:var(--vp-gold-soft) !important;font-size:11px !important;display:inline-flex;align-items:center;gap:6px}
.news-hero .lede,.news-hero p{color:#C5C7D3 !important;font-family:var(--vp-b) !important}

.news-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr)) !important;gap:14px !important}
.ncard{
  display:flex !important;
  flex-direction:column !important;
  padding:5px !important;
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:18px !important;
  position:relative;overflow:hidden;
  transition:transform .35s var(--vp-ease),border-color .25s !important;
  text-decoration:none !important;
}
.ncard > *{position:relative;z-index:1}
.ncard::before{
  content:"";position:absolute;inset:5px;border-radius:14px;
  background:linear-gradient(180deg,#15151b,#0c0c11);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08);
  pointer-events:none;
}
.ncard::after{content:"";position:absolute;inset:-1px;background:linear-gradient(115deg,transparent 40%,rgba(246,226,168,.08) 50%,transparent 60%);transform:translateX(-120%);transition:transform 1s var(--vp-ease);pointer-events:none}
.ncard:hover{transform:translateY(-4px) !important;border-color:rgba(233,196,106,.55) !important}
.ncard:hover::after{transform:translateX(120%)}
.ncard .eyebrow{font-family:var(--vp-m) !important;text-transform:uppercase;letter-spacing:.2em !important;color:var(--vp-gold-soft) !important;font-size:10.5px !important;padding:14px 16px 0}
.ncard .date{font-family:var(--vp-m) !important;color:var(--vp-dim) !important;font-size:11px !important;letter-spacing:.12em !important;padding:4px 16px 0}
.ncard h3{font-family:var(--vp-d) !important;font-weight:600 !important;color:var(--vp-ink) !important;letter-spacing:-.01em !important;padding:8px 16px 0;font-size:19px !important;line-height:1.25 !important}
.ncard p{color:#B5B7C2 !important;font-family:var(--vp-b) !important;padding:8px 16px 4px;font-size:14px !important}
.ncard .more{
  margin-top:auto;padding:12px 16px 16px;
  font-family:var(--vp-m) !important;letter-spacing:.14em !important;text-transform:uppercase;
  font-size:11px !important;color:var(--vp-gold) !important;
}

/* Newsletter block */
.nl{
  margin-top:32px !important;
  padding:5px !important;
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:18px !important;
  position:relative;
}
.nl::before{
  content:"";position:absolute;inset:5px;border-radius:14px;
  background:linear-gradient(180deg,#15151b,#0c0c11);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08);
  pointer-events:none;
}
.nl > *{position:relative;z-index:1}
.nl-kick{font-family:var(--vp-m) !important;letter-spacing:.22em !important;color:var(--vp-gold-soft) !important;text-transform:uppercase;padding:24px 24px 0}
.nl h2{font-family:var(--vp-d) !important;font-weight:600 !important;color:var(--vp-ink) !important;letter-spacing:-.01em !important;padding:8px 24px 0;font-size:clamp(22px,2.4vw,32px) !important}
.nl > p{color:#B5B7C2 !important;font-family:var(--vp-b) !important;padding:8px 24px}
.nl-form{padding:6px 24px 8px;display:flex;gap:10px;flex-wrap:wrap}
.nl-form input{
  flex:1;min-width:220px;
  background:var(--vp-input) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:12px !important;
  color:var(--vp-ink) !important;
  font-family:var(--vp-b) !important;
  padding:12px 14px !important;
  min-height:44px;
}
.nl-form input:focus{border-color:var(--vp-gold) !important;box-shadow:0 0 0 3px rgba(233,196,106,.22) !important;outline:none}
.nl-form button{
  background:linear-gradient(180deg,var(--vp-gold-soft),var(--vp-gold)) !important;
  color:#241c06 !important;
  font-family:var(--vp-d) !important;font-weight:700 !important;
  border:0 !important;border-radius:999px !important;
  padding:12px 22px !important;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .25s var(--vp-ease);
  min-height:44px;
}
.nl-form button:hover{transform:translateY(-2px)}
.nl-note{padding:0 24px;font-family:var(--vp-m) !important;font-size:11.5px !important;color:var(--vp-dim) !important}

/* ============================================================
   3) players-collectors.html  (.pcx-* scope)
   ============================================================ */
.pcx-hero{border-bottom-color:var(--vp-hair) !important}
.pcx-h1,.pcx-h2,.pcx-h3,.pcx-card h3,.pcx-pt h4{font-family:var(--vp-d) !important;font-weight:600 !important;letter-spacing:-.02em !important;color:var(--vp-ink) !important}
.pcx-h1 .g{background:linear-gradient(180deg,var(--vp-gold-soft),var(--vp-gold));-webkit-background-clip:text;background-clip:text;color:transparent !important}
.pcx-eb,.pcx-kick{font-family:var(--vp-m) !important;text-transform:uppercase;letter-spacing:.22em !important;font-size:11px !important;display:inline-flex;align-items:center;gap:6px}
.pcx-eb i,.pcx-kick i,.pcx-pt .pk i{width:6px;height:6px;border-radius:50%;background:var(--vp-gold);box-shadow:0 0 10px rgba(233,196,106,.65);display:inline-block}
.pcx-sub,.pcx-lede{color:#B5B7C2 !important;font-family:var(--vp-b) !important}
.pcx-trust{font-family:var(--vp-m) !important;color:var(--vp-dim) !important;letter-spacing:.1em !important}

/* Buttons */
.pcx-btn{font-family:var(--vp-d) !important;font-weight:700 !important;letter-spacing:.01em !important;border-radius:999px !important;display:inline-flex;align-items:center;gap:10px;transition:transform .25s var(--vp-ease) !important}
.pcx-btn.pcx-solid{background:linear-gradient(180deg,var(--vp-gold-soft),var(--vp-gold)) !important;color:#241c06 !important;border:0 !important;box-shadow:0 8px 22px -10px rgba(233,196,106,.55) !important}
.pcx-btn.pcx-ghost{background:var(--vp-glass) !important;color:var(--vp-ink) !important;border:1px solid var(--vp-hair) !important;backdrop-filter:blur(6px)}
.pcx-btn:hover{transform:translateY(-2px)}

/* Cards — glass double-bezel */
.pcx-grid2{grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) !important;gap:14px !important}
.pcx-card{
  padding:5px !important;
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:18px !important;
  position:relative;overflow:hidden;
  transition:transform .35s var(--vp-ease),border-color .25s !important;
}
.pcx-card > *{position:relative;z-index:1}
.pcx-card::before{
  content:"";position:absolute;inset:5px;border-radius:14px;
  background:linear-gradient(180deg,#15151b,#0c0c11);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08);
  pointer-events:none;z-index:0;
}
.pcx-card::after{content:"";position:absolute;inset:-1px;background:linear-gradient(115deg,transparent 40%,rgba(246,226,168,.10) 50%,transparent 60%);transform:translateX(-120%);transition:transform 1s var(--vp-ease);pointer-events:none}
.pcx-card:hover{transform:translateY(-4px) !important;border-color:rgba(233,196,106,.55) !important}
.pcx-card:hover::after{transform:translateX(120%)}

.pcx-thumb,.pcx-ghdr{border-radius:12px !important;overflow:hidden;position:relative}
.pcx-tag,.pcx-glabel{font-family:var(--vp-m) !important;text-transform:uppercase;letter-spacing:.18em !important;color:var(--vp-gold-soft) !important;font-size:10px !important;background:rgba(0,0,0,.45) !important;border:1px solid var(--vp-hair) !important;border-radius:999px !important;padding:4px 10px !important;backdrop-filter:blur(6px)}
.pcx-body h3{font-size:18px !important;line-height:1.25 !important;margin-top:4px}
.pcx-body p{color:#B5B7C2 !important;font-family:var(--vp-b) !important}
.pcx-body .go{font-family:var(--vp-m) !important;text-transform:uppercase;letter-spacing:.14em !important;color:var(--vp-gold) !important;font-size:11px !important;margin-top:6px;display:inline-block}

/* Honest-prices band + points */
.pcx-band{border-top:1px solid var(--vp-hair) !important;border-bottom:1px solid var(--vp-hair) !important;background:linear-gradient(180deg,rgba(233,196,106,.04),transparent) !important}
.pcx-three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) !important;gap:14px !important}
.pcx-pt{
  padding:18px 18px 16px !important;
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:14px !important;
  position:relative;
}
.pcx-pt .pk{font-family:var(--vp-m) !important;text-transform:uppercase;letter-spacing:.18em !important;color:var(--vp-gold-soft) !important;font-size:10.5px !important;display:inline-flex;align-items:center;gap:6px}
.pcx-pt h4{margin-top:8px;font-size:17px !important}
.pcx-pt p{color:#B5B7C2 !important;font-family:var(--vp-b) !important;font-size:14px}

/* Ink-IQ promo strip */
.pcx-iq{
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:16px !important;
  padding:14px !important;
}
.pcx-iq h3{font-family:var(--vp-d) !important;color:var(--vp-ink) !important}
.pcx-iq .nw{font-family:var(--vp-m) !important;text-transform:uppercase;letter-spacing:.18em !important;color:var(--vp-gold-soft) !important;font-size:10.5px !important}
.pcx-iq p{color:#B5B7C2 !important;font-family:var(--vp-b) !important}

/* Newsletter strip */
.pcx-news{
  padding:5px !important;
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:18px !important;
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.pcx-news::before{content:"";position:absolute;inset:5px;border-radius:14px;background:linear-gradient(180deg,#15151b,#0c0c11);box-shadow:inset 0 1px 1px rgba(255,255,255,.08);pointer-events:none}
.pcx-news > *{position:relative;z-index:1;padding:0 18px}
.pcx-news h3{font-family:var(--vp-d) !important;color:var(--vp-ink) !important;margin:14px 0 4px 18px}
.pcx-news p{color:#B5B7C2 !important;font-family:var(--vp-b) !important;margin:0 18px 14px}

/* ============================================================
   4) inkdle.html  (.ik-*)
   ============================================================ */
.ik-kicker{font-family:var(--vp-m) !important;text-transform:uppercase;letter-spacing:.22em !important;color:var(--vp-gold-soft) !important;font-size:11px !important}
.ik-hero h1{font-family:var(--vp-d) !important;font-weight:600 !important;letter-spacing:-.02em !important;color:var(--vp-ink) !important;font-size:clamp(40px,7vw,72px) !important;background:linear-gradient(180deg,var(--vp-ink) 30%,var(--vp-gold-soft));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ik-hero p{color:#B5B7C2 !important;font-family:var(--vp-b) !important}
.ik-meta{font-family:var(--vp-m) !important;text-transform:uppercase;letter-spacing:.16em !important;color:var(--vp-dim) !important}
.ik-meta b{color:var(--vp-gold) !important;font-family:var(--vp-m) !important}

.ik-stage{
  padding:5px !important;
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:20px !important;
  position:relative;
}
.ik-stage::before{content:"";position:absolute;inset:5px;border-radius:16px;background:linear-gradient(180deg,#15151b,#0c0c11);box-shadow:inset 0 1px 1px rgba(255,255,255,.08);pointer-events:none}
.ik-stage > *{position:relative;z-index:1}
.ik-input-wrap{padding:16px 16px 0}
.ik-rows{padding:0 16px}
.ik-result,.ik-howto,.ik-stats,.ik-dist{margin-left:16px;margin-right:16px}
.ik-howto{margin-bottom:16px}

.ik-input{
  background:var(--vp-input) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:12px !important;
  color:var(--vp-ink) !important;
  font-family:var(--vp-b) !important;
}
.ik-input:focus{border-color:var(--vp-gold) !important;box-shadow:0 0 0 3px rgba(233,196,106,.22) !important}
.ik-sugs{background:#11131C !important;border:1px solid var(--vp-hair) !important;border-radius:12px !important}
.ik-sug:hover,.ik-sug.active{background:rgba(233,196,106,.10) !important;color:var(--vp-gold) !important}
.ik-sug-meta{font-family:var(--vp-m) !important;color:var(--vp-dim) !important}

/* Tile grid — glass + gold gradient on exact matches */
.ik-tile{
  background:linear-gradient(180deg,#15151b,#0c0c11) !important;
  border:1px solid var(--vp-hair) !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.06);
  font-family:var(--vp-d) !important;
}
.ik-tile .lbl{font-family:var(--vp-m) !important;letter-spacing:.14em !important;color:var(--vp-dim) !important}
.ik-tile .val{color:var(--vp-ink) !important;font-family:var(--vp-d) !important}
.ik-tile.ok{
  background:linear-gradient(180deg,rgba(63,191,135,.32),rgba(63,191,135,.18)) !important;
  border-color:rgba(63,191,135,.55) !important;
  box-shadow:0 0 0 1px rgba(63,191,135,.25),inset 0 1px 1px rgba(255,255,255,.10) !important;
}
.ik-tile.ok .lbl,.ik-tile.ok .val{color:#EAFFEF !important}
.ik-tile.partial{
  background:linear-gradient(180deg,rgba(245,181,61,.30),rgba(245,181,61,.14)) !important;
  border-color:rgba(245,181,61,.55) !important;
  box-shadow:0 0 0 1px rgba(245,181,61,.22),inset 0 1px 1px rgba(255,255,255,.10) !important;
}
.ik-tile.partial .lbl,.ik-tile.partial .val{color:#FFF6E1 !important}
.ik-row .ik-thumb{border:1px solid var(--vp-hair) !important;background:linear-gradient(180deg,#15151b,#0c0c11) !important;border-radius:8px !important}

/* Result panel + share */
.ik-result{
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  border-radius:16px !important;
}
.ik-result.win{
  background:linear-gradient(180deg,rgba(63,191,135,.18),var(--vp-glass)) !important;
  border-color:rgba(63,191,135,.55) !important;
}
.ik-result.lose{
  background:linear-gradient(180deg,rgba(229,87,79,.18),var(--vp-glass)) !important;
  border-color:rgba(229,87,79,.45) !important;
}
.ik-result h2{font-family:var(--vp-d) !important;font-weight:600 !important;color:var(--vp-ink) !important}
.ik-result .ans-card .nm{font-family:var(--vp-d) !important;color:var(--vp-ink) !important}
.ik-result .ans-card .lk{font-family:var(--vp-m) !important;color:var(--vp-gold) !important;text-transform:uppercase;letter-spacing:.14em !important;font-size:11px !important}
.ik-result .ans-card img{border:1px solid var(--vp-hair) !important}
.ik-share{
  background:linear-gradient(180deg,var(--vp-gold-soft),var(--vp-gold)) !important;
  color:#241c06 !important;
  font-family:var(--vp-d) !important;font-weight:700 !important;
  border-radius:999px !important;
  box-shadow:0 8px 22px -10px rgba(233,196,106,.55) !important;
  transition:transform .25s var(--vp-ease) !important;
}
.ik-share:hover{transform:translateY(-2px) !important}
.ik-share.ok{background:linear-gradient(180deg,#7BE0AE,#3FBF87) !important;color:#0B2A1A !important}
.ik-next{font-family:var(--vp-m) !important;color:var(--vp-dim) !important;letter-spacing:.14em !important;text-transform:uppercase}

/* Stats + distribution */
.ik-stat{background:var(--vp-glass) !important;border:1px solid var(--vp-hair) !important;border-radius:12px !important}
.ik-stat .n{
  font-family:var(--vp-m) !important;
  background:linear-gradient(180deg,var(--vp-gold-soft),var(--vp-gold));
  -webkit-background-clip:text;background-clip:text;color:transparent !important;
  font-weight:700 !important;
}
.ik-stat .l{font-family:var(--vp-m) !important;letter-spacing:.16em !important;color:var(--vp-dim) !important}
.ik-dist h3{font-family:var(--vp-d) !important;color:var(--vp-ink) !important}
.ik-bar{font-family:var(--vp-m) !important;color:var(--vp-dim) !important}
.ik-bar .b{background:rgba(255,255,255,.06) !important;border:1px solid var(--vp-hair) !important}
.ik-bar .b span{background:rgba(255,255,255,.10) !important}
.ik-bar .b span.cur{background:linear-gradient(180deg,#7BE0AE,#3FBF87) !important;color:#0B2A1A !important}

/* How-to-play */
.ik-howto{background:var(--vp-glass) !important;border:1px solid var(--vp-hair) !important;border-radius:14px !important}
.ik-howto details summary{font-family:var(--vp-d) !important;color:var(--vp-ink) !important}
.ik-howto .lg{font-family:var(--vp-m) !important;color:#B5B7C2 !important;text-transform:uppercase;letter-spacing:.14em !important}

/* Toast */
.ik-toast{
  background:var(--vp-glass) !important;
  border:1px solid var(--vp-hair) !important;
  backdrop-filter:blur(10px);
  color:var(--vp-ink) !important;
  font-family:var(--vp-m) !important;letter-spacing:.1em !important;
  border-radius:12px !important;
}

/* Inkdle: keep autocomplete above later siblings inside the stage stacking */
.ik-input-wrap{position:relative;z-index:50 !important}
.ik-sugs{z-index:60 !important}

/* ============================================================
   Touch-target expansion (decklab + collection)
   Dense tool pages: keep the visual size, expand the hit area to >=40x40
   via min-height/padding + invisible ::after overlays on tiny controls.
   Scoped to <=900px so desktop density is preserved.
   ============================================================ */
@media (max-width: 900px){
  /* Filter / deck chips and ink rows: ensure clickable area is tall enough.
     Keep visual padding; just add a hit-expanding ::after that doesn't reflow. */
  .deckchip, .pt-tag, .extag, .tag,
  .dl-inkrow-chips .ink, .inks .ink, .inkgroup .ink, .mink,
  .dot, .cover-swatch{
    position: relative;
  }
  /* Chips/tags: expand HEIGHT only so neighbors on the same row stay tappable */
  .deckchip::after, .pt-tag::after, .extag::after,
  .dl-inkrow-chips .ink::after, .inks .ink::after, .inkgroup .ink::after, .mink::after{
    content:"";
    position:absolute;
    left:0; right:0; top:50%;
    height:max(100%, 40px);
    transform:translateY(-50%);
    background:transparent;
    pointer-events:auto;
    z-index:1;
  }
  /* Small round dots / swatches: expand both axes (they're spaced by gap) */
  .dot::after, .cover-swatch::after{
    content:"";
    position:absolute;
    left:50%; top:50%;
    width:max(100%, 40px);
    height:max(100%, 40px);
    transform:translate(-50%, -50%);
    background:transparent;
    pointer-events:auto;
    z-index:1;
  }
  /* Keep inner visual content above the overlay */
  .deckchip > *, .pt-tag > *, .extag > *, .ink > *, .mink > *{ position:relative; z-index:2; }

  /* Quantity +/- buttons in collection deck rows */
  .qedit > button,
  .qedit input[type=number],
  .qedit .fin-tog,
  .ops .del,
  button.del, button.fin-tog{
    min-height:40px;
    padding-top:max(8px, .55em);
    padding-bottom:max(8px, .55em);
  }
  .qedit > button{ min-width:40px; }

  /* Generic small icon buttons on these tool pages */
  .ink-ss-nav-btn{ min-width:40px; }
}