/* ── Fund Brain Web Dashboard — V4 Liquid Glass ──────────────────────── */

/* ── Reset & Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: -apple-system, "SF Pro Display", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-font-smoothing: antialiased;
}

a { color: rgba(108, 180, 238, 0.9); text-decoration: none; }
a:hover { color: rgba(108, 180, 238, 1); }

/* ── CSS Variables ────────────────────────────────────────────────────── */
:root {
    color-scheme: dark;

    /* ── iOS dark material layers ── */
    --bg-base: #090b10;
    --bg-elevated: #151923;
    --bg-surface: #242a36;
    --bg-hover: #313948;
    --bg-card: rgba(31,37,49,0.70);
    --bg-card-hover: rgba(45,53,68,0.82);

    /* ── Glass 层级 ── */
    --glass-1: rgba(38,46,60,0.52);
    --glass-1-border: rgba(224,236,255,0.11);
    --glass-2: rgba(35,42,55,0.70);
    --glass-2-border: rgba(224,236,255,0.16);
    --glass-3: rgba(51,61,78,0.84);
    --glass-3-border: rgba(232,242,255,0.22);
    --glass-4: rgba(67,80,101,0.92);

    /* ── 边框 ── */
    --border-1: rgba(255,255,255,0.12);
    --border-2: rgba(255,255,255,0.10);
    --border-3: rgba(255,255,255,0.16);

    /* ── z-index 层级 ── */
    --z-nav: 100;
    --z-page-status: 99;
    --z-context-menu: 1000;
    --z-inbox: 998;
    --z-lock-screen: 9999;
    --z-update-banner: 10000;

    /* ── 文字(4级) ── */
    --text-primary: rgba(255,255,255,0.95);
    --text-secondary: rgba(255,255,255,0.70);
    --text-tertiary: rgba(255,255,255,0.45);
    --text-quaternary: rgba(255,255,255,0.25);
    --separator: rgba(255,255,255,0.08);

    /* ── Surface ── */
    --surface-0: rgba(255,255,255,0.04);
    --surface-1: rgba(255,255,255,0.07);
    --surface-2: rgba(255,255,255,0.10);
    --surface-3: rgba(255,255,255,0.14);

    /* ── 导航/侧边栏背景 ── */
    --nav-bg: rgba(17,21,30,0.72);
    --sidebar-bg: rgba(17,21,30,0.72);
    --bottom-nav-bg: rgba(34,41,55,0.76);
    --page-status-bg: rgba(34,41,55,0.74);
    --page-status-border: rgba(255,255,255,0.11);
    --page-status-highlight: rgba(255,255,255,0.08);
    --page-status-button-bg: rgba(255,255,255,0.045);
    --page-status-button-active: rgba(255,255,255,0.12);
    --page-status-button-edge: rgba(255,255,255,0.07);
    --page-status-button-focus: rgba(108,180,238,0.54);
    --page-status-rail-glow: color-mix(in srgb, var(--status-info) 28%, transparent);
    --lock-bg: #151923;
    --inbox-bg: rgba(24,30,42,0.82);
    --inbox-item-bg: rgba(72,84,106,0.38);
    --inbox-item-unread-bg: rgba(49,91,133,0.54);
    --inbox-item-border: rgba(210,228,255,0.16);
    --overlay-scrim: rgba(3,5,10,0.58);
    --overlay-surface: rgba(35,43,57,0.86);
    --reading-surface: rgba(22,28,39,0.82);
    --shadow-card: 0 1px 1px rgba(0,0,0,0.26), 0 12px 28px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.05);
    --shadow-card-hover: 0 2px 3px rgba(0,0,0,0.30), 0 20px 38px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.08);
    --shadow-overlay: 0 26px 64px rgba(0,0,0,0.54), 0 0 0 1px rgba(255,255,255,0.05);
    --glass-highlight: rgba(233,243,255,0.28);
    --glass-sheen: rgba(166,204,255,0.12);
    --glass-press: rgba(255,255,255,0.08);

    /* ── 通用白色层级(补充) ── */
    --white-12: rgba(255,255,255,0.12);
    --white-85: rgba(255,255,255,0.85);
    --white-92: rgba(255,255,255,0.92);

    /* ── 主强调色：冰蓝 ── */
    --accent: #6CB4EE;
    --accent-blue: rgba(108,180,238,0.9);
    --accent-dim: rgba(108,180,238,0.12);
    --accent-glow: rgba(108,180,238,0.25);

    /* ── 数据色 A股红涨绿跌 ── */
    --color-up: #FF5252;
    --color-down: #00E676;
    --up: var(--color-up);
    --up-dim: rgba(255,82,82,0.10);
    --down: var(--color-down);
    --down-dim: rgba(0,230,118,0.10);
    --red: var(--color-up);
    --green: var(--color-down);

    /* ── 语义色 ── */
    --orange: #FFB300;
    --orange-dim: rgba(255,179,0,0.10);
    --color-up-bg: rgba(255,82,82,0.12);
    --color-down-bg: rgba(0,230,118,0.12);
    --color-down-bg-subtle: rgba(0,230,118,0.06);
    --color-up-glow: rgba(255,82,82,0.45);
    --color-down-glow: rgba(0,230,118,0.45);
    --color-up-shadow: rgba(255,82,82,0.30);
    --color-down-shadow: rgba(0,230,118,0.30);
    --warn: #FFB300;
    --warn-dim: rgba(255,179,0,0.10);
    --danger: #FF1744;
    --danger-dim: rgba(255,23,68,0.10);
    --purple: #A78BFA;
    --purple-dim: rgba(167,139,250,0.10);
    --ai: #00E5FF;
    --ai-dim: rgba(0,229,255,0.10);

    /* ── 系统状态色 (状态灯专用, 避开红绿涨跌语义) ── */
    --status-info: #6CB4EE;
    --status-info-dim: rgba(108,180,238,0.12);
    --status-caution: #FFB300;
    --status-caution-dim: rgba(255,179,0,0.12);
    --status-blocked: #8E8E93;
    --status-blocked-dim: rgba(142,142,147,0.12);
    --status-anomaly: #A78BFA;
    --status-anomaly-dim: rgba(167,139,250,0.12);

    /* ── 背景色别名(前端JS引用) ── */
    --accent-bg: rgba(108,180,238,0.12);
    --accent-bg-lg: rgba(108,180,238,0.20);
    --green-bg: rgba(0,230,118,0.12);
    --red-bg: rgba(255,82,82,0.12);
    --purple-bg: rgba(167,139,250,0.12);
    --border-subtle: rgba(84,84,88,0.40);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --orange-bg: var(--orange-dim);

    /* ── Material highlights ── */
    --gradient-glass: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 44%);
    --gradient-accent: linear-gradient(135deg, #6CB4EE, #A78BFA);
    --gradient-ai: linear-gradient(135deg, #00E5FF, #6CB4EE, #A78BFA);

    /* ── 字体 ── */
    --font-sans: -apple-system, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-mono: "SF Mono", "JetBrains Mono", "Menlo", ui-monospace, monospace;

    /* ── 动画 ── */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --spring-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --motion-press: 120ms;
    --motion-surface: 220ms;

    /* ── 圆角 ── */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* ── 间距 ── */
    --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;

    /* ── Spacing aliases (→ --space-*) ── */
    --spacing-xs: var(--space-2);
    --spacing-sm: var(--space-3);
    --spacing-md: var(--space-4);
    --spacing-lg: var(--space-6);
    --spacing-xl: var(--space-8);

    /* ── Blur分级 ── */
    --blur-card: 20px;
    --blur-nav: 22px;
    --blur-overlay: 8px;
    --blur-modal: 24px;
}

/* ── Mobile: reduce blur for performance + prevent backdrop-filter clipping ── */
@media (max-width: 768px) {
    :root {
        --blur-card: 0px;
        --blur-nav: 6px;
        --blur-modal: 12px;
    }
}

/* ═══ Light Theme (V5) ══════════════════════════════════════════════ */
[data-theme="light"] {
    color-scheme: light;
    /* Light material layers: a cool neutral field under translucent white surfaces. */
    --bg-base: #e9edf3;
    --bg-elevated: #f4f7fb;
    --bg-surface: #dde4ed;
    --bg-hover: #d3dbe6;
    --bg-card: rgba(255,255,255,0.62);
    --bg-card-hover: rgba(255,255,255,0.78);

    /* Glass layers remain visibly translucent; fixed chrome and overlays are deeper. */
    --glass-1: rgba(255,255,255,0.48);
    --glass-1-border: rgba(255,255,255,0.76);
    --glass-2: rgba(255,255,255,0.64);
    --glass-2-border: rgba(255,255,255,0.84);
    --glass-3: rgba(250,253,255,0.78);
    --glass-3-border: rgba(255,255,255,0.92);
    --glass-4: rgba(250,253,255,0.90);

    /* 文字层 — 深色文字 */
    --text-primary: rgba(0, 0, 0, 0.90);
    --text-secondary: rgba(0, 0, 0, 0.65);
    --text-tertiary: rgba(0, 0, 0, 0.45);
    --text-quaternary: rgba(0, 0, 0, 0.25);

    /* 补充白色层级 → 亮色反转 */
    --white-12: rgba(0, 0, 0, 0.08);
    --white-85: rgba(0, 0, 0, 0.75);
    --white-92: rgba(0, 0, 0, 0.85);

    /* 强调色 — 稍深以保证对比度 */
    --accent: #3A8FD6;
    --accent-blue: rgba(58, 143, 214, 0.9);
    --accent-dim: rgba(58, 143, 214, 0.10);
    --accent-glow: rgba(58, 143, 214, 0.18);

    /* A股色 — 稍深以保证浅色背景可读 */
    --color-up: #E53935;
    --color-down: #00A854;
    --up-dim: rgba(229, 57, 53, 0.10);
    --down-dim: rgba(0, 168, 84, 0.10);
    --red: #E53935;
    --green: #00A854;

    /* 语义色 */
    --orange: #E68A00;
    --orange-dim: rgba(230, 138, 0, 0.10);
    --color-up-bg: rgba(229,57,53,0.12);
    --color-down-bg: rgba(0,168,84,0.12);
    --color-down-bg-subtle: rgba(0,168,84,0.06);
    --color-up-glow: rgba(229,57,53,0.40);
    --color-down-glow: rgba(0,168,84,0.40);
    --color-up-shadow: rgba(229,57,53,0.28);
    --color-down-shadow: rgba(0,168,84,0.28);
    --warn: #E68A00;
    --warn-dim: rgba(230, 138, 0, 0.10);
    --danger: #D50000;
    --danger-dim: rgba(213, 0, 0, 0.10);
    --purple: #7C4DFF;
    --purple-dim: rgba(124, 77, 255, 0.10);
    --ai: #00B8D4;
    --ai-dim: rgba(0, 184, 212, 0.10);

    /* 系统状态色 (亮色主题) */
    --status-info: #3A8FD6;
    --status-info-dim: rgba(58,143,214,0.12);
    --status-caution: #E68A00;
    --status-caution-dim: rgba(230,138,0,0.12);
    --status-blocked: #8E8E93;
    --status-blocked-dim: rgba(142,142,147,0.12);
    --status-anomaly: #7C4DFF;
    --status-anomaly-dim: rgba(124,77,255,0.12);

    /* ── 背景色别名(前端JS引用) ── */
    --accent-bg: rgba(58,143,214,0.10);
    --accent-bg-lg: rgba(58,143,214,0.18);
    --green-bg: rgba(0,168,84,0.10);
    --red-bg: rgba(229,57,53,0.10);
    --purple-bg: rgba(124,77,255,0.10);
    --border-subtle: rgba(0,0,0,0.08);

    /* Borders and surface shadows preserve edge definition without turning cards opaque. */
    --border-1: rgba(111,129,154,0.18);
    --border-2: rgba(111,129,154,0.24);
    --border-3: rgba(111,129,154,0.30);
    --separator: rgba(111,129,154,0.16);
    --surface-0: rgba(255,255,255,0.22);
    --surface-1: rgba(255,255,255,0.32);
    --surface-2: rgba(255,255,255,0.44);
    --surface-3: rgba(255,255,255,0.58);
    --shadow-card: 0 1px 1px rgba(70,86,108,0.04), 0 12px 28px rgba(70,86,108,0.12), inset 0 1px 0 rgba(255,255,255,0.60);
    --shadow-card-hover: 0 2px 3px rgba(70,86,108,0.06), 0 18px 36px rgba(70,86,108,0.16), inset 0 1px 0 rgba(255,255,255,0.70);
    --shadow-elevated: 0 16px 38px rgba(58,73,94,0.18);
    --shadow-overlay: 0 24px 58px rgba(45,57,76,0.22), 0 1px 0 rgba(255,255,255,0.72) inset;
    --shadow-sm: 0 2px 7px rgba(70,86,108,0.10);
    --orange-bg: var(--orange-dim);

    --nav-bg: rgba(247,250,255,0.68);
    --sidebar-bg: rgba(247,250,255,0.68);
    --bottom-nav-bg: rgba(248,251,255,0.74);
    --page-status-bg: rgba(248,251,255,0.70);
    --page-status-border: rgba(255,255,255,0.80);
    --page-status-highlight: rgba(255,255,255,0.88);
    --page-status-button-bg: rgba(255,255,255,0.42);
    --page-status-button-active: rgba(58,143,214,0.14);
    --page-status-button-edge: rgba(111,129,154,0.13);
    --page-status-button-focus: rgba(58,143,214,0.60);
    --page-status-rail-glow: rgba(58,143,214,0.20);
    --lock-bg: #e4e9f0;
    --inbox-bg: rgba(242,247,253,0.76);
    --inbox-item-bg: rgba(255,255,255,0.54);
    --inbox-item-unread-bg: rgba(231,244,255,0.72);
    --inbox-item-border: rgba(255,255,255,0.82);
    --overlay-scrim: rgba(43,55,72,0.26);
    --overlay-surface: rgba(247,251,255,0.82);
    --reading-surface: rgba(255,255,255,0.74);
    --glass-highlight: rgba(255,255,255,0.94);
    --glass-sheen: rgba(232,243,255,0.64);
    --glass-press: rgba(58,86,120,0.10);

    /* 渐变 */
    --gradient-glass: linear-gradient(145deg, rgba(255,255,255,0.58) 0%, rgba(238,247,255,0.18) 44%, transparent 100%);
}

[data-theme="light"] .inbox-panel-inner {
    background: linear-gradient(155deg, rgba(255,255,255,0.88) 0%, rgba(238,246,255,0.78) 46%, rgba(225,234,245,0.80) 100%);
    border-color: rgba(255,255,255,0.92);
    box-shadow: var(--shadow-overlay);
}
[data-theme="light"] .inbox-panel::after { background: var(--inbox-bg); }
[data-theme="light"] .inbox-header { border-bottom-color: rgba(126,145,169,0.16); }
[data-theme="light"] .inbox-msg {
    background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(240,247,255,0.48));
    border-color: rgba(255,255,255,0.88);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.94), 0 7px 18px rgba(78,96,120,0.12);
}
[data-theme="light"] .inbox-msg.unread {
    background: linear-gradient(145deg, rgba(249,253,255,0.88), rgba(211,234,255,0.72));
    border-color: rgba(162,207,246,0.66);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), 0 9px 22px rgba(71,119,166,0.15);
}
[data-theme="light"] .inbox-msg:active { background: rgba(226,238,251,0.86); }

/* ── Light Theme: body ── */
[data-theme="light"] body { background: var(--bg-base); color: var(--text-primary); }

/* ── Light Theme: environment glow ── */
[data-theme="light"] body::before { background: transparent; }

/* ── Light Theme: scrollbar ── */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
[data-theme="light"] ::-webkit-scrollbar-thumb:active { background: var(--accent); }

/* ── Light Theme: nav selection pill ── */
[data-theme="light"] 

/* ── Light Theme: glass shadow override ── */
[data-theme="light"] .glass { box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.72); }

/* ── Light Theme: button primary ── */
[data-theme="light"] .btn-primary {
    background: linear-gradient(135deg, #2979CC, #3A8FD6);
    color: #fff;
}
[data-theme="light"] .btn-primary:hover {
    box-shadow: 0 8px 20px rgba(58,143,214,0.25);
}

/* ── Light Theme: skeleton shimmer ── */
[data-theme="light"] .skeleton {
    background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 75%);
}

/* ── Quiet background: material surfaces provide depth, not ambient decoration. ── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: transparent;
}

@media (prefers-reduced-transparency: reduce) {
    :root {
        --glass-1: #2c2c2e;
        --glass-2: #2c2c2e;
        --glass-3: #3a3a3c;
        --nav-bg: #1c1c1e;
        --bottom-nav-bg: #2c2c2e;
        --page-status-bg: #2c2c2e;
        --glass-highlight: transparent;
        --glass-sheen: transparent;
    }
    [data-theme="light"] {
        --glass-1: #ffffff;
        --glass-2: #ffffff;
        --glass-3: #ffffff;
        --nav-bg: #ffffff;
        --bottom-nav-bg: #ffffff;
        --page-status-bg: #ffffff;
        --glass-highlight: transparent;
        --glass-sheen: transparent;
    }
}

/* ── Select dropdown dark mode ── */
select option {
    background: var(--surface-1, #1a1a2e);
    color: var(--text-primary, #e0e0e0);
}