/* The record collection app's colours over the web iOS kit (src/ioskit/ios.css), the tab bar, and its own pieces: covers,
   the crate (CSS 3D), the grid, the pressing picker, the record sheet, grading, the shop mode, the scanner and the stats.
   Sleeve paper and label red in light; a dim listening room in dark. */
:root {
  --canvas: #F3EEE6; --grouped: #F3EEE6; --row: #FFFDF9; --card: #FFFDF9;
  --label: #C4472D; --tint: var(--label); --forest: var(--label); --coral: var(--label);
  --text: #1E1A16; --text2: rgba(52, 40, 30, 0.64); --text3: rgba(52, 40, 30, 0.34); --sep: rgba(52, 40, 30, 0.16);
  --fill: rgba(110, 86, 60, 0.14); --fill2: rgba(110, 86, 60, 0.1);
  --glass: rgba(255, 253, 249, 0.86); --glass-edge: rgba(50, 35, 20, 0.08);
  --have: #2E7D4F; --other: #B7791F; --wood: #B98A56; --wood2: #A27544; --wood-dark: #6E4C2A; --wood-line: rgba(60, 35, 10, 0.28);
  --tabbar-space: calc(var(--sab) + 108px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #141210; --grouped: #141210; --row: #221E1A; --card: #221E1A;
    --label: #FF8A66; --forest: var(--label); --coral: var(--label); --tint: var(--label); --text: #F5EEE4; --text2: rgba(245, 238, 228, 0.64); --text3: rgba(245, 238, 228, 0.32); --sep: rgba(245, 238, 228, 0.14);
    --fill: rgba(245, 225, 200, 0.15); --fill2: rgba(245, 225, 200, 0.1);
    --glass: rgba(42, 36, 31, 0.84); --glass-edge: rgba(255, 240, 220, 0.09);
    --have: #5FCB8B; --other: #E6B45A; --wood: #6B4B2C; --wood2: #5A3E23; --wood-dark: #2F2012; --wood-line: rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas: #141210; --grouped: #141210; --row: #221E1A; --card: #221E1A;
  --label: #FF8A66; --forest: var(--label); --coral: var(--label); --tint: var(--label); --text: #F5EEE4; --text2: rgba(245, 238, 228, 0.64); --text3: rgba(245, 238, 228, 0.32); --sep: rgba(245, 238, 228, 0.14);
  --fill: rgba(245, 225, 200, 0.15); --fill2: rgba(245, 225, 200, 0.1);
  --glass: rgba(42, 36, 31, 0.84); --glass-edge: rgba(255, 240, 220, 0.09);
  --have: #5FCB8B; --other: #E6B45A; --wood: #6B4B2C; --wood2: #5A3E23; --wood-dark: #2F2012; --wood-line: rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}
.btn-primary { --btn: var(--label); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary, :root:not([data-theme="light"]) .btn-bordered.prominent, :root:not([data-theme="light"]) .alert-btn:not(.cancel):not(.destructive) { color: #2A140B; } }
:root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .btn-bordered.prominent, :root[data-theme="dark"] .alert-btn:not(.cancel):not(.destructive) { color: #2A140B; }
.btn-primary:disabled { opacity: 0.5; }

/* ---------- tabs ---------- */
#stack .tab-pane { position: absolute; inset: 0; }
#stack .screen-body { padding-bottom: var(--tabbar-space); }
.tabbar { position: absolute; z-index: 10; left: 50%; bottom: calc(var(--sab) + 18px); transform: translateX(-50%); display: grid; grid-template-columns: repeat(4, 80px); padding: 4px; border-radius: 34px;
  background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); box-shadow: 0 0 0 0.5px var(--glass-edge), 0 8px 30px rgba(40, 20, 0, 0.16); --i: 0; }
.tab-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 80px; border-radius: 30px; background: var(--fill); transform: translateX(calc(var(--i) * 100%)); transition: transform 0.38s var(--ease); }
.tab-item { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 54px; border-radius: 30px; color: var(--text); }
.tab-item.on { color: var(--label); }
.tab-icon, .tab-icon svg { width: 26px; height: 26px; display: block; }
.tab-label { font-size: 10px; line-height: 12px; font-weight: 600; letter-spacing: 0.01em; }
.tab-item:active .tab-icon { transform: scale(0.92); }
body.has-sheet .tabbar { visibility: hidden; }
@media (min-width: 700px) {
  .tabbar { bottom: auto; top: calc(var(--sat) + 8px); grid-template-columns: repeat(4, 124px); padding: 3px; border-radius: 26px; }
  .tab-pill { top: 3px; bottom: 3px; left: 3px; width: 124px; border-radius: 22px; }
  .tab-item { flex-direction: row; gap: 6px; height: 44px; border-radius: 22px; }
  .tab-icon, .tab-icon svg { width: 20px; height: 20px; }
  .tab-label { font-size: 15px; line-height: 20px; }
  #stack .screen.tab-root .nav-title { visibility: hidden; }
  #stack .screen-body { padding-bottom: calc(var(--sab) + 32px); }
  body.has-sheet .tabbar { visibility: visible; }
}

/* ---------- shared bits ---------- */
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; width: 100%; }
.wrap.wide { max-width: 1080px; }
.big-title { font: 700 34px/40px var(--serif); letter-spacing: -0.01em; padding: 4px 4px 2px; }
.lede { color: var(--text2); font-size: 16px; line-height: 22px; padding: 0 4px 6px; }
.sec-h { font: 600 20px/26px var(--serif); padding: 26px 4px 10px; display: flex; align-items: baseline; gap: 8px; }
.note { color: var(--text2); font-size: 13px; line-height: 18px; padding: 10px 6px 0; }
.note a, .group-footer a { color: var(--label); }
.pro-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin-left: 6px; border-radius: 9px; font: 700 10px/18px var(--sys); letter-spacing: 0.06em; color: #fff; background: #C99A3C; vertical-align: 2px; }
.pill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 12px; background: var(--fill); font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.pill.why { background: color-mix(in srgb, var(--have) 18%, transparent); color: var(--have); }
.pill.x { padding-right: 6px; cursor: pointer; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.row .grow { flex: 1 1 auto; min-width: 0; }
.r-title { font-weight: 600; overflow-wrap: anywhere; }
.r-sub { color: var(--text2); font-size: 14px; line-height: 19px; margin-top: 1px; overflow-wrap: anywhere; }
.r-end { color: var(--text2); font-size: 15px; white-space: nowrap; flex: none; }
.ic { width: 1.1em; height: 1.1em; flex: none; display: inline-block; vertical-align: -0.16em; }
a.row { text-decoration: none; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--fill); border-top-color: var(--label); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.waiting { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 60px 20px; color: var(--text2); text-align: center; }

/* ---------- covers ---------- */
.cov { position: relative; display: block; aspect-ratio: 1; width: 100%; border-radius: 3px; overflow: hidden; background: #D6C6A8; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 6px 14px rgba(30, 15, 0, 0.14); flex: none; }
.cov > svg, .cov > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cov.s48 { width: 48px; } .cov.s56 { width: 56px; } .cov.s64 { width: 64px; } .cov.s84 { width: 84px; }
.cov.s48, .cov.s56, .cov.s64 { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22); border-radius: 2px; }
.grade-badge { display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 7px; border-radius: 7px; font: 700 12px/1 var(--sys); letter-spacing: 0.02em; color: #fff; background: #6B7280; flex: none; }
.grade-badge.gM, .grade-badge.gNM { background: #2E7D4F; } .grade-badge.gVGp { background: #4C8C3F; } .grade-badge.gVG { background: #9A8A2C; }
.grade-badge.gGp { background: #B7791F; } .grade-badge.gG { background: #B5622A; } .grade-badge.gF { background: #A8402C; } .grade-badge.gP { background: #7A2A22; }
.grade-badge.none { background: var(--fill); color: var(--text2); font-weight: 600; }

/* ---------- Add ---------- */
.scan-hero { display: flex; align-items: center; gap: 16px; width: 100%; margin-top: 10px; padding: 18px 20px; border-radius: 26px; color: #fff; background: linear-gradient(135deg, #C4472D, #9E3320); box-shadow: 0 10px 24px rgba(150, 50, 20, 0.28); text-align: left; transition: transform 0.15s var(--ease); }
.scan-hero:active { transform: scale(0.985); }
.scan-hero .sh-ic { width: 56px; height: 56px; border-radius: 16px; background: rgba(255, 255, 255, 0.16); display: grid; place-items: center; flex: none; }
.scan-hero .sh-ic svg { width: 34px; height: 34px; }
.scan-hero b { display: block; font: 700 20px/25px var(--serif); }
.scan-hero span span { display: block; font-size: 14px; line-height: 19px; opacity: 0.88; margin-top: 2px; }
.go-row { display: flex; padding: 10px 14px 12px; }
.go-row .btn-secondary { min-height: 46px; border-radius: 14px; }

/* ---------- the pressing picker ---------- */
.pick-head { padding: 2px 6px 12px; }
.pick-head .lede { padding: 4px 0 10px; }
.press { align-items: flex-start; gap: 14px; }
.press .cov { margin-top: 2px; }
.press .pills { margin-top: 7px; }
.confirm-head { display: flex; gap: 16px; align-items: flex-start; padding: 6px 6px 4px; }
.confirm-head .cov { width: 120px; }
.confirm-head h2 { font: 700 24px/28px var(--serif); overflow-wrap: anywhere; }
.confirm-head .by { font-size: 17px; margin-top: 3px; overflow-wrap: anywhere; }
.confirm-head .r-sub { margin-top: 6px; }
.state-card { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: 20px; background: var(--fill2); }
.state-card .dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--text3); }
.state-card.have { background: color-mix(in srgb, var(--have) 15%, transparent); } .state-card.have .dot { background: var(--have); }
.state-card.other { background: color-mix(in srgb, var(--other) 17%, transparent); } .state-card.other .dot { background: var(--other); }
.state-card.want { background: color-mix(in srgb, var(--label) 14%, transparent); } .state-card.want .dot { background: var(--label); }
.state-card b { display: block; font-size: 17px; line-height: 22px; }
.state-card span span { display: block; font-size: 14px; line-height: 19px; color: var(--text2); margin-top: 2px; }
.btn-stack { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

/* ---------- Collection ---------- */
.screen.collection .screen-body { display: flex; flex-direction: column; }
.coll-bar { flex: none; padding-bottom: 8px; }
.coll-tools { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.coll-tools .segmented { flex: 1 1 190px; min-width: 190px; max-width: 320px; }
.coll-tools .tool-btn { flex: none; }
.coll-tools .sort-name { max-width: 18vw; overflow: hidden; text-overflow: ellipsis; }
.tool-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px; background: var(--fill2); font-size: 14px; font-weight: 600; white-space: nowrap; }
.tool-btn.on { background: color-mix(in srgb, var(--label) 16%, transparent); color: var(--label); }
.tool-btn:active { opacity: 0.6; }
.coll-count { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 4px 0; color: var(--text2); font-size: 14px; min-height: 34px; }
.coll-view { flex: 1 0 auto; display: flex; flex-direction: column; }
.limit-note { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 10px 14px; border-radius: 16px; background: color-mix(in srgb, #C99A3C 16%, transparent); font-size: 14px; line-height: 19px; }
.limit-note .text-btn { font-weight: 600; white-space: nowrap; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 18px 14px; padding: 8px 2px 8px; }
.tile { display: flex; flex-direction: column; gap: 7px; min-width: 0; text-align: left; transition: transform 0.15s var(--ease); }
.tile:active { transform: scale(0.97); }
.tile .t-title { font-size: 13px; line-height: 17px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tile .t-sub { font-size: 12px; line-height: 15px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -4px; }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 20px; } .tile .t-title { font-size: 14px; } }
.rec-row .row-main, .shop-row .row-main, .press .row-main, .grade-row .row-main { gap: 14px; }
.press .row-main, .grade-row .row-main { align-items: flex-start; }
.empty-art { display: block; width: 150px; height: 150px; margin: 34px auto 4px; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.25)); }
.empty-art svg { width: 100%; height: 100%; display: block; }

/* ---------- the crate (js/crate.js works out the depth; nothing here relies on preserve-3d) ---------- */
.crate { --s: min(64vw, 300px, 30dvh); position: relative; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; outline: none; padding-top: 2px; user-select: none; -webkit-user-select: none; }
.crate-stage { position: relative; width: 100%; height: calc(var(--s) * 1.3 + 90px); touch-action: none; cursor: grab; overflow: hidden; }
.crate-stage.dragging { cursor: grabbing; }
.crate-box { position: absolute; left: 50%; bottom: 34px; width: 0; height: 0; }
.crate-back { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.cb-back { fill: var(--wood-dark); } .cb-left, .cb-right { fill: var(--wood2); }
.crate-sleeves { position: absolute; left: calc(var(--s) / -2); bottom: 0; width: var(--s); height: var(--s); }
.sleeve { position: absolute; inset: 0; display: block; transform-origin: 50% 100%; will-change: transform, opacity; }
.sleeve-face { position: relative; display: block; width: 100%; height: 100%; transition: transform 0.38s var(--ease); }
.sleeve-face::before { content: ""; position: absolute; left: 1px; right: 1px; top: -3px; height: 3px; border-radius: 1.5px 1.5px 0 0; background: linear-gradient(#F7EFDF, #CDBFA5); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.3); }
.sleeve.lifted .sleeve-face { transform: translateY(-7%); }
.sleeve .cov { width: 100%; height: 100%; border-radius: 1px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.35), 0 10px 20px rgba(20, 10, 0, 0.28); }
.sleeve.front { cursor: pointer; }
.sleeve:focus-visible { outline: 3px solid var(--label); outline-offset: 3px; }
.sleeve-tab { position: absolute; bottom: calc(100% + 2px); left: 8%; min-width: 34px; height: 24px; padding: 0 9px; border-radius: 7px 7px 0 0; background: #F6ECD4; color: #3A2A17; font: 700 14px/24px var(--sys); text-align: center; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25); }
.sleeve-tab.tab1 { left: 40%; } .sleeve-tab.tab2 { left: 70%; }
.crate-front { position: absolute; left: 0; z-index: 1000; display: grid; place-items: center; border-radius: 3px; background: repeating-linear-gradient(180deg, var(--wood) 0 31%, var(--wood-line) 31% 33.3%); box-shadow: 0 14px 22px rgba(20, 10, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18); pointer-events: none; }
.crate-handle { width: 30%; height: 20%; border-radius: 999px; background: rgba(30, 15, 0, 0.5); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.45); }
:root[data-crate="milk"] { --wood: #2F6FA8; --wood2: #285F90; --wood-dark: #1B3F60; --wood-line: rgba(0, 20, 50, 0.45); }
:root[data-crate="black"] { --wood: #2B2B2E; --wood2: #232326; --wood-dark: #101012; --wood-line: rgba(0, 0, 0, 0.6); }
.crate-cap { text-align: center; padding: 0 20px 2px; min-height: 50px; max-width: 520px; }
.crate-title { font: 700 21px/26px var(--serif); overflow-wrap: anywhere; }
.crate-sub { color: var(--text2); font-size: 15px; line-height: 20px; margin-top: 2px; }
.crate-nav { display: flex; align-items: center; gap: 8px; width: min(100%, 460px); padding: 8px 6px 4px; }
.crate-step { width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; background: var(--fill2); flex: none; }
.crate-step:active { opacity: 0.6; }
.crate-range { flex: 1; min-width: 0; accent-color: var(--label); height: 44px; }
.crate-count { font-size: 13px; color: var(--text2); min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
@media (min-width: 700px) { .crate { --s: min(330px, 40dvh); } }

/* ---------- the record sheet ---------- */
.rec-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 4px 10px 6px; }
.jacket { position: relative; width: min(58%, 240px); aspect-ratio: 1; margin: 2px 16% 16px 0; }
.jacket .cov { position: relative; z-index: 1; width: 100%; border-radius: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 18px 34px rgba(30, 15, 0, 0.26); }
.jacket-disc { position: absolute; z-index: 0; left: 0; top: 2%; width: 96%; height: 96%; transform: translateX(36%) rotate(40deg); animation: disc-out 0.9s var(--ease) both; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3)); }
.jacket-disc svg { width: 100%; height: 100%; display: block; }
@keyframes disc-out { from { transform: translateX(4%) rotate(-60deg); } to { transform: translateX(36%) rotate(40deg); } }
.rec-hero h2 { font: 700 26px/31px var(--serif); overflow-wrap: anywhere; }
.rec-hero .by { font-size: 18px; line-height: 23px; overflow-wrap: anywhere; }
.rec-hero .r-sub { font-size: 14px; margin-top: 4px; }
.rec-hero .pills { justify-content: center; margin-top: 10px; }
.play-row { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 12px 14px 12px 18px; border-radius: 24px; background: var(--row); }
.play-row .grow b { display: block; font-size: 17px; }
.play-row .grow span { display: block; color: var(--text2); font-size: 14px; line-height: 19px; }
.play-btn { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 18px; border-radius: 22px; background: var(--label); color: #fff; font-weight: 600; white-space: nowrap; flex: none; }
.play-btn:active { opacity: 0.75; }
:root[data-theme="dark"] .play-btn { color: #2A140B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .play-btn { color: #2A140B; } }
.track { display: flex; gap: 12px; align-items: baseline; padding: 9px 20px; font-size: 16px; line-height: 21px; }
.track + .track { border-top: 0.5px solid var(--sep); }
.track .tn { width: 30px; flex: none; color: var(--text2); font-size: 13px; font-variant-numeric: tabular-nums; }
.track .tt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.track .tl { color: var(--text2); font-size: 13px; font-variant-numeric: tabular-nums; }
.side-h { display: flex; justify-content: space-between; padding: 12px 20px 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text2); }
.tracks { background: var(--row); border-radius: 26px; overflow: hidden; padding: 2px 0 6px; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; padding: 14px 16px; width: 100%; }
.photo { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--fill2); display: grid; place-items: center; color: var(--text2); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo.add { border: 1.5px dashed var(--text3); background: none; color: var(--label); font-size: 13px; font-weight: 600; gap: 2px; align-content: center; text-align: center; }
.photo.add .sf { font-size: 22px; }
.barcode-pic { display: block; width: 100%; padding: 12px 20px 14px; }
.barcode-pic svg { display: block; height: 44px; width: auto; max-width: 100%; border-radius: 4px; }
.barcode-pic span { display: block; font: 13px/18px ui-monospace, "SF Mono", Menlo, monospace; color: var(--text2); margin-top: 4px; letter-spacing: 0.06em; }

/* ---------- grading ---------- */
.grade-row { align-items: flex-start; gap: 14px; }
.grade-row .grade-badge { margin-top: 2px; }
.grade-row .g-desc { font-size: 14px; line-height: 19px; color: var(--text2); margin-top: 3px; }
.grade-row .g-check { color: var(--label); font-size: 18px; flex: none; width: 20px; margin-top: 2px; }
.suggest { margin-top: 18px; padding: 18px; border-radius: 24px; background: var(--row); text-align: center; }
.suggest .big { font: 700 30px/36px var(--serif); margin: 4px 0 2px; }
.suggest .btn-primary { margin-top: 14px; }

/* ---------- Wantlist and the shop ---------- */
.shop-hero { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 10px; padding: 16px 18px; border-radius: 24px; background: var(--row); box-shadow: 0 4px 14px rgba(30, 15, 0, 0.06); text-align: left; }
.shop-hero:active { background: var(--fill2); }
.shop-hero .sh-ic { width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--label) 14%, transparent); color: var(--label); display: grid; place-items: center; flex: none; }
.shop-hero .sh-ic svg { width: 28px; height: 28px; }
.shop-hero b { display: block; font: 700 19px/24px var(--serif); }
.shop-hero span span { display: block; font-size: 14px; line-height: 19px; color: var(--text2); }
.shop .screen-body { padding-bottom: calc(var(--sab) + 30px); }
.shop-tools { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.shop-tools .search-field { flex: 1; height: 54px; border-radius: 27px; }
.shop-tools .search-input { font-size: 18px; }
.shop-scan { display: inline-flex; align-items: center; gap: 8px; height: 54px; padding: 0 22px; border-radius: 27px; font-size: 18px; background: var(--label); color: #fff; font-weight: 600; flex: none; white-space: nowrap; }
:root[data-theme="dark"] .shop-scan { color: #2A140B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shop-scan { color: #2A140B; } }
.shop-result { margin-top: 14px; padding: 18px; border-radius: 26px; background: var(--row); border: 2px solid var(--sep); }
.shop-result.have { border-color: var(--have); } .shop-result.other { border-color: var(--other); } .shop-result.want { border-color: var(--label); }
.shop-result .verdict { font: 700 26px/31px var(--serif); }
.shop-result.have .verdict { color: var(--have); } .shop-result.other .verdict { color: var(--other); } .shop-result.want .verdict { color: var(--label); }
.shop-result .what { display: flex; gap: 14px; align-items: center; margin-top: 12px; }
.shop-result .more { color: var(--text2); font-size: 15px; line-height: 20px; margin-top: 10px; }
.shop-result .btn-stack { margin-top: 14px; }
.shop-row { gap: 14px; min-height: 76px; }
.shop-result .btn-primary, .shop-result .btn-secondary { min-height: 56px; }
.shop-row .r-title { font-size: 18px; }
.shop-row .r-end { font-size: 17px; font-weight: 700; color: var(--text); }

/* ---------- the scanner ---------- */
.screen.scan-screen { background: #000; color: #fff; --bar-fade: transparent; }
.scan-screen .nav-title { color: #fff; }
.scan-screen .glass { background: rgba(70, 70, 70, 0.72); color: #fff; }
.scan-screen .screen-body { padding: 0; overflow: hidden; }
.scan-view { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.scan-view video, .scan-view .fake-cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-view .fake-cam { display: grid; place-items: center; background: #3a332b; }
.scan-view .fake-cam svg { width: min(120vw, 120vh); height: auto; transform: translate(-16%, -24%) rotate(-4deg); }
.scan-frame { position: relative; z-index: 2; width: min(78vw, 420px); aspect-ratio: 2.1; border-radius: 22px; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.46); }
.scan-frame::before { content: ""; position: absolute; inset: 0; border-radius: 22px; border: 3px solid #fff; opacity: 0.92; }
.scan-frame::after { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; background: #FF5A3C; box-shadow: 0 0 10px #FF5A3C; animation: scanline 1.6s ease-in-out infinite alternate; }
@keyframes scanline { from { transform: translateY(-34px); } to { transform: translateY(34px); } }
.scan-foot { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 18px 20px calc(var(--sab) + 22px); display: flex; flex-direction: column; align-items: center; gap: 12px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.72) 40%); text-align: center; }
.scan-status { font-size: 16px; line-height: 21px; max-width: 420px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.scan-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.scan-btn { height: 44px; padding: 0 18px; border-radius: 22px; background: rgba(255, 255, 255, 0.2); color: #fff; font-weight: 600; font-size: 15px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.scan-btn:active { opacity: 0.6; }

/* ---------- Stats ---------- */
.headline { margin-top: 8px; padding: 22px 20px; border-radius: 28px; color: #fff; background: linear-gradient(140deg, #2B2420, #5B2A1E 70%, #C4472D); position: relative; overflow: hidden; }
.headline .n { font: 700 54px/56px var(--serif); letter-spacing: -0.02em; }
.headline .t { font: 600 20px/26px var(--serif); margin-top: 2px; max-width: 78%; }
.headline .disc { position: absolute; right: -52px; bottom: -58px; width: 190px; height: 190px; opacity: 0.9; }
.headline .disc svg { width: 100%; height: 100%; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.tiles > div { padding: 12px 6px; border-radius: 18px; background: var(--row); text-align: center; min-width: 0; }
.tiles b { display: block; font: 700 22px/27px var(--serif); }
.tiles span { display: block; font-size: 12px; line-height: 15px; color: var(--text2); }
.chart { padding: 16px 18px; border-radius: 26px; background: var(--row); }
.decades { display: flex; align-items: flex-end; gap: 8px; height: 150px; }
.decades > div { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; }
.decades i { display: block; width: 100%; max-width: 44px; border-radius: 8px 8px 3px 3px; background: var(--label); min-height: 4px; }
.decades b { font-size: 12px; font-weight: 600; }
.decades span { font-size: 12px; color: var(--text2); white-space: nowrap; }
.bars { display: flex; flex-direction: column; gap: 9px; }
.bar { display: grid; grid-template-columns: minmax(0, 38%) 1fr auto; align-items: center; gap: 10px; font-size: 15px; }
.bar .bn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; }
.bar i { display: block; height: 10px; border-radius: 5px; background: var(--label); min-width: 4px; }
.bar b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text2); font-size: 14px; }
.locked { position: relative; margin-top: 16px; padding: 26px 20px; border-radius: 26px; background: var(--row); text-align: center; }
.locked h3 { font: 700 22px/27px var(--serif); }
.locked p { color: var(--text2); font-size: 15px; line-height: 20px; margin: 6px auto 16px; max-width: 380px; }
.locked .ghost { display: flex; align-items: flex-end; justify-content: center; gap: 8px; height: 70px; margin-bottom: 16px; opacity: 0.35; }
.locked .ghost i { width: 26px; border-radius: 7px 7px 2px 2px; background: var(--label); }

/* phones: the nav bar already says Collection, so the crate gets the room */
@media (max-width: 699px) { .coll-bar .big-title { display: none; } .coll-bar { padding-top: 2px; } }

.cov > img { animation: cov-in 0.25s ease-out; }
@keyframes cov-in { from { opacity: 0; } }
/* a wide window: the crate, grid or list on the left, the record you're on to the right */
.split { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); gap: 8px; height: 100%; max-width: 1500px; margin: 0 auto; padding: 0 16px 0 28px; }
.split-main { display: flex; flex-direction: column; min-width: 0; }
.split .split-main { overflow-y: auto; padding: 0 12px 24px 0; scrollbar-width: thin; }
.split-side { overflow-y: auto; scrollbar-width: thin; border-left: 0.5px solid var(--sep); padding-bottom: 24px; }
.split-side .form { padding-top: 14px; }
@media (min-width: 1000px) { #stack .screen.collection .screen-body { overflow: hidden; padding-bottom: 0; } }
.tile.sel .cov { outline: 3px solid var(--label); outline-offset: 3px; }
.rec-row.sel { background: color-mix(in srgb, var(--label) 10%, transparent); }