:root {
  --paper:#EBEFF2; --card:#FFF; --line:#CBD5DC; --line-soft:#DDE4E9;
  --ink:#151B22; --ink-2:#4A5763; --ink-3:#71818E;
  --accent:#1C7F9E; --owned:#25784F; --spare:#B26A12; --spare-bg:#F7E3C4;
  --holo:#7C3FA8; --holo-bg:#EEE2F8; --foil:#0F6E8A; --foil-bg:#D9EDF4;
  --std:#5B6B78; --std-bg:#E3E9ED; --bad:#B3261E;
  --shadow:0 1px 2px rgba(21,27,34,.06), 0 8px 24px -18px rgba(21,27,34,.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#0E1319; --card:#161D25; --line:#2C3742; --line-soft:#232C35;
    --ink:#E4EAEF; --ink-2:#A2B0BC; --ink-3:#75838F;
    --accent:#54BEDC; --owned:#4FC58A; --spare:#E4A45E; --spare-bg:#3A2C13;
    --holo:#C79BE8; --holo-bg:#301C43; --foil:#6FCBE4; --foil-bg:#0F313D;
    --std:#8C9BA7; --std-bg:#242D36; --bad:#F2B8B5;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -18px rgba(0,0,0,.8);
  }
}
*,*::before,*::after { box-sizing:border-box; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font:15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; padding-bottom:env(safe-area-inset-bottom);
}
a { color:var(--accent); }
h1 { font-size:clamp(22px,5vw,30px); margin:0 0 6px; letter-spacing:-.01em; }
h2 { font-size:19px; margin:28px 0 8px; }
.lede { color:var(--ink-2); margin:0 0 16px; max-width:62ch; }
.meta { color:var(--ink-3); font-size:12px; }
.empty, .notice { color:var(--ink-3); padding:14px; background:var(--card);
  border:1px solid var(--line); border-radius:6px; }
.error { color:var(--bad); }
.detail { background:var(--card); border:1px solid var(--line); padding:10px;
  border-radius:6px; overflow-x:auto; font-size:12px; }

.topbar { display:flex; gap:12px; align-items:center; padding:10px 14px;
  padding-top:calc(10px + env(safe-area-inset-top)); background:var(--card);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.brand { font-weight:700; text-decoration:none; color:var(--ink); white-space:nowrap; }
.search { flex:1; }
.search input, .filters input, .filters select {
  width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:8px;
  background:var(--paper); color:var(--ink); font-size:16px; }
.tabs { display:flex; gap:2px; overflow-x:auto; padding:8px 10px; background:var(--card);
  border-bottom:1px solid var(--line); position:sticky; top:52px; z-index:4; }
.tabs a { padding:7px 12px; border-radius:999px; text-decoration:none; color:var(--ink-2);
  font-size:13px; white-space:nowrap; }
.tabs a:hover { background:var(--paper); color:var(--ink); }
main { max-width:1000px; margin:0 auto; padding:18px 14px 60px; }

.stats { display:flex; flex-wrap:wrap; margin:0 0 22px; background:var(--card);
  border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); overflow:hidden; }
.stat { flex:1 1 90px; padding:12px 14px; border-right:1px solid var(--line-soft); }
.stat:last-child { border-right:0; }
.stat b { display:block; font-size:26px; line-height:1; font-variant-numeric:tabular-nums; }
.stat span { display:block; margin-top:5px; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); }
.stat.spare b { color:var(--spare); } .stat.premium b { color:var(--holo); }

.capture { text-align:center; padding:20px 0; }
.shoot { display:inline-block; margin:14px 0; padding:20px 40px; background:var(--accent);
  color:#fff; border-radius:14px; font-size:18px; font-weight:600; cursor:pointer; }
.shoot:active { transform:scale(.98); }
.or { color:var(--ink-3); font-size:14px; }
.status { margin-top:14px; padding:10px; border-radius:8px; }
.status.working { background:var(--std-bg); color:var(--ink-2); }
.status.bad { background:var(--spare-bg); color:var(--spare); }

.compare { display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:760px) { .compare { grid-template-columns:300px 1fr; } }
.shot img { width:100%; border-radius:10px; border:1px solid var(--line); }
.shot figcaption { text-align:center; color:var(--ink-3); font-size:12px; margin-top:6px; }
.cands { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
.cand { display:flex; flex-direction:column; gap:6px; padding:8px; cursor:pointer; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:10px; color:var(--ink); }
.cand:first-child { border-color:var(--accent); border-width:2px; }
.cand img { width:100%; aspect-ratio:5/7; object-fit:contain; border-radius:6px; }
.cand .lab { font-size:13px; font-weight:600; }
.cand .meta { font-size:11px; }

dialog { border:none; border-radius:14px; padding:22px; background:var(--card); color:var(--ink);
  box-shadow:var(--shadow); max-width:420px; width:92%; }
dialog::backdrop { background:rgba(0,0,0,.5); }
.hint { font-size:13px; color:var(--ink-3); }
.finishes { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0; }
.fin, .primary, .addfin, .trade, .undo, button[type=submit] {
  padding:12px; border-radius:10px; border:1px solid var(--line); background:var(--paper);
  color:var(--ink); font-size:15px; cursor:pointer; }
.fin { font-weight:600; }
.primary { background:var(--accent); color:#fff; border-color:transparent; font-weight:600; }
.ghost { background:none; border:none; color:var(--ink-3); cursor:pointer; padding:8px; }
.trade, .undo, .addfin { padding:6px 10px; font-size:12px; }

.tw { overflow-x:auto; background:var(--card); border:1px solid var(--line);
  border-radius:8px; box-shadow:var(--shadow); }
table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:8px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tr.reversed { opacity:.5; }
tr.done .name a { color:var(--owned); }
.num { font-variant-numeric:tabular-nums; color:var(--accent); white-space:nowrap; }
.name { width:100%; }
.qty, .spare { text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap; }
.spare { color:var(--spare); font-weight:600; }
.thumb { width:26px; height:36px; object-fit:contain; vertical-align:middle; margin-right:8px;
  border-radius:3px; }
.thumb.big { width:70px; height:98px; }
.chip { display:inline-block; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 7px; border-radius:4px; margin-right:4px; }
.c-holo { background:var(--holo-bg); color:var(--holo); }
.c-foil, .c-foil_holo { background:var(--foil-bg); color:var(--foil); }
.c-standard { background:var(--std-bg); color:var(--std); }
.c-done { background:var(--std-bg); color:var(--owned); }
.mult { font-size:11px; color:var(--ink-3); margin-right:10px; }
.tag { font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px;
  border-radius:4px; background:var(--spare-bg); color:var(--spare); vertical-align:middle; }

.bar { display:flex; align-items:center; gap:8px; min-width:160px; }
.track { flex:1; height:7px; background:var(--std-bg); border-radius:99px; overflow:hidden; }
.fill { height:100%; background:var(--accent); }
.pct { font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; }

.filters { display:flex; gap:8px; margin:0 0 16px; flex-wrap:wrap; }
.filters input { flex:1; min-width:160px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
.cardtile { display:flex; flex-direction:column; gap:5px; padding:9px; background:var(--card);
  border:1px solid var(--line); border-radius:10px; text-decoration:none; color:var(--ink); }
.cardtile img { width:100%; aspect-ratio:5/7; object-fit:contain; border-radius:6px; }
.cardtile .lab { font-size:12px; font-weight:600; }
.cardtile.missing { opacity:.72; }
.cardtile.owned { border-color:var(--owned); }

.result { display:flex; gap:12px; align-items:flex-start; padding:12px; margin-bottom:10px;
  background:var(--card); border:1px solid var(--line); border-radius:10px; }
.result.owned { border-left:3px solid var(--owned); }
.result .info { flex:1; }
.result .lab { font-weight:600; }
.result .need { color:var(--ink-3); font-size:13px; }
.result .have { margin-top:5px; font-size:13px; color:var(--owned); }
.addbox { display:flex; flex-direction:column; gap:4px; }

.stack { display:flex; flex-direction:column; gap:10px; max-width:320px; }
.stack input { padding:11px; border:1px solid var(--line); border-radius:8px;
  background:var(--card); color:var(--ink); font-size:16px; }
.notconf { background:var(--card); border:1px solid var(--line); border-left:3px solid var(--spare);
  border-radius:8px; padding:14px; }
.notconf pre { background:var(--paper); padding:10px; border-radius:6px; overflow-x:auto; font-size:12px; }

.toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--ink); color:var(--paper); padding:12px 18px; border-radius:10px;
  font-size:14px; box-shadow:var(--shadow); z-index:50; max-width:92%; }


/* Secondary capture route: pick an existing photo from the library */
.shoot.secondary { background:var(--card); color:var(--ink); border:1px solid var(--line);
  font-size:16px; padding:15px 30px; }
.capture .shoot { display:block; width:100%; max-width:320px; margin:12px auto; text-align:center; }

/* Session controls */
footer.session { display:flex; gap:8px; justify-content:center; padding:0 14px 34px; }
footer.session form { margin:0; }
footer.session .ghost { font-size:12px; }
footer.session .danger { color:var(--bad); }

/* Login fields */
.field { display:flex; flex-direction:column; gap:5px; }
.field span { font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }


/* ---------- Collection rows -------------------------------------------------
   A list, not a table. At 390px a table's name column collapses to one word per
   line; this keeps the name on one or two lines and the controls reachable. */
ul.cards { list-style:none; margin:0; padding:0; background:var(--card);
  border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);
  overflow:hidden; }
.crow { display:flex; align-items:center; gap:11px; padding:9px 12px;
  border-bottom:1px solid var(--line-soft); }
.crow:last-child { border-bottom:0; }
.cimg { width:34px; height:47px; flex:0 0 34px; object-fit:contain; border-radius:4px;
  background:var(--std-bg); }
.cimg.blank { display:block; }
.cmain { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.cname { font-size:14px; font-weight:500; line-height:1.25;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cmeta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:11px;
  color:var(--ink-3); }
.cnum { font-variant-numeric:tabular-nums; color:var(--accent); }
.chave { font-variant-numeric:tabular-nums; }
.cspare { color:var(--spare); font-weight:600; }
.crow .trade { flex:0 0 auto; padding:7px 11px; font-size:12px; border-radius:8px; }

/* ---------- Nav: wrap instead of clipping ---------------------------------- */
.tabs { flex-wrap:wrap; overflow:visible; row-gap:4px; }
.tabs a { font-size:12.5px; padding:6px 10px; }

/* ---------- Stats: never break a label onto two lines --------------------- */
.stat span { white-space:nowrap; }
.stat { padding:11px 12px; }

@media (max-width:430px) {
  .topbar { gap:8px; padding-left:11px; padding-right:11px; }
  .brand { font-size:14px; }
  .search input { font-size:15px; padding:8px 10px; }
  .tabs { top:48px; }
  main { padding:14px 11px 60px; }
  h1 { font-size:22px; }
  .stat b { font-size:22px; }
  .stat span { font-size:9px; letter-spacing:.07em; }
  .crow { padding:8px 10px; gap:9px; }
  .cimg { width:30px; height:42px; flex-basis:30px; }
  .cname { font-size:13.5px; }
}

/* Quantity editor */
.qty-edit { background:none; border:0; padding:2px 4px; margin:-2px -4px; font:inherit;
  font-size:11px; color:var(--ink-3); cursor:pointer; border-radius:5px;
  border-bottom:1px dashed var(--line); }
.qty-edit:hover { background:var(--paper); color:var(--ink); }
.qty-edit b.cspare { font-weight:600; }
#qtyDlg .stack { max-width:none; }
#qtyInput { font-size:24px; text-align:center; font-variant-numeric:tabular-nums;
  padding:12px; border:1px solid var(--line); border-radius:10px;
  background:var(--paper); color:var(--ink); }
.quickadd { display:flex; gap:6px; }
.qa { flex:1; padding:10px 0; font-size:13px; border-radius:8px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); cursor:pointer; }
.qa:active { background:var(--std-bg); }
.hint.warn { color:var(--spare); }

/* Finish filter tabs on the collection */
.subtabs { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px; }
.subtabs a { display:inline-flex; align-items:center; gap:6px; padding:7px 12px;
  border-radius:999px; text-decoration:none; font-size:13px; font-weight:500;
  background:var(--card); border:1px solid var(--line); color:var(--ink-2); }
.subtabs a .n { font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.subtabs a.on { border-color:transparent; }
.subtabs a.on .n { color:inherit; opacity:.75; }
.subtabs a.on:not(.f-holo):not(.f-foil):not(.f-foil_holo):not(.f-standard) {
  background:var(--ink); color:var(--paper); }
.subtabs a.f-holo.on { background:var(--holo-bg); color:var(--holo); border-color:var(--holo); }
.subtabs a.f-foil.on, .subtabs a.f-foil_holo.on {
  background:var(--foil-bg); color:var(--foil); border-color:var(--foil); }
.subtabs a.f-standard.on { background:var(--std-bg); color:var(--ink); border-color:var(--std); }

/* ---------- Full-size card view ------------------------------------------- */
.cimg-btn { padding:0; border:0; background:none; cursor:zoom-in; flex:0 0 auto;
  line-height:0; border-radius:4px; }
button.cname { padding:0; border:0; background:none; font:inherit; font-size:14px;
  font-weight:500; color:inherit; text-align:left; cursor:pointer; line-height:1.25;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
button.cname:hover { color:var(--accent); }

dialog.lightbox { max-width:min(96vw,460px); width:auto; padding:0; background:none;
  border:0; overflow:visible; }
dialog.lightbox::backdrop { background:rgba(0,0,0,.86); }
dialog.lightbox img { display:block; width:100%; height:auto; max-height:76vh;
  object-fit:contain; border-radius:10px; cursor:zoom-out;
  box-shadow:0 18px 50px -12px rgba(0,0,0,.8); }
.lb-info { margin-top:12px; text-align:center; display:flex; flex-direction:column; gap:3px; }
.lb-info #lbLabel { color:#fff; font-size:15px; font-weight:600; }
.lb-info .meta { color:rgba(255,255,255,.62); font-size:12px; }
.lb-close { position:absolute; top:-42px; right:-4px; width:34px; height:34px;
  border-radius:50%; border:0; background:rgba(255,255,255,.16); color:#fff;
  font-size:22px; line-height:1; cursor:pointer; }
.cardtile.card-open { cursor:zoom-in; }
.cardtile.card-open:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }