:root{
    color-scheme:dark;
    --bg:#0f0b1c;
    --bg-2:#150f27;
    --surface:#1b1532;
    --surface-2:#241c40;
    --surface-3:#2f2552;
    --line:#30275a;
    --line-2:#463a75;
    --text:#f2edfb;
    --text-dim:#bbb2d6;
    --text-faint:#8e84ad;
    --gold:#d8ad57;
    --gold-hi:#f1cf82;
    --gold-ink:#1d1407;
    --spell:#4cbba5;
    --trap:#e0679b;
    --focus:#f1cf82;
    --radius:12px;
    --page:#150f29;          /* the duel mat the tabs open onto */
    --stitch:rgba(216,173,87,.26);
    --num-stretch:112%;      /* Archivo widened for amounts */
    /* chart and status colors, checked against --surface: series 1 passes the dark-mode checks,
       good 5.1:1 and critical 3.6:1 (used for icons next to text, never as text color) */
    --series:#b58b3b;
    --grid:#2b2348;
    --good:#0ca30c;
    --bad:#d03b3b;
  }
  *{box-sizing:border-box}
  [hidden]{display:none !important}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;min-height:100vh;color:var(--text);
    font:14.5px/1.5 "Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    background:
      radial-gradient(1000px 440px at 78% -160px,rgba(216,173,87,.11),transparent 68%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .86 0 0 0 0 .7 0 0 0 0 .45 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
      var(--bg);
  }
  body.no-scroll{overflow:hidden}
  a{color:var(--gold-hi)}
  button,input,select,textarea{font:inherit;color:inherit}
  :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .num{text-align:right;font-variant-numeric:tabular-nums}

  .app{max-width:1400px;margin:0 auto;padding:0 max(clamp(16px,3vw,40px),env(safe-area-inset-right)) 120px max(clamp(16px,3vw,40px),env(safe-area-inset-left))}

  /* ---------- top bar ---------- */
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:max(22px,env(safe-area-inset-top)) 0 18px}
  .brand{min-width:0}
  .brand h1{margin:0;font:400 31px/1 "Cinzel",Georgia,serif;letter-spacing:.06em;color:#f6e7c8}
  .brand p{margin:7px 0 0;color:var(--text-dim);font-size:13px}
  .topbar-right{display:flex;align-items:center;gap:10px;flex:none}
  .data-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:999px;border:1px solid var(--line-2);background:rgba(0,0,0,.18);font-size:12.5px;color:var(--text-dim)}
  .data-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--spell)}
  .data-pill.warn .dot{background:var(--gold)}
  .data-pill.off .dot{background:var(--trap)}

  /* ---------- buttons & fields ---------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface-2);padding:9px 15px;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;color:var(--text)}
  .btn:hover{border-color:var(--gold)}
  .btn-primary{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
  .btn-primary:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
  .btn-danger{background:transparent;border-color:var(--trap);color:var(--trap)}
  .btn-danger:hover{background:rgba(224,103,155,.1);border-color:var(--trap)}
  .btn-small{padding:6px 11px;font-size:13px;border-radius:8px}
  .btn-quiet{background:transparent}
  #addBtn{padding:9px 16px 9px 13px;gap:7px;box-shadow:0 6px 18px rgba(216,173,87,.18)}
  .btn:disabled{opacity:.5;cursor:default}
  .link-btn{background:none;border:0;padding:0;color:var(--gold-hi);cursor:pointer;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
  .link-btn:hover{color:#fff}
  label.field{display:block}
  .field > span{display:block;font-size:12.5px;color:var(--text-dim);margin:0 0 5px}
  .input,select.input,textarea.input{color-scheme:dark;width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:8px;padding:9px 10px;font-size:14px}
  textarea.input{min-height:64px;resize:vertical}
  select.input,.select{appearance:none;-webkit-appearance:none;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23bbb2d6' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
  .select{background-color:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:8px 30px 8px 10px;font-size:13.5px;max-width:190px}
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .stack{display:grid;gap:12px}

  /* ---------- banners ---------- */
  .banners{display:grid;gap:10px;margin:0 0 18px}
  .banners:empty{display:none}
  .banner{border:1px solid var(--line-2);background:var(--surface);border-left:3px solid var(--gold);border-radius:10px;padding:14px 16px;font-size:14px}
  .banner strong{color:var(--gold-hi)}
  .banner ol{margin:8px 0 0;padding-left:20px}
  .banner li{margin:3px 0}
  .banner-actions{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:10px}

  /* ---------- summary ---------- */
  /* The hero: the collection's value on a stitched leather panel, with your most valuable cards fanned like a hand. */
  .summary{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,470px);gap:18px 40px;align-items:center;
    padding:30px 34px 26px;margin:0 0 6px;border-radius:20px;
    background:radial-gradient(420px 260px at 78% 62%,rgba(216,173,87,.16),transparent 70%),linear-gradient(180deg,#221a14,#1a140f);
    border:1px solid var(--line-2);outline:1px dashed var(--stitch);outline-offset:-8px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
  .hero-main{min-width:0}
  .value-label{color:var(--text-dim);font-size:13.5px}
  .value-number{font-size:clamp(42px,5.4vw,66px);font-weight:700;font-stretch:118%;line-height:1;letter-spacing:-.01em;margin-top:6px;font-variant-numeric:tabular-nums;color:#fbf3e6}
  .value-sub{color:var(--text-dim);font-size:13px;margin-top:8px}
  .value-sub:empty{display:none}
  .hero-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:20px}
  .value-mode button{padding:6px 12px;font-size:12.5px}
  .tile-price .gv,.cell-gv{font-size:10.5px;color:var(--text-dim);font-weight:500;margin-left:4px}
  .facts{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:18px}
  .fact b{display:block;font-size:18px;font-stretch:var(--num-stretch);font-variant-numeric:tabular-nums;font-weight:650}
  .fact > span{color:var(--text-dim);font-size:12.5px}
  .fact b .chg{font-weight:600}
  /* A gain or loss: the arrow carries the color, the words stay in normal text. */
  .chg{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}
  .chg-icon{font-size:.72em;line-height:1;position:relative;top:-.08em}
  .chg-icon.up{color:var(--good)}
  .chg-icon.down{color:var(--bad)}
  .chg-icon.flat{color:var(--text-faint)}

  /* ---------- tabs ---------- */
  /* Away from the Collection tab the showcase folds to one line, so each view starts near the top. */
  body:not([data-tab="collection"]) .summary{display:flex;align-items:baseline;gap:12px;padding:16px 26px;outline-offset:-6px}
  body:not([data-tab="collection"]) .hero-main{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
  body:not([data-tab="collection"]) .summary :is(.top-cards,.facts,.hero-foot,.value-sub,.value-basis){display:none}
  body:not([data-tab="collection"]) .value-number{font-size:28px;margin:0}
  /* Tabs are binder dividers; the open one joins the page below it. */
  .tabs{display:flex;gap:4px;margin:26px 0 0;padding:0 14px;border-bottom:1px solid var(--line-2);overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid transparent;border-bottom:0;border-radius:11px 11px 0 0;margin-bottom:-1px;
    padding:11px 18px 10px;font-weight:600;font-size:14.5px;color:var(--text-dim);cursor:pointer;white-space:nowrap}
  .tab:hover{color:var(--text);background:rgba(255,255,255,.025)}
  .tab[aria-selected="true"]{color:var(--text);background:var(--page);border-color:var(--line-2);box-shadow:inset 0 3px 0 -1px var(--gold)}
  .tab-icon,.tab-short{display:none}
  .tab-icon{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
  .tab-count{display:inline-block;min-width:22px;padding:0 7px;border-radius:999px;background:var(--surface-3);color:var(--text-dim);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;text-align:center}
  .tab-count:empty{display:none}
  [role="tabpanel"]{background:var(--page);border:1px solid var(--line-2);border-top:0;border-radius:0 0 18px 18px;padding:24px clamp(16px,2vw,26px) 28px}
  .panel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 20px;flex-wrap:wrap;margin:0 0 16px}
  .panel-head h2{margin:0;font:400 25px/1.2 "Cinzel",Georgia,serif;letter-spacing:.03em}
  .panel-head p{margin:4px 0 0;color:var(--text-dim);font-size:13.5px}
  .panel-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .top-cards{display:flex;flex-direction:column;align-items:center;justify-self:stretch;min-width:0}
  .top-cards-label{order:2;color:var(--text-dim);font-size:12.5px;margin-top:12px}
  .fan{--w:116px;position:relative;width:100%;height:calc(var(--w) * 1.46 + 34px)}
  .mini{position:absolute;left:50%;bottom:10px;width:var(--w);margin-left:calc(var(--w) / -2);background:none;border:0;padding:0;cursor:pointer;
    z-index:calc(10 - var(--rank));transform-origin:50% 135%;
    translate:calc(var(--slot) * var(--w) * var(--spread,.56)) calc(var(--slot) * var(--slot) * 5px);rotate:calc(var(--slot) * 7.5deg);transition:translate .2s ease}
  .mini:hover,.mini:focus-visible{translate:calc(var(--slot) * var(--w) * var(--spread,.56)) calc(var(--slot) * var(--slot) * 5px - 18px);z-index:20}
  .mini .sleeve{border-radius:7px;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 14px 26px rgba(0,0,0,.55)}
  /* a shop's price sticker */
  .mini em{position:absolute;left:calc(50% + clamp(-1, var(--slot), 1) * 23%);bottom:9px;translate:-50% 0;rotate:-3deg;z-index:2;font-style:normal;white-space:nowrap;
    background:#f6eedf;color:#2a1c0b;font-size:11.5px;font-weight:700;font-stretch:var(--num-stretch);font-variant-numeric:tabular-nums;
    padding:2px 7px;border-radius:3px;box-shadow:0 2px 6px rgba(0,0,0,.45)}

  /* ---------- controls ---------- */
  /* Search, filters, sort and view: two lines on a wide screen (the filter rows flow in with the search). */
  .controls{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center;margin-bottom:22px}
  .controls-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
  .filter-panel{display:contents}
  .controls-view{margin-left:auto}
  .controls-main{flex:1 1 320px;max-width:440px}
  .search-wrap{position:relative;flex:1 1 auto;display:flex;min-width:0}
  .search-icon{position:absolute;left:12px;top:50%;translate:0 -50%;color:var(--text-faint);pointer-events:none}
  .search{flex:1 1 240px;max-width:360px;background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:8px 11px;font-size:14px}
  .search-wrap .search{max-width:none;width:100%;padding:10px 12px 10px 36px;border-radius:10px;background:var(--bg-2)}
  .filters-btn{display:none}
  .filters-count{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;margin-left:2px;border-radius:999px;background:var(--gold);color:var(--gold-ink);font-size:11.5px;font-weight:700}
  .filters-count:empty{display:none}
  .seg button svg{display:block}
  .seg-label{display:none}
  #viewSeg button{display:inline-flex;align-items:center;gap:6px;padding:7px 11px}
  .select-btn[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
  .seg{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
  .seg button{background:var(--surface);border:0;padding:8px 13px;font-size:13.5px;cursor:pointer;color:var(--text-dim)}
  .seg button[aria-pressed="true"]{background:var(--surface-3);color:var(--text);font-weight:600}
  .spacer{flex:1}
  .shown{color:var(--text-dim);font-size:13px}
  .sort-label{color:var(--text-dim);font-size:13px}
  .sort-dir{gap:7px;min-width:132px;justify-content:flex-start}
  .sort-dir svg{flex:none;color:var(--gold-hi)}
  .th-sort{background:none;border:0;padding:0;font:inherit;font-weight:600;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
  .th-sort:hover{color:var(--text)}
  .th-sort.active{color:var(--gold-hi)}
  .th-arrow{font-size:9px}
  th.num .th-sort{flex-direction:row}
  .basis{display:inline-flex;align-items:center;gap:7px;color:var(--text-dim);font-size:13px}

  /* ---------- card image (sleeve) ---------- */
  .sleeve{display:block;position:relative;aspect-ratio:59/86;border-radius:6px;overflow:hidden;background:#0c0907;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 6px 14px rgba(0,0,0,.35)}
  .sleeve img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .sleeve.boxed{background:#f3efe8}
  .sleeve.boxed img{object-fit:contain}
  /* no photo at all: a drawn card with the name (or a box, for sealed products, with the set's top card inside) */
  .card-ph{position:absolute;inset:0;display:flex;flex-direction:column;gap:6%;padding:8% 8% 9%;text-align:center;color:#efe0c2;overflow:hidden;
    background:linear-gradient(165deg,#56391f 0%,#2e1e11 55%,#432c18 100%);border:3px solid #1d130a;border-radius:inherit;font:400 12px/1.2 "Cinzel",Georgia,serif}
  .ph-name{flex:none;padding:5px 6px;background:rgba(0,0,0,.32);border:1px solid rgba(241,207,130,.3);border-radius:2px;overflow:hidden;overflow-wrap:anywhere;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
  .ph-mark{flex:1;min-height:0;position:relative;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(241,207,130,.22);
    background:radial-gradient(circle at 50% 45%,rgba(216,173,87,.25),rgba(0,0,0,.28) 72%)}
  .ph-mark::before{content:"";width:38%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(241,207,130,.5);box-shadow:inset 0 0 0 6px rgba(241,207,130,.1)}
  .ph-mark:has(.ph-art)::before{display:none}
  .card-ph .ph-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
  .ph-sub{flex:none;font:600 10px/1.25 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.02em;color:#dcc59c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .boxed .card-ph{background:linear-gradient(180deg,#efe8db,#ddd2bf);color:#2b1e11;border:0;padding:9%}
  .boxed .ph-name{background:none;border:0;padding:0}
  .boxed .ph-mark{border:0;border-radius:4px;background:#2a2119;box-shadow:0 4px 10px rgba(0,0,0,.25)}
  .boxed .ph-sub{color:#5a4630}
  /* a photo of something close: the same card's other printing, a similar product from the same set */
  .sleeve:has(> img[data-stand])::after{content:"Similar photo";position:absolute;right:5px;top:5px;padding:3px 6px;border-radius:4px;background:rgba(14,10,7,.82);
    color:#f1e3c6;font:600 9.5px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.02em;pointer-events:none}
  /* small thumbnails: just the shape */
  :is(.c-thumb,.batch-row,.mover,.preview-table,.mv-row,.mini,.yugi-pick) .card-ph{padding:3px;gap:0;border-width:2px}
  :is(.c-thumb,.batch-row,.mover,.preview-table,.mv-row,.mini,.yugi-pick) :is(.ph-name,.ph-sub){display:none}
  :is(.c-thumb,.batch-row,.mover,.preview-table,.mv-row,.mini,.yugi-pick) .sleeve:has(> img[data-stand])::after{display:none}

  /* ---------- binder ---------- */
  .binder{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:18px}
  .tile{position:relative;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 10px 12px;display:flex;flex-direction:column}
  .tile:hover{border-color:var(--line-2);background:var(--surface-2)}
  .tile.is-selected{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
  .tile-art{position:relative;margin-bottom:8px}
  .tile-art .sleeve{cursor:pointer}
  .tile-open{display:flex;flex-direction:column;gap:2px;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:inherit}
  .tile-name{font-weight:600;font-size:13.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
  .tile-meta{font-size:12px;color:var(--text-dim);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tile-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;margin-top:8px}
  .badges{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
  .tile-price{font-weight:700;font-stretch:var(--num-stretch);font-variant-numeric:tabular-nums;font-size:14.5px;text-align:right}
  .tile-price small{display:block;font-weight:400;font-size:11.5px;color:var(--text-dim)}
  .tile-price.none{color:var(--text-faint);font-weight:400;font-size:12.5px}
  /* Checkbox and quantity sit on the card's text box, never over its name or artwork. */
  .tile-check{position:absolute;left:7px;bottom:7px;z-index:2;opacity:0;transition:opacity .12s;line-height:0}
  .tile:hover .tile-check,.tile:focus-within .tile-check,body.selecting .tile-check,.tile.is-selected .tile-check{opacity:1}
  @media (hover:none){.tile-check{opacity:0;pointer-events:none} body.select-mode .tile-check,body.selecting .tile-check,.tile.is-selected .tile-check{opacity:1;pointer-events:auto}}
  body.select-mode .tile-check{opacity:1}
  body.select-mode .tile-art .sleeve{cursor:copy}
  .tile-qty{position:absolute;right:7px;bottom:7px;z-index:2;background:rgba(20,16,13,.88);border:1px solid var(--gold);color:var(--gold-hi);font-weight:700;font-size:12.5px;padding:1px 8px;border-radius:999px;font-variant-numeric:tabular-nums}
  .ed{display:inline-block;font-size:11px;font-weight:600;padding:2px 7px;border-radius:5px;border:1px solid var(--line-2);color:var(--text-dim);white-space:nowrap}
  .ed-1st{border-color:rgba(216,173,87,.7);color:var(--gold-hi)}
  .ed-lim{border-color:#8a6a45;color:#d9b58a}
  /* (after .ed, so their colors show) */
  .ed-grade{border-color:rgba(243,234,223,.45);color:var(--text)}
  .ed-extra{border-color:rgba(76,187,165,.65);color:var(--spell)}
  .ed-sealed{border-color:rgba(160,140,220,.6);color:#c9bdf0}
  .ed-rush{border-color:rgba(232,128,86,.65);color:#f2a582}
  .ed-sell{border-color:rgba(226,124,168,.6);color:#f0a9c8}
  .ed-of{border-color:rgba(120,190,240,.6);color:#9fd0f5}
  /* An add form: what you already have of the card, by place */
  .owned-where{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 14px;font-size:13.5px;color:var(--text-dim)}
  .owned-where b{color:var(--text)}
  .owned-where .chip{padding:3px 10px;font-size:12.5px}
  /* Add manually: a sealed product hides the card-only fields */
  #manualForm .m-sealed-word{display:none}
  #manualForm.m-sealed .m-card,#manualForm.m-sealed .m-card-word{display:none}
  #manualForm.m-sealed .m-sealed-word{display:inline}
  #manualForm.m-sealed p.m-sealed-word{display:block}
  .ed-mg{border-color:rgba(190,170,230,.6);color:#cdbff0}
  .tag-new{border-color:rgba(76,187,165,.65);color:var(--spell)}
  .preview-table .ed{margin-left:6px;vertical-align:1px}
  .preview-table td:nth-child(n+4){white-space:nowrap}

  .check{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;border-radius:6px;border:1.5px solid rgba(243,234,223,.8);background:rgba(20,16,13,.78);cursor:pointer;display:grid;place-items:center;vertical-align:middle}
  .check:checked,.check:indeterminate{background:var(--gold);border-color:var(--gold)}
  .check:checked::after{content:"";width:6px;height:11px;border:solid var(--gold-ink);border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
  .check:indeterminate::after{content:"";width:10px;height:2.5px;background:var(--gold-ink)}

  /* ---------- list ---------- */
  .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
  .table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:900px}
  .table th{font-weight:600;color:var(--text-dim);text-align:left;font-size:12.5px;padding:10px;border-bottom:1px solid var(--line);white-space:nowrap}
  .table td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
  .table tr:last-child td{border-bottom:0}
  .table tbody tr{cursor:pointer}
  .table tbody tr:hover{background:var(--surface-2)}
  .table tbody tr.is-selected{background:rgba(216,173,87,.08)}
  .c-check{width:44px}
  .c-thumb{width:52px}
  .c-thumb .sleeve{width:36px;border-radius:3px;box-shadow:none}
  .cell-name{font-weight:600;background:none;border:0;padding:0;color:inherit;cursor:pointer;text-align:left}
  .cell-sub{display:block;color:var(--text-dim);font-size:12px}

  /* ---------- empty state ---------- */
  .empty{border:1px dashed var(--line-2);border-radius:var(--radius);padding:44px 24px;text-align:center;color:var(--text-dim)}
  .empty h2{margin:0 0 6px;color:var(--text);font:400 24px/1.2 "Cinzel",Georgia,serif}
  .empty p{margin:0 auto 18px;max-width:52ch}
  .empty .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

  /* ---------- bulk bar ---------- */
  .bulkbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface-3);border:1px solid var(--gold);border-radius:12px;padding:9px 12px 9px 16px;box-shadow:0 14px 40px rgba(0,0,0,.55);max-width:calc(100vw - 24px)}
  .bulkbar b{font-variant-numeric:tabular-nums}

  /* ---------- drawer & modal ---------- */
  .scrim{position:fixed;inset:0;background:rgba(8,6,4,.62);z-index:50}
  /* on the way to Google and straight back (renewing the Drive sign-in) */
  .leaving{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(20,16,13,.86);color:var(--text);font-size:15px;letter-spacing:.01em;animation:fade-in .25s ease-out}
  @keyframes fade-in{from{opacity:0}}
  .drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw);z-index:60;background:var(--surface);border-left:1px solid var(--line-2);display:flex;flex-direction:column;box-shadow:-20px 0 50px rgba(0,0,0,.45);animation:slide-in .18s ease-out}
  @keyframes slide-in{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
  .drawer-head,.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
  .drawer-head h2,.modal-head h2{margin:0;font:400 21px/1.2 "Cinzel",Georgia,serif}
  .icon-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface-2);cursor:pointer;font-size:19px;line-height:1;display:grid;place-items:center}
  .icon-btn:hover{border-color:var(--gold)}
  .drawer-body{padding:18px 20px 28px;overflow-y:auto;flex:1}
  .modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(880px,calc(100vw - 24px));max-height:calc(100vh - 32px);z-index:60;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.6)}
  .modal-body{padding:16px 20px;overflow-y:auto}
  .modal-foot{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--line)}
  @media (prefers-reduced-motion:reduce){.drawer{animation:none}.tile-check{transition:none}}

  .hint{color:var(--text-dim);font-size:12.5px;margin:6px 0 0}
  .lookup-row{display:flex;gap:8px}
  .lookup-row .input{flex:1;text-transform:uppercase}
  .lookup-alt{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0 4px;font-size:13.5px}
  .notice{border:1px solid var(--line-2);background:var(--bg-2);border-radius:10px;padding:12px 14px;margin:14px 0 0;font-size:13.5px;color:var(--text-dim)}
  .notice strong{color:var(--text)}
  .notice .btn{margin-top:10px}
  .results-head{margin:18px 0 10px;color:var(--text-dim);font-size:13px}
  .results{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px}
  .result{display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px;cursor:pointer}
  .result:hover{border-color:var(--gold)}
  .result .sleeve{margin-bottom:7px}
  .result-name{font-weight:600;font-size:13px;line-height:1.3}
  .result-meta{font-size:11.5px;color:var(--text-dim);line-height:1.35}
  .result-price{font-size:12px;color:var(--gold-hi);margin-top:3px;font-variant-numeric:tabular-nums}

  .site-only{display:none}
  html.site .site-only{display:inline}
  html.site .btn.site-only{display:inline-flex}
  html.site .site-only[hidden]{display:none}
  html.site .local-only,html.site #phoneBtn{display:none}
  .picked{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start;margin-bottom:18px}
  .drawer.wide{width:min(800px,100vw)}
  textarea.batch-text{min-height:74px;font:13.5px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}
  .batch-list{display:flex;flex-direction:column;gap:8px;margin:16px 0 0}
  .batch-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto 74px 32px;grid-template-areas:"img info ctl price x";gap:8px 10px;align-items:center;
    padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
  .b-ctl{grid-area:ctl;display:grid;grid-template-columns:128px 146px 60px;grid-template-areas:"ed cond qty";gap:8px}
  .batch-row.need{border-color:rgba(216,173,87,.6)}
  .batch-row.bad{border-color:rgba(208,59,59,.6)}
  .batch-row > .sleeve,.batch-blank{grid-area:img;width:38px;border-radius:3px;box-shadow:none}
  .batch-blank{aspect-ratio:59/86;border:1px dashed var(--line-2);display:block}
  .batch-info{grid-area:info;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;font-size:13px}
  .batch-info b{font-size:13.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .batch-info span{color:var(--text-dim);font-size:12px;line-height:1.35}
  .batch-row.has-pick{grid-template-areas:"img info ctl price x" "img pick pick price x"}
  .batch-row .b-pick{grid-area:pick}
  .batch-row.need .b-pick{border-color:var(--gold)}
  .batch-row .input{padding:6px 8px;font-size:13px}
  .batch-row select.input{padding-right:24px;background-position:right 8px center}
  .batch-row .b-ed{grid-area:ed}.batch-row .b-cond{grid-area:cond}.batch-row .b-qty{grid-area:qty}
  .batch-price{grid-area:price;text-align:right;font-variant-numeric:tabular-nums;font-size:13px;color:var(--gold-hi)}
  .batch-row .b-x{grid-area:x;width:30px;height:30px;font-size:17px}
  .batch-totals{margin:12px 0 0;font-size:13.5px;color:var(--text-dim)}
  .batch-totals b{color:var(--text);font-variant-numeric:tabular-nums}
  .batch-common{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
  .batch-common h3{margin:0 0 10px;font-size:13.5px}
  .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  @media (max-width:700px){
    .batch-row{grid-template-columns:38px minmax(0,1fr) auto 32px;grid-template-areas:"img info price x" "ctl ctl ctl ctl"}
    .batch-row.has-pick{grid-template-areas:"img info price x" "pick pick pick pick" "ctl ctl ctl ctl"}
    .b-ctl{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 60px}
    .grid-3{grid-template-columns:1fr}
  }
  .picked h3{margin:0 0 4px;font-size:17px;line-height:1.25}
  .other-copies{margin:8px 0 0;text-align:center;color:var(--text-dim);font-size:13px;line-height:1.6}
  .loc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:-4px}
  .loc-chip{border:1px solid var(--line-2);background:var(--surface-2);color:var(--text);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}
  .loc-chip:hover{border-color:var(--gold)}
  .loc-chip.on{border-color:var(--gold);color:var(--gold-hi);background:var(--bg-2)}
  .mv-list{display:flex;flex-direction:column;gap:8px}
  .mv-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;grid-template-areas:"img info step";gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
  .mv-row > .sleeve{grid-area:img;width:38px;border-radius:3px;box-shadow:none}
  .mv-row .stepper{grid-area:step}
  .mv-row .mv-where{color:var(--gold-hi)}
  .mv-row.here{opacity:.55}
  .mv-row.here .stepper{visibility:hidden}
  .stepper{display:flex;align-items:center;gap:4px}
  .stepper .input{width:50px;text-align:center;padding:6px 2px;font-size:15px;-moz-appearance:textfield}
  .stepper .input::-webkit-inner-spin-button,.stepper .input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
  .stepper .icon-btn{width:32px;height:32px;font-size:18px}
  .stepper small{color:var(--text-dim);font-size:12px;margin-left:3px;white-space:nowrap}
  .mv-total{margin:0;font-size:13.5px;color:var(--text-dim)}
  .mv-total b{color:var(--text)}
  @media (max-width:480px){ .mv-row{grid-template-columns:38px minmax(0,1fr);grid-template-areas:"img info" "step step"} .mv-row .stepper{justify-content:flex-end} }
  .picked p{margin:0;color:var(--text-dim);font-size:13px}
  .price-line{margin:2px 0 14px;padding:10px 12px;border-radius:9px;background:var(--bg-2);border:1px solid var(--line);font-size:13.5px}
  .price-line b{color:var(--gold-hi);font-variant-numeric:tabular-nums}
  .form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

  .detail-img{display:block;width:min(270px,70%);margin:0 auto 16px}
  .detail-title{margin:0;font-size:20px;line-height:1.25;text-align:center}
  .detail-sub{margin:4px 0 0;text-align:center;color:var(--text-dim);font-size:13.5px}
  .links{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;margin:12px 0 18px;font-size:13px}
  .section{border-top:1px solid var(--line);padding-top:14px;margin-top:16px}
  .section h3{margin:0 0 10px;font-size:14.5px}
  .price-table{width:100%;border-collapse:collapse;font-size:13.5px}
  .price-table th,.price-table td{padding:6px 4px;border-bottom:1px solid var(--line);text-align:left}
  .price-table th{color:var(--text-dim);font-weight:500;font-size:12.5px}
  .price-table tr.mine td{color:var(--gold-hi);font-weight:600}
  .price-table td.num,.price-table th.num{text-align:right}
  .small{font-size:12.5px;color:var(--text-dim)}
  details.more summary{cursor:pointer;color:var(--text-dim);font-size:13px;margin-top:14px}

  .price-yours{margin:10px 0 0;font-size:13.5px}
  .price-yours b{color:var(--gold-hi);font-variant-numeric:tabular-nums}
  .changes{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 0;font-size:13px;color:var(--text-dim)}
  .changes .chg{color:var(--text)}
  fieldset.plain{border:0;padding:0;margin:0;min-width:0}
  fieldset.plain legend{padding:0;margin:0 0 8px;font-size:13px;color:var(--text-dim)}
  .btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

  /* ---------- settings ---------- */
  .section.first{border-top:0;padding-top:0;margin-top:0}
  .status-line{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:9px;background:var(--bg-2);border:1px solid var(--line);font-size:13.5px}
  .status-line .dot{flex:none;width:9px;height:9px;border-radius:50%;margin-top:6px;background:var(--text-faint)}
  .status-line.on .dot{background:var(--good)}
  .status-line.warn .dot{background:var(--gold)}
  .status-line.off .dot{background:var(--bad)}
  .check-row{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;cursor:pointer;font-size:14px}
  .cond-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;margin-top:12px}
  .pct{display:flex;align-items:center;gap:6px}
  .pct .input{width:80px}
  .kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:8px 0 0;font-size:13px}
  .kv dt{color:var(--text-dim)}
  .kv dd{margin:0;font-variant-numeric:tabular-nums}

  /* ---------- price history ---------- */
  .hist-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap;margin-bottom:16px}
  .hist-value{font-size:clamp(30px,4.4vw,40px);font-weight:700;line-height:1.1;letter-spacing:-.4px}
  .hist-value .chg-icon{font-size:.55em;top:-.2em}
  .hist-change{font-size:15px;margin-top:6px}
  .hist-note{color:var(--text-dim);font-size:12.5px;margin-top:3px}
  .seg button:disabled{opacity:.45;cursor:default}
  .box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
  .box-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
  .box-head h3{margin:0;font-size:15px}
  .chart{position:relative}
  .chart svg{display:block;width:100%;height:auto;overflow:visible}
  .chart:focus{outline:none}
  .chart:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:6px}
  .chart .tick{fill:var(--text-faint);font-size:11.5px;font-variant-numeric:tabular-nums}
  .chart .c-grid{stroke:var(--grid);stroke-width:1;shape-rendering:crispEdges}
  .chart .c-base{stroke:var(--line-2);stroke-width:1;shape-rendering:crispEdges}
  .chart .c-area{fill:var(--series);fill-opacity:.1;stroke:none}
  .chart .c-line{fill:none;stroke:var(--series);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
  .chart .c-dot{fill:var(--series);stroke:var(--surface);stroke-width:2}
  .chart .c-cross{stroke:var(--line-2);stroke-width:1}
  .chart .c-hit{fill:transparent;cursor:crosshair}
  .chart-tip{position:absolute;z-index:3;pointer-events:none;background:var(--surface-3);border:1px solid var(--line-2);border-radius:8px;padding:7px 10px;font-size:12.5px;line-height:1.45;box-shadow:0 8px 22px rgba(0,0,0,.45);white-space:nowrap}
  .chart-tip b{font-size:14px;font-variant-numeric:tabular-nums}
  .chart-tip span{display:block;color:var(--text-dim)}
  .chart-empty{padding:26px 8px;color:var(--text-dim);font-size:13.5px;text-align:center}
  .data-table{width:100%;border-collapse:collapse;font-size:13.5px}
  .data-table th,.data-table td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left}
  .data-table th{color:var(--text-dim);font-weight:500;font-size:12.5px}
  .data-table .num{text-align:right}
  .movers{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
  .movers h3{margin:0 0 4px;font-size:15px}
  .mover-list{list-style:none;margin:0;padding:0}
  .mover{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;padding:9px 0;border:0;border-top:1px solid var(--line);background:none;text-align:left;cursor:pointer;color:inherit}
  .mover:first-child{border-top:0}
  .mover:hover .mover-name{color:var(--gold-hi)}
  .mover .sleeve{width:34px;border-radius:3px;box-shadow:none}
  .mover-name{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mover-sub{display:block;color:var(--text-dim);font-size:12px;line-height:1.4}
  .mover-amt{text-align:right;font-size:13.5px;font-variant-numeric:tabular-nums}
  .mover-amt small{display:block;color:var(--text-dim);font-size:12px}

  /* ---------- sets ---------- */
  .set-row{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px}
  .set-toggle{width:100%;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(170px,1fr) minmax(120px,auto) 16px;gap:10px 18px;align-items:center;background:none;border:0;padding:13px 16px;text-align:left;cursor:pointer;color:inherit;border-radius:var(--radius)}
  .set-toggle:hover .set-name{color:var(--gold-hi)}
  .set-name{font-weight:600;font-size:14.5px;display:block}
  .set-sub{display:block;color:var(--text-dim);font-size:12.5px}
  .progress{display:block;height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden}
  .progress > span{display:block;height:100%;min-width:2px;border-radius:999px;background:var(--series)}
  .set-count{display:block;font-size:12.5px;color:var(--text-dim);margin-top:5px;font-variant-numeric:tabular-nums}
  .set-count b{color:var(--text);font-weight:600}
  .set-cost{text-align:right;font-size:13.5px;font-variant-numeric:tabular-nums}
  .set-cost small{display:block;color:var(--text-dim);font-size:12px}
  .caret{width:10px;height:10px;border-right:2px solid var(--text-dim);border-bottom:2px solid var(--text-dim);transform:rotate(45deg);margin-top:-5px;transition:transform .15s}
  .set-toggle[aria-expanded="true"] .caret{transform:rotate(225deg);margin-top:4px}
  .set-body{padding:4px 16px 16px;border-top:1px solid var(--line)}
  .mk-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
  .mk-tools{justify-content:flex-end}
  @media (max-width:640px){
    .mk-tools{width:100%;justify-content:flex-start}
    .mk-tools .seg{width:100%}
    .mk-tools .seg button{flex:1 1 0;min-width:0}
  }
  .mk-filters .search{flex:1 1 220px;max-width:360px}
  .mk-row .set-toggle{grid-template-columns:minmax(0,1.4fr) minmax(0,1.2fr) minmax(110px,auto) 16px}
  .mk-top{min-width:0;font-size:13px;color:var(--text-dim);line-height:1.35}
  .mk-top b{color:var(--text);font-weight:600}
  .mk-top .gold{color:var(--gold-hi);font-weight:700}
  .mk-line{display:inline-block;font-size:11px;font-weight:600;padding:1px 7px;border-radius:5px;border:1px solid var(--line-2);color:var(--text-dim);margin-left:6px;vertical-align:1px;white-space:nowrap}
  .mk-rank{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.72);color:#fff;font-size:11.5px;font-weight:700;padding:1px 7px;border-radius:999px;z-index:1}
  .mk-prices{display:grid;grid-template-columns:auto 1fr;gap:1px 8px;font-size:12px;margin-top:4px;font-variant-numeric:tabular-nums}
  .mk-prices dt{color:var(--text-dim)}
  .mk-prices dd{margin:0;text-align:right;color:var(--text)}
  .mk-prices dd.low{color:var(--gold-hi);font-weight:700}
  .mk-deal{display:inline-block;font-size:11px;font-weight:700;padding:1px 6px;border-radius:5px;background:rgba(110,207,154,.14);color:#8fe0b4;border:1px solid rgba(110,207,154,.4);margin-top:4px}
  .mk-stores{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;margin-top:6px}
  .mk-warn{display:inline-block;font-size:11px;font-weight:600;padding:1px 6px;border-radius:5px;border:1px solid rgba(216,173,87,.5);color:var(--gold-hi);margin-top:4px}
  .mk-h{margin:16px 0 8px;font-size:14px}
  .mk-more{display:flex;justify-content:center;margin:14px 0 4px}
  @media (max-width:760px){ .mk-row .set-toggle{grid-template-columns:minmax(0,1fr) auto 16px} .mk-row .mk-top{grid-column:1 / 3;grid-row:2} }
  .set-body .results{margin-top:12px}
  .result-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
  .result-actions .btn{padding:4px 9px;font-size:12.5px}
  .result.static{cursor:default}
  .result.static:hover{border-color:var(--line)}
  .on-list{font-size:12px;color:var(--text-dim);align-self:center}

  /* ---------- want list ---------- */
  .status{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
  .status-icon{font-size:.8em}
  .status-icon.good{color:var(--good)}
  .want-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
  .table.want-table{min-width:820px}
  .table.want-table tbody tr{cursor:default}
  .table.want-table tr.hit{background:rgba(12,163,12,.06)}
  .want-view{margin:0 0 4px;max-width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
  .want-view .seg{max-width:100%}
  .want-sort{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
  .want-sort .select{min-width:0}
  .want-view .seg button{display:inline-flex;align-items:center}
  /* (the sections' columns line up) */
  @media (min-width:701px){
    .table.want-table{table-layout:fixed;min-width:960px}
    .want-table th:nth-child(1){width:56px}
    .want-table th:nth-child(3){width:130px}
    .want-table th:nth-child(4),.want-table th:nth-child(5){width:108px}
    .want-table th:nth-child(6){width:168px}
    .want-table th:nth-child(7){width:244px}
  }
  @media (max-width:700px){
    .want-view .seg{display:flex;width:100%}
    .want-view .seg button{flex:1 1 auto;justify-content:center;padding:8px 6px;font-size:13px}
    .want-view .seg .tab-count{min-width:18px;padding:0 5px;margin-left:5px}
    .want-view .long{display:none}
    .want-sort{margin-left:0;width:100%}
    .want-sort .select{flex:1 1 auto}
  }
  @media (max-width:380px){ .want-view .seg .tab-count{display:none} }
  @media (min-width:701px){ .want-view .short{display:none} }
  .want-group + .want-group{margin-top:24px}
  .want-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:14px 0 8px;font-family:"Cinzel",Georgia,serif;font-size:17px;font-weight:700;letter-spacing:.03em;color:#f6e6c4}
  .want-h .small{font:400 12.5px/1.4 "Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:0}
  @media (max-width:700px){
    .table.want-table{min-width:0}
    .want-table thead{display:none}
    .want-table,.want-table tbody{display:block}
    .want-table tr{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;row-gap:3px;padding:12px;border-bottom:1px solid var(--line)}
    .want-table tr:last-child{border-bottom:0}
    .want-table td{display:block;padding:0;border:0}
    .want-table td.c-thumb{grid-row:1 / span 6;width:auto}
    .want-table td.num{text-align:left}
    .want-table td[data-label]::before{content:attr(data-label) ": ";color:var(--text-dim)}
    .want-table td[data-empty]{display:none}
    .want-actions{justify-content:flex-start;margin-top:8px}
  }

  /* ---------- photo finder (Yugipedia) ---------- */
  .yugi{margin-top:10px}
  .yugi-head{margin:12px 0 8px;color:var(--text-dim);font-size:12.5px}
  .yugi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
  .yugi-pick{display:flex;flex-direction:column;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:6px;cursor:pointer;text-align:left;font-size:11.5px;color:var(--text-dim);line-height:1.3}
  .yugi-pick:hover{border-color:var(--gold)}
  .yugi-pick[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);color:var(--text)}
  .yugi-pick .sleeve{box-shadow:none;border-radius:4px}

  /* ---------- export menu ---------- */
  .menu-wrap{position:relative;display:inline-block}
  #exportMenuBtn svg{margin-left:2px}
  .menu{position:absolute;right:0;top:calc(100% + 6px);z-index:35;width:320px;background:var(--surface-3);border:1px solid var(--line-2);border-radius:11px;padding:6px;box-shadow:0 16px 40px rgba(0,0,0,.55)}
  .menu [role=menuitem]{display:block;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:9px 11px;cursor:pointer;color:var(--text);font-weight:600;font-size:14px}
  .menu [role=menuitem] small{display:block;font-weight:400;color:var(--text-dim);font-size:12.5px;margin-top:2px;line-height:1.35}
  .menu [role=menuitem]:hover,.menu [role=menuitem]:focus{background:var(--surface-2);outline:none}
  .menu [role=menuitem]:focus-visible{box-shadow:inset 0 0 0 2px var(--focus)}
  @media (max-width:560px){.menu{position:fixed;left:16px;right:16px;top:auto;bottom:16px;width:auto}}

  /* ---------- deck check ---------- */
  .deck-grid{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:16px;align-items:start}
  textarea.deck-text{min-height:280px;font:13px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:none}
  .saved-decks{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .saved-decks p{flex-basis:100%}
  .deck-chip{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;background:var(--surface-2);overflow:hidden}
  .deck-chip.on{border-color:var(--gold)}
  .deck-chip button{background:none;border:0;color:var(--text);cursor:pointer;padding:5px 4px 5px 12px;font-size:13px;font-weight:600}
  .deck-chip .x{padding:5px 10px 5px 6px;color:var(--text-dim);font-size:16px;line-height:1}
  .deck-chip .x:hover{color:var(--text)}
  .deck-sum{margin:0;padding:0 0 0 18px}
  .idea{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px}
  .idea-toggle{width:100%;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(170px,1fr) minmax(110px,auto) 16px;gap:10px 18px;align-items:center;background:none;border:0;padding:13px 16px;text-align:left;cursor:pointer;color:inherit;border-radius:var(--radius)}
  .idea-name{font-weight:700;font-size:15px}
  .idea-sub{display:block;color:var(--text-dim);font-size:12.5px;margin-top:2px}
  .idea-body{padding:4px 16px 16px;border-top:1px solid var(--line)}
  .idea-cards{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
  .idea-chip{font-size:12.5px;border:1px solid var(--line-2);border-radius:999px;padding:3px 10px;background:var(--surface-2)}
  .idea-chip.extra{border-color:rgba(160,140,220,.55)}
  .idea-chip.support{border-style:dashed}
  .idea-miss{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
  .idea-miss td{padding:6px 4px;border-bottom:1px solid var(--line)}
  .idea-miss td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  .idea-h{margin:14px 0 4px;font-size:13.5px}
  @media (max-width:760px){ .idea-toggle{grid-template-columns:minmax(0,1fr) auto 16px} .idea-toggle .set-prog{grid-column:1 / 3;grid-row:2} }
  .deck-sum li{margin:2px 0}
  .deck-table{margin-top:14px;padding:4px 12px 8px}
  .deck-table caption{text-align:left;font-weight:600;padding:8px 0 4px;color:var(--text)}
  .deck-table tr.short td:first-child{font-weight:600}

  /* ---------- sales ---------- */
  .sales-facts{margin:0 0 16px;gap:10px 32px}
  .table.sales-table{min-width:880px}
  .table.sales-table tbody tr{cursor:default}
  @media (max-width:700px){
    .table.stack-table{min-width:0}
    .stack-table thead{display:none}
    .stack-table,.stack-table tbody{display:block}
    .stack-table tr{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;row-gap:3px;padding:12px;border-bottom:1px solid var(--line)}
    .stack-table tr:last-child{border-bottom:0}
    .stack-table td{display:block;padding:0;border:0}
    .stack-table td.c-thumb{grid-row:1 / span 9;width:auto}
    .stack-table td.num{text-align:left}
    .stack-table td[data-label]::before{content:attr(data-label) ": ";color:var(--text-dim)}
    .stack-table td[data-empty]{display:none}
    .stack-table.wg-table td.c-pick{order:20;grid-column:2}
    .stack-table.gp-cards tr,.stack-table.gp-compare tr,.stack-table.ban-table tr,.stack-table.rp-table tr,.stack-table.gr-cos tr{grid-template-columns:minmax(0,1fr)}
  }

  /* ---------- card search ---------- */
  .cs-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
  .cs-bar .search{flex:1 1 320px;max-width:560px;font-size:15px;padding:10px 13px}
  .cs-start{max-width:760px;color:var(--text-dim)}
  .cs-start > p:first-child{margin-top:0}
  .cs-chips-h{margin:16px 0 6px;font-size:12.5px;color:var(--text-dim)}
  .cs-chips{display:flex;flex-wrap:wrap;gap:6px}
  .chip{background:var(--surface);border:1px solid var(--line-2);border-radius:999px;padding:5px 12px;font-size:13px;color:var(--text);cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chip:hover{border-color:var(--gold);color:#fff}
  .cs-card .cs-toggle{grid-template-columns:44px minmax(0,1fr) auto 16px}
  .cs-thumb{width:44px;border-radius:3px}
  .cs-name{display:block;font-family:"Cinzel",Georgia,serif;font-weight:700;font-size:15px;letter-spacing:.02em;line-height:1.3}
  .cs-toggle:hover .cs-name{color:var(--gold-hi)}
  .cs-sub{display:block;color:var(--text-dim);font-size:12.5px;margin-top:2px}
  .cs-own{display:inline-block;margin-left:6px;font-size:11px;font-weight:600;line-height:1.5;padding:0 6px;border-radius:5px;border:1px solid rgba(216,173,87,.45);color:var(--gold-hi);white-space:nowrap}
  .cs-prices{display:flex;gap:20px;text-align:right}
  .cs-price small{display:block;color:var(--text-dim);font-size:11.5px}
  .cs-price b{font-size:15px;font-variant-numeric:tabular-nums}
  .cs-price.top b{color:var(--gold-hi)}
  .cs-price b.none{font-size:13px;color:var(--text-dim);font-weight:400}
  .table.cs-table{min-width:760px}
  .table.cs-table tbody tr{cursor:default}
  .table.cs-ocg{min-width:560px}
  .cs-table td.num b.gold{color:var(--gold-hi)}
  .cs-table .cell-name{display:block;max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .cs-body .table-wrap{margin-top:12px}
  .cs-all{margin:8px 0 0}
  .cs-links{justify-content:flex-start;margin:12px 0 0}
  .cs-hint{margin-top:14px}
  .cs-mine{list-style:none;margin:0 0 10px;padding:0}
  .cs-mine li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line)}
  .cs-mine li:first-child{border-top:0}
  .caret.go{transform:rotate(-45deg);margin-top:0}
  .cs-setchips{align-items:center;margin:0 0 12px}
  .cs-setchips > .small{margin-right:2px}
  .cs-back{margin:0 0 6px}
  .cs-set-title{margin:0;font-family:"Cinzel",Georgia,serif;font-size:21px;font-weight:700;letter-spacing:.03em;color:#f6e6c4}
  .cs-set-sub{margin:4px 0 0;color:var(--text-dim);font-size:13px}
  .cs-set-facts{display:flex;flex-wrap:wrap;gap:12px 28px;margin:14px 0 16px}
  .cs-fact{display:flex;flex-direction:column;gap:2px;min-width:0}
  .cs-fact b{font-size:18px;font-variant-numeric:tabular-nums}
  .cs-fact b.gold{color:var(--gold-hi)}
  .cs-fact .progress{width:140px;margin-top:4px}
  .cs-fact a,.cs-fact .link-btn{font-size:12.5px;text-align:left}
  .cs-set-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 12px}
  .cs-set-tools .search{flex:1 1 200px;max-width:320px}
  .table.cs-settable{min-width:700px}
  .cs-settable td:nth-child(2){white-space:nowrap;font-variant-numeric:tabular-nums}
  .cs-ed{color:var(--text-dim);font-size:12px}
  .cs-settable tr.cs-have{background:rgba(216,173,87,.05)}
  @media (max-width:700px){
    .table.cs-table{min-width:0}
    .cs-ocg tr{grid-template-columns:minmax(0,1fr)}
  }
  @media (max-width:640px){
    .cs-bar .search{max-width:none;flex-basis:100%}
    .cs-bar #csMode{display:flex;flex:1 1 100%}
    .cs-bar #csMode button{flex:1 1 0}
    .cs-set-tools .search{max-width:none;flex-basis:100%}
    .cs-set-tools .select{flex:1 1 30%;min-width:0}
    .cs-set-facts{gap:12px 22px}
    .cs-bar .select{flex:1 1 auto}
    .cs-card .cs-toggle{grid-template-columns:40px minmax(0,1fr) 16px;padding:12px}
    .cs-thumb{width:40px;grid-row:1 / span 2}
    .cs-prices{grid-column:2;grid-row:2;justify-content:flex-start;text-align:left;gap:16px}
    .cs-card .caret{grid-column:3;grid-row:1 / span 2}
    .cs-body{padding:4px 10px 14px}
  }

  /* ---------- set goals ---------- */
  .goals{margin:0 0 18px}
  .goals-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 10px}
  .goal-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
  .goal-list{align-items:start}
  .goal{background:linear-gradient(180deg,#1f1839,#1a1431);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px 12px;display:flex;flex-direction:column;gap:8px;min-width:0}
  .goal.done{border-color:rgba(216,173,87,.55);box-shadow:0 0 0 1px rgba(216,173,87,.2) inset}
  .goal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:none;border:0;padding:2px 0;color:inherit;text-align:left;cursor:pointer}
  .goal-name{color:#f6e6c4;font:700 15px/1.3 "Cinzel",Georgia,serif;letter-spacing:.02em;min-width:0}
  .goal-head:hover .goal-name{color:var(--gold-hi)}
  .goal-head .caret{flex:none;margin-right:4px}
  .goal-head[aria-expanded="true"] .caret{transform:rotate(225deg);margin-top:4px}
  .goal-check{color:var(--gold-hi);font-family:"Archivo",system-ui,sans-serif;font-size:13px}
  .goal .progress{width:100%}
  .goal-more{display:flex;flex-direction:column;gap:8px;padding-top:2px}
  .goal-remove{align-self:flex-start;font-size:12.5px;color:var(--text-dim)}
  .goal-nums{margin:0;font-size:13px;color:var(--text-dim)}
  .goal-nums b{color:var(--text)}
  .goal-nums b.gold{color:var(--gold-hi)}
  .goal-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .goal-tag{display:inline-block;vertical-align:2px;margin-left:6px;font:600 10.5px/1.6 "Archivo",system-ui,sans-serif;letter-spacing:.02em;padding:0 6px;border-radius:5px;border:1px solid rgba(216,173,87,.5);color:var(--gold-hi)}
  .cs-set-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 0}
  .cs-set-actions .btn.is-goal{border-color:rgba(216,173,87,.6);color:var(--gold-hi)}
  .sets-links{display:flex;flex-wrap:wrap;gap:6px 18px}

  /* ---------- price movers ---------- */
  .mv-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 8px}
  .mv-note{margin:0 0 6px}
  .mv-section{margin-top:22px}
  .mv-sub{margin:4px 0 0}
  .mv-section .movers{margin-top:10px}
  .movers-more{margin:12px 0 0}

  /* ---------- scan to check ---------- */
  .cs-scan{display:inline-flex;align-items:center;gap:7px}
  .scan-prices{display:flex;flex-direction:column;gap:10px;margin-top:12px}
  .scan-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
  .scan-card .sleeve{width:64px}
  .scan-info{display:flex;flex-direction:column;gap:3px;min-width:0}
  .scan-name{font-family:"Cinzel",Georgia,serif;font-size:15px;letter-spacing:.02em;color:#f6e6c4}
  .scan-info .cs-own{align-self:flex-start;margin:2px 0 0}
  .scan-ed{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:13.5px}
  .scan-ed b{color:var(--gold-hi);font-size:16px;font-variant-numeric:tabular-nums}
  .scan-info .link-btn{align-self:flex-start;margin-top:4px;font-size:13px}
  .scan-log{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
  .scan-log .box-head h3{margin:0;font-size:14px}
  .scan-log-list{list-style:none;margin:0;padding:0;font-size:13px}
  .scan-log-list li{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-top:1px solid var(--line)}
  .scan-log-list b{font-variant-numeric:tabular-nums}
  @media (max-width:640px){
    .goal-list{grid-template-columns:minmax(0,1fr)}
    .cs-bar .cs-scan{flex:1 1 auto;justify-content:center}
  }

  /* ---------- settings extras ---------- */
  .alert-grid{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:10px}
  .alert-grid .input{width:90px}
  .check-row input[type=radio]{accent-color:var(--gold);width:17px;height:17px;margin:3px 0 0}

  /* ---------- camera scan ---------- */
  .scan-view{position:relative;aspect-ratio:4/3;background:#000;border-radius:10px;overflow:hidden}
  .scan-view video{width:100%;height:100%;object-fit:cover;display:block}
  .scan-box{position:absolute;left:10%;right:10%;top:38%;height:24%;border:2px solid var(--gold-hi);border-radius:8px;box-shadow:0 0 0 999px rgba(0,0,0,.38)}
  .scan-status{margin:12px 0 0;font-size:14px;font-weight:600}


  /* ---------- sub-views (Insights, Trades & sales) ---------- */
  .panel-tools{min-width:0;max-width:100%}
  .seg-scroll{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .seg-scroll::-webkit-scrollbar{display:none}
  .seg-scroll button{white-space:nowrap}
  .sub-head{margin-top:2px}
  .sub-h{margin:0;font:400 19px/1.2 "Cinzel",Georgia,serif;letter-spacing:.03em}
  .seg .tab-count{margin-left:6px}
  .photo-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:420px}
  .photo-slot{display:flex;flex-direction:column;gap:6px;min-width:0}
  .photo-img,.photo-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;aspect-ratio:59/86;border:1px dashed var(--line-2);border-radius:10px;background:var(--surface);overflow:hidden;cursor:pointer;padding:0;color:var(--text-dim);font-size:13px;position:relative}
  .photo-img{border-style:solid}
  .photo-img img{width:100%;height:100%;object-fit:cover;display:block}
  .photo-add span[aria-hidden]{font-size:28px;line-height:1;color:var(--gold-hi)}
  .photo-add:hover{border-color:var(--gold)}
  .photo-add:focus-within{outline:2px solid var(--gold);outline-offset:2px}
  .photo-why{padding:10px;text-align:center}
  .photo-cap{display:flex;gap:12px;align-items:baseline;font-size:13px}
  .photo-cap b{margin-right:auto;font-weight:600}
  .photo-full{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px}
  .photo-full img{max-width:100%;max-height:calc(100% - 64px);object-fit:contain;border-radius:8px}
  .table.gr-cos,.table.gr-cards{min-width:0}
  .abroad{color:var(--spell)}
  .ban-st{font-weight:600}
  .ban-tag{font-size:12px;margin-left:4px}
  .deck-ban-box{margin-top:12px}
  .deck-ban-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px}
  .seg-small button{padding:4px 10px;font-size:12.5px}
  .deck-ban{margin:6px 0 0;padding-left:20px}
  .deck-ban li{margin:2px 0}
  .ban-st.ban-0{color:#f08a8a}
  .ban-st.ban-1{color:var(--gold-hi)}
  .ban-st.ban-2{color:var(--text)}
  .table.ban-table,.table.rp-table{min-width:0}
  .op-list{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
  .op-item{border:1px solid var(--line);border-radius:12px;background:var(--surface)}
  .op-item.open{border-color:var(--line-2)}
  .op-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 16px;width:100%;padding:12px 14px;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
  .op-title{display:flex;flex-direction:column;gap:2px;min-width:0}
  .op-nums{display:flex;flex-wrap:wrap;gap:4px 14px;font-variant-numeric:tabular-nums;font-size:14px}
  .op-body{padding:0 14px 14px}
  .table.op-table{min-width:0}
  .batch-for{margin:0 0 12px}
  .sell-sugg{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}
  .sell-sugg .chip[aria-pressed="true"]{border-color:var(--gold);color:#fff}
  .sell-drift{color:var(--gold-hi)}
  .table .sell-in{width:92px;text-align:right;padding:6px 8px}
  .sell-table .want-actions{flex-wrap:wrap}
  .pa-sub{margin:16px 0 6px;font-size:13.5px}
  .ca-key{word-break:break-all;font-size:12px}
  .ed-away{border-color:rgba(76,187,165,.65);color:var(--spell)}
  .ed-away.ed-late{border-color:rgba(216,173,87,.8);color:var(--gold)}
  b.late{color:var(--gold)}
  .update-status{margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid var(--line)}
  .update-status .status-line{margin:4px 0}
  .status-probs{margin:8px 0 0;padding-left:20px;font-size:13.5px}
  .status-probs li{margin:2px 0}
  .wg-plan-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 10px}
  .c-pick{width:34px}
  .table.gp-cards,.table.gp-compare{min-width:0}
  .gp-cards .pct{display:inline-flex;align-items:center;gap:4px}
  .gp-cards .pct .input{width:96px}
  .gp-order{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:10px 0}
  .gp-head{display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
  .gp-order p{margin:6px 0 8px}
  .gp-compare tr.gp-yours{background:rgba(216,173,87,.07)}

  /* ---------- Where your value is ---------- */
  .vb-top{margin-bottom:16px}
  .share-bar{height:12px;border-radius:999px;background:var(--surface-3);overflow:hidden;margin:2px 0 14px}
  .share-bar > span{display:block;height:100%;background:var(--series);border-radius:999px 0 0 999px;box-shadow:2px 0 0 var(--surface)}
  .vb-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px 24px}
  .vb-cards li,.away-list li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
  .ins-thumb{background:none;border:0;padding:0;cursor:pointer;width:34px}
  .ins-thumb .sleeve{border-radius:3px;box-shadow:none}
  .vb-card-name{min-width:0}
  .vb-card-name .cell-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vb-val{text-align:right;font-weight:650;font-stretch:var(--num-stretch);font-variant-numeric:tabular-nums;white-space:nowrap}
  .vb-val small{display:block;font-weight:500;font-size:11.5px;color:var(--text-dim)}
  .vb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:16px}
  .vb-h{margin:0 0 10px;font-size:15px}
  .vb-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
  .vb-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;align-items:baseline}
  .vb-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
  .vb-row .vb-val{font-size:13.5px}
  .vb-row .vb-val small{display:inline;margin-left:4px}
  .vb-track{grid-column:1 / -1;height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden}
  .vb-track > span{display:block;height:100%;border-radius:999px;background:var(--series)}
  .vb-row.other .vb-label{color:var(--text-dim)}
  .vb-row.other .vb-track > span{background:var(--line-2)}

  /* ---------- Worth grading, tidy up ---------- */
  .wg-controls{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0 0 14px}
  .wg-controls .input{width:84px;margin-left:6px}
  .table.wg-table{min-width:760px}
  .table.wg-table tbody tr{cursor:default}
  .away-list{list-style:none;margin:0;padding:0}
  .away-list li{grid-template-columns:34px minmax(0,1fr) auto}
  .away-list li:first-child{border-top:0}
  .away-list .select{max-width:150px}
  .tidy-box{margin-bottom:14px}
  .tidy-box .box-head{align-items:center}

  /* ---------- phone alerts ---------- */
  .pa-steps{margin:0;padding-left:20px;display:grid;gap:10px;font-size:13.5px}
  .pa-topic{display:flex;gap:8px;align-items:center;margin-top:6px;flex-wrap:wrap}
  .pa-topic code{font:13px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;background:var(--bg-2);border:1px solid var(--line-2);border-radius:6px;padding:5px 8px;word-break:break-all}

  /* ---------- getting a card graded ---------- */
  .gi-math{margin:0 0 12px;font-size:13.5px;line-height:1.55}
  .gi-math b{font-stretch:var(--num-stretch);font-variant-numeric:tabular-nums}
  .grader-list{list-style:none;margin:0 0 12px;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .grader-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:8px 12px;border-top:1px solid var(--line)}
  .grader-list li:first-child{border-top:0}
  .gl-co{display:flex;flex-direction:column;min-width:0}
  .gl-co .small{font-variant-numeric:tabular-nums}
  .wg-fee{margin:-6px 0 14px}
  .wg-controls .pct{display:inline-flex;margin-left:6px}
  .wg-controls .pct .input{margin-left:0}
  .fee-row{padding:12px 0 2px;border-top:1px solid var(--line);margin-top:10px}
  .fee-head{display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap;margin-bottom:6px}
  .fee-total{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
  .fee-fields{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) minmax(0,1fr);gap:10px}
  .fee-fields .field > .pct{display:flex;margin:0}
  .fee-fields .pct .input{width:100%;min-width:0}
  .fee-fields select.input{width:100%;min-width:0;text-overflow:ellipsis}
  .fee-fields [data-gother]{grid-column:1 / -1}
  .fee-fields [data-gother][hidden]{display:none}
  .fee-note{margin:6px 0 0}
  .hold-list{margin:8px 0 0}
  .hold-list summary{cursor:pointer;text-decoration:underline;text-underline-offset:2px}
  .hold-list ul{margin:6px 0 0;padding-left:18px;max-height:180px;overflow:auto;columns:2 220px;font-size:13px}
  .pc-miss ul{margin:8px 0 0;padding-left:18px;max-height:280px;overflow:auto;font-size:13px}
  .pc-miss li{margin:0 0 8px}
  /* Theme goals: every card of an archetype or a name */
  .theme-langs{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
  .notice.good{border-color:var(--good);color:var(--text)}
  .pcx-sum{border:1px solid var(--line-2);border-radius:10px;padding:10px 14px;margin:12px 0 0;background:var(--surface)}
  .pcx-line{margin:4px 0}
  .pcx-left{margin:6px 0 0;padding-left:18px;font-size:13px;color:var(--text-dim);max-height:220px;overflow:auto}
  #tcgxList{font-family:ui-monospace,Consolas,monospace;font-size:13px;white-space:pre;overflow:auto}
  .theme-hint{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;border:1px solid var(--gold);border-radius:10px;padding:10px 12px;margin:0 0 12px;background:var(--surface)}
  .theme-links{margin:6px 0 0}
  .theme-cards{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
  .theme-card{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;border:1px solid var(--line-2);border-radius:10px;padding:6px 10px;background:var(--surface)}
  .theme-card .sleeve{width:44px}
  .theme-card > div{min-width:0;display:flex;flex-direction:column;gap:2px}
  .theme-card b{font-size:14px;overflow-wrap:anywhere}
  .theme-card.have{opacity:.78}
  .goals-head span .link-btn{font-size:13px}
  /* Matching a card with PriceCharting yourself */
  .pc-results{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
  .pc-item{display:flex;align-items:center;gap:10px;justify-content:space-between;border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;background:var(--surface)}
  .pc-item.same{border-color:var(--gold)}
  .pc-item > div{min-width:0;display:flex;flex-direction:column;gap:2px}
  .pc-item b{font-size:14px;overflow-wrap:anywhere}
  .pc-item .btn{flex:0 0 auto}
  @media (max-width:420px){ .fee-fields{grid-template-columns:1fr 1fr} .fee-fields label:first-child{grid-column:1 / -1} }
  .grade-status{padding:12px 14px;border-radius:10px;background:var(--bg-2);border:1px solid rgba(76,187,165,.4);font-size:13.5px}
  .card-hist .box-head{align-items:center;margin-bottom:6px}
  .card-hist .seg button{padding:5px 10px;font-size:12.5px}

  /* ---------- trade checker ---------- */
  .trade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
  .trade-side{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;min-width:0}
  .trade-side h3{margin:0 0 10px;font:400 18px/1.2 "Cinzel",Georgia,serif;letter-spacing:.03em}
  .trade-side .search-wrap{max-width:none}
  .trade-results:empty{display:none}
  .tr-results{list-style:none;margin:8px 0 0;padding:4px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-2);max-height:340px;overflow:auto}
  .tr-pick{width:100%;display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px;border:0;border-radius:8px;background:none;color:inherit;text-align:left;cursor:pointer}
  .tr-pick:hover,.tr-pick:focus-visible{background:var(--surface-2)}
  .tr-pick .sleeve,.trade-item > .sleeve{width:30px;border-radius:3px;box-shadow:none}
  .trade-item > .sleeve{width:38px}
  .ti-main{min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13.5px}
  .ti-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ti-pick{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
  .ti-pick .select{padding:4px 26px 4px 8px;font-size:12.5px;max-width:150px}
  .ti-val{text-align:right;font-weight:650;font-stretch:var(--num-stretch);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13.5px}
  .ti-val small{display:block;font-weight:500;font-size:11px;color:var(--text-dim)}
  .trade-list{list-style:none;margin:12px 0 0;padding:0}
  .trade-item{display:grid;grid-template-columns:38px minmax(0,1fr) auto auto 30px;gap:8px 10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
  .trade-item:first-child{border-top:0}
  .ti-qty .icon-btn{width:28px;height:28px;font-size:16px}
  .ti-n{min-width:20px;text-align:center;font-weight:650;font-variant-numeric:tabular-nums}
  .ti-x{width:30px;height:30px;font-size:17px}
  .trade-empty{margin:14px 0 4px;color:var(--text-dim);font-size:13px}
  .trade-sum{margin-top:16px}
  .trade-totals{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:end}
  .trade-totals b{display:block;font-size:24px;font-weight:700;font-stretch:115%;font-variant-numeric:tabular-nums;line-height:1.1}
  .tt-right{text-align:right}
  .trade-verdict{text-align:center;font-size:14px;color:var(--text-dim);padding-bottom:3px}
  .trade-verdict b{color:var(--text)}
  .trade-verdict.uneven b{color:var(--gold-hi)}
  .trade-scale{display:flex;justify-content:center;align-items:center;height:10px;margin:10px 0 2px}
  .trade-scale span{display:block;height:100%}
  .ts-give{background:var(--text-faint);border-radius:999px 0 0 999px}
  .ts-get{background:var(--series);border-radius:0 999px 999px 0}
  .ts-mid{width:2px;height:16px;background:var(--text);margin:0 2px}
  .trade-extra{display:flex;flex-wrap:wrap;gap:10px 20px;margin:14px 0 4px}
  .trade-extra .input{width:120px;margin-left:6px}
  .trade-extra #tradeLoc{width:170px}
  @media (max-width:700px){ .table.stack-table.wg-table{min-width:0} }
  @media (max-width:760px){
    .trade{grid-template-columns:1fr}
    .trade-item{grid-template-columns:38px minmax(0,1fr) auto 30px;grid-template-areas:"img main main x" "img qty val val"}
    .trade-item > .sleeve{grid-area:img;align-self:start}
    .trade-item .ti-main{grid-area:main}
    .trade-item .ti-val{grid-area:val;align-self:center}
    .trade-item .ti-qty{grid-area:qty;justify-self:start}
    .trade-item .ti-x{grid-area:x;align-self:start}
    .ti-pick .select{flex:1 1 40%;max-width:none;min-width:0}
    .trade-totals{grid-template-columns:1fr 1fr;grid-template-areas:"verdict verdict" "give get"}
    .trade-totals > div:first-child{grid-area:give}
    .trade-totals .trade-verdict{grid-area:verdict;text-align:left;padding:0}
    .trade-totals .trade-verdict b{display:inline;font-size:inherit;font-stretch:inherit}
    .trade-totals .tt-right{grid-area:get}
    .trade-totals b{font-size:20px}
    .grader-list li{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
    .grader-list li .small{grid-column:2;justify-self:end}
    .vb-cards{grid-template-columns:1fr}
  }
  /* ---------- printed report (only when printing) ---------- */
  .report{display:none}
  @media print{
    @page{size:landscape;margin:10mm}
    html,body{background:#fff !important;color:#000 !important}
    body > *:not(#report){display:none !important}
    .report{display:block;color:#000;font:9.5pt/1.35 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
    .report h1{font:700 17pt/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;margin:0 0 2pt}
    .report header p{margin:0 0 8pt;color:#333}
    .rep-sum{display:flex;gap:22pt;margin:0 0 10pt}
    .rep-sum b{display:block;font-size:13pt}
    .rep-sum span{color:#444;font-size:8.5pt}
    .report table{width:100%;border-collapse:collapse}
    .report th,.report td{border-bottom:.5pt solid #bbb;padding:3pt 4pt;text-align:left;vertical-align:top}
    .report thead th{border-bottom:1pt solid #000;font-size:8.5pt}
    .report thead{display:table-header-group}
    .report tr{break-inside:avoid}
    .report tr.grp th{background:#eee;font-size:10pt;padding-top:6pt}
    .report tfoot{display:table-row-group}
    .report tfoot td{border-top:1pt solid #000;border-bottom:0;font-weight:700}
    .report .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
    .report td span{color:#444}
    .report img{width:26pt;height:auto;display:block}
    .rep-note{color:#444;font-size:8.5pt;margin-top:8pt}
    .report h2{font:700 12pt/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;margin:12pt 0 5pt}
    .rep-big{display:grid;grid-template-columns:1fr 1fr;gap:8pt 14pt;margin:0 0 6pt}
    .rep-item{display:grid;grid-template-columns:62pt 1fr;gap:8pt;break-inside:avoid;border:.5pt solid #bbb;border-radius:3pt;padding:5pt}
    .report .rep-item img{width:62pt}
    .rep-noimg{width:62pt;height:88pt;background:#eee}
    .rep-sign{display:flex;gap:40pt;margin-top:28pt}
    .rep-sign div{flex:1;border-top:.75pt solid #000;padding-top:3pt;font-size:8.5pt;color:#333}
  }

  .preview-summary{margin:0 0 12px;font-size:14px}
  .preview-summary b{font-variant-numeric:tabular-nums}
  .warn-list{margin:0 0 14px;padding:10px 14px 10px 30px;border-radius:9px;background:rgba(216,173,87,.08);border:1px solid rgba(216,173,87,.35);font-size:13.5px}
  .warn-list li{margin:2px 0}
  .import-modes{border:1px solid var(--line-2);border-radius:10px;padding:4px 14px 8px;margin:0 0 14px}
  .import-modes legend{padding:0 6px;color:var(--text-dim);font-size:13px}
  .mode{display:grid;grid-template-columns:20px 1fr;column-gap:10px;padding:10px 0;cursor:pointer;border-top:1px solid var(--line)}
  .import-modes legend + .mode{border-top:0}
  .mode input{margin:3px 0 0;width:16px;height:16px;accent-color:var(--gold)}
  .mode b{font-weight:600}
  .mode span{grid-column:2;color:var(--text-dim);font-size:13px;line-height:1.45}
  .raise{display:grid;grid-template-columns:22px 1fr;column-gap:10px;align-items:start;margin:0 0 10px 30px;padding:9px 11px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line);font-size:13px;line-height:1.45;cursor:pointer}
  .raise .check{width:20px;height:20px}
  .raise:has(input:disabled){opacity:.5;cursor:default}
  .preview-table{width:100%;border-collapse:collapse;font-size:13px}
  .preview-table th{color:var(--text-dim);font-weight:500;text-align:left;padding:6px;border-bottom:1px solid var(--line);font-size:12px}
  .preview-table td{padding:6px;border-bottom:1px solid var(--line);vertical-align:middle}
  .preview-table .sleeve{width:30px;border-radius:3px;box-shadow:none}

  /* ---------- toasts ---------- */
  .toasts{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:90;display:grid;gap:8px;width:min(560px,calc(100vw - 24px))}
  .toast{display:flex;align-items:center;gap:12px;justify-content:space-between;background:#f3eadf;color:#1d1407;border-radius:10px;padding:11px 14px;font-size:14px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
  .toast.error{background:#ffd7e6}
  .toast button{background:none;border:0;font-weight:700;color:#7a4a00;cursor:pointer;text-decoration:underline;padding:0}

  footer{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);color:var(--text-faint);font-size:12.5px}
  footer p{margin:4px 0;max-width:110ch}

  @media (max-width:900px){
    .movers{grid-template-columns:1fr}
    .deck-grid{grid-template-columns:1fr}
    .set-toggle{grid-template-columns:minmax(0,1fr) auto 16px}
    .set-toggle .set-prog{grid-column:1 / 3;grid-row:2}
  }
  @media (max-width:560px){
    .binder{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .grid-2{grid-template-columns:1fr}
    .select{max-width:none;flex:1 1 45%}
    .search{max-width:none}
    .box{padding:14px 12px}
    .tab{padding:10px 11px 9px;font-size:14px}
  }
  @media (max-width:1024px){
    .summary{grid-template-columns:minmax(0,1fr) minmax(240px,380px);gap:16px 24px;padding:26px 26px 22px}
    .fan{--w:96px}
  }
  /* ---------- below a wide screen, the filters fold behind one button: one row of search, Filters and view ---------- */
  @media (max-width:1279px){
    .controls{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:10px 14px;align-items:center}
    .controls-main{grid-column:1;grid-row:1;flex-wrap:nowrap;max-width:none}
    .controls-view{grid-column:2;grid-row:1;margin-left:0;flex-wrap:nowrap}
    .search-wrap{flex:1 1 auto;max-width:none}
    .filters-btn{display:inline-flex;flex:none;padding:9px 12px}
    .filters-btn.on{border-color:var(--gold)}
    .filter-panel{display:none;grid-column:1 / -1;grid-row:2}
    .filter-panel.open{display:grid;gap:10px;padding:12px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface)}
    .filter-panel .spacer{display:none}
  }
  @media (max-width:900px){
    .controls{grid-template-columns:minmax(0,1fr)}
    .controls-view{grid-column:1;grid-row:3;flex-wrap:wrap}
    .filter-panel{grid-row:2}
  }
  /* ---------- phones: one row of controls, the views in a tab bar at the bottom ---------- */
  @media (max-width:640px){
    body{font-size:14px}
    .app{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
    .topbar{padding:max(14px,env(safe-area-inset-top)) 0 12px;gap:10px}
    .brand h1{font-size:23px}
    .brand p{display:none}
    .topbar-right{gap:8px}
    #settingsBtn{width:40px;height:40px;padding:0}
    #settingsBtn .btn-label{display:none}
    #addBtn{padding:9px 14px 9px 11px}

    body[data-tab="collection"] .summary{grid-template-columns:minmax(0,1fr) 128px;gap:4px 8px;padding:18px 16px 16px;border-radius:18px;outline-offset:-6px;
      background:radial-gradient(200px 170px at 86% 48%,rgba(216,173,87,.17),transparent 72%),linear-gradient(180deg,#221a14,#1a140f)}
    .value-label{font-size:12.5px}
    .value-number{font-size:clamp(25px,8.2vw,36px);font-stretch:110%;margin-top:4px;white-space:nowrap}
    .value-sub{font-size:12px}
    .summary .facts{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:16px;margin:12px -16px 0 0;padding-right:16px;grid-column:1 / -1}
    .summary .facts::-webkit-scrollbar{display:none}
    .sales-facts{gap:12px 22px}
    .fact{flex:none}
    .fact b{font-size:15px}
    .fact > span{font-size:11.5px;white-space:nowrap}
    .hero-main,.hero-foot{display:contents}
    .value-label{grid-column:1;grid-row:1}
    .value-basis{display:none}
    .value-number{grid-column:1;grid-row:2}
    .value-mode{grid-column:1;grid-row:3;justify-self:start;margin-top:10px}
    .value-mode button{padding:5px 11px;font-size:12.5px;white-space:nowrap}
    .opt-word{display:none}
    .summary .facts{grid-row:4}
    .value-sub{grid-column:1 / -1;grid-row:5;margin-top:10px}
    .data-pill{grid-column:1 / -1;grid-row:6;justify-self:start;margin-top:10px;padding:0;border:0;background:none;font-size:11.5px}
    .top-cards{grid-column:2;grid-row:1 / span 3;align-self:center}
    .top-cards-label{display:none}
    .fan{--w:56px;--spread:.5;height:100px}
    .mini:nth-child(n+4){display:none}
    .mini em{font-size:10px;padding:1px 5px;bottom:5px}
    .mini .sleeve{border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 8px 16px rgba(0,0,0,.55)}

    .tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;padding:6px max(6px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-right));
      display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:0;overflow:visible;border-bottom:0;border-top:1px solid var(--line-2);
      background:rgba(20,15,12,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
    .tab{position:relative;flex-direction:column;justify-content:center;gap:3px;min-width:0;padding:6px 0 3px;border:0;border-radius:10px;font-size:10.5px;font-weight:600;color:var(--text-faint);margin:0}
    .tab:hover{background:none}
    .tab[aria-selected="true"]{background:none;box-shadow:none;color:var(--gold-hi)}
    .tab-icon,.tab-short{display:block}
    .tab-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    .tab-count{position:absolute;top:1px;left:calc(50% + 5px);min-width:17px;padding:0 4px;font-size:10px;line-height:16px;background:var(--gold);color:var(--gold-ink)}
    .seg .tab-count{position:static;background:var(--surface-3);color:var(--text-dim)}
    [role="tabpanel"]{background:none;border:0;border-radius:0;padding:16px 0 0}
    .panel-head h2{font-size:22px}

    .controls{grid-template-columns:minmax(0,1fr);margin-bottom:14px}
    .controls-view{grid-column:1;grid-row:3}
    .filter-panel{grid-row:2}
    .filter-panel .select{max-width:none;flex:1 1 45%;min-width:0}
    .filter-panel .basis{flex:1 1 100%;justify-content:space-between}
    .filter-panel .basis .select{flex:0 1 auto}
    .controls-view .shown{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

    .binder{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .tile{padding:7px 7px 9px;border-radius:12px}
    .tile-art{margin-bottom:7px}
    .tile-name{font-size:13px;min-height:2.6em}
    .tile-meta{font-size:11.5px}
    .tile-foot{margin-top:6px}
    .tile-price{font-size:14px}
    .tile-price small{font-size:10.5px}
    .ed{font-size:10.5px;padding:1px 6px}

    body:not([data-tab="collection"]) .summary{padding:11px 16px;border-radius:14px}
    body:not([data-tab="collection"]) .value-number{font-size:22px}
    .controls-view .btn-small,.filter-panel .sort-dir{min-width:0}
    .select{min-width:0}
    .bulkbar{bottom:calc(74px + env(safe-area-inset-bottom));gap:8px;padding:8px 10px}
    .toasts{bottom:calc(84px + env(safe-area-inset-bottom))}
    .menu{bottom:calc(76px + env(safe-area-inset-bottom))}
    .drawer-head,.modal-head{padding-top:max(16px,env(safe-area-inset-top))}
    footer{font-size:12px}
  }
  @media (max-width:360px){
    .brand h1{font-size:20px;white-space:nowrap}
    body[data-tab="collection"] .summary{grid-template-columns:minmax(0,1fr) 100px}
    .fan{--w:44px;height:84px}
    .mini em{font-size:9px}
    #addBtn{padding:8px 11px 8px 9px;font-size:13.5px}
  }
  @media (prefers-reduced-motion:reduce){.caret{transition:none}.mini{transition:none}}

  /* =================== Theme: a duel by night =================== */
  /* Midnight violet with the gold of rare foil. A summoning circle turns into place behind the top of the page when it
     opens, and a duel field of card zones fades into the floor. Cards sit in gold card frames; rare ones catch the light
     like their foil: rainbow for the secret-rare family, gold for ultra and gold rares, a silver gleam for super rares.
     Names are set in Cinzel, engraved Roman capitals; everything you read and type stays in Archivo. */
  body{
    background:
      radial-gradient(900px 560px at 8% -140px,rgba(124,72,214,.30),transparent 70%),
      radial-gradient(760px 500px at 96% 4%,rgba(216,173,87,.09),transparent 70%),
      radial-gradient(1300px 760px at 50% 118%,rgba(63,194,166,.11),transparent 70%),
      url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22300%22%3E%3Ccircle cx=%2223%22 cy=%2241%22 r=%220.9%22 fill=%22%23e9e1ff%22 fill-opacity=%220.25%22/%3E%3Ccircle cx=%2287%22 cy=%2212%22 r=%220.7%22 fill=%22%23e9e1ff%22 fill-opacity=%220.18%22/%3E%3Ccircle cx=%22141%22 cy=%2277%22 r=%221.1%22 fill=%22%23e9e1ff%22 fill-opacity=%220.27%22/%3E%3Ccircle cx=%22203%22 cy=%2233%22 r=%220.6%22 fill=%22%23e9e1ff%22 fill-opacity=%220.16%22/%3E%3Ccircle cx=%22262%22 cy=%2298%22 r=%220.9%22 fill=%22%23e9e1ff%22 fill-opacity=%220.23%22/%3E%3Ccircle cx=%2234%22 cy=%22162%22 r=%220.6%22 fill=%22%23e9e1ff%22 fill-opacity=%220.14%22/%3E%3Ccircle cx=%22118%22 cy=%22203%22 r=%221.2%22 fill=%22%23e9e1ff%22 fill-opacity=%220.25%22/%3E%3Ccircle cx=%22187%22 cy=%22151%22 r=%220.7%22 fill=%22%23e9e1ff%22 fill-opacity=%220.18%22/%3E%3Ccircle cx=%22241%22 cy=%22233%22 r=%220.9%22 fill=%22%23e9e1ff%22 fill-opacity=%220.23%22/%3E%3Ccircle cx=%2266%22 cy=%22262%22 r=%220.7%22 fill=%22%23e9e1ff%22 fill-opacity=%220.16%22/%3E%3Ccircle cx=%22157%22 cy=%22281%22 r=%220.6%22 fill=%22%23e9e1ff%22 fill-opacity=%220.14%22/%3E%3Ccircle cx=%22290%22 cy=%22191%22 r=%220.8%22 fill=%22%23e9e1ff%22 fill-opacity=%220.20%22/%3E%3Ccircle cx=%22220%22 cy=%2210%22 r=%220.5%22 fill=%22%23e9e1ff%22 fill-opacity=%220.14%22/%3E%3C/svg%3E") 0 0/300px 300px,
      var(--bg);
  }
  body::before{content:"";position:fixed;z-index:-1;pointer-events:none;width:min(1180px,150vw);aspect-ratio:1;
    top:calc(-1 * min(360px,44vw));right:calc(-1 * min(280px,48vw));background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 1000%22 fill=%22none%22 stroke=%22%23d8ad57%22%3E %3Ccircle cx=%22500%22 cy=%22500%22 r=%22486%22 stroke-width=%223%22/%3E%3Ccircle cx=%22500%22 cy=%22500%22 r=%22470%22 stroke-width=%221.2%22/%3E %3Ccircle cx=%22500%22 cy=%22500%22 r=%22478%22 stroke-width=%2212%22 stroke-dasharray=%222 16%22 stroke-opacity=%22.8%22/%3E %3Ccircle cx=%22500%22 cy=%22500%22 r=%22436%22 stroke=%22%23a98bff%22 stroke-width=%227%22 stroke-dasharray=%2230 9 6 9 12 9%22 stroke-opacity=%22.9%22/%3E %3Ccircle cx=%22500%22 cy=%22500%22 r=%22418%22 stroke-width=%221.5%22/%3E%3Ccircle cx=%22500%22 cy=%22500%22 r=%22392%22 stroke-width=%222.5%22/%3E %3Cpolygon points=%22500.0,108.0 839.5,696.0 160.5,696.0%22 stroke-width=%222.5%22/%3E%3Cpolygon points=%22839.5,304.0 500.0,892.0 160.5,304.0%22 stroke-width=%222.5%22/%3E%3Ccircle cx=%22500.0%22 cy=%22108.0%22 r=%2213%22/%3E%3Ccircle cx=%22839.5%22 cy=%22304.0%22 r=%2213%22/%3E%3Ccircle cx=%22839.5%22 cy=%22696.0%22 r=%2213%22/%3E%3Ccircle cx=%22500.0%22 cy=%22892.0%22 r=%2213%22/%3E%3Ccircle cx=%22160.5%22 cy=%22696.0%22 r=%2213%22/%3E%3Ccircle cx=%22160.5%22 cy=%22304.0%22 r=%2213%22/%3E %3Ccircle cx=%22500%22 cy=%22500%22 r=%22226%22 stroke-width=%222%22/%3E%3Ccircle cx=%22500%22 cy=%22500%22 r=%22212%22 stroke=%22%23a98bff%22 stroke-width=%221.2%22 stroke-dasharray=%225 7%22/%3E %3Ccircle cx=%22500%22 cy=%22500%22 r=%22150%22 stroke-width=%221.5%22/%3E %3Cpolygon points=%22500.0,382.0 618.0,500.0 500.0,618.0 382.0,500.0%22 stroke-width=%222%22/%3E%3Cpolygon points=%22583.4,416.6 583.4,583.4 416.6,583.4 416.6,416.6%22 stroke-width=%222%22/%3E%3Ccircle cx=%22650.0%22 cy=%22240.2%22 r=%225%22 fill=%22%23d8ad57%22 stroke=%22none%22/%3E%3Ccircle cx=%22800.0%22 cy=%22500.0%22 r=%225%22 fill=%22%23d8ad57%22 stroke=%22none%22/%3E%3Ccircle cx=%22650.0%22 cy=%22759.8%22 r=%225%22 fill=%22%23d8ad57%22 stroke=%22none%22/%3E%3Ccircle cx=%22350.0%22 cy=%22759.8%22 r=%225%22 fill=%22%23d8ad57%22 stroke=%22none%22/%3E%3Ccircle cx=%22200.0%22 cy=%22500.0%22 r=%225%22 fill=%22%23d8ad57%22 stroke=%22none%22/%3E%3Ccircle cx=%22350.0%22 cy=%22240.2%22 r=%225%22 fill=%22%23d8ad57%22 stroke=%22none%22/%3E %3Ccircle cx=%22500%22 cy=%22500%22 r=%2240%22 stroke-width=%222%22/%3E%3Ccircle cx=%22500%22 cy=%22500%22 r=%2210%22 fill=%22%23d8ad57%22/%3E%3C/svg%3E") center/contain no-repeat;opacity:.15;
    animation:summon 2.4s cubic-bezier(.2,.7,.2,1) both}
  @keyframes summon{from{opacity:0;transform:rotate(-55deg) scale(.86)}to{opacity:.15;transform:none}}
  body::after{content:"";position:fixed;z-index:-1;pointer-events:none;left:-70vw;right:-70vw;bottom:-4vh;height:64vh;
    background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22150%22 fill=%22none%22%3E %3Crect x=%2220%22 y=%2216%22 width=%2280%22 height=%22118%22 rx=%227%22 stroke=%22%239c86ff%22 stroke-width=%222%22 stroke-opacity=%22.7%22/%3E %3Crect x=%2228%22 y=%2224%22 width=%2264%22 height=%22102%22 rx=%224%22 stroke=%22%23d8ad57%22 stroke-width=%221%22 stroke-opacity=%22.45%22/%3E%3C/svg%3E") 50% 100%/120px 150px repeat;transform:perspective(560px) rotateX(66deg);transform-origin:50% 100%;opacity:.5;
    -webkit-mask-image:linear-gradient(to top,#000 8%,transparent 80%);mask-image:linear-gradient(to top,#000 8%,transparent 80%)}
  @media (prefers-reduced-motion:reduce){body::before{animation:none}}
  ::selection{background:rgba(216,173,87,.35)}

  /* names in engraved capitals */
  .brand h1,.panel-head h2,.sub-h,.empty h2,.drawer-head h2,.modal-head h2,.tab,.set-name,.tile-name,.result-name,.mk-h,.picked h3,.value-number,.detail-title{
    font-family:"Cinzel",Georgia,serif}
  .brand{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:13px;align-items:center}
  .brand-mark{grid-row:span 2;width:46px;height:46px;filter:drop-shadow(0 0 10px rgba(216,173,87,.35))}
  .brand h1{font-weight:800;font-size:31px;letter-spacing:.07em;color:#f1cf82;
    background:linear-gradient(180deg,#fff4d2 0%,#f1cf82 40%,#c38f35 62%,#f4d98f 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 2px 0 rgba(0,0,0,.55))}
  .panel-head h2,.sub-h,.empty h2,.drawer-head h2,.modal-head h2{font-weight:700;color:#f6e6c4;letter-spacing:.035em}
  .set-name,.result-name{font-weight:700;letter-spacing:.02em}
  .detail-title{font-weight:700;letter-spacing:.02em;color:#f6e6c4}
  .detail-img:hover .sleeve[data-foil]::before{background-position:0 100%;opacity:.8}
  .tile-name{font-weight:700;font-size:13px;letter-spacing:.02em;line-height:1.32}
  .mk-h{font-weight:700;letter-spacing:.03em;color:#f6e6c4}

  /* buttons: gold foil for the main action */
  .btn{background:linear-gradient(180deg,#2a2149,#211a3b)}
  .btn:hover{border-color:var(--gold);color:#fff}
  .btn-primary{background:linear-gradient(180deg,#f8e2a2 0%,#e2b85e 46%,#c08d35 100%);border-color:#e9c56f;color:#24170a;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(90,50,0,.35);text-shadow:0 1px 0 rgba(255,240,205,.45)}
  .btn-primary:hover{background:linear-gradient(180deg,#fdebb8 0%,#ebc56f 46%,#cb9a40 100%);border-color:#f3d48a}
  #addBtn{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 22px rgba(216,173,87,.3)}
  .btn-danger{background:transparent}
  .seg button[aria-pressed="true"]{background:linear-gradient(180deg,#3a2e68,#2f2552);color:var(--gold-hi)}
  .check{background:rgba(15,11,28,.82)}
  .tile-qty{background:rgba(15,11,28,.9)}

  /* the hero: a field-spell frame, with your most valuable card's art glowing behind it */
  .summary{isolation:isolate;
    background:radial-gradient(460px 300px at 80% 58%,rgba(124,72,214,.34),transparent 72%),linear-gradient(165deg,#271d4b 0%,#1b1536 55%,#140f29 100%);
    border:1px solid rgba(216,173,87,.45);outline:1px solid rgba(216,173,87,.15);outline-offset:-9px;
    box-shadow:0 30px 70px rgba(5,2,15,.55),inset 0 1px 0 rgba(255,255,255,.06)}
  .summary::before{content:"";position:absolute;inset:4px;pointer-events:none;
    background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2228%22 fill=%22none%22 stroke=%22%23d8ad57%22%3E%3Cg transform=%22rotate(0 14 14)%22%3E %3Cpath d=%22M2 26V9l7-7h17%22 stroke-width=%221.6%22/%3E%3Cpath d=%22M6 26V11l5-5h15%22 stroke-width=%221%22 stroke-opacity=%22.55%22/%3E %3Crect x=%225.2%22 y=%225.2%22 width=%224.2%22 height=%224.2%22 transform=%22rotate(45 7.3 7.3)%22 fill=%22%23f1cf82%22 stroke=%22none%22/%3E%3C/g%3E%3C/svg%3E") top left/28px no-repeat,url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2228%22 fill=%22none%22 stroke=%22%23d8ad57%22%3E%3Cg transform=%22rotate(90 14 14)%22%3E %3Cpath d=%22M2 26V9l7-7h17%22 stroke-width=%221.6%22/%3E%3Cpath d=%22M6 26V11l5-5h15%22 stroke-width=%221%22 stroke-opacity=%22.55%22/%3E %3Crect x=%225.2%22 y=%225.2%22 width=%224.2%22 height=%224.2%22 transform=%22rotate(45 7.3 7.3)%22 fill=%22%23f1cf82%22 stroke=%22none%22/%3E%3C/g%3E%3C/svg%3E") top right/28px no-repeat,url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2228%22 fill=%22none%22 stroke=%22%23d8ad57%22%3E%3Cg transform=%22rotate(180 14 14)%22%3E %3Cpath d=%22M2 26V9l7-7h17%22 stroke-width=%221.6%22/%3E%3Cpath d=%22M6 26V11l5-5h15%22 stroke-width=%221%22 stroke-opacity=%22.55%22/%3E %3Crect x=%225.2%22 y=%225.2%22 width=%224.2%22 height=%224.2%22 transform=%22rotate(45 7.3 7.3)%22 fill=%22%23f1cf82%22 stroke=%22none%22/%3E%3C/g%3E%3C/svg%3E") bottom right/28px no-repeat,url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2228%22 fill=%22none%22 stroke=%22%23d8ad57%22%3E%3Cg transform=%22rotate(270 14 14)%22%3E %3Cpath d=%22M2 26V9l7-7h17%22 stroke-width=%221.6%22/%3E%3Cpath d=%22M6 26V11l5-5h15%22 stroke-width=%221%22 stroke-opacity=%22.55%22/%3E %3Crect x=%225.2%22 y=%225.2%22 width=%224.2%22 height=%224.2%22 transform=%22rotate(45 7.3 7.3)%22 fill=%22%23f1cf82%22 stroke=%22none%22/%3E%3C/g%3E%3C/svg%3E") bottom left/28px no-repeat}
  .summary::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--hero-art,none) 80% 45%/62% auto no-repeat;
    filter:blur(44px) saturate(1.35);opacity:.32;clip-path:inset(0 round 20px)}
  .value-number{font-weight:800;font-stretch:normal;letter-spacing:.015em;color:#fff6e3;text-shadow:0 2px 28px rgba(216,173,87,.28)}
  body:not([data-tab="collection"]) .value-number{font-size:26px}
  .value-label{color:#cfc4ea}
  .mini .sleeve{box-shadow:0 0 0 1px rgba(216,173,87,.4),0 14px 26px rgba(4,2,12,.6)}

  /* tabs: engraved names with their emblems; the open one lights up in gold */
  .tabs{border-bottom-color:rgba(216,173,87,.3)}
  .tab{font-weight:700;font-size:13.5px;letter-spacing:.03em}
  .tab .tab-icon{display:block;flex:none;width:18px;height:18px;opacity:.8}
  .tab[aria-selected="true"]{color:var(--gold-hi);background:var(--page);border-color:rgba(216,173,87,.34);
    box-shadow:inset 0 2px 0 var(--gold),0 -10px 26px -14px rgba(216,173,87,.6)}
  .tab[aria-selected="true"] .tab-icon{opacity:1;filter:drop-shadow(0 0 5px rgba(216,173,87,.6))}
  [role="tabpanel"]{background:linear-gradient(180deg,rgba(29,22,56,.9),rgba(19,14,37,.92));border-color:rgba(216,173,87,.26)}

  /* cards: a gold card frame in a sleeve slot */
  .tile{background:linear-gradient(180deg,#231b3f,#1a1431);border-color:#372d61;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    transition:border-color .2s,box-shadow .2s,transform .2s}
  .tile:hover{border-color:rgba(216,173,87,.55);background:linear-gradient(180deg,#281f49,#1d1637);
    box-shadow:0 12px 30px rgba(6,2,18,.5),0 0 0 1px rgba(216,173,87,.16);transform:translateY(-2px)}
  .sleeve{background:#0b0816;box-shadow:0 0 0 1px rgba(216,173,87,.3),0 8px 18px rgba(4,2,12,.45)}
  .sleeve.boxed{background:#f3efe8}
  .result{background:linear-gradient(180deg,#251d44,#1e1739)}
  .set-row,.box{background:linear-gradient(180deg,#1f1839,#1a1431)}
  .set-row:hover{border-color:var(--line-2)}
  .table-wrap{background:var(--surface)}
  .table tbody tr.is-selected{background:rgba(216,173,87,.09)}
  .banner{background:linear-gradient(180deg,#221a3f,#1b1533)}
  .notice{background:rgba(21,15,39,.85)}
  /* rare cards catch the light */
  .sleeve[data-foil]::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
    background:linear-gradient(118deg,transparent 32%,var(--f1) 42%,var(--f2) 50%,var(--f3) 58%,transparent 68%) 100% 0/320% 320% no-repeat;
    mix-blend-mode:color-dodge;opacity:.38;transition:background-position 1.1s ease,opacity .4s}
  .sleeve[data-foil="secret"]{--f1:rgba(255,90,190,.6);--f2:rgba(90,210,255,.6);--f3:rgba(255,226,92,.6)}
  .sleeve[data-foil="ultra"]{--f1:rgba(255,200,90,.15);--f2:rgba(255,226,150,.7);--f3:rgba(255,200,90,.15)}
  .sleeve[data-foil="super"]{--f1:rgba(255,255,255,0);--f2:rgba(235,240,255,.45);--f3:rgba(255,255,255,0)}
  :is(.tile:hover,.mini:hover,.mini:focus-visible,.result:hover) .sleeve[data-foil]::before{background-position:0 100%;opacity:.8}
  @media (hover:none){.sleeve[data-foil]::before{background-position:35% 65%;opacity:.5}}
  @media (prefers-reduced-motion:reduce){.sleeve[data-foil]::before{transition:none}.tile{transition:none}.tile:hover{transform:none}}
  /* a card with no photo: a drawn card in the night colors */
  .card-ph{background:linear-gradient(165deg,#3b2a6e 0%,#1f1640 55%,#2c2057 100%);border-color:#120d24;color:#f1e6cf}
  .ph-name{background:rgba(0,0,0,.3)}
  .ph-mark{background:radial-gradient(circle at 50% 45%,rgba(216,173,87,.28),rgba(0,0,0,.3) 72%)}
  .boxed .ph-mark{background:#241c40}
  .sleeve:has(> img[data-stand])::after{background:rgba(15,11,28,.85)}

  /* drawer, dialogs and messages */
  .scrim{background:rgba(6,3,15,.66)}
  .drawer,.modal{background:linear-gradient(180deg,#1f1839,#19132f)}
  .drawer-head,.modal-head{border-bottom-color:rgba(216,173,87,.22)}
  .leaving{background:rgba(15,11,28,.88)}
  .toast{background:linear-gradient(180deg,#2c2350,#231b42);color:var(--text);border:1px solid rgba(216,173,87,.45);box-shadow:0 14px 34px rgba(4,2,12,.6)}
  .toast button{color:var(--gold-hi)}
  .toast.error{background:linear-gradient(180deg,#3d1530,#2c1024);border-color:rgba(224,103,155,.6)}
  .bulkbar{background:linear-gradient(180deg,#2f2552,#261e46)}

  @media (max-width:640px){
    .brand-mark{width:36px;height:36px}
    .brand h1{font-size:23px;letter-spacing:.05em;white-space:nowrap}
    .tabs{background:rgba(16,11,33,.95);border-top:1px solid rgba(216,173,87,.32)}
    .tab{font-family:"Archivo",system-ui,sans-serif;letter-spacing:0;font-weight:600;font-size:11px}   /* (eight tabs side by side) */
    .tab .tab-icon{width:20px;height:20px;opacity:1}
    .tab[aria-selected="true"]{box-shadow:none}
    .tab[aria-selected="true"] .tab-icon{filter:drop-shadow(0 0 6px rgba(216,173,87,.7))}
    [role="tabpanel"]{background:none}
    body::before{opacity:.12}
    @keyframes summon{from{opacity:0;transform:rotate(-55deg) scale(.86)}to{opacity:.12;transform:none}}
  }
  /* (a narrow phone: the name alone, on one line) */
  @media (max-width:430px){ .brand{display:block} .brand-mark{display:none} }
  @media (max-width:350px){ .brand h1{font-size:19px;letter-spacing:.03em} }

  /* ---------- keyboard shortcuts ---------- */
  kbd{display:inline-block;min-width:1.7em;padding:1px 7px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:6px;background:rgba(0,0,0,.25);
    font:600 12.5px/1.5 "Archivo",system-ui,sans-serif;text-align:center;color:var(--text)}
  .shortcuts-box{position:fixed;inset:0;z-index:1000;background:rgba(8,5,18,.82);display:flex;align-items:center;justify-content:center;padding:16px}
  .shortcuts-card{width:min(520px,100%);max-height:100%;overflow:auto;padding:22px 24px;border:1px solid var(--line-2);border-radius:16px;background:var(--surface)}
  .shortcuts-card h2{margin:0 0 14px;font:400 22px/1.2 "Cinzel",Georgia,serif;letter-spacing:.04em;color:#f6e7c8}
  .shortcuts{display:grid;grid-template-columns:max-content 1fr;gap:10px 18px;margin:0 0 14px;align-items:baseline}
  .shortcuts dt{margin:0;white-space:nowrap}
  .shortcuts dd{margin:0;color:var(--text-dim)}

  /* ---------- back to top ---------- */
  .to-top-row{display:flex;justify-content:flex-end;margin-top:14px}
  .to-top{display:inline-flex;align-items:center;gap:7px}
  .brand h1:focus{outline:none}

  /* ---------- a slim value bar, once the big value panel has scrolled away ---------- */
  html{scroll-padding-top:calc(52px + env(safe-area-inset-top))}
  .value-bar{position:fixed;top:0;left:0;right:0;z-index:25;display:flex;align-items:baseline;justify-content:center;gap:10px;
    padding:max(8px,env(safe-area-inset-top)) 16px 8px;cursor:pointer;visibility:hidden;transform:translateY(-100%);
    background:rgba(16,11,33,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(216,173,87,.32);
    transition:transform .18s ease-out,visibility 0s linear .18s}
  body.vbar-on .value-bar{visibility:visible;transform:none;transition:transform .18s ease-out}
  .vbar-label{color:var(--text-dim);font-size:12.5px}
  .vbar-num{font-size:19px;font-weight:700;font-stretch:112%;font-variant-numeric:tabular-nums;color:#fbf3e6}
  .vbar-chg{font-size:12.5px;color:var(--text-dim)}
  .vbar-chg:empty{display:none}
  @media (prefers-reduced-motion:reduce){.value-bar,body.vbar-on .value-bar{transition:none}}

  /* ---------- the value's change since the last price day, in the big panel (phones show it as a line of facts instead) ---------- */
  .hero-change{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:10px;font-size:13.5px;color:var(--text-dim)}
  .hero-change:empty{display:none}
  .hero-change .hc-main{display:inline-flex;align-items:baseline;gap:8px;color:var(--text)}
  .hero-change .hc-when{color:var(--text-dim);font-size:12.5px}
  .hero-change .hc-top{display:inline-flex;align-items:baseline;gap:6px;min-width:0;max-width:100%}
  .hero-change .hc-top .link-btn{max-width:min(24ch,40vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hero-change .hc-lab{color:var(--text-faint);font-size:12.5px}
  .hero-change .spark{color:var(--gold);flex:none;opacity:.9}
  @media (min-width:641px){.summary .fact-chg{display:none}}
  @media (max-width:640px){.hero-change{display:none}}
  .banner .cb-moves{color:var(--text-dim)}

  /* ---------- a fade at the edge of anything that scrolls sideways ---------- */
  .hs-r:not(.hs-l){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
  .hs-l:not(.hs-r){-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(270deg,#000 calc(100% - 30px),transparent)}
  .hs-l.hs-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent)}

  /* ---------- swiping a card ---------- */
  .tile[data-card]{touch-action:pan-y pinch-zoom}
  .tile.swiping{transition:none;user-select:none}
  .tile.swipe-add{outline:2px solid var(--good);outline-offset:-2px}
  .tile.swipe-less{outline:2px solid var(--bad);outline-offset:-2px}
  .banner .cb-mv{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
  .app{overflow-x:clip}   /* (a card sliding aside while it's swiped never makes the page wider) */

  /* ---------- in-between screens: a foldable phone opened up, a small tablet, a window split in two ---------- */
  /* Three columns of cards while the phone layout still has the room (a plain phone keeps two). */
  @media (min-width:561px) and (max-width:640px){
    .binder{grid-template-columns:repeat(3,minmax(0,1fr))}
  }
  /* A very narrow window (half a screen): the tab names are a hair smaller so none of them run together. */
  @media (max-width:339px){
    .tab{font-size:9.5px}
  }
  /* Past the phone layout the tabs sit along the top. Below a big desktop window the full names don't all fit,
     so they use their short names (the full name stays there for screen readers) and share the row evenly. */
  @media (min-width:641px) and (max-width:1099px){
    .tabs{gap:2px;padding:0 6px}
    .tab{position:relative;flex:1 1 auto;justify-content:center;gap:6px;padding:11px clamp(6px,1.4vw,14px) 10px;font-size:13px;letter-spacing:.01em}
    .tab-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    .tab-short{display:inline}
  }
  @media (min-width:641px) and (max-width:859px){
    .tab .tab-icon{display:none}
  }
  /* Landscape on a phone with a camera cut-out or a rounded corner: keep things out from under it. */
  .value-bar{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .drawer{padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}
  .modal{width:min(880px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    left:calc(50% + (env(safe-area-inset-left) - env(safe-area-inset-right)) / 2);
    max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  .photo-full,.shortcuts-box{padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
  @media (min-width:641px){ .bulkbar{bottom:calc(18px + env(safe-area-inset-bottom))} }
  /* (the trade's cash row wraps instead of running off the edge of a very narrow screen) */
  .trade-extra .basis{max-width:100%;flex-wrap:wrap}
  .trade-extra .input{max-width:100%}