/* ==========================================================================
   寝室服务器站点 · 样式
   暗色单主题。不引任何 web font、不引图标库，图标全部内联 SVG。
   目标：首屏 gzip 后 < 60KB，所以这里刻意不写组件库式的冗余样式。
   ========================================================================== */

:root {
  /* ---- 表面与墨色 ---- */
  --surface:        #0f141c;  /* 图表校验时用的基准表面色 */
  --surface-raised: #161d28;
  --surface-hover:  #1d2633;
  --border:         #263141;
  --border-strong:  #34415466;

  --ink:        #e8edf5;  /* 主文字 */
  --ink-muted:  #9aa8bd;  /* 次要文字 */
  --ink-faint:  #64748b;  /* 轴标签、脚注 */

  /* ---- 分类系列色 ----
     这五个值不是挑好看选的，是用 OKLab ΔE + 三类色盲模拟逐对算出来的：
     四个系列色两两之间，正常视觉 ΔE >= 15、最差色盲情形 >= 8，
     对 #0f141c 表面的对比度全部 >= 7。改动前请重跑校验。 */
  --series-cpu:    #38bdf8;
  --series-mem:    #c084fc;
  --series-rx:     #fcd34d;
  --series-tx:     #f9a8d4;
  --series-power:  #fb923c;

  /* ---- 状态色（保留）----
     只用于状态，绝不拿来当第五个系列色。且永远和图标+文字一起出现，
     不靠颜色单独表意。橙色被刻意排除：它和 critical 红在色盲下分不开。 */
  --status-good:     #4ade80;
  --status-critical: #f87171;
  --status-good-bg:     #4ade801a;
  --status-critical-bg: #f871711a;

  --radius: 10px;
  --radius-lg: 14px;
  --gap: 16px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  /* 数字用等宽，否则秒表跳动时宽度会抖 */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; }

/* ---------- 布局 ---------- */

.shell { max-width: 1280px; margin: 0 auto; padding: 0 20px 48px; }

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  padding: 12px 20px;
  background: #0f141cf2;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.topbar-inner {
  max-width: 1280px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; gap: 20px;
}
.brand { font-weight: 650; letter-spacing: .2px; white-space: nowrap; }
.brand-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--status-good); margin-right: 8px; vertical-align: middle;
}
.brand-dot.off { background: var(--ink-faint); }

.nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  padding: 6px 12px; border-radius: 8px; color: var(--ink-muted);
  font-size: 13.5px; white-space: nowrap; transition: background .15s, color .15s;
}
.nav a:hover { background: var(--surface-hover); color: var(--ink); }
.nav a.active { background: var(--surface-raised); color: var(--ink); font-weight: 550; }

/* ---------- 卡片 ---------- */

.card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.card-title { font-size: 13px; font-weight: 600; color: var(--ink-muted); letter-spacing: .3px; }
.card-note { font-size: 12px; color: var(--ink-faint); }

/* ---------- 状态卡（大数字）----------
   这是"不是图表"的那一类：单个数值，用 hero number 呈现比画图更好读。 */

.tiles {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: var(--gap);
}
.tile {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px 12px;
  position: relative; overflow: hidden;
}
.tile-label {
  font-size: 12px; color: var(--ink-muted); font-weight: 550;
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
/* 系列色小方块：颜色只作为身份标记出现在文字旁边，文字本身不上色 */
.swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.tile-value {
  font-family: var(--font-mono);
  font-size: 30px; font-weight: 600; line-height: 1.1;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
.tile-unit { font-size: 15px; color: var(--ink-muted); margin-left: 2px; font-weight: 500; }
.tile-sub { font-size: 12px; color: var(--ink-faint); margin-top: 4px; min-height: 18px; }

/* 迷你趋势线，贴在卡片底部 */
.tile-spark { display: block; width: 100%; height: 28px; margin-top: 8px; }

/* ---------- 状态徽标 ----------
   永远是 图标 + 文字 + 颜色 三者齐全，不靠颜色单独表意 */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
}
.badge svg { width: 12px; height: 12px; flex: none; }
.badge.good     { color: var(--status-good);     background: var(--status-good-bg); }
.badge.critical { color: var(--status-critical); background: var(--status-critical-bg); }
.badge.neutral  { color: var(--ink-muted);       background: #94a3b81a; }

/* ---------- 图表 ---------- */

.charts { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.chart-wrap { position: relative; }
.chart-canvas { display: block; width: 100%; height: 150px; cursor: crosshair; }

/* 图例：两个及以上系列时必须有 */
.legend { display: flex; gap: 14px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-muted); }

/* 悬停提示 */
.tooltip {
  position: absolute; pointer-events: none; z-index: 10;
  background: #0b0f16f2; border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 7px 10px;
  font-size: 12px; line-height: 1.5; white-space: nowrap;
  box-shadow: 0 6px 20px #00000059;
  opacity: 0; transition: opacity .12s;
}
.tooltip.on { opacity: 1; }
.tooltip-time { color: var(--ink-faint); font-size: 11px; margin-bottom: 3px; }
.tooltip-row { display: flex; align-items: center; gap: 6px; }
.tooltip-val { font-family: var(--font-mono); margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }

/* ---------- 条形（每核占用 / 内存构成）---------- */

.bars { display: flex; flex-direction: column; gap: 7px; }
.bar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.bar-name { color: var(--ink-faint); width: 44px; flex: none; font-family: var(--font-mono); }
.bar-track { flex: 1; height: 7px; background: #26314180; border-radius: 4px; overflow: hidden; }
/* 必须 display:block —— 这是个 <span>，行内元素上 width/height 百分比不生效，
   不加这行条形填充完全不显示，只剩一条灰轨道。 */
.bar-fill { display: block; height: 100%; border-radius: 4px; transition: width .3s ease-out; }
/* 宽度要放得下 "840 MB" 这种带单位的值，窄了会折行 */
.bar-val { min-width: 54px; text-align: right; white-space: nowrap; font-family: var(--font-mono); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ---------- 表格 ---------- */

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  text-align: left; font-weight: 550; font-size: 11.5px;
  color: var(--ink-faint); padding: 6px 10px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table td { padding: 7px 10px; border-bottom: 1px solid #1d2633; }
.table tr:last-child td { border-bottom: none; }
.table .num { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.table .dim { color: var(--ink-faint); }
.table .ellipsis { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 表单 ---------- */

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; color: var(--ink-muted); margin-bottom: 5px; }
.input {
  width: 100%; padding: 9px 12px;
  background: #0b0f16; color: var(--ink);
  border: 1px solid var(--border); border-radius: 8px;
  outline: none; transition: border-color .15s;
}
.input:focus { border-color: var(--series-cpu); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: 8px;
  background: var(--surface-hover); border: 1px solid var(--border);
  font-size: 13.5px; font-weight: 550;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: #26314f; }
.btn-primary { background: var(--series-cpu); color: #06131c; border-color: transparent; }
.btn-primary:hover { background: #7dd3fc; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- 模态框 ---------- */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: #06090ecc; backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 20px;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--surface-raised); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); padding: 20px 22px;
  width: 100%; max-width: 480px; max-height: 84vh; overflow: auto;
  box-shadow: 0 20px 60px #00000080;
}
.modal-title { font-size: 15px; font-weight: 650; margin-bottom: 14px; }
.modal-body { font-size: 13px; line-height: 1.6; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* ---------- 拖放区 ---------- */

.dropzone { border-radius: var(--radius); transition: background .15s, outline-color .15s;
  outline: 2px dashed transparent; outline-offset: 4px; }
.dropzone.over { background: #38bdf814; outline-color: var(--series-cpu); }

/* ---------- 提示条 ---------- */

.notice {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 14px; border-radius: var(--radius);
  font-size: 13px; margin-bottom: var(--gap);
}
.notice svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.notice.warn { background: var(--status-critical-bg); color: #fca5a5; border: 1px solid #f8717133; }
.notice.info { background: #38bdf814;  color: #bae6fd; border: 1px solid #38bdf833; }

/* ---------- 登录页 ---------- */

.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.auth-card { width: 100%; max-width: 360px; }
.auth-title { font-size: 19px; font-weight: 650; margin-bottom: 4px; }
.auth-sub { font-size: 13px; color: var(--ink-muted); margin-bottom: 22px; }
.auth-err { font-size: 12.5px; color: var(--status-critical); min-height: 19px; margin-bottom: 6px; }

/* ---------- 生活面板栅格 ---------- */

.grid {
  display: grid;
  gap: var(--gap);
  /* 桌面 4 列。卡片用 grid-column: span N 占位，所以列数必须固定，
     不能用 auto-fit —— 那样 span 2 在窄屏上会溢出。 */
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(150px, auto);
}

.dcard {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex; flex-direction: column;
  min-width: 0;   /* 不加这条，内容长的卡片会把栅格撑破 */
  overflow: hidden;
}
.dcard-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px;
}
.dcard-title {
  font-size: 12px; font-weight: 600; color: var(--ink-muted);
  letter-spacing: .3px; white-space: nowrap;
}
.dcard-body { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
.dcard-body::-webkit-scrollbar { width: 5px; }
.dcard-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* 卡片操作按钮只在编辑模式出现 */
.dcard-actions { display: none; gap: 2px; }
body.editing .dcard-actions { display: flex; }
.dcard-btn {
  width: 22px; height: 22px; border-radius: 6px;
  font-size: 11px; line-height: 1; color: var(--ink-muted);
  background: var(--surface-hover); border: 1px solid var(--border);
}
.dcard-btn:hover { color: var(--ink); background: #26314f; }
.dcard-btn.danger:hover { color: var(--status-critical); background: var(--status-critical-bg); }

body.editing .dcard { cursor: grab; border-color: var(--border-strong); }
body.editing .dcard:active { cursor: grabbing; }
.dcard.dragging { opacity: .4; outline: 2px dashed var(--series-cpu); }

/* ---------- 添加卡片抽屉 ---------- */

.drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: #0b0f16f5;
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  max-height: 46vh; overflow: auto;
  transform: translateY(100%);
  transition: transform .22s ease-out;
}
.drawer.open { transform: translateY(0); }

/* 抽屉是 fixed 定位，不占文档流：不补这块空间的话，滚到底时最后一行卡片
   正好落在抽屉底下，够不着也看不见（它是压上去的，不是把内容顶开）。
   高度由 dashboard.js 实测后写进 --drawer-h；46vh 只是还没测出来那一刻的兜底，
   取的正是上面的 max-height。额外 +24px 是给最后一行和抽屉之间留点空隙。 */
body.editing .shell { padding-bottom: calc(var(--drawer-h, 46vh) + 24px); }

.drawer-inner { max-width: 1280px; margin: 0 auto; padding: 16px 20px 22px; }
.drawer-group { margin-bottom: 18px; }
.drawer-group-title {
  font-size: 11.5px; font-weight: 600; color: var(--ink-faint);
  letter-spacing: .4px; margin-bottom: 8px;
}
.drawer-items { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.drawer-item {
  text-align: left; padding: 9px 12px; border-radius: var(--radius);
  background: var(--surface-raised); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
  transition: background .15s, border-color .15s;
}
.drawer-item:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--series-cpu); }
.drawer-item:disabled { opacity: .4; cursor: default; }
.drawer-item-name { font-size: 13px; font-weight: 550; }
/* 未添加的卡片显示 ＋，让"点击即可添加"这件事不需要猜 */
.drawer-plus { color: var(--series-cpu); margin-right: 4px; font-weight: 600; }
.drawer-item:hover:not(:disabled) .drawer-plus { color: var(--ink); }
.drawer-item-desc { font-size: 11.5px; color: var(--ink-faint); line-height: 1.45; }

/* ---------- 卡片内常用排版 ---------- */

.big-time {
  font-family: var(--font-mono); font-size: 38px; font-weight: 600;
  letter-spacing: -1px; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 3px 0; }
.kv-k { color: var(--ink-faint); }
.kv-v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* 卡片里「可滚动的详情区」。
 *
 * 高度跟着格高走：--card-h 由 dashboard.js 写在卡片元素上，拉大卡片时一起变。
 *
 * 为什么不干脆把 max-height 去掉、让内容自然撑开：面板栅格的行是
 * minmax(150px, auto)，内容会把行**撑高**而不是溢出 —— 撑高还会连带把
 * 同一行的其它卡片一起拉长。给一个确定的上限，行高才是稳定的，
 * 多出来的条目靠滚动看。（追番卡当初就是踩了这个才写死 208px 的。） */
.card-scroll {
  max-height: calc(var(--card-h, 1) * 200px);
  overflow-y: auto; scrollbar-width: thin;
}
.card-scroll::-webkit-scrollbar { width: 5px; }
.card-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
/* 一张卡里放两个滚动区（比如 F1 的车手榜 + 车队榜）时用这个：
   各自高度减半，否则两个加起来会把卡片撑成两倍高。 */
.card-scroll.half { max-height: calc(var(--card-h, 1) * 96px); }

.list-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 0; border-bottom: 1px solid #1d2633; font-size: 13px;
}
.list-row:last-child { border-bottom: none; }

.empty { color: var(--ink-faint); font-size: 12.5px; padding: 10px 0; line-height: 1.6; }

/* ---------- 周课表 ---------- */

.wk-scroll { overflow-x: auto; scrollbar-width: thin; }
.wk-grid { display: grid; gap: 3px; grid-auto-rows: minmax(34px, auto); min-width: 340px; }
.wk-head {
  font-size: 11.5px; color: var(--ink-faint); text-align: center;
  padding: 3px 0; font-weight: 550;
}
.wk-head.today { color: var(--series-cpu); background: #38bdf814; border-radius: 5px; }
.wk-period {
  font-size: 10.5px; color: var(--ink-faint); text-align: right; padding-right: 5px;
  font-family: var(--font-mono); line-height: 1.25; padding-top: 3px;
}
.wk-time { display: block; font-size: 9px; opacity: .7; }
.wk-cell { border-radius: 5px; padding: 4px 5px; overflow: hidden; min-width: 0; }
.wk-cell.empty-cell { background: #1d263359; }
.wk-name {
  font-size: 11px; line-height: 1.3; font-weight: 550;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.wk-loc {
  font-size: 9.5px; color: var(--ink-faint); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- 待办 ---------- */

.todo-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font-size: 13px; }
.todo-check {
  width: 15px; height: 15px; margin-top: 2px; flex: none;
  border: 1.5px solid var(--border-strong); border-radius: 4px;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.todo-check:hover { border-color: var(--series-cpu); }
.todo-check.done { background: var(--status-good); border-color: var(--status-good); }
.todo-title { line-height: 1.45; word-break: break-word; }
.todo-row.done .todo-title { text-decoration: line-through; color: var(--ink-faint); }
/* 优先级用左边一道竖条表示，不占额外空间 */
.todo-row.p2 { border-left: 2px solid var(--status-critical); padding-left: 7px; }
.todo-row.p0 { opacity: .78; }
.todo-due { font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.todo-due.overdue { color: var(--status-critical); }

/* ---------- 习惯热力图 ---------- */

.hm {
  display: grid;
  /* 每列是一周（7 天），从上到下周一到周日 */
  grid-template-rows: repeat(7, 9px);
  grid-auto-flow: column;
  grid-auto-columns: 9px;
  gap: 2px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.hm-cell { border-radius: 2px; }

/* ---------- 月历 ---------- */

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-head {
  font-size: 10.5px; color: var(--ink-faint); text-align: center;
  padding: 3px 0; font-weight: 550;
}
.cal-head.weekend { color: var(--series-tx); }
.cal-cell {
  min-height: 34px; border-radius: 5px; padding: 2px 1px;
  text-align: center; line-height: 1.2;
}
.cal-cell.today { background: #38bdf81f; outline: 1px solid var(--series-cpu); }
.cal-day { font-size: 12px; font-variant-numeric: tabular-nums; }
.cal-cell.weekend .cal-day { color: var(--series-tx); }
.cal-sub {
  font-size: 8.5px; color: var(--ink-faint); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 节日 / 节气 / 法定节假日用不同的墨色区分，不靠颜色单独表意 —— 文字本身就说明了是什么 */
.cal-sub.festival { color: var(--series-mem); }
.cal-sub.term { color: var(--series-cpu); }
.cal-sub.holiday { color: var(--status-critical); font-weight: 600; }

@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  /* 手机单列：所有 span 都得压成 1，否则会横向溢出 */
  .grid { grid-template-columns: 1fr; }
  .grid > .dcard { grid-column: span 1 !important; }
  .drawer-items { grid-template-columns: 1fr; }
}

/* ---------- 天气卡的详情视图 ---------- */

/* 这几块只在卡片拉到 2 格高之后才出现（见 cards/weather.js 的 DETAIL_MIN_H） */
.wx-section { margin-top: 12px; }
.wx-title {
  font-size: 10.5px; color: var(--ink-faint); font-weight: 600;
  letter-spacing: .4px; margin-bottom: 6px;
}

/* 逐小时：横向滚动。
   卡片宽度有限，12 个小时换行会把卡片撑得很高；滚动既保住高度，
   也保住了「时间是一条线」的读法 —— 换行之后就看不出先后了。 */
.wx-hours {
  display: flex; gap: 2px; overflow-x: auto;
  scrollbar-width: thin; padding-bottom: 3px;
}
.wx-hours::-webkit-scrollbar { height: 5px; }
.wx-hours::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.wx-hour {
  flex: 0 0 auto; width: 42px; text-align: center;
  padding: 4px 0; border-radius: 6px;
}
.wx-hour:hover { background: var(--surface-hover); }
.wx-hour-t { font-size: 10px; color: var(--ink-faint); font-family: var(--font-mono); }
.wx-hour-i { display: flex; justify-content: center; margin: 2px 0; }
.wx-hour-v { font-size: 12px; font-variant-numeric: tabular-nums; }
/* 固定高度：降水概率只有一部分时段有，不固定的话各列的图标会参差不齐 */
.wx-hour-p { font-size: 9.5px; color: var(--series-cpu); height: 12px; }

/* 观测值：窄卡片 3 列，拉宽之后自动铺开 */
.wx-metrics {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
}
.wx-metric { min-width: 0; }
.wx-metric-k { font-size: 10.5px; color: var(--ink-faint); }
.wx-metric-v {
  font-size: 12.5px; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; margin-top: 1px;
}

/* ---------- 追番日历 ---------- */

/* 列表的滚动区用通用的 .card-scroll（见「卡片内常用排版」一节）。
   它把高度绑在 --card-h 上，所以卡片拉高之后能看到更多条目，
   而不是像以前那样永远卡在 208px。 */

/* ---------- 标签页 ---------- */

.tabs {
  display: flex; gap: 2px; margin-bottom: 18px;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 8px 14px; font-size: 13px; color: var(--ink-muted);
  white-space: nowrap; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--series-cpu); font-weight: 550; }

/* ---------- 日志框 ---------- */

.logbox {
  background: #0b0f16; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; max-height: 380px; overflow: auto;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.65;
  color: var(--ink-muted); white-space: pre-wrap; word-break: break-all;
}
.logbox::-webkit-scrollbar { width: 6px; height: 6px; }
.logbox::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ---------- 模态框 ---------- */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: #06090ecc; backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 20px;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--surface-raised); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); padding: 20px 22px;
  width: 100%; max-width: 480px; max-height: 84vh; overflow: auto;
  box-shadow: 0 20px 60px #00000080;
}
.modal-title { font-size: 15px; font-weight: 650; margin-bottom: 14px; }
.modal-body { font-size: 13px; line-height: 1.6; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* ---------- 拖放区 ---------- */

.dropzone { border-radius: var(--radius); transition: background .15s, outline-color .15s;
  outline: 2px dashed transparent; outline-offset: 4px; }
.dropzone.over { background: #38bdf814; outline-color: var(--series-cpu); }

/* ---------- 提示条 ---------- */

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  z-index: 200; padding: 9px 16px; border-radius: 10px;
  background: #0b0f16f2; border: 1px solid var(--status-critical);
  color: var(--status-critical); font-size: 13px; font-weight: 550;
  box-shadow: 0 8px 24px #00000066;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.good { border-color: var(--status-good); color: var(--status-good); }

/* ---------- 课表编辑器 ---------- */

.cs-hint { font-size: 12px; margin-bottom: 8px; }
.cs-scroll { overflow-x: auto; scrollbar-width: thin; }
.cs-grid {
  display: grid;
  grid-template-columns: 42px repeat(7, minmax(72px, 1fr));
  gap: 3px;
  grid-auto-rows: minmax(46px, auto);
  min-width: 620px;
}
.cs-head {
  font-size: 12px; color: var(--ink-faint); text-align: center;
  padding: 4px 0; font-weight: 550;
}
.cs-head.today { color: var(--series-cpu); background: #38bdf814; border-radius: 5px; }
.cs-period {
  font-size: 10.5px; color: var(--ink-faint); text-align: right;
  padding-right: 6px; padding-top: 4px;
  font-family: var(--font-mono); line-height: 1.3;
}
.cs-time { display: block; font-size: 9px; opacity: .7; }

/* 空格子：可点，但静止时不喧宾夺主 */
.cs-cell {
  border-radius: 6px; background: #1d26334d;
  border: 1px dashed transparent;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.cs-cell:hover { background: #38bdf81f; border-color: var(--series-cpu); }
.cs-cell:hover::after {
  content: '+'; color: var(--series-cpu); font-size: 16px;
  display: grid; place-items: center; height: 100%;
}

.cs-course {
  border-radius: 6px; padding: 5px 6px; cursor: pointer;
  overflow: hidden; min-width: 0;
  transition: filter .12s;
}
.cs-course:hover { filter: brightness(1.35); }
.cs-name {
  font-size: 11.5px; font-weight: 600; line-height: 1.3;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cs-loc {
  font-size: 10px; color: var(--ink-muted); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-badge {
  font-size: 9px; color: var(--ink-faint); margin-top: 2px;
  background: #0b0f1680; border-radius: 3px; padding: 0 3px; display: inline-block;
}

.cs-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.cs-swatch {
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid transparent;
  cursor: pointer; transition: transform .12s;
}
.cs-swatch:hover { transform: scale(1.1); }
.cs-swatch.on { border-color: var(--ink); box-shadow: 0 0 0 2px #0f141c inset; }

/* ---------- 单词卡 ---------- */

.v-tab {
  padding: 1px 8px; border-radius: 5px; font-size: 11px;
  color: var(--ink-faint); background: var(--surface-hover);
  border: 1px solid transparent; transition: color .12s, border-color .12s;
}
.v-tab:hover { color: var(--ink); }
.v-tab.on { color: var(--series-cpu); border-color: var(--series-cpu); font-weight: 600; }

.v-word {
  font-size: 21px; font-weight: 650; line-height: 1.25; letter-spacing: -.2px;
  word-break: break-word;
}
.v-phon {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--ink-muted); margin-top: 2px; min-height: 16px;
}
.v-sep { height: 1px; background: #1d2633; margin: 8px 0; }

.v-meaning {
  font-size: 12px; line-height: 1.6; color: var(--ink);
  max-height: 96px; overflow: auto; margin-bottom: 10px;
  scrollbar-width: thin;
}
.v-meaning::-webkit-scrollbar { width: 4px; }
.v-meaning::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.v-reveal {
  width: 100%; padding: 9px 0; border-radius: 7px;
  font-size: 12px; color: var(--ink-faint);
  background: #1d263359; border: 1px dashed var(--border);
  transition: color .12s, border-color .12s;
}
.v-reveal:hover { color: var(--series-cpu); border-color: var(--series-cpu); }

/* ---------- 存储位置切换 ---------- */

.root-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 7px; font-size: 12.5px;
  color: var(--ink-muted); background: var(--surface-hover);
  border: 1px solid transparent;
  transition: color .12s, border-color .12s, background .12s;
}
.root-tab:hover { color: var(--ink); }
.root-tab.on { color: var(--series-cpu); border-color: var(--series-cpu); font-weight: 600; }
.root-tab .tag { font-size: 10px; color: var(--ink-faint); font-weight: 400; }
.root-tab.on .tag { color: var(--series-cpu); opacity: .8; }

/* 标签 + 弹出按钮作为一个整体，别让按钮看起来属于相邻的标签 */
.root-group { display: inline-flex; align-items: center; gap: 2px; }

.root-eject {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 5px; flex: none;
  color: var(--ink-faint); background: transparent;
  border: 1px solid transparent;
}
.root-eject svg { width: 11px; height: 11px; fill: currentColor; }
.root-eject:hover { color: var(--status-critical); background: var(--surface-hover); }

/* ---------- 文件多选 ---------- */

/* 选择模式下的批量操作栏：吸在列表上方，滚动时始终可见 */
.selbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 10px;
  background: #38bdf814; border: 1px solid #38bdf840;
  border-radius: var(--radius); font-size: 12.5px;
}
.selbar .count { color: var(--series-cpu); font-weight: 600; }
/* 必须显式写：上面那条 display:flex 会覆盖 hidden 属性默认的 display:none，
   结果非选择模式下这条栏也一直显示（还是一条空的蓝条） */
.selbar[hidden] { display: none; }

/* 行首的复选框 */
.check {
  width: 15px; height: 15px; flex: none; border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  display: grid; place-items: center; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.check:hover { border-color: var(--series-cpu); }
.check.on { background: var(--series-cpu); border-color: var(--series-cpu); }
.check.on::after {
  content: ''; width: 7px; height: 4px;
  border-left: 2px solid #06131c; border-bottom: 2px solid #06131c;
  transform: rotate(-45deg) translate(1px, -1px);
}
.list-row.selected { background: #38bdf80f; }

/* 移动对话框里的目录列表 */
.mv-list {
  max-height: 240px; overflow: auto;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 4px;
}
.mv-list::-webkit-scrollbar { width: 5px; }
.mv-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.mv-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.mv-item:hover { background: var(--surface-hover); }
.mv-item.dim { color: var(--ink-faint); cursor: default; }

/* ---------- 工具类 ---------- */

.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.row { display: flex; align-items: center; gap: 10px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grow { flex: 1; }
.stack { display: grid; gap: var(--gap); }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 数据不可用时的占位。比显示 0 诚实 —— 0 会被误读成"真的是零"。 */
.na { color: var(--ink-faint); font-family: var(--font-mono); }

@media (max-width: 640px) {
  .shell { padding: 0 14px 32px; }
  .topbar { padding: 10px 14px; }
  .tile-value { font-size: 26px; }
  .charts { grid-template-columns: 1fr; }
}

/* 尊重系统的减少动效设置 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}