/* ============================================================
   校园办公系统 v2 · 设计系统
   方向：暖纸台账 (Warm Ledger)
   ------------------------------------------------------------
   规则：
   1. 暖纸底 + 纯白卡片 + 极淡边框/阴影，不用重投影
   2. 主色克制：只用于 CTA / 当前 Tab / 身份头部
   3. 状态只用语义色（success / warning / danger）；分类用冷静色板（无紫、无品红）
   4. 字体只用系统栈 —— 零网络依赖，不阻塞渲染
   5. 移动优先；iPhone 安全区用 env(safe-area-inset-bottom) 兜住
   6. 触感反馈一律用 :active（手机没有 hover）
   ============================================================ */

:root {
  color-scheme: light;
  /* 底色 */
  --bg:           hsl(40 20% 96%);
  --bg-outside:   hsl(220 14% 94%);
  --card:         hsl(0 0% 100%);
  --card-soft:    hsl(40 24% 98%);

  /* 文字 */
  --fg:           hsl(216 14% 14%);
  --fg-muted:     hsl(216 9% 42%);
  --fg-faint:     hsl(216 12% 45%);

  /* 主色 */
  --primary:      hsl(221 83% 53%);
  --primary-fg:   hsl(0 0% 100%);
  --primary-soft: hsl(218 60% 95%);
  --primary-ink:  hsl(221 60% 38%);
  --primary-deep: hsl(221 72% 44%);

  /* 中性面 */
  --secondary:    hsl(218 50% 93%);
  --muted:        hsl(40 14% 92%);
  --line:         hsl(214 12% 89%);
  --line-soft:    hsl(214 16% 94%);

  /* 语义色 —— 全站唯一允许的饱和色 */
  --success:      hsl(150 54% 29%);
  --success-solid: hsl(150 54% 27%);   /* 白字压在它上面 */
  --success-soft: hsl(150 45% 94%);
  --success-line: hsl(150 40% 82%);
  --warning:      hsl(28 90% 32%);
  --warning-solid: hsl(28 90% 29%);    /* 白字压在它上面 */
  --warning-soft: hsl(38 88% 94%);
  --warning-line: hsl(30 84% 78%);
  --danger:       hsl(354 68% 46%);
  --danger-solid: hsl(354 68% 42%);   /* 白字压在它上面（角标/计数） */
  --danger-soft:  hsl(354 80% 96%);
  --danger-line:  hsl(354 62% 86%);
  --info:         hsl(221 83% 53%);
  --info-soft:    hsl(218 60% 95%);

  /* 分类色板：5 支冷静色，统一明度与饱和度，无紫/品红 */
  --tint-1: hsl(221 76% 48%);
  --tint-2: hsl(183 64% 26%);
  --tint-3: hsl(150 56% 27%);
  --tint-4: hsl(28 90% 30%);
  --tint-5: hsl(14 74% 37%);

  /* 圆角 */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* 阴影：极淡，靠边框定形 */
  --sh-1: 0 1px 2px hsl(216 20% 20% / .04), 0 1px 1px hsl(216 20% 20% / .03);
  --sh-2: 0 2px 10px hsl(216 20% 20% / .05), 0 1px 2px hsl(216 20% 20% / .04);
  --sh-3: 0 10px 30px hsl(216 20% 20% / .12);

  /* 节奏 */
  --gap: 10px;
  --pad-x: 16px;
  --pad-card: 14px;
  --tabbar-h: 58px;

  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif;
}

/* ============================ 基础 ============================ */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg-outside);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, figure { margin: 0; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
input, textarea, select {
  font: inherit;
  color: inherit;
  /* 原生控件（date / select…）在 iOS 上的"最小宽度"很大。
     而 flex 子项默认 min-width:auto —— 收缩下限由**内容**决定，
     于是空着放得下、一填上日期这一行就拒绝收缩，把整行顶出屏幕。
     写在**元素选择器**上（而不是只写 .input）是为了以后新加的控件也不漏。 */
  min-width: 0;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ============================ 外壳 ============================ */

.app {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  box-shadow: 0 0 0 1px hsl(216 20% 20% / .05), 0 0 40px hsl(216 20% 20% / .06);
}

@media (max-width: 480px) {
  .app { box-shadow: none; max-width: none; }
}

.main {
  /* 顶部安全区：没有 appbar 的页面（首页 / 我的）由这里承担。
     以前一个 padding-top 都没写 —— 而 viewport-fit=cover +
     status-bar-style=black-translucent 意味着状态栏是**盖在内容上**的，
     所以刘海屏从主屏图标打开时，顶部会被压住。（有 appbar 的页面见下面的例外） */
  padding: calc(14px + env(safe-area-inset-top, 0px)) var(--pad-x) 24px;
}

/* 紧跟在 appbar 后面的 .main：顶部安全区已经由 appbar 让过了，别重复让一次 */
.appbar + .main {
  padding-top: 14px;
}

/* 有底部 TabBar 的页面要给它让位（含安全区） */
.main.has-tabbar {
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 28px);
}

/* 有底部操作栏的页面 */
.main.has-actionbar {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 16px);
}

/* ============================ 顶部 ============================ */

.appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 6px;
  /* 内容区还是 50px 高，多出来的是给状态栏/刘海让的位 */
  height: calc(50px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--pad-x) 0;
  background: var(--bg);   /* 老浏览器兜底：不支持 color-mix 时用实色 */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.appbar__title {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appbar__side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  width: 46px;
  flex: none;
}

/* 触摸目标 ≥40px（Apple HIG 建议 44px，行内按钮靠行高补足） */
.appbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  color: var(--fg);
}
.appbar__btn:active { background: var(--muted); }

/* 页面标题（一级页，非 sticky） */
.page-title { margin-bottom: 2px; }
.page-title h1 { font-size: 21px; font-weight: 700; letter-spacing: -.2px; }
.page-title p { margin-top: 2px; font-size: 12px; color: var(--fg-muted); }

/* ============================ 卡片 / 列表 ============================ */

.card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

.card--flat { box-shadow: none; }

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px var(--pad-card) 9px;
  font-size: 13.5px;
  font-weight: 600;
}
.card__head .more {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 12px;
  font-weight: 400;
  color: var(--fg-faint);
}

/* 列表行：全站唯一的可点卡片语法 */
.row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 12px var(--pad-card);
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  text-align: left;
  transition: transform .12s ease, background .12s ease;
}
.row:active { background: var(--card-soft); transform: scale(.988); }

.row--plain {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--line-soft);
}
.row--plain:last-child { border-bottom: 0; }
.row--plain:active { background: var(--muted); transform: none; }

.row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--primary-soft);
  color: var(--primary);
}
.row__icon--lg { width: 42px; height: 42px; border-radius: var(--r-md); }

.row__body { flex: 1; min-width: 0; }
.row__title {
  display: block;
  font-size: 14.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row__sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row__tail { flex: none; display: flex; align-items: center; gap: 6px; }
.row__chev { color: var(--fg-faint); flex: none; }

.stack { display: flex; flex-direction: column; gap: var(--gap); }
/* flex 子项默认 min-width:auto：内容的最小宽度会顶破容器。
   表单字段（.form-group）就在 .stack 里，所以这条是上面那个坑的另一半。 */
.stack > * { min-width: 0; }
.stack--tight { gap: 8px; }

/* ============================ 区块 ============================ */

.section { margin-top: 22px; }
.section:first-child { margin-top: 0; }

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.section__title { font-size: 14px; font-weight: 600; letter-spacing: -.1px; }
.section__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--danger-solid);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  vertical-align: 1px;
}
.section__more {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 12px;
  color: var(--fg-faint);
}

/* ============================ 身份头部 ============================ */

.hero {
  position: relative;
  overflow: hidden;
  padding: 15px var(--pad-card);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
  color: var(--primary-fg);
  box-shadow: 0 6px 20px hsl(221 70% 40% / .25);
}
.hero__glow {
  position: absolute;
  top: -46px;
  right: -34px;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: hsl(0 0% 100% / .12);
  pointer-events: none;
}
.hero__top { display: flex; align-items: center; gap: 11px; position: relative; }
.hero__name { font-size: 17.5px; font-weight: 600; letter-spacing: -.2px; }
.hero__meta { font-size: 12px; opacity: .82; }
.hero__body { flex: 1; min-width: 0; }
.hero__foot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 8px 11px;
  border-radius: var(--r-sm);
  background: hsl(0 0% 100% / .14);
  font-size: 12px;
}
.hero__foot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================ 头像 ============================ */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--primary-ink);
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--lg { width: 50px; height: 50px; font-size: 17px; }
.avatar--ring { border: 2px solid hsl(0 0% 100% / .45); }

/* ============================ 左标签 + 右控件行 ============================
   用于"勾选/开关"列表（角色勾权限点、用户选角色）。
   必须显式写 display:flex / text-align:left / font:inherit ——
   因为 <button> 的默认样式是居中 + 系统字体 + 系统色，光靠外层看着不像按钮。
   （这个类我第一版忘了加进 CSS，结果权限点全都居中、开关跑到外面去了。）
   ========================================================================== */

.crow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  background: none;
  border: 0;
  text-align: left;
  color: var(--fg);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.crow:active { opacity: .62; }
.crow__label {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
}

/* ============================ 进度条 ============================ */

.progress {
  height: 6px;
  border-radius: var(--r-full);
  background: var(--muted);
  overflow: hidden;
}
.progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width .25s ease;
}

/* ============================ 统计三宫格 ============================ */

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }

.stat {
  padding: 12px 6px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  text-align: center;
  transition: transform .12s ease, background .12s ease;
}
.stat:active { background: var(--card-soft); transform: scale(.97); }
.stat__num {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.stat__num--accent { color: var(--primary); }
.stat__label { margin-top: 3px; font-size: 11.5px; color: var(--fg-muted); }

/* ============================ 宫格入口 ============================ */

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform .12s ease, background .12s ease;
}
.entry:active { background: var(--card-soft); transform: scale(.98); }

.entry__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--r-sm);
}
.entry__label { font-size: 13.5px; font-weight: 500; }

/* 宫格版（图标在上，文字在下） */
.entry--tile {
  flex-direction: column;
  gap: 7px;
  padding: 12px 4px;
  align-items: center;
  text-align: center;
}
.entry--tile .entry__icon { width: 38px; height: 38px; border-radius: var(--r-md); }
.entry--tile .entry__label { font-size: 11.5px; font-weight: 400; color: var(--fg); line-height: 1.3; }

/* 九宫格容器：卡片包住一片 */
.grid-panel {
  padding: 12px 10px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

/* ============================ 胶囊 / 徽标 ============================ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.pill--info    { background: var(--info-soft);    color: var(--info); }
.pill--success { background: var(--success-soft); color: var(--success); }
.pill--warning { background: var(--warning-soft); color: var(--warning); }
.pill--danger  { background: var(--danger-soft);  color: var(--danger); }
.pill--muted   { background: var(--muted);        color: var(--fg-muted); }
.pill--solid   { background: var(--primary); color: var(--primary-fg); }

.dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--danger-solid);
}

/* 未读角标 */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--danger-solid);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ============================ 底部 TabBar ============================ */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--card);
  background: color-mix(in srgb, var(--card) 86%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--line-soft);
}

.tabbar__inner {
  display: flex;
  align-items: stretch;
  height: var(--tabbar-h);
  max-width: 460px;
  margin: 0 auto;
}

.tab {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--fg-faint);
  transition: color .15s ease;
}
.tab__label { font-size: 11.5px; letter-spacing: .1px; }
.tab.is-active { color: var(--primary); }
.tab.is-active .tab__label { font-weight: 600; }
.tab__icon { position: relative; display: inline-flex; }
.tab__dot {
  font-size: 11.5px;
  position: absolute;
  top: -5px;
  right: -9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--danger-solid);
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--card);
}
/* 只有点、没有数字时收成小圆点 */
.tab__dot--bare { min-width: 8px; height: 8px; padding: 0; right: -4px; top: -3px; }

/* ============================ 底部操作栏 ============================ */

.actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  padding: 10px var(--pad-x) calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--card);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line-soft);
}
.actionbar__inner {
  display: flex;
  gap: 9px;
  max-width: 460px;
  margin: 0 auto;
}

/* ============================ 按钮 ============================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 42px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: transform .12s ease, background .12s ease, opacity .12s ease;
}
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .45; pointer-events: none; }

.btn--primary { background: var(--primary); color: var(--primary-fg); box-shadow: 0 2px 8px hsl(221 70% 45% / .28); }
.btn--primary:active { background: var(--primary-deep); }

.btn--ghost { background: var(--card); color: var(--fg); border: 1px solid var(--line); }
.btn--ghost:active { background: var(--muted); }

.btn--soft { background: var(--primary-soft); color: var(--primary-ink); }
.btn--soft:active { background: var(--secondary); }

.btn--danger { background: var(--card); color: var(--danger); border: 1px solid var(--danger-line); }
.btn--danger:active { background: var(--danger-soft); }

.btn--sm { height: 32px; padding: 0 11px; font-size: 13px; border-radius: var(--r-xs); }
.btn--block { width: 100%; }
.btn--grow { flex: 1; }

/* 浮在身份头部里的按钮 */
.btn--onhero {
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: var(--r-full);
  background: hsl(0 0% 100% / .18);
  color: var(--primary-fg);
  flex: none;
}
.btn--onhero:active { background: hsl(0 0% 100% / .3); }

/* ============================ 分段控件 / Tab ============================ */

.seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--muted);
  border-radius: var(--r-sm);
}
.seg__item {
  flex: 1;
  min-width: 0;
  height: 36px;
  /* 全局 button 重置没有清 padding，浏览器默认的 1px 6px 会白吃 12px ——
     320px 屏上 4 个 tab 各只有约 68px，加上数字后就换行了。
     这里显式清掉，并且禁止折行（折行会把整条 tab 撑成两行高）。 */
  padding: 0;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s ease, color .15s ease;
}
/* tab 上的数字：弱化呈现，不用红色 —— 它是"提示还有几条"，不是"警报"。
   0 的情况由 JS 直接不渲染。 */
.seg__num {
  margin-left: 2px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  opacity: .7;
}

.seg__item.is-active {
  background: var(--card);
  color: var(--fg);
  font-weight: 600;
  box-shadow: var(--sh-1);
}

/* 下划线式 Tab（用于 发起申请 | 管理 这种二级视图） */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 14px;
}
.tabs__item {
  position: relative;
  flex: 1;
  height: 42px;
  font-size: 14.5px;
  color: var(--fg-muted);
}
.tabs__item.is-active { color: var(--fg); font-weight: 600; }
.tabs__item.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 30px;
  height: 2.5px;
  margin-left: -15px;
  border-radius: 2px;
  background: var(--primary);
}

/* ============================ 表单 ============================ */

.form-group { margin-bottom: 14px; }

.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
}
.field-label .req { color: var(--danger); margin-left: 2px; }

.input, .textarea, .select {
  width: 100%;
  padding: 11px 13px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  /* ⚠ 不许改小！必须 ≥16px。
     iOS Safari 在**聚焦到字号小于 16px 的输入框**时会自动把整个页面放大，
     而且这不是用户主动的 —— 用户只是点了输入框，页面就"跳大"了。
     想靠 user-scalable=no 解决是没用的：iOS 从 10 起故意忽略它（无障碍原因）。
     16px 也不难看：iOS 原生输入框 17px、微信/支付宝表单都是 16px+，
     输入框高度只涨约 2px，反而更贴近 Apple HIG 的 44px 触摸标准。 */
  font-size: 16px;
  /* 收缩兜底见上面 input/textarea/select 那条（元素级，覆盖更全） */
  min-width: 0;
  max-width: 100%;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--fg-faint); }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px hsl(221 83% 53% / .13);
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.select { appearance: none; background-image: none; }

/* iOS 把 date / datetime-local 渲染成**原生控件**，它带自己的固有宽高，
   基本不遵守我们的 width / padding —— 实测在 iPhone 上：
     · 比同排的文本输入框更宽（冲出容器右边界）
     · 也比它们更高
   .select 早就用 appearance: none 解决了同类问题，input 系列漏了。
   关掉原生外观后 iOS 会把它当普通输入框渲染（点一下仍然会弹原生日历）。 */
/* 日期/时间字段的视觉提示。
   iOS 上原生外观被关掉了（不关就冲出容器），于是占位日期和日历图标一起消失，
   字段变成个空白框、看不出是日期 —— 这里补回来。
   两层都 pointer-events:none：点下去要落到 input 上才弹原生日历。 */
.picker-field { position: relative; }
.picker-field .input { padding-right: 44px; }
.picker-field__icon {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--fg-faint);
  pointer-events: none;
}
.picker-field__hint {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  font-size: 16px;
  color: var(--fg-faint);
  pointer-events: none;
}
/* 提示文字只在**触屏设备**显示：桌面 Safari 的日期控件自带灰色占位
   （会显示成 2026/10/16），再叠一层就重叠了。 */
@media (hover: none) and (pointer: coarse) {
  .picker-field:not(.has-value) .picker-field__hint { display: block; }
}

input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;      /* 兜底：万一原生渲染还是往框外画 */
  text-align: left;
  /* 高度和行高都要自己钉住，原因有两个：
       · appearance:none 之后 iOS **不给空的日期字段生成行盒** —— 内容高度塌成 0，
         整个框只剩上下内边距（实测日期框 22pt，而文本输入框 47pt，只有一半高）
       · 桌面 Safari 的原生渲染又比文本输入框高 4px
     写死这两项才能和 .input 精确对齐，而且用 em 跟着字号走、不会漂：
         内边距 11×2 = 22  +  边框 1×2 = 2  +  行高 1.55em  */
  height: calc(24px + 1.55em);
  line-height: 1.55;   /* 把行盒钉成 1.55em，否则桌面端多出的那几像素会被裁掉 */
}

/* ============================ 汇总表 ============================ */
/* 总表要能在一屏里横向放下（320px 窄屏也不许溢出）——
   字号压到下限 11.5px，数字列右对齐并用等宽数字，眼睛能顺着列扫。 */
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.tbl th,
.tbl td {
  padding: 8px 5px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tbl th { font-size: 11.5px; font-weight: 500; color: var(--fg-faint); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tr.is-missing td { color: var(--fg-faint); }
.tbl tr.is-missing .cls::before { content: '⚠ '; }
.tbl tfoot td { border-top: 1px solid var(--line); border-bottom: 0; font-weight: 600; }
.tbl__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.field-hint { margin-top: 5px; font-size: 12px; color: var(--fg-faint); }
.field-error { margin-top: 5px; font-size: 12px; color: var(--danger); }

/* 表单行：左标签 + 右值（企业微信风） */
.frow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px var(--pad-card);
  background: var(--card);
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
}
.frow:last-child { border-bottom: 0; }
.frow:active { background: var(--card-soft); }
.frow__label { flex: none; font-size: 14.5px; }
.frow__label .req { color: var(--danger); margin-left: 2px; }
.frow__value {
  flex: 1;
  min-width: 0;
  text-align: right;
  font-size: 14px;
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frow__value--empty { color: var(--fg-faint); }
.frow__value--filled { color: var(--fg); }

.form-panel {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
}

/* 选择器胶囊组 */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--card);
  font-size: 13px;
  color: var(--fg-muted);
  transition: all .14s ease;
}
.chip.is-on {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-ink);
  font-weight: 500;
}
.chip:active { transform: scale(.97); }

/* ============================ 时间线 ============================ */

.timeline { position: relative; padding-left: 26px; }

.tl-item { position: relative; padding-bottom: 16px; }
.tl-item:last-child { padding-bottom: 0; }

.tl-item::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 16px;
  bottom: 0;
  width: 1.5px;
  background: var(--line);
}
.tl-item:last-child::before { display: none; }

.tl-dot {
  position: absolute;
  left: -26px;
  top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--line);
  color: transparent;
}
.tl-item--done .tl-dot { background: var(--success-solid); border-color: var(--success-solid); color: #fff; }
.tl-item--reject .tl-dot { background: var(--danger-solid); border-color: var(--danger-solid); color: #fff; }
.tl-item--now .tl-dot { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }

.tl-head { display: flex; align-items: center; gap: 7px; }
.tl-name { font-size: 13.5px; font-weight: 600; }
.tl-time { margin-left: auto; font-size: 11.5px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.tl-body {
  margin-top: 6px;
  padding: 9px 11px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--fg-muted);
  white-space: pre-wrap;
}

/* ============================ 空状态 ============================ */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 40px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--card) 55%, transparent);
  color: var(--fg-faint);
  text-align: center;
}
.empty svg { opacity: .6; }
.empty__title { font-size: 13px; }
.empty__hint { font-size: 12px; color: var(--fg-faint); }

/* ============================ 底部弹层 ============================ */

.sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: hsl(216 30% 12% / .38);
  backdrop-filter: blur(2px);
  animation: fadeIn .18s ease;
}

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  max-width: 460px;
  margin: 0 auto;
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  animation: sheetUp .24s cubic-bezier(.22, .8, .3, 1);
  overflow: hidden;
}
.sheet__title {
  padding: 14px 20px 10px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}
.sheet__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  background: var(--card);
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
}
.sheet__item:active { background: var(--muted); }
/* "这一项是当前选中的"（切换身份里标出你是谁）—— 只是高亮，不是按钮 */
.sheet__item--active { color: var(--primary); font-weight: 500; }
/* 弹层底部的"语义按钮"区（确定 / 完成 / 危险动作 / 取消）。
   这里面**直接复用 app 的 .btn**（42px / 圆角 / 阴影 / 左右留边），
   所以弹层里的「完成」和页面里的「发布」长得一模一样。

   注意区分：弹层里的**等权动作列表**（上移 / 下移 / 改名称 / 切换身份）
   仍然用上面的 .sheet__item 行样式 —— 那些是列表项，不是按钮。 */
/* ---------------------------- 附件缩略块 ----------------------------
   图片给缩略图（点开页内看大图），其他类型给类型标签（PDF/DOC/XLS…）。
   以前附件一律是"药丸样式的文件名"，照片完全看不出是什么。
------------------------------------------------------------------- */
.file-thumb {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--muted);
  /* 11.5px 是全项目的最小字号下限（check-visual 会拦 11px 这种）。
     标签是 PDF/DOC/XLS 这类拉丁字母，本来 11px 也看得清，
     但没必要为这一点跟全局规则较劲。 */
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--fg-muted);
}
.file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-thumb--doc { background: var(--primary-soft); color: var(--primary-ink); }

/* 全屏看图：页内弹层，不走 target="_blank"
   （iOS 主屏模式下新标签页行为不可靠） */
.imgview {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: hsl(0 0% 0% / .92);
  animation: fadeIn .18s ease;
}
.imgview img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.imgview__close {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: hsl(0 0% 100% / .18);
  color: #fff;
  font-size: 17px;
  line-height: 1;
}

.sheet__foot {
  display: flex;
  gap: 9px;
  padding: 10px var(--pad-card) 6px;
}
.sheet__foot > .btn {
  flex: 1;
  min-width: 0;
  /* 标签可能很长（比如"系统管理员 · 信息中心"）。.btn 默认 white-space:nowrap，
     不允许换行的话文字会溢出按钮、在 320px 上被切掉（截图里看到过）。 */
  white-space: normal;
  height: auto;
  min-height: 42px;
  padding: 9px 12px;
  line-height: 1.25;
  text-align: center;
}
.sheet__body { padding: 0 16px 12px; max-height: 64vh; overflow-y: auto; }

@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ============================ 吐司 ============================ */

.toast-wrap {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(14px + env(safe-area-inset-top, 0px));
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast {
  max-width: 320px;
  padding: 10px 16px;
  border-radius: var(--r-full);
  background: hsl(216 30% 16% / .93);
  color: #fff;
  font-size: 13.5px;
  box-shadow: var(--sh-3);
  animation: toastIn .22s cubic-bezier(.22, .8, .3, 1);
}
.toast--success { background: hsl(150 45% 26% / .95); }
.toast--error { background: hsl(354 55% 38% / .95); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* ============================ 骨架屏 ============================ */

.sk {
  border-radius: var(--r-sm);
  background: linear-gradient(100deg, var(--muted) 30%, hsl(40 16% 96%) 50%, var(--muted) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.25s ease-in-out infinite;
}
@keyframes shimmer { from { background-position: 160% 0; } to { background-position: -60% 0; } }

/* ============================ 管理端专用 ============================ */

/* 管理首页的配置项行：图标 + 标题 + 摘要 + 箭头 */
.mrow {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 54px;
  padding: 11px var(--pad-card);
  background: var(--card);
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
}
.mrow:last-child { border-bottom: 0; }
.mrow:active { background: var(--card-soft); }
.mrow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--r-xs);
  background: var(--primary-soft);
  color: var(--primary);
}
.mrow__body { flex: 1; min-width: 0; }
.mrow__title { font-size: 14.5px; font-weight: 500; }
.mrow__sub { margin-top: 1px; font-size: 12px; color: var(--fg-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow__tail { flex: none; font-size: 12.5px; color: var(--fg-faint); display: flex; align-items: center; gap: 4px; }

/* 管理页里的字段编辑行（对应企业微信的控件行） */
.fedit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px var(--pad-card);
  background: var(--card);
  border-bottom: 1px solid var(--line-soft);
}
.fedit:last-child { border-bottom: 0; }
.fedit__body { flex: 1; min-width: 0; }
.fedit__name { font-size: 14.5px; }
.fedit__name .req { color: var(--danger); margin-left: 2px; }
.fedit__type {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--muted);
  color: var(--fg-muted);
  font-size: 11.5px;
}
.fedit__acts { flex: none; display: flex; align-items: center; gap: 2px; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-xs);
  color: var(--fg-faint);
}
.icon-btn:active { background: var(--muted); color: var(--fg); }
.icon-btn[disabled] { opacity: .32; pointer-events: none; }

/* 图标翻转工具类（只有 chevronDown 一个箭头图标，上移就靠它翻过来） */
.rot-180 { transform: rotate(180deg); }
.icon-btn--danger:active { background: var(--danger-soft); color: var(--danger); }

/* 字段行里的「设置」：文字按钮，别用方形图标位（否则中文会被挤成两行） */
.icon-btn--text {
  width: auto;
  min-width: 46px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--primary);
}
.icon-btn--text:active { background: var(--primary-soft); color: var(--primary-ink); }

/* 字段行操作区：图标之间留出足够间距，避免误触 */
.fedit__acts { flex: none; display: flex; align-items: center; gap: 4px; }

/* 拖拽手柄 */
.grip { color: var(--fg-faint); cursor: grab; touch-action: none; }
.dragging { opacity: .5; }

/* 管理开关行 */
.switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px var(--pad-card);
  background: var(--card);
  border-bottom: 1px solid var(--line-soft);
}
.switch-row:last-child { border-bottom: 0; }
.switch-row__body { flex: 1; min-width: 0; }
.switch-row__title { font-size: 14.5px; }
.switch-row__sub { margin-top: 2px; font-size: 12px; color: var(--fg-faint); line-height: 1.45; }

.switch {
  position: relative;
  flex: none;
  width: 52px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--line);
  transition: background .18s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-1);
  transition: transform .18s cubic-bezier(.22, .8, .3, 1);
}
.switch.is-on { background: var(--primary); }
.switch.is-on::after { transform: translateX(20px); }

/* 流程节点卡（管理端流程编辑） */
.node {
  position: relative;
  padding: 12px var(--pad-card);
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.node__head { display: flex; align-items: center; gap: 8px; }
.node__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  flex: none;
}
.node__badge--apply { background: var(--tint-1); }
.node__badge--approve { background: var(--tint-4); }
.node__badge--cc { background: var(--tint-3); }
.node__badge--handle { background: var(--tint-2); }
.node__name { flex: 1; font-size: 14.5px; font-weight: 600; }
.node__summary {
  margin-top: 8px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: var(--card-soft);
  border: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.node__summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 流程连接线：节点之间的 + 号 */
.node-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 0;
}
.node-link__line { width: 1.5px; height: 14px; background: var(--line); }
.node-link__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-fg);
  box-shadow: 0 2px 8px hsl(221 70% 45% / .35);
}
.node-link__plus:active { background: var(--primary-deep); transform: scale(.94); }
.node-link__plain { width: 1.5px; height: 22px; background: var(--line); }

/* 流程起点 / 终点 */
.flow-cap {
  padding: 13px var(--pad-card);
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}
.flow-cap--soft { background: var(--card-soft); font-weight: 500; color: var(--fg-muted); }

/* 只读信息面板 */
.panel-list { display: flex; flex-direction: column; }

.info-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px var(--pad-card);
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.info-line:last-child { border-bottom: 0; }
.info-line__k { flex: none; width: 84px; color: var(--fg-muted); }
.info-line__v { flex: 1; min-width: 0; word-break: break-word; }

/* ============================ 图标底色（分类色板） ============================
   5 支冷静色，无紫无品红；统一 10% 透明度做底、实色做图标
   ============================================================================ */
.tint-1 { background: hsl(221 76% 48% / .10); color: var(--tint-1); }
.tint-2 { background: hsl(183 58% 32% / .10); color: var(--tint-2); }
.tint-3 { background: hsl(150 52% 32% / .10); color: var(--tint-3); }
.tint-4 { background: hsl(32 84% 40% / .11);  color: var(--tint-4); }
.tint-5 { background: hsl(14 68% 45% / .11);  color: var(--tint-5); }

/* 宫格入口的图标 + 右上角标 */
.entry__iconwrap { position: relative; display: inline-flex; }
.entry__iconwrap .badge {
  position: absolute;
  top: -6px;
  right: -8px;
  box-shadow: 0 0 0 2px var(--card);
}

/* 图标底色在深色底上（身份头部里） */
.tint-on-dark { background: hsl(0 0% 100% / .18); color: #fff; }

/* ============================ 工具类 ============================ */

.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }
.small { font-size: 12px; }
.tnum { font-variant-numeric: tabular-nums; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stack-2 > * + * { margin-top: 2px; }
.stack-4 > * + * { margin-top: 4px; }
.stack-6 > * + * { margin-top: 6px; }
.stack-8 > * + * { margin-top: 8px; }
.stack-12 > * + * { margin-top: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.row-flex { display: flex; align-items: center; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.mt-2 { margin-top: 2px; } .mt-6 { margin-top: 6px; } .mt-10 { margin-top: 10px; }
.mt-14 { margin-top: 14px; } .mt-20 { margin-top: 20px; }
.hidden { display: none !important; }

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   深色主题
   ------------------------------------------------------------
   挂 data-theme 而不是写 @media，是为了**只有一份深色定义**：
     由 index.html 的内联脚本读系统偏好设置这个属性（首屏不闪白）。
   所有颜色仍然只走变量，组件样式一行都不用改。
   ============================================================ */
:root[data-theme='dark'] {
  color-scheme: dark;          /* 表单控件/滚动条/日期选择器跟着变深色 */
  --bg:           hsl(216 18% 10%);
  --bg-outside:   hsl(216 16% 7%);
  --card:         hsl(216 15% 14%);
  --card-soft:    hsl(216 15% 17%);

  --fg:           hsl(210 22% 94%);
  --fg-muted:     hsl(214 14% 70%);
  --fg-faint:     hsl(214 12% 56%);

  /* 深色下 primary 要同时干两件事：当文字（要亮）+ 当按钮底（要能压住字）。
     一个颜色做不到两头都达标，所以把"压在上面的字"改成深色 —— 这是深色模式的常规解法。 */
  --primary:      hsl(221 85% 66%);
  --primary-fg:   hsl(221 90% 12%);
  --primary-soft: hsl(221 34% 22%);
  --primary-ink:  hsl(221 78% 80%);
  --primary-deep: hsl(221 82% 72%);

  --secondary:    hsl(216 16% 20%);
  --muted:        hsl(216 14% 19%);
  --line:         hsl(216 12% 27%);
  --line-soft:    hsl(216 12% 22%);

  --success:      hsl(150 48% 62%);
  --success-solid: hsl(150 40% 27%);
  --success-soft: hsl(150 28% 17%);
  --success-line: hsl(150 26% 30%);
  --warning:      hsl(35 78% 62%);
  --warning-solid: hsl(30 70% 30%);
  --warning-soft: hsl(32 34% 17%);
  --warning-line: hsl(32 30% 30%);
  --danger:       hsl(354 72% 68%);
  --danger-soft:  hsl(354 30% 19%);
  --danger-line:  hsl(354 28% 32%);
  --danger-solid: hsl(354 62% 44%);
  --info:         hsl(221 80% 62%);
  --info-soft:    hsl(221 34% 22%);

  /* 分类色：深底上要提亮才看得清 */
  --tint-1: hsl(221 78% 68%);
  --tint-2: hsl(183 58% 60%);
  --tint-3: hsl(150 48% 58%);
  --tint-4: hsl(35 78% 60%);
  --tint-5: hsl(14 74% 64%);
}

/* 深色下分类色是亮色，节点徽标上的白字读不出来 → 换成深字 */
:root[data-theme='dark'] .node__badge { color: hsl(216 30% 10%); }

/* 深色下分类色底的透明度要略高一点才看得出底色 */

/* 深色下身份头部的渐变要压深一点，别在暗背景上发灰 */
:root[data-theme='dark'] .hero {
  background: linear-gradient(135deg, hsl(221 58% 34%) 0%, hsl(221 62% 24%) 100%);
  box-shadow: 0 6px 20px hsl(221 60% 8% / .55);
}
/* 暗底上"分类色底"透明度要略高才看得出颜色，太低会变成一坨脏灰 */
:root[data-theme='dark'] .tint-1 { background: hsl(221 78% 68% / .22); }
:root[data-theme='dark'] .tint-2 { background: hsl(183 58% 60% / .22); }
:root[data-theme='dark'] .tint-3 { background: hsl(150 48% 58% / .22); }
:root[data-theme='dark'] .tint-4 { background: hsl(35 78% 60% / .22); }
:root[data-theme='dark'] .tint-5 { background: hsl(14 74% 64% / .22); }

/* 深色下"骨架屏"的扫光要反过来 */
:root[data-theme='dark'] .sk {
  background: linear-gradient(100deg, hsl(216 14% 19%) 30%, hsl(216 14% 25%) 50%, hsl(216 14% 19%) 70%);
}