/* Original radial view. Colors extend the credited sparkDash palette. */
:root { --orbit-query:#91dbc3; --orbit-blocked:#efc666; --orbit-peak:#f49c83; --orbit-lilac:#b6acd5; --orbit-ivory:#eee8cf; --orbit-muted:#aaa995; --orbit-paper:#181a17; --orbit-core:#20231e; --orbit-grid:#494b3e; }
[data-theme="light"] { --orbit-query:#187765; --orbit-blocked:#9e690c; --orbit-peak:#be523d; --orbit-lilac:#78639d; --orbit-ivory:#343b2e; --orbit-muted:#727462; --orbit-paper:#fbf9f1; --orbit-core:#f1f0e5; --orbit-grid:#c5c6b5; }
.orbit-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.orbit-kicker { color:var(--accent-text); font:11px 'Geist Mono',monospace; letter-spacing:.16em; text-transform:uppercase; margin:0 0 8px; }
.orbit-title { font-size:24px; letter-spacing:-.05em; margin:0 0 7px; font-weight:550; }
.orbit-sub { color:var(--muted); font-size:12px; line-height:1.6; margin:0; max-width:600px; }
.orbit-layout { display:grid; grid-template-columns:minmax(0,1fr) 255px; align-items:center; gap:20px; }
.orbit-canvas { min-width:0; }
.orbit-canvas svg { display:block; width:100%; height:auto; max-height:680px; font-family:'Geist Mono',monospace; overflow:visible; }
.orbit-canvas .orbit-label { font-size:10px; fill:var(--muted-strong); }
.orbit-canvas .orbit-grid-label { font-size:9px; fill:var(--muted); }
.orbit-hit { cursor:pointer; outline:none; }
.orbit-hit .orbit-focus { opacity:0; }
.orbit-hit:hover .orbit-focus, .orbit-hit:focus .orbit-focus, .orbit-hit[aria-pressed="true"] .orbit-focus { opacity:1; }
.orbit-inspector { border-left:1px solid var(--border); padding:24px 0 24px 24px; }
.orbit-inspector h3 { font-size:18px; margin:10px 0 14px; font-weight:550; letter-spacing:-.03em; }
.orbit-value { font:500 38px 'Geist Mono',monospace; letter-spacing:-.08em; color:var(--orbit-query); margin:0; }
.orbit-stat { display:flex; justify-content:space-between; gap:12px; font-size:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.orbit-stat span { color:var(--muted); }
.orbit-help { font-size:11px; line-height:1.8; color:var(--muted); margin-top:20px; }
.orbit-key { display:flex; gap:18px; flex-wrap:wrap; font-size:11px; color:var(--muted-strong); margin:16px 0 0; }
.orbit-key span { display:flex; align-items:center; gap:7px; }
.orbit-key i { width:7px; height:7px; border-radius:50%; display:inline-block; }
.orbit-steps { display:flex; gap:8px; margin-top:16px; }
.orbit-steps .btn { flex:1; justify-content:center; }
.orbit-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.orbit-toggle { display:flex; padding:3px; gap:3px; border:1px solid var(--border); border-radius:9px; background:var(--base); }
.orbit-toggle button { border:0; color:var(--muted-strong); background:transparent; border-radius:6px; padding:7px 10px; font:inherit; font-size:11px; cursor:pointer; }
.orbit-toggle button[aria-pressed="true"] { background:var(--elev); color:var(--text); box-shadow:0 1px 3px #0003; }
.traffic-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:20px 0; }
.traffic-number { padding:16px; border:1px solid var(--border); border-radius:10px; background:var(--elev); }
.traffic-number span { display:block; font-size:11px; color:var(--muted); margin-bottom:8px; }
.traffic-number strong { font:500 24px 'Geist Mono',monospace; letter-spacing:-.06em; }
.device-meter { width:100%; min-width:70px; height:5px; display:flex; gap:1px; background:var(--border); border-radius:3px; overflow:hidden; }
.device-meter i { display:block; background:var(--orbit-query); }
.device-meter i + i { background:var(--accent); }
.traffic-controls { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:16px 0; }
.traffic-controls input, .traffic-controls select { font:inherit; font-size:12px; padding:9px 12px; background:var(--elev); color:var(--text); border:1px solid var(--border); border-radius:7px; }
.traffic-controls input { flex:1; min-width:160px; }
.source-note { font-size:11px; line-height:1.7; color:var(--muted); }
.source-tag { display:inline-flex; padding:5px 9px; font:10px 'Geist Mono',monospace; border:1px solid var(--border-strong); border-radius:6px; color:var(--muted-strong); text-transform:uppercase; letter-spacing:.06em; }
.source-tag.warn { color:var(--warning); }
.traffic-empty { padding:26px 0; max-width:720px; }
.traffic-empty h3 { font-size:21px; font-weight:500; margin:0 0 12px; }
.traffic-empty p { font-size:13px; line-height:1.8; color:var(--muted-strong); }
.traffic-empty code { font-size:11px; overflow-wrap:anywhere; }
.privacy-strip { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; border-bottom:1px solid var(--border); padding:0 0 14px; }
.privacy-strip p { font-size:11px; color:var(--muted); margin:0; }
body.privacy #hosts, body.privacy #apps, body.privacy #lists, body.privacy #updates, body.privacy #top > :not(:first-child), body.privacy #sideHosts, body.privacy #addBtn { display:none !important; }
body.privacy #top { grid-template-columns:1fr; }
body.privacy #topBlocked .label { overflow-wrap:anywhere; }
body.empty #orbit, body.empty #devices { display:block; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media (max-width:1200px) { .orbit-layout { grid-template-columns:minmax(0,1fr) 220px; gap:8px; } .orbit-inspector { padding-left:16px; } }
@media (max-width:760px) { .orbit-layout { grid-template-columns:1fr; } .orbit-inspector { border-left:0; border-top:1px solid var(--border); padding:20px 0 0; } .orbit-canvas svg { max-height:540px; } .orbit-title { font-size:22px; } .traffic-summary { grid-template-columns:1fr 1fr; } .traffic-summary > :last-child { grid-column:1/-1; } .orbit-inspector .orbit-help { margin-top:12px; } }
@media (prefers-reduced-motion:no-preference) { .orbit-canvas svg { animation:orbit-appear .6s ease-out both; } @keyframes orbit-appear { from { opacity:0; transform:scale(.985); } to { opacity:1; transform:none; } } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto !important; } *, *::before, *::after { animation:none !important; transition:none !important; } }

body.privacy #banners, body.privacy #routerSetup { display:none !important; }
#routerSetup { border-top:1px solid var(--border); margin-top:20px; padding-top:16px; }
#routerSetup summary { cursor:pointer; color:var(--accent-text); font-size:12px; }

.brand-words { font-size:15px; line-height:1.15; } .brand-words span { display:block; font-size:13px; margin-top:3px; }

/* Warm paper, measured signals. These colors belong to the orbit only. */
#orbit { background:radial-gradient(ellipse at 31% 45%,color-mix(in srgb,var(--orbit-blocked) 4%,transparent),transparent 56%),var(--orbit-paper); border-color:color-mix(in srgb,var(--orbit-grid) 65%,transparent); }
#orbit .orbit-title { color:var(--orbit-ivory); font-size:26px; letter-spacing:-.045em; }
#orbit .orbit-sub, #orbit .source-note { color:var(--orbit-muted); }
#orbit .orbit-kicker { color:var(--orbit-blocked); font-size:10px; }
#orbit .source-tag { color:var(--orbit-muted); border-color:var(--orbit-grid); background:transparent; }
#orbit .orbit-key { color:var(--orbit-ivory); gap:20px; margin-top:20px; }
.orbit-key .orbit-key-peak { background:transparent; border:1.5px solid var(--orbit-peak); width:9px; height:9px; }
.orbit-layout { grid-template-columns:minmax(0,1fr) 288px; gap:24px; align-items:center; margin-top:10px; }
.orbit-map { min-width:0; }
.orbit-canvas svg { max-height:730px; }
.orbit-canvas .orbit-label { fill:var(--orbit-ivory); font-size:10px; letter-spacing:.04em; }
.orbit-canvas .orbit-grid-label { fill:var(--orbit-muted); font-size:8px; }
.orbit-center-kicker { fill:var(--orbit-muted); font-size:9px; letter-spacing:1.5px; }
.orbit-center-foot { fill:var(--orbit-muted); font-size:8px; letter-spacing:.7px; }
.orbit-time-band { opacity:.5; transition:opacity .18s; }
.orbit-time-band.selected { opacity:.95; }
.orbit-band-label { fill:var(--orbit-ivory); font-size:8px; letter-spacing:.02em; }
.orbit-hit:hover .orbit-focus, .orbit-hit:focus .orbit-focus, .orbit-hit[aria-pressed="true"] .orbit-focus { opacity:.8; }
.orbit-hit:focus-visible .orbit-focus { stroke-width:3; opacity:1; }
.orbit-peak-ring { opacity:.95; }
.orbit-read-map { text-align:center; color:var(--orbit-muted); font-size:11px; line-height:1.8; max-width:450px; margin:-15px auto 18px; padding:0 16px; }
.orbit-read-map span { color:var(--orbit-ivory); }
.orbit-sidebar { min-width:0; border-left:1px solid var(--orbit-grid); padding-left:24px; }
.orbit-inspector { border:0; border-top:1px solid var(--orbit-grid); padding:23px 0 0; margin-top:23px; }
.orbit-inspector h3 { font-size:15px; color:var(--orbit-ivory); margin:9px 0 14px; letter-spacing:-.02em; }
.orbit-selected-count { display:flex; align-items:baseline; flex-wrap:wrap; gap:9px; margin-bottom:12px; }
.orbit-selected-count > span { color:var(--orbit-muted); font-size:10px; }
.orbit-value { color:var(--orbit-query); font-size:36px; }
.orbit-stat { font-size:11px; padding:8px 0; border-color:color-mix(in srgb,var(--orbit-grid) 50%,transparent); }
.orbit-stat span { color:var(--orbit-muted); }
.orbit-stat strong { color:var(--orbit-ivory); }
.orbit-host-detail { margin-top:12px; }
.orbit-host-detail summary { color:var(--orbit-muted); cursor:pointer; font-size:11px; }
.orbit-steps { margin-top:16px; gap:4px; }
#orbit .orbit-steps .btn { font-size:11px; padding:7px 4px; color:var(--orbit-blocked); }
.orbit-activity-heading { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.orbit-activity-heading h3 { margin:0; color:var(--orbit-ivory); font-size:17px; font-weight:550; letter-spacing:-.035em; }
.orbit-mini-tag { color:var(--orbit-muted); font:9px 'Geist Mono',monospace; text-transform:uppercase; white-space:nowrap; }
.orbit-activity-note { margin:5px 0 16px; font-size:10px; }
.orbit-activity > svg { display:block; width:100%; height:auto; overflow:visible; }
.orbit-spark-label { fill:var(--orbit-muted); font:9px 'Geist Mono',monospace; }
.orbit-spike-bar { cursor:pointer; outline:none; }
.orbit-bar-focus { opacity:0; pointer-events:none; }
.orbit-spike-bar:hover .orbit-bar-focus, .orbit-spike-bar:focus .orbit-bar-focus, .orbit-spike-bar[aria-pressed="true"] .orbit-bar-focus { opacity:.85; }
.orbit-spike-bar:focus-visible .orbit-bar-focus { stroke-width:2; }
.orbit-median-note { display:flex; align-items:center; gap:6px; color:var(--orbit-lilac); font:9px 'Geist Mono',monospace; margin:11px 0 16px; }
.orbit-median-note i { width:16px; height:0; border-top:1px dashed var(--orbit-lilac); }
.orbit-peak-list { display:grid; gap:5px; }
.orbit-peak-button { display:grid; grid-template-columns:21px minmax(0,1fr) auto; gap:8px; align-items:center; width:100%; text-align:left; border:1px solid transparent; border-radius:7px; padding:9px 8px; background:color-mix(in srgb,var(--orbit-ivory) 3%,transparent); cursor:pointer; font-family:inherit; color:var(--orbit-ivory); transition:background .15s,border-color .15s; }
.orbit-peak-button:hover, .orbit-peak-button[aria-pressed="true"] { background:color-mix(in srgb,var(--orbit-peak) 9%,transparent); border-color:color-mix(in srgb,var(--orbit-peak) 35%,transparent); }
.orbit-peak-rank { color:var(--orbit-peak); font:10px 'Geist Mono',monospace; align-self:start; padding-top:2px; }
.orbit-peak-time { font-size:11px; }
.orbit-peak-time small { display:block; color:var(--orbit-muted); font-size:9px; margin-top:4px; }
.orbit-peak-button strong { color:var(--orbit-peak); font:500 15px 'Geist Mono',monospace; letter-spacing:-.05em; }
.orbit-coverage-note { color:var(--orbit-muted); font-size:9px; line-height:1.6; margin:12px 0 0; }
.orbit-wait { min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px; }
.orbit-wait > span { font-size:90px; color:var(--orbit-query); line-height:1; }
.orbit-wait h3 { color:var(--orbit-ivory); font-size:20px; font-weight:500; margin:22px 0 8px; }
.orbit-wait p { max-width:310px; color:var(--orbit-muted); font-size:12px; line-height:1.7; }
@media (max-width:1250px) { .orbit-layout { grid-template-columns:minmax(0,1fr) 252px; gap:15px; } .orbit-sidebar { padding-left:18px; } .orbit-mini-tag { font-size:8px; } }
@media (max-width:1050px) { .orbit-layout { grid-template-columns:1fr; } .orbit-sidebar { display:grid; grid-template-columns:1fr 1fr; gap:28px; padding:24px 0 0; border-left:0; border-top:1px solid var(--orbit-grid); } .orbit-inspector { margin:0; padding:0 0 0 24px; border-top:0; border-left:1px solid var(--orbit-grid); } .orbit-canvas svg { max-height:640px; } .orbit-read-map { margin-top:-12px; } }
@media (max-width:650px) { #orbit .orbit-title { font-size:23px; } #orbit .orbit-key { gap:11px 16px; font-size:10px; } .orbit-sidebar { grid-template-columns:1fr; gap:24px; } .orbit-inspector { padding:24px 0 0; border-left:0; border-top:1px solid var(--orbit-grid); } .orbit-canvas svg { max-height:500px; margin:8px 0; } .orbit-read-map { font-size:10px; padding:0; margin:0 auto 12px; } .orbit-activity > svg { max-height:155px; } .orbit-activity-heading h3 { font-size:18px; } .orbit-peak-button { padding:11px; } .orbit-coverage-note { font-size:10px; } }