*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}*{box-sizing:border-box;margin:0;padding:0}:root{--primary: #6366f1;--primary-hover: #4f46e5;--bg: #0f0f0f;--surface: #1a1a1a;--surface-hover: #252525;--border: #333;--text: #ffffff;--text-muted: #a0a0a0;--success: #22c55e;--error: #ef4444;--recording: #ef4444}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background-color:var(--bg);color:var(--text);min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column;max-width:600px;margin:0 auto;padding:2rem 1.5rem}.header{text-align:center;margin-bottom:3rem}.header h1{font-size:3rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.5rem}.subtitle{color:var(--text-muted);font-size:1.1rem}.main{flex:1;display:flex;flex-direction:column;gap:1.5rem}.upload-section{width:100%}.drop-zone{border:2px dashed var(--border);border-radius:12px;padding:3rem 2rem;text-align:center;cursor:pointer;transition:all .2s ease;background:var(--surface)}.drop-zone:hover,.drop-zone.drag-active{border-color:var(--primary);background:var(--surface-hover)}.drop-zone-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.upload-icon{width:48px;height:48px;color:var(--text-muted)}.drop-zone:hover .upload-icon,.drop-zone.drag-active .upload-icon{color:var(--primary)}.drop-zone p{font-size:1rem;color:var(--text)}.file-hint{font-size:.85rem;color:var(--text-muted)}.file-input{display:none}.divider{display:flex;align-items:center;gap:1rem;color:var(--text-muted);font-size:.9rem}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.record-section{display:flex;flex-direction:column;align-items:center;gap:1rem}.record-btn{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem 2rem;font-size:1rem;font-weight:500;border:none;border-radius:50px;background:var(--primary);color:#fff;cursor:pointer;transition:all .2s ease;min-width:200px}.record-btn:hover:not(:disabled){background:var(--primary-hover);transform:scale(1.02)}.record-btn:disabled{opacity:.6;cursor:not-allowed}.record-btn.recording{background:var(--recording)}.record-btn.recording:hover:not(:disabled){background:#dc2626}.mic-icon{width:20px;height:20px}.pulse{width:12px;height:12px;border-radius:50%;background:#fff;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.recording-hint{color:var(--text-muted);font-size:.9rem;animation:fade-in .3s ease}@keyframes fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.result-section{margin-top:1rem;padding:1.5rem;border-radius:12px;background:var(--surface);text-align:center;animation:fade-in .3s ease}.result-section.error{border:1px solid var(--error);color:var(--error)}.result-section.success h2{font-size:1rem;font-weight:500;color:var(--text-muted);margin-bottom:1rem}.result-card{display:flex;flex-direction:column;gap:1.25rem}.result-class,.result-confidence{display:flex;flex-direction:column;gap:.5rem}.result-class .label,.result-confidence .label{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.result-class .value{font-size:1.75rem;font-weight:600;color:var(--success)}.confidence-bar{width:100%;height:8px;background:var(--border);border-radius:4px;overflow:hidden}.confidence-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--success));border-radius:4px;transition:width .5s ease}.confidence-value{font-size:1.1rem;font-weight:500;color:var(--text)}.loader{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;margin:0 auto 1rem;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.playback-section{display:flex;justify-content:center}.playback-section audio{width:100%;max-width:400px;height:40px;border-radius:8px}.footer{margin-top:3rem;text-align:center;color:var(--text-muted);font-size:.85rem}@media(max-width:480px){.app{padding:1.5rem 1rem}.header h1{font-size:2.5rem}.drop-zone{padding:2rem 1.5rem}.result-class .value{font-size:1.5rem}}