/* ═══════════════════════════════════════════════════════════════════════
   动态监测平台 · 全局样式 v3.3
   支持 5 套主题：深空黑 / 极光蓝 / 暖光白 / 薄荷绿 / 玫瑰金
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 主题 1：深空黑 Dark（默认暗色）──────────────────────────────────── */
:root,
[data-theme="dark"] {
    --bg-primary:      #0d1117;
    --bg-secondary:    #161b22;
    --bg-card:         #1c2128;
    --bg-card-hover:   #22272e;
    --bg-nav:          rgba(13,17,23,0.96);
    --border-color:    #30363d;
    --border-light:    #21262d;
    --text-primary:    #e6edf3;
    --text-secondary:  #8b949e;
    --text-muted:      #6e7681;
    --accent:          #f0b429;
    --accent-bg:       rgba(240,180,41,0.12);
    --top-bar:         linear-gradient(90deg, #f0b429, #58a6ff, #a371f7);

    --gold:         #f0b429;
    --gold-light:   #ffd166;
    --silver:       #c8c8c8;
    --silver-light: #e4e4e4;
    --oil-wti:      #58a6ff;
    --oil-brent:    #79c0ff;

    --green:      #3fb950;
    --green-bg:   rgba(63,185,80,0.12);
    --red:        #f85149;
    --red-bg:     rgba(248,81,73,0.12);
    --orange:     #ff9f43;
    --orange-bg:  rgba(255,159,67,0.12);
    --blue:       #58a6ff;
    --blue-bg:    rgba(88,166,255,0.12);
    --purple:     #a371f7;
    --purple-bg:  rgba(163,113,247,0.12);
    --yellow:     #f5c842;
    --yellow-bg:  rgba(245,200,66,0.10);

    --shadow-sm:  0 2px 8px rgba(0,0,0,0.4);
    --shadow-md:  0 6px 20px rgba(0,0,0,0.5);
    --shadow-lg:  0 12px 40px rgba(0,0,0,0.6);
    --transition: all 0.22s ease;
}

/* ─── 主题 2：极光蓝 Aurora（深蓝色调暗色，护眼）──────────────────────── */
[data-theme="aurora"] {
    --bg-primary:      #0b1628;
    --bg-secondary:    #112240;
    --bg-card:         #152a4a;
    --bg-card-hover:   #1a3358;
    --bg-nav:          rgba(11,22,40,0.97);
    --border-color:    #1e3a5f;
    --border-light:    #172d4d;
    --text-primary:    #ccd6f6;
    --text-secondary:  #8892b0;
    --text-muted:      #5a6a8a;
    --accent:          #64ffda;
    --accent-bg:       rgba(100,255,218,0.1);
    --top-bar:         linear-gradient(90deg, #64ffda, #58a6ff, #bd93f9);

    --gold:         #ffd866;
    --gold-light:   #ffe599;
    --silver:       #a8b2c4;
    --silver-light: #c8d0e0;
    --oil-wti:      #58a6ff;
    --oil-brent:    #79c0ff;

    --green:      #64ffda;
    --green-bg:   rgba(100,255,218,0.1);
    --red:        #ff6b7a;
    --red-bg:     rgba(255,107,122,0.1);
    --orange:     #ffb347;
    --orange-bg:  rgba(255,179,71,0.1);
    --blue:       #58a6ff;
    --blue-bg:    rgba(88,166,255,0.1);
    --purple:     #bd93f9;
    --purple-bg:  rgba(189,147,249,0.1);
    --yellow:     #f1fa8c;
    --yellow-bg:  rgba(241,250,140,0.08);

    --shadow-sm:  0 2px 8px rgba(0,0,0,0.35);
    --shadow-md:  0 6px 20px rgba(0,0,0,0.45);
    --shadow-lg:  0 12px 40px rgba(0,0,0,0.55);
    --transition: all 0.22s ease;
}

/* ─── 主题 3：暖光白 Light（默认亮色）─────────────────────────────────── */
[data-theme="light"] {
    --bg-primary:      #f5f6fa;
    --bg-secondary:    #ffffff;
    --bg-card:         #ffffff;
    --bg-card-hover:   #f0f2f8;
    --bg-nav:          rgba(255,255,255,0.97);
    --border-color:    #d8dee6;
    --border-light:    #e8ecf2;
    --text-primary:    #24292f;
    --text-secondary:  #57606a;
    --text-muted:      #8b949e;
    --accent:          #0969da;
    --accent-bg:       rgba(9,105,218,0.08);
    --top-bar:         linear-gradient(90deg, #0969da, #8250df, #cf222e);

    --gold:         #b8860b;
    --gold-light:   #d4a017;
    --silver:       #6b7280;
    --silver-light: #9ca3af;
    --oil-wti:      #0969da;
    --oil-brent:    #1f6feb;

    --green:      #1a7f37;
    --green-bg:   rgba(26,127,55,0.08);
    --red:        #cf222e;
    --red-bg:     rgba(207,34,46,0.07);
    --orange:     #bc4c00;
    --orange-bg:  rgba(188,76,0,0.07);
    --blue:       #0969da;
    --blue-bg:    rgba(9,105,218,0.07);
    --purple:     #8250df;
    --purple-bg:  rgba(130,80,223,0.07);
    --yellow:     #9a6700;
    --yellow-bg:  rgba(154,103,0,0.07);

    --shadow-sm:  0 1px 4px rgba(31,35,40,0.08);
    --shadow-md:  0 4px 14px rgba(31,35,40,0.1);
    --shadow-lg:  0 10px 30px rgba(31,35,40,0.14);
    --transition: all 0.22s ease;
}

/* ─── 主题 4：薄荷绿 Mint（清新绿色调亮色）─────────────────────────── */
[data-theme="mint"] {
    --bg-primary:      #f0faf5;
    --bg-secondary:    #f7fdfb;
    --bg-card:         #ffffff;
    --bg-card-hover:   #e8f5f0;
    --bg-nav:          rgba(240,250,245,0.97);
    --border-color:    #b8e0d0;
    --border-light:    #d0ede2;
    --text-primary:    #1a3a2a;
    --text-secondary:  #3d6b55;
    --text-muted:      #6a9a85;
    --accent:          #059669;
    --accent-bg:       rgba(5,150,105,0.08);
    --top-bar:         linear-gradient(90deg, #059669, #10b981, #34d399);

    --gold:         #92400e;
    --gold-light:   #b45309;
    --silver:       #4b6b5a;
    --silver-light: #7a9e8c;
    --oil-wti:      #0284c7;
    --oil-brent:    #0369a1;

    --green:      #059669;
    --green-bg:   rgba(5,150,105,0.1);
    --red:        #dc2626;
    --red-bg:     rgba(220,38,38,0.07);
    --orange:     #c2410c;
    --orange-bg:  rgba(194,65,12,0.07);
    --blue:       #0284c7;
    --blue-bg:    rgba(2,132,199,0.07);
    --purple:     #7c3aed;
    --purple-bg:  rgba(124,58,237,0.07);
    --yellow:     #a16207;
    --yellow-bg:  rgba(161,98,7,0.07);

    --shadow-sm:  0 1px 4px rgba(5,80,50,0.06);
    --shadow-md:  0 4px 14px rgba(5,80,50,0.08);
    --shadow-lg:  0 10px 30px rgba(5,80,50,0.12);
    --transition: all 0.22s ease;
}

/* ─── 主题 5：玫瑰金 Rose（优雅暖粉色调）──────────────────────────────── */
[data-theme="rose"] {
    --bg-primary:      #fdf2f5;
    --bg-secondary:    #fff8f9;
    --bg-card:         #ffffff;
    --bg-card-hover:   #fce8ed;
    --bg-nav:          rgba(253,242,245,0.97);
    --border-color:    #e8c4cc;
    --border-light:    #f0d8de;
    --text-primary:    #3a1a25;
    --text-secondary:  #6b3a4a;
    --text-muted:      #9a6a7a;
    --accent:          #be185d;
    --accent-bg:       rgba(190,24,93,0.08);
    --top-bar:         linear-gradient(90deg, #be185d, #e11d48, #f43f5e);

    --gold:         #92400e;
    --gold-light:   #b45309;
    --silver:       #6b5c62;
    --silver-light: #9a8a90;
    --oil-wti:      #1d4ed8;
    --oil-brent:    #3b82f6;

    --green:      #15803d;
    --green-bg:   rgba(21,128,61,0.08);
    --red:        #be123c;
    --red-bg:     rgba(190,18,60,0.07);
    --orange:     #c2410c;
    --orange-bg:  rgba(194,65,12,0.07);
    --blue:       #1d4ed8;
    --blue-bg:    rgba(29,78,216,0.07);
    --purple:     #7e22ce;
    --purple-bg:  rgba(126,34,206,0.07);
    --yellow:     #a16207;
    --yellow-bg:  rgba(161,98,7,0.07);

    --shadow-sm:  0 1px 4px rgba(80,20,40,0.06);
    --shadow-md:  0 4px 14px rgba(80,20,40,0.08);
    --shadow-lg:  0 10px 30px rgba(80,20,40,0.12);
    --transition: all 0.22s ease;
}

/* ─── 全局基础 ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei UI', -apple-system,
                 BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease;
    -webkit-font-smoothing: antialiased;
}

/* ─── 主题切换按钮 ────────────────────────────────────────────────────────── */
#theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
#theme-toggle-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
    background: var(--blue-bg);
}
#theme-toggle-btn .theme-icon { font-size: 0.9rem; }

/* 主题标签（顶部细条，暗色=金色，亮色=蓝色） */
body::before {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(90deg, var(--gold) 0%, var(--blue) 50%, var(--purple) 100%);
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
}

/* ─── 导航栏 ──────────────────────────────────────────────────────────────── */
.navbar, .top-nav {
    background: var(--bg-nav) !important;
    border-bottom: 1px solid var(--border-color) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 0.55rem 0;
    z-index: 1000;
    transition: background 0.3s ease;
}

[data-theme="light"] .navbar,
[data-theme="light"] .top-nav {
    box-shadow: var(--shadow-sm);
}

.navbar-brand {
    color: var(--text-primary) !important;
    letter-spacing: 0.3px;
    font-weight: 600;
}

/* ─── 价格卡片 ────────────────────────────────────────────────────────────── */
.price-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s, box-shadow 0.18s, background 0.3s, border-color 0.3s;
}

.price-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 12px 12px 0 0;
}

.price-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.gold-card::before        { background: linear-gradient(90deg, #c8880a, #f0b429, #ffd166); }
.silver-card::before      { background: linear-gradient(90deg, #888, #c8c8c8, #e4e4e4); }
.oil-wti-card::before     { background: linear-gradient(90deg, #1d4ed8, #58a6ff); }
.oil-brent-card::before   { background: linear-gradient(90deg, #6d28d9, #a371f7); }

.price-label {
    font-size: 0.77rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.gold-card    .price-label { color: var(--gold); }
.silver-card  .price-label { color: var(--silver); }
.oil-wti-card   .price-label { color: var(--oil-wti); }
.oil-brent-card .price-label { color: var(--oil-brent); }

.price-value {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.price-change {
    font-size: 0.82rem;
    margin-top: 0.25rem;
    font-weight: 600;
}

.price-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.change-up   { color: var(--green); }
.change-down { color: var(--red); }
.change-flat { color: var(--text-muted); }

/* ─── 比率卡片 ────────────────────────────────────────────────────────────── */
.ratio-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    transition: box-shadow 0.18s, background 0.3s, border-color 0.3s;
}

.ratio-card:hover { box-shadow: var(--shadow-md); }

.ratio-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 0.3rem;
    letter-spacing: 0.3px;
}

.ratio-value {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--gold);
    letter-spacing: -1px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.signal-badge {
    display: inline-block;
    padding: 0.28rem 0.65rem;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 600;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    white-space: nowrap;
}
.signal-badge.success { background: var(--green-bg);  border-color: var(--green);  color: var(--green); }
.signal-badge.warning { background: var(--orange-bg); border-color: var(--orange); color: var(--orange); }
.signal-badge.danger  { background: var(--red-bg);    border-color: var(--red);    color: var(--red); }
.signal-badge.info    { background: var(--blue-bg);   border-color: var(--blue);   color: var(--blue); }

.signal-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.6;
    min-height: 2.5rem;
}

.stat-box {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 0.45rem 0.25rem;
    border: 1px solid var(--border-light);
    transition: background 0.3s;
}
.stat-label { font-size: 0.67rem; color: var(--text-muted); margin-bottom: 0.15rem; }
.stat-val   { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }

.trend-badge {
    display: inline-block;
    font-size: 0.74rem;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 0.22rem 0.65rem;
}

/* ─── 图表区 ──────────────────────────────────────────────────────────────── */
.chart-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.1rem 1.3rem;
    transition: background 0.3s, border-color 0.3s;
}

.chart-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 1rem;
    transition: background 0.3s;
}

.chart-title {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.7rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-light);
    letter-spacing: 0.3px;
}

.chart-wrap { position: relative; height: 280px; }
.chart-wrap canvas { max-height: 280px; }

/* ─── 按钮系统 ────────────────────────────────────────────────────────────── */
.btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-color);
    background: transparent;
    transition: var(--transition);
}
.btn-outline-secondary:hover,
.btn-outline-secondary.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.btn-outline-warning {
    color: var(--gold);
    border-color: var(--gold);
    transition: var(--transition);
}
.btn-outline-warning:hover {
    background: var(--gold);
    color: #000;
    border-color: var(--gold);
}

.btn-outline-info {
    color: var(--blue);
    border-color: var(--blue);
    transition: var(--transition);
}
.btn-outline-info:hover {
    background: var(--blue);
    color: #fff;
}

.btn-outline-success {
    color: var(--green);
    border-color: var(--green);
    transition: var(--transition);
}
.btn-outline-success:hover {
    background: var(--green);
    color: #fff;
}

.btn-outline-danger {
    color: var(--red);
    border-color: var(--red);
    transition: var(--transition);
}
.btn-outline-danger:hover {
    background: var(--red);
    color: #fff;
}

.btn-outline-light {
    color: var(--text-secondary);
    border-color: var(--border-color);
    transition: var(--transition);
}
.btn-outline-light:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

.btn-primary {
    background: var(--blue);
    border-color: var(--blue);
    transition: var(--transition);
}
.btn-primary:hover {
    background: color-mix(in srgb, var(--blue) 80%, #000);
    border-color: color-mix(in srgb, var(--blue) 80%, #000);
}

/* ─── 表单元素 ────────────────────────────────────────────────────────────── */
.form-control, .form-select {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
    font-size: 0.82rem;
    transition: background 0.3s, border-color 0.2s, color 0.3s;
    border-radius: 8px;
}
.form-control:focus, .form-select:focus {
    background: var(--bg-secondary);
    border-color: var(--blue);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem var(--blue-bg);
}
.form-control::placeholder { color: var(--text-muted); }
.form-label {
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    font-size: 0.78rem;
    font-weight: 500;
}
.form-check-input:checked {
    background-color: var(--blue);
    border-color: var(--blue);
}
.form-check-input:focus { box-shadow: 0 0 0 0.2rem var(--blue-bg); }

/* ─── 简报 & 管理卡片 ─────────────────────────────────────────────────────── */
.report-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    transition: background 0.3s, border-color 0.3s;
}

.report-text {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', 'Microsoft YaHei', monospace;
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-all;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    margin: 0;
    max-height: 320px;
    overflow-y: auto;
    line-height: 1.75;
    transition: background 0.3s;
}

/* ─── 信号参考信息卡 ──────────────────────────────────────────────────────── */
.info-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    transition: background 0.3s, border-color 0.3s;
}
.signal-ref-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

/* ─── Gold 页面：价格卡片扩展（生猪 / 玉米）──────────────────────────────── */
.hog-card::before   { background: linear-gradient(90deg, #b91c1c, #f87171); }
.corn-card::before  { background: linear-gradient(90deg, #a16207, #fbbf24); }
.hog-card  .price-label { color: #f87171; }
.corn-card .price-label { color: #fbbf24; }
[data-theme="light"] .hog-card  .price-label { color: #b91c1c; }
[data-theme="light"] .corn-card .price-label { color: #92400e; }

/* ─── Gold 页面：通用区块容器 ──────────────────────────────────────────────── */
.section-zone {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.2rem 1.3rem;
    margin-bottom: 1rem;
    transition: background 0.3s, border-color 0.3s;
}

/* ─── Gold 页面：信号摘要区 ───────────────────────────────────────────────── */
.summary-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px;
    height: 100%;
    transition: background 0.3s, border-color 0.3s;
}
.summary-card.buy     { border-color: var(--green);  box-shadow: inset 0 0 0 1px rgba(63,185,80,.08); }
.summary-card.watch   { border-color: var(--orange); box-shadow: inset 0 0 0 1px rgba(255,159,67,.08); }
.summary-card.risk    { border-color: var(--red);    box-shadow: inset 0 0 0 1px rgba(248,81,73,.08); }
.summary-card.neutral { border-color: var(--border-light); }
.summary-title  { font-size: .78rem; color: var(--text-muted); margin-bottom: 6px; }
.summary-signal { font-size: 1rem; font-weight: 700; margin-bottom: 6px; color: var(--text-primary); }
.summary-desc   { font-size: .76rem; color: var(--text-secondary); line-height: 1.45; }
.summary-action {
    margin-top: 10px; font-size: .76rem; color: var(--text-primary);
    background: var(--bg-primary); border: 1px solid var(--border-light);
    border-radius: 8px; padding: 7px 9px;
    transition: background 0.3s, border-color 0.3s;
}
.summary-list          { list-style: none; padding: 0; margin: 0; }
.summary-list li       { padding: 6px 0; border-bottom: 1px dashed var(--border-light); color: var(--text-secondary); font-size: .76rem; line-height: 1.45; }
.summary-list li:last-child { border-bottom: none; }

/* ─── Gold 页面：阈值预警 ─────────────────────────────────────────────────── */
.threshold-zone  { margin-top: 14px; }
.threshold-alert {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 10px; padding: 10px 12px; font-size: .79rem; color: var(--text-secondary);
    transition: background 0.3s, border-color 0.3s;
}
.threshold-alert.warn { border-color: var(--orange); }
.threshold-alert.risk { border-color: var(--red); }
.threshold-alert.safe { border-color: var(--green); }

/* ─── Gold 页面：持仓/因素内卡 ────────────────────────────────────────────── */
.pos-card {
    background: var(--bg-secondary); border: 1px solid var(--border-light);
    border-radius: 10px; padding: 14px;
    transition: background 0.3s, border-color 0.3s;
}
.pos-card.loss { border-color: var(--red); background: var(--red-bg); }
.pnl-pos { color: var(--green); font-weight: 700; }
.pnl-neg { color: var(--red);   font-weight: 700; }

.market-signal {
    background: var(--bg-secondary); border: 1px solid var(--border-light);
    border-radius: 10px; padding: 14px;
    transition: background 0.3s, border-color 0.3s;
}
.factor-card {
    background: var(--bg-secondary); border: 1px solid var(--border-light);
    border-radius: 10px; padding: 12px;
    transition: background 0.3s, border-color 0.3s;
}
.factor-card.bearish { border-color: var(--red); }
.factor-card.neutral { border-color: var(--border-color); }

.sentiment-bull { color: var(--green); font-weight: 700; }
.sentiment-bear { color: var(--red);   font-weight: 700; }

.version-tag {
    background: var(--bg-secondary); color: var(--text-muted);
    font-size: 0.65rem; padding: 2px 7px; border-radius: 10px;
    border: 1px solid var(--border-light);
}

/* ─── Gold 页面：内部编辑面板 ─────────────────────────────────────────────── */
.zone-hint {
    background: var(--bg-secondary); border: 1px solid var(--border-light);
    font-size: .82rem; border-radius: 8px; padding: 8px 12px;
    color: var(--text-secondary);
    transition: background 0.3s, border-color 0.3s;
}
.zone-inner-box {
    background: var(--bg-primary); border: 1px solid var(--border-light);
    border-radius: 8px; padding: 8px;
    transition: background 0.3s, border-color 0.3s;
}

/* ─── 表格 ────────────────────────────────────────────────────────────────── */
.table-dark {
    --bs-table-bg: var(--bg-secondary);
    --bs-table-border-color: var(--border-light);
    --bs-table-color: var(--text-primary);
    font-size: 0.8rem;
}
.table-dark thead th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom-color: var(--border-color);
    background: var(--bg-primary);
}
.table-dark.table-hover > tbody > tr:hover {
    background-color: var(--bg-card-hover);
    --bs-table-accent-bg: var(--bg-card-hover);
}

/* 亮色主题下的表格调整 */
[data-theme="light"] .table-dark {
    --bs-table-bg: #fafbfc;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-light);
}
[data-theme="light"] .table-dark thead th {
    background: #f0f2f5;
    color: var(--text-secondary);
}

.table-success td { color: var(--green)  !important; }
.table-warning td { color: var(--orange) !important; }
.table-danger  td { color: var(--red)    !important; }

/* ─── Toast ───────────────────────────────────────────────────────────────── */
.toast {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    min-width: 260px;
    backdrop-filter: blur(8px);
}
.toast.bg-success { background: rgba(63,185,80,0.92) !important; }
.toast.bg-danger  { background: rgba(248,81,73,0.92) !important; }

/* ─── 徽章/标签 ───────────────────────────────────────────────────────────── */
.badge {
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ─── 输入组 ──────────────────────────────────────────────────────────────── */
.input-group-text {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* ─── 下拉菜单 ────────────────────────────────────────────────────────────── */
.dropdown-menu {
    background: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
}
.dropdown-item {
    color: var(--text-primary);
    font-size: 0.83rem;
}
.dropdown-item:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

/* ─── 分隔线 ──────────────────────────────────────────────────────────────── */
hr { border-color: var(--border-light); opacity: 0.6; }

/* ─── 通用 Section 卡片 ───────────────────────────────────────────────────── */
.section-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 18px !important;
    margin-bottom: 16px !important;
    transition: background 0.3s, border-color 0.3s;
}

.stat-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    transition: background 0.3s, border-color 0.3s;
}

/* ─── 亮色系主题（light/mint/rose）通用适配 ─────────────────────────────── */
[data-theme="light"] .text-muted, [data-theme="mint"] .text-muted, [data-theme="rose"] .text-muted { color: var(--text-muted) !important; }
[data-theme="light"] .text-success, [data-theme="mint"] .text-success, [data-theme="rose"] .text-success { color: var(--green) !important; }
[data-theme="light"] .text-danger, [data-theme="mint"] .text-danger, [data-theme="rose"] .text-danger { color: var(--red) !important; }
[data-theme="light"] .text-warning, [data-theme="mint"] .text-warning, [data-theme="rose"] .text-warning { color: var(--gold) !important; }
[data-theme="light"] .text-info, [data-theme="mint"] .text-info, [data-theme="rose"] .text-info { color: var(--blue) !important; }

/* aurora主题文字适配 */
[data-theme="aurora"] .text-warning { color: var(--gold) !important; }

/* ETF/LOF 页面在亮色模式下的卡片背景覆盖 */
[data-theme="light"] .rotation-zone,
[data-theme="light"] .news-zone,
[data-theme="light"] .position-zone {
    background: linear-gradient(135deg, #eaf4ff, #f0fff4) !important;
    border-color: var(--border-color) !important;
}

[data-theme="light"] .filter-bar,
[data-theme="light"] .calc-panel {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="light"] .table-wrap {
    border-color: var(--border-color) !important;
}

/* LOF 信号卡片 */
[data-theme="light"] .signal-premium { background: #f0fff4 !important; border-color: #a8e6bf !important; }
[data-theme="light"] .signal-discount { background: #eff6ff !important; border-color: #a8c8f0 !important; }

/* ETF 轮动专区 */
[data-theme="light"] .core-etf-card {
    background: #f8fafc !important;
    border-color: var(--border-color) !important;
}
[data-theme="light"] .core-etf-card:hover {
    background: #eef4ff !important;
    border-color: var(--blue) !important;
}
[data-theme="light"] .core-etf-card.recommended {
    background: #f0fff4 !important;
    border-color: var(--green) !important;
}

/* 我的持仓 */
[data-theme="light"] .my-lof-card,
[data-theme="light"] .pos-card {
    background: #f8fafc !important;
    border-color: var(--border-color) !important;
}

/* market signal */
[data-theme="light"] .market-signal { background: #f8fafc !important; border-color: var(--border-color) !important; }

/* factor-card */
[data-theme="light"] .factor-card { background: #f0fff4 !important; border-color: #a8e6bf !important; }
[data-theme="light"] .factor-card.bearish { background: #fff0f0 !important; border-color: #f0a8a8 !important; }
[data-theme="light"] .factor-card.neutral { background: #fffef0 !important; border-color: #e0d8a0 !important; }

/* 输入框亮色覆盖 */
[data-theme="light"] .bg-dark   { background: #f4f6f8 !important; }
[data-theme="light"] .border-secondary { border-color: #c8d0da !important; }
[data-theme="light"] .text-light { color: #1a2030 !important; }

/* form input 亮色 */
[data-theme="light"] input.bg-dark,
[data-theme="light"] input[class*="bg-dark"],
[data-theme="light"] select.bg-dark {
    background: #ffffff !important;
    color: #1a2030 !important;
    border-color: #c8d0da !important;
}
[data-theme="light"] input::placeholder { color: #9aabb8 !important; }

/* LOF / ETF 页面内联样式覆盖（亮色） */
[data-theme="light"] .lof-table th {
    background: #f0f3f7 !important;
    color: var(--text-secondary) !important;
}
[data-theme="light"] .lof-table td {
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}
[data-theme="light"] .calc-panel {
    background: #f7f9fc !important;
    border-color: var(--border-color) !important;
}
[data-theme="light"] .version-tag {
    background: #e8ecf0 !important;
    color: var(--text-secondary) !important;
}
[data-theme="light"] .tab-btn {
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
[data-theme="light"] .tab-btn.active {
    background: var(--green-bg) !important;
    border-color: var(--green) !important;
    color: var(--green) !important;
}
[data-theme="light"] .my-lof-card,
[data-theme="light"] .section-card {
    background: #ffffff !important;
    border-color: var(--border-color) !important;
}
[data-theme="light"] .stat-card {
    background: #ffffff !important;
    border-color: var(--border-color) !important;
}
/* 快速搜索框 */
[data-theme="light"] #lof-search,
[data-theme="light"] #lof-quick-search {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="light"] #lof-search::placeholder,
[data-theme="light"] #lof-quick-search::placeholder {
    color: var(--text-muted) !important;
}
/* table-dark 亮色全覆盖 */
[data-theme="light"] .table-dark {
    background: #fafbfc !important;
    color: var(--text-primary) !important;
    --bs-table-color: var(--text-primary);
    --bs-table-bg: #fafbfc;
    --bs-table-striped-bg: #f3f5f8;
    --bs-table-hover-bg: #ebeff4;
    --bs-table-border-color: #dde2e8;
}
[data-theme="light"] .table-dark > thead > tr > th {
    background: #edf0f5 !important;
    color: var(--text-secondary) !important;
    border-bottom-color: #c8d0da !important;
}
[data-theme="light"] .table-dark > tbody > tr > td {
    color: var(--text-primary) !important;
    border-color: #e2e7ed !important;
}
[data-theme="light"] .table-dark.table-hover > tbody > tr:hover > td {
    background: #e8edf3 !important;
}
/* 信号卡亮色 */
[data-theme="light"] .signal-card.signal-premium {
    background: rgba(26,127,55,0.07) !important;
    border-color: rgba(26,127,55,0.3) !important;
}
[data-theme="light"] .signal-card.signal-discount {
    background: rgba(9,105,218,0.07) !important;
    border-color: rgba(9,105,218,0.3) !important;
}
[data-theme="light"] .arb-rank-item {
    border-bottom-color: var(--border-light) !important;
}
/* calc result 亮色 */
[data-theme="light"] #calc-result > div {
    background: #f0fff4 !important;
    border-color: #a8dfb8 !important;
}

/* ─── 统一导航栏（layout.js 生成）─────────────────────────────────────────── */
.dm-unified-nav {
    background: var(--bg-nav) !important;
    border-bottom: 1px solid var(--border-color) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 1000;
}

.dm-nav-brand {
    color: var(--text-primary) !important;
    transition: opacity 0.2s;
}
.dm-nav-brand:hover { opacity: 0.85; }

/* 四大域下拉导航 */
.dm-nav-domains {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
}

.dm-nav-dropdown {
    position: relative;
}

.dm-nav-domain-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.dm-nav-domain-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--border-color);
}
.dm-nav-domain-btn.active {
    background: var(--accent-bg, var(--blue-bg));
    color: var(--accent, var(--blue));
    border-color: transparent;
}

.dm-nav-chevron {
    font-size: 0.6rem;
    opacity: 0.5;
    transition: transform 0.2s;
}
.dm-nav-dropdown:hover .dm-nav-chevron {
    transform: rotate(180deg);
}

.dm-nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 6px;
    box-shadow: var(--shadow-lg);
    z-index: 1001;
    animation: dm-dropdown-in 0.15s ease;
}
.dm-nav-dropdown:hover .dm-nav-dropdown-menu {
    display: block;
}

@keyframes dm-dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dm-nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.82rem;
    transition: all 0.15s;
    white-space: nowrap;
}
.dm-nav-dropdown-item:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}
.dm-nav-dropdown-item.active {
    background: var(--accent-bg, var(--blue-bg));
    color: var(--accent, var(--blue));
    font-weight: 600;
}
.dm-nav-dropdown-item i {
    font-size: 0.9rem;
    width: 18px;
    text-align: center;
}

/* 面包屑 */
.dm-nav-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 3px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
}
.dm-breadcrumb-domain {
    color: var(--text-muted);
}
.dm-breadcrumb-page {
    color: var(--text-secondary);
    font-weight: 600;
}
.dm-nav-breadcrumb .bi-chevron-right {
    font-size: 0.6rem;
    opacity: 0.4;
}

/* 移动端汉堡按钮 */
.dm-nav-mobile-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
}
.dm-nav-mobile-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

/* 移动端侧边菜单 */
.dm-mobile-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.dm-mobile-overlay.open {
    opacity: 1;
    visibility: visible;
}

.dm-mobile-menu {
    position: fixed;
    top: 0; left: 0;
    width: 280px;
    max-width: 85vw;
    height: 100vh;
    background: var(--bg-card);
    border-right: 1px solid var(--border-color);
    z-index: 9999;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: var(--shadow-lg);
}
.dm-mobile-menu.open {
    transform: translateX(0);
}

.dm-mobile-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.dm-mobile-close {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
}

.dm-mobile-body {
    padding: 8px;
}
.dm-mobile-group {
    padding: 10px 12px 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.dm-mobile-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.15s;
    margin: 1px 0;
}
.dm-mobile-item:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}
.dm-mobile-item.active {
    background: var(--accent-bg, var(--blue-bg));
    color: var(--accent, var(--blue));
    font-weight: 600;
}
.dm-mobile-item i { width: 20px; text-align: center; }

/* ─── 统一页面内容区域 ────────────────────────────────────────────────────── */
.dm-page-content {
    padding: 20px 24px;
    max-width: 1600px;
    margin: 0 auto;
}

/* 统一页面标题区 */
.dm-page-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
}
.dm-page-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dm-page-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

/* 统一卡片样式覆盖（仅用于 Bootstrap .card 场景，不覆盖自定义 .card） */
.dm-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: background 0.3s, border-color 0.3s;
}
/* Bootstrap card 主题适配 */
.card {
    --bs-card-bg: var(--bg-card);
    --bs-card-border-color: var(--border-color);
    --bs-card-color: var(--text-primary);
    --bs-card-cap-bg: var(--bg-secondary);
}

/* 自定义 CSS 变量兼容层（适配旧页面的自定义变量名） */
:root, [data-theme] {
    --card-bg: var(--bg-card);
    --hover-bg: var(--bg-card-hover);
    --accent-color: var(--accent, var(--blue));
}

/* ─── 滚动条 ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ─── 加载动画 ────────────────────────────────────────────────────────────── */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}
.loading { animation: pulse 1.4s ease-in-out infinite; }

@keyframes shimmer {
    0%   { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-card-hover) 50%, var(--bg-secondary) 75%);
    background-size: 400px 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

/* ─── 响应式（移动端优化 v3.1）─────────────────────────────────────────── */

/* -- 平板 (<992px) -- */
@media (max-width: 992px) {
    .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
    .section-card, .settings-section { padding: 14px !important; }
}

/* -- 手机横屏 (<768px) -- */
@media (max-width: 768px) {
    .price-value { font-size: 1.3rem; }
    .ratio-value { font-size: 1.6rem; }
    .chart-wrap  { height: 200px; }
    .chart-wrap canvas { max-height: 200px; }
    .navbar .btn-sm { font-size: 0.71rem; padding: 0.2rem 0.45rem; }
    body::before { height: 2px; }

    /* 导航栏紧凑 */
    .top-nav .container-fluid,
    .portal-nav .container-fluid { padding-left: 8px !important; padding-right: 8px !important; }

    /* 表格水平滚动 */
    .table-responsive-mobile {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-responsive-mobile table { min-width: 600px; }

    /* 主题切换按钮精简 */
    #theme-toggle-btn span:not(.theme-icon) { display: none; }
    #theme-toggle-btn { padding: 4px 8px; min-width: auto; }

    /* 信息面板网格移动端 */
    .info-panel { padding: 14px; }
    .panel-title { font-size: 0.82rem; }

    /* 报告文本移动端 */
    .report-text { font-size: 0.72rem; padding: 0.6rem; max-height: 240px; }

    /* 移动端底部固定操作栏 */
    .mobile-bottom-bar {
        position: fixed; bottom: 0; left: 0; right: 0;
        background: var(--bg-nav); border-top: 1px solid var(--border-color);
        padding: 6px 10px; z-index: 999;
        display: flex; justify-content: space-around; align-items: center;
        backdrop-filter: blur(12px);
    }
    .mobile-bottom-bar a {
        color: var(--text-muted); text-decoration: none;
        font-size: 0.65rem; text-align: center;
        display: flex; flex-direction: column; align-items: center; gap: 2px;
    }
    .mobile-bottom-bar a i { font-size: 1.1rem; }
    .mobile-bottom-bar a.active { color: var(--accent, var(--blue)); }
    body { padding-bottom: 56px; }
}

/* -- 手机竖屏 (<576px) -- */
@media (max-width: 576px) {
    .price-card  { padding: 0.8rem; }
    .ratio-card  { padding: 0.9rem 1rem; }
    .stat-card   { padding: 12px !important; }

    /* 首页标题 */
    .hero-title { font-size: 1.2rem !important; }
    .hero-desc { font-size: 0.8rem !important; }
    .hero-stat { padding: 6px 10px; min-width: 70px; }
    .hero-stat-val { font-size: 0.9rem; }
    .hero-stat-label { font-size: 0.6rem; }

    /* 模块卡片移动端全宽 */
    .module-card { padding: 16px; }
    .module-title { font-size: 0.92rem; }
    .module-desc { font-size: 0.76rem; margin-bottom: 8px; }
    .module-icon-wrap { width: 40px; height: 40px; font-size: 1.2rem; margin-bottom: 10px; }
    .module-features { gap: 4px; }
    .feature-tag { font-size: 0.65rem; padding: 2px 7px; }
    .module-version { font-size: 0.58rem; top: 10px; right: 10px; }

    /* 快速统计 */
    .qs-val { font-size: 1.2rem; }
    .qs-label { font-size: 0.68rem; }

    /* 指数行 */
    .quick-stat-card { padding: 12px 14px; }

    /* 导航栏移动端 */
    .portal-title { font-size: 0.85rem; }
    .portal-subtitle { display: none; }
    .version-badge { font-size: 0.55rem; padding: 1px 5px; }
    .market-ticker { display: none !important; }
    .system-time { font-size: 0.65rem; padding: 2px 6px; }

    /* 设置页移动端 */
    .settings-nav { display: none; }
    .setting-row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .setting-row select, .setting-row input[type="number"] { width: 100% !important; }

    /* 主题选择器移动端 */
    .theme-picker { gap: 8px; }
    .theme-option { width: 110px; padding: 8px; }
    .theme-preview { height: 38px; font-size: 1.1rem; }
    .theme-name { font-size: 0.7rem; }

    /* 图表区移动端 */
    .chart-wrap { height: 180px; }
    .chart-wrap canvas { max-height: 180px; }
    .chart-title { font-size: 0.78rem; }

    /* 版本日志 */
    .changelog-item { grid-template-columns: 36px 70px 1fr; font-size: 0.72rem; }
    .changelog-ver { font-size: 0.72rem; }
}

/* -- 超小屏 (<400px) -- */
@media (max-width: 400px) {
    .hero-title { font-size: 1rem !important; }
    .module-card { padding: 12px; }
    .theme-option { width: 95px; padding: 6px; }
    .theme-preview { height: 32px; font-size: 0.9rem; }
    .theme-colors span { width: 10px; height: 10px; }
}

/* ─── 触摸优化 ─────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    /* 触摸设备加大点击区 */
    .btn-sm { min-height: 36px; min-width: 36px; }
    .form-control, .form-select { min-height: 40px; font-size: 16px !important; }
    .nav-link { padding: 10px 14px !important; }
    .feature-tag { padding: 4px 10px; }
    .toggle-switch { width: 50px; height: 28px; }
    .toggle-slider:before { height: 22px; width: 22px; }
    .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); }

    /* 禁用hover效果（避免sticky hover） */
    .module-card:hover { transform: none; box-shadow: none; }
    .price-card:hover { transform: none; box-shadow: none; }
    .module-card:active { transform: scale(0.98); }
    .price-card:active { transform: scale(0.98); }
}

/* ─── 打印样式 ────────────────────────────────────────────────────────────── */
@media print {
    body { background: #fff !important; color: #000 !important; }
    .navbar, .top-nav { display: none; }
    .btn { display: none; }
}