/* ============================================================
   全站统一设计系统（ui.css）—— 第三版 "Frosted Slate"
   ------------------------------------------------------------
   2026-10-02 第三版。老师给了**一张五色色卡**，要求：
     磨砂毛玻璃 · 半透明 · 扁平化 · 纯色化 · 简洁化
     高档国外网站质感 · 适当的动效 · 悬浮与阴影 · 2026 的设计理念

   ── 色卡（老师指定，就这五个）────────────────────────────
     #F0F4F8  最浅灰蓝   → 页面底
     #C8D6E5  浅蓝灰     → 分隔、次级底、选中态
     #8395A7  中灰蓝     → 弱化文字、图标、禁用
     #576574  深灰蓝     → 次要正文、强边框
     #222F3E  深藏青     → 主文字、主按钮（全站唯一"重色"）
     + 纯白 #FFFFFF 做毛玻璃卡的底

   整站**没有第二个彩色**（老师要"纯色化"）。样式只做三件事：
     ① 用这五个灰蓝把层级拉出来（越深越重要）
     ② 卡片是半透明白 + backdrop-blur（毛玻璃）
     ③ 悬浮抬升 + 极淡阴影，动效克制

   ── 唯一的例外：状态色 ───────────────────────────────────
   业务上必须有"异常 / 提醒 / 成功"（异常课、未交报告、课时不足）。
   老师确认保留，但**只小面积使用**（标签、小圆点、文字），绝不铺底。

   ============================================================
   组织方式（改样式前先看这段）
   ============================================================
   每个页面各自内联了一套组件样式（header / .card / .btn / .tbl …）。
   这里统一重写，并且：
     · 在页面内联 <style> **之后**加载（link 放在 </style> 后面）
     · 关键规则带 `body` 前缀（优先级高于页面里的单类选择器）
   这样是真正覆盖，而不是靠 !important 打补丁。
   ============================================================ */

:root{
  color-scheme:light;

  /* ---- 色卡原值（直接引用这五个，别在别处再造新色）---- */
  --slate-50:#F0F4F8;
  --slate-100:#C8D6E5;
  --slate-300:#8395A7;
  --slate-500:#576574;
  --slate-900:#222F3E;
  --white:#FFFFFF;

  /* ---- 页面底 ---- */
  --bg:#F0F4F8;
  --bg-tint:#E7EEF5;

  /* ---- 毛玻璃表面（半透明白 + 模糊）---- */
  --glass:rgba(255,255,255,.58);
  --glass-2:rgba(255,255,255,.76);
  --glass-line:rgba(255,255,255,.72);
  --blur:blur(20px) saturate(165%);

  /* ---- 不透明兜底（不支持 backdrop-filter 时用）---- */
  --surface:#FFFFFF;
  --surface-2:#F4F7FA;
  --card:#FFFFFF;

  /* ---- 文字：借色卡本身的深浅做层级 ---- */
  --text:#222F3E;
  --ink:#222F3E;
  --muted:#576574;
  --ink-2:#576574;
  --faint:#8395A7;
  --ink-3:#8395A7;

  /* ---- 线与分隔：藏青的低透明度，比灰更干净 ---- */
  --border:rgba(34,47,62,.10);
  --border-2:rgba(34,47,62,.20);
  --line:rgba(34,47,62,.10);
  --line-2:rgba(34,47,62,.06);

  /* ---- 主色 = 深藏青（扁平、纯色、不用渐变）---- */
  --primary:#222F3E;
  --primary-d:#151E2A;
  --primary-w:#FFFFFF;
  --brand:#222F3E;
  --brand-2:#151E2A;
  --brand-ink:#222F3E;
  --brand-soft:rgba(34,47,62,.07);

  /* ---- 信息 / 聚焦色 = 深灰蓝（不引入新色相）---- */
  --sky:#576574;
  --sky-soft:rgba(87,101,116,.10);
  --grey-soft:#EFF3F8;
  --card-2:#FAFCFE;

  /* ---- 状态色：小面积，低饱和，只出现在标签和文字上 ---- */
  --ok:#2E7A64;        --ok-bg:rgba(46,122,100,.10);  --ok-soft:rgba(46,122,100,.10);
  --no:#B04A45;        --no-bg:rgba(176,74,69,.10);
  --danger:#B04A45;    --danger-soft:rgba(176,74,69,.10);
  --warn:#7C5C14;      --warn-tx:#7C5C14;
  --warn-bg:rgba(160,124,40,.13); --warn-soft:rgba(160,124,40,.13);
  /* 金星——修仙玩法的星级就是这个金色，别当"土黄"清掉 */
  --gold:#A9842A;      --gold-soft:rgba(169,132,42,.13);
  --cinnabar:#B04A45;

  /* ---- 阴影：用藏青调（不用纯黑，边缘更干净）---- */
  --shadow:0 1px 2px rgba(34,47,62,.05), 0 4px 14px -6px rgba(34,47,62,.10);
  --shadow-2:0 1px 3px rgba(34,47,62,.06), 0 12px 28px -14px rgba(34,47,62,.18);
  --shadow-3:0 2px 6px rgba(34,47,62,.08), 0 28px 52px -24px rgba(34,47,62,.28);
  --sh-1:var(--shadow);
  --sh-2:var(--shadow-2);
  --sh-3:var(--shadow-3);
  --sh-brand:0 10px 26px -12px rgba(34,47,62,.60);

  /* ---- 圆角 ---- */
  --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:16px; --r-xl:22px; --r-full:999px;

  /* ---- 语义化的三档深浅（日历 / 时间槽 / 选中态用）----
     为什么不用 --slate-* 直接当档位：暗色主题把色阶倒过来之后，
     --slate-900 变成页面底色，写死它的地方整片消失。
     这里是默认（晨雾）的值，24 套主题各自覆盖。 */
  --lv1-bg:var(--slate-100); --lv1-tx:var(--slate-900);
  --lv2-bg:var(--slate-500); --lv2-tx:#FFFFFF;
  --lv3-bg:var(--slate-900); --lv3-tx:#FFFFFF;
  --accent:var(--slate-500); --accent-soft:rgba(87,101,116,.10);
  --bg-2:var(--bg-tint);

  /* ---- 装饰色 ---- */
  --font-h:'inherit';          /* 标题字体（古风那几套由主题换成衬线）*/
  --mesh-1:rgba(200,214,229,.70);
  --mesh-2:rgba(131,149,167,.32);
  --mesh-3:rgba(200,214,229,.26);
  --glow:transparent;
  --ring:var(--slate-500);
  /* 背景装饰层：网格 / 扫描线 / 纸纹 / 流体渐变。默认没有（none），
     由主题给出真实值（见 theme.css 的 --fx-layer）。
     【为什么是背景层而不是 ::before 浮层】浮层要 z-index，很容易盖住
     内容或挡住点击；挂进 background-image 永远在内容下面。 */
  --fx-layer:none;
  /* 主色渐变：默认 = 纯主色（扁平纯色化）。主题声明 grad 才有渐变，
     见 theme.css。2026-10-03 起「光影流动」是唯一主题，它开了 grad，
     所以大色块（会议号卡等）走的是多层渐变 = 光在流动的感觉。 */
  --brand-grad:var(--primary);
  /* 左上角主光的位置（主题给值）。body::before 用它做缓慢漂移 ——
     这就是老师要的「光影流动」：光团不是死的，会走。 */
  --light-x:6%; --light-y:-10%;

  /* ---- 动效（2026：短、顺、不弹）---- */
  --ease:cubic-bezier(.22,.72,.28,1);
  --ease-spring:cubic-bezier(.2,1.1,.3,1);
  --t-fast:150ms; --t:200ms; --t-slow:300ms;
}

/* ---- 页面底：主题的光影层 + 三团弥散光（见 --fx-layer / --mesh-1/2/3）
   【光影流动】--fx-layer 里是"天光从左上斜压下来、底部压深"的几层渐变，
   直接铺在页面底上 —— 整页就像一块被打光的大色块。
   光团本身在 body::before 里**缓慢漂移**（见下面"动效"一节）。 */
body{
  background-color:var(--bg) !important;
  background-image:
    var(--fx-layer),
    radial-gradient(880px 500px at 6% -14%, var(--mesh-1), transparent 62%),
    radial-gradient(800px 460px at 100% 2%, var(--mesh-2), transparent 64%),
    linear-gradient(180deg, var(--bg-tint) 0%, var(--bg) 46%) !important;
  background-repeat:repeat, no-repeat, no-repeat, no-repeat !important;
  background-attachment:fixed !important;
  color:var(--text);
  font-feature-settings:"tnum" 1;
  -webkit-font-smoothing:antialiased;
  scroll-behavior:smooth;
}
::selection{background:var(--accent-soft);color:var(--text)}

/* ---- 标题：默认无衬线；古风主题由 --font-h 换成衬线 ---- */
body h1,body h2,body h3,body h4{
  font-family:var(--font-h);
  font-weight:750;letter-spacing:-.015em;color:var(--text);
}
body h1{font-size:clamp(20px,2.4vw,26px)}

/* ---- 键盘可达：只在键盘操作时上聚焦环 ---- */
body :focus-visible{
  outline:2px solid var(--slate-500);outline-offset:2px;border-radius:6px;
}

/* ---- 行内单色图标（代替彩色 emoji，纯色化）---- */
body svg.i,body svg.bi{
  width:16px;height:16px;display:inline-block;vertical-align:-3px;
  fill:none;stroke:currentColor;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round;
}
body svg.bi{width:26px;height:26px;vertical-align:0}

/* ---- 毛玻璃工具类（新组件直接用）---- */
body .glass{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);
}
/* 不支持 backdrop-filter 的老浏览器：退回不透明白，别变成脏灰 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body .glass,body .card,body header{background:var(--surface) !important}
}

/* ============================================================
   一、顶栏与导航（毛玻璃 + 细线，滚动时像浮在内容上）
   ============================================================ */
body header{
  background:var(--glass-2);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,.6), 0 6px 24px -18px rgba(34,47,62,.5);
}
body header h1,body header .logo{
  font-weight:800;letter-spacing:.2px;color:var(--text);
}
body header .logo,body .logo{
  border-radius:12px;
}
body nav button,body .nav button,body header nav button{
  border:0;background:transparent;color:var(--muted);
  font-family:inherit;font-size:14px;font-weight:600;
  padding:9px 15px;border-radius:var(--r-sm);cursor:pointer;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),
    transform var(--t) var(--ease);
}
body nav button:hover,body .nav button:hover{
  background:var(--slate-50);color:var(--text);
}
/* 选中态：深藏青实底 + 白字 —— 整站最"重"的一处，一眼看出在哪
   （底色仍是那五个灰蓝，不是新颜色） */
body nav button.on,body .nav button.on{
  background:var(--primary);color:var(--primary-w);font-weight:700;
  box-shadow:0 6px 16px -10px rgba(34,47,62,.75);
}

/* ============================================================
   二、卡片 / 面板：半透明白 + 毛玻璃 + 极淡阴影
   ============================================================ */
body .card,body .panel > .card,body .aibox,body .box{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  transition:box-shadow var(--t) var(--ease),
    transform var(--t) var(--ease), border-color var(--t) var(--ease);
}
body .card:hover{box-shadow:var(--shadow-2)}
body .card h2,body .card h3,body .card h4{margin-top:0;color:var(--text)}
body .card h3{
  font-size:15px;padding-bottom:10px;margin-bottom:14px;
  border-bottom:1px solid var(--border);
}

/* ============================================================
   三、按钮：扁平纯色 + 悬浮抬升（不靠渐变、不靠描边堆叠）
   ============================================================ */
body .btn,body button.btn{
  appearance:none;
  border:1px solid var(--border-2);
  background:var(--glass-2);
  color:var(--text);
  font-family:inherit;font-size:14px;font-weight:600;
  border-radius:var(--r-full);cursor:pointer;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),
    background var(--t) var(--ease),border-color var(--t) var(--ease),
    color var(--t) var(--ease);
}
/* .sm 小按钮**不统一内边距** —— 教学端工具栏一排放好几个，
   撑成常规尺寸会把布局挤换行。只给常规按钮定尺寸。 */
body .btn:not(.sm){padding:9px 20px}
body .btn:hover{

  box-shadow:0 6px 18px -10px rgba(34,47,62,.55);
  border-color:var(--slate-300);
  background:var(--surface);
}
body .btn:active{transform:translateY(0) scale(.985)}
/* 主按钮：深藏青实底（整站唯一的重色，视线自然会落到这里） */
body .btn.pri,body .btn.hl,body .btn.primary{
  background:var(--primary);
  border-color:var(--primary);color:var(--primary-w);
  box-shadow:0 8px 20px -12px rgba(34,47,62,.9);
}
body .btn.pri:hover,body .btn.hl:hover{
  background:var(--primary-d);border-color:var(--primary-d);
  box-shadow:0 12px 26px -12px rgba(34,47,62,.95);

}
body .btn.dan,body .btn.danger{
  border-color:rgba(176,74,69,.35);color:var(--no);background:var(--no-bg);
}
body .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* ============================================================
   四、表单控件：半透明底，聚焦时压深描边（不用彩色光圈）
   ============================================================ */
body input,body select,body textarea{
  font-family:inherit;font-size:14px;color:var(--text);
  background:var(--glass-2);
  border:1px solid var(--border-2);
  border-radius:var(--r-sm);
  padding:9px 12px;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),
    background var(--t) var(--ease);
}
body input::placeholder,body textarea::placeholder{color:var(--slate-300)}
body input:hover,body select:hover,body textarea:hover{border-color:var(--slate-300)}
body input:focus,body select:focus,body textarea:focus{
  outline:none;background:var(--surface);
  border-color:var(--slate-500);
  box-shadow:0 0 0 3px rgba(87,101,116,.14);
}
body .field label,body label.f,body .f{
  display:block;font-size:12px;font-weight:650;color:var(--muted);
  margin-bottom:5px;letter-spacing:.2px;
}

/* ============================================================
   五、表格：毛玻璃卡里的"纸"，表头半透明，行悬浮
   ============================================================ */
body table,body .tbl{
  width:100%;border-collapse:collapse;font-size:14px;
  background:transparent;border-radius:var(--r);
  overflow:hidden;
}
body table th,body .tbl th{
  text-align:left;font-size:12px;font-weight:700;color:var(--slate-500);
  letter-spacing:.3px;padding:10px 12px;
  background:var(--surface-2);border-bottom:1px solid var(--border);
}
body table td,body .tbl td{
  padding:11px 12px;border-bottom:1px solid var(--line-2);
  font-variant-numeric:tabular-nums;
}
body table tr:last-child td,body .tbl tr:last-child td{border-bottom:0}
body table tbody tr,body .tbl tbody tr{
  transition:background var(--t-fast) var(--ease);
}
body table tbody tr:hover,body .tbl tbody tr:hover{background:var(--surface-2)}

/* ============================================================
   六、标签 / 提示 / 空态
   ============================================================ */
body .tag,body .rtag,body .pill,body .chip{
  display:inline-block;font-size:11.5px;font-weight:700;
  border-radius:var(--r-full);padding:3px 10px;letter-spacing:.2px;
  background:var(--brand-soft);color:var(--muted);
}
body .tag.ok,body .rtag.on{background:var(--ok-bg);color:var(--ok)}
body .tag.no,body .tag-no,body .rtag.off{background:var(--no-bg);color:var(--no)}
body .tag.warn,body .tag-warn{background:var(--warn-bg);color:var(--warn-tx)}
body .tag.info{background:var(--sky-soft);color:var(--sky)}
/* .tag.brand / .tag.b 也要落在这套灰蓝里，不能再是绿色 */
body .tag.brand,body .tag.b,body .tag.pri{
  background:var(--primary);color:var(--primary-w);
}
body .tag.line{
  background:transparent;border:1px solid var(--border-2);color:var(--muted);
}
body .tip,body .note{
  background:var(--glass-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:11px 14px;
  font-size:12.5px;color:var(--muted);line-height:1.75;
}
body .empty,body .muted{color:var(--muted)}

/* ============================================================
   七、入口导航页 / 学员端的大模块卡（悬浮抬升最明显的位置）
   ============================================================ */
body .mod,body .bigmod,body .grp{
  background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-radius:var(--r-lg);box-shadow:var(--shadow);
  transition:transform var(--t-slow) var(--ease-spring),
    box-shadow var(--t-slow) var(--ease),border-color var(--t) var(--ease);
}
body .mod:hover,body .bigmod:hover{
box-shadow:var(--shadow-3);
  border-color:var(--slate-100);
}
body .secttl,body .ttl,body .sec-t{
  font-size:12.5px;font-weight:700;color:var(--slate-300);letter-spacing:1.5px;
}

/* ============================================================
   八、通用的行 / 栅格 / 数字
   ============================================================ */
body .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
body .grid{display:grid;gap:14px}
body .num,body .n{font-variant-numeric:tabular-nums}

/* ============================================================
   九、滚动条（细、灰蓝、别抢戏）
   ============================================================ */
body ::-webkit-scrollbar{width:9px;height:9px}
body ::-webkit-scrollbar-thumb{
  background:rgba(87,101,116,.28);border-radius:99px;
  border:2px solid transparent;background-clip:padding-box;
}
body ::-webkit-scrollbar-thumb:hover{background:rgba(87,101,116,.48);
  background-clip:padding-box}
body ::-webkit-scrollbar-track{background:transparent}

/* ============================================================
   十、入场动效：很轻的一点"浮上来"，只在首屏发生一次
   ============================================================ */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* ⛔⛔ 【2026-10-12 老师要求】**全系统下架"一出现就动一次"的入场动画**
   老师原话：「去掉列表或按钮一出现就振动一次的动画。全系统下架。」
             （配图：管理后台的学员列表 —— "这个列表，就是一出现，就振动一次，总自己动"）
   —— 下面这条原来让**每个面板 / 卡片 / 模块**一显示就"浮上来 8px"，
      再配合后面的 nth-child 错开延迟（下面那几行），整片列表会**逐个往上跳一遍**，
      看着就是老师说的"总自己动"。
   ★ 想恢复：把下面 animation 那行的注释去掉即可（@keyframes rise 留着）。 */
body .panel.on,body main > .card,body .mod,body .bigmod{
  /* animation:rise var(--t-slow) var(--ease) both; */
}
/* 同屏多张卡依次出现（列表感），最多错开到第 8 张 */
body .grid > *:nth-child(1),body main > .card:nth-child(1){animation-delay:0ms}
body .grid > *:nth-child(2){animation-delay:40ms}
body .grid > *:nth-child(3){animation-delay:80ms}
body .grid > *:nth-child(4){animation-delay:120ms}
body .grid > *:nth-child(5){animation-delay:160ms}
body .grid > *:nth-child(6){animation-delay:200ms}
body .grid > *:nth-child(n+7){animation-delay:240ms}

/* ============================================================
   十一、动效（2026：克制的"活"，不是炫技）
   ------------------------------------------------------------
   几条原则：
     · 只动 transform / opacity（GPU 合成，不触发重排）
     · 背景漂移 40s 一轮，慢到"要盯着看才察觉"，不抢注意力
     · 进场只在**滚进视口时**触发一次（.reveal → .in）
     · 一切都在 prefers-reduced-motion 下降级
   ============================================================ */

/* ---- 1. 背景三团光缓慢漂移 + 主光"流动" ----
   【光影流动】老师要的是"所有的色块不再是单一纯色，而是光影流动的感觉"。
   背景分两层：
     body::before  = 左上角那团**主光**（大、亮、慢），它在画布上走一圈，
                     颜色和位置都随主题（--light-x/--light-y）。
     body::after   = 三团弥散光，反向漂移，负责把它们搅在一起。
   两层都是 fixed + z-index 负值 → 永远在内容下面、不挡点击、不吃滚动性能。 */
@keyframes meshA{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(3vw,2vh,0) scale(1.08)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
@keyframes meshB{
  0%  {transform:translate3d(0,0,0) scale(1.05)}
  50% {transform:translate3d(-3vw,3vh,0) scale(1)}
  100%{transform:translate3d(0,0,0) scale(1.05)}
}
/* 主光的"流动"：不改变换矩阵，只走 background-position ——
   这样光团是**在页面上游走**，而不是整块图层平移（后者会露出边缘）。 */
@keyframes lightflow{
  0%  {background-position:var(--light-x) var(--light-y), 78% 118%}
  25% {background-position:34% 6%, 96% 74%}
  50% {background-position:96% 30%, 22% 8%}
  75% {background-position:62% 92%, 4% 62%}
  100%{background-position:var(--light-x) var(--light-y), 78% 118%}
}
/* z-index:-1 → 画在页面底之上、内容之下（不用给每个页面加 z-index） */
/* ⛔⛔ 【2026-10-12 老师要求】**全系统下架"旋转/游走的光影动画"**
   老师原话：「这个旋转的动画，能全系统下架吗」
   → 这一层（body::before 的主光 + body::after 的光团）原来一直在缓慢游走，
     是**没引 skin_pro.css 的那几个页面**（teach.html / xiyou_*.html）看到的
     那道会动的弧光。现在统统停掉，只留**静态**的弥散光底。
   ★ 想恢复：把下面两行 animation 的注释去掉即可（@keyframes 都留着）。 */
body::before{
  content:"";position:fixed;inset:-22vh -14vw;z-index:-1;pointer-events:none;
  background:
    radial-gradient(closest-side, var(--mesh-1), transparent) var(--light-x) var(--light-y) / 78vw 78vw no-repeat,
    radial-gradient(closest-side, var(--mesh-2), transparent) 78% 118% / 64vw 64vw no-repeat;
  filter:blur(8px);
  /* animation:lightflow 74s var(--ease) infinite; */
}
body::after{
  content:"";position:fixed;inset:-10vh -5vw;z-index:-2;pointer-events:none;
  background:
    radial-gradient(closest-side, var(--mesh-2), transparent) 86% 10% / 56vw 56vw no-repeat,
    radial-gradient(closest-side, var(--mesh-3), transparent) 60% 82% / 70vw 70vw no-repeat,
    radial-gradient(closest-side, var(--glow), transparent) 70% 30% / 80vw 80vw no-repeat;
  /* animation:meshB 62s var(--ease) infinite; */
}

/* ---- 2. 滚进视口时淡入上浮（.reveal 由 theme.js 添加 + 观察）----
   ⛔ 【2026-10-12 老师要求】**下架这个入场动画**（同上一节）——
      原来列表项滚进视口就"从下方 16px 浮上来"，来回滚动会反复看见它动。
      现在直接**可见、不动**：theme.js 照旧加类（不用改 JS），但不再有任何位移/淡入。 */
.reveal{opacity:1;transform:none}
.reveal.in{
  opacity:1;transform:none;
  transition:none;
}

/* ---- 3. 按钮点击涟漪（theme.js 注入 .rip 元素）---- */
body .btn,body .chip,body .navtabs button,body nav button{position:relative;overflow:hidden}
.rip{
  position:absolute;border-radius:50%;pointer-events:none;
  background:currentColor;opacity:.22;transform:scale(0);
  animation:rip .55s var(--ease) forwards;
}
@keyframes rip{
  to{transform:scale(2.6);opacity:0}
}

/* ---- 4. 大卡悬浮时一道光泽扫过 ---- */
body .mod,body .bigmod,body .stepcard,body .stat{position:relative;overflow:hidden}
body .mod::after,body .bigmod::after,body .stat::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);pointer-events:none;opacity:0;
}
body .mod:hover::after,body .bigmod:hover::after,body .stat:hover::after{
  opacity:1;animation:sheen .85s var(--ease);
}
@keyframes sheen{from{left:-60%}to{left:120%}}

/* ---- 5. 切换主题时的一次性过场（避免"啪"地跳色）---- */
html.theme-swap body::after{opacity:0}
.theme-veil{
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:var(--bg);opacity:0;transition:opacity .22s var(--ease);
}
.theme-veil.on{opacity:.92}
/* 换主题那一下，所有颜色平滑过渡（只这一次，平常不牺牲性能）*/
html.theme-swap *{
  transition:background-color .3s var(--ease),border-color .3s var(--ease),
    color .3s var(--ease) !important;
}

/* ---- 6. 数字滚动（.stat 里的数字从 0 滚到该值，theme.js 触发）---- */
@keyframes pop{0%{transform:scale(.86);opacity:.4}100%{transform:none;opacity:1}}
.stat.pop .n,.stat .n.pop{animation:pop .42s var(--ease-spring)}

/* ============================================================
   十二、降级：移动端 / 减弱动效
   ============================================================ */
@media (max-width:760px){
  body .card,body .panel > .card{border-radius:var(--r);padding:15px}
  body nav button,body .nav button{padding:8px 12px;font-size:13px}
  body .btn:not(.sm){padding:9px 16px}
  /* 手机上毛玻璃很费电，退回半透明实底（观感接近，性能好很多） */
  body .card,body .mod,body .bigmod,body header{background:rgba(255,255,255,.86)}
}
@media (prefers-reduced-motion:reduce){
  body *{transition:none !important;animation:none !important}
  /* 背景光团静止；进场元素直接显示（不然会被 .reveal 卡成空白）*/
  body::before,body::after{animation:none !important}
  /* 【光影流动】主光停下时不能停在"走了一半"的位置 —— 那会让页面
     看起来是歪的。复位到主题给的原点。 */
  body::before{background-position:var(--light-x) var(--light-y), 78% 118%}
  .reveal{opacity:1;transform:none}
}