:root {
  --background: 230 42% 96%; --foreground: 229 35% 9%; --primary: 176 100% 46%; --primary-foreground: 229 40% 6%; --secondary: 275 100% 66%; --secondary-foreground: 0 0% 100%; --muted: 224 18% 86%; --muted-foreground: 225 16% 36%; --destructive: 348 100% 62%; --destructive-foreground: 0 0% 100%; --border: 224 20% 78%; --card: 0 0% 100%; --shadow-sm: 0 8px 24px rgba(0, 229, 255, 0.12); --shadow-md: 0 18px 50px rgba(122, 92, 255, 0.20); --shadow-lg: 0 28px 90px rgba(0, 229, 255, 0.28); --radius-sm: 14px; --radius-md: 22px; --radius-lg: 32px;
}
.dark { --background: 232 48% 5%; --foreground: 186 100% 96%; --primary: 181 100% 50%; --primary-foreground: 230 55% 6%; --secondary: 274 100% 68%; --secondary-foreground: 0 0% 100%; --muted: 229 28% 16%; --muted-foreground: 220 16% 73%; --destructive: 348 100% 64%; --destructive-foreground: 0 0% 100%; --border: 188 80% 52%; --card: 231 38% 10%; }
.high-contrast { --foreground: 0 0% 100%; --muted-foreground: 186 100% 88%; --border: 181 100% 62%; --primary: 176 100% 58%; --secondary: 285 100% 76%; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
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, "Segoe UI", sans-serif; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 18% 5%, hsla(var(--primary), .34), transparent 28%), radial-gradient(circle at 88% 18%, hsla(var(--secondary), .28), transparent 30%), radial-gradient(circle at 48% 98%, rgba(47, 255, 178, .18), transparent 35%), linear-gradient(180deg, rgba(255,255,255,.035), transparent 35%); z-index: -2; animation: aurora 9s ease-in-out infinite alternate; }
body::after { content: ""; position: fixed; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 82%); pointer-events: none; z-index: -1; }
button, a { min-height: 44px; } button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; } input, textarea, select { font-size: max(16px, 1rem); color: hsl(var(--foreground)); }
.glass { background: linear-gradient(145deg, hsla(var(--card), .78), hsla(var(--card), .42)); border: 1px solid hsla(var(--border), .28); box-shadow: var(--shadow-md); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.high-contrast .glass { border-width: 2px; background: linear-gradient(145deg, hsla(var(--card), .94), hsla(var(--card), .72)); }
.neon-text { text-shadow: 0 0 18px hsla(var(--primary), .7), 0 0 34px hsla(var(--secondary), .35); } .neon-border { box-shadow: inset 0 0 0 1px hsla(var(--primary), .24), 0 0 28px hsla(var(--primary), .18); }
.floaty { animation: floaty 5s ease-in-out infinite; } .pulse-glow { animation: pulseGlow 2.4s ease-in-out infinite; } .score-pop { animation: scorePop .65s cubic-bezier(.2,1.35,.25,1); } .scanline { position: relative; overflow: hidden; } .scanline::after { content: ""; position: absolute; left: -20%; right: -20%; top: -40%; height: 42%; background: linear-gradient(180deg, transparent, rgba(0,255,255,.12), transparent); transform: rotate(8deg); animation: scan 4.8s linear infinite; }
.page-enter { animation: pageEnter .34s ease both; } .lock-shake:hover { animation: lockShake .55s ease both; } .whatsapp-float { animation: whatsappPulse 2.2s ease-in-out infinite; }
.whatsapp-float::before { content: ""; position: absolute; inset: -7px; z-index: -1; border-radius: 1.35rem; background: radial-gradient(circle, rgba(37,211,102,.45), transparent 66%); animation: whatsappHalo 2.2s ease-in-out infinite; }
.safe-bottom { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } .bottom-nav-safe { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.logo-spin { animation: logoSpin 1.3s ease-in-out infinite alternate, pulseGlow 2.4s ease-in-out infinite; } .loading-bar { animation: loadingBar 1.15s ease-in-out infinite; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
@keyframes pageEnter { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes lockShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
@keyframes logoSpin { from { transform: rotate(-6deg) scale(.98); } to { transform: rotate(6deg) scale(1.04); } }
@keyframes loadingBar { 0% { transform: translateX(-120%); } 100% { transform: translateX(170%); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes pulseGlow { 0%,100% { box-shadow: 0 0 18px hsla(var(--primary), .2); } 50% { box-shadow: 0 0 42px hsla(var(--primary), .45); } } @keyframes whatsappPulse { 0%,100% { transform: translateY(0) scale(1); box-shadow: 0 0 24px rgba(37,211,102,.36); } 50% { transform: translateY(-4px) scale(1.04); box-shadow: 0 0 42px rgba(37,211,102,.65); } } @keyframes whatsappHalo { 0%,100% { opacity: .42; transform: scale(.95); } 50% { opacity: .9; transform: scale(1.1); } } @keyframes scorePop { 0% { transform: scale(.84); opacity: .25; } 55% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes scan { 0% { transform: translateY(-150%) rotate(8deg); } 100% { transform: translateY(420%) rotate(8deg); } } @keyframes aurora { from { filter: hue-rotate(0deg); transform: scale(1); } to { filter: hue-rotate(18deg); transform: scale(1.04); } }
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background: hsla(var(--primary), .38); border-radius: 999px; }