:root{--bg:#081622;--panel:#0f2231;--cy:#2dd4bf;--am:#fbbf24;--tx:#e6f1f5;--mu:#8fa8b6;--ln:#1d3a4e}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 500px at 80% -10%,#0d2d3a,transparent),var(--bg);color:var(--tx);font:15px/1.5 "Avenir Next","Trebuchet MS",sans-serif;min-height:100dvh}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--am);color:#000;padding:6px 10px;z-index:9}
.mast{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding:18px clamp(14px,3vw,36px);border-bottom:1px solid var(--ln)}
.brand{display:flex;gap:14px;align-items:center}.brand img{height:64px;width:auto}
.kicker{margin:0;color:var(--cy);letter-spacing:.18em;font-size:12px;font-weight:700}
h1{margin:2px 0 0;font:600 clamp(20px,3vw,30px)/1.15 Georgia,"Palatino Linotype",serif}
h2{margin:0 0 12px;font:600 13px sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--am)}
.actions,.account{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.account{font-size:12px;color:var(--mu)}
.account [hidden]{display:none}
.studio-start{margin:16px clamp(14px,3vw,36px);padding:14px 16px;border:1px solid var(--ln);border-radius:12px;background:var(--panel)}
.studio-start h2{margin-bottom:8px}
.studio-start ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:0}
.studio-start a{display:block;padding:4px 0;color:var(--tx);text-decoration:none}
.studio-start a:hover strong{text-decoration:underline}
.studio-start strong{display:block;color:var(--cy);font-size:14px}
.studio-start span,.studio-start p{color:var(--mu);font-size:12px}
.studio-start span{display:block;margin-top:3px}
.studio-start p{margin:10px 0 0}
#lesson-section,#teacher-preview-section,#live-room-section{scroll-margin-top:16px}
@media(max-width:680px){.studio-start ol{grid-template-columns:1fr;gap:8px}}
.btn{font:inherit;font-weight:600;color:var(--tx);background:#14303f;border:1px solid var(--ln);border-radius:8px;padding:9px 14px;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover:not(:disabled){border-color:var(--cy)}
.btn.primary{background:var(--cy);color:#04211d;border-color:var(--cy)}
.btn.danger{border-color:#b45454;color:#ffb4b4}
.btn:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:3px solid var(--am);outline-offset:2px}
.grid{display:grid;gap:16px;padding:clamp(14px,3vw,36px);grid-template-columns:repeat(12,1fr);max-width:1500px;margin:auto}
.panel{background:var(--panel);border:1px solid var(--ln);border-radius:12px;padding:18px;min-width:0}
.room{grid-column:span 4}.pick{grid-column:span 8}.importer,.editor{grid-column:1/-1}.radar{grid-column:span 5}.preview{grid-column:span 7}
.code{font:700 clamp(44px,7vw,72px)/1 "Courier New",monospace;letter-spacing:.2em;color:var(--cy);margin:4px 0}
.status,.hint{color:var(--mu);font-size:13px;margin:6px 0}
.stats{display:flex;gap:28px;margin:10px 0}.stats dt{font-size:11px;letter-spacing:.12em;color:var(--mu);text-transform:uppercase}.stats dd{margin:0;font-size:20px;font-weight:700}
.toggle{display:flex;gap:10px;align-items:center;font-weight:600}.toggle input{width:20px;height:20px;accent-color:var(--cy)}
.row{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
label{display:block;font-size:12px;color:var(--mu);letter-spacing:.04em}
input,select,textarea{width:100%;margin-top:4px;background:#0a1a27;color:var(--tx);border:1px solid var(--ln);border-radius:8px;padding:9px;font:inherit}
input[type=radio]{width:auto;margin:0}input[type=range]{padding:0}
.link{font:12px "Courier New",monospace;color:var(--cy)}
.msg{min-height:1.4em;color:var(--am);margin:8px 0 0}.msg.ok{color:var(--cy)}
.lesson-readiness{margin:14px 0;padding:14px;border:1px solid var(--ln);border-left:3px solid var(--am);border-radius:8px;background:#0b1c2a}
.lesson-readiness[data-state=ready]{border-left-color:var(--cy)}
.lesson-readiness h3{margin:0;color:var(--tx);font-size:16px}
.lesson-readiness .hint{font-size:12px}
.readiness-stops{list-style:none;padding:0;margin:12px 0}
.readiness-stops details{border-top:1px solid var(--ln);padding:8px 0}
.readiness-stops summary{cursor:pointer;display:list-item;font-size:13px;overflow-wrap:anywhere}
.readiness-stops summary strong{display:inline-block;margin-left:10px;font-size:12px;white-space:nowrap}
.readiness-ready{color:var(--cy)}.readiness-review,.readiness-warning{color:var(--am)}
.readiness-body{padding:6px 0 6px 14px;font-size:13px;overflow-wrap:anywhere}
.readiness-body p{margin:8px 0}.readiness-body ol{padding-left:20px}
.readiness-check{font-weight:600}
.readiness-confirm{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--tx);letter-spacing:normal;margin-top:10px}
.readiness-confirm input{width:18px;height:18px;flex:none;margin:2px 0;accent-color:var(--cy)}
.readiness-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
#lesson-review-printout{display:none}
@media print{
 @page{margin:16mm}
 html,body{height:auto!important;overflow:visible!important;background:#fff!important;color:#000!important}
 body>*{display:none!important}
 body>#lesson-review-printout{display:block!important;position:static!important;margin:0;padding:0}
 #lesson-review-printout pre{white-space:pre-wrap;overflow-wrap:anywhere;font:10pt/1.45 Arial,sans-serif;color:#000;background:#fff;margin:0}
}
.radar canvas{width:100%;max-width:380px;display:block;margin:auto;background:#081622;border-radius:50%}
.mono{font:13px "Courier New",monospace;color:var(--mu);margin:6px 0}
.manual{margin-top:8px}.wps{margin:8px 0 0;padding-left:20px;font:13px "Courier New",monospace;color:var(--am)}
iframe{width:100%;height:min(52vh,420px);border:1px solid var(--ln);border-radius:8px;background:#000}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.wide{grid-column:1/-1}
.room-code-label{display:block;color:var(--mu);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.lesson-filters{display:grid;grid-template-columns:minmax(220px,1.2fr) minmax(220px,1fr);gap:10px;margin-bottom:8px}
.lesson-filter-unit[hidden]{display:none}
.lesson-filter-status{min-height:1.4em;color:var(--mu);font-size:12px;margin:0 0 8px}
.checkpoint-broadcast{display:grid;grid-template-columns:minmax(180px,1fr) minmax(210px,1.3fr) auto;align-items:end;gap:10px;margin:12px 0}
.checkpoint-broadcast label{margin:0}
.checkpoint-broadcast .btn{margin:0;white-space:nowrap}
.coordinate-broadcast{align-items:center;margin:12px 0}.coordinate-broadcast .btn{margin:0;white-space:nowrap}
.coordinate-broadcast .hint{margin:0}
.cps{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:16px}
.cp{border:1px solid var(--ln);border-top:3px solid var(--am);border-radius:10px;padding:14px;display:grid;gap:10px;background:#0b1c2a}
.cp h3{margin:0;color:var(--cy);font-size:14px}
.opt{display:flex;gap:8px;align-items:center}.opt span{font-size:12px;color:var(--am);white-space:nowrap}
.bad{border-color:#e06b6b!important}
.import-controls{display:grid;grid-template-columns:minmax(220px,1fr) auto;align-items:end;gap:12px}
.import-controls .btn{white-space:nowrap}
.import-status{color:var(--mu);font-size:13px;margin:12px 0}
.import-status.error{color:#ffb4b4}.import-status.ok{color:var(--cy)}
.import-preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;list-style:none;padding:0;margin:0}
.import-preview:empty{display:none}
.import-entry{border:1px solid var(--ln);border-radius:8px;padding:12px;background:#0b1c2a}
.import-entry.ready{border-left:3px solid var(--cy)}.import-entry.invalid{border-left:3px solid #e06b6b}
.import-include{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:var(--tx);font-size:13px;letter-spacing:0;cursor:pointer}
.import-include input{width:20px;height:20px;margin:0;accent-color:var(--cy)}
.import-unavailable{margin:0 0 8px;color:#ffb4b4;font-size:12px;font-weight:700}
.import-entry summary{cursor:pointer;font-weight:700}.import-entry .import-meta{color:var(--mu);font-size:12px;margin:6px 0}
.import-entry .import-include{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.import-entry .import-include input{width:auto}
.import-entry.duplicate{border-left:3px solid #fbbf24}
.import-entry .import-errors{color:#ffb4b4;font-size:13px;margin:8px 0 0;padding-left:18px}
.import-entry ol{padding-left:22px;font-size:13px}.import-entry li+li{margin-top:8px}
@media(max-width:1000px){.room,.pick,.radar,.preview{grid-column:1/-1}}
@media(max-width:700px){.checkpoint-broadcast,.import-controls,.lesson-filters{grid-template-columns:1fr}.checkpoint-broadcast .btn,.import-controls .btn{width:100%}.coordinate-broadcast .btn{width:100%}}
@media(max-width:560px){.brand img{height:48px}.btn{flex:1;text-align:center}}
@media(prefers-reduced-motion:no-preference){.btn{transition:border-color .15s}}
.preview-steps{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.preview-steps button{flex:1;min-width:76px;min-height:48px}
.preview-steps button[aria-current="step"]{background:#2dd4bf;color:#081622;border-color:#2dd4bf;font-weight:800}
.preview-cards{display:grid;gap:12px;margin:14px 0}
.preview-card{padding:16px;border:1px solid #345768;border-radius:12px;background:#081622;color:#e9f7f5}
.preview-card h3{margin:0 0 10px}.preview-card p{line-height:1.55;white-space:pre-wrap}
.preview-card .btn{min-height:44px}.preview-card .btn[aria-pressed="true"]{background:#2dd4bf;color:#081622;box-shadow:0 0 12px #2dd4bf66}
#teacherPreviewLanguage{max-width:100%;min-height:46px}
#teacherPreviewStatus,#teacherPreviewAudioStatus{line-height:1.5;color:#c4e4df}
#teacherPreviewControls :focus-visible{outline:3px solid #2dd4bf;outline-offset:3px}
.panel.preview{padding:12px}
.preview .preview-card{padding:12px}
.preview-bar{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.preview-bar .preview-steps{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;margin:0;padding-bottom:2px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.preview-bar .preview-steps button{flex:0 0 auto;min-width:54px;min-height:44px;border-radius:999px;padding:6px 8px;white-space:nowrap}
.preview-lang{flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:2px;font-size:12px}
.preview-lang label{margin:0;white-space:nowrap}
.preview-lang select{width:auto;min-width:130px;min-height:44px;margin:0}
#teacherPreviewStatus[hidden],#teacherPreviewAudioStatus[hidden]{display:none}
#teacherPreviewStatus:not([hidden]),#teacherPreviewAudioStatus:not([hidden]){margin:0 0 8px;padding:8px 12px;border-left:3px solid var(--am);background:#0b1c2a;color:#ffd98a;font-size:13px}
.preview .preview-cards{margin:8px 0}
.laptop-play-status{padding:9px 12px;margin:8px 0;border:1px solid var(--ln);border-left:3px solid var(--am);border-radius:8px;background:#0b1c2a;font-size:13px}
.laptop-play-status strong{color:var(--am)}
.laptop-play-status p{margin:4px 0 0;color:var(--tx);line-height:1.45}
.laptop-play-status[data-state=ready]{border-left-color:var(--cy)}
.laptop-play-status[data-state=ready] strong{color:var(--cy)}
.preview iframe{margin-top:0;height:min(60vh,520px)}
.preview-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
.preview-card-header h3{margin:0;flex:1;font-size:16px;line-height:1.3;color:var(--cy)}
.preview-audio-toggle{flex:0 0 auto;width:44px;height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;line-height:1;color:var(--tx);background:#14303f;border:1px solid #345768;border-radius:50%;cursor:pointer;margin-left:auto}
.preview-audio-toggle:hover{border-color:var(--cy)}
.preview-audio-toggle[aria-pressed="true"]{background:var(--cy);color:#081622;border-color:var(--cy)}
.preview-card-description,.preview-card-prompt{margin:0 0 8px;line-height:1.55;white-space:pre-wrap}
.preview-card-prompt{color:#fff;font-weight:600}
.preview-card-options{margin:0 0 8px;padding-left:22px}.preview-card-options li+li{margin-top:4px}
.preview-card-artifact{margin:8px 0 0;padding:8px 12px;border-left:3px solid var(--am);background:#0b1c2a;color:#ffd98a;font-size:13px}
.preview-heading{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.preview-heading h2{margin:0}
.preview-heading [hidden],.preview-rehearsal-note{display:none}
body.student-preview-open{overflow:hidden}
.student-preview-open .panel.preview{position:fixed;inset:0;z-index:15000;border-radius:0;display:flex;flex-direction:column;gap:8px}
.student-preview-open .preview-heading{flex-wrap:wrap;flex-shrink:0;margin:0}
.student-preview-open .preview-rehearsal-note{display:block;color:var(--mu);font-size:12px}
.student-preview-open #teacherPreviewClose{margin-left:auto}
.student-preview-open #teacherPreviewControls{flex-shrink:0}
.student-preview-open #teacherPreviewCards{display:none}
.student-preview-open .preview iframe{flex:1;min-height:0;width:100%;height:auto}
@media(max-width:560px){.preview-bar{flex-direction:column;align-items:stretch}.preview-lang select{flex:1}.preview-bar .btn{flex:0 0 auto}}
.imagery-safeguards{margin:12px 24px;padding:14px 18px;border:1px solid #2dd4bf;border-radius:12px;background:#081622;color:#e6f6f4}
.imagery-safeguards h2{font-size:1.1rem;margin:0 0 6px}.imagery-safeguards p{margin:8px 0;line-height:1.5}
.imagery-safeguards a{color:#5eead4}.imagery-safeguards summary{cursor:pointer;min-height:36px;padding:8px 0;font-weight:700}
.imagery-safeguards[data-level="warning"]{border-color:#facc15}.imagery-safeguards[data-level="paused"]{border-color:#fb923c}
.imagery-meter{padding:10px 0;border-bottom:1px solid #294452}.imagery-meter label{display:block;font-weight:600}
.imagery-meter progress{display:block;width:min(100%,520px);height:16px;accent-color:#2dd4bf;margin-top:6px}
.student-preview-open .imagery-safeguards{display:none}
.imagery-safeguards dialog{max-width:580px;width:calc(100% - 48px);padding:24px;border:2px solid #facc15;border-radius:14px;background:#081622;color:#e6f6f4}
.imagery-safeguards dialog::backdrop{background:#000b}.imagery-safeguards button:disabled{opacity:.5}
.imagery-safeguards [hidden]{display:none!important}
@media(max-width:560px){.imagery-safeguards{margin:10px;padding:12px}}