/* TCG Scanner — latte palette · Tektur / Space Grotesk / Space Mono
   Implements the Claude Design canvas "TCG Scanner Canvas.dc.html". */

:root {
  /* surfaces */
  --bg: #f1f3f0;
  --app: #f1f3f0;
  --surface: #ffffff;
  --surface-hi: #fafbfa;
  --bar: #ffffff;
  /* lines */
  --line: #d9ded8;
  --line-soft: #e2e6e1;
  --hairline: #e8ebe7;
  --hairline-2: #eef0ed;
  /* ink */
  --ink: #292d29;
  --ink-strong: #222622;
  --body-ink: #4d554e;
  --mid: #59615a;
  --muted: #687069;
  --faint: #7b847c;
  --ghost: #929a93;
  /* accent (amber) */
  --accent: oklch(0.62 0.1 65);
  --accent-press: oklch(0.58 0.1 65);
  --on-accent: oklch(0.97 0.015 85);
  --link: oklch(0.52 0.1 60);
  --link-press: oklch(0.45 0.1 55);
  --brown: oklch(0.5 0.06 40);
  --price: oklch(0.5 0.09 60);
  /* status */
  --good-bg: oklch(0.92 0.035 130);
  --good-line: oklch(0.82 0.05 130);
  --good-ink: oklch(0.38 0.08 130);
  --good-sub: oklch(0.42 0.05 110);
  --good-chip-bg: oklch(0.87 0.05 130);
  --good-chip-ink: oklch(0.4 0.08 130);
  --live-bg: oklch(0.89 0.045 130);
  --live-ink: oklch(0.42 0.08 130);
  --warn-bg: oklch(0.9 0.06 90);
  --warn-ink: oklch(0.5 0.09 80);
  --warn-card-bg: oklch(0.975 0.014 90);
  --warn-card-line: oklch(0.78 0.07 85);
  --bad-chip-bg: oklch(0.89 0.05 25);
  --bad-soft: oklch(0.96 0.03 25);
  --bad-line: oklch(0.8 0.06 25);
  --bad-ink: oklch(0.5 0.1 25);
  /* camera + measurement overlay */
  --cam: oklch(0.27 0.02 60);
  --cam-2: oklch(0.29 0.02 60);
  --cam-pill: oklch(0.2 0.02 60 / 0.75);
  --cam-text: oklch(0.85 0.03 80);
  --cut: oklch(0.75 0.1 70);
  --cut-bright: oklch(0.85 0.1 70);
  --art: oklch(0.72 0.08 130);
  --art-bright: oklch(0.8 0.07 130);
  --dev-bg: oklch(0.3 0.025 60);
  /* type */
  --f-display: 'Tektur', sans-serif;
  --f-body: 'Space Grotesk', sans-serif;
  --f-mono: 'Space Mono', monospace;
  --tabbar-h: calc(62px + env(safe-area-inset-bottom));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font: 14px/1.45 var(--f-body);
  overscroll-behavior-y: none;
}
a { color: var(--link); }
a:hover { color: var(--link-press); }
button { font-family: inherit; }
img { -webkit-user-drag: none; }
[data-card-zoom] { cursor: zoom-in; }

/* Installed mobile PWA pull-to-refresh affordance. */
.pull-refresh {
  --pull-distance: 0px;
  position: fixed; z-index: 55; top: max(8px, env(safe-area-inset-top)); left: 50%;
  transform: translate(-50%, calc(-52px + var(--pull-distance)));
  min-height: 36px; padding: 8px 13px; border: 1px solid var(--line);
  border-radius: 99px; background: oklch(0.97 0.012 85 / .96); color: var(--muted);
  box-shadow: 0 5px 18px oklch(0.3 0.03 55 / .16);
  display: flex; align-items: center; gap: 7px; pointer-events: none;
  font: 600 11px var(--f-mono); opacity: 0;
}
.pull-refresh.pulling, .pull-refresh.ready, .pull-refresh.refreshing { opacity: 1; }
.pull-refresh.settling, .pull-refresh.refreshing { transition: transform .2s ease, opacity .2s ease; }
.pull-refresh.ready { color: var(--link); }
.pull-refresh-icon { font-size: 16px; line-height: 1; transition: transform .16s ease; }
.pull-refresh.ready .pull-refresh-icon { transform: rotate(180deg); }
.pull-refresh.refreshing .pull-refresh-icon { animation: pull-refresh-spin .7s linear infinite; }
@keyframes pull-refresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pull-refresh-icon, .pull-refresh.settling, .pull-refresh.refreshing { transition: none; }
  .pull-refresh.refreshing .pull-refresh-icon { animation: none; }
}

/* Card images also offer a dedicated high-detail zoom surface. */
.image-viewer {
  position: fixed;
  left: var(--overlay-left, 0);
  top: var(--overlay-top, 0);
  width: var(--overlay-width, 100vw);
  height: var(--overlay-height, 100dvh);
  z-index: 10000;
  background: oklch(0.14 0.015 60 / .96);
  color: var(--cam-text);
  display: grid;
  grid-template-rows: auto 1fr;
  overscroll-behavior: contain;
}
.image-viewer-bar {
  min-height: 58px;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  background: linear-gradient(to bottom, oklch(0.1 0.01 60 / .72), transparent);
  pointer-events: none;
}
.image-viewer-hint {
  margin-right: auto;
  padding-left: 4px;
  color: oklch(0.78 0.025 80);
  font: 10px var(--f-mono);
  letter-spacing: .04em;
}
.image-viewer-close {
  width: 40px;
  height: 40px;
  border: 1px solid oklch(0.55 0.025 70 / .5);
  border-radius: 50%;
  background: oklch(0.25 0.02 60 / .82);
  color: white;
  display: grid;
  place-items: center;
  cursor: pointer;
  pointer-events: auto;
}
.image-viewer-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 18px max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  touch-action: none;
  cursor: zoom-in;
  user-select: none;
}
.image-viewer-stage.zoomed { cursor: grab; }
.image-viewer-stage.dragging { cursor: grabbing; }
.image-viewer-stage img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transform: translate3d(var(--viewer-x, 0), var(--viewer-y, 0), 0) scale(var(--viewer-scale, 1));
  transform-origin: center;
  will-change: transform;
  box-shadow: 0 18px 60px oklch(0.04 0 0 / .45);
}

@media (prefers-reduced-motion: no-preference) {
  .image-viewer:not(.hidden) { animation: viewer-in .16s ease-out; }
  @keyframes viewer-in { from { opacity: 0; } }
}

/* ---------- generic bits ---------- */
.mono { font-family: var(--f-mono); }
.display { font-family: var(--f-display); }
.hidden { display: none !important; }

.btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--mid);
  font-weight: 600; font-size: 14px; padding: 13px 16px; border-radius: 12px;
  cursor: pointer; text-align: center; transition: filter .12s, border-color .12s;
}
.btn:hover { border-color: oklch(0.72 0.06 65); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-press); }
.btn.danger { color: var(--bad-ink); }
.btn.small { padding: 8px 14px; font-size: 12.5px; border-radius: 10px; }
.btn.dark { background: var(--brown); border-color: var(--brown); color: oklch(0.96 0.015 85); }
.btn.dashed { border: 1.5px dashed oklch(0.78 0.04 70); background: var(--app); font-size: 13px; padding: 11px 14px; }

.chip-badge {
  font-family: var(--f-mono); font-size: 10px; padding: 3px 8px; border-radius: 6px;
  display: inline-block; white-space: nowrap;
}
.chip-badge.high   { background: var(--good-chip-bg); color: var(--good-chip-ink); }
.chip-badge.medium { background: var(--warn-bg); color: var(--warn-ink); }
.chip-badge.low    { background: var(--bad-chip-bg); color: var(--bad-ink); }
.chip-badge.plain  { background: var(--app); border: 1px solid var(--line-soft); color: var(--mid); }

.kicker {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em;
  color: var(--muted); text-transform: uppercase;
}

.attr-chip {
  background: var(--app); border: 1px solid var(--line-soft);
  font-family: var(--f-mono); font-size: 10px; color: var(--mid);
  padding: 4px 8px; border-radius: 7px;
}

/* svg icon helpers */
button svg { pointer-events: none; }
.inline-ic { vertical-align: -2.5px; margin-right: 4px; display: inline-block; }
.icon-btn svg, .insp-close svg, .arrow-pad svg, .nudge svg, .insp-zoom svg { display: block; }
.cam-controls button svg { display: block; }
.cam-stop { display: inline-flex; align-items: center; gap: 5px; }
.vhead .back { display: flex; align-items: center; }
.h-del svg { display: block; }
#tabbar .ico svg { display: block; margin: 0 auto; }
.d-ico { display: flex; }

/* loading spinner */
.spin {
  width: 18px; height: 18px; border-radius: 99px; border: 2.5px solid var(--line);
  border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-strip { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--muted); line-height: 1.4; }

/* skeleton shimmer */
.skel {
  border-radius: 8px;
  background: linear-gradient(100deg, oklch(0.9 0.02 80) 40%, oklch(0.94 0.015 82) 50%, oklch(0.9 0.02 80) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- top nav (desktop) ---------- */
#topnav {
  display: none; align-items: center; gap: 26px;
  padding: 12px 26px; border-bottom: 1px solid oklch(0.87 0.025 78);
  background: rgba(255, 255, 255, .94); position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(18px) saturate(0.85);
  -webkit-backdrop-filter: blur(18px) saturate(0.85);
}
#topnav .wordmark { font-family: var(--f-display); font-size: 17px; color: var(--ink); cursor: pointer; }
#topnav nav { display: flex; gap: 4px; font-size: 13.5px; }
#topnav nav button {
  padding: 7px 14px; border-radius: 10px; border: 0; background: transparent;
  color: var(--muted); cursor: pointer; font-size: 13.5px;
}
#topnav nav button.active { background: oklch(0.62 0.1 65 / 0.16); color: oklch(0.48 0.09 60); font-weight: 600; }
#topnav .nav-search {
  margin-left: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: 11px; padding: 8px 14px; display: flex; align-items: center; gap: 9px;
  width: 260px; color: var(--faint); font-size: 13px; cursor: text;
}

/* ---------- app frame ---------- */
#app { max-width: 520px; margin: 0 auto; min-height: 100dvh; background: var(--app); position: relative; }
.view { display: none; flex-direction: column; min-height: 100dvh; padding-bottom: var(--tabbar-h); }
.view.active { display: flex; }

/* ---------- bottom tab bar ---------- */
#tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 520px; display: flex; z-index: 40;
  border-top: 1px solid var(--line-soft); background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(18px) saturate(0.85);
  -webkit-backdrop-filter: blur(18px) saturate(0.85);
  padding-bottom: env(safe-area-inset-bottom);
}
#tabbar button {
  flex: 1; padding: 10px 0 12px; text-align: center; border: 0; background: none;
  color: var(--faint); cursor: pointer;
}
#tabbar button .ico { font-size: 17px; line-height: 1; }
#tabbar button .lbl { font-family: var(--f-mono); font-size: 10px; margin-top: 2px; letter-spacing: .04em; }
#tabbar button.active { color: var(--link); }

/* ---------- view headers ---------- */
.vhead { display: flex; align-items: center; gap: 12px; padding: 16px 20px 10px; }
.vhead .title { font-family: var(--f-display); font-size: 19px; color: var(--ink); flex: 1; }
.vhead .back {
  border: 0; background: none; color: var(--mid); font-size: 20px; cursor: pointer;
  padding: 2px 6px 2px 0; line-height: 1;
}
.vhead .tag-note { font-family: var(--f-mono); font-size: 10.5px; color: var(--faint); }
.icon-btn {
  width: 34px; height: 34px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--line); display: grid; place-items: center;
  color: var(--muted); font-size: 15px; cursor: pointer;
}
.live-pill {
  font-family: var(--f-mono); font-size: 10.5px; padding: 5px 10px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--line); color: var(--faint); cursor: pointer;
}
.live-pill.on { background: var(--live-bg); color: var(--live-ink); border-color: transparent; }
.live-pill.tap { background: var(--warn-bg); color: var(--warn-ink); border-color: transparent; }
.live-pill.paused { background: var(--warn-bg); color: var(--warn-ink); border-color: transparent; }
.live-pill:focus-visible { outline: 3px solid oklch(0.72 0.08 68 / 0.3); outline-offset: 2px; }

/* ---------- landing ---------- */
#view-landing { padding-bottom: env(safe-area-inset-bottom); }
#view-landing .hero { padding: 28px 24px 8px; display: flex; flex-direction: column; gap: 6px; }
#view-landing .hero h1 { font-family: var(--f-display); font-size: 26px; color: var(--ink); margin: 0; line-height: 1.1; }
#view-landing .hero p { font-size: 14.5px; color: var(--muted); margin: 0; }
.tool-cards { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 6px; }
.tool-card {
  border: 0; text-align: left; border-radius: 20px; padding: 22px 20px;
  display: flex; align-items: center; gap: 16px; cursor: pointer; font-family: inherit;
}
.tool-card .t-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; flex: none; }
.tool-card .t-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.tool-card .t-title { font-family: var(--f-display); font-size: 19px; }
.tool-card .t-sub { font-size: 12.5px; line-height: 1.4; }
.tool-card .t-arrow { font-size: 20px; }
.tool-card.scan { background: var(--accent); }
.tool-card.scan:hover { background: var(--accent-press); }
.tool-card.scan .t-ico { background: oklch(0.97 0.015 85 / 0.25); color: var(--on-accent); }
.tool-card.scan .t-title, .tool-card.scan .t-arrow { color: var(--on-accent); }
.tool-card.scan .t-sub { color: oklch(0.97 0.015 85 / 0.85); }
.tool-card.center { background: var(--surface); border: 1px solid var(--line); }
.tool-card.center:hover { border-color: oklch(0.72 0.06 65); }
.tool-card.center .t-ico { background: var(--app); color: oklch(0.5 0.06 40); }
.tool-card.center .t-title { color: var(--ink); }
.tool-card.center .t-sub, .tool-card.center .t-arrow { color: var(--muted); }
.desktop-home-tool { display: flex; }
.tool-card.search { background: var(--surface); border: 1px solid var(--line); }
.tool-card.search:hover { border-color: oklch(0.72 0.06 65); }
.tool-card.search .t-ico { background: var(--app); color: var(--link); }
.tool-card.search .t-title { color: var(--ink); }
.tool-card.search .t-sub, .tool-card.search .t-arrow { color: var(--muted); }
.recent-strip { padding: 0 20px 8px; display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.recent-strip .row-head { display: flex; align-items: center; justify-content: space-between; }
.recent-strip .see-all { font-size: 12.5px; font-weight: 600; color: var(--link); cursor: pointer; border: 0; background: none; }
.recent-cards { display: flex; gap: 10px; }
.recent-card {
  flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px;
  cursor: pointer; text-align: left; font-family: inherit;
}
.recent-card img, .recent-card .ph { height: 64px; border-radius: 8px; object-fit: cover; width: 100%; background: var(--app); }
.recent-card .nm { font-size: 11.5px; font-weight: 600; color: oklch(0.35 0.04 55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.recent-card .pr { font-family: var(--f-mono); font-size: 10px; color: var(--link); }
.recent-card .vbadge { background: var(--good-chip-bg); color: var(--good-chip-ink); font-family: var(--f-mono); font-size: 8.5px; padding: 2px 5px; border-radius: 5px; flex: none; }
@media (max-width: 979px) {
  .recent-card:nth-child(n + 4) { display: none; }
}

/* ---------- game chips ---------- */
.game-chips { display: flex; gap: 8px; padding: 0 20px 12px; overflow-x: auto; scrollbar-width: none; }
.game-chips::-webkit-scrollbar { display: none; }
.game-chips button {
  background: var(--surface); color: var(--mid); font-size: 12px; padding: 6px 13px;
  border-radius: 99px; border: 1px solid var(--line); cursor: pointer; white-space: nowrap;
}
.game-chips button.active { background: var(--brown); color: oklch(0.96 0.015 85); font-weight: 600; border-color: var(--brown); }

/* in-page segmented tabs (e.g. centering Measure / Saved) */
.seg-tabs { display: flex; gap: 8px; padding: 0 20px 12px; }
.seg-tabs button {
  flex: 1; background: var(--surface); color: var(--mid); font-size: 13px; padding: 9px 13px;
  border-radius: 12px; border: 1px solid var(--line); cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.seg-tabs button.active { background: var(--brown); color: oklch(0.96 0.015 85); font-weight: 600; border-color: var(--brown); }
.seg-count { font-family: var(--f-mono); font-size: 10px; opacity: .8; }

/* ---------- camera stage ---------- */
.cam-stage {
  flex: 1; margin: 0 14px; border-radius: 20px; position: relative;
  background: var(--cam); overflow: hidden; min-height: 320px;
}
.cam-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-crop {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -52%);
  height: 62%; aspect-ratio: 0.716; pointer-events: none; display: none;
  border: 2px dashed oklch(0.95 0.015 82 / 0.55); border-radius: 12px;
}
.cam-status {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: var(--cam-pill); color: oklch(0.9 0.02 80);
  font-family: var(--f-mono); font-size: 11px; padding: 5px 13px; border-radius: 99px;
  white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis;
}
.cam-status.locked { background: var(--cut); color: oklch(0.25 0.04 60); font-weight: 700; }
.cam-status.coach { background: var(--warn-bg); color: oklch(0.4 0.07 70); font-weight: 700; }
.cam-controls {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 12px; align-items: center;
}
.cam-controls button { border: 0; border-radius: 99px; cursor: pointer; display: grid; place-items: center; }
.cam-controls .side { width: 46px; height: 46px; background: oklch(0.95 0.015 82 / 0.92); color: oklch(0.4 0.04 55); font-size: 16px; }
.cam-controls .shutter { width: 56px; height: 56px; background: var(--accent); color: var(--on-accent); font-size: 20px; }
.cam-controls .shutter.big { width: 64px; height: 64px; border: 4px solid oklch(0.95 0.015 82 / 0.85); font-size: 22px; }
.cam-hintline {
  position: absolute; bottom: 76px; left: 50%; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: 9.5px; color: oklch(0.75 0.02 75); white-space: nowrap;
}
.cam-stop {
  position: absolute; top: 14px; right: 14px; background: oklch(0.2 0.02 60 / 0.7);
  color: var(--cam-text); font-family: var(--f-mono); font-size: 10px;
  padding: 5px 10px; border-radius: 8px; border: 0; cursor: pointer;
}
.cam-tap-capture {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 9px; padding: 7px 14px 7px 8px;
  border: 1px solid oklch(0.98 0.01 85 / 0.5); border-radius: 99px;
  background: oklch(0.18 0.025 55 / 0.78); color: var(--cam-text);
  box-shadow: 0 5px 18px oklch(0.1 0.02 55 / 0.3); backdrop-filter: blur(8px);
  font: 600 12px var(--f-body); cursor: pointer;
}
.cam-tap-ring {
  width: 34px; height: 34px; border: 2px solid oklch(0.98 0.01 85 / 0.9);
  border-radius: 50%; display: grid; place-items: center;
}
.cam-tap-ring span { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); }
.cam-tap-capture:active .cam-tap-ring span { transform: scale(.86); }
.cam-tap-capture:disabled { opacity: .55; cursor: wait; }
.cam-tap-capture:focus-visible { outline: 3px solid oklch(0.95 0.04 85 / 0.55); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .cam-tap-ring span { transition: transform .12s ease; }
}
.cam-off {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px;
  align-items: center; justify-content: center; padding: 24px; text-align: center;
}
.cam-off .msg { color: oklch(0.7 0.02 72); font-size: 13px; line-height: 1.5; }
.level-wrap {
  position: absolute; top: 44px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; align-items: center;
}
.level-bar { width: 90px; height: 6px; border-radius: 99px; background: oklch(0.2 0.02 60 / 0.6); position: relative; }
.level-dot { position: absolute; top: -3px; width: 12px; height: 12px; border-radius: 99px; background: oklch(0.85 0.08 90); transition: left .1s linear; }
.level-dot.good { background: oklch(0.75 0.1 130); }
.level-tick { position: absolute; left: 50%; top: -1px; transform: translateX(-50%); width: 2px; height: 8px; background: oklch(0.9 0.02 80 / 0.7); }
.level-lbl { font-family: var(--f-mono); font-size: 9px; color: oklch(0.8 0.03 80); }

/* ---------- scanner compact result ---------- */
.compact-result {
  margin: 12px 14px; background: var(--surface-hi); border: 1.5px solid oklch(0.75 0.08 68);
  border-radius: 18px; padding: 14px; display: flex; gap: 14px; align-items: center;
  box-shadow: 0 4px 14px oklch(0.4 0.03 60 / 0.1); cursor: pointer; text-align: left;
  font-family: inherit; width: calc(100% - 28px);
}
.compact-result img { width: 56px; height: 78px; border-radius: 8px; object-fit: cover; background: var(--app); flex: none; }
.compact-result .c-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.compact-result .c-name { display: flex; gap: 8px; align-items: center; min-width: 0; }
.compact-result .c-name .nm { font-weight: 600; font-size: 15.5px; color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compact-result .c-set { font-size: 12.5px; color: oklch(0.52 0.035 58); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compact-result .c-price { font-family: var(--f-mono); font-size: 14px; color: var(--price); font-weight: 700; }
.compact-result .c-go { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--faint); flex: none; }
.compact-result .c-go .a { font-size: 18px; }
.compact-result .c-go .t { font-family: var(--f-mono); font-size: 8.5px; }
/* quick price strip — one number per source, under the compact result */
.quick-price-strip {
  width: calc(100% - 28px); margin: -6px 14px 12px; padding: 8px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 10px;
}
.quick-price-strip[hidden] { display: none; }
.qp-item { display: inline-flex; align-items: center; gap: 6px; }
.qp-item b { font-family: var(--f-mono); font-size: 13px; font-weight: 700; color: var(--ink-strong); }
.qp-item.tcgplayer { color: oklch(0.5 0.11 250); }
.qp-item.pricecharting { color: oklch(0.47 0.1 150); }
.qp-item.alt { color: oklch(0.4 0.02 60); }
.qp-ico { flex: none; }
.qp-ico text { font-family: var(--f-display); font-weight: 700; letter-spacing: 0.02em; }
.qp-grade {
  font-family: var(--f-mono); font-size: 9px; font-weight: 700; line-height: 1;
  padding: 3px 4px; border-radius: 4px; white-space: nowrap;
  border: 1px solid currentColor; opacity: 0.85;
}
.qp-sep { color: var(--ghost); font-size: 12px; }

.compact-queue-action {
  width: calc(100% - 28px); min-height: 44px; margin: -6px 14px 12px;
  border: 1px solid oklch(0.72 0.09 75); border-radius: 12px;
  background: var(--warn-bg); color: var(--warn-ink);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font: 700 12.5px var(--f-body); cursor: pointer;
}
.compact-queue-action[hidden] { display: none; }
.compact-queue-action:hover { border-color: var(--accent); background: var(--warn-card-bg); }
.compact-queue-action:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* live scan queue */
.scan-queue {
  margin: 0 14px 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 10px 12px;
}
.sq-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sq-total { font-size: 12px; font-weight: 700; color: var(--price); }
.sq-act { border: 0; background: none; font-size: 12px; font-weight: 600; color: var(--link); cursor: pointer; padding: 2px 4px; }
.sq-act.danger { color: var(--bad-ink); }
.sq-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; scroll-behavior: smooth; }
.sq-strip::-webkit-scrollbar { display: none; }
.sq-item {
  position: relative; flex: none; width: 88px; background: var(--app);
  border: 1px solid var(--line-soft); border-radius: 10px; padding: 6px;
  display: flex; flex-direction: column; gap: 3px; cursor: pointer;
}
.sq-item img { width: 100%; height: 76px; object-fit: contain; background: var(--surface); border-radius: 6px; }
.sq-nm { font-size: 10px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-pr { font-size: 9.5px; color: var(--price); font-weight: 700; min-height: 12px; }
.card-grade {
  min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px;
  padding: 2px 3px 2px 5px; border: 1px solid var(--line-soft); border-radius: 6px;
  background: var(--surface-hi); color: var(--faint);
}
.card-grade > span {
  font: 700 7.5px var(--f-mono); text-transform: uppercase; letter-spacing: .05em;
}
.card-grade select {
  width: 100%; min-width: 0; height: 20px; border: 0; border-left: 1px solid var(--hairline);
  padding: 0 2px 0 5px; background: transparent; color: var(--ink); font: 700 8.5px var(--f-mono);
  cursor: pointer;
}
.card-grade select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }
@media (max-width: 979px) {
  .card-grade { grid-template-columns: minmax(0, 1fr); gap: 0; padding-inline: 3px; }
  .card-grade > span { display: none; }
  .card-grade select { border-left: 0; padding-left: 4px; font-size: 10px; }
}
.sq-count {
  position: absolute; top: 4px; left: 4px; z-index: 2; background: var(--brown);
  color: oklch(0.96 0.015 85); font-family: var(--f-mono); font-size: 9px;
  padding: 2px 5px; border-radius: 6px;
}
.sq-x {
  position: absolute; top: 4px; right: 4px; z-index: 2; width: 18px; height: 18px;
  border-radius: 6px; border: 1px solid var(--line); background: oklch(0.965 0.012 85 / 0.95);
  color: var(--muted); display: grid; place-items: center; padding: 0; line-height: 0;
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.sq-x svg { display: block; }
.sq-x:hover { color: var(--bad-ink); border-color: var(--bad-line); }
.sq-plus {
  border: 1px dashed var(--line); background: var(--surface); border-radius: 7px;
  color: var(--link); font-family: var(--f-mono); font-size: 9.5px; font-weight: 700;
  padding: 3px 0; display: flex; align-items: center; justify-content: center; gap: 1px; cursor: pointer;
}
.sq-plus:hover { border-color: var(--accent); }

/* inline card lookup — a compact tray over the camera, not a route away */
.scan-search { position: relative; z-index: 12; margin: 0 14px 12px; }
.scan-search-box {
  min-height: 44px; background: var(--surface-hi); border: 1.5px solid oklch(0.72 0.06 65);
  border-radius: 14px; padding: 0 8px 0 14px; display: flex; align-items: center; gap: 9px;
  box-shadow: 0 2px 8px oklch(0.4 0.03 60 / 0.05);
}
.scan-search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px oklch(0.72 0.08 68 / 0.14); }
.scan-search-icon { color: var(--muted); display: flex; flex: none; }
.scan-search-box input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--ink); font: 14px var(--f-body); padding: 11px 0;
}
.scan-search-box input::placeholder { color: var(--faint); }
.scan-search-clear {
  width: 30px; height: 30px; flex: none; border: 0; border-radius: 9px;
  display: grid; place-items: center; background: transparent; color: var(--muted); cursor: pointer;
}
.scan-search-clear:hover { background: var(--app); color: var(--ink); }
.scan-search-clear[hidden] { display: none; }
.scan-search-menu {
  position: absolute; top: calc(100% + 7px); left: 0; right: 0; max-height: min(370px, 55dvh);
  overflow-y: auto; background: var(--bar); border: 1px solid var(--line); border-radius: 15px;
  box-shadow: 0 14px 34px oklch(0.3 0.03 55 / 0.22); padding: 5px;
}
.scan-search-status { padding: 14px 12px; color: var(--faint); font: 11px var(--f-mono); }
.scan-search-row {
  display: flex; align-items: stretch; border-bottom: 1px solid var(--hairline-2);
}
.scan-search-row:last-child { border-bottom: 0; }
.scan-search-hit {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 8px;
  display: flex; gap: 10px; align-items: center; text-align: left; cursor: pointer; font-family: inherit;
}
.scan-search-hit:hover, .scan-search-hit:focus-visible { background: var(--surface); outline: 0; }
.scan-search-hit img { width: 38px; height: 53px; border-radius: 6px; object-fit: contain; background: var(--app); flex: none; }
.scan-search-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.scan-search-name { color: var(--ink); font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scan-search-code { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scan-search-add {
  width: 46px; flex: none; align-self: center; height: 40px; margin-right: 3px; border: 1px solid var(--line);
  border-radius: 11px; background: var(--surface); color: var(--link); display: grid; place-items: center; cursor: pointer;
}
.scan-search-add:hover, .scan-search-add:focus-visible { border-color: var(--accent); background: var(--surface-hi); outline: 0; }
.scan-search-add.added { animation: scan-add-pulse .24s ease-out; }
@keyframes scan-add-pulse { 50% { transform: scale(.88); background: var(--good-chip-bg); color: var(--good-chip-ink); } }
@media (prefers-reduced-motion: reduce) { .scan-search-add.added { animation: none; } }

/* edge-state cards */
.state-card {
  margin: 12px 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px;
}
.state-card .s-head { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.state-card .s-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; flex: none; }
.state-card .s-ico.bad { background: var(--bad-chip-bg); color: var(--bad-ink); }
.state-card .s-ico.warn { background: var(--warn-bg); color: var(--warn-ink); }
.state-card .s-body { font-size: 13px; color: var(--muted); line-height: 1.5; }
.state-card .s-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.state-card .s-link { font-size: 13px; font-weight: 600; color: var(--link); cursor: pointer; border: 0; background: none; text-align: left; padding: 0; }

/* dropzone (desktop) */
.upload-row { display: flex; gap: 10px; margin: 12px 14px; align-items: stretch; }
.dropzone {
  flex: 1; min-width: 0; border: 1.5px dashed oklch(0.75 0.06 65); border-radius: 14px;
  padding: 13px 16px; display: flex; align-items: center; gap: 14px; background: var(--bar); cursor: pointer;
}
.batch-btn {
  flex: none; width: 96px; border: 1.5px dashed oklch(0.75 0.06 65); border-radius: 14px;
  background: var(--bar); color: oklch(0.45 0.05 55); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 8px 6px; font-family: inherit;
}
.batch-btn:hover { border-color: var(--accent); }
.batch-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.batch-btn .b-title { font-size: 13px; font-weight: 600; color: oklch(0.35 0.04 55); }
.batch-btn .b-sub { font-family: var(--f-mono); font-size: 9px; color: var(--faint); }
.dropzone.drag { border-color: var(--accent); background: var(--surface-hi); }
.dropzone .d-ico { font-size: 18px; color: oklch(0.55 0.08 60); }
.dropzone .d-title { font-size: 13.5px; font-weight: 600; color: oklch(0.35 0.04 55); }
.dropzone .d-sub { font-size: 12px; color: var(--faint); }

/* ---------- bottom sheet ---------- */
#sheet-backdrop {
  position: fixed; inset: 0; background: oklch(0.2 0.02 55 / 0.35); z-index: 60;
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
#sheet-backdrop.open { opacity: 1; pointer-events: auto; }
#sheet[hidden], #sheet-backdrop[hidden] { display: none; }
#sheet {
  position: fixed; left: 50%; transform: translate(-50%, 105%); bottom: 0; width: 100%; max-width: 520px;
  background: var(--bar); border-radius: 24px 24px 0 0; padding: 14px 20px calc(26px + env(safe-area-inset-bottom));
  max-height: min(88dvh, 820px); overflow-y: auto; overscroll-behavior: contain;
  z-index: 61; transition: transform .22s cubic-bezier(.3,.9,.4,1); box-shadow: 0 -8px 30px oklch(0.3 0.03 55 / 0.25);
}
#sheet.open { transform: translate(-50%, 0); }
#sheet .grabber { width: 40px; height: 4px; border-radius: 99px; background: oklch(0.8 0.03 75); margin: 0 auto 10px; }
#sheet h3 { font-family: var(--f-display); font-size: 17px; color: var(--ink); margin: 0; padding-bottom: 8px; font-weight: 500; }
.option-profile {
  --profile-color: var(--accent);
  margin-top: 8px; padding: 0 12px; border: 1px solid oklch(0.86 0.025 75);
  border-radius: 16px; background: oklch(0.965 0.012 82);
}
.option-profile + .option-profile { margin-top: 14px; }
.option-profile-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0 7px; border-bottom: 1px solid oklch(0.88 0.02 78);
  color: var(--ink); font-size: 13px; font-weight: 700;
}
.option-profile-head > div { display: flex; align-items: center; gap: 7px; }
.option-profile-head > span { color: var(--faint); font-family: var(--f-mono); font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.profile-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--profile-color); box-shadow: 0 0 0 3px color-mix(in oklch, var(--profile-color) 16%, transparent); }
.upload-profile { --profile-color: oklch(0.58 0.11 245); }
.sheet-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid oklch(0.88 0.02 78); cursor: pointer;
  background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; font-family: inherit;
}
.sheet-row:last-child { border-bottom: 0; }
.sheet-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.sheet-row .r-title { font-size: 14.5px; font-weight: 600; color: oklch(0.35 0.04 55); }
.sheet-row .r-sub { font-size: 12px; color: var(--faint); font-weight: 400; }
.sheet-row .r-arrow { color: var(--faint); }
.sheet-row.danger .r-title, .sheet-row.danger .r-arrow { color: var(--bad-ink); }
.interval-input {
  width: 84px; flex: none; border: 1px solid oklch(0.78 0.035 72); border-radius: 9px;
  background: var(--surface); color: var(--ink); padding: 7px 8px; font: 600 13px var(--f-mono);
  text-align: right;
}
.interval-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.percent-input-wrap { display: flex; align-items: center; gap: 5px; flex: none; color: var(--faint); font: 600 13px var(--f-mono); }
.percent-input-wrap .interval-input { width: 68px; }
.toggle { width: 46px; height: 27px; border-radius: 99px; background: oklch(0.82 0.03 75); position: relative; flex: none; transition: background .15s; }
.toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px;
  border-radius: 99px; background: oklch(0.97 0.015 85); transition: left .15s;
}
.toggle.on { background: var(--accent); }
.toggle.on::after { left: 22px; }

/* ---------- search view ---------- */
#view-search .search-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px 12px; }
#view-search .search-box {
  flex: 1; min-width: 0; background: var(--surface-hi); border: 1.5px solid oklch(0.72 0.06 65);
  border-radius: 14px; padding: 10px 16px; display: flex; align-items: center; gap: 10px;
}
#view-search .search-box input {
  flex: 1; border: 0; background: none; outline: none; font-size: 15px; color: var(--ink);
  font-family: inherit; min-width: 0;
}
#view-search .search-meta { padding: 0 20px 10px; font-family: var(--f-mono); font-size: 10.5px; color: var(--faint); min-height: 26px; }
.search-results { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.result-row {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 14px; display: flex; gap: 12px; align-items: center; cursor: pointer;
  font-family: inherit; text-align: left; width: 100%;
}
.result-row img { width: 42px; height: 59px; border-radius: 6px; object-fit: cover; background: var(--app); flex: none; }
.result-row .r-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.result-row .r-name { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-row .r-sub { font-size: 12px; color: oklch(0.52 0.035 58); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-row .r-arrow { color: var(--faint); flex: none; }
.search-footnote { margin: 14px 20px; text-align: center; font-size: 12px; color: var(--faint); }

/* ---------- detail view ---------- */
.detail-hero { display: flex; gap: 16px; padding: 10px 20px; }
.detail-hero img.ref { width: 150px; height: 210px; border-radius: 12px; object-fit: contain; background: var(--app); flex: none; border: 1px solid var(--line-soft); }
.detail-hero .h-body { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.detail-hero .h-name { font-family: var(--f-display); font-size: 21px; color: var(--ink-strong); line-height: 1.15; overflow-wrap: anywhere; }
.detail-hero .h-set { font-size: 13px; color: var(--muted); }
.detail-hero .h-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.ability-box {
  margin: 6px 20px 0; background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.ability-box .ab { font-size: 13.5px; color: oklch(0.38 0.04 55); line-height: 1.55; white-space: pre-wrap; }
.ability-box .tr { font-size: 13px; color: oklch(0.5 0.06 40); line-height: 1.5; border-top: 1px solid oklch(0.89 0.02 78); padding-top: 8px; white-space: pre-wrap; }

.detail-section { margin: 18px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.detail-section:last-child { padding-bottom: 22px; }

/* marketplace handoff — HTTPS links let iOS open an installed app or fall back to web */
.marketplace-links {
  padding: 11px 12px 12px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface-hi); display: flex; flex-direction: column; gap: 8px;
}
.marketplace-links-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.marketplace-links-head span { color: var(--ink); font-size: 12.5px; font-weight: 600; }
.marketplace-links-head small { color: var(--faint); font: 8.5px var(--f-mono); text-align: right; }
.marketplace-link-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.marketplace-link-grid a {
  min-width: 0; min-height: 44px; padding: 7px 5px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--surface); color: var(--link); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  font: 600 10.5px var(--f-body); text-align: center;
}
.marketplace-link-grid a:hover { border-color: var(--accent); background: var(--app); color: var(--link-press); }
.marketplace-link-grid a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.marketplace-link-grid svg { flex: none; }
@media (max-width: 370px) {
  .marketplace-link-grid a { font-size: 9.5px; }
  .marketplace-links-head small { display: none; }
}

/* warn / disambiguation modules */
.module { border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.module.warn { background: var(--warn-card-bg); border: 1.5px solid var(--warn-card-line); }
.module.plain { background: var(--surface); border: 1px solid var(--line); }
.module.alert { background: var(--bad-soft); border: 1.5px solid oklch(0.78 0.07 25); }
.module .m-head { display: flex; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.module.warn .m-head { color: oklch(0.38 0.05 65); }
.module .m-body { font-size: 12.5px; color: oklch(0.48 0.04 60); line-height: 1.45; }
.print-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.print-chips button {
  background: var(--surface); border: 1px solid var(--line); color: var(--mid);
  font-family: var(--f-mono); font-size: 11px; padding: 7px 12px; border-radius: 9px; cursor: pointer;
}
.print-chips button.active { background: var(--brown); border-color: var(--brown); color: oklch(0.96 0.015 85); font-weight: 700; }

/* price variants */
.variant-cards { display: flex; gap: 8px; flex-wrap: wrap; }
.variant-card {
  flex: 1 1 140px; min-width: 130px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; cursor: pointer; text-align: left; font-family: inherit;
}
.variant-card.picked { background: var(--surface-hi); border: 1.5px solid oklch(0.7 0.08 65); }
.variant-card .v-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.variant-card .v-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.variant-card .v-auto { font-family: var(--f-mono); font-size: 9px; color: var(--link); font-weight: 700; }
.variant-card .v-row { font-family: var(--f-mono); font-size: 11px; color: var(--muted); margin-top: 4px; display: flex; justify-content: space-between; }
.variant-card .v-row b { color: oklch(0.35 0.04 55); }

.sales-table { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; }
.sales-table .st-head { font-family: var(--f-mono); font-size: 10px; color: var(--faint); padding: 9px 14px 5px; letter-spacing: .08em; }
.sales-table .st-row {
  display: flex; justify-content: space-between; gap: 8px; padding: 7px 14px;
  font-family: var(--f-mono); font-size: 11px; color: var(--mid); border-top: 1px solid var(--hairline);
}
.sales-table .st-row b { color: oklch(0.35 0.04 55); }
.sales-table .st-more {
  text-align: center; padding: 8px; font-size: 12px; font-weight: 600; color: var(--link);
  border-top: 1px solid var(--hairline); cursor: pointer; background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; font-family: inherit;
}
.sales-filters { padding: 6px 12px 9px; display: flex; flex-direction: column; gap: 6px; }
.sales-filter-row { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.sales-filter-row > span { min-width: 58px; font: 9px var(--f-mono); color: var(--faint); text-transform: uppercase; }
.sales-filter {
  border: 1px solid var(--line); background: var(--app); color: var(--mid); border-radius: 7px;
  padding: 4px 7px; cursor: pointer; font: 9.5px var(--f-mono);
}
.sales-filter.active { background: var(--brown); border-color: var(--brown); color: oklch(0.96 0.015 85); }

/* eBay module */
.ebay-cta {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.ebay-cta .e-title { font-size: 13.5px; font-weight: 600; color: oklch(0.35 0.04 55); }
.ebay-cta .e-sub { font-size: 11.5px; color: var(--faint); }
.ebay-refresh {
  border: 1px solid var(--line); background: var(--surface); color: var(--mid);
  border-radius: 8px; padding: 5px 8px; cursor: pointer; font: 600 10px var(--f-mono);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.ebay-refresh:hover { background: var(--surface-hi); color: var(--ink); }
.comps-status {
  width: 20px; height: 20px; flex: none; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center;
}
.comps-status-loading .spin { width: 14px; height: 14px; border-width: 2px; }
.comps-status-stale {
  background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-ink);
  font: 700 12px var(--f-mono); cursor: help;
}
.trend-box { border: 1px solid var(--line-soft); background: var(--surface-hi); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.trend-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.trend-value { text-align: right; flex: none; display: flex; flex-direction: column; }
.trend-value span { font: 9px var(--f-mono); color: var(--faint); text-transform: uppercase; }
.trend-value b { font: 700 18px var(--f-display); color: var(--ink); }
.trend-grade { display: flex; align-items: center; gap: 8px; }
.trend-grade > span { font: 700 9px var(--f-mono); color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.trend-grade select {
  min-width: 112px; padding: 6px 28px 6px 9px; border: 1px solid var(--line-soft); border-radius: 7px;
  background: var(--surface); color: var(--ink); font: 600 11px var(--f-mono); text-transform: uppercase; cursor: pointer;
}
.trend-grade select:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.trend-controls { display: flex; flex-direction: column; gap: 8px; }
.trend-presets > span, .trend-percent-input > span:first-child {
  display: block; margin-bottom: 4px; color: var(--faint); font: 700 8px var(--f-mono);
  text-align: center; text-transform: uppercase; letter-spacing: .08em;
}
.trend-presets > div { display: grid; grid-template-columns: repeat(7, minmax(36px, 1fr)); gap: 5px; }
.trend-presets button, .trend-step button {
  border: 1px solid var(--line); background: var(--surface); color: var(--mid);
  border-radius: 7px; padding: 6px 4px; cursor: pointer; font: 600 9.5px var(--f-mono);
}
.trend-presets button:hover, .trend-step button:hover { border-color: var(--brown); color: var(--ink); }
.trend-presets button:focus-visible, .trend-step button:focus-visible, .trend-percent-input input:focus-visible {
  outline: 2px solid var(--link); outline-offset: 2px;
}
.trend-presets button.active { background: var(--brown); border-color: var(--brown); color: oklch(0.96 0.015 85); }
.trend-adjuster { display: grid; grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr); gap: 8px; align-items: end; }
.trend-step { display: grid; grid-template-columns: repeat(3, minmax(32px, 1fr)); gap: 5px; padding-bottom: 1px; }
.trend-step-down button { color: var(--bad-ink); }
.trend-step-up button { color: var(--good-ink); }
.trend-percent-input { min-width: 0; }
.trend-percent-input > span:last-child {
  display: flex; align-items: center; height: 34px; border: 1px solid var(--brown); border-radius: 8px;
  background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--brown) 8%, transparent);
}
.trend-percent-input input {
  width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink);
  padding: 6px 2px 6px 10px; text-align: right; font: 700 15px var(--f-mono); appearance: textfield;
}
.trend-percent-input input::-webkit-inner-spin-button, .trend-percent-input input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.trend-percent-input b { padding: 0 9px 0 4px; color: var(--faint); font: 700 11px var(--f-mono); }
@media (max-width: 460px) {
  .trend-adjuster { grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); gap: 5px; }
  .trend-step { gap: 3px; }
  .trend-step button { padding-inline: 2px; font-size: 8.5px; }
  .trend-presets > div { gap: 3px; }
  .trend-presets button { min-width: 0; padding-inline: 2px; font-size: 8.5px; }
}
.trend-chart { color: var(--price); border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface); padding: 11px 12px 9px; overflow: hidden; }
.trend-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--faint); font: 9px var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
.trend-chart-head > div { display: flex; align-items: baseline; gap: 7px; }
.trend-chart-head b { color: var(--ink); font-size: 11px; }
.trend-chart-head .trend-change { margin-left: auto; justify-content: flex-end; gap: 6px; flex-wrap: wrap; line-height: 1.2; text-align: right; }
.trend-change b { color: var(--mid); }
.trend-change.up b { color: var(--good-ink); }
.trend-change.down b { color: var(--bad-ink); }
.trend-chart svg { display: block; width: 100%; height: auto; max-height: 188px; overflow: visible; touch-action: pan-y; cursor: crosshair; }
.trend-chart svg:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; border-radius: 8px; }
.trend-grid { stroke: var(--line-soft); stroke-width: 1; }
.trend-grid-mid { stroke-dasharray: 2 4; }
.trend-median { stroke: var(--brown); stroke-width: 1.25; stroke-dasharray: 5 4; opacity: .7; }
.trend-range-area { fill: currentColor; fill-opacity: .09; }
.trend-range { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; opacity: .32; }
.trend-line { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.trend-crosshair { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; opacity: .35; pointer-events: none; }
.trend-point { fill: var(--surface); stroke: currentColor; stroke-width: 2; pointer-events: none; }
.trend-point.selected { fill: currentColor; }
.trend-count { fill: var(--faint); font: 8px var(--f-mono); pointer-events: none; }
.trend-active-point { fill: none; stroke: var(--ink); stroke-width: 1.5; pointer-events: none; }
.trend-hit-area { fill: transparent; pointer-events: all; }
.trend-axis { fill: var(--faint); font: 9px var(--f-mono); }
.trend-detail {
  min-height: 39px; margin: 1px 0 7px; padding: 7px 9px; border: 1px solid var(--line-soft); border-radius: 8px;
  background: var(--surface-hi); display: flex; align-items: center; gap: 9px; color: var(--faint); font: 9px var(--f-mono);
}
.trend-detail > div { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; min-width: 0; }
.trend-detail b { color: var(--ink); font-size: 14px; }
.trend-detail-title { flex: 1; min-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mid); }
.trend-detail a { margin-left: auto; color: var(--link); font-weight: 700; white-space: nowrap; }
.trend-legend { display: flex; justify-content: flex-end; gap: 13px; flex-wrap: wrap; color: var(--faint); font: 9px var(--f-mono); }
.trend-legend span { display: inline-flex; align-items: center; gap: 5px; }
.trend-legend i { width: 12px; height: 2px; background: var(--price); border-radius: 2px; }
.trend-legend i.range { height: 7px; background: color-mix(in oklch, var(--price) 14%, transparent); border-left: 1px solid var(--price); border-right: 1px solid var(--price); border-radius: 2px; }
.trend-legend i.median { height: 0; background: none; border-top: 1px dashed var(--brown); }
.ebay-sale { display: flex; flex-direction: column; gap: 5px; padding: 10px 2px; border-bottom: 1px solid var(--hairline-2); }
.ebay-sale .e-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; }
.ebay-sale .e-date { font-family: var(--f-mono); font-size: 10px; color: var(--faint); flex: none; }
.ebay-sale .e-title-link { display: block; width: fit-content; max-width: 100%; font-size: 12px; line-height: 1.35; color: var(--link); overflow-wrap: anywhere; text-decoration: underline; }
.ebay-sale .e-grade { font-family: var(--f-mono); font-size: 10px; color: var(--faint); flex: none; }
.ebay-sale .e-price { font-family: var(--f-mono); font-size: 12px; font-weight: 700; color: var(--ink); flex: none; }
.ebay-sale .e-flags { display: flex; gap: 5px; flex-wrap: wrap; }
.flag-chip { background: var(--warn-bg); color: var(--warn-ink); font-family: var(--f-mono); font-size: 9px; padding: 2px 7px; border-radius: 5px; }
.flag-chip.ok { background: var(--good-chip-bg); color: var(--good-chip-ink); }
.flag-chip.warn { background: var(--warn-bg); color: var(--warn-ink); }
.ebay-cands summary { cursor: pointer; font-family: var(--f-mono); font-size: 10px; color: var(--faint); padding: 7px 2px; user-select: none; }
.ebay-cands[open] summary { color: var(--ink); }
.ebay-cands .ebay-sale { opacity: 0.75; }

/* runner-ups */
.runnerups { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.runnerups::-webkit-scrollbar { display: none; }
.runnerup {
  flex: none; width: 118px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 5px;
  cursor: pointer; font-family: inherit; text-align: left;
}
.runnerup img { height: 76px; border-radius: 6px; object-fit: contain; background: var(--app); width: 100%; }
.runnerup .r-nm { font-size: 11px; font-weight: 600; color: oklch(0.38 0.04 55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runnerup .r-id { font-family: var(--f-mono); font-size: 9px; color: var(--faint); }
.section-note { font-size: 11.5px; color: var(--faint); }

/* multiple cards */
.multi-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.multi-card {
  min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 6px;
  display: flex; flex-direction: column; gap: 4px; cursor: pointer; background: var(--surface); font-family: inherit;
}
.multi-card.active { border: 1.5px solid oklch(0.7 0.08 65); background: var(--surface-hi); }
.multi-card img { height: 64px; border-radius: 5px; object-fit: contain; background: var(--app); }
.multi-card .m-nm { font-family: var(--f-mono); font-size: 9px; color: var(--mid); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- centering verdict ---------- */
.verdict-banner {
  margin: 6px 20px 0; text-align: center; display: flex; flex-direction: column; gap: 5px;
  padding: 18px 0 14px; background: var(--good-bg); border: 1px solid var(--good-line); border-radius: 18px;
}
.verdict-banner .v-kicker { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; color: oklch(0.45 0.07 130); }
.verdict-banner .v-main { font-family: var(--f-display); font-size: 42px; color: var(--good-ink); line-height: 1; }
.verdict-banner .v-sub { font-family: var(--f-display); font-size: 16px; color: var(--good-sub); }
.verdict-banner .v-ratios { font-family: var(--f-mono); font-size: 12px; color: oklch(0.45 0.05 120); }
.verdict-banner.warn { background: var(--warn-card-bg); border-color: var(--warn-card-line); }
.verdict-banner.warn .v-kicker { color: var(--warn-ink); }
.verdict-banner.warn .v-main { color: oklch(0.45 0.08 75); }
.verdict-banner.warn .v-sub, .verdict-banner.warn .v-ratios { color: oklch(0.5 0.06 70); }
.verdict-banner.bad { background: var(--bad-soft); border-color: var(--bad-line); }
.verdict-banner.bad .v-kicker, .verdict-banner.bad .v-main { color: oklch(0.42 0.09 25); }
.verdict-banner.bad .v-sub, .verdict-banner.bad .v-ratios { color: oklch(0.45 0.06 30); }
.verdict-flags { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.centering-precision {
  margin: 10px 20px 0; display: grid; grid-template-columns: 1.1fr 1.8fr 1fr;
  border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; background: var(--surface);
}
.centering-precision > div { min-width: 0; padding: 10px 12px; border-right: 1px solid var(--hairline); display: grid; gap: 2px; }
.centering-precision > div:last-child { border-right: 0; }
.centering-precision span { font: 8.5px var(--f-mono); color: var(--faint); text-transform: uppercase; letter-spacing: .07em; }
.centering-precision strong { font: 600 12px var(--f-mono); color: var(--ink); line-height: 1.35; }
.centering-precision .cp-worst strong { color: var(--warn-ink); font-size: 14px; }
.centering-precision small { font-size: 10px; color: var(--muted); }
.centering-precision.compact { margin: 0; grid-template-columns: 1fr; border-radius: 10px; }
.centering-precision.compact > div { padding: 7px 9px; border-right: 0; border-bottom: 1px solid var(--hairline); }
.centering-precision.compact > div:last-child { border-bottom: 0; }
.centering-precision.compact strong { font-size: 10.5px; }
.centering-precision.compact .cp-worst { grid-template-columns: 1fr auto; align-items: center; }
.centering-precision.compact .cp-worst span { grid-column: 1; }
.centering-precision.compact .cp-worst strong { grid-column: 2; grid-row: 1; font-size: 12px; }
.centering-precision.compact .cp-worst small { grid-column: 1 / -1; }

.card-viz {
  margin: 14px 20px 0; position: relative; border-radius: 14px; background: var(--cam);
  overflow: hidden; user-select: none; -webkit-user-select: none;
}
.card-viz canvas, .card-viz svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.card-viz .viz-key {
  position: absolute; bottom: 8px; right: 10px; font-family: var(--f-mono); font-size: 9px;
  color: oklch(0.75 0.03 75); background: oklch(0.2 0.02 60 / 0.55); padding: 2px 6px; border-radius: 5px;
}

.measure-table { margin: 12px 20px 0; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; }
.measure-table .mt-row {
  display: flex; justify-content: space-between; gap: 10px; padding: 11px 16px;
  border-bottom: 1px solid var(--hairline); align-items: center;
}
.measure-table .mt-row:last-child { border-bottom: 0; }
.measure-table .mt-k { font-size: 13px; color: var(--muted); }
.measure-table .mt-v { font-family: var(--f-mono); font-size: 12.5px; color: oklch(0.35 0.04 55); text-align: right; }
.measure-table .mt-v.good { color: var(--live-ink); }
.measure-table .mt-v.warn { color: var(--warn-ink); }
.measure-table .mt-card-name {
  max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink); font-family: var(--f-body); font-size: 12.5px; font-weight: 600;
}

.verdict-actions { margin: 12px 20px 0; display: flex; gap: 10px; }
.verdict-actions .btn, .verdict-actions2 .btn {
  flex: 1 1 0; min-width: 0; height: 46px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.verdict-actions2 { margin: 10px 20px 20px; display: flex; gap: 10px; }
.verdict-actions2 .btn { font-size: 13px; }

/* front+back combined */
.sides-grid { margin: 12px 20px 0; display: flex; gap: 12px; }
.side-card {
  flex: 1; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.side-card .sc-head { display: flex; justify-content: space-between; align-items: center; }
.side-card .sc-lbl { font-family: var(--f-mono); font-size: 10px; color: var(--muted); }
.side-card .sc-verdict { font-family: var(--f-display); font-size: 14px; color: var(--good-ink); }
.side-card .sc-viz { border-radius: 9px; background: var(--cam); overflow: hidden; }
.side-card .sc-viz canvas { display: block; width: 100%; height: auto; }
.side-card .sc-ratios { font-family: var(--f-mono); font-size: 10.5px; color: var(--mid); text-align: center; }
.side-card .sc-actions { display: flex; gap: 6px; }
.side-card .sc-actions button {
  flex: 1; text-align: center; font-size: 11.5px; font-weight: 600; border: 0;
  background: var(--app); border-radius: 8px; padding: 6px 0; cursor: pointer; font-family: inherit;
}
.side-card .sc-actions .refine { color: var(--link); }
.side-card .sc-actions .retake { color: var(--mid); }

/* ---------- inspector ---------- */
#inspector {
  position: fixed; inset: 0; z-index: 70; background: var(--app);
  display: flex; flex-direction: column; max-width: 520px; margin: 0 auto;
  overscroll-behavior: contain;
}
.insp-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px 10px; }
.insp-head .title { font-family: var(--f-display); font-size: 16px; color: var(--ink); flex: 1; white-space: nowrap; }
.mode-switch {
  display: flex; background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; overflow: hidden; font-family: var(--f-mono); font-size: 9.5px;
}
.mode-switch button { padding: 6px 9px; color: var(--muted); border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 9.5px; }
.mode-switch button.active { background: var(--brown); color: oklch(0.96 0.015 85); }
.insp-close { width: 30px; height: 30px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); font-size: 13px; cursor: pointer; }

.insp-step {
  margin: 0 18px; background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 10px 14px; display: flex; align-items: center; gap: 12px;
}
.insp-step .n { font-family: var(--f-mono); font-size: 11px; font-weight: 700; color: var(--link); flex: none; }
.insp-step .s-name { font-size: 13px; font-weight: 600; color: oklch(0.35 0.04 55); }
.insp-step .s-hint { font-size: 11.5px; color: var(--faint); }

/* overlaid on the stage so showing/hiding never reflows the card image */
.insp-warn {
  position: absolute; left: 10px; right: 10px; bottom: 32px; z-index: 7;
  background: oklch(0.96 0.03 25 / 0.94); border: 1px solid var(--bad-line);
  border-radius: 12px; padding: 8px 13px; font-size: 12px; color: oklch(0.45 0.08 25);
  font-weight: 600; text-align: center; pointer-events: none;
  box-shadow: 0 4px 14px oklch(0.2 0.02 60 / 0.35);
}

.insp-stage {
  flex: 1; margin: 12px 14px 0; border-radius: 16px; position: relative;
  background: var(--cam); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  min-height: 260px;
}
.insp-stage canvas.base, .insp-stage svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.insp-stage svg.lines, #inspFocusSvg { shape-rendering: geometricPrecision; }
.insp-stage canvas.base { object-fit: contain; }
.insp-stage .iline { pointer-events: none; }
.insp-stage .ifree-target { cursor: grab; pointer-events: all; }
.insp-stage .ifree-target .hit { fill: transparent; stroke: transparent; }
.insp-stage .ifree-target .mark { pointer-events: none; }
.insp-stage .ifree-target.active .mark { stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 3px #fff); }
.insp-zoom { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 6; }
.insp-zoom button {
  width: 32px; height: 32px; border-radius: 9px; background: oklch(0.95 0.015 82 / 0.9);
  border: 0; display: grid; place-items: center; color: oklch(0.4 0.04 55); font-size: 14px; cursor: pointer;
}
.insp-drag-hint {
  position: absolute; bottom: 10px; left: 0; right: 0; text-align: center;
  font-family: var(--f-mono); font-size: 10px; color: oklch(0.75 0.03 75); pointer-events: none;
}
.focus-panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(52%, 191px); aspect-ratio: 1; border-radius: 999px; overflow: hidden;
  border: 3px solid oklch(0.95 0.015 82); background: oklch(0.16 0.015 60);
  box-shadow: 0 6px 20px oklch(0.2 0.02 60 / 0.5); display: none; z-index: 5; pointer-events: none;
}
.focus-panel canvas, .focus-panel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.focus-zoom-lbl {
  position: absolute; bottom: 8px; left: 0; right: 0; text-align: center;
  font-family: var(--f-mono); font-size: 9px; color: oklch(0.8 0.03 80); z-index: 2;
}

.insp-readout {
  margin: 12px 18px 0; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-mono); font-size: 11px; color: var(--mid); gap: 8px; flex-wrap: wrap;
}
.insp-readout b { color: var(--ink); }
.insp-readout .verdict { color: var(--good-ink); font-weight: 700; }
.insp-readout .adj { background: var(--warn-bg); color: var(--warn-ink); font-size: 9px; padding: 3px 8px; border-radius: 6px; }
.insp-borders {
  margin: 6px 18px 0; font-family: var(--f-mono); font-size: 10.5px; color: var(--faint);
  height: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.insp-borders .bad-txt { color: var(--bad-ink); }

.insp-guided { margin: 10px 18px 18px; display: flex; gap: 12px; align-items: center; }
.arrow-pad { display: grid; grid-template-columns: repeat(3, 38px); grid-template-rows: repeat(3, 38px); gap: 4px; flex: none; }
.arrow-pad button {
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  display: grid; place-items: center; color: oklch(0.4 0.04 55); cursor: pointer; font-size: 13px;
}
.arrow-pad button:disabled { opacity: .35; }
.arrow-pad .stepbtn { background: var(--app); border-color: oklch(0.87 0.02 78); font-family: var(--f-mono); font-size: 8.5px; color: var(--link); font-weight: 700; }
.insp-guided .g-right { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.insp-guided .g-nav { display: flex; gap: 8px; }
.insp-guided .g-nav .btn { padding: 11px 0; font-size: 13.5px; border-radius: 11px; }
.insp-guided .g-nav .back { flex: 1; }
.insp-guided .g-nav .next { flex: 1.4; }
.insp-guided .g-note { font-family: var(--f-mono); font-size: 9.5px; color: oklch(0.58 0.03 62); text-align: center; }
.insp-free { margin: 9px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.f-target-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.f-target-card {
  --target-color: #00e5ff; background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 7px 8px 6px; min-width: 0;
}
.f-target-card.art { --target-color: #ff2bd6; }
.f-target-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; font: 700 9px var(--f-mono); letter-spacing: .08em; color: var(--ink); }
.f-target-head small { color: var(--target-color); font-size: 8px; letter-spacing: 0; }
.f-target-map { height: 74px; position: relative; margin-top: 3px; }
.f-target-map::before { content: ""; position: absolute; inset: 11px 20px; border: 2px solid var(--target-color); border-radius: 5px; opacity: .55; }
.f-target-map button {
  position: absolute; width: 28px; height: 28px; padding: 0; border-radius: 50%; z-index: 1;
  border: 1px solid color-mix(in srgb, var(--target-color) 68%, #564e44); background: var(--app);
  color: oklch(0.4 0.035 55); font: 700 8px var(--f-mono); cursor: pointer;
  transform: translate(-50%, -50%); touch-action: manipulation;
}
.f-target-map button:hover, .f-target-map button:focus-visible { border-color: var(--target-color); outline: none; }
.f-target-map button.active { background: var(--target-color); border-color: #fff; color: oklch(0.18 0.025 55); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--target-color); }
.f-target-map .corner-0 { left: 12%; top: 15%; }
.f-target-map .corner-1 { left: 88%; top: 15%; }
.f-target-map .corner-2 { left: 88%; top: 85%; }
.f-target-map .corner-3 { left: 12%; top: 85%; }
.f-target-map .bow-top { left: 50%; top: 15%; }
.f-target-map .bow-right { left: 88%; top: 50%; }
.f-target-map .bow-bottom { left: 50%; top: 85%; }
.f-target-map .bow-left { left: 12%; top: 50%; }
.f-edit-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; }
.f-selection-copy { min-width: 0; flex: 1; }
.insp-free .f-selname { font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; color: var(--ink); }
.insp-free .f-selhint { margin-top: 3px; font-size: 10.5px; color: var(--faint); }
.insp-free .free-pad { grid-template-columns: repeat(3, 28px); grid-template-rows: repeat(3, 28px); gap: 2px; }
.insp-free .free-pad button { border-radius: 8px; }
.insp-free .f-actions { display: flex; gap: 10px; }
.insp-free .f-actions .btn { flex: 1; padding: 12px 0; font-size: 13.5px; border-radius: 11px; }

@media (max-height: 720px) {
  .insp-stage { min-height: 210px; }
  .f-target-map { height: 62px; }
  .f-edit-row { min-height: 58px; }
}

/* ---------- history ---------- */
.history-list { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.history-entry {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 12px 14px; display: flex; gap: 12px; align-items: center; cursor: pointer;
  width: 100%; font-family: inherit; text-align: left;
}
.history-entry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.history-entry img, .history-entry .ph {
  width: 48px; height: 67px; border-radius: 7px; object-fit: cover; background: var(--app); flex: none;
}
.history-entry .ph.photo-only {
  background: var(--cam); display: grid; place-items: center; font-family: var(--f-mono);
  font-size: 7.5px; color: oklch(0.65 0.03 65); text-align: center;
}
.history-entry .h-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.history-entry .h-name { display: flex; gap: 7px; align-items: center; min-width: 0; }
.history-entry .h-name .nm { font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-entry .h-name .nm.unid { color: var(--mid); font-style: italic; }
.history-entry .h-set { font-size: 12px; color: oklch(0.52 0.035 58); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-entry .h-foot { display: flex; justify-content: space-between; gap: 8px; }
.history-entry .h-time { font-family: var(--f-mono); font-size: 10px; color: var(--ghost); }
.history-entry .h-del { border: 0; background: none; color: var(--ghost); font-size: 15px; cursor: pointer; flex: none; padding: 6px; }
.history-entry .vbadge {
  font-family: var(--f-mono); font-size: 9px; padding: 2px 6px; border-radius: 5px; flex: none;
  background: var(--good-chip-bg); color: var(--good-chip-ink);
}
.history-entry .vbadge.warn { background: var(--warn-bg); color: var(--warn-ink); }
.history-note { margin: 12px 20px; font-size: 11.5px; color: oklch(0.58 0.03 62); text-align: center; line-height: 1.5; }
.empty-state {
  margin: 40px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 18px; display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center;
}
.empty-state .e-ico { font-size: 22px; color: var(--ghost); }
.empty-state .e-title { font-size: 14px; font-weight: 600; color: oklch(0.35 0.04 55); }
.empty-state .e-sub { font-size: 12.5px; color: var(--faint); }
.clear-btn { border: 0; background: none; font-size: 12.5px; font-weight: 600; color: var(--bad-ink); cursor: pointer; }

/* ---------- toast ---------- */
#toast {
  position: fixed; bottom: calc(var(--tabbar-h) + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--dev-bg); color: oklch(0.9 0.02 80); font-size: 12.5px; padding: 9px 16px;
  border-radius: 12px; z-index: 90; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  max-width: min(90vw, 480px); text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- dev panel ---------- */
#devpanel {
  position: fixed; left: 12px; bottom: calc(var(--tabbar-h) + 12px); width: 300px; z-index: 80;
  background: var(--dev-bg); border-radius: 16px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; font-family: var(--f-mono);
  box-shadow: 0 8px 24px oklch(0.2 0.02 60 / 0.4);
}
#devpanel .d-head { display: flex; justify-content: space-between; align-items: center; }
#devpanel .d-head .l { font-size: 11px; font-weight: 700; color: oklch(0.85 0.05 80); letter-spacing: 0.1em; }
#devpanel .d-head .r { font-size: 9.5px; color: oklch(0.7 0.03 75); }
#devpanel .d-chips { display: flex; gap: 5px; flex-wrap: wrap; }
#devpanel .d-chips button {
  border: 0; font-size: 9.5px; padding: 4px 9px; border-radius: 6px; cursor: pointer; font-family: inherit;
  background: oklch(0.38 0.03 60); color: oklch(0.75 0.03 75);
}
#devpanel .d-chips button.on { background: var(--cut); color: oklch(0.25 0.04 60); font-weight: 700; }
#devpanel .d-lat, #devpanel .d-scores { font-size: 10px; color: oklch(0.78 0.03 75); line-height: 1.5; white-space: pre-wrap; }
#devpanel .d-debug {
  background: oklch(0.38 0.03 60); color: oklch(0.88 0.03 80); font-size: 10.5px; font-weight: 700;
  padding: 8px 0; border-radius: 8px; text-align: center; border: 0; cursor: pointer; font-family: inherit;
}
#devpanel .d-debug:disabled { opacity: .4; }

/* ---------- search / browse tab ---------- */
.photo-search-btn {
  flex: none; width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--mid);
  display: grid; place-items: center;
}
.photo-search-btn:hover { border-color: oklch(0.72 0.06 65); color: var(--ink); }
#browseHome { padding-bottom: 16px; }
.browse-kicker { display: flex; align-items: baseline; gap: 8px; padding: 14px 20px 8px; }
.browse-kicker .cat-n { font-size: 10px; color: var(--faint); }
.bg-title { font-family: var(--f-display); font-size: 17px; color: var(--ink); padding: 18px 20px 0; }
.deck-strip { display: flex; gap: 10px; padding: 0 20px 4px; overflow-x: auto; scrollbar-width: none; }
.deck-strip::-webkit-scrollbar { display: none; }
.deck-tile {
  flex: none; min-width: 120px; max-width: 180px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
}
.deck-tile:hover { border-color: oklch(0.72 0.06 65); }
.deck-tile .dk-name { font-weight: 600; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-tile .dk-count { font-family: var(--f-mono); font-size: 10px; color: var(--faint); margin-top: 3px; }
.deck-tile.new {
  border: 1.5px dashed oklch(0.78 0.04 70); background: var(--app); color: var(--muted);
  font-size: 12.5px; display: grid; place-items: center; min-height: 56px;
}
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 0 20px; }
.set-grid.more { margin-top: 10px; }
.set-tile {
  text-align: left; cursor: pointer; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 10px; position: relative;
  display: flex; flex-direction: column; gap: 6px;
}
.set-tile:hover { border-color: oklch(0.72 0.06 65); }
/* absolutely-centered contain: iOS Safari misresolves max-height:100% in
   grid-centered boxes (image overflows the bottom) — inset-pinning gives the
   img a definite box and object-fit does the centering */
.set-tile .st-art { height: 84px; border-radius: 8px; background: var(--app); position: relative; overflow: hidden; }
.set-tile .st-art img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; object-position: center; }
.set-tile .st-name { font-weight: 600; font-size: 12.5px; color: var(--ink); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.set-tile .st-sub { font-size: 10.5px; color: var(--faint); }
.set-tile .st-date { font-size: 9px; color: var(--ghost); }
.set-tile .st-owned {
  position: absolute; top: 8px; right: 8px; background: var(--good-chip-bg); color: var(--good-chip-ink);
  font-family: var(--f-mono); font-size: 9px; padding: 2px 6px; border-radius: 6px;
}
.show-all { margin: 10px 20px 0; width: calc(100% - 40px); cursor: pointer; color: var(--muted); }
.browse-sentinel { height: 1px; }
.set-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.set-strip::-webkit-scrollbar { display: none; }
.set-strip .set-tile { flex: none; width: 160px; }
.own-chip {
  background: var(--good-chip-bg); color: var(--good-chip-ink);
  font-family: var(--f-mono); font-size: 9.5px; padding: 1px 6px; border-radius: 6px; vertical-align: 1px;
}

/* ---------- set / deck view ---------- */
.set-hero { display: flex; gap: 16px; padding: 6px 20px 14px; align-items: center; }
.set-hero .sh-art { width: 110px; height: 110px; flex: none; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); position: relative; overflow: hidden; }
.set-hero .sh-art img { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); object-fit: contain; object-position: center; }
.set-hero .sh-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.set-hero .sh-name { font-family: var(--f-display); font-size: 19px; color: var(--ink); line-height: 1.2; }
.set-hero .sh-sub { font-size: 12.5px; color: var(--muted); }
.set-hero .sh-progress {
  align-self: flex-start; background: var(--good-chip-bg); color: var(--good-chip-ink);
  font-family: var(--f-mono); font-size: 10.5px; padding: 3px 9px; border-radius: 8px;
}
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; padding: 4px 16px 20px; }
.card-tile { text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 7px; display: flex; flex-direction: column; gap: 5px; }
.card-tile:hover { border-color: oklch(0.72 0.06 65); }
/* padding-top ratio instead of aspect-ratio: identical box on old iOS too */
.card-tile .ct-imgwrap { position: relative; border-radius: 8px; overflow: hidden; background: var(--app); padding-top: 140%; }
.card-tile .ct-imgwrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.card-tile .ct-qty {
  position: absolute; top: 5px; right: 5px; background: var(--good-chip-bg); color: var(--good-chip-ink);
  font-family: var(--f-mono); font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 6px;
}
.card-tile .ct-name { font-size: 11px; font-weight: 600; color: var(--ink); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-tile .ct-code { font-size: 8.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- collection box (card detail) ---------- */
.coll-box { display: flex; gap: 12px; align-items: center; }
.qty-step { display: flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 3px; }
.qty-step button {
  width: 36px; height: 34px; border: 0; background: none; cursor: pointer; border-radius: 9px;
  font-size: 18px; color: var(--mid); display: grid; place-items: center;
}
.qty-step button:hover:not(:disabled) { background: var(--app); color: var(--ink); }
.qty-step button:disabled { opacity: .35; cursor: default; }
.qty-step .q { min-width: 28px; text-align: center; font-size: 14px; font-weight: 700; color: var(--ink); }
.coll-box select {
  flex: 1; min-width: 0; height: 42px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-family: var(--f-body); font-size: 13px; padding: 0 10px;
}
.coll-box select:disabled { opacity: .45; }
.h-set.as-link { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; color: var(--link); font-size: 13px; }
.h-set.as-link:hover { color: var(--link-press); }

/* ---------- bulk actions: modal, analysis, history select ---------- */
#modalRoot {
  position: fixed; z-index: 90;
  left: var(--overlay-left, 0); top: var(--overlay-top, 0);
  width: var(--overlay-width, 100%); height: var(--overlay-height, 100%);
}
.modal-layer { position: absolute; inset: 0; }
.modal-back { position: absolute; inset: 0; background: oklch(0.25 0.03 60 / 0.45); }
.modal-card {
  position: relative; margin: 10vh auto 0; width: min(440px, calc(100% - 32px));
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
  max-height: 76vh; overflow-y: auto;
  box-shadow: 0 18px 60px oklch(0.3 0.03 55 / 0.35);
}
.center-report-modal {
  width: min(560px, calc(100% - 24px)); margin-top: 5vh; max-height: 90vh; gap: 14px;
  overflow: hidden;
}
.center-report-modal > .m-titlebar,
.center-report-modal > .center-report-grade,
.center-report-modal > .m-actions { flex: none; }
.center-report-modal .m-titlebar > div:first-child { flex: 1; min-width: 0; }
.m-eyebrow {
  font: 9.5px var(--f-mono); letter-spacing: .11em; color: var(--faint); text-transform: uppercase;
}
.center-report-grade {
  display: grid; grid-template-columns: 1.35fr 1fr 1fr; overflow: hidden;
  background: var(--good-bg); border: 1px solid var(--good-line); border-radius: 14px;
}
.center-report-grade.warn { background: var(--warn-card-bg); border-color: var(--warn-card-line); }
.center-report-grade > div { padding: 11px 12px; border-right: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 2px; }
.center-report-grade > div:last-child { border-right: 0; }
.center-report-grade span { font: 8.5px var(--f-mono); color: var(--muted); text-transform: uppercase; }
.center-report-grade strong { font: 600 17px var(--f-display); color: var(--good-ink); }
.center-report-grade.warn strong { color: var(--warn-ink); }
.center-axis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.center-axis-card {
  min-width: 0; padding: 11px 12px; border: 1px solid var(--line-soft); border-radius: 13px;
  background: var(--app); display: flex; flex-direction: column; gap: 3px;
}
.center-axis-card > span { font: 8.5px var(--f-mono); color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.center-axis-card strong { font: 600 13px var(--f-mono); color: var(--ink); overflow-wrap: anywhere; }
.center-axis-card small { color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.report-image-stage {
  position: relative; align-self: center; max-width: 100%; border-radius: 14px; overflow: hidden;
  background: var(--cam); touch-action: none; cursor: zoom-in; user-select: none; -webkit-user-select: none;
}
.report-image-stage.magnifying { cursor: none; }
.report-image-stage > img { display: block; width: auto; max-width: 100%; max-height: 38vh; object-fit: contain; pointer-events: none; }
.report-loupe {
  position: absolute; z-index: 2; width: 116px; height: 116px; margin: -58px 0 0 -58px;
  border: 3px solid var(--surface); border-radius: 50%; background-color: var(--cam); background-repeat: no-repeat;
  box-shadow: 0 6px 24px oklch(0.2 0.03 55 / .4), inset 0 0 0 1px oklch(0.2 0.02 60 / .35);
  opacity: 0; transform: scale(.84); transition: opacity .12s, transform .12s; pointer-events: none;
}
.report-loupe::before, .report-loupe::after { content: ""; position: absolute; left: 50%; top: 50%; background: oklch(0.95 0.01 80 / .75); }
.report-loupe::before { width: 16px; height: 1px; margin-left: -8px; }
.report-loupe::after { width: 1px; height: 16px; margin-top: -8px; }
.report-loupe.show { opacity: 1; transform: scale(1); }
.report-loupe-hint {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); white-space: nowrap;
  padding: 4px 8px; border-radius: 7px; background: oklch(0.2 0.02 60 / .7); color: oklch(0.92 0.02 80);
  font: 9px var(--f-mono); pointer-events: none;
}
.report-image-stage.magnifying .report-loupe-hint { opacity: 0; }
.center-report-guide { padding: 12px 13px; border-left: 3px solid var(--cut); background: var(--surface-hi); border-radius: 0 11px 11px 0; }
.center-report-guide p { margin: 5px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.center-report-guide b { color: var(--ink); }
.center-report-guide .report-warning { color: var(--warn-ink); }
.center-report-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: block; padding-right: 4px;
}
.center-report-scroll > .center-report-guide { margin-top: 14px; }
.stored-report-sides { display: grid; gap: 14px; }
.stored-report-side { display: grid; gap: 10px; }
.stored-report-side + .stored-report-side { border-top: 1px solid var(--line); padding-top: 14px; }
.stored-report-side-head { display: flex; align-items: center; justify-content: space-between; font: 700 11px var(--f-mono); letter-spacing: .12em; color: var(--ink); }
.stored-report-side-head small { color: var(--warn-ink); font-size: 9px; letter-spacing: .06em; }
.stored-report-side-head small.verified { color: var(--live-ink); }
.stored-report-side .report-image-stage { margin: 0 auto; }
@media (max-width: 480px), (max-height: 480px) and (max-width: 979px) {
  .center-report-modal {
    width: calc(100% - 16px); margin-top: 8px; max-height: calc(100% - 16px);
    padding: 12px; gap: 10px;
  }
  .center-report-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); flex: none; }
  .center-report-grade > div { min-width: 0; padding: 10px 8px; }
  .center-report-grade strong { font-size: 15px; white-space: nowrap; }
  .centering-precision:not(.compact) { grid-template-columns: 1fr; }
  .centering-precision:not(.compact) > div { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .centering-precision:not(.compact) > div:last-child { border-bottom: 0; }
  .center-axis-grid { grid-template-columns: 1fr; }
  .report-image-stage { width: 100%; flex: none; }
  .report-image-stage > img { width: 100%; height: auto; max-width: none; max-height: none; }
  .report-loupe { width: 104px; height: 104px; margin: -92px 0 0 -52px; }
}
.m-title { font-family: var(--f-display); font-size: 17px; color: var(--ink); }
.m-sub { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.m-select {
  height: 42px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--app); color: var(--ink); font-family: var(--f-body); font-size: 13px; padding: 0 10px;
}
.m-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 2px; }

/* Multi-photo batch capture uses a contact sheet: the sequence numbers make
   the one-photo-at-a-time processing order visible before it begins. */
.batch-capture-modal { width: min(620px, calc(100% - 24px)); margin-top: 5vh; max-height: 90vh; gap: 14px; }
.batch-capture-modal .m-titlebar > div:first-child { flex: 1; min-width: 0; }
.batch-capture-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--app);
}
.batch-capture-summary span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.batch-capture-summary strong { flex: none; font: 700 11px var(--f-mono); color: var(--ink); }
.batch-contact-sheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.batch-photo {
  position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line);
  border-radius: 12px; background: var(--app); aspect-ratio: 4 / 3;
}
.batch-photo.reviewable { cursor: pointer; }
.batch-photo.reviewable:hover { border-color: var(--accent); transform: translateY(-1px); }
.batch-photo.reviewable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.batch-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.batch-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(transparent 48%, oklch(0.16 0.02 55 / .76));
}
.batch-photo-index {
  position: absolute; z-index: 2; left: 7px; top: 7px; min-width: 22px; height: 22px;
  padding: 0 5px; display: grid; place-items: center; border-radius: 7px;
  background: oklch(0.2 0.025 55 / .82); color: white; font: 700 10px var(--f-mono);
}
.batch-photo-status {
  position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 7px;
  color: white; font: 700 9px/1.25 var(--f-mono); overflow-wrap: anywhere;
}
.batch-photo-remove {
  position: absolute; z-index: 3; right: 6px; top: 6px; width: 26px; height: 26px;
  display: grid; place-items: center; border: 1px solid oklch(0.96 0.01 85 / .55); border-radius: 8px;
  background: oklch(0.2 0.025 55 / .72); color: white; cursor: pointer;
}
.batch-photo-remove:hover { background: var(--bad-ink); }
.batch-photo-remove:focus-visible { outline: 2px solid white; outline-offset: 1px; }
.batch-photo.processing,
.batch-photo.reviewing { border-color: var(--accent); box-shadow: 0 0 0 2px oklch(0.62 0.1 65 / .18); }
.batch-photo.done,
.batch-photo.no-cards { border-color: var(--good-line); }
.batch-photo.skipped { opacity: .68; }
.batch-photo.error { border-color: var(--bad-line); }
.batch-capture-empty {
  min-height: 170px; display: grid; place-items: center; text-align: center; padding: 24px;
  border: 1.5px dashed oklch(0.75 0.06 65); border-radius: 14px; background: var(--bar); color: var(--muted);
}
.batch-capture-empty strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 13px; }
.batch-capture-empty span { font-size: 12px; line-height: 1.45; }
.batch-capture-modal .m-actions { position: sticky; bottom: -18px; margin: 0 -18px -18px; padding: 12px 18px 18px; background: var(--surface); border-top: 1px solid var(--line-soft); }
.batch-capture-modal .m-actions .btn:first-child { margin-right: auto; }
.batch-capture-modal .m-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
@media (max-width: 520px) {
  .batch-capture-modal { margin-top: 2vh; max-height: 96vh; }
  .batch-contact-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .batch-capture-modal .m-actions { flex-wrap: wrap; }
  .batch-capture-modal .m-actions .btn:first-child { width: 100%; margin-right: 0; }
  .batch-capture-modal .m-actions .btn:not(:first-child) { flex: 1; }
}
.an-hero { display: flex; gap: 22px; }
.an-hero .an-big { font-family: var(--f-display); font-size: 20px; color: var(--ink); }
.an-hero .an-lbl { font-family: var(--f-mono); font-size: 9px; color: var(--faint); }
.an-sec { display: flex; flex-direction: column; gap: 7px; }
.an-grid-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-sort { position: relative; z-index: 6; flex: none; }
.card-sort summary {
  min-height: 32px; max-width: min(260px, 68vw); padding: 5px 8px; display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--mid);
  cursor: pointer; list-style: none; font: 600 11px var(--f-body); white-space: nowrap;
}
.card-sort summary::-webkit-details-marker { display: none; }
.card-sort summary small { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--faint); font: 9px var(--f-mono); }
.card-sort summary:hover { border-color: var(--accent); }
.card-sort summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card-sort.stale summary { border-color: var(--accent); background: var(--surface-hi); color: var(--link); }
.card-sort.stale summary::after {
  content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--accent);
}
.card-sort-options {
  position: absolute; top: calc(100% + 5px); right: 0; z-index: 12; width: max-content; min-width: 190px;
  padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface);
  box-shadow: 0 12px 32px oklch(0.3 0.03 55 / 0.2);
}
.card-sort-options button {
  width: 100%; min-height: 34px; padding: 6px 9px; display: grid; grid-template-columns: 15px 1fr;
  align-items: center; gap: 7px; border: 0; border-radius: 7px; background: transparent; color: var(--body-ink);
  cursor: pointer; text-align: left; font: 11px var(--f-body);
}
.card-sort-options button:hover, .card-sort-options button:focus-visible { background: var(--app); outline: 0; }
.card-sort-options button[aria-checked="true"] { color: var(--link); font-weight: 700; }
.an-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.an-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--body-ink); }
.an-row img { width: 26px; height: 36px; object-fit: contain; border-radius: 4px; background: var(--app); flex: none; }
.an-row .an-nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-set-filter {
  width: 100%; border: 1px solid transparent; border-radius: 8px; background: transparent;
  padding: 6px 8px; cursor: pointer; font: inherit; text-align: left;
}
.an-set-filter:hover { background: var(--app); border-color: var(--line-soft); }
.an-set-filter.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.an-set-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.an-set-filter-trigger {
  width: 100%; min-height: 42px; padding: 8px 10px; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--app); color: var(--body-ink);
  font: 500 12.5px var(--f-body); cursor: pointer; text-align: left;
}
.an-set-filter-trigger > svg { color: var(--muted); flex: none; }
.an-set-filter-trigger:hover { border-color: var(--accent); background: var(--surface-hi); }
.an-set-filter-trigger.active { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.an-set-filter-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.an-set-filter-summary { margin-left: auto; color: var(--muted); font: 9px var(--f-mono); }
.an-set-popup { position: fixed; inset: 0; z-index: 4; display: grid; place-items: center; padding: 16px; }
.an-set-popup[hidden] { display: none; }
.an-set-popup-backdrop {
  position: absolute; inset: 0; border: 0; background: oklch(0.25 0.03 60 / .48); cursor: default;
}
.an-set-popup-card {
  position: relative; width: min(420px, 100%); max-height: min(72vh, 640px); padding: 16px;
  display: flex; flex-direction: column; gap: 14px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 17px; background: var(--surface);
  box-shadow: 0 18px 60px oklch(0.3 0.03 55 / .35);
}
.an-set-popup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.an-set-options { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.an-set-option {
  min-height: 43px; padding: 7px 9px; display: flex; align-items: center; gap: 9px;
  border: 1px solid transparent; border-radius: 10px; color: var(--body-ink); cursor: pointer;
}
.an-set-option:hover { border-color: var(--line-soft); background: var(--app); }
.an-set-option input { position: absolute; opacity: 0; pointer-events: none; }
.an-set-check {
  width: 20px; height: 20px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 6px; background: var(--app); color: transparent;
}
.an-set-option input:checked + .an-set-check { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.an-set-option input:focus-visible + .an-set-check { outline: 2px solid var(--accent); outline-offset: 2px; }
.an-set-option-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.an-set-option .mono { color: var(--muted); font-size: 9.5px; }
.an-set-popup-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 2px; }
@media (max-width: 520px) {
  .an-set-popup { place-items: end center; padding: 0; }
  .an-set-popup-card {
    width: 100%; max-height: min(78vh, 640px); padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    border-width: 1px 0 0; border-radius: 18px 18px 0 0;
  }
  .an-set-popup-actions .btn { flex: 1; }
}
.sq-head { flex-wrap: wrap; row-gap: 6px; }
.sq-act:disabled { opacity: .4; cursor: default; }
.sq-in { display: block; margin-top: 2px; text-align: center; }
.sq-in .own-chip { font-size: 8px; padding: 1px 5px; }
.hist-controls {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 2px 16px 14px;
  border-bottom: 1px solid var(--hairline-2);
}
.hist-controls label { display: flex; flex-direction: column; gap: 5px; }
.hist-controls label > span { font: 9px var(--f-mono); color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.hist-controls .hist-search { grid-column: 1 / -1; }
.hist-controls select, .hist-controls input {
  width: 100%; min-width: 0; height: 40px; border: 1px solid var(--line); border-radius: 11px;
  padding: 0 10px; background: var(--surface); color: var(--ink); font: 12px var(--f-body);
}
.hist-controls select:focus-visible, .hist-controls input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hist-analysis {
  display: flex; flex-direction: column; gap: 14px; margin: 14px 16px 18px; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
}
.hist-analysis .an-hero { justify-content: space-between; gap: 12px; }
.hist-analysis .an-hero > div { min-width: 0; }
.hist-analysis .an-big { font-size: clamp(17px, 5vw, 22px); }
.hist-analysis .an-row { padding: 0 2px; }
.hist-analysis .an-row .an-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-add-visible { width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; }
.hist-grid-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 16px 8px; }
.hist-grid-head .mono { font-size: 9px; color: var(--faint); }
.hist-grid { padding: 0 16px 8px; }
.hist-tile { background: var(--surface); }
.hist-load-status {
  min-height: 42px; padding: 12px 16px 18px; color: var(--faint); text-align: center;
  font: 9px var(--f-mono); letter-spacing: .02em;
}
.hist-load-status.is-complete { color: var(--ghost); }
.hist-card-remove {
  position: absolute; z-index: 1; top: 3px; right: 3px; width: 25px; height: 25px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--mid);
  display: grid; place-items: center; padding: 0; font: 18px/1 var(--f-body); cursor: pointer;
  box-shadow: 0 1px 4px oklch(0.25 0.03 55 / 0.18);
}
.hist-card-remove:hover { border-color: var(--bad-line); color: var(--bad-ink); background: var(--bad-soft); }
.hist-card-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hist-tile .an-card-open { position: relative; }
.hist-tile .an-tile-pr { line-height: 1.25; white-space: normal; }
.hist-tile .an-tile-pr small { color: var(--faint); font-size: 8px; font-weight: 400; }
.hist-scanned { font-size: 8px; color: var(--ghost); }
.hist-card-coll {
  min-height: 27px; border: 1px solid var(--line); border-radius: 7px; background: var(--app);
  color: var(--link); display: flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
}
.hist-card-coll:hover { border-color: var(--accent); background: var(--surface-hi); }
.hist-card-coll span { font: 9px var(--f-mono); }
.hist-empty { margin-top: 18px; }

/* ---------- desktop ---------- */
@media (min-width: 980px) {
  :root { --tabbar-h: 0px; }
  #topnav { display: flex; }
  #tabbar { display: none; }
  #app { max-width: 1200px; background: transparent; }
  .view { min-height: calc(100dvh - 61px); padding-bottom: 24px; }

  /* landing centered */
  #view-landing { align-items: center; justify-content: center; }
  #view-landing .hero { text-align: center; align-items: center; }
  #view-landing .hero h1 { font-size: 34px; }
  .tool-cards { flex-direction: row; width: min(1060px, 94%); }
  .tool-card { flex: 1; min-width: 0; }
  .tool-card .t-title { white-space: nowrap; font-size: 18px; }
  .desktop-home-tool { display: flex; }
  .recent-strip { width: min(1060px, 94%); margin: 24px 0 40px; }
  .recent-cards { overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; scroll-snap-type: x proximity; }
  .recent-card { flex: 0 0 132px; min-width: 132px; scroll-snap-align: start; }
  .recent-card img, .recent-card .ph { height: 146px; object-fit: contain; }

  /* scanner split */
  .scan-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 18px; padding: 18px 26px; align-items: start; }
  .scan-left { display: flex; flex-direction: column; min-height: calc(100dvh - 130px); background: var(--app); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; padding-bottom: 8px; }
  .scan-right {
    background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
    min-height: calc(100dvh - 130px); max-height: calc(100dvh - 130px); overflow-y: auto; position: sticky; top: 79px;
  }
  .scan-right .pane-placeholder { padding: 80px 30px; text-align: center; color: var(--faint); font-size: 13.5px; }
  .dropzone { display: flex; }
  .compact-result, .quick-price-strip { display: none !important; }

  /* centering / verdict / detail get a centered column */
  #view-center .center-col, #view-detail .detail-col, #view-verdict .verdict-col,
  #view-history .history-col, #view-search .search-col, #view-set .set-col {
    width: min(660px, 94%); margin: 0 auto; background: var(--app);
    border: 1px solid var(--line); border-radius: 20px; overflow: hidden; margin-top: 18px; padding-bottom: 10px;
  }
  /* browse grids breathe better on a wider column */
  #view-search .search-col, #view-set .set-col { width: min(900px, 94%); }
  #view-center .center-col { display: flex; flex-direction: column; min-height: calc(100dvh - 140px); }
  #inspector { max-width: 860px; border-radius: 20px; inset: 20px 0; border: 1px solid var(--line); box-shadow: 0 18px 60px oklch(0.3 0.03 55 / 0.35); }
  #toast { bottom: 26px; }
  #devpanel { bottom: 12px; }
}

@media (max-width: 979px) {
  #app { background: var(--app); }
  .scan-left { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .scan-grid { display: flex; flex-direction: column; flex: 1; }
  .scan-right { display: none; }
  .scan-queue { margin-top: 12px; }
}

/* ---------- analyze grid + stacked detail overlay ---------- */
/* minmax(0, 1fr): a long nowrap card name must ellipsize, not blow out its
   column — auto min-width would make tiles unequal across rows */
.an-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.an-tile {
  position: relative; min-width: 0; border: 1px solid var(--line-soft); background: var(--app);
  border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px;
  font: inherit; color: inherit; text-align: center;
}
.an-tile[hidden] { display: none; }
.an-card-open {
  min-width: 0; border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; text-align: center; font: inherit;
}
.an-card-open img { width: 100%; aspect-ratio: 5 / 7; object-fit: contain; background: var(--surface); border-radius: 6px; }
.an-card-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 7px; }
.an-tile-nm { font-size: 10px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-tile-pr { font-size: 11px; color: var(--price); font-weight: 700; }
.an-tile > .card-grade { width: 100%; box-sizing: border-box; }
.an-bulkbar { display: flex; align-items: center; padding-bottom: 2px; }
.an-bulk-add { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; }
.an-action-count { font-size: 10px; opacity: .8; }
.an-card-actions { display: flex; align-items: center; justify-content: center; gap: 4px; padding-top: 2px; }
.an-card-actions button {
  width: 26px; height: 26px; flex: none; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); color: var(--link); display: grid; place-items: center; cursor: pointer;
}
.an-card-actions button:hover { border-color: var(--accent); background: var(--surface-hi); }
.an-card-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.detail-overlay { position: fixed; inset: 0; z-index: 95; background: oklch(0.25 0.03 60 / 0.45); overflow-y: auto; }
.detail-overlay-card {
  width: min(560px, calc(100% - 20px)); margin: 5vh auto; background: var(--app);
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 60px oklch(0.3 0.03 55 / 0.35); padding-bottom: 10px;
}

/* ---------- full-viewport modal (analyze) ---------- */
/* 100vh fallback first; dvh tracks the iOS Safari collapsing toolbars */
.modal-card.full {
  position: fixed; inset: 0; margin: 0; width: 100%; max-width: none;
  height: 100vh; height: 100dvh; max-height: none;
  border-radius: 0; border: 0; overflow: hidden;
  padding: calc(14px + env(safe-area-inset-top)) 16px 0;
}
.modal-card.full .m-scroll {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 12px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.m-titlebar { display: flex; align-items: center; gap: 10px; }
.m-titlebar .m-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-x {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--muted); cursor: pointer;
}

/* ---------- bulk region review ---------- */
body.bulk-review-open { overflow: hidden; }
#bulkReviewRoot {
  position: fixed; z-index: 75; background: var(--app);
  left: var(--overlay-left, 0); top: var(--overlay-top, 0);
  width: var(--overlay-width, 100%); height: var(--overlay-height, 100%);
}
.bulk-review-page {
  width: 100%; height: 100%; overflow-y: auto;
  background: var(--app); color: var(--ink); padding-bottom: env(safe-area-inset-bottom);
}
.br-header {
  position: sticky; top: 0; z-index: 4; min-height: 92px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: calc(16px + env(safe-area-inset-top)) clamp(16px, 4vw, 48px) 16px;
  background: oklch(0.955 0.014 82 / 0.96); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px); box-shadow: 0 6px 22px oklch(0.35 0.03 60 / 0.06);
}
.br-title-group { min-width: 0; }
.br-title-group h1 { margin: 2px 0 1px; font: 600 clamp(20px, 3vw, 28px)/1.1 var(--f-display); }
.br-title-group p { margin: 0; color: var(--muted); font-size: 12px; }
.br-header-actions { display: flex; gap: 8px; flex: none; }
.br-header-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.br-source {
  width: min(1180px, calc(100% - 32px)); margin: 18px auto 0; padding: 14px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
  box-shadow: 0 8px 24px oklch(0.35 0.03 60 / .055);
}
.br-source-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 10px; }
.br-source-head > div { display: flex; align-items: baseline; gap: 10px; }
.br-source-head strong { font-size: 12px; color: var(--ink); }
.br-source-head > span { color: var(--muted); font-size: 11px; }
.br-source-stage {
  position: relative; width: 100%; margin: 0 auto; overflow: hidden;
  border: 1px solid oklch(0.36 0.025 58); border-radius: 11px; background: var(--cam);
  box-shadow: inset 0 0 0 1px oklch(0.98 0.01 85 / .06);
}
.br-source-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; }
.br-source-stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.br-map-region { --br-map: var(--bad-ink); cursor: pointer; outline: none; }
.br-map-region.br-map-medium { --br-map: oklch(0.72 0.14 84); }
.br-map-region.br-map-high { --br-map: oklch(0.56 0.12 132); }
.br-map-halo { fill: none; stroke: transparent; stroke-width: 9px; pointer-events: none; }
.br-map-shape {
  fill: var(--br-map); fill-opacity: .10; stroke: var(--br-map); stroke-width: 3px;
  pointer-events: all; transition: fill-opacity .14s ease, stroke-width .14s ease;
}
.br-map-region circle {
  fill: var(--br-map); stroke: oklch(0.98 0.01 85); stroke-width: 2px;
  pointer-events: all; filter: drop-shadow(0 2px 3px oklch(0.2 0.02 60 / .35));
}
.br-map-region text {
  fill: white; font-family: var(--f-mono); font-weight: 700; pointer-events: none;
  paint-order: stroke; stroke: oklch(0.24 0.025 58 / .35); stroke-width: 1px;
}
.br-map-region:hover .br-map-shape,
.br-map-region:focus .br-map-shape { fill-opacity: .19; stroke-width: 5px; }
.br-map-region.selected .br-map-halo { stroke: oklch(0.98 0.01 85 / .96); }
.br-map-region.selected .br-map-shape { fill-opacity: .23; stroke-width: 5px; }
.br-map-region.selected circle { stroke-width: 4px; }
.br-map-legend { display: flex; justify-content: center; gap: 15px; padding-top: 9px; }
.br-map-legend span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font: 9px var(--f-mono); text-transform: uppercase; }
.br-map-legend span::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--bad-ink); }
.br-map-legend .medium::before { background: oklch(0.72 0.14 84); }
.br-map-legend .high::before { background: oklch(0.56 0.12 132); }
.br-reconcile {
  width: min(1180px, calc(100% - 32px)); margin: 18px auto 0; padding: 12px 16px;
  display: flex; align-items: center; gap: clamp(8px, 2.2vw, 24px);
  border: 1px solid var(--line); border-radius: 15px; background: var(--surface);
}
.br-reconcile > div:not(.br-unresolved) { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.br-reconcile b { font: 600 20px var(--f-display); }
.br-reconcile span { color: var(--faint); font: 9.5px var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
.br-reconcile .final { margin-left: auto; }
.br-reconcile .final b { color: var(--good-ink); }
.br-math { font-size: 15px !important; color: var(--ghost) !important; }
.br-unresolved {
  margin-left: 8px; padding: 5px 8px; border-radius: 7px;
  background: var(--bad-soft); color: var(--bad-ink); font: 9px var(--f-mono);
}
.br-grid {
  width: min(1180px, calc(100% - 32px)); margin: 18px auto 30px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 14px;
}
.br-card {
  --br-state: var(--line); position: relative; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; border: 1px solid var(--line);
  border-top: 4px solid var(--br-state); border-radius: 13px; background: var(--surface);
  box-shadow: 0 5px 14px oklch(0.35 0.03 60 / 0.055);
  scroll-margin-top: 112px;
}
.br-card.br-none, .br-card.br-low { --br-state: var(--bad-ink); }
.br-card.br-medium { --br-state: oklch(0.68 0.12 84); }
.br-card.br-high { --br-state: var(--good-ink); }
.br-card.br-manual { --br-state: var(--accent); }
.br-card.selected {
  border-color: var(--br-state); box-shadow: 0 0 0 3px color-mix(in oklch, var(--br-state) 22%, transparent),
    0 9px 24px oklch(0.35 0.03 60 / .12);
}
.br-eye-toggle {
  position: absolute; z-index: 3; top: 13px; right: 13px; width: 31px; height: 31px;
  padding: 0; display: grid; place-items: center; border: 1px solid oklch(0.82 0.025 78);
  border-radius: 9px; background: oklch(0.975 0.01 85 / .94); color: var(--muted);
  box-shadow: 0 2px 7px oklch(0.22 0.025 58 / .18); cursor: pointer;
  backdrop-filter: blur(8px);
}
.br-eye-toggle:hover { border-color: var(--accent); color: var(--ink); }
.br-eye-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.br-eye-toggle.active { background: var(--ink); border-color: var(--ink); color: var(--surface-hi); }
.br-eye-toggle svg { display: block; }
.br-card-open {
  min-width: 0; flex: 1; border: 0; padding: 8px; background: transparent;
  display: flex; flex-direction: column; gap: 8px; color: inherit; text-align: left; cursor: pointer;
}
.br-card-open:hover .br-image-wrap { border-color: var(--br-state); }
.br-card-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.br-image-wrap {
  position: relative; width: 100%; aspect-ratio: 5 / 7; overflow: hidden;
  display: grid; place-items: center; border: 1px solid var(--line-soft); border-radius: 8px;
  background: var(--cam); transition: border-color .15s ease;
}
.br-image-wrap img { width: 100%; height: 100%; display: block; object-fit: contain; }
.br-image-wrap .chip-badge { position: absolute; left: 6px; top: 6px; box-shadow: 0 1px 5px oklch(0.2 0.02 60 / .16); }
.br-image-mode {
  position: absolute; left: 6px; bottom: 6px; padding: 3px 6px; border-radius: 6px;
  background: oklch(0.26 0.025 58 / .84); color: white;
  font: 8px var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
}
.br-region-index {
  position: absolute; right: 6px; bottom: 6px; min-width: 25px; height: 25px; padding: 0 5px;
  display: grid; place-items: center; border: 2px solid oklch(0.98 0.01 85); border-radius: 99px;
  background: var(--br-state); color: white; font: 700 10px var(--f-mono);
  box-shadow: 0 2px 6px oklch(0.2 0.02 60 / .32);
}
.br-corrected {
  position: absolute; right: 42px; top: 6px; border-radius: 6px; padding: 3px 6px;
  background: var(--accent); color: var(--on-accent); font: 8.5px var(--f-mono); text-transform: uppercase;
}
.br-image-missing { color: var(--cam-text); text-align: center; font: 9px var(--f-mono); }
.br-card-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.br-card-copy strong { color: var(--ink); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-card-copy > span { color: var(--muted); font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-card-copy .br-score { margin-top: 2px; color: var(--br-state); font: 9px var(--f-mono); }
.br-card-actions {
  min-height: 43px; padding: 7px 8px 8px; display: flex; align-items: center; justify-content: space-between; gap: 7px;
  border-top: 1px solid var(--hairline-2);
}
.br-change {
  flex: 1; min-height: 30px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--app); color: var(--link); font-size: 11px; font-weight: 600; cursor: pointer;
}
.br-change:hover { border-color: var(--accent); }
.br-remove {
  width: 32px; height: 30px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--bad-ink); cursor: pointer;
}
.br-remove:hover { border-color: var(--bad-line); background: var(--bad-soft); }
.br-card-actions .qty-step {
  flex: 1; min-width: 0; padding: 1px; border-radius: 9px;
  display: grid; grid-template-columns: 30px minmax(28px, 1fr) 30px; gap: 0;
}
.br-card-actions .qty-step button { width: 30px; height: 28px; }
.br-card-actions .qty-step .q { min-width: 0; align-self: center; font-size: 12px; }
.br-footer { display: none; }

.br-choice-modal {
  width: min(620px, calc(100% - 24px));
  max-height: min(820px, calc(100% - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  margin-top: max(12px, env(safe-area-inset-top)); gap: 16px;
}
.br-choice-modal .m-titlebar { align-items: flex-start; }
.br-choice-modal .m-titlebar > div:first-child { flex: 1; min-width: 0; }
.br-candidates { display: flex; flex-direction: column; gap: 6px; }
.br-candidate-note { color: var(--faint); font-size: 10px; line-height: 1.4; margin: -1px 1px 3px; }
.br-candidate-list {
  /* Each result is 69px tall; cap the viewport at five rows plus four gaps. */
  max-height: 369px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 6px; padding-right: 3px;
  scrollbar-gutter: stable; -webkit-overflow-scrolling: touch;
}
.br-candidate-list .br-candidate { flex: 0 0 69px; touch-action: manipulation; }
.br-candidate, .br-search-result {
  width: 100%; min-width: 0; border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 7px; background: var(--app); display: flex; align-items: center; gap: 10px;
  color: var(--ink); text-align: left; cursor: pointer;
}
.br-candidate:hover, .br-search-result:hover { border-color: var(--accent); background: var(--surface-hi); }
.br-candidate:focus-visible, .br-search-result:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.br-candidate img, .br-search-result img { width: 38px; height: 53px; flex: none; border-radius: 5px; object-fit: contain; background: var(--surface); }
.br-candidate > span, .br-search-result > span { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.br-candidate strong, .br-search-result strong { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-candidate small, .br-search-result small { color: var(--muted); font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-candidate-metrics { flex: none !important; align-items: flex-end; text-align: right; }
.br-candidate-metrics > b { color: var(--price); font-size: 10px; white-space: nowrap; }
.br-candidate-metrics > small { color: var(--faint); font-size: 8.5px; white-space: nowrap; }
.br-search-result > svg { color: var(--link); flex: none; }
.br-modal-search { display: flex; flex-direction: column; gap: 7px; }
.br-modal-search .scan-search-box { border-width: 1px; }
.br-search-results { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.br-choice-modal .m-actions { border-top: 1px solid var(--hairline-2); padding-top: 12px; }
.br-choice-modal .m-actions .btn { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 620px) {
  .br-header { min-height: 78px; padding-left: 14px; padding-right: 14px; }
  .br-title-group p { display: none; }
  .br-header-actions [data-br-cancel],
  .br-header-actions [data-br-finish] { display: none; }
  .br-source { width: calc(100% - 24px); margin-top: 12px; padding: 10px; }
  .br-source-head { align-items: flex-start; margin-bottom: 8px; }
  .br-source-head > div { flex-direction: column; gap: 1px; }
  .br-source-head > span { max-width: 145px; font-size: 9.5px; text-align: right; }
  .br-map-legend { padding-top: 7px; }
  .br-reconcile { width: calc(100% - 24px); margin-top: 12px; gap: 6px; padding: 10px; flex-wrap: wrap; }
  .br-reconcile > div:not(.br-unresolved) { flex-direction: column; gap: 0; align-items: center; }
  .br-reconcile b { font-size: 17px; }
  .br-reconcile .final { margin-left: auto; }
  .br-unresolved { width: 100%; margin: 5px 0 0; text-align: center; }
  .br-grid { width: calc(100% - 24px); margin-top: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding-bottom: 72px; }
  .br-card-open { padding: 6px; gap: 6px; }
  .br-card-actions { padding: 6px; }
  .br-footer {
    position: fixed; z-index: 6; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); background: oklch(0.955 0.014 82 / .97);
    box-shadow: 0 -8px 24px oklch(0.35 0.03 60 / .09);
  }
  .br-footer > span { color: var(--muted); font: 10px var(--f-mono); }
  .br-footer-actions { display: flex; gap: 8px; }
  .br-footer .btn { min-width: 94px; padding: 10px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .br-image-wrap { transition: none; }
}

/* ---------- inventory export ---------- */
.pick-card-action { margin-top: 0; }
.pick-card-action small { font: 500 11px var(--f-mono); opacity: .8; }
.inv-col { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 14px 24px; display: flex; flex-direction: column; gap: 12px; }
.inv-col .vhead { padding: 16px 6px 0; }
.inv-sub { margin: 0 6px; color: var(--mid); font-size: 13.5px; max-width: 70ch; }
.inv-hint { font-size: 12px; color: var(--muted); }
.inv-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.inv-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.inv-ctl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.inv-ctl select, .inv-ctl input[type=text], .inv-rule input {
  font: 500 13px var(--f-body); color: var(--ink); background: var(--surface-hi);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; min-width: 0;
}
.inv-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; width: fit-content; }
.inv-seg button { font: 500 13px var(--f-body); padding: 7px 12px; border: 0; background: var(--surface-hi); color: var(--mid); cursor: pointer; }
.inv-seg button + button { border-left: 1px solid var(--line); }
.inv-seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.inv-seg.sm button { padding: 4px 9px; font-size: 12px; }
.inv-seg button:focus-visible, .inv-qty button:focus-visible, .inv-art:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.inv-rules { display: flex; flex-direction: column; gap: 10px; }
.inv-rules-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: baseline; }
.inv-rule-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-rule { display: flex; align-items: center; gap: 6px; border: 1px solid var(--hairline); background: var(--surface-hi); border-radius: 9px; padding: 5px 8px; }
.inv-rule b { font: 700 12px var(--f-mono); min-width: 2.6em; color: var(--ink); }
.inv-rule input[type=number] { width: 72px; padding: 5px 7px; }
.inv-round { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--mid); white-space: nowrap; }
.inv-round input { accent-color: var(--accent); margin: 0; }
.inv-check { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; }
.inv-check input { margin-top: 3px; accent-color: var(--accent); }
.inv-merge-file { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.inv-merge-file[hidden] { display: none; }
.inv-merge-file .btn { padding: 8px 14px; font-size: 13px; }
.inv-empty { background: var(--surface); border: 1px dashed var(--line); border-radius: 14px; padding: 28px 18px; text-align: center; color: var(--mid); }
.inv-other { margin: 0 6px 8px; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.inv-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.inv-art { position: relative; display: block; width: 100%; aspect-ratio: 63 / 88; padding: 0; border: 0; background: var(--surface-hi); cursor: zoom-in; }
.inv-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.inv-rar, .inv-qbadge { position: absolute; top: 8px; background: oklch(0.2 0.02 60 / 0.75); color: oklch(0.97 0.01 85); font-family: var(--f-mono); border-radius: 7px; }
.inv-rar { left: 8px; font-size: 11px; padding: 2px 7px; }
.inv-qbadge { right: 8px; font-size: 15px; font-weight: 700; padding: 2px 9px; border-radius: 99px; }
.inv-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.inv-nm { font-weight: 700; color: var(--ink); line-height: 1.25; overflow-wrap: anywhere; }
.inv-code { font: 11.5px var(--f-mono); color: var(--muted); }
.inv-ctrls { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.inv-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.inv-qty button { width: 30px; height: 30px; border: 0; background: var(--surface-hi); color: var(--ink); font-size: 16px; cursor: pointer; }
.inv-qty input { width: 40px; height: 30px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font: 700 13px var(--f-mono); color: var(--ink); background: var(--surface); -moz-appearance: textfield; }
.inv-qty input::-webkit-outer-spin-button, .inv-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.inv-pricebar { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; border-top: 1px solid var(--hairline); padding-top: 8px; }
.inv-lbl { display: block; font-size: 10.5px; color: var(--faint); }
.inv-sellwrap { text-align: right; }
.inv-sell { font: 700 18px var(--f-mono); color: var(--price); }
.inv-why { font-size: 11px; color: var(--muted); }
.inv-badge { font-size: 11px; line-height: 1.35; padding: 2px 8px; border-radius: 99px; width: fit-content; max-width: 100%; }
.inv-badge.warn { background: var(--warn-bg); color: var(--warn-ink); }
.inv-badge.info { background: var(--hairline-2); color: var(--mid); }
.inv-badge.good { background: var(--good-bg); color: var(--good-ink); }
.inv-foot {
  position: sticky; bottom: var(--tabbar-h, 0px); z-index: 5; display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px;
}
.inv-foot:empty { display: none; }
.inv-stat { display: flex; flex-direction: column; }
.inv-stat .v { font: 700 16px var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.inv-spacer { flex: 1; }
.inv-foot .btn { padding: 10px 16px; font-size: 13.5px; }
@media (max-width: 460px) {
  .inv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .inv-sell { font-size: 16px; }
  .inv-qty button { width: 26px; }
  .inv-qty input { width: 32px; }
}
@media (min-width: 980px) { .inv-foot { bottom: 12px; } }

.cloud-account{padding:12px 20px;font-size:12px;line-height:1.8;display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:center;color:var(--muted)}
.cloud-account a,.cloud-account button{color:var(--link);text-decoration:underline;cursor:pointer}.cloud-account button{font:inherit;background:none;border:0;padding:0}.hero .cloud-account{margin-top:16px}.cloud-account span{overflow-wrap:anywhere}