:root{
  --bg:#0B1120; --panel:rgba(18,25,42,.72); --panel-2:rgba(12,17,29,.95);
  --line:rgba(120,160,255,.14); --grid:rgba(120,160,255,.06);
  --text:#E8EEF7; --muted:rgba(232,238,247,.60); --muted2:rgba(232,238,247,.40);
  --cyan:#35E0E6; --blue:#5E9FE8; --green:#3FD08A; --amber:#F5B23D; --orange:#DE9255; --red:#FF5C6C; --purple:#B98CF0; --pink:#E77AD8;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:radial-gradient(1200px 700px at 20% -10%, #10203f 0%, transparent 55%),
             radial-gradient(1100px 650px at 100% 110%, #131a3a 0%, transparent 55%),
             #070B14;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Hiragino Sans GB",Roboto,sans-serif;
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
#viewport{position:fixed; inset:0; overflow:hidden;}
.stage{
  position:absolute; top:0; left:0; width:1920px; height:1080px; padding:24px;
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:72px 100px 1fr 40px; gap:16px; overflow:hidden;
  transform-origin:top left; background:transparent;
}
/* ---- background fx ---- */
.bg-grid{position:absolute; inset:0; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:48px 48px; mask-image:radial-gradient(ellipse at 50% 40%,#000 55%,transparent 100%); pointer-events:none;}
.bg-glow{position:absolute; border-radius:50%; filter:blur(90px); opacity:.35; pointer-events:none;}
.bg-glow.g1{width:620px;height:620px; left:-120px; top:120px; background:radial-gradient(circle,#1f5fd0,transparent 70%); animation:float1 18s ease-in-out infinite;}
.bg-glow.g2{width:520px;height:520px; right:-100px; bottom:-60px; background:radial-gradient(circle,#0e8f9e,transparent 70%); animation:float2 22s ease-in-out infinite;}
.scanline{position:absolute; inset:0; background:linear-gradient(rgba(120,180,255,.05) 1px,transparent 1px); background-size:100% 4px; mix-blend-mode:overlay; opacity:.35; pointer-events:none;}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-30px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,30px)}}
/* ---- topbar ---- */
.topbar{position:relative; display:flex; align-items:center; justify-content:space-between; z-index:2;}
.brand{display:flex; align-items:center; gap:16px;}
.logo{width:46px;height:46px;border-radius:11px; background:linear-gradient(145deg,#1a3a7a,#0c1a3a); border:1px solid rgba(120,160,255,.35); display:flex;align-items:center;justify-content:center; box-shadow:0 0 24px rgba(53,224,230,.25) inset,0 0 18px rgba(53,224,230,.15);}
.logo span{width:20px;height:20px;border-radius:6px; background:conic-gradient(from 120deg,var(--cyan),var(--blue),var(--purple),var(--cyan)); box-shadow:0 0 14px var(--cyan);}
.brand-txt .t1{font-size:26px; font-weight:700; letter-spacing:2px;}
.brand-txt .t2{font-size:12px; letter-spacing:3px; color:var(--muted2); margin-top:3px;}
.clockbox{position:absolute; left:50%; transform:translateX(-50%); text-align:center;}
.clock{font-size:34px; font-weight:700; letter-spacing:4px; font-variant-numeric:tabular-nums; color:#fff; text-shadow:0 0 18px rgba(53,224,230,.35);}
.datebox{font-size:13px; color:var(--muted); letter-spacing:2px; margin-top:2px;}
.statusbar{display:flex; align-items:center; gap:10px;}
.stat{display:flex; align-items:center; gap:7px; font-size:14px;}
.stat .k,.portfolio-switch .k{color:var(--muted2); white-space:nowrap;}
.portfolio-switch{display:flex;align-items:center;gap:7px;font-size:14px;}
.portfolio-select{height:34px;max-width:154px;padding:0 30px 0 12px;border-radius:999px;border:1px solid rgba(53,224,230,.42);background:#101a2d;color:var(--text);font:600 13px inherit;letter-spacing:.4px;cursor:pointer;outline:none;box-shadow:0 0 14px rgba(53,224,230,.08) inset;}
.portfolio-select:hover,.portfolio-select:focus{border-color:var(--cyan);box-shadow:0 0 16px rgba(53,224,230,.16);}
.stat .v{font-weight:600; font-variant-numeric:tabular-nums;}
.pill{padding:4px 12px; border-radius:999px; font-size:13px; font-weight:700; letter-spacing:1px; border:1px solid var(--line); background:rgba(255,255,255,.04);}
.pill.sm{font-size:12px; padding:2px 9px;}
.pill.live{color:#0a1a10; background:var(--green); border-color:transparent;}
.pill.mock{color:#241a06; background:var(--amber); border-color:transparent;}
.pill.rg-平静{color:#0a1a10;background:var(--green);border-color:transparent;}
.pill.rg-偏紧{color:#06182b;background:var(--blue);border-color:transparent;}
.pill.rg-承压{color:#241a06;background:var(--amber);border-color:transparent;}
.pill.rg-告警{color:#2b060a;background:var(--red);border-color:transparent; animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,92,108,.5)}50%{box-shadow:0 0 0 8px rgba(255,92,108,0)}}
.btn{cursor:pointer; border:1px solid rgba(120,160,255,.35); background:rgba(53,224,230,.10); color:var(--text); padding:8px 16px; border-radius:9px; font-size:14px; font-weight:600; letter-spacing:1px; transition:.15s;}
.btn:hover{background:rgba(53,224,230,.20); border-color:var(--cyan);}
.btn.ghost{background:rgba(255,255,255,.03);}
.btn.xs{padding:3px 10px; font-size:12px;}
/* ---- kpi ---- */
.kpi{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; z-index:2; min-width:0;}
.kpi-card{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:11px 16px; overflow:hidden; min-width:0; display:flex; flex-direction:column; justify-content:space-between;}
.kpi-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent,var(--cyan)); box-shadow:0 0 14px var(--accent,var(--cyan));}
.kpi-top{display:flex; align-items:baseline; justify-content:space-between; line-height:1.1;}
.kpi-label{font-size:14px; color:var(--muted); letter-spacing:1px;}
.kpi-sub{font-size:11px; color:var(--muted2);}
.kpi-val{font-size:34px; font-weight:700; line-height:1.0; font-variant-numeric:tabular-nums; margin-top:1px;}
.kpi-val .u{font-size:16px; font-weight:600; color:var(--muted); margin-left:3px;}
.kpi-bot{display:flex; align-items:center; justify-content:space-between; margin-top:2px;}
.kpi-delta{font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;}
.kpi-delta.up{color:var(--red);} .kpi-delta.down{color:var(--green);} .kpi-delta.flat{color:var(--muted2);}
.kpi-spark{width:96px; height:22px;}
/* ---- body grid ---- */
.body{display:grid; grid-template-columns:396px minmax(0,1fr) 396px; gap:16px; min-height:0; min-width:0; z-index:2;}
.col{display:grid; gap:16px; min-height:0; min-width:0;}
.col-left{grid-template-rows:356px minmax(0,1fr);}
.col-center{grid-template-rows:356px minmax(0,1fr); min-width:0;}
.col-right{grid-template-rows:356px minmax(0,1fr);}
.center-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; min-height:0; min-width:0;}
/* ---- card ---- */
.card{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:12px; display:flex; flex-direction:column; min-height:0; min-width:0; overflow:hidden; backdrop-filter:blur(4px);}
.card-h{display:flex; align-items:center; gap:10px; padding:12px 16px 8px; flex:0 0 auto;}
.card-h h3{font-size:16px; font-weight:600; letter-spacing:1px; white-space:nowrap;}
.card-h .tab{width:4px; height:16px; border-radius:2px; background:var(--cyan); box-shadow:0 0 10px var(--cyan);}
.card-h .tab.red{background:var(--red); box-shadow:0 0 10px var(--red);}
.card-h .tab.cyan{background:var(--cyan);}
.card-h .meta{margin-left:auto; font-size:12px; color:var(--muted2); letter-spacing:1px; white-space:nowrap;}
.card-b{position:relative; flex:1 1 auto; min-height:0; padding:6px 12px 12px;}
.card-b.nopad{padding:0;}
.fill{position:absolute; inset:6px 12px 12px;}
.card-b .fill{inset:0;}
.legend{display:flex; gap:14px; margin-left:14px;}
.legend .lg{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted);}
.legend .lg i{width:12px; height:4px; border-radius:2px; display:inline-block;}
/* ---- heatmap ---- */
#heat{overflow:auto;padding-right:5px;scrollbar-width:thin;scrollbar-color:rgba(120,160,255,.38) transparent;}
#heat::-webkit-scrollbar{width:6px;height:6px;}
#heat::-webkit-scrollbar-thumb{background:rgba(120,160,255,.32);border-radius:4px;}
#heat::-webkit-scrollbar-track{background:transparent;}
.heat{display:grid; min-height:100%; height:max-content; gap:3px; padding:2px; grid-auto-rows:31px; align-content:start;}
.heat-cell{display:flex; align-items:center; justify-content:center; border-radius:5px; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.65); position:relative;}
.heat-cell.lbl{background:transparent; color:var(--muted); font-weight:600; font-size:13px; justify-content:flex-end; padding-right:8px; text-shadow:none; white-space:nowrap;}
.heat-cell.col{background:rgba(15,23,39,.97); color:var(--muted); font-weight:600; font-size:12.5px; text-shadow:none; position:sticky; top:0; z-index:4; cursor:pointer; user-select:none; border:1px solid transparent;}
.heat-cell.col:hover{color:var(--cyan);border-color:rgba(53,224,230,.28);}
.heat-cell.col.active{color:#fff;border-color:rgba(53,224,230,.42);box-shadow:0 4px 12px rgba(0,0,0,.24);}
/* ---- alerts ---- */
.alerts{position:absolute; inset:0; overflow:hidden;}
.alerts-track{display:flex; flex-direction:column;}
.al-row{display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.05); border-left:3px solid var(--sev,var(--blue)); cursor:pointer;}
.al-row:hover{background:rgba(120,160,255,.07);}
.al-dot{width:9px;height:9px;border-radius:50%; background:var(--sev,var(--blue)); box-shadow:0 0 10px var(--sev,var(--blue)); flex:0 0 auto;}
.al-main{flex:1 1 auto; min-width:0;}
.al-name{font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.al-name .code{color:var(--muted2); font-size:12px; font-weight:500; margin-left:6px;}
.al-metric{font-size:12.5px; color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.al-sev{display:inline-block;margin-left:5px;padding:1px 5px;border-radius:8px;border:1px solid currentColor;font-size:9px;line-height:1.25;opacity:.78;vertical-align:1px;}
.al-right{text-align:right; flex:0 0 auto;}
.al-val{font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--sev,var(--blue));}
.al-time{font-size:11px; color:var(--muted2);}
@keyframes ascroll{from{transform:translateY(0)}to{transform:translateY(var(--scroll,-50%))}}
/* ---- ai ---- */
.ai{position:absolute; inset:0; padding:2px 4px; overflow:auto;}
.ai-bullet{display:flex; gap:9px; padding:8px 6px; font-size:14px; line-height:1.5; color:#dfe7f3; border-bottom:1px dashed rgba(255,255,255,.06);}
.ai-bullet i{color:var(--cyan); flex:0 0 auto; font-style:normal; font-weight:700;}
/* ---- footer ---- */
.footer{display:flex; align-items:center; gap:20px; border-top:1px solid var(--line); padding-top:8px; z-index:2;}
.disclaimer{font-size:12.5px; color:var(--muted2); letter-spacing:.5px; white-space:nowrap; flex:0 0 auto;}
.ticker{flex:1 1 auto; overflow:hidden; height:24px; border-left:1px solid var(--line); padding-left:16px;}
.ticker-track{display:inline-flex; gap:34px; white-space:nowrap; animation:marquee 40s linear infinite; will-change:transform;}
.tk{font-size:13.5px; font-variant-numeric:tabular-nums; color:var(--muted);}
.tk b{color:var(--text); font-weight:600; margin-right:8px;}
.tk .up{color:var(--red);} .tk .down{color:var(--green);}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ---- drilldown ---- */
.drill{position:absolute; inset:0; z-index:20;}
.drill.hidden{display:none;}
.drill-mask{position:absolute; inset:0; background:rgba(4,8,16,.55); backdrop-filter:blur(2px);}
.drill-panel{position:absolute; right:0; top:0; bottom:0; width:640px; background:var(--panel-2); border-left:1px solid var(--line); box-shadow:-20px 0 60px rgba(0,0,0,.5); padding:22px 24px; display:flex; flex-direction:column; gap:16px; animation:slidein .22s ease;}
@keyframes slidein{from{transform:translateX(30px);opacity:.4}to{transform:translateX(0);opacity:1}}
.drill-h{display:flex; align-items:flex-start; justify-content:space-between;}
.drill-h .dn{font-size:24px; font-weight:700;}
.drill-h .ds{font-size:13px; color:var(--muted); margin-top:4px; letter-spacing:1px;}
.drill-body{flex:1 1 auto; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:16px;}
.dmetrics{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.dmetric{background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:9px; padding:10px 12px;}
.dmetric .l{font-size:12px; color:var(--muted2);}
.dmetric .v{font-size:21px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:3px;}
.dsec{background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:9px; padding:12px;}
.dsec h4{font-size:13px; color:var(--muted); font-weight:600; margin-bottom:8px; letter-spacing:1px;}
.dsec .note{font-size:12px; color:var(--amber); margin-top:8px;}
.dchart{width:100%; height:150px;}
.dcomment{font-size:14px; line-height:1.6; color:#dfe7f3;}
/* svg text defaults */
text{font-family:inherit;}
.ax{fill:var(--muted2); font-size:12px;}
.axk{fill:var(--muted); font-size:12px; font-variant-numeric:tabular-nums;}
.toast{position:absolute; right:24px; top:120px; transform:none; max-width:340px; background:rgba(18,25,42,.95); border:1px solid var(--line); color:var(--text); padding:10px 18px; border-radius:10px; font-size:14px; z-index:40; box-shadow:0 10px 30px rgba(0,0,0,.4);}
@media (prefers-reduced-motion: reduce){*{animation:none !important;}}

/* ===== 11点详审：交互与 tooltip 增强 ===== */
.tip{position:fixed;z-index:9999;pointer-events:none;background:rgba(10,16,28,.96);border:1px solid rgba(120,160,255,.28);border-radius:8px;padding:8px 10px;font-size:12px;color:#d7e2f4;box-shadow:0 10px 30px rgba(0,0,0,.5);min-width:130px;max-width:280px;line-height:1.5}
.tip .tt-h{font-weight:700;color:#fff;margin-bottom:4px;font-size:12.5px}
.tip .tt-r{display:flex;justify-content:space-between;gap:16px}
.tip .tt-r span{color:#8b9bb5;white-space:nowrap}
.tip .tt-r b{color:#eaf1fb;font-variant-numeric:tabular-nums}
.tip .tt-r b.tup{color:#3FD08A}
.tip .tt-r b.tdn{color:#FF5C6C}
.tip .tt-x{margin-top:5px;color:#7f8ea8;font-size:11px;border-top:1px solid rgba(120,160,255,.14);padding-top:4px}
.al-no{font-size:11px;color:#6b7a95;font-variant-numeric:tabular-nums;min-width:18px;text-align:right;margin-right:2px;font-weight:700}
#alerts{scrollbar-width:thin;scrollbar-color:rgba(120,160,255,.35) transparent}
#alerts::-webkit-scrollbar{width:6px}
#alerts::-webkit-scrollbar-thumb{background:rgba(120,160,255,.30);border-radius:3px}
#alerts::-webkit-scrollbar-track{background:transparent}
.heat-cell.lbl{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1px;cursor:pointer;transition:background .15s}
.heat-cell.lbl:hover{background:rgba(120,160,255,.14)}
.heat-cell.lbl .hl-name{font-size:12px;color:#d5e0f2;line-height:1.15}
.heat-cell.lbl .hl-cnt{font-size:10px;color:#7d8ca6}
.heat-cell.hc{cursor:pointer;min-height:31px}
.heat-cell.col .sort-arrow{margin-left:4px;font-size:10px;color:#6f809e}
.heat-cell.col.active .sort-arrow{color:var(--cyan)}
.sector-list{display:flex;flex-direction:column;gap:2px}
.sl-row{display:grid;grid-template-columns:1.5fr .85fr .95fr .8fr .7fr;gap:6px;align-items:center;padding:7px 8px;border-radius:7px;background:rgba(120,160,255,.05)}
.sl-row:hover{background:rgba(120,160,255,.12)}
.sl-head{background:transparent;color:#8b9bb5;font-size:11px;padding:2px 8px}
.sl-c{font-size:12px;color:#cfdaec;font-variant-numeric:tabular-nums}
.sl-c.up{color:#3FD08A}
.sl-c.down{color:#FF5C6C}
.sl-c.nm{display:flex;flex-direction:column;gap:1px;color:#eaf1fb;font-weight:600}
.sl-c.nm .code{font-size:10px;color:#7d8ca6;font-weight:400}
.risk-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.dsec h4 .h4sub{display:block;font-size:11px;color:#8b9bb5;font-weight:400;margin-top:3px}
.tk .tkc{color:#7d8ca6;font-size:11px;margin:0 6px 0 4px}