:root {
  --background: 231 52% 97%;
  --foreground: 232 35% 8%;
  --primary: 262 100% 62%;
  --primary-foreground: 0 0% 100%;
  --secondary: 184 88% 47%;
  --secondary-foreground: 232 35% 8%;
  --muted: 232 24% 88%;
  --muted-foreground: 232 16% 38%;
  --destructive: 344 90% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 232 28% 82%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 24px hsl(232 35% 8% / .08);
  --shadow-md: 0 18px 44px hsl(232 35% 8% / .12);
  --shadow-lg: 0 28px 80px hsl(262 100% 40% / .22);
  --transition-fast: 160ms cubic-bezier(.2,.8,.2,1);
  --transition-smooth: 420ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
}
.dark {
  --background: 235 44% 5%;
  --foreground: 220 34% 96%;
  --primary: 263 100% 68%;
  --primary-foreground: 0 0% 100%;
  --secondary: 184 92% 52%;
  --secondary-foreground: 235 44% 5%;
  --muted: 235 24% 16%;
  --muted-foreground: 222 18% 70%;
  --destructive: 344 95% 64%;
  --destructive-foreground: 0 0% 100%;
  --border: 235 22% 22%;
  --card: 235 36% 9%;
  --shadow-sm: 0 8px 24px hsl(0 0% 0% / .28);
  --shadow-md: 0 18px 44px hsl(0 0% 0% / .34);
  --shadow-lg: 0 28px 90px hsl(263 100% 60% / .28);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: hsl(var(--background)); color: hsl(var(--foreground)); }
body { margin: 0; min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at 20% 5%, hsl(var(--primary) / .24), transparent 30%), radial-gradient(circle at 82% 12%, hsl(var(--secondary) / .20), transparent 26%), hsl(var(--background)); color: hsl(var(--foreground)); overflow-x: hidden; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
input, textarea, select { font-size: max(16px, 1rem); }
button, .tap-target { min-height: 44px; min-width: 44px; }
.glass { background: linear-gradient(135deg, hsl(var(--card) / .78), hsl(var(--card) / .46)); border: 1px solid hsl(var(--border) / .72); box-shadow: var(--shadow-md); backdrop-filter: blur(22px); }
.neon-border { position: relative; overflow: hidden; }
.neon-border::before { content: ''; position: absolute; inset: -1px; background: linear-gradient(120deg, hsl(var(--primary)), hsl(var(--secondary)), hsl(308 100% 58%)); opacity: .38; z-index: -1; filter: blur(18px); }
.editor-area h1 { font-size: 2rem; font-weight: 800; letter-spacing: -.04em; }
.editor-area h2 { font-size: 1.35rem; font-weight: 750; margin-top: 1.2rem; }
.editor-area p { line-height: 1.8; color: hsl(var(--foreground) / .86); }
.editor-area code { background: hsl(var(--primary) / .12); color: hsl(var(--primary)); padding: .1rem .35rem; border-radius: 8px; }
.safe-bottom { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
@keyframes floaty { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }
.floaty { animation: floaty 5s ease-in-out infinite; }
@media (min-width: 1024px) { .safe-bottom { padding-bottom: 2rem; } }