:root {
  --background: 222 48% 6%;
  --foreground: 214 38% 96%;
  --primary: 207 100% 54%;
  --primary-foreground: 220 50% 5%;
  --secondary: 165 100% 48%;
  --secondary-foreground: 220 50% 5%;
  --muted: 222 28% 18%;
  --muted-foreground: 216 18% 70%;
  --destructive: 354 90% 62%;
  --destructive-foreground: 0 0% 100%;
  --border: 219 28% 24%;
  --card: 222 42% 10%;
  --shadow-sm: 0 8px 22px rgba(0, 0, 0, .28);
  --shadow-md: 0 18px 50px rgba(0, 72, 255, .18);
  --shadow-lg: 0 28px 90px rgba(0, 164, 255, .24);
  --transition-fast: 150ms ease;
  --transition-smooth: 280ms cubic-bezier(.2, .8, .2, 1);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
}

.dark {
  --background: 222 48% 6%;
  --foreground: 214 38% 96%;
  --primary: 207 100% 54%;
  --primary-foreground: 220 50% 5%;
  --secondary: 165 100% 48%;
  --secondary-foreground: 220 50% 5%;
  --muted: 222 28% 18%;
  --muted-foreground: 216 18% 70%;
  --destructive: 354 90% 62%;
  --destructive-foreground: 0 0% 100%;
  --border: 219 28% 24%;
  --card: 222 42% 10%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: hsl(var(--foreground));
  background:
    radial-gradient(circle at 12% 8%, rgba(0, 145, 255, .28), transparent 34%),
    radial-gradient(circle at 84% 18%, rgba(0, 255, 190, .18), transparent 30%),
    linear-gradient(135deg, hsl(var(--background)), #020713 58%, #050b19);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.glass {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px);
}

.blue-grid {
  background-image:
    linear-gradient(rgba(43, 160, 255, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 160, 255, .12) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
}

.neon-text {
  text-shadow: 0 0 28px rgba(0, 145, 255, .52);
}

.scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: hsla(var(--primary), .45); border-radius: 999px; }
.scrollbar-thin::-webkit-scrollbar-track { background: hsla(var(--muted), .55); }

@keyframes pulseLine {
  0%, 100% { transform: translateX(-45%); opacity: .35; }
  50% { transform: translateX(45%); opacity: 1; }
}

.energy-line::after {
  content: "";
  position: absolute;
  inset: auto 12px 0 12px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, hsl(var(--primary)), hsl(var(--secondary)), transparent);
  animation: pulseLine 2.2s infinite;
}

.preview-card h1, .preview-card h2, .preview-card h3 { font-weight: 900; letter-spacing: -.04em; }
.preview-card p { color: rgba(255,255,255,.74); }