/* 未晞通行证 —— 设计系统「破晓青 Teal」v1.0
 *
 * 这份文件是 C:/Users/xuan/WorkBuddy/.../weixi-passport-ui/{index,console}.html 两份设计稿的 1:1 移植：
 * 令牌、组件、桌面端与移动端两套形态都按稿子取值，一处都不自创。稿子里的「展示页外壳」
 * （.wrap/.site-head/.section/.showcase/.frame-desktop/.phone/.specs）不属于产品界面，没有搬过来。
 *
 * 三条与稿子不同的地方，都是这个系统本身的约束，不是设计漂移：
 *  1. 稿子只有浅色。这里浅色是默认那张脸，暗色是同一批令牌的另一种取值（末尾那段），
 *     组件规则不写死 #fff/#F6FAF9 而走令牌，否则暗色下卡片会与页面同色、边框消失。
 *  2. 状态标签同时认两套写法：稿子的 .tag.s/.d/.w/.i/.n 与代码里按库字段渲染的 .tag-active/.tag-frozen/…
 *     （模板输出的是 tag-{$row.status}，那批后缀必须与 .tag.s 同色，否则后台状态列会全变灰）。
 *  3. 反滥用那一格 .hp（蜜罐）不能是 display:none —— 脚本会读计算样式跳过隐藏字段，
 *     所以它用「屏幕外 + tabindex=-1 + aria-hidden」，稿子里没有这一格，判据在 Passport::registerCode()。
 *
 * 图标一律走 view/public/icons.html 那份 SVG symbol 精灵（<svg class="ic"><use href="#i-user"/></svg>），
 * 与稿子同一个做法：零 CDN、零字体文件、离线可用。
 */

/* ============ 设计令牌 ============ */
:root {
  /* 主色：破晓青 */
  --teal-50: #F0FDFA; --teal-100: #CCFBF1; --teal-200: #99F6E4; --teal-300: #5EEAD4;
  --teal-400: #2DD4BF; --teal-500: #14B8A6; --teal-600: #0D9488; --teal-700: #0F766E;
  --teal-800: #115E59; --teal-900: #134E4A;
  /* 中性：墨 */
  /* 原型的 #94A3B8/#64748B 压在白底上只有 2.8:1 / 4.8:1，11~13px 的说明文字（.hint/.fine/.meta/.crumb）过不了 AA。
     这里把 400/500 两档整体压深：#5F6E83 在 card/field/sunk 三种面上都 ≥4.7:1，仍与 700 分得开。 */
  --ink-900: #0F172A; --ink-700: #334155; --ink-500: #556375; --ink-400: #5F6E83;
  --line: #E2E8F0; --line-soft: #EEF2F6;

  /* 语义面（稿子里的 #fff / #F6FAF9 / #F8FAFC / #F1F5F9）：暗色分支只改这一组 */
  --page: #F6FAF9;
  --card: #FFFFFF;
  --field: #F8FAFC;
  --sunk: #F1F5F9;
  --raised: #FFFFFF;

  /* 语义色（同一个颜色的六个名字，模板里不用记十六进制） */
  --accent: var(--teal-600);
  --accent-strong: var(--teal-700);
  --accent-lite: var(--teal-500);
  --accent-glow: var(--teal-400);
  --accent-tint: var(--teal-50);
  --accent-tint-2: var(--teal-100);
  --accent-ink: #0F766E;
  --ok: #047857; --ok-bg: #D1FAE5;
  --danger: #B91C1C; --danger-bg: #FEE2E2;
  --warn: #B45309; --warn-bg: #FEF3C7;
  --info: #1D4ED8; --info-bg: #DBEAFE;
  --muted-ink: #64748B; --muted-bg: #F1F5F9;

  /* 形状 */
  --r-xl: 24px; --r-lg: 20px; --r-md: 16px; --r-s: 12px; --r-xs: 10px;
  --sp-1: 6px; --sp-2: 10px; --sp-3: 14px; --sp-4: 18px; --sp-5: 22px; --sp-6: 28px;
  --h-field: 46px;
  --shadow-card: 0 30px 70px rgba(13, 60, 56, .12), 0 2px 8px rgba(15, 23, 42, .05);
  --shadow-soft: 0 8px 20px rgba(13, 148, 136, .10);
  --shadow-accent: 0 10px 24px rgba(13, 148, 136, .32);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--page);
  color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
}
::selection { background: rgba(45, 212, 191, .32); }
a { color: var(--accent); }
code { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.ic { width: 16px; height: 16px; flex-shrink: 0; }
/* 图标精灵容器：原型写的是内联 style，这里一律走 class（CSP 的 style-src 'self' 不放内联） */
.sprite { display: none; }
.mono { font-family: var(--mono); }
.sp { flex: 1; }
:focus-visible { outline: 2px solid var(--accent-lite); outline-offset: 2px; }

/* ============ 认证页 · 桌面分屏 ============ */
/* 一页的底：把 .split 居中，顶部压一点青色光晕（原型 frame 里的那层背景） */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 24px;
  background: radial-gradient(900px 420px at 50% -180px, rgba(13, 148, 136, .12), transparent 60%), var(--page);
}
.split {
  display: grid; grid-template-columns: 5fr 6fr;
  min-height: 560px; max-width: 1040px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-card);
}
.brand-side {
  background: linear-gradient(158deg, #0C3B37 0%, #0F766E 46%, #0D9488 78%, #15B8A6 100%);
  color: #fff; padding: 44px 42px; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.brand-side .glow {
  position: absolute; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%);
  right: -140px; bottom: -160px; pointer-events: none;
}
.brand-side .rings { position: absolute; right: -70px; bottom: -70px; opacity: .5; pointer-events: none; }
.brand-side .stars { position: absolute; top: 0; left: 0; pointer-events: none; }
.brand-side .logo { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; }
.brand-side .logo .wm { font-size: 18px; font-weight: 700; letter-spacing: .5px; color: #fff; }
.brand-side .logo .wm em { font-style: normal; font-weight: 400; opacity: .75; margin-left: 1px; font-size: 15px; }
/* 站徽：一枚 44×44 的「破晓」标记，形状写在 view/public/wordmark.html 里，尺寸与底色在这里分档 */
.mark { width: 28px; height: 28px; flex-shrink: 0; display: block; }
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.m-hero .mark { width: 32px; height: 32px; }
.mk-bg { fill: var(--accent); }
.brand-side .mk-bg, .m-hero .mk-bg { fill: rgba(255, 255, 255, .16); }
.brand-side .mark { width: 36px; height: 36px; }
.brand-hero { margin-top: auto; position: relative; z-index: 2; }
.brand-hero h3 { font-size: 34px; font-weight: 700; line-height: 1.32; letter-spacing: 1px; color: #fff; }
.brand-hero p { margin-top: 16px; font-size: 13.5px; line-height: 1.9; color: rgba(255, 255, 255, .82); max-width: 300px; }
.brand-foot {
  margin-top: 36px; display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: rgba(255, 255, 255, .72); position: relative; z-index: 2;
}
.brand-foot .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: #A7F3D0;
  box-shadow: 0 0 0 0 rgba(167, 243, 208, .7); animation: pulse 2.2s infinite; flex-shrink: 0;
}
/* 维护中 / 查不到状态：点换成琥珀，别一边写着「维护中」一边还是绿的心跳 */
.brand-foot .pulse.w { background: #FCD34D; box-shadow: 0 0 0 0 rgba(252, 211, 77, .7); }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(167, 243, 208, 0); } 100% { box-shadow: 0 0 0 0 rgba(167, 243, 208, 0); } }

.form-side { background: var(--card); padding: 44px 48px; display: flex; flex-direction: column; min-width: 0; }
/* 标题用 h1（测试与读屏都按 h1 认这一页是什么），字号仍取原型那档 */
.form-head h1, .form-head h2 { font-size: 26px; font-weight: 700; color: var(--ink-900); letter-spacing: .5px; }
.form-head p { font-size: 13px; color: var(--ink-500); margin-top: 8px; }

/* 选项卡 */
.tabs { display: flex; background: var(--sunk); border-radius: var(--r-s); padding: 4px; margin: 24px 0 20px; }
.tabs button {
  flex: 1; border: none; background: transparent; padding: 9px 0; min-height: 40px;
  font-size: 13px; font-weight: 600; color: var(--ink-500); border-radius: 9px; cursor: pointer;
  transition: all .25s; font-family: var(--font);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.tabs button svg { width: 15px; height: 15px; }
.tabs button.active { background: var(--raised); color: var(--accent-strong); box-shadow: 0 2px 8px rgba(15, 23, 42, .1); }
.tp { display: none; }
.tp.show { display: block; animation: fadein .3s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 输入框 */
.field {
  display: flex; align-items: center; gap: 10px; background: var(--field);
  border: 1.5px solid var(--line); border-radius: var(--r-s);
  padding: 0 14px; height: var(--h-field); margin-bottom: 14px; transition: all .2s;
}
.field:focus-within { border-color: var(--accent-lite); background: var(--card); box-shadow: 0 0 0 4px rgba(13, 148, 136, .12); }
.field svg { width: 17px; height: 17px; color: var(--ink-400); flex-shrink: 0; }
.field:focus-within svg.lead { color: var(--accent); }
.field input {
  border: none; outline: none; background: transparent; flex: 1; min-width: 0;
  font-size: 14px; color: var(--ink-900); font-family: var(--font); height: 100%;
}
.field input::placeholder { color: var(--ink-400); }
.field .captcha { width: 96px; height: 34px; border-radius: 8px; border: 1px solid var(--line); flex-shrink: 0; display: block; }
/* 34px 见方是给拇指留的：只包着 17px 图标的话手机上量出来 25px，低于 32 这条线 */
.field .eye { border: none; background: none; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; color: var(--ink-400); }
.field .eye:hover { color: var(--accent); }
.field .eye svg { width: 17px; height: 17px; }
/* 明文态靠 JS 在按钮上打 .revealed，两枚图标都在标记里、用 display 换 —— 内联 style 被 CSP 挡住，不能走那条 */
.field .eye .i-hide { display: none; }
.field .eye.revealed .i-see { display: none; }
.field .eye.revealed .i-hide { display: block; }
.field .btn-code {
  border: none; background: none; color: var(--accent); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: var(--font); white-space: nowrap; padding: 6px 2px;
}
.field .btn-code:hover { color: var(--accent-strong); }
.field .btn-code:disabled { color: var(--ink-400); cursor: not-allowed; }

.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 20px; flex-wrap: wrap; }
.check { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-700); cursor: pointer; user-select: none; min-height: 28px; }
.check input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
/* 行内链接的命中区：不加这点纵向内边距，手机上量出来 19~21px，够不到 24 这条线（WCAG 2.5.8）。
   只加 padding，不改 display，铺在段落里的 .link 不会因此把行盒撑开。 */
.link { font-size: 13px; color: var(--accent); text-decoration: none; font-weight: 500; padding: 4px 0; }
.link:hover { color: var(--accent-strong); text-decoration: underline; }

.btn-primary {
  width: 100%; height: var(--h-field); border: none; border-radius: var(--r-s); cursor: pointer;
  font-family: var(--font); background: linear-gradient(135deg, #14B8A6, #0D9488); color: #fff;
  font-size: 15px; font-weight: 600; letter-spacing: 6px;
  box-shadow: var(--shadow-accent); transition: all .25s; position: relative; overflow: hidden;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(13, 148, 136, .4); }
.btn-primary:active { transform: translateY(0); }
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%);
  transform: translateX(-120%); transition: transform .7s;
}
.btn-primary:hover::after { transform: translateX(120%); }

.btn-ghost {
  width: 100%; height: 42px; border: 1.5px solid var(--line); background: var(--card);
  border-radius: var(--r-s); font-size: 14px; font-weight: 500; color: var(--ink-700);
  cursor: pointer; font-family: var(--font); transition: all .2s;
}
.btn-ghost:hover { border-color: var(--ink-400); background: var(--field); }
/* 链接也要能长成这两个按钮的样子（公告页的「去登录」就是链接，不是提交） */
a.btn-primary, a.btn-ghost { display: flex; align-items: center; justify-content: center; text-decoration: none; }
/* 授权/公告页那两个按钮是整句文案，6 字距会把句子拉开变形 */
.auth-btns .btn-primary { letter-spacing: 2px; }

.divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.divider span { font-size: 12px; color: var(--ink-400); white-space: nowrap; }

.form-foot { margin-top: auto; padding-top: 26px; text-align: center; font-size: 13px; color: var(--ink-500); }
.form-foot a { color: var(--accent); text-decoration: none; font-weight: 600; padding: 4px 0; }

/* 注册步骤条 */
.steps { display: flex; align-items: center; margin: 22px 0; }
.step { display: flex; align-items: center; gap: 7px; }
.step .n {
  width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: var(--sunk); color: var(--ink-400);
  border: 1.5px solid var(--line); flex-shrink: 0;
}
.step .t { font-size: 12.5px; color: var(--ink-400); font-weight: 500; white-space: nowrap; }
.step.active .n { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 10px rgba(13, 148, 136, .35); }
.step.active .t { color: var(--ink-900); font-weight: 600; }
.step.done .n { background: var(--teal-100); border-color: var(--teal-300); color: var(--teal-700); }
.step.done .t { color: var(--ink-700); }
.step-line { flex: 1; height: 1.5px; background: var(--line); margin: 0 10px; border-radius: 2px; }

/* 密码强度 */
.pwd-strength { display: flex; align-items: center; gap: 8px; margin: -4px 0 14px; }
.pwd-strength .bars { display: flex; gap: 5px; flex: 1; }
.pwd-strength .bars i { flex: 1; height: 4px; border-radius: 3px; background: var(--line-soft); transition: all .3s; }
.pwd-strength .bars i.on.lv1 { background: #EF4444; }
.pwd-strength .bars i.on.lv2 { background: #F59E0B; }
.pwd-strength .bars i.on.lv3 { background: #10B981; }
.pwd-strength span { font-size: 11px; color: var(--ink-700); font-weight: 600; white-space: nowrap; }
.pwd-strength span.lv1 { color: #EF4444; }
.pwd-strength span.lv2 { color: #F59E0B; }
.pwd-strength span.lv3 { color: #10B981; }

/* 协议勾选 */
.agree { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--ink-500); line-height: 1.6; margin: 2px 0 18px; cursor: pointer; }
.agree input { accent-color: var(--accent); width: 15px; height: 15px; margin-top: 2px; flex-shrink: 0; cursor: pointer; }
.agree a { color: var(--accent); text-decoration: none; }

/* ============ 授权确认页 ============ */
.auth-bg {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px;
  background: radial-gradient(600px 300px at 50% 0%, rgba(13, 148, 136, .14), transparent 65%), var(--page);
}
.auth-card {
  width: 430px; max-width: 100%; background: var(--card); border-radius: var(--r-xl);
  padding: 36px 36px 30px; box-shadow: var(--shadow-card); border: 1px solid rgba(13, 148, 136, .1);
}
.auth-apps { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 8px; }
.app-icon {
  width: 56px; height: 56px; border-radius: var(--r-s); display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #1E293B, #0F172A); border: 1px solid rgba(245, 158, 11, .35);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .22); color: #fff; font-size: 22px; font-weight: 700; flex-shrink: 0;
}
.app-icon.self { background: linear-gradient(150deg, #0F766E, #14B8A6); border-color: rgba(45, 212, 191, .4); }
/* 公告页/403 页顶部那枚 chip：没有应用图标可用，就放一枚语义图标，底色跟着语义走 */
.app-icon.bad { background: linear-gradient(150deg, #B91C1C, #EF4444); border-color: rgba(239, 68, 68, .4); }
.app-icon.warn { background: linear-gradient(150deg, #B45309, #F59E0B); border-color: rgba(245, 158, 11, .4); }
.app-icon svg { width: 26px; height: 26px; }
.auth-link { color: var(--ink-400); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.auth-link svg { width: 22px; height: 22px; }
.auth-link span { font-size: 9px; letter-spacing: 1px; color: var(--ink-400); }
.auth-card h1, .auth-card h2 { text-align: center; font-size: 20px; font-weight: 700; color: var(--ink-900); margin-top: 16px; }
.auth-sub { text-align: center; font-size: 12.5px; color: var(--ink-500); margin-top: 8px; line-height: 1.7; }
.auth-sub b { color: var(--accent-strong); }
.account {
  display: flex; align-items: center; gap: 12px; background: var(--accent-tint);
  border: 1px solid var(--accent-tint-2); border-radius: 14px; padding: 12px 14px; margin: 20px 0 10px;
}
.avatar {
  border-radius: 50%; background: linear-gradient(135deg, #14B8A6, #0F766E); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
  width: 40px; height: 40px; font-size: 16px; box-shadow: 0 4px 10px rgba(13, 148, 136, .3);
}
.account .info { flex: 1; min-width: 0; }
.account .info .nm { font-size: 13.5px; font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account .info .id { font-size: 11px; color: var(--ink-400); margin-top: 2px; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account .switch { font-size: 12px; color: var(--accent); font-weight: 600; display: flex; align-items: center; gap: 4px; white-space: nowrap; flex-shrink: 0; text-decoration: none; min-height: 24px; }
.account .switch svg { width: 13px; height: 13px; }
.perm-title { font-size: 12px; color: var(--ink-400); margin: 16px 0 10px; font-weight: 500; }
.perms { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
/* 一项权限下面挂着两三行说明，图标要顶齐而不是居中（两行时居中的图标会飘在半空） */
.perms li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink-700); }
.perms .pi {
  width: 30px; height: 30px; border-radius: 9px; background: var(--accent-tint);
  border: 1px solid var(--accent-tint-2); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--accent);
}
.perms .pi svg { width: 15px; height: 15px; }
.perms small { display: block; font-size: 11px; color: var(--ink-400); margin-top: 1px; }
.perms small.bad { color: var(--danger); }
.auth-btns { display: flex; flex-direction: column; gap: 10px; }
.auth-btns .btn-primary { letter-spacing: 4px; }
.auth-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; font-size: 11px; color: var(--ink-400); }
.auth-note svg { width: 13px; height: 13px; color: var(--accent-lite); }

/* ============ 通用组件（稿子的「组件 COMPONENT」那一格） ============ */
.tag {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
  padding: 2px 9px; border-radius: 99px; white-space: nowrap; line-height: 18px;
}
.tag.s, .tag-active, .tag-ok { background: var(--ok-bg); color: var(--ok); }
.tag.d, .tag-disabled, .tag-locked, .tag-frozen { background: var(--danger-bg); color: var(--danger); }
.tag.w, .tag-pending, .tag-admin { background: var(--warn-bg); color: var(--warn); }
.tag.i, .tag-public { background: var(--info-bg); color: var(--info); }
.tag.n, .tag-off { background: var(--muted-bg); color: var(--muted-ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--r-xs); font-family: var(--font); font-weight: 600; cursor: pointer;
  border: none; transition: .2s; min-height: 34px; text-decoration: none;
}
.btn svg { width: 13px; height: 13px; }
.btn-p { background: linear-gradient(135deg, #14B8A6, #0D9488); color: #fff; font-size: 12.5px; padding: 8px 16px; box-shadow: 0 6px 16px rgba(13, 148, 136, .28); }
.btn-p:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(13, 148, 136, .36); }
.btn-l { background: var(--card); border: 1.5px solid var(--line); color: var(--ink-700); font-size: 12.5px; padding: 7px 14px; font-weight: 500; }
.btn-l:hover { border-color: var(--ink-400); }
.btn-d { background: var(--card); border: 1.5px solid #FECACA; color: #DC2626; font-size: 12px; padding: 6px 12px; font-weight: 500; }
.btn-d:hover { background: var(--danger-bg); }
.btn-xs { min-height: 30px; padding: 4px 9px; font-size: 11.5px; }

.sw-tog {
  width: 40px; height: 22px; border-radius: 99px; background: #CBD5E1; position: relative;
  cursor: pointer; transition: .25s; border: none; flex-shrink: 0;
}
.sw-tog::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: .25s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.sw-tog.on { background: var(--accent-lite); }
.sw-tog.on::after { left: 20px; }

/* 提示条（稿子没有专门的状态条，用它的卡片语言写：圆角 + 淡底 + 13px） */
.alert { font-size: 13px; line-height: 1.7; background: var(--danger-bg); color: var(--danger); border-radius: var(--r-s); padding: 11px 14px; margin-bottom: 14px; }
.notice { font-size: 13px; line-height: 1.7; background: var(--accent-tint); color: var(--accent-strong); border: 1px solid var(--accent-tint-2); border-radius: var(--r-s); padding: 11px 14px; margin-bottom: 14px; }
.hint { font-size: 12px; color: var(--ink-400); line-height: 1.7; }
.fine { font-size: 12px; color: var(--ink-400); line-height: 1.75; }
.meta { font-size: 11px; color: var(--ink-400); font-family: var(--mono); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.actions .btn-primary, .actions .btn-ghost { width: auto; padding: 0 22px; }
.foot { font-size: 12px; color: var(--ink-400); line-height: 1.8; }
.foot a { color: var(--accent); text-decoration: none; }
.field em.alert { display: block; font-style: normal; margin: 0 0 14px; }

/* 反滥用蜜罐：真人看不见、Tab 不到，但不能是 display:none（脚本会跳过隐藏字段） */
.hp { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* 表格 */
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; font-size: 11.5px; color: var(--ink-500); font-weight: 500; padding: 9px 12px; background: var(--field); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th:first-child { border-radius: 8px 0 0 0; }
.tbl th:last-child { border-radius: 0 8px 0 0; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); color: var(--ink-700); vertical-align: middle; }
.tbl td.mono { white-space: nowrap; font-family: var(--mono); font-size: 11.5px; }
/* UA 串就放在 mono 单元格里，跟着 nowrap 一路顶到 800 多 px：这类长句在该折的地方就得折 */
.tbl td.mono .fine, .tbl td.mono .meta { white-space: normal; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--field); }
.tbl .u { display: flex; align-items: center; gap: 9px; }
.tbl .u .avatar { width: 30px; height: 30px; font-size: 12px; box-shadow: none; }
.tbl .u .nm { font-weight: 600; color: var(--ink-900); font-size: 12.5px; }
.tbl .u .id { font-size: 10.5px; color: var(--ink-400); font-family: var(--mono); }
/* 讲道理那两张表（列契约、逐行结论）里那一列是人话，横向滑着读不下去：让它们折行。
   数据那一张（最近几批）照旧整张横向滑 —— 那一类长串（时间/摘要）断了比不读更难对 */
.tbl.wrap { width: 100%; }
.tbl.wrap td, .tbl.wrap th { white-space: normal; }

/* 卡片 */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; }
/* 卡片自己承担横向溢出，不把整页撑宽：两张表并排时（/admin/user/N 那页 1280 屏）窄栏里塞一张
   829px 的会话表，页宽就到 1725 了 —— 让它卡在卡片里滑，比让整页左右跑好读。 */
.content .card, .ua-main .card { overflow-x: auto; }
.card .ch { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.card .ch h4 { font-size: 14.5px; font-weight: 700; color: var(--ink-900); display: flex; align-items: center; gap: 8px; }
.card .ch h4 .ic { color: var(--accent); }
.card .ch .lnk { font-size: 12px; color: var(--accent); text-decoration: none; font-weight: 600; padding: 4px 0; }
.card .cs { font-size: 12px; color: var(--ink-400); margin-bottom: 12px; }
.card + .card { margin-top: 14px; }

/* 筛选与分页 */
.filters { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.filters .f-in { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-xs); height: 36px; padding: 0 12px; min-width: 210px; color: var(--ink-400); }
.filters .f-in:focus-within { border-color: var(--accent-glow); }
.filters .f-in input { border: none; background: none; outline: none; font-size: 12.5px; font-family: var(--font); width: 100%; color: var(--ink-900); height: 100%; }
.filters .f-sel { display: flex; align-items: center; gap: 6px; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-xs); height: 36px; padding: 0 12px; font-size: 12.5px; color: var(--ink-700); }
.filters .f-sel .ic { width: 13px; height: 13px; color: var(--ink-400); }
/* 不铺 height:100% 的话 select 只有 19px 高，掉在 36px 的槽里像没对齐，触屏也难点中 */
.filters .f-sel select { border: none; background: none; outline: none; height: 100%; padding: 0; font-size: 12.5px; font-family: var(--font); color: var(--ink-900); cursor: pointer; }
.filters .f-sel select:focus-visible { outline: 2px solid var(--accent-lite); outline-offset: 2px; border-radius: 4px; }
.filters .f-btns { margin-left: auto; display: flex; gap: 8px; }
.pager { display: flex; align-items: center; gap: 6px; justify-content: flex-end; padding: 14px 2px 0; font-size: 12px; color: var(--ink-500); flex-wrap: wrap; }
.pager .info { margin-right: auto; }
.pager a, .pager span.gap { min-width: 28px; height: 28px; padding: 0 6px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink-700); text-decoration: none; font-size: 12px; transition: .15s; }
.pager a:hover { border-color: var(--accent-glow); color: var(--accent-strong); }
.pager a.cur { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.pager span.gap { border: none; background: none; }

/* 统计卡 */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 15px 17px; }
.stat .t { font-size: 11.5px; color: var(--ink-500); display: flex; align-items: center; gap: 6px; font-weight: 500; }
.stat .t .ic { width: 14px; height: 14px; color: var(--accent-lite); }
.stat .v { font-size: 24px; font-weight: 700; color: var(--ink-900); margin-top: 8px; font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.stat .d { font-size: 11px; margin-top: 6px; display: flex; align-items: center; gap: 4px; font-weight: 600; }
.stat .d .ic { width: 12px; height: 12px; }
.stat .d.up { color: #059669; }
.stat .d.down { color: #DC2626; }
.stat .d .cmp { color: var(--ink-400); font-weight: 400; }

/* ============ 协议正文页（/legal/terms、/legal/privacy） ============ */
.doc-page { min-height: 100vh; padding: 40px 20px 64px; }
.doc {
  max-width: 780px; margin: 0 auto; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 36px 44px; box-shadow: var(--shadow-card);
}
.doc h1 { font-size: 24px; font-weight: 700; color: var(--ink-900); letter-spacing: .5px; }
.doc h2 { font-size: 15px; font-weight: 700; color: var(--ink-900); margin: 26px 0 8px; }
.doc p, .doc li { font-size: 13.5px; line-height: 1.9; color: var(--ink-700); }
.doc p + p { margin-top: 10px; }
.doc ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.doc .draft {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 12px;
  border-radius: 99px; background: var(--warn-bg); color: var(--warn); font-size: 12px; font-weight: 600;
}
.doc-back { max-width: 780px; margin: 18px auto 0; font-size: 13px; }

/* ============ 用户端外壳 ============ */
.ua-shell { min-height: 100vh; display: flex; flex-direction: column; }
.ua-top {
  height: 56px; background: var(--card); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 24px; padding: 0 22px; flex-wrap: nowrap; overflow: hidden;
}
.ua-top .logo { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.ua-top .logo .wm { font-size: 15px; font-weight: 700; color: var(--ink-900); white-space: nowrap; }
.ua-top .logo .wm em { font-style: normal; font-weight: 400; color: var(--ink-400); font-size: 12px; margin-left: 1px; }
.ua-top nav { display: flex; gap: 20px; font-size: 13px; color: var(--ink-700); min-width: 0; overflow-x: auto; align-items: center; }
/* 顶栏导航是主导航，命中的只有 21px 高的一行字不够：上下各给 7px，再用负 margin 抵回来，
   于是点得着、位置没动，那条 .on 的下划线还是贴着栏底（bottom 从 -17 收到 -10 就是这个道理） */
.ua-top nav a { color: var(--ink-700); text-decoration: none; white-space: nowrap; padding: 7px 0; margin: -7px 0; }
.ua-top nav a.on { color: var(--accent-strong); font-weight: 600; position: relative; }
.ua-top nav a.on::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -10px; width: 18px; height: 2.5px; border-radius: 2px; background: var(--accent-lite); }
.ua-top .search { display: flex; align-items: center; gap: 7px; background: var(--sunk); border-radius: var(--r-xs); height: 32px; padding: 0 12px; width: 180px; color: var(--ink-400); flex-shrink: 0; }
.ua-top .search input { border: none; background: none; outline: none; font-size: 12px; font-family: var(--font); width: 100%; color: var(--ink-900); }
.ua-top .bell { width: 32px; height: 32px; border-radius: var(--r-xs); display: flex; align-items: center; justify-content: center; color: var(--ink-500); position: relative; text-decoration: none; flex-shrink: 0; }
.ua-top .bell:hover { background: var(--sunk); }
.ua-top .bell i { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #EF4444; border: 1.5px solid var(--card); }
.ua-top .me { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ua-top .me .nm { font-size: 12.5px; font-weight: 600; color: var(--ink-900); white-space: nowrap; }
.ua-top .me .avatar { width: 32px; height: 32px; font-size: 13px; box-shadow: none; }

.ua-body { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 18px; padding: 20px; align-items: start; }
.ua-nav { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px; height: max-content; min-width: 0; }
.ua-nav .hd { font-size: 10px; letter-spacing: 2px; color: var(--ink-400); font-weight: 700; padding: 6px 10px 8px; }
.ua-nav a { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: var(--r-xs); font-size: 13px; color: var(--ink-700); text-decoration: none; transition: .15s; min-height: 40px; }
.ua-nav a .ic { width: 15px; height: 15px; color: var(--ink-400); }
.ua-nav a:hover { background: var(--accent-tint); }
.ua-nav a.on { background: var(--accent-tint); color: var(--accent-strong); font-weight: 600; }
.ua-nav a.on .ic { color: var(--accent); }
.ua-nav a .bd { margin-left: auto; background: var(--accent-tint-2); color: var(--accent-strong); font-size: 10px; font-weight: 700; padding: 0 6px; border-radius: 99px; line-height: 16px; }
.ua-nav a.out { color: #DC2626; }
.ua-nav a.out .ic { color: #DC2626; }
.ua-nav hr { border: none; border-top: 1px solid var(--line-soft); margin: 8px 6px; }

.ua-main { min-width: 0; }
.greet { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.greet h3 { font-size: 21px; font-weight: 700; color: var(--ink-900); letter-spacing: .3px; }
.greet p { font-size: 12.5px; color: var(--ink-500); margin-top: 5px; }
.greet .date { font-size: 12px; color: var(--ink-400); }

/* 安全评分 */
.score {
  background: linear-gradient(120deg, #0C3B37, #0F766E 60%, #0D9488); border-radius: 18px;
  padding: 20px 22px; color: #fff; display: flex; align-items: center; gap: 22px;
  margin-bottom: 16px; position: relative; overflow: hidden; flex-wrap: wrap;
}
.score .glow { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 65%); right: -90px; top: -140px; }
.score .ring { position: relative; width: 76px; height: 76px; flex-shrink: 0; z-index: 2; }
.score .ring svg { transform: rotate(-90deg); display: block; }
.score .ring .num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score .ring .num b { font-size: 21px; font-weight: 700; line-height: 1; color: #fff; }
.score .ring .num span { font-size: 9px; opacity: .75; margin-top: 2px; }
.score .stxt { z-index: 2; flex: 1; min-width: 180px; }
.score .stxt h4 { font-size: 16px; font-weight: 700; color: #fff; }
.score .stxt p { font-size: 12px; color: rgba(255, 255, 255, .82); margin-top: 6px; line-height: 1.6; max-width: 380px; }
.score .sbtn { margin-left: auto; z-index: 2; background: #fff; color: var(--accent-strong); border: none; border-radius: var(--r-xs); font-size: 12.5px; font-weight: 700; padding: 10px 18px; cursor: pointer; font-family: var(--font); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); transition: .2s; white-space: nowrap; text-decoration: none; }
.score .sbtn:hover { transform: translateY(-1px); }

.ua-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.ua-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; display: flex; align-items: center; gap: 13px; transition: .2s; text-decoration: none; }
.ua-stat:hover { border-color: var(--teal-300); box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.ua-stat .ui { width: 40px; height: 40px; border-radius: var(--r-s); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ua-stat .ui .ic { width: 18px; height: 18px; }
.ua-stat .v { font-size: 19px; font-weight: 700; color: var(--ink-900); }
.ua-stat .t { font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }

.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.quick a { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 9px; text-decoration: none; font-size: 12.5px; font-weight: 600; color: var(--ink-700); transition: .2s; }
.quick a .ic { width: 18px; height: 18px; color: var(--accent); }
.quick a:hover { border-color: var(--teal-300); box-shadow: var(--shadow-soft); transform: translateY(-1px); color: var(--accent-strong); }

/* 瓦片上那一枚小色块：稿子写的是内联 style，本站 CSP 是 style-src 'self'，内联样式会被挡掉，
   所以颜色只能做成 class。取的都是语义令牌的底色与字色，暗色下自动跟着换。 */
.ua-stat .ui.t, .bind-row .bi.t { background: var(--accent-tint); color: var(--accent); }
.ua-stat .ui.b, .bind-row .bi.b { background: var(--info-bg); color: var(--info); }
.ua-stat .ui.a, .bind-row .bi.a { background: var(--warn-bg); color: var(--warn); }
.ua-stat .ui.d, .bind-row .bi.d { background: var(--danger-bg); color: var(--danger); }

/* 收件箱（pw_message 那一页） */
.msg { display: flex; align-items: flex-start; gap: 13px; padding: 15px 4px; border-bottom: 1px dashed var(--line-soft); }
.msg:last-child { border-bottom: none; }
.msg .mi { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--accent-tint); color: var(--accent); }
.msg .mi .ic { width: 17px; height: 17px; }
.msg .mt { flex: 1; min-width: 0; }
.msg .t1 { font-size: 13.5px; font-weight: 600; color: var(--ink-900); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg .t2 { font-size: 12px; color: var(--ink-500); margin-top: 6px; line-height: 1.75; overflow-wrap: anywhere; }
.msg .t3 { font-size: 11px; color: var(--ink-400); margin-top: 7px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 7px; }
.msg .acts { display: flex; gap: 8px; align-items: flex-start; flex-shrink: 0; }
.msg.read .mi, .msg.read .dot { opacity: .45; }
.msg.read .t1 { font-weight: 500; color: var(--ink-700); }

/* 后台表单里的原生控件：稿子只画了 input，而后台还有 textarea / select / 复选框这一批。
   不给样式就会掉回浏览器默认（灰底黑框），跟同一页上的 .inp 明显不是一家的。 */
.fld textarea, .fld select, .field textarea, .field select {
  width: 100%; box-sizing: border-box; font-family: var(--font); font-size: 13px; color: var(--ink-900);
  background: var(--field); border: 1.5px solid var(--line); border-radius: var(--r-xs); padding: 10px 12px;
}
.fld textarea:focus-visible, .fld select:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  border-color: var(--accent-lite); background: var(--card); outline: none;
}
.fld textarea { min-height: 74px; resize: vertical; line-height: 1.7; }
.fld .inp select { border: none; background: none; outline: none; flex: 1; min-width: 0; font-size: 13px; font-family: var(--font); color: var(--ink-900); height: 100%; padding: 0; }
fieldset.fld { border: 1px solid var(--line-soft); border-radius: var(--r-s); padding: 12px 14px 14px; margin: 0 0 14px; display: block; }
fieldset.fld > legend { font-size: 12px; font-weight: 600; color: var(--ink-700); padding: 0 6px; }

/* 定义-值那一张小表（后台详情与「只显示一次」那块都用它） */
.kv { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); gap: 7px 14px; font-size: 12.5px; margin: 10px 0 0; }
.kv dt { color: var(--ink-400); }
.kv dd { margin: 0; color: var(--ink-900); overflow-wrap: anywhere; }
.secret-once { background: var(--accent-tint); border: 1px solid var(--accent-tint-2); border-radius: var(--r-s); padding: 14px 16px; margin-bottom: 14px; }
.secret-once h2 { font-size: 14.5px; font-weight: 700; color: var(--ink-900); }

/* 设置表单 */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fld > label { font-size: 12px; font-weight: 600; color: var(--ink-700); }
.fld .inp { display: flex; align-items: center; gap: 8px; background: var(--field); border: 1.5px solid var(--line); border-radius: var(--r-xs); height: 40px; padding: 0 12px; transition: .2s; }
.fld .inp:focus-within { border-color: var(--accent-lite); background: var(--card); box-shadow: 0 0 0 4px rgba(13, 148, 136, .1); }
.fld .inp .ic { width: 15px; height: 15px; color: var(--ink-400); }
.fld .inp input { border: none; background: none; outline: none; flex: 1; min-width: 0; font-size: 13px; font-family: var(--font); color: var(--ink-900); height: 100%; }
.fld .inp input::placeholder { color: var(--ink-400); }
.fld .hint { font-size: 11px; color: var(--ink-400); }

/* 文件那一颗是浏览器自己画的，换不掉：给它主题色与形状，别让它以默认白底站在深色表单里。
   选完之后的文件名也只有这一颗显示得出来，所以不拿假的 input 去替它（替了就看不见选了哪份） */
.fld input[type="file"] {
  font: 13px var(--font); color: var(--ink-700); background: var(--field);
  border: 1.5px solid var(--line); border-radius: var(--r-xs); padding: 9px 10px;
  color-scheme: light dark;
}
.fld input[type="file"]:focus-visible { border-color: var(--accent-lite); box-shadow: 0 0 0 4px rgba(13, 148, 136, .1); outline: none; }
.fld input[type="file"]::file-selector-button {
  font: 500 12.5px var(--font); color: var(--ink-700); background: var(--card);
  border: 1.5px solid var(--line); border-radius: var(--r-xs); padding: 6px 12px; margin-right: 10px; cursor: pointer;
}
.fld input[type="file"]::file-selector-button:hover { border-color: var(--ink-400); }

.bind-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.bind-row:last-child { border-bottom: none; padding-bottom: 0; }
.bind-row .bi { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bind-row .bi .ic { width: 17px; height: 17px; }
.bind-row .bt { flex: 1; min-width: 160px; }
.bind-row .bt .t1 { font-size: 13.5px; font-weight: 600; color: var(--ink-900); }
.bind-row .bt .t2 { font-size: 11.5px; color: var(--ink-400); margin-top: 2px; }
.bind-row .bv { font-size: 13px; color: var(--ink-700); font-weight: 500; margin-right: 4px; }

.app-row { display: flex; align-items: center; gap: 14px; padding: 15px 4px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.app-row:last-child { border-bottom: none; }
.app-row .ai { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(150deg, #0F766E, #14B8A6); color: #fff; font-weight: 700; font-size: 18px; }
.app-row .ai .ic { width: 20px; height: 20px; }
.app-row .an { flex: 1; min-width: 160px; }
.app-row .an .t1 { font-size: 13.5px; font-weight: 600; color: var(--ink-900); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.app-row .an .t2 { font-size: 11.5px; color: var(--ink-400); margin-top: 3px; }
.app-row .perm { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.app-row .acts { display: flex; gap: 8px; flex-shrink: 0; }

/* ============ 管理后台外壳 ============ */
.app { display: grid; grid-template-columns: 212px minmax(0, 1fr); min-height: 100vh; }
.side { background: linear-gradient(180deg, #0B3633 0%, #0F5C55 55%, #0F766E 100%); color: #fff; padding: 16px 12px; display: flex; flex-direction: column; min-width: 0; }
.side .logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; border-bottom: 1px solid rgba(255, 255, 255, .13); margin-bottom: 10px; }
.side .logo .wm { font-size: 14.5px; font-weight: 700; line-height: 1.2; color: #fff; }
.side .logo .wm em { font-style: normal; font-weight: 400; opacity: .65; font-size: 10px; display: block; letter-spacing: 2.5px; margin-top: 2px; }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu .grp { font-size: 9.5px; letter-spacing: 2.5px; color: rgba(255, 255, 255, .42); margin: 12px 8px 5px; font-weight: 700; }
.menu a { display: flex; align-items: center; gap: 10px; padding: 8.5px 10px; border-radius: var(--r-xs); font-size: 12.5px; color: rgba(255, 255, 255, .76); text-decoration: none; transition: .18s; min-height: 40px; }
.menu a .ic { width: 15px; height: 15px; opacity: .85; }
.menu a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.menu a.on { background: rgba(255, 255, 255, .15); color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.menu a .bd { margin-left: auto; background: #F59E0B; color: #fff; font-size: 9.5px; padding: 0 6px; border-radius: 99px; line-height: 15px; font-weight: 700; }
.side .sfoot { margin-top: auto; padding: 12px 10px 4px; border-top: 1px solid rgba(255, 255, 255, .13); }
.side .sfoot .u { display: flex; align-items: center; gap: 9px; }
.side .sfoot .avatar { width: 30px; height: 30px; font-size: 12px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.side .sfoot .nm { font-size: 12px; font-weight: 600; color: #fff; }
.side .sfoot .rl { font-size: 10px; color: rgba(255, 255, 255, .6); margin-top: 1px; }
.side .sfoot a { color: rgba(255, 255, 255, .72); font-size: 11px; text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
.side .sfoot a:hover { color: #fff; }

.main { background: var(--page); display: flex; flex-direction: column; min-width: 0; }
.topbar { height: 52px; background: var(--card); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; padding: 0 20px; flex-shrink: 0; }
.topbar .crumb { font-size: 13px; color: var(--ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .crumb b { color: var(--ink-900); font-weight: 600; }
.topbar .tsearch { display: flex; align-items: center; gap: 7px; background: var(--sunk); border-radius: 9px; height: 30px; padding: 0 11px; width: 170px; color: var(--ink-400); flex-shrink: 0; }
.topbar .tsearch input { border: none; background: none; outline: none; font-size: 11.5px; font-family: var(--font); width: 100%; color: var(--ink-900); }
.topbar .tbtn { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--ink-500); position: relative; text-decoration: none; flex-shrink: 0; }
.topbar .tbtn:hover { background: var(--sunk); }
.topbar .tbtn i { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #EF4444; border: 1.5px solid var(--card); }
.topbar .tbtn.lamp-bad i { background: #DC2626; }
.topbar .tbtn.lamp-warn i { background: #F59E0B; }
.content { padding: 20px; flex: 1; min-width: 0; }

/* 趋势图卡 */
.chart-card { margin-bottom: 16px; }
.chart-card .legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--ink-500); flex-wrap: wrap; }
.chart-card .legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.chart-card .legend i.c1 { background: var(--accent); }
.chart-card .legend i.c2 { background: var(--accent-glow); }
.chart-card svg { width: 100%; height: 200px; display: block; }
/* 小图：手机仪表板与后台侧栏那张 110 高的，靠 class 而不靠内联 style（CSP 挡内联） */
.chart-card svg.spark, svg.spark { width: 100%; height: 110px; display: block; }
/* 图上的字与线全部由 CSS 上色（passport.js 只写 class）：暗色面板下这才是能看清的对比度 */
svg .ax { font-size: 9px; fill: var(--ink-400); }
svg .grid { stroke: var(--line-soft); stroke-dasharray: 3 4; }
svg .curve { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
svg .pt { fill: var(--card); stroke: var(--accent); stroke-width: 1.5; }
svg .pt.last { fill: var(--accent); }
svg .g0 { stop-color: var(--accent-lite); stop-opacity: .3; }
svg .g1 { stop-color: var(--accent-lite); stop-opacity: .02; }

.grid2 { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.srv { display: flex; flex-direction: column; gap: 10px; }
.srv .row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-700); padding: 9px 0; border-bottom: 1px dashed var(--line-soft); }
.srv .row:last-child { border: none; }
.srv .row .dot { width: 8px; height: 8px; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .15); flex-shrink: 0; }
.srv .row .dot.w { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245, 158, 11, .15); }
.srv .row .dot.d { background: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .15); }
.srv .row b { margin-left: auto; color: var(--ink-900); font-weight: 600; font-variant-numeric: tabular-nums; }
.srv .row .tag { margin-left: auto; }
/* 服务状态那一排瓦片 */
.srv-tiles { display: flex; gap: 8px; flex-wrap: wrap; }
.srv-tile { flex: 1; min-width: 130px; display: flex; align-items: center; gap: 9px; background: var(--field); border-radius: var(--r-xs); padding: 9px 12px; text-decoration: none; transition: .2s; }
.srv-tile:hover { background: var(--sunk); }
.srv-tile .dot { width: 8px; height: 8px; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .15); flex-shrink: 0; }
.srv-tile .dot.w { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245, 158, 11, .15); }
.srv-tile .dot.d { background: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .15); }
.srv-tile .k { font-size: 11px; color: var(--ink-500); }
.srv-tile .v { font-size: 12.5px; font-weight: 700; color: var(--ink-900); }

/* 应用卡片网格 */
.apps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.app-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; transition: .2s; }
.app-card:hover { border-color: var(--teal-300); box-shadow: 0 10px 26px rgba(13, 148, 136, .1); }
.app-card .ac-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.app-card .ac-h .ai { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(150deg, #0F766E, #14B8A6); color: #fff; font-weight: 700; font-size: 18px; }
.app-card .ac-h .ai .ic { width: 20px; height: 20px; }
.app-card .ac-h .nm { font-size: 14px; font-weight: 700; color: var(--ink-900); }
.app-card .ac-h .nm .tag { margin-left: 8px; vertical-align: 2px; }
.app-card .ac-h .id { font-size: 10.5px; color: var(--ink-400); font-family: var(--mono); margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.app-card .kv { display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: var(--ink-700); padding: 12px 0; border-top: 1px dashed var(--line-soft); }
.app-card .kv .r { display: flex; gap: 8px; min-width: 0; }
.app-card .kv .r .k { color: var(--ink-400); width: 68px; flex-shrink: 0; }
.app-card .kv .r .v { font-family: var(--mono); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.app-card .kv .r .v.t { font-family: var(--font); font-size: 12px; white-space: normal; }
.app-card .ac-f { display: flex; gap: 8px; border-top: 1px dashed var(--line-soft); padding-top: 12px; flex-wrap: wrap; }
.app-add { border: 1.8px dashed #B9E4DC; border-radius: var(--r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; min-height: 212px; transition: .2s; background: rgba(240, 253, 250, .6); text-decoration: none; }
.app-add:hover { background: var(--accent-tint); border-color: var(--accent-glow); }
.app-add .plus { width: 42px; height: 42px; border-radius: 50%; background: var(--card); border: 1.5px solid #B9E4DC; display: flex; align-items: center; justify-content: center; }
.app-add .plus .ic { width: 18px; height: 18px; }
.app-add small { font-size: 11px; color: var(--ink-400); font-weight: 400; }

/* 巡检表 */
.health-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px dashed var(--line-soft); }
.health-row:last-child { border-bottom: none; }
.health-row .hl { flex: 1; min-width: 0; }
.health-row .ht { font-size: 13px; font-weight: 600; color: var(--ink-900); }
.health-row .hn { font-size: 11.5px; color: var(--ink-400); margin-top: 4px; line-height: 1.6; }
.health-row .hn code { color: var(--accent-strong); }
.health-next { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.sect-title { font-size: 11px; color: var(--ink-400); font-weight: 700; letter-spacing: 2px; margin: 18px 4px 8px; }

/* ============ 移动端（同一批组件的窄屏形态） ============ */
/* 认证页：破晓渐变头图 + 底部白卡 */
.m-hero { background: linear-gradient(165deg, #0C3B37 0%, #0F766E 52%, #0D9488 88%); padding: 6px 24px 46px; position: relative; color: #fff; }
.m-hero .wave { position: absolute; bottom: -1px; left: 0; width: 100%; display: block; }
.m-brand { display: flex; align-items: center; gap: 10px; }
.m-brand .wm { font-size: 16px; font-weight: 700; color: #fff; }
.m-brand .wm em { font-style: normal; font-weight: 400; opacity: .75; font-size: 13px; margin-left: 1px; }
.m-hero .slogan { margin-top: 26px; font-size: 21px; font-weight: 700; letter-spacing: 1px; position: relative; z-index: 2; color: #fff; }
.m-hero .slogan-sub { margin-top: 8px; font-size: 11.5px; color: rgba(255, 255, 255, .78); position: relative; z-index: 2; letter-spacing: .5px; }
.m-body { background: var(--card); padding: 24px 22px 20px; margin-top: -28px; position: relative; z-index: 5; border-radius: var(--r-xl) var(--r-xl) 0 0; }
.m-body .tabs { margin: 0 0 16px; }
.m-body .steps .step .t { font-size: 11.5px; }
.m-body .steps .step-line { margin: 0 7px; }
.m-body .steps .step .n { width: 22px; height: 22px; font-size: 11px; }
.m-foot { padding: 16px 22px 22px; text-align: center; font-size: 12.5px; color: var(--ink-500); background: var(--card); }
.m-foot a { color: var(--accent); font-weight: 600; text-decoration: none; }
/* 移动授权页 */
.m-auth { padding: 20px 18px 24px; background: var(--card); min-height: 100%; display: flex; flex-direction: column; }
.m-auth .auth-apps { margin-bottom: 2px; }
.m-auth .app-icon { width: 50px; height: 50px; border-radius: 14px; font-size: 19px; }
.m-auth h2 { text-align: center; font-size: 18px; font-weight: 700; color: var(--ink-900); margin-top: 14px; }
.m-auth .auth-sub { font-size: 12px; }
.m-auth .account { margin: 16px 0 4px; }
.m-auth .account .avatar { width: 36px; height: 36px; font-size: 14px; }
.m-auth .account .info .nm { font-size: 12.5px; }
.m-auth .account .info .id { font-size: 10px; }
.m-auth .account .switch { font-size: 11px; }
.m-auth .perm-title { font-size: 11px; margin: 12px 0 8px; }
.m-auth .perms { gap: 8px; }
.m-auth .perms li { font-size: 12px; }
.m-auth .perms .pi { width: 26px; height: 26px; }
.m-auth .perms .pi svg { width: 13px; height: 13px; }
.m-auth .perms small { font-size: 10px; }
.m-auth .auth-btns { margin-top: auto; padding-top: 18px; }
.m-auth .auth-btns .btn-primary { height: 44px; font-size: 14px; letter-spacing: 3px; }
.m-auth .auth-btns .btn-ghost { height: 40px; font-size: 13px; }
.m-auth .auth-note { margin-top: 12px; font-size: 10px; }

/* 移动内页：白顶栏 + 列表卡 + 底部导航 */
.m-top { height: 48px; background: var(--card); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; padding: 0 14px; font-size: 15px; font-weight: 700; color: var(--ink-900); position: sticky; top: 0; z-index: 40; }
.m-top .bk { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--ink-700); border-radius: 8px; text-decoration: none; flex-shrink: 0; }
.m-top .bk:hover { background: var(--sunk); }
.m-top .bk .ic { width: 18px; height: 18px; }
.m-top .tt { font-size: 11px; color: var(--ink-400); font-weight: 500; white-space: nowrap; }
.m-top .tb { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 9px; color: var(--ink-500); position: relative; text-decoration: none; flex-shrink: 0; }
.m-top .tb:hover { background: var(--sunk); }
.m-top .tb .ic { width: 17px; height: 17px; }
.m-top .tb i { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #EF4444; border: 1.5px solid var(--card); }
.m-scroll { padding: 14px 16px 76px; }
.m-list { background: var(--card); border-radius: var(--r-md); border: 1px solid var(--line); overflow: hidden; }
.m-list .li { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; color: var(--ink-900); font-weight: 500; min-height: 44px; }
.m-list .li:last-child { border-bottom: none; }
.m-list .li .ic.lead { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }
.m-list .li .val { margin-left: auto; font-size: 12.5px; color: var(--ink-400); font-weight: 400; display: flex; align-items: center; gap: 5px; }
.m-list .li .chev { margin-left: auto; color: var(--ink-400); display: flex; }
.m-list .li .chev .ic { width: 15px; height: 15px; }
.m-list .li .bdg { margin-left: auto; background: var(--accent-tint-2); color: var(--accent-strong); font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 99px; }
.m-list a.li { text-decoration: none; }
.m-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.m-card .ch { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.m-card .ch h4 { font-size: 13px; font-weight: 700; color: var(--ink-900); display: flex; align-items: center; gap: 7px; }
.m-card .ch h4 .ic { width: 15px; height: 15px; color: var(--accent); }
.m-card .ch .lnk { font-size: 11px; color: var(--accent); font-weight: 600; text-decoration: none; padding: 4px 0; }
.chips { display: flex; gap: 8px; margin: 12px 0; overflow-x: auto; padding-bottom: 2px; }
.chips a { flex-shrink: 0; font-size: 12px; padding: 6px 13px; border-radius: 99px; background: var(--card); border: 1.5px solid var(--line); color: var(--ink-700); text-decoration: none; font-weight: 500; }
.chips a.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.m-admin-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.m-stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; }
.m-stat .t { font-size: 11px; color: var(--ink-500); display: flex; align-items: center; gap: 5px; }
.m-stat .t .ic { width: 13px; height: 13px; color: var(--accent-lite); }
.m-stat .v { font-size: 19px; font-weight: 700; color: var(--ink-900); margin-top: 6px; font-variant-numeric: tabular-nums; }
.m-stat .d { font-size: 10px; margin-top: 4px; font-weight: 600; display: flex; align-items: center; gap: 3px; }
.m-stat .d .ic { width: 11px; height: 11px; }
.m-stat .d.up { color: #059669; }
.m-stat .d.down { color: #DC2626; }
.m-user { display: flex; align-items: center; gap: 11px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 13px; margin-bottom: 10px; text-decoration: none; }
.m-user .avatar { width: 38px; height: 38px; font-size: 14px; box-shadow: none; }
.m-user .mi { flex: 1; min-width: 0; }
.m-user .mi .nm { font-size: 13px; font-weight: 700; color: var(--ink-900); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.m-user .mi .nm .tag { font-size: 10px; padding: 1px 7px; }
.m-user .mi .sub { font-size: 11px; color: var(--ink-400); margin-top: 3px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.m-user .act { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--ink-400); flex-shrink: 0; }
.m-user .act .ic { width: 16px; height: 16px; }
.m-auth-item { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.m-auth-item:last-child { border-bottom: none; }
.m-auth-item .ai { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(150deg, #0F766E, #14B8A6); color: #fff; font-weight: 700; font-size: 14px; }
.m-auth-item .ai .ic { width: 17px; height: 17px; }
.m-auth-item .an { flex: 1; min-width: 0; }
.m-auth-item .an .t1 { font-size: 13px; font-weight: 600; color: var(--ink-900); }
.m-auth-item .an .t2 { font-size: 10.5px; color: var(--ink-400); margin-top: 2px; overflow-wrap: anywhere; }
.m-auth-item .btn-d { font-size: 10.5px; padding: 4px 10px; min-height: 26px; }
.bnav { position: fixed; bottom: 0; left: 0; right: 0; height: 58px; background: var(--card); border-top: 1px solid var(--line); display: flex; z-index: 30; padding-bottom: 2px; }
.bnav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 9.5px; color: var(--ink-400); text-decoration: none; font-weight: 500; }
.bnav a .ic { width: 20px; height: 20px; }
.bnav a.on { color: var(--accent); font-weight: 700; }

/* ============ 断点 ============ */
/* 窄一点：分屏收成一条（品牌侧留一行顶栏），卡片铺满 */
@media (max-width: 900px) {
  .auth-page { padding: 0; align-items: flex-start; }
  .split { grid-template-columns: 1fr; min-height: 0; border-radius: 0; border-left: none; border-right: none; }
  .brand-side { padding: 16px 20px; flex-direction: row; align-items: center; gap: 12px; }
  .brand-side .rings, .brand-side .stars, .brand-side .glow { display: none; }
  .brand-side .brand-hero { display: none; }
  .brand-side .brand-foot { margin: 0 0 0 auto; font-size: 11px; }
  .form-side { padding: 24px 20px 28px; }
  .content, .ua-body { padding: 14px; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .apps-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .ua-stats { grid-template-columns: 1fr 1fr; }
  .quick { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .auth-bg { padding: 18px 0; align-items: flex-start; }
  .auth-card { border-radius: 0; border-left: none; border-right: none; width: 100%; box-shadow: none; }
  /* 表格里长串（时间/IP/标识）不许拆行：整张横向滑（滑的容器在基础规则里，宽屏也一样），比断成「#2/68」可读 */
  .tbl { width: max-content; min-width: 100%; }
  .tbl td, .tbl th { white-space: nowrap; }
  .tbl .fine, .tbl .meta, .tbl .hint { white-space: normal; }
}
/* 更窄：字号与内边距收一档，工具条里的按钮不再铺满 */
@media (max-width: 520px) {
  .stats, .ua-stats, .quick { grid-template-columns: 1fr; }
  .greet h3 { font-size: 19px; }
  .form-side { padding: 20px 16px 24px; }
  .field { height: 44px; }
  .btn-primary { height: 44px; letter-spacing: 3px; }
  .filters .f-in { min-width: 0; width: 100%; }
  .filters .f-btns { margin-left: 0; width: 100%; }
  .filters .f-btns .btn { flex: 1; }
  .pager { justify-content: center; }
}
/* 侧栏外壳在窄屏收成顶栏 + 底部导航 */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; padding: 12px; }
  .side .logo { padding-bottom: 10px; }
  .menu { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .menu .grp { display: none; }
  .menu a { flex-shrink: 0; }
  .menu a .bd { display: none; }
  .side .sfoot { display: none; }
  .ua-body { grid-template-columns: minmax(0, 1fr); }
  .ua-nav { display: flex; gap: 6px; overflow-x: auto; padding: 8px; }
  .ua-nav .hd, .ua-nav hr { display: none; }
  .ua-nav a { flex-shrink: 0; }
  .ua-nav a .bd { margin-left: 6px; }
  .ua-top { gap: 12px; padding: 0 14px; }
  .ua-top nav { display: none; }
  .ua-top .search { display: none; }
}

/* ============ 暗色：同一批令牌的另一种取值 ============ */
/* 只改面/文字/边框与阴影，组件规则一条都不在这里重写 —— 谁在这里重写组件，
   下一次改浅色就会漏改暗色（M9 那次 --danger/--ok 的连伤害就是这么来的）。
   注意实心按钮与 a.primary 的字色必须写在文件末尾：与上面同名规则同优先级，谁在后谁赢。 */
@media (prefers-color-scheme: dark) {
  :root {
    --page: #0B1013;
    --card: #141B20;
    --field: #1A2329;
    --sunk: #1F2A31;
    --raised: #222E36;

    --ink-900: #EAF2F6;
    --ink-700: #C3D0D9;
    --ink-500: #9AABBA;
    --ink-400: #828B98;
    --line: #26333B;
    --line-soft: #1E2930;

    --teal-50: #10231F;
    --teal-100: #143231;
    --teal-300: #5EEAD4;
    --accent: #2DD4BF;
    --accent-strong: #5EEAD4;
    --accent-lite: #14B8A6;
    --accent-glow: #2DD4BF;
    --accent-tint: #10231F;
    --accent-tint-2: #143231;
    --accent-ink: #7CEFE0;

    --ok: #4CC38A; --ok-bg: #12301F;
    --danger: #FF6B61; --danger-bg: #33161A;
    --warn: #F0B429; --warn-bg: #322413;
    --info: #7FB2FF; --info-bg: #14263F;
    --muted-ink: #9AABBA; --muted-bg: #1F2A31;

    --shadow-card: 0 24px 60px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);
    --shadow-soft: 0 8px 20px rgba(0, 0, 0, .35);
    --shadow-accent: 0 10px 24px rgba(20, 184, 166, .22);
  }
  body { background-image: radial-gradient(900px 420px at 50% -180px, rgba(13, 148, 136, .12), transparent 60%); }
  .tbl th { background: var(--sunk); }
  .app-add { background: rgba(16, 35, 31, .6); border-color: #1E4C48; }
  .app-add:hover { background: var(--teal-50); }
  .split, .auth-card { box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
  .btn-primary { color: #062420; letter-spacing: 6px; }
  .btn-primary::after { background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .38) 50%, transparent 60%); }
  .btn-l, .btn-ghost, .btn-d { color: var(--ink-700); }
  .btn-d { color: var(--danger); border-color: #4A2A2C; }
  .btn-l:hover, .btn-ghost:hover { background: var(--field); }
  .pager a.cur { color: #062420; }
  .quick a .ic, .ua-nav a.on .ic { color: var(--accent); }
}

/* 暗色下实心按钮一律深字压在亮底上（写在最后：与上面 button 同优先级，谁在后谁赢） */
@media (prefers-color-scheme: dark) {
  .btn-primary, .step.active .n, .chips a.on, .pager a.cur, .app-row .ai, .app-card .ac-h .ai { color: #062420; }
  .score .sbtn { color: #0B3633; }
  a.link, .ua-nav a, .menu a, a { color: var(--accent-strong); }
  .ua-nav a.out, .btn-d { color: var(--danger); }
}