/* "Holo gold" theme: one accent on a cool near-black, no gradients. Depth
   comes from stepping the surface shades (bg -> surface -> surface-2), not
   from glows. --accent-2/--accent-3 used to be a second (purple) and third
   (blue) accent; they're kept as names so existing rules still resolve, but
   now point at neutral greys so gold stays the only accent. The gradient
   tokens likewise survive only as aliases for a solid fill. */
:root {
  --bg: #0E1014;
  --sidebar: #0B0D10;
  --surface: #15181D;
  --surface-2: #1B1F25;
  --surface-3: #232830;
  --border: #262B33;
  --text: #E7E9EE;
  --text-soft: #B7BDC8;
  --text-muted: #8B93A1;
  --text-faint: #5E6674;
  --accent: #D9A441;
  --accent-hover: #E4B45A;
  --accent-ink: #0B0D10;
  --accent-2: #B7BDC8;
  --accent-3: #B7BDC8;
  --accent-gradient: var(--accent);
  --success: #5BBF8A;
  --success-bg: #14301F;
  --success-gradient: var(--accent);
  --danger: #E0626F;
  --danger-bg: #3A1A20;
  --warning: #E58A4E;
  --warning-bg: #33200F;
  --radius: 10px;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Consolas", monospace;
}

* { box-sizing: border-box; }

button, input, select, textarea { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  color: var(--text);
  background: var(--bg);
}

.app-shell {
  position: relative;
  z-index: 1;
  display: flex;
  height: 100vh;
}

/* Sidebar */
.sidebar {
  position: relative;
  width: 230px;
  transition: width 0.2s ease, padding 0.2s ease;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 22px;
  background: none;
  border: none;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
  text-align: left;
  border-radius: 8px;
}

.brand:hover .brand-name {
  color: var(--accent);
}

.brand-mark {
  display: block;
  width: auto;
  height: 32px;
  box-shadow: none;
}

.brand-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}

.nav-item:hover {
  background: var(--surface);
  color: var(--text);
}

.nav-item.active {
  background: var(--surface-2);
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}

.nav-highlight-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: var(--accent-gradient);
  color: #060710;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.nav-highlight-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
}

.nav-icon {
  width: 18px;
  text-align: center;
  opacity: 0.9;
}

.nav-group {
  display: flex;
  flex-direction: column;
}

.nav-group-toggle {
  width: 100%;
}

.nav-group-trailing {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.nav-group-arrow {
  opacity: 0.7;
  transition: transform 0.15s ease;
}

.nav-group-toggle.nav-group-open .nav-group-arrow {
  transform: rotate(180deg);
}

.nav-group.nav-group-active .nav-group-toggle {
  color: var(--accent);
}

.nav-submenu {
  display: none;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 2px 12px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}

/* An unconditional "display: flex" here would out-rank the browser's own
   [hidden] { display: none } default (an author-stylesheet rule always
   wins over a user-agent one, regardless of specificity) and the submenu
   would stay visible no matter what the hidden attribute said - toggling
   it in JS would then look like nothing happens. Keying display off
   :not([hidden]) instead keeps the two in sync. */
.nav-submenu:not([hidden]) {
  display: flex;
}

.nav-subitem {
  padding: 8px 12px;
  font-size: 13px;
}

.sidebar-footer {
  padding: 10px;
}

/* --- Hide the menu to a strip of icons (desktop) --- */
.sidebar-collapse-btn {
  position: absolute;
  top: 30px;
  right: -13px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-soft);
  box-shadow: inset 0 0 0 1px var(--border), 0 4px 12px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.sidebar-collapse-btn:hover,
.sidebar-collapse-btn:focus-visible { color: var(--accent); background: var(--surface); }
.sidebar-collapse-btn svg { transition: transform 0.2s ease; }

@media (min-width: 761px) {
  body.sidebar-collapsed .sidebar { width: 64px; padding: 20px 12px; }
  body.sidebar-collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }
  body.sidebar-collapsed .brand { justify-content: center; padding: 6px 0 22px; }
  body.sidebar-collapsed .brand-name { display: none; }
  body.sidebar-collapsed .brand-mark { height: auto; max-width: 34px; }
  body.sidebar-collapsed .nav-item,
  body.sidebar-collapsed .nav-highlight-btn {
    position: relative;
    justify-content: center;
    gap: 0;
    padding: 10px 0;
    font-size: 0;
    white-space: nowrap;
  }
  body.sidebar-collapsed .nav-icon { width: auto; font-size: 15px; }
  /* a count becomes a dot in the icon's corner */
  body.sidebar-collapsed .nav-badge {
    position: absolute;
    top: 5px;
    right: 7px;
    width: 8px;
    height: 8px;
    padding: 0;
    font-size: 0;
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--sidebar);
  }
  body.sidebar-collapsed .nav-group-trailing { position: static; margin: 0; }
  body.sidebar-collapsed .nav-group-arrow { display: none; }
  body.sidebar-collapsed .nav-submenu { margin: 2px 0; padding-left: 0; border-left: none; }
  body.sidebar-collapsed .sidebar-footer { padding: 10px 0; display: flex; flex-direction: column; align-items: center; }
  body.sidebar-collapsed .sidebar-footer .index-pill,
  body.sidebar-collapsed #currentUsername { display: none; }
  body.sidebar-collapsed #tourBtnApp,
  body.sidebar-collapsed #logoutBtn {
    position: relative;
    width: 40px !important;
    height: 32px;
    padding: 0;
    font-size: 0;
  }
  body.sidebar-collapsed #tourBtnApp::before { content: "?"; font-size: 14px; }
  body.sidebar-collapsed #logoutBtn::before { content: "\23FB"; font-size: 14px; }
  /* the page's name next to its icon, on hover */
  body.sidebar-collapsed .sidebar [data-tip]:hover::after,
  body.sidebar-collapsed .sidebar [data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    padding: 6px 10px;
    border-radius: 7px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), inset 0 0 0 1px var(--border);
    pointer-events: none;
  }
}

@media (max-width: 760px) {
  .sidebar-collapse-btn { display: none; }
}

.index-pill {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 12px;
  text-align: center;
}

.index-pill.index-pill-ready {
  color: var(--success);
  background: var(--success-bg);
  border-color: var(--success);
}

.index-pill.index-pill-building {
  color: var(--warning);
  background: rgba(229, 138, 78, 0.1);
  border-color: var(--warning);
}

/* Main */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar {
  padding: 20px 32px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.topbar h1 {
  font-size: 20px;
  margin: 0;
}

.topbar-currency {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-currency select {
  width: auto;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
}

/* Standalone public Help Guide page (help.html) - a lighter shell than the
   sidebar+topbar app layout, since this page stands alone and needs no
   navigation beyond a way back to the marketing site or into the app. */
.help-page-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px 60px;
}

.help-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
}

.help-page-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.help-page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.help-page-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel { display: none; }
.panel.active { display: block; }

.card-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
}

.card-block h2 {
  margin: 0 0 8px;
  font-size: 15px;
}

.subheading {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 16px 0 8px;
}

.muted { color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.small { font-size: 12px; }

.stat-row {
  display: flex;
  gap: 16px;
  margin-top: 18px;
}

.stat-row.wrap {
  flex-wrap: wrap;
}

.stat-row.wrap .stat {
  flex: 0 1 150px;
}

.stat {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  flex: 1;
}

.stat-value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--text);
}

.stat-value-sm {
  font-size: 15px;
  overflow-wrap: break-word;
}

.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.lang-flag {
  display: inline-block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
  vertical-align: middle;
}

/* Buttons */
.btn {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.btn:active:not(:disabled) { transform: translateY(1px); }

.btn:hover { border-color: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent-gradient);
  border-color: transparent;
  color: #060710;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.btn-scan {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-ink);
  font-weight: 600;
  display: block;
  margin: 16px auto 0;
}

.btn-scan:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.scan-buttons-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}
.scan-buttons-row .btn-scan { margin: 0; }

/* Scan Now - green, and gently pulsing while it's the next thing to do
   (folder picked, nothing scanned yet - see .scan-results-idle below) */
#scanBtn:not(.btn-scan-processing) {
  background: #2FBF68;
  color: #04170B;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(47, 191, 104, 0.28);
}
#scanBtn:not(.btn-scan-processing):hover:not(:disabled) { background: #3DD078; }
#scanBtn:disabled:not(.btn-scan-processing) { background: var(--surface-3); color: var(--text-muted); box-shadow: none; }
body:has(#scanResultsBlock.scan-results-idle) #scanBtn:not(:disabled):not(.btn-scan-processing) {
  animation: scanNowPulse 2.2s ease-in-out infinite;
}
@keyframes scanNowPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(47, 191, 104, 0.28), 0 0 0 0 rgba(47, 191, 104, 0.45); }
  50% { box-shadow: 0 6px 20px rgba(47, 191, 104, 0.28), 0 0 0 9px rgba(47, 191, 104, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body:has(#scanResultsBlock.scan-results-idle) #scanBtn { animation: none !important; }
}

/* Scanned cards waits, dimmed, until a scan starts */
.scan-results-block { transition: opacity 0.3s ease, filter 0.3s ease; }
.scan-results-block.scan-results-idle { opacity: 0.38; filter: saturate(0.4); user-select: none; }

/* Scan & Match summary strip - the three running totals and the two scan
   buttons share one surface, split by thin dividers, instead of three
   separate bordered stat boxes plus a centered button row below them. */
.scan-summary {
  display: flex;
  margin-top: 18px;
  background: var(--surface-2);
  border-radius: var(--radius);
}
.scan-summary-stat {
  flex: 1 1 0;
  min-width: 0;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.scan-summary-stat + .scan-summary-stat,
.scan-summary-actions {
  border-left: 1px solid var(--border);
}
.scan-summary .stat-label { margin: 0; font-size: 13px; }
.scan-summary .stat-value { font-size: 28px; }
.scan-summary-actions {
  flex: 1.5 1 0;
  min-width: 0;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.scan-summary .scan-buttons-row { justify-content: stretch; margin: 0; gap: 10px; }
.scan-summary .scan-buttons-row .btn { flex: 1 1 auto; white-space: nowrap; padding-left: 14px; padding-right: 14px; }
.scan-summary .progress-row { margin: 0; flex-direction: column; align-items: stretch; gap: 6px; }
.scan-summary .progress-track { height: 3px; }
.scan-summary #scanProgressLabel { font-family: var(--font-mono); white-space: normal; }

.btn-scan-secondary {
  background: var(--surface-3);
  border-color: transparent;
}
.btn-scan-secondary:hover:not(:disabled) { background: #2A3038; border-color: transparent; }

/* A text-only button (Undo, "View all listings") - for secondary actions
   that shouldn't carry a whole button's visual weight. */
.btn.btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--text-soft);
  padding-left: 0;
  padding-right: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn.btn-link:hover { color: var(--text); border-color: transparent; }

.pill-toggle.pill-toggle-sm { border-radius: 6px; border-color: transparent; background: var(--bg); padding: 2px; }
.pill-toggle-sm .pill-toggle-option span { padding: 5px 11px; font-size: 12px; border-radius: 4px; }
.pill-toggle-sm .pill-toggle-option input:checked + span { background: var(--surface-3); color: var(--text); font-weight: 600; }

/* Scan & Match per-card layout pieces (see renderScanResults in app.js). */
.scan-result-head { display: flex; flex-direction: column; gap: 5px; }
.scan-result-head .match-score { font-size: 13px; color: var(--text-muted); }
.match-score-pct { color: var(--accent); font-weight: 600; }
.scan-result-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 12px;
  align-items: end;
}
.scan-result-fields .type-row { margin: 0; border: none; padding: 0; gap: 12px; }
.scan-result-main > .btn { align-self: flex-start; }
.scan-result-fields .field-label,
.scan-result-price-inputs .field-label { margin-top: 0; font-size: 12px; }
.scan-result-price-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 12px;
  align-items: start;
}
.your-price-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.your-price-label-row .field-label { margin: 0; }
.your-price-label-row .btn-link { padding-top: 0; padding-bottom: 0; }
.scan-result-field-note { display: block; font-size: 11px; color: var(--text-faint); }
.scan-result-price-inputs .binder-cell-price-hint { min-height: 0; }

.price-block-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.price-block-header .price-source-label { margin: 0; }
.price-block-header .btn-link { padding-top: 0; padding-bottom: 0; }
.price-block-link { font-size: 12px; color: var(--text-soft); text-underline-offset: 3px; }
.price-block-link:hover { color: var(--text); }
.price-block-headline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.price-block-median { font-size: 22px; font-weight: 600; letter-spacing: -0.4px; }
.price-block-meta { font-size: 12px; color: var(--text-muted); }
.price-block-none { font-size: 15px; font-weight: 500; color: var(--text-muted); }
.accept-price-label { font-size: 11px; font-weight: 500; color: var(--text-muted); line-height: 1.2; text-align: center; }
.scan-result-price-cols .accept-price-row .btn:hover { background: #2A3038; }
.scan-result-price-cols .accept-price-row .btn.is-accepted { border-color: var(--accent); }
.accept-price-btn.is-accepted .accept-price-label { color: var(--accent); }

.scan-result-actions .btn { width: 100%; padding-top: 8px; padding-bottom: 8px; font-size: 13px; }
.scan-result-actions .btn-accept {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-ink);
  font-weight: 600;
  padding-top: 10px;
  padding-bottom: 10px;
}
.scan-result-actions .btn-accept:hover { background: var(--accent-hover); color: var(--accent-ink); }
.scan-result-actions .scan-result-reject { margin-top: auto; }

/* Batch actions under the scanned-card list, one labelled row per kind of
   action (prices / review / organize / export) instead of one long
   wrapping row of unrelated buttons. */
.scan-batch {
  margin-top: 20px;
  background: var(--surface-2);
  border-radius: var(--radius);
}
.scan-batch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.scan-batch-header h3 { margin: 0; font-size: 15px; font-weight: 600; }
.scan-batch-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.scan-batch-row:last-child { border-bottom: none; }
.scan-batch-label { flex: 0 0 130px; font-size: 13px; color: var(--text-muted); padding-top: 9px; }
.scan-batch-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.scan-batch-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.scan-batch-inline-label { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.scan-batch-divider { width: 1px; align-self: stretch; background: var(--border); margin: 2px 4px; }



.btn-live-scan-active {
  background: var(--danger) !important;
  animation: liveScanPulse 1.6s ease-in-out infinite;
}
.btn-live-scan-active:hover { background: var(--danger) !important; }
@keyframes liveScanPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 98, 111, 0.55); }
  50% { box-shadow: 0 0 0 8px rgba(224, 98, 111, 0); }
}

.btn-scan-processing,
.btn-scan-processing:hover,
.btn-scan-processing:disabled {
  background: var(--surface-3) !important;
  color: var(--accent) !important;
  opacity: 1;
  cursor: not-allowed;
  transform: none;
  animation: scanProcessingPulse 1.6s ease-in-out infinite;
}
@keyframes scanProcessingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 164, 65, 0.55); }
  50% { box-shadow: 0 0 0 8px rgba(217, 164, 65, 0); }
}

.plan-status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--warning-bg);
  border-bottom: 1px solid var(--warning);
  color: var(--text);
  padding: 10px 24px;
  font-size: 13px;
}
.plan-status-banner .btn { flex-shrink: 0; }

.btn-outline { background: transparent; }

.btn-lg { padding: 12px 22px; font-size: 14px; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

.btn-spinner {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 6px;
  vertical-align: -1px;
  border: 2px solid rgba(234, 238, 250, 0.3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: btnSpin 0.7s linear infinite;
}
@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

/* Folder rows */
.folder-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0;
}

.folder-path {
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* Progress */
.progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.progress-track {
  flex: 1;
  height: 8px;
  background: var(--surface-2);
  border-radius: 6px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent-gradient);
  transition: width 0.2s ease;
}

#scanProgressLabel, #indexProgressLabel {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Card index build activity log - scrolling file-install-style box */
.install-log {
  margin-top: 14px;
  height: 220px;
  overflow-y: auto;
  background: #0B0D16;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted);
}

.install-log .log-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.install-log .log-line:last-child {
  color: var(--text);
}

/* Chips (filename order builder) */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chip:hover {
  border-color: var(--accent);
}

.chip.in-order {
  background: var(--surface-3);
  border-color: var(--accent);
  color: var(--accent);
}

.field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.field-row select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
}

.preview-line {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
}

/* Review grid */
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.review-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}

/* ---------------------------------------------------------------------
   Manage Users
--------------------------------------------------------------------- */
.user-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
}

.user-row-info {
  flex: 1;
  min-width: 0;
}

.user-row-name {
  font-size: 14px;
  font-weight: 600;
}

.user-row-verified {
  white-space: nowrap;
}

.user-role-select {
  width: auto;
}

.user-grant-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.user-grant-select {
  width: auto;
}

.compare-row {
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
}

.compare-col {
  flex: 1;
  min-width: 0;
}

.compare-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}

.compare-col img {
  width: 100%;
  border-radius: 8px;
  display: block;
}

/* Plain <img> directly inside a review-card (Moderate, Price Lookup) -
   .compare-col img above only covers the Review tab's side-by-side layout,
   so this needs its own rule or these images render at native photo
   resolution and overflow the card. */
.review-card > img {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  margin-bottom: 10px;
  background: var(--surface);
}

.review-card .orig-name {
  font-size: 12px;
  color: var(--text-muted);
  word-break: break-all;
  margin-bottom: 6px;
}

.review-card .match-name {
  font-size: 14px;
  font-weight: 600;
  margin: 6px 0 2px;
  font-family: var(--font-mono);
}

.review-card .match-score {
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 8px;
}

.name-edit-input, .text-input, textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-mono);
  margin: 6px 0 10px;
}

/* input[type=search] (e.g. the Wanted board's Name filter - see
   wantedFilterNameInput in app.html, switched from type=text specifically
   to sidestep Chrome's payment-card autofill heuristic) renders with its
   own native chrome in WebKit/Blink otherwise - reset it back to looking
   exactly like every other .text-input. */
input[type="search"].text-input {
  -webkit-appearance: none;
  appearance: none;
}

textarea {
  resize: vertical;
}

/* Base dark-theme treatment for every native <select> in the app - colors,
   the custom arrow, and dark option-list colors only. Deliberately no
   width or margin here (see the more specific #panel-settings rule right
   below) so this can't resize any select that currently relies on the
   browser's own default sizing - a select with its own more specific rule
   (.sort-select, #panel-settings select, etc.) still wins wherever it sets
   something itself; this only fills in what it doesn't. */
select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 28px 6px 10px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237C86A6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

select option {
  background: var(--surface);
  color: var(--text);
}

select:hover { border-color: var(--accent); }
select:focus { outline: none; border-color: var(--accent); }

/* Scoped to eBay Settings rather than a bare `select` rule - several
   selects elsewhere (.sort-select, .field-row select, the topbar currency
   picker) rely on the browser's own default width/margin and don't set
   their own, so a page-wide rule would silently resize them too. */
#panel-settings select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-mono);
  margin: 6px 0 10px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a93a8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  cursor: pointer;
}

#panel-settings select option {
  background: var(--surface);
  color: var(--text);
}

.name-edit-input:focus, .text-input:focus, textarea:focus, #panel-settings select:focus {
  outline: none;
  border-color: var(--accent);
}

.field-label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 12px;
}

.ebay-price-block {
  margin: 8px 0;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.price-source-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.accept-price-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.accept-price-row .btn {
  flex: 1;
  white-space: nowrap;
}

.accept-price-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.accept-price-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}

.hero-price {
  font-size: 30px;
  font-weight: 800;
  color: var(--success);
  line-height: 1.15;
  margin: 6px 0 10px;
}

/* ---------------------------------------------------------------------
   Scan & Match unified results - one dense row per card (thumbnails,
   match info + price, action buttons) instead of a multi-column card
   grid, closer to a bulk-listing tool's table now that scanning, matching,
   and pricing all happen together in one screen.
--------------------------------------------------------------------- */
.scan-result-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.scan-result-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 190px;
  gap: 24px;
  background: var(--surface-2);
  border-radius: 10px;
  padding: 20px;
  align-items: stretch;
}

.scan-result-row.scan-result-saved {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}

.scan-result-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}

.scan-result-thumbs .thumb-row {
  display: flex;
  gap: 8px;
}

.scan-result-thumbs .thumb-col {
  width: 140px;
  text-align: center;
}

/* One thumbnail (Match, for a double-sided card - see renderScanResults in
   app.js and matchThumbHtml's colClass argument) sits large in its own row
   below Yours/Back rather than a third column beside them, so it's easier
   to visually compare against Yours without both being squeezed down to
   fit three across - freeing up that horizontal space is also why
   Yours/Back could grow past the old single-row width, since there are
   only ever two thumb-cols sharing a row now. */
.scan-result-thumbs .thumb-col-large {
  width: 288px;
}

.scan-result-thumbs img {
  width: 140px;
  height: 196px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  background: var(--surface);
}

.scan-result-thumbs .thumb-col-large img {
  width: 288px;
  height: 403px;
}

.thumb-col-large .thumb-placeholder {
  width: 288px;
  height: 403px;
}

.thumb-placeholder {
  width: 140px;
  height: 196px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
  padding: 6px;
}

.thumb-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 6px;
}

.zoom-thumb-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 3px 0;
  font-size: 11px;
}

/* Scan & Match, double sided: the front with its back tucked behind it */
.thumb-sides { position: relative; display: block; width: 140px; height: 196px; }
.scan-result-thumbs .thumb-sides img { position: absolute; }
.scan-result-thumbs .thumb-sides .thumb-sides-back { right: 0; top: 0; width: 92px; height: 129px; opacity: .9; cursor: zoom-in; }
.scan-result-thumbs .thumb-sides .thumb-sides-front { left: 0; bottom: 0; width: 124px; height: 174px; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.thumb-btn-pair { display: flex; gap: 6px; }
.pl-sides-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.pl-sides-row .field-label { margin: 0; min-width: 96px; }
#priceLangRow { margin-top: 16px; }
#priceLangRow + .pl-sides-row { margin-top: 10px; }
#priceLangSelect { min-width: 220px; margin: 0; }
.thumb-btn-pair .zoom-thumb-btn { flex: 1; min-width: 0; white-space: nowrap; }


/* Price Lookup's card grid - narrower, capped columns instead of
   review-grid's shared minmax(480px, 1fr) default (which stretches too
   wide once fewer than 3 fit a row, wasting space inside each card) - only
   Price Lookup opts into this via the extra class, Moderate is untouched.
   #pricingGrid (an id, not just the class) so this can never lose a
   specificity tie against .review-grid or anything else targeting the
   grid generically. */
#pricingGrid.price-lookup-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 360px));
  gap: 14px;
}
.price-lookup-grid .review-card { padding: 12px; }

/* Compact "accept this price" chips (Price Lookup) - the value itself is
   the button, no separate label+button pair, and they wrap onto a new
   line instead of overflowing/overlapping if a card is ever narrower than
   three chips' natural width. */
.price-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.price-chip-row .btn.price-chip {
  padding: 3px 7px;
  font-size: 11px;
  white-space: nowrap;
}

/* eBay/TCGplayer detail blocks stack full-width in Price Lookup's narrow
   card (rather than the side-by-side two-column split Scan & Match uses
   in its own wider row) - splitting them in half here left too little
   width per side once the card itself got narrower to fix the "cards
   stretch too wide" issue, causing the old accept-buttons to overlap. */
.price-card-price-block { padding: 8px 0; }

/* Price Lookup's card panel - Yours/Match thumbnails beside a big price,
   sized smaller than Scan & Match's own thumb-row (140px) to fit this
   narrower card alongside a price column, not a full-width row. */
.price-card-top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.price-card-thumbs { display: flex; gap: 6px; flex: 0 0 auto; }
.price-card-thumbs .thumb-row { display: flex; gap: 6px; }
.price-card-thumbs .thumb-col { width: 96px; text-align: center; }
.price-card-thumbs img,
.price-card-thumbs .thumb-placeholder {
  width: 96px;
  height: 134px;
}
.price-card-thumbs img {
  object-fit: cover;
  border-radius: 6px;
  display: block;
  background: var(--surface);
}
.price-card-thumbs .thumb-badge { margin-top: 2px; }
.price-card-thumbs .zoom-thumb-btn { margin-top: 4px; padding: 2px 0; }
.price-card-price-col {
  flex: 1;
  min-width: 0;
  text-align: right;
  padding-top: 4px;
}
.price-card-hero-price.hero-price { font-size: 22px; }
.price-card-hero-sub {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 2px;
}
.price-card-pct {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

.price-card-actions-row {
  display: flex;
  gap: 6px;
  margin: 8px 0;
}
.price-card-actions-row .btn {
  flex: 1;
  text-align: center;
  white-space: nowrap;
}
.btn-ebay-listed { background: var(--surface-3); border-color: transparent; color: var(--text); }
.btn-ebay-listed:hover { background: #2A3038; border-color: transparent; color: var(--text); }
.btn-ebay-sold-teal { background: var(--surface-3); border-color: transparent; color: var(--text); }
.btn-ebay-sold-teal:hover { background: #2A3038; border-color: transparent; color: var(--text); }
.btn-tcg-view { background: var(--surface-3); border-color: transparent; color: var(--text); }
.btn-tcg-view:hover { background: #2A3038; border-color: transparent; color: var(--text); }
.price-card-actions-row .btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.rotate-control {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  background: var(--surface);
  border-radius: 7px;
  padding: 2px;
}

.rotate-control .rotate-scan-card-btn {
  flex: 0 0 auto;
  padding: 3px 9px;
  font-size: 11px;
  line-height: 1.4;
  border-color: transparent;
}

.rotate-control .rotate-label {
  flex: 1;
  font-size: 11px;
  color: var(--text-muted);
}

.scan-result-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.scan-result-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.scan-result-title-text {
  word-break: break-word;
}

.scan-result-section-label {
  font-size: 12px;
  color: var(--text-faint);
  margin: 0;
}

.scan-result-counter {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  font-weight: 400;
  white-space: nowrap;
}

.scan-result-price-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: -6px;
}

.scan-result-price-cols .ebay-price-block {
  min-width: 0;
  margin: 0;
  border: none;
  background: var(--surface);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}


/* The narrower half-width price blocks here don't have room for 3
   side-by-side accept-price buttons the way the full-width Price Lookup
   card does - text overlapped instead of wrapping. Stack them into one
   row per price point (value left, button right) instead. */
.scan-result-price-cols .accept-price-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}


.scan-result-price-cols .accept-price-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
}

.scan-result-price-cols .accept-price-row .btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 7px 4px;
  background: var(--surface-3);
  border-color: transparent;
}

.scan-result-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


.scan-result-warning {
  color: var(--text);
  background: var(--warning-bg);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
}



/* One eBay group and one TCGplayer group side by side inside
   .scan-result-bulk-price-row (see renderScanResults in app.js) - each its
   own radio set + Accept Price button, so a bulk accept can pull from
   either source independently instead of only ever eBay's. */
/* Scan & Match pricing: % inputs, the Scan settings Pricing section, and the
   Adjust row under each price block */
.pct-input { display: inline-flex; align-items: stretch; height: 34px; border-radius: 8px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; flex: none; }
.pct-input input { width: 58px; margin: 0; border: none; background: transparent; color: var(--text); font: inherit; font-size: 14px; text-align: right; padding: 0 8px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.pct-input input::-webkit-inner-spin-button, .pct-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pct-input input:focus { outline: none; }
.pct-input:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }
.pct-input > span { display: inline-flex; align-items: center; padding: 0 9px; background: var(--surface-2); color: var(--text-muted); font-size: 13px; }
.scan-pricing-grid { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px 16px; align-items: center; }
.scan-pricing-grid .field-label { margin: 0; }
.scan-pricing-inline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.scan-pricing-inline select { margin: 0; width: auto; min-width: 250px; }
.scan-pricing-grid.is-off .scan-pricing-dep { opacity: .45; pointer-events: none; }
.scan-pricing-summary { margin-top: 14px; padding: 11px 14px; border-radius: 10px; background: #1D1A12; box-shadow: inset 3px 0 0 var(--accent); font-size: 13px; line-height: 1.55; color: var(--text-soft); }
.scan-pricing-summary:empty { display: none; }
.scan-pricing-summary strong { color: var(--text); }
.scan-pricing-summary .muted { display: block; margin-top: 2px; }
.price-adjust-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.price-adjust-row label { margin: 0; font-size: 13px; color: var(--text-soft); }
.price-adjust-preview { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.price-adjust-preview strong { color: var(--text); font-weight: 600; }
.your-price-note { display: block; font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.your-price-note:empty { display: none; }
@media (max-width: 760px) {
  .scan-pricing-grid { grid-template-columns: 1fr; gap: 6px; }
  .scan-pricing-grid .field-label { margin-top: 8px; }
}

.scan-bulk-price-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 12px;
  border-radius: 8px;
  background: var(--surface-2);
}
.scan-bulk-price-group-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}


.scan-result-saved-badge {
  background: var(--success-bg);
  color: var(--text);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.scan-result-ebay-badge {
  background: var(--surface-3);
  color: var(--text);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 500;
}

.scan-result-ebay-badge a {
  color: inherit;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
   eBay CSV Layout modal
--------------------------------------------------------------------- */
.csv-layout-header-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  padding: 0 4px 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}

.csv-layout-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
}

.csv-layout-row select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
}

.csv-layout-row .name-edit-input {
  margin: 0;
}

.price-range-row {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
}

.price-range-row .name-edit-input {
  margin: 0;
}

.store-category-add-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}

#panel-settings .store-category-add-row .name-edit-input,
#panel-settings .store-category-add-row select {
  margin: 0;
}

.ebay-connection-badge {
  color: var(--success);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.searchable-select {
  position: relative;
  margin-bottom: 10px;
}

.searchable-select-input {
  margin: 6px 0 0;
}

.searchable-select-menu {
  position: absolute;
  top: 100%;
  margin-top: 4px;
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}

.searchable-select-option {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}

.searchable-select-option:hover {
  background: rgba(255, 255, 255, 0.06);
}

.searchable-select-default {
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.searchable-select-empty {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-muted);
}

.ebay-upload-review-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
}

.ebay-upload-review-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--surface-2);
  flex-shrink: 0;
}

.ebay-upload-review-details {
  flex: 1;
  min-width: 0;
}

.ebay-upload-review-title {
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ebay-upload-review-meta {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 2px;
}

.ebay-upload-review-status {
  font-size: 12px;
  margin-top: 4px;
}

.ebay-upload-review-status.is-success { color: var(--success); }
.ebay-upload-review-status.is-error { color: var(--danger); }

.store-category-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
}

.store-category-row.is-sub-category {
  padding-left: 28px;
}

.store-category-row .store-category-name {
  flex: 1;
}

.store-category-row .store-category-id {
  color: var(--text-muted);
  font-size: 12px;
}

.csv-layout-static-input {
  margin-top: 6px;
}

.csv-layout-remove-btn {
  color: var(--danger);
  background: transparent;
  border: 1px solid var(--border);
}

.csv-layout-remove-btn:hover {
  border-color: var(--danger);
  background: var(--danger-bg);
}

.csv-layout-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.csv-layout-preview-heading {
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 20px 0 8px;
}

.csv-layout-preview-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  /* .listings-modal-body (this wrap's parent) is itself a flex column.
     Setting overflow-x here makes this item's computed overflow-y "auto"
     too (the CSS overflow spec forces both axes non-visible together),
     which per the flexbox spec gives it an automatic min-height of 0
     instead of its content height - so without flex-shrink:0, the flex
     column's shrink algorithm was crushing this table down to a couple
     px to make room for the taller column-editor rows above it, even
     though the parent scrolls just fine. */
  flex-shrink: 0;
}

.csv-preview-table {
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
  width: 100%;
}

.csv-preview-table th, .csv-preview-table td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
}

.csv-preview-table th {
  background: var(--surface-2);
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.3px;
}

.csv-preview-table td {
  color: var(--accent);
  font-family: var(--font-mono);
}

/* ---------------------------------------------------------------------
   Sample Listing preview - a mockup styled after a real eBay listing
   page (white card on a neutral surface, eBay's own blue for the primary
   action) so it actually reads as "what this will look like", not just
   another dark-theme app panel. Clearly labeled a preview everywhere it
   appears - never meant to be mistaken for a real listing.
--------------------------------------------------------------------- */
.sample-listing {
  display: flex;
  gap: 28px;
  background: #ffffff;
  border-radius: 10px;
  padding: 24px;
  color: #1a1a1a;
}

.sample-listing-image {
  flex: 0 0 260px;
}

.sample-listing-image img {
  width: 100%;
  aspect-ratio: 5 / 7;
  object-fit: contain;
  border-radius: 6px;
  background: #f5f5f5;
  display: block;
}

.sample-listing-image-placeholder {
  width: 100%;
  aspect-ratio: 5 / 7;
  border-radius: 6px;
  background: #f5f5f5;
  border: 2px dashed #ccc;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 13px;
}

.sample-listing-info {
  flex: 1;
  min-width: 0;
}

.sample-listing-title {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 14px;
  line-height: 1.35;
  color: #1a1a1a;
}

.sample-listing-seller {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #333;
}

.sample-listing-seller-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #06111f;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex: 0 0 auto;
}

.sample-listing-price {
  font-size: 28px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.sample-listing-condition {
  font-size: 13px;
  color: #444;
  margin-bottom: 20px;
}

.sample-listing-buy-btn, .sample-listing-secondary-btn {
  display: block;
  width: 100%;
  max-width: 360px;
  border-radius: 24px;
  padding: 13px;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
  text-align: center;
  cursor: default;
}

.sample-listing-buy-btn {
  background: #3665f3;
  color: #fff;
  border: none;
}

.sample-listing-secondary-btn {
  background: transparent;
  color: #3665f3;
  border: 1px solid #3665f3;
}

.sample-listing-disclaimer {
  color: #666 !important;
  margin-top: 16px !important;
}

.sample-listing-empty {
  padding: 20px 4px;
}

/* ---------------------------------------------------------------------
   Billing - plan cards (Billing panel). Visually mirrors the landing
   page's pricing cards (landing.css) but
   restated here since app.html doesn't load that stylesheet.
   --------------------------------------------------------------------- */

.billing-pricing-cards {
  margin-top: 18px;
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

.pricing-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 22px;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
}

.pricing-card-featured {
  border-color: var(--accent-2);
  box-shadow: 0 0 24px rgba(183, 189, 200, 0.14);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 22px;
  background: var(--accent-gradient);
  color: #06070d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 12px;
  border-radius: 999px;
}

.pricing-badge-alt {
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--accent);
}

.pricing-name {
  font-size: 14px;
  font-weight: 600;
  margin: 4px 0 16px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
}

.price-amount {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
}

.price-period {
  font-size: 13px;
  color: var(--text-muted);
}

.pricing-blurb {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 22px;
  flex: 1;
}

.pricing-cta {
  width: 100%;
}

@media (max-width: 860px) {
  .pricing-cards {
    grid-template-columns: 1fr;
  }
}

.image-zoom-overlay {
  cursor: zoom-out;
}

.screenshot-zoom-box {
  background: var(--panel-bg, var(--surface));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  width: 96vw;
  height: 92vh;
  max-width: 1700px;
  display: flex;
  flex-direction: column;
  cursor: default;
}

.screenshot-zoom-box .compare-modal-header {
  margin-bottom: 10px;
}

.screenshot-zoom-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--surface-2);
  border-radius: 8px;
  text-align: center;
}

.screenshot-zoom-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  display: inline-block;
  vertical-align: middle;
}

.screenshot-zoom-img.zoomed {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  cursor: zoom-out;
}

.screenshot-zoom-hint {
  text-align: center;
  margin-top: 8px;
}

/* a card: as tall as the window, twice that when zoomed in */
.is-card .screenshot-zoom-img { height: 100%; width: auto; max-width: 100%; }
.is-card .screenshot-zoom-img.zoomed { height: 200%; max-width: none; }

.image-zoom-box {
  background: var(--panel-bg, var(--surface));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  max-width: min(90vw, 700px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  cursor: default;
}

.image-zoom-box .compare-modal-header {
  margin-bottom: 10px;
}

#imageZoomImg {
  max-width: 100%;
  max-height: calc(90vh - 60px);
  object-fit: contain;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

.reject-price-btn {
  margin-top: 8px;
}

.pricing-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.total-values-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.total-value-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.total-value-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.total-value-amount {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.total-value-low, .total-value-high {
  font-size: 20px;
  opacity: 0.85;
}

.recheck-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.rename-row {
  display: flex;
  justify-content: flex-end;
  margin: 4px 0;
}

.recheck-row .recheck-input {
  flex: 1;
  margin: 0;
}

.recheck-row .btn {
  white-space: nowrap;
}

/* Price Lookup's card is narrow enough that flex:1 alongside two buttons
   left the search-term input too short to show a full card name - forcing
   it to its own full-width row (buttons wrap below) fixes that without
   affecting Scan & Match's wider row, which has room to share one line. */
.price-lookup-grid .recheck-row .recheck-input {
  flex-basis: 100%;
}

.sort-label {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.sort-select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
}

.sort-select:focus {
  outline: none;
  border-color: var(--accent);
}

.type-row {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}

.type-field {
  flex: 1;
  min-width: 0;
}

.type-field .field-label {
  margin-bottom: 3px;
}

.cap-row {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 4px;
}

.cap-field { flex: 0 0 auto; }

.type-field select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12px;
}

.type-field select:focus {
  outline: none;
  border-color: var(--accent);
}

.type-field select:disabled { opacity: 0.5; cursor: not-allowed; }

.review-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.review-actions .btn {
  flex: 1;
  padding: 8px 8px;
  font-size: 13px;
}

.btn-accept { background: var(--success-bg); border-color: transparent; color: var(--success); }
.btn-accept:hover { background: #1A3D28; border-color: transparent; color: var(--text); }
.btn-reject { background: transparent; border-color: #3A2A30; color: #E58A93; }
.btn-reject:hover { background: var(--danger-bg); border-color: #4A2A32; color: #F0A5AC; }

.btn-compare { background: var(--surface-3); border-color: transparent; color: var(--text); }
.btn-compare:hover { background: #2A3038; border-color: transparent; color: var(--text); }

.btn-rename { background: var(--surface-3); border-color: transparent; color: var(--text); }
.btn-rename:hover { background: #2A3038; border-color: transparent; color: var(--text); }

.btn-rescan { background: var(--surface-3); border-color: transparent; color: var(--text); }
.btn-rescan:hover { background: #2A3038; border-color: transparent; color: var(--text); }

.btn-sold-listings { background: var(--surface-3); border-color: transparent; color: var(--text); }
.btn-sold-listings:hover { background: #2A3038; border-color: transparent; color: var(--text); }

.btn-trial { background: var(--success); border-color: var(--success); color: #0B1420; font-weight: 700; padding: 8px 28px; }
.btn-trial:hover { background: var(--success); filter: brightness(1.08); border-color: var(--success); }

.trial-hint-text { font-size: 16px; text-align: center; }

/* Radio rows (rename mode) */
.radio-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  margin: 8px 0;
  cursor: pointer;
}

.radio-row input {
  accent-color: var(--accent);
}

/* ---------------------------------------------------------------------
   Scan & Match header + Scan Settings modal (grouped config sections,
   pill toggles standing in for plain radio rows, and hover-for-detail
   info icons standing in for permanent paragraphs of explanation text)
--------------------------------------------------------------------- */
.scan-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* Sits below Scan Settings' scrolling body as its own flex row (not part
   of .listings-modal-body's overflow-y:auto), so Continue always stays
   visible at the bottom of the window regardless of scroll position. */
.scan-settings-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.settings-section {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.settings-section:first-child { padding-top: 2px; }

.settings-section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.settings-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.settings-dot-accent { background: var(--accent); box-shadow: 0 0 6px 0 rgba(217, 164, 65, 0.7); }
.settings-dot-accent-2 { background: var(--accent-2); box-shadow: 0 0 6px 0 rgba(183, 189, 200, 0.7); }
.settings-dot-accent-3 { background: var(--accent-3); box-shadow: 0 0 6px 0 rgba(183, 189, 200, 0.7); }
.settings-dot-warning { background: var(--warning); box-shadow: 0 0 6px 0 rgba(229, 138, 78, 0.7); }
.settings-dot-success { background: var(--success); box-shadow: 0 0 6px 0 rgba(91, 191, 138, 0.7); }

/* Advanced Matching (Scan Settings) - Era/Set picker + the Focus box that
   collects what's been added. Reuses .searchable-select for the Era/Set
   combos themselves; these are just the add-row and results-box wrapper. */
.am-add-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.am-add-row .btn { margin-bottom: 1px; }
.am-box {
  border-radius: 10px; padding: 10px 12px; border: 1px solid var(--success);
  background: rgba(91, 191, 138, 0.06);
  display: flex; flex-direction: column; gap: 8px;
}
.am-box-header { display: flex; align-items: center; justify-content: space-between; }
.am-box-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--success); }
.am-count { border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 700; background: rgba(91, 191, 138, 0.18); color: var(--success); }
.am-clear { font-size: 11px; color: var(--text-muted); cursor: pointer; }
.am-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; align-items: center; }
.am-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 12px; color: var(--text);
  background: rgba(91, 191, 138, 0.14); border: 1px solid var(--success);
}
.am-chip-x { color: inherit; opacity: 0.85; display: inline-flex; cursor: pointer; }
.am-empty { color: var(--text-muted); font-size: 12px; }

/* Hover/focus "(i)" info badge - replaces a permanent paragraph of small
   muted text with an icon that only shows its explanation on demand. Uses
   the native title attribute (not a custom CSS tooltip) specifically so it
   can never get clipped by a scrollable modal body's overflow:hidden. */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 10px;
  font-style: italic;
  font-weight: 700;
  font-family: Georgia, "Times New Roman", serif;
  cursor: help;
  flex-shrink: 0;
  vertical-align: middle;
}
.info-icon:hover, .info-icon:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.field-label .info-icon { margin-left: 4px; }

/* Segmented pill toggle - a friendlier look for a two-option radio choice
   (save-into folder, single/double sided) than a plain radio-row list. */
.pill-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  overflow: hidden;
}

.pill-toggle-option {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.pill-toggle-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pill-toggle-option span {
  display: block;
  padding: 7px 16px;
  font-size: 13px;
  color: var(--text-muted);
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.pill-toggle-option input:checked + span {
  background: var(--accent);
  color: #06131F;
  font-weight: 700;
}

.pill-toggle-option input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ---------------------------------------------------------------------
   Card Comparison & Search modal
--------------------------------------------------------------------- */
.compare-open-btn {
  width: 100%;
  margin-top: 8px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 9, 20, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
}

.modal-box {
  background: var(--panel-bg, var(--surface));
  border: 1px solid var(--border);
  border-radius: 14px;
  max-width: 1100px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.compare-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}

.compare-modal-header h2 {
  margin: 0 0 4px 0;
  font-size: 18px;
}

#scanConfirmModalOverlay .compare-modal-header {
  justify-content: center;
}

#scanConfirmModalOverlay .compare-modal-header h2 {
  text-align: center;
}

.scan-confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.scan-confirm-row:last-of-type {
  border-bottom: none;
}

.scan-confirm-row span:first-child {
  color: var(--text-muted);
}

.scan-confirm-row span:last-child {
  font-weight: 600;
  text-align: right;
  max-width: 220px;
  white-space: normal;
}

.scan-confirm-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.scan-confirm-actions .btn {
  flex: 1;
}

/* ---------------------------------------------------------------------
   Marketplace (Wanted / Members eBay Directory)
--------------------------------------------------------------------- */
.subtab-row {
  display: flex;
  gap: 8px;
  margin: 14px 0 18px;
  border-bottom: 1px solid var(--border);
}

.subtab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 4px 10px;
  cursor: pointer;
}

.subtab-btn:hover {
  color: var(--text);
}

.subtab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.wanted-row, .directory-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
}

.wanted-row img {
  width: 50px;
  border-radius: 6px;
  flex-shrink: 0;
}

.wanted-row-zoom {
  cursor: zoom-in;
}

.wanted-row-meta {
  margin-top: 2px;
}

/* Dual-thumb price range slider (Post/Edit Wanted Listing) - two native
   range inputs stacked on the same track, each with its own thumb but a
   transparent track/pointer-events so only the thumb itself is grabbable;
   .wanted-price-range-fill is a separate div positioned by JS (see
   updateWantedPriceRangeUI in app.js) to show the highlighted span between
   the two thumbs. */
.wanted-price-range {
  margin: 8px 0 4px;
}

.wanted-price-range-track {
  position: relative;
  height: 24px;
}

.wanted-price-range-track::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
}

.wanted-price-range-fill {
  position: absolute;
  top: 10px;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
}

.wanted-price-range-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  height: 24px;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.wanted-price-range-input::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}

.wanted-price-range-input::-moz-range-track {
  height: 4px;
  background: transparent;
  border: none;
}

.wanted-price-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 0 3px var(--bg);
}

.wanted-price-range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 0 3px var(--bg);
}

.wanted-price-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-muted);
}

.wanted-row-info, .directory-row-info {
  flex: 1;
  min-width: 0;
}

.wanted-row-name, .directory-row-name {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wanted-row-note, .directory-row-desc {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 2px;
}

.directory-row-name a {
  color: var(--accent);
  text-decoration: none;
}

.directory-row-name a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Feedback / Comments / Inbox
--------------------------------------------------------------------- */
#feedbackScreenshotInput {
  color-scheme: dark;
  color: var(--text);
  font-size: 13px;
}

.thread-list-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.thread-list-toolbar label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13px;
}

.thread-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
}

.thread-row.thread-row-unread {
  border-color: var(--accent-3);
}

.thread-row-checkbox {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.thread-row-body {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.thread-row-body:hover .thread-row-name {
  color: var(--accent);
}

.thread-row-info {
  flex: 1;
  min-width: 0;
}

.thread-row-name {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.unread-pill {
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.unread-pill.unread-pill-muted {
  background: var(--surface-3, rgba(255, 255, 255, 0.1));
  color: var(--text-muted);
}

.thread-row-preview {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thread-row-meta {
  text-align: right;
  white-space: nowrap;
  flex: 0 0 auto;
}

.feedback-thread-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

.feedback-message {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  max-width: 85%;
}

.feedback-message.feedback-message-admin {
  align-self: flex-end;
  background: rgba(217, 164, 65, 0.08);
  border-color: var(--accent);
}

.feedback-message-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.feedback-message-body {
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.feedback-message-screenshot {
  max-width: 100%;
  border-radius: 8px;
  margin-top: 8px;
  display: block;
  cursor: zoom-in;
}

/* ---------------------------------------------------------------------
   Chat - Inbox - general-purpose 1:1 messaging between any two Cardlivo
   users. The first persistent list+detail (Messenger-style) layout in
   this app - everything else here is a modal-based drill-down - so
   .chat-shell/.chat-rail/.chat-main are new, but message bubbles reuse
   .feedback-message/.feedback-message-admin as-is, rail rows reuse
   .unread-pill, and both modals in this feature reuse .modal-overlay/
   .modal-box/.compare-modal-header/.listings-modal-body directly.
--------------------------------------------------------------------- */
.chat-shell {
  display: flex;
  height: calc(100vh - 150px);
  min-height: 420px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.chat-rail {
  width: 380px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  min-height: 0;
}

.chat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chat-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.chat-tab.chat-tab-active {
  background: var(--accent);
  border-color: transparent;
  color: #06131F;
}

.chat-tab-new {
  border-style: dashed;
}

.chat-search-input.text-input {
  margin: 0;
}

.chat-rail-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2px;
}

.chat-rail-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: inherit;
}

.chat-rail-row.chat-rail-row-active {
  border-color: var(--accent);
  background: rgba(217, 164, 65, 0.08);
}

.chat-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #0B1420;
  flex-shrink: 0;
}

.chat-rail-info {
  flex: 1;
  min-width: 0;
}

.chat-rail-name {
  font-size: 14px;
  font-weight: 600;
}

.chat-rail-preview {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-rail-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.chat-rail-time {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.chat-rail-remove-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
}

.chat-rail-remove-btn:hover { color: var(--danger); }

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-muted);
  text-align: center;
  padding: 40px;
}

.chat-empty svg { opacity: 0.5; }
.chat-empty-title { font-size: 15px; font-weight: 600; color: var(--text); }
.chat-empty-sub { font-size: 13px; max-width: 280px; }

.chat-thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  position: relative;
  flex-shrink: 0;
}

.chat-thread-who { display: flex; align-items: center; gap: 12px; }
.chat-thread-name { font-size: 15px; font-weight: 700; }
.chat-thread-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }

.chat-overflow-menu {
  position: absolute;
  top: 54px;
  right: 20px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  min-width: 190px;
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.55);
  z-index: 5;
}

.chat-overflow-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 9px 10px;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
}

.chat-overflow-item:hover { background: var(--surface); }
.chat-overflow-item.danger { color: var(--danger); }

.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Messenger-style bubbles: two distinct colors by sender rather than the
   subtler "accent border only" treatment Feedback/Support uses - Chat gets
   its own dedicated classes (not .feedback-message) so tuning this never
   touches Support's look. Sent (mine) bubbles sit on the RIGHT in the
   accent color, received (theirs) on the LEFT in plain surface-2 - the
   standard chat-app convention. */
.chat-bubble {
  align-self: flex-start;
  max-width: 65%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px 14px;
}

.chat-bubble.chat-bubble-mine {
  align-self: flex-end;
  /* A solid color rather than --accent-gradient - the two-stop gradient
     stretches across each bubble's OWN width, so short and long bubbles
     sample different parts of it and end up looking like different
     colors sitting next to each other. */
  background: var(--accent);
  border-color: transparent;
  color: #06131F;
}

.chat-bubble-meta {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.chat-bubble.chat-bubble-mine .chat-bubble-meta {
  color: rgba(6, 19, 31, 0.65);
}

.chat-bubble-body {
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.chat-bubble-context {
  font-size: 11.5px;
  font-style: italic;
  opacity: 0.8;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.25);
}

.chat-attach-pdf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--text);
}

.chat-attach-pdf-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--danger-bg);
  color: var(--danger);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-attach-pdf-name { font-size: 13px; font-weight: 600; color: var(--text); }
.chat-attach-pdf-dl { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

.chat-blocked-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--danger-bg);
  color: var(--text-muted);
  font-size: 13px;
  flex-shrink: 0;
}

.chat-blocked-notice strong { color: var(--danger); }

.chat-pending-attachment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 20px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: 12.5px;
}

.chat-pending-attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-composer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.chat-composer-input.text-input {
  flex: 1;
  margin: 0;
  border-radius: 22px;
}

.chat-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.chat-icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.chat-icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.chat-book-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chat-blocked-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 2px;
  text-align: left;
  flex-shrink: 0;
}

.chat-blocked-link:hover { color: var(--text); }

.chat-search-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}

.chat-search-result-row .chat-avatar { width: 30px; height: 30px; font-size: 11px; }
.chat-search-result-name { flex: 1; font-size: 13px; font-weight: 600; }

.chat-send-btn { border-radius: 22px; flex-shrink: 0; }

.chat-compose-select-all {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.chat-compose-user-list {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.chat-compose-user-list label.chat-search-result-row {
  cursor: pointer;
}

.chat-compose-user-list label.chat-search-result-row:has(input:checked) {
  border-color: var(--accent);
}

.compare-modal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.compare-modal-nav .btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.compare-modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 18px;
  padding: 20px 22px;
  overflow-y: auto;
}

.compare-modal-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.compare-modal-col img {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.match-pct-pill {
  display: inline-block;
  background: var(--success-bg);
  color: var(--success);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
}

.compare-search-col {
  min-width: 0;
}

.compare-results-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 55vh;
  padding-right: 2px;
}

.compare-candidate {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
}

.compare-candidate img {
  width: 44px;
  border-radius: 6px;
  flex-shrink: 0;
}

.compare-candidate-info {
  flex: 1;
  min-width: 0;
}

.compare-candidate-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compare-candidate-current {
  border-color: var(--accent);
}

.compare-candidate-badge {
  font-size: 11px;
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}

.compare-replace-btn {
  white-space: nowrap;
}

.compare-continue-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  margin-top: 4px;
}

.compare-continue-label input {
  accent-color: var(--accent);
}

@media (max-width: 900px) {
  .compare-modal-body { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Card Type / Art Type box - a framed group, similar in spirit to a
   reference pricing tool's "condition" table, just repurposed to hold
   listing-metadata dropdowns instead of per-condition prices.
--------------------------------------------------------------------- */
.type-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  gap: 10px;
}

/* ---------------------------------------------------------------------
   eBay Listings modal (Price Lookup - "View all listings")
--------------------------------------------------------------------- */
.listings-modal {
  max-width: 720px;
}

.listings-modal-sort-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  flex-wrap: wrap;
}

.listings-modal-sort-row .listings-country-label { margin-left: 10px; }

.listings-modal-sort-row .field-label {
  margin: 0;
  white-space: nowrap;
}

.listings-modal-sort-row select {
  width: auto;
  padding: 6px 10px;
  font-size: 13px;
}

.listings-modal-body {
  padding: 14px 22px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Required for a flex child to actually become scrollable instead of
     just overflowing its container - without this, its default min-height
     is "auto" (i.e. its content's full height), so .modal-box's own
     max-height:90vh + overflow:hidden just clips the excess instead of
     .listings-modal-body's own overflow-y:auto ever kicking in. Only
     became visible once a modal (the CSV Layout editor) had enough rows
     to actually overflow 90vh - the eBay Listings modal this class
     originated for usually didn't. */
  flex: 1;
  min-height: 0;
}

.ebay-listing-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
}

.ebay-listing-row img,
.ebay-listing-noimg {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface);
}

.ebay-listing-info {
  flex: 1;
  min-width: 0;
}

.ebay-listing-title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ebay-listing-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--success);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Duplicates Found modal (Scan & Match)
--------------------------------------------------------------------- */
.duplicate-group-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
}

.duplicate-group-row img {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface);
}

.duplicate-group-count {
  white-space: nowrap;
  flex-shrink: 0;
}

.duplicate-group-name-input {
  flex: 1;
  min-width: 0;
}

/* ---------------------------------------------------------------------
   Account Details modal (Manage Users)
--------------------------------------------------------------------- */
.user-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 20px;
}

.user-detail-field span {
  display: block;
  margin-bottom: 2px;
}

.activity-subheading {
  font-size: 14px;
  margin: 14px 0 6px;
}

.activity-subheading:first-child {
  margin-top: 0;
}

.activity-row {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.activity-row:last-child {
  border-bottom: none;
}

/* ---------------------------------------------------------------------
   Take a Tour - a guided walkthrough that spotlights one sidebar nav item
   at a time. Three separate fixed-position pieces rather than one overlay
   with a cutout: click-blocker (an invisible full-viewport layer that
   makes the rest of the app inert while the tour is open), spotlight (a
   box positioned over the current target - its own oversized box-shadow
   IS the dimming effect, so this single box doubles as both the highlight
   ring and the "everything else is dark" backdrop, hence pointer-events:
   none - the blocker underneath handles clicks uniformly), and the
   tooltip card with the actual copy and controls. See startTour() in
   app.js for the positioning logic.
   --------------------------------------------------------------------- */
.tour-click-blocker {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: transparent;
  cursor: default;
}

.tour-spotlight {
  position: fixed;
  z-index: 501;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(6, 9, 20, 0.78), 0 0 0 2px var(--accent), 0 0 24px 2px rgba(217, 164, 65, 0.5);
  pointer-events: none;
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
  animation: tourPulse 2.4s ease-in-out infinite;
}

/* A slow, subtle "breathing" glow on the spotlight ring - draws the eye to
   what's being explained without being distracting over a long tour. Runs
   alongside (not instead of) the position/size transitions above - they
   animate different properties so there's no conflict. */
@keyframes tourPulse {
  0%, 100% { box-shadow: 0 0 0 9999px rgba(6, 9, 20, 0.78), 0 0 0 2px var(--accent), 0 0 24px 2px rgba(217, 164, 65, 0.5); }
  50% { box-shadow: 0 0 0 9999px rgba(6, 9, 20, 0.78), 0 0 0 2px var(--accent), 0 0 34px 6px rgba(217, 164, 65, 0.8); }
}

.tour-tooltip {
  position: fixed;
  z-index: 502;
  width: 300px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  transition: top 0.25s ease, left 0.25s ease;
}

.tour-progress {
  height: 3px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}

.tour-progress-fill {
  height: 100%;
  background: var(--accent-gradient);
  border-radius: 999px;
  width: 0%;
  transition: width 0.35s ease;
}

/* Retriggered from JS on every step (renderTourStep swaps the class off
   and back on) so the title/body fade+slide in fresh each time, instead of
   just snapping to new text while the spotlight/tooltip glide smoothly. */
.tour-tooltip-content.tour-content-animate {
  animation: tourContentIn 0.3s ease;
}

@keyframes tourContentIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.tour-tooltip h3 {
  margin: 2px 0 8px;
  font-size: 15px;
}

.tour-tooltip-step {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 11px;
}

.tour-tooltip-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.tour-skip-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  padding: 6px 0;
  text-decoration: underline;
}

.tour-skip-link:hover {
  color: var(--text);
}

/* ---------------------------------------------------------------------
   User Guide & Help
--------------------------------------------------------------------- */
.help-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.help-toc {
  flex: 0 0 220px;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}

.help-toc-link {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.4;
}

.help-toc-link:hover {
  background: var(--surface-2);
  color: var(--text);
}

.help-content-wrap {
  flex: 1;
  min-width: 0;
}

.help-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.help-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  scroll-margin-top: 16px;
}

.help-section h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.help-section p {
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 10px;
}

.help-section p:last-of-type {
  margin-bottom: 14px;
}

.help-list {
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 14px;
  padding-left: 20px;
}

.help-list li {
  margin-bottom: 6px;
}

.help-screenshot {
  display: block;
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-top: 10px;
}

@media (max-width: 900px) {
  .help-layout {
    flex-direction: column;
  }
  .help-toc {
    position: static;
    flex: 1 1 auto;
    width: 100%;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Find Pokemon Cards - the app's first real <table>, everything else so
   far is a div-based card grid. Wrapped in .table-scroll so a lot of
   columns on a narrow window scrolls horizontally instead of squeezing
   the page itself. */
.table-scroll {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th, .data-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table th {
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.3px;
}

.data-table tbody tr:hover {
  background: var(--surface);
}

/* Kept small so many rows still fit on screen at once, but big enough to
   actually make out the card - clicking one opens the full-size Zoom
   modal (openImageZoom, same one Scan & Match uses) for a real look. */
.data-table .table-thumb {
  width: 48px;
  height: 68px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  background: var(--surface);
}

.data-table .find-cards-zoom-img {
  cursor: pointer;
}

.data-table .lang-flag {
  vertical-align: middle;
  margin-right: 4px;
}

.data-table .table-price-btn {
  padding: 3px 9px;
  font-size: 11px;
  white-space: nowrap;
}

.find-cards-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Latest Updates - one clickable row per changelog entry (see
   CHANGELOG_ENTRIES/renderLatestUpdatesList in app.js), same row shape as
   .ebay-listing-row but clickable as a whole instead of via a button. */
.changelog-entry {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  background: none;
  width: 100%;
  color: inherit;
  font: inherit;
}

.changelog-entry:hover {
  border-color: var(--accent);
  background: var(--surface);
}

.changelog-entry-date {
  flex: 0 0 auto;
  width: 76px;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding-top: 2px;
}

/* My Inventory and Collection - binder list tiles and the "flip pages" 4x3 card grid
   (see fetchAndRenderMyCollection / openBinderDetail / renderBinderPage
   in app.js). Binder tiles are shaped like an upright book/binder cover -
   a colored spine down the left edge, everything else new since nothing
   else in the app needs a fixed-count grid of editable cells. */
.binder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 20px 18px;
  margin-top: 14px;
}

.binder-stack {
  position: relative;
  aspect-ratio: 3 / 4;
}

.binder-book {
  position: absolute;
  inset: 0;
  border-radius: 6px 14px 14px 6px;
  /* --binder-color is set inline per-tile (see renderBinderListGrid in
     app.js, binderColorFor()) - falls back to the plain accent so a tile
     never renders unstyled if that ever isn't set. */
  background: color-mix(in srgb, var(--binder-color, var(--accent)) 10%, var(--surface-2));
  border: 1px solid var(--border);
  border-left: none;
  padding: 16px 14px 14px 22px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  box-shadow: -1px 0 0 0 color-mix(in srgb, var(--binder-color, var(--accent)) 60%, transparent);
}

.binder-book::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 10px;
  border-radius: 6px 0 0 6px;
  background: var(--binder-color, var(--accent));
}

.binder-book::after {
  content: "";
  position: absolute;
  left: 10px; top: 0; bottom: 0;
  width: 3px;
  background: rgba(0, 0, 0, 0.25);
}

/* Extra Volumes peek out behind the front cover, offset like a stack of
   binders on a shelf - see Binder.volume_count in db.py. */
.binder-stack .binder-book.vol-back-1 { transform: translate(6px, -6px); z-index: 1; filter: brightness(0.7); cursor: default; }
.binder-stack .binder-book.vol-back-2 { transform: translate(12px, -12px); z-index: 0; filter: brightness(0.5); cursor: default; }
.binder-stack .binder-book.vol-front { z-index: 2; }

.binder-book-icon { color: var(--binder-color, var(--accent)); opacity: 0.9; }

.binder-book-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  margin: 8px 0 2px;
}

.binder-book-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: auto;
}

/* The tile's headline value - reuses .total-value-amount's gradient-text
   treatment, just smaller to fit the narrower cover. */
.binder-book-value {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 8px;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.vol-badge {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 3;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}

/* Capacity fill bar - only rendered when a binder has Cards per Page and
   Pages per Volume both set (see _binder_capacity_info in main.py). */
.fill-row { display: flex; align-items: center; gap: 6px; }
.fill-track { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.fill-fill { height: 100%; border-radius: 3px; background: var(--success); }
.fill-fill.is-warn { background: var(--warning); }
.fill-fill.is-hot { background: var(--danger); }
.fill-pct { font-size: 10px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }

.binder-tile-actions {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 4;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.binder-stack:hover .binder-tile-actions {
  opacity: 1;
}

.binder-tile-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
}

.binder-tile-action-btn:hover {
  color: var(--text);
  border-color: var(--binder-color, var(--accent));
}

/* Whole-binder eBay/TCG totals shown centered at the top of an open
   binder (see openBinderDetail in app.js) - gold (--success-gradient, now a solid-accent alias)
   rather than the plain text colour .total-value-amount
   uses elsewhere, specifically to stand out from those other totals. */
.binder-detail-totals-row {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-top: 14px;
}

.binder-detail-total-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.binder-detail-total-amount {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  background: var(--success-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.binder-color-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--accent);
}

.binder-tile-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.binder-select-inline {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  font-size: 12px;
  padding: 4px 6px;
}

.binder-page-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 1100px) {
  .binder-page-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 780px) {
  .binder-page-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.binder-card-cell {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.binder-cell-checkbox-wrap {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--surface);
  border-radius: 4px;
  padding: 2px;
  line-height: 0;
}

.binder-cell-img {
  width: 100%;
  aspect-ratio: 5 / 7;
  object-fit: contain;
  border-radius: 8px;
  background: var(--surface);
  cursor: zoom-in;
}

.binder-cell-img-empty {
  width: 100%;
  aspect-ratio: 5 / 7;
  border-radius: 8px;
  background: var(--surface);
}

.binder-cell-label {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 6px;
  margin-bottom: 2px;
}

.binder-cell-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 7px;
  border-radius: 6px;
  font-size: 12px;
}

.binder-cell-name {
  font-weight: 600;
}

.binder-cell-name-row {
  display: flex;
  gap: 6px;
}

.binder-cell-name-row .binder-cell-name-col {
  flex: 1;
  min-width: 0;
}

.binder-cell-name-row .binder-cell-qty-col {
  width: 52px;
  flex-shrink: 0;
}

.binder-cell-qty-col .binder-cell-label { margin-top: 6px; }

.binder-cell-qty {
  text-align: center;
  font-weight: 700;
}

.binder-cell-price-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.binder-cell-price-col {
  flex: 1;
  min-width: 0;
}

.binder-cell-price-col .binder-cell-label {
  margin-top: 0;
}

/* Read-only "≈ [converted amount]" hint under an editable USD price field -
   see refreshAllPriceDisplays/binderCardCellHtml in app.js. Lets a price
   actually be seen in whatever currency is selected without ever risking
   the editable figure itself (which stays real USD, since that's what
   saves/exports) being mistaken for a converted number. */
.binder-cell-price-hint {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  min-height: 12px;
}

/* Boxes - the physical-storage-box counterpart to Binders (see Box/BoxRow/
   BoxDivider/BoxCard in db.py, openBoxDetail/renderBoxRows in app.js). Box
   tiles reuse .binder-grid for layout but get their own shape - a colored
   lid band across the top instead of a spine down the side - so the two
   container types read as visually distinct at a glance. */
.box-tile {
  position: relative;
  border-radius: 10px;
  background: color-mix(in srgb, var(--box-color, var(--accent)) 10%, var(--surface-2));
  border: 1px solid var(--border);
  padding: 18px 16px 16px;
  cursor: pointer;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.box-tile::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 8px;
  background: var(--box-color, var(--accent));
}

.box-tile-icon { color: var(--box-color, var(--accent)); opacity: 0.95; margin-top: 4px; }
.box-tile-name { font-size: 20px; font-weight: 800; margin: 10px 0 2px; text-align: center; }

/* Open-box page title (see openBoxDetail in app.js) - pulled out of the
   Back/Export button row into its own big, centered heading so the box's
   name is the first thing that stands out, not just another small item
   sharing space with utility buttons. */
.box-detail-name-heading {
  text-align: center;
  font-size: 46px;
  font-weight: 800;
  margin: 0 0 16px;
}
.box-detail-name-heading .binder-color-dot {
  width: 22px;
  height: 22px;
  margin-right: 12px;
}
.box-tile-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
.box-tile-value {
  font-size: 16px; font-weight: 800; margin-bottom: auto; padding-bottom: 10px;
  background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Boxes tab of My Inventory and Collection (see renderBoxListGrid in
   app.js) - a vertical list, one row per Box, rather than the fixed-
   aspect-ratio .binder-grid tile grid Binders uses: each Box needs a
   variable-width strip of small Row visuals to its right, which doesn't
   fit a same-size-cell tile grid. */
.box-list { display: flex; flex-direction: column; margin-top: 14px; }
.box-list-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.box-list-item:first-child { padding-top: 0; }
.box-list-item:last-child { border-bottom: none; }

.box-list-item-main {
  position: relative;
  flex: 0 0 200px;
  width: 200px;
}
.box-list-item-main .box-tile { height: auto; }
/* .binder-tile-actions/.binder-tile-action-btn are shared with the Binder
   tiles above - only the hover trigger differs, since a Box tile no
   longer lives inside a .binder-stack. */
.box-list-item-main:hover .binder-tile-actions { opacity: 1; }

.box-list-item-rows {
  flex: 1 1 260px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px;
  padding-top: 2px;
}
.box-row-visual-none { align-self: center; }

/* One small box per real Row, named after whichever Divider(s) it holds -
   a colored top strip (--box-color, set inline per box) visually ties it
   back to the parent Box tile the same way .box-tile::before does. */
.box-row-visual {
  position: relative;
  overflow: hidden;
  width: 108px;
  min-height: 60px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 9px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.box-row-visual:hover {
  border-color: var(--box-color, var(--accent));
}
.box-row-visual::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 5px;
  background: var(--box-color, var(--accent));
}
.box-row-visual-label { font-size: 11px; font-weight: 700; margin-top: 3px; }
.box-row-visual-divider { font-size: 10.5px; color: var(--text-muted); line-height: 1.3; word-break: break-word; }
.box-row-visual-empty { font-size: 10.5px; color: var(--text-muted); font-style: italic; }

/* Box open view - Rows, each optionally split into named Dividers, each
   holding an ordered list of cards. Rows and Dividers both start collapsed
   (see boxExpandedRows/boxExpandedDividers in app.js) - a real storage box
   can hold hundreds of cards, so nothing under a header renders until it's
   actually clicked open. */
.box-row-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; flex-wrap: wrap; gap: 10px;
}
.box-row-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.box-row-count-badge {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border); padding: 2px 9px; border-radius: 999px;
}
.box-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; color: var(--text-muted); transition: transform 0.15s ease; flex-shrink: 0;
}
.box-chevron svg { width: 14px; height: 14px; }
.box-row-title.is-collapsed .box-chevron, .box-divider-header.is-collapsed .box-chevron { transform: rotate(-90deg); }

/* Brief highlight after jumping straight to a Row from its mini-tile in
   the Box list (see scrollToBoxRow in app.js) - confirms which Row just
   got scrolled to, then fades on its own. */
.box-row-focus-flash {
  animation: boxRowFocusFlash 1.8s ease-out;
}
@keyframes boxRowFocusFlash {
  0% { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 2px transparent; }
}

.box-divider-group { margin-bottom: 14px; }
.box-divider-group:last-child { margin-bottom: 0; }
.box-divider-header { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; cursor: pointer; user-select: none; }
.box-divider-chip {
  font-size: 11px; font-weight: 700; color: var(--accent-2);
  background: rgba(183, 189, 200, 0.12); border: 1px solid var(--accent-2); padding: 4px 12px; border-radius: 999px;
}

/* A card inside a Row/Divider now reuses the exact .binder-card-cell markup
   (image, Name+Qty, eBay/TCG/My Price, Batch Name, SKU, Delete) so a card
   looks identical whether it's sitting in a Binder or a Box - see
   boxCardRowHtml/binderCardCellHtml in app.js. .box-divider-cards lays those
   cells out in the same grid as .binder-page-grid; .box-card-cell only adds
   the printed-number chip (this app's cards are collected and physically
   organized by number, so that's worth surfacing even in a box) and swaps
   the single Delete button for a Move+Delete pair, since a card can move
   between rows/dividers within its box in a way a binder card can't. */
.box-divider-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 1100px) {
  .box-divider-cards { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 780px) {
  .box-divider-cards { grid-template-columns: repeat(2, 1fr); }
}

.box-card-checkbox { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent); }
.box-card-pos-chip {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border); padding: 2px 7px; border-radius: 999px;
}
.box-card-cell-actions { display: flex; gap: 6px; }
.box-card-cell-actions .btn { flex: 1; }

.box-empty-row-block { text-align: center; padding: 28px 20px; }

/* Populate Missing Cards Watermark - a faded placeholder standing in for a
   card the set has but the collection doesn't (see missingCardCellHtml in
   app.js), styled to sit in the exact same .binder-card-cell/.binder-cell-img
   grid slot as a real owned card so the two interleave cleanly, while
   reading unmistakably as "not real" at a glance - dashed border, reduced
   opacity, no editable fields. .watermark-note is the "these cards aren't
   all one set, so Cardlivo can't fill in gaps here" fallback message, shown
   in the Binder view and inline per Box Row/Divider group. */
.missing-card-cell {
  border-style: dashed;
  background: transparent;
}

.missing-card-img {
  opacity: 0.28;
  filter: grayscale(60%);
}

.missing-card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  margin-top: 4px;
}

.missing-card-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  text-align: center;
  opacity: 0.75;
}

.missing-card-wanted-btn {
  width: 100%;
  margin-top: 2px;
}

.watermark-note {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

/* Locate a Card search results (locateCardModalOverlay / boxAddCardModalOverlay) */
.locate-result { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.locate-result:last-child { border-bottom: none; }
.locate-thumb { width: 36px; height: 50px; border-radius: 4px; background: var(--surface-2); flex-shrink: 0; object-fit: contain; }
.locate-name { font-weight: 700; font-size: 13px; }
.locate-num { color: var(--text-muted); font-weight: 500; }
.locate-breadcrumb { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.locate-breadcrumb b { color: var(--text); font-weight: 600; }
.locate-type-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-right: 6px; display: inline-block; }
.locate-type-badge.binder { color: var(--accent-3); background: rgba(183, 189, 200, 0.12); border: 1px solid var(--accent-3); }
.locate-type-badge.box { color: var(--accent-2); background: rgba(183, 189, 200, 0.12); border: 1px solid var(--accent-2); }

.changelog-entry-title {
  font-weight: 600;
  margin-bottom: 2px;
}

/* Scan & Match narrower-screen layout - kept at the very end of the file so
   it wins the cascade over the base .scan-result-* rules above. */
@media (max-width: 1320px) {
  .scan-result-row { grid-template-columns: auto minmax(0, 1fr); }
  .scan-result-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .scan-result-actions .btn { width: auto; }
  .scan-result-actions .scan-result-reject { margin-top: 0; margin-left: auto; }
}
@media (max-width: 1100px) {
  .scan-result-fields, .scan-result-price-inputs { grid-template-columns: minmax(0, 1fr); }
  .scan-summary { flex-wrap: wrap; }
  .scan-summary-actions { flex-basis: 100%; border-left: none; border-top: 1px solid var(--border); }
  .scan-result-price-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   My Inventory and Collection - holo gold restyle. Scoped to
   :is(#panel-my-collection, #panel-pricing, #panel-find-cards) so the shared pieces it reuses (.total-value-*,
   .pill-toggle, .info-icon, .card-block, .text-input) keep their look
   everywhere else. Markup IDs are unchanged - see app.html.
--------------------------------------------------------------------- */
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) { --inv-input-bg: var(--bg); }
#binderListView, #binderDetailView, #boxDetailView { display: flex; flex-direction: column; gap: 22px; }

:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .total-value-amount,
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-detail-total-amount,
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-book-value,
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-tile-value,
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .fill-pct { font-variant-numeric: tabular-nums; }

/* Buttons: secondary actions are filled neutral chips, not outlines. */
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 6px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .btn-outline { background: var(--surface-3); border-color: transparent; color: var(--text); }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .btn-outline:hover:not(:disabled) { background: #2A3038; border-color: transparent; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .btn-primary { font-weight: 600; color: var(--accent-ink); }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) a.btn { display: inline-flex; align-items: center; text-decoration: none; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .btn-reject { background: transparent; border-color: #3A2A30; color: #E58A93; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .btn-reject:hover:not(:disabled) { background: var(--danger-bg); border-color: #4A2A32; color: #F0A5AC; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) select { font-size: 13px; padding: 7px 28px 7px 10px; border-radius: 6px; background-color: var(--surface-2); }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) select:hover { border-color: #3A414C; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .info-icon {
  background: transparent; border-color: #3A414C; color: var(--text-muted);
  font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 10px; font-weight: 700;
}
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .field-label { margin: 0; font-size: 13px; color: var(--text-muted); }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .text-input {
  margin: 0; font-size: 13px; padding: 7px 9px; border-radius: 6px; background: var(--inv-input-bg);
}

/* List view header */
.inv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.inv-head-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-title { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.6px; line-height: 1.15; }
.inv-head-text .muted { margin: 0; font-size: 14px; max-width: 620px; text-wrap: pretty; }
.inv-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-head-actions .btn-sm { padding: 9px 13px; border-radius: 7px; display: inline-flex; align-items: center; gap: 7px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-head-actions .btn-outline { background: transparent; border-color: var(--border); }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-head-actions .btn-outline:hover { background: var(--surface-2); border-color: #3A414C; }

/* Totals strip */
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-stats { display: flex; gap: 0; align-items: stretch; background: var(--surface); border-radius: 10px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-stats .total-value-block { flex: 1; align-items: flex-start; gap: 4px; padding: 18px 22px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-stats .total-value-block + .total-value-block { border-left: 1px solid var(--border); }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .total-value-label {
  font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted);
}
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .total-value-amount {
  font-size: 28px; font-weight: 600; letter-spacing: -0.6px; background: none; color: var(--text);
  -webkit-background-clip: border-box; background-clip: border-box;
}

.inv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-seg { border: none; border-radius: 8px; background: var(--surface); padding: 3px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-seg .pill-toggle-option span { border-radius: 6px; padding: 7px 16px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-seg .pill-toggle-option input:checked + span { background: var(--surface-3); color: var(--text); font-weight: 600; }
#populateMissingCardsWrap { margin: 0; color: var(--text-soft); }
#populateMissingCardsWrap input { width: 15px; height: 15px; margin: 0; }

.inv-section { display: flex; flex-direction: column; gap: 14px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-section-title { margin: 0; font-size: 17px; font-weight: 600; }

/* Binder tiles */
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px 20px; margin-top: 0; padding-top: 8px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-stack { aspect-ratio: auto; height: 270px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-book {
  border: none; border-radius: 10px; overflow: hidden;
  background: var(--surface-2); padding: 18px 18px 18px 27px; gap: 4px; box-shadow: none;
  transition: box-shadow 0.15s ease;
}
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-book.vol-front:hover { box-shadow: inset 0 0 0 1px #3A414C; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-book::before { width: 9px; border-radius: 0; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-book::after { display: none; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-stack .binder-book.vol-back-1 { transform: translate(5px, -4px); filter: none; background: #171A20; opacity: 0.85; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-stack .binder-book.vol-back-2 { transform: translate(10px, -8px); filter: none; background: var(--surface); opacity: 0.6; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-stack .binder-book.vol-back-1::before,
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-stack .binder-book.vol-back-2::before { opacity: 0.5; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-book-icon { margin-bottom: 10px; opacity: 1; flex-shrink: 0; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-book-name { font-size: 15px; font-weight: 600; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.binder-book-default { font-size: 12px; font-weight: 400; color: var(--text-muted); }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-book-meta { font-size: 13px; margin-bottom: auto; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-book-value {
  font-size: 22px; font-weight: 600; letter-spacing: -0.4px; margin: 0 0 8px;
  background: none; color: var(--text); -webkit-background-clip: border-box; background-clip: border-box;
}
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .fill-row { gap: 8px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .fill-track { height: 4px; border-radius: 2px; background: var(--border); }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .fill-fill { background: var(--accent); border-radius: 2px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .fill-fill.is-warn { background: var(--warning); }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .fill-fill.is-hot { background: var(--danger); }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .fill-pct { font-size: 11px; font-weight: 400; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .vol-badge {
  top: 18px; right: 18px; border: none; background: var(--bg); color: var(--text-soft);
  font-size: 11px; font-weight: 500; border-radius: 4px; padding: 2px 7px; transition: opacity 0.15s ease;
}
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-stack:hover:has(.binder-tile-action-btn) .vol-badge { opacity: 0; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-tile-actions { position: absolute; top: 14px; right: 14px; margin: 0; gap: 4px; flex-wrap: nowrap; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-tile-action-btn {
  width: 26px; height: 26px; border: none; border-radius: 5px; background: var(--bg); color: var(--text-soft);
}
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-tile-action-btn:hover { color: var(--text); background: #0A0C0F; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-delete-btn,
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-delete-btn { color: #E58A93; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-delete-btn:hover,
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-delete-btn:hover { color: #F0A5AC; }

/* Box list */
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-list { margin-top: 0; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-list-item { gap: 20px; padding: 18px 0; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-list-item-main { flex: 0 0 240px; width: 240px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-tile {
  border: none; border-radius: 10px; background: var(--surface-2); padding: 22px 18px 18px; gap: 4px;
  transition: box-shadow 0.15s ease;
}
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-tile:hover { box-shadow: inset 0 0 0 1px #3A414C; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-tile::before { height: 6px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-tile-icon { margin: 0 0 8px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-tile-name { font-size: 17px; font-weight: 600; text-align: left; margin: 0; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-tile-meta { font-size: 12px; margin: 0 0 12px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-tile-value {
  font-size: 22px; font-weight: 600; letter-spacing: -0.4px; padding: 0; margin: 0;
  background: none; color: var(--text); -webkit-background-clip: border-box; background-clip: border-box;
}
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-list-item-main .binder-tile-actions { top: 18px; right: 14px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-list-item-rows { gap: 10px; padding-top: 0; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-row-visual {
  width: 132px; min-height: 72px; border: none; background: var(--surface); border-radius: 8px;
  padding: 12px 12px 10px; transition: box-shadow 0.15s ease;
}
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-row-visual:hover { box-shadow: inset 0 0 0 1px #3A414C; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-row-visual::before { height: 4px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-row-visual-label { font-size: 12px; font-weight: 600; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-row-visual-divider { font-size: 12px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-row-visual-empty { font-size: 12px; font-style: normal; color: var(--text-faint); }

/* Detail views: top bar, title + value */
.inv-detail-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-back {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; font-size: 13px;
  text-decoration: none; color: var(--text-soft);
}
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-back:hover { color: var(--text); }
.inv-export-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-bar-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.inv-icon-btn {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-soft); background: var(--surface-2); border: none; border-radius: 7px; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.inv-icon-btn:hover { background: var(--surface-3); color: var(--text); }
.inv-icon-btn-danger { color: #E58A93; }
.inv-icon-btn-danger:hover { color: #F0A5AC; background: var(--danger-bg); }

.inv-detail-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-detail-title {
  margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.6px; line-height: 1.15;
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-detail-title .binder-color-dot { width: 14px; height: 14px; border-radius: 4px; margin: 0; flex-shrink: 0; }
.inv-value { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.inv-value-mode { display: flex; flex-direction: column; gap: 5px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-value-mode .field-label { font-size: 12px; display: flex; align-items: center; gap: 6px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-value-mode .info-icon { margin: 0; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-value-mode select { min-width: 130px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-detail-totals-row { margin: 0; gap: 0; justify-content: flex-end; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-detail-total-block { align-items: flex-end; gap: 2px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-detail-total-block .total-value-label { font-size: 12px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-detail-total-amount {
  font-size: 32px; font-weight: 600; letter-spacing: -0.8px; line-height: 1;
  background: none; color: var(--text); -webkit-background-clip: border-box; background-clip: border-box;
}

/* Settings panels */
.inv-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.inv-panel { background: var(--surface); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-panel-title { margin: 0; font-size: 14px; font-weight: 600; }
.inv-panel-title-row { display: flex; align-items: center; gap: 8px; }
.inv-panel-note { margin: 0; font-size: 12px; color: var(--text-faint); line-height: 1.5; }
.inv-panel-note:empty { display: none; }
.inv-apply-row { display: grid; grid-template-columns: minmax(150px, 210px) 120px auto; gap: 10px; align-items: center; }
.inv-apply-row .btn { justify-self: start; }
.inv-bulk-cost { gap: 8px; margin-bottom: 16px; }
.inv-bulk-cost .inv-apply-row { grid-template-columns: minmax(200px, 320px) 120px auto; }
.inv-bulk-cost-opt { font-size: 13px; color: var(--text-soft); }
.inv-bulk-cost-status { margin: 0; }
.inv-bulk-cost-status:empty { display: none; }
.inv-recheck-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border); }
.inv-recheck-row .btn { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.inv-recheck-row .muted { flex: 1; min-width: 200px; line-height: 1.45; }
.inv-recheck-row .muted.is-done { color: var(--text-soft); }
.inv-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inv-inline-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .cap-row { gap: 12px; margin: 0; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .cap-field { display: flex; flex-direction: column; gap: 5px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .cap-field .field-label { font-size: 12px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .cap-input { width: 90px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .cap-input-sm { width: 52px; }
.cap-layout { display: flex; align-items: center; gap: 5px; }

/* Box: rows panel + each row */
.inv-rows-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.inv-rows-head > div { display: flex; flex-direction: column; gap: 6px; }
.inv-rows-head .muted { margin: 0; max-width: 760px; }
.inv-rows-head .btn { flex-shrink: 0; }
.inv-rows-tools {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid var(--border);
}
#boxRowsContainer { display: flex; flex-direction: column; gap: 14px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-row-block { border: none; padding: 0; margin: 0; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-row-header { margin: 0; padding: 14px 18px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-row-header.is-expanded { border-bottom: 1px solid var(--border); }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-row-header .folder-row { margin: 0; gap: 8px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-row-title { font-size: 15px; font-weight: 600; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-row-count-badge {
  font-size: 12px; font-weight: 500; border: none; background: var(--bg); border-radius: 4px; padding: 2px 7px;
}
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-row-body { padding: 16px 18px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-divider-group { margin-bottom: 16px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-divider-group:last-child { margin-bottom: 0; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-divider-header { margin-bottom: 12px; gap: 10px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-divider-chip {
  font-size: 12px; font-weight: 600; color: var(--text); background: var(--surface-3);
  border: none; border-radius: 5px; padding: 4px 9px;
}
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-delete-divider-btn { background: transparent; border: 1px solid var(--border); color: var(--text-soft); font-size: 12px; padding: 5px 10px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-delete-divider-btn:hover { background: var(--surface-2); color: var(--text); }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-undivided-group { padding-top: 16px; border-top: 1px solid #1F242B; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-divider-cards { gap: 16px; margin-top: 0; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-empty-row-block { padding: 28px 20px; margin: 0; }

/* Cards (shared by binders and boxes) */
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-page-grid { gap: 16px; margin-top: 0; }
.inv-cards-section { display: flex; flex-direction: column; gap: 16px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .watermark-note { margin: 0; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-card-cell {
  background: var(--surface); border: none; border-radius: 10px; padding: 12px; gap: 10px;
}
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-divider-cards .binder-card-cell { background: var(--surface-2); }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-cell-img,
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-cell-img-empty { border-radius: 7px; background: var(--surface-3); }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-cell-checkbox-wrap {
  top: 20px; left: 20px; z-index: 2; width: 26px; height: 26px; padding: 0; border-radius: 6px;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
}
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-cell-checkbox-wrap input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-card-pos-chip {
  top: 20px; right: 20px; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--text); background: var(--bg); border: none; border-radius: 4px; padding: 2px 6px;
}
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-cell-label {
  font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--text-muted); margin: 0 0 4px;
}
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-cell-input { background: var(--bg); border-radius: 6px; padding: 7px 8px; font-size: 13px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-cell-input:focus { outline: none; border-color: var(--accent); }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-cell-price,
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-card-price { font-family: var(--font-mono); font-size: 12px; padding: 7px 6px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-cell-name { font-weight: 500; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-cell-name-row { gap: 8px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-cell-name-row .binder-cell-qty-col { width: 58px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-cell-qty { text-align: left; font-weight: 400; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-cell-qty-col .binder-cell-label { margin-top: 0; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-cell-price-row { gap: 6px; flex-wrap: nowrap; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-cell-price-row .binder-cell-price-col { display: flex; flex-direction: column; justify-content: flex-end; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-card-cell > .binder-cell-label { margin-bottom: -6px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-cell-price-hint { font-size: 10px; min-height: 0; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-cell-price-hint:empty { display: none; }
.binder-cell-actions { display: flex; align-items: center; gap: 6px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-cell-actions .btn { flex: 0 0 auto; padding: 6px 10px; font-size: 12px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-cell-actions .binder-card-delete-btn,
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-cell-actions .box-card-delete-btn { margin-left: auto; }

:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .missing-card-cell { background: transparent; border: 1px dashed #2E343D; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-divider-cards .missing-card-cell { background: transparent; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .missing-card-img { opacity: 0.45; background: var(--surface-2); }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .missing-card-label { font-size: 14px; font-weight: 500; color: var(--text-soft); text-align: left; margin: 0; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .missing-card-tag { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--text-faint); text-align: left; opacity: 1; margin-top: -6px; }
:is(#panel-my-collection, #panel-pricing, #panel-find-cards) .missing-card-wanted-btn { margin-top: auto; }

.inv-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; }

@media (max-width: 1100px) {
  .inv-panels { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
  .inv-apply-row { grid-template-columns: minmax(0, 1fr) 110px; }
  .inv-apply-row .btn { grid-column: 1 / -1; }
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-stats { flex-direction: column; }
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-stats .total-value-block + .total-value-block { border-left: none; border-top: 1px solid var(--border); }
  .inv-rows-head { flex-direction: column; }
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .box-list-item-main { flex-basis: 100%; width: 100%; }
}

/* ---------------------------------------------------------------------
   Price Lookup + Find Pokemon Cards - holo gold restyle. Shares the
   My Inventory block's panel/button/totals rules above (widened with
   :is()), and Scan & Match's .scan-result-row card layout.
--------------------------------------------------------------------- */
.pl-view { display: flex; flex-direction: column; gap: 22px; }

.pl-setup { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
.pl-folder-grid { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: center; }
.pl-folder-grid .folder-path { font-size: 12px; color: var(--text-soft); word-break: break-all; }
.pl-run { justify-content: center; }
#priceLookupBtn { width: 100%; }
#panel-pricing .pl-run .progress-row { margin: 0; }
#panel-pricing .progress-track { height: 4px; background: var(--border); }
#panel-pricing .progress-fill { background: var(--accent); }
#priceProgressLabel { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

#panel-pricing .pl-stats .total-value-low,
#panel-pricing .pl-stats .total-value-high { font-size: 22px; color: var(--text-soft); opacity: 1; margin-top: auto; }

.pl-search-row { display: flex; align-items: center; gap: 12px; }
.pl-search { position: relative; flex: 1; min-width: 0; color: var(--text-muted); }
.pl-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; }
:is(#panel-pricing, #panel-find-cards) .pl-search .text-input { padding-left: 32px; }
#panel-pricing .pl-sort { display: flex; align-items: center; gap: 8px; }
#panel-pricing .pl-sort .sort-select { background-color: var(--bg); }

.pl-add-grid {
  display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px 12px; align-items: center;
  padding-top: 14px; border-top: 1px solid var(--border);
}
#panel-pricing .pl-add-grid .binder-select-inline { flex: 0 0 auto; font-size: 13px; padding: 7px 28px 7px 9px; background-color: var(--bg); }
#panel-pricing .pl-select-binder { width: 220px; }
#panel-pricing .pl-select-box { width: 160px; }
#panel-pricing .pl-select-row { width: 110px; }
#panel-pricing .pl-select-divider { width: 150px; }

#panel-pricing .price-result-types { margin: 0; gap: 12px; border: none; padding: 0; background: none; }
#panel-pricing .price-result-types .field-label { font-size: 12px; margin: 0 0 5px; }
.price-result-hero {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px;
  background: var(--surface-2); border-radius: 8px; padding: 14px;
}
.price-result-hero-label { font-size: 12px; color: var(--text-muted); }
.price-result-hero-value { font-size: 28px; font-weight: 600; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.price-result-hero-pct { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.price-result-hero-pct:empty { display: none; }
#panel-pricing .scan-result-actions a.btn { display: block; text-align: center; text-decoration: none; }
#panel-pricing .scan-result-price-inputs .recheck-row { flex-wrap: wrap; }
#panel-pricing .scan-result-price-inputs .recheck-input { flex: 1 1 100%; }
.pl-export-row { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-rename-status:empty { display: none; }
.pl-export-row:has(#exportEbayCsvBtn[style*="none"]) { display: none; }

/* Find Pokemon Cards */
.fc-intro { max-width: 720px !important; }
.fc-search-bar { flex-direction: row; align-items: center; gap: 10px; padding: 14px; }
#panel-find-cards .fc-search-bar .text-input { font-size: 14px; padding-top: 9px; padding-bottom: 9px; }
#panel-find-cards .fc-search-bar select { width: 200px; background-color: var(--bg); padding-top: 9px; padding-bottom: 9px; }
#panel-find-cards .fc-search-bar .btn-primary { padding: 9px 20px; }
.fc-table-wrap { background: var(--surface); border-radius: 10px; }
.fc-table-wrap:has(#findCardsTable[style*="none"]) { display: none; }
#panel-find-cards .fc-table th {
  text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 400;
  padding: 10px 16px; border-bottom-color: var(--border);
}
#panel-find-cards .fc-table td { padding: 12px 16px; border-bottom-color: #1F242B; }
#panel-find-cards .fc-table tbody tr:last-child td { border-bottom: none; }
#panel-find-cards .fc-table tbody tr:hover { background: var(--surface-2); }
#panel-find-cards .fc-table td:nth-child(3) { font-family: var(--font-mono); font-size: 12px; color: var(--text-soft); }
#panel-find-cards .fc-table td:nth-child(5) { color: var(--text-soft); }
#panel-find-cards .data-table .table-price-btn { padding: 7px 10px; font-size: 12px; border-radius: 6px; font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .pl-setup { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
  .pl-add-grid { grid-template-columns: minmax(0, 1fr); }
  .pl-search-row, .fc-search-bar { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------
   Dashboard - holo gold restyle (shares .inv-head/.inv-panel above).
--------------------------------------------------------------------- */
#panel-dashboard .inv-title { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.6px; line-height: 1.15; }
#panel-dashboard .inv-head-text .muted { max-width: 640px; }
#panel-dashboard .inv-panel-title { margin: 0; font-size: 15px; font-weight: 600; }
#panel-dashboard .dash-stats { margin: 0; gap: 0; background: var(--surface); border-radius: 10px; }
#panel-dashboard .dash-stats .stat {
  flex: 1; background: none; border: none; border-radius: 0; padding: 20px 22px;
  display: flex; flex-direction: column; gap: 4px;
}
#panel-dashboard .dash-stats .stat + .stat { border-left: 1px solid var(--border); }
#panel-dashboard .dash-stats .dash-stat-lead { flex: 1.3; }
#panel-dashboard .stat-label { margin: 0; font-size: 13px; }
#panel-dashboard .stat-value { font-size: 28px; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; margin-top: auto; }
#panel-dashboard .dash-stat-lead .stat-value { font-size: 32px; letter-spacing: -0.8px; }
#statModerationCount.is-pending { color: var(--accent); }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
.dash-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#panel-dashboard .dash-scans { background: none; border: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#panel-dashboard .dash-scans .stat-value { font-size: 32px; letter-spacing: -0.8px; margin: 0; }

.lang-stat-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; }
.lang-stat { display: grid; grid-template-columns: 24px minmax(0, 150px) minmax(0, 1fr) 70px; gap: 10px; align-items: center; font-size: 13px; }
.lang-stat-flag { display: flex; }
.lang-stat-flag .lang-flag { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; margin: 0; }
.lang-stat-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang-stat-track { height: 6px; border-radius: 3px; background: #1F242B; overflow: hidden; }
.lang-stat-fill { height: 100%; border-radius: 3px; background: var(--accent); }
.lang-stat-count { text-align: right; color: var(--text-soft); font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .lang-stat-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
  #panel-dashboard .dash-stats { flex-wrap: wrap; }
  #panel-dashboard .dash-stats .stat { flex: 1 1 45%; }
  #panel-dashboard .dash-stats .stat + .stat { border-left: none; }
}

/* ---------------------------------------------------------------------
   eBay Settings + My eBay Listings - holo gold restyle.
--------------------------------------------------------------------- */
:is(#panel-settings, #panel-ebay-listings) .inv-title { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.6px; line-height: 1.15; }
:is(#panel-settings, #panel-ebay-listings) .btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 6px; }
:is(#panel-settings, #panel-ebay-listings) .btn-outline { background: var(--surface-3); border-color: transparent; color: var(--text); }
:is(#panel-settings, #panel-ebay-listings) .btn-outline:hover:not(:disabled) { background: #2A3038; border-color: transparent; }
:is(#panel-settings, #panel-ebay-listings) .btn-primary { font-weight: 600; color: var(--accent-ink); }
:is(#panel-settings, #panel-ebay-listings) a.btn { text-decoration: none; }
:is(#panel-settings, #panel-ebay-listings) .field-label { margin: 0; font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
:is(#panel-settings, #panel-ebay-listings) .field-label .info-icon { margin: 0; }
:is(#panel-settings, #panel-ebay-listings) .text-input,
#panel-settings .name-edit-input {
  margin: 0; font-size: 13px; padding: 8px 10px; border-radius: 6px; background: var(--bg); font-family: var(--font-sans);
}
:is(#panel-settings, #panel-ebay-listings) select { width: 100%; font-size: 13px; padding: 8px 28px 8px 10px; border-radius: 6px; background-color: var(--bg); }
:is(#panel-settings, #panel-ebay-listings) .info-icon {
  background: transparent; border-color: #3A414C; font-family: Georgia, "Times New Roman", serif; font-size: 10px;
}
#panel-settings .radio-row { align-items: flex-start; margin: 0; color: var(--text-soft); line-height: 1.45; }
#panel-settings .radio-row input { width: 15px; height: 15px; margin: 2px 0 0; flex-shrink: 0; }

/* Layout: section list + sections */
.ebs-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: start; }
.ebs-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; }
.ebs-nav-label { font-size: 12px; color: var(--text-faint); padding: 0 10px 6px; }
.ebs-nav a {
  font-size: 13px; color: var(--text-muted); text-decoration: none; border-radius: 6px; padding: 7px 10px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ebs-nav a:hover { color: var(--text); background: var(--surface); }
.ebs-nav a.is-active { color: var(--text); background: var(--surface-2); font-weight: 500; }
.ebs-sections { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ebs-section {
  background: var(--surface); border-radius: 10px; padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 16px;
}
#panel-settings .ebs-title { margin: 0; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
#panel-settings .ebs-section > .muted { margin: 0; max-width: 720px; }
#panel-settings .ebs-section strong { color: var(--text); font-weight: 600; }
.ebs-note { margin: 0; font-size: 12px; color: var(--text-faint); line-height: 1.5; max-width: 720px; }
/* eBay Settings > Image source > Extra photos for every listing */
.ebs-extra { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.ebs-extra-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ebs-extra-title { margin: 0; font-size: 14px; font-weight: 600; }
.ebs-extra-intro { margin: 0; font-size: 13px; line-height: 1.55; max-width: 760px; }
.ebs-extra-toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-soft); cursor: pointer; }
.ebs-extra-toggle:has(.ebs-switch:disabled) { cursor: default; opacity: .6; }
.ebs-extra-grid { display: flex; gap: 12px; flex-wrap: wrap; }
.ebs-extra-tile { width: 150px; background: var(--surface-2); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 8px; cursor: grab; }
.ebs-extra-tile.is-dragging { opacity: .4; }
.ebs-extra-tile.is-drop { box-shadow: inset 0 0 0 2px var(--accent); }
.ebs-extra-tile img { width: 134px; height: 134px; object-fit: cover; border-radius: 7px; background: var(--bg); display: block; pointer-events: none; }
.ebs-extra-name { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ebs-extra-foot { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); }
.ebs-extra-foot .ebs-extra-size { flex: 1; white-space: nowrap; }
.ebs-extra-foot { gap: 0; }
.ebs-extra-foot button { padding: 2px 3px; }
.ebs-extra-foot button { border: none; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; padding: 2px 4px; border-radius: 4px; cursor: pointer; }
.ebs-extra-foot button:hover:not(:disabled) { color: var(--text); background: var(--surface-3); }
.ebs-extra-foot button:disabled { opacity: .3; cursor: default; }
.ebs-extra-foot .ebs-extra-remove { color: var(--danger); }
.ebs-extra-add { width: 150px; min-height: 196px; border: none; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-strong, #3A414C); color: var(--text-soft); font-family: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; cursor: pointer; padding: 10px; }
.ebs-extra-add:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ebs-extra-add svg { color: var(--accent); }
.ebs-extra-add strong { font-size: 13px; font-weight: 500; }
.ebs-extra-add span { font-size: 11px; color: var(--text-faint); }
.ebs-extra-msg.is-error { color: var(--danger); }
.ebs-extra-order { background: #12151A; border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ebs-extra-order:empty { display: none; }
.ebs-extra-order-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ebs-extra-order-cell { width: 92px; text-align: center; font-size: 11px; color: var(--text-muted); line-height: 1.3; }
.ebs-extra-order-cell.is-extra { color: var(--accent); }
.ebs-extra-order-pic { position: relative; display: block; width: 92px; height: 92px; border-radius: 6px; overflow: hidden; background: var(--bg); margin-bottom: 5px; }
.ebs-extra-order-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ebs-extra-order-cell.is-first .ebs-extra-order-pic { box-shadow: inset 0 0 0 2px var(--accent); }
.ebs-extra-order-pic .num { position: absolute; left: 5px; bottom: 5px; font-size: 11px; font-weight: 600; background: rgba(11,13,16,.8); color: var(--text); border-radius: 4px; padding: 1px 6px; }
.ebs-extra-order-card { position: absolute; inset: 8px 20px; border-radius: 4px; background: linear-gradient(160deg, #E0C24A, #1B1F25 90%); }
.ebs-extra-order-back { position: absolute; inset: 8px 20px; border-radius: 4px; background: radial-gradient(circle, #C7A548 0 14%, #2B4C8C 15% 55%, #1C2F5C 56%); }
.ebs-note:empty { display: none; }
.ebs-faint { color: var(--text-faint); }
.ebs-mono { font-family: var(--font-mono); color: var(--text-muted); }
.ebs-callout { background: var(--surface-2); border-radius: 6px; padding: 10px 12px; color: var(--text-muted); }
.ebs-callout strong { color: var(--text-soft) !important; }
.ebs-unlocked { color: var(--accent); }
.ebs-counter { margin-top: -2px; font-variant-numeric: tabular-nums; }
.ebs-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ebs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.ebs-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ebs-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ebs-inline .text-input { flex: 1 1 240px; }
.ebs-subbox { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--surface-2); border-radius: 8px; }
.ebs-subbox .text-input { background: var(--bg); }
.ebs-subtitle-label { font-size: 13px; font-weight: 600; }
.ebs-subsection { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
#titleTemplateInput { font-family: var(--font-mono); resize: vertical; }
#panel-settings .chip-row { margin: 0; }
.ebs-preview-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; background: var(--bg); border-radius: 8px;
}
#panel-settings .ebs-preview-row .preview-line { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--text-soft); }
.ebs-account-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ebs-account-status { display: flex; align-items: center; gap: 12px; }
#panel-settings .ebs-account-status .muted { margin: 0; }
#panel-settings #storeCategoriesList:empty { display: none; }
#panel-settings #storeCategoriesList { display: flex; flex-direction: column; gap: 6px; }
#panel-settings .store-category-row { background: var(--surface-2); border: none; border-radius: 6px; padding: 9px 12px; margin: 0; }
#panel-settings .store-category-delete-btn { background: transparent; border: 1px solid #3A2A30; color: #E58A93; padding: 5px 10px; font-size: 12px; }
#panel-settings .store-category-delete-btn:hover { background: var(--danger-bg); }
#panel-settings .store-category-add-row { margin: 0; }
#panel-settings #shippingPriceRangesList { display: flex; flex-direction: column; gap: 8px; }
#panel-settings .price-range-row { margin: 0; }

/* Sticky save bar */
.ebs-savebar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  margin: 0 -2px; padding: 14px 18px; background: var(--sidebar);
  border: 1px solid var(--border); border-radius: 10px;
}
#saveCsvSettingsBtn { padding: 10px 22px; font-size: 14px; }

/* My eBay Listings */
.ebl-filters { flex-direction: row; align-items: flex-end; gap: 10px; padding: 14px; flex-wrap: wrap; }
.ebl-f-range { width: 150px; }
.ebl-f-sort { width: 170px; }
.ebl-f-name { flex: 1 1 220px; }
.ebl-f-sku { width: 200px; }
#panel-ebay-listings .searchable-select-input { cursor: pointer; }
#panel-ebay-listings #ebayListingsRefreshBtn { padding: 9px 14px; }
.ebl-list { background: var(--surface); border-radius: 10px; overflow: hidden; }
.ebl-list:empty { display: none; }
.ebl-list > .muted { margin: 0; padding: 16px 18px; }
#ebayListingsList .ebay-upload-review-row {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 18px; margin: 0; border: none; border-bottom: 1px solid #1F242B; border-radius: 0; background: none;
}
#ebayListingsList .ebay-upload-review-row:last-child { border-bottom: none; }
#ebayListingsList .ebay-upload-review-row:hover { background: var(--surface-2); }
#ebayListingsList .ebay-upload-review-thumb { width: 48px; height: 67px; border-radius: 4px; background: var(--surface-3); object-fit: cover; }
#ebayListingsList .ebay-upload-review-title { font-size: 14px; font-weight: 500; }
#ebayListingsList .ebay-upload-review-meta { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; margin-top: 4px; }

@media (max-width: 1100px) {
  .ebs-layout { grid-template-columns: minmax(0, 1fr); }
  .ebs-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .ebs-nav-label { display: none; }
}
@media (max-width: 780px) {
  .ebs-grid, .ebs-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .ebl-filters > * { width: 100%; flex: 1 1 100%; }
}
#panel-settings .chip {
  border-radius: 5px; background: var(--surface-2); border: 1px solid transparent;
  padding: 5px 9px; font-size: 12px; font-weight: 500; color: var(--text);
}
#panel-settings .chip:hover { background: var(--surface-3); border-color: transparent; }
#panel-settings .chip.in-order { background: #2A2415; border-color: var(--accent); color: var(--text); }
#panel-settings .ebs-subbox .chip { background: var(--surface-3); }
#panel-settings .ebs-preview-row .preview-line { padding: 0; border: none; font-weight: 400; }
#panel-settings .ebay-connection-badge {
  font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--success);
  background: var(--success-bg); border-radius: 5px; padding: 4px 9px;
}
#panel-settings .price-range-row { padding: 0; border-bottom: none; gap: 8px; }
#panel-settings .store-category-row.is-sub-category { padding-left: 30px; }
:is(#panel-settings, #panel-ebay-listings) .searchable-select { margin: 0; }
:is(#panel-settings, #panel-ebay-listings) .searchable-select .text-input { margin: 0; }

/* ---------------------------------------------------------------------
   Marketplace - holo gold restyle. Row rules are scoped to the five list
   containers so the Match results/detail windows (which reuse .wanted-row
   markup) keep their own look.
--------------------------------------------------------------------- */
#panel-marketplace .inv-title { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.6px; line-height: 1.15; }
#panel-marketplace .btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 6px; }
#panel-marketplace .btn-outline { background: var(--surface-3); border-color: transparent; color: var(--text); }
#panel-marketplace .btn-outline:hover:not(:disabled) { background: #2A3038; border-color: transparent; }
#panel-marketplace .btn-primary { font-weight: 600; color: var(--accent-ink); }
#panel-marketplace .mkt-intro .btn { padding: 9px 14px; border-radius: 7px; }

#panel-marketplace .mkt-tabs {
  display: flex; gap: 2px; align-self: flex-start; margin: 0;
  background: var(--surface); border-radius: 9px; padding: 3px; border: none;
}
#panel-marketplace .mkt-tabs .subtab-btn {
  font-size: 13px; font-weight: 500; color: var(--text-muted);
  border: none; border-radius: 6px; padding: 8px 14px; margin: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#panel-marketplace .mkt-tabs .subtab-btn:hover { color: var(--text); }
#panel-marketplace .mkt-tabs .subtab-btn.active { background: var(--surface-3); color: var(--text); font-weight: 600; }
#panel-marketplace .marketplace-subtab:not([style*="none"]) { display: flex !important; flex-direction: column; gap: 16px; }

.mkt-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
#panel-marketplace .mkt-intro .muted { margin: 0; max-width: 600px; line-height: 1.5; }
#panel-marketplace .mkt-intro strong { color: var(--text); font-weight: 600; }
#panel-marketplace .mkt-extras-note { margin-top: -8px; }

.mkt-board-toggle { display: flex; background: var(--surface); border-radius: 8px; padding: 3px; }
#panel-marketplace .mkt-board-toggle .btn { border: none; border-radius: 6px; padding: 7px 16px; font-size: 13px; }
#panel-marketplace .mkt-board-toggle .btn-primary { background: var(--surface-3); color: var(--text); font-weight: 600; transform: none; }
#panel-marketplace .mkt-board-toggle .btn-outline { background: transparent; color: var(--text-muted); font-weight: 500; }
#panel-marketplace .mkt-board-toggle .btn-outline:hover { background: transparent; color: var(--text); }

.mkt-filters {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border-radius: 10px; padding: 14px;
}
.mkt-filters .mkt-f { flex: 0 0 var(--mkt-w, 170px); max-width: none; }
.mkt-filters .mkt-f:has(input[type="search"]) { flex: 1 1 220px; }
#panel-marketplace .mkt-filters .field-label { margin: 0 0 5px; font-size: 12px; }
#panel-marketplace .mkt-filters .searchable-select { margin: 0; }
#panel-marketplace .mkt-filters .text-input { margin: 0; font-size: 13px; padding: 8px 10px; border-radius: 6px; background: var(--bg); font-family: var(--font-sans); }
#panel-marketplace .mkt-filters .searchable-select-input { cursor: pointer; }
#panel-marketplace .mkt-filters .btn { padding: 9px 13px; }

.mkt-list { background: var(--surface); border-radius: 10px; overflow: hidden; }
.mkt-list > .muted { margin: 0; padding: 16px 18px; }
.mkt-list .wanted-row, .mkt-list .directory-row {
  display: grid; grid-template-columns: 50px minmax(0, 1fr) 150px minmax(132px, auto); gap: 16px; align-items: center;
  background: none; border: none; border-bottom: 1px solid #1F242B; border-radius: 0; padding: 14px 18px;
  transition: background-color 0.15s ease;
}
.mkt-list .directory-row { grid-template-columns: 40px minmax(0, 1fr) minmax(132px, auto); }
.mkt-list .wanted-row:last-child, .mkt-list .directory-row:last-child { border-bottom: none; }
.mkt-list .wanted-row:hover { background: var(--surface-2); }
.mkt-list .wanted-row img { width: 50px; height: 70px; object-fit: cover; border-radius: 4px; background: var(--surface-3); }
.mkt-list .wanted-row-info { display: flex; flex-direction: column; gap: 4px; }
.mkt-list .wanted-row-name { font-size: 15px; gap: 8px; flex-wrap: wrap; }
.wanted-row-num { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--text-muted); }
.mkt-list .wanted-row-info .muted.small { margin: 0; }
.mkt-list .wanted-row-meta { margin: 0; }
.mkt-list .wanted-row-note { margin: 0; color: var(--text-soft); font-style: italic; }
.mkt-list .unread-pill { background: var(--accent); color: var(--accent-ink); border-radius: 4px; font-size: 11px; font-weight: 600; padding: 2px 7px; }
.mkt-list .unread-pill.unread-pill-muted { background: var(--surface-3); color: var(--text-soft); }
.mkt-row-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mkt-row-price-label { font-size: 11px; color: var(--text-faint); }
.mkt-row-price-value { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mkt-row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.mkt-row-actions:empty { display: block; }
.directory-row-avatar {
  width: 40px; height: 40px; border-radius: 8px; background: var(--surface-3);
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; color: var(--accent);
}
.mkt-list .directory-row-info { display: flex; flex-direction: column; gap: 4px; }
.mkt-list .directory-row-name { font-size: 15px; }
.mkt-list .directory-row-name a { color: var(--text); }
.mkt-list .directory-row-name a:hover { color: var(--accent); text-decoration: none; }
.directory-row-ext { color: var(--text-muted); }
.mkt-list .directory-row-desc { margin: 0; }

@media (max-width: 780px) {
  .mkt-list .wanted-row { grid-template-columns: 50px minmax(0, 1fr); }
  .mkt-list .mkt-row-price { align-items: flex-start; grid-column: 2; }
  .mkt-list .mkt-row-actions { grid-column: 2; justify-content: flex-start; }
}

/* ---------------------------------------------------------------------
   Chat - Inbox + Support - holo gold restyle.
--------------------------------------------------------------------- */
:is(#panel-chat, #panel-inbox) .inv-title { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.6px; line-height: 1.15; }
#panel-chat .pl-view { gap: 18px; }
#panel-chat .chat-shell { height: calc(100vh - 250px); border: none; border-radius: 10px; }
#panel-chat .chat-rail { width: 340px; padding: 16px; }
#panel-chat #chatComposeBtn { font-weight: 600; color: var(--accent-ink); border-radius: 7px; }
#panel-chat .chat-tabs { gap: 4px; align-items: center; }
#panel-chat .chat-tab {
  border: none; background: transparent; color: var(--text-muted); font-weight: 500;
  border-radius: 6px; padding: 6px 10px; transition: background-color 0.15s ease, color 0.15s ease;
}
#panel-chat .chat-tab:hover { color: var(--text); background: var(--surface-2); }
#panel-chat .chat-tab.chat-tab-active { background: var(--surface-3); color: var(--text); font-weight: 600; }
#panel-chat .chat-tab.chat-tab-new { border: 1px dashed #2E343D; padding: 5px 9px; }
#panel-chat .chat-search-input.text-input { font-family: var(--font-sans); font-size: 13px; background: var(--bg); padding: 8px 10px; border-radius: 6px; }
#panel-chat .chat-rail-list { gap: 2px; }
#panel-chat .chat-rail-row {
  background: transparent; border: none; border-radius: 8px; padding: 10px 12px; gap: 11px;
  transition: background-color 0.15s ease;
}
#panel-chat .chat-rail-row:hover { background: var(--surface-2); }
#panel-chat .chat-rail-row.chat-rail-row-active { background: var(--surface-2); border: none; }
#panel-chat .chat-avatar { width: 38px; height: 38px; border-radius: 10px; font-size: 13px; color: var(--accent-ink); }
#panel-chat .chat-rail-name { font-weight: 500; }
#panel-chat .chat-rail-row:has(.unread-pill) .chat-rail-name { font-weight: 600; }
#panel-chat .chat-rail-row:has(.unread-pill) .chat-rail-preview { color: var(--text-soft); }
#panel-chat .chat-rail-preview { font-size: 12px; margin-top: 2px; }
#panel-chat .chat-rail-time { color: var(--text-faint); font-variant-numeric: tabular-nums; }
:is(#panel-chat, #panel-inbox) .unread-pill {
  background: var(--accent); color: var(--accent-ink); font-weight: 600; border-radius: 9px;
}
#panel-chat .chat-thread-name { font-weight: 600; }
#panel-chat .chat-thread-header .chat-avatar { width: 32px; height: 32px; border-radius: 9px; font-size: 12px; }
#panel-chat .chat-bubble { border-radius: 12px; padding: 9px 13px; border-color: transparent; background: var(--surface-2); }
#panel-chat .chat-bubble.chat-bubble-mine { background: #2A2415; border: 1px solid #4A3B1A; color: var(--text); }
#panel-chat .chat-bubble-meta { text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--text-faint); }
#panel-chat .chat-bubble.chat-bubble-mine .chat-bubble-meta { color: var(--text-faint); }
#panel-chat .chat-composer-input { font-family: var(--font-sans); background: var(--bg); }
#panel-chat .chat-send-btn { font-weight: 600; color: var(--accent-ink); }

.thread-list-panel { background: var(--surface); border-radius: 10px; overflow: hidden; }
.thread-list-panel > .muted { margin: 0; padding: 16px 18px; }
#panel-inbox .thread-list-toolbar { margin: 0; padding: 10px 18px; border-bottom: 1px solid var(--border); }
#panel-inbox .thread-list-toolbar label { font-size: 13px; color: var(--text-soft); }
#panel-inbox .thread-list-toolbar input, #panel-inbox .thread-row-checkbox { accent-color: var(--accent); width: 15px; height: 15px; }
#panel-inbox .thread-delete-selected-btn { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
#panel-inbox .thread-row {
  background: none; border: none; border-bottom: 1px solid #1F242B; border-radius: 0; margin: 0; padding: 14px 18px;
  transition: background-color 0.15s ease;
}
#panel-inbox .thread-row:last-child { border-bottom: none; }
#panel-inbox .thread-row:hover { background: var(--surface-2); }
#panel-inbox .thread-row.thread-row-unread { border-color: #1F242B; }
#panel-inbox .thread-row-name { font-weight: 500; }
#panel-inbox .thread-row-unread .thread-row-name { font-weight: 600; }
#panel-inbox .thread-row-body:hover .thread-row-name { color: var(--text); }
#panel-inbox .thread-row-meta { color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   Billing - holo gold restyle (landing page pricing cards untouched:
   everything here is scoped to #panel-billing).
--------------------------------------------------------------------- */
#panel-billing .inv-title { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.6px; line-height: 1.15; }
#panel-billing .inv-head-text .muted { margin: 0; font-size: 14px; }
.bill-section { display: flex; flex-direction: column; gap: 12px; }
.bill-current:has(#billingDetails[style*="none"]):has(#billingCancelHint[style*="none"]) { display: none; }
#panel-billing #billingPlansBlock[style*="block"] { display: flex !important; }
.bill-section-head { display: flex; flex-direction: column; gap: 4px; }
#panel-billing .bill-section-head .muted { margin: 0; }
#panel-billing .inv-section-title { margin: 0; font-size: 17px; font-weight: 600; }
#panel-billing .bill-details { display: flex; gap: 0; align-items: stretch; background: var(--surface); border-radius: 10px; }
#panel-billing .bill-details .total-value-block { flex: 1; min-width: 0; align-items: flex-start; gap: 4px; padding: 16px 20px; }
#panel-billing .bill-details .total-value-block + .total-value-block { border-left: 1px solid var(--border); }
#panel-billing .bill-details .total-value-label { font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
#panel-billing .bill-details .total-value-amount {
  font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1.3; color: var(--text);
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.bill-manage { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
#panel-billing .bill-manage[style*="block"] { display: flex !important; }
#panel-billing .bill-manage .muted { margin: 0; max-width: 640px; line-height: 1.5; }
#panel-billing .btn-outline { background: var(--surface-3); border-color: transparent; color: var(--text); }
#panel-billing .btn-outline:hover:not(:disabled) { background: #2A3038; border-color: transparent; }
#panel-billing #billingManageBtn { padding: 9px 14px; font-size: 13px; border-radius: 7px; }

#panel-billing .billing-pricing-cards { margin: 0; padding-top: 12px; gap: 16px; }
#panel-billing .pricing-card {
  border: none; border-radius: 12px; background: var(--surface); padding: 24px 22px 22px;
  display: flex; flex-direction: column; gap: 10px; box-shadow: none;
}
#panel-billing .pricing-card-featured { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent); }
#panel-billing .pricing-badge { top: -11px; left: 20px; font-size: 11px; font-weight: 600; border-radius: 5px; padding: 3px 8px; text-transform: none; letter-spacing: 0; }
#panel-billing .pricing-badge-alt { background: var(--bg); border: 1px solid var(--accent); color: var(--accent); }
#panel-billing .pricing-name { margin: 0; font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); }
#panel-billing .pricing-price { margin: 0; }
#panel-billing .price-amount { font-size: 32px; font-weight: 600; letter-spacing: -0.8px; font-variant-numeric: tabular-nums; }
#panel-billing .pricing-blurb { margin: 0 0 12px; }
#panel-billing .pricing-cta { margin-top: auto; font-size: 14px; padding: 11px 0; border-radius: 8px; }
#panel-billing .pricing-cta.btn-primary { font-weight: 600; color: var(--accent-ink); }

.bill-trial {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px; background: var(--surface); border-radius: 10px; margin-top: 4px;
}
.bill-trial:not(:has(> [style*="block"])) { display: none; }
#panel-billing .trial-hint-text { margin: 0; font-size: 14px; color: var(--text-soft); }
#panel-billing .btn-trial {
  background: transparent; border: 1px solid var(--accent); color: var(--accent);
  font-size: 14px; font-weight: 600; padding: 9px 20px; border-radius: 8px;
}
#panel-billing .btn-trial:hover { background: #2A2415; filter: none; border-color: var(--accent); }

@media (max-width: 900px) {
  #panel-billing .billing-pricing-cards { grid-template-columns: minmax(0, 1fr); }
  #panel-billing .bill-details { flex-wrap: wrap; }
  #panel-billing .bill-details .total-value-block { flex: 1 1 45%; }
}

/* ---------------------------------------------------------------------
   Admin pages (Moderate, Card index, Manage users, Comments) - holo gold
   restyle. Comments reuses the Support list styling (.thread-list-panel).
--------------------------------------------------------------------- */
:is(#panel-moderate, #panel-index, #panel-users, #panel-comments) .inv-title { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.6px; line-height: 1.15; }
:is(#panel-moderate, #panel-index, #panel-users, #panel-comments) .inv-head-text .muted { max-width: 760px; }
:is(#panel-moderate, #panel-index, #panel-users) .btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 6px; }
:is(#panel-moderate, #panel-index, #panel-users) .btn-outline { background: var(--surface-3); border-color: transparent; color: var(--text); }
:is(#panel-moderate, #panel-index, #panel-users) .btn-outline:hover:not(:disabled) { background: #2A3038; border-color: transparent; }
:is(#panel-moderate, #panel-index, #panel-users) .btn-primary { font-weight: 600; color: var(--accent-ink); }
:is(#panel-index, #panel-users) a.btn { text-decoration: none; display: inline-flex; align-items: center; }
#panel-index .inv-panel-title, #panel-index .inv-panel .muted { margin: 0; }
#panel-index .inv-panel-title { font-size: 15px; font-weight: 600; }
#panel-index .inv-panel > .muted { max-width: 760px; line-height: 1.5; }

.adm-toolbar { display: flex; align-items: center; gap: 12px; }
.adm-toolbar:not(:has(#moderateApproveAllBtn:not([style*="none"]))):has(.adm-count:empty) { display: none; }
.adm-count { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.adm-count:empty { display: none; }
.adm-mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.adm-mod-grid > .muted { grid-column: 1 / -1; margin: 0; padding: 16px 18px; background: var(--surface); border-radius: 10px; }
#panel-moderate .adm-mod-card { background: var(--surface); border: none; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
#panel-moderate .adm-mod-card img { width: 100%; aspect-ratio: 5 / 7; max-height: none; object-fit: contain; border-radius: 7px; background: var(--surface-3); cursor: zoom-in; }
#panel-moderate .adm-mod-card .orig-name { font-size: 13px; font-weight: 600; color: var(--text); margin-top: 4px; word-break: break-word; }
#panel-moderate .adm-mod-card .match-score { font-size: 12px; color: var(--text-faint); margin: 0; font-variant-numeric: tabular-nums; }
#panel-moderate .adm-mod-card .review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
#panel-moderate .adm-mod-card .review-actions .btn { font-size: 13px; padding: 8px 0; border-radius: 6px; }

.adm-source-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px;
  padding: 14px; background: var(--surface-2); border-radius: 8px;
}
.adm-source-list:empty { display: none; }
#panel-index .adm-source-list .radio-row { margin: 0; color: var(--text-soft); align-items: flex-start; line-height: 1.4; }
#panel-index .adm-source-list input { accent-color: var(--accent); width: 15px; height: 15px; margin: 1px 0 0; flex-shrink: 0; }
#panel-index .progress-row { margin: 0; }
#panel-index .progress-track { height: 4px; background: var(--border); }
#panel-index .progress-fill { background: var(--accent); }
#panel-index #indexStatusLine, #panel-index #syncCardSetsStatusLine { margin: 0; }
#panel-index #indexStatusLine:empty { display: none; }
#panel-index .install-log { background: #0B0D10; border: none; border-radius: 8px; font-family: var(--font-mono); font-size: 12px; }

.adm-users-top { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
#panel-users .adm-scans-stat { margin: 0; }
#panel-users .adm-scans-stat .stat {
  background: var(--surface); border: none; border-radius: 10px; padding: 16px 20px; min-width: 220px;
  display: flex; flex-direction: column; gap: 4px;
}
#panel-users .adm-scans-stat .stat-label { margin: 0; font-size: 12px; }
#panel-users .adm-scans-stat .stat-value { font-size: 26px; font-variant-numeric: tabular-nums; }
.adm-users-search { flex: 1; flex-direction: row; align-items: center; gap: 10px; padding: 14px; }
#panel-users .adm-users-search .text-input { flex: 1; margin: 0; font-size: 13px; padding: 8px 10px; border-radius: 6px; background: var(--bg); font-family: var(--font-sans); }
.adm-users-list { background: var(--surface); border-radius: 10px; overflow: hidden; }
.adm-users-list > .muted { margin: 0; padding: 16px 18px; }
#panel-users .user-row {
  background: none; border: none; border-bottom: 1px solid #1F242B; border-radius: 0; margin: 0; padding: 12px 18px; gap: 12px;
}
#panel-users .user-row:last-child { border-bottom: none; }
#panel-users .user-row:hover { background: var(--surface-2); }
#panel-users .user-row-name { font-weight: 600; }
.user-row-you { color: var(--text-muted); font-weight: 400; }
#panel-users .user-row .sort-select { background-color: var(--bg); border-radius: 6px; font-size: 12px; }
#panel-users .user-row > .muted.small { color: var(--text-soft); }
.adm-tag { font-size: 11px; font-weight: 600; border-radius: 4px; padding: 2px 7px; white-space: nowrap; }
.adm-tag-ok { color: var(--success); background: var(--success-bg); }
.adm-tag-warn { color: var(--warning); background: var(--warning-bg); }
.adm-tag-bad { color: var(--danger); background: var(--danger-bg); }
.adm-tag-info { color: #7CC4F2; background: #12283A; }
.adm-tag-gold { color: var(--accent); background: #2A2415; }
.adm-tag-muted { color: var(--text-muted); background: var(--surface-3); }
#panel-users .user-row-verified { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.adm-users-filters { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; margin: 14px 0 10px; }
.adm-filter { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--text-soft); }
#panel-users .adm-filter .sort-select { margin: 0; width: auto; font-size: 13px; padding: 7px 10px; border-radius: 6px; background-color: var(--surface); }
.adm-filter-count { margin-left: auto; }
#panel-users .user-trial-email-btn { padding: 3px 9px; font-size: 11px; font-weight: 600; border-radius: 4px; white-space: nowrap; }

#panel-comments .thread-list-toolbar { margin: 0; padding: 10px 18px; border-bottom: 1px solid var(--border); }
#panel-comments .thread-list-toolbar label { font-size: 13px; color: var(--text-soft); }
#panel-comments .thread-list-toolbar input, #panel-comments .thread-row-checkbox { accent-color: var(--accent); width: 15px; height: 15px; }
#panel-comments .thread-delete-selected-btn { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
#panel-comments .thread-row { background: none; border: none; border-bottom: 1px solid #1F242B; border-radius: 0; margin: 0; padding: 14px 18px; }
#panel-comments .thread-row:last-child { border-bottom: none; }
#panel-comments .thread-row:hover { background: var(--surface-2); }
#panel-comments .thread-row-name { font-weight: 500; }
#panel-comments .thread-row-unread .thread-row-name { font-weight: 600; }
#panel-comments .thread-row-body:hover .thread-row-name { color: var(--text); }
#panel-comments .thread-row-meta { color: var(--text-faint); font-variant-numeric: tabular-nums; }
#panel-comments .unread-pill { background: var(--accent); color: var(--accent-ink); font-weight: 600; border-radius: 9px; }

@media (max-width: 780px) {
  .adm-source-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   User Guide & Help - holo gold restyle (in-app panel only; the public
   help.html shares help-content.js but keeps the older styles above).
--------------------------------------------------------------------- */
#panel-help .inv-title { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.6px; line-height: 1.15; }
#panel-help .inv-head-text .muted { margin: 0; font-size: 14px; }
#panel-help .help-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.help-search {
  flex: 0 1 380px; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted);
  transition: border-color .15s;
}
.help-search:focus-within { border-color: var(--accent); }
#panel-help .help-search .text-input {
  flex: 1; min-width: 0; height: 100%; padding: 0; margin: 0; border: none; background: transparent;
  box-shadow: none; outline: none; font-family: inherit; font-size: 14px; color: var(--text);
}
#panel-help .help-search .text-input::placeholder { color: var(--text-faint); font-family: inherit; }

#panel-help .help-layout { gap: 56px; margin-top: 4px; }
.help-toc-col {
  flex: 0 0 250px; position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px;
  max-height: calc(100vh - 140px);
}
.help-toc-count { font-size: 12px; color: var(--text-faint); padding-left: 13px; }
#panel-help .help-toc {
  position: static; flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto;
  background: none; border: none; border-left: 1px solid var(--border); border-radius: 0; padding: 0; gap: 0;
}
#panel-help .help-toc-link {
  padding: 7px 12px 7px 13px; border-radius: 0; font-size: 13px; line-height: 1.35; color: var(--text-muted);
  transition: color .15s;
}
#panel-help .help-toc-link:hover { background: none; color: var(--text); }
#panel-help .help-toc-link.is-active {
  margin-left: -1px; padding-left: 12px; border-left: 2px solid var(--accent); color: var(--text); font-weight: 500;
}

#panel-help .help-content-wrap { max-width: 720px; }
#panel-help #helpNoResults { margin: 0; font-size: 14px; }
#panel-help .help-content { gap: 0; }
#panel-help .help-section {
  background: none; border: none; border-radius: 0; padding: 36px 0; scroll-margin-top: 16px;
  border-top: 1px solid #1F242B;
}
#panel-help .help-content > .help-section:first-child { border-top: none; padding-top: 0; }
#panel-help .help-section h3 { margin: 0 0 14px; font-size: 20px; font-weight: 600; letter-spacing: -0.3px; color: var(--text); }
#panel-help .help-section p,
#panel-help .help-list { font-size: 15px; line-height: 1.65; color: var(--text-soft); margin: 0 0 14px; text-wrap: pretty; }
#panel-help .help-list li { margin-bottom: 8px; padding-left: 4px; }
#panel-help .help-section strong { color: var(--text); font-weight: 600; }
#panel-help .help-section code {
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px;
  background: var(--surface-2); border-radius: 4px; padding: 1px 5px; color: var(--text);
}
#panel-help .help-screenshot {
  margin-top: 18px; padding: 8px; background: var(--surface); border: none; border-radius: 12px; box-sizing: border-box;
}
.help-figure { margin: 16px 0 20px; }
.help-figure .help-screenshot, #panel-help .help-figure .help-screenshot { margin-top: 0; width: auto; max-width: 100%; max-height: 560px; }
.help-figure figcaption { margin-top: 7px; font-size: 12px; color: var(--text-muted); }

@media (max-width: 900px) {
  .help-toc-col { position: static; flex: 1 1 auto; max-height: none; width: 100%; }
  #panel-help .help-toc { flex-direction: row; flex-wrap: wrap; border-left: none; }
  #panel-help .help-toc-link.is-active { margin-left: 0; border-left: none; padding-left: 13px; color: var(--accent); }
  .help-search { flex-basis: 100%; }
}

/* ---------------------------------------------------------------------
   Pop-up windows - holo gold restyle. One shared frame for every
   .modal-overlay: header (title/subtitle + the × .modal-close), scrolling
   body, and a .modal-actions footer with the main button last.
--------------------------------------------------------------------- */
.modal-overlay { background: rgba(5, 6, 8, 0.74); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal-box {
  background: var(--surface); border: none; border-radius: 14px;
  box-shadow: inset 0 0 0 1px #232830, 0 24px 60px rgba(0, 0, 0, 0.55);
}
.modal-box.modal-warn { box-shadow: inset 0 0 0 1px #3A3120, 0 24px 60px rgba(0, 0, 0, 0.55); }
.modal-box.modal-warn .compare-modal-header h2 { display: flex; align-items: center; gap: 8px; }
.modal-box.modal-warn .compare-modal-header h2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); flex: none; }

.modal-box > .compare-modal-header {
  align-items: flex-start; gap: 16px; padding: 20px 20px 0 24px; border-bottom: none;
}
.modal-box > .compare-modal-header > div:first-child,
.modal-box > .compare-modal-header > h2 { padding-top: 4px; min-width: 0; }
.modal-box > .compare-modal-header:not(:has(.modal-close, .btn)) { padding-right: 24px; }
.modal-box .compare-modal-header h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.3; }
.modal-box .compare-modal-header .muted,
.modal-box .compare-modal-header .modal-sub { margin: 4px 0 0 !important; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
#scanConfirmModalOverlay .compare-modal-header { justify-content: flex-start; }
#scanConfirmModalOverlay .compare-modal-header h2 { text-align: left; }

.modal-close {
  flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; background: transparent; border: none; border-radius: 7px; color: var(--text-muted); cursor: pointer;
  transition: background .15s, color .15s;
}
.modal-close:hover { background: var(--surface-3); color: var(--text); }
.modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.modal-box > .listings-modal-body { padding: 18px 24px 22px; gap: 10px; }
.modal-box > .listings-modal-sort-row { padding: 16px 24px 0; }

.modal-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 16px 24px; margin: 0; border-top: 1px solid #1F242B; flex-shrink: 0;
}
.modal-actions > .muted { margin: 0 auto 0 0; order: -1; }
.modal-actions.modal-actions-note { justify-content: space-between; flex-wrap: nowrap; }
.modal-actions.modal-actions-note > p { max-width: 460px; }
.modal-actions .btn { flex: 0 0 auto; width: auto; }

/* buttons inside pop-ups */
.modal-box .btn { font-size: 13px; border-radius: 8px; padding: 9px 16px; }
.modal-box .btn-sm { padding: 7px 12px; }
.modal-box .btn-primary { font-weight: 600; color: var(--accent-ink); }
.modal-box .btn-outline { background: var(--surface-3); border-color: transparent; color: var(--text); }
.modal-box .btn-outline:hover:not(:disabled) { background: #2A3038; border-color: transparent; }
.btn-ghost { background: transparent; border: 1px solid transparent; color: var(--text-soft); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
#wantedSubmitBtn, #sellSubmitBtn, #feedbackReplySendBtn { display: block; margin: 14px 0 0 auto; }

/* fields inside pop-ups */
.modal-box .field-label { margin: 6px 0 6px; font-size: 13px; color: var(--text-soft); }
.modal-box .listings-modal-body > .field-label:first-child { margin-top: 0; }
.modal-box .name-edit-input, .modal-box .text-input, .modal-box textarea {
  margin: 0; background: var(--bg); border-color: var(--border); font-family: inherit; font-size: 14px; padding: 9px 12px;
}
.modal-box .name-edit-input::placeholder, .modal-box .text-input::placeholder, .modal-box textarea::placeholder { color: var(--text-faint); font-family: inherit; }
.modal-box select { background-color: var(--bg); font-family: inherit; font-size: 14px; min-height: 38px; }
.modal-box .sort-select { margin-bottom: 4px !important; }
.modal-box input[type="checkbox"] { accent-color: var(--accent); }

/* Scan settings */
#scanSettingsModalOverlay .settings-section { padding: 18px 0; border-bottom: 1px solid #1F242B; display: flex; flex-direction: column; gap: 12px; }
#scanSettingsModalOverlay .settings-section:first-child { padding-top: 0; }
#scanSettingsModalOverlay .settings-section-label { margin: 0; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); }
#scanSettingsModalOverlay .listings-modal-body { gap: 0; }
#scanSettingsModalOverlay .folder-row { margin: 0; gap: 12px; }
#scanSettingsModalOverlay .folder-path { font-family: inherit; font-size: 13px; color: var(--text-muted); }
#scanSettingsModalOverlay .type-row { border: none; padding: 0; margin: 0; gap: 12px; }
#scanSettingsModalOverlay .type-field .field-label { margin: 0 0 6px; }
#scanSettingsModalOverlay .type-field select { background-color: var(--bg); margin: 0; }
#scanSettingsModalOverlay .am-box { background: var(--bg); border-color: var(--border); }
#scanSettingsModalOverlay .radio-row { margin: 0; }
.modal-box .pill-toggle { border-radius: 8px; background: var(--bg); border: 1px solid var(--border); padding: 3px; gap: 2px; }
.modal-box .pill-toggle-option span { border-radius: 6px; padding: 6px 12px; font-weight: 500; }
.modal-box .pill-toggle-option input:checked + span { background: #2A2415; color: var(--accent); box-shadow: inset 0 0 0 1px #5A4520; font-weight: 500; }
#scanSettingsModalOverlay .scan-settings-footer { padding: 16px 24px; border-top: 1px solid #1F242B; }
#scanSettingsContinueBtn { padding: 10px 28px; }

/* Confirm scan settings */
.scan-confirm-summary { background: var(--bg); border-radius: 10px; padding: 4px 14px; }
.modal-box .scan-confirm-row { font-size: 13px; border-bottom: 1px solid #1F242B; }
.modal-box .scan-confirm-row:last-child { border-bottom: none; }
.modal-box .scan-confirm-row span:last-child { font-weight: 500; }

/* Plan gate */
.plan-gate-plans { display: flex; gap: 12px; }
.plan-gate-plan-btn {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; text-align: left;
  font-family: inherit; color: var(--text); background: var(--bg); border: none; border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; transition: box-shadow .15s, background .15s;
}
.plan-gate-plan-btn:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.plan-gate-plan-btn.plan-gate-featured { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent); }
.plan-gate-name { font-size: 13px; font-weight: 600; }
.plan-gate-price { font-size: 22px; font-weight: 600; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; }
.plan-gate-per { font-size: 12px; color: var(--text-muted); }
.btn-trial-outline {
  width: 100%; margin-top: 4px; background: transparent; border: 1px solid var(--accent); color: var(--accent);
  font-size: 14px !important; font-weight: 600; padding: 11px 0 !important;
}
.btn-trial-outline:hover:not(:disabled) { background: #2A2415; }
#planGateDeleteBtn { align-self: center; font-size: 12px; }

/* Card comparison & search */
#compareModalOverlay .compare-modal-body { padding: 18px 24px 24px; }
#compareModalOverlay .compare-label { font-size: 12px; color: var(--text-muted); text-transform: none; letter-spacing: 0; font-weight: 400; display: flex; align-items: center; gap: 8px; }
#compareModalOverlay .compare-modal-col img { border: none; box-shadow: inset 0 0 0 1px var(--border); }
#compareModalOverlay .compare-modal-nav { gap: 6px; }
#compareModalOverlay #compareModalCounter { font-variant-numeric: tabular-nums; padding: 0 4px; }
.modal-box .match-pct-pill { border-radius: 4px; padding: 1px 6px; margin-left: 0; font-weight: 600; }
.modal-box .compare-candidate { border: none; background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); }
.modal-box .compare-candidate-current { box-shadow: inset 0 0 0 1px var(--accent); }

/* Image and screenshot viewers */
.image-zoom-box, .screenshot-zoom-box { background: var(--surface); border: none; box-shadow: inset 0 0 0 1px #232830, 0 24px 60px rgba(0, 0, 0, 0.55); }
.image-zoom-box .compare-modal-header, .screenshot-zoom-box .compare-modal-header { align-items: center; padding: 0 0 0 4px; border: none; font-size: 14px; font-weight: 500; }

/* Tour prompt */
#tourPromptModalOverlay .modal-box { padding: 28px 24px 24px; }
#tourPromptModalOverlay h2 { margin: 0 0 6px; font-size: 20px; font-weight: 600; letter-spacing: -0.3px; }

.modal-box .csv-layout-preview-heading { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--text); }

@media (max-width: 640px) {
  .plan-gate-plans { flex-direction: column; }
  .modal-actions.modal-actions-note { flex-wrap: wrap; }
}
.modal-box .listings-modal-body > .field-label { margin: 6px 0 -4px; }
.modal-box .listings-modal-body > .field-label:first-child { margin-top: 0; }
.modal-box .csv-layout-header-row { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--text-muted); }
#csvLayoutAddColumnBtn { align-self: flex-start; }
.modal-box input[type="file"] { font-family: inherit; font-size: 13px; color: var(--text-muted); }
.modal-box input[type="file"]::file-selector-button {
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text); background: var(--surface-3);
  border: none; border-radius: 7px; padding: 7px 12px; margin-right: 10px; cursor: pointer;
}

/* eBay Settings dropdowns - same Geist as every other field (the older
   #panel-settings select rule above still set the mono font) */
#panel-settings select { font-family: inherit; }

/* ---------------------------------------------------------------------
   Take a Tour - holo gold restyle: topic menu, a step card that sits beside
   its target (never on it) with an arrow pointing at it, between-topics and
   finish cards, a keyboard hint, and a bottom sheet on phones.
--------------------------------------------------------------------- */
.tour-spotlight {
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(5, 6, 8, 0.72), 0 0 0 2px var(--accent), 0 0 28px 4px rgba(217, 164, 65, 0.45);
  animation: none;
}
.tour-spotlight.tour-spotlight-full {
  top: 50% !important; left: 50% !important; width: 0 !important; height: 0 !important;
  box-shadow: 0 0 0 9999px rgba(5, 6, 8, 0.74);
  transition: none;
}
.tour-tooltip {
  width: 380px;
  padding: 0;
  border: none;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px #2A3038, 0 24px 60px rgba(0, 0, 0, 0.6);
  transition: top 0.25s ease, left 0.25s ease;
}
.tour-tooltip::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--surface);
  transform: rotate(45deg);
  display: none;
}
.tour-tooltip[data-side="below"]::before { display: block; top: -7px; left: calc(var(--arrow-x, 50%) - 7px); box-shadow: -1px -1px 0 0 #2A3038; }
.tour-tooltip[data-side="above"]::before { display: block; bottom: -7px; left: calc(var(--arrow-x, 50%) - 7px); box-shadow: 1px 1px 0 0 #2A3038; }
.tour-tooltip[data-side="right"]::before { display: block; left: -7px; top: calc(var(--arrow-y, 50%) - 7px); box-shadow: -1px 1px 0 0 #2A3038; }
.tour-tooltip[data-side="left"]::before { display: block; right: -7px; top: calc(var(--arrow-y, 50%) - 7px); box-shadow: 1px -1px 0 0 #2A3038; }

.tour-tooltip-main { position: relative; padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.tour-tooltip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#tourChapterLabel { font-size: 12px; font-weight: 500; color: var(--accent); }
#tourStepCounter { font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.tour-progress { display: flex; gap: 3px; height: 3px; margin: 0; background: none; border-radius: 0; overflow: visible; }
.tour-progress span { flex: 1; height: 3px; border-radius: 2px; background: var(--surface-3); transition: background 0.2s ease; }
.tour-progress span.is-on { background: var(--accent); }

.tour-tooltip-content { display: flex; flex-direction: column; gap: 8px; }
.tour-tooltip h3 { margin: 4px 0 0; font-size: 17px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.3; }
#tourBody { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-soft); }
#tourBodyMore { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.tour-more-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 2px 0;
  border: none; background: none; font-family: inherit; font-size: 12px; color: var(--text-muted); cursor: pointer;
}
.tour-more-btn:hover { color: var(--text); }
.tour-more-btn svg { transition: transform 0.15s ease; }
.tour-more-btn.is-open svg { transform: rotate(180deg); }

.tour-tooltip-actions { display: flex; align-items: center; gap: 6px; margin: 0; padding: 12px 14px 12px 12px; border-top: 1px solid #1F242B; }
.tour-tooltip .btn, .tour-card .btn { font-size: 13px; border-radius: 8px; }
.tour-tooltip .btn-outline, .tour-card .btn-secondary { background: var(--surface-3); border-color: transparent; color: var(--text); }
.tour-tooltip .btn-outline:hover { background: #2A3038; border-color: transparent; }
.tour-tooltip .btn-ghost, .tour-card .btn-ghost { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; }
.tour-exit-btn { color: var(--text-muted); }
.tour-tooltip .btn-primary, .tour-card .btn-primary { font-weight: 600; color: var(--accent-ink); }

.tour-key-hint {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 502;
  align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px;
  background: rgba(21, 24, 29, 0.92); font-size: 12px; color: var(--text-muted); pointer-events: none;
}
.tour-key-hint kbd {
  min-width: 18px; text-align: center; padding: 1px 5px; border-radius: 4px;
  background: var(--surface-3); color: var(--text-soft); font-family: inherit; font-size: 11px;
}

.tour-card {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 502;
  width: 420px; max-width: calc(100vw - 32px); padding: 26px 26px 0; border-radius: 16px;
  background: var(--surface); box-shadow: inset 0 0 0 1px #232830, 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: tourContentIn 0.25s ease;
}
.tour-card-badge {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--accent-bg, #2A2415); color: var(--accent);
}
.tour-card h2 { margin: 16px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -0.3px; }
#tourCardText { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-soft); }
#tourCardText strong { color: var(--text); font-weight: 500; }
.tour-card-progress { margin-top: 16px; }
.tour-card-progress-label { margin-top: 8px; font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.tour-card-actions {
  display: flex; align-items: center; gap: 8px; margin: 20px -26px 0; padding: 14px 18px; border-top: 1px solid #1F242B;
}
.tour-card-spacer { flex: 1; }
.tour-card-actions.tour-card-actions-stack { flex-wrap: wrap; border-top: none; padding: 0 26px 24px; margin-top: 20px; }
.tour-card-actions-stack .btn { flex: 1 1 calc(50% - 4px); justify-content: center; padding: 10px 12px; }
.tour-card-actions-stack .btn-primary { flex-basis: 100%; font-size: 14px; padding: 11px 12px; }

/* Topic menu */
.tour-menu-overlay { z-index: 503; }
.tour-menu-overlay .modal-actions-note { gap: 16px; }
.tour-menu-overlay .modal-actions-note > div { flex: none; }
.tour-menu-overlay .modal-actions-note > p { min-width: 0; }
.tour-menu-box .listings-modal-body { gap: 12px; }
.tour-menu-resume {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
  border-radius: 10px; background: #1D1A12; box-shadow: inset 0 0 0 1px #5A4520;
}
.tour-menu-resume-label { font-size: 12px; color: var(--accent); }
.tour-menu-resume-text { font-size: 14px; font-weight: 500; margin-top: 2px; }
.tour-menu-list { display: flex; flex-direction: column; gap: 1px; margin: 0 -12px; }
.tour-menu-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: none; border-radius: 8px;
  background: transparent; font-family: inherit; text-align: left; color: var(--text); cursor: pointer; transition: background 0.15s ease;
}
.tour-menu-row:hover, .tour-menu-row.is-current { background: var(--surface-2); }
.tour-menu-mark {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); font-variant-numeric: tabular-nums;
}
.tour-menu-mark svg { width: 12px; height: 12px; }
.tour-menu-row.is-done .tour-menu-mark { background: #2A2415; color: var(--accent); box-shadow: none; }
.tour-menu-row.is-current .tour-menu-mark { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tour-menu-name { flex: 1; font-size: 14px; }
.tour-menu-row.is-done .tour-menu-name { color: var(--text-soft); }
.tour-menu-meta { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.tour-menu-row.is-current .tour-menu-meta { color: var(--accent); }
.tour-menu-chev { color: var(--text-faint); flex: none; }

/* Phones: the step card docks to the bottom as a sheet */
.tour-tooltip.has-img { width: 540px; }
.tour-img-zoom { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 32px; background: rgba(5, 6, 8, .86); cursor: zoom-out; }
.tour-img-zoom img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.tour-img { margin: 2px 0 2px; position: relative; cursor: zoom-in; border-radius: 9px; overflow: hidden; background: var(--bg); box-shadow: inset 0 0 0 1px #2A3038; }
.tour-img img { display: block; width: 100%; max-height: 340px; object-fit: contain; object-position: top center; }
.tour-img figcaption { position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 6px; font-size: 11px; color: var(--text); background: rgba(14, 16, 20, .82); opacity: 0; transition: opacity .15s; }
.tour-img:hover figcaption { opacity: 1; }
.tour-tooltip-sheet .tour-img img { max-height: 28vh; }
.tour-tooltip.tour-tooltip-sheet {
  left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-width: none;
  border-radius: 18px 18px 0 0; box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 #2A3038;
  transition: none;
}
.tour-tooltip.tour-tooltip-sheet::before {
  display: block; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px;
  transform: none; box-shadow: none; background: var(--surface-3);
}
.tour-tooltip-sheet .tour-tooltip-main { padding-top: 22px; }
.tour-tooltip-sheet .tour-tooltip-actions { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 640px) {
  .tour-key-hint { display: none !important; }
  .tour-card-actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-spotlight, .tour-tooltip { transition: none; }
  .tour-tooltip-content.tour-content-animate, .tour-card { animation: none; }
}


/* ---------------------------------------------------------------------
   Phone layout (760px and below). The sidebar becomes a slide-in menu
   opened from a menu button in the top bar (body.sidebar-open, see
   openMobileMenu in app.js); every page drops to one column with tighter
   padding; Chat shows the list or the open conversation, one at a time;
   pop-ups become full-height sheets. Wider screens are untouched.
--------------------------------------------------------------------- */
.mobile-menu-btn, .sidebar-close-btn, .sidebar-scrim { display: none; }
.sidebar-head { display: contents; }
.chat-back-btn { display: none; }

@media (hover: none) {
  .binder-tile-actions { opacity: 1; }
}

@media (max-width: 760px) {
  .app-shell { height: 100vh; height: 100dvh; }

  /* --- slide-in menu --- */
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 150;
    width: min(308px, 86vw); padding: 0; background: #101216;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .24s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .24s;
  }
  body.sidebar-open .sidebar {
    transform: none; visibility: visible; box-shadow: 24px 0 60px rgba(0, 0, 0, .5);
    transition: transform .24s cubic-bezier(.2, .8, .2, 1);
  }
  body.sidebar-instant .sidebar { transition: none; }
  .sidebar-head {
    display: flex; align-items: center; gap: 4px; height: 56px; flex-shrink: 0;
    padding: 0 8px 0 8px; border-bottom: 1px solid #1F242B;
  }
  .sidebar-head .brand { padding: 6px 10px; flex: 1; }
  .sidebar-close-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; padding: 0; border: none; border-radius: 10px;
    background: transparent; color: var(--text-soft); cursor: pointer;
  }
  .sidebar-close-btn:hover, .sidebar-close-btn:focus-visible { background: var(--surface-2); color: var(--text); }
  .sidebar .nav { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; overscroll-behavior: contain; }
  .sidebar .nav-item { min-height: 42px; font-size: 15px; gap: 12px; }
  .sidebar .nav-highlight-btn { min-height: 42px; font-size: 15px; margin-top: 6px; }
  .sidebar-footer {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex-shrink: 0;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid #1F242B;
  }
  .sidebar-footer > * { margin: 0 !important; }
  .sidebar-footer .index-pill { grid-column: 1 / -1; }
  .sidebar-footer #tourBtnApp { grid-column: 1; grid-row: 2; }
  .sidebar-footer #logoutBtn { grid-column: 2; grid-row: 2; }
  .sidebar-footer #currentUsername { grid-column: 1 / -1; grid-row: 3; text-align: center; font-size: 12px; }
  .sidebar-scrim {
    display: block; position: fixed; inset: 0; z-index: 140;
    background: rgba(5, 6, 8, .62); opacity: 0; pointer-events: none; transition: opacity .24s ease;
  }
  body.sidebar-open .sidebar-scrim { opacity: 1; pointer-events: auto; }

  /* --- top bar --- */
  .topbar { flex-wrap: nowrap; gap: 10px; height: 56px; padding: 0 12px 0 8px; flex-shrink: 0; }
  .topbar h1 { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-menu-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; padding: 0; border: none; border-radius: 10px;
    background: transparent; color: var(--text); cursor: pointer;
  }
  .mobile-menu-btn:hover, .mobile-menu-btn:focus-visible { background: var(--surface-2); }
  .mobile-menu-dot {
    position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--danger); box-shadow: 0 0 0 2px var(--bg);
  }
  .mobile-menu-dot[hidden] { display: none; }
  .topbar-currency { gap: 6px; flex: none; }
  .topbar-currency .field-label { order: 2; font-size: 0; }
  .topbar-currency .field-label .info-icon { font-size: 11px; }
  .topbar-currency select { height: 32px; font-size: 13px; }
  .plan-status-banner { margin: 12px 16px 0; flex-wrap: wrap; }

  /* --- one column --- */
  .content { padding: 20px 16px calc(32px + env(safe-area-inset-bottom)); }
  .pl-view { gap: 16px; }
  .card-block { padding: 16px; margin-bottom: 16px; }
  .inv-head { gap: 14px; }
  .inv-head-actions { width: 100%; }
  .inv-title, :is(#panel-chat, #panel-inbox) .inv-title { font-size: 24px; }
  .subtab-row { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .subtab-row::-webkit-scrollbar { display: none; }
  .subtab-row .subtab-btn { flex: none; white-space: nowrap; }
  #panel-marketplace .mkt-tabs { align-self: stretch; }
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); overflow: hidden;
  }
  #panel-my-collection .inv-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-stats .total-value-block { padding: 12px; background: var(--surface); min-width: 0; }
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-stats .total-value-block + .total-value-block { border: none; }
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-stats .total-value-label { font-size: 11px; }
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .inv-stats .total-value-amount { font-size: 18px; }

  /* --- Manage Users toolbar --- */
  .adm-users-top { flex-direction: column; gap: 10px; }
  #panel-users .adm-scans-stat .stat { min-width: 0; }
  .adm-users-search { flex-wrap: wrap; }
  #panel-users .adm-users-search .text-input { flex: 1 1 100%; }
  #panel-users .adm-users-search .btn { flex: 1 1 100%; justify-content: center; }

  /* --- Scan & Match --- */
  .scan-header-row #scanSettingsBtn { width: 100%; justify-content: center; }
  .scan-summary { flex-wrap: wrap; }
  .scan-summary-stat { flex: 1 1 0; padding: 10px 12px; }
  .scan-summary .stat-label { font-size: 11px; line-height: 1.3; min-height: 28px; }
  .scan-summary .stat-value { font-size: 18px; }
  .scan-summary-actions { flex-basis: 100%; padding: 12px; border-left: none; border-top: 1px solid var(--border); }
  .scan-summary .scan-buttons-row .btn { flex: 1 1 0; min-width: 0; white-space: normal; }
  .scan-batch-header { flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; }
  .scan-batch-row { flex-direction: column; gap: 10px; padding: 14px; }
  .scan-batch-label { flex: none; padding-top: 0; font-weight: 600; font-size: 12px; }
  .scan-batch-body { width: 100%; }
  .scan-batch-controls > .btn, .scan-batch-controls > .searchable-select { flex: 1 1 100%; width: 100% !important; justify-content: center; }
  .scan-batch-controls > select { flex: 1 1 0; min-width: 0; max-width: none !important; }
  .scan-batch-controls > .scan-batch-inline-label { flex-basis: 100%; }
  .scan-batch-divider { display: none; }
  .scan-bulk-price-group { flex-wrap: wrap; width: 100%; }
  #scanSaveIntoRow { flex-wrap: wrap; }
  #scanSaveIntoRow > .field-label { flex-basis: 100%; }

  /* --- Inventory: binder tiles become rows --- */
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-grid { grid-template-columns: 1fr; gap: 8px; padding-top: 0; }
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-stack { height: auto; aspect-ratio: auto; }
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-stack .binder-book.vol-back-1,
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-stack .binder-book.vol-back-2 { display: none; }
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-book.vol-front {
    position: relative; inset: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; column-gap: 12px; row-gap: 3px; padding: 14px 16px 14px 24px;
  }
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-book.vol-front .binder-book-icon { display: none; }
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-book.vol-front .binder-book-name { grid-column: 1; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px; }
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-book.vol-front .binder-book-meta { grid-column: 1; margin: 0; }
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-book.vol-front .binder-book-value { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 17px; }
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-book.vol-front .fill-row { grid-column: 1; margin-top: 6px; }
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .vol-badge { top: auto; bottom: 14px; right: 16px; }
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-tile-actions { top: auto; bottom: 10px; right: 12px; }
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-stack:has(.binder-tile-action-btn) .vol-badge { right: 76px; }
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-stack:has(.binder-tile-action-btn) .binder-book.vol-front,
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-stack:has(.vol-badge) .binder-book.vol-front { padding-bottom: 40px; }
  :is(#panel-my-collection, #panel-pricing, #panel-find-cards) .binder-stack:hover:has(.binder-tile-action-btn) .vol-badge { opacity: 1; }

  /* --- Chat: the list, or the open conversation --- */
  #panel-chat .chat-shell { height: calc(100dvh - 210px); min-height: 440px; border-radius: 12px; }
  #panel-chat .chat-rail { width: 100%; border-right: none; padding: 14px; }
  #panel-chat .chat-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #panel-chat .chat-tabs::-webkit-scrollbar { display: none; }
  #panel-chat .chat-tabs > * { flex: none; white-space: nowrap; }
  #panel-chat .chat-main { display: none; }
  #panel-chat .chat-shell:has(.chat-thread-header) .chat-rail { display: none; }
  #panel-chat .chat-shell:has(.chat-thread-header) .chat-main { display: flex; }
  #panel-chat:has(.chat-thread-header) .inv-head { display: none; }
  #panel-chat:has(.chat-thread-header) .chat-shell { height: calc(100dvh - 56px - 40px); }
  .chat-back-btn { display: inline-flex; margin-left: -6px; }
  .chat-thread-header { padding: 10px 12px; }
  .chat-thread-who { gap: 10px; min-width: 0; }
  .chat-messages { padding: 14px; }
  .chat-composer { gap: 8px; padding: 10px 12px; }
  .chat-composer-input.text-input { min-width: 0; }

  /* --- pop-ups: full-height sheets --- */
  .modal-overlay { padding: 28px 0 0; align-items: flex-end; }
  .modal-box {
    width: 100%; max-width: none !important; max-height: calc(100dvh - 28px) !important;
    border-radius: 16px 16px 0 0;
  }
  .modal-box > .compare-modal-header { padding: 16px 12px 0 20px; }
  .modal-box > .listings-modal-body { padding: 16px 20px 18px; }
  .modal-box > .listings-modal-sort-row { padding: 14px 20px 0; }
  .modal-actions { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); gap: 8px; }
  .modal-actions > .btn { flex: 1 1 auto; justify-content: center; }
  .modal-actions > .btn:last-child { flex-grow: 2; }
}

/* eBay / TCGplayer price cards: the "median · N listings · range" line always
   sits under the price (a short one used to sit beside it, a long one wrapped
   below - so the two cards' Accept buttons ended up at different heights),
   and the Accept row is pinned to the card's bottom so the buttons line up
   across both cards even if one meta line wraps. */
.price-block-meta { flex-basis: 100%; }
.scan-result-price-cols .ebay-price-block > .accept-price-row { margin-top: auto; }

/* Side by side, the two price cards share their rows (header, price, Accept
   buttons, Adjust) so a longer line in one card - such as the Adjust note
   wrapping - can't push the other card's buttons out of line. */
@media (min-width: 1101px) {
  .scan-result-price-cols { row-gap: 0; }
  .scan-result-price-cols .ebay-price-block {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 10px;
    align-content: start;
  }
  .scan-result-price-cols .ebay-price-block > .accept-price-row { margin-top: 0; align-self: end; }
  .scan-result-price-cols .ebay-price-block > .price-adjust-row { align-self: stretch; }
}

/* Wanted / Sell price range: the "Any" labels under the slider are typable
   $ boxes now (see wirePriceNumberInputs in app.js). */
.wanted-price-range-labels { align-items: center; gap: 12px; margin-top: 6px; }
.wanted-price-num { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.wanted-price-num > span { font-size: 13px; color: var(--text-muted); }
.wanted-price-num .text-input {
  width: 92px; margin: 0; padding: 6px 10px; font-size: 13px; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.wanted-price-num .text-input::-webkit-outer-spin-button,
.wanted-price-num .text-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wanted-price-range-labels > .wanted-price-num:last-child .text-input { text-align: right; }


/* ---------------------------------------------------------------------
   eBay store profiles - the store row on eBay Settings, the Add store /
   connect / upload-store pop-ups, and per-store upload results.
--------------------------------------------------------------------- */
.ebs-stores { background: var(--surface); border-radius: 10px; padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.ebs-stores-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ebs-stores-head .muted { margin: 6px 0 0; font-size: 13px; line-height: 1.55; max-width: 720px; }
#panel-settings .ebs-stores .ebs-title { margin: 0; font-size: 16px; }
.ebs-danger-btn { color: var(--danger) !important; }
.ebs-store-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.ebs-store-tab-list { display: contents; }
.ebs-store-tab {
  display: flex; align-items: center; gap: 10px; min-width: 190px; padding: 10px 14px; border: none; border-radius: 10px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); color: var(--text-muted);
  font-family: inherit; text-align: left; cursor: pointer; transition: box-shadow .15s, background .15s;
}
.ebs-store-tab:hover { box-shadow: inset 0 0 0 1px #3A414C; }
.ebs-store-tab.is-active { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.ebs-store-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ebs-store-tab-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ebs-store-tab-name { font-size: 14px; font-weight: 600; color: var(--text); }
.ebs-store-tab-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.ebs-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); flex: none; }
.ebs-dot.is-on { background: var(--success); }
.ebs-store-add {
  padding: 10px 16px; border-radius: 10px; border: 1px dashed #3A414C; background: transparent;
  color: var(--accent); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.ebs-store-add:hover { background: var(--surface-2); }
.ebs-nav-store { display: block; padding: 0 10px 6px; font-size: 11px; color: var(--text-faint); }
.ebs-nav-store:empty { display: none; }

.ebs-callout { padding: 14px 16px; border-radius: 10px; background: #1D1A12; box-shadow: inset 3px 0 0 var(--accent); }
.ebs-callout strong { display: block; font-size: 13px; color: var(--text); }
.ebs-callout p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-soft); }
.ebs-callout-warn { background: #21170F; box-shadow: inset 3px 0 0 var(--warning); }
.ebs-callout-ok { background: #122019; box-shadow: inset 3px 0 0 var(--success); }
.ebs-dup-warning { display: flex; flex-direction: column; gap: 12px; }

.modal-box.ebay-store-modal { max-width: 600px; }
.ebay-store-modal .listings-modal-body { gap: 14px; }
.ebay-store-modal .text-input { margin: 0; }
.ebs-choice {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin-top: 8px; border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--border); cursor: pointer;
}
.ebs-choice:has(input:checked) { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent); }
.ebs-choice input { margin-top: 3px; accent-color: var(--accent); }
.ebs-choice > span { display: flex; flex-direction: column; gap: 3px; }
.ebs-choice-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 500; color: var(--text); }
.ebs-choice-title select { width: auto; margin: 0; }
.ebs-choice-sub { font-size: 12px; line-height: 1.5; color: var(--text-muted); }
#ebayStoreStartFromBlock { display: flex; flex-direction: column; gap: 4px; }
#ebayStoreStartFromBlock .ebs-callout { margin-top: 10px; }
.ebs-steps { margin: 0; padding: 0; list-style: none; counter-reset: ebs-step; display: flex; flex-direction: column; gap: 14px; }
.ebs-steps li { position: relative; padding-left: 36px; counter-increment: ebs-step; }
.ebs-steps li::before {
  content: counter(ebs-step); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
  background: #2A2415; color: var(--accent); font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.ebs-steps strong { display: block; font-size: 14px; color: var(--text); }
.ebs-steps span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.ebs-link { font-size: 13px; color: var(--text-soft); text-decoration: underline; align-self: flex-start; }
.ebs-link:hover { color: var(--accent); }

.ebs-pick-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-muted); }
.ebs-pick-list { display: flex; flex-direction: column; gap: 8px; }
.ebs-pick-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--border); cursor: pointer;
}
.ebs-pick-row.is-picked { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent); }
.ebs-pick-row.is-disabled { cursor: default; }
.ebs-pick-row.is-disabled .ebs-pick-text { opacity: .55; }
.ebs-pick-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }
.ebs-pick-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ebs-pick-name { font-size: 14px; font-weight: 600; color: var(--text); }
.ebs-pick-sub { font-size: 12px; color: var(--text-muted); }
.ebs-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 500; color: var(--text-muted); background: var(--surface-3); white-space: nowrap;
}
.ebs-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ebs-pill.is-ok { color: var(--success); background: var(--success-bg); }
.ebs-pill.is-bad { color: var(--danger); background: var(--danger-bg); }
.ebs-pill.is-busy { color: var(--accent); background: #2A2415; }

.ebay-upload-store-results { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ebay-store-result {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 12px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--border);
}
.ebay-store-result-name { font-size: 14px; font-weight: 600; }
.ebay-store-result-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ebay-store-result-state { display: flex; gap: 6px; }
.ebay-store-result-errors {
  flex-basis: 100%; padding: 10px 12px; border-radius: 8px; background: var(--bg);
  font-size: 12px; line-height: 1.6; color: var(--text-soft);
}
.ebay-upload-review-status > .is-success { color: var(--success); }
.ebay-upload-review-status > .is-error { color: var(--danger); }

@media (max-width: 760px) {
  .ebs-stores-head { flex-direction: column; }
  .ebs-store-tab, .ebs-store-add { flex: 1 1 100%; }
}
.ebay-upload-review-status a { color: inherit; text-decoration: underline; }

/* Scan & Match: filename box and the Card Type / Art Type dropdowns sit on
   one line - same height, no stray margin, so their edges line up. */
.scan-result-fields .field-label { display: block; margin: 0 0 6px; }
.scan-result-fields .name-edit-input,
.scan-result-fields .type-field select { height: 40px; margin: 0; box-sizing: border-box; }
.scan-result-fields .type-field select { padding: 0 10px; font-size: 13px; }


/* ---------------------------------------------------------------------
   "When a card sells" (eBay Settings) and listing statuses in My eBay
   Listings.
--------------------------------------------------------------------- */
.ebs-autoend-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ebs-switch-row {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; margin-top: 10px; border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--border); cursor: pointer;
}
.ebs-switch-row:has(.ebs-switch:checked) { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent); }
.ebs-switch-row:has(.ebs-switch:disabled) { cursor: default; opacity: .6; }
.ebs-switch-row > span { display: flex; flex-direction: column; gap: 4px; }
.ebs-switch-row strong { font-size: 14px; font-weight: 600; color: var(--text); }
.ebs-switch-row > span > span { font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.ebs-switch {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 36px; height: 20px; margin: 1px 0 0;
  border-radius: 999px; background: var(--surface-3); cursor: pointer; transition: background .2s;
}
.ebs-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-muted); transition: transform .2s, background .2s;
}
.ebs-switch:checked { background: var(--accent); }
.ebs-switch:checked::after { transform: translateX(16px); background: var(--accent-ink); }
.ebs-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ebs-autoend-status { display: flex; align-items: center; gap: 8px; margin: 14px 0; font-size: 12px; color: var(--text-faint); }
.ebs-autoend-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); flex: none; }
.ebs-autoend-status.is-on::before { background: var(--success); }
.ebs-callout-bad { background: #21110F; box-shadow: inset 3px 0 0 var(--danger); }
.ebl-end-failed { margin-bottom: 12px; }
.ebl-f-status { width: 130px; }
#ebayListingsList .ebay-upload-review-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#ebayListingsList .ebs-pill { font-size: 11px; padding: 2px 8px; }
.ebl-pill-active { color: var(--accent); background: #2A2415; }
#ebayListingsList .ebay-upload-review-row.is-ended > :not(.btn) { opacity: .6; }
.ebl-link-line { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 12px; color: var(--text-soft); }
.ebl-link-line.is-bad { color: var(--danger); }


/* ---------------------------------------------------------------------
   Sort My Cards
--------------------------------------------------------------------- */
.sort-start { flex-direction: row; gap: 28px; align-items: center; padding: 22px 24px; }
.sort-start-main { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sort-start-main .muted { margin: 0; max-width: 640px; line-height: 1.55; }
.sort-start-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.sort-start-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.sort-folder-rows { display: flex; flex-direction: column; margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.sort-folder-row { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; background: var(--surface-2); }
.sort-folder-row + .sort-folder-row { border-top: 1px solid var(--border); }
.sort-folder-label { display: flex; flex-direction: column; gap: 2px; }
.sort-folder-label .muted { max-width: none; line-height: 1.4; }
.sort-folder-path { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted, var(--muted)); }
.sort-folder-path.is-set { color: var(--accent); }
.sort-folder-btns { display: inline-flex; gap: 8px; }
.sort-folder-lang { grid-column: 2 / -1; }
.sort-folder-lang select { min-width: 220px; }
.sort-sides-note { margin: 10px 2px 0; line-height: 1.55; }
.sort-sides-note code { font-size: 12px; color: var(--text); }
/* Double sided: the front with its back tucked behind it */
.sort-card-pic { position: relative; display: block; width: 106px; height: 148px; }
.sort-card .sort-card-pic img { position: absolute; }
.sort-card .sort-card-pic .sort-card-back { right: 0; top: 0; width: 70px; height: 98px; opacity: .9; }
.sort-card .sort-card-pic .sort-card-front { left: 0; bottom: 0; width: 94px; height: 132px; box-shadow: 0 4px 10px rgba(0,0,0,.45); }
.sort-card-sides { font-size: 11px; color: var(--text-muted); }
.sort-card-sides.is-warn { color: var(--warning); }
.sort-odd-note { margin-bottom: 12px; box-shadow: inset 3px 0 0 var(--warning); background: #1F1813; }
.sort-odd-note p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-soft); }
.sort-check-top.has-back figure img { height: min(380px, 46vh); }
.sort-check-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sort-check-foot p { margin: 0; }
.sort-folder-btns .btn { display: inline-flex; align-items: center; gap: 6px; }
#sortLiveBtn { display: inline-flex; align-items: center; gap: 8px; }
.sort-live-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 14px 18px; border-radius: 12px; background: #13201A; box-shadow: inset 0 0 0 1px #2E5A3E; }
.sort-live-bar.is-stopped { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.sort-live-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(76, 175, 80, .18); animation: sortLivePulse 1.6s ease-in-out infinite; }
.sort-live-bar.is-stopped .sort-live-dot { background: var(--text-faint); box-shadow: none; animation: none; }
@keyframes sortLivePulse { 50% { box-shadow: 0 0 0 7px rgba(76, 175, 80, .05); } }
.sort-live-text { flex: 1; min-width: 0; }
.sort-live-title { font-size: 14px; font-weight: 600; }
.sort-live-text .muted { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sort-card.is-new { background: #13201A; box-shadow: inset 0 0 0 1px var(--success); }
.sort-live-empty { padding: 30px 18px; text-align: center; border-radius: 12px; background: var(--surface); }
@media (prefers-reduced-motion: reduce) { .sort-live-dot { animation: none; } }
.sort-start-msg { margin: 6px 0 0; font-size: 13px; color: var(--warning); }
.sort-start-msg:empty { display: none; }
.sort-start-steps { width: 300px; flex: none; }
.sort-browser-note { margin-top: 16px; }
.sort-progress { gap: 10px; margin-bottom: 14px; }
.sort-progress-head { display: flex; align-items: center; justify-content: space-between; }
.sort-bar-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.sort-bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.sort-bar > div { height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width .3s; }
.sort-progress .muted { margin: 4px 0 0; }
.sort-summary { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 22px; margin-bottom: 14px; }
.sort-stat { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-muted); }
.sort-stat .num { font-size: 22px; font-weight: 600; color: var(--text); }
.sort-stat.is-gold .num { color: var(--accent); }
.sort-stat.is-warn .num { color: var(--warning); }
.sort-summary-spacer { flex: 1; }
.sort-groups { display: flex; flex-direction: column; gap: 12px; padding-bottom: 90px; }
.sort-group { background: var(--surface); border-radius: 12px; padding: 14px 16px; }
.sort-group.is-needs { box-shadow: inset 0 0 0 1px var(--warning); }
.sort-group.is-left { opacity: .8; }
.sort-group-head { display: flex; align-items: center; gap: 12px; }
.sort-group-icon { color: var(--accent); display: inline-flex; flex: none; }
.sort-group.is-needs .sort-group-icon { color: var(--warning); }
.sort-group.is-left .sort-group-icon { color: var(--text-faint); }
.sort-group-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.sort-group-title { font-size: 15px; font-weight: 600; }
.sort-folder-input.text-input { margin: 0; width: min(420px, 100%); height: 34px; padding: 0 10px; font-family: inherit; font-size: 14px; font-weight: 600; background: var(--surface-2); }
.sort-group-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.sort-group-note { margin: 8px 0 0 28px; }
.sort-cards { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sort-card {
  width: 122px; padding: 8px; border: none; border-radius: 8px; background: transparent; color: var(--text);
  font-family: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 5px;
}
.sort-card:hover { background: var(--surface-2); }
.sort-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sort-card.is-pending { background: #1D1A12; box-shadow: inset 0 0 0 1px var(--accent); }
.sort-card img, .sort-card-blank { width: 106px; height: 148px; object-fit: cover; border-radius: 5px; background: var(--surface-3); display: block; }
.sort-card-name { font-size: 12px; font-weight: 500; line-height: 1.3; height: 31px; overflow: hidden; word-break: break-word; }
.sort-badge { font-size: 11px; color: var(--text-faint); }
.sort-badge.is-gold { color: var(--accent); }
.sort-badge.is-ok { color: var(--success); }
.sort-badge.is-warn { color: var(--warning); }
.sort-footer {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: -76px; padding: 14px 18px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), 0 -12px 30px rgba(5,6,8,.55);
}
.sort-footer-note { font-size: 13px; color: var(--text-muted); }
.sort-footer-note strong { color: var(--accent); font-weight: 600; }
.sort-footer-actions { display: flex; gap: 10px; }
.sort-done-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sort-done-head .muted { margin: 4px 0 0; }
.sort-done-list { margin-top: 6px; }
.sort-done-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #1F242B; font-size: 13px; }
.sort-done-row > span:nth-child(2) { flex: 1; }
.sort-not-moved { margin-top: 12px; font-size: 13px; color: var(--text-soft); }
.sort-not-moved summary { cursor: pointer; color: var(--text-muted); }
.sort-not-moved ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.7; }
.sort-fail { color: var(--danger); }
.modal-box.sort-check-modal { width: min(1180px, 96vw); max-width: none; max-height: 94vh; display: flex; flex-direction: column; }
.sort-check-modal > .listings-modal-body { flex: 1; min-height: 0; overflow-y: auto; }
.sell-area { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sell-listed-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--success); background: rgba(52, 168, 83, .12); box-shadow: inset 0 0 0 1px rgba(52, 168, 83, .3); white-space: nowrap; }
.searchable-select-menu.opens-up { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 4px; }
.inv-btn-divider { width: 1px; height: 24px; background: var(--border); margin: 0 4px; }
#binderSetSortBtn { display: inline-flex; align-items: center; gap: 7px; }
.modal-box.set-sort-modal { width: min(1080px, 94vw); max-width: none; max-height: 90vh; display: flex; flex-direction: column; }
.set-sort-modal > .listings-modal-body { flex: 1; min-height: 0; overflow-y: auto; }
.set-sort-loading { display: flex; align-items: center; gap: 10px; padding: 30px 0; color: var(--text-muted); font-size: 14px; }
.set-sort-loading .btn-spinner { display: inline-block; }
.set-sort-summary { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; padding: 14px 18px; border-radius: 12px; background: var(--surface-2); }
.set-sort-summary .sort-stat.is-ok .num { color: var(--success); }
.set-sort-bulk { display: flex; justify-content: flex-end; gap: 6px; margin: 8px 0 4px; }
.set-sort-groups { padding-bottom: 0; gap: 8px; }
.set-sort-groups .sort-group { background: var(--surface-2); }
.set-sort-groups .sort-group.is-off { opacity: .55; }
.set-sort-groups .sort-folder-input.text-input { background: var(--surface); width: min(360px, 100%); }
.set-sort-check { flex: none; width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.set-sort-status { font-size: 12px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.set-sort-status.is-new { color: var(--accent); background: #2A2415; padding: 3px 9px; border-radius: 999px; font-weight: 600; }
.set-sort-status.is-existing { color: var(--success); }
.set-sort-status .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.set-sort-toggle { background: none; border: none; color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.set-sort-toggle:hover { color: var(--text); background: var(--surface-3); }
.set-sort-cards { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px 30px; }
.set-sort-card { width: 92px; font-size: 11px; line-height: 1.3; }
.set-sort-card img, .set-sort-card .sort-card-blank { width: 92px; height: 128px; object-fit: cover; border-radius: 5px; background: var(--surface-3); display: block; margin-bottom: 5px; }
.set-sort-card span { display: block; height: 28px; overflow: hidden; word-break: break-word; }
.set-sort-dup { font-size: 12px; color: var(--text-muted); }
.sort-check-top { display: flex; gap: 22px; align-items: flex-start; }
.sort-check-top figure { margin: 0; text-align: center; flex: none; }
.sort-check-top figure img { height: min(470px, 56vh); width: auto; aspect-ratio: 5 / 7; object-fit: contain; border-radius: 8px; background: var(--surface-3); display: block; cursor: zoom-in; }
.sort-check-top figcaption { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
#screenshotZoomModalOverlay { z-index: 260; } /* above the Check this card pop-up */
.sort-check-alts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
#sortCheckAlts { display: flex; flex-direction: column; gap: 8px; }
.sort-alt {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: none; border-radius: 8px; background: transparent;
  box-shadow: inset 0 0 0 1px var(--border); color: var(--text); font-family: inherit; text-align: left; cursor: pointer;
}
.sort-alt:hover:not(:disabled) { background: var(--surface-2); }
.sort-alt.is-picked { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent); }
.sort-alt:disabled, .sort-alt.is-disabled { opacity: .55; cursor: default; }
.sort-alt-thumb { position: relative; flex: none; display: block; border-radius: 3px; cursor: zoom-in; }
.sort-alt.is-disabled .sort-alt-thumb { opacity: 1; }
.sort-zoom-hint {
  position: absolute; right: 4px; bottom: 4px; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; background: rgba(11, 13, 16, .78); color: #fff;
  opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
.sort-alt-thumb:hover .sort-zoom-hint, .sort-check-top figure:hover .sort-zoom-hint { opacity: 1; }
.sort-alt-thumb:hover img { box-shadow: 0 0 0 2px var(--accent); }
.sort-check-top figure { position: relative; }
.sort-check-top figure .sort-zoom-hint { right: 8px; bottom: 28px; width: 28px; height: 28px; }
.sort-alt img, .sort-alt .sort-card-blank { width: 60px; height: 84px; object-fit: cover; border-radius: 3px; flex: none; }
.sort-alt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sort-alt-text strong { font-size: 15px; font-weight: 600; }
.sort-alt-text span { font-size: 13px; color: var(--text-muted); }
.sort-alt .num { font-size: 12px; color: var(--text-muted); }
.sort-alt.is-picked .num { color: var(--accent); }
#sortCheckFolder { margin: 0; font-family: inherit; }
@media (max-width: 760px) {
  .sort-start { flex-direction: column; align-items: stretch; }
  .sort-start-steps { width: auto; }
  .sort-folder-row { grid-template-columns: 1fr; gap: 8px; }
  .sort-folder-lang { grid-column: auto; }
  .sort-folder-lang select { width: 100%; min-width: 0; }
  .set-sort-groups .sort-group-head { flex-wrap: wrap; }
  .sort-check-top { flex-wrap: wrap; }
  .sort-check-top figure img { height: 220px; }
  .sort-folder-input.text-input { width: 100%; }
  .sort-group-head { flex-wrap: wrap; }
}


/* ---------------------------------------------------------------------
   Sort My Cards - add to My Inventory; Box setup
--------------------------------------------------------------------- */
.sort-inv { margin-top: 16px; gap: 16px; padding: 20px 22px; }
.sort-inv .muted { margin: 4px 0 0; }
.sort-inv-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sort-inv-choice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; }
.sort-inv-choice.is-picked { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent); }
.sort-inv-choice input { margin-top: 3px; accent-color: var(--accent); }
.sort-inv-choice > span { display: flex; flex-direction: column; gap: 4px; }
.sort-inv-choice strong { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); }
.sort-inv-choice strong svg { color: var(--text-muted); }
.sort-inv-choice.is-picked strong svg { color: var(--accent); }
.sort-inv-choice > span > span { font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.sort-inv-list { padding: 4px 14px; border-radius: 10px; background: var(--bg); max-height: 320px; overflow-y: auto; }
.sort-inv-list-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #1F242B; font-size: 13px; }
.sort-inv-list-row > span:nth-child(2) { flex: 1; min-width: 0; }
.sort-inv-list-row .num { width: 70px; text-align: right; }
.sort-inv-list-foot { padding: 8px 0; }
.sort-inv-boxpick { display: flex; gap: 20px; margin-bottom: 12px; }
.sort-inv-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
.sort-inv-grid .text-input, #sortInvExistingBox, #sortInvMyPriceFrom { margin: 0; font-family: inherit; }
#sortInvBoxHint { margin: 10px 0; line-height: 1.55; }
#sortInvBoxHint strong { color: var(--text); }
.sort-inv-preview { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 10px; background: var(--bg); }
.sort-inv-preview:empty { display: none; }
.sort-prev-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); }
.sort-prev-row { display: flex; align-items: center; gap: 12px; }
.sort-prev-label { width: 84px; font-size: 12px; color: var(--text-muted); flex: none; }
.sort-prev-track { flex: 1; display: flex; gap: 2px; min-height: 26px; padding: 2px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.sort-seg { min-width: 3px; border-radius: 3px; display: flex; align-items: center; padding: 0 5px; overflow: hidden; }
.sort-seg.is-old { background: #3A414C; }
.sort-seg span { font-size: 10px; font-weight: 600; color: #0B0D10; white-space: nowrap; }
.sort-prev-row > .num { width: 80px; text-align: right; font-size: 12px; flex: none; }
.sort-prev-warn { margin: 4px 0 0; font-size: 12px; color: var(--warning); }
.sort-inv-sep { height: 1px; background: #1F242B; margin-bottom: 14px; }
.sort-inv-checks { display: flex; gap: 24px; flex-wrap: wrap; margin: 10px 0; }
.sort-inv-myprice { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.sort-inv-myprice .ebs-field { width: 220px; }
.sort-inv-myprice .muted { margin: 0 0 10px; }
.sort-inv-myprice + .sort-inv-myprice { margin-top: 12px; }
#sortInvCostSetBtn { margin-bottom: 1px; }
.sort-inv-cost-status.is-set { color: var(--success, #24A26B); font-weight: 600; }
.sort-inv-cost-status.is-error { color: var(--danger); }
.sort-inv-actions { display: flex; justify-content: flex-end; }
.sort-inv-progress { display: flex; flex-direction: column; gap: 10px; }
.sort-inv-result { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 16px; border-radius: 10px; background: var(--success-bg); box-shadow: inset 3px 0 0 var(--success); }
.sort-inv-result .muted { margin: 4px 0 0; line-height: 1.55; }
.box-setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
#boxModalSetupHint { margin: 2px 0 0; }
.box-detail-meta { margin: 4px 0 0; }
.box-setup-panel { margin-bottom: 16px; box-shadow: inset 0 0 0 1px var(--accent); }
.box-setup-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.box-setup-row .ebs-field { width: 170px; }
.box-setup-row .text-input { margin: 0; }
.box-setup-row > .muted { flex: 1; min-width: 220px; margin: 0 0 10px; }
.box-row-fill { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 160px; max-width: 420px; margin: 0 16px; }
.box-row-fill-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.box-row-fill-bar > div { height: 100%; background: var(--success); border-radius: 3px; }
.box-row-fill-bar.is-full > div { background: var(--warning); }
.box-row-fill .num { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 760px) {
  .sort-inv-choices, .sort-inv-grid { grid-template-columns: minmax(0, 1fr); }
  .box-row-fill { margin: 6px 0 0; max-width: none; flex-basis: 100%; }
}

/* ---- Dashboard: Your collection ---- */
:root { --dash-val: #BC8628; --dash-val-hi: #F2C25A; --dash-cost: #3E92CC; --dash-cost-hi: #7CC4F2; --dash-prof: #24A26B; --dash-prof-hi: #5FE0A4; }
.dash-coll { display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; transition: opacity .2s; }
.dash-coll.is-loading { opacity: .6; }
.dash-coll-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-coll-title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.4px; }
.dash-coll-head .muted { margin: 4px 0 0; }
.dash-coll-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.dash-seg button { border: none; background: none; color: var(--text-muted); font: inherit; font-size: 12px; padding: 6px 12px; border-radius: 7px; cursor: pointer; transition: background .15s, color .15s; }
.dash-seg button:hover { color: var(--text); }
.dash-seg button.is-active { background: var(--surface-3); color: var(--text); font-weight: 600; }
.dash-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dash-price-pick { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 4px 0 12px; border-radius: 9px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); font-size: 12px; color: var(--text-soft); }
.dash-price-pick select { background: transparent; border: none; color: var(--text); font: inherit; font-weight: 600; height: 30px; padding: 0 6px; cursor: pointer; }
.dash-price-pick select option { background: var(--surface); }

.dash-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dash-kpi { position: relative; overflow: hidden; padding: 20px 22px; border-radius: 14px; background: linear-gradient(160deg, var(--surface), #101318); box-shadow: inset 0 0 0 1px var(--border); }
.dash-kpi::before { content: ""; position: absolute; right: -60px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, var(--k) 0, transparent 65%); opacity: .2; pointer-events: none; }
.dash-kpi.is-val { --k: var(--dash-val); } .dash-kpi.is-cost { --k: var(--dash-cost); } .dash-kpi.is-prof { --k: var(--dash-prof); }
.dash-kpi-label { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); }
.dash-kpi-label .sw { width: 8px; height: 8px; border-radius: 2px; background: var(--k); }
.dash-kpi-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 12px; }
.dash-kpi-value { font-size: 32px; font-weight: 600; letter-spacing: -1px; line-height: 1.1; }
.dash-kpi-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.dash-kpi-sub { font-size: 12px; color: var(--text-muted); }
.dash-kpi-warn { font-size: 12px; color: var(--warning); }
.dash-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dash-chip.is-up { color: var(--success); background: rgba(76, 195, 138, .08); box-shadow: inset 0 0 0 1px rgba(76, 195, 138, .35); }
.dash-chip.is-down { color: var(--warning); background: rgba(229, 138, 78, .08); box-shadow: inset 0 0 0 1px rgba(229, 138, 78, .35); }
.dash-spark { flex: none; overflow: visible; }
.dash-spark.is-val { color: var(--dash-val); } .dash-spark.is-cost { color: var(--dash-cost); } .dash-spark.is-prof { color: var(--dash-prof); }
.dash-spark .glow { stroke: currentColor; opacity: .45; filter: blur(2.5px); }
.dash-spark .dot { fill: currentColor; stroke: var(--surface); stroke-width: 2; }

.dash-card { position: relative; padding: 22px 24px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.dash-main { background: radial-gradient(ellipse at 70% -20%, rgba(188, 134, 40, .12), transparent 55%), var(--surface); padding-bottom: 14px; }
.dash-scans-card { background: radial-gradient(ellipse at 50% 120%, rgba(188, 134, 40, .15), transparent 60%), var(--surface); }
.dash-market-card { background: radial-gradient(ellipse at 100% 0%, rgba(36, 162, 107, .14), transparent 55%), var(--surface); }
.dash-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-card-title { font-size: 16px; font-weight: 600; }
.dash-card-head .muted { margin-top: 4px; }
.dash-eyebrow { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); }
.dash-legend, .dash-mlegend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--text-soft); }
.dash-legend > span, .dash-mlegend > span { display: inline-flex; align-items: center; gap: 7px; }
.sw.is-val, .sw.is-cost, .sw.is-prof, .sw.is-hatch { display: inline-block; width: 14px; height: 3px; border-radius: 2px; flex: none; }
.sw.is-val { background: var(--dash-val); } .sw.is-cost { background: var(--dash-cost); } .sw.is-prof { background: var(--dash-prof); }
.sw.is-hatch { height: 10px; background: repeating-linear-gradient(45deg, rgba(36, 162, 107, .4) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px rgba(36, 162, 107, .5); }
.dash-mlegend .sw { width: 10px; height: 10px; }
.dash-headline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.dash-big { font-size: 30px; font-weight: 600; letter-spacing: -.8px; }
.dash-chart-wrap { position: relative; margin-top: 10px; }
.dash-chart { width: 100%; min-height: 120px; }
.dash-chart svg { display: block; overflow: visible; }
.dash-chart .grid { stroke: #232831; stroke-dasharray: 2 5; }
.dash-chart .axis { stroke: #232831; }
.dash-chart .tick { font-size: 11px; fill: var(--text-faint); font-family: var(--font-sans); }
.dash-chart .end { font-size: 12px; font-weight: 600; fill: var(--text); font-family: var(--font-sans); }
.dash-chart .peak { font-size: 11px; font-weight: 600; fill: var(--text); font-family: var(--font-sans); }
.dash-chart .val-stop { stop-color: var(--dash-val); } .dash-chart .valhi-stop { stop-color: var(--dash-val-hi); } .dash-chart .prof-stop { stop-color: var(--dash-prof); }
.dash-chart .hatch { stroke: var(--dash-prof); stroke-opacity: .28; stroke-width: 1.5; }
.dash-chart .val-line { fill: none; stroke: var(--dash-val); stroke-width: 2.5; stroke-linecap: round; }
.dash-chart .val-glow { fill: none; stroke: var(--dash-val-hi); stroke-width: 5; opacity: .45; }
.dash-chart .cost-line { fill: none; stroke: var(--dash-cost); stroke-width: 2; stroke-linecap: round; }
.dash-chart .cost-glow { fill: none; stroke: var(--dash-cost-hi); stroke-width: 4; opacity: .35; }
.dash-chart .val-dot { fill: var(--dash-val-hi); stroke: var(--surface); stroke-width: 2; }
.dash-chart .cost-dot { fill: var(--dash-cost-hi); stroke: var(--surface); stroke-width: 2; }
.dash-chart .cross { stroke: var(--text-soft); stroke-opacity: .35; stroke-dasharray: 3 4; }
.dash-chart .hit { cursor: crosshair; }
.dash-tip { display: none; position: absolute; z-index: 3; width: 210px; padding: 12px 14px; border-radius: 10px; background: rgba(12, 14, 18, .94); box-shadow: inset 0 0 0 1px #2A3038, 0 16px 40px rgba(0, 0, 0, .5); pointer-events: none; }
.dash-tip-date { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.dash-tip-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 5px; }
.dash-tip-row > span:nth-child(2) { flex: 1; color: var(--text-soft); }
.dash-tip-row .sw { width: 10px; }
.dash-tip-foot { font-size: 11px; color: var(--text-faint); margin-top: 8px; }
.dash-main-foot { display: flex; justify-content: flex-end; margin-top: 4px; }
.dash-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.dash-table th { text-align: left; font-weight: 500; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.dash-table td { padding: 7px 10px; border-bottom: 1px solid #1F242B; }
.dash-table th:not(:first-child), .dash-table td:not(:first-child) { text-align: right; }
.dash-empty { padding: 34px 12px; text-align: center; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.dash-lower { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; }
.dash-mstats { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--text-muted); }
.dash-mstats strong { color: var(--text); }
.dash-mlegend { margin: 16px 0 6px; }
.dash-mlegend-note { margin-left: auto; color: var(--text-muted); }
.dash-mrow { display: grid; grid-template-columns: minmax(90px, 170px) minmax(0, 1fr) 78px; align-items: center; gap: 12px; padding: 7px 0; }
.dash-mname { font-size: 13px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-mbar { display: flex; gap: 2px; height: 12px; }
.dash-mbar .c { border-radius: 4px 0 0 4px; background: var(--dash-cost); }
.dash-mbar .p { border-radius: 0 4px 4px 0; background: linear-gradient(90deg, var(--dash-prof), var(--dash-prof-hi)); box-shadow: 0 0 12px rgba(36, 162, 107, .5); }
.dash-mbar > span:only-child { border-radius: 4px; }
.dash-mval { font-size: 13px; text-align: right; font-weight: 600; }
.dash-mfoot { margin: 8px 0 0; }
.dash-coll-note { margin: 0; font-size: 12px; line-height: 1.6; color: var(--text-faint); max-width: 980px; }
@media (max-width: 1100px) { .dash-lower { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .dash-kpis { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .dash-kpi-value { font-size: 28px; }
  .dash-card { padding: 18px 16px; }
  .dash-seg button { padding: 6px 9px; }
}
@media (prefers-reduced-motion: reduce) { .dash-coll { transition: none; } }

/* --- Admin > Tour stats (same look as the Dashboard charts) --- */
.ts-page .inv-title { margin: 0; }
.sw.ts-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.sw.ts-sw.is-new { background: var(--dash-val); } .sw.ts-sw.is-ret { background: var(--dash-cost); }
.sw.ts-sq { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.sw.ts-sq.is-done { background: var(--dash-prof); } .sw.ts-sq.is-left { background: rgba(229, 138, 78, .38); }
.ts-chart .new-col { fill: var(--dash-val); } .ts-chart .ret-col { fill: var(--dash-cost); }
.ts-chart .fin-line { fill: none; stroke: var(--dash-prof); stroke-width: 2; stroke-linejoin: round; }
.ts-chart .fin-dot { fill: var(--dash-prof); stroke: var(--surface); stroke-width: 2; }
.ts-src { margin-top: 12px; }
.ts-src-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.ts-src-top span:first-child { color: var(--text-soft); }
.ts-src-top strong { color: var(--text); }
.ts-src-top em { font-style: normal; color: var(--text-muted); font-weight: 400; }
.ts-src-bar { margin-top: 6px; height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.ts-src-bar span { display: block; height: 100%; border-radius: 4px; background: var(--dash-val); }
.ts-who { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid #1F242B; font-size: 12px; color: var(--text-muted); }
.ts-who strong { color: var(--text); }
.ts-ch { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) 48px minmax(110px, 130px); gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid #1F242B; font-size: 13px; }
.ts-ch-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-ch-bar { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--surface-3); }
.ts-ch-bar .d { background: var(--dash-prof); } .ts-ch-bar .l { background: rgba(229, 138, 78, .38); }
.ts-ch-pct { text-align: right; font-weight: 600; }
.ts-ch-note { font-size: 12px; color: var(--text-muted); }
@media (max-width: 640px) { .ts-ch { grid-template-columns: minmax(0, 1fr) 44px; } .ts-ch-bar, .ts-ch-note { grid-column: 1 / -1; } }

/* ---- Duplicate cards: cards already on eBay ---- */
.ebs-existing { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.ebs-existing-example { display: flex; align-items: center; gap: 22px; padding: 14px 16px; border-radius: 10px; background: var(--surface-2); flex-wrap: wrap; }
.ebs-existing-example p { margin: 0; flex: 1; min-width: 220px; font-size: 13px; line-height: 1.55; color: var(--text-soft); }
.ebs-existing-example b { color: var(--text); font-weight: 600; }
.ebs-existing-card { display: flex; align-items: center; gap: 10px; }
.ebs-existing-card > span:last-child { display: flex; flex-direction: column; }
.ebs-existing-art { width: 34px; height: 47px; border-radius: 4px; background: linear-gradient(160deg, #E0C24A, var(--surface-3) 90%); flex: none; }
.ebs-existing-name { font-size: 13px; font-weight: 500; color: var(--text); }
.ebs-existing-sub { font-size: 12px; color: var(--text-muted); }
.ebs-existing-label { font-size: 13px; font-weight: 500; color: var(--text); }
.ebs-existing-price { display: flex; flex-direction: column; gap: 8px; }
.ebs-existing-price.is-off { opacity: .5; }
.ebs-radio-sub { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ebs-existing-split { height: 1px; background: var(--border); margin: 10px 0 4px; }

.ebx-qty { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ebx-qty span { font-size: 15px; color: var(--text-muted); }
.ebx-qty strong { font-size: 15px; font-weight: 600; color: var(--text); }

.modal-box.ebay-existing-modal { max-width: 1120px; }
.ebay-existing-modal .listings-modal-body { gap: 10px; }
.ebay-existing-actions { flex-wrap: wrap; }
.ebx-summary { flex: 1; min-width: 240px; font-size: 13px; color: var(--text-soft); line-height: 1.5; }
.ebx-summary b { color: var(--text); font-weight: 600; }
.ebx-head, .ebx-row { display: grid; grid-template-columns: 22px minmax(170px, 230px) 18px minmax(0, 1fr) 128px 190px; gap: 14px; align-items: center; }
.ebx-head { padding: 0 16px; font-size: 12px; color: var(--text-faint); }
.ebx-row { padding: 14px 16px; background: var(--surface-2); border-radius: 10px; }
.ebx-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; cursor: pointer; }
.ebx-row.is-off .ebx-listing, .ebx-row.is-off .ebx-qty, .ebx-row.is-off .ebx-price { opacity: .5; }
.ebx-card, .ebx-listing { display: flex; gap: 10px; align-items: center; min-width: 0; }
.ebx-thumb { width: 44px; height: 61px; border-radius: 5px; object-fit: cover; background: var(--surface-3); flex: none; }
.ebx-name { font-size: 13px; font-weight: 600; color: var(--text); }
.ebx-sub, .ebx-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ebx-meta a { color: var(--info, #6BA6E8); text-decoration: none; }
.ebx-meta a:hover { text-decoration: underline; }
.ebx-copies { font-size: 12px; color: var(--accent); margin-top: 2px; }
.ebx-arrow { color: var(--text-faint); }
.ebx-title { font-size: 13px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.ebx-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; margin-bottom: 4px; }
.ebx-tag.is-exact { color: var(--success); background: #14231B; }
.ebx-tag.is-likely { color: var(--accent); background: #2A2415; }
.ebx-reason { font-size: 12px; color: var(--accent); margin-top: 5px; line-height: 1.45; }
.ebx-price-fixed { font-size: 12px; color: var(--text-soft); }
.ebx-wait { display: flex; align-items: center; gap: 12px; padding: 16px 4px; font-size: 13px; color: var(--text-soft); }
.ebx-lines { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-soft); }
.ebx-lines li.is-bad { color: var(--danger); }
.ebs-callout .ebx-lines { margin-top: 8px; }
.ebx-upload-note { margin-bottom: 12px; }
@media (max-width: 900px) {
  .ebx-head { display: none; }
  .ebx-row { grid-template-columns: 22px minmax(0, 1fr); }
  .ebx-row > .ebx-arrow { display: none; }
  .ebx-row > .ebx-listing, .ebx-row > .ebx-qty, .ebx-row > .ebx-price { grid-column: 2; }
}
.ebx-lines a { color: var(--info, #6BA6E8); text-decoration: none; }
.ebx-lines a:hover { text-decoration: underline; }

/* ---- Tour stats: landing page visits ---- */
.ts-section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 10px 0 -2px; }
.ts-section-head h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--text); }
/* Admin > Analytics - compact: two short rows of numbers, the two charts
   side by side, the three breakdowns in one row, chapters underneath */
.ts-page { gap: 14px; }
.ts-group { display: flex; flex-direction: column; gap: 8px; }
.ts-group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ts-group-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.ts-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ts-kpis .dash-kpi { padding: 13px 16px; border-radius: 12px; }
.ts-kpis .dash-kpi-label { font-size: 11px; letter-spacing: 1.1px; }
.ts-kpis .dash-kpi-body { margin-top: 6px; }
.ts-kpis .dash-kpi-value { font-size: 24px; }
.ts-kpis .dash-kpi-foot { margin-top: 4px; gap: 6px; }
.ts-kpis .dash-spark { width: 96px; height: 30px; }
.dash-kpi.is-vid { --k: #E5484D; } .dash-kpi.is-su { --k: #7AA7E8; }
.dash-spark.is-vid { color: #E5484D; }
.sw.ts-sw.is-vid { background: #E5484D; }
.ts-chart .vid-line { fill: none; stroke: #E5484D; stroke-width: 2; stroke-linejoin: round; }
.ts-chart .vid-dot { fill: #E5484D; stroke: var(--surface); stroke-width: 2; }
.ts-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ts-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ts-charts .dash-card, .ts-cards .dash-card, .ts-chapters { padding: 16px 18px; border-radius: 12px; }
.ts-charts .dash-card-title { font-size: 15px; }
.ts-charts .dash-legend { gap: 12px; }
.ts-cards .ts-src { margin-top: 10px; }
.ts-cards .ts-who { gap: 6px 16px; margin-top: 14px; padding-top: 10px; }
.ts-cards .tsv-step { grid-template-columns: minmax(110px, 140px) minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; }
.ts-chapters .ts-ch { padding: 7px 0; }
@media (max-width: 1200px) { .ts-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ts-cards .dash-card:last-child { grid-column: 1 / -1; } }
@media (max-width: 1000px) { .ts-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ts-charts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .ts-cards { grid-template-columns: minmax(0, 1fr); }
  .ts-kpis .dash-kpi-body { flex-direction: column; align-items: stretch; gap: 6px; }
  .ts-kpis .dash-spark { width: 100%; height: 24px; }
  .ts-chapters .ts-ch { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .ts-chapters .ts-ch-pct { grid-column: 2; grid-row: 1; }
  .ts-chapters .ts-ch-bar, .ts-chapters .ts-ch-note { grid-column: 1 / -1; }
}
.tsv-step { display: grid; grid-template-columns: minmax(130px, 170px) 1fr auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.tsv-step:last-of-type { border-bottom: none; }
.tsv-step-name { font-size: 13px; color: var(--text); }
.tsv-step-sub { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.tsv-step-bar { height: 10px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.tsv-step-bar span { display: block; height: 100%; border-radius: 5px; background: var(--chart-prof, #24A26B); }
.tsv-step-bar.is-first span { background: var(--chart-val, #BC8628); }
.tsv-step-n { font-size: 13px; font-weight: 600; color: var(--text); text-align: right; white-space: nowrap; }
.tsv-step-n em { font-style: normal; font-weight: 400; color: var(--text-muted); }
.tsv-note { font-size: 11px; color: var(--text-faint); margin: 10px 0 0; line-height: 1.5; }

/* ---------------------------------------------------------------------
   Magic: The Gathering - Card game switch (top bar, eBay Settings),
   same-art printings picker, card picture credit
--------------------------------------------------------------------- */
.topbar-right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar-game { display: flex; align-items: center; gap: 8px; }
.game-switch { border-radius: 9px; padding: 2px; background: var(--bg); }
.game-switch .pill-toggle-option span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 7px; }
.game-switch .pill-toggle-option input:checked + span { background: var(--surface-3); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent); }
.game-name { font-weight: inherit; }
.game-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.game-dot-pokemon { background: #E8C547; }
.game-dot-magic { background: #C2603A; }
.scan-game-note { color: var(--accent); white-space: nowrap; }

.ebs-game-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: var(--radius); background: var(--surface); margin-bottom: 16px;
}
.ebs-game-bar .muted { flex: 1; min-width: 240px; line-height: 1.5; }
.ebs-game-tag { color: var(--accent); font-weight: 500; }

.mtg-credit { font-size: 10px; color: var(--text-faint); line-height: 1.4; margin-top: 6px; max-width: 320px; }

.mtg-same-art {
  margin: 12px 0 4px; padding: 12px 12px 8px; border-radius: var(--radius);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border);
}
.mtg-same-art.is-busy { opacity: .6; pointer-events: none; }
.mtg-same-art-head { font-size: 14px; font-weight: 600; color: var(--text); }
.mtg-same-art-sub { margin: 3px 0 8px; line-height: 1.5; }
.mtg-print-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.mtg-print-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer;
}
.mtg-print-row:hover { background: var(--surface-3); }
.mtg-print-row.is-on { background: #1D1A12; box-shadow: inset 0 0 0 1px #4A3D1E; }
.mtg-print-row input { accent-color: var(--accent); flex: none; margin: 0; }
.mtg-print-row img, .mtg-print-noimg { width: 30px; height: 42px; border-radius: 3px; object-fit: cover; flex: none; background: var(--surface-3); }
.mtg-print-code {
  font-family: var(--font-mono); font-size: 12px; padding: 2px 6px; border-radius: 5px;
  background: var(--surface-3); color: var(--text); flex: none; min-width: 34px; text-align: center;
}
.mtg-print-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; color: var(--text); }
.mtg-print-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtg-print-name em { font-style: normal; font-size: 11px; color: var(--accent); margin-left: 6px; }
.mtg-print-price { font-size: 13px; color: var(--text-soft); font-variant-numeric: tabular-nums; flex: none; }

@media (max-width: 760px) {
  .topbar-right { flex-wrap: nowrap; gap: 8px; flex: none; }
  .topbar-game > .field-label { display: none; }
  .game-switch .pill-toggle-option span { padding: 6px 8px; font-size: 12px; gap: 5px; }
  /* only the picked game is named; the other is its dot */
  .topbar-game .pill-toggle-option input:not(:checked) + span .game-name { display: none; }
}
.card-game-tag {
  position: absolute; top: 16px; left: 16px; z-index: 1; display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--text);
  background: rgba(11, 13, 16, .82); box-shadow: inset 0 0 0 1px var(--border); pointer-events: none;
}
.binder-cell-checkbox-wrap ~ .card-game-tag { left: 42px; }
.mtg-same-art-read summary { cursor: pointer; font-size: 13px; color: var(--text-soft); list-style: none; line-height: 1.5; }
.mtg-same-art-read summary::-webkit-details-marker { display: none; }
.mtg-same-art-read[open] summary { margin-bottom: 8px; }
.mtg-read-ok { color: var(--success); font-weight: 700; margin-right: 4px; }

/* Dashboard - Pokemon and Magic */
.dash-seg button { display: inline-flex; align-items: center; gap: 6px; }
.dash-bygame-wrap { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.dash-bygame-wrap[hidden] { display: none; }
.dash-bygame { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dash-game-panel { padding: 16px 20px; border-radius: 14px; background: var(--surface); box-shadow: inset 3px 0 0 #E8C547, inset 0 0 0 1px var(--border); }
.dash-game-panel.is-magic { box-shadow: inset 3px 0 0 #C2603A, inset 0 0 0 1px var(--border); }
.dash-game-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dash-game-name { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--text); }
.dash-game-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dash-game-figs span { display: block; font-size: 12px; color: var(--text-muted); }
.dash-game-figs b { display: block; margin-top: 4px; font-size: 20px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.dash-game-figs b.is-up { color: #4CC38A; }
.dash-game-figs b.is-down { color: var(--danger); }
.dash-game-panel .dash-kpi-warn { margin-top: 10px; }
.stat-split { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.stat-split span { display: inline-flex; align-items: center; gap: 6px; }
.stat-split b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.lang-stat-group { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); }
.lang-stat-group:first-child { margin-top: 0; }
.lang-stat.is-magic .lang-stat-fill { background: #C2603A; }
@media (max-width: 760px) {
  .dash-bygame { grid-template-columns: 1fr; }
  .dash-game-figs b { font-size: 17px; }
}
.lang-stat-group { grid-column: 1 / -1; }

/* ---------------------------------------------------------------------
   Export to image (binder / box) - see openImageExport in app.js
--------------------------------------------------------------------- */
.inv-export-image-btn { display: inline-flex; align-items: center; gap: 7px; }
.img-export-modal { max-width: 1000px; }
.img-export-body { display: grid !important; grid-template-columns: 400px minmax(0, 1fr); gap: 28px !important; }
.img-export-settings { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.img-export-section { display: flex; flex-direction: column; gap: 10px; }
.img-export-section h3, .img-export-preview-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.img-export-section .muted { margin: 0; line-height: 1.45; }
.img-export-label { font-size: 13px; color: var(--text-soft); }
.img-export-layout-row { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.img-export-stepper { display: flex; flex-direction: column; gap: 6px; }
.img-export-stepper-ctl { display: flex; align-items: center; gap: 6px; }
.modal-box .img-export-stepper-ctl .btn { width: 34px; height: 34px; padding: 0; font-size: 16px; line-height: 1; }
.img-export-step-val {
  width: 46px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--border); border-radius: 7px;
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.img-export-x { font-size: 15px; color: var(--text-faint); padding-bottom: 8px; }
.img-export-per { display: flex; flex-direction: column; gap: 2px; padding-bottom: 5px; }
.img-export-per strong { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.img-export-per span { font-size: 12px; color: var(--text-muted); }
.img-export-quick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.img-export-quick .img-export-label { font-size: 12px; color: var(--text-muted); margin-right: 2px; }
.img-export-chip {
  font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--surface-2); color: var(--text-soft); transition: background .15s, color .15s;
}
.img-export-chip:hover { background: var(--surface-3); color: var(--text); }
.img-export-chip.is-active { background: #2A3039; color: var(--text); }
.img-export-pills { flex-wrap: wrap; align-self: flex-start; }
.img-export-check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text); cursor: pointer; margin: 0; }
.img-export-check input { width: 16px; height: 16px; margin: 0; }
.img-export-bg-row { display: flex; align-items: center; gap: 12px; }
.img-export-summary {
  background: var(--bg); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: inset 0 0 0 1px #1F242B;
}
.img-export-summary-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-soft); }
.img-export-summary-head strong { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -0.4px; white-space: nowrap; }
.img-export-minis { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.img-export-mini { display: flex; flex-direction: column; align-items: center; gap: 5px; border: none; background: none; padding: 0; cursor: pointer; font: inherit; }
.img-export-mini-grid {
  width: 46px; box-sizing: border-box; padding: 5px; border-radius: 6px; background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--border); display: grid; gap: 2.5px;
}
.img-export-mini-grid span { aspect-ratio: 5 / 7; border-radius: 1.5px; background: #1F242B; }
.img-export-mini-grid span.on { background: #4A525E; }
.img-export-mini.is-active .img-export-mini-grid { box-shadow: inset 0 0 0 1.5px var(--accent); }
.img-export-mini.is-active .img-export-mini-grid span.on { background: var(--accent); }
.img-export-mini-cap { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.img-export-mini.is-active .img-export-mini-cap { color: var(--text); }
.img-export-mini-more { font-size: 12px; color: var(--text-muted); align-self: center; }
.img-export-preview-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.img-export-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.img-export-nav { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.modal-box .img-export-nav .btn { width: 28px; height: 28px; padding: 0; font-size: 16px; line-height: 1; border-radius: 6px; }
.img-export-preview-wrap {
  background: repeating-conic-gradient(#14171C 0% 25%, #101317 0% 50%) 50% / 16px 16px;
  border-radius: 10px; padding: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px;
}
#imgExportCanvas { display: block; max-width: 100%; max-height: 62vh; width: auto; height: auto; border-radius: 4px; }
.img-export-name-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.img-export-name-row { display: flex; align-items: center; gap: 8px; }
.modal-box .img-export-name-row .text-input { flex: 1; min-width: 0; height: 38px; }
.img-export-name-ext { font-size: 13px; color: var(--text-muted); font-family: var(--font-mono); }
.img-export-section p.muted:empty { display: none; }
.img-export-optional { font-weight: 400; color: var(--text-muted); }
.modal-box #imgExportWatermark { height: 38px; }
.img-export-wm-note { color: var(--accent) !important; }
.img-export-wm-opts { display: flex; flex-direction: column; gap: 10px; transition: opacity .15s; }
.img-export-wm-opts.is-off { opacity: .45; pointer-events: none; }
.img-export-wm-label { width: 62px; flex: none; }
#imgExportPreviewMsg { margin: 10px 0 0; text-align: center; }
@media (max-width: 900px) {
  .img-export-body { grid-template-columns: minmax(0, 1fr); }
}

/* Manage users > Send weekly update */
.weekly-modal { max-width: 720px; }
.weekly-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 14px; font-size: 13px; }
.weekly-facts dt { color: var(--text-muted); }
.weekly-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.weekly-preview { display: block; width: 100%; height: 56vh; min-height: 320px; border: 1px solid var(--border); border-radius: 8px; background: #FFFFFF; }
.weekly-status { margin: 10px 0 0; min-height: 1.4em; }
.weekly-status.is-error { color: var(--danger); }
.weekly-recipients { margin: 10px 0 4px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.weekly-recipients-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface-2); font-size: 13px; font-weight: 600; }
.weekly-recipients-list { max-height: 260px; overflow-y: auto; }
.weekly-recipient { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 12px; align-items: center; padding: 7px 12px; font-size: 13px; border-top: 1px solid var(--border); }
.weekly-recipient > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weekly-see-who { background: none; border: 0; padding: 0; margin-left: 8px; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }
.weekly-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; }

/* ---------- Condition check ---------- */
#panel-condition [hidden] { display: none !important; }
#panel-condition .inv-title { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.6px; line-height: 1.15; }
#panel-condition .inv-head-text .muted { margin: 0; font-size: 14px; max-width: 640px; text-wrap: pretty; }
#panel-condition .inv-panel-title { margin: 0; font-size: 14px; font-weight: 600; }
.cond-start { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; max-width: 980px; }
.cond-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cond-slot { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cond-slot-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cond-slot-label { font-size: 15px; font-weight: 600; }
.cond-drop { position: relative; min-height: 300px; background: var(--surface); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; outline: 1.5px dashed #3A414C; outline-offset: -8px; transition: outline-color .15s, background .15s; }
.cond-drop.has-image { outline: none; box-shadow: inset 0 0 0 1px var(--border); }
.cond-drop.drag-over { outline-color: var(--accent); background: #1A1D22; }
.cond-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-muted); font-size: 13px; }
.cond-preview { max-width: 100%; max-height: 260px; border-radius: 6px; display: block; }
.cond-slot-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cond-pick { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.cond-tips { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-left: 4px solid var(--accent); }
.cond-tips .inv-panel-title { display: flex; align-items: center; gap: 8px; color: var(--accent); font-size: 16px; font-weight: 700; }
.cond-tips ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.45; }
.cond-tips li { position: relative; padding-left: 26px; }
.cond-tips li::before { content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0D10' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.cond-tips p { margin: 0; }
.cond-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; }
.cond-actions .btn-primary { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
#condStatus.is-error { color: var(--danger); }
.cond-result { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; max-width: 1180px; }
.cond-summary { display: flex; align-items: center; gap: 18px; background: var(--surface); border-radius: 12px; padding: 16px 20px; }
.cond-summary-main { flex: 1; min-width: 0; }
.cond-summary-title { font-size: 15px; }
.cond-summary-sep { width: 1px; align-self: stretch; background: var(--border); }
.cond-summary-note { flex: 1.4; min-width: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.cond-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cond-side { display: flex; gap: 16px; background: var(--surface); border-radius: 12px; padding: 16px; min-width: 0; }
.cond-side img { width: 168px; border-radius: 6px; display: block; flex: none; align-self: flex-start; }
.cond-side-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cond-side-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; font-weight: 600; }
.cond-rows { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 14px; align-items: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.cond-rows .k { color: var(--text-muted); }
.cond-rows .v-split { font-weight: 600; }
.cond-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin: 0; }
.cond-warn { font-size: 12.5px; line-height: 1.5; margin: 0; padding: 9px 12px; border-radius: 8px; background: var(--warning-bg); color: #F1C3A3; }
.cond-tag { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.cond-tag-ok { color: var(--success); background: var(--success-bg); }
.cond-tag-muted { color: var(--text-muted); background: var(--surface-2); }
.cond-inspect-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cond-inspect-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.cond-inspect { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.cond-inspect-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cond-inspect-side h4 { margin: 0; font-size: 13px; font-weight: 600; }
.cond-corners { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cond-edges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.cond-shot { margin: 0; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cond-shot img { width: 100%; border-radius: 6px; display: block; cursor: zoom-in; }
.cond-shot figcaption { font-size: 11.5px; color: var(--text-muted); }
.cond-surface { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border-radius: 10px; padding: 12px 16px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.cond-surface b { color: var(--text); font-weight: 600; }
.cond-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cond-zoom { position: fixed; inset: 0; z-index: 1200; background: rgba(5, 6, 8, .86); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.cond-zoom img { max-width: 94vw; max-height: 90vh; object-fit: contain; border-radius: 8px; image-rendering: auto; }
@media (max-width: 860px) {
  .cond-slots, .cond-sides, .cond-inspect, .cond-tips ul { grid-template-columns: minmax(0, 1fr); }
  .cond-summary { flex-direction: column; align-items: flex-start; }
  .cond-summary-sep { display: none; }
  .cond-side { flex-direction: column; }
  .cond-side img { width: 100%; max-width: 260px; }
}

/* ---------- eBay Variant - Pick a Card Listing (upload window, templates, My eBay Listings) ---------- */
.ebv-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }
.ebv-mode-opt { position: relative; cursor: pointer; }
.ebv-mode-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ebv-mode-opt span { display: block; text-align: center; padding: 8px 10px; border-radius: 7px; font-weight: 500; font-size: 13px; color: var(--text-muted); transition: background-color .15s ease, color .15s ease; }
.ebv-mode-opt small { display: block; font-weight: 400; font-size: 11px; color: var(--text-faint); margin-top: 1px; }
.ebv-mode-opt input:checked + span { background: var(--success-bg); color: #E3F6EA; box-shadow: inset 0 0 0 1px var(--success); }
.ebv-mode-opt input:checked + span small { color: var(--success); }
.ebv-mode-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.ebv-mode-opt:hover span { color: var(--text-soft); }

.ebv-view { display: flex; flex-direction: column; gap: 12px; }
.ebv-callout { font-size: 12.5px; color: var(--text-soft); }
.ebv-callout strong { color: var(--text); font-weight: 600; }
.ebv-group { border: 1px solid var(--border); border-radius: 12px; background: #13161B; overflow: hidden; }
.ebv-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; flex-wrap: wrap; }
.ebv-name { font-weight: 600; font-size: 13.5px; }
.ebv-head-right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.ebv-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; background: var(--surface-3); color: var(--text-soft); white-space: nowrap; }
.ebv-chip.is-gold { background: #2A2213; color: var(--accent); }
.ebv-chip.is-green { background: var(--success-bg); color: var(--success); }
.ebv-group-status { padding: 0 14px; font-size: 12px; }
.ebv-group-status:empty { display: none; }
.ebv-group-status > div { padding-bottom: 8px; }
.ebv-group-status .is-success, .ebv-row-status .is-success { color: var(--success); }
.ebv-group-status .is-error, .ebv-row-status .is-error { color: var(--danger); }
.ebv-group-status a, .ebv-row-status a { color: inherit; text-decoration: underline; }
.ebv-tpl-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; background: #171B21; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ebv-tpl-hint { margin-left: auto; font-size: 11.5px; color: var(--success); }
.ebv-select { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; color: var(--text); font: 500 12.5px var(--font-sans); max-width: 100%; }
.ebv-sec { padding: 12px 14px 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ebv-lbl { font-size: 11px; color: var(--text-muted); letter-spacing: .02em; }
.ebv-lbl-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ebv-lbl-row .muted { font-size: 11px; }
.ebv-field { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; }
.ebv-field:focus-within { border-color: #4A505A; }
.ebv-title { flex: 1; min-width: 0; background: transparent; border: none; color: var(--text); font: 400 13px var(--font-sans); padding: 8px 0; outline: none; }
.ebv-count { font: 400 11px var(--font-mono); color: var(--text-faint); font-variant-numeric: tabular-nums; }

.ebv-pics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ebv-pic { border: 1px solid var(--border); border-radius: 10px; padding: 6px; background: var(--bg); display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; font: 500 11.5px var(--font-sans); color: var(--text-soft); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; min-width: 0; }
.ebv-pic:hover:not(:disabled) { border-color: #3A404A; }
.ebv-pic:disabled { opacity: .45; cursor: not-allowed; }
.ebv-pic.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--text); }
.ebv-pic:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ebv-pic-art { width: 100%; aspect-ratio: 1; border-radius: 6px; background: var(--surface-3); display: grid; place-items: center; overflow: hidden; }
.ebv-pic-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ebv-pic-art img.is-card { object-fit: contain; background: #101317; }
.ebv-pic.is-upload .ebv-pic-art { background: transparent; border: 1px dashed #3A404A; }
.ebv-pic-plus { font-size: 22px; color: var(--text-muted); }
.ebv-pic-word, .ebv-pic-wait { font-size: 11px; color: var(--text-muted); }
.ebv-pic-name { margin-top: 2px; }
.ebv-pic-sub { font-weight: 400; font-size: 10.5px; color: var(--text-faint); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ebv-editor { border: 1px solid var(--border); border-radius: 8px; background: var(--bg); overflow: hidden; }
.ebv-editor:focus-within { border-color: #4A505A; }
.ebv-tools { display: flex; gap: 2px; align-items: center; padding: 5px 6px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ebv-tool { background: transparent; border: none; padding: 4px 8px; border-radius: 5px; color: var(--text-soft); font: 400 12px var(--font-sans); cursor: pointer; }
.ebv-tool:hover { background: var(--surface-2); color: var(--text); }
.ebv-tool-b { font-weight: 700; }
.ebv-tool-i { font-style: italic; }
.ebv-tool-upload { margin-left: auto; color: var(--accent); }
.ebv-sep { width: 1px; height: 16px; background: var(--border); margin: 0 4px; }
.ebv-insert { background: transparent; border: none; color: var(--text-soft); font: 400 12px var(--font-sans); padding: 4px 6px; border-radius: 5px; cursor: pointer; }
.ebv-insert:hover { background: var(--surface-2); }
.ebv-text { padding: 10px 12px; min-height: 96px; max-height: 260px; overflow-y: auto; color: var(--text); font-size: 12.5px; line-height: 1.55; outline: none; }
.ebv-text p { margin: 0 0 6px; }
.ebv-text ul, .ebv-text ol { margin: 0 0 6px; padding-left: 20px; color: var(--text-soft); }
.ebv-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 6px 12px; border-top: 1px solid #1E2229; font-size: 11px; color: var(--text-faint); }

.ebv-rows { border-top: 1px solid var(--border); margin-top: 12px; }
.ebv-group.is-collapsed .ebv-sec { padding-bottom: 12px; }
.ebv-rows-head, .ebv-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 82px 58px 24px; gap: 10px; align-items: center; padding: 7px 14px; }
.ebv-rows-head { padding: 8px 14px 4px; font-size: 11px; color: var(--text-faint); }
.ebv-rows-head span:nth-child(3), .ebv-rows-head span:nth-child(4) { text-align: right; }
.ebv-row { border-bottom: 1px solid #1E2229; }
.ebv-row:last-child { border-bottom: none; }
.ebv-thumb { width: 34px; height: 47px; border-radius: 3px; object-fit: cover; background: var(--surface-3); display: block; }
.ebv-row-text { min-width: 0; }
.ebv-row-name { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ebv-row-sub { font-size: 11.5px; color: var(--text-muted); }
.ebv-row-status { font-size: 11.5px; }
.ebv-row-status:empty { display: none; }
.ebv-inp { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 5px 7px; font: 500 12px var(--font-mono); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.ebv-inp:focus { outline: none; border-color: var(--accent); }
.ebv-x { background: transparent; border: none; color: var(--text-faint); font-size: 16px; line-height: 1; cursor: pointer; border-radius: 5px; padding: 3px 0; }
.ebv-x:hover { color: var(--danger); background: var(--danger-bg); }
.ebv-more { background: transparent; border: none; padding: 8px 14px 12px; font: 500 12px var(--font-sans); color: var(--accent); cursor: pointer; text-align: left; }
.ebv-more:hover { color: var(--accent-hover); }
.ebv-solo { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--border); }
.ebv-solo-price { font: 500 13px var(--font-mono); font-variant-numeric: tabular-nums; }

/* template window */
.vtm-box { max-width: 640px; }
.vtm-body { gap: 10px; }
.vtm-part { display: flex; flex-direction: column; gap: 6px; padding: 12px 0 0; border-top: 1px solid var(--border); }
.vtm-check { display: flex; align-items: flex-start; gap: 9px; font-weight: 500; font-size: 13px; cursor: pointer; }
.vtm-check input { margin-top: 2px; accent-color: var(--accent); }
.vtm-check small { display: block; font-weight: 400; font-size: 11.5px; color: var(--text-muted); }
.vtm-default { padding-top: 12px; border-top: 1px solid var(--border); }
.vtm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vtm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vtm-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--text-muted); min-width: 0; }
.vtm-money { display: flex; align-items: center; gap: 6px; }
.vtm-money span { color: var(--text-muted); }
.vtm-image { display: flex; align-items: center; gap: 10px; }
.vtm-image img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: var(--surface-3); }

/* eBay Settings */
.ebv-tpl-head { margin-top: 14px; }
.ebv-tpl-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.ebv-tpl-list > p { padding: 12px 14px; margin: 0; }
.ebv-tpl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 14px; border-top: 1px solid var(--border); }
.ebv-tpl-row:first-child { border-top: none; }
.ebv-tpl-name { font-weight: 600; font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ebv-tpl-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* My eBay Listings */
.ebv-listing { border-bottom: 1px solid var(--border); }
.ebv-listing-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; }
.ebv-listing.is-ended .ebv-listing-row > :not(.ebv-listing-btns) { opacity: .6; }
.ebv-listing .ebay-upload-review-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; white-space: normal; font-size: 14px; font-weight: 500; }
.ebv-listing .ebay-upload-review-meta { font-variant-numeric: tabular-nums; margin-top: 4px; }
.ebv-stack { position: relative; width: 52px; height: 67px; }
.ebv-stack img { position: absolute; width: 44px; height: 61px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 2px var(--surface); background: var(--surface-3); }
.ebv-stack img:nth-child(1) { left: 0; top: 6px; z-index: 3; }
.ebv-stack img:nth-child(2) { left: 4px; top: 3px; z-index: 2; }
.ebv-stack img:nth-child(3) { left: 8px; top: 0; z-index: 1; }
.ebv-listing-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ebv-l-tablewrap { overflow-x: auto; }
.ebv-l-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; min-width: 440px; }
.ebv-l-table th { text-align: left; font-weight: 500; font-size: 11px; color: var(--text-faint); padding: 6px 12px; }
.ebv-l-table td { padding: 7px 12px; border-top: 1px solid #1E2229; }
.ebv-l-table .n { text-align: right; }
.ebv-l-table tr.is-zero td { color: var(--text-faint); }
.ebv-l-note { color: var(--success); font-size: 11.5px; }
.ebv-l-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 12px 12px; }

@media (max-width: 640px) {
  .ebv-pics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ebv-rows-head, .ebv-row { grid-template-columns: 30px minmax(0, 1fr) 70px 46px 20px; gap: 8px; padding-inline: 10px; }
  .ebv-head, .ebv-sec, .ebv-tpl-bar { padding-inline: 10px; }
  .ebv-tpl-hint { margin-left: 0; }
  .ebv-solo { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .ebv-solo .ebv-to-group { grid-column: 2 / -1; justify-self: start; }
  .vtm-grid, .vtm-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .ebv-listing-row { grid-template-columns: 52px minmax(0, 1fr); }
  .ebv-listing-btns { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- Dashboard - compact layout (one screen at computer size) ---------- */
#panel-dashboard .dash-coll { gap: 12px; margin-bottom: 0; }
.dash-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dash-hello { margin-right: auto; min-width: 0; flex: 1 1 300px; }
.dash-top .dash-coll-controls { flex: none; }
.dash-nw { white-space: nowrap; }
#panel-dashboard .dash-hello .inv-title { margin: 0; font-size: 22px; letter-spacing: -.4px; }
.dash-kpi.is-scan .dash-kpi-sub > span, .dash-kpi.is-scan .dash-kpi-sub > b { white-space: nowrap; }
.dash-hello .muted { margin: 3px 0 0; }
#panel-dashboard .dash-seg button { padding: 5px 10px; }
#panel-dashboard .dash-price-pick { height: 32px; }

.dash-kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#panel-dashboard .dash-kpis { display: contents; }
#panel-dashboard .dash-kpi { padding: 13px 16px; border-radius: 12px; }
#panel-dashboard .dash-kpi::before { width: 160px; height: 160px; right: -50px; top: -60px; }
#panel-dashboard .dash-kpi-label { font-size: 11px; letter-spacing: 1.1px; }
#panel-dashboard .dash-kpi-body { margin-top: 6px; }
#panel-dashboard .dash-kpi-value { font-size: 25px; letter-spacing: -.6px; }
#panel-dashboard .dash-kpi-foot { margin-top: 4px; gap: 6px; }
#panel-dashboard .dash-kpi-sub, #panel-dashboard .dash-kpi-warn { font-size: 11.5px; }
#panel-dashboard .dash-chip { font-size: 11px; padding: 1px 6px; }
#panel-dashboard .dash-spark { width: 96px; height: 34px; }
.dash-kpi.is-scan { --k: var(--accent); }
.dash-spark.is-scan { color: var(--accent); }
.dash-kpi.is-scan b { color: var(--text-soft); font-weight: 500; }

.dash-row2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.dash-row2:has(> .dash-bygame-wrap[hidden]) { grid-template-columns: minmax(0, 1fr); }
#panel-dashboard .dash-card { padding: 14px 16px; border-radius: 12px; }
#panel-dashboard .dash-card-title { font-size: 14px; }
#panel-dashboard .dash-card-title .muted { font-weight: 400; margin-left: 6px; }
#panel-dashboard .dash-legend { gap: 12px; }
#panel-dashboard .dash-eyebrow { font-size: 11px; letter-spacing: 1.1px; }
#panel-dashboard .dash-chart-wrap { margin-top: 6px; }
#panel-dashboard .dash-main-foot { justify-content: space-between; align-items: center; gap: 10px; }
#panel-dashboard .dash-big { font-size: 22px; letter-spacing: -.4px; }
#panel-dashboard .dash-headline { margin-top: 6px; gap: 8px; }
#panel-dashboard .dash-empty { padding: 20px 10px; }

/* By game - a ring for each game's share of value, figures beside it */
#panel-dashboard .dash-bygame-wrap { margin-top: 0; gap: 0; }
#panel-dashboard .dash-bygame { display: flex; align-items: center; gap: 16px; flex: 1; grid-template-columns: none; }
.dash-ring { width: 112px; height: 112px; flex: none; }
.dash-ring .track { fill: none; stroke: var(--surface-3); stroke-width: 14; }
.dash-ring .seg { fill: none; stroke-width: 14; }
.dash-ring .seg.is-pokemon { stroke: #E8C547; }
.dash-ring .seg.is-magic { stroke: #C2603A; }
.dash-ring .big { font-size: 15px; font-weight: 600; fill: var(--text); font-family: var(--font-sans); }
.dash-ring .small { font-size: 9.5px; fill: var(--text-muted); font-family: var(--font-sans); }
.dash-game-rows { display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 0; }
#panel-dashboard .dash-game-head { margin-bottom: 4px; gap: 6px; }
#panel-dashboard .dash-game-name { font-size: 13px; }
#panel-dashboard .dash-game-figs { gap: 6px; }
#panel-dashboard .dash-game-figs span { font-size: 10.5px; }
#panel-dashboard .dash-game-figs b { font-size: 13px; margin-top: 1px; font-weight: 500; }
#panel-dashboard .dash-game-row .dash-kpi-warn { margin-top: 4px; }

/* bottom row of three */
#panel-dashboard .dash-lower { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#panel-dashboard .dash-mstats { gap: 14px; margin-top: 6px; }
#panel-dashboard .dash-mlegend { margin: 10px 0 4px; gap: 12px; }
#panel-dashboard .dash-mrow { grid-template-columns: minmax(60px, 90px) minmax(0, 1fr) 58px; gap: 8px; padding: 4px 0; }
#panel-dashboard .dash-mname, #panel-dashboard .dash-mval { font-size: 12px; }
#panel-dashboard .dash-mbar { height: 9px; }
.dash-split-bar { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; margin-top: 8px; }
.dash-split-bar .is-pokemon { background: #E8C547; } .dash-split-bar .is-magic { background: #C2603A; }
.dash-split-legend { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; font-size: 11.5px; color: var(--text-muted); }
.dash-split-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dash-split-legend b { color: var(--text); font-weight: 500; }
#panel-dashboard .lang-stat-list { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 3px 12px; margin-top: 10px; }
#panel-dashboard .lang-stat { grid-template-columns: 18px 34px minmax(0, 1fr) 54px; gap: 6px; font-size: 11.5px; }
#panel-dashboard .lang-stat-flag .lang-flag { width: 16px; height: 12px; }
#panel-dashboard .lang-stat-name { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
#panel-dashboard .lang-stat-track { height: 5px; }
#panel-dashboard .lang-stat.is-magic .lang-stat-fill { background: #C2603A; }
.dash-index-minis { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.dash-mini { font-size: 11px; color: var(--text-muted); background: var(--surface-2); border-radius: 6px; padding: 3px 7px; white-space: nowrap; }
.dash-mini b { color: var(--text); font-weight: 500; }
#statModerationCount.is-pending { color: var(--accent); }
#panel-dashboard .dash-coll-note { font-size: 11.5px; }

@media (max-width: 1280px) {
  .dash-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-row2 { grid-template-columns: minmax(0, 1fr); }
  #panel-dashboard .dash-lower { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #panel-dashboard .dash-index { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  #panel-dashboard .dash-lower { grid-template-columns: minmax(0, 1fr); }
  .dash-hello .muted { display: none; }
  .dash-top .dash-coll-controls { width: 100%; }
  #panel-dashboard .dash-kpi-body { flex-direction: column; align-items: stretch; gap: 6px; }
  #panel-dashboard .dash-spark { display: none; }
  #panel-dashboard .dash-kpi-value { font-size: 20px; }
  #panel-dashboard .dash-seg { overflow-x: auto; max-width: 100%; }
}
@media (max-width: 420px) {
  #panel-dashboard .dash-bygame { flex-direction: column; align-items: stretch; }
  .dash-ring { align-self: center; }
}

/* Duplicates found - the two choices side by side, stacked on a phone */
#duplicatesModalOverlay .modal-actions-note { flex-wrap: wrap; }
#duplicatesModalOverlay .modal-actions-note > p { flex: 1 1 100%; max-width: none; }
.dup-modal-btns { display: flex; gap: 8px; flex: none; margin-left: auto; }
@media (max-width: 640px) {
  .dup-modal-btns { flex-direction: column-reverse; width: 100%; }
  .dup-modal-btns .btn { width: 100%; }
}

/* Pick a Card main image - the Extra photos tile shows the photos themselves */
.ebv-pic-extras { width: 100%; height: 100%; display: grid; gap: 2px; }
.ebv-pic-extras.n2 { grid-template-columns: 1fr 1fr; }
.ebv-pic-extras.n3, .ebv-pic-extras.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.ebv-pic-extras.n3 img:first-child { grid-row: span 2; }
.ebv-pic-extras img { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; }
.ebv-pics { align-items: start; }
.ebv-pic-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ebv-pic-cell > .ebv-pic { width: 100%; }
.ebv-pic-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; }
.ebv-pic-change, .ebv-pic-reset { flex: none; width: auto; white-space: nowrap; background: none; border: 0; padding: 2px 4px; font: 500 11.5px var(--font-sans); color: var(--accent); cursor: pointer; border-radius: 4px; }
.ebv-pic-reset { color: var(--text-muted); }
.ebv-pic-change:hover, .ebv-pic-reset:hover { text-decoration: underline; }
.ebv-pic-change:focus-visible, .ebv-pic-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }


/* ---------- Sample listing (Pick a Card) - a plain, light shop page ---------- */
.vsl-box { max-width: 1060px; }
.vsl-body { gap: 12px; }
.ebv-sample { display: inline-flex; align-items: center; gap: 6px; }
.vsl-tabs { display: flex; gap: 3px; padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; width: fit-content; }
.vsl-tabs button { background: none; border: 0; color: var(--text-muted); font: 500 12.5px var(--font-sans); padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.vsl-tabs button.is-on { background: var(--success-bg); color: #E3F6EA; box-shadow: inset 0 0 0 1px var(--success); }
.vsl-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vsl-key { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; white-space: nowrap; }
.vsl-key i { width: 11px; height: 11px; border-radius: 3px; background: #FFF4D6; display: inline-block; }

.vsl-page { color-scheme: light; background: #fff; color: #191919; border-radius: 10px; padding: 22px; font: 400 14px/1.45 var(--font-sans); }
.vsl-page.is-phone { max-width: 390px; width: 100%; margin: 0 auto; padding: 14px; }
.vsl-filled { background: #FFF4D6; color: inherit; border-radius: 3px; padding: 0 2px; }
.vsl-crumbs { font-size: 12px; color: #5F6368; margin-bottom: 14px; }
.vsl-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.vsl-gallery { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: start; }
.vsl-thumbs { position: relative; display: flex; flex-direction: column; gap: 8px; height: 0; min-height: 100%; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
.vsl-thumbs button { width: 64px; height: 64px; flex: none; border-radius: 8px; border: 1px solid #E5E5E5; padding: 3px; background: #fff; cursor: pointer; }
.vsl-thumbs button.is-on { border: 2px solid #191919; padding: 2px; }
.vsl-thumbs img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* the photo sits inside the box whole, whatever its shape - a card isn't square */
.vsl-stage { aspect-ratio: 1; max-height: 420px; background: #F4F4F4; border-radius: 12px; display: grid; place-items: center; overflow: hidden; position: relative; }
.vsl-stage img { position: absolute; inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); object-fit: contain; }
.vsl-tag { position: absolute; left: 10px; bottom: 10px; font-size: 11.5px; background: rgba(25, 25, 25, .78); color: #fff; padding: 3px 8px; border-radius: 6px; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsl-none { color: #5F6368; font-size: 13px; }
.vsl-title { font: 600 21px/1.28 var(--font-sans); margin: 0 0 6px; letter-spacing: -.01em; color: #191919; text-wrap: pretty; }
.vsl-seller { font-size: 12.5px; color: #5F6368; margin-bottom: 14px; }
.vsl-price { font: 700 26px/1.1 var(--font-sans); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.vsl-price-note { font-size: 12.5px; color: #5F6368; margin-bottom: 16px; }
.vsl-fld { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 12px; align-items: center; margin-bottom: 10px; font-size: 13.5px; }
.vsl-k { color: #5F6368; }
.vsl-fld select { font: 400 14px var(--font-sans); padding: 9px 10px; border-radius: 8px; border: 1px solid #C7C7C7; background: #fff; color: #191919; width: 100%; min-width: 0; }
.vsl-fld select.is-needed { border-color: #B3261E; }
.vsl-qty { display: flex; align-items: center; gap: 10px; color: #5F6368; font-size: 13px; }
.vsl-qty input { width: 64px; font: 400 14px var(--font-sans); padding: 8px 10px; border-radius: 8px; border: 1px solid #C7C7C7; background: #fff; color: #191919; }
.vsl-btns { display: grid; gap: 8px; margin: 16px 0; }
.vsl-btns span { display: block; text-align: center; padding: 11px; border-radius: 999px; font-weight: 600; font-size: 14px; }
.vsl-b1 { background: #191919; color: #fff; }
.vsl-b2 { box-shadow: inset 0 0 0 1px #191919; color: #191919; }
.vsl-ship { border-top: 1px solid #E5E5E5; padding-top: 12px; display: grid; gap: 6px; font-size: 13px; }
.vsl-ship div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
.vsl-lower { margin-top: 26px; border-top: 1px solid #E5E5E5; padding-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.vsl-lower h4 { margin: 0 0 10px; font: 600 15px var(--font-sans); color: #191919; }
.vsl-specs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; font-size: 13px; }
.vsl-soft { color: #5F6368; }
.vsl-desc { font-size: 14px; overflow-wrap: anywhere; }
.vsl-desc p, .vsl-desc div { margin: 0 0 8px; }
.vsl-desc ul, .vsl-desc ol { margin: 0 0 8px; padding-left: 18px; }
.vsl-page.is-phone .vsl-top, .vsl-page.is-phone .vsl-lower { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.vsl-page.is-phone .vsl-gallery { grid-template-columns: minmax(0, 1fr); }
.vsl-page.is-phone .vsl-thumbs { flex-direction: row; order: 2; overflow-x: auto; height: auto; min-height: 0; }
.vsl-page.is-phone .vsl-title { font-size: 18px; }
@media (max-width: 760px) {
  .vsl-page { padding: 14px; }
  .vsl-top, .vsl-lower { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vsl-gallery { grid-template-columns: minmax(0, 1fr); }
  .vsl-thumbs { flex-direction: row; order: 2; overflow-x: auto; height: auto; min-height: 0; }
  .vsl-title { font-size: 18px; }
}


/* ---------- Schedule When to publish (upload window, one listing per card) ---------- */
.ebsch { border: 1px solid var(--border); border-radius: 12px; background: var(--bg); padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.ebsch-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ebsch-head b { font-weight: 600; font-size: 14px; color: var(--text); }
.ebsch-note { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: var(--text-muted); }
.ebsch-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.ebsch-seg label, .ebsch-unit label { position: relative; cursor: pointer; }
.ebsch-seg input, .ebsch-unit input { position: absolute; opacity: 0; pointer-events: none; }
.ebsch-seg span { display: block; text-align: center; padding: 8px 6px; border-radius: 7px; font-weight: 500; font-size: 13px; color: var(--text-muted); transition: background-color .15s ease, color .15s ease; }
.ebsch-seg small { display: block; font-weight: 400; font-size: 11px; color: var(--text-faint); margin-top: 1px; }
.ebsch-seg input:checked + span, .ebsch-unit input:checked + span { background: var(--success-bg); color: #E3F6EA; box-shadow: inset 0 0 0 1px var(--success); }
.ebsch-seg input:checked + span small { color: var(--success); }
.ebsch-seg input:focus-visible + span, .ebsch-unit input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.ebsch-seg label:hover span { color: var(--text-soft); }
.ebsch-pane { display: flex; flex-direction: column; gap: 12px; }
.ebsch-pane[hidden] { display: none; }
.ebsch-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.ebsch-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ebsch-f > span { font-size: 11.5px; color: var(--text-muted); }
.ebsch-f .text-input { color-scheme: dark; width: auto; }
.ebsch-by { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ebsch-f .ebsch-n { width: 74px; }
.ebsch-unit { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.ebsch-unit span { display: block; padding: 6px 12px; border-radius: 6px; font-size: 12.5px; color: var(--text-muted); }
.ebsch-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ebsch-chip { background: var(--surface); border: 1px solid var(--border); color: var(--text-soft); border-radius: 999px; padding: 5px 11px; font: 500 12px var(--font-sans); cursor: pointer; }
.ebsch-chip:hover { border-color: #3A404A; }
.ebsch-chip.is-on { border-color: var(--accent); color: var(--accent); background: #241C0E; }
.ebsch-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ebsch-pane[data-unit="days"] .ebsch-by-hours, .ebsch-pane[data-unit="hours"] .ebsch-by-days { display: none; }
.ebsch-plan { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ebsch-plan-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-soft); }
.ebsch-plan-head b { font-weight: 600; color: var(--text); }
.ebsch-bars { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.ebsch-bar { display: grid; grid-template-columns: 92px minmax(0, 1fr) 150px; gap: 10px; align-items: center; font-size: 12px; }
.ebsch-bar .d { color: var(--text-soft); }
.ebsch-bar .t { color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.ebsch-track { height: 16px; background: var(--surface-2); border-radius: 4px; position: relative; overflow: hidden; }
.ebsch-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 4px; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; font: 600 10.5px var(--font-sans); color: var(--accent-ink); min-width: 24px; }
.ebsch-sum { font-size: 12px; color: var(--text-muted); }
.ebsch-sum:empty { display: none; }
.ebsch-sum.is-bad { color: #E58A4E; }
@media (max-width: 640px) {
  .ebsch-seg { grid-template-columns: minmax(0, 1fr); }
  .ebsch-bar { grid-template-columns: 70px minmax(0, 1fr); }
  .ebsch-bar .t { display: none; }
}

/* My eBay Listings - scheduled listings */
.ebs-pill.ebl-pill-sched { background: #13283A; color: #7CB8E8; border-color: transparent; }
.ebl-sched-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ebl-batch { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.ebl-batch-name { font-weight: 600; color: var(--text); }
.ebl-batch-prog { flex: 1 1 160px; min-width: 120px; height: 8px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.ebl-batch-prog i { display: block; height: 100%; background: var(--success); }


/* ---------- Send weekly update: tabs, Send to, Facebook post ---------- */
.weekly-modal { transition: max-width .2s ease; }
.weekly-modal.is-wide { max-width: 1020px; }
.weekly-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; max-width: 420px; margin-bottom: 14px; }
.weekly-tabs button { background: none; border: 0; color: var(--text-muted); font: 500 13px var(--font-sans); padding: 8px 10px; border-radius: 7px; cursor: pointer; display: inline-flex; justify-content: center; align-items: center; gap: 7px; transition: background-color .15s ease, color .15s ease; }
.weekly-tabs button:hover { color: var(--text-soft); }
.weekly-tabs button.is-on { background: var(--success-bg); color: #E3F6EA; box-shadow: inset 0 0 0 1px var(--success); }
.weekly-tabs button:focus-visible, .weekly-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.weekly-pane[hidden] { display: none; }
.weekly-lbl { font-size: 12px; color: var(--text-muted); margin-bottom: 5px; }
.weekly-sendto { border: 1px solid var(--border); border-radius: 12px; background: var(--bg); padding: 12px 14px; margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.weekly-sendto-h { font-size: 14px; font-weight: 600; color: var(--text); }
.weekly-chk { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 13px; }
.weekly-chk input { margin: 3px 0 0; accent-color: var(--accent); width: 15px; height: 15px; flex: none; }
.weekly-chk small { display: block; color: var(--text-muted); font-size: 12px; }
.weekly-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px; min-height: 42px; cursor: text; }
.weekly-chips:focus-within { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.weekly-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-3); color: var(--text); border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 12.5px; max-width: 100%; overflow-wrap: anywhere; }
.weekly-chip.is-bad { background: #3A1E19; color: #F2B3A6; }
.weekly-chip button { background: none; border: 0; color: inherit; opacity: .7; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 5px; border-radius: 4px; }
.weekly-chip button:hover { opacity: 1; }
.weekly-chips input { flex: 1 1 200px; min-width: 160px; background: none; border: 0; color: var(--text); font: 400 13px var(--font-sans); outline: none; padding: 4px; }
.weekly-bad { margin: 0; font-size: 12px; color: var(--danger); }
.weekly-bad:empty { display: none; }
.weekly-warn { margin: 0; font-size: 12px; color: var(--text-muted); }
.weekly-warn b { color: var(--text); font-weight: 500; }
.weekly-actions { align-items: center; }
.weekly-send-note { margin-right: auto; font-size: 12px; color: var(--text-muted); }

.weekly-fb { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.weekly-fb-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.weekly-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.weekly-row .weekly-lbl { margin: 0; }
.weekly-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; flex-wrap: wrap; }
.weekly-seg button { background: none; border: 0; color: var(--text-muted); font: 500 12.5px var(--font-sans); padding: 5px 11px; border-radius: 6px; cursor: pointer; }
.weekly-seg button.is-on { background: var(--success-bg); color: #E3F6EA; box-shadow: inset 0 0 0 1px var(--success); }
.weekly-fb-text { width: 100%; min-height: 320px; resize: vertical; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 12px; font: 400 13.5px/1.55 var(--font-sans); }
.weekly-fb-text:focus { outline: 2px solid var(--accent); border-color: transparent; }
.weekly-fb-square { width: 100%; max-width: 260px; border-radius: 8px; border: 1px solid var(--border); display: block; }
.weekly-fb-pics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.weekly-fb-pics img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--border); display: block; }
#weeklyFbDownload.is-disabled { pointer-events: none; opacity: .5; }
.weekly-how { font-size: 12px; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 10px; }
.weekly-how ol { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 2px; }
/* the preview - a plain light feed post */
.weekly-feed { background: #F0F2F5; border-radius: 12px; padding: 14px; color-scheme: light; }
.weekly-post { background: #fff; color: #050505; border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); overflow: hidden; font: 400 14.5px/1.4 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
.weekly-post-head { display: flex; gap: 10px; align-items: center; padding: 12px 14px 8px; }
.weekly-post-av { width: 40px; height: 40px; border-radius: 50%; background: #0E1014; display: grid; place-items: center; color: #D9A441; font-weight: 700; }
.weekly-post-name { font-weight: 600; font-size: 15px; }
.weekly-post-when { font-size: 12.5px; color: #65676B; }
.weekly-post-text { padding: 0 14px 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.weekly-post-more { background: none; border: 0; padding: 0; color: #65676B; font: inherit; font-weight: 600; cursor: pointer; }
.weekly-post-img { display: block; width: 100%; }
.weekly-post-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.weekly-post-grid.is-one { grid-template-columns: 1fr; }
.weekly-post-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; }
.weekly-post-foot { display: flex; justify-content: space-around; border-top: 1px solid #E4E6EB; margin: 0 14px; padding: 6px 0; color: #65676B; font-size: 13.5px; font-weight: 600; }
@media (max-width: 860px) {
  .weekly-fb { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .weekly-fb-pics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weekly-send-note { flex-basis: 100%; }
}
#weeklyFbDownload { text-decoration: none; display: inline-flex; }

/* Edit template, opened from the upload window: Copy from this listing sits
   beside Cancel in the window's header. */
.vtm-box .compare-modal-header { gap: 8px; }
.vtm-from-listing { margin-left: auto; flex: none; }

/* Set image / Extra photos, bigger (Upload to eBay > Pick a Card) */
.ebvv-box { max-width: 620px; }
.ebvv-body { display: flex; flex-direction: column; gap: 12px; }
.ebvv-stage { display: flex; align-items: center; justify-content: center; min-height: 260px; background: #0F1216; border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.ebvv-stage img { display: block; max-width: 100%; max-height: min(58vh, 520px); object-fit: contain; border-radius: 6px; }
.ebvv-wait { font-size: 13px; color: var(--text-muted); }
.ebvv-thumbs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ebvv-thumbs:empty { display: none; }
.ebvv-thumbs button { width: 64px; height: 64px; padding: 0; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: var(--surface-3); cursor: pointer; }
.ebvv-thumbs button.is-on { border-color: var(--accent); }
.ebvv-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Scan settings > Look up by set code: "add both" for a code two sets share */
.btn-link-inline { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }

/* Send weekly update > Facebook post: which updates go in the post */
.weekly-pick { max-height: 218px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); scrollbar-width: thin; }
.weekly-pick-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 10px; border-top: 1px solid var(--border); cursor: pointer; font-size: 13px; }
.weekly-pick-row:first-child { border-top: 0; }
.weekly-pick-row:hover { background: var(--surface-2, #1A1E24); }
.weekly-pick-row input { margin: 0; accent-color: var(--accent); }
.weekly-pick-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weekly-pick-date { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.weekly-pick-date b { color: var(--success); font-weight: 500; }
.weekly-pick-count { font-weight: 400; color: var(--text-muted); margin-left: 6px; }
.weekly-pick-btns { display: inline-flex; gap: 4px; }
@media (max-width: 520px) {
  .weekly-pick-row { grid-template-columns: auto auto minmax(0, 1fr); }
  .weekly-pick-date { grid-column: 3; white-space: normal; }
}