@font-face{font-family:Inter;src:url('/static/InterVariable.woff2') format('woff2');font-display:swap}*{box-sizing:border-box}body{margin:0;background:#f7f7f2;color:#202923;font:15px/1.6 Inter,system-ui,sans-serif}button,input,select{font:inherit}button,a,summary,input,select{outline-offset:5px}button,summary{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button{border:1px solid #dce1d8;border-radius:9px;background:#fff;color:inherit;padding:11px 18px;transition:background .15s}button:hover:enabled{background:#edf0e8}button.primary{background:#253d2b;color:#fff;border-color:#253d2b}button.primary:hover:enabled{background:#37533d}button.record{background:#a63832;color:#fff;border-color:#a63832;min-width:180px}button.stop{background:#212d25;color:white}button.small{font-size:12px;padding:7px 11px}button.link{padding:0;border:0;background:transparent;color:#4a6650;text-decoration:underline}header{position:sticky;z-index:20;top:0;height:84px;background:#f7f7f2f5;backdrop-filter:blur(10px);border-bottom:1px solid #e2e6dd;display:flex;align-items:center;justify-content:space-between;padding:0 5vw}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}.brand img{width:34px;height:34px;object-fit:contain}.brand strong{font-size:23px;letter-spacing:-1px}.brand span:last-child{color:#6a756c;font-size:14px}.brand-divider{height:22px;width:1px;background:#cdd4ca;margin:0 6px}.header-right{display:flex;gap:25px;align-items:center}#sync{font-size:12px;color:#6a756c}details{position:relative}summary{list-style:none;background:white;border:1px solid #dce1d8;border-radius:8px;padding:9px 15px;font-size:13px;font-weight:600}summary::-webkit-details-marker{display:none}.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:white;padding:6px;border:1px solid #dce1d8;border-radius:10px;box-shadow:0 10px 30px #20302215}.menu button{display:block;width:100%;border:0;text-align:left;font-size:12px}main{max-width:1240px;margin:auto;min-height:calc(100vh - 155px);padding:54px 32px 66px}h1,h2,h3,p{margin-top:0}h1{font-size:45px;line-height:1.15;letter-spacing:-1.8px;font-weight:550}h2{font-size:27px;font-weight:550;letter-spacing:-.8px}h3{font-size:16px;font-weight:600}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:650;color:#6b7c6d;text-transform:uppercase;margin-bottom:20px}.muted{color:#758075}.intro{max-width:550px;color:#758075;font-size:16px}.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;padding-top:22px}.intro-art{margin-top:40px;height:90px;display:flex;align-items:center;gap:6px}.intro-art i{display:block;width:5px;border-radius:5px;background:#9cb98a;transform:scaleY(.6)}.intro-art i:nth-child(3n){background:#d5d6a5}.feature-list{margin-top:35px;display:grid;gap:18px}.feature{display:flex;gap:16px}.feature>b{color:#7b8e75;font-size:12px;padding-top:3px}.feature p{margin:3px 0;color:#7a8277;font-size:13px}.card{background:#fff;border:1px solid #e1e5db;border-radius:18px;padding:32px}.form-label{display:block;font-size:13px;font-weight:600;margin:20px 0 8px}input[type=text],select{width:100%;border:1px solid #d7ddcf;border-radius:8px;padding:12px;background:#fcfcf9;color:inherit}.duration-choices{display:flex;gap:10px}.duration-choices label{flex:1;position:relative;cursor:pointer}.duration-choices input{position:absolute;opacity:0}.duration-choices span{display:block;border:1px solid #d7ddcf;border-radius:9px;padding:13px}.duration-choices small{display:block;color:#758075;font-size:11px}.duration-choices input:checked+span{border:2px solid #59794c;background:#f0f4eb;padding:12px}.duration-choices input:focus-visible+span{outline:2px solid #253d2b}.consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.7;margin:24px 0}.consent input{margin-top:5px;flex-shrink:0}.full{width:100%}.privacy{font-size:11px;color:#818b7f;margin-top:15px;margin-bottom:0}.session-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px}.session-head h1{font-size:33px;letter-spacing:-1px;margin-bottom:8px}.session-head .eyebrow{margin-bottom:12px}.session-head p{font-size:13px;margin-bottom:0}.studio-grid{display:grid;grid-template-columns:minmax(0,1fr) 295px;gap:24px}.passage-card{padding:0;overflow:hidden}.passage-top{display:flex;justify-content:space-between;align-items:center;padding:20px 28px;border-bottom:1px solid #edf0e7;font-size:11px;color:#7a8675}.emotion{display:inline-flex;align-items:center;gap:8px;border-radius:30px;background:#eaf0df;color:#526142;font-size:12px;font-weight:600;padding:5px 12px}.emotion:before{content:'';width:6px;height:6px;border-radius:100%;background:#7f9a56}.passage-content{padding:28px 36px 22px;min-height:300px}.coaching{font-size:13px;color:#6b7767;line-height:1.8;max-width:600px;margin:0 0 23px}.script{font-family:'Noto Naskh Arabic','Geeza Pro','Arial',sans-serif;font-size:30px;font-weight:400;line-height:2.15;text-align:right;letter-spacing:0;white-space:pre-wrap}.cue{font-family:Inter,system-ui,sans-serif;font-size:10px;display:inline-block;background:#edf2e6;color:#65794e;padding:2px 7px;margin:0 8px;vertical-align:middle;border-radius:5px;direction:ltr;line-height:1.8}.script mark{background:#eff2d3;color:inherit}.record-zone{margin:0 28px 26px;border-radius:12px;border:1px solid #e3e7de;background:#fafbf7;padding:20px;text-align:center}.meter-wrap{display:flex;justify-content:center;gap:15px;align-items:center;margin-bottom:16px}.meter{display:flex;gap:3px;height:24px;align-items:center}.meter i{display:block;width:3px;height:5px;background:#bbc7b2;border-radius:2px;transition:height .1s}.timer{font-size:18px;font-variant-numeric:tabular-nums;color:#475242;min-width:60px}.record-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.record-note{font-size:11px;color:#83907b;margin:12px 0 0}.saved-audio{display:flex;align-items:center;gap:12px;flex-wrap:wrap;text-align:left;margin-bottom:15px}.saved-audio audio{height:38px;max-width:100%;flex:1}.saved-badge{font-size:11px;color:#4c6c39}.warning{color:#a45f27;font-size:12px}.passage-nav{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;border-top:1px solid #edf0e7}.passage-nav span{font-size:11px;color:#85907e}.side-panel{background:#263b2d;border-radius:16px;padding:26px;color:#f0f3eb;align-self:start}.side-panel .eyebrow{color:#acbba6;margin-bottom:12px}.big-time{font-size:39px;line-height:1.2;letter-spacing:-1.5px;font-weight:500}.side-panel p{font-size:12px;color:#afbdab;margin:9px 0 20px}.progress{height:5px;background:#4a5b48;border-radius:6px;overflow:hidden}.progress>i{display:block;height:100%;background:#c5d79d;max-width:100%}.stats{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#afbdab;margin:13px 0 24px}.side-panel button{width:100%;background:#c9d9ad;color:#263b2d;border-color:#c9d9ad}.side-panel hr{border:0;border-top:1px solid #4b5c48;margin:26px 0}.side-panel .tip{font-size:12px;line-height:1.8;color:#c5cebd}.microphone{margin-top:18px;font-size:12px}.microphone select{font-size:11px;padding:8px;margin:7px 0;background:#f8f9f4}.session-tools{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px;font-size:11px}.session-tools button{font-size:11px}.session-tools input{font-size:11px;flex:1;min-width:150px}.chapter-list{margin-top:22px;max-height:215px;overflow:auto;display:grid;gap:5px}.chapter-list button{border:0;background:transparent;color:#becdb4;font-size:11px;padding:4px;text-align:left;display:flex;gap:8px}.chapter-list button.current{color:white;background:#3d513c;border-radius:4px}.chapter-list .done{color:#d6e7b6}.admin{margin-top:35px}.admin summary{display:inline-block}.admin-list{display:grid;gap:10px;margin:20px 0}.admin-row{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid #e1e5d9;padding:14px 0}.admin-row p{font-size:12px;margin:0}.admin-row strong{display:block}.empty{color:#7b8775;font-size:13px}#notice{max-width:1176px;margin:18px auto -20px;padding:12px 18px;border:1px solid #e3c2a3;background:#fff5e9;color:#8b4a25;font-size:13px;border-radius:8px}footer{border-top:1px solid #e2e6dd;display:flex;justify-content:space-between;padding:22px 5vw;color:#90988b;font-size:10px}footer span:first-child{letter-spacing:1.4px}.loading{padding:100px;text-align:center;color:#819078}.inline-status{font-size:12px;color:#6e805e;margin-bottom:14px}.recovery{border:1px solid #e1caa5;background:#fff8eb;border-radius:10px;padding:15px;font-size:12px;margin:20px 0}.session-head select{width:auto;max-width:190px;font-size:12px;padding:8px}.actions{display:flex;gap:10px;flex-wrap:wrap}.hidden{display:none!important}@media(max-width:900px){.setup-grid{gap:35px}.studio-grid{grid-template-columns:minmax(0,1fr) 255px}header{padding:0 24px}.side-panel{padding:22px}.passage-content{padding:25px}.script{font-size:27px}}@media(max-width:680px){header{height:70px;padding:0 16px}.brand{gap:7px}.brand span:last-child{font-size:11px}.brand-divider{margin:0 3px}.brand strong{font-size:20px}.brand img{width:28px;height:28px}.header-right{gap:0}#sync{display:none}summary{font-size:11px;padding:8px 10px}main{padding:28px 16px 40px}.setup-grid{grid-template-columns:1fr;gap:24px;padding-top:0}h1{font-size:37px}.intro-art{margin-top:18px;height:45px}.feature-list{gap:12px;margin:20px 0}.card{padding:24px}.studio-grid{grid-template-columns:1fr}.session-head{gap:15px;align-items:start}.session-head h1{font-size:27px}.session-head select{max-width:130px}.passage-card{padding:0}.passage-content{min-height:260px;padding:22px}.script{font-size:27px;line-height:2}.passage-top{padding:15px 20px}.record-zone{margin:0 15px 20px;padding:16px}.passage-nav{padding:16px}.passage-nav span{display:none}.side-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.side-panel>hr,.side-panel>.tip{display:none}.side-panel>.chapter-list,.side-panel>button,.side-panel>.microphone{grid-column:1/-1}.side-panel>.progress,.side-panel>.stats{grid-column:1/-1}.side-panel>.eyebrow,.side-panel>.big-time,.side-panel>p{grid-column:1/-1}.side-panel>.chapter-list{max-height:150px}.session-tools{margin-top:15px}#notice{margin:15px 16px 0}footer{padding:18px 16px}footer span:last-child{display:none}.admin-row{align-items:start}.saved-audio{gap:5px}}
.setup-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.setup-grid>*{min-width:0}.intro-art{overflow:hidden}.intro-art i{flex-shrink:0}@media(max-width:900px){.setup-grid{grid-template-columns:1fr;max-width:640px;margin:auto}.intro-art{height:60px}.feature-list{margin-bottom:12px}}
/* The capture strip follows the local Studio: status, timer, record, live waveform. */
.record-zone{text-align:left;padding:20px 22px;background:#fafbf8;transition:background .15s,border-color .15s}
.record-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.record-caption{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0}
.record-caption strong{font-size:13px;font-weight:550}.capture-icon{display:grid;place-items:center;width:33px;height:33px;border:1px solid #dce3d5;border-radius:50%;color:#738467;font-size:20px;flex:none}
.record-toolbar .timer{font-size:13px;min-width:36px;font-variant-numeric:tabular-nums}.record-toolbar button{font-size:12px;min-height:44px;min-width:150px}
.live-waveform{display:block;width:100%;height:64px;margin:15px 0 10px}.waveform-status{font-size:11px;color:#7d8875}
.record-secondary{display:flex;align-items:center;gap:15px;padding-top:6px}.record-secondary .record-note{margin:0;line-height:1.7;flex:1}.record-secondary button{white-space:nowrap;min-height:40px}
.is-recording{background:#fff8f4;border-color:#e1beb3}.is-recording .capture-icon{color:#a35b50;border-color:#e5c5bb;background:#fbece7}.is-recording .timer{color:#a35b50}
.saved-audio{margin:12px 0 8px}.saved-audio audio{min-width:0}.saved-badge{white-space:nowrap}.passage-menu{margin-top:20px}.passage-menu>summary{background:transparent;color:#c5cebd;border-color:#4a5b48;font-size:11px}.passage-menu .chapter-list{margin-top:10px}.chapter-list button{min-height:34px}
.mobile-progress{display:none}.session-head>div{min-width:0}.session-head h1{overflow-wrap:anywhere}.session-head>button{flex-shrink:0}.passage-content,.script{overflow-wrap:break-word}
.duration-choices label{min-width:0}.duration-choices strong{font-size:14px}.duration-choices span{padding:12px 10px}.duration-choices input:checked+span{padding:11px 9px}
@media(max-width:900px){
  .studio-grid{grid-template-columns:minmax(0,1fr)}.session-head{margin-bottom:20px}.session-head h1{font-size:28px}
  .mobile-progress{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:0 0 18px;font-size:12px;color:#58694e}.mobile-progress>.progress{width:100%;height:4px;background:#dfe6d6}.mobile-progress .progress>i{background:#81996a}
  .side-panel{display:block}.side-panel .eyebrow,.side-panel .big-time,.side-panel>.progress,.side-panel>.stats,.side-panel>p:not(.tip){display:none}.side-panel hr,.side-panel>.tip{display:none}.side-panel .microphone{margin-top:18px}.side-panel .passage-menu{margin-top:14px}
  .record-toolbar{gap:10px}.passage-content{min-height:0}.script{font-size:27px;line-height:1.9}
}
@media(max-width:680px){
  .brand{flex-shrink:0}.brand span:last-child{white-space:nowrap}header{gap:8px}.header-right{min-width:0}#export-menu>summary{min-height:44px;display:flex;align-items:center;white-space:nowrap}
  main{padding:24px 16px 40px}.session-head h1{font-size:24px;line-height:1.3}.session-head .eyebrow{font-size:9px;letter-spacing:1.5px}.session-head p{font-size:12px;line-height:1.7}
  button,summary,select{min-height:44px}.card{padding:22px}.passage-card{padding:0}.passage-top{padding:14px 18px;font-size:10px}.emotion{font-size:11px}.passage-content{padding:20px}.script{font-size:25px;line-height:1.95}.coaching{font-size:12px;margin-bottom:18px}
  .record-zone{margin:0 14px 18px;padding:16px}.record-caption{gap:8px}.record-caption strong{font-size:12px}.capture-icon{width:29px;height:29px;font-size:18px}.record-toolbar button{width:100%;min-height:46px}.record-toolbar .timer{margin-left:auto}.live-waveform{margin:12px 0 8px;height:64px}
  .record-secondary{align-items:flex-start;flex-direction:column;gap:10px}.record-note{font-size:11px}.record-secondary button{width:100%}.saved-audio{align-items:stretch}.saved-audio audio{flex:1 0 100%;width:100%;height:42px}.saved-badge{font-size:11px}
  input[type=text],select,.microphone select{font-size:16px}.consent input{width:18px;height:18px}.consent{font-size:12px;gap:10px}.duration-choices{gap:7px}.duration-choices strong{font-size:13px}.duration-choices small{font-size:10px;line-height:1.5}.duration-choices span{height:100%}
  .passage-nav{gap:10px;padding:14px}.passage-nav button{font-size:12px;padding:10px 13px}.side-panel{padding:20px}.chapter-list button{min-height:44px}.session-tools{gap:12px}.session-tools input{flex-basis:100%;font-size:12px}.session-tools .link{min-height:44px}
  .actions>button{flex:1 0 44%}.admin-row{flex-wrap:wrap}.admin-row button{width:100%}
}
@media(prefers-reduced-motion:reduce){button,.record-zone{transition:none}}
.microphone select{color:#263b2d}
.is-recording .saved-audio,.is-recording .warning,.is-recording .waveform-status{display:none}
.passage-card{scroll-margin-top:96px}
button.record:hover:enabled{background:#8f302b}button.stop:hover:enabled{background:#354539}
/* Clear consent gating and a shorter, calmer setup on small screens. */
#create:disabled{background:#e2e5de;border-color:#e2e5de;color:#8b9386;opacity:1;box-shadow:none}
.consent{border:1px solid #e3e8dc;border-radius:11px;background:#f8faf5;padding:14px;cursor:pointer;transition:background .15s,border-color .15s}
.consent:has(input:checked){background:#f0f5e9;border-color:#c8d7b9}.consent input{accent-color:#36533a;width:18px;height:18px;margin-top:3px}.consent span{flex:1;min-width:0}
.setup-card .privacy{text-align:center;font-size:11px;line-height:1.6}.resume-session{margin-top:18px}.resume-fallback{width:100%;max-width:640px}.resume-fallback[hidden]{display:none}.resume-fallback input{margin-top:9px;font-size:12px}
@media(max-width:680px){
  header{height:calc(64px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left))}
  main{padding:22px 14px calc(30px + env(safe-area-inset-bottom))}.setup-grid{gap:20px;margin:0 auto;max-width:460px}
  .setup-intro .eyebrow{font-size:9px;letter-spacing:1.6px;margin-bottom:10px}.setup-intro h1{font-size:32px;line-height:1.14;letter-spacing:-1.1px;margin-bottom:12px}.setup-intro .intro{font-size:13px;line-height:1.7;margin-bottom:0;max-width:36ch}
  .setup-intro .intro-art,.setup-intro .feature-list{display:none}.setup-card{padding:22px 20px;border-radius:16px;box-shadow:0 5px 22px #263b2d05}.setup-card>.eyebrow{font-size:9px;letter-spacing:1.5px;margin-bottom:8px}.setup-card h2{font-size:24px;line-height:1.25;margin-bottom:16px;letter-spacing:-.6px}
  .setup-card .form-label{margin:16px 0 7px;font-size:12px}.setup-card .form-label:first-child{margin-top:0}.setup-card input[type=text]{min-height:48px;border-radius:9px}.duration-choices{gap:7px}.duration-choices span{padding:12px 7px;border-radius:10px}.duration-choices input:checked+span{padding:11px 6px}.duration-choices strong{font-size:13px;white-space:nowrap}.duration-choices small{font-size:10px;margin-top:4px;line-height:1.5}
  .setup-card .consent{margin:18px 0 16px;padding:13px;font-size:12px;line-height:1.7;gap:10px}.setup-card .consent input{flex:0 0 18px;margin-top:3px}.setup-card #create{min-height:50px;border-radius:10px;font-size:14px;font-weight:550}.setup-card .privacy{margin-top:12px;font-size:10px}.resume-session{display:block;width:100%;text-align:center;font-size:12px!important;margin-top:15px}
  .session-head{gap:12px;margin-bottom:16px}.session-head h1{font-size:23px}.mobile-progress{margin-bottom:14px}.passage-content{padding:18px}.script{font-size:24px;line-height:1.85}.record-zone{padding:14px;margin:0 12px 16px;border-radius:12px}.record-toolbar button{border-radius:9px}.record-secondary{gap:8px}.side-panel{border-radius:14px}.session-tools{padding:0 2px;line-height:1.7}.session-tools .link{font-size:12px}
  footer{padding:18px 14px;font-size:9px;line-height:1.6}
}
@media(max-width:360px){.setup-intro h1{font-size:29px}.setup-card{padding:20px 16px}.duration-choices strong{font-size:12px}.duration-choices small{font-size:9px}.brand{gap:6px}.brand-divider{margin:0 2px}}
/* Keep the recording title and session navigation in the shared header. */
#header-session-title[hidden],#home[hidden]{display:none}
.recording-header{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);column-gap:20px}
.recording-header .brand{justify-self:start;min-width:0}.recording-header .header-right{justify-self:end;gap:12px;min-width:0}
#header-session-title{font-size:17px;font-weight:550;line-height:1.4;letter-spacing:-.3px;margin:0;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recording-header #home{min-height:40px;white-space:nowrap}.recording-page main{padding-top:20px}
@media(max-width:1200px){.recording-header #sync{display:none}}
@media(min-width:681px) and (max-width:900px){.recording-header .brand-divider,.recording-header .brand>span:last-child{display:none}.recording-header{column-gap:12px}#header-session-title{font-size:15px}}
@media(max-width:680px){
  .recording-header{height:auto;min-height:calc(88px + env(safe-area-inset-top));grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'brand actions' 'title title';column-gap:12px;row-gap:4px;padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:10px}
  .recording-header .brand{grid-area:brand}.recording-header .brand-divider,.recording-header .brand>span:last-child{display:none}.recording-header .header-right{grid-area:actions;gap:8px}
  #header-session-title{grid-area:title;font-size:14px;line-height:20px;width:100%}.recording-header #home{min-height:44px;padding:8px 12px;font-size:11px}
  .recording-page main{padding-top:14px}.recording-page .mobile-progress{margin-bottom:12px}.recording-page .passage-card{scroll-margin-top:104px}
}
/* Mobile navigation and recording settings live in a modal side drawer. */
#mobile-menu-toggle{display:none}
#mobile-menu:not([open]){display:none}
#mobile-menu[open]{display:flex;flex-direction:column}
#mobile-menu{position:fixed;inset:0 auto 0 0;width:min(350px,90vw);max-width:100%;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0 18px 18px 0;background:#f8f9f4;color:#263b2d;box-shadow:15px 0 60px #17291d25;overflow:hidden}
#mobile-menu::backdrop{background:#1c2b234d;backdrop-filter:blur(2px)}
body.mobile-menu-open{overflow:hidden}
.mobile-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(20px + env(safe-area-inset-top)) 20px 18px;border-bottom:1px solid #e0e5d9;flex-shrink:0}
.mobile-menu-heading h2{font-size:20px;line-height:1.3;letter-spacing:-.5px;margin:0}.mobile-menu-heading p{font-size:11px;color:#75816c;margin:6px 0 0}
#mobile-menu-close{width:44px;height:44px;border:1px solid #dfe5d7;border-radius:10px;padding:0;background:#fff;font-size:25px;line-height:1;color:#68795e;flex:none}
.mobile-menu-body{padding:20px 20px calc(24px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1}
.mobile-navigation{display:grid;gap:10px}.mobile-navigation>button,.mobile-export>summary{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:46px;padding:12px 14px;border:1px solid #dfe5d7;border-radius:10px;background:#fff;color:#344c35;text-align:left;font-size:13px;font-weight:550}
#mobile-home[hidden]{display:none}.mobile-export>div{display:grid;gap:3px;padding:7px 0}.mobile-export button{width:100%;text-align:left;border:0;background:transparent;min-height:44px;padding:10px 14px;font-size:12px}
#mobile-session-controls .side-panel{display:block;margin-top:22px;padding:0;background:transparent;color:#263b2d;border:0;border-radius:0}
#mobile-session-controls .microphone{margin-top:20px;font-size:12px;font-weight:550}#mobile-session-controls .microphone select{background:#fff;border-color:#dce3d4;font-size:16px;padding:11px;margin:8px 0 0}
#mobile-session-controls #finish{min-height:46px;border-radius:10px;font-size:13px;font-weight:550}
#mobile-session-controls .passage-menu{margin-top:22px}#mobile-session-controls .passage-menu>summary{color:#52684b;background:transparent;border:0;padding:0;min-height:36px;font-size:12px;font-weight:600}
.passage-search{display:block;width:100%;border:1px solid #dce3d4;border-radius:9px;background:#fff;color:#263b2d;font:inherit;font-size:12px;padding:10px 11px;margin-top:10px;min-height:44px}
#mobile-session-controls .passage-search{font-size:16px;margin-top:8px}
#mobile-session-controls .chapter-list{max-height:260px;margin-top:12px;gap:4px}#mobile-session-controls .chapter-list button{background:transparent;color:#63745b;font-size:12px;border-radius:8px;padding:10px;min-height:44px;align-items:center}
#mobile-session-controls .chapter-list button.current{background:#e7eedc;color:#304c30}#mobile-session-controls .chapter-list .done{color:#5c7f45}
.chapter-list button[hidden],.passage-empty[hidden]{display:none}.passage-empty{font-size:11px;margin:12px 0 0;color:#8b987e}#mobile-session-controls .passage-empty{color:#75816c}
#mobile-session-controls .session-tools{padding:18px 0 0;margin-top:22px;border-top:1px solid #e0e5d9;font-size:11px;line-height:1.8;color:#7c8874}#mobile-session-controls .session-tools>span{display:none}#mobile-session-controls .session-tools .link{font-size:12px;min-height:44px}
@media(max-width:900px){
  #site-header,#site-header.recording-header{height:calc(64px + env(safe-area-inset-top));min-height:calc(64px + env(safe-area-inset-top));display:grid;grid-template-columns:44px minmax(0,1fr) 44px;grid-template-areas:'toggle brand spacer';column-gap:10px;row-gap:0;align-items:center;padding:env(safe-area-inset-top) max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left))}
  #mobile-menu-toggle{grid-area:toggle;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid #dfe5d7;border-radius:10px;background:#fff;color:#3d5438}
  #site-header .brand{grid-area:brand;justify-self:center;min-width:0}#site-header .header-right{display:none}
  #site-header.recording-header{grid-template-areas:'toggle title brand'}#site-header.recording-header .brand{grid-area:brand;justify-self:end;width:44px;justify-content:center}
  .recording-header .brand>strong,.recording-header .brand>span{display:none}.recording-header .brand img{width:28px;height:28px}
  #site-header #header-session-title{grid-area:title;min-width:0;width:100%;font-size:14px;line-height:20px}
  .recording-page .passage-card{scroll-margin-top:80px}.recording-page .studio-grid{gap:0}
}
.setup-card fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.setup-card fieldset legend { padding: 0; }
.setup-card input:not([type=radio]):not([type=checkbox]), .setup-card select {
  width: 100%; box-sizing: border-box; padding: 12px 13px; background: #fff; color: inherit;
  border: 1px solid #d5ded0; border-radius: 9px; font: inherit;
}
.setup-card input:focus-visible, .setup-card select:focus-visible {
  outline: 2px solid #53694b; outline-offset: 2px;
}
.profile-status { max-width: 540px; margin: 40px auto; }
.clone-choices { display: grid; gap: 8px; }
.clone-choices label { position: relative; display: block; cursor: pointer; }
.clone-choices input { position: absolute; top: 14px; left: 12px; accent-color: #53694b; }
.clone-choices span { display: block; border: 1px solid #d5ded0; border-radius: 10px; padding: 11px 12px 11px 36px; }
.clone-choices input:checked + span { background: #eef2ea; border-color: #809176; }
.clone-choices small { display: block; margin-top: 3px; color: #576152; }
#sign-out[hidden], #mobile-sign-out[hidden], #export-menu[hidden], .mobile-export[hidden] { display: none; }

.auth-page { background: #f6f3eb; color: #21342a; }
.auth-page #site-header { height: 68px; background: #f6f3ebf5; border-bottom-color: #e5e0d5; }
.auth-page #sync { display: none; }
.auth-page main {
  max-width: 1320px;
  min-height: calc(100svh - 132px);
  padding: clamp(22px, 5vh, 58px) clamp(16px, 4vw, 56px) 32px;
}
.auth-layout {
  display: grid;
  grid-template-columns: minmax(230px, .85fr) minmax(340px, 1.15fr);
  max-width: 930px;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid #e3e1d6;
  border-radius: 22px;
  background: #fffefa;
  box-shadow: 0 14px 40px #2c281413;
}
.auth-layout.is-signup {
  max-width: 1200px;
  grid-template-columns: minmax(225px, .65fr) minmax(0, 1.65fr);
}
.auth-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(24px, 3.4vw, 48px);
  background: radial-gradient(ellipse at 8% 100%, #d4e3ce 0, transparent 67%), #e9eee4;
}
.auth-intro h1 {
  margin: 0 0 14px;
  font-size: clamp(42px, 4.6vw, 66px);
  font-weight: 630;
  line-height: .98;
  letter-spacing: -.048em;
}
.auth-intro h1 span { display: block; }
.auth-intro h1 em { color: #a24c36; font-style: normal; }
.auth-lead { max-width: 29ch; margin: 0; font-size: 14px; line-height: 1.6; color: #4e5f51; }
.auth-wave { display: flex; align-items: center; gap: 4px; height: 44px; margin-top: 19px; }
.auth-wave i { width: 3px; border-radius: 3px; background: #718d73; }
.auth-wave i:nth-child(3n) { background: #a7765a; }
.auth-card { min-width: 0; padding: clamp(22px, 3.4vw, 42px); }
.auth-card h2 {
  margin: 0 0 20px;
  font-size: clamp(24px, 2.7vw, 34px);
  font-weight: 610;
  line-height: 1.16;
  letter-spacing: -.035em;
}
.auth-card h2:has(+ .auth-subtitle) { margin-bottom: 6px; }
.auth-subtitle { margin: 0 0 19px; color: #59675b; font-size: 14px; }
.auth-fields, .profile-row { display: grid; gap: 14px 18px; }
.is-signup .auth-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profile-row { grid-template-columns: minmax(0, 1.5fr) minmax(75px, 1fr); gap: 12px; }
.auth-field { min-width: 0; }
.auth-field .form-label { margin: 0 0 5px; }
.auth-field .form-label small { font-weight: 500; color: #59675b; }
.auth-field input, .auth-field select {
  width: 100%;
  height: 45px;
  padding: 9px 12px;
  border: 1px solid #cdd7cb;
  border-radius: 9px;
  background: #fff;
  color: inherit;
  font-size: 16px;
}
.auth-field select { padding-right: 4px; }
.auth-field select:invalid, .auth-field input::placeholder { color: #5f6b61; opacity: 1; }
.auth-field select option { color: #21342a; }
.auth-field :is(input, select, button):focus-visible,
.city-picker-controls :is(input, select):focus-visible {
  outline: 2px solid #587253;
  outline-offset: 2px;
}
.auth-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 20px; }
.auth-actions button { min-height: 44px; }
.auth-actions .link { text-align: left; text-underline-offset: 3px; }
.auth-layout:not(.is-signup) #authenticate { width: 100%; }
.city-field { display: flex; align-items: stretch; gap: 8px; }
.city-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 12px;
  min-width: 0;
  min-height: 45px;
  padding: 9px 12px;
  border-color: #cdd7cb;
  text-align: left;
}
.city-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.city-trigger::after {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 3px 4px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.city-trigger.is-placeholder { color: #59675b; }
.city-clear { min-width: 44px; padding: 0; font-size: 21px; }
.city-picker {
  width: min(540px, calc(100% - 24px));
  max-height: min(740px, calc(100dvh - 24px));
  padding: 24px;
  border: 1px solid #e1e5db;
  border-radius: 18px;
  background: #fffefa;
  color: #21342a;
  box-shadow: 0 18px 68px #16231e40;
}
.city-picker[open] { display: flex; flex-direction: column; }
.city-picker::backdrop { background: #18251e75; }
.city-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.city-picker-heading h2 { margin: 0; font-size: 24px; line-height: 1.2; }
#close-city-picker { flex: none; min-width: 44px; min-height: 44px; padding: 0; font-size: 22px; line-height: 1; }
.city-picker-controls { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 2.2fr); gap: 12px; }
.city-picker-controls .form-label { margin-top: 14px; }
.city-picker-controls input, .city-picker-controls select {
  width: 100%;
  min-height: 44px;
  padding: 10px;
  border: 1px solid #d5ded0;
  border-radius: 8px;
  background: #fff;
  color: #21342a;
  font-size: 16px;
}
#city-status { margin: 12px 0 5px; color: #526354; font-size: 12px; }
#city-results { min-height: 0; overflow: auto; padding: 3px 4px 5px; margin: 0 -4px; list-style: none; }
#city-results li + li { margin-top: 4px; }
#city-results button {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1px 12px;
  min-height: 44px;
  padding: 8px 10px;
  border-color: #e7e9e2;
  text-align: left;
}
#city-results button:focus-visible { outline-offset: 1px; }
#city-results small { color: #526354; }
.city-picker-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 12px; }
.city-picker-footer a { color: #526354; font-size: 11px; text-underline-offset: 2px; }

@media (max-width: 760px) {
  .auth-layout, .auth-layout.is-signup { grid-template-columns: 1fr; max-width: 610px; }
  .auth-intro { padding: 22px 24px; }
  .auth-intro h1 { margin-bottom: 8px; font-size: clamp(35px, 7vw, 48px); }
  .auth-intro h1 span { display: inline; }
  .auth-lead { max-width: 43ch; }
  .auth-wave { display: none; }
}
@media (max-width: 530px) {
  .auth-page main { padding-top: 16px; }
  .auth-layout { border-radius: 16px; }
  .auth-intro, .auth-card { padding: 20px 18px; }
  .auth-card h2 { margin-bottom: 15px; }
  .auth-subtitle { margin-bottom: 14px; }
  .is-signup .auth-fields { grid-template-columns: 1fr; gap: 12px; }
  .auth-actions { margin-top: 16px; }
  .auth-actions #authenticate { width: 100%; }
  .city-picker { padding: 16px; }
  .city-picker-heading h2 { font-size: 20px; }
}

main:has(.session-library, .session-review) {
  max-width: 1300px;
  padding-top: clamp(22px, 3vw, 42px);
}
.session-library-heading,
.review-overview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 22px;
}
.session-library-heading { margin-bottom: 20px; }
.session-library-heading h1, .review-heading h1 {
  margin: 0;
  font-size: clamp(26px, 4vw, 39px);
  font-weight: 620;
  line-height: 1.14;
  letter-spacing: -.045em;
}
#new-session { min-height: 44px; padding: 8px 16px; }
#new-session span { margin-right: 3px; }
.session-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.session-card {
  display: grid;
  grid-template-columns: minmax(180px, 1.25fr) minmax(170px, 1fr) auto;
  align-items: center;
  gap: 15px 22px;
  padding: 19px 22px;
  border: 1px solid #dfe5d8;
  border-radius: 15px;
  background: #fff;
}
.session-card-title h2 {
  margin: 0 0 4px;
  overflow-wrap: anywhere;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.session-card-title p, .session-card-summary { margin: 0; color: #556556; font-size: 13px; }
.session-card-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 10px; }
.session-card-summary strong, .review-heading strong { color: #263c2d; font-variant-numeric: tabular-nums; }
.session-status {
  display: inline-block;
  flex-shrink: 0;
  width: fit-content;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f5ecda;
  color: #6f5225;
  font-size: 12px;
  font-weight: 610;
  line-height: 1.5;
}
.session-status.is-submitted { background: #e6efdc; color: #385633; }
.session-card-actions, .review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.session-card-actions button, .review-actions button, .review-navigation #review-export { min-height: 42px; padding: 8px 12px; font-size: 13px; }
.session-card-actions .session-open { background: #eaf1e4; color: #2b4a30; border-color: #dce7d5; }
.session-open span { margin-left: 4px; }
.library-empty, .take-empty {
  padding: 22px;
  border: 1px solid #dfe5d8;
  border-radius: 12px;
  background: #fff;
  color: #556556;
}
.session-library #claim { margin-top: 15px; }
button.session-back {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: #3e5d46;
  font-size: 13px;
  font-weight: 580;
  text-decoration: none;
}
button.session-back:hover:enabled { background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.setup-back { margin-bottom: 6px; }

.review-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 8px;
}
.review-overview { margin-bottom: 20px; }
.review-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 12px; }
.review-heading p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  margin: 7px 0 0;
  color: #556556;
  font-size: 13px;
}
.review-heading p > span::before { content: '·'; padding: 0 8px; }
.session-review .recovery { margin-bottom: 18px; }
#session-recordings h2 { margin: 0 0 8px; font-size: 20px; line-height: 1.25; letter-spacing: -.025em; }
.take-filters {
  display: grid;
  grid-template-columns: minmax(155px, 1.5fr) minmax(0, 4fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid #dfe5d8;
  border-radius: 12px;
  background: #f0f3ea;
}
.take-filter-toggle { display: none; }
.take-filter-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}
.take-search, .take-filter-options > div {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}
.take-filters label {
  color: #3b5140;
  font-size: 12px;
  font-weight: 600;
}
.take-filters :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 7px 8px;
  border: 1px solid #cdd9ca;
  border-radius: 8px;
  background: #fff;
  color: #273c2d;
  font-size: 14px;
  font-weight: 450;
}
.take-filters input::placeholder { color: #5e6a60; opacity: 1; }
.take-filters :is(input, select):focus-visible {
  outline: 2px solid #577a59;
  outline-offset: 2px;
}
.take-result-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-height: 38px;
}
.take-count { margin: 0; color: #556556; font-size: 13px; }
button.take-clear { min-height: 34px; font-size: 13px; text-underline-offset: 3px; }
.take-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.take-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 15px;
  border: 1px solid #dfe5d8;
  border-radius: 14px;
  background: #fff;
}
.take-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.take-card h3 { margin: 0; font-size: 16px; font-weight: 640; line-height: 1.25; }
.take-duration { color: #506252; font-size: 12px; font-variant-numeric: tabular-nums; }
.take-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.take-tags li {
  padding: 2px 7px;
  border-radius: 5px;
  background: #f0f2ec;
  color: #455b48;
  font-size: 11px;
  line-height: 1.55;
}
.take-tags .take-style { background: #e6efdc; color: #385633; font-weight: 600; }
.take-transcript {
  flex: 1;
  margin: 0;
  padding: 10px 13px;
  border: 1px solid #e9ede2;
  border-radius: 9px;
  background: #f6f8f1;
  color: #25382a;
  font-family: 'Noto Naskh Arabic', 'Geeza Pro', Tahoma, sans-serif;
  font-size: 23px;
  line-height: 1.8;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.take-transcript:not([lang]) { font: inherit; }
.take-card audio { display: block; width: 100%; min-width: 0; height: 42px; }
.take-more { display: block; min-height: 44px; margin: 16px auto 0; font-size: 13px; }
.take-more[hidden], .take-clear[hidden], .take-empty[hidden] { display: none; }
.take-card:focus { outline: 2px solid #577a59; outline-offset: 2px; }

@media (max-width: 875px) {
  .session-card { grid-template-columns: minmax(0, 1fr) auto; }
  .session-card-summary { grid-column: 1; }
  .session-card-actions { grid-area: 1 / 2 / 3 / 3; justify-content: flex-end; }
  .take-list { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .take-filters { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .take-filter-toggle { display: inline-block; min-height: 44px; padding: 7px 12px; font-size: 14px; }
  .take-filter-options { display: none; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters-expanded .take-filter-options { display: grid; }
  .take-filters :is(input, select) { min-height: 44px; font-size: 16px; }
}
@media (max-width: 530px) {
  .session-library-heading { margin-bottom: 14px; }
  .session-card { grid-template-columns: 1fr; gap: 9px; padding: 14px; }
  .session-card-actions { grid-area: auto; justify-content: flex-start; }
  main:has(.session-review) { padding-top: 12px; }
  .session-card-actions button, .review-actions button, button.session-back, .review-navigation #review-export { min-height: 44px; }
  .review-overview { gap: 10px; margin-bottom: 14px; }
  .review-heading p { font-size: 12px; }
  .review-heading p > span::before { padding: 0 5px; }
  .take-filters { gap: 7px 8px; padding: 9px; }
  .take-card { padding: 12px; }
  .take-transcript { font-size: 21px; }
}