.measurement-explorer{ padding:26px 0 30px; border-bottom:1px solid var(--line); }
.measurement-summary{ display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:18px; }
.measurement-summary h2{ margin:0; font-size:22px; }
.measurement-summary p{ margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.6; }
.measurement-counts{ display:flex; gap:18px; color:var(--muted); font-size:12px; white-space:nowrap; }
.measurement-counts strong{ color:var(--text); font-size:18px; margin-right:4px; }
.trend-toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.category-tabs{ display:flex; gap:5px; flex:1 1 640px; overflow-x:auto; scrollbar-width:thin; }
.category-tab{ flex:0 0 auto; border:1px solid transparent; border-radius:6px; padding:8px 10px; color:var(--muted); background:transparent; font:inherit; font-size:12px; font-weight:750; cursor:pointer; }
.category-tab:hover{ color:var(--text); border-color:var(--line); }
.category-tab.active{ color:#06110d; background:var(--green); border-color:var(--green); }
.trend-search{ width:min(240px,100%); height:36px; border:1px solid var(--line); border-radius:6px; color:var(--text); background:#090e1b; padding:0 10px; font:inherit; font-size:13px; }
.trend-search:focus{ outline:2px solid rgba(99,240,180,.24); border-color:rgba(99,240,180,.6); }
.abnormal-toggle{ display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; white-space:nowrap; cursor:pointer; }
.abnormal-toggle input{ width:16px; height:16px; accent-color:var(--green); }
.explorer-layout{ display:grid; grid-template-columns:minmax(230px,.7fr) minmax(0,2fr); gap:24px; padding-top:20px; }
.metric-browser{ min-width:0; }
.metric-browser-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.metric-browser-head h3{ margin:0; font-size:14px; }
.metric-browser-head span{ color:var(--muted); font-size:11px; }
.metric-list{ max-height:398px; overflow:auto; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.metric-button{ width:100%; min-height:58px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 8px; border:0; border-bottom:1px solid var(--line); color:var(--text); background:transparent; text-align:left; cursor:pointer; font:inherit; }
.metric-button:last-child{ border-bottom:0; }
.metric-button:hover{ background:rgba(255,255,255,.025); }
.metric-button.active{ background:rgba(99,240,180,.08); box-shadow:inset 3px 0 0 var(--green); }
.metric-name{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:750; }
.metric-code{ display:block; margin-top:3px; color:var(--muted); font-size:10px; }
.metric-latest{ text-align:right; font-size:13px; font-weight:800; white-space:nowrap; }
.metric-latest small{ display:block; margin-top:3px; color:var(--muted); font-size:10px; font-weight:600; }
.flag-dot{ display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; vertical-align:1px; }
.flag-high{ background:#ff6f7d; }
.flag-low{ background:#79a7ff; }
.flag-normal{ background:var(--green); }
.flag-unknown{ background:#73809c; }
.metric-empty{ padding:28px 8px; color:var(--muted); font-size:13px; text-align:center; }
.chart-panel{ min-width:0; }
.chart-heading{ display:flex; align-items:start; justify-content:space-between; gap:16px; margin-bottom:10px; }
.chart-heading h3{ margin:0; font-size:18px; }
.chart-heading p{ margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.chart-status{ flex:0 0 auto; border:1px solid var(--line); border-radius:6px; padding:7px 9px; color:var(--muted); font-size:11px; }
.chart-status.high{ color:#ff9aa4; border-color:rgba(255,111,125,.35); }
.chart-status.low{ color:#a8c2ff; border-color:rgba(121,167,255,.35); }
.chart-status.normal{ color:var(--green); border-color:rgba(99,240,180,.35); }
.chart-wrap{ position:relative; height:330px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#070b15; }
#measurement-chart{ display:block; width:100%; height:100%; }
.chart-tooltip{ position:absolute; z-index:3; min-width:172px; max-width:260px; pointer-events:none; padding:9px 10px; border:1px solid rgba(150,168,215,.28); border-radius:6px; color:var(--text); background:rgba(5,8,18,.96); box-shadow:0 12px 36px rgba(0,0,0,.45); font-size:11px; line-height:1.55; transform:translate(10px,-50%); }
.chart-tooltip[hidden]{ display:none; }
.chart-legend{ display:flex; align-items:center; gap:15px; flex-wrap:wrap; margin:10px 0 0; color:var(--muted); font-size:10px; }
.legend-item{ display:flex; align-items:center; gap:6px; }
.legend-line{ width:18px; height:2px; background:var(--cyan); }
.legend-range{ width:18px; height:10px; border-left:2px solid var(--green); border-right:2px solid var(--green); background:rgba(99,240,180,.12); }
.details-wrap{ margin-top:22px; overflow-x:auto; }
.details-wrap h3{ margin:0 0 10px; font-size:14px; }
.measurement-table{ width:100%; border-collapse:collapse; min-width:760px; font-size:12px; }
.measurement-table th{ padding:9px 8px; color:var(--muted); border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:left; font-weight:700; }
.measurement-table td{ padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.5; }
.measurement-table .value-cell{ color:var(--text); font-weight:800; white-space:nowrap; }
.measurement-table .source-cell{ color:var(--muted); max-width:310px; overflow-wrap:anywhere; }
.load-error{ padding:26px 0; color:#ff9aa4; font-size:13px; }
@media(max-width:760px){
  .measurement-summary{ align-items:start; flex-direction:column; }
  .measurement-counts{ width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 14px; white-space:normal; }
  .trend-search{ flex:1 1 190px; }
  .explorer-layout{ grid-template-columns:1fr; gap:18px; }
  .metric-list{ max-height:246px; }
  .chart-wrap{ height:300px; }
  .chart-heading{ align-items:start; }
}