/* Veya Admin 样式单一真源 —— 蜜桃奶油设计系统桌面档
 *
 * ⚠️ 本文件的 :root 是全 admin 唯一的设计值收纳点。
 *
 * 🔴 **有闸守着的是「色值」，不是「一切裸值」**（R15-CSS-08，260802 订正）：
 *   强制项与理由与 h5.css 抬头逐字同源，判据也是同一份
 *   （`veya_model::css_bare`，调用点 `admin/ui/src/tpl_smoke/shell.rs`）——
 *   `:root` 家族之外零色值字面量，模板内联 `style="…"` 零色值字面量；
 *   尺寸类裸数值（本文件 368 处）不强制。
 *   ⚠️ 本行原写「模板与其余 CSS 里零裸值」，而 **admin 侧当时一道 CSS 闸都没有**
 *   （唯一那道长在 h5 crate 里、只 include h5.css）。实际后果：stats.html 的告警条
 *   把边框色写死成 #E5484D / #FF8A6B，前者还不等于本文件的 --veya-error(#E5564E)。
 *
 * 主题三层（顺序不可调，手动层必须压过媒体查询）：
 *   ① :root 浅值  ② @media(prefers-color-scheme:dark) 下的 :root:not([data-theme="light"]) 深值
 *   ③ :root[data-theme="dark"] 手动覆盖
 *   —— 手动**浅**色档没有第四块：② 的 :not() 自己就让它退回 ①。
 *
 *    --veya-*        引 ds v1 定稿（docs/ui/handoff/design_handoff_veya_ds_v1/）
 *    --veya-admin-*  brief_09 台账 a 新增的 1440px 桌面尺寸档
 * 零外部请求：无 CDN、无 webfont URL，图标全部内联 SVG。
 */

:root {
  --veya-primary: #FF8A6B;
  /* 🔴 浅色档取 #D73210 而不是 ds 真源的 #F26A4E：后者在奶油底（#FFF6EF）上只有
     **2.83:1**，不达 WCAG AA 4.5:1，而本 token 正是 `a{}`、`.va-tag--peach`、
     表单 hint 强调字等全站链接与强调文字的颜色。h5 早已因同一理由换成 #D73210
     并写了 6 行论证，admin 这边一直沿用被判定过不达标的那个值 ——
     同一份调色板抄两份、只在一边修好，是本仓最典型的「手写镜像没有对拍」。
     ⚠️ 谁将来按 ds 真源把这里「改回」#F26A4E，请先算一遍对比度：h5 侧有
     gates.rs 的断言会红，admin 侧一条都没有，改回去不会有任何东西提醒你。
     深色档的 #F2846C 在深底上是达标的，不动。 */
  --veya-primary-dark: #D73210;
  --veya-primary-light: #FFE7DC;
  /* 🔴 **这不是第二个品牌色**（R15-WA-02，260804 定）：只给「坐在 --veya-primary-light
     上的小字件」当前景。--veya-primary-dark 在那个底上实算 4.07:1，不达 AA 4.5，
     而它同时是**全站链接色**（`a { color: … }`，见下方 :root 之后第一条规则），
     压深它就是改品牌色。消费点数别写死，自查：`grep -c "var(--veya-primary-dark)" admin/ui/static/admin.css`。
     取值 #A82914 = --veya-grad-peach 止端，与新渐变同源。实算 on #FFE7DC = 5.92 ✅。
     深色档 #F2846C on #3A2723 = 5.55 ✅。
     ⚠️ 判据是「背景是 --veya-primary-light」，不是「想更深一点」；铺开就是 D0 第 3 条。
     跨端同值由 `admin/ui/src/tpl_smoke/shell.rs` 的 `chip_fg_在三份_css_上必须同值` 守着
     （h5 / admin / ds-bundle 三份 CSS 逐字比，基准是 h5.css —— 它是唯一有对比度实测断言的那份）。 */
  --veya-chip-fg: #A82914;
  --veya-secondary: #FFC9B0;
  --veya-bg: #FFF6EF;
  --veya-surface: #FFFFFF;
  --veya-text: #4A3A34;
  --veya-text-sub: #846A5F;
  --veya-divider: #EFE6DE;
  --veya-hot: #F5883C;
  --veya-green: #8FBE9E;
  /* 🔴 浅档 260812 由 #E5564E 压深到 #C93A32（R39-A11Y-13，所有者定）：
     原值对白底只有 3.64，达不到 AA 4.5，而它承载的是「为什么失败」这类不可替代的信息。
     新值 5.08。深档 #FF7B72 实算已达标，不动。
     ⚠️ 与双端 token 同步改 —— 这是同一个 `error` 语义的第四份副本（iOS / Android /
     ds-bundle / 本文件），漂一处就是同一抹红在四个地方长得不一样。 */
  --veya-error: #C93A32;
  --veya-error-soft: rgba(201, 58, 50, 0.12);
  --veya-gold: #C9A36A;
  --veya-milk: #F3E1CE;
  --veya-plum: #C77BB0;
  --veya-card-shadow: rgba(242, 106, 78, 0.20);
  /* R11-AY04（260802）：旧值 #FF9E8A → #F26A4E 上压白字实测 2.00 / 2.47 / 3.02:1。
     本文件 8 处消费，其中 4 处压着 on-accent 白前景（`.va-brand-mark` / `.va-btn--primary` /
     `.va-pg[aria-current]` / `.va-login-mark`）全部不达 AA；另 4 处是无字填充
     （`.va-progress i` / `.va-bar i` / `.va-toggle.is-on` / `.va-login::before` 光晕），
     它们受的是 1.4.11 非文本 3:1，而渐变对页面底 #FFF6EF 只有 1.87 / 2.83，同样不过。
     新值白字 4.60 / 5.68 / 7.02、边界 4.31 / 6.58。验收上限：任一端相对亮度 L ≤ 0.1833。
     pressed = 两端各 ×0.86（逐通道，严格相等不留容差），白字 5.89 / 8.63。
     🔴 起端旧值 #FF9E8A 也是深色档 primary、止端旧值 #F26A4E 也是 --veya-card-shadow /
        --veya-elev-card 的底色、pressed 止端旧值 #D6503A 在 ds 真源里兼作次钮按压态
        **文字**色 —— 那几处本轮一律不动，**禁止对这四个色做全局替换**。 */
  --veya-grad-peach: linear-gradient(135deg, #D53F27, #A82914);
  --veya-grad-peach-pressed: linear-gradient(135deg, #B73622, #902311);
  --veya-ink-on-green: #31402C;
  /* 渐变/实底强调色上的前景字。两套主题同值 —— ds 红线 1：主按钮恒为白字 700。 */
  --veya-on-accent: #FFFFFF;
  --veya-elev-card: 0 14px 30px -18px rgba(242, 106, 78, 0.20);
  --veya-row-hover: #FFF9F4;
  --veya-thead-bg: #FDF3EC;
  --veya-scrim: rgba(74, 58, 52, 0.38);
  /* 悬浮层阴影。深色下要更重才压得住暖可可底 */
  --veya-shadow-toast: 0 12px 28px -14px rgba(0, 0, 0, 0.5);
  --veya-shadow-modal: 0 24px 60px -24px rgba(0, 0, 0, 0.45);
  /* 开关旋钮：深色下若用 surface，压在 divider 轨道上两色几乎同值、看不见开关 */
  --veya-knob: #FFFFFF;
  --veya-knob-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);

  --veya-serif: 'Noto Serif SC', 'Songti SC', Georgia, serif;
  --veya-sans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
  --veya-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --veya-admin-radius-card: 12px;
  --veya-admin-radius-field: 8px;
  --veya-admin-radius-tag: 6px;
  --veya-admin-radius-button: 8px;
  --veya-admin-type-body: 13.5px;
  --veya-admin-type-cell: 13.5px;
  --veya-admin-type-title: 20px;
  --veya-admin-type-caption: 12px;
  --veya-admin-type-tag: 11px;
  --veya-admin-space-page: 24px;
  --veya-admin-space-card-gap: 16px;
  --veya-admin-space-cell-x: 14px;
  --veya-admin-table-row-h: 44px;
  --veya-admin-table-head-h: 40px;
  --veya-admin-sidebar-w: 232px;
  --veya-admin-sidebar-w-collapsed: 64px;
  --veya-admin-topbar-h: 56px;
}

@media (prefers-color-scheme: dark) {
  /* 🔴 `:not([data-theme="light"])` 不是修饰，是这一层能被手动浅色档压过的**全部**机制。
     去掉它，就必须另写一整块 `:root[data-theme="light"]` 把 22 个浅值再抄一遍才压得回来 ——
     那 26 行副本原先就在下面，260802 删掉了（R15-CSS-03…10#1，与 h5.css 同批同形）。
     漏改的形态是静默的：只有「系统深色 + 用户手动点浅色」这一条路径会错，
     开发机跟随系统时永远看不到。由 tpl_smoke::shell 的
     `admin_主题三层不得退回四块副本` 守着（判据与 h5 共用 veya_model::css_bare）。 */
  :root:not([data-theme="light"]) {
    --veya-primary: #FF9E8A;
    --veya-primary-dark: #F2846C;
    --veya-primary-light: #3A2723;
    --veya-chip-fg: #F2846C;
    --veya-bg: #2A1F22;
    --veya-surface: #362A2D;
    --veya-text: #DCC7BC;
    --veya-text-sub: #B49B92;
    --veya-divider: #3F3033;
    --veya-error: #FF7B72;
    --veya-error-soft: rgba(255, 123, 114, 0.16);
    --veya-milk: #3A302B;
    --veya-plum: #D793C2;
    --veya-card-shadow: rgba(10, 6, 7, 0.55);
    --veya-elev-card: 0 14px 30px -14px rgba(10, 6, 7, 0.55);
    --veya-ink-on-green: #22331F;
    --veya-row-hover: #3E3033;
    --veya-thead-bg: #31262A;
    --veya-scrim: rgba(10, 6, 7, 0.55);
    --veya-shadow-toast: 0 12px 28px -12px rgba(0, 0, 0, 0.72);
    --veya-shadow-modal: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
    --veya-knob: #DCC7BC;
    --veya-knob-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  --veya-primary: #FF9E8A;
  --veya-primary-dark: #F2846C;
  --veya-primary-light: #3A2723;
  --veya-chip-fg: #F2846C;
  --veya-bg: #2A1F22;
  --veya-surface: #362A2D;
  --veya-text: #DCC7BC;
  --veya-text-sub: #B49B92;
  --veya-divider: #3F3033;
  --veya-error: #FF7B72;
  --veya-error-soft: rgba(255, 123, 114, 0.16);
  --veya-milk: #3A302B;
  --veya-plum: #D793C2;
  --veya-card-shadow: rgba(10, 6, 7, 0.55);
  --veya-elev-card: 0 14px 30px -14px rgba(10, 6, 7, 0.55);
  --veya-ink-on-green: #22331F;
  --veya-row-hover: #3E3033;
  --veya-thead-bg: #31262A;
  --veya-scrim: rgba(10, 6, 7, 0.55);
  --veya-shadow-toast: 0 12px 28px -12px rgba(0, 0, 0, 0.72);
  --veya-shadow-modal: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --veya-knob: #DCC7BC;
  --veya-knob-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}


* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--veya-bg);
  color: var(--veya-text);
  font: 400 var(--veya-admin-type-body)/1.6 var(--veya-sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
a { color: var(--veya-primary-dark); }
:focus-visible { outline: 2px solid var(--veya-primary); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── AdminShell ── */
.va-shell { display: flex; min-height: 100vh; }

.va-side {
  flex: 0 0 var(--veya-admin-sidebar-w);
  width: var(--veya-admin-sidebar-w);
  background: var(--veya-surface);
  border-right: 1px solid var(--veya-divider);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: width .18s ease, flex-basis .18s ease;
}

.va-shell.is-collapsed .va-side {
  flex-basis: var(--veya-admin-sidebar-w-collapsed);
  width: var(--veya-admin-sidebar-w-collapsed);
}

.va-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--veya-admin-topbar-h);
  padding: 0 18px;
  border-bottom: 1px solid var(--veya-divider);
  flex: 0 0 auto;
}

.va-brand-mark {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 8px;
  background: var(--veya-grad-peach);
  display: grid;
  place-items: center;
  color: var(--veya-on-accent);
  font: italic 600 15px/1 'Cormorant Garamond', var(--veya-serif);
}

.va-brand-txt { font: 700 14.5px/1.2 var(--veya-serif); white-space: nowrap; }
.va-nav { flex: 1 1 auto; overflow-y: auto; padding: 14px 10px; }

.va-nav-grp {
  font: 600 10.5px/1 var(--veya-sans);
  letter-spacing: .1em;
  color: var(--veya-text-sub);
  padding: 14px 10px 7px;
}

.va-nav-grp:first-child { padding-top: 2px; }

.va-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 10px;
  height: 36px;
  border-radius: var(--veya-admin-radius-button);
  text-decoration: none;
  color: var(--veya-text);
  font-size: var(--veya-admin-type-body);
  white-space: nowrap;
  position: relative;
}

.va-nav a:hover { background: var(--veya-bg); }

.va-nav a[aria-current="page"] {
  background: var(--veya-primary-light);
  color: var(--veya-chip-fg);
  font-weight: 600;
}

.va-nav svg, .va-logout svg {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
}

.va-nav a[aria-current="page"] svg { opacity: 1; }

.va-nav .cnt {
  margin-left: auto;
  font: 600 10.5px/1 var(--veya-sans);
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--veya-error);
  color: var(--veya-on-accent);
  font-style: normal;
}

.va-nav .cnt[hidden] { display: none; }

.va-side-ft { flex: 0 0 auto; padding: 10px; border-top: 1px solid var(--veya-divider); }

.va-logout {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--veya-admin-radius-button);
  color: var(--veya-error);
  font: 500 var(--veya-admin-type-body) var(--veya-sans);
  white-space: nowrap;
}

.va-logout:hover { background: var(--veya-error-soft); }

.va-shell.is-collapsed .va-brand-txt,
.va-shell.is-collapsed .va-nav-grp,
.va-shell.is-collapsed .va-nav a span,
.va-shell.is-collapsed .va-nav .cnt,
.va-shell.is-collapsed .va-logout span { display: none; }

.va-shell.is-collapsed .va-brand,
.va-shell.is-collapsed .va-nav a,
.va-shell.is-collapsed .va-logout { justify-content: center; padding: 0; gap: 0; }

.va-shell.is-collapsed .va-nav-grp {
  height: 1px;
  padding: 0;
  margin: 12px;
  background: var(--veya-divider);
  overflow: hidden;
}

.va-shell.is-collapsed .va-nav a::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 8px);
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--veya-text);
  color: var(--veya-bg);
  font-size: 11.5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
  z-index: 10;
}

.va-shell.is-collapsed .va-nav a:hover::after { opacity: 1; }

.va-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.va-top {
  position: sticky;
  top: 0;
  z-index: 20;
  flex: 0 0 var(--veya-admin-topbar-h);
  height: var(--veya-admin-topbar-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 var(--veya-admin-space-page);
  background: var(--veya-surface);
  border-bottom: 1px solid var(--veya-divider);
}

.va-collapse, .va-theme {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  cursor: pointer;
  border-radius: var(--veya-admin-radius-button);
  color: var(--veya-text-sub);
}

.va-collapse { border: 0; background: none; }
.va-collapse:hover { background: var(--veya-bg); color: var(--veya-text); }
.va-theme { border: 1px solid var(--veya-divider); background: var(--veya-bg); }
.va-theme:hover { color: var(--veya-primary-dark); border-color: var(--veya-primary); }

.va-collapse svg { width: 17px; height: 17px; }
.va-theme svg { width: 15px; height: 15px; }

.va-collapse svg, .va-theme svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.va-page-title { font: 700 var(--veya-admin-type-title)/1.25 var(--veya-serif); }
.va-top-sp { margin-left: auto; }

.va-health {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 11px;
  border-radius: 99px;
  font-size: var(--veya-admin-type-caption);
  font-weight: 500;
  background: var(--veya-bg);
  border: 1px solid var(--veya-divider);
  color: var(--veya-text-sub);
}

.va-health .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: var(--veya-text-sub); }

.va-health[data-state="ok"] .dot {
  background: var(--veya-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--veya-green) 26%, transparent);
}

.va-health[data-state="degraded"] .dot {
  background: var(--veya-hot);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--veya-hot) 24%, transparent);
}

.va-health[data-state="down"] .dot {
  background: var(--veya-error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--veya-error) 24%, transparent);
}

.va-health[data-state="down"] {
  color: var(--veya-error);
  border-color: color-mix(in srgb, var(--veya-error) 35%, transparent);
}

.va-admin-id {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--veya-admin-type-caption);
  color: var(--veya-text-sub);
}

.va-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--veya-primary-light);
  color: var(--veya-chip-fg);
  display: grid;
  place-items: center;
  font: 600 11px/1 var(--veya-sans);
}

.va-body {
  flex: 1 1 auto;
  padding: var(--veya-admin-space-page);
  display: flex;
  flex-direction: column;
  gap: var(--veya-admin-space-card-gap);
  min-width: 0;
}

/* ── 取数失败横幅 ──
   读路径失败时页面顶部的告警条。没有它时「查询失败」与「真的没数据」在界面上
   完全无法区分（都是 0 条），而后台是出事时唯一的取证界面。 */
.va-load-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--veya-admin-radius-card);
  background: var(--veya-error-soft);
  border: 1px solid var(--veya-error);
  color: var(--veya-error);
  font: 500 13px/1.5 var(--veya-sans);
}
/* 🔴 图标预设必须写全。`ic.icon()` 吐的是**裸 svg**（无 fill/stroke/尺寸），
   外观 100% 由 CSS 给。这里原先只有 `flex: 0 0 auto` ⇒ 走 SVG 默认的
   `fill:black; stroke:none`（告警三角变纯黑实心块、两根提示线零面积消失）
   + 无宽高走替换元素默认尺寸（Chrome 300×150）⇒ **横幅被撑成一坨黑块**。
   而这个横幅只在 Mongo/Redis 取数失败时出现，是全 admin 唯一没被人眼看过的组件 ——
   出事那一刻才第一次露面，正是最不能出洋相的时候。值与 `.va-alert svg` 对齐。 */
.va-load-error svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 待回复徽章的「数不出来」态：与真实计数区分开（灰底问号，不是红底数字）。 */
#vaPending[data-unknown] {
  background: var(--veya-divider);
  color: var(--veya-text-sub);
}

/* ── StatCard ── */
.va-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--veya-admin-space-card-gap); }
.va-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.va-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.va-input--search { width: 220px; }

.va-stat {
  background: var(--veya-surface);
  border: 1px solid var(--veya-divider);
  border-radius: var(--veya-admin-radius-card);
  padding: 16px 18px;
  box-shadow: var(--veya-elev-card);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.va-stat-ic {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--veya-primary-light);
  color: var(--veya-chip-fg);
}

.va-stat-ic svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.va-stat-b { min-width: 0; }

.va-stat-n {
  font: 700 25px/1.1 var(--veya-serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.va-stat-l { font-size: var(--veya-admin-type-caption); color: var(--veya-text-sub); margin-top: 3px; }
.va-stat-sub { font-size: 11.5px; color: var(--veya-text-sub); margin-top: 6px; }
.va-stat-sub.is-error { color: var(--veya-error); }

/* ── PanelCard ── */
.va-panel {
  background: var(--veya-surface);
  border: 1px solid var(--veya-divider);
  border-radius: var(--veya-admin-radius-card);
  box-shadow: var(--veya-elev-card);
  overflow: hidden;
  min-width: 0;
}

.va-panel-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px var(--veya-admin-space-cell-x);
  border-bottom: 1px solid var(--veya-divider);
  flex-wrap: wrap;
}

.va-panel-hd h3 { font: 700 15px/1.3 var(--veya-serif); }
.va-panel-act { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.va-panel-bd { padding: var(--veya-admin-space-cell-x); }

/* 「需要注意」条（stats.html 的 alerts）。
   🔴 R15-CSS-08：这三条声明原先是 stats.html 里的一段内联 `style="…"`，边框色
   直接写死 `#E5484D` / `#FF8A6B`。两处都有实害：
   ① `#E5484D` **不等于**本站的错误色 `--veya-error`(#E5564E) —— 是手抄同一抹红时抄漂的；
   ② 内联色值不随主题换挡，深色档下 `--veya-error` 是 #FF7B72，而那两个硬值一动不动。
   放进这里之后两件事同时解决，且内联样式优先级高于样式表这个坑也一并消失。 */
.va-alert {
  border-left: 3px solid var(--veya-primary);
  padding-left: 10px;
  margin: 8px 0;
}
.va-alert--danger { border-left-color: var(--veya-error); }

/* ── Badge ── */
.va-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--veya-admin-radius-tag);
  font: 500 var(--veya-admin-type-tag)/1.4 var(--veya-sans);
  white-space: nowrap;
  vertical-align: middle;
}

.va-tag--peach { background: var(--veya-primary-light); color: var(--veya-chip-fg); }
.va-tag--serial { background: var(--veya-green); color: var(--veya-ink-on-green); font-weight: 600; }
.va-tag--done { background: var(--veya-milk); color: var(--veya-text-sub); }
:root[data-theme="dark"] .va-tag--done { color: var(--veya-text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .va-tag--done { color: var(--veya-text); } }
.va-tag--danger { background: var(--veya-error-soft); color: var(--veya-error); font-weight: 600; }
.va-tag--vip { background: color-mix(in srgb, var(--veya-gold) 20%, transparent); color: var(--veya-gold); font-weight: 600; }
.va-tag--hot { background: color-mix(in srgb, var(--veya-hot) 16%, transparent); color: var(--veya-hot); font-weight: 600; }
.va-tag--plum { background: color-mix(in srgb, var(--veya-plum) 18%, transparent); color: var(--veya-plum); }
.va-tag--mute { background: var(--veya-bg); color: var(--veya-text-sub); border: 1px solid var(--veya-divider); }
.va-tag--mono { font-family: var(--veya-mono); font-size: 11px; }

/* ── Button ── */
.va-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--veya-admin-radius-button);
  border: 1px solid transparent;
  cursor: pointer;
  font: 500 var(--veya-admin-type-body)/1 var(--veya-sans);
  white-space: nowrap;
  text-decoration: none;
  transition: filter .12s;
}

.va-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.va-btn--primary {
  background: var(--veya-grad-peach);
  color: var(--veya-on-accent);
  font-weight: 700;
  box-shadow: 0 8px 16px -10px var(--veya-card-shadow);
}

.va-btn--primary:hover { filter: brightness(1.04); }
.va-btn--primary:active { background: var(--veya-grad-peach-pressed); }
.va-btn--ghost { background: var(--veya-surface); border-color: var(--veya-divider); color: var(--veya-text); }
.va-btn--ghost:hover { border-color: var(--veya-primary); color: var(--veya-primary-dark); }
.va-btn--danger { background: var(--veya-error); color: var(--veya-on-accent); font-weight: 600; }
.va-btn--danger:hover { filter: brightness(1.06); }
.va-btn--xs { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 6px; }
.va-btn--block { width: 100%; height: 40px; font-size: 14.5px; }
.va-btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; }

.va-btn--link {
  background: none;
  border: 0;
  padding: 0;
  height: auto;
  color: var(--veya-primary-dark);
  font-size: 12.5px;
}

.va-btn--link:hover { text-decoration: underline; }

/* ── DataTable ── */
.va-table-wrap { overflow-x: auto; }
.va-table { width: 100%; border-collapse: collapse; font-size: var(--veya-admin-type-cell); }

.va-table th {
  height: var(--veya-admin-table-head-h);
  padding: 0 var(--veya-admin-space-cell-x);
  text-align: left;
  background: var(--veya-thead-bg);
  color: var(--veya-text-sub);
  font: 600 12px/1 var(--veya-sans);
  white-space: nowrap;
  border-bottom: 1px solid var(--veya-divider);
}

.va-table td {
  height: var(--veya-admin-table-row-h);
  padding: 0 var(--veya-admin-space-cell-x);
  border-bottom: 1px solid var(--veya-divider);
  vertical-align: middle;
}

.va-table tbody tr:hover { background: var(--veya-row-hover); }
.va-table .c-mono { font: 500 12px var(--veya-mono); color: var(--veya-text-sub); }
.va-table .c-num { font-variant-numeric: tabular-nums; text-align: right; }
.va-table .c-trunc { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.va-table .c-act { white-space: nowrap; text-align: right; }
.va-table .c-act .va-btn + .va-btn { margin-left: 6px; }
.va-table .c-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.va-table .c-check { width: 40px; padding-right: 0; }
.va-table td.is-empty { height: 180px; text-align: center; color: var(--veya-text-sub); }

.va-check { width: 15px; height: 15px; accent-color: var(--veya-primary-dark); cursor: pointer; vertical-align: middle; }

.va-copy {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--veya-text-sub);
  padding: 2px;
  border-radius: 4px;
  vertical-align: middle;
  line-height: 0;
}

.va-copy:hover { color: var(--veya-chip-fg); background: var(--veya-primary-light); }
.va-copy.is-done { color: var(--veya-green); }

.va-copy svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Pagination ── */
.va-pager {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px var(--veya-admin-space-cell-x);
  border-top: 1px solid var(--veya-divider);
  flex-wrap: wrap;
}

.va-pager-cnt {
  font-size: var(--veya-admin-type-caption);
  color: var(--veya-text-sub);
  margin-right: auto;
  font-variant-numeric: tabular-nums;
}

.va-pg {
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--veya-divider);
  background: var(--veya-surface);
  color: var(--veya-text);
  border-radius: var(--veya-admin-radius-button);
  font: 500 12.5px/1 var(--veya-sans);
  cursor: pointer;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.va-pg:hover { border-color: var(--veya-primary); color: var(--veya-primary-dark); }

.va-pg[aria-current="page"] {
  background: var(--veya-grad-peach);
  color: var(--veya-on-accent);
  border-color: transparent;
  font-weight: 700;
}

.va-pg[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.va-pg-gap { color: var(--veya-text-sub); padding: 0 2px; font-size: 12px; }

/* ── FilterBar ── */
.va-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  padding: 12px var(--veya-admin-space-cell-x);
  border-bottom: 1px solid var(--veya-divider);
}

.va-input, .va-select {
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--veya-divider);
  border-radius: var(--veya-admin-radius-field);
  background: var(--veya-surface);
  color: var(--veya-text);
  font: 400 var(--veya-admin-type-body) var(--veya-sans);
  min-width: 0;
}

.va-input::placeholder { color: var(--veya-text-sub); opacity: .75; }

.va-input:focus, .va-select:focus {
  outline: none;
  border-color: var(--veya-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--veya-primary) 18%, transparent);
}

.va-select {
  padding-right: 28px;
  cursor: pointer;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--veya-text-sub) 50%),
    linear-gradient(135deg, var(--veya-text-sub) 50%, transparent 50%);
  background-position: calc(100% - 15px) 14px, calc(100% - 11px) 14px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.va-seg {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--veya-bg);
  border: 1px solid var(--veya-divider);
  border-radius: var(--veya-admin-radius-field);
}

.va-seg a, .va-seg button {
  height: 26px;
  padding: 0 12px;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  font: 500 12.5px/1 var(--veya-sans);
  color: var(--veya-text-sub);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.va-seg a:hover, .va-seg button:hover { color: var(--veya-text); }

.va-seg a[aria-pressed="true"], .va-seg button[aria-pressed="true"] {
  background: var(--veya-surface);
  color: var(--veya-primary-dark);
  font-weight: 600;
  box-shadow: 0 1px 3px -1px var(--veya-card-shadow);
}

.va-seg .badge {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--veya-error);
  color: var(--veya-on-accent);
  font: 600 10px/16px var(--veya-sans);
  text-align: center;
  font-style: normal;
}

/* ── Alert / Toast / EmptyState ── */
.va-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 14px;
  border-radius: var(--veya-admin-radius-field);
  font-size: var(--veya-admin-type-body);
  border: 1px solid transparent;
}

.va-alert svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.va-alert--error {
  background: var(--veya-error-soft);
  color: var(--veya-error);
  border-color: color-mix(in srgb, var(--veya-error) 28%, transparent);
}

.va-alert--warn {
  background: color-mix(in srgb, var(--veya-hot) 12%, transparent);
  color: var(--veya-hot);
  border-color: color-mix(in srgb, var(--veya-hot) 30%, transparent);
}

/* 🔴 这里曾有 `.va-alert--ok`（+ 两条深色档覆盖），260802 删除（RP2-S14-09）。
   别再加回来：admin 全站 `ui.alert(...)` 只传过 `"error"` 与 `"warn"`，`stats.html`
   另直接写 `va-alert--danger` —— 「成功」这一档从来没有调用方，`ui.html` 里那条
   `kind == "ok"` 的图标分支已一并删除。真要用它时**同时**加回 CSS 与图标分支，
   并在同一次提交里带上调用点，别再留一个只有声明的档位。 */
.va-alert b { font-weight: 600; }

.va-toast-host {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.va-toast {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border-radius: 99px;
  background: var(--veya-text);
  color: var(--veya-bg);
  font-size: var(--veya-admin-type-body);
  font-weight: 500;
  box-shadow: var(--veya-shadow-toast);
  animation: va-toast-in .18s ease;
}

@keyframes va-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.va-toast svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.va-toast--ok svg { color: var(--veya-green); }
.va-toast--err svg { color: var(--veya-error); }

.va-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 46px 20px;
  text-align: center;
}

.va-empty-halo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--veya-primary-light);
  display: grid;
  place-items: center;
  color: var(--veya-primary);
  margin-bottom: 10px;
}

.va-empty-halo svg {
  width: 27px;
  height: 27px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.va-empty h4 { font: 700 14.5px/1.4 var(--veya-serif); }
.va-empty p { margin: 0; font-size: 12.5px; color: var(--veya-text-sub); max-width: 38ch; }
.va-empty .va-btn { margin-top: 12px; }

/* ── 反馈图缩略图与灯箱 ── */
.va-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.va-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--veya-admin-radius-tag);
  border: 1px solid var(--veya-divider);
  cursor: zoom-in;
  background: var(--veya-thead-bg);
}

.va-thumb:hover { border-color: var(--veya-primary); }

/* 原图按视口收，长截图（手机反馈图多是竖长条）不撑破屏幕 */
.va-shot {
  max-width: min(92vw, 900px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--veya-admin-radius-card);
  box-shadow: var(--veya-shadow-modal);
  cursor: zoom-out;
}

/* ── Dialog / ModalForm ── */
.va-scrim {
  position: fixed;
  inset: 0;
  background: var(--veya-scrim);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 50;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.va-scrim[hidden] { display: none; }

.va-dialog {
  width: 100%;
  max-width: 380px;
  background: var(--veya-surface);
  border-radius: 16px;
  padding: 22px;
  text-align: center;
  box-shadow: var(--veya-shadow-modal);
}

.va-dialog-ic {
  width: 46px;
  height: 46px;
  margin: 0 auto 13px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--veya-error-soft);
  color: var(--veya-error);
}

.va-dialog-ic svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.va-dialog h4 { font: 700 16px/1.35 var(--veya-serif); margin-bottom: 7px; }
.va-dialog p { margin: 0; font-size: 13px; color: var(--veya-text-sub); line-height: 1.6; }
.va-dialog-ft { display: flex; gap: 10px; margin-top: 20px; }
.va-dialog-ft .va-btn { flex: 1; height: 38px; }

.va-modal {
  width: 100%;
  max-width: 440px;
  background: var(--veya-surface);
  border-radius: 16px;
  box-shadow: var(--veya-shadow-modal);
  overflow: hidden;
  text-align: left;
}

.va-modal-hd { display: flex; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--veya-divider); }
.va-modal-hd h4 { font: 700 15.5px/1.3 var(--veya-serif); }

.va-modal-x {
  margin-left: auto;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--veya-text-sub);
  line-height: 0;
  padding: 4px;
  border-radius: 6px;
}

.va-modal-x:hover { background: var(--veya-bg); color: var(--veya-text); }
.va-modal-x svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; }

.va-modal-bd { padding: 20px; display: flex; flex-direction: column; gap: 14px; max-height: 60vh; overflow-y: auto; }

.va-modal-ft {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--veya-divider);
  background: var(--veya-bg);
}

.va-field { display: flex; flex-direction: column; gap: 6px; }
.va-field label { font: 600 12px/1 var(--veya-sans); color: var(--veya-text-sub); }
.va-field label .req { color: var(--veya-error); margin-left: 2px; font-style: normal; }
.va-field .va-input, .va-field .va-select { width: 100%; height: 36px; }

.va-field textarea.va-input {
  height: auto;
  min-height: 86px;
  padding: 9px 11px;
  resize: vertical;
  line-height: 1.6;
  font-family: inherit;
}

.va-field .hint { font-size: 11.5px; color: var(--veya-text-sub); }
.va-field .hint b { color: var(--veya-primary-dark); font: 600 11.5px var(--veya-mono); }

.va-quote {
  padding: 11px 13px;
  border-radius: var(--veya-admin-radius-field);
  background: var(--veya-bg);
  border-left: 3px solid var(--veya-primary);
  font-size: 12.5px;
  color: var(--veya-text-sub);
  line-height: 1.65;
  white-space: pre-wrap;
}

.va-quote.is-reply { margin-top: 8px; }

/* 表格里「无值」的占位文字：比正文淡，但不至于看不见 */
.va-table .c-dash { color: var(--veya-text-sub); }

.va-modal-sub { margin: 0; font-size: 12.5px; color: var(--veya-text-sub); line-height: 1.6; }
.va-modal-sub b { color: var(--veya-text); font-weight: 600; }

.va-checkline { display: flex; align-items: center; gap: 9px; font-size: var(--veya-admin-type-body); cursor: pointer; }

.va-checklist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid var(--veya-divider);
  border-radius: var(--veya-admin-radius-field);
  padding: 6px;
}

.va-checklist label { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 6px; cursor: pointer; }
.va-checklist label:hover { background: var(--veya-bg); }
.va-checklist .desc { margin-left: auto; font-size: 11.5px; color: var(--veya-text-sub); }

/* ── FileUpload ── */
.va-drop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--veya-admin-radius-field);
  border: 1.5px dashed var(--veya-divider);
  background: var(--veya-bg);
  cursor: pointer;
}

.va-drop:hover { border-color: var(--veya-primary); background: var(--veya-primary-light); }
.va-drop input[type="file"] { display: none; }

.va-drop-ic {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--veya-surface);
  color: var(--veya-primary-dark);
  border: 1px solid var(--veya-divider);
}

.va-drop-ic svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.va-drop b { display: block; font: 600 var(--veya-admin-type-body) var(--veya-sans); }
.va-drop small { color: var(--veya-text-sub); font-size: 11.5px; }
.va-progress { height: 5px; border-radius: 3px; background: var(--veya-divider); overflow: hidden; margin-top: 9px; }
.va-progress i { display: block; height: 100%; border-radius: 3px; background: var(--veya-grad-peach); }

/* ── BulkActionBar ── */
.va-bulk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--veya-admin-space-cell-x);
  background: var(--veya-primary-light);
  border-bottom: 1px solid var(--veya-divider);
  flex-wrap: wrap;
}

.va-bulk[hidden] { display: none; }
.va-bulk-n { font-size: var(--veya-admin-type-body); font-weight: 600; color: var(--veya-primary-dark); }
.va-bulk-n b { font-variant-numeric: tabular-nums; }
.va-bulk .va-select { height: 30px; background: var(--veya-surface); }
.va-bulk .sp { margin-left: auto; }

/* ── Login ── */
.va-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
  background: var(--veya-bg);
}

.va-login::before {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  top: -260px;
  right: -180px;
  background: var(--veya-grad-peach);
  opacity: .16;
  filter: blur(6px);
}

.va-login::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  bottom: -220px;
  left: -140px;
  background: var(--veya-secondary);
  opacity: .2;
  filter: blur(10px);
}

.va-login-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--veya-surface);
  border-radius: 18px;
  padding: 34px 30px;
  box-shadow: 0 28px 64px -30px var(--veya-card-shadow);
  border: 1px solid var(--veya-divider);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.va-login-mark {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--veya-grad-peach);
  margin: 0 auto;
  display: grid;
  place-items: center;
  color: var(--veya-on-accent);
  font: italic 600 25px/1 'Cormorant Garamond', var(--veya-serif);
  box-shadow: 0 12px 24px -12px var(--veya-card-shadow);
}

.va-login-hd { text-align: center; }
.va-login-hd h2 { font: 700 21px/1.3 var(--veya-serif); }
.va-login-hd p { margin: 5px 0 0; font-size: 12.5px; color: var(--veya-text-sub); }
.va-login form { display: flex; flex-direction: column; gap: 13px; }
.va-login .va-btn--block { margin-top: 3px; }
.va-login-ft { text-align: center; font-size: 11.5px; color: var(--veya-text-sub); }

/* ── Dashboard ── */
.va-cat-2col {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--veya-admin-space-card-gap);
  align-items: start;
}

.va-form { display: flex; flex-direction: column; gap: 14px; }

/* 全局配置卡：两列网格，长字段跨列 */
.va-cfg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px var(--veya-admin-space-card-gap);
}

.va-cfg-grid .va-field--wide { grid-column: 1 / -1; }
.va-cfg-ft { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 16px; }
.va-cfg-ft .hint { margin-right: auto; font-size: 11.5px; color: var(--veya-text-sub); }
.va-cfg-ft .hint b { color: var(--veya-primary-dark); font-weight: 600; }

/* changelog 跨列附加行：视觉上从属于上一行，不是独立记录 */
.va-table tbody tr.va-sub-row td {
  height: auto;
  padding: 8px var(--veya-admin-space-cell-x) 10px;
  background: var(--veya-bg);
  color: var(--veya-text-sub);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  border-bottom: 1px solid var(--veya-divider);
}

.va-table tbody tr.va-sub-row:hover { background: var(--veya-bg); }

.va-sub-row .k {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--veya-surface);
  border: 1px solid var(--veya-divider);
  font: 600 10.5px/1.4 var(--veya-sans);
}

.va-fonts-left, .va-fonts-right {
  display: flex;
  flex-direction: column;
  gap: var(--veya-admin-space-card-gap);
  min-width: 0;
}

/* 字体表按分组分节的小标题 */
.va-section-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px var(--veya-admin-space-cell-x);
  background: var(--veya-bg);
  border-bottom: 1px solid var(--veya-divider);
  font: 600 12px/1 var(--veya-sans);
  color: var(--veya-text-sub);
}

.va-section-hd .n {
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--veya-surface);
  border: 1px solid var(--veya-divider);
}

/* 开关（书摘可用）。无确认操作，故状态要一眼可辨 */
.va-toggle {
  width: 36px;
  height: 20px;
  padding: 2px;
  border: 0;
  border-radius: 10px;
  background: var(--veya-divider);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background .15s ease;
}

.va-toggle i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--veya-knob);
  box-shadow: var(--veya-knob-shadow);
  transition: transform .15s ease;
}

.va-toggle.is-on { background: var(--veya-grad-peach); }
.va-toggle.is-on i { transform: translateX(16px); }

.va-dash-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--veya-admin-space-card-gap);
  align-items: start;
}

.va-shelf { display: flex; flex-direction: column; gap: 14px; }
.va-shelf-row { display: flex; align-items: center; gap: 9px; font-size: var(--veya-admin-type-body); }
.va-shelf-row .n { margin-left: auto; font: 700 15px var(--veya-serif); font-variant-numeric: tabular-nums; }
.va-bar { height: 8px; border-radius: 4px; background: var(--veya-divider); overflow: hidden; }
.va-bar i { display: block; height: 100%; border-radius: 4px; background: var(--veya-grad-peach); }
.va-rate { text-align: center; font-size: 12.5px; color: var(--veya-text-sub); }

.va-rate b {
  font: 700 19px var(--veya-serif);
  color: var(--veya-primary-dark);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 2px;
}

/* ── 1280px 窄屏兜底（不做手机版，后台不在手机上用）── */
@media (max-width: 1280px) {
  /* 🔴 这里原先是一条**恒等式规则**：把 .va-cat-2col 上面那条声明逐字复制了一遍
     （连缩进都是复制粘贴残留），于是「窄屏兜底」在这个布局上什么都没做，
     而注释宣称已兜过底。真兜底 = 跟 .va-dash-2col 一样收成单列 ——
     两列在 ≤1280 时右侧表单会被挤到不可用宽度（分类页与字体页各一处）。 */
  .va-cat-2col { grid-template-columns: minmax(0, 1fr); }
  .va-dash-2col { grid-template-columns: minmax(0, 1fr); }
}