/* 系统字体的本地声明（与控制台、公开站同款）：local() 只命中本机已装的字体，
让可变字重在各平台都生效。不加载任何网络字体——苹果的字体就是操作系统，
国内网络也不必再等 Google。 */
@font-face{font-family:'PingFang SC';src:local('PingFang SC');font-weight:100 900;font-display:swap}
@font-face{font-family:'HarmonyOS Sans SC';src:local('HarmonyOS Sans SC');font-weight:100 900;font-display:swap}
@font-face{font-family:'MiSans';src:local('MiSans');font-weight:100 900;font-display:swap}
@font-face{font-family:'Microsoft YaHei';src:local('Microsoft YaHei');font-weight:100 900;font-display:swap}
/* ============================================================
AIProxy 交换台 · 设计系统：Apple Human Interface Guidelines（2025，Liquid Glass 一代）
与控制台、公开站同一套语言，参照 developer.apple.com/design：
· 颜色：单色墨承担品牌——浅色按钮黑 #1d1d1f，深色云白 #f5f5f7；彩色只留给
语义（成功 / 警示 / 错误）和数据。系统色取 HIG 2025 那张表：浅色用
「提高对比度」那一列，因为这些令牌也当文字色用，普通那列的绿在白底上
只有 2.2:1；深色用默认列。点、开关这类不承载文字的地方用 --*-fill 鲜艳版。
· 层级：分组背景 #f5f5f7 上放白卡片；深色是纯黑底 + #1c1c1e 卡片（iOS 深色
分组表的做法）。文字三级：label / secondaryLabel / tertiaryLabel。
· 材质：只有导航层（侧栏、顶栏、页签条、弹层、提示）用玻璃，内容层不用——
HIG：「Don't use Liquid Glass in the content layer.」
· 形状：控件一律胶囊，卡片 18px，弹层 24px 以上，内外圆角同心。
· 字体：系统字体（SF Pro / 苹方），字重只用 400/500/600/700，不用细体。
· 动效：弹簧曲线；尊重「减弱动态效果」「降低透明度」「增强对比度」三个系统设置。
· 焦点：键盘焦点一律一圈蓝环（macOS 的 keyboardFocusIndicator），鼠标点击不出环。
令牌名一个都没改（JS 里几十处内联样式引用它们），改的是取值。旧版「机箱恒为
墨色」那条不再成立：侧栏、提示条跟着主题走，和 macOS 的侧栏一样。
派生色（--x-aNN / --x-NN-on-y）按「名字即算式」整体重算。
============================================================ */
:root{
color-scheme:dark;
/* 台面：纯黑底 + 抬升一级的卡片 */
--bg:#000000; --surface:#1c1c1e; --surface-2:#232325; --surface-3:#2c2c2e;
--line:#38383a; --line-soft:#2a2a2c;
--text:#f5f5f7; --dim:#a1a1a6; --faint:#7c7c80;
--brand:#f5f5f7; --brand-2:#f5f5f7; --brand-dim:rgba(245,245,247,.1);
--ok:#30d158; --warn:#ff9230; --bad:#ff4245;
/* 状态网格专用的两格颜色。--ok-quiet 是「有记录、这一格没人调用」——灰会被读成
「那时候挂了」，而没人调用不是一句关于可用性的话；--or-coral 是 80–95% 那一档，
它得比 --warn 更重、又还不到 --bad，四档才排得开。 */
--ok-quiet:rgba(48,209,88,.34); --or-coral:#ff6b3d;
--ac:#ff9a6b; /* anthropic */ --oa:#00dac3; /* openai */ --gm:#0091ff; /* gemini */ --im:#db34f2; /* image */ --ts:#ffd600; /* typesafe */
/* 座位色环：只表示「车上的哪一个人」，不表示「多严重」。绿 / 黄 / 红整块板都
归油表用（还剩多少油），所以这一环刻意避开它们，取 HIG 的冷色到紫一段：
靛 / 青 / 紫 / 蓝绿 / 蓝 / 淡靛。 */
--s1:#6d7cff; --s2:#3cd3fe; --s3:#db34f2; --s4:#00d2e0; --s5:#0091ff; --s6:#a7aaff;
/* 充值分析的两条序列：老客（靛）/ 本期新客（青），两套主题都过了色盲分辨检查
（dataviz validate_palette，深色对 #1c1c1e）。--ta-h1..h5 是首充批次的单色阶，
只用来画「有几成人还在充」，不和别的语义共用。 */
--ta-old:#6d7cff; --ta-new:#1aa3b8; --ta-prev:#636366; --ta-new-bg:rgba(26,163,184,.18); --ta-new-ink:#4fd0e3;
/* 续费日历的收入条：已入账实心、预计续费斜纹、全部续上描边，同一个靛色（--ta-old）。 */
--rc-paid:#6d7cff; --rc-exp:rgba(109,124,255,.34); --rc-weekend:rgba(255,255,255,.015);
--ta-gray:#48484a; --ta-mid:#8e8e93; --ta-h1:#23263a; --ta-h2:#2f3660; --ta-h3:#3f4a92; --ta-h4:#5363d1; --ta-h5:#6d7cff;
--sp-lane:rgba(245,245,247,.08); --sp-rest:#48484a; --sp-rest-line:rgba(124,124,128,.55);
--btn-ink:#1d1d1f; /* 实心按钮上的文字：墨底配白字、白底配墨字 */
--input-bg:#232325; --input-line:#48484a;
--card-grad:#1c1c1e;
--card-shadow:none; /* 深色靠明度分层，卡片不投影 */
--glass:rgba(22,22,23,.72); /* 导航层玻璃：顶栏、页签条 */
--glass-thick:rgba(44,44,46,.9); /* 厚玻璃：弹层、菜单、确认框、⌘K——上面字多，要更不透明 */
--scrim:rgba(0,0,0,.5); /* 抽屉/弹层遮罩 */
--shadow-1:0 24px 64px rgba(0,0,0,.6),0 0 0 .5px rgba(255,255,255,.1);
--shadow-2:0 32px 90px rgba(0,0,0,.66),0 0 0 .5px rgba(255,255,255,.1);
--shadow-3:0 12px 32px rgba(0,0,0,.5),0 0 0 .5px rgba(255,255,255,.1);
/* 信号灯光晕归零：HIG 里状态点就是一个实心点，不发光。旧组件里写死的
box-shadow 光晕因此自动塌成扁平。 */
--halo-blur:0px; --halo-spread:0px; --halo-alpha:0%;
/* 分段控件的选中块：深色是一块抬起的灰（iOS 深色 segmented 的 #636366） */
--ctl-on-bg:#636366; --ctl-on-ring:0 1px 3px rgba(0,0,0,.32);
/* 侧栏：浮在台面上的一块玻璃（macOS 26 的侧栏），跟主题走 */
--rail-bg:rgba(36,36,38,.72); --rail-line:rgba(255,255,255,.09); --rail-hover:rgba(255,255,255,.06);
--rail-text:#f5f5f7; --rail-dim:#a1a1a6; --rail-faint:#7c7c80;
--rail-on-bg:rgba(255,255,255,.12); --rail-on-text:#f5f5f7;
--toast-bg:rgba(44,44,46,.86); --toast-text:#f5f5f7; --toast-line:rgba(255,255,255,.1);
--sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue','PingFang SC','Hiragino Sans GB','HarmonyOS Sans SC','MiSans','Segoe UI','Microsoft YaHei',system-ui,sans-serif;
--disp:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue','PingFang SC','Hiragino Sans GB','HarmonyOS Sans SC','MiSans','Segoe UI','Microsoft YaHei',system-ui,sans-serif;
--mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;
--rail:212px;
/* HIG 新增：链接蓝、焦点环、系统填充四级、鲜艳语义色、玻璃边光、圆角与曲线 */
--link:#2997ff; --focus:#0a84ff; --focus-ring:0 0 0 3px rgba(10,132,255,.5);
--fill-1:rgba(120,120,128,.36); --fill-2:rgba(120,120,128,.32); --fill-3:rgba(118,118,128,.24); --fill-4:rgba(116,116,128,.18);
--ok-fill:#30d158; --warn-fill:#ff9230; --bad-fill:#ff4245;
--btn-hover:#ffffff; --btn-press:#e3e3e8; /* 实心按钮的悬停 / 按下：白底再亮一点、按下压暗一点 */
--brand-a12:rgba(245,245,247,.12); --bad-a6:rgba(255,66,69,.06); /* 页面里有引用、以前没定义过的两个派生色 */
--sheen:inset 0 1px 0 rgba(255,255,255,.07); --glass-edge:rgba(255,255,255,.1);
--r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-2xl:26px; --r-pill:980px;
--ease:cubic-bezier(.25,.1,.25,1); --ease-out:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.32,.72,0,1);
--blur:saturate(180%) blur(20px);
/* 派生色：命名即算式，两套主题各算一份。--brand-a40 = 品牌色 40% 不透明，
--brand-55-on-line = 品牌色 55% 掺线色。只有颜色要到运行时才知道的
（--pv/--pc/--led/--vol）还留着 color-mix，那几处前面都补了静态兜底声明。 */
--ac-a12:rgba(255,154,107,.12); --ac-a14:rgba(255,154,107,.14); --bad-42-on-line:#8c3c3f;
--bad-45-on-line:#923c3f; --bad-60-on-surface:#a43335; --bad-a10:rgba(255,66,69,.1);
--bad-a11:rgba(255,66,69,.11); --bad-a12:rgba(255,66,69,.12); --bad-a16:rgba(255,66,69,.16);
--bad-a18:rgba(255,66,69,.18); --bad-a25:rgba(255,66,69,.25); --bad-a26:rgba(255,66,69,.26);
--bad-a32:rgba(255,66,69,.32); --bad-a40:rgba(255,66,69,.4); --bad-a42:rgba(255,66,69,.42);
--bad-a45:rgba(255,66,69,.45); --bad-a5:rgba(255,66,69,.05); --bad-a55:rgba(255,66,69,.55);
--bad-a60:rgba(255,66,69,.6); --bad-a7:rgba(255,66,69,.07); --bad-a9:rgba(255,66,69,.09);
--bad-ahalo:rgba(255,66,69,0); --black-a22:rgba(0,0,0,.22); --brand-15-on-surface-3:#4a4a4c;
--brand-16-on-surface:#3f3f41; --brand-2-28-on-white:#fcfcfd; --brand-2-72-on-dim:#dddde0;
--brand-2-ahalo:rgba(245,245,247,0); --brand-30-on-surface-3:#68686a; --brand-32-on-line:#747476;
--brand-34-on-line:#78787a; --brand-38-on-line:#808082; --brand-40-on-input-line:#8d8d8f;
--brand-40-on-line:#848486; --brand-40-on-line-soft:#7b7b7d; --brand-42-on-line:#878789;
--brand-45-on-line:#8d8d8f; --brand-50-on-line:#969698; --brand-55-on-line:#a0a0a2;
--brand-55-on-surface-3:#9b9b9d; --brand-65-on-line:#b3b3b5; --brand-70-on-line:#bcbcbe;
--brand-78-on-dim:#e3e3e5; --brand-8-on-surface-2:#343436; --brand-80-on-surface-3:#cdcdcf;
--brand-82-on-surface-3:#d1d1d3; --brand-9-on-surface:#303032; --brand-a13:rgba(245,245,247,.13);
--brand-a14:rgba(245,245,247,.14); --brand-a15:rgba(245,245,247,.15); --brand-a16:rgba(245,245,247,.16);
--brand-a18:rgba(245,245,247,.18); --brand-a20:rgba(245,245,247,.2); --brand-a26:rgba(245,245,247,.26);
--brand-a30:rgba(245,245,247,.3); --brand-a35:rgba(245,245,247,.35); --brand-a40:rgba(245,245,247,.4);
--brand-a45:rgba(245,245,247,.45); --brand-a46:rgba(245,245,247,.46); --brand-a5:rgba(245,245,247,.05);
--brand-a50:rgba(245,245,247,.5); --brand-a55:rgba(245,245,247,.55); --brand-a56:rgba(245,245,247,.56);
--brand-a60:rgba(245,245,247,.6); --brand-a70:rgba(245,245,247,.7); --brand-a72:rgba(245,245,247,.72);
--brand-a78:rgba(245,245,247,.78); --brand-a8:rgba(245,245,247,.08); --brand-a85:rgba(245,245,247,.85);
--brand-ahalo:rgba(245,245,247,0); --brand-ahalohalf:rgba(245,245,247,0); --btn-ink-a35:rgba(29,29,31,.35);
--faint-a12:rgba(124,124,128,.12); --faint-a14:rgba(124,124,128,.14); --faint-a22:rgba(124,124,128,.22);
--faint-a28:rgba(124,124,128,.28); --faint-a30:rgba(124,124,128,.3); --faint-a34:rgba(124,124,128,.34);
--faint-a38:rgba(124,124,128,.38); --faint-a42:rgba(124,124,128,.42); --faint-a5:rgba(124,124,128,.05);
--faint-a52:rgba(124,124,128,.52); --faint-a55:rgba(124,124,128,.55); --faint-a60:rgba(124,124,128,.6);
--faint-a90:rgba(124,124,128,.9); --faint-a95:rgba(124,124,128,.95); --gm-a12:rgba(0,145,255,.12);
--gm-a14:rgba(0,145,255,.14); --im-a12:rgba(219,52,242,.12); --im-a14:rgba(219,52,242,.14);
--ts-a12:rgba(255,214,0,.12); --ts-a14:rgba(255,214,0,.14); --line-a70:rgba(56,56,58,.7);
--oa-a12:rgba(0,218,195,.12); --oa-a14:rgba(0,218,195,.14); --ok-40-on-line:#357546;
--ok-55-on-surface:#27803e; --ok-8-on-surface:#1e2a23; --ok-a12:rgba(48,209,88,.12);
--ok-a13:rgba(48,209,88,.13); --ok-a26:rgba(48,209,88,.26); --ok-a32:rgba(48,209,88,.32);
--ok-a40:rgba(48,209,88,.4); --ok-a45:rgba(48,209,88,.45); --ok-a52:rgba(48,209,88,.52);
--ok-a60:rgba(48,209,88,.6); --ok-ahalo:rgba(48,209,88,0); --rail-on-text-a60:rgba(245,245,247,.6);
--rail-on-text-a70:rgba(245,245,247,.7); --surface-3-a45:rgba(44,44,46,.45); --text-45-on-surface-3:#868688;
--text-a16:rgba(245,245,247,.16); --text-a17:rgba(245,245,247,.17); --text-a46:rgba(245,245,247,.46);
--text-a60:rgba(245,245,247,.6); --text-a8:rgba(245,245,247,.08); --warn-36-on-line:#805836;
--warn-50-on-line:#9c6535; --warn-55-on-line:#a56a34; --warn-a12:rgba(255,146,48,.12);
--warn-a13:rgba(255,146,48,.13); --warn-a16:rgba(255,146,48,.16); --warn-a20:rgba(255,146,48,.2);
--warn-a22:rgba(255,146,48,.22); --warn-a26:rgba(255,146,48,.26); --warn-a30:rgba(255,146,48,.3);
--warn-a40:rgba(255,146,48,.4); --warn-a45:rgba(255,146,48,.45); --warn-a70:rgba(255,146,48,.7);
--warn-ahalo:rgba(255,146,48,0); --warn-a5:rgba(255,146,48,.05); --warn-a9:rgba(255,146,48,.09);
}
/* 浅色：分组背景 + 白卡片，墨色字，按钮黑 */
[data-theme=light]{
color-scheme:light;
--bg:#f5f5f7; --surface:#ffffff; --surface-2:#f9f9fb; --surface-3:#f2f2f7;
--line:#e3e3e8; --line-soft:#ededf0;
--text:#1d1d1f; --dim:#6e6e73; --faint:#86868b;
--brand:#1d1d1f; --brand-2:#1d1d1f; --brand-dim:rgba(0,0,0,.05);
--ok:#008932; --warn:#c55300; --bad:#e9152d;
--ok-quiet:rgba(52,199,89,.34); --or-coral:#e5501e;
--ac:#c4561f; --oa:#008575; --gm:#1e6ef4; --im:#b02fc2; --ts:#a16a00;
--s1:#564ade; --s2:#007eae; --s3:#b02fc2; --s4:#008198; --s5:#1e6ef4; --s6:#8a34d6;
--ta-old:#3f5bd8; --ta-new:#0f9bb4; --ta-prev:#aeaeb2; --ta-new-bg:rgba(15,155,180,.12); --ta-new-ink:#00788c;
--rc-paid:#3f5bd8; --rc-exp:rgba(63,91,216,.26); --rc-weekend:rgba(0,0,0,.012);
--ta-gray:#d1d1d6; --ta-mid:#8e8e93; --ta-h1:#eef0fc; --ta-h2:#d3d9f7; --ta-h3:#a8b4ef; --ta-h4:#7187e3; --ta-h5:#3f5bd8;
--sp-lane:rgba(0,0,0,.05); --sp-rest:#c7c7cc; --sp-rest-line:rgba(134,134,139,.6);
--btn-ink:#ffffff;
--input-bg:#ffffff; --input-line:#d2d2d7;
--card-grad:#ffffff;
--card-shadow:0 1px 2px rgba(0,0,0,.04),0 2px 8px rgba(0,0,0,.03);
--glass:rgba(250,250,252,.78);
--glass-thick:rgba(255,255,255,.92);
--scrim:rgba(0,0,0,.24);
--shadow-1:0 20px 56px rgba(0,0,0,.16),0 2px 8px rgba(0,0,0,.05),0 0 0 .5px rgba(0,0,0,.07);
--shadow-2:0 30px 90px rgba(0,0,0,.2),0 4px 14px rgba(0,0,0,.06),0 0 0 .5px rgba(0,0,0,.07);
--shadow-3:0 10px 30px rgba(0,0,0,.13),0 1px 4px rgba(0,0,0,.05),0 0 0 .5px rgba(0,0,0,.07);
--halo-blur:0px; --halo-spread:0px; --halo-alpha:0%;
/* 分段控件的选中块：浅色是一块白、带一层很浅的投影（iOS segmented） */
--ctl-on-bg:#ffffff;
--ctl-on-ring:0 3px 8px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.04),0 0 0 .5px rgba(0,0,0,.04);
--rail-bg:rgba(255,255,255,.66); --rail-line:rgba(0,0,0,.07); --rail-hover:rgba(0,0,0,.04);
--rail-text:#1d1d1f; --rail-dim:#6e6e73; --rail-faint:#86868b;
--rail-on-bg:rgba(0,0,0,.07); --rail-on-text:#1d1d1f;
--toast-bg:rgba(255,255,255,.86); --toast-text:#1d1d1f; --toast-line:rgba(0,0,0,.08);
--link:#0066cc; --focus:#0071e3; --focus-ring:0 0 0 3px rgba(0,113,227,.3);
--fill-1:rgba(120,120,128,.2); --fill-2:rgba(120,120,128,.16); --fill-3:rgba(118,118,128,.12); --fill-4:rgba(116,116,128,.08);
--ok-fill:#34c759; --warn-fill:#ff8d28; --bad-fill:#ff383c;
--btn-hover:#333336; --btn-press:#000000;
--brand-a12:rgba(29,29,31,.12); --bad-a6:rgba(233,21,45,.06);
--sheen:inset 0 1px 0 rgba(255,255,255,.85); --glass-edge:rgba(255,255,255,.7);
--ac-a12:rgba(196,86,31,.12); --ac-a14:rgba(196,86,31,.14); --bad-42-on-line:#e68c99;
--bad-45-on-line:#e68694; --bad-60-on-surface:#f27381; --bad-a10:rgba(233,21,45,.1);
--bad-a11:rgba(233,21,45,.11); --bad-a12:rgba(233,21,45,.12); --bad-a16:rgba(233,21,45,.16);
--bad-a18:rgba(233,21,45,.18); --bad-a25:rgba(233,21,45,.25); --bad-a26:rgba(233,21,45,.26);
--bad-a32:rgba(233,21,45,.32); --bad-a40:rgba(233,21,45,.4); --bad-a42:rgba(233,21,45,.42);
--bad-a45:rgba(233,21,45,.45); --bad-a5:rgba(233,21,45,.05); --bad-a55:rgba(233,21,45,.55);
--bad-a60:rgba(233,21,45,.6); --bad-a7:rgba(233,21,45,.07); --bad-a9:rgba(233,21,45,.09);
--bad-ahalo:rgba(233,21,45,0); --black-a22:rgba(0,0,0,.22); --brand-15-on-surface-3:#d2d2d7;
--brand-16-on-surface:#dbdbdb; --brand-2-28-on-white:#c0c0c0; --brand-2-72-on-dim:#343437;
--brand-2-ahalo:rgba(29,29,31,0); --brand-30-on-surface-3:#b2b2b6; --brand-32-on-line:#a4a4a8;
--brand-34-on-line:#a0a0a4; --brand-38-on-line:#98989c; --brand-40-on-input-line:#8a8a8d;
--brand-40-on-line:#949498; --brand-40-on-line-soft:#9a9a9c; --brand-42-on-line:#909094;
--brand-45-on-line:#8a8a8e; --brand-50-on-line:#808084; --brand-55-on-line:#767679;
--brand-55-on-surface-3:#7d7d80; --brand-65-on-line:#626265; --brand-70-on-line:#58585b;
--brand-78-on-dim:#2f2f31; --brand-8-on-surface-2:#e7e7e9; --brand-80-on-surface-3:#48484a;
--brand-82-on-surface-3:#434346; --brand-9-on-surface:#ebebeb; --brand-a13:rgba(29,29,31,.13);
--brand-a14:rgba(29,29,31,.14); --brand-a15:rgba(29,29,31,.15); --brand-a16:rgba(29,29,31,.16);
--brand-a18:rgba(29,29,31,.18); --brand-a20:rgba(29,29,31,.2); --brand-a26:rgba(29,29,31,.26);
--brand-a30:rgba(29,29,31,.3); --brand-a35:rgba(29,29,31,.35); --brand-a40:rgba(29,29,31,.4);
--brand-a45:rgba(29,29,31,.45); --brand-a46:rgba(29,29,31,.46); --brand-a5:rgba(29,29,31,.05);
--brand-a50:rgba(29,29,31,.5); --brand-a55:rgba(29,29,31,.55); --brand-a56:rgba(29,29,31,.56);
--brand-a60:rgba(29,29,31,.6); --brand-a70:rgba(29,29,31,.7); --brand-a72:rgba(29,29,31,.72);
--brand-a78:rgba(29,29,31,.78); --brand-a8:rgba(29,29,31,.08); --brand-a85:rgba(29,29,31,.85);
--brand-ahalo:rgba(29,29,31,0); --brand-ahalohalf:rgba(29,29,31,0); --btn-ink-a35:rgba(255,255,255,.35);
--faint-a12:rgba(134,134,139,.12); --faint-a14:rgba(134,134,139,.14); --faint-a22:rgba(134,134,139,.22);
--faint-a28:rgba(134,134,139,.28); --faint-a30:rgba(134,134,139,.3); --faint-a34:rgba(134,134,139,.34);
--faint-a38:rgba(134,134,139,.38); --faint-a42:rgba(134,134,139,.42); --faint-a5:rgba(134,134,139,.05);
--faint-a52:rgba(134,134,139,.52); --faint-a55:rgba(134,134,139,.55); --faint-a60:rgba(134,134,139,.6);
--faint-a90:rgba(134,134,139,.9); --faint-a95:rgba(134,134,139,.95); --gm-a12:rgba(30,110,244,.12);
--gm-a14:rgba(30,110,244,.14); --im-a12:rgba(176,47,194,.12); --im-a14:rgba(176,47,194,.14);
--ts-a12:rgba(161,106,0,.12); --ts-a14:rgba(161,106,0,.14); --line-a70:rgba(227,227,232,.7);
--oa-a12:rgba(0,133,117,.12); --oa-a14:rgba(0,133,117,.14); --ok-40-on-line:#88bf9f;
--ok-55-on-surface:#73be8e; --ok-8-on-surface:#ebf6ef; --ok-a12:rgba(0,137,50,.12);
--ok-a13:rgba(0,137,50,.13); --ok-a26:rgba(0,137,50,.26); --ok-a32:rgba(0,137,50,.32);
--ok-a40:rgba(0,137,50,.4); --ok-a45:rgba(0,137,50,.45); --ok-a52:rgba(0,137,50,.52);
--ok-a60:rgba(0,137,50,.6); --ok-ahalo:rgba(0,137,50,0); --rail-on-text-a60:rgba(29,29,31,.6);
--rail-on-text-a70:rgba(29,29,31,.7); --surface-3-a45:rgba(242,242,247,.45); --text-45-on-surface-3:#929296;
--text-a16:rgba(29,29,31,.16); --text-a17:rgba(29,29,31,.17); --text-a46:rgba(29,29,31,.46);
--text-a60:rgba(29,29,31,.6); --text-a8:rgba(29,29,31,.08); --warn-36-on-line:#d8af94;
--warn-50-on-line:#d49b74; --warn-55-on-line:#d29468; --warn-a12:rgba(197,83,0,.12);
--warn-a13:rgba(197,83,0,.13); --warn-a16:rgba(197,83,0,.16); --warn-a20:rgba(197,83,0,.2);
--warn-a22:rgba(197,83,0,.22); --warn-a26:rgba(197,83,0,.26); --warn-a30:rgba(197,83,0,.3);
--warn-a40:rgba(197,83,0,.4); --warn-a45:rgba(197,83,0,.45); --warn-a70:rgba(197,83,0,.7);
--warn-ahalo:rgba(197,83,0,0); --warn-a5:rgba(197,83,0,.05); --warn-a9:rgba(197,83,0,.09);
}
/* 主题切换瞬间的整页渐变（置于组件规则之前，不覆盖各自的 transition） */
html.theme-fade,html.theme-fade *{transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* 选中文字用系统的淡蓝（macOS selectedTextBackgroundColor），两套主题通用 */
::selection{background:rgba(0,122,255,.24)}
/* 文字链接是 HIG 的 link 色（蓝）：它是全页唯一「点了会走」的正文，得和正文分开 */
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
button{font-family:inherit;cursor:pointer;border:none;font-size:14px;color:inherit}
/* 文本框：白底、一根发丝边、10px 圆角（apple.com 表单的样子）。聚焦时边变蓝、
外面一圈淡蓝环——输入框的焦点鼠标点进去也给，「光标现在在哪一格」总是有用的。 */
input,select,textarea{font-family:inherit;font-size:14px;color:var(--text);background:var(--input-bg);border:1px solid var(--input-line);border-radius:var(--r-md);padding:9px 12px;width:100%;outline:none;
transition:border-color .16s var(--ease),box-shadow .16s var(--ease),background-color .16s var(--ease)}
input:focus,textarea:focus,select:focus{border-color:var(--focus);box-shadow:var(--focus-ring)}
/* 下拉框画成 macOS 的弹出按钮：右端一对上下尖角，替掉各浏览器各不相同的原生箭头 */
select{-webkit-appearance:none;appearance:none;padding-right:30px;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' fill='none' stroke='%2386868b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6l3-3 3 3M2 10l3 3 3-3'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 11px center;background-size:8px 13px}
select[multiple]{background-image:none;padding-right:12px}
/* 勾选框不是输入框。上面那条 width:100% 落到它身上，它在弹性行里就会把整行宽度吃光，
同一行里 flex:1 的名字被压成零宽——看上去是一列没有名字的空勾选框（拼车池的账号
列表这么消失过一次）。已经有两处各自加内联 width:auto 绕开，在这里堵一次。
自绘成开关/卡片的那几处（.toggle、.chan-pick）在后面把它藏起来，不受影响。 */
input[type=checkbox],input[type=radio]{width:auto;flex:none;accent-color:var(--brand)}
input[type=checkbox]:focus,input[type=radio]:focus{box-shadow:none}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{resize:vertical;min-height:88px;font-family:var(--mono);font-size:12.5px;line-height:1.7}
.mono{font-family:var(--mono)}
.hide{display:none!important}
.dim{color:var(--dim)} .faint{color:var(--faint)}
/* 滚动条：macOS 的细滑块，跟主题走 */
*{scrollbar-width:thin;scrollbar-color:var(--faint-a42) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--faint-a38);border-radius:6px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--faint-a60);border:3px solid transparent;background-clip:content-box}
/* 按钮：HIG 的几种样式——实心（主操作，墨底）、灰底（次要，.ghost）、危险（.danger
灰底红字 / .solid-bad 红底白字）。一律胶囊形，按下缩到 0.97。
次要按钮不再是描边盒：一排描边盒子在表格里会读成一排输入框。边框留一圈透明的，
让实心和灰底两种按钮等高。 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--brand);color:var(--btn-ink);
font-weight:500;font-size:13.5px;letter-spacing:-.005em;border:1px solid transparent;border-radius:var(--r-pill);padding:7px 16px;white-space:nowrap;
transition:transform .2s var(--spring),background-color .16s var(--ease),color .16s var(--ease),opacity .16s var(--ease);box-shadow:none}
.btn:hover{background:var(--btn-hover)}
.btn:active{transform:scale(.97);background:var(--btn-press)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn.sm{padding:4px 12px;font-size:12.5px;border-radius:var(--r-pill)}
.btn.ghost{background:var(--fill-3);color:var(--text);box-shadow:none}
.btn.ghost:hover{background:var(--fill-2);color:var(--text)}
.btn.ghost:active{background:var(--fill-1)}
.btn.danger{background:var(--fill-3);color:var(--bad);box-shadow:none}
.btn.danger:hover{background:var(--bad-a12)}
.btn.danger:active{background:var(--bad-a18)}
.btn.solid-bad{background:var(--bad-fill);color:#fff;box-shadow:none}
.btn.solid-bad:hover{background:var(--bad)}
.btn.solid-bad:active{background:var(--bad)}
.btn:disabled,.btn[disabled]{opacity:.4;pointer-events:none}
/* 按钮忙碌态：指针收起，转一枚小针 */
.btn.busy{opacity:.75;pointer-events:none}
.btn.busy::before{content:"";width:13px;height:13px;flex:none;border-radius:50%;
border:2px solid var(--btn-ink-a35);border-top-color:var(--btn-ink);animation:pspin .7s linear infinite}
.btn.ghost.busy::before,.btn.danger.busy::before{border-color:var(--faint-a38);border-top-color:var(--text)}
/* ---------- LOGIN ---------- */
/* 登录：一张居中的表单卡，顶上一枚大号 app 图标（Apple 账户登录页的构图）。
背景就是分组灰，不放动画——登录页只有一件事要做。 */
#login{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
padding:24px;background:var(--bg)}
.patchfield{display:none}
.login-card{width:380px;max-width:100%;background:var(--card-grad);position:relative;z-index:1;text-align:center;
border:1px solid var(--line);border-radius:var(--r-2xl);padding:40px 36px 30px;
box-shadow:var(--shadow-1);animation:rise .5s var(--ease-out) both}
.login-mark{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:20px}
.login-mark .appmark{width:64px;height:64px;border-radius:15px}
.login-mark .appmark svg{width:38px;height:38px}
.login-mark .name{font-family:var(--disp);font-weight:600;font-size:14px;letter-spacing:-.005em;color:var(--dim)}
.login-card h1{font-family:var(--disp);font-size:26px;font-weight:600;margin:0 0 6px;letter-spacing:-.022em}
.login-card .sub{color:var(--dim);font-size:14px;margin:0 0 26px}
.login-card .field{text-align:left}
.field{margin-bottom:13px}
/* 字段标题：句子写法、次级文字色，不再全大写加字距（中文里那是噪音，英文里是喊话） */
.field label{display:block;font-size:12.5px;font-weight:500;color:var(--dim);margin-bottom:6px}
#login input{padding:11px 14px;font-size:15px;border-radius:12px}
#login .btn{width:100%;justify-content:center;margin-top:10px;padding:10px;font-size:15px}
.err{color:var(--bad);font-size:13px;min-height:18px;margin-top:12px;text-align:center}
/* 两步验证：登录卡第二步和「账户与安全」抽屉共用。二维码自带白底和留白，深色主题里照样能扫。 */
.lg-note{font-size:13px;line-height:1.6;color:var(--dim);text-align:left;margin:0 0 16px}
.tf-qr{display:block;width:172px;height:172px;margin:0 auto 12px;border-radius:12px;border:1px solid var(--line)}
.tf-key{font-size:12px;line-height:1.6;color:var(--dim);margin:0 0 18px}
.tf-key code{display:block;margin-top:4px;font-family:var(--mono);font-size:12px;color:var(--text);
user-select:all;overflow-wrap:anywhere}
.tf-code{font-family:var(--mono);font-size:20px;letter-spacing:.32em;text-align:center}
.tf-code::placeholder{font-family:var(--sans);font-size:15px;letter-spacing:0}
#login .tf-code{font-size:20px}
.lg-back{display:inline-block;margin-top:14px;padding:4px 8px;border:none;background:none;border-radius:8px;
font:inherit;font-size:13px;color:var(--dim);cursor:pointer}
.lg-back:hover{color:var(--text)}
.lg-back:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* ---------- SHELL ---------- */
/* 窗口 = 台面 + 一块浮起来的玻璃侧栏（macOS 26 的侧栏不再贴边：四周留 10px，
圆角和窗口同心）。侧栏本身仍是 --rail 宽，外侧那 10px 算进这一列。 */
#app{display:grid;grid-template-columns:calc(var(--rail) + 10px) minmax(0,1fr);min-height:100vh;min-height:100dvh}
.rail{position:sticky;top:10px;height:calc(100vh - 20px);height:calc(100dvh - 20px);margin:10px 0 10px 10px;
background:var(--rail-bg);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
border:1px solid var(--rail-line);border-radius:var(--r-2xl);box-shadow:var(--sheen),var(--card-shadow);
display:flex;flex-direction:column;padding:14px 10px 10px;z-index:6}
/* 品牌：app 图标 + 名字；副题是一行小字，不再全大写加字距 */
.appmark{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:8px;
background:linear-gradient(180deg,#4a4a4f,#1d1d1f);
box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16),0 1px 2px rgba(0,0,0,.16),0 3px 8px rgba(0,0,0,.1)}
.appmark svg{width:19px;height:19px}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
.brand .name{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:-.012em;color:var(--rail-text);line-height:1.2}
.brand .tag{font-size:11px;color:var(--rail-faint);letter-spacing:.02em;text-transform:none;line-height:1.3}
/* 导航：品牌头与脚注钉死，菜单放不下时在自己的区域里滚动，不裁掉尾部 */
.nav{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
/* 一项 = 图标 + 名字，选中是一块圆角的浅填充（macOS 侧栏的选中态），名字加粗一档 */
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-md);color:var(--rail-text);
font-size:13.5px;font-weight:450;letter-spacing:-.005em;transition:background-color .16s var(--ease),color .16s var(--ease);
text-align:left;background:transparent;width:100%;min-width:0}
.nav-item svg{width:17px;height:17px;flex:none;color:var(--rail-dim);transition:color .16s var(--ease)}
.nav-item span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-item:hover{background:var(--rail-hover)}
.nav-item:active{background:var(--rail-on-bg)}
/* 当前模块是一枚实心墨色药丸（品牌单色：浅色黑底白字、深色白底黑字），换页时侧栏只换这一枚 */
.nav-item.on{background:var(--brand);color:var(--btn-ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.nav-item.on svg{color:var(--btn-ink)}
.nav-item.on:hover,.nav-item.on:active{background:var(--brand)}
.nav-item:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
/* 侧栏只放十个一级模块，一列排下（以前 27 个入口分五组、双列才挤得进一屏）。
当前模块整格点亮；模块里的具体页面在顶栏下面的模块页签条上。 */
.nav-item.nav-more{display:none}
.rail-foot{margin-top:auto;padding:10px 10px 4px;border-top:1px solid var(--rail-line);font-size:12px;color:var(--rail-faint);flex:none}
/* 矮窗口 / 高缩放：侧栏整体收紧一档，尽量让全部模块免滚呈现 */
@media (max-height:820px){
.rail{padding:10px 10px 8px}
.brand{padding-bottom:12px}
.rail-foot{padding-top:8px}
}
/* 13 寸笔记本 + 一堆浏览器工具栏：再收一档，仍要全部模块免滚 */
@media (max-height:720px){
.rail{padding:8px 8px 8px}
.brand{padding-bottom:8px}
.nav-item{padding:6px 9px}
}
.rail-foot .live{display:inline-flex;align-items:center;gap:7px;color:var(--rail-dim)}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--ok-fill);box-shadow:0 0 0 0 rgba(52,199,89,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,199,89,.45)}70%{box-shadow:0 0 0 7px rgba(52,199,89,0)}100%{box-shadow:0 0 0 0 rgba(52,199,89,0)}}
.main{min-width:0}
/* 顶栏：导航层的玻璃（半透明 + 模糊 + 提饱和），内容从它底下滚过去 */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;border-bottom:1px solid var(--line-soft);position:sticky;top:0;
background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);z-index:5}
.topbar .title{font-family:var(--disp);font-size:21px;font-weight:600;letter-spacing:-.022em;line-height:1.25}
.topbar .crumb{font-size:12.5px;color:var(--dim);margin-top:2px}
.nav-read-status{font-size:11px;color:var(--dim);margin-top:2px}
.nav-read-status:empty{display:none}
.topbar .right{display:flex;align-items:center;gap:6px;flex:none;white-space:nowrap}
.topbar>div:first-child{min-width:0;flex:1 1 auto;padding-right:16px}
.who{font-size:13px;color:inherit}
.account{display:inline-flex;align-items:center;gap:7px;background:var(--fill-4);border:1px solid transparent;color:var(--text);font-weight:500;font-size:13px;
border-radius:var(--r-pill);padding:5px 6px 5px 12px;transition:background-color .16s var(--ease)}
.account:hover{background:var(--fill-3)}
.account:active{background:var(--fill-2)}
.account:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.account svg{width:14px;height:14px;opacity:.7;flex:none}
/* 顶栏右侧是一排工具栏按钮：平时只有字，悬停才出现胶囊底——一排灰盒子会抢标题的戏 */
.topbar .btn.ghost{background:transparent;color:var(--text)}
.topbar .btn.ghost:hover{background:var(--fill-3);color:var(--text)}
/* 刷新 / 退出：桌面上是文字，窄屏收成两颗圆形图标钮，把位置让给页面标题 */
.tb-act .tb-ico{display:none;width:17px;height:17px;flex:none}
/* 全局搜索钮画成一截搜索栏：灰底胶囊、放大镜 + 占位字 + ⌘K，一看就知道能在这里搜 */
.topbar .tb-search{background:var(--fill-4);color:var(--dim);font-weight:400;min-width:150px;justify-content:flex-start;padding:5px 7px 5px 12px}
@media (max-width:1280px){.topbar .tb-search{min-width:0}}
.topbar .tb-search:hover{background:var(--fill-3);color:var(--text)}
.topbar .tb-search .pal-kbd{margin-left:auto}
/* 掌上搜索框默认不占位。展开规则只在 ≤768px 里，桌面这条一直是 display:none。 */
.tb-qbox{display:none}
/* 主题切换：圆形图标钮。深色时亮出太阳（点了变亮），浅色时亮出月亮 */
.theme-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;padding:0;
background:transparent;border:1px solid transparent;border-radius:50%;color:var(--dim);overflow:hidden;
transition:color .16s var(--ease),background-color .16s var(--ease)}
.theme-btn:hover{color:var(--text);background:var(--fill-3)}
.theme-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.theme-btn svg{position:absolute;width:16px;height:16px;transition:transform .45s var(--spring),opacity .2s ease}
.theme-btn .i-sun{opacity:1;transform:none}
.theme-btn .i-moon{opacity:0;transform:rotate(90deg) scale(.4)}
[data-theme=light] .theme-btn .i-sun{opacity:0;transform:rotate(-90deg) scale(.4)}
[data-theme=light] .theme-btn .i-moon{opacity:1;transform:none}
.theme-btn.float{position:fixed;top:18px;right:18px;z-index:30;background:var(--surface);border-color:var(--line);box-shadow:var(--card-shadow)}
/* 密码强度：四格，最强一格是实心墨色 */
.pw-strength{display:flex;align-items:center;gap:10px;margin:-2px 0 14px}
.pw-bars{display:flex;gap:4px;flex:1}
.pw-bar{height:4px;flex:1;border-radius:2px;background:var(--fill-3);transition:background-color .2s}
.pw-bar.t1{background:var(--bad-fill)} .pw-bar.t2{background:var(--warn-fill)} .pw-bar.t3{background:var(--ok-fill)}
.pw-bar.t4{background:var(--ok)}
.pw-label{font-size:11.5px;font-weight:600;color:var(--dim);min-width:30px;text-align:right}
/* 页面顶部留白：模块页签条的下边线到页面第一块内容，全站统一 16px（掌上 12px）。
规范见 docs/admin-layout.md。页面里第一块东西不要再自带上外边距或上内边距；
钉住的工具带（订阅分配的 .cpd、报表中心的 .rp-catalog）用负外边距抵掉这段，
让带子贴着页签条、带子里的控件仍落在同一条线上。 */
.view{--view-top:16px;padding:var(--view-top) 28px 60px}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* 换页过渡（ptLeave / ptEnter）：只在导航换了页面或页签的那一刻播一次。
侧栏不参与；旧内容的残影（.pt-ghost，克隆出来、不可交互）淡出 120ms 并上移 4px；
新页的顶层模块（.pt-m，只有导航那一刻捕获到的前 8 个错开）从下方 10px 淡入。
最后一个模块的开始时间封顶在 100 + 140ms，淡入 160ms，整段不超过 400ms：
模块多时由 JS 把 --pt-step 从 45ms 往下压。只动 opacity 和 transform。
数据到了重画插进来的新节点不带 .pt-m，不会再播一遍。 */
:root{--pt-out:120ms;--pt-lead:100ms;--pt-in:160ms;--pt-step:45ms;--pt-ease:cubic-bezier(.22,.61,.36,1)}
/* 内容长短变化时滚动条出现 / 消失不再把整页横向推 15px */
html{scrollbar-gutter:stable}
.pt-ghost{position:fixed!important;z-index:3;margin:0!important;pointer-events:none;animation:pt-out var(--pt-out) var(--pt-ease) both}
@keyframes pt-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-4px)}}
.pt-m{animation:pt-in var(--pt-in) var(--pt-ease) both;animation-delay:calc(var(--pt-lead) + var(--i,0) * var(--pt-step))}
@keyframes pt-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pt-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
.pt-ghost{display:none}
.pt-m{animation:pt-fade 90ms linear both;animation-delay:0s}
}
/* 首次读数的占位：进页时还空着的区块（带 id、等数据来填的那些）画成灰色块，
页面一进来就是最终的骨架。表头里那一行判断句画成一条短线。只在 .is-loading
期间生效，数据一到 navEnterView 就把类撤掉。 */
.view.is-loading div[id]:empty:not(.hide):not(.tb-lead *):not(.tb-roll){min-height:72px;margin-bottom:16px;border-radius:18px;background:linear-gradient(90deg,var(--fill-4) 25%,var(--fill-3) 50%,var(--fill-4) 75%);background-size:200% 100%;animation:skel 1.4s ease-in-out infinite}
.view.is-loading .tb-say:empty{display:block;height:18px;width:min(360px,60%);border-radius:9px;background:var(--fill-3)}
/* 表格：表头先画出来，表体还空时在表头下面垫三行高的占位。 */
.view.is-loading .panel:has(>table>tbody:empty)::after{content:"";display:block;height:96px;margin:12px 16px 16px;border-radius:12px;background:linear-gradient(90deg,var(--fill-4) 25%,var(--fill-3) 50%,var(--fill-4) 75%);background-size:200% 100%;animation:skel 1.4s ease-in-out infinite}
/* 概览两块大板按最终高度占位，数据到了不再把下面整页往下推。 */
.view.is-loading #tiles:empty{min-height:122px}
.view.is-loading #ov-hero:empty{min-height:280px}
@keyframes skel{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.view.is-loading div[id]:empty,.view.is-loading .panel::after{animation:none}}
/* 顶栏标题随切页轻落 */
.tswap{animation:tswap .32s var(--ease-out)}
@keyframes tswap{from{opacity:0;transform:translateY(-4px)}}
/* 区块导语：一行次级文字。以前是 11px 全大写加字距，而这一行里多半是一整句中文说明 */
.eyebrow{font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--dim);margin:0 0 12px;line-height:1.55}
.sec{margin-bottom:32px}
/* tiles：读数卡。标题一行次级字，数字用 SF Pro Display 的大字号紧字距 */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
#ku-tiles{grid-template-columns:repeat(6,1fr)} /* 用量页 6 块：钱三块 + token 两块 + 计量覆盖率 */
#ku-tiles .tile .v{font-size:24px}
.tile{background:var(--card-grad);border:1px solid var(--line);
border-radius:var(--r-xl);padding:17px 19px;position:relative;overflow:hidden;box-shadow:var(--card-shadow)}
.tile .k{font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--dim)}
.tile .v{font-family:var(--disp);font-size:30px;font-weight:600;letter-spacing:-.025em;margin-top:10px;line-height:1.05;font-variant-numeric:tabular-nums}
.tile .v small{font-size:14px;color:var(--dim);font-weight:500;letter-spacing:0}
.tile .sub{font-size:12.5px;color:var(--dim);margin-top:8px}
.tile .sub .tile-bad{color:var(--bad);font-weight:600}
.tile .sub .tile-warn{color:var(--warn);font-weight:600}
.tile .sub .tile-split{margin-top:4px;display:flex;flex-wrap:wrap;gap:0 10px}
.tile .sub .tile-split span{display:inline-block;white-space:nowrap}
.tile .sub .tile-split b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
/* 余额进账瓦片：大字只是申请充值的到账，下面四行各自独立，避免和实收、补记挤成一句。 */
.tile-lines{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.tile-lines div{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;
font-size:12.5px;line-height:1.4;color:var(--dim)}
.tile-lines span{min-width:0}
.tile-lines b{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
.tile-lines .down b{color:var(--bad)}
/* 重点读数卡不再挂顶边彩线：HIG 用位置和字号分主次，不用装饰线 */
.tile.accent{border-color:var(--line)}
/* ---------- SIGNATURE: routing signal paths ---------- */
/* 通路板：干净台面，只留行分隔——旧版 30px 横纹在浅色下与行界错位成"错觉线"，已拆除 */
.routes{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:8px 4px;box-shadow:var(--card-shadow)}
.route{display:grid;grid-template-columns:230px 1fr 150px;gap:18px;align-items:center;padding:15px 20px;border-bottom:1px solid var(--line-soft)}
.route:last-child{border-bottom:none}
.route-meta{display:flex;flex-direction:column;gap:6px;min-width:0}
.route-model{font-family:var(--mono);font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.path{display:flex;align-items:center;flex-wrap:wrap;gap:2px;row-gap:10px}
.source{width:11px;height:11px;border-radius:50%;background:var(--brand);flex:none;
box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--brand-ahalo)}
.wire{height:2px;width:30px;flex:none;background:repeating-linear-gradient(90deg,var(--faint-a55) 0 4px,transparent 4px 8px);border-radius:2px}
.wire.live{background:linear-gradient(90deg,var(--brand),var(--brand-2));background-size:200% 100%;animation:flow 1.8s linear infinite}
@keyframes flow{from{background-position:200% 0}to{background-position:0 0}}
.hop{display:inline-flex;align-items:center;gap:8px;background:var(--surface-3);border:1px solid var(--line);
border-radius:999px;padding:6px 13px 6px 11px;flex:none}
.hop.active{border-color:var(--brand-a70);background:var(--brand-9-on-surface);
box-shadow:0 2px 10px -4px var(--brand-a45)}
.hop-name{font-size:12.5px;font-weight:500}
/* 均衡组的连线不该画成「接不住才往下」的虚线：这两条线是同时在用的。实心一条、
压上一个 ⇉，看板才不会把一组并联的账号画成一串备胎。 */
.wire.peer{background:var(--brand-a55);height:2px;position:relative;width:22px}
.wire.peer::after{content:"⇉";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
font-size:10px;line-height:1;color:var(--brand-a85);
background:var(--surface);padding:0 2px}
.hop-load{font-family:var(--mono);font-size:10.5px;font-variant-numeric:tabular-nums;
color:var(--faint);padding-left:6px;margin-left:2px;border-left:1px solid var(--line)}
.hop-load.hot{color:var(--warn)} .hop-load.full{color:var(--bad);font-weight:600}
.hop-alias{font-family:var(--mono);font-size:11px;color:var(--dim)}
.lamp{width:9px;height:9px;border-radius:50%;flex:none;background:var(--faint)}
.lamp-closed{background:var(--ok);box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--ok-ahalo)}
.lamp-open{background:var(--bad);box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--bad-ahalo)}
.lamp-half_open{background:var(--warn);box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--warn-ahalo);animation:blink 1s steps(2,start) infinite}
.lamp-unknown{background:var(--faint)}
/* 停靠：琥珀但不闪。闪的是「正在试探、随时会变」，停靠恰恰相反——日子已经定死，
在那之前什么都不会发生，所以它该是一盏稳定的灯。 */
.lamp-parked{background:var(--warn);box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--warn-ahalo)}
@keyframes blink{50%{opacity:.3}}
/* ---------- 活线 / LIVE FLOW -----------------------------------------
通路板一直只画「线怎么接」：谁排第一、谁熔断了。可每天打开这一页要问的第一句
其实是「此刻电流在哪根线上过」，而那句话以前得翻到健康页去问，还问不到规则这一层
——健康页按模型统计，通路板按规则接线，两边对不上号。日志里的 route_rule 正好是
两者之间那把钥匙，于是把电流画回线上。
三条通道，各说一件互不重复的事：
色相 说种类 —— 紫是流量、红是失败。颜色永远不表示「多少」。
运动 说此刻 —— 线上跑不跑电荷 = 最近 5 分钟有没有真实请求；越密越快越忙。
右侧读数 说总账 —— 24 小时的次数、逐时纸带，和一行只在出事时才出现的例外。
所以 .live 不再自己动了。它原本挂着一段与流量无关的循环扫光：满屏的线都在动，
动就不再是信号，只是装饰。现在动只有一个含义——真的有请求正从这儿过。 */
.wire.live,.wire.flowed{background:linear-gradient(90deg,var(--brand),var(--brand-2));
background:linear-gradient(90deg,
color-mix(in srgb,var(--brand) calc(var(--vol,1) * 100%),transparent),
color-mix(in srgb,var(--brand-2) calc(var(--vol,1) * 100%),transparent));
animation:none}
/* .flowed 是「窗口内有流量从这儿过」，.live 是「断路器认为链走到这儿」——两件事
常常不重合，而不重合处正是要看的。--vol 决定它有多实：一段线承载得越少越淡，
一次也没走过就退回灰色虚线。于是首选跳没接住时，第二段会和第一段一样实，
静默故障切换不必点开就看得见。 */
/* 电荷是线上最亮的那一点，不是最暗的：往白里调，深浅两套主题下它都是「亮」，
而底色仍然只由 --vol 决定。这样线的明度始终单调地跟着流量走——一条正忙的线
永远不会看起来比一条闲着的线更淡。 */
.wire.charged{height:3px;
background-image:
repeating-linear-gradient(90deg,transparent 0 calc(var(--gap,14px) - var(--dash,5px)),
var(--brand-2-28-on-white) calc(var(--gap,14px) - var(--dash,5px)) var(--gap,14px)),
linear-gradient(90deg,
color-mix(in srgb,var(--brand) calc(var(--vol,1) * 100%),transparent),
color-mix(in srgb,var(--brand-2) calc(var(--vol,1) * 100%),transparent));
background-size:var(--gap,14px) 100%,100% 100%;
background-repeat:repeat-x,no-repeat;
animation:charge var(--spd,2s) linear infinite;animation-delay:var(--dly,0s)}
@keyframes charge{to{background-position:var(--gap,14px) 0,0 0}}
/* 请求源那颗点：这条泳道 24 小时里一次调用都没有时压暗。一列泳道扫下来，
左边这排点就是「哪几条线真的在被用」。它不闪——动只留给线，一件事一种表达；
给源头再配一圈脉冲，只是把线已经说过的话大声说了第二遍。 */
.source.cold{background:var(--faint-a52);box-shadow:none}
/* 泳道读数：这条规则 24 小时接了多少。从上到下是「多少 → 什么时候 → 出没出事」，
最后一行是例外行：没有失败也没有改道时它根本不出现。一条一切正常的泳道就该
只剩一个数字——报警的位置平时空着，它出现时才有分量。 */
.lane-read{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:0}
.lane-n{font-family:var(--mono);font-size:16px;font-weight:600;line-height:1;
font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--text)}
.lane-n .u{font-family:var(--sans);font-size:10.5px;font-weight:500;color:var(--faint);
margin-left:4px;letter-spacing:0}
.lane-read.idle .lane-n{color:var(--faint);font-weight:500;font-size:14px}
.lane-quiet{font-size:10.5px;color:var(--faint)}
/* 纸带：一格一小时，和健康页同一种读法（高度是量、红头是失败），缩到一行的尺寸。
高度按本泳道自己的峰值归一化，因为它回答的是「这条线什么时候在跑」；
「跑了多少」左边那个数字已经答过一遍，不必再答。 */
.lane-tape{display:flex;align-items:flex-end;gap:1px;height:15px}
.lane-tape i{width:3px;border-radius:1px;min-height:1px;
background:linear-gradient(to top,
var(--brand-a56) 0 calc(100% - var(--e,0%)),
var(--bad) calc(100% - var(--e,0%)) 100%)}
.lane-tape i.nil{height:1px;background:var(--faint-a34)}
.lane-flag{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;
font-variant-numeric:tabular-nums;white-space:nowrap}
.lane-flag .e{color:var(--bad)} .lane-flag .o{color:var(--warn)} .lane-flag .sep{color:var(--faint)}
/* 图例只讲那两个要学一次的读法，断路器的灯色不在这儿重复解释——那套灯全站通用 */
.flow-key{display:flex;flex-wrap:wrap;gap:6px 20px;margin:-8px 0 13px;padding:0 2px;
font-size:11px;color:var(--faint)}
.flow-key span{display:inline-flex;align-items:center;gap:7px}
.flow-key i{display:inline-block;flex:none;border-radius:1px}
.flow-key i.chg{width:24px;height:2px;
background:repeating-linear-gradient(90deg,transparent 0 6px,var(--brand-2) 6px 9px)}
.flow-key i.tp{width:13px;height:10px;border-radius:1px;
background:linear-gradient(to top,var(--brand-a46) 0 72%,var(--bad) 72% 100%)}
.flow-key .miss{color:var(--warn)}
/* ---------- 订阅节点 / SUBSCRIPTION JACK ----------
每个原生 OAuth 上游就是一个账号。节点在名字后显示该账号自己的额度窗口，
账号之间仍由普通路由链组合；读不到就是未知，不把不同供应商的额度硬凑成均值。 */
.hop-pool{display:inline-flex;align-items:center;gap:7px;padding-left:9px;margin-left:1px;
border-left:1px solid var(--line);cursor:pointer}
.hop-bank{display:inline-flex;gap:2px;align-items:flex-end}
/* 健康的那几格压到六成：五个号全绿时这排灯不该抢戏，红黄才是要被一眼看见的。
一排等亮度的红黄绿看起来像圣诞灯，反而把例外藏进了图案里。 */
.hop-bank i{width:3px;height:10px;border-radius:1px;background:var(--faint);opacity:.4}
.hop-bank i.ok{background:var(--ok);opacity:.6}
.hop-bank i.warn{background:var(--warn);opacity:1}
.hop-bank i.bad{background:var(--bad);opacity:1}
.hop-read{font-family:var(--mono);font-size:10.5px;font-variant-numeric:tabular-nums;
color:var(--dim);white-space:nowrap;letter-spacing:-.01em}
.hop-read.warn{color:var(--warn)} .hop-read.bad{color:var(--bad)}
.hop-read .when{color:var(--faint);margin-left:5px}
.hop-pool:hover .hop-read{color:var(--text)}
.hop-more-n{font-family:var(--mono);font-size:10px;color:var(--faint)}
/* ---- 号池汇流排 / ACCOUNT-POOL BUS ------------------------------------
一个号池在链上占一跳，池里 N 路同时在用。收起时只报三件事——几路、几路通、
均余多少；点开才是每个账号。池内不给拖拽：能拖的地方就会有人以为顺序有用，
而池内的顺序恰恰是唯一没有意义的那个。
前缀一律 .ap-。.hop-pool 早被「这个账号的额度读数」占了，新组件用同名 class
会被另一处规则整个套上，症状是多出一个框而看代码看不出来。 */
.ap-bus{display:inline-flex;flex-direction:column;flex:none;max-width:100%;
background:var(--brand-9-on-surface);border:1px solid var(--brand-a70);border-radius:var(--r-xl)}
/* 展开的池自己占一行：十一路要横着摊开才读得出谁在扛，挤在一跳的宽度里
就又变回一根竖着的清单——正是要拆掉的那个形状。 */
.ap-bus.open{flex:1 1 100%;width:100%}
.ap-bus.alarm{border-color:var(--bad);background:var(--bad-a7)}
.ap-top{display:flex;align-items:center;gap:9px;padding:7px 12px 7px 11px;cursor:pointer;
background:none;border:0;color:inherit;font:inherit;text-align:left;width:100%;border-radius:13px}
.ap-top:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ap-mark{font-size:12px;color:var(--brand-2);line-height:1}
.ap-bus.alarm .ap-mark{color:var(--bad)}
.ap-nm{font-size:12.5px;font-weight:600;white-space:nowrap}
.ap-ways{font-family:var(--mono);font-size:10.5px;color:var(--brand-2);
background:var(--brand-a12);border-radius:5px;padding:1px 6px;white-space:nowrap}
.ap-bus.alarm .ap-ways{color:var(--bad);background:var(--bad-a12)}
.ap-meta{font-family:var(--mono);font-size:10.5px;color:var(--dim);white-space:nowrap;
padding-left:9px;border-left:1px solid var(--line)}
.ap-meta.warn{color:var(--warn)} .ap-meta.bad{color:var(--bad)}
.ap-caret{margin-left:2px;color:var(--faint);font-size:9px;transition:transform .16s}
.ap-bus.open .ap-caret{transform:rotate(90deg)}
.ap-body{display:none;padding:0 12px 11px}
.ap-bus.open .ap-body{display:block}
/* 分流条：最近这段时间，这个池把流量摊成了什么形状。一段一个账号，宽度就是
它接了多少。这是唯一能证明号池在工作的读数——配置本身证明不了任何事。 */
.ap-split{display:flex;gap:2px;height:9px;border-radius:3px;overflow:hidden;
background:var(--surface-3);margin:2px 0 6px}
.ap-split i{background:var(--brand);opacity:.75;min-width:2px;border-radius:2px}
.ap-split i.hot{background:var(--warn);opacity:1}
/* 没跑过的窗口不画成「完美均匀」：空态是未接线，和这块板别处一个规矩。 */
.ap-split.cold i{background:var(--faint);opacity:.3}
.ap-splitcap{display:flex;justify-content:space-between;gap:12px;
font-family:var(--mono);font-size:10px;color:var(--faint);margin-bottom:9px}
.ap-splitcap b{color:var(--dim);font-weight:500}
.ap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:5px}
.ap-cell{display:flex;flex-direction:column;gap:4px;padding:6px 8px;border-radius:8px;
background:var(--surface);border:1px solid var(--line-soft)}
.ap-cell.off{opacity:.55;border-style:dashed}
.ap-cellhd{display:flex;align-items:center;gap:6px}
.ap-cellnm{font-family:var(--mono);font-size:11px;color:var(--text);overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.ap-cellpc{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-left:auto}
.ap-cellpc.warn{color:var(--warn)} .ap-cellpc.bad{color:var(--bad)}
.ap-bar{height:3px;border-radius:2px;background:var(--surface-3);overflow:hidden}
.ap-bar i{display:block;height:100%;background:var(--ok);border-radius:2px}
.ap-bar i.warn{background:var(--warn)} .ap-bar i.bad{background:var(--bad)}
.ap-share{font-family:var(--mono);font-size:9.5px;color:var(--faint)}
/* 收拢提示条：板上认出一串对等的跳还串着时，由板自己提出这件事。 */
.ap-nudge{grid-column:1/-1;display:flex;align-items:center;gap:11px;flex-wrap:wrap;
margin:2px 0 0;padding:8px 12px;border:1px dashed var(--brand-a45);border-radius:10px;
background:var(--brand-a5);font-size:12px;color:var(--dim)}
.ap-nudge b{color:var(--brand-2)}
.ap-nudge .btn{margin-left:auto}
/* 池详单：点开一个池节点，把里面 N 个号摊平。和供应商页那块面板同一套读法，
只是窄了一号——同一件事在两个地方长得不一样，是要人重新学一遍。 */
.jack-pop{position:fixed;z-index:70;width:384px;max-width:calc(100vw - 24px);
background:var(--glass-thick);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
border:1px solid var(--rail-line);border-radius:var(--r-lg);
box-shadow:var(--sheen),var(--shadow-3);padding:12px 14px 10px;
animation:jackin .28s var(--spring)}
@keyframes jackin{from{opacity:0;transform:translateY(-4px) scale(.98)}}
.jack-pop h4{margin:0 0 2px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.jack-pop h4 .n{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--dim);font-weight:500}
.jack-pop h4 .n b{color:var(--ok)} .jack-pop h4 .n b.thin{color:var(--warn)} .jack-pop h4 .n b.out{color:var(--bad)}
.jack-when{font-size:10.5px;color:var(--faint);margin:0 0 7px}
.jack-note{font-size:11px;color:var(--warn);padding:3px 0 5px}
/* 两行一个号，不是一行：状态和重置时刻挤在名字后面时，第一个被省略号吃掉的正是
它们——而"几时回来"恰好是点开这张单子唯一要问的事。名字长短不该决定它出不出现。 */
.jack-row{display:grid;grid-template-columns:9px minmax(0,1fr) 108px;gap:10px;align-items:center;
padding:8px 0;border-top:1px solid var(--line-soft)}
.jack-row .lamp{margin-top:3px;align-self:start}
.jack-row .who{display:flex;flex-direction:column;gap:3px;min-width:0}
.jack-row .nm{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 「当前」排在名字之前：名字长度没有上限，跟在后面的东西迟早被省略号吃掉，
而"现在轮到谁"正是这张单子上最不能丢的一个字。 */
.jack-row .nm .serve{font-size:10px;font-weight:600;color:var(--brand);margin-right:7px;
padding:1px 5px;border-radius:5px;background:var(--brand-a13)}
.jack-row .st{font-size:10.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jack-row .st.ok{color:var(--ok)} .jack-row .st.warn{color:var(--warn)} .jack-row .st.bad{color:var(--bad)}
.jack-row .st b{font-weight:500;color:var(--dim);font-family:var(--mono);font-size:10.5px}
.jack-meter{display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.jack-bar{width:100%;height:4px;border-radius:2px;background:var(--faint-a22);overflow:hidden}
.jack-bar i{display:block;height:100%;border-radius:2px;background:var(--ok)}
.jack-meter.warn .jack-bar i{background:var(--warn)} .jack-meter.bad .jack-bar i{background:var(--bad)}
.jack-num{font-family:var(--mono);font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--dim);white-space:nowrap}
.jack-meter.warn .jack-num{color:var(--warn)} .jack-meter.bad .jack-num{color:var(--bad)}
/* 订阅号有两口井（5 小时 / 周），所以这一格摞两条。颜色跟着各自那条走：一条
见底另一条宽裕是常态，用一个颜色概括两条等于把先见底的那条藏起来。 */
.jack-meter.multi{gap:7px}
.jack-w{display:flex;flex-direction:column;gap:3px;align-items:flex-end;width:100%}
.jack-w.warn .jack-bar i{background:var(--warn)} .jack-w.warn .jack-num{color:var(--warn)}
.jack-w.bad .jack-bar i{background:var(--bad)} .jack-w.bad .jack-num{color:var(--bad)}
.jack-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;
margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft);font-size:11px;color:var(--faint)}
.jack-foot button{background:none;border:none;padding:0;font:inherit;color:var(--brand-2);cursor:pointer}
.jack-foot button:hover{text-decoration:underline}
/* ---------- 改线 / REPATCH ----------
顺序就是故障切换顺序，改它本来要开一次编辑抽屉、点四下、保存。但这件事在版面上
本来就是空间性的——「谁排前面」肉眼可见。所以把它做成拔插：捏起一个插头，接线
之间的每一段线变成敞开的插孔，松手落进哪个孔，就是排到那个位置。
落点是线段而不是节点：位置在两个节点「之间」，插孔画在那儿才没有歧义。 */
.hop[draggable="true"]{cursor:grab}
.hop[draggable="true"]:active{cursor:grabbing}
.hop.lifting{opacity:.34;transform:scale(.97)}
.hop:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* 末尾那个插孔平时是零宽的：一段悬在最后一个节点后面、不通向任何地方的线，
会被读成"链还没完"。它只在拔插时才需要存在——拖到队尾总得有处落。 */
.wire.tail{width:0;margin:0}
.path.patching .wire{width:34px;background:none;height:16px;border-radius:3px;
border:1px dashed var(--brand-a55);
background-color:var(--brand-a8);
transition:width .13s ease,background-color .13s ease}
.path.patching .wire.hot{width:52px;border-style:solid;
background-color:var(--brand-a26);
box-shadow:0 0 0 3px var(--brand-a14)}
/* 拔插时每一段线都是敞开的插孔，不再是线：电荷停下，免得插孔看起来还在导通 */
.path.patching .wire.live,.path.patching .wire.charged{animation:none}
.path.saving{opacity:.55;pointer-events:none}
@media (prefers-reduced-motion:reduce){
.path.patching .wire{transition:none}
.jack-pop{animation:none}
}
/* tags */
.tag{display:inline-flex;align-items:center;font-size:11px;font-weight:600;letter-spacing:.02em;padding:2px 9px;border-radius:6px;width:fit-content;white-space:nowrap}
.tag-anthropic{color:var(--ac);background:var(--ac-a12)}
.tag-openai{color:var(--oa);background:var(--oa-a12)}
.tag-gemini{color:var(--gm);background:var(--gm-a12)}
.tag-image{color:var(--im);background:var(--im-a12)}
.tag-typesafe{color:var(--ts);background:var(--ts-a12)}
/* 图标版协议标签：宽度只剩一枚图标，原文在 title 里（protoTag）。text 版图标后跟原文。 */
.tag.tag-ic{gap:3px;padding:2px 5px}
.tag.tag-ic svg{width:12px;height:12px;flex:none}
.tag.tag-ic b{font-weight:700;line-height:1}
.tag.tag-ict{gap:5px;padding:2px 9px 2px 6px}
.ptag>svg{width:12px;height:12px;flex:none}
/* 共享档位的饼图：每人份额，独享整圆、双人一半、四人四分之一。 */
.tier-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:14px;height:14px;color:var(--dim);vertical-align:-2px}
.tier-ic svg{width:12px;height:12px;display:block}
/* 两层标记：外层协议家族，内层是这个家族里真正能调的 API。斜体那一格是
桥接——上游不会说，网关在进程里翻译，那是我们的能力不是对方的。 */
.ptag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:0;
padding:2px 5px 2px 9px;border-radius:var(--r-pill);width:fit-content;white-space:nowrap}
.ptag i{font-style:normal;font-weight:500;font-family:var(--mono);font-size:10.5px;
padding:1px 6px;border-radius:var(--r-pill);background:var(--surface);opacity:.95}
.ptag i.bridged{opacity:.75;border:1px dashed currentColor;padding:0 5px}
.ptag.tag-anthropic{color:var(--ac);background:var(--ac-a12)}
.ptag.tag-openai{color:var(--oa);background:var(--oa-a12)}
.ptag.tag-gemini{color:var(--gm);background:var(--gm-a12)}
.ptag.tag-image{color:var(--im);background:var(--im-a12)}
.ptag.tag-typesafe{color:var(--ts);background:var(--ts-a12)}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
.badge.closed{color:var(--ok);background:var(--ok-a12)}
.badge.open{color:var(--bad);background:var(--bad-a11)}
.badge.half_open{color:var(--warn);background:var(--warn-a12)}
.badge.parked{color:var(--warn);background:var(--warn-a12)}
.badge.off{color:var(--faint);background:var(--faint-a12)}
.badge.on{color:var(--ok);background:var(--ok-a12)}
.badge.expired{color:var(--warn);background:var(--warn-a12)}
.badge.reauth{color:var(--bad);background:var(--bad-a11)}
/* 治理表和账号授权提示用 ok / bad / unknown 三个通用值，以前没有样式，印成无色。 */
.badge.ok{color:var(--ok);background:var(--ok-a12)}
.badge.bad{color:var(--bad);background:var(--bad-a11)}
.badge.unknown{color:var(--faint);background:var(--faint-a12)}
/* In-service switch: the rack breaker for one line. Reads as the state badge it
replaces, but the miniature track makes it obvious it can be thrown — taking a
dead upstream out of service is an incident action, not an edit. */
.sw{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12px;font-weight:600;
padding:3px 10px 3px 5px;border-radius:999px;border:1px solid transparent;background:transparent;
cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
/* 里面那枚是一只迷你 iOS 开关：开是绿色轨道、关是灰色轨道，白色圆钮弹簧滑过去。
（圆钮以前引用了一个不存在的 --surface-1，一直是透明的，整只开关读起来像一块色块。） */
.sw i{position:relative;width:26px;height:16px;border-radius:999px;flex:none;transition:background-color .25s var(--ease)}
.sw i::before{content:"";position:absolute;width:12px;height:12px;top:2px;left:2px;border-radius:50%;
background:#fff;transition:transform .3s var(--spring);box-shadow:0 1px 2px rgba(0,0,0,.25),0 0 0 .5px rgba(0,0,0,.04)}
.sw.on{color:var(--ok);background:var(--ok-a12)}
.sw.on i{background:var(--ok-fill)}
.sw.on i::before{transform:translateX(10px)}
.sw.off{color:var(--dim);background:var(--fill-4)}
.sw.off i{background:var(--fill-1)}
.sw:hover{border-color:color-mix(in srgb,currentColor 35%,transparent)}
.sw:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sw[disabled]{cursor:progress;opacity:.55}
/* ---- OAuth pairing: a subscription tap, not a static patch cable. The device
code shows on an LED-style hardware readout; a live signal pathway conveys the
handshake in progress. All colors derive from the existing rack tokens. ---- */
.oauth-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;font-weight:600;
color:var(--oa);background:var(--oa-a12);padding:2px 8px;border-radius:999px;white-space:nowrap}
/* ---------- PROVIDERS · 端口铭牌 / PORT NAMEPLATE ----------
一条上游 = 配线架上的一个端口。铭牌要在不点开任何东西的前提下说清「这是谁」：
刻字方块（记号认供应商、底色认协议）+ 线名 + 下面一行身份。
那一行身份对订阅线是账号邮箱，对密钥线是端点地址——同一条规则，两种载荷：
「什么东西能把这条线和它的同类区分开」。五条 Kiro 之前印着五串一模一样的
q.us-east-1.amazonaws.com，占着整版最宽的一栏，却没有一个字回答这个问题。 */
.pv-plate{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;min-width:0}
/* 掌上把测试 / 编辑 / 删除挂在铭牌下面。操作列在横向滑轨最右端，390px 上等于
不存在；display:none 的这一排不占格子，桌面仍用右侧那三个图标。 */
.pv-touch-act{display:none}
.pv-mark{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;margin-top:1px;
font-size:13px;line-height:1;color:var(--pc,var(--faint));
background:var(--surface-3);background:color-mix(in srgb,var(--pc,var(--faint)) 12%,transparent);
box-shadow:inset 0 0 0 1px var(--line);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pc,var(--faint)) 22%,transparent)}
.pv-mark svg{width:14px;height:14px}
.pv-id{display:flex;flex-direction:column;gap:3px;min-width:0}
/* 名字行不换行：协议标签不缩，名字截省略号（全名在 title 里）。换行会让这一格四行高。 */
.pv-id-top{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:nowrap}
.pv-id-top .tag,.pv-id-top .ptag{flex:none}
/* 身份和标签同一行，但**谁让步是定死的**：邮箱 `flex:1 1 auto;min-width:0` 会截断，
钢印 `flex:none` 永远不动。最早它们挤在一个可换行 flex 里，邮箱长一点就把档位
挤到第三行，整列像随机错位；接着各占一轨，错位没了，代价是每一行都多一行高。
两个毛病的根都是「谁让步没定死」——定死之后一行装得下，长邮箱自己收省略号。 */
/* 邮箱收到 10.5px：这一行要装下的是「完整的账号」加一两枚钢印，而截一半的邮箱
认不出任何东西——同一家的几个号正是靠它分开的。小一号换来的是不截。 */
.pv-who{display:flex;align-items:baseline;gap:7px;min-width:0;
font-size:10.5px;line-height:1.5}
.pv-who-main{flex:1 1 auto;display:block;min-width:0;overflow:hidden}
/* 钢印（档位 / 重复 / 月费）自己占第三行：和邮箱同一行时，两者只能有一个完整，
而铭牌格的三行正好一行一件事——名字、邮箱、钢印。空着就收起（密钥线没有钢印）。 */
.pv-labels{flex:none;display:flex;align-items:center;gap:5px;white-space:nowrap;min-width:0;max-width:100%;overflow:hidden}
.pv-labels:empty{display:none}
.pv-mail{font-family:var(--mono);color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
display:block;min-width:0;max-width:100%}
.pv-mail .at{color:var(--faint)}
.pv-who .none{color:var(--faint)}
/* 档位钢印：邮箱之后，第二个能把同一家的几个号分开的东西 */
.pv-plan{flex:none;font-size:10px;font-weight:600;letter-spacing:.03em;padding:1px 6px;border-radius:5px;
color:var(--dim);background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap}
/* 走代理的线极少，所以它值得一个记号：这条线出网走的是另一扇门 */
.pv-px{flex:none;font-size:10px;font-weight:600;padding:1px 6px;border-radius:5px;white-space:nowrap;
color:var(--brand-2);background:var(--brand-dim);box-shadow:inset 0 0 0 1px var(--brand-a30)}
/* Claude 节点的出口由节点自己上报。「直连」要显形：一列里没配代理的节点和
没上报的节点不能长得一样，那正是要找的那几台。代理和直连测到同一个地址时，
代理没起作用，用警示色。 */
.pv-px.direct{color:var(--dim);background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line)}
.pv-px.na{color:var(--faint);background:transparent;box-shadow:inset 0 0 0 1px var(--line-soft)}
.pv-px.warn{color:var(--warn);background:var(--warn-a12);box-shadow:inset 0 0 0 1px var(--warn-a40)}
/* 代理 / 直连只印方向图标：代理是绕行的箭头，直连是直箭头；两种告警仍印字。 */
.pv-px.ic{display:inline-flex;align-items:center;padding:1px 4px}
.pv-px.ic svg{width:11px;height:11px;display:block}
/* 代理地址和「查看 / 复制」同一行：地址截省略号，入口不缩。竖着摞是两行，
而这一格的预算只有三行（芯片 / 代理 / 绑定）。 */
.pv-proxy-open{display:flex;align-items:baseline;gap:6px;max-width:100%;min-width:0;padding:0;line-height:1.35;
border:0;background:none;color:var(--dim);font-size:10.5px;cursor:pointer;text-align:left}
.pv-proxy-open .mono{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-proxy-open .action{flex:none;color:var(--brand-2)}
.proxy-copy-row{display:flex;align-items:center;gap:8px}
.proxy-copy-row input{flex:1;min-width:0}
.proxy-copy-row .btn{flex:none}
.proxy-readout{margin:16px 0}
.proxy-readout .field{margin-bottom:16px}
/* ---- 「用途 · 号池」这一列 ---------------------------------------------
这三枚芯片（用途 / 号池 / 出口）原本挂在铭牌的账号行后面，和邮箱抢同一行的宽度。
两个后果：一是最后进场的那枚被挤没了形——`.ap-cellbtn` 没有 flex 下限，于是
「+ 入池」被压成一个竖着排字的圆点；二是更贵的那个，**用途钢印在每一行的横坐标
都不一样**，因为它跟在长短不一的邮箱后面。一整列没法竖着扫，而这一页最要紧的
那句话——哪几个号 API 和拼车都够得着（2026-08-16 在 923 上真出过事）——恰恰只有
竖着扫才看得见。
所以拆成一列。铭牌只答「这是谁」（找行时读），这一列只答「它怎么接进产品」
（决定流量怎么走时读）。两个问题不在同一个时刻问，就不该在同一格里挤。
列名照抄上面筛选轨的两组芯片：那两组筛的正是这一列。
左边那根 2px 的线是这一格的读法：颜色 = 用途，和用途筛片同一套色。芯片的底色
在 10px 上扫不出来，一根定在同一个横坐标上的竖线可以——灰的是常态，有颜色的
才要停下来看。 */
/* `minmax(0,1fr)` 不是装饰：默认的 auto 轨道按最宽的那枚芯片撑开，一个长池名
就能把整格顶到隔壁「额度余量」上去。有了下限 0，芯片才收得回来、`.t` 的省略号
才轮得到出场。 */
.pv-wire{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;justify-items:start;
min-width:0;padding-left:9px;position:relative}
.pv-wire::before{content:"";position:absolute;left:0;top:1px;bottom:1px;width:2px;border-radius:2px;
background:var(--wc,var(--line))}
.pv-wire>*{max-width:100%}
/* 号池和出口并排站一行：两者都是「它接在哪儿」，而用途是「它给谁干活」，
分两行正好把这一格分成两句话。挤不下时代理自己掉下去，不拖着号池一起换行。 */
.pv-riders{display:flex;flex-direction:column;gap:3px;min-width:0;max-width:100%;font-size:12px;margin-top:1px}
.pv-rider{display:flex;align-items:baseline;gap:4px;min-width:0;max-width:100%;line-height:1.35}
.pv-rider-prefix{color:var(--dim);font-size:11px;flex:none;user-select:none}
.pv-rider-primary{flex:0 1 auto;min-width:0;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-rider-sub{flex:1 1 30px;min-width:0;font-size:10.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-riders-empty{font-size:11px;color:var(--faint)}
/* 多个绑定并成一行，只印名字：名字已经认得出人，四个人的邮箱一行装不下。
整行截省略号，全名单在 title 里。 */
.pv-rider.many{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-rider.many .pv-rider-primary{display:inline;overflow:visible}
.pv-rider-sep{color:var(--faint);margin:0 4px}
.pv-rider-lend{font-style:normal;font-size:10px;color:var(--warn);margin-left:2px}
/* 芯片行不换行：长的两枚（用途、号池）收省略号，短的（节点 / 出口）不缩。换行会把
这一格顶到四行，而整张表的行高就是最高那一格定的。 */
.pv-wire-r{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;min-width:0;max-width:100%}
.pv-wire-r .pv-car,.pv-wire-r .pv-cross{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pv-wire-r .ap-cellbtn{flex:0 1 auto;min-width:0}
/* 纯 API 不盖钢印——那是一条上游的默认身份，每行都盖等于没盖。但一列如果留白，
「默认」和「没数据」就分不开了，所以它在这里出现，只是不带底色：认得出，不喊。 */
.pv-api{font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--faint);white-space:nowrap}
.pv-api.na{letter-spacing:0}
/* 用途钢印：拼车那枚印的是车名——骑手买的就是那辆车；交叉那枚印的是交叉本身
（「API ↔ 四人车」），因为这一格要回答的不是「它属于谁」而是「哪两门生意
在这个号上撞了」。 */
.pv-car{flex:none;font-size:10px;font-weight:600;padding:1px 6px;border-radius:5px;white-space:nowrap;
color:var(--brand-2);background:var(--brand-dim);box-shadow:inset 0 0 0 1px var(--brand-a30)}
.pv-car.alt{color:var(--dim);background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line)}
.pv-cross{flex:none;font-size:10px;font-weight:600;padding:1px 6px;border-radius:5px;white-space:nowrap;
color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent);
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 30%,transparent)}
/* ---- 供应商页的号池分组 ------------------------------------------------
分组是一次真划分：一个账号只属于一个号池，所以每一行恰好落在一个组里，
最后那一组「未入池」把余数收干净。组头本身就是这个池的操作台。 */
tr.ap-grouphd>td{background:var(--brand-a5);border-top:1px solid var(--brand-a45);
padding:9px 14px}
tr.ap-grouphd.loose>td{background:var(--surface-2);border-top:1px solid var(--line)}
/* 档位分组的组头用中性底：它只是把表切开，不像号池组头那样是一个可编辑的对象。 */
tr.ap-grouphd.pv-tierhd>td{background:var(--surface-2);border-top:1px solid var(--line)}
.pv-tier-ic{display:inline-flex;color:var(--dim)}
.pv-tier-ic svg{width:14px;height:14px}
button.ap-tag{cursor:pointer;font:inherit;font-size:11px}
.ap-gh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ap-gh .nm{font-family:var(--disp);font-size:13px;font-weight:600}
.ap-gh .n{font-family:var(--mono);font-size:11px;color:var(--dim)}
.ap-gh .right{margin-left:auto;display:flex;gap:7px;align-items:center}
.ap-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:1px 8px;
border-radius:6px;background:var(--surface-3);color:var(--dim);border:1px solid var(--line-soft)}
.ap-tag.on{background:var(--brand-a12);color:var(--brand-2);border-color:var(--brand-a45)}
.ap-tag.warn{background:var(--warn-a12);color:var(--warn);border-color:var(--warn-a30)}
/* 「号池」那一格本身就是操作：点开换池，不必进抽屉。
`flex:none` + `nowrap` 是这一枚上花了最久才找到的两个字：它以前既没有伸缩下限
也不禁止换行，所以在一行芯片里它总是第一个被压垮的——压到比「入池」两个字还窄，
浏览器就把它们竖着排，一枚胶囊渲染成一个圆点。要截也该截池名，不该截控件本身。 */
.ap-cellbtn{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:11.5px;
padding:2px 9px;border-radius:999px;background:var(--brand-a12);color:var(--brand-2);
border:1px solid var(--brand-a45);cursor:pointer;max-width:100%;flex:none;white-space:nowrap}
/* 池名长了就在名字里打省略号（全名在 title 里），胶囊的形状不参与让步 */
.ap-cellbtn .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ap-cellbtn .k{flex:none}
.ap-cellbtn.none{background:transparent;color:var(--faint);border:1px dashed var(--line)}
.ap-cellbtn:hover{border-color:var(--brand)}
.ap-cellbtn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* 建池 / 调成员的抽屉：左候选、右池内，点一下就过去。 */
.ap-xfer{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ap-xcol{border:1px solid var(--line);border-radius:10px;background:var(--surface-2);overflow:hidden}
.ap-xh{padding:7px 11px;font-size:11px;color:var(--faint);border-bottom:1px solid var(--line-soft);
display:flex;justify-content:space-between;gap:8px}
.ap-xl{padding:7px;display:flex;flex-direction:column;gap:4px;max-height:max(260px,46dvh);overflow:auto}
.ap-mem{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:7px;
background:var(--surface);border:1px solid var(--line-soft);font-family:var(--mono);
font-size:11.5px;cursor:pointer;text-align:left;color:var(--text);width:100%}
.ap-mem:hover{border-color:var(--brand-a45)}
.ap-mem[disabled]{cursor:not-allowed;opacity:.5}
.ap-mem .tail{margin-left:auto;font-size:10.5px;color:var(--faint);font-family:var(--sans)}
.ap-mem .tail.taken{color:var(--warn)}
.ap-xempty{padding:14px 8px;text-align:center;font-size:11.5px;color:var(--faint)}
.ap-xempty a{color:var(--text);text-decoration:underline}
.ap-xl .cj-h{font-size:10.5px;color:var(--faint);padding:6px 8px 2px;letter-spacing:.02em}
.ap-xl .cj-h:not(:first-child){margin-top:4px;border-top:1px solid var(--line-soft);padding-top:8px}
.ap-mem .ap-mark .tier-ic{display:inline-flex;vertical-align:middle}
@media (max-width:820px){.ap-xfer{grid-template-columns:1fr}}
/* 三条分流策略折起来：十个池里九个跟随全局，摊开是三段产品课压在名单底下。
折叠条上印着当前取值，折着也看得见有没有人改过。 */
.ap-fold{margin:4px 0 14px;border:1px solid var(--line-soft);border-radius:10px;background:var(--surface-2)}
.ap-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 12px;
font-size:12px;font-weight:600;color:var(--dim)}
.ap-fold>summary::-webkit-details-marker{display:none}
.ap-fold>summary .v{margin-left:auto;font-weight:500;font-size:11.5px;color:var(--faint);text-align:right;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-fold>summary .v b{font-weight:600;color:var(--brand-2)}
.ap-fold>summary::after{content:"▾";flex:none;font-size:10px;color:var(--faint);transition:transform .16s}
.ap-fold[open]>summary::after{transform:rotate(180deg)}
.ap-fold>summary:hover{color:var(--text)}
.ap-fold>summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.ap-fold>.ap-foldbody{padding:4px 12px 4px;border-top:1px solid var(--line-soft)}
.ap-fold>.ap-foldbody .field{margin:12px 0 4px}
/* 凭证：这条线拿什么进门，此刻进不进得去。和「线路」是两件事——令牌有效的线
照样可能正在熔断，所以两栏各说各的，谁也不替谁下结论。 */
.pv-cred{display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:118px}
.pv-cred-kind{flex:1 1 auto;min-width:0;font-size:11px;color:var(--faint);white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.pv-cred-kind .mono{font-size:10.5px;color:var(--dim)}
/* 余量：一条额度窗口一根量条，一根都不省——周额度宽裕的号照样可能撞上 Fable 的
模型墙，把它折进绿灯里正是这一格要消灭的含混。
条子给足宽度：42px 的轨只有「有色 / 没色」两档，读不出刻度，而「谁快见底」
恰好是这一栏唯一要回答的事。 */
.pv-meters{display:flex;flex-direction:column;gap:5px;min-width:0}
/* 四列定宽是为了上下行的数字对齐（见下）。收窄时的让步顺序也定死在这里，按
「这一列没了还答不答得上话」排：
窗口名 —— 先让。三行的次序永远是 5 小时 / 周 / 限定，截了还认得出，全名在
title 里；所以它是 minmax(0,…)，可以一路收到 0。
量条 —— 有硬下限。它就是这一格存在的理由，收成一截色块等于这一列白开。
读数和几时回来 —— 不让。它们是答案，截掉「重置 / 见底」那两个字，剩下的
数字就又变回一个不知道该不该等的东西。 */
.pv-m{display:grid;grid-template-columns:minmax(0,92px) minmax(56px,1fr) 84px 64px 96px;align-items:center;gap:10px;
font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.pv-m .ml{color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-m.scoped .ml::before{content:"◇ ";color:var(--brand-2)}
.pv-m.scoped{opacity:.78}
.pv-m .mb{position:relative;height:5px;max-width:220px;border-radius:3px;background:var(--surface-3);overflow:hidden;
box-shadow:inset 0 0 0 1px var(--line-a70)}
.pv-m .mb i{display:block;height:100%;width:var(--left);border-radius:3px;background:var(--ok);transition:width .5s ease}
.pv-m .mn{font-family:var(--mono);font-size:10.5px;white-space:nowrap;color:var(--dim);text-align:right}
.pv-m.warn .mb i{background:var(--warn)} .pv-m.warn .mn,.pv-m.warn .ml{color:var(--warn)}
.pv-m.out .mb i{background:var(--bad)} .pv-m.out .mn,.pv-m.out .ml{color:var(--bad)}
/* 这一格经本平台跑了多少 token（输入 + 输出），斜杠后面是按百分比推出来的满额。
满额是拿来横着比的数：同档位的号应该差不多，所以它和左边的余量一样右对齐。
偏低的整格换成警示色，原因在 title 里。 */
.pv-m .mtk{font-family:var(--mono);font-size:10.5px;white-space:nowrap;color:var(--dim);text-align:right;
overflow:hidden;text-overflow:ellipsis;cursor:help}
.pv-m .mtk .mtk-f{color:var(--faint)}
.pv-m .mtk.low,.pv-m .mtk.low .mtk-f{color:var(--warn)}
/* 重置时刻：一根条子一句，跟着它自己的窗口走。以前整格只说最早的那一个——可
「最早」通常是 5 小时窗口，而卡住人的往往是那条要等到周四的周额度，于是这一
格答的正好不是要问的那件事。四列定宽是为了上下行的数字对齐：两个右缘参差的
百分比，人会先去比长度，再发现比错了。 */
.pv-mnote{font-size:10.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
text-align:right;font-variant-numeric:tabular-nums}
.pv-mnote.dry{color:var(--bad)}
/* 读不到就是读不到：一根虚轨，不冒充 0 也不冒充满 */
.pv-mnone{display:grid;grid-template-columns:minmax(0,92px) minmax(56px,1fr);align-items:center;gap:10px;
font-size:11px;color:var(--faint)}
.pv-mnone i{height:5px;max-width:220px;border-radius:3px;grid-column:2;
background:repeating-linear-gradient(90deg,var(--faint-a34) 0 3px,transparent 3px 7px)}
.pv-mnone b{grid-column:1;font-weight:400;white-space:nowrap}
/* 压根没有额度这回事的线（密钥线按量计费）：一格静默的横杠，不是「读不到」 */
.pv-mna{color:var(--faint);opacity:.45;font-size:12px}
.readout{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:18px 16px;text-align:center;
box-shadow:inset 0 1px 3px var(--black-a22)}
.readout .rd-lbl{font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.readout .rd-code{font-family:var(--mono);font-size:30px;font-weight:700;letter-spacing:.02em;color:var(--brand-2);
text-shadow:0 0 18px var(--brand-a40);word-break:break-all;line-height:1.15}
.readout .rd-sub{font-size:12px;color:var(--dim);margin-top:10px}
.pair-flow{display:flex;align-items:center;justify-content:center;gap:9px;margin:16px 0 4px}
.pair-flow .hop{padding:6px 12px}
.pair-note{font-size:12.5px;color:var(--dim);line-height:1.55}
/* Codex has no pairing code to read out, so its wizard anchors on the three
steps instead — same readout frame, numbered rungs in place of the digits. */
.rd-steps{display:flex;flex-direction:column;gap:9px;text-align:left;counter-reset:rdstep}
.rd-steps li{display:flex;align-items:baseline;gap:10px;font-size:13px;color:var(--dim);list-style:none}
.rd-steps li::before{counter-increment:rdstep;content:counter(rdstep);flex:none;width:20px;height:20px;
border-radius:50%;border:1px solid var(--line);font-family:var(--mono);font-size:11px;font-weight:700;
color:var(--brand-2);display:flex;align-items:center;justify-content:center;transform:translateY(2px)}
.rd-steps li b{color:var(--text);font-weight:600}
/* ---- 授权链接读出屏 / AUTH LINK READOUT ----------------------------------
配对码一直是"物"——30px 等宽、能念出来、能对着屏幕核对。链接却藏在 hidden
input 里，只有两个按钮露在外面，其中"打开"还是实心主按钮。于是这一屏读起
来就是"点这里打开浏览器"，而对同时管着十几个订阅号的人来说，当前浏览器登
录的往往并不是要接的那个号——跨浏览器才是常态，不是退路。
所以链接也进读出屏：可见、可选中、可整条复制；下面两个动作**等权**，各自
带一句"什么时候用它"。两条并列的路，而不是主按钮加一个次要出口。 ---- */
.lnk{width:100%;font-family:var(--mono);font-size:12px;color:var(--brand-2);background:var(--surface-3);
border:1px solid var(--line);border-radius:9px;padding:10px 11px;text-align:left;cursor:text}
.lnk:focus{border-color:var(--brand-a55);
box-shadow:0 0 0 3px var(--brand-a16)}
/* 按钮和它的说明是一个单元——窄屏堆叠时必须一起走，否则两句说明会挤在两个
按钮下面，读者没法知道哪句配哪个。所以按单元建网格，而不是按行。 */
.lnk-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.lnk-act{display:flex;flex-direction:column;gap:7px}
.lnk-act .btn{width:100%}
.lnk-act span{font-size:11.5px;line-height:1.45;color:var(--faint);text-align:center}
.rd-div{height:1px;background:var(--line);margin:16px -16px 14px}
@media (max-width:480px){
.lnk-acts{grid-template-columns:1fr;gap:13px}
.lnk-act span{text-align:left}
}
/* ---- 代理粘贴回执与候选选择器 / PROXY PASTE RECEIPT + PICKER --------------
粘贴解析是这一屏唯一"有魔法"的动作，而魔法的风险是用户不知道刚才发生了
什么。所以每次解析都留一张回执：认出的是哪一条、填成了什么；并且一键可
撤销回粘贴前的值。有回执、可撤销的魔法才是好魔法。 ---- */
.px-lib{margin:0 0 8px}
.px-lib:empty{display:none}
.px-libsel{width:100%;min-width:0}
.px-rcpt{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--ok)}
.px-rcpt .v{font-family:var(--mono);color:var(--dim)}
.px-rcpt button{background:none;border:0;padding:0;color:var(--faint);font-size:12px;
text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.px-rcpt button:hover{color:var(--text)}
.px-pick{margin-top:9px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-3)}
.px-pick .hd{display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:8px 11px;font-size:12px;color:var(--dim);border-bottom:1px solid var(--line-soft)}
.px-pick .hd button{background:none;border:0;color:var(--faint);font-size:16px;line-height:1;cursor:pointer;padding:0 2px}
.px-pick .hd button:hover{color:var(--text)}
.px-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;background:none;border:0;
border-top:1px solid var(--line-soft);text-align:left;cursor:pointer;transition:background .12s}
.px-opt:first-of-type{border-top:0}
.px-opt:hover{background:var(--brand-dim)}
.px-opt:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.px-opt .nm{flex:0 0 auto;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-size:12.5px;font-weight:600;color:var(--text)}
.px-opt .ad{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.px-opt .tg{flex:none;font-size:11px;padding:2px 7px;border-radius:5px;background:var(--surface);color:var(--faint)}
.px-opt.no{cursor:not-allowed;opacity:.55}
.px-opt.no:hover{background:none}
.px-opt.no .tg{color:var(--bad)}
/* ---- 出口占用读数 / SHARED EXIT OCCUPANCY --------------------------------
一条出口上已经挂着谁。灯 + 地址 + 名单三段，读法沿用「池详单」那张摊平
的号单（.jack-row）——同一件事在两个地方长得不一样，是要人重新学一遍。
琥珀取自确认小牌（.cfm h4 .lamp）：这是提醒，不是拦截，红色留给不可逆。
名字前那颗灯按协议着色，因为「跟谁共用」这件事里，是不是同一家上游，比
共用本身更要紧——两个 Claude 号挤一个出口，和一个 Claude 一个 Codex 挤
一个出口，风险差着一个量级，而颜色一眼就说完了。 ---- */
.px-dup{margin-top:9px;border:1px solid var(--warn-a30);border-radius:10px;overflow:hidden;
background:var(--warn-a5);animation:jackin .16s cubic-bezier(.2,.8,.3,1)}
.px-dup .hd{display:flex;align-items:center;gap:8px;padding:8px 11px;font-size:12px;font-weight:600;color:var(--warn)}
.px-dup .hd .lamp{background:var(--warn);box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--warn-ahalo)}
.px-dup .hd .ad{margin-left:auto;min-width:0;font-family:var(--mono);font-size:11px;font-weight:500;
color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.px-dup .ln{display:flex;align-items:center;gap:9px;padding:7px 11px;border-top:1px solid var(--warn-a20)}
.px-dup .ln .lamp{width:8px;height:8px;background:var(--pc,var(--faint))}
.px-dup .ln .nm{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--text);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.px-dup .ln .tg{flex:none;font-size:11px;padding:2px 7px;border-radius:5px;background:var(--surface);color:var(--faint)}
.px-dup .ln .tg.off{opacity:.62}
.px-dup .ln.more{font-size:11.5px;color:var(--faint);padding-left:28px}
.px-dup .why{padding:8px 11px;border-top:1px solid var(--warn-a20);font-size:11.5px;line-height:1.55;color:var(--dim)}
.px-dup .why+.why{border-top-color:var(--line-soft);color:var(--faint)}
/* 弱档：同一台机器、另一组凭证。住宅代理按用户名分会话是常态，点亮琥珀会
让这块屏天天喊狼来了——所以它只是一段灰字，连边框都退到普通面板色。 */
.px-dup.soft{border-color:var(--line);background:var(--surface-3)}
.px-dup.soft .hd{color:var(--dim)}
.px-dup.soft .hd .lamp{background:var(--faint);box-shadow:none}
.px-dup.soft .why{border-top:0;padding-top:0;color:var(--faint)}
@media (prefers-reduced-motion:reduce){.px-dup{animation:none}}
.pair-done{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 0 4px;text-align:center}
.pair-done .chk{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
color:#fff;background:var(--ok);box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--ok-ahalo)}
.tok-line{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim);
background:var(--surface-3);border:1px solid var(--line);border-radius:9px;padding:9px 12px}
/* ---- protocol ports: a provider is one credential feeding N peer protocol
jacks. Each port is a card tinted by its protocol accent (--pc), with a lamp,
the protocol selector, and its own Base URL — no privileged "primary". ---- */
.ports-head{display:flex;align-items:center;justify-content:space-between}
.ports{display:flex;flex-direction:column;gap:10px}
.port{position:relative;background:var(--surface-3);border:1px solid var(--line);
border-left:3px solid var(--line);border-left:3px solid color-mix(in srgb,var(--pc,var(--faint)) 80%,var(--line));border-radius:11px;padding:11px 12px}
.port-top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.port-top .lamp{width:9px;height:9px;background:var(--pc,var(--faint));
box-shadow:0 0 var(--halo-blur) var(--halo-spread) color-mix(in srgb,var(--pc,var(--faint)) var(--halo-alpha),transparent)}
.port-proto{flex:1;font-weight:600;color:var(--text)}
.port-x{width:28px;height:28px;flex:none;border-radius:7px;background:transparent;border:1px solid transparent;
color:var(--faint);font-size:13px;transition:.14s}
.port-x:hover{color:var(--bad);border-color:var(--bad-a40);background:var(--bad-a9)}
.port input{margin-bottom:7px}
.port input:last-child{margin-bottom:0}
.port .pp{font-size:12.5px;color:var(--dim)}
/* 端口下的格式勾选。只有 openai 会出现——它一个协议名下面是两种线协议。 */
.port-fmts{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line)}
.pf-head{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--dim);margin-bottom:7px}
.pf-auto,.pf-manual{font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:5px}
.pf-auto{color:var(--dim);background:var(--surface)}
.pf-manual{color:var(--warn);background:var(--warn-a12)}
/* `.field label` 是块级 + 全大写的表单标签样式，这些格子是 label 但不是标签，
所以用同等特异性的选择器（且写在后面）把它按回行内芯片。 */
.port .pf-chip{display:inline-flex;align-items:center;gap:7px;margin:0 7px 6px 0;padding:5px 10px;cursor:pointer;
text-transform:none;letter-spacing:normal;border:1px solid var(--line);border-radius:9px;
background:var(--surface);transition:.14s}
.port .pf-chip.on{border-color:color-mix(in srgb,var(--pc,var(--faint)) 55%,var(--line));background:var(--surface-2)}
.port .pf-chip input{width:14px;height:14px;margin:0;flex:none}
.port .pf-chip b{font-size:12px;font-weight:600;color:var(--text)}
.port .pf-chip .mono{font-size:11px;color:var(--faint)}
/* ---- 出站代理输入组 / PROXY FIELD GROUP ----------------------------------
一条代理 URL 拆成五个格子。手拼 URL 的失败模式很单一也很贵：代理密码里
出现 / # ? 空格就整条解析不出来，percent 编码漏一次就是一条连不上的线，
而症状要到第一次真实调用才现形。分栏后编码归前端做，操作员只填自己知道的。
两行：协议 / 主机 / 端口，然后 用户名 / 密码。 ---- */
.pxrow{display:flex;gap:8px;align-items:center}
.pxrow+.pxrow{margin-top:8px}
.pxrow>*{min-width:0}
.px-proto{flex:0 0 112px;font-weight:600}
.px-host{flex:1 1 auto}
.px-port{flex:0 0 96px}
.px-user{flex:1 1 0}
.px-pw{flex:1 1 0;position:relative;display:flex}
.px-pw input{width:100%;padding-right:54px}
.px-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);padding:5px 8px;border-radius:7px;
background:transparent;border:0;color:var(--faint);font-size:12px;cursor:pointer;transition:color .14s,background .14s}
.px-eye:hover{color:var(--text);background:var(--text-a8)}
/* 窄屏：最长的值（主机）独占一行，协议和端口并排。gap 同时是行距，不另加 margin。 */
@media (max-width:520px){
.pxrow{flex-wrap:wrap}
.px-host{flex:0 0 100%;order:-1}
.px-proto{flex:1 1 auto}
.px-port{flex:0 0 116px}
.px-user,.px-pw{flex:0 0 100%}
}
/* cards grid */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:16px;box-shadow:var(--card-shadow)}
.card .top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.card .nm{font-family:var(--disp);font-weight:600;font-size:15px}
.card .url{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-top:9px;word-break:break-all}
/* 事故时钟：只有不通的线才有这一行，所以它一出现就是要读的 */
.card-when{margin-top:9px;font-size:11.5px;color:var(--bad);font-variant-numeric:tabular-nums}
.card .stats{display:flex;gap:16px;margin-top:13px;font-size:12.5px;color:var(--dim)}
.card .stats b{color:var(--text);font-weight:600;font-family:var(--mono)}
/* table */
/* ---- 模型目录：配线架上的价目板 ------------------------------------------
这一页要同时回答两个问题——「调什么、多少钱」和「谁在跑、赚不赚」。所以它不是
一张 CRUD 表：标识符、价格、流量三者各有自己的排版语言。
· 标识符走等宽，是这一行的锚点；
· 所有数字 tabular-nums 且不折行，右对齐成一把尺——比价靠的是小数点对齐，
不是读数；
· 官方价一条泳道，不再和已退役的售价 / 成本并列互抢注意力；
· 厂商与上下文窗口折进模型格当微标签，省下的两列宽度还给价格与流量。 */
.cat-rail{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;margin:0 0 14px;font-size:12px;color:var(--dim)}
.cat-rail b{font-family:var(--mono);color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.cat-rail span+span{padding-left:18px;border-left:1px solid var(--line)}
.cat-bar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:0 0 11px}
.cat-search{flex:1 1 220px;min-width:170px;position:relative}
.cat-search input{width:100%;padding:8px 12px 8px 31px;border-radius:9px;border:1px solid var(--line);
background:var(--surface-2);color:var(--text);font-size:13px;font-family:inherit}
.cat-search input:focus{outline:none;border-color:var(--brand-55-on-line)}
.cat-search::before{content:'';position:absolute;left:11px;top:50%;width:12px;height:12px;transform:translateY(-50%);
border:1.6px solid var(--faint);border-radius:50%;box-shadow:5px 5px 0 -4.2px var(--faint)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:transparent;
color:var(--dim);font-size:11.5px;cursor:pointer;white-space:nowrap;font-family:inherit}
.chip:hover{color:var(--text);border-color:var(--brand-40-on-line)}
.chip.on{color:var(--text);background:var(--brand-a15);
border-color:var(--brand-50-on-line)}
.chip .n{color:var(--faint);margin-left:5px;font-family:var(--mono);font-size:10.5px}
/* 发券台（增长 → 优惠券）：工具条一行、状态芯片一行、下面一张表。按人视图一人一行，
点行展开到每一张券（.cd-sub）。 */
.cd-head{padding:14px 16px 12px;display:grid;gap:10px}
.cd-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cd-tools input[type=search]{flex:1 1 220px;min-width:0;width:auto;padding:7px 12px;border-radius:var(--r-pill)}
.cd-tools .seg{margin-left:auto}
.cd-tools .seg button{flex:none;padding:6px 12px}
.cd-user{display:inline-flex;align-items:center;gap:4px;padding:4px 6px 4px 12px;border-radius:var(--r-pill);background:var(--brand-a15);font-size:12.5px}
.cd-user button{border:0;background:transparent;color:var(--dim);cursor:pointer;font-size:15px;line-height:1;padding:2px 6px;border-radius:var(--r-pill);font-family:inherit}
.cd-user button:hover{color:var(--text)}
.cd-who{display:inline-grid;line-height:1.3;vertical-align:middle}
.cd-who small{color:var(--faint);font-size:11.5px}
.cd-row{cursor:pointer}
.cd-row .cd-car{display:inline-block;width:1em;color:var(--faint);transition:transform .15s;margin-right:4px;vertical-align:middle}
.cd-row[aria-expanded="true"] .cd-car{transform:rotate(90deg)}
.cd-sub td{background:var(--brand-a5);padding-top:7px;padding-bottom:7px;font-size:13px}
.cd-sub td:first-child{padding-left:38px}
.cd-soon{color:var(--warn)}
.cd-num{background:transparent;border:0;padding:0;font:inherit;font-weight:600;color:var(--text);cursor:pointer;
text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.cd-num:hover{color:var(--brand-2);text-decoration-color:currentColor}
.cd-num:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.cd-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;color:var(--faint);font-size:12px;padding:10px 16px}
@media (prefers-reduced-motion:reduce){.cd-row .cd-car{transition:none}}
.cat-sort{flex:0 0 auto;width:auto;padding:8px 30px 8px 13px;border-radius:var(--r-pill);border:1px solid transparent;
background-color:var(--fill-4);color:var(--text);font-size:12.5px;font-family:inherit}
.cat-count{font-size:11.5px;color:var(--faint);margin-left:auto;font-family:var(--mono)}
#acat-tbl{table-layout:fixed;width:100%}
#acat-tbl thead th{position:sticky;top:0;z-index:2;background:var(--surface);
font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--dim);font-weight:600;
padding:9px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
#acat-tbl td{padding:9px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
#acat-tbl tbody tr:last-child td{border-bottom:none}
#acat-tbl tbody tr{transition:background .12s}
#acat-tbl tbody tr:hover{background:var(--brand-a5)}
#acat-tbl th.r,#acat-tbl td.r{text-align:right}
#acat-tbl td.fig{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12.5px}
/* 状态灯做成左轨：一行的健康度先于它的数字被看到，且不占一列宽度 */
#acat-tbl td.who{border-left:2px solid transparent;position:relative}
#acat-tbl tr.st-healthy td.who{border-left-color:var(--ok)}
#acat-tbl tr.st-degraded td.who{border-left-color:var(--warn)}
#acat-tbl tr.st-down td.who{border-left-color:var(--bad)}
#acat-tbl tr.st-unverified td.who{border-left-color:var(--line)}
.acat-id{font-family:var(--mono);font-size:13.5px;font-weight:600;letter-spacing:-.01em;cursor:pointer;
color:var(--text);display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.acat-id:hover{color:var(--brand-2)}
/* 有简介和没简介的行等高，否则整页的节奏会跟着上游文案的有无起伏 */
.idcell{min-height:46px;display:flex;flex-direction:column;justify-content:center}
.acat-desc{font-size:11.5px;color:var(--dim);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:440px}
.acat-tags{display:flex;align-items:center;gap:7px;margin-top:5px;flex-wrap:wrap}
.acat-vendor{font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--dim);font-weight:600}
.acat-ctx{font-family:var(--mono);font-size:10.5px;color:var(--dim);border:1px solid var(--line);
border-radius:5px;padding:1px 5px;line-height:1.5}
.acat-hidden{font-size:10px;color:var(--warn);border:1px solid var(--warn-a40);
border-radius:5px;padding:1px 5px}
/* 重名：不是错误，是「客户会看见两行长得一样」。用点线区别于隐藏那种实边框——
隐藏是已经做出的决定，重名是还等着人做决定。 */
.acat-twin{font-size:10px;color:var(--dim);border:1px dashed var(--line);
border-radius:5px;padding:1px 5px;cursor:help}
/* 门户范围条：这一页看得见全部，客户看得见的是它的子集。差额印在页顶而不是
逐行找，因为「少了什么」是一个总数问题——挨行看隐藏标记回答不了。 */
.cat-scope{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:12px;
padding:9px 13px;border:1px solid var(--line);border-radius:9px;font-size:12px;color:var(--dim)}
.cat-scope b{color:var(--text);font-weight:600}
.cat-scope .off,.cat-scope .off b{color:var(--warn)}
/* 分隔点：三段说的是三件事（范围 / 差额 / 影响面），挤在一行里没有边界就读成一句话 */
.cat-scope>span+span::before{content:'·';color:var(--faint);margin-right:11px}
.cat-scope .btn{margin-left:auto;padding:4px 11px;font-size:11.5px}
.scope-pick{display:flex;flex-direction:column;gap:2px;margin:10px 0 0}
.scope-pick label{display:flex;align-items:center;gap:9px;padding:7px 2px;font-size:13px;
border-bottom:1px solid var(--line);cursor:pointer}
.scope-pick label:last-child{border-bottom:0}
.scope-pick input{width:auto;margin:0}
.scope-pick .n{margin-left:auto;color:var(--faint);font-size:11.5px;font-family:var(--mono)}
/* 官方价：入价在前、出价在后，币种符号只写一次。从前这里是「售价在上、成本在下」
两行，两条泳道随人民币计量一起退役，剩下的一条就不必再分层了。 */
.px-sell{font-size:13px;color:var(--text);font-weight:600}
.px-sell i{font-style:normal;color:var(--faint);font-weight:400;padding:0 3px}
.px-sell .cur{font-size:11px;color:var(--faint);font-weight:400;margin-right:1px}
.px-out{font-weight:400;color:var(--dim)}
.px-none{color:var(--faint);font-size:12px;font-family:var(--sans)}
/* 电流条：一行的 30 天流量占比。对数刻度——0 次和 1 次的差别（这条线到底通不通
电）比 200 次和 400 次的差别更值得占像素，泳道流量那边同理。 */
.ampwrap{display:flex;align-items:center;gap:11px}
.amp{flex:1;min-width:40px;height:4px;border-radius:2px;background:var(--line-soft);overflow:hidden}
.amp>span{display:block;height:100%;background:linear-gradient(90deg,var(--brand-a55),var(--brand));border-radius:2px}
.ampn{flex:none;width:52px;text-align:right;font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.cat-legend{display:flex;flex-wrap:wrap;gap:7px 16px;margin:0 0 13px;font-size:11.5px;color:var(--faint)}
.cat-legend span{display:inline-flex;align-items:center;gap:6px}
.cat-legend .stq{width:3px;height:12px;border-radius:2px;background:var(--line);display:inline-block;flex:none}
.cat-legend .stq.ok{background:var(--ok)} .cat-legend .stq.warn{background:var(--warn)} .cat-legend .stq.bad{background:var(--bad)}
.cat-legend .hintq{color:var(--faint);opacity:.8}
.mg-quiet{color:var(--faint)}
.mg-pos{color:var(--ok)} .mg-neg{color:var(--bad)}
.serve{font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serve b{font-family:var(--mono);font-weight:600;color:var(--text);font-size:11.5px}
.serve .more{color:var(--faint)}
#acat-tbl td.mute{color:var(--faint)}
@media (max-width:1180px){
#acat-tbl .col-cost,#acat-tbl .col-mg{display:none}
}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--card-shadow)}
/* .panel 自己不带内边距——它装表格的次数远多于装别的，而表格要贴边。装一段文字或
表单时用这两块给它抬头和留白。以前这两个类只出现在 HTML 里、CSS 里根本没有，
于是标题和输入框直接压在边框上（窗口份额判据、抽屉里的拼车额度都是这么长的）。 */
.p-hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:15px 20px;
border-bottom:1px solid var(--line-soft);font-size:12.5px;color:var(--dim)}
.p-hd b{font-family:var(--disp);font-size:15px;font-weight:600;letter-spacing:-.012em;color:var(--text)}
.p-hd .mono{font-size:14px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
/* 抬头右端留给「什么时候的事」——到期日、时间戳这一类跟在标题后面读不通、
但又必须和标题同一行的东西。 */
.p-hd .faint{margin-left:auto;font-size:12px}
.p-bd{padding:16px 20px 20px}
.p-bd>.field:last-of-type{margin-bottom:0}
/* ---------- SETTINGS ---------- */
.set-panel{padding:20px 22px}
.set-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.set-grid .field{margin-bottom:0}
.set-grid label{display:flex;align-items:center;gap:8px}
.set-hint{font-size:11.5px;color:var(--faint);margin-top:6px;line-height:1.5}
.set-tag{font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--warn);background:var(--warn-a12);border:1px solid var(--warn-a30);border-radius:6px;padding:1px 6px;text-transform:none}
.set-foot{display:flex;align-items:center;gap:14px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft);flex-wrap:wrap}
.set-foot-note{font-size:12px;color:var(--dim)}
.set-secret{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.set-secret-state{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;margin-bottom:6px}
@media(max-width:720px){.set-grid{grid-template-columns:1fr}}
/* 站点域名：主域名一行只读、备用域名一格输入、每个域名一张小卡。卡片的内边距、
卡与卡之间的间距照抄 set-panel 里其他分组（16 / 12），代码块用等宽小字。 */
.dmn-primary{margin-bottom:16px}
.dmn-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0;font-size:13px}
.dmn-kv{display:inline-flex;gap:6px;align-items:baseline}
.dmn-kv em{font-style:normal;color:var(--faint);font-size:12px}
.dmn-primary code,.dmn-zone code{font-family:var(--mono);font-size:12px}
.dmn-zones{display:grid;gap:12px;margin-top:16px}
.dmn-zones:empty{display:none}
.dmn-zone{border:1px solid var(--line-soft);border-radius:var(--r-md);padding:14px 16px;background:var(--surface-2)}
.dmn-zone-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dmn-acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.dmn-hosts{margin:10px 0 0;font-size:12px;line-height:1.9;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.dmn-res{list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--line-soft);display:grid;gap:6px;font-size:12px}
.dmn-res li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.dmn-res li.bad span:last-child{color:var(--bad)}
.dmn-res.bad{color:var(--bad)}
.dmn-dot{width:7px;height:7px;border-radius:50%;background:var(--ok-fill);flex:none}
.dmn-res li.bad .dmn-dot{background:var(--bad-fill)}
/* 返佣三级比例。桌面和起付线 / 计酬期同一行宽，三格并排、沟仍是 16/20。
手机上这张表单本来就是一列（截图里 起付线 下面就是 计酬期），比例也
各占一整行，插在计酬期和挂账期之间，不要挤成三列小格。 */
.rb-rates{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 20px}
@media(max-width:720px){.rb-rates{grid-template-columns:1fr}}
/* ---------- 设置页 · 开关柜的分格 ----------------------------------------
这一页原本是十组参数首尾相连的一根五千像素长条，找一个开关的代价等于把
全部读一遍。分格之后代价换成了另一个问题——「看不见的那几格里有没有我该
知道的事」——所以这条轨同时承担导航和状态：琥珀点 = 那一格有开关正关着
（关着的开关是这套系统最贵的一类静默故障），玫红点 = 那一格此刻正在坏，
紫环 = 那一格有改了没存的字段。三种记号都直接从已加载的读数算，不另存状态。 */
/* 模块页签条：钉在顶栏 + 实时带下面（--topbar-lv-h 由 sxTopbarH 量出来），
全站只有这一条。按钮沿用原来设置页页签的样子（.sx-tab），记号也还是那三种：
琥珀 = 那一页有开关关着，玫红 = 那一页正在坏，紫环 = 那一页有没保存的改动。
窄屏时页签放不下就横向滑动，两端的渐隐告诉人那边还有。 */
.mt-bar{position:sticky;top:var(--topbar-lv-h,74px);z-index:4;display:flex;align-items:center;
padding:7px 22px;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid var(--line-soft)}
.mt-list{display:flex;align-items:center;gap:4px;min-width:0;flex:1;overflow-x:auto;scrollbar-width:none}
.mt-list::-webkit-scrollbar{display:none}
.mt-bar.fade-r .mt-list{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.mt-bar.fade-l .mt-list{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
.mt-bar.fade-l.fade-r .mt-list{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
/* 有没保存改动的页签：标签后面一个紫环（设置页的四格由 sxMark 自己画，不走这里） */
.sx-tab.has-dirty::before{content:'';order:9;width:8px;height:8px;border-radius:50%;flex:none;
border:1px solid var(--brand-a40);box-shadow:var(--shadow-1)}
/* 页签：胶囊。选中的那一个是一块浅填充、字加粗一档（macOS 26 工具栏里的页签），
不再用底部那根下划线——下划线在玻璃条上读起来像一道裂缝。 */
.sx-tab{position:relative;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;flex:none;
background:none;border-radius:var(--r-pill);font-family:var(--sans);font-size:13.5px;font-weight:500;letter-spacing:-.005em;color:var(--dim);
white-space:nowrap;transition:color .16s var(--ease),background-color .16s var(--ease)}
.sx-tab:hover{color:var(--text);background:var(--fill-4)}
.sx-tab:active{background:var(--fill-3)}
.sx-tab.on{color:var(--text);font-weight:600;background:var(--fill-3)}
.sx-tab.on::after{content:none}
.sx-tab:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:var(--r-pill)}
.sx-mark{width:6px;height:6px;border-radius:50%;flex:none;background:currentColor;
box-shadow:0 0 var(--halo-blur) var(--halo-spread) color-mix(in srgb,currentColor var(--halo-alpha),transparent)}
/* 记号插槽：JS 往里塞 .sx-mark 的落点。display:contents 让点直接成为页签的
flex 子项——嵌在普通 inline span 里的 6px 宽高会被整个无视，点就消失了。 */
.sx-markslot{display:contents}
.sx-mark.warn{color:var(--warn)} .sx-mark.bad{color:var(--bad)}
.sx-mark.dirty{width:8px;height:8px;color:var(--brand);background:none;
border:2px solid currentColor;box-shadow:none}
.sx-pane>.sec:last-child{margin-bottom:0}
/* 区标题：一个真正的中号标题 + 一行注解 + 一枚生效标记。原来这三件事挤在同一行
11px 全大写小字里，于是一张三行的表和一组十个阈值在版面上重量完全相同。 */
/* 子选择器写死到那一层：注解里会嵌 .mono 之类的行内 span，一条 .sx-head span
的后代规则会把它们也变成块，于是「sail login 签发的 Key」断成两行。 */
.sx-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:14px 16px;margin:0 0 13px}
/* 两栏放不下就换行，别硬挤在一行里。动作栏是 flex:none 永不收缩的，所以一行装
不下时收缩的只能是注解那一栏——而中文的 min-content 是「一个字」，注解会被
压成一列竖排的字，同时把动作栏顶出容器造成整页横向溢出。手机上的收款页就是
这么坏的（#topup-sec 在 760px 以下让搜索框占满一行，注解那栏当场只剩一个字宽）。
min-width:0 是给不可断的长串（Key、URL）留的：那种内容 min-content 比容器还宽，
不解开就换成动作栏被挤扁。 */
.sx-head>div:first-child{flex:1 1 auto;min-width:0}
.sx-head>div:first-child>b{display:block;font-family:var(--disp);font-size:15px;font-weight:600;letter-spacing:-.005em}
.sx-head>div:first-child>span{display:block;font-size:12px;color:var(--faint);margin-top:5px;line-height:1.6;max-width:84ch}
.sx-act{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;flex:none;max-width:100%}
/* 生效标记。这一页上真正会伤人的从来不是填错一个数，是不知道这个数什么时候开始
作用于线上流量——所以它单独成一枚记号，颜色沿用信号灯：绿=此刻就变、
琥珀=要重启、玫红=按下去有人被踢下线。 */
.sx-when{flex:none;margin-top:1px;font-size:10.5px;font-weight:600;letter-spacing:.04em;
padding:3px 10px;border-radius:999px;white-space:nowrap;
color:var(--ok);background:var(--ok-a12);border:1px solid var(--ok-a26)}
.sx-when.warn{color:var(--warn);background:var(--warn-a12);border-color:var(--warn-a30)}
.sx-when.bad{color:var(--bad);background:var(--bad-a12);border-color:var(--bad-a26)}
.sx-when.mute{color:var(--faint);background:var(--surface-2);border-color:var(--line)}
/* 直接坐在面板上的说明是段落，不是字段注释：它没有栅格替它收边，于是在宽屏上
一行能拉到一百五十个字，读到行尾就找不回下一行的行首。字段里的那些不用管，
两列栅格已经把它们收在一个能读的宽度里了。 */
.set-panel>.set-hint,.set-panel>.sx-why{max-width:92ch}
.set-panel .toggle+.dim{max-width:92ch}
.sx-pane>.sec>.hint{max-width:92ch}
/* 面板里的小节题。一条从标签延出去的细线——分组是这条线画的，不是靠空行。 */
.sx-grp{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:.02em;
text-transform:uppercase;color:var(--dim);margin:24px 0 13px}
.sx-grp:first-child{margin-top:0}
.sx-grp::after{content:'';flex:1;height:1px;background:var(--line-soft)}
/* 折起来的是「它当初为什么会存在」，不是「你现在需要知道什么」。后者一律留在
外面——把操作事实折进抽屉，等于把这一页的注释写成了装饰。 */
.sx-why{margin-top:10px;font-size:11.5px;color:var(--faint);line-height:1.65}
.sx-why>summary{cursor:pointer;color:var(--dim);font-weight:500;list-style:none;
display:inline-flex;align-items:center;gap:7px;padding:2px 0}
.sx-why>summary::-webkit-details-marker{display:none}
.sx-why>summary::before{content:'';width:5px;height:5px;flex:none;
border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
transform:rotate(-45deg);transition:transform .18s ease}
.sx-why[open]>summary::before{transform:rotate(45deg)}
.sx-why>summary:hover{color:var(--text)}
.sx-why>summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.sx-why p{margin:9px 0 0;max-width:92ch}
/* 保存条。一个 POST 装着两格的字段，所以保存键不能待在任何一格里面——它浮在页
底，只在真有改动时出现，并且说出这一次会送走哪几格。 */
.sx-save{position:sticky;bottom:14px;z-index:3;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
margin-top:10px;padding:13px 16px;border-radius:var(--r-xl);background:var(--surface);
border:1px solid var(--brand-a40);box-shadow:var(--shadow-1)}
body.is-viewer .sx-save .btn:not(.ghost){opacity:.45;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
.sx-save{animation:rise .28s cubic-bezier(.22,.61,.25,1) both}
}
@media (max-width:860px){
.mt-bar{padding:2px 8px 0}
.sx-tab{padding:0 12px;font-size:13px;min-height:44px}
.sx-save{bottom:calc(14px + 74px + env(safe-area-inset-bottom))}
}
/* ---------- 日志归档 ----------
三段流水读作一条链：盘上压着什么 → 昨夜送走了什么 → 元数据还留多久。
刻意不是三个并列的统计格：中间那两个箭头是这一格存在的理由——正文必须
离开本机，一个只报「已上传 N 个」的面板回答不了「盘要满了吗」。 */
.arc-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:0;
min-width:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface-2)}
.arc-stage{padding:15px 17px;display:flex;flex-direction:column;gap:7px;min-width:0}
.arc-stage+.arc-stage{border-left:1px solid var(--line-soft)}
.arc-k{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--dim);
display:flex;align-items:center;gap:7px}
.arc-v{font-family:var(--disp);font-size:23px;font-weight:600;letter-spacing:-.02em;line-height:1.05;
font-variant-numeric:tabular-nums;color:var(--text)}
.arc-v small{font-size:12.5px;color:var(--dim);font-weight:500;letter-spacing:0}
.arc-sub{font-size:11.5px;color:var(--dim);line-height:1.5;overflow-wrap:anywhere}
.arc-sub b{color:var(--text);font-weight:600}
.arc-sub .warnv{color:var(--warn);font-weight:600}
.arc-sub .badv{color:var(--bad);font-weight:600}
.arc-sub .okv{color:var(--ok);font-weight:600}
/* 箭头指向数据流动的方向，不是装饰：正文只会往桶里走，不会回来。 */
.arc-arrow{display:flex;align-items:center;justify-content:center;padding:0 3px;color:var(--faint);
background:var(--surface-3);border-left:1px solid var(--line-soft);border-right:1px solid var(--line-soft)}
.arc-arrow svg{width:15px;height:15px}
.arc-off .arc-v,.arc-off .arc-sub{color:var(--faint)}
.arc-sep{height:1px;background:var(--line-soft);margin:22px 0 18px}
.arc-fail{margin-top:12px;border:1px solid var(--bad-a32);background:var(--bad-a12);border-radius:10px;
padding:11px 14px;font-size:12px;color:var(--text);line-height:1.6}
.arc-fail b{color:var(--bad)}
.arc-days{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.arc-day{display:flex;align-items:center;gap:10px;font-size:12px;padding:7px 12px;border-radius:9px;
background:var(--surface-2);border:1px solid var(--line-soft)}
.arc-day .mono{font-size:11.5px;color:var(--dim)}
.arc-day .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:820px){
.arc-flow{grid-template-columns:1fr}
.arc-stage+.arc-stage{border-left:none;border-top:1px solid var(--line-soft)}
/* 竖排时只把箭头图标转下来，格子仍是一条横分隔。整格和卡片一样宽，
整格转 90° 会立成一根竖条，盖住每段正文的后半句。 */
.arc-arrow{border-left:none;border-right:none;border-top:1px solid var(--line-soft);padding:5px 0;background:transparent}
.arc-arrow svg{transform:rotate(90deg)}
}
/* ---------- 主机资源 / 资源告警 ----------
左边一根条回答「用了多少」，右边三格回答「会不会用完」。条上的细刻度是提醒
档位：看得见下一次飞书会在哪里响。 */
.hr-top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,2fr);gap:0;
border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface-2)}
.hr-main{padding:16px 18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.hr-src{margin-left:auto;font-size:10.5px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--faint)}
.hr-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-left:1px solid var(--line-soft)}
.hr-stats>div{padding:16px 17px;display:flex;flex-direction:column;gap:7px;min-width:0}
.hr-stats>div+div{border-left:1px solid var(--line-soft)}
.hr-sv{font-family:var(--disp);font-size:19px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--text)}
.hr-sv small{font-size:12px;color:var(--dim);font-weight:500}
.hr-sv .badv{color:var(--bad)}
.hr-bar{position:relative;display:block;height:8px;border-radius:4px;background:var(--faint-a14);overflow:hidden}
.hr-bar>span{display:block;height:100%;border-radius:4px;background:var(--brand-a60);transition:width .5s cubic-bezier(.22,.61,.36,1)}
.hr-bar>span.ok{background:var(--ok-fill)} .hr-bar>span.warn{background:var(--warn-fill)} .hr-bar>span.bad{background:var(--bad-fill)}
.hr-bar>i{position:absolute;top:0;bottom:0;width:1.5px;background:var(--surface-2);opacity:.9}
.hr-bar.sm{height:5px;width:120px;flex:none}
.hr-days{display:flex;align-items:flex-end;gap:3px;height:56px;margin-top:16px;padding:0 2px}
.hr-days>span{flex:1;max-width:44px;height:100%;display:flex;align-items:flex-end;min-width:0}
.hr-days>span>i{display:block;width:100%;border-radius:3px 3px 1px 1px;background:var(--brand-a60)}
.hr-days>span:hover>i{background:var(--text)}
.hr-days-ax{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.hr-warn{margin-top:12px;border:1px solid var(--warn-a40);background:var(--warn-a12);border-radius:10px;
padding:11px 14px;font-size:12px;color:var(--text);line-height:1.6}
.hr-warn b{color:var(--warn)}
.hr-cal{display:flex;flex-direction:column;gap:2px}
/* ---------- 源站 IP ----------
沿用主机资源那一套读数块（hr-top / hr-days），柱子上加一条告警线。DNS 每个
站点域名一块面板，表格和出口状态页同一种（ei-tbl）。 */
#oip-alerts{display:flex;flex-direction:column;gap:12px}
#oip-alerts:not(:empty){margin-bottom:24px}
#oip-alerts>.hr-warn{margin:0}
.oip-ip{font-family:var(--mono);font-size:19px;line-height:1.35;letter-spacing:0}
.oip-stats-1{grid-template-columns:minmax(0,1fr)}
.hr-sv .warnv{color:var(--warn)}
.oip-ports{font-family:var(--mono);font-size:15px}
.oip-bars{position:relative}
.oip-bars>span>i.bad{background:var(--bad-fill)}
.oip-line{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--bad-a40);pointer-events:none}
#oip-dns{display:flex;flex-direction:column;gap:16px}
#oip-dns>.hr-warn{margin:0}
.oip-act{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap}
.oip-act>div:first-child{flex:1 1 320px;min-width:0}
.oip-act-r{display:flex;align-items:center;gap:10px;flex:none}
.oip-zone-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.oip-zone-head>b{font-family:var(--disp);font-size:14px;font-weight:600}
.oip-ssl{margin-left:auto;font-size:12px;color:var(--dim)}
.oip-ssl.bad{color:var(--bad);font-weight:600}
/* 两个站点域名各一张表，列宽定死才上下对齐。窄屏由 ei-tblwrap 横向滚动。 */
.oip-tbl{table-layout:fixed;min-width:880px}
.oip-tbl td{vertical-align:middle}
.oip-c-role{width:96px} .oip-c-st{width:108px} .oip-c-cloud{width:80px} .oip-c-act{width:200px}
.oip-tbl td>code{overflow-wrap:anywhere}
.oip-perm{margin-top:14px}
.oip-to{font-family:var(--mono);font-size:12px;overflow-wrap:anywhere}
.oip-acts{text-align:right;white-space:nowrap}
.oip-acts>*+*{margin-left:6px}
.oip-acts>.faint{font-size:12px}
.oip-after{margin-top:-8px;font-size:12.5px;color:var(--dim)}
.oip-after>summary{cursor:pointer;color:var(--text);font-weight:500}
.oip-after>ul{margin:10px 0 0;padding-left:20px;line-height:1.75}
/* 资源告警页顶上那一行本月用量：和运行节点页用同一个 sdHostTraffic，这里它是
面板的第一行，不要那条分隔线。 */
.hr-now>.sd-host-traffic{margin-top:0;padding-top:0;border-top:0}
/* 日志归档设置页顶上那一行现状（完整流水在主机资源页）。 */
.arc-now{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--text)}
.sd-gauges.hr-gauges{margin-top:0;padding-top:0;border-top:0}
.sd-host-traffic{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:13px;
border-top:1px solid var(--line-soft);font-size:12px}
.sd-ht-v{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
.sd-ht-sub{color:var(--dim);flex:1;min-width:0}
.sd-ht-sub .badv{color:var(--bad);font-weight:600} .sd-ht-sub .warnv{color:var(--warn);font-weight:600}
/* 节点流量：一台服务器一格，铺成自适应的网格。每格只有这台自己的数；全体相同的话
（合计、重置时间、未设额度、读数偏低）在页眉页脚各说一次。整格可点，打开设置。 */
.sd-nt{padding-bottom:16px}
.sd-nt .sd-deck-hd{align-items:center;margin-bottom:12px}
.sd-nt-meta{display:flex;align-items:center;gap:6px;min-width:0}
.sd-nt-meta .sd-deck-r{white-space:normal}
.sd-nt-meta .sd-deck-r span{white-space:nowrap}
.sd-nt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:8px}
.sd-nt-tile{display:flex;flex-direction:column;gap:6px;min-width:0;padding:10px 12px;border-radius:12px;text-align:left;
background:var(--fill-4);border:1px solid transparent;font-size:12px;color:var(--text);
transition:background .14s ease,border-color .14s ease}
.sd-nt-tile:hover{background:var(--fill-3)}
.sd-nt-tile:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sd-nt-tile.warn{border-color:var(--warn-a40)} .sd-nt-tile.bad{border-color:var(--bad-a40)}
.sd-nt-l1{display:flex;align-items:baseline;gap:6px;min-width:0}
.sd-nt-k{flex:0 1 auto;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-nt-k .fl{margin-right:5px}
.sd-nt-more{margin-left:4px;font-size:11px;font-weight:500;color:var(--dim)}
.sd-nt-dot{flex:none;align-self:center;width:6px;height:6px;border-radius:50%;background:var(--warn-fill)}
.sd-nt-v{flex:none;margin-left:auto;font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}
.sd-nt-l2{display:flex;align-items:center;gap:8px}
.sd-nt-l2 .hr-bar{flex:1;height:5px}
.sd-nt-l2 em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.sd-nt-l3{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 8px;font-size:11px;color:var(--dim);
font-variant-numeric:tabular-nums;line-height:1.45}
.sd-nt-l3 span{white-space:nowrap}
.sd-nt-l3 .badv{color:var(--bad);font-weight:600}
.sd-nt-foot{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:12px;font-size:11.5px;color:var(--faint);line-height:1.5}
.sd-nt-foot .warnv{color:var(--warn)}
/* 网络连通：一个节点一行，列照请求走的路排（节点自身 | 出口）。行和表头都用 subgrid
共享同一组列，竖着扫一列能看出是不是全队同一段坏了。窄屏换成一台一张小卡。 */
.sd-nx{padding-bottom:16px}
.sd-nx .sd-deck-hd{align-items:center;margin-bottom:12px}
.sd-nx-meta{white-space:normal;text-align:right}
.sd-nx-meta span{white-space:nowrap}
.sd-nx-meta .okv{color:var(--ok);font-weight:600}
.sd-nx-meta .badv{color:var(--bad);font-weight:600}
.sd-nx-meta .warnv{color:var(--warn);font-weight:600}
.sd-nx-cause{display:flex;align-items:center;gap:10px;padding:9px 13px;margin-bottom:12px;border-radius:12px;
border:1px solid var(--bad-a40);background:var(--bad-a7);font-size:12.5px;line-height:1.5;color:var(--text)}
.sd-nx-cause.warn{border-color:var(--warn-a40);background:var(--warn-a5)}
.sd-nx-cause.warn .sd-todo-i{background:var(--warn-a12);color:var(--warn)}
.sd-nx-g{display:grid;font-size:12px;
grid-template-columns:minmax(108px,1fr) minmax(132px,1.1fr) repeat(3,minmax(80px,.78fr)) minmax(104px,.9fr) minmax(172px,1.45fr) minmax(88px,.82fr)}
.sd-nx-grp,.sd-nx-hd,.sd-nx-r{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center}
.sd-nx-grp span{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--dim);padding:0 8px 5px;
border-bottom:1.5px solid var(--line)}
.sd-nx-grp span:first-child{border-bottom:0}
.sd-nx-grp .a{grid-column:2/6;margin-right:6px}
.sd-nx-grp .b{grid-column:6/9;margin-left:6px}
.sd-nx-h{padding:7px 8px 7px;font-size:11px;font-weight:500;color:var(--faint);white-space:nowrap;min-width:0;
overflow:hidden;text-overflow:ellipsis;cursor:default}
.sd-nx-h em{font-style:normal;font-family:var(--mono);font-size:10.5px;margin-left:6px;color:var(--dim);
font-variant-numeric:tabular-nums}
.sd-nx-h em.badv{color:var(--bad);font-weight:600} .sd-nx-h em.warnv{color:var(--warn);font-weight:600}
.sd-nx-r{border-top:1px solid var(--line-soft);border-radius:8px;cursor:pointer;transition:background .14s ease}
.sd-nx-r:hover{background:var(--fill-4)}
.sd-nx-r:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.sd-nx-r>*{padding:7px 8px;min-width:0}
/* 一台多账号服务器的几行装在一个浅底框里（和下面的卡片框同一个意思）：框头一行写服务器名、
共用的地址和这台的连通情况，框里的行地址只印端口。框也是 subgrid，列和框外的行对齐；
框的边框让名字那一列往里缩一点，正好表示「属于这台」。 */
.sd-nx-box{display:grid;grid-column:1/-1;grid-template-columns:subgrid;margin:6px 0;
border:1px solid var(--line);border-radius:12px;background:var(--faint-a5)}
.sd-nx-box+.sd-nx-r{border-top:0}
.sd-nx-bh{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;cursor:pointer;
border-radius:11px 11px 0 0;transition:background .14s ease}
.sd-nx-bh:hover{background:var(--fill-4)}
.sd-nx-bh:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.sd-nx-bh>*{padding:8px 8px;min-width:0}
.sd-nx-bh .sd-nx-n b{font-weight:700}
.sd-nx-ic{display:inline-flex;flex:none;width:15px;height:15px;color:var(--dim)}
.sd-nx-ic svg{width:100%;height:100%}
.sd-nx-bs{grid-column:3/-1;display:flex;flex-wrap:wrap;gap:2px 0;font-size:11.5px;color:var(--dim)}
.sd-nx-bs>span+span::before{content:"·";color:var(--faint);margin:0 7px}
.sd-nx-bs .okv{color:var(--ok);font-weight:600} .sd-nx-bs .badv{color:var(--bad);font-weight:600}
.sd-nx-bs .warnv{color:var(--warn);font-weight:600}
.sd-nx-box>.sd-nx-r:last-child{border-radius:0 0 11px 11px}
/* 框里的账号名往里缩到框头名字下面（和框外各行名字左边对齐），一眼看出它们挂在这台下面。 */
.sd-nx-box .sd-nx-r>.sd-nx-n{padding-left:27px}
/* 节点自身和出口之间那条竖线：表头、每一行都画在出口的第一格左边。 */
.sd-nx-hd>:nth-child(6),.sd-nx-r>:nth-child(6){box-shadow:inset 1px 0 var(--line-soft);padding-left:12px}
.sd-nx-r.bad{background:var(--bad-a7)}
.sd-nx-r.bad:hover{background:var(--bad-a12)}
.sd-nx-r.off{opacity:.5}
.sd-nx-n{display:flex;align-items:center;gap:6px;min-width:0}
.sd-nx-n b{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-nx-n .fl{flex:none}
.sd-nx-addr{display:flex;align-items:baseline;gap:1px;white-space:nowrap;overflow:hidden}
.sd-nx-addr code,.sd-nx-ipc code{font-family:var(--mono);font-size:11.5px;color:var(--text);font-variant-numeric:tabular-nums;
overflow:hidden;text-overflow:ellipsis}
.sd-nx-addr em,.sd-nx-c em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.sd-nx-addr .sd-nx-tag{margin-right:6px}
.sd-nx-c{display:flex;align-items:center;gap:6px;white-space:nowrap;font-family:var(--mono);font-size:11.5px;
font-variant-numeric:tabular-nums;color:var(--text)}
.sd-nx-c i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--faint)}
.sd-nx-c b{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sd-nx-c.ok i{background:var(--ok-fill)}
.sd-nx-c.warn i{background:var(--warn-fill)}
.sd-nx-c.warn b{color:var(--warn)}
.sd-nx-c.bad i{background:var(--bad-fill)}
.sd-nx-c.bad b{color:var(--bad);font-weight:600}
.sd-nx-c.stale i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--faint)}
.sd-nx-c.stale b,.sd-nx-c.stale code{color:var(--faint)}
.sd-nx-c.none{font-family:var(--sans);color:var(--faint)}
.sd-nx-c.none i{display:none}
.sd-nx-ipc code{cursor:copy;padding:1px 4px;margin-left:-4px;border-radius:5px}
.sd-nx-ipc code:hover{background:var(--fill-3)}
.sd-nx-tag{flex:none;font-family:var(--sans);font-size:10.5px;font-weight:600;line-height:1.5;padding:0 6px;
border-radius:999px;background:var(--fill-3);color:var(--dim)}
.sd-nx-tag.warn{background:var(--warn-a12);color:var(--warn)}
.sd-nx-why{grid-column:2/-1;padding:0 8px 8px!important;margin-top:-4px;font-size:11.5px;line-height:1.5;color:var(--dim);
white-space:normal}
.sd-nx-why::before{content:'↳';margin-right:6px;color:var(--faint)}
.sd-nx-why.bad{color:var(--bad)} .sd-nx-why.warn{color:var(--warn)}
.sd-nx-more{grid-column:1/-1;justify-self:start;margin:2px 0 0;padding:8px 8px;border:0;border-top:1px solid var(--line-soft);
width:100%;text-align:left;background:none;font-size:11.5px;color:var(--dim);cursor:pointer;border-radius:0}
.sd-nx-more:hover{color:var(--text)}
.sd-nx-foot{margin-top:10px}
.sd-nx-lg{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.sd-nx-lg i{width:7px;height:7px;border-radius:50%;margin-left:7px}
.sd-nx-lg i:first-child{margin-left:0}
.sd-nx-lg i.ok{background:var(--ok-fill)} .sd-nx-lg i.warn{background:var(--warn-fill)}
.sd-nx-lg i.bad{background:var(--bad-fill)} .sd-nx-lg i.stale{box-shadow:inset 0 0 0 1.5px var(--faint)}
@media(max-width:900px){
.sd-nx .sd-deck-hd{align-items:flex-start}
.sd-nx-meta{text-align:left}
.sd-nx-grp,.sd-nx-hd{display:none}
.sd-nx-g{display:block}
.sd-nx-r{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 10px;padding:11px 6px}
.sd-nx-r>*{padding:0}
.sd-nx-r>:nth-child(6){box-shadow:none;padding-left:0}
.sd-nx-n{grid-column:1/3}
.sd-nx-addr{grid-column:3;justify-content:flex-end}
.sd-nx-c{flex-wrap:wrap;row-gap:2px}
.sd-nx-c::before{content:attr(data-k);flex:none;width:100%;font-family:var(--sans);font-size:10.5px;color:var(--faint)}
.sd-nx-why{grid-column:1/-1;margin-top:0;padding:0!important}
.sd-nx-box{display:block;margin:8px 0;padding:0 6px}
.sd-nx-bh{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:10px 6px}
.sd-nx-bh>*{padding:0}
.sd-nx-box .sd-nx-r>.sd-nx-n{padding-left:0}
}
/* 设置抽屉：一台一块，四个输入排一行。 */
.ntm-batch,.ntm-m{padding:14px 12px;margin:0 -12px;border-top:1px solid var(--line-soft)}
.ntm-batch{margin-top:16px;margin-bottom:6px;border:0;border-radius:12px;background:var(--fill-4)}
.ntm-batch+.ntm-m{border-top:0}
.ntm-m.on{border-radius:12px;background:var(--brand-dim);border-top-color:transparent}
.ntm-m.on+.ntm-m{border-top-color:transparent}
.ntm-hd{display:flex;align-items:baseline;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;margin-bottom:10px}
.ntm-hd b{font-size:13px;font-weight:600;color:var(--text);min-width:0;overflow-wrap:anywhere}
.ntm-hd b .fl{margin-right:5px}
.ntm-hd span{font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.ntm-g{display:grid;grid-template-columns:1fr 76px 1.15fr 1fr;gap:8px}
.ntm-g label{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:11px;color:var(--faint)}
.ntm-g input,.ntm-g select{padding:7px 10px;font-size:13px}
.ntm-g select{padding-right:26px}
.ntm-g .btn{justify-content:center;padding:7px 10px;font-size:13px}
.ntm-warn,.ntm-sub,.ntm-err{font-size:11.5px;line-height:1.5;margin-top:8px}
.ntm-warn{color:var(--warn)} .ntm-sub{color:var(--faint)} .ntm-err{color:var(--bad)} .ntm-err:empty{display:none}
.ntm-clear{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;color:var(--dim)}
@media(max-width:820px){
/* 窄屏上说明独占一行，否则会被挤成一列两三个字宽。 */
.sd-host-traffic .sd-ht-sub{flex:none;width:100%;order:5}
.sd-host-traffic .btn{margin-left:auto}
}
@media(max-width:900px){
/* 页眉在这个宽度竖排（.sd-deck-hd）：合计靠左，设置入口靠右。 */
.sd-nt .sd-deck-hd{align-items:stretch}
.sd-nt-meta{justify-content:space-between}
}
@media(max-width:560px){
.sd-nt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.sd-nt-tile{padding:10px}
.ntm-g{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
.hr-top{grid-template-columns:1fr}
.hr-stats{border-left:none;border-top:1px solid var(--line-soft);grid-template-columns:1fr}
.hr-stats>div+div{border-left:none;border-top:1px solid var(--line-soft)}
}
/* ---------- 管理员 · 名册与权限档位 ----------------------------------------
原来这一格是一张五列的表：一行人、四个列头、右边一片没有列头的按钮，宽屏上
四百多像素是空的。表是用来比数的，这一格比的是权限——所以列头全部撤掉，名册
摊成号单（读法沿用池详单的 .jack-row：灯 + 人 + 右侧读数），省下的宽度还给
「这个档能做什么」那一句，于是一行人自己就说得清，不用再去下面对图例。
下面那块原本是一段四行的灰色小字，是这一格最值钱、排版上却最轻的东西。它现在
按后端真正的切法摆成三栏（roles.go 是按爆炸半径切的：运营一张白名单，白名单
之外一律归所有者）。三档只有一根轴——伸得多深——所以用同一支紫的三级台阶表示，
不另发三种颜色：发了颜色等于说这是三类东西，而它们是一条线上的三段。
运营那一栏比另外两栏多一块「碰不到」。权限面板通常只印 can；而真要把运营档
交出去的人，问的是 cannot。三栏因此不等高，最重的一栏正好是实际最常发的那档。 */
.aa-rack{display:flex;flex-direction:column}
/* 档位、最近登录、操作三个轨定宽，名字吃掉全部富余：这一行的主语是人，右边那一
簇是对这个人能做的事，两者之间空着是对的。原来那张表空的是最后一列的右边——
一列没有列头的按钮后面还挂着四百像素，那不是留白，是版面裂了。 */
.aa-row{display:grid;grid-template-columns:10px minmax(0,1fr) 156px 112px 300px;
gap:0 16px;align-items:center;padding:14px 18px;border-top:1px solid var(--line-soft);
transition:background .14s ease}
.aa-row:first-child{border-top:none}
.aa-row:hover{background:var(--surface-2)}
.aa-who{display:flex;align-items:center;gap:8px;min-width:0}
.aa-who>b{font-family:var(--disp);font-size:14.5px;font-weight:600;letter-spacing:-.005em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aa-me{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.03em;padding:2px 7px;border-radius:999px;
color:var(--brand-2);background:var(--brand-dim);border:1px solid var(--brand-a30)}
.aa-off{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.03em;padding:2px 7px;border-radius:999px;
color:var(--faint);background:var(--faint-a12);border:1px solid var(--faint-a22)}
.aa-tf{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.03em;padding:2px 7px;border-radius:999px;
color:var(--warn);background:var(--warn-a12);border:1px solid var(--warn-a22)}
.aa-tf.on{color:var(--ok);background:var(--ok-a12);border-color:var(--ok-a26)}
/* 「要求两步验证」是对整张名册生效的一条规则，所以放在名册上面，不混进某一行。 */
.aa-req{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;margin:0 0 12px}
.aa-req-t{min-width:0}
.aa-req-t b{display:block;font-size:13.5px;font-weight:600}
.aa-req-t span{display:block;font-size:12px;line-height:1.5;color:var(--faint);margin-top:3px}
/* 账户与安全抽屉：上半段两步验证，下半段改密码。 */
.tf-sec{padding:0 0 18px;margin:0 0 18px;border-bottom:1px solid var(--line-soft)}
.tf-head{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-size:14px;font-weight:600;margin:0 0 12px}
.tf-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.tf-row .tf-head{margin:0}
.tf-row .hint{margin:6px 0 0;line-height:1.55}
.tf-state{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.03em;padding:2px 7px;border-radius:999px;
color:var(--faint);background:var(--faint-a12)}
.tf-state.on{color:var(--ok);background:var(--ok-a12)}
.tf-acts{display:flex;justify-content:flex-end;gap:8px}
/* 贴在名字后面的一句是这一档的理由，不是它的清单——清单在下面三栏里，抄两遍
只会让人以为那是两件不同的事。 */
.aa-reach{min-width:0;font-size:12px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aa-seen{font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--dim);white-space:nowrap}
.aa-seen.never{color:var(--faint)}
.aa-acts{text-align:right;white-space:nowrap;font-size:0}
.aa-acts>*{margin-left:6px}
/* 停用的号压暗但不撤走：撤走之后「他还在不在名册上」只能去数据库里问。 */
.aa-row.off .aa-who>b,.aa-row.off .aa-reach,.aa-row.off .aa-seen{color:var(--faint)}
/* 档位选择器。原来它是一个裸 select 坐在 110px 的表格列里，「所有者」被裁成两个
半字——一个决定权限的控件读不全，比难看贵得多。 */
.aa-sel{position:relative;display:inline-flex;align-items:center;gap:9px;height:34px;padding-left:11px;
background:var(--input-bg);border:1px solid var(--input-line);border-radius:10px;
transition:border-color .14s ease,background .14s ease}
.aa-sel:hover{border-color:var(--brand-40-on-input-line)}
.aa-sel:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-dim)}
.aa-sel select{appearance:none;-webkit-appearance:none;border:none;background:transparent;box-shadow:none;
height:32px;width:100%;padding:0 24px 0 0;font-size:12.5px;font-weight:600;color:var(--text);cursor:pointer}
.aa-sel select:focus{outline:none;box-shadow:none}
.aa-sel::after{content:'';position:absolute;right:11px;top:50%;width:5.5px;height:5.5px;margin-top:-4.5px;
border-right:1.6px solid var(--faint);border-bottom:1.6px solid var(--faint);transform:rotate(45deg);pointer-events:none}
/* 自己那一档改不动：虚线边 + 没有小箭头，是「这里本来能拨」和「这一个拨不了」的区别。 */
.aa-sel.locked{background:var(--surface-2);border-style:dashed}
.aa-sel.locked::after{display:none}
.aa-sel select:disabled{opacity:1;color:var(--dim);cursor:default}
/* 台阶：三格递增，亮起几格就是这一档伸到多深。名册和下面的档位卡共用同一枚，
所以那三栏同时就是这份名册的图例，不用再写一行「紫色表示……」。 */
.aa-deep{display:inline-flex;align-items:flex-end;gap:2px;flex:none;height:12px}
.aa-deep i{width:3px;border-radius:1.5px;background:var(--faint-a30)}
.aa-deep i:nth-child(1){height:5px} .aa-deep i:nth-child(2){height:8.5px} .aa-deep i:nth-child(3){height:12px}
.aa-deep.d2 i:nth-child(-n+2),.aa-deep.d3 i{background:var(--brand)}
.aa-deep.d1 i:nth-child(1){background:var(--faint)}
/* start 而不是 stretch：三栏本来就不一样重，拉平之后只读那栏会空出半张卡，
看着像少了点什么——而它确实没有别的可说。 */
.aa-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px;align-items:start}
.aa-tier{border:1px solid var(--line);border-radius:var(--r-xl);padding:15px 16px 16px;background:var(--surface)}
.aa-tier.own{border-color:var(--brand-38-on-line);background:var(--brand-a5)}
.aa-tk{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.aa-tk>b{font-family:var(--disp);font-size:13.5px;font-weight:600;letter-spacing:-.005em}
.aa-tier.own .aa-tk>b{color:var(--brand-2)}
.aa-tw{margin:0 0 12px;font-size:12px;color:var(--dim);line-height:1.7}
/* 域名单是一串小牌子，不是竖着的 bullet：竖列会让「运营能碰八件事」在版面上重过
「所有者能碰七件事」，而这两串本来一样重。也不用间隔点——折行时那个点会掉到
下一行的行首，读起来就成了一个凭空出现的项目符号。 */
.aa-list{display:flex;flex-wrap:wrap;gap:6px}
.aa-list span{white-space:nowrap;font-size:12px;padding:3px 9px;border-radius:7px;
background:var(--surface-2);border:1px solid var(--line-soft);color:var(--text)}
.aa-tier.own .aa-list span{background:var(--surface);border-color:var(--brand-32-on-line)}
/* 「碰不到」用虚线，不用红。红在这套系统里是「此刻正在坏」；权限的边界不是故障，
它是一条画好的线。虚线沿用这一页别处「没接上」的写法（.ptag i.bridged / .tr-blank）。 */
.aa-no{margin-top:13px;padding-top:12px;border-top:1px dashed var(--line)}
.aa-no>b{display:block;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
color:var(--dim);margin-bottom:6px}
.aa-no .aa-list span{background:transparent;border:1px dashed var(--faint-a42);color:var(--faint)}
.aa-foot{margin-top:15px;font-size:12px;color:var(--faint);line-height:1.75;max-width:92ch}
/* 抽屉里发档位：三张牌摞着，不是一个下拉。发号是这三档唯一一次被真正选中的时刻，
而下拉把选项藏在点开之后——藏起来的东西没法在按下之前被比较。 */
.aa-picks{display:flex;flex-direction:column;gap:7px}
.aa-pick{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:11px 13px;
border:1px solid var(--line);border-radius:11px;background:var(--surface-2);color:var(--dim);
font:inherit;cursor:pointer;transition:color .14s ease,background .14s ease,border-color .14s ease}
.aa-pick:hover{color:var(--text);border-color:var(--brand-40-on-line)}
.aa-pick.on{color:var(--text);background:var(--brand-dim);border-color:var(--brand-a50)}
.aa-pick:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.aa-pick>b{flex:none;min-width:42px;font-family:var(--disp);font-size:13px;font-weight:600}
.aa-pick>span{min-width:0;font-size:11.5px;line-height:1.55}
@media(max-width:1080px){
/* 先撤名字后面那句——它是这一行里唯一可以由下面三栏代答的东西。 */
.aa-reach{display:none}
}
@media(max-width:900px){
.aa-tiers{grid-template-columns:1fr}
.aa-row{grid-template-columns:10px minmax(0,1fr) auto;gap:11px 12px;padding:15px 14px}
.aa-who{grid-column:2/4}
.aa-sel{grid-column:2;justify-self:start}
.aa-seen{grid-column:3;text-align:right}
.aa-acts{grid-column:2/4;text-align:left}
.aa-acts>*{margin:0 6px 0 0}
}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--line-soft);font-size:13px;vertical-align:middle}
/* 表头：一行次级小字——不全大写、不加字距、不铺底色，只靠下面那根线和上面的
内容分开（macOS 表格的列头）。底色给成台面色而不是透明：吸顶的表头要盖住
从它底下滚过去的行。 */
th{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--dim);background:var(--surface);white-space:nowrap;border-bottom-color:var(--line)}
td{font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:none}
tbody tr{transition:background-color .12s var(--ease)}
tbody tr:hover{background:var(--fill-4)}
/* 操作列保持真正的表格单元格：display:flex 会把它挤出表格布局，行底色只铺到
倒数第二列就断掉——平时看不出来，给行上色（如熔断行）时那道白缝很扎眼。
font-size:0 吃掉按钮间的空白文本节点，按钮各自的字号不受影响。 */
.row-actions{text-align:right;white-space:nowrap;font-size:0}
.row-actions>*{margin-left:6px}
.row-actions>*:first-child{margin-left:0}
/* compact icon actions — labels live in title/aria, so the column never crushes a CJK word into a vertical stack */
.row-actions .btn,.line-act .btn{flex:none}
.btn.icon{width:30px;height:30px;padding:0;justify-content:center;border-radius:50%}
/* 图标不参与伸缩：按页面调过 .btn.sm 内边距的规则（比如触屏块的 8px 13px）会
落到 .sm.icon 上，36px 的按钮只剩 8px 内容宽，图标被压成 8px 的一个点。 */
.btn.icon svg{width:15px;height:15px;flex:none}
.btn.ghost.icon{color:var(--dim);background:transparent;border-color:transparent}
.btn.ghost.icon:hover{color:var(--text);background:var(--fill-3)}
.btn.danger.icon{color:var(--dim);background:transparent;border-color:transparent} /* delete stays quiet until you reach for it */
.btn.danger.icon:hover{color:var(--bad);background:var(--bad-a12)}
/* 空态：一枚托盘图标 + 一句话（HIG 的空态：说清楚这里为什么是空的、下一步做什么） */
.empty{padding:36px 24px;text-align:center;color:var(--dim);font-size:13px;line-height:1.6}
.empty::before{content:"";display:block;width:30px;height:30px;margin:0 auto 10px;background:var(--faint);opacity:.7;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3.5 13.5 6.1 5.6A2.3 2.3 0 0 1 8.3 4h7.4a2.3 2.3 0 0 1 2.2 1.6l2.6 7.9'/%3E%3Cpath d='M3.5 13.5V18a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2v-4.5h-4.8a2.7 2.7 0 0 1-5.4 0z'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3.5 13.5 6.1 5.6A2.3 2.3 0 0 1 8.3 4h7.4a2.3 2.3 0 0 1 2.2 1.6l2.6 7.9'/%3E%3Cpath d='M3.5 13.5V18a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2v-4.5h-4.8a2.7 2.7 0 0 1-5.4 0z'/%3E%3C/svg%3E") center/contain no-repeat}
/* 状态码：胶囊形的着色小章 */
.status-pill{font-family:var(--mono);font-size:12px;font-weight:600;padding:2px 9px;border-radius:var(--r-pill)}
.s2xx{color:var(--ok);background:var(--ok-a12)}
.s4xx{color:var(--warn);background:var(--warn-a12)}
.s5xx,.s0{color:var(--bad);background:var(--bad-a11)}
/* toggle：iOS 的开关——开是绿色、关是灰色轨道，白色圆钮带一层投影，弹簧滑过去 */
.toggle{position:relative;display:inline-block;width:44px;height:26px;flex:none}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle .slide{position:absolute;inset:0;background:var(--fill-2);border:0;border-radius:999px;cursor:pointer;transition:background-color .25s var(--ease)}
.toggle .slide::before{content:"";position:absolute;width:22px;height:22px;left:2px;top:2px;border-radius:50%;background:#fff;
box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16),0 0 0 .5px rgba(0,0,0,.04);transition:transform .32s var(--spring)}
.toggle input:checked + .slide{background:var(--ok-fill)}
.toggle input:checked + .slide::before{transform:translateX(18px)}
.toggle input:focus-visible + .slide{outline:2px solid var(--focus);outline-offset:2px}
.toggle input:disabled + .slide{opacity:.45;cursor:default}
/* segmented：分段控件——一条灰色胶囊轨道，选中的那段是一块抬起来的白（深色是灰） */
.seg{display:flex;gap:2px;padding:2px;border-radius:var(--r-pill);background:var(--fill-3)}
.seg button{flex:1;padding:7px 9px;border-radius:var(--r-pill);background:transparent;border:0;color:var(--text);font-weight:500;font-size:13px;
transition:background-color .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease)}
.seg button:hover{background:var(--fill-4)}
.seg button.on{background:var(--ctl-on-bg);box-shadow:var(--ctl-on-ring);color:var(--text);font-weight:600}
.seg button:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
/* ---------- ROUTING BOARD (the patchbay) ---------- */
.rgroup{margin-bottom:24px}
.rgroup-head{display:flex;align-items:center;gap:11px;padding:0 2px 11px}
.rgroup-head .lbl{font-size:12.5px;color:var(--dim)}
.rgroup-head .count{font-size:11px;color:var(--faint);margin-left:auto}
.lines{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--card-shadow)}
.line{display:grid;grid-template-columns:208px 1fr 128px auto;gap:16px;align-items:center;
padding:14px 18px;border-bottom:1px solid var(--line-soft)}
.line:last-child{border-bottom:none}
.line:hover{background:var(--surface-2)}
.line.add{cursor:pointer;color:var(--faint)}
.line.add:hover{color:var(--brand-2)}
.line-jack{display:flex;flex-direction:column;gap:7px;min-width:0}
.kind-chip{display:inline-flex;align-items:center;font-size:11px;font-weight:600;letter-spacing:0;
text-transform:none;padding:2px 9px;border-radius:var(--r-pill);width:fit-content}
.kind-default{color:var(--brand-2);background:var(--brand-dim)}
.kind-model{color:var(--dim);background:var(--surface-3)}
.kind-pattern{color:var(--warn);background:var(--warn-a12)}
.line-match{font-family:var(--mono);font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.line-match.muted{color:var(--faint)}
.line-act{display:flex;gap:7px;justify-content:flex-end}
/* 窄屏先收窄读数柱，再让它整条落到通路下面横过来——最后被牺牲的是纸带，
因为「多少」和「出没出事」是要带走的结论，「什么时候」是可以回头再看的。
两条规则都排在 .route / .line 的定义之后，靠源码顺序生效。 */
@media (max-width:1240px){
.route{grid-template-columns:190px 1fr 132px;gap:14px}
.line{grid-template-columns:176px 1fr 116px auto;gap:12px}
}
@media (max-width:1000px){
.route,.line{grid-template-columns:1fr}
.lane-read{flex-direction:row;align-items:center;gap:12px}
.lane-read .lane-tape{display:none}
}
.hop.hop-missing{border-color:var(--bad);border-style:dashed;background:transparent}
.hop.hop-missing .hop-name{color:var(--bad)}
/* 停用的上游：灰灯 + 压暗 + 划掉名字。和「已不存在」区分开——那是错误（红），
这是有意为之（静音），但同样都不是能接住流量的一跳。 */
.hop.hop-off{border-style:dashed;background:transparent;opacity:.62}
.hop.hop-off .hop-name{color:var(--faint);text-decoration:line-through;text-decoration-color:var(--faint)}
.hop.hop-off .hop-alias{color:var(--faint)}
.hop-off-flag{font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--faint);
border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.path-empty{color:var(--faint);font-size:12.5px}
.chain-hint{font-size:11.5px;color:var(--faint);margin:0 0 6px}
/* 复制来的规则：抽屉顶上引一条边，说清这份表单是从哪抄来的。定义排在 .chain-hint
之后，同权重后来居上——两个类同时挂在一个 上，靠的就是这个顺序。 */
.copy-from{font-size:12px;color:var(--dim);background:var(--brand-dim);
border-left:2px solid var(--brand-2);border-radius:0 8px 8px 0;
padding:9px 11px;margin:0 0 14px;line-height:1.6}
.copy-from b{color:var(--text);font-family:var(--mono);font-size:11.5px;font-weight:600}
/* ---------- 故障切换链编辑器 · 配线架的正面 ----------
顺序就是优先级，所以顺序必须看得见：每一跳挂在一条竖直母线上，1 号是点亮的
实心插孔（主选），往下是空心备用；两跳之间那截线上写着「接不住 ↓」——这是
串行的失败下切，不是并联。母线末端明写「都接不住 → 请求被拒」，因为
chain_exhausted 是日志里真会出现的结局，配线的时候就该看见它。
每跳一张卡：上排上游占满整行（长模型名不再被截成半个词），下排是从属的
「传输方式 · 改写模型名」——不填就该像没填，填了才亮。 */
.chain-rows{display:flex;flex-direction:column;gap:28px}
.hoprow{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start}
/* 往下的那截线和那句话由「上一跳」自己拥有——拖拽重排后依然对。最后一跳也画线：
它下面接的是「添加下一跳」那个虚线插孔，母线不该断在半路。 */
.hoprow::before{content:"";position:absolute;left:10px;top:27px;bottom:-28px;width:2px;border-radius:2px;
background:var(--brand-a45)}
.hoprow:not(:last-child)::after{content:"失败时 ↓";position:absolute;left:32px;bottom:-25px;height:22px;
display:flex;align-items:center;font-size:10.5px;letter-spacing:.06em;color:var(--faint)}
.hop-jack{width:22px;height:22px;border-radius:50%;flex:none;margin-top:8px;
display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;font-weight:600;
background:var(--surface);border:1.5px solid var(--brand-38-on-line);color:var(--dim)}
.hoprow:first-child .hop-jack{background:var(--brand);border-color:var(--brand);color:var(--btn-ink);
box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--brand-ahalo)}
.hop-card{min-width:0;display:flex;flex-direction:column;gap:6px;padding:9px 10px;
background:var(--surface-2);border:1px solid var(--line);border-radius:12px;transition:border-color .14s}
.hop-card:focus-within{border-color:var(--brand-55-on-line)}
.hop-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.hop-sel{padding:8px 10px;border-radius:8px;font-size:13px;font-weight:500}
.hop-tools{display:flex;gap:4px;flex:none}
.hop-tools button,.hop-grip{width:26px;height:30px;border-radius:7px;flex:none;background:var(--surface-3);
border:1px solid var(--line);color:var(--dim);display:flex;align-items:center;justify-content:center;font-size:13px;transition:.12s}
.hop-tools button:hover{color:var(--text);border-color:var(--brand)}
.hop-grip{cursor:grab;user-select:none;font-size:12px;letter-spacing:-1px}
.hop-grip:hover{color:var(--text);border-color:var(--brand)}
.hop-grip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.hop-del:hover{color:var(--bad)!important;border-color:var(--bad)!important}
/* 均衡组：并联的几跳不是「接不住才轮到」，而是同时在用。所以这段母线换成实心的
一条粗线、连接词从「接不住 ↓」换成「同组分流」——一条链画成上下相接的顺序表，
对一段并联的成员来说是一句谎话，而看着这张图配线的人会照着谎话去排优先级。 */
.hoprow.peer-next::after{content:"同组分流 ⇉";color:var(--brand-78-on-dim)}
.hoprow.peer-next::before{background:var(--brand-a78);width:3px;left:9.5px}
.hoprow.peer .hop-jack{background:var(--brand-16-on-surface);
border-color:var(--brand-70-on-line);color:var(--brand);font-size:12px}
.hoprow.peer .hop-card{border-color:var(--brand-34-on-line)}
.hop-grp{width:26px;height:30px;border-radius:7px;flex:none;background:var(--surface-3);
border:1px solid var(--line);color:var(--faint);display:flex;align-items:center;justify-content:center;
font-size:13px;transition:.12s}
.hop-grp:hover{color:var(--text);border-color:var(--brand)}
.hop-grp.on{background:var(--brand-15-on-surface-3);
border-color:var(--brand-65-on-line);color:var(--brand)}
.hoprow.dragging{opacity:.45}
.hoprow.dragging .hop-grip{cursor:grabbing}
/* 从属行：默认状态（透传 + 不改写）只留一句浅字，点开才换出真控件——
一条链上四跳大多是默认，四行灰底空控件比四个浅字吵得多。 */
.hop-more{align-self:flex-start;background:transparent;border:none;padding:1px 0;font-size:11px;
color:var(--faint);border-bottom:1px dashed transparent;transition:color .13s,border-color .13s}
.hop-more:hover{color:var(--brand-2);border-bottom-color:var(--brand-a45)}
.hop-more:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:3px}
.hop-sub{display:flex;align-items:center;gap:6px}
.hop-sub>*{background:transparent;border:1px solid transparent;border-radius:7px;padding:4px 6px;font-size:11.5px;color:var(--dim)}
.hop-tf{width:auto;flex:none;cursor:pointer}
.hop-tf:hover{background:var(--surface-3)}
.hop-tf.on{color:var(--brand-2);background:var(--brand-dim);border-color:var(--brand-a35);font-weight:600}
.hop-rw{flex:1;min-width:0;font-family:var(--mono);border-bottom-color:var(--line)}
.hop-rw:hover{border-bottom-color:var(--faint)}
.hop-rw.on{color:var(--text)}
.hop-rw:focus{background:var(--input-bg);border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-dim)}
/* 母线的下端：先接一个虚线插孔（加一跳），再落到终止端子（都接不住的结局） */
.chain-add,.chain-end{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:center}
.chain-add{margin-top:28px}
.chain-add .hop-jack{margin-top:0;border-style:dashed;color:var(--faint)}
.chain-add .btn{justify-self:start}
.chain-end{margin-top:22px}
.chain-end::before{content:"";position:absolute;left:10px;top:-22px;height:22px;width:2px;
background:repeating-linear-gradient(180deg,var(--line) 0 3px,transparent 3px 7px)}
.chain-end-cap{width:22px;height:2px;background:var(--faint);border-radius:2px;opacity:.7}
.chain-end-txt{font-size:11px;color:var(--faint)}
/* 抬头与「怎么写」：正文一行说清顺序语义，写法细则收进可展开的注释卡 */
.chain-lead{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:18px 0 9px}
.chain-lead label{margin-bottom:0}
.chain-lead .sub{font-size:11.5px;color:var(--faint)}
.chain-doc{margin:0 0 18px;border:1px solid transparent;border-radius:10px;overflow:hidden;transition:border-color .16s,background .16s}
.chain-doc[open]{border-color:var(--line-soft);background:var(--surface-2)}
.chain-doc>summary{list-style:none;cursor:pointer;width:fit-content;padding:5px 9px 5px 7px;border-radius:8px;
font-size:11.5px;color:var(--faint);display:flex;align-items:center;gap:7px}
.chain-doc[open]>summary{width:auto;border-radius:0}
.chain-doc>summary::-webkit-details-marker{display:none}
.chain-doc>summary::before{content:"?";width:15px;height:15px;border-radius:50%;flex:none;font-size:10px;font-weight:700;
display:flex;align-items:center;justify-content:center;background:var(--surface-3);color:var(--faint)}
.chain-doc>summary::after{content:"▾";margin-left:8px;font-size:10px;color:var(--faint);transition:transform .16s}
.chain-doc[open]>summary::after{margin-left:auto}
.chain-doc>summary:hover{color:var(--text);background:var(--surface-2)}
.chain-doc>summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.chain-doc[open]>summary{color:var(--text);border-bottom:1px solid var(--line-soft)}
.chain-doc[open]>summary::after{transform:rotate(180deg)}
.chain-doc dl{margin:0;padding:11px 12px 13px;font-size:11.5px;line-height:1.65;color:var(--faint)}
.chain-doc dt{color:var(--text);font-weight:600;margin-top:10px}
.chain-doc dt:first-child{margin-top:0}
.chain-doc dd{margin:2px 0 0}
.chain-doc code{font-family:var(--mono);font-size:11px;background:var(--surface-3);border-radius:4px;padding:1px 4px;color:var(--dim)}
/* ---------- ROUTING CHANNELS (专属通道 · 配线架上的另一层跳线) ----------
同一台机箱、同一批上游，只是换一层跳线：所以通道选择器做成配线架的物理卡口，
选中的那格向下咬住工作区（底边与面板同色，缺口连成一体）。
通道视图里，标准路由的规则以「幽灵线」虚线呈现——看得见继承，才敢改。 */
.chan-bay{display:flex;align-items:center;gap:5px;flex-wrap:wrap;
padding-bottom:11px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.chan-tab{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:9px;
background:var(--surface-2);border:1px solid transparent;
color:var(--dim);font-size:12.5px;font-weight:500;transition:color .14s,background .14s,border-color .14s}
.chan-tab:hover{color:var(--text);background:var(--surface-3)}
.chan-tab.on{background:var(--brand-dim);color:var(--brand-2);font-weight:600;
border-color:var(--brand-a45)}
.chan-tab:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.chan-tab .chan-n{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.chan-tab.on .chan-n{color:var(--brand-2);opacity:.8}
.chan-tab.off{opacity:.5}
.chan-tab.off .chan-name{text-decoration:line-through;text-decoration-thickness:1px}
.chan-add{padding:8px 13px;border-radius:9px;background:transparent;border:1px dashed var(--line);
color:var(--faint);font-size:12.5px;transition:.14s;margin-left:5px}
.chan-add:hover{color:var(--brand-2);border-color:var(--brand-50-on-line)}
.chan-add:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* 选中通道的抬头：它是谁、怎么落线、谁在用 */
.chan-head{background:var(--card-grad);border:1px solid var(--line);border-radius:var(--r-xl);
padding:16px 18px;margin-bottom:22px;box-shadow:var(--card-shadow)}
.chan-head-top{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.chan-title{font-family:var(--disp);font-size:15px;font-weight:600;color:var(--text)}
.chan-head-act{margin-left:auto;display:flex;gap:7px}
.chan-bind{font-size:11.5px;color:var(--dim)}
.chan-bind b{font-family:var(--mono);font-weight:600;color:var(--text)}
.chan-note{font-size:12px;color:var(--faint);margin:9px 0 0;line-height:1.55}
.chan-modes{display:flex;align-items:center;gap:6px;margin-top:14px;flex-wrap:wrap}
.chan-modes .seg{flex:none}
.chan-modes .seg button{flex:none;padding:6px 14px;font-size:12px;border-radius:8px}
/* 选中态直接穿上该模式的颜色，和标题旁的徽章说同一件事：切断了多少流量 */
.seg button.m-prefer.on{color:var(--ok);background:var(--ok-a13);
border-color:var(--ok-a45)}
.seg button.m-override.on{color:var(--warn);background:var(--warn-a13);
border-color:var(--warn-a45)}
.seg button.m-only.on{color:var(--bad);background:var(--bad-a12);
border-color:var(--bad-a45)}
.mode-why{font-size:11.5px;color:var(--dim);line-height:1.55;margin:10px 0 0;max-width:70ch}
/* 模式徽章的颜色就是它切断了多少流量：绿=不切、琥珀=部分、红=全切 */
.mode-chip{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;letter-spacing:.06em;
padding:2px 8px;border-radius:6px;white-space:nowrap}
.mode-prefer{color:var(--ok);background:var(--ok-a12)}
.mode-override{color:var(--warn);background:var(--warn-a12)}
.mode-only{color:var(--bad);background:var(--bad-a11)}
/* 幽灵线：这条规则不属于本通道，是从标准路由继承下来的 */
.lines.ghosted .line.inherited{background:repeating-linear-gradient(135deg,
transparent 0 7px,var(--faint-a5) 7px 14px)}
.line.inherited .line-match,.line.inherited .kind-chip{opacity:.72}
.line.inherited .hop{border-style:dashed;background:transparent}
.line.inherited .wire{opacity:.6}
.line.cut{opacity:.5}
.line.cut .path{text-decoration:line-through;text-decoration-color:var(--bad);text-decoration-thickness:1px}
/* 停用的规则：行还在（链、顺序、备注都留着），但解析时当它不存在——所以压暗，
不划掉：划掉是「被切断」的读法，那是模式决定的，不是这个开关扳的。 */
.line.off .line-jack,.line.off .path{opacity:.42}
.inherit-flag{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;letter-spacing:.06em;
color:var(--faint);white-space:nowrap}
.inherit-flag::before{content:"";width:12px;height:1px;flex:none;
background:repeating-linear-gradient(90deg,var(--faint) 0 3px,transparent 3px 6px)}
.line.cut .inherit-flag{color:var(--bad)}
/* 通道在密钥 / 用户表里的印记 */
.chan-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
padding:3px 9px;border-radius:999px;color:var(--brand-2);background:var(--brand-dim);white-space:nowrap}
.chan-chip.inherit{color:var(--dim);background:var(--surface-3);font-weight:500}
.chan-chip.inherit::before{content:"↳";font-weight:600;color:var(--faint)}
/* 绑定通道的选择器：把横着的配线架竖过来，一行一个卡口。
下拉框把通道压成一行没有形状的字，看不见落线方式、规则数和停用状态，
一个通道都没有时更是只剩孤零零一个默认项——像坏了。这里全部摊开。 */
.chan-pick{display:flex;flex-direction:column;gap:6px}
/* position:relative 让藏起来的单选框以这一格为定位参照。没有它，单选框的参照是
整个抽屉，点一个靠下的选项时浏览器把焦点滚进视野，滚走的是抽屉本身，
标题和正文被推出去、只剩一片白（2026-10-24）。 */
.chan-pick .cp-opt{position:relative;display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;
background:var(--surface-2);border:1px solid var(--line);cursor:pointer;
transition:background .14s,border-color .14s}
.chan-pick .cp-opt:hover{background:var(--surface-3);border-color:var(--brand-32-on-line)}
.chan-pick input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
/* 插上的那一格：左沿亮起一根跳线头 */
.chan-pick .cp-opt::before{content:"";flex:none;width:3px;align-self:stretch;border-radius:2px;
background:transparent;transition:background .14s}
.chan-pick .cp-opt:has(input:checked){background:var(--brand-dim);
border-color:var(--brand-a50)}
.chan-pick .cp-opt:has(input:checked)::before{background:var(--brand-2)}
.chan-pick .cp-opt:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.cp-body{flex:1;min-width:0}
.cp-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:600;color:var(--text)}
.chan-pick .cp-opt:has(input:checked) .cp-name{color:var(--brand-2)}
.cp-sub{font-size:11.5px;color:var(--faint);line-height:1.5;margin-top:3px}
.cp-n{flex:none;font-family:var(--mono);font-size:10.5px;color:var(--faint);white-space:nowrap}
/* 分组头：API 模式和拼车模式不是并列的两个选项，是两种生意——一个按官方价从
额度扣，一个按月买座位。摊在同一张平表里选，等于让人在「哪张路由表」和「几人
车」之间二选一，而这两个问题根本不在一个层面上。 */
.cp-grp{display:flex;align-items:baseline;gap:8px;margin:14px 3px 2px;font-size:11.5px;
font-weight:700;color:var(--dim)}
.cp-grp:first-child{margin-top:0}
.cp-grp span{font-weight:500;font-size:11px;color:var(--faint)}
/* 车型是算出来的，通道自己的名字降一级挂在后面 */
.cp-alias{font-size:11px;font-weight:500;color:var(--faint)}
/* 拼车那一格不是选项，是事实：他买了什么、坐在哪、到什么时候。所以它长得
不像单选框——没有卡口、没有左沿跳线头，一眼看出来这里不接受输入。 */
.cp-seatcard{border:1px solid var(--line);border-radius:10px;padding:12px 13px;background:var(--surface-2)}
.cp-seatcard.none{border-style:dashed;background:transparent}
.cp-seatcard.warn{border-color:var(--warn-a50,var(--line));background:var(--surface-2)}
.cp-seatcard .cs-t{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text)}
.cp-seatcard.none .cs-t{color:var(--dim)}
.cp-seatcard.warn .cs-t{color:var(--warn)}
.cp-seatcard .cs-s{font-size:11.5px;color:var(--faint);line-height:1.55;margin-top:4px}
.cp-seatcard .cs-chip{font-size:10px;font-weight:600;padding:2px 6px;border-radius:5px;
color:var(--ok);background:var(--ok-dim,var(--surface-3))}
.cp-seatcard .btn{margin-top:9px}
/* 用户表里的通道列：拼车的人显示车型，和手工绑的通道分得开 */
.chan-chip.car{color:var(--brand-2);background:var(--brand-dim)}
.cp-opt.off .cp-name span:first-child{text-decoration:line-through;text-decoration-thickness:1px}
.cp-opt.off{opacity:.62}
/* 一个通道都没有：这不是错误，是还没开始 */
.chan-empty{border:1px dashed var(--line);border-radius:12px;padding:16px 17px;background:var(--surface-2)}
.chan-empty .ce-t{font-size:13px;font-weight:600;color:var(--text);margin:0}
.chan-empty .ce-b{font-size:12px;color:var(--faint);line-height:1.6;margin:7px 0 13px;max-width:52ch}
@media (max-width:860px){
.chan-bay{gap:4px;padding-bottom:9px;margin-bottom:15px}
.chan-head{padding:14px}
.chan-head-act{margin-left:0;width:100%}
.chan-bind{width:100%}
.line.inherited .inherit-flag{margin-top:-2px}
}
/* ---------- MODEL HEALTH ---------- */
.hbar-row{display:flex;align-items:center;justify-content:space-between;gap:14px 22px;flex-wrap:wrap;margin-bottom:18px}
.hlegend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--dim)}
.hlegend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}
/* time-window selector — segments of one continuous look-back axis; the active
segment lifts off the track instead of glowing (light mode used to smear) */
.hwin{display:flex;align-items:center;gap:12px;min-width:0}
/* 标签就是标签 —— 这里曾经挂着一个发光圆点，长得像选中的 radio 却不可点 */
.hwin-lbl{display:inline-flex;align-items:center;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--dim);flex:none}
/* 时间窗 / 结果：分段控件（灰色胶囊轨道 + 抬起来的选中块） */
.winsel{display:inline-flex;align-items:stretch;background:var(--fill-3);border:0;border-radius:var(--r-pill);padding:2px}
.winsel button{position:relative;padding:6px 15px;border-radius:var(--r-pill);background:transparent;color:var(--text);font-weight:500;font-size:12.5px;white-space:nowrap;
transition:color .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease)}
.winsel button+button{margin-left:2px}
.winsel button:not(.on):hover{background:var(--fill-4)}
.winsel button.on{color:var(--text);font-weight:600;background:var(--ctl-on-bg);box-shadow:var(--ctl-on-ring)}
.winsel button:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.htiles{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:22px}
.hcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(345px,1fr));gap:14px}
.hcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:15px 16px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--card-shadow)}
.hcard.attn{border-color:var(--bad-42-on-line)}
.hcard.warn{border-color:var(--warn-36-on-line)}
.hc-head{display:flex;align-items:center;gap:9px;min-width:0}
.hc-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--faint)}
.dot-healthy{background:var(--ok);box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--ok-ahalo)}
.dot-degraded{background:var(--warn);box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--warn-ahalo)}
.dot-down{background:var(--bad);box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--bad-ahalo);animation:blink 1s steps(2,start) infinite}
.dot-idle{background:var(--faint)}
.hc-name{font-family:var(--disp);font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hbar{display:flex;height:8px;border-radius:5px;overflow:hidden;background:var(--surface-3)}
.hbar>span{display:block;height:100%;min-width:1px}
.seg-ok{background:var(--ok)} .seg-rl{background:var(--warn)} .seg-auth{background:#fb923c}
.seg-5xx{background:var(--bad)} .seg-tx{background:#9f1239} .seg-brk{background:#c2410c} .seg-cl{background:var(--faint)}
[data-theme=light] .seg-auth{background:#ea7317}
/* ---------- 模型健康 · 走纸记录仪 (strip chart) ----------
这屏只回答三件事：谁不可信 / 什么时候开始 / 证据是什么。所以版面按风险分配，
不按模型数量分配 —— 出事的展开成证据，正常的收成一行，24h 无流量的折成一句话。
两条纪律：
1) 板上没有绿色。健康是无色的，颜色出现本身就是警报；品牌紫只表达「选中」，
永不表达数据（旧版迹线用品牌紫画成功、可用条用绿画成功，同一概念两种色）。
2) 纸带全表同刻度 —— 每张卡各自归一化时，n=0 的柱子会比 n=47 的还高。 */
.tb{--ink:var(--text-a46);
--id-w:198px;--rate-w:74px;--lat-w:70px;--note-w:190px;--pad:16px;
max-width:1560px}
.tb-lead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 30px;flex-wrap:wrap;margin:0 0 18px}
.tb-say{font-family:var(--disp);font-size:19px;font-weight:600;letter-spacing:-.022em;line-height:1.4;margin:0;color:var(--text);min-width:0}
.tb-say.calm{font-weight:500;color:var(--dim)}
.tb-say b{font-weight:700}
.tb-say .mk{border-bottom:1px solid var(--line);cursor:pointer}
.tb-say .mk:hover{border-bottom-color:currentColor}
.tb-say .sv{font-weight:700}
.tb-say.bad .sv{color:var(--bad)} .tb-say.warn .sv{color:var(--warn)}
.ov-quick{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 20px}
@media (max-width:420px){.topbar .who{display:none}}
/* 窄屏的模块面板：从底部升起，两列大按钮，每格至少 48px 高，拇指点得准。 */
.mod-scrim{position:fixed;inset:0;z-index:60;background:rgba(6,8,14,.46);opacity:0;pointer-events:none;transition:opacity .18s ease}
.mod-scrim.show{opacity:1;pointer-events:auto}
.mod-sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--surface);border-top:1px solid var(--line);
border-radius:var(--r-2xl) var(--r-2xl) 0 0;padding:14px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -18px 48px -18px rgba(0,0,0,.5);
transform:translateY(105%);transition:transform .22s cubic-bezier(.22,.61,.25,1);visibility:hidden}
.mod-sheet.show{transform:none;visibility:visible}
.mod-sheet-hd{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.mod-sheet-hd b{font-family:var(--disp);font-size:15px;font-weight:600}
.mod-sheet-x{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--fill-3);color:var(--dim);font-size:19px}
.mod-sheet-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mod-sheet-list button{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 12px;border-radius:var(--r-lg);
background:var(--fill-4);border:1px solid transparent;color:var(--text);font-weight:500;text-align:left}
.mod-sheet-list button svg{width:18px;height:18px;flex:none;opacity:.8}
.mod-sheet-list button.on{color:var(--text);font-weight:600;background:var(--fill-2)}
.mod-sheet-list button:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
@media(prefers-reduced-motion:reduce){.mod-sheet,.mod-scrim{transition:none}}
.tb-lead-r{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;min-width:0}
.tb-roll{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.tb-roll b{color:var(--text);font-weight:600}
.tb-key{display:flex;gap:14px;flex-wrap:wrap;font-size:10.5px;letter-spacing:.02em;color:var(--faint);margin:0 0 9px}
.tb-key i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.tb-key i.ink{background:var(--ink)} .tb-key i.up{background:var(--bad)}
.tb-board{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--card-shadow);overflow:hidden}
.tb-axis{display:flex;align-items:flex-end;gap:14px;padding:12px var(--pad) 8px;border-bottom:1px solid var(--line)}
.tb-ax-h{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--dim);flex:none}
.tb-ax-h.id{width:var(--id-w)} .tb-ax-h.rate{width:var(--rate-w);text-align:right}
.tb-ax-h.lat{width:var(--lat-w);text-align:right} .tb-ax-h.note{width:var(--note-w)}
.tb-ax-t{flex:1;min-width:150px;position:relative;height:15px}
.tb-ax-t .s{position:absolute;bottom:4px;font-family:var(--mono);font-size:9.5px;color:var(--faint);white-space:nowrap}
.tb-ax-t .s::before{content:"";position:absolute;left:0;bottom:-4px;width:1px;height:3px;background:var(--line)}
.tb-ax-t .s.now{right:0;color:var(--dim)}
.tb-ax-t .s.now::before{display:none}
/* 统计窗口不是一个孤立的分段控件：它就是纸带上被点亮的那一段 */
.tb-ax-t .win{position:absolute;right:0;bottom:0;height:2px;min-width:3px;border-radius:2px;background:var(--brand);transition:width .22s cubic-bezier(.2,.7,.3,1)}
.tbr{display:flex;align-items:center;gap:14px;padding:10px var(--pad);border-top:1px solid var(--line-soft);cursor:pointer;position:relative;transition:background .13s ease}
.tbr:hover,.tbr.on{background:var(--surface-2)}
.tbr:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.tbr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent}
.tbr.sev-down::before{background:var(--bad)}
.tbr.sev-degraded::before{background:var(--warn)}
.tb-id{width:var(--id-w);flex:none;display:flex;align-items:center;gap:8px;min-width:0}
.tb-nm{font-family:var(--disp);font-size:13px;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tb-tr{flex:1;min-width:150px}
/* 纸带：基线以下＝正常调用量（全表同刻度），基线以上＝失败次数（自己的敏感刻度，
一次失败就看得见 —— 失败是事件，不是要跟流量比大小的量） */
.trc{display:block;width:100%;height:46px;overflow:visible}
.trc .base{stroke:var(--line);stroke-width:1}
/* 统计窗口从哪儿起算，就在纸带上划一刀；窗口外压一档 —— 压掉的是强调，不是历史本身 */
.trc .edge{stroke:var(--brand);stroke-width:1;stroke-dasharray:3 3;opacity:.5}
.trc .vol{fill:var(--ink)}
.trc .sp{fill:var(--bad)}
.trc .dim{opacity:.62}
.trc .hit{fill:transparent}
.trc .hit:hover{fill:var(--brand-a18)}
/* 上电走纸：整板迹线从基线一次性拉起来，只在首绘和换窗口时放一次 */
.trace.ink .trc .vol{transform-box:fill-box;transform-origin:top;animation:tbfeed .42s cubic-bezier(.2,.75,.3,1) both}
.trace.ink .trc .sp{transform-box:fill-box;transform-origin:bottom;animation:tbfeed .42s cubic-bezier(.2,.75,.3,1) .1s both}
@keyframes tbfeed{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.trace.ink .trc .vol,.trace.ink .trc .sp{animation:none}}
.tb-rate{width:var(--rate-w);flex:none;text-align:right;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.25}
.tb-rate .n{display:block;font-size:9.5px;font-weight:500;color:var(--faint);margin-top:4px}
.tb-rate.nil{color:var(--faint);font-weight:500}
/* 样本不足：读数虚化，n=1 的 100% 不许和 n=47 的 100% 长成一个样 */
.tb-rate.thin{color:var(--dim);font-weight:500}
.tb-rate.thin .v{text-decoration:underline dotted;text-underline-offset:3px;text-decoration-color:var(--faint)}
.tb-rate.bad{color:var(--bad)} .tb-rate.warn{color:var(--warn)}
.tb-lat{width:var(--lat-w);flex:none;text-align:right;font-family:var(--mono);font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.tb-note{width:var(--note-w);flex:none;font-size:11.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-note.bad{color:var(--bad)}
.tb-note em{font-style:normal;color:var(--dim)}
.tbx{background:var(--surface-2);border-top:1px dashed var(--line);padding:16px var(--pad) 18px;
display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px 28px}
.tbx h5{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--dim);margin:0 0 10px}
/* 成因条里"成功"也不给绿：这条的工作是说明出了什么错 */
.tbx .seg-ok{background:var(--ink)}
.tbx-lg{display:flex;flex-wrap:wrap;gap:5px 13px;margin-top:9px;font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.tbx-lg i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:-1px}
/* 时延标尺：TTFB 与端到端共用一条刻度，生成占了多少一眼可见 */
.rul{display:grid;grid-template-columns:30px 1fr 46px;gap:5px 9px;align-items:center;font-family:var(--mono);font-size:10px;color:var(--faint)}
.rul .g{grid-column:1/-1;font-size:11px;letter-spacing:.02em;text-transform:uppercase;margin-top:7px}
.rul .g:first-child{margin-top:0}
.rul .t{height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.rul .t i{display:block;height:100%;background:var(--ink);border-radius:3px}
.rul .t.e i{background:var(--text-a17)}
.rul .v{text-align:right;color:var(--dim);font-variant-numeric:tabular-nums}
.ush{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;font-size:11.5px}
.ush .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}
.ush .p{font-family:var(--mono);font-size:11px;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.ush .b{grid-column:1/-1;height:4px;border-radius:2px;background:var(--surface-3);overflow:hidden;margin-bottom:5px}
.ush .b i{display:block;height:100%;background:var(--ink)}
.ush .miss{color:var(--bad)}
.tbx-err{font-size:12px;line-height:1.65;color:var(--text);word-break:break-word;margin:0}
.tbx-err.dim{color:var(--dim)}
.tbx-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.rq{display:inline-flex;align-items:center;gap:6px;background:var(--surface-3);border:1px solid var(--line);border-radius:6px;padding:2px 8px;
font-family:var(--mono);font-size:10.5px;color:var(--dim);cursor:pointer;transition:border-color .13s,color .13s}
.rq:hover{border-color:var(--brand);color:var(--text)}
.tbx-note{grid-column:1/-1;font-size:11.5px;color:var(--faint);line-height:1.6;margin:0;border-top:1px solid var(--line-soft);padding-top:12px}
.tb-fold{display:flex;align-items:center;gap:10px;width:100%;padding:11px var(--pad);border-top:1px solid var(--line-soft);
background:var(--surface-2);font-size:11.5px;color:var(--faint);cursor:pointer;text-align:left}
.tb-fold:hover{color:var(--dim)}
.tb-fold .cv{margin-left:auto;transition:transform .2s ease}
.tb-fold.on .cv{transform:rotate(90deg)}
.tb-dead{display:flex;flex-wrap:wrap;gap:6px;padding:2px var(--pad) 14px;background:var(--surface-2)}
.tb-dead span{font-family:var(--mono);font-size:11px;color:var(--faint);background:var(--surface-3);border-radius:6px;padding:3px 8px}
.tb-none{padding:44px var(--pad);text-align:center;color:var(--faint);font-size:12.5px}
@media (max-width:1380px){.tb-ax-h.note,.tb-note{display:none}}
@media (max-width:1200px){.tb-ax-t .s.alt{display:none}}
@media (max-width:1020px){.tb{--id-w:150px}}
/* ---------- 效率 / EFFICIENCY (what to change) ----------
健康页问「通不通」，计费页问「赚不赚」。这一页只问一句：我现在该改什么。
凡是不服务这句话的部件都不该在这页上——包括那些「看起来很仪表」的部件。
所以版面是三层递降，字号和宽度一路收窄：
结论 一整段话，整页唯一的大字，句子里直接点名最重的那个东西；
该改什么 一本台账，一行 = 一个「要修的东西」，不是一条规则——同一个模型
触发的几条规则收在同一行里展开，因为操作的人修的是模型，不是规则；
凭据 全局读数 + 三张原始表收进一个带页签的面板，默认只露一张。
签名件是台账右缘那列读数牌：所有行的数字右对齐成一竖列、按严重度上色，
不读字也能从上往下扫出今天值得动的是哪几行。整页只有这一处敢用颜色。 */
/* 结论：一段话。旧版把它拆成五块瓦片，读者得自己把结论拼回来。 */
/* 分页：一页装不下两种阅读姿势。「该改什么」是站着扫的清单，「原始数据」是
坐下来核的表——把它们叠在一条时间线上，就是逼人滚过一屏结论去找一张表。
页签自己带徽标：不在这一页时也知道待办有几项、里面有没有高优先的。 */
.ef-nav{display:inline-flex;align-items:stretch;gap:3px;background:var(--surface-2);
border:1px solid var(--line);border-radius:13px;padding:3px}
.ef-nav button{display:inline-flex;align-items:center;gap:9px;padding:9px 17px;border-radius:10px;
background:transparent;color:var(--dim);font-family:var(--disp);font-weight:600;font-size:13.5px;
white-space:nowrap;transition:color .16s ease,background .16s ease,box-shadow .16s ease}
.ef-nav button:not(.on):hover{color:var(--text);background:var(--surface-3)}
.ef-nav button.on{color:var(--brand-2);background:var(--ctl-on-bg);box-shadow:var(--ctl-on-ring)}
.ef-nav button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ef-nav b{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
padding:0 5px;border-radius:6px;font-family:var(--sans);font-size:11px;font-weight:700;
font-variant-numeric:tabular-nums;color:var(--btn-ink);background:var(--faint)}
.ef-nav b.high{background:var(--bad)} .ef-nav b.mid{background:var(--warn)} .ef-nav b.ok{background:var(--ok)}
/* 结论和台账是读的，收在一个阅读宽度里，别跟着 27 寸屏一起长。
下面的表才要宽——那是数据面，两者右边缘不齐是有意的。 */
.ef-say{max-width:1060px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
box-shadow:var(--card-shadow);padding:21px 24px 17px;margin-bottom:26px}
.ef-say-k{font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--faint);margin-bottom:12px}
.ef-say-h{font-family:var(--disp);font-size:25px;font-weight:600;letter-spacing:-.02em;line-height:1.44;margin:0}
.ef-say-h b{font-weight:700;font-variant-numeric:tabular-nums}
.ef-say-h b.loss{color:var(--bad)} .ef-say-h b.gain{color:var(--ok)} .ef-say-h b.cnt{color:var(--brand-2)}
.ef-say-s{font-size:13.5px;line-height:1.78;color:var(--dim);margin:10px 0 0;max-width:76ch}
.ef-say-s b{color:var(--text);font-weight:600}
.ef-say-s code{font-family:var(--mono);font-size:12.5px;color:var(--text);
background:var(--surface-3);border-radius:6px;padding:1.5px 7px}
.ef-say-f{display:flex;flex-wrap:wrap;gap:5px 20px;margin-top:16px;padding-top:13px;
border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--faint)}
.ef-say-f b{font-family:var(--mono);font-weight:500;color:var(--dim);font-variant-numeric:tabular-nums}
/* 台账：一行 = 一个要修的东西。行是折叠的，展开才给依据和动作。 */
.ef-rail{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin:0 0 13px}
.ef-rail b{font-family:var(--disp);font-size:15px;font-weight:600;letter-spacing:-.005em}
.ef-rail span{font-size:12px;color:var(--faint)}
.dks{max-width:1060px}
.dk{--sv:var(--faint);position:relative;border-bottom:1px solid var(--line-soft)}
.dk:last-child{border-bottom:none}
.dk.high{--sv:var(--bad)} .dk.mid{--sv:var(--warn)} .dk.low{--sv:var(--brand)}
.dk-sum{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto 18px;
align-items:center;gap:3px 18px;padding:13px 18px 14px 22px;cursor:pointer;list-style:none;
transition:background .14s ease}
.dk-sum::-webkit-details-marker{display:none}
.dk-sum::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sv)}
.dk-sum:hover{background:var(--surface-2)}
.dk-sum:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.dk[open]>.dk-sum{background:var(--surface-2)}
.dk-id{grid-column:1;grid-row:1;display:flex;align-items:baseline;gap:9px;min-width:0}
.dk-scope{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--sv);flex:none}
.dk-tgt{font-family:var(--mono);font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-n{font-size:11px;color:var(--faint);flex:none;white-space:nowrap}
.dk-claim{grid-column:1;grid-row:2;font-size:12.5px;line-height:1.5;color:var(--dim);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 读数牌：一竖列右对齐的数字，这一页的签名件 */
.dk-plate{grid-column:2;grid-row:1/3;text-align:right;min-width:92px}
.dk-plate b{display:block;font-family:var(--disp);font-size:19px;font-weight:650;letter-spacing:-.025em;
line-height:1.15;font-variant-numeric:tabular-nums;color:var(--sv);overflow-wrap:anywhere}
.dk.low .dk-plate b{color:var(--text)}
.dk-plate i{display:block;font-style:normal;font-size:10.5px;color:var(--faint);margin-top:3px}
.dk-cv{grid-column:3;grid-row:1/3;width:16px;height:16px;color:var(--faint);flex:none;transition:transform .2s ease}
.dk[open] .dk-cv{transform:rotate(90deg)}
.dk-body{padding:0 22px 18px 22px;background:var(--surface-2)}
.dk-it{padding-top:14px;margin-top:14px;border-top:1px dashed var(--line)}
.dk-it:first-child{padding-top:2px;margin-top:0;border-top:none}
.dk-ih{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:7px}
.dk-ih h4{font-family:var(--disp);font-size:14px;font-weight:600;letter-spacing:-.005em;margin:0}
.dk-im{font-family:var(--mono);font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums;margin-left:auto}
.dk-d{font-size:12.5px;line-height:1.78;color:var(--dim);margin:0;max-width:74ch}
.dk-a{display:flex;gap:9px;font-size:12.5px;line-height:1.72;color:var(--text);margin:9px 0 0;max-width:74ch}
.dk-a::before{content:"→";flex:none;color:var(--sv);font-weight:700}
.dk-go{margin-top:15px}
.dk-ok{padding:32px 28px;text-align:center;color:var(--faint);font-size:12.5px;line-height:1.9}
/* 全局读数：五个比率并列，数字保持墨色，好坏交给信号灯——机箱一直是这么说话的。 */
.ef-reads{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.ef-read{padding:14px 18px 16px;min-width:0}
.ef-read+.ef-read{border-left:1px solid var(--line-soft)}
.ef-read .k{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;letter-spacing:.1em;color:var(--faint)}
.ef-read .k i{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor;
box-shadow:0 0 var(--halo-blur) var(--halo-spread) color-mix(in srgb,currentColor var(--halo-alpha),transparent)}
.ef-read .v{font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1;
margin-top:9px;font-variant-numeric:tabular-nums;color:var(--text)}
.ef-read .n{font-size:11.5px;color:var(--faint);margin-top:8px;line-height:1.55}
.lv-ok{color:var(--ok)} .lv-warn{color:var(--warn)} .lv-bad{color:var(--bad)} .lv-idle{color:var(--faint)}
/* 首字节前：一根三段条，颜色分的是责任——灰是上游的，橙是白等的，紫是我们自己的。 */
.ef-split{display:flex;height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden;margin-top:9px}
.ef-split i{display:block;height:100%;flex:none;width:0;transition:width .62s cubic-bezier(.22,.61,.25,1)}
.ef-split i.up{background:var(--text-45-on-surface-3)}
.ef-split i.fo{background:var(--warn)}
.ef-split i.gw{background:var(--brand)}
.ef-split+.n{margin-top:7px}
/* 凭据面板：三张表挤在一个面板里轮流出场，不是三段各自占一屏。 */
.ef-tabs{display:flex;align-items:stretch;gap:2px;padding:8px 10px 0;background:var(--surface-2);border-bottom:1px solid var(--line)}
.ef-tabs button{position:relative;padding:9px 15px 10px;border-radius:9px 9px 0 0;background:transparent;
color:var(--faint);font-weight:600;font-size:12.5px;white-space:nowrap;transition:color .15s ease,background .15s ease}
.ef-tabs button:not(.on):hover{color:var(--dim);background:var(--surface-3)}
.ef-tabs button.on{color:var(--text);background:var(--surface)}
.ef-tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--surface)}
.ef-tabs button i{font-style:normal;margin-left:6px;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.ef-tabs button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.ef-tabnote{padding:12px 18px 13px;font-size:11.5px;color:var(--faint);line-height:1.7;
border-bottom:1px solid var(--line-soft);max-width:96ch}
/* 面板是 overflow:hidden 的（圆角要裁），所以窄屏上表会被切掉右边几列而不是
变得可滚——给表自己一条横轨，切掉的列滑得回来。 */
.ef-tw{overflow-x:auto}
/* 数字列右对齐 + 等宽——一列数要能上下对位比大小，不然表就只是排版整齐的噪音。
（旧版这三张表写了 class="num" 却没人给它定过样式，所有读数一直左贴着列头。） */
.ef-t th.num,.ef-t td.num{text-align:right}
.ef-t td.num{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.ef-t td.mono{font-size:12.5px}
.ef-more{display:flex;align-items:center;gap:9px;width:100%;padding:11px 18px;border-top:1px solid var(--line-soft);
background:var(--surface-2);font-size:11.5px;color:var(--faint);cursor:pointer;text-align:left}
.ef-more:hover{color:var(--dim)}
/* 表里的行如果正被上面的台账点名，就在名字前点一盏同色的灯——凭据和结论对得上号。 */
.ef-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:8px;vertical-align:1px;background:currentColor;
box-shadow:0 0 var(--halo-blur) var(--halo-spread) color-mix(in srgb,currentColor var(--halo-alpha),transparent)}
.ef-dot.high{color:var(--bad)} .ef-dot.mid{color:var(--warn)} .ef-dot.low{color:var(--brand)}
/* 表里的「无后备」是风险标记，就该长得像风险标记，不是中性小胶囊 */
.ef-tag{font-size:10px;font-weight:600;letter-spacing:.06em;padding:2px 7px;border-radius:999px;white-space:nowrap;
color:var(--warn);background:var(--warn-a12);border:1px solid var(--warn-a30)}
/* 区标题：一个真正的中号标题 + 一行注解，而不是两句同样大小的方法论。 */
.ef-h{margin:0 0 12px}
.ef-h b{display:block;font-family:var(--disp);font-size:15px;font-weight:600;letter-spacing:-.005em}
.ef-h span{display:block;font-size:12px;color:var(--faint);margin-top:5px;line-height:1.6;max-width:80ch}
.ef-cov{font-size:11.5px;color:var(--faint);margin-top:11px;line-height:1.7;max-width:84ch}
@media(max-width:1080px){
.ef-reads{grid-template-columns:repeat(3,minmax(0,1fr))}
.ef-read:nth-child(3n+1){border-left:none}
.ef-read:nth-child(n+4){border-top:1px solid var(--line-soft)}
}
.bar-cell{display:flex;align-items:center;gap:8px;min-width:130px}
.bar-cell .bar{flex:1;height:6px;border-radius:3px;background:var(--line-soft);overflow:hidden;min-width:44px}
.bar-cell .bar i{display:block;height:100%;background:var(--brand)}
.bar-cell .bar i.warn{background:var(--warn)} .bar-cell .bar i.bad{background:var(--bad)}
.bar-cell b{font-variant-numeric:tabular-nums;font-weight:600;font-size:12px;min-width:44px;text-align:right}
/* ---------- 体检 / PROBE (active synthetic ping) ----------
Signature: a probe fires a pulse down the gateway→upstream wire and waits for
the echo. Pending = a dot travelling the line; resolved = the lamp snaps
green/red with the round-trip stamped. Reuses the overview's wire/lamp idiom,
but makes it active. */
.probe-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.probe-scope{min-width:0}
.ps-main{display:flex;align-items:center;gap:10px}
.ps-k{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.ps-v{font-family:var(--disp);font-size:16px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46vw}
.ps-clear{background:var(--surface-3);border:1px solid var(--line);color:var(--dim);font-size:11.5px;padding:3px 9px;border-radius:7px;flex:none}
.ps-clear:hover{color:var(--brand-2);border-color:var(--brand)}
.ps-sub{font-size:12px;color:var(--faint);margin-top:5px}
.probe-act{display:flex;align-items:center;gap:14px}
.probe-last{font-size:12px;color:var(--faint)}
#pb-run svg{width:15px;height:15px}
#pb-run.running{opacity:.65;cursor:default}
.pcard{gap:13px}
.pcard .hc-name{flex:1}
.pwire-row{display:flex;align-items:center}
.psource{width:10px;height:10px;border-radius:50%;background:var(--brand);flex:none;
box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--brand-ahalo)}
.pwire{position:relative;height:2px;flex:1;margin:0 9px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--line) 0 5px,transparent 5px 10px)}
.pwire.live{background:linear-gradient(90deg,var(--ok),var(--ok-55-on-surface))}
.pwire.dead{background:linear-gradient(90deg,var(--bad),var(--bad-60-on-surface))}
.pwire.firing{background:var(--brand-dim)}
.pwire .pdot{position:absolute;top:50%;left:0;width:7px;height:7px;border-radius:50%;margin-top:-3.5px;opacity:0}
.pwire.firing .pdot{opacity:1;background:var(--brand-2);box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--brand-2-ahalo);animation:ptravel 1.05s cubic-bezier(.55,0,.45,1) infinite}
@keyframes ptravel{0%{left:0}100%{left:calc(100% - 7px)}}
.ptarget{display:inline-flex;align-items:center;gap:7px;background:var(--surface-3);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:500;flex:0 1 auto;min-width:0;max-width:52%}
.ptarget.on{border-color:var(--ok-40-on-line)}
.ptarget.off{border-color:var(--bad-45-on-line)}
.pt-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lamp-pending{background:var(--brand-2);box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--brand-2-ahalo);animation:blink 1s steps(2,start) infinite}
.pverdict{display:flex;align-items:center;gap:10px}
.pv-stat{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-size:17px;font-weight:600;letter-spacing:-.01em}
.pv-ok{color:var(--ok)} .pv-bad{color:var(--bad)} .pv-pending{color:var(--dim);font-size:15px}
.pv-rtt{font-family:var(--mono);font-size:12.5px;color:var(--dim);margin-left:auto}
.pspin{width:13px;height:13px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--brand-2);display:inline-block;animation:pspin .7s linear infinite}
@keyframes pspin{to{transform:rotate(360deg)}}
.pdetail{font-size:12px;color:var(--dim);font-family:var(--mono);line-height:1.55;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:8px;padding:8px 10px;word-break:break-word}
.pdetail.err{color:var(--bad);background:var(--bad-a7);border-color:var(--bad-a18)}
/* 试过哪几种格式。只有真的试过一种以上才画——一条线只开一种格式时，
这行字会把「本来就没得选」说成「我们挑了挑」。 */
.ptried{margin-top:7px;font-size:11.5px;color:var(--faint);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pt-fmt{font-family:var(--mono);font-size:11px;padding:1px 7px;border-radius:5px;border:1px solid var(--line)}
.pt-fmt.ok{color:var(--ok);border-color:var(--ok-a40);background:var(--ok-a12)}
.pt-fmt.bad{color:var(--bad);border-color:var(--bad-a18);background:var(--bad-a7)}
.ptried-why{flex-basis:100%;color:var(--faint);opacity:.85}
.pc-eff{font-family:var(--mono);font-size:11px;color:var(--brand-2);flex:none}
.lamp-none{background:var(--faint)}
/* probe-model manager (drawer) */
.pm-list{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.pm-group{display:flex;flex-direction:column;gap:6px}
.pm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:8px;padding:7px 11px}
.pm-row .mono{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-x{background:transparent;color:var(--faint);font-size:16px;line-height:1;padding:1px 8px;border-radius:6px;flex:none}
.pm-x:hover{color:var(--bad);background:var(--bad-a9)}
/* test-model picker (drawer, opened from a provider's 测试 button) */
.tm-list{display:flex;flex-direction:column;gap:6px;margin:8px 0 2px;max-height:max(340px,48dvh);overflow-y:auto}
.tm-row{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:8px;padding:8px 11px;cursor:pointer;text-align:left;width:100%;color:inherit}
.tm-row:hover{border-color:var(--brand-40-on-line-soft)}
.tm-row.on{border-color:var(--brand);background:var(--brand-8-on-surface-2)}
.tm-row .mono{font-size:12.5px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-dot{width:9px;height:9px;border-radius:50%;border:2px solid var(--faint);flex:none}
.tm-row.on .tm-dot{border-color:var(--brand);background:var(--brand)}
.tm-src{font-size:10.5px;padding:1px 7px;border-radius:999px;flex:none;background:var(--surface-3,var(--surface-2));color:var(--faint);border:1px solid var(--line-soft)}
.tm-src.bound{color:var(--brand);border-color:var(--brand-a35)}
.tm-src.traffic{color:var(--ok);border-color:var(--ok-a32)}
/* ---------- 用量看板 / USAGE ----------
条件和维度是两个旋钮，不是一个。上面的配线盘（与日志页同一套：粗调一排、
细调一排、拧过的留一张条件牌）决定「算哪些调用」；账本自己的导轨决定
「按什么摊开」——同一批调用，换个维度就是另一种读法，不是另一块板。
签名件是分账条：每行一条按窗口内最大花费归一化的横条，暗的一段是付给
上游的成本、亮的一段是留下的毛利。竖着看，这一列就是花费直方图；横着看，
这笔钱有多少出了门。没配成本价时它退回 token 进出比例——同一个部件、
两种读法，而不是两个部件。 */
.ku-filters{margin-bottom:18px}
.ku-panel{overflow:hidden}
.ku-scroll{overflow-x:auto}
/* 账本导轨：一句话读下来——「按 [维度] 汇总」，右边挂着这批数字的出口 */
.ku-rail{display:flex;align-items:center;gap:8px 11px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line-soft)}
.ku-rail-k{font-size:12px;color:var(--faint);flex:none}
.ku-rail-n{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.ku-rail-acts{display:flex;align-items:center;gap:4px;margin-left:auto}
.ku-act{font-size:12px;font-weight:600;color:var(--dim);background:none;border-radius:7px;padding:5px 9px;
white-space:nowrap;transition:color .14s,background .14s}
.ku-act:hover{color:var(--brand-2);background:var(--brand-dim)}
.ku-act:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.ku-act[disabled]{color:var(--faint);pointer-events:none}
.ku-table th.num,.ku-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.ku-table th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.ku-table th.sortable:hover{color:var(--brand-2)}
.ku-sort{color:var(--brand-2);margin-left:3px;font-size:10px}
.ku-table td.num{font-family:var(--mono);font-size:12.5px;color:var(--text)}
.ku-table td.zero{color:var(--faint)}
.ku-tot{font-weight:600}
.ku-id{display:flex;align-items:baseline;gap:9px;min-width:0}
.ku-name{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ku-name.gone{color:var(--faint);font-style:italic}
button.ku-name{background:transparent;padding:0;text-align:left;cursor:pointer;transition:color .14s}
button.ku-name:hover{color:var(--brand-2)}
button.ku-name:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.ku-prefix{font-family:var(--mono);font-size:11px;color:var(--faint);flex:none}
/* 运营备注跟在显示名后面、不跟用户名抢等宽字体：这块板按人摊花费，微信号写在
用户页却不出现在这一列，找人就得再翻一页。没有备注时这一段不占位。 */
.ku-memo{font-family:var(--sans);font-size:11.5px;color:var(--dim);font-weight:500;flex:none;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.ku-board{font-size:11px;color:var(--faint);background:none;padding:0;flex:none;opacity:0;transition:opacity .14s,color .14s}
tr:hover .ku-board,.ku-board:focus-visible{opacity:1}
.ku-board:hover{color:var(--brand-2)}
.ku-req{display:flex;align-items:baseline;gap:7px;justify-content:flex-end}
.ku-err{color:var(--bad);font-size:11px;font-family:var(--sans);font-weight:600}
/* 展开箭头：这一行还能往里拆一层 */
.ku-caret{display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex:none;margin-right:-2px;
border-radius:5px;background:none;color:var(--faint);transition:color .14s,background .14s,transform .16s ease}
.ku-caret:hover{color:var(--brand-2);background:var(--brand-dim)}
.ku-caret:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.ku-caret.open{transform:rotate(90deg);color:var(--brand-2)}
.ku-caret svg{width:11px;height:11px}
/* 分账条 */
.ku-split{display:flex;align-items:center;gap:11px;min-width:210px}
.ku-bar{height:9px;flex:1;min-width:130px;border-radius:5px;overflow:hidden;background:var(--surface-3)}
.ku-bar .fill{display:flex;height:100%;border-radius:5px;overflow:hidden;min-width:3px;
animation:kugrow .34s cubic-bezier(.2,.8,.3,1) both}
.ku-bar .fill>span{display:block;height:100%;min-width:2px}
@keyframes kugrow{from{transform:scaleX(0);transform-origin:left}to{transform:none}}
/* 成本一段要比空槽亮出一档才看得出分界，又不能亮到跟毛利抢眼 */
.ku-bar .cost{background:var(--faint-a90)}
.ku-bar .keep{background:var(--brand)}
.ku-bar .loss{background:var(--bad)}
.ku-bar .in{background:var(--gm)} .ku-bar .out{background:var(--brand)}
.ku-pct{font-family:var(--mono);font-size:11px;color:var(--faint);flex:none;width:56px;text-align:right;letter-spacing:.02em}
.ku-pct.loss{color:var(--bad)}
/* 拆开的一层：贴在母行下面的一张小表，缩进一格表示从属 */
/* 直接子选择器：这条只管母行下面那一格，不许穿透到内层表把它的留白也抹平 */
.ku-sub>td{background:var(--surface-2);padding:0!important}
.ku-subwrap{padding:11px 14px 13px 30px;border-left:2px solid var(--brand-a45)}
.ku-sub-k{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--faint);margin-bottom:8px;display:block}
/* 内层表是一张紧凑的清单，不是第二张主表：宽度收住，别让它横跨整页 */
table.ku-subt{width:100%;max-width:660px;font-size:12.5px;table-layout:fixed}
table.ku-subt td{padding:5px 0;border:none;background:none}
table.ku-subt td+td{padding-left:16px}
table.ku-subt td:last-child{padding-left:20px} /* 数字与条之间要留一口气 */
table.ku-subt .ku-bar{min-width:0} /* 内层的条按列宽走，不吃主账本那条的下限 */
table.ku-subt td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
table.ku-subt td:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.ku-subt col.c-n{width:auto} table.ku-subt col.c-x{width:72px}
table.ku-subt col.c-t{width:78px} table.ku-subt col.c-y{width:86px} table.ku-subt col.c-b{width:132px}
.ku-subt-more{font-size:11.5px;color:var(--faint);padding-top:6px}
/* 收窄时的让位顺序：先把六块表盘折成两排，再收起缓存与最近两列——
钱和总量任何宽度下都不让位 */
@media (max-width:1260px){#ku-tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1180px){.ku-table th.opt,.ku-table td.opt{display:none}}
@media (max-width:720px){#ku-tiles{grid-template-columns:repeat(2,1fr)}}
/* ---------- 余额 · 纸带 (BALANCE TAPE) ----------------------------------
一个客户的余额从来不是一个数。现金和赠金是两种钱——赠金会过期、提不出来、
永远先花——而人民币现在只有两个出口：换成美元额度（单向、按官方价再扣），
和付一个月的拼车租金。按 token 扣人民币已经停了，旧流水还在「旧口径计量」
里，不混进这两口。四个事实压在一个「余额 ¥」列里，于是没人答得出「这人
还能撑几天」和「这个车位卖亏了没有」——这一屏就是为了把它们拆开。
所以这一列不是数字，是一条纸带：中间一条基准线，线上是他手上的钱，线下是
这段时间花掉的钱。全表共用一把尺子，行与行才可比；而「下面比上面长」这件
事本身就是警报，读的人不用再算第二遍。
板上只有两种颜色：赠金用琥珀（它有一口在走的钟），见底用红。别的全是墨色，
计量和席位靠质地分——计量是细齿（它本来就是几千口小咬），席位是实块（它
一次一整口）。改用两种颜色区分也行，但这块板上每多一种颜色，警报就少一分。 */
.bt-key{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:center;font-size:11px;color:var(--faint);margin:0 0 11px;letter-spacing:.02em}
.bt-key i{display:inline-block;width:15px;height:7px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.bt-key .grp{font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:var(--dim)}
.bt-key .grp+span{margin-left:-6px}
.tp-cash{background:var(--text-a60)}
.tp-gift{background:var(--warn)}
.tp-meter{background:repeating-linear-gradient(90deg,var(--text-a46) 0 2px,transparent 2px 4px)}
.tp-rent{background:var(--text-a60)}
/* 基准线是刻度，不是数据：它必须比任何一条数据都轻，否则空行看起来像满行。
类名带 bl- 前缀不是洁癖：审计页那条走带（.tape / .tape-row / .tape-day，
本文件下方）也叫 tape，两个毫不相干的组件抢同一个裸类名，CSS 是全局的，
于是两边同时坏——审计走带里的每个 （操作者徽章、日期分隔线）被这里的
`.tape i{position:absolute}` 抽出文档流，这里的每一行被那边的 `.tape::before`
在 107px 处画一道竖发丝线。谁后写谁吃亏，而两边都后写过。 */
.bl-tape{position:relative;height:24px;min-width:120px}
.bl-tape .datum{position:absolute;left:0;right:0;top:11.5px;height:1px;background:var(--line)}
.bl-tape i{position:absolute;display:block;height:8px;min-width:2px;
animation:kugrow .34s cubic-bezier(.2,.8,.3,1) both}
.bl-tape i.hold{bottom:14px;border-radius:2px 2px 0 0}
.bl-tape i.spend{top:14px;border-radius:0 0 2px 2px}
/* 见底：这个人的现金撑不到下一次有人看这块板。整条消耗染红，因为该改的不是
某一段，是「他在花的比他有的多」这件事。 */
.bl-tape.short i.spend{background:var(--bad-a55)}
.bl-tape.short i.tp-meter{background:repeating-linear-gradient(90deg,var(--bad-a55) 0 2px,transparent 2px 4px)}
/* 一分钱没有、一分钱没花：只留基准线。空账号和「刚好花了 0」是两件事，
而前者本来就该读起来像一条什么都没发生的空线。 */
.bl-tape.idle .datum{background:var(--line-soft)}
/* 到期列：这一列回答的不是「什么时候到期」，是「什么时候该管这个人」——
计量客户会见底，拼车客户会到期，两者取更早的那个。都是日期，才排得出先后。 */
.bl-due{display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1.25}
.bl-due b{font-family:var(--mono);font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.bl-due span{font-size:10.5px;color:var(--faint)}
.bl-due.soon b{color:var(--bad)} .bl-due.near b{color:var(--warn)}
.bl-seat{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;
border:1px solid var(--line);font-size:11px;color:var(--dim);white-space:nowrap}
.bl-seat b{font-weight:600;color:var(--text)}
.bl-seat .tier-ic{color:var(--text)}
.bl-name{display:flex;flex-direction:column;gap:3px;align-items:flex-start;min-width:0}
.bl-sub{font-size:11px;font-weight:400;color:var(--faint);margin-top:2px;white-space:nowrap}
/* 数字列里的可点项：pv-link 前面那颗圆点是给名字用的锚，摆进金额列会破掉
右对齐——一列数字读的是尾数在不在一条线上。这里只留下划线。 */
.bl-numlink{background:transparent;padding:0;font:inherit;color:inherit;
border-bottom:1px dashed var(--faint-a55);transition:color .14s,border-color .14s}
.bl-numlink:hover{color:var(--brand-2);border-bottom-color:var(--brand-2)}
.bl-numlink:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:3px}
.bl-gift{color:var(--warn)}
/* 美元额度那一行：$ 桶给自己的颜色，和 ¥ 一眼分得开；用完/到期褪成灰。 */
.bl-usd{color:var(--brand-2);font-weight:600}
.bl-usd.zero{color:var(--faint);font-weight:500}
.bl-zero{color:var(--faint)}
.bl-bar{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;margin:0 0 12px}
.bl-note{font-size:11.5px;color:var(--faint);margin:10px 0 0}
/* 可排序表头：整个标题是一颗按钮，键盘也能排。箭头只画在当前那一列上。 */
.bl-th{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:2px;white-space:nowrap;border-radius:4px}
.bl-th:hover{color:var(--text)}
.bl-th:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.bl-table th[aria-sort] .bl-th{color:var(--text)}
.bl-allow{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.bl-allow .bl-sub{margin-top:0}
/* 本时段对账：期初 + 每一类进出 = 现在。两张卡各管一种币，¥ 和 $ 不进同一把尺子。
条形是瀑布：每一行从上一行的累计值画到这一行的累计值，所以条形首尾相接，
最后一行的右端必然落在「现在」那一条的右端上。 */
#bl-tiles{margin-bottom:14px}
.bl-bridges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 28px}
.bl-bridge{background:var(--card-grad);border:1px solid var(--line);border-radius:var(--r-xl);
padding:17px 19px 18px;box-shadow:var(--card-shadow);min-width:0}
.bl-bridge-hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin-bottom:14px}
.bl-bridge-hd .k{font-size:12.5px;font-weight:600;color:var(--dim)}
.bl-bridge-hd .st{font-size:11.5px;color:var(--faint)}
.bl-bridge-hd .st.ok{color:var(--ok)}
.bl-bridge-hd .st.bad{color:var(--bad)}
.bl-wf{display:grid;grid-template-columns:minmax(76px,auto) minmax(60px,1fr) auto;gap:7px 12px;align-items:center;font-size:12.5px}
.bl-wf .lbl{color:var(--dim);white-space:nowrap}
.bl-wf .amt{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.bl-wf .trk{position:relative;height:10px}
.bl-wf .trk i{position:absolute;top:0;bottom:0;min-width:2px;border-radius:2px;
animation:kugrow .34s cubic-bezier(.2,.8,.3,1) both}
.bl-wf .trk .zero{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--line)}
.bl-wf .wf-in{background:var(--ok-a60)}
.bl-wf .wf-out{background:var(--text-a46)}
.bl-wf .wf-gift{background:var(--warn)}
.bl-wf .wf-bad{background:var(--bad-a55)}
.bl-wf .wf-sum{background:var(--text-a60)}
.bl-wf .sum{font-weight:600;color:var(--text)}
.bl-wf .sum.amt{font-size:13.5px}
.bl-wf .rule{grid-column:1/-1;height:1px;background:var(--line-soft);margin:1px 0}
.bl-bridge-ft{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);
font-size:11.5px;color:var(--faint)}
.bl-bridge-ft b{font-family:var(--mono);font-weight:600;color:var(--dim);font-variant-numeric:tabular-nums}
@media (max-width:960px){.bl-bridges{grid-template-columns:1fr}}
/* ---------- 用户 · 值机台 ------------------------------------------------
「余额」和「用户」是同一批人的两种读法：那边问钱，这边问「他现在怎么样」。
一行答排查一个客户时先问的三句：他的请求会落到哪辆车（在开）、他走的是
哪扇门（线路）、他最近有没有撞墙（近 24 小时）。
门户账号的生命线（建号 → 验邮箱 → 登录 → 建密钥 → 调用）曾经画成一列五格
刻度，2026-09-18 撤掉：22 个人里 20 个五格全满，246px 换来的是「他早就上路
了」这一句废话。判定还在（usRows.steps / stalled），只有卡住的人在名字下得到
一枚芯片，五步明细在它的悬停里。 */
/* 卡住：停在生命线同一步超过 7 天。7 天用的是本仓库既有的 BurnWindow 口径——
一周是这块控制台衡量「习惯」的单位，不新发明一个阈值。整页只有它是一条待办，
所以只有它拿黄色。 */
.us-chip.stall{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 8%,transparent)}
/* 身份格：一个人只出现一次。第一行是他的把手（用户名），第二行是关于他的话
——姓名、邮箱、备注、状态。两行之间给 5px，比行内 6px 的芯片间距略大，
「哪些是一组」才不用猜。 */
.us-name{display:flex;flex-direction:column;gap:5px;align-items:flex-start;min-width:176px;padding:1px 0}
.us-id{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%}
.us-id .pv-link{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.us-id .us-vfy,.us-id .us-memo{flex:none}
/* 邮箱就是用户名时，它唯一还没说过的话是「验没验过」——所以它缩成用户名旁边的
一枚勾，而不是把同一个串再印一遍。 */
.us-vfy{display:inline-flex;flex:none;color:var(--ok)}
.us-vfy svg{width:12px;height:12px}
.us-vfy.unver{color:var(--warn)}
.us-sub{display:flex;align-items:center;gap:5px 6px;flex-wrap:wrap;font-size:11px;color:var(--faint);min-height:19px}
.us-disp{all:unset;cursor:pointer;font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.us-disp:hover{color:var(--brand-2);text-decoration:underline}
.us-mail{display:inline-flex;align-items:center;gap:4px;max-width:100%;min-width:0;
font-family:var(--mono);font-size:11px;color:var(--dim)}
.us-mail b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.us-mail svg{width:11px;height:11px;flex:none;color:var(--ok)}
.us-mail.unver svg{color:var(--warn)}
/* 备注是别人写在这个人身上的一句话，不是他的第二个名字。上一版它和姓名同款同色
紧挨着，「测试账号002 上善若水🌟」读起来像一个人有两个名字——所以给它自己的
容器：一枚便签图标 + 淡底 + 圆角，一眼就和名字分得开。 */
.us-memo{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:5px;max-width:230px;
padding:2px 9px 2px 7px;border-radius:999px;border:1px solid var(--line);background:var(--line-soft);
cursor:pointer;font-size:11px;color:var(--dim);line-height:1.45}
.us-memo>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.us-memo svg{width:12px;height:12px;flex:none;color:var(--faint)}
.us-memo:hover{color:var(--text);border-color:var(--brand-a35)}
.us-memo:hover svg{color:var(--brand-2)}
.us-memo:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* 没有备注时不占版面。多数行永远不需要备注，而常驻的「＋备注」把这件事印在了
每一行上——一列 22 行、22 个都在喊同一句话，等于没喊。停在这一行上（或键盘
走到它上面）才浮出来；触屏没有悬停，那里给一个常驻的淡记号。 */
.us-memo.add{width:20px;height:20px;padding:0;justify-content:center;border-style:dashed;background:none;
opacity:0;transition:opacity .12s ease}
.us-memo.add svg{width:13px;height:13px}
tbody tr:hover .us-memo.add,.us-memo.add:hover,.us-memo.add:focus-visible{opacity:1}
@media (hover:none){.us-memo.add{opacity:.55}}
.us-chip{display:inline-flex;align-items:center;padding:1px 7px;border-radius:999px;
border:1px solid var(--line);font-size:10.5px;font-weight:600;color:var(--faint);letter-spacing:.02em}
.us-chip.off{color:var(--bad);border-color:var(--bad-a40)}
.us-chip.test{color:var(--brand-2);border-color:var(--brand-a35);background:var(--brand-a5)}
.us-chip.test.expired{color:var(--bad);border-color:var(--bad-a40);background:var(--bad-a6)}
/* Claude Desktop 钢印：所有者已为该用户开通 Desktop（desktop_users 有行）。只是一个
显示器图标，悬停说明开通时间；点用户列表和客户工作台上的钢印打开 Desktop 抽屉。
凡是印用户名字的地方都盖这一枚（dkStamp）。 */
.dk-stamp{display:inline-flex;align-items:center;gap:3px;flex:none;height:16px;padding:0 5px;border-radius:5px;
border:1px solid var(--brand-a35);background:var(--brand-a8);color:var(--brand-2);
font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.04em;line-height:1;vertical-align:middle;white-space:nowrap}
.dk-stamp svg{width:11px;height:11px;flex:none}
button.dk-stamp{cursor:pointer;margin:0}
button.dk-stamp:hover{border-color:var(--brand-a55)}
.us-id .dk-stamp,.bl-name .dk-stamp,.tp-who .dk-stamp,.feed-who .dk-stamp{margin-left:6px}
.cp-seat .dk-stamp,.cp-lendchip .dk-stamp,.sp-nm .dk-stamp,.sp-gonename .dk-stamp,.ap-ppl .nm .dk-stamp{height:14px;padding:0 3px;margin-left:4px;align-self:center}
/* 份额行的名字格只有 76px（和上面油表同一把尺子，不能加宽）：这里的钢印去掉边框和
底色，只留 11px 的图标，四个字的备注名（结构人生）还能完整印下。 */
.sp-nm .dk-stamp{margin-left:-2px;height:12px;padding:0;border:0;background:transparent}
.cp-seat .dk-stamp svg,.cp-lendchip .dk-stamp svg,.sp-gonename .dk-stamp svg,.ap-ppl .nm .dk-stamp svg{width:10px;height:10px}
.sp-nm .dk-stamp svg{width:11px;height:11px}
.cp-seat .sid .dk-stamp{flex:none}
#cwb-title .dk-stamp,.pv-node .dk-stamp{margin-left:8px;height:18px;font-size:11px}
/* 车位的期限：芯片说他坐哪种车，这一行说这辆车还能坐到几时。日期与「剩多久」
分列两端，一竖列扫下去比较的是同一个位置的两个数。近了变黄、进最后一天变红
——续费这件事只有在还来得及的时候提醒才有意义。
间距交给 .us-ridecell 的 gap：一格里三行各自再加一个 margin，三行就有三种行距。 */
.us-seatterm{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
width:100%;max-width:208px;font-size:10.5px;line-height:1.2;color:var(--faint)}
.us-seatterm .d{white-space:nowrap;font-variant-numeric:tabular-nums}
.us-seatterm .l{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--dim);margin-left:auto}
.us-seatterm .us-chip{padding:0 6px;line-height:1.35;flex:none}
.us-seatterm.warn .l{color:var(--warn)}
.us-seatterm.bad .l{color:var(--bad);font-weight:600}
/* 车上的油：拼车乘客的通道格下面挂整车额度窗口的条子。答的是这一页反复被问
的那句「他是不是把车开到没油了」——以前这个答案只在车队页和用户档案抽屉里，
认出一个「其实是额度用尽」的人要跳两页。条子和车队页油表同一个数据源
（seat-pools）、同一把尺（占整窗的 %）；他自己吃掉的份额进 title。 */
/* 两根表并排，不再一根一行。竖着摞的那版把这一格撑到九十多像素高，而隔壁
「线路」「近 24 小时」都只有三四行——整张表的行高于是由最不紧要的那半格决定。
横过来之后标签只剩两三个字的位置，留下的是「哪个窗口」（5h / 周），全名进 title。
两根表把这一行填满（flex:1 1 auto），所以第二根的右缘落在固定的一处——期限行的
「剩 N 天」用同一个宽度靠右，两行右缘对齐，一竖列扫下去比较的是同一个位置。
条子那一格吃掉多余的宽（1fr），数字才不会跟着行宽浮动；用尽的那根写
「3h20 回血」比别的宽，允许它换行——那是唯一值得多占一行的状态。 */
.us-fuel{display:flex;flex-wrap:wrap;align-items:center;gap:3px 12px;width:100%;max-width:208px}
.us-fuel .fr{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:auto minmax(20px,1fr) auto;gap:5px;
align-items:center;font-size:10.5px;color:var(--faint);line-height:1.2}
.us-fuel .fr.note{grid-template-columns:1fr;max-width:100%}
.us-fuel .fl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.us-fuel .fn{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--dim)}
.us-fuel .fr.warn .fn{color:var(--warn)}
.us-fuel .fr.warn .qrail i.fill{background:var(--warn)}
.us-fuel .fr.bad .fn{color:var(--bad);font-weight:600}
.us-fuel .fr.bad .qrail i.fill{background:var(--bad)}
/* 在开：一张车牌三行——身份（车型 + 号）、合约（到期 · 还剩）、油表。
车型和车号以前各占一行，可它们是同一句话的两半；分开写只是把这一格摞高了
一行，而这一格的高度就是整张表的行高。三行行距收成同一个值（gap:3px），
扫下来是一条带子，不是一摞卡片。 */
.us-ridecell{display:flex;flex-direction:column;gap:3px;align-items:flex-start;min-width:264px}
.us-ride{display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:100%;min-width:0}
.us-ride.sub{margin-top:2px}
/* 车型芯片挨着车号站，不再自己占一行，所以收一号：它是限定词，车号才是名字。 */
.us-ride .chan-chip{font-size:11px;padding:2px 8px}
.us-car{all:unset;box-sizing:border-box;display:inline-block;flex:0 1 auto;min-width:0;
max-width:100%;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;font-size:11.5px;color:var(--text);cursor:pointer;line-height:1.3}
.us-car:hover{color:var(--brand-2);text-decoration:underline}
.us-car:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:3px}
.us-car.none{cursor:default;color:var(--faint);font-size:11px}
.us-car.none:hover{color:var(--faint);text-decoration:none}
.us-car.none.bad{color:var(--bad);font-weight:600;font-size:11.5px}
.us-car.none.bad:hover{color:var(--bad)}
.us-chip.ride{color:var(--dim);border-color:var(--line)}
.us-chip.warn{color:var(--warn);border-color:var(--warn-a40,color-mix(in srgb,var(--warn) 40%,transparent))}
.us-chip.flag{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;padding:1px 7px;border-radius:999px;
font-size:10.5px;line-height:1.5;border:1px solid var(--brand-a35);color:var(--brand-2);background:var(--brand-a5);cursor:pointer}
.us-chip.flag.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 8%,transparent)}
.us-chip.flag:hover{border-color:var(--brand)}
.us-chip.alert{color:var(--bad);border-color:var(--bad-a40);background:var(--bad-a6);font-weight:600}
/* 线路：两三行「什么 · 怎么样」，和油表同一套字号与行距。 */
/* min-width 是给表格自动布局看的：不写，这一列会被两侧的宽列挤到六十像素，值全被截成「开 · …」。 */
/* 线路：第一行模式名（和当前账号格的账号名同一号字），第二行近 24 小时实际入口占比。 */
.us-line{display:grid;gap:3px;width:100%;min-width:150px;max-width:160px}
.us-line .usl-top{display:flex;align-items:center;flex-wrap:wrap;gap:3px 6px;min-width:0}
.us-line .usl-mode{all:unset;box-sizing:border-box;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;font-size:11.5px;line-height:1.3;color:var(--text);cursor:pointer}
.us-line .usl-mode:hover{color:var(--brand-2);text-decoration:underline}
.us-line .usl-mode:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:3px}
.us-line .us-chip{flex:none}
.us-line .usl-v{font-size:10.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--dim);font-variant-numeric:tabular-nums}
.us-line .usl-v.ok{color:var(--ok)}
.us-line .usl-v.warn{color:var(--warn);font-weight:600}
.us-line .usl-v.dim{color:var(--faint)}
/* 近 24 小时：整格是一个按钮，开客户工作台的请求页签。 */
.us-pulse{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:3px;align-items:flex-start;
width:100%;min-width:156px;max-width:176px;padding:3px 6px;margin:-3px -6px;border-radius:8px;cursor:pointer;line-height:1.25}
.us-pulse:hover{background:var(--surface-3)}
.us-pulse:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.us-pulse .usp-n{font-size:11.5px;color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.us-pulse .usp-n b{font-size:12.5px;font-weight:600;color:var(--text)}
.us-pulse .usp-n em{font-style:normal;color:var(--bad);font-weight:600}
.us-pulse .usp-r{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.us-pulse .usp-r.gate{color:var(--warn)}
.us-pulse .usp-r.up{color:var(--bad)}
.us-pulse .usp-r.dim{color:var(--faint)}
.us-pulse .usp-r em{font-style:normal;color:var(--bad);font-weight:600}
.us-pulse .usp-c{color:var(--faint)}
.us-pulse .usp-c.low{color:var(--warn);font-weight:600}
.us-pulse .rp-spark{height:18px;min-width:56px;width:100%;max-width:120px;margin-top:2px}
.us-pulse.none,.us-pulse.quiet{cursor:default}
.us-pulse.none .usp-n,.us-pulse.quiet .usp-n{color:var(--faint);font-size:11px}
.us-pulse.quiet{cursor:pointer}
.us-pulse.none:hover{background:none}
/* 「更多」按钮在有非默认开关时点亮，不然它和旁边五个灰图标长得一样。 */
.us-acts .us-more-on{color:var(--brand-2)}
/* 这张表的格子都是两三行的小读数，自带行距；上下内边距比通用表格收 2px，
左右照旧 16px，列与列之间的缝不变。 */
.us-table td{padding-top:9px;padding-bottom:9px}
/* 七列的最小宽度：放不下时面板自己横滑。≤860px 换成卡片（见本节末尾），不再横滑。 */
.us-panel{overflow-x:auto}
/* 九个筛选排成一行要 780px：放不下时这一条自己横滑，不把整页撑出横向滚动
（861–1020px 之间侧栏还在，内容区只有 580px 上下）。 */
#us-lens{max-width:100%;overflow-x:auto;scrollbar-width:none}
#us-lens::-webkit-scrollbar{display:none}
#us-lens button{flex:none}
.us-table{min-width:1224px}
.us-table th,.us-table td{padding-left:12px;padding-right:12px}
/* 有事的行左缘一道细红边，扫一眼就能停在它上面。 */
tbody tr[data-alert] td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.tile.tile-alert .v{color:var(--bad)}
/* ---- API Key 页：类型芯片、按用户分组 ---------------------------------------
类型芯片是这一页最常扫的一列，颜色只分「怎么付钱」：订阅蓝、API 额度青、
无法调用红，手动建的 API Key 和管理员 Key 用中性灰。文字保留：这是计费归类，
只印图标就得悬停才分得清。 */
.ky-panel{overflow-x:auto}
.ky-table{min-width:1080px}
.ky-table th,.ky-table td{padding-left:12px;padding-right:12px}
.ky-table td{vertical-align:middle;white-space:nowrap}
.ky-table td.row-actions{width:1%}
/* 设备 Key 没有「换通道」：留一个看不见的占位，混排时各行的图标仍对齐 */
.ky-act-gap{visibility:hidden}
.ky-own{max-width:200px;overflow:hidden;text-overflow:ellipsis}
.ky-tier{margin-top:6px}
.ky-type{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 9px;
border-radius:var(--r-pill);white-space:nowrap;width:fit-content;color:var(--dim);background:var(--faint-a12)}
.ky-type::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.ky-type.sub{color:var(--gm);background:var(--gm-a12)}
.ky-type.allow{color:var(--oa);background:var(--oa-a12)}
.ky-type.none{color:var(--bad);background:var(--bad-a12)}
.ky-type.api{color:var(--text);background:var(--brand-a12)}
.ky-sub{display:block;margin-top:4px;font-size:11.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.ky-name{font-weight:600}
.ky-pfx{display:block;margin-top:3px;font-family:var(--mono);font-size:11px;color:var(--faint)}
.ky-use{font-variant-numeric:tabular-nums;white-space:nowrap}
.ky-use .ky-err{color:var(--bad);font-weight:600}
.ky-st select{padding:7px 30px 7px 12px;font-size:12.5px}
.ky-foot{margin:10px 2px 0;font-size:12px;color:var(--faint)}
.ky-foot:empty{display:none}
/* 按用户：一行一个人，点开就地展开他名下的 Key */
.ky-grp{cursor:pointer}
.ky-grp:hover td{background:var(--fill-4)}
.ky-grp .chev{color:var(--faint);transition:transform .18s;display:inline-block}
.ky-grp.open .chev{transform:rotate(90deg)}
.ky-grp td.ky-who{white-space:nowrap}
.ky-mix{display:flex;gap:6px;flex-wrap:wrap}
.ky-mix .ky-type{padding:2px 8px}
tr.ky-inner>td{padding:0 12px 14px 40px;background:var(--fill-4)}
.ky-inner table{width:100%;background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;overflow:hidden}
.ky-inner table td{padding-top:8px;padding-bottom:8px}
/* 更多抽屉：一行一颗开关，说明在左、开关在右，四边留足。 */
.us-more{display:flex;flex-direction:column;gap:14px}
.us-more-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 16px;
border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.us-more-row .t{display:flex;flex-direction:column;gap:5px;min-width:0}
.us-more-row .t b{font-size:13px;font-weight:600;color:var(--text)}
.us-more-row .t span{font-size:11.5px;line-height:1.6;color:var(--dim)}
.us-more-row .sw{flex:none;margin-top:2px}
.us-more-row.ro{background:transparent}
.us-more-row .us-chip{flex:none;white-space:nowrap;margin-top:3px}
/* 抽屉里把「运营的开关」和「客户自己的线路偏好」分成两组：后者替他改会写审计，
他下次打开门户就看得到，所以标题要先把这一点说出来。 */
.us-more-sub{margin:6px 0 -6px;font-size:11.5px;line-height:1.6;color:var(--faint)}
.us-more-row .t span em{font-style:normal;color:var(--warn)}
/* 最后出现：运维问的从来不是「他上次登录的时间戳」，是「他多久没来了」。 */
.us-last{display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1.25}
.us-last b,.us-last span{white-space:nowrap}
.us-last b{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.us-last span{font-size:10.5px;color:var(--faint)}
.us-last.never b{color:var(--faint);font-weight:500}
/* 停用的行整行退到背景里：这比第七列一个开关更快地说出「这个人现在用不了」。 */
tbody tr.us-off td{color:var(--faint)}
tbody tr.us-off .pv-link,tbody tr.us-off .us-last b{color:var(--faint)}
tbody tr.us-expired td{color:var(--faint)}
tbody tr.us-expired .pv-link,tbody tr.us-expired .us-last b{color:var(--faint)}
/* 动作分三组：看 · 改 · 毁。十枚一样灰、一样大的图标并排要 246px，其中大半每天
点不到一次，而且「打开档案」和「永久删除」手感相同。行上只留天天做的三件
（启停、代客登录、充值），其余进 ⋯ 菜单，分组做成菜单里的小标题。
代客登录留在行上是因为运营天天用它；只有所有者看得到，停用、到期、归档不画。 */
/* 这一格是
：给它 display:flex 会把它从表格布局里摘出去（行分隔线会断在
前一格的右缘，列宽也不再听 colgroup 的）。所以仍按 row-actions 那套行内排。 */
.us-acts>*{margin-left:7px;vertical-align:middle}
.us-kebab[aria-expanded="true"]{color:var(--brand-2);background:var(--brand-dim)}
/* 窄屏（≤860px，和底部导航同一档）：一行一张卡片，不再横滑。
七列要 1224px，手机上一屏只装得下账号和半列，排查一个人得来回滑三屏。
卡片从上到下：名字 + 最后出现 → 当前账号 → 线路 | 近 24 小时 → 余额 + 动作。
| 是一条可换行的 flex：两个伪元素各占一整行，一个把名字行和读数隔开，
一个是动作行上面那条线；行距写在各格的 margin-top 上，不用 row-gap
（零高的换行占位也会吃一份 row-gap，名字下面就多出一倍的空）。
列名印在格子上方（data-th），表头整行收起。 */
@media (max-width:860px){
#us-account-pane .us-panel{overflow:hidden;background:var(--surface)}
#us-account-pane .us-table{min-width:0}
#us-account-pane .us-table,#us-account-pane .us-table tbody{display:block}
#us-account-pane .us-table thead,#us-account-pane .us-table colgroup{display:none}
#us-account-pane .us-table tr{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:16px;
padding:14px 14px 12px;border-bottom:1px solid var(--line-soft)}
#us-account-pane .us-table tr:last-child{border-bottom:0}
#us-account-pane .us-table td{display:block;min-width:0;max-width:none;padding:0;border:0;
white-space:normal;overflow:visible;text-overflow:clip;text-align:left}
#us-account-pane .us-table tr::before{content:"";order:3;flex:0 0 100%;height:0}
#us-account-pane .us-table tr::after{content:"";order:7;flex:0 0 100%;height:0;margin-top:12px;border-top:1px solid var(--line-soft)}
#us-account-pane .us-table tr.us-none::before,#us-account-pane .us-table tr.us-none::after{display:none}
#us-account-pane .us-table tr.us-none{padding:0}
#us-account-pane .us-table td.empty{flex:1 1 100%;padding:32px 20px;text-align:center}
/* 有事的红边从第一格挪到整张卡片的左缘 */
#us-account-pane .us-table tr[data-alert]{box-shadow:inset 3px 0 0 var(--bad)}
#us-account-pane .us-table tr[data-alert] td:first-child{box-shadow:none}
#us-account-pane .us-c-name{order:1;flex:1 1 0}
#us-account-pane .us-c-last{order:2;flex:none;padding-top:1px}
#us-account-pane .us-c-ride{order:4;flex:1 1 100%;margin-top:12px}
#us-account-pane .us-c-line{order:5;flex:1 1 118px;margin-top:12px}
#us-account-pane .us-c-pulse{order:6;flex:1 1 118px;margin-top:12px}
/* 余额至少留 88px：360px 宽的手机上所有者的四个动作还排得进同一行；再窄动作就自己
换到下一行靠右，不把余额挤成一个字一行。 */
#us-account-pane .us-table td.us-c-bal{order:8;flex:1 1 0;min-width:88px;align-self:center;margin-top:10px;
display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 10px}
#us-account-pane .us-acts{order:9;flex:none;align-self:center;margin-top:10px;margin-left:auto}
#us-account-pane .us-table td[data-th]::before{content:attr(data-th);display:block;margin-bottom:6px;
font-family:var(--sans);font-size:11px;font-weight:600;line-height:1.2;color:var(--faint)}
#us-account-pane .us-table td.us-c-bal::before{margin-bottom:0}
/* 名字是这张卡片的标题：放大一号；点的范围上下各多 5px，手指才点得准。 */
#us-account-pane .us-name{min-width:0;gap:7px;padding:0}
#us-account-pane .us-id{gap:7px}
#us-account-pane .us-id .pv-link{font-size:14px;padding:5px 0;margin:-5px 0}
#us-account-pane .us-memo.add{width:26px;height:26px;margin:-3px 0}
#us-account-pane .us-sub{font-size:11.5px;gap:6px}
#us-account-pane .us-disp,#us-account-pane .us-memo{max-width:100%}
/* 桌面上给表格自动布局写的最小 / 最大宽度，在卡片里都撤掉：格子跟着卡片走。 */
#us-account-pane .us-ridecell{min-width:0;gap:5px}
#us-account-pane .us-seatterm,#us-account-pane .us-fuel{max-width:420px;font-size:11.5px}
#us-account-pane .us-fuel .fr{font-size:11.5px}
#us-account-pane .us-car{font-size:12.5px}
#us-account-pane .us-line{min-width:0;max-width:none;gap:4px}
#us-account-pane .us-line .usl-mode{font-size:12.5px}
#us-account-pane .us-line .usl-v{font-size:11.5px;white-space:normal}
#us-account-pane .us-pulse{min-width:0;max-width:none;margin:0;padding:0;gap:4px}
#us-account-pane .us-pulse:hover{background:none}
#us-account-pane .us-pulse .usp-n{white-space:normal}
#us-account-pane .us-pulse .usp-r{font-size:11.5px;white-space:normal}
#us-account-pane .us-bal{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 10px;min-width:0}
#us-account-pane .us-bal>.bl-numlink{font-size:14px;font-weight:600}
#us-account-pane .us-bal .bl-sub{margin-top:0;font-size:11.5px}
#us-account-pane .us-acts>*{margin-left:4px}
#us-account-pane .us-acts .btn.icon{width:36px;height:36px}
#us-account-pane .us-acts>*:first-child{margin-left:0}
#us-account-pane .us-acts .sw{padding:7px 12px 7px 8px}
/* 小字链接和芯片看起来不变，可点的范围向外扩几像素（相邻两个之间仍留着缝，不会点串）。 */
#us-account-pane .us-car,#us-account-pane .us-line .usl-mode{padding:5px 0;margin:-5px 0}
#us-account-pane .us-bal .bl-numlink,#us-account-pane .us-memo:not(.add),
#us-account-pane .us-sub button.us-chip{position:relative}
#us-account-pane .us-bal .bl-numlink::after,#us-account-pane .us-memo:not(.add)::after,
#us-account-pane .us-sub button.us-chip::after{content:"";position:absolute;inset:-7px -3px}
#us-account-pane .us-bal .bl-numlink::after{inset:-9px -8px}
/* 四块读数在手机上已经占掉半屏，和筛选条之间不再留桌面那 28px */
#us-tiles{margin-bottom:14px}
/* 平板竖屏放得下三格并排：当前账号、线路、近 24 小时同一行 */
@media (min-width:640px){
#us-account-pane .us-c-ride{flex:1.6 1 264px}
#us-account-pane .us-c-line,#us-account-pane .us-c-pulse{flex:1 1 150px}
}
}
.rowmenu-scrim{position:fixed;inset:0;z-index:38}
.rowmenu-scrim.sheet{background:var(--scrim);
touch-action:none;overscroll-behavior:contain}
/* 行尾菜单：macOS 的上下文菜单——厚玻璃、圆角，行是圆角高亮 */
.rowmenu{position:fixed;z-index:39;min-width:208px;width:max-content;max-width:calc(100vw - 16px);
padding:5px;background:var(--glass-thick);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
border:1px solid var(--rail-line);border-radius:var(--r-lg);
box-shadow:var(--sheen),var(--shadow-3)}
.rowmenu:focus{outline:none}
.rm-head{display:none}
.rm-who{margin:2px 9px 6px;padding-bottom:7px;border-bottom:1px solid var(--line);
font-size:11px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-grp{margin:9px 9px 3px;font-size:11.5px;font-weight:600;letter-spacing:0;color:var(--dim)}
/* 「毁」那一组先隔一条线再开始。 */
.rm-grp.cut{margin-top:9px;padding-top:10px;border-top:1px solid var(--line)}
.rm-item{display:flex;align-items:center;gap:10px;width:100%;padding:7px 9px;border-radius:var(--r-sm);
background:none;color:var(--text);text-align:left;cursor:pointer;transition:background .12s,color .12s}
.rm-item i{display:flex;flex:none;color:var(--dim);transition:color .12s}
.rm-item i svg{width:15px;height:15px}
.rm-item .n{flex:1;min-width:0;font-size:12.5px;font-weight:600;white-space:nowrap}
.rm-item .c{flex:none;font-size:10.5px;font-weight:600;color:var(--brand-2)}
.rm-item:hover,.rm-item:focus-visible{background:var(--fill-3)}
.rm-item:hover i{color:var(--text)}
.rm-item:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.rm-item.danger:hover{background:var(--bad-a16);color:var(--bad)}
.rm-item.danger:hover i{color:var(--bad)}
/* 删除在静止状态就是红的：一个只在悬停时才变红的删除，扫视时和它上面那九条
长得一模一样。归档不红——它收得回来。 */
.rm-item.gone .n{color:var(--bad)}
.rm-item.gone i{color:var(--bad-a60)}
/* 用户页第二张表是处置台，不是账号表的又一列。把窗口、判定依据、设备和动作
放在同一平面上，运营才能从“有 12% non-cc”落到“该核对哪一个人哪台机器”。 */
.cr-bar{margin-bottom:12px}
.cr-panel th,.cr-panel td{padding-left:11px;padding-right:11px}
.cr-panel td{vertical-align:top}
.cr-who{display:flex;flex-direction:column;gap:3px;min-width:170px}
.cr-who b{font-size:12.5px}.cr-who span{font-size:11px;color:var(--faint)}
.cr-who .memo{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--brand-2);font-weight:600}
.cr-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;
border:1px solid var(--line);font-size:11.5px;white-space:nowrap}
.cr-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--faint)}
.cr-pill.high{color:var(--bad);border-color:var(--bad-a40);background:var(--bad-a9)}
.cr-pill.high::before{background:var(--bad-fill)}
.cr-pill.review{color:var(--warn);border-color:var(--warn-a40);background:var(--warn-a9)}
.cr-pill.review::before{background:var(--warn)}
.cr-pill.recovered{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 9%,transparent)}
.cr-pill.recovered::before{background:var(--ok)}
.cr-pill.observe{color:var(--dim)}
.cr-pill.disabled{color:var(--faint);border-style:dashed}.cr-pill.disabled::before{background:var(--line)}
.cr-count{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap}
.cr-count b{font-family:var(--mono);font-size:13px}.cr-count span{font-size:10.5px;color:var(--faint)}
.cr-rate{display:grid;grid-template-columns:50px 60px;align-items:center;gap:7px;min-width:117px}
.cr-rate b{font-family:var(--mono);font-size:12.5px;text-align:right}
.cr-rate i{display:block;height:5px;border-radius:999px;background:var(--line);overflow:hidden}
.cr-rate i::after{content:"";display:block;width:var(--p);height:100%;background:var(--rc,var(--warn));border-radius:inherit}
.cr-marks,.cr-ups{display:flex;gap:5px;flex-wrap:wrap;max-width:185px}
.cr-mark{padding:2px 6px;border:1px solid var(--line-soft);border-radius:5px;background:var(--surface-2);
font-family:var(--mono);font-size:10.5px;white-space:nowrap}
.cr-marks .cr-mark{white-space:normal;line-height:1.4}
.cr-devs{display:flex;flex-direction:column;gap:5px;min-width:210px}
.cr-dev{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;padding:6px 7px;
border:1px solid var(--line-soft);border-radius:7px;background:var(--surface-2);font-size:11px}
.cr-dev .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-dev .meta{grid-column:1/-1;color:var(--faint);font-family:var(--mono);font-size:9.5px}
.cr-dev b{font-family:var(--mono);font-size:10.5px;white-space:nowrap;color:var(--dim)}
.cr-dev.live .meta{color:var(--ok)}
.cr-dev.retired{opacity:.72}
.cr-devs>.cr-ups{margin-top:3px}
.cr-action{display:flex;justify-content:flex-end;gap:6px;white-space:nowrap}
.cr-panel tr.cr-high td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
/* 七列的最小宽度：放不下时面板自己横滑。≤860px 换成卡片，和用户管理页同一套做法。 */
.cr-panel{overflow-x:auto}
.cr-table{min-width:1120px}
/* 窄屏（≤860px）：一个用户一张卡片。从上到下：是谁 + 判定 → 判定请求 | non-cc 占比 →
缺失特征 → 设备 Key 和最终线路 → 动作。
是可换行的 flex，两个伪元素各占一整行
（名字行下面的换行、动作行上面那条线），行距写在各格的 margin-top 上。 */
@media (max-width:860px){
#us-risk-pane .cr-panel{overflow:hidden;background:var(--surface)}
#us-risk-pane .cr-table{min-width:0}
#us-risk-pane .cr-table,#us-risk-pane .cr-table tbody{display:block}
#us-risk-pane .cr-table thead{display:none}
#us-risk-pane .cr-table tr{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:16px;
padding:14px 14px 12px;border-bottom:1px solid var(--line-soft)}
#us-risk-pane .cr-table tr:last-child{border-bottom:0}
#us-risk-pane .cr-table td{display:block;min-width:0;max-width:none;padding:0;border:0;
white-space:normal;overflow:visible;text-overflow:clip;text-align:left}
#us-risk-pane .cr-table tr::before{content:"";order:3;flex:0 0 100%;height:0}
#us-risk-pane .cr-table tr::after{content:"";order:8;flex:0 0 100%;height:0;margin-top:12px;border-top:1px solid var(--line-soft)}
#us-risk-pane .cr-table tr.cr-none::before,#us-risk-pane .cr-table tr.cr-none::after{display:none}
#us-risk-pane .cr-table tr.cr-none{padding:0}
#us-risk-pane .cr-table td.empty{flex:1 1 100%;padding:32px 20px;text-align:center}
#us-risk-pane .cr-table tr.cr-high{box-shadow:inset 3px 0 0 var(--bad)}
#us-risk-pane .cr-table tr.cr-high td:first-child{box-shadow:none}
#us-risk-pane .cr-c-who{order:1;flex:1 1 0}
#us-risk-pane .cr-c-level{order:2;flex:none}
#us-risk-pane .cr-c-count{order:4;flex:1 1 118px;margin-top:12px}
#us-risk-pane .cr-c-rate{order:5;flex:1 1 118px;margin-top:12px}
#us-risk-pane .cr-c-marks{order:6;flex:1 1 100%;margin-top:12px}
#us-risk-pane .cr-c-devs{order:7;flex:1 1 100%;margin-top:12px}
#us-risk-pane .cr-c-act{order:9;flex:none;margin-top:10px;margin-left:auto}
#us-risk-pane .cr-table td[data-th]::before{content:attr(data-th);display:block;margin-bottom:6px;
font-family:var(--sans);font-size:11px;font-weight:600;line-height:1.2;color:var(--faint)}
/* 桌面上给列宽写的最小 / 最大宽度在卡片里撤掉，小字放大半号。 */
#us-risk-pane .cr-who{min-width:0;gap:4px}
#us-risk-pane .cr-who b{font-size:14px}
#us-risk-pane .cr-who span{font-size:11.5px}
#us-risk-pane .cr-who .memo{max-width:100%}
#us-risk-pane .cr-count{align-items:flex-start;gap:4px;white-space:normal}
#us-risk-pane .cr-count b{font-size:14px}
#us-risk-pane .cr-count span{font-size:11.5px}
#us-risk-pane .cr-rate{grid-template-columns:auto minmax(40px,96px);min-width:0;justify-content:start;gap:9px}
#us-risk-pane .cr-rate b{font-size:14px;text-align:left}
#us-risk-pane .cr-marks,#us-risk-pane .cr-ups{max-width:none;gap:6px}
#us-risk-pane .cr-mark{font-size:11.5px}
#us-risk-pane .cr-ups .cr-mark{white-space:normal;overflow-wrap:anywhere}
#us-risk-pane .cr-devs{min-width:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}
#us-risk-pane .cr-devs>.cr-ups{grid-column:1/-1;margin-top:2px}
/* 并排的两块等高，内容靠上：不让矮的那块把自己两行字撑开 */
#us-risk-pane .cr-dev{padding:8px 10px;font-size:12px;align-content:start}
/* 触屏没有悬停，设备名不截断，整个印出来 */
#us-risk-pane .cr-dev .nm{white-space:normal;overflow-wrap:anywhere}
#us-risk-pane .cr-dev b{font-size:11.5px}
#us-risk-pane .cr-dev .meta{font-size:11px}
#us-risk-pane #cr-tiles{margin-bottom:14px}
/* 平板竖屏：判定请求、占比、缺失特征三格并排 */
@media (min-width:640px){
#us-risk-pane .cr-c-count,#us-risk-pane .cr-c-rate{flex:0 1 150px}
#us-risk-pane .cr-c-marks{flex:1 1 240px}
}
}
/* ---------- 余额档案（抽屉） ----------
一次请求答完一个人的钱：他有多少、这段时间进出了什么、车位卖得值不值、
每天怎么花的、以及背后那本流水。以前这里是两次请求两块面板，于是同一块
屏幕上能同时摆出两个时刻的数字——客服照着念，客户听出两个答案。 */
.bd-hold{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:1px;
background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:16px}
.bd-cell{background:var(--surface);padding:12px 13px}
.bd-cell .k{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--dim)}
.bd-cell .v{font-family:var(--mono);font-size:19px;font-weight:600;margin-top:6px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.bd-cell .s{font-size:11px;color:var(--faint);margin-top:4px}
.bd-cell.gift .v{color:var(--warn)}
.bd-cell.bad .v{color:var(--bad)}
.bd-sec{margin:20px 0 0}
.bd-sec>.eyebrow{margin-bottom:9px}
.bd-lines{display:flex;flex-direction:column;gap:7px}
.bd-line{display:flex;align-items:center;gap:11px;font-size:12.5px}
.bd-line .lbl{width:76px;flex:none;color:var(--dim)}
.bd-line .amt{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;width:96px;text-align:right;flex:none}
/* bd-rail, not rail: 侧栏机架也叫 .rail，它的 padding 会漏进来，把每条槽按
自己的说明文字长短截短一截——于是这四条本该同底的槽，长度不再可比。 */
.bd-line .bd-rail{flex:1;min-width:60px;height:8px;padding:0;border-radius:2px;
background:var(--surface-3);overflow:hidden}
.bd-line .bd-rail i{display:block;height:100%;min-width:2px;animation:kugrow .34s cubic-bezier(.2,.8,.3,1) both}
/* 说明文字定宽：它是注解，不是内容，让它去挤槽的长度就等于让注解决定读数 */
.bd-line .why{width:132px;flex:none;font-size:11px;color:var(--faint);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 每日：柱高是当天花掉的钱，尺子只有一把，量的只有一件事。
进账不画成柱：一次充值动辄是一个月的量，画进同一把尺子里，剩下 29 天的消耗
就全被压成一条线——而这张图存在的理由恰恰是那 29 天。所以钱进来那天在基准
线上点一个记号：充值是一次事件，不是一个可以和日耗比长短的量。 */
.bd-strip{position:relative;height:82px;display:flex;align-items:stretch;gap:2px;
padding:0 3px;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.bd-strip .datum{position:absolute;left:0;right:0;top:15px;height:1px;background:var(--line)}
.bd-day{position:relative;flex:1;min-width:3px}
.bd-day span{position:absolute;left:0;right:0;display:block;min-height:2px}
/* 实心。细齿在纸带上是用来把计量和席位分开的，而这排柱子只量一件事——
没有第二样东西要分，细齿就只剩下装饰，宽一点的柱子上还读成一架梯子。 */
.bd-day .dn{border-radius:0 0 2px 2px;background:var(--text-a46)}
/* 记号：一颗贴在基准线上的点。进来的钱用绿 / 琥珀，出去的整笔（席位租金）用墨色，
和柱子同色——它和柱子是同一种钱，只是没法和日耗比长短。 */
.bd-day .mk{top:8px;height:6px;border-radius:2px;background:var(--ok)}
.bd-day .mk.gift{background:var(--warn)}
.bd-day .mk.rent{top:8px;background:var(--text-a60)}
.mk-k{font-weight:600;letter-spacing:0;text-transform:none}
.mk-k::before{content:"";display:inline-block;width:9px;height:6px;border-radius:2px;margin-right:4px;vertical-align:0}
.mk-k.in::before{background:var(--ok)}
.mk-k.gift::before{background:var(--warn)}
.mk-k.rent::before{background:var(--text-a60)}
.bd-day:hover::after{content:"";position:absolute;inset:-2px -1px;border-radius:3px;background:var(--brand-a13)}
.bd-days-x{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--faint);margin-top:6px}
.bd-seatcard{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface);
display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline}
.bd-seatcard+.bd-seatcard{margin-top:8px}
.bd-seatcard .t{font-family:var(--disp);font-weight:600;font-size:14px}
.bd-seatcard .f{font-size:12px;color:var(--dim)}
.bd-seatcard .f b{font-family:var(--mono);color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.bd-seatcard .verdict{font-family:var(--mono);font-size:12.5px;font-weight:600;margin-left:auto;
font-variant-numeric:tabular-nums;color:var(--text)}
/* 抽屉里的流水表：类型和金额是两个不该折行的短词，折了就要多读一眼才知道
这一行说的是什么钱 */
.bd-sec table td:nth-child(2),.bd-sec table td:nth-child(3){white-space:nowrap}
@media (max-width:960px){#bl-tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){#bl-tiles{grid-template-columns:1fr}}
/* 收款页一行四块：到账 / 待处理 / 待开票 / 已开票未送达。到账是税后实收，
入账（含税实付）、笔数、退款跟在下面一行小字。窄屏先两列再一列：
四块挤在 900px 上每块只剩 200px，那句解释会折成三行。 */
#tp-tiles{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));margin-bottom:18px}
#tp-tiles .tp-recon .v{white-space:nowrap}
#tp-tiles .tp-recon-sub b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
#tp-tiles .tp-recon-sub .tile-warn b{color:var(--warn)}
/* 到账按收款渠道切开：细线下面一行一个渠道，渠道 / 金额 / 笔数三列对齐（subgrid），
金额右对齐，两行的小数点落在一条线上。每一行也是筛选（tpChannel）：悬停浅底，
选中时品牌色底，和三块待办瓦片「点一下只看这一格」是同一个手势。
一行要 ~210px，四块一排时到账那块给宽一点（1.3fr），1280 宽也放得下。 */
#tp-tiles .tp-chs{display:grid;grid-template-columns:auto auto auto;justify-content:start;column-gap:12px;row-gap:2px;
margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft)}
.tp-ch{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:baseline;margin:0 -8px;padding:4px 8px;
border:0;border-radius:var(--r-sm);background:transparent;color:var(--dim);font-family:inherit;font-size:12.5px;
text-align:left;white-space:nowrap;cursor:pointer;transition:background-color .14s var(--ease)}
.tp-ch b{justify-self:end;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.tp-ch .n{color:var(--faint);font-size:11.5px;font-variant-numeric:tabular-nums}
.tp-ch:hover{background:var(--fill-3);color:var(--text)}
.tp-ch.on{background:var(--brand-a12);color:var(--text)}
.tp-ch:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.tp-ch-x,.tp-ch-x:hover{cursor:default;background:transparent;color:var(--dim)}
/* 三块待办同时是筛选：点一下队列只剩这一格，再点一下回到全部。和下面那排芯片
是同一个状态，选中时两边一起亮。 */
#tp-tiles .tp-todo{cursor:pointer;transition:border-color .14s var(--ease),background-color .14s var(--ease)}
#tp-tiles .tp-todo:hover{border-color:var(--brand-40-on-line)}
#tp-tiles .tp-todo.on{border-color:var(--brand-50-on-line);background:var(--brand-a12)}
#tp-tiles .tp-todo:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#tp-tiles .tpt-s{display:none}
#tp-q{width:230px}
#tp-filter{margin-bottom:14px}
.tp-more{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:14px;font-size:12px}
.tp-more[hidden]{display:none}
/* 批量标记已开票：只在「待开票」这一格出现。勾选列和表格上方这一条一起出现、一起消失；
选了几笔、开票金额、按钮都在这一条里，窄屏卡片没有表头，全选也放在这里。 */
.tp-batch{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:12px;padding:10px 12px 10px 16px;
border:1px solid var(--line);border-radius:12px;background:var(--surface-2);font-size:12.5px;color:var(--dim)}
.tp-batch[hidden]{display:none}
.tp-batch.on{border-color:var(--brand-50-on-line);background:var(--brand-a12);color:var(--text)}
.tp-batch .tpb-say{flex:1 1 260px;min-width:0;line-height:1.5}
.tp-batch .tpb-say b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.tp-batch .tpb-act{display:flex;gap:8px;flex:none}
#topup-sec:not(.tp-sel) .tp-pick{display:none}
#topup-sec th.tp-pick,#topups td.tp-pick{width:30px;padding-right:0}
.tp-pick input{margin:0;width:16px;height:16px;vertical-align:middle;accent-color:var(--brand);cursor:pointer}
.tp-pk{display:inline-flex;vertical-align:middle;padding:6px;margin:-6px;cursor:pointer}
#topups tr.tp-picked td{background:var(--brand-a8)}
#topups{transition:opacity .14s var(--ease)}
#topups.tp-busy{opacity:.55}
/* 对账（2026-10-21）：标题行里一个「对账」按钮；选了窗口变成一枚胶囊（写着哪一段、按哪个时间），
旁边一个 ✕ 退出。到账瓦片的标题、渠道合计、待办和列表都跟着窗口走。 */
.tpr-ctl{display:flex;align-items:center;gap:6px;flex:none}
.tpr-ctl .btn{gap:6px}
.tpr-ctl .btn svg{width:14px;height:14px}
.tpr-ctl .tpr-pill{background:var(--brand);color:var(--btn-ink)}
.tpr-ctl .tpr-pill .b{opacity:.72;font-weight:400}
.tpr-ctl .tpr-x{width:28px;height:28px;padding:0;justify-content:center;font-size:13px}
/* .cfm 的规则写在后面，宽度和抬头间距要用两个类才压得住。 */
.cfm.tpr{width:min(580px,94vw);max-height:92vh;overflow-y:auto;overscroll-behavior:contain}
.cfm.tpr h4{margin-bottom:14px}
.tpr-top{display:flex;align-items:center;justify-content:space-between;gap:10px 12px;flex-wrap:wrap}
.tpr-top .winsel button{padding:5px 12px}
.tpr-basis{width:auto;flex:none;padding:5px 30px 5px 12px;font-size:12.5px;border-radius:var(--r-pill);border:1px solid var(--line);background-color:var(--fill-3);color:var(--text);font-family:inherit}
.tpr-nav{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.tpr-nav b{font-family:var(--disp);font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.tpr-nav .btn.icon{width:30px;height:30px;padding:0;justify-content:center;font-size:17px;line-height:1}
.tpr-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:10px}
.tpr-grid .h{font-size:11.5px;color:var(--faint);text-align:center;padding:2px 0 4px}
.tpr-d{position:relative;display:flex;flex-direction:column;gap:3px;min-height:56px;min-width:0;padding:6px 6px 5px;
border:1px solid transparent;border-radius:var(--r-md);background:var(--fill-3);color:var(--text);font-family:inherit;
text-align:left;cursor:pointer;transition:background-color .14s var(--ease),border-color .14s var(--ease)}
.tpr-d .n{font-size:12.5px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
/* 金额两套写法。桌面 .a-full 是「2,971.06」，格子不够宽才省略。手机 .a-short 是去掉小数的
¥2971，从 10 万起写成 12.8万：约 50px 的格子里完整金额会被裁成残段，所以窄屏曾经把
.a 整段藏掉，格子里只剩日期。悬停标题仍是精确到分的含税实付。 */
.tpr-d .a{display:block;min-width:0;color:var(--dim);font-variant-numeric:tabular-nums}
.tpr-d .a-full{display:block;font-size:10.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.tpr-d .a-short{display:none}
.tpr-d.zero .a{color:var(--faint)}
.tpr-d .dots{display:flex;gap:3px;margin-top:auto;min-height:5px}
.tpr-d .dot{width:5px;height:5px;border-radius:50%}
.tpr-d .dot.p{background:var(--warn-fill)}
.tpr-d .dot.r{background:var(--bad-fill)}
.tpr-d:hover{border-color:var(--brand-40-on-line)}
.tpr-d.in{background:var(--brand-a12);border-color:var(--brand-50-on-line)}
.tpr-d.today .n{text-decoration:underline;text-underline-offset:3px}
.tpr-d.future{opacity:.42;cursor:default}
.tpr-d.future:hover{border-color:transparent}
.tpr-d:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.tpr-d.pad{background:transparent;cursor:default;border-color:transparent}
.tpr-sum{margin-top:16px;padding:14px 16px;border-radius:var(--r-lg);background:var(--fill-3)}
.tpr-sum .t{font-size:12.5px;color:var(--dim)}
.tpr-sum .t b{color:var(--text);font-weight:600}
.tpr-sum .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin-top:10px}
.tpr-sum .c .k{font-size:12px;color:var(--dim)}
.tpr-sum .c .v{font-family:var(--disp);font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.1;margin-top:3px;font-variant-numeric:tabular-nums}
.tpr-sum .c .s{font-size:12px;color:var(--faint);margin-top:3px;font-variant-numeric:tabular-nums}
.tpr-sum .foot{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;padding-top:9px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--dim)}
.tpr-sum .foot b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.tpr-sum .foot .tile-warn b{color:var(--warn)}
.tpr-sum.busy{opacity:.55}
.tpr-hint{margin:12px 0 18px;font-size:12px;color:var(--faint);line-height:1.6}
.tpr-hint-btn{display:none}
.tp-late{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;font-size:11px;color:var(--warn);background:var(--warn-a12);white-space:nowrap}
/* 手机（≤560px）：对账卡按可视高度封顶，两个按钮留在卡片底部，不跟内容滚走。
以前 max-height:92vh 再垂直居中。Safari 的 vh 按工具栏收起的大视口算，按钮会落到
底部工具栏下面；日历金额又被 display:none 整段藏掉。这里改用 100dvh，说明收成一行，
日历格压矮，汇总改回并排，腾出的高度刚好放下每天的金额。桌面不进这一段。 */
@media (max-width:560px){
.cfm.tpr{width:min(580px,calc(100vw - 12px));max-height:100dvh;
padding:12px 10px calc(8px + env(safe-area-inset-bottom));
display:flex;flex-direction:column;overflow:hidden}
.cfm.tpr .tpr-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.cfm.tpr h4{margin-bottom:8px}
.cfm.tpr .cfm-foot{flex:none;margin-top:8px}
.cfm.tpr .cfm-foot .btn{min-height:44px}
.tpr-top{gap:6px}
.tpr-nav{margin-top:8px}
.tpr-grid{gap:2px;margin-top:6px}
.tpr-grid .h{padding:0 0 2px}
.tpr-d{min-height:0;gap:1px;padding:3px 1px 2px}
.tpr-d .n{font-size:12px}
.tpr-d .a{display:block;min-height:11px}
.tpr-d .a-full{display:none}
.tpr-d .a-short{display:block;font-size:9px;letter-spacing:-.045em;line-height:1.05;white-space:nowrap}
.tpr-d .dots{position:absolute;top:3px;right:2px;margin:0;min-height:0;gap:2px}
.tpr-d .dot{width:4px;height:4px}
.tpr-sum{margin-top:8px;padding:8px 10px}
.tpr-sum .t{font-size:12px;line-height:1.35}
.tpr-sum .row{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px;margin-top:6px}
.tpr-sum .c .k{font-size:11px}
.tpr-sum .c .v{font-size:17px;margin-top:1px}
.tpr-sum .c .s{font-size:10.5px;line-height:1.25;margin-top:1px}
.tpr-sum .foot{margin-top:6px;padding-top:6px;gap:2px 8px;font-size:11.5px}
.tpr-hint{margin:6px 0 0}
.tpr-hint-btn{display:inline-flex;align-items:center;gap:5px;margin:0;padding:2px 0;border:0;background:none;color:var(--dim);font-size:12px;font-weight:500;line-height:1.3}
.tpr-hint-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.tpr-hint-mk{width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:5px solid var(--faint)}
.tpr-hint.open .tpr-hint-mk{transform:rotate(90deg)}
.tpr-hint:not(.open) #tpr-hint{display:none}
.tpr-hint.open #tpr-hint{margin-top:4px}
.tpr-ctl .tpr-pill .b{display:none}
}
@media (max-width:1100px){#tp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 窄屏（≤860px，和底部导航同一档）：手机上打开这一页多半是飞书来了一笔充值，
要做的是核对金额、点通过。所以先把队列顶到第一屏：
页头只留搜索框（「充值收款」顶栏和页签上已经各写了一遍，待处理笔数在瓦片上，
待付款的 20 分钟规则印在那张卡片上）；
到账一整行，三块待办并成一排，每块只留标题、笔数和金额（四块竖排要两屏）；
芯片排成一行横滑，两端渐隐提示还有。 */
@media (max-width:860px){
#topup-sec .sx-head{margin-bottom:12px}
#topup-sec .sx-head>div:first-child{display:none}
#topup-sec .sx-act{width:100%}
#tp-q{width:100%}
#tp-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
#tp-tiles .tp-recon{grid-column:1/-1;padding:14px 16px 13px}
#tp-tiles .tp-recon .v{font-size:26px;margin-top:6px}
#tp-tiles .tp-recon .sub{margin-top:6px}
#tp-tiles .tp-chs{margin-top:10px;padding-top:8px}
.tp-ch{padding:7px 8px}
#tp-tiles .tp-todo{padding:11px 12px 12px;min-width:0}
#tp-tiles .tp-todo .k{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tp-tiles .tp-todo .v{font-size:24px;margin-top:6px}
#tp-tiles .tp-todo .sub{margin-top:4px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
#tp-tiles .tp-todo.tp-zero:not(.on) .v{color:var(--faint)}
#tp-tiles .tpt-l{display:none}
#tp-tiles div.tpt-s{display:block}
#tp-tiles span.tpt-s{display:inline}
#tp-filter{flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
margin:0 -12px 12px;padding:2px 12px}
#tp-filter::-webkit-scrollbar{display:none}
#tp-filter.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
#tp-filter.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)}
#tp-filter.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
#tp-filter .chip{flex:none;padding:7px 13px;font-size:13px}
#tp-filter .chip .n{font-size:11.5px}
}
/* ---------- 充值自动确认穿梭框 ---------- */
.shuttle-wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
@media (max-width:760px){.shuttle-wrap{grid-template-columns:1fr}}
.shuttle-pane{background:var(--surface);border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;height:290px;overflow:hidden}
.shuttle-head{padding:8px 12px;background:var(--surface-2);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;color:var(--text)}
.shuttle-search{padding:6px 10px;border-bottom:1px solid var(--line);background:var(--surface)}
.shuttle-search input{width:100%!important;padding:5px 8px;font-size:12px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);color:var(--text);outline:none;box-sizing:border-box}
.shuttle-search input:focus{border-color:var(--brand)}
.shuttle-list{flex:1;overflow-y:auto;padding:2px 0}
.shuttle-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line-a12, rgba(0,0,0,0.05));cursor:pointer;transition:background .12s}
.shuttle-item:hover{background:var(--surface-2)}
.shuttle-uinfo{min-width:0;flex:1}
.shuttle-uname{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.shuttle-uname .uid{font-family:var(--mono);font-size:11px;color:var(--faint);font-weight:normal}
.shuttle-meta{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px;margin-top:2px}
.shuttle-note{background:rgba(99,102,241,0.12);color:var(--brand-2, #6366f1);padding:1px 5px;border-radius:4px;font-weight:500;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shuttle-item .btn{flex-shrink:0;padding:2px 8px;font-size:11px;height:24px;line-height:20px}
.shuttle-empty{padding:40px 12px;text-align:center;color:var(--faint);font-size:12px}
/* 名单行里的金额格（按客户设置在用）：等宽数字、右对齐，下面一行和默认值对比。
行本身不可点：格子里有输入框，整行点击移除会让「点进去改金额」变成「把人移出名单」。 */
.shu-count{font-weight:500;color:var(--dim);font-variant-numeric:tabular-nums;margin-left:4px}
.shu-count.on{color:var(--brand-2)}
.shu-row{cursor:default;gap:12px;padding:8px 8px 8px 12px;box-shadow:inset 2px 0 0 transparent}
.shu-row:hover{background:transparent}
.shu-amt{position:relative;display:block;margin:0}
.shu-amt>span{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:12px;color:var(--faint);pointer-events:none}
.shu-amt input{width:112px;height:30px;padding:4px 9px 4px 22px;border-radius:7px;font-family:var(--mono);font-size:13px;text-align:right;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.shu-amt input::-webkit-outer-spin-button,.shu-amt input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.shu-cap{font-size:11px;line-height:1.3;color:var(--faint);white-space:nowrap}
.shu-x{flex:none;width:26px;height:26px;border-radius:7px;background:transparent;color:var(--faint);font-size:12px;line-height:26px;text-align:center}
.shu-x:hover{background:var(--bad-a12);color:var(--bad)}
.shu-x:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.shu-foot{margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--dim)}
.shu-foot a{color:var(--dim);text-decoration:underline}
@media (max-width:760px){
.shu-row .shuttle-meta{flex-wrap:wrap;white-space:normal;row-gap:3px}
.shu-amt input{width:96px}
}
/* 触屏上输入框小于 16px，iOS 对焦时会整页放大 */
@media (pointer:coarse){.shu-amt input{font-size:16px}}
/* ---------- 收款设置 · 按客户设置 ----------
免审额度和普票税点合成一张名单，一人一行：运营想的是「这个客户有什么特殊条款」。
两格各自一个输入框和一行对比默认值的小字；和默认不同的格子上品牌色，调严的上琥珀。
左栏每人两个加入按钮，加进来就开免审 / 光标落在税点格，不用先加人再找格子。 */
.cu-defaults{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin-bottom:18px}
.cu-defaults .field{margin-bottom:0}
.cu-defaults input{max-width:240px}
.shuttle-wrap.cu-wrap{grid-template-columns:minmax(0,2fr) minmax(0,3.4fr);margin-top:0}
.cu-wrap .shuttle-pane{height:420px}
.cu-filter{display:flex;gap:2px;margin:-3px 0}
.cu-filter button{padding:3px 10px;border-radius:999px;background:none;font-size:12px;font-weight:500;color:var(--dim)}
.cu-filter button:hover{color:var(--text)}
.cu-filter button.on{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 0 0 1px var(--line)}
.cu-filter button.on .shu-count{color:var(--brand-2)}
.cu-filter button:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.cu-cols{display:grid;grid-template-columns:minmax(0,1fr) 150px 104px 26px;gap:12px;padding:6px 8px 6px 12px;
font-size:11px;color:var(--faint);border-bottom:1px solid var(--line);background:var(--surface)}
.shu-row.cu-row{display:grid;grid-template-columns:minmax(0,1fr) 150px 104px 26px;gap:12px;align-items:start;box-shadow:none}
.cu-row .shuttle-uinfo{padding-top:0}
.cu-row.cu-blank{background:var(--surface-2)}
.cu-cell{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.cu-in{display:flex;align-items:center;gap:7px}
.cu-in input[type=checkbox]{margin:0;width:16px;height:16px;flex:none;accent-color:var(--brand)}
.cu-lim .shu-amt input{width:118px}
.cu-pct input{width:104px;padding:4px 24px 4px 9px}
.cu-pct>span{left:auto;right:9px}
.cu-lim.off .shu-amt input{opacity:.45}
.cu-cell.raised .shu-amt input,.cu-cell.open .shu-amt input{border-color:var(--brand-a45);color:var(--brand-2)}
.cu-cell.raised .shu-cap,.cu-cell.open .shu-cap{color:var(--brand-2)}
.cu-cell.lowered .shu-cap{color:var(--warn)}
.cu-lim .shu-cap{padding-left:23px}
.cu-row .shu-x{margin-top:2px}
.cu-warn{color:var(--warn)}
.cu-pick{cursor:default}
.cu-pick:hover{background:transparent}
.cu-add{display:flex;gap:6px;flex:none}
.cu-raw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin-top:14px}
.cu-raw .field{margin-bottom:0}
.cu-raw textarea{font-family:var(--mono);font-size:12px}
/* 开关行：开关在左，名字和说明在右，和系统设置里的开关同一种排法 */
.cu-switch{display:flex;align-items:flex-start;gap:12px}
.cu-switch .toggle{margin-top:1px}
.cu-switch b{font-size:13px;font-weight:600}
.cu-switch .set-hint{margin-top:3px;max-width:80ch}
.cu-readout{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-height:36px;padding-top:6px}
.cu-readout b{font-family:var(--mono);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.cu-readout span{font-size:11.5px;color:var(--faint)}
.cu-pay{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px 20px}
.cu-pay .field{margin-bottom:0}
.cu-qr{display:flex;align-items:flex-start;gap:14px;margin-top:2px}
.cu-qr img,.cu-qr-empty{width:104px;height:104px;flex:none;border-radius:12px;border:1px solid var(--line)}
.cu-qr img{object-fit:contain;background:#fff;padding:6px;box-sizing:border-box}
.cu-qr-empty{display:flex;align-items:center;justify-content:center;font-size:11.5px;color:var(--faint);
background:var(--surface-2);border-style:dashed}
.cu-qr-act{display:flex;flex-direction:column;gap:8px;min-width:0}
.cu-qr-act .set-hint{margin-top:0}
.wg-qr img,.wg-qr .cu-qr-empty{width:132px;height:auto;min-height:132px;aspect-ratio:auto}
.wg-qr img{max-height:210px}
.wg-meta{font-size:13px;color:var(--dim);line-height:1.6}
.wg-meta b{color:var(--ink,inherit);font-weight:600}
.wg-meta .bad{color:var(--bad,#c0392b)}
.set-grid.cu-corp{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){
.shuttle-wrap.cu-wrap{grid-template-columns:1fr}
.cu-pay{grid-template-columns:1fr}
.set-grid.cu-corp{grid-template-columns:1fr}
}
@media (max-width:720px){
.cu-defaults,.cu-raw{grid-template-columns:1fr}
.cu-defaults input{max-width:none}
.cu-cols{display:none}
.shu-row.cu-row{grid-template-columns:auto minmax(0,1fr) 26px;row-gap:8px}
.cu-row .shuttle-uinfo{grid-column:1/3;grid-row:1}
.cu-row .shu-x{grid-column:3;grid-row:1}
.cu-row .cu-lim{grid-column:1;grid-row:2}
.cu-row .cu-tax{grid-column:2/4;grid-row:2}
.cu-pick{flex-wrap:wrap}
}
@media (pointer:coarse){.cu-pct input{font-size:16px}}
/* ---------- PROVIDERS · 凭证分栏 ----------
订阅令牌和 API 密钥挤在一张表里时，谁都没配好：订阅线要的是账号、档位、额度
窗口和重置时刻，密钥线这四格全是「—」；密钥线要的是完整端点地址，可它被挤成
了省略号，因为 32% 的版面让给了一列它永远填不满的余量条。
所以这一层不是筛选器，是分栏：它换的是列，不只是行。三段各有各的差事——
「全部」是货架（唯一能拖拽排序的地方），另两段是各自的工作台。
视觉上它必须比下面那条筛选轨重一档，否则读起来又是一排平级的筛选按钮：
高一截、坐在一条底色带上、选中的那段下沿有一道实指示线。
底色带现在由 .pv-face 承担——那条带子上除了分栏，右边还嵌着本栏的读数窗。 */
.pv-face{display:flex;align-items:stretch;gap:16px;background:var(--surface-2);
border-bottom:1px solid var(--line)}
.pv-tabs{display:flex;align-items:stretch;gap:2px;padding:0 8px;min-width:0}
.pv-tab{position:relative;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 13px;
background:none;font-size:13px;font-weight:500;color:var(--dim);transition:color .14s}
.pv-tab:hover{color:var(--text)}
.pv-tab.on{color:var(--text);font-weight:600}
.pv-tab.on::after{content:'';position:absolute;left:11px;right:11px;bottom:-1px;height:2px;
background:var(--brand);border-radius:2px 2px 0 0}
/* Claude 那一段带着它在这一页别处的同一枚记号（铭牌方块、家族筛片、页顶授权项
用的都是 Claude 标志，TAG_IC.claude）。分栏条上多一个符号是有代价的，付得起是因为它认的是同一件事。 */
.pv-tab .mk{display:inline-flex;margin-right:1px;color:var(--ac)}
.pv-tab .mk svg{width:12px;height:12px;display:block}
.pv-tab:focus-visible{outline:2px solid var(--focus);outline-offset:-3px;border-radius:6px}
.pv-tab .n{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
.pv-tab.on .n{color:var(--brand-2)}
/* 实况窗跟分栏同一条带子，但自己带名字：它筛的是通断，不是账号种类。
选择器挂在 #v-providers 上：透视板后面还有一条同名 .pv-live，不挂的话
它会把这一条的 margin 和 display 盖掉，实况窗就不再靠右。 */
#v-providers .pv-face>.pv-live{display:flex;align-items:center;gap:8px;margin-left:auto;padding-right:14px;min-width:0;font-size:inherit;color:inherit}
.pv-k{flex:none;font-size:11px;font-weight:600;color:var(--faint);white-space:nowrap}
button.pv-k{padding:0;background:none;font-size:11px;font-weight:600;color:var(--faint)}
button.pv-k.hot{color:var(--brand-2)}
button.pv-k:hover{color:var(--text)}
button.pv-k:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
/* 订阅家族筛片：五个 Kiro 号之间要分的从来不是协议，是「这是哪一家的订阅」。
记号沿用页顶授权条那一套（vendorIcon），不另起一套图形。 */
.pv-chip.fam b{display:inline-flex;line-height:1;color:var(--pc,var(--dim))}
.pv-chip.fam b svg,.pv-chip b.ic svg{width:12px;height:12px;display:block}
.pv-chip b.ic{display:inline-flex;margin-right:-1px;color:var(--ac)}
.pv-chip.fam .n{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
.pv-chip.fam.on .n{color:inherit}
/* ---------- PROVIDERS · filter rail + drag-to-reorder ---------- */
/* Filters sit on one slim rail inside the ledger panel — table furniture,
not a second content block. Protocols read as patch-bay LED dots that
pick up the theme's halo (glow at night, ring by day). */
.pv-rail{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--line-soft)}
/* 筛选轨上每一组自带名字（执行 / 用途 / 档位 / 账号）。名字不是又一颗芯片：
没筛时它是这组的轴，筛过之后变色，点它回到全部。 */
.pv-filters{align-items:center;gap:8px 22px;padding:10px 14px}
.pv-filters[hidden],.pv-grp[hidden],.pv-read[hidden]{display:none}
.pv-grp{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-width:0}
.pv-chips{display:inline-flex;align-items:center;gap:2px;flex-wrap:wrap;min-width:0}
.pv-read{display:flex;align-items:center;gap:14px;min-width:0;padding:9px 14px;border-bottom:1px solid var(--line-soft)}
.pv-tools{gap:10px 14px;padding:10px 14px}
/* 透视板的排序箭头也叫 .pv-sort，写在后面。挂在工具条上，字号和颜色才不会被它改成 10px。 */
#v-providers .pv-tools>.pv-sort{display:inline-flex;align-items:center;gap:8px;flex:none;margin-left:0;font-size:12px;color:var(--dim)}
#v-providers .pv-tools>.pv-sort select{width:auto;height:28px;padding:0 28px 0 9px;font-size:12px}
.pv-pools{display:inline-flex;align-items:center;gap:6px;min-width:0}
.pv-seg{display:inline-flex;flex:none;height:28px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.pv-seg button{padding:0 11px;font-size:12px;font-weight:500;color:var(--dim);background:none;transition:color .14s,background .14s}
.pv-seg button+button{border-left:1px solid var(--line-soft)}
.pv-seg button:hover{color:var(--text)}
.pv-seg button.on{background:var(--brand-dim);color:var(--brand-2);font-weight:600}
.pv-seg button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.pv-protos{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.pv-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;border:1px solid transparent;background:none;font-size:12px;font-weight:500;color:var(--dim);transition:color .14s,border-color .14s,background .14s}
.pv-chip:hover{color:var(--text);background:var(--surface-3)}
.pv-chip.on{border-color:var(--brand-a40);background:var(--brand-dim);color:var(--brand-2)}
/* 「全部X」选中 = 什么都没筛。它以前和真筛片长得一样，于是一进页面轨上就亮着
两颗紫色药丸，而它们表示的恰恰是「没有筛任何东西」。让它安静下来之后，这条轨
上只剩一条规则：亮着的就是你缩小了范围；不亮的时候，这两个词正好当轴的标签读。 */
.pv-chip.all.on{border-color:transparent;background:none;color:var(--dim);font-weight:600}
.pv-chip.all.on:hover{background:var(--surface-3);color:var(--text)}
.pv-chip:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.pv-chip i{width:6px;height:6px;border-radius:50%;flex:none;background:var(--led,var(--faint))}
.pv-chip.on i{box-shadow:0 0 var(--halo-blur) var(--halo-spread) color-mix(in srgb,var(--led,var(--faint)) var(--halo-alpha),transparent)}
.pv-chip .n{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
.pv-chip.on .n{color:inherit}
/* 「两边都在」有数才着色，和状态格里熔断那一格同一套语法：没有的东西不该
一直亮着，亮起来就说明有事要处理。 */
.pv-chip.warn{color:var(--warn)}
.pv-chip.warn.on{border-color:color-mix(in srgb,var(--warn) 40%,transparent);
background:color-mix(in srgb,var(--warn) 12%,transparent);color:var(--warn)}
.pv-count{margin-left:auto;font-size:11.5px;color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.pv-count b{color:var(--dim);font-weight:600}
.pv-lock{color:var(--faint);display:inline-flex;align-items:center;gap:5px}
.pv-find{display:inline-flex;align-items:center;gap:6px;flex:none;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:8px;color:var(--faint);transition:border-color .14s,box-shadow .14s}
.pv-find:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-dim);color:var(--dim)}
.pv-find input{width:168px;padding:0;border:none;border-radius:0;background:none;font-size:12.5px;transition:width .18s ease}
.pv-find input:focus{border:none;box-shadow:none;width:240px}
.pv-find input::placeholder{color:var(--faint)}
/* drag grip: a patch-port handle that only lights up when ordering is live */
th.pv-grip-h{width:34px;padding-left:14px}
td.pv-grip-cell{width:34px;padding-left:14px;color:var(--faint)}
.pv-grip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:24px;border-radius:6px;cursor:grab;color:var(--faint);transition:color .12s,background .12s}
tbody tr:hover .pv-grip{color:var(--dim)}
.pv-grip:hover{color:var(--brand-2);background:var(--brand-dim)}
.pv-grip:active{cursor:grabbing}
.pv-grip.locked{cursor:not-allowed;color:var(--line)}
.pv-grip.locked:hover{color:var(--line);background:none}
tbody tr.dragging{opacity:.45}
tbody tr.dragging td{background:var(--brand-dim)}
tbody tr.drop-above td{box-shadow:inset 0 2px 0 var(--brand)}
tbody tr.drop-below td{box-shadow:inset 0 -2px 0 var(--brand)}
.pv-empty-row td{text-align:center;color:var(--faint);padding:22px}
/* ---------- PROVIDERS · 线路实况 / LIVE LINE STATE ----------
「启用」是操作意图，「线路」是此刻的通断——两件正交的事，过去挤在一列里，
于是熔断的上游照样写着「启用」，答的不是运维在问的问题。这里只画后者。
熔断读数有三个数：断了多久（trippedAt）、还有多久自动试探（openUntil）、
冷却退避到第几档（cooldown，翻倍到上限就是「已经断很久了」）。
重合闸引信 .fuse 是全页唯一自己会动的东西——因为它确实每秒都在变。 */
.pv-state{display:flex;flex-direction:column;gap:4px;min-width:132px}
.pv-st{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;white-space:nowrap}
.pv-st.up{color:var(--ok)} .pv-st.trip{color:var(--bad)} .pv-st.probing{color:var(--warn)}
.pv-st.park{color:var(--warn)}
.pv-st.reauth{color:var(--bad)}
.pv-st.idle{color:var(--faint);font-weight:500}
.pv-st .age{font-family:var(--mono);font-weight:500;font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
/* 引信：冷却条走完 = 网关放一次试探。宽度按剩余/冷却总长，每秒重画 */
.fuse{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--faint);white-space:nowrap}
.fuse-bar{position:relative;width:56px;height:3px;flex:none;border-radius:2px;background:var(--bad-a18);overflow:hidden}
.fuse-bar i{position:absolute;inset:0 auto 0 0;background:var(--bad);border-radius:2px;transition:width .95s linear}
.fuse .t{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--dim)}
/* 冷却走完 = 引信满格待发：整条转琥珀并呼吸，等网关放那一次试探 */
.fuse.due .t{color:var(--warn)}
.fuse.due .fuse-bar{background:var(--warn-a20)}
.fuse.due .fuse-bar i{width:100%!important;background:var(--warn);animation:blink 1.4s steps(2,start) infinite}
/* 熔断行整行示警：左沿一道红边 + 极淡底色，扫一眼就能落到出事的那条线上 */
tbody tr.pv-trip{background:var(--bad-a5)}
tbody tr.pv-trip:hover{background:var(--bad-a9)}
tbody tr.pv-trip td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.panel>table tbody tr.pv-trip:hover:not(.dragging):not(.drop-above):not(.drop-below) td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
/* 熔断行的「测试」= 不必等冷却，立刻试一次。只把图标点亮，不加框：
这一行的重点是引信，不是按钮 */
tr.pv-trip .btn.ghost.icon.probe{color:var(--bad)}
tr.pv-trip .btn.ghost.icon.probe:hover{color:var(--bad);border-color:var(--bad);background:var(--bad-a10)}
/* 停靠行：同样整行示警，但染琥珀不染红——这条线没坏，只是今天不再接单了。
两种色一眼分得开「要去修」和「等日子」。 */
tbody tr.pv-park{background:var(--warn-a5)}
tbody tr.pv-park:hover{background:var(--warn-a9)}
tbody tr.pv-park td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.panel>table tbody tr.pv-park:hover:not(.dragging):not(.drop-above):not(.drop-below) td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
/* 停靠的放行时刻是准信，不是猜的倒计时：给它引信的位置，但不画那根会烧完的条 */
.fuse.park .t{color:var(--warn)}
/* 掉授权行：染红，因为它和熔断一样是「要去修」。但它没有引信——冷却走完也不会
有任何事发生，refresh token 死了就是死了，只有人能救。所以引信那一格改放
去向导的那一步；「测试」按钮也不点亮，试探对它毫无意义。 */
tbody tr.pv-reauth{background:var(--bad-a5)}
tbody tr.pv-reauth:hover{background:var(--bad-a9)}
tbody tr.pv-reauth td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.panel>table tbody tr.pv-reauth:hover:not(.dragging):not(.drop-above):not(.drop-below) td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.fuse .fix{padding:0;background:none;color:var(--brand-2);font-size:11px;font-weight:600;white-space:nowrap}
.fuse .fix:hover{text-decoration:underline}
/* 熔断 / 停靠的计数现在长在抬头的读数窗里（.pv-gauge），不在筛选轨上 */
/* ---- 列宽：定宽表格 ------------------------------------------------------
`table-layout:fixed` 是这一版最要紧的一行。在自动布局下，**一行的内容能决定
整列的宽度**：Sidecar 那一行的令牌牌子上印着 40 个十六进制字符的修订号，于是
「令牌」这一列被撑到三百多像素——而那三百像素是从铭牌身上抢的，剩下的七行只好
把邮箱截成 `rui…`、把「+ 入池」压成一个圆点。修订号我们截短了（shortRev），
但下一个长字符串迟早还会来。定宽把这条路整个封死：列宽只由这里的百分比决定，
内容长了就在自己的格子里打省略号，谁也挤不着谁。
于是断点的职责也变了——它不再是「抢在表撑破面板之前撤掉一列」，而只是
「这个宽度下这一列还读得出来吗」。
定宽有一条必须自己守住的账：**每一档、每一栏的百分比都要正好加到 100**。
加多了表就伸到面板外面，而面板是 overflow:hidden 的——右端那三个图标按钮
会被整整齐齐地切掉，看上去像它们不存在。所以下面每一组后面都写着它的和。 */
#v-providers table{table-layout:fixed}
/* ---- 一档：>1560，七列全开 ---- */
#v-providers th.pv-grip-h{width:3%}
#v-providers th.pv-c-name{width:20%}
#v-providers th.pv-c-wire{width:18%}
#v-providers th.pv-c-cred{width:10%}
#v-providers th.pv-c-meter{width:31%}
#v-providers th.pv-c-ops{width:18%} /* 全部栏 3+20+18+10+31+18 = 100 */
/* 分栏之后，比例按各自那一栏真正装着什么重排：
订阅栏——余量是打开这一栏的理由，让它再宽一档，「几时回来」那句话不再被挤掉；
密钥栏——余量列整列撤掉（那一列在这里全是「—」），26% 的版面还给端点地址，
于是 ai-gateway-qa.gaiaworkforce.com/shine-a… 那截省略号消失。 */
#v-providers[data-pvkind="sub"] th.pv-c-wire{width:18%}
#v-providers[data-pvkind="sub"] th.pv-c-meter{width:32%}
#v-providers[data-pvkind="sub"] th.pv-c-ops{width:17%} /* 订阅栏 3+20+18+10+32+17 = 100 */
/* Claude 栏——这一页默认落在这里，所以它比别的栏多一列：订阅期限。开号日 / 到期 /
周限相位这三个事实原本只在铭牌上以「14 天内才冒头」的红标露一次面，而「下一个
要续的是谁」是每天都要问的一句。版面从余量和操作两列各借一点：余量在 29% 时
已经宽裕，操作那一列装的是三颗图标按钮。 */
/* 读数与动作并成一格。三列各装一盏灯、一个开关、三颗图标时，每一列都左对齐
在自己那 8% 里，于是灯和开关之间、开关和图标之间各空着一大截——浪费的不是
某一列，是列与列之间那两道缝。并成一格靠右站，缝就没了。
读数在左、动作在右：能扳的和只能读的分在两边，别混着排。停靠 / 熔断那一行
带一句「几时放行」，装不下时整块读数自己换行占满一行（flex-wrap），而不是
横着溢出去压住隔壁——那一句是这一格最该看清的时候说的话。 */
/* 2026-10-06 改成竖排三行：令牌 / 线路 / 开关 + 图标。横着并排时这一列要 22% 才装得下
一行，而其余列都是三行高，并排省下的那一行高度谁也用不上；竖排之后这一列只要
装得下「开关 + 两颗图标」那一行（约 175px），省出的宽度给用途和余量。 */
.pv-ops{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
/* 徽标和开关在这一格里各占一行，壳收薄一圈：三行加起来要和铭牌、用途那两格一样高，
否则整张表的行高就由这一格的壳定。 */
.pv-ops .badge{padding:1px 8px;font-size:11.5px}
.pv-ops .sw{padding:1px 8px 1px 4px}
/* 两盏灯上下站，不并排：并排时能不能站得下取决于「令牌有效」这枚徽标当下有多宽，
于是同一张表里深色全换行、浅色前两行不换——同一列出现两种排法比哪一种都差。
并进来的令牌格自己横着站：Claude 栏里它的种类只剩「边车」两个字，竖着摞就是
拿一行去装两个字。别的栏里它照旧竖排——那里的种类是「Claude 订阅」这种整句。 */
.pv-ops-read{min-width:0;max-width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.pv-ops-read .pv-cred{flex-direction:row;align-items:center;gap:6px;min-width:0}
/* 线路那一行：灯和它后面那句（失败率 / 几时放行）并排，装不下再换行。 */
#v-providers .pv-state{flex-direction:row;flex-wrap:wrap;align-items:center;gap:3px 8px;max-width:100%}
.pv-ops-do{flex:none;display:flex;align-items:center;gap:6px;max-width:100%}
/* 图标按钮收到 26px：它和开关同一行，30px 的壳会让这一行比铭牌的任何一行都高。 */
#v-providers .pv-ops-acts .btn.icon{width:26px;height:26px}
/* 「近 40 次 · 失败 5%」这类附注跟在灯后面，剩不到 60px 才换行；换行后独占整行。 */
#v-providers .pv-state .fuse{flex:1 1 60px}
.pv-ops-acts{display:inline-flex;align-items:center;gap:6px}
/* 断路器那句「还有多久自动试探 / 几时放行」允许收省略号：它比这一格宽的时候，
以前靠面板 overflow:hidden 切、或者干脆横着压住隔壁列。 */
.pv-ops .fuse{min-width:0;max-width:100%}
.pv-ops .fuse .t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pv-kebab[aria-expanded="true"]{color:var(--brand-2);background:var(--brand-dim)}
/* Claude 栏里令牌与线路并成一格。两盏灯答的是两个问题——凭证（登没登录）和
断路器（这条线通不通）——而 `pvFleetHTML` 的注释早就写着那句关键的话：
**一个没登录的号，断路器照样报「通」**。并排站着，那个对照第一次在行上看得见；
原来它们隔着两列，读的人要自己把两格拼起来。顺带把 ≤1560 整列撤掉令牌那条
规矩也解了：那一档以前是干脆没有凭证灯。
宽度的账也因此重排：各格从「一摞标签」收成一两行之后，用途里那半截邮箱、
期限里的周限都在截字，而线路 / 启用 / 动作三列装的是一盏灯、一个开关和三颗
图标——行高 140px 时它们还算匀称，87px 之后就是空气。 */
#v-providers[data-pvkind="claude"] th.pv-c-cred,
#v-providers[data-pvkind="claude"] td.pv-c-cred{display:none}
#v-providers[data-pvkind="claude"] th.pv-c-name{width:19%}
#v-providers[data-pvkind="claude"] th.pv-c-wire{width:22%}
#v-providers[data-pvkind="claude"] th.pv-c-meter{width:28%}
#v-providers[data-pvkind="claude"] th.pv-c-term{width:14%}
/* 用途是这一页信息最多的一格（芯片 / 代理地址 / 绑定）。余量格多了一列 token 数
（约 70px），这一截从用途里让：用途的芯片一行在 1600px 上占不到 260px。动作格竖排
三行之后只要装下「开关 + 两颗图标」那一行（约 175px），14% 在 1561px 上是 196px。 */
#v-providers[data-pvkind="claude"] th.pv-c-ops{width:14%} /* Claude 栏无令牌列 3+19+22+28+14+14 = 100 */
/* 有「订阅期限」这一列的时候，铭牌上那枚到期红标自己让位：同一句话印两遍，
而铭牌那一行正缺宽度装完整的邮箱。撤掉期限列的那一档（≤1120）再放它回来。 */
#v-providers[data-pvkind="claude"] .pv-plan.pv-due{display:none}
/* 多一列就得有人让出宽度，让的是量条那一格的刻度而不是它的条子：窗口名的头两个
字就够认（三行的次序是固定的），而条子和右边那句「几时回来」少一个字都读不出。
这条规则窄屏那两档已经写过一遍，Claude 栏只是把它提前到宽屏。 */
/* Claude 的窗口只报百分比，「余 100%」实测约 36px，所以读数那一列收到 40px，
省下的给 token 数（「3.1M/≈9.4M」实测 63px）。 */
#v-providers[data-pvkind="claude"] .pv-m{grid-template-columns:minmax(0,72px) minmax(40px,1fr) 40px 64px 96px;gap:6px}
#v-providers[data-pvkind="claude"] .pv-mnone{grid-template-columns:minmax(0,72px) minmax(40px,1fr);gap:6px}
/* 期限列只在 Claude 栏出现。别的栏里它整列填不满：密钥线没有订阅期，另外三家
订阅的台账还没补录——摆一列全是「—」的格子，是拿版面换一个「我们不知道」。 */
#v-providers:not([data-pvkind="claude"]) th.pv-c-term,
#v-providers:not([data-pvkind="claude"]) td.pv-c-term{display:none}
#v-providers[data-pvkind="key"] th.pv-c-meter,#v-providers[data-pvkind="key"] td.pv-c-meter{display:none}
#v-providers[data-pvkind="key"] th.pv-c-name{width:31%}
#v-providers[data-pvkind="key"] th.pv-c-wire{width:14%}
#v-providers[data-pvkind="key"] th.pv-c-cred{width:21%}
#v-providers[data-pvkind="key"] th.pv-c-ops{width:31%} /* 密钥栏无余量列 3+31+14+21+31 = 100 */
/* 密钥栏的铭牌不必再让位给余量：地址整条摊开，两行都不打省略号 */
#v-providers[data-pvkind="key"] .pv-mail{white-space:normal;word-break:break-all;min-width:0}
/* 订阅期限格：三行同一个形状——标签 + 值，值走等宽，扫一列时日期自己排成一队。
只有「到期」那行会变色（过期红、七天内黄），另外两行永远是灰的：开号日不会变，
周限相位是机器读来的观测，两者都不是要人今天动手的事。 */
.pv-term{display:flex;flex-direction:column;gap:3px;min-width:0}
.pv-term .r{display:flex;align-items:baseline;gap:6px;min-width:0;line-height:1.35}
/* 到期那一行右端的「剩 N 天 / 已过 N 天」：和日期分列两端，一竖列扫下去比较的是
同一个位置的两个数。近了变黄、过了变红——和左边的日期同一套变色。 */
.pv-term .r .l{margin-left:auto;flex:0 1 auto;min-width:0;padding-left:8px;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;color:var(--dim)}
.pv-term .r.due .l{color:var(--warn);font-weight:600}
.pv-term .r.over .l{color:var(--bad);font-weight:600}
/* 末行：周限靠左、登记入口靠右，共用一行。入口是一句链接不是一颗按钮——带壳的
按钮在这一格要 64px，而这一列最缺的就是宽度。 */
.pv-term .r.foot{align-items:baseline;justify-content:space-between;gap:8px;margin-top:1px}
.pv-term .r.foot>.r{flex:1 1 auto;min-width:0}
.pv-termlink{flex:none;background:none;border:none;padding:0;font-size:11px;line-height:1.35;
color:var(--brand-2);cursor:pointer;white-space:nowrap}
.pv-termlink:hover{text-decoration:underline}
.pv-termlink:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.pv-term .k{flex:none;font-size:11px;color:var(--faint)}
/* 日期永不让步：它是这一列的台账事实，截一半就不是日期了。要让的是它右边
那句「剩 N 天」——那句缩了还读得出，日期缩了什么都读不出。 */
.pv-term .v{flex:none;font-family:var(--mono);font-size:11.5px;color:var(--dim);
font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-term .v.none{color:var(--faint)}
.pv-term .r.due .v{color:var(--warn)}
.pv-term .r.over .v{color:var(--bad)}
.pv-term .r.stale .v{color:var(--faint)}
/* 车队读数单独占一行，不跟筛选芯片站在一起。三个数按不动就没有意义，所以号名
是一处跳转：点它会清掉当前筛选，在表里只留这个账号。数字本身仍然只是读数。 */
.pv-fleet{display:inline-flex;align-items:center;gap:13px;min-width:0;flex-wrap:wrap}
.pv-fleet .c{display:inline-flex;align-items:baseline;gap:6px;min-width:0}
.pv-fleet .k{flex:none;font-size:11px;color:var(--faint);white-space:nowrap}
.pv-fleet .v{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--dim);
font-variant-numeric:tabular-nums;white-space:nowrap}
.pv-fleet .w{min-width:0;max-width:160px;font-size:11px;color:var(--faint);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-fleet button.w{padding:0;background:none;color:var(--brand-2);text-align:left;cursor:pointer}
.pv-fleet button.w:hover{text-decoration:underline}
.pv-fleet button.w:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.pv-fleet .c.ok .v{color:var(--ok)}
.pv-fleet .c.warn .v{color:var(--warn)}
.pv-fleet .c.bad .v{color:var(--bad)}
.pv-fleet .sep{flex:none;width:1px;height:15px;background:var(--line)}
/* 定宽之后，每一格自己负责收边：外面不会再有人替它加宽。
`.pv-state` 漏了这一条：它自带 min-width:132px，而线路列从来没有 132px，
于是每一行的这一格都比格子宽，靠面板的 overflow:hidden 切掉右边那一截
——「冷却还剩 2m」这类话就是这么被切没的。 */
#v-providers .pv-cred,#v-providers .pv-state{min-width:0}
#v-providers .pv-cred-kind{max-width:100%;overflow:hidden;text-overflow:ellipsis}
#v-providers td{vertical-align:middle;padding-top:9px;padding-bottom:9px}
#v-providers td:first-child{padding-right:0}
/* 铭牌上的线名：刻字方块已经在左边点着这一行，那颗悬停小圆点就是多余的第二个记号
（用户表里没有方块，那颗点照旧留着）。线名不折行，长名字打省略号——折行会让
同一列里高矮不齐，扫起来比一截省略号更费劲（全名在 title 里）。 */
#v-providers .pv-link{font-family:var(--disp);font-size:13.5px;letter-spacing:-.01em;white-space:nowrap;gap:0;
overflow:hidden;text-overflow:ellipsis;max-width:100%;min-width:0;flex:0 1 auto;display:block;text-align:left}
#v-providers .pv-link::before{content:none}
/* ---- 二档：≤1560，撤「令牌」------------------------------------------------
撤的顺序只按一条：这一列没了，别处还找不找得到。令牌状态在抽屉里和授权向导里
都还在；铭牌、用途和余量撤掉就没有别处可看。
密钥栏是例外——它的余量列本来就不在，令牌是这一栏的第二支柱，撤掉只剩名字和
一盏灯，所以它多扛一档。
「用途 · 号池」任何一档都不撤：它是这一页唯一说得出「这个号在给谁干活」的地方，
撤掉它，2026-08-16 那种「API 和拼车撞在同一个号上」就又变回看不见的事。 */
@media (max-width:1560px){
#v-providers td.pv-c-cred,#v-providers th.pv-c-cred{display:none}
#v-providers th.pv-c-name{width:22%}
#v-providers th.pv-c-wire{width:20%}
#v-providers th.pv-c-meter{width:34%}
#v-providers th.pv-c-ops{width:21%} /* 3+22+20+34+21 = 100 */
#v-providers[data-pvkind="sub"] th.pv-c-name{width:22%}
#v-providers[data-pvkind="sub"] th.pv-c-wire{width:20%}
#v-providers[data-pvkind="sub"] th.pv-c-meter{width:36%}
#v-providers[data-pvkind="sub"] th.pv-c-ops{width:19%} /* 3+22+20+36+19 = 100 */
#v-providers[data-pvkind="claude"] th.pv-c-name{width:20%}
#v-providers[data-pvkind="claude"] th.pv-c-wire{width:21%}
#v-providers[data-pvkind="claude"] th.pv-c-meter{width:27%}
#v-providers[data-pvkind="claude"] th.pv-c-term{width:15%}
/* 这一档的面板约 1230px（窗口减侧栏）：铭牌 20% 装得下「claude-side-r12-a07 + 协议标签」，
用途 21% 装得下「接入 + 两枚芯片」，余量 27% 才在 token 数之外留得住窗口名的头几个字；动作格竖排后只要装下「开关 + 两颗图标」
那一行（约 136px），14% 是 172px。 */
#v-providers[data-pvkind="claude"] th.pv-c-ops{width:14%} /* 3+20+21+27+15+14 = 100 */
/* 乘客那半截邮箱在这一档退场：名字已经认得出人，四个字符的邮箱认不出任何东西，全文在 title 里。 */
#v-providers .pv-rider-sub{display:none}
#v-providers[data-pvkind="key"] td.pv-c-cred,#v-providers[data-pvkind="key"] th.pv-c-cred{display:table-cell}
}
/* ---- 三档：≤1400，连内边距和按钮一起收 ---- */
@media (max-width:1400px){
/* 八列 × 左右各 16px = 256px 的内边距，在这一档比任何一列都贵：定宽表里它不会
把表撑宽，而是把每一格的内容往外挤，于是最右边那三个图标被面板的
overflow:hidden 整整齐齐切掉——被切掉的按钮和不存在的按钮长得一样。 */
#v-providers th,#v-providers td{padding-left:11px;padding-right:11px}
#v-providers .pv-ops-acts .btn.icon{width:27px;height:27px}
#v-providers .pv-ops-acts{gap:4px}
#v-providers th.pv-c-name{width:21%}
#v-providers th.pv-c-wire{width:20%}
#v-providers th.pv-c-meter{width:35%}
#v-providers th.pv-c-ops{width:21%} /* 3+21+20+35+21 = 100 */
#v-providers[data-pvkind="sub"] th.pv-c-name{width:20%}
#v-providers[data-pvkind="sub"] th.pv-c-meter{width:37%}
#v-providers[data-pvkind="sub"] th.pv-c-ops{width:20%} /* 3+20+20+37+20 = 100 */
#v-providers[data-pvkind="claude"] th.pv-c-name{width:20%}
#v-providers[data-pvkind="claude"] th.pv-c-wire{width:22%}
#v-providers[data-pvkind="claude"] th.pv-c-meter{width:25%}
#v-providers[data-pvkind="claude"] th.pv-c-term{width:16%}
/* 这一档图标收到 27px，「开关 + 两颗图标」约 164px；14% 在 1121px 上是 157px 减内边距
后仍装得下（内边距 11px）。 */
#v-providers[data-pvkind="claude"] th.pv-c-ops{width:14%} /* 3+20+22+25+16+14 = 100 */
#v-providers[data-pvkind="key"] th.pv-c-name{width:29%}
#v-providers[data-pvkind="key"] th.pv-c-wire{width:16%}
#v-providers[data-pvkind="key"] th.pv-c-cred{width:22%}
#v-providers[data-pvkind="key"] th.pv-c-ops{width:30%} /* 3+29+16+22+30 = 100 */
/* 芯片自己也收一圈壳：这一档里池名比壳值钱得多。 */
#v-providers .ap-cellbtn{padding:2px 7px;gap:4px}
/* 量条那四列跟着收：窗口名先让（三行的次序是固定的，头两个字就够认），
量条留住下限，右边两句不动。 */
#v-providers .pv-m{grid-template-columns:minmax(0,44px) minmax(40px,1fr) 64px 60px 96px;gap:5px}
#v-providers .pv-mnone{grid-template-columns:minmax(0,44px) minmax(40px,1fr);gap:5px}
/* Claude 栏这一档多装一列 token 数，窗口名整列让掉（它在这里只剩不到 1px，
露出半个字比不露更难认；次序固定，全名在 title 里），量条下限再让 4px，
换「用途」那一格的「接入」按钮不被截。 */
#v-providers[data-pvkind="claude"] .pv-m{grid-template-columns:minmax(32px,1fr) 40px 64px 94px;gap:4px}
#v-providers[data-pvkind="claude"] .pv-m .ml{display:none}
#v-providers[data-pvkind="claude"] .pv-mnone{grid-template-columns:minmax(0,44px) minmax(32px,1fr);gap:4px}
/* 协议标签收成信号灯：筛选条上的协议已经用同一套颜色教过一遍，窄屏下这两个
词占掉近三分之一的铭牌宽度，换成两颗灯，行高照旧两行（词在 title 里）。 */
#v-providers .pv-id-top .tag,
#v-providers .pv-id-top .ptag{width:7px;height:7px;padding:0;border-radius:50%;font-size:0;
background:currentColor;margin-left:0!important;overflow:hidden}
#v-providers .pv-id-top .ptag i{display:none}
#v-providers .pv-id-top .tag+.tag{margin-left:4px!important}
}
/* ---- 四档：≤1120 ---- */
@media (max-width:1120px){
/* 抬头装不下「分栏 + 读数窗」时，读数窗自己换行——它是仪表，不是导航，
可以坐第二行；把分栏挤成滚动条才是真的读不出层级。 */
.pv-face{flex-wrap:wrap;gap:0}
#v-providers .pv-face>.pv-live{flex:1 1 100%;margin:0 0 8px;padding:0 10px}
.pv-read,.pv-filters,.pv-tools{padding-left:10px;padding-right:10px}
#v-providers th,#v-providers td{padding-left:9px;padding-right:9px}
#v-providers .pv-ops-acts .btn.icon{width:25px;height:25px}
#v-providers th.pv-c-name{width:21%}
#v-providers th.pv-c-wire{width:19%}
#v-providers th.pv-c-meter{width:36%}
#v-providers th.pv-c-ops{width:21%} /* 3+21+19+36+21 = 100 */
#v-providers[data-pvkind="sub"] th.pv-c-name{width:20%}
#v-providers[data-pvkind="sub"] th.pv-c-meter{width:37%}
#v-providers[data-pvkind="sub"] th.pv-c-ops{width:21%} /* 3+20+19+37+21 = 100 */
/* 这一档撤掉期限列。它是「今天要不要动手」那一类信息，撤掉之后铭牌上那枚
14 天红标仍然会替它开口；而留着它，余量条和「用途 · 号池」两列——这一页
真正不能撤的两列——就要各让出一截。 */
#v-providers[data-pvkind="claude"] th.pv-c-term,
#v-providers[data-pvkind="claude"] td.pv-c-term{display:none}
#v-providers[data-pvkind="claude"] th.pv-c-name{width:20%}
#v-providers[data-pvkind="claude"] th.pv-c-wire{width:28%}
#v-providers[data-pvkind="claude"] th.pv-c-meter{width:32%}
#v-providers[data-pvkind="claude"] th.pv-c-ops{width:17%} /* 3+20+28+32+17 = 100 */
/* 期限列撤了，「还有几天」就没有别处可看——铭牌上那枚红标在这一档回来。 */
#v-providers[data-pvkind="claude"] .pv-plan.pv-due{display:inline-flex}
#v-providers[data-pvkind="key"] th.pv-c-name{width:30%}
#v-providers[data-pvkind="key"] th.pv-c-wire{width:16%}
#v-providers[data-pvkind="key"] th.pv-c-cred{width:23%}
#v-providers[data-pvkind="key"] th.pv-c-ops{width:28%} /* 3+30+16+23+28 = 100 */
/* 窄屏收的是列宽，不是列数：把「几时回来」整列挤掉，剩下的余量读数就又变回一个
不知道该不该等的数字。 */
#v-providers .pv-m{grid-template-columns:minmax(0,40px) minmax(36px,1fr) 58px 92px;gap:4px}
/* token 数是第一个让位的：它在这一行的 title 里还在，而「几时回来」没有别处可去。
它是 display:none，所以 Claude 栏那条更具体的五列规则在这一档也得收成四列，
否则「几时回来」会落进 token 那一列的宽度里被截掉。 */
#v-providers .pv-m .mtk{display:none}
#v-providers .pv-mnone{grid-template-columns:minmax(0,40px) minmax(36px,1fr);gap:4px}
#v-providers[data-pvkind="claude"] .pv-m{grid-template-columns:minmax(0,40px) minmax(36px,1fr) 40px 92px;gap:4px}
#v-providers[data-pvkind="claude"] .pv-m .ml{display:block}
#v-providers[data-pvkind="claude"] .pv-mnone{grid-template-columns:minmax(0,40px) minmax(36px,1fr);gap:4px}
/* 这一格已经是竖排的了，芯片里的字再折一行不会打乱任何东西——「API ↔ 双人车」
是这一页最不该被截掉的一句话。 */
#v-providers .pv-wire .pv-car,#v-providers .pv-wire .pv-cross{white-space:normal}
}
/* ---------- PROVIDERS · 页顶动作条 + 读数窗 ----------
这一页顶上原本并排站着九颗按钮：四家订阅授权、两个 Sidecar 舰队操作、一个
「添加供应商」，外加一条按分栏把其中两个藏起来的规则。它们长得平级，可它们
根本不是一类事——「授权 Claude」和「对比 native / sidecar」唯一的共同点，
是都被放在了右上角；而「对比 / 更新」夹在 Claude 和 Codex 中间，把那串家族
名单拦腰截断，读起来像两家没听说过的订阅供应商。
重排只按一条：这颗按钮作用在谁身上。
作用在整张表 → 页顶两颗按钮各带一张菜单（加一条线 / 管整支舰队）。
家族不再是五颗页面级按钮，而是「添加」这一个动作里的五个选项——它们本来
就是同一件事的分支，摊在顶上只是让主位从一个变成六个。
作用在本栏的实况 → 面板抬头右边那格读数窗（通 / 熔断 / 停靠 / 停用）。
作用在行 → 抬头下面那条轨（用途、家族、搜索）。
于是顶上永远只有一颗实心按钮，而唯一会自己变色的地方，是「几条线现在不接单」。 */
.pv-top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}
.pv-top .eyebrow{margin:0;min-width:0}
/* 和供应商透视板的 .pv-acts 同名：那一条带 margin-top:12px，会把页顶按钮压低一截。 */
.pv-top .pv-acts{display:flex;align-items:center;gap:8px;flex:none;margin-top:0}
.pv-caret{width:0;height:0;margin-left:2px;border:4px solid transparent;border-bottom:0;
border-top-color:currentColor;opacity:.7}
.pv-menu{position:relative}
.pv-pop{position:absolute;z-index:30;top:calc(100% + 7px);right:0;width:290px;padding:5px;
background:var(--glass-thick);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
border:1px solid var(--rail-line);border-radius:var(--r-lg);box-shadow:var(--sheen),var(--shadow-3);
opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .16s var(--ease),transform .28s var(--spring)}
.pv-menu.open .pv-pop{opacity:1;transform:none;pointer-events:auto}
.pv-pop-h{margin:7px 9px 4px;font-size:11.5px;font-weight:600;letter-spacing:0;color:var(--dim)}
.pv-pop button{display:flex;width:100%;align-items:flex-start;gap:10px;padding:8px 9px;border-radius:8px;
background:none;color:var(--text);text-align:left;transition:background .12s}
.pv-pop button:hover{background:var(--fill-3)}
.pv-pop button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.pv-pop button b{flex:none;width:15px;margin-top:1px;text-align:center;font-size:13px;font-weight:600;color:var(--pc,var(--faint))}
.pv-pop button b svg{display:block;width:14px;height:14px;margin:0 auto}
/* 每一项都带一句「它到底是什么」：这些名字（Sidecar、Kiro）光看名字选不出来。
说明压在名字下面而不是并排——并排会把两个字的名字挤成三行。 */
.pv-pop .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.pv-pop .t .l{font-size:13px;line-height:1.35;color:var(--text)}
.pv-pop .t .sub{font-size:11.5px;line-height:1.45;color:var(--faint)}
.pv-pop hr{border:0;border-top:1px solid var(--line-soft);margin:6px 4px}
/* 读数窗：本栏此刻的四种去向，一格一盏灯，坐在抬头右边。
两条规矩让它读起来是仪表而不是又一排筛选按钮：
数字比标签大一档、用等宽表格数字——先读数，再读它是什么；
零是熄的（空心圈 + 灰数字），非零才点灯。于是「熔断 2」自己会跳出来，
而全线在岗的日子这一格安静得像没有东西。
颜色只上在读数和灯上，标签始终中性：仪表的刻字不跟着示数变色。
窗底用 --bg（两套主题里都比台面暗/浅一档），像一块嵌进面板的玻璃。 */
.pv-gauge{display:flex;align-items:center;gap:1px;flex:none;align-self:center;margin:0;
padding:2px;background:var(--bg);border:1px solid var(--line);border-radius:10px;transition:border-color .2s}
/* 白昼台面上 --bg 和抬头那条底色只差一度，压不出「嵌进去」的样子；换深一档的纸面 */
[data-theme=light] .pv-gauge{background:var(--surface-3)}
.pv-gauge.alarm{border-color:var(--bad-a40)}
.pv-gauge.warn{border-color:var(--warn-a40)}
.pv-gauge button{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:8px;
background:none;transition:background .14s,box-shadow .14s}
.pv-gauge button:hover{background:var(--surface-2)}
.pv-gauge button.on{background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line)}
/* 和筛选轨同一条规则：「全部」被选中＝没筛任何东西，所以它不点亮，只当那个
能按回去的词待着（.pv-chip.all.on 那里写着为什么）。 */
.pv-gauge .all.on{background:none;box-shadow:none}
[data-theme=light] .pv-gauge button.on{background:var(--surface)}
.pv-gauge button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.pv-gauge .l{font-size:11.5px;color:var(--faint);white-space:nowrap}
.pv-gauge button.on .l{color:var(--text)}
.pv-gauge .n{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--dim);font-variant-numeric:tabular-nums}
.pv-gauge i{width:6px;height:6px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line)}
.pv-gauge button.lit i{background:var(--lc,var(--faint));box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--lc,var(--faint))}
.pv-gauge button.lit i{box-shadow:0 0 var(--halo-blur) var(--halo-spread) color-mix(in srgb,var(--lc,var(--faint)) var(--halo-alpha),transparent)}
.pv-gauge button.lit .n{color:var(--lc,var(--dim))}
/* 「全部」是复位键不是读数：不给灯，也不给数字（分栏条上那个数就是它） */
.pv-gauge .all .l{color:var(--dim)}
.pv-gauge .sep{width:1px;height:16px;flex:none;margin:0 3px;background:var(--line)}
/* 提示条：筛到「两边都在」时，筛出来的这堆东西本身就是待办。
过去这句话是把导语原地换掉——同样的灰色小字、同一个位置，说的却是要动手的事。
现在它是表上方一条带左轨的条子，末尾直接给出那一步动作。 */
.pv-notice{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0;padding:11px 15px;
font-size:12px;color:var(--dim);border-bottom:1px solid var(--line-soft);
background:var(--warn-a9);box-shadow:inset 3px 0 0 var(--warn)}
.pv-notice[hidden]{display:none}
.pv-notice.info{background:var(--brand-a8);box-shadow:inset 3px 0 0 var(--brand)}
.pv-notice b{color:var(--text);font-weight:650}
.pv-notice button{margin-left:auto;padding:0;background:none;color:var(--brand-2);font-size:12px;font-weight:600;white-space:nowrap}
.pv-notice button:hover{text-decoration:underline}
.pv-plan.fee-miss{color:var(--warn);background:var(--warn-a12);box-shadow:inset 0 0 0 1px var(--warn-a40);cursor:pointer}
.pv-plan.fee-miss:hover{background:var(--warn-a20)}
/* Claude 档位：点钢印就能改。人标的优先；没标时显示 Claude 账号资料接口返回的档位。 */
button.pv-plan{cursor:pointer;font:inherit;font-size:10px;font-weight:600;letter-spacing:.03em;line-height:inherit}
button.pv-plan:hover{filter:brightness(1.12)}
button.pv-plan:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.pv-plan.p20{color:var(--ac);background:var(--ac-a14);box-shadow:inset 0 0 0 1px var(--ac)}
.pv-plan.p5{color:var(--ac);background:var(--ac-a12);box-shadow:inset 0 0 0 1px var(--ac-a14)}
.pv-plan.ptm{color:var(--brand-2);background:var(--brand-dim);box-shadow:inset 0 0 0 1px var(--brand-a40)}
/* 档位图标：Max 是仪表加倍数，Team 是两个人（planIconBody）。 */
.pv-plan.pi{display:inline-flex;align-items:center;gap:2px;padding:1px 4px;font-variant-numeric:tabular-nums;line-height:1.35}
.pv-plan.pi svg{width:11px;height:11px;flex:none}
.pv-plan.pi.miss{padding:0 4px}
.pv-plan.miss{color:var(--faint);background:transparent;box-shadow:none;
border:1px dashed var(--line);padding:0 6px}
.pv-plan.miss:hover{color:var(--dim);border-color:var(--dim)}
.pv-plan.diff{box-shadow:inset 0 0 0 1px var(--warn)}
.jack-pop.plan-pop{width:min(280px,calc(100vw - 24px));z-index:82;padding:12px 13px;
background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-2)}
.plan-pop h4{margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line-soft)}
.plan-opts{display:flex;flex-direction:column;gap:6px}
.plan-opt{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:8px;
background:var(--surface-2);border:1px solid var(--line);color:var(--text);text-align:left;
font-size:13px;font-weight:600}
.plan-opt:hover{border-color:var(--brand-a45);background:var(--surface-3)}
.plan-opt.on{border-color:var(--brand-a50);background:var(--brand-dim);color:var(--brand-2)}
.plan-opt .sub{margin-left:auto;font-size:11px;font-weight:500;color:var(--faint)}
.plan-custom{display:flex;gap:6px;margin-top:10px;align-items:center}
.plan-custom input{flex:1;min-width:0;padding:8px 10px;font-size:12.5px}
.plan-custom .btn{flex:none}
.plan-clear{display:block;margin:8px 0 0;padding:0;background:none;color:var(--faint);font-size:12px}
.plan-clear:hover{color:var(--text);text-decoration:underline}
.plan-hint{margin:8px 0 0;font-size:11.5px;color:var(--faint);line-height:1.5}
.plan-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.plan-chip{height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--line);
background:var(--surface-2);font-size:12px;font-weight:600;color:var(--dim)}
.plan-chip:hover{color:var(--text);border-color:var(--brand-a40)}
.plan-chip.on{border-color:var(--brand-a50);background:var(--brand-dim);color:var(--brand-2)}
.plan-chip:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
/* 弹层打开期间锁住身后的底屏。手指落在弹层里任何一块不滚动的地方（标题、设置区、
页脚），浏览器会顺着祖先链找到 body 去滚——弹层纹丝不动，滚的是底屏。
body{overflow:hidden} 在 iOS Safari 上拦不住这一手，只有 position:fixed 拦得住，
代价是滚动位置要自己记下来、解锁时放回去（见 lockBodyScroll）。 */
body.body-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}
/* ---------- DRAWER ---------- */
.scrim{position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .3s var(--ease);z-index:40}
.scrim.show{opacity:1;pointer-events:auto}
/* 抽屉 = 一张从右侧滑进来的浮动面板（macOS 26 的 inspector / iPad 的 sheet）：
离窗口边 10px，24px 圆角，弹簧曲线滑入。收起时多移出 24px，连投影一起离场。 */
.drawer{position:fixed;top:10px;right:10px;bottom:10px;width:440px;max-width:calc(100vw - 20px);background:var(--surface);
border:1px solid var(--line);border-radius:var(--r-2xl);
transform:translateX(calc(100% + 24px));transition:transform .44s var(--spring);z-index:41;display:flex;flex-direction:column;box-shadow:none;overflow:clip}
/* 移出屏幕的抽屉仍会把投影画回视口，多个隐藏抽屉叠成整页右缘的暗带。
投影只属于真正打开的层级，隐藏态不应在台面上留下任何痕迹。
overflow 同样：页脚比抽屉宽时，多出来的按钮从盒子左边溢出去。抽屉用
translateX(100%) 收起，盒子走了，溢出去的那一截还留在视口里——乘客抽屉
的「退订」关了之后仍压在车卡右下角，就是这一截。裁在盒子里，开着不压页面，
收起也不留在屏幕上。用 clip 不用 hidden：hidden 的盒子仍能被程序滚动，
焦点或 scrollIntoView 会把整个抽屉卷走；滚动只归 .drawer-body。 */
.drawer.show{transform:none;box-shadow:var(--shadow-2)}
/* 供应商看板（z 50/51）之上再叠一层：订阅授权是从额度面板里发起的，
把看板压掉就等于让人在看不见那池账号的情况下往里加账号。 */
.scrim.atop{z-index:52} .drawer.atop{z-index:53}
/* 配线抽屉宽一档：切换链要同时读得下上游全名和它的改写，430px 会把模型名截半 */
.drawer.wide{width:500px}
/* 再宽一档：一份 Sail 诊断要并排读客户机器的检查结果和网关同一段时间的请求表 */
.drawer.xl{width:920px}
/* ---- 家宽出口（#v-egresses，egressinv.go）----
汇总块本身就是筛选；出口按状态分组成卡片，一张卡先说连通（网关测 / 节点测分开），再说
谁在用，最后一行是属性和本月流量费。详情在通用抽屉里，照 ip.cx 的样子一项一行。 */
#v-egresses .ei-bar{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap}
#v-egresses .ei-search{flex:0 1 280px;min-width:0;display:flex;align-items:center;gap:8px;padding:0 14px;height:32px;
border:1px solid var(--input-line);border-radius:var(--r-pill);background:var(--input-bg);color:var(--faint)}
#v-egresses .ei-search input{flex:1;min-width:0;border:0;background:transparent;outline:0;font:inherit;font-size:13px;color:var(--text);padding:0}
/* 读数一行到底，放不下就收省略号（全文在悬停说明里），不把右边的按钮挤到第二行 */
#v-egresses .ei-meta{flex:1 1 0;min-width:0;font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#v-egresses .ei-acts{display:flex;gap:8px;margin-left:auto}
#v-egresses .ei-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px;margin-top:16px}
#v-egresses .ei-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border:1px solid var(--line-soft);
border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--card-shadow);font:inherit;text-align:left;color:var(--text);cursor:pointer;min-width:0}
#v-egresses .ei-tile:hover{border-color:var(--line)}
#v-egresses .ei-tile.on{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
#v-egresses .ei-tile.static{cursor:default}
#v-egresses .ei-tile .k{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim)}
#v-egresses .ei-tile .v{font-family:var(--disp);font-size:22px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
#v-egresses .ei-tile .s{font-size:11.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#v-egresses .ei-tile.bad .v{color:var(--bad)} #v-egresses .ei-tile.warn .v{color:var(--warn)}
#v-egresses .ei-unreg{margin-top:16px;padding:12px 16px;border-radius:var(--r-lg);background:var(--warn-a12);font-size:13px;line-height:1.6;
display:flex;gap:10px 16px;align-items:center;flex-wrap:wrap}
#v-egresses .ei-unreg>div{flex:1 1 360px;min-width:0}
#v-egresses .ei-unreg .mono{font-size:12px}
#v-egresses .ei-group{margin-top:28px}
#v-egresses .ei-group>h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:13px;font-weight:600}
#v-egresses .ei-group>h3 .c{color:var(--faint);font-weight:500;font-variant-numeric:tabular-nums}
#v-egresses .ei-group>h3 .h{color:var(--dim);font-weight:400;font-size:12px}
#v-egresses .ei-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:12px}
#v-egresses .ei-card{display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px 16px 12px;border:1px solid var(--line-soft);
border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--card-shadow);cursor:pointer}
#v-egresses .ei-card:hover{border-color:var(--line)}
/* 屏幕外的卡片先不排版（几百张卡一次排版要两百多毫秒，这样四十多毫秒），滚到附近才画 */
#v-egresses .ei-card{content-visibility:auto;contain-intrinsic-size:auto 240px}
#v-egresses .ei-card:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#v-egresses .ei-card.h-down{border-color:var(--bad-a40)}
#v-egresses .ei-hd{display:flex;align-items:flex-start;gap:10px;min-width:0}
#v-egresses .ei-hd .lamp{margin-top:6px}
#v-egresses .ei-hd>div{min-width:0;flex:1}
#v-egresses .ei-ip{font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
#v-egresses .ei-sub{display:flex;flex-wrap:wrap;gap:0 6px;margin-top:1px;font-size:12px;color:var(--dim)}
#v-egresses .ei-rows{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;align-items:center;font-size:12.5px}
#v-egresses .ei-rows>.l{font-size:12px;color:var(--faint);white-space:nowrap}
#v-egresses .ei-ft{display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--line-soft)}
#v-egresses .ei-ft .meta{flex:1;min-width:0;font-size:11.5px;color:var(--faint)}
/* 显示方式：卡片 / 表格，两颗图标按钮。窄屏只有卡片（宽表到了手机上就是卡片），开关收起。 */
#v-egresses .ei-viewsel button{display:inline-flex;align-items:center;padding:6px 11px}
#v-egresses .ei-viewsel svg{width:15px;height:15px}
/* 表格视图：一行一个出口，每格最多两行（主读数 + 一行灰字），列头可排序。
表头钉在模块页签条下面（--topbar-h）：外框用 overflow:clip 收圆角，它不是滚动容器，
表头才钉得住整页滚动；外框同时是尺寸容器（eit），列按表格自己的宽度从次要的开始收起，
1024 宽的窗口里也不横滑。容器本身就是一个层叠上下文，表头的 z-index 只在表里比大小，
不会压到模块页签条上。 */
#v-egresses .ei-twrap{margin-top:20px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);
box-shadow:var(--card-shadow);overflow:clip;container:eit/inline-size}
#v-egresses .ei-t{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:13px}
#v-egresses .ei-t th,#v-egresses .ei-t td{padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle;
overflow:hidden;white-space:nowrap}
#v-egresses .ei-t th:first-child,#v-egresses .ei-t td:first-child{padding-left:16px}
#v-egresses .ei-t th:last-child,#v-egresses .ei-t td:last-child{padding-right:12px}
#v-egresses .ei-t thead th{position:sticky;top:var(--topbar-h,120px);z-index:2;padding-top:9px;padding-bottom:9px;
background:var(--surface);border-bottom-color:var(--line);font-size:12px}
#v-egresses .ei-t th[aria-sort] .bl-th{color:var(--text)}
#v-egresses .ei-t .num{text-align:right}
#v-egresses .ei-t tbody:last-child tr:last-child td{border-bottom:0}
/* 列宽：账号一列不定宽，吃剩下的；其余定宽。表变窄时依次收起 本月 → 近 1 小时 → 位置 → 近 24 小时，
每一档都给账号留够两个名字（≥ 206px），最后一档留一个名字加「+N」。近 7 天不收：挑出口主要看它。 */
#v-egresses .ei-t .c-st{width:146px} #v-egresses .ei-t .c-ip{width:160px} #v-egresses .ei-t .c-geo{width:176px}
#v-egresses .ei-t .c-ms{width:96px} #v-egresses .ei-t .c-up{width:124px} #v-egresses .ei-t .c-wk{width:112px}
#v-egresses .ei-t .c-req{width:88px} #v-egresses .ei-t .c-cost{width:88px} #v-egresses .ei-t .c-act{width:76px}
@container eit (min-width:1432px){#v-egresses .ei-t .c-geo{width:220px}}
@container eit (max-width:1269px){#v-egresses .ei-t .c-cost{display:none}}
@container eit (max-width:1181px){#v-egresses .ei-t .c-req{display:none}}
@container eit (max-width:1093px){#v-egresses .ei-t .c-geo{display:none}}
@container eit (max-width:851px){#v-egresses .ei-t .c-up{display:none}}
#v-egresses .ei-t tbody tr[data-id]{cursor:pointer}
#v-egresses .ei-t tbody tr[data-id]:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
/* 有事的行在左缘留一道色条，和出口状态页同一个记号 */
#v-egresses .ei-t tr.h-down td:first-child{box-shadow:inset 3px 0 0 var(--bad-fill)}
#v-egresses .ei-t tr.h-warn td:first-child{box-shadow:inset 3px 0 0 var(--warn-fill)}
#v-egresses .ei-t tr.h-held td{color:var(--dim)}
/* 分组抬头：一行灰底小字，和卡片视图的分组标题同一句话。这一行也按列出格子（同样的类名），
不用 colspan：列被收起时 colspan 会凭空多出几列、把别的列挤窄。字写在第一格里、越过后面的空格。 */
#v-egresses .ei-t tr.ei-tg>*{padding-top:8px;padding-bottom:8px;background:var(--fill-4);border-bottom:1px solid var(--line-soft)}
#v-egresses .ei-t tr.ei-tg th{overflow:visible;font-size:12.5px;font-weight:600;color:var(--text);text-align:left}
#v-egresses .ei-t tr.ei-tg th>span{display:inline-flex;align-items:center;gap:8px}
#v-egresses .ei-t tr.ei-tg .c{color:var(--faint);font-weight:500;font-variant-numeric:tabular-nums}
#v-egresses .ei-t tr.ei-tg .h{color:var(--dim);font-weight:400;font-size:12px}
#v-egresses .ei-l1{overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
#v-egresses .ei-l2{margin-top:2px;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
#v-egresses .ei-l1.ip{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:-.01em}
#v-egresses .ei-l2 .bad,#v-egresses .ei-l1 .bad,#v-egresses .ei-l1.bad{color:var(--bad)}
#v-egresses .ei-l2 .warn,#v-egresses .ei-l1 .warn,#v-egresses .ei-l1.warn{color:var(--warn)}
#v-egresses .ei-l2 .ok{color:var(--ok)}
#v-egresses .ei-t .faint{color:var(--faint)}
#v-egresses .ei-t .ei-pill{max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* 近 24 小时：一格一小时，整条是一块渐变（不是 24 个元素），格缝由遮罩切出来。
定宽 96px = 24 格 × 4px（3px 色块 + 1px 缝），落在整像素上才不发虚。 */
.ei-strip{display:block;width:96px;height:13px;margin:2px 0 1px;border-radius:2px;background:var(--fill-2);
-webkit-mask:repeating-linear-gradient(90deg,#000 0 3px,transparent 3px 4px);mask:repeating-linear-gradient(90deg,#000 0 3px,transparent 3px 4px)}
#v-egresses .ei-tac{display:flex;align-items:center;gap:4px;min-width:0}
#v-egresses .ei-tac .ei-acct{flex:0 1 auto;min-width:0;display:block}
#v-egresses .ei-tac .more{flex:none}
#v-egresses .ei-tac .more{font-size:12px;color:var(--dim)}
#v-egresses .ei-t td.c-act{text-align:right;font-size:0}
#v-egresses .ei-t td.c-act .btn+.btn{margin-left:2px}
#v-egresses .ei-t td.c-act .btn.icon.bad{color:var(--bad)}
#v-egresses .ei-t td.c-act .btn.icon.bad:hover{background:var(--bad-a12)}
/* 断流（egressdrops.go）：一行一个出口 IP。列头只说明、不排序，顺序由后端排好（常断的在前）。
在用账号一列吃剩下的宽度；表变窄时依次收起 一起断 → 断开的请求 → 近 7 天 → 结论和账号，
手机上留 IP、单独断和「换出口」。 */
#v-egresses .ei-dnote{margin-top:16px;padding:10px 14px;border-radius:var(--r-lg);background:var(--fill-4);font-size:12.5px;line-height:1.6;color:var(--dim)}
#v-egresses .ei-dnote b{font-weight:600;color:var(--text)}
#v-egresses .ei-dt thead th{font-weight:500;color:var(--dim);text-align:left}
#v-egresses .ei-dt thead th.num{text-align:right}
#v-egresses .ei-dt .c-dlv{width:112px} #v-egresses .ei-dt .c-ip{width:188px} #v-egresses .ei-dt .c-solo{width:112px}
#v-egresses .ei-dt .c-dtr{width:196px} #v-egresses .ei-dt .c-shared{width:80px} #v-egresses .ei-dt .c-str{width:108px}
#v-egresses .ei-dt .c-act{width:96px}
#v-egresses .ei-dt td.c-act{font-size:13px}
#v-egresses .ei-dt tbody tr[data-k]{cursor:pointer}
#v-egresses .ei-dt tbody tr[data-k]:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
@container eit (max-width:1080px){#v-egresses .ei-dt .c-shared{display:none}}
@container eit (max-width:980px){#v-egresses .ei-dt .c-str{display:none}}
@container eit (max-width:820px){#v-egresses .ei-dt .c-dtr{display:none}}
@container eit (max-width:620px){#v-egresses .ei-dt .c-dlv,#v-egresses .ei-dt .c-acct{display:none}#v-egresses .ei-dt .c-ip{width:auto}}
/* 近 7 天的断流轴：168px = 7 天 × 24px，一格一天；一次断开一道 2px 的竖线 */
.ei-dtrack{position:relative;display:block;width:168px;height:14px;border-radius:3px;background-color:var(--fill-4);
background-image:repeating-linear-gradient(90deg,transparent 0 23px,var(--line-soft) 23px 24px)}
.ei-dtrack.wide{width:100%;height:22px;background-image:repeating-linear-gradient(90deg,transparent 0 calc(100%/7 - 1px),var(--line-soft) calc(100%/7 - 1px) calc(100%/7))}
.ei-dtrack i{position:absolute;top:2px;bottom:2px;width:2px;margin-left:-1px;border-radius:1px;background:var(--bad-fill)}
.ei-dtrack i.g{background:var(--faint);opacity:.55}
.ei-pill{display:inline-flex;align-items:center;gap:5px;flex:none;padding:2px 9px;border-radius:var(--r-pill);font-size:11.5px;font-weight:600;white-space:nowrap}
.ei-pill.ok{background:var(--ok-a12);color:var(--ok)} .ei-pill.warn{background:var(--warn-a12);color:var(--warn)}
.ei-pill.bad{background:var(--bad-a12);color:var(--bad)} .ei-pill.mute{background:var(--fill-3);color:var(--dim)}
.ei-pill.info{background:var(--gm-a12);color:var(--gm)}
.ei-dot{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:var(--faint)}
.ei-dot.ok{background:var(--ok-fill)} .ei-dot.warn{background:var(--warn-fill)} .ei-dot.bad{background:var(--bad-fill)}
.ei-dot.idle{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ok-fill)}
.ei-vant{display:flex;flex-wrap:wrap;gap:4px 12px}
.ei-vant>span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ei-vant .bad{color:var(--bad)} .ei-vant .warn{color:var(--warn)} .ei-vant .faint{color:var(--faint)}
.ei-bars{display:flex;align-items:stretch;gap:1.5px;height:16px;min-width:0;flex:1}
.ei-bars i{flex:1;min-width:0;border-radius:2px;background:var(--ok-fill);opacity:.85}
.ei-bars i.w{background:var(--warn-fill)} .ei-bars i.b{background:var(--bad-fill)} .ei-bars i.n{background:var(--fill-2);opacity:1}
.ei-barline{display:flex;align-items:center;gap:8px;min-width:0}
.ei-barline .pct{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.ei-accts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-width:0}
.ei-acct{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:1px 8px;border-radius:6px;background:var(--fill-4);font-size:12px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ei-acct.off{color:var(--faint);text-decoration:line-through}
.ei-acct.via{background:var(--warn-a12)}
.ei-why{padding:8px 12px;border-radius:var(--r-md);background:var(--fill-4);font-size:12.5px;line-height:1.55;color:var(--dim)}
.ei-why.bad{background:var(--bad-a10);color:var(--text)} .ei-why.warn{background:var(--warn-a12);color:var(--text)}
/* 详情抽屉：ip.cx 式的属性表，标签右对齐 */
.ei-sec{margin-top:22px}
.ei-sec:first-child{margin-top:4px}
.ei-sec>h4{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:13px;font-weight:600}
.ei-sec>h4 .r{margin-left:auto;font-size:12px;font-weight:400;color:var(--faint)}
.ei-kv{border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
.ei-kv>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:14px;align-items:center;padding:9px 14px;border-top:1px solid var(--line-soft);font-size:13px}
.ei-kv>div:first-child{border-top:0}
.ei-kv>div>span:first-child{text-align:right;font-size:12.5px;color:var(--dim)}
.ei-kv>div>span:last-child{min-width:0;overflow-wrap:anywhere}
.ei-kv .n{display:block;margin-top:2px;font-size:11.5px;color:var(--faint)}
.ei-score{display:flex;align-items:center;gap:10px}
.ei-score .t{flex:0 1 160px;height:7px;border-radius:4px;background:var(--fill-3);overflow:hidden}
.ei-score .t i{display:block;height:100%;border-radius:4px}
.ei-spark{display:block;width:100%;height:56px}
.ei-box{padding:12px 14px;border:1px solid var(--line-soft);border-radius:var(--r-lg)}
.ei-box .ei-bars{height:18px}
.ei-axis{display:flex;justify-content:space-between;gap:8px;margin-top:4px;font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.ei-sub-h{margin:16px 0 8px;font-size:12px;font-weight:500;color:var(--dim)}
.ei-acts-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.ei-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.ei-tbl th{padding:8px 12px;border-bottom:1px solid var(--line-soft);text-align:left;font-size:11.5px;font-weight:500;color:var(--faint);white-space:nowrap}
.ei-tbl td{padding:9px 12px;border-top:1px solid var(--line-soft);vertical-align:top}
.ei-tbl tr:first-child td{border-top:0}
.ei-tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ei-tblwrap{border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow-x:auto}
.ei-add textarea{width:100%;min-height:160px;font-family:var(--mono);font-size:12px;white-space:pre;overflow-wrap:normal;overflow-x:auto}
.ei-res{font-variant-numeric:tabular-nums;white-space:nowrap}
.ei-res div{white-space:normal}
.ei-range{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px}
.ei-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ei-acctbox:empty{display:none}
.ei-acctbox{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.ei-acctbox h4{margin:0 0 10px;font-size:13px;font-weight:600}
.ei-acctbox .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.ei-acctbox .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ei-swlist{display:flex;flex-direction:column;gap:10px}
.ei-swrow{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:var(--r-lg)}
.ei-swrow.off{opacity:.55}
.ei-swhd{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:13px}
.ei-swhd input{margin-top:3px}
.ei-swhd>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.ei-swhd .n{font-size:12px;color:var(--faint)}
.ei-swrow select{width:100%;min-width:0;font-size:13px;font-variant-numeric:tabular-nums}
.ei-swdet{margin-top:-2px;font-size:12px;color:var(--faint)}
.ei-swwarn{font-size:12px;color:var(--warn)}
.ei-swok{margin-top:6px;font-size:12.5px;color:var(--ok)}
.ei-check{display:flex;align-items:flex-start;gap:8px;margin-top:14px;font-size:13px;cursor:pointer}
.ei-check input{margin-top:3px}
.ei-swwhy{width:100%;margin-top:8px}
.ei-steps{display:flex;flex-direction:column;gap:5px}
.ei-steps:empty{display:none}
.ei-step{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--faint)}
.ei-step .ic{flex:none;width:16px;height:16px;margin-top:1px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;box-shadow:inset 0 0 0 1.5px var(--fill-1)}
.ei-step .n{color:var(--faint)}
.ei-step.run{color:var(--text)} .ei-step.run .ic{box-shadow:none;border:2px solid var(--fill-2);border-top-color:var(--text);animation:pspin .8s linear infinite}
.ei-step.done{color:var(--text)} .ei-step.done .ic{background:var(--ok-fill);box-shadow:none;color:var(--btn-ink)}
.ei-step.fail{color:var(--bad)} .ei-step.fail .ic{background:var(--bad-fill);box-shadow:none;color:#fff}
.px-pickwrap{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.px-recbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;border-radius:var(--r-md);border:1px solid var(--line-soft);background:var(--fill-4);font-size:12px;line-height:1.45}
.px-recbar .txt{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0;flex:1}
.px-recbar .tag{display:inline-flex;align-items:center;padding:2px 7px;border-radius:var(--r-pill);font-weight:600;font-size:11px;white-space:nowrap}
.px-recbar .tag.pair{background:var(--ok-a12);color:var(--ok)}
.px-recbar .tag.team{background:var(--gm-a12);color:var(--gm)}
.px-recbar .tag.idle{background:var(--fill-3);color:var(--text)}
.px-recbar .btn{flex:none;white-space:nowrap}
.px-trig{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:9px 12px;border:1px solid var(--input-line);border-radius:var(--r-md);background:var(--input-bg);color:var(--text);font-size:12.5px;text-align:left;cursor:pointer;transition:border-color .15s}
.px-trig:hover,.px-trig.open{border-color:var(--text)}
.px-trig-main{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0;flex:1}
.px-trig-main .ip{font-family:var(--mono);font-weight:600;color:var(--text)}
.px-trig-main .sub{font-size:12px;color:var(--dim)}
.px-trig-caret{flex:none;font-size:12px;color:var(--dim);transition:transform .15s}
.px-trig.open .px-trig-caret{transform:rotate(180deg)}
.px-panel{display:none;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:0 8px 28px rgba(0,0,0,.18);overflow:hidden;margin-top:2px}
.px-panel.open{display:block}
.px-top{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line-soft);background:var(--fill-4)}
.px-q{width:100%;height:34px;box-sizing:border-box;padding:6px 11px;font-size:12.5px;border:1px solid var(--input-line);border-radius:var(--r-md);background:var(--input-bg);color:var(--text)}
.px-tabs{display:flex;align-items:center;flex-wrap:wrap;gap:5px}
.px-tab{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--r-pill);border:1px solid transparent;background:var(--fill-3);color:var(--dim);font-size:11.5px;cursor:pointer;white-space:nowrap}
.px-tab .cnt{font-family:var(--mono);font-size:10.5px;opacity:.85}
.px-tab.on{background:var(--text);color:var(--bg);font-weight:600}
.px-regs{display:flex;flex-wrap:wrap;gap:5px;max-height:66px;overflow-y:auto;padding:2px 0}
.px-reg{padding:2px 8px;border-radius:var(--r-pill);border:1px solid var(--line-soft);background:var(--surface);color:var(--dim);font-size:11px;cursor:pointer;white-space:nowrap}
.px-reg.on{border-color:var(--text);color:var(--text);font-weight:600;background:var(--fill-3)}
.px-list{max-height:320px;overflow-y:auto}
.px-empty{padding:18px 12px;text-align:center;font-size:12px;color:var(--dim)}
.px-ghd{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 12px;background:var(--surface-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);font-size:11.5px;font-weight:600;color:var(--dim)}
.px-ghd:first-child{border-top:0}
.px-item{display:flex;flex-direction:column;gap:4px;width:100%;padding:8px 12px;border:0;border-top:1px solid var(--line-soft);background:transparent;color:var(--text);text-align:left;cursor:pointer;font-size:12.5px;transition:background .12s}
.px-item:first-child{border-top:0}
.px-item:hover{background:var(--fill-4)}
.px-item.on{background:var(--ok-a12)}
.px-item:disabled{opacity:.48;cursor:not-allowed}
.px-it1{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;width:100%}
.px-itl{display:inline-flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}
.px-itl .ip{font-family:var(--mono);font-weight:600;font-size:12.5px;color:var(--text)}
.px-itl .ep{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.px-itl .geo{font-size:12px;color:var(--dim)}
.px-itr{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums;margin-left:auto}
.px-itr .ms.warn{color:var(--warn)} .px-itr .ms.bad{color:var(--bad)}
.px-it2{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding-left:14px}
.px-uchip{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:5px;background:var(--fill-3);font-size:11.5px;color:var(--text)}
.px-uchip.same{background:var(--ok-a12)}
.px-uchip .pl{padding:0 4px;border-radius:3px;background:var(--fill-2);font-size:10.5px;font-weight:600}
.px-uchip .em{color:var(--dim);font-family:var(--mono);font-size:11px}
.sc-egcard{margin-top:8px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:var(--r-lg);background:var(--fill-4);font-size:12.5px}
.sc-egcard:empty{display:none}
.sc-eghd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sc-egmeta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;font-size:12.5px;color:var(--dim)}
.sc-egmeta .ip{font-family:var(--mono);font-weight:600;color:var(--text);font-size:13px}
.sc-egacts{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:none}
.sc-egswap{display:none;margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.sc-egswap.open{display:block}
.sc-egswap:empty{display:none}
.sc-egswap-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:13px}
@media (prefers-reduced-motion:reduce){.ei-step.run .ic{animation:none}}
@media (max-width:860px){
#v-egresses .ei-search{flex:1 1 100%}
#v-egresses .ei-acts{margin-left:0}
#v-egresses .ei-viewsel{display:none}
.ei-kv>div{grid-template-columns:84px minmax(0,1fr);gap:10px}
.ei-range{grid-template-columns:1fr 1fr}
}
/* 客户工作台：一个人的四面（总览 / 余额 / 额度 / 请求）。z 刻意压在通用抽屉
(40/41) 之下——充值、座位、档案这些动作都从工作台里发起、叠在它上面，做完
回来人还在原地；这正是它存在的理由：上下文不再跟着页面切换丢掉。 */
.cwb-scrim{position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .3s var(--ease);z-index:36}
.cwb-scrim.show{opacity:1;pointer-events:auto}
.drawer.cwb{width:840px;max-width:96vw;z-index:37}
.cwb-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
padding:12px 22px;border-bottom:1px solid var(--line-soft)}
.cwb-sub{font-size:12px;color:var(--faint)}
.cwb-head-acts{display:flex;align-items:center;gap:10px;flex-shrink:0}
.drawer.cwb .drawer-head h3{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cwb-actrow{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.cwb-facts{display:flex;gap:8px 18px;flex-wrap:wrap;font-size:12.5px;color:var(--dim);margin:0 0 18px}
.cwb-facts b{color:var(--text);font-weight:600}
/* 计费未结：一条一行，说明文字与列表、列表与输入框之间都留出一档间距 */
.cwb-unsettled{margin:10px 0 14px;padding-left:18px;font-size:12.5px;color:var(--dim);line-height:1.7}
.cwb-unsettled b{color:var(--text);font-weight:600}
.cwb-actrow input#cwb-settle-reason{flex:1;min-width:220px}
/* 借用他人订阅：一份订阅一行，左边是谁的哪一份、用了多少，右边一颗收回。
行与行、说明与列表、列表与按钮之间各留一档间距，和计费未结同一套数。 */
.cwb-borrows{display:flex;flex-direction:column;gap:8px;margin:10px 0 14px}
.cwb-borrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);
border-radius:var(--r-md);background:var(--surface-2)}
.cwb-borrow.off{opacity:.72}
.cwb-borrow-main{flex:1;min-width:0}
.cwb-borrow-main .t{font-size:13px;color:var(--text);line-height:1.5}
.cwb-borrow-main .t .upk-pill{margin-left:8px;vertical-align:1px}
.cwb-borrow-main .s{font-size:12px;color:var(--dim);line-height:1.6;margin-top:3px}
.cwb-borrow-main .s b{color:var(--text);font-weight:600}
/* 添加借用的选择抽屉：搜索框、单选列表、选中后的说明，三段各自留白 */
.brw-search{width:100%;margin:0 0 10px}
.brw-opts{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto;padding:2px}
.brw-opt{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border:1px solid var(--line);
border-radius:var(--r-md);background:var(--surface);cursor:pointer}
.brw-opt.on{border-color:var(--focus);box-shadow:var(--focus-ring)}
.brw-opt input{margin-top:3px;flex:none}
.brw-opt .t{display:block;font-size:13px;color:var(--text);line-height:1.5}
.brw-opt .s{display:block;font-size:12px;color:var(--dim);line-height:1.5;margin-top:2px}
.brw-sum{margin:14px 0 0;padding:12px 14px;border-radius:var(--r-md);background:var(--surface-2);
font-size:12.5px;line-height:1.7;color:var(--dim)}
.brw-sum b{color:var(--text);font-weight:600}
/* 车辆工作台：客户工作台的镜像。z 在它上一档、仍在通用抽屉之下；两台工作台
互相跳转时先关对方——一个人和一辆车同时摊开只会互相挡住。 */
.carb-scrim{position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .3s var(--ease);z-index:38}
.carb-scrim.show{opacity:1;pointer-events:auto}
.drawer.carb{width:840px;max-width:96vw;z-index:39}
/* 把车名从死文本变成门：套在原来的排版类外面，只负责「是个链接」这件事 */
.carb-link{background:none;border:none;padding:0;margin:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.carb-link:hover{color:var(--brand-2)}
.carb-seatlink{color:var(--brand-2);white-space:nowrap}
.carb-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
/* 全局搜索（⌘K）：菜单负责巡视，这里负责「我知道我要找谁」。z 在 jack(70)
之上、确认卡(80) 之下——从任何叠层里都按得出来、也压不住确认。 */
.pal-scrim{position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .18s;z-index:74}
.pal-scrim.show{opacity:1;pointer-events:auto}
/* ⌘K：Spotlight 的样子——一块厚玻璃，顶上一个大号搜索框，结果是圆角行 */
.pal{position:fixed;top:14%;left:50%;transform:translate(-50%,-10px) scale(.98);opacity:0;pointer-events:none;
width:600px;max-width:92vw;background:var(--glass-thick);-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);
border:1px solid var(--rail-line);border-radius:var(--r-2xl);
box-shadow:var(--sheen),var(--shadow-2);z-index:75;overflow:hidden;transition:opacity .2s var(--ease),transform .32s var(--spring)}
.pal.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.pal-find{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line-soft)}
.pal-find svg{width:19px;height:19px;color:var(--dim);flex:none}
.pal-find input{flex:1;background:transparent;border:none;outline:none;box-shadow:none;padding:0;font:inherit;font-size:19px;letter-spacing:-.015em;color:var(--text)}
.pal-find input:focus{box-shadow:none}
.pal-list{max-height:56vh;overflow-y:auto;padding:8px}
.pal-g{font-size:12px;letter-spacing:0;color:var(--dim);padding:10px 12px 4px;font-weight:600}
.pal-row{display:flex;align-items:baseline;gap:10px;width:100%;padding:9px 12px;border-radius:var(--r-md);background:transparent;text-align:left}
.pal-row .lb{font-weight:600;color:var(--text);flex:none}
.pal-row .sb{font-size:12px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.pal-row.on,.pal-row:hover{background:var(--fill-3)}
.pal-hint{padding:18px 14px;color:var(--faint);font-size:12.5px}
.pal-kbd{font-family:var(--sans);font-size:11px;font-weight:500;color:var(--dim);background:var(--fill-4);border:0;border-radius:5px;padding:1px 6px;margin-left:2px}
@media (max-width:860px){.pal{top:8%}.pal-kbd{display:none}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 18px 16px 24px;border-bottom:1px solid var(--line-soft)}
.drawer-head h3{font-family:var(--disp);font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0}
.drawer-body{padding:20px 24px;overflow-y:auto;flex:1;min-height:0}
.drawer-foot{padding:14px 20px 16px 24px;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-items:center}
/* 乘客抽屉的动作不是一排同类按钮。上面一行是离开：退订、待补缴、放开座位，
都不读表单。下面一行才提交抽屉里改过的车型和有效期。430px 里排成一行必然
从左边溢出去，所以按这个分界折成两行，行内再放不下就换行，不缩字。 */
.seat-acts{display:flex;flex-direction:column;gap:10px;width:100%;min-width:0}
.seat-acts-quiet,.seat-acts-go{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;min-width:0;max-width:100%}
.seat-acts-quiet{justify-content:flex-start}
.seat-acts-go{justify-content:flex-end}
.seat-acts .btn{flex:0 0 auto;max-width:100%}
.fee-lead{font-size:13px;color:var(--dim);line-height:1.6;margin:0 0 16px}
/* ---------- 用户选择器（开单抽屉） ----------
原生下拉在用户上百之后找不到人：不能打字，一行一个长串，备注、用户名、当前订阅挤成
一句。这里换成抽屉里内嵌的搜索列表：打字即筛（备注 / 邮箱 / 用户名 / ID / 账号名），
每人两行，右侧只放和这次开单有关的事实（续期、当前档位、新注册）。选中后折成一张卡。
不做浮层：抽屉在手机上是整屏，浮层要跟锚点、躲软键盘；内嵌列表两种屏幕都不用。 */
.upk{display:flex;flex-direction:column;gap:10px}
.upk-find{display:flex;align-items:center;gap:9px;height:42px;padding:0 5px 0 13px;
background:var(--input-bg);border:1px solid var(--input-line);border-radius:var(--r-md);color:var(--faint);
transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.upk-find:focus-within{border-color:var(--focus);box-shadow:var(--focus-ring);color:var(--dim)}
.upk-find svg{flex:none}
.upk-find input{flex:1;min-width:0;height:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:14px}
.upk-find input:focus{box-shadow:none}
.upk-find input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.upk-x{display:flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border-radius:var(--r-sm);
background:none;color:var(--faint);font-size:17px;line-height:1;padding:0 0 2px}
.upk-x:hover{background:var(--fill-4);color:var(--text)}
.upk-x:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.upk-segs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:0 2px}
.upk-segs::-webkit-scrollbar{display:none}
.upk-seg{flex:none;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:var(--r-pill);
background:var(--fill-4);font-size:12px;font-weight:500;color:var(--dim);transition:background-color .14s,color .14s}
.upk-seg:hover{background:var(--fill-3);color:var(--text)}
.upk-seg b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--faint)}
.upk-seg.on{background:var(--brand);color:var(--btn-ink)}
.upk-seg.on b{color:var(--btn-ink);opacity:.66}
.upk-seg:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.upk-box{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.upk-list{max-height:400px;overflow-y:auto;overscroll-behavior:contain;padding:4px}
.upk-grp{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 10px 5px;
font-size:11.5px;font-weight:600;color:var(--dim)}
.upk-grp:first-child{padding-top:6px}
.upk-grp span{font-weight:500;color:var(--faint)}
.upk-row{display:flex;align-items:center;gap:11px;width:100%;min-height:52px;padding:7px 10px;border-radius:var(--r-md);
background:none;color:var(--text);text-align:left;cursor:pointer;transition:background-color .1s}
.upk-row.hi{background:var(--fill-3)}
.upk-av{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
background:var(--fill-4);color:var(--dim);font-size:13px;font-weight:600;line-height:1;text-transform:uppercase}
.upk-who{display:block;flex:1;min-width:0}
.upk-nm{display:flex;align-items:center;gap:6px;min-width:0;font-size:13.5px;font-weight:600;line-height:1.35}
.upk-nm .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upk-nm .dk-stamp{height:14px;padding:0 3px}
.upk-sub{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upk-id{font-family:var(--mono);font-size:11px}
.upk-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px;max-width:46%;min-width:0;text-align:right}
.upk-tier{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--dim);white-space:nowrap}
.upk-meta{max-width:100%;font-size:11.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upk-meta.mono{font-family:var(--mono);font-size:11px}
.upk-pill{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-pill);
font-size:11px;font-weight:600;white-space:nowrap}
.upk-pill.renew{background:var(--brand-dim);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.upk-pill.new{background:var(--ok-a12);color:var(--ok)}
.upk-none{font-size:12px;color:var(--faint);white-space:nowrap}
.upk-row mark,.upk-ident mark{background:var(--fill-2);color:inherit;border-radius:3px;padding:0 1px;margin:0 -1px}
.upk-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;
border-top:1px solid var(--line-soft);background:var(--surface-2);font-size:11.5px;color:var(--faint)}
.upk-keys{display:flex;align-items:center;gap:10px;white-space:nowrap}
.upk-keys kbd{font-family:var(--sans);font-size:10.5px;font-weight:500;color:var(--dim);background:var(--fill-4);
border-radius:4px;padding:1px 5px;margin-right:3px}
.upk-empty{padding:30px 16px 28px;text-align:center}
.upk-empty b{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px;word-break:break-all}
.upk-empty span{font-size:12px;color:var(--faint);line-height:1.6}
.upk-more{padding:10px 12px 8px;text-align:center;font-size:11.5px;color:var(--faint)}
.upk.closed .upk-segs,.upk.closed .upk-box{display:none}
.upk-av.blank{background:none;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--faint)}
.upk-cancel{flex:none;height:30px;padding:0 11px;border-radius:var(--r-sm);background:none;
font-size:12.5px;font-weight:500;color:var(--dim)}
.upk-cancel:hover{background:var(--fill-4);color:var(--text)}
.upk-cancel:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.upk-pill.warn{background:var(--warn-a12);color:var(--warn)}
.upk-pill.mute{background:var(--fill-4);color:var(--dim)}
.upk-tier.warn{color:var(--warn)}
.upk-meta .warn{color:var(--warn)}
/* 列表下方的额外动作（「新建用户并安排」）：虚线框，和行同一个排法，读得出是「另一条路」 */
.upk-new{display:flex;align-items:center;gap:11px;width:100%;min-height:52px;padding:8px 10px;
border:1px dashed var(--line);border-radius:var(--r-lg);background:none;color:var(--text);text-align:left;cursor:pointer}
.upk-new:hover{background:var(--fill-4)}
.upk-new:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.upk-new .upk-av{font-size:17px;font-weight:500}
/* 身份块在别的容器里（「按客户设置」名单）：头像 + 两行，和列表行同一个样子 */
.upk-ident{display:flex;align-items:center;gap:11px;min-width:0}
.upk-ident .upk-nm{font-size:13px}
.upk-ident .upk-pill{height:18px;padding:0 6px;font-size:10.5px}
/* 成员表：身份列吃掉剩余宽度、邮箱省略，不把「移除」挤出抽屉 */
table.gov-mem td:first-child{width:100%;max-width:0}
table.gov-mem td:not(:first-child){white-space:nowrap}
.shuttle-search .upk-find{height:34px;padding:0 4px 0 11px;gap:8px}
.shuttle-search .upk-find input{width:auto!important;padding:0;border:0;border-radius:0;background:transparent;font-size:13px}
/* 选中后：一张卡。名字一行、身份一行，下面三格是开单前要看的三件事 */
.upk-card{padding:14px 16px 15px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.upk-card-hd{display:flex;align-items:center;gap:12px}
.upk-card .upk-av{width:40px;height:40px;font-size:16px;background:var(--fill-3);color:var(--text)}
.upk-card .upk-nm{font-size:15px}
.upk-card .upk-sub{white-space:normal;overflow-wrap:anywhere}
.upk-card-hd .btn{flex:none}
.upk-facts{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:12px 14px;
margin-top:14px;padding-top:13px;border-top:1px solid var(--line-soft)}
.upk-fact{min-width:0}
.upk-fact .k{font-size:11px;color:var(--faint)}
.upk-fact .v{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:13px;font-weight:600;
font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upk-fact .v .tier-ic{color:var(--text)}
.upk-fact .v.warn{color:var(--warn)}
.upk-fact .v.dim{color:var(--dim);font-weight:500}
.upk-fact .s{margin-top:3px;font-size:11.5px;color:var(--faint);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upk-fact .s.mono{font-family:var(--mono);font-size:11px}
@media (max-width:720px){
.upk-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.upk-fact.wide{grid-column:1/-1}
.upk-keys{display:none}
}
/* 触屏：输入框 16px 防止 iOS 对焦放大；行和筛选片加高到手指够得着 */
@media (pointer:coarse){
.upk-find{height:46px}
.upk-find input{font-size:16px}
.upk-seg{height:32px;padding:0 11px;font-size:12.5px}
.upk-row{min-height:58px;padding:9px 10px}
.upk-av{width:36px;height:36px;font-size:14px}
.upk-nm{font-size:14.5px}
.upk-sub{font-size:12.5px}
.upk-keys{display:none}
.upk-x{width:36px;height:36px}
.upk-new{min-height:58px}
.upk-cancel{height:36px}
.shuttle-search .upk-find input{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.upk-find,.upk-row,.upk-seg{transition:none}}
.fee-list{display:flex;flex-direction:column;gap:12px}
.fee-card{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.fee-card .who{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin-bottom:12px}
.fee-card .who b{font-size:13.5px}
.fee-card .who .pool{font-size:12px;color:var(--dim)}
.fee-card .pair{display:flex;flex-direction:column;gap:12px}
.fee-card .field{margin-bottom:0}
.fee-card .field label{margin-bottom:6px}
/* 批量补录抽屉。间距节奏抄的上面那组（卡片 14/16、块间 12、说明与控件之间 6），
刻意不另起一套更挤的数值。预览表是这个抽屉的主角：粘进去之后先看「哪一行
对上了哪个号、日期读成了哪天」，确认过再写库。 */
.trm-lead{font-size:13px;color:var(--dim);line-height:1.6;margin:0 0 16px}
.trm-box{width:100%;min-height:170px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
background:var(--surface-2);color:var(--text);font-family:var(--mono);font-size:12.5px;line-height:1.7;resize:vertical}
.trm-note{font-size:12px;color:var(--faint);line-height:1.7;margin:10px 0 0}
.trm-res{margin-top:20px}
.trm-res h4{margin:0 0 12px;font-size:12.5px;font-weight:600;color:var(--text)}
/* 一行一块，不是一张五列表：抽屉只有 460 出头，五列会把账号名和错误原因都
折成两三行，而这两样恰恰是这一步要读的东西。 */
.trm-line{padding:10px 0;border-top:1px solid var(--line)}
.trm-line:first-of-type{border-top:0}
.trm-raw{display:block;font-family:var(--mono);font-size:11.5px;color:var(--faint);
line-height:1.6;word-break:break-all}
.trm-to{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-top:6px;font-size:12.5px}
.trm-to .who{font-family:var(--mono);color:var(--text)}
.trm-to .day{color:var(--dim)}
.trm-to .tag{font-size:11px;color:var(--faint)}
.trm-line.bad .trm-to{color:var(--warn)}
#bl-accounts tr.unpriced td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
/* 关闭钮：一枚灰色小圆（iOS / macOS 26 面板右上角那颗） */
.x{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;padding:0;background:var(--fill-3);color:var(--dim);
font-size:17px;line-height:1;border-radius:50%;transition:background-color .16s var(--ease),color .16s var(--ease)}
.x:hover{color:var(--text);background:var(--fill-2)}
.x:active{background:var(--fill-1)}
.x:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.x svg{width:15px;height:15px}
/* ---- 用量上限编辑器 ----------------------------------------------------
一条上限一块，输入框下面永远跟着一条尺子：今天已用画成进度，近 14 天最重的
一天画成一根刻度线。这把尺子是这组控件存在的理由——单看一个空输入框，填
什么都像是对的；把真实用量摆在同一条轴上，填低了是一眼能看出来的错。
（生产实测：单把 Key 单日额度消耗中位数 $12、p95 $184、峰值 230 请求/分。）
间距节奏抄的 .fee-card：卡片 14/16、块间 14、标签与控件之间 6-8。 */
.cap-list{display:flex;flex-direction:column;gap:14px}
.cap-row{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.cap-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-bottom:10px}
.cap-head b{font-size:13.5px;font-weight:600}
.cap-head .cap-why{font-size:12px;color:var(--faint)}
.cap-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cap-in select{width:auto;min-width:132px}
.cap-in input{width:120px}
.cap-in .unit{font-size:12.5px;color:var(--faint)}
.cap-meter{position:relative;height:6px;margin-top:14px;border-radius:999px;background:var(--line)}
.cap-meter .fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--brand);transition:width .2s}
.cap-meter.hot .fill{background:var(--warn)}
.cap-meter.full .fill{background:var(--bad)}
/* 没有上限时轨道本身是虚的：一条画不满的进度条会读成「还早着呢」，而实际上
它根本没有终点。 */
.cap-meter.open{background:repeating-linear-gradient(90deg,var(--line) 0 5px,transparent 5px 10px)}
.cap-peak{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--faint-a42);border-radius:1px}
.cap-foot{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font-size:12px;color:var(--faint);line-height:1.6}
.cap-foot .now{color:var(--dim)}
.cap-foot .over{color:var(--bad)}
.hint{font-size:12px;color:var(--faint);margin-top:6px}
.reveal{background:var(--surface-2);border:1px dashed var(--brand);border-radius:10px;padding:13px;font-family:var(--mono);font-size:12.5px;word-break:break-all;margin:10px 0;color:var(--brand-2)}
/* 推荐网络谱系图（返佣抽屉）。三个层级色从品牌色按饱和度递减派生——颜色的浓淡
就是比例的高低（离得越近返得越多），图例和连接线共用同一套色，不需要看两遍。 */
.rbn{--rb1:var(--brand);
--rb2:color-mix(in srgb,var(--brand) 55%,var(--faint));
--rb3:color-mix(in srgb,var(--brand) 28%,var(--faint))}
.rbn-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.rbn-stats>div{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:10px;padding:8px 11px;min-width:0}
.rbn-stats i{font-style:normal;font-size:11px;color:var(--faint);display:block;margin-bottom:2px}
.rbn-stats b{font-family:var(--mono);font-size:15px;font-weight:600;white-space:nowrap}
.rbn-legend{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px;font-size:12px;color:var(--dim)}
.rbn-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2)}
.rbn-chip b{font-family:var(--mono);font-weight:600;color:var(--text)}
.rbn-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.rbn .c1{background:var(--rb1)}.rbn .c2{background:var(--rb2)}.rbn .c3{background:var(--rb3)}
.rbn-root{display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid var(--brand);border-radius:11px;background:var(--brand-dim);font-weight:700;font-size:13.5px}
.rbn-root .dim{font-weight:400;font-size:11.5px;margin-left:auto}
.rbn-tree{list-style:none;margin:0;padding:0 0 0 13px}
.rbn-tree li{position:relative;padding-left:16px}
.rbn-tree li::before{content:'';position:absolute;left:0;top:-5px;bottom:0;width:1.5px;background:var(--rbc,var(--line))}
.rbn-tree li:last-child::before{bottom:auto;height:26px}
.rbn-tree li::after{content:'';position:absolute;left:0;top:21px;width:13px;height:1.5px;background:var(--rbc,var(--line))}
.rbn li.lv1{--rbc:var(--rb1)}.rbn li.lv2{--rbc:var(--rb2)}.rbn li.lv3{--rbc:var(--rb3)}
.rbn-node{display:flex;align-items:center;gap:8px;padding:8px 11px;margin:5px 0;border:1px solid var(--line-soft);border-radius:9px;background:var(--surface-2);font-size:12.5px;min-width:0}
.rbn-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rbn-money{margin-left:auto;font-family:var(--mono);font-size:11.5px;white-space:nowrap;display:flex;gap:6px;align-items:center;color:var(--dim)}
.rbn-money .arr{color:var(--faint)}
.rbn-money .gain{color:var(--ok);font-weight:600}
.rbn-money .none{color:var(--faint)}
.rbn-node.miss{border-color:color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 8%,var(--surface-2))}
.rbn-node.miss .gain{color:var(--warn)}
.rbn-empty{padding:26px 10px;text-align:center;color:var(--faint);font-size:12.5px;line-height:1.8}
.rbn-link{color:var(--brand-2);cursor:pointer;border-bottom:1px dashed color-mix(in srgb,var(--brand) 45%,transparent)}
.rbn-link:hover{border-bottom-style:solid}
@media (prefers-reduced-motion:no-preference){
.rbn-tree .rbn-node{animation:rbnIn .2s ease both}
@keyframes rbnIn{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}
}
/* ---------- 停摆台账 / OUTAGE LEDGER ----------
每一条停着的线，右边都要回答「什么时候回来」。难点在于时间尺度差四个数量级：
断路器的退避是 40 秒，月配额停靠是 3 天。同一根进度条画这两件事必然有一头是
假的——3 天的条每秒走 0.0004%，看着就是不动。
所以不按一张表排，按「等的是什么」分三舱：
有准信 — 供应商自己说了日子。主角是那个日期，不画条（画了也不走）。
在试探 — 断路器的自家计时器，秒级、真的在走：直接复用 .fuse 引信，
连 data-until/data-cd 契约都不改，pvTick 那根秒针顺手就带上了。
等你处理 — 没有钟。没有钟本身就是信号，所以这一舱给的是动作不是时间，
左边用虚线轨（和 .hop-off 同一套「已停用」语汇）。
分舱也正好答了操作者真正的问题：要不要我现在动手。 */
.og-bay{margin-bottom:28px}
.og-bay:last-child{margin-bottom:0}
.og-bay-hd{display:flex;align-items:baseline;gap:9px;margin:0 0 11px;flex-wrap:wrap}
.og-bay-hd h3{font-family:var(--disp);font-size:14px;font-weight:600;margin:0;letter-spacing:-.01em}
.og-bay-hd .n{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--faint);
background:var(--surface-2);border:1px solid var(--line-soft);border-radius:999px;padding:1px 8px}
.og-bay-hd .say{font-size:12px;color:var(--faint);margin-left:auto;text-align:right}
.og-list{display:flex;flex-direction:column;gap:8px}
.og-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;align-items:center;
background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line);
border-radius:12px;padding:12px 15px}
/* 左轨的颜色就是这一舱的可信度：品牌色＝有据，琥珀＝在猜，虚线＝没人管就一直这样 */
.og-bay.told .og-row{border-left-color:var(--brand)}
.og-bay.probing .og-row{border-left-color:var(--warn)}
.og-bay.hand .og-row{border-left-style:dashed;border-left-color:var(--faint)}
.og-who{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.og-up{font-family:var(--disp);font-weight:600;font-size:14px;color:var(--text)}
.og-sep{color:var(--faint);font-size:12px}
.og-slot{font-family:var(--mono);font-size:12px;color:var(--dim);background:var(--surface-2);
border-radius:6px;padding:1px 6px}
.og-sub{grid-column:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--dim);min-width:0}
.og-id{font-family:var(--mono);font-size:11.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.og-why{color:var(--dim);min-width:0;overflow-wrap:anywhere}
.pv-fail{display:block;flex-basis:100%;min-width:0;font-size:12px;line-height:1.4;color:var(--dim);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 「机器」角标：这一行的熔断说的是出口，不是账号。存在的理由就是拦住那个最贵的
误判——看到订阅号红了就去重新授权，而刷新令牌一转就换不回来了 */
.og-tag-mc{flex:0 0 auto;font-size:10.5px;line-height:1.6;padding:0 6px;border-radius:4px;
color:var(--warn);background:var(--warn-a20);letter-spacing:.02em}
.og-time{grid-row:1/span 2;grid-column:2;text-align:right;white-space:nowrap}
.og-abs{display:block;font-family:var(--mono);font-size:16px;font-weight:600;color:var(--text);
font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.og-left{display:block;font-size:11.5px;color:var(--brand-2);margin-top:3px;font-variant-numeric:tabular-nums}
.og-time .fuse{justify-content:flex-end}
/* 引信在这一舱里跟着轨走琥珀：这一舱说的是「它自己在重试」，不是「出事了」 */
#v-outages .fuse-bar{background:var(--warn-a20)}
#v-outages .fuse-bar i{background:var(--warn)}
/* ---- 出口状态 · 一个出口一行 ----
左边一道色条说这一行的状态，和停摆台账、客户端兼容性同一种画法；格子里第一行是读数，
第二行是灰字的依据或时间。宽表在窄屏换成卡片（docs/admin-layout.md §5）。 */
#v-egress .eg-hosts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
#v-egress .eg-host{display:inline-flex;align-items:center;gap:10px;padding:6px 12px;border:1px solid var(--line);
border-radius:var(--r-pill);background:var(--surface);font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
#v-egress .eg-host b{font-family:var(--mono);font-weight:600;color:var(--text)}
#v-egress .eg-host .n-bad{color:var(--bad);font-weight:600}
#v-egress .eg-host .n-warn{color:var(--warn);font-weight:600}
#v-egress .eg-notes{display:grid;gap:8px;margin:0 0 16px}
#v-egress .eg-notes:empty{display:none}
#v-egress .eg-note{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;padding:12px 16px;border-radius:var(--r-lg);
background:var(--fill-1);font-size:13px;line-height:1.6;color:var(--text)}
#v-egress .eg-note.bad{background:var(--bad-a10)}
#v-egress .eg-note.warn{background:var(--warn-a12)}
#v-egress .eg-note>span{flex:1 1 320px;min-width:0}
#v-egress .eg-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface)}
#v-egress .eg-table{width:100%;min-width:980px;border-collapse:collapse;font-size:13px}
#v-egress .eg-table th,#v-egress .eg-table td{padding:14px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
#v-egress .eg-table th:first-child,#v-egress .eg-table td:first-child{padding-left:18px}
#v-egress .eg-table th{color:var(--dim);font-size:12px;font-weight:500;white-space:nowrap}
#v-egress .eg-table tr:last-child td{border-bottom:0}
#v-egress .eg-table tr.eg-down td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
#v-egress .eg-table tr.eg-warn td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
#v-egress .eg-cell{display:flex;flex-direction:column;gap:4px;min-width:0}
#v-egress .eg-cell>b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
#v-egress .eg-cell>span{font-size:12px;line-height:1.5;color:var(--dim)}
#v-egress .eg-cell .bad{color:var(--bad)}
#v-egress .eg-cell .warn{color:var(--warn)}
#v-egress .eg-cell .ok{color:var(--ok)}
#v-egress .eg-cell .idle{color:var(--faint);font-weight:500}
/* 探测的第二行和近 7 天那一行都是短读数，折行只会把最后一两个字挤到下一行 */
#v-egress .eg-c-probe .eg-cell>span,#v-egress .eg-hist{white-space:nowrap}
#v-egress .eg-cell>.eg-hist{color:var(--faint)}
#v-egress .eg-exit{display:flex;align-items:flex-start;gap:10px;min-width:170px}
#v-egress .eg-exit .lamp{margin-top:5px}
#v-egress .eg-exit b{font-family:var(--mono);font-size:12.5px}
#v-egress .eg-why{max-width:220px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#v-egress .eg-ip{font-family:var(--mono);font-size:12.5px;line-height:1.5}
#v-egress .eg-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:250px}
#v-egress .eg-acct{display:inline-flex;align-items:center;gap:4px;max-width:100%;min-width:0}
#v-egress .eg-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;margin:0;padding:3px 10px;
border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface-2);font:inherit;font-size:12px;
color:var(--text);cursor:pointer}
#v-egress .eg-chip:hover{border-color:var(--brand-40-on-line)}
#v-egress .eg-chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#v-egress .eg-chip .k{flex:none;font-size:11px;color:var(--faint)}
#v-egress .eg-fail{flex:none;margin:0;padding:2px 8px;border:0;border-radius:var(--r-pill);background:var(--bad-a10);
font:inherit;font-size:11px;font-weight:600;color:var(--bad);cursor:pointer}
#v-egress .eg-fail:hover{background:var(--bad-a18)}
#v-egress .eg-more{font-size:12px;color:var(--dim);white-space:nowrap}
#v-egress .eg-link{display:inline;margin:0;padding:0;border:0;border-bottom:1px dotted currentColor;border-radius:0;
background:none;font:inherit;line-height:inherit;text-align:left;white-space:nowrap;color:var(--text);cursor:pointer}
#v-egress .eg-link:hover{color:var(--brand)}
#v-egress .ucd-method{margin-top:24px}
@media (max-width:860px){
#v-egress .eg-wrap{overflow:hidden}
#v-egress .eg-table{min-width:0}
#v-egress .eg-table,#v-egress .eg-table tbody{display:block}
#v-egress .eg-table thead{display:none}
#v-egress .eg-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;padding:16px 14px;
border-bottom:1px solid var(--line-soft)}
#v-egress .eg-table tr:last-child{border-bottom:0}
#v-egress .eg-table td{display:block;min-width:0;padding:0;border:0}
#v-egress .eg-table tr.eg-down{box-shadow:inset 3px 0 0 var(--bad)}
#v-egress .eg-table tr.eg-warn{box-shadow:inset 3px 0 0 var(--warn)}
#v-egress .eg-table tr.eg-down td:first-child,#v-egress .eg-table tr.eg-warn td:first-child{box-shadow:none}
#v-egress .eg-table th:first-child,#v-egress .eg-table td:first-child{padding-left:0}
#v-egress .eg-table td.eg-c-exit,#v-egress .eg-table td.eg-c-state,#v-egress .eg-table td.eg-c-acct,
#v-egress .eg-table td.empty{grid-column:1/-1}
/* 两两并排：探测和请求、出口 IP 和用户；账号芯片最宽，放最后单占一行 */
#v-egress .eg-c-exit{order:1} #v-egress .eg-c-state{order:2} #v-egress .eg-c-probe{order:3} #v-egress .eg-c-req{order:4}
#v-egress .eg-c-ip{order:5} #v-egress .eg-c-user{order:6} #v-egress .eg-c-acct{order:7}
#v-egress .eg-table td[data-th]::before{content:attr(data-th);display:block;margin-bottom:6px;
font-family:var(--sans);font-size:11px;font-weight:600;line-height:1.2;color:var(--faint)}
#v-egress .eg-exit{min-width:0}
#v-egress .eg-why,#v-egress .eg-chips{max-width:none}
#v-egress .eg-why{-webkit-line-clamp:3}
}
.og-none{font-size:12px;color:var(--faint)}
/* 全线在岗是这一页最好的消息，由抬头那句话说；这里只补一句为什么空着。以前这块是
一张居中的大字报，但上面多了运力架之后，好消息已经被那排满着的条子说过一遍了 */
.og-clear{padding:26px 20px;text-align:center}
.og-clear .small{font-size:13px;color:var(--faint)}
.tb-say.clear{color:var(--ok)}
@media(max-width:640px){
.og-row{grid-template-columns:minmax(0,1fr)}
.og-time{grid-row:auto;grid-column:1;text-align:left;margin-top:4px}
.og-time .fuse{justify-content:flex-start}
.og-bay-hd .say{margin-left:0;text-align:left;width:100%}
}
/* ---------- 运力架 / CAPACITY RACK ----------
台账原本只有分子。「3 条停着」在一个五座的池子上是急事，在五十座的池子上是
零头，而这一页从没说过是哪一种——飞书告警从写下来那天就带着「池内可用 n/N」，
正是因为光有条数决定不了任何事。
所以先把整块板的座位画出来：一个上游一格机架，一个账号一根竖条，条子插在同一
根横轨上。两条编码，各管一件事，互不重复：
高度 = 这个号自己还剩多少额度。这是全页唯一一个朝前看的数——别的读数都在
讲已经坏掉的事，而一根只剩两成的条子讲的是下一个要坏的是谁。
颜色 = 它属于下面哪一舱。绿＝在岗，紫＝有准信，琥珀＝在试探，灰虚＝等你处理。
于是这排条子同时就是下面三舱的图例，不必另画一份。
量不到额度的座位（普通线路、读不到余额的号）画成一整根压暗的条：没有刻度，
就不假装有——「满格」和「不知道」在这块板上必须长得不一样。 */
.og-rack{display:flex;flex-wrap:wrap;margin:0 0 24px}
/* 一格机架就是一条线的入口：按下去开它的实况面板，和供应商页点名字是同一件事 */
.og-line{padding:0 14px 8px;border-bottom:1px solid var(--line);min-width:0;
background:transparent;text-align:left;border-radius:0;transition:background .13s}
.og-line+.og-line{border-left:1px solid var(--line-soft)}
.og-line:hover{background:var(--surface-2)}
.og-line:hover .nm{color:var(--text)}
.og-line:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.og-seats{display:flex;align-items:flex-end;gap:4px;height:44px;padding-bottom:6px}
/* 空管子＝这个号自己的额度槽。液面是余量，管壁的底色是它归哪一舱——所以一个
耗尽的号不会因为液面归零就从板上消失，它还在那儿，只是空着且是紫的。 */
.og-seat{position:relative;width:11px;height:38px;border-radius:2.5px;overflow:hidden;
background:var(--faint-a14)}
.og-seat i{position:absolute;left:0;right:0;bottom:0;height:var(--lv,100%);border-radius:2.5px;
background:var(--ok);transform-origin:bottom;
animation:seatup .52s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i,0)*26ms)}
@keyframes seatup{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.og-seat.told{background:var(--brand-a20)}
.og-seat.told i{background:var(--brand)}
.og-seat.probe{background:var(--warn-a22)}
.og-seat.probe i{background:var(--warn)}
/* 停用的座位不画液面：它不是空了，是被拔了 —— 和路由图上 .hop-off 同一套虚线语汇 */
.og-seat.hand{background:none;border:1px dashed var(--faint-a55)}
.og-seat.hand i{display:none}
/* 读不到状态：空框。它照样算在「可以被试」的分子里（池子自己就是这么数的），
但一个我们说不出话的号不配拿一格实心的绿 */
.og-seat.unk{background:none;box-shadow:inset 0 0 0 1px var(--ok-a45)}
.og-seat.unk i{display:none}
.og-seat.flat i{height:100%;opacity:.48}
.og-line-ft{display:flex;align-items:baseline;gap:10px;margin-top:8px}
.og-line-ft .nm{font-size:12.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.og-line-ft .n{font-family:var(--mono);font-size:11.5px;color:var(--faint);
font-variant-numeric:tabular-nums;margin-left:auto;white-space:nowrap}
.og-line-ft .n b{font-weight:600;color:var(--ok)}
.og-line-ft .n b.thin{color:var(--warn)} .og-line-ft .n b.out{color:var(--bad)}
/* 整条线自己停着：里面的号再满也接不到活。斜纹压在管子上，说的是「够不着」，
不是「空了」——这两件事在这一页上是不同的决定 */
.og-line.blocked .og-seat{
background-image:repeating-linear-gradient(-45deg,transparent 0 3px,
var(--faint-a30) 3px 4px)}
.og-line.blocked .og-line-ft .nm{color:var(--faint)}
/* 出口：这条线的流量从哪个地址出去。画在运力架上而不是只在停摆列表里，是因为
它有一半的价值在没出事的时候——地址昨夜换过、代理其实没生效，这两件事今天
都不影响接单，等到影响的时候已经查不出是什么时候变的了。
一行字，默认极淡；只有出问题时才有颜色，否则一排卡片会被十几个 IP 占满。 */
.og-eg{display:flex;align-items:center;gap:5px;margin-top:5px;font-family:var(--mono);
font-size:10.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.og-eg .pip{width:5px;height:5px;border-radius:50%;background:var(--ok-a60);flex:0 0 auto}
.og-eg.warn{color:var(--warn)} .og-eg.warn .pip{background:var(--warn)}
.og-eg.bad{color:var(--bad)} .og-eg.bad .pip{background:var(--bad)}
/* 读数过期＝守望进程自己出了事。灰掉而不是藏起来：藏起来跟「这条线没配代理」
看着一模一样，而那是两件完全不同的事 */
.og-eg.stale{color:var(--faint);opacity:.6} .og-eg.stale .pip{background:var(--faint)}
/* ---------- 恢复时刻表 / RECOVERY TIMETABLE ----------
三行读数各说各的「22.1 小时后」，谁也看不出其中两条其实是同一刻回来的。把它们
钉到同一根轨上，一眼就答完了这一页真正的问题：今天还要不要管，什么时候一次性
都回来。
轴按倍数走，不按等分。这一页的等待横跨四个数量级（断路器退避 40 秒、月配额停靠
3 天），等分轴上秒级的那一条会紧贴原点，等于没画。对数轴让两头都读得见，代价是
位置不能当刻度用——所以每根钉子都自带绝对时刻，轴只负责讲疏密。
没有恢复时间的那几条不硬塞进轴里：它们进右边那格「没有钟」。没有钟本身就是信号。 */
.og-when{margin:0 0 24px}
.og-rail{display:flex;align-items:stretch;gap:14px}
/* --wire 是轨面到顶的距离，由 JS 按牌子实际叠了几层给出：钉子少的时候整块就矮
下来，不留一片为最坏情况预留的空白 */
.og-track{--wire:36px;position:relative;flex:1;min-width:0;height:calc(var(--wire) + 27px)}
/* 线本身：起点实、越远越淡 —— 越靠右的承诺越不该被当真 */
.og-track::before{content:"";position:absolute;left:0;right:0;top:var(--wire);height:3px;border-radius:2px;
background:linear-gradient(90deg,var(--brand-a50),
var(--faint-a30))}
.og-now{position:absolute;left:0;top:calc(var(--wire) - 4px);width:3px;height:13px;border-radius:2px;background:var(--brand)}
.og-now::after{content:"现在";position:absolute;top:15px;left:0;font-size:10px;color:var(--faint);white-space:nowrap}
.og-tick{position:absolute;left:var(--x);top:var(--wire);transform:translateX(-50%)}
.og-tick i{display:block;width:1px;height:8px;margin:0 auto;background:var(--line)}
.og-tick b{display:block;margin-top:3px;font-size:10px;font-weight:400;color:var(--faint);white-space:nowrap}
.og-pin{position:absolute;left:var(--x);top:0;width:0;height:calc(var(--wire) + 6px)}
.og-pin .dot{position:absolute;bottom:0;left:0;width:9px;height:9px;border-radius:50%;
transform:translateX(-50%);background:var(--brand);border:2px solid var(--surface);
box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--brand-ahalo)}
.og-pin .stem{position:absolute;left:0;bottom:6px;width:1px;height:var(--stem,13px);
background:var(--brand-a45)}
.og-pin .flag{position:absolute;left:0;bottom:calc(6px + var(--stem,13px));transform:translateX(-50%);
display:flex;align-items:baseline;gap:5px;white-space:nowrap;padding:2px 7px;border-radius:7px;
background:var(--surface-2);border:1px solid var(--line);cursor:default}
.og-pin.lft .flag{transform:translateX(-11px)} .og-pin.rgt .flag{transform:translateX(calc(-100% + 11px))}
.og-pin .flag b{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--text);
font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.og-pin .flag span{font-size:10.5px;color:var(--faint);max-width:130px;overflow:hidden;text-overflow:ellipsis}
.og-pin.probe .dot{background:var(--warn);box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--warn-ahalo)}
.og-pin.probe .stem{background:var(--warn-a45)}
.og-pin:hover .flag,.og-pin.lit .flag{border-color:var(--brand-55-on-line);background:var(--surface-3)}
/* 钉子和下面的清单是同一份数据的两种画法，所以互相点亮 —— 指一个位置，就指到了那几行 */
.og-row.lit{border-color:var(--brand-45-on-line);background:var(--surface-2)}
/* 轴到这里为止，右边这一格是轴外：那几条根本没有时间可画 */
.og-noclock{flex:none;padding:0 0 0 14px;border-left:1px dashed var(--line);
display:flex;flex-direction:column;justify-content:center;gap:5px}
.og-noclock .hd{font-size:10.5px;color:var(--faint)}
.og-noclock .r{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--dim);white-space:nowrap}
.og-noclock .r i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--faint)}
.og-noclock .r.probe i{background:var(--warn)} .og-noclock .r.told i{background:var(--brand)}
.og-noclock .r b{font-family:var(--mono);font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
/* 窄屏收掉牌子，只留钉子。牌子并排要 150px 一张，挤到一起就互相盖住，那时它既读不出
时刻也读不出疏密——两样都丢。钉子还在，疏密还在，确切时刻由下面的清单答；
一颗钉子的 title 仍带着全文，指上去就有 */
@media(max-width:900px){
.og-rail{flex-direction:column;gap:10px}
/* 竖过来之后 flex:1 量的是高度，会把轨压成 0 —— 高度交回给 height 那条 calc */
.og-track{flex:none;--wire:14px!important}
.og-pin .flag,.og-pin .stem{display:none}
.og-noclock{align-self:flex-start;border-left:none;border-top:1px dashed var(--line);
padding:9px 0 0;flex-direction:row;gap:14px;align-items:center}
}
/* ---------- 供应商透视 / PROVIDER SCOPE BOARD ----------
Tap a provider's name in the table and you patch into that one upstream's
line to read its meters. It's the transpose of the model-health board — per
model load carried on this single provider — so it reuses that board's
availability bar (hbar/seg-*) and token flow meter (flow), and tints the whole
surface with the provider's protocol accent (--pv) so each board wears its own
line's identity instead of a generic modal purple. */
.pscrim{position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .3s var(--ease);z-index:50}
.pscrim.show{opacity:1;pointer-events:auto}
.pboard{--pv:var(--brand);--pv-dim:var(--brand-dim);
position:fixed;top:50%;left:50%;width:988px;max-width:94vw;max-height:90vh;
transform:translate(-50%,-48%) scale(.97);opacity:0;pointer-events:none;
background:var(--card-grad);border:1px solid var(--line);border-radius:var(--r-2xl);
box-shadow:var(--shadow-2);z-index:51;display:flex;flex-direction:column;overflow:hidden;
transition:opacity .22s var(--ease),transform .42s var(--spring)}
.pboard.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
/* head — the line tap: source ●─live─▶ [provider node] */
/* flex:none 是这一行的重点，不是排版偏好。.pboard 是 max-height:90vh 的列向 flex，
而 overflow:hidden 让抬头也成了滚动容器（min-height:auto 因此解析成 0）——板体一高，
抬头就会被挤扁，把第二行整排按钮无声裁成一条缝。板体自己会滚，抬头没有理由让位。 */
.pv-head{position:relative;flex:none;padding:19px 22px 17px;border-bottom:1px solid var(--line-soft);overflow:hidden}
.pv-head::after{content:none}
.pv-line{display:flex;align-items:center;gap:0;flex-wrap:wrap;row-gap:9px;position:relative;z-index:1;padding-right:40px}
.pv-tap{width:11px;height:11px;border-radius:50%;background:var(--pv);flex:none;
box-shadow:0 0 var(--halo-blur) var(--halo-spread) color-mix(in srgb,var(--pv) var(--halo-alpha),transparent)}
.pv-feed{height:2px;width:34px;flex:none;border-radius:2px;margin:0 2px;background:linear-gradient(90deg,var(--pv),var(--pv));background-size:200% 100%;animation:flow 1.8s linear infinite;opacity:.85}
.pv-node{display:inline-flex;align-items:center;gap:9px;background:var(--surface);background:color-mix(in srgb,var(--pv) 9%,var(--surface));
border:1px solid var(--line);border:1px solid color-mix(in srgb,var(--pv) 55%,transparent);border-radius:999px;padding:7px 15px 7px 12px;flex:none;
box-shadow:0 3px 12px -5px color-mix(in srgb,var(--pv) 40%,transparent)}
.pv-node .lamp{width:9px;height:9px}
.pv-name{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:-.01em;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-meta{display:flex;align-items:center;gap:8px;margin-left:14px;flex-wrap:wrap}
/* 「带你去别处」的按钮和「这是谁」的身份行是两件事，所以它们不挤在同一条线里抢位置：
身份行长短随客户邮箱变，按钮跟着漂就成了每次都要重新找的控件。给它固定的一行、
右对齐——上面是关闭按钮、下面是每日/每周/累计，三者共用同一条右边线。
:empty 收掉外边距，活动看板没有动作时不会凭空多出一段空白。供应商透视现在
有测试 / 编辑：点名字是手机上够得着的入口，操作列在滑轨尽头够不着。 */
.pv-acts{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap;
margin-top:12px;position:relative;z-index:1}
.pv-acts:empty{display:none;margin-top:0}
.pv-acts .btn svg{width:14px;height:14px;flex:none}
.pv-when{font-size:11.5px;color:var(--bad);font-variant-numeric:tabular-nums}
.pv-url{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-top:11px;word-break:break-all;position:relative;z-index:1}
.pv-x{position:absolute;top:14px;right:14px;z-index:2}
/* body */
.pv-body{padding:18px 22px 24px;overflow-y:auto;flex:1}
.pv-axis{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.pv-axis .winsel button.on{color:var(--pv);background:var(--surface);background:color-mix(in srgb,var(--pv) 10%,var(--surface));box-shadow:inset 0 0 0 1px var(--line);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pv) 45%,transparent)}
.pv-live{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--faint)}
.pv-tiles{grid-template-columns:repeat(4,1fr);margin-bottom:18px}
.pv-tiles .tile.accent{border-color:color-mix(in srgb,var(--pv) 40%,var(--line))}
.pv-tiles .tile.accent::after{background:linear-gradient(90deg,var(--pv),transparent 92%)}
.pv-tiles .v .pvc{color:var(--pv)}
/* traffic strip — the load on the line over the window */
.pv-strip{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:13px 15px 11px;margin-bottom:20px}
.pv-strip-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--faint);margin-bottom:9px}
.pv-strip-head .lg i{display:inline-block;width:8px;height:8px;border-radius:2px;margin:0 5px 0 12px;vertical-align:-1px}
.pv-strip-head .lg i.n{background:var(--pv)} .pv-strip-head .lg i.e{background:var(--bad)}
.pv-spark{display:flex;align-items:flex-end;gap:2px;height:52px}
.pv-spark .b{flex:1;min-width:1px;height:100%;background:var(--line-soft);border-radius:1px 1px 0 0;display:flex;flex-direction:column;justify-content:flex-end;transition:background .12s}
.pv-spark .b i{display:block;width:100%}
.pv-spark .b i.n{background:var(--pv)} .pv-spark .b i.e{background:var(--bad)}
.pv-spark .b:hover{outline:1px solid var(--pv);outline-offset:0}
.pv-strip-ax{display:flex;justify-content:space-between;font-size:10px;color:var(--faint);font-family:var(--mono);margin-top:7px}
/* account pool — for an upstream that is itself N rotating credentials, the one
number the line's health hides: how many of them are still carrying load */
.pv-pool{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:13px 15px 6px;margin-bottom:20px}
.pv-pool-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--faint);margin-bottom:4px}
.pv-pool-head b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.pv-pool-head b.thin{color:var(--warn)} .pv-pool-head b.out{color:var(--bad)}
.pv-pool-note{font-size:11.5px;color:var(--warn);padding:5px 0 8px}
.pv-acct{display:flex;align-items:center;gap:10px;padding:7px 8px;margin:0 -8px;border-top:1px solid var(--line-soft);font-size:12px}
.pv-acct .slot{font-family:var(--mono);font-size:11.5px;color:var(--faint);width:54px;flex:none}
.pv-acct .who{color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-acct .st{font-size:11px;width:132px;flex:none;white-space:nowrap}
.pv-acct .st.ready{color:var(--ok)} .pv-acct .st.cooldown,.pv-acct .st.quota_parked{color:var(--bad)}
.pv-acct .st.half_open{color:var(--warn)} .pv-acct .st.disabled,.pv-acct .st.unknown{color:var(--faint)}
.pv-acct .rq{font-family:var(--mono);font-size:11px;color:var(--faint);width:116px;text-align:right;flex:none;white-space:nowrap;flex-wrap:nowrap;justify-content:flex-end}
.pv-acct .rq .e{color:var(--bad)}
.pv-recheck-slot{width:78px;flex:none;text-align:center}
/* 「当前」原来是吊在行尾的一颗药丸，而且只有一行有——那一行就比别人宽，
整块的右边缘因此是毛的。改成每行都留这一格（不在服务的行留空），右边缘
就齐了；正在服务的那一行另给一点底色和一枚圆点，一眼扫得到，不需要靠找
那颗药丸来定位。 */
.pv-acct .now{width:40px;flex:none;text-align:right;font-size:10.5px;font-weight:600;
color:var(--pv);line-height:1.6;white-space:nowrap}
.pv-acct.serving{background:color-mix(in srgb,var(--pv) 8%,transparent);
border-radius:9px;box-shadow:inset 2px 0 0 var(--pv)}
.pv-acct.serving .slot{color:var(--pv)}
/* Credit 余量：这一列回答的是「这个号还能干多久」，其余几列说的都是已经发生的事。
条子从满往空走，所以看的是剩下的那截，不是用掉的那截。 */
.pv-cr{display:flex;align-items:center;gap:8px;width:148px;flex:none}
.pv-crbar{position:relative;flex:1;min-width:44px;height:4px;border-radius:2px;background:var(--faint-a22);overflow:hidden}
.pv-crbar i{position:absolute;inset:0 auto 0 0;border-radius:2px;background:var(--ok)}
.pv-cr.warn .pv-crbar i{background:var(--warn)} .pv-cr.out .pv-crbar i{background:var(--bad)}
.pv-crnum{font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;color:var(--dim);white-space:nowrap}
.pv-cr.warn .pv-crnum{color:var(--warn)} .pv-cr.out .pv-crnum{color:var(--bad)}
.pv-crnone{width:148px;flex:none;font-size:11px;color:var(--faint);text-align:center}
/* 订阅额度：一个账号不再是一行，是一小组——它的每个窗口各占一行。
两个窗口不是同一个数的两种读法。5 小时的窗口吃顿饭就回来了，周额度一周才
翻一次篇；同样是 70%，一个是今晚的事，一个是这周的事。压成一个数字（这块
面板以前就是这么干的）等于把做预算时唯一要用的那个区别扔掉。
每条窗口条上叠三样东西，回答的都是同一个问题——这个速度撑不撑得到重置：
实心 = 已用；
竖刻度 = 此刻的配速线（窗口已经走过多少），实心越过它就是烧超了；
虚影 = 按当前速度到重置时会走到哪儿，顶到头（红帽）就是撑不到。
刻度在 5 小时条上走得飞快、在周条上几乎不动，所以同一个记号在两行里自己
就把两种时间尺度说清楚了，不用再加一句话去解释。 */
.pv-qacct{border-top:1px solid var(--line-soft);padding:9px 0 11px}
.pv-qtop{display:flex;align-items:center;gap:9px;font-size:12px}
.pv-qtop .who{color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-qtop .st{font-size:11px;white-space:nowrap;flex:none}
.pv-qtop .st.ready{color:var(--ok)} .pv-qtop .st.warning{color:var(--warn)}
.pv-qtop .st.quota_parked{color:var(--bad)} .pv-qtop .st.disabled,.pv-qtop .st.unknown{color:var(--faint)}
.pv-qnone{font-size:11px;color:var(--faint);padding:7px 0 1px 19px}
/* 窗口行：标签｜条｜数字｜那句要紧的话。四列固定，是为了上下两行的条子左右
端对齐——两条对不齐的进度条，人会先去比长度，再发现比错了。 */
.pv-qwin{display:grid;grid-template-columns:112px minmax(56px,1fr) 84px minmax(0,160px);
gap:11px;align-items:center;margin-top:9px;padding-left:19px}
.pv-qwin .wl{font-size:10.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-qwin.bind .wl{color:var(--dim)}
.pv-qwin.scoped{opacity:.66}
.pv-qnum{font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums;
text-align:right;color:var(--dim)}
.pv-qwin.warn .pv-qnum{color:var(--warn)} .pv-qwin.bad .pv-qnum{color:var(--bad)}
.pv-qnote{font-size:10.5px;color:var(--faint);text-align:right;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.pv-qnote.dry{color:var(--bad)}
/* 见底 + 重置摞成两行（qWinCell）：上红下浅、右对齐，两个动词落在同一列。行高压到
1.2，两行 10px 字加起来 25px——只有会见底的那根条子长这么高，其余行照旧。
b / i 只是两行的记号，字重和字形都还原成正文的。 */
.qn2{display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1.2}
.qn2 b{font-weight:inherit}
.qn2 i{font-style:normal;color:var(--faint)}
/* 三层叠在一根 5px 的轨上。--u 已用、--g 虚影的宽度、--p 配速线的位置，
全是百分比，由 JS 一次算好——CSS 这边只负责画，不负责判断。 */
.qrail{position:relative;height:5px;border-radius:3px;background:var(--surface-3)}
.qrail i{position:absolute;top:0;bottom:0;display:block}
.qrail i.fill{left:0;width:var(--u);border-radius:3px;background:var(--ok);transition:width .4s ease}
.qrail i.ghost{left:var(--u);width:var(--g);border-radius:0 3px 3px 0;
background:var(--ok-a26);transition:width .4s ease,left .4s ease}
.pv-qwin.warn .qrail i.fill{background:var(--warn)}
.pv-qwin.warn .qrail i.ghost{background:var(--warn-a26)}
.pv-qwin.bad .qrail i.fill{background:var(--bad)}
.pv-qwin.bad .qrail i.ghost{background:var(--bad-a26)}
/* 配速线出轨两头各 4px，才读得出是一道刻度而不是条子里的一段颜色 */
.qrail b.pace{position:absolute;left:var(--p);top:-4px;bottom:-4px;width:1.5px;
border-radius:1px;background:var(--faint-a95)}
/* 撑不到重置：虚影转红，右端再封一道。虚影顶到头本身还能读成「刚好用完」，
这两笔合起来才是「按这个速度会撞墙」——而且只染将来那一截，实心那截仍然
按当下的水位着色。 */
/* 选择器要压得住上面按水位染色的那两条（同样多的类，写在后面才赢）：预测撞墙
的虚影必须是红的，哪怕这条窗口此刻只是「接近上限」。 */
.pv-qwin .qrail.dry i.ghost{background:var(--bad-a32)}
.qrail.dry::after{content:"";position:absolute;right:0;top:-4px;bottom:-4px;width:2px;
border-radius:1px;background:var(--bad)}
@media (prefers-reduced-motion:reduce){.qrail i{transition:none}}
/* 添加订阅账号：面板上唯一一个会往外部服务写东西的入口，所以它不做成主按钮，
也不抢额度读数的位置——平时几乎不可见，需要时才在那儿。 */
.pv-add{background:none;border:1px solid var(--line);border-radius:999px;color:var(--faint);
font:inherit;font-size:11px;line-height:1.6;padding:1px 9px;margin-left:9px;cursor:pointer;transition:.15s}
.pv-add:hover{color:var(--pv);border-color:var(--pv)}
/* per-model ledger */
.pv-table th.num,.pv-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.pv-table th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.pv-table th.sortable:hover{color:var(--pv)}
.pv-sort{color:var(--pv);margin-left:3px;font-size:10px}
.pv-mname{font-family:var(--mono);font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
.pv-mid{display:flex;align-items:center;gap:9px;min-width:0}
.pv-avail{display:flex;align-items:center;gap:10px;min-width:150px}
.pv-avail .hbar{flex:1;min-width:74px}
.pv-rate{font-family:var(--mono);font-size:12px;width:48px;text-align:right;flex:none}
.pv-rate.bad{color:var(--bad)} .pv-rate.warn{color:var(--warn)} .pv-rate.ok{color:var(--ok)}
.pv-lat{font-family:var(--mono);font-size:12px;color:var(--text)}
.pv-lat small{color:var(--faint)}
.pv-req{display:flex;align-items:baseline;gap:7px;justify-content:flex-end}
.pv-req .ku-err{color:var(--bad);font-size:11px;font-weight:600}
.pv-last{font-size:11.5px;color:var(--faint)}
.pv-last .err{color:var(--bad);display:block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.pv-empty{padding:30px;text-align:center;color:var(--faint)}
/* clickable provider name in the table — a patch point into its scope board */
.pv-link{background:transparent;padding:0;font-weight:600;color:var(--text);text-align:left;
display:inline-flex;align-items:center;gap:7px;transition:color .14s}
.pv-link::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--faint);transition:background .14s,box-shadow .14s;flex:none}
.pv-link:hover{color:var(--brand-2)}
.pv-link:hover::before{background:var(--brand);box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--brand-ahalo)}
.pv-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
/* activity board（用户/密钥活动看板）— 与门户同款：统计条 + 53 周格阵三读法。
色阶从品牌紫向台面色 color-mix，日夜主题自动换算；令牌与 portal.html 保持同值 */
.statstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);
border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;margin-bottom:14px;box-shadow:var(--card-shadow)}
.statstrip.c3{grid-template-columns:repeat(3,1fr)}
.statstrip .stat{background:var(--surface);padding:13px 16px;min-width:0}
.stat .k{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.stat .v{font-family:var(--disp);font-size:21px;font-weight:600;letter-spacing:-.02em;margin-top:7px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .v small{font-size:12px;font-weight:500;color:var(--dim);margin-left:3px}
.stat .v.txt{font-size:15.5px;padding-top:3px;font-family:var(--mono);font-weight:600;letter-spacing:0}
.hm-card{background:var(--card-grad);border:1px solid var(--line);border-radius:var(--r-xl);padding:15px 18px 13px;margin-bottom:26px;box-shadow:var(--card-shadow)}
.hm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:13px}
.hm-cap{font-size:12px;color:var(--dim)}
.hm-scroll{overflow-x:auto;padding-bottom:3px}
.hm-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,12px);grid-auto-columns:12px;gap:3px;width:max-content}
.hm-cell{width:12px;height:12px;border-radius:3px;transition:background-color .25s ease}
.hm-cell:hover{box-shadow:inset 0 0 0 1px var(--text-a60)}
.hm-cell.off{visibility:hidden}
.hm-cell.today{box-shadow:inset 0 0 0 1.5px var(--brand)}
.hm-c[data-lv="0"]{background:var(--surface-3)}
.hm-c[data-lv="1"]{background:var(--brand-30-on-surface-3)}
.hm-c[data-lv="2"]{background:var(--brand-55-on-surface-3)}
.hm-c[data-lv="3"]{background:var(--brand-80-on-surface-3)}
.hm-c[data-lv="4"]{background:var(--brand-2)}
.hm-c[data-lv="b"]{background:var(--brand-82-on-surface-3)}
.hm-months{display:grid;grid-auto-flow:column;grid-auto-columns:12px;grid-template-rows:14px;gap:3px;width:max-content;margin-top:5px;font-size:10.5px;color:var(--faint)}
.hm-months span{grid-row:1;white-space:nowrap}
.hm-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;font-size:11.5px;color:var(--faint)}
.hm-legend{display:inline-flex;align-items:center;gap:3px}
.hm-legend i{width:10px;height:10px;border-radius:2.5px}
/* ---- 用户档案（活动看板的门户段，ub- 前缀）----
拼车车况 / SLA / 消耗价值三块与门户同源的数据并进活动看板。车况的窗口条直接
复用供应商额度板的 .qrail 仪表（实心=已用、竖刻度=配速、虚影=按当前速度到
重置时的投影、红帽=撑不到重置）——操作员在供应商页已经学会读这套记号，
同一台仪器出现在用户档案里说的还是同一件事。份额条借同一根轨：刻度线在这里
改指「应得」，实心越过刻度就是超份额，和配速线「越线=烧超」同一种读法。 */
.ub-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:14px;margin-top:14px}
.ub-card{background:var(--card-grad);border:1px solid var(--line);border-radius:var(--r-xl);
padding:15px 18px 16px;box-shadow:var(--card-shadow);min-width:0}
.ub-card>.eyebrow{margin-bottom:11px}
.ub-card .bd-sec{margin-top:15px}
.ub-card .bd-sec>.eyebrow{margin-bottom:8px}
.ub-full{margin-top:14px}
/* 客户机器报回来的诊断（devicereport.go）。日志是等宽的、可能很宽，
所以它自己横向滚，页面不跟着滚——这条是全站的规矩。 */
.dr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
gap:15px 20px;margin:0 0 16px}
.dr-grid dt{font-size:11px;color:var(--faint);margin:0 0 5px}
.dr-grid dd{margin:0;font-size:13px;color:var(--text);word-break:break-word}
.dr-log{margin:0;padding:12px 14px;background:var(--bg);border:1px solid var(--line);
border-radius:10px;font-family:var(--mono);font-size:11.5px;line-height:1.7;
color:var(--dim);max-height:280px;overflow:auto;white-space:pre}
.dr-when{font-size:11.5px;color:var(--faint);margin:0 0 13px}
/* ---- 按诊断编号查（saildiag.go）-----------------------------------------
客户运行 sail doctor / sail line 后拿到一个编号 sd_…，发给客服。查到的那一份在通用
抽屉里打开（.drawer.xl，叠在客户工作台之上）：上半是客户机器当时的判断，下半是网关
同一段时间看到的请求、订阅和设备。认不出的字段折叠成原样 JSON，客户端加了新段落
也照样能读；被 48 KB 截断、已经不是 JSON 的那一份只给原文。 */
.sdg-find{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;padding:16px 20px;margin-bottom:18px;
border:1px solid var(--line);border-radius:var(--r-xl);background:var(--card-grad);box-shadow:var(--card-shadow)}
.sdg-find-t{margin:0;font-family:var(--disp);font-size:14px;font-weight:600;color:var(--text);white-space:nowrap}
.sdg-find .cat-search{flex:0 1 360px}
.sdg-find .hint{margin:0;flex:1 1 240px;line-height:1.6}
.sdg-list{margin:0 0 20px}
.sdg-list-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.sdg-list-hd .eyebrow{margin:0}
.sdg-tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.sdg-tbl-wrap.tall{max-height:380px;overscroll-behavior:contain}
.sdg-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.sdg-tbl th,.sdg-tbl td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
.sdg-tbl th{position:sticky;top:0;z-index:1;background:var(--surface-2);color:var(--dim);font-size:11.5px;font-weight:500;white-space:nowrap}
.sdg-tbl tr:last-child td{border-bottom:0}
.sdg-tbl td.n{font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sdg-tbl td.nw{white-space:nowrap}
.sdg-tbl td.id{font-family:var(--mono);font-size:11px;color:var(--dim);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sdg-tbl td.w{color:var(--dim);min-width:160px;line-height:1.55;word-break:break-word}
.sdg-tbl td.w b{color:var(--text);font-weight:600}
.sdg-tbl tr.bad td.st{color:var(--bad);font-weight:600}
.sdg-tbl tbody tr.go{cursor:pointer}
.sdg-tbl tbody tr.go:hover td{background:var(--surface-2)}
.sdg-tbl tbody tr.go:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.sdg-sec{margin:24px 0 0}
.sdg-sec:first-child{margin-top:0}
.sdg-h{display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap;margin:0 0 12px;
font-family:var(--disp);font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.sdg-h small{font-family:var(--sans);font-size:12px;font-weight:400;letter-spacing:0;color:var(--faint)}
.sdg-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 14px}
.sdg-chips .hint{margin:0 0 0 4px}
.sdg-lv{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-pill);
font-size:11px;font-weight:600;white-space:nowrap;background:var(--fill-4);color:var(--dim)}
.sdg-lv.ok{background:var(--ok-a12);color:var(--ok)}
.sdg-lv.note{background:var(--warn-a12);color:var(--warn)}
.sdg-lv.bad{background:var(--bad-a11);color:var(--bad)}
.sdg-grp{margin:0 0 16px}
.sdg-grp>.eyebrow{margin-bottom:8px}
.sdg-fs{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.sdg-f{display:grid;grid-template-columns:76px minmax(0,1fr);gap:4px 12px;padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.sdg-f:last-child{border-bottom:0}
.sdg-f>.sdg-lv{justify-self:start;margin-top:1px}
.sdg-f-t{font-size:13px;font-weight:600;color:var(--text);line-height:1.5}
.sdg-f-t small{font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--faint);margin-left:8px}
.sdg-f.ok .sdg-f-t{font-weight:500;color:var(--dim)}
.sdg-f-d,.sdg-f-a{font-size:12.5px;line-height:1.6;margin-top:4px;white-space:pre-wrap;word-break:break-word}
.sdg-f-d{color:var(--dim)}
.sdg-f-a{color:var(--text)}
.sdg-f-a b{font-weight:600;margin-right:6px}
.sdg-json{margin-top:10px}
.sdg-json summary{cursor:pointer;font-size:12px;color:var(--dim);user-select:none;width:fit-content}
.sdg-json summary:hover{color:var(--text)}
.sdg-json summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.sdg-json[open] summary{margin-bottom:8px}
.sdg-json .dr-log{max-height:320px;white-space:pre-wrap;word-break:break-word}
.sdg-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:10px;margin:0 0 16px}
.sdg-fact{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);min-width:0}
.sdg-fact.bad{border-color:var(--bad-a40)}
.sdg-fact .k{font-size:11px;color:var(--faint);margin:0 0 5px}
.sdg-fact .v{font-size:13px;color:var(--text);line-height:1.6;word-break:break-word}
.sdg-fact .s{font-size:12px;color:var(--dim);line-height:1.6;margin-top:3px;word-break:break-word}
.sdg-fact .s+.s{margin-top:2px}
.sdg-code{font-family:var(--mono);font-size:11.5px;color:var(--dim);word-break:break-all}
@media (max-width:860px){
.sdg-find .cat-search{flex:1 1 100%}
.sdg-f{grid-template-columns:minmax(0,1fr)}
}
/* ---- Sail 诊断（sailogs.go）--------------------------------------------
主角是「同刻矩阵」：行 = 坏法，列 = 时段，格高 = 这一格里**几台机器**报了它，
不是几行。一台断网的机器能在一小时里刷出六百行 DNS 失败，按行数画它会像一次
全网事故；按机器数画，它只是一排矮格子——而八台机器同一刻齐刷刷顶格，才是
该去查我们自己（或 Cloudflare）的样子。选中一台机器时它的格子描边，
「他的故障和别人的重合吗」一眼就答了。 */
.slg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;margin-bottom:18px}
.slg-verdict{margin:0;max-width:66ch;font-family:var(--disp);font-size:17px;line-height:1.6;font-weight:500;
letter-spacing:-.005em;color:var(--text)}
.slg-verdict b{font-weight:600}
.slg-verdict .bad{color:var(--bad)}
.slg-verdict small{display:block;margin-top:6px;font-family:var(--sans);font-size:12.5px;font-weight:400;
line-height:1.6;color:var(--faint);letter-spacing:0}
.slg-ctl{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.slg-bar{display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.slg-bar .cat-search{flex:0 1 340px}
.slg-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--dim);cursor:pointer;
user-select:none;white-space:nowrap}
.slg-toggle input{accent-color:var(--brand);margin:0}
.slg-pins{display:flex;gap:6px;flex-wrap:wrap}
.slg-pin{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 11px;border-radius:999px;
border:1px solid var(--brand-50-on-line);background:var(--brand-a15);color:var(--text);font-size:11.5px;
font-family:inherit;cursor:pointer;white-space:nowrap}
.slg-pin span{color:var(--faint)}
.slg-pin b{font-weight:600}
.slg-pin i{font-style:normal;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
color:var(--dim);font-size:12px;line-height:1}
.slg-pin:hover i{background:var(--brand-a30);color:var(--text)}
.slg-pin:focus-visible,.slg-lbl:focus-visible,.slg-dev:focus-visible,.slg-who:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.slg-board{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--card-grad);box-shadow:var(--card-shadow);
padding:18px 20px 16px;margin-bottom:20px}
.slg-board-hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;margin-bottom:16px}
.slg-board-t{font-family:var(--disp);font-size:14px;font-weight:600;color:var(--text);margin:0}
.slg-legend{display:flex;gap:6px 16px;align-items:center;flex-wrap:wrap;font-size:11.5px;color:var(--faint)}
.slg-legend span{display:inline-flex;align-items:center;gap:6px}
.slg-legend u{display:inline-block;width:6px;border-radius:1.5px 1.5px 0 0;background:var(--bad);text-decoration:none}
.slg-legend .ring{width:9px;height:9px;border-radius:2px;outline:1.5px solid var(--brand-2);outline-offset:1px}
.slg-scroll{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:2px}
.slg-mx{display:grid;grid-template-columns:132px minmax(0,1fr) 104px;column-gap:14px;min-width:660px}
.slg-row{display:contents}
.slg-row.err{--c:var(--bad)} .slg-row.warn{--c:var(--warn)}
.slg-row.info{--c:var(--faint)} .slg-row.noise{--c:var(--faint-a42)}
.slg-lbl{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px;margin-left:-8px;border:0;border-radius:8px;
background:none;color:var(--dim);font:inherit;font-size:12.5px;text-align:left;cursor:pointer;white-space:nowrap;min-width:0}
.slg-lbl i{flex:none;width:7px;height:7px;border-radius:2px;background:var(--c)}
.slg-lbl span{overflow:hidden;text-overflow:ellipsis}
.slg-lbl:hover{color:var(--text);background:var(--surface-3)}
.slg-lbl.on{color:var(--text);background:var(--brand-dim);box-shadow:inset 0 0 0 1px var(--brand-a45)}
.slg-lane{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;height:30px;align-items:end;
padding:4px 0 0;border-bottom:1px solid var(--line-soft)}
.slg-lane i{display:block;height:calc(var(--h) * 100%);border-radius:2px 2px 0 0;background:var(--c);cursor:pointer}
.slg-lane i.z{height:1px;background:transparent;cursor:default}
.slg-lane i.w{box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--bad-a40)}
.slg-row:not(.err) .slg-lane i.w{box-shadow:none}
.slg-lane i:not(.z):hover{filter:brightness(1.25)}
.slg-lane i.bg{opacity:.4;box-shadow:none}
.slg-lane i.mine{outline:1.5px solid var(--brand-2);outline-offset:1px}
.slg-lane i.sel{outline:2px solid var(--text);outline-offset:1px}
.slg-mx.pick .slg-lane i:not(.z):not(.mine){opacity:.32}
.slg-mx.kf .slg-row:not(.on) .slg-lane i{opacity:.3}
.slg-sum{display:flex;align-items:center;justify-content:flex-end;gap:5px;height:30px;font-family:var(--mono);
font-size:11.5px;color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.slg-sum b{color:var(--text);font-weight:600}
.slg-marks{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;height:22px;align-items:end;padding-bottom:4px}
.slg-marks b{justify-self:center;min-width:17px;height:15px;padding:0 3px;border-radius:4px;display:grid;place-items:center;
font-family:var(--mono);font-size:10px;font-weight:600;color:var(--btn-ink);background:var(--bad)}
.slg-marks-l{font-size:11px;color:var(--faint);align-self:end;padding-bottom:6px;white-space:nowrap}
.slg-axis{display:flex;justify-content:space-between;padding-top:8px;font-family:var(--mono);font-size:10.5px;
color:var(--faint);font-variant-numeric:tabular-nums}
.slg-split{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:18px;align-items:start}
.slg-devs{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--card-shadow);overflow:hidden;
position:sticky;top:calc(var(--topbar-h,64px) + 14px);max-height:calc(100vh - var(--topbar-h,64px) - 28px);
display:flex;flex-direction:column}
.slg-pane-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:13px 16px;
border-bottom:1px solid var(--line);background:var(--surface-2)}
.slg-pane-t{font-family:var(--disp);font-size:13.5px;font-weight:600;color:var(--text);margin:0}
.slg-pane-t small{font-family:var(--sans);font-weight:400;font-size:12px;color:var(--faint);margin-left:8px}
.slg-devs-list{overflow:auto;overscroll-behavior:contain}
.slg-dev{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:3px 11px;width:100%;padding:12px 16px;
border:0;border-bottom:1px solid var(--line-soft);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.slg-dev:last-child{border-bottom:0}
.slg-dev:hover{background:var(--surface-2)}
.slg-dev.on{background:var(--brand-dim);box-shadow:inset 3px 0 0 var(--brand)}
.slg-led{width:8px;height:8px;min-height:0;border-radius:50%;margin-top:6px;background:var(--faint-a42)}
.slg-led.err{background:var(--bad);box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--bad-ahalo)}
.slg-led.warn{background:var(--warn)}
.slg-dev-n{min-width:0;font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slg-dev-h{display:block;margin-top:2px;font-family:var(--mono);font-size:11px;font-weight:400;color:var(--faint);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slg-dev-r{text-align:right;font-family:var(--mono);font-size:11px;color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.slg-dev-r b{display:block;font-size:13px;font-weight:600;color:var(--bad)}
.slg-dev-r b.q{color:var(--faint);font-weight:500}
.slg-dev-f{grid-column:2/4;display:flex;flex-wrap:wrap;gap:5px 8px;margin-top:5px;font-size:11.5px;color:var(--dim)}
.slg-tag{font-size:10.5px;line-height:1.5;padding:0 7px;border-radius:999px;border:1px solid var(--line);color:var(--dim);white-space:nowrap}
.slg-tag.warn{color:var(--warn);border-color:var(--warn-a40)}
.slg-tag.bad{color:var(--bad);border-color:var(--bad-a40)}
.slg-stream{min-width:0;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--card-shadow);overflow:hidden}
.slg-why{padding:12px 16px;border-bottom:1px solid var(--line-soft);font-size:12.5px;line-height:1.65;color:var(--dim)}
.slg-why b{color:var(--text);font-weight:600;margin-right:6px}
.slg-card{padding:16px 18px 2px;border-bottom:1px solid var(--line)}
.slg-card-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.slg-card-n{font-family:var(--disp);font-size:15px;font-weight:600;color:var(--text)}
.slg-card-n small{display:block;margin-top:3px;font-family:var(--mono);font-size:11.5px;font-weight:400;color:var(--faint)}
.slg-card-a{display:flex;gap:8px;flex-wrap:wrap}
.slg-ln{--c:var(--faint);display:grid;text-align:left;grid-template-columns:auto 104px minmax(0,132px) minmax(0,1fr);gap:4px 14px;
align-items:baseline;padding:9px 16px;border-bottom:1px solid var(--line-soft)}
.slg-ln.err{--c:var(--bad)} .slg-ln.warn{--c:var(--warn)} .slg-ln.noise{--c:var(--faint-a42)}
.slg-ln:hover{background:var(--surface-2)}
.slg-t{font-family:var(--mono);font-size:11.5px;color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.slg-t.est{cursor:help}
.slg-k{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--dim);white-space:nowrap;min-width:0}
.slg-k i{flex:none;width:7px;height:7px;border-radius:2px;background:var(--c)}
.slg-who{min-width:0;padding:0;border:0;background:none;color:var(--dim);font:inherit;font-size:12px;text-align:left;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.slg-who:hover{color:var(--brand-2)}
.slg-x{min-width:0;font-family:var(--mono);font-size:12px;line-height:1.65;color:var(--text);overflow-wrap:anywhere}
.slg-x .h{color:var(--brand-2)}
.slg-x .e{color:var(--dim)}
.slg-ln.err .slg-x .e{color:var(--bad)}
.slg-n{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
.slg-agm{grid-column:3/5;font-size:11.5px;color:var(--faint);margin-top:1px}
.slg-ln.ag{grid-template-columns:auto 104px minmax(0,1fr)}
.slg-ln.ag .slg-x{grid-column:3}
.slg-more{padding:16px;text-align:center;border-top:1px solid var(--line-soft)}
.slg-stream .empty,.slg-devs .empty{padding:30px 20px}
@media (max-width:1100px){
.slg-split{grid-template-columns:minmax(0,1fr)}
.slg-devs{position:static;max-height:380px}
}
@media (max-width:700px){
.slg-verdict{font-size:15.5px}
.slg-board{padding:16px 14px 14px}
.slg-ln,.slg-ln.ag{grid-template-columns:auto auto minmax(0,1fr);gap:4px 12px;padding:10px 14px;align-items:center}
.slg-ln .slg-x,.slg-ln.ag .slg-x,.slg-ln .slg-agm{grid-column:1/-1}
.slg-ln .slg-who{justify-self:end;max-width:100%}
}
/* 头部座位牌：车型与状态跟着人走，点开就先看到「他是谁、坐哪、还剩多久」 */
.ub-tag{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
border-radius:999px;padding:3px 11px;font-size:11.5px;color:var(--dim);white-space:nowrap}
.ub-tag b{font-weight:600;color:var(--text)}
.ub-tag>svg{width:12px;height:12px;flex:none}
.ub-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--faint);flex:none}
.ub-tag.ok .dot{background:var(--ok)} .ub-tag.warn .dot{background:var(--warn)} .ub-tag.bad .dot{background:var(--bad)}
.ub-tag.warn{color:var(--warn)} .ub-tag.bad{color:var(--bad)}
/* 车况窗口行复用 .pv-qwin/.qrail；去掉供应商板为账号行准备的缩进，数字列收窄
（乘客视角只有百分比，没有绝对量） */
.ub-qwrap .pv-qwin{padding-left:0;grid-template-columns:104px minmax(48px,1fr) 56px minmax(0,148px)}
.ub-share .qrail i.fill{background:var(--text-a46)}
.ub-share .pv-qwin.over .qrail i.fill{background:var(--warn)}
/* SLA：结论先行——大字是可用率，旁边一句话说明当下是不是正常 */
.ub-hero{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:1px 0 12px}
.ub-hero .n{font-family:var(--disp);font-size:33px;font-weight:650;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.ub-hero.bad .n{color:var(--bad)}
.ub-hero .s{font-size:11.5px;color:var(--faint)}
/* 停摆记录：时长画成条，长短相对本月最长的一次——一眼分出「掉了 2 分钟」和
「掉了 20 分钟」，补没补到在右边那句话里 */
/* 每行各自是一个 grid，尾列必须定宽——minmax(0,auto) 会让每行的轨道长短跟着
右侧文字走，上下两条对不齐的条子，人会先去比长度，再发现比错了 */
.ub-gap{display:grid;grid-template-columns:88px minmax(36px,1fr) 66px 122px;gap:10px;align-items:center;font-size:12px;margin-top:8px}
.ub-gap .at{color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.ub-gap .trk{height:6px;border-radius:2px;background:var(--surface-3);overflow:hidden}
.ub-gap .trk i{display:block;height:100%;border-radius:2px;background:var(--faint-a22)}
.ub-gap .trk i.hot{background:var(--bad-a32)}
.ub-gap .dur{font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.ub-gap .why{font-size:10.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ub-gap .why.got{color:var(--ok)}
.ub-gap.live .why{color:var(--bad)}
/* 价值窗口牌：既是读数也是选择器，选中的窗口决定下面逐项拆分看哪一段 */
.ub-value-nav{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;
flex-wrap:wrap;margin-bottom:11px}
.ub-value-nav .winsel{margin:0}
.ub-value-nav .ub-range{margin-left:auto}
.ub-allow-kind button{font-size:11px}
.ub-wins{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);
border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:11px}
.ub-win{background:var(--surface);padding:11px 14px 12px;text-align:left;cursor:pointer;
border:0;font:inherit;color:inherit;transition:background .15s;min-width:0}
.ub-win .k{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.ub-win .v{font-family:var(--disp);font-size:20px;font-weight:600;margin-top:5px;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ub-win .s{font-size:10.5px;color:var(--faint);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ub-win.on{box-shadow:inset 0 -2px 0 var(--brand);background:color-mix(in srgb,var(--brand) 6%,var(--surface))}
.ub-win:hover:not(.on){background:color-mix(in srgb,var(--brand) 3%,var(--surface))}
.ub-win:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
/* 近 30 天逐日价值柱：高度=当日官方价值。窗口牌回答「一共多少」，这排柱子回答
「是匀着用的还是一天烧出来的」——同一个 $203 两种形状，续费对话完全不同 */
.ub-days{display:flex;align-items:flex-end;gap:2px;height:56px;margin-top:2px}
.ub-days .b{flex:1;min-width:2px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;background:var(--line-soft);border-radius:2px 2px 0 0}
.ub-days .b i{display:block;width:100%;border-radius:2px 2px 0 0;background:var(--ok-a60);transition:background .12s}
.ub-days .b:hover i{background:var(--ok)}
.ub-days .b:hover{outline:1px solid var(--ok);outline-offset:0}
.ub-days-ax{display:flex;justify-content:space-between;font-size:10px;color:var(--faint);font-family:var(--mono);margin-top:6px}
/* 逐项拆分：模型名等宽字体带协议色点，条子按窗口内份额，行内右侧是钱和次数 */
.ub-brk{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:15px}
.ub-brk-t{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--dim);display:block}
.ub-row{display:grid;grid-template-columns:minmax(84px,152px) minmax(36px,1fr) 72px 104px;gap:10px;align-items:center;font-size:12px;margin-top:9px;min-width:0}
.ub-row .lbl{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;color:var(--dim);min-width:0}
.ub-row .lbl .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ub-row .lbl i{width:6px;height:6px;border-radius:50%;flex:none;background:var(--faint)}
.ub-row .trk{height:6px;border-radius:2px;background:var(--surface-3);overflow:hidden}
.ub-row .trk i{display:block;height:100%;border-radius:2px;background:var(--ok-a60);min-width:2px}
.ub-row .amt{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.ub-row .why{font-size:10.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ub-row .why .e{color:var(--bad);font-weight:600}
@media (max-width:760px){
.ub-brk{grid-template-columns:1fr}
.ub-wins{grid-template-columns:1fr}
.ub-win{display:flex;align-items:baseline;gap:10px}
.ub-win .v{margin-top:0}
.ub-qwrap .pv-qwin{grid-template-columns:86px minmax(36px,1fr) 50px minmax(0,104px);gap:8px}
.ub-gap{grid-template-columns:80px minmax(24px,1fr) 60px 96px;gap:8px}
.ub-row{grid-template-columns:minmax(72px,120px) minmax(28px,1fr) 64px 88px;gap:8px}
}
#hm-tip{position:fixed;z-index:70;pointer-events:none;background:var(--glass-thick);color:var(--toast-text);
-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
border:1px solid var(--toast-line);border-radius:var(--r-md);padding:7px 11px;
font-size:12px;line-height:1.6;opacity:0;transition:opacity .12s;box-shadow:var(--shadow-3);white-space:nowrap}
#hm-tip.show{opacity:1}
#hm-tip .tt{font-weight:600}
#hm-tip .td{color:var(--dim);font-family:var(--mono);font-size:11.5px}
/* 订阅卡「分配过的人」名单：同一枚浮层，一人一行、点在前、名字加粗、说明 mono。 */
#hm-tip .sh-h{margin-top:6px}
#hm-tip .sh-h:first-child{margin-top:0}
#hm-tip .sh-r{display:flex;align-items:center;gap:7px;padding-left:1px}
#hm-tip .sh-r b{font-weight:600}
#hm-tip .sh-dot{width:7px;height:7px;border-radius:50%;flex:none;border:1.5px solid var(--faint)}
#hm-tip .sh-dot.on{background:var(--ok-fill);border-color:var(--ok-fill)}
#hm-tip .sh-s{color:var(--dim);font-size:11.5px}
#hm-tip .sh-more{margin-top:5px;color:var(--dim);font-size:11.5px}
.cp-foot .fig>span.cpf-hist{cursor:pointer;border-radius:4px}
.cp-foot .fig>span.cpf-hist:hover b,.cp-foot .fig>span.cpf-hist:focus-visible b{color:var(--text)}
.cp-foot .fig>span.cpf-hist:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* toast：底部居中的一枚胶囊 HUD（玻璃），左端一个状态点。跟主题走。 */
#toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:60}
.toast{display:flex;align-items:center;gap:10px;background:var(--toast-bg);color:var(--toast-text);border:1px solid var(--toast-line);border-radius:var(--r-pill);
-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
padding:10px 18px 10px 15px;font-size:13px;font-weight:500;box-shadow:var(--shadow-3);animation:toastin .42s var(--spring) both}
@keyframes toastin{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:var(--faint)}
.toast.ok::before{background:var(--ok-fill)}
.toast.bad::before{background:var(--bad-fill)}
.toast.out{animation:sink .24s var(--ease) both}
@keyframes sink{to{opacity:0;transform:translateY(8px)}}
/* 确认卡 —— 原生 confirm 驯化成机箱上的一块确认小牌：琥珀 = 需要想一下，红 = 不可逆 */
.cfm-scrim{position:fixed;inset:0;background:var(--scrim);z-index:80;opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
.cfm-scrim.show{opacity:1;pointer-events:auto}
/* 确认框：macOS 26 的提示框——一块居中的厚玻璃，26px 圆角，弹出时轻轻放大。
琥珀点 = 需要想一下，红点 = 不可逆。 */
.cfm{position:fixed;left:50%;top:50%;width:min(420px,92vw);z-index:81;overflow:hidden;
background:var(--glass-thick);-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);
border:1px solid var(--rail-line);border-radius:var(--r-2xl);padding:22px 22px 18px;
box-shadow:var(--sheen),var(--shadow-1);opacity:0;pointer-events:none;
transform:translate(-50%,-50%) scale(1.06);transition:opacity .18s var(--ease),transform .34s var(--spring)}
.cfm.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.cfm h4{font-family:var(--disp);font-size:17px;font-weight:600;letter-spacing:-.015em;margin:0 0 8px;display:flex;align-items:center;gap:9px}
.cfm h4 .lamp{background:var(--warn);box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--warn-ahalo)}
.cfm.danger h4 .lamp{background:var(--bad);box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--bad-ahalo)}
/* pre-line: ask() writes textContent (never HTML), so a multi-line consequence
list — which chains go dark — keeps its line breaks. */
.cfm p{margin:0 0 20px;color:var(--dim);font-size:13.5px;line-height:1.65;white-space:pre-line}
.cfm-foot{display:flex;justify-content:flex-end;gap:10px}
.cfm-foot .btn{flex:1 1 0;min-width:0;justify-content:center;padding:9px 16px;font-size:14px}
/* 收款确认窗：和确认框是同一块玻璃（共用 .cfm，降低透明度那一行不用另登记），
多一张单据摘要和一排常用备注。绿点 = 入账，红点 = 拒绝。 */
.tpd{width:min(460px,92vw);max-height:92vh;overflow-y:auto;overscroll-behavior:contain}
.tpd h4{margin-bottom:14px}
.tpd.ok h4 .lamp{background:var(--ok-fill);box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--ok-ahalo)}
.tpd-sum{padding:14px 16px;margin:0 0 18px;border-radius:var(--r-lg);background:var(--fill-3)}
.tpd-who{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim);min-width:0}
.tpd-who b{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tpd-amt{display:flex;align-items:baseline;gap:8px;margin:8px 0 6px}
.tpd-amt .v{font-family:var(--disp);font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.tpd-amt .k{font-size:12px;color:var(--dim)}
.tpd-meta{font-size:12px;color:var(--dim);line-height:1.6}
.tpd-note{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--text);line-height:1.55;overflow-wrap:anywhere}
.tpd-note span{color:var(--dim)}
.tpd-lbl{display:block;font-size:12px;color:var(--dim);margin:0 0 8px}
.tpd .chips{gap:6px;margin:0 0 10px}
.tpd .chip{padding:6px 12px;font-size:12.5px}
.tpd .chip:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.tpd .tpd-hint{margin:10px 0 20px;font-size:12px;color:var(--dim);line-height:1.55}
/* 窄屏：确认窗改成从底部升起的一张单子，两颗按钮落在拇指够得着的地方。
触屏上打开时不抢焦点（见 decideTopup）：键盘一弹起来就把「确认入账」盖住了，
而多数时候备注用默认的「收到」就行。常用备注排成一行横滑，不占四行高。 */
@media (max-width:860px){
.tpd{left:0;right:0;top:auto;bottom:0;width:auto;max-height:calc(100dvh - 32px);
border-width:1px 0 0;border-radius:var(--r-2xl) var(--r-2xl) 0 0;
padding:22px 16px calc(14px + env(safe-area-inset-bottom));transform:translateY(100%)}
.tpd.show{transform:none}
.tpd .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;margin:0 -16px 10px;padding:0 16px}
.tpd .chips::-webkit-scrollbar{display:none}
.tpd .chip{flex:none;padding:8px 14px;font-size:13.5px}
.tpd .cfm-foot .btn{min-height:46px;font-size:15px}
}
/* ============ 窄屏：底部浮动标签栏 ============
侧栏化作浮在拇指边的一枚玻璃胶囊（iOS 26 的标签栏）：图标 + 标签逐格可读，
当前格垫一块浅色胶囊。台账变横向滑轨（两端本色淡出暗示还有内容），
抽屉满幅、看板成底部抽板。 */
@media (max-width:860px){
#app{grid-template-columns:1fr}
.rail{position:fixed;top:auto;bottom:calc(8px + env(safe-area-inset-bottom));left:10px;right:10px;height:auto;margin:0;z-index:30;
flex-direction:row;align-items:stretch;
padding:5px;border-radius:30px;
border:1px solid var(--rail-line);background:var(--glass-thick);
box-shadow:var(--sheen),var(--shadow-3)}
.brand,.rail-foot{display:none}
/* 底部只放四个最常用的模块 + 「更多」，五格平分一排，不横向滑动 */
.nav{flex-direction:row;align-items:stretch;gap:2px;min-height:auto;overflow:visible}
.nav-item:not(.dock):not(.nav-more){display:none}
.nav-item.nav-more{display:flex}
.nav-item{position:relative;flex-direction:column;justify-content:center;gap:3px;
padding:7px 4px 6px;width:auto;min-width:0;min-height:48px;flex:1 1 0;border-radius:24px;font-weight:500}
.nav-item svg{width:20px;height:20px}
.nav-item span{font-size:10.5px;line-height:1;white-space:nowrap;max-width:100%}
/* 底部浮条沿用浅填充：一排五格里一块实心墨色太重 */
.nav-item.on,.nav-item.on:hover,.nav-item.on:active{background:var(--rail-on-bg);color:var(--rail-on-text);font-weight:600;box-shadow:none}
.nav-item.on svg{color:var(--rail-on-text)}
.main{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
/* 顶栏收紧：标题可截断，副题让位给台面 */
.topbar{padding:12px 14px;gap:8px}
.topbar>div:first-child{min-width:0}
.topbar .title{font-size:16.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .crumb{display:none}
.topbar .right{gap:2px;flex:none}
.who{max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 手机宽度下顶栏右侧六个按钮排不下（所有者还多一个角色牌），会把整页撑出横向滚动：
搜索只留放大镜，用户名让给角色牌（点开「账户与安全」仍能看到是谁）。 */
.tb-search span,.tb-search .pal-kbd{display:none}
/* 窄屏的工具栏只留图标：主题跟着系统走，切换钮收起来；刷新 / 退出变成圆形图标钮。
以前这一排全是字，页面标题被挤得只剩一个字。 */
.topbar>div:first-child{padding-right:8px}
.topbar .theme-btn{display:none}
/* 写成 .topbar .btn.x：触屏那一节的 .btn.sm{padding:8px 13px} 在后面、特指度一样，
会把 34px 的圆钮撑回去、把里面的图标挤成一个点。 */
.topbar .btn.tb-search{width:34px;height:34px;min-width:0;padding:0;justify-content:center;border-radius:50%;background:transparent}
.topbar .btn.tb-search svg{flex:none;width:17px;height:17px}
.topbar .btn.tb-act{width:34px;height:34px;padding:0;justify-content:center;border-radius:50%}
.tb-act .tb-ico{display:block}
.tb-act .tb-txt{display:none}
.as-launch{padding:6px 9px}
.view{--view-top:12px;padding:var(--view-top) 12px 32px}
.sec{margin-bottom:20px}
.eyebrow{margin:0 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 仪表与卡阵收为双列 / 单列 */
.tiles,#ku-tiles{grid-template-columns:repeat(2,1fr);gap:8px}
.tile{padding:12px 12px}
.tile .v{font-size:22px}
#ku-tiles .tile .v{font-size:21px}
.htiles{grid-template-columns:repeat(2,1fr)}
.hcards{grid-template-columns:1fr}
/* 纸带板窄屏：轴头收起，每行折成「名字 / 读数 / 整幅纸带」三层 */
.tb-axis{display:none}
.tbr{flex-wrap:wrap;gap:8px 14px;padding:12px var(--pad)}
.tb-id{width:auto;flex:1 1 100%;order:1}
.tb-rate,.tb-lat{order:2;width:auto;text-align:left}
.tb-rate .n{display:inline;margin-left:5px}
.tb-lat::before{content:"TTFB P90 ";letter-spacing:.1em;font-size:9.5px;color:var(--faint)}
.tb-tr{order:3;flex:1 1 100%}
.tbx{grid-template-columns:1fr}
.statstrip,.statstrip.c3{grid-template-columns:repeat(2,1fr)}
/* 窄屏：结论收字号，台账的读数牌从右缘翻到行底横过来 */
.ef-say{padding:17px 16px 15px}
.ef-say-h{font-size:20px;line-height:1.5}
.ef-reads{grid-template-columns:repeat(2,minmax(0,1fr))}
.ef-read{padding:12px 15px 14px}
.ef-read:nth-child(n){border-left:1px solid var(--line-soft);border-top:none}
.ef-read:nth-child(odd){border-left:none}
.ef-read:nth-child(n+3){border-top:1px solid var(--line-soft)}
.dk-sum{grid-template-columns:minmax(0,1fr) 18px;gap:3px 12px;padding:12px 14px 13px 18px}
.dk-claim{white-space:normal}
.dk-plate{grid-column:1;grid-row:3;grid-row-end:4;text-align:left;min-width:0;
display:flex;align-items:baseline;gap:8px;margin-top:7px}
.dk-plate b{font-size:17px}
.dk-plate i{margin-top:0}
.dk-cv{grid-column:2;grid-row:1/4}
.dk-body{padding:0 15px 16px 18px}
.dk-im{margin-left:0}
.ef-tabs{padding:8px 8px 0;overflow-x:auto}
.route{grid-template-columns:1fr;gap:10px;padding:14px 16px}
.line{grid-template-columns:1fr;gap:10px}
.line-act{justify-content:flex-start}
/* 切换链：卡片本来就是竖排的，窄屏只需把母线收窄、手柄放大到能按 */
.hoprow,.chain-add,.chain-end{grid-template-columns:20px minmax(0,1fr);gap:9px}
.hoprow:not(:last-child)::after{left:29px}
.hop-tools button,.hop-grip{width:32px;height:34px}
/* 台账变横向滑轨：列不再互相挤压，左右滑读全表；
两端本色遮罩随内容滚动让开，露出边缘阴影提示"这边还有" */
.panel{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
background:
linear-gradient(90deg,var(--surface) 38%,transparent) left/32px 100% no-repeat local,
linear-gradient(270deg,var(--surface) 38%,transparent) right/32px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%,var(--text-a16),transparent) left/14px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%,var(--text-a16),transparent) right/14px 100% no-repeat scroll,
var(--surface)}
.panel th,.panel td{white-space:nowrap}
.panel td{max-width:min(72vw,340px);overflow:hidden;text-overflow:ellipsis}
.panel td.empty,.pv-empty-row td{white-space:normal;max-width:none}
/* 时间窗轴、筛选轨、搜索框：可滑、可伸（标签让位，轴占满整行） */
.hwin{width:100%;min-width:0}
.hwin-lbl{display:none}
.winsel{max-width:100%;overflow-x:auto;scrollbar-width:none}
.winsel::-webkit-scrollbar{display:none}
.winsel button{flex:none}
.ku-rail{padding:9px 10px}
.ku-rail-acts{margin-left:0;width:100%}
.pv-rail{padding:9px 10px}
/* 掌上这张表走的是横向滑轨（上面 .panel 那条规则），滑轨要的是「列按内容撑开、
整表比屏幕宽」，正好和定宽相反——所以这一档把 table-layout 交回 auto，
百分比列宽全部作废。八列在 390px 上无论怎么分都读不了，滑着读才读得完整。 */
#v-providers table{table-layout:auto;width:auto;min-width:100%}
/* 交回 auto 之后，每一格得自己报出「我至少要这么宽」——上面那几条为定宽写的
min-width:0 / 省略号，在滑轨里正好是反效果：列会一路缩到只剩三个字母，
而屏幕右边还空着。这几行就是把那几条按滑轨的规矩改回来。 */
#v-providers .pv-plate{min-width:236px}
#v-providers .pv-meters{min-width:300px}
#v-providers .pv-wire{padding-left:8px;min-width:132px}
#v-providers .pv-m,#v-providers[data-pvkind="claude"] .pv-m{grid-template-columns:92px minmax(56px,1fr) 84px 64px 96px;gap:10px}
#v-providers .pv-m .mtk{display:block}
#v-providers .pv-mnone,#v-providers[data-pvkind="claude"] .pv-mnone{grid-template-columns:92px minmax(56px,1fr);gap:10px}
#v-providers .pv-mail{min-width:0;max-width:none}
#v-providers .pv-link{overflow:visible;max-width:none}
#v-providers .ap-cellbtn{padding:2px 9px;gap:5px}
#v-providers .ap-cellbtn .t{overflow:visible}
/* 铭牌格必须能折行：上面 .panel td 的 nowrap + overflow:hidden 会把测试按钮
和线名挤在同一行再切掉，看起来又像按钮不存在。 */
#v-providers td.pv-c-name{white-space:normal;max-width:none;overflow:visible}
.pv-touch-act{display:flex;grid-column:1/-1;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px}
.pv-touch-act .btn{padding:8px 12px;min-height:38px;font-size:13px}
.pv-touch-act .btn svg{width:14px;height:14px}
/* 右侧那两颗图标藏起来：铭牌下面已经有一套按得到的按钮，同一行两套，窄屏上
后一套仍然要滑出屏幕才看得到。闸刀和灯留着——它们是读数，不是重复的动作。 */
#v-providers .pv-ops-acts{display:none}
/* 掌上：导语和动作各占一行，读数窗横着滑 */
.pv-top{flex-wrap:wrap;gap:10px}
.pv-pop{right:auto;left:0;width:min(288px,calc(100vw - 32px))}
.pv-menu:last-child .pv-pop{right:0;left:auto}
/* 表比屏幕宽，面板整块横滑。抬头若跟着表走，实况和筛选会滑出屏幕。
钉在可视区域左侧。实况窗折行，六盏灯都在屏幕里，不藏进一条没有滚动条的横滑。 */
#v-providers .pv-face,#v-providers .pv-read,#v-providers .pv-filters,#v-providers .pv-tools,#v-providers .pv-notice{
position:sticky;left:0;z-index:2;box-sizing:border-box;max-width:100%}
#v-providers .pv-read,#v-providers .pv-filters,#v-providers .pv-tools{background:var(--surface)}
#v-providers .pv-face>.pv-live{width:auto;max-width:100%;min-width:0;margin:0;padding:0 10px 8px}
#v-providers .pv-gauge{flex:1 1 auto;width:auto;min-width:0;flex-wrap:wrap;align-content:center;row-gap:2px;overflow:visible}
.pv-read{flex-wrap:wrap;row-gap:6px}
#v-providers .pv-tools>.pv-sort{flex:1 1 160px}
#v-providers .pv-tools>.pv-sort select{flex:1;min-width:0;width:auto}
.pv-gauge button{flex:none}
/* 手机上分栏条要能横着滑，三段挤不下时不换行——它是导航，断成两行就读不出层级 */
.pv-tabs{flex:1 1 100%;padding:0 4px;overflow-x:auto;scrollbar-width:none}
.pv-tabs::-webkit-scrollbar{display:none}
.pv-tab{height:38px;padding:0 10px;flex:none;font-size:12.5px}
.pv-find{flex:1 1 150px}
.pv-find input,.pv-find input:focus{flex:1;width:auto;min-width:0}
.probe-bar .probe-act{flex-wrap:wrap}
.ps-v{max-width:70vw}
/* 抽屉满幅：表单成为整页的操作台 */
.drawer,.drawer.wide,.drawer.xl,.drawer.cwb,.drawer.carb{top:0;right:0;bottom:0;width:100vw;max-width:100vw;height:100dvh;border:0;border-radius:0}
.drawer-body{overscroll-behavior:contain}
.drawer-foot{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.drawer-foot .btn{flex:1;justify-content:center;padding:12px}
/* 乘客动作按标签宽度折行。上面那条 flex:1 会把五颗 nowrap 按钮的最小宽度
加在一起，窄屏上仍然比抽屉宽，多出来的又从左边溢到页面上。 */
.drawer-foot .seat-acts .btn{flex:0 0 auto;min-width:0;padding:12px 14px}
.pboard .pv-acts .btn{min-height:38px;padding:8px 12px}
/* 透视 / 活动看板：从底部升起的抽板 */
.pboard{top:auto;bottom:0;left:0;right:0;width:100%;max-width:100%;
max-height:calc(100dvh - 42px);border-radius:18px 18px 0 0;
border-left:none;border-right:none;border-bottom:none;
transform:translateY(28px)}
.pboard.show{transform:translateY(0)}
.pv-head{padding:16px 14px 14px}
.pv-body{padding:14px 12px calc(18px + env(safe-area-inset-bottom));overscroll-behavior:contain}
.pv-tiles{grid-template-columns:repeat(2,1fr)}
.pv-name{max-width:52vw}
/* 提示条移到机架上方 */
#toasts{bottom:calc(92px + env(safe-area-inset-bottom));left:14px;right:14px;transform:none;align-items:center}
.toast{max-width:100%}
.login-card{width:min(380px,calc(100vw - 28px));padding:26px 18px 20px}
.login-card .sub{margin-bottom:14px}
.login-mark{margin-bottom:14px}
.login-mark .appmark{width:52px;height:52px;border-radius:12px}
.login-mark .appmark svg{width:31px;height:31px}
.theme-btn.float{top:calc(14px + env(safe-area-inset-top))}
.doc-body{padding:18px 16px}
.doc-body table{display:block;overflow-x:auto}
.doc-body th,.doc-body td{white-space:nowrap}
}
/* ---- 掌上（≤760px）：上游线路表改成卡片 ----
手机上整张表横着滑：铭牌占满一屏，余量、期限、开关都在屏幕外，看一个账号要滑
三次。改成一个账号一张卡，四格竖着排：铭牌 / 用途 / 余量 / 线路。期限格沿用
≤1120 那条规则仍然收起（到期红标回到铭牌上，登记续费在「更多」菜单里）。
这一块排在上面那个 ≤860 横滑块后面，是为了压过那里按横滑写的 min-width。 */
@media (max-width:760px){
#v-providers table,#v-providers tbody,#v-providers tr,#v-providers td{display:block;width:auto;min-width:0;max-width:none}
#v-providers thead,#v-providers td.pv-grip-cell,#v-providers .pv-touch-act{display:none}
#v-providers tbody tr{padding:13px 14px 14px;border-bottom:1px solid var(--line-soft)}
#v-providers tbody tr:last-child{border-bottom:0}
#v-providers td{padding:0;border:0;white-space:normal;overflow:visible;vertical-align:top}
#v-providers td.pv-c-wire,#v-providers td.pv-c-cred,#v-providers td.pv-c-meter,#v-providers td.pv-c-term,#v-providers td.pv-c-ops{margin-top:10px}
#v-providers tr.ap-grouphd>td{padding:0}
#v-providers td.ap-xempty,#v-providers .pv-empty-row td{padding:14px 0;text-align:left}
/* 触屏块给横滑写的最小宽度在卡片里都要撤掉 */
#v-providers .pv-plate,#v-providers .pv-meters,#v-providers .pv-wire{min-width:0}
#v-providers .pv-wire{padding-left:9px}
#v-providers .pv-m{grid-template-columns:minmax(0,60px) minmax(40px,1fr) 64px 60px 92px;gap:6px}
#v-providers .pv-mnone{grid-template-columns:minmax(0,60px) minmax(40px,1fr);gap:6px}
#v-providers .pv-m .mb{max-width:none}
/* 线路格横着排一行：灯在左、开关和图标在右。右侧图标在卡片里回来（铭牌下面那排
大按钮撤了，它们是同一组动作），按触屏尺寸放到 34px。 */
#v-providers .pv-ops{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 12px}
#v-providers .pv-ops-read{flex:1 1 auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 12px}
#v-providers .pv-ops-do{margin-left:auto}
#v-providers .pv-ops-acts{display:inline-flex}
#v-providers .pv-ops-acts .btn.icon{width:34px;height:34px}
#v-providers .pv-ops .badge{padding:3px 10px;font-size:12px}
#v-providers .pv-ops .sw{padding:3px 10px 3px 5px}
/* 筛选轨：每组一行横滑，不再折成四五行把表推到第二屏 */
#v-providers .pv-filters{flex-direction:column;align-items:stretch;gap:6px;padding:8px 14px}
#v-providers .pv-grp{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:2px;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
#v-providers .pv-grp::-webkit-scrollbar{display:none}
#v-providers .pv-grp>*{flex:none}
#v-providers .pv-chips{flex-wrap:nowrap}
#v-providers .pv-read{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
#v-providers .pv-read::-webkit-scrollbar{display:none}
#v-providers .pv-read>*{flex:none}
/* 实况读数窗也横滑一行，不折成两行 */
#v-providers .pv-gauge{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
#v-providers .pv-gauge::-webkit-scrollbar{display:none}
/* 页顶那句导语和「显示 N / N · 拖拽」的提示在手机上各占一行，只是在把表往下推 */
#v-providers .pv-top .eyebrow,#v-providers .pv-count{display:none}
#v-providers .pv-top{margin-bottom:10px}
}
/* 触屏基本功：输入 16px 免 iOS 聚焦放大、靶区加大、悬停才现身的控件常驻 */
@media (pointer:coarse){
/* !important 是有意的：这条规则要压过每一处按版面调过字号的 id / 类选择器
（#pv-q、#pal-q、#combo-q、#as-input、.cat-sort… 都比 `input` 更特指，
实测有 12 处小于 16px）。小于 16px 的输入框一被对焦，iOS 就把整页放大，
而放大之后吸顶条、机架、弹层的定位全部错位——它不是字号问题，是布局事故。
写成通配还有一个好处：以后新加的输入框自动落在保护里，不用记得来补一行。 */
input,select,textarea{font-size:16px!important}
.btn.sm{padding:8px 13px}
/* 圆形图标按钮不要上一行的内边距：同特异性、排在后面，.sm.icon 会继承它 */
.btn.icon{width:38px;height:38px;padding:0}
.btn.icon svg{width:16px;height:16px}
.theme-btn{width:36px;height:36px}
.x{width:36px;height:36px;font-size:19px}
.hop-tools button,.hop-grip{width:34px;height:38px}
/* 从属行在触屏上也得够 16px：小于它 iOS 一聚焦就整页放大 */
.hop-sub>*{font-size:16px;padding:7px 8px}
.hop-more{font-size:13px;padding:6px 0}
.pm-x{padding:4px 12px;font-size:18px}
.winsel button{padding:9px 15px}
.seg button{padding:10px 9px}
.ku-act{padding:8px 11px}
.pv-chip{height:30px}
.pv-seg{height:32px}
.ps-clear{padding:6px 11px}
.doc-body .pre-copy{opacity:.9}
/* 1120px 档把操作图标收到 25px，特异性压过上面的 .btn.icon{38px}。
平板横屏仍走桌面那一列，手指点不中 25px。 */
#v-providers .pv-ops-acts .btn.icon{width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ---------- 接入文档 / DOCS ---------- */
.doc-wrap{padding:0;overflow:hidden}
.doc-body{padding:24px 28px;line-height:1.72;color:var(--dim);font-size:13.5px;max-width:960px}
.doc-body h1{font-size:21px;margin:2px 0 6px;color:var(--text);letter-spacing:-.01em}
.doc-body h2{font-size:16px;margin:28px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line);color:var(--text)}
.doc-body h3{font-size:13.5px;margin:20px 0 8px;color:var(--brand-2)}
.doc-body p{margin:9px 0}
.doc-body ul{margin:9px 0;padding-left:20px}
.doc-body ul ul{margin:4px 0}
.doc-body li{margin:5px 0}
.doc-body a{color:var(--brand-2)}
.doc-body a:hover{text-decoration:underline}
.doc-body code{font-family:var(--mono);font-size:12px;background:var(--surface-3);padding:1.5px 6px;border-radius:5px;color:var(--brand-2);white-space:nowrap}
.doc-body pre{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:10px;padding:13px 15px;overflow:auto;margin:11px 0}
.doc-body pre code{background:none;padding:0;color:var(--text);font-size:12px;line-height:1.65;display:block;white-space:pre}
.doc-body .codeblock{position:relative;margin:11px 0}
.doc-body .codeblock pre{margin:0}
.doc-body .pre-copy{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:7px;background:var(--surface-3);color:var(--faint);cursor:pointer;opacity:.5;transition:opacity .14s,color .14s,border-color .14s}
.doc-body .codeblock:hover .pre-copy{opacity:1}
.doc-body .pre-copy:hover{color:var(--brand-2);border-color:var(--brand)}
.doc-body .pre-copy.done{color:var(--ok);border-color:var(--ok);opacity:1}
.doc-body blockquote{margin:11px 0;padding:9px 14px;border-left:3px solid var(--brand);background:var(--brand-dim);border-radius:0 8px 8px 0}
.doc-body table{border-collapse:collapse;width:100%;margin:12px 0;font-size:12.5px}
.doc-body th,.doc-body td{border:1px solid var(--line);padding:7px 11px;text-align:left;vertical-align:top}
.doc-body th{background:var(--surface-2);color:var(--text);font-weight:600;white-space:nowrap}
.doc-body hr{border:none;border-top:1px solid var(--line);margin:20px 0}
/* ---------- 呼叫单 / CALL TRACE ----------
一次调用的接线记录：从客户端要的模型，到这把 Key 的通道、命中的规则、
按序试过的每一跳，最后落在应答的那家供应商和它的计量。
版面是一条竖着的信号走线——机箱里那束线立起来：节点是接点，
线段是电流，打开时电流自上而下跑一遍，跑到哪一跳就点亮哪一跳。
失败的跳画成断线（缺口 + 红帽），命中的那跳走线常亮流动。
日志 / 用户 / 密钥三处点开的是同一张单子，只是入口不同。 */
.tscrim{position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .3s var(--ease);z-index:60}
.tscrim.show{opacity:1;pointer-events:auto}
/* 与通用抽屉同一形制：离窗口边 10px 的浮动面板，24px 圆角，弹簧滑入 */
.tdrawer{position:fixed;top:10px;right:10px;bottom:10px;width:788px;max-width:calc(100vw - 20px);background:var(--surface);
border:1px solid var(--line);border-radius:var(--r-2xl);transform:translateX(calc(100% + 24px));transition:transform .44s var(--spring);
z-index:61;display:flex;flex-direction:column;box-shadow:none;overflow:hidden}
.tdrawer.show{transform:none;box-shadow:var(--shadow-2)}
.tr-head{display:flex;align-items:flex-start;gap:12px;padding:17px 20px 15px;border-bottom:1px solid var(--line-soft);position:relative}
.tr-head::after{content:none}
.tr-head h3{font-family:var(--disp);font-size:16.5px;font-weight:600;margin:0;letter-spacing:-.01em}
.tr-sub{font-size:12px;color:var(--faint);margin-top:5px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tr-back{font-size:17px;line-height:1;margin-top:2px}
.tr-rid{font-family:var(--mono);font-size:11px;color:var(--dim);background:var(--surface-3);border:1px solid var(--line);
border-radius:6px;padding:2px 8px;cursor:pointer}
.tr-rid:hover{color:var(--brand-2);border-color:var(--brand)}
.tr-body{padding:18px 20px 26px;overflow-y:auto;flex:1}
/* 走线：左侧接点 + 电流线段，右侧一张卡片 */
.tr-run{display:flex;flex-direction:column}
.tr-stage{display:grid;grid-template-columns:26px 1fr;column-gap:14px;align-items:start;
animation:rise .34s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i)*.07s)}
.tr-lead{position:relative;display:flex;justify-content:center;align-self:stretch;padding-top:5px}
.tr-lead::before{content:"";position:absolute;top:16px;bottom:-4px;left:50%;width:2px;margin-left:-1px;border-radius:2px;
background:linear-gradient(180deg,var(--brand),var(--brand-a30));
background-repeat:no-repeat;animation:tcurrent .42s ease-out both;animation-delay:calc(var(--i)*.07s + .12s)}
.tr-stage:last-child .tr-lead::before{display:none}
.tr-node{width:11px;height:11px;border-radius:50%;background:var(--surface-3);border:2px solid var(--brand);z-index:1;
animation:tlight .3s ease-out both;animation-delay:calc(var(--i)*.07s + .1s)}
.tr-stage.bad .tr-node{border-color:var(--bad)}
.tr-stage.bad .tr-lead::before{background:linear-gradient(180deg,var(--bad),var(--bad-a25))}
@keyframes tcurrent{from{background-size:100% 0}to{background-size:100% 100%}}
@keyframes tlight{from{transform:scale(.4);box-shadow:none}
to{transform:none;box-shadow:0 0 var(--halo-blur) var(--halo-spread) var(--brand-ahalo)}}
.tr-card{padding:0 0 20px;min-width:0}
.tr-k{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.tr-v{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13.5px}
.tr-strong{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--text);word-break:break-all}
.tr-note{font-size:12px;color:var(--dim);margin-top:7px;line-height:1.6}
.tr-note b{color:var(--text);font-weight:600}
.tr-node-sec{margin-top:22px;padding:16px 18px 18px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.tr-node-sec>.tr-k{margin-top:14px}
.tr-node-sec>.tr-k:first-child{margin-top:0}
.tr-node-body{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.tr-node-body .tr-k{margin-top:14px}
.tr-node-body .tr-k:first-child{margin-top:0}
.tr-node-pre{margin:8px 0 0;padding:12px 14px;border-radius:12px;background:var(--fill-4);font-family:var(--mono);font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word;max-height:280px;overflow:auto}
#tr-node-body-out{margin-top:12px}
#lg-nodeerr{max-width:186px}
.tr-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;
background:var(--surface-3);color:var(--dim);border:1px solid var(--line);white-space:nowrap}
.tr-chip.mono{font-family:var(--mono);font-weight:500}
.tr-chip.on{color:var(--brand-2);background:var(--brand-dim);border-color:var(--brand-a45)}
.tr-chip.warnc{color:var(--warn);background:var(--warn-a12);border-color:var(--warn-a40)}
.tr-chip.badc{color:var(--bad);background:var(--bad-a11);border-color:var(--bad-a40)}
/* 配线架：候选链的每一跳 */
.tr-rack{display:flex;flex-direction:column;gap:7px}
.tr-hop{display:grid;grid-template-columns:20px 1fr auto;column-gap:11px;align-items:center;
background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:9px 12px 9px 10px;position:relative}
.tr-seq{font-family:var(--mono);font-size:11.5px;color:var(--faint);text-align:center}
.tr-hop-main{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.tr-up{font-weight:600;font-size:13px}
.tr-alias{font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.tr-hop-r{display:flex;align-items:center;gap:9px;white-space:nowrap}
.tr-ms{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.tr-hop-why{grid-column:2/-1;font-size:11.5px;color:var(--faint);margin-top:5px}
/* 命中：接通的那一跳常亮，左缘一条流动的电流 */
.tr-hop.ok{border-color:var(--ok-a52);background:var(--ok-8-on-surface)}
.tr-hop.ok::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;
background:linear-gradient(180deg,var(--ok),var(--ok-a40));background-size:100% 200%;
animation:tflowv 1.9s linear infinite}
@keyframes tflowv{from{background-position:0 200%}to{background-position:0 0}}
.tr-hop.ok .tr-up{color:var(--ok)}
/* 失败 / 跳过：断线——缺口加一顶红帽，读起来就是"这条没接上" */
.tr-hop.fail{border-color:var(--bad-a42)}
.tr-hop.fail::before{content:"";position:absolute;left:0;top:50%;width:3px;height:12px;margin-top:-6px;border-radius:3px;background:var(--bad)}
.tr-hop.fail .tr-up{color:var(--bad)}
.tr-hop.idle{border-style:dashed;background:transparent;opacity:.6}
.tr-hop.idle .tr-up{color:var(--dim);font-weight:500}
.tr-hop.blocked{border-style:dashed;border-color:var(--warn-a45);background:transparent}
.tr-hop.blocked .tr-up{color:var(--warn)}
/* 计量：四条 token 计量条 + 结算 */
.tr-meter{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:1px;background:var(--line-soft);
border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tr-cell{background:var(--surface);padding:11px 13px}
.tr-cell .k{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--dim)}
.tr-cell .v{font-family:var(--disp);font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums}
.tr-cell .v small{font-size:11.5px;font-weight:500;color:var(--dim);margin-left:3px}
.tr-cell.cost .v{color:var(--brand-2)}
.tr-bar{height:4px;border-radius:3px;background:var(--surface-3);margin-top:9px;overflow:hidden}
.tr-bar i{display:block;height:100%;border-radius:3px;background:var(--brand);animation:tgrow .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:.3s}
.tr-bar.out i{background:var(--oa)} .tr-bar.cr i{background:var(--gm)} .tr-bar.cw i{background:var(--im)}
@keyframes tgrow{from{transform:scaleX(0);transform-origin:left}to{transform:none}}
.tr-blank{padding:22px;border:1px dashed var(--line);border-radius:12px;color:var(--faint);font-size:12.5px;line-height:1.7}
/* 当前账号的角色徽标，就贴在用户名后面：交接之后第一件要确认的事是「我现在是谁」 */
.role-chip{margin-left:6px;padding:1px 6px;border-radius:999px;font-size:11px;line-height:1.6;
border:1px solid var(--line-soft);color:var(--dim);white-space:nowrap}
/* 所有者是紫的，不是绿的。绿在这套灯语里是「通着、没事」，而所有者说的是「这把
钥匙开得最深」——那是权限的轴，和健康无关。设置页的权限档位用的是同一支紫。 */
.role-chip.role-owner{color:var(--brand-2);border-color:var(--brand-a40)}
.role-chip.role-viewer{color:var(--faint)}
/* 只读账号：把写操作的按钮压暗并挡住点击。它们仍然存在，因为看得见「这里本来有个按钮，
但我这个角色按不动」比按钮凭空消失更好解释。 */
body.is-viewer .sec .btn:not(.ghost):not(.x){opacity:.45;pointer-events:none}
/* 审计页的两条筛选栏。窄屏时筛选整条落到标题下面而不是把标题挤成竖排 */
.audit-bar{display:flex;justify-content:space-between;align-items:center;gap:14px 18px;flex-wrap:wrap;margin-bottom:14px}
.audit-bar>p{flex:1 1 260px;min-width:0}
/* 全局的 input/select 是 width:100%，在这条工具栏里会把三个下拉撑成三整行。
这里按内容给宽度，让它们排成一行读得完的一排。 */
.audit-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:0 1 auto}
.audit-filters input{width:210px;flex:0 1 210px;min-width:130px}
.audit-filters select{width:auto;flex:0 0 auto;min-width:112px;padding-right:34px}
.audit-check{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);white-space:nowrap}
.audit-check input{width:auto;flex:none;min-width:0;margin:0}
@media (max-width:720px){.audit-bar>p{flex:1 1 100%}.audit-filters{width:100%}
.audit-filters input,.audit-filters select{flex:1 1 120px;min-width:0;width:auto}}
/* ---------- 内容安全 ----------
间距全部抄设置页与审计页（.set-panel 20/22、.field 13、.sec 34、.audit-bar），不另起一套。 */
/* 模式三选一：每个按钮自带一句「选了它会怎样」，比按钮下面再摞一段说明更不容易读串行。
拦截是红、仅记录是黄——和事件表里两种处理的标签同色，一眼对得上。 */
.sf-mode button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:12px 14px;line-height:1.45}
.sf-mode button b{font-size:13.5px;font-weight:600;color:var(--text)}
.sf-mode button span{font-size:11.5px;color:var(--faint);font-weight:400}
.sf-mode button.on b{color:var(--brand-2)}
.sf-mode button.m-observe.on{border-color:var(--warn-a45);background:var(--warn-a12)}
.sf-mode button.m-observe.on b{color:var(--warn)}
.sf-mode button.m-block.on{border-color:var(--bad-a45);background:var(--bad-a11)}
.sf-mode button.m-block.on b{color:var(--bad)}
.sf-mode button.on span{color:var(--dim)}
.sf-grid{margin-top:18px}
.sf-grid input{max-width:320px}
.sf-boardbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:18px}
.sf-boardbar .eyebrow{margin:0}
.sf-status{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--dim)}
.sf-status .mono{font-size:12.5px;color:var(--text)}
.sf-status .bad{color:var(--bad);font-weight:600}
.sf-spend{margin-bottom:14px}
.sf-spend-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 32px;flex-wrap:wrap}
.sf-spend .k{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--dim)}
.sf-spend .v{font-family:var(--disp);font-size:32px;font-weight:600;letter-spacing:-.03em;line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums}
.sf-spend .sub{margin-top:8px;font-size:12.5px;color:var(--dim);line-height:1.6}
.sf-spend .side{max-width:46ch;font-size:12.5px;color:var(--dim);line-height:1.7}
@media (max-width:760px){.sf-spend .v{font-size:26px}}
.sf-line{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-height:41px;padding:0 2px;font-size:13px;color:var(--dim)}
.sf-line .mono{color:var(--text);font-size:12.5px}
.sf-line .dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--ok-fill)}
.sf-line.bad .dot{background:var(--bad-fill)}
.sf-cats-field{margin-top:18px}
.sf-cats{gap:7px}
.sf-cats .chip{font-size:12px;padding:5px 12px}
.sf-cats .chip.off{color:var(--faint);text-decoration:line-through;text-decoration-color:var(--faint-a55)}
.sf-cat-n{margin-left:8px;font-family:var(--mono);letter-spacing:0;text-transform:none;color:var(--dim);font-weight:500}
.sf-scope{margin:18px 0 0;padding:12px 16px 12px 32px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line-soft);
font-size:12px;color:var(--dim);line-height:1.65}
.sf-scope li+li{margin-top:4px}
.sf-scope b{color:var(--text);font-weight:600}
/* 趋势与试一句并排：两块都是「读一眼」的东西，竖着摞会把命中记录推到第三屏 */
.sf-duo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px 18px;align-items:start}
@media (max-width:1180px){.sf-duo{grid-template-columns:minmax(0,1fr);gap:34px}}
.sf-legend{display:inline-flex;align-items:center;gap:6px 14px;flex-wrap:wrap;font-size:12px;color:var(--dim)}
.sf-legend>span{display:inline-flex;align-items:center;gap:6px}
.sf-legend i{display:inline-block;width:9px;height:9px;border-radius:3px}
.sf-legend i.b{background:var(--bad)} .sf-legend i.o{background:var(--warn)} .sf-legend i.c{background:var(--faint-a55)}
/* 命中与检测量各用各的尺子：命中往往只有检测量的百分之一，共用一把尺它就是一条贴地的线 */
.sf-trend{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:6px;align-items:end}
.sf-day{display:flex;flex-direction:column;align-items:stretch;gap:5px;min-width:0}
.sf-day .hit{height:78px;display:flex;flex-direction:column;justify-content:flex-end;border-radius:4px;background:var(--surface-2)}
.sf-day .hit>i{display:block;min-height:0}
.sf-day .hit>i.b{background:var(--bad)} .sf-day .hit>i.o{background:var(--warn)}
.sf-day .hit>i:first-child{border-radius:4px 4px 0 0}
.sf-day .chk{height:18px;display:flex;align-items:flex-end;border-radius:3px;background:var(--surface-2)}
.sf-day .chk>i{display:block;width:100%;background:var(--faint-a55);border-radius:3px}
.sf-day .d{font-family:var(--mono);font-size:10px;color:var(--faint);text-align:center;white-space:nowrap;overflow:hidden}
.sf-day.today .d{color:var(--text);font-weight:600}
.sf-rt{display:flex;gap:6px 18px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--dim)}
.sf-rt b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.sf-rt .sf-err{color:var(--bad);flex-basis:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-test-bar{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.sf-test-bar .faint{font-size:12px}
.sf-verdict-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 14px;font-size:13px;color:var(--dim)}
.sf-verdict-line b{color:var(--text)}
/* 各类得分：一行一类，竖线是当前阈值。关掉的类别也画，只是压暗——
「它其实有 0.91，只是没启用」正是调类别时要看见的东西。 */
.sf-scores{display:flex;flex-direction:column;gap:9px}
.sf-score{display:grid;grid-template-columns:minmax(96px,150px) minmax(0,1fr) 44px;gap:12px;align-items:center;font-size:12.5px}
.sf-score .l{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-score .l small{margin-left:6px;font-size:10.5px;color:var(--faint)}
.sf-score .bar{position:relative;height:8px;border-radius:4px;background:var(--surface-3)}
.sf-score .bar>i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--faint-a60)}
.sf-score .bar>u{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:1px;background:var(--text-a46)}
.sf-score .v{font-family:var(--mono);font-size:12px;text-align:right;color:var(--dim)}
.sf-score.hit .l{color:var(--text);font-weight:600}
.sf-score.hit .bar>i{background:var(--bad)}
.sf-score.hit .v{color:var(--bad);font-weight:600}
.sf-score.over .bar>i{background:var(--warn)}
.sf-score.off{opacity:.62}
/* 事件表：摘录独占弹性列、单行省略；整行可点，点开抽屉 */
.sf-t{table-layout:fixed}
.sf-t tbody tr{cursor:pointer}
.sf-t td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-t .who b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.sf-t .who small{display:block;margin-top:2px;font-size:11.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis}
.sf-t .ex{color:var(--dim)}
.sf-t .sc{margin-left:6px;font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.sf-t tr.sf-fp td{opacity:.62}
.tag.sf-blocked,.tag.sf-confirmed{color:var(--bad);background:var(--bad-a11)}
.tag.sf-observed{color:var(--warn);background:var(--warn-a12)}
.tag.sf-retro{color:var(--brand-2);background:var(--brand-a12)}
.tag.sf-fp{color:var(--ok);background:var(--ok-a12)}
.tag.sf-none{color:var(--faint);background:var(--faint-a12)}
.sf-more{display:flex;justify-content:center;margin-top:14px}
.sf-more[hidden]{display:none}
@media (max-width:860px){
.sf-mode{flex-direction:column}
.sf-grid input{max-width:none}
.sf-trend{gap:3px}
.sf-day .d{font-size:9px}
.sf-t{table-layout:auto;min-width:760px}
.sf-t td.ex{max-width:260px}
}
@media (max-width:720px){.audit-filters #sf-q{flex:1 1 100%}}
/* 抽屉：先认人与事，再读原文，最后下判断 */
.sf-dr-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.sf-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 18px;margin:0 0 22px;font-size:12.5px}
.sf-kv dt{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--dim);white-space:nowrap;padding-top:1px}
.sf-kv dd{margin:0;color:var(--text);min-width:0;overflow-wrap:anywhere}
.sf-kv dd .faint{margin-left:6px}
.sf-dr-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 9px;
font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--dim)}
.sf-dr-h span{font-weight:500;letter-spacing:0;text-transform:none;font-size:11.5px}
.sf-text{margin:0 0 24px;padding:12px 14px;max-height:300px;overflow:auto;border-radius:10px;background:var(--surface-2);border:1px solid var(--line-soft);
font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.sf-dr-review{margin-top:24px;padding-top:18px;border-top:1px solid var(--line-soft)}
.sf-dr-review .field{margin-bottom:0}
.sf-dr-by{font-size:12px;color:var(--dim);margin:0 0 16px}
/* ============================================================
审计走带 / AUDIT TAPE
------------------------------------------------------------
一条审计记录是一个句子——〔谁〕在〔何时〕把〔什么〕从〔A〕改成了〔B〕。
表格把这句话拆进六个格子，再把最要紧的 A 和 B 藏进弹窗里的 JSON，
所以这里不用表格：事件是走带上的一格，带子本身记录时间与密度，
日期在带上打一道横断，机器轮询卷成一段打孔的空带——它们确实发生过，
但它们不是任何人要读的东西。
展开就地发生，不弹窗：翻审计的人有一半是在问「这前后还有什么」，
弹窗恰好切断的就是这个。
============================================================ */
.tape{position:relative;padding:6px 0 4px}
/* 走带本体：一条贯穿的发丝线，事件在它上面打点 */
.tape::before{content:"";position:absolute;left:calc(var(--tape-x) - 1px);top:0;bottom:0;width:1px;
background:linear-gradient(180deg,transparent,var(--line) 22px,var(--line) calc(100% - 22px),transparent)}
.tape{--tape-x:108px}
/* 日期横断：读审计的人按「今天 / 昨天」找，不按行号找 */
.tape-day{position:relative;display:flex;align-items:center;gap:12px;padding:16px 20px 14px calc(var(--tape-x) + 20px);
font-size:11.5px;font-weight:600;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
.tape-day::before{content:"";position:absolute;left:calc(var(--tape-x) - 5px);top:50%;width:9px;height:1px;background:var(--line)}
.tape-day b{font-family:var(--disp);font-size:13px;font-weight:600;letter-spacing:.01em;
text-transform:none;color:var(--dim)}
.tape-day i{flex:1;height:1px;background:var(--line-soft);font-style:normal}
.tape-day span{font-variant-numeric:tabular-nums}
/* 一格 = 一次操作。整格可点（有内容才展开），键盘可达。 */
/* 背景要显式写：全局的 button 复位只清了边框和字体，没清背景，
留着浏览器默认的 buttonface 会在深色台面上糊出一条灰带。 */
.tape-row{position:relative;display:grid;grid-template-columns:var(--tape-x) 1fr auto;
align-items:baseline;column-gap:18px;width:100%;text-align:left;background:transparent;
padding:11px 18px 11px 0;border-radius:0;transition:background .14s ease}
.tape-row:hover{background:var(--brand-a5)}
.tape-row:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:10px}
.tape-row[aria-expanded=true]{background:var(--brand-a5)}
/* 打点：落在带子上，压住线。失败是红点，动钱是品牌色，其余保持安静。 */
.tape-row::after{content:"";position:absolute;left:calc(var(--tape-x) - 4px);top:16px;width:7px;height:7px;border-radius:50%;
background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--faint-a60)}
.tape-row.is-bad::after{background:var(--bad);box-shadow:0 0 0 3px var(--bad-a16)}
.tape-row.is-money::after{background:var(--brand);box-shadow:0 0 0 3px var(--brand-a20)}
.tape-time{font-family:var(--mono);font-size:12px;color:var(--faint);text-align:right;
padding-right:20px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tape-main{min-width:0}
/* 一行摘要就是一句话，读的是行长而不是可用宽度。宽屏上让它在 80 字左右
收住，剩下的留白比一条横穿 1300px 的句子好读。 */
.tape-what{font-size:13.5px;line-height:1.55;color:var(--text);max-width:82ch}
.tape-what .mono{font-size:12.5px}
/* 端点名是「这条记录写在有人给它写说明之前」的退路，不是内容，压到底噪 */
.tape-raw{font-family:var(--mono);font-size:12.5px;color:var(--faint)}
.tape-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px;
font-size:12px;color:var(--dim)}
.tape-meta .sep{color:var(--faint);opacity:.5}
.tape-who{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--dim)}
/* 操作者的来源侧：同名的管理员和用户是两个人 */
.tape-who i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;
width:17px;height:17px;border-radius:5px;font-size:10px;font-weight:700;letter-spacing:0;
background:var(--ok-a12);color:var(--ok)}
.tape-who.user i{background:var(--brand-a15);color:var(--brand-2)}
.tape-who.sys i{background:var(--faint-a14);color:var(--faint)}
.tape-target{color:var(--dim)}
.tape-target b{color:var(--text);font-weight:600}
.tape-ip{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
/* 成功不着色：一屏 112 个绿色「成功」什么也没说，只有被拒绝的才是消息 */
.tape-fail{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
padding:2px 8px;border-radius:999px;color:var(--bad);background:var(--bad-a11)}
.tape-aside{display:flex;align-items:center;gap:10px;align-self:center;white-space:nowrap}
/* ±N = 这次动了几个字段。是读数，不是装饰：点开之前就知道这是拨了一个开关，
还是把整张表重写了一遍。新建记 +N、删除记 −N——那不是「改了 N 处」。 */
.tape-delta{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--brand-2);
background:var(--brand-dim);border:1px solid var(--brand-a30);border-radius:999px;padding:2px 8px}
.tape-delta.add{color:var(--ok);background:var(--ok-a12);border-color:var(--ok-a40)}
.tape-delta.del{color:var(--bad);background:var(--bad-a11);border-color:var(--bad-a40)}
.tape-caret{width:15px;height:15px;color:var(--faint);opacity:.45;flex:none;transition:transform .18s ease,opacity .14s ease}
.tape-row:hover .tape-caret,.tape-row:focus-visible .tape-caret{opacity:1;color:var(--brand-2)}
.tape-row[aria-expanded=true] .tape-caret{transform:rotate(180deg);opacity:1;color:var(--brand-2)}
/* 卷带：连续的机器轮询。它们发生过，所以不能删；没人读，所以不该占位置。
打孔的底纹是字面意思——这一段带子上什么也没记。 */
.tape-spool{position:relative;display:grid;grid-template-columns:var(--tape-x) 1fr auto;
align-items:center;column-gap:18px;width:100%;text-align:left;padding:9px 18px 9px 0;
background:transparent;color:var(--faint);transition:color .14s ease}
.tape-spool:hover{color:var(--dim)}
.tape-spool::after{content:"";position:absolute;left:calc(var(--tape-x) - 3px);top:0;bottom:0;width:5px;
background:repeating-linear-gradient(180deg,var(--faint-a38) 0 3px,transparent 3px 8px)}
.tape-spool .tape-time{color:var(--faint);opacity:.7}
.tape-spool-what{font-size:12.5px}
.tape-spool-what b{font-family:var(--mono);font-weight:600;color:var(--dim)}
.tape-spool-act{font-size:12px;font-weight:600;color:var(--brand-2);opacity:.75}
.tape-spool:hover .tape-spool-act{opacity:1}
/* ---- 变更对照 ----------------------------------------------------------
「改了用量策略」不是审计，「每日请求上限 2,000 → 6,000」才是。
只列动过的字段：没动的那些是背景，翻审计的人不是来读背景的。 */
/* 展开的部分挂在带子右侧，带子本身继续往下走——一条走到一半断掉的带子
读起来像是坏了，而这里什么也没坏。 */
.tape-open{position:relative;padding:2px 18px 20px calc(var(--tape-x) + 18px);
animation:tapeOpen .22s ease both}
.tape-open::before{content:"";position:absolute;left:calc(var(--tape-x) - 1px);top:0;bottom:0;
width:1px;background:var(--line)}
@keyframes tapeOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* 对照表是拿来读的，不是拿来铺满屏幕的：宽到 1300px 之后，「之前」和「之后」
两栏之间会空出半个屏幕，眼睛得横着走完才对得上。 */
.reg{border:1px solid var(--line);border-radius:12px;background:var(--surface-2);overflow:hidden;max-width:940px}
.reg-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 15px;
background:var(--surface-3-a45);border-bottom:1px solid var(--line-soft);
font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--dim)}
.reg-head em{font-style:normal;font-family:var(--mono);letter-spacing:0;text-transform:none;
color:var(--dim);font-size:11.5px}
.reg-body{padding:4px 0}
/* 三栏：字段名 / 之前 / 之后。之后一栏加重，因为那是现在生效的值。 */
.reg-row{display:grid;grid-template-columns:minmax(130px,var(--reg-label,232px)) 1fr 22px 1fr;
align-items:baseline;column-gap:12px;padding:8px 15px}
.reg-row+.reg-row{border-top:1px solid var(--line-soft)}
/* 新建与删除只有一侧，没有对照可摆 */
.reg-row.one{grid-template-columns:minmax(130px,232px) 1fr}
.reg-k{font-size:12.5px;color:var(--dim);line-height:1.5}
/* 中文标签是我们的翻译，原始字段名是收据——审计的价值全在「可以复核」，
所以键名留着，但跟在标签后面，而不是把每一行都撑成两行。 */
.reg-k small{font-family:var(--mono);font-size:10.5px;color:var(--faint);
letter-spacing:.01em;margin-left:7px;word-break:normal;overflow-wrap:anywhere}
.reg-v{font-family:var(--mono);font-size:12.5px;line-height:1.6;word-break:break-word;color:var(--text)}
.reg-v.was{color:var(--faint)}
.reg-arrow{align-self:center;width:22px;height:1px;background:var(--line);position:relative}
.reg-arrow::after{content:"";position:absolute;right:0;top:-2.5px;border-left:5px solid var(--faint-a60);
border-top:3px solid transparent;border-bottom:3px solid transparent}
.reg-none{color:var(--faint);font-style:italic;font-family:var(--sans);font-size:12px}
/* 集合型的值（模型白名单、IP 段、故障切换链）按「进出」读，不按整串读 */
.reg-set{display:flex;flex-wrap:wrap;gap:5px}
.reg-tag{font-family:var(--mono);font-size:11.5px;padding:2px 8px;border-radius:6px;
background:var(--surface-3);border:1px solid var(--line);color:var(--dim);white-space:nowrap}
.reg-tag.add{color:var(--ok);background:var(--ok-a12);border-color:var(--ok-a40)}
.reg-tag.del{color:var(--bad);background:var(--bad-a11);border-color:var(--bad-a40);text-decoration:line-through}
.reg-num{font-variant-numeric:tabular-nums}
/* 涨跌只标方向，不做判断：调高上限和调低上限都可能是对的 */
.reg-trend{font-family:var(--sans);font-size:11px;font-weight:600;margin-left:7px;color:var(--faint)}
.reg-more{display:block;width:100%;text-align:left;padding:9px 15px;border-top:1px solid var(--line-soft);
background:transparent;font-size:12px;color:var(--faint);transition:color .14s ease}
.reg-more:hover{color:var(--brand-2)}
.reg-foot{display:flex;gap:8px 18px;flex-wrap:wrap;padding:11px 15px 0;font-size:11.5px;color:var(--faint)}
.reg-foot span{display:inline-flex;gap:6px}
.reg-foot b{font-family:var(--mono);font-weight:500;color:var(--dim);word-break:break-all}
.reg-plain{padding:13px 15px;font-size:12.5px;color:var(--dim);line-height:1.65}
/* 资金流水：一列钱必须右对齐、小数点对齐、位数固定，否则「+3000」和「−8.42」
在同一列里读起来一样长。全局没有 .num 这条规则（它只在别的表里各定义了一份），
所以这张表一直是左对齐的——一本左对齐的账没法用眼睛加总。 */
.led-t th.num,.led-t td.num{text-align:right}
.led-t td.num{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;
white-space:nowrap;color:var(--text)}
.led-t td.num.in{color:var(--ok)}
.led-t td.num.out{color:var(--dim)}
.led-t td .tape-who{font-size:12.5px}
@media (max-width:860px){
.tape{--tape-x:74px}
.tape-time{padding-right:14px;font-size:11.5px}
/* 窄屏把三栏叠成三行。顺序必须还是「之前 → 之后」：把新值排在旧值上面，
再给旧值挂一个向下的箭头，读出来就是反的。 */
.reg-row,.reg-row.one{grid-template-columns:1fr;row-gap:2px}
.reg-arrow{width:auto;height:auto;background:none;line-height:1}
.reg-arrow::after{content:"↓";position:static;border:0;color:var(--faint);font-size:12px}
.tape-open{padding-left:14px;padding-right:14px}
.tape-open::before{display:none}
}
/* 变更前 / 变更后的 JSON。横向自己滚，不把抽屉撑开 */
.field pre{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:10px;
padding:11px 13px;margin:0;overflow-x:auto;font-size:12px;line-height:1.55;white-space:pre}
/* 调用流水：日志页与用户 / 密钥抽屉共用的同一张表 */
.feed-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:13px}
/* 搜索框：灰底胶囊（macOS 的搜索栏），聚焦时变回白底、套上蓝色焦点环 */
.feed-find{display:flex;align-items:center;gap:7px;background:var(--fill-4);border:1px solid transparent;
border-radius:var(--r-pill);padding:0 13px;color:var(--dim);flex:1;min-width:180px;max-width:340px;
transition:background-color .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease)}
.feed-find:hover{background:var(--fill-3)}
.feed-find:focus-within{background:var(--input-bg);border-color:var(--focus);box-shadow:var(--focus-ring)}
.feed-find input{background:transparent;border:none;padding:8px 0;font-size:13px;flex:1;color:var(--text)}
.feed-find input:focus{outline:none;box-shadow:none}
.feed-count{font-size:12px;color:var(--faint);margin-left:auto}
table.feed td{vertical-align:middle;white-space:nowrap}
/* ---------- 日志页的配线盘：两排旋钮 + 一排条件牌 ----------
上排是每次都会动的粗调（时间窗 / 结果 / 搜索），下排是按需拧的细调
（模型 / 供应商 / 归属 / 协议 / 慢调用）。拧过的每一项都会在最下面留一张
可摘的条件牌——面板上插着什么线，一眼看得见，摘一张就松一条。 */
.lg-filters{display:flex;flex-direction:column;gap:9px;margin-bottom:13px}
.lg-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.winsel button i{font-style:normal;margin-left:6px;font-size:11px;font-variant-numeric:tabular-nums;
color:var(--faint);transition:color .16s ease}
.winsel button.on i{color:inherit;opacity:.62}
.winsel button:not(.on):hover i{color:var(--dim)}
/* 限流是「失败」里的一格，不是它的邻居：一道细线把这层关系说出来，省得
有人把 失败 135 和 限流 40 读成 175 次出错。 */
#lg-outcome button.sub{margin-left:9px}
#lg-outcome button.sub::before{content:'';position:absolute;left:-5px;top:6px;bottom:6px;
width:1px;background:var(--line)}
.lg-find{max-width:340px}
.lg-x{display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex:none;border-radius:50%;
background:var(--faint);color:var(--surface);font-size:13px;font-weight:600;line-height:1;padding:0 0 1px;opacity:.75}
.lg-x:hover{opacity:1}
/* 细调旋钮：左边是刻度名，右边是当前档位 */
/* 筛选钮：灰底胶囊（macOS 工具栏里的弹出按钮）。选中了某一档就整颗反成墨色——
「这张表现在被什么筛着」要一眼能数出来。 */
.lg-sel{position:relative;display:inline-flex;align-items:center;height:32px;padding-left:12px;
background:var(--fill-4);border:1px solid transparent;border-radius:var(--r-pill);
transition:background-color .16s var(--ease),color .16s var(--ease)}
.lg-sel:hover{background:var(--fill-3)}
.lg-sel>span{font-size:12px;font-weight:500;color:var(--dim);white-space:nowrap;letter-spacing:0}
.lg-sel select{appearance:none;-webkit-appearance:none;border:none;background:transparent;box-shadow:none;
height:32px;width:auto;max-width:186px;padding:0 25px 0 7px;font-size:12.5px;font-weight:600;
color:var(--text);text-overflow:ellipsis;cursor:pointer}
.lg-sel select:focus{outline:none;box-shadow:none;border:none}
.lg-sel:focus-within{box-shadow:var(--focus-ring)}
.lg-sel::after{content:'';position:absolute;right:12px;top:50%;width:5.5px;height:5.5px;margin-top:-4.5px;
border-right:1.6px solid var(--dim);border-bottom:1.6px solid var(--dim);transform:rotate(45deg);pointer-events:none}
.lg-sel.on{background:var(--brand);color:var(--btn-ink)}
.lg-sel.on>span{color:var(--btn-ink);opacity:.66}
.lg-sel.on select{color:var(--btn-ink)}
.lg-sel.on::after{border-color:var(--btn-ink)}
/* 可搜索下拉：原生