/* ============================================================
   design-tokens.css — 高级感换皮层（2026-09-25）
   加载顺序：最后。删除本文件 + index.html 中的引用 = 完整回滚。
   原则：暖奶白底 + 墨绿单主色 + 发丝线扁平 + 数字放大 + 轻动效
   ============================================================ */

/* ---------- 1. 浅色主题：薄荷白 + 深林绿（2026-10-11 换肤，仅浅色；深色块显式锁旧值） ---------- */
:root {
  /* 主色：深林绿（唯一大面积发言的颜色） */
  --primary: var(--skin-primary, #17402F);
  --primary-light: color-mix(in srgb, var(--skin-primary, #17402F) 82%, #fff);
  --primary-pale: var(--skin-primary-pale, #E7F1EC);
  --primary-dark: color-mix(in srgb, var(--skin-primary, #17402F) 80%, #000);
  --primary-alpha: color-mix(in srgb, var(--skin-primary, #17402F) 10%, transparent);

  /* 状态色：降一点饱和，让主色当主角 */
  --warning: #D97706;
  --warning-light: #F0A93C;
  --warning-pale: #FBF0DC;
  --warning-dark: #B45309;

  --danger: #DC2626;
  --danger-light: #F87171;
  --danger-pale: #FDECEC;
  --danger-dark: #B91C1C;

  --success: var(--skin-primary, #17402F);
  --success-light: color-mix(in srgb, var(--skin-primary, #17402F) 62%, #fff);
  --success-pale: var(--skin-primary-pale, #E7F1EC);
  --success-dark: color-mix(in srgb, var(--skin-primary, #17402F) 82%, #000);

  /* 中性色：薄荷灰阶 */
  --gray-50: var(--skin-page, #F2F7EC);   /* 页面背景：薄荷奶白 */
  --gray-100: var(--skin-input, #EDF2E6);  /* 次级背景/下沉区 */
  --gray-200: var(--skin-border, #DCE5D6);  /* 边框加强 */
  --gray-300: color-mix(in srgb, var(--skin-border, #DCE5D6) 82%, var(--skin-text-2, #6B655C));  /* 次级边框 */
  --gray-500: #7A756B;  /* 次要文字 */
  --gray-700: #3B3A36;  /* 主要文字：暖黑 */

  --border: var(--skin-border, #DCE5D6);        /* 发丝线 */
  --border-light: color-mix(in srgb, var(--skin-border, #DCE5D6) 55%, #fff);
  --input-border: color-mix(in srgb, var(--skin-text-2, #6B655C) 45%, var(--skin-border, #DCE5D6));  /* 输入框边框：需与卡片白色背景可区分（≈3:1） */

  --shadow: 0 1px 2px rgba(60, 50, 30, 0.04), 0 2px 8px rgba(60, 50, 30, 0.05);
  --shadow-lg: 0 6px 20px rgba(60, 50, 30, 0.10);
  --shadow-sm: 0 1px 2px rgba(60, 50, 30, 0.05);

  /* 语义化变量重申（部分补丁文件用字面量重定义了 --bg，这里用字面量+important 收回来） */
  --bg: var(--skin-page, #F2F7EC) !important;
  --bg-secondary: var(--skin-input, #EDF2E6) !important;
  --card-bg: #ffffff !important;
  --text: #3B3A36 !important;
  --text-secondary: var(--skin-text-2, #6B655C) !important;
  --text-tertiary: #77706A !important;
  --border-color: var(--skin-border, #DCE5D6) !important;

  /* 换肤收编变量（style.css/todo_style.css 里遗留的蓝紫橙，浅色=新色；深色块锁回原值） */
  --sk-blue1: var(--skin-primary, #17402F);
  --sk-blue2: var(--skin-primary, #17402F);
  --sk-blue3: var(--skin-primary, #17402F);
  --sk-blue4: var(--skin-primary, #17402F);
  --sk-orange1: #D97706;
  --sk-orange2: #D97706;

  /* 彩签前景色（浅色=深字压淡底；暗色块内重定义为亮字压暗底） */
  --badge-artwork-fg: var(--skin-primary, #14523F);
  --badge-leave-fg: #8A4A04;
  --badge-task-fg: #A02121;
  --status-in-fg: var(--skin-primary, #17402F);
  --status-out-fg: #A02121;
  --status-transfer-fg: #8A4A04;
}

/* ---------- 2. 暗色主题：墨面 + 暖绿主色 ---------- */
[data-theme="dark"] {
  --primary: #5FBF9E;
  --primary-light: #3D8A6C;
  --primary-pale: #1D332B;
  --primary-dark: #8FD9BD;
  --primary-alpha: rgba(95, 191, 158, 0.14);

  --warning-pale: #3a2f1c;
  --danger-pale: #3d2222;
  --success-pale: #1D332B;

  /* 深色锁值（2026-10-11 换肤）：浅色改了但深色块未重定义的变量，锁回旧值 → 深色零变化 */
  --success: #17402F;
  --success-dark: #14523F;
  --gray-50: #FAF7F1;
  --gray-100: #F1ECE2;
  --gray-200: #E7E1D4;
  --gray-300: #D8D1C2;

  /* 换肤收编变量：深色锁回原字面值（改版前深色是什么样，现在还是什么样） */
  --sk-blue1: #007aff;
  --sk-blue2: #3370ff;
  --sk-blue3: #6366f1;
  --sk-blue4: #4a7abc;
  --sk-orange1: #ff6d00;
  --sk-orange2: #e8925a;

  /* 暗色语义化变量重申 */
  --bg: #1b1c20 !important;
  --bg-secondary: #26272c !important;
  --card-bg: #232429 !important;
  --text: #f2f2f0 !important;
  --text-secondary: #a3a4a8 !important;
  --text-tertiary: #8F939E !important;
  /* C3 修复：边框/输入框边框补齐暗色值（原缺失导致浅米色亮线） */
  --border: #3A3D46;
  --border-light: #2E3038;
  --border-color: #3A3D46 !important;
  --input-border: #4A4E59;

  /* 彩签前景色（暗色=亮字压暗底） */
  --badge-artwork-fg: #9FE1CB;
  --badge-leave-fg: #F5C06A;
  --badge-task-fg: #F8A5A5;
  --status-in-fg: #5FBF9E;
  --status-out-fg: #F8A5A5;
  --status-transfer-fg: #F5C06A;
}

/* ---------- 3. 全局质感 ---------- */
body { -webkit-font-smoothing: antialiased; background: var(--bg) !important; }
html[data-theme="dark"] body { background: var(--bg) !important; }

/* 卡片：去边框套盒感，发丝线 + 轻悬浮 */
.card {
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow);
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); border-color: var(--border); }

/* 按钮：统一墨绿主色 + 圆角 + 字重 */
.btn { border-radius: 10px; font-weight: 600; letter-spacing: 0.2px; transition: color 0.15s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), filter 0.15s cubic-bezier(0.16, 1, 0.3, 1); }
.btn-primary { background: var(--primary); }
.btn-primary:hover { background: var(--primary-light); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30, 107, 82, 0.28); }
.btn-primary:active { transform: translateY(0); box-shadow: none; }
.btn-secondary { border: 1px solid var(--border); background: var(--card-bg); color: var(--text); }
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger { border: 1px solid var(--danger); background: transparent; color: var(--danger); }
.btn-ghost { background: var(--primary-pale); color: var(--primary); }
.btn-ghost:hover { background: var(--primary); color: #fff; }

/* 数字是主角：统计/徽标数字放大加等宽 */
.month-value, .ldash-card-num { font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }

/* ---------- 4. 轻动效系统 ---------- */
/* 页面切换：淡入上移 6px（替换硬切换） */
#app > * { animation: wbPageIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes wbPageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 弹窗：上移缩放入场 */
.modal, .modal-content, .app-modal, .app-modal-content {
  animation: wbModalIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes wbModalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 通用折叠：grid-rows 过渡（280ms），箭头旋转 */
.wb-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.wb-fold > .wb-fold-inner { overflow: hidden; }
.wb-open > .wb-fold { grid-template-rows: 1fr; }
.wb-fold-arrow { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); color: var(--text-tertiary); flex-shrink: 0; }
.wb-open .wb-fold-arrow { transform: rotate(180deg); }
.wb-fold-head { cursor: pointer; user-select: none; }

/* 减少动态效果：全部禁用 */
@media (prefers-reduced-motion: reduce) {
  #app > *, .modal, .modal-content, .app-modal, .app-modal-content { animation: none !important; }
  .wb-fold, .wb-fold-arrow, .card, .btn { transition: none !important; }
}

/* ---------- 5. 学生详情：信息合并条 ---------- */
.profile-strip { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.profile-strip-main { flex: 1 1 340px; min-width: 0; }
.profile-strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px; }
.profile-strip-grid .profile-info-item { margin: 0; }
@media (max-width: 640px) { .profile-strip-grid { grid-template-columns: repeat(2, 1fr); } }

/* 家长电话行：身份色签 + 号码 + 拨打 */
.pp-block { flex: 0 0 250px; min-width: 230px; border-left: 1px solid var(--border); padding-left: 18px; }
@media (max-width: 640px) { .pp-block { border-left: none; padding-left: 0; flex: 1 1 100%; } }
.pp-head { font-size: 11px; color: var(--text-tertiary); margin-bottom: 7px; display: flex; align-items: center; gap: 6px; }
.pp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: 12.5px; }
.pp-role { font-size: 10.5px; font-weight: 600; border-radius: 5px; padding: 1px 7px; flex-shrink: 0; }
.pp-role--father { background: var(--primary-pale); color: var(--primary); }
.pp-role--mother { background: var(--warning-pale); color: var(--warning-dark); }
.pp-role--other  { background: var(--gray-100); color: var(--text-secondary); }
.pp-num { font-variant-numeric: tabular-nums; font-weight: 600; cursor: pointer; }
.pp-add { font-size: 11px; color: var(--text-tertiary); background: none; border: 1px dashed var(--border); border-radius: 7px; padding: 3px 10px; cursor: pointer; transition: color 0.15s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), filter 0.15s cubic-bezier(0.16, 1, 0.3, 1); }
.pp-add:hover { color: var(--primary); border-color: var(--primary); }
.pp-edit { margin-left: auto; width: 22px; height: 22px; border: none; background: none; color: var(--text-tertiary); cursor: pointer; display: grid; place-items: center; border-radius: 6px; flex-shrink: 0; }
.pp-edit:hover { color: var(--primary); background: var(--primary-pale); }
.pp-dial { margin-left: 2px; width: 26px; height: 26px; border: none; border-radius: 8px; background: var(--primary-pale); color: var(--primary); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: color 0.15s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), filter 0.15s cubic-bezier(0.16, 1, 0.3, 1); }
.pp-dial:hover { background: var(--primary); color: #fff; }

/* ---------- 6. 学生详情：请假卡两层折叠 ---------- */
.leave-card-top { cursor: pointer; }
.leave-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.leave-fold > * { overflow: hidden; }
.leave-card.open .leave-fold { grid-template-rows: 1fr; }
.leave-card-hint { font-size: 10.5px; color: var(--text-tertiary); margin-top: 4px; }
.leave-card-hint svg { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); vertical-align: -2px; }
.leave-card.open .leave-card-hint svg { transform: rotate(180deg); }
.leave-card.open .leave-card-hint { opacity: 0; height: 0; margin: 0; overflow: hidden; }

/* ---------- 7. 学生详情：巡班「生成待办」小图标 ---------- */
.timeline-content { position: relative; padding-right: 34px; }
.patrol-todo-mini {
  position: absolute; right: 0; top: 0;
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card-bg);
  color: var(--text-secondary); cursor: pointer;
  display: grid; place-items: center; transition: color 0.15s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), filter 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.patrol-todo-mini:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-pale); transform: translateY(-1px); }

/* ---------- 8. 作业列表：默认收 4 条，可展开 ---------- */
.hw-list-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.hw-list-fold > * { overflow: hidden; }
.hw-list-fold.open { grid-template-rows: 1fr; }
.hw-more-btn { font-size: 12px; color: var(--primary); background: none; border: none; cursor: pointer; padding: 6px 0; font-weight: 600; }
.hw-more-btn:hover { text-decoration: underline; }

/* ---------- 9. 请假看板 ---------- */
/* 2026-10-11 起请假看板样式统一由 leave_dashboard.css 管理（深林绿+青柠版），
   本文件不再对 .ldash-card-* 做背景/文字覆盖，避免两层打架。 */

/* ---------- 10. AI评语：教室折叠选人 ---------- */
.ca-room-head {
  display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;
  padding: 2px 0;
}
.ca-room-head .card-title { margin: 0; }
.ca-room-head:hover .card-title { color: var(--primary); }
.ca-room-cnt { font-size: 11.5px; color: var(--text-tertiary); font-weight: 400; }
.ca-room-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.ca-room-body > .ca-room-inner { overflow: hidden; }
.ca-room.open .ca-room-body { grid-template-rows: 1fr; }
.ca-room-hint { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }

/* ---------- 11. 徽标降噪：统一细边去彩底 ---------- */
.badge, .leave-card-status {
  border: none;
  font-weight: 600;
}

/* ---------- 12. 通用折叠手风琴头（请假日历/消课概览/评语存档/巡班历史） ---------- */
.wb-acc-head {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 0;
}
.wb-acc-head:hover .wb-acc-title { color: var(--primary); }
.wb-acc-title {
  font-size: 15px; font-weight: 600; color: var(--text);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  min-width: 0; flex: 1;
}
.wb-acc-sum {
  font-size: 12px; font-weight: 400; color: var(--text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.wb-acc-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--warning); flex: none; align-self: center;
}
.wb-acc .profile-card-icon { flex: none; }

/* ---------- 13. 消课概览卡修复：绿渐变看不清 → 中性卡可读 ---------- */
.monthly-card {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color);
  border-radius: 10px;
}
.monthly-card .month-label { color: var(--text-secondary) !important; font-size: 12px; }
.monthly-card .month-value { color: var(--text) !important; font-variant-numeric: tabular-nums; }
.monthly-card--good { background: var(--success-pale) !important; border-color: transparent; }
.monthly-card--good .month-value { color: var(--primary) !important; }

/* ---------- 14. 学生列表：零值徽标降噪（0 值信息淡显，有值保持醒目） ---------- */
.data-badge.badge-zero {
  opacity: 0.5;
  background: transparent !important;
}

/* ---------- 15. 请假卡头部：修「进行中+天数」徽标叠加 ---------- */
/* 根因：容器 nowrap + 详情提示 flex-basis:100% 把时间线压成 0 宽，日期溢出盖在徽标上 */
.leave-card-top { flex-wrap: wrap; row-gap: 6px; }
.leave-card-timeline { min-width: 0; }
/* 天数签改中性描边样式，与琥珀「进行中」签拉开层次，不再两块琥珀叠在一起 */
.leave-card-days {
  background: var(--card-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-color);
  font-variant-numeric: tabular-nums;
}
.leave-card--ended .leave-card-days { background: var(--bg-secondary) !important; }

/* ---------- 16. 家长对账文本：墨绿底+墨字 → 淡绿底+墨字（长文本可读） ---------- */
.parent-message {
  background: var(--primary-pale) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  border: 1px solid var(--border-color);
}

/* ---------- 17. 请假记录：每条独立折叠（去套娃），已结束不再淡化隐藏 ---------- */
/* 头部一行 = 起止日期 + 状态签 + 天数签 + 展开箭头；展开才见课时明细 */
.leave-card-range {
  display: flex; align-items: baseline; gap: 8px;
  flex: 1; min-width: 0; flex-wrap: wrap;
}
.leave-card-chevron {
  color: var(--text-tertiary); flex-shrink: 0; align-self: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.leave-card.open .leave-card-chevron { transform: rotate(180deg); }
/* 已结束：正常底色清晰可读，仅日期降一档灰 + 「已结束」灰签区分 */
.leave-card--ended { opacity: 1 !important; background: var(--card-bg) !important; box-shadow: var(--shadow-sm); }
.leave-card--ended .leave-card-date { color: var(--text-secondary); }
.leave-card--ended .leave-card-days { background: var(--bg-secondary) !important; color: var(--text-secondary) !important; }

/* ---------- 18. label 提示语降为独立小字行（不再挤在主文案里折行） ---------- */
.form-label-hint {
  display: block;
  font-size: 0.68rem; font-weight: 400; color: var(--text-tertiary);
  margin-top: 1px; line-height: 1.4;
}

/* ---------- 19. 手机端：多日请假登记紧凑化（日期+时间并排，表单长度减半） ---------- */
@media (max-width: 768px) {
  /* 全局规则把 form-row 拍成单列，多日请假表单被拖得过长——此处恢复并排 */
  .multi-leave-form .form-row > * { min-width: 0; }
  .multi-leave-form .form-row .form-group { flex: 1 1 0; margin-bottom: 0; }
  .multi-leave-form .form-row .form-group:first-child { flex: 1.35 1 0; }
  .multi-leave-form .form-group { margin-bottom: 10px; }
  .multi-leave-form .form-input,
  .multi-leave-form .form-select { padding: 9px 10px; font-size: 0.92rem; }
  .multi-leave-form .form-label { margin-bottom: 3px; }
  .multi-leave-form .card-subtitle { font-size: 0.8rem; margin: 0 0 10px; }
  .multi-leave-form hr { margin: 10px 0 !important; }
  .multi-leave-form .behavior-tag { padding: 6px 14px; font-size: 0.8rem; }
  .multi-leave-form .btn.mb-16 { margin-bottom: 8px !important; }
}

/* ---------- 20. 浅色模式对比度修复：彩签改「淡底+深字」 ---------- */
/* 根因1：style.css 把 --primary-light/--warning-light/--danger-light 当徽章底色用，
   换皮后这些是中饱和实色 → 中绿底压墨绿字仅 1.5~2.5:1，浅色下几乎不可读 */
/* 根因2：style.css 末尾一套 Apple 灰阶 :root 把 --text-tertiary 钉为 #aeaeb2 冷灰，
   在暖奶白底上仅 2.2:1 —— 已在顶部变量区用 !important 收回（#77706A），
   .text-tertiary/.seat-* 等所有 var(--text-tertiary) 使用处自动跟随，无需逐个覆盖 */

/* 数据徽章（作品/请假/任务）：淡底深字，浅暗两套主题自动切换 */
.data-badge.badge-artwork { background: var(--success-pale) !important; color: var(--badge-artwork-fg) !important; }
.data-badge.badge-leave   { background: var(--warning-pale) !important; color: var(--badge-leave-fg)  !important; }
.data-badge.badge-task    { background: var(--danger-pale)  !important; color: var(--badge-task-fg)   !important; }

/* 状态徽章（在校/离校/转班）：同模式，暗色自动得到「暗底亮字」 */
.status-in       { background: var(--success-pale) !important; color: var(--status-in-fg)       !important; }
.status-out      { background: var(--danger-pale)  !important; color: var(--status-out-fg)      !important; }
.status-transfer { background: var(--warning-pale) !important; color: var(--status-transfer-fg) !important; }

/* 飞书同步按钮：旧蓝 #3370ff 收敛到墨绿主色（座位页/点名导出/单条同步三处同款） */
.seat-action-btn--feishu,
.rollcall-btn--feishu,
.rc-action-btn--feishu {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.seat-action-btn--feishu:hover,
.rollcall-btn--feishu:hover,
.rc-action-btn--feishu:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary-light) !important;
  color: #fff !important;
}

/* ---------- 21. 浅色审计收尾：可用座位淡绿化 + 「在线」小字加深 ---------- */
/* 可用座位：中绿底(#4CA487)压灰字仅 1.6:1 → 淡绿底 + 深绿字（暗色自动切暗底亮字） */
.seat-available { background: var(--success-pale) !important; }
.seat-available:hover { background: var(--success-pale) !important; }
.seat-available .seat-id { color: var(--badge-artwork-fg) !important; font-weight: 700; }
/* 「在线」小胶囊：tertiary 压 bg-secondary 4.14:1 边缘 → 升一级用 secondary */
.seat-subtitle { color: var(--text-secondary) !important; }

/* ---------- 22. 暗色顺手清理（审计扫出的 3 项暗色遗留） ---------- */
/* 主按钮：暗色亮绿底(#5FBF9E)压白字仅 2.2:1 → 亮底改深墨字，hover 提亮一档 */
[data-theme="dark"] .btn-primary { color: #0E2B23 !important; }
[data-theme="dark"] .btn-primary:hover {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}
[data-theme="dark"] .btn-ghost:hover { color: #0E2B23 !important; }
/* 飞书按钮暗色变体：style.css 7586 带重要标记的蓝色规则（0,2,0）压过第 20 节浅色版
   （0,1,0），此处同权重 + 后加载覆盖，三处同款一并收敛墨绿 */
[data-theme="dark"] .seat-action-btn--feishu,
[data-theme="dark"] .rollcall-btn--feishu,
[data-theme="dark"] .rc-action-btn--feishu {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #0E2B23 !important; /* 暗色亮绿底压白字仅 2.2 → 深墨字（与主按钮同方案） */
}
[data-theme="dark"] .seat-action-btn--feishu:hover,
[data-theme="dark"] .rollcall-btn--feishu:hover,
[data-theme="dark"] .rc-action-btn--feishu:hover {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  color: #0E2B23 !important;
}
/* 占用座位（暗色底 #374151，见 style.css 7508）：辅助字中灰压深底 3.3~4.1 → 提亮 */
/* 覆盖所有占用座位含请假标记变体（leave-blue/orange/purple 均叠加 occupied） */
[data-theme="dark"] .seat-occupied .seat-realname,
[data-theme="dark"] .seat-occupied .seat-id { color: #C9CEDD !important; }

/* ---------- 23. 输入框与底色区分 + 多日请假表单左右对齐 ---------- */
/* 输入框底色：原先 var(--card-bg) 与白卡片融为一体 → 深一档的次级底色，
   浅色=奶白灰(#F1ECE2) 下沉感；暗色=亮一档(#26272c)，聚焦靠主色边框+光晕标识 */
/* C2 修复(2026-10-04)：边框由 --border-color(≈1.2:1) 改为 --input-border（浅色≈3:1 / 暗色≈2.9:1），
   让输入框在卡片背景上可明确辨识 */
.form-input, .form-select, .form-textarea {
  background: var(--bg-secondary) !important;
  border-color: var(--input-border) !important;
}
[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-select,
[data-theme="dark"] .form-textarea { border-color: var(--input-border) !important; }
/* 注：ui_fix.css 用 input[type=text] 等 (0,2,1) 特异性设过 border-color，这里用同级选择器+后加载覆盖 */
/* 暗色：卡片 #232429 与 bg-secondary(#26272c) 差距太微弱，单独提亮一档保证可区分。
   特异性写到 0,2,2（input.form-input）：ui_fix.css 有 0,2,1 的暗色 input 底色规则压 0,2,0 */
[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-select,
[data-theme="dark"] .form-textarea { background: #2B2D35 !important; }
/* 多日请假表单对齐：hint 小字原 display:block 占一行，把右列（带提示的）
   输入框顶下去，左右两列错位 → 绝对定位挂在 label 下方间隙里，不占布局流；
   label 统一留 19px 间距容纳 hint，四列输入框顶部齐平 */
.multi-leave-form .form-label { position: relative; margin-bottom: 19px; }
.multi-leave-form .form-label-hint {
  position: absolute;
  top: 100%; left: 0;
  margin: 2px 0 0;
  white-space: nowrap;
}

/* ---------- 24. 数据概览徽章列对齐（列表页 + 学生总表） ---------- */
/* 徽章宽度随内容变化 → 跨行列起点错位。按列位置固定 min-width 后起点一致；
   徽章内文字居中（justify-content），超长内容仍可撑开兜底。
   仅桌面端生效：手机端 style.css 1310 已有 50% 宽 2x2 堆叠布局 */
@media (min-width: 769px) {
  /* 学生列表（3 列：作品/待办/请假） */
  .student-table:not(.overview-table) td.data-cell .data-badge:nth-child(1) { min-width: 110px; justify-content: center; }
  .student-table:not(.overview-table) td.data-cell .data-badge:nth-child(2) { min-width: 56px; justify-content: center; }
  .student-table:not(.overview-table) td.data-cell .data-badge:nth-child(3) { min-width: 78px; justify-content: center; }
  /* 学生总表（4 列：请假/作品/任务/巡班） */
  .overview-table td.data-cell .data-badge:nth-child(1) { min-width: 78px; justify-content: center; }
  .overview-table td.data-cell .data-badge:nth-child(2) { min-width: 56px; justify-content: center; }
  .overview-table td.data-cell .data-badge:nth-child(3) { min-width: 56px; justify-content: center; }
  .overview-table td.data-cell .data-badge:nth-child(4) { min-width: 64px; justify-content: center; }
  /* 数字等宽，两位数/一位数切换不引起列微移 */
  .data-cell .data-badge { font-variant-numeric: tabular-nums; }
}

/* ---------- 25. AI评语生成：顶部常驻进度浮窗 ---------- */
/* 贴主顶栏下方（同 offline-banner 先例），居中胶囊不挡导航；路由切换不受影响（挂 body） */
.comment-float {
  position: fixed;
  top: var(--nav-height, 56px);
  left: 0; right: 0;
  z-index: 1100;
  display: flex; justify-content: center;
  padding: 10px 12px 0;
  pointer-events: none;
}
.comment-float-capsule {
  pointer-events: auto;
  width: 100%; max-width: 720px;
  display: flex; align-items: center; gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 9px 12px;
  animation: wbPageIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* 状态图标：running=旋转圆环，done=✓，cancelled=⏹ */
.cf-spin {
  width: 16px; height: 16px; flex: none;
  border: 2px solid var(--primary-alpha);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: cfRotate 0.9s linear infinite;
}
@keyframes cfRotate { to { transform: rotate(360deg); } }
.cf-icon-done, .cf-icon-cancel { width: 16px; height: 16px; flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.cf-icon-done { color: var(--primary); }
.cf-icon-cancel { color: var(--text-tertiary); }
.cf-texts { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: none; }
.cf-title { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.cf-sub { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }
/* 进度条 */
.cf-bar { flex: 1; min-width: 60px; height: 6px; border-radius: 3px; background: var(--bg-secondary); overflow: hidden; }
.cf-bar-fill { height: 100%; border-radius: 3px; background: var(--primary); transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.cf-bar-fill.is-cancelled { background: var(--text-tertiary); }
.cf-count { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-secondary); flex: none; }
/* 按钮 */
.cf-btn-cancel { padding: 5px 12px; font-size: 12px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-secondary); font-weight: 500; transition: color 0.15s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), filter 0.15s cubic-bezier(0.16, 1, 0.3, 1); flex: none; }
.cf-btn-cancel:hover { border-color: var(--danger); color: var(--danger); }
.cf-btn-download { padding: 5px 14px; font-size: 12px; border-radius: 8px; background: var(--primary); color: #fff; font-weight: 600; transition: color 0.15s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), filter 0.15s cubic-bezier(0.16, 1, 0.3, 1); flex: none; }
.cf-btn-download:hover { background: var(--primary-light); }
.cf-close { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 6px; color: var(--text-tertiary); font-size: 14px; transition: color 0.15s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), filter 0.15s cubic-bezier(0.16, 1, 0.3, 1); }
.cf-close:hover { background: var(--bg-secondary); color: var(--text); }
/* 手机端：副文字隐藏、计数并入进度右侧，胶囊收窄 */
@media (max-width: 768px) {
  .comment-float { padding: 8px 8px 0; }
  .comment-float-capsule { gap: 8px; padding: 8px 10px; }
  .cf-sub { display: none; }
  .cf-title { font-size: 12px; }
}

/* ============================================================
   26. 表单选项 chip：统一圆角边框（与输入框边框一致）
   适用：请假课时/事由/已上课时间等 behavior-tag 选项
   ============================================================ */
.behavior-tag {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--card-bg) !important;
  box-shadow: none !important;
}
.behavior-tag.selected {
  background: var(--primary-pale) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .behavior-tag { background: #2B2D35 !important; }
[data-theme="dark"] .behavior-tag.selected { background: var(--primary-pale) !important; }

/* ============================================================
   27. 工具页：学习档案素材日期框并排一行（手机端不换行、缩小）
   ============================================================ */
.arch-date-row { display: flex; gap: 8px; }
.arch-date-cell { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.arch-date-cell label { white-space: nowrap; flex: none; }
.arch-date-input { flex: 1; width: 100% !important; min-width: 0; font-size: 13px; padding: 7px 8px; }

/* ============================================================
   28. 请假日历弹窗：编辑/删除按钮组（列表并入日历后的操作入口）
   ============================================================ */
.lv-mactions { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 8px; }
.lv-mact-group { display: flex; gap: 8px; }
.lv-mact-group .btn { flex: 1; }

/* ============================================================
   29. 学生头像：列表/总表 28px 圆形缩略 + 详情页大头像上传角标
   ============================================================ */
.stu-ava {
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-pale); color: var(--primary);
  font-size: 13px; font-weight: 600; line-height: 1;
}
.stu-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ava-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ava-cell > span:not(.stu-ava) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="dark"] .stu-ava { background: #2B2D35; color: var(--primary); }
.profile-avatar { position: relative; }
.profile-avatar-clickable { cursor: pointer; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.profile-avatar-cam {
  position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
}

/* ============================================================
   30. 头像大图查看器：全屏遮罩 + 居中原图 + 底部提示
   ============================================================ */
.stu-ava-view { cursor: zoom-in; }
.profile-avatar-view { cursor: zoom-in; }
#ava-viewer-mask {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 10, 14, 0.82); opacity: 0; pointer-events: none;
  transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
#ava-viewer-mask.ava-viewer-show { opacity: 1; pointer-events: auto; }
.ava-viewer-body { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 92vw; }
.ava-viewer-img {
  max-width: 92vw; max-height: 78vh; border-radius: 12px; object-fit: contain;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
  transform: scale(0.96); transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
#ava-viewer-mask.ava-viewer-show .ava-viewer-img { transform: scale(1); }
.ava-viewer-cap { color: #fff; font-size: 15px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.ava-viewer-hint { color: rgba(255, 255, 255, 0.55); font-size: 12px; }




/* ============================================================
   性能微调（2026-09-28）：compositor 提示 + 点击响应优化
   仅作用于瞬时浮层与常见点击目标，无视觉/交互变化
   ============================================================ */
.modal-overlay { will-change: opacity; }
.toast { will-change: transform, opacity; }
.btn, button, .nav-link, .sub-nav-item, .tab, .classroom-tab,
.student-chip, .filter-chip, .seat, .nav-jump-btn, .bottom-nav a {
  touch-action: manipulation;
}