:root {
  --background: 210 40% 98%;
  --foreground: 225 30% 14%;
  --primary: 257 84% 61%;
  --secondary: 190 85% 46%;
  --muted: 220 18% 92%;
  --destructive: 0 79% 61%;
  --border: 220 18% 84%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 20px hsla(257, 84%, 61%, 0.08);
  --shadow-md: 0 18px 40px hsla(225, 30%, 14%, 0.12);
  --shadow-lg: 0 24px 60px hsla(257, 84%, 61%, 0.2);
  --transition-fast: 120ms ease;
  --transition-smooth: 240ms ease;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

.dark {
  --background: 228 27% 9%;
  --foreground: 210 40% 96%;
  --primary: 265 89% 72%;
  --secondary: 189 92% 54%;
  --muted: 228 19% 18%;
  --destructive: 0 84% 67%;
  --border: 228 18% 24%;
  --card: 228 24% 12%;
  --shadow-sm: 0 8px 20px hsla(265, 89%, 72%, 0.1);
  --shadow-md: 0 18px 40px hsla(228, 40%, 2%, 0.35);
  --shadow-lg: 0 24px 60px hsla(265, 89%, 72%, 0.22);
}

* {
  box-sizing: border-box;
}

html, body, #root {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  background:
    radial-gradient(circle at top right, hsla(257, 84%, 61%, 0.14), transparent 28%),
    radial-gradient(circle at bottom left, hsla(189, 92%, 54%, 0.12), transparent 24%),
    hsl(var(--background));
  transition: background var(--transition-smooth), color var(--transition-smooth);
}

a {
  color: inherit;
  text-decoration: none;
}

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

::selection {
  background: hsla(257, 84%, 61%, 0.24);
}

.panel {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.soft-panel {
  background: hsla(0, 0%, 100%, 0.55);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  backdrop-filter: blur(14px);
}

.dark .soft-panel {
  background: hsla(228, 24%, 12%, 0.78);
}

.code-bg {
  background: linear-gradient(180deg, hsla(228, 27%, 9%, 0.96), hsla(230, 24%, 12%, 0.98));
  color: hsl(210 40% 96%);
}

.animate-pop {
  animation: pop-in 360ms ease;
}

@keyframes pop-in {
  0% { transform: scale(0.96); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.progress-stripes {
  background-image: linear-gradient(45deg, hsla(0, 0%, 100%, 0.12) 25%, transparent 25%, transparent 50%, hsla(0, 0%, 100%, 0.12) 50%, hsla(0, 0%, 100%, 0.12) 75%, transparent 75%, transparent);
  background-size: 18px 18px;
}

.editor-lines {
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}