:root {
  --bg: #f4f6f8; --surface: #ffffff; --text: #14181f; --muted: #5b6573; --border: #dde2e8;
  --ok: #1a7f37; --warn: #9a5b00; --crit: #c62828; --na: #6e7a8a; --accent: #0b62d6;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1419; --surface: #182029; --text: #e6ebf1; --muted: #9aa5b4; --border: #2a3440;
    --ok: #3fb950; --warn: #e3a008; --crit: #f85149; --na: #8a94a3; --accent: #58a6ff;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
.bar {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 8px) 16px 8px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.bar h1 { flex: 1; margin: 0; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar form { margin: 0; }
.back {
  display: flex; align-items: center; min-width: 44px; min-height: 44px;
  font-size: 32px; line-height: 1; color: var(--accent); text-decoration: none;
}
.back[hidden] { display: none; }
.conn { font-size: 13px; color: var(--muted); white-space: nowrap; }
.conn::before { content: "●"; margin-right: 4px; }
.conn.live::before { color: var(--ok); }
.conn.bad::before { color: var(--warn); }
button.link { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 14px; }

main { display: grid; gap: 12px; max-width: 720px; margin: 0 auto; padding: 16px; }
.empty { padding: 32px 0; text-align: center; color: var(--muted); }
.meta { font-size: 14px; color: var(--muted); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.name { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.badge { padding: 2px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }

.card, .port {
  display: block; background: var(--surface); color: inherit; text-decoration: none;
  border: 1px solid var(--border); border-left-width: 6px; border-radius: 12px;
}
.card { padding: 14px 16px; min-height: 44px; }
.lvl-ok { border-left-color: var(--ok); }
.lvl-warn { border-left-color: var(--warn); }
.lvl-crit { border-left-color: var(--crit); }
.lvl-na { border-left-color: var(--na); }
.t-ok { color: var(--ok); }
.t-warn { color: var(--warn); }
.t-crit { color: var(--crit); }
.t-na { color: var(--na); }

.banner { padding: 12px 16px; border: 1px solid var(--crit); border-radius: 12px; background: var(--surface); color: var(--crit); overflow-wrap: anywhere; }

.port summary { list-style: none; padding: 14px 16px; cursor: pointer; }
.port summary::-webkit-details-marker { display: none; }
.levels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.levels[hidden] { display: none; }
.levels .label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.levels .value { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.levels .unit { margin-left: 2px; font-size: 14px; font-weight: 500; color: var(--muted); }
.port dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; padding: 0 16px 14px; font-size: 14px; }
.port dt { color: var(--muted); }
.port dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stale .value, .stale .badge, .stale dd { opacity: .45; }

.login { display: grid; gap: 12px; max-width: 360px; margin: 15vh auto 0; padding: 0 16px; }
.login h1 { margin: 0 0 8px; }
.login input, .login button { min-height: 44px; padding: 12px; border-radius: 10px; font: inherit; }
.login input { border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.login button { border: 0; background: var(--accent); color: #fff; font-weight: 600; }
.error { margin: 0; color: var(--crit); }