:root{--bg:#0f1115;--fg:#e8eaf0;--mut:#8b93a7;--card:#181b22;--line:#2a2f3a;--acc:#3b82f6;--bad:#ef4444;--ok:#22c55e}
@media (prefers-color-scheme:light){:root{--bg:#f6f7f9;--fg:#14171f;--mut:#5b6472;--card:#fff;--line:#dfe3ea}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
header{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.logo{font-weight:800;letter-spacing:.12em}
#who{margin-left:auto;color:var(--mut);font-size:14px;overflow:hidden;text-overflow:ellipsis}
main{max-width:760px;margin:0 auto;padding:16px}
h1{font-size:22px}h2{font-size:18px;margin-top:32px}h3{font-size:15px;margin:0 0 8px}
label{display:block;margin:12px 0;color:var(--mut);font-size:14px}
input{display:block;width:100%;margin-top:4px;padding:10px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--fg);font-size:16px}
button{padding:10px 16px;border:0;border-radius:8px;background:var(--acc);color:#fff;font-size:15px;cursor:pointer}
button.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
button.danger{background:var(--bad)}
button:disabled{opacity:.5}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.inline{display:flex;gap:8px;flex-wrap:wrap}.inline input{flex:1 1 180px;margin:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin:12px 0}
.srv{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.srv .name{font-weight:600;flex:1 1 200px}.srv .meta{color:var(--mut);font-size:13px;flex:1 1 100%}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--mut);margin-right:6px}
.dot.on{background:var(--ok)}.dot.rev{background:var(--bad)}
.code{font:700 32px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.2em;padding:8px 0}
.muted{color:var(--mut);font-size:14px}
#msg{padding:10px 12px;border-radius:8px;margin-bottom:12px;background:var(--card);border:1px solid var(--line)}
#msg.err{border-color:var(--bad)}#msg.ok{border-color:var(--ok)}
pre{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px;overflow:auto;font-size:12px;max-height:340px}

video{width:100%;max-height:70vh;background:#000;border-radius:8px}
.item{display:flex;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.item .t{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .s{color:var(--mut);font-size:13px}

.path{display:inline-block;margin:8px 0;padding:6px 12px;border-radius:999px;font-size:14px;font-weight:600;border:1px solid var(--line,#ccd)}
.path small{display:block;font-weight:400;opacity:.8;font-size:12px}
.path.lan,.path.local{background:rgba(30,140,70,.14);color:#1c7a44}
.path.direct{background:rgba(30,110,220,.14);color:#1f5fc4}
.path.relay{background:rgba(220,140,20,.16);color:#a5620b}
@media (prefers-color-scheme: dark){.path.lan,.path.local{color:#6fd39a}.path.direct{color:#8ab8ff}.path.relay{color:#f0b25a}}