@font-face{font-family:Vazirmatn;src:url('vendor/Vazirmatn.woff2') format('woff2');font-display:swap;font-weight:100 900}
:root{--bg:#f3f5fa;--ink:#202d46;--muted:#8790a3;--line:#e8ecf3;--purple:#7659ea;--green:#16ad91;--navy:#142138}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Vazirmatn,Tahoma,sans-serif;font-size:14px}button,input{font:inherit}button{cursor:pointer;transition:background .16s,transform .16s}button:hover{filter:brightness(.97)}button:active{transform:translateY(1px)}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible{outline:3px solid #b7a7ff;outline-offset:3px}[hidden]{display:none!important}.topbar{height:88px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:var(--ink);display:flex;gap:12px;align-items:center;font-size:19px;font-weight:800}.brand-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:13px;background:var(--navy);color:#baafff;font-size:30px}.brand small{font-size:8px;letter-spacing:2.2px;display:block;margin-top:3px;color:var(--muted);font-weight:500}.top-meta{display:flex;align-items:center;gap:20px}.demo-tag{padding:5px 12px;background:#f1edfe;border:1px solid #e8e1fd;color:#8061d3;border-radius:7px;font-size:11px}.status{font-size:11px;display:inline-flex;align-items:center;gap:7px;color:var(--muted)}.status:before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}.status.ok{color:#119e7d}.status.warn{color:#c98420}.status.bad{color:#d75568}.lobby{max-width:1200px;margin:65px auto;display:grid;grid-template-columns:1.2fr 1fr;gap:100px;align-items:center;padding:0 30px}.eyebrow{font-size:11px;letter-spacing:.4px;color:#7f8b9f;display:flex;align-items:center;gap:8px}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#18b999;box-shadow:0 0 0 4px #18b99913}.intro h1{font-size:60px;line-height:1.55;letter-spacing:-2px;margin:22px 0}.intro h1 span{color:var(--purple)}.intro>p{font-size:16px;line-height:2.2;color:#778197;max-width:460px}.feature-row{display:flex;gap:24px;font-size:12px;margin-top:26px;color:#5e6b80}.session-card{display:flex;align-items:center;gap:17px;background:#fff;border:1px solid var(--line);padding:20px;border-radius:16px;margin-top:42px;box-shadow:0 10px 40px #20375504}.session-art{width:70px;height:70px;border-radius:13px;background:#eeeafa;position:relative;display:grid;place-items:center;overflow:hidden}.session-art>span{font-size:45px;color:var(--purple);z-index:1}.orbit{position:absolute;width:90px;height:30px;border:1px solid #b1a1ee;border-radius:50%;transform:rotate(-40deg)}.session-card h3{font-size:15px;margin:8px 0}.session-card p{font-size:10px;color:var(--muted);margin:0}.session-card .eyebrow{font-size:9px}.session-arrow{margin-right:auto;font-size:25px;color:#9a8bcc}.intro-note{font-size:10px;color:#9ba3b3;margin-top:23px;display:flex;align-items:center;gap:12px}.intro-note span{font-size:5px}.join-card{background:#fff;padding:30px 34px 20px;border:1px solid #e8ebf3;border-radius:22px;box-shadow:0 18px 60px #22325007}.card-top{display:flex;align-items:center;justify-content:space-between}.mini-icon{background:#f2eefe;color:var(--purple);border-radius:12px;width:42px;height:42px;display:grid;place-items:center;font-size:24px}.step{font-size:10px;color:#a2a8b6}.join-card h2{font-size:23px;margin:25px 0 8px}.muted{color:var(--muted);font-size:12px;margin:0 0 25px}form>label,#code-field>label{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:600;margin:17px 0 8px}label small{font-size:9px;font-weight:400;color:#a0a7b6}input:not([type=radio]):not([type=range]){width:100%;border:1px solid #e4e8f0;border-radius:9px;background:#fafbfe;padding:11px 13px;color:var(--ink);font-size:13px}input::placeholder{color:#a5acba}.roles{display:grid;grid-template-columns:1fr 1fr;gap:10px}.role{position:relative;display:grid;text-align:center;border:1px solid var(--line);border-radius:11px;padding:11px;cursor:pointer}.role input{position:absolute;opacity:0}.role span{font-size:25px}.role b{font-size:12px}.role small{font-size:9px;margin-top:4px}.role.selected{background:#f7f4ff;border-color:#a38bed;color:#7554cf}.primary{border:0;background:var(--purple);color:white;padding:13px 17px;border-radius:9px;width:100%;margin-top:23px;display:flex;align-items:center;justify-content:space-between;font-size:13px;box-shadow:0 5px 12px #7659ea20}.primary span{font-size:20px}.permission-note{font-size:9px;color:#a2a9b8;text-align:center;margin:17px 0 0}.error{color:#cb4254;font-size:11px;line-height:1.9;margin:10px 0 0}.classroom{padding:25px 3% 110px;max-width:1800px;margin:auto}.room-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}.room-heading h1{font-size:22px;margin:5px 0 0}.room-heading h1 span{font-size:11px;font-weight:400;color:var(--muted);margin-right:12px}.room-badges{display:flex;gap:20px;align-items:center}.timer{font-size:12px;font-family:monospace;direction:ltr;color:#7c879b}.subtle{border:1px solid #e1e5ee;border-radius:8px;padding:8px 13px;background:#fff;color:#718097;font-size:11px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 305px;gap:22px;align-items:start}.main-stage{background:#fff;border:1px solid #e2e7f0;border-radius:16px;overflow:hidden;box-shadow:0 9px 28px #182f4e04}.stage-tabs{padding:0 22px;height:62px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.tabs{display:flex;gap:25px;height:100%}.tab{border:0;background:none;color:#a0a8b7;font-size:12px;padding:0 3px;border-bottom:2px solid transparent}.tab.active{color:var(--purple);border-bottom-color:var(--purple)}.save-status{font-size:10px;color:#8c98ab}.save-status.unsaved{color:#cd9041}.board-top{display:flex;justify-content:space-between;padding:19px 24px;color:#a0a9b8;font-size:10px}.board-top>span:first-child{direction:ltr;letter-spacing:1.6px;font-size:9px}.board-top b{background:#f0edf9;color:#9d8acb;padding:3px 6px;border-radius:4px;font-weight:400;margin-left:8px}.canvas-wrap{position:relative;margin:0 20px;background-color:#fdfdff;background-image:radial-gradient(#dce1eb .8px,transparent .8px);background-size:20px 20px;border:1px solid #edf0f6;border-radius:8px;aspect-ratio:16/9;overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:none;position:relative;z-index:1;cursor:crosshair}canvas.readonly{cursor:default}.board-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none}.board-placeholder>span{font-size:52px;color:#c5bbeb}.board-placeholder h3{font-size:17px;color:#9b94ae;font-weight:500;margin:12px 0}.board-placeholder p{font-size:11px;color:#b0aabb;margin:0}.board-bottom{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;min-height:65px}.drawing-tools{display:flex;align-items:center;gap:9px}.color{border:3px solid white;background:var(--swatch);border-radius:50%;width:22px;height:22px;box-shadow:0 0 0 1px transparent}.color.selected{box-shadow:0 0 0 1px var(--swatch)}.tool-divider{height:23px;width:1px;background:var(--line);margin:0 6px}.width-control{display:flex;gap:7px;align-items:center;font-size:10px;color:#9a9faf}.width-control input{width:55px;accent-color:var(--purple)}.tool-button{background:none;border:0;font-size:20px;color:#7e8798;padding:0 6px}.danger-text{font-size:10px;color:#c08691}.board-size{font-size:9px;color:#b8bfcb;direction:ltr}#readonly-note{font-size:11px;color:#969bb0}.stage-footer{padding:13px 23px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:#9ba5b6;font-size:10px;background:#fcfdff}.stage-footer>span:first-child{display:flex;align-items:center;gap:7px}.role-badge{background:#f0edfb;color:#9178c7;padding:4px 10px;border-radius:6px}.screen-panel{height:520px;background:#101a2d;position:relative;display:grid;place-items:center}.empty-screen{text-align:center;color:#73819a;padding:30px}.empty-screen>span{font-size:45px}.empty-screen h3{font-size:18px;color:#b3bfd4}.empty-screen p{font-size:12px}#screen-tracks{width:100%;height:100%;position:absolute;inset:0;display:flex;flex-wrap:wrap}#screen-tracks video{width:100%;height:100%;object-fit:contain;min-height:0}.sidebar{display:flex;flex-direction:column;gap:18px}.people-card,.chat-card{border:1px solid #e2e7f0;background:white;border-radius:14px;overflow:hidden}.section-heading{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;border-bottom:1px solid var(--line)}.section-heading h2{font-size:12px;margin:0}.count{font-size:10px;background:#f0edf9;color:#9374ca;padding:2px 7px;border-radius:5px}.video-grid{display:grid;gap:8px;padding:12px 12px 0;grid-template-columns:repeat(auto-fit,minmax(115px,1fr))}.video-tile{aspect-ratio:16/10;background:linear-gradient(120deg,#26354d,#172239);border-radius:9px;position:relative;overflow:hidden;display:grid;place-items:center}.video-tile .video-avatar{width:42px;height:42px;border-radius:50%;background:#4b4274;color:#ddd3ff;display:grid;place-items:center;font-size:20px}.video-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.video-tile video.local{transform:scaleX(-1)}.video-name{position:absolute;bottom:6px;right:7px;color:#fff;font-size:9px;background:#14213888;padding:2px 6px;border-radius:4px;z-index:2}.participant-list{padding:8px 15px 12px;max-height:135px;overflow:auto}.person{display:flex;align-items:center;gap:9px;font-size:11px;padding:6px 0}.person .avatar{width:26px;height:26px;font-size:11px}.person small{font-size:8px;color:#9da5b3;margin-right:auto}.person .mic-indicator{color:#b2b9c5;font-size:15px}.person .mic-indicator.on{color:var(--green)}.avatar{width:36px;height:36px;border-radius:11px;background:#eee8ff;color:#896ac7;display:grid;place-items:center;font-weight:600}.chat-card{display:flex;flex-direction:column}.tiny-label{font-size:7px;letter-spacing:1.3px;color:#b0b6c5}.chat-messages{height:205px;padding:12px 15px;overflow:auto}.chat-welcome{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;height:100%;color:#b0b5c3}.chat-welcome>span{font-size:26px;color:#c3b8e5}.chat-welcome p{font-size:11px;margin:8px 0}.chat-welcome small{font-size:9px;line-height:1.9;max-width:190px}.message{margin-bottom:13px}.message-head{display:flex;justify-content:space-between;font-size:9px;color:#929bad}.message-head b{color:#81719d;font-weight:500}.message p{font-size:11px;line-height:1.9;background:#f5f6fa;padding:8px 10px;border-radius:0 9px 9px;margin:4px 0;overflow-wrap:anywhere}.message.mine p{background:#f1edfc}.chat-form{border-top:1px solid var(--line);display:flex;gap:7px;padding:10px}.chat-form input:not([type=radio]){background:white;border:0;font-size:11px;padding:8px}.chat-form button{border:0;background:#ede7fd;border-radius:8px;color:#8a69d4;width:35px;flex-shrink:0;font-size:21px}.controlbar{position:fixed;bottom:0;left:0;right:0;z-index:10;min-height:82px;background:#fff;border-top:1px solid #e3e8f0;display:flex;align-items:center;justify-content:space-between;padding:14px 3%}.self-info{display:flex;align-items:center;gap:10px;min-width:150px}.self-info b{display:block;font-size:11px}.self-info small{font-size:9px;color:#a1a8b5}.media-controls{display:flex;align-items:center;gap:10px}.media-button{display:flex;align-items:center;gap:8px;font-size:10px;background:#f5f6fa;border:1px solid #edeff5;color:#7a859a;border-radius:9px;padding:10px 15px}.media-button>span{font-size:18px}.media-button.enabled{background:#eeebfd;color:#7655cf;border-color:#ddd3f9}.control-divider{height:25px;width:1px;background:var(--line);margin:0 5px}.leave-button{background:#fff0f1;border:1px solid #f8e2e5;color:#d17380;padding:10px 17px;border-radius:9px;font-size:11px}.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);z-index:30;background:#24314b;color:#fff;padding:13px 24px;border-radius:10px;box-shadow:0 8px 30px #0002;font-size:12px;max-width:90%;line-height:1.9}#audio-tracks{display:none}@media(min-width:1500px){.classroom{padding-top:35px}.workspace{grid-template-columns:minmax(0,1fr) 340px}.chat-messages{height:270px}}@media(max-width:1050px){.lobby{gap:40px;margin-top:40px}.intro h1{font-size:46px}.workspace{grid-template-columns:minmax(0,1fr) 260px}.drawing-tools{gap:6px}.board-size{display:none}.room-heading h1{font-size:18px}.room-badges{gap:10px}.board-placeholder h3{font-size:14px}.board-placeholder p{font-size:9px}.stage-hint{display:none}}@media(max-width:760px){.topbar{height:70px;padding:0 5%}.top-meta .status{display:none}.brand{font-size:16px}.lobby{grid-template-columns:1fr;margin-top:30px;gap:30px;padding:0 22px}.intro h1{font-size:39px;margin:12px 0}.intro>p{font-size:13px}.session-card{display:none}.intro-note{display:none}.feature-row{gap:15px;font-size:10px}.join-card{margin-bottom:25px;padding:24px}.classroom{padding:20px 13px 130px}.room-heading{align-items:flex-start;gap:10px}.room-heading h1{font-size:16px}.room-heading h1 span{display:block;margin:3px 0}.room-badges{flex-wrap:wrap;justify-content:flex-end}.room-badges .subtle{font-size:9px;padding:5px}.workspace{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:10px}.chat-messages{height:180px}.stage-tabs{height:53px;padding:0 15px}.tabs{gap:15px}.tab{font-size:10px}.save-status{font-size:8px}.board-top{padding:14px}.canvas-wrap{margin:0 10px}.board-placeholder h3{font-size:12px}.board-placeholder>span{font-size:28px}.board-placeholder p{font-size:8px}.board-bottom{padding:12px}.stage-footer{padding:10px 14px;font-size:8px}#stage-hint{display:none}.controlbar{flex-wrap:wrap;gap:8px;min-height:110px;padding:10px 15px}.self-info{min-width:100px}.self-info .avatar{height:29px;width:29px}.media-controls{order:3;justify-content:center;width:100%;gap:7px}.media-button{font-size:9px;padding:6px 12px}.leave-button{padding:7px 12px;font-size:10px}.screen-panel{height:320px}.people-card .section-heading,.chat-card .section-heading{padding:12px}.tiny-label{font-size:6px}.video-grid{grid-template-columns:1fr}.chat-form{padding:5px}.board-size{display:none}.width-control input{width:40px}.color{height:20px;width:20px}}

.person.hand-raised{background:#fff6dc;border-radius:8px;padding-inline:6px}.hand-indicator{font-size:17px;flex-shrink:0}.person>span:nth-child(2){overflow-wrap:anywhere;min-width:0}@media(max-width:760px){.media-controls{flex-wrap:wrap}.classroom{padding-bottom:165px}}
/* MVP classroom styling aligned with the supplied presenter / learner references. */
body:has(.classroom:not([hidden])){background:#020f20;color:#fff}
body:has(.classroom:not([hidden]))>.topbar{display:none}
.classroom{max-width:none;padding:22px 24px 112px;min-height:100vh}
.room-heading{direction:ltr;min-height:48px;margin-bottom:20px;gap:20px}
.room-heading>div{direction:rtl}.room-heading .eyebrow{display:none}.room-heading h1{font-size:23px;color:#fff}.room-heading h1 span{color:#a4b3cb}.room-badges{direction:rtl}.room-badges .status{font-size:12px;color:#00dce7;background:#202c42;padding:9px 15px;border-radius:24px}.timer{background:#18263b;color:white;border-radius:25px;padding:10px 18px}.subtle{border:1px solid #35415a;background:#253047;color:#fff;border-radius:22px}
.workspace{direction:ltr;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:stretch}.main-stage,.sidebar{direction:rtl}.main-stage{border-radius:25px;background:#fcfcff;border:1px solid #dce0ec;color:#101a45;box-shadow:none;min-width:0}.stage-tabs{height:57px;border-bottom:1px solid #ecedf5}.stage-tabs strong{font-size:17px;color:#10205c}.board-top{padding:12px 24px}.canvas-wrap{background:#fff;background-image:none;border:0;border-radius:12px;margin:0 18px;aspect-ratio:16/9}.board-placeholder>span{color:#084cff;font-size:48px}.board-placeholder h3{color:#101b61;font-size:25px;font-weight:700}.board-placeholder h3:after{content:'';display:block;height:3px;background:#18ca39;border-radius:100%;margin:15px auto;width:85%}.board-placeholder p{color:#8490a7}.board-bottom{min-height:66px}.drawing-tools{padding:10px 14px;border-radius:16px;background:#fff;box-shadow:0 3px 12px #14204420}.tool-button{color:#101b48}.stage-footer{background:#f5f6fc}.role-badge{background:#e6edff;color:#0047ff}
.sidebar{gap:0;background:#fcfcff;border-radius:25px;overflow:hidden;color:#111b35;border:1px solid #dce0ec}.people-card,.chat-card{border:0;border-radius:0;background:transparent}.people-card{flex:0 0 auto}.section-heading{padding:18px 20px}.section-heading h2{font-size:16px;color:#064cff}.count{background:#e9efff;color:#004bff;border-radius:20px}.participant-list{max-height:210px;padding:10px 19px}.person{font-size:13px;padding:12px 0;border-bottom:1px solid #edf0f7}.person .avatar{width:35px;height:35px;border-radius:50%;background:#d8e8ff;color:#004bff}.chat-card{flex:1;min-height:240px}.chat-messages{height:230px;flex:1}.tiny-label{display:none}.chat-form{margin:8px;border:1px solid #e2e5f1;border-radius:25px;background:white}.chat-form button{border-radius:50%;background:#004bff;color:#fff}.message.mine p{background:#dce7ff}.message-head b{color:#004bff}
.classroom>.video-grid{direction:ltr;display:flex;gap:14px;padding:0;margin:0 340px 20px 0;overflow-x:auto;min-height:112px}.video-tile{flex:0 0 175px;aspect-ratio:16/10;border:2px solid #536078;border-radius:18px;background:linear-gradient(135deg,#767c94,#323b54)}.video-tile:first-child{border-color:#00dce7;background:linear-gradient(135deg,#46bcdc,#22749c)}.video-tile .video-avatar{height:58px;width:58px;font-size:28px;background:#17294080;color:#fff}.video-name{font-size:12px;bottom:0;right:0;left:0;padding:6px 10px;text-align:center;background:#06101dcc;border-radius:12px}
.controlbar{background:#020f20;border:0;min-height:94px;padding:18px 26px;color:white;gap:14px}.media-controls{gap:13px}.media-button{border:1px solid #34415a;background:#263149;color:#fff;border-radius:28px;padding:13px 20px;font-size:12px}.media-button.enabled{background:#a2f3ac;color:#07982a;border-color:#cdf7cd}#toggle-screen.enabled{background:#004bff;color:#fff}.leave-button{background:#ed203a;color:white;border:1px solid #ff4458;border-radius:25px;padding:13px 25px;font-weight:700}.self-info .avatar{background:#263149;color:#fff;border-radius:50%}.self-info small{color:#a9b6cc}#record-class{border-color:#ed203a;color:#fff}.save-status{color:#6e7892}
@media(min-width:1600px){.workspace{grid-template-columns:minmax(0,1fr) 360px}.classroom>.video-grid{margin-right:380px}.video-tile{flex-basis:210px}}
@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr) 275px}.classroom>.video-grid{margin-right:295px}.room-heading{flex-wrap:wrap}.room-heading h1{font-size:19px}.media-button{padding:11px 13px}.self-info{min-width:100px}}
@media(max-width:760px){.classroom{padding:16px 12px 175px}.room-heading{direction:rtl}.room-badges{gap:7px;justify-content:flex-start}.workspace{grid-template-columns:1fr;gap:14px}.classroom>.video-grid{margin:0 0 14px;min-height:95px}.video-tile{flex-basis:145px}.sidebar{display:flex}.participant-list{max-height:160px}.chat-messages{height:180px}.board-placeholder h3{font-size:17px}.board-placeholder p{font-size:10px}.controlbar{padding:10px 12px}.media-controls{flex-wrap:wrap;gap:7px}.media-button{padding:9px 12px;font-size:10px}.leave-button{padding:10px 18px}.drawing-tools{gap:5px;padding:8px}.room-heading h1 span{display:block}.canvas-wrap{margin:0 8px}}
/* Fit the live classroom to the viewport and keep learner controls consistent. */
@media(min-width:761px){
 body:has(.classroom:not([hidden])){overflow:hidden}
 .classroom{height:100dvh;min-height:0;display:flex;flex-direction:column;padding:16px 24px 108px}
 .room-heading{flex-shrink:0;margin-bottom:14px;min-height:44px}
 .classroom>.video-grid{flex-shrink:0;height:clamp(80px,15vh,145px);min-height:0;margin-bottom:14px}
 .video-tile{height:100%;flex-basis:auto;width:auto;min-width:140px}
 .workspace{flex:1;min-height:0;align-items:stretch}
 .main-stage{display:flex;flex-direction:column;min-height:0}
 .stage-tabs{flex-shrink:0;height:48px}
 .board-panel{display:flex;flex-direction:column;flex:1;min-height:0}
 .board-top{flex-shrink:0;padding:8px 20px}
 .canvas-wrap{flex:1;min-height:0;aspect-ratio:auto}
 .board-bottom{flex-shrink:0;min-height:52px;padding:8px 20px}
 .stage-footer{flex-shrink:0;padding:8px 20px}
 .screen-panel{flex:1;height:auto;min-height:0}
 .sidebar{min-height:0}
 .people-card{max-height:45%;overflow:auto}
 .chat-card{min-height:0}
 .chat-messages{min-height:0;height:auto;overflow:auto}
 .chat-form{flex-shrink:0}
}
.media-controls>.media-button{height:46px;min-height:46px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;line-height:1;white-space:nowrap}
.media-controls>.control-divider{display:none}
/* Dark lobby. */
body{background:#020f20;color:#e9efff}
.topbar{background:#08172b;border-color:#23314a}.brand{color:#f4f7ff}.brand-icon{background:#203351;color:#00dce7}.demo-tag{background:#142b4b;color:#91b8ff;border-color:#294469}
.intro h1{color:#f4f7ff}.intro h1 span{color:#4e8dff}.intro>p,.feature-row{color:#a9b8d0}.eyebrow{color:#8ea7c8}.session-card,.join-card{background:#0e2038;border-color:#293c59;box-shadow:0 18px 60px #0003}.session-art{background:#193451}.session-art>span{color:#65a9ff}.session-card h3,.join-card h2{color:#f3f6ff}.session-card p,.muted,.permission-note,.intro-note{color:#96a8c3}.mini-icon{background:#18375a;color:#6ab6ff}.role{border-color:#344762;color:#c0cde2}.role.selected{background:#153b70;border-color:#4c8eff;color:#e8f1ff}.join-card input:not([type=radio]){background:#08182c;border-color:#304460;color:#f1f5ff}.join-card input::placeholder{color:#8194af}.primary{background:#0753ff;box-shadow:0 5px 18px #004bff30}.join-card label small,.step{color:#95a7c1}
@media(max-width:760px){.media-controls>.media-button{height:40px;min-height:40px}}
/* Recording action: a clear, consistent header control. */
#record-class{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:42px;padding:9px 18px;border:1px solid #f35265;border-radius:12px;background:#371d30;color:#fff;font-size:13px;font-weight:700;line-height:1.5;box-shadow:0 3px 12px #0002;white-space:nowrap;transition:background .16s,border-color .16s}
#record-class:before{content:'';width:11px;height:11px;flex-shrink:0;border-radius:50%;background:#ff4059;box-shadow:0 0 0 4px #ff405920}
#record-class:hover:not(:disabled){background:#542338;border-color:#ff8292}
#record-class:focus-visible{outline:3px solid #ff8d9c;outline-offset:3px}
#record-class:disabled{opacity:.65;cursor:wait}
.room-badges:has(#recording-notice:not([hidden])) #record-class{background:#d92340;border-color:#fa536c}
.room-badges:has(#recording-notice:not([hidden])) #record-class:before{border-radius:2px;background:#fff;box-shadow:none}
.room-badges:has(#recording-notice:not([hidden])) #record-class:hover:not(:disabled){background:#b91e36}

/* Whiteboard integration; keep classroom theme and editor inputs separate. */
.excalidraw-wrap{height:clamp(440px,65vh,760px);min-width:0;direction:ltr}.board-panel:has(.excalidraw-wrap){overflow:hidden}.board-panel .board-bottom{gap:12px;flex-wrap:wrap}.board-panel .excalidraw button{transition:none;transform:none}.board-panel .excalidraw input{width:auto;background:initial;border-radius:initial;padding:initial}.board-panel .excalidraw label{margin:0}.board-panel .excalidraw .library-button{display:none}