/* ================================================================
   PcKonfiguratorius — CYBERPUNK THEME v7.0
   Neon cyan/blue, grid overlay, glitch aesthetic
   ================================================================ */
html.cyberpunk {
  --bg-base:        #010308;
  --bg-surface:     #030810;
  --bg-card:        #060d1a;
  --bg-card-hover:  #0a1525;
  --bg-elevated:    #0d1e36;
  --bg-input:       #040b18;
  --bg-glass:       rgba(3,8,16,.82);
  --border-subtle:  rgba(0,212,255,.06);
  --border-default: rgba(0,212,255,.12);
  --border-strong:  rgba(0,212,255,.22);
  --border-focus:   rgba(0,212,255,.7);
  --text-primary:   #e0f4ff;
  --text-secondary: #6ba8cc;
  --text-muted:     #1e4060;
  --text-accent:    #00d4ff;
  --accent-indigo:  #00d4ff;
  --accent-blue:    #0088ff;
  --accent-cyan:    #00ffee;
  --accent-purple:  #bf00ff;
  --accent-green:   #00ff88;
  --accent-emerald: #00cc6a;
  --accent-red:     #ff003c;
  --accent-amber:   #ffaa00;
  --accent-pink:    #ff00aa;
  --glow-indigo:  0 0 30px rgba(0,212,255,.35);
  --glow-blue:    0 0 30px rgba(0,136,255,.35);
  --glow-green:   0 0 30px rgba(0,255,136,.3);
  --shadow-card:  0 1px 3px rgba(0,0,0,.8), 0 0 0 1px rgba(0,212,255,.07);
  --shadow-hover: 0 6px 32px rgba(0,0,0,.7), 0 0 0 1px rgba(0,212,255,.28), 0 0 20px rgba(0,212,255,.1);
  --shadow-panel: 0 2px 16px rgba(0,0,0,.7), 0 0 0 1px rgba(0,212,255,.1);
}
html.cyberpunk body::before {
  background-image:
    radial-gradient(ellipse 800px 400px at 30% -80px, rgba(0,212,255,.09), transparent),
    radial-gradient(ellipse 600px 300px at 80% 90%, rgba(0,136,255,.07), transparent),
    radial-gradient(ellipse 400px 200px at 10% 60%, rgba(191,0,255,.05), transparent);
}
html.cyberpunk body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(0,212,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.022) 1px, transparent 1px);
  background-size: 44px 44px;
}
html.cyberpunk .nav {
  background: rgba(1,3,8,.92);
  border-bottom: 1px solid rgba(0,212,255,.15);
  box-shadow: 0 1px 0 rgba(0,212,255,.08), 0 4px 24px rgba(0,0,0,.6);
}
html.cyberpunk .nav-logo { color: #00d4ff; text-shadow: 0 0 20px rgba(0,212,255,.5); }
html.cyberpunk .nav-logo .dot { background: #00d4ff; box-shadow: 0 0 14px rgba(0,212,255,.9), 0 0 4px #00d4ff; }
html.cyberpunk .progress-fill { background: linear-gradient(90deg, #00d4ff, #0088ff, #00ffee); }
html.cyberpunk .product-card:hover { border-color: rgba(0,212,255,.4); box-shadow: 0 0 20px rgba(0,212,255,.15), 0 8px 32px rgba(0,0,0,.7); }
html.cyberpunk .product-card.selected { border-color: rgba(0,255,136,.5); box-shadow: 0 0 20px rgba(0,255,136,.2); }
html.cyberpunk .cta-btn.active { background: linear-gradient(135deg, #00d4ff, #0088ff); box-shadow: 0 4px 20px rgba(0,212,255,.4); }
html.cyberpunk .mode-tab.active { background: linear-gradient(135deg, #00d4ff, #0088ff); box-shadow: 0 0 16px rgba(0,212,255,.4); }