:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #101510;
  color: #f4f6ef;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #263528 0, #101510 45%); }
.shell { width: min(100%, 520px); margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 20px 40px; }
.eyebrow { margin: 0; color: #a8ba9d; font-size: .76rem; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 4px 0 22px; font-size: 2rem; }
.status-card { display: flex; align-items: center; gap: 14px; min-height: 96px; padding: 20px; border: 1px solid #425044; border-radius: 18px; background: #202720; }
.status-card small { display: block; color: #b7c1b2; font-weight: 700; letter-spacing: .08em; }
.status-card strong { display: block; margin-top: 4px; font-size: 1.55rem; }
.status-dot { width: 25px; height: 25px; border-radius: 50%; background: #889088; box-shadow: 0 0 20px #88908880; }
.status-card.ready .status-dot { background: #54d66c; box-shadow: 0 0 24px #54d66c99; }
.status-card.triggering .status-dot { background: #f1ad3f; box-shadow: 0 0 24px #f1ad3f99; }
.status-card.triggered .status-dot { background: #f05252; box-shadow: 0 0 24px #f0525299; }
.status-card.fault .status-dot { background: #db55e8; box-shadow: 0 0 24px #db55e899; }
button { width: 100%; min-height: 58px; border: 0; border-radius: 15px; font: inherit; font-size: 1.05rem; font-weight: 800; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .42; }
.drop-button, .danger { margin-top: 16px; color: white; background: linear-gradient(180deg, #d93636, #aa1d1d); box-shadow: 0 8px 26px #6e0f0f66; }
.secondary { margin-top: 12px; color: #eff4eb; background: #2b352c; border: 1px solid #4b5c4c; }
.hidden { display: none; }
.readings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.readings article { min-height: 112px; padding: 16px; border: 1px solid #364238; border-radius: 15px; background: #1a211b; }
.readings span, .readings small { display: block; color: #aeb9aa; font-size: .78rem; }
.readings strong { display: block; margin: 12px 0 4px; font-size: 1.28rem; }
.message { min-height: 24px; color: #cfdbca; text-align: center; }
.commissioning { color: #879184; font-size: .78rem; text-align: center; }
dialog { width: min(calc(100% - 32px), 440px); padding: 24px; color: #f4f6ef; background: #202720; border: 1px solid #526254; border-radius: 18px; }
dialog::backdrop { background: #000b; }
dialog h2 { margin-top: 0; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dialog-actions button { margin-top: 10px; }
@media (max-width: 360px) { .readings { grid-template-columns: 1fr; } }