/* ============================================================
   KRAZYBUY — PRODUCTION STYLESHEET
   One token system · one background · dark default, light override
   ============================================================ */

/* ============ TOKENS ============ */
:root {
  /* Backgrounds */
  --bg:            #07080D;
  --surface:       #11131A;
  --surface-2:     #171A24;
  --surface-3:     #1E2130;

  /* Borders */
  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);

  /* Text */
  --text:          #F4F5F9;
  --muted:         #8F97AA;
  --subtle:        #606779;

  /* Brand accent */
  --accent:        #8B5CF6;
  --accent-dark:   #6D28D9;
  --accent-light:  rgba(139,92,246,.12);
  --accent-glow:   rgba(139,92,246,.22);

  /* Semantic */
  --green:         #22C55E;
  --green-bg:      rgba(34,197,94,.12);
  --red:           #EF4444;
  --red-bg:        rgba(239,68,68,.12);
  --yellow:        #F59E0B;
  --yellow-bg:     rgba(245,158,11,.12);
  --blue:          #38BDF8;

  /* JS compatibility aliases — app.js sets --ring-color from these. DO NOT REMOVE. */
  --kb-green:      #22C55E;
  --kb-skin:       #8B5CF6;
  --kb-red:        #EF4444;

  /* Radius */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm:     0 4px 14px rgba(0,0,0,.18);
  --shadow-md:     0 12px 36px rgba(0,0,0,.24);
  --shadow-lg:     0 24px 72px rgba(0,0,0,.28);
  --shadow-accent: 0 10px 32px rgba(109,40,217,.28);

  /* Topbar */
  --topbar-h:  60px;
  --topbar-bg: rgba(7,8,13,.84);

  /* Sidebar */
  --sidebar-w: 284px;
}

/* ============ RESET + BASE ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; min-height: 100%; }

body {
  font-family: 'Inter var', Inter, system-ui, sans-serif;
  font-weight: 420;
  letter-spacing: -0.01em;
  line-height: 1.65;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  background:
    radial-gradient(circle at 14% 0%, rgba(124,58,237,.11), transparent 32%),
    radial-gradient(circle at 92% 8%, rgba(56,189,248,.07), transparent 26%),
    radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1.2px),
    linear-gradient(180deg, #07080D 0%, #090B12 50%, #07080D 100%);
  background-size: auto, auto, 22px 22px, auto;
}

button { font: inherit; cursor: pointer; }
input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.container { max-width: 1180px; margin: 0 auto; padding: 32px 24px 72px; }

/* Overflow containment */
#home > *, #results, .results-grid, .col-left, .col-right,
.panel, .hero-card, .search-card { min-width: 0; }
.market-row, .thumb-row, .table-wrap { max-width: 100%; }
.search-card input { min-width: 0; }

/* ============ TOPBAR ============ */
.topbar {
  position: sticky; top: 0; z-index: 100;
  height: var(--topbar-h);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1180px; margin: 0 auto; height: var(--topbar-h);
  padding: 0 24px;
  display: flex; align-items: center; gap: 16px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; text-decoration: none; color: inherit;
  margin-right: auto;
}
.brand-copy { line-height: 1.15; min-width: 0; }
.brand-copy strong {
  display: block; font-size: 16px; font-weight: 800; letter-spacing: -0.025em;
  color: var(--text);
}
.brand-copy span {
  display: block; font-size: 9.5px; color: var(--muted);
  letter-spacing: 0.09em; text-transform: uppercase; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* KB monogram — the gradient IS the brand; never solid black */
.logomark.kb-monogram {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(135deg, #8B5CF6 0%, #5B21B6 60%, #1D4ED8 100%);
  box-shadow: 0 8px 26px rgba(109,40,217,.30), inset 0 1px 0 rgba(255,255,255,.16);
  color: #ffffff; font-size: 11px; font-weight: 900; letter-spacing: -0.06em;
  display: grid; place-items: center; flex: none;
  user-select: none; -webkit-user-select: none;
}

.menu-btn {
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface);
  display: grid; place-items: center; gap: 4px; padding: 9px;
  transition: border-color 160ms;
}
.menu-btn span {
  display: block; width: 16px; height: 2px; border-radius: 99px;
  background: var(--text);
}
.menu-btn:hover { border-color: var(--border-strong); }
.menu-btn[aria-expanded="true"] {
  border-color: rgba(139,92,246,.55);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.topbar-right { display: flex; align-items: center; gap: 12px; flex: none; }

.icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); display: grid; place-items: center;
  transition: background 160ms;
}
.icon-btn:hover { background: var(--surface-2); }
html:not(.theme-light) .icon-moon { display: none; }
html.theme-light .icon-sun { display: none; }

.kbd-hint { font-size: 11.5px; color: var(--muted); }
.kbd-hint kbd {
  font-family: inherit; border: 1px solid var(--border); border-radius: 5px;
  padding: 1px 6px; font-size: 10.5px; background: var(--surface);
}

.demo-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--accent-light); color: #C4B5FD;
}

.health { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); }
.health-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); flex: none; }
.health-dot.online {
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-bg), 0 0 10px rgba(34,197,94,.28);
}
.health-dot.offline { background: var(--red); box-shadow: 0 0 0 3px var(--red-bg); }

.product-model-badge,
.result-page-model {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text); font-weight: 600;
}
.product-model-badge strong,
.result-page-model strong { color: var(--text); font-weight: 800; letter-spacing: .01em; }
.product-model-badge span:last-child,
.result-page-model span:last-child { color: var(--muted); }
.retzo-chip-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block;
  background: var(--accent); box-shadow: 0 0 8px var(--accent-glow);
}

/* ============ SIDEBAR ============ */
.sidebar {
  position: fixed; z-index: 180; top: 0; bottom: 0; left: 0;
  width: var(--sidebar-w);
  display: flex; flex-direction: column; padding: 16px 14px;
  background: rgba(10,12,18,.97);
  border-right: 1px solid var(--border);
  box-shadow: 24px 0 80px rgba(0,0,0,.22);
  transform: translateX(-101%);
  transition: transform .24s ease;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.sidebar.open { transform: translateX(0); }
.sidebar-overlay {
  position: fixed; inset: 0; z-index: 170;
  background: rgba(0,0,0,.52); backdrop-filter: blur(2px);
}

.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 16px; }
.sidebar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sidebar-mark {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 900; letter-spacing: -.05em; color: #fff;
  background: linear-gradient(135deg, #8B5CF6, #4C1D95 70%, #1D4ED8);
  box-shadow: 0 10px 28px rgba(124,58,237,.25);
  user-select: none; -webkit-user-select: none;
}
.sidebar-brand strong { display: block; font-size: 14px; color: var(--text); }
.sidebar-brand span {
  display: block; color: var(--muted); font-size: 9px;
  letter-spacing: .08em; text-transform: uppercase;
}
.sidebar-close {
  width: 32px; height: 32px; border: 0; background: transparent;
  color: var(--muted); font-size: 24px; line-height: 1;
}
.sidebar-close:hover { color: var(--text); }

.new-comparison {
  width: 100%; display: flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 11px 13px;
  border: 1px solid rgba(139,92,246,.26); border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(56,189,248,.07));
  color: var(--text); font-weight: 700; text-align: left;
  transition: border-color 160ms, transform 160ms;
}
.new-comparison:hover { border-color: rgba(139,92,246,.5); transform: translateY(-1px); }
.new-plus { font-size: 18px; line-height: 1; }
.new-comparison kbd {
  margin-left: auto; font-size: 9px; color: var(--muted);
  border: 1px solid var(--border); padding: 2px 5px; border-radius: 5px;
  background: rgba(255,255,255,.035);
}

.sidebar-section-title {
  margin: 22px 7px 8px; color: var(--subtle);
  font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}

.history-list { min-height: 0; overflow: auto; padding-right: 2px; scrollbar-width: thin; }
.history-group + .history-group { margin-top: 12px; }
.history-group-title { margin: 0 7px 5px; font-size: 10px; font-weight: 700; color: var(--subtle); }
.history-item {
  width: 100%; display: grid; grid-template-columns: 30px 1fr auto 18px;
  gap: 9px; align-items: center; padding: 8px 7px; min-height: 48px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--text); background: transparent; text-align: left;
}
.history-item:hover { background: rgba(255,255,255,.04); border-color: var(--border); }
.history-thumb {
  width: 30px; height: 30px; border-radius: 8px; overflow: hidden;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--accent);
  font-size: 8px; font-weight: 900;
}
.history-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.history-main { min-width: 0; }
.history-main strong {
  display: block; font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.history-main span {
  display: block; margin-top: 1px; color: var(--subtle); font-size: 9.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.history-price { color: var(--text); font-size: 10px; font-weight: 700; }
.history-more {
  width: 18px; height: 18px; display: grid; place-items: center;
  color: var(--subtle); font-size: 14px; opacity: 0; transition: opacity 140ms;
}
.history-item:hover .history-more { opacity: 1; }
.history-more:hover { color: var(--red); }
.history-empty { padding: 22px 10px; color: var(--subtle); text-align: center; }
.history-empty span { display: block; font-size: 24px; color: var(--accent); margin-bottom: 5px; }
.history-empty p { font-size: 11px; color: var(--muted); }
.history-empty small { display: block; font-size: 9.5px; margin-top: 3px; }

.sidebar-spacer { flex: 1; }
.sidebar-account {
  display: flex; align-items: center; gap: 9px; padding: 10px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: rgba(255,255,255,.03);
}
.account-avatar {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: var(--surface-2); color: #A78BFA; font-size: 9px; font-weight: 900;
  user-select: none; -webkit-user-select: none;
}
.account-copy { min-width: 0; flex: 1; }
.account-copy strong { display: block; font-size: 11px; color: var(--text); }
.account-copy span { display: block; font-size: 9px; color: var(--subtle); margin-top: 1px; }
.account-action {
  width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 8px;
  background: rgba(255,255,255,.03); color: var(--text);
}

/* ============ HOME — HERO ============ */
#home { width: 100%; }
.hero { max-width: 860px; margin: 0 auto; padding-top: 13vh; position: relative; }
.hero::before {
  content: '';
  position: absolute; width: 320px; height: 320px; left: -110px; top: -120px;
  background: radial-gradient(circle, rgba(139,92,246,.13), transparent 68%);
  pointer-events: none; filter: blur(8px); opacity: .6;
}

.eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.hero h1 {
  font-size: clamp(46px, 6.5vw, 78px); font-weight: 800;
  letter-spacing: -0.045em; line-height: 1.04; margin-bottom: 18px;
  color: var(--text);
}
.hero h1 span {
  background: linear-gradient(100deg, #A78BFA 0%, #818CF8 44%, #38BDF8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.subline {
  font-size: 15.5px; color: var(--muted); max-width: 600px;
  line-height: 1.68; margin-bottom: 30px;
}

.anim-1, .anim-2, .anim-3, .anim-4 { animation: fadeUp 400ms cubic-bezier(.2,.7,.3,1) both; }
.anim-2 { animation-delay: 80ms; }
.anim-3 { animation-delay: 160ms; }
.anim-4 { animation-delay: 240ms; }

/* ============ HOME — SEARCH ============ */
.search-card {
  display: flex; align-items: center; gap: 12px; position: relative;
  background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-xl);
  padding: 10px 10px 10px 20px;
  box-shadow: var(--shadow-md);
  transition: border-color 200ms, box-shadow 200ms;
}
.search-card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-light), var(--shadow-md);
}
.search-icon { color: var(--muted); flex: none; }
.search-card input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 15px; color: var(--text);
}
.search-card input::placeholder { color: var(--subtle); }
.slash-hint {
  position: absolute; right: 190px; top: -26px;
  font-size: 12px; color: var(--accent);
  opacity: 0; transition: opacity 300ms; pointer-events: none;
}
.slash-hint.show { opacity: 1; }

.btn-primary {
  height: 48px; padding: 0 26px; border: none; border-radius: var(--r-md);
  background: linear-gradient(135deg, #8B5CF6, #6D28D9); color: #fff;
  font-weight: 700; letter-spacing: -0.01em; white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 10px 28px rgba(109,40,217,.28);
  transition: transform 180ms, box-shadow 180ms;
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(109,40,217,.36);
}
.btn-primary:disabled { opacity: .7; cursor: default; }
.btn-loading { display: flex; align-items: center; gap: 8px; }
.spinner {
  width: 14px; height: 14px; display: inline-block;
  border: 2px solid rgba(255,255,255,.3); border-top-color: currentColor;
  border-radius: 50%; animation: spin 700ms linear infinite;
}
.url-error { color: var(--red); font-size: 13px; margin-top: 10px; }

.assurance {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 14px; font-size: 12px; font-weight: 600; color: var(--muted);
}
.assurance i { color: var(--subtle); font-style: normal; }

/* ============ HOME — MARKETPLACES ============ */
.marketplaces { max-width: 860px; margin: 44px auto 0; }
.section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
}
.market-row {
  display: flex; gap: 9px; overflow-x: auto; padding: 4px 2px;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.market-row::-webkit-scrollbar { display: none; }
.market-chip {
  display: flex; align-items: center; gap: 7px; flex: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 7px 13px 7px 8px;
  font-size: 12.5px; font-weight: 600; color: var(--text);
  transition: box-shadow 160ms, transform 160ms;
}
.market-chip:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.chip-fav { width: 20px; height: 20px; border-radius: 50%; object-fit: contain; }

/* ============ STORE LOGOS ============ */
.store-mono {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border);
  font-size: 10px; font-weight: 700;
  display: inline-grid; place-items: center; flex: none;
  user-select: none; -webkit-user-select: none;
}
.store-mono.sm { width: 20px; height: 20px; font-size: 8px; }
.store-mono.lg { width: 36px; height: 36px; font-size: 11px; }
.store-logo-wrap {
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex: none;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: inline-grid; place-items: center;
}
.store-logo-wrap.lg { width: 36px; height: 36px; }
.store-logo {
  width: 18px; height: 18px; max-width: 18px; max-height: 18px;
  object-fit: contain;
}
.store-logo.lg,
.store-logo-wrap.lg .store-logo {
  width: 24px; height: 24px; max-width: 24px; max-height: 24px;
}

/* ============ HOME — VALUE CARDS ============ */
.home-value-grid {
  max-width: 960px; margin: 36px auto 0;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px;
}
.value-card {
  min-width: 0; padding: 18px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.value-card-main { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 13px; }
.value-icon {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--accent-light); border: 1px solid rgba(139,92,246,.22);
  color: #C4B5FD; font-size: 10px; font-weight: 900;
}
.value-kicker {
  display: block; color: #A78BFA; font-size: 9px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px;
}
.value-card h2, .value-card h3 {
  color: var(--text); font-weight: 750; letter-spacing: -.025em; line-height: 1.25;
}
.value-card h2 { font-size: 17px; }
.value-card h3 { font-size: 15px; }
.value-card p { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* ============ HOME — HOW IT WORKS ============ */
.how-section {
  max-width: 960px; margin: 36px auto 0; padding: 20px;
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: rgba(255,255,255,.018);
}
.how-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.how-head > div { min-width: 0; }
.how-head h3 { margin-top: 3px; color: var(--text); font-size: 16px; letter-spacing: -.02em; }
.how-pill {
  flex: none; padding: 5px 10px; border-radius: var(--r-pill);
  border: 1px solid rgba(56,189,248,.18); background: rgba(56,189,248,.06);
  color: #7DD3FC; font-size: 9px; font-weight: 800;
}
.how-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.how-step {
  min-width: 0; padding: 14px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border);
}
.how-step > span {
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 8px; margin-bottom: 9px;
  background: var(--accent-light); border: 1px solid rgba(139,92,246,.18);
  color: #C4B5FD; font-size: 10px; font-weight: 900;
}
.how-step strong { display: block; color: var(--text); font-size: 12px; line-height: 1.35; }
.how-step p { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.55; }

/* ============ LOADING ============ */
.progress-panel {
  position: relative; max-width: 500px; margin: 40px auto;
  padding: 40px 0; text-align: center;
  animation: fadeUp 300ms both;
}
.progress-timer {
  position: absolute; top: 0; right: 0;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.product-progress-visual {
  width: min(520px, 86vw); height: 2px; margin: 32px auto 18px;
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.08); border-radius: var(--r-pill);
}
.product-progress-visual span {
  position: absolute; inset: 0 auto 0 -40%; width: 40%;
  background: linear-gradient(90deg, transparent, #8B5CF6, #38BDF8, transparent);
  animation: searchProgressLine 1.6s ease-in-out infinite;
}
.progress-below { margin-top: 28px; }
.progress-track {
  height: 3px; background: var(--surface-2);
  border-radius: var(--r-pill); overflow: hidden;
}
.progress-fill {
  height: 100%; width: 7%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, #7C3AED, #8B5CF6, #38BDF8);
  transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-message {
  margin-top: 16px; font-size: 14px; color: var(--text); min-height: 24px;
}
.step-pills {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-top: 16px;
}
.step-pills li {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--border);
  transition: background 300ms, color 300ms;
}
.step-pills li.active { background: var(--accent-light); color: #C4B5FD; border-color: rgba(139,92,246,.24); }
.step-pills li.done { background: #111; color: #fff; border-color: transparent; }
.progress-sub { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 12px; }

/* ============ ERROR ============ */
.error-panel {
  max-width: 560px; margin: 40px auto; padding: 28px;
  border-radius: var(--r-xl);
  background: var(--red-bg); border: 1px solid rgba(239,68,68,.22);
  animation: fadeUp 300ms both;
}
.error-panel h3 { color: var(--red); font-weight: 700; margin-bottom: 8px; }
.error-panel p { font-size: 14px; color: var(--red); opacity: .85; }
.btn-secondary {
  margin-top: 16px; padding: 10px 20px; border-radius: var(--r-md);
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font-weight: 600;
  transition: background 160ms;
}
.btn-secondary:hover { background: var(--surface-2); }

/* ============ RESULTS — HEADER ============ */
#results { animation: fadeUp 350ms both; }

.product-page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 0; margin-bottom: 8px;
  position: relative; z-index: 2;
}
.result-back {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; padding: 8px 0;
  color: var(--muted); font-size: 13px; font-weight: 650;
  transition: color 150ms;
}
.result-back:hover { color: var(--text); }

.result-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin: 24px 0 18px; position: relative; z-index: 2;
}
.result-title-wrap { min-width: 0; }
.result-kicker {
  margin-bottom: 6px; color: var(--subtle);
  font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.result-header h2 {
  font-size: clamp(26px, 3.5vw, 40px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.1; color: var(--text);
}
.variant-line { font-size: 13px; color: var(--muted); margin-top: 5px; }
.result-header-meta { display: flex; align-items: center; gap: 10px; flex: none; }
.elapsed-badge {
  flex: none; padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--muted);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.result-new-btn {
  padding: 8px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text);
  font-size: 12px; font-weight: 700; white-space: nowrap;
  transition: background 160ms;
}
.result-new-btn:hover { background: var(--surface-2); }

/* ============ RESULTS — HERO CARD ============ */
.hero-card {
  display: grid; grid-template-columns: 240px 1fr 250px; gap: 24px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 24px;
  box-shadow: var(--shadow-md);
}

.img-zone { min-width: 0; }
.img-box {
  aspect-ratio: 1; border-radius: var(--r-lg);
  background: var(--surface-2); border: 1px solid var(--border);
  overflow: hidden; display: grid; place-items: center;
}
.img-box img { width: 100%; height: 100%; object-fit: contain; padding: 12px; cursor: zoom-in; }
.img-fallback { color: var(--subtle); }
.thumb-row { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; scrollbar-width: none; }
.thumb-row::-webkit-scrollbar { display: none; }
.thumb-row button {
  width: 48px; height: 48px; flex: none; border-radius: 8px; padding: 3px;
  border: 1.5px solid var(--border); background: var(--surface);
}
.thumb-row button.active { border-color: var(--accent); }
.thumb-row img { width: 100%; height: 100%; object-fit: contain; }
.btn-tertiary {
  background: none; border: none; color: #A78BFA;
  font-size: 12.5px; font-weight: 650; margin-top: 8px; padding: 4px 0;
  text-decoration: underline; text-underline-offset: 3px;
}

.info-zone { min-width: 0; }
.brand-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.info-zone h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--text); }
.model-line { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.chip {
  font-size: 11.5px; font-weight: 650; padding: 4px 11px;
  border-radius: var(--r-sm); background: var(--surface-2); color: var(--muted);
}
.chip.accent { background: var(--accent-light); color: #C4B5FD; }
.rating-line { font-size: 13px; color: var(--text); }
.rating-line strong { font-weight: 600; }
.desc-short {
  font-size: 13px; color: var(--muted); margin: 8px 0 16px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.price-block { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price-block strong { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); }
.price-block s { color: var(--subtle); font-size: 15px; }
.savings-pill {
  font-size: 12px; font-weight: 700; padding: 3px 10px;
  border-radius: var(--r-pill); background: var(--green-bg); color: var(--green);
}
.prices-checked { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ============ RESULTS — BEST PRICE CARD ============ */
/* Always dark — the conversion anchor. Stays dark in light mode too. */
.bp-card {
  background: linear-gradient(145deg, #0D0F18, #131624 70%, #1A1D30);
  border: 1px solid rgba(139,92,246,.22);
  border-radius: var(--r-lg); padding: 22px;
  box-shadow: 0 18px 54px rgba(0,0,0,.24), 0 0 0 1px rgba(139,92,246,.06);
}
.bp-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: rgba(255,255,255,.48); margin-bottom: 6px;
}
.bp-amount {
  font-size: 38px; font-weight: 800; letter-spacing: -0.04em;
  display: block; margin: 6px 0; color: #fff;
}
.bp-store {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px; color: rgba(255,255,255,.72);
}
.bp-store .store-mono { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.14); }
.avail-dot { width: 7px; height: 7px; border-radius: 50%; }
.avail-dot.ok { background: #4ADE80; }
.avail-dot.no { background: #F87171; }
.avail-dot.unk { background: rgba(255,255,255,.35); }
.avail-text { font-size: 12px; color: rgba(255,255,255,.6); }
.bp-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bp-badges .mini { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
.bp-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.bp-open {
  display: block; text-align: center;
  background: #fff; color: #111827; text-decoration: none;
  border-radius: var(--r-md); padding: 12px;
  font-weight: 700; font-size: 13.5px;
  transition: background 180ms, transform 160ms;
}
.bp-open:hover { background: #F3F0FF; transform: translateY(-1px); }
.bp-copy {
  background: transparent; border: 1px solid rgba(255,255,255,.20);
  color: rgba(255,255,255,.80); border-radius: var(--r-md);
  padding: 10px; font-size: 13px; font-weight: 600; width: 100%;
  transition: border-color 200ms;
}
.bp-copy:hover { border-color: rgba(255,255,255,.42); }
.bp-share {
  background: none; border: none; color: rgba(255,255,255,.50);
  font-size: 12px; margin-top: 8px; width: 100%;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ============ RESULTS — STATS ============ */
.stats-strip {
  display: grid; grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 10px; margin: 12px 0;
}
.stat {
  min-width: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px 18px;
}
.stat span {
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
  display: block; margin-bottom: 4px;
}
.stat strong {
  font-size: 22px; font-weight: 750; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--text);
}

/* ============ RESULTS — GRID + PANELS ============ */
.results-grid {
  display: grid; grid-template-columns: 1.55fr 1fr;
  gap: 12px; align-items: start;
}
.col-left, .col-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.col-right { position: sticky; top: 72px; }

.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 20px 22px;
}
.panel-head { display: flex; align-items: center; gap: 10px; }
.panel-head h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.panel-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.empty { color: var(--muted); font-size: 13px; padding: 14px 0; }
.count-badge {
  font-size: 11px; font-weight: 700; padding: 3px 10px;
  border-radius: var(--r-pill); background: var(--surface-2); color: var(--muted);
}

/* Secondary panels are visually quieter */
#rangePanel, #savingsPanel, #specsPanel, #overviewPanel,
#detailsPanel, #timingPanel, #trustPanel { box-shadow: none; }
#rangePanel .panel-head h3, #savingsPanel .panel-head h3,
#specsPanel .panel-head h3, #overviewPanel .panel-head h3,
#timingPanel .panel-head h3, #trustPanel .panel-head h3 {
  font-size: 14px; color: var(--muted); font-weight: 650;
}

/* ============ RESULTS — OFFERS ============ */
.offers-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.offer {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto auto;
  gap: 13px; align-items: center;
  padding: 13px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface-2);
  transition: box-shadow 180ms, transform 180ms;
  animation: fadeUp 300ms ease both;
}
.offer:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.offer.best {
  background: rgba(139,92,246,.10);
  border-color: rgba(139,92,246,.28);
  box-shadow: 0 4px 16px rgba(109,40,217,.12);
}
.offer-main { min-width: 0; }
.offer-store { font-size: 13px; font-weight: 700; color: var(--text); }
.offer-seller { font-size: 11px; color: var(--muted); }
.offer-title {
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.badge-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.mini {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--muted);
}
.mini.ok   { background: var(--green-bg); color: var(--green); }
.mini.warn { background: var(--yellow-bg); color: var(--yellow); }
.mini.best { background: #111; color: #fff; }
.conf-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.conf-dot.high   { background: var(--green); }
.conf-dot.medium { background: var(--yellow); }
.conf-dot.review { background: var(--red); }
.offer-price { text-align: right; }
.offer-price strong { font-size: 17px; font-weight: 750; display: block; color: var(--text); }
.offer-price s { font-size: 12px; color: var(--subtle); }
.offer-open {
  font-size: 12px; font-weight: 700; color: var(--text); text-decoration: none;
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  padding: 7px 14px; background: var(--surface); white-space: nowrap;
  transition: transform 160ms, box-shadow 160ms;
}
.offer-open:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* ============ RESULTS — COMPARISON TABLE ============ */
.table-wrap {
  overflow-x: auto; border: 1px solid var(--border);
  border-radius: var(--r-md); margin-top: 14px;
  -webkit-overflow-scrolling: touch;
}
table { border-collapse: collapse; min-width: 680px; width: 100%; font-size: 13px; }
th {
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); text-align: left; padding: 10px 12px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
td {
  padding: 11px 12px; border-bottom: 1px solid var(--border);
  color: var(--text); vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr.best-row { background: rgba(139,92,246,.09); }
.cell-store { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.cell-listing { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono, .mono-note { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ============ RESULTS — SUSPICIOUS ============ */
.panel.suspicious {
  border: 1.5px dashed rgba(245,158,11,.30);
  background: rgba(245,158,11,.04);
}
.excluded-tag {
  display: inline-block; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--yellow-bg); color: var(--yellow);
}
.suspicious-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.suspicious-card {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 12px; border: 1px dashed var(--border); border-radius: var(--r-md);
  background: var(--surface);
}
.sp-title { font-size: 12.5px; color: var(--muted); }
.reason { font-size: 12px; color: var(--yellow); font-weight: 600; margin-top: 3px; }
.sp-price { color: var(--muted); font-size: 15px; }

/* ============ RESULTS — PRICE RANGE ============ */
.range-track {
  position: relative; height: 4px;
  background: var(--surface-2); border-radius: var(--r-pill);
  margin: 24px 6px;
}
.range-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
}
.range-dot {
  position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
  background: var(--text); border: 2.5px solid var(--surface);
  box-shadow: var(--shadow-sm);
  transform: translate(-50%, -50%);
}
.range-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.range-labels strong { display: block; color: var(--text); font-size: 14px; }
.range-labels .c { text-align: center; }
.range-labels .r { text-align: right; }

/* ============ RESULTS — SAVINGS ============ */
.savings-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px; margin-top: 14px;
}
.savings-card {
  padding: 14px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface-2);
}
.savings-card strong { font-size: 14px; display: block; color: var(--text); }
.savings-card span { font-size: 13px; color: var(--muted); }
.savings-card .pct { font-size: 16px; font-weight: 750; color: var(--green); margin-top: 4px; }

/* ============ RESULTS — SPECS + OVERVIEW + DETAILS ============ */
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 12px; }
.spec-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12.5px; padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.spec-row dt { color: var(--muted); }
.spec-row dd { font-weight: 550; text-align: right; word-break: break-word; color: var(--text); }
.spec-row dd a { color: #A78BFA; }

.desc-full {
  font-size: 13px; color: var(--muted); line-height: 1.7;
  white-space: pre-line; margin-top: 10px;
}
.desc-full.clamped {
  display: -webkit-box; -webkit-line-clamp: 5;
  -webkit-box-orient: vertical; overflow: hidden;
}

.details-panel summary {
  font-size: 13px; font-weight: 650; color: var(--muted); cursor: pointer;
  list-style: none; display: flex; align-items: center;
  justify-content: space-between; padding: 2px 0;
}
.details-panel summary::-webkit-details-marker { display: none; }
.details-panel[open] summary { color: var(--text); margin-bottom: 12px; }

/* ============ RESULTS — RETZ VERDICT ============ */
.retzo-panel {
  border: 1px solid rgba(139,92,246,.26);
  background:
    radial-gradient(circle at 85% 5%, rgba(139,92,246,.11), transparent 38%),
    var(--surface);
  position: relative; overflow: hidden;
}
.retzo-panel::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2.5px;
  background: linear-gradient(90deg, #8B5CF6, #6366F1, #38BDF8, transparent);
}
.retzo-panel .panel-head h3 { color: var(--text); }
.score-row { display: flex; align-items: center; gap: 18px; margin: 16px 0 14px; }
.score-ring {
  --fill: 0deg; --ring-color: var(--accent);
  width: 88px; height: 88px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--ring-color) var(--fill), var(--surface-2) 0);
  display: grid; place-items: center; position: relative;
  box-shadow: 0 8px 28px rgba(79,70,229,.16), 0 0 0 1px var(--border);
}
.score-ring::before {
  content: ''; position: absolute; width: 70px; height: 70px;
  border-radius: 50%; background: var(--surface);
}
.score-ring span { position: relative; font-size: 20px; font-weight: 800; color: var(--text); }

.verdict-badge {
  display: inline-block; font-size: 11px; font-weight: 750; letter-spacing: 0.09em;
  padding: 5px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
}
.verdict-badge.strong  { background: var(--green-bg); color: var(--green); border-color: rgba(34,197,94,.22); }
.verdict-badge.good    { background: var(--accent-light); color: #A78BFA; border-color: rgba(139,92,246,.22); }
.verdict-badge.caution { background: var(--yellow-bg); color: var(--yellow); border-color: rgba(245,158,11,.22); }

.retzo-confidence { font-size: 12px; color: var(--muted); margin-top: 6px; }
.retzo-panel h4 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; color: var(--text); }
.retzo-summary { font-size: 13px; color: var(--muted); line-height: 1.65; }
.retzo-reasons, .retzo-warnings { list-style: none; margin-top: 12px; }
.retzo-reasons li, .retzo-warnings li {
  position: relative; padding-left: 20px;
  font-size: 12.5px; color: var(--text); margin-bottom: 5px;
}
.retzo-reasons li::before { content: '✓'; position: absolute; left: 2px; color: var(--green); font-weight: 700; }
.retzo-warnings li { color: var(--yellow); }
.retzo-warnings li::before { content: '!'; position: absolute; left: 4px; color: var(--yellow); font-weight: 700; }
.retzo-rec {
  padding: 13px; margin-top: 12px;
  background: rgba(139,92,246,.09);
  border: 1px solid rgba(139,92,246,.18);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  font-size: 12.5px; color: var(--muted);
}

/* ============ RESULTS — TIMING + TRUST ============ */
.timing-badge {
  display: inline-block; font-size: 12px; font-weight: 700;
  padding: 6px 14px; border-radius: var(--r-pill); margin-top: 12px;
}
.timing-badge.good { background: var(--green-bg); color: var(--green); }
.timing-badge.bad  { background: var(--red-bg); color: var(--red); }
.timing-badge.mid  { background: var(--yellow-bg); color: var(--yellow); }

.trust-list { display: flex; flex-direction: column; margin-top: 10px; }
.trust-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.trust-row:last-child { border-bottom: none; }
.t-copy strong { font-size: 13px; display: block; color: var(--text); }
.t-copy span { font-size: 11.5px; color: var(--muted); }

/* ============ RESULTS — SYSTEM STRIP ============ */
.system-strip { margin-top: 20px; }
.system-card {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 16px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: rgba(255,255,255,.02);
  color: var(--muted); font-size: 11.5px;
}
.system-divider { opacity: .4; }

/* ============ RESULTS — DIAGNOSTICS ============ */
.debug-panel pre {
  max-height: 420px; overflow: auto; padding: 16px;
  border-radius: var(--r-md); background: #08090D; color: #B4BCCC;
  font: 11.5px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============ PRODUCT ORBIT + PRODUCT MENU ============ */
.product-retz-orbit {
  position: fixed; top: 86px; right: 24px; width: 112px; height: 112px;
  z-index: 1; pointer-events: none; opacity: .65;
}
.product-retz-orbit-ring {
  position: absolute; inset: 10px;
  border: 1px solid rgba(139,92,246,.20); border-radius: 50%;
  animation: productOrbitSpin 14s linear infinite;
}
.product-retz-orbit-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; }
.product-retz-orbit .dot-a {
  top: 9px; left: 53px;
  background: #A78BFA; box-shadow: 0 0 10px rgba(167,139,250,.85);
}
.product-retz-orbit .dot-b {
  bottom: 15px; right: 17px;
  background: #38BDF8; box-shadow: 0 0 10px rgba(56,189,248,.75);
}
.product-retz-line {
  position: absolute; left: 5px; right: 5px; bottom: 6px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,.6), rgba(56,189,248,.5), transparent);
}
body:not(.product-page-standalone) .product-retz-orbit { display: none; }
.product-container, .product-page-standalone .result-header { position: relative; z-index: 2; }

.product-menu {
  position: fixed; top: 64px; left: 18px; z-index: 220;
  width: min(256px, calc(100vw - 36px));
  padding: 8px; border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: rgba(12,14,20,.97);
  box-shadow: 0 22px 70px rgba(0,0,0,.44);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.product-menu a, .product-menu button {
  width: 100%; display: flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 9px 11px;
  color: var(--text); background: transparent;
  border: none; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 700; text-decoration: none; text-align: left;
  transition: background 160ms;
}
.product-menu a:hover, .product-menu button:hover { background: var(--accent-light); }

/* ============ LIGHTBOX ============ */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(3,4,8,.88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: grid; place-items: center;
}
.lightbox img {
  max-width: 92vw; max-height: 88vh; object-fit: contain;
  border-radius: var(--r-lg);
}
.lb-btn {
  position: absolute; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(15,17,24,.80); color: #fff;
  border: 1px solid rgba(255,255,255,.14); font-size: 17px;
  display: grid; place-items: center;
  transition: background 160ms;
}
.lb-btn:hover { background: rgba(30,33,45,.92); }
.lb-close { top: 20px; right: 20px; }
.lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 20px; top: 50%; transform: translateY(-50%); }

/* ============ ANIMATIONS ============ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes productOrbitSpin { to { transform: rotate(360deg); } }
@keyframes searchProgressLine { from { transform: translateX(0); } to { transform: translateX(350%); } }

/* ============ FOCUS + ACCESSIBILITY ============ */
:focus-visible {
  outline: 2.5px solid rgba(139,92,246,.40);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ============ SAFE AREA ============ */
@supports (padding: max(0px)) {
  .topbar-inner {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .container { padding-bottom: max(48px, env(safe-area-inset-bottom)); }
  .sidebar { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}

/* ============ RESPONSIVE — 1060px ============ */
@media (max-width: 1060px) {
  .menu-btn { display: grid; }
  .hero-card { grid-template-columns: 220px 1fr; }
  .bp-card { grid-column: 1 / -1; }
  .results-grid { grid-template-columns: 1fr; }
  .col-right { position: static; }
}

/* ============ RESPONSIVE — 760px ============ */
@media (max-width: 760px) {
  :root { --sidebar-w: min(320px, 86vw); }

  .topbar-inner { padding-inline: 12px; gap: 10px; }
  .topbar-right { gap: 6px; }
  #healthText, .health span:last-child, .kbd-hint { display: none; }
  .product-model-badge span:last-child,
  .result-page-model span:last-child { display: none; }

  .container { padding: 16px 14px 48px; }
  .hero { padding-top: clamp(32px, 9vh, 68px); width: 100%; }
  .hero h1 { font-size: clamp(38px, 12vw, 56px); }
  .hero .subline { font-size: 13.5px; }
  .slash-hint { display: none; }

  .search-card {
    display: grid; grid-template-columns: 20px minmax(0,1fr);
    padding: 10px; gap: 9px;
  }
  .search-icon { align-self: center; }
  .search-card .btn-primary { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .assurance { justify-content: center; font-size: 11px; }

  .hero-card { grid-template-columns: 1fr; padding: 14px; gap: 14px; }
  .img-zone { order: 0; }
  .info-zone { order: 1; }
  .bp-card { order: 2; grid-column: auto; }
  .img-box { width: min(100%, 240px); margin: 0 auto; }

  .result-header { margin: 16px 0 12px; flex-wrap: wrap; }
  .result-header h2 { font-size: clamp(22px, 7vw, 30px); }

  .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat { padding: 12px 14px; }
  .stat strong { font-size: 18px; }

  .offer { grid-template-columns: auto minmax(0,1fr); }
  .offer > .offer-price { grid-column: 2; text-align: left; margin-top: 2px; }
  .offer > .offer-open { grid-column: 2; width: fit-content; justify-self: start; margin-top: 2px; }

  .suspicious-card { grid-template-columns: 1fr auto; }
  .suspicious-card .offer-open { grid-column: 1 / -1; width: fit-content; }

  .system-card { flex-wrap: wrap; justify-content: center; text-align: center; }

  .store-logo { width: 18px; height: 18px; max-width: 18px; max-height: 18px; }

  .product-retz-orbit { width: 84px; height: 84px; top: 68px; right: 10px; opacity: .45; }
  .product-retz-orbit-ring { inset: 6px; }
  .product-retz-orbit .dot-a { top: 6px; left: 38px; }
  .product-retz-orbit .dot-b { bottom: 11px; right: 12px; }

  .lightbox img { max-width: 94vw; max-height: 76vh; }
  .lb-btn { width: 38px; height: 38px; }
  .lb-close { top: 12px; right: 12px; }
  .lb-prev { left: 9px; }
  .lb-next { right: 9px; }
}

/* ============ RESPONSIVE — 640px ============ */
@media (max-width: 640px) {
  .home-value-grid { grid-template-columns: 1fr; gap: 8px; }
  .how-grid { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: 1fr; }
  .savings-grid { grid-template-columns: 1fr; }

  /* Comparison table → stacked cards */
  .table-wrap { border: none; border-radius: 0; overflow: visible; }
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }
  table { min-width: 0; }
  tbody tr {
    display: flex; flex-direction: column; gap: 6px;
    padding: 13px; margin-bottom: 8px;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface-2); position: relative;
  }
  tbody tr.best-row { background: rgba(139,92,246,.09); border-color: rgba(139,92,246,.26); }
  tbody td { padding: 0; border: none; font-size: 12px; color: var(--text); }
  tbody td:nth-child(2) {
    color: var(--muted); font-size: 11px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  tbody td:nth-child(5) { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
  tbody td:nth-child(7) a { margin-top: 4px; }
  .cell-listing { max-width: 100%; }
}

/* ============ RESPONSIVE — 520px ============ */
@media (max-width: 520px) {
  .brand-copy span { max-width: 115px; font-size: 7.5px; }
  .icon-btn { width: 34px; height: 34px; }
  .hero h1 { font-size: clamp(34px, 11vw, 46px); letter-spacing: -.05em; }
  .hero-card { padding: 11px; gap: 10px; }
  .img-box { width: min(100%, 210px); }

  .bp-amount { font-size: 30px; }
  .bp-open, .bp-copy { width: 100%; text-align: center; }
  .bp-actions { gap: 8px; }

  .stat { padding: 10px 11px; }
  .stat strong { font-size: 16px; }
  .stat span { font-size: 7.5px; }

  .score-ring { width: 72px; height: 72px; }
  .score-ring::before { width: 58px; height: 58px; }
  .score-ring span { font-size: 17px; }
  .retzo-panel h4 { font-size: 15px; }
  .retzo-summary { font-size: 12px; }
  .retzo-reasons li, .retzo-warnings li { font-size: 11.5px; }
  .retzo-rec { font-size: 11.5px; padding: 11px; }

  .store-logo {
    width: 16px !important; height: 16px !important;
    max-width: 16px !important; max-height: 16px !important;
  }
  .store-mono, .store-logo-wrap { width: 24px; height: 24px; }
  .store-mono.lg, .store-logo-wrap.lg { width: 30px; height: 30px; }

  .product-retz-orbit { display: none; }
  .panel { padding: 14px 12px; }
}

/* ============ RESPONSIVE — 380px ============ */
@media (max-width: 380px) {
  .topbar-inner { padding-inline: 8px; }
  .brand-copy span { display: none; }
  .brand-copy strong { font-size: 14px; }
  .hero h1 { font-size: 34px; }
  .stats-strip { grid-template-columns: 1fr; }
  .panel { padding: 11px 10px; }
}

/* ============ LIGHT THEME ============ */
html.theme-light {
  --bg:            #F5F7FB;
  --surface:       #FFFFFF;
  --surface-2:     #F1F3F8;
  --surface-3:     #E8EBF2;
  --border:        rgba(15,23,42,.08);
  --border-strong: rgba(15,23,42,.14);
  --text:          #111827;
  --muted:         #667085;
  --subtle:        #9AA3B2;
  --accent-glow:   rgba(109,40,217,.10);
  --topbar-bg:     rgba(245,247,251,.90);
  --green-bg:      rgba(34,197,94,.10);
  --red-bg:        rgba(239,68,68,.10);
  --yellow-bg:     rgba(245,158,11,.10);
  --shadow-sm:     0 4px 14px rgba(15,23,42,.06);
  --shadow-md:     0 12px 30px rgba(15,23,42,.08);
}

html.theme-light body {
  background:
    radial-gradient(circle, rgba(15,23,42,.07) 1px, transparent 1.2px),
    linear-gradient(180deg, #F6F8FC 0%, #EEF2F8 100%);
  background-size: 22px 22px, auto;
  color: var(--text);
}

/* Monogram keeps the brand gradient in light mode */
html.theme-light .logomark.kb-monogram {
  box-shadow: 0 6px 18px rgba(109,40,217,.20), inset 0 1px 0 rgba(255,255,255,.16);
}

html.theme-light .hero h1 span {
  background: linear-gradient(100deg, #7C3AED 0%, #4F46E5 44%, #0284C7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

html.theme-light .panel,
html.theme-light .hero-card,
html.theme-light .stat,
html.theme-light .search-card,
html.theme-light .value-card {
  background: var(--surface); border-color: var(--border);
  box-shadow: 0 12px 30px rgba(15,23,42,.07);
}
html.theme-light .search-card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-light), 0 12px 30px rgba(15,23,42,.07);
}
html.theme-light .how-section { background: rgba(255,255,255,.8); border-color: var(--border); }
html.theme-light .how-step { background: var(--surface-2); border-color: var(--border); }
html.theme-light .system-card { background: rgba(255,255,255,.75); border-color: var(--border); }

html.theme-light .sidebar { background: rgba(255,255,255,.97); border-color: var(--border); }
html.theme-light .sidebar-account,
html.theme-light .history-item:hover { background: rgba(15,23,42,.04); border-color: var(--border); }
html.theme-light .account-action { color: var(--text); background: rgba(15,23,42,.03); }
html.theme-light .new-comparison kbd { background: rgba(15,23,42,.04); }

html.theme-light .menu-btn span { background: #111827; }

html.theme-light .offer { background: var(--surface-2); border-color: var(--border); }
html.theme-light .offer.best { background: rgba(109,40,217,.07); border-color: rgba(109,40,217,.20); }
html.theme-light tr.best-row,
html.theme-light tbody tr.best-row { background: rgba(109,40,217,.06); }
html.theme-light .mini.best { background: #111827; color: #fff; }
html.theme-light .step-pills li.done { background: #111827; color: #fff; }
html.theme-light .demo-badge { color: #6D28D9; }
html.theme-light .value-icon,
html.theme-light .how-step > span { color: #7C3AED; }
html.theme-light .value-kicker { color: #7C3AED; }
html.theme-light .chip.accent { color: #6D28D9; }
html.theme-light .btn-tertiary,
html.theme-light .spec-row dd a { color: #6D28D9; }

html.theme-light .retzo-panel {
  background:
    radial-gradient(circle at 85% 5%, rgba(109,40,217,.07), transparent 38%),
    var(--surface);
  border-color: rgba(109,40,217,.20);
}
html.theme-light .verdict-badge.good { color: #6D28D9; }
html.theme-light .retzo-rec { background: rgba(109,40,217,.07); border-color: rgba(109,40,217,.16); border-left-color: #7C3AED; }
html.theme-light .score-ring { box-shadow: 0 8px 24px rgba(79,70,229,.10), 0 0 0 1px var(--border); }

/* Best price card stays dark in light mode — intentional contrast anchor */
html.theme-light .bp-card {
  background: linear-gradient(145deg, #0D0F18, #131624 70%, #1A1D30);
  border-color: rgba(139,92,246,.28);
}

html.theme-light .product-menu {
  background: rgba(255,255,255,.98);
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 20px 60px rgba(15,23,42,.16);
}
html.theme-light .product-menu a,
html.theme-light .product-menu button { color: #111827; }

html.theme-light .product-retz-orbit { opacity: .52; }
html.theme-light .product-retz-orbit-ring { border-color: rgba(109,40,217,.16); }

html.theme-light .panel.suspicious { border-color: rgba(245,158,11,.22); background: rgba(245,158,11,.04); }
html.theme-light .product-progress-visual { background: rgba(15,23,42,.08); }
html.theme-light .kbd-hint kbd { background: var(--surface); border-color: var(--border-strong); }
html.theme-light .debug-panel pre { background: #0B0D12; }
/* ============================================================
   KRAZYBUY — PRODUCTION STYLESHEET
   One token system · one background · dark default, light override
   ============================================================ */

/* ============ TOKENS ============ */
:root {
  /* Backgrounds */
  --bg:            #07080D;
  --surface:       #11131A;
  --surface-2:     #171A24;
  --surface-3:     #1E2130;

  /* Borders */
  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);

  /* Text */
  --text:          #F4F5F9;
  --muted:         #8F97AA;
  --subtle:        #606779;

  /* Brand accent */
  --accent:        #8B5CF6;
  --accent-dark:   #6D28D9;
  --accent-light:  rgba(139,92,246,.12);
  --accent-glow:   rgba(139,92,246,.22);

  /* Semantic */
  --green:         #22C55E;
  --green-bg:      rgba(34,197,94,.12);
  --red:           #EF4444;
  --red-bg:        rgba(239,68,68,.12);
  --yellow:        #F59E0B;
  --yellow-bg:     rgba(245,158,11,.12);
  --blue:          #38BDF8;

  /* JS compatibility aliases — app.js sets --ring-color from these. DO NOT REMOVE. */
  --kb-green:      #22C55E;
  --kb-skin:       #8B5CF6;
  --kb-red:        #EF4444;

  /* Radius */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm:     0 4px 14px rgba(0,0,0,.18);
  --shadow-md:     0 12px 36px rgba(0,0,0,.24);
  --shadow-lg:     0 24px 72px rgba(0,0,0,.28);
  --shadow-accent: 0 10px 32px rgba(109,40,217,.28);

  /* Topbar */
  --topbar-h:  60px;
  --topbar-bg: rgba(7,8,13,.84);

  /* Sidebar */
  --sidebar-w: 284px;
}

/* ============ RESET + BASE ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; min-height: 100%; }

body {
  font-family: 'Inter var', Inter, system-ui, sans-serif;
  font-weight: 420;
  letter-spacing: -0.01em;
  line-height: 1.65;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  background:
    radial-gradient(circle at 14% 0%, rgba(124,58,237,.11), transparent 32%),
    radial-gradient(circle at 92% 8%, rgba(56,189,248,.07), transparent 26%),
    radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1.2px),
    linear-gradient(180deg, #07080D 0%, #090B12 50%, #07080D 100%);
  background-size: auto, auto, 22px 22px, auto;
}

button { font: inherit; cursor: pointer; }
input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.container { max-width: 1180px; margin: 0 auto; padding: 32px 24px 72px; }

/* Overflow containment */
#home > *, #results, .results-grid, .col-left, .col-right,
.panel, .hero-card, .search-card { min-width: 0; }
.market-row, .thumb-row, .table-wrap { max-width: 100%; }
.search-card input { min-width: 0; }

/* ============ TOPBAR ============ */
.topbar {
  position: sticky; top: 0; z-index: 100;
  height: var(--topbar-h);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1180px; margin: 0 auto; height: var(--topbar-h);
  padding: 0 24px;
  display: flex; align-items: center; gap: 16px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; text-decoration: none; color: inherit;
  margin-right: auto;
}
.brand-copy { line-height: 1.15; min-width: 0; }
.brand-copy strong {
  display: block; font-size: 16px; font-weight: 800; letter-spacing: -0.025em;
  color: var(--text);
}
.brand-copy span {
  display: block; font-size: 9.5px; color: var(--muted);
  letter-spacing: 0.09em; text-transform: uppercase; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* KB monogram — the gradient IS the brand; never solid black */
.logomark.kb-monogram {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(135deg, #8B5CF6 0%, #5B21B6 60%, #1D4ED8 100%);
  box-shadow: 0 8px 26px rgba(109,40,217,.30), inset 0 1px 0 rgba(255,255,255,.16);
  color: #ffffff; font-size: 11px; font-weight: 900; letter-spacing: -0.06em;
  display: grid; place-items: center; flex: none;
  user-select: none; -webkit-user-select: none;
}

.menu-btn {
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface);
  display: grid; place-items: center; gap: 4px; padding: 9px;
  transition: border-color 160ms;
}
.menu-btn span {
  display: block; width: 16px; height: 2px; border-radius: 99px;
  background: var(--text);
}
.menu-btn:hover { border-color: var(--border-strong); }
.menu-btn[aria-expanded="true"] {
  border-color: rgba(139,92,246,.55);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.topbar-right { display: flex; align-items: center; gap: 12px; flex: none; }

.icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); display: grid; place-items: center;
  transition: background 160ms;
}
.icon-btn:hover { background: var(--surface-2); }
html:not(.theme-light) .icon-moon { display: none; }
html.theme-light .icon-sun { display: none; }

.kbd-hint { font-size: 11.5px; color: var(--muted); }
.kbd-hint kbd {
  font-family: inherit; border: 1px solid var(--border); border-radius: 5px;
  padding: 1px 6px; font-size: 10.5px; background: var(--surface);
}

.demo-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--accent-light); color: #C4B5FD;
}

.health { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); }
.health-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); flex: none; }
.health-dot.online {
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-bg), 0 0 10px rgba(34,197,94,.28);
}
.health-dot.offline { background: var(--red); box-shadow: 0 0 0 3px var(--red-bg); }

.product-model-badge,
.result-page-model {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text); font-weight: 600;
}
.product-model-badge strong,
.result-page-model strong { color: var(--text); font-weight: 800; letter-spacing: .01em; }
.product-model-badge span:last-child,
.result-page-model span:last-child { color: var(--muted); }
.retzo-chip-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block;
  background: var(--accent); box-shadow: 0 0 8px var(--accent-glow);
}

/* ============ SIDEBAR ============ */
.sidebar {
  position: fixed; z-index: 180; top: 0; bottom: 0; left: 0;
  width: var(--sidebar-w);
  display: flex; flex-direction: column; padding: 16px 14px;
  background: rgba(10,12,18,.97);
  border-right: 1px solid var(--border);
  box-shadow: 24px 0 80px rgba(0,0,0,.22);
  transform: translateX(-101%);
  transition: transform .24s ease;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.sidebar.open { transform: translateX(0); }
.sidebar-overlay {
  position: fixed; inset: 0; z-index: 170;
  background: rgba(0,0,0,.52); backdrop-filter: blur(2px);
}

.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 16px; }
.sidebar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sidebar-mark {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 900; letter-spacing: -.05em; color: #fff;
  background: linear-gradient(135deg, #8B5CF6, #4C1D95 70%, #1D4ED8);
  box-shadow: 0 10px 28px rgba(124,58,237,.25);
  user-select: none; -webkit-user-select: none;
}
.sidebar-brand strong { display: block; font-size: 14px; color: var(--text); }
.sidebar-brand span {
  display: block; color: var(--muted); font-size: 9px;
  letter-spacing: .08em; text-transform: uppercase;
}
.sidebar-close {
  width: 32px; height: 32px; border: 0; background: transparent;
  color: var(--muted); font-size: 24px; line-height: 1;
}
.sidebar-close:hover { color: var(--text); }

.new-comparison {
  width: 100%; display: flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 11px 13px;
  border: 1px solid rgba(139,92,246,.26); border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(56,189,248,.07));
  color: var(--text); font-weight: 700; text-align: left;
  transition: border-color 160ms, transform 160ms;
}
.new-comparison:hover { border-color: rgba(139,92,246,.5); transform: translateY(-1px); }
.new-plus { font-size: 18px; line-height: 1; }
.new-comparison kbd {
  margin-left: auto; font-size: 9px; color: var(--muted);
  border: 1px solid var(--border); padding: 2px 5px; border-radius: 5px;
  background: rgba(255,255,255,.035);
}

.sidebar-section-title {
  margin: 22px 7px 8px; color: var(--subtle);
  font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}

.history-list { min-height: 0; overflow: auto; padding-right: 2px; scrollbar-width: thin; }
.history-group + .history-group { margin-top: 12px; }
.history-group-title { margin: 0 7px 5px; font-size: 10px; font-weight: 700; color: var(--subtle); }
.history-item {
  width: 100%; display: grid; grid-template-columns: 30px 1fr auto 18px;
  gap: 9px; align-items: center; padding: 8px 7px; min-height: 48px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--text); background: transparent; text-align: left;
}
.history-item:hover { background: rgba(255,255,255,.04); border-color: var(--border); }
.history-thumb {
  width: 30px; height: 30px; border-radius: 8px; overflow: hidden;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--accent);
  font-size: 8px; font-weight: 900;
}
.history-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.history-main { min-width: 0; }
.history-main strong {
  display: block; font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.history-main span {
  display: block; margin-top: 1px; color: var(--subtle); font-size: 9.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.history-price { color: var(--text); font-size: 10px; font-weight: 700; }
.history-more {
  width: 18px; height: 18px; display: grid; place-items: center;
  color: var(--subtle); font-size: 14px; opacity: 0; transition: opacity 140ms;
}
.history-item:hover .history-more { opacity: 1; }
.history-more:hover { color: var(--red); }
.history-empty { padding: 22px 10px; color: var(--subtle); text-align: center; }
.history-empty span { display: block; font-size: 24px; color: var(--accent); margin-bottom: 5px; }
.history-empty p { font-size: 11px; color: var(--muted); }
.history-empty small { display: block; font-size: 9.5px; margin-top: 3px; }

.sidebar-spacer { flex: 1; }
.sidebar-account {
  display: flex; align-items: center; gap: 9px; padding: 10px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: rgba(255,255,255,.03);
}
.account-avatar {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: var(--surface-2); color: #A78BFA; font-size: 9px; font-weight: 900;
  user-select: none; -webkit-user-select: none;
}
.account-copy { min-width: 0; flex: 1; }
.account-copy strong { display: block; font-size: 11px; color: var(--text); }
.account-copy span { display: block; font-size: 9px; color: var(--subtle); margin-top: 1px; }
.account-action {
  width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 8px;
  background: rgba(255,255,255,.03); color: var(--text);
}

/* ============ HOME — HERO ============ */
#home { width: 100%; }
.hero { max-width: 860px; margin: 0 auto; padding-top: 13vh; position: relative; }
.hero::before {
  content: '';
  position: absolute; width: 320px; height: 320px; left: -110px; top: -120px;
  background: radial-gradient(circle, rgba(139,92,246,.13), transparent 68%);
  pointer-events: none; filter: blur(8px); opacity: .6;
}

.eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.hero h1 {
  font-size: clamp(46px, 6.5vw, 78px); font-weight: 800;
  letter-spacing: -0.045em; line-height: 1.04; margin-bottom: 18px;
  color: var(--text);
}
.hero h1 span {
  background: linear-gradient(100deg, #A78BFA 0%, #818CF8 44%, #38BDF8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.subline {
  font-size: 15.5px; color: var(--muted); max-width: 600px;
  line-height: 1.68; margin-bottom: 30px;
}

.anim-1, .anim-2, .anim-3, .anim-4 { animation: fadeUp 400ms cubic-bezier(.2,.7,.3,1) both; }
.anim-2 { animation-delay: 80ms; }
.anim-3 { animation-delay: 160ms; }
.anim-4 { animation-delay: 240ms; }

/* ============ HOME — SEARCH ============ */
.search-card {
  display: flex; align-items: center; gap: 12px; position: relative;
  background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-xl);
  padding: 10px 10px 10px 20px;
  box-shadow: var(--shadow-md);
  transition: border-color 200ms, box-shadow 200ms;
}
.search-card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-light), var(--shadow-md);
}
.search-icon { color: var(--muted); flex: none; }
.search-card input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 15px; color: var(--text);
}
.search-card input::placeholder { color: var(--subtle); }
.slash-hint {
  position: absolute; right: 190px; top: -26px;
  font-size: 12px; color: var(--accent);
  opacity: 0; transition: opacity 300ms; pointer-events: none;
}
.slash-hint.show { opacity: 1; }

.btn-primary {
  height: 48px; padding: 0 26px; border: none; border-radius: var(--r-md);
  background: linear-gradient(135deg, #8B5CF6, #6D28D9); color: #fff;
  font-weight: 700; letter-spacing: -0.01em; white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 10px 28px rgba(109,40,217,.28);
  transition: transform 180ms, box-shadow 180ms;
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(109,40,217,.36);
}
.btn-primary:disabled { opacity: .7; cursor: default; }
.btn-loading { display: flex; align-items: center; gap: 8px; }
.spinner {
  width: 14px; height: 14px; display: inline-block;
  border: 2px solid rgba(255,255,255,.3); border-top-color: currentColor;
  border-radius: 50%; animation: spin 700ms linear infinite;
}
.url-error { color: var(--red); font-size: 13px; margin-top: 10px; }

.assurance {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 14px; font-size: 12px; font-weight: 600; color: var(--muted);
}
.assurance i { color: var(--subtle); font-style: normal; }

/* ============ HOME — MARKETPLACES ============ */
.marketplaces { max-width: 860px; margin: 44px auto 0; }
.section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
}
.market-row {
  display: flex; gap: 9px; overflow-x: auto; padding: 4px 2px;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.market-row::-webkit-scrollbar { display: none; }
.market-chip {
  display: flex; align-items: center; gap: 7px; flex: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 7px 13px 7px 8px;
  font-size: 12.5px; font-weight: 600; color: var(--text);
  transition: box-shadow 160ms, transform 160ms;
}
.market-chip:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.chip-fav { width: 20px; height: 20px; border-radius: 50%; object-fit: contain; }

/* ============ STORE LOGOS ============ */
.store-mono {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border);
  font-size: 10px; font-weight: 700;
  display: inline-grid; place-items: center; flex: none;
  user-select: none; -webkit-user-select: none;
}
.store-mono.sm { width: 20px; height: 20px; font-size: 8px; }
.store-mono.lg { width: 36px; height: 36px; font-size: 11px; }
.store-logo-wrap {
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex: none;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: inline-grid; place-items: center;
}
.store-logo-wrap.lg { width: 36px; height: 36px; }
.store-logo {
  width: 18px; height: 18px; max-width: 18px; max-height: 18px;
  object-fit: contain;
}
.store-logo.lg,
.store-logo-wrap.lg .store-logo {
  width: 24px; height: 24px; max-width: 24px; max-height: 24px;
}

/* ============ HOME — VALUE CARDS ============ */
.home-value-grid {
  max-width: 960px; margin: 36px auto 0;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px;
}
.value-card {
  min-width: 0; padding: 18px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.value-card-main { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 13px; }
.value-icon {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--accent-light); border: 1px solid rgba(139,92,246,.22);
  color: #C4B5FD; font-size: 10px; font-weight: 900;
}
.value-kicker {
  display: block; color: #A78BFA; font-size: 9px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px;
}
.value-card h2, .value-card h3 {
  color: var(--text); font-weight: 750; letter-spacing: -.025em; line-height: 1.25;
}
.value-card h2 { font-size: 17px; }
.value-card h3 { font-size: 15px; }
.value-card p { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* ============ HOME — HOW IT WORKS ============ */
.how-section {
  max-width: 960px; margin: 36px auto 0; padding: 20px;
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: rgba(255,255,255,.018);
}
.how-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.how-head > div { min-width: 0; }
.how-head h3 { margin-top: 3px; color: var(--text); font-size: 16px; letter-spacing: -.02em; }
.how-pill {
  flex: none; padding: 5px 10px; border-radius: var(--r-pill);
  border: 1px solid rgba(56,189,248,.18); background: rgba(56,189,248,.06);
  color: #7DD3FC; font-size: 9px; font-weight: 800;
}
.how-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.how-step {
  min-width: 0; padding: 14px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border);
}
.how-step > span {
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 8px; margin-bottom: 9px;
  background: var(--accent-light); border: 1px solid rgba(139,92,246,.18);
  color: #C4B5FD; font-size: 10px; font-weight: 900;
}
.how-step strong { display: block; color: var(--text); font-size: 12px; line-height: 1.35; }
.how-step p { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.55; }

/* ============ LOADING ============ */
.progress-panel {
  position: relative; max-width: 500px; margin: 40px auto;
  padding: 40px 0; text-align: center;
  animation: fadeUp 300ms both;
}
.progress-timer {
  position: absolute; top: 0; right: 0;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.product-progress-visual {
  width: min(520px, 86vw); height: 2px; margin: 32px auto 18px;
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.08); border-radius: var(--r-pill);
}
.product-progress-visual span {
  position: absolute; inset: 0 auto 0 -40%; width: 40%;
  background: linear-gradient(90deg, transparent, #8B5CF6, #38BDF8, transparent);
  animation: searchProgressLine 1.6s ease-in-out infinite;
}
.progress-below { margin-top: 28px; }
.progress-track {
  height: 3px; background: var(--surface-2);
  border-radius: var(--r-pill); overflow: hidden;
}
.progress-fill {
  height: 100%; width: 7%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, #7C3AED, #8B5CF6, #38BDF8);
  transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-message {
  margin-top: 16px; font-size: 14px; color: var(--text); min-height: 24px;
}
.step-pills {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-top: 16px;
}
.step-pills li {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--border);
  transition: background 300ms, color 300ms;
}
.step-pills li.active { background: var(--accent-light); color: #C4B5FD; border-color: rgba(139,92,246,.24); }
.step-pills li.done { background: #111; color: #fff; border-color: transparent; }
.progress-sub { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 12px; }

/* ============ ERROR ============ */
.error-panel {
  max-width: 560px; margin: 40px auto; padding: 28px;
  border-radius: var(--r-xl);
  background: var(--red-bg); border: 1px solid rgba(239,68,68,.22);
  animation: fadeUp 300ms both;
}
.error-panel h3 { color: var(--red); font-weight: 700; margin-bottom: 8px; }
.error-panel p { font-size: 14px; color: var(--red); opacity: .85; }
.btn-secondary {
  margin-top: 16px; padding: 10px 20px; border-radius: var(--r-md);
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font-weight: 600;
  transition: background 160ms;
}
.btn-secondary:hover { background: var(--surface-2); }

/* ============ RESULTS — HEADER ============ */
#results { animation: fadeUp 350ms both; }

.product-page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 0; margin-bottom: 8px;
  position: relative; z-index: 2;
}
.result-back {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; padding: 8px 0;
  color: var(--muted); font-size: 13px; font-weight: 650;
  transition: color 150ms;
}
.result-back:hover { color: var(--text); }

.result-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin: 24px 0 18px; position: relative; z-index: 2;
}
.result-title-wrap { min-width: 0; }
.result-kicker {
  margin-bottom: 6px; color: var(--subtle);
  font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.result-header h2 {
  font-size: clamp(26px, 3.5vw, 40px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.1; color: var(--text);
}
.variant-line { font-size: 13px; color: var(--muted); margin-top: 5px; }
.result-header-meta { display: flex; align-items: center; gap: 10px; flex: none; }
.elapsed-badge {
  flex: none; padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--muted);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.result-new-btn {
  padding: 8px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text);
  font-size: 12px; font-weight: 700; white-space: nowrap;
  transition: background 160ms;
}
.result-new-btn:hover { background: var(--surface-2); }

/* ============ RESULTS — HERO CARD ============ */
.hero-card {
  display: grid; grid-template-columns: 240px 1fr 250px; gap: 24px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 24px;
  box-shadow: var(--shadow-md);
}

.img-zone { min-width: 0; }
.img-box {
  aspect-ratio: 1; border-radius: var(--r-lg);
  background: var(--surface-2); border: 1px solid var(--border);
  overflow: hidden; display: grid; place-items: center;
}
.img-box img { width: 100%; height: 100%; object-fit: contain; padding: 12px; cursor: zoom-in; }
.img-fallback { color: var(--subtle); }
.thumb-row { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; scrollbar-width: none; }
.thumb-row::-webkit-scrollbar { display: none; }
.thumb-row button {
  width: 48px; height: 48px; flex: none; border-radius: 8px; padding: 3px;
  border: 1.5px solid var(--border); background: var(--surface);
}
.thumb-row button.active { border-color: var(--accent); }
.thumb-row img { width: 100%; height: 100%; object-fit: contain; }
.btn-tertiary {
  background: none; border: none; color: #A78BFA;
  font-size: 12.5px; font-weight: 650; margin-top: 8px; padding: 4px 0;
  text-decoration: underline; text-underline-offset: 3px;
}

.info-zone { min-width: 0; }
.brand-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.info-zone h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--text); }
.model-line { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.chip {
  font-size: 11.5px; font-weight: 650; padding: 4px 11px;
  border-radius: var(--r-sm); background: var(--surface-2); color: var(--muted);
}
.chip.accent { background: var(--accent-light); color: #C4B5FD; }
.rating-line { font-size: 13px; color: var(--text); }
.rating-line strong { font-weight: 600; }
.desc-short {
  font-size: 13px; color: var(--muted); margin: 8px 0 16px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.price-block { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price-block strong { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); }
.price-block s { color: var(--subtle); font-size: 15px; }
.savings-pill {
  font-size: 12px; font-weight: 700; padding: 3px 10px;
  border-radius: var(--r-pill); background: var(--green-bg); color: var(--green);
}
.prices-checked { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ============ RESULTS — BEST PRICE CARD ============ */
/* Always dark — the conversion anchor. Stays dark in light mode too. */
.bp-card {
  background: linear-gradient(145deg, #0D0F18, #131624 70%, #1A1D30);
  border: 1px solid rgba(139,92,246,.22);
  border-radius: var(--r-lg); padding: 22px;
  box-shadow: 0 18px 54px rgba(0,0,0,.24), 0 0 0 1px rgba(139,92,246,.06);
}
.bp-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: rgba(255,255,255,.48); margin-bottom: 6px;
}
.bp-amount {
  font-size: 38px; font-weight: 800; letter-spacing: -0.04em;
  display: block; margin: 6px 0; color: #fff;
}
.bp-store {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px; color: rgba(255,255,255,.72);
}
.bp-store .store-mono { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.14); }
.avail-dot { width: 7px; height: 7px; border-radius: 50%; }
.avail-dot.ok { background: #4ADE80; }
.avail-dot.no { background: #F87171; }
.avail-dot.unk { background: rgba(255,255,255,.35); }
.avail-text { font-size: 12px; color: rgba(255,255,255,.6); }
.bp-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bp-badges .mini { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
.bp-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.bp-open {
  display: block; text-align: center;
  background: #fff; color: #111827; text-decoration: none;
  border-radius: var(--r-md); padding: 12px;
  font-weight: 700; font-size: 13.5px;
  transition: background 180ms, transform 160ms;
}
.bp-open:hover { background: #F3F0FF; transform: translateY(-1px); }
.bp-copy {
  background: transparent; border: 1px solid rgba(255,255,255,.20);
  color: rgba(255,255,255,.80); border-radius: var(--r-md);
  padding: 10px; font-size: 13px; font-weight: 600; width: 100%;
  transition: border-color 200ms;
}
.bp-copy:hover { border-color: rgba(255,255,255,.42); }
.bp-share {
  background: none; border: none; color: rgba(255,255,255,.50);
  font-size: 12px; margin-top: 8px; width: 100%;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ============ RESULTS — STATS ============ */
.stats-strip {
  display: grid; grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 10px; margin: 12px 0;
}
.stat {
  min-width: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px 18px;
}
.stat span {
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
  display: block; margin-bottom: 4px;
}
.stat strong {
  font-size: 22px; font-weight: 750; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--text);
}

/* ============ RESULTS — GRID + PANELS ============ */
.results-grid {
  display: grid; grid-template-columns: 1.55fr 1fr;
  gap: 12px; align-items: start;
}
.col-left, .col-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.col-right { position: sticky; top: 72px; }

.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 20px 22px;
}
.panel-head { display: flex; align-items: center; gap: 10px; }
.panel-head h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.panel-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.empty { color: var(--muted); font-size: 13px; padding: 14px 0; }
.count-badge {
  font-size: 11px; font-weight: 700; padding: 3px 10px;
  border-radius: var(--r-pill); background: var(--surface-2); color: var(--muted);
}

/* Secondary panels are visually quieter */
#rangePanel, #savingsPanel, #specsPanel, #overviewPanel,
#detailsPanel, #timingPanel, #trustPanel { box-shadow: none; }
#rangePanel .panel-head h3, #savingsPanel .panel-head h3,
#specsPanel .panel-head h3, #overviewPanel .panel-head h3,
#timingPanel .panel-head h3, #trustPanel .panel-head h3 {
  font-size: 14px; color: var(--muted); font-weight: 650;
}

/* ============ RESULTS — OFFERS ============ */
.offers-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.offer {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto auto;
  gap: 13px; align-items: center;
  padding: 13px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface-2);
  transition: box-shadow 180ms, transform 180ms;
  animation: fadeUp 300ms ease both;
}
.offer:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.offer.best {
  background: rgba(139,92,246,.10);
  border-color: rgba(139,92,246,.28);
  box-shadow: 0 4px 16px rgba(109,40,217,.12);
}
.offer-main { min-width: 0; }
.offer-store { font-size: 13px; font-weight: 700; color: var(--text); }
.offer-seller { font-size: 11px; color: var(--muted); }
.offer-title {
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.badge-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.mini {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--muted);
}
.mini.ok   { background: var(--green-bg); color: var(--green); }
.mini.warn { background: var(--yellow-bg); color: var(--yellow); }
.mini.best { background: #111; color: #fff; }
.conf-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.conf-dot.high   { background: var(--green); }
.conf-dot.medium { background: var(--yellow); }
.conf-dot.review { background: var(--red); }
.offer-price { text-align: right; }
.offer-price strong { font-size: 17px; font-weight: 750; display: block; color: var(--text); }
.offer-price s { font-size: 12px; color: var(--subtle); }
.offer-open {
  font-size: 12px; font-weight: 700; color: var(--text); text-decoration: none;
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  padding: 7px 14px; background: var(--surface); white-space: nowrap;
  transition: transform 160ms, box-shadow 160ms;
}
.offer-open:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* ============ RESULTS — COMPARISON TABLE ============ */
.table-wrap {
  overflow-x: auto; border: 1px solid var(--border);
  border-radius: var(--r-md); margin-top: 14px;
  -webkit-overflow-scrolling: touch;
}
table { border-collapse: collapse; min-width: 680px; width: 100%; font-size: 13px; }
th {
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); text-align: left; padding: 10px 12px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
td {
  padding: 11px 12px; border-bottom: 1px solid var(--border);
  color: var(--text); vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr.best-row { background: rgba(139,92,246,.09); }
.cell-store { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.cell-listing { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono, .mono-note { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ============ RESULTS — SUSPICIOUS ============ */
.panel.suspicious {
  border: 1.5px dashed rgba(245,158,11,.30);
  background: rgba(245,158,11,.04);
}
.excluded-tag {
  display: inline-block; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--yellow-bg); color: var(--yellow);
}
.suspicious-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.suspicious-card {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 12px; border: 1px dashed var(--border); border-radius: var(--r-md);
  background: var(--surface);
}
.sp-title { font-size: 12.5px; color: var(--muted); }
.reason { font-size: 12px; color: var(--yellow); font-weight: 600; margin-top: 3px; }
.sp-price { color: var(--muted); font-size: 15px; }

/* ============ RESULTS — PRICE RANGE ============ */
.range-track {
  position: relative; height: 4px;
  background: var(--surface-2); border-radius: var(--r-pill);
  margin: 24px 6px;
}
.range-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
}
.range-dot {
  position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
  background: var(--text); border: 2.5px solid var(--surface);
  box-shadow: var(--shadow-sm);
  transform: translate(-50%, -50%);
}
.range-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.range-labels strong { display: block; color: var(--text); font-size: 14px; }
.range-labels .c { text-align: center; }
.range-labels .r { text-align: right; }

/* ============ RESULTS — SAVINGS ============ */
.savings-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px; margin-top: 14px;
}
.savings-card {
  padding: 14px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface-2);
}
.savings-card strong { font-size: 14px; display: block; color: var(--text); }
.savings-card span { font-size: 13px; color: var(--muted); }
.savings-card .pct { font-size: 16px; font-weight: 750; color: var(--green); margin-top: 4px; }

/* ============ RESULTS — SPECS + OVERVIEW + DETAILS ============ */
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 12px; }
.spec-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12.5px; padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.spec-row dt { color: var(--muted); }
.spec-row dd { font-weight: 550; text-align: right; word-break: break-word; color: var(--text); }
.spec-row dd a { color: #A78BFA; }

.desc-full {
  font-size: 13px; color: var(--muted); line-height: 1.7;
  white-space: pre-line; margin-top: 10px;
}
.desc-full.clamped {
  display: -webkit-box; -webkit-line-clamp: 5;
  -webkit-box-orient: vertical; overflow: hidden;
}

.details-panel summary {
  font-size: 13px; font-weight: 650; color: var(--muted); cursor: pointer;
  list-style: none; display: flex; align-items: center;
  justify-content: space-between; padding: 2px 0;
}
.details-panel summary::-webkit-details-marker { display: none; }
.details-panel[open] summary { color: var(--text); margin-bottom: 12px; }

/* ============ RESULTS — RETZ VERDICT ============ */
.retzo-panel {
  border: 1px solid rgba(139,92,246,.26);
  background:
    radial-gradient(circle at 85% 5%, rgba(139,92,246,.11), transparent 38%),
    var(--surface);
  position: relative; overflow: hidden;
}
.retzo-panel::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2.5px;
  background: linear-gradient(90deg, #8B5CF6, #6366F1, #38BDF8, transparent);
}
.retzo-panel .panel-head h3 { color: var(--text); }
.score-row { display: flex; align-items: center; gap: 18px; margin: 16px 0 14px; }
.score-ring {
  --fill: 0deg; --ring-color: var(--accent);
  width: 88px; height: 88px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--ring-color) var(--fill), var(--surface-2) 0);
  display: grid; place-items: center; position: relative;
  box-shadow: 0 8px 28px rgba(79,70,229,.16), 0 0 0 1px var(--border);
}
.score-ring::before {
  content: ''; position: absolute; width: 70px; height: 70px;
  border-radius: 50%; background: var(--surface);
}
.score-ring span { position: relative; font-size: 20px; font-weight: 800; color: var(--text); }

.verdict-badge {
  display: inline-block; font-size: 11px; font-weight: 750; letter-spacing: 0.09em;
  padding: 5px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
}
.verdict-badge.strong  { background: var(--green-bg); color: var(--green); border-color: rgba(34,197,94,.22); }
.verdict-badge.good    { background: var(--accent-light); color: #A78BFA; border-color: rgba(139,92,246,.22); }
.verdict-badge.caution { background: var(--yellow-bg); color: var(--yellow); border-color: rgba(245,158,11,.22); }

.retzo-confidence { font-size: 12px; color: var(--muted); margin-top: 6px; }
.retzo-panel h4 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; color: var(--text); }
.retzo-summary { font-size: 13px; color: var(--muted); line-height: 1.65; }
.retzo-reasons, .retzo-warnings { list-style: none; margin-top: 12px; }
.retzo-reasons li, .retzo-warnings li {
  position: relative; padding-left: 20px;
  font-size: 12.5px; color: var(--text); margin-bottom: 5px;
}
.retzo-reasons li::before { content: '✓'; position: absolute; left: 2px; color: var(--green); font-weight: 700; }
.retzo-warnings li { color: var(--yellow); }
.retzo-warnings li::before { content: '!'; position: absolute; left: 4px; color: var(--yellow); font-weight: 700; }
.retzo-rec {
  padding: 13px; margin-top: 12px;
  background: rgba(139,92,246,.09);
  border: 1px solid rgba(139,92,246,.18);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  font-size: 12.5px; color: var(--muted);
}

/* ============ RESULTS — TIMING + TRUST ============ */
.timing-badge {
  display: inline-block; font-size: 12px; font-weight: 700;
  padding: 6px 14px; border-radius: var(--r-pill); margin-top: 12px;
}
.timing-badge.good { background: var(--green-bg); color: var(--green); }
.timing-badge.bad  { background: var(--red-bg); color: var(--red); }
.timing-badge.mid  { background: var(--yellow-bg); color: var(--yellow); }

.trust-list { display: flex; flex-direction: column; margin-top: 10px; }
.trust-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.trust-row:last-child { border-bottom: none; }
.t-copy strong { font-size: 13px; display: block; color: var(--text); }
.t-copy span { font-size: 11.5px; color: var(--muted); }

/* ============ RESULTS — SYSTEM STRIP ============ */
.system-strip { margin-top: 20px; }
.system-card {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 16px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: rgba(255,255,255,.02);
  color: var(--muted); font-size: 11.5px;
}
.system-divider { opacity: .4; }

/* ============ RESULTS — DIAGNOSTICS ============ */
.debug-panel pre {
  max-height: 420px; overflow: auto; padding: 16px;
  border-radius: var(--r-md); background: #08090D; color: #B4BCCC;
  font: 11.5px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============ PRODUCT ORBIT + PRODUCT MENU ============ */
.product-retz-orbit {
  position: fixed; top: 86px; right: 24px; width: 112px; height: 112px;
  z-index: 1; pointer-events: none; opacity: .65;
}
.product-retz-orbit-ring {
  position: absolute; inset: 10px;
  border: 1px solid rgba(139,92,246,.20); border-radius: 50%;
  animation: productOrbitSpin 14s linear infinite;
}
.product-retz-orbit-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; }
.product-retz-orbit .dot-a {
  top: 9px; left: 53px;
  background: #A78BFA; box-shadow: 0 0 10px rgba(167,139,250,.85);
}
.product-retz-orbit .dot-b {
  bottom: 15px; right: 17px;
  background: #38BDF8; box-shadow: 0 0 10px rgba(56,189,248,.75);
}
.product-retz-line {
  position: absolute; left: 5px; right: 5px; bottom: 6px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,.6), rgba(56,189,248,.5), transparent);
}
body:not(.product-page-standalone) .product-retz-orbit { display: none; }
.product-container, .product-page-standalone .result-header { position: relative; z-index: 2; }

.product-menu {
  position: fixed; top: 64px; left: 18px; z-index: 220;
  width: min(256px, calc(100vw - 36px));
  padding: 8px; border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: rgba(12,14,20,.97);
  box-shadow: 0 22px 70px rgba(0,0,0,.44);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.product-menu a, .product-menu button {
  width: 100%; display: flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 9px 11px;
  color: var(--text); background: transparent;
  border: none; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 700; text-decoration: none; text-align: left;
  transition: background 160ms;
}
.product-menu a:hover, .product-menu button:hover { background: var(--accent-light); }

/* ============ LIGHTBOX ============ */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(3,4,8,.88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: grid; place-items: center;
}
.lightbox img {
  max-width: 92vw; max-height: 88vh; object-fit: contain;
  border-radius: var(--r-lg);
}
.lb-btn {
  position: absolute; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(15,17,24,.80); color: #fff;
  border: 1px solid rgba(255,255,255,.14); font-size: 17px;
  display: grid; place-items: center;
  transition: background 160ms;
}
.lb-btn:hover { background: rgba(30,33,45,.92); }
.lb-close { top: 20px; right: 20px; }
.lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 20px; top: 50%; transform: translateY(-50%); }

/* ============ ANIMATIONS ============ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes productOrbitSpin { to { transform: rotate(360deg); } }
@keyframes searchProgressLine { from { transform: translateX(0); } to { transform: translateX(350%); } }

/* ============ FOCUS + ACCESSIBILITY ============ */
:focus-visible {
  outline: 2.5px solid rgba(139,92,246,.40);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ============ SAFE AREA ============ */
@supports (padding: max(0px)) {
  .topbar-inner {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .container { padding-bottom: max(48px, env(safe-area-inset-bottom)); }
  .sidebar { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}

/* ============ RESPONSIVE — 1060px ============ */
@media (max-width: 1060px) {
  .menu-btn { display: grid; }
  .hero-card { grid-template-columns: 220px 1fr; }
  .bp-card { grid-column: 1 / -1; }
  .results-grid { grid-template-columns: 1fr; }
  .col-right { position: static; }
}

/* ============ RESPONSIVE — 760px ============ */
@media (max-width: 760px) {
  :root { --sidebar-w: min(320px, 86vw); }

  .topbar-inner { padding-inline: 12px; gap: 10px; }
  .topbar-right { gap: 6px; }
  #healthText, .health span:last-child, .kbd-hint { display: none; }
  .product-model-badge span:last-child,
  .result-page-model span:last-child { display: none; }

  .container { padding: 16px 14px 48px; }
  .hero { padding-top: clamp(32px, 9vh, 68px); width: 100%; }
  .hero h1 { font-size: clamp(38px, 12vw, 56px); }
  .hero .subline { font-size: 13.5px; }
  .slash-hint { display: none; }

  .search-card {
    display: grid; grid-template-columns: 20px minmax(0,1fr);
    padding: 10px; gap: 9px;
  }
  .search-icon { align-self: center; }
  .search-card .btn-primary { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .assurance { justify-content: center; font-size: 11px; }

  .hero-card { grid-template-columns: 1fr; padding: 14px; gap: 14px; }
  .img-zone { order: 0; }
  .info-zone { order: 1; }
  .bp-card { order: 2; grid-column: auto; }
  .img-box { width: min(100%, 240px); margin: 0 auto; }

  .result-header { margin: 16px 0 12px; flex-wrap: wrap; }
  .result-header h2 { font-size: clamp(22px, 7vw, 30px); }

  .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat { padding: 12px 14px; }
  .stat strong { font-size: 18px; }

  .offer { grid-template-columns: auto minmax(0,1fr); }
  .offer > .offer-price { grid-column: 2; text-align: left; margin-top: 2px; }
  .offer > .offer-open { grid-column: 2; width: fit-content; justify-self: start; margin-top: 2px; }

  .suspicious-card { grid-template-columns: 1fr auto; }
  .suspicious-card .offer-open { grid-column: 1 / -1; width: fit-content; }

  .system-card { flex-wrap: wrap; justify-content: center; text-align: center; }

  .store-logo { width: 18px; height: 18px; max-width: 18px; max-height: 18px; }

  .product-retz-orbit { width: 84px; height: 84px; top: 68px; right: 10px; opacity: .45; }
  .product-retz-orbit-ring { inset: 6px; }
  .product-retz-orbit .dot-a { top: 6px; left: 38px; }
  .product-retz-orbit .dot-b { bottom: 11px; right: 12px; }

  .lightbox img { max-width: 94vw; max-height: 76vh; }
  .lb-btn { width: 38px; height: 38px; }
  .lb-close { top: 12px; right: 12px; }
  .lb-prev { left: 9px; }
  .lb-next { right: 9px; }
}

/* ============ RESPONSIVE — 640px ============ */
@media (max-width: 640px) {
  .home-value-grid { grid-template-columns: 1fr; gap: 8px; }
  .how-grid { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: 1fr; }
  .savings-grid { grid-template-columns: 1fr; }

  /* Comparison table → stacked cards */
  .table-wrap { border: none; border-radius: 0; overflow: visible; }
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }
  table { min-width: 0; }
  tbody tr {
    display: flex; flex-direction: column; gap: 6px;
    padding: 13px; margin-bottom: 8px;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface-2); position: relative;
  }
  tbody tr.best-row { background: rgba(139,92,246,.09); border-color: rgba(139,92,246,.26); }
  tbody td { padding: 0; border: none; font-size: 12px; color: var(--text); }
  tbody td:nth-child(2) {
    color: var(--muted); font-size: 11px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  tbody td:nth-child(5) { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
  tbody td:nth-child(7) a { margin-top: 4px; }
  .cell-listing { max-width: 100%; }
}

/* ============ RESPONSIVE — 520px ============ */
@media (max-width: 520px) {
  .brand-copy span { max-width: 115px; font-size: 7.5px; }
  .icon-btn { width: 34px; height: 34px; }
  .hero h1 { font-size: clamp(34px, 11vw, 46px); letter-spacing: -.05em; }
  .hero-card { padding: 11px; gap: 10px; }
  .img-box { width: min(100%, 210px); }

  .bp-amount { font-size: 30px; }
  .bp-open, .bp-copy { width: 100%; text-align: center; }
  .bp-actions { gap: 8px; }

  .stat { padding: 10px 11px; }
  .stat strong { font-size: 16px; }
  .stat span { font-size: 7.5px; }

  .score-ring { width: 72px; height: 72px; }
  .score-ring::before { width: 58px; height: 58px; }
  .score-ring span { font-size: 17px; }
  .retzo-panel h4 { font-size: 15px; }
  .retzo-summary { font-size: 12px; }
  .retzo-reasons li, .retzo-warnings li { font-size: 11.5px; }
  .retzo-rec { font-size: 11.5px; padding: 11px; }

  .store-logo {
    width: 16px !important; height: 16px !important;
    max-width: 16px !important; max-height: 16px !important;
  }
  .store-mono, .store-logo-wrap { width: 24px; height: 24px; }
  .store-mono.lg, .store-logo-wrap.lg { width: 30px; height: 30px; }

  .product-retz-orbit { display: none; }
  .panel { padding: 14px 12px; }
}

/* ============ RESPONSIVE — 380px ============ */
@media (max-width: 380px) {
  .topbar-inner { padding-inline: 8px; }
  .brand-copy span { display: none; }
  .brand-copy strong { font-size: 14px; }
  .hero h1 { font-size: 34px; }
  .stats-strip { grid-template-columns: 1fr; }
  .panel { padding: 11px 10px; }
}

/* ============ LIGHT THEME ============ */
html.theme-light {
  --bg:            #F5F7FB;
  --surface:       #FFFFFF;
  --surface-2:     #F1F3F8;
  --surface-3:     #E8EBF2;
  --border:        rgba(15,23,42,.08);
  --border-strong: rgba(15,23,42,.14);
  --text:          #111827;
  --muted:         #667085;
  --subtle:        #9AA3B2;
  --accent-glow:   rgba(109,40,217,.10);
  --topbar-bg:     rgba(245,247,251,.90);
  --green-bg:      rgba(34,197,94,.10);
  --red-bg:        rgba(239,68,68,.10);
  --yellow-bg:     rgba(245,158,11,.10);
  --shadow-sm:     0 4px 14px rgba(15,23,42,.06);
  --shadow-md:     0 12px 30px rgba(15,23,42,.08);
}

html.theme-light body {
  background:
    radial-gradient(circle, rgba(15,23,42,.07) 1px, transparent 1.2px),
    linear-gradient(180deg, #F6F8FC 0%, #EEF2F8 100%);
  background-size: 22px 22px, auto;
  color: var(--text);
}

/* Monogram keeps the brand gradient in light mode */
html.theme-light .logomark.kb-monogram {
  box-shadow: 0 6px 18px rgba(109,40,217,.20), inset 0 1px 0 rgba(255,255,255,.16);
}

html.theme-light .hero h1 span {
  background: linear-gradient(100deg, #7C3AED 0%, #4F46E5 44%, #0284C7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

html.theme-light .panel,
html.theme-light .hero-card,
html.theme-light .stat,
html.theme-light .search-card,
html.theme-light .value-card {
  background: var(--surface); border-color: var(--border);
  box-shadow: 0 12px 30px rgba(15,23,42,.07);
}
html.theme-light .search-card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-light), 0 12px 30px rgba(15,23,42,.07);
}
html.theme-light .how-section { background: rgba(255,255,255,.8); border-color: var(--border); }
html.theme-light .how-step { background: var(--surface-2); border-color: var(--border); }
html.theme-light .system-card { background: rgba(255,255,255,.75); border-color: var(--border); }

html.theme-light .sidebar { background: rgba(255,255,255,.97); border-color: var(--border); }
html.theme-light .sidebar-account,
html.theme-light .history-item:hover { background: rgba(15,23,42,.04); border-color: var(--border); }
html.theme-light .account-action { color: var(--text); background: rgba(15,23,42,.03); }
html.theme-light .new-comparison kbd { background: rgba(15,23,42,.04); }

html.theme-light .menu-btn span { background: #111827; }

html.theme-light .offer { background: var(--surface-2); border-color: var(--border); }
html.theme-light .offer.best { background: rgba(109,40,217,.07); border-color: rgba(109,40,217,.20); }
html.theme-light tr.best-row,
html.theme-light tbody tr.best-row { background: rgba(109,40,217,.06); }
html.theme-light .mini.best { background: #111827; color: #fff; }
html.theme-light .step-pills li.done { background: #111827; color: #fff; }
html.theme-light .demo-badge { color: #6D28D9; }
html.theme-light .value-icon,
html.theme-light .how-step > span { color: #7C3AED; }
html.theme-light .value-kicker { color: #7C3AED; }
html.theme-light .chip.accent { color: #6D28D9; }
html.theme-light .btn-tertiary,
html.theme-light .spec-row dd a { color: #6D28D9; }

html.theme-light .retzo-panel {
  background:
    radial-gradient(circle at 85% 5%, rgba(109,40,217,.07), transparent 38%),
    var(--surface);
  border-color: rgba(109,40,217,.20);
}
html.theme-light .verdict-badge.good { color: #6D28D9; }
html.theme-light .retzo-rec { background: rgba(109,40,217,.07); border-color: rgba(109,40,217,.16); border-left-color: #7C3AED; }
html.theme-light .score-ring { box-shadow: 0 8px 24px rgba(79,70,229,.10), 0 0 0 1px var(--border); }

/* Best price card stays dark in light mode — intentional contrast anchor */
html.theme-light .bp-card {
  background: linear-gradient(145deg, #0D0F18, #131624 70%, #1A1D30);
  border-color: rgba(139,92,246,.28);
}

html.theme-light .product-menu {
  background: rgba(255,255,255,.98);
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 20px 60px rgba(15,23,42,.16);
}
html.theme-light .product-menu a,
html.theme-light .product-menu button { color: #111827; }

html.theme-light .product-retz-orbit { opacity: .52; }
html.theme-light .product-retz-orbit-ring { border-color: rgba(109,40,217,.16); }

html.theme-light .panel.suspicious { border-color: rgba(245,158,11,.22); background: rgba(245,158,11,.04); }
html.theme-light .product-progress-visual { background: rgba(15,23,42,.08); }
html.theme-light .kbd-hint kbd { background: var(--surface); border-color: var(--border-strong); }
html.theme-light .debug-panel pre { background: #0B0D12; }
body {
  background:
    radial-gradient(
      circle at 14% 0%,
      rgba(124,58,237,.09),
      transparent 32%
    ),
    radial-gradient(
      circle at 92% 8%,
      rgba(56,189,248,.05),
      transparent 26%
    ),

    /* VERY DARK DOTS */
    radial-gradient(
      circle,
      rgba(0,0,0,.75) 1px,
      transparent 1.35px
    ),

    linear-gradient(
      180deg,
      #07080D 0%,
      #090B12 50%,
      #07080D 100%
    );

  background-size:
    auto,
    auto,
    22px 22px,
    auto;

  background-repeat:
    no-repeat,
    no-repeat,
    repeat,
    no-repeat;
}