:root {
  --background: 246 50% 6%;
  --foreground: 186 100% 94%;
  --primary: 178 100% 52%;
  --primary-foreground: 247 54% 7%;
  --secondary: 302 96% 62%;
  --secondary-foreground: 250 50% 8%;
  --muted: 244 24% 19%;
  --muted-foreground: 190 28% 72%;
  --destructive: 350 100% 62%;
  --destructive-foreground: 0 0% 100%;
  --border: 188 55% 35%;
  --card: 247 42% 10%;
  --shadow-sm: 0 6px 18px rgba(0, 255, 240, 0.10);
  --shadow-md: 0 16px 45px rgba(255, 44, 246, 0.18);
  --shadow-lg: 0 28px 90px rgba(0, 255, 240, 0.22);
  --transition-fast: 140ms cubic-bezier(.2,.8,.2,1);
  --transition-smooth: 280ms cubic-bezier(.16,1,.3,1);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
}

.dark {
  --background: 246 50% 6%;
  --foreground: 186 100% 94%;
  --primary: 178 100% 52%;
  --primary-foreground: 247 54% 7%;
  --secondary: 302 96% 62%;
  --secondary-foreground: 250 50% 8%;
  --muted: 244 24% 19%;
  --muted-foreground: 190 28% 72%;
  --destructive: 350 100% 62%;
  --destructive-foreground: 0 0% 100%;
  --border: 188 55% 35%;
  --card: 247 42% 10%;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: hsl(var(--background)); scroll-behavior: smooth; }
body {
  min-height: 100%;
  margin: 0;
  background:
    radial-gradient(circle at 18% 8%, hsla(var(--secondary), .20), transparent 34%),
    radial-gradient(circle at 90% 18%, hsla(var(--primary), .16), transparent 38%),
    linear-gradient(180deg, hsl(var(--background)), hsl(248 53% 4%));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
button, a, input, select { -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-size: max(16px, 1rem); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 3px;
}

.glass {
  background: linear-gradient(135deg, hsla(var(--card), .88), hsla(var(--muted), .48));
  border: 1px solid hsla(var(--border), .42);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(18px);
}

.holo-border { position: relative; overflow: hidden; }
.holo-border::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(120deg, transparent, hsla(var(--primary), .55), hsla(var(--secondary), .42), transparent);
  opacity: .48;
  filter: blur(12px);
  pointer-events: none;
}

.scanlines::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px);
  mix-blend-mode: overlay;
  opacity: .35;
}

.glitch-title {
  text-shadow: 2px 0 hsla(var(--primary), .85), -2px 0 hsla(var(--secondary), .72), 0 0 24px hsla(var(--primary), .35);
  animation: glitchPulse 2.4s infinite steps(2, end);
}

@keyframes glitchPulse {
  0%, 88%, 100% { transform: translate(0); filter: hue-rotate(0deg); }
  90% { transform: translate(1px, -1px); filter: hue-rotate(20deg); }
  92% { transform: translate(-2px, 1px); filter: hue-rotate(-18deg); }
  94% { transform: translate(2px, 0); }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(.96) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.pop-in { animation: popIn var(--transition-smooth); }
.pulse-ring { animation: pulseRing 1.4s infinite; }
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 hsla(var(--primary), .38), var(--shadow-lg); }
  70% { box-shadow: 0 0 0 18px hsla(var(--primary), 0), var(--shadow-lg); }
  100% { box-shadow: 0 0 0 0 hsla(var(--primary), 0), var(--shadow-lg); }
}

.bottom-safe { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
.top-safe { padding-top: calc(0.75rem + env(safe-area-inset-top)); }