/* v2.56 板块温度计：全 A 股站上 20 日线占比热力图（今日盯盘「收盘后」段）
   布局合同：整张图按容器宽度自适应，任何宽度都不出现横向滚动条；行业名称排在图的底部；
   每个格子都写出温度数字（只有容器窄于 460px 才退化成纯色块）；格子之间留缝；
   纵轴每行都有日期，每个月首行插一条带「年/月」的月份分隔线。
   响应式用 @container 而不是 @media：决定格子能否放下数字的是卡片宽度，不是窗口宽度；
   不支持容器查询的浏览器走 @supports not 里的视口回退，保证任何情况都不横向溢出。
   区间与粒度合同：区间 近一月/近一季/近半年/近一年；粒度 逐日/每周，
   超过 70 个交易日默认按周取样（取每周最后一个交易日的真实值，不做平均），逐日上限 140 行。
   配色合同（v2.55）：冷热两端用高饱和的鲜绿/鲜红，中段暖米，热端经橙色过渡（色标由 JS 的 STOPS 统一生成）。
   榜单合同（v2.55）：每行固定四列网格（行业名 / 条形 / 占比 / 变化），数字 1 位小数且不换行。 */
.mb-wrap{--mb-cold:#009658;--mb-mid:#fff6aa;--mb-hot:#d61928;--mb-text:#0a1a2f}
.mb-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
.mb-kpi{background:var(--card2);border-radius:9px;padding:10px 12px;min-width:0}
.mb-kpi .muted{font-size:12px;display:block}
.mb-kpi strong{display:block;font-size:22px;line-height:1.5;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mb-kpi .stamp{font-size:11px;color:var(--sub)}
.mb-kpi .mb-up{color:var(--red)}
.mb-kpi .mb-dn{color:var(--green)}
/* 区间 / 粒度切换：两组按钮用细竖线分隔；说明文字是可收缩的弹性项，窄宽度不再顶出 5px */
.mb-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0 8px;min-width:0}
.mb-tg{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.mb-tg+.mb-tg{padding-left:10px;border-left:1px solid var(--line)}
.mb-tools button{border:1px solid var(--line);background:var(--card);color:var(--txt);border-radius:999px;padding:4px 13px;font-size:12px;line-height:1.6;cursor:pointer}
.mb-tools button:hover:not([disabled]){border-color:var(--blue);color:var(--blue)}
.mb-tools button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.mb-tools button[disabled]{opacity:.38;cursor:not-allowed}
.mb-tools-note{font-size:11px;color:var(--sub);flex:1 1 180px;min-width:0}
/* overflow:hidden 而不是 auto：宽度不够时靠单元格缩放，不给横向拖拉条 */
.mb-heat{container-type:inline-size;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card);padding:10px 10px 8px;display:flex;flex-direction:column;gap:3px}
.mb-heat .row{display:flex;align-items:stretch;min-width:0}
/* 月份分隔线：纵轴上每个月开头一条带年月标注的细线 */
.mb-heat .mband{align-items:center;min-height:16px;margin-top:3px}
.mb-heat .mband:first-child{margin-top:0}
.mb-heat .mband .td-date{font-size:10px;font-weight:700;color:var(--txt);opacity:.7}
.mb-heat .mline{flex:1 1 auto;height:1px;background:var(--line)}
.mb-heat .td-date{flex:0 0 52px;min-width:0;font-size:11px;color:var(--sub);display:flex;align-items:center;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.mb-heat .td-cells{display:flex;gap:2px;flex:1 1 auto;min-width:0}
.mb-cell{flex:1 1 0;min-width:0;height:24px;display:flex;align-items:center;justify-content:center;font-size:11px;font-variant-numeric:tabular-nums;border-radius:3px;overflow:hidden}
.mb-cell.avg{margin-left:7px;box-shadow:inset 0 0 0 2px var(--card);flex:0 0 34px;font-weight:700}
.mb-cell-picked{outline:2px solid var(--txt);outline-offset:1px}
/* 底部行业名称行 */
.mb-heat .foot{border-top:1px solid var(--line);margin-top:6px;padding-top:6px;align-items:flex-start}
.mb-heat .foot .td-date{align-items:flex-start;padding-top:2px;color:var(--txt);font-size:10px}
.mb-heat .ch{writing-mode:vertical-rl;flex:1 1 0;min-width:0;height:112px;font-size:11px;color:var(--txt);display:flex;align-items:flex-start;justify-content:flex-start;padding-top:3px;overflow:hidden;white-space:nowrap}
.mb-heat .ch-index{display:none}.mb-heat .ch-name{display:inline}
.mb-heat .ch.avg{margin-left:7px;flex:0 0 34px;font-weight:700}
.mb-mobile-key{display:none}
.mb-heat-tip{display:none}
.mb-heat .td-bar{flex:0 0 122px;min-width:0;display:flex;align-items:center;padding-left:10px}
.mb-heat .foot .td-bar{align-items:flex-start;padding-top:2px}
.mb-heat .mband .td-bar{padding-left:10px}
.mb-heat .track{position:relative;width:100%;height:14px;background:var(--card2);border-radius:3px;overflow:hidden}
.mb-heat .mid{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line)}
.mb-heat .bar{position:absolute;left:0;top:0;bottom:0;opacity:.95}
.mb-heat .bar-n{position:relative;z-index:1;font-size:10px;color:var(--txt);padding-left:6px;white-space:nowrap;font-variant-numeric:tabular-nums}
/* —— 容器查询：卡片越窄，日期列/条形列/字号依次让位，数字尽量保到最后 —— */
@container (max-width:1100px){.mb-heat .td-bar{flex:0 0 98px}}
@container (max-width:900px){
 .mb-heat .td-date{flex:0 0 46px;font-size:10px}
 .mb-heat .td-bar{flex:0 0 74px;padding-left:8px}
 .mb-heat .row:not(.foot) .bar-n{display:none}
 .mb-cell{font-size:10px;height:23px}
}
@container (max-width:720px){
 .mb-heat .td-bar{display:none}
 .mb-heat .td-cells{gap:1px}
 .mb-cell{height:22px}
}
@container (max-width:560px){
 .mb-heat .td-date{flex:0 0 40px;font-size:9px}
 .mb-cell{font-size:9px;height:21px;border-radius:2px}
 .mb-cell.avg{flex:0 0 27px;margin-left:5px}
 .mb-heat .ch{font-size:10px;height:98px}
 .mb-heat .ch.avg{flex:0 0 27px;margin-left:5px}
}
/* 极窄容器：格子已经放不下两位数，退化成纯色块，数值仍在悬停提示里，全市场列保留数字 */
@container (max-width:460px){
 .mb-cell{font-size:0;height:18px;cursor:pointer}
 .mb-cell.avg{font-size:9px;flex:0 0 24px;box-shadow:inset 0 0 0 1px var(--card)}
 .mb-heat .ch{writing-mode:horizontal-tb;height:28px;font-size:8px;align-items:center;justify-content:center;padding:0;overflow:visible}
 .mb-heat .ch-name{display:none}.mb-heat .ch-index{display:inline;font-variant-numeric:tabular-nums}
 .mb-heat .ch.avg{flex:0 0 24px}
 .mb-heat-tip:not([hidden]){display:flex;position:fixed;z-index:20;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:9px;background:rgba(28,28,34,.96);color:#fff;box-shadow:0 5px 18px rgba(0,0,0,.28);font-size:12px;line-height:1.45}
 .mb-heat-tip b{font-size:13px}.mb-heat-tip span{color:#d8d8e2}.mb-heat-tip strong{font-variant-numeric:tabular-nums;white-space:nowrap}
}
/* 不支持容器查询时的视口回退，保证同样不横向溢出 */
@supports not (container-type:inline-size){
 @media(max-width:1000px){.mb-heat .td-bar{flex:0 0 80px;padding-left:8px}.mb-heat .row:not(.foot) .bar-n{display:none}.mb-cell{font-size:10px}.mb-heat .td-date{flex:0 0 46px;font-size:10px}}
 @media(max-width:820px){.mb-heat .td-bar{display:none}.mb-heat .td-cells{gap:1px}}
 @media(max-width:640px){.mb-heat .td-date{flex:0 0 40px;font-size:9px}.mb-cell{font-size:0;height:20px}.mb-cell.avg{font-size:9px;flex:0 0 24px;margin-left:5px}.mb-heat .ch{font-size:10px;height:90px}.mb-heat .ch.avg{flex:0 0 24px;margin-left:5px}}
}
.mb-ranks{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0}
.mb-ranks h4{margin:0 0 6px;font-size:13px}
.mb-ranks h4 .rk-hint{font-weight:400;font-size:11px;color:var(--sub);margin-left:6px}
/* 固定四列网格：数字列留足宽度并禁止换行，两栏逐行对齐 */
.mb-rk{display:grid;grid-template-columns:5.6em minmax(0,1fr) 4.2em 4em;align-items:center;gap:8px;min-height:24px;line-height:18px}
.mb-rk .rk-n{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mb-rk .rk-bg{height:12px;border-radius:2px;position:relative;background:var(--card2);overflow:hidden;min-width:0}
.mb-rk .rk-bg i{position:absolute;left:0;top:0;bottom:0}
.mb-rk .rk-v{text-align:right;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.mb-rk .rk-d{font-size:11px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mb-rk .d-up{color:#e11d2e}
.mb-rk .d-dn{color:#059a5a}
.mb-notes{margin:10px 0;padding-left:20px}
.mb-notes li{padding:3px 0;font-size:13px}
.mb-legend{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--sub);margin:8px 0;flex-wrap:wrap}
.mb-legend .lg-bar{width:200px;height:10px;border-radius:2px;flex:0 0 200px}
.mb-meta{font-size:12px;color:var(--sub);margin-top:8px;overflow-wrap:anywhere}
.mb-empty{padding:24px;color:var(--sub);font-size:13px}
@media(max-width:640px){
 .mb-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.mb-kpi strong{font-size:19px}.mb-ranks{grid-template-columns:1fr}
 .mb-heat{padding:8px 6px 6px}
 .mb-mobile-key{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;margin:8px 0 14px;padding:10px;border-radius:8px;background:var(--card2);font-size:10px;line-height:1.5;color:var(--txt)}
 .mb-mobile-key span{display:grid;grid-template-columns:2.4em minmax(0,1fr);gap:3px;min-width:0}.mb-mobile-key b{color:var(--blue);font-variant-numeric:tabular-nums}
 .mb-legend .lg-bar{width:140px;flex:0 0 140px}
 .mb-tools button{padding:3px 10px;font-size:11px}
 .mb-tg+.mb-tg{padding-left:8px}
 .mb-rk{grid-template-columns:5em minmax(0,1fr) 4em 3.8em;gap:6px}
}
.mb-crowd{margin:18px 0 0;border-top:1px solid var(--line);padding-top:14px}
.mb-crowd h4{margin:0 0 4px;font-size:15px}
.mb-crowd h4 small{margin-left:8px;font-weight:400;color:var(--sub);font-size:11px}
.mb-crowd svg{width:100%;height:auto;max-height:360px}
.mb-crowd-rank{margin-top:10px;overflow-x:auto}
.mb-crowd-rank h5{margin:0 0 6px;font-size:13px}
.mb-crowd-rank table{width:100%;border-collapse:collapse;font-size:12px}
.mb-crowd-rank td,.mb-crowd-rank th{white-space:nowrap}
.mb-crowd-wrap{position:relative}
.mb-dot{cursor:pointer;transition:r .08s}
.mb-dot:hover,.mb-dot:focus{stroke:#24242a;stroke-width:2;outline:none}
.mb-tip{position:absolute;z-index:6;max-width:270px;padding:8px 10px;border-radius:8px;pointer-events:none;
  background:rgba(28,28,34,.95);color:#fff;font-size:12px;line-height:1.7;box-shadow:0 4px 14px rgba(0,0,0,.22)}
.mb-tip b{display:block;font-size:13px;margin-bottom:3px}
.mb-tip span{display:block;font-variant-numeric:tabular-nums;color:#e3e3ea}
.mb-tip[hidden]{display:none}
.mb-hint{margin:2px 0 6px}