*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:#f0f4f8;color:#1e293b;min-height:100vh}.container{max-width:560px;margin:0 auto;padding:1.25rem 1rem 1.5rem;display:flex;flex-direction:column;gap:1rem}.header{text-align:center}.logo{font-size:1.6rem;font-weight:800;color:#3b82f6;letter-spacing:-.5px}.tagline{color:#64748b;font-size:.82rem;margin-top:.1rem}.card{background:#fff;border-radius:1rem;padding:1.25rem 1.25rem 1.5rem;box-shadow:0 4px 24px #00000012;display:flex;flex-direction:column;gap:1rem}.hint{color:#475569;font-size:.88rem;line-height:1.5}.recording-hint{text-align:center;color:#334155}.text-block{background:#f8fafc;border:1px solid #e2e8f0;border-radius:.75rem;padding:.9rem 1rem;font-size:.97rem;line-height:1.65;color:#1e293b}.controls{display:flex;flex-direction:column;gap:.6rem;align-items:center}.email-row{width:100%}.email-input{width:100%;padding:.6rem .9rem;border:1.5px solid #cbd5e1;border-radius:.5rem;font-size:1rem;outline:none;transition:border-color .15s}.email-input:focus{border-color:#3b82f6}.btn{width:100%;max-width:320px;padding:.7rem 1.5rem;border:none;border-radius:.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .15s,transform .1s}.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:.6rem;font-size:1.05rem;font-weight:600;color:#ef4444}.rec-dot{width:12px;height:12px;border-radius:50%;background:#ef4444;animation:pulse 1s infinite;flex-shrink:0}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}.result-block{text-align:center;padding:.25rem 0}.result-label{font-size:.95rem;color:#475569;margin-bottom:.25rem}.result-score{font-size:4rem;font-weight:800;line-height:1;margin-bottom:.25rem}.result-comment{font-size:1rem;color:#475569}.center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:1.5rem 0;text-align:center}.center p{color:#475569;font-size:1rem}.sub{font-size:.85rem!important;color:#94a3b8!important}.error p{color:#ef4444}.spinner{width:36px;height:36px;border:3px solid #e2e8f0;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.feedback-divider{border:none;border-top:1px solid #e2e8f0}.feedback-section{display:flex;flex-direction:column;gap:.4rem}.feedback-section--animate{animation:fadeSlideIn .25s ease}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.feedback-question{font-size:.88rem;font-weight:600;color:#334155}.required{color:#ef4444}.feedback-radio-row{display:flex;gap:.5rem;flex-wrap:wrap}.feedback-radio-col{display:flex;flex-direction:column;gap:.4rem}.radio-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;border:1.5px solid #cbd5e1;border-radius:.5rem;font-size:.88rem;cursor:pointer;transition:border-color .15s,background .15s;background:#f8fafc;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.radio-btn input[type=radio]{display:none}.radio-btn--active{border-color:#3b82f6;background:#eff6ff;color:#1d4ed8;font-weight:600}.radio-btn:hover:not(.radio-btn--active){border-color:#94a3b8;background:#f1f5f9}.feedback-textarea{width:100%;padding:.55rem .9rem;border:1.5px solid #cbd5e1;border-radius:.5rem;font-size:.9rem;font-family:inherit;resize:none;outline:none;transition:border-color .15s;color:#1e293b}.feedback-textarea:focus{border-color:#3b82f6}.feedback-error{color:#ef4444;font-size:.85rem;text-align:center}@media (max-width: 480px){.container{padding:.75rem .75rem 1rem}.card{padding:1rem;gap:.85rem}.result-score{font-size:3.2rem}.btn{max-width:100%}.email-input{font-size:16px}}