:root {
  color-scheme: dark;
  --bg:#101713; --panel:#1a241e; --raised:#253229; --line:#35443a;
  --text:#f0f5ec; --muted:#9eb2a3; --mint:#b9f28b; --danger:#ff9f95;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; min-height:100vh; color:var(--text);
  background:radial-gradient(circle at 82% -6%,#2b4d35 0,transparent 32%),var(--bg);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
}
.topbar, main, footer { width:min(1200px,calc(100% - 40px)); margin:auto; }
/* Wraps as whole items rather than splitting one: a single non-wrapping row had
   nowhere to give, so the badge broke "Helper needed" across two lines instead. */
.topbar { min-height:72px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 20px; padding:8px 0; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:8px; color:var(--text); text-decoration:none; font-size:1.2rem; font-weight:800; letter-spacing:-.04em; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--mint); color:#15231a; }
.brand-light { color:var(--muted); font-weight:400; }
.local-badge { display:flex; align-items:center; gap:9px; color:var(--mint); font-size:.84rem; white-space:nowrap; }
.topbar-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px 16px; }
/* Same control as the landing page: one button, labelled with the language it switches to. */
/* On the landing this control is an <a>; here it is a <button>, so it starts out
   wearing the page's primary button — 44px tall, solid mint, and a hover that
   floods to #d4ffae. Both have to be undone by name, the height and the hover
   background included, or the border and colour below never show at all. */
.lang { height:auto; border:1px solid var(--line); border-radius:8px; padding:4px 9px; color:var(--muted); background:transparent; font:inherit; font-size:.8rem; font-weight:400; cursor:pointer; transition:border-color .15s ease,color .15s ease; }
/* The border jumps roughly two steps of lightness, which is what makes the
   landing's hover read; --line is lighter here, so the target is lighter too. */
.lang:hover, .lang:focus-visible { color:var(--text); border-color:#5f8168; background:transparent; }
.lang:focus-visible { outline:2px solid var(--mint); outline-offset:2px; }
@media (max-width:560px) { .topbar-actions { gap:9px; } .lang { font-size:.72rem; } .local-badge { font-size:.72rem; } }
.live-dot { width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 14px currentColor; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) 300px; align-items:center; gap:55px; padding:68px 0 48px; }
.eyebrow, .result-eyebrow, .environment-label { color:var(--mint); text-transform:uppercase; letter-spacing:.16em; font-size:.71rem; font-weight:750; }
.eyebrow { margin:0 0 15px; }
h1 { max-width:730px; margin:0; font-size:clamp(2.75rem,5.3vw,5.3rem); line-height:1.03; letter-spacing:-.065em; }
h1 em { color:var(--mint); font-style:normal; }
.intro { max-width:610px; margin:22px 0 0; color:var(--muted); font-size:1.06rem; }
.environment { display:flex; flex-direction:column; align-items:start; min-height:178px; padding:24px; border:1px solid #46604b; border-radius:18px; background:linear-gradient(140deg,#273d2b,#1b2a20); }
.environment strong { font-size:1.55rem; letter-spacing:-.04em; margin:12px 0 2px; }
.environment > span:nth-of-type(2) { color:#c3d3c5; font-size:.83rem; overflow-wrap:anywhere; }
#helper-version { margin-top:6px; color:#9db09f; font-size:.74rem; letter-spacing:.02em; }
#helper-version.update-available { color:var(--mint); font-weight:650; }
.environment-mark { margin-top:auto; padding-top:14px; color:var(--mint); font-size:.65rem; letter-spacing:.17em; font-weight:800; }
.quick-nav { display:flex; gap:7px; overflow:auto; padding:0 0 24px; margin-bottom:23px; border-bottom:1px solid var(--line); scrollbar-width:thin; }
.quick-nav a { flex:none; padding:8px 13px; border:1px solid #3c4e40; border-radius:999px; color:#bed0c0; text-decoration:none; font-size:.8rem; font-weight:650; }
.quick-nav a:hover { color:var(--mint); border-color:var(--mint); }
.tools { display:grid; gap:16px; padding-bottom:34px; }
.tool-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:16px; }
.tool-stack { display:grid; align-content:start; gap:16px; min-width:0; }
.tool-card { min-width:0; padding:27px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,#202c24,var(--panel)); scroll-margin-top:20px; }
.tool-card.busy { border-color:#658663; }
.card-top { display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.11em; }
.icon { display:grid; place-items:center; width:34px; height:34px; flex:none; border:1px solid #4b6651; border-radius:9px; color:var(--mint); font-size:.72rem; font-weight:800; }
.scope { color:#a9c7ad; text-align:right; }
h2 { margin:19px 0 4px; font-size:1.35rem; letter-spacing:-.035em; }
.tool-card > p { color:var(--muted); margin:0 0 23px; }
form { display:flex; align-items:end; gap:9px; flex-wrap:wrap; }
label { flex:1 1 190px; display:grid; gap:7px; color:var(--muted); font-size:.8rem; font-weight:650; }
label.small-field { flex:0 1 132px; }
input, select { width:100%; min-width:0; height:44px; border:1px solid #455648; border-radius:9px; background:#121a15; color:var(--text); padding:0 12px; font:inherit; font-size:.9rem; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline:2px solid var(--mint); outline-offset:2px; }
button { height:44px; padding:0 16px; border:0; border-radius:9px; background:var(--mint); color:#142119; font:inherit; font-size:.87rem; font-weight:780; cursor:pointer; white-space:nowrap; }
button span { margin-left:7px; }
button:hover { background:#d4ffae; }
button:disabled { opacity:.6; cursor:wait; }
.result { margin-top:23px; border-top:1px solid #3e5142; padding-top:22px; }
.report { display:grid; gap:16px; }
.result-heading { display:grid; gap:3px; min-width:0; }
.result-title { font-size:1.23rem; letter-spacing:-.035em; overflow-wrap:anywhere; }
.source-line { color:#8fa995; font-size:.74rem; padding-top:3px; }
.metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.metric { min-width:0; min-height:85px; display:flex; flex-direction:column; justify-content:space-between; gap:8px; padding:12px; border:1px solid #425748; border-radius:12px; background:#253129; }
.metric.good { border-color:#5d8b59; }
.metric.danger { border-color:#96534a; }
.metric-label { color:#b7c8b9; font-size:.7rem; line-height:1.2; text-transform:uppercase; letter-spacing:.075em; }
.metric-value { display:flex; align-items:baseline; gap:4px; min-width:0; }
.metric-value strong { font-size:1.35rem; line-height:1; letter-spacing:-.045em; overflow-wrap:anywhere; }
.metric.good .metric-value strong { color:var(--mint); }
.metric.danger .metric-value strong { color:var(--danger); }
.metric-value span { color:var(--muted); font-size:.75rem; }
.subheading { margin:4px 0 -6px; color:#d4e2d2; font-size:.85rem; font-weight:700; }
.result-note { padding:12px 14px; border-left:2px solid #668e67; border-radius:0 8px 8px 0; background:#223027; color:#c2d2c3; font-size:.8rem; }
.result-note.warn { border-color:#bd9465; color:#f5dcbf; }
.address-hero { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:20px; border:1px solid #618568; border-radius:14px; background:radial-gradient(circle at 80% 0,#37593b,#243428 65%); }
.address-hero .result-eyebrow { flex-basis:100%; }
.address-value { flex:1 1 280px; color:var(--mint); font:700 clamp(1.9rem,4vw,3.4rem)/1.1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:-.06em; overflow-wrap:anywhere; }
.copy-button { height:29px; padding:0 9px; border:1px solid #60845c; background:#2d442e; color:#d9f7cc; font-size:.72rem; }
.copy-button:hover { background:#3a5b3b; }
.clipboard-buffer { position:fixed; top:0; left:0; opacity:0; pointer-events:none; }
.copy-manual { flex:1 1 100%; min-width:160px; padding:8px; border:1px solid var(--mint); border-radius:7px; background:#17231b; color:var(--text); font:inherit; }
.interface-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px; }
.interface-item { display:flex; flex-direction:column; gap:2px; min-width:0; padding:11px 13px; border:1px solid #415146; border-radius:10px; background:#202b23; }
.interface-item span { color:var(--muted); font-size:.7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.interface-item strong { font:650 .9rem ui-monospace,SFMono-Regular,Consolas,monospace; }
.interface-item small { color:#a8c8a6; font-size:.67rem; }
.record-list, .device-list, .detail-list { display:grid; gap:6px; }
.record-item, .detail-row, .hop-row, .device-row { min-width:0; padding:10px 12px; border:1px solid #3b4d40; border-radius:9px; background:#202b23; }
.record-item { display:flex; align-items:center; gap:10px; }
.record-item strong { flex:1; min-width:0; overflow-wrap:anywhere; }
.record-item small { color:#9fb4a1; font-size:.68rem; text-align:right; }
.nat-mapping-list .record-item { flex-wrap:wrap; }
.nat-mapping-list .record-item small { flex-basis:100%; text-align:left; }
.dns-environment { display:flex; justify-content:space-between; gap:12px; padding:12px; border:1px solid #3b4d40; border-radius:9px; color:#d9e9da; font-size:.78rem; }
.dns-environment span { overflow-wrap:anywhere; text-align:right; color:#a8c7ad; }
.secondary-action { align-self:flex-start; padding:9px 13px; border:1px solid #5c8264; border-radius:8px; background:#253b2b; color:#c6efcf; font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; }
.secondary-action:hover { background:#305438; }
.nat-hero { display:grid; gap:7px; padding:20px; border:1px solid #5b9467; border-radius:14px; background:linear-gradient(135deg,#274631,#1c3023); }
.nat-hero.cgnat,.nat-hero.double,.nat-hero.multi_egress { border-color:#bb9261; background:linear-gradient(135deg,#463827,#2e291f); }
.nat-name { color:#edfff0; font-size:clamp(1.3rem,3vw,2rem); line-height:1.1; }
.nat-confidence { width:max-content; padding:4px 9px; border-radius:99px; background:#47684c; color:#e0f3e1; font-size:.7rem; text-transform:capitalize; }
.nat-hero p { margin:0; color:#c6d8c6; font-size:.82rem; }
.nat-path { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.nat-path-node { min-width:0; padding:11px; border:1px solid #405844; border-radius:9px; background:#202d24; }
.nat-path-node span { display:block; margin-bottom:7px; color:#9db39f; font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; }
.nat-path-node strong { font-size:.76rem; overflow-wrap:anywhere; }
.dns-resolver-list { display:grid; gap:9px; }
.dns-resolver { display:grid; gap:9px; padding:14px; border:1px solid #405544; border-radius:11px; background:#202c24; }
.dns-resolver.winner { border-color:#72ae7c; background:#26392b; }
.dns-resolver-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dns-resolver-head > div { display:grid; gap:3px; }
.dns-resolver-head strong { color:#e7f6e8; }
.dns-resolver-head small,.dns-resolver-facts { color:#aec1ae; font-size:.72rem; }
.dns-resolver-track { height:7px; overflow:hidden; border-radius:99px; background:#354639; }
.dns-resolver-fill { display:block; height:100%; border-radius:99px; background:#be995d; }
.dns-resolver.winner .dns-resolver-fill { background:#88c98e; }
.dns-answer-list { display:flex; flex-wrap:wrap; gap:6px; }
.dns-answer-list span { padding:5px 8px; border-radius:6px; background:#314438; color:#d5ecda; font-size:.7rem; overflow-wrap:anywhere; }
@media(max-width:600px) { .nat-path { grid-template-columns:1fr; } .dns-environment { flex-direction:column; } .dns-environment span { text-align:left; } }
.type-chip, .service-chip, .signal { display:inline-block; width:max-content; max-width:100%; padding:3px 7px; border-radius:6px; background:#344b39; color:#ceebc6; font-size:.67rem; font-weight:700; }
.signal.absent { background:#514b39; color:#f2d7aa; }
.mono { font:650 .88rem ui-monospace,SFMono-Regular,Consolas,monospace; }
.probe-chart { display:flex; align-items:end; gap:7px; min-height:145px; padding:12px 10px 7px; overflow:auto; border:1px solid #3d5442; border-radius:12px; background:#17231b; }
.probe-column { flex:1 0 29px; max-width:72px; display:flex; align-items:center; flex-direction:column; gap:4px; height:125px; }
.probe-time, .probe-seq { color:#bad6b6; font-size:.68rem; }
.probe-track { flex:1; width:100%; display:flex; align-items:end; border-radius:4px; background:#29402e; overflow:hidden; }
.probe-fill { width:100%; border-radius:4px 4px 0 0; background:linear-gradient(#c7f79b,#73a66a); }
/* A probe that never connected: full height so the gap is visible, in the danger
   colour so it does not read as the slowest reply. */
.probe-fill.missed { background:linear-gradient(#ff9f95,#a3524b); opacity:.55; }
.map-link { align-self:flex-start; color:var(--mint); font-size:.78rem; font-weight:700; }
.hop-list { display:grid; gap:6px; }
.hop-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hop-row.muted { opacity:.6; }
.hop-route { display:flex; align-items:center; gap:12px; min-width:0; }
.hop-route strong { overflow-wrap:anywhere; }
.hop-number { display:grid; place-items:center; width:29px; height:29px; flex:none; border-radius:7px; background:#385340; color:var(--mint); font-size:.8rem; font-weight:750; }
.hop-latency { flex:none; color:#c9e5c1; font:.8rem ui-monospace,SFMono-Regular,Consolas,monospace; }
.detail-row { display:flex; justify-content:space-between; gap:16px; font-size:.8rem; }
.detail-row span { color:var(--muted); }
.detail-row strong { text-align:right; overflow-wrap:anywhere; }
.detail-row.warn strong { color:#f3d6a9; }
.signal-list, .service-list { display:flex; gap:5px; flex-wrap:wrap; }
.speed-meter { position:relative; display:grid; place-items:center; width:min(100%,290px); aspect-ratio:1; margin:auto; color:#8fb8ca; }
.speed-meter[data-phase="upload"] { color:#8fb8a3; }
.speed-meter[data-phase="latency"] { color:#c2ac87; }
.speed-meter svg { width:100%; height:100%; overflow:visible; }
.speed-meter-track, .speed-meter-fill { fill:none; stroke-width:14; stroke-linecap:round; transform:rotate(115deg); transform-origin:120px 120px; }
.speed-meter-track { stroke:currentColor; opacity:.18; }
.speed-meter-fill { stroke:currentColor; transition:stroke-dasharray .3s ease; }
.speed-meter-readout { position:absolute; display:grid; justify-items:center; gap:2px; text-align:center; }
.speed-meter-value { color:var(--text); font-size:clamp(2.5rem,5vw,3.5rem); font-weight:750; line-height:1; letter-spacing:-.06em; }
.speed-meter-unit { color:var(--muted); font-size:.85rem; }
.speed-meter-phase { color:currentColor; font-size:.82rem; font-weight:700; text-transform:capitalize; }
.speed-history { display:grid; gap:10px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.speed-history-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.speed-history-heading h3 { margin:0; font-size:1rem; }
.speed-history-heading button, .speed-history-more { height:36px; padding:0 10px; border:1px solid var(--line); background:transparent; color:var(--mint); font-size:.75rem; }
.speed-trend { margin:0; color:var(--muted); font-size:.82rem; }
.speed-trend.better { color:var(--mint); }
.speed-trend.worse { color:var(--danger); }
.speed-history-list { display:grid; gap:8px; }
.speed-history-item { padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--raised); }
.speed-history-item time { display:block; margin-bottom:7px; color:var(--muted); font-size:.75rem; }
.speed-history-values { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.speed-history-values span { min-width:0; overflow-wrap:anywhere; font-size:.78rem; }
.speed-history-values strong { display:block; color:var(--text); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.device-row { display:grid; gap:7px; }
.port-list { display:grid; gap:6px; }
.port-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; border:1px solid #3e5042; border-radius:9px; background:#202b23; }
.port-row.open { border-color:#648466; }
.port-label { display:flex; align-items:baseline; gap:10px; min-width:0; }
.port-label span { color:var(--muted); font-size:.75rem; }
.port-state { flex:none; color:#bbcabd; font-size:.73rem; }
.port-state.open { color:var(--mint); font-weight:750; }
.device-name { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.device-dot { width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 9px var(--mint); }
.more-details { border:1px solid #3e5043; border-radius:9px; background:#1b271e; }
.more-details summary { padding:10px 12px; color:#c6ddc4; cursor:pointer; font-size:.79rem; font-weight:650; }
.more-details > .detail-list, .more-details > pre { margin:0 10px 10px; }
.raw-output { max-height:240px; overflow:auto; padding:12px; border-radius:6px; background:#111912; color:#bcd2bd; white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; }
.loading { display:flex; align-items:center; gap:10px; color:#c9eac1; font-size:.84rem; }
.spinner { width:15px; height:15px; border:2px solid #5b8060; border-top-color:var(--mint); border-radius:50%; animation:spin .7s linear infinite; }
.failure { padding:14px; border:1px solid #925b54; border-radius:10px; background:#382522; }
.failure strong { color:var(--danger); }
.failure p { margin:3px 0 0; color:#f5c3bd; font-size:.83rem; }
.footnote { max-width:840px; margin:13px 0 48px; color:var(--muted); font-size:.83rem; }
code { color:#cfedbb; }
footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; padding:24px 0 32px; border-top:1px solid var(--line); color:#879c8b; font-size:.8rem; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:900px) { .hero { grid-template-columns:1fr; gap:22px; padding:50px 0 36px; } .environment { min-height:130px; } }
@media (max-width:700px) {
  .topbar { min-height:64px; } .local-badge { font-size:0; } .live-dot { width:10px; height:10px; }
  .tool-columns { grid-template-columns:1fr; } .tool-card { padding:20px; }
  label.small-field { flex:1 1 120px; } form button { flex:1 1 auto; }
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .address-hero { padding:16px; }
  footer { flex-direction:column; gap:4px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .spinner { animation:none; } }

.helper-setup { display:flex; justify-content:space-between; gap:24px; margin:0 0 28px; padding:24px; border:1px solid #698b62; border-radius:18px; background:linear-gradient(135deg,#293b2b,#1b2920); }
.helper-setup[hidden] { display:none; }
.helper-setup h2 { margin:5px 0 6px; font-size:1.45rem; }
.helper-setup p { max-width:670px; margin:0 0 12px; color:#d5e5d3; }
.helper-setup ol { margin:0; padding-left:21px; color:#c5d7c3; font-size:.88rem; }
.helper-setup li + li { margin-top:4px; }
.helper-actions { display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:10px; min-width:220px; }
.helper-download, .helper-actions button { display:block; padding:11px 14px; border:1px solid #9dd67d; border-radius:9px; background:var(--mint); color:#142119; font-size:.88rem; font-weight:750; text-align:center; text-decoration:none; cursor:pointer; }
.helper-download-secondary { background:transparent; color:var(--mint); }
.helper-actions button { background:transparent; color:var(--mint); }
.helper-actions span { color:var(--muted); font-size:.77rem; text-align:center; }
.helper-setup ul { margin:0 0 12px; padding-left:21px; color:#c5d7c3; font-size:.88rem; }
.helper-setup ul a { color:var(--mint); text-decoration:none; }
#network-access-code { color:var(--mint); font-size:1.05rem; letter-spacing:.24em; text-align:center; }
#pairing-form { display:flex; flex-direction:column; gap:10px; margin:0; }
#pairing-code { text-align:center; letter-spacing:.34em; font-size:1.15rem; }
.helper-link { color:var(--mint); font-weight:650; text-decoration:none; }
.helper-link:hover { text-decoration:underline; }
/* An explicit display above beats the browser rule for [hidden]. */
[hidden] { display:none !important; }
@media (max-width:700px) { .helper-setup { flex-direction:column; } .helper-actions { min-width:0; } }

.result-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; padding-top:13px; border-top:1px solid var(--line); }
.result-actions .copy-button { height:auto; min-height:36px; padding:6px 12px; }
textarea.copy-manual { min-height:130px; white-space:pre-wrap; resize:vertical; }
.form-hint { margin:10px 0 0 !important; color:var(--muted); font-size:.77rem; }
.subnet-hero { display:grid; gap:10px; padding:16px; border:1px solid #608767; border-radius:16px; background:#26382b; }
.subnet-hero-top { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); font-size:.78rem; }
.subnet-cidr { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.subnet-cidr strong { flex:1; color:var(--text); font-size:clamp(1rem,2vw,1.4rem); overflow-wrap:anywhere; }
.subnet-prefix-track { height:10px; border-radius:99px; background:#17231b; overflow:hidden; }
.subnet-prefix-fill { height:100%; border-radius:99px; background:var(--mint); }
.subnet-binary { padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--raised); color:var(--text); overflow-wrap:anywhere; font-size:.8rem; }
.allocation-list { display:grid; gap:8px; }
.allocation-card { display:grid; gap:4px; min-width:0; padding:12px 14px; border-left:3px solid var(--mint); border-radius:10px; background:var(--raised); }
.allocation-card > span { overflow-wrap:anywhere; font-size:.79rem; }
.allocation-card small { color:var(--muted); }
.allocation-card.does-not-fit { border-color:var(--danger); }
.allocation-card.does-not-fit .result-note { margin:0; }
.allocation-cidr { color:var(--mint); }
.subnet-filter { width:100%; }
.subnet-more { justify-self:start; border:1px solid #658663; background:var(--raised); color:var(--mint); }