:root {
  --background: 40 18% 97%; --foreground: 230 14% 7%; --primary: 38 72% 58%; --primary-foreground: 225 18% 7%; --secondary: 222 14% 14%; --secondary-foreground: 42 40% 96%; --muted: 220 8% 42%; --destructive: 0 70% 52%; --border: 42 18% 82%; --card: 42 28% 94%; --shadow-sm: 0 8px 24px rgba(0,0,0,.18); --shadow-md: 0 18px 55px rgba(0,0,0,.28); --shadow-lg: 0 34px 90px rgba(0,0,0,.42); --transition-fast: 160ms ease; --transition-smooth: 420ms cubic-bezier(.2,.8,.2,1); --radius-sm: 12px; --radius-md: 20px; --radius-lg: 32px;
}
.dark { --background: 228 18% 4%; --foreground: 42 38% 94%; --primary: 39 84% 62%; --primary-foreground: 225 22% 6%; --secondary: 225 13% 12%; --secondary-foreground: 42 38% 94%; --muted: 225 8% 62%; --destructive: 0 76% 58%; --border: 42 18% 18%; --card: 224 16% 8%; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; 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% 10%, hsla(var(--primary), .14), transparent 30%), radial-gradient(circle at 80% 0%, rgba(255,255,255,.07), transparent 28%), linear-gradient(180deg, rgba(255,255,255,.025), transparent 45%); z-index: -1; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
button:disabled, input:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
.glass { background: rgba(16,17,22,.62); border: 1px solid hsla(var(--border), .72); backdrop-filter: blur(20px); box-shadow: var(--shadow-sm); }
.lux-card { background: linear-gradient(145deg, hsla(var(--card), .98), hsla(var(--secondary), .72)); border: 1px solid hsla(var(--border), .65); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth); }
.lux-card:hover { transform: translateY(-4px); border-color: hsla(var(--primary), .48); box-shadow: var(--shadow-md); }
.hayal-mark { display:grid; place-items:center; height:2.75rem; width:2.75rem; border-radius:999px; border:1px solid hsla(var(--primary),.58); background:linear-gradient(145deg, hsla(var(--primary),.2), rgba(255,255,255,.03)); color:hsl(var(--primary)); font-size:.72rem; font-weight:800; letter-spacing:.16em; box-shadow: inset 0 0 20px rgba(255,255,255,.04), var(--shadow-sm); }
.car-art { position: relative; overflow: hidden; background: radial-gradient(circle at 55% 22%, hsla(var(--primary), .24), transparent 28%), linear-gradient(135deg, #101116, #050506 60%, #17110a); }
.car-art:before { content: ''; position: absolute; width: 74%; height: 28%; left: 13%; bottom: 23%; border-radius: 70% 70% 24% 24%; background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.04)), linear-gradient(135deg, #3a3b42, #050506 58%); box-shadow: 0 28px 60px rgba(0,0,0,.55); }
.car-art:after { content: ''; position: absolute; width: 72%; height: 2px; left: 14%; bottom: 32%; background: linear-gradient(90deg, transparent, hsla(var(--primary), .9), transparent); filter: blur(.4px); }
.wheel { position: absolute; bottom: 18%; width: 13%; aspect-ratio: 1; border-radius: 999px; background: radial-gradient(circle, #151515 0 34%, #c9a24a 35% 40%, #050505 41% 100%); border: 2px solid rgba(255,255,255,.15); }
.wheel.left { left: 25%; } .wheel.right { right: 25%; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.focus-ring:focus { outline: 2px solid hsl(var(--primary)); outline-offset: 3px; }