:root {
  color-scheme: dark light;

  --bg: #06120c;
  --bg-glow: #0d2417;
  --surface: #0b1c12;
  --surface-2: #102a1b;
  --surface-3: #16371f;
  --line: #17351f;
  --line-soft: #12281a;
  --text: #e9f3ec;
  --muted: #83a191;
  --faint: #5d7a6a;

  --accent: #f5c451;
  --accent-ink: #1c1400;
  --ok: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;

  --radius: 16px;
  --radius-sm: 11px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --topbar: 62px;
  --tabbar: calc(58px + env(safe-area-inset-bottom));
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f3f7f4; --bg-glow: #e4efe7; --surface: #fff; --surface-2: #eff5f1;
    --surface-3: #e3ede6; --line: #d8e5dc; --line-soft: #e6efe9;
    --text: #08170f; --muted: #5a7365; --faint: #8aa294;
    --accent: #9a6b04; --accent-ink: #fffaf0; --ok: #15803d; --bad: #b91c1c;
    --shadow: 0 1px 2px rgba(16,40,25,.06), 0 10px 30px -18px rgba(16,40,25,.35);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: radial-gradient(90% 50% at 50% -8%, var(--bg-glow) 0%, transparent 68%), var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ---------- chrome ---------- */

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.topbar.scrolled { border-bottom-color: var(--line-soft); }
.topbar img.mark { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.topbar .titles { flex: 1; min-width: 0; }
.topbar h1 {
  margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The live clock. Its whole job is to prove the page is still talking to the
   server — a static screen and a dead one look identical otherwise. */
.topbar .sync { margin: 0; font-size: 12px; color: var(--faint); display: flex; align-items: center; gap: 6px; }
.topbar .sync .beat {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none;
  animation: beat 4s ease-in-out infinite;
}
.topbar .sync.stale .beat { background: var(--bad); animation: none; }
@keyframes beat { 0%,92%,100% { opacity: .35 } 94% { opacity: 1 } }

.iconbtn {
  width: 34px; height: 34px; flex: none; padding: 0;
  display: grid; place-items: center;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text);
  font-size: 17px; cursor: pointer;
}

main {
  padding: 4px 16px calc(var(--tabbar) + 8px);
  max-width: 480px; margin: 0 auto;
}

.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: center; gap: 6px;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid var(--line-soft);
}
.tabs button {
  flex: 1; max-width: 190px; width: auto;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 0 4px; border: 0; border-radius: 12px;
  background: transparent; color: var(--faint);
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: color .18s ease;
}
.tabs button .g { font-size: 18px; line-height: 1; }
.tabs button.on { color: var(--accent); }

/* ---------- blocks ---------- */

h2 {
  font-size: 11.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin: 26px 0 9px;
}

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 17px; margin-bottom: 11px;
  box-shadow: var(--shadow);
}
.card > h3 { margin: 0 0 5px; font-size: 16.5px; font-weight: 620; letter-spacing: -.01em; }
.card > p { margin: 0; font-size: 14px; color: var(--muted); }
.card.accent { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.card.tap { cursor: pointer; transition: transform .14s ease, border-color .14s ease; }
.card.tap:active { transform: scale(.988); border-color: var(--surface-3); }

/* ---------- device ---------- */

.dev { display: flex; align-items: center; gap: 13px; }
.dev .body { flex: 1; min-width: 0; }
.dev h3 {
  margin: 0; font-size: 17px; font-weight: 640; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dev .chev { color: var(--faint); font-size: 19px; flex: none; }

.state { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 13.5px; }
.state .label { color: var(--muted); }
.state.ok .label { color: var(--ok); }
.state.bad .label { color: var(--bad); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex: none; }
.state.ok .dot { background: var(--ok); animation: breathe 2.8s ease-out infinite; }
.state.bad .dot { background: var(--bad); }
@keyframes breathe {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent) }
  70% { box-shadow: 0 0 0 8px transparent }
  100% { box-shadow: 0 0 0 0 transparent }
}
@media (prefers-reduced-motion: reduce) { .state.ok .dot { animation: none } }

.meta { margin-top: 3px; font-size: 12px; color: var(--faint); }

.pill {
  font-size: 10px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; flex: none;
  background: var(--surface-2); color: var(--faint); border: 1px solid var(--line);
}
.pill.owner { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }

/* ---------- detail hero ---------- */

.hero { text-align: center; padding: 26px 18px 22px; }
.hero .ring {
  width: 78px; height: 78px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center; font-size: 31px;
  background: var(--surface-2); border: 2px solid var(--line);
}
.hero.ok .ring { border-color: color-mix(in srgb, var(--ok) 60%, var(--line)); }
.hero.bad .ring { border-color: color-mix(in srgb, var(--bad) 60%, var(--line)); }
.hero h3 { margin: 0 0 4px; font-size: 21px; font-weight: 660; letter-spacing: -.02em; }
.hero .big { font-size: 15px; }
.hero.ok .big { color: var(--ok); }
.hero.bad .big { color: var(--bad); }
.hero .sub { margin-top: 5px; font-size: 12.5px; color: var(--faint); }

/* ---------- history ---------- */

.event { display: flex; gap: 11px; align-items: baseline; padding: 10px 0; font-size: 13.5px; }
.event + .event { border-top: 1px solid var(--line-soft); }
.event .when { color: var(--faint); font-size: 11.5px; flex: none; width: 86px; }
.event .tick { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--faint); }
.event .what { flex: 1 }
.event.outage .tick { background: var(--bad) }
.event.sag .tick { background: var(--warn) }
.event .dur { color: var(--faint); font-size: 12px }

/* ---------- rows ---------- */

.rows { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 11px; }
.row-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; border: 0; border-radius: 0; background: transparent;
  color: var(--text); font-size: 15px; text-align: left; cursor: pointer;
}
.row-item + .row-item { border-top: 1px solid var(--line-soft) }
.row-item:active { background: var(--surface-2) }
.row-item .g { font-size: 17px; width: 22px; text-align: center; flex: none }
.row-item .grow { flex: 1; min-width: 0 }
.row-item .val { color: var(--faint); font-size: 13px }
.row-item.danger { color: var(--bad) }
/* button.danger is more specific than .row-item and was reimposing its own
   border and radius inside the container's, drawing a second outline. */
.rows .row-item, .rows .row-item.danger { border: 0; border-radius: 0; background: transparent }
.rows .row-item:active { background: var(--surface-2) }

/* ---------- controls ---------- */

button {
  width: 100%; padding: 14px 16px; border: 0; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-ink);
  font-size: 15.5px; font-weight: 630; letter-spacing: -.005em; cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}
button:active { transform: scale(.985) }
button:disabled { opacity: .5; cursor: default }
button.ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--line) }
button.danger { background: transparent; color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 40%, var(--line)) }
button.slim { padding: 10px 14px; font-size: 14px }
.row { display: flex; gap: 8px }
.row > button { width: auto; flex: 1 }
.actions { margin-top: 14px }

label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 7px }
input {
  width: 100%; padding: 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  font-size: 17px;
}
input.code {
  font-size: 19px; font-weight: 600; letter-spacing: .14em; text-align: center;
  text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 1px }
input::placeholder { letter-spacing: .05em; color: var(--faint); font-weight: 500 }

/* ---------- onboarding ---------- */

.steps { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: s }
.steps li { counter-increment: s; display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; font-size: 14px; color: var(--muted) }
.steps li + li { border-top: 1px solid var(--line-soft) }
.steps li > span { flex: 1; min-width: 0 }
.steps li::before {
  content: counter(s); flex: none; width: 23px; height: 23px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  font-size: 12px; font-weight: 660; display: grid; place-items: center;
}
.steps b { color: var(--text); font-weight: 620 }
.share-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; vertical-align: -6px; margin: 0 3px;
  border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line);
}
.share-glyph svg { width: 13px; height: 13px; fill: none; stroke: var(--text); stroke-width: 1.9 }

/* ---------- misc ---------- */

.notice {
  border-radius: var(--radius-sm); padding: 13px 15px; font-size: 14px;
  background: var(--surface-2); border: 1px solid var(--line); margin: 4px 0 14px;
}
.notice.bad { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); color: var(--bad) }
.notice.ok { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); color: var(--ok) }

.empty { text-align: center; padding: 34px 20px }
.empty .mark { font-size: 34px; opacity: .55; margin-bottom: 10px }
.empty h3 { margin: 0 0 6px; font-size: 18px }
.empty p { margin: 0 auto 18px; max-width: 280px }

.hidden { display: none !important }
footer { margin-top: 26px; font-size: 11.5px; color: var(--faint); text-align: center }

.enter { animation: enter .26s cubic-bezier(.2,.7,.3,1) both }
@keyframes enter { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.stagger > * { animation: enter .28s cubic-bezier(.2,.7,.3,1) both }
.stagger > *:nth-child(2) { animation-delay: .04s }
.stagger > *:nth-child(3) { animation-delay: .08s }
.stagger > *:nth-child(4) { animation-delay: .12s }
@media (prefers-reduced-motion: reduce) { .enter, .stagger > * { animation: none } }

/* ---------- scanner ---------- */

#scanner { position: fixed; inset: 0; z-index: 60; background: #000; display: grid; grid-template-rows: 1fr auto }
#scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
#scanner .frame {
  position: relative; margin: auto; width: min(72vw, 300px); aspect-ratio: 1;
  border-radius: 22px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.58);
  outline: 2px solid rgba(255,255,255,.9); outline-offset: -2px;
}
#scanner .hint {
  position: relative; z-index: 1; text-align: center; color: #fff;
  padding: 0 24px calc(26px + env(safe-area-inset-bottom));
  font-size: 14px; text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
#scanner .hint button { margin-top: 14px; max-width: 260px; margin-inline: auto }

/* ---------- device list ---------- */

.card.dev-card { padding: 15px 16px; position: relative; overflow: hidden; }
/* A hairline of state colour down the leading edge: readable at a glance from
   arm's length, which is how this list is actually looked at. */
.card.dev-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--faint);
}
.card.dev-card.on::before { background: var(--ok); }
.card.dev-card.off::before { background: var(--bad); }

.dev-top { display: flex; align-items: center; gap: 10px; }
.dev-top h3 { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 640;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-foot { display: flex; align-items: center; gap: 8px; margin-top: 9px;
  padding-top: 9px; border-top: 1px solid var(--line-soft);
  font-size: 12px; color: var(--faint); }
.dev-foot .sep { opacity: .5 }

/* ---------- history ---------- */

.ev { border-radius: 10px; overflow: hidden; }
.ev + .ev { margin-top: 6px }
.ev-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 12px; border: 0; border-radius: 0; background: var(--surface-2);
  color: var(--text); font-size: 14px; text-align: left; cursor: pointer;
}
.ev-head:active { background: var(--surface-3) }
.ev-head .tick { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--faint) }
.ev.outage .ev-head .tick { background: var(--bad) }
.ev.sag .ev-head .tick { background: var(--warn) }
.ev.net .ev-head .tick { background: var(--muted) }
.ev-head .grow { flex: 1; min-width: 0 }
.ev-head .kind { display: block; font-weight: 600 }
.ev-head .span { display: block; font-size: 12px; color: var(--faint); margin-top: 1px }
.ev-head .caret { color: var(--faint); font-size: 12px; transition: transform .2s ease }
.ev.open .ev-head .caret { transform: rotate(90deg) }
.ev-body { display: none; padding: 11px 12px 12px; background: var(--surface-2);
  border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--muted) }
.ev.open .ev-body { display: block }
.ev-body dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 }
.ev-body dt { color: var(--faint) }
.ev-body dd { margin: 0; color: var(--text) }