/* ============================================================
 * classroom.css — 「课堂笔记」主题（单一来源 · 依 classroom-notes-design-style.md 从 0 重写）
 *
 * 一句话：整页就是一张横线笔记纸。蓝色圆珠笔记知识，红笔写批注，
 *         荧光笔只压重点，绿笔判对，紫笔标「免」。清单直接写在横线上，
 *         不做成卡片、不堆阴影、不每块换色（§2.4 / §13）。
 *
 * 色彩语义（§2.2 / §3）:
 *   纸/留白 ~75% · 蓝 ~15% · 黄荧光 ~5% · 红绿紫合计 ~5%
 *   蓝=正文  红=批注/易错  黄=关键概念  绿=正确/完成  紫=扩展/被免
 * ============================================================ */

/* ---------- 令牌：规范色值 → 语义 → base 消费的通用令牌 ---------- */
:root[data-theme="classroom"] {
  /* 规范原色（§3.1） */
  --paper: #fffef9;
  /* 纸张背景 */
  --paper-card: #fffef9;
  /* 内容纸面 */
  --paper-deep: #f4efe1;
  /* 纸背 / 更深纸面 */
  --pen-blue: #243d70;
  /* 圆珠笔蓝 */
  --pen-blue-soft: #59647a;
  /* 次级文字 */
  --pen-blue-faint: #9aa5b8;
  /* 淡文字 / 页码 */
  --rule-blue: #c9dbef;
  /* 横线蓝 */
  --margin-red: #e7a0a6;
  /* 页边红线 */
  --pen-red: #d84b57;
  /* 批注红 */
  --pen-green: #37946e;
  /* 笔记绿 */
  --pen-purple: #8060b3;
  /* 扩展紫 */
  --hl-yellow: #fff19a;
  /* 荧光黄 */

  /* 荧光笔（半透明，压在文字下部） */
  --hi-yellow: rgba(255, 241, 154, .82);
  --hi-green: rgba(177, 226, 201, .60);
  --hi-purple: rgba(216, 203, 238, .55);

  /* 手绘度量 */
  --rule-h: 32px;
  /* 横线节律（§4.1 30–34px） */
  --line-w: 1.6px;
  /* 手绘线宽（§8.1 1.5–2px） */
  --wobble-a: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --wobble-b: 15px 225px 15px 255px / 255px 15px 225px 15px;
  --paper-shadow: 1px 2px 0 rgba(36, 61, 112, .05), 0 10px 30px -14px rgba(36, 61, 112, .16);
  --box-shadow: 1.5px 2px 0 rgba(36, 61, 112, .06);

  /* 字体（§5） */
  --font-hand: "LXGW WenKai", "霞鹜文楷", "Xiaolai SC", "KaiTi", "STKaiti", "AR PL UKai CN", cursive;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Roboto Mono", monospace;

  /* → base / day / stats … 直接消费的通用令牌 */
  --ink: var(--pen-blue);
  --ink-soft: var(--pen-blue-soft);
  --ink-faint: var(--pen-blue-faint);
  --ink-60: rgba(36, 61, 112, .64);
  --ink-45: rgba(36, 61, 112, .45);
  --ink-25: rgba(36, 61, 112, .24);
  --ink-15: rgba(36, 61, 112, .13);
  --cinnabar: var(--pen-red);
  --cinnabar-deep: #b63b48;
  --cinnabar-soft: rgba(216, 75, 87, .09);
  --gold: var(--pen-purple);
  /* 全部收拢进紫，不引入第 6 色 */
  --alarm: var(--pen-red);
  --rule: var(--rule-blue);
  --page-margin: var(--margin-red);
  --serif: var(--font-hand);

  --theme-body: var(--font-hand);
  --theme-display: var(--font-hand);
  --theme-number: var(--font-mono);
}

/* ---------- 全局：桌面纸底 + 手写字 + 荧光选区 + 红笔焦点环 ---------- */
:root[data-theme="classroom"] body {
  color: var(--ink);
  background-color: var(--paper);
  background-image: repeating-linear-gradient(to bottom,
      transparent 0,
      transparent 31px,
      rgba(201, 219, 239, .5) 31px,
      rgba(201, 219, 239, .5) 32px);
}

:root[data-theme="classroom"] body,
:root[data-theme="classroom"] button,
:root[data-theme="classroom"] input,
:root[data-theme="classroom"] textarea {
  font-family: var(--font-hand);
  font-synthesis: none;
}

:root[data-theme="classroom"] ::selection {
  color: var(--ink);
  background: var(--hi-yellow);
}

:root[data-theme="classroom"] :focus-visible {
  outline: 2px solid var(--pen-red);
  outline-offset: 3px;
}

/* ---------- 纸页：横线底纹 + 左侧红页边线（§4.2），无噪点做旧（§4.3） ---------- */
:root[data-theme="classroom"] .paper,
:root[data-theme="classroom"] .overlay-sheet {
  color: var(--ink);
  border: 1px solid var(--ink-15);
  border-radius: 8px 6px 9px 7px;
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, transparent 72px, var(--page-margin) 72px, var(--page-margin) 74px, transparent 74px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--rule) 31px, var(--rule) 32px);
  box-shadow: var(--paper-shadow);
}

:root[data-theme="classroom"] #book>.page,
:root[data-theme="classroom"] .flip-leaf {
  left: max(14px, calc(50% - 480px));
  right: max(14px, calc(50% - 480px));
}

:root[data-theme="classroom"] .page {
  padding: 36px 44px 52px 98px;
  font-size: 16px;
  line-height: 1.7;
}

/* 翻页阴影改淡蓝墨（不做深棕做旧） */
:root[data-theme="classroom"] .page.under-page::after,
:root[data-theme="classroom"] .leaf-shade {
  background: linear-gradient(to right, rgba(36, 61, 112, .10), rgba(36, 61, 112, .03) 40%, transparent 68%);
}

:root[data-theme="classroom"] .leaf-back {
  border: 1px solid var(--ink-15);
  background-color: var(--paper-deep);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(201, 219, 239, .45) 31px, rgba(201, 219, 239, .45) 32px);
  box-shadow: inset 0 0 40px rgba(36, 61, 112, .05);
}

:root[data-theme="classroom"] .leaf-back-mark {
  color: rgba(36, 61, 112, .07);
}

/* ---------- 页眉：日期靠左，黄荧光只压标题下半（§7.1） ---------- */
:root[data-theme="classroom"] .page-head {
  text-align: left;
}

:root[data-theme="classroom"] .date-title {
  display: inline;
  padding: 0 5px;
  color: var(--ink);
  font-size: clamp(26px, 3.2vw, 30px);
  font-weight: 700;
  letter-spacing: .045em;
  background: linear-gradient(transparent 58%, var(--hi-yellow) 58%, var(--hi-yellow) 91%, transparent 91%);
}

:root[data-theme="classroom"] .field-tag {
  margin-top: 11px;
  color: var(--ink-soft);
  font: 13px/1.6 var(--font-mono);
  letter-spacing: .04em;
}

/* 学科场：红笔小指示符（对副标题一律成立，不硬拼「课程：」） */
:root[data-theme="classroom"] .field-tag::before {
  content: '▸';
  margin-right: 6px;
  color: var(--pen-red);
  font-size: 12px;
}

/* 页眉分割：蓝笔双线（§7.2），去掉基础层的钻石节点 */
:root[data-theme="classroom"] .head-rule {
  width: 118px;
  height: 5px;
  margin: 10px 0 0 4px;
  background: none;
  border-top: var(--line-w) solid var(--ink);
  border-bottom: var(--line-w) solid var(--ink);
  transform: rotate(-.6deg);
}

:root[data-theme="classroom"] .head-rule::after {
  display: none;
}

/* ---------- 课前一句：唯一皮肤化点缀 = 一张淡紫便利贴（§8.2，紫笔=老师提示） ---------- */
:root[data-theme="classroom"] .blessing {
  position: relative;
  justify-content: flex-start;
  width: fit-content;
  max-width: min(84%, 620px);
  margin: 26px 0 22px auto;
  padding: 14px 40px 13px 18px;
  border: var(--line-w) solid color-mix(in srgb, var(--pen-purple) 42%, transparent);
  border-radius: var(--wobble-b);
  background: color-mix(in srgb, var(--hi-purple) 60%, var(--paper-card));
  box-shadow: var(--box-shadow);
  transform: rotate(.6deg);
}

:root[data-theme="classroom"] .blessing::before {
  content: '老师提示';
  position: absolute;
  top: -12px;
  left: 16px;
  padding: 0 5px;
  color: var(--pen-purple);
  background: var(--paper);
  font-size: 12px;
  font-weight: 700;
  transform: rotate(-2.5deg);
}

:root[data-theme="classroom"] .blessing-deco {
  color: var(--pen-purple);
}

:root[data-theme="classroom"] .blessing-text {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: .05em;
  border-bottom-color: color-mix(in srgb, var(--pen-purple) 42%, transparent);
}

:root[data-theme="classroom"] .like-btn {
  color: var(--ink-faint);
}

:root[data-theme="classroom"] .like-btn:hover,
:root[data-theme="classroom"] .like-btn.liked {
  color: var(--pen-purple);
}

/* ---------- 免除横幅：紫笔虚线（免/特殊 = 紫，全站一致） ---------- */
:root[data-theme="classroom"] .exempt-banner {
  width: min(80%, 620px);
  margin: 18px 0 6px auto;
  padding: 9px 14px;
  color: var(--pen-purple);
  border: var(--line-w) dashed var(--pen-purple);
  border-radius: var(--wobble-a);
  background: color-mix(in srgb, var(--hi-purple) 62%, var(--paper-card));
  transform: rotate(-.35deg);
}

:root[data-theme="classroom"] .exempt-banner::after {
  content: none;
  display: none;
}

:root[data-theme="classroom"] .exempt-star {
  color: var(--pen-purple);
}

/* ============================================================
 * 学习清单 —— 每个待办项独立成框（细手绘边 + 不规则圆角）
 * ============================================================ */
:root[data-theme="classroom"] .items {
  display: block;
  margin-top: 16px;
}

:root[data-theme="classroom"] .item {
  min-height: 46px;
  gap: 12px;
  margin-bottom: 10px;
  padding: 9px 12px 10px 10px;
  border: 2.4px solid var(--ink-25);
  border-radius: var(--wobble-a);
  background: var(--paper-card);
  box-shadow: none;
  transition: background .3s ease, opacity .3s ease;
  overflow: visible;
}

:root[data-theme="classroom"] .item:nth-child(even) {
  border-radius: var(--wobble-b);
}

/* 外框颜色：像换了几支笔，随位置轮换（避开状态语义的红，不与未完成混淆） */
:root[data-theme="classroom"] .item:nth-child(4n+1) {
  border-color: color-mix(in srgb, var(--pen-blue) 40%, transparent);
}

:root[data-theme="classroom"] .item:nth-child(4n+2) {
  border-color: color-mix(in srgb, var(--pen-purple) 42%, transparent);
}

:root[data-theme="classroom"] .item:nth-child(4n+3) {
  border-color: color-mix(in srgb, var(--pen-green) 42%, transparent);
}

:root[data-theme="classroom"] .item:nth-child(4n) {
  border-color: var(--ink-45);
}

/* 高度 / 间距：小幅抖动，差距 ≤4px，避免忽大忽小 */
:root[data-theme="classroom"] .item:nth-child(3n+1) {
  min-height: 44px;
  margin-bottom: 9px;
}

:root[data-theme="classroom"] .item:nth-child(3n+2) {
  min-height: 47px;
  margin-bottom: 12px;
}

:root[data-theme="classroom"] .item:nth-child(3n) {
  min-height: 46px;
  margin-bottom: 10px;
}

:root[data-theme="classroom"] .item:hover {
  background: rgba(255, 241, 154, .16);
}

:root[data-theme="classroom"] .item-body {
  line-height: 1.7;
}

:root[data-theme="classroom"] .strike-wrap {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: .025em;
}

/* 项号：红笔编号 */
:root[data-theme="classroom"] .no {
  width: 2em;
  color: var(--pen-red);
  font: 700 14px/1.7 var(--font-mono);
}

/* 勾选框：手绘小圆圈 */
:root[data-theme="classroom"] .state-btn {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  color: transparent;
  border: 1.7px solid var(--ink);
  border-radius: 50%;
  background: var(--paper-card);
}

:root[data-theme="classroom"] .state-btn:hover {
  transform: rotate(-5deg) scale(1.08);
}

/* 可填项：红笔下划线（在横线上书写） */
:root[data-theme="classroom"] .item-input {
  color: var(--ink);
  border: 0;
  border-bottom: 1.6px solid var(--pen-red);
  border-radius: 0;
  background: transparent;
  transform: rotate(-.15deg);
  border-style: dashed;
}

:root[data-theme="classroom"] .item-input:focus {
  border-bottom-color: var(--ink);
  outline: 0px dashed var(--pen-red);
  outline-offset: 3px;
}

:root[data-theme="classroom"] .item-input::placeholder,
:root[data-theme="classroom"] .diary-input::placeholder {
  color: var(--ink-faint);
}

/* 完成 = 绿荧光压一道 + 绿笔划线 + 绿勾 */
:root[data-theme="classroom"] .item.st-done {
  opacity: .72;
  background: linear-gradient(transparent 32%, var(--hi-green) 32%, var(--hi-green) 76%, transparent 76%);
}

:root[data-theme="classroom"] .item.st-done .state-btn {
  color: var(--pen-green);
  border-color: var(--pen-green);
  background: var(--paper-card);
}

:root[data-theme="classroom"] .item.st-done .strike-wrap::after {
  height: 1.8px;
  background: var(--pen-green);
  transform: rotate(-.4deg);
}

/* 未完成 = 红色左封边 + 右上「待订正」红批注（无脉冲动画，§13） */
:root[data-theme="classroom"] .item.st-undone {
  padding-left: 12px;
  background: rgba(216, 75, 87, .10);
  box-shadow: inset 3px 0 0 var(--pen-red);
}

:root[data-theme="classroom"] .item.st-undone::after {
  content: '待订正';
  position: absolute;
  right: 6px;
  top: -8px;
  padding: 0 5px;
  color: var(--pen-red);
  background: var(--paper);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--pen-red);
  border-radius: 6px 4px 7px 3px;
  transform: rotate(2deg);
}

:root[data-theme="classroom"] .item.st-undone .state-btn {
  color: var(--pen-red);
  border-color: var(--pen-red);
  animation: none;
}

:root[data-theme="classroom"] .item.st-undone .no {
  color: var(--pen-red);
}

/* 被免 = 紫笔虚线圈 + 紫划线（去掉基础层流光/彩虹） */
:root[data-theme="classroom"] .item.st-exempt {
  opacity: .78;
}

:root[data-theme="classroom"] .item.st-exempt::before {
  display: none;
}

:root[data-theme="classroom"] .item.st-exempt .state-btn {
  color: var(--pen-purple);
  border: 1.8px dashed var(--pen-purple);
}

:root[data-theme="classroom"] .item.st-exempt .strike-wrap {
  color: var(--ink-soft);
}

:root[data-theme="classroom"] .item.st-exempt .strike-wrap::after {
  height: 1.8px;
  background: var(--pen-purple);
  animation: none;
  transform: rotate(.4deg);
}

/* ---------- 日结 · 日记：白纸上铺 32px 横线，逐行书写 ---------- */
:root[data-theme="classroom"] .diary {
  margin-top: 32px;
}

:root[data-theme="classroom"] .diary-label {
  justify-content: flex-start;
  margin-bottom: 9px;
  color: var(--pen-red);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .16em;
  transform: rotate(-.3deg);
}

:root[data-theme="classroom"] .diary-label::before {
  content: '※ ';
}

:root[data-theme="classroom"] .diary-rule {
  display: none;
}

:root[data-theme="classroom"] .diary-input {
  min-height: 116px;
  padding: 6px 14px 8px;
  color: var(--ink);
  border: var(--line-w) solid var(--ink-25);
  border-radius: 7px 5px 8px 6px;
  background-color: var(--paper-card);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--rule) 31px, var(--rule) 32px);
  background-attachment: local;
  background-position: 0 6px;
  line-height: 32px;
  letter-spacing: .04em;
  box-shadow: none;
}

/* ---------- 周六：讲义式放大，标题黄荧光 + 红「重点」 ---------- */
:root[data-theme="classroom"] .sat-title {
  display: table;
  margin: 26px auto 12px;
  padding: 0 8px;
  color: var(--ink);
  font-size: clamp(26px, 4vw, 32px);
  letter-spacing: .1em;
  text-indent: 0;
  background: linear-gradient(transparent 58%, var(--hi-yellow) 58%, var(--hi-yellow) 92%, transparent 92%);
}

:root[data-theme="classroom"] .sat-title::before {
  content: '★';
  margin: 0 8px 0 0;
  color: var(--pen-red);
  font-size: .58em;
  vertical-align: .28em;
  letter-spacing: 0;
}

:root[data-theme="classroom"] .sat-title::after {
  content: '重点';
  margin-left: 8px;
  color: var(--pen-red);
  font-size: 12px;
  vertical-align: 9px;
  letter-spacing: 0;
  text-indent: 0;
}

:root[data-theme="classroom"] .sat-items .item {
  padding-top: 11px;
  padding-bottom: 11px;
}

:root[data-theme="classroom"] .sat-items .state-btn {
  width: 32px;
  height: 32px;
}

:root[data-theme="classroom"] .sat-items .strike-wrap {
  font-size: clamp(18px, 2.5vw, 22px);
}

:root[data-theme="classroom"] .sat-items .no {
  font-size: 17px;
}

/* ============================================================
 * 周视图：桌面双栏，像两栏课堂摘要（§6.3）；移动端回单栏
 * ============================================================ */
:root[data-theme="classroom"] .week-view {
  max-width: 1000px;
}

:root[data-theme="classroom"] .ov-head {
  margin: 4px 0 20px;
}

:root[data-theme="classroom"] .ov-title {
  padding: 0 5px;
  color: var(--ink);
  font-size: 21px;
  font-weight: 700;
  background: linear-gradient(transparent 58%, var(--hi-yellow) 58%, var(--hi-yellow) 92%, transparent 92%);
}

:root[data-theme="classroom"] .ov-arrow {
  color: var(--ink);
  border: var(--line-w) solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}

:root[data-theme="classroom"] .ov-arrow:hover:not(:disabled) {
  color: var(--pen-red);
  border-color: var(--pen-red);
  background: var(--paper);
}

:root[data-theme="classroom"] .week-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

/* 知识框：细手绘边、不规则圆角、纸色底、无/极淡阴影（§8.1） */
:root[data-theme="classroom"] .week-card {
  min-height: 92px;
  padding: 14px 16px;
  border: var(--line-w) solid var(--ink);
  border-radius: var(--wobble-a);
  background: var(--paper-card);
  box-shadow: none;
}

:root[data-theme="classroom"] .week-card:nth-child(even) {
  border-radius: var(--wobble-b);
}

:root[data-theme="classroom"] .week-card:hover {
  transform: translateY(-2px) rotate(-.15deg);
  box-shadow: var(--box-shadow);
}

:root[data-theme="classroom"] .week-card.sunday-card {
  grid-column: 1 / -1;
  border-color: var(--pen-red);
  background: linear-gradient(to right, rgba(216, 75, 87, .07), var(--paper-card) 45%);
}

:root[data-theme="classroom"] .wc-dow {
  color: var(--ink);
  font-weight: 700;
}

:root[data-theme="classroom"] .wc-date,
:root[data-theme="classroom"] .wc-ratio,
:root[data-theme="classroom"] .ov-hint,
:root[data-theme="classroom"] .wc-sunday-line {
  color: var(--ink-soft);
}

:root[data-theme="classroom"] .wc-sunday-line b {
  color: var(--ink);
}

:root[data-theme="classroom"] .wc-sunday-line b.bad {
  color: var(--pen-red);
}

:root[data-theme="classroom"] .wc-dot {
  border: 1.4px solid var(--ink);
  background: var(--paper);
}

:root[data-theme="classroom"] .wc-dot.d-done {
  background: var(--pen-green);
  border-color: var(--pen-green);
}

:root[data-theme="classroom"] .wc-dot.d-undone {
  background: var(--paper);
  border: 2px solid var(--pen-red);
}

:root[data-theme="classroom"] .wc-dot.d-exempt {
  background: var(--paper);
  border: 1.6px dashed var(--pen-purple);
}

:root[data-theme="classroom"] .wc-dot.d-blank {
  border-style: dashed;
  border-color: var(--ink-25);
}

:root[data-theme="classroom"] .wc-exempt {
  color: var(--pen-purple);
}

:root[data-theme="classroom"] .mini-stamp {
  color: var(--pen-red);
  border: 1px solid var(--pen-red);
}

/* ============================================================
 * 月视图：一整页横线纸 + 红页边，做暑期总览
 * ============================================================ */
:root[data-theme="classroom"] .month-view {
  max-width: 940px;
  padding: 30px 28px 32px 74px;
  border: 1px solid var(--ink-15);
  border-radius: 8px 6px 9px 7px;
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, transparent 52px, var(--page-margin) 52px, var(--page-margin) 54px, transparent 54px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--rule) 31px, var(--rule) 32px);
  box-shadow: var(--paper-shadow);
}

:root[data-theme="classroom"] .month-view::before {
  content: '本学期总览 ★';
  display: table;
  margin: -20px 0 8px -14px;
  padding: 0 5px;
  color: var(--pen-red);
  background: var(--paper);
  font-size: 12px;
  transform: rotate(-2deg);
}

:root[data-theme="classroom"] .month-view .ov-big-title {
  display: table;
  margin: 4px auto 5px;
  padding: 0 6px;
  color: var(--ink);
  font-size: clamp(23px, 4vw, 28px);
  letter-spacing: .16em;
  text-indent: .16em;
  background: linear-gradient(transparent 58%, var(--hi-yellow) 58%, var(--hi-yellow) 92%, transparent 92%);
}

:root[data-theme="classroom"] .ov-sub {
  color: var(--ink-soft);
}

:root[data-theme="classroom"] .month-summary {
  gap: 12px;
}

:root[data-theme="classroom"] .month-summary-card {
  border: var(--line-w) solid var(--ink-25);
  border-radius: var(--wobble-a);
  background: var(--paper-card);
  box-shadow: none;
}

:root[data-theme="classroom"] .month-summary-card:nth-child(2) {
  background: color-mix(in srgb, var(--hi-yellow) 35%, var(--paper-card));
}

:root[data-theme="classroom"] .month-summary-card:nth-child(3) {
  border-color: var(--pen-green);
}

:root[data-theme="classroom"] .month-summary-value {
  color: var(--ink);
}

:root[data-theme="classroom"] .month-summary-label {
  color: var(--ink-soft);
}

:root[data-theme="classroom"] .month-grid {
  gap: 11px 8px;
  padding-top: 6px;
}

:root[data-theme="classroom"] .mg-head {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--page-margin);
  text-underline-offset: 4px;
}

:root[data-theme="classroom"] .mg-week-label {
  color: var(--pen-red);
  font-family: var(--font-mono);
}

:root[data-theme="classroom"] .mg-week-seal {
  color: var(--pen-red);
  border: 1px solid var(--pen-red);
}

/* 日圈：完成度 = 黄荧光填充 */
:root[data-theme="classroom"] .mg-circle {
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--hi-yellow) calc(var(--fill) - 1%), var(--paper-card) var(--fill));
  box-shadow: none;
}

:root[data-theme="classroom"] .mg-cell:nth-child(3n) .mg-circle {
  transform: rotate(1.2deg);
}

:root[data-theme="classroom"] .mg-cell:nth-child(3n+1) .mg-circle {
  transform: rotate(-1.2deg);
}

:root[data-theme="classroom"] .mg-cell:hover .mg-circle {
  transform: scale(1.08);
  box-shadow: none;
}

:root[data-theme="classroom"] .mg-circle.all-done {
  color: var(--paper);
  border: 2px solid var(--pen-green);
  background: var(--pen-green);
}

:root[data-theme="classroom"] .mg-circle.all-done::after {
  background: var(--pen-red);
}

:root[data-theme="classroom"] .mg-circle.has-undone {
  color: var(--pen-red);
  border: 2px solid var(--pen-red);
  background: rgba(216, 75, 87, .08);
}

:root[data-theme="classroom"] .mg-circle.exempt {
  color: var(--pen-purple);
  border: 2px dashed var(--pen-purple);
  background: color-mix(in srgb, var(--hi-purple) 50%, var(--paper-card));
}

:root[data-theme="classroom"] .mg-circle.is-sunday {
  color: var(--ink-soft);
  border-style: dashed;
  background: var(--paper);
}

:root[data-theme="classroom"] .mg-circle.is-sunday.week-full {
  color: var(--pen-red);
  border-color: var(--pen-red);
}

:root[data-theme="classroom"] .mg-month-mark {
  color: var(--pen-red);
  font-weight: 700;
}

:root[data-theme="classroom"] .mg-legend {
  color: var(--ink-soft);
}

:root[data-theme="classroom"] .lg {
  border: 1.4px solid var(--ink);
}

:root[data-theme="classroom"] .lg-half {
  background: radial-gradient(circle closest-side, var(--hi-yellow) 55%, transparent 56%);
}

:root[data-theme="classroom"] .lg-done {
  border-color: var(--pen-green);
  border-width: 1.6px;
}

:root[data-theme="classroom"] .lg-undone {
  border-color: var(--pen-red);
}

:root[data-theme="classroom"] .lg-exempt {
  border-style: dashed;
  border-color: var(--pen-purple);
}

/* ============================================================
 * 周日 · 课堂小结 / 数字卡 / 条形分布 / 七日墨点
 * ============================================================ */
:root[data-theme="classroom"] .sunday-title {
  color: var(--ink);
  letter-spacing: .1em;
  text-indent: 0;
}

:root[data-theme="classroom"] .stamp.full-stamp {
  color: var(--pen-red);
  border: 2px solid var(--pen-red);
  border-radius: var(--wobble-a);
  box-shadow: none;
}

:root[data-theme="classroom"] .stat-cell {
  border: var(--line-w) solid var(--ink);
  border-radius: var(--wobble-a);
  background: var(--paper-card);
  box-shadow: none;
}

:root[data-theme="classroom"] .stat-cell:nth-child(even) {
  border-radius: var(--wobble-b);
}

:root[data-theme="classroom"] .stat-cell.bad {
  border-color: var(--pen-red);
}

:root[data-theme="classroom"] .stat-cell.good {
  border-color: var(--pen-green);
}

:root[data-theme="classroom"] .stat-cell.luck {
  border-color: var(--pen-purple);
}

:root[data-theme="classroom"] .stat-value {
  color: var(--ink);
}

:root[data-theme="classroom"] .stat-cell.bad .stat-value {
  color: var(--pen-red);
}

:root[data-theme="classroom"] .stat-cell.luck .stat-value {
  color: var(--pen-purple);
}

:root[data-theme="classroom"] .stat-label,
:root[data-theme="classroom"] .sec-text {
  color: var(--ink-soft);
}

:root[data-theme="classroom"] .stat-sec-title .sec-text {
  padding: 0 5px;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: .16em;
  text-indent: .16em;
  background: linear-gradient(transparent 58%, var(--hi-yellow) 58%, var(--hi-yellow) 92%, transparent 92%);
}

:root[data-theme="classroom"] .sec-rule {
  background: var(--rule);
}

:root[data-theme="classroom"] .bar-track {
  height: 11px;
  border: 1.4px solid var(--ink);
  border-radius: 2px;
  background: var(--paper-card);
}

:root[data-theme="classroom"] .bar-fill {
  background: var(--ink);
}

:root[data-theme="classroom"] .bar-row:nth-child(even) .bar-fill {
  background: var(--pen-green);
}

:root[data-theme="classroom"] .bar-name,
:root[data-theme="classroom"] .bar-num {
  color: var(--ink-soft);
}

:root[data-theme="classroom"] .wd-circle {
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--hi-yellow) calc(var(--fill) - 1%), var(--paper-card) var(--fill));
}

:root[data-theme="classroom"] .wd-circle.all-done {
  color: var(--paper);
  border: 2px solid var(--pen-green);
  background: var(--pen-green);
}

:root[data-theme="classroom"] .wd-circle.has-undone {
  color: var(--pen-red);
  border: 2px solid var(--pen-red);
  background: rgba(216, 75, 87, .08);
}

:root[data-theme="classroom"] .wd-circle.is-sunday {
  color: var(--ink-soft);
  border-style: dashed;
}

:root[data-theme="classroom"] .wd-label {
  color: var(--ink-soft);
}

/* ============================================================
 * 总评 / 赠语集 / 覆盖层 / 模态
 * ============================================================ */
:root[data-theme="classroom"] .overlay-mask,
:root[data-theme="classroom"] .ink-modal-mask {
  background: rgba(255, 253, 245, .86);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

:root[data-theme="classroom"] .overlay-sheet {
  padding: 32px 32px 46px 92px;
}

:root[data-theme="classroom"] .overlay-title {
  display: table;
  margin: 6px auto 4px;
  padding: 0 6px;
  color: var(--ink);
  letter-spacing: .18em;
  text-indent: .18em;
  background: linear-gradient(transparent 58%, var(--hi-yellow) 58%, var(--hi-yellow) 92%, transparent 92%);
}

:root[data-theme="classroom"] .overlay-sub,
:root[data-theme="classroom"] .quiet-note {
  color: var(--ink-soft);
}

:root[data-theme="classroom"] .overlay-close {
  color: var(--pen-red);
  border: var(--line-w) solid var(--pen-red);
  border-radius: 50%;
  background: var(--paper);
}

:root[data-theme="classroom"] .week-seal {
  color: var(--ink-faint);
  border: 1.4px solid var(--ink-25);
  border-radius: 6px 4px 7px 5px;
}

:root[data-theme="classroom"] .week-seal.sealed {
  color: var(--pen-red);
  border-color: var(--pen-red);
  box-shadow: none;
}

:root[data-theme="classroom"] .full-weeks-num {
  color: var(--ink-soft);
}

:root[data-theme="classroom"] .seg-btn {
  color: var(--ink);
  border-color: var(--ink);
}

:root[data-theme="classroom"] .seg-btn.active {
  color: var(--paper);
  border-color: var(--ink);
  background: var(--ink);
}

:root[data-theme="classroom"] .luck-tier {
  color: var(--ink-soft);
}

:root[data-theme="classroom"] .tier-name {
  color: var(--pen-purple);
}

:root[data-theme="classroom"] .tier-name.celestial {
  color: var(--pen-purple);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  animation: none;
}

:root[data-theme="classroom"] .collect-card {
  border: var(--line-w) solid var(--ink);
  border-radius: var(--wobble-a);
  background: var(--paper-card);
  box-shadow: none;
}

:root[data-theme="classroom"] .collect-card:nth-child(even) {
  border-radius: var(--wobble-b);
}

:root[data-theme="classroom"] .collect-text::before {
  color: var(--pen-red);
}

:root[data-theme="classroom"] .collect-date {
  color: var(--ink-soft);
}

:root[data-theme="classroom"] .collect-unlike {
  color: var(--pen-red);
}

:root[data-theme="classroom"] .ink-modal {
  color: var(--ink);
  border: var(--line-w) solid var(--ink);
  border-radius: 8px 6px 9px 7px;
  background-color: var(--paper-card);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(201, 219, 239, .55) 31px, rgba(201, 219, 239, .55) 32px);
  box-shadow: var(--paper-shadow);
}

:root[data-theme="classroom"] .ink-modal-body b {
  color: var(--pen-red);
}

:root[data-theme="classroom"] .modal-note {
  color: var(--ink-soft);
}

:root[data-theme="classroom"] .ink-btn {
  color: var(--ink);
  border: var(--line-w) solid var(--ink);
  border-radius: var(--wobble-b);
  background: var(--paper-card);
}

:root[data-theme="classroom"] .ink-btn:hover {
  background: rgba(255, 241, 154, .3);
}

:root[data-theme="classroom"] .ink-btn.primary {
  color: var(--pen-red);
  border-color: var(--pen-red);
}

:root[data-theme="classroom"] .ink-btn.primary:hover {
  color: var(--paper);
  background: var(--pen-red);
}

:root[data-theme="classroom"] .backup-ta {
  color: var(--ink);
  border: var(--line-w) solid var(--ink-25);
  background: var(--paper-card);
  font-family: var(--font-mono);
}

:root[data-theme="classroom"] .about-title {
  color: var(--ink);
}

:root[data-theme="classroom"] .about-ps {
  color: var(--pen-red);
}

:root[data-theme="classroom"] .about-rule {
  background: var(--ink-15);
}

/* ============================================================
 * 工具栏 / 右上角 / 层级点 / toast —— 页边手写索引，非产品化胶囊
 * ============================================================ */
:root[data-theme="classroom"] #toolbar-btn {
  width: 40px;
  height: 40px;
  color: var(--ink);
  border: var(--line-w) solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: none;
  transform: rotate(-2deg);
}

:root[data-theme="classroom"] #toolbar-btn::after {
  content: none;
}

:root[data-theme="classroom"] #toolbar-btn:hover {
  transform: rotate(-1deg) scale(1.04);
}

:root[data-theme="classroom"] #toolbar-btn.active {
  border-color: var(--pen-red);
  transform: rotate(88deg);
}

:root[data-theme="classroom"] .tb-stroke {
  background: var(--ink);
  border-radius: 0;
}

:root[data-theme="classroom"] #toolbar-btn.active .tb-stroke {
  background: var(--pen-red);
}

:root[data-theme="classroom"] .tb-list {
  min-width: 224px;
  padding: 12px 10px;
  border: var(--line-w) solid var(--ink);
  border-radius: 8px 6px 9px 7px;
  background-color: var(--paper-card);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(201, 219, 239, .6) 31px, rgba(201, 219, 239, .6) 32px);
  box-shadow: var(--paper-shadow);
}

:root[data-theme="classroom"] .tb-list::before {
  content: '课堂笔记 · 目录';
  display: table;
  margin: 0 4px 8px;
  padding: 0 5px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(transparent 56%, var(--hi-yellow) 56%, var(--hi-yellow) 92%, transparent 92%);
}

:root[data-theme="classroom"] .tb-group {
  position: relative;
  padding: 22px 4px 4px;
}

:root[data-theme="classroom"] .tb-group+.tb-group {
  margin-top: 6px;
  border-top: 1.4px dashed var(--rule);
}

:root[data-theme="classroom"] .tb-group-title {
  display: block;
  position: absolute;
  left: 5px;
  top: 3px;
  color: var(--pen-red);
  font-size: 11px;
  font-weight: 700;
  transform: rotate(-1.2deg);
}

:root[data-theme="classroom"] .tb-group-browse .tb-group-title::before {
  content: '一、浏览课程';
}

:root[data-theme="classroom"] .tb-group-record .tb-group-title::before {
  content: '二、学习记录';
}

:root[data-theme="classroom"] .tb-group-tools .tb-group-title::before {
  content: '三、文具与设置';
}

:root[data-theme="classroom"] .tb-item {
  color: var(--ink);
  border-radius: 4px;
}

:root[data-theme="classroom"] #toolbar-panel.open .tb-item:hover {
  color: var(--pen-red);
  background: linear-gradient(transparent 22%, var(--hi-yellow) 22%, var(--hi-yellow) 84%, transparent 84%);
  transform: translateX(4px);
}

:root[data-theme="classroom"] .tb-icon {
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}

:root[data-theme="classroom"] .tb-item:hover .tb-icon {
  color: var(--paper);
  border-color: var(--pen-red);
  background: var(--pen-red);
}

/* 右上角 = 红笔画的重点圈 */
:root[data-theme="classroom"] #corner-btn {
  width: 42px;
  height: 42px;
  color: var(--pen-red);
  border: 2px solid var(--pen-red);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: none;
  font-weight: 700;
  transform: rotate(3deg);
}

:root[data-theme="classroom"] #corner-btn::before {
  content: none;
}

:root[data-theme="classroom"] #corner-btn::after {
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 3px;
  border-bottom: var(--line-w) solid var(--pen-red);
  transform: rotate(-2deg);
}

:root[data-theme="classroom"] #corner-btn:hover {
  transform: rotate(1deg) scale(1.07);
}

:root[data-theme="classroom"] #corner-btn.is-return {
  color: var(--paper);
  background: var(--pen-red);
}

/* 桌面翻页箭头 = 红笔手绘方框（前一天 / 后一天） */
:root[data-theme="classroom"] .edge-arrow {
  width: 40px;
  height: 60px;
  line-height: 56px;
  color: var(--ink);
  border: var(--line-w) solid var(--ink);
  border-radius: var(--wobble-b);
  background: var(--paper);
  box-shadow: var(--box-shadow);
}

:root[data-theme="classroom"] #edge-prev {
  left: 10px;
  transform: translateY(-50%) rotate(-1.4deg);
}

:root[data-theme="classroom"] #edge-next {
  right: 10px;
  transform: translateY(-50%) rotate(1.4deg);
}

:root[data-theme="classroom"] .edge-arrow:hover {
  color: var(--pen-red);
  border-color: var(--pen-red);
  background: var(--paper);
}

:root[data-theme="classroom"] #edge-prev:hover {
  transform: translateY(-50%) rotate(-1.4deg) scale(1.06);
}

:root[data-theme="classroom"] #edge-next:hover {
  transform: translateY(-50%) rotate(1.4deg) scale(1.06);
}

/* 底部层级切换 */
:root[data-theme="classroom"] #level-dots {
  gap: 7px;
  padding: 6px 9px;
  border: var(--line-w) solid var(--ink);
  border-radius: var(--wobble-b);
  background: var(--paper);
  box-shadow: none;
  transform: translateX(-50%) rotate(.25deg);
}

:root[data-theme="classroom"] #level-dots::before {
  content: '视图';
  position: absolute;
  left: -9px;
  top: -11px;
  padding: 0 3px;
  color: var(--pen-red);
  background: var(--paper);
  font-size: 10px;
  transform: rotate(-6deg);
}

:root[data-theme="classroom"] .ld {
  width: 30px;
  height: 30px;
  color: var(--ink);
  border: var(--line-w) solid var(--ink);
  border-radius: 50%;
  background: var(--paper-card);
  font-weight: 700;
}

:root[data-theme="classroom"] .ld.active {
  color: var(--ink);
  border-width: 2.4px;
  background: linear-gradient(transparent 12%, var(--hi-yellow) 12%, var(--hi-yellow) 88%, transparent 88%);
  transform: translateY(-2px);
}

:root[data-theme="classroom"] #toast {
  color: var(--ink);
  border: var(--line-w) solid var(--ink);
  border-radius: var(--wobble-a);
  background: color-mix(in srgb, var(--hi-yellow) 44%, var(--paper-card));
  box-shadow: var(--box-shadow);
}

:root[data-theme="classroom"] #toast.save-error {
  color: var(--pen-red);
  border-color: var(--pen-red);
  background: var(--paper-card);
}

/* ============================================================
 * 摸鱼大转盘 —— 画布型页面，允许点阵坐标纸
 * ============================================================ */
:root[data-theme="classroom"] .wheel-page {
  padding: 18px;
  border: var(--line-w) solid var(--ink);
  border-radius: 8px 6px 9px 7px;
  background-color: var(--paper-card);
  background-image: radial-gradient(rgba(201, 219, 239, .85) .8px, transparent .8px);
  background-size: 26px 26px;
  box-shadow: none;
}

:root[data-theme="classroom"] .wheel-box::before {
  content: '今天转什么？';
  position: absolute;
  left: -4px;
  top: -10px;
  z-index: 7;
  padding: 0 4px;
  color: var(--pen-red);
  background: var(--paper);
  font-size: 12px;
  transform: rotate(-5deg);
}

:root[data-theme="classroom"] .wheel-canvas {
  filter: drop-shadow(2px 4px 0 rgba(36, 61, 112, .12));
}

:root[data-theme="classroom"] .wheel-pointer {
  border-top-color: var(--pen-red);
  filter: none;
}

:root[data-theme="classroom"] .wheel-pointer::after {
  background: var(--ink);
}

:root[data-theme="classroom"] .wheel-hub {
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: linear-gradient(transparent 16%, var(--hi-yellow) 16%, var(--hi-yellow) 84%, transparent 84%);
  box-shadow: none;
}

:root[data-theme="classroom"] .wheel-hub:hover {
  color: var(--pen-red);
  border-color: var(--pen-red);
  box-shadow: none;
}

:root[data-theme="classroom"] .wheel-chance {
  color: var(--ink-soft);
}

:root[data-theme="classroom"] .wheel-chance b {
  color: var(--pen-red);
}

:root[data-theme="classroom"] .paper-box {
  padding: 11px;
  border: var(--line-w) solid var(--ink);
  border-radius: var(--wobble-b);
  background: color-mix(in srgb, var(--hi-yellow) 34%, var(--paper-card));
}

:root[data-theme="classroom"] .prob-toggle {
  color: var(--pen-red);
  border-bottom: var(--line-w) solid var(--pen-red);
}

:root[data-theme="classroom"] .prob-list b {
  color: var(--ink);
}

:root[data-theme="classroom"] .prob-list.open {
  padding: 10px;
  border: 1.4px dashed var(--ink);
  border-radius: 5px;
  background: var(--paper-card);
}

:root[data-theme="classroom"] .prob-foot {
  color: var(--pen-red);
}

:root[data-theme="classroom"] .result-star {
  color: var(--pen-purple);
}

:root[data-theme="classroom"] .wheel-result.hit {
  color: var(--pen-red);
  background: linear-gradient(transparent 58%, var(--hi-yellow) 58%, var(--hi-yellow) 92%, transparent 92%);
}

:root[data-theme="classroom"] .hist-line {
  border-bottom-color: var(--rule);
  color: var(--ink-soft);
}

:root[data-theme="classroom"] .hist-line.hit .hist-label {
  color: var(--pen-red);
}

:root[data-theme="classroom"] .hist-extra {
  color: var(--pen-purple);
  border: 1px solid var(--pen-purple);
}

/* ============================================================
 * 响应式（§12）：双栏→单栏，缩小页边，正文≥14px，去装饰
 * ============================================================ */
@media (max-width: 820px) {

  :root[data-theme="classroom"] #book>.page,
  :root[data-theme="classroom"] .flip-leaf {
    left: 10px;
    right: 10px;
  }

  /* 顶部留白：避开固定的「目录」与「课堂小结」圈按钮，勿遮正文 */
  :root[data-theme="classroom"] .page {
    padding: 60px 26px 48px 78px;
  }

  :root[data-theme="classroom"] #weekview,
  :root[data-theme="classroom"] #monthview {
    padding-top: calc(64px + env(safe-area-inset-top, 0px));
  }

  :root[data-theme="classroom"] .week-cards {
    grid-template-columns: 1fr;
  }

  :root[data-theme="classroom"] .week-card.sunday-card {
    grid-column: auto;
  }

  :root[data-theme="classroom"] .month-view {
    padding-left: 60px;
  }
}

@media (max-width: 560px) {
  :root[data-theme="classroom"] body {
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(201, 219, 239, .4) 31px, rgba(201, 219, 239, .4) 32px);
  }

  :root[data-theme="classroom"] .paper,
  :root[data-theme="classroom"] .overlay-sheet {
    background-image:
      linear-gradient(to right, transparent 34px, var(--page-margin) 34px, var(--page-margin) 36px, transparent 36px),
      repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--rule) 31px, var(--rule) 32px);
  }

  :root[data-theme="classroom"] .page {
    padding: 60px 14px 44px 50px;
    font-size: 15px;
  }

  :root[data-theme="classroom"] .date-title {
    font-size: 24px;
  }

  :root[data-theme="classroom"] .blessing {
    max-width: calc(100% - 6px);
    margin-top: 22px;
  }

  :root[data-theme="classroom"] .exempt-banner {
    width: 100%;
  }

  :root[data-theme="classroom"] .strike-wrap {
    font-size: 15px;
  }

  /* 未完成批注移到正文下方（§12 批注移动到正文下方） */
  :root[data-theme="classroom"] .item.st-undone::after {
    position: static;
    margin-left: auto;
    align-self: flex-start;
    background: transparent;
    border-color: var(--pen-red);
    font-size: 10px;
    white-space: nowrap;
    transform: none;
  }

  :root[data-theme="classroom"] .sat-items .state-btn {
    width: 28px;
    height: 28px;
  }

  :root[data-theme="classroom"] .sat-items .strike-wrap {
    font-size: 18px;
  }

  :root[data-theme="classroom"] .overlay-sheet {
    padding: 26px 12px 42px 50px;
  }

  :root[data-theme="classroom"] .month-view {
    padding: 22px 8px 26px;
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--rule) 31px, var(--rule) 32px);
  }

  :root[data-theme="classroom"] .month-view::before {
    margin-left: 2px;
  }

  :root[data-theme="classroom"] .month-grid {
    grid-template-columns: 22px repeat(7, 1fr);
    gap: 8px 3px;
  }

  :root[data-theme="classroom"] .mg-circle {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }

  :root[data-theme="classroom"] .mg-week-label {
    width: 22px;
    min-height: 34px;
  }
}

/* 减少动态：关掉一切手绘微旋与位移 */
@media (prefers-reduced-motion: reduce) {

  :root[data-theme="classroom"] .blessing,
  :root[data-theme="classroom"] .exempt-banner,
  :root[data-theme="classroom"] .item,
  :root[data-theme="classroom"] .week-card,
  :root[data-theme="classroom"] .mg-circle,
  :root[data-theme="classroom"] #toolbar-btn,
  :root[data-theme="classroom"] #corner-btn,
  :root[data-theme="classroom"] #level-dots,
  :root[data-theme="classroom"] .head-rule,
  :root[data-theme="classroom"] .diary-label,
  :root[data-theme="classroom"] .item-input {
    transform: none !important;
  }
}