:root {
    --st-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    --st-bg: #e9edf2;
    --st-surface: rgba(255, 255, 255, .78);
    --st-surface-solid: #ffffff;
    --st-surface-soft: rgba(247, 249, 250, .6);
    --st-surface-hover: rgba(255, 255, 255, .9);
    --st-text: #0f1419;
    --st-text-secondary: #536471;
    --st-text-muted: #667785;
    --st-border: #eff3f4;
    --st-border-strong: #cfd9de;
    --st-primary: #1d9bf0;
    --st-primary-hover: #1a8cd8;
    --st-primary-soft: #e8f5fd;
    --st-primary-readable: #0b6fa4;
    --st-on-primary: #0f1419;
    --st-success: #00ba7c;
    --st-success-soft: #e6f7f1;
    --st-warning: #f4a261;
    --st-warning-soft: #fff3e8;
    --st-danger: #f4212e;
    --st-danger-soft: #feecef;
    --st-overlay: rgba(15, 20, 25, .42);
    --st-space-1: 4px;
    --st-space-2: 8px;
    --st-space-3: 12px;
    --st-space-4: 16px;
    --st-space-5: 24px;
    --st-space-6: 32px;
    --st-radius-sm: 8px;
    --st-radius: 16px;
    --st-radius-lg: 24px;
    --st-radius-pill: 999px;
    --st-topbar: 64px;
    --st-nav-width: 240px;
    --st-shell-width: 1320px;
    --st-transition: 160ms ease;
    --st-focus-ring: color-mix(in srgb, var(--st-primary) 34%, transparent);
    --st-overlay-shadow: 0 8px 32px rgba(15, 20, 25, .14);
    --st-bg-gradient: linear-gradient(160deg, #f2f5f9 0%, #e3e8ef 100%);
    --st-glow-a: rgba(29, 155, 240, .015);
    --st-glow-b: rgba(147, 90, 246, .04);
    --st-glass-shadow: 6px 6px 16px rgba(163, 177, 198, .5), -6px -6px 16px rgba(255, 255, 255, .92);
    --st-glass-shadow-sm: 3px 3px 8px rgba(163, 177, 198, .42), -3px -3px 8px rgba(255, 255, 255, .82);
    --st-glass-shadow-inset: inset 3px 3px 6px rgba(163, 177, 198, .35), inset -3px -3px 6px rgba(255, 255, 255, .9);
    --st-glass-shadow-raised: 6px 6px 18px rgba(163, 177, 198, .42), -4px -4px 14px rgba(255, 255, 255, .16);
    --st-topbar-shadow: 0 6px 16px rgba(15, 20, 25, .05);
    --md-font: var(--st-font);
    --md-primary: var(--st-primary);
    --md-primary-rgb: 29, 155, 240;
    --md-primary-hover: var(--st-primary-hover);
    --md-primary-container: var(--st-primary-soft);
    --md-on-primary: #ffffff;
    --md-secondary: var(--st-text-secondary);
    --md-secondary-hover: var(--st-text);
    --md-bg: var(--st-bg);
    --md-surface: var(--st-surface-solid);
    --md-surface-2: var(--st-surface-solid);
    --md-on-surface: var(--st-text);
    --md-on-surface-med: var(--st-text-secondary);
    --md-on-surface-dis: var(--st-text-muted);
    --md-outline: var(--st-border-strong);
    --md-divider: var(--st-border);
    --md-hover-overlay: var(--st-surface-hover);
    --md-selected-overlay: var(--st-primary-soft);
    --md-focus-ring: var(--st-focus-ring);
    --md-success: var(--st-success);
    --md-warning: var(--st-warning);
    --md-error: var(--st-danger);
    --md-info: var(--st-primary);
    --md-radius: var(--st-radius);
    --md-radius-lg: var(--st-radius-lg);
    --md-radius-pill: var(--st-radius-pill);
    --md-scrim: var(--st-overlay);
}

:root[data-theme="dark"] {
    --st-bg: #14171c;
    --st-surface: rgba(38, 42, 50, .78);
    --st-surface-solid: #262a32;
    --st-surface-soft: rgba(30, 34, 41, .6);
    --st-surface-hover: rgba(52, 58, 69, .8);
    --st-text: #e7e9ea;
    --st-text-secondary: #71767b;
    --st-text-muted: #8b98a5;
    --st-border: #2f3336;
    --st-border-strong: #536471;
    --st-primary: #1d9bf0;
    --st-primary-hover: #1a8cd8;
    --st-primary-soft: #061e2c;
    --st-primary-readable: #1d9bf0;
    --st-success: #00ba7c;
    --st-success-soft: #06251b;
    --st-warning: #f4a261;
    --st-warning-soft: #2b1b0c;
    --st-danger: #f4212e;
    --st-danger-soft: #2a090d;
    --st-overlay: rgba(91, 112, 131, .4);
    --st-overlay-shadow: 0 8px 32px rgba(0, 0, 0, .55);
    --st-bg-gradient: linear-gradient(90deg, #313947 0%, #14171c 100%);
    --st-glow-a: rgba(29, 155, 240, .18);
    --st-glow-b: rgba(147, 90, 246, .1);
    --st-glass-shadow: 6px 6px 16px rgba(0, 0, 0, .32), -6px -6px 16px rgba(255, 255, 255, .03);
    --st-glass-shadow-sm: 3px 3px 8px rgba(0, 0, 0, .3), -3px -3px 8px rgba(255, 255, 255, .02);
    --st-glass-shadow-inset: inset 3px 3px 6px rgba(0, 0, 0, .28), inset -3px -3px 6px rgba(255, 255, 255, .03);
    --st-glass-shadow-raised: 6px 6px 18px rgba(0, 0, 0, .34), -4px -4px 14px rgba(255, 255, 255, .02);
    --st-topbar-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}