*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--color-bg:#0f0f13;--color-surface:#1a1a24;--color-surface-2:#24243a;--color-border:#2e2e45;--color-primary:#6366f1;--color-primary-hover:#818cf8;--color-danger:#ef4444;--color-danger-hover:#f87171;--color-text:#f1f5f9;--color-text-muted:#94a3b8;--color-success:#22c55e;--color-record-red:#ef4444;--radius:12px;--radius-sm:8px;--shadow:0 4px 24px rgba(0,0,0,.4)}body,html{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,sans-serif;background-color:var(--color-bg);color:var(--color-text);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.page{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:2rem 1rem 4rem}.page-header{text-align:center;margin-bottom:2rem}.page-title{font-size:1.75rem;font-weight:700;letter-spacing:-.02em;color:var(--color-text)}.page-subtitle{font-size:.9rem;color:var(--color-text-muted);margin-top:.25rem}.voice-recorder{width:100%;max-width:480px}.recorder-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:1.75rem;box-shadow:var(--shadow)}.recorder-title{font-size:1rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:1.25rem}.waveform-container{background:var(--color-surface-2);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:1.25rem;border:1px solid var(--color-border)}.timer{font-size:2.5rem;font-weight:700;letter-spacing:-.03em;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;text-align:center;margin-bottom:1.5rem;color:var(--color-text-muted);transition:color .2s ease;display:flex;align-items:center;justify-content:center;gap:.5rem}.timer--active{color:var(--color-record-red)}.timer-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--color-record-red);animation:pulse 1s ease-in-out infinite;flex-shrink:0}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}.timer-idle{font-size:1rem;font-weight:500;letter-spacing:.05em}.controls{display:flex;margin-bottom:.75rem}.btn,.controls{justify-content:center}.btn{display:inline-flex;align-items:center;gap:.5rem;border:none;border-radius:9999px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .15s ease,transform .1s ease,opacity .15s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none}.btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:active:not(:disabled){transform:scale(.97)}.btn-record{background:var(--color-primary);color:#fff;padding:.85rem 2.5rem;font-size:1.1rem;min-width:160px}.btn-record:hover:not(:disabled){background:var(--color-primary-hover)}.btn-stop{background:var(--color-record-red);color:#fff;padding:.85rem 2.5rem;font-size:1.1rem;min-width:160px}.btn-stop:hover:not(:disabled){background:var(--color-danger-hover)}.btn-ghost{background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:var(--radius-sm)}.btn-ghost:hover:not(:disabled){background:var(--color-surface-2);color:var(--color-text)}.btn-danger{background:transparent;color:var(--color-danger);border:1px solid transparent;border-radius:var(--radius-sm)}.btn-danger:hover:not(:disabled){background:rgba(239,68,68,.1)}.btn-sm{padding:.3rem .75rem;font-size:.8rem}.btn-icon{font-size:1.2em;line-height:1}.recorder-hint{font-size:.8rem;color:var(--color-text-muted);text-align:center}.error-banner{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.4);border-radius:var(--radius-sm);padding:.75rem 1rem;margin-bottom:1rem;display:flex;align-items:flex-start;gap:.75rem;color:#fca5a5;font-size:.875rem}.error-banner p{flex:1 1}.error-dismiss{background:none;border:none;color:#fca5a5;cursor:pointer;padding:0;font-size:1rem;line-height:1;opacity:.7;flex-shrink:0}.error-dismiss:hover{opacity:1}.unsupported-message{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:2rem;text-align:center;color:var(--color-text-muted)}.unsupported-icon{font-size:2.5rem;display:block;margin-bottom:.75rem}.recordings-section{margin-top:1.5rem}.recordings-title{font-size:.85rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}.recordings-count{background:var(--color-primary);color:#fff;font-size:.7rem;padding:.1em .5em;border-radius:9999px;font-weight:700}.recordings-list{list-style:none;display:flex;flex-direction:column;gap:.75rem}.recording-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.9rem 1rem}.recording-meta{display:flex;justify-content:space-between;font-size:.8rem;color:var(--color-text-muted);margin-bottom:.6rem}.recording-duration{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-weight:600;color:var(--color-text)}.recording-audio{width:100%;height:36px;margin-bottom:.6rem;accent-color:var(--color-primary);border-radius:var(--radius-sm)}@supports (-webkit-appearance:none){.recording-audio{-webkit-appearance:none}}.recording-lang{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-primary);background:rgba(99,102,241,.12);padding:.15rem .45rem;border-radius:4px}.transcript{padding:.75rem;background:var(--color-surface-2);border-radius:var(--radius-sm);border-left:3px solid var(--color-primary)}.transcript-text{font-size:.875rem;line-height:1.6;color:var(--color-text)}.transcript-error,.transcript-pending{font-size:.8rem;color:var(--color-text-muted);font-style:italic}.transcript-error{color:var(--color-danger)}.recording-actions{display:flex;gap:.5rem;justify-content:flex-end}.feedback{display:flex;flex-direction:column;gap:.9rem;margin-bottom:.6rem}.feedback-summary{font-size:.875rem;color:var(--color-text);line-height:1.5;padding:.6rem .75rem;background:rgba(99,102,241,.08);border-left:3px solid var(--color-primary);border-radius:0 var(--radius-sm) var(--radius-sm) 0}.score-cards{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:.5rem;gap:.5rem}.score-card{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.65rem .4rem;background:var(--color-surface-2);border-radius:var(--radius-sm);border:1px solid var(--color-border);text-align:center}.score-value{font-size:1.35rem;font-weight:700;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;line-height:1}.score-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em}.score-label,.score-sub{color:var(--color-text-muted)}.score-sub{font-size:.6rem}.score--good .score-value{color:var(--color-success)}.score--ok .score-value{color:#f59e0b}.score--poor .score-value{color:var(--color-danger)}.filler-breakdown{display:flex;flex-direction:column;gap:.35rem}.filler-breakdown-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted)}.filler-tags{display:flex;flex-wrap:wrap;gap:.35rem}.filler-tag{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .5rem;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);border-radius:9999px;font-size:.75rem}.filler-tag-word{color:var(--color-text);font-style:italic}.filler-tag-count{color:var(--color-danger);font-weight:700;font-size:.7rem}.tips{display:flex;flex-direction:column;gap:.4rem}.tips-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted)}.tips-list{list-style:none;display:flex;flex-direction:column;gap:.4rem}.tip-item{padding:.6rem .75rem;background:var(--color-surface-2);border-radius:var(--radius-sm);border:1px solid var(--color-border)}.tip-category{display:inline-block;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--color-primary);background:rgba(99,102,241,.12);padding:.1em .5em;border-radius:4px;margin-bottom:.3rem}.tip-text{font-size:.825rem;color:var(--color-text);line-height:1.5}.tip-example{font-size:.775rem;color:var(--color-text-muted);font-style:italic;margin-top:.25rem;line-height:1.4}.transcript-replay{display:flex;flex-direction:column;gap:.35rem}.transcript-replay-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted)}.transcript-replay-text{font-size:.875rem;line-height:1.7;color:var(--color-text-muted);padding:.65rem .75rem;background:var(--color-surface-2);border-radius:var(--radius-sm);border:1px solid var(--color-border)}.transcript-segment{cursor:pointer;transition:background .1s ease;border-radius:3px;padding:0 2px}.transcript-segment:hover{background:rgba(99,102,241,.15)}.transcript-segment--active{background:rgba(99,102,241,.2);color:var(--color-text)}.filler-mark{background:rgba(239,68,68,.2);color:#fca5a5;border-radius:2px;padding:0 1px;font-style:italic}.pronunciation-notes{display:flex;flex-direction:column;gap:.35rem}.pronunciation-notes-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted)}.pronunciation-notes-list{padding-left:1.25rem;display:flex;flex-direction:column;gap:.25rem;font-size:.825rem;color:var(--color-text);line-height:1.5}