:root {
  /* CardVault — "The Vault": an archival, slab-forward grading terminal.
     Deep ink-navy ground, bone/parchment text, holographic prism accent
     (cards are holo — we lean in, tastefully). Sharp slab corners. */
  --bg: #0A0E1A;
  --bg-sunken: #06080F;
  --bg-elevated: #111829;
  --panel: #131B2E;
  --panel-2: #1A2440;
  --border: #232E4A;
  --border-strong: #33406A;
  --fg: #ECE7D8;              /* bone / parchment */
  --fg-soft: #B9BFD0;
  --muted: #7E879B;

  /* Signals — holo prism */
  --accent: #7CE0FF;          /* holo cyan — BUY / best comp */
  --accent-soft: rgba(124, 224, 255, 0.14);
  --accent-bright: #9AE8FF;  /* hover-brightened accent — hover state of accent CTAs */
  --accent-ink: #06080F;
  --highlight: #E6C068;       /* slab-label gold — HOLD / grade */
  --highlight-soft: rgba(230, 192, 104, 0.16);
  --accent-amber: #E6C068;    /* alias of --highlight */
  --danger: #FF5C8A;          /* rose — WAIT / SKIP */
  --danger-soft: rgba(255, 92, 138, 0.16);

  /* Source tags — one hue per card source. */
  --ebay:          #4C8DFF;
  --tcgplayer:     #7CE0FF;
  --pricecharting: #E6C068;
  /* Legacy sneaker-vendor vars kept defined (harmless) for any shared CSS. */
  --stockx: #7CE0FF; --goat: #E6C068; --nike: #FF5C8A;
  --flightclub: #B07CF6; --stadiumgoods: #9AA7B5; --kickscrew: #F472B6;

  /* ── Spacing scale ───────────────────────────────────────────────
     ONE rhythm for every gap / margin / padding. Use these tokens instead
     of ad-hoc px so vertical + horizontal spacing stays consistent across
     the app and we never re-litigate "is this 9px or 14px?". 4px base. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  /* Standard gutter the canvas + every section align their left edge to. */
  --gutter: 16px;

  /* ── Radius scale ────────────────────────────────────────────────
     The rounded system. --radius-lg (12px) is the card default everywhere;
     the legacy brutalist --r-* below are kept as deprecated aliases so old
     rules don't break, but new work uses --radius-*. */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* Slab corners — almost everything squared; larger only for modals.
     (Legacy brutalist radii — deprecated; migrate call sites to --radius-*.) */
  --r-0: 0;
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;

  --card-edge: rgba(255, 255, 255, 0.05);
  --shadow: 0 0 0 1px rgba(124, 224, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.5);
  --dotgrid: radial-gradient(rgba(124, 224, 255, 0.045) 1px, transparent 1px);

  color-scheme: dark;
}

/* ── Brutalist override layer — sharpens corners across all the
   rounded surfaces defined later in this file. Single source of truth
   for the squared-edges aesthetic so individual rules don't have to
   each change their border-radius. */
.card,
.daily-card,
.drop-card,
.trending-card,
.no-results,
.watchlist-empty-card,
.landing-hero,
.scout,
.compare-drawer,
.auth-modal-card,
.plans-modal-card,
.tier-meter,
.tier-meter-cta,
.sidebar-watch,
.account-btn,
.account-card,
.account-action,
.account-signout,
.recent-pill,
.recent-remove,
.search-field,
.field input,
.field select,
.auth-field input,
.auth-field textarea,
.auth-field select,
.auth-submit,
.auth-tab,
.dropzone,
.dropzone-cta,
.identify-preview,
.palette-card,
.palette-list li,
.toast,
.rate-toast-inner,
.daily-cat,
.daily-card-retail,
.drop-card-date,
.drop-card-img-wrap .drop-countdown,
.drop-countdown,
.source-tag,
.fresh-pill,
.stock-pill,
.delta-pill,
.arb-pill,
.compare-toggle,
.watch-toggle,
.chevron,
.size-chip,
.scout-hook,
.scout-error-retry,
.no-results-chip,
.watchlist-empty-cta,
.plans-trust,
.plans-grid > *,
.brief-card,
.deep-dive,
.scout-take,
.brief-lead,
.brief-stats > *,
.brief-stat,
.hero-image-wrap,
.hero-thumb,
.story,
.facts,
.sizes,
.size-grid > *,
.chip-row > *,
.price-cell,
.premium-chip {
  border-radius: var(--r-sm) !important;
}

/* Brutalist section header — "// TODAYS-PICKS ────────  sub copy".
   Replaces the old "badge + sub" pattern across daily/drops/trending. */
.section-block { margin: 0 0 var(--space-6); display: grid; gap: var(--space-3); }
.section-block[hidden] { display: none !important; }

.section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.section-marker {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}
.section-title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--fg);
  line-height: 1.2;
}
.section-rule {
  height: 1px;
  /* Fades out to the right instead of a flat full-width line — reads
     more editorial / intentional than a hard rule. */
  background: linear-gradient(90deg, var(--border-strong), transparent);
  align-self: center;
}
.section-sub {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-weight: 450;
  letter-spacing: 0;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 720px) {
  .section-head { grid-template-columns: auto auto 1fr; }
  .section-sub  { display: none; }
}

/* Old "badge + sub" headers were replaced by .section-head — guard
   against any stale markup leaking a duplicate. */
.daily-head, .drops-head, .trending-head { display: none !important; }

/* Buttons + chips get the sharpest squared edges — these are the most
   "trader terminal" elements and the brutalist look hinges on them. */
button.go,
#go,
.auth-submit,
.dropzone-cta,
.scout-hook-cta,
.scout-error-retry,
.watchlist-empty-cta,
.rate-toast-cta,
.no-results-chip,
.toast-dismiss,
.source-tag,
.fresh-pill,
.stock-pill,
.delta-pill,
.daily-cat,
.drop-countdown,
.badge,
kbd {
  border-radius: var(--r-0) !important;
}

* { box-sizing: border-box; }

/* The browser default [hidden] { display: none } gets overridden by
   any explicit display: rule on the element (.account-card { display:
   grid } beats the UA stylesheet). Restore the intent globally so a
   `hidden` attribute always actually hides — otherwise both signin-btn
   AND account-card render simultaneously regardless of auth state. */
[hidden] { display: none !important; }

/* Text selection — default browser blue is hard to read on dark slate.
   High-contrast mint highlight with the dark ink color matches the
   rest of the Floor Trader palette. */
::selection {
  background: var(--accent);
  color: var(--accent-ink);
}
::-moz-selection {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Scrollbars — applied globally so every overflowing pane (sidebar,
   watchlist modal, palette list, brief panel, hero thumbs) shares one
   unified language instead of the OS-default grey thumbs that age the
   whole product. Firefox via scrollbar-color, WebKit via pseudos. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 224, 255, 0.28) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(124, 224, 255, 0.22);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 0.16s ease;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(124, 224, 255, 0.42);
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  overflow: hidden;
}

body {
  background-image: none;
  display: grid;
  grid-template-rows: 1fr;
  min-height: 0;
  /* Fade-in masks small async layout shifts from JS-populated sections
     (trending, drops) landing at slightly different times. */
  opacity: 0;
  animation: body-fade-in 0.35s ease 0.08s forwards;
}
@keyframes body-fade-in {
  to { opacity: 1; }
}

/* ───────── App shell layout ───────── */

.app-shell {
  display: grid;
  grid-template-columns: 320px 1fr;
  /* Stretch into body's 1fr row — without explicit 100%, some
     browsers shrink to content height when the canvas is short,
     leaving the sidebar floating instead of reaching the bottom. */
  height: 100%;
  min-height: 0;
}

.sidebar {
  background: var(--bg-sunken);
  border-right: 1px solid var(--border);
  padding: 18px 18px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* Tightened inter-section rhythm so the full default sidebar (brand →
     form → recent → sources → list-a-pair → account → footer) fits a
     standard laptop viewport without scrolling; the scrollbar only
     appears once content genuinely overflows (small screens / many
     recent hunts). */
  gap: 13px;
  /* Always fill the grid column so .sidebar-footer { margin-top: auto }
     actually anchors to the bottom — without this, short anon sidebars
     collapse to content height and the footer floats up. */
  height: 100%;
  min-height: 0;
}
/* Subtle, brutalist-squared scrollbar for the sidebar — only paints
   when content overflows. Thin track, sharp mint thumb (no rounding) to
   match the rest of the squared UI. */
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-thumb { border-radius: 0; border-width: 1px; }

/* Brand mark is now a button — clicking it returns to the landing
   state (same as the ✕ clear button in the search input). Visually
   identical to the original div; the button reset just strips
   defaults. */
.sidebar-brand {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
  cursor: pointer;
  box-shadow: none;
  width: 100%;
  transition: opacity 0.14s ease;
}
.sidebar-brand:hover { opacity: 0.88; }
.sidebar-brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Brutalist brand mark — sharp square, mint sneaker silhouette, a
   single filled-corner "terminal cursor" tick. No rounded corners, no
   soft glow — matches the squared/mono identity of the rest of the app. */
.brand-mark {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: var(--bg-sunken);
  color: var(--accent);
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  box-shadow: none;
}
.brand-sneaker {
  width: 28px;
  height: 28px;
  display: block;
}
/* Tiny mint corner tick — reads like a terminal cursor / scope mark. */
.brand-mark-tick {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 6px;
  background: var(--accent);
}
.sidebar-brand:hover .brand-mark { border-color: var(--accent); }

.brand-text { display: grid; gap: 0; }

/* Wordmark = SNEAKERMARKET, matching the domain. SNEAKER reads in fg,
   MARKET in mint — one tight lockup, all-caps mono, tracked tight so
   the 13 characters fit the sidebar on one line. */
.brand-name {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 15px;
  line-height: 1;
  color: var(--fg);
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-name-mkt { color: var(--accent); }

.brand-tag {
  margin: 4px 0 0;
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--muted);
}
.brand-tag-dot { color: var(--accent); font-weight: 700; }

.sidebar-form {
  display: grid;
  gap: 10px;
}

.sidebar-form .form-section { display: grid; gap: 6px; }
.sidebar-form .form-section.row { grid-template-columns: 1fr 1fr; gap: 8px; }
.sidebar-form .form-section.row .field { display: grid; gap: 4px; }

.filters-row .field input { padding: 8px 12px; font-size: 13px; }

.query-section { position: relative; }

/* Search bar — built as a <label> so clicking the icon focuses the input.
   Grid layout (icon | input) so the two children can't collide regardless
   of font-size / box-sizing. type="text" (not "search") to avoid Safari's
   stubborn user-agent search-field paint. */
.search-field {
  display: grid;
  /* Tracks: icon · input · camera · clear. The camera (📷 paste-to-find)
     is always visible. Clear collapses to 0 via [hidden]. */
  grid-template-columns: 18px 1fr auto auto;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 10px 0 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: text;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.search-field-drop {
  border-color: var(--accent);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.search-camera {
  background: transparent;
  border: 0;
  color: var(--muted);
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s ease, background 0.12s ease;
}
.search-camera:hover { color: var(--accent); background: var(--bg-elevated); }
.search-camera:focus-visible {
  outline: none;
  color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.search-clear {
  background: transparent;
  border: 0;
  color: var(--muted);
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  transition: color 0.12s ease, background 0.12s ease;
}
.search-clear:hover { color: var(--fg); background: var(--bg-elevated); }
.search-clear:focus-visible {
  outline: none;
  color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.search-field:hover { border-color: var(--border-strong); }

.search-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  background: var(--bg-elevated);
}

.search-field .search-icon {
  display: block;
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: color 0.14s;
}

.search-field:focus-within .search-icon { color: var(--accent); }

/* Specificity has to beat the global input[type=text]|[number] rule. */
.search-field > input,
.search-field > input[type="text"] {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  /* Clip cleanly inside the (narrow) sidebar track instead of letting a
     long placeholder spill under the camera/clear buttons or cut off
     mid-word. */
  text-overflow: ellipsis;
}

.search-field > input::placeholder {
  color: var(--muted);
  opacity: 1;
  font-weight: 400;
  text-overflow: ellipsis;
}

.search-field > input:focus,
.search-field > input:hover {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.suggest-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 6px;
  z-index: 80;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(124, 224, 255, 0.05);
  display: grid;
  gap: 1px;
  max-height: 420px;
  overflow-y: auto;
}

.suggest-list[hidden] { display: none; }

.suggest-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--fg);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: background 0.08s, border-color 0.08s, color 0.08s;
}

.suggest-item:hover,
.suggest-item.active {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
}

.suggest-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.suggest-item.kind-recent  .suggest-icon { color: var(--accent); }
.suggest-item.kind-history .suggest-icon { color: var(--highlight); }
.suggest-item.kind-popular .suggest-icon { color: var(--muted); }

.suggest-label {
  font-weight: 400;
  line-height: 1.35;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.suggest-label mark {
  background: transparent;
  color: var(--fg);
  font-weight: 600;
  padding: 0;
  border-radius: 0;
}

.suggest-meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.suggest-footer {
  display: flex;
  gap: 12px;
  padding: 8px 10px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}

.suggest-footer kbd {
  display: inline-block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 4px;
  margin-right: 2px;
  font-family: inherit;
  font-size: 9px;
  color: var(--fg-soft);
}

.sidebar-form label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--muted);
  margin: 0;
  padding-left: 2px;
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.sidebar-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--fg-soft);
}
/* "// PREFIX" before every sidebar section label — pure CSS, no markup
   change required. Keeps the brutalist marker consistent with the
   canvas .section-head markers. */
.sidebar-label::before {
  content: "// ";
  color: var(--accent);
  font-weight: 700;
}

.recent-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.recent-list .empty {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  font-style: italic;
}

.recent-row {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  transition: opacity 0.16s ease, transform 0.16s ease, max-height 0.18s ease, margin 0.18s ease;
  max-height: 60px;
  overflow: hidden;
}

.recent-row.removing {
  opacity: 0;
  transform: translateX(8px);
  max-height: 0;
  margin-top: -4px;
}

.recent-row.entering {
  animation: recentRowIn 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes recentRowIn {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    max-height: 0;
    margin-bottom: -4px;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 60px;
    margin-bottom: 0;
  }
}

.recent-pill {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-soft);
  padding: 6px 32px 6px 10px;  /* right padding leaves room for the absolute × */
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.recent-pill:hover {
  border-color: var(--accent);
  background: var(--panel);
  color: var(--fg);
}

.recent-pill .recent-query {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
}

.recent-remove {
  /* Absolutely positioned so the pill itself can fill the full sidebar width
     instead of leaving a grid track for the × button at rest. */
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%) scale(0.85);
  width: 24px;
  height: 24px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease, background 0.12s, color 0.12s;
}

.recent-row:hover .recent-remove,
.recent-remove:focus-visible {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  pointer-events: auto;
}

.recent-remove:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

.recent-pill .recent-meta {
  font-size: 10px;
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  white-space: nowrap;
  flex-shrink: 0;
}

.sidebar-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.sidebar-action {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transform: translateX(2px);
  transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.12s, color 0.12s, background 0.12s;
}

.sidebar-action.visible {
  opacity: 1;
  transform: translateX(0);
}

.sidebar-action:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* Bottom-anchored account / conversion zone. margin-top:auto pulls the
   whole group (tier meter → watchlist → sign-in/account → footer) to the
   foot of the sidebar so the value→action path sits where the eye rests.
   A hairline top rule separates it from the scrolling content above
   without adding visual weight. */
.sidebar-foot-group {
  margin-top: auto;
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Popular-hunts quick chips — fill the idle mid-sidebar with tappable
   real searches. Squared to match the brutalist UI; accent on hover. */
.quick-hunts { display: grid; gap: 8px; }
.quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.quick-chip {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: -0.01em;
  color: var(--muted);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 5px 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.quick-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--panel); }
.quick-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.sidebar-footer {
  padding-top: 4px;
}

.sidebar-footer p {
  margin: 0;
  font-size: 10px;
  letter-spacing: -0.01em;
  color: var(--muted);
  /* Keep the attribution + links on one line — 11px pushed ~3px past
     the sidebar width and wrapped "Contact" to a second row. Inline
     flow (not flex) so the space between "via" and the Spider link is
     preserved. */
  white-space: nowrap;
}

.sidebar-footer a {
  color: var(--accent);
  text-decoration: none;
}
.sidebar-footer a:hover { text-decoration: underline; }

.footer-sep { margin: 0 5px; color: var(--border-strong); }

/* Footer "Contact" — looks like the Terms link, behaves like a button
   so it can open the contact modal without a navigation. */
.footer-link {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  letter-spacing: inherit;
  text-transform: none;
}
.footer-link:hover { text-decoration: underline; background: transparent; }
.footer-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* ── Account section in sidebar ─────────────────────────────────── */

.account-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--fg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 13px;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: -0.005em;
  text-transform: none;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.account-btn-glyph {
  display: none;
}
.account-btn-label {
  color: var(--fg);
  font-weight: 600;
}
.account-btn-meta {
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0;
  font-size: 12px;
  margin-left: auto;
}
.account-btn:hover {
  border-color: var(--accent);
  background: var(--bg-elevated);
}
.account-btn:hover .account-btn-glyph {
  color: var(--accent);
  transform: translate(2px, 1px);
}
.account-btn:hover .account-btn-label { color: var(--accent); }
.account-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 224, 255, 0.18);
}

.account-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.account-info {
  display: grid;
  gap: 6px;
}

.account-email {
  font-size: 12px;
  color: var(--fg);
  word-break: break-all;
  line-height: 1.35;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* Free tier — plain muted line, no chip. The big upgrade button is the
   real CTA in this state, so the chip would compete for attention. */
.account-plan {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

/* Subscribed — promote to a colored pill with status dot. */
.account-plan[data-tier] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  padding: 4px 10px 4px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 9px;
  letter-spacing: 0.16em;
  font-weight: 700;
}
.account-plan[data-tier]::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  opacity: 0.9;
}
.account-plan[data-tier="starter"] {
  color: var(--accent);
  background: rgba(124, 224, 255, 0.10);
  border-color: rgba(124, 224, 255, 0.24);
}
.account-plan[data-tier="pro"] {
  color: var(--accent);
  background: rgba(124, 224, 255, 0.14);
  border-color: rgba(124, 224, 255, 0.32);
}
.account-plan[data-tier="reseller"] {
  color: var(--accent-amber);
  background: rgba(255, 179, 71, 0.12);
  border-color: rgba(255, 179, 71, 0.32);
}

/* Primary upgrade CTA — only shown when there's an action to take.
   In free state this is the prominent path to purchase. */
.account-action {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.12s ease, filter 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.account-action:hover { background: var(--accent-bright); }
.account-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 224, 255, 0.32);
}

/* Manage subscription — secondary, ghost style. */
.account-action.ghost {
  background: transparent;
  color: var(--fg-soft);
  border: 1px solid var(--border);
  padding: 9px 12px;
  font-size: 10px;
}
.account-action.ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}

/* Sign out — quiet text link at the bottom of the card. Not a button
   that competes with the upgrade CTA. */
.account-signout {
  justify-self: center;
  background: transparent;
  border: 0;
  padding: 4px 8px;
  margin-top: 2px;
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.12s ease;
  box-shadow: none;
}
.account-signout:hover { color: var(--signal-red); }
.account-signout:focus-visible {
  outline: none;
  color: var(--signal-red);
}

/* ── Auth modal ─────────────────────────────────────────────────── */

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(5, 8, 12, 0.78);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.auth-modal.open { opacity: 1; }

.auth-modal[hidden] { display: none; }

.auth-modal-card {
  position: relative;
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 28px 28px 22px;
  display: grid;
  gap: 16px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(124, 224, 255, 0.05);
}

.auth-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: none;
  font-family: inherit;
}

.auth-close:hover { border-color: var(--border); color: var(--fg); background: transparent; }

.auth-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.auth-tab {
  flex: 1 1 0;
  background: transparent;
  color: var(--muted);
  border: 0;
  padding: 8px 10px;
  border-radius: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.12s, color 0.12s;
}

.auth-tab:hover { color: var(--fg-soft); background: transparent; }

.auth-tab.active {
  background: var(--panel);
  color: var(--accent);
  border: 1px solid var(--border-strong);
}

/* Brand mark above the intro — small mono signature so the modal
   reads as a Scout dialogue, not a generic auth form. */
.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: -4px;
  margin-bottom: -2px;
}
/* Real SneakerMarket mark (matches the sidebar logo + favicon) instead of
   a stray glyph — sharp square, mint sneaker silhouette, corner tick. */
.auth-brand-mark {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-strong);
  display: inline-grid;
  place-items: center;
  color: var(--accent);
}
.auth-brand-mark svg { width: 17px; height: 17px; display: block; }
.auth-brand-mark::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 4px;
  background: var(--accent);
}
.auth-brand-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  font-weight: 800;
  color: var(--fg-soft);
}
.auth-brand-mkt { color: var(--accent); }

/* Continue with Google — dark, themed to the modal (a bright white pill
   read bolted-on against the brutalist dark UI). Keeps the multicolor G
   + the exact "Continue with Google" wording so it's still recognizable
   and brand-compliant. Sits above the email tabs with an "or" divider. */
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 42px;
  padding: 0 14px;
  background: var(--bg-elevated);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.08s ease;
}
.google-btn:hover { border-color: var(--accent); background: var(--panel); }
.google-btn:active { transform: translateY(1px); }
.google-g { flex: none; display: block; }

.auth-or {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 14px 0;
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.auth-or span { padding: 0 12px; }

/* Intro pair: hero title + subline. Title is what the modal IS for,
   subline is the why. No pricing mentioned here — that lives in the
   plans picker. */
.auth-intro {
  display: grid;
  gap: 6px;
}
.auth-intro-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
  font-feature-settings: "kern" 1, "ss01" 1;
}
.auth-intro-sub {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  letter-spacing: -0.004em;
  color: var(--muted);
}

.auth-form { display: grid; gap: 12px; }

/* Honeypot — kept in the DOM so bots fill it, kept off-screen so humans
   don't. position:absolute + tiny size + opacity:0 covers the common
   "headless browser still treats display:none as not-real". */
.honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.auth-field { display: grid; gap: 4px; }

.auth-field > span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.auth-field input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: var(--bg-elevated);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.auth-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.auth-error {
  font-size: 12px;
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid rgba(255, 68, 112, 0.25);
  padding: 8px 10px;
  border-radius: 6px;
}

.auth-success {
  font-size: 13px;
  color: var(--accent);
  background: rgba(124, 224, 255, 0.08);
  border: 1px solid rgba(124, 224, 255, 0.28);
  padding: 10px 12px;
  border-radius: 6px;
  line-height: 1.5;
}

/* ── Password-reset flow affordances (auth modal) ── */
.auth-notice {
  font-size: 13px;
  color: var(--accent);
  background: rgba(124, 224, 255, 0.08);
  border: 1px solid rgba(124, 224, 255, 0.28);
  padding: 10px 12px;
  border-radius: 6px;
  line-height: 1.5;
}
.auth-notice[hidden] { display: none; }
.auth-devlink { color: var(--accent); font-weight: 600; text-decoration: underline; word-break: break-all; }

.auth-forgot {
  justify-self: start;
  margin: -4px 0 0;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--fg-soft);
  cursor: pointer;
  transition: color 0.15s ease;
}
.auth-forgot:hover { color: var(--accent); text-decoration: underline; }
.auth-forgot[hidden] { display: none; }

.auth-back {
  justify-self: center;
  margin: 2px 0 0;
  padding: 4px 6px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 13px;
  color: var(--fg-soft);
  cursor: pointer;
  transition: color 0.15s ease;
}
.auth-back:hover { color: var(--fg); }
.auth-back[hidden] { display: none; }

.auth-field textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.auth-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* The contact modal carries a textarea so it gets a slightly wider
   card to keep typing comfortable. */
.contact-modal .auth-modal-card { width: min(520px, 100%); }

.auth-submit {
  width: 100%;
  height: 42px;
  font-size: 13px;
  letter-spacing: 0.08em;
}

.auth-fine {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

.auth-fine a { color: var(--accent); text-decoration: none; }
.auth-fine a:hover { text-decoration: underline; }

/* ───────── Canvas ───────── */

.canvas {
  overflow-y: auto;
  background: var(--bg);
  /* No top padding here — the sticky canvas-header owns its own padding
     so the header sits flush at the top of the scroll viewport. Before,
     a -28px top margin pulled the header up to swallow the canvas's
     padding-top, which clipped any content that landed in the gap. */
  padding: 0 28px 44px;
  height: 100%;
  min-height: 0;
}

.canvas-header {
  display: flex;
  /* `center` (not baseline) — baseline picks the column-flex child's
     first-line baseline, which lays out oddly when the status sub-line
     is empty/multi-line. Center is steady regardless of child content. */
  align-items: center;
  gap: 16px;
  /* No negative horizontal margin — header sits within the canvas's
     36px gutter so the title's left edge aligns with every section
     below it (trending grid, drops, results). The earlier negative
     margin was a sticky-bleed trick that no longer applies. */
  margin: 0 0 18px;
  padding: 14px 0 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

@media (max-width: 900px) {
  .canvas-header {
    margin: 0 -16px 16px;
    padding: 14px 16px 12px;
  }
}

.canvas-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.canvas-query {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.02em;
}

.canvas .status {
  font-size: 12px;
  color: var(--muted);
  min-height: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Single clean progress line (replaces the old per-source mono chip grid that
   wrapped into a tall, distracting block on mobile). */
.scan-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--fg-soft);
}
.scan-status .scan-found { color: var(--muted); margin-left: 2px; }
.scan-status.scan-done { color: var(--muted); }
.scan-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  animation: lane-pulse 1.1s ease-in-out infinite;
}

@keyframes lane-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1.1); }
}

#results {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  align-items: start;
}

@media (max-width: 1100px) {
  #results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  #results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
}
@media (max-width: 560px) {
  #results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* Expanded tile takes the full row so the composite details panel
   can breathe at the full canvas width. */
.card.expanded { grid-column: 1 / -1; }

/* ── Image-first search-result tile ─────────────────────────────── */
.card-tile {
  padding: 0;
  display: grid;
  grid-template-rows: auto auto;
  gap: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color 0.18s ease;
}
.card-tile:hover { border-color: var(--accent); }
.card-tile.expanded {
  /* When expanded, the tile face (image + foot) hides — the details
     panel below carries the photo (composite header) and the data
     rail. Avoids a redundant second image and prevents the user from
     having to scroll past the tile photo to reach the data. */
  display: block;
}
.card-tile.expanded > .card-tile-img,
.card-tile.expanded > .card-tile-foot { display: none; }

.card-tile-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  padding: 0;
  border: 0;
  background: var(--bg-sunken);
  cursor: pointer;
  overflow: hidden;
  display: block;
  box-shadow: none;
  /* role="button" div needs explicit reset to match the look the
     previous <button> element had. */
  outline: none;
  appearance: none;
  user-select: none;
  -webkit-user-select: none;
}
.card-tile-img:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.card-tile-img:hover .card-tile-overlay { opacity: 1; }
/* These selectors deliberately ancestor-stack so they outrank the older
   `.card .card-image-placeholder` row-thumb rule (88×88 boxed thumb).
   Otherwise the placeholder + real image sit as a small square in the
   tile's top-left corner instead of filling the whole frame. */
.card.card-tile .card-tile-img > .card-image,
.card.card-tile .card-tile-img > .card-image-placeholder,
.card.card-tile .card-tile-img > .skeleton-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: cover;
}
.card.card-tile .card-tile-img > .card-image-placeholder {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(124, 224, 255, 0.06), transparent 60%),
    var(--bg-sunken);
}
.card.card-tile .card-tile-img > .card-image-placeholder svg {
  width: 44%;
  height: auto;
  opacity: 0.55;
}
.card-tile-img .card-image {
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
}
.card-tile-img:hover .card-image { transform: scale(1.04); }
.card-tile-img .card-image.card-image-loading { opacity: 0; }

.card-tile-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(5, 6, 8, 0.85) 100%);
  opacity: 0;
  transition: opacity 0.16s ease;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 10px;
}
.card-tile-img:focus-visible .card-tile-overlay,
.card-tile.expanded .card-tile-overlay { opacity: 1; }

.card-tile-overlay > .source-tag {
  justify-self: start;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.card-tile-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  pointer-events: auto;
}
.card-tile-actions .watch-toggle,
.card-tile-actions .compare-toggle {
  width: 28px;
  height: 28px;
  background: rgba(5, 6, 8, 0.78);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.card-tile-price-overlay {
  margin-top: auto;
  pointer-events: auto;
}
.card-tile-price-overlay .price-tag {
  background: none;
  border: 0;
  color: var(--accent);
  padding: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-radius: 0;
}

.card-tile-foot {
  padding: 9px 11px 10px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  /* Fixed height keeps the grid rows even; title sits at the top and the
     price is pinned to the bottom (margin-top:auto) so there's no dead
     gap — the always-visible price fills what used to be empty space. */
  height: 66px;
  overflow: hidden;
}
/* The enrichment line spaces itself off the title/meta via the grid
   gap inside the tile foot — its global margin-top would overflow the
   fixed height. */
.card-tile-foot .enrichment { margin-top: 0; }
.card-tile-title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  text-decoration: none;
}
.card-tile-title:hover { color: var(--accent); }
.card-tile-foot .card-meta {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0;
  min-width: 0;
  /* Single row inside the fixed-height foot — extra pills clip at the
     edge instead of wrapping to a second row and bloating the cell. */
  overflow: hidden;
}

/* ───────── Hamburger button (mobile only) ───────── */

.hamburger {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  width: 44px;
  height: 44px;
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: none;
}
.hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--fg);
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.hamburger:hover { border-color: var(--accent); }
.hamburger:hover span { background: var(--accent); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 940;
  background: rgba(5, 8, 12, 0.62);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
.sidebar-backdrop[hidden] { display: none; }

/* ───────── Mobile (≤ 900px): sidebar becomes a slide-in drawer ───────── */

@media (max-width: 900px) {
  /* Mobile: the panes stack, so drop the desktop app-shell lock
     (`height:100vh; overflow:hidden`, which clips everything below the
     fold) and let the DOCUMENT scroll natively — the simplest thing that
     reliably works on touch. Do NOT set overflow-x:hidden on html/body:
     per spec it forces overflow-y to compute to `auto`, turning the root
     into a content-height scroll container with nothing to scroll. */
  html, body { height: auto !important; min-height: 100% !important; overflow: visible !important; }
  body { display: block !important; }
  .app-shell {
    grid-template-columns: 1fr;
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
  }
  .canvas { height: auto !important; overflow: visible !important; }

  /* Slide-in drawer */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(320px, 88vw);
    height: 100dvh;
    z-index: 960;
    transform: translateX(-100%);
    transition: transform 0.24s ease;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    border-right: 1px solid var(--border-strong);
    background: var(--panel);
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 6px 0 22px rgba(0, 0, 0, 0.5);
  }
  .sidebar.open { transform: translateX(0); }

  /* Hamburger is the only way in or out — show it on mobile */
  .hamburger { display: inline-flex; }

  /* Sticky frosted top bar so search results stay tappable from the
     top edge. Hamburger sits next to the title to live in thumb reach. */
  .canvas { padding: 0 var(--gutter) var(--gutter); }
  .canvas-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: calc(-1 * var(--gutter)) calc(-1 * var(--gutter)) var(--space-5);
    padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-top));
    position: sticky;
    top: 0;
    background: rgba(11, 16, 20, 0.92);
    backdrop-filter: blur(14px);
    z-index: 100;
    border-bottom: 1px solid var(--border);
  }
  .canvas-query {
    font-size: 15px;
  }
  .sidebar-footer { padding-top: 12px; }
}

/* Desktop and up: hamburger and backdrop must not interfere. */
@media (min-width: 901px) {
  .hamburger, .sidebar-backdrop { display: none !important; }
}

input[type="text"], input[type="number"], input[type="email"], input[type="password"] {
  width: 100%;
  background: var(--bg-elevated);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 12px;
  /* 16px prevents iOS Safari from auto-zooming when focusing the input. */
  font-size: 16px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.12s, box-shadow 0.12s;
}

@media (min-width: 720px) {
  input[type="text"], input[type="number"], input[type="email"], input[type="password"] {
    font-size: 14px;
  }
}

input[type="text"]::placeholder,
input[type="number"]::placeholder {
  color: var(--muted);
}

input[type="text"]:focus,
input[type="number"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--panel);
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

button {
  background: var(--accent);
  color: var(--accent-ink);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 0;
  border-radius: 0;
  padding: 12px 18px;
  cursor: pointer;
  transition: background-color 0.12s, transform 0.06s, box-shadow 0.12s;
  box-shadow: none;
}

button:hover {
  background: var(--accent-bright);
  box-shadow: inset 0 0 0 2px var(--bg-sunken);
}
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.scout {
  margin: 0 0 22px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
}

.scout.hidden { display: none; }

/* Subtle verdict cue on the scout panel border. Mint for BUY, amber
   for HOLD, red for WAIT — picked up via data-verdict set after the
   Brief text settles. Border colour + ambient halo only, no decoration. */
.scout {
  transition: border-color 0.28s ease, box-shadow 0.28s ease;
}
.scout[data-verdict="buy"]  { border-color: rgba(124, 224, 255, 0.42); box-shadow: 0 0 0 1px rgba(124, 224, 255, 0.10), 0 0 28px rgba(124, 224, 255, 0.06); }
.scout[data-verdict="hold"] { border-color: rgba(255, 179, 71, 0.42);  box-shadow: 0 0 0 1px rgba(255, 179, 71, 0.10),  0 0 28px rgba(255, 179, 71, 0.06); }
.scout[data-verdict="wait"] { border-color: rgba(255, 68, 112, 0.40);  box-shadow: 0 0 0 1px rgba(255, 68, 112, 0.10),  0 0 28px rgba(255, 68, 112, 0.06); }

/* Brief error state — designed retry block replaces the previous flat
   "Market read unavailable" red text. */
.scout[data-state="error"] {
  border-color: rgba(255, 179, 71, 0.32);
}
.scout-error {
  display: grid;
  gap: 6px;
  padding: 4px 0;
}
.scout-error-title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--fg);
}
.scout-error-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.scout-error-retry {
  justify-self: start;
  margin-top: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 6px;
  background: rgba(124, 224, 255, 0.10);
  color: var(--accent);
  border: 1px solid rgba(124, 224, 255, 0.4);
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.scout-error-retry:hover {
  background: rgba(124, 224, 255, 0.18);
  border-color: rgba(124, 224, 255, 0.7);
}


.scout-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.badge {
  background: var(--accent-soft);
  color: var(--accent);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(124, 224, 255, 0.2);
}

.model {
  color: var(--muted);
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}

.scout pre {
  margin: 0;
  font-family: inherit;
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: 15px;
  color: var(--fg);
}

.status {
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
  min-height: 18px;
}

.status .err {
  color: var(--danger);
}

/* Results chip row — sort/filter toolbar above the cards. Quiet by
   default, accent on hover, mint-filled when active. */
.results-chips {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  /* Frosted so result cards scroll cleanly under the pinned toolbar. */
  background: rgba(7, 9, 12, 0.86);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
}
.results-chips::-webkit-scrollbar { display: none; }
.results-chips > * { flex-shrink: 0; }
.results-chips[hidden] { display: none !important; }

/* Live count leads the bar. */
.results-count {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.results-count:empty { display: none; }

.results-chips-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Hairline divider between the sort + source groups. */
.results-chips-group[data-group="source"] {
  padding-left: 20px;
  border-left: 1px solid var(--border);
}
/* "Under retail" is its own section — push it to the far end so the
   filter toggle reads as distinct from the source filters. */
.chip-deals {
  margin-left: auto;
  padding-left: 12px;
}

.results-chips-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
  margin-right: 2px;
}

/* "Under retail" deal toggle — pushed to the right edge of the bar. */
.chip-deals { margin-left: auto; }
.chip-deals.chip-on {
  background: rgba(124, 224, 255, 0.14);
  border-color: var(--accent);
  color: var(--accent);
}
@media (max-width: 760px) {
  .chip-deals { margin-left: 0; }
  .results-chips-group[data-group="source"] { padding-left: 0; border-left: 0; }
}

.chip {
  background: transparent;
  color: var(--fg-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.chip:hover { color: var(--accent); border-color: var(--accent); background: transparent; }
.chip.chip-on {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}
/* Per-source chips when not active — pick up the brand colour on hover */
.chip-stockx:hover { color: var(--accent); border-color: var(--accent); }
.chip-goat:hover   { color: var(--accent-amber); border-color: var(--accent-amber); }
.chip-nike:hover   { color: var(--danger); border-color: var(--danger); }
.chip-goat.chip-on { background: var(--accent-amber); border-color: var(--accent-amber); }
.chip-nike.chip-on { background: var(--danger); border-color: var(--danger); }
.chip-ebay:hover          { color: var(--ebay);          border-color: var(--ebay); }
.chip-tcgplayer:hover     { color: var(--tcgplayer);     border-color: var(--tcgplayer); }
.chip-pricecharting:hover { color: var(--pricecharting); border-color: var(--pricecharting); }
.chip-ebay.chip-on          { background: var(--ebay);          border-color: var(--ebay);          color: #06080F; }
.chip-tcgplayer.chip-on     { background: var(--tcgplayer);     border-color: var(--tcgplayer);     color: #06080F; }
.chip-pricecharting.chip-on { background: var(--pricecharting); border-color: var(--pricecharting); color: #06080F; }

/* "+ship" tag inside the price chip — flags that the headline number is
   the landed (all-in) price, not the bare item price. */
.price-ship {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.03em;
  opacity: 0.68;
  margin-left: 2px;
  vertical-align: 1px;
}

#results {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}


/* ── Toast stack — general-purpose confirmations (top-right) ────── */

.toast-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 250;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 360px;
}
.toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px 10px 11px 12px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(124, 224, 255, 0.04);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}
.toast.open { opacity: 1; transform: none; }
.toast-glyph {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.toast-success { border-color: rgba(124, 224, 255, 0.42); }
.toast-success .toast-glyph {
  background: rgba(124, 224, 255, 0.14);
  color: var(--accent);
  border: 1px solid rgba(124, 224, 255, 0.4);
}
.toast-success .toast-glyph::before { content: "✓"; }

.toast-info .toast-glyph {
  background: rgba(255, 255, 255, 0.05);
  color: var(--fg-soft);
  border: 1px solid var(--border-strong);
}
.toast-info .toast-glyph::before { content: "i"; font-family: "JetBrains Mono", ui-monospace, monospace; }

.toast-warn { border-color: rgba(255, 179, 71, 0.42); }
.toast-warn .toast-glyph {
  background: rgba(255, 179, 71, 0.14);
  color: var(--highlight);
  border: 1px solid rgba(255, 179, 71, 0.4);
}
.toast-warn .toast-glyph::before { content: "!"; }

.toast-body { min-width: 0; }
.toast-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.006em;
  color: var(--fg);
  line-height: 1.3;
}
.toast-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 2px;
}
.toast-dismiss {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: color 0.14s ease, background 0.14s ease;
}
.toast-dismiss:hover {
  color: var(--fg);
  background: rgba(255, 255, 255, 0.04);
}
@media (max-width: 540px) {
  .toast-stack {
    top: 8px;
    right: 8px;
    left: 8px;
    max-width: none;
  }
}

/* ── Rate-limit upsell toast — bottom-right, slides up + fades in ── */

.rate-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 200;
  max-width: 380px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.rate-toast.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.rate-toast[hidden] { display: none !important; }
.rate-toast-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(255, 179, 71, 0.10), rgba(255, 179, 71, 0.04)),
    var(--panel);
  border: 1px solid rgba(255, 179, 71, 0.42);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(255, 179, 71, 0.06),
    0 12px 32px rgba(0, 0, 0, 0.45),
    0 0 32px rgba(255, 179, 71, 0.08);
}
.rate-toast-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--highlight);
  background: rgba(255, 179, 71, 0.12);
  border: 1px solid rgba(255, 179, 71, 0.32);
}
.rate-toast-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.rate-toast-title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.008em;
  color: var(--fg);
}
.rate-toast-sub {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}
.rate-toast-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rate-toast-cta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 6px;
  background: var(--highlight);
  color: #1A1207;
  border: 1px solid var(--highlight);
  cursor: pointer;
  transition: filter 0.14s ease, transform 0.14s ease;
}
.rate-toast-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.rate-toast-cta:active { transform: none; }
.rate-toast-cta[hidden] { display: none !important; }
.rate-toast-dismiss {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: color 0.14s ease, background 0.14s ease;
}
.rate-toast-dismiss:hover {
  color: var(--fg);
  background: rgba(255, 255, 255, 0.04);
}
@media (max-width: 540px) {
  .rate-toast {
    right: 10px;
    left: 10px;
    bottom: 10px;
    max-width: none;
  }
}

/* ── Landing hero — first-impression block for anon visitors ─────── */

.landing-hero {
  margin: 0 0 22px;
  padding: 22px 24px 24px;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  background: var(--bg-sunken);
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 6px;
  animation: landing-hero-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.landing-hero[hidden] { display: none !important; }
@keyframes landing-hero-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.landing-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin: 0 0 8px;
}
.landing-hero-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(124, 224, 255, 0.5);
  animation: landing-hero-pulse 1.8s ease-out infinite;
}
@keyframes landing-hero-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(124, 224, 255, 0.6); }
  70%  { box-shadow: 0 0 0 9px rgba(124, 224, 255, 0); }
  100% { box-shadow: 0 0 0 0   rgba(124, 224, 255, 0); }
}

.landing-hero-title {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .landing-hero { padding: 18px 18px 20px; }
  .landing-hero-title { font-size: 22px; }
}

/* ── No-results empty state — zero-hit search lands here ─────────── */

.no-results {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 10px;
  padding: 38px 24px 32px;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 179, 71, 0.04), transparent 60%),
    var(--panel);
  animation: landing-hero-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.no-results-glyph {
  width: 56px;
  height: 36px;
  color: var(--highlight);
  opacity: 0.85;
}
.no-results-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--fg);
}
.no-results-title em {
  font-style: normal;
  color: var(--highlight);
  font-weight: 700;
}
.no-results-sub {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 480px;
  margin: 0 0 4px;
}
.no-results-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 6px;
}
.no-results-chip {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 7px 12px;
  border-radius: 6px;
  background: rgba(124, 224, 255, 0.06);
  color: var(--accent);
  border: 1px solid rgba(124, 224, 255, 0.25);
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.no-results-chip:hover {
  background: rgba(124, 224, 255, 0.12);
  border-color: rgba(124, 224, 255, 0.5);
  transform: translateY(-1px);
}

/* ── Daily picks (agent-curated landing hero) ────────────────────── */

.daily {
  margin: 0 0 28px;
  display: grid;
  gap: 14px;
}
.daily.hidden { display: none; }

.daily-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.daily-badge {
  background: linear-gradient(180deg, rgba(124, 224, 255, 0.18), rgba(124, 224, 255, 0.08));
  color: var(--accent);
  border-color: rgba(124, 224, 255, 0.45);
}
.daily-sub {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.003em;
}

/* Magazine mosaic — 4-col grid with a 2×2 hero leading. Every other
   tile is identical so rows render the same height. The "wide" 2×1
   variant was removed because its 2:1 aspect across two columns
   forced its row taller than regular rows (which use 16:10 across
   one column) — visually uneven. Single hero crown + uniform
   regulars keeps the editorial rhythm without breaking parity. */
.daily-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

/* Lead pick — distinguished by an accent border + larger № marker, NOT
   by a 2×2 span. The span repeatedly collapsed the image wrap; a uniform
   grid with aspect-ratio tiles renders reliably every time. */
.daily-card-hero {
  border-left: 2px solid var(--accent);
}

@media (max-width: 1100px) {
  .daily-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* 2-col on mobile needs real breathing room — the dense mosaic gap that reads
     fine on a 4-col desktop looks cramped/cheap between two large tiles. */
  .daily-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
}
/* Very narrow phones: one clean column beats two squeezed tiles. */
@media (max-width: 460px) {
  .daily-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* Image-first daily card. Hero image dominates the tile (16:10), small
   name+colorway footer band. Category + retail are overlaid as corner
   chips so they don't steal vertical space from the photo. */
.daily-card {
  text-align: left;
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  /* Flex column instead of grid auto-rows — when the parent grid cell
     is taller than image+foot (e.g. a wide tile sharing a row with
     taller regular tiles), `margin-top: auto` on the foot pins it to
     the bottom of the cell instead of letting it float mid-tile. */
  display: flex;
  flex-direction: column;
  /* Explicit stretch — .daily-card is a <button>, and some browsers don't
     stretch a button's flex children by default, which left the image
     wrap + caption foot sized to content instead of the full card width. */
  align-items: stretch;
  gap: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
  /* Subtle base elevation so each tile reads as its own object against
     the dark page rather than a flat outlined box. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease;
}
.daily-card:hover {
  border-color: rgba(124, 224, 255, 0.45);
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(124, 224, 255, 0.18),
    0 18px 40px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(124, 224, 255, 0.07);
}

.daily-card-img-wrap {
  position: relative;
  width: 100%;
  /* aspect-ratio gives the wrap a definite height from its width — the
     reliable way to size an image box. 16:10 keeps cards short/dense. */
  aspect-ratio: 16 / 10;
  /* Soft "stage" so white-cutout product shots float instead of sitting
     on flat grey. */
  background:
    radial-gradient(120% 88% at 50% 32%, #161d25 0%, #0b1016 52%, #06080b 100%);
  overflow: hidden;
}
.daily-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}
.daily-card:hover .daily-card-img { transform: scale(1.04); }

/* No-image fallback (or img failed to load) — full-bleed stage with a
   centered silhouette so the tile still reads as a product slot rather
   than an empty box. (Picks that can't resolve an image are dropped
   server-side, so this is mostly the failed-load safety net.) */
.daily-card-img-wrap:not(:has(.daily-card-img))::after,
.daily-card-img-failed::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 36' fill='none' stroke='%236CF5C8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'><path d='M4 30 L4 22 Q4 18 10 18 L18 18 Q26 18 33 22 L48 22 Q54 22 54 27 L54 31 L4 31 Z'/><path d='M11 18 L11 12 M16 18 L16 9 M22 19 L22 13'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 46% auto;
}

/* Crisp solid tag — a single dark chip with a colored label + hairline
   per category. Reads cleanly over both white product cutouts and dark
   lifestyle shots (the old translucent blur went muddy on white). */
.daily-cat {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(8, 10, 14, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid transparent;
  z-index: 2;
}
.daily-cat-drop    { color: var(--accent); }
.daily-cat-restock { color: var(--accent); }
.daily-cat-mover   { color: var(--accent-amber); }
.daily-cat-hyped   { color: var(--danger); }
.daily-cat-sleeper { color: var(--fg-soft); }

/* Editorial "№01" index — refined typography lifts the magazine
   feel above a flat numeral. Sits top-right where it doesn't collide
   with the category chip top-left or the retail chip bottom-right. */
.daily-card-num {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(11, 16, 20, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px 7px;
  z-index: 2;
  font-variant-numeric: tabular-nums;
}
.daily-card-hero .daily-card-num {
  top: 10px;
  right: 10px;
  font-size: 13px;
  padding: 6px 10px;
  color: var(--accent);
  background: rgba(11, 16, 20, 0.7);
  border: 1px solid rgba(124, 224, 255, 0.4);
}

/* Hero-only reason copy — the agent's "why this pick" one-liner.
   Sits below the silhouette + colorway, tinted as a subtitle so it
   doesn't compete with the name. Hidden on the smaller tiles to
   keep them scannable at a glance. */
.daily-hero-reason {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.003em;
}

.daily-card-foot {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 11px 9px;
  display: grid;
  gap: 3px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}

.daily-name {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.16s ease;
}
.daily-card:hover .daily-name { color: var(--accent); }

/* Caption meta line — colorway left, retail price right. Price is the
   accent so the eye catches value without the photo being cluttered. */
.daily-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.daily-price {
  flex: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.daily-colorway {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11.5px;
  font-weight: 450;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  line-height: 1.3;
  display: block;
  overflow: hidden;
}

/* old uniform-grid breakpoints retired — see mosaic block above */

/* Scroll-in tile entrance — IntersectionObserver in app.js flips
   .is-visible on each tile as it crosses the viewport. The .mosaic-
   enter class is attached at the same time so we never animate
   tiles that never get observed (no JS). Disabled automatically by
   the JS path for users with prefers-reduced-motion. */
.mosaic-enter {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.mosaic-enter.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .mosaic-enter,
  .mosaic-enter.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Drop calendar (upcoming releases) ───────────────────────────── */

.drops {
  margin: 0 0 22px;
  display: grid;
  gap: 12px;
}
.drops.hidden { display: none; }

.drops-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.drops-badge {
  background: rgba(255, 179, 71, 0.10);
  color: var(--accent-amber);
  border-color: rgba(255, 179, 71, 0.28);
}
.drops-sub {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.003em;
}

/* "Never miss" countdown banner — sits between the section header
   and the drops grid. Big mono timer + the next release name + a
   single-tap "subscribe — all drops" .ics export. Anchors the
   "never miss" promise visually at the top of the calendar feed. */
.drops-countdown {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  margin-bottom: 12px;
  background:
    radial-gradient(ellipse 60% 80% at 0% 50%, rgba(124, 224, 255, 0.08), transparent 70%),
    var(--bg-sunken);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
}
.drops-countdown[hidden] { display: none !important; }
.dc-lede {
  display: grid;
  gap: 4px;
}
.dc-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.dc-timer {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  /* Slight glow so the timer pops as the focal point */
  text-shadow: 0 0 18px rgba(124, 224, 255, 0.18);
}
.dc-timer-live {
  color: var(--accent);
  animation: dc-timer-live-pulse 1.4s ease-in-out infinite;
}
@keyframes dc-timer-live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}
.dc-body {
  display: grid;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}
.dc-name {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dc-sub {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dc-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.14s ease, transform 0.14s ease;
}
.dc-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
@media (max-width: 720px) {
  .drops-countdown {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
  }
  .dc-timer { font-size: 20px; }
  .dc-cta { justify-self: start; }
}

/* "+ CAL" button on each drop tile — hands the user a single-event
   .ics with a 1-hour-before alarm. The OS calendar carries the
   reminder so they never miss the release even if our tab is closed. */
.drop-card-cal {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  background: rgba(5, 6, 8, 0.78);
  color: var(--fg-soft);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.drop-card-cal:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.drop-card-cal svg { flex-shrink: 0; }
/* Hero gets a slightly bigger CAL chip and sits in the top-right stack,
   just under the countdown — grouping "when it drops" with "remind me" —
   so the bottom band is free for the product info. */
.drop-card-hero .drop-card-cal {
  top: 48px;
  right: 12px;
  bottom: auto;
  left: auto;
  padding: 6px 10px;
  font-size: 10px;
}

.drops-grid {
  display: grid;
  /* Column count tracks the number of non-hero tiles (--rest-cols, set in
     renderDrops) so the row beneath the hero fills exactly — the old fixed
     4-col grid left 2 dead columns whenever there were few drops. */
  grid-template-columns: repeat(var(--rest-cols, 4), minmax(0, 1fr));
  grid-auto-rows: minmax(168px, auto);
  gap: 12px;
}
/* The next-upcoming drop is a full-width banner across the top — it always
   fills the container (no dead space beside a half-width tile) and reads as
   the lead. Remaining drops tile in the row(s) beneath it. */
.drop-card-hero {
  grid-column: 1 / -1;
  grid-row: auto;
  /* Positioning context for the bottom-overlay foot (see below). */
  position: relative;
}
.drop-card-hero .drop-card-img-wrap {
  /* Banner proportions — wide enough to fill the row, short enough that the
     landscape sneaker shot isn't over-cropped. */
  aspect-ratio: 21 / 9;
  flex: none;
  min-height: 0;
}
.drop-card-hero .drop-card-date {
  width: 56px;
  height: 56px;
  border-width: 2px;
}
.drop-card-hero .drop-date-mo { font-size: 11px; }
.drop-card-hero .drop-date-day { font-size: 22px; }
.drop-card-hero .drop-name { font-size: 14px; }
.drop-card-hero .drop-colorway { font-size: 11.5px; }

/* "NEXT UP" eyebrow stamped over the hero image — mint mono so it
   reads as a magazine pull-quote, not a generic chip. Hidden on
   smaller drop tiles where the date + countdown already carry it. */
.drop-card-eyebrow {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  display: inline-block;
  padding: 5px 9px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--accent-ink);
  background: var(--accent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* On the lead tile the countdown IS the headline — when it drops — so it
   gets real presence instead of the 9.5px corner chip the small tiles
   use. It mirrors the date stamp in the opposite corner: a dark frosted
   chip (legible over any photo, light or dark) with the urgency color
   carried on the mono label, the leading status tick, and a hairline
   border. The tick blinks inside 48h; the live state keeps its ring
   pulse. Two matched corner chips frame the hero like a poster. */
.drop-card-hero .drop-card-img-wrap .drop-countdown {
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px 5px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  background: rgba(11, 16, 20, 0.82);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.drop-card-hero .drop-card-img-wrap .drop-countdown::before {
  content: "";
  width: 5px;
  height: 5px;
  background: currentColor;
  flex: none;
}
/* Re-tint each state for the dark chip: state color on text + tick,
   matching hairline border. (live's text is dark-ink on the small
   chip's solid-mint bg — on the dark hero chip it must be mint.) */
.drop-card-hero .drop-card-img-wrap .drop-countdown-live {
  color: var(--accent);
  background: rgba(11, 16, 20, 0.82);
  border-color: rgba(124, 224, 255, 0.5);
}
.drop-card-hero .drop-card-img-wrap .drop-countdown-imminent {
  color: var(--danger);
  border-color: rgba(255, 68, 112, 0.5);
}
.drop-card-hero .drop-card-img-wrap .drop-countdown-soon {
  color: var(--highlight);
  border-color: rgba(255, 179, 71, 0.5);
}
.drop-card-hero .drop-card-img-wrap .drop-countdown-future {
  color: var(--muted);
  border-color: rgba(255, 255, 255, 0.18);
}
.drop-card-hero .drop-card-img-wrap .drop-countdown-imminent::before {
  animation: drop-tick-blink 1.3s ease-in-out infinite;
}
@keyframes drop-tick-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* Hero foot rides ON the full-bleed image as a bottom-right overlay
   (poster style) instead of a strip below it — so the photo fills the
   whole tile and the product info sits cleanly over a gradient scrim,
   right-aligned to balance the NEXT UP eyebrow on the left. Small tiles
   keep their foot strip below the image. */
.drop-card-hero .drop-card-foot {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  margin: 0;
  border: 0;
  background: linear-gradient(to top, rgba(5, 6, 8, 0.94), rgba(5, 6, 8, 0.66) 52%, rgba(5, 6, 8, 0));
  padding: 42px 14px 13px;
  gap: 3px;
  justify-items: end;
  text-align: right;
}
.drop-card-hero .drop-name { font-size: 15px; }
.drop-card-hero .drop-colorway { font-size: 12px; }
.drop-card-hero .drop-meta { justify-content: flex-end; font-size: 10.5px; }

@media (max-width: 720px) {
  .drops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .drop-card-hero { grid-column: auto; grid-row: auto; }
  .drop-card-hero .drop-card-img-wrap { aspect-ratio: 16 / 10; flex: none; height: auto; }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .drops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drop-card-hero { grid-column: span 2; grid-row: span 2; }
}

/* Image-first drop card. Hero sneaker fills the top, date badge + drop
   countdown overlay the image, name + source + retail sit in the foot. */
.drop-card {
  text-align: left;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  /* Flex column + margin-top:auto on foot — same fix as .daily-card.
     Stops the foot from floating mid-cell when a hero on the same
     row makes the grid row taller than this tile's intrinsic height. */
  display: flex;
  flex-direction: column;
  gap: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
  box-shadow: none;
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.14s cubic-bezier(0.4,0,0.2,1), box-shadow 0.18s ease;
}
.drop-card:hover {
  border-color: rgba(255, 179, 71, 0.36);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32), 0 0 22px rgba(255, 179, 71, 0.05);
}

.drop-card-img-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--bg-sunken);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.drop-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}
.drop-card:hover .drop-card-img { transform: scale(1.04); }

.drop-card-img-wrap:not(:has(.drop-card-img))::after,
.drop-card-img-failed::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 36' fill='none' stroke='%23FFB347' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.45'><path d='M4 30 L4 22 Q4 18 10 18 L18 18 Q26 18 33 22 L48 22 Q54 22 54 27 L54 31 L4 31 Z'/><path d='M11 18 L11 12 M16 18 L16 9 M22 19 L22 13'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40% auto;
}

.drop-card-date {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: rgba(11, 16, 20, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 179, 71, 0.45);
  display: grid;
  place-items: center;
  text-align: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  line-height: 1;
  padding: 4px 0;
  z-index: 2;
}
.drop-date-mo {
  font-size: 9px;
  letter-spacing: 0.18em;
  font-weight: 800;
  color: var(--accent-amber);
}
.drop-date-day {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.drop-card-img-wrap .drop-countdown {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 4px 8px;
  font-size: 9.5px;
}

.drop-card-foot {
  padding: 10px 12px 12px;
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  min-width: 0;
  margin-top: auto;
}

.drop-name {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.drop-colorway {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.drop-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px;
}

.drop-src {
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.25);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.drop-src-snkrs   { color: var(--danger); }
.drop-src-stockx  { color: var(--stockx, var(--accent)); }
.drop-src-goat    { color: var(--goat,   var(--accent-amber)); }
.drop-src-adidas  { color: var(--accent); }

.drop-retail {
  color: var(--fg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: -0.005em;
}

/* Countdown pill — flips through four color states as a drop approaches.
   "Live now" pulses softly to draw the eye away from older entries. */
.drop-countdown {
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  white-space: nowrap;
}
.drop-countdown-live {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  animation: drop-live-pulse 1.8s ease-out infinite;
}
@keyframes drop-live-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(124, 224, 255, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(124, 224, 255, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(124, 224, 255, 0);    }
}
.drop-countdown-imminent {
  color: var(--danger);
  background: rgba(255, 68, 112, 0.10);
  border-color: rgba(255, 68, 112, 0.32);
}
.drop-countdown-soon {
  color: var(--highlight);
  background: rgba(255, 179, 71, 0.10);
  border-color: rgba(255, 179, 71, 0.32);
}
.drop-countdown-future {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
  border-color: var(--border);
}

@media (max-width: 1100px) { .drops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .drops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

/* ── Trending feed (landing/empty state) ─────────────────────────── */

.trending {
  margin: 0 0 24px;
  display: grid;
  gap: 14px;
}
.trending.hidden { display: none; }

.trending-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.trending-sub {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.003em;
}

.trending-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1100px) { .trending-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .trending-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

/* Image-first trending card. Hero takes a 16:10 slot, source chip +
   delta overlay the image, title + price tucked into a thin foot. */
.trending-card {
  text-align: left;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  display: grid;
  grid-template-rows: auto auto;
  gap: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
  box-shadow: none;
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.14s cubic-bezier(0.4,0,0.2,1), box-shadow 0.18s ease;
}
.trending-card:hover {
  border-color: rgba(124, 224, 255, 0.32);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32), 0 0 22px rgba(124, 224, 255, 0.05);
}
.trending-card:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 224, 255, 0.18);
}
.trending-card[data-source="stockx"] { border-top: 2px solid rgba(124, 224, 255, 0.5); }
.trending-card[data-source="goat"]   { border-top: 2px solid rgba(255, 179, 71, 0.5); }
.trending-card[data-source="nike"]   { border-top: 2px solid rgba(255, 68, 112, 0.5); }

.trending-card-img-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bg-sunken);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.trending-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}
.trending-card:hover .trending-card-img { transform: scale(1.04); }

.trending-card-img-wrap:not(:has(.trending-card-img))::after,
.trending-card-img-failed::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 36' fill='none' stroke='%236CF5C8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'><path d='M4 30 L4 22 Q4 18 10 18 L18 18 Q26 18 33 22 L48 22 Q54 22 54 27 L54 31 L4 31 Z'/><path d='M11 18 L11 12 M16 18 L16 9 M22 19 L22 13'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40% auto;
}

.trending-card-img-wrap .source-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.trending-delta-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}
.trending-delta-overlay .trending-delta {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.trending-card-foot {
  padding: 11px 14px 12px;
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  min-width: 0;
}

.trending-title {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trending-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trending-price {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.trending-delta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid transparent;
  display: inline-block;
}
.trending-delta-up   { color: var(--danger); background: rgba(255, 68, 112, 0.22);  border-color: rgba(255, 68, 112, 0.45); }
.trending-delta-down { color: var(--accent); background: rgba(124, 224, 255, 0.22); border-color: rgba(124, 224, 255, 0.45); }

@media (max-width: 720px) {
  .trending-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: block;
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.14s cubic-bezier(0.4, 0.0, 0.2, 1),
    background 0.18s ease;
}

/* Source identity reads on the image edge (outlined ring) and the
   source-tag pill — no decorative left bar needed on the card itself. */

.card-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.card.has-image .card-row {
  grid-template-columns: 88px minmax(0, 1fr) auto;
}

.card .card-image,
.card .skeleton-thumb,
.card .card-image-placeholder {
  width: 88px;
  height: 88px;
  border-radius: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

.card .card-image {
  object-fit: cover;
  background:
    linear-gradient(135deg, rgba(124, 224, 255, 0.04), rgba(255, 179, 71, 0.03)) var(--bg-elevated);
  /* Real image fades in over the placeholder once it actually loads,
     so the cell never flashes empty during the swap. */
  transition: opacity 0.28s ease;
}
.card .card-image.card-image-loading { opacity: 0; }

/* While the real image hasn't loaded yet the placeholder sits in the
   same grid cell. Stacking them via grid-column overlap keeps layout
   stable instead of forcing the image to push the placeholder out. */
.card.has-image .card-row > .card-image,
.card.has-image .card-row > .card-image-placeholder {
  grid-column: 1;
  grid-row: 1;
}

/* Brand-source identity ring on the image. Subtle 1px inner outline
   in the source colour so even a thumbnail signals where the listing
   came from before the title is read. */
.card[data-source="stockx"] .card-image,
.card[data-source="stockx"] .card-image-placeholder {
  outline: 1px solid rgba(124, 224, 255, 0.42);
  outline-offset: -1px;
}
.card[data-source="goat"] .card-image,
.card[data-source="goat"] .card-image-placeholder {
  outline: 1px solid rgba(255, 179, 71, 0.42);
  outline-offset: -1px;
}
.card[data-source="nike"] .card-image,
.card[data-source="nike"] .card-image-placeholder {
  outline: 1px solid rgba(255, 68, 112, 0.42);
  outline-offset: -1px;
}

/* Empty-image stand-in — same footprint as a real image so the row
   grid stays steady. Quiet slate fill with a mint-tinted sneaker
   silhouette so missing data feels intentional, not broken. */
.card .card-image-placeholder {
  display: grid;
  place-items: center;
  color: var(--accent);
  background:
    radial-gradient(circle at 30% 30%, rgba(124, 224, 255, 0.08), transparent 60%),
    var(--bg-elevated);
  opacity: 0.85;
}
.card .card-image-placeholder svg {
  width: 56px;
  height: 28px;
  opacity: 0.7;
}
.card:hover .card-image-placeholder svg { opacity: 1; transition: opacity 0.16s ease; }

.skeleton-thumb {
  background: linear-gradient(90deg, var(--bg-elevated) 0%, var(--panel-2) 50%, var(--bg-elevated) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

.skeleton-price-loading {
  width: 80px;
  height: 26px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--bg-elevated) 0%, var(--panel-2) 50%, var(--bg-elevated) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

/* Generic shimmer-line primitives for skeleton cards. Three widths so a
   single skeleton card can fake a title + description + meta row. */
.skeleton-line {
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--bg-elevated) 0%, var(--panel-2) 50%, var(--bg-elevated) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  margin-bottom: 7px;
}
.skeleton-line-sm { width: 56px; height: 8px; margin-bottom: 9px; }
.skeleton-line-md { width: 62%;  height: 10px; }
.skeleton-line-lg { width: 88%;  height: 12px; }

/* Full-card skeleton — same .card footprint as a real result so the
   grid doesn't reflow when real cards land. Hover-effect disabled to
   avoid the impression that the placeholder is interactive. */
.card-skeleton {
  pointer-events: none;
  opacity: 0.92;
}
.card-skeleton:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: none;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.card:hover {
  border-color: var(--accent);
  background: var(--panel);
  transform: none;
  box-shadow: inset 0 0 0 1px var(--accent);
}

.card .title {
  text-decoration: none;
  letter-spacing: -0.012em;
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  font-weight: 500;
  font-size: 15px;
}
.card .title:hover {
  color: var(--accent);
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  font-feature-settings: "tnum" 1;
}

/* Unified chip system. Every pill (source / stock / delta) shares the
   same height, family, and rhythm — only colour and content differ.
   This is what makes the card-meta strip read as one row instead of
   three competing labels. */
.stock-pill,
.delta-pill {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

.stock-pill.stock-ok  { background: rgba(124, 224, 255, 0.10); color: var(--accent);    border-color: rgba(124, 224, 255, 0.28); }
.stock-pill.stock-low { background: rgba(255, 179, 71, 0.10);  color: var(--highlight); border-color: rgba(255, 179, 71, 0.28); }
.stock-pill.stock-out { background: rgba(255, 68, 112, 0.10);  color: var(--danger);    border-color: rgba(255, 68, 112, 0.28); }

.delta-pill.delta-up   { background: rgba(255, 68, 112, 0.10);  color: var(--danger);  border-color: rgba(255, 68, 112, 0.30); }
.delta-pill.delta-down { background: rgba(124, 224, 255, 0.10); color: var(--accent);  border-color: rgba(124, 224, 255, 0.30); }

/* Cross-marketplace arbitrage chip — visually distinct from the
   stock/delta pills because it represents *action* (one tap to the
   cheaper listing) rather than info. Bigger weight, deeper colour,
   a glyph, and a small drop-shadow give it the "deal alert" feel. */
.arb-pill {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 9px 4px 8px;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(124, 224, 255, 0.18), rgba(124, 224, 255, 0.10));
  color: var(--accent);
  border: 1px solid rgba(124, 224, 255, 0.42);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(124, 224, 255, 0.12);
}
.arb-pill:hover {
  filter: brightness(1.08);
  border-color: rgba(124, 224, 255, 0.7);
  box-shadow: 0 4px 12px rgba(124, 224, 255, 0.22);
}
.arb-pill-goat {
  background: linear-gradient(180deg, rgba(255, 179, 71, 0.20), rgba(255, 179, 71, 0.10));
  color: var(--accent-amber);
  border-color: rgba(255, 179, 71, 0.45);
  box-shadow: 0 2px 8px rgba(255, 179, 71, 0.12);
}
.arb-pill-goat:hover { box-shadow: 0 4px 12px rgba(255, 179, 71, 0.22); border-color: rgba(255, 179, 71, 0.7); }

.arb-pill-nike {
  background: linear-gradient(180deg, rgba(255, 68, 112, 0.16), rgba(255, 68, 112, 0.08));
  color: var(--danger);
  border-color: rgba(255, 68, 112, 0.42);
  box-shadow: 0 2px 8px rgba(255, 68, 112, 0.10);
}
.arb-pill-nike:hover { box-shadow: 0 4px 12px rgba(255, 68, 112, 0.22); border-color: rgba(255, 68, 112, 0.7); }

.arb-glyph {
  font-size: 11px;
  line-height: 1;
}

/* ── Watchlist: card action button + sidebar trigger + modal rows ── */

.card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Compare toggle — shares the watch-toggle visual vocabulary so the
   icon row reads as one set of small icon buttons. Active state goes
   amber (not mint — keeps "saved to watchlist" and "in compare" easy
   to tell apart at a glance). */
.compare-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.compare-toggle:hover {
  color: var(--accent-amber);
  border-color: var(--accent-amber);
  background: transparent;
}
.compare-toggle.compare-on {
  color: var(--accent-amber);
  border-color: var(--accent-amber);
  background: rgba(255, 179, 71, 0.08);
}

.watch-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.watch-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: transparent;
}
.watch-toggle.watch-on {
  color: var(--accent);
  border-color: var(--accent);
}
.watch-toggle.watch-on svg path { fill: currentColor; }

/* Tier meter — small sidebar card showing the user's current daily
   Brief allowance with a contextual upgrade CTA. Anon gets the
   loudest treatment because it's the most-conversion-leverage slot;
   paid tiers get a quieter version. Hidden at top tier. */
.tier-meter {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tier-meter[hidden] { display: none; }
.tier-meter[data-tier="anon"] {
  border-color: rgba(124, 224, 255, 0.28);
  background: linear-gradient(180deg, rgba(124, 224, 255, 0.06), var(--bg-elevated) 80%);
}

.tier-meter-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.tier-meter-label {
  color: var(--muted);
  font-weight: 700;
}
.tier-meter[data-tier="anon"] .tier-meter-label { color: var(--accent); }

.tier-meter-value {
  color: var(--fg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 11px;
}

.tier-meter-bar {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.tier-meter-bar[hidden] { display: none; }
.tier-meter-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(124, 224, 255, 0.4);
  transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1), background 0.16s ease, box-shadow 0.16s ease;
}
.tier-meter-bar[data-state="low"]   .tier-meter-bar-fill { background: var(--highlight); box-shadow: 0 0 6px rgba(255, 179, 71, 0.4); }
.tier-meter-bar[data-state="empty"] .tier-meter-bar-fill { background: var(--danger);    box-shadow: 0 0 6px rgba(255, 68, 112, 0.4); }

.tier-meter-cta {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-soft);
  padding: 7px 10px;
  border-radius: 7px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.tier-meter-cta:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}
.tier-meter[data-tier="anon"] .tier-meter-cta {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.tier-meter[data-tier="anon"] .tier-meter-cta:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  color: var(--accent-ink);
}

.sidebar-watch {
  width: 100%;
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--fg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
  text-align: left;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.sidebar-watch:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-elevated);
}
.sidebar-watch[hidden] { display: none; }

.sidebar-watch-label {
  color: var(--fg);
  font-weight: 700;
  letter-spacing: 0.14em;
}

.sidebar-watch-count {
  background: var(--accent);
  color: var(--accent-ink);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}
.sidebar-watch-count[hidden] { display: none; }

/* Watchlist modal — reuses auth-modal chrome, slightly wider for rows. */
.watchlist-modal .watchlist-card { width: min(640px, 100%); }

.watchlist-grid {
  display: grid;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
}

.watchlist-empty {
  text-align: center;
  color: var(--muted);
  padding: 24px;
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: 10px;
}

/* Designed watchlist empty state — replaces the plain dashed-border
   sentence with a small landing card: glyph, headline, sub, and either
   a sign-in CTA or a three-step micro-walkthrough. */
.watchlist-empty-card {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
  padding: 30px 22px 26px;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0%, rgba(124, 224, 255, 0.05), transparent 60%),
    var(--panel);
}
.watchlist-empty-glyph {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(124, 224, 255, 0.08);
  color: var(--accent);
  border: 1px solid rgba(124, 224, 255, 0.32);
  margin-bottom: 4px;
}
.watchlist-empty-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--fg);
}
.watchlist-empty-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  max-width: 320px;
}
.watchlist-empty-cta {
  margin-top: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 6px;
  background: rgba(124, 224, 255, 0.12);
  color: var(--accent);
  border: 1px solid rgba(124, 224, 255, 0.45);
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.watchlist-empty-cta:hover {
  background: rgba(124, 224, 255, 0.2);
  border-color: rgba(124, 224, 255, 0.7);
  transform: translateY(-1px);
}
.watchlist-empty-steps {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 7px;
  text-align: left;
  counter-reset: step;
  max-width: 340px;
}
.watchlist-empty-steps li {
  position: relative;
  padding: 8px 12px 8px 38px;
  font-size: 12.5px;
  color: var(--fg-soft);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 8px;
  counter-increment: step;
  line-height: 1.4;
}
.watchlist-empty-steps li::before {
  content: counter(step);
  position: absolute;
  left: 8px;
  top: 7px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: rgba(124, 224, 255, 0.10);
  color: var(--accent);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(124, 224, 255, 0.28);
}

.watch-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.watch-row:hover { border-color: var(--border-strong); }
.watch-row[data-source="stockx"] { box-shadow: inset 0 0 0 1px rgba(124, 224, 255, 0.20); }
.watch-row[data-source="goat"]   { box-shadow: inset 0 0 0 1px rgba(255, 179, 71, 0.20); }
.watch-row[data-source="nike"]   { box-shadow: inset 0 0 0 1px rgba(255, 68, 112, 0.20); }

.watch-thumb {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel);
  display: block;
}
.watch-thumb img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  display: block;
}
.watch-thumb-placeholder {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, rgba(124, 224, 255, 0.04), rgba(255, 179, 71, 0.03)) var(--panel);
}

.watch-body { display: grid; gap: 6px; min-width: 0; }

.watch-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.watch-title:hover { color: var(--accent); }

.watch-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}

.watch-current {
  color: var(--fg);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.watch-target {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-transform: lowercase;
  letter-spacing: 0;
  font-weight: 500;
}

.watch-status {
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.watch-status-hit      { color: var(--accent);    background: rgba(124, 224, 255, 0.12); border-color: rgba(124, 224, 255, 0.32); }
.watch-status-above    { color: var(--muted);     background: rgba(139, 149, 168, 0.10); border-color: var(--border); }
.watch-status-watching { color: var(--fg-soft);   background: rgba(139, 149, 168, 0.10); border-color: var(--border); }
.watch-status-stale    { color: var(--accent-amber); background: rgba(255, 179, 71, 0.10); border-color: rgba(255, 179, 71, 0.30); }

.watch-remove {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 8px;
  box-shadow: none;
}
.watch-remove:hover { color: var(--danger); background: transparent; }
.delta-pill::before {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  line-height: 1;
}
.delta-pill.delta-up::before   { content: "▲"; }
.delta-pill.delta-down::before { content: "▼"; }

/* ── Buy banner ───────────────────────────────────────────────────── */

.buy-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  position: relative;
  overflow: hidden;
}

.buy-banner::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--muted);
}

.buy-banner.verdict-strong { background: linear-gradient(95deg, rgba(124, 224, 255, 0.10) 0%, var(--panel) 70%); }
.buy-banner.verdict-strong::before { background: var(--accent); box-shadow: 0 0 12px var(--accent-soft); }
.buy-banner.verdict-buy    { background: linear-gradient(95deg, rgba(124, 224, 255, 0.06) 0%, var(--panel) 70%); }
.buy-banner.verdict-buy::before    { background: var(--accent); }
.buy-banner.verdict-hold   { background: linear-gradient(95deg, rgba(255, 179, 71, 0.08) 0%, var(--panel) 70%); }
.buy-banner.verdict-hold::before   { background: var(--highlight); }
.buy-banner.verdict-wait   { background: linear-gradient(95deg, rgba(255, 68, 112, 0.08) 0%, var(--panel) 70%); }
.buy-banner.verdict-wait::before   { background: var(--danger); }
.buy-banner.verdict-skip   { background: linear-gradient(95deg, rgba(255, 68, 112, 0.14) 0%, var(--panel) 70%); }
.buy-banner.verdict-skip::before   { background: var(--danger); box-shadow: 0 0 12px var(--danger-soft); }

.verdict-mark {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.verdict-strong .verdict-icon,
.verdict-buy    .verdict-icon { color: var(--accent); }
.verdict-hold   .verdict-icon { color: var(--highlight); }
.verdict-wait   .verdict-icon,
.verdict-skip   .verdict-icon { color: var(--danger); }

.verdict-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.verdict-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
}

.verdict-reason {
  font-size: 14px;
  color: var(--fg-soft);
}

.verdict-meta {
  font-size: 11px;
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  margin-top: 2px;
}

/* Snipe action — one-tap link straight to the cheapest live source for
   the SKU. Only shows on STRONG_BUY / BUY verdicts. STRONG_BUY gets
   the full mint-fill button; BUY gets a quieter mint-tinted variant. */
.snipe-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  width: max-content;
  max-width: 100%;
  transition: background 0.14s ease, transform 0.12s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.snipe-strong {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 6px 20px rgba(124, 224, 255, 0.22);
}
.snipe-strong:hover {
  background: var(--accent-bright);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(124, 224, 255, 0.30);
}
.snipe-buy {
  background: rgba(124, 224, 255, 0.14);
  color: var(--accent);
  border: 1px solid rgba(124, 224, 255, 0.40);
}
.snipe-buy:hover {
  background: rgba(124, 224, 255, 0.22);
  border-color: rgba(124, 224, 255, 0.60);
  transform: translateY(-1px);
}
.snipe-price {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: -0.01em;
}
.snipe-arrow {
  font-size: 14px;
  line-height: 1;
}

.verdict-helper {
  font-size: 12px;
  color: var(--muted);
  max-width: 180px;
  text-align: right;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .buy-banner { grid-template-columns: auto 1fr; }
  .verdict-helper { display: none; }
}

/* ── Lightbox ─────────────────────────────────────────────────────── */

.hero-image-wrap.clickable { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(7, 9, 12, 0.96);
  backdrop-filter: blur(8px);
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 12px;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.lightbox.open { opacity: 1; }

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  /* Sits above the stage — the 1fr stage row fills the top of the grid
     and, being later in the DOM with auto z-index, otherwise paints
     over this button and swallows the close click. */
  z-index: 10;
  background: var(--bg-elevated);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 36px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.lightbox-close:hover {
  background: var(--panel);
  border-color: var(--accent);
  color: var(--accent);
}

.lightbox-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
  cursor: grab;
}

.lightbox-stage.dragging { cursor: grabbing; }

/* Frame-cycle spin viewer retired in favour of real AI 3D via
   model-viewer in the detail-card. Lightbox is now plain image zoom. */

.lightbox-img {
  max-width: 90vw;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.12s ease;
  will-change: transform, filter;
  pointer-events: auto;
}

.lightbox-thumbs {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  max-height: 80px;
  overflow-y: auto;
}

.lightbox-thumb {
  width: 56px;
  height: 56px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0;
  overflow: hidden;
  background: var(--bg-elevated);
  cursor: pointer;
  transition: border-color 0.12s, transform 0.08s;
}

.lightbox-thumb:hover { border-color: var(--border-strong); }

.lightbox-thumb.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lightbox-controls {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--fg);
}

.lb-zoom {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lb-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.lb-btn:hover {
  background: var(--panel);
  border-color: var(--accent);
  color: var(--accent);
}

.lb-scale {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--accent);
  min-width: 48px;
  text-align: center;
}

.lb-filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.lb-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--muted);
}

.lb-filters input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.lb-filters output {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--fg-soft);
  align-self: flex-end;
}

@media (max-width: 720px) {
  .lightbox-controls { grid-template-columns: 1fr; }
  .lb-filters { grid-template-columns: 1fr 1fr; }
}

.card .source-tag {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 8px 3px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--fg-soft);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.card .source-tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  opacity: 0.85;
}

.card .source-tag.stockx       { color: var(--stockx);       border-color: rgba(124, 224, 255, 0.32); }
.card .source-tag.goat         { color: var(--goat);         border-color: rgba(255, 179, 71, 0.32); }
.card .source-tag.nike         { color: var(--nike);         border-color: rgba(255, 68, 112, 0.32); }
.card .source-tag.ebay          { color: var(--ebay);          border-color: rgba(76, 141, 255, 0.34); }
.card .source-tag.tcgplayer     { color: var(--tcgplayer);     border-color: rgba(124, 224, 255, 0.34); }
.card .source-tag.pricecharting { color: var(--pricecharting); border-color: rgba(230, 192, 104, 0.34); }

/* Freshness pill — "12m ago" — same monospace pill rhythm as the
   source-tag so the meta row reads as one set, not two competing
   types. Sits to the right of the source chip after enrich completes. */
.card .fresh-pill {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--muted);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  cursor: default;
}

/* "Live data restricted" — when the source's bot wall blocks our scrape.
   Reframed from an error into a premium "verified live at the source"
   state: a faint mint wash + accent edge so the card reads intentional
   and trustworthy, not broken. */
.card.is-protected {
  background:
    linear-gradient(180deg, rgba(124, 224, 255, 0.05), rgba(124, 224, 255, 0) 60%),
    var(--bg-elevated);
  box-shadow: inset 0 0 0 1px rgba(124, 224, 255, 0.18);
}
/* A protected tile has no price to show, so its overlay (shield badge +
   "view live price" CTA) IS the card's value — keep it visible at rest
   instead of hover-gated like a normal tile. */
.card.is-protected .card-tile-overlay { opacity: 1; }

/* Shield badge over the photo — mint, frosted, sits beside the source tag. */
.protection-badge {
  align-self: start;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: rgba(5, 6, 8, 0.66);
  color: var(--accent);
  border: 1px solid rgba(124, 224, 255, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  width: max-content;
}
.protection-badge .shield-icon { flex-shrink: 0; }

/* Locked-price CTA in the price slot — where the price normally sits.
   A clean frosted chip that invites the click out to the live listing
   instead of leaving a dead skeleton. */
.price-locked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  color: var(--accent-ink);
  background: var(--accent);
  border: 1px solid var(--accent);
  text-decoration: none;
  white-space: nowrap;
  width: max-content;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: transform 0.14s ease, box-shadow 0.18s ease, filter 0.14s ease;
}
.price-locked .lock-icon,
.price-locked svg { flex-shrink: 0; }
.price-locked:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(124, 224, 255, 0.22);
}

/* Rate-limited tile — out of live-price pulls for the tier. Same premium
   structure as a protected tile, but amber = "upgrade to unlock". */
.card.is-limited {
  background:
    linear-gradient(180deg, rgba(255, 179, 71, 0.06), rgba(255, 179, 71, 0) 60%),
    var(--bg-elevated);
  box-shadow: inset 0 0 0 1px rgba(255, 179, 71, 0.22);
}
.card.is-limited .card-tile-overlay { opacity: 1; }
.limit-badge {
  align-self: start;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: rgba(5, 6, 8, 0.66);
  color: var(--accent-amber);
  border: 1px solid rgba(255, 179, 71, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  width: max-content;
}
.limit-badge svg { flex-shrink: 0; }
/* Amber upgrade variant of the locked-price CTA. */
.price-locked-upgrade {
  color: #1a1205;
  background: var(--accent-amber);
  border-color: var(--accent-amber);
}
.price-locked-upgrade:hover {
  box-shadow: 0 6px 16px rgba(255, 179, 71, 0.3);
}

.card-body {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.card .title {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.014em;
  color: var(--fg);
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card .desc {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.5;
  letter-spacing: -0.002em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.card .arrow {
  color: var(--muted);
  font-size: 18px;
}

.chevron {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-soft);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.18s, border-color 0.12s, background 0.12s;
}

.chevron:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.card.expanded .chevron {
  transform: rotate(180deg);
}

.details-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  display: grid;
  gap: 16px;
  animation: panelIn 0.22s ease;
  transform-origin: top;
}

.details-panel[hidden] { display: none; }

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

/* Expanded cards no longer take a colored left border — relies on the
   source-tag pill + the card's natural border for identity. */

/* Hero gallery */
.hero-block {
  display: grid;
  gap: 8px;
}

.hero-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-height: 460px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

/* When the hero <img> errors out, the onerror handler tags the wrap
   with .hero-image-wrap-failed. We paint a sneaker silhouette via a
   ::after layer so the cell never reads as a broken image. */
.hero-image-wrap-failed::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(124, 224, 255, 0.06), transparent 60%),
    var(--bg-sunken);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 36' fill='none' stroke='%236CF5C8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.6'><path d='M4 30 L4 22 Q4 18 10 18 L18 18 Q26 18 33 22 L48 22 Q54 22 54 27 L54 31 L4 31 Z'/><path d='M11 18 L11 12 M16 18 L16 9 M22 19 L22 13'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 38% auto;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.18s ease;
}

.hero-thumbs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.hero-thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-sunken);
  cursor: pointer;
  transition: border-color 0.12s, transform 0.08s;
}

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

.hero-thumb.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Chip row */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.info-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--fg);
}

.info-chip .chip-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
}

.info-chip .chip-value {
  font-weight: 500;
}

.info-chip.kind-brand      { border-color: rgba(124, 224, 255, 0.3); background: var(--accent-soft);    color: var(--accent); }
.info-chip.kind-silhouette { border-color: rgba(255, 179, 71, 0.3);  background: var(--highlight-soft); color: var(--highlight); }
.info-chip.kind-colorway   { border-color: rgba(255, 68, 112, 0.25); background: var(--danger-soft);    color: var(--danger); }
.info-chip.kind-sku        { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; font-size: 11px; }

/* Big price comparison */
.price-block {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}

.price-block .price-cell {
  flex: 1 1 140px;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}

.price-block .price-cell strong {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.price-block .price-cell.retail strong { color: var(--muted); }
.price-block .price-cell.current strong { color: var(--fg); }

.price-arrow {
  align-self: center;
  font-size: 24px;
  color: var(--muted);
  padding: 0 4px;
}

.premium-chip {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.premium-chip.premium { background: var(--highlight-soft); color: var(--highlight); }
.premium-chip.hot     { background: var(--danger-soft);    color: var(--danger);    }
.premium-chip.below   { background: var(--accent-soft);    color: var(--accent);    }

.price-side-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.price-side-row .price-cell.muted {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.price-side-row .price-cell.muted strong {
  font-size: 15px;
  font-weight: 500;
}

.price-cell .label,
.fact .label,
.sizes-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.price-cell strong {
  font-size: 16px;
  font-weight: 600;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 18px;
}

.fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  min-width: 0;
}

.fact .value {
  color: var(--fg);
  font-weight: 500;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.sizes-label {
  margin-bottom: 6px;
}

.size-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px;
}

.size-chip {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--fg-soft);
  cursor: default;
  transition: border-color 0.12s, color 0.12s;
}

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

.story {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-soft);
}

.story p { margin: 0; }

/* ── Composite detail card — image left, data rail right ────────── */

.detail-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 14px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  margin-bottom: 10px;
}
.detail-card.detail-card-noimg { grid-template-columns: minmax(0, 1fr); }

.detail-hero {
  display: grid;
  gap: 6px;
  min-width: 0;
  width: 150px;
}
.detail-hero-img-wrap {
  width: 180px;
  height: 180px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
}
.detail-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;
}
.detail-hero-img-wrap:hover .detail-hero-img { transform: scale(1.04); }
.detail-hero-img-failed::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 36' fill='none' stroke='%236CF5C8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'><path d='M4 30 L4 22 Q4 18 10 18 L18 18 Q26 18 33 22 L48 22 Q54 22 54 27 L54 31 L4 31 Z'/><path d='M11 18 L11 12 M16 18 L16 9 M22 19 L22 13'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50% auto;
}
.detail-hero-thumbs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}
.detail-hero-thumbs .hero-thumb {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.14s ease, border-color 0.14s ease;
}
.detail-hero-thumbs .hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-hero-thumbs .hero-thumb:hover { opacity: 0.85; }
.detail-hero-thumbs .hero-thumb.active { opacity: 1; border-color: var(--accent); }

.detail-data {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.detail-meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.detail-meta-sep { color: var(--border-strong); }
.detail-meta-src { color: var(--fg-soft); }
.detail-meta-src-stockx { color: var(--stockx); }
.detail-meta-src-goat   { color: var(--goat); }
.detail-meta-src-nike   { color: var(--nike); }

.detail-title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--fg);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.detail-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.12s ease;
}
.detail-title-link:hover {
  color: var(--accent);
}
.detail-title-ext {
  margin-left: 6px;
  vertical-align: baseline;
  opacity: 0.5;
  transition: opacity 0.12s ease;
}
.detail-title-link:hover .detail-title-ext {
  opacity: 1;
}

.detail-colorway {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-top: -3px;
}

.detail-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding-top: 4px;
  border-top: 1px solid var(--border-strong);
  margin-top: 2px;
}
.detail-price {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.detail-price-retail {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.detail-premium {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}
.detail-premium.premium-below { color: var(--accent);    background: rgba(124, 224, 255, 0.10); border-color: rgba(124, 224, 255, 0.32); }
.detail-premium.premium-up    { color: var(--highlight); background: rgba(255, 179, 71, 0.10);  border-color: rgba(255, 179, 71, 0.32); }
.detail-premium.premium-hot   { color: var(--danger);    background: rgba(255, 68, 112, 0.10);  border-color: rgba(255, 68, 112, 0.32); }

/* AUTHENTIC badge — the third thing a sneakerhead checks. The platform
   name doubles as the trust signal (StockX / GOAT / Nike all authenticate
   every order). Reads as a verified-checkmark indicator, not a chip. */
.detail-auth {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  margin-top: 2px;
  background: var(--bg-elevated);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  width: fit-content;
  cursor: help;
}
.detail-auth svg { flex-shrink: 0; }
.detail-auth-stockx       { border-color: var(--stockx);       color: var(--stockx); }
.detail-auth-goat         { border-color: var(--goat);         color: var(--goat); }
.detail-auth-nike         { border-color: var(--nike);         color: var(--nike); }
.detail-auth-ebay         { border-color: var(--ebay);         color: var(--ebay); }
.detail-auth-flightclub   { border-color: var(--flightclub);   color: var(--flightclub); }
.detail-auth-stadiumgoods { border-color: var(--stadiumgoods); color: var(--stadiumgoods); }
.detail-auth-kickscrew    { border-color: var(--kickscrew);    color: var(--kickscrew); }

.detail-verdict-row { margin-top: 2px; }

/* VIEW IN 3D — fires our self-hosted Stable Fast 3D pipeline and
   swaps the static photo for a live model-viewer mesh. Lives just
   above the snipe CTA in the data rail. */
/* Row holding the VIEW IN 3D + SHARE buttons side by side. */
.detail-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.detail-3d-btn,
.detail-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  width: fit-content;
  background: rgba(124, 224, 255, 0.08);
  border: 1px solid rgba(124, 224, 255, 0.42);
  color: var(--accent);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.detail-share-btn:hover {
  background: rgba(124, 224, 255, 0.18);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.detail-3d-btn:hover {
  background: rgba(124, 224, 255, 0.18);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.detail-3d-btn:disabled { cursor: progress; opacity: 0.7; transform: none; }
.detail-3d-btn.loading svg {
  animation: detail-3d-spin 1.2s linear infinite;
}
.detail-3d-btn.active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
@keyframes detail-3d-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

/* model-viewer container — replaces the static hero image in the
   detail-card. Same 180×180 footprint so the panel layout doesn't
   reflow when 3D toggles in. */
.detail-hero-3d {
  width: 180px;
  height: 180px;
  background: var(--bg-elevated);
  border: 1px solid var(--accent);
  overflow: hidden;
  position: relative;
}
.detail-3d-viewer {
  width: 100%;
  height: 100%;
  display: block;
  --poster-color: transparent;
}
/* Expand-to-modal button — sits on top of the inline model-viewer,
   outside its shadow DOM so clicks aren't captured by the orbit
   camera. Lights mint on hover to read as the primary 3D affordance. */
.detail-3d-expand {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  display: grid;
  place-items: center;
  background: rgba(5, 6, 8, 0.7);
  color: var(--fg-soft);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  z-index: 3;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.detail-3d-expand:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(5, 6, 8, 0.85);
}
@media (max-width: 720px) {
  .detail-hero-3d { width: 100%; height: auto; aspect-ratio: 1; max-width: 280px; margin: 0 auto; }
}

/* ── Expanded 3D mesh modal ───────────────────────────────────── */

.mesh-modal {
  position: fixed;
  inset: 0;
  z-index: 240;
  background: rgba(5, 6, 8, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.mesh-modal.open { opacity: 1; }
.mesh-modal-stage {
  width: min(88vw, 1200px);
  height: min(82vh, 820px);
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--accent);
  overflow: hidden;
}
.mesh-modal-viewer {
  width: 100%;
  height: 100%;
  display: block;
  --poster-color: transparent;
  --progress-bar-color: var(--accent);
}
.mesh-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  background: rgba(5, 6, 8, 0.78);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.mesh-modal-close:hover {
  color: var(--accent);
  border-color: var(--accent);
}
@media (max-width: 720px) {
  .mesh-modal-stage {
    width: 96vw;
    height: 80vh;
  }
}
.detail-verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  padding: 5px 10px;
  border: 1px solid transparent;
  cursor: help;
}
.detail-verdict-icon { font-size: 11px; line-height: 1; }
.detail-verdict.verdict-strong { color: var(--accent-ink); background: var(--accent);    border-color: var(--accent); }
.detail-verdict.verdict-buy    { color: var(--accent);    background: rgba(124, 224, 255, 0.10); border-color: rgba(124, 224, 255, 0.45); }
.detail-verdict.verdict-hold   { color: var(--highlight); background: rgba(255, 179, 71, 0.10);  border-color: rgba(255, 179, 71, 0.45); }
.detail-verdict.verdict-wait   { color: var(--danger);    background: rgba(255, 68, 112, 0.10);  border-color: rgba(255, 68, 112, 0.45); }
.detail-verdict.verdict-skip   { color: var(--danger);    background: rgba(255, 68, 112, 0.16);  border-color: rgba(255, 68, 112, 0.5); }

.detail-supply {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 14px;
  margin: 0 0 12px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  font-variant-numeric: tabular-nums;
}
.detail-supply em {
  font-style: normal;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 9.5px;
  margin-right: 2px;
}
.detail-supply-sep { color: var(--border-strong); }

/* Snipe action sitting inside the detail card. Compact, bottom-aligned. */
.detail-data .snipe-action {
  align-self: start;
  margin-top: 4px;
}

/* Sizes — slim band, brutalist mono. */
.sizes-band {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
.sizes-band-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 720px) {
  .detail-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
  }
  .detail-hero { width: auto; }
  .detail-hero-img-wrap { width: 100%; height: auto; aspect-ratio: 1; max-width: 280px; margin: 0 auto; }
  .detail-title { font-size: 16px; }
  .detail-price { font-size: 24px; }
}

/* Old large verdict banner is no longer rendered — but bullet-proof
   the page in case any cached client still has the old markup. */
.buy-banner { display: none !important; }

/* ── Brief toggle — collapsed by default, expand on demand ────── */
.brief-toggle { margin-top: 12px; }
.brief-toggle-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  transition: border-color 0.16s ease, background 0.16s ease;
}
.brief-toggle-summary::-webkit-details-marker { display: none; }
.brief-toggle-summary:hover {
  border-color: var(--accent);
  background: var(--panel);
}
.brief-toggle-summary .section-marker {
  color: var(--accent);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.brief-toggle-summary .section-title {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
}
.brief-toggle-hint {
  margin-left: auto;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.brief-toggle[open] > .brief-toggle-summary .brief-toggle-hint::before { content: "− "; }
.brief-toggle:not([open]) > .brief-toggle-summary .brief-toggle-hint::before { content: "+ "; }
.brief-toggle[open] > .brief-toggle-summary { border-bottom: 0; }
.brief-toggle .deep-dive { margin-top: 0; border-top: 0; }

/* ── Quick Read ────────────────────────────────────────────────── */
.scout-take {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
}

.scout-take-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.scout-take-header .section-marker { color: var(--accent); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; font-weight: 700; }
.scout-take-header .section-title  { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--fg); }

.scout-take-body {
  font-size: 14px;
  line-height: 1.55;
}

.scout-take-body strong {
  color: var(--accent);
  font-weight: 600;
}

.scout-take-body code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--accent);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 3px;
}

.scout-take[data-state="loading"] .scout-take-body {
  color: var(--muted);
  font-style: italic;
}

.scout-take[data-state="error"] .scout-take-body {
  color: var(--danger);
  font-size: 12px;
}

/* Buyer's Brief */
.deep-dive {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 14px 18px;
  display: grid;
  gap: 10px;
}

.deep-dive-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.deep-dive-header .section-marker { color: var(--accent); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; font-weight: 700; }
.deep-dive-header .section-title  { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--fg); }

.deep-dive .badge.brief {
  background: var(--highlight-soft);
  color: var(--highlight);
  border-color: rgba(255, 179, 71, 0.3);
}

.deep-dive-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg);
}

.deep-dive[data-state="loading"] .deep-dive-body {
  color: var(--muted);
  font-style: italic;
}

.deep-dive[data-state="error"] .deep-dive-body {
  color: var(--danger);
  font-size: 12px;
}

.deep-dive-body {
  display: grid;
  gap: 12px;
}

.deep-dive-body > p { margin: 0; }

/* Lead — the curator's opening read. Editorial-style kicker + supporting
   line so the headline thought lands before the context. Visually
   distinct from the section cards below; the eye finds it first. */
.brief-lead {
  margin: 0;
  padding: 20px 22px;
  background:
    linear-gradient(180deg, rgba(124, 224, 255, 0.07) 0%, var(--bg-elevated) 70%);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1, "tnum" 1;
  position: relative;
  overflow: hidden;
}
.brief-lead::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent) 0%, rgba(124, 224, 255, 0.15) 100%);
  opacity: 0.85;
}

.brief-lead-kicker {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.4;
  letter-spacing: -0.018em;
  color: var(--fg);
  font-weight: 600;
}

.brief-lead-rest {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  letter-spacing: -0.004em;
  color: var(--muted);
  font-weight: 400;
}

.brief-lead-kicker strong {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brief-empty,
.brief-empty-inline {
  font-style: italic;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: -0.002em;
}

/* ── Brief section cards ──────────────────────────────────────── */

.brief-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px 18px;
  display: grid;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.14s ease, box-shadow 0.18s ease;
}
.brief-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.brief-card[data-accent="accent"]:hover    { border-color: rgba(124, 224, 255, 0.32); }
.brief-card[data-accent="verify"]:hover    { border-color: rgba(124, 224, 255, 0.28); }
.brief-card[data-accent="highlight"]:hover { border-color: rgba(255, 179, 71, 0.32); }
.brief-card[data-accent="danger"]:hover    { border-color: rgba(255, 68, 112, 0.32); }

/* Brief cards carry their accent via the // marker color and the
   bold/num tint. Flat backgrounds keep the brutalist read. */
.brief-card[data-accent="accent"],
.brief-card[data-accent="verify"],
.brief-card[data-accent="neutral"],
.brief-card[data-accent="highlight"],
.brief-card[data-accent="danger"]    { background: var(--bg-elevated); }
.brief-card[data-accent="accent"]    { border-left: 2px solid rgba(124, 224, 255, 0.6); }
.brief-card[data-accent="highlight"] { border-left: 2px solid rgba(255, 179, 71, 0.6); }
.brief-card[data-accent="danger"]    { border-left: 2px solid rgba(255, 68, 112, 0.6); }

.brief-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.brief-card-head .section-marker {
  color: var(--accent);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.brief-card-head .section-title {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
}
.brief-card[data-accent="accent"]    .brief-card-head .section-marker { color: var(--accent); }
.brief-card[data-accent="highlight"] .brief-card-head .section-marker { color: var(--highlight); }
.brief-card[data-accent="danger"]    .brief-card-head .section-marker { color: var(--danger); }

.brief-body {
  display: grid;
  gap: 8px;
  font-size: 14.5px;
  line-height: 1.55;
  letter-spacing: -0.004em;
  color: var(--fg);
  word-wrap: break-word;
  overflow-wrap: anywhere;
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1, "tnum" 1;
}

.brief-body p { margin: 0; }

/* ── Compare strip — image cards for alternatives the agent names ── */

.compare-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}

.compare-alt {
  display: grid;
  gap: 8px;
  padding: 0;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.16s ease, transform 0.14s ease;
}
.compare-alt:hover {
  border-color: var(--highlight);
  transform: translateY(-1px);
}

.compare-alt-img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-elevated);
  overflow: hidden;
}
.compare-alt-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: compare-alt-fade-in 0.24s ease forwards;
}
@keyframes compare-alt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.compare-alt-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--accent);
  opacity: 0.4;
}
.compare-alt-placeholder svg { width: 50%; height: auto; }

.compare-alt-name {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
  padding: 0 10px 10px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 26px;
}

/* ── Inline brief sparkline (Price Action) ────────────────────── */

.brief-spark {
  height: 28px;
  padding: 4px 0;
  margin-bottom: 4px;
}
.brief-spark svg { width: 100%; height: 100%; display: block; }
.brief-spark-line {
  fill: none;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.brief-spark-fill {
  stroke: none;
  opacity: 0.16;
}
.brief-spark[data-direction="down"] .brief-spark-line,
.brief-spark[data-direction="down"] .brief-spark-fill { stroke: var(--accent); fill: var(--accent); }
.brief-spark[data-direction="up"]   .brief-spark-line,
.brief-spark[data-direction="up"]   .brief-spark-fill { stroke: var(--danger); fill: var(--danger); }

/* Bullet lists inside a Brief section — used by "Spot the Fakes" to
   render distinct physical tells as a scannable checklist. */
/* Inline price-history sparkline shown above the Brief in the expanded
   card. Pure SVG, scales to container width. Direction-aware colour:
   mint when latest > first (price up — bad for buyer = red? actually
   for a SCOUT user, "down" is the deal; flip so DOWN reads mint). */
.sparkline {
  margin: 0 0 14px;
  padding: 8px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: grid;
  gap: 4px;
}
.sparkline-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.sparkline-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--fg-soft);
}
.sparkline-meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.sparkline-svg {
  width: 100%;
  height: 32px;
  display: block;
}
.sparkline-line {
  fill: none;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.sparkline-fill {
  stroke: none;
  opacity: 0.18;
}
.sparkline-dot {
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}
/* Lower current = better for the buyer — mint. */
.sparkline[data-direction="down"] .sparkline-line { stroke: var(--accent); }
.sparkline[data-direction="down"] .sparkline-fill { fill:   var(--accent); }
.sparkline[data-direction="down"] .sparkline-dot  { fill:   var(--accent); stroke: var(--accent-ink); }
.sparkline[data-direction="up"]   .sparkline-line { stroke: var(--danger); }
.sparkline[data-direction="up"]   .sparkline-fill { fill:   var(--danger); }
.sparkline[data-direction="up"]   .sparkline-dot  { fill:   var(--danger); stroke: var(--accent-ink); }

.brief-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

/* Share-this-Brief row — always visible at the bottom of a finished
   Brief. Quiet by default (matches Brief surface), accent on hover. */
.brief-share-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.brief-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg-soft);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.brief-share-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.brief-share-btn.brief-share-done {
  border-color: var(--accent);
  background: rgba(124, 224, 255, 0.12);
  color: var(--accent);
}
.brief-share-btn svg { display: block; }

/* Save-this-Brief hook — appears at the bottom of the Brief panel for
   anon users only. Mint-tinted card with a clear CTA. */
.brief-save-hook {
  margin-top: 14px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(124, 224, 255, 0.08) 0%, var(--bg-elevated) 80%);
  border: 1px solid rgba(124, 224, 255, 0.30);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}
.brief-save-text {
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.003em;
  color: var(--fg-soft);
}
.brief-save-text strong {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-right: 4px;
}
.brief-save-cta {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(124, 224, 255, 0.18);
  transition: background 0.14s ease, transform 0.12s ease;
}
.brief-save-cta:hover {
  background: var(--accent-bright);
  transform: translateY(-1px);
}

@media (max-width: 520px) {
  .brief-save-hook {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
.brief-list li {
  position: relative;
  padding: 2px 0 2px 22px;
  line-height: 1.5;
  letter-spacing: -0.004em;
}
.brief-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--border-strong);
  border-radius: 3px;
  background: transparent;
}
.brief-card[data-accent="verify"] .brief-list li::before {
  border-color: rgba(124, 224, 255, 0.45);
}

.brief-body strong {
  color: var(--fg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brief-card[data-accent="accent"]    .brief-body strong { color: var(--accent); }
.brief-card[data-accent="verify"]    .brief-body strong { color: var(--accent); }
.brief-card[data-accent="highlight"] .brief-body strong { color: var(--highlight); }
.brief-card[data-accent="danger"]    .brief-body strong { color: var(--danger); }

.brief-body .num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 0 5px;
  border-radius: 3px;
  white-space: nowrap;
}

.brief-card[data-accent="accent"]    .brief-body .num { color: var(--accent);    border-color: rgba(124, 224, 255, 0.25); }
.brief-card[data-accent="highlight"] .brief-body .num { color: var(--highlight); border-color: rgba(255, 179, 71, 0.25); }
.brief-card[data-accent="danger"]    .brief-body .num { color: var(--danger);    border-color: rgba(255, 68, 112, 0.25); }

.brief-body code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 3px;
}

.deep-dive-sources {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.sources-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 4px;
}

.sources-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
}

.sources-list li {
  font-size: 12px;
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.sources-list a {
  color: var(--accent);
  text-decoration: none;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sources-list a:hover { text-decoration: underline; }

.sources-q {
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  white-space: nowrap;
}

.details-loading {
  font-size: 12px;
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  padding: 4px 6px;
  background: var(--bg-sunken);
  border-radius: 6px;
  width: max-content;
}

.price-tag {
  background: linear-gradient(180deg, rgba(124, 224, 255, 0.16), rgba(124, 224, 255, 0.08));
  color: var(--accent);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 18px;
  padding: 7px 12px 6px;
  border-radius: 8px;
  white-space: nowrap;
  letter-spacing: -0.015em;
  border: 1px solid rgba(124, 224, 255, 0.36);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
  box-shadow:
    0 4px 12px rgba(124, 224, 255, 0.06),
    inset 0 1px 0 rgba(124, 224, 255, 0.18);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover .price-tag {
  border-color: rgba(124, 224, 255, 0.52);
  box-shadow:
    0 6px 18px rgba(124, 224, 255, 0.12),
    inset 0 1px 0 rgba(124, 224, 255, 0.24);
}

.enrichment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 10px;
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  opacity: 0.85;
}

.enrichment .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
}

.enrichment[data-state="pending"] .dot {
  background: var(--accent);
  animation: pulse 1.2s ease-in-out infinite;
}

.enrichment[data-state="done"] .dot { background: var(--accent); }
.enrichment[data-state="error"] .dot { background: var(--danger); }
.enrichment[data-state="error"] .enrichment-text { color: var(--danger); }

.enrichment-retry {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  font-family: inherit;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  cursor: pointer;
  margin-left: 4px;
  transition: background 0.12s;
}

.enrichment-retry:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

.retry-note {
  color: var(--accent);
  font-weight: 600;
}

.agent-reasoning {
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-soft);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.agent-reasoning .agent-icon {
  font-size: 11px;
  opacity: 0.85;
  flex-shrink: 0;
  margin-top: 1px;
}

.agent-reasoning .agent-text {
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@keyframes pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}

footer {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding: 32px 24px;
}

/* ── Plans modal (tier picker) ────────────────────────────────────── */
.plans-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(5, 8, 12, 0.78);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.16s ease;
}
.plans-modal.open { opacity: 1; }
.plans-modal[hidden] { display: none; }

.plans-modal-card {
  position: relative;
  width: min(1120px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 32px 32px 26px;
  display: grid;
  gap: 18px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(124, 224, 255, 0.05);
}

.plans-head {
  display: grid;
  gap: 7px;
  max-width: 560px;
}
.plans-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.plans-eyebrow::before { content: "// "; opacity: 0.7; }

.plans-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--fg);
}

.plans-pitch {
  margin: 0;
  color: var(--soft);
  font-size: 13.5px;
  line-height: 1.55;
}

.plans-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  padding: 0;
  margin: 4px 0 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.plans-trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.plans-trust li svg {
  color: var(--accent);
  flex-shrink: 0;
}
@media (max-width: 540px) {
  .plans-trust {
    flex-direction: column;
    gap: 8px;
    font-size: 10.5px;
  }
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Equal-height cards so every box's top and bottom edge lines up — the
     featured card's lift is the only intentional offset. */
  align-items: stretch;
  gap: 12px;
  /* Headroom so the lifted featured card + its "Most popular" badge
     don't crowd the header above. */
  margin-top: 12px;
}

.plans-loading,
.plans-error {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  padding: 28px;
}
.plans-error { color: var(--signal-red); }

.plan-card {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.plan-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }

/* Featured tier — the anchor. Marked by an accent border, a faint mint
   wash + glow, the badge, and the only filled CTA. Kept flush with its
   neighbours (no vertical lift) so every row lines up across all cards. */
.plan-card.recommended {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(124, 224, 255, 0.08), var(--bg-elevated) 44%);
  box-shadow: 0 0 0 1px var(--accent), 0 14px 36px rgba(0, 0, 0, 0.45), 0 0 30px rgba(124, 224, 255, 0.10);
}
.plan-card.current {
  border-color: var(--accent-amber);
  box-shadow: 0 0 0 1px var(--accent-amber);
}

.plan-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 11px;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(124, 224, 255, 0.32);
}

/* Fixed header band so a 1-line vs 2-line tagline never pushes one
   card's price out of line with the others. */
.plan-head { display: grid; gap: 3px; align-content: start; min-height: 50px; }
.plan-name {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg);
}
.plan-tagline { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.4; }

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 14px;
}
.plan-price-amount {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 800;
  color: var(--fg);
  letter-spacing: -0.03em;
  line-height: 1;
}
.plan-price-period {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.plan-perday {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* Hero metric — the single number that sells the tier, boxed so it
   reads before the feature list. */
.plan-highlight {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 9px 11px;
  border: 1px solid rgba(124, 224, 255, 0.22);
  background: rgba(124, 224, 255, 0.06);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.plan-highlight-check { color: var(--accent); font-size: 11px; }

.plan-pick {
  margin-top: 16px;
  width: 100%;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.13s ease, border-color 0.13s ease, color 0.13s ease, transform 0.08s ease;
}
.plan-pick:hover:not(:disabled) {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.plan-pick:active:not(:disabled) { transform: translateY(1px); }
.plan-card.recommended .plan-pick {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.plan-card.recommended .plan-pick:hover:not(:disabled) {
  filter: brightness(1.07);
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.plan-pick:disabled { opacity: 0.45; cursor: not-allowed; }

/* Features — the justification, below the CTA. The "Everything in X,
   plus" lead reads as a quiet section label, not a checked item. */
.plan-features {
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
  display: grid;
  gap: 9px;
  font-size: 12.5px;
  color: var(--soft);
}
.plan-features li {
  position: relative;
  padding-left: 20px;
  line-height: 1.4;
}
.plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 800;
  font-size: 11px;
}
.plan-feature-lead {
  padding-left: 0 !important;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.plan-feature-lead::before { content: none !important; }

/* 4-up collapses to 2×2 on tablets, single column on phones. */
@media (max-width: 1040px) {
  .plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .plans-grid { grid-template-columns: 1fr; margin-top: 6px; }
}

/* ───────── Mobile modal sheets (≤ 720px) ───────── */

@media (max-width: 720px) {
  /* Auth modal becomes a bottom sheet — slides up from the edge of
     the viewport, full-width, respects iOS home indicator inset. */
  .auth-modal,
  .plans-modal {
    align-items: flex-end;
    padding: 0;
  }
  .auth-modal-card,
  .plans-modal-card {
    width: 100%;
    max-width: none;
    border-radius: 18px 18px 0 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    transform: translateY(24px);
    transition: transform 0.2s ease;
  }
  .auth-modal.open .auth-modal-card,
  .plans-modal.open .plans-modal-card {
    transform: translateY(0);
  }
  .plans-modal-card { max-height: 88dvh; }

  /* Touch-target floors — 44pt minimum on tappable primary actions.
     Iconic buttons (close ×, chevron, hamburger) opt out via explicit
     dimensions or their own selectors. */
  #go,
  .plan-pick,
  .auth-submit,
  .account-action,
  .account-btn,
  .sidebar-action {
    min-height: 44px;
  }
  .account-signout { min-height: 36px; }
  /* Sidebar inputs already meet 44px via 9px padding + 16px font. */
  .search-field > input { min-height: 44px; }

  .card-image,
  .card-image-placeholder,
  .skeleton-thumb {
    width: 72px !important;
    height: 72px !important;
  }
  .card-image-placeholder svg { width: 44px; height: 22px; }

  /* Meta pills get their own wrap line so the title runs full width
     instead of fighting the source tag for horizontal space. */
  .card-meta { gap: 6px; }
  .card .source-tag { font-size: 9px; }
}

/* ── Identify-from-image modal (paste-to-find) ───────────────────── */

.identify-modal .identify-card { width: min(500px, 100%); }

/* Drop zone — the empty state. Mint-tinted dashed border that breathes
   on hover and goes solid + lifts on dragover. Single fat-target
   container so the whole area is clickable, not just the CTA. */
.dropzone {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  padding: 32px 24px 28px;
  background: linear-gradient(180deg, rgba(124, 224, 255, 0.04), var(--bg-sunken) 80%);
  border: 1.5px dashed rgba(124, 224, 255, 0.32);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.14s ease;
}
.dropzone[hidden] { display: none !important; }
.dropzone:hover {
  border-color: rgba(124, 224, 255, 0.55);
  background: linear-gradient(180deg, rgba(124, 224, 255, 0.07), var(--bg-elevated) 80%);
}
.dropzone-over {
  border-style: solid;
  border-color: var(--accent);
  background: rgba(124, 224, 255, 0.10);
  transform: translateY(-1px);
}

.dropzone-glyph {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: rgba(124, 224, 255, 0.10);
  border: 1px solid rgba(124, 224, 255, 0.28);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dropzone-glyph svg { width: 40px; height: 28px; }

.dropzone-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.012em;
}

.dropzone-sub {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.dropzone-sub kbd {
  font-family: inherit;
  font-size: 9.5px;
  padding: 2px 5px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--fg-soft);
  margin: 0 1px;
  letter-spacing: 0.06em;
}

.dropzone-cta {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 8px;
  padding: 11px 22px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 800;
  cursor: pointer;
  margin-top: 4px;
  box-shadow: 0 4px 12px rgba(124, 224, 255, 0.20);
  transition: filter 0.12s ease, transform 0.12s ease;
}
.dropzone-cta:hover { filter: brightness(1.07); transform: translateY(-1px); }
.dropzone-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 224, 255, 0.32);
}

.dropzone-fine {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 2px;
}

.identify-preview {
  width: 100%;
  min-height: 180px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.identify-preview[hidden] { display: none !important; }
.identify-preview img {
  max-width: 100%;
  max-height: 280px;
  display: block;
  object-fit: contain;
}

.identify-status {
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: center;
}
.identify-status[hidden] { display: none !important; }

.identify-hit {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(124, 224, 255, 0.08), var(--bg-elevated) 80%);
  border: 1px solid rgba(124, 224, 255, 0.32);
  border-radius: 10px;
}

.identify-hit-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.014em;
  color: var(--fg);
}

.identify-hit-cw {
  font-size: 13px;
  color: var(--fg-soft);
  letter-spacing: -0.004em;
}

.identify-hit-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}

.identify-hit-brand,
.identify-hit-conf {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
}
.identify-hit-brand { background: rgba(124, 224, 255, 0.12); color: var(--accent); }
.identify-hit-conf  { background: rgba(139, 149, 168, 0.10); color: var(--muted); border: 1px solid var(--border); }

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

.identify-action-search {
  flex: 1;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 8px;
  padding: 11px 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 4px 12px rgba(124, 224, 255, 0.18);
  transition: filter 0.12s ease, transform 0.12s ease;
}
.identify-action-search:hover { filter: brightness(1.07); transform: translateY(-1px); }

.identify-action-dismiss {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 8px;
  padding: 11px 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
}
.identify-action-dismiss:hover { color: var(--danger); border-color: var(--danger); }

/* ── Command palette (Cmd/Ctrl+K) ────────────────────────────────── */

.palette {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(5, 8, 12, 0.78);
  backdrop-filter: blur(8px);
  padding: 80px 20px 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  opacity: 0;
  transition: opacity 0.14s ease;
}
.palette[hidden] { display: none !important; }
.palette.open { opacity: 1; }

.palette-card {
  width: min(640px, 100%);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(124, 224, 255, 0.06);
}

.palette-input {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  background: transparent;
  color: var(--fg);
  border: 0;
  border-bottom: 1px solid var(--border);
  font-family: inherit;
  font-size: 16px;
  outline: none;
}
.palette-input::placeholder { color: var(--muted); }

.palette-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 360px;
  overflow-y: auto;
  display: grid;
  gap: 2px;
}

.palette-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.10s ease;
}
.palette-item:hover { background: var(--bg-elevated); }
.palette-item-active { background: var(--bg-elevated); }
.palette-item-active .palette-label { color: var(--accent); }

.palette-kind {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  font-weight: 800;
  padding: 3px 6px;
  border-radius: 4px;
  text-align: center;
  background: rgba(0, 0, 0, 0.25);
  color: var(--muted);
}
.palette-kind-cmd    { color: var(--accent); }
.palette-kind-recent { color: var(--accent-amber); }
.palette-kind-search { color: var(--danger); }

.palette-label {
  font-size: 14px;
  color: var(--fg);
  letter-spacing: -0.005em;
}

.palette-hint {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.08em;
}

.palette-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.palette-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: var(--bg-sunken);
  border-top: 1px solid var(--border);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.palette-footer kbd {
  font-family: inherit;
  font-size: 9px;
  padding: 2px 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg-soft);
  margin: 0 1px;
}

/* ── Quick-compare drawer (bottom rail) ──────────────────────────── */

.compare-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-sunken) 100%);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45);
  padding: 12px 24px calc(14px + env(safe-area-inset-bottom));
  display: grid;
  gap: 10px;
  transition: transform 0.2s ease;
}
.compare-drawer[hidden] { display: none; }
.compare-drawer[data-collapsed="true"] .compare-rail { display: none; }
.compare-drawer[data-collapsed="true"] { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }

.compare-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.compare-badge {
  background: rgba(255, 179, 71, 0.10);
  color: var(--accent-amber);
  border-color: rgba(255, 179, 71, 0.32);
}
.compare-count {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.compare-head-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.compare-clear, .compare-collapse {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.compare-clear:hover    { color: var(--danger); border-color: var(--danger); }
.compare-collapse:hover { color: var(--accent); border-color: var(--accent); }
.compare-collapse { padding: 4px 8px; font-size: 11px; }

.compare-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.compare-slot {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 32px 10px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 9px;
  transition: border-color 0.16s ease;
}
.compare-slot:hover { border-color: var(--border-strong); }
.compare-slot[data-source="stockx"] { box-shadow: inset 0 0 0 1px rgba(124, 224, 255, 0.20); }
.compare-slot[data-source="goat"]   { box-shadow: inset 0 0 0 1px rgba(255, 179, 71, 0.20); }
.compare-slot[data-source="nike"]   { box-shadow: inset 0 0 0 1px rgba(255, 68, 112, 0.20); }

.compare-thumb {
  width: 44px;
  height: 44px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--panel);
  display: block;
}
.compare-thumb img { width: 44px; height: 44px; object-fit: cover; display: block; }
.compare-thumb-ph {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, rgba(124, 224, 255, 0.05), rgba(255, 179, 71, 0.04)) var(--panel);
}

.compare-body { display: grid; gap: 5px; min-width: 0; }

.compare-title {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.compare-title:hover { color: var(--accent); }

.compare-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.compare-source {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.22);
}
.compare-source-stockx { color: var(--accent); }
.compare-source-goat   { color: var(--accent-amber); }
.compare-source-nike   { color: var(--danger); }

.compare-price {
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

.compare-verdict {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid currentColor;
}
.compare-verdict-strong_buy { color: var(--accent); background: rgba(124, 224, 255, 0.12); }
.compare-verdict-buy        { color: var(--accent); background: rgba(124, 224, 255, 0.06); }
.compare-verdict-hold       { color: var(--accent-amber); background: rgba(255, 179, 71, 0.10); }
.compare-verdict-wait       { color: var(--danger); background: rgba(255, 68, 112, 0.08); }
.compare-verdict-skip       { color: var(--danger); background: rgba(255, 68, 112, 0.10); }

.compare-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  border-radius: 4px;
  box-shadow: none;
}
.compare-remove:hover { color: var(--danger); background: rgba(255, 68, 112, 0.08); }

/* Push results up so the drawer doesn't cover the bottom of the page. */
.compare-drawer:not([hidden]) ~ .app-shell .canvas {
  padding-bottom: 140px;
}

@media (max-width: 1100px) { .compare-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  {
  .compare-rail { grid-template-columns: 1fr; }
  .compare-drawer { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 520px) {
  .row { grid-template-columns: 1fr; }
  .card { grid-template-columns: 64px 1fr auto; }
  .card.has-image { grid-template-columns: 56px 56px 1fr; }
  .card.has-image .card-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }
  .card .arrow { display: none; }
  .card .card-image,
  .card .card-image-placeholder,
  .card .skeleton-thumb {
    width: 56px !important;
    height: 56px !important;
  }
  .card-image-placeholder svg { width: 36px; height: 18px; }
  header { padding-top: 36px; }

  /* Plan cards: stack the price big, features tighter. */
  .plan-name { font-size: 13px; }
  .plan-price-amount { font-size: 30px; }
  .plan-features { font-size: 12.5px; }
}

/* ── SEO-rendered pages (/sneaker/*, /sneakers, /drops/upcoming) ──
   These are server-rendered, indexable, and reuse the brutalist
   theme tokens. Layout's intentionally narrow — content-first, like
   a magazine spread, not the app shell. */

.seo-body {
  overflow: auto;
  height: auto;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.seo-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  display: grid;
  gap: 28px;
}

.seo-crumbs {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.seo-crumbs a {
  color: var(--accent);
  text-decoration: none;
}
.seo-crumbs a:hover { text-decoration: underline; }
.seo-crumbs span { color: var(--border-strong); }
.seo-crumbs > span:last-child { color: var(--fg-soft); }

.seo-hero {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 24px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
}
.seo-hero-stack { grid-template-columns: 1fr; }
.seo-hero-img {
  aspect-ratio: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.seo-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.seo-hero-fallback {
  font-size: 80px;
  color: var(--accent);
  opacity: 0.35;
}
.seo-hero-data {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.seo-brand {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.seo-title {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
.seo-lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-soft);
  margin: 0;
}
.seo-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 4px 0 0;
}
.seo-facts > div { display: grid; gap: 2px; }
.seo-facts dt {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.seo-facts dd {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.seo-premium {
  font-size: 11px;
  color: var(--highlight);
  margin-left: 4px;
}
.seo-cta {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: filter 0.14s ease, transform 0.14s ease;
}
.seo-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

.seo-brief {
  display: grid;
  gap: 18px;
}
.seo-brief h2 {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-strong);
}
.seo-brief-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  padding: 16px 18px;
}
.seo-brief-section h3 {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}
.seo-brief-section p {
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg);
}
.seo-brief-section p:last-child { margin-bottom: 0; }
.seo-brief-section strong { color: var(--accent); font-weight: 600; }

.seo-cta-row {
  padding: 18px 22px;
  background: var(--bg-elevated);
  border: 1px dashed var(--border-strong);
  text-align: center;
}
.seo-cta-row a {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.seo-cta-row a:hover { text-decoration: underline; }

.seo-footer {
  border-top: 1px solid var(--border);
  padding-top: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.seo-footer a { color: var(--accent); text-decoration: none; }
.seo-footer a:hover { text-decoration: underline; }

/* Drop digest + sneaker index lists */
.seo-drop-list, .seo-index-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.seo-drop-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
}
.seo-drop-row img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  background: var(--bg-elevated);
}
.seo-drop-row a {
  color: var(--fg);
  text-decoration: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
}
.seo-drop-row a:hover { color: var(--accent); }
.seo-drop-meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

.seo-index-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
}
.seo-index-row img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  background: var(--bg-elevated);
}
.seo-index-row a {
  color: var(--fg);
  text-decoration: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  text-transform: uppercase;
  font-size: 12.5px;
}
.seo-index-row a span { color: var(--muted); font-weight: 500; margin-left: 6px; }
.seo-index-row a:hover { color: var(--accent); }
.seo-index-price {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .seo-hero { grid-template-columns: 1fr; }
  .seo-hero-img { max-width: 320px; margin: 0 auto; }
  .seo-title { font-size: 22px; }
  .seo-facts { grid-template-columns: 1fr 1fr; }
}

/* ── /picks/<date> digest ────────────────────────────────────── */
.seo-pick-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: pick;
  display: grid;
  gap: 12px;
}
.seo-pick-row {
  display: grid;
  grid-template-columns: auto 80px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
}
.seo-pick-row:first-child {
  border-left: 3px solid var(--accent);
}
.seo-pick-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.seo-pick-row img,
.seo-pick-img-fallback {
  width: 80px;
  height: 80px;
  object-fit: cover;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 22px;
}
.seo-pick-body { display: grid; gap: 4px; min-width: 0; }
.seo-pick-name {
  color: var(--fg);
  text-decoration: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  text-transform: uppercase;
  font-size: 13px;
}
.seo-pick-name strong { font-weight: 600; }
.seo-pick-name span { color: var(--muted); font-weight: 500; }
.seo-pick-name:hover strong { color: var(--accent); }
.seo-pick-reason {
  margin: 0;
  font-size: 13.5px;
  color: var(--fg-soft);
  line-height: 1.45;
}
.seo-pick-meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--muted);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.seo-pick-cat { color: var(--accent); font-weight: 700; }

/* ── /picks archive ──────────────────────────────────────────── */
.seo-archive-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.seo-archive-row a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--fg);
  text-decoration: none;
  transition: border-color 0.14s ease;
}
.seo-archive-row a:hover { border-color: var(--accent); }
.seo-archive-date {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.seo-archive-go {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── Home SEO shell — visible to crawlers, off-screen for users ──
   The SPA renders its full UI on top of this. We keep the markup
   visible to assistive tech and crawlers but pull it off-screen
   so it doesn't compete with the brutalist app shell visually. */
.home-seo-shell {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════
   GRADED-SLAB RESULT CARDS
   Reskins .card-tile from a plain photo grid into a graded-card vault:
   each result reads as a card sealed in an archival holder. The image
   sits inside an inset "holder" frame (a recessed window with an inner
   shadow + hairline lip), capped by a thin holographic top seam
   (cyan -> violet -> gold) like the prismatic strip on a real slab label.
   Squared corners + a cool inner glow give the museum / display-case feel.

   Scoped to NOT disturb the working parts:
   - .card-tile-img stays the positioning context for the overlay/image
   - .card-tile-overlay, .card-tile-actions, the .price-tag chip, and
     .card-tile-foot are left to their existing rules (only the price chip
     gets a light holo lift below).
   Appended last so these override the earlier .card-tile block. */

.card.card-tile {
  /* The slab body: a sealed plastic holder. Squared, archival, with a
     cool prism-tinted rim glow + drop shadow so each result floats like
     a slab in a display case rather than a flat photo cell. */
  position: relative;
  border-radius: var(--r-sm);
  border-color: var(--border-strong);
  background:
    linear-gradient(180deg, rgba(124, 224, 255, 0.04), transparent 22%),
    var(--bg-elevated);
  box-shadow:
    inset 0 0 0 1px rgba(124, 224, 255, 0.05),
    0 1px 0 rgba(255, 255, 255, 0.03),
    0 10px 26px rgba(0, 0, 0, 0.5);
  /* Reserve the top seam height so the holo strip never overlaps the
     image/overlay region. */
  padding-top: 4px;
  transition: border-color 0.18s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
/* Holographic top seam — the signature prism strip across the slab cap. */
.card.card-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 3;
  background: linear-gradient(
    90deg,
    #7CE0FF 0%,
    #5CD1F0 18%,
    #B07CF6 50%,
    #D8A0F2 64%,
    #E6C068 100%
  );
  background-size: 200% 100%;
  opacity: 0.92;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.card.card-tile:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(124, 224, 255, 0.1),
    0 0 0 1px rgba(124, 224, 255, 0.12),
    0 16px 36px rgba(0, 0, 0, 0.55);
}
.card.card-tile:hover::before { opacity: 1; }
/* Expanded slab drops the seam/holder framing so the details panel can
   take over the full width cleanly (matches the existing expanded rule). */
.card.card-tile.expanded { padding-top: 0; }
.card.card-tile.expanded::before { display: none; }
.card.card-tile.expanded::after { display: none; }

/* The recessed "holder" window — the image sits inside an inset frame
   with an inner shadow + a hairline inner lip, so the card looks set back
   inside the plastic rather than printed flush on the surface. */
.card.card-tile > .card-tile-img {
  /* The slab body padding forms the holder margin around the window. */
  margin: 0 7px;
  border: 1px solid var(--border);
  background: var(--bg-sunken);
  /* Inset shadow = the recessed well of the holder; the faint top
     highlight is the light catching the plastic lip. */
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    0 -1px 0 rgba(255, 255, 255, 0.04);
}
/* The card image squares off inside the holder window. */
.card.card-tile > .card-tile-img .card-image {
  border-radius: 0;
}
/* Bottom edge of the holder window — a thin archival lip dividing the
   slab window from the label foot below. */
.card.card-tile > .card-tile-foot {
  margin: 0 7px 7px;
  border-top: 1px solid var(--border-strong);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(124, 224, 255, 0.04);
}

/* Price chip gets a faint holo lift so the comp number reads as the
   slab's grade/value badge (kept subtle — does not touch layout). */
.card.card-tile .card-tile-price-overlay .price-tag {
  box-shadow:
    0 0 0 1px rgba(124, 224, 255, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.45);
}


/* ─── Membership polish — ported from Scout ───────────────────────
   2-lane structure (Personal / Professional) with editorial section
   heads, log-free single-line price ladder, per-card tier-rank chip,
   distinct visual language for Popular vs Flagship anchors. */

.plans-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.plans-lane-head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 2px 2px;
  border-top: 1px solid var(--border);
}
.plans-lane-head:first-child { border-top: 0; padding-top: 4px; }
.plans-lane-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.plans-lane-rule {
  height: 1px;
  background: linear-gradient(90deg, var(--border-strong), transparent);
}
.plans-lane-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.plan-rank {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.plan-card.is-popular .plan-rank,
.plan-card.is-flagship .plan-rank { color: var(--accent); }
.plan-card.is-flagship .plan-rank { font-weight: 800; }

.plans-ladder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.6;
}
.plans-ladder-step { color: var(--soft); transition: color 120ms; }
.plans-ladder-step.is-anchor { color: var(--accent); }
.plans-ladder-sep { color: var(--border-strong); font-weight: 400; }

/* Treat the original "recommended" class as popular (Pro). */
.plan-card.is-popular {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(124, 224, 255, 0.08), var(--bg-elevated) 44%);
  box-shadow: 0 0 0 1px var(--accent), 0 14px 36px rgba(0, 0, 0, 0.45), 0 0 30px rgba(124, 224, 255, 0.10);
}

/* Flagship (Mogul) — distinct treatment: corner-bracket frame +
   diagonal corner stamp + outlined CTA, no glow. */
.plan-card.is-flagship {
  border-color: var(--accent);
  box-shadow:
    inset 0 0 0 1px rgba(124, 224, 255, 0.08),
    0 14px 36px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.plan-card.is-flagship::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(var(--accent), var(--accent)) top    left  / 14px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top    left  / 2px 14px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 2px 14px no-repeat;
}
.plan-card.is-flagship .plan-pick {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.plan-card.is-flagship .plan-pick:hover:not(:disabled) {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.plan-stamp {
  position: absolute;
  top: 14px;
  right: -42px;
  transform: rotate(45deg);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 44px;
  box-shadow: 0 2px 12px rgba(124, 224, 255, 0.32);
  z-index: 1;
}
.plan-stamp span { opacity: 0.65; margin-right: 4px; letter-spacing: 0; }

@media (max-width: 1040px) {
  .plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .plans-lane-sub { display: none; }
}
@media (max-width: 560px) {
  .plans-grid { grid-template-columns: 1fr !important; }
}

/* -- Phone density pass (<=520) — ported from Scout: two-up cards on phones, so
   scale the overlay chrome down so two tiles read clean rather than cramped. -- */
@media (max-width: 520px) {
  .trending-grid { gap: 8px; }
  .drop-card-foot { padding: 7px 8px; }
  .drop-name { font-size: 12.5px; }
  .drop-colorway { font-size: 10.5px; }
  .drop-price-float { font-size: 13px; padding: 1px 5px; top: 6px; right: 6px; }
  .drop-chip { font-size: 9px; padding: 3px 6px; top: 6px; left: 6px; }
  .drop-card-img-wrap .drop-countdown { font-size: 9px; padding: 3px 6px; bottom: 6px; left: 6px; gap: 5px; }
  .drop-card-img-wrap .drop-countdown::before { width: 4px; height: 4px; }
  .daily-card-foot { padding: 7px 8px; }
  .daily-name { font-size: 12.5px; }
  .daily-colorway { font-size: 10.5px; }
  .daily-price { font-size: 12px; }
  .daily-cat { font-size: 9px; }
  .trending-card-foot { padding: 7px 8px; }
  .trending-title { font-size: 12.5px; }
  .trending-price { font-size: 12px; }
}