/* ==================================================================
 * 主题层（蓝梦音乐）
 *
 * 叠加在 app.css 之上，不改任何结构类名，只重定义视觉表现。
 * 两套主题：
 *   :root（默认）   B3 雾蓝    —— 浅雾蓝底 + 墨蓝按钮，日常最好用
 *   [data-theme="dark"]  B2 蓝梦·星夜 —— 午夜蓝 + 古铜金 + 星点
 *
 * 为什么单独一个文件而不是改写 app.css：
 *   结构样式（布局、定位、打印）原样保留，出问题好回退；
 *   换主题只影响这个文件。
 * ================================================================== */

/* ==================================================================
 * 1. 设计令牌 —— B3 雾蓝（默认）
 * ================================================================== */
:root {
  /* 品牌与强调 */
  --brand: #1e3a5f;
  --brand-dark: #162c49;
  --brand-light: rgba(30, 58, 95, .06);
  --accent: #1e3a5f;
  --accent-2: #3a5e8c;
  --on-accent: #ffffff;

  /* 底色与面板 */
  --bg: #f1f5fa;
  --bg-glow:
    radial-gradient(1000px 560px at 84% -14%, rgba(90, 150, 255, .18), transparent 60%),
    radial-gradient(840px 540px at -6% 100%, rgba(120, 190, 220, .16), transparent 62%);
  --panel: #ffffff;
  --panel-grad: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  --glass: rgba(255, 255, 255, .80);
  --input-bg: rgba(20, 30, 50, .035);

  /* 描边 */
  --border: rgba(28, 50, 84, .075);
  --border-strong: rgba(28, 50, 84, .15);

  /* 文字 */
  --text: #0f1b2b;
  --text-2: #56677e;
  --text-3: #92a0b4;

  /* 状态色 */
  --green: #0e7a46;      --green-bg: #e4f5ec;
  --amber: #a6641a;      --amber-bg: #fcf0d6;
  --red: #b33a3a;        --red-bg: #fbe3e3;
  --violet: #4a4fa8;     --violet-bg: #e9eafb;
  --gray-bg: rgba(20, 30, 50, .05);

  /* 侧栏 */
  --side-bg: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  --side-text: #56677e;
  --side-muted: #92a0b4;
  --side-active: #1e3a5f;
  --side-active-bg: rgba(30, 58, 95, .06);
  --side-sep: rgba(28, 50, 84, .08);

  /* 表格 */
  --row-hover: rgba(18, 36, 60, .022);
  --th-bg: rgba(18, 36, 60, .018);
  --th-text: #92a0b4;
  /* 课表：表头底色 / 整点网格线（这两个在深色下必须单独给值，
     否则会沿用 app.css 里写死的浅色） */
  --cal-head-bg: #f6f9fd;
  --cal-line: rgba(28, 50, 84, .10);

  /* 形状与光影 */
  --radius: 14px;
  --radius-sm: 10px;
  --inset: inset 0 1px 0 rgba(255, 255, 255, .92);
  --shadow: 0 1px 2px rgba(18, 36, 60, .05), 0 14px 34px -18px rgba(18, 36, 60, .30);
  --shadow-sm: 0 4px 14px -8px rgba(18, 36, 60, .24);
  --shadow-lg: 0 24px 60px -20px rgba(18, 36, 60, .38);
  --noise-opacity: .022;
  --noise-blend: multiply;

  --sidebar-w: 232px;

  /* 课目色（浅底） */
  --subj-0-bg: #f1e9fe; --subj-0-fg: #5b21b6;
  --subj-1-bg: #e2f0fe; --subj-1-fg: #0b5ea8;
  --subj-2-bg: #d9f5ee; --subj-2-fg: #0b6b56;
  --subj-3-bg: #fdeedb; --subj-3-fg: #95530b;
  --subj-4-bg: #fde5ee; --subj-4-fg: #a3164b;
  --subj-5-bg: #e9f6d8; --subj-5-fg: #4a7212;
  --subj-6-bg: #e6e9fe; --subj-6-fg: #3730a3;
  --subj-7-bg: #d8f4f8; --subj-7-fg: #0e6d7c;
  --subj-8-bg: #eceff4; --subj-8-fg: #3f4a5c;
  --subj-9-bg: #f2eefb; --subj-9-fg: #6b4a9e;
}

/* ==================================================================
 * 2. 设计令牌 —— B2 蓝梦·星夜（深色）
 * ================================================================== */
[data-theme="dark"] {
  --brand: #c9a36b;
  --brand-dark: #b08d57;
  --brand-light: rgba(201, 163, 107, .13);
  --accent: #c9a36b;
  --accent-2: #e7cfa1;
  --on-accent: #141007;

  --bg: #070c18;
  --bg-glow:
    radial-gradient(940px 560px at 74% -12%, rgba(201, 163, 107, .16), transparent 60%),
    radial-gradient(840px 560px at -2% 100%, rgba(58, 108, 200, .20), transparent 62%);
  --panel: #101a2e;
  --panel-grad: linear-gradient(180deg, #101a2e 0%, #0b1422 100%);
  --glass: rgba(8, 13, 25, .74);
  --input-bg: rgba(255, 255, 255, .04);

  --border: rgba(160, 190, 235, .11);
  --border-strong: rgba(160, 190, 235, .24);

  --text: #e9eef8;
  --text-2: #9faec6;
  --text-3: #61728c;

  --green: #6fe0a0;      --green-bg: rgba(111, 224, 160, .14);
  --amber: #f0c05a;      --amber-bg: rgba(240, 192, 90, .16);
  --red: #ff8a7a;        --red-bg: rgba(255, 138, 122, .16);
  --violet: #a99bff;     --violet-bg: rgba(169, 155, 255, .16);
  --gray-bg: rgba(255, 255, 255, .05);

  --side-bg: linear-gradient(180deg, #0a1224 0%, #060b16 100%);
  --side-text: #9faec6;
  --side-muted: #61728c;
  --side-active: #e7cfa1;
  --side-active-bg: rgba(201, 163, 107, .13);
  --side-sep: rgba(160, 190, 235, .10);

  --row-hover: rgba(150, 180, 235, .035);
  --th-bg: rgba(150, 180, 235, .02);
  --th-text: #61728c;
  --cal-head-bg: #0d1626;
  --cal-line: rgba(160, 190, 235, .12);

  --inset: inset 0 1px 0 rgba(190, 215, 255, .08);
  --shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 20px 44px -16px rgba(0, 0, 0, .8);
  --shadow-sm: 0 6px 18px -8px rgba(0, 0, 0, .72);
  --shadow-lg: 0 30px 70px -24px rgba(0, 0, 0, .9);
  --noise-opacity: .045;
  --noise-blend: overlay;

  /* 课目色（深底）：降低明度、提高饱和，保证在深色上可读 */
  --subj-0-bg: rgba(167, 139, 250, .18); --subj-0-fg: #c4b5fd;
  --subj-1-bg: rgba(96, 165, 250, .18);  --subj-1-fg: #93c5fd;
  --subj-2-bg: rgba(45, 212, 191, .16);  --subj-2-fg: #6ee7d7;
  --subj-3-bg: rgba(251, 191, 36, .16);  --subj-3-fg: #fcd34d;
  --subj-4-bg: rgba(244, 114, 182, .18); --subj-4-fg: #f9a8d4;
  --subj-5-bg: rgba(163, 230, 53, .14);  --subj-5-fg: #bef264;
  --subj-6-bg: rgba(129, 140, 248, .18); --subj-6-fg: #a5b4fc;
  --subj-7-bg: rgba(34, 211, 238, .15);  --subj-7-fg: #67e8f9;
  --subj-8-bg: rgba(148, 163, 184, .16); --subj-8-fg: #cbd5e1;
  --subj-9-bg: rgba(196, 181, 253, .15); --subj-9-fg: #ddd6fe;
}

/* ==================================================================
 * 3. 底色、环境光、噪点
 * ================================================================== */
html, body {
  background: var(--bg);
  color: var(--text);
}

/* 两个大范围径向渐变，避免死白/死黑 —— 高级感的一半来自这里 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--bg-glow);
  transition: background .3s ease;
}

/* 极轻噪点，去掉纯色的"塑料感" */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: var(--noise-opacity);
  mix-blend-mode: var(--noise-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

#app {
  position: relative;
  z-index: 1;
}

/* 主题切换时整体淡入，避免闪一下 */
body, .sidebar, .topbar, .card, .stat, .btn, .input, .select, .textarea, table.tbl th, table.tbl td {
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
}

/* ==================================================================
 * 4. 侧栏
 * ================================================================== */
.sidebar {
  width: var(--sidebar-w);
  background: var(--side-bg);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.sidebar .logo {
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--side-sep);
  position: relative;
}

/* 品牌标记：渐变方块 + 音符 */
.sidebar .logo::before {
  content: '♪';
  position: absolute;
  left: 16px;
  top: 16px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--on-accent);
  background: linear-gradient(150deg, var(--accent-2), var(--accent));
  box-shadow: 0 6px 18px -6px var(--accent), var(--inset);
}

.sidebar .logo .t1,
.sidebar .logo .t2,
.sidebar .logo .ver {
  padding-left: 46px;
}

.sidebar .logo .t1 {
  color: var(--text);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .3px;
}

.sidebar .logo .t2 {
  color: var(--text-3);
  font-size: 10px;
  letter-spacing: 1.1px;
  margin-top: 3px;
  text-transform: uppercase;
}

.sidebar .logo .ver {
  color: var(--text-3);
  font-size: 10px;
  opacity: .85;
}

.nav { padding: 12px 10px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  margin-bottom: 2px;
  border-radius: 10px;
  color: var(--side-text);
  font-size: 13.5px;
  position: relative;
  transition: background .16s ease, color .16s ease;
}

.nav-item:hover {
  background: var(--side-active-bg);
  color: var(--text);
}

.nav-item.active {
  background: linear-gradient(90deg, var(--side-active-bg), transparent);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--inset);
}

/* 选中项左侧的发光竖条：放在菜单项内部（left:3px）。
   放 left:-10px 会贴到浏览器最左边，被裁掉一半，看着像渲染错误。 */
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 12px var(--accent);
}

.nav-item .ico {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  flex: none;
  opacity: .75;
  font-size: 0;
}

.nav-item.active .ico { opacity: 1; color: var(--accent); }

.nav-item .ico svg { display: block; }

.nav-item .badge {
  margin-left: auto;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10.5px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 700;
}

.nav-item.active .badge { background: var(--accent); }

.nav-sep {
  height: 1px;
  background: var(--side-sep);
  margin: 10px 12px;
}

.sidebar .foot {
  border-top: 1px solid var(--side-sep);
  color: var(--text-3);
  font-size: 11px;
  padding: 12px 16px;
}

/* ==================================================================
 * 5. 顶栏（毛玻璃）
 * ================================================================== */
.topbar {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar h1 {
  font-family: 'Songti SC', 'STSong', 'SimSun', Georgia, serif;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.2px;
  color: var(--text);
}

[data-theme="dark"] .topbar h1 {
  font-family: -apple-system, 'Segoe UI Variable Display', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.topbar .sub { color: var(--text-3); font-size: 11.5px; }

.content { padding: 20px 24px 28px; }

/* ==================================================================
 * 6. 卡片
 * ================================================================== */
.card {
  background: var(--panel-grad);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow), var(--inset);
  overflow: hidden;
}

.card > .card-head {
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: 15px 20px;
}

.card > .card-head h2 {
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -.1px;
  color: var(--text);
}

.card > .card-body { padding: 18px 20px; }
.card > .card-body.tight { padding: 0; }

/* ==================================================================
 * 7. 按钮
 * ================================================================== */
.btn {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-sm), var(--inset);
  transition: transform .12s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.btn:hover {
  background: var(--panel);
  border-color: var(--border-strong);
  color: var(--text);
}

.btn:active { transform: translateY(1px); }

.btn.primary {
  background: linear-gradient(160deg, var(--accent-2), var(--accent));
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 600;
  box-shadow: 0 8px 20px -8px var(--accent), var(--inset);
}

.btn.primary:hover {
  background: linear-gradient(160deg, var(--accent-2), var(--accent));
  filter: brightness(1.06);
  color: var(--on-accent);
}

.btn.danger {
  background: var(--red-bg);
  border-color: transparent;
  color: var(--red);
}

.btn.ghost {
  background: transparent;
  box-shadow: none;
  border-color: var(--border);
}

.btn.ghost:hover { background: var(--row-hover); }
.btn.sm { padding: 6px 11px; font-size: 12px; border-radius: 9px; }

/* ==================================================================
 * 8. 表单控件
 * ================================================================== */
.input, .select, .textarea {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 9px 12px;
  box-shadow: var(--inset);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.input::placeholder, .textarea::placeholder { color: var(--text-3); }

.input:focus, .select:focus, .textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--inset), 0 0 0 3px var(--brand-light);
  outline: none;
  background: var(--panel);
}

.select {
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238c9ab0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}

.field > label {
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .4px;
}

.field .hint { color: var(--text-3); font-size: 11.5px; }

/* ==================================================================
 * 9. 工具栏
 * ================================================================== */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* ==================================================================
 * 10. 表格
 * ================================================================== */
.table-wrap {
  border-radius: 14px;
  overflow: hidden;
}

table.tbl { font-size: 13px; }

table.tbl th {
  background: var(--th-bg);
  color: var(--th-text);
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.05px;
  text-transform: uppercase;
  padding: 11px 16px;
  position: sticky;
  top: 0;
  z-index: 1;
}

table.tbl td {
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  color: var(--text);
}

table.tbl tbody tr:hover { background: var(--row-hover); }
table.tbl tbody tr:last-child td { border-bottom: none; }

table.tbl td.num, table.tbl th.num { font-variant-numeric: tabular-nums; }
table.tbl .muted { color: var(--text-3); }

table.tbl th.sortable:hover {
  background: var(--brand-light);
  color: var(--accent);
}

.th-arrow { color: var(--text-3); opacity: .7; }
.th-sort.sorted { color: var(--accent); font-weight: 700; }
.th-sort.sorted .th-arrow { color: var(--accent); opacity: 1; }

table.tbl tfoot td {
  background: var(--th-bg);
  border-top: 1px solid var(--border);
  color: var(--text-2);
}

/* ==================================================================
 * 11. 标签 / 状态
 * ================================================================== */
.tag {
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  box-shadow: var(--inset);
  border: 1px solid transparent;
}

.tag.blue   { background: var(--brand-light); color: var(--accent); }
.tag.green  { background: var(--green-bg); color: var(--green); }
.tag.amber  { background: var(--amber-bg); color: var(--amber); }
.tag.red    { background: var(--red-bg);   color: var(--red); }
.tag.violet { background: var(--violet-bg); color: var(--violet); }
.tag.gray   { background: var(--gray-bg);  color: var(--text-2); }

/* ==================================================================
 * 12. 统计卡
 * ================================================================== */
.statgrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-bottom: 16px;
}

.stat {
  background: var(--panel-grad);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px 15px;
  box-shadow: var(--shadow), var(--inset);
}

.stat .k {
  color: var(--text-3);
  font-size: 11.5px;
  letter-spacing: .6px;
  margin-bottom: 10px;
}

.stat .v {
  color: var(--text);
  font-size: 30px;
  font-weight: 680;
  line-height: 1;
  letter-spacing: -1.2px;
  font-variant-numeric: tabular-nums;
}

.stat .v small {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-3);
  margin-left: 5px;
  letter-spacing: 0;
}

.stat .d { color: var(--text-3); font-size: 11px; margin-top: 9px; }

.stat.accent { border-left: none; }
.stat.accent { position: relative; }
.stat.accent::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.stat.accent.green::before { background: var(--green); box-shadow: 0 0 10px var(--green); }
.stat.accent.amber::before { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.stat.accent.violet::before { background: var(--violet); box-shadow: 0 0 10px var(--violet); }

/* ==================================================================
 * 13. 弹窗 / 提示
 * ================================================================== */
.mask {
  background: rgba(10, 16, 28, .42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

[data-theme="dark"] .mask { background: rgba(0, 0, 0, .62); }

.modal {
  background: var(--panel-grad);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg), var(--inset);
}

.modal-head {
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
}

.modal-head h3 {
  font-size: 15.5px;
  font-weight: 650;
  color: var(--text);
}

.modal-head .x {
  color: var(--text-3);
  border-radius: 8px;
  padding: 4px 8px;
}
.modal-head .x:hover { background: var(--row-hover); color: var(--text); }

.modal-foot {
  border-top: 1px solid var(--border);
  padding: 14px 20px;
  background: transparent;
}

.toast {
  background: var(--panel-grad);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  box-shadow: var(--shadow-lg), var(--inset);
  font-size: 13px;
}

/* ==================================================================
 * 14. 提示条
 * ================================================================== */
.alert {
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--inset);
  font-size: 12.5px;
  padding: 12px 14px;
}

.alert.info { background: var(--brand-light); border-color: transparent; color: var(--text-2); }
.alert.warn { background: var(--amber-bg); border-color: transparent; color: var(--amber); }
.alert.err  { background: var(--red-bg);   border-color: transparent; color: var(--red); }
.alert.ok   { background: var(--green-bg); border-color: transparent; color: var(--green); }

/* ==================================================================
 * 15. 标签页 / 分段控制
 * ================================================================== */
.tabs {
  border-bottom: 1px solid var(--border);
  gap: 4px;
}

.tab {
  border-radius: 10px 10px 0 0;
  color: var(--text-3);
  font-size: 13px;
  padding: 9px 14px;
}

.tab:hover { color: var(--text); background: var(--row-hover); }

.tab.active {
  color: var(--accent);
  font-weight: 650;
  border-bottom: 2px solid var(--accent);
  background: transparent;
}

.view-switch {
  background: var(--input-bg);
  border-radius: 11px;
  padding: 3px;
  border: 1px solid var(--border);
  box-shadow: var(--inset);
}

.vs-btn {
  border-radius: 8px;
  color: var(--text-2);
  font-size: 12.5px;
  padding: 7px 13px;
}

.vs-btn.active {
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-sm), var(--inset);
}

/* ==================================================================
 * 16. 用户区
 * ================================================================== */
/* 顶栏用户标签：只有两个字（管理 / 校长 / 教务），没有头像方块、没有下拉箭头。
   看起来像一行文字，但它是可点的——点一下打开账号菜单。 */
.user-chip {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 5px 9px;
  box-shadow: none;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}

.user-chip:hover {
  color: var(--text);
  background: var(--row-hover);
  border-color: var(--border);
}

.user-chip:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--brand-light);
}

.u-avatar {
  background: linear-gradient(150deg, var(--accent-2), var(--accent));
  color: var(--on-accent);
  border-radius: 9px;
  font-weight: 700;
}

.u-name { color: inherit; font-size: inherit; font-weight: inherit; white-space: nowrap; }
.u-caret { color: var(--text-3); }

.user-menu {
  background: var(--panel-grad);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg), var(--inset);
  overflow: hidden;
}

.um-item { color: var(--text-2); font-size: 13px; padding: 10px 14px; }
.um-item:hover { background: var(--row-hover); color: var(--text); }
.um-item.danger { color: var(--red); }
.um-item.danger:hover { background: var(--red-bg); }
.um-sep { background: var(--border); }
.um-head { border-bottom: 1px solid var(--border); }
.um-foot { border-top: 1px solid var(--border); color: var(--text-3); }

/* ==================================================================
 * 17. 课表
 * ================================================================== */
.cal-wrap {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
}

/* app.css 里这几处是写死的浅色（#fff / #f8fafd / #eef1f6），
   深色主题必须逐个盖掉——只盖 .cal-head 不够，因为每个单元格自己也有背景。 */
.cal-head { background: var(--cal-head-bg); border-bottom: 1px solid var(--border); }
.cal-corner { background: var(--cal-head-bg); }
.cal-dayhead {
  background: var(--cal-head-bg);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  padding: 9px 0;
}

.cal-dayhead .dw { color: var(--text-3); font-size: 10.5px; font-weight: 500; }

.cal-dayhead.today {
  background: var(--brand-light);
  color: var(--accent);
}

.cal-dayhead.today .dw { color: var(--accent); opacity: .8; }

.cal-time {
  color: var(--text-3);
  background: var(--panel);
}

/* 单元格之间的网格线 */
.cal-corner, .cal-dayhead, .cal-time, .cal-cell {
  border-right-color: var(--border);
  border-bottom-color: var(--border);
}

.cal-cell { background-color: var(--panel); }
.cal-cell:hover { background-color: var(--row-hover); }
.cal-cell.today { background-color: var(--brand-light); }

/* 当前时刻那条线 */
.cal-cell.now { box-shadow: inset 0 -2px 0 var(--accent); }

.les {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(10, 16, 28, .10), var(--inset);
  /* 把面板色垫在底下，再把课目色叠上去。
     深色主题的课目色是半透明的（rgba .16），如果直接铺在带整点横线的日期格上，
     横线会透过卡片显示出来，看起来像"网格线穿过了课程文字"。
     垫一层不透明的面板色之后，视觉一样但卡片不再透明。 */
  background-color: var(--panel);
  background-image: linear-gradient(var(--les-bg, var(--brand-light)), var(--les-bg, var(--brand-light)));
}

/* 旷课卡片的斜纹是 app.css 用 background-image 画的，
   上面那条 background-image 会被它覆盖掉，这里补一份带底色的版本，
   否则旷课卡片仍会漏出网格线。 */
.les.st-absent {
  background-image:
    repeating-linear-gradient(45deg, rgba(220, 38, 38, .14) 0 4px, transparent 4px 8px),
    linear-gradient(var(--les-bg, var(--brand-light)), var(--les-bg, var(--brand-light)));
}

.les .lt { font-weight: 650; }
.les .ln { opacity: .9; }

/* 课目色改为走变量，两套主题各一份 */
.les.subj-0 { --les-bg: var(--subj-0-bg); --les-fg: var(--subj-0-fg); }
.les.subj-1 { --les-bg: var(--subj-1-bg); --les-fg: var(--subj-1-fg); }
.les.subj-2 { --les-bg: var(--subj-2-bg); --les-fg: var(--subj-2-fg); }
.les.subj-3 { --les-bg: var(--subj-3-bg); --les-fg: var(--subj-3-fg); }
.les.subj-4 { --les-bg: var(--subj-4-bg); --les-fg: var(--subj-4-fg); }
.les.subj-5 { --les-bg: var(--subj-5-bg); --les-fg: var(--subj-5-fg); }
.les.subj-6 { --les-bg: var(--subj-6-bg); --les-fg: var(--subj-6-fg); }
.les.subj-7 { --les-bg: var(--subj-7-bg); --les-fg: var(--subj-7-fg); }
.les.subj-8 { --les-bg: var(--subj-8-bg); --les-fg: var(--subj-8-fg); }
.les.subj-9 { --les-bg: var(--subj-9-bg); --les-fg: var(--subj-9-fg); }

/* 月视图 */
.m-cell { border-color: var(--border); }
.m-cell:hover { background: var(--row-hover); }
.m-cell.today { background: var(--brand-light); }
.m-cell.out { background: var(--th-bg); }
.m-day { color: var(--text-2); }
.m-dow { color: var(--text-3); }
.m-les { border-radius: 6px; box-shadow: var(--inset); }
.m-more { color: var(--text-3); }

/* ==================================================================
 * 18. 其他
 * ================================================================== */
.chip {
  background: var(--brand-light);
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: var(--inset);
}

.chip .x { color: var(--accent); opacity: .65; }

.divider { background: var(--border); }

.avatar {
  background: linear-gradient(150deg, var(--accent-2), var(--accent));
  color: var(--on-accent);
  border-radius: 12px;
  font-weight: 700;
  box-shadow: var(--shadow-sm), var(--inset);
}

.kv .k { color: var(--text-3); font-size: 11.5px; }
.kv .v { color: var(--text); }

.detail-head {
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}

.empty { color: var(--text-3); }
.empty .big { opacity: .55; }

.loading { color: var(--text-3); }
.spinner {
  border-color: var(--border);
  border-top-color: var(--accent);
}

/* 图表 */
.chart .gridline { stroke: var(--border); }
.chart text { fill: var(--text-3); }
.chart .axis { stroke: var(--border-strong); }
.chart .val { fill: var(--text); font-weight: 600; }
.hbar .track { background: var(--input-bg); }
.hbar .name { color: var(--text-2); }
.hbar .v { color: var(--text); font-variant-numeric: tabular-nums; }
.legend { color: var(--text-3); }

/* 滚动条：细一点，跟主题一致 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--text-3); background-clip: content-box; }

/* ==================================================================
 * 18. 登录页
 * ================================================================== */
.auth-wrap {
  background:
    radial-gradient(900px 620px at 78% -10%, rgba(201, 163, 107, .20), transparent 60%),
    radial-gradient(820px 560px at 0% 100%, rgba(58, 108, 200, .30), transparent 62%),
    linear-gradient(150deg, #0d1729 0%, #16233a 55%, #1e3a5f 100%);
}

[data-theme="dark"] .auth-wrap {
  background:
    radial-gradient(940px 620px at 76% -12%, rgba(201, 163, 107, .18), transparent 60%),
    radial-gradient(840px 560px at -2% 100%, rgba(58, 108, 200, .20), transparent 62%),
    linear-gradient(150deg, #060b16 0%, #0a1224 55%, #101a2e 100%);
}

.auth-card {
  background: var(--panel-grad);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 30px 80px -24px rgba(4, 10, 22, .70), var(--inset);
}

.auth-logo {
  background: linear-gradient(150deg, var(--accent-2), var(--accent));
  color: var(--on-accent);
  border-radius: 13px;
  box-shadow: 0 10px 26px -10px var(--accent), var(--inset);
  font-size: 21px;
}

.auth-title {
  color: var(--text);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.2px;
}

.auth-sub, .auth-tip, .auth-foot { color: var(--text-3); }
.auth-foot { border-top: 1px solid var(--border); }

/* ==================================================================
 * 19. 主题切换按钮
 * ================================================================== */.theme-toggle {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-2);
  box-shadow: var(--shadow-sm), var(--inset);
  cursor: pointer;
  transition: transform .18s ease, color .16s ease, border-color .16s ease;
}

.theme-toggle:hover { color: var(--accent); border-color: var(--border-strong); }
.theme-toggle:active { transform: rotate(-18deg) scale(.96); }
.theme-toggle svg { display: block; }

/* ==================================================================
 * 20. 打印：强制回浅色，避免深色主题打出黑纸
 * ================================================================== */
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  body::before, body::after { display: none !important; }
  .sidebar, .topbar, .theme-toggle { display: none !important; }
  .card, .stat, .modal {
    background: #fff !important;
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
  table.tbl th { background: #f5f5f5 !important; color: #333 !important; }
  table.tbl td { color: #000 !important; }
}