:root {
  --background: 248 43% 98%;
  --foreground: 248 48% 9%;
  --primary: 267 92% 64%;
  --primary-foreground: 0 0% 100%;
  --secondary: 174 84% 48%;
  --secondary-foreground: 248 48% 8%;
  --muted: 250 28% 91%;
  --muted-foreground: 249 12% 42%;
  --destructive: 348 88% 55%;
  --destructive-foreground: 0 0% 100%;
  --border: 252 24% 82%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 24px rgba(26, 14, 58, .12);
  --shadow-md: 0 18px 44px rgba(26, 14, 58, .18);
  --shadow-lg: 0 28px 80px rgba(26, 14, 58, .34);
  --transition-fast: 150ms ease;
  --transition-smooth: 320ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
}
.dark {
  --background: 252 56% 5%;
  --foreground: 248 45% 96%;
  --primary: 267 94% 67%;
  --primary-foreground: 0 0% 100%;
  --secondary: 174 88% 50%;
  --secondary-foreground: 252 56% 5%;
  --muted: 254 34% 14%;
  --muted-foreground: 248 22% 74%;
  --destructive: 348 88% 62%;
  --destructive-foreground: 0 0% 100%;
  --border: 260 32% 26%;
  --card: 254 42% 9%;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
input, select, textarea { font-size: max(16px, 1rem); }
.safe-top { padding-top: max(16px, env(safe-area-inset-top)); }
.safe-bottom { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.app-shell { padding-bottom: max(128px, calc(112px + env(safe-area-inset-bottom))); }
.glass {
  background: color-mix(in srgb, hsl(var(--card)) 82%, transparent);
  border: 1px solid hsl(var(--border));
  backdrop-filter: blur(24px);
}
.gradient-orb {
  position: fixed;
  inset: -120px auto auto -110px;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  background: radial-gradient(circle, hsla(267, 94%, 67%, .42), transparent 66%);
  pointer-events: none;
}
.gradient-orb.two {
  inset: auto -120px 8% auto;
  background: radial-gradient(circle, hsla(174, 88%, 50%, .24), transparent 66%);
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
@media (max-width: 380px) {
  :root { --radius-lg: 26px; --radius-md: 19px; }
  .app-shell { padding-left: 10px; padding-right: 58px; }
}
@media (max-width: 340px) {
  .app-shell { padding-left: 8px; padding-right: 52px; }
}
@keyframes floatIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.float-in { animation: floatIn .45s var(--transition-smooth) both; }
@keyframes scan { 0% { transform: translateY(-8%); opacity: .15; } 50% { opacity: .7; } 100% { transform: translateY(108%); opacity: .15; } }
.scan-line { animation: scan 2.2s ease-in-out infinite; }