:root {
    
    --header-height: 56px;
    --sidebar-width: 240px;
    --bottom-nav-height: 56px;
    --default-item-width: 218px;
    --default-max-item-width: 344px;
    --default-item-margin-right: 16px;
    --default-item-margin-bottom: 24px;
    --item-title-font-size: 14px;
    --item-title-line-height: 18px;
    --item-title-max-lines: 2;
    --logo-height: 18px;

    
    --body-bg: #ffffff;
    --bg: #ffffff;
    --header-bg: #ffffff;
    --sidebar-bg: #ffffff;
    --card: #ffffff;
    --card-hover: #f0f0f0;
    --panel: #ffffff;
    --panel-soft: #f5f5f5;
    --elevated: #ffffff;
    --input-bg: #ffffff;
    --chip-bg: #f0f0f0;
    --chip-hover: #e8e8e8;
    --item-bg: #fafafa;
    --item-thumb-bg: #f5f5f5;

    
    --text: #0f0f0f;
    --text-primary: #0f0f0f;
    --text-secondary: #606060;
    --text-muted: rgba(17, 17, 17, 0.6);
    --sub: #606060;
    --sub-text: #606060;
    --txt: var(--text);
    --item-title-text: #0f0f0f;
    --item-meta-text: rgba(17, 17, 17, 0.6);

    
    --border: #eeeeee;
    --brd: var(--border);
    --border-soft: #f0f0f0;
    --border-strong: #e1e1e1;
    --input-border: #cccccc;
    --hr-color: #e1e1e1;
    --sidebar-nav-border: #eeeeee;

    
    --accent: #065fd4;
    --accent-hover: #0556bf;
    --accent-strong: #065fd4;
    --accent-contrast: #ffffff;
    --accent-text: #ffffff;
    --accent-soft: rgba(6, 95, 212, 0.08);
    --pri: #e8a317;
    --on-accent: #ffffff;
    --ring: rgba(6, 95, 212, 0.18);
    --theme-color: var(--accent);
    --brand-color: var(--accent);
    --default-theme-color: var(--accent);
    --default-brand-color: var(--accent);
    --links-color: var(--accent);
    --gradient: none;
    --soft-gradient: none;

    
    --success: #00a28b;
    --success-color: #00a28b;
    --warning: #e09f1f;
    --danger: #de623b;
    --error: #de623b;
    --error-soft: rgba(222, 98, 59, 0.1);
    --info: #065fd4;

    
    --header-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06);
    --header-control-bg: transparent;
    --header-control-hover: rgba(0, 0, 0, 0.04);
    --header-control-border: transparent;
    --header-control-text: #606060;
    --header-search-bg: #ffffff;
    --header-search-field-bg: #ffffff;
    --header-search-focus: rgba(28, 98, 185, 0.14);
    --header-circle-button-color: #606060;
    --search-btn-bg: #f8f8f8;
    --search-btn-border: #d3d3d3;
    --search-btn-hover-bg: #f0f0f0;
    --search-input-border: #cccccc;

    
    --sidebar-nav-item-text: rgb(13, 13, 13);
    --sidebar-nav-item-icon: rgb(144, 144, 144);
    --nav-active-bg: rgba(0, 0, 0, 0.1);
    --nav-hover-bg: rgba(0, 0, 0, 0.04);

    
    --item-title-size: 14px;
    --item-title-line: 18px;
    --item-title-lines: 2;
    --item-radius: 10px;
    --item-duration-bg: hsl(0, 0%, 6.7%);
    --item-duration-fg: #ffffff;

    
    --skeleton-base: #eeeeee;
    --skeleton-hl: #f5f5f5;
    --surface-soft: #f5f5f5;

    
    --hero-caption: #111111;
    --hero-caption-zh: #606060;
    --hero-domain-color: #111111;
    --hero-hot-label: #606060;
    --hero-wordmark-color: #111111;
    --hero-link: #111111;

    
    --glass-blur: 0px;
    --glass-saturate: 1;
    --glass-brightness: 1;
    --glass-contrast: 1;
    --glass-tint: #ffffff;
    --glass-tint-strong: #ffffff;
    --glass-specular: transparent;
    --glass-specular-soft: transparent;
    --glass-border: #eeeeee;
    --glass-border-inner: transparent;
    --glass-shadow-outer: 0 4px 8px rgba(17, 17, 17, 0.06);
    --glass-shadow-inner: none;
    --glass-accent-glow: transparent;
    --glass-highlight-angle: 135deg;
    --glass-highlight-x: 30%;
    --glass-highlight-y: 20%;

    
    --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.04);
    --shadow-md: 0 4px 8px rgba(17, 17, 17, 0.06);
    --shadow-lg: 0 8px 16px rgba(17, 17, 17, 0.08);
    --shadow-xl: 0 12px 28px rgba(17, 17, 17, 0.1);

    
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-2xl: 12px;
    --radius-3xl: 16px;
    --radius-full: 999px;

    
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 22px;
    --text-3xl: 28px;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    --weight-black: 900;

    
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    
    --transition-fast: 0.15s;
    --transition-normal: 0.2s;
    --transition-slow: 0.35s;
    --sidebar-slide-ms: 200ms;

    
    --z-dropdown: 100;
    --z-fixed-header: 9000;
    --z-sticky: 500;
    --z-floating-btn: 900;
    --z-bottom-nav: 950;
    --z-sidebar: 9500;
    --z-sidebar-overlay: 9400;
    --z-modal-backdrop: 1900;
    --z-modal: 2000;
    --z-toast: 2100;
    --z-tooltip: 2200;
}

body.light-mode,
html[data-home-theme="light"],
html[data-home-theme="light"] body,
:root[data-theme="light"] {
    color-scheme: light;
}

html[data-home-theme="dark"],
:root[data-theme="dark"] {
    color-scheme: dark;

    --body-bg: #0f0f0f;
    --bg: #0f0f0f;
    --header-bg: #212121;
    --sidebar-bg: #212121;
    --card: #0f0f0f;
    --card-hover: #272727;
    --panel: #212121;
    --panel-soft: #2a2a2a;
    --elevated: #2a2a2a;
    --input-bg: #121212;
    --chip-bg: #272727;
    --chip-hover: #3f3f3f;
    --item-bg: #0f0f0f;
    --item-thumb-bg: #272727;

    --text: #f1f1f1;
    --text-primary: #f1f1f1;
    --text-secondary: #aaaaaa;
    --text-muted: rgba(255, 255, 255, 0.55);
    --sub: #aaaaaa;
    --sub-text: #aaaaaa;
    --txt: var(--text);
    --item-title-text: #f1f1f1;
    --item-meta-text: rgba(255, 255, 255, 0.55);

    --border: rgba(255, 255, 255, 0.1);
    --brd: var(--border);
    --border-soft: rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.14);
    --input-border: #404040;
    --hr-color: rgba(255, 255, 255, 0.1);
    --sidebar-nav-border: rgba(255, 255, 255, 0.08);

    --accent: #3ea6ff;
    --accent-hover: #65b8ff;
    --accent-strong: #3ea6ff;
    --accent-contrast: #0f0f0f;
    --accent-text: #0f0f0f;
    --accent-soft: rgba(62, 166, 255, 0.16);
    --pri: #e8a317;
    --on-accent: #0f0f0f;
    --ring: rgba(62, 166, 255, 0.22);
    --theme-color: var(--accent);
    --brand-color: var(--accent);

    --header-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
    --header-control-bg: transparent;
    --header-control-hover: rgba(255, 255, 255, 0.08);
    --header-control-border: transparent;
    --header-control-text: #cccccc;
    --header-search-bg: #121212;
    --header-search-field-bg: #121212;
    --header-search-focus: rgba(62, 166, 255, 0.22);
    --header-circle-button-color: #cccccc;
    --search-btn-bg: #303030;
    --search-btn-border: #404040;
    --search-btn-hover-bg: #3a3a3a;
    --search-input-border: #404040;

    --sidebar-nav-item-text: #f1f1f1;
    --sidebar-nav-item-icon: #aaaaaa;
    --nav-active-bg: rgba(255, 255, 255, 0.1);
    --nav-hover-bg: rgba(255, 255, 255, 0.06);

    --skeleton-base: #272727;
    --skeleton-hl: #3f3f3f;
    --surface-soft: #212121;

    --hero-caption: #f1f1f1;
    --hero-caption-zh: #aaaaaa;
    --hero-domain-color: #f1f1f1;
    --hero-hot-label: #aaaaaa;
    --hero-wordmark-color: #fff;
    --hero-link: #fff;

    --glass-tint: #212121;
    --glass-tint-strong: #212121;
    --glass-border: rgba(255, 255, 255, 0.08);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 12px 28px rgba(0, 0, 0, 0.55);

    --error: #ff6b5a;
    --danger: #ff6b5a;
    --info: #3ea6ff;
}

body.light-mode {
    color-scheme: light;
}

html[data-home-theme="dark"] body {
    background: var(--body-bg);
    color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

.strength-bar.strength-weak   { background: var(--error, #de623b); }
.strength-bar.strength-medium { background: var(--warning, #e09f1f); }
.strength-bar.strength-strong { background: var(--success, #00a28b); }
.strength-text.strength-weak   { color: var(--error, #de623b); }
.strength-text.strength-medium { color: var(--warning, #e09f1f); }
.strength-text.strength-strong { color: var(--success, #00a28b); }