:root{--bg:#04110d;--surface:rgba(13,35,27,.72);--surface-2:rgba(21,51,40,.66);--line:rgba(199,238,219,.12);--text:#f0f8f4;--muted:#9eb5aa;--emerald:#48d597;--emerald-2:#1e9e6c;--gold:#e0bc69;--danger:#ff8d8d;--radius:24px;--shadow:0 28px 80px rgba(0,0,0,.34)}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;min-height:100vh;color:var(--text);font-family:"DM Sans",sans-serif;background:radial-gradient(circle at 50% -10%,#123a2b 0,transparent 43%),linear-gradient(150deg,#03100c,#071913 55%,#06110e);-webkit-font-smoothing:antialiased;overflow-x:hidden}.ambient{position:fixed;border-radius:50%;filter:blur(90px);opacity:.18;pointer-events:none}.ambient-one{width:34rem;height:34rem;background:#20c77c;right:-10rem;top:-13rem}.ambient-two{width:28rem;height:28rem;background:#d1a84d;left:-15rem;bottom:-17rem}.shell{min-height:100vh;position:relative;z-index:1;padding:28px}.glass-card{background:linear-gradient(145deg,rgba(21,48,38,.76),rgba(7,26,20,.7));border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%)}.hidden{display:none!important}.login-panel{width:min(440px,calc(100vw - 32px));margin:7vh auto;padding:48px;border-radius:32px;text-align:center}.brand-mark{width:58px;height:58px;border-radius:18px;margin:0 auto 26px;background:linear-gradient(145deg,#5fe4a9,#178c60);display:grid;place-items:center;box-shadow:0 14px 34px rgba(39,205,133,.28)}.brand-mark span{width:24px;height:31px;border:3px solid #062016;border-radius:50% 50% 44% 44%;position:relative}.brand-mark span:after{content:"";position:absolute;left:50%;bottom:-8px;width:15px;height:3px;background:#062016;transform:translateX(-50%);border-radius:3px}.brand-mark.small{width:42px;height:42px;margin:0;border-radius:14px}.brand-mark.small span{transform:scale(.72)}.eyebrow{font-size:.72rem;letter-spacing:.16em;font-weight:700;color:var(--emerald);margin:0 0 14px}.login-panel h1{font:700 clamp(2.6rem,7vw,4.2rem)/.95 "Outfit",sans-serif;letter-spacing:-.04em;margin:0 0 18px}.muted{color:var(--muted);line-height:1.6}.login-panel .muted{margin:0 auto 32px;max-width:32ch}.primary,.secondary,.ghost{border:0;border-radius:14px;padding:13px 18px;font:600 .93rem "DM Sans",sans-serif;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.primary{color:#042018;background:linear-gradient(135deg,#65e7ad,#38c98d);box-shadow:0 12px 28px rgba(46,210,143,.2)}.primary:hover{transform:translateY(-2px);box-shadow:0 15px 34px rgba(46,210,143,.3)}.secondary{color:var(--text);background:rgba(255,255,255,.08);border:1px solid var(--line)}.ghost{color:var(--muted);background:transparent;border:1px solid transparent}.ghost:hover{color:var(--text);background:rgba(255,255,255,.05)}.danger{color:#ffb2b2}.wide{width:100%}.otp-form{margin-top:18px;display:grid;gap:12px;text-align:start}.otp-form label{font-size:.8rem;color:var(--muted)}.otp-form input{width:100%;border:1px solid var(--line);background:rgba(0,0,0,.23);color:var(--text);font:600 1.5rem "Outfit";letter-spacing:.5em;text-align:center;border-radius:14px;padding:14px;outline:none}.otp-form input:focus{border-color:var(--emerald);box-shadow:0 0 0 4px rgba(72,213,151,.12)}.status-text{min-height:22px;color:var(--muted);font-size:.86rem}.studio{max-width:1440px;margin:auto}.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.brand{display:flex;align-items:center;gap:12px}.brand strong{display:block;font:700 1.25rem "Outfit"}.brand small{display:block;color:var(--muted);font-size:.72rem}.top-actions{display:flex;gap:6px}.workspace{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px}.sidebar,.recorder{border-radius:var(--radius)}.sidebar{padding:28px;height:fit-content;position:sticky;top:24px}.timer span{font:600 3.25rem/1 "Outfit";letter-spacing:-.05em}.timer small{display:block;color:var(--muted);margin-top:7px}.progress-ring{--progress:0deg;width:142px;height:142px;border-radius:50%;margin:32px auto;display:grid;place-items:center;background:conic-gradient(var(--emerald) var(--progress),rgba(255,255,255,.07) 0);position:relative}.progress-ring:before{content:"";position:absolute;inset:10px;border-radius:50%;background:#0a2119}.progress-ring span{position:relative;font:600 1.7rem "Outfit"}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stats-grid div{padding:14px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.05)}.stats-grid strong{display:block;font:600 1.25rem "Outfit"}.stats-grid small{color:var(--muted)}.quality-note{display:flex;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.quality-note p{font-size:.78rem;line-height:1.5;color:var(--muted);margin:0}.pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 6px rgba(72,213,151,.12);flex:none;margin-top:5px}.recorder{padding:34px;min-height:720px;display:flex;flex-direction:column}.recorder-head{display:flex;justify-content:space-between;align-items:flex-start}.pill{display:inline-flex;border:1px solid rgba(72,213,151,.24);background:rgba(72,213,151,.08);color:#83edbd;padding:7px 11px;border-radius:999px;font-size:.75rem;font-weight:700}.small-text{font-size:.78rem;margin:9px 0}.prompt-card{margin:30px 0 20px;padding:30px;border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018));border:1px solid var(--line)}.prompt-card h2{font:600 clamp(1.55rem,3vw,2.55rem)/1.18 "Outfit";letter-spacing:-.025em;max-width:28ch;margin:0}.arabic{font-family:"Tajawal",sans-serif;line-height:1.8;color:#d8e7df;font-size:1.12rem}.prompt-card details{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}.prompt-card summary{cursor:pointer;color:var(--gold);font-size:.83rem}.wave-wrap{height:136px;border-radius:20px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.05);position:relative;display:grid;place-items:center;overflow:hidden}#waveform{width:100%;height:112px}.countdown{position:absolute;font:700 4rem "Outfit";color:var(--text);text-shadow:0 8px 30px #000}.record-controls{display:flex;justify-content:center;padding:28px 0}.record-button{border:0;background:transparent;color:var(--text);cursor:pointer;display:grid;justify-items:center;gap:7px}.record-button span{width:74px;height:74px;border-radius:50%;background:var(--emerald);border:8px solid rgba(72,213,151,.16);box-shadow:0 0 0 1px rgba(72,213,151,.35),0 16px 50px rgba(38,194,129,.26);background-clip:padding-box;transition:transform .2s ease}.record-button:hover span{transform:scale(1.06)}.record-button.recording span{background:#ff6f71;animation:pulse 1.4s infinite}.record-button small{color:var(--muted)}@keyframes pulse{50%{box-shadow:0 0 0 18px rgba(255,111,113,0)}}.review{margin-top:20px}.quality-banner{display:flex;gap:12px;align-items:center;padding:15px 18px;border-radius:16px;background:rgba(72,213,151,.08);border:1px solid rgba(72,213,151,.17)}.quality-banner>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--emerald);color:#042018;font-weight:800}.quality-banner p{margin:2px 0 0;color:var(--muted);font-size:.8rem}.audio-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}.audio-compare>div{padding:14px;background:rgba(0,0,0,.16);border-radius:14px}.audio-compare label{display:block;color:var(--muted);font-size:.75rem;margin-bottom:8px}.audio-compare audio{width:100%;height:38px}.decision-row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}.decision-row .primary{margin-inline-start:auto}:focus-visible{outline:2px solid var(--emerald);outline-offset:3px}@media(max-width:860px){.shell{padding:14px}.workspace{grid-template-columns:1fr}.sidebar{position:static;display:grid;grid-template-columns:1fr 1fr;gap:16px}.sidebar>.eyebrow,.quality-note{grid-column:1/-1}.progress-ring{margin:0 auto}.recorder{padding:20px;min-height:0}.audio-compare{grid-template-columns:1fr}.prompt-card{padding:22px}.decision-row>*{flex:1}.decision-row .primary{margin:0;flex-basis:100%}}@media(max-width:520px){.sidebar{display:none}.topbar{margin-bottom:10px}.login-panel{padding:34px 24px}.recorder{padding:16px}.prompt-card{margin-top:20px}.prompt-card h2{font-size:1.5rem}.decision-row{display:grid;grid-template-columns:1fr 1fr}.decision-row .primary{grid-column:1/-1}.top-actions #language-toggle{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}