:root { color-scheme: dark; --bg:#0e1116; --card:#161b22; --line:#2a313c; --fg:#e6edf3; --dim:#8b949e;
        --ok:#3fb950; --warn:#d29922; --bad:#f85149; --acc:#58a6ff; }
* { box-sizing: border-box; }
body { margin:0; padding:16px; font:15px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
       background:var(--bg); color:var(--fg); max-width:820px; margin-inline:auto; }
h1 { font-size:20px; margin:0; } h2 { font-size:14px; margin:0 0 8px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; }
.sub { color:var(--dim); font-size:13px; margin:4px 0 16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:12px; }
label { display:block; font-size:12px; color:var(--dim); margin-bottom:6px; }
.check { display:flex; gap:8px; align-items:center; margin-top:10px; font-size:13px; color:var(--fg); }
.check input { width:18px; height:18px; }
.row { display:flex; gap:8px; }
input[type=text], input:not([type]) { flex:1; min-width:0; background:#0d1117; border:1px solid var(--line);
       color:var(--fg); border-radius:8px; padding:11px 12px; font:inherit; }
button { background:var(--acc); color:#06121f; border:0; border-radius:8px; padding:11px 16px; font:inherit; font-weight:700; }
button:disabled { opacity:.4; }
button.ghost { background:transparent; color:var(--acc); border:1px solid var(--line); width:100%; margin-top:10px; font-weight:400; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.stats div { background:#0d1117; border:1px solid var(--line); border-radius:8px; padding:8px; }
.stats span { display:block; font-size:10px; color:var(--dim); text-transform:uppercase; }
.stats b { font-size:13px; font-weight:600; word-break:break-all; }
.pair { margin-top:10px; font-size:12px; color:var(--dim); word-break:break-all; }
table { width:100%; border-collapse:collapse; font-size:12px; }
th { text-align:left; color:var(--dim); font-weight:400; border-bottom:1px solid var(--line); padding:4px; }
td { padding:4px; border-bottom:1px solid #1d232c; word-break:break-all; }
.t-host{color:var(--dim)} .t-srflx{color:var(--ok)} .t-prflx{color:var(--warn)} .t-relay{color:var(--bad)}
.log { height:150px; overflow:auto; background:#0d1117; border:1px solid var(--line); border-radius:8px; padding:8px; margin-bottom:10px; font-size:13px; }
.log div { margin-bottom:3px; } .me { color:var(--acc); } .them { color:var(--ok); }
pre { margin:0; max-height:220px; overflow:auto; font-size:11px; color:var(--dim); white-space:pre-wrap; word-break:break-all; }
.ok{color:var(--ok)} .bad{color:var(--bad)} .warn{color:var(--warn)}

details { margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
summary { cursor:pointer; font-size:13px; color:var(--fg); }
summary::marker { color:var(--dim); }
details input { width:100%; margin-bottom:8px; }
details .row input { margin-bottom:0; }
.hint { font-size:11px; color:var(--dim); margin:8px 0; }
.hint code { color:var(--acc); }
.dim { color:var(--dim); font-size:11px; }