:root{--bg:#0f1720;--card:#fff;--ink:#16324f;--muted:#5b6b7b;--accent:#2d6cdf;--ok:#1f9e5a;--err:#d64545;--line:#e2e8ee}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(160deg,#0f1720,#1b2a3a);min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;color:var(--ink)}
.card{background:var(--card);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.35);padding:28px 30px;width:100%;max-width:520px}
.card.narrow{max-width:380px}.card.wide{max-width:920px}
h1{margin:0 0 4px;font-size:26px}
h2{margin:0 0 8px;font-size:19px}
.sub{color:var(--muted);margin:0 0 18px}
label{display:block;margin:0 0 14px;font-weight:600;font-size:14px}
input{width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--line);border-radius:9px;font-size:15px;font-weight:400}
small{display:block;color:var(--muted);font-weight:400;margin-top:4px}
.req{color:var(--err)}
button{background:var(--accent);color:#fff;border:0;border-radius:9px;padding:11px 18px;font-size:15px;font-weight:600;cursor:pointer}
button.ghost{background:#eef2f7;color:var(--ink)}
button.danger{background:#fbe9e9;color:var(--err)}
button:hover{filter:brightness(.96)}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #f0a500;outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.err{background:#fdecec;color:var(--err);border-radius:9px;padding:10px 12px;margin:0 0 14px;font-size:14px}
.ok{background:#eafaf1;border-radius:9px;padding:16px;color:var(--ink)}
.ok.inline{padding:10px 12px;margin:0 0 12px;font-size:14px}
.hint{margin:14px 0 4px;color:var(--muted);font-size:13px}
pre,code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
pre{background:#0f1720;color:#dbe7ff;padding:14px;border-radius:9px;overflow:auto;font-size:13px}
code{background:#eef2f7;padding:2px 6px;border-radius:5px;font-size:13px}
.ok pre code, pre code{background:none;padding:0;color:inherit}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.muted{color:var(--muted)}
.row.spread{display:flex;justify-content:space-between;align-items:center}
.count{background:#eef2f7;color:var(--muted);border-radius:20px;padding:2px 10px;font-size:14px;font-weight:600;margin-left:6px}
.inlineform{display:flex;gap:6px}.inlineform input{margin-top:0}.inlineform button{padding:8px 12px}

/* connection card + test console */
.sectionhead{font-size:14px;margin:18px 0 6px;display:flex;align-items:center;gap:8px}
.copybtn{background:#eef2f7;color:var(--ink);padding:3px 10px;font-size:12px;font-weight:600;border-radius:6px}
.kv{width:100%;border-collapse:collapse;font-size:14px}
.kv th{text-align:left;color:var(--muted);font-weight:600;padding:6px 12px 6px 0;white-space:nowrap;width:1%}
.kv td{padding:6px 0}
.cta{margin-top:18px}
.btnlink{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;padding:9px 16px;border-radius:9px;font-weight:600}
.conn{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:8px 0 18px}
.conn label{margin:0;flex:1 1 160px}
.conn button{padding:11px 18px}
.badge{padding:4px 10px;border-radius:20px;font-size:12px;font-weight:700;align-self:center}
.badge.off{background:#eef2f7;color:var(--muted)}
.badge.on{background:#eafaf1;color:var(--ok)}
.badge.warn{background:#fff6e5;color:#a86b00}
.badge.err{background:#fdecec;color:var(--err)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:700px){.grid2{grid-template-columns:1fr}}
.pubform{display:flex;flex-direction:column;gap:6px}.pubform input{margin-top:0}
.messages{margin-top:10px;height:220px;overflow:auto;background:#0f1720;border-radius:9px;padding:10px;font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#dbe7ff}
.messages .msg{padding:2px 0;border-bottom:1px solid #1e2a38;word-break:break-all}
.messages .mt{color:#7c8ba1}.messages .mtopic{color:#67d3a0}.messages .mpay{color:#dbe7ff}
.panel{background:#f6f8fb;border:1px solid var(--line);border-radius:10px;padding:14px;margin:12px 0 22px}
.panel b{display:block;margin-bottom:8px;font-size:14px}
.addrow{display:flex;flex-wrap:wrap;gap:8px}
.addrow input{margin-top:0;flex:1 1 150px;min-width:120px}
.addrow button{white-space:nowrap}
.devrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#f6f8fb;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0 0 18px;font-size:14px}
.devrow .muted{font-size:12px}
.settingscard{margin-top:26px;padding-top:22px;border-top:2px solid var(--line)}
.settingscard h2{margin:0}
.subsectionhead{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.panel.compact{margin:14px 0;padding:12px}.panel.compact p{margin:0}
.checklabel{display:flex;gap:10px;align-items:flex-start;font-weight:400}.checklabel input{width:auto;margin:3px 0 0}.checklabel span{flex:1}
footer{border-top:1px solid var(--line);margin-top:22px;padding-top:14px;font-size:13px;color:var(--muted)}
.policy h2{font-size:17px;margin:22px 0 6px}.policy p,.policy li{line-height:1.55}.policy ul{padding-left:22px}