:root {
  --ink-0: #051627;
  --ink-1: #0B2E4F;
  --ink-2: #123B63;
  --ink-3: #1A4A78;
  --board: #0D3354;
  --line: rgba(247, 249, 252, .09);
  --line-2: rgba(247, 249, 252, .18);
  --text: #EAF0F7;
  --text-2: #A9B9CC;
  --text-3: #7189A5;
  --blue: #2F6BFF;
  --blue-2: #6E97FF;
  --gold: #F2B544;
  --paper: #F7F9FC;
  --paper-2: #E7EDF5;
  --navy-text: #0B2E4F;
  --red: #E5484D;
  --green: #34C38F;
  --ui: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --chalk: "Kaiti SC", "STKaiti", "KaiTi", "Songti SC", "STSong", "SimSun", serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ink-0);
  color: var(--text);
  font: 14px/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 2px; }
[hidden] { display: none !important; }

.ic { width: 20px; height: 20px; flex: none; display: block; }
.ic-slot { display: inline-flex; }

/* 身份相关显示 */
body:not(.is-teacher) .teacher-only { display: none !important; }
body.is-teacher .student-only { display: none !important; }
body:not(.is-mobile) .mobile-only { display: none !important; }
body.is-mobile .desktop-only { display: none !important; }
body:not(.can-record) .rec-only { display: none !important; }

/* ---------- 通用按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 16px; border-radius: 8px;
  font-weight: 500; white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.btn.primary { background: var(--blue); color: #fff; }
.btn.primary:hover { background: #255CE6; }
.btn.ghost { background: rgba(247, 249, 252, .08); color: var(--text); }
.btn.ghost:hover { background: rgba(247, 249, 252, .14); }
.btn.light { background: var(--paper-2); color: var(--navy-text); }
.btn.light:hover { background: #DCE4EE; }
.btn.danger { background: var(--red); color: #fff; }
.btn.small { height: 30px; padding: 0 12px; font-size: 13px; }
.btn.big { height: 46px; font-size: 16px; border-radius: 10px; }
.btn:disabled { opacity: .5; cursor: default; }

/* ---------- 登录 ---------- */
.login {
  height: 100dvh; display: grid; grid-template-columns: 1.25fr 1fr;
  background: var(--ink-0);
}
.login-board {
  position: relative; display: flex; align-items: center;
  padding: 6vw;
  background-color: var(--board);
  background-image:
    linear-gradient(rgba(247,249,252,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,249,252,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  border-right: 10px solid #0A2944;
}
.login-board::after {
  content: ""; position: absolute; left: 6vw; right: 6vw; bottom: 9vh; height: 3px;
  background: var(--gold); opacity: .9; border-radius: 2px;
  transform-origin: left; animation: chalkline 1.1s .2s ease-out both;
}
@keyframes chalkline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.chalk-title {
  font-family: var(--chalk); font-weight: 400;
  font-size: clamp(30px, 4.2vw, 60px); line-height: 1.3; letter-spacing: .04em;
  color: var(--paper); margin: 0 0 .5em; max-width: 14em;
  text-shadow: 0 0 1px rgba(247,249,252,.6);
  word-break: keep-all; overflow-wrap: anywhere;
}
.chalk-sub { font-family: var(--chalk); font-size: clamp(16px, 1.5vw, 22px); color: rgba(247,249,252,.7); margin: 0; }

.login-form {
  align-self: center; justify-self: center; width: min(380px, 86vw);
  display: flex; flex-direction: column; gap: 18px;
}
.login-form h2 { margin: 0 0 4px; font-size: 22px; font-weight: 600; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span { color: var(--text-2); font-size: 13px; }
.field input {
  height: 46px; padding: 0 14px; border-radius: 10px;
  background: var(--ink-1); border: 1px solid var(--line-2); color: var(--text); font-size: 16px;
}
.field input:focus { border-color: var(--blue-2); outline: none; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--ink-1); border-radius: 10px; padding: 4px; border: 1px solid var(--line); }
.seg button { height: 38px; border-radius: 7px; color: var(--text-2); font-size: 15px; }
.seg button[aria-checked="true"] { background: var(--ink-3); color: var(--text); font-weight: 600; }
.device-line { margin: 0; color: var(--text-2); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.device-line .ic { width: 16px; height: 16px; color: var(--text-3); }
.login-msg { margin: 0; color: #FF8F8F; font-size: 13px; min-height: 1em; }
.login-msg:empty { display: none; }
.login-hint { margin: 0; color: var(--text-3); font-size: 12px; }

/* ---------- 课堂框架 ---------- */
.app { height: 100dvh; display: flex; flex-direction: column; }
.topbar {
  flex: none; height: 52px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 0 12px 0 16px; background: var(--ink-1); border-bottom: 1px solid var(--line);
}
.tb-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.course { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clock { font-variant-numeric: tabular-nums; color: var(--text-2); font-size: 13px; flex: none; }
.rec-badge {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 24px; padding: 0 10px; border-radius: 12px; background: rgba(229,72,77,.16); color: #FF9A9D;
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.rec-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1.2s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

.rtc-chip { flex: none; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; line-height: 22px; color: var(--text-2); background: rgba(247,249,252,.07); white-space: nowrap; }
.rtc-chip.ok { color: #9FE3C4; background: rgba(52,195,143,.14); }
.rtc-chip.bad { color: #FFB0B2; background: rgba(229,72,77,.18); }
.seg button:disabled { opacity: .45; cursor: not-allowed; }
.view-switch { display: flex; background: var(--ink-0); border-radius: 10px; padding: 3px; gap: 2px; }
.view-switch button { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 7px; color: var(--text-2); font-size: 13px; }
.view-switch button .ic { width: 17px; height: 17px; }
.view-switch button[aria-pressed="true"] { background: var(--ink-3); color: var(--text); }
.view-switch button:hover { color: var(--text); }

.tb-right { display: flex; justify-content: flex-end; gap: 4px; }
.tb-btn { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 8px; color: var(--text-2); font-size: 13px; }
.tb-btn .ic { width: 18px; height: 18px; }
.tb-btn:hover { background: var(--ink-2); color: var(--text); }
.tb-btn b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--blue); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 600; }
.tb-btn.leave:hover { background: rgba(229,72,77,.18); color: #FFB0B2; }

.conn-banner { flex: none; text-align: center; padding: 6px; font-size: 13px; background: #6B4A0F; color: #FFE3A8; }
.sound-banner { position: fixed; z-index: 30; left: 50%; top: 64px; transform: translateX(-50%); padding: 10px 16px; border-radius: 10px; background: var(--gold); color: var(--navy-text); font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.35); }

/* ---------- 台上 12 路 ---------- */
.seats {
  flex: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px;
  padding: 8px 10px; background: var(--ink-0);
}
.app.view-grid .seats, .app.view-wall .seats { display: none; }

/* ---------- 画面块 ---------- */
.tile {
  position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden;
  background: #0A2440; isolation: isolate; min-width: 0;
}
.tile-media, .tile-media > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile video { object-fit: cover; background: #061A2E; }
.tile video.mirror { transform: scaleX(-1); }
.tile canvas { display: block; object-fit: cover; }
.avatar { display: flex; align-items: center; justify-content: center; background: #0E2D4C; }
.avatar span {
  width: 42%; max-width: 64px; aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-3); color: var(--text); font-weight: 600; font-size: clamp(12px, 1.1vw, 18px);
}
.tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--line); z-index: 3; transition: box-shadow .15s; }
.tile.speaking::after { box-shadow: inset 0 0 0 2px var(--blue-2); }
.tile.hand::after { box-shadow: inset 0 0 0 2px var(--gold); }

.plate {
  position: absolute; left: 4px; bottom: 4px; z-index: 4; max-width: calc(100% - 8px);
  display: flex; align-items: center; gap: 3px;
  padding: 1px 6px 1px 3px; border-radius: 4px; background: rgba(5, 22, 39, .72);
  font-size: 12px; line-height: 18px; white-space: nowrap;
}
.plate .mic .ic { width: 13px; height: 13px; color: var(--text-2); }
.plate .mic.off .ic { color: #FF7F83; }
.plate .nm { overflow: hidden; text-overflow: ellipsis; }
.plate .dv { color: var(--text-3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.plate .dv:empty { display: none; }
.plate .dvi { display: none; color: var(--text-3); }
.plate .dvi .ic { width: 12px; height: 12px; }
.seats .plate .dvi:not(:empty) { display: inline-flex; }
.seats .plate .dv { display: none; }
.role-tag {
  position: absolute; z-index: 4; left: 4px; top: 4px; display: none;
  padding: 0 5px; border-radius: 4px; background: var(--gold); color: var(--navy-text); font-size: 11px; font-weight: 600; line-height: 17px;
}
.tile.is-teacher .role-tag { display: block; }
.tile.self .role-tag::after { content: "（我）"; font-weight: 500; }
.self-tag { display: none; position: absolute; z-index: 4; left: 4px; top: 4px; padding: 0 5px; border-radius: 4px; background: rgba(5,22,39,.72); font-size: 11px; line-height: 17px; }
.tile.self:not(.is-teacher) .self-tag { display: block; }
.hand-badge {
  position: absolute; z-index: 4; right: 4px; top: 4px; display: none;
  width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--navy-text);
  align-items: center; justify-content: center;
}
.hand-badge .ic { width: 14px; height: 14px; }
.tile.hand .hand-badge { display: flex; }
.stage-tag { position: absolute; z-index: 4; right: 4px; top: 4px; padding: 0 5px; border-radius: 4px; background: rgba(47,107,255,.85); font-size: 11px; line-height: 17px; display: none; }
.wall-grid .tile.onstage .stage-tag { display: block; }
.wall-grid .tile.onstage.hand .stage-tag { display: none; }
.tile.connecting .tile-media::after {
  content: "连接中…"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(5,22,39,.6); color: var(--text-2); font-size: 12px;
}

.tile-actions {
  position: absolute; z-index: 5; inset: 0; display: none; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 6px;
  background: rgba(5, 22, 39, .62);
}
body.is-teacher .tile:not(.self):hover .tile-actions,
body.is-teacher .tile.show-actions .tile-actions { display: flex; }
.tile-actions button { height: 26px; padding: 0 10px; border-radius: 6px; background: var(--paper); color: var(--navy-text); font-size: 12px; font-weight: 600; }
.tile-actions button:hover { background: #fff; }
.tile-actions button.warn { background: var(--gold); }

.tile.empty { display: flex; align-items: center; justify-content: center; background: transparent; color: var(--text-3); font-size: 12px; }
.tile.empty::after { box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- 中部 ---------- */
.stagearea { flex: 1; min-height: 0; display: flex; }
.main { position: relative; flex: 1; min-width: 0; }
.main > * { position: absolute; inset: 0; }

.board-wrap { display: flex; padding: 12px 12px 12px 68px; }
.board-stage { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
#board {
  display: block; border-radius: 8px; touch-action: none;
  background-color: var(--board);
  background-image:
    linear-gradient(rgba(247,249,252,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,249,252,.035) 1px, transparent 1px);
  background-size: 2.5% 4.4444%;
  box-shadow: 0 0 0 1px rgba(247,249,252,.06), 0 10px 30px rgba(0,0,0,.25);
}
.board-white #board {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(11,46,79,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,46,79,.055) 1px, transparent 1px);
}
.board-stage.can-draw #board { cursor: crosshair; }
.board-hint {
  position: absolute; margin: 0; pointer-events: none; text-align: center;
  font-family: var(--chalk); font-size: clamp(16px, 1.6vw, 24px); color: rgba(247,249,252,.32);
  max-width: 86%;
}
.board-white .board-hint { color: rgba(11,46,79,.3); }

.board-tools {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px; border-radius: 12px; background: var(--ink-1); border: 1px solid var(--line);
}
.board-tools .sep { width: 24px; height: 1px; background: var(--line-2); margin: 4px 0; }
.tool { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-2); }
.tool:hover { background: var(--ink-2); color: var(--text); }
.tool[aria-pressed="true"] { background: var(--blue); color: #fff; }
.tool .ic { width: 19px; height: 19px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.swatch i { width: 16px; height: 16px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--blue-2); }
.size { width: 28px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.size i { display: block; border-radius: 50%; background: var(--text-2); }
.size[aria-pressed="true"] { background: var(--ink-3); }
.size[aria-pressed="true"] i { background: var(--text); }

/* 宫格 */
.grid-view { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 8px; padding: 12px; }
.grid-view .tile { aspect-ratio: auto; }
.grid-view .plate { font-size: 13px; left: 8px; bottom: 8px; }

/* 视频墙 */
.wall-view { display: flex; flex-direction: column; padding: 10px 12px 12px; gap: 10px; }
.wall-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wall-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
#wallCount { color: var(--text-2); font-size: 13px; }
.wall-tip { color: var(--text-3); font-size: 12px; }
.pager { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; }
.pager button { height: 28px; min-width: 28px; padding: 0 8px; border-radius: 6px; background: var(--ink-2); }
.pager button:disabled { opacity: .4; cursor: default; }
.wall-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 6px; }
.wall-grid .tile { aspect-ratio: auto; }

/* 大画面 / 实物展示 */
.spot-view { display: flex; flex-direction: column; padding: 10px 12px 12px; gap: 10px; }
.spot-head { display: flex; align-items: center; gap: 12px; }
#spotLabel { font-weight: 600; }
.spot-head .btn { margin-left: auto; }
.spot-body { flex: 1; min-height: 0; position: relative; border-radius: 8px; overflow: hidden; background: #020D18; }
.spot-body .tile { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; background: #020D18; }
.spot-body .tile video { object-fit: contain; background: #020D18; }
.spot-body .plate { font-size: 13px; left: 10px; bottom: 10px; }

/* ---------- 侧栏 ---------- */
.side { flex: none; width: 320px; display: flex; flex-direction: column; background: var(--ink-1); border-left: 1px solid var(--line); min-height: 0; }
.app.side-closed .side { display: none; }
.side-tabs { flex: none; display: flex; border-bottom: 1px solid var(--line); padding: 0 8px; }
.side-tabs button { position: relative; height: 44px; padding: 0 12px; color: var(--text-2); font-size: 14px; }
.side-tabs button[aria-selected="true"] { color: var(--text); font-weight: 600; }
.side-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--blue); border-radius: 1px; }
.unread { display: inline-block; margin-left: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff; font-size: 10px; line-height: 16px; text-align: center; vertical-align: 1px; }
.side-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-list { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.msg { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.msg-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.msg-meta .who { color: var(--text-2); }
.msg-meta .t-tag { padding: 0 4px; border-radius: 3px; background: var(--gold); color: var(--navy-text); font-size: 10px; font-weight: 600; line-height: 15px; }
.msg-text { max-width: 92%; padding: 7px 10px; border-radius: 4px 10px 10px 10px; background: rgba(247,249,252,.07); word-break: break-word; white-space: pre-wrap; }
.msg.me { align-items: flex-end; }
.msg.me .msg-text { background: rgba(47,107,255,.32); border-radius: 10px 4px 10px 10px; }
.msg.sys { align-items: center; }
.msg.sys .msg-text { background: none; padding: 0; color: var(--text-3); font-size: 12px; }
.chat-input { flex: none; display: flex; gap: 8px; padding: 10px 12px calc(10px); border-top: 1px solid var(--line); }
.chat-input input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border-radius: 8px; background: var(--ink-0); border: 1px solid var(--line-2); }
.chat-input input:focus { outline: none; border-color: var(--blue-2); }

.members { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 0 12px; }
.m-group { padding: 10px 16px 4px; color: var(--text-3); font-size: 12px; }
.m-row { display: flex; align-items: center; gap: 10px; padding: 7px 16px; }
.m-row:hover { background: rgba(247,249,252,.04); }
.m-av { width: 32px; height: 32px; border-radius: 50%; background: var(--ink-3); flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.m-main { flex: 1; min-width: 0; }
.m-name { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; }
.m-name > span:first-child { white-space: nowrap; }
.m-name span:first-child { overflow: hidden; text-overflow: ellipsis; }
.m-sub { color: var(--text-3); font-size: 12px; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; }
.m-sub .ic { width: 13px; height: 13px; }
.tag { padding: 0 5px; border-radius: 3px; font-size: 11px; line-height: 16px; flex: none; }
.tag.t { background: var(--gold); color: var(--navy-text); font-weight: 600; }
.tag.stage { background: rgba(47,107,255,.24); color: #B9CDFF; }
.tag.sim { background: rgba(247,249,252,.08); color: var(--text-3); }
.tag.hand { background: rgba(242,181,68,.2); color: var(--gold); }
.tag.me { background: rgba(247,249,252,.12); color: var(--text-2); }
.m-icons { display: flex; align-items: center; gap: 6px; color: var(--text-3); }
.m-icons .ic { width: 16px; height: 16px; }
.m-icons .off { color: #FF7F83; }
.m-act { display: flex; gap: 4px; }
.m-act button { height: 24px; padding: 0 8px; border-radius: 5px; background: var(--ink-2); color: var(--text-2); font-size: 12px; }
.m-act button:hover { background: var(--ink-3); color: var(--text); }

/* ---------- 底部控制栏 ---------- */
.controls {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: calc(68px + var(--safe-b)); padding: 0 12px var(--safe-b); background: var(--ink-1); border-top: 1px solid var(--line);
}
.ctrl-group { display: flex; align-items: center; gap: 2px; min-width: 0; }
.ctrl {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 68px; height: 56px; padding: 0 6px; border-radius: 10px; color: var(--text); font-size: 12px; white-space: nowrap;
}
.ctrl .ic { width: 22px; height: 22px; }
.ctrl:hover { background: var(--ink-2); }
.ctrl.off .ic { color: #FF7F83; }
.ctrl.on-blue { color: var(--blue-2); }
.ctrl.on-gold .ic { color: var(--gold); }
.ctrl.recording { background: rgba(229,72,77,.18); color: #FFB0B2; }
.ctrl.recording .ic { color: var(--red); }
.ctrl-split { display: flex; align-items: center; }
.ctrl-split .ctrl { min-width: 60px; padding-right: 2px; }
.ctrl-more { width: 22px; height: 56px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-2); margin-left: -4px; }
.ctrl-more:hover { background: var(--ink-2); color: var(--text); }
.ctrl-more .ic { width: 15px; height: 15px; }

/* ---------- 弹窗 ---------- */
.modal-back {
  position: fixed; inset: 0; z-index: 50; background: rgba(2, 10, 20, .62);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: fade .15s ease-out;
}
@keyframes fade { from { opacity: 0; } }
.modal {
  width: min(520px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column;
  background: var(--paper); color: var(--navy-text); border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  animation: rise .18s ease-out;
}
.modal.wide { width: min(640px, 100%); }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }
.modal-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; }
.modal-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.modal-head p { margin: 2px 0 0; font-size: 13px; color: #5A7088; }
.modal-x { margin-left: auto; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #5A7088; flex: none; align-self: flex-start; }
.modal-x:hover { background: var(--paper-2); }
.modal-body { padding: 4px 18px 18px; overflow-y: auto; }
.modal-foot { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--paper-2); }

.dev-list { display: flex; flex-direction: column; gap: 8px; }
.dev-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: #fff; border: 1px solid var(--paper-2); }
.dev-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--paper-2); display: flex; align-items: center; justify-content: center; flex: none; color: var(--navy-text); }
.dev-ic .ic { width: 22px; height: 22px; }
.dev-main { flex: 1; min-width: 0; }
.dev-title { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.dev-title .tag.me { background: rgba(47,107,255,.12); color: var(--blue); }
.dev-meta { font-size: 12px; color: #5A7088; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; margin-top: 2px; }
.dev-meta dt { color: #8797AA; }
.dev-meta dd { margin: 0; font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; background: #B7C3D1; }
.dot.on { background: var(--green); }

.invite { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: start; }
.qr { width: 200px; height: 200px; padding: 8px; border-radius: 10px; background: #fff; border: 1px solid var(--paper-2); }
.qr svg { width: 100%; height: 100%; display: block; }
.invite-url { display: flex; gap: 6px; align-items: center; margin: 4px 0 12px; }
.invite-url code { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--paper-2); font: 13px/1.4 ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
.invite-code { margin: 0 0 8px; font-size: 14px; color: #3C5470; }
.invite-code b { font-size: 22px; letter-spacing: .12em; color: var(--navy-text); margin-left: 6px; font-variant-numeric: tabular-nums; }
.steps { margin: 0; padding-left: 18px; color: #3C5470; font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.note { font-size: 12px; color: #6A7F95; margin: 12px 0 0; }

.form-rows { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row > label, .form-row > .lbl { font-size: 13px; color: #3C5470; font-weight: 500; }
.form-row input[type=text] { height: 38px; padding: 0 12px; border-radius: 8px; border: 1px solid #CBD6E2; background: #fff; color: var(--navy-text); }
.form-row input[type=range] { width: 100%; accent-color: var(--blue); }
.form-row .help { font-size: 12px; color: #6A7F95; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.switch { position: relative; width: 42px; height: 24px; border-radius: 12px; background: #C3CFDC; flex: none; transition: background .15s; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch[aria-checked="true"] { background: var(--blue); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }
.seg.light { background: var(--paper-2); border: 0; }
.seg.light button { color: #3C5470; }
.seg.light button[aria-checked="true"] { background: #fff; color: var(--navy-text); box-shadow: 0 1px 2px rgba(11,46,79,.12); }

.pick-list { display: flex; flex-direction: column; gap: 6px; }
.pick { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--paper-2); text-align: left; color: var(--navy-text); }
.pick:hover { border-color: #B8C7D8; }
.pick[aria-pressed="true"] { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.pick .ic { width: 20px; height: 20px; color: #3C5470; }
.pick .pk-main { flex: 1; min-width: 0; }
.pick .pk-sub { font-size: 12px; color: #6A7F95; }
.pick .check { color: var(--blue); }
.sec-title { font-size: 13px; font-weight: 600; color: #3C5470; margin: 14px 0 8px; }
.sec-title:first-child { margin-top: 0; }
.empty-note { font-size: 13px; color: #6A7F95; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px dashed #CBD6E2; }

/* ---------- 提示 ---------- */
.toasts { position: fixed; z-index: 60; left: 50%; top: 62px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: max-content; max-width: 92vw; }
.toast { padding: 9px 14px; border-radius: 10px; background: var(--paper); color: var(--navy-text); font-size: 13px; box-shadow: 0 10px 28px rgba(0,0,0,.35); animation: rise .2s ease-out; display: flex; gap: 8px; align-items: center; }
.toast .ic { width: 17px; height: 17px; color: var(--blue); }
.toast.warn .ic { color: #C98A12; }

/* ---------- 平板 ---------- */
@media (max-width: 1180px) {
  .seats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 112px; overflow-x: auto; scrollbar-width: none; }
  .side { width: 288px; }
  .view-switch button { padding: 0 10px; }
  .tb-btn .lbl { display: none; }
}

/* ---------- 手机（竖屏） ---------- */
@media (max-width: 760px) {
  .login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; }
  .login-board { padding: 36px 24px 44px; border-right: 0; border-bottom: 8px solid #0A2944; }
  .login-board::after { left: 24px; right: 24px; bottom: 22px; }
  .chalk-title { font-size: 28px; }
  .login-form { padding: 28px 0 40px; align-self: start; }

  .topbar { height: 48px; grid-template-columns: 1fr auto; padding: 0 6px 0 12px; }
  .view-switch { display: none; }
  .clock { display: none; }
  .rtc-chip { display: none; }
  .course { font-size: 14px; }
  .seats { grid-auto-columns: 88px; padding: 6px 8px; gap: 5px; }
  .stagearea { flex-direction: column; }
  .main { flex: none; aspect-ratio: 16 / 9; }
  .app.view-grid .main, .app.view-wall .main, .app.spot .main { aspect-ratio: auto; flex: none; height: 56vh; }
  .board-wrap { padding: 6px 8px 50px; }
  .board-tools { left: 50%; top: auto; bottom: 6px; transform: translateX(-50%); flex-direction: row; padding: 4px; gap: 2px; max-width: calc(100% - 16px); overflow-x: auto; scrollbar-width: none; }
  .board-tools .sep { width: 1px; height: 22px; margin: 0 3px; }
  .tool { width: 32px; height: 32px; }
  .board-hint { font-size: 13px; }
  .swatch { width: 26px; height: 26px; }
  .size { width: 24px; }
  .grid-view { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; overflow-y: auto; padding: 6px; gap: 5px; }
  .grid-view .tile { aspect-ratio: 4 / 3; }
  .wall-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; overflow-y: auto; }
  .wall-grid .tile { aspect-ratio: 4 / 3; }
  .wall-tip { display: none; }
  .side { width: auto; flex: 1; border-left: 0; border-top: 1px solid var(--line); }
  .app.side-closed .side { display: flex; }
  .side-tabs button { height: 38px; }
  .controls { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-left: 4px; padding-right: 4px; height: calc(62px + var(--safe-b)); }
  .controls::-webkit-scrollbar, .seats::-webkit-scrollbar, .board-tools::-webkit-scrollbar { display: none; }
  .ctrl { min-width: 60px; height: 52px; font-size: 11px; }
  .ctrl-split .ctrl { min-width: 54px; }
  .ctrl-group.right { display: none; }
  .invite { grid-template-columns: 1fr; justify-items: center; }
  .invite > div { width: 100%; }
}

/* 手机横屏 */
@media (max-height: 500px) and (orientation: landscape) {
  .topbar { height: 42px; }
  .seats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84px; overflow-x: auto; padding: 4px 8px; }
  .side { width: 260px; }
  .controls { height: calc(54px + var(--safe-b)); }
  .ctrl { height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}