/* ═══════════════════════════════════════════════════════════════════════════
   card-prices-theme.css — "Galaxy Sunrise" theme for Card Prices
   Dark space background with white content panels + neon rainbow accents.
   Loaded AFTER comp-styles.css — only overrides CSS variables.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand duotone — the split circle (NEW) ──────────────────────────── */
  --cp-violet-deep:   #5E2596;   /* deep left-half violet */
  --cp-violet:        #8A3FC7;   /* primary violet */
  --cp-violet-bright: #A45FE0;   /* hover / glow violet */
  --cp-coral-deep:    #C8543C;   /* deep right-half terracotta */
  --cp-coral:         #E27A5E;   /* primary coral (wordmark) */
  --cp-coral-bright:  #F2997A;   /* hover / glow coral */

  /* ── Field — the black void + halo (NEW) ─────────────────────────────── */
  --cp-void:          #2A1248;   /* lifted purple field (no black) */
  --cp-void-2:        #1C0C36;   /* deeper purple (gradient base) */
  --cp-halo:          rgba(248,244,255,0.26);  /* white bloom behind content */

  /* ── Ink on light panels (NEW) ───────────────────────────────────────── */
  --cp-ink:           #1E1430;   /* headings on white */
  --cp-ink-2:         #4A3B63;   /* body on white */
  --cp-ink-mute:      #7A6E90;   /* muted on white */

  /* ── Ink on dark field (NEW) ─────────────────────────────────────────── */
  --cp-light:         #F4EFFA;   /* near-white */
  --cp-light-mute:    #C6B9D9;   /* lavender-gray */

  /* ── Panel backgrounds → WHITE ──────────────────────────────────────── */
  --comp-panel-bg-95: rgba(255, 255, 255, 0.92);
  --comp-panel-bg-85: rgba(255, 255, 255, 0.88);
  --comp-panel-bg-80: rgba(255, 255, 255, 0.86);
  --comp-panel-bg-75: rgba(255, 255, 255, 0.84);
  --comp-panel-bg-70: rgba(255, 255, 255, 0.80);
  --comp-panel-bg-60: rgba(255, 255, 255, 0.76);
  --comp-panel-bg-50: rgba(255, 255, 255, 0.72);
  --comp-panel-deep: rgba(255, 255, 255, 0.85);
  --comp-panel-deep-99: rgba(255, 255, 255, 0.85);
  --comp-panel-deep-95: rgba(255, 255, 255, 0.82);
  --comp-panel-deep-90: rgba(255, 255, 255, 0.78);
  --comp-panel-deep-70: rgba(255, 255, 255, 0.72);
  --comp-panel-deep-alt-60: rgba(248, 250, 252, 0.92);
  --comp-panel-mid-98: rgba(255, 255, 255, 0.98);
  --comp-panel-light-90: rgba(255, 255, 255, 0.95);
  --comp-panel-light-80: rgba(255, 255, 255, 0.93);
  --comp-panel-lighter: rgba(255, 255, 255, 0.85);
  --comp-panel-darkest: rgba(248, 250, 252, 0.70);
  --comp-backdrop: rgba(0, 0, 0, 0.5);
  --comp-popup-bg-98: rgba(255, 255, 255, 0.98);
  --comp-popup-bg-95: rgba(255, 255, 255, 0.97);

  /* ── Body background → remapped to void (UPDATED) ────────────────────── */
  --abyss: var(--cp-void-2);
  --deep-navy: var(--cp-void);
  --navy: var(--cp-void);

  /* ── Card backgrounds → light ───────────────────────────────────────── */
  --card-bg: rgba(0, 0, 0, 0.03);
  --card-bg-2: rgba(0, 0, 0, 0.02);

  /* ── Black overlays → softer for light panels ───────────────────────── */
  --comp-black-70: rgba(0, 0, 0, 0.08);
  --comp-black-65: rgba(0, 0, 0, 0.07);
  --comp-black-60: rgba(0, 0, 0, 0.06);
  --comp-black-50: rgba(0, 0, 0, 0.05);
  --comp-black-45: rgba(0, 0, 0, 0.04);
  --comp-black-40: rgba(0, 0, 0, 0.04);
  --comp-black-38: rgba(0, 0, 0, 0.03);
  --comp-black-35: rgba(0, 0, 0, 0.03);
  --comp-black-32: rgba(0, 0, 0, 0.03);
  --comp-black-30: rgba(0, 0, 0, 0.025);
  --comp-black-28: rgba(0, 0, 0, 0.02);
  --comp-black-25: rgba(0, 0, 0, 0.02);

  /* ── Text → DARK on white panels ────────────────────────────────────── */
  --comp-text: #1e293b;
  --text-light: #0f172a;
  --text-muted: #64748b;
  --text-dim: #78909c;

  /* ── Borders → gray instead of white ────────────────────────────────── */
  --comp-border-bright: rgba(0, 0, 0, 0.12);
  --comp-border-med: rgba(0, 0, 0, 0.08);
  --comp-border: rgba(0, 0, 0, 0.06);
  --comp-border-soft: rgba(0, 0, 0, 0.04);
  --border-soft: rgba(0, 0, 0, 0.06);
  --border-mid: rgba(0, 0, 0, 0.10);
  --comp-white-85: rgba(0, 0, 0, 0.75);
  --comp-white-70: rgba(0, 0, 0, 0.60);
  --comp-white-60: rgba(0, 0, 0, 0.50);
  --comp-label-border: rgba(0, 0, 0, 0.12);

  /* ── Accent cyan → violet (REMAPPED) ────────────────────────────────── */
  /* Old neon-cyan (var(--cp-violet)) → violet family (#8A3FC7) */
  --comp-accent-55: rgba(138, 63, 199, 0.7);
  --comp-accent-50: rgba(138, 63, 199, 0.6);
  --comp-accent-45: rgba(138, 63, 199, 0.55);
  --comp-accent-40: rgba(138, 63, 199, 0.5);
  --comp-accent-35: rgba(138, 63, 199, 0.45);
  --comp-accent-30: rgba(138, 63, 199, 0.4);
  --comp-accent-28: rgba(138, 63, 199, 0.35);
  --comp-accent-25: rgba(138, 63, 199, 0.3);
  --comp-accent-22: rgba(138, 63, 199, 0.28);
  --comp-accent-20: rgba(138, 63, 199, 0.25);
  --comp-accent-18: rgba(138, 63, 199, 0.22);
  --comp-accent-15: rgba(138, 63, 199, 0.18);
  --comp-accent-14: rgba(138, 63, 199, 0.16);
  --comp-accent-12: rgba(138, 63, 199, 0.14);
  --comp-accent-10: rgba(138, 63, 199, 0.12);
  --comp-accent-08: rgba(138, 63, 199, 0.08);
  --comp-accent-06: rgba(138, 63, 199, 0.06);
  --comp-accent-05: rgba(138, 63, 199, 0.05);
  --comp-accent-04: rgba(138, 63, 199, 0.04);
  --comp-accent-025: rgba(138, 63, 199, 0.025);
  --comp-accent-02: rgba(138, 63, 199, 0.02);
  --comp-accent-015: rgba(138, 63, 199, 0.015);
  --comp-accent-00: rgba(138, 63, 199, 0);
  --neon-cyan: #8A3FC7;
  --neon-cyan-soft: rgba(138, 85, 199, 0.5);

  /* ── Warm/Orange → coral (REMAPPED) ────────────────────────────────── */
  /* Old neon-orange (var(--cp-coral)) → coral family (#E27A5E) */
  --comp-warm-50: rgba(226, 122, 94, 0.5);
  --comp-warm-40: rgba(226, 122, 94, 0.4);
  --comp-warm-30: rgba(226, 122, 94, 0.3);
  --comp-warm-25: rgba(226, 122, 94, 0.25);
  --comp-warm-15: rgba(226, 122, 94, 0.15);
  --comp-warm-10: rgba(226, 122, 94, 0.1);
  --comp-warm-08: rgba(226, 122, 94, 0.08);
  --comp-warm-07: rgba(226, 122, 94, 0.07);
  --comp-warm-06: rgba(226, 122, 94, 0.06);
  --neon-orange: #E27A5E;

  --comp-gold-35: rgba(176, 138, 88, 0.35);
  --comp-gold-30: rgba(176, 138, 88, 0.3);
  --comp-gold-25: rgba(176, 138, 88, 0.25);
  --comp-gold-16: rgba(176, 138, 88, 0.16);
  --comp-gold-15: rgba(176, 138, 88, 0.15);
  --comp-gold-14: rgba(176, 138, 88, 0.14);
  --comp-gold-12: rgba(176, 138, 88, 0.12);
  --comp-gold-10: rgba(176, 138, 88, 0.1);
  --comp-gold-08: rgba(176, 138, 88, 0.08);
  --comp-gold-06: rgba(176, 138, 88, 0.06);
  --neon-yellow: #B08A58;

  /* ── Pink → coral (REMAPPED) ────────────────────────────────────────── */
  /* Old neon-pink (#dc3296) → coral family (#E27A5E) */
  --comp-pink-40: rgba(226, 122, 94, 0.4);
  --comp-pink-30: rgba(226, 122, 94, 0.3);
  --comp-pink-25: rgba(226, 122, 94, 0.25);
  --comp-pink-24: rgba(226, 122, 94, 0.24);
  --comp-pink-12: rgba(226, 122, 94, 0.12);
  --comp-pink-06: rgba(226, 122, 94, 0.06);
  --comp-pink-05: rgba(226, 122, 94, 0.05);
  --neon-pink: #E27A5E;

  /* ── Gain/Loss → warmed (UPDATED) ──────────────────────────────────── */
  --gain: #1F9D57;
  --loss: #D23B3B;
  --comp-gain-50: rgba(22, 163, 74, 0.5);
  --comp-gain-40: rgba(22, 163, 74, 0.4);
  --comp-gain-12: rgba(22, 163, 74, 0.12);

  /* ── Nebula background colors → purple/violet ────────────────────────── */
  --comp-violet-30: rgba(145, 75, 215, 0.30);
  --comp-pink-24: rgba(150, 85, 205, 0.20);
  --comp-atmos-blue: rgba(120, 40, 200, 0.18);
  --comp-gold-16: rgba(180, 50, 220, 0.14);
  --comp-holo-blue-30: rgba(0, 100, 255, 0.3);
  --comp-holo-green-30: rgba(0, 245, 204, 0.3);

  /* ── Issue 6: border-subtle override ──────────────────────────────────── */
  --comp-border-subtle: rgba(0, 0, 0, 0.04);

  /* ── Issue 7: white-* overrides (inverted for light theme) ────────────── */
  --comp-white-05: rgba(0, 0, 0, 0.05);
  --comp-white-03: rgba(0, 0, 0, 0.03);
  --comp-white-025: rgba(0, 0, 0, 0.025);
  --comp-white-015: rgba(0, 0, 0, 0.015);

  /* ── Issue 8: red token overrides ─────────────────────────────────────── */
  --comp-red-12: rgba(220, 38, 38, 0.12);
  --comp-red-08: rgba(220, 38, 38, 0.08);

  /* ── Issue 10: WCAG warn color ────────────────────────────────────────── */
  --warn: #b87400;

}

/* ── Sticky footer ───────────────────────────────────────────────────── */
body { display: flex !important; flex-direction: column !important; min-height: 100vh !important; }
main { flex: 1 !important; }

/* ── Stat pill: inline with tabs ──────────────────────────────────────── */
.panel { position: relative !important; }
.tape {
  position: absolute !important;
  top: 24px !important;
  right: 26px !important;
  left: auto !important;
  width: auto !important;
  z-index: 10 !important;
  margin: 0 !important;
  padding: 4px 14px !important;
  gap: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  border-radius: 999px !important;
  background: rgba(226, 122, 94, 0.18) !important;
  border: 1px solid rgba(226, 122, 94, 0.35) !important;
  box-shadow: 0 2px 8px rgba(25, 5, 35, 0.15) !important;
  pointer-events: none !important;
  cursor: default !important;
}
.tape * { pointer-events: none !important; cursor: default !important; }
.tape.tape-hidden { display: none !important; }
.tape::before { display: none !important; }
.tape-cell {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 4px !important;
  padding: 2px 8px !important;
  border-right: 1px solid rgba(138, 63, 199, 0.08) !important;
}
.tape-cell {
  border-right: 1px solid rgba(226, 122, 94, 0.15) !important;
}
.tape-cell:last-child { border-right: none !important; }
.tape-label {
  font-family: var(--f-head) !important;
  font-size: clamp(0.4rem, 0.5vw, 0.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}
.tape-value {
  font-family: 'Belwe Bold', 'Cinzel', serif !important;
  font-size: clamp(0.55rem, 0.65vw, 0.68rem) !important;
  font-weight: 700 !important;
  color: var(--cp-coral) !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}
.tape-sub { display: none !important; }

/* ── Mode tabs — file folder style, sitting above panel ──────────────── */
.modes {
  display: flex !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 0 0 8px !important;
  position: relative !important;
  z-index: 201 !important;
  align-items: flex-end !important;
  height: clamp(38px, 4vw, 52px) !important;
  pointer-events: auto !important;
}
/* Tabs: clean, no fake edges or stagger */
.mode-btn {
  pointer-events: auto !important;
  border: 1px solid rgba(138, 63, 199, 0.2) !important;
  border-bottom: none !important;
  border-image: none !important;
  border-radius: 10px 10px 0 0 !important;
  background: linear-gradient(180deg, rgba(40, 6, 50, 0.6), rgba(32, 17, 54, 0.4)) !important;
  color: rgba(212, 200, 230, 0.5) !important;
  -webkit-text-fill-color: rgba(212, 200, 230, 0.5) !important;
  text-shadow: none !important;
  padding: clamp(4px, 0.5vw, 6px) clamp(12px, 1.5vw, 22px) !important;
  position: relative !important;
  z-index: 1 !important;
  transition: all 0.2s ease !important;
  font-size: clamp(0.5rem, 0.9vw, 0.76rem) !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
.mode-btn::before, .mode-btn::after { display: none !important; }
.mode-btn:hover {
  color: rgba(244, 239, 250, 0.75) !important;
  -webkit-text-fill-color: rgba(244, 239, 250, 0.75) !important;
  background: linear-gradient(180deg, rgba(50, 26, 84, 0.75), rgba(40, 20, 68, 0.6)) !important;
  border-color: rgba(138, 63, 199, 0.3) !important;
}
.mode-btn.active {
  border: 1px solid transparent !important;
  border-bottom: none !important;
  background:
    linear-gradient(180deg, rgba(58, 28, 96, 1) 0%, rgba(40, 20, 68, 1) 60%, rgba(24, 13, 42, 1) 100%) padding-box,
    var(--holo) border-box !important;
  background-size: 100% 100%, 200% 100% !important;
  animation: holo-shimmer 6s linear infinite !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow:
    0 0 3px var(--cp-violet),
    0 0 6px rgba(226, 122, 94, 0.5),
    0 0 1px #fff !important;
  z-index: 3 !important;
  padding: clamp(6px, 0.8vw, 10px) clamp(16px, 2vw, 28px) !important;
}

/* Panel connects to active tab — no top border */
#panel-search {
  border-top: none !important;
  border-top-left-radius: 0 !important;
  position: relative !important;
  z-index: 4 !important;
}

/* ── Hide meta status bar (index status shows in stat pill instead) ──── */
#panel-search > #view-search > .meta { display: none !important; }


/* ── Black field + white centered halo + violet/coral corner glows ───── */
body::before {
  background:
    /* Base: near-black field */
    linear-gradient(to top, var(--cp-void-2), var(--cp-void)),
    /* Centered white halo bloom */
    radial-gradient(ellipse 80% 60% at 50% 38%, var(--cp-halo), transparent 60%),
    /* Upper-left violet glow */
    radial-gradient(ellipse 50% 40% at 20% 25%, rgba(138, 63, 199, 0.20), transparent 65%),
    /* Lower-right coral glow */
    radial-gradient(ellipse 45% 45% at 80% 75%, rgba(226, 122, 94, 0.16), transparent 60%) !important;
  background-size: 100% 100% !important;
}

/* ── Hide decorative dark-theme elements ──────────────────────────────── */
.shooting-star, .pokeballs, .side-art { display: none !important; }
/* Keep .stars visible — they show through the glass panels */

/* ═══ Card-Prices ambient background — "Aurora Tech": soft aurora glows, faint tech grid,
      one confident rising market line, foil sparkles, film grain + vignette (Apple/NVIDIA feel) ═══ */
.cp-bg { position: fixed !important; inset: 0 !important; z-index: -1 !important; pointer-events: none !important; overflow: hidden !important; }
.cp-bg::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(170, 140, 225, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(170, 140, 225, 0.045) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
  -webkit-mask: radial-gradient(ellipse 100% 90% at 50% 38%, #000 35%, transparent 86%);
          mask: radial-gradient(ellipse 100% 90% at 50% 38%, #000 35%, transparent 86%);
}
/* Aurora glow orbs */
.cp-aurora { position: absolute; inset: 0; overflow: hidden; filter: blur(64px) saturate(122%); }
.cp-orb { position: absolute; border-radius: 50%; mix-blend-mode: screen; opacity: .5; will-change: transform; }
.o1 { width: 50vw; height: 50vw; left: -8vw; top: -14vw; background: radial-gradient(circle, #7A33B8, transparent 66%); animation: cp-auroradrift 30s ease-in-out infinite alternate; }
.o2 { width: 44vw; height: 44vw; right: -10vw; top: -4vw; background: radial-gradient(circle, #E27A5E, transparent 66%); animation: cp-auroradrift 38s ease-in-out infinite alternate-reverse; }
.o3 { width: 42vw; height: 42vw; left: 22vw; bottom: -18vw; background: radial-gradient(circle, #C98A5A, transparent 66%); animation: cp-auroradrift 34s ease-in-out infinite alternate; }
.o4 { width: 34vw; height: 34vw; right: 16vw; bottom: -8vw; background: radial-gradient(circle, #A45FE0, transparent 68%); animation: cp-auroradrift 44s ease-in-out infinite alternate-reverse; }
@keyframes cp-auroradrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(4vw, 3vw) scale(1.18); } }
/* SVG decor: rising trend line, nodes, foil sparkles */
.cp-bg-svg2 { position: absolute; inset: 0; width: 100%; height: 100%; }
.cp-trend { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: cp-trenddraw 5.5s cubic-bezier(.5, 0, .2, 1) .3s forwards; }
@keyframes cp-trenddraw { to { stroke-dashoffset: 0; } }
.cp-spk2 { opacity: .4; animation: cp-twk2 4.5s ease-in-out infinite alternate; }
@keyframes cp-twk2 { from { opacity: .18; } to { opacity: .9; } }
/* Film grain + vignette */
.cp-grain { position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'220'%20height%3D'220'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.85'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E"); background-size: 220px 220px; }
.cp-vig { position: absolute; inset: 0; background: radial-gradient(ellipse 78% 70% at 50% 42%, transparent 55%, rgba(8, 4, 16, 0.55) 100%); }
@media (prefers-reduced-motion: reduce) {
  .cp-orb, .cp-trend, .cp-spk2 { animation: none !important; }
  .cp-trend { stroke-dashoffset: 0; }
}

/* ── White panel text needs dark scrollbars ────────────────────────────── */
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.02); }

/* ── Liquid glass panels (iOS-style) ──────────────────────────────────── */
.panel {
  backdrop-filter: blur(22px) saturate(150%) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) brightness(1.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-top-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.05),
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.18),
    0 24px 60px rgba(0, 0, 0, 0.25),
    0 0 60px rgba(138, 63, 199, 0.10),
    0 0 90px rgba(226, 122, 94, 0.06) !important;
  border-radius: 16px !important;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease !important;
}
/* Holo rainbow border ring — masked so it follows the 16px radius (border-image can't) */
.panel::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 16px !important;
  padding: 1.5px !important;
  background: var(--holo) !important;
  background-size: 300% 100% !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  animation: holo-shimmer 8s linear infinite !important;
  pointer-events: none !important;
  opacity: 0.85 !important;
  z-index: 2 !important;
}
.panel:hover {
  transform: none !important;
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 0 rgba(255,255,255,0.05),
    0 4px 8px rgba(0,0,0,0.1),
    0 12px 32px rgba(0,0,0,0.2),
    0 32px 80px rgba(0,0,0,0.28),
    0 0 60px rgba(138, 63, 199, 0.12),
    0 0 90px rgba(226, 122, 94, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Filter labels: dark fill + rainbow gradient STROKE
   Matches .panel-title technique from comp-styles.css
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   ALL label/eyebrow text: dark fill + rainbow holo stroke
   Bigger font, tighter letter-spacing so the dark fill is visible
   ═══════════════════════════════════════════════════════════════════════════ */

/* Shared style for all label elements */
.filter-label,
.hint-eyebrow,
.panel-eyebrow,
.x-section-title,
.sl-series-hdr {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  background: none !important;
  text-shadow: none !important;
  position: relative !important;
  font-size: clamp(0.65rem, 1vw, 0.85rem) !important;
  letter-spacing: 0.12em !important;
  font-weight: 700 !important;
}

/* Rainbow stroke behind all of them */
.filter-label::before,
.hint-eyebrow::before,
.panel-eyebrow::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--holo);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.8px;
  animation: holo-shimmer 3s linear infinite;
  pointer-events: none;
  letter-spacing: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  text-transform: inherit;
}

/* ── WCAG contrast: darken price market text ─────────────────────────── */
.price-mkt {
  color: #7c6200 !important;
  text-shadow: 0 0 8px rgba(176, 138, 88, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK BLUE sub-elements inside white glass panels
   Main panels = white frosted glass. Inner elements = dark blue glass.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Search bar — violet glass, no double border */
.search-wrap {
  border-radius: 999px !important;
  background: rgba(58, 28, 96, 0.42) !important;
  border: none !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  box-shadow: 0 2px 12px rgba(72, 12, 85, 0.3), 0 0 30px rgba(138, 63, 199, 0.10) !important;
}
/* Modern light-purple search field — flat lavender, hairline border, soft single shadow */
#search {
  background: #ECE4F7 !important;
  border: 1px solid rgba(120, 80, 175, 0.22) !important;
  border-radius: 14px !important;
  color: #3A1C60 !important;
  box-shadow: 0 2px 10px rgba(36, 12, 64, 0.16) !important;
}
#search::placeholder {
  color: rgba(96, 56, 148, 0.58) !important;
}
#search:focus {
  border-color: var(--cp-violet) !important;
  background: #F4EEFB !important;
  box-shadow: 0 0 0 3px rgba(138, 63, 199, 0.18), 0 4px 16px rgba(36, 12, 64, 0.20) !important;
}
.search-prompt { color: rgba(86, 46, 140, 0.85) !important; text-shadow: none !important; }
.search-cursor { display: none !important; }

/* Hint area — remove dark purple from results-wrap when showing hints */
.results-wrap:has(.hint) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Hint cards — match stat pill: coral tint on white panel */
.hint-card {
  background: rgba(226, 122, 94, 0.12) !important;
  border: 1px solid rgba(226, 122, 94, 0.28) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  color: #1e293b !important;
}
.hint-card * { color: #1e293b !important; }
.hint-card .hint-eyebrow { color: #1e293b !important; -webkit-text-fill-color: #1e293b !important; }
.hint-card code { color: var(--cp-coral) !important; background: rgba(226, 122, 94, 0.10) !important; border: 1px solid rgba(226, 122, 94, 0.25) !important; border-radius: 4px !important; padding: 1px 5px !important; font-family: 'Belwe Bold', 'Cinzel', serif !important; }

/* Filter selects / dropdowns — styled closed state */
.filter-select,
select {
  background-color: rgba(58, 28, 96, 0.85) !important;
  border: 1px solid rgba(138, 63, 199, 0.2) !important;
  color: #fff !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: clamp(0.5rem, 0.7vw, 0.62rem) !important;
  letter-spacing: 0.08em !important;
  text-shadow:
    0 0 3px var(--cp-violet),
    0 0 6px rgba(226, 122, 94, 0.5),
    0 0 1px #fff !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: clamp(60px, 12vw, 180px) !important;
}
select.gs-game { max-width: clamp(120px, 30vw, 220px) !important; }
select.gs-lang { max-width: clamp(80px, 20vw, 140px) !important; }
.filter-select:focus,
select:focus {
  border-color: rgba(138, 63, 199, 0.35) !important;
  box-shadow: 0 0 16px rgba(138, 63, 199, 0.1) !important;
}
select option {
  background: #1f0830 !important;
  color: #e4e0f0 !important;
  font-family: 'Exo 2', sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.78rem !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
}

/* ── Custom dropdowns (replace native <select>) ─────────────────────── */
.cp-dropdown {
  position: relative;
  display: inline-block;
  min-width: 0;
}
.cp-dropdown-trigger {
  background: rgba(58, 28, 96, 0.85);
  border: 1px solid rgba(138, 63, 199, 0.2);
  color: #fff;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(0.5rem, 0.7vw, 0.62rem);
  letter-spacing: 0.08em;
  text-shadow: 0 0 3px var(--cp-violet), 0 0 6px rgba(226, 122, 94, 0.5), 0 0 1px #fff;
  border-radius: 8px;
  padding: 5px 22px 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: clamp(60px, 12vw, 180px);
  position: relative;
  user-select: none;
  transition: border-color 0.2s;
}
.cp-dropdown-trigger::after {
  content: '▾';
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.6em;
  opacity: 0.6;
  text-shadow: none;
}
.cp-dropdown-trigger:hover,
.cp-dropdown.open .cp-dropdown-trigger {
  border-color: rgba(138, 63, 199, 0.4);
}
.cp-dropdown-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 260px;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(58, 28, 96, 0.97), rgba(40, 20, 68, 0.97));
  border: 1px solid rgba(138, 63, 199, 0.25);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 20px rgba(138, 63, 199, 0.1);
  z-index: 300;
  padding: 4px 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.cp-dropdown.open .cp-dropdown-list {
  display: block;
}
.cp-dropdown-item {
  padding: 6px 12px;
  font-family: 'Exo 2', sans-serif;
  font-size: clamp(0.6rem, 0.8vw, 0.75rem);
  color: rgba(228, 224, 240, 0.7);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.cp-dropdown-item:hover {
  background: rgba(138, 63, 199, 0.15);
  color: #fff;
}
.cp-dropdown-item.selected {
  color: var(--cp-coral);
  background: rgba(226, 122, 94, 0.1);
}
.cp-dropdown-list::-webkit-scrollbar { width: 4px; }
.cp-dropdown-list::-webkit-scrollbar-thumb { background: rgba(138, 63, 199, 0.3); border-radius: 2px; }
.cp-dropdown-list::-webkit-scrollbar-track { background: transparent; }

/* Hide native selects that have been replaced */
select.cp-replaced {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Set labels — search input matches main search bar */
.sl-search {
  background: rgba(58, 28, 96, 0.85) !important;
  border: 1px solid rgba(138, 63, 199, 0.2) !important;
  border-radius: 999px !important;
  color: #e4e0f0 !important;
  padding: 10px 16px !important;
}
.sl-search::placeholder {
  color: rgba(200, 150, 240, 0.5) !important;
}
.sl-search:focus {
  border-color: rgba(138, 63, 199, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(138, 63, 199, 0.08), 0 0 24px rgba(138, 63, 199, 0.12) !important;
  outline: none !important;
}

/* Set label icons — no invert, no glow (light panel) */
.sl-icon {
  filter: none !important;
}

/* Gate — text and button styling */
.gate p {
  color: #1e293b !important;
  font-family: 'Belwe Bold', 'Cinzel', serif !important;
}
.btn-ghost {
  background: linear-gradient(180deg, rgba(58, 28, 96, 1) 0%, rgba(40, 20, 68, 1) 60%, rgba(24, 13, 42, 1) 100%) !important;
  border: 0.5px solid !important;
  border-image: linear-gradient(90deg, var(--cp-violet), var(--cp-coral)) 1 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow:
    0 0 3px var(--cp-violet),
    0 0 6px rgba(226, 122, 94, 0.5),
    0 0 1px #fff !important;
}

/* Gate heading — black fill + rainbow holo stroke */
.gate h3 {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  position: relative !important;
  display: inline-block !important;
  background: none !important;
  animation: none !important;
}
.gate h3::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--holo);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.8px transparent;
  animation: holo-shimmer 3s linear infinite;
  pointer-events: none;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
}

/* Search title — uses filter-label technique (works), scaled up */
.search-title {
  font-size: clamp(1rem, 1.8vw, 1.35rem) !important;
  letter-spacing: 0.14em !important;
  display: inline-block !important;
}
.search-title-wrap::after {
  display: none;
}
/* Hide any remaining panel-title holo overlay */
.panel-title::before {
  content: none !important;
}

/* Toggle switch — minimal, clean */
.toggle {
  background: none !important;
  border: none !important;
  padding: 4px 0 !important;
  gap: 8px !important;
}
.toggle:hover {
  background: none !important;
}
.toggle.on {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.toggle input {
  width: 32px !important;
  height: 16px !important;
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 999px !important;
}
.toggle input::after {
  width: 12px !important;
  height: 12px !important;
  top: 2px !important;
  background: rgba(0, 0, 0, 0.2) !important;
}
.toggle.on input {
  background: linear-gradient(90deg, var(--cp-coral), var(--cp-violet)) !important;
}
.toggle.on input::after {
  background: #fff !important;
  left: 18px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}
.toggle-text {
  color: #1e293b !important;
  font-size: 0.62rem !important;
}
.toggle.on .toggle-text {
  color: #1e293b !important;
}

/* Filter pills — dark purple glass with purple border */
.filter-pill,
.filter-toggle {
  background: rgba(58, 28, 96, 0.7) !important;
  border: 1px solid rgba(138, 63, 199, 0.2) !important;
  color: #e4e0f0 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.filter-pill:hover,
.filter-toggle:hover {
  border-color: rgba(138, 63, 199, 0.35) !important;
  background: rgba(58, 28, 96, 0.85) !important;
}
.filter-pill.active,
.filter-pill.on,
.filter-toggle.on {
  border-color: rgba(138, 63, 199, 0.4) !important;
  background: rgba(58, 28, 96, 0.9) !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(138, 63, 199, 0.12) !important;
}

/* State / error / index offline — dark purple glass like search bar */
.state {
  color: rgba(220, 200, 245, 0.6) !important;
  background: rgba(58, 28, 96, 0.85) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  border: 1px solid rgba(138, 63, 199, 0.15) !important;
  border-radius: 12px !important;
  padding: 50px 20px !important;
}
.state .glyph {
  color: var(--cp-coral) !important;
  opacity: 0.8 !important;
}
.state em {
  color: #d8b4fe !important;
}

/* Variant tabs — purple glass */
.v-tab {
  background: rgba(58, 28, 96, 0.4) !important;
  border-color: rgba(138, 63, 199, 0.1) !important;
  color: rgba(200, 190, 230, 0.6) !important;
}
.v-tab:hover {
  color: #e4e0f0 !important;
  border-color: rgba(138, 63, 199, 0.3) !important;
}
.v-tab.on {
  background: rgba(72, 12, 85, 0.6) !important;
  border-color: rgba(138, 63, 199, 0.35) !important;
  color: #d8b4fe !important;
}
.v-mkt { color: rgba(200, 190, 230, 0.5) !important; }

/* Condition tabs — purple glass */
.cond-tab {
  background: rgba(58, 28, 96, 0.4) !important;
  border-color: rgba(138, 63, 199, 0.1) !important;
  color: rgba(200, 190, 230, 0.5) !important;
}
.cond-tab:hover { color: #e4e0f0 !important; }
.cond-tab.on {
  background: rgba(72, 12, 85, 0.6) !important;
  border-color: rgba(138, 63, 199, 0.3) !important;
  color: #d8b4fe !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sub-panels — purple glass with orange pills
   ═══════════════════════════════════════════════════════════════════════════ */

/* Results table wrapper, sales panels, variant cycler — purple glass */
.results-wrap,
.x-sales,
.variant-cycler {
  background: rgba(58, 28, 96, 0.60) !important;
  border: 1px solid rgba(138, 63, 199, 0.12) !important;
  backdrop-filter: blur(28px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(150%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(25, 5, 35, 0.2) !important;
}

/* Table headers inside purple glass */
.results-wrap .result-table thead { background: rgba(60, 8, 72, 0.5) !important; }
.results-wrap .result-table th {
  color: rgba(200, 190, 230, 0.7) !important;
  background: rgba(60, 8, 72, 0.6) !important;
  border-bottom-color: rgba(138, 63, 199, 0.1) !important;
}
.results-wrap .result-table td {
  color: #e4e0f0 !important;
  border-bottom-color: rgba(138, 63, 199, 0.06) !important;
}
.results-wrap .result-table tr:hover td {
  background: rgba(138, 63, 199, 0.06) !important;
}

/* Sales panel headers */
.x-sales-head {
  background: rgba(60, 8, 72, 0.4) !important;
  border-bottom-color: rgba(138, 63, 199, 0.1) !important;
}
.x-sales-source { color: #c8d6e8 !important; }

/* Condition / foiling pills — dark purple, orange when active */
.cond-pill {
  background: rgba(58, 28, 96, 0.6) !important;
  border: 1px solid rgba(138, 63, 199, 0.2) !important;
  color: rgba(230, 220, 245, 0.7) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}
.cond-pill:hover {
  background: rgba(58, 28, 96, 0.8) !important;
  border-color: rgba(138, 63, 199, 0.35) !important;
  color: #fff !important;
}
.cond-pill.on {
  background: rgba(226, 122, 94, 0.85) !important;
  border-color: rgba(226, 122, 94, 0.9) !important;
  color: #fff !important;
  box-shadow: 0 0 8px rgba(226, 122, 94, 0.3) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   DARK BLUE GLOW — replaces cyan glow on panels
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Footer holo gradient line ───────────────────────────────────────── */
.comp-footer {
  position: relative !important;
  border-top: none !important;
  margin-top: 32px !important;
  padding-top: 32px !important;
}
.comp-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--cp-violet), var(--cp-coral));
  background-size: 200% 100%;
  animation: holo-shimmer 8s linear infinite;
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CP Nav — holo glass navbar
   ═══════════════════════════════════════════════════════════════════════════ */
.cp-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: linear-gradient(180deg, rgba(68, 12, 78, 0.96), rgba(58, 8, 68, 0.93)) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  border-bottom: 2px solid transparent !important;
  border-image: var(--holo) 1 !important;
  box-shadow: 0 4px 24px rgba(35, 8, 45, 0.5), 0 0 60px rgba(138, 63, 199, 0.06) !important;
}
.cp-nav::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cp-violet), var(--cp-coral));
  background-size: 200% 100%;
  animation: holo-shimmer 6s linear infinite;
  opacity: 0.8;
}
/* Auth links inherit .cp-nav-links a styling automatically */
.cp-mobile-auth {
  display: block !important;
  padding: 14px 20px !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--cp-coral) !important;
  text-decoration: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.cp-nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.cp-nav-logo:hover {
  filter: brightness(1.2);
  transform: translateY(-1px);
}
.cp-nav-logo img {
  height: clamp(36px, 4vw, 48px);
  width: auto;
  filter: drop-shadow(0 0 6px rgba(138, 63, 199, 0.4));
  transition: filter 0.3s ease;
}
.cp-nav-logo:hover img {
  filter: drop-shadow(0 0 12px rgba(138, 63, 199, 0.7));
}
.cp-nav-logo span {
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #e4e0f0;
  text-shadow: 0 0 8px rgba(138, 63, 199, 0.2);
}
/* THE ROW MUST NEVER NEED TO SHRINK — and until 2026-09-11 it always did.

   Two individually reasonable rules below combine into a visible defect: the links are
   `white-space: nowrap` (a label must not break mid-word) and `flex-shrink: 1` (let the row
   squeeze when it must). Flex honours a squeeze by shrinking the BOX; nowrap text cannot
   shrink with it, so the text simply draws outside its box and over the neighbour's. Flex also
   shrinks proportionally, so the LONGEST labels lose the most. Measured in Chrome at 1200px:

       GitHub Sponsors   needed 100px   box 62px
       Create Account    needed 102px   box 71px
       Join Our Team     needed  84px   box 54px

   13 of 14 links were in that state at EVERY width from 820 to 1600 — every laptop, every
   page, since the nav was built. The row was ~250px short at 1440, not the ~15px an early
   measurement suggested (`scrollWidth` on a `justify-content:center` container reports only
   the overflow on ONE side, so it reads half the deficit; do not trust it for this).

   Three changes, each measured, each carrying a different part of the range:
     - the eight badge dividers hide below 1900px (card-prices-nav.js) — the big one, worth
       ~270px plus their gaps, and the only reason 1024-1899 fits;
     - the padding and gap below scale with the viewport, worth the last 3-13px that still
       spilled between 1001 and 1280 after the badges were out (verified by putting the old
       fixed values back: 1280 went to +3px, 1001 to +13px);
     - below 1000px nothing fits, so the hamburger takes over there instead of at 768.
   Nothing changes at >=1900px, where the row genuinely fit all along.
   Re-derived in tests/test_nav_fits_its_row.py — change the font clamp and it fails. */
.cp-nav-links {
  display: flex;
  align-items: center;
  /* 20px at >=1666px, unchanged where the row fit. There are 21 gaps between the 22 children,
     so a gap is worth 21x whatever it costs — and at the old 1.5vw it stayed pinned at its
     20px maximum until 1333px, i.e. it did not scale at the widths that were overflowing. */
  gap: clamp(8px, 1.2vw, 20px);
  flex: 1;
  min-width: 0;
  justify-content: center;
}
.cp-nav-links a {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.45rem, 0.7vw, 0.68rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  text-decoration: none;
  /* 10px at >=1818px — unchanged where the row already fit. The floor is 5px, not smaller:
     below that the padded background stops reading as a button at all. */
  padding: 6px clamp(5px, 0.55vw, 10px);
  position: relative;
  transition: all 0.25s ease;
  background: rgba(58, 28, 96, 0.6);
  border: 1px solid rgba(138, 63, 199, 0.2);
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  text-align: center;
}
.cp-nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 15%;
  right: 15%;
  height: 2px;
  background: transparent;
  background-size: 200% 100%;
  animation: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  border-radius: 1px;
}
.cp-nav-links a:hover {
  color: #fff;
  background: rgba(58, 28, 96, 0.85);
  border-color: rgba(138, 63, 199, 0.35);
}
.cp-nav-links a:hover::after {
  opacity: 0;
}
.cp-nav-links a.active {
  color: #fff;
  background: rgba(58, 28, 96, 0.85);
  border-color: rgba(138, 63, 199, 0.35);
  border-bottom: 2px solid var(--cp-coral);
}
.cp-nav-links a.active::after {
  opacity: 0;
}

/* Divider dots between nav links */
.cp-nav-links a + a::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(138, 63, 199, 0.3);
  box-shadow: 0 0 4px rgba(138, 63, 199, 0.2);
}

.cp-nav-hamburger {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none !important;
  border: none !important;
  border-image: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  transform: none !important;
  filter: none !important;
}
.cp-nav-hamburger:hover {
  opacity: 0.8;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}
.cp-nav-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: linear-gradient(90deg, var(--cp-violet), var(--cp-coral));
  background-size: 200% 100%;
  animation: holo-shimmer 4s linear infinite;
  margin: 3px auto;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.cp-mobile-nav {
  display: none;
  position: fixed;
  top: 56px;
  left: 0; right: 0;
  flex-direction: column;
  padding: 12px 0;
  background: linear-gradient(180deg, rgba(68, 12, 78, 0.98), rgba(58, 8, 68, 0.96)) !important;
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-bottom: 2px solid transparent;
  border-image: var(--holo) 1;
  z-index: 199;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.cp-mobile-nav.open {
  display: flex;
}
.cp-mobile-nav a {
  display: flex;
  align-items: center;
  padding: 12px 28px;
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(200, 190, 230, 0.5);
  text-decoration: none;
  transition: all 0.2s ease;
  border-left: 2px solid transparent;
}
.cp-mobile-nav a:hover {
  color: var(--cp-light);
  background: rgba(138, 63, 199, 0.06);
  border-left-color: var(--cp-violet);
  text-shadow: 0 0 10px rgba(138, 63, 199, 0.4);
}
.cp-mobile-nav a.active {
  color: var(--cp-light);
  border-left-color: var(--cp-violet);
  text-shadow: 0 0 12px rgba(138, 63, 199, 0.5);
}
/* 1000, not 768. Below about 1000px the fourteen links do not fit even with the badge
   dividers hidden — measured 2026-09-11: at 960px the longest label is 3px over its box, at
   900px 9px, at 820px 18px, and nowrap text answers a too-small box by drawing over its
   neighbour. Between 769 and 1000 the old value showed a desktop link row that could not
   hold its own labels; the menu behind the hamburger has held all fourteen the whole time.
   The quick-bar breakpoint in card-prices-nav.js moves with this one BY DESIGN — its comment
   explains why the two must never disagree. */
@media (max-width: 1000px) {
  .cp-nav-hamburger { display: flex; }
  .cp-nav-links { display: none; }
}


/* ── Buttons — main site btn-primary with violet/coral duotone ────────── */
.btn-primary,
.cp-nav-links a,
.cp-footer-links a,
.comp-footer .support-link {
  background: linear-gradient(180deg, rgba(58, 28, 96, 1) 0%, rgba(40, 20, 68, 1) 60%, rgba(24, 13, 42, 1) 100%) !important;
  border: 0.5px solid !important;
  border-image: linear-gradient(90deg, var(--cp-violet), var(--cp-coral)) 1 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow:
    0 0 3px var(--cp-violet),
    0 0 6px rgba(226, 122, 94, 0.5),
    0 0 1px #fff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 0 20px rgba(138, 63, 199, 0.15), 0 0 40px rgba(226, 122, 94, 0.08), inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -2px 4px rgba(0,0,0,0.4) !important;
}
.btn-primary:hover,
.cp-nav-links a:hover,
.cp-footer-links a:hover,
.comp-footer .support-link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.7), 0 0 36px rgba(138, 63, 199, 0.35), 0 0 72px rgba(226, 122, 94, 0.15), inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -2px 4px rgba(0,0,0,0.3) !important;
  filter: brightness(1.2) !important;
}

/* ── Comp footer (inline in HTML) — light text on dark bg ──────────────── */
.comp-footer {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CP Footer (Issues 1-2)
   ═══════════════════════════════════════════════════════════════════════════ */
.cp-footer {
  position: relative;
  z-index: 1;
  background: rgba(26, 8, 38, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 0;
  text-align: center;
}
.cp-footer-rainbow {
  height: 2px;
  background: linear-gradient(90deg, var(--cp-violet), var(--cp-coral), var(--cp-violet)) !important;
  background-size: 200% 100%;
  animation: holo-shimmer 6s linear infinite;
  box-shadow: 0 0 8px rgba(138, 63, 199, 0.25), 0 0 16px rgba(226, 122, 94, 0.15);
}
.cp-footer-logo-link {
  text-decoration: none;
}
.cp-footer-logo-img {
  height: 36px;
  width: auto;
}
.cp-footer-sub { display: none; }
.cp-footer-disclaimer-top { display: none; }
.cp-footer-disclaimer {
  text-align: center;
  padding: 2px 16px 10px;
  font-family: 'Belwe Bold', 'Cinzel', serif;
  font-size: 0.5rem;
  color: rgba(200, 190, 230, 0.2);
  line-height: 1.4;
}
.cp-footer-logo-link {
  display: block;
  text-align: center;
  padding: 0;
  margin: 4px 0 2px;
}
.cp-footer-logo-img {
  height: 28px;
  width: auto;
}
.cp-footer-parent {
  font-family: 'Cinzel', serif;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(200, 190, 230, 0.25);
  text-align: center;
  padding: 0 16px 2px;
}
.cp-footer-parent a {
  color: var(--cp-coral);
  text-decoration: none;
  transition: color 0.2s;
}
.cp-footer-parent a:hover {
  color: #fff;
}
.cp-footer-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 2px 20px 4px;
}
.cp-footer-links a {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: all 0.2s;
  text-shadow: 0 0 6px rgba(138, 63, 199, 0.15);
  border: none !important;
  border-image: none !important;
  background: none !important;
  box-shadow: none !important;
  padding: 4px 8px !important;
}
.cp-footer-links a:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(138, 63, 199, 0.35);
  transform: none !important;
  filter: none !important;
}
.cp-footer-copy {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(200, 190, 230, 0.35);
  text-align: center;
  padding: 4px 16px 0;
}
.cp-footer-divider {
  display: none;
}
.cp-footer-parent {
  font-size: 0.62rem;
  color: rgba(200, 190, 230, 0.4);
}
.cp-footer-parent a {
  color: rgba(200, 190, 230, 0.5);
  text-decoration: none;
}
.cp-footer-parent a:hover {
  color: #d8b4fe;
}
.cp-footer-copy {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.55rem;
  color: rgba(200, 190, 230, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Comp Product View (CPV) — mock-based product tile overrides
   ═══════════════════════════════════════════════════════════════════════════ */
/* Product tile wrapper */
.mock-wrap { background: rgba(58, 28, 96, 0.85) !important; border-color: rgba(138, 63, 199, 0.12) !important; }
.mock-row:hover { background: rgba(138, 63, 199, 0.04) !important; }
.mock-thumb { background: rgba(58, 28, 96, 0.4) !important; border-color: rgba(138, 63, 199, 0.15) !important; }
.mock-name { color: #e4e0f0 !important; }
.mock-set { color: rgba(200, 190, 230, 0.75) !important; }

/* Pills — defined borders, readable on purple */
.mock-pill {
  background: rgba(20, 4, 30, 0.5) !important;
  border: 1px solid rgba(138, 63, 199, 0.3) !important;
  color: #d0c8e4 !important;
  font-size: 0.62rem !important;
  padding: 3px 9px !important;
  border-radius: 4px !important;
}
.mock-pill:hover {
  background: rgba(138, 63, 199, 0.15) !important;
  border-color: rgba(138, 63, 199, 0.5) !important;
  color: #fff !important;
}
.mock-pill.active {
  background: rgba(226, 122, 94, 0.85) !important;
  border-color: rgba(226, 122, 94, 0.9) !important;
  color: #fff !important;
  box-shadow: 0 0 6px rgba(226, 122, 94, 0.25) !important;
}
.mock-pill.lang {
  background: rgba(58, 28, 96, 0.85) !important;
  border: 1px solid rgba(138, 63, 199, 0.15) !important;
  color: #fff !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
}
.mock-pill.lang:hover, .mock-pill.lang.active {
  background: rgba(138, 63, 199, 0.3) !important;
  color: #fff !important;
  border-color: rgba(138, 63, 199, 0.4) !important;
}
.mock-pill.ghost { color: rgba(200, 190, 230, 0.3) !important; }
.mock-pill.linked { border-color: rgba(138, 63, 199, 0.4) !important; }
.pill-sep { background: rgba(138, 63, 199, 0.2) !important; }
.mock-pills { gap: 4px !important; }

/* Condition detail sidebar — lavender bg, page-matching text */
.mock-price-summary { background: rgba(228, 218, 240, 0.9) !important; border: 1px solid rgba(138, 63, 199, 0.25) !important; border-radius: 8px !important; }
.mps-cond { color: #1a0826 !important; }
.mps-label { color: #64587a !important; }
.mps-low { color: var(--cp-coral) !important; }
.mps-mkt { color: #1a0826 !important; }
.mps-variants { color: #64587a !important; }
.mock-cond-detail { background: rgba(228, 218, 240, 0.9) !important; border: 1px solid rgba(138, 63, 199, 0.25) !important; border-radius: 8px !important; }
.mcd-name { color: #1e293b !important; font-family: 'Cinzel', serif !important; font-weight: 700 !important; letter-spacing: 0.06em !important; }
.mcd-low { color: var(--cp-coral) !important; font-family: 'Belwe Bold', 'Cinzel', serif !important; }
.mcd-mkt { color: #1e293b !important; font-family: 'Belwe Bold', 'Cinzel', serif !important; }
.mcd-last { color: rgba(30, 41, 59, 0.45) !important; font-family: 'Exo 2', sans-serif !important; }
.mcd-columns { border-top-color: rgba(138, 63, 199, 0.12) !important; }
.mcd-sales-label { color: var(--cp-violet) !important; }
.mcd-col .ls-price { color: #1e293b !important; }
.mcd-col .ls-link { color: var(--cp-violet) !important; border-bottom-color: rgba(124, 58, 237, 0.3) !important; }
.mcd-col .ls-d { color: rgba(30, 41, 59, 0.4) !important; }
.mcd-col .ls-empty { color: rgba(30, 41, 59, 0.35) !important; }
.ml-price { color: #1e293b !important; font-family: 'Belwe Bold', 'Cinzel', serif !important; }
.ml-ship { color: rgba(30, 41, 59, 0.5) !important; font-family: 'Exo 2', sans-serif !important; }
.ml-qty { color: var(--cp-coral) !important; font-family: 'Exo 2', sans-serif !important; }
.ml-seller { color: rgba(30, 41, 59, 0.55) !important; font-family: 'Exo 2', sans-serif !important; }
a.mock-listing:hover { background: rgba(138, 63, 199, 0.06) !important; }
.ml-none { color: rgba(30, 41, 59, 0.4) !important; font-family: 'Exo 2', sans-serif !important; }

/* Grade pills */
.mgr-num {
  background: rgba(20, 4, 30, 0.5) !important;
  border: 1px solid rgba(138, 63, 199, 0.25) !important;
  color: #d0c8e4 !important;
  min-width: 26px !important;
  height: 26px !important;
  padding: 0 7px !important;
  font-size: 0.62rem !important;
  border-radius: 4px !important;
}
.mgr-num:hover {
  background: rgba(138, 63, 199, 0.15) !important;
  border-color: rgba(138, 63, 199, 0.5) !important;
  color: #fff !important;
}
.mgr-num.active {
  background: rgba(226, 122, 94, 0.85) !important;
  border-color: rgba(226, 122, 94, 0.9) !important;
  color: #fff !important;
  box-shadow: 0 0 6px rgba(226, 122, 94, 0.25) !important;
}
.mgr-num.disabled { opacity: 0.2 !important; }

/* Company columns — lavender sub-panels, page-matching text */
.mgr-company {
  background: rgba(228, 218, 240, 0.9) !important;
  border: 1px solid rgba(138, 63, 199, 0.25) !important;
  border-radius: 8px !important;
  padding: 12px !important;
}
.mgr-co-name { font-family: 'Cinzel', serif !important; font-weight: 700 !important; letter-spacing: 0.06em !important; }
.mgr-co-avg { color: #1e293b !important; font-family: 'Belwe Bold', 'Cinzel', serif !important; }
.mgr-co-sold { font-family: 'Exo 2', sans-serif !important; }
.mgr-sold-price { color: #1e293b !important; }
.mgr-sold-date { color: rgba(30, 41, 59, 0.45) !important; }
.mgr-sold-link:hover { background: rgba(138, 63, 199, 0.06) !important; }
.mgr-co-none { color: rgba(30, 41, 59, 0.4) !important; font-family: 'Exo 2', sans-serif !important; }

/* ── Redesigned-tile panels → match the light price-summary look ──
   The rules above target the OLD tile class names (.mock-cond-detail,
   .mgr-company). The redesigned tile renamed them to .mcd-sub-panel and
   .mgr-co-box, so they were getting dark text on no background (unreadable).
   Give them the same lavender panel + page-matching text as .mock-price-summary. */
.mcd-sub-panel { background: rgba(228, 218, 240, 0.9) !important; border: 1px solid rgba(138, 63, 199, 0.25) !important; border-radius: 8px !important; }
.mcd-sub-panel .mcd-sales-label { color: #1a0826 !important; }
.mcd-sub-panel .mcd-last { color: var(--cp-coral) !important; }
.mcd-sub-panel .ls-price { color: #1e293b !important; }
.mcd-sub-panel .ls-link { color: var(--cp-violet) !important; }
.mcd-sub-panel .ls-d { color: rgba(30, 41, 59, 0.5) !important; }
.mcd-sub-panel .ls-empty { color: rgba(30, 41, 59, 0.4) !important; }
/* Sales title label — sits above the combined box, on the dark panel bg */
.mcd-sales-title { color: rgba(255,255,255,0.65) !important; }
/* Consolidated sales box */
.mcd-combined { background: rgba(228, 218, 240, 0.9) !important; border: 1px solid rgba(138, 63, 199, 0.25) !important; }
.mcd-combined .mcd-col-tcg { border-right-color: rgba(138, 63, 199, 0.15) !important; }
/* Non-TCG cards render the eBay column alone (card-panel.js, Eric 2026-09-12): let that one
   column take the full width instead of sitting in half of a two-column box. */
.mcd-combined--ebay-only { grid-template-columns: 1fr !important; }
.mcd-combined--ebay-only .mcd-col-ebay { border-left: 0 !important; }
.mcd-combined .mcd-sales-label { color: #1a0826 !important; }
.mcd-combined .ls-price { color: #1e293b !important; }
.mcd-combined .ls-link { color: var(--cp-violet) !important; }
.mcd-combined .ls-d { color: rgba(30, 41, 59, 0.5) !important; }
.mcd-combined .ls-empty { color: rgba(30, 41, 59, 0.4) !important; }

.mgr-co-box { background: rgba(228, 218, 240, 0.9) !important; border: 1px solid rgba(138, 63, 199, 0.25) !important; border-radius: 8px !important; }
/* .mgr-co-name keeps its inline per-company color (PSA red, BGS, CGC, …) */
.mgr-co-box .mgr-co-avg { color: var(--cp-coral) !important; }
.mgr-co-box .mgr-co-solds, .mgr-co-box .mgr-sold-row { color: #1e293b !important; }
.mgr-co-box .mgr-sold-date { color: rgba(30, 41, 59, 0.5) !important; }
.mgr-co-box .mgr-co-none { color: rgba(30, 41, 59, 0.4) !important; }

/* Expand section — same bg as mock-wrap so it reads as one card */
.mock-expand { background: transparent !important; border-top: 1px solid rgba(138, 63, 199, 0.12) !important; border-bottom: none !important; }
.mock-expand-title { color: var(--cp-coral) !important; font-size: 0.68rem !important; letter-spacing: 0.05em !important; }

/* ── Inline dropdowns — matching .cp-dropdown filter style exactly ──── */
.mock-selectors { display: flex !important; gap: clamp(2px, 0.8vw, 6px) !important; flex-wrap: nowrap !important; align-items: center !important; min-width: 0 !important; }
.mock-pills-row { display: flex !important; gap: clamp(4px, 1.2vw, 8px) !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; }
.cart-add-btn { background: rgba(58, 28, 96, 0.85) !important; border: 1px solid rgba(138, 63, 199, 0.15) !important; color: #fff !important; font-family: 'Cinzel', serif !important; font-weight: 700 !important; font-size: clamp(0.38rem, 1.4vw, 0.5rem) !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; border-radius: 6px !important; padding: clamp(2px, 0.6vw, 4px) clamp(6px, 1.4vw, 10px) !important; }
.cart-add-btn:hover { background: rgba(138, 63, 199, 0.3) !important; border-color: rgba(138, 63, 199, 0.4) !important; }
.cp-dd {
  position: relative !important;
  display: inline-block !important;
}
.cp-dd-trigger {
  background: rgba(58, 28, 96, 0.85) !important;
  border: 1px solid rgba(138, 63, 199, 0.15) !important;
  color: #fff !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: clamp(0.42rem, 1.6vw, 0.58rem) !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 0 3px var(--cp-violet), 0 0 6px rgba(226, 122, 94, 0.5), 0 0 1px #fff !important;
  border-radius: 6px !important;
  padding: clamp(3px, 0.6vw, 5px) clamp(16px, 3vw, 22px) clamp(3px, 0.6vw, 5px) clamp(8px, 1.6vw, 10px) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  position: relative !important;
  user-select: none !important;
  text-transform: uppercase !important;
}
.cp-dd-trigger::after {
  content: '▾' !important;
  position: absolute !important;
  right: 5px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 1.1em !important;
  opacity: 1 !important;
  color: var(--cp-coral) !important;
  text-shadow: none !important;
}
.cp-dd-trigger:hover,
.cp-dd.open .cp-dd-trigger {
  border-color: rgba(138, 63, 199, 0.4) !important;
}
.cp-dd-list {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  min-width: 100% !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  background: linear-gradient(180deg, rgba(58, 28, 96, 0.97), rgba(40, 20, 68, 0.97)) !important;
  border: 1px solid rgba(138, 63, 199, 0.25) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 20px rgba(138, 63, 199, 0.1) !important;
  z-index: 300 !important;
  padding: 4px 0 !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
.cp-dd.open .cp-dd-list { display: block !important; }
.cp-dd-item {
  padding: 6px 12px !important;
  font-family: 'Exo 2', sans-serif !important;
  font-size: clamp(0.6rem, 0.8vw, 0.75rem) !important;
  color: rgba(228, 224, 240, 0.7) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s !important;
}
.cp-dd-item:hover { background: rgba(138, 63, 199, 0.15) !important; color: #fff !important; }
.cp-dd-item.active { color: var(--cp-coral) !important; background: rgba(226, 122, 94, 0.1) !important; }

/* Condition dropdown — wider with pricing */
.cp-dd-cond .cp-dd-list { min-width: 280px !important; }
.cp-dd-cond .cp-dd-item { display: flex !important; justify-content: space-between !important; gap: 12px !important; }
.cp-dd-cond-name { font-weight: 600 !important; }
.cp-dd-cond-prices { color: rgba(228, 224, 240, 0.4) !important; font-size: clamp(0.5rem, 0.7vw, 0.62rem) !important; }
.cp-dd-cond .cp-dd-item.active .cp-dd-cond-prices { color: rgba(251, 146, 60, 0.6) !important; }

/* Static label (single value — no dropdown) */
.cp-dd-static {
  display: inline-block !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: clamp(0.45rem, 1.8vw, 0.62rem) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: clamp(3px, 0.8vw, 5px) clamp(6px, 1.5vw, 10px) !important;
  border-radius: 8px !important;
  background: rgba(58, 28, 96, 0.85) !important;
  border: 1px solid rgba(138, 63, 199, 0.15) !important;
  color: #fff !important;
  text-shadow: 0 0 3px var(--cp-violet), 0 0 6px rgba(226, 122, 94, 0.5), 0 0 1px #fff !important;
}

/* Graded panels — match page theme */
.mgr-big-box { background: rgba(58, 28, 96, 0.4) !important; border-color: rgba(138, 63, 199, 0.2) !important; }
.mgr-sm-box { background: rgba(58, 28, 96, 0.3) !important; }
.mgr-sm-box:hover { background: rgba(138, 63, 199, 0.15) !important; border-color: rgba(138, 63, 199, 0.4) !important; }
.mgr-co-select { color: #e4e0f0 !important; border-color: rgba(138, 63, 199, 0.25) !important; }
.mgr-co-select option { background: #2d1045 !important; }
.mgr-header { color: var(--cp-coral) !important; }
.mgr-grade-drop { color: var(--cp-violet-bright) !important; }
.mgr-grade-grid { background: rgba(58, 28, 96, 0.5) !important; border-color: rgba(138, 63, 199, 0.2) !important; }
.mgr-gg-cell { background: rgba(58, 28, 96, 0.4) !important; }
.mgr-gg-cell:hover { background: rgba(138, 63, 199, 0.2) !important; border-color: var(--cp-violet-bright) !important; }
.mgr-gg-cell.active { background: rgba(138, 63, 199, 0.3) !important; border-color: var(--cp-violet-bright) !important; color: #c4b5fd !important; }
.mgr-sold-row { color: rgba(228, 224, 240, 0.7) !important; }
.mgr-sold-row:hover { background: rgba(138, 63, 199, 0.1) !important; }

/* ── Slow down holo shimmer (less distracting on white) ──────────────── */
.grad-line { display: none !important; }
.panel-title::after { display: none !important; }


/* ── Selection color ─────────────────────────────────────────────────── */
::selection {
  background: rgba(138, 63, 199, 0.25);
  color: #0f172a;
}

/* ── Focus ring ──────────────────────────────────────────────────────── */
:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 4px rgba(138, 63, 199, 0.6) !important;
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .panel:hover { transform: none !important; }
}

@media print {
  .panel, .tape { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; border: 1px solid #ccc !important; background: #fff !important; }
  .tape::before, .comp-footer::before { display: none !important; }
  .stars, .shooting-star, .pokeballs, .side-art { display: none !important; }
  .cp-nav, .cp-mobile-nav, .cp-footer { display: none !important; }
}

/* ── Issue 3: Sub-panel border-radius ───────────────────────────────────── */
.sl-preview, .modal-card { border-radius: 16px !important; }

/* ── Issue 12: Sub-panel border-radius consistency ──────────────────────── */
.results-wrap, .x-sales, .variant-cycler { border-radius: 12px !important; }

/* ── Issue 21: Tape label sizing ────────────────────────────────────────── */
.tape-label {
  font-size: clamp(0.55rem, 0.7vw, 0.72rem) !important;
  letter-spacing: 0.14em !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE / RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
/* Filters: never wrap, always scale down */
.filters {
  display: none !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}
.filters.open {
  display: flex !important;
}
.filter-group {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}
.filter-select, select {
  min-width: 0 !important;
  max-width: 100% !important;
}
.toggle-text {
  white-space: nowrap !important;
  font-size: clamp(0.45rem, 0.7vw, 0.66rem) !important;
}

/* Tabs: scale, never wrap */
.modes {
  flex-wrap: nowrap !important;
}
.mode-btn {
  font-size: clamp(0.5rem, 0.9vw, 0.76rem) !important;
  padding: clamp(4px, 0.6vw, 10px) clamp(10px, 1.5vw, 26px) !important;
  white-space: nowrap !important;
}
.mode-btn.active {
  padding: clamp(6px, 0.8vw, 10px) clamp(12px, 1.8vw, 26px) !important;
}

/* Stat pill: scale */
.tape-cell { padding: clamp(1px, 0.3vw, 2px) clamp(3px, 0.5vw, 8px) !important; }

/* ── Mobile filter toggle button (hidden on desktop) ─────────────────── */
.filter-toggle-btn {
  display: none;
  width: 100%;
  padding: 8px 14px;
  background: rgba(58, 28, 96, 0.85);
  border: 1px solid rgba(138, 63, 199, 0.2);
  border-radius: 8px;
  color: #fff;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  margin-bottom: 6px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}
.filter-toggle-btn::after {
  content: '▾';
  font-size: 0.6em;
  opacity: 0.6;
  transition: transform 0.2s;
}
.filter-toggle-btn.open::after {
  transform: rotate(180deg);
}
.filter-badge {
  font-family: 'Exo 2', sans-serif;
  font-size: 0.6rem;
  background: var(--cp-coral);
  color: #fff;
  border-radius: 999px;
  padding: 1px 6px;
  min-width: 16px;
  text-align: center;
}
.filter-badge:empty { display: none; }

@media (max-width: 768px) {
  /* Fix #1: Tape stat pills — switch from absolute overlay to static flow */
  .tape {
    position: static !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 6px 10px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }

  .filter-toggle-btn { display: flex; }
  .filters {
    display: none !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .filters.open {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px;
    background: rgba(58, 28, 96, 0.5);
    border: 1px solid rgba(138, 63, 199, 0.15);
    border-radius: 8px;
    margin-bottom: 8px;
  }
  .filters.open .filter-group {
    flex: none !important;
    width: 100% !important;
  }
  .filters.open .filter-select,
  .filters.open select,
  .filters.open .cp-dropdown {
    max-width: none !important;
    width: 100% !important;
  }
  .filters.open .cp-dropdown-trigger {
    max-width: none !important;
    width: 100% !important;
  }
  .filters.open .toggle {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

/* ── Support button (nav + footer) ─────────────────────────────────── */
.cp-nav-support {
  color: #fff !important;
  opacity: 1 !important;
}
.cp-nav-support:hover {
  color: #fff !important;
}
.cp-footer-support {
  color: var(--cp-violet-bright) !important;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.cp-footer-support:hover {
  opacity: 1;
}

@media (max-width: 600px) {
  .cp-nav { padding: 0 12px !important; height: 48px !important; }
  .cp-nav-logo { overflow: visible !important; flex-shrink: 0 !important; }
  .cp-nav-logo img { height: 28px !important; width: auto !important; }
  #panel-search { padding: 16px 12px !important; }
  .cp-footer-links { gap: 12px !important; }

  /* Fix #2: Search bar — make it look functional, not decorative */
  .search-prompt {
    display: none !important;
  }
  .search-wrap {
    border-radius: 14px !important;
    border: 1px solid rgba(120, 80, 175, 0.22) !important;
    background: #ECE4F7 !important;
    box-shadow: 0 2px 10px rgba(36, 12, 64, 0.16) !important;
  }
  #search {
    padding-left: 40px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 14px !important;
    color: #3A1C60 !important;
  }
  #search::placeholder {
    color: rgba(96, 56, 148, 0.58) !important;
    font-size: 0.85rem !important;
  }
  .search-wrap::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid rgba(86, 46, 140, 0.75);
    border-radius: 50%;
    z-index: 2;
  }
  .search-wrap::after {
    content: '';
    position: absolute;
    left: 27px;
    top: 58%;
    width: 2px;
    height: 7px;
    background: rgba(138, 63, 199, 0.6);
    transform: rotate(-45deg);
    z-index: 2;
  }
  .search-cursor {
    display: none !important;
  }

  /* Fix #3: Filters above search — reorder via flexbox */
  #view-search {
    display: flex;
    flex-direction: column;
  }
  #view-search[hidden] { display: none !important; }
  #view-search > .search-title-wrap { order: 1 !important; }
  #view-search > .global-selectors { order: 2 !important; }
  #view-search > .search-wrap { order: 3 !important; margin-top: 6px !important; }
  /* The hero search box IS the search now, so it takes the slot the old input had.
   *
   * Without an explicit order it defaults to 0, and 0 sorts before every rule above —
   * so on mobile the search box AND its results rendered above "Search the Index", the
   * ALL GAMES / FILTERS chips and the stats tape, i.e. the exact arrangement this whole
   * block exists to prevent (see "Fix #3" above). Eric, on a phone: "the search the
   * index, stats bar, and filters should be above the search."
   *
   * Order 3 is not a guess: it is where .search-wrap — the input the hero replaced —
   * already sat, and it reproduces what DESKTOP already does. Above 600px #view-search
   * is not a flex container at all, so document order governs there, and in
   * comp/index.html the title (L471) and .global-selectors (L476) both precede
   * #web-app-landing (L587). This makes the two viewports agree instead of making
   * mobile a special case.
   *
   * Any NEW direct child of #view-search needs an order here too, for the same reason. */
  #view-search > #web-app-landing { order: 3 !important; }
  #view-search > .filters { order: 4 !important; }
  #view-search > .search-status-bar { order: 5 !important; }
  #view-search > .results-wrap { order: 6 !important; }
}

/* Filter panel overrides — must be last */
.gs-filter-panel .cp-dropdown { display: block !important; max-width: none !important; width: 100% !important; }
.gs-filter-panel .cp-dropdown-trigger { max-width: none !important; width: 100% !important; }
.gs-filter-panel .filter-select,
.gs-filter-panel select { max-width: none !important; width: 100% !important; }

/* Must be last — override arrow on global selectors */
.global-selectors select.gs-game,
.global-selectors select.gs-lang {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff'/%3E%3C/svg%3E") !important;
  background-size: 8px 5px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Auth modal (/auth.js, served from this origin) — reskin to Card Prices.
   The shared modal ships a dark navy theme. On Card Prices' light panels its
   inputs inherited the remapped (now-dark) --text-light and the typed text went
   invisible against the dark field. These overrides turn it into a white panel
   with dark, readable text and the purple/orange brand accents. Scoped to this
   file, which is NOT loaded on game-enthusiasts.com, so that site is untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
.auth-modal {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  box-shadow: 0 24px 60px rgba(25, 5, 35, 0.40), 0 0 0 1px rgba(138, 63, 199, 0.10) !important;
}
.auth-tabs { border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; }
.auth-tab { color: #64748b !important; -webkit-text-fill-color: #64748b !important; }
.auth-tab.active {
  color: var(--cp-violet) !important; -webkit-text-fill-color: var(--cp-violet) !important;
  border-bottom-color: var(--cp-violet) !important;
  background: rgba(138, 63, 199, 0.05) !important;
}
.auth-field label { color: #475569 !important; -webkit-text-fill-color: #475569 !important; }
.auth-field input {
  background: #f6f4fb !important;
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
}
.auth-field input::placeholder {
  color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; opacity: 1 !important;
}
.auth-field input:focus {
  border-color: var(--cp-violet) !important;
  box-shadow: 0 0 0 3px rgba(138, 63, 199, 0.14) !important;
}
/* Submit button: keep the orange→gold gradient, force solid dark text for contrast */
.auth-submit-btn { color: #1a0a2e !important; -webkit-text-fill-color: #1a0a2e !important; text-shadow: none !important; }
/* "Continue with Google" + other inline-styled secondary buttons inside the modal */
.auth-body button[onclick*="GoogleSignIn"],
.auth-body button[onclick*="cancelMfaSignIn"] {
  background: #f6f4fb !important;
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  color: #1e293b !important; -webkit-text-fill-color: #1e293b !important;
}
.auth-body button[onclick*="GoogleSignIn"]:hover { background: #ece8f6 !important; }
.auth-close { color: #64748b !important; }
.auth-close:hover { color: #1e293b !important; background: rgba(0, 0, 0, 0.06) !important; }
.auth-error { color: #dc2626 !important; }
/* MFA helper text + "or" divider rules were tuned for a dark panel */
.auth-body div[style*="background:rgba(255,255,255,0.1)"] { background: rgba(0, 0, 0, 0.10) !important; }
.auth-body div[style*="color:var(--text-muted)"] { color: #64748b !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   NAV — MATCH THE WEB APP                                     (Eric, 2026-09-07)
   "making it seem like part of the web app"

   THERE ARE TWO PALETTES IN THIS PRODUCT AND THE NAV WAS ON THE WRONG ONE.
   apps/scanner/src/theme.ts, line 1: its tokens were taken "DIRECTLY from the live
   scanner's CSS", and it names the pair explicitly — purple #A855F7, coral #FF7F50,
   "(NOT the site's terracotta refresh)". The site's Galaxy Sunrise refresh runs
   --cp-violet #8A3FC7 / --cp-coral #E27A5E, which is that terracotta.

   My first pass at "match the app" reached for the site's own --cp-* vars and so moved
   the nav FURTHER from the app. Same mistake on type: I switched to Belwe, while the
   app's fonts.head is Cinzel_700Bold — the face this nav already had.

   So these rules are pinned to the APP's literal values, not to the site's vars. That
   is deliberate: --cp-violet/--cp-coral are the terracotta refresh, and inheriting them
   is what put the nav on the wrong palette in the first place. If the app's theme.ts
   moves, move these with it.
   Loaded by BOTH surfaces — the /web Expo shell injects only this stylesheet — so the
   bar is identical on the site and inside the app.
   ══════════════════════════════════════════════════════════════════════════════ */
/* THE KEY RULE. Custom properties inherit, so redefining the pair ON THE NAV makes
   every rule inside it resolve to the app's palette — including the dozen ORIGINAL nav
   rules above (the active underline at :1055, the mobile border-left at :1144/:1149,
   the border-image and glow at :1165/:1169, the hover sweep at :1202) that would
   otherwise keep rendering terracotta and leave the bar half on each palette.
   Scoped, not global: the rest of the site stays on Galaxy Sunrise deliberately. */
.cp-nav,
.cp-mobile-nav,
.cp-nav-account {
  --cp-violet: #A855F7;
  --cp-coral:  #FF7F50;
}

:root {
  --app-purple: #A855F7;   /* theme.ts colors.purple */
  --app-coral:  #FF7F50;   /* theme.ts colors.coral  */
  --app-text:   #F4EFFA;   /* theme.ts colors.text   */
  --app-muted:  #C6B9D9;   /* theme.ts colors.muted  */
  --app-field:  #2A1248;   /* theme.ts colors.bg     */
  --app-field2: #1C0C36;   /* theme.ts colors.bgMid  */
}

/* Bar: the scanner's deep purple field, edged in the app's purple->coral pair. */
.cp-nav {
  background: linear-gradient(180deg, var(--app-field) 0%, var(--app-field2) 100%) !important;
  border-bottom: 2px solid transparent !important;
  border-image: linear-gradient(90deg, var(--app-purple), var(--app-coral)) 1 !important;
  box-shadow: 0 4px 24px rgba(20, 10, 38, .45) !important;
}
.cp-nav::after {
  background: linear-gradient(90deg, var(--app-purple), var(--app-coral)) !important;
  background-size: 200% 100% !important;
}

/* Type: Cinzel, because that is the app's fonts.head. Colour is the app's text token. */
.cp-nav-links a,
.cp-nav-logo span,
.cp-nav-mobile-quick a,
.cp-mobile-row {
  font-family: 'Cinzel', serif !important;
  color: var(--app-text) !important;
  letter-spacing: .05em !important;
}
.cp-nav-links a:hover,
.cp-nav-mobile-quick a:hover,
.cp-mobile-row:hover { color: var(--app-coral) !important; }
.cp-nav-links a.active,
.cp-mobile-row.active { color: var(--app-coral) !important; }

/* Auth pills.
   SPECIFICITY IS LOAD-BEARING: card-prices-redesign.css loads AFTER this file and
   carries `.cp-nav-links a { background:transparent !important; border:0 !important }`
   so text links stop reading as boxed tiles. The auth links sit INSIDE .cp-nav-links,
   so that rule stripped this pill too — it beat a bare `.cp-nav-auth-link` on
   specificity (0,1,1 vs 0,1,0) as well as on order. Qualifying to
   `.cp-nav .cp-nav-links a.cp-nav-auth-link` (0,3,1) wins on specificity alone, which
   also keeps it right in the /web shell where redesign.css is never loaded. */
.cp-nav .cp-nav-links a.cp-nav-auth-link,
.cp-nav .cp-nav-mobile-quick a.cp-q-auth,
.cp-mobile-nav a.cp-mobile-auth-row {
  font-family: 'Cinzel', serif !important;
  color: #fff !important;
  border: 1px solid var(--app-purple) !important;
  border-image: none !important;
  background: rgba(168, 85, 247, .26) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
}
.cp-nav .cp-nav-links a.cp-nav-auth-link:hover,
.cp-nav .cp-nav-mobile-quick a.cp-q-auth:hover,
.cp-mobile-nav a.cp-mobile-auth-row:hover {
  background: rgba(255, 127, 80, .26) !important;
  border-color: var(--app-coral) !important;
  color: #fff !important;
}

/* Mobile sheet + MENU chip on the same pair. */
.cp-mobile-nav {
  background: linear-gradient(180deg, var(--app-field) 0%, var(--app-field2) 100%) !important;
  border-bottom: 1px solid rgba(255, 127, 80, .28) !important;
}
.cp-nav-hamburger { border-image: linear-gradient(90deg, var(--app-purple), var(--app-coral)) 1 !important; }
.cp-nav-hamburger span:nth-child(1) { background: var(--app-coral) !important; box-shadow: none !important; }
.cp-nav-hamburger span:nth-child(3) { background: var(--app-purple) !important; box-shadow: none !important; }
.cp-nav-hamburger span:nth-child(2)::after {
  font-family: 'Cinzel', serif !important;
  color: var(--app-text) !important; text-shadow: none !important;
}

.cp-nav-account {
  background: linear-gradient(180deg, var(--app-field) 0%, var(--app-field2) 100%) !important;
  border: 1px solid var(--app-purple) !important;
  border-image: none !important;
}
.cp-nav-account .cp-acct-email { color: var(--app-muted) !important; }
.cp-nav-account .cp-acct-email,
.cp-nav-account .cp-acct-signout { font-family: 'Cinzel', serif !important; }
.cp-nav-account .cp-acct-signout:hover { background: rgba(255, 127, 80, .22) !important; }