/* ============================================================
   Shared Classroom Shell · 11老师中文教师平台（2026-09-14，Charter v6 §18–24 + 视觉收口规则）
   课堂端（工作台 / 课堂 / 加入页 / 课堂 Shell）统一到当前 Design System：品牌、Logo、Button System token、
   颜色（去米色 / 旧灰）、圆角、阴影、控件；只改视觉与 Shell，不改课堂功能逻辑。加载顺序在 style.css 之后。
   ============================================================ */
:root {
  --btn-radius: 12px; --btn-radius-sm: 10px;
  --btn-h-sm: 36px; --btn-h-md: 44px; --btn-h-lg: 52px; --btn-weight: 600;
  --btn-primary-bg: linear-gradient(135deg, #2558d8 0%, #2b6fe0 48%, #1bb597 100%);
  --btn-primary-bg-hover: linear-gradient(135deg, #1f4cc6 0%, #2563d1 48%, #169f86 100%);
  --btn-primary-shadow: 0 8px 20px rgba(38, 96, 229, 0.16);
  --btn-secondary-border: #2660e5; --btn-secondary-fg: #2660e5; --btn-secondary-bg-hover: #f3f7ff;
  --btn-ghost-fg: #192165; --btn-ghost-bg-hover: rgba(38, 96, 229, 0.08);
  --btn-danger-bg: #d64550; --btn-danger-bg-hover: #bf3742;
  --btn-focus-ring: 0 0 0 3px rgba(38, 96, 229, 0.28);
  --shell-line: #e2e8f3; --shell-soft: #f5f8ff; --shell-panel: #ffffff; --shell-ink: #192165; --shell-muted: #6f7d91;
}
/* ---- Button System（课堂端所有 .button 家族）---- */
.button, .button-primary, .primary-button, .button-dark, .button-soft, .button-ghost, .secondary-button {
  min-height: var(--btn-h-md); padding: 0 20px; border-radius: var(--btn-radius); border: 1px solid transparent; font-weight: var(--btn-weight); font-size: 14px; line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; cursor: pointer;
  transition: background-color .16s ease, background-image .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.button-large { min-height: var(--btn-h-lg); padding: 0 26px; font-size: 15px; }
.button-primary, .primary-button, .button-dark { color: #fff; background: var(--btn-primary-bg); box-shadow: var(--btn-primary-shadow); }
.button-primary:hover, .primary-button:hover, .button-dark:hover { color: #fff; background: var(--btn-primary-bg-hover); transform: translateY(-1px); }
.button-soft, .button-ghost, .secondary-button { color: var(--btn-secondary-fg); background: #fff; border-color: var(--btn-secondary-border); box-shadow: none; }
.button-soft:hover, .button-ghost:hover, .secondary-button:hover { color: var(--btn-secondary-fg); background: var(--btn-secondary-bg-hover); border-color: #1f4fc4; }
.button:focus-visible, .text-button:focus-visible { outline: none; box-shadow: var(--btn-focus-ring); }
.button:disabled, .button[aria-disabled="true"] { opacity: .5; box-shadow: none; cursor: not-allowed; transform: none; }
.text-button { color: var(--shell-ink); font-weight: var(--btn-weight); border-radius: var(--btn-radius-sm); }
.text-button:hover { color: #2660e5; background: var(--btn-ghost-bg-hover); }

/* ---- 顶栏（工作台等页面）---- */
.app-topbar { border-bottom: 1px solid var(--shell-line); background: rgba(255, 255, 255, .96); }
.app-nav a { border-radius: 999px; font-weight: 600; color: var(--shell-ink); }
.app-nav a:hover, .app-nav a.is-active { color: #2660e5; background: var(--btn-ghost-bg-hover); }

/* ---- 课堂 Shell：布局背景去米色，统一浅蓝底 + 白卡 ---- */
.classroom-page, .classroom-root, .stage-shell, .collab-panel, .studio-rail { background: var(--shell-soft); }
.classroom-topline { grid-template-columns: minmax(240px, 1fr) auto auto; column-gap: 12px; border-bottom: 1px solid var(--shell-line); background: rgba(255, 255, 255, .96); backdrop-filter: blur(18px); }
.classroom-titlebar { display: flex; align-items: center; gap: 14px; min-width: 0; }
.classroom-brand { display: inline-flex; align-items: center; gap: 10px; padding-right: 14px; border-right: 1px solid var(--shell-line); text-decoration: none; color: var(--shell-ink); }
.classroom-brand img { width: 40px; height: 40px; object-fit: contain; background: transparent; }
.classroom-brand span { display: grid; line-height: 1.2; }
.classroom-brand strong { font-size: 14px; font-weight: 800; letter-spacing: .01em; }
.classroom-brand small { font-size: 11px; color: var(--shell-muted); }
.classroom-titlebar > div span { color: #2660e5; font-size: 11px; letter-spacing: .12em; }
.classroom-titlebar > div strong { color: var(--shell-ink); }
.studio-rail { border-right: 1px solid var(--shell-line); }
.stage-viewport { border: 1px solid var(--shell-line); border-radius: 20px; background: #fff; box-shadow: 0 16px 40px rgba(25, 33, 101, .06); }
.stage-shell { padding: 14px; }
/* 旧课堂米色内景 → 品牌浅蓝 */
.stage-viewport .lesson-cover, .stage-viewport [class*="cover-art"], .stage-viewport .cover-visual, .stage-viewport .hero-visual { background: linear-gradient(145deg, #f5f8ff, #eef3ff) !important; }
.preview-side div { background: #eef3ff; }

/* 顶栏控件：control-toggle = Secondary/Ghost small；icon-button = 36 圆角 10 */
.icon-button { width: 36px; height: 36px; border-radius: var(--btn-radius-sm); border: 1px solid var(--shell-line); background: #fff; color: var(--shell-ink); transition: border-color .16s ease, background-color .16s ease, color .16s ease; }
.icon-button:hover { border-color: #2660e5; color: #2660e5; background: var(--btn-secondary-bg-hover); }
.icon-button.danger-icon { border-color: transparent; color: #fff; background: var(--btn-danger-bg); }
.icon-button.danger-icon:hover { background: var(--btn-danger-bg-hover); }
.control-toggle, .room-code-button, .role-chip, .live-status { min-height: var(--btn-h-sm); border-radius: var(--btn-radius-sm); font-weight: var(--btn-weight); font-size: 13px; white-space: nowrap; }
.classroom-controls { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.classroom-controls .control-toggle { padding: 0 10px; }
.classroom-controls .control-toggle span { margin-right: 4px; }
.control-toggle { border: 1px solid var(--shell-line); background: #fff; color: var(--shell-ink); transition: border-color .16s ease, background-color .16s ease, color .16s ease; }
.control-toggle:hover { border-color: #2660e5; color: #2660e5; background: var(--btn-secondary-bg-hover); }
.control-toggle.is-active { border-color: transparent; color: #fff; background: var(--btn-primary-bg); box-shadow: var(--btn-primary-shadow); }
.control-toggle.is-active span { color: #fff; background: rgba(255, 255, 255, .18); }
.student-controls-toggle { border-color: #f0b4bb; color: #b13a49; background: #fff5f6; }
.student-controls-toggle.is-on { border-color: #b9e6dc; color: #0c806f; background: #e6f7f2; }
.student-controls-toggle span { background: transparent; color: inherit; }
.room-code-button { border: 1px solid var(--btn-secondary-border); background: #fff; color: var(--btn-secondary-fg); }
.room-code-button:hover { background: var(--btn-secondary-bg-hover); }
.room-code-button b { color: var(--shell-ink); letter-spacing: .14em; }
.role-chip { border: 1px solid var(--shell-line); background: var(--shell-soft); color: var(--shell-ink); }
.live-status { border: 1px solid #b9e6dc; background: #e6f7f2; color: #0c806f; }
.live-status.is-waiting { border-color: #ffe0a3; background: #fff7e6; color: #9a6a00; }
.live-status.is-offline { border-color: #f0b4bb; background: #fff5f6; color: #b13a49; }

/* 左栏页码导航 */
.section-nav button { border-radius: var(--btn-radius); font-weight: 600; color: var(--shell-ink); transition: background-color .16s ease, color .16s ease, box-shadow .16s ease; }
.section-nav button:hover { background: var(--btn-ghost-bg-hover); }
.section-nav button.is-active { background: #fff; box-shadow: 0 10px 24px rgba(25, 33, 101, .08); color: #2660e5; }
.section-nav button.is-active span, .course-vocabulary-toggle span { color: #fff; background: var(--btn-primary-bg); }
.rail-label { color: #2660e5; letter-spacing: .14em; }
.rail-arrows button, .course-vocabulary-toggle { border: 1px solid var(--shell-line); border-radius: var(--btn-radius); background: #fff; color: var(--shell-ink); font-weight: 600; }
.rail-arrows button:hover, .course-vocabulary-toggle:hover { border-color: #2660e5; color: #2660e5; }
.lesson-progress span { background: #e2e8f3; } .lesson-progress i { background: var(--btn-primary-bg); }

/* 右栏协作面板 */
.collab-tabs { border: 1px solid var(--shell-line); border-radius: 14px; background: #fff; }
.collab-tabs button { border-radius: var(--btn-radius-sm); font-weight: 600; color: var(--shell-muted); }
.collab-tabs button:hover { color: #2660e5; background: var(--btn-ghost-bg-hover); }
.collab-tabs button.is-active { color: #fff; background: var(--btn-primary-bg); box-shadow: var(--btn-primary-shadow); }
.collab-view { border: 1px solid var(--shell-line); border-radius: 18px; background: #fff; box-shadow: 0 16px 40px rgba(25, 33, 101, .05); }
.collab-heading strong { color: var(--shell-ink); } .collab-heading small { color: var(--shell-muted); }
.activity-feed article { border: 1px solid var(--shell-line); border-radius: 14px; background: var(--shell-soft); }
.activity-icon { color: #fff; background: var(--btn-primary-bg); border-radius: 10px; }
.member-card { border: 1px solid var(--shell-line); border-radius: 14px; background: var(--shell-soft); }
.member-card > span { color: #fff; background: var(--btn-primary-bg); border-radius: 12px; }
.room-information { border: 1px dashed #cfe0ff; border-radius: 16px; background: var(--shell-soft); }
.room-information > span { color: #2660e5; letter-spacing: .1em; }
.room-information > strong { color: var(--shell-ink); letter-spacing: .18em; }
.room-join-tools { display: grid; gap: 10px; margin-top: 12px; justify-items: center; }
.room-join-qr { width: 150px; height: 150px; border: 1px solid var(--shell-line); border-radius: 12px; background: #fff; }
.room-join-tools label { width: 100%; display: grid; gap: 6px; font-size: 12px; color: var(--shell-muted); }
.room-join-tools input { width: 100%; padding: 8px 10px; border: 1px solid var(--shell-line); border-radius: 10px; background: #fff; font: inherit; font-size: 12px; color: var(--shell-ink); }
.room-join-tools .button { min-height: var(--btn-h-sm); padding: 0 14px; font-size: 13px; }
.room-presence { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--shell-muted); }
.room-presence b { font-size: 18px; color: #0c806f; }

/* 共享板书工具条 / 互动游戏面板 / 词汇抽屉：按钮 token 化 */
.board-toolbar { border: 1px solid var(--shell-line); border-radius: 14px; background: var(--shell-soft); }
.board-tool-title { color: #2660e5; } .board-tool-title i { color: #fff; background: var(--btn-primary-bg); border-radius: 6px; }
.board-tool-group button, .board-more-tools summary { min-height: 32px; border: 1px solid var(--shell-line); border-radius: 9px; background: #fff; color: var(--shell-ink); font-weight: 600; font-size: 12px; }
.board-tool-group button:hover { border-color: #2660e5; color: #2660e5; background: var(--btn-secondary-bg-hover); }
.board-tool-group button.is-active { border-color: transparent; color: #fff; background: var(--btn-primary-bg); }
.board-tool-group button.is-danger { border-color: #f0b4bb; color: #b13a49; background: #fff5f6; }
.board-tool-group button.is-danger:hover { color: #fff; background: var(--btn-danger-bg); border-color: transparent; }
.board-expand-button { border: 1px solid var(--shell-line); border-radius: var(--btn-radius-sm); background: #fff; color: var(--shell-ink); font-weight: 600; }
.shared-board-stage { border: 1px solid var(--shell-line); border-radius: 14px; }
.live-game-catalog button { border: 1px solid var(--shell-line); border-radius: 14px; background: #fff; color: var(--shell-ink); }
.live-game-catalog button:hover, .live-game-catalog button.is-active { border-color: #2660e5; background: var(--btn-secondary-bg-hover); }
.live-game-catalog button b { color: #fff; background: var(--btn-primary-bg); border-radius: 10px; }
.live-game-setup button, .live-game-teacher-actions button, .live-game-share button, .live-game-scoreboard button { min-height: var(--btn-h-sm); padding: 0 14px; border: 1px solid var(--btn-secondary-border); border-radius: var(--btn-radius-sm); background: #fff; color: var(--btn-secondary-fg); font-weight: 600; font-size: 13px; }
.live-game-setup button[type="submit"], .live-game-teacher-actions #liveGameStart { border-color: transparent; color: #fff; background: var(--btn-primary-bg); box-shadow: var(--btn-primary-shadow); }
.live-game-buzz { border-radius: 16px; background: var(--btn-primary-bg); color: #fff; font-weight: 800; box-shadow: var(--btn-primary-shadow); }
.live-game-buzz:disabled { opacity: .5; box-shadow: none; }
.live-game-stage { border: 1px solid var(--shell-line); border-radius: 16px; background: var(--shell-soft); }
.course-vocabulary-drawer { border-left: 1px solid var(--shell-line); background: #fff; }
.course-vocabulary-drawer header span { color: #2660e5; }
/* 学生被锁定时的遮罩提示统一品牌色 */
.student-controls-locked .stage-viewport:after { border-radius: 20px; }

/* ---- 加入课堂页：品牌 Logo 替代旧「轨道」图标，卡片 / 输入 / 按钮 token ---- */
.center-page { background: radial-gradient(circle at 50% 10%, #fff 0, #f5f8ff 55%, #eef3ff 100%); }
.join-room-panel { border: 1px solid var(--shell-line); border-radius: 24px; background: #fff; box-shadow: 0 24px 60px rgba(25, 33, 101, .08); }
.join-orbit { display: none; }
.join-room-panel .soft-label { display: block; text-align: center; color: #2660e5; letter-spacing: .14em; }
.join-room-panel .soft-label::before { content: ""; display: block; width: 64px; height: 64px; margin: 0 auto 14px; background: url("/static/brand/platform-logo.png") center / contain no-repeat; }
.join-room-panel h1 { color: var(--shell-ink); }
.guest-join-field span { color: var(--shell-muted); font-weight: 600; }
.guest-join-field input { border: 1px solid var(--shell-line); border-radius: var(--btn-radius); background: #fff; color: var(--shell-ink); transition: border-color .16s ease, box-shadow .16s ease; }
.guest-join-field input:focus { outline: none; border-color: #2660e5; box-shadow: var(--btn-focus-ring); }
.guest-code-input { letter-spacing: .28em; font-weight: 800; color: var(--shell-ink); }
.inline-link { color: #2660e5; font-weight: 600; }

/* ---- 工作台 hero / 卡片 ---- */
.dashboard-hero { border: 1px solid var(--shell-line); background: linear-gradient(135deg, #fff 0%, #f7f9ff 60%, #eef3ff 100%); }
.hero-copy h1 { color: var(--shell-ink); }
.lesson-feature, .dashboard-card, .empty-soft { border-color: var(--shell-line); }

/* ---- 响应式：小屏课堂顶栏折行、品牌块收缩 ---- */
@media (max-width: 1180px) {
  .classroom-brand span { display: none; }
  .classroom-brand { padding-right: 8px; }
  .student-controls-toggle { font-size: 12px; }
}
@media (max-width: 980px) {
  .classroom-topline { grid-template-columns: 1fr; gap: 8px; padding: 8px 10px; }
  .classroom-brand span { display: none; }
  .classroom-brand { padding-right: 8px; }
  .classroom-controls { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  .room-join-qr { width: 120px; height: 120px; }
  .join-room-panel { border-radius: 18px; }
}

/* ---- 自动生成（python，见项目地图 18）：旧课堂低饱和暖色（米/浅棕）→ 品牌蓝灰同亮度映射；红/橙/金等语义色不动。共 40 条 ---- */
.dashboard-hero{border:1px solid #e2e8f3;background:linear-gradient(135deg,#fff 0%,#f5f8ff 60%,#eef3ff 100%)}
.preview-top span{background:#cfd9ec}
.preview-grid>aside i{background:#eef3ff}
.preview-cards span{background:linear-gradient(135deg,#faf9f7,#eef3ff)}
.preview-side div{background:#eef3ff}
/* Auth and generic pages */
.auth-shell{background:#eef3ff}
.teaching-prompt{background:#f5f8ff}
.center-page{background:radial-gradient(circle at 50% 20%,#fff 0,#eef3ff 50%,#eef3ff 100%)}
.join-orbit span{border:1px solid #cfd9ec}
.classroom-root{background:#eef3ff}
.classroom-topline{border-bottom:1px solid #e2e8f3;background:rgba(255,255,255,.96)}
.studio-rail{border-right:1px solid #e2e8f3;background:#f5f8ff}
.section-nav button span{border:1px solid #e2e8f3;background:#fff;color:#989ba1}
.section-nav button:hover{background:#eef3ff}
.section-nav button.is-active{background:#fff;box-shadow:0 8px 18px rgba(25,33,101,.06)}
.lesson-progress>span{background:#e2e8f3}
.stage-viewport{border:1px solid #e2e8f3;background:#fff;box-shadow:0 18px 44px rgba(25,33,101,.08)}
.heading-count{color:#e2e8f3}
.section-marker{color:#e2e8f3}
.intro-art{background:linear-gradient(155deg,#eef3ff,#e2e8f3)}
.teacher-note-strip{background:#f5f8ff}
.vocab-index{color:#b9c6e0}
.vocab-detail-stack{background:linear-gradient(145deg,#fbfaf8,#f5f8ff)}
.example-stack>div{border:1px solid #eef3ff;background:rgba(255,255,255,.8)}
.speech-bubble{background:#f5f8ff}
.sentence-line span{color:#b9c6e0}
.formula-card.light{background:linear-gradient(145deg,#f5f8ff,#eef3ff)}
.collab-tabs{border:1px solid #e2e8f3;background:#f5f8ff}
.collab-view{border:1px solid #e2e8f3;background:#fff}
.score-ring{background:conic-gradient(var(--wine) 70%,#eef3ff 0);box-shadow:inset 0 0 0 10px #fff,var(--shadow-sm)}
.question-number{color:#e2e8f3}
.admin-stat-card.teacher:after{background:#eef3ff}
.admin-filter-bar button span{background:#e2e8f3}
.trial-material-hidden-note{border:1px dashed #d8b875;color:#7a5b1c;background:#f5f8ff}
/* Teacher-only speaker notes from the source trial PPT */
.teacher-cheat-sheet{border:1px solid #ead9a9;border-left:5px solid #d59b27;background:linear-gradient(135deg,#f5f8ff,#f5f8ff);box-shadow:0 12px 28px rgba(106,78,22,.08)}
.live-game-bolt{background:#eef3ff}
.live-game-stage{background:linear-gradient(145deg,#f5f8ff,#f5f9fb)}
.live-game-catalog>button.is-active{border-color:#a83d48;background:#f5f8ff;box-shadow:0 0 0 2px rgba(168,61,72,.1)}
.live-game-answer-grid button.is-selected{border-color:#a83d48;background:#f5f8ff}
.live-game-answer-grid button.is-wrong{border-color:#b94747;background:#f5f8ff}

/* 2026-09-15 课堂工作台顶栏（替代旧 hero） */
.workspace-topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 28px 32px; margin-bottom: 24px; border: 1px solid var(--shell-line); border-radius: 22px; background: linear-gradient(135deg, #fff 0%, #f5f8ff 60%, #eef3ff 100%); }
.workspace-topbar h1 { margin: 6px 0 6px; font-size: 30px; color: var(--shell-ink); }
.workspace-topbar p { margin: 0; color: #5b6b85; }
.workspace-topbar-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 720px) { .workspace-topbar { flex-direction: column; align-items: stretch; padding: 22px 20px; } .workspace-topbar h1 { font-size: 24px; } }

/* 2026-09-15 面板放大 / 全屏 / 新窗口（老师端、学生端） */
.collab-tabs { position: relative; }
.collab-zoom-tools { display: inline-flex; gap: 6px; margin-left: auto; }
.collab-zoom-tools button { border: 1px solid var(--shell-line); background: #fff; color: #2660e5; border-radius: 10px; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
.collab-zoom-tools button:hover { background: #eef4ff; border-color: #2660e5; }
.collab-panel.is-zoomed { position: fixed !important; inset: 8px !important; z-index: 1300 !important; margin: 0 !important; padding: 16px !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; opacity: 1 !important; pointer-events: auto !important; overflow: auto !important; background: #fff !important; border: 1px solid var(--shell-line); border-radius: 18px; box-shadow: 0 30px 80px rgba(25, 33, 101, .25); }
.collab-panel.is-zoomed .collab-view.is-active { font-size: 1.12em; }
.collab-panel.is-zoomed .live-game-stage strong, .collab-panel.is-zoomed #liveGameQuestion { font-size: 1.7em; line-height: 1.5; }
.collab-panel.is-zoomed .shared-board-stage, .collab-panel.is-zoomed .shared-board { min-height: 60vh; }
.collab-panel:fullscreen, .collab-panel:-webkit-full-screen { background: #fff; padding: 24px; overflow: auto; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.collab-panel:fullscreen .collab-view.is-active { font-size: 1.25em; }
.collab-panel:fullscreen #liveGameQuestion { font-size: 2em; }
body.collab-panel-zoomed { overflow: hidden; }
/* 新窗口模式：只渲染面板 */
main.classroom-root[data-panel-view="true"] .classroom-topline .classroom-controls, main.classroom-root[data-panel-view="true"] .studio-rail, main.classroom-root[data-panel-view="true"] .classroom-grid > :not(.collab-panel) { display: none !important; }
main.classroom-root[data-panel-view="true"] .classroom-grid { grid-template-columns: minmax(0, 1fr) !important; }
main.classroom-root[data-panel-view="true"] .collab-panel { display: grid !important; opacity: 1 !important; pointer-events: auto !important; padding: 14px !important; min-height: calc(100vh - 120px); }
main.classroom-root[data-panel-view="true"] .collab-view.is-active { font-size: 1.15em; }
main.classroom-root[data-panel-view="true"] #liveGameQuestion { font-size: 1.8em; }
main.classroom-root[data-panel-view="true"] .shared-board-stage, main.classroom-root[data-panel-view="true"] .shared-board { min-height: 65vh; }

/* 2026-09-15 课堂游戏入口（主站新游戏系统） */
.classroom-games-hint { margin: 0 0 10px; font-size: 12px; line-height: 1.6; color: #5b6b85; }
.classroom-games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.classroom-game-link { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border: 1px solid var(--shell-line); border-radius: 14px; background: #fff; color: var(--shell-ink); text-decoration: none; font-size: 12px; font-weight: 700; text-align: center; }
.classroom-game-link b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: var(--btn-primary-bg); font-size: 16px; }
.classroom-game-link:hover { border-color: #2660e5; background: #eef4ff; }
.collab-panel.is-zoomed .classroom-games-grid, main.classroom-root[data-panel-view="true"] .classroom-games-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.legacy-game-tools[hidden] { display: none !important; }

/* 2026-09-15 课堂笔记系统（Teacher Classroom Notes v1） */
.classroom-notes { display: grid; gap: 10px; }
.classroom-notes-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.classroom-notes-view { min-height: 160px; padding: 14px 16px; border: 1px solid var(--shell-line); border-radius: 14px; background: #fff; overflow: auto; }
.classroom-notes-empty, .classroom-notes-hint { margin: 0; font-size: 12px; line-height: 1.6; color: #5b6b85; }
.classroom-notes-hint { padding: 0 4px; }
.classroom-notes-meta { display: flex; gap: 12px; margin-bottom: 8px; font-size: 12px; color: #6f7d91; }
.classroom-notes-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.classroom-notes-line { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-bottom: 1px dashed #e3e9f1; }
.classroom-notes-num { color: #2660e5; font-weight: 800; font-size: 13px; padding-top: 3px; }
.classroom-notes-zh { font-size: 18px; line-height: 1.7; color: var(--shell-ink); word-break: break-word; }
.classroom-notes-zh mark { background: #fff2a8; padding: 0 2px; border-radius: 3px; }
.classroom-notes-py { font-size: 14px; color: #2660e5; font-weight: 700; line-height: 1.5; }
.classroom-notes-en { font-size: 13px; color: #5b6b85; line-height: 1.5; }
.classroom-notes-image { max-width: 100%; border-radius: 10px; border: 1px solid #e3e9f1; }
.classroom-notes-board { margin-top: 12px; }
.classroom-notes-board-title { font-size: 12px; font-weight: 800; color: #0c806f; margin-bottom: 6px; }
.classroom-notes-board-stage { position: relative; width: 100%; background: #fff; border: 1px solid #e3e9f1; border-radius: 12px; overflow: hidden; }
.classroom-notes-board-stage img { display: block; }
.collab-panel.is-zoomed .classroom-notes-zh, main.classroom-root[data-panel-view="true"] .classroom-notes-zh { font-size: 26px; }
.collab-panel.is-zoomed .classroom-notes-py, main.classroom-root[data-panel-view="true"] .classroom-notes-py { font-size: 18px; }
.collab-panel.is-zoomed .classroom-notes-en, main.classroom-root[data-panel-view="true"] .classroom-notes-en { font-size: 16px; }
.collab-panel:fullscreen .classroom-notes-zh { font-size: 30px; }
.legacy-board[hidden] { display: none !important; }
@media print {
  body * { visibility: hidden !important; }
  #classroomNotes, #classroomNotes * { visibility: visible !important; }
  #classroomNotes { position: absolute; left: 0; top: 0; width: 100%; padding: 16px; }
  .classroom-notes-actions, #ctNotesRoot { display: none !important; }
  .classroom-notes-view { border: 0; overflow: visible; }
}

/* 2026-09-15 Shared Classroom Session 活动舞台 */
.classroom-activity-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.classroom-activity-bar strong { font-size: 13px; color: #192165; }
.classroom-activity-stage { border: 1px solid var(--shell-line); border-radius: 14px; overflow: hidden; background: #fff; min-height: 420px; }
.classroom-activity-frame { display: block; width: 100%; height: 520px; border: 0; }
.collab-panel.is-zoomed .classroom-activity-frame, .collab-panel:fullscreen .classroom-activity-frame, main.classroom-root[data-panel-view="true"] .classroom-activity-frame { height: calc(100vh - 150px); }
.classroom-game-link[disabled] { opacity: .5; cursor: not-allowed; }
@media print { html[data-print-notes] .collab-panel { position: static !important; } }

/* 2026-09-15 老师：课堂工作台「线上课堂可以做什么」——标题不得逐字断行；右侧留白收紧 */
.student-entry-steps > div { display: flex !important; flex-direction: column !important; gap: 4px !important; align-items: flex-start !important; }
.student-entry-steps strong { font-size: 14px !important; line-height: 1.4; white-space: nowrap; word-break: keep-all; text-align: left !important; width: 100%; }
.student-entry-steps small { font-size: 12px !important; line-height: 1.6; }

/* 2026-09-15 v2 收口：面板工具横排一行（不再竖排）；学生端「我的笔记」次级样式；老师端「老师课堂笔记」 */
.collab-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.collab-zoom-tools { flex-basis: 100%; justify-content: flex-end; margin-left: 0; }
.collab-zoom-tools button { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; padding: 5px 9px; font-size: 12px; }
.collab-zoom-tools button span { display: inline; writing-mode: horizontal-tb; }
#ctNotesRoot #noteLauncher[data-ct-role="student"] { background: #fff !important; color: #2660e5 !important; border: 1px solid #2660e5 !important; box-shadow: 0 8px 20px rgba(38, 96, 229, .12) !important; }
.classroom-notes-actions .button { white-space: nowrap; }
.classroom-game-group + .classroom-game-group { margin-top: 12px; }
.classroom-game-group h4 { margin: 0 0 6px; font-size: 12px; font-weight: 800; color: #2660e5; letter-spacing: .04em; }

/* 2026-09-15 顶部课堂码弹层 */
.classroom-statusbar { position: relative; }
.room-code-popover[hidden] { display: none; }
.room-code-popover { position: absolute; top: calc(100% + 8px); left: 0; z-index: 1400; width: min(420px, 92vw); padding: 14px 16px; border: 1px solid var(--shell-line); border-radius: 16px; background: #fff; box-shadow: 0 24px 60px rgba(25, 33, 101, .18); display: grid; gap: 10px; }
.room-code-popover__row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; color: #5b6b85; }
.room-code-popover__row strong { font-size: 22px; letter-spacing: .12em; color: #192165; }
.room-code-popover__row input { min-width: 0; padding: 6px 8px; border: 1px solid var(--shell-line); border-radius: 8px; font-size: 12px; color: #26324a; }
.room-code-popover__row .button { padding: 6px 10px; font-size: 12px; }
.room-code-popover__qr { display: block; width: 160px; height: 160px; margin: 4px auto 0; border: 1px solid var(--shell-line); border-radius: 12px; }
.room-code-popover p { margin: 0; font-size: 12px; color: #5b6b85; text-align: center; }

/* 2026-09-15 老师：去掉顶部胶囊导航（hidden 属性优先于 display 规则） */
.app-nav[hidden] { display: none !important; }

/* 2026-09-15 批次 B：活动占主舞台 */
.stage-shell { display: flex; flex-direction: column; min-height: 0; }
.stage-shell > .stage-viewport { flex: 1 1 auto; min-height: 0; }
.stage-activity { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--shell-line); border-radius: 20px; background: #fff; box-shadow: 0 16px 40px rgba(25, 33, 101, .06); overflow: hidden; }
.stage-activity[hidden] { display: none; }
.stage-activity-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 14px; border-bottom: 1px solid var(--shell-line); background: linear-gradient(135deg, #eef3ff, #e6f7f2); }
.stage-activity-bar strong { font-size: 14px; color: #192165; }
.stage-activity-bar .button { margin-left: auto; padding: 6px 12px; font-size: 13px; }
.stage-activity-sound { font-size: 12px; color: #5b6b85; display: inline-flex; align-items: center; gap: 4px; }
.stage-activity-toggle { min-height: 30px; padding: 0 10px 0 6px; border-radius: 999px; border: 1px solid #f0b4bb; background: #fff5f6; color: #b13a49; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.stage-activity-toggle span { width: 20px; height: 20px; border-radius: 50%; background: #fff; display: inline-grid; place-items: center; font-size: 11px; }
.stage-activity-toggle.is-on { border-color: #b9e6dc; background: #e6f7f2; color: #0c806f; }
.stage-activity-badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #fff1f2; color: #b13a49; border: 1px solid #f0b4bb; }
.stage-activity-badge.is-on { background: #e6f7f2; color: #0c806f; border-color: #b9e6dc; }
.stage-activity-frame-wrap { flex: 1 1 auto; min-height: 0; }
.stage-activity-iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; background: #fff; }
.classroom-hsk-picker { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.classroom-hsk-picker select { flex: 1 1 auto; min-width: 0; padding: 6px 8px; border: 1px solid var(--shell-line); border-radius: 8px; font-size: 12px; color: #26324a; background: #fff; }
.classroom-hsk-picker .button { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
.classroom-activity-link b { background: linear-gradient(135deg, #2558d8, #1bb597); color: #fff; }

/* 2026-09-15 批次 G：通用课堂壳（无课件）+ 右侧面板可收起 */
main.classroom-root[data-generic="true"] .classroom-grid { grid-template-columns: 0 minmax(0, 1fr) 316px; }
/* 三栏固定列位：通用课堂隐藏左栏后，主舞台不能被自动布局挤进 0 宽的第一列 */
.classroom-grid > .studio-rail { grid-column: 1; }
.classroom-grid > .stage-shell { grid-column: 2; }
.classroom-grid > .collab-panel { grid-column: 3; }
main.classroom-root[data-generic="true"] .studio-rail { display: none; }
body.collab-collapsed .classroom-grid { grid-template-columns: 242px minmax(0, 1fr) 0 !important; }
body.collab-collapsed main.classroom-root[data-generic="true"] .classroom-grid { grid-template-columns: 0 minmax(0, 1fr) 0 !important; }
body.collab-collapsed .collab-panel { display: none !important; }
.collab-collapse { min-height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--shell-line); background: #fff; color: #5b6b85; font-size: 14px; cursor: pointer; }
.collab-collapse:hover { color: #2660e5; border-color: #2660e5; }
.collab-expander { display: none; position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 1200; width: 30px; padding: 12px 0; border: 1px solid var(--shell-line); border-right: 0; border-radius: 12px 0 0 12px; background: #fff; color: #2660e5; cursor: pointer; box-shadow: 0 8px 24px rgba(25, 33, 101, .12); }
.collab-expander span { display: block; font-size: 14px; }
.collab-expander b { display: block; writing-mode: vertical-rl; font-size: 12px; margin-top: 4px; }
body.collab-collapsed .collab-expander { display: block; }
.generic-stage { display: grid; place-items: center; height: 100%; padding: 40px; }
.generic-stage-card { max-width: 560px; text-align: center; display: grid; gap: 14px; }
.generic-stage-kicker { font-size: 12px; letter-spacing: .18em; color: #2660e5; font-weight: 700; }
.generic-stage-card h1 { margin: 0; font-size: 40px; color: #192165; }
.generic-stage-card p { margin: 0; color: #5b6b85; line-height: 1.8; }
.generic-stage-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.stage-activity-engine { flex: 1 1 auto; min-height: 0; }

/* 2026-09-15 手机端：活动占主舞台时左栏让位，活动铺满屏幕宽 */
@media (max-width: 980px) {
  body.has-stage-activity .classroom-grid { grid-template-columns: 0 minmax(0, 1fr) !important; }
  body.has-stage-activity .studio-rail { display: none !important; }
  body.has-stage-activity .stage-shell { padding: 6px !important; }
  body.has-stage-activity .stage-activity-iframe { min-height: calc(100vh - 150px); }
}

/* 2026-09-15 手机端：顶部栏改自适应高度，控制按钮换行后不再压到主舞台 / 活动条上 */
@media (max-width: 700px) {
  .classroom-topline { height: auto !important; min-height: 64px; padding: 6px 9px !important; row-gap: 4px; }
  .classroom-controls { flex-wrap: wrap; justify-content: flex-end; }
}