/* ═══════════════════════════════════════════════════════════════════════════
   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 {
  /* ── 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 → rich dark purple ──────────────────────────────── */
  --abyss: #1a0826;
  --deep-navy: #150620;
  --navy: #1f0a2e;

  /* ── 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 → KEEP neon (pops on white!) ───────────────────────── */
  /* Neon accents stay the same — they'll be vivid against white panels */
  --comp-accent-55: rgba(147, 51, 234, 0.7);
  --comp-accent-50: rgba(147, 51, 234, 0.6);
  --comp-accent-45: rgba(147, 51, 234, 0.55);
  --comp-accent-40: rgba(147, 51, 234, 0.5);
  --comp-accent-35: rgba(147, 51, 234, 0.45);
  --comp-accent-30: rgba(147, 51, 234, 0.4);
  --comp-accent-28: rgba(147, 51, 234, 0.35);
  --comp-accent-25: rgba(147, 51, 234, 0.3);
  --comp-accent-22: rgba(147, 51, 234, 0.28);
  --comp-accent-20: rgba(147, 51, 234, 0.25);
  --comp-accent-18: rgba(147, 51, 234, 0.22);
  --comp-accent-15: rgba(147, 51, 234, 0.18);
  --comp-accent-14: rgba(147, 51, 234, 0.16);
  --comp-accent-12: rgba(147, 51, 234, 0.14);
  --comp-accent-10: rgba(147, 51, 234, 0.12);
  --comp-accent-08: rgba(147, 51, 234, 0.08);
  --comp-accent-06: rgba(147, 51, 234, 0.06);
  --comp-accent-05: rgba(147, 51, 234, 0.05);
  --comp-accent-04: rgba(147, 51, 234, 0.04);
  --comp-accent-025: rgba(147, 51, 234, 0.025);
  --comp-accent-02: rgba(147, 51, 234, 0.02);
  --comp-accent-015: rgba(147, 51, 234, 0.015);
  --comp-accent-00: rgba(147, 51, 234, 0);
  --neon-cyan: #9333ea;
  --neon-cyan-soft: rgba(168, 85, 247, 0.5);

  /* ── Warm/Gold/Pink → slightly muted for light bg ───────────────────── */
  --comp-warm-50: rgba(230, 90, 0, 0.5);
  --comp-warm-40: rgba(230, 90, 0, 0.4);
  --comp-warm-30: rgba(230, 90, 0, 0.3);
  --comp-warm-25: rgba(230, 90, 0, 0.25);
  --comp-warm-15: rgba(230, 90, 0, 0.15);
  --comp-warm-10: rgba(230, 90, 0, 0.1);
  --comp-warm-08: rgba(230, 90, 0, 0.08);
  --comp-warm-07: rgba(230, 90, 0, 0.07);
  --comp-warm-06: rgba(230, 90, 0, 0.06);
  --neon-orange: #e05a00;

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

  --comp-pink-40: rgba(220, 50, 150, 0.4);
  --comp-pink-30: rgba(220, 50, 150, 0.3);
  --comp-pink-25: rgba(220, 50, 150, 0.25);
  --comp-pink-24: rgba(220, 50, 150, 0.24);
  --comp-pink-12: rgba(220, 50, 150, 0.12);
  --comp-pink-06: rgba(220, 50, 150, 0.06);
  --comp-pink-05: rgba(220, 50, 150, 0.05);
  --neon-pink: #dc3296;

  /* ── Gain/Loss → darker for white bg ────────────────────────────────── */
  --gain: #16a34a;
  --loss: #dc2626;
  --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(155, 55, 235, 0.30);
  --comp-pink-24: rgba(200, 80, 220, 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(224, 90, 0, 0.18) !important;
  border: 1px solid rgba(224, 90, 0, 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(168, 85, 247, 0.08) !important;
}
.tape-cell {
  border-right: 1px solid rgba(224, 90, 0, 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: #e05a00 !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(168, 85, 247, 0.15) !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(28, 4, 38, 0.4)) !important;
  color: rgba(200, 190, 230, 0.4) !important;
  -webkit-text-fill-color: rgba(200, 190, 230, 0.4) !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(230, 220, 245, 0.65) !important;
  -webkit-text-fill-color: rgba(230, 220, 245, 0.65) !important;
  background: linear-gradient(180deg, rgba(50, 8, 65, 0.7), rgba(35, 5, 48, 0.5)) !important;
}
.mode-btn.active {
  border: 1px solid transparent !important;
  border-bottom: none !important;
  background:
    linear-gradient(180deg, rgba(65, 10, 80, 1) 0%, rgba(40, 6, 55, 1) 60%, rgba(22, 3, 35, 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 #a855f7,
    0 0 6px rgba(224, 90, 0, 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; }


/* ── Override nebula background → cosmic purple with light glow ────────── */
body::before {
  background:
    /* Bright center glow — warmth, not darkness */
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(168, 85, 247, 0.20) 0%, transparent 55%),
    /* Upper-left violet cloud */
    radial-gradient(ellipse 55% 55% at 18% 28%, rgba(155, 55, 235, 0.22) 0%, transparent 65%),
    /* Upper-right pink/magenta nebula */
    radial-gradient(ellipse 45% 50% at 82% 16%, rgba(200, 80, 220, 0.16) 0%, transparent 60%),
    /* Lower-left indigo wash */
    radial-gradient(ellipse 50% 50% at 12% 78%, rgba(120, 40, 200, 0.18) 0%, transparent 60%),
    /* Lower-right warm purple */
    radial-gradient(ellipse 40% 40% at 88% 88%, rgba(180, 50, 220, 0.14) 0%, transparent 55%),
    /* Bottom warm glow — prevents "dark pit" feeling */
    radial-gradient(ellipse 80% 40% at 50% 95%, rgba(140, 50, 190, 0.15) 0%, transparent 50%),
    /* Mid-right orange hint — warmth from sunrise */
    radial-gradient(ellipse 30% 35% at 75% 55%, rgba(255, 120, 50, 0.06) 0%, transparent 50%),
    /* Base gradient */
    linear-gradient(to top, var(--abyss), var(--deep-navy)) !important;
}

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

/* ── 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(40px) saturate(180%) brightness(1.1) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.1) !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 80px rgba(147, 51, 234, 0.08) !important;
  border-radius: 16px !important;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease !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 80px rgba(147, 51, 234,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(200, 170, 0, 0.2) !important;
}

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

/* Search bar — purple glass, no double border */
.search-wrap {
  border-radius: 999px !important;
  background: rgba(65, 10, 80, 0.85) !important;
  border: none !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  box-shadow: 0 2px 12px rgba(72, 12, 85, 0.3), 0 0 30px rgba(147, 51, 234, 0.08) !important;
}
#search {
  background: transparent !important;
  border: 1px solid rgba(155, 70, 240, 0.2) !important;
  border-radius: 999px !important;
  color: #e0e8f4 !important;
}
#search::placeholder {
  color: rgba(200, 150, 240, 0.5) !important;
}
#search:focus {
  border-color: rgba(168, 85, 247, 0.4) !important;
  background: rgba(147, 51, 234, 0.04) !important;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.08), 0 0 24px rgba(147, 51, 234, 0.12) !important;
}
.search-prompt { color: rgba(168, 100, 240, 0.7) !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: peach/orange on white panel */
.hint-card {
  background: rgba(224, 90, 0, 0.18) !important;
  border: 1px solid rgba(224, 90, 0, 0.35) !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: #e05a00 !important; background: rgba(224, 90, 0, 0.15) !important; border: 1px solid rgba(224, 90, 0, 0.3) !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(65, 10, 80, 0.85) !important;
  border: 1px solid rgba(168, 85, 247, 0.15) !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 #a855f7,
    0 0 6px rgba(224, 90, 0, 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(168, 85, 247, 0.35) !important;
  box-shadow: 0 0 16px rgba(147, 51, 234, 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(65, 10, 80, 0.85);
  border: 1px solid rgba(168, 85, 247, 0.15);
  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 #a855f7, 0 0 6px rgba(224, 90, 0, 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(168, 85, 247, 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(65, 10, 80, 0.97), rgba(40, 6, 55, 0.97));
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 20px rgba(147, 51, 234, 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(168, 85, 247, 0.15);
  color: #fff;
}
.cp-dropdown-item.selected {
  color: #fb923c;
  background: rgba(224, 90, 0, 0.1);
}
.cp-dropdown-list::-webkit-scrollbar { width: 4px; }
.cp-dropdown-list::-webkit-scrollbar-thumb { background: rgba(168, 85, 247, 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(65, 10, 80, 0.85) !important;
  border: 1px solid rgba(168, 85, 247, 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(168, 85, 247, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.08), 0 0 24px rgba(147, 51, 234, 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(65, 10, 80, 1) 0%, rgba(40, 6, 55, 1) 60%, rgba(22, 3, 35, 1) 100%) !important;
  border: 0.5px solid !important;
  border-image: var(--holo) 1 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow:
    0 0 3px #a855f7,
    0 0 6px rgba(224, 90, 0, 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, #e05a00, #a855f7) !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(65, 10, 80, 0.7) !important;
  border: 1px solid rgba(168, 85, 247, 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(168, 85, 247, 0.35) !important;
  background: rgba(65, 10, 80, 0.85) !important;
}
.filter-pill.active,
.filter-pill.on,
.filter-toggle.on {
  border-color: rgba(168, 85, 247, 0.4) !important;
  background: rgba(65, 10, 80, 0.9) !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(147, 51, 234, 0.12) !important;
}

/* State / error / index offline — dark purple glass like search bar */
.state {
  color: rgba(220, 200, 245, 0.6) !important;
  background: rgba(65, 10, 80, 0.85) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  border: 1px solid rgba(168, 85, 247, 0.15) !important;
  border-radius: 12px !important;
  padding: 50px 20px !important;
}
.state .glyph {
  color: #e05a00 !important;
  opacity: 0.8 !important;
}
.state em {
  color: #d8b4fe !important;
}

/* Variant tabs — purple glass */
.v-tab {
  background: rgba(65, 10, 80, 0.4) !important;
  border-color: rgba(168, 85, 247, 0.1) !important;
  color: rgba(200, 190, 230, 0.6) !important;
}
.v-tab:hover {
  color: #e4e0f0 !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}
.v-tab.on {
  background: rgba(72, 12, 85, 0.6) !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
  color: #d8b4fe !important;
}
.v-mkt { color: rgba(200, 190, 230, 0.5) !important; }

/* Condition tabs — purple glass */
.cond-tab {
  background: rgba(65, 10, 80, 0.4) !important;
  border-color: rgba(168, 85, 247, 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(168, 85, 247, 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(65, 10, 80, 0.85) !important;
  border: 1px solid rgba(155, 70, 240, 0.12) !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(155, 70, 240, 0.1) !important;
}
.results-wrap .result-table td {
  color: #e4e0f0 !important;
  border-bottom-color: rgba(155, 70, 240, 0.06) !important;
}
.results-wrap .result-table tr:hover td {
  background: rgba(147, 51, 234, 0.06) !important;
}

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

/* Condition / foiling pills — dark purple, orange when active */
.cond-pill {
  background: rgba(65, 10, 80, 0.6) !important;
  border: 1px solid rgba(168, 85, 247, 0.2) !important;
  color: rgba(230, 220, 245, 0.7) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}
.cond-pill:hover {
  background: rgba(65, 10, 80, 0.8) !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
  color: #fff !important;
}
.cond-pill.on {
  background: rgba(224, 90, 0, 0.85) !important;
  border-color: rgba(224, 90, 0, 0.9) !important;
  color: #fff !important;
  box-shadow: 0 0 8px rgba(224, 90, 0, 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: var(--holo);
  background-size: 200% 100%;
  animation: holo-shimmer 8s linear infinite;
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   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(147, 51, 234, 0.06) !important;
}
.cp-nav::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 2px;
  background: var(--holo);
  background-size: 200% 100%;
  animation: holo-shimmer 6s linear infinite;
  opacity: 0.7;
}
/* 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: #fb923c !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(147, 51, 234, 0.3));
  transition: filter 0.3s ease;
}
.cp-nav-logo:hover img {
  filter: drop-shadow(0 0 12px rgba(147, 51, 234, 0.6));
}
.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(147, 51, 234, 0.2);
}
.cp-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 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;
  padding: 6px 10px;
  position: relative;
  transition: all 0.25s ease;
  background: rgba(65, 10, 80, 0.6);
  border: 1px solid rgba(168, 85, 247, 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: var(--holo);
  background-size: 200% 100%;
  animation: holo-shimmer 4s linear infinite;
  opacity: 0;
  transition: opacity 0.25s ease;
  border-radius: 1px;
}
.cp-nav-links a:hover {
  color: #fff;
  background: rgba(65, 10, 80, 0.85);
  border-color: rgba(168, 85, 247, 0.35);
}
.cp-nav-links a:hover::after {
  opacity: 0;
}
.cp-nav-links a.active {
  color: #fff;
  background: rgba(65, 10, 80, 0.85);
  border-color: rgba(168, 85, 247, 0.35);
  border-bottom: 2px solid #e05a00;
}
.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(168, 85, 247, 0.3);
  box-shadow: 0 0 4px rgba(147, 51, 234, 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, #6340ff, #ff3cac, #ff6a00);
  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: #d8b4fe;
  background: rgba(147, 51, 234, 0.06);
  border-left-color: #6340ff;
  text-shadow: 0 0 10px rgba(147, 51, 234, 0.4);
}
.cp-mobile-nav a.active {
  color: #d8b4fe;
  border-left-color: #6340ff;
  text-shadow: 0 0 12px rgba(147, 51, 234, 0.5);
}
@media (max-width: 768px) {
  .cp-nav-hamburger { display: flex; }
  .cp-nav-links { display: none; }
}


/* ── Buttons — main site btn-primary with purple instead of blue ──────── */
.btn-primary,
.cp-nav-links a,
.cp-footer-links a,
.comp-footer .support-link {
  background: linear-gradient(180deg, rgba(65, 10, 80, 1) 0%, rgba(40, 6, 55, 1) 60%, rgba(22, 3, 35, 1) 100%) !important;
  border: 0.5px solid !important;
  border-image: var(--holo) 1 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow:
    0 0 3px #a855f7,
    0 0 6px rgba(224, 90, 0, 0.5),
    0 0 1px #fff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 0 20px rgba(147, 51, 234, 0.15), 0 0 40px rgba(255,60,172,0.06), 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(147, 51, 234, 0.3), 0 0 72px rgba(255,60,172,0.12), 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, #9333ea, #ff3cac, #ff6a00, #ffd700, #9333ea) !important;
  background-size: 200% 100%;
  animation: holo-shimmer 6s linear infinite;
  box-shadow: 0 0 8px rgba(147, 51, 234, 0.2), 0 0 16px rgba(255, 60, 172, 0.1);
}
.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: #fb923c;
  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(147, 51, 234, 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(147, 51, 234, 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(65, 10, 80, 0.85) !important; border-color: rgba(155, 70, 240, 0.12) !important; }
.mock-row:hover { background: rgba(147, 51, 234, 0.04) !important; }
.mock-thumb { background: rgba(65, 10, 80, 0.4) !important; border-color: rgba(168, 85, 247, 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(168, 85, 247, 0.3) !important;
  color: #d0c8e4 !important;
  font-size: 0.62rem !important;
  padding: 3px 9px !important;
  border-radius: 4px !important;
}
.mock-pill:hover {
  background: rgba(168, 85, 247, 0.15) !important;
  border-color: rgba(168, 85, 247, 0.5) !important;
  color: #fff !important;
}
.mock-pill.active {
  background: rgba(224, 90, 0, 0.85) !important;
  border-color: rgba(224, 90, 0, 0.9) !important;
  color: #fff !important;
  box-shadow: 0 0 6px rgba(224, 90, 0, 0.25) !important;
}
.mock-pill.lang {
  background: rgba(65, 10, 80, 0.85) !important;
  border: 1px solid rgba(168, 85, 247, 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(147, 51, 234, 0.3) !important;
  color: #fff !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
}
.mock-pill.ghost { color: rgba(200, 190, 230, 0.3) !important; }
.mock-pill.linked { border-color: rgba(168, 85, 247, 0.4) !important; }
.pill-sep { background: rgba(168, 85, 247, 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(168, 85, 247, 0.25) !important; border-radius: 8px !important; }
.mps-cond { color: #1a0826 !important; }
.mps-label { color: #64587a !important; }
.mps-low { color: #e05a00 !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(168, 85, 247, 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: #e05a00 !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(147, 51, 234, 0.12) !important; }
.mcd-sales-label { color: #7c3aed !important; }
.mcd-col .ls-price { color: #1e293b !important; }
.mcd-col .ls-link { color: #7c3aed !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: #e05a00 !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(147, 51, 234, 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(168, 85, 247, 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(168, 85, 247, 0.15) !important;
  border-color: rgba(168, 85, 247, 0.5) !important;
  color: #fff !important;
}
.mgr-num.active {
  background: rgba(224, 90, 0, 0.85) !important;
  border-color: rgba(224, 90, 0, 0.9) !important;
  color: #fff !important;
  box-shadow: 0 0 6px rgba(224, 90, 0, 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(168, 85, 247, 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(147, 51, 234, 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(168, 85, 247, 0.25) !important; border-radius: 8px !important; }
.mcd-sub-panel .mcd-sales-label { color: #1a0826 !important; }
.mcd-sub-panel .mcd-last { color: #e05a00 !important; }
.mcd-sub-panel .ls-price { color: #1e293b !important; }
.mcd-sub-panel .ls-link { color: #7c3aed !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; }

.mgr-co-box { background: rgba(228, 218, 240, 0.9) !important; border: 1px solid rgba(168, 85, 247, 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: #e05a00 !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(168, 85, 247, 0.12) !important; border-bottom: none !important; }
.mock-expand-title { color: #fb923c !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(65, 10, 80, 0.85) !important; border: 1px solid rgba(168, 85, 247, 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(147, 51, 234, 0.3) !important; border-color: rgba(168, 85, 247, 0.4) !important; }
.cp-dd {
  position: relative !important;
  display: inline-block !important;
}
.cp-dd-trigger {
  background: rgba(65, 10, 80, 0.85) !important;
  border: 1px solid rgba(168, 85, 247, 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 #a855f7, 0 0 6px rgba(224, 90, 0, 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: #fb923c !important;
  text-shadow: none !important;
}
.cp-dd-trigger:hover,
.cp-dd.open .cp-dd-trigger {
  border-color: rgba(168, 85, 247, 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(65, 10, 80, 0.97), rgba(40, 6, 55, 0.97)) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 20px rgba(147, 51, 234, 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(168, 85, 247, 0.15) !important; color: #fff !important; }
.cp-dd-item.active { color: #fb923c !important; background: rgba(224, 90, 0, 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(65, 10, 80, 0.85) !important;
  border: 1px solid rgba(168, 85, 247, 0.15) !important;
  color: #fff !important;
  text-shadow: 0 0 3px #a855f7, 0 0 6px rgba(224, 90, 0, 0.5), 0 0 1px #fff !important;
}

/* Graded panels — match page theme */
.mgr-big-box { background: rgba(65, 10, 80, 0.4) !important; border-color: rgba(168, 85, 247, 0.2) !important; }
.mgr-sm-box { background: rgba(65, 10, 80, 0.3) !important; }
.mgr-sm-box:hover { background: rgba(147, 51, 234, 0.15) !important; border-color: rgba(168, 85, 247, 0.4) !important; }
.mgr-co-select { color: #e4e0f0 !important; border-color: rgba(168, 85, 247, 0.25) !important; }
.mgr-co-select option { background: #2d1045 !important; }
.mgr-header { color: #e05a00 !important; }
.mgr-grade-drop { color: #a78bfa !important; }
.mgr-grade-grid { background: rgba(65, 10, 80, 0.5) !important; border-color: rgba(168, 85, 247, 0.2) !important; }
.mgr-gg-cell { background: rgba(65, 10, 80, 0.4) !important; }
.mgr-gg-cell:hover { background: rgba(147, 51, 234, 0.2) !important; border-color: #a78bfa !important; }
.mgr-gg-cell.active { background: rgba(147, 51, 234, 0.3) !important; border-color: #a78bfa !important; color: #c4b5fd !important; }
.mgr-sold-row { color: rgba(228, 224, 240, 0.7) !important; }
.mgr-sold-row:hover { background: rgba(147, 51, 234, 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(147, 51, 234, 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(147, 51, 234, 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(65, 10, 80, 0.85);
  border: 1px solid rgba(168, 85, 247, 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: #e05a00;
  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(65, 10, 80, 0.5);
    border: 1px solid rgba(168, 85, 247, 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: #a78bfa !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: 10px !important;
    border: 2px solid rgba(168, 85, 247, 0.35) !important;
    background: rgba(15, 5, 25, 0.6) !important;
    box-shadow: none !important;
  }
  #search {
    padding-left: 40px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 10px !important;
  }
  #search::placeholder {
    color: rgba(255, 255, 255, 0.4) !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(168, 85, 247, 0.6);
    border-radius: 50%;
    z-index: 2;
  }
  .search-wrap::after {
    content: '';
    position: absolute;
    left: 27px;
    top: 58%;
    width: 2px;
    height: 7px;
    background: rgba(168, 85, 247, 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; }
  #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;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Shared auth modal (game-enthusiasts.com/auth.js) — 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(147, 51, 234, 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: #9333ea !important; -webkit-text-fill-color: #9333ea !important;
  border-bottom-color: #9333ea !important;
  background: rgba(147, 51, 234, 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: #9333ea !important;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 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; }