/* 云教室网页版 · 课堂（第一阶段）。在 yk.tokens.css（v10 定稿 token，未改动）之后加载。
   规则：工具条、控制坞都在自己的行/列里，不叠在讲义上；讲义只随剩余空间按 4:3 等比缩放。 */

.yi { width: 18px; height: 18px; flex: none; }
.yi.sm { width: 14px; height: 14px; }
.yi.xs { width: 12px; height: 12px; }

/* ---------- 根框：一个浏览器视口 ---------- */
.wc { position: relative; overflow: hidden; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) var(--side, 320px); grid-template-rows: 52px minmax(0, 1fr) 80px; background: var(--bg-window); color: var(--fg); font: 400 13px/18px var(--font-sans); }
.wc *, .wf *, .ws *, .sheet * { box-sizing: border-box; }
.wc button, .wf button, .ws button, .sheet button { font-family: inherit; cursor: pointer; }
.wc :focus-visible, .wf :focus-visible, .ws :focus-visible, .sheet :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wc.is-col { --side: 236px; }
@media (prefers-reduced-motion: no-preference) { .tr { transition: background-color .12s ease, box-shadow .12s ease, color .12s ease; } }

/* ---------- 顶栏：课程名 / 剩余时间 / 连接；版本号不在这里 ---------- */
.w-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: .5px solid var(--line); background: var(--bg-window); min-width: 0; }
.w-title { display: flex; flex-direction: column; min-width: 0; flex: 0 1 auto; }
.w-title b { font: 600 14px/18px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-title span { font-size: 11px; line-height: 14px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-logo { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; flex: none; }
.w-sp { flex: 1 1 0; min-width: 0; }
.w-chip { height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 14px; background: var(--bg-sunken); color: var(--fg-2); font: 600 12px/1 var(--font-sans); white-space: nowrap; flex: none; }
.w-chip.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg); }
.w-chip.on { background: var(--st-on-soft); color: var(--st-on); }
.w-chip.pend { background: var(--st-pending-soft); color: var(--st-pending); }
.w-chip.warn { background: var(--st-warn-soft); color: var(--st-warn); }
.w-chip.err { background: var(--st-err-soft); color: var(--st-err); }
.w-tb { height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--fg); font: 500 12.5px/1 var(--font-sans); white-space: nowrap; flex: none; }
.w-tb:hover { background: var(--bg-hover); }
.w-tb.sel, .w-tb[aria-pressed="true"] { background: var(--bg-pressed); }
.w-vsep { width: 1px; height: 20px; background: var(--line); flex: none; }

/* ---------- 舞台：工具列 + 讲义列 ---------- */
.w-stage { grid-row: 2; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px 12px 0 12px; min-height: 0; min-width: 0; background-color: var(--bg-stage); background-image: radial-gradient(circle, var(--stage-dot) 1.1px, transparent 1.4px); background-size: 24px 24px; }
.w-rail { align-self: start; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 64px; padding: 6px 0; border-radius: 18px; background: linear-gradient(180deg, var(--glass-sheen), rgba(255,255,255,0) 55%), var(--glass); box-shadow: var(--shadow-glass); }
.w-rail hr { width: 36px; border: 0; border-top: 1px solid var(--line); margin: 3px 0; }
.tl { width: 56px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--fg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 500 10px/12px var(--font-sans); padding: 0; }
.tl .yi { width: 19px; height: 19px; }
.tl:hover { background: var(--bg-hover); }
.tl.cur, .tl[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.tl:disabled { color: var(--fg-disabled); background: transparent; cursor: default; }
.tl .sw { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 3px var(--line-strong); }

.w-boardcol { display: grid; grid-template-rows: minmax(0, 1fr) 44px; gap: 8px; min-width: 0; min-height: 0; padding-bottom: 8px; }
.w-boardwrap { container-type: size; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; }
.w-board { position: relative; width: min(100cqw, 133.333cqh); aspect-ratio: 4 / 3; background: var(--board-paper); color: var(--board-ink); border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 12px 32px rgba(0,0,0,.12); overflow: hidden; }

/* 讲义（自制演示内容） */
.slide { position: absolute; inset: 0; padding: 7% 8%; display: flex; flex-direction: column; gap: 3.2%; font-family: var(--font-sans); }
.slide .k { font: 600 11px/14px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--board-ink-2); }
.slide h2 { margin: 0; font: 700 30px/36px var(--font-sans); color: var(--board-ink); }
.slide .flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3%; margin-top: 2%; }
.slide .flow div { border: 1.5px solid var(--board-grid); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.slide .flow b { font: 700 16px/20px var(--font-sans); color: var(--board-ink); }
.slide .flow span { font: 400 12.5px/17px var(--font-sans); color: var(--board-ink-2); }
.slide .arrow { color: var(--board-ink-2); font: 600 15px/20px var(--font-sans); }
.slide .frame { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 10px; border: 1.5px dashed var(--board-grid); }
.slide .frame b { font: 700 13px/16px var(--font-sans); color: var(--board-ink); }
.slide .frame span { font: 400 13.5px/19px var(--font-sans); color: var(--board-ink-2); }
.slide .q { margin-top: auto; padding: 10px 12px; border-radius: 8px; background: #f3f5f8; font: 400 13px/18px var(--font-sans); color: var(--board-ink); }
.slide .pn { position: absolute; right: 4%; bottom: 3%; font: 500 11px/1 var(--font-mono); color: var(--board-ink-2); }
.ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* 白板底栏：翻页 / 缩放 / 同步 / 全屏 —— 固定在讲义下方，点击不位移 */
.w-bfoot { container-type: inline-size; display: flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 12px; background: var(--bg-panel); box-shadow: 0 0 0 .5px var(--line-subtle), 0 1px 3px rgba(0,0,0,.06); min-width: 0; white-space: nowrap; }
.w-ib { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--fg); display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; }
.w-ib:hover { background: var(--bg-hover); }
.w-ib:disabled { color: var(--fg-disabled); background: transparent; cursor: default; }
.w-num { min-width: 64px; height: 28px; padding: 0 8px; border-radius: 8px; background: var(--bg-sunken); display: inline-flex; align-items: center; justify-content: center; font: 600 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; flex: none; }
.w-tbtn { height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--fg); display: inline-flex; align-items: center; gap: 5px; font: 500 12px/1 var(--font-sans); flex: none; }
.w-tbtn:hover { background: var(--bg-hover); }
.w-sync { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 14px; font: 600 12px/1 var(--font-sans); flex: none; }
.w-sync.ok { color: var(--st-on); background: var(--st-on-soft); }
.w-sync.pend { color: var(--st-pending); background: var(--st-pending-soft); }
.w-sync.err { color: var(--st-err); background: var(--st-err-soft); }
.w-sync .act { margin-left: 2px; height: 22px; padding: 0 8px; border: 0; border-radius: 11px; background: var(--st-err); color: #fff; font: 700 11px/1 var(--font-sans); }

/* ---------- 侧栏：视频 + 学生｜聊天 ---------- */
.w-side { grid-row: 2; display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 8px 0; min-height: 0; min-width: 0; background: var(--bg-stage); background-image: radial-gradient(circle, var(--stage-dot) 1.1px, transparent 1.4px); background-size: 24px 24px; }
.w-panel { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px; background: var(--bg-panel); box-shadow: 0 0 0 .5px var(--line-subtle), 0 1px 3px rgba(0,0,0,.06); overflow: hidden; }
.w-ph { display: flex; align-items: center; gap: 6px; font: 600 13px/18px var(--font-sans); }
.w-seg { display: flex; height: 32px; padding: 2px; border-radius: 16px; background: var(--bg-sunken); gap: 2px; flex: none; }
.w-seg button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 14px; background: transparent; color: var(--fg-2); font: 600 12.5px/1 var(--font-sans); padding: 0; }
.w-seg button[aria-selected="true"] { background: var(--bg-panel); color: var(--fg); box-shadow: 0 0 0 .5px var(--line), 0 1px 2px rgba(0,0,0,.12); }
.ub { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--st-err); color: #fff; font: 700 11px/1 var(--font-sans); }
.w-selrow { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px 0 8px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); font: 600 12px/16px var(--font-sans); flex: none; }
.w-selrow span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 视频卡：外框比例固定，画面在框内按原比例放，不拉伸、无内部滚动条 */
.w-vid { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--video-bg); color: var(--video-fg); flex: none; }
.w-vid.sel { box-shadow: 0 0 0 2px var(--bg-window), 0 0 0 4px var(--accent); }
.vph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.vph .fr { height: 100%; aspect-ratio: 4 / 3; background: repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 8px, rgba(255,255,255,.02) 8px 16px); display: flex; align-items: center; justify-content: center; font: 500 11px/14px var(--font-sans); color: rgba(255,255,255,.62); text-align: center; padding: 0 6px; }
.vph .fr.w169 { aspect-ratio: 16 / 9; width: 100%; height: auto; }
.vctr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font: 500 12px/16px var(--font-sans); color: var(--video-fg); text-align: center; padding: 0 10px; }
.av { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font: 700 17px/1 var(--font-sans); flex: none; }
.av.s { width: 28px; height: 28px; font-size: 12px; }
.av.xs { width: 22px; height: 22px; font-size: 10.5px; }
.c1 { background: #2f6bd1; } .c2 { background: #8a4fc8; } .c3 { background: #1f7a52; } .c4 { background: #b0510f; } .c5 { background: #a8355f; } .c6 { background: #4a5563; }
.np { position: absolute; left: 6px; bottom: 6px; max-width: calc(66% - 16px); height: 22px; display: inline-flex; align-items: center; gap: 4px; padding: 0 7px 0 5px; border-radius: 11px; background: rgba(0,0,0,.58); color: #fff; font: 600 11.5px/1 var(--font-sans); white-space: nowrap; }
.np span { overflow: hidden; text-overflow: ellipsis; }
.np .off { color: #ff8a7f; }
.np .dot { width: 6px; height: 6px; border-radius: 3px; background: #30d158; flex: none; }
.np .dot.warn { background: #ff9f0a; } .np .dot.err { background: #ff453a; } .np .dot.gray { background: #8e8e93; }
.pip { position: absolute; top: 8px; right: 8px; width: 34%; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #1b1e22; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 4px 12px rgba(0,0,0,.35); }
.pip .np { left: 4px; bottom: 4px; height: 18px; max-width: calc(100% - 8px); font-size: 10.5px; padding: 0 6px 0 4px; }
.pip .mir { position: absolute; top: 4px; left: 4px; height: 16px; padding: 0 5px; border-radius: 8px; background: rgba(0,0,0,.5); color: rgba(255,255,255,.8); font: 500 9.5px/16px var(--font-sans); }
.vbad { position: absolute; top: 6px; left: 6px; height: 20px; padding: 0 7px; border-radius: 10px; display: inline-flex; align-items: center; gap: 4px; font: 600 10.5px/1 var(--font-sans); background: rgba(0,0,0,.58); color: #fff; }
.vbad.err { background: #b4261f; } .vbad.warn { background: #8a5600; }

/* 学生卡：选中 = 浅强调底 + 描边 + “已选中”文字，不只靠颜色 */
.w-list { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: hidden; }
.w-card { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; border: 0; border-radius: 12px; background: var(--bg-panel); box-shadow: inset 0 0 0 .5px var(--line); color: var(--fg); text-align: left; width: 100%; font: inherit; }
.w-card:not(.sel):hover { background: var(--bg-hover); }
.w-card.sel { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.w-card .hd { display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; border-radius: 8px; }
.w-card .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.w-card .nm b { font: 600 13px/17px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-card .nm > span { display: flex; align-items: center; gap: 4px; font: 400 11px/14px var(--font-sans); color: var(--fg-3); white-space: nowrap; }
.w-card .tag { height: 18px; padding: 0 7px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font: 700 10.5px/18px var(--font-sans); flex: none; }
.w-card .acts { display: flex; flex-wrap: wrap; gap: 6px; }
.w-btn { height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border: 0; border-radius: 8px; font: 600 12px/1 var(--font-sans); white-space: nowrap; background: var(--bg-panel); color: var(--fg); box-shadow: inset 0 0 0 .5px var(--line-strong); }
.w-btn:hover { background: var(--bg-hover); }
.w-btn.pri { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.w-btn.pri:hover { background: var(--accent-hover); }
.w-btn.dang { color: var(--st-err); }
.w-btn.live { background: var(--live); color: var(--on-live); box-shadow: none; }
.w-btn:disabled { background: var(--bg-sunken); color: var(--fg-disabled); box-shadow: none; cursor: default; }

/* 聊天：按消息 ID 复用；新消息不把正在看历史的老师拽到底部 */
.w-chat { flex: 1 1 0; min-height: 0; position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow: hidden; padding: 4px 2px; }
.w-msg { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; max-width: 88%; }
.w-msg.me { align-self: flex-end; align-items: flex-end; }
.w-msg .who { display: flex; align-items: center; gap: 5px; font: 600 11.5px/14px var(--font-sans); color: var(--fg-2); }
.w-msg .who .t { font: 400 10.5px/14px var(--font-mono); color: var(--fg-3); }
.w-msg .role { height: 15px; padding: 0 5px; border-radius: 7.5px; background: var(--bg-sunken); color: var(--fg-2); font: 600 9.5px/15px var(--font-sans); }
.w-msg .bb { padding: 7px 10px; border-radius: 12px; background: var(--bg-sunken); font: 400 13px/18px var(--font-sans); color: var(--fg); overflow-wrap: anywhere; }
.w-msg.me .bb { background: var(--accent-soft); }
.w-msg .ms { display: inline-flex; align-items: center; gap: 4px; font: 500 10.5px/14px var(--font-sans); color: var(--fg-3); }
.w-msg .ms.warn { color: var(--st-warn); } .w-msg .ms.err { color: var(--st-err); }
.newchip { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); height: 26px; padding: 0 10px; border: 0; border-radius: 13px; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px/1 var(--font-sans); box-shadow: var(--shadow-float); white-space: nowrap; }
.w-comp { display: flex; flex-direction: column; gap: 6px; flex: none; }
.w-comp textarea { width: 100%; height: 52px; resize: none; padding: 7px 10px; border: 0; border-radius: 10px; background: var(--bg-sunken); box-shadow: inset 0 0 0 .5px var(--line); color: var(--fg); font: 400 13px/18px var(--font-sans); }
.w-comp textarea::placeholder { color: var(--fg-3); }
.w-comp .bar { display: flex; align-items: center; gap: 8px; font: 400 11px/1 var(--font-mono); color: var(--fg-3); }
.w-comp .note { font: 400 11px/14px var(--font-sans); color: var(--fg-3); }

/* 收起的侧栏：只剩视频 + 两个带未读与选中姓名的入口 */
.w-mini { display: flex; flex-direction: column; gap: 6px; flex: none; }
.w-mini button { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 0; border-radius: 12px; background: var(--bg-panel); box-shadow: 0 0 0 .5px var(--line-subtle), 0 1px 3px rgba(0,0,0,.06); color: var(--fg); font: 600 12.5px/1 var(--font-sans); text-align: left; }
.w-mini button span.l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-mini button small { font: 500 11px/1 var(--font-sans); color: var(--accent-text); }

/* ---------- 底部控制坞：图标 + 短文字 + 当前状态文字 ---------- */
.w-dockrow { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; justify-content: center; padding: 0 12px; background: var(--bg-window); border-top: .5px solid var(--line); min-width: 0; }
.w-dock { display: flex; align-items: center; gap: 2px; padding: 4px 10px; border-radius: 30px; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 50%), var(--dock); box-shadow: var(--shadow-dock); color: #fff; white-space: nowrap; }
.db { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 70px; padding: 2px 4px; border: 0; border-radius: 12px; background: transparent; color: #fff; }
.db .c { position: relative; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--dock-btn); }
.db:hover .c { background: rgba(255,255,255,.24); }
.db .c.off { background: var(--dock-btn-off); color: var(--dock-btn-off-fg); }
.db .c.live { background: #e5372f; }
.db .c.pend { outline: 1.5px dashed rgba(255,255,255,.6); outline-offset: -6px; }
.db .c.na { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); color: rgba(255,255,255,.45); }
.db .c .bd { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #2a2a2e; }
.db .c .bd.warn { background: #ff9f0a; color: #1d1d1f; } .db .c .bd.err { background: #ff453a; color: #fff; } .db .c .bd.ok { background: #30d158; color: #fff; }
.db .l { font: 600 11px/13px var(--font-sans); }
.db .s { font: 400 10px/12px var(--font-sans); color: rgba(255,255,255,.7); }
.db .s.warn { color: #ffd60a; } .db .s.err { color: #ff9b91; } .db .s.ok { color: #7ee2a0; }
.db:disabled { cursor: default; }
.db:disabled .l, .db:disabled .s { color: rgba(255,255,255,.4); }
.w-dock .vs { width: 1px; height: 40px; background: rgba(255,255,255,.16); margin: 0 4px; }
.db.leave .c { background: #e5372f; }

/* ---------- 全屏课件 ---------- */
.wf { position: relative; overflow: hidden; color: var(--fg); font: 400 13px/18px var(--font-sans); background-color: var(--bg-stage); background-image: radial-gradient(circle, var(--stage-dot) 1.1px, transparent 1.4px); background-size: 24px 24px; }
.wf-side { position: absolute; top: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.w-card2 { padding: 8px; border-radius: 14px; background: var(--bg-panel); box-shadow: 0 0 0 .5px var(--line-subtle), 0 1px 3px rgba(0,0,0,.06); display: flex; flex-direction: column; gap: 6px; }
.mdock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 6px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 50%), var(--dock); box-shadow: var(--shadow-dock); }
.mdock .db { min-width: 0; }

/* ---------- 全屏共享 ---------- */
.ws { position: relative; overflow: hidden; background: #0b0c0e; color: #f5f5f7; font: 400 13px/18px var(--font-sans); display: grid; grid-template-rows: 40px 720px 40px; }
.ws-bar { display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #17181b; white-space: nowrap; min-width: 0; }
.ws-bar .t { font: 600 12.5px/1 var(--font-sans); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ws-chip { height: 24px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border-radius: 12px; background: rgba(255,255,255,.1); font: 600 11.5px/1 var(--font-sans); color: #e8e8ed; flex: none; }
.ws-chip.live { background: #e5372f; color: #fff; }
.ws-btn { height: 28px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border: 0; border-radius: 8px; background: rgba(255,255,255,.1); color: #fff; font: 600 12px/1 var(--font-sans); flex: none; }
.ws-btn.cur { background: var(--accent); }
.ws-btn.stop { background: #e5372f; }
.ws-sw { width: 20px; height: 20px; border-radius: 50%; border: 0; padding: 0; flex: none; box-shadow: 0 0 0 2px #17181b, 0 0 0 3px rgba(255,255,255,.35); }
.ws-sw.cur { box-shadow: 0 0 0 2px #17181b, 0 0 0 4px #fff; }

/* ---------- 状态总表 ---------- */
.sheet { box-sizing: border-box; padding: 56px 64px 64px; background: var(--bg-window); color: var(--fg); font: 400 13px/18px var(--font-sans); display: flex; flex-direction: column; gap: 40px; }
.sheet h1 { margin: 0; font: 700 28px/34px var(--font-sans); }
.sheet .lead { margin: 8px 0 0; max-width: 1080px; font: 400 14px/22px var(--font-sans); color: var(--fg-2); }
.sec { display: flex; flex-direction: column; gap: 14px; }
.sec h2 { margin: 0; font: 600 18px/24px var(--font-sans); display: flex; align-items: center; gap: 10px; }
.sec h2 small { font: 400 12.5px/18px var(--font-sans); color: var(--fg-3); }
.row { display: flex; gap: 16px; align-items: flex-start; }
.cell { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lab { font: 600 12px/16px var(--font-sans); color: var(--fg-2); display: flex; align-items: center; gap: 6px; }
.cap { font: 400 11.5px/16px var(--font-sans); color: var(--fg-3); }
.box { padding: 14px; border-radius: 16px; background: var(--bg-panel); box-shadow: 0 0 0 .5px var(--line-subtle), 0 1px 3px rgba(0,0,0,.06); display: flex; flex-direction: column; gap: 10px; }
.cap4 { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 9px; font: 600 10.5px/1 var(--font-sans); white-space: nowrap; }
.cap4.live { color: var(--st-on); background: var(--st-on-soft); }
.cap4.exp { color: var(--accent-text); background: var(--accent-soft); }
.cap4.tbd { color: var(--st-warn); background: var(--st-warn-soft); }
.cap4.na { color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.banner { display: flex; align-items: flex-start; gap: 6px; padding: 8px 10px; border-radius: 10px; font: 500 12px/17px var(--font-sans); }
.banner.err { background: var(--st-err-soft); color: var(--st-err); }
.banner.warn { background: var(--st-warn-soft); color: var(--st-warn); }
.banner.ok { background: var(--st-on-soft); color: var(--st-on); }
.banner.info { background: var(--bg-sunken); color: var(--fg-2); }
.banner.pend { background: var(--st-pending-soft); color: var(--st-pending); }
.banner .yi { margin-top: 1px; }
.stt { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg-panel); border-radius: 16px; box-shadow: 0 0 0 .5px var(--line); overflow: hidden; }
.stt th { font: 600 11.5px/14px var(--font-sans); color: var(--fg-3); padding: 10px; text-align: center; background: var(--bg-sunken); }
.stt th:first-child, .stt td:first-child { text-align: left; }
.stt td { padding: 14px 10px; text-align: center; border-top: .5px solid var(--line-subtle); vertical-align: middle; }
.stt td:first-child { font: 600 12px/16px var(--font-sans); white-space: nowrap; }
.stt td .d { display: block; margin-top: 6px; font: 400 10.5px/13px var(--font-sans); color: var(--fg-3); }
.fring { box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 4px var(--focus) !important; }
.hov { background: var(--bg-hover) !important; }
.prs { background: var(--bg-pressed) !important; }
.mboard { position: relative; width: 300px; aspect-ratio: 4 / 3; border-radius: 8px; background: var(--board-paper); box-shadow: 0 0 0 .5px var(--line), 0 4px 14px rgba(0,0,0,.08); overflow: hidden; color: var(--board-ink); }
.tbox { position: absolute; display: flex; flex-direction: column; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1.5px var(--board-sel), 0 6px 18px rgba(0,0,0,.14); color: var(--board-ink); }
.tbox .grip { height: 18px; border-radius: 8px 8px 0 0; background: #e8f2f3; display: flex; align-items: center; justify-content: center; color: var(--board-sel); cursor: move; border: 0; padding: 0; }
.tbox .tx { padding: 6px 8px; font: 500 16px/20px var(--font-sans); }
.tbox .ft { display: flex; align-items: center; gap: 4px; padding: 4px 6px 6px; border-top: .5px solid #e3e6ea; }
.tbox .ft .p { white-space: nowrap; flex: none; height: 22px; padding: 0 6px; border-radius: 6px; background: #f1f3f5; font: 600 11px/22px var(--font-sans); color: #303540; border: 0; }
.tbox .ft .p.ok { background: var(--board-sel); color: #fff; }
.tbox .ft .sw { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 0; padding: 0; }
.src { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-sunken); }
.src .ic { width: 36px; height: 36px; border-radius: 9px; background: var(--bg-panel); box-shadow: 0 0 0 .5px var(--line); display: flex; align-items: center; justify-content: center; color: var(--fg-2); flex: none; }
.src b { display: block; font: 600 12.5px/16px var(--font-sans); }
.src span { font: 400 11px/14px var(--font-sans); color: var(--fg-3); }
.chk { display: flex; align-items: flex-start; gap: 8px; font: 400 12px/17px var(--font-sans); color: var(--fg-2); }
.chk input { margin: 2px 0 0; width: 15px; height: 15px; accent-color: var(--accent); }
.segsm { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--bg-sunken); gap: 2px; }
.segsm span { height: 26px; padding: 0 10px; border-radius: 7px; display: inline-flex; align-items: center; font: 600 11.5px/1 var(--font-sans); color: var(--fg-2); }
.segsm span.on { background: var(--bg-panel); color: var(--fg); box-shadow: 0 0 0 .5px var(--line), 0 1px 2px rgba(0,0,0,.1); }

/* 底栏随宽度收短文字，按钮位置不变 */
.w-bfoot .nn { display: none; }
@container (max-width: 740px) { .w-bfoot .nw { display: none; } .w-bfoot .nn { display: inline; } }

/* ---------- 窄窗 768：工具条横排到讲义上方，视频与侧栏并到讲义下方 ---------- */
.w-rail.h { flex-direction: row; width: auto; align-self: stretch; justify-content: center; padding: 0 6px; border-radius: 16px; }
.w-rail.h hr { width: 0; height: 28px; border-top: 0; border-left: 1px solid var(--line); margin: 0 3px; }
.w-rail.h .tl { width: 52px; }
.w-media { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; min-height: 0; }
.w-media .w-vid { height: 100%; aspect-ratio: 16 / 9; }

/* 小卡（宽 < 160）：姓名胶囊可占满宽，状态文字上移，不与姓名重叠 */
.w-vid.sm .np { max-width: calc(100% - 12px); }
.w-vid.sm .vctr { padding-bottom: 26px; gap: 3px; font-size: 10.5px; }
.w-vid.sm .vbad { top: 4px; left: 4px; height: 18px; font-size: 10px; }

/* ---------- 一对一视频：学生、老师两张独立卡片；可选「学生为主」或「均分」 ----------
   同一组 DOM，只换根类 m-stu / m-even，不卸载、不重建视频元素 */
.w-vrow { display: flex; flex-direction: column; gap: 6px; flex: none; min-width: 0; }
.w-vhead { display: flex; align-items: center; gap: 6px; font: 600 12px/16px var(--font-sans); color: var(--fg-2); }
.segsm button { height: 24px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: var(--fg-2); font: 600 11.5px/1 var(--font-sans); white-space: nowrap; }
.segsm button:hover { background: var(--bg-hover); }
.segsm button[aria-checked="true"] { background: var(--bg-panel); color: var(--fg); box-shadow: 0 0 0 .5px var(--line), 0 1px 2px rgba(0,0,0,.1); }
.w-tea { display: flex; gap: 8px; align-items: center; min-width: 0; }
.w-tea .w-vid { width: 34%; aspect-ratio: 4 / 3; border-radius: 10px; }
.w-tea .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font: 400 11.5px/15px var(--font-sans); color: var(--fg-3); }
.w-tea .info b { font: 600 12.5px/16px var(--font-sans); color: var(--fg); }
.w-tea .info span { display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-even .w-tea .w-vid { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; }
.m-even .w-tea .info { display: none; }
.w-vid .mir2 { position: absolute; top: 6px; right: 6px; height: 18px; padding: 0 6px; border-radius: 9px; background: rgba(0,0,0,.5); color: rgba(255,255,255,.85); font: 500 10px/18px var(--font-sans); }
.m-stu .w-tea .w-vid .mir2 { display: none; }