/* The app's one look: dark everywhere (web, iPhone and Android), whatever the device's light/dark setting. */
:root {
  color-scheme: dark;
  --bg: #121215;
  --surface: #1b1b20;
  --surface-2: #24242b;
  --text: #ededf0;
  --muted: #9b9aa5;
  --border: #2f2f37;
  --accent: #ff4a3d;
  --accent-ink: #ffffff;
  --ok: #4cc27f;
  --mid: #f0ad3a;
  --bad: #ff6a5e;
  --ok-bg: #173323;
  --bad-bg: #3a1a18;
  --warn-bg: #33290f;
  --warn-border: #6b5520;
  --shadow: none;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 Inter, system-ui, sans-serif;
}
h2 { margin: 0 0 6px; font-size: 22px; }
h3 { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
ul { margin: 0; padding-left: 18px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.app { max-width: 1200px; margin: 0 auto; padding: 0 16px 48px; }
.top { display: flex; align-items: center; gap: 16px; padding: 16px 0; flex-wrap: wrap; }
.brand { font-weight: 800; font-size: 20px; display: flex; align-items: center; gap: 12px; }
.logo { height: 56px; width: auto; display: block; }
nav { display: flex; gap: 4px; }
.nav, .subtab {
  border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600;
  padding: 8px 12px; border-radius: 8px; cursor: pointer;
}
.nav.on, .subtab.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.model-pill { margin-left: auto; font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.demo { background: var(--mid); color: #000; font-weight: 700; padding: 2px 8px; border-radius: 999px; font-size: 11px; }
.subtabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 24px; box-shadow: var(--shadow); }
.card.narrow { max-width: 420px; margin: 40px auto; display: grid; gap: 12px; }
.input {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; margin: 12px 0;
}
.row { display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 10px; }
.row .input { margin: 6px 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  padding: 9px 16px; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer;
}
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.ghost { background: transparent; }
.btn.danger { background: #b3261e; border-color: #b3261e; color: #fff; }
.link-btn { background: none; border: 0; padding: 4px; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: 14px; justify-self: center; }
.danger-zone { margin-top: 16px; }
.danger-zone summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.danger-zone form { display: grid; gap: 12px; margin-top: 12px; max-width: 460px; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.big { width: 100%; padding: 14px; font-size: 16px; margin-top: 16px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.grid-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
/* photo area: sections, tiles, progress */
.photo-area { display: grid; gap: 4px; }
.photo-progress { margin: 6px 0 4px; }
.photo-progress .progress-row { margin: 0 0 6px; align-items: center; }
.progress-fill.complete { background: var(--ok); }
.photo-section { margin-top: 14px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.section-head h4 { margin: 0; font-size: 15px; white-space: nowrap; }
.slot.corner .slot-add { display: none; }  /* the corner highlight already shows where to tap */
.photo-grid { display: grid; gap: 10px; }
.photo-grid.cover { grid-template-columns: repeat(2, minmax(0, 220px)); }
.photo-grid.corner { grid-template-columns: repeat(4, minmax(0, 150px)); }
.slot {
  position: relative; aspect-ratio: 3 / 4; border: 2px dashed var(--border); border-radius: 12px;
  background: var(--surface-2); cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: border-color .15s, transform .15s;
}
.slot.corner { aspect-ratio: 1 / 1; }
.slot:hover { border-color: var(--accent); transform: translateY(-1px); }
.slot.filled { border-style: solid; border-color: var(--ok); }
.slot-add {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font-weight: 800; line-height: 1;
}
.remove-btn {
  position: absolute; top: 6px; right: 6px; z-index: 1; width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer; font: 700 18px/1 Inter, sans-serif;
  background: rgba(0,0,0,.7); color: #fff;
}
.remove-btn:hover, .remove-btn:focus-visible { background: var(--bad); outline: none; }
.slot .check-badge { top: auto; bottom: 34px; right: 6px; }
/* comic illustrations (empty tiles, guided camera, intro strip) */
.comic-art { width: 72%; max-width: 150px; height: auto; margin-bottom: 18px; }
.slot.corner .comic-art { width: 80%; margin-bottom: 20px; }
.ca-cover { fill: var(--surface); stroke: var(--muted); stroke-width: 1.5; }
.ca-band { fill: var(--accent); }
.ca-band.soft, .ca-ink.soft { opacity: .45; }
.ca-ink { fill: var(--muted); opacity: .6; }
.ca-hero { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--accent); stroke-width: 1; }
.ca-frame { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.ca-dim { opacity: .45; }
.ca-zoom { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: var(--accent); stroke-width: 2.5; }
.ca-dot { fill: var(--accent); }
.ca-slab { fill: color-mix(in srgb, var(--muted) 18%, transparent); stroke: var(--muted); stroke-width: 1.5; }
.ca-label { fill: #2f6fd0; }
.ca-grade { fill: #fff; font: 800 10px Inter, sans-serif; }
.shot-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 72px)); gap: 6px; margin: 14px 0 4px; }
.shot-chip {
  aspect-ratio: 1 / 1; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; min-width: 0;
}
.shot-chip .comic-art { width: 88%; margin: 0; }
.shot-chip.more { font-weight: 800; color: var(--muted); }
.photo-tips { margin-top: 14px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; background: var(--surface-2); }
.photo-tips summary { cursor: pointer; font-weight: 700; }
.photo-tips ul { list-style: none; padding: 0; margin: 10px 0 2px; display: grid; gap: 10px; }
.photo-tips li { display: flex; gap: 10px; align-items: flex-start; }
.tip-check {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ok-bg); color: var(--ok); font-weight: 800; font-size: 12px;
}
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.slot.filled { cursor: grab; }
.slot.over { border-color: var(--accent); border-style: solid; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.slot.dragging { opacity: .4; }
.check-badge {
  position: absolute; top: 6px; right: 6px; font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; background: var(--mid); color: #000;
}
.photo-grid-wrap { position: relative; border-radius: 14px; outline: 2px dashed transparent; outline-offset: 6px; }
.photo-grid-wrap.over { outline-color: var(--accent); }
.sorting {
  position: absolute; inset: -6px; border-radius: 14px; display: grid; place-content: center; text-align: center;
  background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text); font-weight: 600;
}
.sorting .spinner { margin-bottom: 10px; }
.sort-note { margin-top: 10px; font-size: 14px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); }
.slot input { display: none; }
.slot-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; font-size: 12px; font-weight: 600;
  color: var(--text); text-align: center; line-height: 1.25;
}
.slot.filled .slot-label { background: linear-gradient(transparent, rgba(0,0,0,.7)); color: #fff; padding-top: 16px; }
.hint { font-size: 13px; color: var(--muted); }

.error { color: var(--bad); background: var(--bad-bg); padding: 10px 12px; border-radius: 10px; margin-top: 12px; }
.warn { background: var(--warn-bg); border: 1px solid var(--warn-border); padding: 10px 14px; border-radius: 10px; margin: 0 0 14px; font-size: 14px; }
.warn.bad { background: var(--bad-bg); border-color: var(--bad); }

.spinner-wrap { text-align: center; padding: 80px 16px; color: var(--muted); }
.spinner { width: 44px; height: 44px; border: 4px solid var(--border); border-top-color: var(--accent); border-radius: 50%; margin: 0 auto 16px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.grade-steps { list-style: none; padding: 0; margin: 8px auto 16px; max-width: 360px; text-align: left; }
.grade-steps li { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: var(--muted); }
.grade-steps li.now { color: var(--text); font-weight: 600; }
.grade-steps li.done { color: var(--text); }
.step-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.grade-steps li.now .step-dot { border-color: var(--accent); color: var(--accent); }
.grade-steps li.done .step-dot { background: var(--accent); border-color: var(--accent); color: #fff; }

/* results */
.result { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
.viewer { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.main-photo { background: var(--surface-2); border-radius: 10px; display: grid; place-items: center; height: 520px; overflow: hidden; }
.main-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.caption { text-align: center; font-size: 13px; color: var(--muted); margin: 6px 0; }
.thumbs { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.thumb { padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; aspect-ratio: 3/4; background: var(--surface-2); }
.thumb.on { border-color: var(--accent); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.defects { list-style: none; padding: 0; display: grid; gap: 8px; margin-bottom: 16px; }
.defects li { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; display: grid; gap: 4px; }
.defects li:hover { border-color: var(--accent); }
.defect-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.tag.fix { background: var(--ok-bg); color: var(--ok); }
.tag.perm { background: var(--bad-bg); color: var(--bad); }
.sev { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.sev-fill { height: 100%; border-radius: 999px; }
.sev-fill.ok { background: var(--ok); }
.sev-fill.mid { background: var(--mid); }
.sev-fill.bad { background: var(--bad); }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; position: sticky; top: 12px; box-shadow: var(--shadow); }
.panel section p { margin: 0; }
.panel-grade { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.badge { background: var(--accent); color: var(--accent-ink); border-radius: 12px; text-align: center; flex-shrink: 0; }
.badge.lg { width: 96px; padding: 12px 0; }
.badge.lg .num { font-size: 36px; font-weight: 800; line-height: 1; }
.badge.sm { width: 60px; padding: 6px 0; }
.badge.sm .num { font-size: 20px; font-weight: 800; line-height: 1.1; }
.badge .abbr { font-size: 12px; font-weight: 700; opacity: .9; }
.grade-name { font-size: 20px; font-weight: 700; }
.calib { font-size: 12px; margin-top: 6px; padding: 3px 8px; border-radius: 6px; display: inline-block; }
.calib.on { background: var(--ok-bg); color: var(--ok); }
.calib.off { background: var(--warn-bg); color: var(--text); }
.after-row { display: flex; align-items: center; gap: 10px; }
.arrow { font-size: 20px; color: var(--muted); }
.breakdown { display: grid; gap: 6px; }
.bd-row { display: grid; grid-template-columns: 1fr 120px; gap: 10px; align-items: center; font-size: 13px; }
.refs { display: grid; gap: 8px; }
.ref { display: flex; gap: 10px; align-items: center; }
.ref img { width: 40px; height: 54px; object-fit: cover; border-radius: 4px; }
.disclaimer { font-size: 12px; color: var(--muted); margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }

/* admin */
.confirm { display: grid; gap: 8px; margin-top: 12px; }
.confirm-info { display: flex; gap: 14px; align-items: center; }
.confirm-info img { width: 120px; max-height: 90px; object-fit: contain; border-radius: 6px; background: var(--surface-2); }
.table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; }
.table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.table th, .table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table .actions { display: flex; gap: 6px; justify-content: flex-end; }
.tiny { width: 34px; height: 46px; object-fit: cover; border-radius: 4px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 16px 0; }
.stat { background: var(--surface-2); border-radius: 12px; padding: 14px; }
.stat-num { font-size: 28px; font-weight: 800; }
.stat.hero.good { background: var(--ok-bg); }

/* bulk import */
.import-pick { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
.import-pick .input { margin: 12px 0; }
.tag.neutral { background: var(--surface-2); color: var(--muted); }
.filter-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 18px; }
.progress-box { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 4px; }
.progress { height: 12px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); transition: width .4s; }
.progress-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.row-buttons { display: flex; gap: 8px; }
details { margin-top: 12px; }

/* credits */
.center { text-align: center; }
.credit-pill {
  border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 13px;
  background: var(--accent); color: var(--accent-ink); padding: 4px 12px; border-radius: 999px;
}
.credit-cta { margin-top: 16px; padding: 14px; border-radius: 12px; background: var(--warn-bg); border: 1px solid var(--warn-border); }
.credit-cta .btn.big { margin-top: 10px; }
.credits-page { display: grid; gap: 16px; }
.pay-jump { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 12px 0; }
.pay-jump .btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; text-align: left; text-decoration: none; }
#pay-credits, #pay-slab { scroll-margin-top: 80px; }
.balance-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.balance { text-align: center; background: var(--surface-2); border-radius: 12px; padding: 10px 18px; }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 12px; margin-top: 18px; }
.pack {
  position: relative; border: 1px solid var(--border); border-radius: 14px; padding: 22px 14px 14px;
  text-align: center; display: grid; gap: 2px; background: var(--surface);
}
.pack.best { border: 2px solid var(--accent); }
.pack-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px;
}
.pack-badge.alt { background: var(--text); color: var(--bg); }
.pack.current { border: 2px solid var(--ok); }
.pack-badge.current { background: var(--ok); color: #fff; }
.pay-slab { display: grid; gap: 10px; }
.pay-sub-status { display: grid; gap: 8px; }
.pay-sub-status > .btn { justify-self: start; }
.pack-credits { font-size: 34px; font-weight: 800; line-height: 1; }
.pack-price { font-size: 22px; font-weight: 700; margin-top: 10px; }
.pack-save { font-size: 12px; font-weight: 700; color: var(--ok); min-height: 18px; margin: 4px 0 8px; }
.activity { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.activity h3 { margin-top: 0; }
.plain { list-style: none; padding: 0; display: grid; gap: 6px; }
.plain a { color: var(--accent); font-weight: 600; text-decoration: none; }
.table.compact td { padding: 5px 8px; }
td.plus { color: var(--ok); font-weight: 700; text-align: right; }
td.minus { color: var(--muted); text-align: right; }

/* photo modes & guided camera */
.mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.mode-option {
  position: relative; display: grid; gap: 6px; justify-items: center; text-align: center; padding: 26px 16px 18px; cursor: pointer;
  border: 2px solid var(--border); border-radius: 14px; background: var(--surface-2); color: var(--text); font: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.mode-option:hover, .mode-option:focus-visible { border-color: var(--accent); outline: none; transform: translateY(-2px); box-shadow: var(--shadow); }
.mode-option strong { font-size: 17px; }
.mode-icon {
  color: var(--accent); width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.mode-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px;
}
.mode-meta { font-size: 12px; font-weight: 600; color: var(--muted); border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; }
.guided-section { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.library-btn { margin: 4px 0 6px; cursor: pointer; }
.guided { display: grid; gap: 10px; }
.guided h2 { margin: 4px 0 0; }
.guided p { margin: 0; }
.guided-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dots { display: flex; gap: 6px; flex-wrap: wrap; }
.dot-step { width: 22px; height: 8px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: var(--border); }
.dot-step.done { background: var(--ok); }
.dot-step.on { background: var(--accent); }
.guided-view {
  height: min(52vh, 460px); border-radius: 12px; background: var(--surface-2); overflow: hidden;
  display: grid; place-items: center;
}
.guided-view img { max-width: 100%; max-height: 100%; object-fit: contain; }
.guided-diagram { width: min(70%, 300px); display: grid; place-items: center; }
.guided-diagram .comic-art { width: 100%; max-width: none; margin: 0; }
.guided-actions { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 8px; }
.guided-actions.two { grid-template-columns: 1fr 2fr; }
.guided-actions .btn, .guided > label.btn { padding: 14px; font-size: 16px; cursor: pointer; }
.back-btn { justify-self: start; }
.free-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.free-shot { position: relative; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }
.free-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.free-shot-x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 999px; border: 0; padding: 0;
  font: inherit; font-size: 15px; line-height: 22px; cursor: pointer; background: rgba(0, 0, 0, .7); color: #fff; }
.free-capture > label.btn.big { padding: 16px; font-size: 17px; }
.free-capture .guided-actions.two { grid-template-columns: 1fr; }
.move-btn {
  position: absolute; top: 6px; left: 6px; z-index: 1; font: inherit; font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(0,0,0,.65); color: #fff;
}
.slot.moving { outline: 3px solid var(--accent); outline-offset: 2px; }
.slot.target { border-color: var(--accent); border-style: dashed; }
.move-note { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 10px; }
.quality-warn { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--warn-bg); border: 1px solid var(--warn-border); }
.quality-warn ul { margin: 8px 0; }
.check-badge.lowres { background: var(--surface-2); color: var(--text); border: 1px solid var(--warn-border); }

.app-footer {
  margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--border); text-align: center;
  font-size: 12px; color: var(--muted); display: grid; gap: 4px;
}
.app-footer a { color: var(--muted); }
.site-link { text-decoration: none; color: var(--accent); }
.nav .short { display: none; }
.credit-cta .short { display: none; }  /* "Buy credits" fits on every screen (it showed "Buy credits Credits") */
.nav { white-space: nowrap; }  /* labels stay on one line; the menu wraps to a second row when it's narrow */
nav { flex-wrap: wrap; }
@media (max-width: 1100px) and (min-width: 641px) {  /* in-between widths: the short labels fit on one row */
  .nav .long { display: none; }
  .nav .short { display: inline; }
}
.press-cta {
  display: grid; gap: 2px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; text-decoration: none;
  background: var(--accent); color: var(--accent-ink);
}
.press-cta span { font-size: 13px; opacity: .92; }
.press-cta:hover { filter: brightness(1.08); }
.disclaimer-line { font-size: 11px; }

/* legal pages */
.legal { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
.legal h1 { font-size: 26px; margin: 8px 0 4px; }
.legal h2 { font-size: 18px; margin: 26px 0 6px; }
.legal p, .legal li { line-height: 1.6; }
.legal .draft { background: var(--warn-bg); border: 1px solid var(--warn-border); padding: 10px 14px; border-radius: 10px; }
.legal a { color: var(--accent); }
.legal-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; color: var(--text); }
.legal-brand img { height: 44px; }
.code-input { font-size: 24px; letter-spacing: .3em; text-align: center; }
.notice-ok { background: var(--ok-bg); color: var(--ok); font-weight: 600; margin-bottom: 14px; }
.agree { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 4px 0 8px; }
.agree input { margin-top: 3px; }
.agree a { color: var(--accent); }

/* analytics (palette: dataviz reference slots 1-2, validated against this app's card surfaces) */
.viz-root {
  --series-1: #3987e5;
  --series-2: #d95926;
  --viz-grid: #2c2c2a;
  --viz-base: #383835;
  --viz-muted: #898781;
}
.analytics { display: grid; gap: 16px; }
.analytics h3 { margin-top: 0; }
.viz-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.viz-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.viz-wrap { position: relative; }
.viz-svg { width: 100%; height: auto; display: block; }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-base { stroke: var(--viz-base); stroke-width: 1; }
.viz-tick { fill: var(--viz-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz-legend { display: flex; gap: 14px; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.viz-legend i, .viz-tip i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.viz-tip {
  position: absolute; z-index: 5; pointer-events: none; min-width: 120px; max-width: 200px; padding: 8px 10px;
  border-radius: 8px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  font-size: 12px; color: var(--text);
}
.viz-table summary { font-size: 12px; color: var(--muted); cursor: pointer; margin-top: 8px; }
.bar-list { display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 10px; align-items: center; font-size: 13px; }
.bar-label { color: var(--text); }
.bar-track { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bar-fill { height: 14px; min-width: 2px; background: var(--series-1); border-radius: 0 4px 4px 0; flex: none; }
.bar-value { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar-row:hover .bar-fill { filter: brightness(1.1); }
.small-stats .stat-num { font-size: 22px; }
.insights { display: grid; gap: 6px; }

/* phone access */
.phone-access { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; margin-top: 10px; }
.qr { background: #fff; padding: 12px; border-radius: 12px; width: max-content; }
.phone-url { font-size: 22px; font-weight: 800; letter-spacing: .02em; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); width: max-content; max-width: 100%; }

/* admin: promos, reports */
.promo-admin { margin-bottom: 16px; }
.promo-create { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; }
.promo-create label { display: grid; }
.promo-create .input { margin: 4px 0 0; }
.promo-create .wide { grid-column: span 3; }
.report { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; margin-top: 12px; }
.report-photos { display: flex; gap: 8px; }
.report-photos figure { margin: 0; text-align: center; font-size: 12px; color: var(--muted); }
.report-photos img { width: 130px; height: 170px; object-fit: contain; background: var(--surface-2); border-radius: 8px; }
.report-info { display: grid; gap: 6px; align-content: start; }
.report-info .input { margin: 0; max-width: 220px; }


/* collection & promo */
.collection { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.coll-item { display: flex; gap: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.coll-item img, .coll-noimg { width: 72px; height: 96px; object-fit: cover; border-radius: 6px; background: var(--border); flex: none; }
/* Raw books the customer added themselves: a cover thumbnail, and their own page with 10 photo spots */
.owned-noimg { display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px;
  border: 1px dashed var(--muted); background: var(--surface); color: var(--muted); font-size: 11px; line-height: 1.2;
  text-decoration: none; }
a:has(> .owned-noimg) { text-decoration: none; }
.raw-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.owned-empty { display: grid; gap: 10px; justify-items: start; }
.owned-form textarea.input { resize: vertical; font: inherit; }
.owned-page { display: grid; gap: 16px; }
.owned-back { justify-self: start; padding: 0; }
.owned-head { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.owned-cover img, .owned-cover .coll-noimg { width: 160px; height: 240px; object-fit: cover; border-radius: 8px; display: flex; }
.owned-cover img { cursor: zoom-in; background: var(--border); }
.owned-details { flex: 1; min-width: 240px; display: grid; gap: 4px; }
.owned-details h2 { margin: 0; }
.owned-notes { white-space: pre-wrap; margin: 6px 0 0; }
.owned-group h4 { margin: 14px 0 8px; }
.owned-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.owned-slots.two { grid-template-columns: repeat(2, minmax(0, 170px)); }
.owned-slot { position: relative; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; padding: 0; font: inherit; color: var(--text); cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); }
.owned-slots:not(.two) { max-width: 640px; }
.owned-slots:not(.two) .owned-slot { aspect-ratio: 1; }  /* corner close-ups */
.owned-slot.empty { border: 1.5px dashed var(--muted); }
.owned-slot.empty:hover { border-color: var(--accent); }
.owned-slot.filled img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.owned-slot.filled .owned-slot-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px;
  background: rgba(0, 0, 0, .6); color: #fff; }
.owned-slot-label { font-size: 12px; text-align: center; }
.owned-plus { font-size: 28px; line-height: 1; color: var(--accent); }
.grade-chip.own { background: transparent; border: 1px dashed currentColor; }  /* the customer's own guess, not a grading */
.owned-step { margin: 0 0 8px; }
.req { color: var(--accent); font-size: 11px; }
.regrade-note { margin: 10px 0; }
.add-wrap { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* My collection: on phones "+ Add a book" / "+ Add a slab" moves from beside the sort buttons to under the total value. */
.balance-add { display: none; }
@media (max-width: 600px) {
  .balance-add { display: block; width: 100%; margin-top: 8px; white-space: nowrap; }
  .raw-toolbar .add-btn { display: none; }
}
.limit-near { color: var(--accent); font-weight: 600; }
.plan-perks { margin: 4px 0 12px; padding-left: 20px; display: grid; gap: 4px; }
.own-grade { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.own-grade .link-btn { padding: 0; }
.own-grade select.input { width: auto; margin: 0; padding: 4px 8px; }
.issue-field { display: grid; gap: 4px; }
.issue-field .input:disabled { opacity: .5; }
.check-line { display: flex !important; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.owned-form .slab-grid > * { align-self: start; }
.check-line input { margin: 0; }
.variant-tag { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 7px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); vertical-align: 1px; }
.owned-cover-read { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 4px; }
.owned-cover-read img { width: 72px; height: 108px; object-fit: cover; border-radius: 6px; background: var(--border); flex: none; }
.owned-cover-read p { margin: 0 0 6px; }
.perk-locked { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px dashed var(--border);
  border-radius: 12px; background: var(--surface-2); margin-bottom: 4px; }
.perk-locked .mode-icon { opacity: .6; flex: none; }
.perk-locked p { margin: 4px 0; }
.perk-locked a { color: var(--accent); }
.perk-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); vertical-align: middle; }
.owned-big { width: 100%; max-height: 65vh; object-fit: contain; border-radius: 8px; background: var(--border); }
@media (max-width: 560px) {
  .owned-slots { gap: 6px; }
  .owned-slots:not(.two) .owned-slot-label { font-size: 10.5px; }
  .owned-slots.two { grid-template-columns: repeat(2, minmax(0, 140px)); }
  .owned-cover img, .owned-cover .coll-noimg { width: 120px; height: 180px; }
}
.coll-info { display: grid; gap: 4px; align-content: start; min-width: 0; }
.coll-title { font-weight: 700; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coll-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grade-chip { background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.up { color: var(--ok); } .down { color: var(--bad); }
.coll-info .btn { justify-self: start; }
.promo-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-top: 8px; }
.promo-form .input { margin: 0; }
.promo-form .sort-note, .promo-form .error { grid-column: 1 / -1; margin: 0; }

/* result actions, modals, print */
.result-actions { display: flex; gap: 8px; justify-content: flex-end; margin: -6px 0 10px; flex-wrap: wrap; }
.quote-btn { margin-top: 8px; background: var(--surface); border: 2px solid var(--accent); color: var(--text); text-decoration: none; box-sizing: border-box; }
.modal-back {
  position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 16px;
}
.modal { width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.modal form { display: grid; }
.modal .input { margin: 6px 0 10px; }
textarea.input { resize: vertical; font: inherit; }
.print-only { display: none; }
@media print {
  :root { --bg: #fff; --surface: #fff; --surface-2: #f3f3f3; --text: #111; --muted: #555; --border: #ccc; --shadow: none; }
  body { background: #fff; }
  .top, .app-footer, .no-print, .free-banner, .warn, .thumb, .move-btn { display: none !important; }
  .print-only { display: flex; }
  .print-head { align-items: center; gap: 14px; margin-bottom: 14px; border-bottom: 2px solid #d6281f; padding-bottom: 10px; }
  .print-head img { height: 54px; }
  .result { display: block; }
  .viewer, .panel { border: 0; box-shadow: none; padding: 0; position: static; }
  .main-photo { height: 320px; }
  .thumbs { display: none; }
  .defects li { break-inside: avoid; }
  .panel { margin-top: 16px; }
}

/* raw value */
.raw-value { margin: 4px 0 8px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.raw-value h3 { margin-top: 0; }
.value-main { font-size: 32px; font-weight: 800; line-height: 1.1; color: var(--ok); }
.raw-value p { margin: 6px 0 0; }
.value-sources { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.value-sources a { color: var(--accent); }
.pc-credit { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); }
.pc-credit a { color: var(--accent); font-weight: 600; }
.pc-credit { align-items: baseline; }
/* "from PriceCharting ↗" next to each of their prices (their rule): small, but always beside the number */
.value-from { font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; vertical-align: middle; }
.value-main .value-from, .stat-tile .value-from { font-size: 13px; }
th .value-from { font-size: 11px; text-transform: none; letter-spacing: 0; }
.price-src { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.pc-ungraded { color: var(--text); font-size: 15px; font-weight: 600; }
.pc-ungraded-price { color: var(--ok); font-size: 18px; font-weight: 800; margin-left: 6px; }
.pc-ungraded-price.big { font-size: 28px; margin: 0 6px 0 0; }
.slab-guide .guide-main { margin-bottom: 8px; }
.slab-guide .guide-main p { margin: 4px 0 0; }
.pc-editions { margin: 0 0 12px; }
.pc-editions ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; }
.pc-editions li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.pc-editions li.on { border-color: var(--ok); background: var(--ok-bg); }
.pc-editions .pc-ed-name { flex: 1 1 200px; }
.pc-editions .pc-ed-price { white-space: nowrap; }

/* free period */
.free-banner {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; margin-bottom: 14px;
  padding: 12px 16px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-size: 15px;
}
.free-banner strong { font-size: 17px; }
.free-card { margin-bottom: 16px; }
.free-card.on { border: 2px solid var(--ok); }
.free-status { padding: 8px 12px; border-radius: 10px; background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.free-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.free-form label { display: grid; }
.free-form .input { margin: 4px 0 0; }

/* binding */
.title-row { display: grid; grid-template-columns: 1fr 240px; gap: 10px; align-items: end; }
.binding-pick { display: grid; }
.binding-pick .input { margin: 2px 0 12px; }
.book-details { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px 12px; margin: 0 0 14px;
  display: flex; flex-wrap: wrap; gap: 6px 22px; }
.book-details legend { font-size: 13px; color: var(--muted); padding: 0 6px; }
.book-details .check { display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; min-height: 32px; }
.book-details .check input { width: 18px; height: 18px; accent-color: var(--accent); }
.sig-extra { flex-basis: 100%; display: grid; gap: 6px; padding-left: 26px; }
.sig-extra .input { margin: 0; max-width: 420px; }
.sig-extra .input.needs { border-color: var(--accent); }
.details-sub { flex-basis: 100%; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.detached-picks { grid-template-columns: repeat(auto-fit, minmax(180px, 220px)); gap: 0 12px; }
.cap-note ul { margin: 6px 0; padding-left: 18px; }
.label-box .label-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.label-box ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); }
.label-chip { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: #fff; }
.label-chip.universal { background: #1d5fbf; }
.label-chip.signature { background: #e3b505; color: #222; }
.label-chip.jsa { background: #e3b505; color: #111; border: 2px solid #111; box-shadow: inset 0 -4px 0 #111; }
.sig-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sig-list li { padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.sig-math { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); margin-top: 4px; }
.binding-note { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--warn-bg); }

/* reference comparison */
.ref-test { margin-top: 16px; }
.ref-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.mode-pill { white-space: nowrap; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.mode-pill.on { background: var(--ok-bg); color: var(--ok); }
.test-row { display: flex; gap: 8px; align-items: center; }
.test-row .input { max-width: 260px; margin: 6px 0; }
.verdict { padding: 10px 14px; border-radius: 10px; background: var(--surface-2); font-weight: 600; }
.verdict.good { background: var(--ok-bg); color: var(--ok); }
.mode-switch { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.compare { list-style: none; padding: 0; display: grid; gap: 8px; }
.compare .tag { margin-right: 4px; }

@media (max-width: 900px) {
  .import-pick { grid-template-columns: 1fr; }
  .title-row { grid-template-columns: 1fr; }
  .activity { grid-template-columns: 1fr; }
  .free-form { grid-template-columns: 1fr; }
  .viz-grid-2 { grid-template-columns: 1fr; }
  .mode-pick { grid-template-columns: 1fr; }
  .promo-create { grid-template-columns: 1fr 1fr; }
  .promo-create .wide { grid-column: span 2; }
  .report { grid-template-columns: 1fr; }
  .phone-access { grid-template-columns: 1fr; }
  .model-pill > span.small { display: none; }  /* the signed-in email doesn't fit on a phone (Sign out stays) */
  .photo-grid.cover { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-grid.corner { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .slot.corner .slot-label { font-size: 10px; padding: 4px 2px; }
  .slot.corner .remove-btn { width: 24px; height: 24px; top: 3px; right: 3px; font-size: 16px; }
  .slot.corner .check-badge { bottom: 26px; right: 3px; font-size: 9px; padding: 1px 5px; }
  .slot.corner .move-btn { top: 3px; left: 3px; width: 24px; height: 24px; padding: 0; font-size: 14px; display: grid; place-items: center; }
  .slot.corner .comic-art { margin-bottom: 16px; }
  /* the menu stays on one line and scrolls sideways instead of wrapping */
  nav { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .nav { white-space: nowrap; padding: 8px 10px; }
  .nav .long { display: none; }
  .nav .short { display: inline; }
  .top { gap: 10px; }
  .packs { grid-template-columns: repeat(2, 1fr); }
  .result { grid-template-columns: 1fr; }
  .panel { position: static; }
  .main-photo { height: 360px; }
  .thumbs { grid-template-columns: repeat(5, 1fr); }
  .row { grid-template-columns: 1fr; }
  .model-pill { margin-left: 0; width: 100%; flex-wrap: wrap; }  /* wraps instead of pushing Sign out off the screen */
  .table { display: block; overflow-x: auto; }
}

/* ---------- Value my slab ---------- */
.slabs-page { display: grid; gap: 16px; }
.slabs-intro ul { margin: 8px 0 12px; padding-left: 20px; }
.slabs-intro li { margin: 3px 0; }
label.mode-option { cursor: pointer; }
.sub-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 10px 14px; border-radius: 12px;
  background: var(--surface-2); font-size: 14px; }
.sub-status .link-btn { margin-left: auto; padding: 0; }
.sub-plans { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.sub-plans .pack-credits { font-size: 22px; }
.slab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 12px; margin: 8px 0 12px; }
.slab-grid label { display: grid; gap: 2px; }
.slab-grid .wide { grid-column: 1 / -1; }
.slab-grid .input { margin: 0; }
.slab-head { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: start; }
.slab-head h2 { margin: 0 0 2px; }
.slab-head .label-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.slab-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.stat-tile { padding: 16px; }
.stat-tile .stat-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.stat-tile .stat-num { font-size: 26px; font-weight: 800; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.stat-tile.hero .stat-num { font-size: 32px; }
.slab-result > .card + .card, .slab-result > .slab-stats + .card { margin-top: 16px; }
.slab-result .table td, .slab-result .table th { font-variant-numeric: tabular-nums; }
.slab-result tr.this-grade td { background: var(--surface-2); }
.viz-ref { stroke: var(--viz-muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.viz-dot { fill: var(--series-1); stroke: var(--surface); stroke-width: 2; }
.slab-history { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.slab-history li { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding: 10px 4px;
  border-bottom: 1px solid var(--border); }
.slab-history .hist-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.slab-history .hist-foot .countdown { flex: 1; min-width: 180px; max-width: 320px; }
.slab-history .hist-foot .booth-timer { font-size: 13px; }
.slab-history .hist-foot .booth-timer .section-icon { width: 16px; height: 16px; }
.hist-delete { margin-left: auto; padding: 0; font-size: 13px; }
.slabs-page .booth-warn { margin-bottom: 8px; }
.slab-history a { color: var(--text); text-decoration: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.slab-hist-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.slab-hist-vals { display: grid; gap: 2px; justify-items: end; text-align: right; font-variant-numeric: tabular-nums; }
.slab-hist-vals .hv-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.label-chip.restored { background: #6b3fa0; }
.label-chip.qualified { background: #2e8b3e; }
.label-chip.psa { background: #b3121f; }
.label-chip.psa-plain, .label-chip.unknown { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.label-chip.small { font-size: 11px; padding: 1px 8px; white-space: nowrap; }
.label-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 6px 0; }
.label-checks .check-line { display: inline-flex; align-items: center; gap: 6px; }
.label-checks.results { margin: 0 0 10px; }
.label-include { border: 0; padding: 0; margin: 4px 0 0; }
.label-include legend { padding: 0; margin-bottom: 2px; }
@media (max-width: 600px) {
  .slab-head { grid-template-columns: auto 1fr; }
  .slab-head > .btn { grid-column: 1 / -1; justify-self: start; }
}
.slab-result .card { overflow-x: auto; }
.year-group { border-top: 1px solid var(--border); padding: 4px 0; }
.year-group summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 8px 0; }
.year-group summary strong { font-size: 17px; }
.year-group .table { margin-top: 0; }

/* Value my slab: sales by grade, GPA-style. A grid on a computer; on a phone each row is a card. */
.gpa { --gpa-cols: minmax(150px, 1.5fr) repeat(4, minmax(78px, 1fr)) minmax(92px, 1fr) 28px; font-variant-numeric: tabular-nums; }
.gpa-year { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 8px; }
.gpa-year label { display: inline-flex; align-items: center; gap: 8px; }
.gpa-year .input { width: auto; margin: 0; padding: 4px 8px; }
.gpa-head, .gpa-main { display: grid; grid-template-columns: var(--gpa-cols); gap: 8px; align-items: center; }
.gpa-head { padding: 6px 10px; font-size: 12px; font-weight: 700; color: var(--muted); border-bottom: 2px solid var(--border); }
.gpa-head span:not(:first-child) { text-align: right; }
.gpa-row { border-bottom: 1px solid var(--border); }
.gpa-row.mine { background: var(--ok-bg); border-radius: 8px; }
.gpa-main { width: 100%; padding: 10px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.gpa-main:hover { background: var(--surface-2); }
.gpa-row.mine .gpa-main:hover { background: transparent; }
.gpa-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.gpa-grade { font-size: 17px; }
.gpa-note { font-size: 13px; color: var(--muted); flex-basis: 100%; }
.gpa-cell, .gpa-last { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.gpa-num { font-weight: 700; white-space: nowrap; }
.gpa-last strong { font-size: 16px; }
.gpa-n { font-size: 12px; color: var(--muted); white-space: nowrap; min-height: 1em; }
.gpa-lbl { display: none; }
.gpa-arrow { font-size: 11px; margin-left: 2px; }
.gpa-arrow.up { color: var(--ok); } .gpa-arrow.down { color: var(--bad); }
.gpa-chev { color: var(--muted); font-size: 18px; text-align: center; }
.gpa-detail { padding: 0 10px 12px; }
.gd-head, .gpa-detail li { display: grid; grid-template-columns: 64px minmax(0, 1.2fr) minmax(0, 1.2fr) 100px 120px; gap: 10px; align-items: baseline; }
.gd-head { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.gd-head span:nth-child(4) { text-align: right; } .gd-head span:nth-child(5) { text-align: right; }
.gd-year { border-top: 1px solid var(--border); }
.gd-year:first-of-type { border-top: 0; }
.gd-year-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 4px 6px; }
.gd-year-head strong { font-size: 15px; }
.gd-lbl { display: none; }
.gpa-detail ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.gpa-detail li { padding: 7px 10px; background: var(--surface-2); border-radius: 8px; font-size: 14px; }
.gpa-detail .gd-owner { min-width: 0; overflow-wrap: anywhere; }
/* Grade my book: the Comics Reborn value above PriceCharting's (0.85.0) */
.cr-value { margin: 6px 0 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--accent); background: var(--surface-2); }
.cr-value-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 4px; }
.cr-badge { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.cr-value .value-main { margin: 2px 0; }
.pc-head { margin-top: 4px; }
/* identical sales (one seller, one price, one month) in one row, opening to each copy (0.84.0) */
.gd-times { color: var(--muted); font-weight: 600; font-size: 13px; }
.gpa-detail .gd-copies { grid-column: 1 / -1; margin: 6px 0 0; gap: 2px; }
.gpa-detail .gd-copies li { background: transparent; border-top: 1px dashed var(--border); border-radius: 0; padding: 5px 0; font-size: 13px; }
.gpa-detail .gd-date { color: var(--muted); white-space: nowrap; }
.gpa-detail .gd-price { text-align: right; white-space: nowrap; }
.gpa-detail .gd-cert { justify-self: end; font-variant-numeric: tabular-nums; }
.gpa-detail .gd-where { min-width: 0; overflow-wrap: anywhere; }
.slab-result .card:has(> .gpa) { overflow-x: visible; }
.label-filter { margin: 0 0 8px; }
.label-filter summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 4px 0; }
.price-history-card summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.price-history-card summary h3 { margin: 0; }
.slab-foot { margin-top: 16px; }

@media (max-width: 640px) {
  .slab-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .slab-stats .stat-tile { padding: 10px; min-width: 0; }
  /* Estimated value, Last sold and 90-day average side by side */
  .slab-stats .stat-tile .stat-label { font-size: 10px; letter-spacing: .02em; }
  .slab-stats .stat-tile .stat-num, .slab-stats .stat-tile.hero .stat-num { font-size: 18px; overflow-wrap: anywhere; }
  .slab-stats .stat-tile .small { font-size: 11px; }
  .slab-stats .stat-tile .value-from { font-size: 11px; }
  .gpa-head { display: none; }
  .gpa-row { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; }
  .gpa-row.mine { border-color: var(--ok); }
  .gpa-main { position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "rate last" "c0 c1" "c2 c3";
    gap: 8px; padding: 12px; }
  .gpa-rating { grid-area: rate; }
  .gpa-last { grid-area: last; padding-right: 22px; }
  .gpa-chev { position: absolute; top: 10px; right: 12px; }
  .gpa-main > .gpa-cell:nth-of-type(2) { grid-area: c0; }
  .gpa-main > .gpa-cell:nth-of-type(3) { grid-area: c1; }
  .gpa-main > .gpa-cell:nth-of-type(4) { grid-area: c2; }
  .gpa-main > .gpa-cell:nth-of-type(5) { grid-area: c3; }
  .gpa-main > .gpa-cell { display: grid; grid-template-columns: 1fr; grid-template-areas: "lbl" "num" "n";
    align-items: baseline; text-align: left; background: var(--surface-2); border-radius: 8px; padding: 6px 10px; }
  .gpa-main.no-avgs { grid-template-areas: "rate last"; }
  .gpa-main.no-avgs > .gpa-cell { display: none; }  /* an old one-off sale: just its last sale, no empty boxes */
  .gpa-main > .gpa-cell { column-gap: 8px; }
  .gpa-cell .gpa-lbl { grid-area: lbl; }
  .gpa-cell .gpa-num { grid-area: num; font-size: 16px; }
  .gpa-cell .gpa-n { grid-area: n; }
  .gpa-lbl { display: block; font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; }
  .gpa-last .gpa-lbl { text-align: right; }
  .gpa-grade { font-size: 20px; }
  /* a sale on a phone: "Oct 2 · $70,150" on top, then where it sold (and who consigned it), then the cert # */
  .gd-head { display: none; }
  .gpa-detail li { grid-template-columns: 1fr auto; grid-template-areas: "date price" "where where" "owner owner" "cert cert"; gap: 2px 8px; }
  .gpa-detail .gd-owner { grid-area: owner; }
  .gd-lbl { display: inline; font-size: 11px; color: var(--muted); font-weight: 600; margin-right: 6px; }
  .gpa-detail .gd-date { grid-area: date; color: var(--text); font-weight: 600; }
  .gpa-detail .gd-price { grid-area: price; }
  .gpa-detail .gd-where { grid-area: where; }
  .gpa-detail .gd-cert { grid-area: cert; justify-self: start; }
  .gpa-detail { padding: 0 8px 10px; }
}
.year-extremes { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.year-extremes .ye { display: inline-flex; gap: 6px; align-items: baseline; }
.year-extremes .ye strong { font-variant-numeric: tabular-nums; }
.year-extremes .high strong { color: var(--ok); }
.year-extremes .low strong { color: var(--bad); }
.ye-tag { font-size: 10px; padding: 0 6px; vertical-align: 1px; }
.cert-link { display: inline-block; margin-top: 6px; font-size: 14px; color: var(--accent); }
.beta-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; line-height: 1.6;
  background: #2a78d6; color: #fff; }
h2 .beta-tag, h3 .beta-tag { font-size: 11px; vertical-align: 3px; }
.beta-tag.soon-tag { background: var(--mid); color: #2b1d00; }
.nav .beta-tag.soon-tag { white-space: nowrap; right: -18px; }
.nav { position: relative; }
.nav .beta-tag { position: absolute; top: -5px; right: -8px; margin: 0; font-size: 8px; padding: 0 4px; line-height: 1.5; pointer-events: none; }
.beta-note { color: var(--muted); border-left: 3px solid #2a78d6; padding: 4px 0 4px 10px; margin: 10px 0 0; }
.beta-note .beta-tag { margin: 0 4px 0 0; }
@media (max-width: 420px) {
  nav { gap: 2px; padding-top: 6px; }
  .nav { padding: 8px 7px; }
  .nav .beta-tag { top: -6px; right: -4px; }
}
/* ---------- Signed-in home page (computer) ---------- */
.brand { cursor: pointer; }
.dh { display: grid; gap: 16px; }
.dh-greet { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.dh-greet h2 { margin: 0 0 2px; font-size: 26px; }
.dh-greet p { margin: 0; }
.dh-free { color: var(--accent); font-weight: 700; }
.dh-expiring { color: var(--bad); font-weight: 600; margin: 2px 0 6px !important; }
.dh-services { display: grid; gap: 4px; margin-top: 6px; font-size: 14px; }
.dh-services > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.dh-services strong { min-width: 112px; }
.dh-services .link-btn { padding: 0; font-size: 13px; }
.dh-sub-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 12px; }
.dh-sub-info > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.dh-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dh-action { display: grid; gap: 4px; justify-items: start; align-content: start; text-align: left; padding: 16px; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); color: var(--text); font: inherit; }
.dh-action:hover { border-color: var(--muted); }
.dh-action .section-icon { width: 26px; height: 26px; color: var(--muted); margin-bottom: 4px; }
.dh-action strong { font-size: 16px; }
.dh-action.main { border: 2px solid var(--accent); }
.dh-action.main .section-icon { color: var(--accent); }
.dh-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.dh-grid.single { grid-template-columns: 1fr; }
.dh-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dh-card-head h3 { margin: 0 0 6px; }
.dh-attn { padding: 18px 20px; }
.dh-attn ul { list-style: none; padding: 0; margin: 0; }
.dh-attn li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0;
  border-top: 1px solid var(--border); }
.dh-attn img, .dh-thumb { width: 36px; height: 48px; object-fit: cover; border-radius: 5px; background: var(--surface-2); display: block; }
.dh-attn-info { display: grid; min-width: 0; }
.dh-attn-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-timer { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.dh-timer.urgent { color: var(--bad); background: var(--bad-bg); padding: 2px 8px; border-radius: 999px; }
.dh-attn .link-btn { padding: 0; font-size: 13px; white-space: nowrap; }
.dh-attn-acts { display: flex; gap: 12px; align-items: center; }
.dh-attn .dh-remove { color: var(--muted); }
.dh-side { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.dh-stat { display: grid; gap: 2px; text-align: left; padding: 14px 16px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--surface-2); color: var(--text); font: inherit; }
.dh-stat:hover { outline: 1px solid var(--border); }
.dh-stat-num { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.dh-how ol { margin: 8px 0 16px; padding-left: 20px; display: grid; gap: 8px; }
@media (max-width: 900px) {
  .dh-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dh-grid { grid-template-columns: 1fr; }
}
/* Home dashboard on a phone: the same page, stacked for a narrow screen. */
@media (max-width: 600px) {
  .dh { gap: 12px; }
  .dh-greet h2 { font-size: 22px; }
  .dh-greet > div { flex: 1 1 100%; }
  .dh-expiring { font-size: 13px; }
  .dh-services { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 4px 12px;
    gap: 0; margin-top: 10px; }
  .dh-services > div { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 8px 0; }
  .dh-services > div + div { border-top: 1px solid var(--border); }
  .dh-services strong { min-width: 0; grid-column: 1; }
  .dh-services .muted { grid-column: 1; font-size: 13px; }
  .dh-services .link-btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--accent); }
  .dh-actions { gap: 8px; }
  .dh-action { padding: 12px; }
  .dh-action strong { font-size: 15px; }
  .dh-attn { padding: 12px 14px; }
  .dh-attn li { grid-template-columns: auto 1fr auto; gap: 4px 10px; }
  .dh-attn-acts { grid-column: 2 / -1; justify-content: flex-end; gap: 16px; }
  .dh-attn .link-btn { font-size: 14px; padding: 4px 0; }
  .dh-card-head { display: grid; gap: 0; margin-bottom: 6px; }  /* heading, then "Watchlist and show finds" under it */
  .dh-card-head h3 { margin: 0; }
  .dh-side { gap: 8px; }
  .dh-last-grading { display: none; }  /* last grading: on the computer only */
  .dh-stat { padding: 10px 12px; }
  .dh-stat-num { font-size: 22px; }
}

/* ---------- Phone home screen + section menu ---------- */
.is-phone .top { flex-wrap: wrap; }
.is-phone .model-pill { flex-wrap: wrap; }
.is-phone .brand { flex: 1; min-width: 0; }
.section-icon { width: 22px; height: 22px; flex: none; }
.phone-home h2 { font-size: 20px; margin: 4px 0 12px; }
.section-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.section-card { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px; text-align: left;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
  font: inherit; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.section-card:active { background: var(--surface-2); }
.section-card .section-icon { width: 28px; height: 28px; color: var(--accent); }
.section-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.section-text strong { font-size: 17px; }
.section-text > span { font-size: 13px; color: var(--muted); line-height: 1.35; }
.section-chev { font-size: 24px; color: var(--muted); line-height: 1; }
.section-menu { position: relative; margin-left: auto; }
.header-tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.header-tools .section-menu { margin-left: 0; }
/* The alerts bell (AlertsBell): a red badge while there are alerts this device hasn't seen. */
.alerts-btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow); cursor: pointer; }
.model-pill .alerts-btn { width: 36px; height: 36px; }
.alerts-btn svg { width: 22px; height: 22px; }
.alerts-btn.has-new { border-color: var(--accent); }
.alerts-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
  border: 2px solid var(--bg); }
.alerts-list { padding: 0; border: 0; box-shadow: none; background: none; }
.alerts-list li { grid-template-columns: auto 1fr auto; gap: 4px 10px; }
.alerts-list .dh-attn-acts { grid-column: 2 / -1; justify-content: flex-end; gap: 16px; }
.alerts-list .link-btn { font-size: 14px; padding: 4px 0; }
.section-menu-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow); cursor: pointer; }
.section-menu-btn svg { width: 24px; height: 24px; }
.section-menu-btn.open { background: var(--surface-2); }
.section-menu-list { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 220px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.18);
  display: grid; }
.section-menu-list button, .section-menu-list a { display: flex; align-items: center; gap: 10px; padding: 11px 10px;
  border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-weight: 600; text-align: left;
  text-decoration: none; cursor: pointer; white-space: nowrap; }
.section-menu-list .beta-tag { margin-left: 0; }
.section-menu-list button:active, .section-menu-list a:active { background: var(--surface-2); }
.section-menu-list .section-icon { color: var(--muted); }
.section-menu-list a { border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; margin-top: 4px; }
.section-menu-list .menu-signout { border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; margin-top: 4px; white-space: normal; }
.section-menu-list .menu-signout > span { display: flex; flex-direction: column; min-width: 0; }
.menu-who { font-weight: 400; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Account page: who's signed in + Sign out */
.signout-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.signout-card h3 { margin: 0 0 4px; }
.signout-card p { margin: 0; overflow-wrap: anywhere; }

/* ---------- For sale on eBay (Grade my book results) ---------- */
.ebay-box { margin: 16px 0; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.ebay-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ebay-head h3 { margin: 0 0 8px; }
.ebay-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ebay-list a { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--border); color: var(--text); text-decoration: none; }
.ebay-list a:active { background: var(--surface-2); }
.ebay-list img, .ebay-noimg { width: 64px; height: 84px; object-fit: cover; border-radius: 6px; background: var(--border); flex: none; }
.ebay-info { display: grid; gap: 2px; min-width: 0; }
.ebay-title { font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.ebay-price { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.ebay-price strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.ebay-more { display: inline-block; margin-top: 10px; color: var(--accent); }
.ebay-note { margin: 6px 0 0; }

/* eBay sales behind a raw value */
.ebay-sold { margin-top: 8px; }
.ebay-sold summary { cursor: pointer; color: var(--accent); }
.ebay-sold ul { list-style: none; padding: 0; margin: 8px 0 4px; display: grid; gap: 6px; }
.ebay-sold li { display: grid; grid-template-columns: auto auto 1fr; gap: 2px 10px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid var(--border); }
.ebay-sold .es-price { font-weight: 700; font-variant-numeric: tabular-nums; }
.ebay-sold .es-grade { font-variant-numeric: tabular-nums; }
.ebay-sold .es-date { justify-self: end; }
.ebay-sold .es-title { grid-column: 1 / -1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Comic-con booth ---------- */
.booth-warn { margin: 0; display: grid; gap: 2px; border-left: 4px solid var(--mid); }
.booth-add { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.booth-add label.btn { cursor: pointer; }
.booth-add label.btn.disabled { opacity: .6; pointer-events: none; }
.booth-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; margin-top: 12px; }
.booth-item { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.booth-top { display: flex; gap: 12px; align-items: flex-start; }
.booth-photo { flex: none; display: block; }
.booth-photo img { width: 120px; height: 160px; object-fit: cover; border-radius: 8px; background: var(--border); display: block; }
.booth-side { display: grid; gap: 6px; min-width: 0; flex: 1; }
.booth-timer { display: flex; align-items: center; gap: 6px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.booth-timer .section-icon { width: 20px; height: 20px; color: var(--mid); }
.booth-timer.soon, .booth-timer.soon .section-icon { color: var(--bad); }
.booth-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.booth-bar i { display: block; height: 100%; background: var(--mid); border-radius: 3px; }
.booth-timer.soon + .booth-bar i { background: var(--bad); }
.countdown { display: grid; gap: 6px; }
.coll-info .countdown { margin: 2px 0; }
.collection-page .booth-warn { margin-bottom: 4px; }
.booth-remove { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 8px 14px;
  border: 1px solid var(--bad); border-radius: 10px; background: var(--bad-bg); color: var(--bad);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.booth-remove svg, .booth-retake svg { width: 18px; height: 18px; }
.booth-retake { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 8px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 700; cursor: pointer; }
.booth-retake:hover { border-color: var(--muted); }
.booth-retake.disabled { opacity: .6; pointer-events: none; }
.booth-remove:hover { background: var(--bad); color: #fff; }
.booth-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.booth-fields .booth-field:first-child { grid-column: 1 / -1; }
.booth-field { display: grid; gap: 2px; font-size: 13px; font-weight: 600; color: var(--muted); }
.booth-field .input { margin: 0; font-size: 16px; }  /* 16px stops iPhone from zooming in on the field */
.booth-state { min-height: 18px; }
.money-input { position: relative; display: block; }
.money-input .money-sign { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text);
  font-size: 16px; font-weight: 600; pointer-events: none; }
.money-input .input { padding-left: 26px; font-variant-numeric: tabular-nums; }
.booth-state .error-text { color: var(--bad); }

.sales-admin { display: grid; gap: 16px; }
.sales-totals { display: flex; gap: 28px; margin: 8px 0 14px; }
.sales-upload { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px 14px; align-items: end; }
.sales-upload label { display: grid; gap: 2px; }
.sales-upload .input { margin: 0; }
.sales-upload .check { display: flex; gap: 8px; align-items: center; min-height: 40px; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 8px 12px; margin: 10px 0 16px; }
.map-grid label { display: grid; gap: 2px; }
.map-grid .input { margin: 0; }
.map-grid .input.needs { border-color: var(--accent); }
.table-scroll { overflow-x: auto; }
tr.undone td { opacity: .5; text-decoration: line-through; }
tr.undone td.actions { text-decoration: none; }
.sales-admin > *, .slabs-page > * { min-width: 0; }  /* wide tables scroll inside their card instead of stretching it */
.subs-admin { display: grid; gap: 16px; }
.subs-admin > * { min-width: 0; }
.service-switch { border-left: 6px solid var(--ok); }
.service-switch.off { border-left-color: var(--bad); }
.service-switch .switch-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.service-switch h2 { margin: 0 0 4px; }
.service-switch .check { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 14px; }
.service-switch .check input { margin-top: 3px; }
/* Value my slab while it's switched off: a "Coming soon" page. */
.slabs-soon { text-align: center; padding: 28px 22px; }
.slabs-soon h2 { margin: 8px 0 10px; }
.slabs-soon p { max-width: 520px; margin-left: auto; margin-right: auto; }
.soon-badge { display: inline-block; padding: 5px 14px; border-radius: 999px; background: var(--mid); color: #2b1d00;
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.collect-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; margin: 12px 0; border-radius: 12px; border: 1px dashed var(--border); background: var(--surface-2); }
.collect-box.added { border-style: solid; border-color: var(--ok); }
.collect-box.added strong { color: var(--ok); }
.collection-page { display: grid; gap: 16px; }
.collection-page > * { min-width: 0; }
.coll-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.other-gradings summary { cursor: pointer; }
.other-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.other-list li { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 6px 0;
  border-bottom: 1px solid var(--border); }
.other-list img, .other-list .coll-noimg { width: 44px; height: 62px; object-fit: cover; border-radius: 4px; display: block; }
.other-list .other-info a { color: var(--text); font-weight: 600; text-decoration: none; }
.coll-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 14px; }
@media (max-width: 600px) {
  .coll-cats { gap: 6px; }
  .coll-cat { padding: 8px !important; }
  .coll-cat strong { font-size: 14px; line-height: 1.25; }
  .coll-cat span, .coll-cat .paid-sum { font-size: 11px !important; }
}
.bought-form { display: grid; gap: 12px; }
.collect-box .row-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.collect-box .row-buttons .btn { white-space: nowrap; }
.coll-cat { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; }
.coll-cat span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.coll-cat.on { border-color: var(--accent); background: var(--surface-2); box-shadow: inset 0 -3px 0 var(--accent); }
.slab-mini { width: 72px; height: 100px; border-radius: 6px; border: 2px solid var(--border); display: grid; place-items: center;
  align-content: center; gap: 6px; background: var(--surface-2); }
.slab-mini strong { font-size: 22px; }
.coll-actions a { color: var(--accent); }
.paid-line { display: flex; gap: 10px; align-items: center; margin: 2px 0 4px; }
.paid-line .link-btn { padding: 0; font-size: 13px; }
.paid-add { color: var(--accent) !important; text-decoration: none !important; }
.info-add { color: var(--muted); }
.paid-set { color: var(--ok); }
.money-filled .input, .money-filled .money-sign { color: var(--ok); font-weight: 700; }
/* Money in green, like "Paid": sold prices (Value my slab), totals (My collection), prices and offers (Offer builder) */
.sold-price { color: var(--ok) !important; }
.offer-price .money-input input { color: var(--ok); }  /* Offer builder: the price typed for each book */
.slab-photo.no-photo { display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 11px; }
.coll-details { margin: 2px 0 4px; }
.edit-coll { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.paid-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.paid-form .input { width: 110px; margin: 0; padding: 6px 8px; }
.paid-form .input.source-input { width: 260px; max-width: 100%; }
.paid-form .input.source-select { width: auto; max-width: 100%; }
.source-text { min-width: 0; overflow-wrap: anywhere; }
.source-text a { color: var(--accent); text-decoration: none; }
/* Verified dealer badge (header, every screen) and the dealer strip on the home page */
.dealer-flag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; color: #2b1d00;
  background: linear-gradient(135deg, #f7d774, #d4a017); box-shadow: 0 0 0 1px rgba(212, 160, 23, .55), 0 2px 8px rgba(212, 160, 23, .25); }
.dealer-flag svg { width: 14px; height: 14px; fill: #2b1d00; }
.dealer-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 14px;
  border-radius: 14px; border: 1px solid rgba(212, 160, 23, .55); background: rgba(212, 160, 23, .08); }
.dealer-strip-text { display: flex; flex-direction: column; flex: 1; min-width: 180px; }
/* Phone home, dealers: the eBay sales updater (0.82.0) */
.ebay-home { display: grid; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface); }
.ebay-home.todo { border-color: var(--accent); }
.ebay-home.loading { padding: 10px 14px; }
.ebay-home-top { display: flex; gap: 10px; align-items: flex-start; }
.ebay-home-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--surface-2); }
.ebay-home-icon svg { width: 20px; height: 20px; }
.ebay-home-text { display: grid; gap: 2px; min-width: 0; }
.ebay-home-text .small { color: var(--muted); overflow-wrap: anywhere; }
.ebay-home-btns { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ebay-home-btns .btn { flex: 1 1 auto; }
.dealer-strip .btn { margin-left: auto; }
/* Sign-in page: sign in as a collector or a dealer */
.signin-as { display: grid; gap: 4px; }
.signin-as .acct-types { margin: 0; }
/* Admin → Accounts */
.acct-requests { display: grid; gap: 10px; margin-bottom: 8px; }
.acct-request { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid rgba(212, 160, 23, .55); border-radius: 12px;
  background: rgba(212, 160, 23, .06); }
.acct-request-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.acct-links { display: flex; gap: 10px; flex-wrap: wrap; }
.acct-links a { color: var(--accent); }
.acct-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.acct-tools .input { max-width: 260px; margin: 0; }
.accounts-admin td.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.acct-blocked td { opacity: .7; }
.tag.new-tag { background: #2b6cb0; color: #fff; }
.tag.warn-tag { background: #c9a227; color: #1a1a1a; }
.danger-btn { color: var(--accent); }
.acct-banned-list { display: grid; gap: 10px; margin-bottom: 8px; }
.acct-banned { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: 12px; }
.acct-banned-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.strike-dots { display: inline-flex; gap: 4px; cursor: help; }
.strike-dots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--muted); display: inline-block; }
.strike-dots i.on { background: var(--accent); border-color: var(--accent); }
/* Account page: the customer's own strikes */
.strikes-card { border-color: var(--accent); }
.strikes-card ol { margin: 6px 0 0; padding-left: 20px; }
/* Admin: who's signed in, and sign out */
.admin-bar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
/* My account → dealer card: the business details with Edit */
.dealer-profile { margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.dealer-profile h4 { margin: 0; }
.dealer-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 16px; margin: 10px 0 6px; }
.dealer-details div { min-width: 0; }
.dealer-details dt { margin: 0; }
.dealer-details dd { margin: 0; overflow-wrap: anywhere; }
.dealer-details a { color: var(--accent); }
/* Admin → Backups: how full the server's data disk is */
.disk-bar { height: 10px; border-radius: 999px; background: var(--border); overflow: hidden; margin: 6px 0 8px; }
.disk-bar span { display: block; height: 100%; background: var(--ok); }
.disk-bar span.warn { background: var(--bad); }
/* Admin console (0.75.0): sections down the left on a computer, a grouped drop-down on a phone */
.admin-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.admin-nav { position: sticky; top: 12px; display: grid; gap: 14px; padding: 14px 10px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border); }
.admin-nav-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 8px 6px; border-bottom: 1px solid var(--border); }
.admin-nav-group { display: grid; gap: 2px; }
.admin-nav-title { padding: 2px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.admin-nav-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 7px 10px; border: 0; border-radius: 9px; background: none; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.admin-nav-item:hover { background: var(--surface-2); }
.admin-nav-item.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.admin-badge { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--mid); color: #1a1a1a; font-size: 12px; font-weight: 700; text-align: center; }
.admin-nav-item.on .admin-badge { background: var(--accent-ink); color: var(--accent); }
.admin-main { min-width: 0; display: grid; gap: 16px; align-content: start; }
.admin-main > * { min-width: 0; }
.admin-main .admin-bar { justify-content: space-between; margin: 0; }
.admin-pick, .admin-signout { display: none; }  /* the menu has the sign-out on a computer */
.admin-crumb strong { color: var(--text); }
@media (max-width: 900px) {
  .admin-layout { grid-template-columns: 1fr; gap: 12px; }
  .admin-nav { display: none; }
  .admin-pick { display: grid; gap: 2px; flex: 1 1 220px; }
  .admin-signout { display: inline-flex; }
  .admin-pick .input { margin: 0; }
  .admin-crumb { display: none; }
  .admin-main .admin-bar { align-items: flex-end; }
}
/* Lost connection bar (top of every screen) and the sign-in box that opens over the page */
.conn-bar { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center;
  justify-content: center; padding: 8px 16px; font-size: 14px; background: #c9a227; color: #1a1a1a; text-align: center; }
.conn-bar .link-btn { color: #1a1a1a; font-weight: 700; text-decoration: underline; }
.modal.reauth { max-width: 460px; }
.modal.reauth .card { box-shadow: none; border: 0; padding: 0; margin: 0; max-width: none; }
/* Offer builder (dealers) */
.offer-head { margin: 8px 0; }
.offer-name { max-width: 420px; }
.offer-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 14px; }
.offer-totals > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.offer-totals strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.offer-pct { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.offer-pct .input { width: 70px; margin: 0; padding: 4px 8px; font-size: 16px; }
.offer-amount { color: var(--accent); }
.offer-pct-label { margin-top: 6px; }
.offer-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.offer-item { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; }
.offer-photo img { width: 100%; border-radius: 8px; display: block; }
.offer-fields { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.offer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; }
.offer-price { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 8px; align-items: start; }
.pct-input { position: relative; display: block; }
.pct-input .input { padding-right: 26px; font-variant-numeric: tabular-nums; }
.pct-input .pct-sign { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.offer-final strong { font-size: 18px; color: var(--accent); font-variant-numeric: tabular-nums; padding-top: 6px; }
.offer-queue { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--border); }
.offer-queue.offline { border-color: #c9a227; background: rgba(201, 162, 39, .08); }
.offer-queue-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.offer-thumb img { width: 48px; height: 64px; object-fit: cover; border-radius: 6px; display: block; opacity: .75; }
.offer-thumb.sending img { opacity: 1; outline: 2px solid var(--accent); }
.offer-waiting { color: #c9a227; font-weight: 600; }
.offer-lots { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.offer-lot { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 12px; background: transparent; color: var(--text); font: inherit; }
.offer-lot:hover { border-color: var(--accent); }
.offer-foot { margin-top: 16px; }
.danger-link { color: var(--accent); }
@media (max-width: 640px) {
  .offer-totals { gap: 6px; }
  .offer-totals > div { padding: 8px; }
  .offer-totals strong { font-size: 16px; }
  .offer-pct { flex-wrap: wrap; gap: 2px 4px; font-size: 11px; }
  .offer-pct .input { width: 52px; }
  .offer-item { grid-template-columns: 90px 1fr; }
  .offer-grid { grid-template-columns: 1fr 1fr; }
  .offer-grid .booth-field:first-child { grid-column: 1 / -1; }
  .offer-grid .grade-field { grid-column: 1 / -1; }  /* grade names like "9.8 NM/M" need the full width */
  .offer-price { grid-template-columns: 1fr 1fr; }
  .offer-price > .booth-field:first-child { grid-column: 1 / -1; }  /* the price gets the full width, so cents fit */
  .offer-price .offer-final { grid-column: 1 / -1; }
}
/* Inside the iPhone / Android app: a full-screen photo viewer ("Open full size"), and room for the notch and
   home bar (the app draws under them). */
.photo-viewer { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .94); display: grid; place-items: center;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.photo-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.photo-viewer button { position: absolute; top: calc(env(safe-area-inset-top) + 10px); right: 12px; width: 44px; height: 44px;
  border-radius: 50%; border: 0; background: rgba(255, 255, 255, .15); color: #fff; font-size: 26px; }
.native-app body { padding-bottom: env(safe-area-inset-bottom); }
/* Support page (footer → Support) */
.support-page { display: grid; gap: 12px; }
.support-list { display: grid; gap: 10px; }
.support-item { display: flex; gap: 14px; align-items: center; margin: 0; color: var(--text); text-decoration: none; }
a.support-item:hover { border-color: var(--muted); }
.support-item .section-icon { width: 28px; height: 28px; color: var(--accent); flex: none; }
.support-item > span { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.support-item.soon .section-icon { color: var(--muted); }
.support-item .tag { justify-self: start; }
.support-version { text-align: center; }
/* Dealer sales reports (My sales, Admin → Dealer sales) and the Recruit / Veteran ranks */
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.bad { background: var(--bad-bg); color: var(--bad); }
.ok-text { color: var(--ok); }
.error-text { color: var(--bad); }
.danger-text { color: var(--bad) !important; }
.rank-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800;
  letter-spacing: .02em; vertical-align: middle; white-space: nowrap; }
.rank-tag.recruit { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.rank-tag.veteran { background: #f5c542; color: #2b1d00; }
.dealer-flag .rank-tag { margin-left: 2px; }
.rank-box { margin: 12px 0 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 14px; }
.rank-box.veteran { border: 1px solid #f5c542; }
.rank-progress { display: grid; gap: 8px; margin-top: 10px; }
.rank-progress .bar { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 3px; }
.rank-progress .bar span { display: block; height: 100%; background: var(--ok); }
.dsale-list, .dsale-admin { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.dsale-list li { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: start; padding: 10px 0;
  border-top: 1px solid var(--border); }
.dsale-list img { width: 56px; height: 76px; object-fit: cover; border-radius: 6px; background: var(--surface-2); }
.dsale-info { display: grid; gap: 2px; min-width: 0; }
.dsale-side { display: grid; gap: 6px; justify-items: end; }
.dsale-admin > li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 12px;
  border: 1px solid var(--border); border-radius: 12px; }
.dsale-admin > li.flagged { border-color: var(--bad); }
.dsale-admin a { color: var(--accent); }
.dsale-photos { display: flex; gap: 6px; }
.dsale-photos img { width: 72px; height: 96px; object-fit: cover; border-radius: 6px; background: var(--surface-2); display: block; }
.dsale-flags { margin: 4px 0 0; padding-left: 0; list-style: none; color: var(--bad); font-size: 13px; display: grid; gap: 2px; }
.dsale-acts { display: grid; gap: 6px; justify-items: end; }
.dsale-search { margin: 4px 0 12px; }
.dsale-vms { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; margin: 8px 0; }
.dsale-vms > div { display: grid; }
.dsale-vms strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.dsale-vms .btn { margin-left: auto; }
.dsale-reupload { margin-top: 10px; }
.dsale-reupload summary { cursor: pointer; }
.dsale-downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.dsale-downloads > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start;
  justify-items: start; min-width: 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.dsale-downloads .check-line { white-space: normal; align-items: flex-start; }
.dsale-books summary { cursor: pointer; color: var(--accent); margin: 6px 0; }
.sale-rules { margin: 10px 0; }
.price-rule { color: var(--mid); }
.sale-confirm { white-space: normal; align-items: flex-start; }
/* My sales: the dealer's own eBay sales (connect, then a checklist of sold slabs to confirm) */
.dsale-nophoto { display: grid; place-items: center; width: 56px; height: 76px; border-radius: 6px; background: var(--surface-2);
  color: var(--mid); font-size: 11px; text-align: center; }
.dsale-photos .dsale-nophoto { width: 72px; height: 96px; }
.esale-points { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.esale-tools { flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.esale-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 10px; }
.esale-list > li { display: grid; grid-template-columns: auto 56px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px;
  border: 1px solid var(--border); border-radius: 12px; }
.esale-list > li.off { opacity: 0.55; }
.esale-list > li img { width: 56px; height: 76px; object-fit: cover; border-radius: 6px; background: var(--surface-2); }
.esale-tick { display: grid; place-items: center; padding-top: 28px; }
.esale-tick input { width: 20px; height: 20px; }
.esale-body { min-width: 0; display: grid; gap: 4px; }
.esale-title { overflow-wrap: anywhere; }
.esale-list .slab-grid.compact { margin: 4px 0 0; gap: 8px 10px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
@media (max-width: 600px) {
  .esale-list > li { grid-template-columns: auto 56px minmax(0, 1fr); }
  .esale-list > li > .link-btn { grid-column: 2 / -1; justify-self: start; }
}
/* "Sold by <dealer>" credit (Value my slab) and the dealer's credit box (My sales) */
.sold-by a, a.venue-link { color: var(--accent); font-weight: 600; }
.credit-box { margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid #f5c542; background: var(--surface-2); }
.credit-box p { margin: 6px 0; }
.credit-preview { margin: 6px 0; }
.contrib-count { display: flex; gap: 14px; align-items: center; margin: 6px 0 14px; padding: 12px 14px; border-radius: 12px;
  background: var(--surface-2); }
.contrib-count > span:last-child { display: grid; gap: 2px; }
.contrib-num { font-size: 36px; font-weight: 800; line-height: 1; color: var(--ok); font-variant-numeric: tabular-nums; }
.credit-hint { padding: 8px 10px; border-radius: 10px; border: 1px solid #f5c542; }
.credit-form { display: grid; gap: 8px; margin-top: 8px; }
.credit-form label { display: grid; gap: 2px; }
@media (max-width: 600px) {
  .dsales-head { flex-direction: column; align-items: stretch; }
  .dsale-admin > li { grid-template-columns: 1fr; }
  .dsale-acts { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; }
  .dsale-info { overflow-wrap: anywhere; }
}
/* Value my slab: each sale opens its copy's sales history (by cert #). */
.sale-row { cursor: pointer; }
.sale-row:hover td, .sale-row:focus td { background: var(--surface-2); }
.sale-cert { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Auctions: the site picker, then eBay's search and filters. */
.auctions-page { display: grid; gap: 16px; }
.auction-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.auction-site { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 12px; cursor: pointer; font: inherit;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.auction-site.on { border: 2px solid var(--accent); padding: 11px 13px; }
.auction-pick { text-align: center; margin: 8px 0; }
.auction-chosen { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.auction-chosen .link-btn { padding: 0; }
.auction-soon h3 { margin-top: 0; }
.auction-search { display: flex; gap: 8px; margin-bottom: 10px; }
.auction-search .input { flex: 1; min-width: 0; }
.auction-formats { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 8px; }
.auction-row { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 8px; }
.auction-row label { display: grid; gap: 2px; flex: 1 1 140px; }
.auction-more { margin-bottom: 12px; }
.auction-more summary { cursor: pointer; color: var(--accent); margin-bottom: 8px; }
.auction-left { font-weight: 700; font-variant-numeric: tabular-nums; }
.auction-left.soon { color: var(--bad); }
.auction-go { color: var(--accent); }
/* Auctions: "+ Watch this auction" under each eBay auction (adds it to My watchlist at the top of Auctions). */
.auction-watch { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; padding: 6px 2px 0; }
.watch-btn { padding: 6px 12px; border-radius: 999px; border: 1px solid #3b6ea8; background: var(--surface-2); color: #9cc3f0;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.watch-btn:hover { border-color: #3987e5; color: #fff; }
.watch-btn.on { background: #2a78d6; border-color: #2a78d6; color: #fff; }
.watch-btn:disabled { opacity: .6; cursor: default; }
.watch-auctions h3, .graded-list h3 { margin-top: 0; }
.graded-list .coll-actions .up { font-weight: 700; }
/* My collection: series groups, "Move to another series", search */
.series-line { flex-wrap: wrap; }
.check-series { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 11px;
  border: 1px solid var(--accent); color: var(--accent); }
.series-form .series-new { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.paid-form .input.series-num { width: 110px; }
.series-groups { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.series-group { border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; }
.series-group > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 6px 0;
  list-style: none; }
.series-group > summary::-webkit-details-marker { display: none; }
.series-chevron { width: 10px; height: 10px; flex: none; margin: 0 2px; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
.series-group[open] .series-chevron { transform: rotate(45deg); }
/* My collection's sort choices: pill buttons, the chosen one in blue (red is for action buttons like "+ Add a book"),
   so they're easy to spot. */
.coll-sort { gap: 8px; align-items: center; }
.coll-sort-label { font-size: 13px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.coll-sort .subtab { padding: 7px 14px; border-radius: 999px; border: 1px solid #3b6ea8; background: var(--surface-2);
  color: #9cc3f0; font-weight: 600; box-shadow: none; }
.coll-sort .subtab:hover { border-color: #3987e5; color: #fff; }
.coll-sort .subtab.on { background: #2a78d6; border-color: #2a78d6; color: #fff; }
.series-tools { display: flex; justify-content: flex-end; margin-bottom: -4px; }
.series-group > .collection { margin-top: 8px; }
/* My collection: the search box with "All / Raw / Graded" (where to search) beside it, or under it on phones. */
.coll-search { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0 6px; }
.coll-search input { flex: 1 1 220px; margin: 0; min-width: 0; }
.scope-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--border); }
.scope-seg button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600;
  padding: 7px 14px; border-radius: 8px; cursor: pointer; }
.scope-seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border); }
@media (max-width: 600px) {
  .coll-search { flex-direction: column; align-items: stretch; gap: 10px; margin: 16px 0 14px; }
  .coll-search input { flex: none; }
  .scope-seg { display: grid; grid-template-columns: repeat(3, 1fr); }
  .raw-toolbar { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--border); }
  /* Sort buttons: a tidy 2 x 2 grid under a "Sort by" label. */
  .coll-sort { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .coll-sort-label { grid-column: 1 / -1; margin: 0; }
  .coll-sort .subtab { text-align: center; padding: 9px 8px; }
  .series-tools { margin: 6px 0 -2px; }
}
.search-head { margin: 14px 0 6px; font-size: 15px; }
.paid-sum { font-size: 12px; }
.slab-photo { display: block; border-radius: 10px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); flex: none; }
.slab-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slab-photo.md { width: 120px; height: 170px; }
.slab-photo.sm { width: 72px; height: 100px; }
.slab-photo.add { display: grid; place-items: center; text-align: center; cursor: pointer; border-style: dashed; color: var(--accent);
  font-size: 12px; font-weight: 600; padding: 6px; }
.slab-photo.add .error { font-size: 10px; }
/* Value my slab: the book's cover from an eBay listing when there's no photo of their own, key-issue tag (0.86.0) */
.slab-photo.cover { position: relative; }
.slab-photo.cover a { display: block; width: 100%; height: 100%; }
.slab-photo.cover .cover-add { position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 3px 4px; border-radius: 6px; cursor: pointer;
  background: rgba(0, 0, 0, .72); color: #fff; font-size: 11px; font-weight: 600; text-align: center; }
.key-tag { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px;
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #1a1a1a; background: var(--mid); }
.key-tag .key-icon { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; }
.key-note { margin: 2px 0 6px; }
.gpa-co { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.slab-form-photo { display: block; max-width: 160px; max-height: 220px; border-radius: 10px; margin: 6px 0 10px; border: 1px solid var(--border); }
.grade-chip.big { font-size: 13px; padding: 3px 10px; }
.hist-thumb { width: 34px; height: 46px; object-fit: cover; border-radius: 4px; flex: none; }
.hist-thumb.none { display: inline-block; background: var(--surface-2); border: 1px solid var(--border); }
@media (max-width: 600px) { .slab-photo.md { width: 92px; height: 130px; } }
.card.narrow.wide-form { max-width: 640px; }
.acct-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acct-type { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; }
.acct-type.on { border-color: var(--accent); background: var(--surface-2); box-shadow: inset 0 -3px 0 var(--accent); }
.acct-type:disabled { opacity: .5; cursor: not-allowed; }
.dealer-fields { display: grid; gap: 8px; }
.dealer-fields p { margin: 4px 0 0; }
.dealer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 8px 12px; }
.dealer-grid label { display: grid; gap: 2px; }
.dealer-grid .wide { grid-column: 1 / -1; }
.dealer-grid .input { margin: 0; }
.dealer-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800;
  background: #1f7a4d; color: #fff; letter-spacing: .03em; vertical-align: middle; }
.dealer-code { font: 700 22px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .08em; padding: 8px 14px; border-radius: 10px;
  background: var(--surface-2); border: 1px dashed var(--accent); display: inline-block; margin: 4px 0; }
.dealer-card.approved { border-left: 6px solid #1f7a4d; }
.dealer-card.pending { border-left: 6px solid #e3b505; }
.dealer-card.declined, .dealer-card.revoked, .dealer-card.expired { border-left: 6px solid var(--bad); }
.pack-bonus { font-size: 12px; font-weight: 700; color: #1f7a4d; }
.plan-credit-note { color: var(--ok); font-weight: 600; }
.price-was { text-decoration: line-through; color: var(--muted); font-size: 14px; margin-right: 6px; }
.dealers-admin { display: grid; gap: 16px; }
.dealers-admin > * { min-width: 0; }
.dealer-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 10px 14px; align-items: end; }
.dealer-settings label { display: grid; gap: 2px; }
.dealer-settings .input { margin: 0; }
.dealer-settings .check { display: flex; gap: 8px; align-items: center; min-height: 40px; }
.dealer-app { border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-top: 12px; display: grid; gap: 8px; }
.dealer-app.pending { border-left: 5px solid #e3b505; }
.dealer-app.approved { border-left: 5px solid #1f7a4d; }
.dealer-app-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.dealer-app-head h3 { margin: 0 0 2px; }
.dealer-app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 4px 14px; }
.dealer-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.dealer-links a { color: var(--accent); word-break: break-all; }
.dealer-checks { display: grid; gap: 4px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.code-inline { font-family: ui-monospace, Consolas, monospace; letter-spacing: .06em; }
.dealer-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dealer-actions .input { margin: 0; flex: 1 1 220px; }
.dealer-card a { color: var(--accent); }
.dealer-app > *, .dealer-app-grid > * { min-width: 0; overflow-wrap: anywhere; }
.dealer-app a { color: var(--accent); }
.dealer-team { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: grid; gap: 8px; }
.dealer-team h4 { margin: 0; }
.dealer-team p { margin: 0; }
.team-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.team-list li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.team-list li::before { content: none; }
.team-msg { overflow-wrap: anywhere; }
.admin-team { font-size: 13px; }
.team-list .link-btn { flex: none; white-space: nowrap; overflow-wrap: normal; }
.join-team p, .card.narrow p { overflow-wrap: anywhere; }
.human-check { display: grid; gap: 6px; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.robot-box { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); cursor: pointer; font-weight: 600; user-select: none; }
.robot-box input { width: 22px; height: 22px; accent-color: #1f7a4d; margin: 0; }
.robot-box svg { width: 26px; height: 26px; margin-left: auto; color: var(--muted); }
.robot-box.on { border-color: #1f7a4d; }
.robot-box.on svg { color: #1f7a4d; }
.ts-box { min-height: 65px; }
.keep-signed { margin-top: 2px; }

/* ---------- Partners ---------- */
.partners-page { display: grid; gap: 16px; }
.partner-list { display: grid; gap: 16px; }
.partner-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: start; }
.partner-logo { width: 120px; height: 120px; object-fit: contain; border-radius: 12px; background: #fff; padding: 10px;
  border: 1px solid var(--border); box-sizing: border-box; }
.partner-logo.none { display: grid; place-items: center; font-size: 34px; font-weight: 800; color: var(--muted);
  background: var(--surface-2); }
.partner-body { min-width: 0; display: grid; gap: 8px; }
.partner-body h3 { margin: 0; font-size: 20px; text-transform: none; letter-spacing: 0; color: var(--text); }
.partner-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.partner-message { margin: 4px 0; padding: 10px 14px; border-left: 4px solid var(--accent); background: var(--surface-2);
  border-radius: 0 10px 10px 0; white-space: pre-line; overflow-wrap: anywhere; }
.partner-message footer { margin-top: 6px; white-space: normal; }
.partner-owner { display: flex; align-items: center; gap: 12px; }
.partner-owner-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border);
  flex: none; }
.partner-link { font-weight: 600; justify-self: start; color: var(--accent); }
.partners-join a, .partners-admin form > p a { color: var(--accent); font-weight: 600; }
.partners-admin { display: grid; gap: 16px; }
.partners-admin textarea { resize: vertical; font: inherit; }
.partner-admin-row { border-top: 1px solid var(--border); padding: 14px 0; display: grid; gap: 10px; }
.partner-admin-row:first-of-type { border-top: 0; }
.partner-admin-preview .partner-card { box-shadow: none; margin: 0; }
.partner-admin-row label.btn { cursor: pointer; }
@media (max-width: 560px) {
  .partner-card { grid-template-columns: 1fr; }
  .partner-logo { width: 96px; height: 96px; }
}