* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --text-h1: 1.75rem;
    --text-h2: 1.25rem;
    --text-h3: 1.0625rem;
    --text-body: 0.9375rem;
    /* 主区内页面宽度：限宽页用 max-width + margin:auto；通栏页 width:100% + min-width:0 */
    --page-max-wide: 1600px;
    --page-max-content: 1200px;
    --page-max-form: 900px;
    --section-gap: 28px;

    color-scheme: light;
    /* SPA 全局主题令牌（由 html 上 data-spa-theme / data-spa-eye / data-spa-accent 驱动） */
    --spa-bg-body: #f5f7fb;
    --spa-bg-sidebar: #ffffff;
    --spa-bg-surface: #ffffff;
    --spa-bg-muted: #f8fafc;
    --spa-bg-user-card: #fafcff;
    --spa-text: #0f172a;
    --spa-text-secondary: #475569;
    --spa-text-muted: #64748b;
    --spa-border: #e2e8f0;
    --spa-border-soft: #f1f5f9;
    --spa-border-sidebar: #eef2f6;
    --spa-nav-text: #475569;
    --spa-nav-hover-bg: #f8fafc;
    --spa-nav-hover-text: #1e293b;
    --spa-accent: #4f46e5;
    --spa-nav-active-bg: #f1f4ff;
    --spa-nav-active-ring: rgba(79, 70, 229, 0.08);
    --spa-shadow-sidebar: 0 0 0 1px rgba(0, 0, 0, 0.01), 4px 0 12px rgba(0, 0, 0, 0.02);
    --spa-user-border: #edf2f7;
    --spa-placeholder-muted: #475569;
    --spa-logo-grad-from: #1e293b;
    --spa-logo-grad-to: #4f46e5;
    /* 实心主按钮 / 侧栏 logo：与设置页「保存所有更改」同系渐变 + 白字 + 阴影（随 data-spa-accent） */
    --spa-btn-primary-bg: linear-gradient(135deg, #6366f1, #8b5cf6);
    --spa-btn-primary-shadow: 0 4px 10px rgba(99, 102, 241, 0.2);
    --spa-btn-primary-shadow-hover: 0 6px 14px rgba(99, 102, 241, 0.25);
    --spa-btn-primary-logo-glow: 0 6px 12px -6px rgba(99, 102, 241, 0.3);
}

html {
    font-family: var(--font-sans);
    font-feature-settings: "tnum" 1;
}

/* 字体大小：根字号影响 rem 阶梯（与 data-spa-font 同步） */
html[data-spa-font="compact"] {
    font-size: 14px;
}

html[data-spa-font="standard"] {
    font-size: 16px;
}

html[data-spa-font="comfortable"] {
    font-size: 17px;
}

html[data-spa-font="large"] {
    font-size: 18px;
}

/* 圆角强度：侧栏用户卡片等（与 data-spa-radius 同步） */
html[data-spa-radius="sharp"] {
    --spa-radius-user-card: 10px;
}

html[data-spa-radius="medium"] {
    --spa-radius-user-card: 18px;
}

html[data-spa-radius="round"] {
    --spa-radius-user-card: 24px;
}

body {
    font-family: var(--font-sans);
    font-feature-settings: "tnum" 1;
    font-size: var(--text-body);
    background: var(--spa-bg-body);
    color: var(--spa-text);
    min-height: 100vh;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.spa-shell {
    min-height: 100vh;
    display: flex;
}

.spa-shell > .sidebar {
    align-self: flex-start;
}

.spa-main-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 28px;
    display: flex;
    flex-direction: column;
}

.spa-guest-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: var(--spa-radius-md, 10px);
    border: 1px solid color-mix(in srgb, var(--spa-accent, #7c3aed) 28%, transparent);
    background: color-mix(in srgb, var(--spa-accent, #7c3aed) 8%, var(--spa-surface, #fff));
    color: var(--spa-text, #1e293b);
    font-size: 0.875rem;
    line-height: 1.45;
}

.spa-guest-banner__ico {
    font-size: 1.125rem;
    color: var(--spa-accent, #7c3aed);
    flex-shrink: 0;
    margin-top: 1px;
}

.spa-guest-banner__text {
    flex: 1;
    min-width: 0;
}

/* 路由出口：保证子页面 flex 链不断，过渡期间高度稳定 */
.spa-router-view-wrap {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* 主区内页面切换：先出后进，轻位移 + 透明度 */
.spa-page-enter-active,
.spa-page-leave-active {
    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}

.spa-page-enter-from {
    opacity: 0;
    transform: translateY(10px);
}

.spa-page-leave-to {
    opacity: 0;
    transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
    .spa-page-enter-active,
    .spa-page-leave-active {
        transition: none;
    }

    .spa-page-enter-from,
    .spa-page-leave-to {
        opacity: 1;
        transform: none;
    }
}

.placeholder-card {
    background: var(--spa-bg-surface);
    border: 1px solid var(--spa-border);
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.placeholder-card h1 {
    font-size: var(--text-h2);
    margin-bottom: 10px;
}

.placeholder-card p {
    color: var(--spa-placeholder-muted);
    line-height: 1.6;
    margin-bottom: 8px;
}

/* 主区内容统一外框：各视图根节点加 interest-container + finance-page-root；勿在同一根上写 max-width:none 以免覆盖本变量 */
.interest-container {
    width: 100%;
    min-width: 0;
    position: relative;
}

.finance-page-root {
    width: 100%;
    max-width: var(--page-max-wide, 1600px);
    margin: 0 auto;
    position: relative;
    min-width: 0;
}

/* —— 强调色（与 data-spa-accent 同步） —— */
[data-spa-accent="purple"] {
    --spa-accent: #4f46e5;
    --spa-nav-active-bg: #f1f4ff;
    --spa-nav-active-ring: rgba(79, 70, 229, 0.08);
    --spa-logo-grad-to: #4f46e5;
    --spa-btn-primary-bg: linear-gradient(135deg, #6366f1, #8b5cf6);
    --spa-btn-primary-shadow: 0 4px 10px rgba(99, 102, 241, 0.2);
    --spa-btn-primary-shadow-hover: 0 6px 14px rgba(99, 102, 241, 0.25);
    --spa-btn-primary-logo-glow: 0 6px 12px -6px rgba(99, 102, 241, 0.3);
}

[data-spa-accent="indigo"] {
    --spa-accent: #4338ca;
    --spa-nav-active-bg: #eef2ff;
    --spa-nav-active-ring: rgba(67, 56, 202, 0.1);
    --spa-logo-grad-to: #4338ca;
    --spa-btn-primary-bg: linear-gradient(135deg, #4f46e5, #6366f1);
    --spa-btn-primary-shadow: 0 4px 10px rgba(79, 70, 229, 0.22);
    --spa-btn-primary-shadow-hover: 0 6px 14px rgba(79, 70, 229, 0.28);
    --spa-btn-primary-logo-glow: 0 6px 12px -6px rgba(79, 70, 229, 0.32);
}

[data-spa-accent="blue"] {
    --spa-accent: #2563eb;
    --spa-nav-active-bg: rgba(37, 99, 235, 0.1);
    --spa-nav-active-ring: rgba(37, 99, 235, 0.12);
    --spa-logo-grad-to: #2563eb;
    --spa-btn-primary-bg: linear-gradient(135deg, #3b82f6, #06b6d4);
    --spa-btn-primary-shadow: 0 4px 10px rgba(59, 130, 246, 0.25);
    --spa-btn-primary-shadow-hover: 0 6px 14px rgba(59, 130, 246, 0.28);
    --spa-btn-primary-logo-glow: 0 6px 12px -6px rgba(59, 130, 246, 0.32);
}

[data-spa-accent="green"] {
    --spa-accent: #059669;
    --spa-nav-active-bg: rgba(5, 150, 105, 0.1);
    --spa-nav-active-ring: rgba(5, 150, 105, 0.12);
    --spa-logo-grad-to: #059669;
    --spa-btn-primary-bg: linear-gradient(135deg, #10b981, #34d399);
    --spa-btn-primary-shadow: 0 4px 10px rgba(16, 185, 129, 0.25);
    --spa-btn-primary-shadow-hover: 0 6px 14px rgba(16, 185, 129, 0.28);
    --spa-btn-primary-logo-glow: 0 6px 12px -6px rgba(16, 185, 129, 0.32);
}

[data-spa-accent="orange"] {
    --spa-accent: #d97706;
    --spa-nav-active-bg: rgba(217, 119, 6, 0.1);
    --spa-nav-active-ring: rgba(217, 119, 6, 0.12);
    --spa-logo-grad-to: #d97706;
    --spa-btn-primary-bg: linear-gradient(135deg, #f59e0b, #fbbf24);
    --spa-btn-primary-shadow: 0 4px 10px rgba(245, 158, 11, 0.25);
    --spa-btn-primary-shadow-hover: 0 6px 14px rgba(245, 158, 11, 0.28);
    --spa-btn-primary-logo-glow: 0 6px 12px -6px rgba(245, 158, 11, 0.32);
}

[data-spa-accent="red"] {
    --spa-accent: #dc2626;
    --spa-nav-active-bg: rgba(220, 38, 38, 0.1);
    --spa-nav-active-ring: rgba(220, 38, 38, 0.12);
    --spa-logo-grad-to: #dc2626;
    --spa-btn-primary-bg: linear-gradient(135deg, #ef4444, #f87171);
    --spa-btn-primary-shadow: 0 4px 10px rgba(239, 68, 68, 0.25);
    --spa-btn-primary-shadow-hover: 0 6px 14px rgba(239, 68, 68, 0.28);
    --spa-btn-primary-logo-glow: 0 6px 12px -6px rgba(239, 68, 68, 0.32);
}

/* —— 明亮 —— */
[data-spa-theme="light"] {
    color-scheme: light;
    --spa-bg-body: #f5f7fb;
    --spa-bg-sidebar: #ffffff;
    --spa-bg-surface: #ffffff;
    --spa-bg-muted: #f8fafc;
    --spa-bg-user-card: #fafcff;
    --spa-text: #0f172a;
    --spa-text-secondary: #475569;
    --spa-text-muted: #64748b;
    --spa-border: #e2e8f0;
    --spa-border-soft: #f1f5f9;
    --spa-border-sidebar: #eef2f6;
    --spa-nav-text: #475569;
    --spa-nav-hover-bg: #f8fafc;
    --spa-nav-hover-text: #1e293b;
    --spa-shadow-sidebar: 0 0 0 1px rgba(0, 0, 0, 0.01), 4px 0 12px rgba(0, 0, 0, 0.02);
    --spa-user-border: #edf2f7;
    --spa-placeholder-muted: #475569;
    --spa-logo-grad-from: #1e293b;
}

/* —— 暗黑 —— */
[data-spa-theme="dark"] {
    color-scheme: dark;
    --spa-bg-body: #0f172a;
    --spa-bg-sidebar: #1e293b;
    --spa-bg-surface: #1e293b;
    --spa-bg-muted: #334155;
    --spa-bg-user-card: #273449;
    --spa-text: #f1f5f9;
    --spa-text-secondary: #cbd5e1;
    --spa-text-muted: #94a3b8;
    --spa-border: #334155;
    --spa-border-soft: #1e293b;
    --spa-border-sidebar: #334155;
    --spa-nav-text: #cbd5e1;
    --spa-nav-hover-bg: #334155;
    --spa-nav-hover-text: #f8fafc;
    --spa-shadow-sidebar: 0 0 0 1px rgba(255, 255, 255, 0.04), 4px 0 16px rgba(0, 0, 0, 0.25);
    --spa-user-border: #334155;
    --spa-placeholder-muted: #94a3b8;
    --spa-logo-grad-from: #e2e8f0;
}

/* —— 跟随系统：亮 —— */
@media (prefers-color-scheme: light) {
    [data-spa-theme="auto"] {
        color-scheme: light;
        --spa-bg-body: #f5f7fb;
        --spa-bg-sidebar: #ffffff;
        --spa-bg-surface: #ffffff;
        --spa-bg-muted: #f8fafc;
        --spa-bg-user-card: #fafcff;
        --spa-text: #0f172a;
        --spa-text-secondary: #475569;
        --spa-text-muted: #64748b;
        --spa-border: #e2e8f0;
        --spa-border-soft: #f1f5f9;
        --spa-border-sidebar: #eef2f6;
        --spa-nav-text: #475569;
        --spa-nav-hover-bg: #f8fafc;
        --spa-nav-hover-text: #1e293b;
        --spa-shadow-sidebar: 0 0 0 1px rgba(0, 0, 0, 0.01), 4px 0 12px rgba(0, 0, 0, 0.02);
        --spa-user-border: #edf2f7;
        --spa-placeholder-muted: #475569;
        --spa-logo-grad-from: #1e293b;
    }
}

/* —— 跟随系统：暗 —— */
@media (prefers-color-scheme: dark) {
    [data-spa-theme="auto"] {
        color-scheme: dark;
        --spa-bg-body: #0f172a;
        --spa-bg-sidebar: #1e293b;
        --spa-bg-surface: #1e293b;
        --spa-bg-muted: #334155;
        --spa-bg-user-card: #273449;
        --spa-text: #f1f5f9;
        --spa-text-secondary: #cbd5e1;
        --spa-text-muted: #94a3b8;
        --spa-border: #334155;
        --spa-border-soft: #1e293b;
        --spa-border-sidebar: #334155;
        --spa-nav-text: #cbd5e1;
        --spa-nav-hover-bg: #334155;
        --spa-nav-hover-text: #f8fafc;
        --spa-shadow-sidebar: 0 0 0 1px rgba(255, 255, 255, 0.04), 4px 0 16px rgba(0, 0, 0, 0.25);
        --spa-user-border: #334155;
        --spa-placeholder-muted: #94a3b8;
        --spa-logo-grad-from: #e2e8f0;
    }
}

/* —— 护眼：暖色（叠在明亮上） —— */
[data-spa-theme="light"][data-spa-eye="on"] {
    --spa-bg-body: #f0ebe3;
    --spa-bg-sidebar: #faf7f0;
    --spa-bg-surface: #faf7f0;
    --spa-bg-muted: #f3eee6;
    --spa-bg-user-card: #f5f0e8;
    --spa-text: #2c2824;
    --spa-text-secondary: #575049;
    --spa-text-muted: #6b6560;
    --spa-border: #ddd6cb;
    --spa-border-soft: #ebe4d8;
    --spa-border-sidebar: #e8e2d6;
    --spa-nav-text: #575049;
    --spa-nav-hover-bg: #ebe4d8;
    --spa-nav-hover-text: #2c2824;
    --spa-user-border: #e0d9ce;
    --spa-placeholder-muted: #575049;
    --spa-logo-grad-from: #3d3832;
}

/* —— 护眼：暖色（叠在暗黑上） —— */
[data-spa-theme="dark"][data-spa-eye="on"] {
    --spa-bg-body: #1a1714;
    --spa-bg-sidebar: #25201c;
    --spa-bg-surface: #25201c;
    --spa-bg-muted: #3a342f;
    --spa-bg-user-card: #2f2924;
    --spa-text: #ece8e4;
    --spa-text-secondary: #c4bbb3;
    --spa-text-muted: #a39a92;
    --spa-border: #3d3832;
    --spa-border-soft: #2a2622;
    --spa-border-sidebar: #3d3832;
    --spa-nav-text: #c4bbb3;
    --spa-nav-hover-bg: #3a342f;
    --spa-nav-hover-text: #faf7f2;
    --spa-user-border: #3d3832;
    --spa-placeholder-muted: #a39a92;
    --spa-logo-grad-from: #ece8e4;
}

@media (prefers-color-scheme: light) {
    [data-spa-theme="auto"][data-spa-eye="on"] {
        --spa-bg-body: #f0ebe3;
        --spa-bg-sidebar: #faf7f0;
        --spa-bg-surface: #faf7f0;
        --spa-bg-muted: #f3eee6;
        --spa-bg-user-card: #f5f0e8;
        --spa-text: #2c2824;
        --spa-text-secondary: #575049;
        --spa-text-muted: #6b6560;
        --spa-border: #ddd6cb;
        --spa-border-soft: #ebe4d8;
        --spa-border-sidebar: #e8e2d6;
        --spa-nav-text: #575049;
        --spa-nav-hover-bg: #ebe4d8;
        --spa-nav-hover-text: #2c2824;
        --spa-user-border: #e0d9ce;
        --spa-placeholder-muted: #575049;
        --spa-logo-grad-from: #3d3832;
    }
}

@media (prefers-color-scheme: dark) {
    [data-spa-theme="auto"][data-spa-eye="on"] {
        --spa-bg-body: #1a1714;
        --spa-bg-sidebar: #25201c;
        --spa-bg-surface: #25201c;
        --spa-bg-muted: #3a342f;
        --spa-bg-user-card: #2f2924;
        --spa-text: #ece8e4;
        --spa-text-secondary: #c4bbb3;
        --spa-text-muted: #a39a92;
        --spa-border: #3d3832;
        --spa-border-soft: #2a2622;
        --spa-border-sidebar: #3d3832;
        --spa-nav-text: #c4bbb3;
        --spa-nav-hover-bg: #3a342f;
        --spa-nav-hover-text: #faf7f2;
        --spa-user-border: #3d3832;
        --spa-placeholder-muted: #a39a92;
        --spa-logo-grad-from: #ece8e4;
    }
}