#market-breadth { margin: 24px 0; border-block: 1px solid var(--line); padding: 20px 0; min-width: 0; }
.breadth-head, .breadth-controls { display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.breadth-head h2 { margin:0; font-size:24px; }
.breadth-note { color:var(--muted); font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.breadth-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:20px 0; border-block:1px solid var(--line); }
.breadth-stat { padding:16px 12px; border-right:1px solid var(--line); min-width:0; }
.breadth-stat:last-child { border-right:0; }
.breadth-stat strong { display:block; font-size:28px; margin:8px 0; font-variant-numeric:tabular-nums; }
.breadth-trend { display:block; width:100%; height:180px; background:#fff; margin-bottom:16px; }
.breadth-controls { margin:16px 0; justify-content:flex-start; }
.breadth-controls label { display:flex; gap:8px; align-items:center; font-size:13px; }
.breadth-controls select, .breadth-controls input { max-width:100%; padding:8px; border:1px solid var(--line); border-radius:4px; background:#fff; color:var(--ink); }
.breadth-scroll { overflow:auto; max-height:610px; border:1px solid var(--line); background:#fff; }
.breadth-table { border-collapse:separate; border-spacing:2px; min-width:0; width:max-content; font-size:11px; table-layout:fixed; }
.breadth-table th, .breadth-table td { padding:0; text-align:center; min-width:40px; height:30px; border:0; }
.breadth-table thead th { position:sticky; top:0; z-index:3; background:#fff; font-size:10px; }
.breadth-table th:first-child { position:sticky; left:0; min-width:110px; max-width:110px; white-space:normal; z-index:2; background:#fff; text-align:left; padding:4px 8px; }
.breadth-table thead th:first-child { z-index:4; }
.breadth-table button { width:40px; height:30px; padding:0; border:0; border-radius:2px; font-size:11px; font-variant-numeric:tabular-nums; cursor:pointer; color:inherit; background:transparent; }
.breadth-table button:focus-visible { outline:2px solid #222; outline-offset:1px; }
.breadth-legend { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:14px 0; font-size:12px; }
.breadth-legend i { display:inline-block; width:12px; height:12px; margin-right:4px; vertical-align:middle; }
.breadth-detail { max-width:min(460px,calc(100vw - 32px)); padding:24px; border:1px solid var(--line); border-radius:6px; color:var(--ink); }
.breadth-detail::backdrop { background:rgba(0,0,0,.35); }
.breadth-detail h3 { font-size:20px; margin-top:0; }
.breadth-detail button { float:right; width:32px; height:32px; border:1px solid var(--line); background:#fff; cursor:pointer; }
@media(max-width:720px) { .breadth-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .breadth-stat { border-bottom:1px solid var(--line); } .breadth-stat:nth-child(2n) { border-right:0; } .breadth-stat strong { font-size:24px; } .breadth-controls label { max-width:100%; } }