*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:#f0f4f8;color:#1e293b;min-height:100vh}.container{max-width:700px;margin:0 auto;padding:2rem 1rem}.header{text-align:center;margin-bottom:2rem}.logo{font-size:2rem;font-weight:800;color:#3b82f6;letter-spacing:-.5px}.tagline{color:#64748b;font-size:.9rem;margin-top:.25rem}.card{background:#fff;border-radius:1rem;padding:2rem;box-shadow:0 4px 24px #00000014;min-height:300px;display:flex;flex-direction:column;gap:1.5rem}.hint{color:#475569;font-size:.95rem;line-height:1.5}.recording-hint{text-align:center;font-size:1rem;color:#334155}.text-block{background:#f8fafc;border:1px solid #e2e8f0;border-radius:.75rem;padding:1.25rem 1.5rem;font-size:1.05rem;line-height:1.7;color:#1e293b;flex:1}.controls{display:flex;flex-direction:column;gap:.75rem;align-items:center}.email-row{width:100%;max-width:420px}.email-input{width:100%;padding:.65rem 1rem;border:1.5px solid #cbd5e1;border-radius:.5rem;font-size:1rem;outline:none;transition:border-color .15s}.email-input:focus{border-color:#3b82f6}.btn{padding:.7rem 2rem;border:none;border-radius:.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .15s,transform .1s;min-width:180px}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:#3b82f6;color:#fff}.btn-primary:hover:not(:disabled){background:#2563eb}.btn-danger{background:#ef4444;color:#fff}.btn-danger:hover{background:#dc2626}.btn-secondary{background:#e2e8f0;color:#334155}.btn-secondary:hover{background:#cbd5e1}.recording-indicator{display:flex;align-items:center;justify-content:center;gap:.75rem;font-size:1.1rem;font-weight:600;color:#ef4444}.rec-dot{width:14px;height:14px;border-radius:50%;background:#ef4444;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}.result-block{text-align:center;padding:1rem 0}.result-label{font-size:1.1rem;color:#475569;margin-bottom:.5rem}.result-score{font-size:5rem;font-weight:800;line-height:1;margin-bottom:.5rem}.result-emoji{font-size:1.1rem;color:#475569}.recognized-details{border:1px solid #e2e8f0;border-radius:.5rem;padding:.75rem 1rem}.recognized-details summary{cursor:pointer;font-size:.9rem;color:#64748b;-webkit-user-select:none;user-select:none}.recognized-text{margin-top:.75rem;font-size:.95rem;line-height:1.6;color:#334155}.center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;flex:1;text-align:center}.center p{color:#475569;font-size:1rem}.sub{font-size:.85rem!important;color:#94a3b8!important}.error p{color:#ef4444;font-size:1rem}.spinner{width:40px;height:40px;border:3px solid #e2e8f0;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 480px){.card{padding:1.5rem 1rem}.result-score{font-size:3.5rem}}