/* Fonts served by the app itself (www/fonts, SIL Open Font License): no device asks Google Fonts for them. */
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(../fonts/archivo-latin-wdth-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(../fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/jetbrains-mono-latin-ext-500-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/jetbrains-mono-latin-ext-700-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Layout: a binder you carry. Value summary on top, your started sets as sleeves, each set opened
   as numbered 3×3 binder pages; the camera lives in the bottom bar. */
:root{
  --bg:#E8ECF1;
  --surface:#FFFFFF;
  --pocket:#F3F5F8;
  --pocket-line:#C5CDD8;
  --ink:#121722;
  --ink-2:#556071;
  --ink-3:#8790A0;
  --line:#D6DCE4;
  --accent:#2246D6;
  --accent-ink:#FFFFFF;
  --accent-soft:#E2E8FF;
  --gold:#9A6A08;
  --gold-soft:#F6EACB;
  --up:#1B7F45;
  --down:#C2362C;
  --warn:#9A5B00;
  --warn-soft:#FBEBD2;
  --danger:#B42318;
  --star:#D99A00;
  --star-off:#CCD3DC;
  --scrim:rgba(10,14,22,.55);
  --sheen:rgba(255,255,255,.38);
  --frame:#FFD54A;
  --frame-edge:#111111;
  --stage-bg:#000000;
  --stage-dim:rgba(8,10,14,.55);
  --shadow:0 1px 2px rgba(18,23,34,.06),0 6px 18px rgba(18,23,34,.07);
  --t-G:#3E9B4F; --t-R:#E0533C; --t-W:#3A86D9; --t-L:#E2B10F; --t-P:#9B5BC9; --t-F:#B5683A;
  --t-D:#3B5A63; --t-M:#8893A0; --t-Y:#E07BB0; --t-N:#B08F1E; --t-C:#A9A296; --t-T:#5F6F94; --t-E:#6E8A4E;
  /* Magic: colours of mana */
  --t-MW:#D9CFA8; --t-MU:#3E7FC1; --t-MB:#4A4352; --t-MR:#D2553B; --t-MG:#3F8D55; --t-MM:#C9A23C; --t-MC:#9AA3AD; --t-ML:#9C7B54;
  /* Yu-Gi-Oh!: card frames */
  --t-YN:#D8B86A; --t-YE:#D9814A; --t-YR:#5E86C9; --t-YF:#8C62B7; --t-YS:#B9BCC2; --t-YX:#3E3F45; --t-YL:#2F5EA8; --t-YP:#4FA58C;
  --t-YM:#2E9C8C; --t-YT:#B5487F; --t-YK:#8E8E8E;
  /* One Piece and Lorcana: card colours and inks */
  --t-OR:#D9433A; --t-OG:#2F9A5B; --t-OB:#2F78C4; --t-OP:#8A4FB5; --t-OK:#3C3C43; --t-OY:#E2B419; --t-OM:#B07AA8;
  --t-LA:#E3A22B; --t-LM:#8B4FB0; --t-LE:#2E9A62; --t-LR:#C7354A; --t-LS:#2F79C2; --t-LT:#7E8A99; --t-LD:#B48E5C; --t-LN:#A9A296;
  /* Flesh and Blood: pitch */
  --t-FR:#CF3B32; --t-FY:#E2B21D; --t-FB:#2F75C0; --t-FN:#8F8A80;
  /* Hot Wheels: the orange of the blister */
  --t-H:#E8641E;
  --f-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1117; --surface:#161A22; --pocket:#1B2029; --pocket-line:#2D3441; --ink:#E7EBF1; --ink-2:#A2ACBA; --ink-3:#6D7686;
    --line:#252B36; --accent:#7F98FF; --accent-ink:#0A0F1F; --accent-soft:#1C2446; --gold:#E3B652; --gold-soft:#2A2213;
    --up:#4CC47F; --down:#F2695E; --warn:#F0B35A; --warn-soft:#2B2113; --danger:#FF7A6E; --scrim:rgba(0,0,0,.62); --sheen:rgba(255,255,255,.07);
    --star:#F2C14E; --star-off:#3A4250;
    --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1117; --surface:#161A22; --pocket:#1B2029; --pocket-line:#2D3441; --ink:#E7EBF1; --ink-2:#A2ACBA; --ink-3:#6D7686;
  --line:#252B36; --accent:#7F98FF; --accent-ink:#0A0F1F; --accent-soft:#1C2446; --gold:#E3B652; --gold-soft:#2A2213;
  --up:#4CC47F; --down:#F2695E; --warn:#F0B35A; --warn-soft:#2B2113; --danger:#FF7A6E; --scrim:rgba(0,0,0,.62); --sheen:rgba(255,255,255,.07);
  --star:#F2C14E; --star-off:#3A4250;
  --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 var(--f-body);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
img{max-width:100%}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}
.center{text-align:center}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.app{max-width:1040px;margin-inline:auto;padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right));padding-block:0 calc(104px + env(safe-area-inset-bottom,0px))}

/* top bar */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding-block:calc(10px + env(safe-area-inset-top,0px)) 10px;background:var(--bg)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-stretch:118%;font-size:17px;letter-spacing:-.01em;background:none;border:0;padding:0;margin-right:auto}
.brand svg{width:26px;height:26px;flex:none}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:12.5px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
.chip.ok .dot{background:var(--up)}
.chip.old .dot{background:var(--warn)}
.icon-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);padding:0;flex:none}
.icon-btn svg{width:19px;height:19px}
.chip{min-width:0;flex-shrink:1}
#priceChipText{overflow:hidden;text-overflow:ellipsis}
@media (max-width:520px){.topbar .brand span{display:none}}
/* the language (ES/EN) and the light/dark look */
.lang-btn span{font:700 12px/1 var(--f-mono);letter-spacing:.02em}
.theme-btn .ic-sun{display:none}
:root[data-theme="dark"] .theme-btn .ic-sun{display:block}
:root[data-theme="dark"] .theme-btn .ic-moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .ic-sun{display:block}
  :root:not([data-theme="light"]) .theme-btn .ic-moon{display:none}
}
@media (max-width:360px){.topbar{gap:7px}.topbar .icon-btn{width:34px;height:34px}}
/* in English the page waits (hidden) until its texts are translated: js/boot.js, js/i18n.js */
html.i18n-wait body{visibility:hidden}
/* sync status: a cloud with a sign */
.sync-btn{position:relative}
.sync-btn svg path:not(.cloud){display:none}
.sync-btn[data-state="ok"] .s-ok,.sync-btn[data-state="busy"] .s-busy,.sync-btn[data-state="offline"] .s-off,
.sync-btn[data-state="error"] .s-warn,.sync-btn[data-state="auth"] .s-warn,.sync-btn[data-state="none"] .s-none{display:inline}
.sync-btn[data-state="ok"] .s-ok{stroke:var(--up)}
.sync-btn[data-state="busy"] svg{animation:pulse 1.1s ease-in-out infinite}
.sync-btn[data-state="offline"]{color:var(--ink-3)}
.sync-btn[data-state="error"],.sync-btn[data-state="auth"]{color:var(--warn);border-color:color-mix(in oklab,var(--warn) 45%,var(--line))}
.sync-dot{display:none;position:absolute;right:1px;top:1px;width:9px;height:9px;border-radius:50%;background:var(--down);border:2px solid var(--bg)}
.sync-btn[data-state="auth"] .sync-dot{display:block}
@keyframes pulse{50%{opacity:.35}}

/* type */
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.view-title{font-family:var(--f-display);font-weight:850;font-stretch:120%;font-size:28px;line-height:1.05;letter-spacing:-.015em;margin-block:8px 6px}
.lede{color:var(--ink-2);max-width:62ch}
.section-title{font-family:var(--f-display);font-weight:800;font-stretch:112%;font-size:17px;margin-block:28px 10px;display:flex;align-items:baseline;gap:8px}
.section-title small{font-family:var(--f-body);font-weight:400;font-size:13px;color:var(--ink-3)}
.big{font-family:var(--f-display);font-weight:850;font-stretch:125%;font-size:clamp(40px,12vw,68px);line-height:.95;letter-spacing:-.025em;font-variant-numeric:tabular-nums;margin-block:10px 8px}
.big .dec{font-size:.46em;letter-spacing:0;color:var(--ink-2);margin-left:2px}
.big .cur{font-size:.46em;letter-spacing:0;color:var(--ink-2);margin-right:3px;vertical-align:.62em}
.big.none{color:var(--ink-3)}
.sub{color:var(--ink-2)}
.fine{font-size:12.5px;color:var(--ink-3)}
.hint{font-size:13px;color:var(--ink-3);margin-top:10px}

/* hero */
.hero{padding-block:6px 4px}
.callout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;margin-top:16px;padding:14px;border-radius:14px;background:var(--gold-soft);border:1px solid color-mix(in oklab,var(--gold) 30%,transparent)}
.callout svg{width:22px;height:22px;color:var(--gold);margin-top:2px}
.callout b{display:block;margin-bottom:2px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn svg{width:20px;height:20px}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.btn.big{min-height:56px;font-size:16px;border-radius:14px}
.btn.ghost{background:transparent}
.btn.small{min-height:36px;padding:0 12px;font-size:13.5px;border-radius:10px}
.btn.danger{color:var(--danger);border-color:color-mix(in oklab,var(--danger) 45%,var(--line))}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.linkbtn{background:none;border:0;padding:6px 0;color:var(--accent);font-weight:700}
:is(.btn,.tab,.slot,.set-row,.linkbtn,.seg button,.chip,.stepper button,.cell,.rc-main,.rc-add,.brand,.icon-btn,.chip-v,.top-row,.bars .b,.mk-row,.deal-row,.mk-main.plain,.backbtn):focus-visible{outline:3px solid color-mix(in oklab,var(--accent) 65%,transparent);outline-offset:2px}

/* segmented */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--pocket);border:1px solid var(--line);border-radius:12px;padding:3px;gap:3px}
.seg button{border:0;background:none;min-height:38px;padding:0 8px;border-radius:9px;font-weight:700;font-size:13.5px;color:var(--ink-2)}
.seg button[aria-checked="true"],.seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.seg.small button{min-height:32px;font-size:12.5px}

/* set lists */
.set-list{display:grid;gap:8px}
.set-row{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);text-align:left}
.set-code{font:700 11.5px/1 var(--f-mono);letter-spacing:.04em;padding:9px 0;text-align:center;border-radius:7px;background:var(--pocket);border:1px solid var(--pocket-line);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-main{display:grid;gap:3px;min-width:0}
.set-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-meta{font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar{display:block;height:5px;margin-top:5px;background:var(--pocket);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:2px}
.set-side{display:grid;justify-items:end;gap:2px;font-variant-numeric:tabular-nums}
.set-side b{font:700 13px var(--f-mono)}
.set-side small{font-size:12.5px;color:var(--gold);font-weight:700}
.all-sets{display:grid;gap:2px;margin-top:6px}
.series-h{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:18px 0 6px}
.set-row.compact{padding:9px 10px;border-color:transparent;background:transparent}
.set-row.compact:hover{background:var(--surface)}
.filter-input,.search-input,.select{width:100%;min-height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-size:16px}
.search-input{min-height:52px;font-size:17px;margin-top:14px}
.select{appearance:auto;font-size:15px}
.filter-input:focus,.search-input:focus,.select:focus{outline:3px solid color-mix(in oklab,var(--accent) 45%,transparent);outline-offset:0;border-color:var(--accent)}

/* empty album */
.empty{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:18px;align-items:center;margin-top:18px;padding:18px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.mini-binder{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:8px;border-radius:10px;background:var(--pocket);border:1px solid var(--line)}
.mini-binder span{aspect-ratio:63/88;border:1px dashed var(--pocket-line);border-radius:4px;font:700 8.5px/1 var(--f-mono);color:var(--ink-3);padding:3px}
.mini-binder span.f{border-style:solid;background:color-mix(in oklab,var(--t) 26%,var(--surface));border-color:color-mix(in oklab,var(--t) 50%,var(--pocket-line));color:var(--ink-2)}
.empty h2{font-family:var(--f-display);font-weight:800;font-stretch:112%;font-size:19px;margin-bottom:6px}
.empty .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
@media (max-width:420px){.empty{grid-template-columns:1fr}.mini-binder{max-width:170px}}

/* set view */
.backbtn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:8px 0;color:var(--accent);font-weight:700}
.backbtn svg{width:18px;height:18px}
.set-title{display:flex;align-items:center;gap:10px;margin-top:4px}
.set-title .set-code{padding:8px 8px;min-width:54px}
.set-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.stat{padding:12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);min-width:0}
.stat b{display:block;font:700 19px/1.1 var(--f-mono);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.stat span{font-size:12px;color:var(--ink-3)}
.stat.gold b{color:var(--gold)}
.img-controls{display:grid;gap:8px;margin-top:12px;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.img-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.img-row > div:first-child{display:grid;gap:2px;min-width:0}
.img-row .seg{min-width:120px}
.set-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-block:14px 12px}
.set-tools .seg{flex:1 1 260px}

/* binder pages */
.binder{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.page{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px}
.page-label{display:flex;justify-content:space-between;gap:8px;font:600 11px/1 var(--f-mono);color:var(--ink-3);padding:2px 3px 9px}
.pockets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.slot{position:relative;display:block;width:100%;aspect-ratio:63/88;border-radius:7px;border:1px solid var(--pocket-line);background:var(--pocket);overflow:hidden;padding:0;text-align:left;-webkit-tap-highlight-color:transparent}
.slot.missing{border-style:dashed;background:transparent}
.slot.owned{background:color-mix(in oklab,var(--t) 24%,var(--surface));border-color:color-mix(in oklab,var(--t) 55%,var(--pocket-line))}
.slot.owned::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 38%,var(--sheen) 50%,transparent 62%);pointer-events:none}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot.missing.has-img img{filter:grayscale(1);opacity:.32}
.slot-num{position:absolute;left:6px;top:6px;font:700 10px/1 var(--f-mono);color:var(--ink-2)}
.slot-name{position:absolute;left:6px;right:6px;bottom:6px;font-size:10.5px;font-weight:700;line-height:1.15;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.slot.missing .slot-num,.slot.missing .slot-name{color:var(--ink-3);font-weight:400}
.slot.has-img .slot-num,.slot.has-img .slot-name{display:none}
.qty{position:absolute;right:5px;top:5px;z-index:1;background:var(--ink);color:var(--bg);font:700 10px/1 var(--f-mono);padding:3px 6px;border-radius:999px}
.revtag{position:absolute;right:5px;bottom:5px;z-index:1;background:var(--surface);color:var(--ink);border:1px solid var(--line);font:700 9px/1 var(--f-mono);padding:2px 4px;border-radius:4px}

/* scan */
.scan-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.scan-head .view-title{font-size:26px}
.scan-head .seg{flex:0 1 230px;min-width:0}
.scan-head .seg button{padding:0 6px;white-space:nowrap}
.scan-opts{display:flex;align-items:center;gap:10px;margin-top:8px}
.scan-opts .select{flex:1;min-width:0;min-height:42px}
.scan-opts .select.lang-select{flex:0 0 auto;width:auto;max-width:132px;padding:0 8px}
.lab{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.vf-layout{position:absolute;left:10px;top:10px;z-index:2;display:flex;align-items:center;gap:8px;color:#fff;font-size:12px;font-weight:700;text-shadow:0 1px 3px #000}
.vf-layout .seg{background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.2)}
.vf-layout .seg button{color:#fff;min-width:38px}
.vf-layout .seg button[aria-checked="true"]{background:#fff;color:#111}
.viewfinder{position:relative;margin-top:10px;width:100%;aspect-ratio:3/4;max-height:54vh;max-height:54dvh;border-radius:16px;overflow:hidden;background:var(--stage-bg)}
.viewfinder video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.viewfinder.on video{opacity:1}
.guide-single{position:absolute;left:50%;top:50%;height:76%;aspect-ratio:63/88;transform:translate(-50%,-50%);border-radius:12px;box-shadow:0 0 0 9999px var(--stage-dim);outline:2px solid var(--frame);pointer-events:none}
.guide-grid{position:absolute;left:50%;top:50%;width:92%;max-height:94%;transform:translate(-50%,-50%);box-shadow:0 0 0 9999px var(--stage-dim);outline:2px solid var(--frame);pointer-events:none}
.guide-grid .cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--cols,3),1fr);grid-template-rows:repeat(var(--rows,3),1fr)}
.guide-grid .cells i{border:1px dashed color-mix(in oklab,var(--frame) 70%,transparent)}
.vf-msg{position:absolute;left:12px;right:12px;bottom:12px;margin:0;text-align:center;color:#fff;font-weight:700;font-size:14px;text-shadow:0 1px 3px #000}
.vf-msg:empty{display:none}
.vf-torch{position:absolute;right:10px;top:10px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center}
.vf-torch svg{width:20px;height:20px}
.vf-torch[aria-pressed="true"]{background:var(--frame);color:#111}
.scan-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.scan-actions .btn{flex:1 1 160px}
.tips{display:grid;gap:6px;margin:14px 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--ink-2)}
.tips li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px}
.tips li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);margin:7px 0 0 4px}
.toggle{display:flex;align-items:center;gap:10px;font-size:14px}
.toggle input{width:20px;height:20px;accent-color:var(--accent);flex:none}
.stage-wrap{display:grid;gap:12px;margin-top:16px}
.stage{position:relative;width:fit-content;max-width:100%;margin-inline:auto;border-radius:12px;overflow:hidden;background:var(--stage-bg);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.stage img{display:block;max-width:100%;max-height:64vh;width:auto;height:auto}
.frame{position:absolute;box-shadow:0 0 0 9999px var(--stage-dim);outline:2px solid var(--frame)}
.cells{position:absolute;inset:0;display:grid}
.cell{border:1px dashed color-mix(in oklab,var(--frame) 70%,transparent);background:transparent;color:var(--frame);font:700 12px/1 var(--f-mono);display:flex;align-items:flex-start;justify-content:flex-start;padding:5px;margin:0;border-radius:0;text-shadow:0 1px 2px var(--stage-bg)}
.cell.skip{background:var(--stage-dim);color:color-mix(in oklab,var(--frame) 60%,transparent)}
.cell.skip::after{content:"saltar";margin:auto;font-size:11px;letter-spacing:.06em}
.h{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--frame);border:3px solid var(--frame-edge);touch-action:none;cursor:grab;z-index:2}
.stage-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.batch{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.batch img{width:100%;aspect-ratio:63/88;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.progress{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:16px;padding:16px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.spinner{width:24px;height:24px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.notice{margin-top:14px;padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.notice.err{border-color:color-mix(in oklab,var(--down) 45%,var(--line))}
.notice .btn{margin-top:10px}
.notice.info{padding:10px 14px;background:var(--accent-soft);border-color:transparent}
.notice.info .muted{color:var(--ink-2);font-size:13.5px}

/* recognised rows (live bar and results) */
.results-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-block:22px 10px}
.results-head h2{font-family:var(--f-display);font-weight:800;font-stretch:112%;font-size:19px}
.res-list{display:grid;gap:8px}
.res{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.res.off{opacity:.55}
.res.off .res-ctrl,.res.off .ver-pick{display:none}
.live-bar{margin-top:12px;border-color:color-mix(in oklab,var(--accent) 45%,var(--line));box-shadow:var(--shadow)}
.res-imgs{display:grid;gap:6px;align-content:start}
.res-imgs img{width:64px;aspect-ratio:63/88;object-fit:cover;border-radius:7px;background:var(--pocket);display:block}
.res-imgs img.ref{outline:2px solid color-mix(in oklab,var(--accent) 50%,transparent);outline-offset:-2px}
.res-main{display:grid;gap:4px;min-width:0}
.res-top{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:20px}
.slotno{font:700 11px var(--f-mono);color:var(--ink-3)}
.tag{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--pocket);border:1px solid var(--line);color:var(--ink-2)}
.tag.warn{background:var(--warn-soft);border-color:color-mix(in oklab,var(--warn) 40%,transparent);color:var(--warn)}
.tag.good{color:var(--up)}
.tag.own{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.res-name{font-weight:700;font-size:16px;line-height:1.2}
.res-meta{font-size:12.5px;color:var(--ink-2)}
.res-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.res-price{margin-left:auto;font:700 14px var(--f-mono);color:var(--gold)}
.res-actions{display:flex;flex-wrap:wrap;gap:14px}
.res-actions .linkbtn{font-size:13.5px}
.ver-pick{display:grid;gap:6px;margin-top:6px;padding:8px;border-radius:10px;background:var(--pocket);border:1px solid var(--line)}
.ver-pick.ask{background:var(--warn-soft);border-color:color-mix(in oklab,var(--warn) 40%,transparent)}
.ver-pick.ask .fine{color:var(--warn);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip-v{min-height:32px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:12.5px;font-weight:700;color:var(--ink-2)}
.chip-v[aria-pressed="true"]{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.chip-v.more{border-style:dashed}
.commit-bar{position:sticky;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:5;display:grid;gap:8px;margin-top:14px;padding:10px;border-radius:16px;background:color-mix(in oklab,var(--bg) 85%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* steppers */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--surface);flex:none}
.stepper button{width:38px;height:38px;border:0;background:none;font-size:19px;font-weight:700;border-radius:999px;line-height:1}
.stepper output{min-width:26px;text-align:center;font:700 15px var(--f-mono)}

/* search & lists */
.result-list{display:grid;gap:6px;margin-top:14px}
.row-card{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.rc-main{display:grid;grid-template-columns:12px minmax(0,1fr);gap:10px;align-items:center;background:none;border:0;padding:4px 0;text-align:left;min-width:0}
.row-card.with-thumb .rc-main{grid-template-columns:44px minmax(0,1fr)}
.rc-thumb{display:block;width:44px;aspect-ratio:63/88;border-radius:5px;overflow:hidden;background:var(--pocket)}
.rc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tdot{width:12px;height:12px;border-radius:50%;background:var(--t);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--ink) 15%,transparent)}
.rc-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-weight:700;line-height:1.25;overflow:hidden}
.rc-meta{display:block;font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-side{display:grid;justify-items:end;gap:2px}
.rc-price{font:700 13.5px var(--f-mono);color:var(--gold)}
.rc-own{font:700 11px var(--f-mono);color:var(--accent)}
.rc-add{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--pocket);font-size:20px;font-weight:700;line-height:1}

/* value */
.value-hero{padding:18px;border-radius:18px;background:var(--surface);border:1px solid var(--line);margin-top:10px}
.value-hero .seg{margin-top:14px}
.history{margin-top:16px}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.chart{display:block;width:100%;height:150px;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.chart .area{fill:color-mix(in oklab,var(--gold) 16%,transparent);stroke:none}
.chart .line{fill:none;stroke:var(--gold);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.chart .dot{fill:var(--gold);stroke:var(--surface);stroke-width:2;vector-effect:non-scaling-stroke}
.chart .lbl{fill:var(--ink-3);font:600 12px var(--f-mono)}
.trend{font:700 12px var(--f-mono);white-space:nowrap}
.trend.up{color:var(--up)}
.trend.down{color:var(--down)}
.top-list{display:grid;gap:6px}
.top-row{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);text-align:left;width:100%}
.top-row .rank{font:700 12px var(--f-mono);color:var(--ink-3)}
.top-row .v{display:grid;justify-items:end;font-variant-numeric:tabular-nums}
.top-row .v b{font:700 14px var(--f-mono);color:var(--gold)}
.top-row .v small{font-size:11.5px;color:var(--ink-3)}
.bars{display:grid;gap:10px}
.bars .b{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;font-size:13.5px;background:none;border:0;padding:0;text-align:left;width:100%}
.bars .b .track{grid-column:1/-1;height:8px;border-radius:4px;background:var(--pocket);border:1px solid var(--line);overflow:hidden}
.bars .b .track i{display:block;height:100%;background:var(--gold);border-radius:3px}
.bars .b .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.bars .b .vv{font:700 13px var(--f-mono)}
.panel{margin-top:28px;padding:18px;border-radius:18px;background:var(--surface);border:1px solid var(--line);display:grid;gap:10px}
.panel h2{font-family:var(--f-display);font-weight:800;font-stretch:112%;font-size:18px}
.status-line{font-size:14px}
.status-line.ok{color:var(--up)}
.status-line.err{color:var(--down)}
.status-line.warn{color:var(--warn)}

/* tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left))}
.tabbar-in{max-width:560px;margin-inline:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 0 3px;border:0;background:none;color:var(--ink-3);font-size:11.5px;font-weight:700;border-radius:12px;-webkit-tap-highlight-color:transparent}
.tab .ico{display:grid;place-items:center;height:30px;padding:0 12px;border-radius:10px}
.tab svg{width:22px;height:22px}
.tab[aria-current="page"]{color:var(--accent)}
.tab[aria-current="page"] .ico{background:var(--accent-soft)}
.tab.scan .ico{background:var(--accent);color:var(--accent-ink);padding:0 16px}
.tab.scan{color:var(--ink-2)}
.tab.scan[aria-current="page"]{color:var(--accent)}
/* with a server: Álbum · Buscar · Escanear · Cambios · Mercado */
.tabbar-in.five{grid-template-columns:repeat(5,1fr);gap:2px}
.tabbar-in.five .tab[data-tab="album"]{order:1}
.tabbar-in.five .tab[data-tab="search"]{order:2}
.tabbar-in.five .tab.scan{order:3}
.tabbar-in.five .tab[data-tab="trades"]{order:4}
.tabbar-in.five .tab[data-tab="market"]{order:5}
.tabbar-in.five .tab .ico{padding:0 10px}
.tabbar-in.five .tab.scan .ico{padding:0 14px}
.tab .ico{position:relative}
.tab-badge{position:absolute;top:-4px;right:-2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--down);color:#fff;font:700 10.5px/14px var(--f-mono);text-align:center;border:2px solid var(--surface)}

/* sheet */
.scrim{position:fixed;inset:0;z-index:40;background:var(--scrim)}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-width:640px;margin-inline:auto;max-height:90vh;max-height:90dvh;overflow:auto;overscroll-behavior:contain;background:var(--surface);border-radius:20px 20px 0 0;padding:6px 16px calc(20px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 30px rgba(0,0,0,.18)}
.grip{width:40px;height:5px;border-radius:3px;background:var(--line);margin:6px auto 10px}
.sheet-close{position:absolute;right:10px;top:10px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:20px;line-height:1}
.sheet-title{font-family:var(--f-display);font-weight:850;font-stretch:115%;font-size:21px;padding-right:44px}
.sheet-title + p{margin-top:8px}
.sheet-h{font-family:var(--f-display);font-weight:800;font-stretch:110%;font-size:15px;margin-top:18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.sheet-h small{font-family:var(--f-body);font-weight:400;font-size:12px;color:var(--ink-3)}
.cd{display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr);gap:16px;align-items:start;margin-top:4px}
.cd-art{position:relative;aspect-ratio:63/88;border-radius:9px;overflow:hidden;border:1px solid color-mix(in oklab,var(--t) 55%,var(--pocket-line));background:color-mix(in oklab,var(--t) 24%,var(--surface))}
.cd-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cd-art .slot-num,.cd-art .slot-name{font-size:12px}
.cd-art.has-img .slot-num,.cd-art.has-img .slot-name{display:none}
.show-img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-height:32px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:12px;font-weight:700;white-space:nowrap}
.cd-info{display:grid;gap:6px;padding-right:40px;min-width:0}
.cd-info h2{font-family:var(--f-display);font-weight:850;font-stretch:115%;font-size:22px;line-height:1.1}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.ver-list{display:grid;gap:8px;margin-top:10px}
.ver-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px}
.lang-pick{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.lang-sel{min-height:34px;padding:0 6px;border-radius:9px;border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:13px}
.lang-sel:focus{outline:3px solid color-mix(in oklab,var(--accent) 45%,transparent);outline-offset:0;border-color:var(--accent)}
.own-langs{color:var(--ink-2)}
.ver-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:var(--pocket);border:1px solid var(--line)}
.ver-main{display:grid;gap:2px;min-width:0}
.ver-price{font:700 15px var(--f-mono);color:var(--gold)}
.sheet-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pick-list{display:grid;gap:6px;margin-top:12px}
.set-sec{display:grid;gap:10px;padding-block:16px;border-bottom:1px solid var(--line)}
.set-sec h3{font-family:var(--f-display);font-weight:800;font-stretch:110%;font-size:16px}
.row{display:flex;flex-wrap:wrap;gap:8px}
.row-between{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.row-between .seg{min-width:200px}
.facts{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.facts li{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.facts li span{color:var(--ink-3)}
.facts li b{text-align:right}
.about{padding-top:14px}
/* account */
.acc-tabs{margin-top:16px}
.acc-form{display:grid;gap:12px;margin-top:14px}
.acc-form.inline{margin-top:4px;padding:12px;border-radius:12px;background:var(--pocket);border:1px solid var(--line)}
.field{display:grid;gap:6px}
.field > span{font-size:13px;font-weight:700;color:var(--ink-2)}
.field > span small{font-weight:400;color:var(--ink-3)}
.field input{width:100%;min-height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-size:16px}
.field input:focus{outline:3px solid color-mix(in oklab,var(--accent) 45%,transparent);outline-offset:0;border-color:var(--accent)}
.acc-form .btn.big{margin-top:4px}
/* a password field with «Mostrar» and the rules of a new password, ticked as it is typed */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:84px}
.pw-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:13.5px}
.pw-rules{list-style:none;margin:-4px 0 0;padding:0;display:grid;gap:4px;font-size:13.5px;color:var(--ink-2)}
.pw-rules li{display:flex;gap:8px;align-items:baseline}
.pw-rules li::before{content:"○";flex:none;width:1em;text-align:center;color:var(--ink-3)}
.pw-rules li.ok{color:var(--up)}
.pw-rules li.ok::before{content:"✓";color:var(--up);font-weight:700}
.pw-rules li.bad{color:var(--down)}
.pw-rules li.bad::before{content:"✗";color:var(--down);font-weight:700}
.steps-list{margin:12px 0 16px;padding-left:22px;display:grid;gap:10px}
/* the code that confirms a purchase, a sale or a trade (js/confirm.js), over everything else */
.codedlg-wrap{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px}
.codedlg-scrim{position:absolute;inset:0;background:var(--scrim)}
.codedlg{position:relative;width:min(420px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--surface);border-radius:18px;padding:18px 18px 12px;box-shadow:0 12px 40px rgba(0,0,0,.32)}
.codedlg .sheet-h{margin:0 0 8px}
.codedlg-what{margin:0 0 6px;font-weight:700}
.codedlg .acc-form{margin-top:8px}
.codedlg input[name="code"]{font:700 22px/1.2 var(--f-mono);letter-spacing:.2em;text-align:center}
.codedlg .fine{margin-bottom:0}
.acc-foot{display:flex;justify-content:center;margin-top:12px}
.acc-choices{display:grid;gap:10px;margin-block:16px 10px}
.acct-who{display:flex;align-items:center;gap:12px}
.acct-who > span:last-child{display:grid;min-width:0}
.acct-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-avatar{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font:850 17px var(--f-display)}
.confirm{display:grid;gap:10px;padding:12px;border-radius:12px;background:var(--pocket);border:1px solid var(--line)}
.linkbtn.danger-link{color:var(--danger);padding:0}
#accountBox:empty,#deleteBox:empty{display:none}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;max-width:calc(100% - 32px);background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:12px;font-weight:700;font-size:14px;box-shadow:var(--shadow)}
body.has-cart .toast{bottom:calc(146px + env(safe-area-inset-bottom,0px))}

/* ---------------- trades & market ---------------- */
.ok-text{color:var(--up)}
.warn-text{color:var(--warn)}
.icon-btn.small{width:34px;height:34px;font-size:18px;line-height:1}
.mk-loading{display:flex;align-items:center;gap:12px;padding:18px 2px;color:var(--ink-2)}
.mk-av{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font:850 16px var(--f-display)}
.mk-person{display:flex;align-items:center;gap:10px;min-width:0}
.mk-who{display:grid;min-width:0}
.mk-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-thumb{position:relative;flex:none;width:44px;aspect-ratio:63/88;border-radius:5px;overflow:hidden;background:color-mix(in oklab,var(--t) 24%,var(--surface));border:1px solid color-mix(in oklab,var(--t) 45%,var(--pocket-line))}
.mk-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mk-tnum{position:absolute;left:4px;top:4px;font:700 9px/1 var(--f-mono);color:var(--ink-2)}
.mk-list{display:grid;gap:6px}
.view .mk-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr))}
.mk-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);text-align:left;color:inherit}
.mk-main{display:grid;gap:3px;min-width:0;flex:1 1 auto;align-content:center}
.mk-main.plain{display:flex;align-items:center;gap:12px;background:none;border:0;padding:0;text-align:left;color:inherit;cursor:pointer}
.mk-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-chips{display:flex;flex-wrap:wrap;gap:4px}
.mk-chips .tag{font-size:11px;padding:1px 7px}
.mk-price{font:700 14px var(--f-mono);color:var(--gold);white-space:nowrap}
.mk-offer-act{display:grid;justify-items:end;gap:4px;flex:none}
.mk-counts{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13.5px;color:var(--ink-2)}
.mk-counts b{font:700 15px var(--f-mono);color:var(--ink)}
.mk-row.match{flex-wrap:wrap}
.mk-row.match .mk-main{flex:1 1 220px}
.mk-hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-top:16px;padding:16px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.mk-hero > div{flex:1 1 240px;display:grid;gap:4px}
.mk-hero .btn{flex:0 0 auto}
.mk-tip{color:var(--warn)}
.mk-me{margin-top:24px}
.mk-closed{margin-top:4px}
.mk-closed summary{cursor:pointer;font-weight:700;color:var(--ink-2);padding:10px 2px;list-style-position:inside}
.mk-closed > .deal-list,.mk-closed > .dupe-list{margin-top:4px}
.mk-gap{margin-top:16px}
.mk-seg{margin-top:12px}
.mk-opts{margin-top:12px}
.mk-row > .mk-person,.mk-seller .mk-person{flex:1 1 auto}
.mk-groups{display:grid;gap:6px}
.mk-group{border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.mk-group > summary{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;list-style:none}
.mk-group > summary::-webkit-details-marker{display:none}
.mk-group > summary::after{content:"";flex:none;width:7px;height:7px;margin:0 4px 3px 2px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg)}
.mk-group[open] > summary::after{transform:rotate(-135deg);margin-bottom:-3px}
.mk-group .set-code{flex:none;min-width:50px;padding:7px 4px}
.mk-gname{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-group > summary .fine{flex:none}
.mk-group > .mk-list{padding:0 8px 8px}
.mk-group .mk-row{background:var(--pocket)}
.mk-msg{margin-top:16px}
[data-balrow]:empty{display:none}
.deal-list{display:grid;gap:6px}
.deal-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);text-align:left;color:inherit}
.deal-row.attn{border-color:color-mix(in oklab,var(--accent) 55%,var(--line));box-shadow:inset 4px 0 0 var(--accent)}
.dr-main{display:grid;gap:2px;min-width:0;flex:1}
.dr-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.dr-last{font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{flex:none;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--accent);color:var(--accent-ink);font:700 12px/22px var(--f-mono);text-align:center}
/* forms */
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:end}
.field textarea{width:100%;min-height:64px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font:inherit;font-size:16px;resize:vertical}
.field textarea:focus,.chat-form textarea:focus,.mk-filter input:focus{outline:3px solid color-mix(in oklab,var(--accent) 45%,transparent);outline-offset:0;border-color:var(--accent)}
.field .select{min-height:48px}
.money{position:relative;display:block}
.money input{padding-right:36px!important}
.money .unit{position:absolute;right:12px;bottom:1px;height:46px;display:grid;place-items:center;color:var(--ink-3);font-weight:700;pointer-events:none}
.money input:disabled{opacity:.5}
/* the card sheet */
.mk-card{display:grid;gap:10px;margin-top:8px}
.mk-mine{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 12px;border-radius:12px;background:var(--accent-soft)}
.mk-mine .linkbtn{margin-left:auto}
.mk-wantline{color:var(--accent);font-weight:700}
.btn.wanted{color:var(--accent)}
.mk-form{display:grid;gap:12px;padding:14px;border-radius:14px;background:var(--pocket);border:1px solid var(--line)}
.mk-form-h{font-weight:700}
.mk-field{display:grid;gap:6px}
.sale-row{align-items:center}
.mk-offers{display:grid;gap:6px}
.mk-langs{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.mk-lp{font-size:13.5px}
.mk-offer{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.mk-offer .mk-main{flex:1 1 170px}
.mk-offer .mk-offer-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
/* duplicates */
.dupe-list{display:grid;gap:6px;margin-top:8px}
.dupe-row{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.dupe-row .ver-pick{margin-top:4px}
.commit-bar.sheet-commit{bottom:0;margin-inline:-8px;background:color-mix(in oklab,var(--surface) 90%,transparent)}
/* a deal */
.deal-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.deal-kind{display:flex;flex-wrap:wrap;gap:6px}
.balance{display:grid;gap:8px;margin-top:14px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.bal-labels{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:8px}
.bal-side{display:grid;gap:2px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.bal-side b{font:800 20px/1.1 var(--f-mono);letter-spacing:0;text-transform:none;color:var(--ink);white-space:nowrap}
.bal-side.r{text-align:right}
.bal-msg{font-weight:700;font-size:13px;padding:5px 10px;border-radius:999px;background:var(--pocket);color:var(--ink-2);text-align:center}
.balance.fair .bal-msg{background:color-mix(in oklab,var(--up) 16%,var(--surface));color:var(--up)}
.balance.plus .bal-msg{background:var(--accent-soft);color:var(--accent)}
.balance.minus .bal-msg{background:var(--warn-soft);color:var(--warn)}
.bal-bar{position:relative;display:flex;height:12px;border-radius:6px;background:var(--pocket)}
.bal-bar i{display:block;height:100%}
.bal-bar i.g{background:var(--gold);border-radius:6px 0 0 6px}
.bal-bar i.r{background:var(--accent);border-radius:0 6px 6px 0}
.bal-mid{position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--ink);border-radius:1px}
.deal-sides{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:4px 18px}
.deal-sides section{display:grid;gap:8px;align-content:start}
.deal-item{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:8px 10px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.deal-item > .mk-main{flex:1 1 180px}
.di-side{display:flex;align-items:center;gap:10px;margin-left:auto}
.deal-money{font:700 14px var(--f-mono);color:var(--gold);padding:9px 12px;border-radius:10px;background:var(--gold-soft)}
.deal-actions{display:grid;gap:10px;margin-top:16px}
.center-row{justify-content:center;margin-top:10px}
.deal-info{display:grid;gap:8px;margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--pocket);border:1px solid var(--line)}
.deal-info p{display:grid;gap:1px}
.chat{display:flex;flex-direction:column;gap:8px;margin-top:10px;max-height:56vh;max-height:56dvh;overflow:auto;padding:12px;border-radius:14px;background:var(--pocket);border:1px solid var(--line)}
.msg{display:grid;gap:2px;max-width:84%}
.msg span{padding:8px 12px;border-radius:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.mine{align-self:flex-end}
.msg.mine span{background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:4px}
.msg.theirs{align-self:flex-start}
.msg.theirs span{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg time{font-size:11px;color:var(--ink-3)}
.msg.mine time{text-align:right}
.msg.sys{align-self:center;max-width:94%;text-align:center}
.msg.sys span{padding:2px 6px;font-size:12.5px;color:var(--ink-2)}
.chat-form{display:flex;align-items:flex-end;gap:8px;margin-top:10px}
.chat-form textarea{flex:1;min-width:0;min-height:46px;max-height:140px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font:inherit;font-size:16px;resize:none}
/* the market */
.mk-tabs{margin-top:14px}
.mk-tabs button{padding:0 4px;white-space:nowrap}
.mk-filterbar{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:10px}
.mk-filterbar .mk-filter{flex:0 1 190px}
.mk-filter{display:grid;gap:4px;font-size:12px;font-weight:700;color:var(--ink-3);min-width:0}
.mk-filter .select{min-height:40px;font-size:14px;padding:0 8px}
.mk-filter input{width:100%;min-height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-size:16px}
.mk-filter .money .unit{height:38px}
.mk-filters{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));align-items:end;gap:10px;margin-top:10px;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.mk-filter.wide{grid-column:1/-1}
#mkPane > .mk-filter.wide{margin-top:12px}
.mk-count{margin:14px 0 8px}
.mk-focus{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px;padding:10px 12px;border-radius:14px;background:var(--accent-soft)}
.mk-more{margin-top:10px}
.mk-pockets{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px;margin-top:8px}
.slot.forsale{border-color:var(--gold);border-style:solid;box-shadow:inset 0 0 0 1px var(--gold)}
.slot-price{position:absolute;left:4px;right:4px;bottom:4px;z-index:1;padding:3px 2px;border-radius:4px;background:var(--gold);color:var(--bg);font:700 10px/1 var(--f-mono);text-align:center}
.slot.forsale .slot-name{bottom:23px}
.mk-seller{border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.mk-seller > .mk-row{border:0;background:none}
.mk-seller.open{border-color:color-mix(in oklab,var(--accent) 50%,var(--line))}
.mk-lot{display:grid;gap:6px;padding:0 12px 12px}
.mk-lot .deal-item{background:var(--pocket)}
.mk-lot .btn{justify-self:start;margin-top:4px}
.cart-group{display:grid;gap:8px;padding-block:16px;border-bottom:1px solid var(--line)}
.cart-group > .btn{justify-self:start}
.cart-bar{position:fixed;left:50%;bottom:calc(78px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:29;width:min(560px,calc(100% - 24px));display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 16px;border-radius:14px;background:var(--ink);color:var(--bg);box-shadow:0 6px 20px rgba(0,0,0,.25);font-size:14px}
body.has-cart .app{padding-bottom:calc(160px + env(safe-area-inset-bottom,0px))}
/* marks on the album pockets */
.mk-badges{position:absolute;left:4px;top:19px;z-index:1;display:flex;gap:2px}
.slot.has-img .mk-badges{top:4px}
.mk-badges i{display:grid;place-items:center;width:16px;height:16px;border-radius:4px;background:var(--surface);border:1px solid var(--line);font:700 10px/1 var(--f-body);font-style:normal;color:var(--ink-2)}
.mk-badges .b-trade{color:var(--accent)}
.mk-badges .b-sale{color:var(--gold)}
.mk-badges .b-want{color:var(--down)}

/* intermediated deals: steps, payment, the shipment code */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:14px 0 0;padding:0;list-style:none;counter-reset:s}
.steps li{display:grid;justify-items:center;gap:4px;font-size:11.5px;font-weight:700;color:var(--ink-3);text-align:center;position:relative}
.steps li span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:var(--surface);font:700 12px var(--f-mono);color:var(--ink-3);position:relative;z-index:1}
.steps li:not(:first-child)::before{content:"";position:absolute;top:13px;right:50%;width:100%;height:2px;background:var(--line)}
.steps li.done span{background:var(--up);border-color:var(--up);color:var(--surface)}
.steps li.done,.steps li.now{color:var(--ink)}
.steps li.done::before,.steps li.now::before{background:var(--up)}
.steps li.now span{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.deal-next{display:grid;gap:10px;margin-top:14px}
.step-card{display:grid;gap:10px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.step-card .sheet-h{margin-top:0}
.step-card.ship{border-color:color-mix(in oklab,var(--accent) 45%,var(--line))}
.step-note{padding:0 2px}
.pay-lines{width:100%;border-collapse:collapse;font-size:14px}
.pay-lines td{padding:6px 0;border-bottom:1px solid var(--line)}
.pay-lines td:last-child{text-align:right;font:600 14px var(--f-mono);white-space:nowrap;padding-left:12px}
.pay-lines tr.total td{border-bottom:0;font-weight:800;font-size:15px}
.pay-lines tr.total td:last-child{font:800 16px var(--f-mono);color:var(--ink)}
.test-note{font-size:12.5px;font-weight:700;color:var(--warn);background:var(--warn-soft);padding:6px 10px;border-radius:10px}
.code-box{display:grid;justify-items:center;gap:8px;padding:14px;border-radius:14px;background:var(--pocket);border:2px dashed color-mix(in oklab,var(--accent) 50%,var(--line));text-align:center}
.code-box .code{font-size:clamp(24px,8vw,34px);letter-spacing:.06em;color:var(--ink);user-select:all}
.hub{display:grid;gap:4px;padding:12px 14px;border-radius:12px;background:var(--pocket);border:1px solid var(--line)}
.hub p{font-weight:700;line-height:1.5}
.ship-form{display:grid;gap:10px}
.ship-form .btn{justify-self:start}
.quote-box{display:grid;gap:4px;margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--accent-soft)}
.quote-line{color:var(--ink-2)}
.chat-rule{margin-top:4px}
.msg.staff{align-self:center;max-width:94%;display:grid;gap:2px;text-align:left}
.msg.staff b{font-size:12px;color:var(--accent)}
.msg.staff span{background:var(--accent-soft);border:1px solid color-mix(in oklab,var(--accent) 35%,transparent);border-radius:12px}
.deal-item.rejected{border-color:color-mix(in oklab,var(--warn) 45%,var(--line));background:color-mix(in oklab,var(--warn-soft) 55%,var(--surface))}
.how{margin-top:18px}
.how-list{margin:6px 0 0;padding-left:20px;display:grid;gap:6px;font-size:14px;color:var(--ink-2)}
.payout-hero{margin-top:14px}
/* settings: address, payouts, plans */
.set-row{padding-block:4px}
.set-row > span{display:grid;gap:1px}
.plan-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:8px;margin-top:12px}
.plan{display:grid;gap:8px;align-content:start;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.plan.current{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.plan-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.plan ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:13.5px;color:var(--ink-2)}
.plan .btn,.plan .tag{justify-self:start}
/* the administrator's panel */
.ad-tabs{display:flex;gap:4px;overflow-x:auto;margin-top:14px;padding:3px;border-radius:12px;background:var(--pocket);border:1px solid var(--line);scrollbar-width:none}
.ad-tabs button{flex:none;border:0;background:none;min-height:38px;padding:0 12px;border-radius:9px;font-weight:700;font-size:13.5px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.ad-tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.ad-tabs .badge{min-width:20px;height:20px;line-height:20px;font-size:11px}
.ad-sum{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:13.5px;color:var(--ink-2)}
.ad-sum b{font:800 15px var(--f-mono);color:var(--ink)}
.ad-problems ul{margin:6px 0 0;padding-left:18px;display:grid;gap:4px;font-size:13.5px}
.ad-code{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:16px}
.ad-code .field{flex:1 1 220px}
.ad-code #adCode{font:700 20px var(--f-mono);letter-spacing:.05em;text-transform:uppercase}
.ad-row .tag{flex:none}
.ad-ship{margin-top:12px}
.ad-bundle .ad-part{padding:8px 0;border-top:1px dashed var(--line)}
.ad-bundle .ad-part:first-of-type{border-top:0}
.ad-items{display:grid;gap:6px}
.ad-item{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 10px;border-radius:10px;background:var(--pocket);border:1px solid var(--line)}
.ad-item.ok{border-color:color-mix(in oklab,var(--up) 50%,var(--line))}
.ad-item.rejected{border-color:color-mix(in oklab,var(--warn) 55%,var(--line));background:color-mix(in oklab,var(--warn-soft) 60%,var(--surface))}
.ad-card{flex:1 1 260px;min-width:0}
.ad-seg{flex:0 0 auto;min-width:190px}
.ad-note{flex:1 1 100%;min-height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:15px}
.ad-address{display:grid;gap:6px;justify-items:start}
.ad-address pre{margin:0;padding:10px 12px;border-radius:10px;background:var(--pocket);border:1px solid var(--line);font:600 14px/1.45 var(--f-body);white-space:pre-wrap;width:100%}
.ad-send{align-items:end}
.ad-table{width:100%;border-collapse:collapse;font-size:13.5px}
.ad-table th,.ad-table td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
.ad-table th{font-size:12px;color:var(--ink-3)}
.ad-flags{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.ad-flags li{padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:14px}
.ad-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:10px;align-items:end}
.ad-plan{display:grid;gap:8px;padding:12px;border-radius:12px;background:var(--pocket);border:1px solid var(--line);margin-bottom:8px}
.ad-money{display:grid;gap:10px;margin-top:14px}
.ad-held .hint{margin:8px 0 10px}
.ad-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.ad-tags:empty{display:none}
.ad-log{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.ad-log li{padding:8px 10px;border-radius:10px;background:var(--pocket);border:1px solid var(--line);font-size:13.5px;overflow-wrap:anywhere}
.ad-addr{margin:6px 0 10px;padding:10px 12px;border-radius:10px;background:var(--pocket);border:1px solid var(--line);font:600 14px/1.45 var(--f-body);white-space:pre-wrap}
.ad-secret{border-color:color-mix(in oklab,var(--accent) 45%,var(--line))}
.secret-pw{font-size:22px;font-weight:700;letter-spacing:.06em;margin:6px 0;user-select:all;overflow-wrap:anywhere}
.ad-reauth{max-width:440px;margin:6vh auto 0}
.qr-box{display:flex;justify-content:center;margin:10px 0}
.qr{width:min(220px,70vw);height:auto;border-radius:10px;border:1px solid var(--line);background:#fff}
.secret{user-select:all;overflow-wrap:anywhere;font-weight:700}
.codes{columns:2;column-gap:24px;margin:10px 0;padding-left:22px;font-size:15px;line-height:1.9}
h4.sheet-h{font-size:13px;margin-top:12px}
.ad-chat{max-height:46vh}
.chips label.chip-v{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.chips label.chip-v input{accent-color:var(--accent);width:18px;height:18px;min-height:0;padding:0;margin:0;flex:none}

@media (min-width:760px){
  .view-title{font-size:34px}
  .cd{grid-template-columns:minmax(0,170px) minmax(0,1fr)}
  .viewfinder{aspect-ratio:4/3}
}
@media (prefers-reduced-motion: reduce){
  .spinner{animation-duration:2.4s}
  .sync-btn[data-state="busy"] svg{animation:none}
  *{scroll-behavior:auto!important}
}

/* ---------- games ---------- */
.game-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:14px -2px 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.game-chips::-webkit-scrollbar{display:none}
.game-chips:empty{display:none}
.gchip{flex:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:46px;padding:6px 15px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer}
.gchip b{font-family:var(--f-display);font-weight:800;font-stretch:108%;font-size:14.5px;line-height:1.1;white-space:nowrap}
.gchip small{font-size:11.5px;line-height:1.1;color:var(--ink-3);white-space:nowrap}
.gchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.gchip[aria-pressed="true"] small{color:color-mix(in oklab,var(--bg) 72%,transparent)}
.gchip.pending b{opacity:.75}
.game-chips.small{margin-top:10px}
.game-chips.small .gchip{min-height:36px;padding:4px 12px;border-radius:11px}
.game-chips.small .gchip small{display:none}
.elsewhere .hint{margin:4px 0 0}
.elsewhere .game-chips{margin-top:8px}
.binder.g-ygo .slot,.binder.g-ygo .mk-pockets .slot{aspect-ratio:59/86}
/* Hot Wheels: wider pockets, and the whole photo (loose cars are wide, carded ones tall) */
.binder.g-hw .slot{aspect-ratio:4/3}
.binder.g-hw .slot img,.cd.g-hw .cd-art img,.rc-thumb.wide img,.mk-thumb.wide img,.ver-pic img{object-fit:contain;background:var(--pocket)}
.binder.g-hw .slot-name{-webkit-line-clamp:2}
.cd.g-hw{grid-template-columns:minmax(0,170px) minmax(0,1fr)}
.cd.g-hw .cd-art{aspect-ratio:4/3}
.rc-thumb.wide,.mk-thumb.wide{aspect-ratio:4/3;width:58px}
.ver-row.with-pic .ver-main{flex:1}
.ver-pic{flex:none;width:72px;aspect-ratio:4/3;border-radius:7px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.ver-pic img{width:100%;height:100%;display:block}
.games-list{display:grid;gap:4px;margin-top:8px}
.games-list label{display:flex;align-items:center;gap:10px;min-height:40px}
.games-list input{width:20px;height:20px;accent-color:var(--accent);flex:none}
.games-list .fine{margin-left:auto}
.credits{display:grid;gap:6px}

/* ---------------- 1.6: stars, ratings, phrases, offers, someone's page ---------------- */
.stars-mini{color:var(--star);font-weight:700;white-space:nowrap}
.stars-mini small{color:var(--ink-3);font-weight:400}
.mk-person.link{background:none;border:0;padding:0;text-align:left;color:inherit;cursor:pointer;border-radius:12px}
.mk-person.link:hover b{text-decoration:underline}
.seller-line{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3)}
.seller-link{padding:2px 0;font-size:13px}
.mk-row.offer > .mk-main{display:grid;gap:4px;min-width:0;flex:1 1 auto}
.stars-row{display:inline-flex;gap:1px;font-size:16px;line-height:1;color:var(--star-off)}
.stars-row i{font-style:normal}
.stars-row i.on{color:var(--star)}
.rate-card{display:grid;gap:10px;margin-top:14px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid color-mix(in oklab,var(--star) 45%,var(--line))}
.rate-card .sheet-h{margin-top:0}
.rate-card.done{border-color:var(--line)}
.stars-pick{display:flex;align-items:center;gap:4px}
.stars-pick .star{width:48px;height:48px;border-radius:12px;border:1px solid var(--line);background:var(--pocket);font-size:26px;line-height:1;color:var(--star-off);cursor:pointer}
.stars-pick .star.on{color:var(--star);border-color:color-mix(in oklab,var(--star) 50%,var(--line));background:color-mix(in oklab,var(--star) 12%,var(--surface))}
.star-word{margin-left:8px;font-weight:700;color:var(--ink-2)}
.chip-v.neg[aria-pressed="true"]{background:var(--warn);color:var(--surface)}
.rate-tags{display:flex;flex-wrap:wrap;gap:6px}
.phrases{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.phrase{min-height:36px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.phrase:active{background:var(--accent-soft)}
.phrase.help{border-style:dashed;color:var(--accent)}
.haggle{display:grid;gap:10px;margin-top:14px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid color-mix(in oklab,var(--accent) 40%,var(--line))}
.hg-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:var(--ink-2)}
.hg-row b{font:700 15px var(--f-mono)}
.hg-row.now{color:var(--ink)}
.mk-price.big{font-size:20px}
.hg-save{margin-top:-6px;color:var(--up)}
.hg-opts{display:flex;flex-wrap:wrap;gap:6px}
.hg-opts .chip-v b{font-family:var(--f-mono)}
.offer-box{display:grid;gap:10px;margin-top:12px;padding:12px;border-radius:14px;background:var(--pocket);border:1px solid var(--line)}
.offer-box .chips{display:flex;flex-wrap:wrap;gap:6px}
.offer-amount{display:flex;align-items:center;justify-content:center;gap:16px}
.offer-amount .icon-btn{width:44px;height:44px;font-size:22px}
.buy-box{display:grid;gap:8px;margin-top:18px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.buy-box .sheet-h{margin:0}
.buy-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0}
.buy-empty{padding:10px 12px;border-radius:12px;background:var(--pocket)}
.buy-empty p{margin:0}
.buy-empty p + p{margin-top:4px}
.src{font-size:11px;font-weight:700;color:var(--ink-3);margin-left:4px}
.src.own{color:var(--accent)}
.toggle.perfect{font-weight:700}
.mk-notices p{margin:0 0 6px}
.up-head{display:flex;align-items:center;gap:14px;margin-top:10px}
.up-head .mk-av{width:56px;height:56px;font-size:24px}
.up-head h2{margin:0;font:850 24px/1.1 var(--f-display)}
.up-rating{display:grid;gap:10px;margin-top:16px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.up-rating .sheet-h{margin:4px 0 0}
.up-score{display:flex;align-items:center;gap:12px}
.up-avg{font:850 40px/1 var(--f-display)}
.up-score > div{display:grid;gap:2px}
.up-score .stars-row{font-size:20px}
.dist{display:grid;gap:3px}
.dist-row{display:grid;grid-template-columns:34px minmax(0,1fr) 24px;align-items:center;gap:8px;font-size:12px;color:var(--ink-3)}
.dist-row i{display:block;height:8px;border-radius:99px;background:var(--pocket);overflow:hidden}
.dist-row i b{display:block;height:100%;background:var(--star);border-radius:99px}
.dist-row small{text-align:right}
.up-tags{display:flex;flex-wrap:wrap;gap:6px}
.tag.hl{background:color-mix(in oklab,var(--star) 14%,var(--surface));border-color:color-mix(in oklab,var(--star) 40%,var(--line));color:var(--ink)}
.tag.hl b{color:var(--ink-2)}
.up-issues{margin-top:8px}
.reviews{display:grid;gap:8px;margin-top:8px}
.review{display:grid;gap:4px;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.review .chips{display:flex;flex-wrap:wrap;gap:4px}
.up-tabs{margin-top:18px}
.up-list{margin-top:10px}
.up-item.picked{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.up-item .mk-offer-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.lot-bar{position:sticky;bottom:calc(84px + env(safe-area-inset-bottom, 0px));display:grid;gap:8px;margin-top:14px;padding:12px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--accent);box-shadow:var(--shadow);z-index:2}
.lot-bar p{margin:0}
.lot-bar.composing{position:static}
/* joint orders */
.cart-all{display:grid;gap:10px;margin-top:12px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--accent);box-shadow:var(--shadow)}
.cart-all .sheet-h{margin:0}
.bundle-box{display:grid;gap:8px;margin-top:14px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.bundle-box .sheet-h{margin:0}
.bundle-box .deal-row.current{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
/* the panel's «Imágenes»: what each collection takes on the server's disk */
.ad-disk{margin:10px 0 14px;font-size:14.5px}
.ad-imgs{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.ad-img .facts{margin:8px 0}
.ad-img .facts li b{text-align:right}
.ad-img .row{align-items:center}