:root {
  color-scheme: light;
  --ink: #203c48;
  --muted: #536b76;
  --teal: #126b68;
  --surface: rgba(255, 255, 255, .68);
  --border: rgba(255, 255, 255, .9);
  font: 16px/1.5 system-ui, sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at 23% 20%, #a8ded2a6, transparent 45%),
    radial-gradient(ellipse at 88% 4%, #b8b6e57a, transparent 38%),
    radial-gradient(ellipse at 78% 94%, #ffd5b678, transparent 38%),
    linear-gradient(130deg, #e1f0f1, #e9ecf5, #e5f1f2);
  background-attachment: fixed;
}
.top, main, footer { width: min(100% - 2rem, 66rem); margin-inline: auto; }
.top, .brand, .gateway, .section-heading, .unit-head { display: flex; align-items: center; gap: .75rem; }
.top, .gateway, .section-heading, .unit-head { justify-content: space-between; }
.top { min-height: 5rem; border-bottom: 1px solid var(--border); }
.brand, .eyebrow { font-size: .72rem; font-weight: 750; letter-spacing: .12em; }
.mark { background: var(--teal); color: white; border-radius: 12px; padding: .45rem .75rem; font-size: .95rem; letter-spacing: .08em; }
.intro { padding-block: clamp(1.75rem, 6vw, 4rem) 1rem; }
.eyebrow { color: var(--teal); margin: 0; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: -.045em; line-height: 1.1; margin-block: .35rem .6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
p, .section-heading span, footer { color: var(--muted); }
.company-name { color: var(--teal); font-size: 1.13rem; font-weight: 700; margin-bottom: .4rem; overflow-wrap: anywhere; }
.pane { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 1.15rem; box-shadow: 0 8px 30px #2949560a; }
.notice { margin-block: .5rem 1.1rem; font-size: .9rem; }
#support-requests { margin-bottom: 1rem; }
#support-items article { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #d0e8e3; }
#support-items button { margin-top: .45rem; }
.gateway { flex-wrap: wrap; }
#last-update { font-size: .88rem; margin-top: .35rem; }
.section-heading { margin-block: 1.4rem .7rem; }
.units { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); gap: .85rem; }
.unit-link {
  display: grid;
  gap: .75rem;
  min-width: 0;
  color: var(--ink);
  text-align: left;
  font-weight: 650;
}
.unit-link:hover { background: #fff; border-color: #9bb3b8; }
.unit-link-label { color: var(--teal); font-size: .88rem; }
.unit-head { flex-wrap: wrap; }
#unit-detail { margin-top: 1rem; }
#back-to-units { margin-bottom: .65rem; }
#unit-reading { margin-top: .35rem; font-size: .88rem; }
#command-heading { margin-bottom: .6rem; }
#refresh-controls { margin-top: .85rem; }
#remote-controls { margin-top: .85rem; }
#profile-fields { display: grid; gap: .7rem; margin: .7rem 0; padding: .75rem; border: 1px solid #9bb3b8; border-radius: 12px; }
#profile-fields p, #remote-remaining, #control-result { font-size: .9rem; }
#remote-remaining:empty, #control-result:empty { display: none; }
.threshold-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: .65rem; }
.treatment-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
#control-result { margin-top: .7rem; }
button.danger { color: #fff; background: #932b21; border-color: #932b21; }
.unit-telemetry h3 { margin-top: 1rem; }
.unit dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .7rem; font-size: .92rem; margin: .65rem 0 0; }
.unit dt { color: var(--muted); }
.unit dd { margin: 0; text-align: right; }
.unit-telemetry h4 { margin: .9rem 0 0; font-size: .92rem; }
.unit-telemetry dl { margin-top: .35rem; }
.unit-telemetry small { display: block; color: var(--muted); }
.telemetry-age { margin-bottom: 0; font-size: .85rem; }
.badge { display: inline-block; border-radius: 999px; padding: .23rem .65rem; background: #d0e8e3; color: #075653; font-size: .79rem; font-weight: 700; white-space: nowrap; }
.badge.running { background: #ffead3; color: #7b3e07; }
.badge.muted { background: #e5ebee; color: #435b67; }
.login { max-width: 26rem; display: grid; gap: .85rem; }
label { display: block; font-size: .9rem; }
input, select, button { font: inherit; border-radius: 12px; }
input, select { color: var(--ink); background: #fff; border: 1px solid #9bb3b8; padding: .5rem .65rem; }
input { display: block; width: 100%; }
select { margin-top: .25rem; max-width: 100%; font-weight: 650; }
button { background: var(--teal); color: #fff; border: 1px solid var(--teal); padding: .5rem .95rem; cursor: pointer; font-weight: 650; }
button.secondary { background: transparent; color: var(--teal); }
button:disabled { opacity: .6; cursor: progress; }
:focus-visible { outline: 3px solid #126b68; outline-offset: 3px; }
#login-error:empty { display: none; }
#login-error { color: #932b21; }
footer { margin-block: 2rem; font-size: .72rem; letter-spacing: .09em; }
@media (max-width: 400px) { .pane { padding: .9rem; } }