/* =============================================================================
* theme.css —— OTA Hub 视觉基建「设计 token + 基础元件」
* -----------------------------------------------------------------------------
* 【铁律】组件（.js 里的 template / 其它 css）只允许使用 var(--x) 变量，
* 严禁写死任何颜色、圆角、阴影、字号、间距。这样双主题切换才能整体生效。
* 唯一例外：本文件内部在 :root / [data-theme] 里定义 token 的原始值。
*
* 主题策略：默认深色（科技感蓝→青），浅色为独立设计（干净通透），不是深色反相。
* 切换方式：
* ========================================================================== */
/* ── 深色主题（默认） ─────────────────────────────────────────────────────
* 选择器刻意写成「裸属性选择器」而不是 `:root[data-theme=...]`：
* 这样任意嵌套元素（如 #/styleguide 里的主题对比面板）也能通过
* 自带 data-theme 属性重启一套 token，供子树继承。 */
:root,
[data-theme="dark"] {
color-scheme: dark;
/* 背景层次：底 → 稍亮 → 抬起（卡片/弹窗） */
--bg: #0b1020; /* 页面底色，近黑带蓝调 */
--bg-soft: #0f1729; /* 侧栏 / 次级面板 */
--bg-elev: #141d33; /* 卡片、弹窗、输入框 */
--bg-elev-2: #1a2542; /* 卡片内嵌块、表头 */
--bg-hover: rgba(96, 165, 250, .10);
--bg-active: rgba(56, 189, 248, .16);
/* 文字三级 */
--text: #e8eefb; /* 主文字 */
--text-dim: #9fb0cc; /* 次要文字 */
--text-mute: #64748b; /* 弱化 / 占位符 */
/* 边框 */
--border: #24324f;
--border-soft: #1a2540;
--border-strong: #33456b;
/* 品牌色：蓝 → 青 科技色系 */
--primary: #3b82f6;
--primary-hover: #5b9bff;
--primary-active: #2563eb;
--primary-soft: rgba(59, 130, 246, .14); /* 选中底 / 幽灵按钮底 */
--accent: #22d3ee; /* 青色强调，渐变末端 */
--grad-brand: linear-gradient(135deg, #3b82f6 0%, #22d3ee 100%);
/* 语义色 */
--success: #34d399;
--success-soft: rgba(52, 211, 153, .14);
--warning: #fbbf24;
--warning-soft: rgba(251, 191, 36, .14);
--danger: #f87171;
--danger-soft: rgba(248, 113, 113, .14);
--info: #38bdf8;
--info-soft: rgba(56, 189, 248, .14);
/* 徽章状态「离线/中性」用的灰 */
--neutral: #94a3b8;
--neutral-soft: rgba(148, 163, 184, .14);
/* 发光 / 玻璃拟态 */
--glow-primary: 0 0 0 1px rgba(59, 130, 246, .35), 0 0 18px rgba(34, 211, 238, .18);
--glow-success: 0 0 10px rgba(52, 211, 153, .65);
--glow-danger: 0 0 10px rgba(248, 113, 113, .65);
--glow-warning: 0 0 10px rgba(251, 191, 36, .65);
--glow-info: 0 0 10px rgba(56, 189, 248, .65);
--glass-bg: rgba(20, 29, 51, .72);
--glass-border: rgba(120, 160, 220, .16);
/* 圆角 */
--radius: 10px;
--radius-sm: 7px;
--radius-lg: 16px;
--radius-pill: 999px;
/* 阴影 */
--shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .30);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .40);
/* 骨架尺寸 */
--sidebar-w: 236px;
--topbar-h: 58px;
/* 字体 */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
"Noto Sans CJK SC", sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
"Liberation Mono", monospace;
/* 字号阶梯 */
--fs-xs: 11px;
--fs-sm: 12px;
--fs-base: 13px;
--fs-md: 14px;
--fs-lg: 16px;
--fs-xl: 20px;
--fs-2xl: 26px;
--fs-3xl: 34px;
/* 间距节奏（4px 基准） */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
/* 动效 */
--t-fast: .15s ease;
--t-base: .22s cubic-bezier(.4, 0, .2, 1);
}
/* ── 浅色主题（独立设计：干净通透的冷白，非深色反相） ───────────────────── */
[data-theme="light"] {
color-scheme: light;
--bg: #f4f7fc; /* 页面底：极浅冷灰蓝 */
--bg-soft: #ffffff; /* 侧栏 / 顶栏：纯白 */
--bg-elev: #ffffff; /* 卡片：纯白浮在灰底上 */
--bg-elev-2: #f8fafd;
--bg-hover: rgba(37, 99, 235, .06);
--bg-active: rgba(37, 99, 235, .11);
--text: #0f1e35;
--text-dim: #4a5c78;
--text-mute: #8b9bb4;
--border: #dde5f0;
--border-soft: #eaf0f8;
--border-strong: #c3d0e2;
--primary: #2563eb;
--primary-hover: #1d4ed8;
--primary-active: #1e40af;
--primary-soft: rgba(37, 99, 235, .09);
--accent: #0891b2;
--grad-brand: linear-gradient(135deg, #2563eb 0%, #0891b2 100%);
--success: #059669;
--success-soft: rgba(5, 150, 105, .10);
--warning: #d97706;
--warning-soft: rgba(217, 119, 6, .10);
--danger: #dc2626;
--danger-soft: rgba(220, 38, 38, .09);
--info: #0284c7;
--info-soft: rgba(2, 132, 199, .10);
--neutral: #64748b;
--neutral-soft: rgba(100, 116, 139, .10);
--glow-primary: 0 0 0 1px rgba(37, 99, 235, .28), 0 2px 10px rgba(37, 99, 235, .12);
--glow-success: 0 0 8px rgba(5, 150, 105, .45);
--glow-danger: 0 0 8px rgba(220, 38, 38, .40);
--glow-warning: 0 0 8px rgba(217, 119, 6, .40);
--glow-info: 0 0 8px rgba(2, 132, 199, .40);
--glass-bg: rgba(255, 255, 255, .78);
--glass-border: rgba(140, 165, 200, .28);
--radius: 10px;
--radius-sm: 7px;
--radius-lg: 16px;
--radius-pill: 999px;
--shadow: 0 1px 2px rgba(16, 30, 54, .06), 0 2px 6px rgba(16, 30, 54, .06);
--shadow-lg: 0 14px 36px rgba(16, 30, 54, .14), 0 2px 8px rgba(16, 30, 54, .07);
}
/* =============================================================================
* 基础重置与排版
* ========================================================================== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
transition: background var(--t-base), color var(--t-base);
}
/* 主题切换时避免全页 transition 闪烁 */
body.no-anim, body.no-anim * { transition: none !important; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
h1, h2, h3, h4 { margin: 0 0 var(--sp-3); font-weight: 650; line-height: 1.3; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--sp-3); }
code, pre, .mono { font-family: var(--font-mono); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: var(--radius-pill);
border: 2px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--primary); background-clip: content-box; }
/* 等宽数字：指标数字必须用这个类，避免跳动 */
.num {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* =============================================================================
* 工具类
* ========================================================================== */
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.col { display: flex; flex-direction: column; gap: var(--sp-3); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--text-dim); }
.mute { color: var(--text-mute); }
.danger-text { color: var(--danger); }
.success-text { color: var(--success); }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.hidden { display: none !important; }
/* 视觉隐藏但读屏可见（不能用 .hidden，那是 display:none，读屏也读不到） */
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* 内联 SVG 图标的统一包裹层。
图标以完整 字符串通过 v-html 注入到 里
—— 不能在