/* =====================================================================
   BOX-反代 (BOX-X / BOX-N) 管理台 · 样式（v4.0.0 “一屏·精修”极光玻璃设计 · 50模型0配额流式 · EX-X十万号池高可用版）
   配色 = 配色表（6 套 × 浅 / 深，theme.js 在 <html> 上设 data-palette / data-theme）+ 模式令牌；
   多彩图标是实心渐变底板（.ico + 色相 ih-*，图形来自 index.html 里的内联图标库）。
   全站字号走一张表（--t-*），总览首屏和顶栏按“有效高度”--vu 缩放，保证 1280×640 到 2560×1300 一屏放下重要信息。
   结构：配色表 → 图标底板 → 模式令牌与字号表 → 旧变量对照 → 组件（沿用原类名） → 新外观覆盖 → 外框 → 总览首屏 → 首屏以下 → 说明页 → 登录页 → 响应式。
   CSP 友好：没有内联样式，不引用外部资源。
   ===================================================================== */

/* ───────────── 配色表：neutral（浅 = 纯白、深 = 纯黑）、sky 天蓝、sakura 浅粉、mint 浅绿、lavender 薰衣草、peach 蜜桃 ─────────────
   --bg0/--bg1 页面底色；--au1…4 极光色团；--accent/--accent2 装饰强调色；--ink/--ink2 强调色文字（≥ 4.5:1）；
   --btn/--on-btn 主按钮；--tint 选中浅底；--text 三级正文；--line 发丝线；--glass 玻璃卡底；--track 进度轨道；
   --good/--warn/--bad/--info 状态填充色，--*-ink 状态文字色；--h1…--h8 装饰色相。 */
html {
  --text: #1d2433; --text-2: #4a5468; --text-3: #66718a;
  --line: rgba(29, 36, 51, .09); --glass: rgba(255, 255, 255, .62); --glass-2: rgba(255, 255, 255, .82); --track: rgba(29, 36, 51, .08);
  --good: #5cbf8f; --warn: #e8b44f; --bad: #e57373; --info: #6aa6dc;
  --good-ink: #2e7d5b; --warn-ink: #93630b; --bad-ink: #b84446; --info-ink: #2f6ea8;
  --h1: #6f9fe0; --h2: #9886dc; --h3: #e58fae; --h4: #5fbf98; --h5: #ee9f72; --h6: #dfb24a; --h7: #57b3c4; --h8: #e08585;
  --on-btn: #ffffff;
}
html[data-theme="dark"] {
  --text: #eef1f6; --text-2: #b8c0cd; --text-3: #8d97a8;
  --line: rgba(255, 255, 255, .09); --glass: rgba(255, 255, 255, .045); --glass-2: rgba(255, 255, 255, .075); --track: rgba(255, 255, 255, .08);
  --good: #6fd0a2; --warn: #f0c56a; --bad: #f08a87; --info: #82b8eb;
  --good-ink: #6fd0a2; --warn-ink: #f0c56a; --bad-ink: #f08a87; --info-ink: #82b8eb;
  --h1: #86b1ea; --h2: #ab9cea; --h3: #eda2bf; --h4: #77cfab; --h5: #f2b08a; --h6: #ecc56c; --h7: #6fc4d3; --h8: #ea9a9a;
  --on-btn: #0b0b0c;
}
html[data-palette="neutral"] {
  --bg0: #ffffff; --bg1: #ffffff;
  --au1: #e6ebf3; --au2: #efe9f4; --au3: #e7f1ee; --au4: #f3efe6;
  --accent: #2b2f36; --accent2: #6b7280; --ink: #2b2f36; --ink2: #4a5468;
  --btn: #1f2328; --tint: #f2f3f5;
  --text: #16191f; --text-2: #474e5c; --text-3: #687083;
  --glass: #ffffff; --glass-2: #ffffff; --line: rgba(17, 20, 26, .09);
}
html[data-palette="neutral"][data-theme="dark"] {
  --bg0: #000000; --bg1: #000000;
  --au1: #15171c; --au2: #17151b; --au3: #121716; --au4: #18161a;
  --accent: #f2f3f5; --accent2: #a1a7b3; --ink: #f2f3f5; --ink2: #c9cdd4;
  --btn: #f2f3f5; --tint: #141518;
  --text: #f2f3f5; --text-2: #b9bec8; --text-3: #8b93a3;
  --glass: rgba(255, 255, 255, .04); --glass-2: rgba(255, 255, 255, .065); --line: rgba(255, 255, 255, .1);
}
html[data-palette="sky"] {
  --bg0: #f4f8fc; --bg1: #f2f4fb;
  --au1: #bcd9f2; --au2: #cbd3f4; --au3: #c3e6e4; --au4: #e9d6ee;
  --accent: #5b9bd5; --accent2: #8b9fe6; --ink: #2f6ea8; --ink2: #4d5fb0;
  --btn: #2f6ea8; --tint: #e7f0f9;
  --text: #1a2436; --text-2: #46536a;
}
html[data-palette="sky"][data-theme="dark"] {
  --bg0: #0a1018; --bg1: #0c1220;
  --au1: #1f4a73; --au2: #2c3a74; --au3: #1c5757; --au4: #3f2f66;
  --accent: #74afe3; --accent2: #95a6ec; --ink: #8cc0ec; --ink2: #a9b6f0;
  --btn: #74afe3; --tint: #13212f;
  --text: #edf2f8; --text-2: #b7c2d2;
}
html[data-palette="sakura"] {
  --bg0: #fcf6f8; --bg1: #f8f4fb;
  --au1: #f3c9d7; --au2: #e3d1f0; --au3: #f9d8cc; --au4: #cfe0f2;
  --accent: #df8fae; --accent2: #c7a0e0; --ink: #a84d74; --ink2: #8456a8;
  --btn: #a84d74; --tint: #fbe8ef;
  --text: #2a1d25; --text-2: #5a4a55; --text-3: #78687a;
}
html[data-palette="sakura"][data-theme="dark"] {
  --bg0: #120c10; --bg1: #150d16;
  --au1: #5c2a43; --au2: #45305e; --au3: #5c372d; --au4: #2c3a5c;
  --accent: #eb9dbb; --accent2: #c9a6e6; --ink: #f0b0c8; --ink2: #d3b6ee;
  --btn: #eb9dbb; --tint: #25161e;
  --text: #f8eef2; --text-2: #d2bfc8; --text-3: #a3929c;
}
html[data-palette="mint"] {
  --bg0: #f4faf7; --bg1: #f2f8f9;
  --au1: #bfe6d3; --au2: #c4e1ec; --au3: #dcecc6; --au4: #d9d6f0;
  --accent: #5fbf98; --accent2: #6cc2c9; --ink: #2a7d5e; --ink2: #2b7480;
  --btn: #2a7d5e; --tint: #e4f3ec;
  --text: #17261f; --text-2: #43564d; --text-3: #61746c;
}
html[data-palette="mint"][data-theme="dark"] {
  --bg0: #08110e; --bg1: #091312;
  --au1: #1f5240; --au2: #1d4857; --au3: #3a5126; --au4: #2f2f5a;
  --accent: #6ccca4; --accent2: #79c7cf; --ink: #8ad8b7; --ink2: #93d3da;
  --btn: #6ccca4; --tint: #10221b;
  --text: #ecf6f1; --text-2: #b9cbc3; --text-3: #8ea39a;
}
html[data-palette="lavender"] {
  --bg0: #f7f6fc; --bg1: #faf4fa;
  --au1: #d3cbf3; --au2: #efcfe5; --au3: #c8d8f3; --au4: #f3e3c8;
  --accent: #9686dc; --accent2: #c79ad8; --ink: #6553b5; --ink2: #8a4f9e;
  --btn: #6553b5; --tint: #eeebfa;
  --text: #1f1d33; --text-2: #4b4866; --text-3: #6c6a82;
}
html[data-palette="lavender"][data-theme="dark"] {
  --bg0: #0e0c16; --bg1: #120d18;
  --au1: #3d3270; --au2: #582e58; --au3: #2b3e6d; --au4: #5a4a2a;
  --accent: #a796ea; --accent2: #d0a3e3; --ink: #bcaef2; --ink2: #ddb9ea;
  --btn: #a796ea; --tint: #1c1831;
  --text: #f1effa; --text-2: #c4c0d6; --text-3: #9a96ad;
}
html[data-palette="peach"] {
  --bg0: #fdf7f3; --bg1: #fcf4f4;
  --au1: #f8d3c0; --au2: #f5cdd3; --au3: #f7e2bb; --au4: #dcd3ef;
  --accent: #ec9f7c; --accent2: #efb98a; --ink: #a9562f; --ink2: #a8546a;
  --btn: #a9562f; --tint: #fcebe2;
  --text: #2b1f19; --text-2: #5c4b42; --text-3: #7a6a62;
}
html[data-palette="peach"][data-theme="dark"] {
  --bg0: #140e0b; --bg1: #150d0e;
  --au1: #6a3824; --au2: #5c2b35; --au3: #5d4921; --au4: #3a2e5c;
  --accent: #efa886; --accent2: #f2c28f; --ink: #f4bb9f; --ink2: #f0b6c0;
  --btn: #efa886; --tint: #27190f;
  --text: #faf1ec; --text-2: #d6c4ba; --text-3: #a8988f;
}
[data-swatch="white"] { --sw-a: #ffffff; --sw-b: #e4e7ec; }
[data-swatch="black"] { --sw-a: #000000; --sw-b: #2a2d33; }
[data-swatch="sky"] { --sw-a: #5b9bd5; --sw-b: #8b9fe6; }
[data-swatch="sakura"] { --sw-a: #df8fae; --sw-b: #c7a0e0; }
[data-swatch="mint"] { --sw-a: #5fbf98; --sw-b: #6cc2c9; }
[data-swatch="lavender"] { --sw-a: #9686dc; --sw-b: #c79ad8; }
[data-swatch="peach"] { --sw-a: #ec9f7c; --sw-b: #efb98a; }

/* ───────────── 多彩图标：实心双色渐变底板 + 白色线条 + 顶部高光（色相与配色无关；纯白 / 纯黑下页面的颜色主要来自这些图标） ───────────── */
.ih-violet{--ia:#b29bfa;--ib:#7b55e6;--hi:#5b3fc4}
.ih-pink{--ia:#f48dbf;--ib:#d84a8b;--hi:#a3305f}
.ih-sky{--ia:#66c3f4;--ib:#3b7de2;--hi:#1f5fa8}
.ih-mint{--ia:#5ed2a5;--ib:#17936c;--hi:#0f6b4f}
.ih-amber{--ia:#f8c55b;--ib:#e47f3a;--hi:#8f4f10}
.ih-coral{--ia:#f78a99;--ib:#da4a66;--hi:#a8304a}
.ih-indigo{--ia:#949df7;--ib:#5a59dc;--hi:#4440b5}
.ih-teal{--ia:#50cfbf;--ib:#158479;--hi:#0e6a61}
.ih-cyan{--ia:#56cee7;--ib:#2480b5;--hi:#17668f}
.ih-orange{--ia:#f9a068;--ib:#dc5441;--hi:#a63a22}
html[data-theme="dark"] .ih-violet{--hi:#c9bafd}
html[data-theme="dark"] .ih-pink{--hi:#f7b3d3}
html[data-theme="dark"] .ih-sky{--hi:#9ed6f7}
html[data-theme="dark"] .ih-mint{--hi:#8fe0c0}
html[data-theme="dark"] .ih-amber{--hi:#f9d98e}
html[data-theme="dark"] .ih-coral{--hi:#f9b2bc}
html[data-theme="dark"] .ih-indigo{--hi:#b8befa}
html[data-theme="dark"] .ih-teal{--hi:#86ddd2}
html[data-theme="dark"] .ih-cyan{--hi:#8fdcee}
html[data-theme="dark"] .ih-orange{--hi:#fbbd95}
.ico{--s:36px;position:relative;isolation:isolate;width:var(--s);height:var(--s);flex:none;display:inline-grid;place-items:center;
  border-radius:calc(var(--s) * .3);color:#fff;
  background:linear-gradient(145deg,var(--ia,#b29bfa),var(--ib,#7b55e6));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.07),0 6px 14px -6px color-mix(in srgb,var(--ib,#7b55e6) 72%,transparent)}
.ico::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 75% at 22% 0%,rgba(255,255,255,.4),rgba(255,255,255,0) 58%)}
.ico svg.i,.ico > svg{width:calc(var(--s) * .54);height:calc(var(--s) * .54);flex:none;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(0,0,0,.14))}
.ico-sm{--s:30px}
.ico-lg{--s:44px}
html[data-theme="dark"] .ico{box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 0 0 1px rgba(255,255,255,.08),0 0 20px -4px color-mix(in srgb,var(--ia,#b29bfa) 78%,transparent)}
.ico-bare,html[data-theme="dark"] .ico-bare{background:none;box-shadow:none;color:var(--hi)}
.ico-bare::after{display:none}
.ico-bare svg.i{width:calc(var(--s) * .72);height:calc(var(--s) * .72);filter:none}

/* ───────────── 模式令牌、尺寸与字号表 ───────────── */
:root{
  --font:"Segoe UI Variable Text","SF Pro Text","PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;
  --font-d:"Segoe UI Variable Display","SF Pro Display","Segoe UI","PingFang SC","Microsoft YaHei UI",system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,"Microsoft YaHei UI",monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.22,1,.36,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --r-card:22px;--r-tile:16px;--r-ctl:12px;
  --radius:20px;--radius-sm:12px;--radius-xs:8px;
  --side-w:248px;--sidebar-w:var(--side-w);--gap:20px;--pad:24px;
  /* 一屏尺寸：--vu = min(1vh, .568vw)。常规横屏就是 1vh；偏高或竖屏窗口按宽度封顶，首屏不再被高度拉大。1000px 以下改流式，--vu 固定 7.2px。 */
  --vu:min(1vh,.568vw);
  --mt:clamp(10px,calc(1.6 * var(--vu)),22px);
  --tb-h:clamp(52px,calc(6 * var(--vu)),72px);
  --tb-gap:clamp(10px,calc(1.8 * var(--vu)),22px);
  --fg:clamp(12px,calc(1.9 * var(--vu)),24px);
  --fpad:clamp(14px,calc(2.3 * var(--vu)),30px);
  --fh-gap:clamp(8px,calc(1.5 * var(--vu)),18px);
  --hint-h:clamp(24px,calc(3.4 * var(--vu)),40px);
  --fold-h:calc(min(100vh,100 * var(--vu)) - var(--mt) - var(--tb-h) - var(--tb-gap));
  /* 字号表：首屏以外全站共用，随屏幕宽度放大；最小值保证 1280–1440 宽和手机上也看得清 */
  --t-2xs:clamp(12px,.66vw,14px);
  --t-xs:clamp(13px,.72vw,15.5px);
  --t-sm:clamp(13.5px,.8vw,16.5px);
  --t-md:clamp(14.5px,.88vw,18px);
  --t-lg:clamp(17px,1.05vw,21px);
  --t-num:clamp(22px,1.4vw,29px);
  --t-h:clamp(16px,calc(1.95 * var(--vu)),22px);
  --t-hs:clamp(13px,calc(1.45 * var(--vu)),16px);
  --t-h2:clamp(18px,1.15vw,23px);
  --tb-ctl-h:clamp(38px,calc(4.3 * var(--vu)),46px);
  --tb-ctl-f:clamp(13px,calc(1.45 * var(--vu)),16px);
}
@supports (height:100dvh){:root{--fold-h:calc(min(100dvh,100 * var(--vu)) - var(--mt) - var(--tb-h) - var(--tb-gap))}}
html{
  color-scheme:light;
  --line-2:color-mix(in srgb,var(--text) 14%,transparent);
  --track-2:color-mix(in srgb,var(--text) 18%,transparent);
  --neutral:var(--text-3);--neutral-ink:var(--text-2);
  --good-i:color-mix(in srgb,var(--good-ink) 85%,black);--warn-i:color-mix(in srgb,var(--warn-ink) 88%,black);
  --bad-i:color-mix(in srgb,var(--bad-ink) 88%,black);--info-i:color-mix(in srgb,var(--info-ink) 88%,black);
  --card-bg:var(--glass);
  --pop-bg:var(--glass-2);
  --edge-a:rgba(255,255,255,.95);
  --edge-b:color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.45));
  --edge-c:color-mix(in srgb,var(--accent2) 26%,rgba(255,255,255,.55));
  --shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(0,0,0,.03),0 18px 40px -28px color-mix(in srgb,var(--accent) 60%,transparent);
  --sheen:rgba(255,255,255,.5);
  --blur:blur(24px) saturate(150%);
  --tile:rgba(255,255,255,.5);
  --tile-hi:rgba(255,255,255,.8);
  --field:rgba(255,255,255,.84);
  --sel:color-mix(in srgb,var(--accent) 15%,transparent);
  --sel-line:color-mix(in srgb,var(--accent) 28%,transparent);
  --glow:color-mix(in srgb,var(--accent) 40%,transparent);
  --raise:white;
  --raise-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--line);
  --au-op:.8;--curtain-op:.26;--star-op:0;
  --ring-glow-op:.26;
  --code-bg:color-mix(in srgb,var(--btn) 14%,black);
  --hover:color-mix(in srgb,var(--text) 5.5%,transparent);
  --solid:color-mix(in srgb,var(--bg1) 94%,white);
  --th-bg:color-mix(in srgb,var(--text) 4%,var(--bg0));
  --shadow-lg:0 1px 0 rgba(255,255,255,.7) inset,0 24px 60px -22px rgba(15,23,42,.32),0 0 0 1px var(--line);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --good-i:var(--good-ink);--warn-i:var(--warn-ink);--bad-i:var(--bad-ink);--info-i:var(--info-ink);
  --card-bg:linear-gradient(var(--glass),var(--glass)),color-mix(in srgb,var(--bg0) 50%,transparent);
  --pop-bg:linear-gradient(var(--glass-2),var(--glass-2)),color-mix(in srgb,var(--bg1) 92%,transparent);
  --edge-a:color-mix(in srgb,var(--accent) 42%,transparent);
  --edge-b:rgba(255,255,255,.06);
  --edge-c:color-mix(in srgb,var(--accent2) 30%,transparent);
  --shadow:inset 0 1px 0 rgba(255,255,255,.06),0 28px 56px -34px rgba(0,0,0,.85),0 0 46px -30px color-mix(in srgb,var(--accent) 55%,transparent);
  --sheen:rgba(255,255,255,.045);
  --tile:rgba(255,255,255,.04);
  --tile-hi:rgba(255,255,255,.075);
  --field:rgba(255,255,255,.05);
  --sel:color-mix(in srgb,var(--accent) 16%,transparent);
  --sel-line:color-mix(in srgb,var(--accent) 30%,transparent);
  --glow:color-mix(in srgb,var(--accent) 45%,transparent);
  --raise:rgba(255,255,255,.11);
  --raise-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 2px 6px rgba(0,0,0,.3);
  --au-op:.72;--curtain-op:.34;--star-op:.5;
  --ring-glow-op:.5;
  --code-bg:color-mix(in srgb,var(--bg0) 70%,black);
  --solid:color-mix(in srgb,var(--bg1) 88%,white);
  --th-bg:color-mix(in srgb,white 5%,var(--bg0));
  --shadow-lg:inset 0 1px 0 rgba(255,255,255,.08),0 32px 80px -24px rgba(0,0,0,.9),0 0 0 1px var(--line);
}
html[data-palette="neutral"][data-theme="light"]{
  --edge-a:var(--line);--edge-b:var(--line);--edge-c:var(--line);
  --shadow:0 1px 2px rgba(0,0,0,.04),0 10px 28px -18px rgba(0,0,0,.16);
  --sheen:transparent;
  --blur:none;
  --tile:color-mix(in srgb,var(--tint) 50%,white);
  --tile-hi:white;
  --field:white;
  --sel:var(--tint);
  --sel-line:var(--line);
  --glow:rgba(0,0,0,.07);
  --au-op:0;--curtain-op:0;
  --ring-glow-op:.1;
  --code-bg:color-mix(in srgb,var(--btn) 92%,black);
  --solid:#ffffff;
}
html[data-palette="neutral"][data-theme="dark"]{
  --card-bg:var(--glass);
  --pop-bg:linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.06)),rgba(0,0,0,.94);
  --edge-a:rgba(255,255,255,.17);--edge-b:rgba(255,255,255,.06);--edge-c:rgba(255,255,255,.1);
  --shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 60px -36px rgba(0,0,0,.9);
  --sheen:rgba(255,255,255,.03);
  --blur:blur(20px);
  --tile:rgba(255,255,255,.035);
  --tile-hi:rgba(255,255,255,.07);
  --sel:rgba(255,255,255,.075);
  --sel-line:rgba(255,255,255,.1);
  --glow:rgba(255,255,255,.16);
  --au-op:.9;--curtain-op:0;--star-op:0;
  --ring-glow-op:.32;
  --code-bg:rgba(255,255,255,.04);
  --solid:#0d0e10;
}

/* ───────────── 旧变量对照：原有组件规则保留类名，取色改用上面的令牌 ─────────────
   注意：配色表里 --good/--warn/--bad/--info 是“填充色”，文字用 --*-i；原样式表里作文字色的地方已改名。 */
html{
  --bg:var(--bg0);
  --surface:var(--card-bg);
  --surface-elevated:var(--solid);
  --surface-2:color-mix(in srgb,var(--text) 3.5%,transparent);
  --surface-3:color-mix(in srgb,var(--text) 7%,transparent);
  --border:var(--line);
  --border-2:var(--line-2);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.7);
  --blur-sm:var(--blur);--blur-md:var(--blur);--blur-lg:var(--blur);
  --accent-soft:var(--sel);
  --accent-soft-2:color-mix(in srgb,var(--accent) 26%,transparent);
  --accent-line:var(--sel-line);
  --good-soft:color-mix(in srgb,var(--good) 15%,transparent);
  --warn-soft:color-mix(in srgb,var(--warn) 17%,transparent);
  --bad-soft:color-mix(in srgb,var(--bad) 15%,transparent);
  --info-soft:color-mix(in srgb,var(--info) 15%,transparent);
  --slow-f:color-mix(in srgb,var(--warn) 50%,var(--bad));
  --slow:color-mix(in srgb,var(--warn-i) 50%,var(--bad-i));
  --slow-soft:color-mix(in srgb,var(--slow-f) 16%,transparent);
  --neutral-soft:color-mix(in srgb,var(--neutral) 13%,transparent);
  --lv-good:var(--good-i);--lv-warn:var(--warn-i);--lv-slow:var(--slow);--lv-critical:var(--bad-i);
  --bar-good:var(--good);--bar-warn:var(--warn);--bar-slow:var(--slow-f);--bar-critical:var(--bad);--bar-none:var(--track-2);
  --c-teal:#0e6a61;--c-sky:#1f5fa8;--c-violet:#5b3fc4;--c-amber:#8f4f10;--c-rose:#a8304a;--c-emerald:#0f6b4f;--c-indigo:#4440b5;--c-slate:var(--text-2);
  --c-teal-bg:rgba(80,207,191,.16);--c-sky-bg:rgba(102,195,244,.16);--c-violet-bg:rgba(178,155,250,.18);--c-amber-bg:rgba(248,197,91,.2);
  --c-rose-bg:rgba(247,138,153,.16);--c-emerald-bg:rgba(94,210,165,.16);--c-indigo-bg:rgba(148,157,247,.18);--c-slate-bg:var(--surface-3);
  --fam-claude:#a63a22;--fam-gpt:#0f6b4f;--fam-grok:#5b3fc4;--fam-other:#1f5fa8;
  --fam-claude-bg:rgba(249,160,104,.16);--fam-gpt-bg:rgba(94,210,165,.16);--fam-grok-bg:rgba(178,155,250,.18);--fam-other-bg:rgba(102,195,244,.16);
  --fam-claude-line:rgba(220,84,65,.3);--fam-gpt-line:rgba(23,147,108,.3);--fam-grok-line:rgba(123,85,230,.3);--fam-other-line:rgba(59,125,226,.3);
  --tok-in:var(--ink);--tok-out:var(--ink2);--tok-think:var(--c-violet);--tok-cache-r:var(--c-sky);--tok-cache-w:var(--c-amber);
  --chart-grid:var(--line);--chart-a:var(--accent);--chart-a-soft:color-mix(in srgb,var(--accent) 16%,transparent);
  --chart-b:var(--accent2);--chart-c:var(--neutral);--chart-fail:var(--bad);--chart-think:color-mix(in srgb,var(--accent2) 50%,var(--track-2));
  --code-soft:color-mix(in srgb,var(--text) 4%,transparent);
  --scroll:color-mix(in srgb,var(--text) 22%,transparent);
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow-hover:var(--shadow);
  --ring:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent);
}
html[data-theme="dark"]{
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.06);
  --c-teal:#86ddd2;--c-sky:#9ed6f7;--c-violet:#c9bafd;--c-amber:#f9d98e;--c-rose:#f9b2bc;--c-emerald:#8fe0c0;--c-indigo:#b8befa;
  --fam-claude:#fbbd95;--fam-gpt:#8fe0c0;--fam-grok:#c9bafd;--fam-other:#9ed6f7;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
}

/* ───────────── 原有组件（类名不变；取色与字号已换成上面的令牌） ───────────── */
/* ───────────── 基础与重置 ───────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--scroll) transparent; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--text); background: var(--bg);
  font: var(--t-md)/1.6 var(--font); letter-spacing: -.004em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
::selection { background: var(--accent-soft-2); color: var(--text); }
a { color: var(--ink); text-decoration: none; transition: color .16s var(--ease-spring); }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
code, pre, kbd, .mono { font-family: var(--mono); font-size: .92em; }
.num, .tnum { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.icon.sm { width: 15px; height: 15px; }
.icon.xs { width: 13px; height: 13px; }
.icon.lg { width: 22px; height: 22px; }
.icon.xl { width: 28px; height: 28px; }
.icon.fill { fill: currentColor; stroke: none; }
.spin { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.muted { color: var(--text-3); }
.small { font-size: var(--t-xs); }
.xsmall { font-size: var(--t-2xs); }
.strong { font-weight: 600; color: var(--text); }
.spacer { flex: 1 1 auto; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break { overflow-wrap: anywhere; word-break: break-word; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--ring); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ───────────── 外壳与导航栏（macOS 侧边毛玻璃 + Squircle 图标） ───────────── */
.skip-link { position: fixed; top: -60px; left: 20px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--btn); color: var(--on-btn); font-weight: 600; box-shadow: var(--shadow-lg); transition: top .2s var(--ease-spring); }
.skip-link:focus { top: 12px; }

.page { display: flex; flex-direction: column; gap: 16px; min-width: 0; animation: page-enter .34s var(--ease-spring) both; }
@keyframes page-enter {
  from { opacity: 0; transform: translateY(8px) scale(.996); }
  to { opacity: 1; transform: none; }
}

.banner {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px;
  border-radius: 14px; border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  background: var(--warn-soft); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
  color: var(--text); font-size: var(--t-sm); box-shadow: var(--shadow-sm); animation: page-enter .28s var(--ease-spring) both;
}
.banner > .icon { color: var(--warn-i); flex: none; }
.banner .grow { flex: 1; min-width: 0; }
.banner a { font-weight: 600; }
.banner.danger { border-color: color-mix(in srgb, var(--bad) 42%, transparent); background: var(--bad-soft); }
.banner.danger > .icon { color: var(--bad-i); }

/* ───────────── 磨砂玻璃卡片与通用容器 ───────────── */
.card {
  position: relative; background: var(--surface);
  backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow); min-width: 0;
  transition: border-color .22s var(--ease-spring), box-shadow .22s var(--ease-spring), background .22s var(--ease-spring);
}
.card.tight { padding: 13px 16px; }
.card.flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head.compact-head { margin-bottom: 10px; }
.card-head > div:first-child, .md-toolbar > div:first-child { min-width: 0; }
.card-head h2, .md-toolbar h2 {
  font-size: var(--t-md); font-weight: 660; letter-spacing: -.012em; display: flex; align-items: center; gap: 9px;
}
/* 卡片标题 Squircle 图标容器 */
.card-head h2 > .icon, .md-toolbar h2 > .icon {
  width: 28px; height: 28px; padding: 5.5px; border-radius: 8px;
  background: var(--accent-soft); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 2px rgba(15, 23, 42, .04);
}
[data-theme="dark"] .card-head h2 > .icon, [data-theme="dark"] .md-toolbar h2 > .icon {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 3px rgba(0, 0, 0, .25);
}

.card-head p, .md-toolbar p { margin-top: 3px; font-size: var(--t-xs); color: var(--text-3); }
.card-head .actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; justify-content: flex-end; }
.card-head .actions .search { flex: 0 1 190px; min-width: 140px; max-width: 190px; }
.card-head .actions .select.compact select { min-width: 0; max-width: 132px; }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.gap-xs { gap: 6px; }
.stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.grid { display: grid; gap: 16px; min-width: 0; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.wide-left { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.grid.wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.footnote { font-size: var(--t-xs); color: var(--text-3); line-height: 1.7; }
.divider { height: 1px; background: var(--border); margin: 14px 0; border: 0; }

/* ───────────── 按钮与交互控件 ───────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6.5px; height: 34px; padding: 0 13px;
  border-radius: 9px; border: 1px solid var(--border-2); background: var(--surface-elevated);
  color: var(--text); font: 550 var(--t-xs)/1 var(--font); cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-sm); text-decoration: none;
  transition: background .18s var(--ease-spring), border-color .18s var(--ease-spring), color .18s var(--ease-spring), box-shadow .18s var(--ease-spring), transform .14s var(--ease-spring);
}
.btn:hover:not(:disabled) {
  background: var(--hover); border-color: color-mix(in srgb, var(--accent) 28%, var(--border-2));
  box-shadow: 0 3px 10px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .8);
  text-decoration: none; transform: translateY(-.5px);
}
[data-theme="dark"] .btn:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn:active:not(:disabled) { transform: scale(.975); }
.btn:disabled { opacity: .48; cursor: not-allowed; }
.btn .icon { color: var(--text-3); transition: color .16s var(--ease-spring); }
.btn:hover:not(:disabled) .icon { color: var(--text); }
.btn.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--btn) 90%, #fff 10%), var(--btn));
  border-color: color-mix(in srgb, var(--btn) 85%, #000 15%);
  color: var(--on-btn);
  box-shadow: 0 2px 6px var(--glow), 0 6px 16px -4px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn.primary .icon, .btn.primary:hover:not(:disabled) .icon { color: currentColor; }
.btn.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--btn) 88%, #fff 12%), var(--btn));
  border-color: var(--btn);
  box-shadow: 0 4px 10px var(--glow), 0 10px 22px -6px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .32);
}
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
.btn.ghost:hover:not(:disabled) { background: var(--hover); border-color: transparent; color: var(--text); box-shadow: none; }
.btn.danger { color: var(--bad-i); }
.btn.danger .icon, .btn.danger:hover:not(:disabled) .icon { color: var(--bad-i); }
.btn.danger:hover:not(:disabled) { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad-i) 32%, var(--border)); }
.btn.danger.solid { background: linear-gradient(180deg, #ef4444, var(--bad-i)); border-color: var(--bad-i); color: #fff; box-shadow: 0 2px 8px rgba(220, 38, 38, .3), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn.danger.solid .icon, .btn.danger.solid:hover:not(:disabled) .icon { color: #fff; }
.btn.small { height: 30px; padding: 0 10.5px; font-size: var(--t-xs); border-radius: 8px; gap: 5px; }
.btn.xs { height: 25px; padding: 0 8.5px; font-size: var(--t-2xs); border-radius: 7px; gap: 4px; }
.btn.icon-only { width: 34px; padding: 0; }
.btn.small.icon-only { width: 30px; }
.btn.block { width: 100%; }
.btn.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--ink); }
.btn.active .icon { color: var(--ink); }
.link-btn { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font: 550 var(--t-xs) var(--font); color: var(--ink); cursor: pointer; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.copy-btn {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text-3); cursor: pointer; flex: none;
  transition: background .16s var(--ease-spring), color .16s var(--ease-spring), transform .14s var(--ease-spring);
}
.copy-btn:hover { background: var(--surface-3); color: var(--text); transform: scale(1.05); }
.copy-btn:active { transform: scale(.94); }
.copy-btn.done { color: var(--good-i); background: var(--good-soft); }

/* ───────────── 输入框、下拉与开关 ───────────── */
input:not([type]), input[type="text"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], input[type="date"], input[type="email"], select, textarea {
  width: 100%; min-width: 0; height: 36px; padding: 0 11.5px; border-radius: 9.5px; border: 1px solid var(--border-2);
  background: var(--surface-elevated); color: var(--text); font: var(--t-sm) var(--font);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .03);
  transition: border-color .18s var(--ease-spring), box-shadow .18s var(--ease-spring), background .18s var(--ease-spring);
}
[data-theme="dark"] input:not([type]), [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="email"], [data-theme="dark"] select, [data-theme="dark"] textarea {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}
input[type="number"] { font-variant-numeric: tabular-nums; }
textarea { height: auto; padding: 10px 12px; line-height: 1.65; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); background: var(--surface-elevated); }
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: .82; }
input.invalid, select.invalid { border-color: var(--bad-i); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad-i) 18%, transparent); }
select { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer; }
.select { position: relative; display: inline-flex; min-width: 0; }
.select select { width: 100%; }
.select::after {
  content: ""; position: absolute; right: 11px; top: 50%; width: 6px; height: 6px; margin-top: -4.5px;
  border-right: 1.7px solid var(--text-3); border-bottom: 1.7px solid var(--text-3);
  transform: rotate(45deg); pointer-events: none; transition: border-color .16s;
}
.select:hover::after { border-color: var(--text); }
.select.compact select { height: 32px; font-size: var(--t-xs); border-radius: 8.5px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > .label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: var(--t-xs); font-weight: 560; color: var(--text-2); }
.field > .label small { font-weight: 420; color: var(--text-3); font-size: var(--t-2xs); }
.field .hint { font-size: var(--t-xs); color: var(--text-3); line-height: 1.55; }
.field .hint.err { color: var(--bad-i); font-weight: 550; }
.field.full { grid-column: 1 / -1; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.input-unit { position: relative; display: flex; align-items: center; }
.input-unit input { padding-right: 48px; }
.input-unit .unit { position: absolute; right: 11px; font-size: var(--t-xs); color: var(--text-3); pointer-events: none; }
.input-unit.prefix input { padding-left: 24px; padding-right: 11px; }
.input-unit.prefix .unit { left: 11px; right: auto; }
.search { position: relative; flex: 1 1 220px; min-width: 180px; max-width: 340px; }
.search .icon { position: absolute; left: 10.5px; top: 50%; transform: translateY(-50%); color: var(--text-3); width: 15px; height: 15px; pointer-events: none; }
.search input { padding-left: 33px; height: 32px; font-size: var(--t-xs); border-radius: 8.5px; }
.pw-field { position: relative; }
.pw-field input { padding-right: 40px; }
.pw-field .eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }

/* Apple iOS/macOS 物理阻尼拨杆开关 */
.switch {
  appearance: none; -webkit-appearance: none; position: relative; width: 36px; height: 21px; flex: none; margin: 0;
  border-radius: 999px; background: var(--border-2); cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12);
  transition: background .24s var(--ease-spring);
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%;
  background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, .28), 0 0 0 .5px rgba(0, 0, 0, .04);
  transition: transform .26s var(--ease-bounce), width .16s var(--ease-spring);
}
.switch:active:not(:disabled)::after { width: 19px; }
.switch:checked { background: var(--good); }
.switch:checked::after { transform: translateX(15px); }
.switch:checked:active:not(:disabled)::after { transform: translateX(13px); }
.check-inline { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-xs); color: var(--text-2); cursor: pointer; white-space: nowrap; user-select: none; }
.check-inline small { color: var(--text-3); font-size: var(--t-2xs); font-variant-numeric: tabular-nums; }

/* ───────────── 分段控制器（Segmented Control · 苹果物理阻尼滑动指示器） ───────────── */
.segmented {
  position: relative; display: inline-flex; padding: 3px; gap: 2px; border-radius: 10.5px;
  background: var(--surface-3); border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
  max-width: 100%; overflow-x: auto; scrollbar-width: none; flex: none; z-index: 0;
}
[data-theme="dark"] .segmented { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.segmented::-webkit-scrollbar { display: none; }
.segmented.has-thumb::before {
  content: ""; position: absolute; top: 3px; bottom: 3px; left: 0;
  width: var(--seg-w, 0px); transform: translate3d(var(--seg-x, 3px), 0, 0);
  border-radius: 7.5px; background: var(--surface-elevated);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .10), 0 2px 6px -1px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .85);
  transition: transform .32s var(--ease-spring), width .32s var(--ease-spring);
  pointer-events: none; z-index: 0;
}
[data-theme="dark"] .segmented.has-thumb::before {
  background: rgba(255, 255, 255, .13);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.segmented button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11.5px;
  border: 0; border-radius: 7.5px; background: transparent; color: var(--text-2);
  font: 520 var(--t-xs) var(--font); cursor: pointer; white-space: nowrap;
  transition: color .2s var(--ease-spring), background .2s var(--ease-spring), transform .14s var(--ease-spring);
}
.segmented button:hover { color: var(--text); }
.segmented button:active:not(:disabled) { transform: scale(.97); }
.segmented button.active {
  background: var(--surface-elevated); color: var(--text); font-weight: 640;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .10), 0 0 0 .5px var(--border), inset 0 1px 0 rgba(255, 255, 255, .85);
}
[data-theme="dark"] .segmented button.active {
  background: rgba(255, 255, 255, .13);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.segmented.has-thumb button.active { background: transparent; box-shadow: none; }
.segmented button .count { font-size: var(--t-2xs); color: var(--text-3); font-variant-numeric: tabular-nums; font-weight: 550; }
.segmented button.active .count { color: var(--ink); font-weight: 650; }
.segmented button .dot { width: 6px; height: 6px; }
.segmented.icons button { width: 30px; padding: 0; justify-content: center; }
.segmented.icons button .icon { width: 15px; height: 15px; }
.segmented.big button { height: 32px; padding: 0 14px; font-size: var(--t-sm); }

/* ───────────── 页签与二级导航栏 ───────────── */
.tabs-line { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.tabs-line::-webkit-scrollbar { display: none; }
.tabs-line button {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px;
  border: 0; background: none; color: var(--text-3); font: 540 var(--t-xs) var(--font); cursor: pointer; white-space: nowrap;
  transition: color .18s var(--ease-spring);
}
.tabs-line button:hover { color: var(--text); }
.tabs-line button.active { color: var(--text); font-weight: 650; }
.tabs-line button.active::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2.5px;
  border-radius: 999px; background: var(--accent);
}
.tabs-line button .count {
  font-size: var(--t-2xs); color: var(--text-3); font-variant-numeric: tabular-nums; font-weight: 560;
  padding: 1px 6.5px; border-radius: 999px; background: var(--surface-3); line-height: 17px;
}
.tabs-line button.active .count { background: var(--accent-soft); color: var(--ink); }

.subnav-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 7px 11px; background: var(--surface);
  backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.page-tabs, .tabs-line.page-tabs { border-bottom: 0; margin-bottom: 0; gap: 5px; padding: 0; }
.page-tabs button, .tabs-line.page-tabs button {
  height: 34px; padding: 0 13px; border-radius: 10px; border: 1px solid transparent;
  font-size: var(--t-xs); font-weight: 560; color: var(--text-2); display: inline-flex; align-items: center; gap: 6.5px;
  transition: background .2s var(--ease-spring), color .2s var(--ease-spring), border-color .2s var(--ease-spring), box-shadow .2s var(--ease-spring), transform .14s var(--ease-spring);
}
.page-tabs button::after, .tabs-line.page-tabs button::after { display: none; }
.page-tabs button:hover, .tabs-line.page-tabs button:hover { background: var(--hover); color: var(--text); }
.page-tabs button:active, .tabs-line.page-tabs button:active { transform: scale(.975); }
.page-tabs button.active, .tabs-line.page-tabs button.active {
  background: var(--accent-soft); color: var(--ink); border-color: var(--accent-line);
  font-weight: 650; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.page-tabs button .icon, .tabs-line.page-tabs button .icon { color: var(--text-3); transition: color .18s; }
.page-tabs button.active .icon, .tabs-line.page-tabs button.active .icon { color: var(--ink); }
.page-tabs button .count, .tabs-line.page-tabs button .count { padding: 1px 6.5px; border-radius: 999px; background: var(--surface-3); font-size: var(--t-2xs); font-variant-numeric: tabular-nums; }
.page-tabs button.active .count, .tabs-line.page-tabs button.active .count { background: var(--accent-soft-2); color: var(--ink); }

/* ───────────── 徽章、圆点與提示框 ───────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8.5px;
  border-radius: 6.5px; font-size: var(--t-xs); font-weight: 580; white-space: nowrap;
  background: var(--neutral-soft); color: var(--text-2); font-variant-numeric: tabular-nums; vertical-align: middle;
  box-shadow: inset 0 0 0 .5px rgba(15, 23, 42, .06);
}
[data-theme="dark"] .badge { box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .08); }
.badge .icon { width: 12px; height: 12px; }
.badge.xs { height: 19px; padding: 0 6.5px; border-radius: 5.5px; font-size: var(--t-2xs); gap: 3.5px; }
.badge.good { background: var(--good-soft); color: var(--good-i); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--good-i) 24%, transparent); }
.badge.warn { background: var(--warn-soft); color: var(--warn-i); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--warn-i) 26%, transparent); }
.badge.slow { background: var(--slow-soft); color: var(--slow); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--slow) 26%, transparent); }
.badge.bad { background: var(--bad-soft); color: var(--bad-i); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--bad-i) 26%, transparent); }
.badge.info { background: var(--info-soft); color: var(--info-i); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--info-i) 24%, transparent); }
.badge.accent { background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 0 0 .5px var(--accent-line); }
.badge.neutral { background: var(--neutral-soft); color: var(--text-2); }
.badge.outline { background: transparent; box-shadow: inset 0 0 0 1px var(--border-2); color: var(--text-2); }
.badge.violet { background: var(--c-violet-bg); color: var(--c-violet); }

.dot { display: inline-block; width: 7.5px; height: 7.5px; border-radius: 50%; background: var(--neutral); flex: none; }
.dot.good { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }
.dot.slow { background: var(--slow-f); }
.dot.bad { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent); }
.dot.info { background: var(--info); box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 22%, transparent); }
.dot.accent { background: var(--accent); }
.dot.neutral { background: var(--neutral); }
.dot.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.9); } }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  font-size: var(--t-xs); color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.chip .icon { color: var(--text-3); width: 13px; height: 13px; }
button.chip { cursor: pointer; font-family: var(--font); transition: background .15s, border-color .15s, color .15s; }
button.chip:hover { background: var(--hover); color: var(--text); }
button.chip.active { background: var(--accent-soft); color: var(--ink); border-color: var(--accent-line); font-weight: 600; }
.chip b { font-weight: 650; color: var(--text); }
button.chip.active b { color: var(--ink); }

.callout {
  display: flex; gap: 11px; align-items: flex-start; padding: 12px 15px;
  border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2);
  font-size: var(--t-sm); color: var(--text-2); line-height: 1.65;
}
.callout > .icon { margin-top: 2px; color: var(--text-3); flex: none; }
.callout strong { color: var(--text); font-weight: 600; }
.callout.info { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }
.callout.info > .icon { color: var(--ink); }
.callout.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--text); }
.callout.warn > .icon { color: var(--warn-i); }
.callout.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad-i) 24%, transparent); color: var(--text); }
.callout.bad > .icon { color: var(--bad-i); }
.callout.compact { padding: 9px 13px; font-size: var(--t-xs); }

.kv { display: flex; flex-direction: column; }
.kv-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 42px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.kv-row:last-child { border-bottom: 0; }
.kv-row .k { font-size: var(--t-xs); color: var(--text-3); }
.kv-row .v { min-width: 0; font-size: var(--t-sm); overflow-wrap: anywhere; }
.kv-row .v.mono { font-family: var(--mono); font-size: var(--t-xs); }
.kv-row .v small { display: block; font-size: var(--t-2xs); color: var(--text-3); }

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 34px 20px; color: var(--text-3); font-size: var(--t-sm); }
.empty h3 { font-size: var(--t-md); color: var(--text); font-weight: 620; }
.empty-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--ink); margin-bottom: 4px; }
.empty.boxed { border: 1px dashed var(--border-2); border-radius: var(--radius); background: var(--surface-2); }
.empty.slim { padding: 22px 14px; }

.code {
  border: 1px solid var(--border); border-radius: 12px; background: var(--code-soft);
  overflow: hidden; min-width: 0; box-shadow: inset 0 1px 2px rgba(15, 23, 42, .03);
}
.code-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--border);
  font-size: var(--t-xs); font-weight: 560; color: var(--text-3); background: color-mix(in srgb, var(--surface-3) 55%, transparent);
}
.code-head .row { gap: 4px; }
.code pre { margin: 0; padding: 13px 15px; overflow: auto; max-height: 460px; font-size: var(--t-xs); line-height: 1.65; white-space: pre; color: var(--text); }
.code pre.wrap { white-space: pre-wrap; word-break: break-word; }
.inline-code { font-family: var(--mono); font-size: var(--t-xs); padding: 1px 6px; border-radius: 5px; background: var(--surface-3); color: var(--text); border: 1px solid var(--border); white-space: nowrap; }

details.more { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); transition: box-shadow .2s var(--ease-spring); }
details.more > summary {
  list-style: none; cursor: pointer; padding: 14px 20px; font-weight: 600; font-size: var(--t-sm);
  display: flex; align-items: center; gap: 8px; user-select: none;
  transition: color .16s var(--ease-spring);
}
details.more > summary:hover { color: var(--ink); }
details.more > summary::before {
  content: ""; width: 6.5px; height: 6.5px; border-right: 1.8px solid var(--text-3); border-bottom: 1.8px solid var(--text-3);
  transform: rotate(-45deg); transition: transform .22s var(--ease-spring), border-color .16s; margin-right: 4px;
}
details.more[open] > summary::before { transform: rotate(45deg); border-color: var(--accent); }
details.more > summary::-webkit-details-marker { display: none; }
details.more > .more-body { padding: 0 20px 20px; animation: page-enter .24s var(--ease-spring) both; }
details.card.more { padding: 0; }
details.card.more > summary { padding: 15px 20px; }
details.card.more > .more-body { padding: 0 20px 20px; }

/* ───────────── 浮动提示、通知 Toast、弹窗 Dialog 与 Popover ───────────── */
.float-tip {
  position: fixed; z-index: 80; pointer-events: none; min-width: 205px; max-width: 330px;
  padding: 11px 13px; border-radius: 13px; background: var(--surface-elevated);
  backdrop-filter: var(--blur-lg); -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--border-2); box-shadow: var(--shadow-lg);
  font-size: var(--t-xs); line-height: 1.6; color: var(--text-2);
  animation: pop-in .16s var(--ease-spring) both;
}
.float-tip h5 { margin: 0 0 6px; font-size: var(--t-xs); color: var(--text); font-weight: 650; }
.float-tip .tip-row { display: flex; justify-content: space-between; gap: 16px; }
.float-tip .tip-row b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.float-tip .tip-row.sub { padding-left: 10px; color: var(--text-3); }
.float-tip .tip-sep { height: 1px; background: var(--border); margin: 6px 0; }
.float-tip .tip-note { margin-top: 6px; color: var(--text-3); font-size: var(--t-2xs); }

.toasts {
  position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end;
  gap: 9px; pointer-events: none; max-width: min(440px, calc(100vw - 32px));
}
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 15px;
  border-radius: 14px; background: var(--surface-elevated);
  backdrop-filter: var(--blur-lg); -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--border-2); color: var(--text); font-size: var(--t-sm); line-height: 1.55;
  box-shadow: var(--shadow-lg); cursor: pointer;
  animation: toast-in .28s var(--ease-bounce) both;
}
.toast .icon { margin-top: 1px; color: var(--good-i); }
.toast.error .icon { color: var(--bad-i); }
.toast.info .icon { color: var(--ink); }
.toast.leaving { animation: toast-out .2s var(--ease-spring) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px) scale(.97); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(4px) scale(.97); } to { opacity: 1; transform: none; } }

dialog {
  border: 1px solid var(--border-2); border-radius: 20px; padding: 0;
  background: var(--surface-elevated);
  backdrop-filter: var(--blur-lg); -webkit-backdrop-filter: var(--blur-lg);
  color: var(--text); box-shadow: var(--shadow-lg);
  width: min(490px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
}
dialog[open] { animation: dialog-in .28s var(--ease-spring) both; }
dialog::backdrop {
  background: rgba(8, 12, 20, .42);
  backdrop-filter: saturate(140%) blur(6px); -webkit-backdrop-filter: saturate(140%) blur(6px);
  animation: backdrop-in .22s ease both;
}
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.dialog-body { padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 15px; }
.dialog-top { display: flex; gap: 14px; align-items: flex-start; }
.dialog-icon {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none;
  background: var(--accent-soft); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 6px var(--glow);
}
.dialog-icon.danger { background: var(--bad-soft); color: var(--bad-i); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 6px rgba(220, 38, 38, .12); }
.dialog-icon.warn { background: var(--warn-soft); color: var(--warn-i); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 6px rgba(217, 119, 6, .12); }
.dialog-top h2 { font-size: var(--t-md); font-weight: 680; letter-spacing: -.015em; line-height: 1.35; }
.dialog-top p { margin-top: 4px; font-size: var(--t-sm); color: var(--text-2); line-height: 1.65; white-space: pre-line; }
.dialog-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding-top: 6px; }

.pop { position: relative; display: inline-flex; }
.pop-panel {
  position: absolute; right: 0; top: calc(100% + 7px); z-index: 40; min-width: 210px; padding: 6px;
  border-radius: 14px; background: var(--surface-elevated);
  backdrop-filter: var(--blur-lg); -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--border-2); box-shadow: var(--shadow-lg);
  animation: pop-in .18s var(--ease-spring) both;
}
.pop-panel h5 { margin: 5px 8px 6px; font-size: var(--t-2xs); font-weight: 650; color: var(--text-3); letter-spacing: .04em; }
.pop-item {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 34px; padding: 0 10px;
  border: 0; border-radius: 9px; background: none; color: var(--text); font: 520 var(--t-sm) var(--font);
  cursor: pointer; text-align: left; transition: background .14s;
}
.pop-item:hover { background: var(--hover); }
.pop-item .icon { color: var(--text-3); }
.pop-item small { margin-left: auto; color: var(--text-3); font-size: var(--t-2xs); }
.pop-item input[type="checkbox"] { accent-color: var(--btn); width: 15px; height: 15px; margin: 0; }
.pop-item.disabled { opacity: .55; cursor: default; }
.pop-sep { height: 1px; background: var(--border); margin: 5px 4px; }

/* ───────────── 总览（Hero、KPI 彩色 Squircle、通道与统计） ───────────── */
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); }
.strip-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-right: 1px solid var(--border); min-width: 0; }
.strip-item:last-child { border-right: 0; }
.strip-icon {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: var(--surface-3); color: var(--text-3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.strip-icon.good { background: var(--good-soft); color: var(--good-i); }
.strip-icon.bad { background: var(--bad-soft); color: var(--bad-i); }
.strip-icon.warn { background: var(--warn-soft); color: var(--warn-i); }
.strip-icon.accent { background: var(--accent-soft); color: var(--ink); }
.strip-icon .icon { width: 17px; height: 17px; }
.strip-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.strip-body .k { font-size: var(--t-2xs); color: var(--text-3); font-weight: 520; }
.strip-body strong { font-size: var(--t-md); font-weight: 660; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.strip-body small { font-size: var(--t-2xs); color: var(--text-3); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.strip-body strong.tick { font-size: var(--t-lg); font-family: var(--mono); font-weight: 600; letter-spacing: 0; color: var(--ink); }
.strip-body strong.tick.soon { color: var(--warn-i); }

.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kpi, .stat {
  display: flex; gap: 13px; align-items: flex-start; padding: 16px 17px;
  background: var(--surface); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0;
  transition: transform .22s var(--ease-spring), border-color .22s var(--ease-spring), box-shadow .22s var(--ease-spring);
}
.kpi:hover, .stat:hover {
  border-color: var(--border-2); box-shadow: var(--shadow-hover); transform: translateY(-1.5px);
}
.kpi-icon, .kpi .kpi-icon, .stat .kpi-icon {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none;
  background: var(--c-teal-bg); color: var(--c-teal);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 5px rgba(15, 23, 42, .05);
}
[data-theme="dark"] .kpi-icon, [data-theme="dark"] .kpi .kpi-icon, [data-theme="dark"] .stat .kpi-icon {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 6px rgba(0, 0, 0, .3);
}
.kpi-icon .icon, .kpi .kpi-icon .icon, .stat .kpi-icon .icon { width: 18px; height: 18px; }
.kpi-body { min-width: 0; display: flex; flex-direction: column; flex: 1; }
.kpi-label { font-size: var(--t-xs); font-weight: 560; color: var(--text-3); display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kpi-value { margin-top: 3px; font-size: var(--t-num); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-value small { font-size: var(--t-xs); font-weight: 520; color: var(--text-3); letter-spacing: 0; margin-left: 3px; }
.kpi-sub { margin-top: 4px; font-size: var(--t-2xs); color: var(--text-3); line-height: 1.5; font-variant-numeric: tabular-nums; }
.kpi-sub b { color: var(--text-2); font-weight: 620; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat-grid.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-grid.prominent { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.stat-grid.prominent .stat {
  padding: 18px 22px;
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border-2));
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface-elevated) 96%, var(--accent-soft)), var(--surface));
}
.stat-grid.prominent .stat .kpi-icon { width: 44px; height: 44px; border-radius: 13px; }
.stat-grid.prominent .stat .kpi-icon .icon { width: 21px; height: 21px; }
.stat-grid.prominent .stat .kpi-label { font-size: var(--t-sm); font-weight: 640; color: var(--text-2); }
.stat-grid.prominent .stat .kpi-value { font-size: calc(var(--t-num) * 1.12); margin-top: 4px; }
.stat-grid.prominent .stat .stat-lines { font-size: var(--t-xs); margin-top: 6px; gap: 4px 16px; }
.stat .kpi-value { font-size: var(--t-num); }
.stat-lines { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: var(--t-2xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.stat-lines span { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
.stat-lines b { color: var(--text-2); font-weight: 600; margin-left: 3px; }
.stat-note { display: block; margin-top: 5px; font-size: var(--t-2xs); color: var(--text-3); line-height: 1.45; }

#sp-phases-card { margin-top: 2px; }
.phase-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.phase-tile {
  display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border); min-width: 0;
  box-shadow: var(--shadow-sm); transition: border-color .18s var(--ease-spring), transform .18s var(--ease-spring);
}
.phase-tile:hover { border-color: var(--border-2); transform: translateY(-1px); }
.phase-tile .k { font-size: var(--t-xs); color: var(--text-3); font-weight: 540; }
.phase-tile b { font-size: var(--t-lg); font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.phase-tile small { font-size: var(--t-2xs); color: var(--text-3); }
.phase-tile.unknown b { color: var(--text-3); font-weight: 500; font-size: var(--t-md); }

.lane-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.lane-tile {
  min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px;
  background: var(--surface-2); box-shadow: var(--shadow-sm);
  transition: border-color .18s var(--ease-spring), transform .18s var(--ease-spring);
}
.lane-tile b.mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: inline-block; }
.lane-tile:hover { border-color: var(--border-2); transform: translateY(-1px); }
.lane-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
/* 只让左侧账号名收缩（省略号）；状态徽章保持整宽，不被挤出卡片或露出底色 */
.lane-heading > span:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.lane-heading > .badge { flex: none; }
.lane-heading b { color: var(--text); font-size: var(--t-xs); font-weight: 640; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane-caption { margin-top: 6px; display: flex; justify-content: space-between; gap: 7px; color: var(--text-3); font-size: var(--t-2xs); }
.lane-tile.warn { border-color: color-mix(in srgb, var(--warn-i) 38%, var(--border)); background: color-mix(in srgb, var(--warn-soft) 35%, var(--surface-2)); }
.lane-tile.warn .lane-caption .icon { color: var(--warn-i); }

.ov-row { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ov-row .stack { gap: 14px; }
.ov-row2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.ov-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }

/* ───────────── 图表与分布直方图 ───────────── */
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--t-xs); color: var(--text-2); }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 3px; background: var(--chart-a); display: inline-block; }
.legend i.fail { background: var(--chart-fail); }
.legend i.b { background: var(--chart-b); }
.legend i.think { background: var(--chart-think); }
.legend i.line { height: 2px; width: 14px; border-radius: 2px; }
.legend i.dash { height: 0; width: 14px; border-radius: 0; background: none; border-top: 2px dashed var(--chart-b); }

.chart { position: relative; height: 260px; margin-top: 6px; }
.chart.short { height: 150px; }
.chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart .grid-line { stroke: var(--chart-grid); stroke-width: 1; }
.chart .base-line { stroke: var(--border-2); stroke-width: 1; }
.chart .axis { fill: var(--text-3); font-size: var(--t-2xs); font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart .bar { fill: var(--chart-a); opacity: .82; transition: opacity .15s; }
.chart .bar.s1 { fill: var(--chart-fail); opacity: .9; }
.chart .bar.think { fill: var(--chart-think); opacity: 1; }
.chart .bar.idle { fill: var(--border-2); opacity: .7; }
.chart .bar.hot { opacity: 1; }
.chart .line { fill: none; stroke: var(--chart-a); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.s1 { stroke: var(--chart-b); stroke-dasharray: 5 4; stroke-width: 1.6; }
.chart .area { fill: var(--chart-a-soft); }
.chart .point { fill: var(--surface-elevated); stroke: var(--chart-a); stroke-width: 2; }
.chart .point.s1 { stroke: var(--chart-b); }
.chart .guide { stroke: var(--border-2); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); font-size: var(--t-sm); pointer-events: none; }
.chart-tip {
  position: absolute; z-index: 5; pointer-events: none; min-width: 172px; padding: 9px 12px;
  border-radius: 12px; background: var(--surface-elevated);
  backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border-2); box-shadow: var(--shadow-lg);
  font-size: var(--t-xs); line-height: 1.65; color: var(--text-2); white-space: nowrap;
}
.chart-tip strong { display: block; color: var(--text); font-weight: 650; margin-bottom: 3px; }
.chart-tip .tip-row { display: flex; justify-content: space-between; gap: 18px; }
.chart-tip .tip-row b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-tip .tip-row i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: var(--chart-a); vertical-align: 0; }
.chart-tip .tip-row i.s1 { background: var(--chart-fail); }
.chart-tip .tip-row i.b { background: var(--chart-b); }
.chart-tip .tip-row i.think { background: var(--chart-think); }

.histo { display: grid; gap: 8px; align-items: end; height: 150px; margin: 14px 0 6px; }
.histo .col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; min-width: 0; }
.histo .count { font-size: var(--t-2xs); font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text-2); }
.histo .bar { width: 100%; max-width: 46px; height: var(--h, 0%); min-height: 2px; border-radius: 7px 7px 3px 3px; background: color-mix(in srgb, var(--chart-a) 80%, transparent); transition: height .48s var(--ease-spring); }
.histo .bar.warn { background: color-mix(in srgb, var(--bar-warn) 85%, transparent); }
.histo .bar.slow { background: color-mix(in srgb, var(--bar-slow) 85%, transparent); }
.histo .bar.critical { background: color-mix(in srgb, var(--bar-critical) 85%, transparent); }
.histo .bar.neutral { background: var(--neutral); }
.histo .bar.zero { background: var(--surface-3); }
.histo-labels { display: grid; gap: 8px; }
.histo-labels span { font-size: var(--t-2xs); color: var(--text-3); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.histo-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: var(--t-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.histo-foot b { color: var(--text-2); font-weight: 600; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.toolbar .select select { width: auto; min-width: 104px; max-width: 190px; height: 32px; font-size: var(--t-xs); text-overflow: ellipsis; }
details.more .table-wrap table.data th, details.more .table-wrap table.data td { white-space: normal; overflow-wrap: anywhere; }
.toolbar .sep { width: 1px; height: 22px; background: var(--border); }
.lv-good { color: var(--lv-good) !important; }
.lv-warn { color: var(--lv-warn) !important; }
.lv-slow { color: var(--lv-slow) !important; }
.lv-critical { color: var(--lv-critical) !important; }
.excluded-note { font-size: var(--t-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.money-note { font-size: var(--t-2xs); color: var(--text-3); }

/* ───────────── 高对比度数据表格与请求展开面板 ───────────── */
.table-wrap {
  overflow-x: auto; border: 1px solid var(--border); border-radius: 13px;
  background: var(--surface-elevated); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
[data-theme="dark"] .table-wrap { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.table-wrap.bare { border: 0; border-radius: 0; }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-xs); }
table.data th {
  position: sticky; top: 0; z-index: 1; text-align: left; font-size: var(--t-2xs); font-weight: 640;
  color: var(--text-3); background: var(--surface-2);
  backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
  padding: 9px 11px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.data td { padding: 9px 11px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; transition: background .14s; }
/* 说明性的表格（如数据保留表）允许换行，窄屏下不用横向滚动才能看全最后一列。 */
table.data.wrap-cells td { white-space: normal; vertical-align: top; line-height: 1.55; }
table.data.wrap-cells td:first-child { min-width: 9em; }
table.data.wrap-cells code { word-break: break-all; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data .num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tbody tr:hover > td { background: var(--hover); }
table.data tr.clickable { cursor: pointer; }
table.data .key { font-weight: 600; }
table.data .sub { display: block; font-size: var(--t-2xs); color: var(--text-3); }
table.data th button.sort { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
table.data th button.sort:hover { color: var(--text); }
table.data th button.sort.on { color: var(--ink); font-weight: 680; }
table.data td.wrap { white-space: normal; }

.rq-table td { vertical-align: top; padding-top: 10.5px; padding-bottom: 10.5px; }
.rq-table tr.row-main { cursor: pointer; }
.rq-table th, .rq-table td { padding-left: 7.5px; padding-right: 7.5px; }
.rq-table th:first-child, .rq-table td:first-child { padding-left: 13px; }
.rq-table th.c-marks { white-space: normal; min-width: 64px; line-height: 1.35; }
.rq-table td.c-result { white-space: normal; min-width: 112px; max-width: 168px; }
.rq-table td.c-model .mono { font-size: var(--t-2xs); }
.rq-table .tok-line:first-child { flex-wrap: nowrap; }
.rq-table tr.row-main.open > td { background: var(--surface-2); border-bottom-color: transparent; }
.rq-table tr.row-main.live > td { background: color-mix(in srgb, var(--info-soft) 60%, transparent); }
.rq-table tr.row-main.flash > td { animation: flash 1.6s ease; }
@keyframes flash { 0%, 40% { background: var(--accent-soft-2); } }
.rq-table tr.detail-row > td { padding: 0; background: var(--surface-2); white-space: normal; }
.rq-table tr.detail-row:hover > td { background: var(--surface-2); }
/* L13：详情宽度跟随可见区域（--rq-visible-w 由 app.js 写入），横向滚动时贴住左边，右栏不被裁掉。 */
.rq-table tr.detail-row .detail { position: sticky; left: 0; width: var(--rq-visible-w, auto); max-width: var(--rq-visible-w, none); animation: page-enter .22s var(--ease-spring) both; }
.detail .panel h4 > span { min-width: 0; }
.cell-time { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.cell-time b { font-weight: 580; font-size: var(--t-xs); color: var(--text); }
.cell-time small { font-size: var(--t-2xs); color: var(--text-3); }
.st { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }
.st.ok { color: var(--good-i); } .st.warn { color: var(--warn-i); } .st.error { color: var(--bad-i); } .st.running { color: var(--info-i); } .st.cancelled { color: var(--text-3); }
.cell-stack { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.cell-stack small { font-size: var(--t-2xs); color: var(--text-3); }
.cell-client b { font-weight: 600; }
.cell-model .mono { font-size: var(--t-xs); color: var(--text); font-weight: 550; }
.speed-tag { display: inline-flex; align-items: center; gap: 3px; font-size: var(--t-2xs); font-weight: 620; color: var(--text-2); }
.speed-tag .icon { width: 12px; height: 12px; }
.speed-tag.fast { color: var(--ink); }
.speed-tag.fallback { color: var(--warn-i); }

.lat { display: flex; align-items: stretch; gap: 9px; }
.lat-bar { width: 4px; flex: none; border-radius: 4px; background: var(--from, var(--bar-none)); }
.lat-bar.grad { background: linear-gradient(to bottom, var(--from) 0%, var(--from) 40%, var(--to) 60%, var(--to) 100%); }
.f-good { --from: var(--bar-good); } .f-warn { --from: var(--bar-warn); } .f-slow { --from: var(--bar-slow); } .f-critical { --from: var(--bar-critical); } .f-none { --from: var(--bar-none); }
.t-good { --to: var(--bar-good); } .t-warn { --to: var(--bar-warn); } .t-slow { --to: var(--bar-slow); } .t-critical { --to: var(--bar-critical); } .t-none { --to: var(--bar-none); }
.lat-grid { display: grid; grid-template-columns: max-content max-content; align-items: baseline; gap: 1px 9px; font-size: var(--t-xs); }
.lat-grid .k { color: var(--text-3); }
.lat-grid .v { font-weight: 620; font-variant-numeric: tabular-nums; color: var(--text); }
.lat-grid .v.none { color: var(--text-3); font-weight: 400; }

.tok { display: flex; align-items: flex-start; gap: 6px; }
.tok-lines { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.tok-line { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; }
.tok-line > span { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.tok-line b { font-weight: 620; color: var(--text); }
.tok-line .icon { width: 13px; height: 13px; stroke-width: 2.2; }
.tok-in .icon { color: var(--tok-in); }
.tok-out .icon { color: var(--tok-out); }
.tok-line.tok-sub { font-size: var(--t-2xs); color: var(--text-3); }
.tok-line.tok-sub b { font-weight: 560; }
.tok-think b { color: var(--tok-think) !important; }
.tok-cr b { color: var(--tok-cache-r) !important; }
.tok-cw b { color: var(--tok-cache-w) !important; }
.tok-line.tok-sub .icon { width: 12px; height: 12px; stroke-width: 2; }
.tok-think .icon { color: var(--tok-think); }
.tok-cr .icon { color: var(--tok-cache-r); }
.tok-cw .icon { color: var(--tok-cache-w); }
.info-dot { width: 17px; height: 17px; margin-top: 1px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--surface-3); color: var(--text-3); cursor: help; transition: background .14s, color .14s; }
.info-dot:hover { background: var(--accent-soft); color: var(--ink); }
.info-dot .icon { width: 13px; height: 13px; stroke-width: 2.8; }
.cost { font-weight: 620; font-variant-numeric: tabular-nums; color: var(--text); }
.cost.none { color: var(--text-3); font-weight: 400; }
.cell-result { max-width: 260px; white-space: normal; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.cell-result .err { font-size: var(--t-xs); color: var(--bad-i); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tools { display: flex; flex-wrap: wrap; gap: 4px; }
.tool { font-family: var(--mono); font-size: var(--t-2xs); padding: 1px 6px; border-radius: 5px; background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border); }
.marks { display: flex; flex-wrap: wrap; gap: 4px; max-width: 170px; }
.id-cell { display: inline-flex; align-items: center; gap: 2px; font-family: var(--mono); font-size: var(--t-2xs); color: var(--text-3); }

.detail { padding: 8px 16px 18px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.detail > .facts-panel { grid-column: 1 / -1; }
.facts-panel .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 22px; }
.detail .panel {
  background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 13px;
  padding: 16px 18px; min-width: 0; box-shadow: var(--shadow-sm);
}
.detail .panel + .panel { margin-top: 0; }
.detail .col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel h4 { font-size: var(--t-xs); font-weight: 660; color: var(--text-2); margin: 0 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panel h4 .icon { color: var(--text-3); }
.verdict { display: flex; gap: 13px; align-items: flex-start; }
.verdict .mark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.verdict .mark.ok { background: var(--good-soft); color: var(--good-i); }
.verdict .mark.warn { background: var(--warn-soft); color: var(--warn-i); }
.verdict .mark.error { background: var(--bad-soft); color: var(--bad-i); }
.verdict .mark.running { background: var(--info-soft); color: var(--info-i); }
.verdict .mark.cancelled { background: var(--neutral-soft); color: var(--text-3); }
.verdict h3 { font-size: var(--t-md); font-weight: 660; line-height: 1.45; }
.verdict p { margin-top: 4px; font-size: var(--t-sm); color: var(--text-2); line-height: 1.65; }
.verdict .advice { margin-top: 10px; display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-xs); color: var(--text-2); padding: 9px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); line-height: 1.6; }
.verdict .advice .icon { color: var(--ink); margin-top: 2px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 0; }
.facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: var(--t-xs); min-width: 0; }
.facts dt { color: var(--text-3); white-space: nowrap; }
.facts dd { margin: 0; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-weight: 540; }
.facts dd.mono { font-family: var(--mono); font-size: var(--t-2xs); }
.facts-group { grid-column: 1 / -1; padding: 12px 0 2px !important; border-bottom: 0 !important; font-size: var(--t-2xs) !important; font-weight: 660; color: var(--text-3); letter-spacing: .05em; }
.facts-group:first-child { padding-top: 2px !important; }
.raw-error pre { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--bad-soft); border: 1px solid color-mix(in srgb, var(--bad-i) 22%, transparent); color: var(--text); font-size: var(--t-xs); line-height: 1.6; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; }
.raw-error summary, .account-add summary, .access-hero summary { cursor: pointer; font-size: var(--t-sm); font-weight: 600; padding: 12px 0; }
.raw-error[open] summary { margin-bottom: 4px; }
.request-summary { grid-column: 1 / -1; }
.request-summary h5 { margin: 6px 0; font-size: var(--t-xs); color: var(--text-2); }

.diag { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-xs); }
.diag .line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.diag .line .k { color: var(--text-3); width: 74px; flex: none; }
.diag .line .v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: var(--t-xs); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; max-height: 460px; overflow: auto; }
.timeline li { position: relative; display: grid; grid-template-columns: 70px 14px minmax(0, 1fr); gap: 10px; padding: 5px 0; font-size: var(--t-xs); }
.timeline li::before { content: ""; position: absolute; left: 86px; top: 19px; bottom: -6px; width: 1px; background: var(--border-2); }
.timeline li:last-child::before { display: none; }
.timeline .t { text-align: right; color: var(--text-3); font-variant-numeric: tabular-nums; font-size: var(--t-2xs); padding-top: 1px; white-space: nowrap; }
.timeline .node { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--surface-elevated); border: 2px solid var(--accent); }
.timeline li.warn .node { border-color: var(--warn); }
.timeline li.error .node { border-color: var(--bad); background: var(--bad); }
.timeline li.done .node { border-color: var(--good); background: var(--good); }
.timeline li.muted .node { border-color: var(--neutral); }
.timeline .ev { min-width: 0; }
.timeline .ev b { font-weight: 600; }
.timeline .ev .dt { margin-left: 6px; color: var(--text-3); font-size: var(--t-2xs); font-variant-numeric: tabular-nums; }
.timeline .ev code { display: block; margin-top: 1px; font-size: var(--t-2xs); color: var(--text-3); white-space: pre-wrap; word-break: break-word; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 2px 0; font-size: var(--t-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.pager .pages { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pager .pages button { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--text-2); font: 540 var(--t-xs) var(--font); cursor: pointer; font-variant-numeric: tabular-nums; transition: background .15s, color .15s; }
.pager .pages button:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.pager .pages button.on { background: var(--accent-soft); color: var(--ink); font-weight: 660; border-color: var(--accent-line); }
.pager .pages button:disabled { opacity: .4; cursor: default; }
.pager .pages .gap { padding: 0 4px; }
.pager .size { display: inline-flex; align-items: center; gap: 8px; }
.pager .size .select select { height: 30px; width: auto; font-size: var(--t-xs); }

.filters { display: flex; flex-direction: column; gap: 10px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-row .select select { width: auto; min-width: 128px; max-width: 210px; height: 32px; font-size: var(--t-xs); text-overflow: ellipsis; }
.auto-refresh { display: inline-flex; align-items: center; gap: 8px; }
.auto-refresh .cd { font-size: var(--t-2xs); color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 36px; }
.summary-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: var(--t-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.summary-line > .row { gap: 8px; }
.summary-line #rq-updated { margin-right: 4px; }
.summary-line b { color: var(--text); font-weight: 650; }
.ss-dots { display: inline-flex; flex-wrap: wrap; gap: 3px; max-width: 220px; }
.ss-dots .dot { width: 8px; height: 8px; }

/* ───────────── 模型与家族语义配色（Claude / GPT / Grok / 其他） ───────────── */
.md-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 20px; }
.md-toolbar .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.md-groups { display: flex; flex-direction: column; gap: 22px; }
.md-group-head { display: flex; align-items: center; gap: 10px; margin: 0 2px 11px; }
.md-group-head .fam-mark {
  width: 26px; height: 26px; border-radius: 7.5px; display: inline-grid; place-items: center; flex: none;
  background: var(--accent-soft); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 2px rgba(15, 23, 42, .05);
}
.md-group-head .fam-mark .icon { width: 15px; height: 15px; }
.md-group[data-family="claude"] .md-group-head .fam-mark { background: var(--fam-claude-bg); color: var(--fam-claude); }
.md-group[data-family="gpt"] .md-group-head .fam-mark { background: var(--fam-gpt-bg); color: var(--fam-gpt); }
.md-group[data-family="grok"] .md-group-head .fam-mark { background: var(--fam-grok-bg); color: var(--fam-grok); }
.md-group[data-family="other"] .md-group-head .fam-mark { background: var(--fam-other-bg); color: var(--fam-other); }
.md-group-head h3 { font-size: var(--t-md); font-weight: 700; letter-spacing: -.01em; }
.md-group-head span:not(.fam-mark) {
  font-size: var(--t-2xs); font-weight: 600; color: var(--text-3); padding: 1px 7.5px;
  border-radius: 999px; background: var(--surface-3); font-variant-numeric: tabular-nums;
}
.md-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(305px, 1fr)); gap: 13px; }
.mcard {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
  padding: 15px 17px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
  box-shadow: var(--shadow); min-width: 0;
  transition: transform .22s var(--ease-spring), border-color .22s var(--ease-spring), box-shadow .22s var(--ease-spring);
}
.mcard::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent-line); opacity: .75; transition: opacity .2s var(--ease-spring);
}
.mcard[data-family="claude"]::before { background: linear-gradient(90deg, var(--fam-claude), transparent 85%); }
.mcard[data-family="gpt"]::before { background: linear-gradient(90deg, var(--fam-gpt), transparent 85%); }
.mcard[data-family="grok"]::before { background: linear-gradient(90deg, var(--fam-grok), transparent 85%); }
.mcard[data-family="other"]::before { background: linear-gradient(90deg, var(--fam-other), transparent 85%); }
.mcard:hover { border-color: var(--border-2); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.mcard:hover::before { opacity: 1; }
.mcard.default {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-line), var(--shadow);
}
.mcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; }
.mcard-head > div { min-width: 0; }
.mcard-name { font-size: var(--t-md); font-weight: 680; line-height: 1.35; letter-spacing: -.01em; }
.mcard-id { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-family: var(--mono); font-size: var(--t-xs); color: var(--text-2); min-width: 0; }
.mcard-id > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline-copy { width: 21px; height: 21px; border-radius: 5.5px; opacity: .7; }
.inline-copy:hover { opacity: 1; background: var(--hover); }
.mcard-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.mcard-caps .badge { font-weight: 600; }
.mcard-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 10px; font-size: var(--t-xs);
  padding: 9px 11px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border);
}
.mcard-facts > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mcard-facts span { color: var(--text-3); font-size: var(--t-2xs); font-weight: 520; }
.mcard-facts b { font-weight: 620; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard-note { font-size: var(--t-xs); color: var(--text-2); line-height: 1.6; }
.mcard-note.warn-note { display: flex; gap: 6px; align-items: flex-start; color: var(--warn-i); background: var(--warn-soft); border-radius: 9px; padding: 7px 10px; }
.mcard-note.warn-note .icon { flex: none; margin-top: 3px; }
.mcard-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border); min-width: 0; }
.mcard-foot small { font-size: var(--t-2xs); color: var(--text-3); min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard-foot .md-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.mcard-foot .btn.xs { padding: 0 7px; height: 24px; font-size: var(--t-2xs); gap: 3px; }
.md-empty { padding: 28px; text-align: center; }

.md-hidden { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.md-hidden-item { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); font-size: var(--t-xs); }
#model-edit-dialog { width: min(720px, calc(100vw - 32px)); }
#model-edit-dialog .dialog-body { max-height: calc(100vh - 48px); overflow-y: auto; }
#model-edit-dialog .dialog-foot,
#key-limits-dialog .dialog-foot,
#accounts-tag-dialog .dialog-foot {
  position: sticky; bottom: -22px; z-index: 2;
  margin: 0 -24px -20px; padding: 12px 24px 16px;
  background: var(--surface-elevated); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
  border-top: 1px solid var(--border);
}
#model-edit-dialog select, #model-edit-dialog input:not([type="checkbox"]) { width: 100%; min-width: 0; }
#model-edit-dialog .row.wrap { gap: 8px 18px; }
#model-edit-error { color: var(--bad-i); font-size: var(--t-xs); }
#mf-id[readonly] { background: var(--surface-2); color: var(--text-2); }
.mf-advanced { border: 1px solid var(--border); border-radius: 11px; padding: 10px 14px; background: var(--surface-2); }
.mf-advanced > summary { cursor: pointer; font-weight: 600; font-size: var(--t-sm); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.mf-advanced > summary small { font-weight: 400; color: var(--text-3); }
.mf-advanced > summary::-webkit-details-marker { display: none; }
.mf-advanced > summary::before { content: ""; align-self: center; width: 6px; height: 6px; border-right: 1.6px solid var(--text-3); border-bottom: 1.6px solid var(--text-3); transform: rotate(-45deg); transition: transform .18s var(--ease-spring); margin-right: 2px; }
.mf-advanced[open] > summary::before { transform: rotate(45deg); }
.mf-advanced[open] > .form-grid { margin-top: 12px; }

.pull-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: pull; }
.pull-steps li { position: relative; padding: 11px 12px 11px 40px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); font-size: var(--t-xs); color: var(--text-2); line-height: 1.55; }
.pull-steps li::before { counter-increment: pull; content: counter(pull); position: absolute; left: 12px; top: 11px; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--t-2xs); color: var(--ink); background: var(--accent-soft); }
.pull-steps b { display: block; font-size: var(--t-xs); color: var(--text); margin-bottom: 2px; }
.pull-progress { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.pull-bar { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.pull-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .35s var(--ease-spring); }
.pull-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 4px 0 12px; }
.pull-stat { padding: 11px 13px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface-2); cursor: default; }
.pull-stat span { display: block; font-size: var(--t-2xs); color: var(--text-3); }
.pull-stat strong { font-size: var(--t-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.pull-stat.good strong { color: var(--good-i); }
.pull-list { margin-top: 10px; }
.pull-list h3 { font-size: var(--t-sm); font-weight: 650; margin-bottom: 8px; }
details.pull-list > summary { cursor: pointer; font-size: var(--t-sm); font-weight: 600; padding: 6px 0; }
.new-models { display: flex; flex-direction: column; gap: 8px; }
.new-model { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; border-radius: 11px; border: 1px solid var(--accent-line); background: var(--accent-soft); min-width: 0; }
.new-model > div:first-child { min-width: 0; }
.new-model b { font-size: var(--t-sm); }
.new-model small { display: block; font-family: var(--mono); font-size: var(--t-2xs); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#model-pull-dialog { width: min(560px, calc(100vw - 32px)); }

.mc-table td { vertical-align: top; }
.mc-verified { color: var(--good-i); font-weight: 560; }
.mc-limited { color: var(--warn-i); }
.mc-unsupported { color: var(--text-3); text-decoration: line-through; }
.mc-unverified { color: var(--text-3); }
.limits { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.limits li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 11px; align-items: start; }
.limits .li-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--warn-soft); color: var(--warn-i); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.limits .li-icon .icon { width: 15px; height: 15px; }
.limits b { display: block; font-size: var(--t-sm); font-weight: 650; }
.limits p { font-size: var(--t-xs); color: var(--text-2); line-height: 1.65; }
.price-notes { margin: 14px 0 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 4px; font-size: var(--t-xs); color: var(--text-3); line-height: 1.65; }
.formula { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; }
.active-price { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.spec { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.spec span { display: block; font-size: var(--t-2xs); color: var(--text-3); }
.spec strong { display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); font-weight: 650; min-width: 0; }

/* ───────────── 账号管理与批量导入 ───────────── */
.login-card-box { border-color: var(--accent-line); }
.login-card-box > .card-head { margin-bottom: 12px; }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.batch-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 10px; font-size: var(--t-xs); }
.accounts-table .row-check, #accounts-select-page { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--btn); }
.accounts-table td { vertical-align: top; }
.accounts-table th, .accounts-table td { padding-left: 5.5px; padding-right: 5.5px; }
/* 账号一律显示完整名称（邮箱或本名），过长时省略，悬停看完整名称与账号 ID */
.cell-account b { font-weight: 600; }
.cell-account b, .cell-account small { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-name-cell b, .account-name-cell small { display: block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accounts-table .account-name-cell b, .accounts-table .account-name-cell small { max-width: 135px; }
.acct-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.account-actions .actions { display: flex; flex-wrap: wrap; gap: 6px; }
#accounts-table .account-actions .actions { display: grid; grid-template-columns: repeat(2, max-content); gap: 3.5px 4.5px; }
#accounts-table .account-actions .btn.xs { padding: 0 5.5px; height: 23px; font-size: var(--t-2xs); gap: 3px; justify-content: flex-start; }
.account-actions small { max-width: 280px; white-space: normal; }
.accounts-table .cell-stack small.warn-text { white-space: normal; max-width: 220px; }
#account-edit-dialog { width: min(680px, calc(100vw - 32px)); }
.cleanup-list { max-height: 320px; overflow: auto; margin: 0 0 12px; padding-left: 18px; font-size: var(--t-xs); line-height: 1.7; }
.cleanup-list small { color: var(--text-3); }

.admin-feature { min-width: 0; }
.admin-feature .form-grid { margin-bottom: 14px; align-items: end; }
.admin-feature select, .admin-feature input { min-width: 0; max-width: 100%; }
.admin-feature .actions { flex-wrap: wrap; gap: 8px; }
.admin-feature .table-wrap { margin-top: 14px; }
.admin-feature .feature-table td { vertical-align: top; }
.admin-feature .feature-table .wrap { white-space: normal; overflow-wrap: anywhere; }
.admin-feature code { overflow-wrap: anywhere; }
#account-import-form { display: grid; gap: 12px; margin-top: 14px; }
#import-input { width: 100%; min-width: 0; font-family: var(--mono, monospace); overflow-wrap: anywhere; }
#import-detail { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 16px; }
.import-precheck { margin: 6px 0 2px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); font-size: var(--t-xs); }
.import-precheck.has-problem { border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-soft); }
.import-precheck .plain-list { max-height: 180px; overflow: auto; }

/* ───────────── 接入与在线试跑（Playground） ───────────── */
.access-hero {
  padding: 20px 22px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 65%, var(--surface)), var(--surface) 60%);
}
.eyebrow {
  color: var(--ink); text-transform: none; letter-spacing: .04em;
  font-size: var(--t-2xs); font-weight: 660; display: inline-flex; align-items: center; gap: 5px;
}
.access-hero h2 { font-size: var(--t-lg); font-weight: 700; line-height: 1.35; margin-top: 3px; letter-spacing: -.02em; }
.access-hero .lead { font-size: var(--t-sm); margin-top: 4px; max-width: 780px; color: var(--text-2); line-height: 1.7; }
.endpoint-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.endpoint {
  padding: 11px 8px 11px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-elevated); min-width: 0; display: flex; align-items: center; gap: 6px;
  box-shadow: var(--shadow-sm);
}
.endpoint > div { min-width: 0; flex: 1; }
.endpoint .k { display: block; font-size: var(--t-2xs); font-weight: 650; color: var(--text-3); letter-spacing: .04em; }
.endpoint .v { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: var(--t-xs); font-weight: 560; }
.endpoint small { display: block; font-size: var(--t-2xs); color: var(--text-3); margin-top: 2px; }

#play-quota { margin-bottom: 14px; }
.play { display: grid; grid-template-columns: minmax(310px, .82fr) minmax(0, 1.28fr); gap: 16px; align-items: start; margin-top: 2px; }
.play-form { position: static; display: flex; flex-direction: column; gap: 12px; }
.presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.preset {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-elevated);
  text-align: left; cursor: pointer; font-family: var(--font); color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: border-color .18s var(--ease-spring), background .18s var(--ease-spring), box-shadow .18s var(--ease-spring), transform .14s var(--ease-spring);
}
.preset:hover { border-color: var(--border-2); background: var(--hover); transform: translateY(-1px); }
.preset:active { transform: scale(.98); }
.preset.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.preset strong { font-size: var(--t-xs); font-weight: 650; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.preset strong .icon { color: var(--ink); width: 15px; height: 15px; }
.preset small { font-size: var(--t-2xs); color: var(--text-3); line-height: 1.4; }
.play-extras { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.play-attach { cursor: pointer; }
.play-image-info { display: flex; align-items: center; gap: 8px; font-size: var(--t-xs); color: var(--text-2); }
.play-image-info img { width: 40px; height: 40px; object-fit: cover; border-radius: 7px; border: 1px solid var(--border); }
.play-conv { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border-radius: 10px; background: var(--accent-soft); font-size: var(--t-xs); }
.play-actions { display: flex; gap: 8px; }
.play-actions .btn.primary { flex: 1; height: 38px; font-size: var(--t-sm); }
.play-actions .btn { height: 38px; }
.play-advanced { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.play-advanced > h3 { margin: 0; padding: 10px 14px; font-size: var(--t-xs); font-weight: 640; color: var(--text-2); }
.play-advanced > .play-opts, .play-advanced > .footnote { padding: 0 14px; }
.play-advanced > .play-opts { padding-bottom: 8px; }
.play-advanced > .footnote:last-child { padding-bottom: 12px; }
.play-opts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: center; font-size: var(--t-xs); }
.play-opts > .k { color: var(--text-3); font-weight: 560; }
.play-opts > * { justify-self: start; }
.play-opts > .segmented { width: max-content; flex-wrap: nowrap; }
.play-opts > .select, .play-opts select, .play-opts input { max-width: 100%; min-width: 0; }
.play-opts > .select { width: 100%; }
#play-speed button:disabled { cursor: not-allowed; opacity: .55; }
#play-speed button:disabled.active { background: var(--surface-3); color: var(--text-2); box-shadow: none; }

.account-picker { position: relative; min-width: 0; width: 100%; }
.account-picker-btn { width: 100%; justify-content: space-between; gap: 8px; min-width: 0; }
.account-picker-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-popover {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(420px, 86vw);
  padding: 10px; background: var(--surface-elevated);
  backdrop-filter: var(--blur-lg); -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--border-2); border-radius: 13px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 8px; animation: pop-in .18s var(--ease-spring) both;
}
.account-popover input[type="search"] { width: 100%; }
.account-options { display: flex; flex-direction: column; gap: 4px; max-height: 330px; overflow-y: auto; }
.account-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 7px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; transition: background .14s; }
.account-option:hover:not(:disabled) { background: var(--hover); }
.account-option.selected { border-color: var(--accent-line); background: var(--accent-soft); }
.account-option:disabled { opacity: .55; cursor: not-allowed; }
.account-option-main { display: flex; flex-direction: column; min-width: 0; }
.account-option-main b { font-weight: 600; font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.account-option-main small { font-size: var(--t-2xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.account-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--t-2xs); color: var(--text-3); }
.account-empty { padding: 12px; text-align: center; font-size: var(--t-xs); color: var(--text-3); }

.play-output { min-width: 0; }
.run-status { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); font-size: var(--t-sm); font-weight: 550; color: var(--text-2); }
.run-status.running { background: var(--info-soft); border-color: color-mix(in srgb, var(--info-i) 24%, transparent); color: var(--info-i); }
.run-status.done { background: var(--good-soft); border-color: color-mix(in srgb, var(--good-i) 24%, transparent); color: var(--good-i); }
.run-status.failed { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad-i) 24%, transparent); color: var(--bad-i); }
.run-status.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn-i) 26%, transparent); color: var(--warn-i); }
.run-status .phase { margin-left: auto; font-size: var(--t-xs); font-variant-numeric: tabular-nums; font-family: var(--mono); }
#play-alerts { margin-top: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.metrics, .play .metrics {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-top: 12px; background: var(--surface-elevated);
}
.metrics > div, .play .metrics > div { padding: 9px 11px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-width: 0; }
.play .metrics > div:nth-child(5n) { border-right: 0; }
.play .metrics > div:nth-last-child(-n+5) { border-bottom: 0; }
.metrics span { display: block; font-size: var(--t-2xs); color: var(--text-3); }
.metrics strong, .play .metrics strong { display: block; margin-top: 2px; font-size: var(--t-md); font-weight: 660; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.01em; }
.play-metric-note { font-size: var(--t-2xs); color: var(--text-3); padding: 6px 2px 2px; line-height: 1.5; }
.play-phases { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.play-phase { display: inline-flex; gap: 6px; align-items: baseline; padding: 3.5px 9.5px; border-radius: 8px; background: var(--surface-3); font-size: var(--t-xs); }
.play-phase b { font-variant-numeric: tabular-nums; }
.play-phase.unknown b { color: var(--text-3); font-weight: 500; }
.play-pane {
  min-height: 240px; max-height: 620px; overflow: auto; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: 13px; background: var(--surface-elevated);
  font-size: var(--t-md); line-height: 1.75; white-space: pre-wrap; word-break: break-word;
}
.play-pane.placeholder { color: var(--text-3); display: grid; place-items: center; text-align: center; font-size: var(--t-sm); }
.play-pane.thinking { color: var(--text-2); font-size: var(--t-sm); background: var(--surface-2); }
.play-pane.raw { font-family: var(--mono); font-size: var(--t-2xs); line-height: 1.6; background: var(--code-soft); white-space: pre; }
.play-pane.record { white-space: normal; padding: 14px; background: var(--surface-2); }
.play-turn { display: block; margin: 0 0 10px; padding: 7px 11px; border-left: 3px solid var(--border-2); background: var(--surface-2); border-radius: 7px; white-space: pre-wrap; }
.play-turn > b { display: block; font-size: var(--t-2xs); color: var(--text-3); margin-bottom: 2px; }
.play-turn.user { border-left-color: var(--accent); }
.play-turn.tool { border-left-color: var(--warn); font-family: var(--mono, monospace); font-size: var(--t-xs); }
.caret { display: inline-block; width: 7px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--accent); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.record-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.record-head .mono { font-size: var(--t-xs); color: var(--text-3); }

/* 客户端配置指南 */
.ac-key-row { display: grid; gap: 6px; margin-bottom: 14px; max-width: 640px; }
.ac-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 14px; }
.client-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.client-tabs button {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px;
  border-radius: 9.5px; border: 1px solid var(--border); background: var(--surface-elevated);
  color: var(--text-2); font: 540 var(--t-xs) var(--font); cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .18s var(--ease-spring), border-color .18s var(--ease-spring), color .18s var(--ease-spring), transform .14s var(--ease-spring);
}
.client-tabs button:hover { background: var(--hover); color: var(--text); transform: translateY(-.5px); }
.client-tabs button:active { transform: scale(.975); }
.client-tabs button.active {
  background: var(--accent-soft); color: var(--ink); border-color: var(--accent-line);
  font-weight: 660; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.client-tabs button .icon { width: 15px; height: 15px; color: var(--text-3); }
.client-tabs button.active .icon { color: var(--ink); }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; counter-reset: step; }
.steps > li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding-bottom: 16px; }
.steps > li::before { counter-increment: step; content: counter(step); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--t-xs); color: var(--ink); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.steps > li::after { content: ""; position: absolute; left: 14px; top: 32px; bottom: 4px; width: 1px; background: var(--border-2); }
.steps > li:last-child::after { display: none; }
.steps h4 { font-size: var(--t-sm); font-weight: 660; margin: 3px 0 4px; }
.steps p { font-size: var(--t-xs); color: var(--text-2); line-height: 1.65; }
.setting-table { margin-top: 8px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface-elevated); }
.setting-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) 30px; align-items: center; gap: 12px; padding: 8px 8px 8px 13px; border-bottom: 1px solid var(--border); font-size: var(--t-sm); }
.setting-row:last-child { border-bottom: 0; }
.setting-row .k { color: var(--text-3); font-size: var(--t-xs); }
.setting-row .v { min-width: 0; overflow-wrap: anywhere; }
.setting-row .v b { font-family: var(--mono); font-size: var(--t-xs); font-weight: 560; }
.setting-row .v small { display: block; font-size: var(--t-2xs); color: var(--text-3); }
.access-context { margin-top: 20px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.access-context h3 { margin: 0 0 10px; }
.faq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.faq article {
  padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
  box-shadow: var(--shadow);
}
.faq h3 { display: flex; align-items: center; gap: 9px; font-size: var(--t-sm); font-weight: 660; }
.faq h3 .icon {
  width: 26px; height: 26px; padding: 5px; border-radius: 7.5px;
  background: var(--accent-soft); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.faq p { margin-top: 7px; font-size: var(--t-xs); color: var(--text-2); line-height: 1.75; }

/* ───────────── API Key 与设置页 ───────────── */
#key-create-form { display: flex; align-items: flex-end; gap: 10px; width: 100%; }
#key-create-form > .field.grow { flex: 1 1 220px; min-width: 180px; }
#key-create-form > .field.grow input { width: 100%; }
#key-secret-dialog { width: min(600px, calc(100vw - 28px)); }
#key-secret { width: 100%; min-width: 0; overflow-wrap: anywhere; font-family: var(--mono, monospace); resize: vertical; }
#key-limits-dialog { width: min(620px, calc(100vw - 32px)); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 12px; margin-top: 6px; max-height: 220px; overflow: auto; }
.check-grid label { display: flex; gap: 6px; align-items: center; font-size: var(--t-sm); }
.key-state.active { color: var(--good-i, var(--text)); font-weight: 600; }
.key-state.disabled { color: var(--warn-i); }
.key-state.revoked { color: var(--text-3, var(--text-2)); }

.settings-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.settings-stack .card { scroll-margin-top: 86px; }
.gpt-card { border: 1px solid var(--border); background: var(--surface); }
.gpt-card.on { border-color: var(--accent-line); }
.gpt-card .card-head h2 .icon { color: var(--ink); }
.toggle-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.toggle-cards.one { grid-template-columns: minmax(0, 1fr); }
.toggle-card {
  display: flex; align-items: center; gap: 14px; padding: 15px 18px;
  border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2);
  cursor: pointer; transition: border-color .18s var(--ease-spring), background .18s var(--ease-spring), box-shadow .18s var(--ease-spring);
}
.toggle-card:hover { border-color: var(--border-2); background: var(--hover); }
.toggle-card:has(input:checked) { border-color: color-mix(in srgb, var(--good) 42%, var(--border)); background: var(--good-soft); }
.toggle-card .switch { width: 42px; height: 24px; }
.toggle-card .switch::after { width: 20px; height: 20px; }
.toggle-card .switch:checked::after { transform: translateX(18px); }
.toggle-card .switch:disabled { opacity: .5; cursor: not-allowed; }
.toggle-card:has(input:disabled) { cursor: not-allowed; border-style: dashed; }
.tc-body { display: flex; flex-direction: column; min-width: 0; }
.tc-body strong { font-size: var(--t-md); font-weight: 660; }
.tc-body small { font-size: var(--t-xs); color: var(--text-3); margin-top: 1px; }
.gpt-models { font-size: var(--t-xs); }
#set-claude-models th, #set-claude-models td, #set-gpt-models th, #set-gpt-models td { white-space: normal; overflow-wrap: anywhere; }
#set-gpt .table-wrap { margin-bottom: 10px; }
#set-api-key .pw-field.grow { flex: 1; min-width: 0; display: block; }
#set-api-key .pw-field.grow input { width: 100%; }

.field .range { font-size: var(--t-2xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.field.changed > .label::after { content: "已修改"; margin-left: auto; font-size: var(--t-2xs); font-weight: 600; color: var(--warn-i); }
.field.changed > .label small { display: none; }
.field.saved > .label::after { content: "已保存并生效"; margin-left: auto; font-size: var(--t-2xs); font-weight: 600; color: var(--good-i); }
.kv-row .v .restart-badge { margin-left: 6px; }
.pw-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }

.save-bar {
  position: fixed; left: calc(var(--sidebar-w) + (100vw - var(--sidebar-w)) / 2); bottom: 22px; z-index: 50; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 16px; width: min(640px, calc(100vw - var(--sidebar-w) - 48px));
  border: 1px solid var(--border-2); border-radius: 16px; background: var(--surface-elevated);
  backdrop-filter: var(--blur-lg); -webkit-backdrop-filter: var(--blur-lg);
  box-shadow: var(--shadow-lg); animation: bar-in .28s var(--ease-bounce) both;
}
@keyframes bar-in { from { opacity: 0; transform: translate(-50%, 14px) scale(.97); } to { opacity: 1; transform: translate(-50%, 0); } }
.save-bar .icon.warn-ico { color: var(--warn-i); }
.save-bar .text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--t-sm); line-height: 1.4; }
.save-bar .text b { font-weight: 660; }
.save-bar .text small { color: var(--text-3); font-size: var(--t-2xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ───────────── 辅助说明气泡（? Help）与状态横幅 ───────────── */
.title-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.help { position: relative; display: inline-flex; flex: none; }
.help > summary {
  list-style: none; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
  font: 700 var(--t-2xs)/1 var(--font); color: var(--text-3); background: var(--surface-3);
  cursor: pointer; user-select: none; transition: background .16s, color .16s, transform .14s;
}
.help > summary::-webkit-details-marker { display: none; }
.help > summary:hover, .help[open] > summary { background: var(--accent-soft); color: var(--ink); transform: scale(1.06); }
.help-body {
  position: absolute; z-index: 45; top: calc(100% + 8px); left: -10px; width: min(350px, 80vw);
  padding: 13px 15px; border-radius: 13px; background: var(--surface-elevated);
  backdrop-filter: var(--blur-lg); -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--border-2); box-shadow: var(--shadow-lg);
  font-size: var(--t-xs); font-weight: 400; line-height: 1.75; color: var(--text-2);
  white-space: normal; letter-spacing: 0; text-align: left; animation: pop-in .18s var(--ease-spring) both;
}
.help.wide .help-body { width: min(500px, 86vw); }
.help-body p + p { margin-top: 8px; }
.help-body b { color: var(--text); font-weight: 600; }
.help-body code { font-size: var(--t-2xs); padding: 0 4px; border-radius: 4px; background: var(--surface-3); }
.toolbar .help .help-body { left: auto; right: -10px; }
.warn-text { color: var(--warn-i) !important; }

.load-note {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1;
  margin: 0 0 12px; padding: 9px 13px; border-radius: 11px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-2); font-size: var(--t-xs); line-height: 1.6;
}
.load-note > span { flex: 1 1 260px; min-width: 0; }
.load-note.error { border-color: color-mix(in srgb, var(--bad-i) 28%, transparent); background: var(--bad-soft); color: var(--text); }
.load-note.error > .icon { color: var(--bad-i); }
.card-head + .load-note, summary + .load-note { margin-top: 10px; }

.job-progress { display: inline-flex; align-items: center; gap: 6px; }
.job-link {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--accent-line, var(--border));
  background: var(--accent-soft); color: var(--ink); font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
}
.job-link:hover { text-decoration: underline; }

#ov-health-issues li { display: block; line-height: 1.6; }
#ov-health-issues li b { display: inline; margin-right: 4px; white-space: nowrap; }
.hard-list { display: flex; flex-direction: column; }
.hard-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.hard-item:last-child { border-bottom: 0; }
.hard-item b { font-size: var(--t-sm); font-weight: 650; }
.hard-item p { margin: 4px 0 0; font-size: var(--t-xs); color: var(--text-2); line-height: 1.55; }
.hard-item p.impact { color: var(--text-3); }
.hard-item p.impact .k { color: var(--warn-i); font-weight: 600; }
#ov-limits .kv-row { grid-template-columns: 120px minmax(0, 1fr) 0; }
.plain-list { margin: 8px 0 0; padding-left: 18px; font-size: var(--t-sm); color: var(--text-2, var(--text)); line-height: 1.65; }
.plain-list:empty { display: none; }

/* ───────────── 登录页（macOS 磨砂玻璃工作台登录） ───────────── */
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 48px 28px; }
.login-body.checking .login-wrap { visibility: hidden; animation: login-reveal 0s 5s forwards; }
@keyframes login-reveal { to { visibility: visible; } }
.login-wrap {
  position: relative; z-index: 1; width: min(1020px, 100%);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(350px, 420px);
  column-gap: 96px; row-gap: 32px; align-items: center;
}
.login-intro { min-width: 0; }
.login-wordmark { display: flex; align-items: center; gap: 13px; margin-bottom: 64px; }
.login-wordmark .brand-mark { width: 42px; height: 42px; border-radius: 12px; }
.login-wordmark strong { font-size: calc(var(--t-num) * 1.12); font-weight: 740; letter-spacing: -.04em; }
.login-intro > h2 { font-size: 36px; line-height: 1.38; font-weight: 700; letter-spacing: -.035em; margin-top: 12px; }
.login-intro > p { color: var(--text-2); font-size: var(--t-md); line-height: 1.75; max-width: 360px; margin-top: 16px; }
.login-route { display: flex; align-items: center; gap: 10px; margin-top: 30px; flex-wrap: wrap; font-size: var(--t-2xs); color: var(--text-3); }
.login-route b {
  padding: 6px 11px; border: 1px solid var(--accent-line); background: var(--accent-soft);
  color: var(--ink); border-radius: 8px; font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.login-route .icon { width: 13px; height: 13px; }
.login-contract { display: flex; align-items: center; gap: 22px; margin-top: 22px; color: var(--text-3); font-size: var(--t-xs); }
.login-contract > span { display: flex; align-items: center; gap: 7px; }
.login-contract .icon { color: var(--ink); }
.login-card {
  padding: 36px 32px 26px; border-radius: 22px; background: var(--surface);
  backdrop-filter: var(--blur-lg); -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  animation: rise .38s var(--ease-spring) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
.login-card > .brand-mark { display: none; }
.login-card h1 { margin-top: 7px; font-size: calc(var(--t-num) * 1.12); font-weight: 700; letter-spacing: -.025em; }
.login-card .lead { margin-top: 6px; color: var(--text-3); font-size: var(--t-sm); }
.login-card form { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.login-card label { font-size: var(--t-xs); font-weight: 600; color: var(--text-2); }
.login-field { position: relative; }
.login-field > .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; width: 17px; height: 17px; }
.login-field input { height: 46px; padding: 0 44px 0 40px; font-size: var(--t-md); border-radius: 11px; background: var(--surface-elevated); }
.login-field .eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; }
.login-card .btn.primary { margin-top: 6px; height: 45px; font-size: var(--t-md); border-radius: 11px; }
.login-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: var(--t-2xs); color: var(--text-3); line-height: 1.6; }
.login-note .icon { width: 14px; height: 14px; margin-top: 2px; color: var(--ink); flex: none; }
.login-error { margin-top: 12px; display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-radius: 11px; font-size: var(--t-sm); font-weight: 550; color: var(--bad-i); background: var(--bad-soft); line-height: 1.55; }
.login-error .icon { margin-top: 1px; width: 16px; height: 16px; }
.login-error.locked { color: var(--warn-i); background: var(--warn-soft); }
.login-error.login-plain-http { display: block; margin: 0 0 12px; font-weight: 500; color: var(--warn-i); background: var(--warn-soft); }
.login-error.login-plain-http b { font-family: inherit; }
.login-error b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.login-features { margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; list-style: none; }
.login-features li { font-size: var(--t-2xs); color: var(--text-3); display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.login-features .icon { width: 14px; height: 14px; color: var(--ink); }
.login-foot { grid-column: 1 / -1; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 0 0; margin-top: 24px; font-size: var(--t-2xs); color: var(--text-3); }

/* ───────────── 响应式布局与窄屏适配 ───────────── */
/* 窄屏优先保住“操作”列可点：次要列按宽度依次收起，不做横向拖动 */
@media (max-width: 1260px) {
  .accounts-table .c-perms, .accounts-table .c-error,
  .rq-table .c-cost, .rq-table .c-marks { display: none; }
}
@media (max-width: 1240px) {
  .kpi-grid, .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-grid > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strip-item:nth-child(3n) { border-right: 0; }
  .ov-row, .ov-grid, .play, .detail, .model-hero { grid-template-columns: minmax(0, 1fr); }
  .play-form { position: static; }
  .facts-panel .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .endpoint-grid, .faq, .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.three > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .login-wrap { column-gap: 54px; }
}
@media (max-width: 1080px) {
  .accounts-table .c-hour, .accounts-table .c-pace,
  .rq-table .c-client, .rq-table .c-result { display: none; }
}
@media (max-width: 940px) {
  .accounts-table .c-day, .rq-table .c-genSpeed { display: none; }
}
@media (max-width: 920px) {
  .page { gap: 14px; }
  .hero, .grid.two, .grid.three, .grid.wide-left, .grid.wide-right, .ov-row, .ov-row2, .form-grid, .form-grid.three, .toggle-cards, .formula, .faq, .pull-steps { grid-template-columns: minmax(0, 1fr); }
  .grid.three > :last-child:nth-child(odd) { grid-column: auto; }
  .hero-counts > div:first-child { border-left: 0; padding-left: 0; }
  .card-head .actions { flex-wrap: wrap; justify-content: flex-start; }
  .phase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics, .play .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics > div:nth-child(2n), .play .metrics > div:nth-child(2n) { border-right: 0; }
  .save-bar { left: 50%; width: calc(100vw - 24px); bottom: 12px; }
  .facts, .facts-panel .facts { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 16px; }
  .login-intro > h2 { font-size: 29px; }
  .login-wrap { column-gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); }
  .login-card { padding: 30px 25px 24px; }
}
@media (max-width: 680px) {
  .login-body { padding: 32px 20px; }
  .login-wrap { width: min(410px, 100%); display: flex; flex-direction: column; gap: 24px; }
  .login-intro { width: 100%; }
  .login-wordmark { margin: 0; justify-content: center; }
  .login-intro > .eyebrow, .login-intro > h2, .login-intro > p, .login-route, .login-contract { display: none; }
  .login-card { width: 100%; }
  .login-foot { width: 100%; margin: 0; padding-top: 16px; gap: 8px; font-size: var(--t-2xs); }
  .login-features { grid-template-columns: repeat(3, 1fr); }
  .endpoint-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-feature .form-grid.three, .admin-feature .form-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-feature .card-head { flex-wrap: wrap; }
  .feature-table, .feature-table tbody { display: block; }
  .feature-table thead { display: none; }
  .feature-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 8px; border-bottom: 1px solid var(--border); }
  .feature-table tbody td { display: block; padding: 0 !important; white-space: normal; overflow-wrap: anywhere; border: 0 !important; text-align: left; }
  .feature-table tbody td::before { content: attr(data-label); display: block; font-size: var(--t-2xs); color: var(--text-3); margin-bottom: 3px; }
}
@media (max-width: 560px) {
  .stat-grid, .endpoint-grid, .presets, .pull-steps, .mcard-facts { grid-template-columns: minmax(0, 1fr); }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 14px; flex-direction: row; gap: 8px; }
  .kpi .kpi-icon { display: none; }
  .kpi-value { font-size: var(--t-num); }
  .filter-row .select, .toolbar .select { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .filter-row .select select, .toolbar .select select { width: 100%; min-width: 0; max-width: none; }
  .filter-row > .segmented, .toolbar > .segmented { max-width: 100%; }
  .strip { grid-template-columns: minmax(0, 1fr); }
  .strip-item { border-right: 0 !important; border-bottom: 1px solid var(--border) !important; }
  .strip-item:last-child { border-bottom: 0 !important; }
  .page-title p { white-space: normal; }
  .search { max-width: none; flex-basis: 100%; }
  .setting-row { grid-template-columns: 96px minmax(0, 1fr) 30px; }
  .kv-row { grid-template-columns: 100px minmax(0, 1fr) auto; }
  .hero { padding: 18px 16px; }
  .hero-text h2 { font-size: var(--t-lg); }
  .hero-counts > div { padding: 0 14px; min-width: 0; flex: 1; }
  .hero-counts strong { font-size: var(--t-num); }
  .hero-mark { display: none; }
  /* 请求表在窄屏改为卡片：每条记录一张，两列字段 */
  .rq-table, .rq-table tbody { display: block; }
  .rq-table thead { display: none; }
  .rq-table tr.row-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; padding: 13px 14px; border-bottom: 1px solid var(--border); }
  .rq-table tr.row-main.live { background: color-mix(in srgb, var(--info-soft) 60%, transparent); }
  .rq-table tr.row-main.open { background: var(--surface-2); }
  .rq-table tr.row-main > td, .rq-table tr.row-main:hover > td { display: block; padding: 0 !important; border: 0; background: transparent !important; white-space: normal; min-width: 0; max-width: none; text-align: left; }
  .rq-table tr.row-main > td::before { content: attr(data-label); display: block; margin-bottom: 3px; font-size: var(--t-2xs); font-weight: 600; letter-spacing: .02em; color: var(--text-3); }
  .rq-table tr.row-main > td.c-time::before, .rq-table tr.row-main > td.c-status::before { display: none; }
  .rq-table tr.row-main > td.c-status { justify-self: end; align-self: start; }
  .rq-table tr.row-main > td.c-latency { grid-column: span 1; }
  .rq-table tr.row-main > td.c-tokens { grid-column: 1 / -1; }
  .rq-table .tok-lines { min-width: 0; }
  .rq-table .tok-line:first-child { flex-wrap: wrap; }
  .rq-table .tok-line > span { max-width: 100%; flex-wrap: wrap; white-space: normal; }
  .rq-table .tok-line small { overflow-wrap: anywhere; }
  .rq-table tr.row-main > td.is-empty { display: none; }
  .rq-table tr.detail-row, .rq-table tr.detail-row > td { display: block; }
  .rq-table tr.detail-row > td { border-bottom: 1px solid var(--border); }
  /* 账号表在窄屏改为卡片：每个账号一张，操作按钮独占一行 */
  .accounts-table, .accounts-table tbody { display: block; }
  .accounts-table thead { display: none; }
  .accounts-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .accounts-table tbody td, .accounts-table tbody tr:hover > td { display: block; padding: 0 !important; border: 0 !important; background: transparent !important; white-space: normal; text-align: left; }
  .accounts-table tbody td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: var(--t-2xs); font-weight: 600; color: var(--text-3); }
  .accounts-table tbody td:first-child::before { display: none; }
  .accounts-table tbody td:last-child { grid-column: 1 / -1; }
  .accounts-table tbody td:last-child::before { display: none; }
  .accounts-table tbody td.is-empty { display: none; }
  .help-body { position: fixed; left: 12px; right: 12px; top: 96px; width: auto; }
  .help.wide .help-body { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   新外观覆盖：下面的规则写在原组件规则之后，同等优先级时生效
   ===================================================================== */

/* ───────────── 基础 ───────────── */
html { background: var(--bg0); text-size-adjust: 100%; }
body { background: transparent; font-family: var(--font); font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: 0; }
a { color: var(--ink); }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.num { font-family: var(--font-d); }
:focus-visible { outline-color: var(--ink); box-shadow: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.small { font-size: var(--t-xs); }
.xsmall { font-size: var(--t-2xs); }
.skip-link { background: var(--btn); color: var(--on-btn); }
html.theming *, html.theming *::before, html.theming *::after { transition: background-color .35s, color .35s, border-color .35s, box-shadow .35s, fill .35s, stroke .35s !important; }

/* ───────────── 极光天空（只用 transform / opacity 动画） ───────────── */
.sky{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(120% 80% at 50% -12%,var(--bg1) 0%,var(--bg0) 62%)}
.sky i{position:absolute;display:block}
.blob{width:66vmax;height:66vmax;border-radius:50%;opacity:var(--au-op);will-change:transform}
.b1{left:-20vmax;top:-32vmax;background:radial-gradient(closest-side,var(--au1),color-mix(in srgb,var(--au1) 42%,transparent) 54%,transparent);animation:drift-a 48s ease-in-out infinite alternate}
.b2{right:-24vmax;top:-22vmax;background:radial-gradient(closest-side,var(--au2),color-mix(in srgb,var(--au2) 40%,transparent) 54%,transparent);animation:drift-b 56s ease-in-out infinite alternate}
.b3{left:16vw;bottom:-44vmax;background:radial-gradient(closest-side,var(--au3),color-mix(in srgb,var(--au3) 38%,transparent) 54%,transparent);animation:drift-c 42s ease-in-out infinite alternate}
.b4{right:-12vmax;bottom:-30vmax;width:50vmax;height:50vmax;background:radial-gradient(closest-side,var(--au4),color-mix(in srgb,var(--au4) 34%,transparent) 54%,transparent);animation:drift-d 62s ease-in-out infinite alternate}
.curtain{left:-25vw;width:150vw;top:-8vh;height:60vh;opacity:var(--curtain-op);transform-origin:50% 0;will-change:transform;
  background:linear-gradient(90deg,transparent 6%,color-mix(in srgb,var(--au3) 80%,transparent) 26%,color-mix(in srgb,var(--au1) 78%,transparent) 48%,color-mix(in srgb,var(--au2) 70%,transparent) 70%,transparent 94%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,black 30%,rgba(0,0,0,.45) 62%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,black 30%,rgba(0,0,0,.45) 62%,transparent 100%);
  animation:sway 32s ease-in-out infinite alternate}
.curtain.c2{top:6vh;height:48vh;opacity:calc(var(--curtain-op) * .7);animation:sway2 26s ease-in-out infinite alternate;
  background:linear-gradient(90deg,transparent 10%,color-mix(in srgb,var(--au4) 72%,transparent) 34%,color-mix(in srgb,var(--au3) 66%,transparent) 56%,transparent 84%)}
html[data-theme="dark"] .curtain::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 12px,rgba(255,255,255,.05) 12px 14px)}
.stars{inset:0;opacity:var(--star-op);background-repeat:repeat;background-size:300px 300px;
  background-image:radial-gradient(1.4px 1.4px at 24px 38px,rgba(255,255,255,.9),transparent),radial-gradient(1.1px 1.1px at 130px 86px,rgba(255,255,255,.7),transparent),radial-gradient(1.6px 1.6px at 220px 170px,rgba(255,255,255,.85),transparent),radial-gradient(1.1px 1.1px at 64px 214px,rgba(255,255,255,.6),transparent),radial-gradient(1.8px 1.8px at 176px 24px,rgba(255,255,255,.9),transparent),radial-gradient(1.1px 1.1px at 262px 250px,rgba(255,255,255,.65),transparent);
  -webkit-mask-image:linear-gradient(180deg,black 30%,transparent 90%);mask-image:linear-gradient(180deg,black 30%,transparent 90%)}
.stars.s2{background-size:460px 460px;background-position:80px 130px;opacity:calc(var(--star-op) * .7)}
html[data-palette="neutral"] .b3,html[data-palette="neutral"] .b4,html[data-palette="neutral"] .curtain,html[data-palette="neutral"] .stars{display:none}
html[data-palette="neutral"][data-theme="light"] .sky i{display:none}
@keyframes drift-a{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(9vw,7vh,0) scale(1.1)}100%{transform:translate3d(-4vw,13vh,0) scale(.96)}}
@keyframes drift-b{0%{transform:translate3d(0,0,0) scale(1.04)}100%{transform:translate3d(-11vw,9vh,0) scale(.93)}}
@keyframes drift-c{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(13vw,-9vh,0) scale(1.12)}}
@keyframes drift-d{0%{transform:translate3d(0,0,0) scale(.95)}100%{transform:translate3d(-15vw,-13vh,0) scale(1.08)}}
@keyframes sway{0%{transform:translate3d(-7vw,0,0) rotate(-8deg) scaleY(.92)}100%{transform:translate3d(7vw,3vh,0) rotate(-4deg) scaleY(1.12)}}
@keyframes sway2{0%{transform:translate3d(6vw,0,0) rotate(6deg) scaleY(1.08)}100%{transform:translate3d(-7vw,-2vh,0) rotate(2deg) scaleY(.9)}}

/* ───────────── 通透玻璃 + 1px 渐变描边（毛玻璃只放在最外层卡片上，不嵌套） ───────────── */
.glass,.card,.kpi,.stat,.mcard,details.more,.subnav-bar{position:relative;isolation:isolate;background:var(--card-bg);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:0;box-shadow:var(--shadow)}
.glass::before,.card::before,.kpi::before,.stat::before,details.more::before,.subnav-bar::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,var(--edge-a),var(--edge-b) 45%,var(--edge-c));
  -webkit-mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);mask-composite:exclude}
.glass::after,.card::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 70% at 0% 0%,var(--sheen),transparent 55%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass,.card,.kpi,.stat,.mcard,details.more{background:var(--pop-bg)}}
@media (prefers-reduced-transparency:reduce){.glass,.card,.kpi,.stat,.mcard,details.more{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--pop-bg)}}
.card{border-radius:var(--r-card);padding:var(--pad)}
.card.tight{padding:14px 18px}
.card.flush{padding:0;overflow:hidden}
.card:hover,.kpi:hover,.stat:hover,.mcard:hover{transform:none}
/* 卡片里的卡片 / 统计块：改成浅色小块，不再叠毛玻璃 */
:is(.card,details.more) :is(.card,.kpi,.stat,.mcard,details.more){background:var(--tile);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r-tile)}
:is(.card,details.more) :is(.card,.kpi,.stat,details.more)::before,:is(.card,details.more) .card::after{display:none}
.card.tone-bad{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--bad) 50%,transparent),var(--shadow)}
.card.tone-warn{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--warn) 55%,transparent),var(--shadow)}

/* 色调（徽章、提示、顶栏横幅共用） */
.tone-good{--tone:var(--good);--tone-ink:var(--good-i)}
.tone-info{--tone:var(--info);--tone-ink:var(--info-i)}
.tone-warn{--tone:var(--warn);--tone-ink:var(--warn-i)}
.tone-bad{--tone:var(--bad);--tone-ink:var(--bad-i)}
.tone-accent{--tone:var(--accent);--tone-ink:var(--ink)}
.tone-neutral{--tone:var(--neutral);--tone-ink:var(--neutral-ink)}
.hue-blue{--hc:var(--h1);--hc2:var(--h7)}
.hue-violet{--hc:var(--h2);--hc2:var(--h3)}
.hue-pink{--hc:var(--h3);--hc2:var(--h8)}
.hue-green{--hc:var(--h4);--hc2:var(--h7)}
.hue-teal{--hc:var(--h7);--hc2:var(--h1)}

/* ───────────── 卡片标题与标题图标（统一为实心渐变图标；色相按图形分配） ───────────── */
.card-head{margin-bottom:16px}
.card-head h2,.md-toolbar h2{font-size:var(--t-h);font-weight:650;letter-spacing:0;gap:10px}
.card-head p,.md-toolbar p{font-size:var(--t-hs);color:var(--text-3)}
.card-head h2 > .icon,.md-toolbar h2 > .icon,.faq h3 .icon,.empty-icon,.dialog-icon{
  --ia:#b29bfa;--ib:#7b55e6;width:32px;height:32px;padding:7px;border-radius:10px;color:#fff;stroke-width:2.1;
  background:linear-gradient(145deg,var(--ia),var(--ib));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 14px -6px color-mix(in srgb,var(--ib) 72%,transparent)}
html[data-theme="dark"] :is(.card-head h2 > .icon,.md-toolbar h2 > .icon,.faq h3 .icon,.empty-icon,.dialog-icon){box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 0 18px -4px color-mix(in srgb,var(--ia) 70%,transparent)}
.empty-icon,.dialog-icon{width:46px;height:46px;padding:0;border-radius:14px}
.empty-icon .icon,.dialog-icon .icon{color:#fff}
.dialog-icon.danger{--ia:#f78a99;--ib:#da4a66}
.dialog-icon.warn{--ia:#f8c55b;--ib:#e47f3a}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-key"]){--ia:#f9a068;--ib:#dc5441}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-zap"]){--ia:#f8c55b;--ib:#e47f3a}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-shield"]){--ia:#949df7;--ib:#5a59dc}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-lock"]){--ia:#949df7;--ib:#5a59dc}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-refresh"]){--ia:#50cfbf;--ib:#158479}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-repeat"]){--ia:#b29bfa;--ib:#7b55e6}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-alert"]){--ia:#f8c55b;--ib:#e47f3a}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-window"]){--ia:#56cee7;--ib:#2480b5}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-timer"]){--ia:#66c3f4;--ib:#3b7de2}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-table"]){--ia:#50cfbf;--ib:#158479}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-sparkles"]){--ia:#f48dbf;--ib:#d84a8b}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-server"]){--ia:#66c3f4;--ib:#3b7de2}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-rotate"]){--ia:#5ed2a5;--ib:#17936c}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-plug"]){--ia:#5ed2a5;--ib:#17936c}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-play"]){--ia:#f48dbf;--ib:#d84a8b}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-list"]){--ia:#f8c55b;--ib:#e47f3a}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-info"]){--ia:#66c3f4;--ib:#3b7de2}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-chip"]){--ia:#949df7;--ib:#5a59dc}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-bug"]){--ia:#f78a99;--ib:#da4a66}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-book"]){--ia:#56cee7;--ib:#2480b5}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-timer"]){--ia:#66c3f4;--ib:#3b7de2}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-queue"]){--ia:#f48dbf;--ib:#d84a8b}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-db"]){--ia:#50cfbf;--ib:#158479}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-dollar"]){--ia:#f8c55b;--ib:#e47f3a}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-users"]){--ia:#f48dbf;--ib:#d84a8b}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-download"]){--ia:#56cee7;--ib:#2480b5}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-terminal"]){--ia:#949df7;--ib:#5a59dc}
:is(.card-head h2,.md-toolbar h2,.faq h3) > .icon:has(use[href="#i-tag"]){--ia:#f9a068;--ib:#dc5441}

/* KPI / 统计块的图标：实心渐变，色相沿用原来的 tint-* */
.kpi-icon,.kpi .kpi-icon,.stat .kpi-icon{--ia:#50cfbf;--ib:#158479;width:40px;height:40px;border-radius:12px;color:#fff;
  background:linear-gradient(145deg,var(--ia),var(--ib));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 14px -6px color-mix(in srgb,var(--ib) 72%,transparent)}
html[data-theme="dark"] .kpi-icon{box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 0 18px -4px color-mix(in srgb,var(--ia) 70%,transparent)}
.kpi-icon .icon{stroke-width:2.1}
.kpi-icon.tint-teal{--ia:#50cfbf;--ib:#158479}
.kpi-icon.tint-sky{--ia:#66c3f4;--ib:#3b7de2}
.kpi-icon.tint-violet{--ia:#b29bfa;--ib:#7b55e6}
.kpi-icon.tint-amber{--ia:#f8c55b;--ib:#e47f3a}
.kpi-icon.tint-rose{--ia:#f78a99;--ib:#da4a66}
.kpi-icon.tint-emerald{--ia:#5ed2a5;--ib:#17936c}
.kpi-icon.tint-indigo{--ia:#949df7;--ib:#5a59dc}
.kpi-icon.tint-slate{--ia:#a3adbf;--ib:#5d6779}
.kpi,.stat{border-radius:var(--r-card);padding:18px 20px}
.kpi-label{font-size:var(--t-xs)}
.kpi-value{font-size:var(--t-num);font-family:var(--font-d)}
.kpi-sub,.stat-lines{font-size:var(--t-xs)}
.stat-grid.prominent .stat{background:var(--tile);border:0;box-shadow:inset 0 0 0 1px var(--line)}
.stat-grid.prominent .stat .kpi-label{font-size:var(--t-sm)}
.stat-grid.prominent .stat .kpi-value{font-size:calc(var(--t-num) * 1.1)}

/* ───────────── 按钮 ───────────── */
.btn{height:calc(var(--t-sm) * 2.6);padding:0 1em;gap:7px;border:0;border-radius:var(--r-ctl);font:600 var(--t-sm)/1 var(--font);color:var(--text);
  background:var(--tile-hi);box-shadow:inset 0 0 0 1px var(--line-2);transition:background-color .2s,color .2s,box-shadow .2s,transform .15s var(--ease)}
.btn:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 9%,var(--tile-hi));box-shadow:inset 0 0 0 1px var(--line-2);transform:none}
html[data-theme="dark"] .btn:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--line-2)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn .icon{color:currentColor;opacity:.78}
.btn:hover:not(:disabled) .icon{color:currentColor;opacity:1}
.btn.primary{color:var(--on-btn);background:var(--btn);border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 18px -10px color-mix(in srgb,var(--btn) 85%,transparent)}
.btn.primary:hover:not(:disabled){background:color-mix(in srgb,var(--btn) 88%,var(--text));border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 18px -10px color-mix(in srgb,var(--btn) 85%,transparent)}
html[data-theme="dark"] .btn.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 22px -8px var(--glow)}
.btn.primary .icon{opacity:1}
.btn.ghost{background:transparent;box-shadow:none;color:var(--ink)}
.btn.ghost:hover:not(:disabled){background:var(--sel);box-shadow:none;color:var(--ink)}
.btn.danger{color:var(--bad-i);background:color-mix(in srgb,var(--bad) 11%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 32%,transparent)}
.btn.danger .icon,.btn.danger:hover:not(:disabled) .icon{color:currentColor}
.btn.danger:hover:not(:disabled){background:color-mix(in srgb,var(--bad) 18%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 40%,transparent)}
.btn.danger.ghost{background:transparent;box-shadow:none}
.btn.danger.solid{color:#fff;background:linear-gradient(145deg,#f78a99,#da4a66);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 18px -10px rgba(218,74,102,.8)}
.btn.small{height:calc(var(--t-xs) * 2.45);padding:0 .85em;font-size:var(--t-xs);border-radius:10px;gap:5px}
.btn.xs{height:calc(var(--t-2xs) * 2.15);padding:0 .7em;font-size:var(--t-2xs);border-radius:8px;gap:4px}
.btn.icon-only{width:calc(var(--t-sm) * 2.6);padding:0}
.btn.small.icon-only{width:calc(var(--t-xs) * 2.45)}
.btn.xs.icon-only{width:calc(var(--t-2xs) * 2.15)}
.btn.active{background:var(--sel);box-shadow:inset 0 0 0 1px var(--sel-line);color:var(--ink)}
.btn.active .icon{color:var(--ink)}
.link-btn{font:600 var(--t-sm) var(--font);color:var(--ink)}
.copy-btn{width:30px;height:30px;border-radius:9px}
.copy-btn:hover{background:var(--hover)}
.copy-btn.done{color:var(--good-i);background:color-mix(in srgb,var(--good) 15%,transparent)}
.icon-btn{width:38px;height:38px;flex:none;display:inline-grid;place-items:center;border:0;border-radius:var(--r-ctl);color:var(--text-2);background:var(--tile-hi);box-shadow:inset 0 0 0 1px var(--line-2);transition:background-color .2s,color .2s}
.icon-btn:hover{color:var(--text);background:color-mix(in srgb,var(--accent) 10%,var(--tile-hi))}
.icon-btn svg.i{width:18px;height:18px}

/* ───────────── 输入框、下拉、开关、分段控件 ───────────── */
input:not([type]), input[type="text"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], input[type="date"], input[type="email"], select, textarea{
  height:calc(var(--t-sm) * 2.8);padding:0 .95em;border-radius:var(--r-ctl);border:1px solid var(--line-2);background:var(--field);color:var(--text);font:var(--t-sm) var(--font);box-shadow:none}
html[data-theme="dark"] :is(input:not([type]), input[type="text"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], input[type="date"], input[type="email"], select, textarea){box-shadow:none}
textarea{height:auto;padding:.7em .95em;line-height:1.65}
input:focus, select:focus, textarea:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 70%,var(--line-2));box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent);background:var(--field)}
input.invalid, select.invalid{border-color:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 20%,transparent)}
select option{background:var(--solid);color:var(--text)}
select{padding-right:2.4em}
.select::after{right:14px;border-color:var(--text-3)}
.select.compact select,.search input,.toolbar .select select,.filter-row .select select,.pager .size .select select{height:calc(var(--t-xs) * 2.55);font-size:var(--t-xs);border-radius:10px}
.search .icon{left:12px}
.search input{padding-left:2.5em}
.field > .label{font-size:var(--t-xs);font-weight:600;color:var(--text-2)}
.field > .label small,.field .range{font-size:var(--t-2xs)}
.field .hint{font-size:var(--t-xs)}
.input-unit .unit{font-size:var(--t-xs)}
/* 带图标、单位或眼睛按钮的输入框：留出图标的位置（上面的通用规则会盖掉旧样式里的内边距） */
.input-unit input{padding-right:48px}
.pw-field input{padding-right:40px}
.login-field input{padding:0 44px 0 40px}
input[type="checkbox"]:not(.switch),input[type="radio"]{accent-color:var(--btn)}
.switch{width:44px;height:26px;background:var(--track-2);box-shadow:none}
.switch::after{top:3px;left:3px;width:20px;height:20px;background:white;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.switch:checked{background:var(--btn)}
.switch:checked::after{transform:translateX(18px);background:var(--on-btn)}
.switch:checked:active:not(:disabled)::after{transform:translateX(16px)}
html[data-theme="dark"] .switch:checked{box-shadow:0 0 14px -4px var(--glow)}
.toggle-card .switch{width:44px;height:26px}
.toggle-card .switch::after{width:20px;height:20px}
.toggle-card .switch:checked::after{transform:translateX(18px)}
.check-inline{font-size:var(--t-xs)}
.segmented{padding:3px;gap:2px;border-radius:13px;background:var(--tile);border:0;box-shadow:inset 0 0 0 1px var(--line)}
html[data-theme="dark"] .segmented{box-shadow:inset 0 0 0 1px var(--line)}
.segmented button{height:calc(var(--t-xs) * 2.35);padding:0 1em;border-radius:10px;font:600 var(--t-xs) var(--font);color:var(--text-2)}
.segmented button.active,html[data-theme="dark"] .segmented button.active{background:var(--raise);color:var(--text);box-shadow:var(--raise-shadow)}
.segmented.has-thumb::before,html[data-theme="dark"] .segmented.has-thumb::before{border-radius:10px;background:var(--raise);box-shadow:var(--raise-shadow)}
.segmented.has-thumb button.active{background:transparent;box-shadow:none}
.segmented button .count{font-size:var(--t-2xs)}
.segmented button.active .count{color:var(--ink)}
.segmented.icons button{width:34px}
.segmented.big button{height:calc(var(--t-sm) * 2.4);font-size:var(--t-sm)}
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:13px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--line)}
.seg button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:calc(var(--t-xs) * 2.45);padding:0 1.08em;border:0;border-radius:10px;background:transparent;color:var(--text-2);font-size:var(--t-xs);font-weight:600;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.seg button svg.i{width:1.15em;height:1.15em}
.seg button:hover{color:var(--text)}
.seg button[aria-checked="true"]{color:var(--text);background:var(--raise);box-shadow:var(--raise-shadow)}

/* 页签 */
.tabs-line{border-bottom:1px solid var(--line);gap:4px}
.tabs-line button{height:calc(var(--t-sm) * 2.9);padding:0 .9em;font:600 var(--t-sm) var(--font);color:var(--text-3)}
.tabs-line button.active::after{left:12px;right:12px;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 10px var(--glow)}
.tabs-line button .count,.page-tabs button .count{font-size:var(--t-2xs);background:var(--surface-3)}
.tabs-line button.active .count,.page-tabs button.active .count{background:var(--sel);color:var(--ink)}
.subnav-bar{border-radius:18px;padding:8px 10px}
.page-tabs button,.tabs-line.page-tabs button{height:calc(var(--t-sm) * 2.6);padding:0 1em;border-radius:12px;border:0;font-size:var(--t-sm);font-weight:600;color:var(--text-2)}
.page-tabs button.active,.tabs-line.page-tabs button.active{background:var(--sel);color:var(--text);box-shadow:inset 0 0 0 1px var(--sel-line)}
.page-tabs button.active .icon,.tabs-line.page-tabs button.active .icon{color:var(--ink)}
.client-tabs button{height:calc(var(--t-sm) * 2.6);padding:0 1em;border-radius:12px;border:0;background:var(--tile-hi);box-shadow:inset 0 0 0 1px var(--line-2);font:600 var(--t-sm) var(--font)}
.client-tabs button.active{background:var(--sel);color:var(--text);box-shadow:inset 0 0 0 1px var(--sel-line)}
.client-tabs button.active .icon{color:var(--ink)}

/* ───────────── 徽章、圆点、胶囊、提示 ───────────── */
.badge{--tone:var(--neutral);--tone-ink:var(--neutral-ink);height:calc(var(--t-xs) * 1.85);padding:0 .72em;gap:5px;border-radius:999px;font-size:var(--t-xs);font-weight:600;
  color:var(--tone-ink);background:color-mix(in srgb,var(--tone) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 28%,transparent)}
html[data-theme="dark"] .badge{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 30%,transparent)}
.badge.xs{height:calc(var(--t-2xs) * 1.75);padding:0 .6em;font-size:var(--t-2xs);border-radius:999px}
.badge.good{--tone:var(--good);--tone-ink:var(--good-i)}
.badge.warn{--tone:var(--warn);--tone-ink:var(--warn-i)}
.badge.slow{--tone:var(--slow-f);--tone-ink:var(--slow)}
.badge.bad{--tone:var(--bad);--tone-ink:var(--bad-i)}
.badge.info{--tone:var(--info);--tone-ink:var(--info-i)}
.badge.accent{--tone:var(--accent);--tone-ink:var(--ink)}
.badge.violet{--tone:var(--h2);--tone-ink:var(--c-violet)}
.badge.neutral{--tone:var(--neutral);--tone-ink:var(--neutral-ink)}
.badge.good,.badge.warn,.badge.slow,.badge.bad,.badge.info,.badge.accent,.badge.violet,.badge.neutral{color:var(--tone-ink);background:color-mix(in srgb,var(--tone) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 28%,transparent)}
.badge.outline{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text-2)}
html[data-theme="dark"] .dot.good,html[data-theme="dark"] .dot.bad,html[data-theme="dark"] .dot.info{box-shadow:0 0 8px currentColor}
.chip{height:calc(var(--t-xs) * 2.1);padding:0 .8em;gap:6px;border:0;border-radius:999px;font-size:var(--t-xs);font-weight:600;color:var(--text-2);background:var(--tile);box-shadow:inset 0 0 0 1px var(--line)}
.chip svg.i,.chip .icon{width:1.1em;height:1.1em}
.chip.tone{color:var(--tone-ink);background:color-mix(in srgb,var(--tone) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 30%,transparent)}
button.chip.active{background:var(--sel);color:var(--ink);box-shadow:inset 0 0 0 1px var(--sel-line)}
.callout{--tone:var(--neutral);--tone-ink:var(--text-2);gap:12px;padding:12px 16px 12px 14px;border:0;border-radius:14px;font-size:var(--t-sm);line-height:1.65;color:var(--text-2);
  background:color-mix(in srgb,var(--tone) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 26%,transparent)}
.callout.info{--tone:var(--info);--tone-ink:var(--info-i)}
.callout.warn{--tone:var(--warn);--tone-ink:var(--warn-i)}
.callout.bad{--tone:var(--bad);--tone-ink:var(--bad-i)}
.callout.good{--tone:var(--good);--tone-ink:var(--good-i)}
.callout.info,.callout.warn,.callout.bad{color:var(--text-2);background:color-mix(in srgb,var(--tone) 10%,transparent);border:0}
.callout > .icon,.callout.info > .icon,.callout.warn > .icon,.callout.bad > .icon{width:1.3em;height:1.3em;color:var(--tone-ink)}
.callout strong{color:var(--tone-ink)}
.callout.compact{padding:9px 13px;font-size:var(--t-xs)}
.doc-link{align-items:center}
.doc-link a{margin:0 .2em;font-weight:650}
.load-note{border:0;border-radius:12px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--line);font-size:var(--t-xs)}
.load-note.error{background:color-mix(in srgb,var(--bad) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 30%,transparent)}
.kv-row{border-bottom-color:var(--line)}
.kv-row .k{font-size:var(--t-xs)}
.kv-row .v{font-size:var(--t-sm)}
.kv-row .v small{font-size:var(--t-2xs)}
.footnote{font-size:var(--t-xs);line-height:1.7}
.empty{font-size:var(--t-sm)}
.empty h3{font-size:var(--t-md)}
.code{border:0;border-radius:14px;background:var(--code-soft);box-shadow:inset 0 0 0 1px var(--line)}
.code-head{background:transparent;border-bottom-color:var(--line)}
.inline-code{border:0;background:var(--surface-3)}

/* 折叠区 */
details.more{border-radius:var(--r-card)}
details.more > summary{padding:16px 22px;font-size:var(--t-md);font-weight:650}
details.more > summary:hover{color:var(--ink)}
details.more[open] > summary::before{border-color:var(--ink)}
details.more > .more-body{padding:0 22px 22px}

/* 浮层：提示气泡、轻提示、对话框、下拉面板 */
.float-tip,.chart-tip,.help-body,.pop-panel,.account-popover,.toast,.save-bar{border:0;background:var(--pop-bg);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--shadow-lg)}
html[data-palette="neutral"] :is(.float-tip,.chart-tip,.help-body,.pop-panel,.account-popover,.toast,.save-bar){background:var(--solid)}
.float-tip,.chart-tip{font-size:var(--t-xs)}
.help-body{font-size:var(--t-sm);border-radius:14px}
.help > summary{width:21px;height:21px;font-size:var(--t-2xs)}
.toast{font-size:var(--t-sm);border-radius:14px}
.toast .icon{color:var(--good-i)}
.toast.error .icon{color:var(--bad-i)}
.toast.info .icon{color:var(--ink)}
dialog{border:0;border-radius:22px;background:var(--solid);color:var(--text);box-shadow:var(--shadow-lg)}
dialog::backdrop{background:rgba(0,0,0,.42)}
.dialog-top h2{font-size:var(--t-h)}
.dialog-top p{font-size:var(--t-sm)}
.pop-item{font:500 var(--t-sm) var(--font)}
.pop-panel h5{font-size:var(--t-2xs)}

/* 表格 */
.table-wrap{border:0;border-radius:var(--r-tile);background:var(--tile);box-shadow:inset 0 0 0 1px var(--line)}
html[data-theme="dark"] .table-wrap{box-shadow:inset 0 0 0 1px var(--line)}
table.data{font-size:var(--t-sm)}
table.data th{font-size:var(--t-xs);font-weight:650;letter-spacing:.02em;color:var(--text-3);background:var(--th-bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:var(--line);padding:10px 12px}
table.data td{border-bottom-color:var(--line);padding:10px 12px}
table.data .sub{font-size:var(--t-2xs)}
table.data th button.sort.on{color:var(--ink)}
.rq-table th, .rq-table td{padding-left:8px;padding-right:8px}
.accounts-table th, .accounts-table td{padding-left:6px;padding-right:6px}
.pager{font-size:var(--t-xs)}
.pager .pages button{min-width:calc(var(--t-sm) * 2.3);height:calc(var(--t-sm) * 2.3);border-radius:9px;font:600 var(--t-sm) var(--font-d)}
.pager .pages button.on{color:var(--on-btn);background:var(--btn);border-color:transparent}

/* 图表 */
.legend{font-size:var(--t-xs)}
.chart .axis{font-size:12px}
.histo .bar{background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent2) 80%,transparent))}

/* 各页里的小块：统一成浅色小块 + 发丝线 */
.phase-tile,.lane-tile,.strip,.mcard-facts,.spec,.pull-stat,.pull-steps li,.new-model,.endpoint,.preset,.toggle-card,.setting-table,.run-status,.play-advanced,.mf-advanced,.import-precheck,.md-hidden-item,.access-context,.play-pane,.metrics,.play .metrics{border:0;background:var(--tile);box-shadow:inset 0 0 0 1px var(--line)}
.phase-tile,.lane-tile,.spec,.pull-stat,.endpoint,.preset,.toggle-card{border-radius:14px}
.phase-tile b{font-size:var(--t-lg);font-family:var(--font-d)}
.phase-tile.unknown b{font-size:var(--t-md)}
.strip-icon{border-radius:10px}
.endpoint .v{font-size:var(--t-sm)}
.preset.active{background:var(--sel);box-shadow:inset 0 0 0 1px var(--sel-line)}
.preset strong .icon{color:var(--ink)}
.toggle-card:has(input:checked){background:color-mix(in srgb,var(--good) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--good) 40%,transparent)}
.run-status.running{background:color-mix(in srgb,var(--info) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--info) 30%,transparent)}
.run-status.done{background:color-mix(in srgb,var(--good) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--good) 30%,transparent)}
.run-status.failed{background:color-mix(in srgb,var(--bad) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 30%,transparent)}
.run-status.warn{background:color-mix(in srgb,var(--warn) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 34%,transparent)}
.mcard{border-radius:var(--r-card);padding:18px 20px}
.mcard-name{font-size:var(--t-md)}
.mcard.default{box-shadow:inset 0 0 0 1.5px var(--sel-line),var(--shadow)}
.md-group-head h3{font-size:var(--t-md)}
.access-hero{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%),var(--card-bg)}
.access-hero h2{font-size:var(--t-h2)}
.access-hero .lead{font-size:var(--t-sm)}
.eyebrow{font-size:var(--t-2xs);color:var(--ink)}
.faq article{border:0;border-radius:var(--r-tile);background:var(--tile);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px var(--line);padding:16px 18px}
.faq h3{font-size:var(--t-md);gap:12px}
.faq h3 .icon{width:30px;height:30px;padding:6.5px}
.faq article:nth-child(3n+1) h3 .icon{--ia:#66c3f4;--ib:#3b7de2}
.faq article:nth-child(3n+2) h3 .icon{--ia:#b29bfa;--ib:#7b55e6}
.faq article:nth-child(3n) h3 .icon{--ia:#f48dbf;--ib:#d84a8b}
.faq p{font-size:var(--t-sm)}
.save-bar{border-radius:18px}
.job-link{border:0;background:var(--sel);color:var(--ink);box-shadow:inset 0 0 0 1px var(--sel-line);font-size:var(--t-xs)}

/* =====================================================================
   外框：悬浮玻璃侧栏 + 顶栏（顶栏高度固定，首屏高度据此精确计算）
   ===================================================================== */
.app{position:relative;z-index:1;display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:16px;z-index:30;align-self:start;height:calc(100vh - 32px);height:calc(100dvh - 32px);margin:16px 0 16px 16px;padding:18px 14px 14px;border-radius:26px;display:flex;flex-direction:column;gap:8px;overflow:hidden auto;scrollbar-width:none}
.sidebar::-webkit-scrollbar{display:none}
.brand{display:flex;align-items:center;gap:12px;padding:2px 8px 16px;margin-bottom:4px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
.brand:hover{text-decoration:none}
.logo{width:40px;height:40px;flex:none;filter:drop-shadow(0 6px 12px var(--glow))}
.lg1{stop-color:var(--accent2)}.lg2{stop-color:var(--accent)}.lg3{stop-color:var(--btn)}
.ls1{stop-color:white;stop-opacity:.5}.ls2{stop-color:white;stop-opacity:0}
.logo-mark{fill:none;stroke:var(--on-btn);stroke-width:3.4;stroke-linecap:round}
.logo-star{fill:var(--on-btn)}
.brand-t b{display:block;font-size:15.5px;font-weight:700;letter-spacing:.01em;line-height:1.3}
.brand-t small{display:block;font-size:var(--t-2xs);color:var(--text-3);line-height:1.35}
.nav-cap{padding:6px 10px 2px;font-size:var(--t-2xs);font-weight:600;letter-spacing:.14em;color:var(--text-3)}
.nav{display:flex;flex-direction:column;gap:2px;overflow:visible;min-height:0}
.nav a{position:relative;display:flex;align-items:center;gap:12px;height:clamp(40px,calc(5.4 * var(--vu)),54px);padding:0 10px 0 7px;border-radius:14px;color:var(--text-2);text-decoration:none;font-weight:600;font-size:clamp(14px,calc(1.55 * var(--vu)),16.5px);transition:background-color .2s,color .2s}
.nav a .ico{--s:clamp(28px,calc(3.6 * var(--vu)),36px);transition:transform .25s var(--ease)}
.nav a:hover{background:var(--hover);color:var(--text);text-decoration:none}
.nav a:hover .ico{transform:translateY(-1px)}
.nav a.active{color:var(--text);background:var(--sel);box-shadow:inset 0 0 0 1px var(--sel-line);font-weight:650}
html[data-theme="dark"] .nav a.active{background:var(--sel);box-shadow:inset 0 0 0 1px var(--sel-line)}
.nav a.active::before{content:"";position:absolute;left:-9px;top:30%;bottom:30%;width:3px;border-radius:3px;background:linear-gradient(var(--accent),var(--accent2));box-shadow:0 0 10px var(--glow)}
.nav-count{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 8px;border-radius:999px;font-size:var(--t-2xs);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--info-i);background:color-mix(in srgb,var(--info) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--info) 30%,transparent)}
.nav-count .dot{width:6px;height:6px}
.nav-dot{margin-left:auto;margin-right:6px;width:8px;height:8px;flex:none;border-radius:50%;background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 22%,transparent)}
.side-foot{margin-top:auto;display:grid;gap:4px;padding-top:12px;border-top:1px solid var(--line)}
.side-meta{display:grid;gap:8px;margin:0;padding:4px 10px 6px}
.side-meta div{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--t-xs)}
.side-meta dt{color:var(--text-3)}
.side-meta dd{display:inline-flex;align-items:center;gap:6px;margin:0;color:var(--text);font-weight:600}
.side-glyph{--s:20px}
.side-logout{justify-content:flex-start;width:100%;height:38px;padding:0 10px;color:var(--text-2);font-size:var(--t-sm)}
.side-logout:hover:not(:disabled){color:var(--bad-i);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.scrim{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.42)}

.main{min-width:0;width:100%;max-width:max(1400px,calc(172 * var(--vu)));margin:0 auto;padding:var(--mt) 32px 96px;display:block}
.content{max-width:none;margin:0;padding:0;display:block}
.content:focus{outline:none}
.page{gap:var(--gap)}
.show-narrow{display:none !important}
.topbar{position:relative;z-index:30;display:flex;align-items:center;gap:12px;height:var(--tb-h);min-height:0;margin:0 0 var(--tb-gap);padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.menu-btn{display:none}
.tb-title{flex:0 1 auto;min-width:0}
.tb-title h1{font-size:clamp(22px,calc(2.6 * var(--vu)),30px);font-weight:700;line-height:1.25;letter-spacing:-.01em}
.tb-title h1:focus{outline:none}
.tb-title p{margin-top:1px;font-size:clamp(13px,calc(1.45 * var(--vu)),16px);line-height:1.45;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.tb-btn{height:var(--tb-ctl-h);font-size:var(--tb-ctl-f);border-radius:999px;padding:0 14px 0 12px}
.tb-btn.icon-only{width:var(--tb-ctl-h);padding:0}
.gw-pill{display:inline-flex;align-items:center;gap:8px;height:var(--tb-ctl-h);padding:0 14px 0 13px;border-radius:999px;font-size:var(--tb-ctl-f);font-weight:650;white-space:nowrap;color:var(--tone-ink);background:color-mix(in srgb,var(--tone) 13%,var(--tile-hi));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 36%,transparent);transition:background-color .3s,color .3s}
.gw-pill .sub{color:var(--text-3);font-weight:500}
.gw-pill[data-status="ok"]{--tone:var(--good);--tone-ink:var(--good-i)}
.gw-pill[data-status="busy"]{--tone:var(--warn);--tone-ink:var(--warn-i)}
.gw-pill[data-status="full"]{--tone:var(--bad);--tone-ink:var(--bad-i)}
.gw-pill[data-status="down"]{--tone:var(--neutral);--tone-ink:var(--neutral-ink)}
.gw-pill[data-status="off"]{--tone:var(--bad);--tone-ink:var(--bad-i)}
.gw-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--tone);box-shadow:0 0 8px color-mix(in srgb,var(--tone) 70%,transparent)}
.gw-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--tone);opacity:0;animation:ping 2.4s ease-out infinite}
.gw-pill[data-status="full"] .gw-dot::after{animation-duration:1.2s}
.gw-pill:is([data-status="down"],[data-status="off"]) .gw-dot{background:transparent;box-shadow:inset 0 0 0 2px var(--tone)}
.gw-pill:is([data-status="down"],[data-status="off"]) .gw-dot::after{display:none}
@keyframes ping{0%{transform:scale(.6);opacity:.8}80%,100%{transform:scale(1.6);opacity:0}}

/* 主题选择器：7 个配色（中性 2 + 彩色 5）+ 明暗模式 */
.theme{position:relative}
.theme-btn{display:inline-flex;align-items:center;gap:8px;height:var(--tb-ctl-h);padding:0 10px 0 6px;border:0;border-radius:999px;background:var(--tile-hi);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2);font-size:var(--tb-ctl-f);font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .2s}
.theme-btn:hover{background:color-mix(in srgb,var(--accent) 8%,var(--tile-hi))}
.theme-btn > svg.i{width:15px;height:15px;color:var(--text-3);transition:transform .2s var(--ease)}
.theme-btn[aria-expanded="true"] > svg.i{transform:rotate(180deg)}
.sw{width:26px;height:26px;flex:none;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.5),rgba(255,255,255,0) 46%),linear-gradient(135deg,var(--sw-a),var(--sw-b));box-shadow:inset 0 0 0 1px var(--line-2)}
.theme-pop{position:absolute;right:0;top:calc(100% + 10px);z-index:40;width:max(344px,calc(var(--t-sm) * 25.5));padding:16px;border-radius:20px;background:var(--pop-bg)}
html[data-palette="neutral"] .theme-pop{background:var(--solid)}
.theme-pop:not([hidden]){animation:pop .2s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.tp-head{display:flex;align-items:center;gap:10px;padding:0 2px 14px;border-bottom:1px solid var(--line)}
.tp-head b{display:block;font-size:var(--t-md);font-weight:650;line-height:1.3}
.tp-head span{display:block;font-size:var(--t-xs);color:var(--text-3)}
.tp-cap{margin:14px 2px 8px;font-size:var(--t-2xs);font-weight:600;letter-spacing:.12em;color:var(--text-3)}
.pal-neutral{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pal-colors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.pal{position:relative;display:grid;justify-items:center;gap:6px;padding:8px 2px 7px;border:0;border-radius:12px;background:transparent;color:var(--text-2);font-size:var(--t-xs);font-weight:600;cursor:pointer;transition:background-color .2s,color .2s}
.pal:hover{background:var(--hover);color:var(--text)}
.pal .sw{width:30px;height:30px;transition:transform .2s var(--ease)}
.pal:hover .sw{transform:scale(1.06)}
.pal[aria-checked="true"]{color:var(--text);background:var(--sel);box-shadow:inset 0 0 0 1px var(--sel-line)}
.pal[aria-checked="true"] .sw{box-shadow:inset 0 0 0 1px var(--line-2),0 0 0 2px var(--bg0),0 0 0 3.5px var(--ink)}
.pal-wide{grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:center;gap:10px;padding:8px 10px;text-align:left;box-shadow:inset 0 0 0 1px var(--line)}
.pal-prev{display:grid;align-content:center;gap:3px;width:44px;height:30px;padding:0 7px;border-radius:8px;background:var(--sw-a);box-shadow:inset 0 0 0 1px var(--line-2)}
.pal-prev i{display:block;height:3px;border-radius:2px;background:var(--sw-b)}
.pal-prev i + i{width:62%}
.pal-wide[aria-checked="true"] .pal-prev{box-shadow:inset 0 0 0 1px var(--line-2),0 0 0 2px var(--bg0),0 0 0 3.5px var(--ink)}
.pal-name b{display:block;font-size:var(--t-sm);font-weight:650;color:var(--text);line-height:1.3}
.pal-name small{display:block;font-size:var(--t-2xs);font-weight:500;color:var(--text-3);line-height:1.3}
.mode-seg{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
.mode-seg button{padding:0 8px;white-space:nowrap}
.mode-hint{margin:10px 2px 0;font-size:var(--t-xs);line-height:1.55;color:var(--text-3)}

/* 横幅：放进顶栏中间的预留位，不改变首屏高度；同时最多显示两条（按页面里的先后），完整说明悬停可见 */
.tb-slot{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px}
.tb-slot:not(:has(> :not([hidden]))){display:none}
.tb-slot > :not([hidden]) ~ :not([hidden]) ~ :not([hidden]){display:none}
.tb-alert{flex:1 1 0;min-width:0;max-width:640px;display:flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 7px;border-radius:14px;
  background:color-mix(in srgb,var(--tone) 13%,var(--tile-hi));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 42%,transparent),0 12px 26px -20px color-mix(in srgb,var(--tone) 80%,transparent)}
.tb-alert-t{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;white-space:nowrap;overflow:hidden}
.tb-alert strong{flex:none;font-size:clamp(14px,calc(1.6 * var(--vu)),17px);font-weight:650;color:var(--tone-ink)}
.tb-alert-t > span{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:clamp(12.5px,calc(1.45 * var(--vu)),16px);color:var(--text-2)}
.tb-alert .btn{flex:none}
@media (min-width:761px){.topbar:has(.tb-alert:not([hidden])) .tb-title p{display:none}}
.toasts{top:18px;bottom:auto;right:18px}

/* =====================================================================
   总览 · 首屏
   高度 = 视口高度 − 顶部留白 − 顶栏；两行：并发主卡 + 累计成绩（1fr），服务器四项（auto）；底部留出“向下查看更多”。
   ===================================================================== */
#page-overview{container-type:inline-size}
.fold{position:relative;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-rows:minmax(0,1fr) auto;gap:var(--fg);
  height:min(var(--fold-h),68cqi);min-height:500px;padding-bottom:var(--hint-h)}
.fold .card{padding:var(--fpad) calc(var(--fpad) + 4px)}
.card-h{display:flex;align-items:center;gap:12px;margin-bottom:20px;min-width:0}
.card-t{min-width:0}
.card-h h2{font-size:var(--t-h);font-weight:650;line-height:1.35}
.card-h p{font-size:var(--t-hs);line-height:1.45;color:var(--text-3)}
.card-h > .chip,.card-h > .srv-tags{margin-left:auto}
.fold .card-h{margin-bottom:var(--fh-gap)}
.fold .card-h .ico{--s:clamp(30px,calc(4.4 * var(--vu)),44px)}
.fold .card-h h2{font-size:clamp(15.5px,calc(1.95 * var(--vu)),22px)}
.fold .card-h p{font-size:clamp(12.5px,calc(1.45 * var(--vu)),16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fold .chip{height:clamp(26px,calc(3.2 * var(--vu)),34px);padding:0 clamp(10px,calc(1.3 * var(--vu)),14px);font-size:clamp(12px,calc(1.35 * var(--vu)),15px)}
.fold-hero{grid-column:1;grid-row:1;min-height:0}
.life{grid-column:2;grid-row:1;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:var(--fg);min-height:0}
.server{grid-column:1/-1;grid-row:2}

/* 并发主卡：圆环直径 = min(主体高度, 主体宽度的 48%)，中间的大数字按直径等比缩放 */
.fold-hero{display:flex;flex-direction:column;--r1:var(--accent2);--r2:var(--accent);--limit:color-mix(in srgb,var(--warn) 58%,var(--track));--halo-op:.5}
html[data-theme="dark"] .fold-hero{--halo-op:.75}
html[data-palette="neutral"][data-theme="light"] .fold-hero{--halo-op:0}
html[data-palette="neutral"][data-theme="dark"] .fold-hero{--halo-op:.3}
.fold-hero[data-lvl="warn"]{--r1:var(--warn);--r2:color-mix(in srgb,var(--warn) 65%,var(--bad))}
.fold-hero[data-lvl="bad"]{--r1:color-mix(in srgb,var(--bad) 70%,var(--warn));--r2:var(--bad)}
.fold-hero[data-lvl="off"]{--r1:var(--neutral);--r2:var(--neutral)}
.rs1{stop-color:var(--r1)}.rs2{stop-color:var(--r2)}
.hero-body{flex:1 1 0;min-height:0;container-type:size}
.hero-grid{--d:min(100cqh,48cqw);height:100%;display:grid;grid-template-columns:var(--d) minmax(0,1fr);align-items:center;gap:clamp(14px,4cqw,44px)}
.ring-wrap{position:relative;width:var(--d);aspect-ratio:1}
.ring-wrap::before{content:"";position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--r2) 42%,transparent),transparent 70%);opacity:var(--halo-op)}
.ring{position:relative;display:block;width:100%;height:100%;overflow:visible}
.ring-ticks{fill:none;stroke:var(--line-2);stroke-width:3.5;stroke-dasharray:1.2 8.748}
.ring-track{fill:none;stroke:var(--track);stroke-width:14}
.ring-inner{fill:none;stroke:var(--line);stroke-width:1}
.ring-arc{fill:none;stroke-width:14;stroke-linecap:round;stroke-dasharray:var(--a,0px) 1000px;stroke-dashoffset:var(--o,0px);transition:stroke-dasharray .4s var(--ease),stroke-dashoffset .4s var(--ease),opacity .3s}
.ring-run{stroke:url(#ring-grad)}
.ring-glow{stroke:url(#ring-grad);stroke-width:16;opacity:var(--ring-glow-op)}
.ring-limit{stroke:var(--limit);stroke-linecap:butt}
.ring-arc.is-zero{opacity:0}
.ring-center{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:calc(var(--d) * .018)}
.ring-label{font-size:max(12px,calc(var(--d) * .052));font-weight:600;letter-spacing:.08em;color:var(--text-2)}
.ring-num{font-size:calc(var(--d) * .27);font-weight:700;line-height:1;letter-spacing:-.035em;color:var(--text)}
html[data-theme="dark"] .ring-num{text-shadow:0 0 24px color-mix(in srgb,var(--r2) 40%,transparent)}
.fold-hero[data-lvl="bad"] .ring-num{color:var(--bad-i)}
.fold-hero[data-lvl="off"] .ring-num{color:var(--text-3);font-weight:300;text-shadow:none}
.fold-hero[data-lvl="off"] .hs-num{color:var(--text-3);font-weight:400}
.ring-sub{font-size:max(12px,calc(var(--d) * .05));color:var(--text-3)}
.ring-sub b{color:var(--text);font-weight:650}
.hero-side{display:flex;flex-direction:column;justify-content:center;gap:clamp(4px,2.6cqh,16px);min-width:0;max-height:100%}
.hs{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(10px,min(3.4cqh,2cqw),16px);min-height:clamp(40px,min(17cqh,11cqw),92px);padding:6px clamp(14px,2.6cqw,22px) 6px clamp(10px,2cqw,16px);border-radius:var(--r-tile);background:var(--tile);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .3s,box-shadow .3s}
.hs .ico{--s:clamp(32px,min(12.5cqh,7cqw),52px)}
.hs-t{min-width:0}
.hs-l{display:block;font-size:clamp(13.5px,min(5.2cqh,2.9cqw),19px);font-weight:650;line-height:1.35;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-s{display:block;font-size:clamp(12px,min(3.2cqh,1.9cqw),15px);line-height:1.4;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-num{white-space:nowrap;font-size:clamp(26px,min(11.5cqh,6.6cqw),60px);font-weight:700;line-height:1;letter-spacing:-.025em}
.hs.is-alert{order:-1;background:color-mix(in srgb,var(--warn) 15%,var(--tile));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--warn) 62%,transparent),0 0 0 4px color-mix(in srgb,var(--warn) 14%,transparent),0 12px 28px -16px color-mix(in srgb,var(--warn) 80%,transparent)}
.hs.is-alert .hs-num{font-size:clamp(30px,min(13.5cqh,7.6cqw),68px);color:var(--warn-i)}
.hs.is-alert .hs-l,.hs.is-alert .hs-s{color:var(--warn-i)}
.hs.is-alert .hs-s{font-weight:600}
/* 号池总可用 RPM / TPM：两格并排，数字用中文单位 */
.hs-rates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(6px,2.6cqh,14px)}
.hr{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0;min-height:clamp(37px,min(15cqh,9cqw),78px);padding:2px clamp(12px,2.2cqw,18px);border-radius:var(--r-tile);background:var(--tile);box-shadow:inset 0 0 0 1px var(--line)}
.hr-l{font-size:clamp(12px,min(3.4cqh,1.9cqw),15px);font-weight:600;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-v{display:flex;align-items:baseline;gap:4px;min-width:0;white-space:nowrap}
.hr-v strong{font-size:clamp(20px,min(8cqh,4.6cqw),40px);font-weight:700;line-height:1.05;letter-spacing:-.02em;color:var(--text)}
.hr-v small{font-size:clamp(12px,min(3.6cqh,2cqw),16px);font-weight:600;color:var(--text-2)}
.fold-hero[data-lvl="off"] .hr-v strong{color:var(--text-3);font-weight:400}
.fold .card-h h2 small{margin-left:4px;font-size:.62em;font-weight:600;color:var(--text-3)}
.ring-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;padding:0 4px;list-style:none;font-size:clamp(12px,calc(1.35 * var(--vu)),15px);line-height:1.4;color:var(--text-2)}
.ring-legend li{display:inline-flex;align-items:center;gap:6px}
.ring-legend li b{color:var(--text);font-weight:650}
.ring-legend i{width:10px;height:10px;border-radius:3px}
.k-run{background:linear-gradient(135deg,var(--r1),var(--r2))}
.k-limit{background:var(--limit)}
.k-free{background:var(--track);box-shadow:inset 0 0 0 1px var(--line-2)}
.fv{display:flex;gap:9px;align-items:flex-start;padding:clamp(7px,2.6cqh,16px) clamp(12px,2.4cqw,18px);border-radius:var(--r-tile);background:color-mix(in srgb,var(--tone) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 26%,transparent)}
.fv[data-lvl="ok"]{--tone:var(--good);--tone-ink:var(--good-i)}
.fv[data-lvl="info"]{--tone:var(--info);--tone-ink:var(--info-i)}
.fv[data-lvl="warn"]{--tone:var(--warn);--tone-ink:var(--warn-i)}
.fv[data-lvl="bad"]{--tone:var(--bad);--tone-ink:var(--bad-i)}
.fv[data-lvl="off"]{--tone:var(--neutral);--tone-ink:var(--neutral-ink)}
.vd-dot{flex:none;width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--tone);box-shadow:0 0 0 3px color-mix(in srgb,var(--tone) 20%,transparent)}
.vd-t{min-width:0}
.fv strong{display:block;font-size:clamp(14px,calc(1.7 * var(--vu)),19px);font-weight:650;line-height:1.5;color:var(--tone-ink)}
.fv p{font-size:clamp(12.5px,calc(1.45 * var(--vu)),16px);line-height:1.55;color:var(--text-2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}

/* 累计成绩：三张卡竖排，标题行在上，大数字在下 */
.fstat{display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-height:0;container:fstat/inline-size}
.fstat-top{display:flex;align-items:center;gap:10px;min-width:0}
.fstat-top .ico{--s:clamp(30px,min(calc(4.4 * var(--vu)),9cqi),44px)}
.fstat-top h2{min-width:0;font-size:clamp(13.5px,calc(1.75 * var(--vu)),20px);font-weight:650;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fstat-top h2 small{margin-left:4px;font-size:.78em;font-weight:600;color:var(--text-3)}
.fstat-body{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;min-width:0}
.fstat-aux{flex:none;margin:0 0 3px;text-align:right;line-height:1.4}
.fstat-aux dt{font-size:clamp(12px,calc(1.4 * var(--vu)),15px);color:var(--text-3);white-space:nowrap}
.fstat-aux dd{margin:0;font-family:var(--font-d);font-size:clamp(13px,calc(1.8 * var(--vu)),20px);font-weight:650;color:var(--text-2);white-space:nowrap}
.fbig{display:flex;align-items:baseline;gap:6px;line-height:1;white-space:nowrap;min-width:0}
.fbig .num{font-size:40px;font-weight:700;letter-spacing:-.03em;padding-bottom:2px}
.fstat .fbig .num{font-size:clamp(28px,min(calc(5.5 * var(--vu)),12cqi),70px)}
.fbig .unit{font-size:14px;font-weight:600;color:var(--text-2)}
.fstat .fbig .unit{font-size:clamp(14px,calc(2 * var(--vu)),22px)}
.fbig .pre{font-family:var(--font-d);font-size:22px;font-weight:600;color:var(--text-2);margin-right:-2px}
.fstat .fbig .pre{font-size:clamp(18px,calc(3 * var(--vu)),36px)}
.fbig.is-empty .unit,.fbig.is-empty .pre{display:none}
.fbig.is-empty .num{opacity:.45}
.grad{background:linear-gradient(115deg,var(--ink),var(--ink2));-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="dark"] .grad{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--glow) 55%,transparent))}
@container fstat (max-width:300px){.fstat-aux{display:none}}

/* 服务器性能：标题行（环境说明 / 受限原因 / 上次数据），下面四个指标块 */
.server{display:flex;flex-direction:column;container:srv/inline-size;--mpad:clamp(10px,calc(1.8 * var(--vu)),22px);--mgap:clamp(6px,calc(1.1 * var(--vu)),14px);--mini:clamp(34px,min(calc(5.8 * var(--vu)),22cqi),70px)}
.srv-h{gap:12px}
.srv-h h2{flex:none;font-size:clamp(15.5px,calc(1.95 * var(--vu)),22px);font-weight:650;line-height:1.35;white-space:nowrap}
.srv-desc{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font-size:clamp(12.5px,calc(1.45 * var(--vu)),16px);line-height:1.45;color:var(--text-3)}
.srv-desc span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srv-desc svg.i{display:none;width:15px;height:15px}
.srv-desc[data-tone="info"]{color:var(--info-i)}
.srv-desc[data-tone="warn"]{color:var(--warn-i);font-weight:600}
.srv-desc[data-tone="info"] svg.i,.srv-desc[data-tone="warn"] svg.i{display:block}
.srv-tags{flex:none;display:flex;align-items:center;gap:8px}
.fmetrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,calc(1.6 * var(--vu)),18px)}
.metric{--mr:var(--hc);container:met/inline-size;position:relative;display:flex;flex-direction:column;gap:var(--mgap);padding:var(--mpad) calc(var(--mpad) + 4px);border-radius:var(--r-tile);background:var(--tile);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .3s,box-shadow .3s,opacity .3s}
html[data-palette="neutral"] .metric{--mr:var(--accent)}
.metric[data-lvl="warn"]{background:color-mix(in srgb,var(--warn) 10%,var(--tile));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 45%,transparent)}
.metric[data-lvl="bad"]{background:color-mix(in srgb,var(--bad) 11%,var(--tile));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 50%,transparent)}
html .metric[data-lvl="warn"]{--mr:var(--warn)}
html .metric[data-lvl="bad"]{--mr:var(--bad)}
.m-top{display:flex;align-items:center;gap:10px}
.m-top .ico{--s:clamp(28px,min(calc(4.2 * var(--vu)),16cqi),44px)}
.m-label{flex:1;min-width:0;font-size:clamp(13px,min(calc(1.65 * var(--vu)),calc(8cqi - 2.5px)),19px);font-weight:600;line-height:1.35;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini{width:var(--mini);height:var(--mini);flex:none;transform:rotate(-90deg)}
html[data-theme="dark"] .mini{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--mr) 50%,transparent))}
.mr-track{fill:none;stroke:var(--track);stroke-width:5}
.mr-val{fill:none;stroke:var(--mr);stroke-width:5;stroke-linecap:round;stroke-dasharray:var(--a,0px) 200px;transition:stroke-dasharray .4s var(--ease),stroke .3s,opacity .3s}
.mr-val.is-zero{opacity:0}
.metric[data-lvl="na"] .mr-track{stroke-dasharray:3 4}
.metric[data-lvl="na"] .m-val .num{color:var(--text-3);font-weight:400}
.m-val{display:flex;align-items:baseline;gap:5px;line-height:1;white-space:nowrap;min-width:0}
.m-val .num{font-size:clamp(24px,min(calc(4.4 * var(--vu)),17cqi),54px);font-weight:700;letter-spacing:-.025em}
.m-val .unit{font-size:clamp(13px,calc(1.8 * var(--vu)),20px);font-weight:600;color:var(--text-2)}
.m-of{margin-left:2px;font-size:clamp(12.5px,calc(1.7 * var(--vu)),18px);font-weight:600;color:var(--text-3);overflow:hidden;text-overflow:ellipsis}
.m-foot{display:flex;align-items:center;gap:8px;min-height:22px;font-size:clamp(12px,calc(1.35 * var(--vu)),15px);color:var(--text-3)}
.m-sub{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-st{flex:none;display:inline-flex;align-items:center;min-height:20px;padding:1px 8px;border-radius:999px;font-size:clamp(12px,calc(1.35 * var(--vu)),15px);line-height:1.5;font-weight:650;color:var(--good-i);background:color-mix(in srgb,var(--good) 15%,transparent)}
.metric[data-lvl="warn"] .m-st{color:var(--warn-i);background:color-mix(in srgb,var(--warn) 20%,transparent)}
.metric[data-lvl="bad"] .m-st{color:var(--bad-i);background:color-mix(in srgb,var(--bad) 20%,transparent)}
.metric[data-lvl="na"] .m-st{color:var(--neutral-ink);background:color-mix(in srgb,var(--neutral) 16%,transparent)}
.server.is-stale .metric{opacity:.72}
@container met (max-width:210px){.m-top{gap:8px}.m-top .ico{--s:28px}.mini{width:34px;height:34px}}
@container srv (max-width:760px){
  .srv-h{flex-wrap:wrap;row-gap:10px}
  .srv-desc{order:3;flex:1 1 100%;align-items:flex-start}
  .srv-desc svg.i{margin-top:2px}
  .srv-desc span{white-space:normal}
  .srv-desc[data-tone=""]{display:none}
}
@container srv (max-width:860px){.fmetrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container srv (max-width:400px){.fmetrics{grid-template-columns:minmax(0,1fr)}}
.fold-more{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:var(--hint-h);max-width:100%;display:inline-flex;align-items:center;gap:10px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--text-3);font-size:clamp(12px,calc(1.3 * var(--vu)),15px);font-weight:600;white-space:nowrap;cursor:pointer;transition:color .2s}
.fold-more small{font-size:inherit;font-weight:500;overflow:hidden;text-overflow:ellipsis}
.fold-more svg.i{width:15px;height:15px;animation:nudge 2.6s var(--ease) infinite}
.fold-more:hover{color:var(--text)}
@keyframes nudge{0%,60%,100%{transform:none}30%{transform:translateY(3px)}}

/* =====================================================================
   总览 · 首屏以下（字号用全站字号表）
   ===================================================================== */
.ovm{display:flex;flex-direction:column;gap:var(--gap);margin-top:clamp(24px,calc(4 * var(--vu)),48px);scroll-margin-top:16px}
.ovm:focus{outline:none}
.ovm-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin:0 4px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.ovm-h h2{font-size:var(--t-h2);font-weight:700;line-height:1.35}
.ovm-h p{font-size:var(--t-sm);color:var(--text-3)}
.ovm-h a{margin-left:.2em;font-weight:650}
.ovm-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:stretch}
.trend{grid-column:span 7}
.ledger{grid-column:span 5}
.lvc{grid-column:span 7}
.acct{grid-column:span 5}
.envc{grid-column:1/-1}
.trend{display:flex;flex-direction:column}
.trs{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tr{--sc:var(--hc);display:flex;flex-direction:column;padding:14px 16px 12px;border-radius:var(--r-tile);background:var(--tile);box-shadow:inset 0 0 0 1px var(--line)}
html[data-palette="neutral"] .tr{--sc:var(--accent)}
.tr-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.tr-l{font-size:var(--t-sm);font-weight:600;color:var(--text-2)}
.tr-v{white-space:nowrap}
.tr-v b{font-size:var(--t-num);font-weight:700;letter-spacing:-.02em;color:var(--text)}
.tr-v small{margin-left:3px;font-size:var(--t-xs);font-weight:600;color:var(--text-3)}
.tr-box{position:relative;flex:1;min-height:60px;margin:10px 0 8px}
.tr-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tr-line{fill:none;stroke:var(--sc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
html[data-theme="dark"] .tr-svg{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--sc) 45%,transparent))}
.tf1{stop-color:var(--sc);stop-opacity:.26}.tf2{stop-color:var(--sc);stop-opacity:0}
.tr-dot{position:absolute;right:0;top:var(--y,50%);width:8px;height:8px;margin:-4px -4px 0 0;border-radius:50%;background:var(--sc);box-shadow:0 0 0 3px color-mix(in srgb,var(--sc) 24%,transparent)}
.tr-f{font-size:var(--t-xs);color:var(--text-3)}
.ledger{display:flex;flex-direction:column}
.ledger .card-h{margin-bottom:16px}
.ledger .stat-grid.prominent{grid-template-columns:minmax(0,1fr);gap:12px}
.ledger .stat{padding:16px 18px}
/* 正在运行的请求：列宽、行高都按 --t-md 算 */
.lvc{container:lvc/inline-size;display:flex;flex-direction:column;--lv-h:max(48px,calc(var(--t-md) * 3.3));--lv-cols:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) calc(var(--t-md) * 6.4) calc(var(--t-md) * 5.6)}
.lvc .card-h{margin-bottom:14px}
.live-head{display:grid;grid-template-columns:var(--lv-cols);gap:12px;padding:0 14px 8px;font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;color:var(--text-3)}
.live-head span:last-child{text-align:right}
.live-list{display:grid;gap:6px;align-content:start;min-height:calc(6 * var(--lv-h) + 30px)}
.lv{display:grid;grid-template-columns:var(--lv-cols);align-items:center;gap:12px;height:var(--lv-h);padding:0 14px;border:0;border-radius:12px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--line);font:inherit;font-size:var(--t-md);color:inherit;text-align:left;cursor:pointer;transition:background-color .15s}
.lv:hover{background:var(--tile-hi)}
.lv-model{display:flex;align-items:center;gap:9px;min-width:0;color:var(--text)}
.lv-model b{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fam{flex:none;width:8px;height:8px;border-radius:50%;background:var(--fc);box-shadow:0 0 0 3px color-mix(in srgb,var(--fc) 22%,transparent)}
.fam-claude{--fc:var(--h5)}.fam-gpt{--fc:var(--h4)}.fam-grok{--fc:var(--h2)}.fam-other{--fc:var(--h1)}
.lv-client,.lv-acct{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
.lv-acct{font-size:var(--t-sm)}
.lv-t{text-align:right;font-family:var(--font-d);font-weight:600;color:var(--text);white-space:nowrap}
.lv .badge{justify-self:start}
.live-empty{display:grid;place-items:center;align-content:center;gap:10px;min-height:calc(6 * var(--lv-h) + 12px);padding:20px;text-align:center;border-radius:var(--r-tile);font-size:var(--t-md);color:var(--text-3);background:var(--tile);box-shadow:inset 0 0 0 1px var(--line)}
.live-empty .ico{--s:44px}
@container lvc (max-width:600px){
  .live-head{display:none}
  .lv{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"m t" "c p";height:auto;row-gap:6px;padding:10px 14px}
  .lv-model{grid-area:m}.lv-t{grid-area:t}.lv-client{grid-area:c;font-size:var(--t-sm)}.lv-acct{display:none}.lv .badge{grid-area:p;justify-self:end}
  .live-list{min-height:0}
}
/* 账号池 */
.acct{display:flex;flex-direction:column;gap:16px}
.acct .card-h{margin-bottom:4px}
.acct-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.acct-top .chip{margin-bottom:4px}
.acct-top .fbig .num{font-size:clamp(40px,2.5vw,52px)}
.acct-top .fbig .unit{font-size:var(--t-md)}
.acct-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.type-tile{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-tile);background:var(--tile);box-shadow:inset 0 0 0 1px var(--line)}
.type-tile b{display:block;font-size:var(--t-num);font-weight:700;line-height:1.15;letter-spacing:-.01em}
.type-tile div span{display:block;font-size:var(--t-xs);color:var(--text-3)}
.segbar{display:flex;gap:3px;height:10px;border-radius:999px;overflow:hidden;background:var(--track)}
.segbar i{flex:var(--n,0) 1 0%;min-width:0;border-radius:999px}
.segbar i.has{min-width:6px}
.s-good{background:var(--good)}.s-warn{background:var(--warn)}.s-bad{background:var(--bad)}.s-neutral{background:var(--neutral)}
.alegend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;margin:0;padding:0;list-style:none}
.alegend li{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);color:var(--text-2)}
.alegend li b{margin-left:auto;font-family:var(--font-d);font-weight:700;color:var(--text)}
.alegend .lgd{width:8px;height:8px;border-radius:50%}
.lanes-box{margin-top:auto;padding:14px 16px;border-radius:var(--r-tile);background:var(--tile);box-shadow:inset 0 0 0 1px var(--line)}
.lanes-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:var(--t-sm);font-weight:600;color:var(--text-2)}
.lanes-h b{font-family:var(--font-d);font-size:var(--t-lg);color:var(--text)}
.lanes-bar{position:relative;height:6px;overflow:hidden;border-radius:999px;background:var(--track)}
.lanes-bar i{position:absolute;inset:0;border-radius:inherit;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--accent2),var(--accent));transition:transform .4s var(--ease)}
.lanes-box p{margin-top:10px;font-size:var(--t-xs);line-height:1.6;color:var(--text-3)}
/* 运行环境：10 项只排 5 列或 2 列 */
.envc{container:envc/inline-size}
.env{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 16px;margin:0}
.env div{min-width:0;padding:14px 16px;border-radius:14px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--line)}
.env dt{margin-bottom:4px;font-size:var(--t-sm);color:var(--text-2)}
.env dd{margin:0;font-size:var(--t-md);font-weight:600;line-height:1.45;color:var(--text);overflow-wrap:anywhere;text-wrap:balance}
.envc .callout{margin-top:14px}
.envc .callout strong,.envc .callout span{display:block}
@container envc (max-width:980px){.env{gap:12px}}
@container envc (max-width:820px){.env{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ovm > .card.tight .toolbar strong{font-size:var(--t-md)}
.ovm > .card.tight .toolbar .ico{--s:30px}
#ov-health{border-radius:var(--r-card)}
#ov-health-issues li{font-size:var(--t-sm)}

/* =====================================================================
   说明页
   ===================================================================== */
.docs{display:grid;grid-template-columns:clamp(232px,14vw,300px) minmax(0,1fr);gap:var(--gap);align-items:start}
.toc{position:sticky;top:16px;z-index:5;max-height:calc(100vh - 32px);overflow:auto;padding:14px 10px;border-radius:var(--r-card);scrollbar-width:thin}
.toc-h{padding:2px 10px 10px;font-size:var(--t-2xs);font-weight:600;letter-spacing:.14em;color:var(--text-3)}
.toc ol{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.toc-a{display:flex;align-items:center;gap:10px;width:100%;padding:6px 10px 6px 6px;border:0;border-radius:12px;background:transparent;color:var(--text-2);font-size:var(--t-sm);font-weight:600;line-height:1.35;text-align:left;cursor:pointer;transition:background-color .2s,color .2s}
.toc-a:hover{background:var(--hover);color:var(--text)}
.toc-a.is-on{color:var(--text);background:var(--sel);box-shadow:inset 0 0 0 1px var(--sel-line)}
.toc-ic{--s:28px}
.toc-no{width:1.6em;flex:none;font-family:var(--font-d);font-size:var(--t-2xs);font-weight:700;color:var(--text-3)}
.docs-main{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap);min-width:0}
.doc-sec{padding:28px 32px 30px;scroll-margin-top:16px;container:sec/inline-size}
.doc-sec:focus{outline:none}
.sec-h{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.sec-ic{--s:44px}
.sec-no{display:block;font-size:var(--t-2xs);font-weight:700;letter-spacing:.1em;color:var(--text-3)}
.sec-h h2{font-size:clamp(19px,1.2vw,24px);font-weight:700;line-height:1.35}
.prose{max-width:76ch;margin-bottom:14px;font-size:var(--t-md);line-height:1.85;color:var(--text-2)}
.sub-h{display:flex;align-items:center;gap:8px;margin:24px 0 12px;font-size:calc(var(--t-md) * 1.06);font-weight:650;color:var(--text)}
.sub-h::before{content:"";width:3px;height:1em;border-radius:3px;background:linear-gradient(var(--accent),var(--accent2))}
.doc-sec .kpi-grid{margin-bottom:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.doc-sec .kpi-grid > .kpi:last-child:nth-child(odd){grid-column:auto}
.doc-sec .footnote{font-size:var(--t-sm);line-height:1.8}
.doc-sec .kv-row .k{font-size:var(--t-sm)}
.doc-sec .kv-row .v{font-size:var(--t-md)}
.doc-sec .kv-row .v small{font-size:var(--t-xs)}
.doc-sec .hard-item b{font-size:var(--t-md)}
.doc-sec .hard-item p{font-size:var(--t-sm);line-height:1.75}
.doc-sec table.data td{white-space:normal;vertical-align:top;line-height:1.65}
.doc-sec .price-notes{font-size:var(--t-sm);line-height:1.8;color:var(--text-2)}
.doc-body > p{font-size:var(--t-md);line-height:1.85;color:var(--text-2);margin-bottom:10px}
.terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
.term{padding:14px 16px;border-radius:var(--r-tile);background:var(--tile);box-shadow:inset 0 0 0 1px var(--line)}
.term dt{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:var(--t-md);font-weight:650;color:var(--text)}
.term dt::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--accent);box-shadow:0 0 6px var(--glow)}
.term dd{margin:0;font-size:var(--t-sm);line-height:1.75;color:var(--text-2)}
.doc-sec .faq{grid-template-columns:repeat(2,minmax(0,1fr))}
@container sec (max-width:720px){.terms,.doc-sec .faq{grid-template-columns:minmax(0,1fr)}}

/* =====================================================================
   登录页
   ===================================================================== */
.login-body{background:transparent}
.login-card{border:0;border-radius:26px}
.login-card h1{font-size:calc(var(--t-num) * 1.05)}
.login-card .lead{font-size:var(--t-sm)}
.login-card label{font-size:var(--t-xs)}
.login-field input{height:48px;font-size:var(--t-md);border-radius:var(--r-ctl);background:var(--field)}
.login-card .btn.primary{height:48px;font-size:var(--t-md);border-radius:var(--r-ctl)}
.login-intro > h2{letter-spacing:-.02em}
.login-intro > p{font-size:var(--t-md)}
.login-route b{border:0;background:var(--sel);color:var(--ink);box-shadow:inset 0 0 0 1px var(--sel-line)}
.login-contract,.login-features li,.login-foot,.login-note,.login-route{font-size:var(--t-xs)}
.login-contract .icon,.login-features .icon,.login-note .icon{color:var(--ink)}
.login-error{font-size:var(--t-sm);color:var(--bad-i);background:color-mix(in srgb,var(--bad) 12%,transparent)}
.login-error.locked,.login-error.login-plain-http{color:var(--warn-i);background:color-mix(in srgb,var(--warn) 15%,transparent)}
.login-wordmark .logo{width:44px;height:44px}
.login-theme-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.login-pals{display:flex;gap:7px}
.login-sw{width:22px;height:22px;padding:0;border:0;cursor:pointer}
.login-sw:hover{transform:scale(1.08)}
.login-sw[aria-checked="true"]{box-shadow:inset 0 0 0 1px var(--line-2),0 0 0 2px var(--bg0),0 0 0 3.5px var(--ink)}

/* =====================================================================
   响应式
   ===================================================================== */
@media (max-width:1240px){:root{--side-w:232px}.main{padding-left:24px;padding-right:24px}}
/* 矮屏（1280×640、1366×660 一类）：侧栏收紧，导航 8 项 + 底部信息仍能完整放下 */
@media (min-width:1101px) and (max-height:760px){
  .sidebar{padding:14px 12px 12px;gap:6px}
  .brand{padding:0 8px 12px}
  .nav-cap{padding-top:2px}
  .side-foot{padding-top:8px;gap:2px}
  .side-meta{gap:6px;padding-bottom:4px}
  .side-logout{height:34px}
}
@media (max-width:1100px){
  /* 不让 .app 自成层叠上下文，抽屉侧栏（z 60）才能盖在遮罩（z 55）上面 */
  .app{grid-template-columns:minmax(0,1fr);z-index:auto}
  .sidebar{position:fixed;left:12px;top:12px;bottom:12px;z-index:60;align-self:stretch;width:min(280px,calc(100vw - 40px));height:auto;margin:0;background:var(--pop-bg);transform:translateX(calc(-100% - 24px));visibility:hidden;transition:transform .32s var(--ease),visibility 0s linear .32s}
  html[data-palette="neutral"] .sidebar{background:var(--solid)}
  body.nav-open .sidebar{transform:none;visibility:visible;transition:transform .32s var(--ease),visibility 0s}
  .menu-btn{display:inline-grid}
  .save-bar{left:50%;width:min(640px,calc(100vw - 24px))}
}
/* 1000 以下（平板竖屏、手机）：首屏改为自然流式排版，顺序仍是 并发 → 累计 → 服务器 → 次要信息 */
@media (max-width:1000px){
  :root{--vu:7.2px}
  .fold{height:auto;min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:none;padding-bottom:0}
  .fold-hero,.life,.server{grid-column:1;grid-row:auto}
  .hero-body{flex:none;height:300px}
  .life{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr))}
  .fstat{gap:14px}
  .fstat .fbig .num{font-size:clamp(26px,3.6vw,40px)}
  .fstat .fbig .unit{font-size:14px}
  .fstat .fbig .pre{font-size:20px}
  .fold-more{position:static;transform:none;justify-self:center;height:36px}
  .fold-more small{display:none}
  .trend,.ledger,.lvc,.acct{grid-column:1/-1}
  .docs{grid-template-columns:minmax(0,1fr)}
  .toc{top:8px;max-height:none;padding:8px;border-radius:18px}
  .toc-h{display:none}
  .toc ol{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
  .toc ol::-webkit-scrollbar{display:none}
  .toc-a{width:auto;white-space:nowrap;padding:5px 12px 5px 5px}
  .toc-no{display:none}
}
@media (max-width:760px){
  :root{--gap:14px;--pad:18px;--fg:14px;--fpad:16px}
  .main{padding:10px 14px 120px}
  .topbar{flex-wrap:wrap;height:auto;min-height:var(--tb-h);row-gap:10px}
  .tb-slot{order:3;flex:1 1 100%;flex-direction:column;align-items:stretch}
  .tb-alert{max-width:none;height:auto;min-height:44px;padding:8px 10px 8px 7px}
  .tb-alert-t{flex-wrap:wrap;white-space:normal;gap:2px 10px}
  .tb-alert-t > span{white-space:normal}
  .card{border-radius:20px}
  .life{grid-template-columns:minmax(0,1fr)}
  .fstat .fbig .num{font-size:36px}
  .hero-body{height:auto;container-type:inline-size}
  .hero-grid{--d:min(240px,72cqw);height:auto;grid-template-columns:minmax(0,1fr);justify-items:center;gap:18px}
  .hero-side{width:100%;gap:10px}
  .hs{min-height:62px;gap:12px;padding:8px 16px 8px 12px}
  .hs .ico{--s:36px}
  .hs-l{font-size:14px}
  .hs-s{font-size:12px}
  .hs-num{font-size:32px}
  .hs.is-alert .hs-num{font-size:36px}
  .fv{padding:12px 14px}
  .doc-sec{padding:20px 18px}
  .tb-title p{font-size:12.5px}
  .theme-btn-txt{display:none}
  .theme-btn{padding:0 8px 0 6px}
  .theme-pop{position:fixed;left:12px;right:12px;top:72px;width:auto}
  .trs{grid-template-columns:minmax(0,1fr)}
  .show-narrow{display:inline-flex !important}
  .hide-narrow{display:none !important}
}
@media (max-width:560px){
  .tb-title{flex:1 1 calc(100% - 60px)}
  .tb-actions{width:100%;justify-content:flex-end;margin-left:0}
  .gw-pill{margin-right:auto}
  .theme-pop{top:124px}
  .alegend{grid-template-columns:minmax(0,1fr)}
}

/* ───────────── 减少动态效果 ───────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* 设置页两张档位表：状态列不折行，模型 ID 列可以折行 */
#set-claude-models :is(th,td):not(:first-child),#set-gpt-models :is(th,td):not(:first-child){white-space:nowrap;overflow-wrap:normal}
#set-claude-models :is(th,td),#set-gpt-models :is(th,td){padding-left:10px;padding-right:10px}

/* ───────────── BOX-反代 (BOX-X / BOX-N) 专属组件与家族扩展 ───────────── */
html {
  --fam-gemini: #1f5fa8;
  --fam-gemini-bg: rgba(102, 195, 244, .18);
  --fam-gemini-line: rgba(59, 125, 226, .34);
  --fam-ibm: #5b3fc4;
  --fam-ibm-bg: rgba(178, 155, 250, .18);
  --fam-ibm-line: rgba(123, 85, 230, .34);
}
html[data-theme="dark"] {
  --fam-gemini: #9ed6f7;
  --fam-ibm: #c9bafd;
}
.fam-gemini { --fc: var(--h1); }
.fam-ibm { --fc: var(--h2); }
.md-group[data-family="gemini"] .md-group-head .fam-mark { background: var(--fam-gemini-bg); color: var(--fam-gemini); }
.md-group[data-family="ibm"] .md-group-head .fam-mark { background: var(--fam-ibm-bg); color: var(--fam-ibm); }
.mcard[data-family="gemini"]::before { background: linear-gradient(90deg, var(--fam-gemini), transparent 85%); }
.mcard[data-family="ibm"]::before { background: linear-gradient(90deg, var(--fam-ibm), transparent 85%); }

/* 登录页快捷提示与一键填入 */
.login-quick {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: 11px; background: var(--tile);
  box-shadow: inset 0 0 0 1px var(--line); font-size: var(--t-2xs); color: var(--text-2);
}
.login-quick code { font-family: var(--mono); color: var(--ink); font-weight: 600; }
.login-quick .btn.xs { flex: none; }

/* 四协议接入端点网格 */
.endpoint-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1240px) { .endpoint-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .endpoint-grid.four { grid-template-columns: minmax(0, 1fr); } }

/* 账号 Token TTL 进度条与单元格 */
.ttl-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 116px; }
.ttl-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: var(--t-2xs); font-variant-numeric: tabular-nums; }
.ttl-bar { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.ttl-bar > i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--good), var(--info)); transition: width .35s var(--ease); }
.ttl-bar.warn > i { background: var(--warn); }
.ttl-bar.bad > i { background: var(--bad); }

/* 六大核心法则卡片网格 */
.iron-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.iron-card {
  display: flex; flex-direction: column; gap: 6px; padding: 15px 17px;
  border-radius: var(--r-tile); background: var(--tile); box-shadow: inset 0 0 0 1px var(--line);
}
.iron-card-head { display: flex; align-items: center; gap: 9px; }
.iron-card-head b { font-size: var(--t-sm); font-weight: 660; color: var(--text); }
.iron-card p { font-size: var(--t-xs); color: var(--text-2); line-height: 1.65; }
@media (max-width: 1100px) { .iron-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .iron-grid { grid-template-columns: minmax(0, 1fr); } }

/* 模型能力分级徽章 */
.badge.ultra { --tone: #e47f3a; --tone-ink: var(--warn-i); font-weight: 700; }
.badge.premium { --tone: var(--h2); --tone-ink: var(--c-violet); }
.badge.standard { --tone: var(--info); --tone-ink: var(--info-i); }

/* ───────────── 视觉布局精修补丁（#access 端点、#models 网格、#theme-pop 色板、#brand-sub 防折行） ───────────── */
#brand-sub { white-space: nowrap; font-size: 11.5px; }

#ac-endpoints .endpoint {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
}
#ac-endpoints .endpoint .v {
  word-break: break-all;
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--tile);
}

.md-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.mcard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.mcard-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--tile);
  font-size: var(--t-2xs);
}
.mcard-facts > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mcard-facts span {
  color: var(--text-3);
}

#pal-neutral { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
#pal-colors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pal-tile {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 4px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--tile);
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
}
#pal-neutral .pal-tile { flex-direction: row; gap: 8px; padding: 7px 10px; }
.pal-tile[aria-checked="true"] { border-color: var(--ink); background: var(--tint); font-weight: 600; }
.pal-tile .sw {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
  background: linear-gradient(135deg, var(--sw-a, #5b9bd5), var(--sw-b, #8b9fe6));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

.rq-table th, .rq-table td { padding: 8px 7px; font-size: 12px; }
.rq-table td:nth-child(4) { max-width: 155px; overflow: hidden; text-overflow: ellipsis; }
.rq-table td:nth-child(11) { max-width: 135px; overflow: hidden; text-overflow: ellipsis; }
.rq-table td:nth-child(11) span { display: inline-block; max-width: 125px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }