/* bigscreen.css — 监控大屏「指挥中心」视图(DESIGN.md §9b 第三作用域)。
 * 视觉基调(2026-07-11 用户二次定调:「透气」):无外层容器 —— 卡片直接坐在 admin 页面底色上;
 * 实心白卡 + 大圆角 + 发丝边 + 柔投影 + 16px 大留白(毛玻璃/网格底/HUD 括角/屏内横幅均已退役)。
 * 层级:全屏唯一一块橙 = hero「今日成本」;风险读红;其余全白 —— 彩色即重点。
 * 架构红线(§9):token 全部 --bs-* 前缀、**作用域限定在 .bs 容器**,绝不污染 admin :root,
 * 也不与 tokens.css / landing 内联块合并。CSP:零内联 style;几何走 SVG 属性 / <progress> value-max;颜色走 class。
 * 动效预算(§9b 申报):live 点 opacity 呼吸 / count-up 一次性;均 reduced-motion gate。 */

.bs {
  /* 2026-07-12 定调:墨蓝 × 鲜橙(用户选参考稿 12)—— 橙不变位,中性色全面转冷:
   * 墨蓝当墨水(字/结构),冷灰白当空气;暖棕灰/米黄全数退役(「灰旧」病根)。 */
  --bs-bg: #FFFFFF; --bs-well: #EDF0F4; --bs-surface: #FFFFFF; --bs-surface2: #F4F5F7;
  --bs-border: rgba(23,32,48,0.07); --bs-border-strong: rgba(23,32,48,0.13); --bs-bevel: rgba(255,255,255,0.85);
  --bs-text: #1B2430; --bs-text2: #4D5A6B; --bs-muted: #6E7987; --bs-kicker: #C2410C;
  --bs-accent: #C2410C;                  /* 深橙(on 白 4.9:1,唯一可作文字的橙);鲜橙只作非文字 */
  --bs-accent-vivid: #F97316;            /* 鲜橙:hero 渐变/underline/图形,绝不作小字 */
  --bs-glow: rgba(249,115,22,0.16);
  --bs-neutral: #8593A5;                 /* DLP/quota 值轨中性冷板岩(非语义色) */
  --bs-ok: #2F7D5B; --bs-warn: #B45309; --bs-danger: #C0271C;  /* 语义固定(配字形) */
  --bs-radius: 18px;

  /* 质感五稿(Dropify 色调分层法):白画布大容器 + 灰卡片,无边框/无投影/无玻璃/无氛围光,
   * 纯靠「白 → 灰 → 白」三层色调差分层;上一版的日出 wash / 光斑 / backdrop-blur 全数退役。 */
  background: var(--bs-surface);
  border-radius: 24px;
  padding: 20px;
  color: var(--bs-text);
  display: flex; flex-direction: column; gap: 16px;
  font-variant-numeric: tabular-nums;
}
.bs:fullscreen { width: 100vw; height: 100vh; padding: 24px 32px; overflow: auto; border-radius: 0;
  background: var(--bs-surface); }

/* ---- 状态行(屏内不再有标题 —— 页头已署名) ---- */
.bs-topbar { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 13px; color: var(--bs-text2); }
.bs-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.bs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  background: var(--bs-surface2); }
.bs-live { width: 8px; height: 8px; border-radius: 50%; background: var(--bs-accent-vivid); animation: bs-pulse 2.6s ease-in-out infinite; }
@keyframes bs-pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.bs-fresh { color: var(--bs-muted); letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }

/* ---- 焦点行:hero(橙,全屏唯一彩色大块)+ DLP 仪表 + 告警双瓦 ---- */
.bs-focus { display: grid; grid-template-columns: 1.1fr 1.55fr 0.85fr; gap: 16px; align-items: stretch; }
/* hero:日出式渐变(上浓下浅,参考稿 14)+ 玻璃小丸副值(参考稿 15 的霜面 chip on 橙) */
.bs-hero { background: linear-gradient(180deg, #F75E0C 0%, #F97D2B 60%, #FFA95C 100%); color: #FFFFFF; border-radius: var(--bs-radius);
  padding: 20px 22px 16px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }  /* 平压,无投影(Dropify 的彩色瓦也是 flat) */
.bs-hero-label { font-size: 14px; color: rgba(255,255,255,0.9); }
.bs-hero-value { font-family: var(--font-mono); font-size: 46px; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; }
.bs-hero-subs { display: flex; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.92); }
.bs-hero-sub { display: inline-flex; align-items: center; gap: 4px; padding: 3px 11px; border-radius: 999px;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bs-hero-sub b { font-family: var(--font-mono); font-weight: 600; color: #FFFFFF; }
.bs-hero-spark { margin-top: auto; height: 44px; }
.bs-hero-spark .bs-spark { height: 100%; }
.bs-hero-spark .bs-spark-line { stroke: #FFFFFF; }
.bs-hero-spark .bs-spark-area { fill: #FFFFFF; opacity: .18; }
.bs-hero-spark .bs-spark-dot { fill: #FFFFFF; }

.bs-alerts { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; min-width: 0; }
.bs-alert-tile { background: var(--bs-surface2); border-radius: var(--bs-radius);
  padding: 12px 16px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.bs-alert-ico { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto;
  color: var(--bs-accent); background: rgba(249,115,22,0.13); }  /* 2026-07-12 用户裁定:告警瓦走橙不走红 */
.bs-alert-label { font-size: 13px; color: var(--bs-text2); }
.bs-alert-val { font-family: var(--font-mono); font-size: 30px; font-weight: 700; line-height: 1; margin-left: auto; color: var(--bs-text); }
.bs-alert-val.danger { color: var(--bs-accent); }

/* ---- main / lower grid(16px 大留白) ---- */
.bs-main { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.bs-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bs-col > .bs-panel:last-child { flex: 1 1 auto; }
.bs-lower { display: grid; grid-template-columns: 1.15fr 1.45fr 1fr; gap: 16px; }

/* ---- panel(Dropify 灰卡:纯色调差,无边框无投影) ---- */
.bs-panel { background: var(--bs-surface2); border-radius: var(--bs-radius);
  padding: 16px 18px; display: flex; flex-direction: column; min-width: 0; }
.bs-panel-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bs-panel-body { flex: 1 1 auto; min-width: 0; }
.bs-chart-host { width: 100%; }
/* 指标分段器(请求/Token):白药丸容器 + 活动项橙底白字(深橙 AA),覆盖 admin .btn 通用皮,仅大屏作用域 */
.bs-seg { display: inline-flex; gap: 2px; background: var(--bs-surface); border-radius: 999px; padding: 3px; }
.bs-seg .btn { border: 0; box-shadow: none; border-radius: 999px; padding: 4px 14px;
  font-size: 12.5px; font-weight: 600; line-height: 1.4;
  background: linear-gradient(135deg, #FB8A3C, #EA580C); color: #FFFFFF; }  /* hero 同族橙渐变(用户点单) */
.bs-seg .btn:hover { filter: brightness(1.05); }
.bs-seg .btn.btn-secondary { background: transparent; color: var(--bs-text2); filter: none; }
.bs-seg .btn.btn-secondary:hover { background: rgba(249,115,22,0.10); color: var(--bs-text); }
.bs-panel-title { font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-right: auto; }
.bs-panel-ico { display: inline-flex; color: var(--bs-text2); }  /* 面板图标转灰:橙配给收回(2026-07-12) */
.bs-panel-meta { font-family: var(--font-mono); font-size: 11px; color: var(--bs-muted); letter-spacing: .04em; text-transform: uppercase; }
.bs-degraded { color: var(--bs-muted); font-size: 13px; padding: 18px 4px; text-align: center; }
.bs-degraded.warn { color: var(--bs-warn); }

/* ---- SVG chart colors (geometry comes from JS attrs) ---- */
.bs-spark { width: 100%; height: 32px; display: block; }
.bs-spark-line { fill: none; stroke: var(--bs-accent); stroke-width: 1.8; }
.bs-spark-area { fill: var(--bs-accent); opacity: .12; stroke: none; }
.bs-spark-dot { fill: var(--bs-accent); }
.bs-spark.warn .bs-spark-line, .bs-spark.warn .bs-spark-dot { stroke: var(--bs-warn); fill: var(--bs-warn); }
.bs-spark.warn .bs-spark-area { fill: var(--bs-warn); }
.bs-spark.danger .bs-spark-line, .bs-spark.danger .bs-spark-dot { stroke: var(--bs-danger); fill: var(--bs-danger); }
.bs-spark.danger .bs-spark-area { fill: var(--bs-danger); }

.bs-area { width: 100%; height: 300px; display: block; }
.bs-area-line { fill: none; stroke: var(--bs-accent-vivid); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bs-area-fill { fill: var(--bs-accent-vivid); opacity: .10; stroke: none; }  /* v1 默认填充 */
/* ⚠ 变体类独立于 .bs-area-fill:CSS fill 会压过 SVG 属性,pattern/gradient 版不能吃到上面的 fill */
.bs-area-fill-grad { opacity: 1; }
.bs-area-fill-tex { opacity: .22; }  /* 竖发丝纹理版(fill=pattern 属性);.38→.22 收橙量,曲线仍是主角 */
.bs-area-hl { fill: var(--bs-accent-vivid); }  /* 竖发丝(pattern 内容) */
.bs-area-fit { height: auto; }  /* viewW 等比版:高度随纵横比走 */
/* 悬浮读数(取代分段基线):虚线十字 + 高亮点 + 墨底小签 */
.bs-area-hov { visibility: hidden; pointer-events: none; }
.bs-area-hov.on { visibility: visible; }
.bs-area-cross { stroke: rgba(23,32,48,0.18); stroke-width: 1; stroke-dasharray: 3 4; }
.bs-area-hdot { fill: var(--bs-accent-vivid); stroke: #FFFFFF; stroke-width: 2; }
.bs-area-tipbox { fill: #FFFFFF; stroke: rgba(23,32,48,0.08); filter: drop-shadow(0 4px 12px rgba(23,32,48,0.16)); }
.bs-area-tipdate { fill: var(--bs-muted); font-family: var(--font-mono); font-size: 11px; }
.bs-area-tipval { fill: var(--bs-text); font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
/* 入场动效:竖发丝自基线升起(scaleY)→ 曲线 dashoffset 生长 → 端点浮现;JS 只在首绘/切换加 on */
.bs-area-rise { transform: scaleY(0); transform-box: fill-box; transform-origin: center bottom; }
.bs-area-rise.on { transform: scaleY(1); transition: transform 1600ms cubic-bezier(.22,.61,.36,1); }
.bs-area-draw { transition: stroke-dashoffset 2400ms cubic-bezier(.4,0,.2,1) 350ms; }
.bs-area-dot-in { opacity: 0; }
.bs-area-dot-in.on { opacity: 1; transition: opacity 400ms ease 2600ms; }
.bs-area-gs-a { stop-color: rgba(249,115,22,0.26); }  /* gradient 面积:顶浓 → 底透(渐隐) */
.bs-area-gs-b { stop-color: rgba(249,115,22,0); }
.bs-area-dot { fill: var(--bs-accent-vivid); stroke: #FFFFFF; stroke-width: 2.5; }
.bs-grid { stroke: rgba(23,32,48,0.05); stroke-width: 1; }
.bs-wk { fill: rgba(23,32,48,0.025); }
.bs-ax { fill: var(--bs-muted); font-family: var(--font-mono); font-size: 11px; }

/* ---- gauges(dialGauge 半圆表盘,2026-07-12 精修;bs-g-* 整圆类保留给 dashboards) ---- */
.bs-gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bs-gauge-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bs-gauge { width: 108px; height: 108px; }
.bs-g-track { stroke: var(--bs-well); }
.bs-g-val { transition: stroke-dashoffset 700ms ease; stroke-linecap: butt; }
.bs-g-val.normal { stroke: var(--bs-neutral); } .bs-g-val.near { stroke: var(--bs-warn); } .bs-g-val.over { stroke: var(--bs-danger); }
.bs-g-pct { font-family: var(--font-mono); font-weight: 700; font-size: 22px; fill: var(--bs-text); }
.bs-g-pct.near { fill: var(--bs-warn); } .bs-g-pct.over { fill: var(--bs-danger); }
.bs-gauge-label { font-size: 13px; color: var(--bs-text); text-align: center; }
.bs-gauge-sub { font-family: var(--font-mono); font-size: 11px; color: var(--bs-muted); }

/* 软表盘(二稿):层叠出软,不靠描边 —— tint 同心圆 + 白内盘 + 浅轨 + 模糊辉光弧 + 渐变行程
 * + 白圈投影游标 + 大数字进盘心。一稿 240° 扁光带 =「赛车码表」,已废。 */
.bs-dial { width: 124px; height: 118px; display: block; }
.bs-d-tint { opacity: .09; }
.bs-d-tint.normal { fill: #FBAB6B; } .bs-d-tint.near { fill: var(--bs-warn); } .bs-d-tint.over { fill: var(--bs-danger); }
.bs-d-disc { fill: #FFFFFF; opacity: .92; }
.bs-d-track { stroke: #FFFFFF; stroke-linecap: round; }  /* 灰卡上白轨(三层法) */
.bs-d-glowarc { stroke-linecap: round; filter: blur(5px); opacity: .35; }
.bs-d-glowarc.normal { stroke: #FBAB6B; } .bs-d-glowarc.near { stroke: #E5940E; } .bs-d-glowarc.over { stroke: #E25A3C; }
.bs-d-val { stroke-linecap: round; transition: stroke-dashoffset 900ms cubic-bezier(.22,.61,.36,1); }
.bs-d-gs-a.normal { stop-color: #FDE4CE; } .bs-d-gs-b.normal { stop-color: #FBAB6B; }
.bs-d-gs-a.near { stop-color: #F6C877; } .bs-d-gs-b.near { stop-color: #D97A06; }
.bs-d-gs-a.over { stop-color: #F59A82; } .bs-d-gs-b.over { stop-color: #C0271C; }
.bs-d-knob { fill: #FFFFFF; filter: drop-shadow(0 1px 3px rgba(23,32,48,0.28)); }
.bs-d-dot.normal { fill: #FBAB6B; } .bs-d-dot.near { fill: var(--bs-warn); } .bs-d-dot.over { fill: var(--bs-danger); }
.bs-d-num { font-family: var(--font-mono); font-weight: 700; font-size: 18px; fill: var(--bs-text); }
.bs-d-num.near { fill: var(--bs-warn); } .bs-d-num.over { fill: var(--bs-danger); }

/* ---- heatmap ---- */
.bs-heat { width: 100%; max-height: 240px; display: block; }
.bs-cell { stroke: var(--bs-border); stroke-width: .5; }
/* 节律 ramp = 标准橙单色阶(ColorBrewer Oranges 式:变亮度不变纯度,每档干净透亮,绝不入泥) */
.bs-cell[data-level="0"] { fill: #FFFFFF; } .bs-cell[data-level="1"] { fill: #FDE4CE; }
.bs-cell[data-level="2"] { fill: #FCC393; } .bs-cell[data-level="3"] { fill: #FB8D3C; } .bs-cell[data-level="4"] { fill: #E8580C; }
.bs-heat-wkband { fill: rgba(28,26,23,0.05); }
.bs-heat-legend { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--bs-muted); font-family: var(--font-mono); margin-top: 6px; }
.bs-heat-scale { display: inline-flex; }
.bs-heat-scale i { width: 20px; height: 10px; display: inline-block; }
.bs-heat-scale i.l0 { background: #FFFFFF; } .bs-heat-scale i.l1 { background: #FDE4CE; }
.bs-heat-scale i.l2 { background: #FCC393; } .bs-heat-scale i.l3 { background: #FB8D3C; } .bs-heat-scale i.l4 { background: #E8580C; }

/* ---- bars (native <progress>, the sanctioned CSP-clean geometry) ---- */
.bs-rows { display: flex; flex-direction: column; gap: 8px; }
.bs-row { display: grid; grid-template-columns: 104px 1fr 64px; align-items: center; gap: 10px; }
.bs-row.rank { grid-template-columns: 20px 92px 1fr 86px; }
.bs-rank { font-family: var(--font-mono); color: var(--bs-muted); font-size: 13px; text-align: center; }
.bs-row-name { font-size: 14px; color: var(--bs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-row-val { font-family: var(--font-mono); font-size: 13px; text-align: right; color: var(--bs-text2); }
/* F6 可跳转排行行(部门榜 / 服务级榜 → 用量报表 handoff):指针 + hover/focus 提亮。仅聚合维度可跳,
 * 绝不员工级(B1)。只 recolor/加交互态,不改 .bs-row 既有骨架(§0.10)。 */
.bs-row-link { cursor: pointer; border-radius: 8px; transition: background 120ms ease; }
.bs-row-link:hover { background: rgba(249,115,22,0.10); }
.bs-row-link:focus-visible { outline: 2px solid var(--bs-accent); outline-offset: -2px; }
progress.bs-bar { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; border: 0; border-radius: 7px; background: var(--bs-surface); overflow: hidden; }  /* 灰卡上白轨(三层法) */
progress.bs-bar::-webkit-progress-bar { background: var(--bs-surface); }
/* 排名条默认 = 橙阶浅档(干净 tint,不入泥);榜首 .accent = 橙阶深档 —— 同色相,亮度分级 */
progress.bs-bar::-webkit-progress-value { background: linear-gradient(90deg, #FDE4CE, #FBAB6B); transition: width 500ms ease; }
progress.bs-bar::-moz-progress-bar { background: linear-gradient(90deg, #FDE4CE, #FBAB6B); }
progress.bs-bar.ok::-webkit-progress-value { background: var(--bs-ok); } progress.bs-bar.ok::-moz-progress-bar { background: var(--bs-ok); }
progress.bs-bar.warn::-webkit-progress-value { background: var(--bs-warn); } progress.bs-bar.warn::-moz-progress-bar { background: var(--bs-warn); }
progress.bs-bar.danger::-webkit-progress-value { background: var(--bs-danger); } progress.bs-bar.danger::-moz-progress-bar { background: var(--bs-danger); }
progress.bs-bar.accent::-webkit-progress-value { background: linear-gradient(90deg, #FFB77A, #F4650F); } progress.bs-bar.accent::-moz-progress-bar { background: linear-gradient(90deg, #FFB77A, #F4650F); }

/* ---- severity 100% stacked bar(有序占比一根条;色 + 图例文字双编码) ---- */
.bs-sevbar { border-radius: 9px; overflow: hidden; background: var(--bs-surface); }
.bs-sevbar .bs-stack { display: block; width: 100%; height: 18px; }
/* 严重度 = 暖色递进坡道(升温读法):淡灰(无命中)→ 板岩(未扫)→ 浅橙(低)→ 正橙(中)→ 红(高)
 * 旧五色大杂烩(灰/米/绿/棕/红)废;绿退场 —— 「低危」不是「好」,不该用 ok 色 */
.bs-stack .sv-unscanned { fill: #E4DCD3; }  /* 未知态:浅暖灰(轻、净,不入泥) */
.bs-stack .sv-none { fill: #F4F0EA; }
.bs-stack .sv-low { fill: #FDBA74; }
.bs-stack .sv-medium { fill: #F4650F; }
.bs-stack .sv-high { fill: #C0271C; }
.bs-sevleg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--bs-text2); }
.bs-sevleg-item { display: inline-flex; align-items: center; gap: 5px; }
.bs-sevleg-item b { font-family: var(--font-mono); font-weight: 600; color: var(--bs-text); }
.bs-sevleg-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.bs-sevleg-dot.sv-unscanned { background: #E4DCD3; }
.bs-sevleg-dot.sv-none { background: #F4F0EA; border: 1px solid rgba(23,32,48,0.10); }  /* 太浅补一圈发丝,图例可辨 */
.bs-sevleg-dot.sv-low { background: #FDBA74; }
.bs-sevleg-dot.sv-medium { background: #F4650F; }
.bs-sevleg-dot.sv-high { background: #C0271C; }

/* ---- pool ---- */
.bs-pool { display: flex; flex-direction: column; gap: 8px; }
.bs-pool-row { display: grid; grid-template-columns: 24px 1fr auto auto; align-items: center; gap: 10px; font-size: 14px;
  padding: 9px 12px; background: var(--bs-surface); border-radius: 12px; }
/* 品牌撞色(identity:颜色跟实体走,仅此卡;蓝绿不外溢到量级图表)。tint 底 + 实色首字母圆徽 */
.bs-pool-row.brand-anthropic { background: rgba(217,119,87,0.10); }
.bs-pool-row.brand-openai { background: rgba(16,163,127,0.10); }
.bs-pool-row.brand-deepseek { background: rgba(77,107,254,0.10); }
.bs-pool-chip { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  color: #FFFFFF; font-family: var(--font-mono); font-size: 11px; font-weight: 700; background: #8593A5; }
.brand-anthropic .bs-pool-chip { background: #D97757; }
.brand-openai .bs-pool-chip { background: #10A37F; }
.brand-deepseek .bs-pool-chip { background: #4D6BFE; }
/* F9-C 池健康行 → Key 源管理(纯路由跳,不带 handoff)。指针 + hover/focus 提亮。 */
.bs-pool-link { cursor: pointer; transition: filter 120ms ease; }
.bs-pool-link:hover { filter: brightness(0.97); }
.bs-pool-link:focus-visible { outline: 2px solid var(--bs-accent); outline-offset: -2px; }
.bs-dot { width: 10px; height: 10px; border-radius: 50%; }
.bs-dot.healthy { background: var(--bs-ok); } .bs-dot.partial { background: var(--bs-warn); } .bs-dot.offline { background: var(--bs-danger); }
.bs-pool-name { color: var(--bs-text); font-weight: 600; }
.bs-pool-keys { font-family: var(--font-mono); font-size: 13px; color: var(--bs-text2); }
/* 健康态 = 色 + 词双编码(HEALTHY 玉绿 / PARTIAL 琥珀 / OFFLINE 红) */
.bs-pool-state { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--bs-muted); }
.bs-pool-state.healthy { color: var(--bs-ok); }
.bs-pool-state.partial { color: var(--bs-warn); }
.bs-pool-state.offline { color: var(--bs-danger); }

/* ---- ticker(灰卡) ---- */
.bs-ticker { height: 42px; background: var(--bs-surface2); border-radius: var(--bs-radius);
  overflow: hidden; display: flex; align-items: center; }
.bs-ticker-tag { flex: 0 0 auto; height: 100%; display: flex; align-items: center; gap: 7px; padding: 0 14px;
  background: rgba(249,115,22,0.12); border-right: 1px solid rgba(249,115,22,0.30); color: var(--bs-accent);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.bs-ticker-view { flex: 1 1 auto; overflow: hidden; position: relative; height: 100%; }
.bs-ticker-track { position: absolute; white-space: nowrap; display: inline-flex; align-items: center; height: 100%; will-change: transform; animation: bs-marquee 40s linear infinite; }
.bs-ticker-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 30px; font-size: 15px; color: var(--bs-text2); }
.bs-ticker-item b { color: var(--bs-text); font-weight: 600; }
.bs-ti-dot { width: 7px; height: 7px; border-radius: 50%; }
.bs-ti-warn .bs-ti-dot { background: var(--bs-warn); } .bs-ti-danger .bs-ti-dot { background: var(--bs-danger); } .bs-ti-info .bs-ti-dot { background: var(--bs-accent); }
@keyframes bs-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
/* 恒速分档(≈70px/s,由 JS 按轨宽挑选;CSP 无内联 style) */
.bs-tk-15 { animation-duration: 15s; } .bs-tk-25 { animation-duration: 25s; }
.bs-tk-40 { animation-duration: 40s; } .bs-tk-60 { animation-duration: 60s; } .bs-tk-90 { animation-duration: 90s; }

/* fullscreen affordance button styling reuses .btn from app.css */

@media (prefers-reduced-motion: reduce) {
  .bs-live, .bs-ticker-track { animation: none !important; }
  .bs-g-val, .bs-d-val, progress.bs-bar::-webkit-progress-value { transition: none !important; }
}

/* ---- pool footer (延迟两数;旧 system-health 区已裁,仅存此脚注) ---- */
.bs-pool-stats { margin-top: 8px; border-top: 1px solid var(--bs-border); padding-top: 4px; }
.bs-pool-stats:empty { display: none; }
.bs-kv { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; padding: 3px 0; gap: 10px; }
.bs-kv + .bs-kv { border-top: 1px solid var(--bs-border); }
.bs-kv-label { color: var(--bs-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-kv-val { font-family: var(--font-mono); color: var(--bs-text); }
.bs-kv-val.ok { color: var(--bs-ok); } .bs-kv-val.warn { color: var(--bs-warn); } .bs-kv-val.danger { color: var(--bs-danger); }