/* ==========================================================================
   英语教研 · 墨泓斋  —— 公共底座
   设计母题「批注纸」：墨色纸白 + 朱批红 + 页边批注栏
   两套面向：教研面（默认，教师 / 教研员 / 研究生）、学生面（[data-facet="student"]）
   字体自持：HarmonyOS Sans SC 子集（font/font.css，31 条自持声明），不引外部字体服务
   ========================================================================== */

/* ---------- 1. 令牌 ---------- */
:root {
    --ink: #16262c;
    --ink-2: #33474f;
    --ink-3: #6b7c82;
    --ink-4: #98a5a8;
    --paper: #f5f6f3;
    --card: var(--mz-surface-card);
    --line: #dadfd8;
    --line-2: #ebeee7;
    --teal: #0f6e68;
    --teal-ink: #0b544f;
    --teal-soft: #e2efec;
    --red: #b3271e;
    --red-soft: #f8e8e5;
    --amber: #a9720f;
    --amber-soft: #fbf1dc;
    --shadow-1: 0 1px 2px rgba(22, 38, 44, .06);
    --shadow-2: 0 1px 2px rgba(22, 38, 44, .05), 0 14px 30px -18px rgba(22, 38, 44, .28);
    --shadow-3: 0 24px 60px -24px rgba(22, 38, 44, .38);

    --r-s: 3px;
    --r-m: 6px;
    --r-l: 12px;
    --r-pill: 999px;

    --maxw: 1280px;
    --rail-w: 196px;
    --gut: 32px;
    --top-h: 58px;

    /* 字体族（字体层重整后的口径，声明见 font/font.css）：
       ① 站内自持的 HarmonyOS Sans SC 只挂 Regular(400)，全站字重只用 400（正文）
          与 700（加粗）两档，加粗由浏览器基于同一套字形合成——子集未覆盖的字
          才不会再跳字形、同一字块的粗细也才一致；
       ② 每条令牌中段都补了「汉字无衬线回退」（雅黑 / 苹方 / 思源），rare 字落到
          无衬线，不再出现早年「一半无衬线、一半宋体」的同块混排；
       ③ --f-serif 保留令牌名（多处组件与页面内联在引），值与 --f-sans 相同：
          标题与正文同族同链，「书卷气」改由字号 / 字距 / 颜色承担；
       ④ 代码块另用 --f-code 走真等宽族（Latin 等宽，汉字仍走无衬线回退）。
       字号 / 行高 / 字距等可读性基线见文末「17. 字体接入与可读性」。 */
    --f-sans: "HarmonyOS Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", sans-serif;
    --f-serif: var(--f-sans);
    --f-mono: "HarmonyOS Sans SC", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
        "Microsoft YaHei", "PingFang SC", "Noto Sans SC", monospace;
    --f-code: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
        "Microsoft YaHei", "PingFang SC", "Noto Sans SC", monospace;

    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* 学生面：更亮的青绿、更大的圆角与数字，投影与手机上都更清楚 */
[data-facet="student"] {
    --ink: #102528;
    --ink-2: #2c4748;
    --ink-3: #5f7a79;
    --paper: #f1f8f5;
    --card: var(--mz-surface-card);
    --line: #cfe4dc;
    --line-2: #e6f1ec;
    --teal: #0e9f6e;
    --teal-ink: #0a7a54;
    --teal-soft: #dcf6ec;
    --red: #d9482f;
    --red-soft: #fdeae5;
    --amber: #b4770c;
    --r-s: 6px;
    --r-m: 10px;
    --r-l: 18px;
}

[data-theme="dark"] {
    --ink: #e8eeeb;
    --ink-2: #b9c7c6;
    --ink-3: #86999a;
    --ink-4: #6a7c7e;
    --paper: #0e1719;
    --card: var(--mz-surface-card);
    --line: #2a3a3d;
    --line-2: #213033;
    --teal: #55c9b3;
    --teal-ink: #7fdcc8;
    --teal-soft: #17322f;
    --red: #ef7a6b;
    --red-soft: #35211f;
    --amber: #e0b060;
    --amber-soft: #2f2818;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 34px -20px rgba(0, 0, 0, .8);
    --shadow-3: 0 26px 64px -26px rgba(0, 0, 0, .86);
}

[data-theme="dark"][data-facet="student"] {
    --ink: #e6f4ee;
    --paper: #0c1614;
    --card: var(--mz-surface-card);
    --line: #27423a;
    --teal: #3fd39c;
    --teal-ink: #6fe6b7;
    --teal-soft: #14302a;
}

/* 沉默模式：全站灰白 */
.is-silence {
    filter: grayscale(1);
}

/* ---------- 2. 复位与排版 ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* 锚点落点也要躲开顶栏的渐变模糊带（全站原则，令牌见 mz_theme 的 --mz-sticky-top） */
    scroll-padding-top: calc(var(--mz-sticky-top, calc(var(--mz-topbar-h, 64px) + 28px)) + 8px);
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 15.5px/1.7 var(--f-sans);
    letter-spacing: .01em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.01em;
}

p {
    margin: 0 0 .8em;
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--teal-ink);
    text-decoration: none;
}

a:hover {
    color: var(--teal);
}

img {
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
    border-radius: var(--r-s);
}

::selection {
    background: var(--teal-soft);
}

/* 标题族：令牌名仍叫 --f-serif，值已与 --f-sans 相同（字体层重整后统一无衬线同链）。
   早年「HarmonyOS 打头 + 宋体收尾」的栈会让子集未覆盖的字掉进宋体，
   同一行标题一半无衬线、一半宋体；书卷气改由字号 / 字距 / 颜色承担。 */
.serif,
.hero__title,
.page__title,
.sec__title,
.prose h2,
.prose h3 {
    font-family: var(--f-serif);
    font-weight: 700;
    letter-spacing: .01em;
}

[data-facet="student"] .hero__title,
[data-facet="student"] .page__title,
[data-facet="student"] .sec__title {
    font-family: var(--f-sans);
    font-weight: 700;
    letter-spacing: -.02em;
}

.mono,
.num {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
}

/* ---------- 3. 顶栏 ----------
   页头外壳、品牌位、主导航、右侧动作区的形状与配色，统一由
   /common/css/mz_theme.css 提供（四站同一枚悬浮胶囊），这里不再重复定义。
   本文件只保留本站独有的东西：图标按钮的角标、用户胶囊、主站出口下拉菜单。 */


/* 图标按钮的壳由 /common/css/mz_theme.css 统一（36×36 圆钮 + 17px 图标），
   这里只留本站独有的未读角标。 */
.ibtn__badge {
    position: absolute;
    top: 3px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--r-pill);
    background: var(--red);
    color: #fff;
    font-size: 10.5px;
    line-height: 16px;
    text-align: center;
    font-family: var(--f-mono);
}

.uchip[hidden] {
    display: none;
}

.uchip {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 10px 0 4px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--card);
    cursor: pointer;
    max-width: 168px;
}

.uchip img,
.uchip .uchip__ph {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex: none;
    object-fit: cover;
    background: var(--teal-soft);
    display: grid;
    place-items: center;
    font-size: 12px;
    color: var(--teal-ink);
    font-weight: 700;
}

.uchip span {
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drawer-btn {
    display: none;
}

/* 主站出口下拉 */
.menu {
    position: absolute;
    top: calc(var(--top-h) - 4px);
    right: 20px;
    z-index: 70;
    min-width: 210px;
    padding: 6px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-l);
    box-shadow: var(--shadow-2);
    display: none;
}

.menu.is-open {
    display: block;
}

.menu__i {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--r-m);
    color: var(--ink);
    font-size: 14px;
}

.menu__i:hover {
    background: var(--line-2);
}

.menu__i small {
    color: var(--ink-4);
    font-size: 11.5px;
}

.menu__hr {
    height: 1px;
    margin: 5px 8px;
    background: var(--line-2);
}

/* ---------- 4. 抽屉（移动端） ---------- */
.drawer {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
}

.drawer.is-open {
    display: block;
}

.drawer__scrim {
    position: absolute;
    inset: 0;
    background: rgba(14, 23, 25, .42);
    border: 0;
    padding: 0;
}

.drawer__panel {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(86vw, 340px);
    /* 261101：抽屉是菜单浮层，取浮层档（mz_surface.css），与前台下拉同一浓度 */
    background: var(--mz-surface-float, var(--card));
    -webkit-backdrop-filter: blur(var(--mz-blur-float, 48px)) saturate(var(--mz-blur-float-sat, 180%));
    backdrop-filter: blur(var(--mz-blur-float, 48px)) saturate(var(--mz-blur-float-sat, 180%));
    border-left: 1px solid var(--line);
    padding: 16px;
    overflow: auto;
    animation: slideIn .22s var(--ease);
}

@keyframes slideIn {
    from {
        transform: translateX(14px);
        opacity: .6;
    }
}

.dgroup {
    margin: 14px 0 4px;
    font-size: 11px;
    letter-spacing: .18em;
    color: var(--ink-4);
}

.drawer__a {
    display: block;
    padding: 11px 10px;
    border-radius: var(--r-m);
    color: var(--ink);
    font-size: 15px;
}

.drawer__a:hover {
    background: var(--line-2);
}

.drawer__a[aria-current="page"] {
    background: var(--teal-soft);
    color: var(--teal-ink);
    font-weight: 700;
}

/* ---------- 5. 页面骨架：页边批注栏 + 主栏 ---------- */
.shell {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 20px 72px;
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    gap: var(--gut);
    align-items: start;
}

.rail {
    position: sticky;
    top: calc(var(--top-h) + 26px);
    padding: 26px 18px 26px 0;
    border-right: 1px solid var(--line);
    min-height: 320px;
}

.rail__eyebrow {
    font-size: 11px;
    letter-spacing: .2em;
    color: var(--ink-4);
    margin-bottom: 14px;
}

.rail__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rail__a {
    position: relative;
    display: block;
    padding: 6px 0 6px 14px;
    font-size: 13.5px;
    color: var(--ink-3);
    border-left: 2px solid var(--line);
}

.rail__a:hover {
    color: var(--ink);
}

.rail__a.is-on {
    color: var(--ink);
    border-left-color: var(--red);
    font-weight: 700;
}

.rail__a.is-on::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
}

/* 页边批注：朱批红的手写感说明块 */
.note {
    margin-top: 22px;
    padding: 11px 12px;
    border-left: 2px solid var(--red);
    background: var(--red-soft);
    border-radius: 0 var(--r-m) var(--r-m) 0;
    color: var(--ink-2);
    font-size: 12.5px;
    line-height: 1.65;
}

.note b {
    color: var(--red);
    font-weight: 700;
}

.note__t {
    display: block;
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--red);
    margin-bottom: 4px;
}

.main {
    min-width: 0;
    padding-top: 26px;
}

/* ---------- 6. 页头与小节 ---------- */
.page__head {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 26px;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: .2em;
    color: var(--ink-4);
    margin-bottom: 10px;
}

.eyebrow::before {
    content: "";
    width: 18px;
    height: 1px;
    background: var(--red);
}

.page__title {
    font-size: clamp(24px, 3.4vw, 34px);
}

.page__lead {
    margin-top: 8px;
    color: var(--ink-3);
    font-size: 14.5px;
    max-width: 62ch;
}

.sec {
    margin: 40px 0 0;
}

.sec__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
}

.sec__title {
    font-size: 19px;
}

.sec__more {
    margin-left: auto;
    font-size: 13px;
    color: var(--ink-3);
    white-space: nowrap;
}

.sec__more:hover {
    color: var(--teal);
}

.sec__note {
    color: var(--ink-3);
    font-size: 13px;
}

/* ---------- 7. 容器 ---------- */
.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 20px;
}

.card {
    background: var(--mz-surface-card);
    border: 1px solid var(--mz-line);
    border-radius: var(--mz-radius-l);
    -webkit-backdrop-filter: blur(var(--mz-blur)) saturate(var(--mz-blur-sat));
    backdrop-filter: blur(var(--mz-blur)) saturate(var(--mz-blur-sat));
    box-shadow: var(--mz-shadow);
}

.card__p {
    padding: 18px 20px;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.grid {
    display: grid;
    gap: 14px;
}

.grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.grid--4 {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.split {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 18px;
}

/* ---------- 8. 按钮 ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    background: var(--card);
    color: var(--ink);
    font-size: 14.5px;
    cursor: pointer;
    transition: background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}

.btn:hover {
    border-color: var(--ink-4);
}

.btn:active {
    transform: translateY(1px);
}

.btn[disabled],
.btn.is-busy {
    opacity: .55;
    cursor: not-allowed;
}

.btn--pri {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
    font-weight: 700;
}

.btn--pri:hover {
    background: var(--teal-ink);
    border-color: var(--teal-ink);
    color: #fff;
}

[data-theme="dark"] .btn--pri {
    color: #08191a;
}

.btn--ink {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
    font-weight: 700;
}

.btn--ink:hover {
    color: var(--paper);
    opacity: .9;
}

.btn--mark {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
    font-weight: 700;
}

.btn--mark:hover {
    color: #fff;
    opacity: .92;
}

.btn--quiet {
    background: transparent;
    border-color: transparent;
    color: var(--ink-2);
}

.btn--quiet:hover {
    background: var(--line-2);
}

.btn--sm {
    min-height: 31px;
    padding: 0 11px;
    font-size: 13px;
}

.btn--lg {
    min-height: 46px;
    padding: 0 22px;
    font-size: 16px;
}

.btn--block {
    width: 100%;
}

.btn--danger {
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 40%, var(--line));
}

.btn--danger:hover {
    background: var(--red-soft);
    border-color: var(--red);
}

.btn__spin {
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(1turn);
    }
}

/* ---------- 9. 表单 ---------- */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field__lb {
    font-size: 12.5px;
    color: var(--ink-3);
    letter-spacing: .04em;
}

.field__hint {
    font-size: 12px;
    color: var(--ink-4);
}

.inp,
.sel,
.ta {
    width: 100%;
    min-height: 38px;
    padding: 8px 11px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    font-size: 14.5px;
}

.ta {
    min-height: 92px;
    line-height: 1.65;
    resize: vertical;
}

.inp:focus,
.sel:focus,
.ta:focus {
    border-color: var(--teal);
    outline: none;
    box-shadow: 0 0 0 3px var(--teal-soft);
}

.inp[disabled],
.ta[disabled],
.sel[disabled] {
    background: var(--line-2);
    color: var(--ink-3);
}

.sel {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
        linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
    background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 30px;
}

.ta--mono,
.inp--mono {
    font-family: var(--f-mono);
    font-size: 13.5px;
}

.check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

.check input {
    width: 16px;
    height: 16px;
    accent-color: var(--teal);
}

/* ---------- 10. 芯片 / 标签 / 徽章 ---------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 11px;
    border: 1px dashed var(--line);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--ink-2);
    font-size: 13px;
    cursor: pointer;
}

.chip:hover {
    border-style: solid;
    border-color: var(--teal);
    color: var(--teal-ink);
    background: var(--teal-soft);
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    border-radius: var(--r-pill);
    background: var(--line-2);
    color: var(--ink-3);
    font-size: 11.5px;
    white-space: nowrap;
}

.tag--teal {
    background: var(--teal-soft);
    color: var(--teal-ink);
}

.tag--red {
    background: var(--red-soft);
    color: var(--red);
}

.tag--amber {
    background: var(--amber-soft);
    color: var(--amber);
}

.tag--line {
    background: transparent;
    border: 1px solid var(--line);
}

/* 主视觉的荣誉徽章 */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 13px 5px 10px;
    border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--line));
    border-radius: var(--r-pill);
    background: var(--amber-soft);
    color: var(--amber);
    font-size: 12.5px;
    letter-spacing: .02em;
}

.badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* 分段控件：频道页签、类型筛选 */
.seg {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--line-2);
    border-radius: var(--r-pill);
    flex-wrap: wrap;
}

.seg__a {
    padding: 6px 15px;
    border: 0;
    background: none;
    border-radius: var(--r-pill);
    font-size: 13.5px;
    color: var(--ink-2);
    cursor: pointer;
    white-space: nowrap;
}

.seg__a:hover {
    color: var(--ink);
}

.seg__a.is-on {
    background: var(--card);
    color: var(--ink);
    font-weight: 700;
    box-shadow: var(--shadow-1);
}

.seg__a small {
    font-size: 11px;
    color: var(--ink-4);
    margin-left: 4px;
}

/* ---------- 11. 表格 ---------- */
.tw {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    background: var(--card);
}

table.tb {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.tb th,
.tb td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line-2);
    white-space: nowrap;
}

.tb th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--line-2);
    color: var(--ink-2);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .04em;
}

.tb tbody tr:last-child td {
    border-bottom: 0;
}

.tb tbody tr:hover td {
    background: color-mix(in srgb, var(--teal-soft) 40%, transparent);
}

.tb td.wrap-cell {
    white-space: normal;
    min-width: 220px;
}

.tb .num {
    text-align: right;
}

/* ---------- 12. 提示条 / 空态 / 骨架 ---------- */
.hint {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    /* 与上一块（卡片 / 列表 / 按钮行）之间固定留一口气：24px。
       提示条常常是某个 .sec 里的唯一子元素，而 .sec:first-of-type 的
       margin-top:0 会把分节节奏吃掉，看起来就像「贴着上面的卡片」，
       所以间距由提示条自己带；外层 .sec 有 48px 节奏时，两者按外边距
       折叠取大值，不会叠成双份。 */
    margin-top: 24px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--teal);
    border-radius: var(--r-m);
    background: var(--card);
    font-size: 13.5px;
    color: var(--ink-2);
}

.hint--warn {
    border-left-color: var(--amber);
    background: var(--amber-soft);
}

.hint--err {
    border-left-color: var(--red);
    background: var(--red-soft);
}

.hint b {
    font-weight: 700;
    color: var(--ink);
}

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 20px;
    border: 1px dashed var(--line);
    border-radius: var(--r-l);
    background: var(--card);
    text-align: center;
}

.empty__k {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--line-2);
    color: var(--ink-3);
}

.empty__k svg {
    width: 21px;
    height: 21px;
}

.empty__t {
    font-size: 15px;
    font-weight: 700;
}

.empty__d {
    font-size: 13px;
    color: var(--ink-3);
    max-width: 44ch;
}

.sk {
    border-radius: var(--r-s);
    background: linear-gradient(90deg, var(--line-2), color-mix(in srgb, var(--line-2) 45%, var(--card)), var(--line-2));
    background-size: 200% 100%;
    animation: sk 1.2s linear infinite;
}

@keyframes sk {
    to {
        background-position: -200% 0;
    }
}

.sk--line {
    height: 12px;
    margin: 9px 0;
}

/* ---------- 13. 吐司 / 对话框 ---------- */
.toasts {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    max-width: min(88vw, 460px);
    padding: 10px 16px;
    border-radius: var(--r-pill);
    background: var(--ink);
    color: var(--paper);
    font-size: 13.5px;
    box-shadow: var(--shadow-3);
    animation: tin .2s var(--ease);
}

.toast--err {
    background: var(--red);
    color: #fff;
}

.toast--ok {
    background: var(--teal);
    color: #fff;
}

[data-theme="dark"] .toast--ok,
[data-theme="dark"] .toast--err {
    color: #08191a;
}

@keyframes tin {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

.dlg {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: min(94vw, 560px);
}

.dlg::backdrop {
    background: rgba(14, 23, 25, .5);
}

.dlg__in {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-l);
    box-shadow: var(--shadow-3);
    padding: 20px 22px;
    max-height: 86vh;
    overflow: auto;
}

.dlg__t {
    font-size: 17px;
    margin-bottom: 6px;
}

.dlg__acts {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

/* ---------- 14. 页脚 ---------- */
.foot {
    border-top: 1px solid var(--line);
    margin-top: 56px;
    padding: 30px 0 40px;
    background: color-mix(in srgb, var(--card) 55%, transparent);
}

.foot__in {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) repeat(auto-fit, minmax(140px, 1fr));
    gap: 22px;
}

.foot__t {
    font-size: 12px;
    letter-spacing: .16em;
    color: var(--ink-4);
    margin-bottom: 9px;
}

.foot__a {
    display: block;
    padding: 3px 0;
    color: var(--ink-2);
    font-size: 13.5px;
}

.foot__a:hover {
    color: var(--teal);
}

.foot__sig {
    color: var(--ink-3);
    font-size: 13px;
    line-height: 1.8;
}

.foot__bar {
    max-width: var(--maxw);
    margin: 24px auto 0;
    padding: 16px 20px 0;
    border-top: 1px solid var(--line-2);
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--ink-4);
}

/* ---------- 15. 工具类 ---------- */
.muted {
    color: var(--ink-3);
}

.dim {
    color: var(--ink-4);
}

.small {
    font-size: 12.5px;
}

.red {
    color: var(--red);
}

.teal {
    color: var(--teal-ink);
}

.hide {
    display: none !important;
}

.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 进场动效：少量、只做一次 */
.rise {
    animation: rise .5s var(--ease) both;
}

.rise--2 {
    animation-delay: .07s;
}

.rise--3 {
    animation-delay: .14s;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ---------- 16. 响应式 ---------- */
@media (max-width: 1080px) {
    :root {
        --rail-w: 172px;
        --gut: 22px;
    }

    .nav {
        display: none;
    }

    .drawer-btn {
        display: inline-flex;
    }
}

@media (max-width: 900px) {
    .shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .rail {
        position: static;
        padding: 18px 0 12px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .rail__list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .rail__a {
        padding: 5px 11px;
        border-left: 0;
        border: 1px solid var(--line);
        border-radius: var(--r-pill);
    }

    .rail__a.is-on {
        border-color: var(--red);
        background: var(--red-soft);
    }

    .rail__a.is-on::before {
        display: none;
    }

    .note {
        margin-top: 12px;
    }

    .main {
        padding-top: 18px;
    }

    .split {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    body {
        font-size: 15px;
    }

    .shell,
    .wrap {
        padding-left: 15px;
        padding-right: 15px;
    }

    .top__in {
        padding: 0 13px;
        gap: 10px;
    }

    .brand__txt i {
        display: none;
    }

    .uchip span {
        display: none;
    }

    .uchip {
        padding: 0 4px;
    }

    .sec {
        margin-top: 30px;
    }
}

/* ---------- 17. 字体接入与可读性 ---------- */
/* 依据《四站字体接入与可读性规范》（文书库 doc_50）§二 / §三。
   字体族与 31 条自持子集声明在 font/font.css（**只有 Regular 400 参与排版**，
   Light / Medium / Bold 共 14 条挂「备用」族名，等补号后再逐条启用）；
   本节只落**可读性基线**，与 17 节之外互不牵连，整节可独立回滚。
   说明：写在 css/pages.css、css/classroom.css、css/console.css 里的组件字号
   （长文 .prose、卡片标题、倒计时按钮、题头等）已在各自文件就地抬到 16px，
   本节不跨文件兜底——CSS 里后加载的文件会压住本节同类声明。 */

/* 17.1 正文：16px / 行高 1.8 / 字距 .012em（覆盖 §2 里的 15.5px / 1.7 / .01em） */
body {
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: .012em;
}

/* 17.2 标题走 balance 断行、正文走 pretty，避免孤字与长尾行 */
h1,
h2,
h3,
h4,
.hero__title,
.page__title,
.sec__title,
.brand__txt b {
    text-wrap: balance;
}

p,
li,
.page__lead,
.page__head p {
    text-wrap: pretty;
}

/* 17.3 数字：一律等宽数字（tabular-nums），换字体后位数不跳。
   .num / .mono 原本已有，这里把题号、倒计时、数值输入一并纳入。 */
.num,
.mono,
.cd__time,
.cd__node,
.ex__i-n,
.ex__i-s,
input[type="number"],
input[type="range"] {
    font-variant-numeric: tabular-nums;
}

/* 17.4 表单控件：button / input / select / textarea 在部分浏览器不继承 font-family，
   这里显式声明一次（正文控件走 --f-sans，代码类控件在 17.5 换等宽族）。 */
button,
input,
select,
textarea,
optgroup,
option {
    font-family: inherit;
}

/* 17.5 代码与终端片段：保留真正的等宽族（--f-code），不跟着 --f-mono 换成 Harmony */
code,
kbd,
samp,
pre,
.prose code,
.prose pre,
.prose pre code,
input.inp--mono,
textarea.ta--mono {
    font-family: var(--f-code);
}

/* 17.6 字重：全站只用 400（正文）与 700（加粗）两档——字体层重整后的口径。
   原因：站内子集按字重递减覆盖（Light 3 段 / Regular 17 段 / Medium 7 段 / Bold 4 段），
   写 500 / 600 / 800 / 900 会让同一行里不同的字落到不同字重、甚至掉进系统字体，
   出现「同一字块粗细不一致」；700 由浏览器基于 Regular 同一套字形合成加粗。
   因此 500 / 600 / 800 / 900 与关键字 bold 全站禁用，强调一律 700（本条为护栏）。 */
b,
strong,
th,
.prose b,
.prose strong {
    font-weight: 700;
}

/* 17.7 移动端：正文不再降到 15 / 15.5px，恒为 16px（覆盖 §16 的 640px 那一档） */
@media (max-width: 640px) {
    body {
        font-size: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════
   261023-05：并入主站主题（墨色纸底 · 朱砂强调）
   —— 只换令牌（配色 + 圆角），不动版式、类名与脚本钩子。
   ═══════════════════════════════════════════════════════════ */
:root {
    --ink: #15181d;
    --ink-2: #4a5260;
    --ink-3: #79828f;
    --ink-4: #a2a9b2;
    --paper: #fbfaf7;
    --card: var(--mz-surface-card);
    --line: #e3e6eb;
    --line-2: #eff0f2;
    --teal: #9b0a22;
    --teal-ink: #7d0819;
    --teal-soft: #f7e9eb;
    --red: #b3271e;
    --red-soft: #f8e8e5;
    --amber: #8a6a3b;
    --amber-soft: #f4efe6;
}

[data-facet="student"] {
    --ink: #15181d;
    --ink-2: #4a5260;
    --ink-3: #79828f;
    --paper: #fbfaf7;
    --card: var(--mz-surface-card);
    --line: #e3e6eb;
    --line-2: #eff0f2;
    --teal: #9b0a22;
    --teal-ink: #7d0819;
    --teal-soft: #f7e9eb;
    --red: #b3271e;
    --red-soft: #f8e8e5;
    --amber: #8a6a3b;
}

[data-theme="dark"] {
    --ink: #e9e6e0;
    --ink-2: #b9b4ac;
    --ink-3: #8b867e;
    --ink-4: #6d6862;
    --paper: #16161a;
    --card: var(--mz-surface-card);
    --line: #2c2b30;
    --line-2: #242327;
    --teal: #e0a0a8;
    --teal-ink: #f0bcc2;
    --teal-soft: #33262a;
    --red: #e8a49c;
    --red-soft: #33221f;
    --amber: #c9a465;
    --amber-soft: #2a2519;
}