:root {
  --wb-bg: #f3f6f9;
  --wb-panel: #fff;
  --wb-panel-soft: #f7f9fc;
  --wb-ink: #111c2e;
  --wb-muted: #617087;
  --wb-subtle: #96a3b5;
  --wb-line: #e1e7ef;
  --wb-line-strong: #cdd7e3;
  --wb-accent: #1677ff;
  --wb-accent-soft: #e8f1ff;
  --wb-good: #0a7a4a;
  --wb-good-soft: #e9f8f0;
  --wb-warn: #a15c07;
  --wb-warn-soft: #fff6e8;
  --wb-danger: #b42318;
  --wb-danger-soft: #fef3f2;
  --wb-side-bg: #101b2d;
  --wb-side-ink: #fff;
  --wb-side-muted: #91a1b8;
}
body { background-image: radial-gradient(1100px 500px at 100% -10%, rgba(22,119,255,.1), transparent 60%); }
.ml-filters { padding: 12px 14px; margin-bottom: 14px; }
.ml-filter-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ml-filter-group { display: flex; align-items: center; gap: 7px; }
.ml-filter-label { color: var(--wb-muted); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ml-filter-group .wb-select { width: 150px; min-height: 32px; }
.ml-live { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--wb-muted); font-size: 10px; }
.ml-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wb-good); box-shadow: 0 0 0 3px var(--wb-good-soft); }
.ml-view[hidden] { display: none !important; }
.ml-overview-grid { margin-bottom: 14px; }
.ml-chart { min-height: 230px; }
.ml-chart svg { width: 100%; height: auto; }
.ml-insight { font-family: var(--wb-font-display); font-size: 20px; line-height: 1.25; letter-spacing: -0.025em; }
.ml-insight-meta { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--wb-line); color: var(--wb-muted); font-size: 11px; line-height: 1.5; }
.ml-insight-list { display: grid; gap: 8px; margin-top: 15px; }
.ml-insight-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-size: 10px; }
.ml-insight-row strong { font-weight: 650; color: var(--wb-ink); }
.ml-insight-row em { color: var(--wb-good); font-style: normal; font-weight: 650; }
.ml-insight-row .ml-insight-bar { grid-column: 1 / -1; height: 5px; border-radius: 999px; background: var(--wb-line); overflow: hidden; }
.ml-insight-row .ml-insight-bar i { display: block; height: 100%; border-radius: inherit; background: var(--wb-accent); }
.ml-top-segments { margin-top: 14px; }
.ml-heatmap-wrap { width: 100%; overflow-x: auto; }
.ml-heatmap { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: 10px; }
.ml-heatmap th { padding: 3px; color: var(--wb-muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.ml-heatmap th:first-child { text-align: left; }
.ml-heatmap td { padding: 12px 8px; border-radius: 6px; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; }
.ml-heatmap td:first-child { border-radius: 0; text-align: left; font-weight: 600; color: var(--wb-ink); }
.ml-heatmap td.h0 { background: #f1f4f8; color: #8795a8; }
.ml-heatmap td.h1 { background: #e2edff; color: #2f69bd; }
.ml-heatmap td.h2 { background: #c6ddff; color: #1d5aad; }
.ml-heatmap td.h3 { background: #9ec5ff; color: #164d96; }
.ml-heatmap td.h4 { background: #6da6ff; color: #fff; }
.ml-heatmap td.h5 { background: #2f7bf5; color: #fff; }
.ml-heat-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 12px; color: var(--wb-muted); font-size: 9px; }
.ml-heat-legend i { display: block; width: 18px; height: 8px; border-radius: 2px; }
.ml-heat-legend .h0 { background: #f1f4f8; }
.ml-heat-legend .h1 { background: #e2edff; }
.ml-heat-legend .h2 { background: #c6ddff; }
.ml-heat-legend .h3 { background: #9ec5ff; }
.ml-heat-legend .h4 { background: #6da6ff; }
.ml-heat-legend .h5 { background: #2f7bf5; }
.ml-steps { margin: 18px 0; padding: 0; list-style: none; display: grid; gap: 15px; }
.ml-steps li { display: grid; grid-template-columns: 22px 1fr; gap: 9px; }
.ml-steps li > span { color: var(--wb-accent); font-size: 10px; font-weight: 700; letter-spacing: .08em; padding-top: 2px; }
.ml-steps strong { display: block; font-size: 12px; }
.ml-steps p { margin-top: 2px; color: var(--wb-muted); font-size: 11px; line-height: 1.5; }
.ml-local { display: flex; justify-content: space-between; gap: 10px; padding-top: 13px; border-top: 1px solid var(--wb-line); color: var(--wb-muted); font-size: 10px; }
.ml-local strong { color: var(--wb-ink); font-weight: 600; }
.ml-demo-note { margin-top: 22px; color: var(--wb-muted); font-size: 11px; }
.ml-demo-note a { color: var(--wb-accent); text-decoration: none; font-weight: 600; }
@media (max-width: 900px) { .ml-live { width: 100%; margin-left: 0; } }
@media (max-width: 560px) { .ml-filter-row { gap: 10px; } .ml-filter-group { width: 100%; justify-content: space-between; } .ml-filter-group .wb-segmented { flex: 1 1 auto; justify-content: space-between; } .ml-filter-group .wb-select { flex: 1 1 auto; width: auto; } .ml-chart { min-height: 200px; } }