/* 学生端样式。
 *
 * 和教师端（style.css）刻意分开：那套是桌面 1360px 多栏布局，这套是手机竖屏
 * 单列为主（宽屏另有一套多栏规则，见文件末尾）。两者共享的只有配色变量 ——
 * 学生看到的东西应该和老师看到的是一家，
 * 但布局没有任何可复用的地方，硬塞进一个文件只会两边都别扭。
 *
 * 两条手机上的硬规则：
 *  1. 输入框字号必须 ≥16px，否则 iOS Safari 一点输入框就把整个页面放大；
 *  2. 主按钮要大（≥48px 高），并且躲开底部安全区，不然会被 iPhone 的小白条压住。
 */

:root {
  --bg: #f4f7f9;
  --card: #ffffff;
  --accent: #e1f4fc;
  --accent-line: #b6e0f2;
  --brand: #2b8cb8;
  --brand-dark: #17607f;
  --ink: #1f2933;
  --muted: #6b7a86;
  --line: #e3e8ec;
  --red: #d02d26;
  --green: #17a06a;
  --amber: #b5721a;
  --radius: 12px;
  --mainw: 560px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  /* 16px 起步：手机上再小就费劲了，而且 15px 的输入框会触发 iOS 缩放 */
  font: 16px/1.65 system-ui, -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
  padding-bottom: calc(28px + var(--safe-b));
}

.hidden { display: none !important; }

/* ---------------- 顶栏 ---------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { font-size: 16px; font-weight: 600; letter-spacing: .3px; }

/* 这里**故意不加 position: relative** —— 下拉菜单要挂到整条顶栏下面，
   而 .topbar 是 position: sticky，本身就算定位元素，正好当它的包含块
   （见 .menu-panel 上面那段）。在这一簇上加 relative，菜单就会把这簇的底边
   当成 100%，结果是往上压住顶栏的边框。 */
.top-right { display: flex; align-items: center; gap: 10px; }

/* 顶栏里的"我是谁"。一台手机常常几个人用（家里两个孩子、同桌借用），
   所以姓名要一直看得见 —— 不然学生交完才发现用的是别人的账号。 */
.who {
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-dark);
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--accent);
  color: var(--brand-dark);
  border: 1px solid var(--accent-line);
  white-space: nowrap;
}
.badge.off { background: #fdeceb; color: var(--red); border-color: #f6cdca; }

/* ---------------- 顶栏菜单（六个操作收在这里） ---------------- */

/* 汉堡按钮。38px 是按拇指点得着定的 —— 再小就会点偏，而这一栏上只剩它一个
   入口，点不中就没别的路可走。 */
.menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.menu-btn:active { background: #f2f8fb; }
.menu-bar {
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-dark);
}

/* 默认 display:none，展开靠 .open 这一个类。
   **刻意不用 hidden 属性**：面板自带 display，和 UA 的 [hidden]{display:none}
   撞上时按来源优先级算作者样式赢，行为是"标了隐藏还显示着"。
   （页面里那些 .hidden 是**类**，而类带着 !important，不受这条影响。） */
.menu-panel { display: none; }
/* 定位基准是**整条顶栏**（.topbar 是 sticky = 定位元素，给绝对定位的后代当包含块），
   不是右边那一小簇 —— 拿那一簇当基准的话，菜单会往上压在顶栏边框上。
   right: 16px 是跟顶栏的左右内边距对齐。 */
.menu-panel.open {
  display: block;
  position: absolute;
  top: calc(100% + 8px);
  right: 16px;
  z-index: 30;              /* 顶栏是 z-index:20，菜单要压在正文上面 */
  min-width: 172px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(16, 52, 72, .16);
}

/* 菜单项做成整行按钮：手机上一行点得准；也不像纯文字那样看着不可点。 */
.menu-item {
  display: block;
  width: 100%;
  padding: 11px 12px;
  background: none;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.menu-item:active { background: #f2f8fb; }
/* 「退出登录」单独给红调：跟上面几个不是一类动作，别让人顺手点错。 */
.menu-item#logout { color: var(--red); }

/* 键盘聚焦时的那圈提示（默认是 2px 纯黑，在这套浅蓝配色里很扎眼）。
   只换颜色不取消 —— 键盘用户要靠它知道焦点在哪。手指点按钮不会看到它。 */
.menu-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.menu-item:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;   /* 往内收：菜单项贴着面板边缘，往外画会溢出面板 */
}

main { max-width: var(--mainw); margin: 0 auto; padding: 16px 16px 8px; }

.step { display: block; }

.big-title { font-size: 21px; line-height: 1.4; margin: 6px 0 8px; }

.lead { color: var(--muted); font-size: 14px; margin: 0 0 18px; }

/* ---------------- 表单 ---------------- */

.field { margin-bottom: 20px; }

.field > label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 7px;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  font: inherit;
  font-size: 16px;          /* 见文件头：低于 16px 会被 iOS 强行放大 */
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  -webkit-appearance: none;
}
input[type="text"]:focus,
input[type="password"]:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(43, 140, 184, .12);
}

/* 作业组是一个下拉（组名是老师定的，没理由让学生去猜写法）。
   自带的下拉箭头会被 appearance:none 去掉，所以得自己画一颗 ——
   不补的话这个框看起来和上面的输入框一模一样，没人会去点它。 */
select {
  width: 100%;
  font: inherit;
  font-size: 16px;          /* 和上面一样：低于 16px 会被 iOS 强行放大 */
  padding: 13px 38px 13px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238a9aa6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  -webkit-appearance: none;
  appearance: none;
}
select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(43, 140, 184, .12);
}

.hint { font-size: 13px; color: var(--muted); margin: 7px 0 0; line-height: 1.5; }
.hint.center { text-align: center; }
.hint.ok { color: var(--green); }
.hint.bad { color: var(--red); }

/* ---------------- 拍照区 ---------------- */

.shot {
  position: relative;
  border: 1.5px dashed var(--accent-line);
  border-radius: var(--radius);
  background: #fbfdfe;
  overflow: hidden;
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.shot-empty { text-align: center; padding: 30px 20px; color: var(--muted); }
.shot-empty .ico { font-size: 30px; line-height: 1; margin-bottom: 10px; }
.shot-empty .t { font-size: 15px; color: var(--brand-dark); font-weight: 500; }
.shot-empty .s { font-size: 13px; margin-top: 6px; }

.shot img { display: block; width: 100%; height: auto; }

/* ---------------- 按钮 ---------------- */

button { font-family: inherit; cursor: pointer; }

button.primary, button.ghost {
  display: block;
  width: 100%;
  border-radius: 11px;
  font-size: 17px;
  font-weight: 500;
}

button.primary {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
}
button.primary:active { background: var(--brand-dark); }
button.primary:disabled { opacity: .5; }

button.ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
button.ghost:active { background: #fafcfd; }

button.big { min-height: 50px; padding: 14px 20px; margin-top: 4px; }

button.link {
  background: none;
  border: 0;
  color: var(--brand);
  font-size: 14px;
  padding: 4px 0;
}

/* ---------------- 等待 ---------------- */

.waiting { text-align: center; padding: 26px 0 10px; }
.waiting h2 { font-size: 19px; margin: 16px 0 8px; }
.waiting .lead { text-align: left; }

.spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border: 3px solid var(--accent);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

dl.meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 20px 0 16px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
  font-size: 14px;
}
dl.meta dt { color: var(--muted); }
dl.meta dd { margin: 0; word-break: break-all; }

/* ---------------- 结果 ---------------- */

.score-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  margin-bottom: 14px;
}

.score-main { font-size: 42px; font-weight: 600; line-height: 1.1; color: var(--brand-dark); }
.score-main .of { font-size: 20px; color: var(--muted); font-weight: 400; margin-left: 2px; }

.score-sub { margin-top: 12px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.tag {
  font-size: 14px;
  padding: 5px 12px;
  border-radius: 20px;
}
.tag b { font-size: 16px; }
.tag.ok { background: #e8f6f0; color: var(--green); }
.tag.bad { background: #fdeceb; color: var(--red); }

.meta-line { font-size: 13px; color: var(--muted); margin: 14px 0 0; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}

.card-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.card-title .count {
  display: inline-block;
  min-width: 22px;
  padding: 1px 7px;
  margin-left: 6px;
  border-radius: 12px;
  background: #fdeceb;
  color: var(--red);
  font-size: 13px;
  text-align: center;
}

img.paper { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }

/* 错题条目 */
.wrong-item { padding: 14px 0; border-top: 1px solid var(--line); }
.wrong-item:first-child { border-top: 0; padding-top: 0; }
.wrong-item:last-child { padding-bottom: 0; }

.wrong-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.wrong-no {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fdeceb;
  color: var(--red);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrong-stem {
  font-size: 14px;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wrong-tag {
  flex: none;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--brand-dark);
}
/* 有讲解页时，知识点标签才是链接（服务端给了 kb 才有）。观感保持标签的样子，
   只在悬停时给一个明确的「能点」反馈 —— 别新造一套视觉。 */
.wrong-tag-link { text-decoration: none; }
.wrong-tag-link:hover { background: var(--brand); color: #fff; }

/* 从讲解页回来时把那道错题亮一下。不亮的话学生不知道「回」到了哪儿，
   会以为页面错位了。类名由 JS 在 2.8 秒后摘掉。 */
.wrong-item.is-back {
  background: #fff6da;
  border-radius: 10px;
  animation: kbBackFade 2.8s ease-out 1;
}
@keyframes kbBackFade {
  0%, 60% { background: #fff6da; }
  100% { background: transparent; }
}

.wrong-crop {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--line);
  margin-bottom: 10px;
  display: block;
}

.rows { display: grid; gap: 6px; font-size: 14px; }
.row { display: grid; grid-template-columns: 62px 1fr; gap: 8px; }
.row em { color: var(--muted); font-style: normal; font-size: 13px; }
.row .ans { word-break: break-word; }
.row .ans.mine { color: var(--red); }
.row .ans.right { color: var(--green); font-weight: 500; }

.comment {
  margin-top: 10px;
  padding: 10px 12px;
  background: #fdf6f5;
  border-left: 3px solid #e2847f;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  color: #8a3b35;
}

/* ---------------- 提交记录弹层 ---------------- */

.sheet {
  position: fixed;
  inset: 0;
  background: rgba(31, 41, 51, .38);
  z-index: 60;
  display: flex;
  align-items: flex-end;
}

.sheet-box {
  width: 100%;
  max-height: 72vh;
  overflow-y: auto;
  background: var(--card);
  border-radius: 16px 16px 0 0;
  padding: 16px 16px calc(16px + var(--safe-b));
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pick-item {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
  font: inherit;
  font-size: 14px;
}
.pick-item.cur { border-color: var(--brand); background: #f7fcfe; }
.pick-item .g { font-weight: 500; }
.pick-item .s { color: var(--muted); font-size: 13px; margin-top: 3px; }

/* ---------------- toast ---------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + var(--safe-b));
  transform: translateX(-50%) translateY(14px);
  background: rgba(31, 41, 51, .92);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  padding: 11px 18px;
  border-radius: 10px;
  max-width: min(86vw, 420px);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
  z-index: 80;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 平板/桌面打开时别拉成一整行，保持阅读宽度 */
@media (min-width: 640px) {
  main { padding: 24px 16px 8px; }
  .big-title { font-size: 23px; }
}

/* ---------------------------------------------------------------- 多页作业
 *
 * 一份作业可以有好几页。单页时这两块（选完照片的缩略图条、结果页的翻页条）
 * 整条 hidden —— 学生走「一张照片」的老流程时，界面上没有任何变化。
 */

/* 缩略图条。顺序就是页码 —— 选反了每一页都会对到别的页的答案上，
 * 而每张图看起来都好好的，所以页码必须直接写在脸上。 */
.pg-list {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 12px;
}
.pg-item {
  width: 72px; line-height: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.pg-item .pg-no {
  display: block; font-size: 11px; line-height: 18px; text-align: center;
  color: var(--muted); background: #f6f9fb;
}

/* 结果页的翻页条。到头的按钮**置灰但不隐藏** —— 按钮一消失，学生会以为
 * 这就是最后一页，恰好和他想问的事相反。 */
.pg-bar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 12px 0 0;
}
.pg-bar button.ghost {
  width: auto; min-height: 0; padding: 7px 14px; font-size: 14px;
}
.pg-bar button:disabled { opacity: .4; }
.pg-label {
  font-size: 13px; color: var(--muted); min-width: 78px; text-align: center;
}

/* ---------------------------------------------------------------- 我的学习 */

/* 登录后的落地页。视觉沿用上面那一套（配色变量 / 卡片 / 圆角），不新造一套 ——
   学生进来先看到它，随后才可能去交作业，两边得是一家。 */
.learn-book {
  color: var(--muted); font-size: 13.5px; margin: -8px 0 4px;
}
/* 上面那条 -8px 是给「作业区」（`.asg-block`，下边距 18px）留的 —— 让课本名
   贴紧一点。但「班级」这一级加进来之后，课本名上面多了一条**班级芯片条**
   （`.cls-bar`，下边距只有 2px），-8px 就啃进了条里：两行叠在一起。
   紧跟条后面时把上边距扶正 —— 2 + 8 = 10px，和作业区那一档的间距一致。
   注意只在这个顺序里命中；多本书选中时是「课本名在上、条在下」，不受影响。 */
.book-bar + .learn-book { margin-top: 8px; }
.learn-note {
  color: var(--muted); font-size: 13.5px; margin: 0 0 12px;
}
.kp-chapter {
  margin: 22px 0 8px; font-weight: 700; font-size: 17.5px;
}
.kp-sec {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; margin: 10px 0;
}
.kp-sec-name {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-weight: 700; font-size: 15.5px; margin-bottom: 6px;
}
.kp-sec-name .n { color: var(--muted); font-size: 12.5px; font-weight: 400; }
.kp-item {
  display: block; padding: 11px 2px;
  border-top: 1px dashed var(--line);
  text-decoration: none; color: inherit; font-size: 15.5px; line-height: 1.5;
}
.kp-item:first-of-type { border-top: 0; }
.kp-item .arr { color: var(--brand); float: right; }
.kp-item .cog {
  display: inline-block; font-size: 11.5px; line-height: 1.7;
  padding: 0 7px; border-radius: 999px;
  background: var(--accent); color: var(--brand-dark);
  margin-left: 6px; vertical-align: 2px; font-weight: 700;
}
.learn-empty {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px;
}
.learn-empty p { margin: 0 0 8px; }
.learn-empty p:last-child { margin-bottom: 0; }

/* 一本班绑了多本书时：先选课本，再进章节。只绑一本时这一层根本不出现。 */
.book-pick { display: grid; gap: 10px; margin: 12px 0 4px; }
.book-card {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: inherit; margin: 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 14px;
}
.book-card:active { border-color: var(--brand); }
.book-card .bk-main { grid-column: 1; font-weight: 700; font-size: 15.5px; }
.book-card .bk-meta { grid-column: 1; color: var(--muted); font-size: 12.5px; }
.book-card .bk-n { grid-column: 1; color: var(--muted); font-size: 12.5px; }
.book-card .arr {
  grid-column: 2; grid-row: 1 / span 3; align-self: center;
  color: var(--brand); font-size: 18px;
}

/* 班级这一级（比「课本」高一级）。卡片与芯片的几何**整套复用** `.book-card` /
   `.book-chip`（元素上同时挂两个类），这里只把班级名放大一号 ——
   学生一进来第一眼要认的是「我在看哪个班」。 */
.cls-card .bk-main { font-size: 17px; }

.book-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 2px; }
.book-bar .bk-cur { font-size: 12.5px; color: var(--muted); }
.book-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.book-chip {
  font: inherit; font-size: 12.5px; line-height: 1.8; margin: 0;
  padding: 1px 10px; border-radius: 999px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); color: inherit;
}
.book-chip.on {
  background: var(--accent); border-color: var(--brand);
  color: var(--brand-dark); font-weight: 700;
}
.book-chip.back { border-style: dashed; color: var(--muted); }

/* ---------------- 老师布置的作业 ---------------- */

.asg-block {
  background: var(--card); border: 1px solid var(--accent-line);
  border-radius: var(--radius); padding: 14px; margin: 0 0 18px;
}
.asg-hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 15px; }
.asg-hd .n { font-size: 12.5px; color: var(--muted); }
.asg-item {
  display: grid; gap: 3px; padding: 10px 0;
  border-top: 1px dashed var(--line);
  text-decoration: none; color: inherit;
}
.asg-item .t { font-size: 15.5px; line-height: 1.5; }
.asg-item .m { font-size: 12.5px; color: var(--muted); }
.asg-item .s { font-size: 12.5px; color: var(--brand-dark); }
.asg-item.done .s { color: var(--green); }

/* ---------------------------------------------------------------- 宽屏 / 横屏
 *
 * 手机竖屏是主场景，上面那一套一个字节不动。但平板、电脑打开、以及手机横过来
 * （矮而宽）时，把内容卡在 560px 会让横向空间整块空着 —— 学生看到中间一条
 * 窄带，两边全是背景色。
 *
 * 这里的做法不是「把单列拉宽」（拉宽只会让一行字长到读不下去），而是
 * **让该并排的东西并排**：班级/课本卡、章下的小节卡、批改图与错题列表。
 * 表单（输入框）反过来要**收窄** —— 一行输入框拉满 880px 既难看也难填。
 *
 * 断点取 720：手机横屏（667~932）与 iPad 竖屏（768）都落在里面。
 */

@media (min-width: 720px) {
  :root { --mainw: 880px; }
  main { padding: 22px 16px 10px; }

  /* 顶栏跟着正文一起收：不收的话，左边品牌、右边菜单会甩到屏幕两端，跟中间
     那块内容对不上。公式里的 +16px 是 main 自己的左右内边距，不减就对不齐。
     菜单是**相对顶栏定位**的（见 .menu-panel 上面那段），所以它也得跟着收 ——
     只收顶栏不收菜单，面板会开到离按钮很远的地方。 */
  .topbar {
    padding-left: max(16px, calc((100% - var(--mainw)) / 2 + 16px));
    padding-right: max(16px, calc((100% - var(--mainw)) / 2 + 16px));
  }
  .menu-panel.open { right: max(16px, calc((100% - var(--mainw)) / 2 + 16px)); }

  /* 登录 / 交作业 / 等待：这是表单，不是卡片墙。一行别拉太长。 */
  #login, #step1, #step2 { max-width: 560px; margin-left: auto; margin-right: auto; }

  /* 学习页：该并排的并排。#learnBody 的直接子元素就是这些 —— 作业区、班级条、
     班级卡/课本卡、章节标题、小节卡。**条 / 标题 / 作业区横跨整行，卡片分列**。 */
  #learnBody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0 16px;
    align-items: start;
  }
  #learnBody > .asg-block,
  #learnBody > .book-bar,
  #learnBody > .learn-empty,
  #learnBody > .learn-book,
  #learnBody > .learn-note,
  #learnBody > .kp-chapter,
  #learnBody > p { grid-column: 1 / -1; }
  /* 班级卡/课本卡自己就是一层网格：先横跨整行，再在里面按宽度分列。 */
  #learnBody > .book-pick {
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  }

  /* 结果页：批改图在左、错题在右 —— 正好是「对着答案改错」要同时看的两样东西。 */
  #step3 {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 0 16px;
    align-items: start;
  }
  #step3 > .score-card,
  #step3 > #rHint { grid-column: 1 / -1; }

  /* 宽屏上别用「从底部弹上来」的整宽抽屉：桌面上一整条 1920px 的底栏很怪。
     也一样居中、限宽，但四角都圆回来，观感仍是一张浮起来的卡片。 */
  .sheet { align-items: center; justify-content: center; }
  .sheet-box { max-width: 640px; border-radius: 16px; max-height: 80vh; }
}

@media (min-width: 1200px) {
  :root { --mainw: 1040px; }
}

/* -- 我的错题（P1-9）--------------------------------------------------
   和「老师布置的作业」并排放在学习页顶部：作业有期限、错题没有，
   但都是"我该去做的事"，所以同一屏。 */
.wb-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); margin: 0 0 18px; overflow: hidden;
}
.wb-card.open { border-color: var(--accent-line); }
.wb-hd {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 14px; border: 0; background: none; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
}
.wb-hd .t { font-size: 15px; font-weight: 700; flex: none; }
.wb-hd .m { font-size: 12.5px; color: var(--muted); flex: 1; }
.wb-hd .arr { flex: none; color: var(--muted); font-size: 12px; }
.wb-hd .wb-n { color: var(--red); font-size: 15px; }
.wb-hd .wb-n.ok { color: var(--green); }
.wb-body { padding: 0 14px 14px; }

.wb-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.wb-tab {
  font: inherit; font-size: 12.5px; padding: 4px 11px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--muted);
}
.wb-tab.on { background: var(--accent); border-color: var(--accent-line); color: var(--brand-dark); font-weight: 600; }

.wb-item { padding: 12px 0; border-top: 1px solid var(--line); }
.wb-item:first-child { border-top: 0; }
.wb-item-hd { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.wb-no { font-size: 13px; font-weight: 600; }
.wb-state { font-size: 12px; color: var(--muted); margin-left: auto; }
/* 状态点：红=还没补上，黄=订正过一次，绿=已掌握。
   色盲也不至于看不出 —— 同一行右边还有文字。 */
.wb-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--muted); display: inline-block;
}
.wb-dot.s-open { background: var(--red); }
.wb-dot.s-fixed { background: var(--amber); }
.wb-dot.s-mastered { background: var(--green); }
.wb-stem { margin: 6px 0 0; font-size: 14px; line-height: 1.55; }
/* 错题卡里的「练两道同类的」 */
.wb-acts { margin: 10px 0 0; }
.wb-go {
  font: inherit; font-size: 13px; padding: 6px 13px; cursor: pointer;
  border: 1px solid var(--brand); border-radius: 999px;
  background: #fff; color: var(--brand-dark); font-weight: 600;
}
.wb-go:disabled { opacity: .55; cursor: default; }