:root{color-scheme:dark light;--bg:#0b1020;--card:#151b2e;--line:#2a3350;--fg:#e8ecf7;--dim:#94a3b8;--accent:#38bdf8;--ok:#4ade80;--warn:#fbbf24;--err:#f87171}
*{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;overflow-x:hidden}
main{max-width:760px;margin:0 auto;padding:18px 14px 40px}
header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
h1{font-size:22px;margin:0;letter-spacing:.5px}
h1 span{color:var(--accent)}
h2{display:flex;align-items:center;gap:8px;font-size:14px;text-transform:uppercase;letter-spacing:.8px;color:var(--dim);margin:0 0 8px}
h3{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);margin:14px 0 4px}
a{color:var(--accent);text-decoration:none}
code{color:var(--fg)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:18px;max-width:100%}
.dim{color:var(--dim)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ip{font:600 30px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
.match{margin-top:8px;color:var(--dim);overflow-wrap:anywhere}
.caption{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.6px;margin:0 0 4px}
.badge{display:inline-block;padding:2px 9px;border:1px solid var(--line);border-radius:999px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px}
.badge-public{color:var(--accent);border-color:var(--accent)}
.badge-mesh{color:var(--ok);border-color:var(--ok)}
.badge-loopback{color:var(--warn);border-color:var(--warn)}

/* On-VPN resolver pair: the single most important expectation on the page, so
   it reads as a highlighted line rather than another dim chip. */
.onvpn{display:inline-block;max-width:100%;margin-top:10px;padding:8px 12px;border:1px solid var(--ok);border-radius:9px;background:rgba(74,222,128,.10);color:var(--ok);font-weight:700;font-size:14px;letter-spacing:.2px;overflow-wrap:anywhere}

/* Verdicts: one color-coded answer per card. */
.verdict{display:inline-block;max-width:100%;padding:7px 12px;border:1px solid var(--line);border-radius:9px;font-size:13px;font-weight:700;letter-spacing:.4px;margin-bottom:10px;overflow-wrap:anywhere}
.verdict.green{color:var(--ok);border-color:var(--ok);background:rgba(74,222,128,.10)}
.verdict.yellow{color:var(--warn);border-color:var(--warn);background:rgba(251,191,36,.10)}
.verdict.orange{color:#fb923c;border-color:#fb923c;background:rgba(251,146,60,.10)}
.verdict.red{color:var(--err);border-color:var(--err);background:rgba(248,113,113,.10)}
.verdict.neutral{color:var(--dim)}

/* Short visible labels; verbose explanations live in CSS tooltips. */
.tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;flex:0 0 auto;border:1px solid var(--line);border-radius:50%;color:var(--dim);font-size:11px;font-weight:700;cursor:help;text-transform:none;letter-spacing:0}
.tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:150%;transform:translateX(-50%);width:min(280px,78vw);background:#0f172a;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12px;line-height:1.45;font-weight:400;text-transform:none;letter-spacing:normal;white-space:normal;opacity:0;pointer-events:none;transition:opacity .12s ease;z-index:20;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.tip:hover::after,.tip:focus-visible::after{opacity:1}
.chip,.standout li[data-tip]{position:relative}
.chip[data-tip]::after,.standout li[data-tip]::after{content:attr(data-tip);position:absolute;left:0;bottom:150%;width:min(280px,78vw);background:#0f172a;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12px;line-height:1.45;white-space:normal;opacity:0;pointer-events:none;transition:opacity .12s ease;z-index:20}
.chip[data-tip]:hover::after,.chip[data-tip]:focus-visible::after,.standout li[data-tip]:hover::after,.standout li[data-tip]:focus-visible::after{opacity:1}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.chip{display:inline-block;padding:6px 10px;border:1px dashed var(--line);border-radius:8px;font-size:12px;color:var(--dim);cursor:help}
.standout{margin:8px 0 12px;padding-left:20px}
.standout li{margin:5px 0;cursor:help;overflow-wrap:anywhere}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:12px;font-size:13px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere;word-break:break-word}
tr:last-child td{border-bottom:none}
th{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.6px;white-space:nowrap}
td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
button{font:inherit;color:var(--fg);background:#1e2740;border:1px solid var(--line);border-radius:8px;padding:10px 15px;min-height:44px;cursor:pointer;touch-action:manipulation}
button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:disabled{opacity:.55;cursor:not-allowed}
#dns-echo-out{margin:4px 0 0;white-space:pre-wrap;word-break:break-word}
#location-value{margin-bottom:2px;overflow-wrap:anywhere}
#latency{margin:10px 0 4px;cursor:help;overflow-wrap:anywhere}
#fp-summary{margin:0 0 4px;overflow-wrap:anywhere}
#fp-details{margin-top:12px}

/* Speed test: button and result on one wrapping row. */
.speedtest-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.speedtest-row button{flex:0 0 auto}
#speedtest-out{overflow-wrap:anywhere}

/* Speed test progress: a thin bar that fills as bytes move and pulses while
   measuring, so the test visibly "does something" even on a slow link. */
.speedtest-bar{flex:1 1 100%;height:8px;border-radius:999px;background:var(--line);overflow:hidden}
#speedtest-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--ok));transition:width .18s ease-out}
.speedtest-bar.running #speedtest-fill{animation:speedtest-pulse 1.2s ease-in-out infinite}
.speedtest-bar.done #speedtest-fill{background:var(--ok)}
@keyframes speedtest-pulse{0%,100%{opacity:1}50%{opacity:.55}}
#copy-status{margin-left:8px}
footer{margin-top:18px;color:var(--dim);font-size:12px}

@media (max-width:520px){
  main{padding:12px 10px 32px}
  .card{padding:13px;margin-bottom:14px}
  .ip{font-size:22px}
  h1{font-size:20px}
  h2{font-size:13px}
  th,td{padding:7px 8px;font-size:12px}
  .verdict{font-size:12px}
  .onvpn{font-size:13px}
  .speedtest-row{flex-direction:column;align-items:stretch}
  .speedtest-row button{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .tip::after,.chip[data-tip]::after,.standout li[data-tip]::after{transition:none}
  .speedtest-bar.running #speedtest-fill{animation:none}
}