:root {
    color-scheme: dark;

    /* 字体系统 */
    --font-family-sans: 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
    --font-family-ui: 'Segoe UI', 'PingFang SC', sans-serif;

    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 20px;
    --font-size-display: 40px;
    --font-size-panel-title: 16px;
    --font-size-panel-score: 54px;
    --font-size-panel-badge: 13px;
    --font-size-panel-caption: 17px;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 0.94;
    --line-height-solid: 1;

    --tracking-tight-display: -0.045em;
    --tracking-soft: 0.01em;

    /* 间距系统 */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 30px;

    /* 圆角系统 */
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 18px;
    --radius-pill: 999px;
    --radius-tab-indicator: 10px;
    --radius-panel: 18px;
    --radius-panel-row: 12px;
    --radius-panel-badge: 999px;

    /* 布局尺寸 */
    --layout-app-max-width: 390px;
    --layout-page-gutter: 20px;
    --layout-dial-shell-width: 272px;
    --layout-dial-shell-height: 242px;
    --layout-dial-width: 252px;
    --layout-dial-height: 230px;
    --layout-detail-card-padding: 22px;

    /* 基础颜色 */
    --color-bg-canvas: #000000;
    --color-surface-top: #2A2A2A;
    --color-surface-bottom: #1A1A1A;
    --color-surface-tab: #1A1A1A;
    --color-surface-active: #174447;
    --color-surface-panel-top: #242424;
    --color-surface-panel-bottom: #131313;

    --color-text-primary: #FFFFFF;
    --color-text-secondary: #A0A0A0;
    --color-text-tertiary: #666666;
    --color-text-soft: #D7D7D7;
    --color-tab-text-default: rgba(255, 255, 255, 0.88);
    --color-tab-text-hover: #FFFFFF;
    --color-tab-text-active: #11D9F2;

    --color-accent-cyan: #08B1E8;
    --color-accent-teal: #40D9AD;
    --color-accent-lime: #71F683;
    --color-accent-upload: #09B1E7;
    --color-accent-ping: #FFAC81;
    --color-accent-jitter: #F73636;
    --color-accent-loss: #71F683;

    --color-border-subtle: rgba(255, 255, 255, 0.05);
    --color-dial-rest: rgba(216, 216, 216, 0.26);
    --color-dial-glow: rgba(64, 217, 173, 0.12);
    --color-selection: rgba(8, 177, 232, 0.28);
    --color-tab-indicator-bg: #1A4A4D;
    --color-tab-indicator-tint: rgba(64, 217, 173, 0.08);
    --color-tab-indicator-border: rgba(64, 217, 173, 0.12);
    --color-scrollbar-track: rgba(255, 255, 255, 0.06);
    --color-scrollbar-thumb: rgba(255, 255, 255, 0.34);
    --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.48);
    --color-scrollbar-thumb-active: rgba(255, 255, 255, 0.58);

    /* 模板卡片专用颜色 */
    --color-panel-title: #7BE6FF;
    --color-panel-score: #FFFFFF;
    --color-panel-score-total: rgba(255, 255, 255, 0.72);
    --color-panel-caption: rgba(255, 255, 255, 0.94);
    --color-panel-helper: rgba(255, 255, 255, 0.58);
    --color-panel-row-bg: rgba(255, 255, 255, 0.045);
    --color-panel-row-border: rgba(255, 255, 255, 0.06);
    --color-panel-row-label: rgba(255, 255, 255, 0.74);
    --color-panel-row-value: #FFFFFF;
    --color-panel-note-bg: rgba(8, 177, 232, 0.06);
    --color-panel-note-border: rgba(8, 177, 232, 0.12);
    --color-panel-note-text: rgba(255, 255, 255, 0.66);
    --color-panel-note-dot: #40D9AD;
    --color-panel-badge-bg: rgba(113, 246, 131, 0.14);
    --color-panel-badge-border: rgba(113, 246, 131, 0.22);
    --color-panel-badge-text: #97FFAB;
    --color-score-card-bg: #1B1B1B;
    --color-score-card-border: rgba(255, 255, 255, 0.12);
    --color-score-card-inner-highlight: rgba(255, 255, 255, 0.04);
    --color-score-title: #10D9F5;
    --color-score-value: #79FB82;
    --color-score-total: rgba(255, 255, 255, 0.78);
    --color-score-caption: #E4C6B9;
    --color-score-helper: rgba(255, 255, 255, 0.42);
    --color-score-badge-bg: #274836;
    --color-score-badge-border: #42C98A;
    --color-score-badge-text: #83FA82;
    --color-score-metric-bg: #141414;
    --color-score-metric-border: rgba(255, 255, 255, 0.02);
    --color-score-metric-title: rgba(255, 255, 255, 0.92);
    --color-score-metric-description: rgba(255, 255, 255, 0.58);
    --color-score-check-bg: #7AF984;
    --color-score-check-icon: #163924;

    /* 网络评分三态配色，后续切主题时只需要改这里 */
    --color-score-good-value: #79FB82;
    --color-score-good-caption: #A3F6AA;
    --color-score-good-badge-bg: #274836;
    --color-score-good-badge-border: #42C98A;
    --color-score-good-badge-text: #83FA82;
    --color-score-good-glow: rgba(113, 246, 131, 0.14);
    --color-score-good-outline: rgba(66, 201, 138, 0.14);

    --color-score-fair-value: #FFB07B;
    --color-score-fair-caption: #F2BA93;
    --color-score-fair-badge-bg: #493123;
    --color-score-fair-badge-border: #E08E61;
    --color-score-fair-badge-text: #FFB889;
    --color-score-fair-glow: rgba(255, 172, 129, 0.16);
    --color-score-fair-outline: rgba(224, 142, 97, 0.16);

    --color-score-poor-value: #FF6767;
    --color-score-poor-caption: #FF9D9D;
    --color-score-poor-badge-bg: #442121;
    --color-score-poor-badge-border: #DE5555;
    --color-score-poor-badge-text: #FF8B8B;
    --color-score-poor-glow: rgba(247, 54, 54, 0.18);
    --color-score-poor-outline: rgba(222, 85, 85, 0.16);
    --color-environment-card-bg: #1A1A1A;
    --color-environment-card-border: rgba(255, 255, 255, 0.14);
    --color-environment-title: #13DDF8;
    --color-environment-row-bg: #131313;
    --color-environment-row-border: rgba(255, 255, 255, 0.02);
    --color-environment-label: rgba(255, 255, 255, 0.62);
    --color-environment-value: #FFFFFF;
    --color-environment-check-bg: #08E3FF;
    --color-environment-check-icon: #113540;
    --color-environment-note: rgba(255, 255, 255, 0.46);
    --color-environment-note-tail: rgba(255, 255, 255, 0.3);
    --color-environment-note-dot: rgba(255, 255, 255, 0.26);
    --color-footer-title: #11DDF7;
    --color-footer-link: rgba(255, 255, 255, 0.48);
    --color-footer-email: rgba(255, 255, 255, 0.46);
    --color-footer-copy: rgba(255, 255, 255, 0.42);
    --color-footer-border: rgba(255, 255, 255, 0.12);

    /* 历史页配色 */
    --color-history-title: #00F2FF;
    --color-history-card-top: #232323;
    --color-history-card-bottom: #1B1B1B;
    --color-history-card-border: rgba(255, 255, 255, 0.13);
    --color-history-card-highlight: rgba(255, 255, 255, 0.05);
    --color-history-card-shadow: rgba(0, 0, 0, 0.24);
    --color-history-card-glow: rgba(255, 255, 255, 0.03);
    --color-history-time: rgba(255, 255, 255, 0.72);
    --color-history-speed: #FFFFFF;
    --color-history-meta: rgba(255, 255, 255, 0.46);
    --color-history-location-bg: #121212;
    --color-history-location-border: rgba(255, 255, 255, 0.02);
    --color-history-location-text: rgba(255, 255, 255, 0.72);
    --color-history-location-icon: #00F9FF;

    /* 设置页配色 */
    --color-settings-card-top: #232323;
    --color-settings-card-bottom: #1B1B1B;
    --color-settings-card-border: rgba(255, 255, 255, 0.13);
    --color-settings-card-highlight: rgba(255, 255, 255, 0.05);
    --color-settings-card-shadow: rgba(0, 0, 0, 0.24);
    --color-settings-brand: #00F2FF;
    --color-settings-version: rgba(255, 255, 255, 0.78);
    --color-settings-copy: rgba(255, 255, 255, 0.56);
    --color-settings-app-icon: #F5F5F5;
    --color-settings-row-icon: #00F9FF;
    --color-settings-row-text: #00F2FF;
    --color-settings-row-chevron: rgba(255, 255, 255, 0.88);
    --color-settings-sheet-overlay: rgba(0, 0, 0, 0.52);
    --color-settings-sheet-top: #343434;
    --color-settings-sheet-bottom: #2A2A2A;
    --color-settings-sheet-border: rgba(255, 255, 255, 0.08);
    --color-settings-sheet-title: #00F2FF;
    --color-settings-sheet-option-bg: #303030;
    --color-settings-sheet-option-border: rgba(255, 255, 255, 0.16);
    --color-settings-sheet-option-active-border: rgba(18, 232, 247, 0.72);
    --color-settings-sheet-option-text: rgba(255, 255, 255, 0.9);
    --color-settings-sheet-option-active-text: #00F2FF;
    --color-settings-sheet-option-ring: rgba(255, 255, 255, 0.68);
    --color-settings-sheet-scrollbar-track: rgba(255, 255, 255, 0.22);
    --color-settings-sheet-scrollbar-thumb: #00F2FF;

    /* 帮助页配色 */
    --color-help-title: #00F9FF;
    --color-help-tab-active: #00F9FF;
    --color-help-tab-default: rgba(255, 255, 255, 0.8);
    --color-help-tab-divider: rgba(255, 255, 255, 0.06);
    --color-help-tab-underline: #00F9FF;
    --color-help-back-bg: #2A2A2A;
    --color-help-back-border: rgba(255, 255, 255, 0.12);
    --color-help-back-icon: #FFFFFF;
    --color-help-card-bg: rgba(255, 255, 255, 0.1);
    --color-help-card-text: #FFFFFF;
    --color-help-card-muted: rgba(255, 255, 255, 0.6);
    --color-help-card-note: rgba(255, 255, 255, 0.6);
    --color-help-card-cyan: #12E8F7;
    --color-help-card-orange: #FFAA7B;
    --color-help-card-green: #76FF82;
    --color-help-chip-text-dark: #171717;
    --color-help-divider-cyan: rgba(18, 232, 247, 0.82);
    --color-help-divider-orange: rgba(255, 170, 123, 0.82);
    --color-help-divider-green: rgba(118, 255, 130, 0.7);
    --color-help-end-text: rgba(255, 255, 255, 0.76);

    /* 渐变定义 */
    --gradient-surface-card: linear-gradient(180deg, var(--color-surface-top) 0%, var(--color-surface-bottom) 100%);
    --gradient-panel-surface: linear-gradient(180deg, var(--color-surface-panel-top) 0%, var(--color-surface-panel-bottom) 100%);
    --gradient-brand: linear-gradient(90deg, var(--color-accent-cyan) 0%, var(--color-accent-teal) 35%, var(--color-accent-lime) 100%);
    --gradient-dial-meter: linear-gradient(90deg, var(--color-accent-cyan) 0%, var(--color-accent-teal) 35%, var(--color-accent-lime) 65%, var(--color-accent-lime) 100%);
    --gradient-tab-indicator: linear-gradient(180deg, var(--color-tab-indicator-tint) 0%, rgba(64, 217, 173, 0) 100%);
    --gradient-panel-glow: radial-gradient(circle at top right, rgba(8, 177, 232, 0.14) 0%, rgba(8, 177, 232, 0) 60%);
    --gradient-score-card: linear-gradient(180deg, #1F1F1F 0%, var(--color-score-card-bg) 100%);
    --gradient-environment-card: linear-gradient(180deg, #1D1D1D 0%, var(--color-environment-card-bg) 100%);
    --gradient-footer-card: linear-gradient(180deg, #1F1F1F 0%, #1A1A1A 100%);
    --gradient-history-card: linear-gradient(180deg, var(--color-history-card-top) 0%, var(--color-history-card-bottom) 100%);
    --gradient-settings-card: linear-gradient(180deg, var(--color-settings-card-top) 0%, var(--color-settings-card-bottom) 100%);
    --gradient-settings-sheet: linear-gradient(180deg, var(--color-settings-sheet-top) 0%, var(--color-settings-sheet-bottom) 100%);
    --gradient-help-card: linear-gradient(180deg, #242424 0%, var(--color-help-card-bg) 100%);

    /* 阴影系统 */
    --shadow-button-glow: 0 4px 15px rgba(113, 246, 131, 0.3);
    --shadow-dial-meter: 0 0 10px rgba(64, 217, 173, 0.12);
    --shadow-needle: 0 0 8px rgba(255, 255, 255, 0.1);
    --shadow-panel-card: 0 18px 44px rgba(0, 0, 0, 0.24);
    --shadow-tab-indicator:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 0 1px var(--color-tab-indicator-border);

    /* 动效时序 */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-needle: 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    --transition-tab-slide: 0.38s cubic-bezier(0.22, 1, 0.36, 1);

    /* 顶部 Tab 组件变量 */
    --tab-track-padding: 6px;
    --tab-item-padding-y: 10px;

    /* 兼容现有页面的别名变量 */
    --bg-color: var(--color-bg-canvas);
    --card-bg-start: var(--color-surface-top);
    --card-bg-end: var(--color-surface-bottom);
    --tab-bg: var(--color-surface-tab);
    --tab-active-bg: var(--color-surface-active);
    --text-cyan: var(--color-accent-cyan);
    --text-white: var(--color-text-primary);
    --text-gray: var(--color-text-secondary);
    --text-dark-gray: var(--color-text-tertiary);
    --color-upload: var(--color-accent-upload);
    --color-ping: var(--color-accent-ping);
    --color-jitter: var(--color-accent-jitter);
    --color-loss: var(--color-accent-loss);
    --dial-fill-start: var(--color-accent-cyan);
    --dial-fill-mid: var(--color-accent-teal);
    --dial-fill-end: var(--color-accent-lime);
    --dial-rest: var(--color-dial-rest);
}