/* Looking Glass v6 — tokens + components. Dark by default, light via prefers-color-scheme
   or an explicit [data-th] set by the theme toggle. */
/* Accent: purple. Light-mode value is darker so it keeps >= 4.9:1 contrast (WCAG AA). */
:root { --ac-d: oklch(0.80 0.15 285); --ac-l: oklch(0.50 0.14 285); }
:root {
  --bg: oklch(0.152 0.007 260); --sur: oklch(0.196 0.008 260); --sur2: oklch(0.238 0.009 260);
  --line: oklch(0.286 0.010 260); --line2: oklch(0.376 0.012 260);
  --ink: oklch(0.972 0.003 260); --ink2: oklch(0.748 0.010 260); --ink3: oklch(0.582 0.010 260);
  --a1: var(--ac-d); --a2: oklch(0.84 0.14 84); --a3: oklch(0.78 0.14 300);
  --ok: oklch(0.80 0.15 152); --bad: oklch(0.70 0.19 25);
  --term: oklch(0.112 0.010 260); --termink: oklch(0.885 0.015 260);
  --page: oklch(0.118 0.006 260);
  --pad: 36px;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-th="dark"]) {
    --bg: oklch(0.982 0.004 92); --sur: oklch(1 0 0); --sur2: oklch(0.956 0.005 92);
    --line: oklch(0.894 0.006 92); --line2: oklch(0.792 0.008 92);
    --ink: oklch(0.192 0.012 260); --ink2: oklch(0.424 0.010 260); --ink3: oklch(0.572 0.010 260);
    --a1: var(--ac-l); --a2: oklch(0.54 0.13 72); --a3: oklch(0.48 0.16 300);
    --ok: oklch(0.50 0.13 152); --bad: oklch(0.50 0.18 25);
    --term: oklch(0.145 0.010 260); --termink: oklch(0.900 0.012 260);
    --page: oklch(0.935 0.006 92);
    color-scheme: light;
  }
}
:root[data-th="light"] {
  --bg: oklch(0.982 0.004 92); --sur: oklch(1 0 0); --sur2: oklch(0.956 0.005 92);
  --line: oklch(0.894 0.006 92); --line2: oklch(0.792 0.008 92);
  --ink: oklch(0.192 0.012 260); --ink2: oklch(0.424 0.010 260); --ink3: oklch(0.572 0.010 260);
  --a1: var(--ac-l); --a2: oklch(0.54 0.13 72); --a3: oklch(0.48 0.16 300);
  --ok: oklch(0.50 0.13 152); --bad: oklch(0.50 0.18 25);
  --term: oklch(0.145 0.010 260); --termink: oklch(0.900 0.012 260);
  --page: oklch(0.935 0.006 92);
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font: 15px/1.4 'Archivo', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--a1); text-decoration: none; }
a:hover { color: var(--ink); }
input, select, button, textarea { font: inherit; color: inherit; border-radius: 0; }
input:focus-visible, select:focus-visible, button:focus-visible, textarea:focus-visible { outline: 1px solid var(--a1); outline-offset: 1px; }
select option { background: var(--sur); color: var(--ink); }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
code, pre { font-family: var(--mono); }
::selection { background: var(--a1); color: var(--bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sur); }
::-webkit-scrollbar-thumb { background: var(--line2); }
@keyframes liv { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
@keyframes spin { to { transform: rotate(360deg) } }

/* ── small type helpers ── */
.mono { font-family: var(--mono); }
.cap { font: 600 12.5px 'Archivo', system-ui, sans-serif; color: var(--ink3); }
.dim { color: var(--ink3); }
.ell { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flag { width: 20px; height: 14px; flex: 0 0 auto; background: var(--sur2) center/cover no-repeat; }
.led { width: 7px; height: 7px; flex: 0 0 auto; background: var(--line2); }
.led.live { animation: liv 1.2s infinite; }
.tag { display: inline-block; padding: 3px 9px; font: 700 11.5px var(--mono); white-space: nowrap; background: var(--sur2); color: var(--ink2); }
.tag.a1 { color: var(--a1); background: color-mix(in oklab, var(--a1) 14%, transparent); }
.tag.a2 { color: var(--a2); background: color-mix(in oklab, var(--a2) 14%, transparent); }
.tag.a3 { color: var(--a3); background: color-mix(in oklab, var(--a3) 14%, transparent); }
.tag.ok { color: var(--ok); background: color-mix(in oklab, var(--ok) 14%, transparent); }
.tag.bad { color: var(--bad); background: color-mix(in oklab, var(--bad) 14%, transparent); }
.c-ok { color: var(--ok); } .c-a1 { color: var(--a1); } .c-a2 { color: var(--a2); } .c-bad { color: var(--bad); }

/* ── controls ── */
.field { background: var(--bg); border: 1px solid var(--line2); border-radius: 4px; padding: 10px 14px; font: 14px var(--mono); min-width: 0; }
.field::placeholder { color: var(--ink3); }
.sel { background: var(--bg); border: 1px solid var(--line2); border-radius: 4px; padding: 9px 12px; font-size: 14px; }
.btn-util { background: transparent; color: var(--ink2); border: 0; border-left: 1px solid var(--line); padding: 12px 16px; font: 600 13px 'Archivo', system-ui, sans-serif; white-space: nowrap; }
.btn-util:hover:not(:disabled) { color: var(--ink); }
.btn-util.on { background: var(--sur2); color: var(--ink); }
.btn-ghost { flex: 0 0 auto; background: transparent; border: 1px solid var(--line2); padding: 5px 12px; font: 600 12.5px 'Archivo', system-ui, sans-serif; color: var(--ink2); }
.btn-ghost:hover:not(:disabled) { border-color: var(--a1); color: var(--a1); }
.btn-solid { border: 0; padding: 0 32px; font-weight: 800; font-size: 15px; color: var(--bg); background: var(--a1); }
.btn-solid:hover:not(:disabled) { filter: brightness(1.1); }
.btn-solid.ok { background: var(--ok); } .btn-solid.bad { background: var(--bad); }
.spin { display: inline-block; width: 10px; height: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -1px; }

/* ── page chrome ── */
.chrome { display: flex; align-items: stretch; flex-wrap: wrap; min-height: 52px; border-bottom: 1px solid var(--line); background: var(--sur); }
.chrome > * { display: flex; align-items: center; gap: 9px; padding: 0 18px; border-right: 1px solid var(--line); }
.chrome .brand { gap: 14px; padding: 0 var(--pad); }
.chrome .logo { width: 118px; height: 18px; background: url('../rsdark.png') left center/contain no-repeat; }
:root[data-th="light"] .chrome .logo { background-image: url('../rslight.png'); }
@media (prefers-color-scheme: light) { :root:not([data-th="dark"]) .chrome .logo { background-image: url('../rslight.png'); } }
.chrome .v { font: 600 13.5px var(--mono); }
.chrome .grow { flex: 1 1 auto; border-right: 0; padding: 0; }
.chrome .right { border-right: 0; border-left: 1px solid var(--line); }
.chrome button.right { background: transparent; border-top: 0; border-bottom: 0; font: 600 13px 'Archivo', system-ui, sans-serif; color: var(--ink2); }
.chrome button.right:hover { color: var(--a1); }
.copyip { background: transparent; border: 0; padding: 0; font: 600 13.5px var(--mono); color: var(--ink); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.copyip .ci { color: var(--ink3); flex: 0 0 auto; }
.copyip:hover, .copyip:hover .ci { color: var(--a1); }

/* ── query line + methods ── */
.query { display: flex; align-items: stretch; gap: 12px; padding: 14px var(--pad); border-bottom: 1px solid var(--line); background: var(--sur); }
.query .q { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 16px; }
.query input { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line2); border-radius: 6px; padding: 14px 18px; font: 600 24px var(--mono); letter-spacing: -.035em; }
.query input::placeholder { color: var(--ink3); font-weight: 500; }
.query .run { padding: 0 34px; display: flex; align-items: center; gap: 11px; border-radius: 6px; }
.methods { display: flex; align-items: stretch; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.methods .lbl { display: flex; align-items: center; padding: 0 18px 0 var(--pad); border-right: 1px solid var(--line); }
.methods .m { background: transparent; color: var(--ink2); border: 0; border-right: 1px solid var(--line); padding: 13px 18px; font: 600 14px 'Archivo', system-ui, sans-serif; }
.methods .m:hover { color: var(--ink); }
.methods .m.on { background: var(--a1); color: var(--bg); font-weight: 700; }
.methods .grow { flex: 1 1 auto; }
.errbar { padding: 12px var(--pad); border-bottom: 1px solid var(--line); color: var(--bad); font: 12px var(--mono); background: color-mix(in oklab, var(--bad) 8%, transparent); }

/* ── console: queue | output ── */
.console { display: grid; grid-template-columns: 352px minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.queue { border-right: 1px solid var(--line); min-width: 0; background: var(--sur); }
.qhead { display: flex; align-items: center; gap: 10px; padding: 13px 20px; border-bottom: 1px solid var(--line); }
.qhead .meta { font: 12.5px var(--mono); color: var(--ink2); margin-left: auto; }
.job { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); cursor: pointer; min-width: 0; box-shadow: inset 3px 0 0 transparent; }
.job:hover { background: var(--sur2); }
.job.open { background: color-mix(in oklab, var(--a1) 11%, transparent); box-shadow: inset 3px 0 0 var(--a1); }
.job .led { opacity: .55; } .job.open .led { opacity: 1; }
.job .body { min-width: 0; flex: 1 1 auto; }
.job .city { font-size: 14.5px; font-weight: 700; letter-spacing: -.015em; color: var(--ink2); }
.job.open .city { color: var(--ink); }
.job .line { font: 12px var(--mono); color: var(--ink3); }
.job .num { flex: 0 0 auto; text-align: right; }
.job .avg { font: 700 16px var(--mono); letter-spacing: -.04em; }
.job .t { font: 12px 'Archivo', system-ui, sans-serif; color: var(--ink3); }
.kv { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.kv .cap { margin-bottom: 12px; }
.kv .row { display: flex; align-items: baseline; gap: 12px; padding: 5px 0; }
.kv .k { font: 13px 'Archivo', system-ui, sans-serif; color: var(--ink3); width: 84px; flex: 0 0 auto; }
.kv .v { font: 600 13.5px var(--mono); min-width: 0; }
.kv .s { font: 12.5px 'Archivo', system-ui, sans-serif; color: var(--ink3); margin-left: auto; white-space: nowrap; }

.output { min-width: 0; display: flex; flex-direction: column; }
.ohead { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); background: var(--sur); min-height: 46px; }
.ohead .title { display: flex; align-items: center; gap: 12px; padding: 0 22px; min-width: 0; flex: 1 1 auto; }
.ohead .tt { font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.ohead .mm { font: 13px var(--mono); color: var(--ink3); }
.cmdline { background: var(--term); padding: 14px 26px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.cmdline .d { font: 12.5px var(--mono); color: var(--a1); }
.cmdline code { flex: 1; min-width: 0; font-size: 12.5px; color: var(--termink); }
.cmdline .time { flex: 0 0 auto; font: 12px var(--mono); color: oklch(0.62 0.02 260); }
.empty { padding: 56px 26px; color: var(--ink3); font: 15px/1.7 'Archivo', system-ui, sans-serif; text-align: center; }
.hops .hr { display: grid; grid-template-columns: 52px minmax(0, 1fr) 130px 110px 120px 90px; align-items: center; padding: 12px 26px; border-bottom: 1px solid var(--line); }
.hops .hr:nth-child(odd) { background: var(--sur); }
.hops .hh { padding: 11px 26px; background: var(--sur2) !important; font: 600 12.5px 'Archivo', system-ui, sans-serif; color: var(--ink3); }
.hops .r { text-align: right; }
.hops .n { font: 13px var(--mono); color: var(--ink3); }
.hops .host { font: 500 14px var(--mono); padding-right: 16px; }
.hops .sm { font: 13px var(--mono); color: var(--ink2); }
.hops .big { font: 600 15px var(--mono); letter-spacing: -.035em; }
.hops .foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 26px; background: var(--sur); font: 13px 'Archivo', system-ui, sans-serif; color: var(--ink3); }
.raw { margin: 0; background: var(--term); padding: 22px 26px; font: 12.5px/1.85 var(--mono); color: var(--termink); white-space: pre; overflow-x: auto; max-height: 640px; overflow-y: auto; }
.maphead { display: flex; align-items: center; gap: 18px; padding: 11px 26px; border-bottom: 1px solid var(--line); background: var(--sur2); font: 13px 'Archivo', system-ui, sans-serif; color: var(--ink2); }
.maphead .lg { margin-left: auto; display: flex; gap: 16px; }
.maphead .lg span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink3); }
.maphead .lg i { width: 8px; height: 8px; border-radius: 50%; }
#inlineMap { height: 452px; width: 100%; background: #0d1117; }

/* ── section shells ── */
.sec { border-bottom: 1px solid var(--line); }
.sh { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 15px var(--pad); border-bottom: 1px solid var(--line); background: var(--sur); }
.sh h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.025em; }
.sh .sub { font: 13.5px 'Archivo', system-ui, sans-serif; color: var(--ink3); }
.sh .end { margin-left: auto; }
.bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px var(--pad); border-bottom: 1px solid var(--line); }
.bar .lbl { display: flex; align-items: center; padding: 0 6px 0 0; }
.bar .btn-util { border: 1px solid var(--line2); border-radius: 4px; padding: 9px 14px; }
.bar .btn-solid { border-radius: 4px; padding: 11px 24px; align-self: stretch; }
.bar .grow { flex: 1 1 auto; }
.note { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; padding: 13px var(--pad); border-bottom: 1px solid var(--line); background: var(--sur); font: 13px/1.5 'Archivo', system-ui, sans-serif; color: var(--ink3); }
.note .end { margin-left: auto; }
.filebtn { border: 1px solid var(--line2); padding: 7px 22px; font: 600 13px var(--mono); color: var(--ink2); }
.filebtn:hover { border-color: var(--a2); color: var(--a2); }
.term { display: flex; align-items: center; gap: 12px; background: var(--term); padding: 12px 15px; }
.term code, .term input { flex: 1; min-width: 0; font: 13px var(--mono); color: var(--termink); background: transparent; border: 0; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term .btn-ghost { border-color: oklch(0.38 0.02 260); color: oklch(0.74 0.02 260); }

/* iPerf3 throughput */
.caps { margin-left: auto; display: flex; gap: 24px; align-items: baseline; }
.caps div { display: flex; align-items: baseline; gap: 7px; }
.caps b { font: 700 20px var(--mono); letter-spacing: -.045em; color: var(--a2); }
.cmds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cmds .cell { padding: 17px var(--pad); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.cmds .cell:nth-child(even) { background: var(--sur); border-right: 0; }
.cmds .ch { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.cmds .ch b { font-size: 14.5px; letter-spacing: -.015em; }
.cmds .ch .end { margin-left: auto; font: 12.5px var(--mono); color: var(--ink3); }

/* Public iPerf3 endpoints table */
.ep-wrap { max-height: 560px; overflow-y: auto; }
.ep { width: 100%; border-collapse: collapse; }
.ep th { position: sticky; top: 0; z-index: 1; background: var(--sur2); padding: 11px 12px; text-align: left; font: 600 12.5px 'Archivo', system-ui, sans-serif; color: var(--ink3); border-bottom: 1px solid var(--line); }
.ep th:first-child, .ep td:first-child { padding-left: var(--pad); }
.ep th:last-child, .ep td:last-child { padding-right: var(--pad); }
.ep td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ep tbody tr:nth-child(even) { background: var(--sur); }
.ep .co { font-size: 14.5px; font-weight: 700; letter-spacing: -.015em; }
.ep .ci { font: 12px var(--mono); color: var(--ink3); }
.ep .cmdl { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 7px; }
.ep .cmdl:last-child { margin-bottom: 0; }
.ep .cmdl span { font: 600 11px var(--mono); color: var(--ink3); width: 16px; flex: 0 0 auto; }
.ep .cmdl code { flex: 1; min-width: 0; font-size: 13px; word-break: break-all; }
.ep .iperf-dl-cmd { color: var(--a1); } .ep .iperf-ul-cmd { color: var(--ink2); }
.ep .port { font: 13px var(--mono); padding: 5px 9px; border: 1px solid var(--line); color: var(--ink3); background: transparent; display: inline-block; }
.ep select.port { border-color: var(--line2); color: var(--ink); background: var(--sur2); }
.ep .votes { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.ep .vb { background: transparent; border: 1px solid var(--line2); padding: 3px 10px; font: 13px var(--mono); color: var(--ink3); }
.ep .vb.up { color: var(--ok); } .ep .vb.rep { color: var(--bad); }
.ep .vb:hover:not(:disabled) { border-color: currentColor; }
.ep .rate { text-align: right; }
.ep .iperf-not-rated { font: italic 12px 'Archivo', system-ui, sans-serif; color: var(--ink3); margin-top: 6px; }
.ep .iperf-down-status { font: 12px var(--mono); color: var(--bad); margin-top: 6px; }
.ep .iperf-verify-panel { margin-top: 8px; text-align: left; font: 12px/1.4 'Archivo', system-ui, sans-serif; color: var(--ink3); }
.ep .iperf-verify-panel textarea { width: 100%; background: var(--term); color: var(--termink); border: 1px solid var(--line); font: 12px var(--mono); padding: 4px 6px; resize: vertical; }
.ep .iperf-verify-panel .vr { display: flex; gap: 6px; align-items: center; margin-top: 5px; }
.is-invalid { outline: 1px solid var(--bad) !important; }

/* Bootstrap-named badges still emitted by the iPerf + remote-test scripts */
.badge { display: inline-block; padding: 2px 7px; font: 700 11.5px var(--mono); background: var(--sur2); color: var(--ink2); }
.badge.bg-success { color: var(--ok); background: color-mix(in oklab, var(--ok) 14%, transparent); }
.badge.bg-danger { color: var(--bad); background: color-mix(in oklab, var(--bad) 14%, transparent); }
.badge.bg-warning { color: var(--a2); background: color-mix(in oklab, var(--a2) 14%, transparent); }
.badge.bg-info { color: var(--a1); background: color-mix(in oklab, var(--a1) 14%, transparent); }
.text-danger { color: var(--bad); } .text-success { color: var(--ok); }

/* External reachability + diagnostics */
.split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.split > div { min-width: 0; }
.split > div:first-child { border-right: 1px solid var(--line); }
.split.cards { gap: 22px; margin: 22px var(--pad); }
.split.cards > div { border: 1px solid var(--line2); background: var(--bg); }
.probes { height: 340px; overflow: auto; }
.probes .grp { position: sticky; top: 0; z-index: 1; background: var(--sur2); padding: 9px var(--pad); border-bottom: 1px solid var(--line); font: 600 12.5px 'Archivo', system-ui, sans-serif; color: var(--ink3); display: flex; justify-content: space-between; }
.probes label { display: flex; align-items: center; gap: 13px; padding: 11px var(--pad); cursor: pointer; border-bottom: 1px solid var(--line); }
.probes label:hover { background: var(--sur2); }
.probes label.sel { background: color-mix(in oklab, var(--ok) 8%, transparent); }
.probes label.off { opacity: .45; cursor: default; }
.probes .probe-cb { margin: 0; width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--ok); cursor: pointer; }
.probes .probe-cb:checked { background: var(--ok); }
.probes .nm { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.probes .as { font: 12.5px var(--mono); color: var(--ink3); }
.probes .kind { margin-left: auto; font: 11.5px var(--mono); color: var(--ink3); }
.probes .kind.isp { color: var(--ok); } .probes .kind.cloud { color: var(--a1); }
.probes .msg { padding: 28px var(--pad); color: var(--ink3); font: 14px 'Archivo', system-ui, sans-serif; }
.probes .more { display: block; width: 100%; padding: 12px; background: transparent; border: 0; font: 600 13px 'Archivo', system-ui, sans-serif; color: var(--a1); }
.formmsg { padding: 10px var(--pad); border-bottom: 1px solid var(--line); font: 13px/1.5 'Archivo', system-ui, sans-serif; }
.steps .st { display: flex; gap: 16px; padding: 15px var(--pad); border-bottom: 1px solid var(--line); }
.steps .st:nth-child(even) { background: var(--sur); }
.steps .st > span { flex: 0 0 auto; font: 700 13px var(--mono); color: var(--a1); }
.steps b { display: block; font-size: 14.5px; letter-spacing: -.015em; }
.steps small { font-size: 13.5px; color: var(--ink3); line-height: 1.6; }
.diagcmd { padding: 15px var(--pad); border-bottom: 1px solid var(--line); }
.diagcmd .cap { margin-bottom: 10px; }
#diagIpError { display: none; padding: 8px var(--pad); color: var(--bad); font: 13px 'Archivo', system-ui, sans-serif; border-bottom: 1px solid var(--line); }
.is-invalid ~ #diagIpError, #diagIpError.show { display: block; }

.foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 20px var(--pad); font: 13.5px 'Archivo', system-ui, sans-serif; }
.foot .dim { font: 12.5px var(--mono); }
.foot .end { margin-left: auto; }

/* Map popups (topology-map.js) */
.hop-number-tooltip { background: transparent; border: none; box-shadow: none; color: #fff; font-weight: bold; font-size: 11px; text-shadow: 0 0 4px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.5); }
.hop-number-tooltip::before { display: none; }
.latency-tooltip { background: rgba(0,0,0,.85); border: 1px solid rgba(0,229,255,.3); color: #fff; font-size: 11px; padding: 2px 6px; }
.neon-popup { min-width: 200px; font-family: var(--mono); }
.neon-popup-title { font-size: 13px; font-weight: 700; color: #00e5ff; margin-bottom: 6px; border-bottom: 1px solid rgba(0,229,255,.2); padding-bottom: 4px; }
.neon-popup-row { font-size: 12px; margin: 3px 0; color: #c9d1d9; }
.neon-popup-label { color: #8b949e; font-weight: 600; display: inline-block; min-width: 60px; }
.leaflet-popup-content-wrapper { background: rgba(13,17,23,.95) !important; color: #c9d1d9 !important; border: 1px solid rgba(0,229,255,.25); border-radius: 4px !important; }
.leaflet-popup-tip { background: rgba(13,17,23,.95) !important; }

/* ── narrow screens: stack the panes ── */
@media (max-width: 960px) {
  :root { --pad: 16px; }
  .console, .split, .cmds { grid-template-columns: minmax(0, 1fr); }
  .queue, .split > div:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
  .cmds .cell { border-right: 0; }
  .query input { font-size: 18px; }
  .query .run { padding: 0 22px; }
  .hops .hr { grid-template-columns: 30px minmax(0, 1fr) 76px 84px 60px; }
  .hops .hide-n { display: none; }
  .ep-wrap { overflow-x: auto; }
  .ep { min-width: 820px; }
}
#inlineMap .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.72) contrast(1.08) saturate(.45); }
:root[data-th="light"] #inlineMap .leaflet-tile-pane { filter: saturate(.35) contrast(.95); }
@media (prefers-color-scheme: light) { :root:not([data-th="dark"]) #inlineMap .leaflet-tile-pane { filter: saturate(.35) contrast(.95); } }

/* iPerf3 group: numbered sub-sections separated by a strip of page background */
.subh { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px var(--pad); border-bottom: 1px solid var(--line); background: var(--sur2); }
.subh .no { font: 700 13px var(--mono); color: var(--a1); }
.subh b { font-size: 15px; letter-spacing: -.015em; }
.subh .sub { font: 13.5px 'Archivo', system-ui, sans-serif; color: var(--ink3); }
.subh .end { margin-left: auto; }
.subh.gap { margin-top: 14px; border-top: 1px solid var(--line); }
.ipgroup > .sh + .subh { border-top: 0; }
.ep .cmdl code { flex: 0 1 auto; }

/* hop table, as designed: two-line host cell, NETWORK column, AS path chips in the footer */
.hops .hc { min-width: 0; padding-right: 16px; }
.hops .hc .sub { font: 12px var(--mono); color: var(--ink3); }
.hops .net { font: 13px var(--mono); color: var(--ink2); }
.hops .foot .path { margin-left: auto; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
/* resolve-hostnames toggle (mtr / traceroute only) */
.methods .m.toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; border-left: 1px solid var(--line); }
.methods .m.toggle .sw { width: 22px; height: 12px; background: var(--line2); position: relative; flex: 0 0 auto; }
.methods .m.toggle .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; background: var(--ink3); transition: left .15s; }
.methods .m.toggle[aria-pressed="true"] { color: var(--ink); }
.methods .m.toggle[aria-pressed="true"] .sw { background: var(--a1); }
.methods .m.toggle[aria-pressed="true"] .sw::after { left: 12px; background: var(--bg); }

/* Endpoint rows: easier to tell apart — clearer zebra + accent rail on hover */
.ep tbody tr[data-host] { transition: background .12s; }
.ep tbody tr:nth-child(even) { background: var(--sur); }
.ep tbody tr[data-host]:hover { background: color-mix(in oklab, var(--a1) 8%, transparent); box-shadow: inset 3px 0 0 var(--a1); }
.ep tbody tr[data-host] td { border-bottom-color: var(--line2); }
.ep .grp-row td { position: sticky; top: 38px; z-index: 1; background: var(--sur2); padding: 9px var(--pad); font: 700 13px 'Archivo', system-ui, sans-serif; color: var(--a1); border-bottom: 1px solid var(--line2); }
.ep .grp-row span { color: var(--ink3); font-weight: 400; }

/* The whole iPerf3 area is one framed card */
.ipgroup.panel { margin: 22px var(--pad); border: 1px solid var(--line2); border-left: 3px solid var(--a1); background: var(--sur); padding-bottom: 14px; }
.ipgroup.panel .subh, .ipgroup.panel .subh.gap { margin-top: 0; background: transparent; border-top: 0; border-bottom: 1px dashed var(--line2); }
.ipgroup.panel .ipsub { margin: 14px 14px 0; border: 1px solid var(--line2); border-radius: 6px; background: var(--bg); overflow: hidden; }
.ipgroup.panel .ipsub .subh { background: var(--sur2); border-bottom: 1px solid var(--line2); }
.ipgroup.panel .sh { background: color-mix(in oklab, var(--a1) 7%, var(--sur)); }

/* ── user-friendly layout: Target → Test → From ── */
.query .qlbl { font-weight: 700; font-size: 15px; color: var(--ink2); flex: 0 0 auto; }
.query input { font-size: 22px; }
.methods .lbl, .from .lbl { width: 92px; flex: 0 0 auto; padding: 0 0 0 var(--pad); display: flex; align-items: center; border-right: 0; }
.seg { display: flex; align-items: center; margin: 0 14px; }
.seg button { background: transparent; border: 1px solid var(--line2); padding: 6px 12px; font: 600 13px var(--mono); color: var(--ink3); }
.seg button + button { border-left: 0; }
.seg button.on { background: var(--a1); border-color: var(--a1); color: var(--bg); }
.mdesc { align-self: center; margin-left: auto; padding: 0 var(--pad) 0 14px; font-size: 13.5px; color: var(--ink3); }
.from { display: flex; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--line); background: var(--sur); }
.from .chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px; flex: 1 1 auto; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--line2); padding: 7px 12px; font: 600 13.5px 'Archivo', system-ui, sans-serif; color: var(--ink3); }
.chip:hover { border-color: var(--a1); color: var(--ink); }
.chip.on { border-color: var(--a1); color: var(--ink); background: color-mix(in oklab, var(--a1) 14%, transparent); }
.chip.on::before { content: '\2713'; color: var(--a1); font-weight: 800; }
.chip small { font-weight: 400; color: var(--ink3); }
.chip .flag { width: 18px; height: 12px; }
.from .btn-util { align-self: stretch; }
.cmdline .acts { display: flex; gap: 8px; flex: 0 0 auto; margin-left: 8px; }
.cmdline .acts .btn-ghost { border-color: oklch(0.38 0.02 260); color: oklch(0.80 0.02 260); }
.hops .jump { display: block; font: 600 11px var(--mono); color: var(--a2); }
.hops .legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.hops .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 8px; }
.kv .row a.v, .kv .row button.v { font-weight: 500; font-size: 13.5px; }
@media (max-width: 960px) {
  .mdesc { width: 100%; padding: 0 var(--pad) 12px; margin: 0; }
  .methods .lbl, .from .lbl { width: auto; padding-right: 10px; }
  .cmdline { flex-wrap: wrap; }
}

/* ── framing: each block is a card on the page; the output is a terminal-style screen ── */
.block { margin: 22px var(--pad) 0; border: 1px solid var(--line2); background: var(--bg); }
.block .console { border-bottom: 0; }
.screen {
  /* always dark, like a terminal, in both themes */
  --bg: oklch(0.112 0.010 260); --sur: oklch(0.155 0.010 260); --sur2: oklch(0.195 0.010 260);
  --line: oklch(0.255 0.010 260); --line2: oklch(0.34 0.012 260);
  --ink: oklch(0.95 0.005 260); --ink2: oklch(0.80 0.010 260); --ink3: oklch(0.66 0.010 260);
  --a1: var(--ac-d); --a2: oklch(0.84 0.14 84); --ok: oklch(0.80 0.15 152); --bad: oklch(0.70 0.19 25);
  color-scheme: dark; color: var(--ink); background: var(--bg);
  margin: 14px; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28); transition: border-color .2s, box-shadow .2s;
}
.screen[data-state="running"] { border-color: var(--a1); box-shadow: 0 0 0 3px color-mix(in oklab, var(--a1) 28%, transparent), 0 10px 30px rgba(0, 0, 0, .28); }
.screen[data-state="error"] { border-color: var(--bad); }
.screen .ohead { background: var(--sur2); }
.screen .cmdline { background: var(--sur); }
.screen .hops .hr:nth-child(odd) { background: var(--sur); }
.screen .hops .foot { background: var(--sur); }
.screen .raw { background: var(--bg); }
.screen .state { align-self: center; margin-right: 10px; padding: 3px 10px; border-radius: 999px; font: 600 12px 'Archivo', system-ui, sans-serif; color: var(--ink3); border: 1px solid var(--line2); white-space: nowrap; }
.screen[data-state="running"] .state { color: var(--a1); border-color: var(--a1); animation: liv 1.4s infinite; }
.screen[data-state="done"] .state { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 60%, transparent); }
.screen[data-state="stopped"] .state { color: var(--a2); border-color: color-mix(in oklab, var(--a2) 60%, transparent); }
.screen[data-state="error"] .state { color: var(--bad); border-color: var(--bad); }
.screen .empty { min-height: 220px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); }
.cursor { display: inline-block; width: 9px; height: 1.1em; margin-left: 6px; background: var(--a1); vertical-align: -3px; animation: liv 1s steps(1) infinite; }
/* inputs everywhere get a clear focus ring */
.field:focus-visible, .sel:focus-visible, .query input:focus-visible { outline: 0; border-color: var(--a1); box-shadow: 0 0 0 3px color-mix(in oklab, var(--a1) 25%, transparent); }
.field::placeholder, .query input::placeholder { color: var(--ink3); }
@media (max-width: 960px) {
  .block, .ipgroup.panel { margin-left: 8px; margin-right: 8px; }
  .split.cards { margin: 16px 8px; gap: 16px; }
  .screen { margin: 8px; }
  .query { flex-wrap: wrap; }
  .query .run { padding: 12px 22px; }
}
.chrome h1 { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }