/* ============================================================
   碣石镇东关小学 · 课后服务轮值统计平台
   视觉体系 v4 — 小米官网（mi.com）风格
   设计原则：
     1. 纯白卡片 + 浅灰画布（#F7F7F7），层级靠「实底 + 发丝线」建立；
     2. 全站唯一品牌色 = 小米橙（#FF6700），只出现在
        按钮、选中态、关键数字、悬停反馈上；
     3. 卡片有大圆角与柔和投影，鼠标悬停时轻微抬起（小米式手感）；
     4. 语义色（到岗／请假／缺勤／停课）降饱和，只用于状态标签；
     5. 几何无衬线字（MiSans 优先），数字统一等宽对齐；
     6. 中文不加负字距，仅数字与拉丁文收紧。
   ============================================================ */

/* ============================================================
   头图标题专用字：小米兰亭 MiSans
   ------------------------------------------------------------
   小米官网主字体、免费商用。为把体积压到最小，用 fontTools 从官方分包里
   裁出「只含标题用字」的 14 个小文件（合计约 15KB；早先直接外链思源宋体
   CDN 是 179KB），全部本地存放、不依赖任何外网 —— 断网、内网、CDN 被墙
   都照常显示；万一全失效，还会逐级回退到本机 MiSans → 苹方 → 微软雅黑。
   重新生成：python visual/misans_fetch.py && python visual/misans_build2.py
   ============================================================ */
/* MiSans（小米兰亭）标题专用字 —— 由官方分包裁剪，只含标题用字 */
@font-face{font-family:"MiSans Title";font-style:normal;font-weight:700;font-display:swap;src:url("./assets/fonts/misans/bd-0.woff2") format("woff2");unicode-range:U+3002,U+5173,U+540E,U+5B66,U+5C0F}
@font-face{font-family:"MiSans Title";font-style:normal;font-weight:700;font-display:swap;src:url("./assets/fonts/misans/bd-1.woff2") format("woff2");unicode-range:U+8F6E,U+9547}
@font-face{font-family:"MiSans Title";font-style:normal;font-weight:700;font-display:swap;src:url("./assets/fonts/misans/bd-2.woff2") format("woff2");unicode-range:U+77F3}
@font-face{font-family:"MiSans Title";font-style:normal;font-weight:700;font-display:swap;src:url("./assets/fonts/misans/bd-3.woff2") format("woff2");unicode-range:U+4E1C,U+52A1,U+5E02,U+670D,U+7EDF,U+8868,U+8BA1}
@font-face{font-family:"MiSans Title";font-style:normal;font-weight:700;font-display:swap;src:url("./assets/fonts/misans/bd-4.woff2") format("woff2");unicode-range:U+4E30,U+8BFE}
@font-face{font-family:"MiSans Title";font-style:normal;font-weight:700;font-display:swap;src:url("./assets/fonts/misans/bd-5.woff2") format("woff2");unicode-range:U+503C,U+9646}
@font-face{font-family:"MiSans Title";font-style:normal;font-weight:700;font-display:swap;src:url("./assets/fonts/misans/bd-6.woff2") format("woff2");unicode-range:U+78A3}
@font-face{font-family:"MiSans Title";font-style:normal;font-weight:500;font-display:swap;src:url("./assets/fonts/misans/md-0.woff2") format("woff2");unicode-range:U+503C,U+9646}
@font-face{font-family:"MiSans Title";font-style:normal;font-weight:500;font-display:swap;src:url("./assets/fonts/misans/md-1.woff2") format("woff2");unicode-range:U+4E30,U+8BFE}
@font-face{font-family:"MiSans Title";font-style:normal;font-weight:500;font-display:swap;src:url("./assets/fonts/misans/md-2.woff2") format("woff2");unicode-range:U+77F3}
@font-face{font-family:"MiSans Title";font-style:normal;font-weight:500;font-display:swap;src:url("./assets/fonts/misans/md-3.woff2") format("woff2");unicode-range:U+4E1C,U+52A1,U+5E02,U+670D,U+7EDF,U+8868,U+8BA1}
@font-face{font-family:"MiSans Title";font-style:normal;font-weight:500;font-display:swap;src:url("./assets/fonts/misans/md-4.woff2") format("woff2");unicode-range:U+3002,U+5173,U+540E,U+5B66,U+5C0F}
@font-face{font-family:"MiSans Title";font-style:normal;font-weight:500;font-display:swap;src:url("./assets/fonts/misans/md-5.woff2") format("woff2");unicode-range:U+8F6E,U+9547}
@font-face{font-family:"MiSans Title";font-style:normal;font-weight:500;font-display:swap;src:url("./assets/fonts/misans/md-6.woff2") format("woff2");unicode-range:U+78A3}

:root{
  /* ---------- 品牌色：小米橙 ---------- */
  --mi:#FF6700;             /* 品牌主橙 */
  --mi-hover:#F25A00;       /* 悬停 */
  --mi-press:#D95200;       /* 按下 */
  --mi-tint:#FFF4EC;        /* 浅底 */
  --mi-tint-2:#FFE7D6;      /* 稍深浅底 */
  --mi-ring:rgba(255,103,0,.18);
  --mi-glow:rgba(255,103,0,.30);

  /* ---------- 底色与层级 ---------- */
  --bg:#F7F7F7;            /* 画布 */
  --surface:#FFFFFF;       /* 卡片 */
  --surface-2:#FCFCFC;     /* 卡内浅底 */
  --well:#F7F7F7;          /* 卡内凹槽（统计块、条形区） */
  --fill:#F5F5F5;          /* 输入类浅填充 */
  --fill-2:#F0F0F0;        /* 次级按钮 / 分段控件轨道 */
  --fill-3:#E6E6E6;        /* 次级按钮 hover */
  --fill-4:#D9D9D9;        /* 更深一档 */

  /* ---------- 文字：四级灰 ---------- */
  --text:#1A1A1A;          /* 标题 / 强调 */
  --text-2:#333333;        /* 正文 */
  --text-3:#666666;        /* 次要 */
  --text-4:#999999;        /* 说明 */
  --text-5:#BBBBBB;        /* 占位 / 禁用 */

  /* ---------- 分隔线 ---------- */
  --hairline:#E8E8E8;
  --hairline-2:#EDEDED;
  --hairline-3:#F2F2F2;

  /* ---------- 语义色（降明度，可作正文阅读） ---------- */
  /* 到岗 = 绿；请假 = 琥珀（刻意避开品牌橙以免混淆）；缺勤 = 红；巡视 = 蓝 */
  --green:#0B9E4B;   --green-bg:rgba(11,158,75,.11);   --green-tint:#F4FBF6;
  --amber:#C87A00;   --amber-bg:rgba(255,167,0,.15);   --amber-tint:#FFFBF2;
  --red:#D93026;     --red-bg:rgba(217,48,38,.10);     --red-tint:#FFF6F5;
  --blue:#2F6BFF;    --blue-bg:rgba(47,107,255,.10);   --blue-tint:#F5F8FF;
  --gray:#8A8A8A;    --gray-bg:rgba(140,140,140,.13);  --gray-tint:#F8F8F8;

  /* 兼容旧变量名（样式表内部多处引用） */
  --accent:var(--mi);
  --accent-hover:var(--mi-hover);
  --accent-press:var(--mi-press);
  --accent-tint:var(--mi-tint);
  --accent-tint-2:var(--mi-tint-2);
  --accent-ring:var(--mi-ring);
  --orange:var(--amber);
  --orange-bg:var(--amber-bg);
  --orange-tint:var(--amber-tint);
  --indigo:var(--blue);
  --indigo-bg:var(--blue-bg);
  --indigo-tint:var(--blue-tint);

  /* ---------- 圆角 ---------- */
  --r-xs:6px;
  --r-sm:8px;
  --r:10px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:20px;
  --r-xxl:24px;
  --pill:999px;

  /* ---------- 阴影：白卡片靠柔和投影浮起 ---------- */
  --sh-1:0 1px 2px rgba(0,0,0,.05);
  --sh-2:0 1px 3px rgba(0,0,0,.04),0 4px 14px -6px rgba(0,0,0,.06);
  --sh-3:0 2px 6px rgba(0,0,0,.05),0 14px 30px -14px rgba(0,0,0,.13);
  --sh-4:0 20px 60px -16px rgba(0,0,0,.24),0 2px 8px rgba(0,0,0,.06);
  --sh-lift:0 6px 10px -6px rgba(0,0,0,.06),0 18px 36px -16px rgba(0,0,0,.14);
  --sh-pill:0 1px 2px rgba(0,0,0,.08);

  /* ---------- 字体：MiSans 优先（小米官网主字体） ---------- */
  --font:
    "MiSans","MiSans Latin","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI","Microsoft YaHei",
    -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,
    "Noto Sans CJK SC",sans-serif;
  --font-num:
    "MiSans","MiSans Latin","DIN Alternate","SF Pro Display",-apple-system,BlinkMacSystemFont,
    "Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-serif:var(--font);

  /* ---------- 头图标题专用字：MiSans（小米兰亭，无衬线） ----------
     2026-09-25：由「思源宋体 900」换成小米官网主字体 MiSans —— 和界面正文同源，
     标题不再跳出来，整页就是一套小米风；配上鎏金渐变与逐字跳动，醒目且有律动。
     "MiSans Title" = 本地裁剪版（校名 Bold 700 + 表名 Medium 500，只含标题 20 个字，14 个分包约 15KB）；
     装了 MiSans 的电脑直接命中本机字体，其余逐级回退到系统无衬线。 */
  --font-title:
    "MiSans Title","MiSans","MiSans Latin","PingFang SC","HarmonyOS Sans SC",
    "Microsoft YaHei UI","Microsoft YaHei",-apple-system,"Noto Sans CJK SC",sans-serif;

  /* ---------- 缓动 ---------- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--font);
  color:var(--text-2);font-size:15px;line-height:1.62;
  background-color:var(--bg);
  background-image:radial-gradient(1200px 520px at 50% -260px,rgba(255,103,0,.045),transparent 70%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

.hidden{display:none !important}

::selection{background:var(--mi-tint-2);color:var(--text)}

/* 滚动条：细、灰、不抢眼 */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.15);border-radius:10px;border:3px solid transparent;background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.26);background-clip:padding-box}

:focus-visible{outline:2px solid var(--mi);outline-offset:2px;border-radius:6px}

/* ============================================================
   头图 —— 校园实景图（国旗·教学楼·孩子活动，已裁切调色）
   四层：照片（缓慢推近）→ 遮罩（左下压暗给标题让位 + 右上橙色光晕）
        → 光带（斜扫）→ 标题
   尺寸：2026-09-25 压扁一档 —— clamp(134px,11.6vw,190px)，1440≈167px / 1920≈190px
        （原 156–260px 偏高，首屏第一张卡被推到折叠线以下；压扁的同时把校名放大到 46px，
          形成「矮栏 + 大字」的高对比版式，头部占比降到首屏 19% 左右）
   素材：assets/hero-banner.jpg（桌面 3:1，取景重心 50% 6% = 天空 + 国旗 + 教学楼）
        hero-banner-t.jpg（中屏 2.4:1，≤1000px 起用）
        hero-banner-m.jpg（1.625:1，当前未引用，留作窄屏备用）
   ============================================================ */
.hero{
  --hero-h:clamp(134px,11.6vw,190px);
  position:relative;overflow:hidden;isolation:isolate;
  height:var(--hero-h);
  background:#0E1119;
  border-bottom:1px solid rgba(0,0,0,.30);
}
/* 顶部品牌渐变条（带辉光） */
.hero::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:6;pointer-events:none;
  background:linear-gradient(90deg,#FF6700 0%,#FF9500 20%,#FFC02E 50%,#FF9500 80%,#FF6700 100%);
  box-shadow:0 0 18px rgba(255,149,0,.6);
}
.hero-photo{
  position:absolute;inset:0;z-index:0;
  background-image:url("./assets/hero-banner.jpg");
  background-size:cover;background-position:50% 6%;background-repeat:no-repeat;
  filter:contrast(1.02);
  transform-origin:52% 30%;
  animation:heroPan 46s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroPan{
  from{transform:scale(1.012) translate3d(0,0,0)}
  to{transform:scale(1.05) translate3d(-.6%,-.8%,0)}
}
/* 遮罩：左下压暗给标题让位，右上橙色光晕呼应品牌，顶部轻压暗、底部向页面过渡
   （新图天空明亮，顶部压暗要比原航拍图轻，否则蓝天会发灰） */
.hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(76% 150% at 2% 100%,rgba(6,10,17,.80) 0%,rgba(6,10,17,.50) 34%,rgba(6,10,17,.14) 64%,rgba(6,10,17,0) 90%),
    radial-gradient(50% 120% at 99% 2%,rgba(255,138,20,.30) 0%,rgba(255,103,0,0) 64%),
    linear-gradient(180deg,rgba(6,9,14,.26) 0%,rgba(6,9,14,.05) 28%,rgba(6,9,14,0) 46%),
    linear-gradient(180deg,rgba(6,9,14,0) 64%,rgba(6,9,14,.24) 86%,rgba(6,9,14,.46) 100%);
}
/* 底部发光分隔线：与导航区自然衔接 */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:6;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,103,0,.15),rgba(255,149,0,.85) 22%,rgba(255,192,46,.95) 50%,rgba(255,149,0,.85) 78%,rgba(255,103,0,.15));
  box-shadow:0 -8px 22px rgba(255,120,0,.35);
}
/* 光带：每 12 秒斜扫一次（新图偏亮，强度收一档，只做「阳光掠过」的暗示） */
.hero-sheen{
  position:absolute;top:-35%;bottom:-35%;left:0;width:44%;z-index:2;pointer-events:none;
  mix-blend-mode:screen;
  background:linear-gradient(102deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.06) 42%,rgba(255,246,232,.15) 52%,rgba(255,255,255,0) 100%);
  transform:translateX(-140%) rotate(2.5deg);
  animation:heroSheen 12s ease-in-out infinite;
}
@keyframes heroSheen{
  0%,60%{transform:translateX(-140%) rotate(2.5deg);opacity:0}
  66%{opacity:1}
  100%{transform:translateX(340%) rotate(2.5deg);opacity:0}
}
/* （原「国旗 / 孩子 / 气球 / 鲜花 / 蝴蝶」SVG 装饰层已随照片换新而移除：
   新图本身已包含这些元素，保留会重复。备份见 backup/hero-old/hero-art-backup.html） */

/* 超大屏（≥2000px）：3:1 的图需要更高的头图，否则孩子与花坛会被裁掉 */
@media (min-width:2000px){
  .hero{--hero-h:clamp(190px,11.6vw,238px)}
  .hero-photo{background-position:50% 6%}
}

/* ------------------------------------------------------------
   标题区（盖在头图上：白字 + 白→暖金文字渐变）
   ------------------------------------------------------------ */
.hero-inner{
  position:relative;z-index:4;height:100%;
  max-width:1140px;margin:0 auto;
  padding:13px 26px 15px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:13px;min-width:0}
.brand-mark{
  width:52px;height:52px;flex:0 0 52px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-title);           /* 校徽与校名同源，都是 MiSans */
  font-size:17px;font-weight:700;letter-spacing:.08em;
  color:#FFF6E6;
  background:linear-gradient(158deg,#FF9A50,#FF6A00 55%,#D94F00);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,
             0 0 0 1px rgba(255,214,150,.55) inset,     /* 内圈金线：做出「印章」的边框 */
             0 0 0 1px rgba(255,255,255,.30),
             0 14px 30px -12px rgba(0,0,0,.85);
  text-shadow:0 1px 2px rgba(120,45,0,.45);
  user-select:none;
  animation:markGlow 6s ease-in-out infinite;
}
@keyframes markGlow{
  0%,100%{box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 0 0 1px rgba(255,255,255,.32),0 14px 30px -12px rgba(0,0,0,.85),0 0 0 0 rgba(255,103,0,.5)}
  50%{box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 0 0 1px rgba(255,255,255,.42),0 14px 30px -12px rgba(0,0,0,.85),0 0 34px 4px rgba(255,120,0,.45)}
}
.brand-text{
  position:relative;min-width:0;
  /* 衬线大字校名 + 无衬线小字表名并排一行：基线对齐，窄屏兜底可换行 */
  display:flex;align-items:baseline;flex-wrap:wrap;
  column-gap:20px;row-gap:4px;
}
/* 标题背后的暗晕：一行横排后改成扁椭圆，让大字号压在照片上依然清楚 */
.brand-text::before{
  content:"";position:absolute;left:-30px;right:-62px;top:-20px;bottom:-14px;z-index:-1;
  border-radius:50%;
  background:radial-gradient(60% 92% at 42% 52%,rgba(6,10,17,.62) 0%,rgba(6,10,17,.27) 58%,rgba(6,10,17,0) 86%);
}
.brand-title{
  font-family:var(--font-title);           /* MiSans 小米兰亭：与界面同源 */
  font-size:clamp(29px,3.2vw,47px);        /* 1440≈46px；矮栏 + 大字 */
  font-weight:700;                         /* MiSans Bold：46px 下够醒目，又不至于笨重 */
  letter-spacing:.045em;line-height:1.06;color:#fff;
  white-space:nowrap;                      /* 每个字是 inline-block，靠这句保证不换行 */
  text-shadow:0 3px 16px rgba(5,8,13,.9),0 1px 2px rgba(5,8,13,.7);
}
/* ---------------------------------------------------------------
   一句话，一个字一个字地跳（2026-09-25）
   ---------------------------------------------------------------
   每个字都是一个 .ch（inline-block），自己带「整行鎏金渐变里的一段」，
   按 --i 依次延迟起跳 → 整句像波浪一样逐字蹦起来，跳完即静，一轮 4 秒。
   --i 全局连续：校名 0..n-1，表名紧接在后面（由 app.js 的
   splitBrandChars() 计算并写入，见 applySettingsToChrome()）。

   ⚠️ 渐变必须挂在「字」上，不能挂在 .brand-title 上：父级一旦
      background-clip:text，后代再 transform 会让整行字直接消失
      （Chromium 已知行为，踩过坑）。
   渐变错位公式（--n = 本行字数，--i = 第几个字）：
      background-size:calc(var(--n) * 100%)
        → 把整条渐变拉宽成「整行宽」，每个字只露出属于自己的一格；
      background-position:calc(var(--i) * 100% / (var(--n) - 1))
        → 百分比按 (元素宽 − 图宽) 折算，正好把第 i 个字对准第 i 段。
   一个字宽度 = 1em + letter-spacing，各字等宽，所以拼出来与原「整块渐变」无差别。
   --------------------------------------------------------------- */
.brand-title .ch,.brand-sub .ch{
  display:inline-block;
  will-change:transform;
  animation:chHop 4s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * 70ms);
}
/* 起跳 → 落回 → 小回弹 → 静止等下一轮（其余 80% 时间不动，不干扰阅读） */
@keyframes chHop{
  0%      {transform:translateY(0) scale(1)}
  6%      {transform:translateY(-.24em) scale(1.03)}
  12%     {transform:translateY(0) scale(1)}
  16%     {transform:translateY(-.07em) scale(1)}
  20%,100%{transform:translateY(0) scale(1)}
}
/* 鎏金文字：整行一条多段香槟金渐变（暗金→亮金→米白反复），由每个字各取一段拼成，
   看上去和原来「整块渐变」一模一样。父级要关掉 text-shadow，
   否则透明字会被阴影糊成实心块；不支持 background-clip:text 的浏览器保持白色纯色。 */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .brand-title{text-shadow:none}
  .brand-title .ch{
    background-image:linear-gradient(100deg,
      #FFFFFF 0%,#FFF4E2 12%,#FFDCA8 26%,#FFC275 38%,
      #FFF3E0 50%,#FFD08A 62%,#FFE7C4 74%,#FFFFFF 88%,#FFF7EC 100%);
    background-size:calc(var(--n,7) * 100%) 100%;background-repeat:no-repeat;
    background-position:calc(var(--i,0) * 100% / (var(--n,7) - 1)) 50%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 2px 3px rgba(4,7,12,.62)) drop-shadow(0 7px 22px rgba(4,7,12,.72));
  }
}
/* 副标题：与校名并排。字号 ≈ 校名的 50%，字距放宽到 .14em ——
   中文拉大字距是版式上最省力的「高级感」手法，也让小字在大字旁边不被压住。
   前分隔符由发光圆点改成一段竖直金线，更克制、更像印刷品的分栏线。 */
.brand-sub{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-title);            /* 表名与校名同源：MiSans Medium，不再回退到系统字体 */
  font-size:clamp(15px,1.58vw,23px);       /* 1440≈22.8px */
  font-weight:500;letter-spacing:.14em;line-height:1.25;   /* MiSans Medium */
  color:#FFF2DE;white-space:nowrap;
  text-shadow:0 1px 3px rgba(5,8,13,.85),0 2px 16px rgba(5,8,13,.95);
}
/* 表名的字装在 .sub-chars 里：这样 .brand-sub 的 flex gap 只作用在
   「金线 ↔ 整串字」之间，不会插到字与字中间去 */
.brand-sub .sub-chars{display:inline-block;white-space:nowrap}
.brand-sub::before{
  content:"";flex:0 0 2px;width:2px;height:.92em;border-radius:2px;align-self:center;
  background:linear-gradient(180deg,rgba(255,214,150,0),#FFC978 22%,#FFE7C4 50%,#FFC978 78%,rgba(255,214,150,0));
  box-shadow:0 0 10px rgba(255,180,90,.75);
}
/* 学年学期：右下角、与标题同一水平线（2026-09-21 由右上角 11px 小字下移并放大；
   原来放左上/右上都会被国旗与橙色光晕抢视线，右下正好与标题形成左右呼应） */
.hero-aside{
  position:absolute;right:26px;left:auto;top:auto;bottom:18px;
  display:flex;align-items:center;gap:9px;
  padding:8px 16px;border-radius:999px;
  font-size:15px;font-weight:600;letter-spacing:.04em;color:#fff;
  background:rgba(9,13,20,.72);
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 10px 26px -16px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.14) inset;
  text-shadow:0 1px 8px rgba(5,8,13,.9);
  white-space:nowrap;
}
.hero-dot{
  width:7px;height:7px;border-radius:50%;background:var(--mi);
  box-shadow:0 0 0 3px rgba(255,103,0,.26);
  animation:pulseDot 2.6s ease-in-out infinite;
}
@keyframes pulseDot{
  0%,100%{box-shadow:0 0 0 3px rgba(255,103,0,.26)}
  50%{box-shadow:0 0 0 8px rgba(255,103,0,0)}
}

/* ============================================================
   吸顶导航（头图滚过后常驻：白条 + 发丝线）
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--hairline);
  box-shadow:0 10px 24px -20px rgba(16,24,40,.55);
}
.topbar-inner{max-width:1140px;margin:0 auto;padding:9px 26px}
.tabs{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  width:fit-content;max-width:100%;
  padding:5px;border-radius:var(--pill);
  background:var(--well);
  border:1px solid var(--hairline-2);
  box-shadow:inset 0 1px 2px rgba(16,24,40,.045);
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  position:relative;overflow:hidden;
  appearance:none;border:0;background:transparent;
  color:var(--text-3);
  font-family:inherit;font-size:15.5px;font-weight:600;letter-spacing:.01em;line-height:1.2;
  padding:11px 24px;border-radius:var(--pill);cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px;
  transition:background .22s var(--ease-soft),color .22s var(--ease-soft),
             box-shadow .22s var(--ease-soft),transform .18s var(--ease-soft);
}
.tab .ti{
  width:18px;height:18px;flex:0 0 18px;stroke:currentColor;fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.tab:hover{background:rgba(255,255,255,.92);color:var(--text);box-shadow:0 1px 2px rgba(16,24,40,.07);transform:translateY(-1px)}
.tab:hover .ti{transform:translateY(-1px) scale(1.1)}
.tab.active{
  color:#fff;font-weight:600;
  background:linear-gradient(158deg,#FF8A3D 0%,var(--mi) 48%,#F04E00 100%);
  box-shadow:0 7px 18px -7px var(--mi-glow),0 1px 0 rgba(255,255,255,.30) inset;
}
.tab.active:hover{transform:translateY(-1px)}
.tab:active{transform:scale(.94)}
.tab:focus-visible{outline:0;box-shadow:0 0 0 3px var(--mi-ring)}

/* 窄屏用的短文案（点名 / 月度 / 学期 / 轮值 / 设置），<=360px 才切换 */
.t-short{display:none}

/* 点击水波：JS 在指针位置插一枚 span，纯 CSS 播完即消失 */
.tab .ripple{
  position:absolute;left:0;top:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.85) 0%,rgba(255,255,255,.38) 42%,rgba(255,255,255,0) 72%);
  transform:translate(-50%,-50%) scale(0);
  animation:tabRipple .58s var(--ease-soft) forwards;
}
.tab:not(.active) .ripple{
  background:radial-gradient(circle,rgba(255,103,0,.34) 0%,rgba(255,103,0,.14) 42%,rgba(255,103,0,0) 72%);
}
@keyframes tabRipple{
  from{transform:translate(-50%,-50%) scale(0);opacity:1}
  to{transform:translate(-50%,-50%) scale(1);opacity:0}
}

/* 选中瞬间弹一下（只在切换时跑，类名由 app.js 加） */
@keyframes tabPop{
  0%{transform:scale(.9)}
  58%{transform:scale(1.05)}
  100%{transform:scale(1)}
}
.tab.pop{animation:tabPop .42s var(--ease-soft)}

/* 选中瞬间一道斜扫光带（挂 ::after，只在拿到 .active 时播一次） */
.tab.active::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(104deg,transparent 32%,rgba(255,255,255,.5) 50%,transparent 68%);
  transform:translateX(-130%);opacity:0;
  animation:tabShine .75s var(--ease-soft) .06s 1;
}
@keyframes tabShine{
  0%{transform:translateX(-130%);opacity:1}
  100%{transform:translateX(130%);opacity:0}
}

/* ============================================================
   布局
   ============================================================ */
.wrap{max-width:1140px;margin:0 auto;padding:26px 26px 44px}
.foot{max-width:1140px;margin:0 auto;padding:0 26px 36px;text-align:center}
.foot-line{font-size:12.5px;color:var(--text-4);letter-spacing:.02em}
.foot-sub{font-size:11.5px;color:var(--text-5);letter-spacing:.02em;margin-top:4px}

/* ============================================================
   卡片 —— 白底 + 发丝线 + 悬停抬起（小米商城的招牌手感）
   ============================================================ */
.card{
  background:var(--surface);
  border:1px solid var(--hairline-2);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  padding:24px 26px 22px;margin-bottom:18px;
  transition:box-shadow .28s var(--ease-soft),transform .28s var(--ease-soft),border-color .28s var(--ease-soft);
}
@media (hover:hover){
  .card:hover{
    box-shadow:var(--sh-lift);transform:translateY(-2px);border-color:var(--hairline);
  }
}
.card-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-bottom:16px;
}
.card-head h2{
  margin:0;
  font-size:17px;font-weight:600;color:var(--text);letter-spacing:.01em;
  display:flex;align-items:center;
}
/* 标题前的橙色短竖条 */
.card-head h2::before{
  content:"";flex:none;width:3px;height:15px;border-radius:2px;
  background:var(--mi);margin-right:9px;
}
.head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* 月份切换：白色描边分段控件 */
.month-nav{
  display:inline-flex;align-items:center;gap:2px;
  background:#fff;border:1px solid var(--hairline);border-radius:var(--pill);padding:2px;
}
.month-nav .btn{
  border:0;border-radius:var(--pill);background:transparent;color:var(--text-3);
  font-size:13px;font-weight:500;padding:6px 14px;box-shadow:none;
}
.month-nav .btn:hover{background:var(--mi-tint);color:var(--mi);box-shadow:none}
.month-nav input[type=month]{
  width:auto;min-width:126px;
  border:0;border-radius:var(--pill);padding:5px 12px;
  font-size:13.5px;font-weight:600;color:var(--text);font-family:var(--font-num);
  text-align:center;background:transparent;
}
.month-nav input[type=month]:focus{background:#fff;box-shadow:0 0 0 3px var(--mi-ring)}

.muted-note{
  font-size:12.5px;color:var(--text-4);
  padding:3px 11px;border-radius:var(--pill);background:var(--fill);
}
.badge{
  font-size:12.5px;font-weight:500;color:var(--text-3);
  background:var(--fill);border-radius:var(--pill);padding:4px 12px;
}
.legend{font-size:13px;color:var(--text-4);margin:0 0 16px;line-height:1.72;letter-spacing:.01em}
.legend b{color:var(--text-2);font-weight:600}
.only-mobile{display:none}
.hint{font-size:13px;color:var(--text-4);margin-top:14px;line-height:1.72;letter-spacing:.01em}
.hint b{color:var(--text-2);font-weight:600}

/* ============================================================
   表单
   ============================================================ */
.field-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:2px}
.field{flex:1 1 220px;display:flex;flex-direction:column;gap:7px;min-width:0}
.field>span{font-size:13px;font-weight:500;color:var(--text-3);letter-spacing:.01em}

input[type=text],input[type=password],input[type=date],input[type=month],select,input[type=number]{
  font-family:inherit;font-size:15px;color:var(--text);
  background:#fff;border:1px solid var(--hairline);border-radius:var(--r);
  padding:10px 13px;width:100%;
  transition:border-color .18s var(--ease-soft),box-shadow .18s var(--ease-soft);
}
input::placeholder{color:var(--text-5)}
input[type=text]:hover,input[type=password]:hover,input[type=date]:hover,
input[type=month]:hover,select:hover,input[type=number]:hover{border-color:var(--fill-4)}
input:focus,select:focus{
  outline:0;border-color:var(--mi);
  box-shadow:0 0 0 3px var(--mi-ring);
}

/* ---------- 按钮：小米橙实心 + 小圆角 ---------- */
.btn{
  appearance:none;font-family:inherit;font-size:14px;font-weight:500;letter-spacing:.01em;
  cursor:pointer;border-radius:var(--r);padding:9px 20px;border:1px solid transparent;
  white-space:nowrap;
  transition:background .2s var(--ease-soft),color .2s var(--ease-soft),
             border-color .2s var(--ease-soft),box-shadow .2s var(--ease-soft),transform .12s var(--ease-soft);
}
.btn:active{transform:scale(.98)}
.btn-primary{
  color:#fff;background:var(--mi);
  box-shadow:0 4px 12px -5px var(--mi-glow);
}
.btn-primary:hover{background:var(--mi-hover);box-shadow:0 6px 16px -5px var(--mi-glow)}
.btn-primary:active{background:var(--mi-press)}
/* 次级按钮：白底描边，悬停变橙（mi.com 的次要按钮行为） */
.btn-ghost{
  background:#fff;color:var(--text-2);border-color:var(--fill-4);
}
.btn-ghost:hover{border-color:var(--mi);color:var(--mi);background:#fff}
/* 浅橙底的次级强调 */
.btn-gold{
  background:var(--mi-tint);color:var(--mi);
}
.btn-gold:hover{background:var(--mi-tint-2)}
.btn-danger{
  background:var(--red-bg);color:var(--red);
}
.btn-danger:hover{background:rgba(217,48,38,.17)}
.btn-sm{padding:6px 14px;font-size:13px}
.btn-lg{padding:12px 34px;font-size:15px;font-weight:600}
.btn-block{width:100%;display:block}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* ============================================================
   今日点名 · 班次行
   ============================================================ */
.entry-list{display:flex;flex-direction:column;gap:10px}
.entry-row{
  position:relative;overflow:hidden;
  border-radius:var(--r-md);
  padding:16px 18px 16px 20px;background:var(--well);
  border:1px solid transparent;
  transition:background .22s var(--ease-soft),border-color .22s var(--ease-soft),box-shadow .22s var(--ease-soft);
}
.entry-row::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;
  background:var(--fill-4);transition:background .22s var(--ease-soft);
}
.entry-row:hover{background:#F2F2F2}
/* 已登记：底色跟随实际状态（:has() 不被支持时退回上面的灰底，不影响可用性） */
.entry-row.done{background:var(--green-tint);border-color:rgba(11,158,75,.16)}
.entry-row.done::before{background:var(--green)}
.entry-row.done:has(.seg button[data-on="1"][data-s="leave"]){background:var(--amber-tint);border-color:rgba(200,122,0,.18)}
.entry-row.done:has(.seg button[data-on="1"][data-s="leave"])::before{background:var(--amber)}
.entry-row.done:has(.seg button[data-on="1"][data-s="absent"]){background:var(--red-tint);border-color:rgba(217,48,38,.16)}
.entry-row.done:has(.seg button[data-on="1"][data-s="absent"])::before{background:var(--red)}
.entry-row.done:has(.seg button[data-on="1"][data-s="off"]){background:var(--gray-tint);border-color:var(--hairline)}
.entry-row.done:has(.seg button[data-on="1"][data-s="off"])::before{background:var(--text-5)}
.entry-row.off{opacity:.55}
.entry-row.off::before{background:var(--text-5)}
.entry-main{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}
.entry-group{flex:1 1 190px;min-width:170px}
.entry-gname{font-size:15px;font-weight:600;color:var(--text);letter-spacing:.01em}
.entry-gmeta{font-size:12.5px;color:var(--text-4);margin-top:4px;letter-spacing:.01em}
.entry-teacher{display:flex;align-items:baseline;gap:7px;margin-top:9px;font-size:13.5px;color:var(--text-4)}
.entry-teacher b{font-size:16px;font-weight:600;color:var(--text);letter-spacing:.03em}
.entry-teacher .sub{color:var(--blue);font-weight:600;font-size:14px}
.entry-actions{display:flex;flex-direction:column;gap:10px;flex:1 1 360px}

/* 状态选择：分段控件（选中 = 白胶囊 + 语义色字） */
.seg{
  display:inline-flex;gap:3px;flex-wrap:wrap;align-self:flex-start;
  background:rgba(0,0,0,.055);border-radius:var(--pill);padding:3px;
}
.seg button{
  /* 到岗 / 请假 / 缺勤 / 停课：全页最常点的四个按钮，字号 13.5→16px、字重 500→600，
     点击目标也随之变大（padding 7×16 → 9×21），远看近点都更醒目 */
  appearance:none;font-family:inherit;font-size:16px;font-weight:600;letter-spacing:.02em;
  cursor:pointer;border:0;background:transparent;color:var(--text-2);
  border-radius:var(--pill);padding:9px 21px;
  transition:background .2s var(--ease-soft),color .2s var(--ease-soft),box-shadow .2s var(--ease-soft);
}
.seg button:hover{color:var(--text)}
.seg button:active{transform:scale(.98)}
.seg button[data-on="1"]{
  background:#fff;font-weight:700;box-shadow:var(--sh-pill);
}
.seg button[data-on="1"][data-s="present"]{color:var(--green)}
.seg button[data-on="1"][data-s="leave"]{color:var(--amber)}
.seg button[data-on="1"][data-s="absent"]{color:var(--red)}
.seg button[data-on="1"][data-s="off"]{color:var(--gray)}

.sub-wrap{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text-3);padding-top:1px}
.sub-wrap select{max-width:200px;padding:7px 11px;font-size:13.5px;border-radius:var(--r-sm)}
.sub-wrap .sub-label{white-space:nowrap;color:var(--blue);font-weight:600;font-size:12.5px}

.save-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--hairline-3);
}
.save-info{font-size:13px;color:var(--text-4)}

/* ============================================================
   统计卡 —— 白底描边卡，数字用品牌橙（小米的「价格感」）
   ============================================================ */
/* 6 张统计卡 → 3×2 均衡排布，避免最后一张落单 */
.stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
/* 弹窗内的统计块条目数不定，交回自动填充 */
.modal-body .stat-cards{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.stat-card{
  background:#fff;border:1px solid var(--hairline-2);border-radius:var(--r-md);
  padding:16px 18px 15px;
  transition:border-color .22s var(--ease-soft),box-shadow .22s var(--ease-soft),transform .22s var(--ease-soft);
}
@media (hover:hover){
  .stat-card:hover{
    border-color:var(--hairline);transform:translateY(-2px);
    box-shadow:0 8px 20px -12px rgba(0,0,0,.18);
  }
}
.stat-card .k{
  font-size:12.5px;font-weight:500;color:var(--text-4);letter-spacing:.02em;
  display:flex;align-items:center;gap:7px;
}
/* 语义区分只用一个 6px 圆点；数字统一品牌橙，保持色调统一。
   ⚠️ 圆点色要跟品牌橙拉开色相，否则 #C87A00 与 #FF6700 在小尺寸下几乎同色 */
.stat-card .k::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--text-5);
}
.stat-card.ok .k::before{background:#12B356}
.stat-card.warn .k::before{background:#FFB020}
.stat-card.offc .k::before{background:var(--mi)}
.stat-card .v{
  font-family:var(--font-num);
  font-size:clamp(24px,2.2vw,30px);font-weight:700;line-height:1.22;margin-top:8px;
  color:var(--mi);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.stat-card .u{font-size:13px;font-weight:400;color:var(--text-4);margin-left:4px;letter-spacing:0}

/* ============================================================
   表格
   ============================================================ */
.table-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--hairline-2);border-radius:var(--r-md);
  background:#fff;
}
.data-table{
  width:100%;border-collapse:separate;border-spacing:0;
  font-size:14px;min-width:580px;background:#fff;
}
.data-table th{
  position:sticky;top:0;z-index:2;
  background:#FAFAFA;
  color:var(--text-4);font-weight:600;font-size:12.5px;letter-spacing:.04em;
  text-align:left;padding:11px 14px;white-space:nowrap;
  border-bottom:1px solid var(--hairline);
}
.data-table td{
  padding:11px 14px;border-bottom:1px solid var(--hairline-3);
  white-space:nowrap;color:var(--text-2);vertical-align:middle;
}
.data-table tbody tr{transition:background .16s var(--ease-soft)}
.data-table tbody tr:hover td{background:#FFF9F5}
.data-table tbody tr:last-child td{border-bottom:0}

.data-table .num{
  text-align:right;font-variant-numeric:tabular-nums;
  font-family:var(--font-num);font-weight:500;
}
.data-table .c-idx{width:56px;text-align:center}
.data-table .c-act{width:78px;text-align:center}
.data-table td.c-idx,.data-table td.c-act{text-align:center}
.data-table td.c-idx{color:var(--text-5);font-family:var(--font-num);font-weight:500}

.data-table tfoot td{
  background:#FAFAFA;
  font-weight:600;color:var(--text);
  border-top:1px solid var(--hairline);border-bottom:0;
  letter-spacing:.01em;
}

.data-table .ok{color:var(--green)}
.data-table .warn{color:var(--amber)}
.data-table .bad{color:var(--red)}
.data-table .alt{color:var(--blue)}
/* 「计次」列：整列淡橙高亮 + 橙色数字 */
.data-table tbody tr td.total{
  color:var(--mi);font-weight:700;font-size:15px;
  background:rgba(255,103,0,.045);
}
.data-table tbody tr:hover td.total{background:rgba(255,103,0,.09)}
.data-table tfoot td.total{background:rgba(255,103,0,.08);color:var(--mi)}
.data-table .zero{color:var(--text-5);font-weight:400}

.name-cell{font-weight:600;color:var(--text);letter-spacing:.03em}

.row-super td{background:var(--gray-tint) !important}
.row-super td:first-child{box-shadow:3px 0 0 -1.5px var(--text-5) inset}
.row-officer td{background:rgba(255,103,0,.035) !important}
.row-officer td:first-child{box-shadow:3px 0 0 -1.5px var(--mi) inset}

.mini-btn{
  appearance:none;border:1px solid var(--hairline);background:#fff;color:var(--text-2);
  font-family:inherit;font-size:12.5px;font-weight:500;
  border-radius:var(--r-sm);padding:5px 14px;cursor:pointer;
  transition:background .18s var(--ease-soft),color .18s var(--ease-soft),border-color .18s var(--ease-soft);
}
.mini-btn:hover{background:var(--mi-tint);color:var(--mi);border-color:var(--mi-tint-2)}
/* 删除键走「白底红字、悬停才实心」——一列 9 个红块会盖掉整张表的可读性 */
.mini-btn.danger{background:#fff;color:var(--red);border-color:rgba(217,48,38,.28)}
.mini-btn.danger:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* ============================================================
   轮值教师自定义（六年作文班 / 四年数学班）
   轮值总表：五天合并成一条说明；今日点名：当天现场选老师
   ============================================================ */
.row-flex td{background:rgba(255,103,0,.045) !important}
.row-flex td:first-child{box-shadow:3px 0 0 -1.5px var(--mi) inset}
.flex-cell{color:var(--text-3);font-size:13.5px;line-height:1.7}
/* 合并 5 列的说明格若继承 .data-table td 的 nowrap，
   它的超长文本会按 1/5 摊进「星期一~五」5 列，把整张表顶宽；这里允许换行 */
.roster-table td.flex-cell{white-space:normal}
.flex-tag{
  display:inline-block;margin-right:10px;padding:3px 10px;border-radius:999px;
  background:var(--mi-tint);color:var(--mi);font-size:12.5px;font-weight:700;
  border:1px solid var(--mi-tint-2);white-space:nowrap;
}
.flex-cell .fx{color:var(--text-2)}
.flex-cell .fx b{color:var(--mi)}
.flex-cell .fx-2{display:inline-block;margin-left:10px;color:var(--text-4)}
.flex-cell .fx-2::before{content:'·';margin-right:6px}

/* 今日点名：自定义班次的「选择轮值教师」 */
.entry-teacher .need-pick{color:var(--red);font-weight:700}
.flex-pick{
  display:flex;align-items:center;gap:9px;margin-top:10px;
  padding:8px 11px;border-radius:var(--r-md);
  background:var(--mi-tint);border:1px dashed var(--mi-tint-2);
}
.flex-pick .fp-label{font-size:12.5px;font-weight:600;color:var(--mi);white-space:nowrap}
.flex-pick select{
  flex:1 1 auto;min-width:0;height:34px;padding:0 10px;
  border:1px solid var(--mi-tint-2);border-radius:var(--r-sm);
  background:#fff;color:var(--text-1);
  font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  transition:border-color .18s var(--ease-soft),box-shadow .18s var(--ease-soft);
}
.flex-pick select:hover{border-color:var(--mi)}
.flex-pick select:focus{outline:none;border-color:var(--mi);box-shadow:0 0 0 3px var(--mi-ring)}
@media (max-width:720px){
  .flex-cell{font-size:12.5px}
  .flex-cell .fx-2{display:block;margin-left:0}
  .flex-cell .fx-2::before{content:'';margin:0}
  .flex-pick{flex-wrap:wrap;gap:6px}
  .flex-pick select{flex:1 1 100%}
}

/* ============================================================
   本日值日行政提示条
   ============================================================ */
.officer-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;
  padding:13px 18px;border-radius:var(--r-md);
  background:var(--mi-tint);
  font-size:13.5px;
}
.officer-bar:empty{display:none}
.officer-bar .ob-label{font-size:12.5px;font-weight:600;color:var(--mi);letter-spacing:.02em}
.officer-bar .ob-name{
  background:#fff;color:var(--text);
  font-weight:600;letter-spacing:.03em;border-radius:var(--pill);padding:4px 14px;font-size:13.5px;
  box-shadow:var(--sh-1);
}
.officer-bar .ob-sep{width:1px;height:16px;background:var(--mi-tint-2)}
.officer-bar .ob-sup{color:var(--blue);font-weight:600;letter-spacing:.02em}
.officer-bar .ob-empty{color:var(--text-3);font-size:13px}

/* ============================================================
   轮值总表内嵌输入
   ============================================================ */
.roster-table input[type=text]{
  padding:7px 9px;font-size:14px;text-align:center;border-radius:var(--r-sm);
  width:78px;min-width:0;   /* 必须给显式 width：input 固有宽度由默认 size=20 决定，min-width 压不下去 */
  letter-spacing:.03em;
}
.roster-table input[type=text]:hover{border-color:var(--fill-4)}
.roster-table td{padding:8px 8px}
.roster-table .gcell{font-weight:600;color:var(--text);letter-spacing:.02em}
.roster-table .ccell{color:var(--text-4);font-size:13.5px;white-space:nowrap}
.roster-table input.blank{background:var(--surface-2);color:var(--text-5);border-style:dashed;border-color:var(--fill-4)}
.roster-table .cnt-cell{padding:8px 8px}
.roster-table .cnt-input{
  min-width:66px;width:66px;font-variant-numeric:tabular-nums;font-weight:600;
  color:var(--text);-moz-appearance:textfield;
}
.roster-table .cnt-input::-webkit-outer-spin-button,
.roster-table .cnt-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.roster-table .c-op{width:86px;text-align:center}
.roster-table tr.row-flex .c-op{display:flex;flex-direction:column;gap:5px}
.roster-table tr.row-flex .c-op .mini-btn{width:100%}
/* 每节服务费（元） */
.roster-table .fee-cell{padding:8px 8px}
.roster-table .fee-input{
  min-width:74px;width:74px;text-align:right;
  font-variant-numeric:tabular-nums;font-weight:600;color:var(--text);
  -moz-appearance:textfield;
}
.roster-table .fee-input::-webkit-outer-spin-button,
.roster-table .fee-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ============================================================
   金额列（服务费）
   ============================================================ */
.data-table th.money,.data-table td.money{
  color:var(--mi-press);font-weight:700;
  font-variant-numeric:tabular-nums;
}
.data-table tbody tr td.money{background:rgba(255,103,0,.02)}
.data-table tbody tr:hover td.money{background:rgba(255,103,0,.07)}
.data-table tfoot td.money{background:rgba(255,103,0,.08);color:var(--mi-press)}
.data-table tbody tr.row-sum td{background:#FAFAFA;font-weight:600;color:var(--text)}
.data-table tbody tr.row-sum td.money{background:rgba(255,103,0,.06)}
/* 统计卡「服务费合计」：用 ￥ 记号代替圆点，跟其他卡片区分开 */
.stat-card.money .k::before{
  content:"￥";width:auto;height:auto;border-radius:0;background:none;
  color:var(--mi-press);font-size:13px;font-weight:700;line-height:1;
}

/* ============================================================
   教师名单
   ============================================================ */
.staff-add{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.staff-add input{flex:1 1 170px}
.staff-add select{flex:0 0 152px}
.staff-list{display:flex;flex-wrap:wrap;gap:8px}
.staff-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--fill);border-radius:var(--pill);
  padding:6px 8px 6px 16px;font-size:13.5px;font-weight:500;letter-spacing:.01em;
  color:var(--text-2);
  transition:background .2s var(--ease-soft);
}
.staff-chip:hover{background:var(--fill-2)}
.staff-chip.sup{background:var(--blue-bg);color:var(--blue)}
.staff-chip.sup:hover{background:rgba(47,107,255,.16)}
.staff-chip.off{opacity:.5;text-decoration:line-through;text-decoration-color:rgba(0,0,0,.3)}
.staff-chip button{
  appearance:none;border:0;background:rgba(0,0,0,.07);color:var(--text-3);
  width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:13px;line-height:1;
  font-family:inherit;padding:0;flex:none;
  transition:background .18s var(--ease-soft),color .18s var(--ease-soft);
}
.staff-chip button:hover{background:var(--red-bg);color:var(--red)}
.staff-chip .chip-back{background:var(--green-bg);color:var(--green);font-size:14px}
.staff-chip .chip-back:hover{background:rgba(11,158,75,.20);color:#087A39}

/* ============================================================
   弹窗内表单与提示
   ============================================================ */
.form-grid{display:flex;flex-direction:column;gap:15px}
.del-who{margin:0;font-size:15px;color:var(--text-2)}
.del-who b{color:var(--text);letter-spacing:.03em}
.chk-line{
  display:flex;align-items:flex-start;gap:10px;margin:16px 0 4px;padding:13px 15px;
  background:var(--well);border-radius:var(--r-md);
  font-size:13.5px;color:var(--text-2);line-height:1.66;cursor:pointer;
  transition:background .18s var(--ease-soft);
}
.chk-line:hover{background:#F2F2F2}
.chk-line input{width:17px;height:17px;margin-top:2px;flex:none;accent-color:var(--mi)}
.chk-line input:disabled{cursor:not-allowed}
.chk-line:has(input:disabled){opacity:.55;cursor:not-allowed}
.hidden-note{display:inline-block;margin-top:5px;color:var(--text-4)}

/* ============================================================
   操作说明
   ============================================================ */
.guide{margin:0;padding-left:22px;color:var(--text-2);font-size:14px;line-height:1.95}
.guide li{margin-bottom:5px;padding-left:2px}
.guide li b{color:var(--text);font-weight:600}
.guide li::marker{color:var(--text-5)}

/* ============================================================
   弹窗
   ============================================================ */
.modal{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:18px;
  animation:maskIn .24s var(--ease-soft);
}
.modal-mask{
  position:absolute;inset:0;
  background:rgba(0,0,0,.34);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
}
.modal-box{
  position:relative;width:100%;max-width:580px;max-height:84vh;
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border-radius:var(--r-xl);
  box-shadow:var(--sh-4);
  animation:boxIn .32s var(--ease);
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 22px;border-bottom:1px solid var(--hairline-3);
}
.modal-head h3{margin:0;font-size:17px;font-weight:600;color:var(--text)}
.modal-close{
  appearance:none;border:0;background:var(--fill);color:var(--text-3);
  width:28px;height:28px;border-radius:50%;
  font-size:17px;line-height:1;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s var(--ease-soft),color .18s var(--ease-soft);
}
.modal-close:hover{background:var(--mi-tint);color:var(--mi)}
.modal-body{padding:20px 22px 22px;overflow-y:auto}

.modal-body table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.modal-body th{
  position:sticky;top:0;z-index:1;text-align:left;
  background:#FAFAFA;color:var(--text-4);
  font-size:12.5px;letter-spacing:.04em;font-weight:600;
  padding:9px 11px;border-bottom:1px solid var(--hairline);
}
.modal-body td{padding:9px 11px;border-bottom:1px solid var(--hairline-3);color:var(--text-2)}
.modal-body tbody tr:hover td{background:#FFF9F5}
.modal-body .tag{display:inline-block;font-size:12px;font-weight:600;border-radius:var(--pill);padding:3px 10px}

.tag.present{background:var(--green-bg);color:var(--green)}
.tag.leave{background:var(--amber-bg);color:var(--amber)}
.tag.absent{background:var(--red-bg);color:var(--red)}
.tag.off{background:var(--gray-bg);color:var(--gray)}

/* ============================================================
   本日值日行政台账
   ============================================================ */
.data-table .tag{
  display:inline-block;font-size:12px;font-weight:600;border-radius:var(--pill);
  padding:3px 10px;white-space:nowrap;
}
.tag.muted{background:var(--gray-bg);color:var(--text-4);font-weight:500}
.tag.blank{background:var(--amber-bg);color:var(--amber)}
.tag.offday{background:var(--gray-bg);color:var(--text-4);font-weight:600}
#offdayTable .day-cell{
  white-space:nowrap;font-weight:600;color:var(--text);
  font-family:var(--font-num);letter-spacing:0;
}
#offdayTable .off-names{min-width:200px}
.off-chip{
  display:inline-block;background:#fff;border:1px solid var(--mi-tint-2);color:var(--mi);
  font-size:12.5px;font-weight:600;letter-spacing:.01em;
  border-radius:var(--r-xs);padding:2px 10px;margin:2px 5px 2px 0;white-space:nowrap;
}
.off-none{color:var(--text-5)}
#offdayTable .row-future td{background:#FCFCFC !important;color:var(--text-5)}
#offdayTable .row-future .off-chip{background:#F5F5F5;border-color:var(--hairline);color:var(--text-5)}
#offdayTable .row-todo td{background:var(--amber-tint) !important}
#offdayTable tfoot td{background:#FAFAFA}
#offdayTable .row-offday td,#termOffdayTable .row-offday td{background:var(--gray-tint) !important}
#offdayTable .row-offday .day-cell,#termOffdayTable .row-offday .day-cell{color:var(--text-4)}
#offdayTable .row-offday .off-chip,#termOffdayTable .row-offday .off-chip{background:#F2F2F2;border-color:var(--hairline);color:var(--text-4)}

/* ============================================================
   登录门 —— 校园航拍底图 + 白卡 + 橙色徽记
   ============================================================ */
.gate{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;padding:22px;
  background-color:#0B0F16;
  background-image:
    radial-gradient(900px 480px at 50% -10%,rgba(255,103,0,.10),transparent 66%),
    radial-gradient(680px 420px at 92% 108%,rgba(255,150,60,.08),transparent 70%);
  background-repeat:no-repeat;
  overflow:hidden;
}
/* 底图：同一张校园实景图，缓慢推近；上面压一层深色 + 右上橙色光晕 */
.gate::before{
  content:"";position:absolute;inset:-4%;z-index:0;pointer-events:none;
  background:url("./assets/hero-banner.jpg") 32% center/cover no-repeat;
  filter:saturate(1.06) contrast(1.04) brightness(1.04);
  animation:heroPan 52s ease-in-out infinite alternate;
  transform-origin:50% 34%;
}
.gate::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,11,17,.54) 0%,rgba(8,11,17,.68) 58%,rgba(8,11,17,.82) 100%),
    radial-gradient(58% 92% at 88% 4%,rgba(255,138,20,.32),rgba(255,103,0,0) 66%);
}
.gate-card{
  position:relative;z-index:1;width:100%;max-width:396px;text-align:center;
  padding:42px 34px 28px;border-radius:var(--r-xxl);
  background:#fff;
  border:1px solid var(--hairline-2);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 30px 70px -22px rgba(0,0,0,.6);
  animation:boxIn .42s var(--ease);
}
.gate-logo{
  width:68px;height:68px;margin:0 auto 22px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:600;letter-spacing:.06em;
  color:#fff;
  background:linear-gradient(160deg,#FF8534,#FF6700 62%,#F25A00);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 10px 22px -10px var(--mi-glow);
  user-select:none;
}
.gate-card h1{
  font-size:21px;margin:0 0 8px;color:var(--text);letter-spacing:.01em;font-weight:700;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .gate-card h1{
    background-image:linear-gradient(96deg,#FF6700 0%,#FF8A1F 48%,#EE3A00 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}
.gate-sub{font-size:14px;color:var(--text-4);margin:0 0 24px;letter-spacing:0}
/* 白卡上的输入框必须给足辨识度，否则只剩一行占位文字 */
.gate-card input[type=text],.gate-card input[type=password]{
  margin-bottom:14px;text-align:center;font-size:16px;letter-spacing:.14em;
  padding:12px;border-radius:var(--r);background:#F2F2F2;border-color:transparent;
}
.gate-card input[type=text]:hover,.gate-card input[type=password]:hover{border-color:transparent}
.gate-card input[type=text]:focus,.gate-card input[type=password]:focus{
  background:#fff;border-color:var(--mi);box-shadow:0 0 0 3px var(--mi-ring);
}
.gate-card input::placeholder{letter-spacing:.02em}
.gate-err{color:var(--red);font-size:13px;margin:12px 0 0;min-height:18px}
.gate-foot{
  margin:18px 0 0;padding-top:16px;border-top:1px solid var(--hairline-3);
  font-size:11.5px;color:var(--text-5);letter-spacing:.04em;
}

/* ============================================================
   全局提示与加载
   ============================================================ */
.global-msg{
  width:calc(100% - 52px);max-width:1088px;margin:18px auto -6px;
  padding:12px 18px;border-radius:var(--r-md);
  font-size:13.5px;font-weight:500;
  animation:msgIn .28s var(--ease);
}
.global-msg.err{background:var(--red-bg);color:var(--red)}
.global-msg.ok{background:var(--green-bg);color:var(--green)}
.global-msg.info{background:var(--mi-tint);color:var(--mi)}

.loading{
  position:fixed;inset:0;z-index:95;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--text-3);font-size:14px;font-weight:500;letter-spacing:.02em;
}
.spinner{
  width:32px;height:32px;border-radius:50%;
  border:2.5px solid rgba(255,103,0,.15);border-top-color:var(--mi);
  animation:spin .8s linear infinite;
}
.empty{text-align:center;color:var(--text-5);padding:36px 12px;font-size:14px}

/* ============================================================
   动效
   ============================================================ */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes maskIn{from{opacity:0}to{opacity:1}}
@keyframes boxIn{
  from{opacity:0;transform:translateY(12px) scale(.984)}
  to{opacity:1;transform:none}
}
@keyframes msgIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}
@keyframes riseIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

.view{animation:riseIn .4s var(--ease-soft) both}
.view>.card{animation:riseIn .46s var(--ease-soft) both}
.view>.card:nth-child(2){animation-delay:.05s}
.view>.card:nth-child(3){animation-delay:.1s}
.view>.card:nth-child(4){animation-delay:.15s}
.view>.card:nth-child(5){animation-delay:.2s}
.view>.card:nth-child(6){animation-delay:.25s}
.view>.card:nth-child(7){animation-delay:.3s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* ============================================================
   打印
   ============================================================ */
@media print{
  .hero,.topbar,.foot,.head-actions,.save-bar,.btn,.mini-btn,.list-btn,.c-op,.tab,.modal{display:none !important}
  /* 屏幕上是「菜单 + 单面板」，纸质报告要五个栏目全打印，并用 data-title 补回标题 */
  .sec-menu{display:none !important}
  .sec-panel{display:block !important;animation:none !important;box-shadow:none !important}
  .sec-panel::before{
    content:attr(data-title);display:block;
    font-size:13.5px;font-weight:700;color:#000;margin:0 0 8px;
  }
  .sec-panel+.sec-panel{margin-top:12px}
  body{background:#fff;font-size:12px;color:#000;background-image:none}
  .view,.view>.card{animation:none !important}
  .wrap{padding:0;max-width:none}
  .card{
    box-shadow:none;border:1px solid #C9C9CE;border-radius:6px;
    page-break-inside:avoid;margin-bottom:10px;padding:10px 12px;transform:none !important;
  }
  .card-head h2{font-size:13.5px}
  .card-head h2::before{background:#000}
  .table-scroll{overflow:visible;border:0;border-radius:0}
  .data-table{min-width:0;font-size:11px}
  .data-table th{position:static;background:#F2F2F4 !important;color:#000;backdrop-filter:none}
  .data-table td{padding:4px 6px;border-bottom:1px solid #DCDCE0}
  .data-table tbody tr:hover td{background:transparent}
  .data-table tbody tr td.total{background:transparent;color:#000}
  .row-super td,.row-officer td{background:transparent !important}
  .row-super td:first-child,.row-officer td:first-child{box-shadow:none}
  .view.hidden{display:none !important}
  .stat-cards{grid-template-columns:repeat(4,1fr)}
  .stat-card{background:transparent !important;border:1px solid #C9C9CE;transform:none !important}
  .stat-card .v{color:#000}
  .stat-card .k::before{display:none}
  .data-table th.money,.data-table td.money,
  .data-table tfoot td.money{color:#000;background:transparent !important}
  .data-table tbody tr.row-sum td{background:transparent}
  .off-chip{background:transparent;border-color:#C9C9CE;color:#000}
}

/* ============================================================
   中屏（平板 768–1000px）：头图改用 2.4:1 取景图
   ============================================================ */
@media (max-width:1000px){
  .hero{--hero-h:clamp(118px,13.2vw,148px)}
  .hero-photo{background-image:url("./assets/hero-banner-t.jpg");background-position:50% 6%}
  .hero-inner{padding:11px 22px 13px}
  .brand{gap:11px}
  .brand-mark{width:44px;height:44px;flex:0 0 44px;font-size:15px;border-radius:13px}
  .brand-text{column-gap:15px}
  .brand-title{font-size:clamp(25px,3.1vw,31px);line-height:1.08}
  .brand-sub{font-size:clamp(13px,1.6vw,17px);gap:9px;letter-spacing:.10em}
  .brand-sub::before{flex:0 0 2px;width:2px}
  .hero-aside{right:22px;left:auto;top:auto;bottom:14px;gap:8px;padding:7px 14px;font-size:13.5px}
}

/* 中窄屏过渡档（860–560px）：标题已收一号，胶囊同步收一号，仍留在右下不撞标题 */
@media (max-width:860px){
  .hero-aside{right:20px;left:auto;top:auto;bottom:16px;gap:7px;padding:6px 12px;font-size:12px}
  .hero-dot{width:6px;height:6px}
}

/* ============================================================
   移动端
   ============================================================ */
@media (max-width:720px){
  body{font-size:14.5px}
  .wrap{padding:16px 14px 36px}
  .global-msg{width:calc(100% - 28px);max-width:none;margin-top:14px;padding:11px 15px}

  .legend.only-mobile{
    display:block;margin:-4px 0 14px;padding:10px 13px;border-radius:var(--r-sm);
    background:var(--mi-tint);color:var(--mi);
    font-size:12.5px;line-height:1.66;
  }
  .legend.only-mobile b{color:var(--mi-press)}

  /* 移动端：头图降低、标题收小，导航独占一行横向滚动 */
  .hero{--hero-h:min(28vw,138px)}
  .hero-inner{padding:9px 14px 11px}
  .brand{gap:10px}
  .brand-mark{width:36px;height:36px;flex:0 0 36px;font-size:13px;border-radius:11px}
  .brand-text{column-gap:10px;row-gap:1px}
  .brand-title{font-size:22px;letter-spacing:.02em}
  .brand-text::before{left:-16px;right:-34px;top:-15px;bottom:-12px}
  .brand-sub{font-size:13.5px;gap:8px;letter-spacing:.04em}
  .brand-sub::before{flex:0 0 2px;width:2px;box-shadow:0 0 8px rgba(255,180,90,.85)}
  .topbar-inner{padding:7px 14px}
  .tabs{width:100%;gap:5px;padding:4px}
  .tab{
    font-size:14px;padding:11px 4px;gap:5px;
    flex:1 1 0;min-width:0;justify-content:center;text-align:center;
  }
  .tab .ti{width:15px;height:15px;flex:0 0 15px}

  .card{padding:17px 15px 16px;border-radius:var(--r-md);margin-bottom:14px}
  .card:hover{transform:none}
  .card-head h2{font-size:15.5px}
  .card-head h2::before{height:14px;margin-right:8px}

  .entry-main{flex-direction:column;gap:13px}
  /* 转纵向后 flex-basis 会变成「高度」：entry-group 的 190px 会给每条班次撑出大段空白 */
  .entry-group{flex:0 0 auto;min-width:0}
  .entry-actions{flex:1 1 auto;width:100%}
  .entry-row{padding:14px 15px 14px 17px}
  .seg{display:flex;width:100%}
  .seg button{flex:1 1 0;padding:10px 4px;font-size:15.5px;text-align:center}
  .sub-wrap{flex-wrap:wrap}
  .sub-wrap select{max-width:none;flex:1 1 140px}

  .stat-cards{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat-card{padding:14px 14px 13px}
  .stat-card .v{font-size:23px}
  .stat-card .k{font-size:12px}
  .stat-card:hover{transform:none}

  .save-bar{flex-direction:column-reverse;align-items:stretch;gap:11px}
  .save-bar .btn{width:100%}
  .head-actions{width:100%;justify-content:stretch}
  .head-actions .btn{flex:1 1 auto}
  .head-actions .btn-sm{padding:8px 12px}
  .month-nav{width:100%;display:flex;order:-1}
  .month-nav .btn{flex:0 0 auto}
  .month-nav input[type=month]{flex:1 1 auto;min-width:0;background:transparent}
  .month-nav input[type=month]:focus{box-shadow:0 0 0 3px var(--mi-ring)}

  .field-row{flex-direction:column;gap:13px}
  /* 纵向排列时 flex-basis 会变成高度，必须归零，否则字段之间出现大段空白 */
  .field-row .field{flex:0 0 auto}
  .staff-add select{flex:1 1 100%}
  .btn-lg{letter-spacing:0}

  .modal{padding:14px;align-items:flex-end}
  .modal-box{max-width:100%;max-height:88vh;border-radius:var(--r-xl)}
  .modal-body{padding:16px 16px 20px}
  .modal-head{padding:15px 16px}
  .gate-card{padding:30px 22px 24px;border-radius:var(--r-xl)}
  .gate-logo{width:58px;height:58px;font-size:19px;border-radius:16px}
  .gate-card h1{font-size:19px}
}

/* ============================================================
   手机窄屏（≤560px）：改用 1.625:1 专用取景图
   （比例与手机头图基本一致 → 整幅照片全显，不会把孩子裁掉）
   ============================================================ */
@media (max-width:560px){
  /* 头图 128px ≈ 图片缩高的 79% → 国旗·教学楼·孩子仍全在画面内 */
  .hero{--hero-h:min(33vw,138px)}
  .hero-photo{background-image:url("./assets/hero-banner-t.jpg");background-position:50% 6%}
}

/* ≤620px：标题已接近占满整行，胶囊退回右上角（实测 570px 起留在右下会压住表名）；
   字号仍比旧版（9.5–10.5px）大一档 */
@media (max-width:620px){
  .hero-aside{right:16px;left:auto;top:10px;bottom:auto;gap:5px;padding:5px 11px;font-size:11.5px}
  .hero-dot{width:6px;height:6px}
  .tab{gap:0;font-size:13.5px;padding:11px 3px}
  .tab .ti{display:none}
}

/* 加了「学期统计」后是 5 栏：380px 以下换成 2 字短文案，避免文字被裁 */
@media (max-width:380px){
  .t-full{display:none}
  .t-short{display:inline}
  .tab{font-size:12.5px;padding:11px 2px;gap:4px}
}

@media (max-width:420px){
  .stat-cards{grid-template-columns:1fr 1fr}
  /* 极窄屏：首张「统计范围 / 本月月份」独占一行。
     它的值形如 2026/09—2026/11，是 nowrap 的长数字串，
     会把 1fr 列的 min-content 撑到 215px，进而把整页撑出横向滚动。 */
  #statCards>.stat-card:first-child,#termCards>.stat-card:first-child{grid-column:1 / -1}
  .stat-card{min-width:0}
  .stat-card .v{font-size:21px;white-space:normal;overflow-wrap:anywhere;line-height:1.2}
  .stat-card .k{min-width:0;overflow-wrap:anywhere}
  .tab{font-size:13px;padding:11px 2px}
  .hero-aside{padding:4px 9px;font-size:10.5px;gap:5px}
  /* 极窄屏：标题再收一号，保证校名+表名仍挤在一行 */
  .brand-title{font-size:18px}
  .brand-sub{font-size:11.5px}
  .brand-text{column-gap:8px}
}

/* 320px 一档（iPhone SE1 / 老安卓）：再收一格，避免标题折行 */
@media (max-width:340px){
  .brand-title{font-size:16.5px}
  .brand-sub{font-size:10.5px;gap:6px}
  .brand-sub::before{flex:0 0 4px;width:4px;height:4px}
  .brand-text{column-gap:6px}
}

/* ============================================================
   补课日临时安排（周末 / 临时补课）
   ============================================================ */
.makeup-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:12px;padding:13px 18px;border-radius:var(--r-md);
  transition:border-color .2s var(--ease-soft),background .2s var(--ease-soft);
}
.makeup-bar.is-mk{
  background:linear-gradient(100deg,var(--mi-tint),#FFF9F5);
  border:1px solid var(--mi-tint-2);
}
.makeup-bar.is-weekend{
  background:var(--well);border:1px dashed var(--fill-4);
}
.makeup-bar .mk-info{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13.5px;color:var(--text-2);line-height:1.6}
.makeup-bar .mk-info b{color:var(--mi);font-family:var(--font-num)}
.makeup-bar .mk-sep{width:1px;height:14px;background:var(--hairline)}
.makeup-bar .mk-icon{font-size:15px}
.makeup-bar .mk-ops{display:flex;gap:8px;flex-wrap:wrap}
.mk-chip{
  display:inline-block;flex:none;
  background:var(--mi);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  border-radius:var(--r-xs);padding:3px 9px;vertical-align:1px;
}
.tag.mk{background:var(--mi-tint);color:var(--mi);font-weight:600}

/* 弹窗内的补课班次表 */
.mk-table th,.mk-table td{padding:9px 10px}
.mk-chk{width:92px;white-space:nowrap}
#mkItemBody .chk-line{margin:0;padding:0;gap:7px;background:none;font-size:13px;color:var(--text-3);cursor:pointer}
#mkItemBody .chk-line:hover{background:none;color:var(--text-2)}
#mkItemBody .chk-line input{width:16px;height:16px;margin-top:1px}
#mkItemBody input.r-input{text-align:left;width:100%;min-width:0}

@media (max-width:720px){
  .makeup-bar{flex-direction:column;align-items:stretch;gap:12px;padding:14px 15px}
  .makeup-bar .mk-ops .btn{flex:1 1 auto}
  .mk-chk{width:74px}
}
@media print{
  .makeup-bar.is-weekend{display:none !important}
}


/* ============================================================
   学生名单（轮值总表 →「人数」栏 →「名单」按钮 → 弹窗）
   ============================================================ */
.cnt-wrap{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.cnt-wrap .cnt-input{width:58px;min-width:58px}
.list-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 9px;border-radius:var(--pill);
  border:1px solid var(--hairline);background:var(--surface);
  color:var(--text-3);font-size:12px;font-weight:500;white-space:nowrap;
  cursor:pointer;font-family:inherit;
  transition:border-color .18s var(--ease-soft),color .18s var(--ease-soft),background .18s var(--ease-soft);
}
.list-btn:hover{border-color:var(--mi);color:var(--mi);background:var(--mi-tint)}
.list-btn em{font-style:normal;font-weight:700;color:var(--mi);font-variant-numeric:tabular-nums}
.list-btn.empty{color:var(--text-5);border-style:dashed}
.list-btn.empty:hover{color:var(--mi);border-style:solid}

/* —— 弹窗 —— */
.stu-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stu-stat{margin-left:auto;font-size:12.5px;color:var(--text-4)}
.stu-stat b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.stu-sync{
  display:block;width:100%;margin:11px 0 0;text-align:left;
  background:var(--amber-tint);border:1px dashed rgba(200,122,0,.45);
  color:#8A5200;font-size:12.5px;line-height:1.55;padding:9px 12px;
  border-radius:var(--r-sm);cursor:pointer;font-family:inherit;
  transition:background .18s var(--ease-soft);
}
.stu-sync:hover{background:#FFF3DC}
.stu-import{
  margin:13px 0 2px;padding:13px 14px;
  background:var(--well);border:1px solid var(--hairline-2);border-radius:var(--r-md);
}
.stu-tip{margin:0 0 9px;font-size:12.5px;color:var(--text-3);line-height:1.7}
.stu-tip b{color:var(--text)}
#stuImportText{
  width:100%;min-height:124px;resize:vertical;display:block;
  font-family:var(--font);font-size:13px;line-height:1.75;
  padding:10px 12px;border:1px solid var(--hairline);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text-2);
}
#stuImportText:focus{outline:0;border-color:var(--mi);box-shadow:0 0 0 3px var(--mi-ring)}
.stu-import-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:11px}
.stu-opt{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-3);cursor:pointer}
.stu-opt input{accent-color:var(--mi)}
.stu-msg{font-size:12.5px;color:var(--text-3);flex:1 1 150px;line-height:1.5}
.stu-import-act .btn-row{margin-left:auto}

#stuModal .modal-box{max-width:760px}
.stu-scroll{max-height:min(46vh,420px);overflow-y:auto;margin-top:13px}
/* .data-table 的 min-width:580px 会把「操作」列顶进横向滚动区，名单表改成固定列宽 */
.stu-table{table-layout:fixed;width:100%;min-width:0}
.stu-c-seq{width:56px}
.stu-c-name{width:32%}
.stu-c-phone{width:36%}
.stu-c-op{width:96px}
.stu-table .mini-btn{padding:5px 6px;width:100%}
.stu-table td{padding:5px 8px}
.stu-table th{padding:7px 8px}
.stu-seq{color:var(--text-4);font-size:12.5px;font-variant-numeric:tabular-nums}
.s-input{
  width:100%;font-family:inherit;font-size:13.5px;color:var(--text-2);
  padding:6px 9px;border:1px solid transparent;border-radius:var(--r-xs);
  background:transparent;
  transition:background .16s var(--ease-soft),border-color .16s var(--ease-soft),box-shadow .16s var(--ease-soft);
}
.s-input:hover{background:var(--fill)}
.s-input:focus{outline:0;background:var(--surface);border-color:var(--mi);box-shadow:0 0 0 3px var(--mi-ring)}
.stu-phone{font-variant-numeric:tabular-nums;letter-spacing:.02em}
tr.stu-gone{opacity:.5;background:var(--gray-tint)}
tr.stu-gone .s-input{text-decoration:line-through;color:var(--text-4)}

@media (max-width:720px){
  .roster-table .fee-input{min-width:66px;width:66px;font-size:13.5px}
  .cnt-wrap{gap:4px}
  .cnt-wrap .cnt-input{width:48px;min-width:48px}
  .stu-c-seq{width:40px}
  .stu-c-op{width:70px}
  .stu-c-name{width:26%}
  .stu-c-phone{width:44%}
  .s-input{font-size:12.5px;padding:6px 6px}
  .stu-phone{letter-spacing:0}
  .stu-table .mini-btn{font-size:11.5px;padding:5px 4px}
  .stu-table td,.stu-table th{padding-left:6px;padding-right:6px}
  .list-btn{padding:5px 8px;font-size:11.5px}
  .stu-stat{width:100%;margin-left:0}
  .stu-scroll{max-height:none}
  .stu-msg{flex:1 1 100%}
  .stu-import-act .btn-row{margin-left:0;width:100%}
  .stu-import-act .btn-row .btn{flex:1 1 auto}
}

/* ============================================================
   栏目菜单（标题即菜单，悬停 / 点击弹出对应的子面板）
   月度统计、学期统计两个视图共用同一套结构：
     .sec-menu > .sec-item[data-sec]   —— 菜单条
     .sec-body > .card.sec-panel[data-sec]  —— 各个子面板
   ============================================================ */
.sec-menu{
  position:sticky;top:var(--bar-h,0px);z-index:35;
  display:flex;gap:6px;flex-wrap:wrap;
  padding:6px;margin:0 0 16px;
  border-radius:var(--pill);
  background:rgba(255,255,255,.94);
  border:1px solid var(--hairline-2);
  box-shadow:0 10px 24px -22px rgba(16,24,40,.55),inset 0 1px 2px rgba(16,24,40,.04);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
}
.sec-item{
  position:relative;appearance:none;border:0;background:transparent;
  font-family:inherit;font-size:14.5px;font-weight:600;letter-spacing:.01em;line-height:1.2;
  color:var(--text-3);
  padding:9px 16px;border-radius:var(--pill);cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;
  transition:background .2s var(--ease-soft),color .2s var(--ease-soft),
             box-shadow .2s var(--ease-soft),transform .18s var(--ease-soft);
}
.sec-item:hover{background:var(--well);color:var(--text)}
.sec-item:active{transform:scale(.96)}
.sec-item.on{
  color:#fff;
  background:linear-gradient(158deg,#FF8A3D 0%,var(--mi) 48%,#F04E00 100%);
  box-shadow:0 6px 16px -8px var(--mi-glow),inset 0 1px 0 rgba(255,255,255,.28);
}
/* 小三角：始终朝下指向子面板；选中时轻轻向下点两下（提示「内容在下面」） */
.sec-item .chev{
  width:0;height:0;flex:none;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;
  opacity:.5;transition:opacity .2s var(--ease-soft);
}
.sec-item:hover .chev{opacity:.85}
.sec-item.on .chev{opacity:.95;animation:chevBob .46s var(--ease-soft) 2}
@keyframes chevBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(2.5px)}
}
.sec-item:focus-visible{outline:0;box-shadow:0 0 0 3px var(--mi-ring)}

.sec-panel{display:none}
.sec-panel.on{display:block;animation:secDrop .34s var(--ease-soft)}
@keyframes secDrop{
  from{opacity:0;transform:translateY(-9px)}
  to{opacity:1;transform:none}
}

/* 学期统计：起止月份的小标签 */
.term-lab{font-size:12.5px;font-weight:600;color:var(--text-4);padding:0 1px 0 9px}
.month-nav .term-lab+.term-lab{padding-left:12px}

/* 学期表按月的数字列窄一些，保证一屏能多看几个月 */
#termTeacherTable th.num,#termTeacherTable td.num,
#termGroupTable th.num,#termGroupTable td.num{padding-left:6px;padding-right:6px}

@media (max-width:720px){
  .sec-menu{gap:5px;padding:5px;margin:0 0 13px}
  .sec-item{font-size:13px;padding:8px 12px;gap:6px}
  .sec-item .chev{border-left-width:3.5px;border-right-width:3.5px;border-top-width:4.5px}
  .term-lab{font-size:12px;padding-left:7px}
  .month-nav .term-lab+.term-lab{padding-left:9px}
}

/* 窄屏：菜单条改为横向滚动一行，别折成两三行占掉半屏 */
@media (max-width:520px){
  .sec-menu{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .sec-menu::-webkit-scrollbar{display:none}
  .sec-item{flex:0 0 auto;font-size:12.5px;padding:8px 11px}
}