/* 晚自习自习课系统 · 共享样式
   设计原则：平板要大字大按钮、手机要信息密度、所有页面都不许花哨。
   浅色主题，足够对比度，投影仪/日光灯下都看得清。 */

:root {
  --bg: #f4f6fa;
  --card: #ffffff;
  --line: #e3e8f0;
  --line-2: #cfd8e6;
  --text: #1f2937;
  --muted: #6b7280;
  --muted-2: #9aa4b2;
  --pri: #2563eb;
  --pri-soft: #eef4ff;
  --ok: #15a34a;
  --ok-soft: #e9f8ee;
  --warn: #e08e00;
  --warn-soft: #fff6e5;
  --danger: #dc2626;
  --danger-soft: #fdeceb;
  --gray-soft: #f1f4f9;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 18px rgba(16, 24, 40, .05);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

.wrap { max-width: 1000px; margin: 0 auto; padding: 12px 12px 40px; }
.wrap.narrow { max-width: 640px; }

/* ------------------------------------------------------------------ 顶部栏 */
.top {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.top-in {
  max-width: 1000px; margin: 0 auto; padding: 10px 12px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.top h1 { font-size: 18px; margin: 0; font-weight: 700; letter-spacing: .2px; }
.top .sub { color: var(--muted); font-size: 13px; }
.top .spacer { flex: 1; }

.tabs { display: flex; gap: 6px; background: var(--gray-soft); padding: 3px; border-radius: 10px; }
.tabs button {
  border: 0; background: transparent; padding: 7px 14px; border-radius: 8px;
  color: var(--muted); font-weight: 600; cursor: pointer; min-height: 38px;
}
.tabs button.on { background: var(--card); color: var(--pri); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.tabs .badge { display: none; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; margin-left: 4px;
  border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.tabs .badge.on { display: inline-block; }

/* -------------------------------------------------------------------- 卡片 */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow);
}
.card.tight { padding: 10px 12px; }
.card h2 { font-size: 15px; margin: 0 0 10px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card h2 .cnt { color: var(--muted); font-weight: 600; font-size: 13px; }

/* 看板宫格：队列卡片两列并排，KPI / 全班状态 / 最新动态仍是整行。
   ★ 平板把系统「显示大小」调大后，浏览器上报的 CSS 宽度会远小于物理分辨率
     （1280 宽的横屏可能报成 ~640），按宽度断点会把横屏也误判成单列。
     所以改用「朝向」判断：横屏一律两列，只有竖屏且窄才塌成单列。 */
.board-grid {
  display: grid; gap: 12px;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  margin-bottom: 12px;
}
.board-grid > .card { margin-bottom: 0; min-width: 0; }
@media (orientation: portrait) and (max-width: 820px) {
  .board-grid { grid-template-columns: 1fr; }
}

.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.center { text-align: center; }
.hide { display: none !important; }

/* -------------------------------------------------------------------- 按钮 */
.btn {
  border: 1px solid var(--line-2); background: var(--card); color: var(--text);
  border-radius: 12px; padding: 10px 16px; min-height: 46px; font-weight: 600;
  cursor: pointer; transition: transform .06s, background .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.pri { background: var(--pri); border-color: var(--pri); color: #fff; }
.btn.ok  { background: var(--ok);  border-color: var(--ok);  color: #fff; }
.btn.warn{ background: var(--warn); border-color: var(--warn); color: #fff; }
.btn.dgr { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.ghost { background: var(--gray-soft); border-color: transparent; }
.btn.lg { font-size: 19px; min-height: 62px; border-radius: 16px; padding: 14px 22px; }
.btn.block { width: 100%; }
.btn.sm { min-height: 38px; padding: 7px 12px; font-size: 14px; border-radius: 10px; }

/* -------------------------------------------------------------------- 标签 */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: var(--gray-soft); color: var(--muted); white-space: nowrap;
}
.tag.pri { background: var(--pri-soft); color: var(--pri); }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.dgr { background: var(--danger-soft); color: var(--danger); }

.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted-2); flex: none; }
.dot.on { background: var(--ok); }
.dot.off { background: var(--muted-2); }
.dot.busy { background: var(--pri); }
.dot.warn { background: var(--warn); }
.dot.dgr { background: var(--danger); }

/* -------------------------------------------------------------------- 表单 */
.field { margin-bottom: 10px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
.input, select.input, textarea.input {
  width: 100%; border: 1px solid var(--line-2); border-radius: 10px;
  padding: 11px 12px; min-height: 46px; background: #fff; outline: none;
}
.input:focus { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-soft); }
.code-input {
  font-size: 30px; letter-spacing: 10px; text-align: center; font-weight: 800;
  text-transform: uppercase; min-height: 68px; padding-left: 10px;
}

/* ---------------------------------------------------------------- 学生卡片 */
.grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }

.stu {
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--card);
  border-left: 4px solid var(--line-2);
}
.stu.s-help { border-left-color: var(--danger); background: var(--danger-soft); }
.stu.s-long { border-left-color: var(--danger); background: #fff3f2; }
.stu.s-doing { border-left-color: var(--pri); background: var(--pri-soft); }
.stu.s-warn { border-left-color: var(--warn); background: var(--warn-soft); }
.stu.s-off { border-left-color: var(--line-2); opacity: .62; }
.stu.s-done { border-left-color: var(--ok); background: var(--ok-soft); }
.stu.s-reg { border-left-color: #eab308; background: #fefce8; }

/* 看板「全班状态」颜色图例：灰=没上线 · 黄=已录作业 · 蓝=开始写 · 绿=全部完成 */
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 6px 0 10px; font-size: 12px; color: var(--muted); }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.sw-off { background: var(--muted-2); }
.sw-reg { background: #eab308; }
.sw-doing { background: var(--pri); }
.sw-done { background: var(--ok); }

.stu .nm { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.stu .cur { font-size: 13px; margin-top: 4px; color: var(--text); }
.stu .meta { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ 求助队列 */
.help-item {
  border: 1px solid var(--danger); border-radius: 12px; padding: 12px;
  background: var(--danger-soft); margin-bottom: 10px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.help-item.arrived { border-color: var(--warn); background: var(--warn-soft); }
.help-item .who { font-weight: 800; font-size: 17px; }
.help-item .wait { font-size: 22px; font-weight: 800; color: var(--danger); font-variant-numeric: tabular-nums; }
.help-item.arrived .wait { color: var(--warn); }

/* -------------------------------------------------------------------- 计时 */
.timer {
  font-size: 60px; font-weight: 800; text-align: center; letter-spacing: 2px;
  font-variant-numeric: tabular-nums; line-height: 1.05; margin: 6px 0;
}
.timer.small { font-size: 34px; }

.bar { height: 8px; border-radius: 999px; background: var(--gray-soft); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--pri); border-radius: 999px; transition: width .3s; }
.bar > i.ok { background: var(--ok); }
.bar > i.warn { background: var(--warn); }

/* -------------------------------------------------------------------- 任务 */
.task {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: #fff;
}
.task.doing { border-color: var(--pri); background: var(--pri-soft); }
.task.done { opacity: .6; }
.task.done .tt { text-decoration: line-through; }
.task .tt { font-weight: 600; }
.task .sj {
  font-size: 12px; font-weight: 700; color: var(--pri); background: var(--pri-soft);
  padding: 3px 8px; border-radius: 8px; flex: none;
}

/* ★ 错题本（v0.17.8）：一条错题一行，下面挂着当年趟的那道题的留影 */
.wb-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: #fff;
}
.wb-row .grow { min-width: 0; }
.wb-row b { font-size: 15px; }
.wb-shots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wb-shot {
  /* v0.19.2 起留影是"按题裁的横条图"（宽:高 ≈ 2.5:1），固定 88×64 cover 会把
     左右裁掉、圈刚好掉出去 —— 改保比例自适应宽度 */
  width: 150px; height: auto; border-radius: 8px;
  border: 1px solid var(--line); background: #f6f6f6; cursor: zoom-in;
}
.wb-shot:hover { border-color: var(--pri); }
/* ★ v0.51.1 错题转录：知识点下面列出的题目文字 */
.wb-qs { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.wb-q {
  font-size: 13px; color: #333; line-height: 1.55;
  padding: 6px 8px; background: #f7f9fb; border-radius: 8px;
  border-left: 3px solid var(--line);
}
.wb-q .muted { color: #8b98a9; }

/* -------------------------------------------------------------------- 杂项 */
.kpi { display: flex; gap: 8px; flex-wrap: wrap; }
.kpi .k {
  flex: 1; min-width: 96px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px;
}
.kpi .k .v { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi .k .l { font-size: 12px; color: var(--muted); }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: #111827; color: #fff; padding: 12px 18px; border-radius: 12px;
  font-weight: 600; opacity: 0; pointer-events: none; transition: all .22s; z-index: 1000;
  max-width: 90vw; text-align: center;
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--danger); }

/* 全屏进度遮罩（上传/识别）：一直亮着，转圈 + 提示 + 可选进度条 */
.busy {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, .35);
  display: flex; align-items: center; justify-content: center;
  z-index: 998; opacity: 0; pointer-events: none; transition: opacity .18s;
}
.busy.on { opacity: 1; pointer-events: auto; }
.busy-box {
  background: #fff; border-radius: 14px; padding: 24px 28px; min-width: 190px;
  max-width: 78vw; text-align: center; box-shadow: 0 12px 34px rgba(16, 24, 40, .25);
}
.busy-spin {
  width: 34px; height: 34px; margin: 0 auto 12px; border-radius: 50%;
  border: 3px solid var(--gray-soft); border-top-color: var(--pri);
  animation: busy-rotate .8s linear infinite;
}
@keyframes busy-rotate { to { transform: rotate(360deg); } }
.busy-txt { font-size: 15px; font-weight: 700; color: var(--text); }
.busy-bar { height: 6px; margin-top: 14px; border-radius: 4px; background: var(--gray-soft); overflow: hidden; }
.busy-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--pri); transition: width .2s; }

.banner {
  background: var(--warn-soft); border: 1px solid var(--warn); color: #8a5a00;
  border-radius: 12px; padding: 10px 12px; font-size: 14px; margin-bottom: 10px;
}
.banner.err { background: var(--danger-soft); border-color: var(--danger); color: #8c1c17; }

.empty { text-align: center; color: var(--muted-2); padding: 26px 10px; font-size: 14px; }

table.tb { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tb th, table.tb td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
table.tb th { color: var(--muted); font-size: 12px; font-weight: 700; }
table.tb td.num, table.tb th.num { text-align: right; font-variant-numeric: tabular-nums; }

.codebox {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700;
  background: var(--gray-soft); padding: 2px 7px; border-radius: 6px; letter-spacing: 1px;
}

/* --------------------------------------------------------------- 学生端专属 */
body.student { background: #f0f4fb; }
.stu-top { display: flex; align-items: center; gap: 10px; }
.stu-name { font-size: 20px; font-weight: 800; }
.big-card {
  background: #fff; border-radius: 20px; padding: 20px 16px; margin-bottom: 12px;
  box-shadow: var(--shadow); text-align: center;
}
.big-card .label { color: var(--muted); font-size: 14px; font-weight: 600; }
.big-card .title { font-size: 24px; font-weight: 800; margin: 6px 0 2px; word-break: break-all; }
.acts { display: grid; gap: 10px; grid-template-columns: 1fr; margin-top: 14px; }
.acts.two { grid-template-columns: 1fr 1fr; }

/* 伪全屏（Android WebView 无元素全屏时兜底） */
.fs-fake { position: fixed !important; top: 0; left: 0; right: 0; bottom: 0; z-index: 500; overflow: auto; background: #fff; padding: 16px 16px 30px; }
.fs-fake .big-card { max-width: 720px; margin-left: auto; margin-right: auto; }
/* 专注模式：顶部栏也钉在屏幕上，方便随时退出 */
body.fs-on .top { position: fixed; top: 0; left: 0; right: 0; }
body.fs-on #main { padding-top: 62px; }

@media (max-width: 420px) {
  .timer { font-size: 48px; }
  .grid { grid-template-columns: 1fr; }
  .kpi .k { min-width: 86px; }
}

/* ------------------------------------------------ 收作业工作台（解析预览行） */
.prow {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px;
  margin-bottom: 8px; background: #fff;
  display: grid; gap: 6px;
  grid-template-columns: 1fr 1fr 88px 34px;
  align-items: center;
}
.prow.unsure { border-color: var(--warn); background: var(--warn-soft); }
.prow.nosid { border-color: var(--danger); background: var(--danger-soft); }
.prow .tt { grid-column: 1 / -1; }              /* 内容输入占满整行 */
.prow select, .prow input {
  width: 100%; border: 1px solid var(--line-2); border-radius: 8px;
  padding: 8px 9px; min-height: 40px; background: #fff; font-size: 14px; outline: none;
}
.prow select:focus, .prow input:focus { border-color: var(--pri); }
.prow .del {
  border: 1px solid var(--line-2); background: #fff; border-radius: 8px;
  min-height: 40px; font-size: 18px; color: var(--danger); cursor: pointer; line-height: 1;
}
@media (max-width: 560px) {
  .prow { grid-template-columns: 1fr 1fr; }
  .prow .del { grid-column: 2 / 3; }
}

/* 提醒类（要带的东西 / 家长签字）—— 不是作业，视觉上必须一眼区分 */
.prow.k-notice { border-left: 4px solid var(--warn); }
.notice-item {
  border: 1px solid var(--warn); background: var(--warn-soft); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px;
}
.notice-item .grow { flex: 1; }
.notice-item .tt { font-weight: 700; }
.stu .notice-line {
  font-size: 13px; color: #8a5a00; background: var(--warn-soft);
  border-radius: 8px; padding: 4px 8px; margin-top: 4px;
}

/* 家长发来的照片缩略图 */
.pho-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.pho { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; position: relative; }
.pho img { width: 100%; height: 92px; object-fit: cover; display: block; background: var(--gray-soft); }
.pho .cap { font-size: 11px; color: var(--muted); padding: 4px 6px; }
.pho .x {
  position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border: 0;
  border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer;
  font-size: 15px; line-height: 1;
}
/* 交检查之后才补传的照片：必须一眼看出，否则等于默许"看到批注再补答案" */
.pho.late { border-color: var(--warn); }
.pho.late .cap { background: var(--warn-soft); color: #8a5a00; font-weight: 700; }
.pho img { cursor: zoom-in; }

/* 照片放大（批改工作台） */
.pho-view {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 600; background: rgba(12, 16, 24, .93);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  padding: 14px; cursor: zoom-out;
}
.pho-view img { max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 8px; }
.pho-view .tip { color: #cbd5e1; font-size: 12px; margin-top: 10px; }

/* ------------------------------------------ ★ 批改编辑器（v0.11.0 画笔/文字） */
.ann-fs { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 700; background: #10151c; display: flex; flex-direction: column; }
/* ★ v0.21.0 打回弹窗要浮在编辑器（z-index 700）**上面**：打回流程改成了"确认后才上传"，
   弹窗是叠在编辑器上的，层级不够就会被编辑器整个盖住、老师以为点了没反应。 */
.fs-fake.over-ann { z-index: 800; }
/* ★ v0.21.0 考点条（编辑器底部，默认收起） */
/* ★ v0.22.0 批改不打断：编辑器里就地处理申请，不用退出、不会丢批到一半的图 */
.ann-todo { background: #161c26; border-top: 1px solid #2a3342; padding: 8px 12px; max-height: 38vh; overflow: auto; color: #e6edf3; }
.ann-todo.hide { display: none; }
.ann-todo-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.ann-todo-hd b { color: #ffd08a; font-size: 14px; }
.ann-todo-sp { flex: 1 1 auto; min-width: 8px; }
.ann-todo-grp { font-size: 12px; font-weight: 700; color: #8b98a9; margin: 8px 0 6px; }
.ann-todo-empty { padding: 6px 0 10px; color: #8b98a9; font-size: 13px; }
.ann-todo-else { margin-top: 8px; }
.ann-todo .tiny.muted, .ann-todo .askrow .sub { color: #8b98a9; }
.ann-todo .askrow { background: #111823; border-color: #2a3342; border-left-color: #58a6ff; color: #e6edf3; }
.ann-todo .askrow.long { border-left-color: #e03e2e; }
.ann-todo .askrow .who { color: #e6edf3; }
.ann-todo .tag { background: #23303f; color: #dbe6f3; border-color: #2f3d4f; }
.ann-todo .tag.pri { background: #173a5c; color: #c8e2ff; border-color: #24507a; }
.ann-todo .tag.dgr { background: #4a1f1f; color: #ffb3b3; border-color: #6b2c2c; }
.ann-todo .penin { background: #0e131a; color: #e6edf3; border-color: #2a3342; }
.ann-todo .wait { color: #ffd08a; font-weight: 700; }
.ann-todo-btn.has { background: #4a2f14; border-color: #6b441c; color: #ffd08a; font-weight: 800; }
.ann-todo-btn.on { outline: 2px solid #58a6ff; outline-offset: 1px; }
.ann-todo-btn.flash { animation: annTodoFlash 1s ease-in-out 2; }
@keyframes annTodoFlash { 0%,100% { background:#4a2f14; color:#ffd08a; } 50% { background:#8a5a20; color:#fff; } }

/* 考点 chip（v0.40.0）：整个标签是复选框（勾=这次错的进错题本 / 通过弹窗里勾=记下考察点），可拖出虚线框删除 */
.kp-chip { display: inline-flex; align-items: center; gap: 4px; cursor: grab; }
.kp-chip a { text-decoration: none; }
.kp-lb { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; margin: 0; }
.kp-chip input[type=checkbox] { margin: 0; flex: none; }
/* 知识点圈住的虚线框：拖动时变红提示「拖出去=删」 */
.kpp-box { border: 1px dashed var(--line-2); border-radius: 10px; padding: 8px 8px 6px; margin-top: 6px; min-height: 40px; }
.kpp-box.drag { border-color: var(--danger); background: var(--danger-soft); }
.kpp-box .kpp-drop { display: none; color: var(--danger); margin: 0 0 6px; }
.kpp-box.drag .kpp-drop { display: block; }
.ann-bar {
  display: flex; align-items: center; flex-wrap: wrap; padding: 8px 12px;
  background: #161c26; border-bottom: 1px solid #2a3342;
}
.ann-bar .ann-title { color: #e6edf3; font-weight: 700; margin-right: 12px; max-width: 40%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-bar .ann-sp { flex: 1 1 auto; min-width: 8px; }
.ann-bar button { margin-left: 6px; }
.ann-bar button.ann-on { outline: 2px solid #58a6ff; outline-offset: 1px; }
.ann-foot { display: flex; align-items: center; justify-content: center; padding: 10px 12px;
  background: #161c26; border-top: 1px solid #2a3342; }
/* ★ v0.38.0 页码快捷条：每个数字一张照片。当前页高亮蓝底；
   没翻过的右上角红点（进来就看见还剩几张没看）；数字后小蓝点 = 这页已有批改痕迹。 */
.ann-pgs { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0 10px; }
.ann-pg { position: relative; min-width: 34px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid #2a3342; background: #1b2331; color: #9fb0c3;
  font-size: 14px; line-height: 1.4; cursor: pointer; }
.ann-pg:hover { border-color: #58a6ff; }
.ann-pg.on { background: #58a6ff; border-color: #58a6ff; color: #0b1220; font-weight: 700; }
.ann-pg.un::after { content: ''; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px;
  border-radius: 50%; background: #e03e2e; border: 2px solid #161c26; }
.ann-pg i { display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: #58a6ff; margin-left: 5px; vertical-align: 2px; }
.ann-pg.on i { background: #0b1220; }
.ann-pgs.lock .ann-pg { opacity: .45; pointer-events: none; }
.ann-stage { flex: 1 1 auto; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 6px; }
.ann-stage canvas { box-shadow: 0 0 26px rgba(0,0,0,.65); background: #000; cursor: crosshair;
  touch-action: none; }
.ann-input { position: absolute; z-index: 2; min-width: 130px; padding: 6px 9px;
  font-size: 16px; background: rgba(255,255,255,.96); border: 1px solid #777;
  border-radius: 6px; }
/* ★ v0.17.2 缩放/移动控件：右下角常驻，小地图只在放大后出现 */
.ann-zoom { position: absolute; right: 10px; bottom: 10px; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ann-mapwrap { padding: 3px; background: rgba(10,15,22,.88); border: 1px solid #2a3342;
  border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.55); }
.ann-mapwrap.hide { display: none; }
#aMap { display: block; border-radius: 3px; cursor: pointer; opacity: .93; }
.ann-zbtns { display: flex; align-items: center; gap: 3px; padding: 3px 6px;
  background: rgba(10,15,22,.88); border: 1px solid #2a3342; border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.55); }
.ann-zbtns button { margin: 0; padding: 2px 9px; min-width: 32px; line-height: 1.5; }
.ann-zx { color: #cbd5e1; font-size: 12px; min-width: 42px; text-align: center;
  font-variant-numeric: tabular-nums; }
/* ★ v0.17.3 长按旋转提示：按住图片外黑底 2 秒 → 先走蓄力条，到点变成 ↻ 旋转符号 */
.ann-rotip { position: absolute; z-index: 4; pointer-events: none;
  display: flex; align-items: center; gap: 6px; padding: 5px 12px 8px;
  background: rgba(10,15,22,.9); border: 1px solid #58a6ff; border-radius: 999px;
  color: #dbeafe; font-size: 12px; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.6);
  opacity: 0; transform: translate(-50%,-100%) scale(.92);
  transition: opacity .12s ease, transform .12s ease; }
.ann-rotip.on { opacity: 1; transform: translate(-50%,-100%) scale(1); }
.ann-rotip.hide { display: none; }
.ann-rotip-i { font-size: 17px; line-height: 1; color: #58a6ff; display: inline-block;
  transform-origin: 50% 50%; }
.ann-rotip.arming .ann-rotip-i { animation: annRotPulse 1s ease-in-out infinite; }
.ann-rotip.on .ann-rotip-i { color: #7dd3fc; }
.ann-rotip-t { font-variant-numeric: tabular-nums; }
.ann-rotip-p { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
  border-radius: 2px; background: rgba(88,166,255,.22); overflow: hidden; }
.ann-rotip-p i { display: block; height: 100%; width: 0; background: #58a6ff; border-radius: 2px; }
/* 气泡晚 0.32s 才冒出来，所以蓄力条只跑 1.68s，跟 2 秒长按对齐 */
.ann-rotip.arming .ann-rotip-p i { animation: annRotFill 1.68s linear forwards; }
.ann-rotip.on .ann-rotip-p { display: none; }
@keyframes annRotFill { from { width: 0; } to { width: 100%; } }
@keyframes annRotPulse { 0%,100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.12); } }
/* 手机上顶栏按钮多，标题独占一行、按钮排得更紧，别把缩放键挤没了 */
@media (max-width: 560px) {
  .ann-bar { padding: 6px 8px; }
  .ann-bar .ann-title { max-width: 100%; width: 100%; margin: 0 0 5px; font-size: 13px; }
  .ann-bar button { margin-left: 4px; padding: 4px 7px; font-size: 12px; }
}

/* ------------------------------------------ 昨天作业星级（v0.11.0） */
.stars { display: flex; align-items: center; margin: 6px 0 12px; }
.stars button { font-size: 34px; line-height: 1; background: none; border: none;
  cursor: pointer; padding: 2px 8px; opacity: .32; color: #f5b301; }
.stars button.on { opacity: 1; }

/* ------------------------------------------ 拓展题题图按钮（v0.11.0） */
.prow-cam {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; width: 30px; height: 30px; border-radius: 7px; cursor: pointer;
  border: 1px dashed var(--line); color: var(--muted); background: var(--card);
  vertical-align: middle; margin: 0 4px;
}
.prow-cam.has { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }


/* ------------------------------------------------- 批改工作台 */
.chk {
  border: 1px solid var(--line); border-left: 4px solid var(--pri); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 10px; background: var(--card);
}

/* ★ 「等开工」的一行：左边是谁+哪一科+等了多久，右边两个按钮。
   和 .chk 同一套视觉，老师不用重新认。 */
.askrow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border: 1px solid var(--line); border-left: 4px solid var(--pri); border-radius: 12px;
  padding: 8px 10px; margin-bottom: 8px; background: var(--card);
}
.askrow.long { border-left-color: var(--danger); }
.askrow .who { font-weight: 800; font-size: 15px; }
.askrow .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* ★ 「想歇一下」审批行里的扣分框：窄一点，一眼看出"这里填个数字" */
.penin {
  width: 58px; min-height: 34px; padding: 4px 4px; text-align: center;
  font-size: 15px; font-weight: 800; color: var(--text);
  border: 1px solid var(--line-2); border-radius: 8px; background: #fff; outline: none;
}
.penin:focus { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }

/* ★ 老师端「设备」页：一行一台平板。
   左边是"这是什么、还热不热"，右边是"把它登记给谁"。
   离线整行压暗 —— 老师扫一眼就知道哪些还在教室里。 */
.devrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px; background: var(--card);
}
.devrow.off { border-left-color: var(--line-2); opacity: .7; }
.devrow .dvmain { flex: 1 1 250px; min-width: 0; }
.devrow .dvname { font-weight: 800; font-size: 15px; }
.devrow .dvsub { font-size: 12px; color: var(--muted); margin-top: 3px; word-break: break-all; }
.devrow .dvact { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.devrow .dvsel { min-height: 38px; max-width: 215px; font-size: 14px; }
.dvtag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 700; vertical-align: 1px;
  background: var(--gray-soft); color: var(--muted);
}
.dvtag.on { background: var(--ok-soft); color: var(--ok); }
.dvtag.warn { background: var(--warn-soft); color: var(--warn); }

/* ★ 「昨天的作业全对」一条：照片要看得清（老师就是靠它判全对不全对），所以整张卡宽一点 */
.prevrow {
  border: 1px solid var(--line); border-left: 4px solid var(--pri); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 10px; background: var(--card);
}
.prevrow .who { font-weight: 800; font-size: 15px; }
.prevrow .pho-grid { margin-top: 8px; }
/* ★ v0.14.0 礼品商城（老师端）：礼品行 / 缩略图 / 兑换记录 */
.gift-row {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px; background: var(--card);
}
.gift-row.off { opacity: .55; }
.gift-row.small { padding: 6px 10px; }
.gift-row .btn { flex: none; }
.gift-thumb {
  width: 52px; height: 52px; border-radius: 10px; flex: none;
  background: var(--muted-2) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  border: 1px solid var(--line); overflow: hidden;
}
.gift-thumb[data-gift-img] { cursor: pointer; }
.ex-stu { margin-bottom: 12px; }
.ex-stu .tt { font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.chk.mine { border-left-color: var(--ok); background: var(--ok-soft); }
.chk.taken { border-left-color: var(--warn); background: var(--warn-soft); }
.chk.long { border-left-color: var(--danger); }
.chk .who { font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chk .sub { font-size: 12px; color: var(--muted); margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; }
.chk .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.chk .no-photo {
  font-size: 13px; background: var(--warn-soft); color: #8a5a00;
  border-radius: 8px; padding: 6px 9px; margin-top: 8px;
}
.chk .late-warn { font-size: 12px; color: var(--danger); font-weight: 700; margin-top: 6px; }
/* ★ AI 初判建议框：低调浅底 + 虚线边，一眼和"真实通过/打回"的结果区分开 */
.chk .ai-judge {
  margin-top: 8px; padding: 8px 10px; border-radius: 8px;
  background: var(--pri-soft); border: 1px dashed var(--pri);
  font-size: 13px; line-height: 1.6;
}
.chk .ai-judge .tag { margin: 0 4px 2px 0; }
.chk .graded-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line);
}
.chk .graded-row:last-child { border-bottom: 0; }

/* 协作老师名单 */
.tm { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tm:last-child { border-bottom: 0; }
.tm .nm { font-weight: 700; }
.tm .grow { flex: 1; min-width: 90px; }

/* ==================== 平板入口：头像墙（共用平板，点自己的头像进） ====================
   一年级到九年级混在一起，所以头像要大到一眼认得出、字要大到最后排也看得见。
   刻意**不用 CSS Grid / aspect-ratio / gap** —— 教室那批老安卓 WebView 不认，
   认不出的结果不是"排得难看"，是"整个头像墙塌成一坨"，孩子根本进不去。 */
.wall-group { margin-bottom: 16px; }
.wall-group:last-child { margin-bottom: 0; }
.wall-grade { font-size: 13px; font-weight: 700; color: var(--muted); margin: 0 0 8px 2px; }
.wall-row { display: flex; flex-wrap: wrap; margin: -4px; }
.stu-face {
  position: relative;
  width: calc(33.333% - 8px); min-width: 88px; margin: 4px;
  padding: 12px 4px 10px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center;
}
.stu-face:active { transform: scale(.96); }
.stu-face .face { font-size: 40px; line-height: 1.15; }
.stu-face .fname {
  font-size: 16px; font-weight: 700; margin-top: 6px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ★ v0.10.0「在用」徽标：他正在做作业时别人进不去（互斥），
   墙上直接标出来，孩子一眼就懂为什么点不动他 */
.stu-face .fbusy {
  position: absolute; top: 5px; right: 5px;
  font-size: 11px; line-height: 1.7; color: #fff; background: var(--danger);
  border-radius: 8px; padding: 0 6px;
}

/* 学生端顶栏里的小头像 */
.face.sm { font-size: 20px; line-height: 1; }

/* 提示用橙条（"还有 3 个学生没填年级"这类必须让人看见但不算出错的事） */
.banner.warn { background: var(--warn-soft); border-color: var(--warn); color: #8a5a00; }
.banner.warn a { color: #8a5a00; font-weight: 700; }

/* ==================== 老师端名册（录姓名 / 年级 / 头像） ====================
   老师是在教室里、一屋子人等着的时候操作这个的，所以每一项都要"点一下就完事"：
   年级用下拉（不用打字）、头像点开就换（不用记编号）。 */
.rlist { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.rrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px; border-bottom: 1px solid var(--line); }
.rrow:last-child { border-bottom: 0; }
.face-pick {
  width: 52px; height: 52px; flex: 0 0 52px;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--card); font-size: 26px; line-height: 1;
  cursor: pointer; font-family: inherit;
}
.face-pick:active { transform: scale(.94); }
.rmain { flex: 1; min-width: 180px; }
.rline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rname { flex: 1; min-width: 96px; max-width: 168px; min-height: 38px; padding: 6px 8px; }
.rsel { width: 104px; min-height: 38px; padding: 6px 8px; flex: 0 0 auto; }
.rmeta { font-size: 12px; color: var(--muted); margin-top: 6px; }
.racts { display: flex; gap: 6px; flex-wrap: wrap; }

/* 头像选择弹层 */
.face-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(15,23,42,.35); z-index: 60; }
.face-pop {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 300px; max-width: 92vw; z-index: 61;
  background: var(--card); border-radius: 16px; padding: 16px;
  box-shadow: 0 10px 40px rgba(16,24,40,.25);
}
.fp-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.fp-grid { display: flex; flex-wrap: wrap; margin: -4px; }
.face-opt {
  width: 25%; flex: 0 0 25%; padding: 6px 0;
  border: 0; background: transparent; border-radius: 10px;
  font-size: 26px; line-height: 1.25; cursor: pointer; font-family: inherit;
}
.face-opt:active { background: var(--pri-soft); }

/* ==================== 学生端 · 横屏三栏 ====================
   ★ v0.9.0 改版：**功能键全部收进顶部工具栏，中间区只留照片（铺满）**。
     为什么：老师写在作业本上的批注字就那么大，中间每多一个按钮、多一行说明，
     照片就小一圈。上栏本来就空着大半，正好拿来放键。
   比例：上 = 工具条（放所有键，**比原来的 1/20 高一档**，因为要塞动作键）·
        左 1/15（没做完）· 右 1/15（做完的+完成情况+错误率+奖励）·
        中间剩下的全给照片。
   全部 flex + 百分比，刻意**不用 Grid / flex gap** —— 教室那批老安卓 WebView 不认，
   认不出的后果是整块外壳塌掉，孩子连按钮都点不到。
   ★ 两侧栏各给了 min-width 兜底：1/15 在 1024 宽上只有 68px，再窄就点不着了。
     `--s-rail` / `--s-top` 改一个数就能整体调宽（老师要改比例只动这里）。 */
:root {
  --s-rail: 6.6667%;
  /* ★ v0.9.0：工具条从 5%（1/20）抬到 8.5% —— 现在它要装下当前这一项的动作键，
     一排小键放不下就得换行，5% 根本不够。8.5% 在 1280×800 上是 68px，
     一行小键（30px 高）+ 上下留白正好；窄屏另有 min-height 兜底。 */
  --s-top: 8.5%;
}

html { height: 100%; }
body.student { height: 100%; background: #eef2f9; overflow: hidden; }
.sapp { display: flex; flex-direction: column; height: 100%; }

/* ---------- 上：工具条（所有功能键都在这儿） ---------- */
.stop {
  flex: 0 0 var(--s-top); height: var(--s-top);
  min-height: 46px; max-height: 76px;
  display: flex; align-items: center; padding: 0 8px;
  background: var(--card); border-bottom: 1px solid var(--line); overflow: hidden;
  box-shadow: 0 2px 8px rgba(16, 24, 40, .05);
}
.spts { display: flex; flex: none; }
.spt {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 64px; padding: 5px 12px; margin-right: 8px; border-radius: 12px;
  background: var(--gray-soft); line-height: 1.2;
}
.spt b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.spt i { font-size: 10px; font-style: normal; color: var(--muted); white-space: nowrap; }
.spt.now { background: var(--pri-soft); }
.spt.now b { color: var(--pri); }
.spt.all { background: var(--ok-soft); }
.spt.all b { color: var(--ok); }
.spt.time { background: var(--warn-soft); }
.spt.time b { color: var(--warn); }
.stop .dot { flex: none; margin-right: 6px; }
.stop .face.sm { font-size: 20px; line-height: 1; flex: none; margin-right: 4px; }
.stop .stu-name { font-size: 15px; font-weight: 800; white-space: nowrap; margin-right: 6px; }
.stop .tag { flex: none; margin-right: 6px; }
.stop-sp { flex: 0 1 auto; min-width: 4px; }

/* ★ v0.9.0：当前这一项的动作键（随选中项状态换字）。
   它必须能被压缩、超过一行就横向滚 —— 键多了不能把「换人」挤出屏幕，
   那样孩子会被困在自己的页面里（换不了人 = 下一个孩子进不来）。 */
.sacts {
  flex: 0 1 auto; min-width: 0; display: flex; align-items: center;
  overflow-x: auto; overflow-y: hidden; white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.sacts:empty { display: none; }
.sacts .tbtn { flex: none; }

.stools { display: flex; flex: none; align-items: center; }
.tbtn {
  border: 1px solid var(--line-2); background: var(--gray-soft); color: var(--text);
  border-radius: 8px; padding: 3px 10px; margin-left: 5px; min-height: 30px;
  font-size: 13px; font-weight: 700; line-height: 1.25; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.tbtn:active { transform: scale(.97); }
/* ★ 顶栏按钮在白底上要够显眼：用更亮更饱和的颜色（灰底基础键 + 高饱和色键） */
.tbtn.dgr { background: #ef4444; border-color: #ef4444; color: #fff; }
.tbtn.pri { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.tbtn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.tbtn.warn { background: var(--warn); border-color: var(--warn); color: #fff; }
.tbtn.on { background: #3b82f6; border-color: #3b82f6; color: #fff; }

/* ---------- 主体三栏 ---------- */
.smain { flex: 1 1 auto; display: flex; min-height: 0; }

/* ---------- 下：今晚得分 + 总积分（v0.16.1 从顶部移下来） ---------- */
.sbot {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 10px;
  background: var(--card); border-top: 1px solid var(--line);
  box-shadow: 0 -2px 8px rgba(16, 24, 40, .05);
}
.sbot .spt:last-child { margin-right: 0; }

.srail {
  flex: 0 0 var(--s-rail); width: var(--s-rail); min-width: 62px;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--card); overflow: hidden;
}
.rail-l { border-right: 1px solid var(--line); }
.rail-r { border-left: 1px solid var(--line); }
.rail-h {
  flex: none; padding: 5px 3px 3px; text-align: center;
  font-size: 10px; font-weight: 800; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.rail-h b { display: block; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.rail-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 3px; }

/* 侧栏里的一项作业（窄栏，所以只放：科目 + 内容 + 一行状态） */
.ritem {
  display: block; width: 100%; text-align: center; overflow: hidden;
  border: 1px solid var(--line); border-left: 4px solid var(--line-2);
  border-radius: 8px; padding: 5px 2px; margin-bottom: 5px;
  background: var(--card); color: var(--text); cursor: pointer; font-family: inherit;
}
.ritem:active { transform: scale(.97); }
.ritem .rsj { display: block; font-size: 12px; font-weight: 800; color: var(--pri); }
.ritem .rtt {
  display: block; font-size: 10px; color: var(--muted); line-height: 1.25;
  max-height: 26px; overflow: hidden; word-break: break-all; margin-top: 1px;
}
.ritem .rbd { display: block; font-size: 10px; font-weight: 700; margin-top: 2px; }
.ritem.sel { background: var(--pri-soft); border-color: var(--pri); }
.ritem.s-doing { border-left-color: var(--pri); background: var(--pri-soft); }
.ritem.s-asked { border-left-color: var(--pri); background: var(--pri-soft); }
.ritem.s-rejected { border-left-color: var(--danger); background: var(--danger-soft); }
.ritem.s-submitted { border-left-color: var(--warn); background: var(--warn-soft); }
.ritem.s-paused { border-left-color: var(--warn); }

/* ★ v0.25.0 左栏按科目归组：组头是科目名 + 「已过/总数」。
   窄栏（约 70px）里字号要压到 11px，否则「数学 1/3」会折成两行。 */
.rgrp {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin: 7px 0 4px; padding: 11px 2px 10px; min-height: 38px;
  border-bottom: 1px dashed var(--line-2);
  font-size: 12px; font-weight: 900; color: var(--text); letter-spacing: .02em;
  white-space: nowrap;   /* ★ v0.47.2 「查漏通关」四个字不许换行 */
  /* ★ v0.47.0 组头可点（收起/展开这一组）：像按钮一样好点、不让点歪选中文字 */
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.rgrp:first-child { margin-top: 0; }
/* 折叠/展开箭头 */
.rgrp .rarr { opacity: .55; font-size: 11px; line-height: 1; }
/* 收起的组：实线一眼看出是合着的 */
.rgrp.col { border-bottom-style: solid; opacity: .8; }
/* ★ v0.49.0 右栏「完成作业」组头：同款格式但不折叠（只展示），计数绿色 */
.rgrp-nc { cursor: default; }
.rgrp-nc .rgrpn.ok { color: #0f7a37; }
/* ★ v0.46.0 左栏「查漏通关」首目录：AI 推的题统一收在这里，颜色和科目组区分开 */
.rgrp-ex { color: var(--warn); border-bottom-style: solid; }
.rgrp .rgrpn {
  order: 2; font-size: 10px; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ★ v0.25.0 记作业：多行文本 + 识别结果逐条核对
   一行 = 科目下拉 + 内容 + 分钟 + 删除；平板上要能用手指点到，所以每项最少 40px 高。 */
.addlines {
  min-height: 96px; line-height: 1.55; resize: vertical;
  font-size: 15px; font-family: inherit;
}
.pbox { margin: 6px 0 8px; }
.pbox.hide { display: none; }
.pb-hd { font-size: 12px; font-weight: 800; color: var(--muted); margin: 0 0 6px; }
.pbrow { display: flex; gap: 5px; align-items: center; margin-bottom: 6px; }
.pbrow .pbsub {
  width: 76px; flex: 0 0 auto; padding: 6px 2px; font-size: 14px;
  min-height: 38px;
}
.pbrow .pbtitle { flex: 1 1 auto; min-width: 0; padding: 6px; font-size: 15px; min-height: 38px; }
.pbrow .pbest {
  width: 58px; flex: 0 0 auto; padding: 6px 2px; font-size: 14px;
  text-align: center; min-height: 38px;
}
.pbrow .pbdel { flex: 0 0 auto; padding: 4px 8px; font-size: 15px; min-height: 38px; }
.ritem.s-passed { border-left-color: var(--ok); }
.ritem.s-passed .rtt { color: var(--muted-2); }
.ritem.s-passed .rbd { color: var(--ok); }

/* 右栏顶部：完成情况 + 错误率 */
.rsum { flex: none; padding: 5px 4px; border-bottom: 1px solid var(--line); }
.rsum-h { font-size: 10px; font-weight: 800; color: var(--muted); text-align: center; }
.rprog { font-size: 11px; font-weight: 700; text-align: center; margin-top: 2px; }
.rbar { height: 5px; border-radius: 999px; background: var(--gray-soft); margin: 4px 1px; overflow: hidden; }
.rbar > i { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.rkv { display: flex; justify-content: space-between; align-items: baseline; padding: 0 1px; }
.rkv span { font-size: 10px; color: var(--muted); }
.rkv b { font-size: 13px; font-variant-numeric: tabular-nums; }
.rkv b.good { color: var(--ok); }
.rkv b.bad { color: var(--danger); }

/* 右栏：复活（今天丢了分没丢分、还能不能补回来）—— 字号跟着右栏一起小，两行就够 */
.rvtxt { font-size: 10px; line-height: 1.35; text-align: center; margin-top: 2px; }
.rvtxt-ok { display: block; font-weight: 800; color: var(--ok); }
.rvtxt-hi { display: block; font-weight: 800; color: var(--danger); }
.rvtxt .muted { display: block; font-size: 9px; color: var(--muted); margin-top: 1px; }
/* 右栏：奖励流水（只放最近几笔，孩子一眼看到自己刚拿到什么） */
.awd {
  display: block; text-align: center; border-radius: 8px; padding: 3px 2px;
  margin-bottom: 4px; background: var(--ok-soft); color: #0f7a37;
  font-size: 10px; line-height: 1.3; word-break: break-all;
}
.awd b { display: block; font-size: 13px; font-variant-numeric: tabular-nums; }
.awd.neg { background: var(--danger-soft); color: #8c1c17; }
.awd.neg b { color: var(--danger); }

/* ---------- 中：**纯照片展示（铺满）** ----------
   ★ v0.9.0：中间区不再有按钮。这里的每一寸都该留给照片 ——
     孩子要看清老师写在作业本边上的批注，照片越大越好。
   照片网格用 auto-fill + minmax：宽度有多少就铺多少列，**自动铺满、不空着**。
   （`gap` 在老安卓 WebView 上不可靠，所以网格间距走 margin 自己撑。） */
.scenter {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  overflow: hidden; position: relative;
  /* ★ v0.12.0：中间区**全部**是 3-3 黑底画廊 —— 竖排外壳，画廊 flex 撑满 */
  display: flex; flex-direction: column;
}
/* 横幅（网络断 / 横屏提示）浮在画廊顶上，不挤画廊 */
.scenter > .banner { position: absolute; left: 8px; right: 8px; top: 52px; z-index: 31; } /* top 让开顶部标签栏（v0.16.1） */
/* ★ v0.12.0 中间区四宫格改弹窗 + 黑底画廊。黑底是刻意的：
   老师批改的红笔在黑底上对比最强，孩子看老师圈出来的地方一眼到位。 */
.ggal {
  flex: 1 1 auto; min-height: 0; background: #000;
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 10px 14px;
}
/* ★ 画廊标签（v0.16.1 从左栏移到画廊顶部横排）：深色横条 + 白底黑字的选中胶囊，
   跟下方黑底画廊连成一体。老安卓不认 gap，间距用 margin 撑。 */
.gtabs {
  flex: none;
  display: flex; align-items: center;
  background: #0d141d;
  border-bottom: 1px solid #223042;
  padding: 6px 8px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.gtab {
  position: relative; flex: none; border: none; cursor: pointer;
  background: transparent; color: #93a4ba; font-family: inherit;
  font-size: 13px; font-weight: 700; letter-spacing: .2px;
  padding: 8px 14px; margin-right: 4px;
  border-radius: 999px; white-space: nowrap;
}
.gtab:active { transform: scale(.96); }
.gtab.on {
  background: #ffffff; color: #0d141d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.gtab .gbadge { vertical-align: -1px; }
.gbadge {
  display: inline-block; min-width: 17px; line-height: 17px; text-align: center;
  border-radius: 9px; background: var(--danger); color: #fff;
  font-size: 11px; margin-left: 4px; padding: 0 4px;
}
/* ★ 3-1 状态弹窗：点左栏某项弹出（状态＋老师的话＋大计时） */
.stpop {
  position: absolute; left: 50%; top: 46%; z-index: 35;
  transform: translate(-50%, -50%);
  background: #161c26; color: #e6edf3; border: 1px solid #2a3342;
  border-radius: 16px; padding: 20px 26px; min-width: 300px; max-width: 440px;
  text-align: center;
}
.stpop.hide { display: none; }
.sp-x {
  position: absolute; top: 6px; right: 14px; border: none; background: none;
  color: #93a4b8; font-size: 24px; cursor: pointer; font-family: inherit;
}
.sp-label { font-size: 13px; font-weight: 700; color: #9fb0c3; }
.sp-label.dgr { color: #ffb3a7; }
.sp-label.ok { color: #7ee2a8; }
.sp-title { font-size: 20px; font-weight: 700; margin: 6px 0 4px; }
.sp-note { font-size: 14px; line-height: 1.6; margin: 4px 0; }
.sp-timer { font-size: 46px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 8px 0 2px; }
.sp-timer.muted { color: #9fb0c3; }
.sp-act { font-size: 13px; color: #9fb0c3; margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: center; }
.sp-act .tbtn { margin: 4px; min-height: 42px; padding: 8px 16px; font-size: 15px; border-radius: 10px; }
/* ★ v0.19.0 在线作答区：孩子在平板上直接做题（选择/填空），或拍一张（计算/应用）。
   字号按"一年级在 10 寸平板上看得清"来定 —— 选项 18px、输入框 24px。 */
.sp-quiz { margin: 12px 0 2px; }
.sp-quiz.hide { display: none; }
.sp-opts { display: flex; flex-direction: column; gap: 8px; }
.sp-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 11px 14px; border-radius: 12px; cursor: pointer; font-family: inherit;
  border: 2px solid #2f3a4b; background: #1d2531; color: #e6edf3;
  font-size: 18px; text-align: left; line-height: 1.35;
}
.sp-opt .lb {
  flex: 0 0 26px; height: 26px; line-height: 26px; text-align: center;
  border-radius: 8px; background: #2f3a4b; font-weight: 800; font-size: 15px;
}
.sp-opt.on { border-color: #4c8dff; background: #1b2c47; }
.sp-opt.on .lb { background: #4c8dff; color: #fff; }
.sp-quiz .sp-inp {
  width: 100%; box-sizing: border-box; padding: 13px 16px; font-size: 24px;
  font-family: inherit; text-align: center; border-radius: 12px;
  border: 2px solid #2f3a4b; background: #0f141c; color: #e6edf3;
}
.sp-quiz .sp-inp:focus { outline: none; border-color: #4c8dff; }
.sp-hint { font-size: 12px; color: #8b9bb0; margin-top: 8px; }
.sp-verdict { font-size: 17px; font-weight: 800; margin-top: 10px; }
.sp-verdict.ok { color: #7ee2a8; }
.sp-verdict.bad { color: #ffb3a7; }
.sp-real { font-size: 15px; color: #cfdaea; margin-top: 6px; line-height: 1.65; }
.sp-real b { color: #ffd97a; font-size: 18px; }
.sp-real .mine-wrong { color: #ffb3a7; text-decoration: line-through; }
/* ★ v0.14.0 礼品商城：礼品格子（画廊里的卡片）+ 兑换确认弹层 */
.gcard {
  background: #161c26; border: 1px solid #2a3342; border-radius: 12px;
  padding: 10px; margin-bottom: 10px;
  display: flex; align-items: center;
}
.gc-imgwrap {
  width: 74px; height: 74px; border-radius: 10px; overflow: hidden;
  background: #000; flex: none; margin-right: 12px;
  display: flex; align-items: center; justify-content: center;
}
.gc-img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.gc-noimg { font-size: 34px; }
.gc-name { flex: 1 1 auto; min-width: 0; font-size: 17px; font-weight: 700; }
.gc-pts { font-size: 14px; color: #ffd27a; font-weight: 700; margin: 3px 0 0; }
.gcard .gtag { flex: none; margin-left: 10px; }
.gcard .gf-btn { flex: none; margin-left: 10px; padding: 10px 18px; font-size: 16px; }
/* 我的兑换行 */
.grow2 { background: #10151c; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; color: #dbe4ee; font-size: 14px; }
/* 兑换确认弹层：扣分前最后一道坎（大按钮，一年级按得准） */
.gfpop {
  position: absolute; left: 50%; top: 46%; z-index: 40;
  transform: translate(-50%, -50%);
  background: #161c26; color: #e6edf3; border: 1px solid #2a3342;
  border-radius: 16px; padding: 22px 26px; width: 300px; max-width: 88%;
  text-align: center;
}
.gfpop.hide { display: none; }
.gf-x {
  position: absolute; top: 6px; right: 14px; border: none; background: none;
  color: #93a4b8; font-size: 24px; cursor: pointer; font-family: inherit;
}
.gf-imgwrap { width: 120px; height: 120px; margin: 4px auto 10px; border-radius: 12px; overflow: hidden; background: #000; }
.gf-img { width: 100%; height: 100%; object-fit: cover; }
.gf-name { font-size: 19px; font-weight: 700; }
.gf-cost { font-size: 15px; color: #ffd27a; font-weight: 700; margin: 6px 0 4px; }
.gf-have { color: #9fb0c3; margin-bottom: 14px; }
.gf-acts { display: flex; gap: 0; }
.gf-acts .btn { flex: 1 1 0; font-size: 17px; padding: 12px 0; }
.gf-acts .btn + .btn { margin-left: 10px; }
/* ★ ⑥ 提示卡 + ⑦ 记作业表单：浮在画廊顶部的半透明白卡（有事才出现） */
.gfloats {
  position: absolute; left: 8px; right: 8px; top: 52px; z-index: 30; /* top 让开顶部标签栏（v0.16.1） */
  display: flex; flex-direction: column; max-height: 72%;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.gfloats .card { background: rgba(255,255,255,.97); margin-bottom: 8px; }
.gfloats .hide { display: none; }
.ghead { color: #dbe4ee; font-size: 15px; font-weight: 700; padding: 2px 2px 10px; }
.ghead.ok { color: #7ee2a8; }
.ghead.warn { color: #ffd27a; }
.gnote { display: inline-block; color: #93a4b8; font-size: 13px; font-weight: 400; margin-left: 8px; }
.gempty { color: #5d6b7d; font-size: 15px; padding: 34px 10px; text-align: center; }
.gempty.sm { padding: 10px; text-align: left; }
.gitem { margin-bottom: 14px; }
.gitem.bad .gcap-h { color: #ffb3a7; }
.gcap-h { color: #e6edf3; font-size: 14.5px; font-weight: 700; padding: 0 2px 8px; }
/* ★ v0.48.0 「今日战报」标签：原右栏的内容（完成情况/复活/做完了/奖励）收进黑底画廊 */
.greport { max-width: 620px; margin: 0 auto; }
.grep-card { background: #141b26; border: 1px solid #26303f; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 14px; }
.grep-card .gcap-h { padding: 0 0 8px; }
.grep-line { color: #e6edf3; font-size: 14px; margin: 4px 0; }
.grep-line b { font-size: 19px; color: #ffd08a; font-variant-numeric: tabular-nums; }
.grep-bar { height: 10px; border-radius: 6px; background: #0e131a; border: 1px solid #2a3342;
  overflow: hidden; margin: 6px 0 8px; }
.grep-bar i { display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #f0b45c, #ffd08a); }
.gr-err { font-weight: 900; font-size: 17px; }
.gr-err.good { color: #7ee2a8; }
.gr-err.bad { color: #ff8a8a; }
/* ★ v0.50.0 战报五卡的正向口径样式 */
.grep-card .g-title { color: #ffd08a; font-size: 13px; font-weight: 800; }
.grep-card .g-ok { color: #7ee2a8; }
.grep-card .g-warn { color: #ffd08a; }
.grep-sub { color: #8b98a9; font-size: 12px; }
.grep-hint { color: #8b98a9; font-size: 12px; margin-top: 6px; line-height: 1.5; }
.grep-card .muted-sm { color: #8b98a9; font-size: 12.5px; }
.grep-card .g-score { font-size: 19px; color: #ffd08a; font-variant-numeric: tabular-nums; }
.grep-awds { display: flex; flex-wrap: wrap; }
/* 奖励徽章在黑底上换成深色底（原 .awd 是浅底给右栏用的） */
.grep-awds .awd { background: #1c3326; color: #7ee2a8; padding: 6px 10px; margin: 0 8px 8px 0; font-size: 11px; }
.grep-awds .awd b { font-size: 14px; }
.grep-awds .awd.neg { background: #3a1414; color: #ffb3a7; }
.grep-awds .awd.neg b { color: #ff8a8a; }

/* ★ v0.51.4 教师端积分明细：详情弹窗得分徽章 + 看板明细表 */
.pt-bd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.pt-bd .awd { margin: 0; padding: 6px 10px; font-size: 11px; }
.pt-bd .awd b { font-size: 14px; }
.pt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pt-table th, .pt-table td { padding: 5px 6px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pt-table th { color: var(--muted); font-weight: 600; }
.pt-table .pt-name { text-align: left; font-weight: 600; }
.pt-table td.zero { color: var(--muted-2); }
.pt-table .pt-total { font-weight: 800; color: var(--ok); }
.pt-table tr.pt-sum td { border-top: 2px solid var(--line); font-weight: 700; }
.ptset-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
/* 得分规则（今日战报底部，参考信息，弱化处理） */
.grep-card.rules { margin-top: 12px; }
.rules-list { display: flex; flex-direction: column; gap: 6px; }
.rules-list .rule { color: #8b98a9; font-size: 12.5px; line-height: 1.5; }
.rules-list .rule b { color: #ffd08a; font-variant-numeric: tabular-nums; font-weight: 700; }
.gtag {
  display: inline-block; font-size: 11px; line-height: 1.6; border-radius: 7px;
  padding: 0 7px; margin-left: 8px; color: #9fb0c3; background: #232a35;
  vertical-align: 1px;
}
.gtag.ok { color: #7ee2a8; background: #123020; }
.gtag.dgr { color: #ffb3a7; background: #3a1414; }
/* 画廊照片：横向自动排，一张一张铺过去（老 WebView 不认 Grid，用 flex-wrap） */
.grow2 { display: flex; flex-wrap: wrap; }
.gtile { position: relative; margin: 0 8px 8px 0; }
.gtile img {
  display: block; height: 150px; max-width: 100%; border-radius: 8px;
  background: #151a21; cursor: zoom-in;
}
/* ★ v0.45.0 打回略图：缩成小图、罩一层「先点继续做」，点它不放大（zoom-lock 拦） */
.gtile.gthumb img { height: 84px; opacity: .82; cursor: default; border: 1px solid #3a4556; }
.gtile.gthumb .glock {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; background: rgba(10, 13, 18, .55); border-radius: 8px;
  color: #ffd9a0; font-size: 13px; line-height: 1.35; padding: 4px;
}
.gtile .gcap {
  position: absolute; left: 6px; top: 6px; background: rgba(0,0,0,.72);
  color: #fff; font-size: 12px; border-radius: 6px; padding: 1px 7px;
}
/* ★ v0.15.0 进步勋章：照片删除角标（老师还没判时每张可删） */
.gtile .gdel {
  position: absolute; right: 4px; top: 4px; width: 30px; height: 30px;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(224, 83, 61, .92); color: #fff;
  font-size: 18px; line-height: 1; font-family: inherit;
}
/* ★ v0.15.0 进步勋章：操作键在黑底画廊底部（顶栏不再放） */
.gprev-acts {
  display: flex; align-items: center; flex-wrap: wrap;
  border-top: 1px solid #232a35; margin: 8px -10px -14px; padding: 10px;
}
.gprev-acts .gact {
  border: 1px solid #2a3342; background: #161c26; color: #e6edf3;
  font-family: inherit; font-size: 15px; font-weight: 700;
  border-radius: 10px; padding: 10px 16px; margin-right: 8px; cursor: pointer;
}
.gprev-acts .gact.pri { background: var(--pri); border-color: var(--pri); color: #fff; }
.gprev-acts .gact.ghost { background: none; }
.gprev-acts .gact-note { color: #9fb0c3; font-size: 12px; margin-left: 2px; }
.gstar { color: #3d4857; font-size: 18px; letter-spacing: 2px; }
.gstar.on { color: #ffd257; }
/* 看大图：点照片后铺满中间展示区（.scenter 内的绝对定位层） */
.gview {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 40;
  background: #000; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.gview.hide { display: none; }
.gview img {
  max-width: 100%; max-height: 100%; transform-origin: 50% 50%;
  transition: transform .08s linear; user-select: none;
}
.gv-x, .gv-r {
  position: absolute; top: 10px; z-index: 2; border: none; cursor: pointer;
  background: rgba(28,34,43,.85); color: #e6edf3; font-family: inherit;
  font-size: 15px; border-radius: 9px; padding: 6px 14px;
}
.gv-x { right: 12px; font-size: 20px; padding: 2px 12px; }
.gv-r { right: 62px; }
/* ★ v0.12.0 左栏 = 今晚作业总列表，三色一眼看出该干什么：
   红 = 还没做完 · 橙 = 要订正作业本 · 绿 = 通过。
   颜色就是状态，字只是补充。 */
.rail-l .litem { border-left-width: 4px; border-left-style: solid; }
.litem.s-red { border-left-color: var(--danger); background: var(--danger-soft); }
.litem.s-red .rbd { color: var(--danger); }
.litem.s-org { border-left-color: var(--warn); background: var(--warn-soft); }
.litem.s-org .rbd { color: var(--warn); }
.litem.s-grn { border-left-color: var(--ok); background: var(--ok-soft); }
.litem.s-grn .rtt { color: var(--muted-2); }
.litem.s-grn .rbd { color: var(--ok); }
/* 选中项上的小计时（v0.12.0：状态行改弹窗后，计时跟在这行上） */
.litem .ritmr {
  display: block; font-size: 13px; font-weight: 800; margin-top: 2px;
  font-variant-numeric: tabular-nums; color: var(--pri);
}
/* 等检查的提示条：压成一行（h2 + 哪一项 + 说明），浮在画廊顶上 */
#checkCard { display: flex; align-items: center; }
#checkCard h2 { margin: 0 10px 0 0; font-size: 15px; white-space: nowrap; }
#checkCard .grow { flex: 1 1 auto; min-width: 0; margin: 0; }
#checkCard .grow .small { margin-top: 1px; }
#checkCard .tiny { margin: 0 0 0 10px; max-width: 42%; text-align: right; }

/* 老师批改后返回的作业（展示区主角）：图片要够大，批注要一眼看见 */
.feed { margin-bottom: 10px; }
.feed-h { font-size: 13px; font-weight: 800; color: var(--muted); margin: 2px 0 6px; }
.rcard {
  background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--ok);
  border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; box-shadow: var(--shadow);
}
.rcard.bad { border-left-color: var(--danger); }
.rcard.sel { border-color: var(--pri); }
.rc-h { display: flex; align-items: center; flex-wrap: wrap; }
.rc-h .rsj {
  font-size: 12px; font-weight: 800; color: var(--pri);
  background: var(--pri-soft); padding: 2px 7px; border-radius: 6px; margin-right: 6px;
}
.rc-h .rc-t { font-weight: 700; font-size: 15px; margin-right: 8px; }
.rc-note { font-size: 13px; font-weight: 700; color: var(--danger); margin-top: 5px; }
.rc-note.ok { color: var(--ok); }
.rc-note .t { font-weight: 800; }
.rc-f { font-size: 11px; color: var(--muted); margin-top: 5px; }

/* ★ v0.9.1 照片"一张一张铺到满"：列数按**张数**定（JS 给容器加 pg1/pg2/pg3）。
   auto-fill 只看容器宽度 —— 1 张照片也只占 1 格，右边空出一大条
   （v0.9.0 截图实测：英语卡 1 张缩在角落，中间区 3/4 是白的）；
   auto-fit 又只折"整列都空"的轨道，最后一行落单照样留空。
   所以少照片直接定死：1 张 = 整行大图（批注字看得清）、2 张 = 对半，
   3 张起按宽度自动铺列。列越少格子越高，摊开就是满的。 */
.scenter .pho-grid {
  display: grid; grid-auto-rows: auto; padding: 0; margin-top: 8px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.scenter .pho-grid > * { margin: 0 8px 8px 0; }
.scenter .pho img { height: 150px; }
.scenter .pg1 { grid-template-columns: 1fr; }
.scenter .pg1 .pho img { height: 300px; }
.scenter .pg2 { grid-template-columns: 1fr 1fr; }
.scenter .pg2 .pho img { height: 225px; }
/* 老师批改后的照片再大一档：这就是孩子最该看清的那几张 */
.feed .pho img { height: 175px; }
.feed .pg1 .pho img { height: 330px; }
.feed .pg2 { grid-template-columns: 1fr 1fr; }
.feed .pg2 .pho img { height: 250px; }

/* 竖屏提示：横过来字更大。只在竖屏出现，横屏自动消失 */
.rotate-tip { display: none; }
@media (orientation: portrait) {
  .rotate-tip { display: block; }
}

/* ★ v0.19.0 在线题：批改页上要同时看到「题 + 他答了什么 + 正确答案 + AI 怎么判的」。
   四样少一样老师就没法改判，那 AI 判完他还得自己从头看一遍。 */
.qcheck {
  background: var(--gray-soft); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; margin: 8px 0;
}
.qc-q { font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--text); }
.qc-opts { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.qc-opt {
  font-size: 13px; color: var(--text); background: var(--card);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px;
}
.qc-row { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.qc-row b { color: var(--text); }
.qc-right { color: var(--ok) !important; }

/* ===== v0.19.1 作业项的行内改 / 删 / 退回（学生详情弹窗 + 收作业页共用） =====
   跟 .task 同一套骨架，但多两个字并排的小按钮，所以允许换行，
   否则手机上一行塞不下「科目 + 内容 + 时长 + 状态 + 三个按钮」。 */
.hwrow {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 12px; margin-bottom: 6px; background: #fff;
}
.hwrow .grow { min-width: 0; }
.hwrow .sj {
  font-size: 12px; font-weight: 700; color: var(--pri); background: var(--pri-soft);
  padding: 3px 8px; border-radius: 8px; flex: none;
}
.hwrow .hwWho {
  font-size: 12px; font-weight: 700; color: var(--text);
  flex: none; min-width: 52px;
}
.hwrow .btn.sm { flex: none; padding: 4px 8px; min-height: 32px; }
/* 编辑态：输入框占满一行，保存/取消跟在后面 */
.hwrow.editing { background: var(--pri-soft); border-color: var(--pri); }
.hwrow.editing .input { min-height: 38px; }

/* ===== v0.19.3 AI 批改中的忙碌提示（顶栏） =====
   锁住按钮必须看得见原因，否则老师只会以为"按钮坏了"。 */
.ann-busy {
  flex: none; font-size: 12px; font-weight: 700; color: #ffd479;
  background: rgba(255, 176, 32, .14); border: 1px solid rgba(255, 176, 32, .35);
  padding: 3px 9px; border-radius: 999px; margin-right: 4px; white-space: nowrap;
}
/* ★ v0.51.1 题目解析结果面板：批改编辑器底部浮出 */
.ann-exp {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(16, 21, 28, .96); color: #e6edf3;
  padding: 12px 14px; font-size: 14px; line-height: 1.7;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.ann-exp-q {
  font-weight: 700; color: #ffd479; padding-right: 56px;
  border-bottom: 1px dashed rgba(255, 255, 255, .15);
  padding-bottom: 6px; margin-bottom: 8px;
}
.ann-exp-v {
  font-weight: 700; padding: 4px 10px; border-radius: 8px; margin-bottom: 8px;
  display: inline-block; font-size: 14px;
}
.ann-exp-v.ok { background: rgba(34, 197, 94, .18); color: #4ade80; }
.ann-exp-v.err { background: rgba(239, 68, 68, .18); color: #f87171; }
.ann-exp-v.warn { background: rgba(245, 158, 11, .18); color: #fbbf24; }
.ann-exp-t { white-space: normal; }
.ann-exp-x { position: absolute; top: 10px; right: 12px; color: #8b98a9; font-size: 13px; }

/* ================= 出题页（v0.26.0 老师主动组卷） ================= */
/* 知识点 / 学生小圆片：点一下选中、再点一下取消；选中的 .on */
.chip {
  display: inline-block;
  padding: 4px 10px;
  margin: 2px 4px 2px 0;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 999px;
  border: 1px solid #d5dce6;
  background: #fff;
  color: #5a6675;
  cursor: pointer;
  min-height: 26px;
}
.chip.on {
  border-color: #4c8dff;
  background: #e8f1ff;
  color: #2f6bdb;
  font-weight: 600;
}

/* 出题结果列表：一道题一块，勾选 + 题型标签 + 题干 + 答案 */
.qm-item {
  display: block;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.qm-q { margin-top: 4px; font-size: 14px; line-height: 1.6; }

/* 阅读理解的短文：保留换行，别让整篇挤成一坨（老师端预览 + 学生端作答共用） */
.qm-read, .sp-read {
  white-space: pre-wrap;
  background: #f6f8fb;
  border-left: 3px solid #c9d4e4;
  border-radius: 4px;
  padding: 8px 10px;
  margin: 6px 0;
  font-size: 14px;
  line-height: 1.8;
}

/* ======================================================= 打印成卷 · 扫码面板（v0.33.0）
   ★ z-index 760：高于批改编辑器（700）、低于 toast（1000）——
     深流程里也要能弹出来，而且提示不能被它盖住（见「全屏遮罩让页面级提醒全失效」那条）。
   ★ 平板是触摸屏：关闭按钮和按钮都要够大，别做成一排 24px 的小字。 */
.pw-mask {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 760;
  background: rgba(12, 16, 24, .62); display: flex; align-items: center; justify-content: center;
  padding: 14px; overflow: auto;
}
.pw-card {
  background: #fff; color: #111; border-radius: 14px; width: 100%; max-width: 380px;
  padding: 14px 16px 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .28); text-align: center;
}
.pw-head { display: flex; align-items: center; gap: 8px; text-align: left; }
.pw-head b { flex: 1; font-size: 15px; }
.pw-x {
  flex: none; width: 34px; height: 34px; border-radius: 9px; border: 1px solid #d7dee8;
  background: #f4f6f9; color: #334155; font-size: 15px; cursor: pointer; line-height: 1;
}
.pw-qr {
  margin: 12px auto 8px; width: 240px; max-width: 100%; min-height: 120px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #e2e8f0; border-radius: 10px; padding: 6px; background: #fff;
}
.pw-qr svg { width: 100%; height: auto; display: block; }
.pw-url { font-size: 12px; color: #475569; word-break: break-all; margin: 2px 0 8px; line-height: 1.5; }
.pw-url code { font-family: Consolas, Menlo, monospace; background: #f6f8fb; padding: 2px 6px; border-radius: 5px; }
.pw-tip { font-size: 12.5px; color: #64748b; line-height: 1.65; text-align: left; margin-bottom: 12px; }
.pw-tip code { word-break: break-all; }
.pw-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pw-btns .btn { flex: 1 1 140px; min-height: 44px; }
.pw-note { font-size: 12px; color: #94a3b8; margin-top: 10px; line-height: 1.6; text-align: left; }

/* ===== v0.34.0 照片转正（AI 自动判向的手动兜底按钮） ===== */
/* 批改卡片照片角下的「⟳ 转正」：桌面好点按，平板上 26px 高度偏小但按钮有 8px 内边距兜着 */
.pho .cap .lnk {
  border: 1px solid #e2e8f0; background: #fff; color: #334155;
  font-size: 11px; line-height: 1.4; padding: 3px 8px; min-height: 26px;
  border-radius: 6px; cursor: pointer; margin-left: 4px;
}
.pho .cap .lnk:active { background: #f1f5f9; }

/* ★ v0.35.0 AI 预圈徽标（卡片照片角）：告诉老师"这张后台已圈好等确认" */
.aiBadge {
  display: inline-block; font-size: 11px; line-height: 1.4;
  color: #fff; background: #7c3aed; border-radius: 8px;
  padding: 1px 7px; margin-left: 4px; vertical-align: middle;
}