/* ============================================================
   全球宏观—金融市场实时监控平台 · 样式
   深色交易终端风（默认） + 浅色研报风（可切换）
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}

body[data-theme="dark"]{
  --bg:#080c13;
  --bg-grad:radial-gradient(1200px 700px at 12% -8%, rgba(76,141,255,.13), transparent 55%),
            radial-gradient(1000px 600px at 92% 4%, rgba(140,90,255,.10), transparent 55%),
            #080c13;
  --panel:rgba(19,27,40,.78);
  --panel-solid:#111a27;
  --panel-hi:rgba(30,41,59,.72);
  --border:rgba(255,255,255,.075);
  --border-hi:rgba(255,255,255,.16);
  --ink:#e9eff8;
  --ink2:#a9b8cd;
  --muted:#6f8098;
  --up:#ff5257;
  --down:#12c96e;
  --flat:#7d8ea6;
  --accent:#4c8dff;
  --accent2:#8b5cf6;
  --gold:#f5b942;
  --shadow:0 8px 30px rgba(0,0,0,.42);
  --glow:0 0 0 1px rgba(76,141,255,.5), 0 0 22px rgba(76,141,255,.28);
  --grid-line:rgba(255,255,255,.055);
}
body[data-theme="light"]{
  --bg:#eef1f6;
  --bg-grad:radial-gradient(1100px 620px at 10% -10%, rgba(76,141,255,.10), transparent 60%), #eef1f6;
  --panel:#ffffff;
  --panel-solid:#ffffff;
  --panel-hi:#f5f7fb;
  --border:#e2e8f0;
  --border-hi:#cbd5e1;
  --ink:#152030;
  --ink2:#46586f;
  --muted:#7b8ca3;
  --up:#d92b2b;
  --down:#11884a;
  --flat:#8a99ac;
  --accent:#1f5fbf;
  --accent2:#6d43d1;
  --gold:#b8801a;
  --shadow:0 6px 22px rgba(20,40,80,.08);
  --glow:0 0 0 1px rgba(31,95,191,.45), 0 0 18px rgba(31,95,191,.18);
  --grid-line:rgba(0,0,0,.05);
}

body{
  background:var(--bg-grad);background-attachment:fixed;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:13px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100%;
}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
.up{color:var(--up)!important;}
.down{color:var(--down)!important;}
.flat{color:var(--flat)!important;}
.hide{display:none!important;}

.app{max-width:1720px;margin:0 auto;padding:12px 16px 40px;}

/* ---------------- Header ---------------- */
.hdr{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--panel);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--border);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow);
  margin-bottom:12px;
}
.brand{display:flex;align-items:center;gap:11px;min-width:280px;}
.logo{
  width:38px;height:38px;border-radius:11px;flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;color:#fff;letter-spacing:-.5px;
  box-shadow:0 4px 16px rgba(76,141,255,.35);
}
.brand h1{font-size:15.5px;font-weight:700;letter-spacing:-.2px;white-space:nowrap;}
.brand .sub{font-size:11px;color:var(--muted);letter-spacing:.2px;}

.clockbar{display:flex;gap:10px;flex-wrap:wrap;flex:1;}
.mkt{
  display:flex;align-items:center;gap:8px;padding:5px 11px;border-radius:9px;
  background:var(--panel-hi);border:1px solid var(--border);min-width:150px;
}
.dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--muted);}
.dot.on{background:var(--down);box-shadow:0 0 0 3px rgba(18,201,110,.18);animation:pulse 1.8s infinite;}
.dot.off{background:#5b6b82;}
.dot.pre{background:var(--gold);box-shadow:0 0 0 3px rgba(245,185,66,.16);}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.mkt .nm{font-size:11.5px;font-weight:600;}
.mkt .tm{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;}
.mkt .st{font-size:10.5px;padding:1px 6px;border-radius:5px;background:rgba(120,140,170,.18);color:var(--ink2);}

.hdr-right{display:flex;align-items:center;gap:8px;margin-left:auto;}
.chip{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:4px 10px;border-radius:8px;
  background:var(--panel-hi);border:1px solid var(--border);color:var(--ink2);cursor:default;white-space:nowrap;
}
.chip.link{cursor:pointer;}
.chip.link:hover{border-color:var(--border-hi);color:var(--ink);}
.led{width:7px;height:7px;border-radius:50%;background:var(--down);box-shadow:0 0 8px var(--down);}
.led.bad{background:var(--up);box-shadow:0 0 8px var(--up);}
.led.warn{background:var(--gold);box-shadow:0 0 8px var(--gold);}
.btn{
  background:var(--panel-hi);border:1px solid var(--border);color:var(--ink2);
  padding:5px 11px;border-radius:8px;font-size:11.5px;cursor:pointer;transition:.15s;white-space:nowrap;
}
.btn:hover{border-color:var(--border-hi);color:var(--ink);}
.btn.pri{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;}
.btn.pri:hover{filter:brightness(1.08);}
.btn.sm{padding:3px 8px;font-size:11px;}

/* ---------------- 指数条 ---------------- */
.idxstrip{
  display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:12px;
}
@media(max-width:1500px){.idxstrip{grid-template-columns:repeat(4,1fr);}}
@media(max-width:1000px){.idxstrip{grid-template-columns:repeat(2,1fr);}}
.ix{
  background:var(--panel);backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:12px;padding:10px 12px;
  position:relative;overflow:hidden;transition:border-color .25s, transform .25s;
}
.ix:hover{border-color:var(--border-hi);transform:translateY(-1px);}
.ix .top{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-bottom:5px;}
.ix .nm{font-size:11.5px;color:var(--ink2);font-weight:600;}
.ix .tag{font-size:9.5px;color:var(--muted);padding:1px 5px;border-radius:4px;background:rgba(120,140,170,.14);}
.ix .px{font-size:19px;font-weight:700;letter-spacing:-.5px;line-height:1.15;}
.ix .ch{font-size:11.5px;font-weight:600;margin-top:2px;}
.ix .mini{margin-top:6px;height:26px;}
.ix .bar{position:absolute;left:0;bottom:0;height:2px;width:100%;opacity:.75;}
.ix.flash{ animation:fl .55s ease-out; }
@keyframes fl{0%{background:rgba(255,255,255,.09)}100%{background:transparent}}

/* ---------------- 布局 ---------------- */
.main{display:grid;grid-template-columns:minmax(0,2.05fr) minmax(0,1fr);gap:12px;align-items:start;}
@media(max-width:1180px){.main{grid-template-columns:1fr;}}
.col{display:flex;flex-direction:column;gap:12px;min-width:0;}

.panel{
  background:var(--panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);
  overflow:hidden;display:flex;flex-direction:column;
}
.ph{
  display:flex;align-items:center;gap:9px;padding:10px 14px;
  border-bottom:1px solid var(--border);flex-wrap:wrap;
}
.ph h2{font-size:12.5px;font-weight:700;letter-spacing:.2px;white-space:nowrap;}
.ph .hint{font-size:10.5px;color:var(--muted);}
.ph .right{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.pb{padding:12px 14px;}
.pb.p0{padding:0;}

.seg{display:flex;gap:3px;background:var(--panel-hi);border:1px solid var(--border);border-radius:8px;padding:2px;}
.seg button{
  background:transparent;border:none;color:var(--muted);font-size:11px;padding:3px 9px;border-radius:6px;
  cursor:pointer;transition:.15s;white-space:nowrap;font-family:inherit;
}
.seg button:hover{color:var(--ink);}
.seg button.on{background:var(--accent);color:#fff;}

/* ---------------- 图表 ---------------- */
.chart{width:100%;height:290px;}
.chart.tall{height:340px;}
.chart.mini{height:210px;}

/* ---------------- 表格 ---------------- */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;}
.tbl th{
  text-align:right;font-weight:600;color:var(--muted);font-size:10.5px;
  padding:6px 8px;background:var(--panel-hi);position:sticky;top:0;z-index:2;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
.tbl th:first-child,.tbl th.l{text-align:left;}
.tbl td{
  padding:5px 8px;text-align:right;border-bottom:1px solid var(--grid-line);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.tbl td:first-child,.tbl td.l{text-align:left;}
.tbl tbody tr{transition:background .15s;}
.tbl tbody tr:hover{background:var(--panel-hi);}
.tbl .nm{font-weight:600;}
.tbl .cd{font-size:10px;color:var(--muted);margin-left:5px;}
.scroll{max-height:330px;overflow:auto;}
.scroll::-webkit-scrollbar{width:7px;height:7px;}
.scroll::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:4px;}
.scroll::-webkit-scrollbar-track{background:transparent;}

/* ---------------- 热力图 ---------------- */
.heat{display:flex;flex-wrap:wrap;gap:4px;}
.hc{
  flex:1 1 118px;min-width:96px;border-radius:8px;padding:7px 9px;cursor:default;
  border:1px solid transparent;transition:transform .15s,border-color .15s;
}
.hc:hover{transform:translateY(-2px);border-color:var(--border-hi);}
.hc .n{font-size:11.5px;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);}
.hc .c{font-size:14px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.35);}
.hc .f{font-size:10px;color:rgba(255,255,255,.86);}
.hc .ldr{font-size:10px;color:rgba(255,255,255,.72);}

/* ---------------- 资金流条 ---------------- */
.flowrow{display:flex;align-items:center;gap:9px;padding:4px 0;}
.flowrow .nm{font-size:11.5px;width:104px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.flowrow .track{flex:1;height:15px;background:var(--panel-hi);border-radius:4px;position:relative;overflow:hidden;}
.flowrow .fill{height:100%;border-radius:4px;transition:width .4s;}
.flowrow .vv{font-size:11px;width:70px;text-align:right;flex:none;font-variant-numeric:tabular-nums;}

/* ---------------- 预警 ---------------- */
.alerts{max-height:300px;overflow:auto;display:flex;flex-direction:column;}
.al{
  display:flex;gap:8px;padding:7px 12px;border-bottom:1px solid var(--grid-line);
  animation:slideIn .35s ease-out;font-size:11.5px;
}
@keyframes slideIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.al .lv{width:3px;border-radius:2px;flex:none;background:var(--muted);}
.al.high .lv{background:var(--up);box-shadow:0 0 8px var(--up);}
.al.mid .lv{background:var(--gold);}
.al.info .lv{background:var(--accent);}
.al .bd{flex:1;min-width:0;}
.al .tx{color:var(--ink);word-break:break-word;}
.al .mt{font-size:10px;color:var(--muted);margin-top:2px;display:flex;gap:7px;}
.al .kd{padding:0 5px;border-radius:4px;background:rgba(120,140,170,.16);}

/* ---------------- 资讯 ---------------- */
.news{max-height:330px;overflow:auto;}
.ni{padding:8px 12px;border-bottom:1px solid var(--grid-line);transition:background .15s;cursor:default;}
.ni:hover{background:var(--panel-hi);}
.ni .t{font-size:11.5px;font-weight:600;line-height:1.5;}
.ni .m{font-size:10px;color:var(--muted);margin-top:3px;display:flex;gap:8px;}

/* ---------------- 商品条 ---------------- */
.comm{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;}
.cm{
  background:var(--panel-hi);border:1px solid var(--border);border-radius:9px;padding:7px 10px;
}
.cm .n{font-size:10.5px;color:var(--muted);}
.cm .p{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.3px;}
.cm .c{font-size:10.5px;font-weight:600;}

/* ---------------- 宽度 ---------------- */
.bwrap{display:flex;flex-direction:column;gap:9px;}
.bbar{display:flex;height:13px;border-radius:6px;overflow:hidden;background:var(--panel-hi);}
.bbar div{transition:width .5s;}
.bstat{display:flex;justify-content:space-between;font-size:11px;}
.bstat b{font-size:14px;font-variant-numeric:tabular-nums;}

/* ---------------- 选股器 ---------------- */
.screener{display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.fld{display:flex;align-items:center;gap:5px;}
.fld label{font-size:11px;color:var(--muted);white-space:nowrap;}
.fld input{
  width:66px;background:var(--panel-hi);border:1px solid var(--border);color:var(--ink);
  border-radius:7px;padding:4px 7px;font-size:11.5px;font-family:inherit;outline:none;
}
.fld input:focus{border-color:var(--accent);box-shadow:var(--glow);}
.fld input.wide{width:104px;}

/* ---------------- 自选 ---------------- */
.wt{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;}
.wt th{
  text-align:right;font-size:10.5px;font-weight:600;color:var(--muted);
  padding:6px 8px;background:var(--panel-hi);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:2;cursor:pointer;white-space:nowrap;user-select:none;
}
.wt th:hover{color:var(--ink);}
.wt th:first-child,.wt th.l{text-align:left;cursor:default;}
.wt th.on{color:var(--accent);}
.wt td{padding:6px 8px;text-align:right;border-bottom:1px solid var(--grid-line);font-variant-numeric:tabular-nums;white-space:nowrap;}
.wt td:first-child,.wt td.l{text-align:left;}
.wt tbody tr:hover{background:var(--panel-hi);}
.wt .spark{width:78px;height:24px;display:block;}
.wt .del{color:var(--muted);cursor:pointer;font-size:14px;padding:0 3px;line-height:1;}
.wt .del:hover{color:var(--up);}
.addbox{display:flex;gap:6px;align-items:center;}
.addbox input{
  width:150px;background:var(--panel-hi);border:1px solid var(--border);color:var(--ink);
  border-radius:8px;padding:5px 9px;font-size:12px;font-family:inherit;outline:none;
}
.addbox input:focus{border-color:var(--accent);box-shadow:var(--glow);}

/* ---------------- 页脚 ---------------- */
.foot{
  margin-top:14px;padding:12px 16px;border-radius:12px;
  background:var(--panel);border:1px solid var(--border);
  font-size:11px;color:var(--muted);line-height:1.75;
}
.foot b{color:var(--ink2);}
.foot .disc{margin-top:7px;padding-top:7px;border-top:1px solid var(--border);}

/* ---------------- toast ---------------- */
#toast{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;z-index:99;}
.tst{
  background:var(--panel-solid);border:1px solid var(--border-hi);border-radius:10px;
  padding:9px 13px;font-size:12px;box-shadow:var(--shadow);animation:slideIn .3s;
  max-width:320px;
}

/* ---------------- 信号层分项微条 ---------------- */
.sbrow{display:flex;gap:3px;margin-top:4px;flex-wrap:wrap;align-items:center;}
.sbrow .sb{display:inline-block;width:26px;height:4px;border-radius:2px;background:var(--panel-hi);overflow:hidden;flex:none;}
.sbrow .sb i{display:block;height:100%;border-radius:2px;}
.sbrow em{font-style:normal;font-size:9px;color:var(--muted);margin-right:5px;letter-spacing:-.2px;white-space:nowrap;}
.sbrow-lg{display:flex;flex-wrap:wrap;gap:5px 12px;align-items:center;}
.sbrow-lg .sb{display:inline-block;width:52px;height:5px;border-radius:3px;background:var(--panel-hi);overflow:hidden;flex:none;}
.sbrow-lg .sb i{display:block;height:100%;}
.sbrow-lg em{font-style:normal;font-size:10px;color:var(--ink2);margin-left:4px;white-space:nowrap;}
#sig-detail .mh{grid-template-columns:112px 1fr;}

/* ---------------- 回放控制 ---------------- */
.rp-ctrl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px;background:var(--panel-hi);border:1px solid var(--border);border-radius:10px;}
.rp-ctrl input[type=range]{
  flex:1;min-width:180px;-webkit-appearance:none;appearance:none;height:5px;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));outline:none;
}
.rp-ctrl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:#fff;cursor:pointer;
  box-shadow:0 0 0 2px var(--accent),0 2px 8px rgba(0,0,0,.35);
}
.rp-time{font-size:14px;font-weight:700;letter-spacing:.4px;min-width:54px;text-align:center;}
.sel{
  background:var(--panel-hi);border:1px solid var(--border);color:var(--ink);border-radius:8px;
  padding:5px 9px;font-size:11.5px;font-family:inherit;outline:none;cursor:pointer;max-width:280px;
}
.sel:focus{border-color:var(--accent);box-shadow:var(--glow);}
.sel option{background:var(--panel-solid);color:var(--ink);}

/* ============================================================
   栅格、KPI 卡片与提示块（信号层/信息影响/自我迭代面板共用）
   注：这些类此前缺失，导致卡片与警示框以裸元素渲染
   ============================================================ */
.grid{display:grid;gap:9px;}
.g2{grid-template-columns:repeat(2,minmax(0,1fr));}
.g3{grid-template-columns:repeat(3,minmax(0,1fr));}
.g4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media(max-width:1180px){.g4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:820px){.g2,.g3,.g4{grid-template-columns:1fr;}}

.kpi{
  background:var(--panel-hi);border:1px solid var(--border);border-radius:10px;
  padding:9px 11px;display:flex;flex-direction:column;gap:2px;min-width:0;
}
.kpi .kk{font-size:10.5px;color:var(--muted);letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kpi .kv{font-size:17px;font-weight:700;letter-spacing:-.3px;font-variant-numeric:tabular-nums;line-height:1.2;}
.kpi .ks{font-size:10px;color:var(--muted);line-height:1.35;}

.note{font-size:11.5px;color:var(--muted);line-height:1.6;}
.sm{font-size:10.5px;color:var(--muted);}

.warnbox{
  background:rgba(245,185,66,.07);border:1px solid rgba(245,185,66,.28);
  border-left:3px solid var(--gold);border-radius:9px;padding:9px 12px;
  font-size:11.5px;color:var(--ink2);line-height:1.65;
}
.warnbox b{color:var(--ink);font-weight:700;}

.card{background:var(--panel-hi);border:1px solid var(--border);border-radius:11px;padding:11px 13px;}

/* 元信息两列网格（详情面板） */
.mh{display:grid;grid-template-columns:96px 1fr;gap:6px 10px;align-items:center;font-size:11.5px;}
.mh>div:nth-child(odd){color:var(--muted);}
.mh>div:nth-child(even){color:var(--ink);font-variant-numeric:tabular-nums;}

/* ---------------- 信息影响面板 ---------------- */
.bdg{
  display:inline-block;padding:1.5px 7px;border-radius:5px;font-size:10.5px;font-weight:700;
  background:rgba(120,140,170,.18);color:var(--ink2);white-space:nowrap;
}
.bdg.up{background:rgba(255,82,87,.16);color:var(--up);}
.bdg.down{background:rgba(18,201,110,.16);color:var(--down);}

.tg{
  display:inline-block;padding:1.5px 6px;border-radius:5px;font-size:10px;margin:1px 3px 1px 0;
  background:rgba(120,140,170,.16);color:var(--ink2);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.tg.up{background:rgba(255,82,87,.14);color:var(--up);}
.tg.down{background:rgba(18,201,110,.14);color:var(--down);}

.chain{
  font-size:10.5px;color:var(--muted);line-height:1.5;margin-top:3px;
  padding-left:7px;border-left:2px solid var(--border-hi);
}
.nt{font-size:12px;color:var(--ink);line-height:1.45;font-weight:600;}

.chiprow{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
.chipbtn{
  background:var(--panel-hi);border:1px solid var(--border);color:var(--ink2);
  border-radius:7px;padding:3px 9px;font-size:11px;font-family:inherit;cursor:pointer;
  transition:border-color .15s,color .15s;
}
.chipbtn:hover{border-color:var(--border-hi);color:var(--ink);}
.chipbtn.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent;}

.effline{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:4px;}
.effline .kv{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;}
.effline .kk{font-size:11px;color:var(--muted);}

/* ---------------- 自我迭代面板 ---------------- */
.wbar{
  display:inline-block;width:78px;height:5px;border-radius:3px;background:var(--panel-hi);
  overflow:hidden;vertical-align:middle;margin-right:6px;
}
.wbar i{display:block;height:100%;border-radius:3px;}

/* ============================================================
   v2 视觉精修 + 移动端适配
   ============================================================ */

/* ---------- 基础：字体、滚动条、焦点 ---------- */
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI","PingFang SC",
    "Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;
  font-feature-settings:"tnum" 1,"cv01" 1;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(76,141,255,.32);}
*{-webkit-tap-highlight-color:transparent;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}

/* 统一细滚动条（含横向，移动端表格必需） */
.scroll{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.scroll::-webkit-scrollbar{width:8px;height:8px;}
.scroll::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:99px;border:2px solid transparent;background-clip:padding-box;}
.scroll::-webkit-scrollbar-thumb:hover{background:rgba(140,158,184,.55);background-clip:padding-box;}
.scroll::-webkit-scrollbar-corner{background:transparent;}
.alerts::-webkit-scrollbar,.ni-wrap::-webkit-scrollbar{width:7px;}
.alerts::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:99px;}

/* ---------- 顶栏：吸顶 + 玻璃拟态 + 品牌渐变 ---------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 88%, transparent),
    color-mix(in srgb, var(--bg) 72%, transparent)) ;
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow);
  margin-bottom:12px;
}
.logo{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 4px 14px rgba(76,141,255,.34);
  position:relative;overflow:hidden;
}
.logo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(255,255,255,.38),transparent 55%);
}
.brand h1{
  background:linear-gradient(92deg,var(--ink),color-mix(in srgb,var(--ink) 70%, var(--accent)));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.chip,.btn{transition:border-color .15s,color .15s,background .15s,transform .12s;}
.chip:hover{border-color:var(--border-hi);}
.btn:active{transform:scale(.96);}
.btn.pri{box-shadow:0 4px 14px rgba(76,141,255,.3);}

/* ---------- 面板：标题强调条 + 悬浮光晕 ---------- */
.panel{transition:border-color .2s,box-shadow .2s;}
.panel:hover{border-color:color-mix(in srgb,var(--border) 70%, var(--accent));}
.ph{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 7%, transparent),transparent);
  position:relative;
}
.ph::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:15px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
}
.ph h2{padding-left:5px;}

/* ---------- 指数条：竖向收起的涨跌幅 + 移动端横滑 ---------- */
.ix{transition:transform .16s,border-color .16s,box-shadow .16s;}
.ix:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--border) 50%, var(--accent));
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}
.ix .px{font-size:20px;letter-spacing:-.6px;}
.ix .ch{font-size:11.5px;font-weight:700;}

/* ---------- 表格：表头吸顶 + 首列吸附 + 移动端横滑 ---------- */
/* 只在滚动容器内吸顶；裸表格（迭代/影响面板由 JS 生成）若也 sticky 会粘到视口 */
.scroll .tbl th{
  position:sticky;top:0;z-index:2;
  background:color-mix(in srgb,var(--panel-solid) 92%, transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-weight:600;letter-spacing:.2px;
  white-space:nowrap;
}
.tbl th::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--border);
}
.tbl tbody tr:hover{background:color-mix(in srgb,var(--accent) 8%, transparent);}
.tbl td{white-space:nowrap;}

/* ---------- 热力图：圆角与阴影打磨 ---------- */
.hc{
  border-radius:9px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  transition:transform .16s,box-shadow .16s;
}
.hc:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 8px 20px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.2);
  z-index:3;
}

/* ---------- 预警 / 快讯：进入动画 ---------- */
.al{animation:alIn .32s cubic-bezier(.2,.8,.3,1);}
@keyframes alIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 分段控件 ---------- */
.seg button.on{box-shadow:0 2px 8px rgba(76,141,255,.35);}

/* ============================================================
   移动端（≤820px）：单列、横滑表格、压缩留白
   ============================================================ */
@media(max-width:820px){
  .app{padding:8px 9px 28px;}
  /* KPI 卡片两列，避免单列占满整屏 */
  .g4{grid-template-columns:repeat(2,minmax(0,1fr));}

  /* 顶栏纵向堆叠 */
  .hdr{
    flex-wrap:wrap;gap:8px;padding:9px 11px;border-radius:12px;
    position:static;                     /* 手机上不吸顶，避免吃掉屏幕 */
  }
  .brand{min-width:0;flex:1 1 100%;}
  .brand h1{font-size:13.5px;white-space:normal;}
  .logo{width:26px;height:26px;font-size:13px;}
  .clockbar{flex:1 1 100%;gap:6px;}
  .mkt{padding:4px 7px;flex:1 1 0;min-width:0;}
  .hdr-right{flex:1 1 100%;margin-left:0;justify-content:flex-start;gap:6px;}
  .chip,.btn{font-size:10.5px;padding:2.5px 7px;}

  /* 指数条：横向滑动卡片，不再挤成两列 */
  .idxstrip{
    display:flex;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;gap:8px;
    padding-bottom:6px;margin-bottom:10px;
    scrollbar-width:none;
  }
  .idxstrip::-webkit-scrollbar{display:none;}
  .ix{flex:0 0 132px;scroll-snap-align:start;}
  .ix .px{font-size:17px;}

  /* 面板与内边距压缩 */
  .panel{border-radius:12px;}
  .ph{padding:8px 11px;gap:7px;}
  .ph h2{font-size:12px;white-space:normal;}
  .ph .right{margin-left:auto;}
  .pb{padding:10px 11px;}
  .grid{gap:7px;}
  .g2,.g3{grid-template-columns:1fr;}

  /* 表格横向滚动：容器加横滑，表头吸顶保留 */
  .scroll{max-height:400px;overflow:auto;}
  .tbl{font-size:11.5px;min-width:max-content;}
  .tbl th,.tbl td{padding:6px 7px;}

  /* JS 动态生成的表格容器：手机上允许横滑，避免撑破布局 */
  #it-byh,#it-w,#it-val,#imp-eff,#sig-detail{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
  }
  #it-byh .tbl,#it-w .tbl,#it-val .tbl,#imp-eff .tbl{min-width:max-content;}

  /* 筛选器与输入：换行铺满 */
  .screener{gap:6px;}
  .screener .fld,.screener input,.screener select{flex:1 1 46%;min-width:0;}
  .screener .btn{flex:0 0 auto;}

  /* 图表高度收敛 */
  .chart{height:210px!important;}
  .chart.mini{height:170px!important;}
  #chart-imp-sec{height:300px!important;}
  #chart-it-w{height:170px!important;}
  #chart-rp-index,#chart-rp-rank{height:190px!important;}

  /* 热力图格子变小，一行能放更多 */
  .heat{gap:3px;}
  .hc{min-width:58px;min-height:42px;padding:4px 5px;}
  .hc .n{font-size:10px;}
  .hc .c{font-size:11.5px;}

  .kpi .kv{font-size:15px;}
  .warnbox{font-size:11px;padding:8px 10px;}
  .note{font-size:11px;}
  .mh{grid-template-columns:88px 1fr;font-size:11px;}
  .rp-ctrl{font-size:11px;padding:7px 9px;}
  .rp-ctrl input[type=range]{min-width:110px;}
  .tst{max-width:calc(100vw - 40px);}
}
@media(max-width:480px){
  .app{padding:6px 7px 24px;}
  .mkt .nm{font-size:10.5px;}
  .mkt .tm{font-size:10px;}
  .ix{flex:0 0 120px;}
  .chart{height:190px!important;}
  .h2, .ph h2{font-size:11.5px;}
}

/* ============================================================
   个股深度分析面板
   ============================================================ */
.stksearch{display:flex;gap:8px;align-items:center;}
.stksearch input{
  flex:1;min-width:0;background:var(--panel-hi);border:1px solid var(--border);color:var(--ink);
  border-radius:10px;padding:9px 12px;font-size:13px;font-family:inherit;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.stksearch input:focus{border-color:var(--accent);box-shadow:var(--glow);}
.stksearch input::placeholder{color:var(--muted);}

/* 检索建议下拉 */
.sugbox{
  display:none;position:relative;z-index:30;margin-top:6px;
  background:var(--panel-solid);border:1px solid var(--border-hi);border-radius:11px;
  box-shadow:var(--shadow);overflow:hidden;max-height:264px;overflow-y:auto;
}
.sugitem{
  display:flex;align-items:center;gap:9px;padding:8px 12px;cursor:pointer;
  border-bottom:1px solid var(--grid-line);transition:background .12s;
}
.sugitem:last-child{border-bottom:none;}
.sugitem:hover{background:color-mix(in srgb,var(--accent) 12%, transparent);}
.sugitem b{font-size:12.5px;color:var(--ink);font-weight:600;}
.sugitem .mono{font-size:10.5px;color:var(--muted);}
.sugitem .sugind{
  margin-left:auto;font-size:10px;padding:1px 6px;border-radius:5px;
  background:rgba(120,140,170,.16);color:var(--ink2);
}
.sugitem.none{padding:11px 12px;font-size:11.5px;color:var(--muted);cursor:default;}

/* 个股头部 */
.stkhead{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:1px solid var(--border);
}
.stktitle{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.stktitle b{font-size:16px;font-weight:700;letter-spacing:-.3px;}
.stktitle .sm{font-size:11px;color:var(--muted);}
.stkpx{margin-left:auto;display:flex;align-items:baseline;gap:9px;}
.stkpx>span:first-child{font-size:22px;font-weight:700;letter-spacing:-.6px;}
.stkpx>span:nth-child(2){font-size:13px;font-weight:700;}

/* 详情行 */
.stkrow{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:4.5px 0;border-bottom:1px solid var(--grid-line);font-size:11.5px;
}
.stkrow:last-child{border-bottom:none;}
.stkrow span{color:var(--muted);}
.stkrow b{font-weight:600;font-variant-numeric:tabular-nums;}

.stkempty{padding:16px;color:var(--muted);font-size:12px;text-align:center;}

@media(max-width:820px){
  .stksearch{flex-wrap:wrap;}
  .stksearch input{flex:1 1 100%;}
  .stkpx{margin-left:0;}
  .stkpx>span:first-child{font-size:19px;}
}

/* ============================================================
   买入建议卡片 + 关键信号
   ============================================================ */
.advice{
  display:flex;gap:18px;align-items:stretch;flex-wrap:wrap;
  padding:13px 15px;border-radius:12px;
  border:1px solid var(--border-hi);
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--accent) 6%, transparent),
    color-mix(in srgb,var(--panel-solid) 92%, transparent));
  box-shadow:var(--shadow);
}
.advice.up{border-left:4px solid var(--up);}
.advice.flat{border-left:4px solid var(--accent);}
.advice.down{border-left:4px solid var(--down);}

.adv-l{flex:0 0 auto;min-width:132px;}
.adv-k{font-size:10.5px;color:var(--muted);letter-spacing:.4px;}
.adv-v{font-size:20px;font-weight:700;letter-spacing:-.4px;margin-top:1px;}
.advice.up .adv-v{color:var(--up);}
.advice.flat .adv-v{color:var(--accent);}
.advice.down .adv-v{color:var(--down);}
.adv-s{font-size:14px;letter-spacing:2px;margin-top:2px;color:var(--gold);}
.adv-a{font-size:11px;color:var(--ink2);margin-top:3px;}

.adv-r{flex:1;min-width:200px;}
.adv-n{font-size:26px;font-weight:700;letter-spacing:-.8px;line-height:1.1;font-variant-numeric:tabular-nums;}
.advice.up .adv-n{color:var(--up);}
.advice.flat .adv-n{color:var(--accent);}
.advice.down .adv-n{color:var(--down);}
.adv-n span{font-size:12px;font-weight:500;color:var(--muted);margin-left:3px;}
.adv-bar{height:7px;border-radius:99px;background:rgba(120,140,170,.18);margin:6px 0 7px;overflow:hidden;}
.adv-bar i{display:block;height:100%;border-radius:99px;transition:width .5s cubic-bezier(.2,.8,.3,1);}
.advice.up .adv-bar i{background:linear-gradient(90deg,var(--accent),var(--up));}
.advice.flat .adv-bar i{background:linear-gradient(90deg,var(--accent2),var(--accent));}
.advice.down .adv-bar i{background:linear-gradient(90deg,var(--gold),var(--down));}
.adv-d{display:flex;flex-wrap:wrap;gap:5px 12px;font-size:10.5px;color:var(--muted);}
.adv-d b{font-weight:700;font-variant-numeric:tabular-nums;}

/* 关键信号列表 */
.siglist{display:flex;flex-direction:column;gap:5px;}
.sigitem{
  display:flex;align-items:flex-start;gap:8px;
  font-size:11.5px;line-height:1.55;color:var(--ink2);
}
.sigitem i{
  flex:none;width:6px;height:6px;border-radius:50%;margin-top:6px;
  background:var(--muted);
}
.sigitem.good i{background:var(--up);box-shadow:0 0 7px var(--up);}
.sigitem.good{color:var(--ink);}
.sigitem.bad i{background:var(--down);}
.sigitem.warn i{background:var(--gold);}
.sigitem.info i{background:var(--accent);}

@media(max-width:820px){
  .advice{gap:12px;padding:11px 12px;}
  .adv-l{flex:1 1 100%;}
  .adv-v{font-size:18px;}
  .adv-n{font-size:22px;}
}