/* ==========================================================================
   theme.css — 设计令牌（Design Tokens）与双主题
   --------------------------------------------------------------------------
   主题切换方式：<html data-theme="light|dark">，由 assets/js/theme.js 在首屏前写入。
     · 亮色：灰绿三段（森林绿侧栏 #2c4f40 / 页面底 #eff8f3 / 薄荷卡面 #e4f3ed）。
             深林绿同时是左侧栏、手机端抽屉、模态框标题行与主按钮的实底（白字 6.1:1）；
             灰绿页面底与访客首页 promo.css 的 --g-paper 同值，登录页 / 首页 / 后台观感统一。
             ⚠ 为保证可读性，亮色主题的「主要/次要/弱化文字」均采用深色值，
               确保浅底上的正文和辅助信息具有足够对比度。
               并在 docs/界面与主题规范.md 中标注；如需改回原值只改本文件即可。
     · 暗色：深紫黑基底 + 毛玻璃 + 紫→粉→橙渐变按钮，统一不使用投影。
             主背景 #0f0b19 / 卡片 #171226 / 内嵌 #251d3d / 侧栏 #090613 /
             文字 #f2eefb · #c3bcd6 · #9b93b5 / 主色 #7c3aed（文字变体 #c4a4ff）/
             渐变按钮 linear-gradient(120deg,#7c3aed,#be185d,#c2410c)
             状态色语义仍为 绿=成功 / 琥珀=警告 / 玫红=错误，仅按深底重新取值。
             ⚠ 本节原为客户青绿色板，已按需求改为紫黑系，详见 docs/界面与主题规范.md。
             ✅ 亮色改绿只动上面的 :root 块，本块一个值都没改。


   命名约定（语义化，组件样式一律只引用这些 token，不写死颜色）：
     背景：--bg-app --bg-side --bg-sub --surface --surface-2 --surface-3 --hover --selected
     深底前景：--side-fg --side-fg-2 --side-fg-3 --side-hover --side-active --side-line --side-accent
     线条：--line --line-2
     文字：--text --text-2 --text-3 --text-muted --on-accent
     品牌：--primary --primary-dark --primary-light --primary-text
     状态：--ok --ok-light --ok-text / --warn --warn-light --warn-text /
           --danger --danger-light --danger-text / --info --info-light
     效果：--shadow --shadow-lg --shadow-up --ring --overlay
   ========================================================================== */

/* ==========================================================================
   1. 亮色主题（默认）
   ========================================================================== */
:root {
    color-scheme: light;

    /* ---- 背景层（森林绿侧栏 / 薄荷页面 / 层叠面板） ---- */
    --bg-app: #eff8f3;          /* 页面主背景 */
    --bg-side: #2c4f40;         /* 最深背景：左侧栏 / 手机端抽屉 / 品牌块 */
    --bg-sub: #edf7f1;          /* 次级背景：登录页、外层容器 */
    --surface: #e4f3ed;         /* 卡片 / 面板 / 输入框 */
    --surface-2: #d9ebdf;       /* 卡片头 / 表头 / 卡脚 */
    --surface-3: #cfe5d8;       /* 更弱底：代码块 / 只读框 / 进度槽 */
    --student-profile-bg: #cde5d9;
    --student-hours-bg: #e8f1ed;
    --hover: #c8e5d7;           /* 悬停 / 浮层 */
    --selected: #bedfce;        /* 选中行 / 重点内容底 */
    --overlay: rgba(20, 72, 52, .44);

    /* ---- 深底（侧栏 / 抽屉 / 模态框标题行）专用的前景色 ----
       默认 --text / --text-2 / --text-3 都是给浅底用的深色，落到深林绿上不可读，
       所以这三件事（.sidebar / .brand / .drawer-panel / .modal-head）在 app.css 里
       统一引用下面这组令牌，而不是就地写死白色。 */
    --side-fg: #ffffff;                        /* 深底上的主要文字 */
    --side-icon: #ffffff;                      /* 侧栏与抽屉导航图标 */
    --side-fg-2: #ffffff;                      /* 深底上的导航文字 */
    --side-fg-3: rgba(255, 255, 255, .64);     /* 深底上的弱化文字（分组标题，非正文）：3.0:1 */
    --side-hover: rgba(255, 255, 255, .10);    /* 深底悬停底 */
    --side-active: rgba(255, 255, 255, .16);   /* 深底选中底 */
    --side-line: rgba(255, 255, 255, .16);     /* 深底分隔线 */
    --side-accent: #ffffff00;                  /* 深底上的强调文字/左侧竖条（选中态） */

    /* ---- 线条 ---- */
    --line: #b7d5c5;
    --line-2: #94bda9;

    /* ---- 文字 ---- */
    --text: #215e46;            /* 主要文字 */
    --text-2: #39705a;          /* 次要文字 */
    --text-3: #5c8875;          /* 弱化文字 */
    --text-muted: #5c8875;
    --text-invert: #ffffff;
    --on-accent: #ffffff;       /* 强调/状态实底上的文字 */
    --on-accent-soft: rgba(255, 255, 255, .22);   /* 强调实底上的次级底（如计数胶囊） */
    --hero-overlay: rgba(20, 72, 52, .62);        /* 公开页封面图片上的文字遮罩 */
    --hero-fg-muted: rgba(255, 255, 255, .88);    /* 公开页封面上的辅助文字 */
    --activity-control-bg: rgba(20, 72, 52, .72); /* 活动轮播控件背景 */
    --activity-control-hover: rgba(20, 72, 52, .90);
    --activity-control-dot: rgba(255, 255, 255, .62);
    --activity-control-active: #ffffff;

    /* 活动页面的封面遮罩、控件与预览主题色统一从此处读取，组件样式不写色值。 */
    --activity-shade-0: rgb(0 0 0 / 0%);
    --activity-shade-10: rgb(0 0 0 / 10%);
    --activity-shade-16: rgb(0 0 0 / 16%);
    --activity-shade-20: rgb(0 0 0 / 20%);
    --activity-shade-22: rgb(0 0 0 / 22%);
    --activity-shade-24: rgb(0 0 0 / 24%);
    --activity-shade-30: rgb(0 0 0 / 30%);
    --activity-shade-35: rgb(0 0 0 / 35%);
    --activity-shade-46: rgb(0 0 0 / 46%);
    --activity-shade-48: rgb(0 0 0 / 48%);
    --activity-shade-58: rgb(0 0 0 / 58%);
    --activity-shade-60: rgb(0 0 0 / 60%);
    --activity-shade-72: rgb(0 0 0 / 72%);
    --activity-fg-18: rgb(255 255 255 / 18%);
    --activity-fg-30: rgb(255 255 255 / 30%);
    --activity-fg-54: rgb(255 255 255 / 54%);
    --activity-fg-58: rgb(255 255 255 / 58%);
    --activity-fg-86: rgb(255 255 255 / 86%);
    --activity-theme-classic: #426b9e;
    --activity-theme-classic-soft: #e9f1fb;
    --activity-theme-fresh: #3f7c63;
    --activity-theme-fresh-swatch: #4e846d;
    --activity-theme-fresh-soft: #e7f4ed;
    --activity-theme-rustic: #97703d;
    --activity-theme-rustic-swatch: #a17b48;
    --activity-theme-rustic-soft: #f7eedf;
    --activity-theme-romance: #453264;
    --activity-theme-romance-swatch: #3d315d;
    --activity-theme-romance-soft: #eee9f7;

    /* ---- 品牌色（实底使用 --primary，浅底上的文字使用 --primary-text） ---- */
    --primary: #28614a;
    --primary-dark: #173f30;
    --primary-light: #c9e3d5;
    --primary-text: #215e46;

    /* ---- 重点信息：仅用文字色提升课时、人数与关键参数的扫读效率 ---- */
    --highlight-green: #127c16;
    --highlight-blue: #124f7c;
    --highlight-purple: #815499;
    --highlight-red: #9b5757;

    /* ---- 状态色 ---- */
    --ok: #287a55;
    --ok-light: #d8eee2;
    --ok-text: #236d4b;

    --warn: #a86612;
    --warn-light: #f7ead6;
    --warn-text: #89530d;

    --danger: #bd4850;
    --danger-light: #f8e1e3;
    --danger-text: #9d3941;

    --info: #527a6a;
    --info-light: #deeee6;
    --info-text: #426a5a;
    --tip-bg: #d8eee2;
    --tip-text: #236d4b;

    /* ---- 旧变量名兼容（app.css 早期版本使用） ---- */
    --bg: var(--bg-app);
    --card: var(--surface);

    /* ---- 效果 ---- */
    /* 平面化：卡片一律不投影，只保留 1px 描边。
       --shadow 保留给仍需要一点浮起感的浮层（极少量用点），主体界面不引用。 */
    --shadow: 0 1px 2px rgba(21, 75, 53, .06);
    /* 弹窗 / 底部面板 / Toast：保持紧凑且克制的层次。 */
    --shadow-lg: 0 6px 20px rgba(21, 75, 53, .14);
    --shadow-up: none;
    --ring: 0 0 0 3px rgba(44, 79, 64, .22);

    /* ---- 玻璃层 ---- */
    --glass-nav: rgb(239 248 243 / 84%);
    --glass-tab: rgb(239 248 243 / 92%);
    --glass-panel: rgb(230 247 239 / 92%);
    --glass-blur: 14px;
    --btn-primary-bg: linear-gradient(120deg, #28614a 0%, #28614a 100%);
    --btn-primary-fg: #ffffff;

    /* ---- 顶栏前景 ---- */
    --nav-fg: var(--text);
    --nav-fg-soft: rgba(33, 94, 70, .09);

    /* ---- 装饰渐变 ---- */
    --grad-login: linear-gradient(165deg, #eff8f3 0%, #e4f3ed 55%, #d9ebdf 100%);
    --grad-hero: #527d6a;
    --grad-brand: linear-gradient(140deg, #2c4f40 0%, #173f30 100%);
    --hero-chip: rgba(255, 255, 255, .2);
    --hero-tile-line: rgba(255, 255, 255, .35);
    --hero-tile-bg: rgba(255, 255, 255, .14);

    /* ---- 反馈层 ---- */
    --toast-bg: rgba(33, 94, 70, .96);
    --toast-ok-bg: rgba(40, 122, 85, .96);
    --toast-err-bg: rgba(157, 57, 65, .96);
    --loading-mask: rgb(239 248 243 / 58%);
    --spinner-track: rgba(44, 79, 64, .24);
    --paper-texture: none;

    /* 原生 <select> 的下拉箭头（用令牌承载，避免暗色下箭头发暗看不见） */
    --select-arrow: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235c8875' d='M6 8L2 4h8z'/%3E%3C/svg%3E");

    /* ---- 二维码底色 ----
       恒为白：二维码要能被任何扫码器识别，不能跟随暗色主题变深（两套主题同值） */
    --qr-bg: #ffffff;

    /* 主题选择器预览色：固定展示各主题自身，不随当前启用主题变化。 */
    --theme-preview-auto-fg: #6e6e73;
    --theme-preview-classic-fg: #007aff;
    --theme-preview-classic-bg: #e5f1ff;
    --theme-preview-spring-fg: #07c160;
    --theme-preview-spring-bg: #e8f8ef;
    --theme-preview-fresh-fg: #28614a;
    --theme-preview-fresh-bg: #d8eee2;
    --theme-preview-rustic-fg: #756044;
    --theme-preview-rustic-bg: #eadcc2;
    --theme-preview-romance-fg: #c4a4ff;
    --theme-preview-romance-bg: #251d3d;
}

/* ==========================================================================
   2. 暗色主题
   ========================================================================== */
html[data-theme="romance"] {
    color-scheme: dark;

    /* ---- 背景层 ----
       深紫黑基底。暗色下「越靠前越亮」是唯一的层次线索（无阴影可用），
       因此 surface-2 / surface-3 比 surface 更亮，而不是更暗。 */
    --bg-app: #0f0b19;          /* 页面主背景 */
    --bg-side: #1d0f34;         /* 最深：侧栏 */
    --bg-sub: #0f0b19;          /* 次级背景：登录页 / 外层容器 */
    --surface: #171226;         /* 卡片 / 面板 */
    --surface-2: #1e1733;       /* 卡片头 / 表头 / 卡脚 */
    --surface-3: #251d3d;       /* 只读框 / 内嵌区 / 进度槽 */
    --student-profile-bg: #291c35;
    --student-hours-bg: #21182b;
    --hover: rgba(255, 255, 255, .06);
    --selected: rgba(167, 92, 255, .18);
    --overlay: rgba(5, 3, 12, .72);

    /* ---- 深底（侧栏 / 抽屉 / 模态框标题行）专用的前景色 ----
       结构令牌与亮色相同（见 :root 的说明），取值按深紫黑基底各自定义。
       暗色本套主题的侧栏/标题行仍是紫黑玻璃，不受亮色改绿影响。 */
    --side-fg: #f2eefb;
    --side-icon: #ffffff;
    --side-fg-2: rgba(242, 238, 251, .82);
    --side-fg-3: rgba(242, 238, 251, .62);
    --side-hover: rgba(255, 255, 255, .07);
    --side-active: rgba(255, 255, 255, .12);
    --side-line: rgba(255, 255, 255, .12);
    --side-accent: #c4a4ff;

    /* ---- 线条（半透明发丝线，不用硬灰） ---- */
    --line: rgba(255, 255, 255, .08);
    --line-2: rgba(255, 255, 255, .14);

    /* ---- 文字 ----
       对比度按 --surface(#171226) 实测：主要 ≈14.9:1 / 次要 ≈10.3:1 / 弱化 ≈6.3:1，
       三者均高于正文 AA 的 4.5:1。 */
    --text: #f2eefb;
    --text-2: #c3bcd6;
    --text-3: #9b93b5;
    --text-muted: #9b93b5;
    --text-invert: #171226;
    --on-accent: #ffffff;
    --on-accent-soft: rgba(255, 255, 255, .22);
    --hero-overlay: rgba(5, 3, 12, .62);
    --hero-fg-muted: rgba(242, 238, 251, .88);
    --activity-control-bg: rgba(5, 3, 12, .72);
    --activity-control-hover: rgba(5, 3, 12, .92);
    --activity-control-dot: rgba(242, 238, 251, .62);
    --activity-control-active: #f2eefb;

    /* ---- 品牌色（紫为主色；实底填充用 --primary，文字用 --primary-text） ----
       白字在 --primary 上 ≈5.7:1，满足正文 AA。 */
    --primary: #7c3aed;
    --primary-dark: #6d28d9;
    --primary-light: rgba(167, 92, 255, .16);
    --primary-text: #c4a4ff;
    --highlight-green: #4ade80;
    --highlight-blue: #93c5fd;
    --highlight-purple: #d8b4fe;
    --highlight-red: #fda4af;

    /* ---- 状态色（语义不随主题变化：绿=成功 / 琥珀=警告 / 玫红=错误） ----
       实底填充值均按「白字 ≥4.5:1」挑选，--*-text 为深底上的可读变体。 */
    --ok: #047857;
    --ok-light: rgba(16, 185, 129, .16);
    --ok-text: #4ade80;

    --warn: #b45309;
    --warn-light: rgba(245, 158, 11, .16);
    --warn-text: #fbbf24;

    --danger: #be123c;
    --danger-light: rgba(244, 63, 94, .16);
    --danger-text: #fb7185;

    --info: #8b82a6;
    --info-light: #251d3d;
    --info-text: #c3bcd6;
    --tip-bg: rgba(167, 92, 255, .16);
    --tip-text: #d7c4ff;

    /* ---- 效果 ----
       本主题统一不使用投影：卡片层次由描边 + 明度差表达，
       弹窗/底部面板由遮罩层保证可读性。 */
    --shadow: none;
    --shadow-lg: none;
    --shadow-up: none;
    --ring: 0 0 0 3px rgba(167, 92, 255, .34);

    /* ---- 装饰渐变（紫 → 粉 → 橙） ---- */
    --grad-login: linear-gradient(165deg, #090613 0%, #17102e 55%, #241540 100%);
    --grad-hero: linear-gradient(140deg, #1b0f38 0%, #4c1d95 55%, #a21caf 100%);
    --grad-brand: linear-gradient(120deg, #7c3aed 0%, #be185d 52%, #c2410c 100%);
    --hero-chip: rgba(255, 255, 255, .14);

    /* ---- 玻璃层（顶栏 / Tab 栏 / 弹窗面板；模糊半径由 --glass-blur 统一控制） ---- */
    --glass-nav: rgba(13, 9, 23, .72);
    --glass-tab: rgba(9, 6, 19, .78);
    --glass-panel: rgba(23, 18, 38, .88);
    --glass-blur: 20px;
    --btn-primary-bg: linear-gradient(120deg, #7c3aed 0%, #be185d 52%, #c2410c 100%);
    --btn-primary-fg: #ffffff;

    /* ---- 顶栏前景（暗色顶栏是深色玻璃，前景保持浅色） ---- */
    --nav-fg: #f2eefb;
    --nav-fg-soft: rgba(255, 255, 255, .22);

    /* ---- 反馈层 ---- */
    --toast-bg: rgba(37, 29, 61, .96);
    --toast-ok-bg: rgba(4, 120, 87, .96);
    --toast-err-bg: rgba(190, 18, 60, .96);
    --loading-mask: rgba(9, 6, 19, .55);
    --spinner-track: rgba(167, 92, 255, .25);

    --select-arrow: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239b93b5' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
}

/* 暗色下错误 Toast：深玫红底 + 白字 */
html[data-theme="romance"] .jx-toast-err {
    background: var(--toast-err-bg);
    color: var(--on-accent);
}

/* 系统经典：白灰界面、蓝色强调，接近原生移动应用观感。 */
html[data-theme="classic"] {
    color-scheme: light;
    --bg-app: #f5f5f7; --bg-side: #ffffff; --bg-sub: #f5f5f7;
    --surface: #ffffff; --surface-2: #f2f2f7; --surface-3: #e5e5ea;
    --student-profile-bg: #d6e1df; --student-hours-bg: #edf2f1;
    --hover: #ebf3ff; --selected: #dcecff; --overlay: rgba(0, 0, 0, .34);
    --side-fg: #1d1d1f; --side-icon: #007aff; --side-fg-2: #3a3a3c; --side-fg-3: #8e8e93;
    --side-hover: #f2f2f7; --side-active: #e5f0ff; --side-line: #e5e5ea; --side-accent: #007aff;
    --line: #d1d1d6; --line-2: #aeaeb2;
    --text: #1d1d1f; --text-2: #48484a; --text-3: #6e6e73; --text-muted: #6e6e73;
    --text-invert: #ffffff; --on-accent: #ffffff; --on-accent-soft: rgba(255, 255, 255, .26);
    --primary: #007aff; --primary-dark: #005ecb; --primary-light: #e5f1ff; --primary-text: #0066d6;
    --highlight-green: #127c16; --highlight-blue: #124f7c; --highlight-purple: #815499; --highlight-red: #9b5757;
    --ok: #248a3d; --ok-light: #e8f6eb; --ok-text: #1b6c30;
    --warn: #b77200; --warn-light: #fff4d6; --warn-text: #8d5900;
    --danger: #d70015; --danger-light: #ffeaed; --danger-text: #b00012;
    --info: #007aff; --info-light: #e5f1ff; --info-text: #0066d6;
    --tip-bg: #e5f1ff; --tip-text: #0066d6;
    --shadow: 0 1px 2px rgba(0, 0, 0, .05); --shadow-lg: 0 8px 24px rgba(0, 0, 0, .14); --shadow-up: none;
    --ring: 0 0 0 3px rgba(0, 122, 255, .24);
    --glass-nav: rgb(255 255 255 / 88%); --glass-tab: rgb(255 255 255 / 94%); --glass-panel: rgb(255 255 255 / 96%); --glass-blur: 18px;
    --btn-primary-bg: #007aff; --btn-primary-fg: #ffffff; --nav-fg: #1d1d1f; --nav-fg-soft: rgba(0, 122, 255, .10);
    --grad-login: linear-gradient(165deg, #f5f5f7 0%, #ffffff 55%, #e5f1ff 100%); --grad-hero: #2575c9;
    --grad-brand: linear-gradient(140deg, #ffffff 0%, #f2f2f7 100%); --hero-chip: rgba(0, 122, 255, .10);
    --toast-bg: rgba(29, 29, 31, .94); --toast-ok-bg: rgba(36, 138, 61, .96); --toast-err-bg: rgba(215, 0, 21, .96);
    --loading-mask: rgb(245 245 247 / 64%); --spinner-track: rgba(0, 122, 255, .22);
    --select-arrow: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236e6e73' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
}

/* 春意盎然：以经典主题的结构为底，采用微信式白灰分层与明快绿色强调。
   组件保持克制的 1px 分隔和轻量阴影，便于教务场景长时间扫读与操作。 */
html[data-theme="spring"] {
    color-scheme: light;
    --bg-app: #f7f7f7;
    --bg-side: #ffffff;
    --bg-sub: #f7f7f7;
    --surface: #ffffff;
    --surface-2: #f2f2f2;
    --surface-3: #ebebeb;
    --student-profile-bg: #e8f8ef;
    --student-hours-bg: #f5fbf7;
    --hover: #f0faf4;
    --selected: #e7f8ed;
    --overlay: rgba(0, 0, 0, .40);

    --side-fg: #191919;
    --side-icon: #07c160;
    --side-fg-2: #444444;
    --side-fg-3: #888888;
    --side-hover: #f5f5f5;
    --side-active: #e7f8ed;
    --side-line: #ededed;
    --side-accent: #07c160;

    --line: #e5e5e5;
    --line-2: #d6d6d6;
    --text: #191919;
    --text-2: #444444;
    --text-3: #888888;
    --text-muted: #888888;
    --text-invert: #ffffff;
    --on-accent: #ffffff;
    --on-accent-soft: rgba(255, 255, 255, .24);
    --hero-overlay: rgba(7, 82, 45, .62);
    --hero-fg-muted: rgba(255, 255, 255, .88);
    --activity-control-bg: rgba(7, 82, 45, .72);
    --activity-control-hover: rgba(7, 82, 45, .90);
    --activity-control-dot: rgba(255, 255, 255, .62);
    --activity-control-active: #ffffff;

    --primary: #07883f;
    --primary-dark: #056f31;
    --primary-light: #e7f8ed;
    --primary-text: #067637;
    --highlight-green: #07883f;
    --highlight-blue: #2c6fb7;
    --highlight-purple: #7a5ab5;
    --highlight-red: #c74343;

    --ok: #07883f;
    --ok-light: #e7f8ed;
    --ok-text: #067637;
    --warn: #a96400;
    --warn-light: #fff5df;
    --warn-text: #8c5300;
    --danger: #c93532;
    --danger-light: #fff0ef;
    --danger-text: #ac2d2b;
    --info: #2c78c7;
    --info-light: #eaf4ff;
    --info-text: #2466aa;
    --tip-bg: #e7f8ed;
    --tip-text: #067637;

    --shadow: 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);
    --shadow-up: none;
    --ring: 0 0 0 3px rgba(7, 193, 96, .20);

    --glass-nav: rgb(255 255 255 / 90%);
    --glass-tab: rgb(255 255 255 / 96%);
    --glass-panel: rgb(255 255 255 / 98%);
    --glass-blur: 18px;
    --btn-primary-bg: #07883f;
    --btn-primary-fg: #ffffff;
    --nav-fg: #191919;
    --nav-fg-soft: rgba(7, 193, 96, .10);

    --grad-login: linear-gradient(165deg, #f7f7f7 0%, #ffffff 56%, #e7f8ed 100%);
    --grad-hero: #11995b;
    --grad-brand: linear-gradient(140deg, #ffffff 0%, #f4fff8 100%);
    --hero-chip: rgba(255, 255, 255, .18);
    --hero-tile-line: rgba(255, 255, 255, .34);
    --hero-tile-bg: rgba(255, 255, 255, .14);

    --toast-bg: rgba(25, 25, 25, .94);
    --toast-ok-bg: rgba(7, 136, 63, .96);
    --toast-err-bg: rgba(201, 53, 50, .96);
    --loading-mask: rgb(247 247 247 / 64%);
    --spinner-track: rgba(7, 193, 96, .22);
    --paper-texture: none;
    --select-arrow: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888888' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
}

/* 古朴宣纸：暖纸色、墨灰文字与低对比纸纤维背景。 */
html[data-theme="rustic"] {
    color-scheme: light;
    --bg-app: #ede4d0;
    --bg-side: #4c4437;
    --bg-sub: #f1e9d8;
    --surface: #fbf6e9;
    --surface-2: #f3ead7;
    --surface-3: #e9ddc7;
    --student-profile-bg: #f9e9c9;
    --student-hours-bg: #fff5e1;
    --hover: #e6d8bc;
    --selected: #dfcfaf;
    --overlay: rgba(49, 42, 31, .42);
    --side-fg: #fffaf0;
    --side-icon: #fffaf0;
    --side-fg-2: #f7eddb;
    --side-fg-3: rgba(255, 250, 240, .62);
    --side-hover: rgba(255, 250, 240, .09);
    --side-active: rgba(255, 250, 240, .16);
    --side-line: rgba(255, 250, 240, .16);
    --side-accent: #d9b578;
    --line: #d3c2a3;
    --line-2: #b7a27e;
    --text: #3b352b;
    --text-2: #625747;
    --text-3: #827462;
    --text-muted: #827462;
    --text-invert: #fffaf0;
    --on-accent: #fffaf0;
    --on-accent-soft: rgba(255, 250, 240, .20);
    --primary: #756044;
    --primary-dark: #594732;
    --primary-light: #e8dac0;
    --primary-text: #594732;
    --highlight-green: #127c16;
    --highlight-blue: #124f7c;
    --highlight-purple: #815499;
    --highlight-red: #9b5757;
    --ok: #537454;
    --ok-light: #e1ecdf;
    --ok-text: #405e42;
    --warn: #9b6a20;
    --warn-light: #f6e9cd;
    --warn-text: #7a5012;
    --danger: #a95246;
    --danger-light: #f5e1dc;
    --danger-text: #893d34;
    --info: #746a58;
    --info-light: #ebe3d3;
    --info-text: #5d5547;
    --tip-bg: #eee2ca;
    --tip-text: #5d4932;
    --shadow: 0 1px 2px rgba(69, 55, 34, .06);
    --shadow-lg: 0 7px 22px rgba(69, 55, 34, .14);
    --shadow-up: none;
    --ring: 0 0 0 3px rgba(117, 96, 68, .22);
    --glass-nav: rgb(251 246 233 / 88%);
    --glass-tab: rgb(251 246 233 / 94%);
    --glass-panel: rgb(251 246 233 / 96%);
    --glass-blur: 14px;
    --btn-primary-bg: #756044;
    --btn-primary-fg: #fffaf0;
    --nav-fg: #3b352b;
    --nav-fg-soft: rgba(117, 96, 68, .10);
    --grad-login: linear-gradient(165deg, #ede4d0 0%, #fbf6e9 55%, #e9ddc7 100%);
    --grad-hero: #756044;
    --grad-brand: linear-gradient(140deg, #4c4437 0%, #62533e 100%);
    --hero-chip: rgb(73 65 69 / 48%);
    --toast-bg: rgba(59, 53, 43, .95);
    --toast-ok-bg: rgba(83, 116, 84, .96);
    --toast-err-bg: rgba(169, 82, 70, .96);
    --loading-mask: rgb(237 228 208 / 60%);
    --spinner-track: rgba(117, 96, 68, .22);
    --paper-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3Cpath d='M0 38H180M0 116H180' stroke='%238b7a5d' stroke-width='.55' opacity='.10'/%3E%3Cpath d='M32 0V180M142 0V180' stroke='%23fffaf0' stroke-width='.7' opacity='.14'/%3E%3C/svg%3E");
    --select-arrow: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23827462' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   3. 基础适配（原生控件、滚动条、自动填充、选中态）
   ========================================================================== */
html {
    background: var(--bg-app);
}

body {
    background: var(--bg-app);
    background-image: var(--paper-texture);
    background-size: 180px 180px;
    color: var(--text);
}

::placeholder {
    color: var(--text-3);
    opacity: .85;
}

::selection {
    background: var(--primary-light);
    color: var(--primary-text);
}

/* 暗色主题下浏览器自动填充的黄色底（很常见的「看起来没适配」问题） */
html[data-theme="romance"] input:-webkit-autofill,
html[data-theme="romance"] input:-webkit-autofill:hover,
html[data-theme="romance"] input:-webkit-autofill:focus,
html[data-theme="romance"] textarea:-webkit-autofill,
html[data-theme="romance"] select:-webkit-autofill {
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    box-shadow: 0 0 0 100px var(--surface) inset;
    transition: background-color 9999s ease-in-out 0s;
}

/* 滚动条（桌面端观感提升明显） */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--line-2);
    border: 2px solid transparent;
    border-radius: 8px;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--text-3);
    background-clip: content-box;
}

/* 键盘可达性：只对键盘焦点显示环，鼠标点击不显示 */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* 打印时强制亮色，避免暗色主题打印成黑纸 */
@media print {
    html[data-theme="romance"] {
        --bg-app: #fff;
        --bg-side: #fff;
        --surface: #fff;
        --surface-2: #fff;
        --surface-3: #f5f5f5;
        --text: #000;
        --text-2: #333;
        --text-3: #555;
        --line: #ccc;
        --shadow: none;
    }
}

/* ==========================================================================
   4. 图标基础（ui-icon 组件渲染的内联 SVG）
   ========================================================================== */
.ico {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: -.15em;
    overflow: visible;
    /* 尺寸跟随字号设置（手机端小 / 中 / 大）：--ico-size 由 ui-icon 组件按 size 内联写入，
       这里乘 --jx-fs（桌面恒为 1）→ 字号变大时图标同步变大，不会「字大了图标还是那么小」。
       用变量而不是内联 width/height，是为了保留个别显式写死尺寸的规则（如筛选栏 12px 清除图标）。 */
    width: calc(var(--ico-size, 18px) * var(--jx-fs));
    height: calc(var(--ico-size, 18px) * var(--jx-fs));
}

/* 图标跟随文字颜色；需要单独着色时用 .text-* 工具类包一层或给 svg 加类 */
.ico * {
    vector-effect: non-scaling-stroke;
}