:root{--bg-primary:#0a0a0f;--bg-secondary:#12121a;--bg-card:#1a1a25;--bg-card-hover:#222230;--text-primary:#f5f5f7;--text-secondary:#a1a1aa;--text-muted:#71717a;--accent-primary:#6366f1;--accent-secondary:#8b5cf6;--accent-gradient:linear-gradient(135deg,#6366f1,#8b5cf6 50%,#a855f7);--success:#22c55e;--warning:#f59e0b;--error:#ef4444;--border:#27272a;--border-focus:#6366f1;--space-xs:0.25rem;--space-sm:0.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--radius-sm:0.375rem;--radius-md:0.75rem;--radius-lg:1rem;--radius-full:9999px;--shadow-sm:0 1px 2px rgba(0,0,0,.3);--shadow-md:0 4px 6px -1px rgba(0,0,0,.4);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.5);--shadow-glow:0 0 30px rgba(99,102,241,.3);--transition-fast:150ms ease;--transition-normal:250ms ease;--transition-slow:350ms ease}*{box-sizing:border-box;margin:0;padding:0}body,html{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);font-size:.95rem;font-weight:500;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal)}.btn-primary{background:var(--accent-gradient);color:#fff;box-shadow:var(--shadow-md)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background:var(--bg-card-hover);border-color:var(--accent-primary)}.btn-icon{width:3.5rem;height:3.5rem;padding:0;font-size:1.5rem}.btn-icon,.btn-record{border-radius:var(--radius-full)}.btn-record{width:5rem;height:5rem;background:var(--accent-gradient);font-size:2rem;box-shadow:var(--shadow-glow)}.btn-record.recording{animation:pulse 1.5s infinite;background:linear-gradient(135deg,#ef4444,#dc2626)}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 0 30px rgba(239,68,68,.4)}50%{transform:scale(1.05);box-shadow:0 0 50px rgba(239,68,68,.6)}}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-lg);transition:all var(--transition-normal)}.card:hover{background:var(--bg-card-hover);border-color:var(--accent-primary)}.score-circle{width:120px;height:120px;border-radius:var(--radius-full);display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-secondary);border:4px solid var(--border);position:relative}.score-circle.excellent{border-color:var(--success)}.score-circle.good{border-color:var(--accent-primary)}.score-circle.fair{border-color:var(--warning)}.score-circle.poor{border-color:var(--error)}.score-value{font-size:2rem;font-weight:700}.score-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.message{max-width:80%;padding:var(--space-md) var(--space-lg);border-radius:var(--radius-lg);margin-bottom:var(--space-md)}.message.user{background:var(--accent-gradient);color:#fff;margin-left:auto;border-bottom-right-radius:var(--space-xs)}.message.assistant{background:var(--bg-card);border:1px solid var(--border);margin-right:auto;border-bottom-left-radius:var(--space-xs)}.scenario-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:var(--space-lg);gap:var(--space-lg)}.scenario-card{cursor:pointer;text-align:center}.scenario-card .icon{font-size:3rem;margin-bottom:var(--space-md)}.scenario-card h3{margin-bottom:var(--space-sm)}.scenario-card p{color:var(--text-secondary);font-size:.9rem}.loading-dots{display:flex;gap:var(--space-xs)}.loading-dots span{width:8px;height:8px;background:var(--accent-primary);border-radius:var(--radius-full);animation:bounce 1.4s infinite both}.loading-dots span:nth-child(2){animation-delay:.16s}.loading-dots span:nth-child(3){animation-delay:.32s}@keyframes bounce{0%,80%,to{transform:translateY(0)}40%{transform:translateY(-8px)}}.progress-bar{width:100%;height:6px;background:var(--bg-secondary);border-radius:var(--radius-full);overflow:hidden}.progress-fill{height:100%;background:var(--accent-gradient);transition:width var(--transition-slow)}.word-feedback{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:.9rem;margin:var(--space-xs)}.word-feedback.correct{background:rgba(34,197,94,.2);color:var(--success)}.word-feedback.partial{background:rgba(245,158,11,.2);color:var(--warning)}.word-feedback.incorrect{background:rgba(239,68,68,.2);color:var(--error)}.container{max-width:1200px;margin:0 auto;padding:var(--space-lg)}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg) var(--space-xl);background:var(--bg-secondary);border-bottom:1px solid var(--border)}.logo{font-size:1.5rem;font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.whisper-status{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border)}.whisper-status.loading{border-color:var(--warning)}.whisper-status.ready{border-color:var(--success)}.whisper-status.error{border-color:var(--error)}@media (max-width:768px){h1{font-size:1.75rem}h2{font-size:1.5rem}.container{padding:var(--space-md)}.message{max-width:90%}.scenario-grid{grid-template-columns:1fr}}