* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',system-ui,sans-serif; }
body { background:#0b0e14; color:#e6e9ef; padding:22px 26px; }
a { color:inherit; text-decoration:none; }
.top { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.top h1 { font-size:22px; font-weight:700; letter-spacing:.5px; }
.top h1 span { color:#8b5cf6; }
.crumb { font-size:13px; color:#8a93a6; }
.crumb a:hover { color:#8b5cf6; }

/* dashboard grid */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.deck { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:760px){ .deck { grid-template-columns:1fr; } }

.clock { text-align:right; font-size:13px; color:#8a93a6; }
.clock b { display:block; font-size:18px; color:#e6e9ef; }
.big { font-size:28px; font-weight:700; }
.up { color:#22c55e; } .down { color:#ef5b6e; }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.green{background:#22c55e;} .red{background:#ef5b6e;} .blue{background:#8b5cf6;} .amber{background:#f0a93b;}
.pill { display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; background:#1d2430; color:#8a93a6; }
.pill.kz { background:rgba(240,169,59,.15); color:#f0a93b; }
.stat-row { display:flex; gap:12px; margin-top:10px; }
.stat { flex:1; background:#10151e; border-radius:10px; padding:10px 12px; }
.stat .n { font-size:20px; font-weight:700; }
.stat .l { font-size:11px; color:#8a93a6; text-transform:uppercase; letter-spacing:.5px; }
.feed-item { font-size:13px; padding:5px 0; display:flex; gap:8px; align-items:flex-start; }
.feed-item .when { color:#8b5cf6; font-size:11px; min-width:42px; }
.row { display:flex; justify-content:space-between; padding:6px 0; font-size:14px; border-bottom:1px solid #1d2430; }
.row:last-child { border:none; }
a.bin-item { text-decoration:none; color:inherit; }
a.bin-item:hover .lbl span:first-child { color:#8b5cf6; }

.minibtn { display:inline-block; padding:3px 10px; border-radius:8px; background:#8b5cf6; color:#fff;
  font-size:11px; font-weight:600; text-decoration:none; white-space:nowrap; }
.minibtn:hover { opacity:.88; }
.newsbox { margin-top:12px; background:#10151e; border:1px solid #1d2430; border-radius:10px; padding:10px 12px; }
.newshead { font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:#8a93a6; margin-bottom:6px; }
.newstitle { font-size:13px; line-height:1.35; color:#e6e9ef; }
.cap { font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:#8a93a6; }
.benjbox { margin-top:14px; background:#10151e; border:1px solid #232c3d; border-left:3px solid #8b5cf6; border-radius:10px; padding:10px 12px; }
.dir { display:inline-block; padding:1px 8px; border-radius:6px; font-size:11px; font-weight:700; }
.dir.long { background:rgba(34,197,94,.16); color:#22c55e; }
.dir.short { background:rgba(239,91,110,.16); color:#ef5b6e; }
.callrow { display:flex; justify-content:space-between; font-size:13px; padding:3px 0; }
.bstat { font-size:10px; font-weight:700; letter-spacing:.3px; padding:1px 7px; border-radius:10px; }
.bstat.hot { background:rgba(240,169,59,.16); color:#f0a93b; }
.bstat.on { background:rgba(34,197,94,.16); color:#22c55e; }
.bstat.off { background:#1d2430; color:#8a93a6; }
.card { background:#151a24; border:1px solid #222a39; border-radius:14px; padding:16px 18px; }
.card.link { cursor:pointer; transition:.15s; }
.card.link:hover { border-color:#8b5cf6; transform:translateY(-2px); }
.card h2 { font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:#f0b43a; margin-bottom:12px; }
.bin-item { margin-bottom:13px; }
.bin-item .lbl { display:flex; justify-content:space-between; font-size:14px; margin-bottom:4px; }
.muted { color:#8a93a6; }
.bar { height:8px; background:#1d2430; border-radius:6px; overflow:hidden; }
.bar i { display:block; height:100%; border-radius:6px; }

/* set grid */
.setbar { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.setbar .count { font-size:15px; color:#8a93a6; }
.setbar .count b { color:#22c55e; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:12px; }
.cards.compact { grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:7px; }
.cards.compact .cell { padding:5px; border-radius:8px; gap:2px; }
.cards.compact .cell .name { font-size:10px; line-height:1.1; }
.cards.compact .cell .num { font-size:9px; }
.cards.compact .cell .tag { display:none; }
.cards.compact .cell .cam { font-size:10px; bottom:3px; right:3px; }
.cell.selected { outline:3px solid #ef5b6e; outline-offset:-3px; }
.cell.selected::after { content:'✓'; position:absolute; top:4px; left:50%; transform:translateX(-50%); background:#ef5b6e; color:#fff; width:20px; height:20px; border-radius:50%; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; z-index:3; }
.density-btn, .select-btn { background:none; border:1px solid #2a3346; border-radius:18px; padding:5px 12px; color:#9aa6bd; font-size:12.5px; cursor:pointer; }
.density-btn.on, .select-btn.on { border-color:#8b5cf6; color:#cfe0ff; }
.bulkbar { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); display:none; align-items:center; gap:14px; background:#161b26; border:1px solid #ef5b6e; border-radius:12px; padding:11px 18px; z-index:200; box-shadow:0 8px 28px rgba(0,0,0,.5); }
.bulkbar.show { display:flex; }
.bulkbar b { color:#fff; }
.ebay-val { margin:14px 0 4px; padding:11px 13px; background:#0e131c; border:1px solid #222a39; border-radius:10px; }
.ebay-val .lbl { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#8a93a6; }
.ebay-val .val { font-size:20px; font-weight:800; color:#22c55e; margin-top:3px; }
.ebay-val .note { font-size:10.5px; color:#5a6478; margin-top:3px; }
.cell { background:#151a24; border:1px solid #222a39; border-radius:12px; padding:10px; text-align:center; cursor:pointer; transition:.12s; position:relative; aspect-ratio:3/4; display:flex; flex-direction:column; justify-content:center; gap:4px; overflow:hidden; }
.cell:hover { border-color:#8b5cf6; }
.cell.missing { opacity:.38; filter:grayscale(.6); }
.cell.holo { background:linear-gradient(145deg,#1a2030,#22193a); }
.cell .num { font-size:11px; color:#8b5cf6; font-weight:700; }
.cell .name { font-size:13px; font-weight:600; line-height:1.2; }
.cell .tag { font-size:10px; text-transform:uppercase; letter-spacing:.5px; }
.cell.owned .tag { color:#22c55e; }
.cell.missing .tag { color:#8a93a6; }
.cell .thumb { position:absolute; inset:0; object-fit:cover; width:100%; height:100%; }
.cell .cam { position:absolute; bottom:6px; right:6px; font-size:12px; opacity:.5; }

/* modal */
/* Overlay scrolls itself (overflow-y:auto) and the sheet is centered via margin:auto —
   short content centers, tall content scrolls with the TOP still reachable (align-items:center
   would push a too-tall sheet's top off-screen → the old "clips at the top" bug). overscroll
   contain stops the scroll from chaining to the page behind. */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.72); display:none; align-items:flex-start; justify-content:center; z-index:200; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:24px 16px; }
.modal.show { display:flex; }
.sheet { background:#151a24; border:1px solid #2a3346; border-radius:16px; padding:22px; width:380px; max-width:92vw; margin:auto; }
.sheet h3 { font-size:18px; margin-bottom:4px; }
.sheet .sub { color:#8a93a6; font-size:13px; margin-bottom:16px; }

/* ---- Shared catalog search pill (matches the Pokémon catalog search across every category:
   YGO, Magic, comics, Funko, …). Full-width rounded box with a 🔍 on the left + ✕ clear. ---- */
.catsearch { position:relative; margin:0 0 12px; }
.catsearch input { width:100%; box-sizing:border-box; padding:11px 40px 11px 40px; border-radius:24px;
  background:#0e131c; border:1px solid #2a3346; color:#e6e9ef; font-size:14px; outline:none; }
.catsearch input:focus { border-color:#8b5cf6; }
.catsearch input::placeholder { color:#6b7588; }
.catsearch .mag { position:absolute; left:15px; top:50%; transform:translateY(-50%); opacity:.6; pointer-events:none; }
.catsearch .clr { position:absolute; right:12px; top:50%; transform:translateY(-50%); cursor:pointer; opacity:.6;
  background:none; border:none; color:#e6e9ef; font-size:18px; line-height:1; }
.catsearch .clr:hover { opacity:1; }

/* ---- Catalog global-search results (Sets + Cards groups), parity with the Pokémon search.
   Used by the YGO + Magic catalog pages. ---- */
.catres { display:flex; flex-direction:column; gap:7px; margin-bottom:12px; }
.catres-hdr { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#8a93a6; margin:6px 2px 2px; }
.catres-row { display:flex; align-items:center; gap:11px; padding:8px 12px; border:1px solid #222a3a; border-radius:11px;
  background:#121826; cursor:pointer; text-decoration:none; color:inherit; }
.catres-row:hover { border-color:#8b5cf6; background:#141b2c; }
.catres-row img { width:34px; height:46px; object-fit:contain; flex:none; border-radius:4px; background:#0b0e14; }
.catres-row .ph { width:34px; height:46px; flex:none; border-radius:4px; background:#0b0e14; display:flex;
  align-items:center; justify-content:center; font-size:16px; opacity:.5; }
.catres-row .rn { flex:1; min-width:0; }
.catres-row .rn .t { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.catres-row .rn .s { font-size:11px; color:#8a93a6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.catres-row .rnum { font-size:12px; color:#9fb3d1; flex:none; white-space:nowrap; }
.photo-area { background:#0b0e14; border:1px dashed #2a3346; border-radius:12px; min-height:300px; display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:14px; }
.photo-area img { width:100%; border-radius:8px; }
.photo-area .ph { color:#5a6276; font-size:13px; text-align:center; padding:20px; }
.btnrow { display:flex; gap:10px; }
.btn { flex:1; padding:10px; border-radius:10px; border:none; font-size:14px; font-weight:600; cursor:pointer; }
.btn.primary { background:#8b5cf6; color:#fff; }
.btn.ghost { background:#1d2430; color:#e6e9ef; }
.btn.danger { background:#3a1d24; color:#ef8a9a; }
.btn:hover { opacity:.9; }

/* =========================================================
   Pokémon-themed polish layer (task 7) — tasteful, not gaudy
   ========================================================= */
/* =========================================================
   GRAILERY DESIGN TOKENS (quickwins, 2026-07-01)
   Single source of truth for the violet/gold/green identity.
   Values match the hexes already shipped — zero visual change,
   new/touched code should reference these instead of raw hex.
   ========================================================= */
:root{
  --violet:#8b5cf6; --violet2:#7c3aed;      /* brand primary + deep press/gradient end */
  --gold:#f0b43a;                            /* grail gold — headings, active accents */
  --green:#22c55e;                           /* value-up / owned / success */
  --red:#ef5b6e;                             /* value-down / danger */
  --bg:#0b0e14; --panel:#151a24; --line:#222a39;
  --panel2:#0e131c; --line2:#2a3346;         /* inset panels + brighter borders */
  --ink:#e6e9ef; --mut:#8a93a6;
  /* legacy aliases (poké-era names) — keep old rules working, all point at the tokens */
  --poke-red:#ee1515; --poke-red-dk:#b50d0d;
  --poke-yellow:var(--gold); --poke-blue:var(--violet); --poke-blue-dk:var(--violet2);
  --accent:var(--violet);
}

/* ---- shared building blocks (use these in new code, not raw hex) ---- */
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 16px; border-radius:10px; border:none; cursor:pointer;
  background:linear-gradient(180deg,var(--violet),var(--violet2)); color:#fff;
  font-size:14px; font-weight:700; text-decoration:none;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset; transition:.15s; }
.btn-primary:hover{ filter:brightness(1.1); }
.btn-primary:active{ transform:scale(.97); }
/* subtle pokéball motif in the top bar title */
.top h1::before{
  content:""; display:inline-block; width:18px; height:18px; margin-right:8px; vertical-align:-3px;
  border-radius:50%; background:
    radial-gradient(circle at 50% 50%, #fff 0 3px, #222 3px 4.5px, transparent 4.5px),
    linear-gradient(#ee1515 0 50%, #f6f6f6 50% 100%);
  border:1.5px solid #222; box-shadow:0 0 0 1px rgba(0,0,0,.3);
}
.top h1 span{ color:var(--poke-yellow); text-shadow:0 1px 0 var(--poke-blue-dk); }

/* themed primary buttons / pills get the violet/gold edge */
.minibtn{ background:var(--violet); box-shadow:0 1px 0 var(--violet2) inset; }
.btn.primary{ background:linear-gradient(180deg,var(--violet),var(--violet2)); box-shadow:0 1px 0 rgba(255,255,255,.15) inset; }

/* card headers get a thin colored top accent */
.card{ position:relative; overflow:hidden; }
.card > h2:first-child{ position:relative; }

/* brand header (logo + wordmark), rendered by nav.js */
.brand{ display:flex; align-items:center; gap:10px; }
.brand .pcp-logo{ flex:none; height:34px; width:auto; display:block; filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.brand .brandname{ font-size:20px; font-weight:800; letter-spacing:.3px; color:#f0b43a; }
.brand .brandname .bg{ color:#f0b43a; }   /* gold */
.brand .brandname .bv{ color:#8b5cf6; }   /* violet */

/* =========================================================
   NAV REDESIGN (navui) — one cohesive bar; global account
   cluster pinned top-right; mobile slide-out drawer.
   ========================================================= */

/* header: hamburger (mobile, far left) | brand | (existing clock/crumb) | account cluster */
.top{ gap:14px; }
.top .brand{ margin-right:auto; }     /* brand left, everything else pushed right */

/* global account cluster (Inbox / Account / Sign out) — both avenues, every page */
.acct{ display:flex; align-items:center; gap:4px; flex:none; }
.acct-link{ position:relative; display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; color:#aab4c6; transition:.15s; }
.acct-link:hover{ background:#151a24; color:#fff; }
.acct-link .badge{ position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px;
  background:var(--poke-red); color:#fff; border-radius:9px; font-size:10px; font-weight:700;
  line-height:16px; text-align:center; box-shadow:0 0 0 2px #0b0e14; }

/* hamburger — hidden on desktop, shown on narrow screens */
.navburger{ display:none; align-items:center; justify-content:center; width:38px; height:38px; flex:none;
  border:1px solid #222a39; border-radius:10px; background:#11161f; color:#cfe0ff; cursor:pointer; transition:.15s; }
.navburger:hover{ border-color:var(--poke-blue); color:#fff; }

/* the nav bar itself — one clean sticky horizontal row (sub-tabs for the active avenue) */
.navbar--bar{ display:flex; align-items:center; gap:14px; flex-wrap:nowrap; position:sticky; top:0; z-index:50;
  background:rgba(11,14,20,.92); backdrop-filter:blur(6px); margin:0 -26px 18px; padding:8px 26px;
  border-bottom:1px solid #1c2433; }
@media (max-width:640px){ body{ padding:18px 14px; } }

/* segmented avenue switcher (Collection / Trading) — clean, not loud */
.navswitch{ display:inline-flex; flex:none; background:#0e131c; border:1px solid #222a39; border-radius:11px; padding:3px; gap:2px; }
.navseg{ font-size:12.5px; font-weight:700; letter-spacing:.2px; padding:6px 14px; border-radius:8px;
  background:transparent; border:none; color:#f0b43a; cursor:pointer; transition:.15s; white-space:nowrap; }
.navseg:hover{ color:#ffd97a; }
.navseg.active{ background:var(--poke-blue); color:#fff; box-shadow:0 1px 4px rgba(0,0,0,.35); }

/* desktop tab row — tight spacing, subtle hover, clear active state */
.navtabs{ display:flex; align-items:center; gap:2px; flex:1; min-width:0; overflow-x:auto; }
.navtabs::-webkit-scrollbar{ height:0; }
.navtabs a{ font-size:13px; font-weight:600; padding:7px 13px; border-radius:9px; color:#f0b43a;
  white-space:nowrap; transition:.12s; }
.navtabs a:hover{ background:#151a24; color:#fff; }
.navtabs a.active{ background:#151a24; color:#fff; box-shadow:inset 0 -2px 0 var(--poke-blue); }

/* legacy fallback (older pages that still pass .navbar--legacy) */
.navbar--legacy{ display:flex; gap:6px; flex-wrap:wrap; margin:-6px 0 18px; }
.navbar--legacy a{ font-size:12px; font-weight:600; padding:6px 12px; border-radius:20px; background:#151a24; border:1px solid #222a39; color:#f0b43a; }
.navbar--legacy a:hover{ border-color:var(--poke-blue); color:#fff; }
.navbar--legacy a.active{ background:var(--poke-blue); color:#fff; border-color:var(--poke-blue); }

/* ---- mobile slide-out drawer + backdrop ---- */
.navscrim{ position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; visibility:hidden;
  transition:opacity .25s; z-index:300; }
.navscrim.show{ opacity:1; visibility:visible; }
.navdrawer{ position:fixed; top:0; left:0; bottom:0; width:84%; max-width:320px; z-index:301;
  background:#0e131c; border-right:1px solid #1c2433; box-shadow:6px 0 28px rgba(0,0,0,.5);
  transform:translateX(-105%); transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; padding:14px 14px 18px; overflow-y:auto; }
.navdrawer.open{ transform:translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.drawer-title{ font-size:13px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:#f0b43a; }
.drawer-close{ display:flex; align-items:center; justify-content:center; width:34px; height:34px;
  border:1px solid #222a39; border-radius:9px; background:#11161f; color:#cfe0ff; cursor:pointer; }
.drawer-close:hover{ border-color:var(--poke-blue); color:#fff; }
.navswitch.seg-drawer{ width:100%; margin-bottom:14px; }
/* 3 equal segments must fit the ~290px drawer — trim side padding / spacing so the
   longest label ("🌿 Lifestyle") doesn't clip. min-width:0 lets the flex items shrink. */
.navswitch.seg-drawer .navseg{ flex:1; min-width:0; text-align:center; padding:6px 4px; font-size:12px; letter-spacing:0; }
.drawer-tabs{ display:flex; flex-direction:column; gap:2px; }
.drawer-tabs a{ font-size:13px; font-weight:600; padding:8px 12px; border-radius:10px; color:#f0b43a; }
.drawer-tabs a:hover{ background:#151a24; color:#fff; }
.drawer-tabs a.active{ background:var(--poke-blue); color:#fff; }
/* Collectibles Catalog accordion: sub-lines collapsed until the tab is tapped */
.cat-head .chev{ margin-left:auto; font-size:11px; opacity:.65; transition:transform .15s ease; }
.drawer-cat.open .cat-head .chev{ transform:rotate(90deg); }
.drawer-cat .drawer-subtabs{ display:none; }
.drawer-cat.open .drawer-subtabs{ display:flex; }
/* Top-categories sub-lines under "Collectibles Catalog" — smaller + indented + muted vs the main tabs */
.drawer-subtabs{ display:flex; flex-direction:column; gap:1px; margin:1px 0 5px 14px; padding-left:9px; border-left:2px solid #2a3346; }
.drawer-subtabs a{ font-size:11.5px; font-weight:500; padding:5px 10px; border-radius:8px; color:#9fb0c8; }
.drawer-subtabs a:hover{ background:#151a24; color:#fff; }
.drawer-subtabs a.viewall{ color:#c9a23a; font-weight:700; font-style:italic; margin-top:1px; }
.drawer-acct{ margin-top:auto; padding-top:14px; border-top:1px solid #1c2433; display:flex; flex-direction:column; gap:2px; }
.acct-item{ position:relative; display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:10px;
  font-size:15px; font-weight:600; color:#f0b43a; }
.acct-item:hover{ background:#151a24; color:#fff; }
.acct-item .badge{ margin-left:auto; min-width:18px; height:18px; padding:0 5px; background:var(--poke-red);
  color:#fff; border-radius:9px; font-size:11px; font-weight:700; line-height:18px; text-align:center; }
body.nav-locked{ overflow:hidden; }

/* ---- responsive switch: collapse the bar into the hamburger on narrow screens ---- */
@media (max-width:760px){
  .navburger{ display:flex; }
  .navbar--bar{ display:none; }       /* tabs live in the drawer on mobile */
  .top .clock, .top .crumb{ display:none; }   /* keep the header tight on phones */
  .top{ gap:8px; }
  .brand .brandname{ font-size:16px; line-height:1.05; }   /* don't crowd the icons */
  .brand .pcp-logo{ height:28px; }
  .acct-link{ width:32px; height:32px; }
}
/* Drawer is available on desktop too (opened via the "More" button in the tab row). */

/* =========================================================
   Public Collections — compact clickable set bars (uitweaks)
   ========================================================= */
.setbars{ display:flex; flex-direction:column; gap:8px; }
.setbar{ display:flex; align-items:center; gap:14px; padding:11px 16px;
  background:#151a24; border:1px solid #222a39; border-radius:11px; text-decoration:none;
  color:#e6e9ef; transition:.15s; }
.setbar:hover{ border-color:var(--poke-blue); background:#181f2b; transform:translateX(2px); }
.setbar .sb-name{ flex:none; width:34%; min-width:130px; font-size:14px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.setbar .sb-mid{ flex:1; min-width:0; display:flex; align-items:center; gap:12px; }
.setbar .sb-count{ flex:none; font-size:12.5px; color:#9aa6bd; font-variant-numeric:tabular-nums; }
.setbar .sb-count b{ color:#e6e9ef; }
.setbar .sb-bar{ flex:1; min-width:60px; height:7px; background:#1d2430; border-radius:6px; overflow:hidden; }
.setbar .sb-bar i{ display:block; height:100%; border-radius:6px; background:var(--poke-blue); }
.setbar .sb-pct{ flex:none; width:46px; text-align:right; font-size:13px; font-weight:800;
  color:#22c55e; font-variant-numeric:tabular-nums; }
.setbar .sb-chev{ flex:none; color:#5a6276; transition:.15s; }
.setbar:hover .sb-chev{ color:var(--poke-blue); }
/* read-only "this collector is Master Setting" tag inside a setbar name */
.setbar .sb-master{ display:inline-block; margin-left:8px; font-size:10.5px; font-weight:800;
  letter-spacing:.02em; color:#bff3e6; background:rgba(34,197,94,.13); border:1px solid #2c6e5e;
  border-radius:20px; padding:1px 8px; vertical-align:middle; }

/* Public Collections — user picker cards (name + "collecting since") */
.user-picker{ display:flex; gap:10px; flex-wrap:wrap; margin:-2px 0 18px; }
.user-picker .user-card{ display:flex; flex-direction:column; gap:2px; min-width:150px;
  padding:10px 14px; border-radius:12px; background:#151a24; border:1px solid #222a39;
  text-decoration:none; transition:.15s; }
.user-picker .user-card:hover{ border-color:var(--poke-blue); background:#181f2b; transform:translateY(-1px); }
.user-picker .uc-name{ font-size:14px; font-weight:700; color:#e6e9ef; }
.user-picker .uc-since{ font-size:11px; color:#8a93a6; }
@media (max-width:560px){
  .setbar{ flex-wrap:wrap; gap:8px 12px; padding:11px 14px; }
  .setbar .sb-name{ width:auto; flex:1; }
  .setbar .sb-mid{ flex-basis:100%; order:3; }
}

/* toggle slider (public/private) */
.toggle{ position:relative; display:inline-block; width:42px; height:22px; vertical-align:middle; }
.toggle input{ display:none; }
.toggle .track{ position:absolute; inset:0; background:#2a3346; border-radius:20px; transition:.2s; }
.toggle .track::before{ content:""; position:absolute; left:3px; top:3px; width:16px; height:16px; background:#fff; border-radius:50%; transition:.2s; }
.toggle input:checked + .track{ background:var(--poke-blue); }
.toggle input:checked + .track::before{ transform:translateX(20px); }
.toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:7px 0; font-size:13px; border-bottom:1px solid #1d2430; }
.toggle-row:last-child{ border:none; }
.priv-tag{ font-size:10px; font-weight:700; padding:1px 7px; border-radius:10px; }
.priv-tag.pub{ background:rgba(34,197,94,.16); color:#22c55e; }
.priv-tag.prv{ background:#1d2430; color:#8a93a6; }

/* condition chips */
.cond-row{ display:flex; gap:6px; margin:10px 0; flex-wrap:wrap; }
.cond-chip{ flex:1; min-width:48px; padding:7px 0; text-align:center; border-radius:9px; border:1px solid #2a3346; background:#0b0e14; color:#aab4c6; font-size:12px; font-weight:700; cursor:pointer; }
.cond-chip.on{ background:var(--poke-yellow); color:#1a1a1a; border-color:var(--poke-yellow); }
.qty-row{ display:flex; align-items:center; gap:12px; margin:10px 0; }
.qty-row .qbtn{ width:34px; height:34px; border-radius:9px; border:1px solid #2a3346; background:#1d2430; color:#fff; font-size:18px; font-weight:700; cursor:pointer; }
.qty-row .qval{ font-size:20px; font-weight:700; min-width:30px; text-align:center; }

/* community feed */
.feed-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.feed-card{ background:#151a24; border:1px solid #222a39; border-radius:14px; overflow:hidden; }
.feed-card img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; background:#0b0e14; }
.feed-card .meta{ padding:10px 12px; }
.feed-card .who{ font-size:13px; font-weight:700; }
.feed-card .det{ font-size:12px; color:#8a93a6; margin-top:2px; }
.lets-go{ display:flex; align-items:center; gap:7px; margin-top:9px; padding:7px 10px; border-radius:10px;
  border:1px solid #2a3346; background:#0b0e14; color:#f0b43a; font-weight:800; font-size:13px; cursor:pointer; width:100%; justify-content:center; letter-spacing:.5px; }
.lets-go.on{ background:linear-gradient(180deg,#ee1515,#b50d0d); color:#fff; border-color:#b50d0d; }
.lets-go:hover{ filter:brightness(1.08); }

/* inbox */
.inbox-item{ background:#151a24; border:1px solid #222a39; border-left:3px solid var(--poke-blue); border-radius:12px; padding:12px 14px; margin-bottom:10px; }
.inbox-item.unread{ border-left-color:var(--poke-red); }
.inbox-item .t{ font-size:14px; }
.inbox-item .w{ font-size:11px; color:#8a93a6; margin-top:4px; }

/* marketplace (task 16) */
.mkt-tabs{ display:flex; gap:8px; margin:4px 0 18px; }
.mkt-tab{ font-size:13px; font-weight:700; padding:7px 16px; border-radius:20px; background:#151a24; border:1px solid #222a39; color:#aab4c6; cursor:pointer; }
.mkt-tab.on{ background:var(--poke-blue); color:#fff; border-color:var(--poke-blue); }
.mkt-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.mkt-filters input, .mkt-filters select{ background:#0e131c; border:1px solid #2a3346; border-radius:9px; color:#e6e9ef; font-size:13px; padding:7px 10px; }
.mkt-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.mkt-card{ background:#151a24; border:1px solid #222a39; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.mkt-card .imgs{ display:flex; background:#0b0e14; }
.mkt-card .imgs img{ width:50%; aspect-ratio:3/4; object-fit:cover; display:block; }
.mkt-card .imgs.single img{ width:100%; }
.mkt-card .noimg{ width:100%; aspect-ratio:3/2; display:flex; align-items:center; justify-content:center; color:#5a6276; font-size:12px; background:#0b0e14; }
.mkt-card .meta{ padding:11px 13px; flex:1; display:flex; flex-direction:column; gap:5px; }
.mkt-card .nm{ font-size:14px; font-weight:700; }
.mkt-card .sub{ font-size:12px; color:#8a93a6; }
.mkt-card .who{ font-size:12px; color:#aab4c6; }
.mkt-tag{ font-size:10px; font-weight:800; letter-spacing:.4px; padding:1px 8px; border-radius:10px; text-transform:uppercase; }
.mkt-tag.trade{ background:rgba(139,92,246,.18); color:#7fa8ff; }
.mkt-tag.sale{ background:rgba(34,197,94,.16); color:#22c55e; }
.mkt-price{ font-size:15px; font-weight:800; color:#22c55e; }
.mkt-market{ font-size:11px; color:#8a93a6; }
.mkt-form{ background:#151a24; border:1px solid #222a39; border-radius:14px; padding:16px 18px; max-width:560px; }
.mkt-form label{ display:block; font-size:12px; color:#8a93a6; margin:10px 0 4px; }
.mkt-form input, .mkt-form select, .mkt-form textarea{ width:100%; background:#0e131c; border:1px solid #2a3346; border-radius:9px; color:#e6e9ef; font-size:14px; padding:9px 11px; }
.mkt-form textarea{ min-height:60px; resize:vertical; }
.mkt-photo-row{ display:flex; gap:12px; }
.mkt-photo-row > div{ flex:1; }
.mkt-thumb{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:9px; background:#0b0e14; border:1px dashed #2a3346; display:block; }
.mkt-note{ font-size:12px; border-radius:9px; padding:9px 11px; margin:10px 0; }
.mkt-note.warn{ background:rgba(240,169,59,.12); color:#f0a93b; border:1px solid rgba(240,169,59,.3); }
.mkt-note.err{ background:rgba(239,91,110,.12); color:#ef8a9a; border:1px solid rgba(239,91,110,.3); }
.mkt-note.ok{ background:rgba(34,197,94,.12); color:#22c55e; border:1px solid rgba(34,197,94,.3); }
.mkt-mine{ display:flex; align-items:center; gap:12px; background:#151a24; border:1px solid #222a39; border-radius:12px; padding:10px 13px; margin-bottom:10px; }
.mkt-mine .x{ margin-left:auto; background:#3a1d24; color:#ef8a9a; border:none; border-radius:8px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer; }
.mkt-empty{ color:#8a93a6; padding:30px 4px; text-align:center; }

/* owned/qty badge on set cells */
.cell .qtybadge{ position:absolute; top:6px; left:6px; background:var(--poke-blue); color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:8px; }
.cell .condbadge{ position:absolute; top:6px; right:6px; background:var(--poke-yellow); color:#1a1a1a; font-size:10px; font-weight:700; padding:1px 6px; border-radius:8px; }

/* ---- Community board (task 15) ---- */
.comm-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:26px; }
.comm-stat{ background:#151a24; border:1px solid #222a39; border-radius:14px; padding:14px 16px; }
.comm-stat .n{ font-size:24px; font-weight:800; color:#fff; line-height:1.1; }
.comm-stat .n.gold{ color:var(--poke-yellow); }
.comm-stat .l{ font-size:11px; color:#8a93a6; text-transform:uppercase; letter-spacing:.6px; margin-top:4px; }
.comm-stat .sub{ font-size:11px; color:#aab4c6; margin-top:6px; }
.comm-section{ margin:0 0 30px; }
.comm-section > h2{ font-size:16px; font-weight:700; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.comm-section > .hint{ font-size:12px; color:#8a93a6; margin-bottom:12px; }
.lb{ display:flex; flex-direction:column; gap:7px; }
.lb-row{ display:flex; align-items:center; gap:12px; background:#151a24; border:1px solid #222a39; border-radius:11px; padding:10px 13px; }
.lb-row.me{ border-color:var(--poke-yellow); box-shadow:0 0 0 1px var(--poke-yellow) inset; }
.lb-rank{ font-size:14px; font-weight:800; width:30px; text-align:center; color:#8a93a6; flex:none; }
.lb-row:nth-child(1) .lb-rank{ color:var(--poke-yellow); }
.lb-row:nth-child(2) .lb-rank{ color:#cdd6e6; }
.lb-row:nth-child(3) .lb-rank{ color:#cd7f32; }
.lb-name{ font-weight:700; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-name .you{ font-size:10px; font-weight:700; color:#1a1a1a; background:var(--poke-yellow); padding:1px 6px; border-radius:8px; margin-left:7px; }
.lb-meta{ font-size:12px; color:#8a93a6; flex:none; text-align:right; }
.lb-meta b{ color:#e6e9ef; }
.lb-prog{ flex:none; width:130px; }
.lb-prog .bar{ height:7px; }
.lb-prog .pct{ font-size:11px; color:#aab4c6; margin-bottom:3px; text-align:right; }
.hall{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.hall-card{ background:linear-gradient(160deg,#1c2233,#12161f); border:1px solid #3a4358; border-radius:12px; padding:12px 14px; }
.hall-card .ribbon{ font-size:10px; font-weight:800; letter-spacing:.6px; color:#1a1a1a; background:var(--poke-yellow); display:inline-block; padding:1px 8px; border-radius:8px; margin-bottom:8px; }
.hall-card .t{ font-weight:700; font-size:14px; }
.hall-card .u{ font-size:12px; color:#8a93a6; margin-top:3px; }
.comm-empty{ background:#10151e; border:1px dashed #2a3346; border-radius:12px; padding:20px; text-align:center; color:#8a93a6; font-size:13px; }
.comm-empty b{ color:var(--poke-yellow); }
.setpick{ background:#0e131c; border:1px solid #2a3346; border-radius:9px; color:#e6e9ef; font-size:13px; padding:7px 10px; margin-bottom:12px; max-width:340px; }

/* =====================================================================
   UI CLEANUP POLISH LAYER (uicleanup, 2026-06-21) — sleeker look,
   mobile tap-targets, overflow/clip safety. Additive + at the END so it
   cascades over everything and reverts cleanly (see style.css.bak.uicleanup).
   Refines the existing dark + Pokémon-accent theme; no redesign.
   ===================================================================== */

/* ---- 1. Sleek: consistent focus ring + smoother interactive feel ---- */
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible{
  outline:none; border-color:var(--poke-blue);
  box-shadow:0 0 0 2px rgba(139,92,246,.35);
}
button, .minibtn, .mkt-tab, .density-btn, .select-btn, .cond-chip,
.navseg, .mkt-tab, .lets-go, .qbtn{ -webkit-tap-highlight-color:transparent; }

/* gentle, uniform press feedback on the small pill/chip controls */
.minibtn:active, .mkt-tab:active, .density-btn:active, .select-btn:active,
.cond-chip:active, .navseg:active, .qbtn:active{ transform:scale(.96); }

/* ---- 2. Overflow safety: never let a pill/badge force a horizontal scrollbar,
        and gracefully ellipsize long single-line labels in tight columns ---- */
.setbar .sb-name, .lb-name, .mkt-card .nm, .feed-card .who,
.user-picker .uc-name{ max-width:100%; }
/* fixed-width numeric columns: keep them from being squeezed below content */
.setbar .sb-pct, .setbar .sb-count, .lb-meta{ flex-shrink:0; }
/* tags/pills that must not wrap should at least clip cleanly, not overflow */
.mkt-tag, .priv-tag, .pill, .dir, .bstat, .comm-stat .l, .qtybadge, .condbadge{
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
}

/* catbar (catalog-bar.js) is a horizontal scroller; add a subtle right-edge
   fade so it reads as "scroll for more" rather than an abrupt clip. */
#catbar{ position:relative;
  -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);
          mask-image:linear-gradient(90deg,#000 92%,transparent); }

/* ---- 3. Mobile (≤760px): comfortable tap targets (≥40px) + tighter rhythm ---- */
@media (max-width:760px){
  /* primary nav controls — the things people actually poke on a phone */
  .acct-link{ width:42px; height:42px; }
  .navburger{ width:42px; height:42px; }
  .drawer-close{ width:40px; height:40px; }
  .navswitch.seg-drawer .navseg{ min-height:42px; display:flex; align-items:center; justify-content:center; }
  .drawer-tabs a{ min-height:38px; display:flex; align-items:center; }
  .acct-item{ min-height:46px; }

  /* tappable pills / chips / toggles get a real hit area */
  .minibtn, .mkt-tab, .density-btn, .select-btn, .mkt-tab,
  .lets-go, .cond-chip{ min-height:40px; display:inline-flex; align-items:center; justify-content:center; }
  .qbtn{ width:40px; height:40px; }
  /* form controls comfortable to tap + 16px font avoids iOS auto-zoom */
  input, select, textarea, .setpick, .mkt-filters input, .mkt-filters select{
    min-height:42px; font-size:16px;
  }
  .mkt-filters{ gap:8px; }
  .mkt-filters input, .mkt-filters select{ flex:1 1 100%; }

  /* tighten page rhythm a touch on phones so content isn't cramped-yet-loose */
  .card{ padding:14px 15px; }
  .top{ margin-bottom:14px; }

  /* modals: hug the screen with breathing room (extends the 92vw pattern) */
  .sheet{ width:100%; max-width:92vw; padding:18px; border-radius:14px; }
}

/* ---- 4. Very small phones (≤400px): keep dense grids readable ---- */
@media (max-width:400px){
  .cards{ grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px; }
  .comm-stats{ grid-template-columns:1fr 1fr; }
  .bnr-badges{ justify-content:flex-start; }
}

/* =====================================================================
   NAV-COHESION QUICK WINS (navcohesion, 2026-07-01) — shared classes
   extracted from identical per-page <style> duplicates. Purely additive;
   pages keep their own sizing/border/aspect-ratio tweaks locally.
   ===================================================================== */

/* Owned-collection search pill (mycollection / my-ygo / my-magic / my-collectible).
   Same rounded 🔍-left / ✕-right pill as .catsearch, capped for list pages. */
.mcsearch{ position:relative; margin:0 0 12px; max-width:560px; }
.mcsearch input{ width:100%; box-sizing:border-box; padding:9px 40px 9px 40px; border-radius:24px;
  background:#0e131c; border:1px solid #2a3346; color:#e8f0f0; font-size:14px; outline:none; }
.mcsearch input:focus{ border-color:#8b5cf6; }
.mcsearch .mag{ position:absolute; left:15px; top:50%; transform:translateY(-50%); opacity:.6; pointer-events:none; }
.mcsearch .clr{ position:absolute; right:14px; top:50%; transform:translateY(-50%); cursor:pointer; opacity:.6;
  background:none; border:none; color:#e8f0f0; font-size:18px; line-height:1; }
.mcsearch .clr:hover{ opacity:1; }

/* Collectible card-tile grid — the rules identical across catalog.html / ygo.html /
   magic.html / my-collectible.html tiles. Scoped under .grid so the dashboard
   .card panels are untouched. */
.grid .card img{ width:100%; height:100%; object-fit:contain; display:block; }
.grid .card .noimg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:34px; opacity:.5; }
.grid .card .meta{ padding:6px 8px; }
.grid .card .meta .n{ font-size:11.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.grid .card .meta .s{ font-size:10px; color:#8a93a6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }

/* =====================================================================
   QUICK-WINS NAV (quickwins, 2026-07-01) — grouped drawer, gold active
   state, Scan pill, desktop "More", injected global search. Additive.
   ===================================================================== */

/* gold-accent active tab — the current destination glows grail-gold */
.navtabs a.active{ background:var(--panel); color:var(--gold);
  box-shadow:inset 0 -2px 0 var(--gold); }
.drawer-tabs a.active{ background:linear-gradient(90deg,rgba(139,92,246,.28),rgba(139,92,246,.10));
  color:var(--gold); box-shadow:inset 2px 0 0 var(--gold); }

/* 📷 Scan — the centerpiece action: violet pill, gold icon, hover glint */
.nav-scan{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:7px;
  background:linear-gradient(135deg,var(--violet),var(--violet2)) !important;
  color:#fff !important; border-radius:20px !important; padding:7px 16px !important;
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 2px 8px rgba(124,58,237,.35); }
.nav-scan svg{ color:var(--gold); flex:none; }
.nav-scan::after{ content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg); transition:left .45s ease; pointer-events:none; }
.nav-scan:hover::after{ left:120%; }
.nav-scan.active{ box-shadow:0 0 0 2px var(--gold) inset, 0 2px 8px rgba(124,58,237,.35); }
.drawer-tabs .nav-scan{ align-self:flex-start; margin:2px 0; }

/* desktop "More" — opens the drawer for everything beyond the key six */
.navmore{ display:inline-flex; align-items:center; gap:6px; flex:none; margin-left:auto;
  font-size:13px; font-weight:700; padding:7px 13px; border-radius:9px;
  border:1px solid var(--line); background:transparent; color:var(--gold); cursor:pointer; transition:.15s; }
.navmore:hover{ background:var(--panel); color:#fff; border-color:var(--violet); }

/* labeled drawer groups — small gold caps headers with a hairline */
.drawer-group{ margin:0 0 10px; }
.drawer-group + .drawer-group{ padding-top:10px; border-top:1px solid #1c2433; }
.drawer-glabel{ display:block; font-size:10px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); opacity:.85; padding:2px 12px 6px; }

/* 🔍 global-search affordance in the header cluster */
.acct-search{ border:none; background:transparent; cursor:pointer; font:inherit; }

/* ---- Global search (shared: dashboard inline box + injected overlay) ---- */
.gs-wrap{position:relative;max-width:760px;margin:14px auto 4px;padding:0 14px;}
.gs-input{width:100%;box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-radius:12px;color:var(--ink);font-size:15px;padding:13px 15px 13px 40px;outline:none;transition:.15s;}
.gs-input:focus{border-color:var(--violet);}
.gs-input::placeholder{color:#6b7588;}
.gs-ico{position:absolute;left:26px;top:50%;transform:translateY(-50%);color:#6b7588;font-size:16px;pointer-events:none;}
.gs-panel{position:absolute;left:14px;right:14px;top:100%;margin-top:6px;background:#10141c;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.55);max-height:62vh;overflow-y:auto;z-index:50;display:none;}
.gs-panel.show{display:block;}
.gs-head{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6b7588;padding:9px 14px 5px;}
.gs-row{display:flex;align-items:center;gap:11px;padding:8px 14px;text-decoration:none;color:var(--ink);border-top:1px solid rgba(255,255,255,.05);}
.gs-row:hover{background:#172033;}
.gs-thumb{width:30px;height:42px;flex:none;border-radius:4px;object-fit:contain;background:#fff;}
.gs-emoji{width:30px;height:42px;flex:none;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--panel);border-radius:6px;}
.gs-main{flex:1;min-width:0;}
.gs-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gs-sub{color:var(--mut);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gs-meta{color:#6b7588;font-size:11px;flex:none;}
.gs-empty{padding:14px;color:var(--mut);font-size:13px;text-align:center;}

/* overlay flavor of the same search — injected by nav.js/search.js on every page */
.gs-overlay{ align-items:flex-start !important; padding:8vh 16px 24px; }
.gs-overlay .gs-sheet{ width:100%; max-width:640px; margin:0 auto; }
.gs-overlay .gs-wrap{ margin:0; padding:0; max-width:none; }
.gs-overlay .gs-ico{ left:13px; }
.gs-overlay .gs-input{ border-color:var(--violet); box-shadow:0 0 0 3px rgba(139,92,246,.22), 0 18px 50px rgba(0,0,0,.6); }
.gs-overlay .gs-panel{ position:static; margin-top:8px; max-height:60vh; }
.gs-overlay .gs-hint{ text-align:center; color:#5a6478; font-size:11px; margin-top:10px; }
@media (max-width:760px){
  .gs-overlay{ padding:12px 10px; }
  .gs-overlay .gs-panel{ max-height:calc(100dvh - 120px); }
}