:root {
  --background: 150 30% 98%;
  --foreground: 150 32% 6%;
  --primary: 139 100% 55%;
  --secondary: 150 18% 88%;
  --muted: 150 9% 38%;
  --destructive: 0 85% 58%;
  --border: 150 18% 78%;
  --card: 150 35% 96%;
  --shadow-sm: 0 2px 10px hsl(150 80% 8% / 0.08);
  --shadow-md: 0 10px 30px hsl(150 80% 8% / 0.16);
  --shadow-lg: 0 22px 70px hsl(139 100% 20% / 0.24);
  --transition-fast: 140ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.65rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
}

.dark {
  --background: 150 28% 2%;
  --foreground: 136 80% 94%;
  --primary: 139 100% 55%;
  --secondary: 150 28% 12%;
  --muted: 148 16% 62%;
  --destructive: 0 86% 64%;
  --border: 145 30% 17%;
  --card: 150 36% 6%;
  --shadow-sm: 0 2px 12px hsl(139 100% 40% / 0.10);
  --shadow-md: 0 10px 35px hsl(139 100% 35% / 0.15);
  --shadow-lg: 0 25px 90px hsl(139 100% 45% / 0.22);
}

* { box-sizing: border-box; }
html, body, #root { min-height: 100%; height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 12%, hsl(var(--primary) / 0.16), transparent 30rem),
    radial-gradient(circle at 92% 82%, hsl(var(--primary) / 0.11), transparent 24rem),
    linear-gradient(135deg, transparent 0 48%, hsl(var(--primary) / 0.035) 49% 51%, transparent 52%);
}

input, textarea, select { font-size: max(16px, 1rem); }
button { touch-action: manipulation; }
button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

.cobra-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: black;
  background: hsl(var(--primary));
  font-weight: 1000;
  box-shadow: 0 0 28px hsl(var(--primary) / 0.55), inset 0 0 10px hsl(0 0% 100% / 0.32);
}

.cobra-loader {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 4px solid hsl(var(--border));
  border-top-color: hsl(var(--primary));
  box-shadow: 0 0 35px hsl(var(--primary) / 0.42);
  animation: spin 900ms linear infinite;
}

.cobra-pulse {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 999px;
  background: hsl(var(--primary));
  box-shadow: 0 0 18px hsl(var(--primary));
  animation: pulse 900ms ease-in-out infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(0.85); opacity: 0.55; } 50% { transform: scale(1.25); opacity: 1; } }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: hsl(var(--primary) / 0.35); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 640px) {
  body { overscroll-behavior: none; }
}