/* 金融实时看板 - 深色主题 (红涨绿跌) */
:root {
    --bg: #0f1218; --bg2: #161b22; --bg3: #1c2129; --bg-hover: #252a36;
    --border: #2a3040; --text: #c9d1d9; --text2: #8b949e; --text-muted: #555b68;
    --up: #f85149; --down: #3fb950;
    --orange: #d2991d; --accent: #1f6feb;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,'Microsoft YaHei',sans-serif; background:var(--bg); color:var(--text); height:100vh; overflow-x:hidden; }

/* Ticker */
.ticker-bar { background:var(--bg2); border-bottom:1px solid var(--border); height:44px; overflow:hidden; position:sticky; top:0; z-index:100; display:flex; align-items:center; }
.ticker-label { background:var(--bg2); height:44px; display:flex; align-items:center; padding:0 16px; font-weight:700; font-size:13px; color:var(--accent); border-right:2px solid var(--accent); position:absolute; z-index:10; }
.ticker-wrap { display:flex; animation:scroll 80s linear infinite; padding-left:110px; }
@keyframes scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.ticker-item { display:inline-flex; align-items:center; gap:8px; padding:0 20px; font-size:13px; font-family:monospace; border-right:1px solid var(--border); height:44px; white-space:nowrap; }
.ticker-name { color:var(--text2); font-size:12px; }
.ticker-price { font-weight:600; }
.ticker-chg.up { color:var(--up); } .ticker-chg.down { color:var(--down); }

/* Nav */
.nav { background:var(--bg2); border-bottom:1px solid var(--border); display:flex; padding:0 12px; gap:2px; position:sticky; top:44px; z-index:99; }
.nav-btn { padding:10px 18px; font-size:13px; color:var(--text2); cursor:pointer; border:none; background:none; border-bottom:2px solid transparent; }
.nav-btn:hover { color:var(--text); } .nav-btn.on { color:var(--accent); border-bottom-color:var(--accent); }

/* Content */
.tab { display:none; padding:14px; } .tab.on { display:block; }

/* Cards */
.card { background:var(--bg3); border:1px solid var(--border); border-radius:6px; padding:14px; cursor:pointer; transition:border-color .15s; }
.card:hover { border-color:var(--accent); }
.card-hd { font-size:12px; color:var(--text2); margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px; }
.card-price { font-size:24px; font-weight:700; font-family:monospace; }
.card-chg { font-size:13px; font-family:monospace; margin-top:2px; }
.card-chg.up { color:var(--up); } .card-chg.down { color:var(--down); }

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px;}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}

/* Charts */
.chart-box { background:var(--bg3); border:1px solid var(--border); border-radius:6px; overflow:hidden; margin-bottom:10px; }
.chart-title { padding:8px 14px; font-size:13px; font-weight:600; border-bottom:1px solid var(--border); }
.chart-body{height:300px;} .chart-body-lg{height:380px;}

/* ETF table */
.etf-tbl-wrap { max-height:70vh; overflow-y:auto; border:1px solid var(--border); border-radius:8px; }
.etf-tbl { width:100%; border-collapse:collapse; font-size:13px; }
.etf-tbl thead { position:sticky; top:0; z-index:2; }
.etf-tbl th { text-align:left; padding:9px 14px; color:var(--text2); font-weight:500; border-bottom:2px solid var(--border); font-size:11px; background:var(--bg2); letter-spacing:.3px; }
.etf-tbl td { padding:7px 14px; border-bottom:1px solid rgba(42,48,64,0.4); }
.etf-tbl tbody tr { transition:background .1s; }
.etf-tbl tbody tr:hover { background:var(--bg-hover); }
.etf-tbl .col-code { color:var(--text-muted); font-family:monospace; font-size:12px; }
.etf-tbl .col-name { cursor:pointer; }
.etf-tbl .col-name:hover { color:var(--accent); }
.etf-tbl .col-cat { font-size:11px; color:var(--text-muted); }
.etf-tbl .col-price { font-family:monospace; font-weight:600; text-align:right; }
.etf-tbl .col-chg { font-family:monospace; font-weight:600; text-align:right; }
.etf-tbl .col-vol { color:var(--text-muted); font-family:monospace; text-align:right; font-size:11px; }
.etf-tbl .up { color:var(--up); } .etf-tbl .down { color:var(--down); }

/* ETF cards */
.etf-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px; }
.etf-item { background:var(--bg3); border:1px solid var(--border); border-radius:6px; padding:10px; cursor:pointer; }
.etf-item:hover { border-color:var(--accent); }
.etf-name { font-size:12px; color:var(--text2); } .etf-code { font-size:10px; color:var(--text-muted); margin:2px 0 4px; }
.etf-price { font-size:16px; font-weight:700; font-family:monospace; }
.etf-chg { font-size:12px; font-family:monospace; }
.etf-chg.up { color:var(--up); } .etf-chg.down { color:var(--down); }

/* Calendar */
.cal-list{list-style:none;}
.cal-item{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--border);}
.cal-date{font-family:monospace;font-size:12px;color:var(--text2);min-width:85px;}
.cal-dot{width:8px;height:8px;border-radius:50%;}
.cal-dot.high{background:var(--up);} .cal-dot.medium{background:var(--orange);}
.cal-event{flex:1;font-size:13px;} .cal-country{font-size:12px;color:var(--text2);}

/* Detail overlay */
.overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.85);z-index:200;justify-content:center;align-items:center;}
.overlay.on{display:flex;}
.dlg{background:var(--bg);border:1px solid var(--border);border-radius:10px;width:92vw;max-width:1100px;height:88vh;display:flex;flex-direction:column;}
.dlg-hd{display:flex;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);}
.dlg-title{font-size:16px;font-weight:700;} .dlg-price{font-size:22px;font-weight:700;font-family:monospace;}
.dlg-close{background:none;border:none;color:var(--text2);font-size:22px;cursor:pointer;padding:4px 10px;}
.dlg-bar{display:flex;gap:6px;padding:6px 20px;border-bottom:1px solid var(--border);background:var(--bg2);}
.bar-btn{padding:4px 14px;font-size:12px;background:var(--bg3);border:1px solid var(--border);color:var(--text2);border-radius:4px;cursor:pointer;}
.bar-btn:hover{border-color:var(--accent);} .bar-btn.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.dlg-chart{flex:1;}

/* Loading */
.ld{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text2);font-size:13px;}
.ld::after{content:'';width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin-left:8px;}
@keyframes spin{to{transform:rotate(360deg);}}
.section-title{font-size:13px;color:var(--text2);margin:12px 0 8px;}
@media(max-width:900px){.grid4,.grid5{grid-template-columns:1fr 1fr;}.grid3{grid-template-columns:1fr 1fr;}}

/* ===== 宏观紧凑布局 ===== */
.macro-tab { padding: 6px 8px; }
.macro-row { display: flex; gap: 8px; margin-bottom: 6px; }
.macro-label { font-size: 10px; color: var(--text-muted); margin-bottom: 4px; letter-spacing: .3px; text-transform: uppercase; }
.macro-col-1 { flex: 1; min-width: 0; }
.macro-col-2 { flex: 2; min-width: 0; }
.macro-col-3 { flex: 3; min-width: 0; }
.macro-col-full { flex: 1; min-width: 0; }

/* 宏观tab内所有卡片紧凑 */
.macro-tab .card { padding: 7px 9px; }
.macro-tab .card-hd { font-size: 10px; margin-bottom: 2px; }
.macro-tab .card-price { font-size: 16px; }
.macro-tab .card-chg { font-size: 11px; margin-top: 1px; }

/* 宏观tab内网格间距收窄 */
.macro-tab .grid2, .macro-tab .grid3, .macro-tab .grid4, .macro-tab .grid5 { gap: 5px; }

/* 债券图表高度 */
.macro-chart { height: 170px !important; }

/* 债券卡片紧凑 */
.macro-tab .chart-box { margin-bottom: 0; }
.macro-tab .chart-title { padding: 4px 10px; font-size: 11px; }

/* 响应式：小屏幕改为垂直堆叠 */
@media(max-width:768px){
    .macro-row { flex-direction: column; gap: 8px; }
    .macro-col-1, .macro-col-2, .macro-col-3 { flex: none; }
}