/* ============================================================
 * DateData 股票分析页公共调色板（v2.2 铜色 Light ↔ 金融终端深色）
 * 默认：浅色铜色系暖米底（JS 初始化 data-theme="light"）
 * 深色：金融终端深蓝黑（data-theme="dark"）
 * 持久化：localStorage.stock-theme-v2
 * 入口：所有 a/ etf/ us/ us_etf/ hk/ reits 模板头部 <link> 引入
 * ============================================================ */

/* ============================================================
 * ① 默认：浅色铜色系 — :root fallback
 * 无 JS / JS 未初始化时也显示浅色，避免闪黑 FOUC
 * ============================================================ */
:root {
    /* —— 页面层叠深度 —— */
    --bg:             #f5f0eb;                 /* 暖米底 */
    --bg-card:        #ffffff;                 /* 白色卡片 */
    --bg-head:        #f1f5fa;                 /* 浅蓝表头 */
    --bg-input:       #ffffff;                 /* 白色表单 */
    --bg-stripe:      rgba(0,0,0,.02);

    /* —— 文字三档 —— */
    --text:           #333333;
    --text-muted:     #6c757d;
    --text-dim:       #adb5bd;

    /* —— 主题 —— */
    --accent:         #b87333;                 /* 铜色 */
    --accent-hover:   #9c6228;
    --accent-light:   rgba(184,115,51,.12);
    --accent-text:    #ffffff;

    /* —— 边框 —— */
    --border:         #e0d8ce;
    --border-strong:  #d5c8bb;

    /* —— 涨跌色（标准 A 股红涨绿跌）—— */
    --up:             #dc3545;
    --dn:             #28a745;
    --flat:           #6c757d;

    /* —— 状态辅助 —— */
    --warn:           #ff8f00;
    --info:           #1976d2;

    /* —— 通用 —— */
    --card-radius:    8px;
    --shadow:         0 2px 10px rgba(0,0,0,.04);

    /* —— Nav 专用变量（浅色）—— */
    --nav-bg:              #ffffff;
    --nav-border:          1px solid #e0d8ce;
    --nav-shadow:          0 2px 10px rgba(0,0,0,.04);
    --nav-radius:          10px;
    --nav-tab-color:       #6c757d;
    --nav-tab-hover-bg:    rgba(184,115,51,.08);
    --nav-tab-hover-color: #b87333;
    --nav-tab-active-bg:   rgba(184,115,51,.10);
    --nav-tab-active-color:#b87333;
    --nav-tab-bar:         linear-gradient(90deg,#b87333,rgba(184,115,51,.2));
    --nav-dropdown-bg:     #ffffff;
    --nav-dropdown-border: 1px solid #e0d8ce;
    --nav-dropdown-shadow: 0 12px 32px rgba(0,0,0,.10);
    --nav-sub-title:       #b87333;
    --nav-link-color:      #495057;
    --nav-link-hover-bg:   rgba(184,115,51,.10);
    --nav-link-hover-color:#b87333;
    --nav-brand-color:     #b87333;
    --nav-brand-bg:        rgba(184,115,51,.12);
    --nav-toggle-bg:        rgba(0,0,0,.05);
    --nav-toggle-hover-bg:  rgba(0,0,0,.10);
    --nav-toggle-color:     #495057;

    /* —— 组件色（Light）—— */
    --bar-blue-1:  rgba(13,110,253,.15);
    --bar-blue-2:  rgba(13,110,253,.25);
    --bar-blue-r:  rgba(13,110,253,.30);
    --bar-red-1:   rgba(224,49,49,.08);
    --bar-red-2:   rgba(224,49,49,.18);
    --bar-red-r:   rgba(224,49,49,.25);
    --bar-up-1:    rgba(224,49,49,.10);
    --bar-up-2:    rgba(224,49,49,.30);
    --bar-up-r:    rgba(224,49,49,.35);
    --bar-dn-1:    rgba(12,166,120,.10);
    --bar-dn-2:    rgba(12,166,120,.30);
    --bar-dn-r:    rgba(12,166,120,.35);

    /* —— ECharts 主题色（亮色）—— */
    --chart-bg:            transparent;
    --chart-text:          #6c757d;
    --chart-axis-line:     #e0d8ce;
    --chart-axis-label:    #888888;
    --chart-grid-line:     #f0ebe5;
    --chart-tooltip-bg:    #ffffff;
    --chart-tooltip-border:#e0d8ce;
    --chart-tooltip-text:  #333333;
    --chart-accent:        #b87333;
}

/* ============================================================
 * ①-深：金融终端深色 — [data-theme="dark"] 覆盖
 * JS 初始化 data-theme="dark" 时才应用
 * ============================================================ */
[data-theme="dark"] {
    /* —— 页面层叠深度 —— */
    --bg:             #0b1220;                 /* L0 页面底 */
    --bg-card:        #151f30;                 /* L1 卡片底 */
    --bg-head:        #1c2738;                 /* L2 表头/分组底 */
    --bg-input:       #1a2636;                 /* L3 表单控件底 */
    --bg-stripe:      rgba(255,255,255,.02);   /* 斑马条/hover 极淡 */

    /* —— 文字三档 —— */
    --text:           #e4e9f1;                 /* T0 主文字（软白） */
    --text-muted:     #8b9bad;                 /* T1 次要文字 */
    --text-dim:       #5e6d82;                 /* T2 弱化文字 */

    /* —— 主题 —— */
    --accent:         #d4a853;                 /* 金色（与 nav 统一） */
    --accent-hover:   #e8b86a;
    --accent-light:   rgba(212,168,83,.15);
    --accent-text:    #1a1a1a;                 /* 金色按钮上的文字（深灰） */

    /* —— 边框 —— */
    --border:         rgba(255,255,255,.06);   /* L4 极淡 */
    --border-strong:  rgba(255,255,255,.10);   /* L5 强调 */

    /* —— 涨跌色（暗底需更亮）—— */
    --up:             #ec5e5e;                 /* A股红涨 */
    --dn:             #32c890;                 /* A股绿跌 */
    --flat:           #7c8a9d;                 /* 平盘中性 */

    /* —— 状态辅助 —— */
    --warn:           #ffb84d;
    --info:           #60a5fa;

    /* —— 通用 —— */
    --card-radius:    8px;
    --shadow:         0 2px 12px rgba(0,0,0,.45);

    /* —— Nav 专用变量 —— */
    --nav-bg:              linear-gradient(90deg,#0f2027,#1e3a5f);
    --nav-border:          none;
    --nav-shadow:          0 2px 12px rgba(15,32,39,.35);
    --nav-radius:          10px;
    --nav-tab-color:       rgba(232,236,241,.72);
    --nav-tab-hover-bg:    rgba(255,255,255,.06);
    --nav-tab-hover-color: #ffffff;
    --nav-tab-active-bg:   rgba(212,168,83,.10);
    --nav-tab-active-color:#d4a853;
    --nav-tab-bar:         linear-gradient(90deg,#d4a853,rgba(212,168,83,.2));
    --nav-dropdown-bg:     #1a2634;
    --nav-dropdown-border: 1px solid rgba(255,255,255,.08);
    --nav-dropdown-shadow: 0 12px 32px rgba(0,0,0,.45);
    --nav-sub-title:       #d4a853;
    --nav-link-color:      rgba(232,236,241,.82);
    --nav-link-hover-bg:   rgba(212,168,83,.10);
    --nav-link-hover-color:#d4a853;
    --nav-brand-color:     #d4a853;
    --nav-brand-bg:        rgba(212,168,83,.12);
    --nav-toggle-bg:        rgba(255,255,255,.08);
    --nav-toggle-hover-bg: rgba(255,255,255,.15);
    --nav-toggle-color:     rgba(232,236,241,.82);

    /* —— 组件色（金融终端深色专用）—— */
    --bar-blue-1:  rgba(96,165,250,.20);
    --bar-blue-2:  rgba(96,165,250,.35);
    --bar-blue-r:  rgba(96,165,250,.45);
    --bar-red-1:   rgba(236,94,94,.15);
    --bar-red-2:   rgba(236,94,94,.30);
    --bar-red-r:   rgba(236,94,94,.40);
    --bar-up-1:    rgba(236,94,94,.18);
    --bar-up-2:    rgba(236,94,94,.45);
    --bar-up-r:    rgba(236,94,94,.50);
    --bar-dn-1:    rgba(50,200,144,.18);
    --bar-dn-2:    rgba(50,200,144,.45);
    --bar-dn-r:    rgba(50,200,144,.50);

    /* —— ECharts 主题色（暗色）—— */
    --chart-bg:            transparent;
    --chart-text:          #8b9bad;
    --chart-axis-line:     rgba(255,255,255,.12);
    --chart-axis-label:    #5e6d82;
    --chart-grid-line:     rgba(255,255,255,.06);
    --chart-tooltip-bg:    #1a2634;
    --chart-tooltip-border: rgba(255,255,255,.08);
    --chart-tooltip-text:  #e4e9f1;
    --chart-accent:        #d4a853;
}

/* ============================================================
 * ①-补：[data-theme="dark"] 全局元素强制覆盖（!important）
 * 解决模板内联硬编码 color:#333 在深色背景上看不清的问题
 * 优先级高于模板 style 块和 Bootstrap 默认样式
 * ============================================================ */
[data-theme="dark"] body {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}
[data-theme="dark"] body *:not(.header-nav):not(.header-nav *) {
    /* 非 nav 区域的通用文字色兜底 */
    color: inherit;
}
/* —— 表单控件 —— */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    color: var(--text) !important;
    background: var(--bg-input) !important;
    border-color: var(--border-strong) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-dim) !important;
    opacity: 1;
}
/* —— 表格 —— */
[data-theme="dark"] table,
[data-theme="dark"] .data-table {
    color: var(--text) !important;
}
[data-theme="dark"] th:not([style*="background"]):not([style*="color"]),
[data-theme="dark"] thead th:not([style*="background"]):not([style*="color"]) {
    color: var(--text-muted) !important;
    background: var(--bg-head) !important;
}
[data-theme="dark"] td:not([style*="background"]):not([style*="color"]):not(.num-up):not(.num-dn):not(.num-warn):not(.num-flat):not(.num-info):not(.num-muted) {
    color: var(--text) !important;
    background: transparent !important;
}
[data-theme="dark"] .data-table tr:hover td:not([style*="background"]),
[data-theme="dark"] table tr:hover td:not([style*="background"]) {
    background: var(--bg-stripe) !important;
}
/* —— 卡片容器 —— */
[data-theme="dark"] .card,
[data-theme="dark"] .filter-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .table-card {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* ============================================================
 * 主题切换按钮 .theme-toggle（深浅两套样式）
 * ============================================================ */
/* 浅色模式下：深色按钮，透明底 */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-strong, #d5c8bb);
    background: transparent;
    color: var(--text-muted, #6c757d);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    transition: background .15s, color .15s;
    text-decoration: none;
    box-sizing: border-box;
}
.theme-toggle:hover {
    background: var(--accent-light, rgba(184,115,51,.08));
    color: var(--accent, #b87333);
}
/* 深色模式下：浅金色按钮，透明底 */
[data-theme="dark"] .theme-toggle {
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: var(--nav-tab-color, rgba(232,236,241,.72));
}
[data-theme="dark"] .theme-toggle:hover {
    background: rgba(255,255,255,.10);
    color: var(--accent, #d4a853);
}


/* ============================================================
 * ② 浅色：铜色系 Light（原铜色系暖米底）
 * ============================================================ */
[data-theme="light"] {
    /* —— 页面层叠深度 —— */
    --bg:             #f5f0eb;                 /* 暖米底 */
    --bg-card:        #ffffff;                 /* 白色卡片 */
    --bg-head:        #f1f5fa;                 /* 浅蓝表头 */
    --bg-input:       #ffffff;                 /* 白色表单 */
    --bg-stripe:      rgba(0,0,0,.02);

    /* —— 文字三档 —— */
    --text:           #333333;
    --text-muted:     #6c757d;
    --text-dim:       #adb5bd;

    /* —— 主题 —— */
    --accent:         #b87333;                 /* 铜色 */
    --accent-hover:   #9c6228;
    --accent-light:   rgba(184,115,51,.12);
    --accent-text:    #ffffff;

    /* —— 边框 —— */
    --border:         #e0d8ce;
    --border-strong:  #d5c8bb;

    /* —— 涨跌色（标准 A 股红涨绿跌）—— */
    --up:             #dc3545;
    --dn:             #28a745;
    --flat:           #6c757d;

    /* —— 状态辅助 —— */
    --warn:           #ff8f00;
    --info:           #1976d2;

    /* —— 通用 —— */
    --card-radius:    8px;
    --shadow:         0 2px 10px rgba(0,0,0,.04);

    /* —— Nav 专用变量 —— */
    --nav-bg:              #ffffff;
    --nav-border:          1px solid #e0d8ce;
    --nav-shadow:          0 2px 10px rgba(0,0,0,.04);
    --nav-radius:          10px;
    --nav-tab-color:       #6c757d;
    --nav-tab-hover-bg:    rgba(184,115,51,.08);
    --nav-tab-hover-color: #b87333;
    --nav-tab-active-bg:   rgba(184,115,51,.10);
    --nav-tab-active-color:#b87333;
    --nav-tab-bar:         linear-gradient(90deg,#b87333,rgba(184,115,51,.2));
    --nav-dropdown-bg:     #ffffff;
    --nav-dropdown-border: 1px solid #e0d8ce;
    --nav-dropdown-shadow: 0 12px 32px rgba(0,0,0,.10);
    --nav-sub-title:       #b87333;
    --nav-link-color:      #495057;
    --nav-link-hover-bg:   rgba(184,115,51,.10);
    --nav-link-hover-color:#b87333;
    --nav-brand-color:     #b87333;
    --nav-brand-bg:        rgba(184,115,51,.12);
    --nav-toggle-bg:        rgba(0,0,0,.05);
    --nav-toggle-hover-bg:  rgba(0,0,0,.10);
    --nav-toggle-color:     #495057;

    /* —— 组件色（Light 专用）—— */
    --bar-blue-1:  rgba(13,110,253,.15);
    --bar-blue-2:  rgba(13,110,253,.25);
    --bar-blue-r:  rgba(13,110,253,.30);
    --bar-red-1:   rgba(224,49,49,.08);
    --bar-red-2:   rgba(224,49,49,.18);
    --bar-red-r:   rgba(224,49,49,.25);
    --bar-up-1:    rgba(224,49,49,.10);
    --bar-up-2:    rgba(224,49,49,.30);
    --bar-up-r:    rgba(224,49,49,.35);
    --bar-dn-1:    rgba(12,166,120,.30);
    --bar-dn-2:    rgba(12,166,120,.10);
    --bar-dn-r:    rgba(12,166,120,.35);

    /* —— ECharts 主题色（亮色）—— */
    --chart-bg:            transparent;
    --chart-text:          #6c757d;
    --chart-axis-line:     #e0d8ce;
    --chart-axis-label:    #888888;
    --chart-grid-line:     #f0ebe5;
    --chart-tooltip-bg:    #ffffff;
    --chart-tooltip-border:#e0d8ce;
    --chart-tooltip-text:  #333333;
    --chart-accent:        #b87333;
}

/* ============================================================
 * ②-补：[data-theme="light"] 全局元素覆盖
 * 统一 form/table/card 等通用元素的配色，避免模板内联硬编码不统一
 * ============================================================ */
[data-theme="light"] body {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}
/* —— 表单控件：白底 + 铜色边框 focus —— */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .form-control,
[data-theme="light"] .form-select {
    color: var(--text) !important;
    background: var(--bg-input) !important;
    border-color: var(--border) !important;
}
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] .form-control:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-light) !important;
}
/* —— 表格 —— */
html[data-theme="light"] table,
html[data-theme="light"] .data-table {
    color: var(--text) !important;
}
html[data-theme="light"] th:not([style*="background"]):not([style*="color"]),
html[data-theme="light"] thead th:not([style*="background"]):not([style*="color"]) {
    color: var(--text-muted) !important;
    background: var(--bg-head) !important;
    border-bottom: 1px solid var(--border) !important;
}
html[data-theme="light"] td:not([style*="background"]):not([style*="color"]):not(.num-up):not(.num-dn):not(.num-warn):not(.num-flat):not(.num-info):not(.num-muted) {
    color: var(--text) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--bg-stripe) !important;
}
html[data-theme="light"] .data-table tr:hover td:not([style*="background"]),
html[data-theme="light"] table tr:hover td:not([style*="background"]) {
    background: var(--accent-light) !important;
}
/* —— 卡片容器 —— */
[data-theme="light"] .card,
[data-theme="light"] .filter-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .chart-card,
[data-theme="light"] .table-card {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow) !important;
}

/* ============================================================
 * 公共基础样式（所有页面自动继承，减少模板重复）
 * ============================================================ */
html, body {
    background-color: var(--bg);
    color: var(--text);
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    transition: background-color .3s ease, color .3s ease;
}

* { box-sizing: border-box; }

/* —— 筛选卡 —— */
.filter-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 10px 14px;
    margin-bottom: 3px;
}
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: flex-end;
    justify-content: flex-start;
}
.filter-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 1;
    min-width: 0;
}
.filter-item .lbl {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 3px;
}
.filter-item .lbl i {
    font-size: 11px;
    color: var(--accent);
}
.filter-item input,
.filter-item select {
    background: var(--bg-card, #fff);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 13px;
    height: calc(1.55rem + 2px);
    line-height: 1.4;
    box-sizing: border-box;
}
/* range-wrap 里的小数字输入框矮一点 */
.range-wrap input {
    height: calc(1.4rem + 2px);
}
/* range-wrap：两个数字输入框 + 中间 ~ 符号 */
.range-wrap {
    display: flex;
    align-items: center;
    gap: 3px;
}
.range-wrap span {
    color: var(--text-muted);
    font-size: 11px;
    flex-shrink: 0;
}
.range-wrap input {
    width: 70px;
    min-width: 0;
    flex: none;
}
.filter-item input:focus,
.filter-item select:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 .2rem var(--accent-light, rgba(37,99,235,.15));
}
.filter-actions {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}
.filter-actions button,
.filter-actions .btn {
    padding: 4px 12px;
    height: calc(1.55rem + 2px);
    line-height: 1.4;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    box-sizing: border-box;
}
.filter-actions .btn-apply {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 600;
}
.filter-actions .btn-apply:hover {
    opacity: .88;
}
.filter-actions .btn-reset,
.filter-actions .btn-clear {
    background: transparent;
    color: var(--text-muted);
}
.filter-actions .btn-reset:hover,
.filter-actions .btn-clear:hover {
    color: var(--text);
    border-color: var(--accent);
}
/* 覆盖 Bootstrap 按钮类，统一金融数据主题 */
.filter-actions .btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: none !important;
}
.filter-actions .btn-primary:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    opacity: .95;
}
.filter-actions .btn-primary:focus {
    box-shadow: 0 0 0 .2rem var(--accent-light, rgba(37,99,235,.25)) !important;
}
.filter-actions .btn-outline-secondary {
    background: transparent !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
}
.filter-actions .btn-outline-secondary:hover {
    background: transparent !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}
.filter-actions .btn-outline-secondary.btn-icon {
    padding: 6px 10px;
}
/* 筛选结果数量徽章 */
.fc-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(96,165,250,.15);
    color: #60a5fa;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}
.fc-badge b {
    color: #60a5fa;
    margin-left: 2px;
}
.fc-badge-wrap {
    display: inline-flex;
    align-items: center;
}
.filter-card .form-control,
.filter-card .form-select {
    font-size: 13px;
    padding: .25rem .55rem;
    height: calc(1.55rem + 2px);
    border-radius: 6px;
    background: var(--bg-input, var(--bg-card));
    color: var(--text);
    border-color: var(--border-strong, var(--border));
    line-height: 1.4;
}
/* 兜底：覆盖所有 filter-card 里的原生 input/select（不管有没有 Bootstrap 类） */
.filter-card input[type=text],
.filter-card input[type=number],
.filter-card input[type=date],
.filter-card select {
    height: calc(1.55rem + 2px) !important;
    line-height: 1.4 !important;
    font-size: 13px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
}
/* 兜底：覆盖所有 filter-card 里的普通按钮高度 */
.filter-card button:not(.mode-toggle .btn):not([class*="period-btn"]),
.filter-card .btn:not(.mode-toggle .btn) {
    height: calc(1.55rem + 2px) !important;
    line-height: 1.4 !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
}
.filter-card .form-control:focus,
.filter-card .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 .2rem var(--accent-light, rgba(37,99,235,.15));
}

/* —— 表格卡 —— */
.tbl-card, .detail-table-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
}

/* —— DataTables 覆盖 —— */
table.dataTable thead th {
    background: var(--bg-head) !important;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border) !important;
}
table.dataTable tbody td {
    background: transparent !important;
    color: var(--text);
    border-bottom: 1px solid var(--border) !important;
}
table.dataTable tbody tr:hover td {
    background: var(--bg-stripe) !important;
}

/* —— 涨跌色 —— */
.num-up { color: var(--up) !important; font-weight: 600; }
.num-dn { color: var(--dn) !important; font-weight: 600; }
.num-z  { color: var(--flat); }

/* —— Theme Toggle 按钮容器（按钮本身样式见文件前半部分深浅两套）—— */
.theme-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ============================================================
 * ⑨ 导航栏主题覆盖（深浅统一随 data-theme 切换）
 *
 * nav 文件里的 <style> 块硬编码了全部深色 + !important
 * 这里用 nav-* 变量 + !important 全部覆盖，实现 nav 也随主题切换
 *
 * 覆盖顺序（后加载优先级高）：
 *   浅色 → nav-* 变量（暖白底 + 铜色文字）
 *   深色 → nav-* 变量（深蓝底 + 金色文字）
 * ============================================================ */

/* —— 9.1 导航容器 —— */
html[data-theme] .header-nav {
    background: var(--nav-bg) !important;
    border: var(--nav-border) !important;
    border-radius: var(--nav-radius) !important;
    box-shadow: var(--nav-shadow) !important;
    transition: background .3s, box-shadow .3s, border-color .3s !important;
}

/* —— 9.2 Tab（一级顶层标签） —— */
html[data-theme] .header-nav .nav-tab {
    color: var(--nav-tab-color) !important;
}
html[data-theme] .header-nav .nav-tab:hover {
    color: var(--nav-tab-hover-color) !important;
    background: var(--nav-tab-hover-bg) !important;
}
html[data-theme] .header-nav .nav-tab::after {
    background: var(--nav-tab-bar) !important;
}
html[data-theme] .header-nav .nav-tab.active {
    color: var(--nav-tab-active-color) !important;
    background: var(--nav-tab-active-bg) !important;
}

/* —— 9.3 下拉面板 —— */
html[data-theme] .header-nav .nav-group .nav-drop {
    background: var(--nav-dropdown-bg) !important;
    border: var(--nav-dropdown-border) !important;
    box-shadow: var(--nav-dropdown-shadow) !important;
    transition: background .3s, border-color .3s, box-shadow .3s !important;
}

/* —— 9.4 子分组标题 —— */
html[data-theme] .header-nav .nav-sub-title {
    color: var(--nav-sub-title) !important;
}

/* —— 9.5 下拉项 —— */
html[data-theme] .header-nav .nav-drop-item {
    color: var(--nav-link-color) !important;
    padding: 3px 80px 3px 0 !important;
}
html[data-theme] .header-nav .nav-drop-item:hover {
    color: var(--nav-link-hover-color) !important;
    background: var(--nav-link-hover-bg) !important;
}

/* —— 9.6 徽章位置（hot-badge 已改为 inline-flex，不再需要绝对定位 right 值）—— */
html[data-theme] .header-nav .help-badge {
    right: 6px !important;
    color: var(--nav-link-color) !important;
}

/* —— 9.7 品牌徽章（多色渐变保留，只改文字色适配 light/dark）—— */
html[data-theme] .header-nav .brand-badge {
    color: #ffffff !important;  /* 渐变底必须白字 */
}

/* —— 9.8 打赏按钮（nav 里 donate-btn 用固定红渐变，保留）—— */

/* —— 9.9 搜索框（如有）—— */
html[data-theme] .header-nav .nav-search input {
    background: var(--bg-input) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html[data-theme] .header-nav .nav-search input::placeholder {
    color: var(--text-dim) !important;
    opacity: 1;
}

/* —— 9.10 浅色模式下搜索框 / 通用输入框 placeholder 颜色更清晰 —— */
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder,
html[data-theme="light"] .form-control::placeholder {
    color: #999999 !important;
    opacity: 1;
}

/* —— 9.11 浅色模式下表格 / 页面 body 文字强制深色（防 Bootstrap 默认浅灰）—— */
html[data-theme="light"] body,
html[data-theme="light"] table,
html[data-theme="light"] tbody,
html[data-theme="light"] td:not([style*="color"]),
html[data-theme="light"] th:not([style*="color"]),
html[data-theme="light"] p,
html[data-theme="light"] span,
html[data-theme="light"] div,
html[data-theme="light"] li,
html[data-theme="light"] label {
    color: #333333 !important;
}
/* —— 颜色类 override：必须在 blanket 之后，source order + 更高 specificity 双保险 —— */
html[data-theme="light"] td.num-up, html[data-theme="light"] .num-up { color: var(--up) !important; }
html[data-theme="light"] td.num-dn, html[data-theme="light"] .num-dn { color: var(--dn) !important; }
html[data-theme="light"] td.num-warn, html[data-theme="light"] .num-warn { color: var(--warn) !important; }
html[data-theme="light"] td.num-flat, html[data-theme="light"] .num-flat { color: var(--flat) !important; }
html[data-theme="light"] td.num-info, html[data-theme="light"] .num-info { color: var(--info) !important; }
html[data-theme="light"] td.num-muted, html[data-theme="light"] .num-muted { color: var(--text-muted) !important; }
html[data-theme="dark"] td.num-up, html[data-theme="dark"] .num-up { color: var(--up) !important; }
html[data-theme="dark"] td.num-dn, html[data-theme="dark"] .num-dn { color: var(--dn) !important; }
html[data-theme="dark"] td.num-warn, html[data-theme="dark"] .num-warn { color: var(--warn) !important; }
html[data-theme="dark"] td.num-flat, html[data-theme="dark"] .num-flat { color: var(--flat) !important; }
html[data-theme="dark"] td.num-info, html[data-theme="dark"] .num-info { color: var(--info) !important; }
html[data-theme="dark"] td.num-muted, html[data-theme="dark"] .num-muted { color: var(--text-muted) !important; }
/* nav 内文字例外（用 nav-* 变量），但 !important 被上面的覆盖块覆盖 */
html[data-theme="light"] .header-nav *:not(i) {
    color: inherit !important;  /* 让上面的 nav 具体规则生效（:not(i) 排除图标，允许 JS/CSS 着色） */
}

/* ============================================================
 * ⑩ 导航细节优化（hover 桥接 / HOT 隐藏 / 二级字体）
 *
 * 问题来源：_nav.html 内联 <style> 的副作用
 * 统一在 stock-common.css 用 html[data-theme] 前缀覆盖，保证 specificity
 * ============================================================ */

/* —— 10.1 HOT 徽章显示（之前被隐藏，现恢复）—— */
html[data-theme] .header-nav .hot-badge {
    display: inline-flex !important;
}

/* —— 10.2 hover 闪烁修复：nav-group 底部加 12px 透明桥接，填满 nav-tab 和 nav-drop 之间的 gap —— */
html[data-theme] .header-nav .nav-group {
    position: relative;
}
html[data-theme] .header-nav .nav-group::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 14px;           /* 覆盖 8px gap + 6px 缓冲 */
    z-index: 299;           /* 在 nav-drop(z-index:300) 之下 */
}
html[data-theme] .header-nav .nav-group .nav-drop {
    margin-top: -6px;       /* 抵消 14px 桥接的视觉下压，让 drop 仍在 tab 下方 8px */
}

/* —— 10.3 二级导航字体优化：更清晰的字重 + 字距，去 hover 位移抖动 —— */
html[data-theme] .header-nav .nav-drop-item {
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: .1px !important;
    padding: 5px 28px 5px 0 !important;   /* 去掉右侧巨大的 80px padding（hot 隐藏后不需要） */
    transition: color .15s ease, background .15s ease !important;
}
html[data-theme] .header-nav .nav-drop-item:hover {
    transform: none !important;           /* 去掉 translateX(2px) 位移，避免文字重排抖动 */
    padding: 5px 28px 5px 0 !important;    /* hover 时 padding 不变 */
}

/* —— 10.4 二级导航图标微调：更规整的字号和间距 —— */
html[data-theme] .header-nav .nav-drop-item i {
    font-size: 13px !important;
    width: 15px !important;
    text-align: center !important;
    flex-shrink: 0;
}

/* —— 10.5 下拉面板 hover 过渡更平滑（visibility 不参与 transition，仅 opacity+transform）—— */
html[data-theme] .header-nav .nav-group .nav-drop {
    transition: opacity .18s ease, transform .18s ease !important;
}

/* —— 10.6 nav-tab hover 更柔和 —— */
html[data-theme] .header-nav .nav-tab {
    transition: color .18s ease, background .18s ease !important;
}

/* ============================================================
 * ⑪ 滚动条自定义（6 大股票模块统一）
 * WebKit（Chrome/Edge/Safari）+ Firefox 双引擎
 * 深浅主题分别适配：浅色用铜色半透明 thumb，深色用金色半透明 thumb
 * 覆盖：全局 html/body + DataTables 表格容器 + ECharts 容器
 * ============================================================ */

/* —— 变量定义（浅色默认）—— */
:root {
    --scrollbar-thumb:    rgba(184,115,51,.35);     /* 铜色半透明 */
    --scrollbar-thumb-h:  rgba(184,115,51,.55);     /* hover 加深 */
    --scrollbar-track:    transparent;
}
[data-theme="dark"] {
    --scrollbar-thumb:    rgba(212,168,83,.40);     /* 金色半透明 */
    --scrollbar-thumb-h:  rgba(212,168,83,.60);
    --scrollbar-track:    rgba(255,255,255,.05);
}

/* —— WebKit 引擎（Chrome/Edge/Safari）—— */
/* 全局 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
    transition: background .2s;
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-h); }
/* 表格容器（更细） */
.table-responsive::-webkit-scrollbar,
.dataTables_wrapper::-webkit-scrollbar,
.tbl-card::-webkit-scrollbar { width: 5px; height: 5px; }
/* ECharts tooltip 细滚动条 */
.bd-tip-scroll::-webkit-scrollbar { width: 4px; }

/* —— Firefox 引擎 —— */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
/* DataTables 内部滚动区也要应用 */
.dataTables_scrollBody,
.table-responsive,
.tbl-card {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* ── 股票名称链接（全模块通用） ── */
.stock-link{color:var(--accent,#2563EB);text-decoration:none;font-weight:600;border-bottom:1px dashed transparent;transition:color .18s ease,border-color .18s ease,background-color .18s ease;padding-bottom:1px}
.stock-link:hover{color:var(--accent,#2563EB);border-bottom-color:var(--accent,#2563EB);background-color:rgba(37,99,235,.08);cursor:pointer}