:root {color-scheme:light} body {font-size:16px; line-height:1.55} main {max-width:1120px; margin:auto; padding:28px 22px}
header {margin-bottom:24px} h1 {margin:0; font-size:2rem} h2 {margin:0 0 12px; font-size:1.2rem}
.eyebrow {color:var(--muted); font-size:.8rem; letter-spacing:.12em; margin:0}
form {display:flex; flex-wrap:wrap; gap:12px; align-items:center}
input {font:inherit; padding:9px 12px; border:1px solid var(--line); border-radius:9px; min-width:160px; flex:1; max-width:400px}
button[type=submit] {background:var(--brand); color:var(--surface); border-color:var(--brand)}
.hint {color:var(--muted); font-size:.9rem} #ops-status {font-weight:600; overflow-wrap:anywhere}
.ops-card,details,.connection {background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin:16px 0}
dl {display:grid; grid-template-columns:minmax(150px,1fr) 3fr; margin:0; gap:10px 20px}
dt {color:var(--muted)} dd {margin:0; overflow-wrap:anywhere; white-space:pre-wrap}
summary {cursor:pointer; font-weight:600} details p {max-width:85ch}
@media(max-width:600px) {main{padding:20px 14px} form{align-items:stretch} form label{width:100%}
input{max-width:none; width:100%} dl{grid-template-columns:1fr; gap:3px} dd{margin-bottom:10px}}