/* ==========================================================================
   全局主题引擎 (Global Theme Engine)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 专业暗黑版 (Professional Dark) - 默认主题
   -------------------------------------------------------------------------- */
:root {
    /* 背景色 */
    --bg-main: #1a1e2b;        /* 与K线图页面统一的深蓝灰底 */
    --bg-panel: #222639;       /* 主面板背景 */
    --bg-header: #2c3148;      /* 表头、顶部工具栏背景 */
    --bg-hover: #353b55;       /* 列表行悬停色 */
    --bg-active: #2a3a5c;      /* 列表行选中色 */

    /* 边框与分割线 (1px 立体边界) */
    --border-color: #2e3450;
    --border-light: #353b55;   /* 用于按钮的高光边框 */
    --border-dark: #1a1e2b;    /* 用于阴影或凹陷边框 */

    /* 文本色 */
    --text-primary: #c5c9d6;   /* 主文本，亮灰 */
    --text-secondary: #9ca0b0; /* 次要文本，如表头、单位 */
    --text-muted: #6b6f82;     /* 极暗文本，如禁用状态 */

    /* 涨跌色 (高纯度视觉冲击) */
    --color-up: #f23645;       /* 涨 - 红色 */
    --color-up-bg: rgba(242, 54, 69, 0.15); /* 涨背景 - 用于 Badge */
    --color-down: #089981;     /* 跌 - 绿色 */
    --color-down-bg: rgba(8, 153, 129, 0.15); /* 跌背景 */
    --color-neutral: #b2b5be;  /* 平 - 灰色 */

    /* 品牌色/强调色 (用于主按钮、Active 状态) */
    --color-brand: #2962ff;
    --color-brand-hover: #1e53e5;
    
    /* 控件立体感参数 */
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.28); /* 按下时的凹陷阴影 */
    --btn-gradient: linear-gradient(180deg, #353b55 0%, #2c3148 100%); /* 按钮微渐变 */
    --btn-gradient-hover: linear-gradient(180deg, #404765 0%, #353b55 100%);
}

/* --------------------------------------------------------------------------
   2. 经典亮色版 (Classic Light)
   -------------------------------------------------------------------------- */
body.theme-light {
    /* 背景色 */
    --bg-main: #ffffff;        /* 最底层背景，纯白 */
    --bg-panel: #ffffff;       /* 面板背景，纯白 */
    --bg-header: #f1f3f6;      /* 表头、顶部工具栏背景，微灰 */
    --bg-hover: #f1f3f6;       /* 列表行悬停色 */
    --bg-active: #e0e3eb;      /* 列表行选中色 */

    /* 边框与分割线 */
    --border-color: #e0e3eb;
    --border-light: #ffffff;
    --border-dark: #c5cbce;

    /* 文本色 */
    --text-primary: #131722;   /* 主文本，深黑 */
    --text-secondary: #787b86; /* 次要文本 */
    --text-muted: #999999;

    /* 涨跌色 (稍微调整亮度适应白底) */
    --color-up: #ef5350;
    --color-up-bg: rgba(239, 83, 80, 0.15);
    --color-down: #26a69a;
    --color-down-bg: rgba(38, 166, 154, 0.15);
    --color-neutral: #787b86;

    /* 控件立体感参数 */
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    --btn-gradient: linear-gradient(180deg, #ffffff 0%, #f1f3f6 100%);
    --btn-gradient-hover: linear-gradient(180deg, #ffffff 0%, #e0e3eb 100%);
}

/* --------------------------------------------------------------------------
   3. 全局重置与基础立体感样式
   -------------------------------------------------------------------------- */
body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden; /* 防止出现原生粗大滚动条 */
    font-size: 13px;  /* 桌面级高信息密度字体 */
}

/* 桌面级细长滚动条重写 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-secondary);
}

/* 基础面板立体感 */
.panel {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* 立体按钮通用样式 */
.btn-stereoscopic {
    background: var(--btn-gradient);
    border: 1px solid var(--border-color);
    border-top-color: var(--border-light); /* 顶部高光边界 */
    border-bottom-color: var(--border-dark); /* 底部暗色边界 */
    color: var(--text-primary);
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    outline: none;
    transition: all 0.1s ease;
}

.btn-stereoscopic:hover {
    background: var(--btn-gradient-hover);
}

.btn-stereoscopic:active, .btn-stereoscopic.active {
    background: var(--bg-active);
    box-shadow: var(--shadow-inset); /* 按下凹陷感 */
    border-top-color: var(--border-dark);
    border-bottom-color: var(--border-light);
}