/* ═══════════════════════════════════════════════════════════════
   charts.css — a chart box (chartbox.js) and the multi-chart page
   (ui-charts.js, #/charts): two to four charts side by side.
   ═══════════════════════════════════════════════════════════════ */
.cbx{position:relative;width:100%;height:100%;min-height:0;background:var(--card)}
.cbx-cv{position:absolute;inset:0}
.cbx-note{position:absolute;left:10px;top:8px;z-index:3;display:flex;flex-direction:column;gap:2px;pointer-events:none;max-width:calc(100% - 90px)}
.cbx-ohlc{display:flex;flex-wrap:wrap;gap:2px 9px;font-size:11px;font-weight:500;color:var(--mute)}
.cbx-ohlc b{font-weight:600;margin-left:2px}
.cbx-src{font-size:10.5px;color:var(--faint)}
.cbx-ovl{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:18px;color:var(--mute);font-size:12.5px;background:rgba(15,16,19,.35)}
.cbx-ovl b{color:var(--text)}
.cbx-ovl .cbx-m{position:absolute;right:12px;bottom:12px;font-size:11.5px}
.cbx-ovl:has(.cbx-m){background:none;pointer-events:none}

.mc{gap:12px}
.mc-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mc-bar h1{display:flex;align-items:center;gap:8px;margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em}
.mc-bar h1 .ic{color:var(--brand-text)}
.mc-n button{min-width:34px;font-weight:650}
.mc-all{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--mute)}
.mc-all span{margin-right:2px}
.mc-all .chipbtn{height:26px;padding:0 8px;font-size:11.5px}
.mc-tip{margin-left:auto;font-size:11.5px;color:var(--faint)}
.mc-grid{flex:1;min-height:0;display:grid;gap:10px;grid-template-rows:minmax(0,1fr)}
.mc-grid.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mc-grid.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mc-grid.n4{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.mc-cell{display:flex;flex-direction:column;min-width:0;min-height:300px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.mc-h{display:flex;align-items:center;gap:8px;padding:7px 8px;border-bottom:1px solid var(--line);flex-wrap:wrap;min-height:48px}
.mc-mkt{display:flex;align-items:center;gap:8px;min-width:0;padding:3px 8px 3px 3px;border-radius:9px;transition:background .15s;max-width:100%}
.mc-mkt:hover{background:var(--hover)}
.mc-mkt .av{width:28px;height:28px;border-radius:8px;font-size:11px}
.mc-mkt .av-wrap .chain{width:13px;height:13px;right:-3px;bottom:-3px}
.mc-mkt.empty{gap:6px;color:var(--brand-text);font-size:13px;padding:6px 10px}
.mc-id{display:flex;flex-direction:column;min-width:0;text-align:left}
.mc-id b{font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-id b small{color:var(--mute);font-weight:500;font-size:11.5px}
.mc-id > small{font-size:11px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-px{display:flex;flex-direction:column;align-items:flex-start;font-variant-numeric:tabular-nums}
.mc-px b{font-size:13px;font-weight:650}
.mc-px small{font-size:11px}
.mc-tfs button{height:24px;padding:0 7px;font-size:11.5px}
.mc-act{display:flex;align-items:center;gap:4px;margin-left:auto}
.mc-act .btn{gap:3px}
.mc-b{position:relative;flex:1;min-height:0}
.mc-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px;text-align:center;color:var(--mute)}
.mc-empty b{color:var(--text);font-size:14px}
.mc-empty p{margin:0;font-size:12.5px}
.mc-empty small{font-size:11px;color:var(--faint)}
.mc-sug{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;max-width:420px;margin-top:4px}
.mc-sug .chipbtn{height:26px;font-size:12px}
@media (max-width:1200px){
  .mc-grid.n3{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(320px,1fr)}
  .mc-tip{display:none}
}
@media (max-width:900px){
  .mc-grid.n2,.mc-grid.n3,.mc-grid.n4{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:380px}
  .mc{height:auto}
  .mc-all{display:none}
}