/* ==========================================================================
   tokens.css — 班主任工作台 · 设计变量唯一来源
   引入位置：index.html 中必须排在所有其它 css 之后（最后加载）
   建立于 2026-10-06 UI 改版

   ┌──────────────────────────────────────────────────────────────────┐
   │  ★ 想换配色？只改下面「① 换肤区 · 浅色」和「② 换肤区 · 深色」  │
   │    两个区块里的 8 个颜色值即可，全站自动跟随。                    │
   │    其余所有颜色、层次、状态色都由这 8 个值自动派生，不要手改。    │
   └──────────────────────────────────────────────────────────────────┘
   ========================================================================== */


/* ==========================================================================
   ① 换肤区 · 浅色模式
   ========================================================================== */
:root {
  --skin-primary:      #17402F;   /* 主色：深林绿（2026-10-11 换肤） */
  --skin-primary-pale: #E7F1EC;   /* 主色淡底：保持旧值（座位页淡绿底依赖，不动） */
  --skin-page:         #F2F7EC;   /* 页面底色：薄荷奶白 */
  --skin-card:         #FFFFFF;   /* 卡片底色 */
  --skin-input:        #EDF2E6;   /* 输入框底色（比卡片深一档，绿灰调） */
  --skin-text:         #1F1D19;   /* 主文字 */
  --skin-text-2:       #6B655C;   /* 次级文字 */
  --skin-border:       #DCE5D6;   /* 常规描边：绿灰 */
  --skin-cta:          #D4F269;   /* CTA 荧光绿（2026-10-21 SKIN_ENGINE_V1 变量化：主按钮/选中胶囊） */
  --skin-cta-hover:    #C9EA58;   /* CTA 悬停/按压色（由主题面板自动派生，默认=原硬编码值） */
}

/* ==========================================================================
   ② 换肤区 · 深色模式
   注意：深色模式下，输入框底色要比卡片「亮」一档（而不是暗一档），
        这样才能在深底上把输入框区分出来。
   ========================================================================== */
:root[data-theme="dark"] {
  --skin-primary:      #5FBF9E;
  --skin-primary-pale: #1D332B;
  --skin-page:         #171614;
  --skin-card:         #201F1C;
  --skin-input:        #393835;   /* 曾为 #262521：与卡片亮度差仅 0.005，深色下输入框边界看不清。
                                     现与卡片亮度差 0.026（次文/输入底 4.62:1），边界清楚。 */
  --skin-text:         #F0EDE7;
  --skin-text-2:       #A8A296;
  --skin-border:       #3A3833;
}


/* ==========================================================================
   ③ 主色派生（自动，无需手改）
   ========================================================================== */
:root {
  --primary:         var(--skin-primary) !important;
  --primary-color:   var(--skin-primary) !important;
  --primary-light:   color-mix(in srgb, var(--skin-primary) 82%, #fff) !important;
  --primary-dark:    color-mix(in srgb, var(--skin-primary) 82%, #000) !important;
  --primary-pale:    var(--skin-primary-pale) !important;
  --primary-alpha:   color-mix(in srgb, var(--skin-primary) 12%, transparent) !important;
  --primary-border:  color-mix(in srgb, var(--skin-primary) 45%, var(--skin-card)) !important;
  --on-primary:      #FFFFFF;
}
:root[data-theme="dark"] {
  /* 深色下主色是亮色，压在上面的文字必须是深墨色，否则读不清 */
  --on-primary: #0E2B23;
}


/* ==========================================================================
   ④ 文字（自动派生）
   ========================================================================== */
:root {
  --text:            var(--skin-text) !important;
  --text-primary:    var(--skin-text) !important;
  --text-secondary:  var(--skin-text-2) !important;
  --text-tertiary:   color-mix(in srgb, var(--skin-text-2) 78%, var(--skin-page)) !important;
  --text-disabled:   color-mix(in srgb, var(--skin-text-2) 45%, var(--skin-page)) !important;
  --text-inverse:    var(--skin-card) !important;
}


/* ==========================================================================
   ⑤ 背景与表面（自动派生）
   ========================================================================== */
:root {
  --bg:             var(--skin-page) !important;
  --bg-primary:     var(--skin-page) !important;
  --bg-secondary:   var(--skin-input) !important;
  --bg-tertiary:    color-mix(in srgb, var(--skin-border) 50%, var(--skin-card)) !important;
  --bg-card:        var(--skin-card) !important;
  --bg-inset:       var(--skin-input) !important;

  --card-bg:        var(--skin-card) !important;
  --surface:        var(--skin-card) !important;
  --surface-card:   var(--skin-card) !important;
  --surface-raised: var(--skin-card) !important;
  --surface-input:  var(--skin-input) !important;
  --surface-hover:  var(--skin-input) !important;

  /* 兼容历史后台样式命名 */
  --office-bg:               var(--skin-page) !important;
  --office-card:             var(--skin-card) !important;
  --office-surface:          var(--skin-card) !important;
  --office-text:             var(--skin-text) !important;
  --office-text-secondary:   var(--skin-text-2) !important;
  --office-text-tertiary:    color-mix(in srgb, var(--skin-text-2) 78%, var(--skin-page)) !important;
  --office-border:           var(--skin-border) !important;
  --office-primary:          var(--skin-primary) !important;
}


/* ==========================================================================
   ⑥ 描边（自动派生）
   ========================================================================== */
:root {
  --border:        var(--skin-border) !important;
  --border-color:  var(--skin-border) !important;
  --border-light:  color-mix(in srgb, var(--skin-border) 55%, var(--skin-card)) !important;
  --border-hair:   color-mix(in srgb, var(--skin-border) 50%, var(--skin-card)) !important;
  --border-strong: color-mix(in srgb, var(--skin-border) 78%, var(--skin-text-2)) !important;
  /* 输入框专用描边：对输入框底色必须 ≥3:1，否则在浅色下看不见框 */
  --input-border:  #8A8172 !important;
}
:root[data-theme="dark"] {
  --input-border: #5A5750 !important;
}


/* ==========================================================================
   ⑦ 状态语义色（与主色无关，换肤时保持不变）
   ========================================================================== */
:root {
  --success: #15803D !important;
  --success-light: #22A34E !important;
  --success-dark:  #11632F !important;
  --success-pale:  #E7F6EC !important;

  --warning: #B45309 !important;
  --warning-light: #D97706 !important;
  --warning-dark:  #8A4007 !important;
  --warning-pale:  #FBF0DC !important;

  --danger: #B91C1C !important;
  --danger-light: #DC2626 !important;
  --danger-dark:  #8F1515 !important;
  --danger-pale:  #FDECEC !important;

  --info: #2F5D7C !important;
  --info-light: #3E7BA3 !important;
  --info-dark:  #234859 !important;
  --info-pale:  #EAF1F6 !important;

  /* 学生状态色 */
  --status-not-started: var(--danger) !important;
  --status-in-progress: var(--warning) !important;
  --status-done:        var(--success) !important;
  --status-shelved:     var(--text-tertiary) !important;
}
:root[data-theme="dark"] {
  --success: #4CAF70 !important;
  --success-pale: #16301F !important;
  --warning: #E0A040 !important;
  --warning-pale: #33260F !important;
  --danger: #E87575 !important;
  --danger-pale: #331A1A !important;
  --info: #6FA8C8 !important;
  --info-pale: #17262F !important;
}


/* ==========================================================================
   ⑧ 圆角阶梯（5 档）
   ========================================================================== */
:root {
  --radius-xs: 6px;    /* 标签、小图标按钮 */
  --radius-sm: 8px;    /* 紧凑控件 */
  --radius-md: 10px;   /* 控件统一：按钮 / 输入框 / 下拉框 / 日历格 */
  --radius:    14px;   /* 容器统一：卡片 / 浮层 / 弹窗 */
  --radius-lg: 14px;
  --radius-full: 999px; /* 胶囊 / 头像 / 开关 */
}


/* ==========================================================================
   ⑨ 阴影阶梯（深色下加重，层次改由描边承担）
   ========================================================================== */
:root {
  --shadow-sm:    0 1px 2px rgba(20,18,12,.05), 0 1px 3px rgba(20,18,12,.04) !important;
  --shadow:       0 2px 8px rgba(20,18,12,.08) !important;
  --shadow-md:    0 4px 16px rgba(20,18,12,.10), 0 1px 2px rgba(20,18,12,.06) !important;
  --shadow-lg:    0 12px 40px rgba(20,18,12,.18) !important;
  --shadow-inset: inset 0 1px 2px rgba(20,18,12,.06) !important;

  --office-shadow-lg:    0 12px 40px rgba(20,18,12,.18) !important;
  --office-radius-sm:    var(--radius-sm);
  --office-radius:       var(--radius);
}
:root[data-theme="dark"] {
  --shadow-sm:    0 1px 2px rgba(0,0,0,.45) !important;
  --shadow:       0 2px 8px rgba(0,0,0,.50) !important;
  --shadow-md:    0 4px 16px rgba(0,0,0,.55) !important;
  --shadow-lg:    0 12px 40px rgba(0,0,0,.62) !important;
  --shadow-inset: inset 0 1px 2px rgba(0,0,0,.35) !important;
  --office-shadow-lg: 0 12px 40px rgba(0,0,0,.62) !important;
}


/* ==========================================================================
   ⑩ 动效（4 档时长 + 2 条缓动，全站只允许用这些）
   ========================================================================== */
:root {
  --dur-instant: 80ms;   /* 按下 / 松开 / 勾选 */
  --dur-fast:    150ms !important;  /* 悬停变色 / 标签切换 / 页面淡入（最常用） */
  --dur-normal:  240ms !important;  /* 下拉 / 弹窗 / 提示 / 上滑面板 */
  --dur-base:    240ms;
  --dur-slow:    360ms;  /* 抽屉 / 大遮罩 */

  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1) !important;  /* 出现 / 进入 / 位移到位（默认） */
  --ease-out-quart: cubic-bezier(0.16, 1, 0.3, 1) !important;  /* 历史命名，统一到同一条 */
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1) !important;   /* 同屏位移 / 展开收起 / 颜色 */
  --ease-in:        cubic-bezier(0.4, 0, 1, 1) !important;     /* 离开 / 收起 */

  /* 常用过渡预设，组件里直接 transition: var(--tx-control) */
  --tx-control: background-color var(--dur-fast) var(--ease-in-out),
                color var(--dur-fast) var(--ease-in-out),
                border-color var(--dur-fast) var(--ease-in-out),
                box-shadow var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
  --tx-enter: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  --tx-panel: opacity var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-out);
}


/* ==========================================================================
   ⑪ 间距阶梯（4px 基准，8 档）
   ========================================================================== */
:root {
  --space-2xs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* 语义间距 */
  --gap-page:   24px;   /* 页面左右外边距（桌面） */
  --gap-card:   16px;   /* 卡片内边距 */
  --gap-card-s: 12px;   /* 紧凑卡片内边距 */
  --gap-inline: 12px;   /* 控件左右内边距 */
}
@media (max-width: 768px) {
  :root { --gap-page: 16px; --gap-inline: 12px; }
}


/* ==========================================================================
   ⑫ 字号阶梯（7 级）与字重
   ========================================================================== */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;

  --text-2xs:  0.6875rem;  /* 11px  角标（手机端不用） */
  --text-xs:   0.75rem;    /* 12px  表格正文 / 标签 / 手机端下限 */
  --text-sm:   0.8125rem;  /* 13px  表单标签 / 辅助行 */
  --text-base: 0.875rem;   /* 14px  默认正文 / 按钮 */
  --text-md:   1rem;       /* 16px  卡片标题 / 输入框内容 */
  --text-lg:   1.25rem;    /* 20px  页面标题 */
  --text-xl:   1.75rem;    /* 28px  大数字 / 主标题 */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
}


/* ==========================================================================
   ⑬ 控件尺寸（统一，手机端一律 44px 起）
   ========================================================================== */
:root {
  --ctl-h-sm: 32px;
  --ctl-h-md: 36px;
  --ctl-h-lg: 44px;
  --ctl-h-xl: 48px;
  --ctl-font: var(--text-base);
  --touch-min: 44px;   /* 触控最小命中区 */
}
@media (max-width: 768px) {
  :root {
    --ctl-h-sm: 44px;   /* 手机端小控件也必须 44px，否则点不准 */
    --ctl-h-md: 44px;
    --ctl-h-lg: 48px;
  }
}


/* ==========================================================================
   ⑭ 层级（固定分层，不再随手写 9999）
   ========================================================================== */
:root {
  --z-base:       0;
  --z-content:    1;
  --z-sticky:     100;   /* 顶栏、吸顶表头 */
  --z-subnav:     200;   /* 二级胶囊条 */
  --z-bottombar:  300;   /* 手机底栏 */
  --z-dropdown:   1000;
  --z-scrim:      2000;
  --z-modal:      2100;
  --z-toast:      3000;
  --z-tooltip:    4000;
}


/* ==========================================================================
   ⑮ 无障碍：尊重系统「减弱动态效果」
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0.01ms;
    --dur-fast:    0.01ms;
    --dur-normal:  0.01ms;
    --dur-base:    0.01ms;
    --dur-slow:    0.01ms;
  }
}


/* ==========================================================================
   ⑯ 胶囊式子导航条（2026-10-06 改版新增）
   桌面：停在页面顶部，等分整屏宽度的一排胶囊
   手机：由上方浮层改为固定停靠在底部导航栏正上方，高度略低
   结构：<div id="sub-nav" class="sub-nav-container"><div class="sub-nav-bar capsule">…</div></div>
   ========================================================================== */

/* 底部导航高度兜底：style.css 仅在媒体查询内定义，这里补全局值，避免 calc() 失效 */
:root { --bottom-nav-height: 56px; --capsule-h: 70px; }
/* 保留 style.css 在 ≤420px 的原设计值（50px），防止被上面的全局值覆盖 */
@media (max-width: 420px) { :root { --bottom-nav-height: 50px; } }

/* —— 容器：两处停靠的公共部分 —— */
.sub-nav-container.pill-dock,
#sub-nav { padding: 0 12px 8px; }

.sub-nav-bar.capsule {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 6px;
  width: 100%;
  padding: 4px;
  overflow: visible;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-sizing: border-box;
}

.sub-nav-bar.capsule .sub-nav-item {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  gap: 5px;
  padding: 7px 6px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-in-out),
              color var(--dur-fast) var(--ease-in-out);
}
.sub-nav-bar.capsule .sub-nav-item:hover { background: var(--primary-pale); color: var(--primary); }
.sub-nav-bar.capsule .sub-nav-item.active {
  background: var(--card-bg);
  color: var(--primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
}
.sub-nav-bar.capsule .sub-nav-icon,
.sub-nav-bar.capsule .sub-nav-icon svg { width: 15px; height: 15px; flex: none; }
.sub-nav-bar.capsule .sub-nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* —— 手机端：固定停靠在底部导航栏上方，高度略低于底栏 —— */
@media (max-width: 768px) {
  /* 解开旧样式对移动端子导航的隐藏（style.css:7825 的 display:none !important） */
  #sub-nav.sub-nav-container { display: block !important; }

  #sub-nav.sub-nav-container {
    position: fixed;
    /* ★ 必须显式清掉 style.css:6591 遗留的 top:0。
       否则 top:0 与下面的 bottom 同时生效，元素被拉伸成「全屏高 − 底栏高」的
       不透明遮盖层，整页内容被盖住且点击全被拦截（2026-10-06 线上事故）。
       同理 height 也要显式 auto，避免继承任何固定高度。 */
    top: auto;
    height: auto;
    left: 0;
    right: 0;
    /* 优先用 JS 实测的底栏真实高度；未测到时回退 token（桌面端/首帧） */
    bottom: var(--bn-real-h, calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px)));
    z-index: var(--z-subnav);
    padding: 6px 6px 6px;
    margin: 0;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    /* 双保险：容器本身不接收点击，只让胶囊条接收。
       即使定位再次写错，底部内容也不会被"点不动"。 */
    pointer-events: none;
    box-sizing: border-box;
  }
  /* 胶囊条恢复可点击 */
  #sub-nav.sub-nav-container .sub-nav-bar { pointer-events: auto; }
  #sub-nav.sub-nav-container.hidden { display: none !important; }

  .sub-nav-bar.capsule { gap: 4px; padding: 3px; border-radius: var(--radius-md); }
  .sub-nav-bar.capsule .sub-nav-item { padding: 6px 2px; gap: 3px; min-height: 48px; touch-action: manipulation; }
  .sub-nav-bar.capsule .sub-nav-icon,
  .sub-nav-bar.capsule .sub-nav-icon svg { width: 14px; height: 14px; }
  .sub-nav-bar.capsule .sub-nav-label { font-size: var(--text-xs); }

  /* 底部堆叠总高（底栏 + 胶囊条 + 8px 余量）。优先用 JS 实测合成的值；
     未测到时用下面的兜底算式。2026-10-06：实测底栏真实高 60px 而 token 只有 50px，
     所以兜底里 --capsule-h 已校正为 70px，但仍以实测值为准。 */
  body.has-capsule { padding-bottom: var(--nav-stack-h, calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + var(--capsule-h) + 8px)) !important; }
  body.has-capsule .app-container { padding-bottom: var(--nav-stack-h, calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + var(--capsule-h) + 8px)) !important; }
  /* toast 自身还要往上抬一段，避免贴着胶囊条 */
  body.has-capsule .toast { bottom: calc(var(--nav-stack-h, calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + var(--capsule-h) + 8px)) + 8px) !important; }
}

/* —— 旧烟花菜单样式彻底停用（保留选择器，防止残留引用报错） —— */
.nav-fireworks { display: none !important; }


/* ==========================================================================
   ⑰ 转场与交互提速（覆盖旧的慢动画）
   ========================================================================== */
#app { animation-duration: 200ms !important; animation-timing-function: var(--ease-out) !important; }
#app.page-leave { opacity: 1 !important; animation: none !important; }

/* ⑰-a 桌面端：胶囊条吸顶避开顶栏 + 胶囊横排
   顶栏 .nav-bar 是 fixed + z-index:1000（style.css:157），旧的 .sub-nav-container
   是 sticky top:0（style.css:6591），向下滚动时胶囊条会钻到顶栏底下被盖住。
   这里把吸顶位置下移到顶栏高度以下（桌面端 --nav-height=56px（style.css:62），故吸顶值为 56px）。 */
@media (min-width: 769px) {
  #sub-nav.sub-nav-container { top: var(--nav-height, 56px); }
  /* 桌面等分后每个胶囊很宽，竖排会显得空，改横排（图标与文字同行）；等分规则不变 */
  .sub-nav-bar.capsule .sub-nav-item { flex-direction: row; gap: 6px; }
}

/* ⑰-b ≤420px：原作者为性能禁用了入场动画（style.css:1434 注释「禁用页面入场动画，减少合成层重建」）。
   改成纯 opacity 极短淡入，不带 translateY，避免把整个 #app 提升为独立合成层；
   且本次已删掉 120ms 阻塞延迟与 page-leave，一次导航从「淡出+淡入」变为「只淡入一次」，净开销低于改版前。
   回滚方式：删除本处 @media (max-width: 420px) 块即可回到瞬时切换。 */
@media (max-width: 420px) {
  @keyframes pageEnterMobile { from { opacity: 0; } to { opacity: 1; } }
  #app { animation: pageEnterMobile 140ms var(--ease-out) !important; }
}
@media (prefers-reduced-motion: reduce) {
  #app { animation: none !important; }
  .sub-nav-bar.capsule .sub-nav-item { transition: none !important; }
}


/* ==========================================================================
   ⑱ 键盘可达 + 折叠态提示（2026-10-06 改版补充）
   ========================================================================== */

/* 键盘 Tab 聚焦时的可见焦点环（不能只靠颜色区分选中态） */
.sub-nav-bar.capsule .sub-nav-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* 有子页的分组 tab：小箭头提示"这里还有子页"。
   用形状差异而非颜色，折叠/展开时箭头翻转；::after 已被 active 下划线占用（style.css:1537），故用 ::before。 */
.bottom-nav-item[data-route-group]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(50% + 17px);
  width: 5px;
  height: 5px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(225deg);   /* 默认朝上 = "点它往上展开" */
  opacity: .45;
  transition: transform var(--dur-fast) var(--ease-in-out),
              opacity var(--dur-fast) var(--ease-in-out);
  pointer-events: none;
}
.bottom-nav-item.capsule-open::before {
  transform: rotate(45deg);    /* 展开后朝下 */
  opacity: .85;
}


/* ==========================================================================
   ⑲ 输入框换肤绑定 —— 让 --skin-input / --input-border 真正落到输入框元素上
   （2026-10-07 增补）

   问题：--skin-input（换肤区第 5 色）此前只被 --bg-secondary / --surface-input 间接
   引用，但真正涂到输入框元素上的规则里混进了硬编码，导致「改 --skin-input 全站跟随」
   对输入框失效：
     · 深色 .form-input/.form-select/.form-textarea → design-tokens.css 写死 #2B2D35
     · 深色 裸 input[type]/select/textarea          → ui_fix.css 写死 #1f2937
     · 浅色 todo 文本域                             → todo_style.css 写死 #fff
     · ≤420px 移动端 .form-input                    → style.css 写死 #DADADA（新拟态灰，style.css:1180 @media）

   做法：本区块加载在所有 css 之后（tokens.css 由 index.html 最后加载），用「与 legacy
   同级或更高特异性 + !important」把输入框底色统一钉到 var(--surface-input)、描边钉到
   var(--input-border)。以后换肤只改 ①/② 换肤区的 --skin-input 与 ⑥ 区的 --input-border，
   全站输入框自动跟随，无需再动任何 legacy 文件。

   取舍（本区块刻意不碰的地方）：
     · .todo-edit-step-name-input 的描边保留其「分组色」提示 → 只绑底色，不绑描边；
     · .hw-miss-date-input / .hw-sort-select 原为 border:none + 内阴影 → 只绑底色，
       不改内阴影观感（若日后要补一条可见描边，见 ⑲-d 注释）。
     · ::placeholder / :focus 只由 legacy 负责，本区块不改（避免抢焦点态主色）。

   回滚：删除本 ⑲ 区块 → legacy 硬编码重新生效，页面回到改动前。
   ========================================================================== */

/* ⑲-a 具名输入类（浅/深通用）：底色 → --surface-input */
.form-input,
.form-input-sm,
.form-select,
.form-textarea,
.todo-input-textarea,
.todo-detail-notes-textarea,
.todo-edit-step-name-input,
.hw-miss-date-input,
.hw-sort-select {
  background-color: var(--surface-input) !important;
}

/* ⑲-b 无类裸标签（部分页面直接写 <input type="..."> / <select> / <textarea>） */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
select,
textarea {
  background-color: var(--surface-input) !important;
}

/* ⑲-c 标准控件描边 → --input-border（不含 .todo-edit-step-name-input，保留其分组色描边） */
.form-input,
.form-input-sm,
.form-select,
.form-textarea,
.todo-input-textarea,
.todo-detail-notes-textarea,
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
select,
textarea {
  border-color: var(--input-border) !important;
}

/* ⑲-d 深色：legacy 用 [data-theme="dark"] input.form-input / input[type=...] 写死过颜色，
   这里用同构（甚至更强）选择器 + 后加载，把深色也钉回变量（否则深色仍优先命中 legacy 硬编码） */
[data-theme="dark"] input.form-input,
[data-theme="dark"] select.form-select,
[data-theme="dark"] textarea.form-textarea,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-input-sm,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .todo-input-textarea,
[data-theme="dark"] .todo-detail-notes-textarea,
[data-theme="dark"] .todo-edit-step-name-input,
[data-theme="dark"] .hw-miss-date-input,
[data-theme="dark"] .hw-sort-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="week"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--surface-input) !important;
}
/* 深色标准控件描边（与 ⑲-c 同集合，排除 .todo-edit-step-name-input 的分组色描边） */
[data-theme="dark"] input.form-input,
[data-theme="dark"] select.form-select,
[data-theme="dark"] textarea.form-textarea,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-input-sm,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .todo-input-textarea,
[data-theme="dark"] .todo-detail-notes-textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="week"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  border-color: var(--input-border) !important;
}

/* ⑲-e（可选，默认不启用）首页漏交/排序输入框原为 border:none，仅靠内阴影。
   如希望它们也吃 --input-border 的可见描边，取消下一段注释即可。 */
/*
.hw-miss-date-input,
.hw-sort-select {
  border: 1px solid var(--input-border) !important;
}
*/


/* ==========================================================================
   ⑳ 统计条「在校」前置大字（方案 B）—— 2026-10-07
   ──────────────────────────────────────────────────────────────────────────
   结构（seats.js / comment.js 统一）：
     <div class="att-bar">
       <span class="att-bar-focus"><b>19</b><span class="att-bar-focus-label">在校</span></span>
       <span class="att-bar-rest">在册 40 · 请假 18 · 转班 3</span>
     </div>

   「在校」人数独占视觉焦点（大号），在册/请假/转班退成 12px 次要色。
   配色在本区块统一管（不再用元素内联 style）：
     浅色 焦点数字 #047857（深绿）；深色 #34D399（亮绿，与 .cls-att-badge /
     .att-room-detail 的深色在校色一致）。两者对各自 att-bar 底色均满足
     大字 ≥3:1（实测浅 ≈5.2:1 / 深 ≈7.5:1）；次要小字用 --text-secondary，
     满足 ≥4.5:1。
   容器外观（底色/圆角/内边距）仍由 style.css:8099 的 .att-bar 负责，这里只补齐排版。

   回滚：删除本 ⑳ 区块，并把 seats.js / comment.js 的 markup 还原为旧版（旧版有内联 #059669）。
   ========================================================================== */

/* ⑳-a 容器排版：焦点与次要项按文字基线对齐；窄屏允许次要项换行（容器不产生横向溢出） */
.att-bar {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

/* ⑳-b 焦点块：大号「在校人数」+ 小号「在校」标签（基线对齐） */
.att-bar-focus {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.att-bar-focus b {
  font-size: 1.6rem;      /* 25.6px：属大字号（对比度只需 ≥3:1） */
  line-height: 1;
  font-weight: 600;
  color: #047857;         /* 浅色：深绿，对 att-bar 浅底(#f6f8fc) 实测 ≈5.2:1 */
  font-variant-numeric: tabular-nums;
}
.att-bar-focus-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ⑳-c 次要块：在册 / 请假 / 转班（12px 次要色） */
.att-bar-rest {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ⑳-d 深色（站点默认主题）：焦点数字换亮绿，保证深底上大字 ≥3:1 */
[data-theme="dark"] .att-bar-focus b {
  color: #34D399;         /* 与 .cls-att-badge/.att-room-detail 深色在校色一致，实测 ≈7.5:1 */
}

/* ⑳-e 教室折叠头「在校 N」焦点字（comment.js line 1028 原为内联 #059669）。
   与 ⑳-b/⑳-d 的在校焦点色同源：浅色 #047857 / 深色 #34D399，深浅自动跟随。 */
.ca-room-in-school {
  color: #047857;
  font-weight: 600;
}
[data-theme="dark"] .ca-room-in-school {
  color: #34D399;
}


/* ==========================================================================
   ㉑ 待办页排版规范（Phase A · 2026-10-07）
   ──────────────────────────────────────────────────────────────────────────
   用户反馈待办页「看着乱、对不齐、显廉价、层级扁平」。本区块把该页的字号 /
   间距 / 圆角 / 按钮收敛到既有 token 阶梯（不新增变量），并修正层级倒挂。
   本区块加载于所有 css 之后，用「同等或更高特异性 + !important」压掉
   todo_style.css / ui_fix.css / style.css 里的旧值，不改任何选择器结构。

   层级修正（原「区块标题」比「条目标题」还小还淡，属倒挂）：
     · 页面标题  20px  --text-lg
     · 区块标题  16px  --text-md   主文字色（原 14px / 次级色）
     · 条目标题  14px  --text-base 字重 500（原 600）
     · 控件/tab  13px  --text-sm
     · 次要/标签 12px  --text-xs（原 11px，上调到手机端下限）

   间距：收敛到 --space-2xs…xl（2/4/8/12/16/24）。
   圆角：收敛到 --radius-xs…lg（6/8/10/14/999）。
   按钮：页头 4 键统一「次档」——高 32 / 左右 12 / 13px / 500 / 圆角 8；
         手机端命中区抬到 --touch-min(44)。主次靠底色（btn-primary）表达。

   回滚：删除本 ㉑ 区块 → 全部旧值重新生效。
   ========================================================================== */

/* ㉑-a 字号 —— 5 级 */
.todo-page-title { font-size: var(--text-lg) !important; font-weight: var(--fw-semibold) !important; }
.todo-page-section-title { font-size: var(--text-md) !important; font-weight: var(--fw-semibold) !important; color: var(--text) !important; }
.todo-event-title-text,
.todo-event-card-title,
.todo-event-card.compact .todo-event-title { font-size: var(--text-base) !important; }
.todo-page-tab { font-size: var(--text-sm) !important; }
.todo-event-meta,
.todo-event-card-meta,
.todo-detail-meta { font-size: var(--text-xs) !important; }
.todo-event-category,
.todo-event-meta > span,
.todo-event-step-pill,
.todo-own-tag,
.todo-status-tag,
.status-badge,
.todo-step-readonly .step-status-badge,
.todo-page-section-count,
.v3-barrow,
.todo-event-kicker,
.msbar-chip { font-size: var(--text-xs) !important; }

/* ㉑-b 字重 —— 条目标题 500、tab 选中 600 */
.todo-event-title-text,
.todo-event-card.compact .todo-event-title { font-weight: var(--fw-medium) !important; }
.todo-page-tab { font-weight: var(--fw-medium) !important; }
.todo-page-tab.active { font-weight: var(--fw-semibold) !important; }

/* ㉑-c 间距 —— 收敛到 8 档 */
.todo-page-header { margin-bottom: var(--space-lg) !important; }
/* QUICKBAR_V1：5 分类一排矮版（覆盖下面的 space 档位） */
.todo-page-quick-add { gap: 8px !important; margin-bottom: var(--space-lg) !important; }
.todo-quick-add-btn { padding: 9px 4px !important; }
.todo-page-tabs { gap: var(--space-sm) !important; margin-bottom: var(--space-lg) !important; }
.todo-page-section { margin-bottom: var(--space-xl) !important; }
.todo-page-section-title { margin-bottom: var(--space-sm) !important; }
.todo-event-card:not(.compact) { padding: var(--space-lg) !important; margin-bottom: var(--space-sm) !important; }
.todo-event-card.compact { margin-bottom: var(--space-sm) !important; }
.todo-event-card.compact .todo-event-title { padding: var(--space-sm) var(--space-md) var(--space-2xs) !important; }
.todo-event-card.compact .todo-event-details { padding: 0 var(--space-md) var(--space-sm) !important; }
.todo-detail-step-item { padding: var(--space-sm) !important; margin-bottom: var(--space-xs) !important; }
.todo-edit-step-item { margin-bottom: var(--space-sm) !important; }

/* ㉑-d 圆角 —— 收敛到 5 档 */
.todo-quick-add-btn { border-radius: var(--radius-full) !important; }  /* 全圆胶囊（用户 2026-10-19 点名，与学生总表筛选胶囊同款） */
.todo-page-tab { border-radius: var(--radius-full) !important; }
.todo-event-card { border-radius: var(--radius) !important; }
.todo-event-category { border-radius: var(--radius-xs) !important; }
.todo-event-meta > span { border-radius: var(--radius-sm) !important; }
.todo-event-step-pill { border-radius: var(--radius-md) !important; }
.status-badge { border-radius: var(--radius-sm) !important; }

/* ㉑-e 页头按钮：统一「次档」（32 / 0 12 / 13 / 500 / 圆角 8） */
.todo-page-header .btn {
  min-height: var(--ctl-h-sm) !important;
  padding: 0 var(--space-md) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--fw-medium) !important;
  border-radius: var(--radius-sm) !important;
}

/* ㉑-f 手机端：命中区抬到 44px */
@media (max-width: 768px) {
  .todo-page-header .btn { min-height: var(--touch-min) !important; }
  .todo-page-tab { min-height: var(--touch-min) !important; }
}

/* ㉑-g 快捷入口强调键：原内联 linear-gradient 改到此处（统一走 token，深浅自动跟随） */
.todo-quick-add-btn.todo-accent-primary {
  background: linear-gradient(135deg, var(--primary-pale), var(--primary-light)) !important;
  border: 1px solid var(--primary) !important;
}
.todo-quick-add-btn.todo-accent-success {
  background: linear-gradient(135deg, var(--success-pale), var(--success-light)) !important;
  border: 1px solid var(--success) !important;
}

/* ㉑-h 深色：把待办页残留的旧 slate 硬编码（ui_fix.css 的 [data-theme=dark] 段）拉回
   token 深色值。此前 .todo-event-card 深色底为 #1f2937（冷灰），与站点 token 深色卡片
   (#201F1C 暖灰) 不一致；且 ui_fix 用 border-color !important 把左侧「状态色条」一并
   涂灰，导致深色下进行中/已完成色条失效。本段仅覆盖「待办页自有组件」，不触碰站点级
   .card / .modal-content / .btn-danger。 */
[data-theme="dark"] .todo-event-card {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text) !important;
}
[data-theme="dark"] .todo-event-card.status-in-progress { border-left-color: var(--status-in-progress) !important; }
[data-theme="dark"] .todo-event-card.status-done { border-left-color: var(--status-done) !important; }
[data-theme="dark"] .todo-event-card.status-shelved { border-left-color: var(--status-shelved) !important; }
[data-theme="dark"] .todo-event-card.status-not-started { border-left-color: var(--status-not-started) !important; }
[data-theme="dark"] .todo-event-step-pill {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
  border-color: transparent !important;
}
[data-theme="dark"] .todo-event-step-pill.done { background-color: var(--success-pale) !important; color: var(--success) !important; }
[data-theme="dark"] .todo-event-step-pill.in-progress { background-color: var(--warning-pale) !important; color: var(--warning) !important; }
[data-theme="dark"] .todo-event-step-pill.not-started { background-color: var(--danger-pale) !important; color: var(--danger) !important; }
[data-theme="dark"] .todo-event-step-pill.shelved { background-color: var(--bg-tertiary) !important; color: var(--text-secondary) !important; }
[data-theme="dark"] .todo-stat-card { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; }
[data-theme="dark"] .todo-stat-number { color: var(--text) !important; }
[data-theme="dark"] .todo-stat-label { color: var(--text-tertiary) !important; }
[data-theme="dark"] .todo-batch-bar { background-color: var(--card-bg) !important; border-color: var(--border-color) !important; }
[data-theme="dark"] .todo-sort-label { color: var(--text-tertiary) !important; }
[data-theme="dark"] .todo-sort-btn { background-color: var(--card-bg) !important; color: var(--text-secondary) !important; border-color: var(--border-color) !important; }
[data-theme="dark"] .todo-sort-btn.active { background-color: var(--primary-pale) !important; color: var(--primary) !important; border-color: var(--primary) !important; }
[data-theme="dark"] .todo-quick-add-btn { background-color: var(--card-bg) !important; color: var(--text) !important; border-color: var(--border-color) !important; }
[data-theme="dark"] .todo-quick-add-btn.primary { background-color: var(--primary-alpha) !important; color: var(--primary) !important; border-color: var(--primary) !important; }
[data-theme="dark"] .todo-quick-add-btn.todo-accent-primary { border-color: var(--primary) !important; }
[data-theme="dark"] .todo-quick-add-btn.todo-accent-success { border-color: var(--success) !important; }
[data-theme="dark"] .todo-step-readonly { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text) !important; }
[data-theme="dark"] .todo-step-readonly .step-order { background-color: var(--bg-tertiary) !important; color: var(--text-secondary) !important; }
[data-theme="dark"] .step-status-badge.not-started,
[data-theme="dark"] .status-badge.not-started { background-color: var(--danger-pale) !important; color: var(--danger) !important; border-color: var(--danger-light) !important; }
[data-theme="dark"] .step-status-badge.in-progress,
[data-theme="dark"] .status-badge.in-progress { background-color: var(--warning-pale) !important; color: var(--warning) !important; border-color: var(--warning-light) !important; }
[data-theme="dark"] .step-status-badge.done,
[data-theme="dark"] .status-badge.done { background-color: var(--success-pale) !important; color: var(--success) !important; border-color: var(--success-light) !important; }
[data-theme="dark"] .tpl-mgr-card { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text) !important; }


/* ============================================================
   SKIN V1（2026-10-11 全局换肤·阶段①）— 本文件是全站末位加载层
   原则：①座位图相关颜色全部钉回旧字面值（核心组件保持现风格，浅深各自钉）
        ②浅色圆角微升级（仅浅色，深色完全不动）
        ③改色一律改 design-tokens.css 的变量，本块只放「不许变」的规则
   ============================================================ */

/* ---------- 座位图钉死（浅色=旧墨绿系；深色=沿用现值） ---------- */
:root:not([data-theme="dark"]) .seat-blocked { background: #FAF7F1; }
:root:not([data-theme="dark"]) .classroom-tab.active { color: var(--skin-primary, #17402F); }
:root:not([data-theme="dark"]) .seat-action-btn--feishu,
:root:not([data-theme="dark"]) .rollcall-btn--feishu,
:root:not([data-theme="dark"]) .rc-action-btn--feishu { background: var(--skin-primary, #17402F) !important; border-color: var(--skin-primary, #17402F) !important; color: #fff !important; }
:root:not([data-theme="dark"]) .seat-action-btn--feishu:hover,
:root:not([data-theme="dark"]) .rollcall-btn--feishu:hover,
:root:not([data-theme="dark"]) .rc-action-btn--feishu:hover { background: #2F8A6B !important; border-color: #2F8A6B !important; color: #fff !important; }
:root:not([data-theme="dark"]) .ba-seat-selected { background: #2F8A6B !important; }
:root:not([data-theme="dark"]) .ba-seat-selected .seat-nickname { color: var(--skin-primary, #17402F); }
:root:not([data-theme="dark"]) .ba-seat-check { background: var(--skin-primary, #17402F); }
:root:not([data-theme="dark"]) .task-seat-pick.selected { background: #2F8A6B !important; }
:root:not([data-theme="dark"]) .task-seat-pick.selected .seat-nickname { color: var(--skin-primary, #17402F); }
:root:not([data-theme="dark"]) .task-seat-chip.done { background: var(--skin-primary, #17402F); }
:root:not([data-theme="dark"]) .seat-analyzing { border-color: var(--skin-primary, #17402F) !important; background: var(--primary, #2F8A6B) !important; }
:root:not([data-theme="dark"]) .seat-compare-new { background: var(--primary, #2F8A6B) !important; box-shadow: inset 0 0 0 2px var(--skin-primary, #17402F); }

/* ---------- 浅色圆角升级（深色不动）：卡片 18px / 按钮 12px ---------- */
:root:not([data-theme="dark"]) .card { border-radius: 18px; }
:root:not([data-theme="dark"]) .btn { border-radius: 12px; }

/* ============================================================
   TODO_SKIN_V1（2026-10-11 待办页按请假看板风格重排）
   布局：深林绿英雄卡（大数字=进行中 + 四状态瓷砖筛选 + 胶囊按钮）
   原则：深色既有元素不动（颜色规则一律浅色作用域）；
        新英雄卡深浅都定义；本块在文件末位，必要时用 !important
        压过本文件 ㉑ 排版段（同 specificity 后者胜）
   ============================================================ */

/* ---------- 英雄卡 ---------- */
.todo-hero {
  background: linear-gradient(135deg, var(--skin-primary) 0%, color-mix(in srgb, var(--skin-primary) 86%, #fff) 100%);
  border-radius: 20px;
  padding: 20px 22px;
  margin-bottom: 16px;
  color: #fff;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--skin-primary) 22%, transparent);
}
[data-theme="dark"] .todo-hero {
  background: linear-gradient(135deg, #14352A 0%, #1B4A37 100%);
  box-shadow: none;
  border: 1px solid var(--border-color);
}
.todo-hero-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.todo-hero-title { font-size: 20px !important; font-weight: 700 !important; color: #fff; letter-spacing: 0.02em; }
.todo-hero-date-chip {
  background: var(--skin-cta); color: var(--skin-primary);
  font-size: 12px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.todo-hero-mid {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 14px;
}
.todo-hero-num-row { display: flex; align-items: baseline; gap: 8px; }
.todo-hero-num {
  font-size: 44px; font-weight: 700; line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums;
}
.todo-hero-num-label { font-size: 13px; color: rgba(255,255,255,0.72); font-weight: 500; }
.todo-hero-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.todo-hero-btn {
  border: 1px solid rgba(255,255,255,0.30);
  background: rgba(255,255,255,0.10);
  color: #fff; font-size: 13px; font-weight: 500;
  min-height: 0; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  transition: background 0.15s cubic-bezier(0.16,1,0.3,1), border-color 0.15s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.todo-hero-btn:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }
.todo-hero-btn--primary { background: var(--skin-cta); border-color: var(--skin-cta); color: var(--skin-primary); font-weight: 700; }
.todo-hero-btn--primary:hover { background: var(--skin-cta-hover); border-color: var(--skin-cta-hover); }

/* ---------- 瓷砖（原看板四卡移入英雄卡） ---------- */
.todo-hero-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.todo-hero-tiles .todo-dash-card {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  margin-bottom: 0 !important;
}
.todo-hero-tiles .todo-dash-card::before { display: none; }
.todo-hero-tiles .todo-dash-card:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.16) !important;
  box-shadow: none !important;
}
.todo-hero-tiles .todo-dash-card.active {
  background: var(--skin-cta) !important;
  border-color: var(--skin-cta) !important;
  box-shadow: none !important;
}
.todo-hero-tiles .todo-dash-count { font-size: 22px !important; color: #fff !important; margin-bottom: 2px !important; }
.todo-hero-tiles .todo-dash-label { color: rgba(255,255,255,0.75) !important; }
.todo-hero-tiles .todo-dash-card.active .todo-dash-count { color: var(--skin-primary, #17402F) !important; }
.todo-hero-tiles .todo-dash-card.active .todo-dash-label { color: color-mix(in srgb, var(--skin-primary, #17402F) 78%, transparent) !important; }

/* ---------- 浅色：主线区 红→琥珀（ urgency 语义保留，色板统一） ---------- */
:root:not([data-theme="dark"]) .mainline-wrap { border-color: #F0DCA8 !important; background: #FBF3DF !important; }
:root:not([data-theme="dark"]) .mainline-title { color: #B45309 !important; }
:root:not([data-theme="dark"]) .mainline-add { color: #B45309 !important; }
:root:not([data-theme="dark"]) .mainline-add:hover { color: #92400E !important; }
:root:not([data-theme="dark"]) .ml-card { border-color: #F0DCA8 !important; }
:root:not([data-theme="dark"]) .ml-check { border-color: #D97706 !important; }
:root:not([data-theme="dark"]) .ml-check:active { background: #FBF3DF !important; }
:root:not([data-theme="dark"]) .ml-overdue-badge { background: #D97706 !important; }

/* ---------- 浅色：快捷入口按钮 → 白卡 14px 圆角 ---------- */
:root:not([data-theme="dark"]) .todo-quick-add-btn {
  border-radius: 999px !important;  /* 全圆胶囊（2026-10-19 用户点名） */
  box-shadow: var(--shadow-sm);
  border-color: var(--border-color);
}
:root:not([data-theme="dark"]) .todo-quick-add-btn:hover {
  border-color: color-mix(in srgb, var(--skin-primary, #17402F) 45%, transparent) !important;
  background: var(--skin-page, #F2F7EC) !important;
}

/* ---------- 浅色：分类标签页 → 分段胶囊 ---------- */
:root:not([data-theme="dark"]) .todo-page-tabs {
  background: var(--skin-primary-pale, #E7F1EC) !important;
  border-radius: 999px !important;
  padding: 4px !important;
}
:root:not([data-theme="dark"]) .todo-page-tab {
  background: transparent !important;
  border-radius: 999px !important;
  color: #4B5F55 !important;
}
:root:not([data-theme="dark"]) .todo-page-tab.active {
  background: var(--skin-primary, #17402F) !important;
  color: #fff !important;
}

/* ---------- 浅色：排序条胶囊 ---------- */
:root:not([data-theme="dark"]) .todo-sort-btn { border-radius: 999px !important; }
:root:not([data-theme="dark"]) .todo-sort-btn.active { background: var(--skin-primary, #17402F) !important; color: #fff !important; }

/* ---------- 浅色：事件卡 ---------- */
:root:not([data-theme="dark"]) .todo-event-card {
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm);
}
:root:not([data-theme="dark"]) .todo-event-card:hover {
  border-color: rgba(23,64,47,0.38) !important;
  box-shadow: var(--shadow-md) !important;
}
:root:not([data-theme="dark"]) .todo-event-card.compact { border-radius: 14px !important; }

/* ---------- 浅色：弹窗圆角统一 ---------- */
:root:not([data-theme="dark"]) .modal-overlay > div { border-radius: 18px; }

/* ---------- 窄屏适配 ---------- */
@media (max-width: 540px) {
  .todo-hero { padding: 16px 16px; border-radius: 16px; }
  .todo-hero-tiles { grid-template-columns: repeat(2, 1fr); }
  .todo-hero-num { font-size: 36px; }
  .todo-hero-btns { width: 100%; }
  .todo-hero-btn { flex: 1 1 40%; text-align: center; padding: 8px 10px; }
  .todo-hero-date-chip { padding: 3px 10px; }
}

/* QUICKBAR_V1：粘贴聊天/事件速记已移入 hero 按钮区，强调键样式随之作废删除 */
:root:not([data-theme="dark"]) .todo-quick-add-btn.todo-accent-primary:hover,
:root:not([data-theme="dark"]) .todo-quick-add-btn.todo-accent-success:hover {
  background: #DDEBD9 !important;
}

/* ============================================================
   SEAT_SKIN_V1（2026-10-11 座位图 tab 换肤）
   布局：页头+人数条 → 深林绿英雄卡（复用 todo-hero 体系）；
        教室标签 → 分段胶囊；座位图行/列排布不改
   配色：请假边框 outline + 角标数字圈换新色板（仅浅色，深色不动）
   ============================================================ */

/* ---------- 英雄卡补充件 ---------- */
.seat-hero-top-right { display: flex; align-items: center; gap: 8px; }
.seat-hero-status {
  font-size: 12px; color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.seat-hero-sub { margin-top: 10px; font-size: 12px; color: rgba(255,255,255,0.72); }
[data-theme="dark"] .seat-hero-sub { color: rgba(255,255,255,0.60); }

/* ---------- 教室标签 → 分段胶囊（浅色） ---------- */
:root:not([data-theme="dark"]) .classroom-selector {
  background: var(--skin-primary-pale, #E7F1EC); border-radius: 999px; padding: 4px; gap: 4px;
  justify-content: center; margin-bottom: 14px;
}
:root:not([data-theme="dark"]) .classroom-tab {
  background: transparent !important; box-shadow: none !important;
  border-radius: 999px !important; color: #4B5F55 !important;
}
:root:not([data-theme="dark"]) .classroom-tab.active {
  background: var(--skin-primary, #17402F) !important; color: #fff !important; box-shadow: none !important;
}
:root:not([data-theme="dark"]) .cls-att-badge { background: var(--skin-cta) !important; color: var(--skin-primary) !important; }
:root:not([data-theme="dark"]) .classroom-tab:not(.active) .cls-att-badge { background: var(--skin-primary-pale, #DCEAD8) !important; color: var(--skin-primary, #2F5243) !important; }

/* ---------- 座位图白卡与教室人数条 ---------- */
:root:not([data-theme="dark"]) .seat-map { background: #FDFEFB; border-radius: 18px; box-shadow: var(--shadow-sm); }
:root:not([data-theme="dark"]) .att-room-detail b { color: #17402F !important; }
:root:not([data-theme="dark"]) .seat-row-label { color: #8CA08F !important; }
:root:not([data-theme="dark"]) .seat-id { color: #7C8A7E !important; }

/* ---------- 座位格底色（浅色；行列排布不动） ---------- */
:root:not([data-theme="dark"]) .seat-available { background: #E3EFDF !important; }
:root:not([data-theme="dark"]) .seat-available:hover { background: #D8E8D2 !important; }
:root:not([data-theme="dark"]) .seat-vacant { background: #F3F7F0 !important; border-color: #AEBBAD !important; }
:root:not([data-theme="dark"]) .seat-vacant-label { color: #6E7A68 !important; }
:root:not([data-theme="dark"]) .seat-vacant .seat-id { color: #6E7A68 !important; }
:root:not([data-theme="dark"]) .seat-has-history { background: #F3F7F0 !important; border-color: #C2CCC0 !important; }
:root:not([data-theme="dark"]) .seat-blocked { background: #EDF2EA !important; }
:root:not([data-theme="dark"]) .seat-focus { background: #FBEFD9 !important; }

/* ---------- 请假学生边框（outline）→ 新色板（浅色） ---------- */
:root:not([data-theme="dark"]) .seat-leave-red    { outline-color: #C0392B !important; }
:root:not([data-theme="dark"]) .seat-leave-blue   { outline-color: #3E6B9B !important; }
:root:not([data-theme="dark"]) .seat-leave-orange { outline-color: #D97706 !important; }
:root:not([data-theme="dark"]) .seat-leave-purple { outline-color: #7C5CBF !important; }
:root:not([data-theme="dark"]) .seat-leave-gray   { outline-color: #8A948C !important; }
:root:not([data-theme="dark"]) .seat-leave-ended  { outline-color: #8A948C !important; }

/* ---------- 角标数字圈（座位右上角）→ 同色板（浅色） ---------- */
:root:not([data-theme="dark"]) .seat-leave-badge-circle--red    { background: #C0392B !important; }
:root:not([data-theme="dark"]) .seat-leave-badge-circle--blue   { background: #3E6B9B !important; }
:root:not([data-theme="dark"]) .seat-leave-badge-circle--orange { background: #D97706 !important; }
:root:not([data-theme="dark"]) .seat-leave-badge-circle--purple { background: #7C5CBF !important; }
:root:not([data-theme="dark"]) .seat-leave-badge-circle--gray   { background: #8A948C !important; }
:root:not([data-theme="dark"]) .seat-leave-badge--red    { background: #C0392B !important; }
:root:not([data-theme="dark"]) .seat-leave-badge--blue   { background: #3E6B9B !important; }
:root:not([data-theme="dark"]) .seat-leave-badge--orange { background: #D97706 !important; }
:root:not([data-theme="dark"]) .seat-leave-badge--purple { background: #7C5CBF !important; }
:root:not([data-theme="dark"]) .seat-leave-badge--gray   { background: #8A948C !important; }
:root:not([data-theme="dark"]) .seat-patrol-dot { box-shadow: 0 0 0 2px #FDFEFB; }

/* ---------- 翻页圆点 ---------- */
:root:not([data-theme="dark"]) .swipe-dot { background: #C9D8C6; }
:root:not([data-theme="dark"]) .swipe-dot.active { background: var(--skin-primary, #17402F); }

/* ============================================================
   LIQUID_TABS_V1（2026-10-11 水滴流胶囊指示器）
   深色模式不启用（指示器 display:none，静态 active 原样保留）
   ============================================================ */
.classroom-selector, .todo-page-tabs, .todo-sort-bar { position: relative; }
/* LQ7FIX：子导航胶囊条必须有定位基准，否则 .liquid-ind 的 absolute 会逃逸到
   外层 #sub-nav（手机端 fixed / 桌面端 sticky）上，top:4px 按外层算，
   绿色胶囊整体上浮约 6px「顶着上边缘」且下方留大空隙（2026-10-11 实测：
   item 顶=725 而指示器顶=719，比胶囊条外边还高 2px）。 */
.sub-nav-bar.capsule { position: relative; }
.liquid-host > * { position: relative; z-index: 1; }
.liquid-ind {
  display: none; position: absolute; z-index: 0;
  border-radius: 999px; background: var(--skin-primary);
  pointer-events: none; transform-origin: center;
  will-change: left, right, top, height;
}
:root:not([data-theme="dark"]) .liquid-host.liquid-ready > .liquid-ind { display: block; }

/* 指示器就位后：隐藏静态 active 底色（避免双胶囊），文字颜色交给过渡 */
:root:not([data-theme="dark"]) .liquid-ready .classroom-tab.active { background: transparent !important; box-shadow: none !important; }
:root:not([data-theme="dark"]) .liquid-ready .todo-page-tab.active { background: transparent !important; }
:root:not([data-theme="dark"]) .liquid-ready .todo-sort-btn.active { background: transparent !important; }
:root:not([data-theme="dark"]) .liquid-ready .bottom-nav-item.active::after { display: none; }
:root:not([data-theme="dark"]) .liquid-ready .classroom-tab,
:root:not([data-theme="dark"]) .liquid-ready .todo-page-tab,
:root:not([data-theme="dark"]) .liquid-ready .todo-sort-btn,
:root:not([data-theme="dark"]) .liquid-ready .bottom-nav-item { transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; }
:root:not([data-theme="dark"]) .liquid-ready .classroom-tab.active,
:root:not([data-theme="dark"]) .liquid-ready .todo-page-tab.active,
:root:not([data-theme="dark"]) .liquid-ready .todo-sort-btn.active,
:root:not([data-theme="dark"]) .liquid-ready .bottom-nav-item.active { color: #fff !important; }

/* 图标缩小再弹回 */
@keyframes liq-pop { 0% { transform: scale(1); } 35% { transform: scale(.82); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
.liquid-host .liq-pop { animation: liq-pop .36s cubic-bezier(0.16, 1, 0.3, 1); }

/* 指示器压扁回弹（高度略变扁） */
@keyframes liquid-squash { 0% { transform: scaleY(1); } 38% { transform: scaleY(.88); } 72% { transform: scaleY(1.05); } 100% { transform: scaleY(1); } }

/* 无障碍：减少动效 */
@media (prefers-reduced-motion: reduce) {
  .liquid-ind { animation: none !important; transition: none !important; }
  .liquid-host .liq-pop { animation: none !important; }
}

/* ============================================================
   MOBILE_TILE_SQUARE_V1（2026-10-11 手机端：英雄卡瓷砖改圆角正方形一排）
   作用：座位页 + 待办页两处 .todo-hero-tiles；桌面端不变
   ============================================================ */
@media (max-width: 540px) {
  .todo-hero-tiles { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
  .todo-hero-tiles .todo-dash-card {
    aspect-ratio: 1 / 1 !important;
    padding: 6px 4px !important;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  }
  .todo-hero-tiles .todo-dash-count { font-size: 20px !important; }
  .todo-hero-tiles .todo-dash-label { font-size: 10px !important; line-height: 1.25; text-align: center; white-space: normal; }
}

/* ============================================================
   REC_EMBED_V1（2026-10-11 录音纪要 iframe 站内嵌入）
   ============================================================ */
.recordings-embed-frame {
  width: 100%; min-height: 70vh; border: 0; display: block;
  background: transparent;
}


/* ============================================================
   LIQUID_TABS_V2（2026-10-11 下午）
   ① sub-nav 白底清理：指示器就位后去掉静态白底胶囊，active 白字
   ② 学生详情页 .tabs-wrap .tabs 改胶囊容器，接入水滴流
   深色模式不启用
   ============================================================ */
:root:not([data-theme="dark"]) .liquid-ready .sub-nav-bar { background: transparent; }
:root:not([data-theme="dark"]) .liquid-ready .sub-nav-item { background: transparent !important; box-shadow: none !important; }
:root:not([data-theme="dark"]) .liquid-ready .sub-nav-item.active { color: #fff !important; }

:root:not([data-theme="dark"]) .tabs-wrap .tabs { background: transparent; border-radius: 999px; padding: 4px; gap: 4px; position: relative; }
/* LQ4FIX：.tabs 原本无 position，liquid-ind 的 absolute 会逃逸到外层定位祖先（左右各偏 21px 且被拉宽）*/
:root:not([data-theme="dark"]) .tabs-wrap .tab { border-bottom: none !important; border-radius: 999px; color: #4B5F55 !important; background: transparent !important; }
:root:not([data-theme="dark"]) .tabs-wrap .tab.active { color: var(--skin-primary, #17402F) !important; }
:root:not([data-theme="dark"]) .tabs-wrap .liquid-ready .tab.active { color: #fff !important; }

/* ============================================================
   LIQUID_TABS_V3（2026-10-11 晚）
   请假登记场景水滴切换器（.leave-scene-tabs）：
   单日请假=深林绿胶囊，多日请假=钢蓝胶囊（指示器颜色随容器 scene-multi 切换）。
   深色模式不启用（保持按钮原样）。
   ============================================================ */
:root:not([data-theme="dark"]) .leave-scene-tabs {
  position: relative;
  display: flex; gap: 4px; width: max-content; max-width: 100%;
  background: var(--skin-primary-pale, #E7F1EC); border-radius: 999px; padding: 4px; margin: 0 0 14px;
}
:root:not([data-theme="dark"]) .leave-scene-tabs .leave-scene-btn {
  position: relative; z-index: 1;
  border: none; background: transparent; cursor: pointer;
  border-radius: 999px; padding: 9px 20px;
  font-size: 14px; font-weight: 600; color: #4B5F55;
  transition: color 0.25s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
:root:not([data-theme="dark"]) .leave-scene-tabs .leave-scene-btn.active { color: #fff !important; }
:root:not([data-theme="dark"]) .leave-scene-tabs .liquid-ind { background: var(--skin-primary, #1E5A40); }
:root:not([data-theme="dark"]) .leave-scene-tabs.scene-multi .liquid-ind { background: #3E6B9B; }
@media (max-width: 480px) {
  :root:not([data-theme="dark"]) .leave-scene-tabs { width: 100%; }
  :root:not([data-theme="dark"]) .leave-scene-tabs .leave-scene-btn { flex: 1; text-align: center; padding: 9px 10px; }
}
/* 深色模式：水滴不启用，改为静态描边按钮（active 填充分色底） */
[data-theme="dark"] .leave-scene-tabs {
  display: flex; gap: 6px; width: max-content; max-width: 100%; margin: 0 0 14px;
}
[data-theme="dark"] .leave-scene-tabs .leave-scene-btn {
  border: 1px solid var(--border, #3a3833); background: transparent; cursor: pointer;
  border-radius: 999px; padding: 9px 20px; font-size: 14px; font-weight: 600;
  color: var(--text-secondary, #a8a296);
}
[data-theme="dark"] .leave-scene-tabs .leave-scene-btn.active {
  background: var(--lv-quick-head, #63d6a4); border-color: transparent; color: #0e1f16;
}
[data-theme="dark"] .leave-scene-tabs.scene-multi .leave-scene-btn.active {
  background: var(--lv-full-head, #82b8f5); color: #0e1a28;
}
@media (max-width: 480px) {
  [data-theme="dark"] .leave-scene-tabs { width: 100%; }
  [data-theme="dark"] .leave-scene-tabs .leave-scene-btn { flex: 1; text-align: center; padding: 9px 10px; }
}

/* ============================================================
   LEAVE_SHEET_V1（2026-10-11 晚）
   请假登记底部弹出面板：无遮罩、背景保持可滚动可点击；
   0.55s 升起 / 0.3s 收回；下拉把手超 40px 或点外部收回；
   打开时底部导航下滑让位（body.leave-sheet-open）。
   配色走全局 token（--card-bg/--border），深浅色自动一致。
   ============================================================ */
.leave-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
  margin: 0 auto; max-width: 640px;
  background: var(--card-bg);
  border: 1px solid var(--border); border-bottom: none;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 34px rgba(23, 64, 47, 0.16);
  max-height: 80vh; display: flex; flex-direction: column;
  transform: translateY(108%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1);
  will-change: transform;
}
.leave-sheet.open {
  transform: translateY(0);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.leave-sheet-grip {
  flex: none; padding: 10px 0 6px; cursor: pointer;
  display: flex; justify-content: center;
  touch-action: none;
}
.leave-sheet-grip i {
  display: block; width: 46px; height: 5px; border-radius: 999px;
  background: var(--border);
}
[data-theme="dark"] .leave-sheet-grip i { background: rgba(255,255,255,0.22); }
.leave-sheet-body {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 2px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  overscroll-behavior: contain;
}
/* 打开时底部导航下滑让位 */
.bottom-nav { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
body.leave-sheet-open .bottom-nav { transform: translateY(130%); pointer-events: none; }
@media (max-width: 768px) {
  .leave-sheet { max-width: 100%; border-radius: 18px 18px 0 0; }
  .leave-sheet-body { padding-left: 12px; padding-right: 12px; }
}

/* ============================================================
   MODAL_X_V1（2026-10-11 晚）
   全局弹窗：右上角 ✕ 关闭 + 电脑端可拖角拉大 + Esc 关闭。
   ============================================================ */
.modal-box { position: relative; }
#modal-x {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  width: 30px; height: 30px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--bg-tertiary, rgba(0,0,0,0.06));
  color: var(--text-secondary);
  font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.15s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
#modal-x:hover { background: var(--danger, #B91C1C); color: #fff; transform: scale(1.08); }
@media (min-width: 769px) {
  .modal-box { resize: both; overflow: auto; width: min(560px, 100%); max-width: 96vw; min-width: 320px; min-height: 140px; }
}
@media (max-width: 768px) {
  #modal-x { width: 34px; height: 34px; top: 6px; right: 6px; }
}

/* ============================================================
   STU_HERO_V2（2026-10-11 晚）
   学生详情页：姓名 banner 上移到子菜单上方（#stu-hero-wrap 在 render 骨架里）；
   切到其他 tab 时 banner 缩小成胶囊吸顶居中常驻（hero-mini-on）。
   ============================================================ */
#stu-hero-wrap { padding: 0 16px; margin-bottom: 14px; transform: none !important; filter: none !important; will-change: auto !important; perspective: none !important; contain: none !important; }
#stu-hero-wrap .profile-hero { margin-bottom: 0; }
#stu-hero-wrap.hero-mini-on .profile-hero {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(92vw, 520px);
  margin: 0; padding: 7px 16px 7px 8px; gap: 10px;
  border-radius: 999px; z-index: 950;
  box-shadow: 0 8px 26px rgba(23, 64, 47, 0.28);
  /* LAYF：胶囊出现动画延长 25%（0.3s → 0.38s） */
  animation: hero-mini-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes hero-mini-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* LAYF：离开学生详情路由时快速淡出（动画放在 .profile-hero 上——
   它自带 transform 基准；不能放 wrap 上，opacity 会让 fixed 子元素跳位） */
#stu-hero-wrap.hero-mini-out .profile-hero {
  animation: hero-mini-out 0.15s cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}
@keyframes hero-mini-out {
  to { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}
#stu-hero-wrap.hero-mini-on .profile-avatar { width: 34px; height: 34px; font-size: 15px; border-width: 1.5px; }
#stu-hero-wrap.hero-mini-on .profile-avatar-cam { display: none; }
#stu-hero-wrap.hero-mini-on .profile-hero-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
#stu-hero-wrap.hero-mini-on .profile-hero-name { font-size: 15px; font-weight: 700; line-height: 34px; }
#stu-hero-wrap.hero-mini-on .profile-hero-sub { font-size: 12px; opacity: 0.85; line-height: 34px; margin: 0; }
#stu-hero-wrap.hero-mini-on .profile-hero-badges { display: flex; gap: 4px; align-items: center; }
#stu-hero-wrap.hero-mini-on .profile-hero-badge { font-size: 11px; line-height: 1; padding: 4px 8px; display: inline-flex; align-items: center; height: 22px; }
#stu-hero-wrap.hero-mini-on .profile-hero::before,
#stu-hero-wrap.hero-mini-on .profile-hero::after { display: none; }
@media (max-width: 768px) {
  #stu-hero-wrap { padding: 0 12px; }
  #stu-hero-wrap.hero-mini-on .profile-hero { top: 62px; }
}

/* ============================================================
   TOAST_V2（2026-10-11 晚）：操作完成提示对比加强 + 时长延长
   底色换肤深林绿 #17402F、青柠细描边、加粗放大；4s 后收回（app.js）
   ============================================================ */
#toast {
  background: var(--skin-primary, #17402F) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 14px 26px !important;
  border-radius: 16px !important;
  border: 1px solid color-mix(in srgb, var(--skin-cta, #D4F269) 38%, transparent);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--skin-primary, #17402F) 45%, transparent) !important;
  letter-spacing: 0.3px;
}
#toast.success { background: var(--skin-primary, #17402F) !important; }
#toast.error   { background: #7F1D1D !important; border-color: rgba(252, 165, 165, 0.45); }
#toast.warning { background: #92400E !important; border-color: rgba(253, 230, 138, 0.45); }
#toast.info    { background: color-mix(in srgb, var(--skin-primary, #17402F) 86%, #fff) !important; }
[data-theme="dark"] #toast,
[data-theme="dark"] #toast.success { background: #1B4A37 !important; }
[data-theme="dark"] #toast.error   { background: #7F1D1D !important; }
[data-theme="dark"] #toast.warning { background: #92400E !important; }
[data-theme="dark"] #toast.info    { background: #1B4A37 !important; }

/* SEAT_HERO_LINK：座位图 banner 成为请假看板入口 */
.seat-hero-link { cursor: pointer; }
.seat-hero-link .todo-dash-card { transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s cubic-bezier(0.16, 1, 0.3, 1); }
.seat-hero-link:hover .todo-dash-card { box-shadow: 0 4px 14px rgba(0,0,0,0.18); }

/* ============================================================
   LG2（2026-10-11 晚）：①底部胶囊条 active 白字 ②座位名字对比 ③扫描台账紧凑布局
   ============================================================ */

/* ① 底部胶囊条（班级分组 sub-nav-bar.capsule）：active 深绿底必须配白字。
   无论水滴是否就绪都生效，修「批量登记」深底深字看不清 */
:root:not([data-theme="dark"]) .sub-nav-bar.capsule .sub-nav-item.active {
  background: var(--primary, #2F8A6B);
  color: #fff !important;
  box-shadow: none;
}
:root:not([data-theme="dark"]) .sub-nav-bar.capsule .sub-nav-item.active .sub-nav-label { color: #fff !important; }
:root:not([data-theme="dark"]) .sub-nav-bar.capsule .sub-nav-item.active .sub-nav-icon { color: #fff; }
:root:not([data-theme="dark"]) .sub-nav-bar.capsule .sub-nav-item.active .sub-nav-icon svg { stroke: #fff; }

/* ② 座位格子名字：昵称加深、真名从浅灰提到深灰绿；选中格反白 */
:root:not([data-theme="dark"]) .ba-seat-map .seat-nickname { color: #1F1D19 !important; font-size: 0.76rem; }
:root:not([data-theme="dark"]) .ba-seat-map .seat-realname { color: #4E5850 !important; font-size: 0.63rem; }
:root:not([data-theme="dark"]) .ba-seat-selected .seat-nickname { color: #fff !important; }
:root:not([data-theme="dark"]) .ba-seat-selected .seat-realname { color: rgba(255,255,255,0.9) !important; }
:root:not([data-theme="dark"]) .seat-realname { color: #5A6258; }

/* ③ 扫描状态台账：两行紧凑卡（作品名+日期 / 统计+操作），
   修手机端 main 列被挤成一字一行、卡片撑到 200px 高的问题 */
.ba-ledger-row { flex-wrap: wrap; row-gap: 8px; padding: 10px 12px; }
.ba-ledger-top { flex: 1 1 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.ba-ledger-top .ba-ledger-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-ledger-date { flex-shrink: 0; font-size: 0.74rem; color: var(--text-tertiary); }
.ba-ledger-bottom { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ba-ledger-bottom .ba-ledger-counts { flex: 1; justify-content: flex-start; min-width: 0; }
.ba-ledger-bottom .ba-ledger-actions { margin-left: auto; flex-shrink: 0; }
.ba-ledger-bottom .ba-ledger-actions .btn { padding: 5px 10px; font-size: 0.72rem; }
.ba-count-pill { font-size: 0.68rem; padding: 2px 8px; }
@media (max-width: 768px) {
  .ba-ledger-bottom { flex-wrap: wrap; row-gap: 6px; }
  .ba-ledger-bottom .ba-ledger-actions { margin-left: 0; }
}

/* ============================================================
   BTN_FLASH_V2（2026-10-11 晚）：数据操作按钮成功对勾反馈
   点击导出/保存/同步/复制/备份/推送等按钮且操作成功 →
   按钮翻转成 ✓（语义绿 #15803D + 白勾），1 秒后恢复原样（app.js 控制）
   ============================================================ */
.btn-flash-ok {
  background: #15803D !important;
  color: #fff !important;
  border-color: #15803D !important;
  box-shadow: 0 4px 16px rgba(21, 128, 61, 0.38) !important;
  animation: btn-flash-flip 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.btn-flash-ok .btn-flash-check { display: inline-block; font-weight: 800; line-height: 1; font-size: 1.05em; }
@keyframes btn-flash-flip {
  0%   { transform: rotateY(90deg) scale(0.88); }
  100% { transform: rotateY(0deg) scale(1); }
}
[data-theme="dark"] .btn-flash-ok { background: #15803D !important; border-color: #2F8A6B !important; }

/* ============================================================
   HINT_ICON_V1（2026-10-11 晚）：说明性文字收进 ⓘ 图标
   钢蓝圆点「！」，点击弹深绿气泡（5s 自动消失 / 点外部提前消失）
   ============================================================ */
.hint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3E6B9B;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 6px;
  flex-shrink: 0;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.hint-icon:hover { background: #2F5578; transform: scale(1.12); }
.hint-icon:active { transform: scale(0.95); }
#app-hint-pop {
  position: fixed;
  z-index: 9999;
  max-width: 320px;
  background: var(--skin-primary, #17402F);
  color: #fff;
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre-line;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--skin-cta, #D4F269) 28%, transparent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--skin-primary, #17402F) 45%, transparent);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
#app-hint-pop.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
[data-theme="dark"] .hint-icon { background: #5A7FA8; }
[data-theme="dark"] #app-hint-pop { background: #1B4A37; }

/* LG4：请假登记表单（弹窗内）纵向间距收紧 —— 请假事由/事由选项/备注/输入框四行 */
.leave-sheet .multi-leave-form .form-group { margin-bottom: 10px; }
.leave-sheet .multi-leave-form .form-label { margin-bottom: 4px; }
.leave-sheet .multi-leave-form .behavior-tags { margin-bottom: 0; }

/* ============================================================
   SHEET_MOBI_V1（2026-10-11 夜）：手机端请假面板压高一档（桌面不动）
   实测 390×844 面板 542px(64%) → 目标 ~480px(57%)
   ============================================================ */
@media (max-width: 768px) {
  .leave-sheet-grip { padding: 7px 0 4px; }
  .leave-sheet-body { padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .leave-sheet .card-subtitle { margin-bottom: 5px; }
  .leave-sheet .quick-leave-form .form-group { margin-bottom: 9px; }
  .leave-sheet .quick-leave-form .form-label { margin-bottom: 3px; }
  .leave-sheet .multi-leave-form .form-group { margin-bottom: 8px; }
  .leave-sheet .multi-leave-form .form-label { margin-bottom: 3px; }
  .leave-sheet .form-group .btn { margin-top: 2px; }
}
@media (max-width: 768px) {
  .leave-sheet .card-subtitle .text-tertiary { display: none; }
}

/* ============================================================
   LG8（2026-10-11 深夜）
   ① DETAIL_TB_V1：学生详情页顶部三按钮（< / 改状态 / 编辑）只在
     「基础档案」tab 显示；其余 7 个 tab 吸顶姓名胶囊常驻顶部中央，
     会挡住这三个按钮 → 加 .tb-hidden 淡出并禁点击（节点保留，切回即现）。
   ② 桌面端详情页 8 个子菜单单行平分：4 字标签的两行 <br> 取消换行，
     每项 flex:1 等宽拉长 —— 深绿水滴胶囊随之变成宽跑道形（同 207教室
     那种效果），不再是窄项撑出来的圆形（2026-10-11 用户定）。手机端不变。
   ============================================================ */
.profile-toolbar { transition: opacity 0.15s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
.profile-toolbar.tb-hidden { opacity: 0 !important; pointer-events: none !important; }
@media (min-width: 769px) {
  .tabs-wrap .tabs { flex-wrap: nowrap; }
  .tabs-wrap .tabs .tab { flex: 1 1 0; min-width: 0; text-align: center; }
  .tabs-wrap .tab .tab-label { white-space: nowrap; }
  .tabs-wrap .tab .tab-label br { display: none; }
}

/* ============================================================
   LG11（2026-10-12 下午）请假登记弹窗改造
   - 电脑端（≥769px）：底部抽屉 → 常规居中弹窗（带浅遮罩、缩放淡入、
     隐藏拖拽把手）；点遮罩/点外部仍可关闭。手机端保持底部抽屉不变。
   - 桌面弹窗打开时背景照常可见（半透明遮罩），视觉聚焦、不再顶在屏幕底。
   ============================================================ */
@media (min-width: 769px) {
  .leave-sheet {
    left: 50%; right: auto; bottom: auto; top: 50%; margin: 0;
    width: 680px; max-width: calc(100vw - 56px);
    max-height: 86vh; border-radius: 16px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 24px 70px rgba(15, 40, 30, 0.30);
    transform: translate(-50%, -46%) scale(0.96); opacity: 0;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(.4,0,1,1), opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .leave-sheet.open {
    transform: translate(-50%, -50%) scale(1); opacity: 1;
    pointer-events: auto;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .leave-sheet-grip { display: none; }
  .leave-sheet-body { padding: 14px 20px 20px; }
  /* 浅遮罩：放在面板之下（1090 < 1100），点它=点外部 → 关闭弹窗 */
  body.leave-sheet-open::before {
    content: ''; position: fixed; left: 0; right: 0; top: 0; bottom: 0;
    z-index: 1090; background: rgba(15, 40, 30, 0.32);
  }
}

/* ---------- SETHERO_V1（2026-10-18）：设置页六板块统一英雄卡（复用 todo-hero 设计体系） ---------- */
.st-hero { padding: 18px 20px; }
.st-hero .todo-hero-title { font-size: 17px !important; }
.st-hero-desc { font-size: 13px; color: rgba(255,255,255,0.72); margin-top: 8px; line-height: 1.55; }
.st-hero-link { cursor: pointer; transition: transform 0.15s cubic-bezier(0.16,1,0.3,1), box-shadow 0.15s cubic-bezier(0.16,1,0.3,1); display: block; }
.st-hero-link:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(23, 64, 47, 0.30); }
/* 卡内展开体：半透明白面板，内嵌控件全部适配深底 */
.st-hero-body { margin-top: 12px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; padding: 12px; color: #fff; }
/* SETGRID_V2（2026-10-20）：设置页宫格版式（对齐评价中心 chub 风格） */
.st-hero-head { display: flex; justify-content: space-between; align-items: center; }
.st-hero-title { font-size: 17px !important; font-weight: 800 !important; }
.st-hero-sub { font-size: 12px; color: rgba(255,255,255,0.66); margin: 4px 0 14px; }
.st-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 122px)); gap: 10px; justify-content: start; }
.st-tile { aspect-ratio: 1 / 1; min-width: 0; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 6px 4px; color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.25; text-align: center; overflow: hidden; font-family: inherit; }
.st-tile:active { transform: scale(0.96); background: rgba(255,255,255,0.18); }
.st-tile { color: #fff !important; }
.st-tile .st-tile-name { color: #fff !important; }
.st-tile-ico { width: 34px; height: 34px; flex: none; }
.st-tile-ico svg { width: 100%; height: 100%; display: block; stroke: #fff !important; }
.st-tile + .st-tile { margin: 0; }
/* SETICO_V1（2026-10-20）：设置页条目左侧 SVG 图标列（与评价中心图标同语言） */
.st-row { display: flex; gap: 14px; align-items: flex-start; }
.st-ico { flex: none; width: 46px; height: 46px; border-radius: 13px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; }
.st-ico svg { width: 26px; height: 26px; }
.st-main { flex: 1; min-width: 0; }
.st-main .todo-hero-top { margin-bottom: 2px; }
.st-hero .st-coll { margin: 12px 0 0; background: transparent; box-shadow: none; border-radius: 12px; }
.st-hero .st-coll .collapsible-body { padding: 12px; box-shadow: none; }
.st-hero .text-tertiary { color: rgba(255,255,255,0.65) !important; }
/* 开关：关=白 28%（深底可见），开=荧光青柠 + 深绿旋钮（与 CTA 同体系） */
.st-hero .switch-slider { background: rgba(255,255,255,0.28); box-shadow: none; }
.st-hero .switch input:checked + .switch-slider { background: var(--skin-cta); }
.st-hero .switch input:checked + .switch-slider:before { background: var(--skin-primary, #17402F); }
/* 内嵌表单控件 */
.st-hero .form-select { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.30); }
.st-hero .form-select option { color: #333; background: #fff; }
.st-hero .btn { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.30); box-shadow: none; }
.st-hero .btn:hover { background: rgba(255,255,255,0.20); box-shadow: none; }
.st-hero .log-date-picker { display: flex; gap: 8px; align-items: center; }
/* 同步日志表格适配深底 */
.st-hero .leave-table th { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); box-shadow: none; }
.st-hero .leave-table td { color: #fff; box-shadow: inset 0 -1px 0 rgba(255,255,255,0.10); }
/* 操作日志列表适配深底 */
.st-hero .log-item { background: rgba(255,255,255,0.10); box-shadow: none; }
.st-hero .log-time { color: rgba(255,255,255,0.60); }
.st-hero .log-target { color: #fff; }
.st-hero .log-detail { color: rgba(255,255,255,0.78); }
.st-hero .log-empty, .st-hero .log-page-info { color: rgba(255,255,255,0.65) !important; background: transparent; box-shadow: none; }
.st-hero .collapsible-chevron { color: rgba(255,255,255,0.80); }
/* 关于：降级为页脚小字（不再是板块卡片） */
.st-about { font-size: 12px; color: var(--text-tertiary); text-align: center; margin: 20px 6px 10px; line-height: 1.7; }
@media (max-width: 640px) {
  .st-hero { padding: 16px; }
  .st-hero .todo-hero-title { font-size: 16px !important; }
  /* 防全局移动规则 .todo-hero-btn{flex:1 1 40%}（为座位图按钮排布设计）把设置页 chip 拉成横贯大按钮 */
  .st-hero .todo-hero-top { flex-wrap: nowrap; }
  .st-hero .todo-hero-btn { flex: 0 0 auto; padding: 6px 14px; }
}

/* ============================================================
   TASKHUB2_V1（2026-10-18）：班级任务组子导航 → 页面内图标宫格
   与「评语」tab 的 hub（.chub，样式在 style.css）同款：深绿卡 + 图标格，
   当前页青柠高亮。原手机端底部深绿胶囊条（旧 TASKHUB_V1）下线；
   宫格由 App.tasksHubHtml() 插在各任务页 render 顶部。
   桌面 4 列一行，≤560px 回落 2×2。
   ============================================================ */
.chub.taskhub { margin: 0 0 16px; }
.chub.taskhub .chub-grid { grid-template-columns: repeat(4, 1fr); }
.chub.taskhub a.chub-btn { text-decoration: none; }
.chub.taskhub .chub-btn:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.chub.taskhub .chub-cur {
  background: var(--skin-cta);
  border-color: var(--skin-cta);
  color: var(--skin-primary, #163B2C);
  font-weight: 800;
}
.chub.taskhub .chub-cur:hover { background: var(--skin-cta); color: var(--skin-primary); }
@media (max-width: 560px) {
  .chub.taskhub .chub-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   TASKHUB3_V1（2026-10-18）：任务中心独立页（#/tasks）
   App 式二级导航入口：按钮放大更像 App 图标；宫格页不再嵌在各任务页里
   ============================================================ */
.chub.taskhub-page { margin: 4px 0 0; }
.chub.taskhub-page .chub-btn { padding: 26px 8px; }
.chub.taskhub-page .chub-ico { font-size: 2.1rem; }
.chub.taskhub-page .chub-grid { gap: 12px; }

/* ============================================================
   REC_PARK_V1（2026-10-19）：录音 iframe 外挂常驻
   之前：iframe 挪进 #app，切走即被 innerHTML 销毁 → 再进录音页整页重载 2~5s（「经常卡住」根因）。
   现在：iframe fixed 覆盖内容区挂在 body 下，切 tab 只隐藏不销毁，二次进入秒开。
   ============================================================ */
.recordings-embed-frame {
  position: fixed; left: 0; right: 0; z-index: 500;
  width: 100%; height: 60vh; min-height: 420px;
  background: var(--bg);
}
.recordings-embed-frame.rec-parked { display: none !important; }
#rec-boot-spin {
  position: fixed; z-index: 501; left: 0; right: 0; top: 42%;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none; color: var(--text-secondary); font-size: 0.85rem;
}
#rec-boot-spin .spin-ring {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--border, #e3e7e2); border-top-color: var(--skin-primary, #1E5A40);
  animation: recspin .8s linear infinite;
}
@keyframes recspin { to { transform: rotate(360deg); } }



/* ============================================================
   INPUT_UNIFY_V1（2026-10-21）：全站输入框统一（浅色限定，深色冻结不适用）
   基准规格 = 账号页 ACCT_ROUND_V2：高 40px / 圆角 12px / 1px 主题边框 /
   白卡底 / 字号 14px；textarea 高度自适应(min 80px)。
   用 !important 压过 4 处历史重定义与 20 处 JS 内联样式。
   保留的既有规则：手机端 min-height:44px+16px（触控达标）、深色块、日期/时间/开关/勾选框。
   ============================================================ */
:root:not([data-theme="dark"]) input[type="text"],
:root:not([data-theme="dark"]) input[type="password"],
:root:not([data-theme="dark"]) input[type="number"],
:root:not([data-theme="dark"]) input[type="email"],
:root:not([data-theme="dark"]) input[type="search"],
:root:not([data-theme="dark"]) input[type="url"],
:root:not([data-theme="dark"]) input[type="tel"],
:root:not([data-theme="dark"]) input:not([type]),
:root:not([data-theme="dark"]) select,
:root:not([data-theme="dark"]) textarea {
  height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid var(--input-border, #8CA092) !important;
  border-radius: 12px !important;
  background-color: var(--skin-card, #FFFFFF) !important;
  color: var(--skin-text, #1F1D19) !important;
  box-sizing: border-box !important;
  font-size: 14px;
  margin: 0;
}
:root:not([data-theme="dark"]) textarea {
  height: auto !important;
  min-height: 80px !important;
  padding: 10px 12px !important;
  line-height: 1.5;
}





/* COURSE_SQ_V1（2026-10-21）：消课概览展开四卡（总自然天数/周二休息日/累计请假/实际消课）
   与作业统计同款——一排等宽正方形 */
:root:not([data-theme="dark"]) #acc-course .monthly-summary { gap: 8px; flex-wrap: nowrap; }
:root:not([data-theme="dark"]) #acc-course .monthly-card {
  min-width: 0; flex: 1 1 0;
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  padding: 8px 4px;
}
:root:not([data-theme="dark"]) #acc-course .monthly-card .month-label { margin-bottom: 0; }
:root:not([data-theme="dark"]) #acc-course .monthly-card .month-value { font-size: 1.3rem; }

/* ACCHEAD_V2（2026-10-21）：折叠卡头部统一形态——标题一行、小字描述固定第二行。
   之前描述是否换行取决于标题长度（消课概览换行/成绩分析不换）→ 两张卡像两种组件。
   现在全部两行式，视觉一致；卡片间距由 .profile-card 既有 margin-bottom:16px 保证。 */
:root:not([data-theme="dark"]) .wb-acc-head .wb-acc-title { display: block; }
:root:not([data-theme="dark"]) .wb-acc-head .wb-acc-title .wb-acc-sum {
  display: block;
  margin-top: 3px;
}
/* 学生详情页卡片间距一致性兜底（消除历史 margin 差异） */
:root:not([data-theme="dark"]) .profile-section.profile-card { margin-bottom: 16px; }
:root:not([data-theme="dark"]) .profile-section.profile-card:last-child { margin-bottom: 0; }

/* HWSTAT_SQ_V1（2026-10-21）：作业提交统计四卡（未上传/补上传/请假/已上传）
   一排等宽 + 正方形（aspect-ratio 1/1），与消课概览四卡区分布局对齐 */
.hw-stat-summary { gap: 8px; flex-wrap: nowrap; }
.hw-stat-summary .monthly-card {
  min-width: 0; flex: 1 1 0;
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  padding: 8px 4px;
}
.hw-stat-summary .monthly-card .month-label { margin-bottom: 0; }
.hw-stat-summary .monthly-card .month-value { font-size: 1.3rem; }

/* LEAVE_CAL_V3（2026-10-21）：请假日历选中区间改「圆形日期片」（与端点圆同尺寸），
   去掉整格方形色带；hover 高亮同步改到圆片上。浅色限定，深色冻结不动。 */
:root:not([data-theme="dark"]) .lrc-cell:hover { background: transparent; }
:root:not([data-theme="dark"]) .lrc-cell:hover .lrc-day { background: var(--bg-tertiary); }
:root:not([data-theme="dark"]) .lrc-inrange,
:root:not([data-theme="dark"]) .lrc-start,
:root:not([data-theme="dark"]) .lrc-end { background: transparent; }
:root:not([data-theme="dark"]) .lrc-inrange:hover,
:root:not([data-theme="dark"]) .lrc-start:hover,
:root:not([data-theme="dark"]) .lrc-end:hover { background: transparent; }
:root:not([data-theme="dark"]) .lrc-inrange .lrc-day {
  background: var(--primary-alpha); color: var(--primary); font-weight: 600;
}
:root:not([data-theme="dark"]) .lrc-inrange:hover .lrc-day { background: var(--primary-alpha); }
:root:not([data-theme="dark"]) .lrc-start:hover .lrc-day,
:root:not([data-theme="dark"]) .lrc-end:hover .lrc-day { background: var(--skin-primary, #17402F); }
/* 标签旁说明 → 小叹号圆标（悬停 title / 点按 toast） */
.cal-hint-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--primary-light); color: var(--primary);
  font-size: 11px; font-weight: 700; line-height: 1;
  cursor: help; margin-left: 6px; vertical-align: -3px;
  user-select: none;
}


/* ============================================================
   BUTTON_UNIFY_V1（2026-10-21）：按钮两大形态定稿（用户拍板）
   ① 导航型（进二级页）= 图标宫格卡（st-tile / chub-btn / todo-dash-card 等，已是此形态，不动）
   ② 操作型（选项/分组/提交）= 全圆胶囊 999px —— 本块统一，只改形状不动尺寸颜色。
   排除：宫格 tile、hero 入口卡、日期选择钮(wbdate-field)、开关勾选框；深色冻结。
   ============================================================ */
:root:not([data-theme="dark"]) .btn,
:root:not([data-theme="dark"]) .btn-sm,
:root:not([data-theme="dark"]) .btn-xs,
:root:not([data-theme="dark"]) .btn-icon,
:root:not([data-theme="dark"]) .seat-action-btn,
:root:not([data-theme="dark"]) .hw-action-btn,
:root:not([data-theme="dark"]) .rollcall-btn,
:root:not([data-theme="dark"]) .rollcall-btn-group,
:root:not([data-theme="dark"]) .rc-action-btn,
:root:not([data-theme="dark"]) .ca-snap-btn,
:root:not([data-theme="dark"]) .ca-monthbar-btn,
:root:not([data-theme="dark"]) .ca-month-btn,
:root:not([data-theme="dark"]) .todo-cat-btn,
:root:not([data-theme="dark"]) .todo-sort-btn,
:root:not([data-theme="dark"]) .todo-step-btn,
:root:not([data-theme="dark"]) .student-todo-add-btn,
:root:not([data-theme="dark"]) .seats-bottom-btn,
:root:not([data-theme="dark"]) .patrol-bulk-btn,
:root:not([data-theme="dark"]) .patrol-row-btn,
:root:not([data-theme="dark"]) .patrol-tag-btn,
:root:not([data-theme="dark"]) .seg-btn,
:root:not([data-theme="dark"]) .nav-jump-btn,
:root:not([data-theme="dark"]) .quick-btn,
:root:not([data-theme="dark"]) .hw-more-btn,
:root:not([data-theme="dark"]) .cf-btn-cancel,
:root:not([data-theme="dark"]) .cf-btn-download,
:root:not([data-theme="dark"]) .step-edit-btn,
:root:not([data-theme="dark"]) .step-delete-btn,
:root:not([data-theme="dark"]) .step-add-btn,
:root:not([data-theme="dark"]) .step-order-btn,
:root:not([data-theme="dark"]) .time-step,
:root:not([data-theme="dark"]) .lrc-nav,
:root:not([data-theme="dark"]) .modal-close,
:root:not([data-theme="dark"]) .theme-toggle-btn,
:root:not([data-theme="dark"]) .profile-icon-btn,
:root:not([data-theme="dark"]) .profile-back-btn,
:root:not([data-theme="dark"]) .todo-quick-tpl-btn,
:root:not([data-theme="dark"]) .qd-chip {
  border-radius: 999px !important;
}

/* ACCT_ROUND_V1（2026-10-21）：账号与安全页 —— 输入框/下拉改圆角矩形(12px)、
   按钮改全圆胶囊(999px)，尺寸一律不变；深色模式冻结不适用（浅色限定）。 */
:root:not([data-theme="dark"]) .st-acct .au-input,
:root:not([data-theme="dark"]) .st-acct .form-select {
  border-radius: 12px;
}
:root:not([data-theme="dark"]) .st-acct .btn {
  border-radius: 999px;
}
/* ACCT_ROUND_V2（2026-10-21）：两组输入框此前只有 UA 默认样式导致两处长得不一样——
   统一高度/边框/底色/内边距；按钮与上方元素间距统一 12px（按钮组之间 8px）。 */
:root:not([data-theme="dark"]) .st-acct .au-input,
:root:not([data-theme="dark"]) .st-acct .form-select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--input-border, #8CA092);
  background: var(--skin-card, #FFFFFF);
  color: var(--skin-text, #1F1D19);
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  font-size: 14px;
}
:root:not([data-theme="dark"]) .st-acct .card > .btn-block {
  margin-top: 12px !important;
}
:root:not([data-theme="dark"]) .st-acct .card > .btn-block + .btn-block {
  margin-top: 8px !important;
}

/* REC_SKELETON_V1（2026-10-21）：录音页骨架屏 —— 挂 body 下，复用 .recordings-embed-frame
   的 fixed 定位（手机端自动吃到 RECSAFE 安全区规则），z-index 压在 iframe 上。
   底色/微光全走 skin 变量：浅深色自适应，不改动任何既有深色规则。 */
#rec-skeleton {
  z-index: 501;
  padding: 18px 16px;
  overflow: hidden;
  pointer-events: none;
}
#rec-skeleton .rs-line {
  position: relative; overflow: hidden;
  border-radius: 10px;
  background: var(--skin-card, #FFFFFF);
}
#rec-skeleton .rs-line::after {
  content: ''; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--skin-primary, #17402F) 12%, transparent), transparent);
  animation: rec-shimmer 1.4s ease-in-out infinite;
}
@keyframes rec-shimmer { to { transform: translateX(100%); } }
#rec-skeleton .rs-hero { height: 92px; border-radius: 16px; margin-bottom: 14px; }
#rec-skeleton .rs-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
#rec-skeleton .rs-cat { aspect-ratio: 1 / 1; border-radius: 14px; }
#rec-skeleton .rs-row { height: 64px; border-radius: 12px; margin-bottom: 10px; }

/* SKIN_ENGINE_V1 深色锁值（2026-10-21）：无深色覆盖的 var 化规则锁回原表现 */
[data-theme="dark"] .todo-hero-tiles .todo-dash-card.active .todo-dash-count { color: #17402F !important; }
[data-theme="dark"] .todo-hero-tiles .todo-dash-card.active .todo-dash-label { color: rgba(23,64,47,0.78) !important; }
[data-theme="dark"] .st-hero .switch input:checked + .switch-slider:before { background: #17402F; }
[data-theme="dark"] .chub.taskhub .chub-cur { color: #163B2C; }
[data-theme="dark"] #rec-boot-spin .spin-ring { border-top-color: #1E5A40; }


/* SEAT_CTA_ICON_V2（2026-10-21）：「学生总表」入口卡对齐设置页 tile 规格——
   图标 34×34（同 .st-tile-ico）、文字 13px/600（覆盖手机端 16px/800 旧规则），浅色限定 */
:root:not([data-theme="dark"]) .todo-dash-cta .todo-dash-cta-ico {
  width: 34px !important; height: 34px !important; margin-bottom: 6px !important;
}
:root:not([data-theme="dark"]) .todo-hero-tiles .todo-dash-card.todo-dash-cta .todo-dash-cta-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}