.classbar{background:#e9efdf;border-bottom:1px solid #d6dfc9;color:#3f6248;padding:8px 24px;display:flex;align-items:center;gap:12px;min-height:56px;flex-wrap:wrap;font-family:system-ui,sans-serif}.classbar strong{letter-spacing:3px;font-size:22px}.classbar small{font-size:12px;letter-spacing:0}.classbar .room-message{font-size:13px;margin-right:auto;letter-spacing:0}.classbar button,.classbar a{padding:7px 13px;font-size:13px;min-height:36px}.room-dialog{border:1px solid #d8decd;border-radius:20px;padding:30px;color:#2a483a;background:#fffcf3;width:min(480px,calc(100vw - 30px));max-height:85svh}.room-dialog::backdrop{background:#183c2e88}.room-dialog h2{margin:0 0 20px}.room-dialog label{display:block;font-size:14px;margin:16px 0 7px}.room-dialog input{display:block;font-size:18px;width:100%;border:1px solid #cfd9c6;border-radius:9px;padding:12px;background:#fff;color:#2a483a}.room-dialog .room-error{color:#a85730;font-size:14px;line-height:1.6}.room-dialog p{font-size:13px;line-height:1.8}.room-dialog .room-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.roster{width:min(850px,calc(100vw - 24px))}.roster-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:16px 0}.roster-seat{background:#f0f1e7;padding:12px 5px;border-radius:8px;text-align:center;font-size:13px;line-height:1.7}.roster-seat.ok{background:#e0efcf}.roster-seat.review{background:#fff0d7}.student-follow .stages,.student-follow .footer{display:none}.student-follow .workspace{padding-top:14px}.student-follow [data-action="gridmode"],.student-follow [data-action="direction"],.student-follow [data-action="vertical"]{pointer-events:none;opacity:.6}.classbar .disconnected{color:#a25131}.room-dialog button{min-height:42px}@media(max-width:600px){.classbar{padding:8px 12px;gap:6px}.classbar strong{font-size:18px}.room-message{width:100%}.roster-grid{grid-template-columns:repeat(4,1fr)}}
/* Classroom management is an optional dialog, never a page-wide header. */
.classroom-panel{display:none;border:1px solid #e3d2c4;border-radius:24px;background:#fffcf4;color:#675267;padding:30px;width:min(520px,calc(100vw - 28px));max-height:85dvh;text-align:center;box-shadow:0 24px 100px #51355333}
.classroom-panel[open]{display:block}.classroom-panel::backdrop,.room-dialog::backdrop{background:#49374f66;backdrop-filter:blur(4px)}.panel-heading{display:flex;align-items:center;justify-content:space-between;text-align:left;gap:15px}.panel-heading h2{font:26px 'Songti SC',serif;margin:0}.panel-heading button{font-size:25px;border:0;background:transparent}.classroom-panel p{font-size:14px;line-height:1.9;color:#99858e}.classroom-panel .room-code{display:block;font:600 46px system-ui;letter-spacing:8px;color:#815788;padding:16px 5px;background:#f5edf4;border-radius:16px}.classroom-panel .room-actions{display:flex;justify-content:center;gap:10px;margin-top:18px}.classroom-panel .room-actions button{font-size:15px;min-height:46px}.classroom-panel .secondary-actions button{background:none;border:0;color:#ad9799;font-size:12px}.classroom-panel>button.primary{margin-top:12px;font-size:15px;padding:14px 26px}.classroom-panel .room-message{font-size:13px;margin:14px 0 0}.room-dialog{color:#675267;border-color:#e3d2c4;background:#fffcf4}.room-dialog input{border-color:#decfde;color:#785080}.room-dialog input[type=hidden]{display:none}.student-status{position:fixed;z-index:4;bottom:14px;right:18px;min-height:36px;padding:4px 12px;display:flex;gap:10px;border:1px solid #e6d7de;background:#fffcf5e8;color:#9b7f95;border-radius:20px;box-shadow:0 3px 20px #51355308}.student-status .room-message{font-size:12px;width:auto}.student-status button{min-height:28px;padding:4px 7px;font-size:11px;border:0;background:none;color:#b49aa9}.roster-seat{background:#f3ebed}.roster-seat.ok{background:#e9efdd}.roster-seat.review{background:#fff0db}
.class-pin{position:fixed;z-index:6;left:38px;top:12px;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 60px);height:42px}.class-pin button{display:flex;align-items:center;gap:12px;background:#fffaf0ed;border:1px solid #e3d3bf;box-shadow:0 3px 12px #76513c08;padding:7px 14px;min-height:40px;border-radius:13px;color:#815a84}.class-pin button>span{font-size:12px}.class-pin strong{font-size:23px;letter-spacing:3px;font-variant-numeric:tabular-nums;line-height:1}.pin-status{font-size:12px;color:#ac919e}.host-lesson .workspace,:root:fullscreen .host-lesson .workspace{padding-top:65px}.host-lesson .chapter-mark{font-size:44px}.host-lesson .scene-count .character,:root:fullscreen .host-lesson .scene-count .character{height:clamp(120px,calc(100dvh - 645px),310px)}.host-lesson .scene-position .character,:root:fullscreen .host-lesson .scene-position .character{height:clamp(100px,calc(100dvh - 650px),290px)}
@media(min-width:800px) and (max-height:800px){.host-lesson .scene-count .character,:root:fullscreen .host-lesson .scene-count .character{height:calc(100dvh - 620px)}.host-lesson .scene-position .character,:root:fullscreen .host-lesson .scene-position .character{height:calc(100dvh - 640px)}}
@media(max-width:799px){.class-pin{left:18px;top:10px;gap:7px;max-width:calc(100vw - 28px)}.class-pin strong{font-size:21px}.class-pin button{padding:7px 10px;gap:8px}.pin-status{font-size:10px}.host-lesson .scene-count .character,.host-lesson .scene-position .character{height:140px}}