html, body { background:#080B14; color:#F0F2F5; font-family:"Barlow",sans-serif; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(129,140,248,0.3); border-radius: 3px; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237B8BA3' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }

/* Answer buttons */
.answer-btn { transition: all 180ms cubic-bezier(0.16,1,0.3,1); }
.answer-btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(129,140,248,0.15); }
.answer-btn:not(:disabled):active { transform: translateY(0) scale(0.98); }

/* Animations */
@keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.fade-up { animation: fadeUp 400ms cubic-bezier(0.16,1,0.3,1) both; }

@keyframes breathe { 0%,100% { opacity:0.4; transform: scale(1); } 50% { opacity:0.7; transform: scale(1.05); } }

@keyframes pulse-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(129,140,248,0), 0 0 30px rgba(129,140,248,0); }
  50% { box-shadow: 0 0 0 1px rgba(129,140,248,0.15), 0 0 30px rgba(129,140,248,0.08); }
}
.listening-pulse { animation: pulse-glow 2.5s ease-in-out infinite; }

/* Ambient blobs */
.blob { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; }
.blob-1 { width:400px; height:400px; background:radial-gradient(circle,rgba(129,140,248,0.15),transparent 70%); top:-100px; left:-100px; animation: breathe 8s ease-in-out infinite; }
.blob-2 { width:350px; height:350px; background:radial-gradient(circle,rgba(52,211,153,0.1),transparent 70%); bottom:-80px; right:-60px; animation: breathe 10s ease-in-out 2s infinite; }
.blob-3 { width:300px; height:300px; background:radial-gradient(circle,rgba(240,197,94,0.08),transparent 70%); top:40%; right:20%; animation: breathe 12s ease-in-out 4s infinite; }

/* Noise overlay */
.noise { position:fixed; inset:0; pointer-events:none; opacity:0.03; z-index:100; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Glassmorphism */
.glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.06); }
.glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); }

/* Gradient text */
.gradient-text { background: linear-gradient(135deg, #818CF8 0%, #67E8F9 50%, #34D399 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Tab active indicator */
.tab-active { position:relative; }
.tab-active::after { content:''; position:absolute; bottom:0; left:20%; right:20%; height:2px; background:linear-gradient(90deg,transparent,#818CF8,transparent); border-radius:1px; }

/* Start button gradient */
.start-btn { background: linear-gradient(135deg, rgba(129,140,248,0.2) 0%, rgba(52,211,153,0.15) 100%); border: 1px solid rgba(129,140,248,0.3); transition: all 250ms cubic-bezier(0.16,1,0.3,1); }
.start-btn:hover { background: linear-gradient(135deg, rgba(129,140,248,0.3) 0%, rgba(52,211,153,0.2) 100%); border-color: rgba(129,140,248,0.5); box-shadow: 0 0 30px rgba(129,140,248,0.15); transform: translateY(-1px); }

/* Feedback glow */
.correct-glow { box-shadow: 0 0 20px rgba(52,211,153,0.2), inset 0 0 20px rgba(52,211,153,0.05); }
.wrong-glow { box-shadow: 0 0 20px rgba(251,113,133,0.2), inset 0 0 20px rgba(251,113,133,0.05); }

/* Accessibility */
:focus-visible { outline: 2px solid #818CF8; outline-offset: 2px; border-radius: 8px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #818CF8; outline-offset: 2px; }
* { touch-action: manipulation; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fade-up { animation: none; }
  .answer-btn:not(:disabled):hover, .answer-btn:not(:disabled):active { transform: none; box-shadow: none; }
  .listening-pulse { animation: none; }
  .blob { animation: none; }
  .start-btn:hover { transform: none; }
}