:root, :root[data-theme=light] {
  --bg: #f4f5f9; --panel: #ffffff; --panel2: #eef0f5; --ink: #12141a; --muted: #6b7280; --line: #e3e6ee;
  --accent: #3b6cf5; --accent-ink: #fff; --good: #12935a; --bad: #d23b30;
  --grad: linear-gradient(135deg, #4f7cff, #9b5cff); --grad-soft: linear-gradient(135deg, rgba(79,124,255,.10), rgba(155,92,255,.08));
  --poke: #e8b100; --rift: #8a5cf6;
  --radius: 16px;
  color-scheme: light;
}
/* dark: follows the phone unless picked in More › App settings */
:root[data-theme=dark] { --bg: #0a0c11; --panel: #13161e; --panel2: #1b1f29; --ink: #eef0f5; --muted: #8d95a5; --line: #242936;
  --accent: #6b93ff; --good: #34d17f; --bad: #ff6a5c; --grad-soft: linear-gradient(135deg, rgba(91,140,255,.16), rgba(162,107,255,.10)); color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) { --bg: #0a0c11; --panel: #13161e; --panel2: #1b1f29; --ink: #eef0f5; --muted: #8d95a5; --line: #242936;
          --accent: #6b93ff; --good: #34d17f; --bad: #ff6a5c; --grad-soft: linear-gradient(135deg, rgba(91,140,255,.16), rgba(162,107,255,.10)); color-scheme: dark; }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
button, input, select { font: inherit; color: inherit; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
[hidden] { display: none !important; }

.top { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { font-weight: 800; font-size: 19px; letter-spacing: -.3px; }
.brand span { color: var(--accent); }
.total { font-variant-numeric: tabular-nums; font-weight: 700; }

main { max-width: 980px; margin: 0 auto; padding: 14px 16px; }
.tab { display: none; }
.tab.active { display: block; }

.tabs { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: var(--panel); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom); z-index: 5; }
.tabs button { flex: 1; padding: 14px 0; background: none; border: 0; font-weight: 600; color: var(--muted); }
.tabs button.on { color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }

.seg { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin-bottom: 12px; }
.seg button { flex: 1; border: 0; background: none; padding: 7px 0; border-radius: 999px; font-weight: 600; color: var(--muted); }
.seg button.on { background: var(--accent); color: var(--accent-ink); }

.scanbtn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink); cursor: pointer; text-align: center; user-select: none; }
.scanbtn span { font-size: 19px; font-weight: 700; }
.scanbtn small { opacity: .85; }
.scanbtn:active { transform: scale(.99); }

.scanstate { display: flex; gap: 12px; align-items: center; margin-top: 12px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px; }
.scanstate img { width: 56px; height: 78px; object-fit: cover; border-radius: 6px; background: var(--line); }
.scanstate > div { flex: 1; }
.bar { height: 6px; background: var(--line); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }

.search { margin: 12px 0; }
input[type=search], input[type=number], select { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; text-align: left; padding: 0; }
.tile img { width: 100%; aspect-ratio: 63/88; object-fit: cover; background: var(--line); display: block; }
.tile .meta { padding: 8px 10px 10px; }
.tile .nm { font-weight: 650; font-size: 14px; line-height: 1.25; }
.tile .st { color: var(--muted); font-size: 12px; margin-top: 2px; }
.tile .pr { font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.tile.best { outline: 2px solid var(--accent); }
.hint { color: var(--muted); padding: 10px 2px; grid-column: 1 / -1; }

.tag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 2px 7px;
  border-radius: 999px; color: #fff; }
.tag.pokemon { background: var(--poke); color: #3a2c00; }
.tag.riftbound { background: var(--rift); }
.tag.cyberpunk { background: #c8102e; }

.row { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.row.wrap { flex-wrap: wrap; }
.row.wrap > * { flex: 1 1 140px; }
.row.end { justify-content: flex-end; }
.gap { gap: 10px; }

.summary { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); margin: 4px 2px 10px; }
.summary b { color: var(--ink); font-variant-numeric: tabular-nums; }

.list { display: flex; flex-direction: column; gap: 8px; }
.item { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px 12px 8px 8px; cursor: pointer; }
.item img { width: 46px; height: 64px; object-fit: cover; border-radius: 5px; background: var(--line); flex: none; }
.item .mid { flex: 1; min-width: 0; }
.item .nm { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .st { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .rt { text-align: right; font-variant-numeric: tabular-nums; flex: none; }
.item .rt b { display: block; }
.item .rt span { color: var(--muted); font-size: 12.5px; }
.list.compact .item { padding: 6px 10px 6px 6px; }
.list.compact .item img { width: 34px; height: 47px; }
/* collection views */
.coll-filters select { width: auto; flex: 1 1 120px; }
.coll-filters input[type=search] { flex: 1 1 100%; }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.ctile { position: relative; cursor: pointer; border-radius: 8px; }
.ctile img { width: 100%; aspect-ratio: 63/88; object-fit: cover; border-radius: 7px; background: var(--line); display: block; }
.ctile .qty { position: absolute; top: 5px; left: 5px; background: rgba(0,0,0,.72); color: #fff; font-weight: 700; font-size: 12px;
  border-radius: 999px; padding: 1px 7px; }
.ctile .shiny { position: absolute; top: 5px; right: 5px; font-size: 10px; font-weight: 800; letter-spacing: .03em; color: #1b1400;
  border-radius: 999px; padding: 2px 6px; background: linear-gradient(90deg, #7dd3fc, #c4b5fd, #f9a8d4, #fde68a); }
.ctile .cap { font-size: 12px; margin-top: 4px; line-height: 1.25; }
.ctile .cap b { display: block; font-variant-numeric: tabular-nums; }
.ctile .cap span { color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctile.missing img { opacity: .28; filter: grayscale(1); }
.ctile.missing .cap { color: var(--muted); }
.ctile .noimg-num { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-weight: 700; }
.setrow { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; cursor: pointer; }
.setrow .mid { flex: 1; min-width: 0; }
.setrow .nm { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setrow .st { color: var(--muted); font-size: 12.5px; }
.setrow .rt { text-align: right; font-variant-numeric: tabular-nums; flex: none; }
.setrow .rt span { display: block; color: var(--muted); font-size: 12.5px; }
.prog { height: 6px; background: var(--line); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--good); border-radius: 3px; }
.prog.done i { background: linear-gradient(90deg, #f5b301, #ffd86b); }
.set-head { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.set-head .top { display: flex; gap: 10px; align-items: center; }
.set-head .top .nm { flex: 1; font-weight: 700; min-width: 0; }
.set-head .back { border: 0; background: none; color: var(--accent); font-weight: 650; padding: 4px 6px 4px 0; cursor: pointer; font-size: 15px; }
.set-head .seg { margin: 10px 0 0; }
.up { color: var(--good); } .down { color: var(--bad); }
/* wishlist */
.wishbox { display: flex; gap: 8px; align-items: flex-end; margin: 8px 0 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.wishbox label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.item.hit { border-color: var(--good); box-shadow: inset 3px 0 0 var(--good); }
.item .rt .tgt { display: block; }
.ctile .wish { position: absolute; bottom: 38px; right: 5px; font-size: 13px; background: rgba(0,0,0,.72); color: #ffd86b;
  border-radius: 999px; padding: 0 6px; }
/* extras */
.offline { margin-left: auto; margin-right: 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #1b1400;
  background: #f5b301; border-radius: 999px; padding: 2px 8px; }
.offline.stale { background: var(--bad); color: #fff; }
.offline + .offline.stale { margin-left: 0; }
.badges { display: inline-flex; gap: 4px; flex-wrap: wrap; vertical-align: middle; }
.bdg { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 0 6px; line-height: 17px; border: 1px solid var(--line); color: var(--muted); }
.bdg.trade { color: var(--accent); border-color: var(--accent); }
.bdg.sale { color: var(--good); border-color: var(--good); }
.bdg.grade { color: #1b1400; background: #ffd86b; border-color: #ffd86b; }
.ctile .grade { position: absolute; bottom: 38px; left: 5px; font-size: 10px; font-weight: 800; background: #ffd86b; color: #1b1400;
  border-radius: 999px; padding: 1px 6px; }
.spark svg { width: 100%; height: 34px; display: block; margin-top: 4px; }
#shMine { margin-top: 2px; font-weight: 600; }
.sellbox { display: flex; gap: 8px; align-items: flex-end; margin: 8px 0 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.sellbox label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); flex: 1; }
.sellbox input[type=number] { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.form input:not([type=number]):not([type=checkbox]) { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.trade-cols { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 760px) { .trade-cols { grid-template-columns: 1fr 1fr; } }
.trade-cols input[type=search] { margin-bottom: 6px; }
.list.pick .item { border: 1px dashed var(--line); padding: 4px 8px 4px 4px; }
.list.pick:empty { display: none; }
.trade-sum { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; font-variant-numeric: tabular-nums; }
.trade-sum .big { font-size: 22px; font-weight: 800; }
.mini { display: inline-flex; align-items: center; gap: 4px; }
.mini button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; font-weight: 700; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px 10px; margin: 6px 0 12px; }
.settings-grid label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); gap: 2px; }
.settings-grid input, .settings-box select { width: 100%; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
#importBox ul { margin: 6px 0; padding-left: 18px; }
#tagBar a { word-break: break-all; }
#sealedAdd input { margin-bottom: 6px; }
.item .st.sealed-edit { white-space: normal; overflow: visible; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 4px; }
.sealed-edit input { border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.item .rt .mini { margin-top: 4px; }
/* shop check */
.shopbtn { display: block; width: 100%; margin: -4px 0 12px; padding: 9px; border-radius: 999px; border: 1px dashed var(--line);
  background: var(--panel); font-weight: 700; color: var(--muted); cursor: pointer; }
.shopbtn[aria-pressed=true] { border: 1px solid #f5b301; background: #f5b301; color: #1b1400; }
.hit.shopping { flex-wrap: wrap; }
.shop { flex-basis: 100%; display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center;
  border-top: 1px solid var(--line); padding-top: 8px; }
.shop input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 18px; font-weight: 700; }
.shop .verdict { grid-column: 1 / -1; font-weight: 750; font-size: 16px; }
.shop .verdict.great, .shop .verdict.good { color: var(--good); }
.shop .verdict.meh { color: #c98a00; }
.shop .verdict.bad { color: var(--bad); }
.shop .cm { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; }
#shDeal { font-size: 12.5px; font-weight: 650; }
/* set goals */
.goals { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.goals h3 { margin: 2px 2px 0; font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
.goalrow { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid #f5b301; border-radius: 12px;
  padding: 10px 12px; cursor: pointer; }
.goalrow .mid { flex: 1; min-width: 0; }
.goalrow .nm { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goalrow .st { color: var(--muted); font-size: 12.5px; }
.goalrow .rt { text-align: right; font-variant-numeric: tabular-nums; flex: none; }
.goalrow .rt span { display: block; color: var(--muted); font-size: 12.5px; }
.goal-pick { display: flex; flex-direction: column; gap: 6px; }
.goal-pick .list { max-height: 260px; overflow: auto; }
.goalbar { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 10px; font-size: 13px; }
.goalbar .grow { flex: 1 1 160px; }
.goalbar button { padding: 6px 10px; font-size: 13px; }
.goalbar .btn.on { background: #f5b301; border-color: #f5b301; color: #1b1400; }
/* selling */
.sellbox { flex-wrap: wrap; }
.sellbox label { flex: 1 1 30%; min-width: 96px; }
.sellbox select { width: 100%; padding: 10px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.sellnet { flex: 1 1 100%; font-size: 13px; color: var(--muted); }
.sellnet b { color: var(--ink); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { text-align: right; padding: 5px 4px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl th { color: var(--muted); font-weight: 600; font-size: 12px; }
.tblwrap { overflow-x: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; }
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 8px 0; }
.report-grid div { background: var(--bg); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; color: var(--muted); }
.report-grid b { display: block; font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
/* own photos + listing helper */
.photos { display: flex; gap: 8px; overflow-x: auto; margin: 12px 0 0; padding-bottom: 2px; }
.photos .ph { position: relative; flex: none; }
.photos img { width: 72px; height: 100px; object-fit: cover; border-radius: 6px; display: block; background: var(--line); cursor: zoom-in; }
.photos .ph button { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.65); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
.photos .add { flex: none; width: 72px; height: 100px; border: 1px dashed var(--line); border-radius: 6px; display: grid; place-items: center;
  text-align: center; font-size: 12px; color: var(--muted); cursor: pointer; }
.listing { margin: 12px 0 0; }
.listing textarea, .listing input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  font: 13px/1.4 system-ui, sans-serif; color: var(--ink); }
.listing textarea { min-height: 120px; resize: vertical; }
.listing .lrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 10px 0 4px; font-size: 12.5px; color: var(--muted); }
.listing .lrow button { padding: 3px 10px; font-size: 12.5px; }
.tabs .dot { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--good);
  color: #fff; font-size: 11px; font-style: normal; line-height: 18px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 12px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.kpi .l { color: var(--muted); font-size: 12.5px; }
.kpi .v { font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; margin-top: 2px; }
.card-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; }
.card-box h3 { margin: 0 0 10px; font-size: 15px; }
.card-box h3 small { color: var(--muted); font-weight: 400; }
.card-box .item { border: 0; padding-left: 0; background: none; }
.chart svg { width: 100%; height: 180px; display: block; }
.chart .empty { color: var(--muted); padding: 30px 0; text-align: center; }

.btn { border: 1px solid var(--line); background: var(--panel); padding: 10px 16px; border-radius: 10px; font-weight: 650; cursor: pointer;
  text-decoration: none; color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.danger { color: var(--bad); }
.btn.ghost { background: none; }

.sheet { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.sheet-body { position: relative; width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; background: var(--panel);
  border-radius: 18px 18px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); }
@media (min-width: 700px) { .sheet { align-items: center; } .sheet-body { border-radius: 18px; } }
.x { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 28px; color: var(--muted); cursor: pointer; }
.sheet-head { display: flex; gap: 14px; }
.sheet-head img { width: 120px; aspect-ratio: 63/88; object-fit: cover; border-radius: 8px; background: var(--line); flex: none; }
.sheet-head h2 { margin: 6px 0 2px; font-size: 19px; line-height: 1.2; }
.price-big { font-size: 26px; font-weight: 800; margin-top: 8px; font-variant-numeric: tabular-nums; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 6px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.qty { display: flex; }
.qty button { width: 42px; border: 1px solid var(--line); background: var(--bg); font-size: 18px; }
.qty button:first-child { border-radius: 10px 0 0 10px; } .qty button:last-child { border-radius: 0 10px 10px 0; }
.qty input { border-radius: 0; text-align: center; border-left: 0; border-right: 0; }

.toast { position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30;
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-weight: 600; max-width: 90vw; }

/* cards without artwork in the catalog (very new sets) */
img.noimg { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63 88'%3E%3Crect width='63' height='88' rx='4' fill='%23888' fill-opacity='.18'/%3E%3Cpath d='M22 38h19v12H22z' fill='none' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E"); }

/* ---- live scan ---- */
.scanbtns { display: flex; gap: 10px; }
.scanbtns .scanbtn { flex: 1; padding: 18px 10px; }
.scanbtns .scanbtn span { font-size: 17px; }
.scanbtns .scanbtn small { font-size: 12px; }
#photoBtn:not(:only-child) { background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
#httpsHint { margin: 8px 2px 0; }
.live { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; aspect-ratio: 3 / 4; max-height: 62vh; margin: 0 auto 10px; }
.live video { width: 100%; height: 100%; object-fit: cover; display: block; }
.guide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.guide i { height: 84%; aspect-ratio: 63 / 88; border: 3px solid rgba(255,255,255,.9); border-radius: 12px;
  box-shadow: 0 0 0 999px rgba(0,0,0,.35); transition: border-color .2s; }
.guide.ok i { border-color: #3ccf7f; }
.live-status { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; color: #fff; font-size: 13px; font-weight: 600;
  text-shadow: 0 1px 3px #000; }
.live-close { position: absolute; top: 6px; right: 8px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5);
  color: #fff; font-size: 22px; cursor: pointer; }
.hit { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 2px solid var(--accent); border-radius: var(--radius);
  padding: 10px; margin-bottom: 10px; }
.hit img { width: 64px; aspect-ratio: 63/88; object-fit: cover; border-radius: 6px; background: var(--line); flex: none; cursor: pointer; }
.hit .mid { flex: 1; min-width: 0; cursor: pointer; }
.hit .nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hit .st { color: var(--muted); font-size: 12.5px; }
.hit .pr { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hit .owned { color: var(--good); font-size: 12.5px; font-weight: 600; }
.addbtn { flex: none; width: 56px; height: 56px; border-radius: 14px; border: 0; background: var(--accent); color: var(--accent-ink);
  font-size: 30px; font-weight: 700; cursor: pointer; }
.addbtn:active { transform: scale(.94); }
.tile { position: relative; }
.tile .plus { position: absolute; top: 6px; right: 6px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--accent);
  color: var(--accent-ink); font-size: 24px; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,.35); cursor: pointer; }
.live-auto { position: absolute; top: 6px; left: 8px; border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 700;
  background: rgba(0,0,0,.55); color: #fff; cursor: pointer; }
.live-auto[aria-pressed=true] { background: #f5b301; color: #1b1400; }
.live-foil { position: absolute; top: 48px; left: 8px; border: 0; border-radius: 999px; padding: 7px 12px; font-weight: 700; font-size: 13px;
  background: rgba(0,0,0,.55); color: #fff; cursor: pointer; }
.live-foil[aria-pressed=true] { background: linear-gradient(120deg, #7dd3fc, #c4b5fd, #f9a8d4, #fde68a); color: #1a1530; }
.hit.picking { display: block; padding: 8px; }
.pickstrip { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 2px; scroll-snap-type: x mandatory; }
.pk { position: relative; flex: none; width: 112px; scroll-snap-align: start; cursor: pointer; }
.pk img { width: 100%; aspect-ratio: 63/88; object-fit: cover; border-radius: 6px; background: var(--line); display: block; }
.pk-nm { font-weight: 650; font-size: 12.5px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-st { color: var(--muted); font-size: 11.5px; line-height: 1.25; }
.pk-pr { font-weight: 750; font-size: 13px; font-variant-numeric: tabular-nums; }
.pk .plus { position: absolute; top: 4px; right: 4px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--accent);
  color: var(--accent-ink); font-size: 22px; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,.35); cursor: pointer; }
.pick-title { grid-column: 1 / -1; font-weight: 700; padding: 4px 2px 0; }
.live-gear { position: absolute; top: 48px; right: 8px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5);
  color: #fff; font-size: 18px; cursor: pointer; }
.shine-meter { position: absolute; left: 10px; right: 10px; bottom: 30px; height: 8px; border-radius: 4px; background: rgba(0,0,0,.45); }
.shine-meter i { display: block; height: 100%; width: 0; border-radius: 4px; background: #9aa1ad; transition: width .1s; }
.shine-meter.hot i { background: linear-gradient(90deg, #7dd3fc, #c4b5fd, #f9a8d4, #fde68a); }
.shine-meter b { position: absolute; top: -3px; width: 2px; height: 14px; background: #fff; }
.shine-meter span { position: absolute; right: -2px; top: -18px; font-size: 13px; }
.shine-panel .row { margin: 0 0 6px; flex-wrap: wrap; }
.shine-panel input[type=range] { width: 100%; }
.tag.exp { background: #f5b301; color: #1b1400; }
.guide.added i { border-color: #f5b301; box-shadow: 0 0 0 999px rgba(245,179,1,.25); }
.session { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px 12px; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.session .grow { flex: 1; min-width: 0; }
.session .last { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session button { flex: none; border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 6px 10px; font-weight: 650; cursor: pointer; }
.toast { display: flex; gap: 14px; align-items: center; }
.toast button { background: none; border: 0; color: var(--accent); font-weight: 800; padding: 0; cursor: pointer; }
.toast { bottom: auto; top: calc(62px + env(safe-area-inset-top)); width: min(92vw, 440px); border-radius: 12px; justify-content: space-between;
  box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.live { height: min(54vh, 133vw); max-height: none; width: auto; max-width: 100%; }
.pk-more { align-self: stretch; border: 1px dashed var(--line); border-radius: 8px; background: var(--bg); color: var(--accent);
  font-weight: 700; padding: 8px; }
#gradeLinks { grid-column: 1 / -1; color: var(--muted); }
#gradeLinks:empty { display: none; }

/* PIN lock */
.pin-lock { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 20px; }
.pin-box { width: 100%; max-width: 320px; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 20px; }
.pin-box h3 { margin: 6px 0 4px; }
.pin-icon { font-size: 34px; }
.pin-box input { width: 100%; box-sizing: border-box; margin: 10px 0 6px; padding: 12px; font-size: 22px; letter-spacing: 6px; text-align: center;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); }
.pin-err { color: var(--bad); min-height: 1.3em; margin-bottom: 6px; }
.pin-box .btn { width: 100%; }

/* binder page scan */
.pagebtn { margin-top: 10px; width: 100%; flex-direction: row; gap: 10px; padding: 12px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); justify-content: flex-start; text-align: left; flex-wrap: wrap; }
.pagebtn small { flex-basis: 100%; }
.page-view { margin-top: 12px; }
.page-view .bar { margin: 6px 0 10px; }
.page-grid { display: grid; gap: 6px; }
.pg-cell { position: relative; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg); cursor: pointer; min-height: 90px; }
.pg-cell img { width: 100%; aspect-ratio: 63/88; object-fit: cover; display: block; opacity: .55; }
.pg-cell.on { border-color: var(--good); }
.pg-cell.on img { opacity: 1; }
.pg-cell.maybe, .pg-cell.pick { border-color: #d39b00; }
.pg-cell.empty { opacity: .6; }
.pg-cell.added { border-color: var(--good); opacity: .75; cursor: default; }
.pg-cell.added img { opacity: 1; }
.pg-cell.added .pg-badge { background: var(--good); color: #fff; }
.pg-badge { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; background: var(--panel); color: var(--muted); }
.pg-cell.on .pg-badge { background: var(--good); color: #fff; }
.pg-cell.maybe .pg-badge, .pg-cell.pick .pg-badge { background: #d39b00; color: #fff; }
.pg-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 5px; background: rgba(0,0,0,.72); color: #fff; font-size: 11px;
  line-height: 1.25; display: flex; flex-direction: column; }
.pg-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-cell.loading { display: grid; place-items: center; aspect-ratio: 63/88; }
.pg-spin { width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: pgspin 0.8s linear infinite; }
@keyframes pgspin { to { transform: rotate(360deg); } }
.pg-choose { display: flex; gap: 10px; align-items: flex-start; }
.pg-shot { width: 96px; border-radius: 6px; flex: none; }
.pg-opts { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pg-opt { display: flex; gap: 8px; align-items: center; text-align: left; padding: 6px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.pg-opt img { width: 40px; aspect-ratio: 63/88; object-fit: cover; border-radius: 4px; background: var(--line); flex: none; }
.pg-opt span:nth-child(2) { flex: 1; min-width: 0; }
.pg-q { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; }
.pg-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; }

/* ---------- Tools tab ---------- */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.toolbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 14px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; }
.toolbtn .ti { font-size: 24px; }
.toolbtn small { color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.toolhead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.toolhead h2 { margin: 0; font-size: 19px; }
#toolView label:not(.item), .ebay-box label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--muted); }
#toolView input:not([type=checkbox]):not([type=number]):not([type=search]), #toolView textarea,
.ebay-box input:not([type=checkbox]):not([type=number]), .ebay-box textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); font: inherit; box-sizing: border-box; }
#toolView .settings-grid input, .ebay-box .settings-grid input, .ebay-box .settings-grid select { padding: 7px 8px; }
.ebay-box textarea { resize: vertical; }
.ebay-box h3 small { font-weight: 400; }
.steps { padding-left: 20px; line-height: 1.5; }
.steps code { word-break: break-all; background: var(--bg); padding: 1px 4px; border-radius: 4px; }
.item.buyrow, .item.cmrow { cursor: pointer; }
.item.buyrow input, .item.cmrow input { width: 18px; height: 18px; flex: none; }
.item.cmrow.done { opacity: .55; }
.item .rt a { display: block; font-size: 12.5px; margin-top: 2px; }
.chip.spike { border-color: var(--good); }
.chip.dupe { border-color: var(--accent); }
.opening { border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin: 8px 0; background: var(--panel); }
.opening.active { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.opening .rt { text-align: right; }
.opening .rt b { display: block; font-size: 17px; }
.open-banner { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px;
  padding: 8px 10px; border: 1px solid var(--accent); border-radius: 12px; background: var(--panel); font-size: 14px; }
.open-banner .btn { padding: 5px 12px; margin-left: 6px; }
/* binder pages */
.bpage { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin: 0 0 12px; break-inside: avoid; page-break-inside: avoid; }
.bph { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.bgrid { display: grid; gap: 6px; }
.pocket { aspect-ratio: 63/88; border-radius: 6px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; font-size: 11px; }
.pocket.own img { width: 100%; height: 100%; object-fit: cover; }
.pocket.own span { position: absolute; bottom: 2px; right: 3px; background: rgba(0,0,0,.65); color: #fff; padding: 0 4px; border-radius: 4px; font-size: 10.5px; }
.pocket.miss { border: 1.5px dashed var(--line); color: var(--muted); padding: 4px; }
.pocket.miss b { color: var(--ink); font-size: 13px; }
.pocket.miss small { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pocket.miss i { font-size: 10px; margin-top: 2px; }
@media print {
  body.printing header, body.printing .tabs, body.printing .noprint, body.printing .toolhead, body.printing #toast { display: none !important; }
  body.printing main { padding: 0; max-width: none; }
  body.printing .bpage { border: 0; page-break-after: always; padding: 0; }
  body.printing .pocket.miss { border-color: #999; color: #555; }
}
/* decks */
.cdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 4px 0 1px; vertical-align: 0; background: var(--muted); }
.cdot.red { background: #e5484d; } .cdot.green { background: #30a46c; } .cdot.blue { background: #3e8ef7; } .cdot.yellow { background: #f5c400; }
.curve { display: flex; align-items: flex-end; gap: 4px; height: 60px; margin: 10px 0; }
.curve div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; font-size: 11px; color: var(--muted); }
.curve i { display: block; width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 1px; }
.dkrow .mini span { min-width: 18px; text-align: center; font-weight: 700; }
button.chip { background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; font-size: 12.5px; text-align: left; }
.item .chip { border-radius: 10px; white-space: normal; }
.tbl td div.small { white-space: normal; min-width: 150px; max-width: 260px; }
.sheet-body > .row.end { flex-wrap: wrap; }

/* Stats: settings/backups folded away, long lists cut to 5 */
.more-box > summary { cursor: pointer; font-weight: 600; font-size: 15px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.more-box > summary::-webkit-details-marker { display: none; }
.more-box > summary::after { content: "▾"; color: var(--muted); transition: transform .15s; }
.more-box[open] > summary::after { transform: rotate(180deg); }
.more-box[open] > summary { margin-bottom: 10px; }
.more-box .card-box { background: none; border: 0; padding: 0; margin: 0; }
.more-sec { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.more-sec h3 { margin: 0 0 8px; font-size: 15px; }
.show-all { display: block; width: 100%; margin-top: 6px; background: none; border: 0; color: var(--accent); font: inherit; font-size: 13px; padding: 6px; cursor: pointer; }

/* ================= look: shared tokens, header, icon tab bar, surfaces ================= */
@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
html, body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); letter-spacing: -.005em; }
h2, h3, .brand, .kpi .v, .price-big, .hit .pr { letter-spacing: -.02em; }

header.top { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); padding-top: calc(12px + env(safe-area-inset-top)); }
.brand { display: flex; align-items: center; gap: 8px; font-size: 19px; }
.brand .logo { width: 26px; height: 26px; flex: none; }
.brand span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
header .total { text-align: right; line-height: 1.1; }
header .total small { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
header .total b { font-size: 17px; font-weight: 750; }

/* bottom bar: icon + label, Scan raised in the middle */
.tabs { background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px); border-top: 1px solid var(--line); align-items: flex-end; }
.tabs button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 10px; font-size: 11px; font-weight: 600;
  letter-spacing: .01em; cursor: pointer; position: relative; }
.tabs button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabs button.on { color: var(--ink); box-shadow: none; }
.tabs button.on:not(.scan-fab) svg { stroke: var(--accent); }
.tabs button.on:not(.scan-fab)::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; border-radius: 0 0 2px 2px; background: var(--grad); }
.tabs .scan-fab i { display: grid; place-items: center; width: 56px; height: 56px; margin-top: -26px; border-radius: 50%; background: var(--grad);
  box-shadow: 0 8px 22px -6px rgba(91, 140, 255, .65), 0 0 0 5px var(--bg); color: #fff; transition: transform .15s; }
.tabs .scan-fab i svg { width: 26px; height: 26px; stroke-width: 2.1; }
.tabs .scan-fab:active i { transform: scale(.94); }
.tabs .scan-fab.on span { color: var(--ink); }

/* surfaces */
.card-box, .item, .setrow, .set-head, .kpi, .toolbtn, .scanstate, .goalrow { border-radius: 16px; }
.card-box { padding: 14px 16px; }
.card-box h3 { font-size: 15px; font-weight: 700; }
.item { gap: 12px; transition: background .12s, border-color .12s; }
.item:active, .toolbtn:active, .setrow:active { background: var(--panel2); }
.item img, .ctile img, .tile img, .pk img, .hit img, .sheet-head img { box-shadow: 0 2px 8px rgba(0, 0, 0, .28); }
.item img { border-radius: 6px; }
.item .rt b { font-weight: 700; }
.seg { background: var(--panel2); border: 0; padding: 4px; }
.seg button { font-size: 13.5px; cursor: pointer; }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
input[type=search], input[type=number], select, .form input:not([type=number]):not([type=checkbox]) { border-radius: 12px; background: var(--panel2); border-color: var(--line); }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 0; }
.btn { border-radius: 12px; }
.btn.primary, .addbtn, .tile .plus, .pk .plus { background: var(--grad); border-color: transparent; }
.btn.primary { box-shadow: 0 6px 16px -8px rgba(91, 140, 255, .8); }
.tag { font-size: 10px; letter-spacing: .06em; padding: 2px 7px; }
.toast { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); }

/* page + section headings (Market, More) */
.page-h { font-size: 24px; font-weight: 800; margin: 4px 2px 14px; }
.sec-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 20px 2px 10px; }
.page-h + .sec-h, .page-h + .market-tiles { margin-top: 0; }

/* scan page: one bold primary action */
.scanbtn { background: var(--grad); box-shadow: 0 14px 30px -14px rgba(91, 140, 255, .9); border-radius: 18px; }
.scanbtn svg { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); }
#photoBtn:not(:only-child), .pagebtn { background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.pagebtn svg { color: var(--accent); }
#photoBtn:not(:only-child) svg { color: var(--accent); }
.shopbtn { border-radius: 12px; }

/* portfolio: the total leads */
.kpis .kpi:first-child { grid-column: 1 / -1; background: var(--grad-soft), var(--panel); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); padding: 16px 18px; }
.kpis .kpi:first-child .v { font-size: 34px; font-weight: 800; }
.kpi .l { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.kpi .v { font-weight: 750; }

/* tool tiles: icon on a tinted square */
.tools-grid { gap: 10px; }
.toolbtn { padding: 14px; gap: 4px; transition: background .12s; }
.toolbtn .ti { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--panel2); font-size: 21px; margin-bottom: 6px; }
.toolbtn b { font-size: 14.5px; }
.market-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.market-tiles .toolbtn { align-items: center; text-align: center; padding: 12px 6px; }
.market-tiles .toolbtn small { display: none; }
.market-tiles .toolbtn b { font-size: 13px; }

/* card sheet */
.sheet-bg { background: rgba(4, 6, 10, .6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.sheet-body { border-radius: 22px 22px 0 0; border-top: 1px solid var(--line); padding-top: 22px; }
.sheet-body::before { content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--line); }
.sheet-head img { border-radius: 10px; }
.price-big { font-size: 28px; }

.brand b { font-weight: 800; }
.scanbtn { border: 0; }
#photoBtn:not(:only-child), .pagebtn { border: 1px solid var(--line); }
.qty button { background: var(--panel2); border-color: var(--line); cursor: pointer; }
#viewSeg button { font-size: 12.5px; }
.toolhead .btn.ghost { border: 0; padding: 6px 4px 6px 0; color: var(--accent); }
.toolhead h2 { font-size: 21px; font-weight: 800; }
#toolBody #settingsBox > h3:first-child { display: none; }

/* ================= scan screen ================= */
#gameSeg { margin-bottom: 14px; }
.scanbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.scanbtns .scanbtn { padding: 14px; }
/* primary: big gradient card with a viewfinder drawing */
.scan-hero { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; text-align: left;
  padding: 20px 18px !important; min-height: 150px; position: relative; overflow: hidden; }
.scan-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.22), transparent 55%); pointer-events: none; }
.scan-hero .hero-tx { display: flex; flex-direction: column; gap: 6px; position: relative; }
.scan-hero .hero-tx > span { font-size: 24px !important; font-weight: 800; letter-spacing: -.02em; }
.scan-hero small { font-size: 13.5px !important; opacity: .9; max-width: 200px; line-height: 1.35; }
.scan-hero em { font-style: normal; font-weight: 700; font-size: 13px; margin-top: 6px; align-self: flex-start; padding: 6px 12px;
  border-radius: 999px; background: rgba(255,255,255,.2); }
.hero-vf { position: relative; flex: none; width: 74px; height: 102px; }
.hero-vf i { position: absolute; inset: 8px 10px; border-radius: 7px; background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.55); }
.hero-vf b { position: absolute; inset: 0; --c: #fff; --l: 16px; --w: 3px; border-radius: 4px;
  background: linear-gradient(var(--c), var(--c)) 0 0 / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 0 0 / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 100% 0 / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 0 100% / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 100% 100% / var(--w) var(--l);
  background-repeat: no-repeat; }
.hero-vf b::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; border-radius: 2px; background: #fff;
  box-shadow: 0 0 10px 2px rgba(255,255,255,.7); animation: vfscan 2.4s ease-in-out infinite; }
@keyframes vfscan { 0%, 100% { top: 14%; } 50% { top: 84%; } }
/* secondary: photo + binder page side by side */
.scan-alt { align-items: flex-start !important; text-align: left; gap: 2px !important; background: var(--panel) !important; color: var(--ink) !important;
  border: 1px solid var(--line) !important; box-shadow: none !important; margin: 0; width: auto; flex-wrap: nowrap; }
.scan-alt svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; margin-bottom: 8px;
  box-sizing: content-box; padding: 8px; border-radius: 11px; background: var(--panel2); filter: none; }
.scan-alt > span { font-size: 15px !important; font-weight: 700; }
.scan-alt small { color: var(--muted); font-size: 12px !important; opacity: 1; }
/* no live camera (plain http): photo scan is the main action */
#liveBtn[hidden] + #photoBtn { grid-column: 1 / -1; background: var(--grad) !important; color: #fff !important; border: 0 !important; }
#liveBtn[hidden] + #photoBtn svg { stroke: #fff; background: rgba(255,255,255,.18); }
#liveBtn[hidden] + #photoBtn small { color: #fff; opacity: .85; }
/* shop check: a setting row with a switch */
.shopbtn { display: flex; align-items: center; gap: 12px; margin: 10px 0 0; padding: 11px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); color: var(--ink); text-align: left; font-weight: 400; }
.shopbtn .sh-ic { font-size: 18px; }
.shopbtn .sh-tx { flex: 1; display: flex; flex-direction: column; }
.shopbtn .sh-tx b { font-size: 14.5px; }
.shopbtn .sh-tx small { color: var(--muted); font-size: 12px; }
.shopbtn .sw { flex: none; width: 42px; height: 25px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); position: relative; transition: background .15s; }
.shopbtn .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .15s; }
.shopbtn[aria-pressed=true] { border-color: #f5b301; background: color-mix(in srgb, #f5b301 10%, var(--panel)); color: var(--ink); }
.shopbtn[aria-pressed=true] .sw { background: #f5b301; border-color: #f5b301; }
.shopbtn[aria-pressed=true] .sw::after { transform: translateX(17px); }
.shopbtn[aria-pressed=true] .sh-tx small { color: #d99a00; }
/* search with a magnifier */
.search { margin: 14px 0 12px; }
#q { padding-left: 40px; background: var(--panel2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d95a5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") 13px 50% / 18px no-repeat; }

/* live camera: corner brackets, scan line, glass controls (the frame's size/position is what the scanner reads) */
.live { border-radius: 22px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.8); margin-bottom: 12px; }
.guide i { position: relative; border: 0; border-radius: 14px; --c: rgba(255,255,255,.95); --l: 34px; --w: 4px;
  background: linear-gradient(var(--c), var(--c)) 0 0 / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 0 0 / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 100% 0 / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 0 100% / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) var(--w), linear-gradient(var(--c), var(--c)) 100% 100% / var(--w) var(--l);
  background-repeat: no-repeat; box-shadow: 0 0 0 999px rgba(5,7,12,.5); }
.guide i::after { content: ""; position: absolute; left: 8%; right: 8%; height: 2px; border-radius: 2px; top: 10%;
  background: linear-gradient(90deg, transparent, #8fb0ff, transparent); box-shadow: 0 0 12px 2px rgba(120,160,255,.55);
  animation: vfscan 2.2s ease-in-out infinite; }
.guide.ok i { --c: #34d17f; }
.guide.ok i::after, .guide.added i::after { display: none; }
.guide.added i { --c: #f5b301; box-shadow: 0 0 0 999px rgba(245,179,1,.22); }
.live-status { left: 50%; right: auto; bottom: 14px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px);
  padding: 7px 14px; border-radius: 999px; background: rgba(10,12,17,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12); text-shadow: none; font-size: 13px; white-space: normal; text-align: center; }
.live-close, .live-gear, .live-auto, .live-foil { background: rgba(10,12,17,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14); }
.live-close { top: 10px; right: 10px; } .live-gear { top: 54px; right: 10px; }
.live-auto { top: 10px; left: 10px; } .live-foil { top: 54px; left: 10px; }
.live-auto[aria-pressed=true] { background: #f5b301; border-color: #f5b301; }
.shine-meter { bottom: 58px; }
/* result card under the camera */
.hit { border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 18px; padding: 12px;
  background: var(--grad-soft), var(--panel); box-shadow: 0 12px 30px -18px rgba(91,140,255,.6); }
.hit img { width: 70px; border-radius: 7px; }
.hit .nm { font-size: 16px; }
.hit .pr { font-size: 26px; margin-top: 2px; }
.addbtn { width: 58px; height: 58px; border-radius: 18px; box-shadow: 0 8px 20px -8px rgba(91,140,255,.9); }
/* session bar */
.session { border-radius: 16px; padding: 10px 12px; margin-bottom: 10px; background: var(--panel); }
.session > .grow > b:first-child { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; margin-right: 2px;
  border-radius: 999px; background: var(--grad); color: #fff; font-size: 13px; }
.session button { background: var(--panel2); border-color: var(--line); border-radius: 10px; }
.scanstate { padding: 12px; }
.scan-alt.pagebtn { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; }
.scan-alt.pagebtn small { flex-basis: auto; }

/* ================= Apple look: iOS system colours, large titles, grouped lists ================= */
:root, :root[data-theme=light] {
  --bg: #f2f2f7; --panel: #ffffff; --panel2: #e9e9ee; --ink: #000000; --muted: #8a8a8e; --line: #d8d8dd;
  --accent: #007aff; --good: #34c759; --bad: #ff3b30;
  --grad: linear-gradient(180deg, #2b8cff, #0068f0); --grad-soft: none;
  --seg: rgba(118,118,128,.12); --seg-on: #ffffff; --sep: rgba(60,60,67,.18);
}
:root[data-theme=dark] { --bg: #000000; --panel: #1c1c1e; --panel2: #2c2c2e; --ink: #ffffff; --muted: #8e8e93; --line: #38383a;
  --accent: #0a84ff; --good: #30d158; --bad: #ff453a; --grad: linear-gradient(180deg, #2a95ff, #0a72f0);
  --seg: rgba(118,118,128,.24); --seg-on: #636366; --sep: rgba(84,84,88,.55); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) { --bg: #000000; --panel: #1c1c1e; --panel2: #2c2c2e; --ink: #ffffff; --muted: #8e8e93; --line: #38383a;
    --accent: #0a84ff; --good: #30d158; --bad: #ff453a; --grad: linear-gradient(180deg, #2a95ff, #0a72f0);
    --seg: rgba(118,118,128,.24); --seg-on: #636366; --sep: rgba(84,84,88,.55); }
}
html, body { font-family: -apple-system, "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, sans-serif; font-size: 15.5px; }
.card-box, .item, .setrow, .set-head, .kpi, .toolbtn, .scanstate, .goalrow { border-radius: 14px; }
.card-box { border: 0; }
.up { color: var(--good); } .down { color: var(--bad); }

/* header: large title, collapses to a slim bar on scroll */
header.top { align-items: flex-end; border-bottom: .5px solid transparent; padding: calc(10px + env(safe-area-inset-top)) 18px 8px;
  background: color-mix(in srgb, var(--bg) 72%, transparent); transition: border-color .2s, padding .2s; }
header.top.compact { border-bottom-color: var(--sep); padding-bottom: 8px; }
.ptitle { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; transition: font-size .2s; }
header.top.compact .ptitle { font-size: 19px; }
header .total { padding-bottom: 3px; }
header .total small { font-size: 10px; letter-spacing: .06em; }
header .total b { font-size: 16px; }
body[data-tab=stats] header .total { visibility: hidden; }
.page-h { display: none; }
main { padding-top: 8px; }

/* section labels (iOS grouped table headers) */
.sec-h { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: -.005em; color: var(--muted); margin: 22px 4px 8px; }
.sec-h small { font-weight: 400; }

/* grouped inset lists: one rounded panel, hairline separators */
.list:not(.pick):not(:empty) { gap: 0; background: var(--panel); border-radius: 14px; overflow: hidden; }
.list:not(.pick) > .item { border: 0; border-radius: 0; background: none; position: relative; padding: 10px 14px 10px 12px; }
.list:not(.pick) > .item + .item::before { content: ""; position: absolute; top: 0; right: 0; left: 70px; height: 1px; background: var(--sep); transform: scaleY(.5); transform-origin: top; }
.list.compact:not(.pick) > .item + .item::before { left: 58px; }
.list:not(.pick) > .hint { padding: 14px; }
.card-box .list:not(.pick) { background: none; border-radius: 0; }
.card-box .list:not(.pick) > .item { padding-left: 0; padding-right: 0; }
.card-box .list:not(.pick) > .item + .item::before { left: 46px; }
.list .item:active { background: var(--panel2); }
.item .nm { font-weight: 600; font-size: 15.5px; }
.item .rt b { font-weight: 600; }
.pill { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 6px; font-size: 12.5px !important; font-weight: 600; color: #fff !important; }
.pill.up { background: var(--good); } .pill.down { background: var(--bad); }
.show-all { color: var(--accent); }

/* segmented controls */
.seg { background: var(--seg); border-radius: 10px; padding: 2px; }
.seg button { border-radius: 8px; padding: 7px 0; font-weight: 600; }
.seg button.on { background: var(--seg-on); color: var(--ink); box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.08); }

/* inputs + buttons */
input[type=search], input[type=number], select, .form input:not([type=number]):not([type=checkbox]) { border: 0; border-radius: 11px; background: var(--seg); }
#q { background-color: var(--seg); }
.btn { border-radius: 12px; border: 0; background: var(--panel2); font-weight: 600; }
.btn.ghost { background: none; color: var(--accent); }
.btn.primary { background: var(--accent); box-shadow: none; }
.btn.danger { background: var(--panel2); }

/* tab bar: system blue for the current tab, raised Scan button */
.tabs { border-top: .5px solid var(--sep); background: color-mix(in srgb, var(--panel) 80%, transparent); }
.tabs button { font-size: 10.5px; font-weight: 500; color: var(--muted); }
.tabs button.on { color: var(--accent); }
.tabs button.on:not(.scan-fab)::before { display: none; }
.tabs button.on:not(.scan-fab) svg { stroke: var(--accent); stroke-width: 2.1; }
.tabs .scan-fab i { background: var(--grad); box-shadow: 0 6px 18px -4px rgba(10,132,255,.6), 0 0 0 5px var(--bg); }
.tabs .scan-fab.on span { color: var(--accent); }

/* ---------- Portfolio (Collectr-style hero) ---------- */
.pf-hero { padding: 4px 2px 6px; }
.pf-l { font-size: 13px; font-weight: 600; color: var(--muted); }
.pf-v { font-size: 44px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; margin-top: 2px; font-variant-numeric: tabular-nums; }
.pf-ch { font-size: 15px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; min-height: 1.4em; }
.pf-ch span { color: var(--muted); font-weight: 500; margin-left: 4px; }
#chart { position: relative; margin: 14px -2px 0; touch-action: pan-y; cursor: crosshair; user-select: none; -webkit-user-select: none; }
#chart svg { height: 190px; }
#chart .empty { padding: 50px 0; }
.pf-cur { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--muted); opacity: .6; pointer-events: none; }
.pf-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--pf); box-shadow: 0 0 0 3px var(--bg); pointer-events: none; }
.ranges { display: flex; justify-content: space-between; margin-top: 10px; }
.ranges button { flex: 1; border: 0; background: none; color: var(--muted); font-weight: 700; font-size: 13px; padding: 6px 0; border-radius: 8px; cursor: pointer; }
.ranges button.on { background: var(--seg); color: var(--ink); }
/* breakdown: grouped rows, value on the right */
.kpis { display: block; background: var(--panel); border-radius: 14px; overflow: hidden; margin: 0; }
.kpis .kpi, .kpis .kpi:first-child { display: flex; justify-content: space-between; align-items: center; background: none; border: 0; border-radius: 0;
  padding: 13px 16px; position: relative; grid-column: auto; }
.kpis .kpi + .kpi::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--sep); transform: scaleY(.5); transform-origin: top; }
.kpis .kpi .l, .kpis .kpi:first-child .l { font-size: 15.5px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink); }
.kpis .kpi .v, .kpis .kpi:first-child .v { font-size: 15.5px; font-weight: 600; margin: 0; }
/* most valuable: swipeable row of cards */
.carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.cv { flex: none; width: 118px; scroll-snap-align: start; border: 0; background: none; padding: 0; text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
.cv img { width: 100%; aspect-ratio: 63/88; object-fit: cover; border-radius: 8px; display: block; background: var(--panel2); box-shadow: 0 6px 16px -6px rgba(0,0,0,.5); }
.cv b { display: block; margin-top: 7px; font-size: 15px; font-variant-numeric: tabular-nums; }
.cv span { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv:active img { transform: scale(.97); }
#reportBox { margin-top: 22px; }
.report-grid div { background: var(--panel2); }

/* ---------- card sheet: big centred card ---------- */
.sheet-body { background: var(--bg); border-top: 0; }
:root[data-theme=light] .sheet-body { background: var(--bg); }
.sheet-head { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.sheet-head img { width: min(58vw, 240px); border-radius: 12px; box-shadow: 0 18px 40px -14px rgba(0,0,0,.65); }
.sheet-head > div { width: 100%; }
.sheet-head h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.price-big { font-size: 34px; letter-spacing: -.03em; }
.sheet-head .spark { max-width: 360px; margin: 6px auto 0; }
.sheet-body .form { background: var(--panel); border-radius: 14px; padding: 14px; }
.sheet-body .form select, .sheet-body .form input { background: var(--seg); }

/* tiles + rows */
.toolbtn { border: 0; background: var(--panel); }
.toolbtn .ti { background: var(--panel2); }
.setrow, .set-head, .goalrow:not([style]) { border: 0; }
.scan-alt { border: 0 !important; }
.shopbtn { border: 0; }
.shopbtn[aria-pressed=true] { border: 1px solid #f5b301; }
.shopbtn[aria-pressed=true] .sw, .shopbtn .sw { border: 0; }
.shopbtn[aria-pressed=true] .sw { background: var(--good); }
.shopbtn .sw { background: var(--seg); }
.scan-hero { background: var(--grad) !important; box-shadow: 0 16px 30px -18px rgba(10,132,255,.9) !important; }
.hit { border: 0; background: var(--panel); box-shadow: 0 10px 30px -18px rgba(0,0,0,.7); }
.addbtn, .tile .plus, .pk .plus { background: var(--accent); }
.session > .grow > b:first-child { background: var(--accent); }
.tag.pokemon { background: #ffcc00; color: #3a2c00; } .tag.riftbound { background: #af52de; } .tag.cyberpunk { background: #ff2d55; }
.carousel { scroll-padding: 0 16px; }
.sheet-body .photos { justify-content: center; }
.photos .add { border-color: var(--line); background: var(--panel); border-style: solid; }

/* add feedback over the camera */
.addpop { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; text-align: center;
  padding: 10px 18px; border-radius: 18px; background: rgba(48,209,88,.92); color: #fff; box-shadow: 0 10px 30px -8px rgba(0,0,0,.6);
  animation: addpop 1.25s cubic-bezier(.2,.8,.2,1) forwards; }
.addpop b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.addpop span { display: block; font-size: 13px; font-weight: 600; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes addpop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.8); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  30% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -110%) scale(.96); } }
.session b.bump { animation: bump .35s ease-out; }
@keyframes bump { 40% { transform: scale(1.35); } }

/* ---------- card detail page (sheet) ---------- */
.sheet-head .pf-ch { margin-top: 2px; }
.cd { margin: 6px 0 14px; }
.chart { position: relative; touch-action: pan-y; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.chart svg { display: block; width: 100%; }
#shChart { margin: 10px -2px 0; }
#shChart:empty { display: none; }
.cd-note { font-size: 12px; color: var(--muted); text-align: center; margin-top: 4px; }
.cd .ranges { margin: 6px 0 4px; }
.cd .ranges:empty { display: none; }
.cd-stats { margin-top: 14px; }
.cd-stats:empty { display: none; }
.cd-h { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin: 22px 2px 8px; }
.cd-h span { font-size: 15px; font-weight: 600; color: var(--muted); }
.cd section .carousel { margin-bottom: 0; }
.list:not(.pick) > .cd-row { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 11px 14px; }
.list:not(.pick) > .cd-row + .cd-row::before { left: 14px; }
.cd-row .mid { flex: 1; min-width: 0; }
.cd-row .rt { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.cd-row .rt b { font-variant-numeric: tabular-nums; }
.cd-tick { width: 14px; text-align: center; color: var(--muted); font-weight: 700; }
.cd-row.on .cd-tick { color: var(--accent); }
.cd-row.on .nm { font-weight: 700; }
.cd-cm { display: block; text-align: center; margin: 18px 0 0; font-size: 15px; color: var(--accent); text-decoration: none; }
.form label[hidden] { display: none !important; }
.sheet-body:has(#shDelete[hidden]) > .row.end:last-child { position: sticky; bottom: 0; padding: 14px 0 4px; background: linear-gradient(to bottom, transparent, var(--bg) 14px); z-index: 2; }

/* ---------- market news ---------- */
.mk-bar { display: flex; gap: 8px; }
.mk-bar #mkGame { flex: 3; margin: 0; }
.mk-bar .mk-per { flex: 1.4; margin: 0; }
.mk-note { font-size: 12.5px; color: var(--muted); margin: 8px 4px 0; min-height: 1.3em; }
.mk .list .item { cursor: pointer; }
.mk .list .item .st + .st { font-variant-numeric: tabular-nums; }
.mk .carousel { margin-bottom: 0; }
@media (max-width: 380px) { .mk-bar { flex-direction: column; } }

/* ---------- graded prices ---------- */
.gr-setup { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.gr-setup p, .gr-setup ol { margin: 0; color: var(--muted); }
.gr-setup ol { padding-left: 20px; }
.gr-setup input { background: var(--seg); border: 0; border-radius: 10px; padding: 11px 12px; color: var(--ink); font: inherit; }
.gr-use { padding: 3px 9px !important; font-size: 12.5px !important; margin-top: 3px; }
#shGradedNote { text-align: left; margin: 6px 4px 0; }
#shGradedNote a { color: var(--accent); }
.gr-setup summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; }
.gr-setup summary::-webkit-details-marker { display: none; }
.gr-setup summary span { color: var(--accent); font-weight: 500; }
.gr-setup[open] summary { margin-bottom: 4px; }
.gr-setup:not([open]) { display: block; }

/* ---------- collection: filter chips, cleaner rows, select mode ---------- */
.coll-filters { display: block; }
.coll-filters input[type=search] { width: 100%; }
.fchips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 10px -16px 2px; padding: 0 16px 2px; }
.fchips::-webkit-scrollbar { display: none; }
.fchips select, .fchips .chip { flex: none; width: auto; height: 34px; padding: 0 30px 0 13px; border: 0; border-radius: 999px; background-color: var(--panel);
  font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.fchips .chip { padding: 0 15px; }
.fchips select.set, .fchips .chip.on { background-color: color-mix(in srgb, var(--accent) 22%, var(--panel)); color: var(--accent); }
.fchips select[hidden], .fchips .chip[hidden] { display: none; }
.item .nm .q { color: var(--accent); }
.item .rt .pl { font-size: 13px; font-weight: 600; }
.item .rt .pill { margin-top: 4px; }
/* select mode */
body.selecting { padding-bottom: calc(250px + env(safe-area-inset-bottom)); }
body.selecting #collList [data-id] { position: relative; }
body.selecting #collList .item[data-id] { padding-left: 46px; }
body.selecting #collList .item[data-id]::after, body.selecting #collList .ctile[data-id]::after { content: ""; position: absolute; left: 12px; top: 50%;
  width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; border: 2px solid var(--muted); box-sizing: border-box; z-index: 2; }
body.selecting #collList .ctile[data-id]::after { left: auto; right: 8px; top: 8px; margin: 0; background: rgba(0,0,0,.35); border-color: #fff; }
body.selecting #collList [data-id].sel::after { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  border-color: var(--accent); }
body.selecting #collList .ctile.sel img { outline: 3px solid var(--accent); outline-offset: -3px; }
body.selecting #collList .item[data-id].sel { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.bulkbar { position: fixed; left: 0; right: 0; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 6; margin: 0 auto; max-width: 560px;
  background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-radius: 18px 18px 0 0; padding: 12px 16px; box-shadow: 0 -10px 30px -12px rgba(0,0,0,.6); }
.bulk-top { display: flex; align-items: center; gap: 14px; }
.bulk-top b { flex: 1; font-size: 16px; }
.linkbtn { border: 0; background: none; color: var(--accent); font-weight: 600; font-size: 15px; cursor: pointer; padding: 4px 0; }
.bulk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.bulk-fields select, .bulk-fields input { width: 100%; height: 38px; padding: 0 10px; border: 0; border-radius: 10px; background-color: var(--seg); color: var(--ink); font-size: 14.5px; }
.bulk-acts { display: flex; gap: 8px; justify-content: flex-end; }
.bulk-acts .btn { flex: 1; }
.bulk-acts .btn:disabled { opacity: .45; }
.fchips select, .fchips .chip { flex: none !important; }
body.selecting #collList .ctile .shiny, body.selecting #collList .ctile .grade { display: none; }
.cd-row.cd-alt img { width: 34px; aspect-ratio: 63/88; object-fit: cover; border-radius: 4px; flex: none; }

/* ---------- install hint (iPhone Safari) ---------- */
.installhint { position: fixed; left: 12px; right: 12px; bottom: calc(100px + env(safe-area-inset-bottom)); z-index: 7; max-width: 520px; margin: 0 auto;
  display: flex; gap: 12px; align-items: center; padding: 12px 12px 12px 14px; border-radius: 16px;
  background: color-mix(in srgb, var(--panel2) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 30px -10px rgba(0,0,0,.6); }
.installhint img { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.installhint div { flex: 1; font-size: 13.5px; line-height: 1.35; }
.installhint div > b { display: block; font-size: 15px; }
.installhint span { color: var(--muted); }
.installhint span svg { vertical-align: -3px; color: var(--accent); }
.installhint button { border: 0; background: none; color: var(--muted); font-size: 24px; padding: 0 4px; cursor: pointer; }

/* ---------- phone: no zoom, segmented bars always fit ---------- */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.seg { min-width: 0; }
.seg button { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; padding-right: 4px; }
@media (max-width: 400px) { .seg button { font-size: 13px; } }

/* ---------- card page: one scroll area, centred buttons; round + always centred ---------- */
html:has(.sheet:not([hidden])), html:has(.sheet:not([hidden])) body { overflow: hidden; }   /* page behind a card page stays put */
.sheet-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sheet-body > .row.end:last-child { justify-content: center; }
.sheet-body > .row.end:last-child > .btn:not([hidden]) { flex: 1 1 40%; justify-content: center; text-align: center; }
.tile .plus, .pk .plus, .addbtn { font-size: 0 !important; display: grid; place-items: center; padding: 0; color: #fff; }
.tile .plus::before, .pk .plus::before, .addbtn::before { content: ""; width: 44%; height: 44%; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v18M3 12h18' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v18M3 12h18' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.qty button, .mini button { display: inline-grid; place-items: center; line-height: 1; }
.tile .ph-card { aspect-ratio: 63/88; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; text-align: center;
  background: linear-gradient(160deg, var(--panel2), var(--seg)); color: var(--ink); }
.tile .ph-card b { font-size: 17px; line-height: 1.15; }
.tile .ph-card span { color: var(--muted); font-variant-numeric: tabular-nums; }
.tile .ph-card small { color: var(--muted); font-size: 11.5px; opacity: .8; }
/* collection rows: value, per-card price, ▲/▼ badge and gain stacked on the right – never side by side */
.list .item .rt { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; max-width: 48%; }
.list .item .rt > * { white-space: nowrap; margin: 0; }
.list .item .mid { min-width: 0; }
.list .item .mid .nm, .list .item .mid .st { overflow: hidden; text-overflow: ellipsis; }
.list .item .rt .pl.up { color: var(--good); } .list .item .rt .pl.down { color: var(--bad); }
/* set + goal rows: name and numbers on the left, price on the right, the progress bar full width underneath –
   so every bar has the same length whatever the price text is */
.setrow, .goalrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.setrow > .mid, .goalrow > .mid { display: contents; }
.setrow .nm, .goalrow .nm { grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setrow .st, .goalrow .st { grid-column: 1; grid-row: 2; }
.setrow .prog, .goalrow .prog { grid-column: 1 / -1; grid-row: 3; margin-top: 8px; }
.setrow > .rt, .goalrow > .rt { grid-column: 2; grid-row: 1 / 3; }
.setrow, .goalrow { row-gap: 3px; }
/* changes waiting for the PC (offline) */
button.offline.pending { border: 0; font: inherit; font-size: 12px; cursor: pointer; background: color-mix(in srgb, var(--accent) 22%, var(--panel)); color: var(--accent); }

/* ---------- card page buttons: pinned to the bottom edge, content scrolls above them ---------- */
.sheet-actions { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 560px; box-sizing: border-box; margin: 0;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); z-index: 21;
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-top: .5px solid var(--sep); }
.sheet-actions > .btn:not([hidden]) { flex: 1 1 40%; justify-content: center; text-align: center; }
.sheet-body { padding-bottom: calc(var(--actions-h, 80px) + 18px) !important; }
@media (min-width: 700px) { .sheet { align-items: flex-end; } .sheet-body { border-radius: 22px 22px 0 0; } }
.sheet-body::before { width: 40px; height: 5px; top: 7px; }   /* the grabber: pull down to close */
/* own cards: Listing / eBay / Sell as one slim row of links, Remove + Save below */
.sheet-actions > .btn.ghost:not([hidden]) { flex: 1 1 28%; padding: 4px 2px; min-height: 0; font-size: 14.5px; }
.sheet-actions > .btn.danger:not([hidden]), .sheet-actions > .btn.primary:not([hidden]) { flex: 1 1 40%; }

/* Real or fake? (realcheck.js) */
.rc { position: fixed; inset: 0; z-index: 25; background: var(--bg); display: flex; flex-direction: column; }
.rc-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  border-bottom: 1px solid var(--sep); font-size: 17px; }
.rc-top .linkbtn { justify-self: start; }
.rc-body { flex: 1; overflow-y: auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.rc-cam { position: relative; height: 62vh; border-radius: 16px; overflow: hidden; background: #000; }
.rc-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-guide { position: absolute; left: 50%; top: 50%; height: 84%; aspect-ratio: 63 / 88; max-width: 90%; transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, .85); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.rc-tips { text-align: center; margin: 12px 0; }
.rc-btns { display: flex; gap: 10px; margin-top: 14px; }
.rc-btns .btn { flex: 1; text-align: center; }
.rc-wait { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 80px 0; color: var(--muted); }
.spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--sep); border-top-color: var(--accent); animation: rcspin .8s linear infinite; }
@keyframes rcspin { to { transform: rotate(360deg); } }
.rc-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rc-pics figure { margin: 0; text-align: center; }
.rc-pics canvas, .rc-pics img { width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 10px; display: block; background: var(--panel2); }
.rc-pics figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.rc-badge { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px;
  background: var(--panel2); color: var(--muted); margin-right: 12px; }
.rc-badge.good { background: color-mix(in srgb, var(--good) 20%, transparent); color: var(--good); }
.rc-badge.bad { background: color-mix(in srgb, var(--bad) 20%, transparent); color: var(--bad); }
.rc-badge.warn { background: rgba(255, 159, 10, .2); color: #ff9f0a; }
.rc-row, .rc-chk { display: flex; align-items: center; }
.rc-row { cursor: pointer; }
.rc-q { display: block; }
.rc-q .seg { margin: 10px 0 2px; }
.rc-verdict { display: flex; align-items: center; gap: 4px; margin-top: 22px; padding: 16px; border-radius: 14px; background: var(--panel); font-size: 17px; }
.rc-verdict .st { font-size: 14px; color: var(--muted); margin-top: 2px; }
.rc-verdict.good { box-shadow: inset 0 0 0 1.5px var(--good); }
.rc-verdict.bad { box-shadow: inset 0 0 0 1.5px var(--bad); }
.rc-verdict.warn { box-shadow: inset 0 0 0 1.5px #ff9f0a; }
.rc-q .st, .rc-chk .st { white-space: normal; overflow: visible; text-overflow: clip; }

/* Keyboard open (a text field has focus): iOS keeps fixed bars above the keyboard, so the tab bar would float in the
   middle of the screen and the session/bulk bars with it – hide them while typing. */
body.typing .tabs, body.typing .bulkbar { display: none; }
/* Solid strip behind the clock and camera notch: content scrolled up (iOS does that when the keyboard opens) passes
   under it instead of showing through the status bar. */
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: var(--bg); z-index: 60; pointer-events: none; }
/* card page: Sell section (buttons moved out of the pinned bar) as list rows */
.sell-links > .btn.item { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0;
  border-radius: 0; padding: 13px 14px; font-size: 16px; font-weight: 500; color: var(--accent); text-align: left; }
.sell-links > .btn.item::after { content: "›"; color: var(--muted); font-weight: 700; }
/* If iOS ever leaves the page short (keyboard bug, see pwa.js healViewport), the bar's colour continues below it
   instead of a black band. */
.tabs { box-shadow: 0 240px 0 0 var(--panel); }
/* Collection filter row: everything on screen, no sideways sliding (user) – the visible controls share the width. */
.fchips { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; overflow: visible; margin: 10px 0 2px; padding: 0; }
.fchips select, .fchips .chip { width: 100%; min-width: 0; padding: 0 18px 0 10px; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fchips .chip { padding: 0 8px; text-align: center; }
.fchips { display: flex; }
#collChips > select { flex: 1 1 0 !important; padding: 0 16px 0 10px; font-size: 13px; }
#collChips > .chip { flex: none !important; padding: 0 12px; }
#collChips > select { width: auto; }
#collChips > .chip { width: auto; }
/* own small chevron: the system one takes ~30 px of a ~90 px pill */
#collChips > select { -webkit-appearance: none; appearance: none; padding: 0 20px 0 11px;
  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' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 10px 6px; }

/* ===================== polish layer (2026-10-12): one icon set, iOS settings rows ===================== */
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tico { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--ic); color: #fff; }
.tico .ic { width: 18px; height: 18px; stroke-width: 2; }
.toolbtn .tico { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 8px; }
.toolbtn .tico .ic { width: 22px; height: 22px; }
.market-tiles .toolbtn .tico { margin-bottom: 4px; }
.toolbtn:active { transform: scale(.98); }
.toolbtn { transition: background .12s, transform .12s; }
.shopbtn .sh-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #ff9f0a; color: #fff; }
.shopbtn .sh-ic .ic { width: 18px; height: 18px; stroke-width: 2; }

/* collection: sort + select are icon buttons so the three filters get readable labels */
#collChips > .ichip { flex: none !important; width: 34px; padding: 0 !important; display: grid; place-items: center; position: relative; color: var(--ink); }
#collChips > .ichip .ic { width: 18px; height: 18px; }
#sortChip select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
#sortChip[hidden] { display: none !important; }
#collChips > #selBtn:not(.ichip) { width: auto; padding: 0 12px !important; }

/* grouped settings rows */
.gset > .sec-h:first-child { margin-top: 4px; }
.glist { background: var(--panel); border-radius: 12px; overflow: hidden; }
.glist > .gr, .glist > details, .glist > div > .gr, .glist > div > .gfoot { position: relative; }
.gr { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 7px 14px; box-sizing: border-box; width: 100%;
  background: none; border: 0; color: var(--ink); font: inherit; text-align: left; }
.glist .gr + .gr::before, .glist > * + *::before, .gx[open] > .gr::before {
  content: ""; position: absolute; top: 0; right: 0; left: 56px; height: 1px; background: var(--sep); transform: scaleY(.5); transform-origin: top; }
.glist > .gr:not(:has(.tico))::before, .gx > .gr::before { left: 14px; }
.gr .gl { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 16px; line-height: 1.25; }
.gr .gl small { color: var(--muted); font-size: 12.5px; margin-top: 2px; line-height: 1.3; }
.gr .gl .gk { display: inline; color: var(--muted); font-size: 12.5px; margin-left: 4px; }
.gr .gv { color: var(--muted); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.gx > summary { list-style: none; cursor: pointer; }
.gx > summary::-webkit-details-marker { display: none; }
.gx > summary .gr::after { content: ""; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(-45deg); margin: 0 2px 0 -2px; transition: transform .2s; flex: none; }
.gx[open] > summary .gr::after { transform: rotate(45deg); }
.gx > .gr { padding-left: 56px; background: color-mix(in srgb, var(--panel2) 35%, var(--panel)); }
.gnum { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.gnum input { width: 64px; padding: 6px 8px; border: 0; border-radius: 8px; background: var(--panel2); color: var(--ink); font: inherit; font-size: 16px;
  text-align: right; -moz-appearance: textfield; }
.gnum input::-webkit-inner-spin-button, .gnum input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.gnum input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.gnum i { font-style: normal; color: var(--muted); font-size: 14px; min-width: 14px; }
.gsw { flex: none; width: 51px; height: 31px; padding: 0; border: 0; border-radius: 999px; background: var(--seg); position: relative; cursor: pointer; transition: background .2s; }
.gsw i { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .22s cubic-bezier(.3,.7,.4,1.2); }
.gsw[aria-pressed=true] { background: var(--good); }
.gsw[aria-pressed=true] i { transform: translateX(20px); }
.gseg { margin: 0; flex: none; width: 170px; }
.gseg button { padding: 5px 0; font-size: 13px; }
.gform { gap: 8px; padding-left: 56px; }
.gform input { flex: 1; min-width: 0; padding: 8px 10px; border: 0; border-radius: 8px; background: var(--panel2); color: var(--ink); font: inherit; font-size: 16px; }
.gform .btn { flex: none; padding: 8px 12px; }
.gtext { align-items: flex-start; padding-top: 10px; padding-bottom: 10px; }
.gtext .gl { font-size: 15px; }
.gbtn { color: var(--accent); cursor: pointer; justify-content: flex-start; padding-left: 56px; font-weight: 500; }
.gbtn:active, .gx > summary:active .gr { background: var(--panel2); }
.gfoot { color: var(--muted); font-size: 12.5px; line-height: 1.4; margin: 7px 16px 0; }
.gfoot.in { margin: 0; padding: 0 14px 10px 56px; }
#toolBody #settingsPane .sec-h { margin-top: 24px; }
#toolBody #settingsPane > .sec-h:first-of-type, #toolBody #settingsBox > .sec-h:first-child { margin-top: 4px; }
/* Market: Prices · Trade · Selling pages */
.mk-pages { margin: 0 0 6px; }
.mkpage[hidden] { display: none !important; }
.mkpage > .sec-h:first-child, .mkpage > .mk > .mk-bar:first-child { margin-top: 10px; }
.mkpage[data-page=selling] .market-tiles { margin-top: 10px; }
.mkpage[data-page=trade] .trade-cols { margin-top: 10px; }
/* card without a picture (newest / Japanese sets): small card-shaped label instead of a grey box */
.ph-mini { flex: none; width: 46px; height: 64px; border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--poke) 55%, var(--panel2)), var(--panel2)); color: #fff; font-size: 11px; }
.ph-mini.riftbound { background: linear-gradient(160deg, color-mix(in srgb, var(--rift) 60%, var(--panel2)), var(--panel2)); }
.ph-mini.cyberpunk { background: linear-gradient(160deg, color-mix(in srgb, #ff375f 55%, var(--panel2)), var(--panel2)); }
.ph-mini b { font-size: 13px; letter-spacing: .04em; }
.ph-mini span { opacity: .85; font-variant-numeric: tabular-nums; }
/* "Recently added" on the Scan screen */
#recent { margin-top: 6px; }
#recent[hidden] { display: none; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sec-link { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-size: 15px; font-weight: 400; cursor: pointer; }
/* card page "This copy": grouped rows – label left, value right (like iOS Settings) */
#sheet .sheet-body .form { display: block; padding: 0 0 0 16px; margin: 10px 0 6px; overflow: hidden; }
#sheet .form > label { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 6px 14px 6px 0;
  font-size: 16px; color: var(--ink); position: relative; }
#sheet .form > label + label::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--sep); transform: scaleY(.5); }
#sheet .form > label > select, #sheet .form > label > input, #sheet .form > label > .qty { width: 56%; max-width: 230px; flex: none; }
#sheet .form > label > select, #sheet .form > label > input { padding: 8px 10px; font-size: 16px; text-align: right; text-align-last: right; border-radius: 9px; }
#sheet .form > label > input::placeholder { color: var(--muted); }
#sheet .form .qty { display: flex; justify-content: flex-end; gap: 0; }
#sheet .form .qty input { width: 54px; flex: none; text-align: center; padding: 8px 0; border-radius: 0; }
#sheet .form .qty button { width: 40px; height: 36px; border: 0; background: var(--seg); color: var(--ink); font-size: 20px; }
#sheet .form .qty button:first-child { border-radius: 9px 0 0 9px; } #sheet .form .qty button:last-child { border-radius: 0 9px 9px 0; }
#sheet .wishbox { flex-wrap: wrap; background: var(--panel); border: 0; border-radius: 14px; padding: 12px 14px; margin: 12px 0 6px; gap: 10px; align-items: center; }
#sheet .wishbox label { flex: 1 1 100%; font-size: 13px; }
#sheet .wishbox label input { margin-top: 4px; font-size: 16px; }
#sheet .wishbox .btn { flex: 1; }
.photos .add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--accent); font-size: 12.5px; text-align: center; line-height: 1.25; }
.photos .add .ic { width: 24px; height: 24px; }
#sheet .form .qty input { height: 36px; background: var(--seg); border: 0; }
#toolBody #settingsBox.gset > h3:first-child { display: flex; }
/* location badge, goals header, opening banner icons */
.bdg.loc { display: inline-flex; align-items: center; gap: 3px; }
.bdg.loc .ic { width: 11px; height: 11px; stroke-width: 2.2; }
#goalsBox h3 .tico, .card-box h3 .tico { width: 24px; height: 24px; border-radius: 7px; margin-right: 6px; vertical-align: -6px; }
.card-box h3 .tico .ic { width: 15px; height: 15px; }
#opBanner .ic, .op-banner .ic { width: 16px; height: 16px; vertical-align: -3px; }
/* tool forms: every text/number field looks the same */
#toolView input:not([type=checkbox]):not([type=radio]):not([type=range]), #toolView select { border: 0; border-radius: 10px; background: var(--seg); color: var(--ink);
  font: inherit; font-size: 16px; padding: 10px 12px; min-height: 42px; box-sizing: border-box; }
#toolView label:not(.item) > input:not([type=checkbox]), #toolView label:not(.item) > select { width: 100%; }
.goals h3 { justify-content: flex-start; gap: 0; }
.goals h3 > button { margin-left: auto; }
.goals h3 .tico { width: 24px; height: 24px; border-radius: 7px; margin-right: 8px; }
.goals h3 .tico .ic { width: 15px; height: 15px; }
/* live camera controls: compact glass pills with icons */
.live-auto, .live-foil { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; font-size: 14px; font-weight: 650;
  color: #fff; border: 0; }
.live-auto .ic { width: 16px; height: 16px; stroke-width: 2.2; }
.live-auto[aria-pressed=true] { background: #ffd60a; color: #1b1400; }
.live-auto[aria-pressed=true] .ic { fill: currentColor; }
.live-foil { top: 54px; font-size: 13px; height: 32px; padding: 0 12px; }
.live-close, .live-gear { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: #fff; font-size: 0; }
.live-close .ic, .live-gear .ic { width: 19px; height: 19px; stroke-width: 2.2; }
/* session bar: one tidy line */
.session .top { white-space: nowrap; }
.session .top b:first-child { margin-right: 4px; }
.session button { padding: 8px 12px; font-size: 14px; }

/* ===================== motion (2026-10-12) – short, springy, off with Reduce Motion ===================== */
@keyframes tabin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sheetin { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, -12px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes shimmer { from { background-position: -200px 0; } to { background-position: 200px 0; } }
.tab.active { animation: fadein .2s ease-out; }   /* opacity only: a transform would move fixed bars inside the tab */
#toolView > *, .mkpage:not([hidden]) { animation: tabin .24s cubic-bezier(.2,.8,.3,1); }
.sheet:not([hidden]) .sheet-bg { animation: fadein .25s ease-out; }
.sheet:not([hidden]) .sheet-body { animation: sheetin .38s cubic-bezier(.16,1,.3,1); }
@keyframes barin { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
.sheet:not([hidden]) .sheet-actions { animation: barin .38s cubic-bezier(.16,1,.3,1); }
.toast:not([hidden]) { animation: toastin .28s cubic-bezier(.16,1,.3,1); }
.btn, .toolbtn, .cv, .tile, .gbtn, .scanbtn, .shopbtn, .seg button, .chip, .live-auto, .live-foil, .tabs button { transition: transform .12s ease, background-color .15s, opacity .15s; }
.btn:active, .cv:active, .tile:active, .scanbtn:active, .shopbtn:active, .chip:active, .live-auto:active, .live-foil:active { transform: scale(.96); }
.tabs button:active { transform: scale(.92); }
.gsw:active i { width: 33px; }
.gsw[aria-pressed=true]:active i { transform: translateX(14px); }
/* loading placeholders instead of "Loading…" */
.item.skel { pointer-events: none; }
.item.skel i, .item.skel b, .item.skel span { display: block; border-radius: 6px;
  background: linear-gradient(90deg, var(--panel2) 0, color-mix(in srgb, var(--panel2) 60%, var(--muted)) 50%, var(--panel2) 100%) no-repeat;
  background-size: 400px 100%; animation: shimmer 1.2s linear infinite; }
.item.skel i { width: 46px; height: 64px; flex: none; }
.item.skel b { height: 15px; width: 60%; margin: 4px 0 8px; }
.item.skel span { height: 12px; width: 40%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.sec-link { padding: 6px 0 6px 12px; margin: -6px 0; }
#reportSel { min-height: 34px; }
.gseg button { padding: 7px 0; }
.tile .ph-card { border-radius: 10px; color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--poke) 50%, var(--panel2)) 0%, var(--panel2) 75%); }
.tile .ph-card.riftbound { background: linear-gradient(160deg, color-mix(in srgb, var(--rift) 55%, var(--panel2)) 0%, var(--panel2) 75%); }
.tile .ph-card.cyberpunk { background: linear-gradient(160deg, color-mix(in srgb, #ff375f 50%, var(--panel2)) 0%, var(--panel2) 75%); }
.tile .ph-card span, .tile .ph-card small { color: rgba(255,255,255,.75); }
:root[data-theme=light] .tile .ph-card b { color: #fff; }

/* ===================== sign in / sign up (account.js) ===================== */
.auth { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 24px 20px;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--accent) 22%, var(--bg)) 0%, var(--bg) 60%); overflow-y: auto;
  animation: fadein .25s ease-out; }
.auth-box { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }
.auth-logo { width: 76px; height: 76px; border-radius: 18px; margin: 0 auto 4px; box-shadow: 0 10px 30px -8px rgba(10,132,255,.55); }
.auth-box h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.auth-sub { margin: -4px 0 6px; color: var(--muted); font-size: 15px; line-height: 1.4; }
.auth-seg { margin: 0; }
.auth-fields { display: flex; flex-direction: column; background: var(--panel); border-radius: 12px; overflow: hidden; }
.auth-fields input { border: 0; border-radius: 0; background: none; color: var(--ink); font: inherit; font-size: 17px; padding: 14px 16px; }
.auth-fields input + input { border-top: .5px solid var(--sep); }
.auth-fields input:focus { outline: none; background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.auth-err { min-height: 18px; color: var(--bad); font-size: 14px; }
.auth-go { padding: 14px; font-size: 17px; font-weight: 600; border-radius: 12px; }
.auth-go:disabled { opacity: .6; }
.auth-foot { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }

/* ---------- simple app: Collection · Scan · Sell (2026-10-13) ---------- */
.hdr-gear { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-left: 10px; border: 0; border-radius: 50%;
  background: var(--seg); color: var(--ink); cursor: pointer; }
.hdr-gear .ic { width: 20px; height: 20px; }
.live-auto, .live-foil { display: none !important; }          /* Turbo + version live in the scan options (gear) */
.scanopts { display: grid; gap: 8px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: .5px solid var(--sep); }
.scanopts .row { margin: 0; }
.session .last { cursor: pointer; }
.session .last u { text-decoration-style: dotted; text-underline-offset: 3px; }
.pf-more { display: block; margin: 8px 0 0; padding: 6px 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 14px; cursor: pointer; }
#tab-stats #statsBack, #mkBack { margin: 0 0 8px; }
.mk-card { display: flex; align-items: center; gap: 12px; width: 100%; margin: 12px 0 4px; padding: 14px 16px; border: 0; border-radius: 14px;
  background: var(--panel); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.mk-card span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mk-card small { color: var(--muted); font-size: 13px; }
.mk-card i { font-style: normal; color: var(--muted); font-size: 22px; }
#sellSum { align-items: center; }
#sellSum .btn { margin-left: auto; }
.chev { color: var(--muted); font-size: 20px; line-height: 1; margin-left: 6px; }
#sellListed .item, #sellSuggest .item { cursor: pointer; }
#sellListed .rt, #sellSuggest .rt { flex-direction: row; align-items: center; }
/* sell sheet */
.sell-sheet .ss-h { margin: 4px 36px 10px 0; font-size: 21px; line-height: 1.2; }
.ss-card { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.ss-card img { width: 64px; border-radius: 6px; flex: none; }
.ss-card .st { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.ss-opts .gr { justify-content: space-between; }
.ss-opts .gseg { width: auto; margin: 0; }
.ss-opts .gseg button { padding: 5px 10px; }
.gsel { width: auto; max-width: 60%; padding: 6px 8px; font-size: 15px; }
.sell-acts { margin-top: 10px; }
.sell-acts .item { width: 100%; border: 0; background: var(--panel); color: var(--ink); font: inherit; text-align: left; cursor: pointer; gap: 12px; }
.sell-acts .item:disabled { opacity: .5; }
#ssLog { margin-top: 10px; line-height: 1.6; }
.pick-chips { margin: 0 0 8px; }
.pick-chips .chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.pick-opts { margin-bottom: 8px; align-items: center; }
.pick-opts select { width: auto; }
.pick-list { max-height: 52vh; overflow: auto; }
.pq { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; }
.pq button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--panel2); color: var(--ink); font-size: 16px; cursor: pointer; }
.ss-foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px;
  padding: 12px 0 calc(6px + env(safe-area-inset-bottom)); background: var(--bg); }
/* card page: one Sell button, the rest folded */
.sell-main { width: 100%; padding: 13px; font-size: 17px; border-radius: 12px; }
.sell-more, .cd-more { margin-top: 10px; }
.sell-more > summary, .cd-more > summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 8px 0; list-style: none; }
.sell-more > summary::-webkit-details-marker, .cd-more > summary::-webkit-details-marker { display: none; }
.cd-more > summary::after, .sell-more > summary::after { content: " ›"; }
.cd-more[open] > summary::after, .sell-more[open] > summary::after { content: " ⌄"; }
.ss-opts .gseg button { flex: none; min-width: 48px; overflow: visible; text-overflow: clip; white-space: nowrap; }
#sellSum #sellMany { flex-basis: 100%; margin: 6px 0 0; padding: 12px; font-size: 16px; border-radius: 12px; }
.pick-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px 10px; padding: 2px; }
.pick-chips::-webkit-scrollbar { display: none; }
.pick-chips .chip { flex: none; padding: 7px 13px; border-radius: 999px; border: 0; background: var(--seg); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
body[data-tab=coll] header .total { visibility: hidden; }   /* the big value is right below */
/* grade estimate */
.gr-steps { display: flex; gap: 6px; margin-bottom: 12px; }
.gr-steps span { flex: 1; text-align: center; padding: 6px 0; border-radius: 999px; background: var(--seg); color: var(--muted); font-size: 13px; font-weight: 600; }
.gr-steps span.on { background: var(--accent); color: #fff; }
.gr-steps span.done { color: var(--good); }
.gr-skip { display: block; margin: 12px auto 0; }
.gr-big { text-align: center; padding: 18px 12px 20px; margin-bottom: 14px; border-radius: 16px; background: var(--panel); }
.gr-big small { display: block; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.gr-big b { display: block; font-size: 42px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 6px; }
.gr-big span { color: var(--muted); font-size: 15px; }
#grPics { margin-top: 14px; }
/* settings: tool rows, data rows */
.gnav { width: 100%; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.gnav:active { background: var(--panel2); }
.glist .gr > .btn.ghost { flex: none; padding: 6px 12px; }
#curSel { max-width: 52%; }
/* collection cleanup */
.pf-hero { position: relative; }
.pf-l { display: flex; align-items: center; justify-content: space-between; }
.pf-l .pf-more { margin: 0; padding: 2px 0; font-size: 14px; font-weight: 600; }
#collSummary { align-items: center; }
#collSummary .lay { margin-left: auto; display: grid; place-items: center; width: 34px; height: 30px; border: 0; border-radius: 8px;
  background: var(--seg); color: var(--ink); cursor: pointer; }
#collSummary .lay .ic { width: 18px; height: 18px; }
.item .st.meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; }
.item .st.meta .badges { display: contents; }
.item .bdg.loc { border: 0; padding: 0; background: none; font-size: 12.5px; font-weight: 500; color: var(--muted); }
#collTools .btn { flex: none; padding: 6px 10px; }
/* sell page cleanup */
body[data-tab=sell] header .total { visibility: hidden; }
.sell-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 6px; }
.sstat { padding: 12px 14px; border-radius: 14px; background: var(--panel); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sstat small { color: var(--muted); font-size: 13px; font-weight: 600; }
.sstat b { font-size: 22px; font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sstat span { color: var(--muted); font-size: 13px; }
.sell-stats #sellMany { grid-column: 1 / -1; padding: 13px; font-size: 16px; border-radius: 12px; }
.warn-t { color: #ff9f0a; }
#salesBox, #sellingBox { margin-top: 18px; }
/* scan page cleanup */
header .total { display: none; }                         /* the value lives on Collection */
.scanbtns { grid-template-columns: 1fr 1fr; }
.scanbtns .scan-alt { flex-direction: row !important; align-items: center !important; gap: 10px !important; padding: 11px 14px !important; }
.scanbtns .scan-alt svg { margin: 0 !important; width: 20px; height: 20px; }
.scanbtns .scan-alt small { display: none; }
.scanbtns .scan-alt > span { font-size: 15px !important; }
.shopbtn { padding: 8px 14px; margin-top: 10px; }
.shopbtn .sh-ic { width: 28px; height: 28px; }
.shopbtn[aria-pressed=false] .sh-tx small { display: none; }
#live:not([hidden]) ~ .shopbtn[aria-pressed=false] { display: none; }   /* while scanning: it's under ⚙ */
/* camera buttons in the bottom corners, off the frame */
.live .live-close { top: auto; bottom: 10px; right: 10px; }
.live .live-gear { top: auto; bottom: 10px; left: 10px; right: auto; }
/* scan options: grouped rows with switches */
.scan-opts { margin: 0 0 12px; }
.scan-opts .glist { margin: 0; }
.scan-opts .gr { cursor: pointer; }
.scan-opts summary { list-style: none; }
.scan-opts summary::-webkit-details-marker { display: none; }
.scan-opts details[open] > summary .chev { transform: rotate(90deg); }
.scan-opts .gcol { flex-direction: column; align-items: stretch; }
.scan-opts input[type=range] { width: 100%; }
.scan-opts .opt-live { gap: 8px; justify-content: space-between; }
.scan-opts .opt-live .btn { flex: 1; padding: 8px 4px; font-size: 14px; }
#live[hidden] ~ .scan-opts .opt-live { display: none; }
.gchk { flex: none; appearance: none; -webkit-appearance: none; width: 51px; height: 31px; margin: 0; border-radius: 999px; background: var(--seg);
  position: relative; cursor: pointer; transition: background .2s; }
.gchk::before { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .22s cubic-bezier(.3,.7,.4,1.2); }
.gchk:checked { background: var(--good); }
.gchk:checked::before { transform: translateX(20px); }
.scan-opts .gx > .gr, .scan-opts .gx > summary.gr { padding-left: 14px; background: none; }
.scan-opts .tag.exp { display: inline-block; vertical-align: 2px; margin-left: 6px; font-size: 10px; padding: 1px 6px; }
/* card page: one "Check this card" group */
#shReal { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
#shGrade2 { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; border-top: .5px solid var(--sep); }
#shSellWrap { margin-top: 18px; }
/* market prices: game choice on its own line, week/month under it */
.mk-bar { flex-direction: column; }
.mk-bar #mkGame, .mk-bar .mk-per { flex: none; width: 100%; }
/* light mode: placeholder text readable on the light game colours */
:root[data-theme=light] .ph-mini { color: #1c1c1e; }
@media (prefers-color-scheme: light) { :root:not([data-theme=dark]) .ph-mini { color: #1c1c1e; } }
/* card page cleanup */
.cd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: none !important; padding: 0 !important; }
.cd-stats .kpi { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px !important; border-radius: 12px; background: var(--panel); border: 0 !important; }
.cd-stats .kpi::before { display: none !important; }
.cd-stats .kpi .l { font-size: 12px; color: var(--muted); }
.cd-stats .kpi .v { font-size: 16px; font-weight: 700; }
.sheet-body .photos { justify-content: flex-start; }
#shCm { display: block; margin: 18px 0 6px; text-align: center; }
#shRealWrap { margin-top: 18px; }
.cd-stats .kpi, .cd-stats .kpi:first-child { grid-column: auto; background: var(--panel); text-align: center; align-items: center; }
.cd-stats .kpi:first-child .l { font-size: 12px; color: var(--muted); }
.cd-stats .kpi:first-child .v { font-size: 16px; }
.cd-stats { grid-template-columns: repeat(6, 1fr); }
.cd-stats .kpi, .cd-stats .kpi:first-child { grid-column: span 2; border-radius: 12px !important; }
.cd-stats .kpi:nth-child(4):nth-last-child(2), .cd-stats .kpi:nth-child(5):last-child { grid-column: span 3; }
/* sell sheet cleanup */
.ss-card { padding: 10px 12px; border-radius: 14px; background: var(--panel); }
.ss-card img { width: 56px; }
.ss-card .nm { font-weight: 700; font-size: 16px; line-height: 1.25; margin-bottom: 2px; }
.ss-opts .gr { gap: 8px; }
.ss-opts .gr .gl { flex: 1; }
.ss-opts #ssCur { flex: none; width: auto; }
.ss-opts #ssPrice { width: 96px; text-align: right; }
.ss-opts .pq span { min-width: 22px; text-align: center; font-weight: 700; font-size: 15px; }
.ss-total { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 4px; }
.ss-total > div { display: flex; flex-direction: column; gap: 1px; padding: 10px 14px; border-radius: 14px; background: var(--panel); }
.ss-total small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.ss-total b { font-size: 21px; font-weight: 750; font-variant-numeric: tabular-nums; }
.ss-total span { color: var(--muted); font-size: 12px; }
.ss-total > div:last-child b { color: var(--good); }
.sell-acts .nm small { font-weight: 500; font-size: 13px; margin-left: 4px; }
/* picker cleanup */
.sell-sheet.picking .sheet-body { min-height: 86vh; display: flex; flex-direction: column; }
.sell-sheet.picking #ssBody { flex: 1; display: flex; flex-direction: column; }
.sell-sheet.picking .pick-list { flex: 1; max-height: none; min-height: 0; }
.pick-seg { margin: 0 0 10px; }
.pick-seg button { padding: 7px 2px; font-size: 13.5px; }
.pick-opts { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.pick-opts select { flex: 1; width: auto; }
.pk-min { display: flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--muted); font-size: 14px; }
.pk-min input { width: 72px; }
.pk-head { display: flex; justify-content: space-between; align-items: center; margin: 0 2px 6px; color: var(--muted); font-size: 13.5px; }
.pk-head .linkbtn { font-size: 14px; }
.pick-list .item.buyrow input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border-radius: 50%;
  border: 1.5px solid var(--muted); flex: none; display: grid; place-items: center; cursor: pointer; }
.pick-list .item.buyrow input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
.pick-list .item.buyrow input[type=checkbox]:checked::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: translateY(-1px) rotate(45deg); }
.pick-list .pq span { min-width: 34px; text-align: center; font-size: 13px; }
.sell-sheet.picking .sheet-body { height: 86vh; min-height: 0; overflow: hidden; padding-bottom: 0; }
.sell-sheet.picking #ssBody { height: 100%; min-height: 0; }
.sell-sheet.picking .pick-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-bottom: 0; }
.sell-sheet.picking .pick-list:has(> .hint) { flex: 0 0 auto; }
.sell-sheet.picking .ss-foot { position: static; margin-top: auto; padding-top: 12px; }
.sell-sheet.picking .sheet-body { padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important; }
/* market prices cleanup */
#mk #mkGame { margin: 4px 0 8px; }
.mk-sub { display: flex; align-items: center; gap: 8px; }
.mk-sub .mk-per { flex: none; width: 150px; margin: 0; }
.mk-jp { margin-left: auto; padding: 6px 12px; border-radius: 999px; border: 0; background: var(--seg); color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.mk-jp.on { background: var(--accent); color: #fff; }
.mk-note { margin: 8px 2px 0; font-size: 13px; }
#mkBack { margin: 0 0 4px; padding-left: 0; }

/* ================= Consistent Brother brand (2026-10-13) =================
   Amber yellow + black + white, chunky blocky display type (Bungee), "sticker" mark: white letters, black outline,
   hard black drop shadow, tilted. Yellow always carries black text, like the logo. */
@font-face { font-family: "Bungee"; src: url("/fonts/bungee-latin.woff2") format("woff2"); font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Bungee"; src: url("/fonts/bungee-latin-ext.woff2") format("woff2"); font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+A720-A7FF; }
:root { --brand: #f9af17; --brand-2: #ffc53d; --on-brand: #111111; --display: "Bungee", "Impact", system-ui, sans-serif;
  --grad: linear-gradient(180deg, var(--brand-2), var(--brand)); --accent-ink: #111111; }
/* dark: yellow is the accent everywhere */
:root[data-theme=dark] { --accent: #f9af17; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --accent: #f9af17; } }
/* light: yellow fills; text links a deeper amber so they stay readable on white */
:root[data-theme=light] { --accent: #a86400; }
@media (prefers-color-scheme: light) { :root:not([data-theme=dark]) { --accent: #a86400; } }

/* fills: brand yellow, black text */
.btn.primary, .addbtn, .tile .plus, .pk .plus, .sell-main, #sellSum #sellMany { background: var(--brand) !important; border-color: var(--brand) !important; color: var(--on-brand) !important; box-shadow: none; }
.btn.primary:disabled { opacity: .45; }
.seg button.on { color: inherit; }
.pick-chips .chip.on, .mk-jp.on, .gr-steps span.on { background: var(--brand); color: var(--on-brand); }
.pick-list .item.buyrow input[type=checkbox]:checked { background: var(--brand); border-color: var(--brand); }
.pick-list .item.buyrow input[type=checkbox]:checked::after { border-color: var(--on-brand); }
.tabs .scan-fab i { background: var(--brand); color: var(--on-brand); box-shadow: 0 6px 18px -6px rgba(249,175,23,.7), 0 0 0 5px var(--bg); }
.tabs .scan-fab i svg { stroke: var(--on-brand); }
.tabs button.on:not(.scan-fab)::before { background: var(--brand); }
.tabs button.on:not(.scan-fab) svg { stroke: var(--accent); }
/* Scan hero: the yellow sticker card */
.scan-hero { background: var(--brand) !important; color: var(--on-brand) !important; box-shadow: 4px 4px 0 #111 !important; border: 2px solid #111 !important; }
.scan-hero::before { display: none; }
.scan-hero .hero-tx > span { font-family: var(--display); font-weight: 400; font-size: 26px !important; letter-spacing: 0; }
.scan-hero small, .scan-hero em { color: var(--on-brand) !important; }
.scan-hero em { background: #111 !important; color: var(--brand) !important; }
.scan-hero .hero-vf i, .scan-hero .hero-vf b { border-color: #111 !important; filter: none; }
/* page titles in the display face */
.ptitle { font-family: var(--display); font-weight: 400; font-size: 30px; letter-spacing: 0; text-transform: uppercase; }
.ss-h, .gr-big b, .auth h1 { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
/* the sticker mark */
.cb-sticker { display: inline-block; font-family: var(--display); color: #fff; line-height: .95; letter-spacing: .01em; transform: rotate(-8deg);
  -webkit-text-stroke: .14em #111; paint-order: stroke fill; text-shadow: .09em .11em 0 #111; }
.cb-by { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 28px 0 8px; color: var(--muted); font-size: 12px; }
.cb-by a { text-decoration: none; }
.cb-by .cb-sticker { font-size: 17px; }
.auth-mark { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 auto 10px; }
.auth-mark .cb-sticker { font-size: 34px; }
.auth-mark small { color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; }
/* the sticker always sits on brand yellow (its black outline needs it) */
.cb-badge { display: inline-grid; place-items: center; padding: .55em .8em .65em; border-radius: 16px; background: var(--brand); }
.cb-by .cb-badge { padding: 10px 16px 12px; border-radius: 12px; }
.scan-hero .hero-vf i { background: rgba(255,255,255,.35); border-color: #111 !important; }
.scan-hero .hero-vf b { --c: #111; }
.scan-hero .hero-vf b::after { background: #111; box-shadow: none; }
.cb-by, .cb-by:hover { text-decoration: none; color: var(--muted); }
/* collection toolbar: search + filter, then count + view buttons */
.coll-search { display: flex; gap: 8px; align-items: center; }
.coll-search #filter { flex: 1; min-width: 0; margin: 0; }
#filtBtn { position: relative; flex: none; }
#filtBtn.on { background: var(--brand); color: var(--on-brand); }
#filtBtn .n { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #111;
  color: var(--brand); font: 700 10px/16px system-ui; font-style: normal; }
#filtBtn .n:empty { display: none; }
#collChips { margin-top: 8px; }
#collChips select { flex: 1; }
.coll-bar { display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; }
.coll-bar #collSummary { flex: 1; margin: 0; min-width: 0; }
.coll-bar #collSummary .lay { margin-left: auto; }
.coll-bar .ichip { flex: none; }
.pf-hero .ranges { margin-top: 4px; }
.pf-hero .ranges button { padding: 4px 0; font-size: 13px; }
/* places */
.pl-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pl-btn { flex: 1; max-width: 62%; display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 8px 12px; border: 0; border-radius: 10px;
  background: var(--panel2); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; text-align: right; }
.pl-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-btn .ic { width: 15px; height: 15px; flex: none; color: var(--accent); }
.pl-new { display: flex; gap: 8px; margin-bottom: 10px; }
.pl-new input { flex: 1; min-width: 0; }
.pl-next { margin: 0 0 10px; border: 0; border-radius: 999px; padding: 7px 14px; background: var(--brand); color: var(--on-brand); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.pl-list { max-height: 46vh; overflow-y: auto; }
.pl-row { cursor: pointer; }
.pl-row.on .nm { color: var(--accent); }
.pl-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--panel2); }
.pl-ic .ic { width: 16px; height: 16px; }
.pl-tick { color: var(--accent); font-weight: 800; }
.pl-ed { font-size: 14px; margin-left: 4px; }
.pl-edit { flex-wrap: wrap; gap: 8px; }
.pl-edit input { flex: 1 1 100%; }
.pl-edit .btn { flex: 1; }
.pl-none { width: 100%; margin-top: 10px; }
.pl-bulk { padding: 8px 12px; border-radius: 10px; border: 0; background: var(--panel2); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-bulk.set { background: var(--brand); color: var(--on-brand); font-weight: 700; }
#plBody .pl-new input { padding: 11px 12px; border: 0; border-radius: 10px; background: var(--panel2); color: var(--ink); font: inherit; font-size: 16px; }
#plBody .pl-next { background: var(--brand); color: var(--on-brand); border: 0; }
#plBody .pl-none { color: var(--bad); }
/* scan: Photo · Binder · Shop check as three equal buttons */
.scanbtns { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
.scanbtns .scan-hero { grid-column: 1 / -1; }
.scanbtns .scan-alt, .scanbtns .shopbtn { flex-direction: column !important; align-items: center !important; justify-content: center; gap: 6px !important;
  padding: 12px 6px !important; margin: 0 !important; min-height: 74px; border-radius: 16px !important; border: 0 !important;
  background: var(--panel) !important; color: var(--ink) !important; text-align: center; }
.scanbtns .scan-alt > span, .scanbtns .shopbtn .sh-tx b { font-size: 13.5px !important; font-weight: 700; }
.scanbtns .scan-alt svg { width: 22px; height: 22px; }
.scanbtns .shopbtn .sh-tx { flex: none; }
.scanbtns .shopbtn .sh-tx small, .scanbtns .shopbtn .sw { display: none; }
.scanbtns .shopbtn .sh-ic { width: 24px; height: 24px; background: none !important; color: var(--accent); }
.scanbtns .shopbtn .sh-ic .ic { width: 22px; height: 22px; }
.scanbtns .shopbtn[aria-pressed=true] { background: var(--brand) !important; color: var(--on-brand) !important; }
.scanbtns .shopbtn[aria-pressed=true] .sh-ic { color: var(--on-brand); }
/* scanning in shop-check mode: say so on the camera */
body.shop-on #live::before { content: "Shop check"; position: absolute; top: 10px; left: 10px; z-index: 3; padding: 5px 10px; border-radius: 999px;
  background: var(--brand); color: var(--on-brand); font-size: 12.5px; font-weight: 800; }
/* game choice row in the scan options */
.scan-opts #gameSeg { width: auto; margin: 0; }
.scan-opts #gameSeg button { padding: 6px 9px; font-size: 13px; min-width: 40px; }
.scan-opts #gameSeg button { flex: none; overflow: visible; text-overflow: clip; white-space: nowrap; }
.scanbtns .shopbtn .sh-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--panel2) !important; }
.scanbtns .shopbtn[aria-pressed=true] .sh-ic { background: rgba(0,0,0,.12) !important; }
/* sell page: sold list + folded monthly table */
#salesBox { margin-top: 0; }
.undo-s { font-size: 13.5px; padding: 2px 0 0; color: var(--muted); }
.sold-more { margin-top: 8px; }
.sold-more > summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 8px 2px; list-style: none; }
.sold-more > summary::-webkit-details-marker { display: none; }
.sold-more > summary::after { content: " ›"; }
.sold-more[open] > summary::after { content: " ⌄"; }
.sold-more:has(#sellingBox[hidden]) { display: none; }
#sellingBox { margin: 4px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--panel); }
#sellingBox > h3:first-child { display: none; }
.sec-h .sec-link { float: right; font-size: 14px; }
/* hero: "Details" is a small pill next to the value, not a loose link under the gear */
.pf-hero { position: relative; }
.pf-hero .pf-l .pf-more { position: absolute; right: 0; top: 34px; margin: 0; padding: 7px 12px; border-radius: 999px;
  background: var(--seg); color: var(--ink); font-size: 13.5px; font-weight: 700; }
/* list rows: status / place / grade as quiet text on one line (no bordered pills crowding the line above) */
.item .st.meta { margin-top: 2px; line-height: 1.35; }
.item .st.meta .bdg { border: 0; padding: 0; background: none; line-height: inherit; font-size: 12.5px; font-weight: 600; border-radius: 0; }
.item .st.meta .bdg.sale { color: var(--good); text-transform: none; }
.item .st.meta .bdg.sale::before { content: "● "; font-size: 9px; vertical-align: 1px; }
.item .st.meta .bdg.grade { color: var(--accent); }
.item .st.meta .bdg.loc { font-weight: 500; }
/* opened set: back link, then the set name with its game tag */
.set-head { padding: 12px 14px; }
.set-head .back { display: block; padding: 0 0 6px; }
.set-head .sh-title { display: flex; align-items: center; gap: 8px; font-size: 19px; line-height: 1.25; }
.set-head .sh-title b { font-weight: 800; }
.set-head .sh-title .tag { flex: none; }
.set-head .summary { margin: 8px 0 0 !important; }
/* card page: no photos yet = a small "Add photo" chip, not a big empty tile */
.photos .add.first { flex-direction: row; width: auto; height: auto; min-height: 0; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 0;
  background: var(--panel); font-size: 14px; font-weight: 600; }
.photos .add.first .ic { width: 17px; height: 17px; margin: 0; }
/* Sell is the second action on this page (Save is the yellow one) */
#shSellWrap .sell-main { background: var(--panel) !important; color: var(--accent) !important; border: 1.5px solid var(--brand) !important; }
.item .st .loc { color: var(--ink); opacity: .75; }
.item .st .loc .ic { width: 12px; height: 12px; vertical-align: -1px; margin-right: 2px; stroke-width: 2.2; }
/* back buttons on sub-pages: a small pill tucked under the title, not a loose link */
#statsBack, #mkBack, #toolBack { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 6px !important; padding: 6px 14px 6px 10px !important;
  border: 0 !important; border-radius: 999px !important; background: var(--seg) !important; color: var(--ink) !important;
  font-size: 14px !important; font-weight: 700 !important; line-height: 1.2; box-shadow: none !important; }
#tab-stats > .sec-h:first-of-type, .mkpage > .mk > #mkGame { margin-top: 6px; }
.toolhead { align-items: center; gap: 10px; }

/* Header: solid, no frosted glass – the blur smeared the white panels scrolling under the title into a fuzzy box */
header.top { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Sets view: Goals and "Your sets" are two grouped cards; names may wrap to two lines instead of "Welcome to Ni…" */
.setlist > .goals { background: var(--panel); border-radius: 14px; padding: 12px 0 2px; gap: 0; margin: 0; }
.setlist > .goals h3 { padding: 0 14px 4px; }
.setlist > .goals > .hint { padding: 8px 14px 14px; }
.setlist > .goals .goal-pick { padding: 0 14px 8px; }
.setlist .goalrow, .setlist .setrow { background: none; border: 0; border-radius: 0; padding: 12px 14px; position: relative; }
.setlist .goalrow + .goalrow::before, .setlist .setrow + .setrow::before { content: ""; position: absolute; top: 0; left: 14px; right: 0; height: 1px;
  background: var(--sep); transform: scaleY(.5); transform-origin: top; }
.setlist .setrow[hidden] + .setrow::before { display: none; }
.setlist .goalrow .nm, .setlist .setrow .nm { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.setlist > .hint { background: var(--panel); border-radius: 14px; padding: 14px; }
#setsHead { margin-top: 24px; }
/* the + icon: a % height inside the grid button resolved against the auto row (squashed, stuck at the top) */
.tile .plus::before, .pk .plus::before, .addbtn::before { height: auto !important; aspect-ratio: 1; align-self: center; justify-self: center; }
#sealedAdd { margin-top: 8px; }
#chart:empty, .ranges:empty { display: none; }
.pf-ch:not(.up):not(.down) span { margin-left: 0; }
/* count line: list/grid, sort and select as three equal round buttons */
.coll-bar > .ichip { flex: none; width: 38px; height: 34px; padding: 0 !important; display: grid; place-items: center; position: relative;
  border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); margin: 0; }
.coll-bar > .ichip .ic { width: 18px; height: 18px; }
.coll-bar #collSummary { row-gap: 2px; }
.hdr-gear.on { background: var(--brand); color: var(--on-brand); }
/* card names in the collection may take two lines – rows are tall enough already ("Ahri - Inquisitive (…" told nothing) */
#collList.list > .item .nm, #sellSuggest .item .nm { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
#sellSuggest .item .st { white-space: normal; }
/* empty collection: a welcome card instead of a toolbar for nothing */
.welcome { grid-column: 1 / -1; background: var(--panel); border-radius: 18px; padding: 28px 22px 24px; text-align: center; }
.welcome .wl-ico { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); }
.welcome .wl-ico .ic { width: 28px; height: 28px; }
.welcome h3 { margin: 0 0 6px; font-size: 20px; }
.welcome p { margin: 0 auto 18px; color: var(--muted); max-width: 300px; line-height: 1.4; }
.welcome .wl-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.welcome .wl-btns .btn { padding: 11px 18px; font-size: 15px; }
#collList.list:has(> .welcome), #collList.cgrid:has(> .welcome) { background: none; }
body.coll-empty .coll-search, body.coll-empty .coll-bar, body.coll-empty #collChips, body.coll-empty #pfMore { display: none !important; }
/* Scan, nothing collected yet: how it works */
.howto .glist { background: var(--panel); border-radius: 14px; overflow: hidden; }
.howto .hw { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; position: relative; }
.howto .hw + .hw::before { content: ""; position: absolute; top: 0; left: 54px; right: 0; height: 1px; background: var(--sep); transform: scaleY(.5); }
.howto .hw-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); font-weight: 800; font-size: 14px; }
.howto b { display: block; font-size: 15px; }
.howto small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; line-height: 1.35; }
.howto-games { text-align: center; color: var(--muted); font-size: 13px; margin: 12px 0 0; }
/* Goals: Edit → a Remove button on each goal */
.goals h3 > #goalEditBtn { margin-left: auto; }
.goals h3 > #goalEditBtn + #goalAdd { margin-left: 4px; }
.goals h3 > .btn.ghost { padding: 4px 10px; font-size: 14px; }
.goal-del { grid-column: 2; grid-row: 1 / 3; align-self: center; border: 0; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 14px;
  font-weight: 600; background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); cursor: pointer; }
.goals.editing .goalrow { cursor: default; }
/* set and goal names: wrap freely (iPhone's 2-line clamp added a stray "…" after names that fit) */
.setlist .goalrow .nm, .setlist .setrow .nm { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* page header: a hairline once the page scrolls under it, so cut-off content reads as "under the bar" */
header.top { transition: box-shadow .2s; }
body.scrolled header.top { box-shadow: 0 .5px 0 var(--sep); }
/* the other games' tags */
.tag.magic { background: #8e5a2b; } .tag.yugioh { background: #6e4bd8; } .tag.onepiece { background: #d62d20; }
.tag.lorcana { background: #1f6fd1; } .tag.swu { background: #3a3a3c; } .tag.fab { background: #9b1c1c; }
.tag.digimon { background: #0a84ff; } .tag.dbs { background: #ff9500; color: #2a1a00; } .tag.gundam { background: #2c5f8a; }
.tag.sorcery { background: #7a6a45; } .tag.weiss { background: #c2185b; } .tag.vanguard { background: #00897b; }
.tag.fftcg { background: #5856d6; } .tag.fow { background: #6d4c41; } .tag.bss { background: #e64a19; }
/* Market: "More…" games list sits in the game segment like a fourth button */
#mkGame select { flex: 1; min-width: 0; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600; font-size: 13px;
  text-align: center; text-align-last: center; padding: 6px 4px; border-radius: 8px; appearance: none; -webkit-appearance: none; cursor: pointer; }
#mkGame select.on { background: var(--seg-on, var(--panel)); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
/* camera status: room for the round buttons in both bottom corners – longer messages wrap instead of hiding under them */
.live-status { max-width: calc(100% - 132px); line-height: 1.25; }
/* camera: the game picked by hand ("Magic only"), top right (Shop check sits top left) */
#live[data-game]:not([data-game=""])::after { content: attr(data-game); position: absolute; top: 10px; right: 10px; z-index: 3; padding: 5px 10px;
  border-radius: 999px; background: rgba(10,12,17,.62); color: #fff; font-size: 12px; font-weight: 700; backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.14); pointer-events: none; }
/* iPhone home-screen app: a page shorter than the screen leaves the screen "short" too – the tab bar then floats above
   a black strip (Scan before Recently added appears, empty lists). Every page is at least the full screen (+1 px so
   it counts as scrollable, which is what keeps iOS honest). lvh = the full height, with or without browser bars. */
body { min-height: calc(100vh + 1px); min-height: calc(100lvh + 1px); }
/* Settings: privacy / support links and the not-affiliated line under the brand */
.legal-links { text-align: center; margin: 6px 0 2px; font-size: 13px; }
.legal-links a { color: var(--accent); text-decoration: none; }
.legal-note { text-align: center; color: var(--muted); font-size: 11.5px; margin: 6px 24px 18px; line-height: 1.4; }
/* Store version: owner tools and experiments only for the owner; eBay only once it's connected (or for the owner) */
body:not(.is-owner) .owner-only { display: none !important; }
body:not(.is-owner):not(.ebay-ready) .ebay-only { display: none !important; }
body:not(.is-owner):not(.ebay-on) .ebay-tool { display: none !important; }
/* "Is it real?" and grade estimate: always say it's a guide */
.rc-disclaimer { margin: 14px 16px calc(18px + env(safe-area-inset-bottom)); color: var(--muted); font-size: 12px; line-height: 1.4; text-align: center; }
/* Scan screen: Photo scan + Binder page; Shop check lives in the scan options and only shows here while it's on */
.scanbtns { grid-template-columns: 1fr 1fr !important; }
.scanbtns .shopbtn[aria-pressed=false] { display: none !important; }
body.shop-on .scanbtns { grid-template-columns: repeat(3, 1fr) !important; }
/* sell sheet: the fee under "You keep", tap to change */
.ss-total .linkbtn { font-size: 12px; padding: 0 0 0 4px; }
.ss-fee { margin-top: 6px; background: var(--panel); border-radius: 12px; }
.ss-fee input { width: 70px; }
/* Signed out on this phone (account.js "cv-out"): nothing of the app shows behind the sign-in screen, even for the moment
   before it appears */
html.signed-out body > *:not(.auth):not(#toast) { visibility: hidden !important; }