:root {
  --ink: #16212b;
  --muted: #61707d;
  --line: #d8e0e5;
  --panel: #ffffff;
  --canvas: #f3f6f8;
  --teal: #007d78;
  --green: #19753f;
  --amber: #a75d00;
  --red: #b33434;
  --slate: #52606d;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; line-height: 1.45; }
a { color: inherit; text-decoration: none; }
code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; border: 1px solid var(--line); background: #fbfcfd; padding: 3px 5px; border-radius: 4px; color: #33414e; }

.app-shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; }
.sidebar { display: flex; flex-direction: column; min-height: 100vh; padding: 20px 14px 16px; background: #14242a; color: #dce7e8; }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 7px 32px; font-size: 17px; font-weight: 700; letter-spacing: 0; }
.brand small { display: block; color: #99b5b5; font-size: 11px; font-weight: 600; letter-spacing: 0; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 7px; background: #15a49b; color: #082a2a; font-size: 12px; font-weight: 800; }
.sidebar nav { display: grid; gap: 4px; }
.nav-link { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 6px; color: #c8d8d9; }
.nav-link.active { background: #1e4043; color: #ffffff; }
.nav-link.muted { color: #91a7a9; }
.nav-link small { font-size: 10px; color: #758d8f; white-space: nowrap; }
.sidebar-footer { margin-top: auto; padding: 13px 7px 0; border-top: 1px solid #315155; color: #9db8b9; font-size: 12px; }
.service-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #55cf8a; }

.main-content { min-width: 0; }
.topbar { min-height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.88); color: var(--muted); font-size: 13px; }
.health-link { color: var(--teal); font-weight: 650; }
.content-wrap { width: min(1440px, 100%); margin: 0 auto; padding: 30px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.page-heading h1 { margin: 2px 0 6px; font-size: 28px; line-height: 1.15; letter-spacing: 0; }
.eyebrow { margin: 0; color: var(--teal); font-size: 11px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.page-lede { max-width: 720px; margin: 0; color: var(--muted); }
.heading-meta { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--muted); white-space: nowrap; }

.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
.metric { min-height: 112px; padding: 15px; border: 1px solid var(--line); border-top: 3px solid var(--slate); border-radius: 7px; background: var(--panel); }
.metric span, .metric small { display: block; color: var(--muted); }
.metric strong { display: block; margin: 6px 0 2px; font-size: 27px; line-height: 1; }
.metric-total { border-top-color: var(--teal); }.metric-normal { border-top-color: var(--green); }.metric-warning { border-top-color: var(--amber); }.metric-problem { border-top-color: var(--red); }.metric-pending { border-top-color: var(--slate); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: 22px; }.compact-table { width: 100%; border-collapse: collapse; }.compact-table th, .compact-table td { padding: 9px 7px; border-bottom: 1px solid #e7ecef; text-align: left; vertical-align: top; }.compact-table th { color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; }.compact-table tbody tr:last-child td { border-bottom: 0; }.quiet-message { margin: 26px 0; color: var(--muted); }.problem-count { display: inline-block; margin-left: 5px; color: var(--red); font-size: 12px; font-weight: 700; }.rtt-chart { display: flex; align-items: end; gap: 5px; height: 174px; padding: 8px 0 0; border-bottom: 1px solid var(--line); }.rtt-bar-column { display: grid; grid-template-rows: 18px minmax(0, 1fr) 27px; flex: 1 1 0; min-width: 17px; height: 100%; text-align: center; }.rtt-value { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.rtt-bar { align-self: end; display: block; width: min(24px, 100%); height: var(--bar-height); margin: 0 auto; background: var(--slate); border-radius: 3px 3px 0 0; }.rtt-bar.normal { background: var(--green); }.rtt-bar.warning { background: var(--amber); }.rtt-bar.problem { background: var(--red); }.rtt-label { overflow: hidden; padding-top: 4px; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.report-section { margin: 0 0 22px; padding: 20px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.section-heading h2 { margin: 2px 0 0; font-size: 18px; line-height: 1.25; }
.section-note { color: var(--muted); font-size: 12px; text-align: right; }
.empty-state { padding: 38px 12px; text-align: center; color: var(--muted); }.empty-state h3 { color: var(--ink); font-size: 16px; }
.table-scroll { overflow-x: auto; }
.report-table, .detail-table { width: 100%; border-collapse: collapse; }.detail-table { table-layout: fixed; }.report-table th, .report-table td, .detail-table th, .detail-table td { padding: 10px 8px; border-bottom: 1px solid #e7ecef; text-align: left; vertical-align: top; }.report-table th, .detail-table th { color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; }.detail-table th { width: 34%; }.detail-table td { overflow-wrap: anywhere; }.report-table tbody tr:last-child td, .detail-table tbody tr:last-child td, .detail-table tbody tr:last-child th { border-bottom: 0; }.subtle { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }.detail-link, .back-link { color: var(--teal); font-weight: 700; }.back-link { display: inline-block; margin-bottom: 8px; font-size: 13px; }
.status { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 7px; border: 1px solid currentColor; border-radius: 5px; font-size: 12px; font-weight: 750; white-space: nowrap; }.status.large { min-height: 34px; padding: 7px 11px; font-size: 14px; }.status.normal, .status.reportready { color: var(--green); background: #f1f9f3; }.status.warning { color: var(--amber); background: #fff8ee; }.status.problem { color: var(--red); background: #fff2f2; }.status.insufficientevidence, .status.requested, .status.cancelled { color: var(--slate); background: #f2f4f6; }

.evidence-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 22px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--panel); }.evidence-strip div { min-width: 0; padding: 14px; border-right: 1px solid var(--line); }.evidence-strip div:last-child { border-right: 0; }.evidence-strip span { display: block; color: var(--muted); font-size: 11px; }.evidence-strip strong { display: block; overflow-wrap: anywhere; font-size: 15px; }
.finding-list { display: grid; gap: 11px; }.finding { padding: 14px; border-left: 3px solid var(--slate); background: #fafcfc; }.finding.normal { border-left-color: var(--green); }.finding.warning { border-left-color: var(--amber); }.finding.problem { border-left-color: var(--red); }.finding.insufficientevidence { border-left-color: var(--slate); }.finding-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }.confidence { color: var(--muted); font-size: 12px; }.evidence-list { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 8px; margin: 10px 0 0; color: var(--muted); }.evidence-list > span { font-size: 12px; font-weight: 700; }.evidence-list ul { margin: 0; padding-left: 17px; }.evidence-list li + li { margin-top: 3px; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 30px; }.detail-grid > div { min-width: 0; }.detail-grid .section-heading { margin-bottom: 8px; }
.topology-band { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 26px; margin: 0 0 22px; padding: 22px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }.gateway-node { position: relative; align-self: start; padding: 16px; border: 2px solid var(--teal); border-radius: 7px; background: #f2fbfa; }.gateway-node span, .gateway-node small { display: block; color: var(--muted); font-size: 12px; }.gateway-node strong { display: block; margin: 4px 0; overflow-wrap: anywhere; font-size: 18px; }.topology-endpoints { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; padding-left: 22px; }.topology-endpoints::before { position: absolute; top: 24px; bottom: 24px; left: 0; width: 1px; background: #9dc6c3; content: ""; }.endpoint-node { position: relative; min-width: 0; padding: 14px; border: 1px solid var(--line); border-left: 3px solid var(--slate); border-radius: 6px; background: #fbfcfd; }.endpoint-node::before { position: absolute; top: 24px; left: -23px; width: 21px; height: 1px; background: #9dc6c3; content: ""; }.endpoint-node.normal { border-left-color: var(--green); }.endpoint-node.warning { border-left-color: var(--amber); }.endpoint-node.problem { border-left-color: var(--red); }.endpoint-node strong, .endpoint-node small { display: block; }.endpoint-node strong { margin: 10px 0 3px; overflow-wrap: anywhere; }.endpoint-node small { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; }.endpoint-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.endpoint-header a { color: var(--teal); font-size: 12px; font-weight: 700; }.peer-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }.peer-list > span:first-child { width: 100%; color: var(--muted); font-size: 11px; }.peer-chip { max-width: 100%; overflow: hidden; padding: 2px 5px; border: 1px solid #cfd9dd; border-radius: 4px; color: #43515c; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1020px) { .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.dashboard-grid { grid-template-columns: 1fr; }.evidence-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }.evidence-strip div:nth-child(3) { border-right: 0; }.evidence-strip div:nth-child(n+4) { border-top: 1px solid var(--line); }.detail-grid { grid-template-columns: 1fr; gap: 24px; }.topology-band { grid-template-columns: 1fr; }.topology-endpoints { padding: 0; }.topology-endpoints::before, .endpoint-node::before { display: none; } }
@media (max-width: 760px) { .app-shell { grid-template-columns: 1fr; }.sidebar { min-height: auto; padding: 12px 14px; }.brand { margin: 0 4px 12px; }.sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }.sidebar-footer { display: none; }.topbar { padding: 0 16px; }.content-wrap { padding: 20px 16px; }.page-heading { align-items: start; flex-direction: column; margin-bottom: 20px; }.page-heading h1 { font-size: 25px; }.metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.metric { min-height: 96px; }.evidence-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }.evidence-strip div { border-right: 1px solid var(--line); border-top: 1px solid var(--line); }.evidence-strip div:nth-child(-n+2) { border-top: 0; }.evidence-strip div:nth-child(2n) { border-right: 0; }.report-section { padding: 15px; }.section-heading { align-items: start; flex-direction: column; }.section-note { text-align: left; }.evidence-list { grid-template-columns: 1fr; gap: 3px; }.rtt-chart { height: 150px; }.rtt-label { font-size: 8px; } }

.history-chart { display: flex; align-items: end; gap: 6px; min-height: 196px; margin-bottom: 9px; padding: 8px 0 0; border-bottom: 1px solid var(--line); }.history-column { display: grid; grid-template-rows: 17px minmax(0, 1fr) 20px; flex: 1 1 0; min-width: 18px; height: 188px; text-align: center; }.history-total, .history-label { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.history-bars { display: flex; align-items: end; justify-content: center; gap: 2px; }.history-bar { display: block; width: min(10px, 24%); min-height: 0; height: var(--history-height); border-radius: 2px 2px 0 0; background: var(--slate); }.history-bar.normal { background: var(--green); }.history-bar.warning { background: var(--amber); }.history-bar.problem { background: var(--red); }.chart-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; color: var(--muted); font-size: 12px; }.chart-legend span::before { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 2px; background: currentColor; content: ""; }.chart-legend .normal { color: var(--green); }.chart-legend .warning { color: var(--amber); }.chart-legend .problem { color: var(--red); }.chart-legend .insufficientevidence { color: var(--slate); }