/* ============ 主题变量 ============ */
/* 每套皮肤除基础字段外，还提供一组「扩展语义色」，供课堂工具台、
   名单抽屉、提示条等模块共用，从而做到换肤全站生效。

   基础字段  --bg --text(--dim/--faint) --panel(--strong) --border(--strong)
             --accent(--soft) --row-active --tab-bg --tab-fg --exit-* --good(--soft)
   扩展字段  --accent-b      主强调色渐变副色（主按钮、进度）
             --accent-2 / -b 次强调色（停止 / 警示类按钮、彩带）
             --accent-3 / -b 第三强调色（金色锁定态、已点标签）
             --danger         警示红（计时归零）
             --on-accent      强调色底上的文字色
             --glow-1/2/3     对应强调色的辉光（box-shadow / border）
             --mod-bg         模块容器背景（课堂工具台、名单抽屉）
             --mod-soft(-2)   模块内浅底 / 强底（卡片、悬停）
             --mod-input      模块内输入框底色
             --mod-scrim      模块内压暗遮罩
             --mod-shadow     模块外阴影
*/

:root[data-theme="blue"] {
  --bg: radial-gradient(120% 120% at 18% 8%, #2456c9 0%, #16368f 42%, #0a1c52 100%);
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, .66);
  --text-faint: rgba(255, 255, 255, .38);
  --panel: rgba(255, 255, 255, .07);
  --panel-strong: rgba(255, 255, 255, .13);
  --border: rgba(255, 255, 255, .16);
  --border-strong: rgba(255, 255, 255, .30);
  --accent: #ffd97a;
  --accent-soft: rgba(255, 217, 122, .18);
  --row-active: rgba(255, 255, 255, .20);
  --tab-bg: #ffffff;
  --tab-fg: #16368f;
  --exit-bg: rgba(255, 120, 120, .16);
  --exit-border: rgba(255, 140, 140, .45);
  --exit-fg: #ffb3b3;
  --good: #7ee7b0;
  --good-soft: rgba(126, 231, 176, .16);
  --accent-b: #f0a93b;
  --accent-2: #ff6b9d;
  --accent-2-b: #ff8a3d;
  --accent-3: #9ad4ff;
  --accent-3-b: #4a8cff;
  --danger: #ff8a8a;
  --on-accent: #10214f;
  --glow-1: rgba(255, 217, 122, .34);
  --glow-2: rgba(255, 107, 157, .32);
  --glow-3: rgba(154, 212, 255, .30);
  --mod-bg:
    radial-gradient(900px 620px at 12% 6%, rgba(120, 170, 255, .18), transparent 60%),
    radial-gradient(820px 560px at 88% 94%, rgba(255, 217, 122, .10), transparent 60%),
    linear-gradient(140deg, #10204d, #16368f 55%, #0a1c52);
  --mod-soft: rgba(255, 255, 255, .07);
  --mod-soft-2: rgba(255, 255, 255, .13);
  --mod-input: rgba(0, 0, 0, .28);
  --mod-scrim: rgba(6, 14, 40, .55);
  --mod-shadow: rgba(3, 9, 30, .45);
}

/* 说明：原来还有「清新绿 green」「暖阳橙 amber」两套浅色皮肤，
   2026-10-22 按老师要求下线（图标列背景框怎么配都和深色面板割裂）。
   老配置里存的 theme=green/amber 由 app.js 的 safeTheme() 统一回落到 dark，
   这里的变量块、色卡按钮、壁纸版的图标框取色分支都已一并删除。 */

:root[data-theme="dark"] {
  --bg: radial-gradient(120% 120% at 18% 8%, #1b2431 0%, #131a24 45%, #0b0f15 100%);
  --text: #e9edf3;
  --text-dim: rgba(233, 237, 243, .62);
  --text-faint: rgba(233, 237, 243, .34);
  --panel: rgba(255, 255, 255, .05);
  --panel-strong: rgba(255, 255, 255, .10);
  --border: rgba(255, 255, 255, .12);
  --border-strong: rgba(255, 255, 255, .24);
  --accent: #7cc4ff;
  --accent-soft: rgba(124, 196, 255, .16);
  --row-active: rgba(124, 196, 255, .18);
  --tab-bg: #7cc4ff;
  --tab-fg: #06263f;
  --exit-bg: rgba(255, 120, 120, .14);
  --exit-border: rgba(255, 140, 140, .40);
  --exit-fg: #ff9d9d;
  --good: #6ee7a8;
  --good-soft: rgba(110, 231, 168, .14);
  --accent-b: #4a8cff;
  --accent-2: #ff7aa8;
  --accent-2-b: #ff8a3d;
  --accent-3: #ffd83d;
  --accent-3-b: #ffb347;
  --danger: #ff8a8a;
  --on-accent: #06263f;
  --glow-1: rgba(124, 196, 255, .32);
  --glow-2: rgba(255, 122, 168, .30);
  --glow-3: rgba(255, 216, 61, .30);
  --mod-bg:
    radial-gradient(900px 620px at 12% 6%, rgba(124, 196, 255, .10), transparent 60%),
    radial-gradient(820px 560px at 88% 94%, rgba(255, 122, 168, .07), transparent 60%),
    linear-gradient(140deg, #151d29, #10161f 55%, #0a0e14);
  --mod-soft: rgba(255, 255, 255, .06);
  --mod-soft-2: rgba(255, 255, 255, .12);
  --mod-input: rgba(0, 0, 0, .30);
  --mod-scrim: rgba(8, 12, 20, .55);
  --mod-shadow: rgba(0, 0, 0, .45);
}

/* 课堂青蓝：与「课堂工具台」模块原有配色一致 */
:root[data-theme="tools"] {
  --bg: radial-gradient(120% 120% at 18% 8%, #1b1340 0%, #161a38 45%, #0f1226 100%);
  --text: #f5f7ff;
  --text-dim: rgba(245, 247, 255, .64);
  --text-faint: rgba(245, 247, 255, .36);
  --panel: rgba(255, 255, 255, .07);
  --panel-strong: rgba(255, 255, 255, .13);
  --border: rgba(255, 255, 255, .12);
  --border-strong: rgba(255, 255, 255, .26);
  --accent: #3ee0ff;
  --accent-soft: rgba(62, 224, 255, .16);
  --row-active: rgba(62, 224, 255, .18);
  --tab-bg: #3ee0ff;
  --tab-fg: #04121f;
  --exit-bg: rgba(255, 120, 120, .14);
  --exit-border: rgba(255, 140, 140, .40);
  --exit-fg: #ff9d9d;
  --good: #5ce6a4;
  --good-soft: rgba(92, 230, 164, .16);
  --accent-b: #4a8cff;
  --accent-2: #ff5ea8;
  --accent-2-b: #ff8a3d;
  --accent-3: #ffd83d;
  --accent-3-b: #ff9d2e;
  --danger: #ff5b6e;
  --on-accent: #04121f;
  --glow-1: rgba(62, 224, 255, .35);
  --glow-2: rgba(255, 94, 168, .35);
  --glow-3: rgba(255, 216, 61, .35);
  --mod-bg:
    radial-gradient(900px 620px at 12% 6%, rgba(62, 224, 255, .16), transparent 60%),
    radial-gradient(820px 560px at 88% 94%, rgba(255, 94, 168, .16), transparent 60%),
    radial-gradient(700px 480px at 72% 12%, rgba(255, 216, 61, .08), transparent 60%),
    linear-gradient(140deg, #0f1226, #161a38 55%, #1b1340);
  --mod-soft: rgba(255, 255, 255, .06);
  --mod-soft-2: rgba(255, 255, 255, .12);
  --mod-input: rgba(0, 0, 0, .28);
  --mod-scrim: rgba(13, 16, 38, .55);
  --mod-shadow: rgba(0, 0, 0, .45);
}

/* 云端青绿：取自「班务大屏 · 云端版」启动器的配色（深底 + 青绿光晕）
   主色 #34c6b2（青绿）、辅色 #4aa8ff（天蓝）、成功色 #4ad991。
   底色刻意压得很深（#0a1016 → #070b10），让青绿光晕像屏幕发光一样透出来。 */
:root[data-theme="cloud"] {
  --bg: radial-gradient(120% 120% at 16% 6%, #1f7d7a 0%, #12414b 45%, #070d12 100%);
  --text: #e6f4f2;
  --text-dim: rgba(230, 244, 242, .64);
  --text-faint: rgba(230, 244, 242, .36);
  --panel: rgba(52, 198, 178, .07);
  --panel-strong: rgba(52, 198, 178, .15);
  --border: rgba(120, 232, 214, .16);
  --border-strong: rgba(120, 232, 214, .34);
  --accent: #34c6b2;
  --accent-soft: rgba(52, 198, 178, .18);
  --row-active: rgba(52, 198, 178, .20);
  --tab-bg: #34c6b2;
  --tab-fg: #04201c;
  --exit-bg: rgba(255, 120, 120, .14);
  --exit-border: rgba(255, 140, 140, .40);
  --exit-fg: #ff9d9d;
  --good: #4ad991;
  --good-soft: rgba(74, 217, 145, .16);
  --accent-b: #2aa79a;
  --accent-2: #ff7aa8;
  --accent-2-b: #ff8a3d;
  --accent-3: #4aa8ff;
  --accent-3-b: #7cc4ff;
  --danger: #ff8a8a;
  --on-accent: #04201c;
  --glow-1: rgba(52, 198, 178, .34);
  --glow-2: rgba(255, 122, 168, .30);
  --glow-3: rgba(74, 168, 255, .32);
  --mod-bg:
    radial-gradient(900px 620px at 12% 6%, rgba(52, 198, 178, .16), transparent 62%),
    radial-gradient(820px 560px at 88% 94%, rgba(74, 168, 255, .14), transparent 60%),
    linear-gradient(140deg, #0a1016, #0b141a 55%, #070b10);
  --mod-soft: rgba(255, 255, 255, .06);
  --mod-soft-2: rgba(255, 255, 255, .12);
  --mod-input: rgba(0, 0, 0, .30);
  --mod-scrim: rgba(6, 14, 18, .55);
  --mod-shadow: rgba(0, 0, 0, .45);
}

/* ============ 课堂工具台 / 名单抽屉的配色别名 ============
   定义在 :root 上，因此 .tools-view 内外（抽屉、提示条在 body 层）都能取到。
   全部指向当前皮肤的变量 —— 换皮肤时工具台与抽屉同步变化。 */
:root {
  --tw-text: var(--text);
  --tw-muted: var(--text-dim);
  --tw-line: var(--border);
  --tw-card: var(--mod-soft);
  --tw-soft: var(--mod-soft);
  --tw-soft-2: var(--mod-soft-2);
  --tw-accent: var(--accent);
  --tw-accent-b: var(--accent-b);
  --tw-accent2: var(--accent-2);
  --tw-accent2-b: var(--accent-2-b);
  --tw-accent3: var(--accent-3);
  --tw-accent3-b: var(--accent-3-b);
  --tw-good: var(--good);
  --tw-danger: var(--danger);
  --tw-on-accent: var(--on-accent);
}

/* ============ 基础 ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* hidden 属性一律隐藏。
   注意：作者样式（如 .main{display:flex}）会覆盖 UA 样式表里的 [hidden]{display:none}，
   所以这里必须用 !important 兜底，否则带 hidden 的视图仍会显示并与当前视图重叠。 */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", system-ui, sans-serif;
  background: var(--bg);
  background-attachment: fixed;
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: color .25s ease;
}

button { font-family: inherit; cursor: pointer; }

/* ============ 屏幕栅格 ============ */
.screen {
  height: 100vh;
  display: grid;
  /* 左：今日作业 · 中：主区 · 右：课表/考试 */
  grid-template-columns: clamp(230px, 19vw, 420px) minmax(0, 1fr) clamp(250px, 18.5vw, 420px);
  /* 顶栏行高三个视图统一（统一取课堂工具台的高度）；最后一行是常驻版权条 */
  grid-template-rows: clamp(46px, 3.5vw, 70px) 1fr clamp(62px, 5vw, 96px) auto;
  grid-template-areas:
    "header header header"
    "hw     main   side"
    "footer footer side"
    "cop    cop    cop";
  gap: clamp(10px, 1vw, 20px);
  padding: clamp(10px, 1vw, 20px);
}

/* 作业多 / 文字长：左栏向中间“借”宽度（占掉一部分主区，主区自动收窄） */
.screen.hw-expand {
  grid-template-columns: clamp(340px, 33vw, 760px) minmax(0, 1fr) clamp(250px, 18.5vw, 420px);
}

/* ============ 顶栏 ============ */
.header {
  grid-area: header;
  /* 三栏栅格：左右两列等宽，中间那组按钮因而恒定居中，
     且不随左侧按钮增减（设置 / 名单管理 / 返回）而左右漂移 */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(8px, 1vw, 20px);
  padding: 0 clamp(12px, 1.3vw, 28px);
  background: var(--panel);
  border: 0.5px solid var(--border);
  border-radius: clamp(12px, 1vw, 18px);
  backdrop-filter: blur(6px);
}

.header-left { justify-self: start; }
.header-center { justify-self: center; }
.header-right { justify-self: end; }

.header-left,
.header-right { display: flex; align-items: center; gap: clamp(6px, 0.7vw, 16px); }

/* 顶栏中部容器：两个 nav 互斥显示，占用同一位置 */
.header-center { display: flex; align-items: center; min-width: 0; }

.class-name { display: flex; align-items: baseline; gap: clamp(4px, 0.45vw, 10px); margin-right: clamp(2px, 0.3vw, 8px); }
.class-short {
  font-size: clamp(16px, 1.45vw, 30px);
  font-weight: 700;
  letter-spacing: .02em;
}
.class-text { font-size: clamp(12px, 1.02vw, 20px); color: var(--text-dim); }

.btn-icon {
  background: transparent;
  border: 0.5px solid var(--border-strong);
  color: var(--text);
  font-size: clamp(11px, 0.88vw, 17px);
  padding: clamp(4px, 0.4vw, 9px) clamp(10px, 0.9vw, 20px);
  border-radius: clamp(7px, 0.6vw, 11px);
  transition: background .18s ease;
  white-space: nowrap;
}
.btn-icon:hover { background: var(--panel-strong); }

/* ---- 功能入口按钮统一高亮（班务设置 / 考务设置 / 名单管理）----
   用「第三强调色」--accent-2 系列，与各皮肤主色明显不同，醒目、好找；
   颜色仍走主题变量，换皮肤时自动跟随。 */
.btn-icon.btn-accent {
  background: linear-gradient(135deg, var(--accent-2), var(--accent-2-b));
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 6px 18px var(--glow-2), inset 0 1px 0 rgba(255, 255, 255, .22);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease, filter .18s ease;
}
.btn-icon.btn-accent:hover {
  background: linear-gradient(135deg, var(--accent-2-b), var(--accent-2));
  box-shadow: 0 9px 24px var(--glow-2), inset 0 1px 0 rgba(255, 255, 255, .30);
  transform: translateY(-1px);
  filter: brightness(1.06);
}

/* 皮肤色卡：直接平铺在顶栏，无二级菜单 */
.theme-swatches {
  display: flex;
  align-items: center;
  gap: clamp(5px, 0.5vw, 10px);
  padding-left: clamp(8px, 0.8vw, 16px);
  border-left: 0.5px solid var(--border);
}

.swatch {
  width: clamp(16px, 1.25vw, 26px);
  height: clamp(16px, 1.25vw, 26px);
  padding: 0;
  border-radius: 50%;
  border: 0.5px solid var(--border-strong);
  transition: transform .15s ease, outline-color .15s ease;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.swatch:hover { transform: scale(1.14); }
.swatch.active { outline-color: var(--text); }
.swatch.s-blue  { background: linear-gradient(140deg, #2456c9, #0a1c52); }
.swatch.s-dark  { background: linear-gradient(140deg, #2b3846, #0b0f15); }
.swatch.s-tools { background: linear-gradient(140deg, #3ee0ff, #1b1340); }
.swatch.s-cloud { background: linear-gradient(140deg, #34c6b2, #0a1016); }

/* 功能切换：视图切换（班务/考务/工具台）与工具台内的三个功能共用同一套外观与位置 */
.header-nav { display: flex; align-items: center; gap: clamp(6px, 0.6vw, 14px); }

.tab,
.ttab {
  background: transparent;
  border: 0.5px solid var(--border-strong);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  font-size: clamp(11px, 0.92vw, 18px);
  line-height: 1.35;
  /* 统一最小宽度 + 居中：视图切换与工具台功能两组按钮的
     左边界 / 宽度 / 高度也随之完全一致 */
  min-width: clamp(96px, 7.9vw, 168px);
  text-align: center;
  padding: clamp(4px, 0.42vw, 10px) clamp(12px, 1.1vw, 26px);
  border-radius: 999px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.tab:hover,
.ttab:hover { background: var(--panel-strong); }
.tab.active,
.ttab.active {
  background: var(--tab-bg);
  color: var(--tab-fg);
  border-color: transparent;
  font-weight: 600;
}
.tab.soon { border-style: dashed; color: var(--text-dim); }

/* 时钟与退出 */
.clock { text-align: right; line-height: 1.15; }
.clock-time {
  font-size: clamp(16px, 1.55vw, 32px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.clock-date { font-size: clamp(10px, 0.78vw, 15px); color: var(--text-dim); }

.btn-exit {
  background: var(--exit-bg);
  border: 0.5px solid var(--exit-border);
  color: var(--exit-fg);
  font-size: clamp(11px, 0.88vw, 17px);
  padding: clamp(5px, 0.45vw, 10px) clamp(12px, 1vw, 22px);
  border-radius: clamp(7px, 0.6vw, 11px);
  white-space: nowrap;
  transition: filter .18s ease;
}
.btn-exit:hover { filter: brightness(1.12); }
/* 壁纸版浮起到桌面层时，这个按钮会变成「返回壁纸层」（壳子改文案并挂 data-mode）
   —— 换个正向配色，别再用退出那种警示色（老师 2026-10-25）。 */
.btn-exit[data-mode="back"] {
  background: var(--panel-strong);
  border-color: var(--border-strong);
  color: var(--accent);
  font-weight: 600;
}

/* ============ 中央主区 ============ */
.main {
  grid-area: main;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 0.5px solid var(--border);
  border-radius: clamp(14px, 1.1vw, 22px);
  overflow: hidden;
  padding: clamp(18px, 1.8vw, 40px);
}

/* 单列居中：各段用统一 gap 串联，字号同时受视口宽与高约束，绝不会顶出面板 */
.main-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 1000px;
  min-height: 0;
  gap: clamp(12px, 2.2vh, 44px);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 0.5vw, 10px);
  padding: clamp(4px, min(0.42vw, 0.8vh), 10px) clamp(12px, 1.1vw, 24px);
  border-radius: 999px;
  background: var(--good-soft);
  color: var(--good);
  border: 0.5px solid var(--good);
  font-size: clamp(12px, min(0.95vw, 1.75vh), 18px);
  white-space: nowrap;
}
.status-badge.is-break { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.status-badge.is-idle  { background: var(--panel-strong); color: var(--text-dim); border-color: var(--border-strong); }
.status-badge[hidden] { display: none; }

.dot {
  width: clamp(7px, 0.55vw, 12px);
  height: clamp(7px, 0.55vw, 12px);
  border-radius: 50%;
  background: currentColor;
  flex: none;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* 课程名 / 科目 + 节次时间 */
.course-block { display: flex; flex-direction: column; align-items: center; }
.course-block[hidden] { display: none; }

.course-name {
  font-size: clamp(24px, min(3.2vw, 5.6vh), 60px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: .06em;
}

.course-meta {
  margin-top: clamp(6px, 0.9vh, 16px);
  font-size: clamp(12px, min(1vw, 1.9vh), 20px);
  color: var(--text-dim);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.course-meta[hidden] { display: none; }

/* 倒计时 */
.cd-block { display: flex; flex-direction: column; align-items: center; }
.cd-block[hidden] { display: none; }

.cd-label {
  font-size: clamp(12px, min(1vw, 1.9vh), 20px);
  color: var(--text-dim);
  letter-spacing: .14em;
  margin-bottom: clamp(4px, 0.7vh, 12px);
}

.countdown {
  font-size: clamp(50px, min(10.2vw, 19vh), 184px);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* 提示语 */
.main-tip {
  position: relative;
  padding-top: clamp(12px, 1.8vh, 30px);
  font-size: clamp(13px, min(1.05vw, 2vh), 20px);
  color: var(--text-dim);
  letter-spacing: .05em;
}
.main-tip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(40px, 5vw, 120px);
  height: 1px;
  background: var(--border-strong);
}

/* ============ 考务设置：按天分组 ============ */
.exam-editor { display: flex; flex-direction: column; gap: 12px; }

.exam-day-group { background: #f7f9fc; border: 1px solid #e6ebf1; border-radius: 11px; padding: 10px 12px; }
.exam-day-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.exam-day-title { font-size: 12px; font-weight: 600; color: #2b3641; flex: none; }
.exam-day-head input[type="date"] { flex: 0 0 148px; }
.exam-day-week { font-size: 12px; color: #5a6672; flex: 1; }
.exam-day-count { font-size: 12px; color: #97a3af; flex: none; }

.exam-day-body { display: flex; flex-direction: column; gap: 8px; }
.exam-row {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #e6ebf1; border-radius: 10px; padding: 8px 10px;
}
.exam-row .exam-subject {
  flex: 1; min-width: 120px; font-family: inherit; font-size: 13px; color: #1c2530;
  background: #f7f9fc; border: 1px solid #dde3ea; border-radius: 8px;
  padding: 7px 8px; outline: none; cursor: pointer;
}
.exam-row .exam-subject:focus { border-color: #378add; background: #fff; }
.exam-row input[type="time"] { flex: 0 0 106px; }
.exam-sep { color: #b4b2a9; font-size: 12px; flex: none; }
.exam-dur { flex: 0 0 76px; font-size: 12px; color: #5a6672; text-align: center; }
.exam-dur.bad { color: #c0392b; }
.exam-hint { font-size: 12px; color: #c07a1a; margin-top: 8px; }
.btn-add.small { margin-top: 9px; padding: 6px 13px; font-size: 12px; }
.btn-del.small { padding: 5px 11px; font-size: 12px; }

/* 考务大屏右侧：考试安排按天分组 */
.exam-group { display: flex; flex-direction: column; gap: clamp(4px, 0.42vw, 10px); }
.exam-group + .exam-group { margin-top: clamp(6px, 0.7vw, 14px); }
.exam-group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 0 clamp(2px, 0.3vw, 6px);
  font-size: clamp(10px, 0.8vw, 15px); color: var(--text-dim);
}
.exam-group-head .eg-date { font-weight: 600; color: var(--text); }
.exam-group.is-today .eg-date { color: var(--accent); }
.exam-group-body { display: flex; flex-direction: column; gap: clamp(4px, 0.42vw, 10px); }

/* ============ 右侧课表 ============ */
.side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 0.5px solid var(--border);
  border-radius: clamp(14px, 1.1vw, 22px);
  padding: clamp(10px, 1vw, 22px);
  overflow: hidden;
}

.side-title { font-size: clamp(14px, 1.25vw, 26px); font-weight: 600; letter-spacing: .04em; }
.side-sub { font-size: clamp(10px, 0.78vw, 15px); color: var(--text-dim); margin: clamp(2px, 0.25vw, 6px) 0 clamp(8px, 0.8vw, 16px); }

.schedule {
  list-style: none;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.42vw, 10px);
  scrollbar-width: thin;
}
.schedule::-webkit-scrollbar { width: 6px; }
.schedule::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

/* ============ 课表下方的常驻扫码区 ============
   ★ 值日条只占左 + 中两列，右列（课表）向下延伸到底，扫码区就落在课表正下方。
   两格等宽：左边手机遥控大屏（真二维码），右边先占位，留给「手机 ⇄ 电脑 传文件」。 */
.qrbox {
  flex: 0 0 auto;
  margin-top: clamp(6px, 0.6vw, 12px);
  padding-top: clamp(6px, 0.6vw, 12px);
  border-top: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 0.5vw, 9px);
}
.qrbox[hidden] { display: none; }
/* 窄屏（1366 投影等）右列只有 220 出头，副标题让位给状态点 */
@media (max-width: 1500px) {
  .qrbox-sub { display: none; }
}
.qrbox-head { display: flex; align-items: center; gap: clamp(5px, 0.5vw, 9px); }
.qrbox-title { font-size: clamp(11px, 0.92vw, 17px); font-weight: 600; letter-spacing: .04em; }
.qrbox-sub { font-size: clamp(9px, 0.7vw, 13px); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qrbox-dot { display: flex; align-items: center; margin-left: auto; }
.qrbox-row { display: flex; gap: clamp(8px, 0.8vw, 16px); }
.qrtile {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3px, 0.3vw, 7px);
  text-decoration: none;
  color: inherit;
}
.qrframe {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4px, 0.4vw, 9px);
  border-radius: clamp(8px, 0.7vw, 14px);
  background: #fff;                 /* 二维码必须白底，扫得出来 */
  overflow: hidden;
  box-sizing: border-box;
  /* ★ 两格靠颜色分开：蓝=遥控，粉=传文件（和面板「手机传文件」同色） */
  border: 2px solid var(--c, rgba(255, 255, 255, .18));
  box-shadow: 0 8px 18px rgba(0, 0, 0, .4),
              0 0 18px color-mix(in srgb, var(--c, #000) 30%, transparent);
}
.qrframe img { display: block; width: 100%; height: 100%; object-fit: contain; }
.qrtile.c-remote { --c: #4c8dff; }
.qrtile.c-file { --c: #ff8fb0; }
.qrlabel {
  font-size: clamp(9px, 0.72vw, 14px);
  color: var(--c, var(--text-dim));
  white-space: nowrap;
  padding: 1px 9px;
  border-radius: 999px;
  font-weight: 600;
  background: color-mix(in srgb, var(--c, #888) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, #888) 42%, transparent);
}
.qrtile.is-soon { cursor: default; }
.qrtile.is-soon .qrframe {
  background: transparent;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--c, #888) 62%, transparent);
  box-shadow: none;
}
.qrsoon {
  font-style: normal;
  text-align: center;
  font-size: clamp(9px, 0.72vw, 13px);
  line-height: 1.35;
  color: color-mix(in srgb, var(--c, #888) 78%, #ffffff);
}
.qrtile.is-soon .qrlabel { opacity: .8; }
/* 扫码区里的「遥控已连接」小圆点（sync.js 把浮动角标搬进来） */
.qrbox-dot .lan-dot-inline {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  padding: 2px 8px !important;
  font-size: clamp(8.5px, 0.66vw, 12px) !important;
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============ 左侧今日作业（每科目一格） ============ */
.hw-side { grid-area: hw; }

.hw-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-auto-rows: min-content;
  gap: clamp(5px, 0.5vw, 12px);
  padding-right: 2px;
  scrollbar-width: thin;
}
.hw-grid::-webkit-scrollbar { width: 6px; }
.hw-grid::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

.hw-cell {
  background: var(--panel-strong);
  border: 0.5px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: clamp(8px, 0.7vw, 14px);
  padding: clamp(6px, 0.62vw, 14px) clamp(8px, 0.75vw, 16px);
  animation: hwIn .28s ease both;
}
@keyframes hwIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.hw-subject {
  font-size: clamp(11px, 0.98vw, 19px);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--accent);
  margin-bottom: clamp(2px, 0.22vw, 5px);
}
.hw-text {
  font-size: clamp(11px, 0.94vw, 18px);
  line-height: 1.38;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.hw-none {
  color: var(--text-dim);
  font-size: clamp(11px, 0.9vw, 17px);
  line-height: 1.4;
}

/* 新作业弹出条（大屏任意视图都会出现，8 秒后自动收起） */
.hw-pop {
  position: fixed;
  left: 50%;
  top: clamp(70px, 7vw, 120px);
  transform: translate(-50%, -12px);
  z-index: 900;
  max-width: min(760px, 82vw);
  padding: clamp(12px, 1.1vw, 22px) clamp(18px, 1.7vw, 34px);
  background: var(--panel-strong);
  border: 0.5px solid var(--border-strong);
  border-left: 4px solid var(--accent);
  border-radius: clamp(12px, 1vw, 20px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.hw-pop.show { opacity: 1; transform: translate(-50%, 0); }
.hw-pop-head { font-size: clamp(12px, 1vw, 18px); font-weight: 700; color: var(--accent); margin-bottom: clamp(4px, 0.4vw, 8px); }
.hw-pop-body { font-size: clamp(13px, 1.1vw, 21px); line-height: 1.42; color: var(--text); white-space: pre-wrap; word-break: break-word; }

.period {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 0.6vw, 14px);
  padding: clamp(6px, 0.62vw, 14px) clamp(8px, 0.85vw, 18px);
  border-radius: clamp(8px, 0.7vw, 13px);
  background: var(--panel-strong);
  border: 0.5px solid transparent;
  transition: background .2s ease, opacity .2s ease;
}
.period-label { font-size: clamp(10px, 0.76vw, 14px); color: var(--text-dim); }
.period-name { font-size: clamp(12px, 1.02vw, 20px); font-weight: 500; }
.period-time { font-size: clamp(10px, 0.76vw, 14px); color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.period.done { opacity: .42; }
.period.current { background: var(--row-active); border-color: var(--accent); }
.period.current .period-name { color: var(--accent); font-weight: 700; }
.period.next { border-color: var(--border-strong); }
.period-empty { font-size: clamp(11px, 0.9vw, 16px); color: var(--text-faint); text-align: center; padding: 20px 0; }

/* ============ 底部值日 ============ */
.footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.9vw, 20px);
  padding: 0 clamp(12px, 1.2vw, 26px);
  background: var(--panel);
  border: 0.5px solid var(--border);
  border-radius: clamp(12px, 1vw, 18px);
  overflow: hidden;
}

.footer-label { font-size: clamp(12px, 1vw, 20px); font-weight: 600; white-space: nowrap; letter-spacing: .04em; }

.duty-list { display: flex; align-items: center; gap: clamp(8px, 0.8vw, 18px); flex: 1; overflow-x: auto; padding: 2px 0; }
.duty-list::-webkit-scrollbar { height: 6px; }
.duty-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

/* ============ 快捷键提示（只有壁纸版显示：全局热键是壳子注册的） ============ */
.hkbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.9vw, 18px);
  margin-left: clamp(8px, 0.8vw, 16px);
  padding-left: clamp(10px, 1vw, 18px);
  border-left: 0.5px solid var(--border);
  font-size: clamp(10px, 0.74vw, 13.5px);
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
}
.hkbar[hidden] { display: none; }
.hkbar b {
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: .01em;
  padding: 1px 6px;
  margin-right: 3px;
  border-radius: 6px;
  background: var(--panel-strong);
  border: 0.5px solid var(--border);
}
/* 考务：右侧那一列没有值日条，竖着排在考试安排下面 */
.hkbar-col {
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(4px, 0.42vw, 8px);
  margin: clamp(8px, 0.8vw, 14px) 0 0;
  padding: clamp(8px, 0.8vw, 12px) 0 0;
  border-left: 0;
  border-top: 0.5px solid var(--border);
  font-size: clamp(9px, 0.7vw, 12.5px);
}
/* 工具台：压在底部右侧，别挡中间的按钮 */
.hkbar-tools {
  position: absolute;
  right: clamp(14px, 1.3vw, 28px);
  bottom: clamp(4px, 0.5vh, 10px);
  z-index: 3;
  margin: 0;
  padding: 0;
  border-left: 0;
  opacity: .85;
}

/* ============ 点名页 60 秒自动回班务大屏 ============ */
.autoback {
  position: absolute;
  top: clamp(8px, 0.8vw, 16px);
  right: clamp(14px, 1.3vw, 28px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px 9px;
  border-radius: 999px;
  background: rgba(6, 14, 20, .74);
  border: 1px solid color-mix(in srgb, var(--tw-accent) 55%, transparent);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  color: #d3e8ff;
  font-size: clamp(10px, 0.8vw, 14.5px);
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}
.autoback[hidden] { display: none; }
.autoback b { color: var(--tw-accent); font-size: 1.18em; font-variant-numeric: tabular-nums; }
.ab-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tw-accent);
  box-shadow: 0 0 8px var(--tw-accent);
}
.ab-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, .12);
}
.ab-bar i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--tw-accent), var(--tw-accent-b));
  transition: width .2s linear;
}

/* 只留姓名，不再有岗位与色点 */
.duty-item {
  font-size: clamp(12px, 0.92vw, 18px);
  font-weight: 600;
  background: var(--panel-strong);
  border: 0.5px solid var(--border);
  border-radius: 999px;
  padding: clamp(3px, 0.34vw, 8px) clamp(10px, 0.95vw, 22px);
  white-space: nowrap;
}
.duty-empty { font-size: clamp(11px, 0.9vw, 16px); color: var(--text-faint); }

/* 值日按周设置：周一～周日切换按钮（设置弹窗里）
   ★ 弹窗是固定浅色底，不要用 var(--text-dim)（那是给深色大屏用的浅色，白底上看不清） */
.duty-week-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.duty-day-tab {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 15px;
  border-radius: 999px;
  border: 0.5px solid #cfd6de;
  background: #fff;
  color: #4a5561;
  cursor: pointer;
  transition: all .18s ease;
}
.duty-day-tab:hover { color: #1c2530; border-color: #85b7eb; background: #f2f8ff; }
.duty-day-tab.active { background: #378add; border-color: #378add; color: #fff; font-weight: 600; }
.duty-day-tab.today:not(.active)::after { content: " ·今"; color: #2b73c4; font-size: .85em; }

/* 星期一行、名单一行，中间加一道分隔标题 —— 之前两行贴在一起，老师分不清 */
.duty-day-head {
  display: flex; align-items: baseline; gap: 10px;
  margin: 14px 0 10px; padding-bottom: 8px;
  border-bottom: 1px dashed #dbe3ec;
}
.duty-day-head b { font-size: 13px; color: #1c2530; }
.duty-day-head span { font-size: 12px; color: #7d8894; }

/* ============ 设置弹窗 ============ */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal-mask { position: absolute; inset: 0; background: rgba(8, 14, 28, .55); backdrop-filter: blur(3px); }

.modal-panel {
  position: relative;
  width: min(1180px, 96vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: #1c2530;
  /* ★ 设置弹窗是固定浅色底，主题里的 --text-dim/--text-faint 是给深色大屏配的浅色，
     直接套过来白底上几乎看不见（老师反馈"灰字看不清"）—— 在弹窗作用域内换成深灰 */
  --text-dim: #5a6672;
  --text-faint: #7d8894;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid #e8ecf1; }
.modal-title { font-size: 17px; font-weight: 600; }
.btn-close { background: transparent; border: 0.5px solid #cfd6de; color: #4a5560; border-radius: 8px; padding: 5px 14px; font-size: 13px; }
.btn-close:hover { background: #f1f4f8; }

.modal-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.set-block { margin-bottom: 22px; }
.set-block-title { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; font-size: 14px; font-weight: 600; color: #2b3641; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #eef2f6; }

/* 标题右侧的补充说明：固定深灰，不能用主题的 --text-dim（白底上看不清） */
.set-block-hint { font-size: 12px; font-weight: 400; color: #7d8894; text-align: right; }

.field-row { display: flex; flex-wrap: wrap; gap: 14px; }
.field-row label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #5a6672; flex: 1; min-width: 160px; }

/* ---- 提示语：固定文本 / 每日随机 ---- */
.tip-field { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.tip-field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tip-field-label { font-size: 12px; color: #5a6672; }
.tip-field > input[type="text"] { width: 100%; }
/* 随机开启时，手填文本只是「备用」，压暗表示当前不生效 */
.tip-field.is-random > input[type="text"] { color: #97a3af; background: #f1f4f8; }

.tip-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #4a5560; cursor: pointer; user-select: none; }
.tip-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.tip-switch-box { position: relative; flex: none; width: 38px; height: 21px; border-radius: 99px; background: #d8dfe7; transition: background .2s; }
.tip-switch-box::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28); transition: transform .2s;
}
.tip-switch input:checked + .tip-switch-box { background: #378add; }
.tip-switch input:checked + .tip-switch-box::after { transform: translateX(17px); }
.tip-switch input:focus-visible + .tip-switch-box { box-shadow: 0 0 0 3px rgba(55,138,221,.28); }

.tip-preview { font-size: 12px; line-height: 1.6; color: #97a3af; }
.tip-preview b { color: #2b3641; font-weight: 600; }

/* 语库清单（折叠） */
.tip-all { margin-top: 2px; }
.tip-all > summary { display: inline-block; font-size: 12px; color: #378add; cursor: pointer; list-style: none; }
.tip-all > summary::-webkit-details-marker { display: none; }
.tip-all > summary::before { content: "▸ "; }
.tip-all[open] > summary::before { content: "▾ "; }
.tip-all ul {
  margin: 8px 0 0; padding: 8px 10px; list-style: none;
  background: #f7f9fc; border: 1px solid #e6ebf1; border-radius: 10px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 8px;
}
.tip-all li { display: flex; }

/* 每条提示语都是一颗可点的按钮：点一下就把它换成「今天」的提示语 */
.tip-item {
  flex: 1; text-align: left;
  font-family: inherit; font-size: 12px; line-height: 1.45;
  color: #4a5560; background: transparent; border: 1px solid transparent;
  border-radius: 7px; padding: 5px 9px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tip-item:hover { background: #eaf2fd; border-color: #cfe1f8; color: #1d6fd0; }
.tip-item:active { background: #ddebfb; }
.tip-item:focus-visible { outline: 2px solid #378add; outline-offset: 1px; }
/* 当前正在显示的那一条 */
.tip-item.is-current { color: #1d6fd0; font-weight: 600; background: #e6f1fe; border-color: #a9cdf4; }
.tip-item.is-current::after { content: " ✓"; }

/* 「取消今日指定」按钮 */
.tip-restore {
  align-self: flex-start; font-family: inherit; font-size: 12px;
  color: #1d6fd0; background: #eef5fd; border: 1px solid #cfe1f8;
  border-radius: 7px; padding: 4px 10px; cursor: pointer;
}
.tip-restore:hover { background: #e2eefc; }
.tip-restore[hidden] { display: none; }

input[type="text"], input[type="time"], input[type="date"] {
  font-family: inherit;
  font-size: 13px;
  color: #1c2530;
  background: #f7f9fc;
  border: 1px solid #dde3ea;
  border-radius: 8px;
  padding: 7px 10px;
  outline: none;
}
input[type="text"]:focus, input[type="time"]:focus, input[type="date"]:focus { border-color: #378add; background: #fff; }

/* 课程名称库 */
.course-list { display: flex; flex-wrap: wrap; gap: 8px; border-radius: 10px; }
/* 拖动中：整块区域给一点提示，说明「可以放在这里」 */
.course-list.is-dragging {
  outline: 2px dashed #9dc4ef;
  outline-offset: 6px;
  background: #f1f7ff;
}
.course-chip {
  position: relative;
  display: flex; align-items: center; gap: 2px;
  background: #f7f9fc; border: 1px solid #e6ebf1; border-radius: 8px;
  padding: 3px 4px 3px 4px;
  /* transform 这一项是「让位滑动」动画的载体，不能省 */
  transition: background .16s ease, border-color .16s ease, opacity .16s ease,
              transform .3s cubic-bezier(.2, .85, .25, 1);
}
/* FLIP 用：写反向位移的那一帧必须关掉过渡，否则动画从错误的位置开始 */
.course-chip.no-anim { transition: none; }
/* 拖动手柄 */
.chip-grip {
  flex: none; user-select: none; cursor: grab;
  color: #c3ccd6; font-size: 13px; line-height: 1;
  padding: 2px 3px; letter-spacing: -1px; border-radius: 4px;
}
.chip-grip:hover { color: #6b7a89; background: #eef2f7; }
.chip-grip:active { cursor: grabbing; }
/* 正在被拖的那一张：淡化成虚线占位，它滑到哪儿、哪儿就是要腾出的空位 */
.course-chip.dragging {
  opacity: .45;
  background: #eef5fd; border-style: dashed; border-color: #9dc4ef;
}
.course-chip input {
  width: 76px; border: none; background: transparent; padding: 3px 0;
  font-family: inherit; font-size: 13px; color: #1c2530; outline: none;
}
.course-chip input:focus { background: #fff; box-shadow: 0 0 0 2px #dce9fa; border-radius: 4px; }
.chip-x {
  background: transparent; border: none; color: #97a3af; font-size: 16px;
  line-height: 1; padding: 2px 7px; border-radius: 6px;
}
.chip-x:hover { background: #fdeceb; color: #c0392b; }

/* 重名课程：红框 + 红字，配合下方提示行一起看 */
.course-chip.dup { background: #fdeceb; border-color: #e8a9a2; }
.course-chip.dup input { color: #c0392b; font-weight: 600; }
.course-chip.dup input:focus { box-shadow: 0 0 0 2px #f6cdc9; }
.course-chip.dup .chip-x { color: #c0392b; }
/* 保存被拦下 / 尝试添加重复课时，让对应 chip 闪一下 */
.course-chip.flash { animation: chipFlash 1.5s ease; }
@keyframes chipFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
  25%, 75% { box-shadow: 0 0 0 4px rgba(192, 57, 43, .3); }
}

/* 课程区提示行：输入重复 / 整库存在重名时显示 */
.course-hint {
  margin-top: 8px; padding: 7px 11px;
  font-size: 12px; line-height: 1.5;
  background: #fdeceb; border: 0.5px solid #f0c4c1; border-radius: 8px;
  color: #c0392b;
}
.course-hint[hidden] { display: none; }

.course-empty { font-size: 12px; color: #97a3af; padding: 6px 0; }

.course-add { display: flex; gap: 8px; margin-top: 10px; }
.course-add input { flex: 1; max-width: 320px; }
.course-add input.dup { border-color: #e8a9a2; background: #fdeceb; color: #c0392b; }
.course-add input.dup:focus { border-color: #e8a9a2; background: #fdeceb; }

/* 一周课表网格 */
.week-grid {
  display: grid;
  grid-template-columns: 194px repeat(7, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}
.wg-head { font-size: 12px; font-weight: 600; color: #5a6672; text-align: center; padding: 4px 0; }
.wg-head.is-today { color: #185fa5; }
.wg-head-first { text-align: left; padding-left: 6px; }

/* 第一列：节次名 + 起止时间 + 删除（与课表同一行，不再单独分区） */
.wg-period {
  display: flex; flex-direction: column; gap: 4px; justify-content: center;
  background: #f1f4f8; border-radius: 9px; padding: 6px 7px;
}
.wg-period-top { display: flex; align-items: center; gap: 2px; }
.wg-label {
  flex: 1; min-width: 0; font-family: inherit; font-size: 12px; font-weight: 600; color: #2b3641;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 2px 5px; outline: none;
}
.wg-label:hover { background: #e7ecf3; }
.wg-label:focus { background: #fff; border-color: #378add; }
.wg-times { display: flex; align-items: center; gap: 3px; }
.wg-times input[type="time"] {
  flex: 1; min-width: 0; font-family: inherit; font-size: 11px; color: #5a6672;
  background: #fff; border: 1px solid #e0e6ed; border-radius: 6px;
  padding: 2px 2px; outline: none;
}
.wg-times input[type="time"]:focus { border-color: #378add; }
.wg-times span { color: #b4b2a9; font-size: 11px; flex: none; }

.wg-del {
  flex: none; background: transparent; border: none; color: #b4b2a9;
  font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.wg-del:hover { background: #fdeceb; color: #c0392b; }

/* 课程下拉格 */
.wg-cell { min-width: 0; display: flex; align-items: center; }
.wg-cell select {
  width: 100%; font-family: inherit; font-size: 12px; color: #1c2530;
  background: #fff; border: 1px solid #dde3ea; border-radius: 8px;
  padding: 10px 5px; outline: none; cursor: pointer;
}
.wg-cell select:focus { border-color: #378add; }
.wg-cell select[data-empty="1"] { color: #97a3af; }
.wg-cell.is-today select { background: #f2f8ff; border-color: #b5d4f4; }

/* 值日生名单编辑：只填姓名 */
.duty-editor { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px;
  align-content: start; align-items: center; }
/* 星期切换行、分隔标题是整行元素，不能被当成一个「名字格子」塞进栅格 */
.duty-editor > .duty-week-tabs, .duty-editor > .duty-day-head { grid-column: 1 / -1; }
.duty-row {
  display: flex; align-items: center; gap: 2px;
  background: #f7f9fc; border: 1px solid #e6ebf1; border-radius: 8px;
  padding: 3px 4px 3px 8px;
}
.duty-row input[type="text"] {
  width: 100%; min-width: 0; border: none; background: transparent; padding: 3px 0;
  font-family: inherit; font-size: 13px; color: #1c2530; outline: none;
}
.duty-row input[type="text"]:focus { background: #fff; box-shadow: 0 0 0 2px #dce9fa; border-radius: 4px; }

.btn-del { background: #fdeceb; border: 0.5px solid #f6c9c6; color: #c0392b; border-radius: 8px; padding: 6px 12px; font-size: 12px; }
.btn-del:hover { background: #fbdedb; }

.btn-add { margin-top: 10px; background: #eef4fd; border: 0.5px dashed #85b7eb; color: #185fa5; border-radius: 9px; padding: 8px 16px; font-size: 13px; }

.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid #e8ecf1; background: #fafbfd; }
.btn-plain { background: #fff; border: 0.5px solid #cfd6de; color: #3c4753; border-radius: 9px; padding: 8px 18px; font-size: 13px; }
.btn-plain:hover { background: #f1f4f8; }
.btn-plain.danger { color: #c0392b; border-color: #f0c4c1; }
.btn-plain.danger:hover { background: #fdeceb; }
.btn-plain.xs { padding: 4px 12px; font-size: 12px; border-radius: 7px; flex: none; }
.btn-primary { background: #378add; border: none; color: #fff; border-radius: 9px; padding: 8px 22px; font-size: 13px; font-weight: 600; }
.btn-primary:hover { background: #2b73c4; }

/* ============ 提示条 ============ */
.toast {
  position: fixed;
  left: 50%;
  bottom: clamp(110px, 12vh, 200px);
  transform: translateX(-50%);
  background: rgba(20, 26, 36, .92);
  color: #fff;
  font-size: 14px;
  padding: 10px 22px;
  border-radius: 10px;
  z-index: 200;
  pointer-events: none;
}
.toast[hidden] { display: none; }

/* ============ 考务模式（右侧换成考试安排，隐藏今日作业与底部值日） ============ */
.screen.exam-mode {
  grid-template-columns: 1fr clamp(250px, 18.5vw, 420px);
  grid-template-rows: clamp(46px, 3.5vw, 70px) 1fr auto;
  grid-template-areas:
    "header header"
    "main   side"
    "cop    cop";
}
.screen.exam-mode .footer { display: none; }
.screen.exam-mode .hw-side { display: none; }

/* ============================================================
   课堂工具台（完整移植自「课堂工具台.html」）
   随机点名 / 课堂计时 / 随机分组 + 名单管理抽屉
   自成一套深色青蓝视觉，作为独立模块铺满主区
   ============================================================ */

/* 工具台模式：主区铺满整屏（顶栏 + 版权条，行高与其它视图一致） */
.screen.tools-mode {
  grid-template-columns: 1fr;
  grid-template-rows: clamp(46px, 3.5vw, 70px) 1fr auto;
  grid-template-areas: "header" "main" "cop";
}
.screen.tools-mode .hw-side,
.screen.tools-mode .side { display: none; }

.tools-view {
  /* 配色全部来自当前皮肤（--tw-* 见文件顶部别名表），换皮肤即换色 */
  grid-area: main;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.7vh, 12px);
  padding: clamp(8px, 0.7vw, 16px) clamp(14px, 1.3vw, 28px);
  border: 0.5px solid var(--border);
  border-radius: clamp(14px, 1.1vw, 22px);
  overflow: hidden;
  color: var(--tw-text);
  background: var(--mod-bg);
}

/* 背景漂浮粒子（限制在工具台容器内） */
.tools-view #bgfx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.tools-view #bgfx i {
  position: absolute; display: block; border-radius: 50%;
  background: var(--tw-accent); opacity: .35; filter: blur(.5px);
  animation: twFloat linear infinite;
}
@keyframes twFloat {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: .9; }
  90%  { opacity: .6; }
  100% { transform: translateY(-110vh) scale(1.3); opacity: 0; }
}

/* ---- 工具台内的三个功能按钮已移入顶栏中部（与视图切换共用同一位置与外观），
       面板内不再有头部，省下的高度全部给下面的展示区 ---- */

/* ---- 面板容器 ---- */
.tools-body { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; }
.tool-panel { display: none; flex-direction: column; flex: 1; min-height: 0; width: 100%; }
.tool-panel.active { display: flex; animation: twFade .25s ease; }
@keyframes twFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- 通用按钮 ---- */
.tools-view .btn,
.drawer .btn {
  cursor: pointer; border: none; border-radius: 14px;
  padding: clamp(9px, 1.15vh, 15px) clamp(16px, 1.4vw, 30px);
  font-family: inherit; font-weight: 800;
  font-size: clamp(14px, 1.1vw, 23px);
  color: var(--tw-on-accent); background: linear-gradient(135deg, var(--tw-accent), var(--tw-accent-b));
  transition: .15s; white-space: nowrap;
}
.tools-view .btn:hover, .drawer .btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.tools-view .btn:active, .drawer .btn:active { transform: translateY(0); }
.tools-view .btn.gold, .drawer .btn.gold { background: linear-gradient(135deg, var(--tw-accent), var(--tw-accent-b)); }
.tools-view .btn.green, .drawer .btn.green { background: var(--tw-good); }
.tools-view .btn.ghost, .drawer .btn.ghost { background: transparent; color: var(--tw-muted); border: 1px solid var(--tw-line); }
.tools-view .btn.ghost:hover, .drawer .btn.ghost:hover { color: var(--tw-text); background: var(--tw-soft-2); }
.tools-view .btn:disabled { opacity: .4; cursor: not-allowed; transform: none; filter: none; }
.tools-view .btn.small { font-size: clamp(12px, 0.95vw, 20px); padding: clamp(6px, 0.85vh, 11px) clamp(12px, 1vw, 22px); }

/* ---- 通用行：快捷设置 ---- */
.tools-view .quick {
  display: flex; gap: clamp(8px, 0.8vw, 16px); flex-wrap: wrap; align-items: center;
  justify-content: center; flex: none; padding: clamp(6px, 1vh, 16px) 0;
}
.tools-view .quick .label { color: var(--tw-muted); font-weight: 700; font-size: clamp(13px, 1vw, 21px); }
.tools-view .time-input {
  font-family: inherit; font-size: clamp(16px, 1.4vw, 30px);
  width: clamp(78px, 6vw, 140px); text-align: center;
  padding: clamp(6px, 0.8vh, 11px);
  border-radius: 12px; border: 1px solid var(--tw-line);
  background: var(--mod-input); color: var(--tw-text);
  font-weight: 800; outline: none;
}
.tools-view .time-input:focus { border-color: var(--tw-accent); }

/* 按钮行 */
.pick-actions {
  display: flex; gap: clamp(10px, 1.1vw, 22px); flex-wrap: wrap;
  align-items: center; justify-content: center; flex: none;
}

/* ===================== 一、随机点名 ===================== */
.tools-view .pickbar {
  display: flex; gap: clamp(8px, 0.8vw, 16px); align-items: center;
  justify-content: center; flex-wrap: wrap; flex: none;
}
.tools-view .chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--tw-card); border: 1px solid var(--tw-line);
  border-radius: 11px; padding: clamp(5px, 0.7vh, 11px) clamp(12px, 1vw, 22px);
  font-size: clamp(12px, 0.92vw, 19px); color: var(--tw-muted); white-space: nowrap;
}
.tools-view .chip b { color: var(--tw-accent); font-size: clamp(15px, 1.25vw, 26px); font-weight: 800; font-variant-numeric: tabular-nums; }
.tools-view .chip.norepeat b { color: var(--tw-accent3); }

.tools-view .pick-stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; min-height: 0; gap: clamp(10px, 1.8vh, 32px); padding: clamp(4px, 0.8vh, 14px) 0;
}

.tools-view .namebox {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1 1 auto; min-height: 0;
  width: 100%; max-width: min(94vw, 1440px);
  padding: clamp(14px, 2.8vh, 44px) clamp(20px, 3vw, 70px) clamp(16px, 3.2vh, 50px);
  border-radius: clamp(20px, 2vw, 36px);
  background: linear-gradient(160deg, var(--tw-soft-2), var(--tw-soft));
  border: 1px solid var(--tw-line);
  box-shadow: 0 30px 80px var(--mod-shadow), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: box-shadow .35s, border-color .35s;
}
.tools-view .namebox.rolling {
  border-color: var(--tw-accent);
  box-shadow: 0 30px 90px var(--glow-1), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.tools-view .namebox.locked {
  border-color: var(--tw-accent3);
  box-shadow: 0 34px 100px var(--glow-3), 0 0 0 2px var(--glow-3) inset;
  animation: twPop .5s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes twPop { 0% { transform: scale(.94); } 55% { transform: scale(1.035); } 100% { transform: scale(1); } }

.tools-view #name {
  /* 基准字号给得大一些，实际由 JS 按展示框大小自适应收敛（见 fitNameSize） */
  font-size: clamp(46px, min(14vw, 26vh), 260px);
  line-height: 1.08; font-weight: 900;
  letter-spacing: clamp(2px, 0.35vw, 10px); text-align: center;
  background: linear-gradient(180deg, var(--tw-text), var(--tw-accent-b) 58%, var(--tw-accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 26px var(--glow-1));
  transition: filter .3s; word-break: break-all;
}
.tools-view #name.rolling {
  background: linear-gradient(180deg, var(--tw-accent-b), var(--tw-accent));
  -webkit-background-clip: text; background-clip: text;
  filter: blur(.6px) drop-shadow(0 6px 26px var(--glow-1));
}
.tools-view #name.locked {
  background: linear-gradient(180deg, var(--tw-accent3), var(--tw-accent3-b));
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 8px 34px var(--glow-3));
  animation: twNamePop .55s cubic-bezier(.2, 1.5, .4, 1);
}
@keyframes twNamePop { 0% { transform: scale(.86); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }

.tools-view .status {
  margin-top: clamp(6px, 1vh, 14px);
  font-size: clamp(13px, 1vw, 20px);
  color: var(--tw-muted); letter-spacing: 3px; min-height: 1.3em;
}
.tools-view .status.locked { color: var(--tw-accent3); font-weight: 700; letter-spacing: 6px; }

.tools-view .bigbtn {
  cursor: pointer; font-family: inherit; border: none; border-radius: 18px;
  padding: clamp(12px, 1.8vh, 20px) clamp(26px, 2.6vw, 54px);
  font-size: clamp(16px, 1.35vw, 28px); font-weight: 800; letter-spacing: 4px;
  color: var(--tw-on-accent); background: linear-gradient(135deg, var(--tw-accent), var(--tw-accent-b));
  box-shadow: 0 12px 34px var(--glow-1); transition: .2s;
}
.tools-view .bigbtn:hover { transform: translateY(-2px); box-shadow: 0 18px 44px var(--glow-1); }
.tools-view .bigbtn:active { transform: translateY(1px) scale(.99); }
.tools-view .bigbtn.stop {
  background: linear-gradient(135deg, var(--tw-accent2), var(--tw-accent2-b));
  box-shadow: 0 12px 34px var(--glow-2);
  animation: twBreathe 1s ease-in-out infinite;
}
@keyframes twBreathe {
  0%, 100% { box-shadow: 0 12px 34px var(--glow-2); }
  50%      { box-shadow: 0 12px 46px var(--glow-2); }
}
.tools-view .bigbtn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.tools-view .bigbtn kbd {
  display: inline-block; margin-left: 10px;
  font-size: clamp(10px, 0.8vw, 14px); font-weight: 700;
  background: rgba(0, 0, 0, .16); color: var(--tw-on-accent);
  border-radius: 6px; padding: 2px 8px; letter-spacing: 0; vertical-align: middle;
}

.tools-view .pickhint {
  flex: none; text-align: center;
  font-size: clamp(11px, 0.85vw, 17px); color: var(--tw-muted);
  padding: clamp(2px, 0.5vh, 8px) 0 0; letter-spacing: 1px;
}
.tools-view .pickhint kbd {
  background: var(--tw-soft-2); border: 1px solid var(--tw-line);
  border-radius: 5px; padding: 1px 7px; font-size: .92em; margin: 0 2px;
}

/* 名单管理抽屉里的开关 */
.switch { position: relative; width: 48px; height: 26px; flex: none; cursor: pointer; display: inline-block; vertical-align: middle; }
.switch input { display: none; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--tw-soft-2); border: 1px solid var(--tw-line); transition: .22s; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--tw-text); transition: .22s; box-shadow: 0 2px 6px var(--mod-shadow); }
.switch input:checked + span { background: linear-gradient(135deg, var(--tw-accent), var(--tw-accent-b)); border-color: transparent; }
.switch input:checked + span::after { transform: translateX(22px); background: var(--tw-on-accent); }

/* ===================== 二、课堂计时 ===================== */
.tools-view .clock {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--tw-soft-2), var(--tw-soft));
  border: 1px solid var(--tw-line); border-radius: 22px;
  padding: clamp(24px, 4vh, 60px) clamp(14px, 2vw, 40px);
  margin-bottom: clamp(8px, 1.4vh, 22px);
  text-align: center;
}
.tools-view .clock .time {
  font-size: clamp(72px, min(15vw, 25vh), 280px);
  font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 6px;
  text-shadow: 0 8px 36px var(--mod-shadow); line-height: 1.05;
}
.tools-view .clock .time.warn { color: var(--tw-danger); animation: twPulse .6s ease infinite; }
@keyframes twPulse { 50% { opacity: .55; } }
.tools-view .clock .status {
  font-size: clamp(15px, 1.25vw, 26px); color: var(--tw-muted);
  margin-top: clamp(4px, 0.8vh, 10px); font-weight: 700; letter-spacing: 2px;
}

/* ===================== 三、随机分组 ===================== */
.tools-view .grp-controls {
  display: flex; gap: clamp(10px, 1vw, 20px); flex-wrap: wrap;
  align-items: center; justify-content: center; flex: none;
  padding: clamp(4px, 0.8vh, 14px) 0;
}
.tools-view .groups {
  position: relative; flex: 1; min-height: 0;
  display: grid; gap: clamp(8px, 0.9vw, 16px);
  margin-top: clamp(6px, 1vh, 16px); align-content: stretch;
  overflow: auto;
}
.tools-view .gcard {
  background: var(--tw-soft); border: 1px solid var(--tw-line);
  border-radius: 14px; padding: clamp(8px, 1vw, 18px) clamp(10px, 1.1vw, 20px);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  opacity: 0; transform: translateY(12px) scale(.97);
  animation: twCardIn .45s ease forwards;
}
@keyframes twCardIn { to { opacity: 1; transform: none; } }
.tools-view .gcard.flash { box-shadow: 0 0 0 2px var(--tw-accent), 0 0 26px var(--glow-1); border-color: var(--tw-accent); }
.tools-view .gcard h3 {
  margin: 0 0 8px; font-size: clamp(13px, 1.05vw, 22px); color: var(--tw-accent);
  display: flex; justify-content: space-between; align-items: center; flex: none;
}
.tools-view .gcard h3 span { font-size: .7em; color: var(--tw-muted); font-weight: 600; }
.tools-view .gcard ul { margin: 0; padding-left: 20px; overflow: auto; flex: 1; min-height: 0; }
.tools-view .gcard li {
  font-size: clamp(12px, 0.98vw, 21px); padding: 3px 0; line-height: 1.35;
  animation: twLiPop .4s cubic-bezier(.2, .8, .3, 1.3) both;
}
@keyframes twLiPop { from { opacity: 0; transform: translateY(-10px) scale(.85); } to { opacity: 1; transform: none; } }
.tools-view .empty {
  color: var(--tw-muted); text-align: center; padding: 30px;
  font-size: clamp(14px, 1.15vw, 24px); line-height: 1.75; place-self: center;
}
.tools-view .empty b { color: var(--tw-accent); }
.tools-view .shuffle {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: radial-gradient(circle at 50% 45%, var(--glow-1), transparent 60%), var(--mod-scrim);
  border-radius: 14px; animation: twFadeIn .25s ease;
}
@keyframes twFadeIn { from { opacity: 0; } to { opacity: 1; } }
.tools-view .shuffle .big {
  font-size: clamp(34px, min(6vw, 10vh), 86px); font-weight: 800;
  background: linear-gradient(135deg, var(--tw-accent), var(--tw-accent-b), var(--tw-accent3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: 2px; min-height: 1.2em;
}
.tools-view .shuffle .tip { color: var(--tw-muted); font-size: clamp(13px, 1vw, 20px); letter-spacing: 3px; }
.tools-view .shuffle .ring {
  width: 54px; height: 54px; border: 4px solid var(--glow-1);
  border-top-color: var(--tw-accent); border-radius: 50%; animation: twSpin .8s linear infinite;
}
@keyframes twSpin { to { transform: rotate(360deg); } }

/* 版权行：三个视图共用的底部条（放在 .screen 层，不再属于工具台） */
.cop {
  grid-area: cop;
  text-align: center;
  font-size: clamp(10px, 0.72vw, 14px);
  color: var(--tw-muted);
  letter-spacing: 1px; line-height: 1.4; white-space: nowrap;
}
.cop b { color: var(--tw-accent); font-weight: 700; }
.cop .cop-app { color: var(--tw-text); font-weight: 700; letter-spacing: 1px; }
.cop .cop-ver {
  color: var(--tw-accent); font-weight: 700; letter-spacing: 1px;
  margin-left: .5em; font-variant-numeric: tabular-nums; opacity: .9;
}

/* ===================== 通用：遮罩 / 抽屉 / 提示 / 彩带 ===================== */
#canvas { position: fixed; inset: 0; pointer-events: none; z-index: 150; }

.mask { position: fixed; inset: 0; background: var(--mod-scrim); z-index: 159; opacity: 0; pointer-events: none; transition: .3s; }
.mask.show { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 160;
  width: min(440px, 92vw);
  background: var(--mod-bg);
  border-left: 1px solid var(--tw-line);
  box-shadow: -24px 0 60px var(--mod-shadow);
  transform: translateX(105%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  display: flex; flex-direction: column;
  color: var(--tw-text);
  font-size: 16px;
}
.drawer.open { transform: translateX(0); }
.drawer .dh { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--tw-line); }
.drawer .dh h2 { font-size: 19px; letter-spacing: 2px; margin: 0; }
.drawer .db { padding: 16px 20px; flex: 1; display: flex; flex-direction: column; min-height: 0; gap: 14px; overflow-y: auto; }
.drawer textarea {
  flex: 1; min-height: 180px; resize: none;
  background: var(--mod-input); border: 1px solid var(--tw-line);
  border-radius: 12px; color: var(--tw-text); font-family: inherit;
  font-size: 16px; line-height: 1.9; padding: 14px; outline: none; letter-spacing: 1px;
}
.drawer textarea:focus { border-color: var(--tw-accent); }
.setrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--tw-soft); border: 1px solid var(--tw-line);
  border-radius: 12px; padding: 12px 14px; font-size: 16px; line-height: 1.4;
}
.hint { font-size: 13px; color: var(--tw-muted); line-height: 1.7; }
.hint code { background: var(--accent-soft); color: var(--tw-accent); padding: 1px 6px; border-radius: 5px; font-size: 13px; }
.hist { display: flex; flex-wrap: wrap; gap: 7px; overflow-y: auto; max-height: 130px; }
.hist span { font-size: 13px; background: var(--glow-3); color: var(--tw-accent3); border: 1px solid var(--tw-accent3); border-radius: 8px; padding: 4px 10px; }
.df { padding: 14px 20px 20px; border-top: 1px solid var(--tw-line); display: flex; gap: 10px; }
.df .btn { flex: 1; justify-content: center; padding: 12px; font-size: 16px; }
.dfrow { display: flex; gap: 10px; }
.drawer .btn { font-size: 16px; padding: 11px 18px; }

#twToast {
  position: fixed; left: 50%; top: clamp(14px, 2vh, 30px);
  /* 收起时必须整体移出屏幕之外：按自身高度的百分比位移在「矮提示条」上
     不足以盖住 top 偏移，会残留一条可见的边。改为「自身高度 + 余量」。 */
  transform: translate(-50%, calc(-100% - 40px));
  z-index: 170;
  background: linear-gradient(135deg, var(--tw-accent), var(--tw-accent-b)); color: var(--tw-on-accent);
  font-weight: 800; font-size: 15px; letter-spacing: 1px;
  padding: 11px 24px; border-radius: 99px;
  box-shadow: 0 12px 34px var(--glow-1);
  transition: transform .35s cubic-bezier(.2, 1.3, .4, 1); white-space: nowrap;
}
#twToast.show { transform: translate(-50%, 0); }

/* ============ 小屏兜底 ============ */
@media (max-width: 760px) {
  .screen { grid-template-columns: 1fr; grid-template-areas: "header" "hw" "main" "side" "footer" "cop"; grid-template-rows: auto auto auto auto auto auto; overflow-y: auto; }
  .screen.hw-expand { grid-template-columns: 1fr; }
  body { overflow: auto; }
  .header { grid-template-columns: 1fr; justify-items: center; padding: 10px; row-gap: 8px; }
  .header-left, .header-center, .header-right { justify-self: center; }
  .header-left, .header-right, .header-nav { flex-wrap: wrap; justify-content: center; }
  .screen.tools-mode { grid-template-areas: "header" "main" "cop"; grid-template-rows: auto auto auto; }
  .screen.exam-mode { grid-template-areas: "header" "main" "side" "cop"; grid-template-rows: auto auto auto auto; }
  .tools-view { overflow: visible; }
  .tools-view #bgfx { display: none; }
}