/* ============================================================================
HubPilot Design System
----------------------------------------------------------------------------
全站唯一的样式来源。目标(见《HubPilot_UI_Redesign_ClaudeCode_v2.md》§32):
改一次 token,影响整个 HubPilot。
【使用方式】页面 里两行,顺序不能反:
先定主题,防首屏闪烁
【铁律】
1. 组件只消费 token,不写死颜色。要加颜色先加 token。
2. 不要在页面里覆盖组件样式 —— 那等于把碎片化又请回来了。
页面确实特殊,就在这里加一个修饰类(如 .btn--wide),别在页面里写 .btn{...}。
3. 主题只换 token,不换结构、不换布局、不换组件行为。
审计基线(2026-08-12,改造前):31 个页面内联 CSS 15 万字符、
153 种颜色、16 种圆角、35 种字号、19 种 font-family,26 个页面各写一套按钮。
============================================================================ */
/* ══════════════════════════════════════════════════════════════════════════
1. 主题 Token
──────────────────────────────────────────────────────────────────────────
默认主题(不写 data-theme 时)= HubPilot 工业深色,是主推主题。
其余三套通过 切换。
══════════════════════════════════════════════════════════════════════════ */
:root,
:root[data-theme="hub-default"] {
color-scheme: dark;
--bg-main: #07111F;
--bg-secondary: #0B1628;
--bg-tertiary: #111D31;
--surface-1: #111C2F;
--surface-2: #162238;
--surface-3: #1B2941;
--surface-glass: rgba(17, 28, 47, 0.88);
--border-subtle: rgba(148, 163, 184, 0.12);
--border-default: rgba(148, 163, 184, 0.20);
--border-strong: rgba(148, 163, 184, 0.30);
--brand-primary: #FACC15;
--brand-hover: #FBBF24;
--brand-active: #EAB308;
--brand-ink: #0F172A; /* 黄底上的文字色 */
--brand-soft: rgba(250, 204, 21, 0.12);
/* 品牌色当【文字】用时的专用 token。深色主题上就是品牌黄;
浅色主题必须压深,否则浅底上的黄字对比度不够(实测过,大标题几乎看不清)。 */
--brand-text: #FACC15;
--cyan: #38BDF8;
--teal: #2DD4BF;
--blue: #60A5FA;
--violet: #A78BFA;
--orange: #FB923C;
--success: #22C55E;
--warning: #F59E0B;
--danger: #EF4444;
--info: #3B82F6;
--text-primary: #F8FAFC;
--text-secondary: #CBD5E1;
--text-muted: #7C8CA5;
--text-disabled: #526078;
--shadow-card: 0 12px 32px rgba(0, 0, 0, .20);
--shadow-hover: 0 16px 40px rgba(0, 0, 0, .28);
--shadow-pop: 0 20px 60px rgba(0, 0, 0, .45);
/* Tailwind 桥接用的 RGB 三元组:发车 App 里有 bg-slate-800/50 这类
带透明度修饰符的类,必须是 rgb(var(--x) / ) 格式才生效,
直接塞 hex 会让所有 /50 /70 失效。改主题颜色时这两处要一起改。 */
--rgb-bg-main: 7 17 31;
--rgb-bg-secondary: 11 22 40;
--rgb-surface-1: 17 28 47;
--rgb-surface-2: 22 34 56;
--rgb-surface-3: 27 41 65;
--rgb-text-primary: 248 250 252;
--rgb-text-secondary: 203 213 225;
--rgb-text-muted: 124 140 165;
--rgb-text-disabled: 82 96 120;
--rgb-brand-primary: 250 204 21;
--rgb-brand-text: 250 204 21;
--rgb-brand-hover: 251 191 36;
--rgb-success: 34 197 94;
--rgb-warning: 245 158 11;
--rgb-danger: 239 68 68;
--rgb-info: 59 130 246;
}
/* Light Office —— 白天办公室长时间看。深色文字 + 浅底,黄色只做点缀。 */
:root[data-theme="light-office"] {
--brand-text: #92400E;
color-scheme: light;
/* 和「暖纸」的区分点是【色温】:这套明确偏冷灰,暖纸明确偏米黄。
两套亮度接近,靠温差区分,肉眼比色距数字更敏感。 */
--bg-main: #EEF1F6;
--bg-secondary: #E4E9F1;
--bg-tertiary: #DAE1EB;
--surface-1: #FFFFFF;
--surface-2: #F8FAFC;
--surface-3: #F1F5F9;
--surface-glass: rgba(255, 255, 255, 0.90);
--border-subtle: rgba(15, 23, 42, 0.08);
--border-default: rgba(15, 23, 42, 0.14);
--border-strong: rgba(15, 23, 42, 0.22);
/* 浅底上纯黄字看不清,主色压深一档,文字用深色 */
--brand-primary: #F59E0B;
--brand-hover: #D97706;
--brand-active: #B45309;
--brand-ink: #1F1300;
--brand-soft: rgba(245, 158, 11, 0.14);
--cyan: #0284C7;
--teal: #0D9488;
--blue: #2563EB;
--violet: #7C3AED;
--orange: #EA580C;
--success: #16A34A;
--warning: #D97706;
--danger: #DC2626;
--info: #2563EB;
--text-primary: #0F172A;
--text-secondary: #334155;
--text-muted: #64748B;
--text-disabled: #94A3B8;
--shadow-card: 0 6px 20px rgba(15, 23, 42, .08);
--shadow-hover: 0 10px 28px rgba(15, 23, 42, .12);
--shadow-pop: 0 20px 50px rgba(15, 23, 42, .18);
/* Tailwind 桥接用的 RGB 三元组:发车 App 里有 bg-slate-800/50 这类
带透明度修饰符的类,必须是 rgb(var(--x) / ) 格式才生效,
直接塞 hex 会让所有 /50 /70 失效。改主题颜色时这两处要一起改。 */
--rgb-bg-main: 245 247 251;
--rgb-bg-secondary: 238 242 248;
--rgb-surface-1: 255 255 255;
--rgb-surface-2: 248 250 252;
--rgb-surface-3: 241 245 249;
--rgb-text-primary: 15 23 42;
--rgb-text-secondary: 51 65 85;
--rgb-text-muted: 100 116 139;
--rgb-text-disabled: 148 163 184;
--rgb-brand-primary: 245 158 11;
--rgb-brand-text: 146 64 14;
--rgb-brand-hover: 217 119 6;
--rgb-success: 22 163 74;
--rgb-warning: 217 119 6;
--rgb-danger: 220 38 38;
--rgb-info: 37 99 235;
}
/* High Contrast Dark —— 仓库、大屏、远看、夜班。对比拉满。 */
:root[data-theme="high-contrast-dark"] {
--brand-text: #FACC15;
color-scheme: dark;
/* 和默认主题的区分点:这套要在仓库大屏上远看得清,所以压到近乎纯黑、
边框和状态色都拉强。之前 #050B14 和默认深蓝差距太小(色距 28),现在拉开。 */
--bg-main: #000000;
--bg-secondary: #060606;
--bg-tertiary: #0C0C0C;
--surface-1: #101010;
--surface-2: #1A1A1A;
--surface-3: #262626;
--surface-glass: rgba(10, 10, 10, 0.96);
--border-subtle: rgba(203, 213, 225, 0.20);
--border-default: rgba(203, 213, 225, 0.34);
--border-strong: rgba(203, 213, 225, 0.52);
--brand-primary: #FACC15;
--brand-hover: #FDE047;
--brand-active: #EAB308;
--brand-ink: #000000;
--brand-soft: rgba(250, 204, 21, 0.18);
/* 远看要认得出,状态色一律提亮 */
--success: #4ADE80;
--warning: #FBBF24;
--danger: #F87171;
--info: #60A5FA;
--text-primary: #FFFFFF;
--text-secondary: #E2E8F0;
--text-muted: #A9B7CA;
--text-disabled: #6B7C93;
--shadow-card: 0 8px 24px rgba(0, 0, 0, .5);
--shadow-hover: 0 12px 32px rgba(0, 0, 0, .6);
--shadow-pop: 0 24px 64px rgba(0, 0, 0, .7);
/* Tailwind 桥接用的 RGB 三元组:发车 App 里有 bg-slate-800/50 这类
带透明度修饰符的类,必须是 rgb(var(--x) / ) 格式才生效,
直接塞 hex 会让所有 /50 /70 失效。改主题颜色时这两处要一起改。 */
--rgb-bg-main: 5 11 20;
--rgb-bg-secondary: 7 14 26;
--rgb-surface-1: 15 23 36;
--rgb-surface-2: 22 32 47;
--rgb-surface-3: 29 42 60;
--rgb-text-primary: 255 255 255;
--rgb-text-secondary: 226 232 240;
--rgb-text-muted: 169 183 202;
--rgb-text-disabled: 107 124 147;
--rgb-brand-primary: 250 204 21;
--rgb-brand-text: 250 204 21;
--rgb-brand-hover: 253 224 71;
--rgb-success: 74 222 128;
--rgb-warning: 251 191 36;
--rgb-danger: 248 113 113;
--rgb-info: 96 165 250;
}
/* Paper Warm —— 暖纸浅色。白天久看比冷白舒服,像看纸质单据。 */
:root[data-theme="paper-warm"] {
--brand-text: #7C2D12;
color-scheme: light;
--bg-main: #F6F1E4; --bg-secondary: #EFE8D7; --bg-tertiary: #E5DCC6;
--surface-1: #FFFDF8; --surface-2: #F7F4EC; --surface-3: #EFEAE0;
--surface-glass: rgba(255, 253, 248, 0.92);
--border-subtle: rgba(66, 52, 30, 0.10);
--border-default: rgba(66, 52, 30, 0.16);
--border-strong: rgba(66, 52, 30, 0.26);
--brand-primary: #B45309; --brand-hover: #92400E; --brand-active: #78350F;
--brand-ink: #FFF9EC; --brand-soft: rgba(180, 83, 9, 0.12);
--cyan: #0E7490; --teal: #0F766E; --blue: #1D4ED8; --violet: #6D28D9; --orange: #C2410C;
--success: #15803D; --warning: #B45309; --danger: #B91C1C; --info: #1D4ED8;
--text-primary: #1C1917; --text-secondary: #44403C;
--text-muted: #78716C; --text-disabled: #A8A29E;
--shadow-card: 0 6px 20px rgba(66,52,30,.10);
--shadow-hover: 0 10px 28px rgba(66,52,30,.15);
--shadow-pop: 0 20px 50px rgba(66,52,30,.20);
/* Tailwind 桥接用的 RGB 三元组:发车 App 里有 bg-slate-800/50 这类
带透明度修饰符的类,必须是 rgb(var(--x) / ) 格式才生效,
直接塞 hex 会让所有 /50 /70 失效。改主题颜色时这两处要一起改。 */
--rgb-bg-main: 247 244 238;
--rgb-bg-secondary: 241 237 228;
--rgb-surface-1: 255 253 248;
--rgb-surface-2: 247 244 236;
--rgb-surface-3: 239 234 224;
--rgb-text-primary: 28 25 23;
--rgb-text-secondary: 68 64 60;
--rgb-text-muted: 120 113 108;
--rgb-text-disabled: 168 162 158;
--rgb-brand-primary: 180 83 9;
--rgb-brand-text: 124 45 18;
--rgb-brand-hover: 146 64 14;
--rgb-success: 21 128 61;
--rgb-warning: 180 83 9;
--rgb-danger: 185 28 28;
--rgb-info: 29 78 216;
}
/* Blueprint —— 工程蓝图。浅蓝底 + 深蓝墨,和物流/工程图纸的气质最搭。 */
:root[data-theme="blueprint"] {
--brand-text: #1E3A8A;
color-scheme: light;
--bg-main: #EEF3FA; --bg-secondary: #E4EBF5; --bg-tertiary: #D8E2F0;
--surface-1: #FBFDFF; --surface-2: #F0F5FC; --surface-3: #E4ECF7;
--surface-glass: rgba(251, 253, 255, 0.92);
--border-subtle: rgba(23, 55, 105, 0.12);
--border-default: rgba(23, 55, 105, 0.20);
--border-strong: rgba(23, 55, 105, 0.32);
--brand-primary: #1D4ED8; --brand-hover: #1E40AF; --brand-active: #1E3A8A;
--brand-ink: #FFFFFF; --brand-soft: rgba(29, 78, 216, 0.10);
--cyan: #0369A1; --teal: #0F766E; --blue: #1D4ED8; --violet: #6D28D9; --orange: #C2410C;
--success: #15803D; --warning: #B45309; --danger: #BE123C; --info: #1D4ED8;
--text-primary: #0B1E3D; --text-secondary: #1E3A5F;
--text-muted: #526E92; --text-disabled: #90A4BF;
--shadow-card: 0 4px 16px rgba(23,55,105,.09);
--shadow-hover: 0 10px 26px rgba(23,55,105,.14);
--shadow-pop: 0 20px 48px rgba(23,55,105,.20);
/* Tailwind 桥接用的 RGB 三元组:发车 App 里有 bg-slate-800/50 这类
带透明度修饰符的类,必须是 rgb(var(--x) / ) 格式才生效,
直接塞 hex 会让所有 /50 /70 失效。改主题颜色时这两处要一起改。 */
--rgb-bg-main: 238 243 250;
--rgb-bg-secondary: 228 235 245;
--rgb-surface-1: 251 253 255;
--rgb-surface-2: 240 245 252;
--rgb-surface-3: 228 236 247;
--rgb-text-primary: 11 30 61;
--rgb-text-secondary: 30 58 95;
--rgb-text-muted: 82 110 146;
--rgb-text-disabled: 144 164 191;
--rgb-brand-primary: 29 78 216;
--rgb-brand-text: 30 58 138;
--rgb-brand-hover: 30 64 175;
--rgb-success: 21 128 61;
--rgb-warning: 180 83 9;
--rgb-danger: 190 18 60;
--rgb-info: 29 78 216;
}
/* ══════════════════════════════════════════════════════════════════════════
2. 非主题 Token(所有主题共用:间距、圆角、字体、动效)
══════════════════════════════════════════════════════════════════════════ */
:root {
--font-sans: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
--font-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, Consolas, monospace;
/* 字号只有这 6 级。审计时全站有 35 种,就是从这里失控的。 */
--fs-page: 32px;
--fs-section: 20px;
--fs-card: 15px;
--fs-body: 14px;
--fs-caption: 12px;
--fs-kpi: 40px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 18px;
--radius-pill: 999px;
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
--page-max: 1560px;
--page-pad: 28px;
/* 微动效:150-250ms ease-out,全站统一 */
--t-fast: 150ms cubic-bezier(.2, .8, .3, 1);
--t-base: 200ms cubic-bezier(.2, .8, .3, 1);
}
/* 尊重系统的"减少动态效果"设置 —— 无障碍基本要求 */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* ══════════════════════════════════════════════════════════════════════════
3. 基础层
══════════════════════════════════════════════════════════════════════════ */
.hp * { box-sizing: border-box; }
body.hp {
margin: 0;
background: var(--bg-main);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.hp-page {
max-width: var(--page-max);
margin: 0 auto;
padding: var(--sp-6) var(--page-pad) var(--sp-10);
}
/* 数字、单号、门号、线路一律等宽 —— 这是"系统终端感"最省力的来源 */
.hp-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* ── 页头 ────────────────────────────────────────────────────────────── */
.hp-header {
display: flex; align-items: flex-end; gap: var(--sp-4);
flex-wrap: wrap; margin-bottom: var(--sp-6);
}
.hp-header__title {
font-size: var(--fs-page); font-weight: 700; letter-spacing: -.01em;
line-height: 1.15; margin: 0;
}
.hp-header__desc {
color: var(--text-muted); font-size: var(--fs-caption);
letter-spacing: .06em; text-transform: uppercase; margin-top: var(--sp-1);
}
.hp-header__actions { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; }
.hp-section-title {
font-size: var(--fs-caption); font-weight: 600; letter-spacing: .12em;
text-transform: uppercase; color: var(--text-muted);
margin: 0 0 var(--sp-3);
}
/* ══════════════════════════════════════════════════════════════════════════
4. Card
══════════════════════════════════════════════════════════════════════════ */
.hp-card {
background: var(--surface-1);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
padding: var(--sp-5);
transition: transform var(--t-base), border-color var(--t-base), background-color var(--t-base);
}
.hp-card--link { cursor: pointer; display: block; text-decoration: none; color: inherit; }
.hp-card--link:hover {
transform: translateY(-2px);
border-color: var(--border-strong);
box-shadow: var(--shadow-hover);
}
.hp-card__title { font-size: var(--fs-card); font-weight: 600; margin: 0 0 var(--sp-1); }
.hp-card__desc { color: var(--text-muted); font-size: var(--fs-caption); }
.hp-grid { display: grid; gap: var(--sp-4); }
.hp-grid--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.hp-grid--kpi { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* ── KPI ─────────────────────────────────────────────────────────────── */
.hp-kpi { position: relative; overflow: hidden; }
.hp-kpi__label {
font-size: var(--fs-caption); letter-spacing: .1em; text-transform: uppercase;
color: var(--text-muted); display: flex; align-items: center; gap: var(--sp-2);
}
.hp-kpi__value {
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
font-size: var(--fs-kpi); font-weight: 600; line-height: 1.1;
margin: var(--sp-2) 0 var(--sp-1);
}
.hp-kpi__sub { font-size: var(--fs-caption); color: var(--text-muted); }
.hp-kpi__delta { font-family: var(--font-mono); font-size: var(--fs-caption); }
.hp-kpi__delta--up { color: var(--success); }
.hp-kpi__delta--down { color: var(--danger); }
/* 左侧一道细色条区分数据类别,比整块上色克制得多 */
.hp-kpi::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: var(--accent, var(--cyan)); opacity: .85;
}
/* ── 键值行(账号信息、详情面板这类"标签: 值"的排版)────────────────── */
.hp-kv {
display: flex; align-items: baseline; gap: var(--sp-4);
padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-subtle);
}
.hp-kv:last-child { border-bottom: 0; }
.hp-kv__k { color: var(--text-muted); font-size: var(--fs-caption); min-width: 76px; flex: 0 0 auto; }
.hp-kv__v { color: var(--text-primary); margin-left: auto; text-align: right; word-break: break-all; }
/* ══════════════════════════════════════════════════════════════════════════
5. Button —— 4 种,统一高度/字号/间距/状态
══════════════════════════════════════════════════════════════════════════ */
.hp-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
height: 38px; padding: 0 var(--sp-4);
font-family: inherit; font-size: var(--fs-body); font-weight: 600;
border-radius: var(--radius-md); border: 1px solid transparent;
cursor: pointer; white-space: nowrap; text-decoration: none;
transition: background-color var(--t-fast), border-color var(--t-fast),
color var(--t-fast), transform var(--t-fast);
}
.hp-btn:active:not(:disabled) { transform: translateY(1px); }
.hp-btn:disabled { opacity: .45; cursor: not-allowed; }
.hp-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--brand-soft);
border-color: var(--brand-primary);
}
.hp-btn--sm { height: 30px; padding: 0 var(--sp-3); font-size: var(--fs-caption); }
.hp-btn--lg { height: 46px; padding: 0 var(--sp-6); }
.hp-btn--block { width: 100%; }
.hp-btn--primary {
background: var(--brand-primary); color: var(--brand-ink); border-color: var(--brand-primary);
}
.hp-btn--primary:hover:not(:disabled) { background: var(--brand-hover); border-color: var(--brand-hover); }
.hp-btn--secondary {
background: var(--surface-2); color: var(--text-primary); border-color: var(--border-default);
}
.hp-btn--secondary:hover:not(:disabled) { background: var(--surface-3); border-color: var(--border-strong); }
.hp-btn--ghost { background: transparent; color: var(--text-secondary); }
.hp-btn--ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text-primary); }
.hp-btn--danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.hp-btn--danger:hover:not(:disabled) { filter: brightness(1.08); }
/* ══════════════════════════════════════════════════════════════════════════
6. Input / Select
══════════════════════════════════════════════════════════════════════════ */
.hp-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.hp-label {
font-size: var(--fs-caption); font-weight: 600; color: var(--text-secondary);
letter-spacing: .04em;
}
.hp-input, .hp-select, .hp-textarea {
height: 38px; padding: 0 var(--sp-3);
background: var(--surface-2); color: var(--text-primary);
border: 1px solid var(--border-default); border-radius: var(--radius-md);
font-family: inherit; font-size: var(--fs-body); width: 100%;
transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
.hp-textarea { height: auto; padding: var(--sp-3); resize: vertical; line-height: 1.6; }
.hp-input::placeholder, .hp-textarea::placeholder { color: var(--text-disabled); }
.hp-input:hover, .hp-select:hover, .hp-textarea:hover { border-color: var(--border-strong); }
.hp-input:focus, .hp-select:focus, .hp-textarea:focus {
outline: none;
border-color: rgba(250, 204, 21, .65);
box-shadow: 0 0 0 3px var(--brand-soft);
background: var(--surface-1);
}
.hp-input:disabled, .hp-select:disabled { opacity: .5; cursor: not-allowed; }
.hp-input--error, .hp-select--error { border-color: var(--danger); }
.hp-help { font-size: var(--fs-caption); color: var(--text-muted); }
.hp-help--error { color: var(--danger); }
.hp-select {
appearance: none;
/* 下拉箭头用 currentColor 画,主题切换时自动跟着变色 */
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: var(--sp-8);
}
/* ══════════════════════════════════════════════════════════════════════════
7. Tabs
══════════════════════════════════════════════════════════════════════════ */
.hp-tabs {
display: flex; gap: var(--sp-1); position: relative;
border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--sp-5);
overflow-x: auto;
}
.hp-tab {
appearance: none; background: transparent; border: 0; cursor: pointer;
font-family: inherit; font-size: var(--fs-body); font-weight: 600;
color: var(--text-muted); padding: var(--sp-3) var(--sp-4);
border-bottom: 2px solid transparent; margin-bottom: -1px;
white-space: nowrap; transition: color var(--t-fast), background-color var(--t-fast);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.hp-tab:hover { color: var(--text-secondary); background: var(--surface-2); }
.hp-tab[aria-selected="true"], .hp-tab.is-active {
color: var(--text-primary); border-bottom-color: var(--brand-primary);
background: var(--brand-soft);
}
/* ── 分段控件(Segmented control)──────────────────────────────────────
排班页那种"干线/支线""约车表/固定班表"的二选一切换。
激活类名沿用 .on —— 页面 JS 用 classList.toggle('on', ...) 控制,
改成别的名字就要动 JS,没必要。 */
.hp-seg {
display: inline-flex; gap: 2px; padding: 3px;
background: var(--bg-secondary); border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
}
.hp-seg button {
background: transparent; border: 0; cursor: pointer;
font-family: inherit; font-size: var(--fs-caption); font-weight: 700;
color: var(--text-muted); padding: 7px 16px; border-radius: var(--radius-sm);
transition: background-color var(--t-fast), color var(--t-fast);
}
.hp-seg button:hover { color: var(--text-primary); }
.hp-seg button.on { background: var(--brand-primary); color: var(--brand-ink); }
/* 支线用青色区分,和干线不是同一条业务线 */
.hp-seg--alt button.on { background: var(--cyan); color: var(--brand-ink); }
/* 次级分段(类型切换)不抢主色 */
.hp-seg--sub button.on { background: var(--surface-3); color: var(--text-primary); }
/* 工具条:分段控件 + 说明文字的一行容器 */
.hp-toolbar {
display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
padding: var(--sp-3) var(--sp-5);
border-bottom: 1px solid var(--border-subtle); background: var(--bg-secondary);
}
.hp-toolbar__group { display: flex; align-items: center; gap: var(--sp-2); }
.hp-toolbar__label {
font-size: 11px; color: var(--text-muted); font-family: var(--font-mono);
letter-spacing: .08em;
}
.hp-toolbar__divider { width: 1px; height: 24px; background: var(--border-subtle); }
/* ══════════════════════════════════════════════════════════════════════════
8. Badge / Status
══════════════════════════════════════════════════════════════════════════ */
.hp-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 9px; border-radius: var(--radius-pill);
font-size: var(--fs-caption); font-weight: 600; line-height: 1.4;
border: 1px solid transparent; white-space: nowrap;
}
/* 状态不能只靠文字颜色区分 —— 一律带一个圆点,色盲和远看都认得出 */
.hp-badge::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: currentColor; flex: 0 0 auto;
}
.hp-badge--neutral { color: var(--text-muted); background: var(--surface-3); border-color: var(--border-subtle); }
.hp-badge--success { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.hp-badge--warning { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.hp-badge--danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.hp-badge--info { color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.hp-badge--brand { color: var(--brand-primary); background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent); }
.hp-badge--dot-only::before { margin: 0; }
.hp-badge--pulse::before { animation: hp-pulse 2s ease-in-out infinite; }
@keyframes hp-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
/* ══════════════════════════════════════════════════════════════════════════
9. Table
══════════════════════════════════════════════════════════════════════════ */
.hp-table-wrap {
background: var(--surface-1); border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg); overflow: auto; box-shadow: var(--shadow-card);
}
.hp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.hp-table thead th {
position: sticky; top: 0; z-index: 2;
background: var(--surface-2); color: var(--text-muted);
font-size: var(--fs-caption); font-weight: 600;
letter-spacing: .08em; text-transform: uppercase;
text-align: left; padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--border-default); white-space: nowrap;
}
.hp-table tbody td {
padding: var(--sp-3) var(--sp-4); height: 52px;
border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary);
}
.hp-table tbody tr { transition: background-color var(--t-fast); }
.hp-table tbody tr:hover td { background: var(--surface-2); color: var(--text-primary); }
.hp-table tbody tr:last-child td { border-bottom: 0; }
/* 单号 / 门号 / 线路 / 时间用等宽,列对齐也更整齐 */
.hp-table .hp-mono, .hp-table td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hp-table td.num, .hp-table th.num { text-align: right; }
.hp-table__actions { display: flex; gap: var(--sp-2); justify-content: flex-end; }
/* ══════════════════════════════════════════════════════════════════════════
10. Modal / Drawer
══════════════════════════════════════════════════════════════════════════ */
.hp-overlay {
position: fixed; inset: 0; z-index: 9000;
background: rgba(2, 6, 23, .68); backdrop-filter: blur(3px);
display: none; align-items: center; justify-content: center; padding: var(--sp-5);
}
.hp-overlay.is-open { display: flex; animation: hp-fade var(--t-base) ease-out; }
@keyframes hp-fade { from { opacity: 0; } to { opacity: 1; } }
.hp-modal {
background: var(--surface-1); border: 1px solid var(--border-default);
border-radius: var(--radius-xl); box-shadow: var(--shadow-pop);
width: min(560px, 100%); max-height: 86vh; display: flex; flex-direction: column;
animation: hp-rise var(--t-base) ease-out;
}
@keyframes hp-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.hp-modal__head {
padding: var(--sp-5); border-bottom: 1px solid var(--border-subtle);
display: flex; align-items: center; gap: var(--sp-3);
}
.hp-modal__title { font-size: var(--fs-section); font-weight: 600; margin: 0; }
.hp-modal__body { padding: var(--sp-5); overflow: auto; }
.hp-modal__foot {
padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border-subtle);
display: flex; gap: var(--sp-2); justify-content: flex-end;
}
/* ══════════════════════════════════════════════════════════════════════════
11. Empty / Loading / Error
══════════════════════════════════════════════════════════════════════════ */
.hp-empty { text-align: center; padding: var(--sp-10) var(--sp-5); color: var(--text-muted); }
.hp-empty__title { color: var(--text-secondary); font-size: var(--fs-card); font-weight: 600; margin-bottom: var(--sp-2); }
.hp-empty__desc { font-size: var(--fs-caption); }
.hp-skeleton {
background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
background-size: 400% 100%;
animation: hp-shimmer 1.4s ease-in-out infinite;
border-radius: var(--radius-sm);
}
@keyframes hp-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
.hp-skeleton--text { height: 12px; margin: var(--sp-2) 0; }
.hp-skeleton--row { height: 52px; margin-bottom: 1px; border-radius: 0; }
.hp-spinner {
width: 15px; height: 15px; border-radius: 50%; display: inline-block;
border: 2px solid currentColor; border-right-color: transparent;
animation: hp-spin .7s linear infinite;
}
@keyframes hp-spin { to { transform: rotate(360deg); } }
.hp-alert {
display: flex; gap: var(--sp-3); align-items: flex-start;
padding: var(--sp-4); border-radius: var(--radius-md);
border: 1px solid var(--border-default); background: var(--surface-2);
font-size: var(--fs-body);
}
.hp-alert--error { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 10%, var(--surface-2)); }
.hp-alert__title { font-weight: 600; color: var(--text-primary); }
.hp-alert__desc { color: var(--text-muted); font-size: var(--fs-caption); }
/* ══════════════════════════════════════════════════════════════════════════
12. 主题选择器(挂在导航右侧)
══════════════════════════════════════════════════════════════════════════ */
.hp-theme { position: relative; }
.hp-theme__pop {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 9500;
background: var(--surface-1); border: 1px solid var(--border-default);
border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
padding: var(--sp-2); width: 246px; display: none;
}
.hp-theme__pop.is-open { display: block; }
.hp-theme__item {
display: flex; gap: var(--sp-3); align-items: center; width: 100%;
padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--radius-md);
background: transparent; color: var(--text-secondary); cursor: pointer;
font-family: inherit; text-align: left; transition: background-color var(--t-fast);
}
.hp-theme__item:hover { background: var(--surface-2); color: var(--text-primary); }
.hp-theme__item[aria-checked="true"] { background: var(--brand-soft); color: var(--text-primary); }
.hp-theme__swatch {
width: 26px; height: 26px; border-radius: var(--radius-sm);
border: 1px solid var(--border-default); flex: 0 0 auto;
background: linear-gradient(135deg, var(--sw-bg) 0 55%, var(--sw-accent) 55% 100%);
}
.hp-theme__name { font-size: var(--fs-body); font-weight: 600; }
.hp-theme__desc { font-size: 11px; color: var(--text-muted); }