/* ── Reset & Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-y: scroll; } /* Always reserve vertical scrollbar space — prevents layout shift when tabs differ in height */

/* ── Keyframe animations ────────────────────────────────────────────────── */
@keyframes foilShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes holoGlow {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}
@keyframes shimmerSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Dark theme (default) ───────────────────────────────────────────────── */
:root {
  --bg:            #050810;
  --surface:       #0a0f20;
  --surface2:      #0f1730;
  --border:        #1a2748;
  --accent:        #7c6cf6;
  --accent2:       #e85d5d;
  --green:         #2dd55b;
  --red:           #e03030;
  --text:          #e0e8ff;
  --muted:         #5a6a96;
  --radius:        14px;
  --font:          'Segoe UI', system-ui, -apple-system, sans-serif;
  --holo:          linear-gradient(135deg, #7c6cf6, #b06cf6, #e85d5d, #f0a060, #4db87a, #6cb8f6, #7c6cf6);
  --card-border:   linear-gradient(135deg, rgba(124,108,246,0.7) 0%, rgba(176,108,246,0.5) 25%, rgba(232,93,93,0.5) 50%, rgba(77,184,122,0.5) 75%, rgba(124,108,246,0.7) 100%);
  --logo-bg:       rgba(255,255,255,0.06);
  --header-bg:     linear-gradient(135deg, #0d1535 0%, #0a0f28 50%, #130d35 100%);
  --header-border: rgba(124,108,246,0.35);
  --header-shadow: 0 4px 40px rgba(124,108,246,0.15), 0 1px 0 rgba(255,255,255,0.04);
}

/* ── Light theme ────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:            #f0ebf8;
  --surface:       #ffffff;
  --surface2:      #e8e0f5;
  --border:        #c8bce8;
  --accent:        #6b5cf0;
  --accent2:       #e85d5d;
  --green:         #2a9e60;
  --red:           #d42020;
  --text:          #1a1040;
  --muted:         #7060a0;
  --card-border:   linear-gradient(135deg, rgba(107,92,240,0.6) 0%, rgba(176,92,220,0.4) 25%, rgba(232,93,93,0.4) 50%, rgba(42,158,96,0.4) 75%, rgba(107,92,240,0.6) 100%);
  --logo-bg:       transparent;
  --header-bg:     linear-gradient(135deg, #efe8fc 0%, #f5f0ff 50%, #eae4fc 100%);
  --header-border: rgba(107,92,240,0.3);
  --header-shadow: 0 4px 24px rgba(107,92,240,0.12), 0 1px 0 rgba(255,255,255,0.8);
}

/* ── Background: flat black experiment (was: card-back diamond pattern) ──── */
body {
  background-color: #000;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  transition: background-color 0.3s, color 0.3s;
}
[data-theme="light"] body {
  background-color: var(--bg);
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
#app {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
header { margin: 20px 0 28px; }

.header-inner {
  background: var(--header-bg);
  border: 1.5px solid var(--header-border);
  border-radius: 20px;
  padding: 18px 24px;
  position: relative;
  overflow: visible;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  box-shadow: var(--header-shadow);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

/* Aurora glow blob — dark mode only */
.header-inner::before {
  content: '';
  position: absolute;
  top: -60%;
  left: 10%;
  width: 50%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(124,108,246,0.18) 0%, transparent 70%);
  pointer-events: none;
  animation: holoGlow 4s ease-in-out infinite;
}
.header-inner::after {
  content: '';
  position: absolute;
  top: -40%;
  right: 5%;
  width: 40%;
  height: 180%;
  background: radial-gradient(ellipse, rgba(232,93,93,0.1) 0%, transparent 70%);
  pointer-events: none;
  animation: holoGlow 4s ease-in-out infinite reverse;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.tracka-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 12px;
  background: var(--logo-bg);
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(124,108,246,0.3));
}

header h1 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0;
}

.brand-tracka {
  color: var(--text);
}
/* Foil shimmer on "Card" */
.brand-card {
  background: var(--holo);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: foilShift 4s ease infinite;
}

.subtitle {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 5px;
  letter-spacing: 0.01em;
}

/* Theme toggle button */
#theme-toggle-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
#theme-toggle-btn:hover { border-color: var(--accent); }

/* ── Search ──────────────────────────────────────────────────────────────── */
#search-section { margin-bottom: 20px; }

#search-form { display: flex; gap: 10px; }
.search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}
/* Inner wrapper: unified visual input box — pill + text field in one container */
.search-input-inner {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s, box-shadow 0.2s;
  overflow: hidden;
}
.search-input-inner:focus-within {
  border-color: #7c6cf6;
  box-shadow: 0 0 0 3px rgba(124,108,246,0.12);
}
.search-input-inner #search-input { flex: 1; min-width: 0; width: auto; }

#search-input {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text);
  font-size: 1rem;
  padding: 11px 16px 11px 10px;
  outline: none;
}
#search-input:focus { outline: none; box-shadow: none; }
#search-input::placeholder { color: var(--muted); }

#search-btn {
  background: linear-gradient(135deg, #8b7cf8 0%, #7c6cf6 50%, #6a5ae0 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 800;
  height: 46px;
  padding: 0 28px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 16px rgba(124, 108, 246, 0.4), inset 0 1px 0 rgba(255,255,255,0.15);
}
#search-btn:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(124, 108, 246, 0.5); }
#search-btn:active { transform: translateY(0); }
#search-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

.status-msg {
  font-size: 0.87rem;
  color: var(--muted);
  /* no margin or min-height — collapses to nothing when empty */
}
.status-msg:not(:empty) {
  margin-top: 6px;
  margin-bottom: 6px;
}
.status-msg.error { color: var(--red); }
.status-msg--warn { color: #f0a500; }
.status-warn { display: inline-flex; align-items: center; gap: 5px; }
.status-warn .tk-ic { flex-shrink: 0; }

/* ── Search clear button (inside the input field) ───────────────────────── */
#search-clear-btn {
  display: none; /* shown only when input has text via .search-clear-visible */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.10);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
  z-index: 2;
}
#search-clear-btn:hover { background: rgba(255,255,255,0.20); color: var(--text); }
.search-clear-visible #search-clear-btn { display: flex; }
/* Nudge input text so it doesn't run under the ✕ */
.search-clear-visible #search-input { padding-right: 40px; }

/* Mobile: sit clear btn to the left of the arrow btn (34px btn + 6px gap + 8px margin = 48px) */
@media (max-width: 640px) {
  #search-clear-btn { width: 22px; height: 22px; font-size: 0.7rem; right: 48px; top: 50%; }
  .search-clear-visible #search-input { padding-right: 82px; /* 48px + 22px btn + 12px gap */ }
}

/* ── Search discover dropdown panel ─────────────────────────────────────── */
.sdp {
  display: none;   /* hidden by default — JS adds .sdp--open to reveal */
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 90;                          /* below suggest-box (z-index 100) */
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px 20px 18px;
  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.5);
  max-height: 55vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbar — keeps scroll but prevents it from eating horizontal space */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE / Edge */
}
.sdp::-webkit-scrollbar { display: none; } /* Chrome / Safari / WebKit */
.sdp.sdp--open {
  display: block;
  animation: sdpIn 0.18s ease;
}
@keyframes sdpIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sdp-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
}
.sdp-chips-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.sdp-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}
.sdp-recents { display: block; }
.sdp-clear-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s;
}
.sdp-clear-btn:hover { color: var(--accent); }
.sdp-chips { display: flex; flex-wrap: wrap; gap: 9px; }

/* ── Product chips ───────────────────────────────────────────────────────── */
#product-chips { display: flex; flex-wrap: wrap; gap: 9px; }

.chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip:hover {
  background: rgba(124, 108, 246, 0.1);
  border-color: rgba(124, 108, 246, 0.45);
  color: var(--accent);
}
.chip--hot {
  border-color: rgba(255, 120, 50, 0.4);
  background: rgba(255, 120, 50, 0.06);
}
.chip--hot:hover {
  background: rgba(255, 120, 50, 0.12);
  border-color: rgba(255, 120, 50, 0.7);
  color: #ff8040;
}
.chip--recent {
  padding: 6px 10px 6px 14px;
  font-size: 0.84rem;
  gap: 4px;
}
.chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.chip--recent:hover .chip-remove {
  background: rgba(255,255,255,0.18);
  color: var(--text);
}
.chip-count {
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
  min-width: 18px;
  text-align: center;
}

/* ── Discovery cards (always visible below search) ───────────────────────── */
#discovery-section { margin-bottom: 28px; }

/* 5-column grid — fills full width on desktop, scrolls on narrow screens */
.discovery-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 8px 28px;
}
@media (max-width: 860px) {
  .discovery-cards {
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .discovery-cards::-webkit-scrollbar { display: none; }

  /* Tighten card internals on narrow screens */
  .dc-front          { padding: 10px 10px 10px; }
  .dc-card-header    { gap: 3px; }
  .dc-label          { font-size: 0.55rem; letter-spacing: 0.07em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dc-stat           { font-size: 1.55rem; }
  .dc-stat-unit      { font-size: 0.6rem; }
  .dc-product        { font-size: 0.64rem; }
  .dc-flip-hint      { font-size: 0.52rem; margin-top: 4px; }
}

/* ── Card shell (perspective container) ─────────────────────────── */
/* TCG ratio: 63×88 mm — width set by grid, height derived from aspect-ratio */
.dc-card {
  aspect-ratio: 63 / 88;
  perspective: 900px;
  cursor: pointer;
  user-select: none;
  animation: cardDeal 0.4s ease both;
  position: relative;
  z-index: 1;
}
.dc-card:nth-child(2) { animation-delay: 0.07s; }
.dc-card:nth-child(3) { animation-delay: 0.14s; }
.dc-card:nth-child(4) { animation-delay: 0.21s; }
.dc-card:nth-child(5) { animation-delay: 0.28s; }
.dc-card.dc-flipped   { z-index: 10; }

@keyframes cardDeal {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ── Inner flipper ───────────────────────────────────────────────── */
.dc-card-inner {
  position: relative;       /* ← containing block for .dc-face position:absolute */
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1);
  border-radius: 16px;
}
.dc-card:not(.dc-flipped):hover .dc-card-inner {
  transform: translateY(-5px) scale(1.03);
}
.dc-card.dc-flipped .dc-card-inner {
  transform: rotateY(180deg) scale(1.13);
}

/* ── Shared face styles ──────────────────────────────────────────── */
.dc-face {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  color: #fff;

  /* TCG-style border: thick white outer + dark inner accent */
  border: 4px solid rgba(255, 255, 255, 0.88);
  box-shadow:
    inset 0 0 0 1.5px rgba(0, 0, 0, 0.25),
    0 10px 32px rgba(0, 0, 0, 0.4);
}

/* Holographic shimmer overlay */
.dc-face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.14) 0%,
    rgba(255,255,255,0.02) 45%,
    rgba(255,255,255,0.09) 100%);
  border-radius: inherit;
  pointer-events: none;
}

/* ── Front face ──────────────────────────────────────────────────── */
.dc-front {
  padding: 14px 14px 12px;
  text-align: left;
}

/* Per-type front gradients */
.dc-card--trending .dc-front {
  background: linear-gradient(148deg, #c43508 0%, #e05c0a 50%, #f59a22 100%);
}
.dc-card--drop .dc-front {
  background: linear-gradient(148deg, #0a6b42 0%, #13a063 50%, #20cc8a 100%);
}
.dc-card--low .dc-front {
  background: linear-gradient(148deg, #6e5200 0%, #ab8000 50%, #e8bc28 100%);
}
.dc-card--watched .dc-front {
  background: linear-gradient(148deg, #8c0048 0%, #c01868 50%, #f03898 100%);
}
.dc-card--below .dc-front {
  background: linear-gradient(148deg, #003868 0%, #0060a8 50%, #10a0e8 100%);
}

.dc-card-header {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}
.dc-icon { font-size: 1rem; line-height: 1; flex-shrink: 0; display: inline-flex; align-items: center; }
.tk-ic { flex: none; }
.dc-icon .tk-ic { display: block; }
.dc-label {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  opacity: 0.88;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.dc-spacer { flex: 1; }

/* Product image in the spacer area */
.dc-img-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0 4px;
  min-height: 0;
}
.dc-product-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
}

.dc-stat {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  letter-spacing: -0.02em;
}
.dc-stat-unit {
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.82;
  margin-top: 2px;
  line-height: 1.3;
}
.dc-product {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 8px;
  opacity: 0.95;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.3em * 2); /* always reserve 2 lines so stat stays vertically consistent */
}
.dc-flip-hint {
  font-size: 0.58rem;
  opacity: 0.5;
  margin-top: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Back face ───────────────────────────────────────────────────── */
.dc-back {
  transform: rotateY(180deg);
  padding: 10px 11px 10px;
  text-align: left;
  justify-content: flex-start;
  gap: 0;
}

/* Per-type back: slightly darker/richer version of front */
.dc-card--trending .dc-back {
  background: linear-gradient(148deg, #8c1e00 0%, #c03808 60%, #e05818 100%);
}
.dc-card--drop .dc-back {
  background: linear-gradient(148deg, #054530 0%, #0c7044 60%, #14a060 100%);
}
.dc-card--low .dc-back {
  background: linear-gradient(148deg, #4a3600 0%, #8a6400 60%, #c09400 100%);
}
.dc-card--watched .dc-back {
  background: linear-gradient(148deg, #5c0030 0%, #8c1050 60%, #c03078 100%);
}
.dc-card--below .dc-back {
  background: linear-gradient(148deg, #002048 0%, #004080 60%, #0070b8 100%);
}

.dc-back-icon {
  font-size: 1rem;
  margin-bottom: 4px;
  line-height: 1;
}
.dc-back-title {
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.22;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dc-back-line {
  font-size: 0.64rem;
  opacity: 0.88;
  line-height: 1.32;
  margin-bottom: 3px;
}
.dc-back-spacer { flex: 1; }
.dc-back-btn {
  display: block;
  width: 100%;
  padding: 5px 8px;
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 8px;
  color: #fff;
  font-size: 0.64rem;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
  letter-spacing: 0.03em;
  margin-top: 6px;
  backdrop-filter: blur(4px);
}
.dc-back-btn:hover {
  background: rgba(255,255,255,0.3);
}
/* Share (#85): CTA + share icon side by side on the tile back face */
.dc-back-actions {
  display: flex;
  align-items: stretch;
  gap: 5px;
  margin-top: 6px;
}
.dc-back-actions .dc-back-btn { margin-top: 0; flex: 1; min-width: 0; }
.dc-share-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
  backdrop-filter: blur(4px);
}
.dc-share-btn:hover {
  background: rgba(255,255,255,0.3);
}
.dc-back-flip-hint {
  font-size: 0.55rem;
  opacity: 0.45;
  margin-top: 5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

/* ── Section headings ────────────────────────────────────────────────────── */
section { margin-bottom: 40px; }

#results-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
#chart-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
#results-header h2, #chart-header h2 {
  font-size: 1.05rem;
  font-weight: 700;
}
#results-meta { font-size: 0.84rem; color: var(--muted); }
#chart-header .chart-controls { font-size: 0.84rem; color: var(--muted); }

/* ── Result card grid ────────────────────────────────────────────────────── */
.result-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Best deal hero card ─────────────────────────────────────────────────── */
.result-card--best {
  background: linear-gradient(var(--surface2), var(--surface2)) padding-box,
              var(--card-border) border-box;
  border: 2px solid transparent;
  border-radius: 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 48px rgba(124,108,246,0.18), 0 2px 0 rgba(255,255,255,0.04);
  animation: slideUp 0.2s ease;
}

/* Title bar: product name + watchlist star */
.result-card-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
}
.result-card-query-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

/* Meta inline in titlebar: stores in stock · avg · from X ago */
.result-card-meta-bar {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Body row: image + card-left + buy button */
.result-card-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  flex: 1;
}

/* Alert strip at the bottom of the card */
.result-card-alert-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.12);
}
.alert-strip-icon { display: inline-flex; align-items: center; color: var(--muted); flex-shrink: 0; }
.alert-strip-label { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.alert-strip-input-wrap {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.alert-strip-input-wrap:focus-within { border-color: var(--accent); }
.alert-strip-dollar {
  padding: 0 6px 0 10px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
  pointer-events: none;
}
.alert-strip-price {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 0.88rem;
  width: 110px;
  padding: 6px 8px 6px 0;
  -moz-appearance: textfield;
}
.alert-strip-price::-webkit-outer-spin-button,
.alert-strip-price::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.alert-strip-btn {
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s, transform 0.1s;
}
.alert-strip-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.alert-strip-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.alert-strip-btns {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.alert-strip-divider { color: var(--muted); font-size: 0.78rem; flex-shrink: 0; }
.alert-strip-avail-btn {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s, transform 0.1s, border-color 0.15s;
}
.alert-strip-avail-btn:hover { opacity: 0.88; transform: translateY(-1px); border-color: rgba(255,255,255,0.45); }
.alert-strip-avail-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.alert-strip-status { font-size: 0.82rem; }

/* Product image inside hero card */
.result-hero-img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  flex-shrink: 0;
  background: transparent;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.5));
}
/* Subtle inner glow on best card */
.result-card--best::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(124,108,246,0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* Hero top row: image + content side by side */
.result-hero-top {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 20px;
}

.result-card-left { flex: 1; min-width: 0; position: relative; z-index: 1; }
.result-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.result-best-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.result-best-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(45,213,91,0.12);
  border: 1px solid rgba(45,213,91,0.3);
  color: var(--green);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 6px;
  flex-shrink: 0;
}
.result-best-badge--fav {
  background: rgba(248,192,48,0.15);
  border-color: rgba(248,192,48,0.5);
  color: rgb(248,192,48);
}

/* Badges sit inline in the header row */
.result-best-header .best-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.result-card-store-wrap {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 4px;
}
.result-card-store-link {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}
.result-card-store-link:hover { color: var(--accent); }

.result-card-total {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.result-card-total--best {
  font-size: 2.6rem;
  color: var(--green);
  display: block;
}

.result-card-breakdown {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 6px;
}

.result-card-title {
  font-size: 0.76rem;
  color: var(--muted);
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 380px;
}

.result-card-comment {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 4px;
}

.result-card-edit-btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.15s;
  opacity: 0.5;
}
.result-card-edit-btn:hover { color: var(--accent); opacity: 1; }

/* ── Buy buttons ─────────────────────────────────────────────────────────── */
.result-card-buy {
  display: inline-block;
  background: linear-gradient(135deg, #8b7cf8 0%, #7c6cf6 60%, #6a5ae0 100%);
  color: #fff;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 800;
  padding: 9px 20px;
  border-radius: 10px;
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 4px 16px rgba(124,108,246,0.4);
  letter-spacing: 0.02em;
}
.result-card-buy:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124,108,246,0.55);
}
.result-card-buy--hero {
  font-size: 1rem;
  padding: 12px 28px;
  border-radius: 12px;
}
.result-card-buy--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Secondary store cards grid ──────────────────────────────────────────── */
.result-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 10px;
}

.result-card {
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              var(--card-border) border-box;
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
  animation: slideUp 0.2s ease;
}
.result-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(124,108,246,0.15);
}

.result-card-footer {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ── Out of stock section ─────────────────────────────────────────────────── */
.result-unavail-section {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.result-unavail-label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  opacity: 0.6;
}
.result-unavail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.result-unavail-chip {
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 3px 10px;
  opacity: 0.55;
}

/* ── Legacy table (kept for mobile hide rules) ───────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              var(--card-border) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 4px 32px rgba(0,0,0,0.3);
}
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
thead th {
  background: var(--surface2);
  padding: 10px 14px; text-align: left; font-weight: 700;
  color: var(--muted); font-size: 0.74rem; text-transform: uppercase;
  letter-spacing: 0.08em; white-space: nowrap; border-bottom: 1px solid var(--border);
}
thead th.num { text-align: right; }
tbody tr { border-bottom: 1px solid var(--border); transition: background 0.1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--surface2); }
tbody td { padding: 11px 14px; vertical-align: middle; }
tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.store-link { color: var(--text); text-decoration: none; font-weight: 600; transition: color 0.15s; }
.store-link:hover { color: var(--accent); text-decoration: underline; }

.badge-free    { color: var(--green); font-weight: 700; }
.badge-paid    { color: var(--muted); }
.badge-unknown { color: var(--muted); }
.badge-na      { color: var(--muted); font-style: italic; }

.total-best  { color: var(--green); font-weight: 800; }
.total-worst { color: var(--red); }

.unavailable-row td { opacity: 0.32; font-style: italic; }

.buy-btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.1s;
  box-shadow: 0 2px 8px rgba(124, 108, 246, 0.35);
}
.buy-btn:hover { opacity: 0.85; transform: translateY(-1px); }

/* ── Store comments ──────────────────────────────────────────────────────────── */
.store-cell { display: flex; flex-direction: column; gap: 2px; }

.store-name-row { display: flex; align-items: center; gap: 5px; }

.comment-btn {
  background: none; border: none;
  color: var(--muted); font-size: 0.72rem;
  cursor: pointer; padding: 1px 4px;
  border-radius: 4px; line-height: 1;
  opacity: 0; transition: opacity 0.15s, color 0.15s;
  flex-shrink: 0;
}
tr:hover .comment-btn { opacity: 1; }
.comment-btn:hover { color: var(--accent); }

.store-comment {
  color: var(--muted); font-size: 0.78rem;
  font-style: italic; line-height: 1.3;
}

.comment-edit-row {
  display: flex; align-items: center; gap: 5px;
  margin-top: 2px;
}
.comment-input {
  flex: 1; min-width: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px; color: var(--text);
  font-size: 0.8rem; padding: 3px 8px;
  outline: none; transition: border-color 0.15s;
}
.comment-input:focus { border-color: var(--accent); }
.comment-save-btn {
  background: var(--accent); border: none;
  border-radius: 6px; color: #fff;
  font-size: 0.75rem; font-weight: 700;
  padding: 3px 10px; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
}
.comment-cancel-btn {
  background: none; border: 1px solid var(--border);
  border-radius: 6px; color: var(--muted);
  font-size: 0.75rem; padding: 3px 7px;
  cursor: pointer; flex-shrink: 0;
  transition: color 0.15s;
}
.comment-cancel-btn:hover { color: var(--text); }

.product-title {
  color: var(--muted);
  font-size: 0.81rem;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* ── Chart info button + popup ───────────────────────────────────────────── */
.chart-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chart-info-wrap { position: relative; }
.chart-info-btn {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  padding: 0;
}
.chart-info-btn:hover {
  background: rgba(124, 108, 246, 0.1);
  border-color: var(--accent);
  color: var(--accent);
}
.chart-info-popup {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  width: 270px;
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.55;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  z-index: 50;
  animation: slideUp 0.15s ease;
}
.chart-info-popup.hidden { display: none; }

/* ── Chart ───────────────────────────────────────────────────────────────── */
.chart-container {
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              var(--card-border) border-box;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
  height: 380px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.3);
}

/* Anon price-history gate: sits over #price-chart (never replaces the canvas
   in the DOM, so a real Chart.js render after sign-in still finds it). The
   canvas itself renders the REAL chart and gets .chart-blurred applied
   directly (see loadHistory/_setChartGateVisible); this overlay is just a
   floating CTA card, not a separate blur mechanism. An earlier version drew
   a fake decorative squiggle instead of the real (blurred) data; Michael
   called it out as looking cheap. */
#price-chart.chart-blurred {
  filter: blur(6px);
}
.chart-gate {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-gate.hidden { display: none; }
/* Floating card, not a full dark wash over the chart: the blurred canvas
   underneath is the whole point (it's what reads as "real"), so let it
   show through everywhere except behind the text itself. Same theme-aware
   surface/border convention as .confirm-modal, not a fixed dark card. */
.chart-gate-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 20px 24px;
  max-width: 260px;
  background: var(--surface);
  border: 1px solid rgba(124,108,246,0.35);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.chart-gate-icon {
  color: var(--accent, #7c6cf6);
  display: flex;
}
.chart-gate-msg {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}
.chart-gate-cta {
  background: var(--accent, #7c6cf6);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px 22px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}
.chart-gate-cta:hover { filter: brightness(1.1); }

#days-select {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  cursor: pointer;
}

/* ── Pokéball spinner ────────────────────────────────────────────────────── */
@keyframes pokespin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.15);
  border-top-color: #ffffff;
  border-bottom-color: var(--pokered);
  animation: pokespin 0.65s linear infinite;
  vertical-align: middle;
  margin-right: 7px;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── Header button group (notes + settings) ─────────────────────────────── */
.header-btns {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
/* "Sign up free" pill: solid fill (same look it always had) with a thin
   rotating rainbow BORDER, not a full rainbow fill. A full animated rainbow
   fill in the header competed with the wordmark for attention and felt like
   "too much" on the page (Michael's own call after seeing it live). Reuses
   the EXACT technique + conic-gradient stops + --v2angle/keyframe the hero
   best-price card's rainbow border already uses (.v2-rbord below, in the
   ui-v2 section) rather than inventing a second rainbow treatment: rainbow
   is meant to stay a rare, specific accent (wordmark + hero card), not a
   general "grab attention" tool. --v2angle/@keyframes v2-rbord-rotate are
   both registered top-level, so referencing them here from outside
   html.ui-v2 works fine. font-size stays shrunk to compensate for "free"
   being back in the label without growing the button, same reasoning as
   before (commit 9f2ed05: a solid pill reads bigger than the outlined
   "Sign in" pill next to it even at literally the same pixel size). */
#signup-btn {
  background: linear-gradient(var(--text), var(--text)) padding-box,
              conic-gradient(from var(--v2angle), #7C6FE0, #3B82F6, #22C55E, #EAB308, #F97316, #EC4899, #7C6FE0) border-box;
  animation: v2-rbord-rotate 6s linear infinite;
  color: var(--bg);
  font-size: .74rem;
}
#signup-btn:hover { filter: brightness(0.96); }

/* ── Version badge ───────────────────────────────────────────────────────── */
.version-badge {
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  user-select: none;
}

/* ── Notes button ────────────────────────────────────────────────────────── */
#notes-btn {
  background: rgba(124, 108, 246, 0.1);
  border: 1px solid rgba(124, 108, 246, 0.28);
  color: var(--accent);
  border-radius: 10px;
  font-size: 1.1rem;
  width: 42px; height: 42px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
  position: relative; z-index: 1;
}
#notes-btn:hover {
  background: rgba(124, 108, 246, 0.2);
  border-color: var(--accent);
}

/* ── Settings gear button ────────────────────────────────────────────────── */
#settings-btn {
  background: rgba(124, 108, 246, 0.1);
  border: 1px solid rgba(124, 108, 246, 0.28);
  color: var(--accent);
  border-radius: 10px;
  font-size: 1.2rem;
  width: 42px; height: 42px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
  position: relative; z-index: 1;
}
#settings-btn:hover {
  background: rgba(124, 108, 246, 0.2);
  border-color: var(--accent);
}

/* ── Settings overlay ────────────────────────────────────────────────────── */
#settings-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 160;
  display: flex;
  justify-content: flex-end;
}
#settings-overlay.hidden { display: none; }

#settings-panel {
  background: var(--surface);
  border-left: 1px solid var(--border);
  width: 440px; max-width: 100vw;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}
.settings-header h2 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent);
}
#settings-close {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 200;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
#settings-close:hover { background: rgba(255,255,255,0.12); color: var(--accent); }

/* ── Settings sections ───────────────────────────────────────────────────── */
.settings-section {
  border-top: 1px solid var(--border);
  padding: 22px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.settings-section h3 {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 8px;
}

.settings-row {
  display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
}
.settings-row label { font-size: 0.9rem; color: var(--text); white-space: nowrap; }

.settings-input-group { display: flex; gap: 8px; align-items: center; }
.settings-input-group input[type="number"] {
  width: 90px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  color: var(--text); font-size: 0.95rem;
  padding: 7px 12px; outline: none;
  transition: border-color 0.15s;
}
.settings-input-group input[type="number"]:focus { border-color: var(--accent); }

.settings-status { font-size: 0.82rem; color: var(--muted); min-height: 18px; }
.settings-status.ok    { color: var(--green); }
.settings-status.error { color: var(--red); }

/* ── Settings buttons ────────────────────────────────────────────────────── */
.btn-secondary {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text); border-radius: 8px;
  font-size: 0.85rem; font-weight: 600;
  padding: 7px 14px; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* ── Account info ── */
.account-info { margin-bottom: 4px; }
.account-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px;
}
.discord-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid #5865F2;
  flex-shrink: 0;
}
.discord-avatar-placeholder {
  width: 40px; height: 40px; border-radius: 50%;
  background: #5865F2; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem;
  flex-shrink: 0;
}
.account-details { display: flex; flex-direction: column; gap: 3px; }
.account-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.account-name { font-size: 0.95rem; font-weight: 700; color: var(--text); }

.account-email { font-size: 0.75rem; color: var(--muted); }
.account-discord-sub { font-size: 0.75rem; color: var(--muted); }

/* ── Profile edit pen button ──────────────────────────────────────────────── */
.profile-edit-pen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  vertical-align: middle;
  margin-left: 6px;
  line-height: 1;
  padding: 0;
}
.profile-edit-pen:hover { color: var(--text); background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); }

/* ── Profile edit modal ───────────────────────────────────────────────────── */
.profile-edit-dialog {
  background: var(--surface);
  border: 1px solid rgba(124,108,246,0.35);
  border-radius: 16px;
  padding: 24px 24px 20px;
  width: 360px;
  max-width: 92vw;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: slideUp 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.profile-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.profile-edit-title { font-size: 1rem; font-weight: 700; color: var(--text); }
.profile-edit-close {
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.06);
  color: var(--muted); font-size: 0.8rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.profile-edit-close:hover { background: rgba(255,255,255,0.12); color: var(--text); }
.profile-edit-avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.profile-edit-avatar-preview {
  width: 52px; height: 52px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  background: var(--surface2);
  border: 2px solid rgba(124,108,246,0.3);
}
.profile-edit-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-edit-avatar-placeholder {
  width: 100%; height: 100%;
  background: #5865F2; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.3rem;
}
.profile-edit-avatar-info { display: flex; flex-direction: column; gap: 5px; }
.profile-edit-avatar-label { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.profile-edit-avatar-btn {
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  color: var(--muted); border-radius: 7px;
  font-size: 0.8rem; font-weight: 600;
  padding: 5px 12px; cursor: not-allowed;
  opacity: 0.5;
  width: fit-content;
}
.profile-edit-avatar-hint { font-size: 0.7rem; color: var(--muted); }
.profile-edit-label { font-size: 0.82rem; font-weight: 600; color: var(--text); margin-bottom: -8px; }
.profile-edit-input {
  width: 100%;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.93rem;
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.profile-edit-input:focus { border-color: var(--primary); }
.profile-edit-hint { font-size: 0.72rem; color: var(--muted); margin-top: -8px; }
.profile-edit-actions { display: flex; gap: 8px; margin-top: 2px; }
.profile-edit-cancel {
  flex: 1;
  background: transparent; border: 1px solid rgba(255,255,255,0.12);
  color: var(--muted); border-radius: 9px;
  font-size: 0.88rem; font-weight: 600;
  padding: 9px 0; cursor: pointer;
  transition: background 0.15s;
}
.profile-edit-cancel:hover { background: rgba(255,255,255,0.05); }
.profile-edit-save {
  flex: 2;
  background: linear-gradient(135deg, #8b7cf8, #6a5ae0);
  color: #fff; border: none; border-radius: 9px;
  font-size: 0.9rem; font-weight: 700;
  padding: 9px 0; cursor: pointer;
  transition: opacity 0.15s;
}
.profile-edit-save:hover { opacity: 0.88; }
.btn-connect-discord {
  display: inline-block; margin-top: 10px;
  background: rgba(88,101,242,0.12); border: 1px solid rgba(88,101,242,0.35);
  color: #7289da; border-radius: 8px;
  font-size: 0.82rem; font-weight: 600;
  padding: 7px 14px; text-decoration: none;
  transition: background 0.15s;
}
.btn-connect-discord:hover { background: rgba(88,101,242,0.22); }
.btn-connect-discord--linked {
  background: rgba(255,80,80,0.08); border-color: rgba(255,80,80,0.3);
  color: #e06c6c; cursor: pointer;
}
.btn-connect-discord--linked:hover { background: rgba(255,80,80,0.16); }
.account-danger-zone { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(248,113,113,0.15); }
.account-delete-btn {
  background: transparent;
  border: 1px solid rgba(224,48,48,0.3);
  color: #f87171;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.account-delete-btn:hover { background: rgba(224,48,48,0.1); border-color: rgba(224,48,48,0.5); }
.notif-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.notif-row:last-child { border-bottom: none; }
.notif-label { display: flex; flex-direction: column; gap: 2px; }
.notif-label span:first-child { font-size: 0.9rem; color: var(--text); }
.notif-sub { font-size: 0.75rem; color: var(--muted); }

/* Notification email picker */
.notif-email-section {
  padding: 6px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.notif-email-row {
  display: flex; gap: 8px; align-items: center; margin-bottom: 8px;
}
.notif-email-input {
  flex: 1; padding: 7px 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: 0.85rem;
  outline: none; transition: border-color 0.15s;
}
.notif-email-input:focus { border-color: var(--accent); }
.notif-email-save {
  padding: 7px 14px; background: var(--accent); color: #fff;
  border: none; border-radius: 8px; font-size: 0.82rem; font-weight: 700;
  cursor: pointer; flex-shrink: 0; transition: opacity 0.15s;
}
.notif-email-save:hover { opacity: 0.85; }
.notif-email-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.notif-chip {
  padding: 4px 10px; border-radius: 20px; font-size: 0.75rem;
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); cursor: pointer; transition: all 0.15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
.notif-chip:hover { border-color: var(--accent); color: var(--text); }
.notif-chip--active { border-color: var(--accent); color: var(--accent); background: rgba(124,108,246,0.1); }
.notif-email-status {
  display: block; font-size: 0.78rem; margin-top: 4px; min-height: 1em;
}
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; background: #2a3560;
  border-radius: 22px; cursor: pointer; transition: background 0.2s;
}
.toggle-slider::before {
  content: ''; position: absolute;
  width: 16px; height: 16px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }
.toggle-switch input:disabled + .toggle-slider { opacity: 0.4; cursor: not-allowed; }

.catalog-pause-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface);
}
.catalog-pause-label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.catalog-pause-hint { font-size: 0.78rem; color: var(--muted); }
.catalog-pause-row--active {
  border-color: #e03030; background: rgba(224, 48, 48, 0.08);
}
.catalog-pause-row--active .catalog-pause-label { color: #e03030; }
.catalog-pause-row--active .toggle-slider { background: #e03030; }

.btn-danger {
  background: transparent;
  border: 1px solid rgba(224, 48, 48, 0.45);
  color: var(--red); border-radius: 8px;
  font-size: 0.88rem; font-weight: 600;
  padding: 8px 16px; cursor: pointer;
  transition: background 0.15s;
  align-self: flex-start;
}
.btn-danger:hover { background: rgba(224, 48, 48, 0.1); }
.btn-danger:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: var(--accent); border: none;
  color: #fff; border-radius: 8px;
  font-size: 0.9rem; font-weight: 800;
  padding: 9px 20px; cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  align-self: flex-start;
  box-shadow: 0 2px 10px rgba(124, 108, 246, 0.3);
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-sm {
  font-size: 0.8rem; font-weight: 600;
  padding: 5px 12px; border-radius: 6px;
  cursor: pointer; transition: background 0.15s, opacity 0.15s;
  border: 1px solid transparent;
}
.btn-sm.btn-danger {
  background: transparent;
  border-color: rgba(224, 48, 48, 0.45);
  color: var(--red); padding: 5px 12px;
}
.btn-sm.btn-danger:hover { background: rgba(224, 48, 48, 0.1); }
.btn-sm.btn-success {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.45);
  color: #22c55e; padding: 5px 12px;
}
.btn-sm.btn-success:hover { background: rgba(34, 197, 94, 0.22); }
.btn-sm.btn-primary {
  background: var(--accent); border: none;
  color: #fff; padding: 5px 12px;
  box-shadow: none;
}
.btn-sm.btn-primary:hover { opacity: 0.88; }

/* ── Scraper list ────────────────────────────────────────────────────────── */
.scraper-badge {
  background: rgba(124, 108, 246, 0.12);
  border: 1px solid rgba(124, 108, 246, 0.28);
  border-radius: 10px; font-size: 0.75rem;
  padding: 1px 8px; color: var(--accent);
  font-weight: 700; text-transform: none; letter-spacing: 0;
}

/* ── Active Stores table ─────────────────────────────────────────────────── */
.scraper-list {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
  overflow-y: auto;
}
.scraper-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.scraper-table thead th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky; top: 0;
  background: #0d1326;
  z-index: 1;
}
.sortable-th {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.sortable-th:hover { color: var(--text); }
.sort-icon { opacity: 0.3; font-size: 0.65rem; margin-left: 3px; }
.sort-icon--active { opacity: 1; color: var(--accent); }
.scraper-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.scraper-table tbody tr:last-child { border-bottom: none; }
.scraper-table tbody tr:hover { background: rgba(124,108,246,0.04); }
.scraper-table td {
  padding: 10px 12px;
  vertical-align: middle;
}
.scraper-name {
  color: var(--text); font-weight: 500;
  white-space: nowrap;
}
.scraper-url {
  color: var(--muted); font-size: 0.78rem;
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 260px; display: block;
}
.scraper-url:hover { color: var(--accent); }
.scraper-actions {
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.scraper-delete-btn {
  background: none; border: none;
  color: var(--red); font-size: 0.78rem; font-weight: 600;
  padding: 4px 8px; cursor: pointer; opacity: 0.6;
  border-radius: 5px; transition: opacity 0.15s, background 0.15s;
}
.scraper-delete-btn:hover { opacity: 1; background: rgba(232,93,93,0.08); }

/* ── Per-scraper threshold cell ──────────────────────────────────────────── */
.scraper-threshold {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.79rem; color: var(--muted);
}
.scraper-threshold input[type="number"] {
  width: 72px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px; color: var(--text);
  font-size: 0.82rem; padding: 3px 8px;
  outline: none; transition: border-color 0.15s;
}
.scraper-threshold input[type="number"]:focus { border-color: var(--accent); }
.scraper-threshold button {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px; color: var(--muted);
  font-size: 0.78rem; padding: 2px 9px;
  cursor: pointer; white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.scraper-threshold button:hover { border-color: var(--accent); color: var(--accent); }
.scraper-threshold button:disabled { opacity: 0.4; cursor: not-allowed; }

.threshold-status { font-size: 0.75rem; }
.threshold-status.ok    { color: var(--green); }
.threshold-status.error { color: var(--red); }

/* ── Add store form ──────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 0.82rem; color: var(--muted); }
.form-group input,
.form-group textarea,
.form-group select {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 8px; color: var(--text);
  font-size: 0.9rem; padding: 8px 12px;
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%; box-sizing: border-box;
}
.form-group textarea { resize: vertical; font-family: inherit; }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 108, 246, 0.1);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--muted); }

/* ── Notes overlay ───────────────────────────────────────────────────────── */
#notes-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
#notes-overlay.hidden { display: none; }

#notes-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 560px; max-width: 95vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 20px;
  box-shadow: 0 8px 48px rgba(0,0,0,0.6);
}

.notes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.notes-header h2 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent);
}
#notes-close {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
#notes-close:hover { background: rgba(255,255,255,0.12); color: var(--accent); }

.notes-hint {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 14px;
}

#notes-textarea {
  flex: 1;
  min-height: 260px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 12px 14px;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
#notes-textarea:focus { border-color: var(--accent); }
#notes-textarea::placeholder { color: var(--muted); }

.notes-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
}

/* ── Confirm dialog ──────────────────────────────────────────────────────── */
.confirm-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 28px 22px;
  width: 360px; max-width: 92vw;
  box-shadow: 0 8px 48px rgba(0,0,0,0.7);
}
.confirm-msg {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 22px;
}
.confirm-btns {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.alert-email-display {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface2); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 9px 12px;
  font-size: 0.87rem; color: var(--text);
}
.alert-email-badge {
  font-size: 0.7rem; font-weight: 700;
  color: #2ecc71; background: rgba(46,204,113,0.12);
  border: 1px solid rgba(46,204,113,0.3);
  border-radius: 4px; padding: 1px 6px;
  white-space: nowrap;
}


/* ── Alert list in settings ───────────────────────────────────────────────── */

.alert-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.alert-item {
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              var(--card-border) border-box;
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.alert-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);
  transform: translateX(-100%);
  pointer-events: none;
  border-radius: inherit;
}
.alert-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(124,108,246,0.2);
}
.alert-item:hover::after {
  animation: shimmerSlide 0.6s ease forwards;
}

/* Inner row: image + body + remove btn — same layout as before */
.alert-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Expansion panel — hidden by default, shown on .alert-item--expanded */
.alert-expand {
  display: none;
  padding: 10px 2px 0;
  margin-top: 10px;
  border-top: 1px solid var(--border);
}
.alert-item--expanded .alert-expand { display: block; }

.alert-expand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.alert-expand-label {
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}
.alert-price-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.alert-price-prefix {
  color: var(--muted);
  font-size: 0.9rem;
}
.alert-price-input {
  width: 80px;
  padding: 5px 8px;
  border-radius: 7px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
}
.alert-price-input:focus { outline: none; border-color: var(--accent); }
.alert-save-btn {
  padding: 5px 13px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: opacity 0.15s;
}
.alert-save-btn:hover { opacity: 0.85; }
.alert-save-btn:disabled { opacity: 0.5; cursor: default; }
.alert-search-btn {
  padding: 5px 13px;
  background: none;
  border: 1.5px solid var(--border);
  color: var(--text);
  border-radius: 7px;
  font-size: 0.85rem;
  cursor: pointer;
  margin-left: auto;
  transition: background 0.15s;
}
.alert-search-btn:hover { background: var(--surface-hover, rgba(255,255,255,0.05)); }

.alert-item-body {
  flex: 1;
  min-width: 0;
}

.alert-item-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 3px;
}

.alert-query {
  font-weight: 600;
  color: var(--text);
  font-size: 0.9rem;
}

.alert-target {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}

.alert-item-meta {
  color: var(--muted);
  font-size: 0.78rem;
}

.alert-remove-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #e05555;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.alert-remove-btn:hover {
  background: rgba(224, 85, 85, 0.15);
  color: #ff6b6b;
}

.alert-quota-wrap {
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              var(--card-border) border-box;
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.no-alerts-msg {
  color: var(--muted);
  font-size: 0.85rem;
  font-style: italic;
  margin: 0;
}

/* ── SMTP badge ───────────────────────────────────────────────────────────── */

.smtp-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
}

.smtp-ok   { background: rgba(46,204,113,0.15); color: #2ecc71; }
.smtp-warn { background: rgba(124,108,246,0.12);  color: #ffcb05; }
.smtp-unchecked { background: #1e2d55; color: #6878a8; }

/* ── Email usage bar ──────────────────────────────────────────────────────── */

.email-usage-wrap {
  margin-bottom: 4px;
}

.email-usage-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: #6878a8;
  margin-bottom: 5px;
}

.email-usage-bar-bg {
  background: #1e2d55;
  border-radius: 99px;
  height: 7px;
  overflow: hidden;
}

.email-usage-bar {
  height: 100%;
  border-radius: 99px;
  background: #2ecc71;
  transition: width 0.4s ease, background 0.3s;
  width: 0%;
}

.email-usage-bar--warn   { background: #ffcb05; }
.email-usage-bar--danger { background: #e03030; }

/* ── Email paused banner ──────────────────────────────────────────────────── */

.email-paused-banner {
  background: rgba(255, 152, 0, 0.12);
  border: 1px solid rgba(255, 152, 0, 0.35);
  border-radius: 10px;
  color: #ff9800;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 10px 14px;
  margin-top: 12px;
  display: flex;
  align-items: center;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 36px 20px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  margin-top: 12px;
}
.empty-icon { font-size: 2.2rem; margin-bottom: 10px; }
.empty-title { font-weight: 700; font-size: 1rem; margin-bottom: 6px; }
.empty-hint { color: var(--muted); font-size: 0.85rem; }
.empty-hint em { color: var(--accent); font-style: normal; }

/* ── Abbreviation hint ───────────────────────────────────────────────────────  */
.abbr-hint { color: var(--muted); font-size: 0.82rem; margin-left: 6px; }

/* ── Abbreviation management ─────────────────────────────────────────────────  */
.abbr-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }

.abbr-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 0.85rem;
}
.abbr-key { font-weight: 700; color: var(--accent); min-width: 48px; }
.abbr-arrow { color: var(--muted); }
.abbr-val { flex: 1; color: var(--text); }
.abbr-delete-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.abbr-delete-btn:hover { color: var(--red); background: rgba(224, 48, 48, 0.1); }

.abbr-form-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.abbr-form-row input {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 12px;
  font-size: 0.85rem;
}
#abbr-input { max-width: 90px; flex: none; }

/* ── Store staging (admin-only) ──────────────────────────────────────────── */
.scraper-item--staging {
  border: 1px dashed rgba(124, 108, 246, 0.35) !important;
  background: rgba(124, 108, 246, 0.04) !important;
}
.scraper-row--staging  td { background: rgba(124, 108, 246, 0.04); }
.scraper-row--disabled td { background: rgba(100, 100, 100, 0.04); opacity: 0.6; }
.scraper-row--selected td { background: rgba(124, 108, 246, 0.1) !important; }

.staging-badge {
  background: rgba(124, 108, 246, 0.15);
  border: 1px solid rgba(124, 108, 246, 0.35);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  letter-spacing: 0.3px;
}

.scraper-publish-btn {
  background: rgba(45, 213, 91, 0.1);
  border: 1px solid rgba(45, 213, 91, 0.3);
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.scraper-publish-btn:hover { background: rgba(45, 213, 91, 0.2); }

.scraper-unpublish-btn {
  background: rgba(124, 108, 246, 0.08);
  border: 1px solid rgba(124, 108, 246, 0.25);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.scraper-unpublish-btn:hover { background: rgba(124, 108, 246, 0.15); }

/* ── Usage bars ──────────────────────────────────────────────────────────── */
.usage-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.usage-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.87rem;
  color: var(--text);
}
.usage-count {
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.usage-sublabel {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 400;
}
.usage-bar-bg {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
}
.usage-bar {
  height: 100%;
  border-radius: 99px;
  width: 0%;
  background: var(--green);
  transition: width 0.5s ease, background 0.4s ease;
}

/* ── Toggle switch ───────────────────────────────────────────────────────── */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 12px;
}
.toggle-label {
  font-size: 0.9rem;
  color: var(--text);
  user-select: none;
}
.toggle-wrap { flex-shrink: 0; }
.toggle-wrap input[type="checkbox"] { display: none; }
.toggle-track {
  display: block;
  width: 40px; height: 22px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 99px;
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}
.toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: var(--muted);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.toggle-wrap input:checked + .toggle-track {
  background: rgba(124, 108, 246, 0.2);
  border-color: var(--accent);
}
.toggle-wrap input:checked + .toggle-track .toggle-thumb {
  transform: translateX(18px);
  background: var(--accent);
}

/* ── Cache note & refresh button ────────────────────────────────────────── */
.cache-note {
  color: var(--muted);
  font-size: 0.82rem;
}
.result-freshness {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.35;
}
.result-freshness:empty { display: none; }
.result-freshness .rf-clock { display: inline-flex; align-items: center; vertical-align: -2px; opacity: 0.75; margin-right: 2px; }
.result-freshness .rf-pro {
  color: var(--accent2);
  font-weight: 600;
  text-decoration: none;
}
.result-freshness .rf-pro:hover { text-decoration: underline; }
.cache-refresh-btn {
  background: none;
  border: none;
  color: var(--accent2);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  transition: opacity 0.15s;
}
.cache-refresh-btn:hover { opacity: 0.75; }
/* #admin-refresh-btn visibility is controlled directly by JS (style.display) */
.search-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  /* no min-height — collapses to nothing when status is empty */
}

/* ── Quick alert bar (under search) ─────────────────────────────────────── */
#quick-alert-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 10px 16px;
  background: rgba(124, 108, 246, 0.05);
  border: 1px solid rgba(124, 108, 246, 0.22);
  border-radius: var(--radius);
  font-size: 0.87rem;
  color: var(--text);
}

.quick-alert-icon { font-size: 1rem; flex-shrink: 0; }

.quick-alert-label { color: var(--muted); white-space: nowrap; }
.quick-alert-label strong { color: var(--text); font-weight: 700; }

.quick-alert-input-wrap {
  display: flex;
  align-items: center;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.quick-alert-input-wrap:focus-within { border-color: var(--accent); }

.quick-alert-dollar {
  padding: 0 6px 0 10px;
  color: var(--accent);
  font-weight: 700;
}

#quick-alert-price {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 0.9rem;
  padding: 7px 10px 7px 0;
  outline: none;
  width: 80px;
}

.quick-alert-submit {
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s, transform 0.1s;
}
.quick-alert-submit:hover { opacity: 0.88; transform: translateY(-1px); }
.quick-alert-submit:active { transform: none; }
.quick-alert-submit:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

#quick-alert-status {
  font-size: 0.82rem;
  min-width: 60px;
}

/* ── Admin user management ── */
.admin-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  gap: 12px;
}
.admin-user-row:last-child { border-bottom: none; }
.admin-user-info {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.admin-user-name {
  color: #d0daf0;
  font-size: 0.9rem;
  font-weight: 600;
  margin-right: 6px;
  white-space: nowrap;
}
.admin-user-meta {
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}
.admin-toggle-btn {
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.admin-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
.admin-toggle-btn--on {
  background: rgba(100,200,120,0.12);
  border-color: rgba(100,200,120,0.4);
  color: #7dda8f;
}
.admin-toggle-btn--on:hover {
  background: rgba(200,80,80,0.12);
  border-color: rgba(200,80,80,0.4);
  color: #e07070;
}

/* ── Tab bar ── */
/* ── Desktop tab bar — lives inside header-inner ─────────────────────────── */
#tab-bar {
  display: flex;
  gap: 2px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  position: relative;
  flex: 1;
  justify-content: center;
}
/* Sliding pill indicator */
#tab-indicator {
  position: absolute;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: var(--holo);
  background-size: 300% 300%;
  animation: foilShift 4s ease infinite;
  border: none;
  box-shadow: none;
  top: auto;
  transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}
.tab-btn {
  flex: none;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  transition: color 0.2s;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tab-icon svg {
  width: 15px;
  height: 15px;
  display: block;
  transition: color 0.2s, filter 0.2s;
  flex-shrink: 0;
}
.tab-btn:hover { color: var(--text); }
.tab-btn--active {
  color: var(--accent);
  font-weight: 700;
}
.tab-btn--active .tab-icon svg {
  filter: drop-shadow(0 0 4px rgba(167,139,250,0.55));
}
.tab-count {
  position: absolute;
  top: -7px;
  right: -7px;
  pointer-events: none;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 1px 5px;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
  box-shadow: 0 0 8px rgba(124,108,246,0.5);
}
.tab-count:empty { display: none; }

/* ── Star button ── */
.star-btn {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--muted);
  padding: 2px 4px;
  transition: color 0.15s, transform 0.1s;
  line-height: 1;
}
.star-btn:hover { color: #f5c842; transform: scale(1.2); }
.star-btn--on { color: #f5c842; }
.star-btn--on:hover { color: #e07070; }

/* ── Section top spacing — consistent across all tabs ── */
#search-section,
#watchlist-section,
#alerts-section,
#stores-section,
#devportal-section { padding-top: 12px; }


/* ── Watchlist panel ── */
#watchlist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.btn-secondary-sm {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.btn-secondary-sm:hover { color: #d0daf0; border-color: rgba(255,255,255,0.3); }

/* ── Store logo upload (admin form) ──────────────────────────────────────── */
.sp-logo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}
.sp-logo-preview {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--surface3);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.sp-logo-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sp-logo-fallback { font-size: 1.4rem; font-weight: 700; color: var(--accent); }
.sp-logo-actions { display: flex; flex-direction: column; gap: 6px; }
.sp-logo-upload-label {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
}

.card-clickable {
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
/* Shimmer overlay on hover */
.card-clickable::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);
  transform: translateX(-100%);
  pointer-events: none;
  border-radius: inherit;
}
.card-clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(124,108,246,0.2);
}
.card-clickable:hover::after {
  animation: shimmerSlide 0.6s ease forwards;
}

.watchlist-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              var(--card-border) border-box;
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
}
.wl-thumb {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  flex-shrink: 0;
}
.wl-thumb-placeholder {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  flex-shrink: 0;
}
.wl-info { flex: 1; min-width: 0; }
.wl-search-btn {
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
  transition: color 0.15s;
}
.wl-search-btn:hover { color: var(--accent); }
.wl-price-row { margin-top: 3px; font-size: 0.85rem; }
.wl-buy-link {
  color: #5b9cf6;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.82rem;
}
.wl-buy-link:hover { text-decoration: underline; }
.wl-price { color: #7dda8f; font-weight: 700; }
.wl-store { color: var(--muted); }
.wl-no-price { color: var(--muted); font-style: italic; }
.wl-unavailable { color: var(--muted); font-style: italic; }
.wl-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wl-remove-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #e05555;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.wl-remove-btn:hover { background: rgba(224,85,85,0.15); color: #ff6b6b; }
.watchlist-empty { text-align: center; padding: 40px 0; color: var(--muted); }
#watchlist-body { display: flex; flex-direction: column; gap: 10px; }

/* ── Users modal ── */
#users-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#users-overlay.hidden { display: none; }
#users-panel {
  background: var(--surface, #151c2c);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  width: 100%;
  max-width: 680px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.users-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.users-header h2 { margin: 0; font-size: 1.15rem; }
.users-header button {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.users-header button:hover { background: rgba(255,255,255,0.08); }
#users-panel .notes-hint { padding: 0 24px; flex-shrink: 0; }
#users-list {
  overflow-y: auto;
  padding: 8px 24px 24px;
  flex: 1;
}
.um-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  gap: 16px;
}
.um-row:last-child { border-bottom: none; }
.um-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.um-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
.um-avatar-placeholder {
  background: rgba(139,92,246,0.3);
  color: var(--accent);
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.um-info { display: flex; flex-direction: column; min-width: 0; }
.um-name { color: #d0daf0; font-weight: 600; font-size: 0.95rem; }
.um-meta { color: var(--muted); font-size: 0.78rem; margin-top: 2px; }
.um-actions { display: flex; gap: 8px; flex-shrink: 0; }
.um-admin-btn {
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.um-admin-btn:hover { border-color: var(--accent); color: var(--accent); }
.um-admin-btn--on {
  background: rgba(100,200,120,0.12);
  border-color: rgba(100,200,120,0.4);
  color: #7dda8f;
}
.um-admin-btn--on:hover {
  background: rgba(200,80,80,0.12);
  border-color: rgba(200,80,80,0.4);
  color: #e07070;
}
.um-reset-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.um-reset-btn:hover { color: #f5c842; border-color: #f5c842; }
.um-reset-btn:disabled { opacity: 0.5; cursor: default; }
.wl-age { color: var(--muted); font-size: 0.78rem; }
.wl-age--stale { color: #c98a2e; }
.wl-stale-hint {
  font-size: 0.78rem;
  cursor: help;
  opacity: 0.85;
}

/* ── Watchlist rate-limit warning ── */
.wl-rate-limit-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: rgba(255, 152, 0, 0.1);
  border: 1px solid rgba(255, 152, 0, 0.35);
  border-radius: 10px;
  color: #ffaa44;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.4;
}

/* ── Watchlist refresh spinner overlay ── */
.wl-refresh-overlay {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 0 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--muted);
  font-size: 0.87rem;
}

/* ── Custom confirm modal ── */
.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.15s ease;
}
.confirm-modal-overlay.hidden { display: none; }
.confirm-modal {
  background: var(--surface);
  border: 1px solid rgba(124,108,246,0.35);
  border-radius: 16px;
  padding: 32px 28px 24px;
  max-width: 360px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: slideUp 0.18s ease;
}
.confirm-modal-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--muted);
}
.confirm-modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
}
.confirm-modal-body {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0 0 24px;
  line-height: 1.5;
  word-break: break-word;
}
.confirm-modal-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.confirm-cancel-btn {
  flex: 1;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.confirm-cancel-btn:hover { border-color: rgba(255,255,255,0.35); color: #d0daf0; }
.confirm-ok-btn {
  flex: 1;
  background: rgba(220,50,50,0.15);
  border: 1px solid rgba(220,50,50,0.4);
  border-radius: 8px;
  color: #e07070;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.confirm-ok-btn:hover { background: rgba(220,50,50,0.28); border-color: rgba(220,50,50,0.7); }

/* Marketing-consent prompt: overrides the shared red .confirm-ok-btn/neutral
   .confirm-cancel-btn — "Yes" is a positive action here, not a destructive
   one, so it gets green; "No thanks" gets red instead of the usual neutral. */
#mc-yes-btn {
  background: color-mix(in srgb, var(--green) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
  color: var(--green);
}
#mc-yes-btn:hover {
  background: color-mix(in srgb, var(--green) 30%, transparent);
  border-color: color-mix(in srgb, var(--green) 75%, transparent);
}
#mc-no-btn {
  background: color-mix(in srgb, var(--red) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
  color: var(--red);
}
#mc-no-btn:hover {
  background: color-mix(in srgb, var(--red) 28%, transparent);
  border-color: color-mix(in srgb, var(--red) 70%, transparent);
}

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

/* ── Delete account modal (irreversible — deliberately "scary") ───────────── */
.delete-account-dialog {
  background: var(--surface);
  border: 1px solid rgba(224,48,48,0.4);
  border-radius: 16px;
  padding: 28px 26px 22px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: slideUp 0.18s ease;
}
.delete-account-icon { display: flex; justify-content: center; margin-bottom: 12px; color: #e03030; }
.delete-account-title { font-size: 1.1rem; font-weight: 800; color: var(--text); margin: 0 0 10px; text-align: center; }
.delete-account-body { font-size: 0.86rem; color: var(--muted); line-height: 1.55; margin: 0 0 18px; text-align: center; }
.delete-account-body strong { color: #f87171; }
.delete-account-label { font-size: 0.78rem; font-weight: 600; color: var(--text); display: block; margin-bottom: 6px; }
.delete-account-input {
  width: 100%;
  background: var(--surface2);
  border: 1.5px solid rgba(224,48,48,0.35);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 10px 12px;
  outline: none;
  box-sizing: border-box;
  text-align: center;
  transition: border-color 0.2s;
  margin-bottom: 16px;
}
.delete-account-input:focus { border-color: #e03030; }
.delete-account-actions { display: flex; gap: 8px; }
.delete-account-cancel {
  flex: 1;
  background: transparent; border: 1px solid rgba(255,255,255,0.15);
  color: var(--muted); border-radius: 9px;
  font-size: 0.88rem; font-weight: 600;
  padding: 10px 0; cursor: pointer;
  transition: background 0.15s;
}
.delete-account-cancel:hover { background: rgba(255,255,255,0.05); }
.delete-account-confirm {
  flex: 2;
  background: rgba(220,50,50,0.18);
  border: 1px solid rgba(220,50,50,0.5);
  color: #ff8080;
  border-radius: 9px;
  font-size: 0.88rem; font-weight: 700;
  padding: 10px 0; cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.delete-account-confirm:hover:not(:disabled) { background: rgba(220,50,50,0.3); }
.delete-account-confirm:disabled { opacity: 0.35; cursor: not-allowed; }
.delete-account-status { font-size: 0.8rem; text-align: center; margin-top: 12px; display: block; }

/* ── Product Catalog (admin) ─────────────────────────────────────────────── */
/* kept for backward compat in case anything else references these */
.catalog-empty-msg {
  font-size: 0.83rem;
  color: var(--muted);
  padding: 4px 0;
}
.catalog-scrape-status {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 2px;
}

/* ── Canonical catalog sync panel ───────────────────────────────────────── */
.catalog-count-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 0.83rem;
}
.catalog-count-name {
  font-weight: 600;
  color: var(--text);
  min-width: 110px;
}
.catalog-count-pill {
  background: rgba(99, 102, 241, 0.15);
  color: var(--accent);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.catalog-count-detail {
  color: var(--muted);
  font-size: 0.78rem;
}
.catalog-sync-btn {
  font-size: 0.82rem;
  padding: 6px 14px;
}
.catalog-sync-all {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.catalog-sync-all:hover:not(:disabled) {
  background: var(--accent-hover, #5254c8);
}
.catalog-sync-reset {
  background: rgba(248,113,113,0.1);
  border-color: rgba(248,113,113,0.4);
  color: #f87171;
}
.catalog-sync-reset:hover { background: rgba(248,113,113,0.2); }
.catalog-sync-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.catalog-scope-select {
  font-size: 0.82rem;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-secondary, var(--bg));
  color: var(--text);
}
.catalog-scope-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.catalog-status-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.catalog-status-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.78rem;
}
.catalog-status-label {
  color: var(--muted);
  min-width: 90px;
  flex-shrink: 0;
}
.catalog-status-value {
  color: var(--text-secondary, var(--muted));
  flex: 1;
  min-width: 0;
}
.catalog-status-ok      { color: var(--green, #4ade80); font-weight: 600; }
.catalog-status-warn    { color: var(--yellow, #facc15); font-weight: 600; }
.catalog-status-err     { color: var(--red, #f87171); font-weight: 600; }
.catalog-status-running { color: var(--accent); font-weight: 600; }

.catalog-progress-wrap { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.catalog-progress-label { font-size: 0.82rem; color: var(--accent); font-weight: 600; }
.catalog-progress-label em { color: var(--muted); font-style: normal; font-weight: 400; }
.catalog-progress-bar-track {
  width: 100%; height: 6px;
  background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden;
}
.catalog-progress-bar-fill {
  height: 100%; background: var(--accent); border-radius: 99px;
  transition: width 0.4s ease;
}

.catalog-interval-select {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.78rem;
  padding: 4px 8px;
  cursor: pointer;
  outline: none;
}
.catalog-interval-select:focus {
  border-color: var(--accent);
}
.catalog-sync-log {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.75rem;
  font-family: monospace;
  color: var(--muted);
  white-space: pre-wrap;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  margin-top: 8px;
}

/* ── Product image ───────────────────────────────────────────────────────── */
.product-img {
  display: block;
  height: 140px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 10px;
  margin-bottom: 14px;
  background: rgba(255,255,255,0.03);
}

/* ── Out of stock empty state ────────────────────────────────────────────── */
.out-of-stock-notice {
  text-align: center;
  padding: 40px 20px !important;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.out-of-stock-ic {
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(124,108,246,0.12);
  margin-bottom: 4px;
}
.out-of-stock-msg { color: var(--muted); max-width: 420px; }
.out-of-stock-alert-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 11px 22px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.out-of-stock-alert-btn:hover { opacity: 0.88; transform: translateY(-1px); }

/* ── Trend & price badges ────────────────────────────────────────────────── */
.trend-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  vertical-align: middle;
}
.trend-tag--down {
  background: rgba(45, 213, 91, 0.12);
  color: #2dd55b;
  border: 1px solid rgba(45, 213, 91, 0.25);
}
.trend-tag--up {
  background: rgba(255, 160, 0, 0.12);
  color: #ffaa00;
  border: 1px solid rgba(255, 160, 0, 0.28);
}
.trend-tag--sm {
  font-size: 0.72rem;
  padding: 1px 6px;
}

.badge-stack {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  vertical-align: middle;
}
.total-flex {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.best-badges {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* ── Watchlist star button (inside hero card titlebar) ───────────────────── */
.results-star-btn {
  background: none;
  border: 1.5px solid var(--border);
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  padding: 5px 10px;
  border-radius: 8px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  white-space: nowrap;
}
.results-star-btn:hover { color: var(--accent); border-color: var(--accent); background: rgba(255,203,5,0.06); }
.results-star-btn.star-btn--on { color: var(--accent); border-color: var(--accent); background: rgba(255,203,5,0.08); }
.star-label {
  font-size: 0.8rem;
  font-weight: 700;
  vertical-align: middle;
}
.price-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  white-space: nowrap;
}
.price-badge--alltime {
  background: rgba(124, 108, 246, 0.14);
  color: var(--accent);
  border: 1px solid rgba(124, 108, 246, 0.3);
}
.price-badge--below {
  background: rgba(45, 213, 91, 0.12);
  color: #2dd55b;
  border: 1px solid rgba(45, 213, 91, 0.25);
}

/* ── Autocomplete suggestions ────────────────────────────────────────────── */
.suggest-box {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 6px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  z-index: 99;
  overflow: hidden;
}

.suggest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.1s;
  gap: 12px;
}
.suggest-item:last-child { border-bottom: none; }
.suggest-item:hover,
.suggest-item--active { background: var(--surface2); color: var(--accent); }
.suggest-item strong { color: var(--accent); font-weight: 700; }
.suggest-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.suggest-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest-meta { font-size: 0.75rem; opacity: 0.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 6px; }
.suggest-cardnum { font-family: monospace; }
.suggest-set { }
/* ── Smart Search (Phase 7): grouped autocomplete + settings toggle ───────── */
.toggle-beta {
  display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--accent); background: rgba(124,108,246,0.14);
  padding: 1px 6px; border-radius: 6px; margin-left: 4px; vertical-align: middle;
}
/* Smart search front door = pure box: hide the scope/type/game option forms */
html.smart-search #v2-forms { display: none !important; }
/* "Smart search" pill under the bar — only on the home/search empty state */
#v2-smart-pill { display: none; justify-content: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
html.smart-search #v2-smart-pill { display: flex; }
html.smart-search.v2-searched #v2-smart-pill,
html.smart-search.v2-search-active #v2-smart-pill { display: none; }
.smartpill {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  padding: 6px 11px; border-radius: 11px; background: rgba(124,111,224,.16); color: #9b90ee;
}
.smartpill .tk-ic { width: 12px; height: 12px; }
.smartpill--browse {
  cursor: pointer; border: 1px solid var(--border); background: var(--surface2); color: var(--muted);
}
.smartpill--browse:hover { color: var(--text); border-color: var(--accent); }
/* Scrappy TCG scope toggle — binary Pokémon/Palworld, sits next to the
   "Browse all sets" pill. Filters search/suggest/browse to one game. */
.tcg-scope-toggle {
  display: inline-flex; border: 1px solid var(--border); border-radius: 11px;
  overflow: hidden;
}
.tcg-scope-btn {
  cursor: pointer; border: none; background: var(--surface2); color: var(--muted);
  font-size: 11px; font-weight: 600; padding: 6px 11px;
}
.tcg-scope-btn:hover:not(.tcg-scope-btn--active) { color: var(--text); }
.tcg-scope-btn--active { background: rgba(124,111,224,.16); color: #9b90ee; }
/* Grouped autocomplete rows (mockup .ac*) */
.ac-grp {
  font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin: 11px 14px 5px;
}
.ac-grp:first-child { margin-top: 4px; }
.suggest-box--smart .suggest-item.ac-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: none; border-radius: 12px;
}
.ac-thumb {
  width: 44px; height: 44px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.ac-thumb .tk-ic { width: 20px; height: 20px; }
.ac-thumb--img { background: var(--surface2); overflow: hidden; }
.ac-thumb--img img { width: 100%; height: 100%; object-fit: contain; }
.ac-thumb-fallback { width: 100%; height: 100%; align-items: center; justify-content: center; }
.ac-thumb-fallback .tk-ic { width: 20px; height: 20px; }
.ac-abbr { font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.ac-name { font-size: 14.5px; }
.ac-meta { font-size: 12px; }
/* "Show all products" footer row */
.ac-showall {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 4px; padding: 11px; cursor: pointer;
  border-top: 1px solid var(--border); color: var(--accent); font-size: 12.5px; font-weight: 600;
}
.ac-showall .tk-ic { width: 15px; height: 15px; }
.ac-showall:hover { background: rgba(124,108,246,0.06); }
.ac-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ac-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-tag { font-size: 9px; font-weight: 600; padding: 2px 7px; border-radius: 7px; white-space: nowrap; flex: none; }
.ac-remove {
  flex: none; width: 28px; height: 28px; border: none; background: none; cursor: pointer;
  color: var(--muted); font-size: 13px; border-radius: 7px;
}
.ac-remove:hover { background: var(--surface2); color: var(--text); }
.ac-empty { padding: 14px; text-align: center; font-size: 12px; color: var(--muted); }
/* Optimistic-render skeletons (instant product page while prices load) */
.v2-skel-bar {
  display: inline-block; border-radius: 6px; vertical-align: middle;
  background: linear-gradient(90deg, var(--surface2) 25%, rgba(255,255,255,0.07) 50%, var(--surface2) 75%);
  background-size: 200% 100%; animation: v2-shimmer 1.2s linear infinite; height: 0.8rem;
}
.v2-skel-stores { margin-top: 14px; }
.v2-skel-srow {
  height: 46px; border-radius: 10px; margin: 8px 0;
  background: linear-gradient(90deg, var(--surface2) 25%, rgba(255,255,255,0.05) 50%, var(--surface2) 75%);
  background-size: 200% 100%; animation: v2-shimmer 1.2s linear infinite;
}
@keyframes v2-shimmer { to { background-position: -200% 0; } }
.spinner--sm { width: 13px; height: 13px; border-width: 2px; vertical-align: middle; }
/* Confirmation toast (watchlist add/remove, etc.) */
#tc-toast {
  position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 18px);
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  padding: 11px 18px; border-radius: 12px; font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45); z-index: 2000; opacity: 0;
  pointer-events: none; max-width: 80vw; text-align: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#tc-toast.tc-toast--show { opacity: 1; transform: translate(-50%, 0); }
/* "See all matches" overlay — segmented type filter */
/* Horizontally scrollable so the last filter (Pokémon) is always reachable on
   narrow screens instead of being clipped. Hidden scrollbar; buttons never
   shrink. */
.sao-filter {
  display: flex; gap: 6px; padding: 16px 24px 14px;
  overflow-x: auto; flex-wrap: nowrap;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sao-filter::-webkit-scrollbar { display: none; }
.sao-fbtn {
  appearance: none; cursor: pointer; font-size: 0.8rem; font-weight: 600;
  padding: 5px 14px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface2); color: var(--muted);
  flex: 0 0 auto; white-space: nowrap;
}
.sao-fbtn--active { background: var(--accent); border-color: transparent; color: #fff; }
.suggest-badge { display: inline-flex; align-items: center; flex-shrink: 0; opacity: 0.7; color: var(--muted); }
.suggest-badge--card   { opacity: 0.6; }
.suggest-badge--sealed { opacity: 0.7; }

/* Show All footer row */
.suggest-showall {
  padding: 11px 18px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  border-top: 1px solid rgba(255,255,255,0.07);
  letter-spacing: 0.02em;
  transition: background 0.1s;
}
.suggest-showall:hover { background: var(--surface2); }

/* Suggestion thumbnails */
.suggest-thumb-wrap {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-left: 6px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface2);
  cursor: default;
  box-shadow: 0 1px 5px rgba(0,0,0,0.45);
  transition: box-shadow 0.15s;
}
.suggest-thumb-wrap:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.6); }
[data-theme="light"] .suggest-thumb-wrap { background: #fff; }
.suggest-thumb {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}

/* ── "Show All" overlay ──────────────────────────────────────────────────── */
.sao {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 16px 24px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow-y: auto;
}
.sao-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 860px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
  overflow: hidden;
}
.sao-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.sao-title { font-size: 1.05rem; color: var(--text); font-weight: 500; }
.sao-title strong { color: var(--accent); }
.sao-close {
  background: none;
  border: none;
  color: var(--text-muted, #888);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.1s;
}
.sao-close:hover { background: var(--surface2); color: var(--text); }
.sao-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}
.sao-loading, .sao-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: var(--text-muted, #888);
  font-size: 0.95rem;
}
.sao-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 10px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: background 0.12s, transform 0.12s, box-shadow 0.12s;
  text-align: center;
  position: relative;
}
.sao-card:hover {
  background: var(--surface);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  border-color: var(--accent);
}
.sao-card-img-wrap {
  width: 100px;
  height: 100px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sao-card-img-wrap--missing {
  background: rgba(255,255,255,0.06);
}
.sao-card-img-fallback {
  display: none;
  color: var(--muted);
  opacity: 0.3;
}
.sao-card-img-wrap--missing .sao-card-img-fallback {
  display: flex;
}
.sao-card-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  display: block;
}
.sao-card-info { width: 100%; }
.sao-card-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sao-card-meta {
  font-size: 0.72rem;
  opacity: 0.5;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sao-badge {
  position: absolute;
  top: 6px;
  right: 7px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  opacity: 0.55;
}
[data-theme="light"] .sao { background: rgba(0,0,0,0.45); }
[data-theme="light"] .sao-panel { background: #fff; }
[data-theme="light"] .sao-card { background: #f7f3ff; }
[data-theme="light"] .sao-card:hover { background: #efe8ff; }

/* Mobile: sheet starts high and GROWS with content up to near-fullscreen, then
   the grid scrolls inside. align-items:flex-start (not stretch) so a 1-2 card
   result stays short instead of the panel background filling the whole screen.
   Panel is a flex column — header + filter stay put, only the grid scrolls. */
@media (max-width: 640px) {
  .sao { padding: 10px 8px; align-items: flex-start; }
  .sao-panel {
    max-width: none; max-height: calc(100dvh - 20px);
    display: flex; flex-direction: column;
  }
  .sao-header { flex: 0 0 auto; }
  .sao-filter { flex: 0 0 auto; }
  /* flex:0 1 auto — take content height, shrink+scroll only when the panel hits
     max-height. flex-grow:0 keeps a short result from stretching the panel. */
  .sao-grid { max-height: none; flex: 0 1 auto; min-height: 0; }
}

/* Global floating popup — injected by JS, positioned via mousemove */
#suggest-img-popup {
  display: none;
  position: fixed;
  width: 180px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.65);
  z-index: 9999;
  pointer-events: none;
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 4px;
}

/* Divider between TCGCSV and price-scrape buttons in admin catalog panel */
.catalog-btn-divider {
  display: inline-block;
  width: 1px;
  height: 24px;
  background: var(--border);
  align-self: center;
  margin: 0 4px;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Prevent the whole page from scrolling horizontally / zooming out */
  html, body { overflow-x: hidden; max-width: 100vw; }

  #app { padding: 0 12px; }

  /* Header — compact */
  header { margin: 12px 0 18px; }
  .header-inner { padding: 14px 16px; gap: 8px; }
  header h1 { font-size: 1.15rem; gap: 0; }
  .pika-icon { width: 28px; height: 28px; }
  .subtitle { font-size: 0.74rem; margin-top: 2px; }
  .version-badge { display: none; }
  #notes-btn, #settings-btn, #users-btn { width: 36px; height: 36px; font-size: 1rem; }
  .header-btns { gap: 6px; }

  /* Tab bar — equal-width buttons, no badge layout shift */
  .tab-btn { flex: 1; padding: 8px 6px; font-size: 0.82rem; }

  /* Search — stack vertically so input gets full width */
  #search-form { flex-direction: column; gap: 8px; }
  #search-btn { padding: 13px 16px; font-size: 1rem; }

  /* Header — hide subtitle to reclaim space */
  .subtitle { display: none; }
  .tracka-logo { width: 38px; height: 38px; border-radius: 10px; }

  /* Tighten gap between search and cards */
  #search-section { margin-bottom: 10px; }

  /* Discovery cards — horizontal carousel: 1 card + peek of next */
  .discovery-cards {
    display: flex;
    grid-template-columns: unset;    /* cancel 860px grid */
    padding: 6px 12px 24px;
    padding-right: 8vw;              /* trailing space so last card isn't flush */
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .dc-card {
    width: 56vw;
    flex: 0 0 56vw;
    /* height comes from aspect-ratio: 63/88 ≈ 78vw tall on mobile */
    scroll-snap-align: start;
  }
  /* No scale on flip — card is already large, scaling clips it in the scroll container */
  .dc-card.dc-flipped .dc-card-inner {
    transform: rotateY(180deg);
  }
  .dc-card.dc-flipped {
    filter: drop-shadow(0 12px 28px rgba(0,0,0,0.55));
  }
  /* Disable hover lift on touch — sticky-hover after tap-to-flip-back causes scale clipping */
  .dc-card:not(.dc-flipped):hover .dc-card-inner {
    transform: none;
  }
  /* Cards are wide now — restore full label, bigger text */
  .dc-front          { padding: 14px 14px 12px; }
  .dc-card-header    { gap: 5px; }
  .dc-icon           { font-size: 1.1rem; }
  .dc-label          { font-size: 0.65rem; letter-spacing: 0.1em; white-space: nowrap; overflow: visible; text-overflow: clip; }
  .dc-stat           { font-size: 2.6rem; }
  .dc-stat-unit      { font-size: 0.82rem; }
  .dc-product        { font-size: 0.82rem; }
  .dc-flip-hint      { font-size: 0.62rem; margin-top: 6px; }
  /* Back face — bigger on mobile since cards are taller */
  .dc-back-icon      { font-size: 1.2rem; margin-bottom: 6px; }
  .dc-back-title     { font-size: 0.92rem; margin-bottom: 6px; }
  .dc-back-line      { font-size: 0.8rem; margin-bottom: 4px; }

  /* Result cards — compact on mobile */
  .result-cards-grid { grid-template-columns: 1fr 1fr; }

  /* Hero card: titlebar + body adjustments on mobile */
  .result-card-titlebar { padding: 14px 16px 12px; gap: 8px; flex-wrap: wrap; }
  .result-card-query-title { font-size: 0.95rem; }
  .result-card-meta-bar { white-space: normal; width: 100%; order: 3; }
  .result-card-body { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
  .result-card-alert-strip { padding: 10px 16px; gap: 8px; }
  .alert-strip-label { white-space: normal; }
  .result-hero-top { gap: 12px; }
  .result-hero-img { width: 110px; height: 110px; flex-shrink: 0; }
  .result-card-total--best { font-size: 2rem; }
  .result-card-right { align-items: stretch; flex-direction: column; }
  .result-card-buy--hero { text-align: center; display: block; }

  .buy-btn { padding: 4px 9px; font-size: 0.75rem; }

  /* Out-of-stock notice — don't let text overflow */
  .out-of-stock-notice { white-space: normal; word-break: break-word; }

  /* Chart — shorter, header stacks */
  .chart-container { height: 240px; padding: 14px 12px; }
  #chart-header { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Chart info popup — pin to right edge so it stays on screen */
  .chart-info-popup {
    left: auto;
    right: 0;
    transform: none;
    width: min(270px, calc(100vw - 32px));
  }

  /* Settings panel — full width, locked (no horizontal drift), safe area bottom padding */
  /* 82px covers bottom nav (~62px) + home indicator gap; env() adds the safe area on top */
  #settings-panel { width: 100vw; max-width: 100vw; padding: 20px 18px calc(82px + env(safe-area-inset-bottom)); overflow-x: hidden; }
  #settings-overlay { justify-content: flex-start; }

  /* Alert meta text — break long strings (timestamps, emails) */
  .alert-item-meta { word-break: break-word; font-size: 0.72rem; }

  /* Watchlist thumbnails — slightly smaller */
  .wl-thumb, .wl-thumb-placeholder { width: 44px; height: 44px; }

  /* Product hero image — smaller on mobile */
  .product-img { height: 100px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SURPRISE ME
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Search form: button row ────────────────────────────────────── */
.search-btns-row {
  display: flex;
  gap: 8px;
}
.search-btns-row #search-btn { flex: 1; }

#surprise-me-btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, #e85d9e 0%, #f59a22 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 1.3rem;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
  box-shadow: 0 4px 14px rgba(232,93,158,0.35);
}
#surprise-me-btn:hover  { opacity: 0.9; transform: translateY(-1px); }
#surprise-me-btn:active { transform: translateY(0); opacity: 1; }

/* Mobile: flex overrides handled in the main 640px block below */

/* ── Overlay backdrop ───────────────────────────────────────────── */
#surprise-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}
#surprise-overlay.hidden { display: none; }

#surprise-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 18, 0.92);
  backdrop-filter: blur(10px);
  animation: surpriseBgIn 0.35s ease both;
}
@keyframes surpriseBgIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#surprise-stage {
  position: relative;
  z-index: 2;  /* must be above WebGL canvas at z-index 1 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

#surprise-close-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  z-index: 310;
}
#surprise-close-btn:hover { background: rgba(255,255,255,0.22); }

/* ── Booster Pack ───────────────────────────────────────────────── */
#surprise-pack-wrap { perspective: 800px; }

#surprise-pack {
  width: 190px;
  height: 266px;   /* ~2:3 pack ratio */
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 2.5px rgba(255,255,255,0.7),
              inset 0 0 0 1px rgba(0,0,0,0.3),
              0 20px 60px rgba(0,0,0,0.7);
}

/* Two halves for the tear */
.sp-half {
  position: absolute;
  left: 0; right: 0;
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1),
              opacity   0.65s ease;
}
.sp-half--top {
  top: 0;
  height: 22%;      /* the seal tab */
  background: linear-gradient(135deg, #2a0a5e 0%, #6a28d8 60%, #9a58f8 100%);
  border-radius: 14px 14px 0 0;
  transform-origin: top center;
}
.sp-half--bot {
  top: 22%;
  bottom: 0;
  background: linear-gradient(160deg, #6a28d8 0%, #c030a0 40%, #f07030 80%, #f8c030 100%);
  border-radius: 0 0 14px 14px;
  transform-origin: bottom center;
}

/* Perforated tear line */
.sp-tear-line {
  position: absolute;
  left: 6px; right: 6px;
  top: 22%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.8) 0px, rgba(255,255,255,0.8) 5px,
    transparent 5px, transparent 10px
  );
  z-index: 4;
  transition: opacity 0.3s ease;
}

/* Face layer (icon + text, sits above both halves) */
.sp-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.sp-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.0) 45%,
    rgba(255,255,255,0.14) 100%);
  animation: holoShift 2.5s ease infinite;
}
.sp-icon   { font-size: 3.4rem; line-height: 1; margin-bottom: 8px; }
.sp-label1 { font-size: 0.7rem;  font-weight: 900; letter-spacing: 0.22em; color: rgba(255,255,255,0.9); text-transform: uppercase; }
.sp-label2 { font-size: 1.75rem; font-weight: 900; color: #fff; letter-spacing: 0.06em; }
.sp-label3 { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.18em; color: rgba(255,255,255,0.55); text-transform: uppercase; margin-top: 6px; }

/* ── Pack animations ────────────────────────────────────────────── */
@keyframes packDropIn {
  0%   { opacity: 0; transform: translateY(-260px) scale(0.55) rotate(-14deg); }
  55%  { opacity: 1; transform: translateY(18px)   scale(1.10) rotate(3.5deg); }
  72%  { transform: translateY(-10px) scale(0.96) rotate(-2deg); }
  88%  { transform: translateY(5px)  scale(1.03) rotate(0.8deg); }
  100% { transform: translateY(0)    scale(1)    rotate(0deg);   }
}
@keyframes packGlow {
  0%, 100% { box-shadow: 0 0 30px rgba(106,40,216,0.55), 0 0 0 2.5px rgba(255,255,255,0.7), 0 24px 70px rgba(0,0,0,0.7); }
  50%       { box-shadow: 0 0 100px rgba(232,93,158,0.95), 0 0 150px rgba(248,192,48,0.55), 0 0 0 3px rgba(255,255,255,1), 0 24px 70px rgba(0,0,0,0.7); }
}
@keyframes packInvite {
  0%,100% { transform: scale(1);    }
  50%     { transform: scale(1.04); }
}
@keyframes packShake {
  0%,100% { transform: rotate(0deg)  scale(1);    }
  8%      { transform: rotate(-4deg) scale(1.03); }
  16%     { transform: rotate(5deg)  scale(1.06); }
  24%     { transform: rotate(-6deg) scale(1.09); }
  32%     { transform: rotate(6deg)  scale(1.11); }
  40%     { transform: rotate(-7deg) scale(1.13); }
  50%     { transform: rotate(7deg)  scale(1.14); }
  60%     { transform: rotate(-6deg) scale(1.12); }
  70%     { transform: rotate(5deg)  scale(1.09); }
  82%     { transform: rotate(-3deg) scale(1.05); }
  92%     { transform: rotate(2deg)  scale(1.02); }
}

#surprise-pack.sp--drop-in    { animation: packDropIn 0.9s cubic-bezier(0.34,1.2,0.64,1) both; }
#surprise-pack.sp--glow       { animation: packGlow 1.8s ease infinite; }
#surprise-pack.sp--interactive {
  cursor: pointer;
  animation: packGlow 1.8s ease infinite, packInvite 1.1s ease-in-out infinite;
}
#surprise-pack.sp--interactive:active { transform: scale(0.94); }
#surprise-pack.sp--shake      { animation: packShake 1.3s ease; }

/* Fade out — whole pack dissolves, no black rectangle left behind */
@keyframes packFadeOut {
  0%   { opacity: 1; transform: scale(1);    filter: brightness(1); }
  40%  { opacity: 1; transform: scale(1.06); filter: brightness(1.4); }
  100% { opacity: 0; transform: scale(0.88); filter: brightness(0.2); }
}
#surprise-pack.sp--torn {
  animation: packFadeOut 0.65s cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}

/* ── Revealed card ──────────────────────────────────────────────── */
/* ── Revealed product card ──────────────────────────────────────── */
#surprise-card-wrap {
  width: min(300px, 84vw);
}
@keyframes cardReveal {
  0%   { opacity: 0; transform: translateY(70px) scale(0.88); }
  100% { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Card container — no more 3D flip, just a clean product card */
#surprise-card {
  width: 100%;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(160deg, #0e0830 0%, #1e1260 55%, #2a1880 100%);
  border: 2px solid rgba(255,255,255,0.22);
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);
  /* no transform-style or perspective needed */
}
/* Holographic shimmer */
#surprise-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, transparent 45%, rgba(255,255,255,0.06) 100%);
  border-radius: inherit;
  pointer-events: none;
}

/* Hide the back face only; reset sc-front to normal flow */
.sc-back { display: none !important; }
.sc-front {
  position: static !important;
  transform: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  display: flex !important;
  flex-direction: column;
  width: 100%;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
  color: #fff;
}

/* Product image — fills top portion of card */
.sc-img-area {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(120deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: sc-shimmer 1.6s ease-in-out infinite;
  display: block;
  position: relative;
}
@keyframes sc-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Stop shimmer once image loads */
.sc-img-area img { animation: none; }
.sc-img-area img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  box-sizing: border-box;
}

/* When no image, give the text area generous top padding */
#surprise-card.sc--no-img .sc-text { padding-top: 28px; }

/* Text area below image */
.sc-text {
  width: 100%;
  text-align: center;
  padding: 14px 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #fff;
}
#sc-name {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#sc-price {
  font-size: 1.6rem;
  font-weight: 900;
  color: #4ade80;
  line-height: 1.1;
  margin-top: 4px;
}
#sc-store {
  font-size: 0.72rem;
  opacity: 0.6;
  margin-top: 1px;
}
#sc-reason {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.9);
}
#sc-reason:empty { display: none; }


/* ── Hint text + action buttons ─────────────────────────────────── */
/* Float hint + buttons above the WebGL canvas (z-index 1) */
.surprise-hint {
  position: relative;
  z-index: 3;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.02em;
  min-height: 1.4em;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(0,0,0,0.55);
}
#surprise-close-btn { position: fixed; top: 16px; right: 16px; z-index: 310; }
#surprise-actions {
  position: relative;
  z-index: 3;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: fadeSlideUp 0.35s ease both;
}
.surprise-again-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  border-radius: var(--radius);
  padding: 8px 20px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.surprise-again-btn:hover { background: rgba(255,255,255,0.18); }

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

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   ══════════════════════════════════════════════════════════════════════════ */

/* Light mode header — softer glow */
[data-theme="light"] .header-inner::before {
  background: radial-gradient(ellipse, rgba(107,92,240,0.1) 0%, transparent 70%);
}
[data-theme="light"] .header-inner::after {
  background: radial-gradient(ellipse, rgba(232,93,93,0.07) 0%, transparent 70%);
}

/* Cards: use light surface + same holo border gradient */
[data-theme="light"] .alert-item,
[data-theme="light"] .watchlist-row,
[data-theme="light"] .alert-quota-wrap {
  background: linear-gradient(#ffffff, #ffffff) padding-box,
              var(--card-border) border-box;
}
[data-theme="light"] .table-wrap {
  background: linear-gradient(#ffffff, #ffffff) padding-box,
              var(--card-border) border-box;
}
[data-theme="light"] .chart-container {
  background: linear-gradient(#ffffff, #ffffff) padding-box,
              var(--card-border) border-box;
}
[data-theme="light"] .card-clickable:hover {
  box-shadow: 0 6px 24px rgba(107,92,240,0.15);
}

/* Table */
[data-theme="light"] .table-wrap { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
[data-theme="light"] tbody tr:hover { background: #f5f0e8; }

/* Settings panel */
[data-theme="light"] #settings-panel {
  background: #ffffff;
  border-color: #cdc6bc;
  box-shadow: -4px 0 32px rgba(0,0,0,0.1);
}
[data-theme="light"] .settings-section { border-color: #cdc6bc; }
[data-theme="light"] .settings-section h3 { color: #7a7288; }

/* Search button text stays dark on light bg */
[data-theme="light"] #search-btn { color: #ffffff; }

/* Chips */
[data-theme="light"] .chip { background: #ffffff; border-color: #cdc6bc; }
[data-theme="light"] .chip:hover { background: #ede8df; }

/* Alert email display */
[data-theme="light"] .alert-email-display { background: #ede8df; border-color: #cdc6bc; }

/* Chart background */
[data-theme="light"] canvas { background: transparent; }

/* Tab bar */
[data-theme="light"] #tab-bar { background: #ffffff; border-color: #c8bce8; }
[data-theme="light"] .tab-btn { color: #7060a0; }
[data-theme="light"] .tab-btn:hover { color: #1a1040; }
[data-theme="light"] .tab-btn--active { color: var(--accent); }
[data-theme="light"] #tab-indicator {
  background: linear-gradient(135deg, rgba(107,92,240,0.12) 0%, rgba(176,92,220,0.08) 100%);
  border-color: rgba(107,92,240,0.45);
  box-shadow: 0 2px 12px rgba(107,92,240,0.12);
}

/* Alert strip inside hero card */
[data-theme="light"] .result-card-alert-strip { background: rgba(0,0,0,0.03); border-top-color: #cdc6bc; }
[data-theme="light"] .result-card-titlebar { border-bottom-color: #cdc6bc; }
[data-theme="light"] .alert-strip-input-wrap { background: #ffffff; border-color: #cdc6bc; }
[data-theme="light"] .alert-strip-price { color: var(--text); }

/* Watchlist */
[data-theme="light"] .wl-search-btn { color: #1a1f3e; }
[data-theme="light"] .wl-price { color: #2a9e60; }

/* Settings usage bar bg */
[data-theme="light"] .usage-bar-bg { background: #ede8df; border-color: #cdc6bc; }

/* Notes / modals */
[data-theme="light"] .notes-panel { background: #ffffff; border-color: #cdc6bc; }
[data-theme="light"] #confirm-modal-inner { background: #ffffff; border-color: #cdc6bc; }
[data-theme="light"] .notes-textarea { background: #f5f0e8; border-color: #cdc6bc; color: #1a1f3e; }

/* Store info row */
[data-theme="light"] .store-info-row { background: #ede8df; border-color: #cdc6bc; }
[data-theme="light"] .scraper-item { background: #f5f0e8; border-color: #cdc6bc; }

/* Suggest box */
[data-theme="light"] .suggest-box { background: #ffffff; border-color: #cdc6bc; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
[data-theme="light"] .sdp { background: #ffffff; border-color: #cdc6bc; box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
[data-theme="light"] .suggest-item:hover,
[data-theme="light"] .suggest-item--active { background: #f0eaf8; }

/* Chart info popup */
[data-theme="light"] .chart-info-popup { background: #ffffff; border-color: #cdc6bc; }

/* Version badge */
[data-theme="light"] .version-badge { background: #ede8df; color: #7a7288; border-color: #cdc6bc; }

/* Discovery cards — full-colour gradients look great on light too; just soften shadows */
[data-theme="light"] .dc-face {
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,0.12), 0 6px 20px rgba(0,0,0,0.18);
}

/* Hot chip light theme */
[data-theme="light"] .chip--hot { background: rgba(255, 120, 50, 0.05); border-color: rgba(255, 120, 50, 0.35); }
[data-theme="light"] .chip--hot:hover { background: rgba(255, 120, 50, 0.1); }

/* Buy btn stays purple */
[data-theme="light"] .buy-btn { color: #fff; }

/* Result cards in light mode */
[data-theme="light"] .result-card {
  background: linear-gradient(#ffffff, #ffffff) padding-box, var(--card-border) border-box;
}
[data-theme="light"] .result-card--best {
  background: linear-gradient(#f5f0ff, #f0eaff) padding-box, var(--card-border) border-box;
  box-shadow: 0 8px 40px rgba(107,92,240,0.12);
}
[data-theme="light"] .result-unavail-chip {
  background: #f5f0e8;
  border-color: #cdc6bc;
}

/* Staging badge */
[data-theme="light"] .staging-badge { background: rgba(107,92,240,0.12); color: #6b5cf0; }

/* Mobile overrides */
@media (max-width: 640px) {
  [data-theme="light"] .tab-btn { border-color: #cdc6bc; }
}


/* ── Store Directory ─────────────────────────────────────────────────────── */
.stores-header {
  padding: 0 0 8px;
  text-align: center;
}
/* Controls bar: mobile stacks (sort row on top, filters below — current look).
   Desktop puts filters on the LEFT and sort + view-toggle on the RIGHT,
   aligned to the table's 14px gutters. */
.stores-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media (min-width: 641px) {
  .stores-controls {
    flex-direction: row-reverse;   /* DOM is [sort][filters] → filters left, sort right */
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    gap: 16px;
    margin-bottom: 6px;
  }
  .stores-controls .stores-filters { padding: 0; }      /* gutter handled by .stores-controls */
  .stores-controls .stores-sort-row { margin: 0; flex: none; }
}
.stores-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.stores-subtitle {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 14px;
}
.stores-sort-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 4px;
}
.stores-sort-label { font-size: 0.82rem; color: var(--muted); }
/* Sort is now a custom .sf-dropdown (see #sort-dropdown) — styled by .sf-btn / .sf-menu. */

/* ── View toggle (card / list) ───────────────────────────────────────────── */
.store-view-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 11px;          /* match mockup .seg */
  padding: 3px;
  margin-left: 4px;
}
.store-view-btn {
  background: none;
  border: none;
  border-radius: 9px;           /* match mockup .seg span */
  color: var(--muted);
  cursor: pointer;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}
.store-view-btn:hover { background: var(--surface3); color: var(--text); }
.store-view-btn.active { background: var(--accent); color: #fff; }

/* ── Store list view ─────────────────────────────────────────────────────── */
.stores-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 16px 28px;
}
.store-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.store-list-row:hover { border-color: var(--accent); background: var(--surface3); }

.store-list-logo {
  width: 30px; height: 30px;
  border-radius: 50%;
  flex: 0 0 30px;
  background: var(--surface3);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700; color: var(--accent);
  overflow: hidden;
}
.store-list-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.store-list-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.store-list-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 60px;
}
.store-list-score {
  font-size: 0.72rem;
  color: #f4c542;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.store-list-votes {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.store-list-ship {
  font-size: 0.7rem;
  color: var(--muted);
  background: rgba(124,108,246,0.12);
  border: 1px solid rgba(124,108,246,0.2);
  border-radius: 20px;
  padding: 1px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.store-list-seal {
  font-size: 0.75rem;
  flex-shrink: 0;
}

.store-list-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  onclick="event.stopPropagation()";
}
.store-list-vote-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
.store-list-vote-row .store-vote-clear {
  font-size: 0.7rem;
  padding: 3px 5px;
  border-radius: 6px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
}
.store-list-arrow {
  color: var(--muted);
  font-size: 0.9rem;
  margin-left: 2px;
}

/* ── Store filter bar — dropdown buttons ─────────────────────────────────── */
.stores-filters {
  padding: 0 14px 12px;   /* 14px gutter aligns with .stl-wrap list box */
}
.sf-btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sf-dropdown {
  position: relative;
}
.sf-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.sf-btn:hover { border-color: var(--accent); }
.sf-btn--active {
  background: rgba(124,108,246,0.15);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.sf-chevron { opacity: 0.5; flex-shrink: 0; transition: transform 0.15s; }
.sf-dropdown.open .sf-chevron { transform: rotate(180deg); }
.sf-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  min-width: 150px;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.sf-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 0.83rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.12s, padding-left 0.15s;
}
.sf-opt:hover {
  background: rgba(124,108,246,0.14);
  color: var(--accent);
  padding-left: 16px;
}
.sf-opt--active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.stores-no-results {
  text-align: center;
  color: var(--muted);
  padding: 32px 16px;
  font-size: 0.9rem;
}

.stores-login-notice {
  margin: 0 16px 12px;
  padding: 10px 14px;
  background: rgba(124,108,246,0.12);
  border: 1px solid rgba(124,108,246,0.3);
  border-radius: 10px;
  font-size: 0.88rem;
  color: var(--text);
  text-align: center;
}
.stores-login-notice .tk-ic { vertical-align: -2px; }

/* ── Store Directory grid ─────────────────────────────────────────────────── */
.stores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 18px;
  padding: 12px 14px 28px;   /* 14px gutter aligns with controls + list box */
  justify-items: center;
}
.stores-loading {
  text-align: center;
  color: var(--muted);
  padding: 40px 16px;
  font-size: 0.95rem;
  grid-column: 1/-1;
}

/* ── TCG Store Card ───────────────────────────────────────────────────────── */
@keyframes tcgHover {
  0%   { box-shadow: 0 4px 18px rgba(0,0,0,0.5), 0 0 0 1.5px rgba(248,192,48,0.3); }
  100% { box-shadow: 0 12px 36px rgba(0,0,0,0.65), 0 0 18px rgba(248,192,48,0.25), 0 0 0 2px rgba(248,192,48,0.6); }
}

.store-tcg-card {
  /* TCG aspect ratio 63:88 */
  width: 168px;
  aspect-ratio: 63 / 88;
  cursor: pointer;
  perspective: 600px;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.store-tcg-card:hover {
  transform: translateY(-6px) scale(1.03);
}

.store-tcg-inner {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.10);   /* neutral — no gold on non-fav */
  background: var(--surface);
  box-shadow: 0 4px 18px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.2s;
  position: relative;
}
.store-tcg-card:hover .store-tcg-inner {
  box-shadow: 0 10px 32px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.18);
}

/* Fav cards — full gold gradient border */
.store-tcg-card--fav .store-tcg-inner {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, #c8a227, #ffe680, #b8841e, #ffd84d, #c8a227) border-box;
  box-shadow: 0 4px 18px rgba(0,0,0,0.5), 0 0 10px rgba(248,192,48,0.15);
}
.store-tcg-card--fav:hover .store-tcg-inner {
  box-shadow: 0 10px 32px rgba(0,0,0,0.65), 0 0 16px rgba(248,192,48,0.3), 0 0 0 2px rgba(248,192,48,0.55);
}

/* Foil shimmer on hover */
.store-tcg-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255,255,255,0.06) 48%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.06) 52%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.store-tcg-card:hover .store-tcg-inner::after { opacity: 1; }

/* Header band */
.store-tcg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 5px;
  background: linear-gradient(90deg, rgba(10,8,30,0.9) 0%, rgba(20,16,50,0.85) 100%);
  border-bottom: 1px solid rgba(248,192,48,0.25);
  gap: 4px;
  min-height: 30px;
  flex-shrink: 0;
}
.store-tcg-name {
  font-size: 0.68rem;
  font-weight: 700;
  color: #f5e9c0;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  line-height: 1.2;
}
.store-tcg-seal {
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* Art area */
.store-tcg-art {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(248,192,48,0.18);
}
.store-tcg-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  border: 2px solid rgba(255,255,255,0.12);
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  overflow: hidden;
}
.store-tcg-favicon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 4px;
  image-rendering: auto;
}
.store-tcg-monogram {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 900;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  letter-spacing: -0.02em;
  border-radius: 50%;
}

/* Stats bar */
.store-tcg-stats {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  background: rgba(8,6,24,0.85);
  border-bottom: 1px solid rgba(248,192,48,0.15);
  flex-wrap: wrap;
  min-height: 26px;
  flex-shrink: 0;
}
.store-tcg-score {
  font-size: 0.72rem;
  font-weight: 700;
  color: #f8c030;
}
.store-tcg-votecount {
  font-size: 0.62rem;
  color: var(--muted);
}
.store-tcg-votecount.muted { opacity: 0.6; }
.store-tcg-ship {
  font-size: 0.62rem;
  background: rgba(45,213,91,0.15);
  border: 1px solid rgba(45,213,91,0.3);
  color: #2dd55b;
  border-radius: 6px;
  padding: 1px 5px;
  margin-left: auto;
}

/* Vote row */
.store-tcg-vote-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 6px;
  background: rgba(8,6,24,0.8);
  flex-shrink: 0;
}
/* Base vote button — transparent, nav-style.
   grayscale(1) strips emoji yellow so they look like muted nav icons. */
.store-vote-btn {
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: filter 0.15s, transform 0.12s;
  filter: grayscale(1) opacity(0.45);
}
.store-vote-btn:hover { filter: grayscale(0.2) opacity(0.85); transform: scale(1.12); background: transparent; }
.store-vote-btn.active.store-vote-up {
  filter: grayscale(0) drop-shadow(0 0 5px rgba(45,213,91,0.6));
  transform: scale(1.15);
}
.store-vote-btn.active.store-vote-down {
  filter: grayscale(0) drop-shadow(0 0 5px rgba(224,48,48,0.6));
  transform: scale(1.15);
}
.store-vote-clear {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 2px 4px;
  border-radius: 6px;
  transition: color 0.15s;
}
.store-vote-clear:hover { color: var(--accent2); }
.store-vote-locked {
  font-size: 0.75rem;
  color: var(--muted);
  padding: 4px 0;
}

/* ── Favourite button (card + list) ──────────────────────────────────────── */
.store-fav-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--muted);        /* grey like nav icons — NOT gold */
  padding: 4px 6px;
  transition: color 0.15s, transform 0.12s, filter 0.15s;
  flex-shrink: 0;
}
.store-fav-btn:hover  { color: var(--text); transform: scale(1.2); background: transparent; }
.store-fav-btn.active { color: #f8c030; filter: drop-shadow(0 0 4px rgba(248,192,48,0.5)); }

/* Header badges wrapper keeps seal + fav button side by side */
.store-tcg-header-badges {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* Fav list row — full gold border + warm gold-tinted background */
.store-list-row--fav {
  border: 1px solid rgba(248,192,48,0.55) !important;
  background: rgba(248,192,48,0.07) !important;
}

/* Mobile store list — keep name + score + fav only */
@media (max-width: 600px) {
  .store-list-vote-row { display: none; }  /* hide 👍👎 — vote inside store detail */
  .store-list-ship     { display: none; }  /* hide province + shipping pills */
  .store-list-votes    { display: none; }  /* hide pending/no-votes text */
}

/* Hint */
.store-tcg-hint {
  font-size: 0.58rem;
  color: rgba(248,192,48,0.45);
  text-align: center;
  padding: 3px 0 4px;
  letter-spacing: 0.05em;
  background: rgba(8,6,24,0.85);
  flex-shrink: 0;
}

/* ── Store Detail Overlay ─────────────────────────────────────────────────── */
/* ── Store detail slide-in panel ─────────────────────────────────────────── */
.store-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex;
  justify-content: flex-end;
  opacity: 1;
  transition: opacity 0.25s, visibility 0.25s;
}
.store-detail-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.store-detail-modal {
  background: var(--surface);
  border-left: 1px solid rgba(248,192,48,0.25);
  width: 420px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 50px rgba(0,0,0,0.65);
  transform: translateX(0);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
  position: relative;
}
.store-detail-overlay.hidden .store-detail-modal {
  transform: translateX(100%);
}

/* ── Mobile: bottom sheet ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .store-detail-overlay {
    align-items: flex-end;
    justify-content: stretch;
    /* Stop the backdrop itself from scrolling */
    overflow: hidden;
    touch-action: none;
  }
  .store-detail-modal {
    width: 100%;
    height: 82vh;          /* 18vh backdrop visible above = rounded corners clearly shown */
    max-height: 82vh;
    border-left: none;
    border-top: 1px solid rgba(248,192,48,0.3);
    border-radius: 32px 32px 0 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.6);
    transform: translateY(0);
    overscroll-behavior: none;
    touch-action: pan-y;
  }
  .store-detail-overlay.hidden .store-detail-modal {
    transform: translateY(100%);
  }
  .sd-tab-panels {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  .store-detail-hero {
    border-radius: 32px 32px 0 0;
    padding-top: 32px;     /* clear rounded corner zone */
  }
  /* Drag handle pill above the hero content */
  .store-detail-hero::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
  }
  /* X: sits inside the safe zone below the rounded corner */
  .store-detail-close {
    top: 20px;
    right: 16px;
  }
}
.store-detail-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  font-size: 1.1rem;
  z-index: 10;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  transition: background 0.15s, color 0.15s;
}
.store-detail-close:hover { background: rgba(255,255,255,0.12); color: var(--accent); }

.store-detail-hero {
  padding: 24px 20px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 0;
  position: relative;
  flex-shrink: 0;
}
.store-detail-logo-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(0,0,0,0.3);
  border: 2px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.store-detail-favicon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 4px;
}
.store-detail-monogram {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 900;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  border-radius: 50%;
}
.store-detail-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.store-detail-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  line-height: 1.15;
}
.store-detail-link {
  font-size: 0.8rem;
  color: rgba(180,200,255,0.85);
  text-decoration: none;
}
.store-detail-link:hover { text-decoration: underline; }

/* Tab nav */
.sd-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}
.sd-tab-btn {
  flex: 1;
  padding: 11px 8px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.sd-tab-btn:hover:not(.active) { color: var(--text); }
.sd-tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Scrollable panel area */
.sd-tab-panels {
  flex: 1;
  overflow-y: auto;
}
.sd-panel { display: none; padding: 18px 20px 28px; }
.sd-panel.active { display: flex; flex-direction: column; gap: 12px; }

/* Reviews panel extras */
.sd-vote-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 8px;
}
.sd-vote-bar {
  flex: 1;
  height: 6px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
}
.sd-vote-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #2ecc71, #f8c030);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.sd-vote-bar-label {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Events empty state */
.sd-events-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}
.sd-events-empty .sd-events-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 12px;
  opacity: 0.5;
}

/* Divider between sections in Info panel */
.sd-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
  opacity: 0.5;
}

/* Login hint */
.sd-login-hint {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0;
}

/* Personal notes section */
.sd-notes-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.sd-notes-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sd-notes-textarea {
  width: 100%;
  min-height: 90px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 0.88rem;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s;
  line-height: 1.5;
}
.sd-notes-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.sd-notes-textarea::placeholder { color: var(--muted); opacity: 0.6; }
.sd-notes-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sd-notes-status {
  font-size: 0.8rem;
  color: var(--muted);
}
.sd-notes-status.saved { color: #2ecc71; }
.sd-notes-status.error { color: #e03030; }
.sd-notes-save-btn {
  padding: 6px 18px;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.sd-notes-save-btn:hover { opacity: 0.85; }

/* Store detail body (now inside .sd-panel) */
.store-detail-body {
  display: contents; /* let gap on .sd-panel handle spacing */
}
.store-detail-score {
  font-size: 1rem;
  font-weight: 700;
  color: #f8c030;
}
.store-detail-score.muted { color: var(--muted); font-weight: 400; font-size: 0.88rem; }
.store-detail-votecount {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 400;
}
.store-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.4;
}
.store-detail-row span:first-child { flex-shrink: 0; }
.store-detail-notes {
  font-size: 0.84rem;
  color: var(--muted);
  font-style: italic;
  border-left: 2px solid rgba(248,192,48,0.3);
  padding-left: 10px;
  line-height: 1.5;
}
.store-detail-vote {
  justify-content: center;
  padding: 4px 0 4px;
}
.store-detail-vote .store-vote-btn {
  padding: 10px 20px;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  filter: grayscale(1) opacity(0.6);
}
.store-detail-vote .store-vote-btn:hover {
  border-color: var(--accent);
  filter: grayscale(0.2) opacity(0.9);
  transform: scale(1.03);
}
.store-detail-vote .store-vote-btn.active.store-vote-up {
  border-color: rgba(45,213,91,0.6);
  background: rgba(45,213,91,0.12);
  filter: grayscale(0) drop-shadow(0 0 6px rgba(45,213,91,0.4));
  transform: none;
}
.store-detail-vote .store-vote-btn.active.store-vote-down {
  border-color: rgba(224,48,48,0.6);
  background: rgba(224,48,48,0.12);
  filter: grayscale(0) drop-shadow(0 0 6px rgba(224,48,48,0.4));
  transform: none;
}
.store-detail-search-btn {
  display: block;
  width: 100%;
  margin: 4px 0 0;
  padding: 11px 16px;
  background: linear-gradient(135deg, var(--accent), #9060e8);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  text-align: center;
}
.store-detail-search-btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* Favourite button in store detail overlay */
.store-detail-fav-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 9px 16px;
  background: rgba(248,192,48,0.08);
  border: 1px solid rgba(248,192,48,0.3);
  border-radius: 10px;
  color: rgba(248,192,48,0.8);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-align: center;
}
.store-detail-fav-btn:hover {
  background: rgba(248,192,48,0.15);
  border-color: rgba(248,192,48,0.5);
  color: #f8c030;
}
.store-detail-fav-btn.active {
  background: rgba(248,192,48,0.18);
  border-color: rgba(248,192,48,0.6);
  color: #f8c030;
}

/* ── Shared badges ────────────────────────────────────────────────────────── */
.store-seal-badge {
  font-size: 0.72rem;
  background: linear-gradient(90deg, rgba(248,192,48,0.18), rgba(248,192,48,0.08));
  border: 1px solid rgba(248,192,48,0.45);
  color: #f8c030;
  border-radius: 20px;
  padding: 2px 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-block;
}

/* Search result store badges */
.result-store-seal {
  display: inline-flex;
  align-items: center;
  color: #f8c030;
  margin-left: 4px;
  vertical-align: middle;
}
.result-store-seal .tk-ic { vertical-align: -2px; }
.result-store-score {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.74rem;
  color: #f8c030;
  font-weight: 700;
  margin-left: 5px;
  vertical-align: middle;
  background: rgba(248,192,48,0.1);
  border-radius: 6px;
  padding: 1px 5px;
}

/* Favourite star badge in search results */
.result-fav-star {
  color: #f8c030;
  font-size: 0.82rem;
  margin-left: 4px;
  vertical-align: middle;
  filter: drop-shadow(0 0 3px rgba(248,192,48,0.5));
}
/* Favourite secondary store card — full gold border */
.result-card--fav {
  border: 2px solid rgba(248,192,48,0.65) !important;
  box-shadow: 0 0 12px rgba(248,192,48,0.12);
}
/* Favourite hero card — hero uses gradient border-box trick so use outline */
.result-card--best.result-card--fav {
  outline: 2px solid rgba(248,192,48,0.65);
  outline-offset: -2px;
  box-shadow: 0 8px 48px rgba(248,192,48,0.15), 0 2px 0 rgba(255,255,255,0.04);
}

/* Sort toggle bar between hero card and secondary grid */
.sort-toggle-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 2px 4px;
}
.sort-toggle-label-pre {
  font-size: 0.75rem;
  color: var(--muted);
  margin-right: 2px;
}
.sort-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.sort-toggle-btn:hover {
  color: var(--text);
  border-color: rgba(255,255,255,0.25);
}
/* Favourites button active */
.sort-toggle-btn.sort-toggle-fav.active {
  background: rgba(248,192,48,0.12);
  border-color: rgba(248,192,48,0.6);
  color: #f8c030;
}
/* Price button active */
.sort-toggle-btn.sort-toggle-price.active {
  background: rgba(46,204,113,0.1);
  border-color: rgba(46,204,113,0.5);
  color: #2ecc71;
}
/* When no favourites exist, dim the fav button */
.sort-toggle-btn.sort-toggle-fav.no-favs {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 480px) {
  .stores-grid {
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 12px;
    padding: 8px 14px 20px;   /* match list/filter 14px gutter */
  }
  .store-tcg-card { width: 100%; }
}

/* ── Admin: Vote Ledger ──────────────────────────────────────────────────── */
.vl-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.vl-tab {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.vl-tab--active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.vl-table-wrap { overflow-x: auto; }
.vl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.vl-table th {
  text-align: left;
  padding: 6px 8px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  white-space: nowrap;
}
.vl-table td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}
.vl-table tbody tr:last-child td { border-bottom: none; }
.vl-row--redflag { background: rgba(224,48,48,0.07); }
.vl-redflag-icon { margin-right: 4px; }
.vl-username { font-weight: 600; color: var(--text); }
.vl-up   { color: #2dd55b; font-weight: 700; }
.vl-down { color: #e03030; font-weight: 700; }
.vl-date { color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
.vl-empty { color: var(--muted); font-size: 0.85rem; padding: 8px 0; }

.vl-ban-btn {
  font-size: 0.75rem;
  padding: 3px 8px;
  background: rgba(224,48,48,0.12);
  border: 1px solid rgba(224,48,48,0.35);
  color: #e88;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.vl-ban-btn:hover { background: rgba(224,48,48,0.25); }
.vl-pending { color: var(--muted); font-size: 0.8rem; }

/* ── Admin: Store Profile Editor ─────────────────────────────────────────── */
#sp-form .form-group { margin-bottom: 10px; }
#sp-form label { font-size: 0.8rem; color: var(--muted); display: block; margin-bottom: 3px; }
#sp-form input, #sp-form textarea {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--font);
  resize: vertical;
}
#sp-form input:focus, #sp-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── v4.0.4 Revamp — bottom nav, filter chips, sticky search ─────────────── */

/* ── Discovery filter chips ─────────────────────────────────────────────── */
.dc-filter-row {
  display: flex;
  gap: 8px;
  padding: 0 0 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dc-filter-row::-webkit-scrollbar { display: none; }

.dc-chip {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid rgba(124,108,246,0.25);
  background: rgba(124,108,246,0.06);
  color: var(--muted);
  transition: color 0.18s, border-color 0.18s, background 0.18s;
  white-space: nowrap;
}
.dc-chip:hover {
  color: var(--text);
  border-color: rgba(124,108,246,0.5);
}
.dc-chip--active {
  border-color: transparent;
  color: #fff;
  background-image: var(--holo), var(--holo);
  background: var(--holo);
  background-size: 300% 300%;
  animation: foilShift 4s ease infinite;
  box-shadow: 0 2px 12px rgba(124,108,246,0.3);
}

/* Hide filter row when not on search tab */
.dc-filter-row.hidden { display: none; }

/* ── Search mode toggle (All / Sealed / Singles) ────────────────────────── */
.search-mode-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 16px 4px;  /* tight — 4px between selector and search bar */
  flex-wrap: nowrap;
}
/* Thin divider between mode pills and French toggle */
.search-mode-divider {
  width: 1px;
  height: 18px;
  background: rgba(124,108,246,0.25);
  flex-shrink: 0;
}
.search-mode-toggle {
  display: flex;
  border: 1.5px solid rgba(124,108,246,0.3);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(124,108,246,0.04);
}
.smt-btn {
  padding: 5px 18px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  border-left: 1px solid rgba(124,108,246,0.2);
  background: transparent;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.smt-btn:first-child { border-left: none; }
.smt-btn--active {
  background: var(--accent);
  color: #fff;
}
.smt-btn:hover:not(.smt-btn--active) {
  background: rgba(124,108,246,0.12);
  color: var(--text);
}
.search-mode-row.hidden { display: none; }

/* ── French include toggle ───────────────────────────────────────────────── */
.fr-toggle-label {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
}
.fr-toggle-label input[type="checkbox"] { display: none; }
.fr-toggle-track {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.18);
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.fr-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.2s, background 0.2s;
}
#fr-toggle:checked + .fr-toggle-track {
  background: var(--accent);
  border-color: var(--accent);
}
#fr-toggle:checked + .fr-toggle-track .fr-toggle-thumb {
  transform: translateX(14px);
  background: #fff;
}
.fr-toggle-text {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.2s;
}
#fr-toggle:checked ~ .fr-toggle-text {
  color: var(--text);
}
/* On narrow screens hide the label — flag emoji + track is enough */
@media (max-width: 480px) {
  .fr-toggle-text { display: none; }
}

/* ── Bottom nav — mobile only ───────────────────────────────────────────── */
#bottom-nav {
  display: none;
}

/* SVG icon base style (works outside media query too) */
.bnav-icon svg {
  width: 24px;
  height: 24px;
  display: block;
  color: var(--muted);
  transition: color 0.2s, filter 0.2s;
}

@media (max-width: 640px) {
  /* Bottom nav hidden — use header tab bar instead */
  #bottom-nav { display: none !important; }

  /* ── Fixed header — always pinned to top regardless of scroll container ── */
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 150;
    margin: 0;
    padding: 0 12px;
    background: var(--bg);
  }
  /* Push page content below the fixed header (~130px: brand row + tab row) */
  #app { padding-top: 130px; }

  /* Header wraps: brand+btns on row 1, tabs span full width on row 2 */
  .header-inner { flex-wrap: wrap; padding: 10px 14px 0; align-items: center; }
  .header-brand { flex: 1 1 auto; order: 1; }
  .header-btns  { flex: 0 0 auto; order: 2; }
  #tab-bar {
    flex: 0 0 100%; order: 3;
    justify-content: space-around;
    padding: 4px 0 8px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
  }
  .tab-btn {
    flex: 1;
    flex-direction: column;
    padding: 4px 0;
    font-size: 0.55rem;
    letter-spacing: 0.04em;
    gap: 3px;
    justify-content: center;
    white-space: nowrap;
  }
  .tab-icon { display: flex; }
  .tab-icon svg { width: 20px; height: 20px; }

  /* Search: normal flow by default */
  #search-section {
    background: var(--bg);
    padding: 8px 0;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(124,108,246,0.1);
  }
  /* Fixed state toggled by JS scroll listener */
  #search-section.search-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    padding: 8px 20px;
    background: var(--bg);
    border-bottom: 1px solid rgba(124,108,246,0.15);
    box-shadow: 0 4px 24px rgba(0,0,0,0.55);
  }

  /* ── Full-width pill search: input fills row, icons float inside right edge ── */
  #search-form { flex-direction: row; gap: 0; align-items: center; }
  .search-input-wrap {
    display: block; /* override desktop flex — buttons are absolutely positioned inside pill */
    position: relative;
    flex: 1;
  }
  .search-input-wrap #search-input { flex: none; width: 100%; }

  /* Pill shape for the inner container on mobile.
     position:static → clear btn anchors to .search-input-wrap, not the inner.
     overflow:visible → children are NOT clipped to border-radius, so the mode
     pill icon and clear btn are visible. The inner's background still clips to
     its own border-radius, giving the pill shape. The mode pill gets matching
     left-side border-radius to avoid a visual square-corner leak. */
  .search-input-inner { border-radius: 50px; position: static; overflow: visible; }

  /* Prevent iOS auto-zoom on input focus (triggers when font-size < 16px) */
  input, select, textarea { font-size: 16px !important; }
  .search-btns-row {
    display: flex;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    gap: 4px;
    align-items: center;
    z-index: 2;
  }
  #search-input {
    border-radius: 50px;
    padding: 10px 50px 10px 14px; /* right pad = 1 × 34px btn + 10px breathing room */
    font-size: 0.95rem;
    width: 100%;
  }
  #search-btn {
    flex: none;
    border-radius: 50%;
    padding: 0;
    width: 34px;
    height: 34px;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #search-btn::after {
    content: '→';
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
  }
  #surprise-me-btn {
    flex: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
  }

  /* ── Discovery cards: 40 vw wide, smaller fonts so image has room ── */
  .dc-card {
    width: 40vw;
    flex: 0 0 40vw;
  }
  .dc-front          { padding: 10px 10px 8px; }
  .dc-stat           { font-size: 1.55rem; }
  .dc-stat-unit      { font-size: 0.58rem; }
  .dc-product        { font-size: 0.58rem; min-height: calc(1.3em * 2); }
  .dc-flip-hint      { font-size: 0.55rem; margin-top: 4px; }
  /* Back face: smaller text + tighter gaps so title never clips */
  .dc-back           { padding: 8px 9px 8px; gap: 0; }
  .dc-back-icon      { font-size: 0.85rem; margin-bottom: 2px; }
  .dc-back-title     { font-size: 0.62rem; -webkit-line-clamp: 4; margin-bottom: 3px; }
  .dc-back-line      { font-size: 0.56rem; margin-bottom: 2px; }
  .dc-back-btn       { font-size: 0.6rem; padding: 5px 8px; margin-top: 4px; }
  .dc-back-flip-hint { font-size: 0.5rem; }

  /* ── Bottom nav bar ── */
  #bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: rgba(8, 7, 22, 0.94);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(124,108,246,0.15);
    padding: 5px 0 max(10px, env(safe-area-inset-bottom));
    justify-content: space-around;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
  }

  .bnav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 0 0;
    position: relative;
  }

  .bnav-icon svg {
    width: 22px;
    height: 22px;
    transition: color 0.2s, filter 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  }
  .bnav-btn--active .bnav-icon svg {
    color: #a78bfa;
    filter: drop-shadow(0 0 6px rgba(167,139,250,0.6));
    transform: scale(1.15) translateY(-1px);
  }

  .bnav-label {
    font-size: 0.47rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--muted);
    text-transform: uppercase;
    transition: color 0.2s;
  }
  .bnav-btn--active .bnav-label {
    background: var(--holo);
    background-size: 300% 300%;
    animation: foilShift 4s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Holographic dot indicator — below the nav bar top edge, with room to breathe */
  .bnav-btn--active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--holo);
    background-size: 300% 300%;
    animation: foilShift 4s ease infinite;
    opacity: 0.8;
  }

  .bnav-count {
    position: absolute;
    top: 0px;
    right: calc(50% - 20px);
    background: var(--accent);
    color: #fff;
    border-radius: 10px;
    font-size: 0.5rem;
    font-weight: 800;
    padding: 1px 4px;
    min-width: 14px;
    text-align: center;
    line-height: 1.4;
  }

  /* Store filters — 4 chips on ONE line on mobile. Do NOT use overflow:auto here:
     it forces overflow-y to compute to auto and clips the absolutely-positioned
     .sf-menu dropdowns, making them invisible (the "filters don't work" bug).
     Compact sizing fits Rating/Shipping/Type/Province across a phone width;
     flex-wrap stays so a longer ACTIVE label (e.g. "Free shipping") can still wrap. */
  .sf-btn-row-scroll { overflow: visible; padding-bottom: 0; }
  .sf-btn-row { flex-wrap: wrap; gap: 6px; }
  .sf-btn { font-size: 0.74rem; padding: 5px 10px; gap: 4px; }
  .sf-chevron { width: 8px; height: 8px; }
}

/* ── 3D Card Flip ─────────────────────────────────────────────────── */
.card-flip-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  transition: background 0.35s, backdrop-filter 0.35s;
  pointer-events: none;
}
.card-flip-overlay.active {
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
  pointer-events: all;
}

.flip-scene {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(400px, calc(100vw - 24px));
  height: min(620px, calc(100svh - 48px));
  perspective: 1200px;
  transform: translate(-50%, -50%);
  transition: transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
  transform-style: preserve-3d;
}

.flip-inner {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 18px;
}
.flip-inner.flipped {
  transform: rotateY(180deg);
}

.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid rgba(248,192,48,0.35);
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}
/* Back face must clip its own rounded corners but let body scroll internally */
.flip-back {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* clips the rounded corners — body scrolls internally */
}

/* Front face: simple gradient + logo + name */
.flip-front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.flip-front-logo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(0,0,0,0.3);
  border: 2px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.flip-front-logo .flip-back-logo-img { width: 72px; height: 72px; object-fit: contain; }
.flip-front-logo .flip-back-logo-mono {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; font-weight: 900; color: rgba(255,255,255,0.9);
}
.flip-front-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  text-align: center;
  padding: 0 16px;
}

/* Back face */
.flip-back {
  transform: rotateY(180deg);
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.flip-back-hero {
  padding: 20px 16px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.flip-back-logo-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0,0,0,0.3);
  border: 2px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.flip-back-logo-img { width: 44px; height: 44px; object-fit: contain; }
.flip-back-logo-mono {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 900; color: rgba(255,255,255,0.9);
  border-radius: 50%;
}
.flip-back-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.flip-back-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 36px; /* extra bottom so save btn clears border */
  display: flex;
  flex-direction: column;
  gap: 10px;
  overscroll-behavior: contain;
}

/* Vote buttons inside the flip card — centered, equal width, legible */
.card-flip-overlay .store-detail-vote {
  display: flex;
  gap: 10px;
  padding: 0;
}
.card-flip-overlay .store-vote-btn {
  flex: 1;                       /* equal width */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  filter: none;                  /* override global grayscale */
  transition: background 0.15s, border-color 0.15s, filter 0.15s, transform 0.12s;
}
.card-flip-overlay .store-vote-btn:hover {
  filter: none;
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-1px);
}
.card-flip-overlay .store-vote-btn.active.store-vote-up {
  background: rgba(45,213,91,0.12);
  border-color: rgba(45,213,91,0.6);
  filter: drop-shadow(0 0 5px rgba(45,213,91,0.35));
  transform: none;
}
.card-flip-overlay .store-vote-btn.active.store-vote-down {
  background: rgba(224,48,48,0.12);
  border-color: rgba(224,48,48,0.6);
  filter: drop-shadow(0 0 5px rgba(224,48,48,0.35));
  transform: none;
}

/* ── Mobile flip card: smaller card + visible side margins to tap-to-close ── */
@media (max-width: 600px) {
  .flip-scene {
    width: calc(100vw - 64px);   /* 32px gutters each side — tap zone */
    height: min(540px, calc(100svh - 80px));
  }
}

/* ── Lemon Squeezy / payment styles ─────────────────────────────────────────── */

/* Paid / free status badges in users modal */
/* ── Admin Users panel (v4.1.138) ────────────────────────────────────────── */

/* Header row with search */
.au-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.au-search {
  flex: 1;
  min-width: 160px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 7px 12px;
  color: #d0daf0;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.15s;
}
.au-search:focus { border-color: var(--accent); }
.au-search::placeholder { color: #6878a8; }
.au-sort {
  flex-shrink: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 7px 10px;
  color: #d0daf0;
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.au-sort:focus { border-color: var(--accent); }
.au-sort option { background: #131a2e; color: #d0daf0; }

/* Users tab — fills full admin content height */
#admin-tab-users {
  overflow: hidden;
  padding-bottom: 0;
}

/* Split layout: list + detail */
.au-layout {
  display: flex;
  gap: 0;
  flex: 1;
  min-height: 0;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  overflow: hidden;
}
.au-list-col {
  flex: 0 0 280px;
  border-right: 1px solid rgba(255,255,255,0.08);
  overflow-y: auto;
}
.au-detail-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: relative;
  background: rgba(255,255,255,0.015);
}
.au-detail-panel {
  padding: 18px 20px;
  position: relative;
}
.au-detail-close {
  position: absolute;
  top: 14px; right: 14px;
  background: none;
  border: none;
  color: #6878a8;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.au-detail-close:hover { color: #d0daf0; background: rgba(255,255,255,0.07); }

/* User rows in list */
.au-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.12s;
}
.au-row:hover { background: rgba(255,255,255,0.04); }
.au-row--active { background: rgba(124,108,246,0.12) !important; }
.au-row-name {
  flex: 1;
  font-size: 0.88rem;
  color: #d0daf0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Name + optional join date stack, so the date never squeezes out the name */
.au-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.au-row-main > .au-row-name { flex: 0 0 auto; }
.au-row-joined {
  font-size: 0.72rem;
  color: #6878a8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Avatars */
.au-avatar {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.au-avatar-placeholder {
  border-radius: 50%;
  background: linear-gradient(135deg, #3a3370, #5a4db0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
}

/* Status badges */
.au-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}
.au-badge--admin {
  background: rgba(255,203,5,0.15);
  border: 1px solid rgba(255,203,5,0.4);
  color: #f5c842;
}
.au-badge--pro {
  background: rgba(124,108,246,0.18);
  border: 1px solid rgba(124,108,246,0.45);
  color: #a89eff;
}
.au-badge--free {
  background: rgba(120,130,180,0.1);
  border: 1px solid rgba(120,130,180,0.25);
  color: #6878a8;
}
.au-badge--tester {
  background: rgba(34,197,94,0.15);
  border: 1px solid rgba(34,197,94,0.4);
  color: #4ade80;
}

/* Tier selector (admin user detail drawer) */
.tier-selector {
  display: inline-flex;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(120,130,180,0.2);
}
.tier-chip {
  padding: 5px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: rgba(255,255,255,0.03);
  color: #6878a8;
  transition: background 0.15s, color 0.15s;
  border-right: 1px solid rgba(120,130,180,0.15);
  white-space: nowrap;
}
.tier-chip:last-child { border-right: none; }
.tier-chip--inactive:not(:disabled):hover {
  background: rgba(255,255,255,0.07);
  color: #9aa8d8;
}
.tier-chip:disabled { cursor: default; opacity: 0.9; }
.tier-chip--active { cursor: default; font-weight: 700; }
.tier-chip--active.tier-chip--free {
  background: rgba(120,130,180,0.22);
  color: #c0c8e8;
  border-right-color: rgba(120,130,180,0.25);
}
.tier-chip--active.tier-chip--pro {
  background: rgba(124,108,246,0.22);
  color: #b8b0ff;
  border-right-color: rgba(124,108,246,0.2);
}
.tier-chip--active.tier-chip--tester {
  background: rgba(34,197,94,0.2);
  color: #6deca0;
  border-right-color: rgba(34,197,94,0.15);
}
.tier-chip--active.tier-chip--admin {
  background: rgba(255,203,5,0.18);
  color: #f5c842;
  border-right-color: rgba(255,203,5,0.15);
}

/* Detail panel content */
.udd-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.udd-username {
  font-size: 1.05rem;
  font-weight: 700;
  color: #e8eeff;
  line-height: 1.2;
}
.udd-subline {
  margin-top: 4px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.udd-section {
  margin-bottom: 18px;
}
.udd-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #6878a8;
  margin-bottom: 10px;
}
.udd-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.84rem;
}
.udd-label {
  color: #6878a8;
  flex: 0 0 100px;
  font-size: 0.8rem;
}
.udd-val {
  color: #c0ccee;
  flex: 1;
  word-break: break-all;
}
.udd-mono {
  font-family: monospace;
  font-size: 0.78rem;
  color: #8898cc;
}

/* Lists inside detail */
.udd-list { display: flex; flex-direction: column; gap: 5px; }
.udd-vote-row, .udd-alert-row, .udd-wl-row, .udd-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.udd-vote-icon { font-size: 0.9rem; }
.udd-vote-store, .udd-wl-name, .udd-search-name { color: #c0ccee; flex: 1; }
.udd-vote-date, .udd-wl-thresh, .udd-alert-price, .udd-search-cnt {
  color: #6878a8;
  font-size: 0.76rem;
  white-space: nowrap;
}
.udd-alert-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.udd-alert-dot--on  { background: #2dd55b; box-shadow: 0 0 5px #2dd55b66; }
.udd-alert-dot--off { background: #6878a8; }
.udd-alert-name { color: #c0ccee; flex: 1; }

/* Action buttons in detail panel */
.udd-btn {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 7px;
  border: 1.5px solid;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.udd-btn:hover { opacity: 0.8; transform: translateY(-1px); }
.udd-btn--grant {
  background: rgba(45,213,91,0.1);
  border-color: rgba(45,213,91,0.45);
  color: #2dd55b;
}
.udd-btn--danger {
  background: rgba(224,48,48,0.1);
  border-color: rgba(224,48,48,0.45);
  color: #f87171;
}
.udd-btn--secondary {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.15);
  color: #8898cc;
}

/* Danger zone */
.udd-danger-zone {
  padding-top: 14px;
  border-top: 1px solid rgba(248,113,113,0.15);
}

/* ── Revoke confirmation modal ───────────────────────────────────────────── */
.revoke-modal-overlay {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}
.revoke-modal-box {
  background: #12142a;
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.revoke-modal-icon { font-size: 2rem; margin-bottom: 10px; }
.revoke-modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #f87171;
  margin: 0 0 10px;
}
.revoke-modal-body {
  color: #8898cc;
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0 0 22px;
}
.revoke-modal-actions { display: flex; gap: 10px; justify-content: center; }
.revoke-modal-cancel {
  padding: 8px 20px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: #8898cc;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.revoke-modal-cancel:hover { opacity: 0.8; }
.revoke-modal-confirm {
  padding: 8px 20px;
  border-radius: 8px;
  border: none;
  background: rgba(224,48,48,0.85);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.revoke-modal-confirm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.revoke-modal-confirm:not(:disabled):hover { opacity: 0.85; }

/* Upgrade button in account panel */
.btn-upgrade-account {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ffcb05 0%, #f5a623 100%);
  color: #07091a;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 16px;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.1s;
  width: 100%;
  justify-content: center;
  margin-bottom: 8px;
}
.btn-upgrade-account:hover { opacity: 0.88; transform: translateY(-1px); }

/* Pro badge in account panel */
.account-paid-badge {
  display: inline-block;
  background: linear-gradient(135deg, rgba(255,203,5,0.2), rgba(245,166,35,0.2));
  border: 1px solid rgba(255,203,5,0.5);
  color: #ffcb05;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  vertical-align: middle;
  margin-left: 4px;
  letter-spacing: 0.04em;
}

/* ── Admin modal ─────────────────────────────────────────────────────────── */
.admin-modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.admin-modal-inner {
  background: #0d1326;
  border: 1px solid #1e2d55;
  border-radius: 18px;
  width: min(1200px, 95vw);
  height: 90vh;
  display: flex;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
}
.admin-sidebar {
  width: 220px; min-width: 220px;
  background: #07091a;
  border-right: 1px solid #1e2d55;
  display: flex; flex-direction: column;
  padding: 24px 0;
  flex-shrink: 0;
}
.admin-sidebar-header {
  font-size: 0.68rem;
  font-weight: 700;
  color: #6878a8;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 20px 16px;
}
.admin-nav {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 0 10px;
}
.admin-nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  background: none; border: none;
  color: #6878a8;
  font-size: 0.9rem;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.admin-nav-item:hover { background: rgba(124,108,246,0.08); color: #dde4f7; }
.admin-nav-item.active { background: rgba(124,108,246,0.15); color: #7c6cf6; font-weight: 600; }
.admin-close-btn {
  margin: 16px 10px 0;
  background: none;
  border: 1px solid #1e2d55;
  border-radius: 8px;
  color: #6878a8;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: border-color 0.15s, color 0.15s;
}
.admin-close-btn:hover { border-color: #e85d5d; color: #e85d5d; }
.admin-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  min-width: 0;
}
.admin-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 32px;
  min-height: 0;
}
/* Full-bleed variant — no padding, table fills the whole pane */
.admin-tab--full {
  padding: 0;
  overflow: hidden;
}
.scraper-tab-header {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #1e2d55;
  flex-shrink: 0;
}
.scraper-tab-title {
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}
.scraper-add-btn {
  margin-left: auto;
  background: rgba(124,108,246,0.12);
  border: 1px solid rgba(124,108,246,0.3);
  border-radius: 7px;
  color: var(--accent);
  font-size: 0.78rem; font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.scraper-add-btn:hover { background: rgba(124,108,246,0.22); }

/* Stores split layout */
.se-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.se-list-col {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
}
.se-detail-col {
  flex: 0 0 380px;
  border-left: 1px solid #1e2d55;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(255,255,255,0.012);
}
/* Header strip at top of edit panel */
.se-panel-header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #1e2d55;
  flex-shrink: 0;
}
.se-panel-title {
  font-size: 0.92rem; font-weight: 700; color: var(--text);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.se-panel-subtitle {
  font-size: 0.72rem; color: var(--muted);
}
/* Scrollable body */
.se-detail-body {
  flex: 1; overflow-y: auto;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
/* Sticky save footer */
.se-panel-footer {
  flex-shrink: 0;
  padding: 12px 16px;
  border-top: 1px solid #1e2d55;
  display: flex; align-items: center; gap: 10px;
  background: #0d1326;
}
.se-section-label {
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
  margin: 14px 0 6px;
}
.se-section-label:first-child { margin-top: 4px; }
.se-collections-hint {
  font-size: 0.78rem; color: var(--muted); padding: 4px 0;
}
.se-collection-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; margin-bottom: 4px;
  background: var(--card-bg); border-radius: 6px;
  border: 1px solid var(--border);
}
.se-collection-tcg {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--accent);
  min-width: 60px;
}
.se-collection-handle {
  flex: 1; font-size: 0.8rem; color: var(--text);
  word-break: break-all;
}
.se-collection-alt-domain {
  font-size: 0.7rem; color: var(--muted);
  background: rgba(124,108,246,0.1); border: 1px solid rgba(124,108,246,0.25);
  border-radius: 4px; padding: 1px 5px; white-space: nowrap;
}
.se-collection-remove {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 0.9rem; padding: 2px 4px;
  border-radius: 4px; line-height: 1;
}
.se-collection-remove:hover { color: var(--red); }
.se-collection-cat {
  font-size: 0.7rem; font-weight: 600; cursor: pointer;
  background: var(--card-bg); color: var(--muted);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 3px; white-space: nowrap;
}
.se-collection-cat--sealed  { color: #2ecc71; border-color: rgba(46,204,113,0.45); }
.se-collection-cat--singles { color: #3498db; border-color: rgba(52,152,219,0.45); }
.modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.modal-box {
  background: #0d1326;
  border: 1px solid #1e2d55;
  border-radius: 16px;
  padding: 24px;
  width: min(480px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
}
.acm-url-row {
  display: flex; gap: 6px; align-items: center; margin-bottom: 6px;
}
.acm-url-row input { flex: 1; }
.platform-badge {
  display: inline-block; font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 1px 6px; border-radius: 4px; vertical-align: middle;
  border: 1px solid transparent;
}
.platform-badge--shopify {
  background: rgba(30,200,120,0.1); border-color: rgba(30,200,120,0.3);
  color: #1ec878;
}
.platform-badge--crystal_commerce {
  background: rgba(150,80,255,0.12); border-color: rgba(150,80,255,0.35);
  color: #b07fff;
}
.platform-badge--woocommerce {
  background: rgba(80,130,255,0.12); border-color: rgba(80,130,255,0.35);
  color: #7aafff;
}
.platform-badge--custom {
  background: rgba(130,130,130,0.1); border-color: rgba(130,130,130,0.3);
  color: var(--muted);
}
.se-action-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.admin-tab h2 {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 24px;
  color: var(--text, #dde4f7);
}
.admin-subsection {
  border-top: 1px solid #1e2d55;
  padding-top: 20px;
}
/* Overview stats grid */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.admin-stat-card {
  background: #111829;
  border: 1px solid #1e2d55;
  border-radius: 12px;
  padding: 20px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.admin-stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: #7c6cf6;
  line-height: 1;
}
.admin-stat-label {
  font-size: 0.78rem;
  color: #6878a8;
  font-weight: 500;
}
.admin-stat-sub {
  font-size: 0.7rem;
  color: #4c5a82;
  font-weight: 500;
}
.admin-stat-card--clickable {
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.admin-stat-card--clickable:hover { border-color: #3a4d8a; background: #131c33; }
.admin-stat-card--selected {
  border-color: #7c6cf6;
  box-shadow: 0 0 0 1px rgba(124,108,246,0.4) inset;
}
/* Config tab */
/* Legacy (kept for reference) */
.admin-config-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.admin-config-row {
  display: flex; gap: 16px; align-items: baseline;
  background: #111829; border: 1px solid #1e2d55;
  border-radius: 8px; padding: 10px 14px;
}
.admin-config-key { font-size: 0.8rem; color: #6878a8; font-weight: 600; min-width: 180px; }
.admin-config-val { font-size: 0.85rem; color: #dde4f7; word-break: break-all; }

/* ── Admin Config editor ────────────────────────────────────────────────── */
.cfg-list { display: flex; flex-direction: column; gap: 12px; }
.cfg-row {
  background: #111829;
  border: 1px solid #1e2d55;
  border-radius: 10px;
  padding: 12px 14px;
}
.cfg-key-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.cfg-key {
  font-size: 0.82rem;
  font-weight: 700;
  color: #8898cc;
  letter-spacing: 0.02em;
}
.cfg-desc {
  font-size: 0.78rem;
  color: #6878a8;
  margin-bottom: 8px;
  line-height: 1.4;
}
.cfg-val-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cfg-input {
  flex: 1;
  min-width: 120px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  padding: 6px 10px;
  color: #d0daf0;
  font-size: 0.85rem;
  font-family: monospace;
  outline: none;
  transition: border-color 0.15s;
}
.cfg-input:focus { border-color: var(--accent); }
.cfg-save-btn {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 7px;
  border: 1px solid rgba(124,108,246,0.4);
  background: rgba(124,108,246,0.12);
  color: #a89eff;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.cfg-save-btn:hover { opacity: 0.8; }
.cfg-val--readonly {
  font-size: 0.84rem;
  color: #8898cc;
  font-family: monospace;
  word-break: break-all;
}
.cfg-readonly-badge {
  font-size: 0.68rem;
  color: #6878a8;
  border: 1px solid rgba(104,120,168,0.3);
  border-radius: 5px;
  padding: 1px 6px;
  white-space: nowrap;
}
.cfg-saved-msg {
  font-size: 0.78rem;
  color: #2dd55b;
  margin-left: 4px;
}
.cfg-help-btn {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(104,120,168,0.4);
  background: rgba(104,120,168,0.1);
  color: #6878a8;
  font-size: 0.65rem;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.cfg-help-btn:hover { background: rgba(124,108,246,0.2); color: #a89eff; }
.cfg-tooltip {
  margin-top: 6px;
  background: rgba(18,20,42,0.97);
  border: 1px solid rgba(124,108,246,0.3);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.78rem;
  color: #c0ccee;
  line-height: 1.5;
}

/* ── Admin user growth chart ────────────────────────────────────────────── */
.admin-chart-section {
  margin-top: 24px;
  background: #111829;
  border: 1px solid #1e2d55;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.admin-chart-block {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.admin-chart-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.admin-chart-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #8898cc;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.admin-chart-ranges {
  display: flex;
  gap: 4px;
}
.acr-btn {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: #6878a8;
  cursor: pointer;
  transition: all 0.15s;
}
.acr-btn:hover { color: #a89eff; border-color: rgba(124,108,246,0.4); }
.acr-btn--active {
  background: rgba(124,108,246,0.18);
  border-color: rgba(124,108,246,0.5);
  color: #a89eff;
}
.admin-chart-wrap {
  height: 200px;
  position: relative;
}
.admin-chart-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.78rem;
  color: #6878a8;
}
.acl-dot {
  width: 10px; height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.acl-dot--pro  { background: rgba(124,108,246,0.9); }
.acl-dot--free { background: rgba(104,168,150,0.8); }
/* ── Admin Analytics tab ─────────────────────────────────────────────────── */
/* Daily Active Users is now an interactive Chart.js canvas (see
   _renderAdminAnalyticsDauChart in app.js) using the shared .admin-chart-wrap
   sizing from the Overview tab's charts above — no dedicated CSS needed. */
.anl-funnel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #111829;
  border: 1px solid #1e2d55;
  border-radius: 10px;
  padding: 14px;
}
.anl-funnel-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.anl-funnel-label {
  flex: 0 0 130px;
  font-size: 0.8rem;
  color: #8898cc;
}
.anl-funnel-track {
  flex: 1;
  height: 16px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  overflow: hidden;
}
.anl-funnel-fill {
  height: 100%;
  background: rgba(124,108,246,0.65);
  border-radius: 4px;
  min-width: 2px;
}
.anl-funnel-val {
  flex: 0 0 36px;
  text-align: right;
  font-size: 0.82rem;
  font-weight: 700;
  color: #c0ccee;
}
@media (max-width: 640px) {
  .anl-funnel-label { flex-basis: 96px; font-size: 0.72rem; }
}

/* Mobile: full-screen modal, nav becomes a horizontally scrollable chip bar */
@media (max-width: 640px) {
  .admin-modal-overlay { align-items: stretch; justify-content: stretch; }
  .admin-modal-inner {
    flex-direction: column;
    width: 100%; height: 100%;
    max-width: none;
    border-radius: 0; border: none;
  }
  .admin-sidebar {
    width: 100%; min-width: unset;
    flex-direction: row; align-items: center;
    border-right: none; border-bottom: 1px solid #1e2d55;
    padding: 10px 10px 8px;
    gap: 8px;
  }
  .admin-sidebar-header { display: none; }
  .admin-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0;
    gap: 4px;
    /* Hide scrollbar (same pattern as .sdp) */
    scrollbar-width: none;
  }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav-item {
    width: auto;
    flex: 0 0 auto;
    font-size: 0.8rem;
    padding: 7px 10px;
    white-space: nowrap;
  }
  .admin-close-btn {
    display: block;
    margin: 0;
    flex-shrink: 0;
    padding: 7px 10px;
    font-size: 0.8rem;
  }
  .admin-content { padding: 0; }
  .admin-tab { padding: 16px 14px; }
  .admin-tab--full { padding: 0; }

  /* Users tab: detail drawer overlays the list full-width */
  .au-layout { position: relative; }
  .au-list-col { flex: 1; border-right: none; }
  .au-detail-col {
    position: absolute; inset: 0;
    z-index: 5;
    background: #0d1326;
  }

  /* Stores tab: edit panel overlays the table full-width */
  .se-layout { position: relative; }
  .se-detail-col {
    position: absolute; inset: 0;
    flex: none; width: 100%;
    z-index: 5;
    border-left: none;
    background: #0d1326;
  }

  /* Role tier selector: chips drop below the label and wrap, never clipped */
  .udd-row { flex-wrap: wrap; }
  .tier-selector { flex-wrap: wrap; max-width: 100%; }
  .tier-chip { flex: 1 1 auto; }

  /* Stores table: hide URL + Free Ship Over columns (both shown in edit panel) */
  .scraper-table th:nth-child(2), .scraper-table td:nth-child(2),
  .scraper-table th:nth-child(4), .scraper-table td:nth-child(4) { display: none; }

  /* Scrape run history: hide #, Phase 3, Config columns (Phase 1 stays visible
     — these indices were stale after Phase 4 was inserted as column 6,
     shifting everything after it; the old rule accidentally hid Prices
     instead of Config and kept Phase 1 hidden throughout, both unintended).
     Columns now: 1=# 2=Started 3=Status 4=Phase1 5=Phase3 6=Phase4 7=Total
     8=Stores-ok 9=Prices 10=Config 11=Stores.
     Detail rows (colspan) are excluded via the row-id scoping. */
  #scrape-history-table th:nth-child(1),
  #scrape-history-table th:nth-child(5),
  #scrape-history-table th:nth-child(10),
  #scrape-history-table tr[id^="scrape-run-row-"] td:nth-child(1),
  #scrape-history-table tr[id^="scrape-run-row-"] td:nth-child(5),
  #scrape-history-table tr[id^="scrape-run-row-"] td:nth-child(10) { display: none; }

  /* Beta access: allowlist hides Added by + Notes; user tables hide Last Login */
  .ba-section { overflow-x: auto; }
  .ba-table--allow th:nth-child(2), .ba-table--allow td:nth-child(2),
  .ba-table--allow th:nth-child(3), .ba-table--allow td:nth-child(3) { display: none; }
  .ba-table--users th:nth-child(3), .ba-table--users td:nth-child(3) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dev Portal
   ═══════════════════════════════════════════════════════════════════════════ */

/* Inner tab bar */
.dp-inner-tab-bar {
  display: flex;
  gap: 2px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.dp-inner-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
  white-space: nowrap;
}
.dp-inner-tab-btn:hover { color: var(--text); }
.dp-inner-tab-btn--active { color: var(--accent); border-bottom-color: var(--accent); }

/* Announcement banner */
.dp-announcement {
  background: rgba(124,108,246,0.07);
  border: 1px solid rgba(124,108,246,0.25);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.dp-announcement-inner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  flex-wrap: wrap;
}
.dp-announcement-icon { flex-shrink: 0; }
.dp-announcement-body { color: var(--text); flex: 1; min-width: 0; line-height: 1.5; }
.dp-announcement-meta { color: var(--muted); font-size: 0.78rem; align-self: flex-end; }

/* Placeholder panels */
.dp-placeholder {
  color: var(--muted);
  font-size: 0.95rem;
  padding: 48px 0;
  text-align: center;
}

/* Dashboard layout */
.dp-dash-layout {
  display: grid;
  grid-template-columns: 1fr 370px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 820px) {
  .dp-dash-layout { grid-template-columns: 1fr; }
}
.dp-dash-section { margin-bottom: 28px; }
.dp-dash-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.dp-dash-section-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
}
.dp-dash-section-title .tk-ic { flex-shrink: 0; }
.dp-dash-section-header .dp-dash-section-title { margin: 0; }

/* Period buttons */
.dp-period-btns { display: flex; gap: 3px; }
.dp-period-btn {
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.13s;
}
.dp-period-btn:hover { color: var(--text); border-color: var(--accent); }
.dp-period-btn--active {
  background: rgba(124,108,246,0.15);
  border-color: rgba(124,108,246,0.5);
  color: var(--accent);
}

/* Stats grid */
.dp-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}
.dp-stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}
.dp-stat-val {
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 6px;
}
.dp-stat-lbl { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--muted); font-weight: 600; }

/* Bug history chart */
.dp-bug-chart-wrap {
  position: relative;
  height: 260px;
}

/* Leaderboard */
.dp-leaderboard { display: flex; flex-direction: column; gap: 6px; }
.dp-lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  font-size: 0.82rem;
}
.dp-lb-row--top { border-color: rgba(124,108,246,0.3); background: rgba(124,108,246,0.05); }
.dp-lb-rank { font-size: 1rem; width: 26px; flex-shrink: 0; text-align: center; }
.dp-lb-name {
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dp-lb-breakdown {
  display: flex;
  gap: 8px;
  color: var(--muted);
  font-size: 0.7rem;
}
.dp-lb-score { font-weight: 700; color: var(--accent); white-space: nowrap; }

/* Message board */
.dp-dash-messages { position: sticky; top: 16px; }
.dp-msg-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.dp-msg-textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.83rem;
  padding: 10px 12px;
  resize: vertical;
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1.5;
}
.dp-msg-textarea:focus { outline: none; border-color: var(--accent); }
.dp-msg-submit {
  align-self: flex-end;
  padding: 7px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.dp-msg-submit:hover { background: #6b5ce7; }
.dp-messages { display: flex; flex-direction: column; gap: 8px; }
.dp-message-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.dp-message-card--pinned {
  border-color: rgba(124,108,246,0.4);
  background: rgba(124,108,246,0.05);
}
.dp-message-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 0.75rem;
}
.dp-message-author { font-weight: 600; color: var(--text); }
.dp-message-time { color: var(--muted); flex: 1; }
.dp-msg-pin-btn, .dp-msg-del-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 5px 7px;
  border-radius: 6px;
  opacity: 1;
  transition: opacity 0.15s, border-color 0.15s, background 0.15s, color 0.15s;
  line-height: 1;
  color: var(--muted);
}
.dp-msg-pin-btn:hover { border-color: var(--accent); color: var(--accent); }
.dp-msg-pin-btn--active { color: var(--accent); border-color: var(--accent); background: rgba(124,108,246,0.12); }
.dp-msg-del-btn:hover { border-color: var(--red, #e03030); color: var(--red, #e03030); background: rgba(224,48,48,0.1); }
.dp-message-body {
  font-size: 0.83rem;
  color: var(--text);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Header */
.dp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
  flex-wrap: wrap;
}
.dp-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.dp-new-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.dp-new-btn:hover { background: #6b5ce7; transform: translateY(-1px); }

/* Filters */
.dp-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.dp-filter-group {
  display: flex;
  gap: 4px;
  align-items: center;
}
.dp-filter-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-right: 4px;
  white-space: nowrap;
}
.dp-filter-divider {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 6px;
  flex-shrink: 0;
}
.dp-filter-my {
  margin-left: auto;
}
.dp-filter-my--active {
  background: rgba(109,236,160,0.12);
  border-color: rgba(109,236,160,0.4);
  color: #6deca0;
}
.dp-filter-btn {
  padding: 4px 11px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.14s;
  white-space: nowrap;
}
.dp-filter-btn:hover { border-color: var(--accent); color: var(--text); }
.dp-filter-btn--active {
  background: rgba(124,108,246,0.18);
  border-color: rgba(124,108,246,0.5);
  color: #a89eff;
}

/* Two-column layout */
.dp-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  min-height: 480px;
}
.dp-list-col {
  flex: 0 0 340px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 680px;
  padding-right: 4px;
}
.dp-detail-col {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  min-height: 480px;
}

/* Ticket card */
.dp-ticket-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s;
}
.dp-ticket-card:hover { border-color: rgba(124,108,246,0.4); background: rgba(124,108,246,0.04); }
.dp-ticket-card--active {
  border-color: var(--accent);
  background: rgba(124,108,246,0.08);
}
.dp-ticket-card-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
.dp-ticket-title {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.dp-ticket-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Status dot */
.dp-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}
.dp-status-dot--open          { background: #4dabf7; }
.dp-status-dot--wip           { background: #fcc419; }
.dp-status-dot--fixed         { background: #51cf66; }
.dp-status-dot--on-hold       { background: #fd7e14; }
.dp-status-dot--fixed-closed  { background: #ff6b6b; }
.dp-status-dot--not-fixed-closed { background: #c92a2a; border-radius: 3px; }

/* Type badge */
.dp-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dp-type-badge--bug     { background: rgba(232,93,93,0.18); color: #f87171; }
.dp-type-badge--feature { background: rgba(124,108,246,0.18); color: #a89eff; }

/* Meta text */
.dp-vote-count {
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 3px;
}
.dp-meta-text {
  font-size: 0.72rem;
  color: var(--muted);
}
.dp-meta-sep {
  color: var(--border);
  font-size: 0.7rem;
}

/* Empty state */
.dp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 200px;
  color: var(--muted);
  font-size: 0.88rem;
}

/* ── Ticket Detail ────────────────────────────────────────────────────────── */
.dp-detail-inner { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.dp-detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.dp-detail-close {
  margin-right: auto;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 0.14s;
}
.dp-detail-close:hover { color: var(--text); }
.dp-detail-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}
.dp-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--muted);
}
.dp-detail-section { display: flex; flex-direction: column; gap: 6px; }
.dp-detail-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.dp-detail-body {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Vote / action buttons */
.dp-vote-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s;
}
.dp-vote-btn:hover { border-color: var(--accent); color: #a89eff; }
.dp-vote-btn--voted { background: rgba(124,108,246,0.18); border-color: rgba(124,108,246,0.5); color: #a89eff; }

.dp-status-btn {
  padding: 4px 11px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s;
}
.dp-status-btn:hover { border-color: var(--accent); color: var(--text); }
/* Active state — base (open = accent purple) */
.dp-status-btn--active {
  background: rgba(74,171,247,0.15);
  border-color: rgba(74,171,247,0.5);
  color: #4dabf7;
}
/* Per-status colour overrides */
.dp-status-btn--active.dp-status--open {
  background: rgba(74,171,247,0.15);
  border-color: rgba(74,171,247,0.5);
  color: #4dabf7;
}
.dp-status-btn--active.dp-status--wip {
  background: rgba(252,196,25,0.15);
  border-color: rgba(252,196,25,0.5);
  color: #fcc419;
}
.dp-status-btn--active.dp-status--fixed {
  background: rgba(81,207,102,0.15);
  border-color: rgba(81,207,102,0.5);
  color: #51cf66;
}
.dp-status-btn--active.dp-status--on-hold {
  background: rgba(253,126,20,0.15);
  border-color: rgba(253,126,20,0.5);
  color: #fd7e14;
}
.dp-status-btn--active.dp-status--fixed-closed {
  background: rgba(255,107,107,0.15);
  border-color: rgba(255,107,107,0.5);
  color: #ff6b6b;
}
.dp-status-btn--active.dp-status--not-fixed-closed {
  background: rgba(201,42,42,0.15);
  border-color: rgba(201,42,42,0.5);
  color: #ff6b6b;
}

.dp-danger-btn {
  padding: 5px 12px;
  border-radius: 7px;
  border: 1px solid rgba(232,93,93,0.35);
  background: transparent;
  color: #f87171;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s;
}
.dp-danger-btn:hover { background: rgba(232,93,93,0.12); border-color: rgba(232,93,93,0.6); }

.dp-link-btn {
  background: none;
  border: none;
  padding: 0;
  color: #a89eff;
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dp-link-btn:hover { color: var(--accent); }

.dp-submit-btn {
  padding: 7px 18px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s;
}
.dp-submit-btn:hover { background: #6b5ce7; }

/* Comments */
.dp-comments { display: flex; flex-direction: column; gap: 10px; }
.dp-comment {
  background: var(--surface2);
  border-radius: 8px;
  padding: 10px 14px;
}
.dp-comment-meta {
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 4px;
}
.dp-comment-body {
  font-size: 0.84rem;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.dp-comment-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-top: 4px;
}
.dp-comment-input {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 0.84rem;
  resize: vertical;
  min-height: 60px;
  font-family: var(--font);
  transition: border-color 0.14s;
}
.dp-comment-input:focus { outline: none; border-color: var(--accent); }

/* ── Feedback FAB ─────────────────────────────────────────────────────────── */
#feedback-fab {
  position: fixed;
  bottom: 76px;
  right: 20px;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 12px;
  background: linear-gradient(135deg, #38d9a9 0%, #20c997 100%);
  color: #fff;
  border: none;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(32,201,151,0.4);
  transition: padding 0.3s ease, gap 0.25s ease, box-shadow 0.15s, transform 0.15s;
}
#feedback-fab:hover {
  padding: 11px 18px;
  gap: 8px;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(32,201,151,0.55);
}
.fab-label {
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.3s ease, opacity 0.2s ease;
}
#feedback-fab:hover .fab-label {
  max-width: 220px;
  opacity: 1;
}
@media (min-width: 641px) {
  #feedback-fab { bottom: 24px; }
}

/* ── Dev Portal delete confirm modal ─────────────────────────────────────── */
.dp-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.dp-confirm-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px 22px;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.dp-confirm-icon { display: flex; justify-content: center; color: var(--red); line-height: 1; margin-bottom: 4px; }
.dp-confirm-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
}
.dp-confirm-body {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 6px;
}
.dp-confirm-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}
.dp-confirm-cancel {
  flex: 1;
  padding: 9px 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s;
}
.dp-confirm-cancel:hover { border-color: var(--accent); color: var(--text); }
.dp-confirm-delete {
  flex: 1;
  padding: 9px 0;
  border-radius: 8px;
  border: 1px solid rgba(232,93,93,0.4);
  background: rgba(232,93,93,0.12);
  color: #f87171;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.14s;
}
.dp-confirm-delete:hover { background: rgba(232,93,93,0.22); border-color: rgba(232,93,93,0.6); }

/* ── Changelog tab ─────────────────────────────────────────────────────────── */
.dp-cl-form-wrap {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.dp-cl-form { display: flex; flex-direction: column; gap: 10px; }
.dp-cl-form-row { display: flex; gap: 10px; }
.dp-cl-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.83rem;
  padding: 8px 12px;
  font-family: inherit;
  transition: border-color 0.15s;
  width: 160px;
  flex-shrink: 0;
}
.dp-cl-input.dp-cl-title-input { flex: 1; width: auto; }
.dp-cl-input:focus { outline: none; border-color: var(--accent); }
.dp-cl-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dp-cl-status { font-size: 0.78rem; flex: 1; }

.dp-cl-list { display: flex; flex-direction: column; gap: 14px; }
.dp-cl-entry {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
}
.dp-cl-entry-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.dp-cl-version-badge {
  background: rgba(124,108,246,0.18);
  border: 1px solid rgba(124,108,246,0.35);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  font-family: var(--mono, monospace);
  white-space: nowrap;
  flex-shrink: 0;
}
.dp-cl-entry-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}
.dp-cl-del { margin-left: auto; flex-shrink: 0; }
.dp-cl-entry-body {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 10px;
  white-space: pre-wrap;
}
.dp-cl-entry-meta {
  display: flex;
  gap: 12px;
  font-size: 0.72rem;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Feedback Modal
   ═══════════════════════════════════════════════════════════════════════════ */
.fm-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px 22px;
  width: 100%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: 90vh;
  overflow-y: auto;
}
.fm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fm-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}
.fm-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
  transition: color 0.14s;
}
.fm-close:hover { color: var(--text); }

/* Type toggle */
.fm-type-toggle {
  display: flex;
  gap: 0;
  background: var(--surface2);
  border-radius: 9px;
  padding: 3px;
}
.fm-type-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1;
  padding: 7px 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.14s;
}
.fm-type-btn--active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.fm-type-btn--active.fm-bug   { color: #f87171; }
.fm-type-btn--active.fm-feat  { color: #a89eff; }

/* Fields */
.fm-field { display: flex; flex-direction: column; gap: 5px; }
.fm-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.fm-req { color: #f87171; margin-left: 2px; }
.fm-opt { color: var(--muted); font-size: 0.7rem; font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 4px; }
.fm-input, .fm-select, .fm-textarea {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-size: 0.88rem;
  font-family: var(--font);
  transition: border-color 0.14s;
  width: 100%;
}
.fm-input:focus, .fm-select:focus, .fm-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.fm-select option { background: var(--surface); }
.fm-textarea { resize: vertical; min-height: 90px; }

/* Meta row */
.fm-meta {
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--surface2);
  border-radius: 7px;
  padding: 7px 10px;
  line-height: 1.5;
}

/* Actions */
.fm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 4px;
}
.fm-cancel-btn {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s;
}
.fm-cancel-btn:hover { border-color: var(--accent); color: var(--text); }
.fm-submit-btn {
  padding: 8px 22px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #38d9a9 0%, #20c997 100%);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.14s, transform 0.1s;
}
.fm-submit-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.fm-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Dev Portal responsive */
@media (max-width: 768px) {
  .dp-layout { flex-direction: column; }
  .dp-list-col { flex: none; max-width: 100%; max-height: 320px; }
  .dp-detail-col { min-height: 300px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Browse modes — Expansion + Character (Pokémon)
   ══════════════════════════════════════════════════════════════════════ */

/* Type switcher: Product / Expansion / Character */
.search-type-row {
  max-width: 760px;
  margin: 14px auto 0;
  padding: 0 16px;
  display: flex;
  justify-content: center;
}
.search-type-toggle {
  display: inline-flex;
  gap: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
}
.stt-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.stt-btn:hover { color: var(--text); }
.stt-btn--active {
  background: var(--accent);
  color: #fff;
}

/* Browse picker bar */
#browse-bar {
  max-width: 760px;
  margin: 14px auto 0;
  padding: 0 16px;
}
.browse-input-wrap {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.browse-input-inner {
  position: relative;
  flex: 1;
}
#browse-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  padding: 13px 40px 13px 16px;
  outline: none;
}
#browse-input:focus { border-color: var(--accent); }
#browse-clear-btn {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
}
#browse-all-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0 16px;
  cursor: pointer;
  white-space: nowrap;
}
#browse-all-btn:hover { border-color: var(--accent); }

/* Autocomplete dropdown */
.browse-suggest {
  display: none;
  position: absolute;
  left: 0; right: 0; top: calc(100% + 6px);
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  max-height: 360px;
  overflow-y: auto;
}
.browse-suggest-item, .browse-modal-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font);
  padding: 11px 14px;
  cursor: pointer;
}
.browse-suggest-item:hover, .browse-modal-item:hover { background: var(--surface2); }
.bsi-name, .bmi-name { font-weight: 600; font-size: 0.95rem; }
.bsi-meta, .bmi-meta { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.browse-suggest-empty { padding: 14px; color: var(--muted); text-align: center; }

/* Sealed / Singles subtoggle */
.browse-subtoggle {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 10px;
}
.bst-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 6px 16px;
  border-radius: 9px;
  cursor: pointer;
}
.bst-btn--active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Browse grid */
#browse-section {
  max-width: 1100px;
  margin: 18px auto 0;
  padding: 0 16px;
}
.browse-status {
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 16px;
  min-height: 20px;
}
.browse-status strong { color: var(--text); }
.browse-sort-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 14px;
}
.browse-sort-label {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
}
.browse-sort-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 30px 6px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b7cf8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  transition: border-color .12s;
}
.browse-sort-select:hover { border-color: #7c6cf6; }
.browse-sort-select:focus { outline: none; border-color: #7c6cf6; box-shadow: 0 0 0 3px rgba(124,108,246,0.12); }
.browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.browse-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 40px; }

.bcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, transform 0.15s;
}
.bcard:hover { border-color: var(--accent); transform: translateY(-2px); }
.bcard-img-wrap {
  aspect-ratio: 3 / 4;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bcard-img { width: 100%; height: 100%; object-fit: contain; }
.bcard-img-wrap.bcard-img--missing::after {
  content: "🃏";
  font-size: 2rem;
  opacity: 0.4;
}
.bcard-body { padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.bcard-name {
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.25;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bcard-sub { color: var(--muted); font-size: 0.76rem; }
.bcard-price { font-size: 1.05rem; font-weight: 700; color: var(--green); margin-top: 2px; }
.bcard-price--none { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.bcard-store { color: var(--muted); font-size: 0.74rem; margin-top: -2px; }
.bcard-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; }
.bcard-btn {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 4px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.bcard-btn--buy { background: var(--accent); color: #fff; border-color: var(--accent); }
.bcard-btn--buy:hover { filter: brightness(1.1); }
.bcard-btn--all:hover { border-color: var(--accent); }
.bcard-btn--full { flex: 1; }

/* Pager */
.browse-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 22px 0 8px;
}
.browse-pg-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font);
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 10px;
  cursor: pointer;
}
.browse-pg-btn:disabled { opacity: 0.4; cursor: default; }
.browse-pg-info { color: var(--muted); font-size: 0.88rem; }

/* Browse-all modal */
.browse-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.browse-modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.browse-modal-head {
  display: flex;
  gap: 8px;
  padding: 14px;
  border-bottom: 1px solid var(--border);
}
/* Mode tabs — Sets / Pokémon / Sealed. The modal is the human landing spot for
   /sets, /pokemon and /sealed, so it has to switch between all three lists. */
.browse-modal-modes {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.bmm-btn {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--muted);
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.bmm-btn:hover { color: var(--text); }
.bmm-btn--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
#browse-modal-search {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.95rem;
  padding: 10px 14px;
  outline: none;
}
#browse-modal-close {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 1rem;
  padding: 0 14px;
  cursor: pointer;
}
.browse-modal-list { overflow-y: auto; }

@media (max-width: 560px) {
  .browse-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
  .stt-btn { padding: 7px 11px; font-size: 0.85rem; }
  .bcard-btn { font-size: 0.72rem; }
}

/* Browse picker thumbnails (Expansion dropdown + modal) */
.bsi-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.bsi-text .bsi-name, .bsi-text .bmi-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browse-thumb {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 7px;
  background: var(--surface2);
  flex-shrink: 0;
}
/* Fade real images in as they load so the sub-0.1s pop-in (proxy-img 302 +
   decode, only visible on slower mobile) reads as polish, not a snap. Scoped to
   img so the placeholder/failed <span>.browse-thumb--empty stays fully visible.
   is-loaded is added by the img's onload (see _browseThumb). */
/* Keyframe animation, NOT a transition: a transition only animates if the
   browser first paints the opacity:0 state, but onload (esp. for cached thumbs)
   adds .is-loaded before that frame ever renders, so it'd snap. An animation
   plays its full 0->1 timeline whenever it's applied — fades every time. */
img.browse-thumb { opacity: 0; }
img.browse-thumb.is-loaded { animation: thumbFadeIn 0.2s ease forwards; }
@keyframes thumbFadeIn { from { opacity: 0; } to { opacity: 1; } }
.browse-thumb--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  opacity: 0.5;
}

/* ══════════════════════════════════════════════════════
   Concept C — unified search chrome
   ══════════════════════════════════════════════════════ */

/* TCG selector row */
.c-tcg-row { padding: 6px 16px 0; }
.c-tcg-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--color-text-secondary);
  background: none; border: none; cursor: pointer; padding: 4px 2px;
  border-radius: 6px;
}
.c-tcg-btn:hover { color: var(--color-text-primary); }
.c-tcg-btn strong { color: var(--color-text-primary); font-weight: 500; }
.c-caret { font-size: 10px; opacity: .6; }
.c-tcg-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 0 4px;
}
.c-tcg-pill {
  padding: 4px 12px; border-radius: 99px; font-size: 12px;
  border: 1px solid var(--color-border); cursor: pointer;
  background: var(--color-surface2); color: var(--color-text-secondary);
  transition: all .12s;
}
.c-tcg-pill--active { background: #534AB7; border-color: #534AB7; color: #fff; }
.c-tcg-pill--soon { opacity: .45; cursor: default; }
.c-soon { font-size: 10px; opacity: .8; }

/* Unified search row (form + surprise side by side) */
.c-search-section-row {
  display: flex; align-items: flex-start; gap: 8px;
}
.c-search-section-row > form,
.c-search-section-row > .browse-input-wrap { flex: 1; min-width: 0; }

/* Mode pill — left section of the unified search bar, fixed width */
.c-mode-pill {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 6px;
  width: 104px; flex-shrink: 0; padding: 0 10px; align-self: stretch;
  background: #3e3680; color: #d4cfff;
  font-size: 14px; font-weight: 500; white-space: nowrap;
  border: none; border-right: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
  transition: background .12s;
}
.c-mode-pill:hover { background: #4a3f99; color: #fff; }
.c-mode-pill .c-caret { font-size: 9px; opacity: .7; flex-shrink: 0; }

/* Surprise me button (standalone, beside search bar) */
.c-surprise-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px; height: 42px; border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface2); color: var(--color-text-secondary);
  font-size: 13px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: all .12s;
}
.c-surprise-btn:hover { border-color: var(--color-text-secondary); color: var(--color-text-primary); }

/* Mode pill dropdown */
.c-mode-drop {
  position: fixed;
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  min-width: 200px;
  overflow: hidden;
  padding: 4px 0;
}
.c-mode-drop-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 14px;
  background: transparent; border: none;
  color: var(--text); cursor: pointer; text-align: left;
  transition: background .1s;
}
.c-mode-drop-item:hover { background: rgba(255,255,255,0.06); }
.c-mode-drop-item--active .c-mode-drop-label { color: #8b7cf8; }
.c-mode-drop-icon { font-size: 15px; flex-shrink: 0; }
.c-mode-drop-label { display: block; font-size: 13px; font-weight: 500; }
.c-mode-drop-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }

.c-mode-desc {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  padding: 8px 12px;
  background: var(--color-surface2);
  border-left: 3px solid #534AB7;
  border-radius: 0 8px 8px 0;
  margin-bottom: 8px;
}
.c-mdt { font-size: 13px; font-weight: 500; color: var(--color-text-primary); }
.c-mds { font-size: 12px; color: var(--color-text-secondary); }

/* Adaptive filter pills row */
.c-filter-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-bottom: 8px;
}
/* Attached variant: sits inside search-section as a second row */
.c-filter-row--attached {
  margin: 0; padding: 6px 16px 10px; min-height: 42px; box-sizing: border-box;
}
.c-filter-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.cfp-btn {
  padding: 4px 12px; border-radius: 99px; font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: transparent; color: var(--muted);
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.cfp-btn--active {
  background: rgba(124,108,246,0.15);
  color: #8b7cf8;
  border-color: rgba(124,108,246,0.4);
}
.cfp-btn:not(.cfp-btn--active):hover {
  background: rgba(255,255,255,0.05);
  color: var(--text);
}

/* Mode selector pills (bottom of chrome) */
.c-mode-sel {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px;
}
.c-sel-btn {
  padding: 6px 16px; border-radius: 99px; font-size: 13px;
  border: 1px solid var(--color-border);
  background: transparent; color: var(--color-text-secondary);
  cursor: pointer; transition: all .12s;
}
.c-sel-btn--active {
  background: #534AB7; border-color: #534AB7; color: #fff;
}
.c-sel-btn:not(.c-sel-btn--active):hover {
  background: var(--color-surface2); color: var(--color-text-primary);
}


/* Mobile tweaks */
@media (max-width: 600px) {
  .c-search-section-row { flex-wrap: wrap; }
  .c-surprise-btn { height: 38px; padding: 0 10px; font-size: 12px; }
  .c-mode-desc { flex-direction: column; gap: 2px; }
}

/* ── Mobile search bar overrides — must be AFTER base rules to win cascade ── */
@media (max-width: 640px) {
  /* Mode pill: caret-only on mobile (no emoji, no label text).
     Base .c-mode-pill is at line ~8353 so overrides must live here. */
  .c-mode-pill {
    width: 44px; padding: 0; gap: 0;
    position: relative;
    border-radius: 50px 0 0 50px;
  }
  #c-mode-pill-label { display: none; }
  #c-mode-pill-icon  { display: none; }
  .c-mode-pill .c-caret { display: none; }
  .c-mode-pill::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid rgba(255,255,255,0.85);
  }

  /* Vertically center the dice button with the search pill */
  .c-search-section-row { align-items: center; }
}

/* ── App footer (legal links + disclaimers) ───────────────────────────────── */
.app-footer {
  margin-top: 64px;
  padding: 32px 20px 40px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.app-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.app-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-bottom: 20px;
}
.app-footer-links a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  opacity: 0.85;
  transition: opacity .12s, color .12s;
}
.app-footer-links a:hover { opacity: 1; color: var(--accent); }
.app-footer-disclaimer {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.6;
  margin: 0 auto 12px;
  max-width: 1000px;
}
.app-footer-copy {
  color: var(--muted);
  font-size: 0.74rem;
  margin: 18px 0 0;
  opacity: 0.8;
}

/* ════════════════════════════════════════════════════════════════════
   Server-rendered best-price pages (/best-price, /best-price/<category>).
   These are NOT the SPA — they're standalone pages humans land on from
   search — but they load this same stylesheet so they inherit the real
   tokens, font and light/dark theming instead of hand-copied hex values.
   Everything is sp-* prefixed because the whole app stylesheet is present
   and names like .row / .info / .cat would collide.
   ════════════════════════════════════════════════════════════════════ */
body.seo-page {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
  margin: 0;
}
.seo-wrap { max-width: 940px; margin: 0 auto; padding: 24px 18px 64px; }
/* Sticky site header so a server-rendered page keeps the app's navigation
   instead of feeling like a detached document. */
.seo-top {
  position: sticky; top: 0; z-index: 60;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.seo-top-inner {
  max-width: 940px; margin: 0 auto; padding: 10px 18px;
  display: flex; align-items: center; gap: 12px;
}
.seo-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: 0 0 auto; }
.seo-brand img { width: 28px; height: 28px; border-radius: 7px; }
.seo-brand .v2-hero-wordmark { font-size: 1.05rem; }
.seo-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 4px 4px 14px; }
.seo-search input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--text); font-family: var(--font); font-size: .88rem; padding: 6px 0;
}
.seo-search input::placeholder { color: var(--muted); }
.seo-search button {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff; cursor: pointer;
}
.seo-search button:hover { filter: brightness(1.1); }
.seo-topnav { display: flex; gap: 16px; flex: 0 0 auto; }
.seo-topnav a { color: var(--muted); font-size: .85rem; font-weight: 600; text-decoration: none; }
.seo-topnav a:hover { color: var(--text); }
@media (max-width: 860px) { .seo-topnav { display: none; } }
@media (max-width: 560px) {
  .seo-brand .v2-hero-wordmark { display: none; }
  .seo-top-inner { padding: 8px 12px; gap: 8px; }
}

/* ── Hamburger menu (shared: SPA shell + server-rendered pages) ──────────── */
.tc-menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto;
  background: none; border: 0; border-radius: 9px;
  color: var(--text); cursor: pointer;
}
.tc-menu-btn:hover { background: var(--surface); }
/* Far right of the topbar. app.js appends the tab/settings buttons to #v2-nav
   at runtime, so order: last wins regardless of DOM position. */
html.ui-v2 #v2-nav .tc-menu-btn { order: 99; margin-left: 2px; }
html.tc-menu-open { overflow: hidden; }
.tc-menu { position: fixed; inset: 0; z-index: 200; }
.tc-menu[hidden] { display: none; }
.tc-menu-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.tc-menu-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(340px, 86vw); overflow-y: auto;
  background: var(--bg); border-left: 1px solid var(--border);
  padding: 16px 18px 40px;
  animation: tc-menu-in .16s ease;
}
@keyframes tc-menu-in { from { transform: translateX(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.tc-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.tc-menu-head .v2-hero-wordmark { font-size: 1.1rem; }
.tc-menu-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; background: none; border: 0; border-radius: 8px;
  color: var(--muted); cursor: pointer;
}
.tc-menu-close:hover { background: var(--surface); color: var(--text); }
.tc-menu-sec { margin-bottom: 22px; }
.tc-menu-sec h4 {
  display: flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin: 0 0 9px;
}
.tc-menu-links { display: flex; flex-direction: column; }
.tc-menu-links a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; margin: 0 -10px; border-radius: 9px;
  color: var(--text); text-decoration: none; font-size: .88rem;
}
.tc-menu-links a:hover { background: var(--surface); }
.tc-menu-links a.tc-menu-all { color: var(--accent); font-weight: 600; }

/* In-app best-price view (#bestprice-section). Reuses the .sp-* components
   above so the in-app and server-rendered versions can't drift apart. */
/* Generous top padding so the title clears the topbar/tagline instead of
   butting right up under it. */
#bestprice-section { max-width: 940px; margin: 0 auto; padding: 40px 0 40px; }
#bestprice-section .bp-title {
  font-size: 1.5rem; color: var(--text); letter-spacing: -.01em; margin: 0 0 10px;
}
#bestprice-section .sp-sub { margin-bottom: 18px; }
#bestprice-section .sp-nav { margin-bottom: 22px; }
@media (max-width: 560px) {
  #bestprice-section .bp-title { font-size: 1.25rem; }
  #bestprice-section { padding: 26px 2px 32px; }
}
.seo-page h1 { font-size: 1.75rem; color: var(--text); letter-spacing: -.01em; margin: 0 0 8px; }
.sp-sub { color: var(--muted); font-size: .95rem; max-width: 700px; margin: 0 0 14px; }
.sp-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.sp-pill {
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--muted); font-size: .78rem;
}
.sp-pill b { color: var(--green); }
.sp-nav { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 28px; }
.sp-nav a {
  padding: 6px 13px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--muted); font-size: .8rem; text-decoration: none;
}
.sp-nav a:hover { color: var(--text); border-color: var(--accent); }
.sp-nav a.sp-on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.sp-cards { margin-bottom: 32px; }
.sp-row {
  display: flex; align-items: center; gap: 14px; padding: 12px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  margin-bottom: 9px; text-decoration: none;
}
.sp-row:hover { border-color: var(--accent); }
.sp-rank { width: 26px; flex: 0 0 26px; text-align: center; color: var(--muted); font-weight: 700; font-size: .9rem; }
.sp-thumb {
  width: 56px; height: 56px; flex: 0 0 56px; border-radius: 9px;
  background: var(--surface2); display: flex; align-items: center;
  justify-content: center; overflow: hidden;
}
.sp-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sp-info { flex: 1; min-width: 0; }
.sp-nm {
  color: var(--text); font-weight: 600; font-size: .93rem; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-sl { color: var(--muted); font-size: .78rem; }
.sp-pr { text-align: right; flex: 0 0 auto; }
.sp-pv { display: block; color: var(--text); font-weight: 800; font-size: 1.08rem; white-space: nowrap; }
.sp-ps { display: block; color: var(--muted); font-size: .75rem; white-space: nowrap; }
.sp-catgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px; margin-bottom: 32px;
}
.sp-cat {
  padding: 16px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); text-decoration: none; display: block;
}
.sp-cat:hover { border-color: var(--accent); }
.sp-cat h2 { font-size: 1rem; color: var(--text); margin: 0 0 5px; }
.sp-cat p { color: var(--muted); font-size: .82rem; margin: 0; }
.sp-cat .sp-from { color: var(--green); font-weight: 700; font-size: .95rem; margin-top: 7px; display: block; }
.sp-foot {
  color: var(--muted); font-size: .76rem; line-height: 1.6;
  border-top: 1px solid var(--border); padding-top: 18px; margin-top: 30px;
}
/* _breadcrumb_html emits .breadcrumb, whose styling normally comes from the
   crawler pages' inline _BREADCRUMB_CSS. These pages dropped that inline block,
   so the rules are restated here against the real tokens. */
.seo-page .breadcrumb { color: var(--muted); font-size: .85rem; margin-bottom: 14px; }
.seo-page .breadcrumb a { color: var(--muted); text-decoration: none; }
.seo-page .breadcrumb a:hover { color: var(--accent); }
.seo-page .breadcrumb .sep { margin: 0 4px; }
@media (max-width: 560px) {
  .sp-thumb { width: 44px; height: 44px; flex: 0 0 44px; }
  .sp-rank { display: none; }
  .seo-page h1 { font-size: 1.4rem; }
  .seo-brand .v2-hero-wordmark { font-size: 1rem; }
}


}

/* ════════════════════════════════════════════════════════════════════
   v2 redesign — built FROM SCRATCH, scoped to html.ui-v2.
   v1 (default) is 100% untouched. ?ui=v2 opts in, ?ui=v1 reverts.
   The clean v2 shell hosts the real search/nav/filter controls (relocated
   by initUiV2) so behavior is preserved while the look matches the mockup.
   ════════════════════════════════════════════════════════════════════ */
#v2-shell { display: none; }
html.ui-v2 #v2-shell { display: block; }
/* Hide the shell until initUiV2() has populated the bar/nav/forms/deals slots, so
   the half-built home (lone "All" form + deals title) never flashes on load.
   JS adds .v2-ready; a head-script timeout is a failsafe if app.js never runs. */
html.ui-v2 #v2-shell { opacity: 0; }
html.ui-v2.v2-ready #v2-shell { opacity: 1; transition: opacity .12s ease; }
.v2-deals-flame { color: #f97316; vertical-align: -3px; }

/* ── Mockup palette (redesign-v1-mockups.html) — scoped token remap ──────────
   Soft translucent borders + darker surfaces = the "fresh/recent" look.
   Reversible: delete this block to revert ui-v2 to the legacy palette. */
html.ui-v2 {
  --bg:       #0d1020;
  --surface:  #181d31;
  --surface2: #10142a;
  --border:   rgba(255,255,255,0.13);
  --accent:   #7c6fe0;
  --green:    #5dcaa5;
  --text:     #eef0f7;
  --muted:    #9298ad;
}
html.ui-v2[data-theme="light"] {
  --bg:       #ffffff;
  --surface:  #f3f2ee;
  --surface2: #ffffff;
  --border:   rgba(0,0,0,0.12);
  --accent:   #7c6fe0;
  --green:    #1d9e75;
  --text:     #191921;
  --muted:    #6c6b76;
}

/* Hide all legacy chrome under v2 (its functional bits are relocated) */
html.ui-v2 header,
html.ui-v2 #c-tcg-row,
html.ui-v2 #search-section,
html.ui-v2 .search-status-row,
html.ui-v2 #dc-filter,
html.ui-v2 .app-footer,
html.ui-v2 #discovery-section { display: none !important; }

/* About & legal links relocated into Settings under ui-v2 */
html.ui-v2 .settings-legal { margin-top: 4px; }
html.ui-v2 .settings-legal-links { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
html.ui-v2 .settings-legal-links a { color: var(--accent); text-decoration: none; font-size: 0.86rem; }
html.ui-v2 .settings-legal-links a:hover { text-decoration: underline; }
html.ui-v2 .settings-legal p { color: var(--muted); font-size: 0.72rem; line-height: 1.5; margin: 4px 0 0; }

/* ── Top bar ─────────────────────────────────────────────────────── */
/* #v2-topbar lives inside #app, whose max-width narrows for Stores/Alerts/
   Watchlist (see html.v2-wide-home #app below) — so capping THIS element's
   own max-width isn't enough, its containing block would still squeeze it.
   Break it out to the full viewport width via the "centered-parent breakout"
   trick (works regardless of #app's current width, since #app is itself
   centered via margin:auto), then #v2-topbar-inner re-applies the actual
   1440px cap + centering + padding. Net effect: logo/icons stay in a fixed
   screen position on every tab, while the content below narrows as before. */
html.ui-v2 #v2-topbar {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
html.ui-v2 #v2-topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 6px 0; max-width: 1440px; margin: 0 auto;
  box-sizing: border-box;
}
/* Non-search tabs sit directly under the topbar with no hero above them —
   the shared 12px section padding-top (line ~2734) reads as cramped there.
   Search doesn't need this since #v2-hero already provides its own spacing. */
html.ui-v2 #watchlist-section,
html.ui-v2 #alerts-section,
html.ui-v2 #stores-section {
  padding-top: 32px;
}
@keyframes uiv2-rainbow { to { background-position: 200% center; } }
html.ui-v2 .v2-wordmark {
  font-size: 1.5rem; font-weight: 700; cursor: pointer; letter-spacing: -0.01em;
  background: linear-gradient(90deg,#7C6FE0,#3B82F6,#22C55E,#EAB308,#F97316,#EC4899,#7C6FE0);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: uiv2-rainbow 6s linear infinite;
}
html.ui-v2 .v2-brand { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
html.ui-v2 .v2-tagline {
  font-size: 0.72rem; color: var(--muted); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
@media (max-width: 640px) { html.ui-v2 .v2-tagline { display: none; } }
html.ui-v2 #v2-nav { display: flex; align-items: center; gap: 2px; }
html.ui-v2 #v2-nav .tab-btn,
html.ui-v2 #v2-nav #admin-toolbar-btn,
html.ui-v2 #v2-nav .v2-search-icon-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; min-width: 38px; padding: 0; margin: 0;
  border: none; background: transparent; color: var(--muted); cursor: pointer; border-radius: 10px;
  font-size: 0; flex-direction: row;
}
html.ui-v2 #v2-nav .tab-btn:hover,
html.ui-v2 #v2-nav #admin-toolbar-btn:hover,
html.ui-v2 #v2-nav .v2-search-icon-btn:hover { background: var(--surface2); color: var(--text); }
html.ui-v2 #v2-nav .tab-label { display: none; }
html.ui-v2 #v2-nav .tab-icon { display: flex; }
html.ui-v2 #v2-nav .tab-icon svg,
html.ui-v2 #v2-nav #admin-toolbar-btn svg { width: 21px; height: 21px; }
html.ui-v2 #v2-nav .tab-btn[data-tab="search"] { display: none; }
html.ui-v2 #v2-nav .tab-count {
  position: absolute; top: -2px; right: 0; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; background: var(--accent); color: #fff; font-size: 9px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
html.ui-v2 #v2-nav .tab-count:empty { display: none; }

/* ── Hero ────────────────────────────────────────────────────────── */
/* Kill the legacy fixed-header offset — that header is display:none under ui-v2,
   so its 130px mobile #app padding-top was pure dead void at the top. */
html.ui-v2 #app { padding-top: 0; }
/* On mobile, `html, body { overflow-x: hidden }` makes body a clip container
   (overflow-y computes to auto). On the v2 home screen the deals live in a
   fixed bottom sheet, so the only in-flow content is the short hero — body's
   box collapses to ~265px and clips anything absolutely-positioned below it
   (the type/scope/game dropdowns and the search-suggest / trending panels).
   min-height:100vh keeps the body box full-height so those never clip. */
html.ui-v2 body { min-height: 100vh; }

html.ui-v2 #v2-hero {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 14px; max-width: 680px; margin: 0 auto;
  /* Sit the hero a touch below the topbar — capped in px so it can't blow out on tall phones */
  padding: clamp(22px, 7vh, 80px) 16px 0;
}
/* Centered rainbow wordmark above the bar (matches mockup home screen) */
html.ui-v2 .v2-hero-wordmark {
  font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; text-align: center;
  background: linear-gradient(90deg,#7C6FE0,#3B82F6,#22C55E,#EAB308,#F97316,#EC4899,#7C6FE0);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: uiv2-rainbow 6s linear infinite;
}
/* Once a search has results, collapse the hero to the top (no centered void) */
html.ui-v2.v2-searched #v2-hero { justify-content: flex-start; padding-top: 28px; }
html.ui-v2.v2-searched .v2-hero-wordmark { display: none; }

/* ── Mobile full-screen search takeover (Google-style) ─────────────────────
   Back arrow lives at the bar's left, replacing the magnifier in search mode.
   The panels stay position:absolute (NOT fixed → iOS-keyboard-safe). */
html.ui-v2 #v2-search-back {
  display: none; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text); cursor: pointer; padding: 0; z-index: 4;
}
html.ui-v2 #v2-search-back svg { width: 23px; height: 23px; }
@media (max-width: 640px) {
  /* Lock the page while searching so the in-flow bar can't scroll off the top —
     the panel scrolls INTERNALLY (its own overflow-y) instead. Keeps .sdp
     position:absolute (NOT fixed) so the iOS keyboard still behaves. */
  html.ui-v2.v2-search-active { overflow: hidden; }
  html.ui-v2.v2-search-active body { overflow: hidden; height: 100dvh; min-height: 0; }
  html.ui-v2.v2-search-active #v2-topbar { display: none; }
  html.ui-v2.v2-search-active #v2-hero { padding: 8px 12px 0; gap: 6px; }
  html.ui-v2.v2-search-active .v2-hero-wordmark { display: none; }
  /* swap magnifier → back arrow */
  html.ui-v2.v2-search-active .uiv2-search-icon { display: none; }
  html.ui-v2.v2-search-active #v2-search-back { display: inline-flex; }
  /* Google vibe: drop the heavy pill option forms while searching */
  html.ui-v2.v2-search-active #v2-forms { display: none; }
  /* Flat, borderless panel — no card box, just the list */
  html.ui-v2.v2-search-active .sdp.sdp--open {
    border: none; background: transparent; box-shadow: none; border-radius: 0;
    padding: 4px 2px 0; max-height: calc(100dvh - 78px);
  }
  html.ui-v2.v2-search-active .suggest-box {
    border: none; box-shadow: none; border-radius: 0; background: transparent;
    left: 0; right: 0; max-height: calc(100dvh - 100px); overflow-y: auto;
    /* Scroll affordance: gentle bottom fade so the last row reads as "cut",
       signalling more to scroll — kept subtle (13px) so it never obscures a
       full row. */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 13px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 13px), transparent);
  }
  /* Trending / recents become plain stacked rows (no pills, no borders) */
  html.ui-v2.v2-search-active .sdp-chips,
  html.ui-v2.v2-search-active #product-chips { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  html.ui-v2.v2-search-active .sdp .chip {
    width: 100%; justify-content: flex-start; gap: 12px;
    background: none; border: none; border-radius: 0;
    border-bottom: 1px solid var(--border); padding: 14px 6px; font-size: 15.5px; color: var(--text);
  }
  html.ui-v2.v2-search-active .sdp .chip--hot { background: none; }
  html.ui-v2.v2-search-active .sdp .chip:hover { background: rgba(124,108,246,0.06); border-color: var(--border); color: var(--text); }
  html.ui-v2.v2-search-active .sdp .chip-remove { margin-left: auto; }
  /* Last chip in each group drops its divider so the single .sdp-divider is the
     only line between Trending and Your Searches (no doubled-up bar). */
  html.ui-v2.v2-search-active .sdp .sdp-chips .chip:last-child { border-bottom: none; }
  /* keep the deals bottom-sheet (legacy) and the discovery-lanes feed
     (current default) out of the takeover — both are home-empty-state
     content that must not bleed through the transparent search panel. */
  html.ui-v2.v2-search-active #v2-deals-sheet,
  html.ui-v2.v2-search-active #v2-deals-scrim,
  html.ui-v2.v2-search-active #deals-lanes-section { display: none !important; }
  /* …and the results / browse grid / price chart / alert strip, so a prior
     search can't bleed through the (transparent) takeover panel. */
  html.ui-v2.v2-search-active #results-section,
  html.ui-v2.v2-search-active #browse-section,
  html.ui-v2.v2-search-active #chart-section,
  html.ui-v2.v2-search-active .tc-menu-btn { display: none !important; }
}
html.ui-v2 #v2-bar-slot { width: 100%; }
html.ui-v2 #v2-bar-slot #search-form { width: 100%; }
/* display:block so in-flow children stack vertically; SDP top:calc(100%+6px) then drops below all children */
html.ui-v2 #v2-bar-slot .search-input-wrap { display: block; position: relative; width: 100%; }
html.ui-v2 #v2-bar-slot .search-input-inner {
  position: relative; /* anchors the search icon (moved inside inner by initUiV2) */
  display: flex; align-items: center; gap: 4px; overflow: visible;
  background: var(--surface); border: 1px solid var(--border); border-radius: 26px; padding: 4px 8px 4px 0;
}
html.ui-v2 #v2-bar-slot .search-input-inner:focus-within { border-color: var(--accent); }
html.ui-v2 .uiv2-search-icon {
  position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--muted); z-index: 2; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
html.ui-v2 .uiv2-search-icon svg { width: 20px; height: 20px; }
html.ui-v2 #v2-bar-slot #search-input {
  flex: 1 1 auto; width: auto; border: none; background: transparent; box-shadow: none;
  padding: 14px 2px 14px 42px; font-size: 1.05rem; color: var(--text);
}
html.ui-v2 #v2-bar-slot #search-input::placeholder { text-overflow: clip; }
html.ui-v2 #v2-bar-slot .search-btns-row { display: none !important; }
html.ui-v2 #v2-bar-slot #search-clear-btn,
html.ui-v2 #v2-bar-slot #surprise-me-btn {
  position: static; flex: none; width: 36px; height: 36px; padding: 0; margin: 0;
  background: transparent; border: none; box-shadow: none; color: var(--muted); transform: none;
  display: flex; align-items: center; justify-content: center; border-radius: 9px;
}
html.ui-v2 #v2-bar-slot #surprise-me-btn { display: flex; }
html.ui-v2 #v2-bar-slot #surprise-me-btn svg { width: 21px; height: 21px; }
html.ui-v2 #v2-bar-slot #search-clear-btn:hover,
html.ui-v2 #v2-bar-slot #surprise-me-btn:hover { background: var(--surface2); color: var(--text); transform: none; }

/* ── Forms row (game · scope · type) ─────────────────────────────── */
html.ui-v2 #v2-forms { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
html.ui-v2 #v2-forms .v2-form-btn,
html.ui-v2 #v2-game-slot #c-tcg-btn,
html.ui-v2 #v2-scope-slot #c-mode-pill {
  display: inline-flex; align-items: center; gap: 7px; width: auto; height: auto;
  background: var(--surface2); color: var(--text); border: 1px solid var(--border);
  border-radius: 12px; padding: 9px 15px; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
html.ui-v2 #v2-forms .v2-form-btn:hover,
html.ui-v2 #v2-game-slot #c-tcg-btn:hover,
html.ui-v2 #v2-scope-slot #c-mode-pill:hover { border-color: var(--muted); background: var(--surface2); color: var(--text); }
html.ui-v2 .v2-caret,
html.ui-v2 #v2-forms .c-caret { font-size: 10px; color: var(--muted); opacity: 1; }
html.ui-v2 #v2-game-slot #c-tcg-btn strong { color: var(--text); font-weight: 600; }
/* scope pill: show label, hide its legacy emoji + ::after triangle */
html.ui-v2 #c-mode-pill-icon { display: none !important; }
html.ui-v2 #c-mode-pill-label { display: inline !important; }
html.ui-v2 #c-mode-pill .c-caret { display: inline !important; }
html.ui-v2 #c-mode-pill::after { display: none !important; }
html.ui-v2 #v2-game-slot { display: inline-flex; position: relative; }
html.ui-v2 #v2-scope-slot { display: inline-flex; }

/* TCG (game) selector → vertical dropdown matching the scope/type menus */
html.ui-v2 #v2-game-slot #c-tcg-pills {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 95; min-width: 160px;
  flex-direction: column; gap: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 5px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
html.ui-v2 #v2-game-slot #c-tcg-pills .c-tcg-pill {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  background: transparent; border: none; color: var(--text);
  font-size: 0.82rem; padding: 8px 11px; border-radius: 8px; cursor: pointer;
}
html.ui-v2 #v2-game-slot #c-tcg-pills .c-tcg-pill--active { background: var(--surface2); font-weight: 600; color: var(--accent); }
html.ui-v2 #v2-game-slot #c-tcg-pills .c-tcg-pill--soon { opacity: .45; cursor: default; }
html.ui-v2 #v2-game-slot #c-tcg-pills .c-tcg-pill:not([disabled]):hover { background: var(--surface2); }

/* type dropdown (new, proxies to legacy filter pills) */
html.ui-v2 #v2-type { position: relative; }
html.ui-v2 #v2-type-menu {
  position: absolute; top: calc(100% + 6px); right: 0; left: auto; z-index: 95; min-width: 130px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 5px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
html.ui-v2 #v2-type-menu button {
  display: block; width: 100%; text-align: left; background: transparent; border: none;
  color: var(--text); font-size: 0.82rem; padding: 8px 11px; border-radius: 8px; cursor: pointer;
}
html.ui-v2 #v2-type-menu button:hover { background: var(--surface2); }
html.ui-v2 #v2-type-menu button.active { background: var(--surface2); font-weight: 600; color: var(--accent); }

/* Sort dropdown — match pill style in v2 */
html.ui-v2 .browse-sort-select {
  border-radius: 12px;
  padding: 8px 28px 8px 13px;
  /* !important to beat the mobile `input,select,textarea{font-size:16px!important}`
     rule, which otherwise blows the Sort control up vs the 13px form pills. */
  font-size: 13px !important;
  font-weight: 600;
  border-color: var(--border);
}
html.ui-v2 .browse-sort-label { font-size: 13px; font-weight: 600; }

/* Mobile: put Sealed/Singles (left) and Sort (right) on ONE row above the grid.
   The Sort label stacks on top-right of its dropdown to save horizontal width.
   margin-left:auto keeps Sort right-aligned even when the toggle is hidden
   (Character mode has no Sealed/Singles toggle). */
@media (max-width: 640px) {
  html.ui-v2 #browse-controls {
    /* flex-end so the Sealed/Singles toggle bottom-aligns with the Sort dropdown
       (the Sort column is taller because its label stacks on top). */
    display: flex; align-items: flex-end; gap: 10px; margin: 12px 0 14px;
  }
  html.ui-v2 #browse-controls #browse-type-toggle { margin: 0; text-align: left; }
  html.ui-v2 #browse-controls #browse-sort-row {
    margin: 0 0 0 auto;            /* hug the right edge */
    flex-direction: column; align-items: flex-end; gap: 3px;
  }
  /* Match the two control heights exactly so they read as a clean pair. */
  html.ui-v2 #browse-controls .btt-seg,
  html.ui-v2 #browse-controls .browse-sort-select {
    height: 40px; box-sizing: border-box;
  }
  html.ui-v2 #browse-controls .btt-seg { display: inline-flex; align-items: stretch; }
  html.ui-v2 #browse-controls .btt-btn { display: inline-flex; align-items: center; }
  html.ui-v2 #browse-controls .browse-sort-select { padding-top: 0; padding-bottom: 0; }
}

/* Set browse: Sealed/Singles segmented toggle under the title (mockup .seg vibe) */
html.ui-v2 #browse-type-toggle { text-align: center; margin: 12px 0 16px; }
html.ui-v2 #browse-type-toggle .btt-seg {
  display: inline-flex; gap: 0; padding: 3px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 11px;
}
html.ui-v2 #browse-type-toggle .btt-btn {
  background: transparent; border: none; cursor: pointer;
  font-size: 0.82rem; font-weight: 500; color: var(--muted);
  padding: 6px 16px; border-radius: 9px;
}
html.ui-v2 #browse-type-toggle .btt-btn--active { background: var(--accent); color: #fff; font-weight: 600; }

/* ════ ui-v2 browse grid (Phase 4) — Set/Character → tap a card → product page ══ */
html.ui-v2 .browse-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
html.ui-v2 .bcard--v2 {
  cursor: pointer; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; transition: border-color .15s, transform .15s, box-shadow .15s;
}
html.ui-v2 .bcard--v2:hover,
html.ui-v2 .bcard--v2:focus-visible {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124,108,246,0.16); outline: none;
}
html.ui-v2 .bcard--v2 .bcard-img-wrap { background: var(--surface2); }
html.ui-v2 .bcard--v2 .bcard-body { padding: 10px 12px 12px; gap: 3px; }
html.ui-v2 .bcard--v2 .bcard-name { font-size: 0.86rem; font-weight: 600; }
html.ui-v2 .bcard--v2 .bcard-sub { font-size: 0.74rem; }
html.ui-v2 .bcard--v2 .bcard-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 7px;
}
html.ui-v2 .bcard--v2 .bcard-price { font-size: 1rem; font-weight: 800; color: var(--green); margin: 0; }
html.ui-v2 .bcard--v2 .bcard-price--none { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
html.ui-v2 .bcard--v2 .bcard-store {
  font-size: 0.7rem; color: var(--muted); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 640px) {
  html.ui-v2 .browse-grid { grid-template-columns: 1fr 1fr; gap: 11px; }
}

/* ════ ui-v2 unified product page (Phase 3) ═══════════════════════════ */
html.ui-v2 #result-grid { display: block; }

/* Control row: Best price ⇄ Favourites segmented toggle + store count.
   border-top = the "horizontal bar" that splits the search/forms header from the
   store content (mockup), with breathing room above + below. */
html.ui-v2 .v2-prod-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 16px 0 14px; padding-top: 16px; border-top: 1px solid var(--border);
}
html.ui-v2 .v2-seg {
  display: inline-flex; padding: 3px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
}
html.ui-v2 .v2-seg-btn {
  background: transparent; border: none; cursor: pointer; white-space: nowrap;
  font-size: 0.88rem; font-weight: 600; color: var(--muted); padding: 8px 18px; border-radius: 9px;
}
html.ui-v2 .v2-seg-btn.on { background: var(--accent); color: #fff; font-weight: 700; }
html.ui-v2 .v2-seg-btn--empty { opacity: 0.55; }
html.ui-v2 .v2-prod-count { font-size: 12.5px; color: var(--muted); font-weight: 500; }

/* Cap the product page width so it stays close to the mockup's single column
   instead of stretching edge-to-edge on desktop. */
html.ui-v2 #results-section, html.ui-v2 #result-grid { max-width: 720px; margin-left: auto; margin-right: auto; }
html.ui-v2 #results-section { margin-top: 20px; }

/* Rainbow border — reserved for the hero best-price card only. A conic gradient
   driven by an animated --v2angle so the colours actually ROTATE around the
   card's perimeter (not a flat diagonal slide). */
@property --v2angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
html.ui-v2 .v2-rbord {
  border-radius: 18px; padding: 2px; margin-bottom: 4px;
  background: conic-gradient(from var(--v2angle), #7C6FE0, #3B82F6, #22C55E, #EAB308, #F97316, #EC4899, #7C6FE0);
  animation: v2-rbord-rotate 6s linear infinite;
  box-shadow: 0 8px 34px rgba(124,108,246,0.16);
}
@keyframes v2-rbord-rotate { to { --v2angle: 360deg; } }
html.ui-v2 .v2-hero.result-card--best {
  background: var(--surface); border: none; border-radius: 16px; box-shadow: none; animation: none;
  display: block; padding: 0; overflow: hidden;
}
/* Favourite hero: drop the gold border/outline/glow — the rainbow border +
   "Favourite" pill already signal it. The base .result-card--fav sets a gold
   border with !important, so the override needs !important too. */
html.ui-v2 .v2-hero.result-card--fav { border: none !important; outline: none !important; box-shadow: none !important; }
html.ui-v2 .v2-hero.result-card--best::before { display: none; }

/* Main: thumb + info (compact mockup layout, but a more visible product image) */
/* Info anchored to the TOP (not centered) so the store name + price sit at a
   fixed Y — a height change between Best-deal ⇄ Favourite can't re-center and
   shift everything (the jitter). The thumb stays visually centered via
   align-self so the layout still looks balanced. */
/* Stretch so the info column is as tall as the image; the freshness line then
   pins to the bottom-right (margin-top:auto), letting the card content run down
   to the Buy button instead of a separate full-width row. */
html.ui-v2 .v2-hero-main { display: flex; gap: 15px; align-items: stretch; padding: 16px 18px 6px; }
html.ui-v2 .v2-hero-thumb {
  width: 100px; height: 128px; border-radius: 10px; flex: none; object-fit: contain;
  background: var(--surface2); align-self: flex-start;
}
html.ui-v2 .v2-hero-noimg { display: flex; align-items: center; justify-content: center; color: var(--muted); }
html.ui-v2 .v2-hero-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Row 1: product title  ·····  share icon. Always a single line — the title
   truncates (ellipsis) before the icon is ever pushed to its own line; share
   is an outbound action, kept anchored to the title even on narrow screens
   rather than drifting down to float next to the store/badges line. Product
   name (not store name) so context survives scrolling past the hero — the
   search bar isn't sticky, and the store name is already restated in the
   Buy button below. */
html.ui-v2 .v2-hero-row1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html.ui-v2 .v2-hero-title {
  flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Store line: store · rating (left) ····· %-below-avg badge + Best-deal/Favourite
   pill (right) — secondary/supporting info now that the title owns row 1, so it
   can wrap freely on narrow screens without affecting anything above it. */
html.ui-v2 .v2-hero-storeline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 8px; margin-top: 5px; }
html.ui-v2 .v2-hero-store { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1 1 auto; font-size: 12px; font-weight: 600; color: var(--muted); }
html.ui-v2 .v2-hero-storename { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .v2-hero-rating { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 500; color: var(--muted); flex: none; }
html.ui-v2 .v2-hero-rating .tk-ic { color: #f8c030; width: 11px; height: 11px; }
html.ui-v2 .v2-hero-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; flex: none; }
html.ui-v2 .v2-best-pill {
  flex: none; display: inline-flex; align-items: center;
  background: rgba(45,213,91,0.14); color: var(--green);
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 7px;
}
html.ui-v2 .v2-best-pill--fav { background: rgba(248,192,48,0.15); color: rgb(248,192,48); }
/* Price + % below avg badge inline */
/* Price line is just the price now (the %-below-avg badge lives on the store
   line next to the pill), so it's always exactly one fixed-height row. */
html.ui-v2 .v2-hero-priceline { display: flex; align-items: baseline; gap: 9px; margin: 6px 0 3px; min-height: 1.95rem; }
html.ui-v2 .v2-hero-price { font-size: 1.95rem; font-weight: 800; color: var(--green); line-height: 1; }
html.ui-v2 .v2-hero-badges .price-badge {
  background: rgba(45,213,91,0.14); color: var(--green); border: none;
  font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 7px; white-space: nowrap;
}
html.ui-v2 .v2-hero-badges .price-badge--alltime { background: rgba(248,192,48,0.15); color: rgb(248,192,48); }
/* Always rendered (may be empty) with a reserved min-height so a store WITH free
   shipping and one WITHOUT are the same height — keeps the block from jumping
   when toggling Best-deal ⇄ Favourite. */
html.ui-v2 .v2-hero-ship { font-size: 11.5px; color: var(--muted); min-height: 1.05em; }
html.ui-v2 .v2-hero-fresh { font-size: 10.5px; color: var(--muted); margin-top: auto; padding-top: 8px; line-height: 1.45; }
html.ui-v2 .v2-hero-fresh .rf-clock { display: none; }

/* Actions: Buy at <store> + bell/star icon buttons */
html.ui-v2 .v2-hero-actions { display: flex; align-items: center; gap: 8px; padding: 10px 18px 16px; }
html.ui-v2 .v2-buy {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 14px;
  padding: 0 16px; height: 44px; border-radius: 12px; text-decoration: none;
  box-shadow: 0 6px 18px rgba(124,108,246,0.35);
  min-width: 0; /* lets the label span below actually shrink instead of overflowing the row */
}
html.ui-v2 .v2-buy:hover { filter: brightness(1.06); }
/* Never 2 lines: a long store name ellipsizes instead of wrapping the button.
   min-width:0 overrides the flex-item default (auto), which otherwise refuses
   to shrink below the text's intrinsic width and forces a wrap. */
html.ui-v2 .v2-buy-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-v2 .v2-buy .tk-ic { flex: none; }
html.ui-v2 .v2-buy--off { background: var(--surface2); color: var(--muted); box-shadow: none; cursor: default; }
html.ui-v2 .v2-iconbtn {
  flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; color: var(--text); cursor: pointer;
}
html.ui-v2 .v2-iconbtn:hover { border-color: var(--accent); color: var(--accent); }
html.ui-v2 .v2-iconbtn.on { color: var(--accent); border-color: var(--accent); background: rgba(124,108,246,0.12); }

/* Anon actions row: compact buy button on the left, a sign-in banner
   pinned to the right (margin-left:auto) in place of the (non-functional
   for anon) bell/star icons. flex-wrap lets the banner drop to its own
   full-width row on narrow screens instead of being crushed. The banner
   is ONE pill, not two nested ones: overflow:hidden on the outer shape
   clips the inner "Sign in" segment (full-height, no radius of its own)
   to the container's own corner radius, so it reads as a single control
   split into a label zone and a button zone — not a badge floating
   inside a bigger badge. */
html.ui-v2 .v2-hero-actions--anon { flex-wrap: wrap; row-gap: 8px; }
html.ui-v2 .v2-buy--compact { flex: 0 1 auto; padding: 0 20px; }
html.ui-v2 .v2-signin-banner {
  flex: 0 1 auto; min-width: 0; height: 40px; margin-left: auto;
  display: flex; align-items: stretch;
  background: rgba(124,108,246,0.10); border: 1px solid rgba(124,108,246,0.28);
  border-radius: 12px; overflow: hidden; text-decoration: none;
}
html.ui-v2 .v2-signin-banner:hover { border-color: var(--accent); }
html.ui-v2 .v2-signin-banner-text {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  color: var(--text); font-size: 12.5px; font-weight: 500;
  padding: 0 12px 0 14px;
  /* No-op on desktop (the banner itself is content-width there, so
     there's no spare room to grow into); on mobile, where the banner
     stretches to fill the row, this pushes the Sign in segment flush to
     the true right edge instead of leaving a dead gap after it. */
  flex: 1;
}
html.ui-v2 .v2-signin-banner-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-v2 .v2-signin-banner-text .tk-ic { flex: none; color: var(--accent); }
html.ui-v2 .v2-signin-banner-cta {
  flex: none; display: flex; align-items: center;
  background: var(--accent); color: #fff; font-weight: 600;
  font-size: 12px; padding: 0 14px;
}
@media (max-width: 640px) {
  html.ui-v2 .v2-signin-banner { flex: 1 1 100%; margin-left: 0; }
}

/* Share (#85): ghost icon button anchored to the end of row 1, next to the
   product title — outbound action, kept out of the buy/bell/star row so the
   mobile actions row stays exactly as the mockup designed it. Fixed size so it
   never shrinks or wraps away from the title on narrow screens (the title
   truncates first via .v2-hero-title's ellipsis). */
html.ui-v2 .v2-share-btn {
  flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); cursor: pointer;
  padding: 0;
}
html.ui-v2 .v2-share-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Alert strip inside the hero */
html.ui-v2 .v2-alert-strip { padding: 11px 18px; border-top: 1px solid var(--border); }
html.ui-v2 .v2-alert-strip .alert-strip-icon { display: inline-flex; color: var(--muted); }

/* Store-logo chip: favicon over an initials fallback */
html.ui-v2 .v2-hero-logo, html.ui-v2 .v2-srow-logo {
  position: relative; overflow: hidden; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface2); color: var(--muted);
}
html.ui-v2 .v2-hero-logo { width: 22px; height: 22px; border-radius: 6px; }
html.ui-v2 .v2-srow-logo { width: 32px; height: 32px; border-radius: 8px; }
html.ui-v2 .v2-logo-i { font-size: 9px; font-weight: 700; font-style: normal; letter-spacing: 0.02em; }
html.ui-v2 .v2-srow-logo .v2-logo-i { font-size: 11px; }
html.ui-v2 .v2-logo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }

/* History period pill toggle (replaces the Show: dropdown) */
html.ui-v2 #v2-chart-slot .chart-controls label,
html.ui-v2 #v2-chart-slot #days-select { display: none; }
html.ui-v2 .v2-period { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface2); border-radius: 10px; }
html.ui-v2 .v2-period-btn {
  background: transparent; border: none; cursor: pointer; color: var(--muted);
  font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 7px;
}
html.ui-v2 .v2-period-btn.on { background: var(--accent); color: #fff; }
/* Anon: period pills locked to 7D and disabled while the chart itself is
   gated, greyed out so they visibly can't be used rather than looking
   normal but silently doing nothing. */
html.ui-v2 .v2-period-btn:disabled {
  color: var(--muted);
  opacity: 0.4;
  cursor: not-allowed;
}

/* Mobile hero tweaks */
@media (max-width: 640px) {
  html.ui-v2 .v2-hero-main { gap: 13px; padding: 14px 16px 6px; }
  html.ui-v2 .v2-hero-thumb { width: 108px; height: 138px; }
  html.ui-v2 .v2-hero-price { font-size: 1.8rem; }
  html.ui-v2 .v2-hero-actions { padding: 10px 16px 14px; }
  html.ui-v2 .v2-alert-strip { flex-wrap: wrap; gap: 8px 10px; }
  /* Bell + label stay together on line 1 (label grows to fill it); the input +
     button wrap to line 2. (Was flex:1 1 100% which forced the label onto its
     own line, leaving the bell alone above it.) */
  html.ui-v2 .v2-alert-strip .alert-strip-label { flex: 1 1 auto; white-space: nowrap; }
  html.ui-v2 .v2-alert-strip .alert-strip-input-wrap { flex: 1 1 auto; }
  html.ui-v2 .v2-alert-strip .alert-strip-btn { flex: 0 0 auto; }
}

/* Price-history card */
html.ui-v2 #v2-chart-slot { display: block; }
html.ui-v2 #v2-chart-slot #chart-section {
  display: block; margin: 12px 0 0; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
html.ui-v2 #v2-chart-slot #chart-header { margin-bottom: 6px; align-items: center; }
html.ui-v2 #v2-chart-slot #chart-title { font-size: 12px; font-weight: 600; }
html.ui-v2 #v2-chart-slot .chart-container { height: 240px; }
@media (max-width: 640px) { html.ui-v2 #v2-chart-slot .chart-container { height: 210px; } }
html.ui-v2 #v2-chart-foot {
  display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--muted);
}
html.ui-v2 .v2-cf b { color: var(--text); font-weight: 600; margin-left: 2px; }
html.ui-v2 .v2-cf--now { color: var(--green); }
/* Matches the dashed average-price line's color in renderChart (app.js), so the
   "avg" footer reads as the same series as the chart, not just var(--text). */
html.ui-v2 .v2-cf--avg,
html.ui-v2 .v2-cf--avg b { color: rgb(255, 203, 5); }

/* All N stores list (mockup .srow) */
html.ui-v2 .v2-stores { margin-top: 14px; }
html.ui-v2 .v2-stores-label { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
html.ui-v2 .v2-srow {
  display: flex; align-items: center; justify-content: space-between; gap: 9px;
  padding: 9px 2px; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
}
html.ui-v2 .v2-srow--hidden { display: none; }
html.ui-v2 .v2-stores--expanded .v2-srow--hidden { display: flex; }
html.ui-v2 .v2-srow-l { display: flex; align-items: center; gap: 9px; min-width: 0; }
html.ui-v2 .v2-srow-text { display: flex; flex-direction: column; min-width: 0; }
html.ui-v2 .v2-srow-name {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.ui-v2 .v2-srow-sub { font-size: 10.5px; color: var(--muted); }
html.ui-v2 .v2-srow-price { font-size: 13.5px; font-weight: 700; color: var(--text); flex: none; }
html.ui-v2 .v2-srow-heart { color: #EC4899; font-size: 11px; }
html.ui-v2 .v2-stores-showall {
  display: block; width: 100%; text-align: center; background: transparent; border: none;
  color: var(--accent); font-weight: 600; font-size: 12px; padding: 11px 0 2px; cursor: pointer;
}

/* ── Deals & trending pull-up sheet ─────────────────────────────────── */
html.ui-v2 #v2-deals-scrim {
  position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none; transition: opacity .35s;
}
html.ui-v2 #v2-deals-scrim.on { opacity: 1; pointer-events: auto; }
html.ui-v2 #v2-deals-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
  max-width: 1100px; margin: 0 auto; height: auto; max-height: 80vh;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-bottom: none;
  border-radius: 20px 20px 0 0; box-shadow: 0 -8px 28px rgba(0,0,0,0.4);
  transform: translateY(calc(100% - 56px));
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
html.ui-v2 #v2-deals-sheet.open { transform: translateY(0); }
html.ui-v2 #v2-deals-handle {
  flex: none; width: 100%; background: transparent; border: none; cursor: grab;
  padding: 11px 18px 13px; color: var(--text); touch-action: none;
}
html.ui-v2 #v2-deals-handle:active { cursor: grabbing; }
html.ui-v2 .v2-deals-grip {
  display: block; width: 40px; height: 5px; border-radius: 5px;
  background: var(--border); margin: 0 auto 11px;
}
html.ui-v2 .v2-deals-handle-row { display: flex; align-items: center; justify-content: space-between; }
html.ui-v2 .v2-deals-title { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 600; }
html.ui-v2 .v2-deals-title .tk-ic { color: #F97316; }  /* keep the flame warm */
html.ui-v2 #v2-deals-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 16px 28px; }
/* Deals sheet's own product-type toggle (All/Sealed/Singles) — sits above the
   Hot/Drops/… tabs and drives ONLY the discovery cards (independent of search). */
html.ui-v2 .v2-deals-type {
  display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 12px;
  background: var(--surface2); border-radius: 11px;
}
html.ui-v2 .v2-dt-btn {
  appearance: none; border: none; background: none; cursor: pointer;
  font-size: 0.8rem; font-weight: 600; color: var(--muted); padding: 5px 14px; border-radius: 8px;
}
html.ui-v2 .v2-dt-btn--active { background: var(--accent); color: #fff; }
/* tabs (relocated #dc-filter) shown inside the sheet */
html.ui-v2 #v2-deals-tabs-slot #dc-filter {
  display: flex !important; flex-wrap: nowrap; overflow-x: auto; gap: 7px;
  padding: 0 0 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
html.ui-v2 #v2-deals-tabs-slot #dc-filter::-webkit-scrollbar { display: none; }
html.ui-v2 #v2-deals-tabs-slot .dc-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; font-weight: 500; padding: 6px 13px; border-radius: 12px;
  background: var(--surface2); border: 1px solid var(--border); color: var(--muted);
  white-space: nowrap; cursor: pointer;
}
html.ui-v2 #v2-deals-tabs-slot .dc-chip--active { background: var(--accent); border-color: transparent; color: #fff; font-weight: 600; }

/* scope dropdown (#c-mode-drop) — match the type/game menu vibe */
html.ui-v2 .c-mode-drop {
  border-radius: 12px; padding: 5px; min-width: 240px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
html.ui-v2 .c-mode-drop-item { gap: 8px; padding: 9px 11px; border-radius: 8px; }
html.ui-v2 .c-mode-drop-item:hover { background: var(--surface2); }
html.ui-v2 .c-mode-drop-label { font-size: 0.82rem; font-weight: 600; }
html.ui-v2 .c-mode-drop-item--active { background: var(--surface2); }
html.ui-v2 .c-mode-drop-item--active .c-mode-drop-label { color: var(--accent); }
html.ui-v2 .c-mode-drop-sub { font-size: 0.72rem; color: var(--muted); margin-top: 0; }

/* ════════════════════════════════════════════════════════════════════════
   STORES v2 — Search-hero redesign (card grid + leaderboard list)
   New class prefixes (.std-* card, .stl-* list) — no overlap with legacy
   .store-tcg-* / .store-list-* rules above.
   ════════════════════════════════════════════════════════════════════════ */
:root { --std-amber: #eab308; }
[data-theme="light"] { --std-amber: #ba7517; }

@keyframes std-holo { to { background-position: 300% 0; } }

/* ── Card grid (card view) ───────────────────────────────────────────── */
.std-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.std-card {
  background: #161e3c;   /* lighter elevated surface — contrast vs page (mockup pic 2) */
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.std-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.std-card-inner { padding: 14px; display: flex; flex-direction: column; height: 100%; }
.std-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.std-logo {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--logo-bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  flex: none; color: var(--accent); font-weight: 700; font-size: 15px;
}
.std-logo-img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.std-logo-mono { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.std-fav {
  background: none; border: none; cursor: pointer; color: var(--muted);
  padding: 4px; line-height: 0; border-radius: 8px;
}
.std-fav:hover, .std-fav--on { color: var(--std-amber); }
.std-name { font-size: 14px; font-weight: 600; margin-top: 10px; color: var(--text); }
.std-rating { font-size: 12px; margin-top: 4px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.std-stars { letter-spacing: 1px; font-size: 11px; white-space: nowrap; }
.std-star { color: var(--border); }
.std-star--on { color: var(--std-amber); }
.std-score { color: var(--text); font-size: 12px; }
.std-votes { color: var(--muted); font-size: 11px; }
.std-muted { opacity: .55; }
.std-seal {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  margin-top: 9px; font-size: 10px; font-weight: 600; color: #fff;
  padding: 3px 8px; border-radius: 8px;
  background: var(--holo); background-size: 300% 300%; animation: std-holo 9s linear infinite;
}
.std-seal .tk-ic { vertical-align: -1px; }
.std-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 9px; font-size: 11px; color: var(--muted);
}
.std-meta .tk-ic { vertical-align: -2px; }
.std-dot { opacity: .5; }
/* margin-top:auto pins the votebar to the card bottom so thumbs align across
   the row regardless of how much info (rating/seal/meta) each card has.
   padding-top guarantees a gap above the buttons even when content is tall. */
.std-votebar { display: flex; gap: 7px; margin-top: auto; padding-top: 12px; }
.std-vbtn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 32px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--muted); cursor: pointer; font-weight: 600; font-size: 12px;
}
.std-vbtn:hover { border-color: var(--accent); }
.std-vbtn--up.std-vbtn--on   { background: rgba(45,213,91,.16); color: var(--green); border-color: transparent; }
.std-vbtn--down.std-vbtn--on { background: rgba(224,48,48,.14); color: var(--red);   border-color: transparent; }

/* seal card — reserved rainbow border */
.std-card--seal {
  border: 1.5px solid transparent;
  background:
    linear-gradient(#161e3c, #161e3c) padding-box,
    var(--holo) border-box;
  background-size: auto, 300% 300%;
  animation: std-holo 9s linear infinite;
}
.std-card--seal:hover { border-color: transparent; transform: translateY(-2px); }

/* ── Leaderboard list (list view) ────────────────────────────────────── */
.stl-wrap {
  display: flex; flex-direction: column;
  /* 14px side gutter matches .stores-filters so the list box left edge lines
     up with the filter pills (was flush at 0 → pills looked indented). */
  margin: 0 14px;
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  /* lighter elevated surface for contrast against the page bg (mockup pic 2) */
  background: #161e3c;
}
.stl-head, .stl-row {
  display: grid;
  /* # | logo | Store | Shipping | Province | Rating | Vote | Fav. */
  grid-template-columns: 34px 42px minmax(0,1fr) 110px 78px 140px 84px 54px;
  align-items: center; gap: 12px; padding: 11px 16px;
}
.stl-head { border-bottom: 1px solid var(--border); }
.stl-head > span {                    /* uniform column titles: white, bold, same size */
  font-size: 11px; font-weight: 700; color: var(--text);
  letter-spacing: .04em; text-transform: uppercase;
}
.stl-headlogo {}                      /* empty header cell over logo — no box */
.stl-mmeta { display: none; }         /* desktop: per-column cells shown instead */
.stl-row { cursor: pointer; border-bottom: 1px solid var(--border); }
.stl-row:last-child { border-bottom: none; }
.stl-row:hover { background: rgba(255,255,255,.035); }
.stl-row--seal { border-left: 3px solid var(--std-amber); }
.stl-rank { font-weight: 700; color: var(--muted); font-size: 13px; }
.stl-row--seal .stl-rank { color: var(--std-amber); }
.stl-logo {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--logo-bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: var(--accent); font-weight: 700; font-size: 12px;
}
.stl-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; display: flex; align-items: center; gap: 6px;
}
.stl-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; color: #fff; flex: none;
  background: var(--holo); background-size: 300% 300%; animation: std-holo 9s linear infinite;
}
.stl-rating { font-size: 12px; color: var(--text); display: flex; align-items: center; gap: 5px; }
.stl-ship { font-size: 12px; color: var(--muted); }
.stl-prov { font-size: 12px; color: var(--muted); text-align: center; }  /* centered column */
.stl-head .stl-prov { text-align: center; }
/* Vote + Fav: centered in their columns (header label + body controls) */
.stl-actions { display: flex; align-items: center; gap: 6px; justify-content: center; }
.stl-actions .std-vbtn { flex: none; width: 30px; height: 30px; padding: 0; }
.stl-head .stl-actions { justify-content: center; }
.stl-favcell { display: flex; align-items: center; justify-content: center; }
.stl-favcell .std-fav { padding: 5px; }
.stl-head .stl-favcell { justify-content: center; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .std-grid { grid-template-columns: 1fr 1fr; gap: 11px; }
}
@media (max-width: 760px) {
  .stl-head { display: none; }
  .stl-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 12px 14px;
  }
  .stl-rank    { order: 1; min-width: 14px; flex: 0 0 auto; }
  .stl-logo    { order: 2; flex: 0 0 auto; }
  /* flex-basis 0 so a long name never pushes the vote/fav buttons onto their
     own line — the name ellipsizes and yields the row width to the (fixed) actions. */
  .stl-name    { order: 3; flex: 1 1 0; min-width: 0; }
  .stl-actions { order: 4; flex: 0 0 auto; }
  .stl-favcell { order: 5; margin-left: 2px; flex: 0 0 auto; }
  /* second line: one tidy summary; hide the desktop columns */
  .stl-rating, .stl-ship, .stl-prov { display: none; }
  .stl-mmeta {
    display: flex; order: 6; flex-basis: 100%; flex-wrap: wrap;
    align-items: center; gap: 4px 7px;
    /* align under the store icon's left edge: rank (14px) + column gap (8px) */
    padding-left: 22px; font-size: 11.5px; color: var(--muted);
  }
  .stl-mmeta b { color: var(--text); }
  .stl-mmeta .std-stars { font-size: 10px; }
}

/* ── Alerts tab (al-*) — mockup: redesign-tabs-mockups-v2.html ───────────── */
.al-quota { padding: 4px 14px 0; }
.al-quota-top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; margin-bottom: 7px; gap: 8px; }
.al-quota-used { font-weight: 600; color: var(--text); }
.al-quota-used b { font-weight: 700; }
.al-quota-note { color: var(--muted); font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.al-quota-bar { height: 5px; border-radius: 5px; background: var(--border); overflow: hidden; }
.al-quota-bar > span { display: block; height: 100%; border-radius: 5px; background: var(--accent); transition: width .25s ease; }

.alert-list { padding: 0 14px 18px; display: flex; flex-direction: column; }
.al-grouplabel { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 16px 2px 8px; display: flex; align-items: center; gap: 5px; }
.al-grouplabel--green { color: var(--green); }
.al-grouplabel .tk-ic { width: 12px; height: 12px; }

/* min-width:0 overrides the flex-item default of "never shrink below content's
   natural width" — without it, a nowrap descendant (e.g. .al-pill) can force
   the whole card wider than the screen instead of wrapping/truncating. .al-card
   is a flex item of both .alert-list (column) and .al-watchgrid (column on
   mobile, grid on desktop) so this single rule covers both card types. */
.al-card { margin-bottom: 9px; min-width: 0; }
/* object-fit:contain (not cover) matches the product-image convention used
   everywhere else in the app — cover was cropping wider/rectangular items
   like Elite Trainer Boxes. No fixed height: triggered and watching cards
   have different text-block heights (2 lines vs 4), so the thumb stretches
   to match whatever its row's content actually is via align-items:stretch
   below, rather than guessing one pixel value that can't fit both. */
.al-thumb { width: 58px; border-radius: 8px; flex: none; object-fit: contain; background: var(--logo-bg); }
.al-thumb--ph { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.al-row { display: flex; align-items: stretch; gap: 11px; }
.al-body { flex: 1; min-width: 0; }
.al-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.al-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-head-btns { display: flex; align-items: center; gap: 4px; flex: none; }
.al-x { background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px; line-height: 0; border-radius: 6px; flex: none; }
.al-x:hover { color: var(--red); }
.al-mut { color: var(--muted); }

.al-pill { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 8px; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.al-pill .tk-ic { vertical-align: -1px; }
.al-pill--green { background: rgba(93,202,165,.18); color: var(--green); }
.al-pill--amber { background: rgba(234,179,8,.18); color: var(--std-amber); }
.al-pill--ac { background: rgba(124,111,224,.18); color: var(--accent); }

/* triggered — rainbow "go grab it" hero (rainbow rotates AROUND the card) */
@property --al-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes al-rotate { to { --al-angle: 360deg; } }
.al-rbord {
  border-radius: 14px; padding: 1.5px; position: relative;
  background: conic-gradient(from var(--al-angle), #7C6FE0, #3B82F6, #22C55E, #EAB308, #F97316, #EC4899, #7C6FE0);
  animation: al-rotate 6s linear infinite;
}
/* fallback for engines without @property: static rainbow (no rotation) */
@supports not (background: conic-gradient(from var(--al-angle), red, blue)) {
  .al-rbord { background: var(--holo); }
}
.al-card--triggered .al-rinner { position: relative; }
.al-x--trig { position: absolute; top: 11px; right: 11px; }
.al-card--triggered .al-head { padding-right: 20px; }
.al-rinner { background: var(--surface); border-radius: 12.5px; padding: 12px; }
.al-priceline { display: flex; align-items: baseline; gap: 7px; margin-top: 5px; flex-wrap: wrap; }
.al-price-hit { font-size: 19px; color: var(--green); }
.al-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.al-actions { display: flex; gap: 7px; margin-top: 10px; }
.al-buy { flex: 1; min-width: 0; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 600; padding: 8px 12px; border-radius: 9px; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.al-buy-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-buy .tk-ic { vertical-align: -2px; }
.al-buy--off { background: var(--border); color: var(--muted); cursor: default; }
.al-ibtn { border: 1px solid var(--border); border-radius: 9px; padding: 0 11px; background: var(--surface2); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; }
.al-ibtn:hover { border-color: var(--accent); color: var(--accent); }
.al-ibtn--sm { padding: 3px; border-radius: 6px; }

/* both card types are tap-to-edit (opens the price-alert sheet) */
.al-card--triggered .al-rinner { cursor: pointer; }
.al-card--triggered [data-act], .al-card--triggered .al-buy { cursor: pointer; }

/* watching — distance-to-target bar */
.al-card--watching > .al-row--tap { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 13px; cursor: pointer; }
.al-card--watching > .al-row--tap:hover { border-color: var(--accent); }
.al-target { font-size: 11px; margin-top: 3px; color: var(--text); }
.al-target b { font-weight: 700; }
.al-target .tk-ic { vertical-align: -1px; }
.al-distbar { height: 6px; border-radius: 6px; background: var(--border); overflow: hidden; margin-top: 9px; }
.al-distbar > span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg,#EAB308,#F97316); }
/* Reserves the same vertical space as a real bar (no-price / "any price"
   alerts) so every watching card is the same height — see _renderAlerts. */
.al-distbar--hidden { visibility: hidden; }
.al-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.al-note { font-size: 11px; color: var(--muted); white-space: nowrap; }

.al-edit { display: none; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 13px; border: 1px solid var(--accent); border-top: none; border-radius: 0 0 14px 14px; background: var(--surface); }
.al-card--expanded .al-edit { display: flex; }
.al-edit-label { font-size: 11px; color: var(--muted); }
.al-price-group { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 9px; background: var(--surface2); padding: 0 8px; }
.al-price-prefix { color: var(--muted); font-size: 13px; }
.al-price-input { border: none; background: none; color: var(--text); font-size: 13px; width: 64px; padding: 7px 4px; outline: none; }
.al-save-btn { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.al-search-btn { border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); color: var(--muted); padding: 7px 10px; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.al-search-btn .tk-ic { vertical-align: -2px; }

.al-empty { text-align: center; color: var(--muted); padding: 48px 20px; }
.al-empty-ic { color: var(--accent); margin-bottom: 10px; display: flex; justify-content: center; }
.al-empty p { margin: 4px 0; }
.al-empty-sub { font-size: .85rem; }
.al-empty-sub .tk-ic { vertical-align: -2px; }
.al-watchgrid { display: flex; flex-direction: column; }

/* desktop — triggered hero widens, watching drops into a 2-up grid */
@media (min-width: 760px) {
  .al-card--triggered .al-rinner { display: flex; align-items: center; gap: 18px; }
  .al-card--triggered .al-row { flex: 1; min-width: 0; }
  .al-card--triggered .al-head { padding-right: 0; }
  .al-card--triggered .al-actions { margin-top: 0; flex: 0 1 auto; min-width: 0; max-width: 260px; }
  .al-card--triggered .al-buy { flex: 1 1 auto; min-width: 0; padding: 10px 16px; }
  .al-card--triggered .al-price-hit { font-size: 22px; }
  /* ✕ becomes the last item in the row, pinned far right (mockup) */
  .al-x--trig { position: static; flex: none; order: 3; }
  .al-watchgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
  .al-card--watching { margin-bottom: 0; }
}

/* ── Watchlist tab (wl-*) — mockup: redesign-tabs-mockups-v2.html ─────────── */
html.ui-v2 #watchlist-header { display: block; padding: 4px 14px 0; margin-bottom: 0; }
.wl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.wl-count-label { font-size: 12px; font-weight: 600; color: var(--text); }
.wl-sort { position: relative; }
.wl-sort-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface2); color: var(--text); font-size: 12px; padding: 7px 11px; cursor: pointer; }
.wl-sort-btn b { font-weight: 600; }
.wl-sort-btn .tk-ic { color: var(--muted); }
.wl-sort-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 5px; min-width: 178px; z-index: 95; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.wl-sort-opt { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font-size: 12.5px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.wl-sort-opt:hover { background: var(--surface2); }
.wl-sort-opt--active { color: var(--accent); font-weight: 600; }

html.ui-v2 #watchlist-body { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 18px; }
.wl-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.wl-card--expanded { border-color: var(--accent); }
.wl-card--dim { opacity: .62; }
.wl-crow { display: flex; align-items: center; gap: 11px; padding: 11px; cursor: pointer; }
.wl-cthumb { width: 40px; height: 54px; border-radius: 8px; flex: none; object-fit: cover; background: var(--logo-bg); }
.wl-cthumb--ph { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.wl-cinfo { flex: 1; min-width: 0; }
.wl-cname { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-cpriceline { font-size: 11px; margin-top: 2px; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; }
.wl-cprice { color: var(--text); font-weight: 700; font-size: 11px; }
.wl-cmut { color: var(--muted); }
.wl-cspark { width: 88px; height: 34px; flex: none; }
.wl-cspark--empty { display: inline-block; width: 88px; }
.wl-trend { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 7px; white-space: nowrap; }
.wl-trend--down { background: rgba(93,202,165,.18); color: var(--green); }
.wl-trend--up { background: rgba(240,108,108,.16); color: var(--red); }
.wl-pill { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 7px; display: inline-flex; align-items: center; gap: 3px; }
.wl-pill--amber { background: rgba(234,179,8,.18); color: var(--std-amber); }
.wl-pill .tk-ic { vertical-align: -1px; }
.wl-x { background: none; border: none; color: var(--muted); cursor: pointer; padding: 3px; line-height: 0; border-radius: 6px; flex: none; }
.wl-x:hover { color: var(--red); }
.wl-chev { display: none; background: none; border: none; color: var(--muted); cursor: pointer; padding: 3px; line-height: 0; flex: none; }
.wl-card--expanded .wl-chev { display: inline-flex; }
.wl-card--expanded .wl-cspark, .wl-card--expanded .wl-x { display: none; }

/* Animated expand/collapse. Height is driven by JS (measured scrollHeight →
   px → 0) rather than the grid-0fr trick, which iOS Safari doesn't collapse. */
.wl-expand { height: 0; overflow: hidden; transition: height .28s ease; }
.wl-expand-inner { padding: 0 13px 13px; }
.wl-card { transition: border-color .2s ease; }
.wl-chartwrap { min-width: 0; }
/* Aspect-locked so the line/dot never distort, whatever the card width. */
.wl-bigspark { width: 100%; height: auto; aspect-ratio: 300 / 48; display: block; }
.wl-bigspark-empty { font-size: 11px; color: var(--muted); text-align: center; padding: 22px 0; }
.wl-stats { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; margin-top: 6px; }
.wl-stat { color: var(--muted); }
.wl-stat b { color: var(--text); }
.wl-stat--avg, .wl-stat--avg b { color: var(--std-amber); }
.wl-stat--now, .wl-stat--now b { color: var(--green); }
.wl-exp-actions { display: flex; gap: 7px; margin-top: 11px; }
.wl-buy { flex: 1; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 600; padding: 9px 12px; border-radius: 9px; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.wl-buy--off { background: var(--border); color: var(--muted); cursor: default; }
.wl-ibtn { border: 1px solid var(--border); border-radius: 9px; background: var(--surface2); color: var(--muted); padding: 8px 11px; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.wl-ibtn:hover { border-color: var(--accent); color: var(--accent); }
.wl-ibtn--del:hover { border-color: var(--red); color: var(--red); }
.wl-ibtn .tk-ic { vertical-align: -2px; }
.wl-empty-ic { color: var(--accent); margin-bottom: 10px; display: flex; justify-content: center; }

/* desktop — 2-up grid; the expanded card keeps its column width (chart + stats
   + actions stacked) so it never balloons to full width */
@media (min-width: 760px) {
  html.ui-v2 #watchlist-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
}

/* ── Set-a-price-alert sheet — mobile bottom sheet / desktop modal ─────────── */
.alert-sheet { position: fixed; inset: 0; z-index: 300; }
.alert-sheet.hidden { display: none; }
.alert-sheet-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.alert-sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--surface); border-top: 1px solid var(--border);
  border-radius: 22px 22px 0 0;
  padding: 16px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 22px rgba(0,0,0,.3);
  animation: alert-sheet-up .22s ease;
}
@keyframes alert-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
/* The whole panel is a drag surface (swipe-to-dismiss); touch-action:none lets
   the gesture register anywhere without the browser hijacking it as a scroll.
   The price input opts back into normal touch behaviour for caret/selection. */
.alert-sheet-panel { touch-action: none; }
.alert-sheet-price { touch-action: auto; }
/* slightly taller grip + padded margins so it reads as a pull handle */
.alert-sheet-grip { width: 60px; height: 6px; border-radius: 4px; background: var(--border); margin: 4px auto 16px; cursor: grab; }
.alert-sheet-grip:active { cursor: grabbing; }
.alert-sheet-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.alert-sheet-thumb { width: 38px; height: 50px; border-radius: 8px; flex: none; background: var(--logo-bg); display: flex; align-items: center; justify-content: center; color: var(--muted); overflow: hidden; }
.alert-sheet-thumb img { width: 100%; height: 100%; object-fit: cover; }
.alert-sheet-title { font-size: 14px; font-weight: 600; color: var(--text); }
.alert-sheet-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.alert-sheet-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.alert-sheet-inputs { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; }
.alert-sheet-pricewrap { flex: 1; display: flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface2); padding: 11px 14px; }
.alert-sheet-dollar { color: var(--muted); font-size: 15px; }
.alert-sheet-price { flex: 1; min-width: 0; border: none; background: none; color: var(--text); font-size: 15px; outline: none; }
.alert-sheet-price:disabled { color: var(--muted); }
.alert-sheet-any { border: 1px solid var(--border); border-radius: 11px; background: var(--surface2); color: var(--text); font-size: 11px; padding: 11px 12px; cursor: pointer; white-space: nowrap; }
.alert-sheet-any b { margin-left: 3px; }
.alert-sheet-any.on { background: rgba(124,111,224,.16); color: var(--accent); border-color: transparent; }
.alert-sheet-track { display: flex; align-items: center; gap: 11px; background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; padding: 12px; }
.alert-sheet-track-text { flex: 1; }
.alert-sheet-track-title { font-size: 12.5px; font-weight: 600; color: var(--text); }
.alert-sheet-track-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.alert-sheet-toggle { width: 34px; height: 20px; border-radius: 11px; background: var(--border); border: none; position: relative; flex: none; cursor: pointer; padding: 0; transition: background .15s; }
.alert-sheet-toggle > span { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.alert-sheet-toggle.on { background: var(--accent); }
.alert-sheet-toggle.on > span { left: 16px; }
.alert-sheet-status { font-size: 12px; min-height: 16px; margin-top: 10px; color: var(--muted); }
.alert-sheet-status.ok { color: var(--green); }
.alert-sheet-status.err { color: var(--red); }
.alert-sheet-actions { display: flex; gap: 8px; margin-top: 6px; }
.alert-sheet-cancel { border: 1px solid var(--border); border-radius: 9px; background: var(--surface2); color: var(--text); padding: 11px 16px; font-size: 12.5px; cursor: pointer; }
.alert-sheet-create { flex: 1; background: var(--accent); color: #fff; border: none; border-radius: 9px; padding: 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.alert-sheet-create .tk-ic { vertical-align: -2px; }
.alert-sheet-create:disabled { opacity: .6; cursor: default; }
body.alert-sheet-open { overflow: hidden; }

@media (min-width: 760px) {
  .alert-sheet-panel {
    left: 50%; right: auto; bottom: auto; top: 50%;
    transform: translate(-50%, -50%);
    width: 420px; max-width: 92vw;
    border: 1px solid var(--border); border-radius: 16px;
    padding: 22px;
    animation: alert-sheet-pop .18s ease;
  }
  @keyframes alert-sheet-pop { from { transform: translate(-50%, -48%); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
  .alert-sheet-grip { display: none; }
}

/* ── Settings language switch (i18n) ──────────────────────────────────────── */
.lang-seg { display: inline-flex; align-self: flex-start; border: 1px solid var(--border); border-radius: 11px; overflow: hidden; background: var(--surface2); }
.lang-seg-btn { background: none; border: none; color: var(--muted); font-size: 13px; font-weight: 600; padding: 9px 18px; cursor: pointer; }
.lang-seg-btn:not(.lang-seg-btn--active):hover { color: var(--text); }
.lang-seg-btn--active { background: var(--accent); color: #fff; }

/* ── Store Detail Overlay — C modal (.sdo-*) ──────────────────────────────── */
.sdo-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  overscroll-behavior: contain;   /* prevent background scroll without body lock */
}
.sdo-overlay.sdo-open { opacity: 1; pointer-events: all; }

.sdo-modal {
  width: 100%; max-height: 92dvh;
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  transform: translateY(48px);
  transition: transform .32s cubic-bezier(.34,1.1,.64,1);
}
.sdo-overlay.sdo-open .sdo-modal { transform: translateY(0); }

/* Cover strip */
.sdo-cover {
  height: 80px; position: relative; flex: none;
  border-radius: 22px 22px 0 0;
}
.sdo-close {
  position: absolute; top: 12px; right: 14px;
  background: rgba(255,255,255,.18); border: none; border-radius: 50%;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer; transition: background .15s;
}
.sdo-close:hover { background: rgba(255,255,255,.3); }
.sdo-cover-logo {
  position: absolute; left: 16px; bottom: -22px;
  width: 44px; height: 44px; border-radius: 12px;
  border: 2.5px solid var(--surface);
  overflow: hidden; background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: var(--accent);
}
.sdo-logo-img { width: 100%; height: 100%; object-fit: cover; }
.sdo-logo-mono { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.sdo-seal-pill {
  position: absolute; right: 14px; bottom: 10px;
  background: var(--holo); background-size: 200% 200%;
  animation: std-holo 9s linear infinite;
  color: #fff; font-size: 10px; font-weight: 700;
  padding: 3px 9px; border-radius: 99px;
  display: flex; align-items: center; gap: 4px;
}

/* Scrollable body */
.sdo-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; padding: 30px 16px 32px;
}
/* Remove 300ms tap delay on all interactive elements in the modal */
.sdo-close, .sdo-tab, .sdo-vbtn, .sdo-fav-btn, .sdo-search-btn,
.sdo-notes-save, .sdo-row a {
  touch-action: manipulation;
}
.sdo-name-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
}
.sdo-name { font-size: 17px; font-weight: 700; color: var(--text); flex: 1; }
.sdo-fav-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600;
  background: rgba(234,179,8,.07); border: 1px solid rgba(234,179,8,.25);
  border-radius: 99px; cursor: pointer; padding: 5px 11px;
  color: var(--muted); transition: color .15s, background .15s, border-color .15s;
  white-space: nowrap; flex-shrink: 0;
}
.sdo-fav-btn:hover { background: rgba(234,179,8,.13); border-color: rgba(234,179,8,.45); color: var(--std-amber); }
.sdo-fav-btn.active { color: var(--std-amber); background: rgba(234,179,8,.15); border-color: rgba(234,179,8,.5); }
.sdo-stars-row {
  font-size: 13px; color: var(--muted); margin-bottom: 14px;
  display: flex; align-items: center; gap: 5px;
}
.sdo-stars-row b { color: var(--text); }
.sdo-muted  { color: var(--muted); font-size: 12px; }

/* Tab bar */
.sdo-tabs {
  display: flex; gap: 2px; background: var(--surface2); border-radius: 9px; padding: 3px;
  margin-bottom: 14px;
}
.sdo-tab {
  flex: 1; text-align: center; font-size: 13px; font-weight: 600;
  padding: 6px 0; border: none; background: none; color: var(--muted); border-radius: 7px;
  cursor: pointer; transition: color .15s, background .15s;
}
.sdo-tab.active { background: var(--surface); color: var(--text); }

/* Panels */
.sdo-panel { display: none; }
.sdo-panel.active { display: block; }

/* Info card */
.sdo-info-card {
  background: var(--surface2); border-radius: 13px; padding: 12px 14px;
  margin-bottom: 18px;
}
.sdo-row {
  display: flex; align-items: flex-start; gap: 9px; font-size: 13px;
  padding: 5px 0; color: var(--text); border-bottom: 1px solid var(--border);
}
.sdo-row:last-child { border-bottom: none; padding-bottom: 0; }
.sdo-row:first-child { padding-top: 0; }
.sdo-row--notes { color: var(--muted); font-size: 12px; }
.sdo-row-icon { color: var(--muted); width: 16px; flex: none; display: flex; align-items: center; margin-top: 1px; }
.sdo-row-icon--accent { color: var(--accent); }
.sdo-link { color: var(--muted); text-decoration: none; }
.sdo-link:hover { text-decoration: underline; }
.sdo-link--accent { color: var(--accent); display: flex; align-items: center; gap: 4px; }

/* Vote section */
.sdo-vote-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin-bottom: 9px;
}
.sdo-vote-btns { display: flex; gap: 8px; margin-bottom: 16px; }
.sdo-vbtn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  padding: 10px 0; border-radius: 11px; border: 1px solid var(--border);
  background: var(--surface2); color: var(--text); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.sdo-vbtn--up.sdo-vbtn--on  { background: rgba(45,213,91,.15); color: var(--green); border-color: transparent; }
.sdo-vbtn--down.sdo-vbtn--on { background: rgba(224,48,48,.13); color: var(--red);   border-color: transparent; }

/* Search btn */
.sdo-search-btn {
  width: 100%; padding: 11px; border-radius: 11px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--muted); font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .15s, color .15s;
}
.sdo-search-btn:hover { background: var(--surface); color: var(--text); }

/* Login hint */
.sdo-login-hint { font-size: 12px; color: var(--muted); margin: 0 0 16px; }

/* Notes panel */
.sdo-notes-hint {
  font-size: 11px; color: var(--muted); margin-bottom: 9px;
  display: flex; align-items: center; gap: 5px;
}
.sdo-notes-card {
  background: var(--surface2); border-radius: 12px; padding: 11px 13px; margin-bottom: 10px;
}
.sdo-notes-ta {
  width: 100%; background: none; border: none; resize: none; color: var(--text);
  font-size: 13px; min-height: 110px; font-family: inherit; line-height: 1.6;
  outline: none;
}
.sdo-notes-footer {
  display: flex; justify-content: space-between; align-items: center;
}
.sdo-notes-save {
  padding: 7px 18px; border-radius: 8px;
  background: var(--accent); border: none; color: #fff; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: opacity .15s;
}
.sdo-notes-save:hover { opacity: .85; }

/* Events panel */
.sdo-events-empty {
  text-align: center; padding: 36px 16px; color: var(--muted); font-size: 13px; line-height: 1.8;
}

/* Desktop: centered modal ≥ 641 px */
@media (min-width: 641px) {
  .sdo-overlay { align-items: center; }
  .sdo-modal {
    width: 580px; max-width: 90vw; max-height: 85dvh;
    border-radius: 22px;
    transform: scale(.95) translateY(16px);
  }
  .sdo-overlay.sdo-open .sdo-modal { transform: scale(1) translateY(0); }
  .sdo-cover { border-radius: 22px 22px 0 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Discovery lanes feed (Phase 2, html.deals-lanes) — stacked horizontal rails
   that replace the pull-up flip-card deals sheet. Theme-aware via the app tokens.
   ══════════════════════════════════════════════════════════════════════════ */
#deals-lanes-section { display: none; }                 /* JS toggles display on home */
html.deals-lanes #v2-deals-sheet,
html.deals-lanes #v2-deals-scrim { display: none !important; }   /* hide the old sheet */
html:not(.deals-lanes) #deals-lanes-section { display: none !important; }

/* Home is the one wide view: the deals feed is a card grid, which only gains
   from the room, so it runs to 1440 instead of the app's usual ~1100. Every
   other view stays narrow on purpose — a price list stretched this wide puts
   the store name and the price a hand-span apart. (The topbar itself is
   pinned to 1440 everywhere — see "Top bar" above — so only this content
   width toggles with html.v2-wide-home, not the logo/icons row.) */
#deals-lanes-section {
  max-width: 1440px;
  /* Generous top gap so the search hero keeps its prominence and the deals feed
     reads as a distinct section beginning below it (mockup B). */
  margin: 48px auto 56px;
  padding: 0 18px;
  box-sizing: border-box;
}
/* #app caps EVERY view at 1100px, so it has to be lifted too or the rules below
   are dead letters (they were, in v4.1.709). 1480 = the feed's 1440 plus #app's
   own 20px gutters, so the feed gets its full width and stays centred. */
html.v2-wide-home #app { max-width: 1480px; }
/* Title + type filter read as ONE left-aligned cluster. space-between was fine at
   1120px but at 1440 it flung the filter ~1000px from the title with a void
   between them, and the filter is global across every lane, so pinning it to the
   far edge made it look like it belonged to nothing. */
#deals-lanes-head {
  display: flex; align-items: center;
  gap: 18px; flex-wrap: wrap; margin: 4px 2px 20px;
}
/* .v2-deals-type carries `margin: 0 0 12px` from the old pull-up sheet. In this
   centred flex row that bottom margin lifts the pills 12px above the title, so
   they read as misaligned. Zero it here only — the sheet still needs its own. */
#deals-lanes-head #deals-lanes-type { margin: 0; }
.deals-lanes-title {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 17px; color: var(--text);
}
.deals-lanes-title .v2-deals-flame { color: #fb923c; }

.deal-lane { margin-bottom: 30px; }
.deal-lane-head { display: flex; align-items: center; gap: 9px; margin: 0 2px 14px; }
.deal-lane-ico {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center; color: #fff;
}
.deal-lane-title { font-weight: 700; font-size: 14.5px; color: var(--text); }

.deal-lane-rail {
  display: flex; gap: 16px; overflow-x: auto; padding: 6px 2px 12px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.deal-lane-rail::-webkit-scrollbar { height: 8px; }
.deal-lane-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 20px; }
.deal-lane-rail::-webkit-scrollbar-track { background: transparent; }

/* A clearly PORTRAIT tile (height noticeably > width), like the mockup — narrow
   card with a tall image area. Breathiness comes from the inset image + padding,
   NOT from a wide tile. */
.lane-tile {
  flex: 0 0 auto; width: 188px; scroll-snap-align: start;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.lane-tile:hover { transform: translateY(-3px); border-color: var(--muted); }
.lane-tile-thumb {
  position: relative; height: 216px; display: grid; place-items: center;
  background: var(--surface); padding: 18px;
}
/* Image inset with padding so it never fills edge-to-edge (breathy); centered in
   the tall portrait thumb so landscape products get vertical margin too. */
.lane-tile-img { max-width: 80%; max-height: 176px; object-fit: contain; }
.lane-tile-img--empty { width: 86px; height: 120px; border-radius: 8px; background: var(--surface2); }
.lane-tile-chip {
  position: absolute; top: 10px; left: 10px; max-width: calc(100% - 20px);
  font-size: 11px; font-weight: 800; line-height: 1.4; padding: 3.5px 8px;
  border-radius: 7px; color: #fff; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; background: var(--lane-accent, var(--accent));
}
.lane-tile-body { padding: 13px 14px 15px; }
/* Up to two lines, sized to content — same reasoning as .digest-name. Reserving
   a second line kept every tile's price on one baseline, but paid for it with a
   visible hole under every one-line title. Tiles are flex-stretched to equal
   height anyway, so the slack now collects at the card's foot instead, and the
   price sits where the title actually ends. */
.lane-tile-title {
  font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--text);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.lane-tile-price { font-size: 14.5px; font-weight: 800; color: var(--text); margin-top: 6px; }

/* Was/now pair — only the drop lane renders one. The struck price stays muted so
   it reads as "the number you are no longer paying", and the live price takes
   the lane accent (green on Price Drop) so the saving is what the eye lands on. */
.price-was {
  color: var(--muted); font-weight: 700; text-decoration: line-through;
  margin-right: 7px; font-variant-numeric: tabular-nums;
}
.price-now {
  color: var(--lane-text, var(--lane-accent, var(--accent))); font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ── Digest cells (the lanes below the leading rails) ─────────────────────
   Horizontal rails are a touch idiom: with a mouse there is no natural gesture
   for them, so only the first _RAIL_LANES categories stay as rails. The rest
   become cells — one visual hero plus ranked text rows — laid out in a grid
   that WRAPS. Never a second scroll axis: auto-fill drops to fewer columns as
   the viewport narrows, so a cell is never half off-screen. */
.deal-digest {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px; margin-top: 6px;
}
.digest-cell {
  background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--lane-accent, var(--accent));
  border-radius: 16px; padding: 16px; display: flex; flex-direction: column;
  /* Grid items default to min-width:auto (their own min-content size), which
     wins over the track's minmax(300px,1fr) — a bracketed sealed-product
     variant string ("[Glaceon/Vaporeon/Sylveon/Espeon]") has no spaces to
     wrap on, so its unbroken min-content width blew this cell past 300px
     and off the right edge of mobile screens. Singles names rarely contain
     a run that long, which is why only Sealed showed it. min-width:0 lets
     the cell actually shrink to its track and hand off to the descendants'
     own overflow rules (line-clamp, ellipsis) instead of overriding them. */
  min-width: 0;
}
.digest-head { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; }
.digest-head .deal-lane-ico { width: 24px; height: 24px; border-radius: 7px; }

/* Lane subtitle: explains the CRITERION a lane uses ("why is this here"), one
   level up from the chip which shows that criterion's per-item value. Base
   rule sits it right beside the title (rail heads — Michael: pushed to the
   far right "looks too far", wants it next to "On Fire"/"Price Drop"); the
   digest-cell head (the wider grid cells) overrides back to margin-left:auto
   below, where the far-right placement reads fine because the cell is
   narrower and the title/blurb pairing is less immediate. Allowed to wrap
   rather than truncate — these are short by design (see i18n deals.blurb*),
   and neither head has a fixed height, so a wrapped second line just grows
   the cell instead of clipping. Swaps for a tap-to-reveal info button under
   640px, where there isn't room for title + a sentence. */
.lane-blurb {
  margin-left: 2px; flex: 1 1 auto; min-width: 0;
  color: var(--muted); font-size: 11.5px; font-weight: 500; line-height: 1.3;
  text-align: left;
}
.digest-head .lane-blurb { margin-left: auto; flex: none; max-width: 58%; text-align: right; }
.lane-info-btn {
  display: none; position: relative; margin-left: auto; flex: none;
  width: 22px; height: 22px; border-radius: 50%; padding: 0;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border); color: var(--muted); cursor: pointer;
}
.lane-info-btn svg { width: 13px; height: 13px; }
.lane-info-btn:hover, .lane-info-btn.open { color: var(--text); border-color: var(--muted); }
.lane-info-pop {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  width: max-content; max-width: 200px; white-space: normal; text-align: left;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 11px; font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--text);
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.45);
}
.lane-info-btn.open .lane-info-pop { display: block; }
.digest-label {
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--lane-text, var(--lane-accent, var(--accent)));
}
/* Hero: the one item in this category that keeps its picture. The bottom margin
   is the MINIMUM breathing room above the divider; .digest-rows adds any surplus
   via margin-top:auto, so the tallest cell in a row still gets its 13px. */
.digest-feat { display: flex; flex-direction: column; gap: 11px; cursor: pointer; margin-bottom: 13px; }
.digest-art {
  border-radius: 11px; background: var(--surface2); display: grid; place-items: center;
  padding: 14px; height: 150px;
}
.digest-art img { max-width: 60%; max-height: 122px; object-fit: contain; }
.digest-art .lane-tile-img--empty { width: 74px; height: 104px; }
.digest-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Every row of a cell is a FIXED height so that cells sitting side by side line
   up: art, chip, name, price and the divider all land on the same baseline
   across the grid. Letting content size these means one two-line product name
   shunts that whole column out of step with its neighbours — which today's
   all-one-line data hides by luck, not by design. */
/* The metric is bold text in the lane colour, NOT a filled pill. A filled chip is
   unmissable but there are ~24 of them on a full screen, and when everything is
   highlighted the highlight stops meaning anything. Colour alone still carries
   the meaning and reads far calmer at this density. The rail tiles keep their
   filled chips because those sit on top of a product photo, where coloured text
   would be unreadable. */
.digest-chip {
  align-self: flex-start; font-size: 13px; font-weight: 800;
  color: var(--lane-text, var(--lane-accent, var(--accent)));
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  height: 24px; line-height: 24px;
}
/* Rendered unconditionally to hold the row's height; hidden (not removed) when a
   lane has no metric, so the cells below it stay in step. */
.digest-chip:empty { visibility: hidden; }
/* Up to two lines, but only as TALL as it needs. A hard two-line reservation
   kept cells aligned at the cost of an obvious hole between a one-line title and
   its price. Alignment now comes from anchoring .digest-rows to the bottom of
   the (grid-stretched, equal-height) cell instead, so the ranked rows still line
   up across the row of cells and the slack lands above the divider, where it
   reads as padding rather than as a gap inside the hero block. */
.digest-name {
  font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--text);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
/* trending_list and watch_list carry no price at all, so this box has to hold
   its height when it renders empty or those cells ride up. */
.digest-price {
  font-size: 21px; font-weight: 900; line-height: 1.2; color: var(--text);
  min-height: 25px;
}
/* Ranked rows. Rank starts at 2 — the hero above is #1 of the same list. */
/* margin-top:auto pins the ranked rows to the bottom of the stretched cell, so
   they align across cells regardless of how tall each hero title turned out. */
.digest-rows { margin-top: auto; border-top: 1px solid var(--border); padding-top: 8px; }
.digest-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 6px;
  border-radius: 9px; cursor: pointer; transition: background .12s ease;
}
.digest-row:hover { background: var(--surface2); }
.digest-rank {
  width: 14px; flex: none; font-size: 11px; font-weight: 800; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.digest-thumb {
  width: 30px; height: 41px; flex: none; border-radius: 4px; background: var(--surface2);
  object-fit: contain;
}
/* Two lines, so the truncation lands deep in the name instead of eating it at
   ~110px. This costs nothing in height: the stacked number column beside it is
   already two lines tall, so the name is filling space the row had anyway. */
.digest-rowname {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text);
  line-height: 1.35; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
/* Metric leads, price is reference beneath it — the metric is the reason the row
   is in this lane at all, and the price is one click away. */
.digest-rownums {
  flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  text-align: right;
}
.digest-rowmetric {
  font-size: 11.5px; font-weight: 800; white-space: nowrap;
  color: var(--lane-text, var(--lane-accent, var(--accent)));
  font-variant-numeric: tabular-nums;
}
.digest-rowprice {
  font-size: 11.5px; font-weight: 800; color: var(--text); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Per-lane accent, inherited by the icon, the rail chip and the cell's top edge.
   These are FILL colours: picked to sit behind white text, and they carry 4.5:1+
   as text only on the dark ground (6.8:1 orange, 9.9:1 yellow on #0a0f20). */
.deal-lane--trending { --lane-accent: #f97316; }
.deal-lane--drop     { --lane-accent: #10b981; }
.deal-lane--low      { --lane-accent: #eab308; }
.deal-lane--spread   { --lane-accent: #8b5cf6; }
.deal-lane--restock  { --lane-accent: #06b6d4; }
.deal-lane--clicked  { --lane-accent: #ef4444; }
.deal-lane--landed   { --lane-accent: #14b8a6; }
.deal-lane--watched  { --lane-accent: #ec4899; }
.deal-lane--below    { --lane-accent: #3b82f6; }
.deal-lane-ico { background: var(--lane-accent, var(--accent)); }

/* …but as TEXT on the light theme those same fills collapse: 1.92:1 for the
   yellow on white, 2.43:1 for the cyan — seven of the nine fail WCAG AA. So the
   light theme gets a darkened twin per lane (measured to land just past 4.5:1),
   used anywhere the accent is text rather than a background. This also fixes the
   pre-existing .digest-label, which was already coloured text on white. */
[data-theme="light"] .deal-lane--trending { --lane-text: #c35305; }
[data-theme="light"] .deal-lane--drop     { --lane-text: #0c855d; }
[data-theme="light"] .deal-lane--low      { --lane-text: #916f05; }
[data-theme="light"] .deal-lane--spread   { --lane-text: #8452f5; }
[data-theme="light"] .deal-lane--restock  { --lane-text: #047f94; }
[data-theme="light"] .deal-lane--clicked  { --lane-text: #eb1515; }
[data-theme="light"] .deal-lane--landed   { --lane-text: #0f8578; }
[data-theme="light"] .deal-lane--watched  { --lane-text: #e0177a; }
[data-theme="light"] .deal-lane--below    { --lane-text: #1e6ff5; }

@media (max-width: 640px) {
  #deals-lanes-section { padding: 0 12px; margin-top: 34px; }
  #deals-lanes-head { margin-bottom: 16px; }
  .deal-lane-rail { gap: 13px; }
  /* "Bigger blocks" sizing, approved against the mobile-vs-desktop prototype:
     tile 148->172, thumb 168->196, image ceiling 138->160, digest art 132->156 /
     106->128. Padding scales with the tile per the same tw*0.095 ratio the
     prototype used (148px -> 14px, so 172px -> ~16px). Title/price stay at the
     base 18px/21px — the prototype's mobile view showed 16/19 there, but that
     was a prototype-only approximation; production never had a mobile-specific
     override for those two, so introducing one now would be a new
     inconsistency, not a match to something that already shipped. */
  .lane-tile { width: 172px; }
  .lane-tile-thumb { height: 196px; padding: 16px; }
  .lane-tile-img { max-height: 160px; }
  /* Explicit single column — minmax(300px, …) would overflow a 320px phone. */
  .deal-digest { grid-template-columns: 1fr; gap: 14px; }
  .digest-art { height: 156px; }
  .digest-art img { max-height: 128px; }
  /* Swap the always-visible blurb for a tap-to-reveal info button — no room
     for title + a sentence once tiles/cells give up their width to touch. */
  .lane-blurb { display: none; }
  .lane-info-btn { display: inline-flex; }
}