:root {
  --background: 215 48% 97%;
  --foreground: 220 42% 10%;
  --primary: 24 95% 53%;
  --primary-foreground: 0 0% 100%;
  --secondary: 171 72% 35%;
  --secondary-foreground: 0 0% 100%;
  --muted: 216 28% 90%;
  --muted-foreground: 218 16% 38%;
  --destructive: 0 77% 54%;
  --destructive-foreground: 0 0% 100%;
  --border: 216 24% 84%;
  --card: 0 0% 100%;
  --card-foreground: 220 42% 10%;
  --shadow-sm: 0 6px 18px hsl(220 40% 14% / 0.08);
  --shadow-md: 0 16px 40px hsl(220 40% 14% / 0.12);
  --shadow-lg: 0 28px 70px hsl(220 40% 14% / 0.18);
  --transition-fast: 150ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
}

.dark {
  --background: 220 48% 7%;
  --foreground: 210 35% 96%;
  --primary: 25 98% 58%;
  --primary-foreground: 220 48% 7%;
  --secondary: 174 72% 44%;
  --secondary-foreground: 220 48% 7%;
  --muted: 219 32% 16%;
  --muted-foreground: 214 18% 72%;
  --destructive: 0 78% 61%;
  --destructive-foreground: 0 0% 100%;
  --border: 219 28% 22%;
  --card: 220 40% 11%;
  --card-foreground: 210 35% 96%;
  --shadow-sm: 0 6px 18px hsl(0 0% 0% / 0.25);
  --shadow-md: 0 16px 40px hsl(0 0% 0% / 0.34);
  --shadow-lg: 0 28px 70px hsl(0 0% 0% / 0.45);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: hsl(var(--background)); }
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at top left, hsl(var(--primary) / 0.16), transparent 32rem),
    radial-gradient(circle at top right, hsl(var(--secondary) / 0.14), transparent 28rem),
    hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { min-height: 44px; }
input, select, textarea { font-size: max(16px, 1rem); }
.safe-top { padding-top: env(safe-area-inset-top); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
.card-shine { position: relative; overflow: hidden; }
.card-shine::before {
  content: "";
  position: absolute;
  inset: -60% auto auto -60%;
  width: 120%;
  height: 120%;
  background: linear-gradient(135deg, transparent 35%, hsl(0 0% 100% / 0.28), transparent 65%);
  transform: rotate(18deg);
  transition: transform var(--transition-smooth);
  pointer-events: none;
}
.card-shine:hover::before { transform: translateX(70%) rotate(18deg); }
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { scrollbar-width: none; }