:root { --pico-font-size: 95%; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.topnav { display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--pico-muted-border-color); margin-bottom:1.2rem; }
.topnav ul { display:flex; align-items:center; gap:.4rem; margin:0; padding:.4rem 0; list-style:none; }
.topnav a { text-decoration:none; }
.inline { display:inline; margin:0; }
.small { padding:.25rem .6rem; font-size:.8rem; margin:0; }

.narrow { max-width:26rem; margin-top:4rem; }
.row { display:flex; gap:.6rem; align-items:center; }
.row.between { justify-content:space-between; }

.grid-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.card { margin:0; }
.card .hostline { margin:.2rem 0; }
.stats { list-style:none; padding:0; margin:.6rem 0 0; font-size:.9rem; }

.dot { display:inline-block; width:.7rem; height:.7rem; border-radius:50%;
  background:#bbb; margin-right:.35rem; vertical-align:middle; }
.dot.up { background:#2ecc71; box-shadow:0 0 0 3px rgba(46,204,113,.2); }
.dot.down { background:#e74c3c; box-shadow:0 0 0 3px rgba(231,76,60,.2); }
.dot.unknown { background:#bbb; }

.hostbox { padding:.5rem 0; border-bottom:1px dashed var(--pico-muted-border-color); }
.hostbox:last-of-type { border-bottom:none; }

.err { color:#c0392b; }
.okmsg { color:#1e8e4e; }
.deploylog { background:#0d1117; color:#c9d1d9; font-size:.78rem; padding:.6rem .8rem;
  border-radius:6px; max-height:260px; overflow:auto; white-space:pre-wrap; margin-top:.6rem; }

.qr svg { width:200px; height:200px; display:block; margin:.5rem auto; }

.domaincheck { border:1px solid var(--pico-muted-border-color); border-radius:6px;
  padding:.6rem .8rem; margin-top:.6rem; }
.domaincheck.ok { border-color:#2ecc71; }
.domaincheck.bad { border-color:#e74c3c; }
.checks { list-style:none; display:flex; flex-wrap:wrap; gap:.8rem; padding:0; margin:0 0 .4rem; font-size:.85rem; }
textarea[readonly] { font-family:ui-monospace,monospace; font-size:.78rem; }
.badge { display:inline-block; padding:.1rem .5rem; border-radius:10px; font-size:.78rem;
  font-weight:600; color:#fff; }
.badge.reality { background:#2d7a4e; }
.badge.shadowtls { background:#7a5cd0; }

.htmx-indicator { opacity:0; transition:opacity .15s; font-size:.85rem; color:var(--pico-muted-color); }
.htmx-request .htmx-indicator { opacity:1; }
.htmx-request.htmx-indicator { opacity:1; }