/* GuodongTask —— 移动端优先（手机竖屏是第一现场）
   原则：
   1. 所有可点区域 ≥ 48px（四年级孩子手指精度有限）
   2. 不引任何 UI 框架、不引 CDN，断网也能用
   3. 字号偏大，避免孩子眯眼
   4. 颜色只有一套语义：绿 = 已完成，浅绿 = 进行中，白 = 还没开始
*/

:root {
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #1f2430;
  --muted: #7b8395;
  --line: #e4e7ef;
  --brand: #4c8bf5;
  --brand-soft: #e8f0ff;
  --ok: #2fb763;
  --ok-soft: #e6f8ee;
  --ok-line: #9bdfb8;
  --warn: #f5a623;
  --danger: #e5534b;
  --radius: 14px;
  --radius-sm: 12px;
  --tap: 48px;
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 14px calc(24px + env(safe-area-inset-bottom));
}

/* ---------------------------------------------------------------- 顶部 */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 4px 2px 10px;
}
.app-title { margin: 0; font-size: 24px; letter-spacing: 0.5px; flex: 1 1 auto; }
.topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.points-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12px;
  color: #8a6a1a;
  background: #fff6e0;
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
  line-height: 1.5;
}
.points-chip b { font-size: 15px; font-weight: 700; }
.points-sep { color: #c9a961; margin: 0 2px; }

/* 窄屏（iPhone SE 之类 320-380px）：积分胶囊和标题会挤，整体缩一档 */
@media (max-width: 400px) {
  .points-chip { font-size: 11px; padding: 3px 9px; gap: 3px; }
  .points-chip b { font-size: 13px; }
  .points-sep { margin: 0 1px; }
  .app-title { font-size: 21px; }
}

.section-label {
  margin: 2px 2px 8px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}

/* ---------------------------------------------------------------- 周度横条（6 格） */
.week-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.wcell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 66px;
  padding: 8px 2px 7px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--line);
  background: var(--card);          /* 白底 = 还没开始 */
  color: var(--text);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* 已完成：绿底 */
.wcell.state-done {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}
/* 进行中：浅绿底（做了但没做完） */
.wcell.state-doing {
  background: #d8f3e4;
  border-color: var(--ok-line);
  color: #136b3d;
}
/* 已录入作业、但一项都没勾：白底 + 虚线描边，提示「还有活没动」 */
.wcell.state-pending {
  background: var(--card);
  border-color: #ffd79a;
  border-style: dashed;
}
.wcell.state-pending .wcell-mark { color: #b9770e; }
/* 什么都没录：白底灰字，存在感最低 */
.wcell.state-idle { color: #a7aebd; }
.wcell.state-idle .wcell-mark { color: #c8cfdd; }

/* 当前页签 / 今天：加一圈品牌色描边，不改底色语义 */
.wcell.is-active {
  box-shadow: 0 0 0 2px var(--brand);
}
.wcell.is-today .wcell-name { font-weight: 700; }

.wcell-mark {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  opacity: 0.95;
}
.wcell.state-done .wcell-mark { font-size: 17px; }
.wcell-name {
  font-size: clamp(11px, 3.2vw, 13px);
  line-height: 1.2;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}
.wcell-date {
  font-size: clamp(9px, 2.4vw, 10px);
  line-height: 1.2;
  opacity: 0.7;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}

/* ---------------------------------------------------------------- 面板骨架 */
.day-panel { display: grid; gap: 14px; }
/* 汇总条紧贴周度横条：去掉它前面的第一道间距 */
.day-panel > .summary:first-child { margin-top: -4px; }

/* 汇总条：紧贴在周度横条下面，字号小、没有卡片阴影，避免把版面顶下去 */
.summary {
  background: transparent;
  border-radius: 0;
  padding: 0 4px 2px;
  box-shadow: none;
}
.summary-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.summary-count { font-size: 14px; font-weight: 600; color: var(--muted); }
.summary.is-complete .summary-count { color: var(--ok); }
.summary-done {
  font-size: 11px;
  color: #fff;
  background: var(--ok);
  border-radius: 999px;
  padding: 1px 8px;
}
.progress {
  height: 6px;
  border-radius: 999px;
  background: #e6eaf3;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--brand);
  transition: width 0.25s ease;
}
.summary.is-complete .progress-fill { background: var(--ok); }
.rest-tip { margin: 6px 0 0; font-size: 12px; color: var(--warn); }

/* ---------------------------------------------------------------- 课内 / 课外 大框
   课内在上、课外在下。大框用淡底色区分，小标题带完成数。 */
.tray {
  border-radius: 18px;
  padding: 12px 12px 14px;
}
.tray-in_class { background: #eef4ff; }
.tray-out_class { background: #f5f0ff; }

.tray-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 4px 10px;
}
.tray-title { font-size: 15px; font-weight: 700; }
.tray-in_class .tray-title { color: #2f6fd0; }
.tray-out_class .tray-title { color: #6743b8; }
.tray-count { font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------- 作业方格
   列数由服务端按「文字完整显示 + 空白最少」算出（--cols: 2 或 3），
   JS 会用真实屏宽再校准一次；没有 JS 时就用服务端算的值。 */
.task-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 10px;
  /* 同一行的格子高度自动拉大、上下对齐（等高整齐）。
     每格内部用 flex + margin-top:auto 把 ✓ 压到底部，短格不会显得空。 */
  align-items: stretch;
}

.task-cell {
  position: relative;
  min-height: 92px;
  border-radius: var(--radius);
  border: 2px solid var(--line);
  background: var(--card);          /* 白底 = 还没做 */
  box-shadow: 0 1px 2px rgba(31, 36, 48, 0.05);
  overflow: hidden;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}
.task-cell:has(.cell-btn:active) { transform: scale(0.985); }

/* 已完成：浅绿底 + 删除线 */
.task-cell.is-done {
  background: var(--ok-soft);
  border-color: var(--ok-line);
}

.cell-toggle { margin: 0; height: 100%; }
.cell-btn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 92px;
  /* 右侧留出 ✕ 的位置、底部留出 ✓ 的位置，文字不会压到按钮上 */
  padding: 10px 30px 30px 12px;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.cell-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cell-scope {
  font-size: 11px;
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.5;
}
.scope-in_class { background: var(--brand-soft); color: var(--brand); }
.scope-out_class { background: #f3ecff; color: #7048c8; }
.cell-subject { font-size: 13px; font-weight: 700; color: var(--muted); }
.task-cell.is-done .cell-subject { color: #177a45; }
.cell-tag {
  font-size: 10px;
  color: var(--warn);
  background: #fff6e3;
  border-radius: 999px;
  padding: 1px 7px;
}

/* 文字必须完整显示：不截断、不省略、不滚动。
   格子高度由内容决定，同一行的格子会被拉成同高（这就是要最小化的空白）。 */
.cell-content {
  font-size: 16px;
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}
.task-cell.is-done .cell-content {
  color: #3f7f5c;
  text-decoration: line-through;
  text-decoration-color: rgba(63, 127, 92, 0.6);
  text-decoration-thickness: 2px;
}

.cell-check {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: var(--ok);
  background: transparent;
}
.task-cell.is-done .cell-check {
  color: #fff;
  background: var(--ok);
}

.cell-delete { margin: 0; position: absolute; top: 0; right: 0; }
.cell-x {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #c8cfdd;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.cell-x:active { color: var(--danger); }

/* 没有 JS 校准列数时，宽屏上退化成 3 列（窄屏仍用服务端算出的 2 列） */
@media (min-width: 640px) {
  .task-grid[data-cols-server="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- 录入区 */
.add-panel {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(31, 36, 48, 0.06);
  overflow: hidden;
}
.add-summary {
  list-style: none;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 17px;
  font-weight: 700;
  color: var(--brand);
  cursor: pointer;
}
.add-summary::-webkit-details-marker { display: none; }
.add-panel[open] .add-summary { border-bottom: 1px solid var(--line); }

.add-form { padding: 14px 16px 16px; display: grid; gap: 8px; }

.field-label { margin: 6px 0 0; font-size: 13px; color: var(--muted); }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.chip-row-label { flex: 0 0 34px; font-size: 13px; color: var(--muted); }

/* 用 radio + label 做「大按钮」，纯 CSS，不用 JS */
.chip-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chip {
  min-height: var(--tap);
  min-width: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--line);
  background: #fff;
  font-size: 17px;
  cursor: pointer;
  user-select: none;
}
.chip-input:checked + .chip {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 700;
}
.chip-input:focus-visible + .chip { outline: 2px solid var(--brand); outline-offset: 2px; }

.input-content,
.input-good {
  width: 100%;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font: inherit;
  font-size: 17px;
  color: var(--text);
  background: #fbfcff;
  resize: none;
}
.input-content:focus,
.input-good:focus { outline: none; border-color: var(--brand); background: #fff; }
.input-good:disabled { color: var(--muted); }

/* 按钮的三种写法必须长得一样：<button>、<a class="btn">、<label class="btn">。
   浏览器只给 <button> 默认居中，<a>/<label> 默认左对齐 ——
   所以这里显式统一，否则弹窗里「修改这条作业」会偏到左边。 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: var(--tap);
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  font-size: 17px;
  font-family: inherit;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
}
a.btn, label.btn {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.btn-ghost { background: transparent; color: var(--muted); }
.btn:active { transform: scale(0.985); }
.btn-block { width: 100%; margin-top: 6px; }

.tip { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.alert {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: #fff2f1;
  color: var(--danger);
  font-size: 15px;
}
.empty {
  margin: 0;
  padding: 22px 16px;
  border-radius: var(--radius);
  background: var(--card);
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}
.rest-form { margin: 0; }

/* ---------------------------------------------------------------- 今日好事 */
.good-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  box-shadow: 0 1px 2px rgba(31, 36, 48, 0.06);
  border: 2px solid #ffe9b8;
  background: #fffdf6;
}
.good-card.is-done { border-color: var(--ok-line); background: var(--ok-soft); }
.good-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.good-title { margin: 0; font-size: 18px; }
.good-progress { font-size: 14px; color: var(--muted); }
.good-sub { margin: 4px 0 10px; font-size: 13px; color: var(--muted); }
.good-form { display: grid; gap: 8px; }
.good-line { display: flex; align-items: center; gap: 10px; }
.good-index {
  flex: 0 0 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffe9b8;
  color: #8a6a1a;
  font-size: 13px;
  display: grid;
  place-items: center;
}

/* ---------------------------------------------------------------- 通用卡片（错误页等） */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(31, 36, 48, 0.06);
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* 长路径（备份文件路径）必须能断行，否则会把整个页面撑宽 */
.pbreak { word-break: break-all; overflow-wrap: anywhere; }
.small { font-size: 13px; }
.hint { margin: 20px 4px 0; color: var(--muted); font-size: 14px; }

/* ================================================================
   M3：补漏黄条 / 补漏 chips / 追问卡片
   ============================================================= */

/* ---------------------------------------------------------------- 黄条 */
.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: #fff8e6;
  border: 1px solid #ffe1a8;
  color: #8a6a1a;
  text-decoration: none;
  font-size: 15px;
  line-height: 1.35;
}
.banner.is-warn { background: #fff1f0; border-color: #ffc9c4; color: #b3403a; }
.banner-quiet { background: #f3f6fd; border-color: #dde6f8; color: var(--muted); }
.banner-icon {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
}
.banner-text { flex: 1 1 auto; }
.banner-arrow { flex: 0 0 auto; font-size: 20px; opacity: 0.5; }

/* ---------------------------------------------------------------- 流程页 */
.flow { display: grid; gap: 14px; }
.inline-form { margin: 0; }
.text-btn {
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- 补漏 chips ---- */
.gap-card,
.prompt-card,
.flow-add,
.flow-done {
  background: var(--card);
  border-radius: 18px;
  padding: 18px 18px 20px;
  box-shadow: 0 1px 2px rgba(31, 36, 48, 0.06);
}
.gap-title { margin: 0 0 4px; font-size: 20px; }
.gap-sub { margin: 0 0 16px; font-size: 14px; color: var(--muted); }

.gap-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.gap-chip-form { margin: 0; }
.gap-chip {
  width: 100%;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--line);
  background: #fbfcff;
  font: inherit;
  color: var(--text);
  cursor: pointer;
}
.gap-chip:active { transform: scale(0.98); border-color: var(--brand); }
.gap-chip-subject { font-size: 17px; font-weight: 700; }
.gap-chip-scope {
  font-size: 11px;
  border-radius: 999px;
  padding: 1px 8px;
  line-height: 1.5;
}
.gap-none-form { margin: 0; }

/* ---- 追问卡片 ---- */
.prompt-card { text-align: center; padding-top: 22px; }
.prompt-step {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
}
.prompt-question {
  margin: 0 0 10px;
  font-size: clamp(21px, 6vw, 26px);
  line-height: 1.4;
}
.prompt-hint { margin: 0 0 22px; font-size: 14px; color: var(--muted); }

.prompt-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.prompt-form { margin: 0; }
.btn-big {
  width: 100%;
  min-height: 76px;
  font-size: 21px;
  font-weight: 700;
  border-radius: 16px;
}
.btn-nope { background: #f2f4f9; border-color: #e4e7ef; color: var(--muted); }
.btn-yep { background: var(--brand); border-color: var(--brand); color: #fff; }
.prompt-skip { margin: 0; text-align: center; }

/* ---- 进录入 ---- */
.flow-subject {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 6px;
  font-size: 17px;
}

/* ---- 结束 ---- */
.flow-done { text-align: center; padding-top: 26px; }
.done-mark {
  width: 68px;
  height: 68px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  font-size: 34px;
  display: grid;
  place-items: center;
}
.done-title { margin: 0 0 8px; font-size: 22px; }
.done-sub { margin: 0 0 22px; font-size: 15px; color: var(--muted); }

/* ---------------------------------------------------------------- 未处理的「有」 */
.orphan-card {
  background: #fff8e6;
  border: 1px solid #ffe1a8;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: #8a6a1a;
}
.orphan-title { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.orphan-list { list-style: none; margin: 0 0 4px; padding: 0; }
.orphan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
}
.orphan-label { font-size: 15px; }
.orphan-form { margin: 0; }
.orphan-hint { margin: 0; font-size: 12px; opacity: 0.8; }

/* ---------------------------------------------------------------- 三件好事（M4） */
.good-line.is-duplicate .input-good {
  border-color: var(--danger);
  background: #fff5f4;
}
.good-line.is-duplicate .good-index { background: #ffd9d5; color: #b3403a; }
.good-error {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--danger);
}
.good-card.is-done .good-progress { color: var(--ok); font-weight: 600; }

/* ================================================================
   M6：家长中心
   ============================================================= */
.pnav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 12px;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.pnav-item {
  flex: 0 0 auto;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  border: 1px solid var(--line);
}
.pnav-item.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}

.pcard {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 1px 2px rgba(31, 36, 48, 0.06);
  margin-bottom: 14px;
}
.ptitle { margin: 0 0 12px; font-size: 18px; }
.psub {
  margin: 20px 0 8px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}
.ptext { margin: 0 0 8px; font-size: 15px; }
.pdim { color: var(--muted); font-size: 13px; margin-left: 6px; }
.pbad { color: var(--danger); }
.pwarn { color: #b9770e; font-size: 14px; margin: 8px 0 0; }
.pwarn-text { color: #b9770e; }
.pmsg {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--ok-soft);
  color: #136b3d;
  font-size: 14px;
}

.pkv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.pkv {
  background: #f7f9fe;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.pkv > span { display: block; font-size: 12px; color: var(--muted); }
.pkv > b { font-size: 20px; }

.ptable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.ptable th, .ptable td {
  padding: 8px 6px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.ptable th { color: var(--muted); font-weight: 600; font-size: 12px; }

.ptag {
  display: inline-block;
  font-size: 11px;
  border-radius: 999px;
  padding: 1px 8px;
  background: #eef1f7;
  color: var(--muted);
}
.ptag-ok { background: var(--ok-soft); color: #136b3d; }
.ptag-doing { background: #d8f3e4; color: #136b3d; }
.ptag-idle { background: #f2f4f9; color: #a7aebd; }

.plist { margin: 0; padding-left: 20px; font-size: 14px; }
.plist li { margin-bottom: 4px; }

/* ---------------------------------------------------------------- 表单 */
.pform { display: grid; gap: 10px; }
.pform-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
}
.pspace { justify-content: space-between; }
.pfield {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
}
.pfield-label { font-size: 15px; }
.pinput {
  width: 100%;
  min-height: 44px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font: inherit;
  font-size: 16px;
  background: #fbfcff;
}
.pinput-sm { width: auto; min-width: 84px; flex: 0 1 auto; }
.pinput:focus { outline: none; border-color: var(--brand); background: #fff; }
.pselect {
  min-height: 44px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font: inherit;
  font-size: 15px;
  background: #fbfcff;
}
.pchecks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.pcheck {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  min-height: 38px;
}
.pitem {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
  display: grid;
  gap: 8px;
}
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn:disabled { opacity: 0.45; }

/* ---------------------------------------------------------------- 导出页 */
.pseg {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.pseg-item {
  flex: 1 1 0;
  min-height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
}
.pseg-item.is-active {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand);
  font-weight: 600;
}
.pbtns {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.pbtns .btn { width: 100%; }

/* ================================================================
   M8-1：空状态 / 首次引导 / 错误页 / 断网提示
   ============================================================= */

/* ---------------------------------------------------------------- 空状态 */
.empty-card {
  background: var(--card);
  border-radius: var(--radius);
  border: 2px dashed var(--line);
  padding: 26px 18px 24px;
  text-align: center;
  box-shadow: none;
}
.empty-icon { font-size: 34px; line-height: 1; margin-bottom: 10px; }
.empty-title { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.empty-sub { margin: 0; font-size: 14px; color: var(--muted); }
.empty-rest { background: #f7f8fc; }
.empty-rest .empty-title { color: var(--muted); }

/* ---------------------------------------------------------------- 首次使用引导 */
.welcome-card {
  background: linear-gradient(180deg, #eef4ff, #f7faff);
  border: 1px solid #d6e4ff;
  border-radius: var(--radius);
  padding: 18px 18px 16px;
}
.welcome-title { margin: 0 0 4px; font-size: 19px; }
.welcome-sub { margin: 0 0 14px; font-size: 14px; color: #4a5a78; }
.welcome-steps {
  margin: 0 0 12px;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.85;
  color: #2c3a55;
}
.welcome-steps b { color: var(--brand); }
.welcome-tip { margin: 0; font-size: 13px; color: #6b7a95; }

/* ---------------------------------------------------------------- 错误页 */
.err-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 30px 20px 22px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(31, 36, 48, 0.06);
}
.err-icon { font-size: 44px; line-height: 1; margin-bottom: 14px; }
.err-title { margin: 0 0 8px; font-size: 20px; font-weight: 700; }
.err-sub { margin: 0 0 6px; font-size: 15px; color: var(--muted); line-height: 1.6; }
.err-detail {
  margin: 0 auto 4px;
  max-width: 34em;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.err-actions { display: grid; gap: 8px; margin-top: 22px; }

/* ---------------------------------------------------------------- 断网 / 服务无响应提示
   固定在底部，不挡内容，也不要求孩子必须处理它 —— 只是让他知道「不是自己弄坏了」。 */
.offline-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 696px;
  margin: 0 auto;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: #fff1f0;
  border: 1px solid #ffc9c4;
  color: #b3403a;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 6px 18px rgba(179, 64, 58, 0.16);
}
.offline-bar[hidden] { display: none; }
.offline-text { flex: 1 1 auto; }
.offline-text b { display: block; font-size: 15px; margin-bottom: 2px; }
.offline-retry {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #ffc9c4;
  background: #fff;
  color: #b3403a;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* ================================================================
   常驻录入区 / 主页内嵌提醒（M8-2）
   ============================================================= */

/* ---------------------------------------------------------------- 录入区常驻 */
.add-area {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  box-shadow: 0 1px 2px rgba(31, 36, 48, 0.06);
  scroll-margin-top: 12px;
}
.add-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--brand);
}
.recorded-form { margin: 12px 0 0; }
.btn-recorded {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  min-height: 54px;
}

/* ---------------------------------------------------------------- 科目补漏 chips */
.miss-card {
  background: #f9fafd;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 14px 16px 14px;
}
.miss-title { margin: 0 0 4px; font-size: 15px; }
.miss-sub { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.miss-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
a.gap-chip { text-decoration: none; color: inherit; }
.miss-form { margin: 0; }

/* ---------------------------------------------------------------- 提醒区 */
.remind-area { display: grid; gap: 12px; }
.remind-area:empty { display: none; }
.prompt-card { scroll-margin-top: 12px; }

/* ================================================================
   作业卡片菜单（修改 / 删除）—— 纯 CSS + checkbox，不依赖 JS
   ============================================================= */

/* × 变成 label（点一下勾上 checkbox） */
/* 已完成的卡片整格是 label（点一下弹确认），需要相对定位承载绝对定位的 × */
li.task-cell { position: relative; }

label.cell-x {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #c8cfdd;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
label.cell-x:active { color: var(--danger); }

/* 弹窗默认不显示；对应 checkbox 被勾上就显示。
   「修改/删除」和「撤销打勾确认」共用这一套。 */
.cell-menu,
.cell-undo { display: none; }

.cell-menu-toggle:checked ~ .cell-menu,
.cell-undo-toggle:checked ~ .cell-undo {
  display: grid;
  place-items: end center;
  position: fixed;
  inset: 0;
  z-index: 100;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}
.cell-menu-mask {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 33, 0.42);
}
.cell-menu-box {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--card);
  border-radius: 18px;
  padding: 20px 18px 18px;
  box-shadow: 0 12px 40px rgba(20, 24, 33, 0.28);
  display: grid;
  gap: 8px;
}
.cell-menu-title { margin: 0 0 2px; font-size: 19px; font-weight: 700; }
.cell-menu-body {
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: #f7f9fe;
  font-size: 15px;
  line-height: 1.5;
  word-break: break-word;
}
.cell-menu-label {
  display: inline-block;
  margin-right: 8px;
  font-size: 12px;
  color: var(--muted);
}
.cell-menu-content { color: var(--text); }
.cell-menu-hint {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

/* 已完成的卡片：点上去要给「确认」而不是直接撤勾，所以鼠标提示改一下 */
label.cell-uncheck { cursor: pointer; }
.cell-uncheck:active { transform: scale(0.99); }
.cell-menu-box form { margin: 0; }


.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  font-weight: 600;
}

/* 好事已提交后的「保存修改」按钮：明显一点，别让人以为不能改 */
.btn-revise {
  background: #fff;
  border-color: var(--ok-line);
  color: #136b3d;
  font-weight: 600;
}