/* 全站主题：照 TG 监控中台 v5.6（tg-central-route-master/static/v2/workboard.css，下面「wb:行号」= 该文件的行）。
   用 UNFOLD["STYLES"] 挂到所有后台页（含登录页），排在 Unfold 的 styles.css 前面，但本文件不进 @layer，比 Tailwind 各层都优先。
   - 外壳（侧栏 / 顶栏 / 页头）是本项目覆盖的模板自己的类名（templates/admin/base.html、nav_sidebar.html、unfold/helpers/header.html），
     直接用中台同名类；Unfold 自带组件（列表表格、表单、按钮、弹层）按 Unfold 的 id / 类名换皮，依赖写在各节注释里，升级 Unfold 时要对一遍。
   - 深浅色：Unfold 在 <html> 上加 .dark（选「深色」，或「跟随系统」且系统是深色），本文件 html.dark 一块就是中台末尾的深色 token（wb:1648）。
   - 比中台严的项目底线（前端红线 §38）：字号最小 12px（--wb-fs-sub 11 → 12）；正文 / 标签字对底色 ≥ 4.5:1（中台 --wb-muted 落在画布、表头底上不够，
     那几处改用 --wb-secondary；侧栏分组标题 --nav-label 改 --nav-muted）；手机宽度点击区 ≥ 44px。
   - 动效只用中台有的（按钮、侧栏悬停、分组箭头、展开收起、侧栏高亮滑动、胶囊滑动、弹窗淡入、toast、进度条、表格行），减少动态效果时全关。 */

/* ============ 1. token：浅色（wb:8–50，--ap-* 设置页专用的没搬）============ */
:root {
  --wb-ink:#10243e; --wb-secondary:#465a71; --wb-muted:#60758e;
  --wb-blue:#1d52c9; --wb-blue-soft:#edf3ff; --wb-green:#27865e;
  --wb-purple:#8965bc; --wb-red:#c94740; --wb-yellow:#eab308;
  --wb-line:#e4ebf4; --wb-surface:#fff; --wb-bg:#f5f8fc;
  --wb-radius:18px; --wb-control-height:36px; --wb-th-h:36px;
  --wb-font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --nav:#182131; --nav-hover:#242f42; --nav-muted:#8f9aae; --subtle:#f0f4f8; --surface-2:#eef3f9;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --wb-fs-h1:24px; --wb-fs-h2:16px; --wb-fs-title:14px; --wb-fs-body:13px; --wb-fs-aux:12px;
  --wb-fs-sub:12px; /* 中台 11px；项目底线字号 ≥ 12px */
  --wb-sp-1:4px; --wb-sp-2:6px; --wb-sp-3:8px; --wb-sp-4:10px; --wb-sp-5:12px; --wb-sp-6:16px; --wb-sp-7:24px;
  --wb-danger:#b33830; --wb-warning:#856000; --wb-success:#21704d;
  --wb-danger-soft:#fff1ef; --wb-warning-soft:#fff5c2; --wb-success-soft:#eff8f3; --wb-danger-line:#f0cac7;
  color-scheme:light;
  --wb-ease:cubic-bezier(.2,.8,.2,1); --wb-spring:cubic-bezier(.34,1.45,.64,1);
  --wb-ring:rgba(16,36,62,.1); --wb-ring-2:rgba(16,36,62,.17); --wb-shadow:rgba(16,36,62,.2); --wb-shadow-2:rgba(16,36,62,.3); --wb-glow-fx:rgba(29,82,201,.45); --wb-pill:#fff;
  --wb-blue-fill:#1d52c9; --wb-blue-hover:#1745ab; --wb-blue-line:#cddcff; --wb-purple-soft:#f3edfa; --wb-purple-ink:#704a9e; --wb-orange:#f79009;
  --wb-amber:#b45309; --wb-amber-soft:#fff3e0; --wb-violet:#6941c6; --wb-violet-soft:#efe7ff;
  --wb-line-strong:#bccce5; --wb-surface-alt:#fbfcfe; --wb-hover:#f5f8ff; --wb-glow:#d9e4f2; --wb-zero:#c2cad6; --wb-skel:#eef0f5; --wb-scroll:#bccce5;
  --wb-danger-fill:var(--wb-danger); --wb-success-fill:var(--wb-success); --wb-on-fill:#fff;
  --wb-danger-ink:#7a2620; --wb-warning-ink:#6b4f00; --wb-success-ink:#1d5c3f; --wb-notice-ink:#2f4c72; --wb-notice-warn:#fff9dc;
  --wb-warning-line:#f0dd8a; --wb-success-line:#c9e6d6; --wb-tip-bg:#172233; --wb-tip-ink:#fff; --wb-toast-bg:#152238; --wb-toast-ink:#fff;
  --wb-scrim:rgba(15,23,51,.45); --wb-spot:rgba(10,20,36,.6);
  --nav-ink:#f4f7fb; --nav-text:#b8c2d2; --nav-label:#6f7e95; --nav-line:#263248; --nav-sub:#9facbd; --nav-dot:#4a5873; --nav-scroll:#64748b;
}
/* 深色（wb:1648–1668 原样；Unfold 选「跟随系统」且系统深色时也加 .dark，所以只要这一块） */
html.dark {
  color-scheme:dark;
  --wb-ink:#e3eaf4; --wb-secondary:#b2c0d2; --wb-muted:#8a9ab1;
  --wb-blue:#82aaff; --wb-blue-soft:#172647; --wb-green:#45b981; --wb-purple:#b89df0; --wb-red:#f07167; --wb-yellow:#e2b42a;
  --wb-line:#243146; --wb-surface:#131b27; --wb-bg:#0c121b;
  --nav:#080d14; --nav-hover:#152030; --nav-muted:#8391a8; --subtle:#1a2434; --surface-2:#182131;
  --wb-danger:#ff9087; --wb-warning:#efc04a; --wb-success:#62d29c;
  --wb-danger-soft:#321a1b; --wb-warning-soft:#2d2510; --wb-success-soft:#0f2519; --wb-danger-line:#5b2c2c;
  --wb-ring:rgba(160,185,225,.12); --wb-ring-2:rgba(160,185,225,.2); --wb-shadow:rgba(0,0,0,.55); --wb-shadow-2:rgba(0,0,0,.7); --wb-glow-fx:rgba(58,107,224,.6); --wb-pill:#26354d;
  --wb-blue-fill:#3a6be0; --wb-blue-hover:#4b7af0; --wb-blue-line:#2b437c; --wb-purple-soft:#271f40; --wb-purple-ink:#cbb6f6; --wb-orange:#f2a43a;
  --wb-amber:#f2a43a; --wb-amber-soft:#2d2108; --wb-violet:#cbb6f6; --wb-violet-soft:#271f40;
  --wb-line-strong:#3a4c68; --wb-surface-alt:#16202f; --wb-hover:#1a2638; --wb-glow:#13213a; --wb-zero:#4a5870; --wb-skel:#212c3d; --wb-scroll:#3a4c68;
  --wb-danger-fill:#c4453d; --wb-success-fill:#1d7a51; --wb-on-fill:#fff;
  --wb-danger-ink:#ffb8b1; --wb-warning-ink:#f4d27c; --wb-success-ink:#93e2bb; --wb-notice-ink:#c4d4f2; --wb-notice-warn:#2d2510;
  --wb-warning-line:#584718; --wb-success-line:#1f4a35; --wb-tip-bg:#e3eaf4; --wb-tip-ink:#0f1a2a; --wb-toast-bg:#2a3952; --wb-toast-ink:#f2f6fb;
  --wb-scrim:rgba(2,6,12,.62); --wb-spot:rgba(0,0,0,.72);
  --nav-ink:#eef3fa; --nav-text:#a9b5c7; --nav-label:#65748b; --nav-line:#1a2433; --nav-sub:#93a1b5; --nav-dot:#3b4960; --nav-scroll:#3b4960;
}

/* Unfold 的变量：html:root 压过 Unfold 写在 <body> 里的 :root 色阶（settings.UNFOLD["COLORS"]）。字色三档都指到中台 token，深浅色跟着换 */
html:root {
  --font-sans:var(--wb-font);
  --color-font-important-light:var(--wb-ink); --color-font-important-dark:var(--wb-ink);
  --color-font-default-light:var(--wb-ink); --color-font-default-dark:var(--wb-ink);
  --color-font-subtle-light:var(--wb-secondary); --color-font-subtle-dark:var(--wb-secondary);
  --blur-xs:0px; /* Unfold 吸底条、遮罩的毛玻璃不要：中台没有 */
  --color-green-600:var(--wb-success-fill); --color-red-600:var(--wb-danger-fill); --color-red-700:var(--wb-danger);
}
/* 深色主色：中台深色 --wb-blue-fill #3a6be0（按钮 / 选中）、--wb-blue #82aaff（链接 / 强调） */
html.dark:root {
  --color-primary-600:#3a6be0; --color-primary-700:#4b7af0; --color-primary-500:#82aaff; --color-primary-400:#82aaff;
}

/* pages.css 和自定义页面还在用的 --sm-* 名字：都指到中台 token（深浅色自动跟着换） */
:root {
  --sm-ink:var(--wb-ink); --sm-ink-2:var(--wb-secondary); --sm-head-ink-2:var(--wb-secondary);
  --sm-line:var(--wb-line); --sm-line-2:var(--wb-line-strong); --sm-input-line:var(--wb-line-strong);
  --sm-glass-card:var(--wb-surface); --sm-sheen:none; --sm-hl:0 0 0 1px var(--wb-ring); --sm-shadow-card:0 1px 2px var(--wb-ring),0 14px 28px -18px var(--wb-shadow-2);
  --sm-glass-sub:var(--subtle); --sm-glass-mini:var(--wb-surface); --sm-glass-lift-hover:var(--surface-2);
  --sm-mute-bg:var(--subtle); --sm-table-head:var(--subtle);
  --sm-sel-bg:var(--wb-surface); --sm-sel-shadow:0 1px 3px #10243e14;
  --sm-primary-bg:var(--wb-blue-fill); --sm-primary-ink:var(--wb-on-fill);
  --sm-solid-bg:var(--wb-surface); --sm-solid-ink:var(--wb-ink); --sm-focus:var(--wb-blue);
  --sm-dock-bg:var(--surface-2); --sm-dock-ink:var(--wb-secondary); --sm-dock-hover:var(--wb-hover);
  --sm-dock-count-bg:var(--subtle); --sm-dock-count-on:var(--wb-blue-soft);
  --sm-post-bg:var(--nav); --sm-post-ink:var(--nav-ink); --sm-post-line:var(--nav-line);
  --sm-plat-bg:var(--wb-surface); --sm-plat-edge:var(--wb-line); --sm-plat-shadow:none; --sm-plat-ink:var(--wb-ink);
  --sm-shadow-ic:inset 0 0 0 1px var(--wb-line);
  --sm-accent-solid:var(--wb-blue); --sm-accent-ink:var(--wb-notice-ink);
  --sm-accent-grad:linear-gradient(var(--wb-blue-soft),var(--wb-blue-soft)); --sm-accent-edge:inset 0 0 0 1px var(--wb-blue-line);
  --sm-chart-mint:var(--wb-blue); --sm-chart-ink:var(--wb-ink);
  --sm-ok-ink:var(--wb-success); --sm-warn-ink:var(--wb-warning); --sm-warn-bg:var(--wb-notice-warn);
  --sm-bad-ink:var(--wb-danger); --sm-bad-bg:var(--wb-danger-soft);
}

/* ============ 2. 页面底、字体（wb:51 .wb-canvas、wb:86–94 页面壳）============ */
html { background:var(--wb-bg); }
@media(min-width:761px) { html { scrollbar-gutter:stable; } }
body { background:radial-gradient(ellipse 780px 480px at 88% 160px,var(--wb-glow),transparent 75%),var(--wb-bg); color:var(--wb-ink); font-family:var(--wb-font); font-size:var(--wb-fs-body); line-height:1.5; }
.wb-button:focus-visible,.wb-field:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid var(--wb-blue); outline-offset:3px; }
* { scrollbar-width:thin; scrollbar-color:var(--wb-scroll) transparent; } /* wb:1400 主题细滚动条 */
[class~="text-[11px]"], [class~="text-[10px]"] { font-size:var(--wb-fs-sub); } /* Unfold 自带的 10/11px 小字拉到 12 */

/* ============ 3. 外壳：侧栏（wb:97–143），模板 templates/admin/nav_sidebar.html ============ */
.app { min-height:100dvh; display:grid; grid-template-columns:232px minmax(0,1fr); }
.app.is-solo { display:block; }
.sidebar { position:sticky; top:0; height:100dvh; display:flex; flex-direction:column; color:var(--nav-ink); background:var(--nav); border-right:1px solid var(--nav-line); interpolate-size:allow-keywords; }
.brand { height:64px; padding:var(--wb-sp-6) var(--wb-sp-6); border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:var(--wb-sp-4); flex-shrink:0; }
.nav-panel { flex:1; min-height:0; display:flex; flex-direction:column; }
.nav-toggle { display:none; margin-left:auto; width:44px; height:44px; padding:0; align-items:center; justify-content:center; border:0; border-radius:10px; background:transparent; color:#fff; }
.nav-toggle:hover { background:var(--nav-hover); }
.nav-toggle svg { width:22px; height:22px; } .nav-toggle .nt-close, .sidebar.is-open .nav-toggle .nt-open { display:none; } .sidebar.is-open .nav-toggle .nt-close { display:block; }
/* 品牌标：中台是白底圆 + Telegram 纸飞机；这里是蓝色圆底 + 白色站点图标（UNFOLD["SITE_SYMBOL"]） */
.brand-mark { width:32px; height:32px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; background:var(--wb-blue-fill); color:var(--wb-on-fill); }
.brand-mark .material-symbols-outlined { font-size:20px; line-height:1; }
.brand-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--nav-ink); font-weight:750; letter-spacing:.06em; font-size:var(--wb-fs-body); text-decoration:none; }
.nav-scroll { flex:1; min-height:0; overflow:auto; padding:0 var(--wb-sp-3) var(--wb-sp-5); scrollbar-color:var(--nav-scroll) var(--nav); color-scheme:dark; }
.side-label { padding:var(--wb-sp-6) var(--wb-sp-2) var(--wb-sp-2); color:var(--nav-muted); /* 中台 --nav-label 对侧栏底只有约 3.9:1 */ font-size:var(--wb-fs-sub); font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.nav a,.nav button { width:100%; min-height:36px; display:flex; align-items:center; gap:var(--wb-sp-4); margin:2px 0; padding:var(--wb-sp-2) var(--wb-sp-4); color:var(--nav-text); background:transparent; border:0; border-radius:8px; text-align:left; font-size:var(--wb-fs-title); text-decoration:none; box-sizing:border-box; }
.nav a:hover,.nav button:hover { color:#fff; background:var(--nav-hover); }
.nav a.active,.nav button.active { color:#fff; background:var(--wb-blue-fill); font-weight:600; }
.nav a .cnt { margin-left:auto; color:var(--nav-muted); font:500 var(--wb-fs-sub)/1.4 var(--mono); } /* 侧栏计数（T10）：wb:132 */
.nav a.active .cnt { color:#dbe4ff; } /* wb:133 */
html.dark .nav a.active .cnt { color:#fff; } /* 中台深色是 #dbe4ff 落在 #3a6be0 上，对比度 3.8；本项目底线 ≥ 4.5，白字 4.77 */
.nav a > span:not(.cnt):not(.nav-ic) { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 图标：中台是 18px 线条 SVG（stroke 1.8）。这里用 Material Symbols（Unfold 自带的字体不是可变字体，调不了字重），
   用同底色的 0.35px 描边把字形边缘吃掉一圈，看起来细一档；描边色跟着当前项的底色走 */
.nav a { --nav-ic-bg:var(--nav); }
.nav a:hover { --nav-ic-bg:var(--nav-hover); }
.nav a.active { --nav-ic-bg:var(--wb-blue-fill); }
.nav .nav-ic { flex:none; width:18px; height:18px; overflow:visible; font-size:18px; line-height:18px; -webkit-text-stroke:.35px var(--nav-ic-bg); }
.nav-group > summary.side-label { list-style:none; display:flex; align-items:center; gap:var(--wb-sp-3); margin:var(--wb-sp-5) 0 var(--wb-sp-1); padding:var(--wb-sp-1) var(--wb-sp-3) var(--wb-sp-1) var(--wb-sp-4); border-radius:6px; user-select:none; transition:color .2s,background-color .2s; }
.nav-group > summary.side-label::-webkit-details-marker { display:none; }
.nav-group > summary.side-label:hover { color:#fff; background:var(--nav-hover); }
.nav-group > summary.side-label::after { content:""; margin-left:auto; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); transition:transform .28s cubic-bezier(.22,1,.36,1); }
.nav-group:not([open]) > summary.side-label::after { transform:rotate(-45deg); }
.nav-group::details-content { block-size:0; overflow:hidden; transition:block-size .3s cubic-bezier(.22,1,.36,1),content-visibility .3s allow-discrete; }
.nav-group[open]::details-content { block-size:auto; }
.nav-group:not(:has(.nav a)) { display:none; } /* 这一组没有当前人员能进的页面：整组不显示 */
.sidebar-foot { padding:var(--wb-sp-5); border-top:1px solid rgba(255,255,255,.08); flex-shrink:0; }
.user-chip { display:flex; align-items:center; gap:var(--wb-sp-3); padding:var(--wb-sp-4) var(--wb-sp-4); border-radius:8px; background:rgba(255,255,255,.05); font-size:var(--wb-fs-aux); }
.user-chip .mav { width:28px; height:28px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center; background:#263248; color:#fff; font-size:var(--wb-fs-body); font-weight:700; }
.user-chip .who { flex:1 1 auto; min-width:0; }
.user-chip .who > span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-chip small { display:block; color:var(--nav-muted); font-size:var(--wb-fs-sub); }
.user-chip form { flex:none; margin:0; }
.user-chip a,.user-chip button { flex:none; margin-left:auto; padding:2px var(--wb-sp-1); color:var(--nav-muted); background:transparent; border:0; font-size:var(--wb-fs-sub); text-decoration:none; white-space:nowrap; cursor:pointer; }
.user-chip a:hover,.user-chip button:hover { color:#fff; }
.user-chip small, .user-chip .who > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-chip:has(.chip-ic) { gap:var(--wb-sp-2); } /* 比中台多一个改密码小图标，间距收到 6 */
.user-chip .chip-ic { display:inline-grid; place-items:center; width:24px; height:24px; padding:0; border-radius:6px; }
.user-chip .chip-ic:hover { background:var(--nav-hover); }
.user-chip .chip-ic .material-symbols-outlined { font-size:16px; -webkit-text-stroke:.35px var(--nav); }

/* ============ 4. 外壳：顶栏（wb:145–153、1529–1546），模板 unfold/helpers/header.html ============ */
.workspace { min-width:0; }
.topbar { position:sticky; top:0; z-index:10; min-height:64px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--wb-sp-5) var(--wb-sp-6); padding:var(--wb-sp-4) var(--wb-sp-7); border-bottom:1px solid var(--wb-line); }
.wb-glass { background:var(--wb-surface); border-color:var(--wb-line); box-shadow:0 1px 2px rgba(16,36,62,.05); }
.top-search { position:relative; display:flex; align-items:center; flex:0 1 320px; min-width:0; margin:0; }
.top-search svg { position:absolute; left:10px; width:16px; height:16px; color:var(--wb-secondary); pointer-events:none; }
.top-search .wb-field { width:100%; padding-left:calc(var(--wb-sp-7) + var(--wb-sp-4)); padding-right:calc(var(--wb-sp-7) * 2 + var(--wb-sp-2)); background:var(--subtle); border-color:var(--subtle); cursor:pointer;
  color:var(--wb-secondary); /* 是按钮：占位字用 --wb-secondary（中台 --wb-muted 在 --subtle 底上不到 4.5:1） */ text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-search .wb-field:hover { background:var(--wb-surface); border-color:var(--wb-line-strong); }
.top-search .wb-field:focus-visible { background:var(--wb-surface); border-color:var(--wb-blue); }
.wb-kbd { position:absolute; right:8px; display:inline-flex; align-items:center; min-height:20px; padding:0 var(--wb-sp-2); border:1px solid var(--wb-line); border-bottom-width:2px; border-radius:5px; background:var(--wb-surface); color:var(--wb-secondary); font:500 var(--wb-fs-sub)/1 var(--wb-font); white-space:nowrap; pointer-events:none; }
.top-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--wb-sp-3); margin-left:auto; }
.wb-theme { flex:none; }
.wb-theme button { display:inline-flex; align-items:center; gap:var(--wb-sp-1); padding:var(--wb-sp-1) var(--wb-sp-4); }
.wb-theme svg { width:15px; height:15px; flex:none; }
.wb-theme-l { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.wb-theme-m { display:none; }

/* ============ 5. 内容区 + 页头（wb:155–165），模板 templates/admin/base.html ============ */
main { padding:20px 24px 40px; min-width:0; max-width:none; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--wb-sp-5) var(--wb-sp-6); flex-wrap:wrap; margin-bottom:var(--wb-sp-6); }
.page-head > div { min-width:0; }
.page-head h1 { color:var(--wb-ink); font-size:var(--wb-fs-h1); font-weight:650; letter-spacing:-.02em; line-height:1.3; text-wrap:balance; overflow-wrap:anywhere; }
.page-head p { margin-top:var(--wb-sp-1); color:var(--wb-secondary); /* 中台 --wb-muted 在画布底上不到 4.5:1 */ font-size:var(--wb-fs-aux); }
.page-head p a { color:var(--wb-blue); }
.page-head .back-link { display:inline-flex; align-items:center; gap:var(--wb-sp-1); min-height:24px; margin-bottom:var(--wb-sp-1); color:var(--wb-blue); font-size:var(--wb-fs-aux); text-decoration:none; }
.page-head .back-link:hover { text-decoration:underline; }
.head-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--wb-sp-3); flex-shrink:0; }
.head-actions:empty { display:none; }
.section { margin-top:var(--wb-sp-6); }
.xm-apps > .section:first-child { margin-top:0; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:var(--wb-sp-5); flex-wrap:wrap; margin-bottom:var(--wb-sp-4); }
.section-head h2 { color:var(--wb-ink); font-size:var(--wb-fs-h2); font-weight:650; }
.section-head h2 a { color:inherit; text-decoration:none; }
.section-head h2 .cnt,.rail-card h3 .cnt,.tabs button .cnt { margin-left:var(--wb-sp-3); padding:2px var(--wb-sp-3); border-radius:999px; background:var(--subtle); color:var(--wb-secondary); font:500 var(--wb-fs-sub)/1.6 var(--mono); vertical-align:middle; }

/* ============ 6. 中台组件（wb:52–80、166–176、227–262、280–375，原样）============ */
.wb-card { background:var(--wb-surface); border:1px solid transparent; border-radius:var(--wb-radius); padding:var(--wb-sp-6); box-shadow:0 0 0 1px var(--wb-ring),0 1px 2px var(--wb-ring),0 14px 28px -18px var(--wb-shadow-2); }
.wb-button,.wb-field { box-sizing:border-box; min-height:var(--wb-control-height); border:1px solid var(--wb-line); border-radius:6px; padding:var(--wb-sp-2) var(--wb-sp-4); color:var(--wb-ink); background:var(--wb-surface); font:500 var(--wb-fs-aux)/1.5 var(--wb-font); }
.wb-button { cursor:pointer; transition:background-color .12s,box-shadow .12s; }
a.wb-button { display:inline-flex; align-items:center; justify-content:center; gap:var(--wb-sp-1); text-decoration:none; white-space:nowrap; }
.wb-button:hover:not(:disabled) { background:var(--wb-hover); border-color:var(--wb-line-strong); }
.wb-button.wb-primary { background:var(--wb-blue-fill); border-color:var(--wb-blue-fill); color:var(--wb-on-fill); }
.wb-button.wb-primary:hover:not(:disabled) { background:var(--wb-blue-hover); }
.wb-button.wb-danger { color:var(--wb-danger); border-color:var(--wb-danger-line); }
.wb-button.wb-danger:hover:not(:disabled) { background:var(--wb-danger-soft); border-color:var(--wb-danger-line); }
.wb-button:disabled,.wb-field:disabled { cursor:not-allowed; opacity:.6; }
.wb-button .material-symbols-outlined { font-size:16px; line-height:1; }
.wb-field { max-width:100%; min-width:0; }
.wb-badge { display:inline-flex; box-sizing:border-box; align-items:center; justify-content:center; flex-shrink:0; width:56px; height:24px; padding:0; border-radius:4px; vertical-align:middle; white-space:nowrap; font:500 var(--wb-fs-sub)/1 var(--wb-font); color:var(--wb-secondary); background:var(--subtle); text-decoration:none; }
.wb-badge.auto { width:auto; padding:0 var(--wb-sp-3); }
.wb-badge .material-symbols-outlined { margin:0 2px 0 -2px; font-size:14px; }
.wb-badge[data-tone="info"] { color:var(--wb-blue); background:var(--wb-blue-soft); }
.wb-badge[data-tone="success"] { color:var(--wb-success); background:var(--wb-success-soft); }
.wb-badge[data-tone="warning"] { color:var(--wb-warning); background:var(--wb-warning-soft); }
.wb-badge[data-tone="danger"] { color:var(--wb-danger); background:var(--wb-danger-soft); }
.wb-badge[data-tone="pending"] { color:var(--wb-purple-ink); background:var(--wb-purple-soft); }
.wb-progress { display:block; height:4px; border-radius:4px; background:var(--wb-line); overflow:hidden; }
.wb-progress > i { display:block; height:100%; background:var(--wb-blue); transform-origin:left center; animation:wb-progress-in .65s cubic-bezier(.4,0,.2,1) both; }
.wb-dialog { padding:var(--wb-sp-7); width:min(640px,calc(100vw - 24px)); max-height:85dvh; overflow:auto; border:1px solid transparent; border-radius:18px; color:var(--wb-ink); background:var(--wb-surface); box-shadow:0 0 0 1px var(--wb-ring),0 30px 60px -30px var(--wb-shadow-2); }
.wb-dialog::backdrop { background:var(--wb-scrim); }
.wb-empty { padding:var(--wb-sp-7) var(--wb-sp-6); text-align:center; color:var(--wb-secondary); }
.notice { display:flex; align-items:flex-start; gap:var(--wb-sp-4); margin-bottom:var(--wb-sp-6); padding:var(--wb-sp-4) var(--wb-sp-5); color:var(--wb-notice-ink); background:var(--wb-blue-soft); border:1px solid var(--wb-blue-line); border-radius:8px; font-size:var(--wb-fs-aux); line-height:1.6; }
.notice strong { color:var(--wb-blue); }
.notice a { color:inherit; text-decoration:underline; }
.notice.warn { color:var(--wb-warning-ink); background:var(--wb-notice-warn); border-color:var(--wb-warning-line); } .notice.warn strong { color:var(--wb-warning); }
.notice.bad { color:var(--wb-danger-ink); background:var(--wb-danger-soft); border-color:var(--wb-danger-line); } .notice.bad strong { color:var(--wb-danger); }
.notice.ok { color:var(--wb-success-ink); background:var(--wb-success-soft); border-color:var(--wb-success-line); }
.tabs,.seg { position:relative; isolation:isolate; }
.tabs { display:flex; flex-wrap:wrap; gap:var(--wb-sp-1); padding:var(--wb-sp-1); background:var(--surface-2); border-radius:8px; width:max-content; max-width:100%; margin-bottom:var(--wb-sp-5); }
.seg { display:inline-flex; flex-wrap:wrap; max-width:100%; gap:2px; padding:var(--wb-sp-1); background:var(--surface-2); border-radius:8px; }
.seg button { min-height:30px; padding:var(--wb-sp-2) var(--wb-sp-5); border:0; border-radius:6px; background:transparent; color:var(--wb-secondary); font-size:var(--wb-fs-aux); font-weight:500; white-space:nowrap; cursor:pointer; }
.seg button[aria-pressed="true"] { background:var(--wb-surface); color:var(--wb-blue); font-weight:600; box-shadow:0 1px 3px #10243e14; }
.wb-theme button { padding:var(--wb-sp-1) var(--wb-sp-4); } /* wb:1535 压过 .seg button 的内边距 */
.tbl-wrap { overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; border:1px solid transparent; border-radius:14px; background:var(--wb-surface); box-shadow:0 0 0 1px var(--wb-ring),0 1px 2px var(--wb-ring),0 14px 28px -18px var(--wb-shadow-2); }
.tbl { width:100%; border-collapse:collapse; }
.tbl th { position:sticky; top:0; z-index:2; height:var(--wb-th-h); padding:0 var(--wb-sp-5); background:var(--subtle); color:var(--wb-secondary); /* 中台 --wb-muted 在 --subtle 底上不到 4.5:1 */ font-size:var(--wb-fs-sub); font-weight:500; text-align:left; white-space:nowrap; box-shadow:0 1px 0 var(--wb-line); }
.tbl td { height:40px; padding:var(--wb-sp-1) var(--wb-sp-5); border-top:1px solid var(--wb-line); font-size:var(--wb-fs-aux); white-space:nowrap; max-width:320px; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
.tbl tbody tr:first-child td { border-top:0; } .tbl tbody tr:hover td { background:var(--wb-blue-soft); }
.tbl td.mono { font-family:var(--mono); font-size:var(--wb-fs-aux); }
table td.ops,table th.ops { text-align:right; }
.ops-inline { display:flex; gap:var(--wb-sp-1); justify-content:flex-end; flex-wrap:nowrap; }
.tbl .ops .wb-button,.ops-inline .wb-button { min-height:28px; padding:var(--wb-sp-1) var(--wb-sp-3); font-size:var(--wb-fs-sub); }
.text-button { padding:0; border:0; background:transparent; color:var(--wb-ink); text-align:left; font:inherit; cursor:pointer; text-decoration:none; } .text-button:hover { color:var(--wb-blue); }
.workbench { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:var(--wb-sp-6); align-items:start; }
.workbench:not(:has(> .rail > *)) { grid-template-columns:minmax(0,1fr); }
.rail { display:grid; gap:var(--wb-sp-5); position:sticky; top:80px; }
.rail-card { padding:0; overflow:hidden; }
.rail-card h3 { display:flex; align-items:center; gap:var(--wb-sp-3); padding:var(--wb-sp-5) var(--wb-sp-6); color:var(--wb-ink); font-size:var(--wb-fs-body); font-weight:650; border-bottom:1px solid var(--wb-line); background:var(--wb-surface-alt); }
.rail-card h3 .cnt { margin-left:0; }
.queue { list-style:none; margin:0; padding:0; max-height:calc(100dvh - 220px); overflow-y:auto; }
.queue li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--wb-sp-2) var(--wb-sp-4); padding:var(--wb-sp-4) var(--wb-sp-6); border-top:1px solid var(--wb-line); }
.queue li:first-child { border-top:0; } .queue li:hover { background:var(--wb-blue-soft); }
.queue .q-main { display:flex; align-items:center; gap:var(--wb-sp-3); min-width:0; }
.queue .q-main b { min-width:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.queue .q-main b a { color:var(--wb-ink); text-decoration:none; } .queue .q-main b a:hover { color:var(--wb-blue); }
.queue .q-sub { grid-column:1/-1; color:var(--wb-secondary); font-size:var(--wb-fs-sub); overflow-wrap:anywhere; }
.queue .q-sub .mono, .mono { font-family:var(--mono); }
.toast { position:fixed; right:16px; bottom:max(16px,env(safe-area-inset-bottom)); z-index:80; max-width:calc(100vw - 32px); padding:var(--wb-sp-4) var(--wb-sp-6); color:var(--wb-toast-ink); background:var(--wb-toast-bg); border-radius:14px; box-shadow:0 0 0 1px var(--wb-ring),0 16px 30px -16px var(--wb-shadow-2); font-size:var(--wb-fs-aux); animation:wb-toast-in .45s var(--wb-spring); }
.wb-fx-ring { width:14px; height:14px; border-radius:50%; border:2px solid color-mix(in srgb,currentColor 30%,transparent); border-top-color:currentColor; animation:wb-fx-turn .9s var(--wb-ease) 1 forwards; }

/* ============ 7. Unfold 列表页 → 中台 筛选条 + .tbl-wrap/.tbl ============
   依赖 Unfold admin/change_list.html：工具条 div（lg:-mb-8 那层：#changelist-search、a.filter-open-button）、
   admin/change_list_results.html：#changelist-form > div.overflow-x-auto > table#result_list（每行一个 tbody，隔行 tbody 带 bg-base-50） */
#changelist { margin-inline:0; } /* Unfold 的 -mx-4 + 内层 px-4：手机 main 只有 12px 内边距时多出 4px 横向溢出 */
#changelist > .changelist-form-container { padding-inline:0; }
#changelist .grow > div[class~="lg:-mb-8"] { margin:0 0 var(--wb-sp-5); padding:0; border:0; border-radius:0; background:transparent; gap:var(--wb-sp-3); }
#changelist-form > div[class~="overflow-x-auto"] { border:1px solid transparent; border-radius:14px; background:var(--wb-surface); box-shadow:0 0 0 1px var(--wb-ring),0 1px 2px var(--wb-ring),0 14px 28px -18px var(--wb-shadow-2); overscroll-behavior-x:contain; }
#result_list { border-collapse:collapse; }
#result_list thead th { height:var(--wb-th-h); padding-top:0; padding-bottom:0; background:var(--subtle); border:0; color:var(--wb-secondary); font-size:var(--wb-fs-sub); font-weight:500; line-height:1.5; white-space:nowrap; box-shadow:0 1px 0 var(--wb-line); }
#result_list thead th :is(a, span, div) { color:var(--wb-secondary); }
#result_list tbody { background:transparent; }
#result_list tbody :is(td, th) { height:40px; padding-top:var(--wb-sp-1); padding-bottom:var(--wb-sp-1); border-color:var(--wb-line); color:var(--wb-ink); font-size:var(--wb-fs-aux); font-weight:400; line-height:1.5; white-space:nowrap; vertical-align:middle; transition:background-color .2s var(--wb-ease),box-shadow .2s var(--wb-ease); }
#result_list tbody:first-of-type tr:first-child > * { border-top-color:transparent; }
#result_list tbody tr:is(:hover, .selected) > * { background:var(--wb-blue-soft); }
#result_list tbody tr:hover > :first-child { box-shadow:inset 2px 0 0 var(--wb-blue); }
#result_list tbody :is(td, th) a { color:var(--wb-blue); }
#result_list tbody th a { font-weight:600; }
/* 时间、key 前缀 / 尾号这类列：等宽字（中台 .tbl td.mono） */
#result_list :is(td, th):is(.field-created_at, .field-updated_at, .field-last_login, .field-checked_at, .field-synced_at, .field-last_used_at, .field-prefix, .field-last4) { font-family:var(--mono); font-variant-numeric:tabular-nums; }
#result_list .field-number, #result_list .field-log_count, #result_list .field-remaining_today, #result_list .field-size_mb { font-variant-numeric:tabular-nums; }
/* 行里的外链（帖子「X 链接」）：中台行内小号描边按钮 .tbl .ops .wb-button */
#result_list td.field-x_link a { display:inline-block; max-width:16rem; min-height:28px; padding:var(--wb-sp-1) var(--wb-sp-3); line-height:18px; vertical-align:middle; border:1px solid var(--wb-line); border-radius:6px; background:var(--wb-surface); color:var(--wb-ink); font-size:var(--wb-fs-sub); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; transition:background-color .12s,box-shadow .12s; }
#result_list td.field-x_link a:hover { background:var(--wb-hover); border-color:var(--wb-line-strong); }
/* 列表下面的条数 / 分页（Unfold helpers/pagination.html）：中台 .foot-note，不吸底 */
main > div:has(> div > .paginator), main > div[class~="lg:sticky"] { position:static; margin:0; padding:var(--wb-sp-5) 2px 0; border:0; background:transparent; color:var(--wb-secondary); font-size:var(--wb-fs-aux); }
main > div[class~="lg:sticky"] > div { max-width:none; }
/* 空列表：Unfold 的「0 条」空状态 */
#changelist-form > div:not([class~="overflow-x-auto"]) [class~="border-dashed"] { border-color:var(--wb-line-strong); }

/* 搜索框、筛选按钮（Unfold helpers/search.html 的 #changelist-search > div；change_list_filter_button.html 的 a.filter-open-button） */
#changelist-search > div { min-height:var(--wb-control-height); border:1px solid var(--wb-line); border-radius:6px; background:var(--wb-surface); color:var(--wb-ink); box-shadow:none; }
#changelist-search > div:focus-within { outline:2px solid var(--wb-blue); outline-offset:3px; }
#changelist-search input { min-height:0; padding:var(--wb-sp-2) var(--wb-sp-3); border:0; background:transparent; color:var(--wb-ink); font:500 var(--wb-fs-aux)/1.5 var(--wb-font); }
#changelist-search input:focus-visible { outline:none; }
#changelist-search kbd { border-color:var(--wb-line); background:var(--subtle); color:var(--wb-secondary); }

/* 选中行后出现的批量操作条（Unfold helpers/change_list_actions.html）：Unfold 按 sidebarOpen 算左边（≤1280 时算成 0，
   会盖住本主题常驻的侧栏），这里按本主题的侧栏宽定死：232 / ≤1100 是 200 / ≤760 侧栏在顶部，左边 0 */
#changelist-form > div[class~="fixed"] { inset-inline-start:232px !important; }
#changelist-actions-wrapper > div, #changelist-actions > div { padding:var(--wb-sp-3); gap:var(--wb-sp-3); border:1px solid transparent; border-radius:12px; background:var(--wb-surface); color:var(--wb-ink); box-shadow:0 0 0 1px var(--wb-ring),0 18px 36px -16px var(--wb-shadow-2); }
#changelist-actions .action-counter { color:var(--wb-secondary); font-size:var(--wb-fs-aux); }

/* ============ 8. Unfold 按钮 → 中台 .wb-button / .wb-primary / .wb-danger ============
   依赖 Unfold components/button.html 的类串（font-medium inline-flex … rounded-default whitespace-nowrap；主 bg-primary-600、
   默认 bg-white、次 bg-base-100、幽灵 bg-transparent、危险 bg-red-600）。包在 :where() 里（优先级 0）：pages.css 按页定的高度照样生效 */
:where(a, button):where([class~="font-medium"][class~="inline-flex"][class~="rounded-default"][class~="whitespace-nowrap"]),
:where(a.filter-open-button, #changelist-actions button[type="submit"]) {
  min-height:var(--wb-control-height); padding:var(--wb-sp-2) var(--wb-sp-4); gap:var(--wb-sp-1); border:1px solid var(--wb-line); border-radius:6px;
  background:var(--wb-surface); color:var(--wb-ink); box-shadow:none; font:500 var(--wb-fs-aux)/1.5 var(--wb-font); cursor:pointer;
  transition:background-color .12s,box-shadow .12s;
}
:where(a, button):where([class~="font-medium"][class~="inline-flex"][class~="rounded-default"]) > .material-symbols-outlined,
:where(a.filter-open-button) > .material-symbols-outlined { font-size:16px; }
:where(a, button):where([class~="font-medium"][class~="inline-flex"][class~="rounded-default"]):where(:hover:not(:disabled)),
:where(a.filter-open-button:hover) { background:var(--wb-hover); border-color:var(--wb-line-strong); color:var(--wb-ink); }
:where(a, button):where([class~="font-medium"][class~="inline-flex"][class~="rounded-default"][class~="bg-primary-600"]),
:where(#changelist-actions button[type="submit"]) { border-color:var(--wb-blue-fill); background:var(--wb-blue-fill); color:var(--wb-on-fill); }
:where(a, button):where([class~="font-medium"][class~="inline-flex"][class~="rounded-default"][class~="bg-primary-600"]):where(:hover:not(:disabled)),
:where(#changelist-actions button[type="submit"]:hover) { border-color:var(--wb-blue-hover); background:var(--wb-blue-hover); color:var(--wb-on-fill); }
:where(a, button):where([class~="font-medium"][class~="inline-flex"][class~="rounded-default"][class~="bg-red-600"]) { border-color:var(--wb-danger-line); background:var(--wb-surface); color:var(--wb-danger); }
:where(a, button):where([class~="font-medium"][class~="inline-flex"][class~="rounded-default"][class~="bg-red-600"]):where(:hover:not(:disabled)) { border-color:var(--wb-danger-line); background:var(--wb-danger-soft); color:var(--wb-danger); }
:where(a, button):where([class~="font-medium"][class~="inline-flex"][class~="rounded-default"][class~="bg-transparent"]) { border-color:transparent; background:transparent; }
:where(a, button):where([class~="font-medium"][class~="inline-flex"]):where(:disabled, [class~="cursor-not-allowed"], [aria-disabled="true"]) { opacity:.6; cursor:not-allowed; }
/* 修改页外键右边的「⋮」小方块（Unfold related-widget-wrapper） */
.related-widget-wrapper [x-on\:click][class~="w-[38px]"] { width:36px; height:36px; border:1px solid var(--wb-line); border-radius:6px; box-shadow:none; color:var(--wb-secondary); transition:background-color .12s,box-shadow .12s; }
.related-widget-wrapper [x-on\:click][class~="w-[38px]"]:hover { border-color:var(--wb-line-strong); background:var(--wb-hover); color:var(--wb-ink); }

/* ============ 9. Unfold 表单 → 中台卡片 + .field / .wb-field ============
   依赖 Unfold admin/includes/fieldset.html（fieldset.module > .form-rows / .field-line）、表单控件都带的 focus:outline-primary-600、
   勾选框 appearance-none、helpers/field 的 label（block font-semibold mb-2）、保存条 admin/submit_line.html（#submit-row） */
fieldset.module > .form-rows { padding:var(--wb-sp-1) var(--wb-sp-6); border:1px solid transparent; border-radius:var(--wb-radius); background:var(--wb-surface); box-shadow:0 0 0 1px var(--wb-ring),0 1px 2px var(--wb-ring),0 14px 28px -18px var(--wb-shadow-2); }
fieldset.module > .form-rows .field-line { padding:var(--wb-sp-5) 0; border-color:var(--wb-line); border-style:solid; }
:is(fieldset.module, #content .module) > h2 { height:auto; margin:0 0 var(--wb-sp-4); padding:0; border-radius:0; background:transparent; color:var(--wb-ink); font-size:var(--wb-fs-h2); font-weight:650; line-height:1.5; }
:where(input, select, textarea):where([class~="focus:outline-primary-600"]):where(:not([type="checkbox"], [type="radio"])) {
  min-height:var(--wb-control-height); border:1px solid var(--wb-line); border-radius:6px; background-color:var(--wb-surface); color:var(--wb-ink); box-shadow:none; font:500 var(--wb-fs-aux)/1.5 var(--wb-font);
}
:where(input, select):where([class~="focus:outline-primary-600"]):where(:not([type="checkbox"], [type="radio"], [type="file"])) { padding:var(--wb-sp-2) var(--wb-sp-4); }
:where(textarea):where([class~="focus:outline-primary-600"]) { padding:var(--wb-sp-3) var(--wb-sp-4); }
:is(input, select, textarea)[class~="focus:outline-primary-600"]:focus-visible { outline:2px solid var(--wb-blue); outline-offset:3px; border-color:var(--wb-blue); }
#search-input-command:focus-visible { outline:none; }
:is(input, select, textarea)[class~="focus:outline-primary-600"]:disabled { cursor:not-allowed; opacity:.6; }
:is(input, select, textarea)[class~="focus:outline-primary-600"][aria-invalid="true"], .errors :is(input, select, textarea)[class~="focus:outline-primary-600"] { border-color:var(--wb-danger); }
input::placeholder, textarea::placeholder { color:var(--wb-secondary); opacity:1; }
input[type="checkbox"][class~="appearance-none"]:not([class~="rounded-full"]), input[type="radio"][class~="appearance-none"] { width:16px; height:16px; min-width:16px; border:1px solid var(--wb-line-strong); background-color:var(--wb-surface); box-shadow:none; }
input[type="checkbox"][class~="appearance-none"]:not([class~="rounded-full"]) { border-radius:4px; }
:is(input[type="checkbox"]:not([class~="rounded-full"]), input[type="radio"])[class~="appearance-none"]:checked { border-color:var(--wb-blue-fill); background-color:var(--wb-blue-fill); }
/* Unfold 开关（布尔字段的 switch 控件：圆角 checkbox，滑块画在 ::after）→ 中台 .cx-sw 40×24 蓝色开关（wb:1153–1157），动效同 wb:1409–1412 */
input[type="checkbox"][class~="appearance-none"][class~="rounded-full"] { width:40px; min-width:40px; height:24px; border:0; border-radius:12px; background-color:var(--wb-line-strong); transition:background-color .35s var(--wb-ease),box-shadow .35s var(--wb-ease); }
input[type="checkbox"][class~="appearance-none"][class~="rounded-full"]::after { top:3px; left:3px; width:18px; height:18px; border-radius:50%; background-color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.18); transform-origin:left center; transition:transform .5s var(--wb-spring),scale .3s var(--wb-ease); }
input[type="checkbox"][class~="appearance-none"][class~="rounded-full"]:checked { background-color:var(--wb-blue); }
input[type="checkbox"][class~="appearance-none"][class~="rounded-full"]:checked::after { left:3px; transform:translateX(16px); transform-origin:right center; }
input[type="checkbox"][class~="appearance-none"][class~="rounded-full"]:active:not(:disabled)::after { scale:1.25 1; }
input[type="checkbox"][class~="appearance-none"][class~="rounded-full"]:disabled { opacity:.45; cursor:not-allowed; }
label[class~="block"][class~="font-semibold"][class~="mb-2"], fieldset.module label[class~="font-semibold"], .form-field label[class~="font-semibold"] { color:var(--wb-secondary); font-size:var(--wb-fs-aux); font-weight:600; line-height:1.5; } /* 中台 .field label */
#content .readonly { color:var(--wb-ink); font-size:var(--wb-fs-body); }
/* 改密码等 Unfold 自带的小表单（fieldset.fieldset.rounded-default，按钮行在 fieldset 底部）→ 中台 .wb-card（wb:54） */
#content-main fieldset.fieldset[class~="rounded-default"] { padding:var(--wb-sp-6); border-color:transparent; border-radius:var(--wb-radius); background:var(--wb-surface); box-shadow:0 0 0 1px var(--wb-ring),0 1px 2px var(--wb-ring),0 14px 28px -18px var(--wb-shadow-2); }
#content-main fieldset.fieldset[class~="rounded-default"] > div[class~="border-t"] { margin-inline:calc(var(--wb-sp-6) * -1); padding:var(--wb-sp-5) var(--wb-sp-6) 0; border-color:var(--wb-line); }
#content .help, #content [class~="text-subtle"] { color:var(--wb-secondary); }
span.datetimeshortcuts :is(a, button) { color:var(--wb-secondary); }
span.datetimeshortcuts :is(a, button):hover { color:var(--wb-blue); }
/* 保存条：中台没有吸底条，表单按钮是卡片下面一行（.form-actions：靠右、间距 8）。Unfold 的吸底白条、毛玻璃底都去掉 */
#submit-row { position:static; margin-top:var(--wb-sp-5); }
#submit-row > div { padding:0; border:0; border-radius:0; }
#submit-row > div::after { content:none; } /* Unfold lg:scrollable-top 的上方渐变 */
#submit-row div[class~="backdrop-blur-xs"] { display:none; }
#submit-row div[class~="lg:h-[64px]"] { max-width:none; height:auto; gap:var(--wb-sp-3); }
/* 页签（Unfold #tabs-items）→ 中台 .tabs */
#tabs-items { gap:var(--wb-sp-1); padding:var(--wb-sp-1); border-radius:8px; background:var(--surface-2); color:var(--wb-secondary); }
#tabs-items > a { min-height:32px; padding:var(--wb-sp-2) var(--wb-sp-6); border-radius:6px; background:transparent; color:var(--wb-secondary); font-size:var(--wb-fs-aux); font-weight:400; }
#tabs-items > a:hover { background:transparent; color:var(--wb-ink); }
#tabs-items > a.active, #tabs-items > a.active:hover { background:var(--wb-surface); color:var(--wb-blue); font-weight:600; box-shadow:0 1px 3px #10243e14; }
/* 进度条（Unfold progress 组件）→ 中台 .wb-progress */
div:has(> [class~="h-1.5"][class~="bg-primary-600"]) { height:4px; border-radius:4px; background:var(--wb-line); }
[class~="h-1.5"][class~="bg-primary-600"] { height:4px; border-radius:4px; background:var(--wb-blue); transform-origin:left center; animation:wb-progress-in .65s cubic-bezier(.4,0,.2,1) both; }

/* ============ 10. 弹层：下拉、筛选抽屉、日期 / 时间、弹窗（中台 .wb-menu-list wb:1391、.wb-dialog wb:76）============
   依赖 Unfold：带 shadow-lg rounded-default 的浮层、#modal-content / #modal-overlay、#changelist-filter（div.w-80 抽屉、#changelist-filter-close 遮罩）、
   Django 日期控件 .calendarbox / .clockbox（Unfold 这段不在 @layer 里、排在本文件后面，前面加 body 压过它） */
:is(div, nav)[class~="shadow-lg"][class~="rounded-default"]:not(.wb-ck), body :is(.calendarbox, .clockbox) { border:1px solid transparent; border-radius:12px; background:var(--wb-surface); color:var(--wb-ink); box-shadow:0 0 0 1px var(--wb-ring),0 18px 36px -16px var(--wb-shadow-2); }
:is(div, nav)[class~="shadow-lg"][class~="rounded-default"] :is(a, button)[class~="rounded-default"]:hover { background:var(--wb-blue-soft); color:var(--wb-blue); }
#modal-content { border-radius:18px; box-shadow:0 0 0 1px var(--wb-ring),0 30px 60px -30px var(--wb-shadow-2); animation:wb-fade .25s var(--wb-ease); }
#modal-overlay, #changelist-filter-close { background:var(--wb-scrim); }
#changelist-filter > div[class~="w-80"] { border:1px solid transparent; border-radius:12px; background:var(--wb-surface); color:var(--wb-ink); box-shadow:0 0 0 1px var(--wb-ring),0 18px 36px -16px var(--wb-shadow-2); }
#changelist-filter > div[class~="w-80"] div[class~="border-t"] { border-color:var(--wb-line); background:var(--wb-surface); }
#changelist-filter h3 { color:var(--wb-secondary); font-size:var(--wb-fs-aux); font-weight:600; }
#changelist-filter ul { border-color:var(--wb-line); border-radius:6px; box-shadow:none; }
#changelist-filter li { border-color:var(--wb-line); font-size:var(--wb-fs-body); }

/* ============ 11. 命令面板（wb:1549–1585 .wb-ck-*），模板 unfold/helpers/command.html、command_results.html ============ */
.wb-ck-scrim { position:fixed; inset:0; z-index:300; display:flex; justify-content:center; align-items:flex-start; padding:max(9vh,var(--wb-sp-6)) var(--wb-sp-6) var(--wb-sp-6); background:var(--wb-scrim); animation:wb-fade .25s var(--wb-ease); }
.wb-ck { width:min(640px,100%); height:min(540px,calc(100dvh - 32px)); display:flex; flex-direction:column; background:var(--wb-surface); color:var(--wb-ink); border-radius:18px; box-shadow:0 0 0 1px var(--wb-ring),0 30px 60px -24px var(--wb-shadow-2); overflow:hidden; }
.wb-ck-in { flex:none; display:flex; align-items:center; gap:var(--wb-sp-4); height:56px; padding:0 var(--wb-sp-4) 0 var(--wb-sp-6); border-bottom:1px solid var(--wb-line); }
.wb-ck-sb { flex:none; display:inline-flex; padding:0; border:0; background:transparent; color:var(--wb-secondary); }
.wb-ck-sb svg { width:18px; height:18px; }
.wb-ck-in input { flex:1 1 auto; min-width:0; height:100%; border:0; background:transparent; color:var(--wb-ink); font-size:var(--wb-fs-h2); outline:none; }
.wb-ck-in input::-webkit-search-cancel-button { display:none; }
.wb-ck-list { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:var(--wb-sp-2); }
.wb-ck-ul { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.wb-ck-opt { display:flex; align-items:center; gap:var(--wb-sp-4); min-height:46px; padding:var(--wb-sp-2) var(--wb-sp-4); border-radius:12px; color:var(--wb-ink); text-decoration:none; cursor:pointer; transition:background-color .15s var(--wb-ease); }
.wb-ck-opt[aria-selected="true"] { background:var(--wb-blue-soft); box-shadow:inset 3px 0 0 var(--wb-blue); }
.wb-ck-ic { width:30px; height:30px; border-radius:8px; flex:none; display:inline-flex; align-items:center; justify-content:center; background:var(--subtle); color:var(--wb-secondary); }
.wb-ck-ic svg { width:16px; height:16px; }
.wb-ck-t { flex:1 1 auto; min-width:0; }
.wb-ck-t b { font-weight:600; font-size:var(--wb-fs-body); }
.wb-ck-t small { display:block; color:var(--wb-secondary); font-size:var(--wb-fs-aux); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wb-ck-go { flex:none; color:var(--wb-secondary); font-size:var(--wb-fs-sub); white-space:nowrap; }
.wb-ck-opt[aria-selected="true"] .wb-ck-go { color:var(--wb-blue); }
.wb-ck-empty { padding:var(--wb-sp-7) var(--wb-sp-6) var(--wb-sp-3); text-align:center; color:var(--wb-secondary); }
.wb-ck-empty p + p { margin-top:var(--wb-sp-2); color:var(--wb-secondary); font-size:var(--wb-fs-aux); }
#command-results:not(:empty) ~ .wb-ck-hint { display:none; }
.wb-ck-foot { flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:var(--wb-sp-2) var(--wb-sp-6); padding:var(--wb-sp-4) var(--wb-sp-6); border-top:1px solid var(--wb-line); color:var(--wb-secondary); font-size:var(--wb-fs-aux); }
.wb-ck-foot span { display:inline-flex; align-items:center; gap:var(--wb-sp-1); }
.wb-ck-foot .wb-kbd { position:static; }
.wb-ck-note { margin-left:auto; }
.wb-ck-x { width:32px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:8px; background:transparent; color:var(--wb-secondary); flex:none; cursor:pointer; }
.wb-ck-x:hover { background:var(--subtle); color:var(--wb-ink); } .wb-ck-x svg { width:16px; height:16px; }

/* ============ 12. 动效（wb:81、1383–1458、1495–1496、1578，只用中台有的）============ */
.wb-dialog[open] { animation:wb-fade .25s var(--wb-ease); }
.wb-pill-ind { position:absolute; left:0; top:0; z-index:0; pointer-events:none; transition:transform .5s var(--wb-spring),width .5s var(--wb-spring),height .5s var(--wb-spring); }
.wb-pill-gliding > button, .wb-pill-gliding > label { position:relative; z-index:1; transition:color .35s var(--wb-ease); }
.wb-pill-gliding > button[aria-pressed="true"], .wb-pill-gliding > button[aria-selected="true"], .wb-pill-gliding > label:has(input:checked) { background:transparent !important; box-shadow:none !important; }
.nav-scroll { position:relative; }
.nav-ind { position:absolute; left:0; top:0; z-index:0; border-radius:8px; background:var(--wb-blue-fill); pointer-events:none; transition:transform .45s var(--wb-spring),width .3s var(--wb-ease),height .3s var(--wb-ease); }
.nav-scroll.is-gliding .nav a { position:relative; z-index:1; transition:color .3s var(--wb-ease); }
.nav-scroll.is-gliding .nav a.active { background:transparent; color:var(--nav-text); font-weight:400; --nav-ic-bg:transparent; }
.nav-scroll.is-gliding .nav a.is-to { color:#fff; }
/* 换页：浏览器跨页过渡、新旧两页都不做动画（wb:1426–1435：侧栏单独命名，换页时直接换，不跟整页一起闪） */
@view-transition { navigation:auto; }
::view-transition-old(root), ::view-transition-new(root) { animation:none; }
.sidebar { view-transition-name:wb-side; }
::view-transition-old(wb-side) { display:none; }
::view-transition-group(wb-side), ::view-transition-new(wb-side) { animation:none; }
.tbl td { transition:background-color .2s var(--wb-ease),box-shadow .2s var(--wb-ease); }
.tbl tbody tr:hover td:first-child { box-shadow:inset 2px 0 0 var(--wb-blue); }
.wb-row-in { animation:wb-row-in .45s var(--wb-ease) backwards; animation-delay:calc(var(--i,0) * 40ms); }
@keyframes wb-progress-in { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes wb-fade { from { opacity:0; } }
@keyframes wb-pop { from { opacity:0; transform:translateY(10px) scale(.97); } }
@keyframes wb-toast-in { from { opacity:0; transform:translateY(16px) scale(.96); } }
@keyframes wb-row-in { from { opacity:0; } }
@keyframes wb-fx-turn { from { transform:rotate(-90deg); } to { transform:rotate(270deg); } }

/* ============ 13. 断点（wb:376–439、1539–1546、1579–1585）============ */
@media(max-width:1400px) {
  .workbench { grid-template-columns:minmax(0,1fr); } .rail { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .queue { max-height:none; }
}
@media(max-width:1100px) {
  .app { grid-template-columns:200px minmax(0,1fr); } main { padding:var(--wb-sp-6); } .page-head h1 { font-size:21px; } .topbar { padding:var(--wb-sp-4) var(--wb-sp-6); }
  #changelist-form > div[class~="fixed"] { inset-inline-start:200px !important; }
}
@media(max-width:760px) {
  .app { display:block; }
  .sidebar { position:sticky; top:0; z-index:60; height:auto; border-right:0; border-bottom:1px solid var(--nav-line); }
  .brand { height:56px; padding:0 var(--wb-sp-2) 0 var(--wb-sp-5); border-bottom:0; }
  .nav-toggle { display:inline-flex; }
  .nav-panel { display:none; }
  .sidebar.is-open .nav-panel { display:flex; position:fixed; top:56px; left:0; right:0; max-height:calc(100dvh - 56px); overflow-y:auto; overscroll-behavior:contain; background:var(--nav); box-shadow:0 16px 40px rgba(15,23,51,.35); }
  .nav-scroll { flex:none; overflow:visible; }
  .nav a,.nav button { min-height:44px; }
  .nav-group > summary.side-label { min-height:44px; }
  .sidebar-foot { padding:var(--wb-sp-2) var(--wb-sp-5); }
  .user-chip { padding:var(--wb-sp-2) var(--wb-sp-3); }
  .user-chip a, .user-chip button { min-height:44px; display:inline-flex; align-items:center; padding:0 var(--wb-sp-4); }
  .user-chip .chip-ic { width:44px; height:44px; justify-content:center; padding:0; }
  .topbar { position:static; min-height:0; padding:var(--wb-sp-4) var(--wb-sp-5); }
  .top-actions:not(:has(> :not(.wb-theme))) { display:none; }
  /* 中台这里 .top-search 占满一行、.top-actions 另起一行；这边顶栏右侧只有环境标签（颜色模式在菜单里），不单占一行：
     跟搜索框同一行，搜索框占剩下的宽（没有环境标签时 .top-actions 整个藏掉，搜索框照样占满） */
  .top-search { flex:1 1 0; }
  .top-actions { width:auto; flex:none; }
  .top-search .wb-field { padding-right:var(--wb-sp-4); }
  .wb-kbd, .topbar .wb-theme { display:none; }
  .wb-theme-m { display:flex; align-items:center; justify-content:space-between; gap:var(--wb-sp-3); padding:0 var(--wb-sp-2) var(--wb-sp-3); margin:0 var(--wb-sp-3); color:var(--nav-muted); font-size:var(--wb-fs-aux); }
  .wb-theme-m .seg { background:var(--nav-hover); }
  .wb-theme-m .seg button { color:var(--nav-text); }
  .wb-theme-m .seg button[aria-pressed="true"] { background:var(--wb-blue-fill); color:#fff; box-shadow:none; }
  .wb-theme-m .seg button { min-width:44px; } /* 中台这里 35px 宽；本项目手机触控目标要求 ≥44×44 */
  .brand-name { display:inline-flex; align-items:center; min-height:44px; } /* 中台品牌名不是链接；这边点它回导览，点击区补到 44 */
  /* Unfold 开关 40×24：::before 外扩成 44×44 透明点击区（滑块画在 ::after，不冲突） */
  input[type="checkbox"][class~="appearance-none"][class~="rounded-full"]::before { content:""; position:absolute; inset:-10px -2px; }
  main { padding:var(--wb-sp-6) var(--wb-sp-5) max(var(--wb-sp-7),env(safe-area-inset-bottom)); } .page-head h1 { font-size:20px; }
  .page-head .back-link { min-height:44px; margin:-10px 0 -6px; }
  .rail { grid-template-columns:minmax(0,1fr); }
  .wb-button,.wb-field,.seg button { min-height:44px; }
  .tbl .ops .wb-button,.ops-inline .wb-button { min-width:44px; min-height:44px; justify-content:center; }
  .wb-field { font-size:var(--wb-fs-h2); }
  .top-search .wb-field { font-size:var(--wb-fs-title); }
  .wb-ck-scrim { padding:var(--wb-sp-6) var(--wb-sp-5); }
  .wb-ck-foot .hide-m { display:none; }
  .wb-ck-foot .wb-kbd { display:inline-flex; }
  .wb-ck-x { width:44px; height:44px; }
  .wb-ck-opt { min-height:52px; }
  #changelist-form > div[class~="fixed"] { inset-inline-start:0 !important; }
  /* Unfold 控件手机宽度：触控 44px、输入框 16px 字（防 iOS 放大） */
  :where(input, select, textarea):where([class~="focus:outline-primary-600"]):where(:not([type="checkbox"], [type="radio"])) { font-size:var(--wb-fs-h2); }
  :where(input, select):where([class~="focus:outline-primary-600"]):where(:not([type="checkbox"], [type="radio"], [type="file"])) { min-height:44px; }
  :where(a, button):where([class~="font-medium"][class~="inline-flex"][class~="rounded-default"][class~="whitespace-nowrap"]),
  :where(a.filter-open-button, #changelist-actions button[type="submit"]) { min-height:44px; }
  #changelist-search input { min-height:44px; font-size:var(--wb-fs-h2); }
  span.datetimeshortcuts { top:0; right:0; }
  span.datetimeshortcuts :is(a, button) { justify-content:center; min-width:44px; height:44px; }
  .related-widget-wrapper [x-on\:click][class~="w-[38px]"] { width:44px; height:44px; }
  #changelist-filter li a { display:flex; align-items:center; min-height:44px; }
  #content .readonly a { display:inline-flex; align-items:center; min-width:44px; min-height:44px; }
  .section-head h2 a { display:inline-flex; align-items:center; min-width:44px; min-height:44px; }
  .tbl td .text-button { display:inline-flex; align-items:center; min-width:44px; min-height:44px; }
  .queue .q-main b a { display:inline-flex; align-items:center; min-width:44px; min-height:44px; }
  #result_list td.field-x_link a { min-height:44px; line-height:34px; }
}
@media(max-width:480px) { .wb-field { font-size:var(--wb-fs-h2); } }

/* 减少动态效果：所有动画 / 过渡关掉（wb:444），换页过渡也关（wb:1428） */
@media(prefers-reduced-motion:reduce) {
  * { animation:none !important; transition:none !important; } *::before, *::after { animation:none !important; transition:none !important; }
  @view-transition { navigation:none; }
}

/* ============ 14. 登录页（templates_v2/login.html 的 <style> 原样，见 templates/admin/login.html；脚本提交 / 成功退场那几条没搬）============ */
:root {
  --login-sp1:cubic-bezier(.16,1,.3,1); --login-sp1-t:.9s;
  --login-sp2:var(--wb-spring); --login-sp2-t:.45s;
  --login-sp3:var(--wb-spring); --login-sp3-t:.45s;
  --login-m:1;
  --login-px:clamp(32px,5vw,72px);
    --login-fs-brand:20px; --login-fs-brand-sm:17px; --login-fs-hero:30px; --login-fs-hero-sm:26px;
  --login-fs-head:32px; --login-fs-head-sm:26px; --login-fs-lead:17px; --login-fs-lead-sm:15px; --login-fs-feat:15px;
  --login-sp-brand-edge:40px; --login-sp-brand-split:44px; --login-sp-hero-top:48px; --login-sp-rule:14px;
  --login-sp-feat-y:13px; --login-sp-feat-col:14px; --login-sp-legal-top:48px;
  --login-sp-main-y:48px; --login-sp-main-x:40px; --login-sp-formbox:32px; --login-sp-row:18px;
  --login-sp-input-ico:42px; --login-sp-input-eye:50px; --login-sp-notice-ico:9px; --login-sp-foot-line:18px;
  --login-sp-side-sm:20px; --login-sp-top-start-sm:22px; --login-sp-band-start-sm:28px; --login-sp-main-end-sm:32px;
  --login-sp-bottom-end-sm:36px; --login-sp-formbox-sm:22px; --login-sp-row-sm:14px; --login-sp-foot-above-sm:20px;
  --login-sp-feat-x-sm:14px; --login-sp-legal-top-sm:28px;
  --login-sp-card-y:36px; --login-sp-card-x:36px; --login-sp-card-sm:20px;
}
@supports (animation-timing-function:linear(0, 1)) {
  :root {
    --login-sp1-t:830ms;
    --login-sp1:linear(0, 0.0057 1.20%, 0.0233 2.53%, 0.0536 3.98%, 0.0962 5.54%, 0.1381 6.87%, 0.1925 8.43%, 0.4224 14.58%, 0.5292 17.59%, 0.6292 20.72%, 0.7126 23.73%, 0.7830 26.75%, 0.8409 29.76%, 0.8907 33.01%, 0.9300 36.39%, 0.9606 40.00%, 0.9828 43.86%, 0.9982 48.19%, 1.0073 53.25%, 1.0106 62.65%, 1);
    --login-sp2-t:710ms;
    --login-sp2:linear(0, 0.0017 0.42%, 0.0088 0.99%, 0.0335 1.97%, 0.0713 2.96%, 0.1273 4.08%, 0.1850 5.07%, 0.2579 6.20%, 0.5544 10.42%, 0.6761 12.25%, 0.7368 13.24%, 0.7933 14.23%, 0.8453 15.21%, 0.8861 16.06%, 0.9292 17.04%, 0.9622 17.89%, 0.9962 18.87%, 1.0253 19.86%, 1.0499 20.85%, 1.0701 21.83%, 1.0862 22.82%, 1.1000 23.94%, 1.1103 25.21%, 1.1159 26.62%, 1.1163 28.17%, 1.1119 29.72%, 1.0954 32.54%, 1.0402 39.44%, 1.0166 42.96%, 0.9985 46.90%, 0.9887 51.13%, 0.9869 57.18%, 1.0010 77.18%, 1);
    --login-sp3-t:860ms;
    --login-sp3:linear(0, 0.0080 0.93%, 0.0175 1.40%, 0.0342 1.98%, 0.0556 2.56%, 0.0812 3.14%, 0.1433 4.30%, 0.2014 5.23%, 0.2814 6.40%, 0.5949 10.58%, 0.7270 12.44%, 0.7881 13.37%, 0.8451 14.30%, 0.8978 15.23%, 0.9457 16.16%, 0.9887 17.09%, 1.0222 17.91%, 1.0558 18.84%, 1.0845 19.77%, 1.1085 20.70%, 1.1279 21.63%, 1.1430 22.56%, 1.1540 23.49%, 1.1626 24.65%, 1.1661 25.93%, 1.1638 27.33%, 1.1564 28.72%, 1.1306 31.51%, 1.0512 38.02%, 1.0164 41.40%, 0.9897 45.12%, 0.9754 49.07%, 0.9725 51.74%, 0.9740 54.77%, 0.9967 67.09%, 1.0036 73.95%, 1);
    --login-sp4-t:1080ms;
    --login-sp4:linear(0, 0.2645 0.65%, 0.4656 1.20%, 0.6382 1.76%, 0.7579 2.22%, 0.8703 2.78%, 0.9374 3.24%, 0.9857 3.80%, 1.0000 4.35%, 0.9872 4.81%, 0.9446 5.37%, 0.7839 6.48%, 0.5724 7.50%, -0.0437 10.09%, -0.3094 11.48%, -0.4674 12.78%, -0.5252 13.98%, -0.5061 15.09%, -0.4205 16.30%, -0.3001 17.41%, 0.0349 20.09%, 0.1714 21.48%, 0.2466 22.69%, 0.2767 23.89%, 0.2662 25.00%, 0.2209 26.20%, -0.0907 31.39%, -0.1457 33.80%, -0.1160 36.11%, 0.0460 41.20%, 0.0766 43.61%, 0.0657 45.65%, -0.0196 50.74%, -0.0403 53.52%, 0.0212 63.33%, -0.0111 73.15%, 0.0058 82.87%, 0);
  }
}
html:has(body.login) { scrollbar-gutter:auto; }
body.login { font-family:var(--wb-font); -webkit-font-smoothing:antialiased; }

.login-shell { min-height:100dvh; display:grid; grid-template-columns:41.5% minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; }
.login-brand { grid-column:1; grid-row:1 / span 2; position:relative; isolation:isolate; overflow:hidden; background-color:var(--nav);
  background-image:radial-gradient(90% 60% at 0% 100%,color-mix(in oklab,var(--wb-blue-fill) 18%,transparent),transparent 70%),linear-gradient(165deg,var(--nav-hover) 0%,transparent 58%);
  box-shadow:inset -1px 0 0 var(--nav-line); }
.login-brand::before { content:""; position:absolute; z-index:-1; left:58%; top:6%; width:62%; height:42%; border-radius:50%; opacity:.8;
  background:radial-gradient(closest-side,color-mix(in oklab,color-mix(in oklab,var(--wb-blue-fill) 55%,var(--nav-ink)) 42%,transparent),color-mix(in oklab,var(--wb-blue-fill) 16%,transparent) 55%,transparent);
  mix-blend-mode:screen; filter:blur(6px);
  animation:login-bloom 1.6s ease-out .12s backwards; transition:opacity var(--login-sp2-t) var(--login-sp2),transform var(--login-sp2-t) var(--login-sp2); }
.login-shell:has(.wb-field:focus) .login-brand::before { opacity:1; transform:scale(1.06); }
.login-brand::after { content:""; position:absolute; z-index:-1; left:-10%; top:42%; width:120%; height:50%; border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in oklab,var(--wb-blue-fill) 30%,transparent),color-mix(in oklab,var(--wb-blue-fill) 8%,transparent) 62%,transparent);
  mix-blend-mode:screen; animation:login-fade 2s ease-out .3s backwards; }
.login-halo { position:absolute; z-index:-1; width:560px; height:560px; left:calc(89% - 280px); top:calc(27% - 280px); color:color-mix(in oklab,var(--nav-text) 72%,var(--wb-blue-fill)); pointer-events:none; animation:login-fade 1.6s ease-out .2s backwards; }
.login-halo::before { content:""; position:absolute; inset:14%; border-radius:50%;
  background:radial-gradient(color-mix(in oklab,var(--nav-text) 26%,transparent) 1px,transparent 1.6px) 0 0 / 22px 22px;
  -webkit-mask-image:radial-gradient(closest-side,var(--nav),transparent); mask-image:radial-gradient(closest-side,var(--nav),transparent); }
.login-halo svg { position:relative; display:block; width:100%; height:100%; }

.login-top { grid-column:1; grid-row:1; position:relative; z-index:1; display:flex; flex-direction:column; padding:var(--login-sp-brand-edge) var(--login-px) 0; }
.login-bottom { grid-column:1; grid-row:2; position:relative; z-index:1; padding:var(--login-sp-brand-split) var(--login-px) var(--login-sp-brand-edge); }
.login-logo { display:flex; align-items:center; gap:var(--wb-sp-5); }
.login-tile { flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--nav-hover);
  box-shadow:inset 0 0 0 1px var(--nav-line),0 10px 24px -12px var(--wb-shadow-2);
  animation:login-tile-in var(--login-sp1-t) var(--login-sp1) 0s backwards; }
.login-tile .brand-mark { width:28px; height:28px; } /* 品牌标同侧栏：蓝色圆底 + 白色站点图标（中台是白圆底 + 蓝色纸飞机） */
.login-tile .brand-mark .material-symbols-outlined { font-size:18px; }
.login-word { font:650 var(--login-fs-brand)/28px var(--wb-font); letter-spacing:-.01em; color:var(--nav-ink); animation:login-reveal var(--login-sp1-t) var(--login-sp1) .09s backwards; }
.login-hero { margin-top:auto; padding-top:var(--login-sp-hero-top); max-width:440px; }
.login-title { font:650 var(--login-fs-hero)/36px var(--wb-font); letter-spacing:-.034em; color:var(--nav-ink); }
.login-line { display:block; clip-path:inset(0 -.1em -.25em -.1em); }
.login-line > span { display:block; animation:login-rise var(--login-sp1-t) var(--login-sp1) var(--login-d,0s) backwards; }
.login-rule { display:flex; align-items:center; gap:var(--login-sp-rule); max-width:440px; color:var(--nav-text); font-size:var(--wb-fs-title); font-weight:500; line-height:20px; }
.login-rule::before, .login-rule::after { content:""; flex:1; height:1px; background:var(--nav-line); animation:login-draw var(--login-sp1-t) var(--login-sp1) var(--login-d,0s) backwards; }
.login-rule::before { transform-origin:right center; }
.login-rule::after { transform-origin:left center; }
.login-rule > span { animation:login-fade .8s ease-out var(--login-d,0s) backwards; }
.login-feats { list-style:none; max-width:440px; margin:var(--wb-sp-6) 0 0; padding:0; display:grid; gap:var(--wb-sp-4); }
.login-feat { display:grid; grid-template-columns:36px minmax(0,1fr); grid-template-areas:"ic t" "ic p"; align-items:center; column-gap:var(--login-sp-feat-col); padding:var(--login-sp-feat-y) var(--wb-sp-6); border:1px solid var(--nav-line); border-radius:14px;
  background:color-mix(in oklab,var(--nav-hover) 58%,transparent); box-shadow:inset 0 1px 0 color-mix(in oklab,var(--nav-ink) 7%,transparent),0 12px 24px -18px var(--wb-shadow-2);
  -webkit-backdrop-filter:blur(16px) saturate(.8); backdrop-filter:blur(16px) saturate(.8);
  animation:login-lift var(--login-sp1-t) var(--login-sp1) var(--login-d,0s) backwards; }
.login-fi { grid-area:ic; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:color-mix(in oklab,var(--wb-blue-fill) 40%,var(--nav-ink)); background:color-mix(in oklab,var(--wb-blue-fill) 20%,transparent); box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--wb-blue-fill) 34%,transparent); }
.login-fi svg { width:18px; height:18px; }
.login-feat b { grid-area:t; color:var(--nav-ink); font-size:var(--login-fs-feat); font-weight:600; line-height:20px; }
.login-feat p { grid-area:p; color:var(--nav-text); font-size:var(--wb-fs-title); line-height:20px; }
.login-legal { max-width:440px; margin-top:var(--login-sp-legal-top); color:var(--nav-muted); font-size:var(--wb-fs-title); line-height:20px; animation:login-fade .8s ease-out var(--login-d,0s) backwards; }

.login-main { grid-column:2; grid-row:1 / span 2; display:flex; align-items:center; justify-content:center; padding:var(--login-sp-main-y) var(--login-sp-main-x);
  background:radial-gradient(56% 46% at 50% 46%,color-mix(in oklab,var(--wb-glow) 80%,transparent),transparent 75%); }
.login-panel { width:100%; max-width:calc(400px + 2 * var(--login-sp-card-x)); padding:var(--login-sp-card-y) var(--login-sp-card-x); border-radius:var(--wb-radius); background:var(--wb-surface);
  box-shadow:0 0 0 1px var(--wb-ring),0 1px 2px var(--wb-ring),0 28px 56px -30px var(--wb-shadow-2); }
.login-h { font:650 var(--login-fs-head)/40px var(--wb-font); letter-spacing:-.022em; color:var(--wb-ink); }
.login-sub { margin-top:var(--wb-sp-3); color:var(--wb-secondary); font-size:var(--login-fs-lead); line-height:24px; }
.login-settle { animation:login-settle-in var(--login-sp1-t) var(--login-sp1) var(--login-d,0s) backwards; }
.login-formbox { margin-top:var(--login-sp-formbox); }
.login-row + .login-row { margin-top:var(--login-sp-row); }
.login-label { display:block; margin-bottom:var(--wb-sp-3); color:var(--wb-ink); font-size:var(--wb-fs-title); font-weight:500; line-height:20px; }
.login-input { position:relative; }
.login-ico { position:absolute; left:15px; top:50%; width:16px; height:16px; margin-top:calc(-1 * var(--wb-sp-3)); color:var(--wb-muted); pointer-events:none; transition:color .2s var(--wb-ease); }
.login-input .wb-field { display:block; width:100%; height:46px; min-height:46px; padding:0 var(--wb-sp-6) 0 var(--login-sp-input-ico); border:1px solid var(--wb-line-strong); border-radius:12px;
  background:var(--wb-surface-alt); color:var(--wb-ink); font:400 var(--wb-fs-h2)/1.4 var(--wb-font);
  box-shadow:inset 0 1px 2px var(--wb-ring),0 0 0 0 color-mix(in oklab,var(--wb-blue) 0%,transparent);
  transition:border-color var(--login-sp2-t) var(--login-sp2),background-color .2s var(--wb-ease),box-shadow var(--login-sp2-t) var(--login-sp2); }
.login-input .wb-field:hover { border-color:color-mix(in oklab,var(--wb-blue) 45%,var(--wb-line-strong)); background:var(--wb-surface); }
.login-input:hover .login-ico { color:var(--wb-secondary); }
.login-input .wb-field:focus, .login-input .wb-field:focus-visible { outline:none; border-color:var(--wb-blue); background:var(--wb-surface);
  box-shadow:inset 0 1px 2px var(--wb-ring),0 0 0 4px color-mix(in oklab,var(--wb-blue) 16%,transparent); }
.login-input:focus-within .login-ico { color:var(--wb-blue); }
.login-pw .wb-field { padding-right:var(--login-sp-input-eye); }
.login-eye { position:absolute; top:5px; right:5px; width:36px; height:36px; padding:0; border:0; border-radius:9px; display:grid; place-items:center; color:var(--wb-muted); background:transparent; transition:color .2s var(--wb-ease),background-color .2s var(--wb-ease); }
.login-eye:hover { color:var(--wb-ink); background:var(--subtle); }
.login-eye:focus-visible { outline-offset:0; }
.login-eye svg { width:18px; height:18px; }
@media(max-width:760px) { .login-eye { top:1px; right:1px; width:44px; height:44px; border-radius:11px; } } /* 中台 36×36；手机触控目标 ≥44 */
.login-eye .i-off, .login-eye[aria-pressed="true"] .i-on { display:none; }
.login-eye[aria-pressed="true"] .i-off { display:block; }
.login-slot { height:40px; margin:var(--login-sp-row) 0; }
.login-slot > * { height:100%; margin:0; display:flex; align-items:center; gap:var(--wb-sp-3); border-radius:12px; font-size:var(--wb-fs-body); line-height:1.4; overflow:hidden; }
.login-tip { justify-content:center; color:var(--wb-muted); }
.login-slot .notice { padding:0 var(--wb-sp-5) 0 var(--login-sp-notice-ico); font-weight:500; animation:login-pop var(--login-sp3-t) var(--login-sp3) .76s backwards; }
.login-ni { flex:none; width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--wb-on-fill); }
.login-ni svg { width:14px; height:14px; }
.login-slot .notice.bad .login-ni { background:var(--wb-danger-fill); }
.login-slot .notice.warn { background:var(--wb-notice-warn); border-color:var(--wb-warning-line); color:var(--wb-warning-ink); }
.login-slot .notice.warn .login-ni { background:var(--wb-warning); }
.login-submit { animation:login-settle-btn var(--login-sp1-t) var(--login-sp1) var(--login-d,0s) backwards; }
.login-submit .wb-button { position:relative; display:block; width:100%; height:48px; min-height:48px; border-radius:12px; font:600 var(--wb-fs-h2)/1 var(--wb-font); letter-spacing:.06em;
  box-shadow:inset 0 1px 0 color-mix(in oklab,var(--wb-on-fill) 16%,transparent),0 1px 2px var(--wb-ring),0 10px 22px -12px var(--wb-glow-fx);
  transition:transform var(--login-sp2-t) var(--login-sp2),background-color .2s,border-color .2s,box-shadow .2s; }
.login-submit .wb-button:hover:not(:disabled) { box-shadow:inset 0 1px 0 color-mix(in oklab,var(--wb-on-fill) 22%,transparent),0 1px 2px var(--wb-ring),0 16px 30px -12px var(--wb-glow-fx); }
.login-submit .wb-button:active { transform:scale(.97); box-shadow:0 4px 12px -8px var(--wb-glow-fx); transition:transform .1s ease-out,background-color .2s,box-shadow .2s; }
.login-submit .wb-button:active:not(:disabled) { background:color-mix(in oklab,var(--wb-blue-hover) 86%,var(--nav)); border-color:color-mix(in oklab,var(--wb-blue-hover) 86%,var(--nav));
  box-shadow:inset 0 1px 2px color-mix(in oklab,var(--nav) 24%,transparent),0 4px 12px -8px var(--wb-glow-fx); }
.login-submit .wb-button[aria-busy="true"] { opacity:1; cursor:progress; background:var(--wb-blue-hover); border-color:var(--wb-blue-hover);
  box-shadow:inset 0 1px 0 color-mix(in oklab,var(--wb-on-fill) 10%,transparent),0 1px 2px var(--wb-ring); }
.login-spin { display:none; position:absolute; top:50%; left:50%; translate:calc(-50% - 2.4em) -50%; }
.login-submit .wb-button[aria-busy="true"] .login-spin { display:block; animation:wb-fx-turn .8s linear infinite; }
.login-foot { position:relative; display:flex; align-items:center; justify-content:center; gap:var(--wb-sp-2); margin-top:var(--wb-sp-7); padding-top:var(--login-sp-foot-line); color:var(--wb-muted); font-size:var(--wb-fs-body); line-height:18px; text-align:center; }
.login-foot::before { content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--wb-line); transform-origin:center; animation:login-draw var(--login-sp1-t) var(--login-sp1) 1s backwards; }
.login-foot > * { animation:login-fade .8s ease-out 1.06s backwards; }
.login-foot svg { flex:none; width:14px; height:14px; }

@keyframes login-bloom { from { opacity:0; transform:scale(.9); } }
@keyframes login-fade { from { opacity:0; } }
@keyframes login-tile-in { from { opacity:0; transform:translate3d(0,calc(8px * var(--login-m)),0) scale(.9); } }
@keyframes login-reveal { from { opacity:0; clip-path:inset(-.3em 100% -.3em 0); } to { opacity:1; clip-path:inset(-.3em -.3em -.3em 0); } }
@keyframes login-rise { from { transform:translate3d(0,110%,0); } }
@keyframes login-settle-in { from { opacity:0; transform:translate3d(0,calc(10px * var(--login-m)),0); } }
@keyframes login-settle-btn { from { opacity:0; transform:translate3d(0,calc(10px * var(--login-m)),0) scale(.985); } }
@keyframes login-lift { from { opacity:0; transform:translate3d(0,calc(26px * var(--login-m)),0) scale(.985); } }
@keyframes login-draw { from { transform:scaleX(0); } }
@keyframes login-pop { from { opacity:0; transform:scale(.92); } }
.login-formbox[data-shake] { animation:login-shake-fb .5s cubic-bezier(.36,.07,.19,.97) 1.2s; }
@keyframes login-shake-fb { 0%,100% { transform:none; } 15% { transform:translate3d(-9px,0,0); } 30% { transform:translate3d(8px,0,0); } 45% { transform:translate3d(-6px,0,0); } 60% { transform:translate3d(4px,0,0); } 75% { transform:translate3d(-2px,0,0); } }
@supports (animation-timing-function:linear(0, 1)) {
  .login-formbox[data-shake] { animation:login-shake var(--login-sp4-t) var(--login-sp4) 1.2s; }
}
@keyframes login-shake { from { transform:none; } to { transform:translate3d(-10px,0,0); } }

@media (max-width:959.98px) {
  :root { --login-m:.75; }
  .login-shell { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto 1fr; }
  .login-brand { display:none; }
  .login-top, .login-bottom { grid-column:1; background-color:var(--nav);
    background-image:radial-gradient(90% 80% at 100% 0%,color-mix(in oklab,var(--wb-blue-fill) 18%,transparent),transparent 70%),linear-gradient(165deg,var(--nav-hover) 0%,transparent 70%); }
  .login-bottom { box-shadow:inset 0 1px 0 var(--nav-line); }
  .login-top { grid-row:1; padding:var(--login-sp-top-start-sm) var(--login-sp-side-sm) var(--wb-sp-7); }
  .login-main { grid-column:1; grid-row:2; display:block; padding:var(--login-sp-band-start-sm) var(--login-sp-side-sm) var(--login-sp-main-end-sm); }
  .login-bottom { grid-row:3; padding:var(--login-sp-band-start-sm) var(--login-sp-side-sm) var(--login-sp-bottom-end-sm); }
  .login-panel, .login-logo, .login-hero, .login-rule, .login-feats, .login-legal { width:100%; max-width:400px; margin-left:auto; margin-right:auto; }
  .login-panel { max-width:calc(400px + 2 * var(--login-sp-card-sm)); padding:var(--login-sp-card-sm); }
  .login-tile { width:34px; height:34px; border-radius:9px; }
  .login-tile .brand-mark { width:24px; height:24px; }
  .login-word { font-size:var(--login-fs-brand-sm); line-height:24px; }
  .login-hero { margin-top:var(--wb-sp-6); padding-top:0; }
  .login-title { font-size:var(--login-fs-hero-sm); line-height:32px; letter-spacing:-.03em; }
  .login-h { font-size:var(--login-fs-head-sm); line-height:32px; }
  .login-sub { margin-top:var(--wb-sp-1); font-size:var(--login-fs-lead-sm); line-height:22px; }
  .login-formbox { margin-top:var(--login-sp-formbox-sm); }
  .login-row + .login-row { margin-top:var(--login-sp-row-sm); }
  .login-slot { margin:var(--login-sp-row-sm) 0; }
  .login-foot { margin-top:var(--login-sp-foot-above-sm); padding-top:var(--wb-sp-6); font-size:var(--wb-fs-aux); }
  .login-feat { padding:var(--wb-sp-5) var(--login-sp-feat-x-sm); column-gap:var(--wb-sp-5); grid-template-columns:32px minmax(0,1fr); }
  .login-fi { width:32px; height:32px; border-radius:9px; }
  .login-fi svg { width:16px; height:16px; }
  .login-feat b { font-size:var(--wb-fs-title); }
  .login-feat p { font-size:var(--wb-fs-body); line-height:19px; }
  .login-legal { margin-top:var(--login-sp-legal-top-sm); font-size:var(--wb-fs-body); }
}

@media (prefers-reduced-motion:reduce) {
  .login-submit .wb-button:active { transform:none; }
}

/* ============ 15. 导览页数字卡（T10），模板 unfold/helpers/xm_kpis.html ============
   照中台总览顶上一排 .wb-stat（wb:704–714，模板用法 templates_v2/index.html:47；没有图标，同总览截图）。
   每张卡整张是链接：悬停照 .todo:hover（wb:196）。三种状态（有数 / 0 / 读取失败）都是三行单行字，卡片固定最小高度，高度一样。 */
.wb-stat-grid { display:grid; gap:var(--wb-sp-5); } /* wb:704；列数下面按卡数另给 */
.xm-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:var(--wb-sp-6); } /* 同 .kpi-strip.c3（wb:210）：非系统管理员只有两张，卡宽不变 */
.wb-stat { min-width:0; padding:var(--wb-sp-6); border:1px solid transparent; border-radius:18px; background:var(--wb-surface); box-shadow:0 0 0 1px var(--wb-ring),0 1px 2px var(--wb-ring),0 14px 28px -18px var(--wb-shadow-2); } /* wb:707 */
.wb-stat-in { display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"label" "val" "sub"; align-items:center; } /* wb:708–709 没有图标那一种 */
.wb-stat-label { grid-area:label; color:var(--wb-muted); font-size:var(--wb-fs-aux); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* wb:712 */
.wb-stat-val { grid-area:val; margin-top:2px; font:650 var(--wb-fs-h1)/1.2 var(--mono); font-variant-numeric:tabular-nums; color:var(--wb-ink); white-space:nowrap; } /* wb:713 */
.wb-stat-sub { grid-area:sub; margin-top:var(--wb-sp-1); color:var(--wb-muted); font-size:var(--wb-fs-aux); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* wb:714 */
.wb-stat-val[data-tone="warn"] { color:var(--wb-warning); } .wb-stat-val[data-tone="bad"] { color:var(--wb-danger); } /* wb:1184 */
.wb-stat-val[data-tone="dim"] { color:var(--wb-muted); } /* 0：同 .kpi-val.dim（wb:216） */
a.xm-kpi { display:block; min-height:112px; color:inherit; text-decoration:none; } /* 三行约 105px，留余量 */
a.xm-kpi:hover { border-color:var(--wb-line-strong); background:var(--wb-surface-alt); } /* wb:196 */
.xm-kpi .xm-kpi-retry { color:var(--wb-blue); text-decoration:underline; }
/* 手机（wb:389 断点）：竖排一列，小字里的范围能看全；整张卡是链接，高 ≥ 112px，点击区够 44px */
@media(max-width:760px) { .xm-kpis { grid-template-columns:minmax(0,1fr); } }

/* ============ 16. 换页不闪白（Issue 0011）：Unfold 给 <html> 加 x-cloak（skeleton.html:18），[x-cloak]{display:none!important} 让整页等 Alpine（defer）跑起来才显示，网络慢就整页白；html[x-cloak] 更具体、同带 !important，先照常显示侧栏，主区只露背景色 ============ */
html[x-cloak] { display:block !important; }
html[x-cloak] body { visibility:hidden; } /* 主区内容和筛选抽屉、弹层先不露 */
html[x-cloak] #nav-sidebar { visibility:visible; } /* 手机菜单靠 .is-open 切 display（13. 断点），不受这条影响 */
html[x-cloak] #nav-sidebar .wb-theme-m { visibility:hidden; } /* 颜色模式切换靠 Alpine，跑起来前先不露 */

/* ============ 17. 环境色条（Issue #84），模板 templates/admin/xm/env_bar.html：设了 XM_ENV_LABEL 才有这个元素，没设时本节每条都不生效 ============
   色条在 body 最上面、跟着文档流占 --xm-env-h 高，吸在顶上（sticky，不是盖在内容上的 fixed 浮层）。原来吸在 top:0、按整屏高算的外壳一起往下挪、减去这一截：
   页面不因它多出竖向滚动条，侧栏底部（当前账号、退出）不被挤出屏幕，顶栏、右栏、吸顶跳转都不压在色条下面。弹层（z-index ≥ 50）照旧盖在色条上面。
   底色 --wb-danger-fill + 白字（浅色 5.9:1、深色 html.dark 里换 #c4453d 4.9:1），深浅色跟着 token 换。 */
body:has(> .xm-env-bar) { --xm-env-h:28px; }
.xm-env-bar { position:sticky; top:0; z-index:11; display:flex; align-items:center; justify-content:center; height:var(--xm-env-h); padding:0 var(--wb-sp-5); background:var(--wb-danger-fill); color:var(--wb-on-fill); font:600 var(--wb-fs-aux)/1 var(--wb-font); letter-spacing:.08em; }
.xm-env-bar > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* 太长省略，悬停看全文（title） */
html[x-cloak] .xm-env-bar { visibility:visible; } /* 换页时和侧栏一样先露出来，不闪（16.） */
.top-actions:has(> .top-env) { min-width:0; max-width:100%; }
.top-env.wb-badge { display:inline-block; flex-shrink:1; min-width:0; max-width:16em; overflow:hidden; text-overflow:ellipsis; line-height:24px; } /* 顶栏环境标签：文字长了单行省略、悬停看全文（header.html 的 label_title），手机宽度不撑出屏幕 */
body:has(> .xm-env-bar) :is(.app, .login-shell) { min-height:calc(100dvh - var(--xm-env-h)); }
body:has(> .xm-env-bar) .sidebar { top:var(--xm-env-h); height:calc(100dvh - var(--xm-env-h)); }
body:has(> .xm-env-bar) .topbar { top:var(--xm-env-h); }
body:has(> .xm-env-bar) .rail { top:calc(80px + var(--xm-env-h)); }
body:has(> .xm-env-bar) .xm-pt-rules { scroll-margin-top:calc(80px + var(--xm-env-h)); } /* pages.css 的 80px */
@media(max-width:760px) {
  body:has(> .xm-env-bar) .sidebar { height:auto; }
  body:has(> .xm-env-bar) .sidebar.is-open .nav-panel { top:calc(56px + var(--xm-env-h)); max-height:calc(100dvh - 56px - var(--xm-env-h)); }
}