/* ================================================================
   PcKonfiguratorius — NEON MAGENTA THEME v7.0
   Deep dark base, vivid magenta/pink/violet accents
   ================================================================ */
html.magenta {
  --bg-base:        #0a0008;
  --bg-surface:     #0f000e;
  --bg-card:        #160012;
  --bg-card-hover:  #1e0019;
  --bg-elevated:    #280020;
  --bg-input:       #120010;
  --bg-glass:       rgba(15,0,14,.82);
  --bg-modal:       rgba(10,0,8,.96);

  --text-primary:   #ffe8ff;
  --text-secondary: #c47abf;
  --text-muted:     #5a1f57;
  --text-disabled:  #2a0a28;
  --text-accent:    #f472b6;

  --border-subtle:  rgba(236,72,153,.06);
  --border-default: rgba(236,72,153,.14);
  --border-strong:  rgba(236,72,153,.26);
  --border-focus:   rgba(236,72,153,.7);
  --border-hover:   rgba(236,72,153,.35);

  --accent-indigo:  #ec4899;
  --accent-blue:    #d946ef;
  --accent-cyan:    #f472b6;
  --accent-purple:  #a855f7;
  --accent-green:   #34d399;
  --accent-emerald: #10b981;
  --accent-red:     #fb7185;
  --accent-amber:   #fbbf24;
  --accent-pink:    #ec4899;
  --accent-yellow:  #f9a8d4;

  --glow-indigo:  0 0 32px rgba(236,72,153,.4);
  --glow-blue:    0 0 32px rgba(217,70,239,.35);
  --glow-green:   0 0 28px rgba(52,211,153,.28);
  --glow-red:     0 0 24px rgba(251,113,133,.3);
  --glow-amber:   0 0 20px rgba(251,191,36,.22);

  --shadow-card:  0 1px 3px rgba(0,0,0,.8), 0 0 0 1px rgba(236,72,153,.07);
  --shadow-hover: 0 8px 32px rgba(0,0,0,.7), 0 0 0 1px rgba(236,72,153,.35), 0 0 28px rgba(236,72,153,.14);
  --shadow-panel: 0 2px 16px rgba(0,0,0,.7), 0 0 0 1px rgba(236,72,153,.1);
  --shadow-float: 0 16px 48px rgba(0,0,0,.75), 0 0 0 1px rgba(236,72,153,.12);
}

/* ── Ambient background ──────────────────────────────────────── */
html.magenta body::before {
  background-image:
    radial-gradient(ellipse 900px 450px at 50% -100px, rgba(236,72,153,.12), transparent),
    radial-gradient(ellipse 600px 300px at 90% 80%, rgba(217,70,239,.08), transparent),
    radial-gradient(ellipse 400px 200px at 5% 70%, rgba(168,85,247,.06), transparent);
}

/* ── Nav ─────────────────────────────────────────────────────── */
html.magenta .nav {
  background: rgba(10,0,8,.92);
  border-bottom: 1px solid rgba(236,72,153,.16);
  box-shadow: 0 1px 0 rgba(236,72,153,.08), 0 4px 24px rgba(0,0,0,.6);
}
html.magenta .nav-logo { color: #f9a8d4; text-shadow: 0 0 20px rgba(236,72,153,.55); }
html.magenta .nav-logo .dot {
  background: #ec4899;
  box-shadow: 0 0 14px rgba(236,72,153,.9), 0 0 4px #ec4899;
}

/* ── Progress bar ────────────────────────────────────────────── */
html.magenta .progress-fill {
  background: linear-gradient(90deg, #ec4899, #d946ef, #f472b6);
}

/* ── Product cards ───────────────────────────────────────────── */
html.magenta .product-card:hover {
  border-color: rgba(236,72,153,.4);
  box-shadow: 0 0 20px rgba(236,72,153,.15), 0 8px 32px rgba(0,0,0,.7);
}
html.magenta .product-card.selected {
  border-color: rgba(52,211,153,.5);
  box-shadow: 0 0 20px rgba(52,211,153,.18);
}

/* ── Mode tabs ───────────────────────────────────────────────── */
html.magenta .mode-tab.active {
  background: linear-gradient(135deg, #ec4899, #d946ef);
  box-shadow: 0 0 16px rgba(236,72,153,.45);
}

/* ── CTA button ──────────────────────────────────────────────── */
html.magenta .cta-btn.active {
  background: linear-gradient(135deg, #ec4899, #d946ef);
  box-shadow: 0 4px 20px rgba(236,72,153,.45);
}

/* ── Sticky bar ──────────────────────────────────────────────── */
html.magenta .build-sticky-bar {
  background: rgba(10,0,8,.92);
  border-top-color: rgba(236,72,153,.16);
}
html.magenta .build-sticky-bar-cta {
  background: linear-gradient(135deg, #ec4899, #d946ef);
  box-shadow: 0 4px 16px rgba(236,72,153,.4);
}

/* ── Accordion ───────────────────────────────────────────────── */
html.magenta .accordion-header[aria-expanded="true"] {
  background: rgba(236,72,153,.07);
}
html.magenta .accordion-header.has-selection {
  background: rgba(52,211,153,.04);
}

/* ── Sort bar ────────────────────────────────────────────────── */
html.magenta .sort-btn.active {
  color: #f472b6;
  background: rgba(236,72,153,.12);
  border-color: rgba(236,72,153,.3);
}

/* ── Shipping & terminals ────────────────────────────────────── */
html.magenta .ship-method-card.active {
  border-color: rgba(236,72,153,.4);
  background: rgba(236,72,153,.08);
}
html.magenta .terminal-item:hover {
  background: rgba(236,72,153,.08);
  border-color: rgba(236,72,153,.25);
  color: var(--text-primary);
}
html.magenta .terminal-item.selected-terminal {
  background: rgba(52,211,153,.1);
  border-color: rgba(52,211,153,.4);
  color: #6ee7b7;
}

/* ── Footer ──────────────────────────────────────────────────── */
html.magenta .footer { background: var(--bg-surface); }

/* ── Scrollbar ───────────────────────────────────────────────── */
html.magenta ::-webkit-scrollbar-thumb { background: rgba(236,72,153,.2); }
html.magenta ::-webkit-scrollbar-thumb:hover { background: rgba(236,72,153,.35); }

/* ── Game build wizard ───────────────────────────────────────── */
html.magenta .gbh {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(236,72,153,.12) 0%, transparent 70%),
    var(--bg-card);
  border-color: rgba(236,72,153,.2);
}
html.magenta .gbh-body { background: rgba(0,0,0,.06); }
html.magenta .gbh-game:hover { border-color: rgba(236,72,153,.4); }
html.magenta .gbh-game.active {
  border-color: #ec4899;
  box-shadow: 0 0 0 2px rgba(236,72,153,.35), 0 8px 30px rgba(0,0,0,.3);
}
html.magenta .gbh-tier.active,
html.magenta .game-tier-btn.active {
  background: rgba(236,72,153,.1);
  border-color: rgba(236,72,153,.45);
  box-shadow: 0 0 0 1px rgba(236,72,153,.2);
}
html.magenta .gbh-apply,
html.magenta .game-apply-btn {
  background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%);
  box-shadow: 0 4px 20px rgba(236,72,153,.35);
}
html.magenta .gbh-apply:hover,
html.magenta .game-apply-btn:hover {
  background: linear-gradient(135deg, #db2777 0%, #9333ea 100%);
  box-shadow: 0 8px 28px rgba(236,72,153,.5);
}

/* ── Tier badges ─────────────────────────────────────────────── */
html.magenta .tier-badge-low    { color: #86efac; }
html.magenta .tier-badge-medium { color: #fcd34d; }
html.magenta .tier-badge-high   { color: #f9a8d4; }
html.magenta .tier-badge-ultra  { color: #e879f9; }

/* ── Theme toggle button ─────────────────────────────────────── */
html.magenta .theme-toggle-btn { color: #c47abf; }
html.magenta .theme-toggle-btn:hover,
html.magenta .theme-toggle-btn.active {
  color: #f9a8d4;
  background: rgba(236,72,153,.12);
  border-color: rgba(236,72,153,.3);
}
html.magenta .theme-tab.active {
  background: rgba(236,72,153,.15);
  border-color: rgba(236,72,153,.4);
  color: #f472b6;
}