:root {
  --bg:#0b1017; --surface:#121a24; --surface-2:#172231; --line:#273548;
  --text:#edf4ff; --muted:#8da0b8; --green:#38d996; --amber:#ffb84d;
  --red:#ff6275; --blue:#67b7ff; --cyan:#51dfdf; --purple:#a993ff;
}
* { box-sizing:border-box }
html { background:var(--bg); color:var(--text); font:15px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif }
body { margin:0; min-width:320px; background:radial-gradient(circle at 70% -10%,#17263b 0,transparent 35%),var(--bg) }
body.loading .internal-only,body.external .internal-only { display:none }
button,select { font:inherit }
.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100% - 1440px)/2)); border-bottom:1px solid var(--line); background:rgba(11,16,23,.88); backdrop-filter:blur(16px); position:sticky; top:0; z-index:10 }
.brand { display:flex; align-items:center; gap:12px }
.brand-mark { width:30px; height:30px; border:7px solid var(--blue); border-radius:10px; box-shadow:0 0 24px #67b7ff55 }
.brand strong,.brand small { display:block }
.brand strong { font-size:16px; letter-spacing:.01em }
.brand small { color:var(--muted); font-size:12px; margin-top:1px }
.live { color:var(--muted); display:flex; align-items:center; gap:8px; font-size:13px }
.live span { width:8px; height:8px; background:var(--green); border-radius:50%; box-shadow:0 0 12px var(--green) }
.live.disconnected span { background:var(--red); box-shadow:none }
main { max-width:1440px; margin:auto; padding:30px 24px 70px }
section { margin-bottom:40px }
.hero { min-height:210px; border:1px solid var(--line); border-radius:18px; padding:34px; display:flex; justify-content:space-between; align-items:flex-end; overflow:hidden; position:relative; background:linear-gradient(115deg,#152132,#111923) }
.hero:after { content:""; position:absolute; width:380px; height:380px; border-radius:50%; right:-130px; top:-210px; background:var(--state-color,#637187); filter:blur(18px); opacity:.18 }
.hero.state-stable { --state-color:var(--green); border-color:#38d99655 }
.hero.state-degraded { --state-color:var(--amber); border-color:#ffb84d66 }
.hero.state-down { --state-color:var(--red); border-color:#ff627566 }
.eyebrow { text-transform:uppercase; letter-spacing:.15em; color:var(--muted); font-size:11px; font-weight:750; margin:0 0 7px }
h1,h2,p { margin-top:0 }
h1 { margin-bottom:8px; font-size:44px; line-height:1; letter-spacing:-.04em }
h2 { margin:0; font-size:22px; letter-spacing:-.025em }
#overall-detail { color:var(--muted); margin:0 }
.hero > div:first-child { position:relative; z-index:1; min-width:0 }
.hero-probes { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:23px }
.hero-probe { display:inline-flex; align-items:center; gap:7px; color:#c5d2e2; font-size:12px; min-width:0; border:0; padding:3px 0; background:transparent; cursor:pointer }
.hero-probe > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hero-probe:hover { color:var(--text) }
.hero-probe:focus-visible { outline:2px solid var(--blue); outline-offset:4px; border-radius:3px }
.hero-probe i { width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:var(--muted); box-shadow:0 0 0 3px #8da0b815 }
.hero-probe.stable i { background:var(--green); box-shadow:0 0 9px #38d996aa }
.hero-probe.degraded i { background:var(--amber); box-shadow:0 0 9px #ffb84d88 }
.hero-probe.down i { background:var(--red); box-shadow:0 0 9px #ff6275aa }
.hero-meta { text-align:right; position:relative; z-index:1 }
.hero-meta span,.hero-meta strong { display:block }
.hero-meta span { color:var(--muted); font-size:12px }
.hero-meta strong { font-size:18px; margin-top:4px }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:15px; gap:20px }
.muted { color:var(--muted); font-size:13px }
.incident-panel { padding:0; overflow:hidden }
.incident-tools { display:grid; grid-template-columns:minmax(240px,1fr) repeat(4,minmax(120px,auto)); gap:10px; padding:15px; border-bottom:1px solid var(--line); background:#101823 }
.incident-tools select,.incident-search input { width:100%; min-height:39px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text) }
.incident-search { position:relative }
.incident-search span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0) }
.incident-search input::placeholder { color:#75869b }
.incident-head,.incident-row { display:grid; grid-template-columns:minmax(170px,1.5fr) .7fr .7fr 1.15fr 1.15fr .75fr; gap:14px; align-items:center }
.incident-head { padding:10px 18px; color:var(--muted); background:#0f161f; border-bottom:1px solid var(--line); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em }
.incident-row { position:relative; padding:14px 18px; border-bottom:1px solid var(--line); font-size:12px }
.incident-row:last-child { border-bottom:0 }
.incident-row.active { background:#ff627507 }
.incident-row.active:before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--red) }
.incident-name { display:flex; align-items:center; gap:8px; min-width:0 }
.incident-name strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.incident-name small { color:var(--red); border:1px solid #ff627555; border-radius:999px; padding:2px 6px; font-size:9px; text-transform:uppercase; letter-spacing:.06em }
.incident-dot { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:var(--amber) }
.incident-dot.full_fail { background:var(--red) }
.type-pill,.severity { display:inline-block; border-radius:999px; padding:4px 8px; font-size:10px; font-weight:650 }
.type-pill { color:#b7c7da; background:#8da0b814; border:1px solid #8da0b82d }
.severity.degraded { color:var(--amber); background:#ffb84d12; border:1px solid #ffb84d45 }
.severity.full_fail { color:var(--red); background:#ff627512; border:1px solid #ff627545 }
.incident-row time { color:var(--muted) }
.incident-empty { padding:20px; margin:0 }
.target-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px }
.target-card,.panel { border:1px solid var(--line); border-radius:14px; background:linear-gradient(145deg,var(--surface),#101720); box-shadow:0 10px 35px #00000022 }
.target-card { padding:18px; min-height:142px; position:relative; overflow:hidden }
.target-card.interactive { cursor:pointer; transition:border-color .15s ease,transform .15s ease,background .15s ease }
.target-card.interactive:hover { border-color:color-mix(in srgb,var(--card-color) 50%,var(--line)); background:linear-gradient(145deg,#182333,#111a25); transform:translateY(-1px) }
.target-card.interactive:focus-visible { outline:2px solid var(--blue); outline-offset:3px }
.target-card:before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--card-color) }
.target-card.stable { --card-color:var(--green) }.target-card.degraded { --card-color:var(--amber) }.target-card.down { --card-color:var(--red) }.target-card.unknown { --card-color:var(--muted) }
.card-top { display:flex; justify-content:space-between; gap:12px }
.card-top strong { font-size:15px }
.card-role { color:var(--muted); text-transform:uppercase; font-size:10px; letter-spacing:.12em; display:block; margin-bottom:2px }
.badge { color:var(--card-color); background:color-mix(in srgb,var(--card-color) 11%,transparent); border:1px solid color-mix(in srgb,var(--card-color) 32%,transparent); border-radius:999px; padding:4px 8px; text-transform:capitalize; font-size:11px; height:min-content }
.card-address { color:var(--muted); font:12px ui-monospace,SFMono-Regular,Menlo,monospace; margin:7px 0 14px }
.card-address:empty { display:none }
.card-metrics { display:flex; gap:20px }
.card-metrics span { color:var(--muted); font-size:10px; display:block }
.card-metrics strong { font-size:16px }
.speed-layout { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.panel { padding:20px }
.speed-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; min-height:130px; align-items:center }
.speed-metrics div { border-right:1px solid var(--line); padding-left:12px }
.speed-metrics div:last-child { border:0 }
.speed-metrics span,.speed-metrics small { color:var(--muted); display:block; font-size:11px }
.speed-metrics strong { font-size:32px; letter-spacing:-.04em; line-height:1.2 }
.speed-empty { color:var(--muted); font-size:12px }
.panel-footer { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:13px; color:var(--muted); font-size:11px; gap:20px }
.button { border:1px solid #67b7ff66; background:#67b7ff18; color:#a8d5ff; border-radius:9px; padding:9px 14px; cursor:pointer }
.button:hover { background:#67b7ff2b }.button:disabled { opacity:.45; cursor:not-allowed }
.panel-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:16px }
.panel-title strong,.panel-title span { display:block }.panel-title span { color:var(--muted); font-size:11px }
.small-chart canvas { width:100%; height:126px }
.controls { display:flex; gap:10px; align-items:center }
#diagnostics { scroll-margin-top:96px }
select,.segmented { background:var(--surface); border:1px solid var(--line); color:var(--text); border-radius:9px }
select { padding:8px 30px 8px 10px }
.segmented { display:flex; overflow:hidden }
.segmented button { border:0; border-right:1px solid var(--line); background:transparent; color:var(--muted); padding:8px 11px; cursor:pointer }
.segmented button:last-child { border:0 }.segmented button.active { color:var(--text); background:var(--surface-2) }
.main-chart { padding:22px }
.main-chart canvas { width:100%; height:430px; display:block }
.chart-wrap { position:relative }
.legend { display:flex; gap:16px; flex-wrap:wrap }
.legend span { color:var(--muted); font-size:11px }
.legend span:before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; background:var(--legend-color) }
.legend .latency { --legend-color:var(--blue) }.legend .jitter { --legend-color:var(--amber) }.legend .loss { --legend-color:var(--purple) }
.legend .download { --legend-color:var(--blue) }.legend .upload { --legend-color:var(--cyan) }
.axis-labels { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; margin:3px 3px 0 }
.tooltip { position:absolute; pointer-events:none; background:#090d13ee; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:11px; box-shadow:0 8px 25px #0008 }
.tooltip.hidden { display:none }
.events { max-height:300px; overflow:auto }
.event { display:grid; grid-template-columns:130px 90px 1fr; gap:14px; align-items:center; padding:11px 4px; border-bottom:1px solid var(--line); font-size:12px }
.event:last-child { border:0 }.event time,.event .transition { color:var(--muted) }
@media (max-width:1100px) {
  .incident-tools { grid-template-columns:1fr 1fr 1fr }
  .incident-search { grid-column:span 2 }
  .incident-head,.incident-row { grid-template-columns:minmax(150px,1.3fr) .7fr .7fr 1fr 1fr .7fr; gap:9px }
}
@media (max-width:1000px) { .target-grid { grid-template-columns:repeat(2,1fr) }.speed-layout { grid-template-columns:1fr }.graph-heading { align-items:flex-start; flex-direction:column }.controls { width:100%; justify-content:space-between } }
@media (max-width:650px) {
  main { padding:20px 14px 50px }.topbar { padding:0 15px }.brand small { display:none }
  .hero { padding:24px; min-height:245px; align-items:flex-start; flex-direction:column }.hero-meta { text-align:left } h1 { font-size:36px }
  .hero-probes { margin-top:18px; gap:8px 14px }
  .target-grid { grid-template-columns:1fr }.speed-metrics { grid-template-columns:repeat(2,1fr) }.speed-metrics div:nth-child(2) { border:0 }
  .incident-tools { grid-template-columns:1fr 1fr; padding:12px }.incident-search { grid-column:1/-1 }
  .incident-head { display:none }
  .incident-row { grid-template-columns:1fr 1fr; gap:10px 15px; padding:16px }
  .incident-name { grid-column:1/-1; padding-bottom:5px }
  .incident-row > [data-label]:before { content:attr(data-label); display:block; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:3px }
  .section-heading { align-items:flex-start }.controls { align-items:stretch; flex-direction:column }.segmented button { flex:1; padding:8px 5px }
  .main-chart { padding:14px }.main-chart canvas { height:330px }.panel-title { align-items:flex-start; flex-direction:column }
  .event { grid-template-columns:1fr }.event time { margin-bottom:-8px }
}