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

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(circle at 50% 10%, rgba(41, 149, 255, .22), transparent 36%), linear-gradient(160deg, #0d1721 0%, #070b10 100%);
}
button, input { font: inherit; }
.shell { width: min(100%, 480px); min-height: 100vh; min-height: 100dvh; margin: auto; padding: max(28px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom)); }
header { text-align: center; }
.eyebrow { color: #64b5ff; font-size: .74rem; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 6px 0 8px; font-size: clamp(2.1rem, 10vw, 3.2rem); }
.status { display: inline-flex; gap: 8px; align-items: center; margin: 0; color: #aebdcb; font-size: .92rem; }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #75818d; }
.status[data-kind="ok"]::before { background: #39d98a; box-shadow: 0 0 16px #39d98a; }
.status[data-kind="warn"]::before { background: #ffb84d; }
.status[data-kind="error"]::before { background: #ff5d67; }
.call-card, .settings { margin-top: 28px; padding: 22px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 26px; background: rgba(20, 31, 43, .76); box-shadow: 0 24px 70px rgba(0, 0, 0, .33); backdrop-filter: blur(18px); }
.doorbell { width: 120px; height: 120px; margin: 0 auto 24px; display: grid; place-items: center; border: 1px solid rgba(100, 181, 255, .32); border-radius: 50%; background: radial-gradient(circle, #2d8bdd, #173d61 52%, #101923 54%); box-shadow: 0 0 50px rgba(45, 139, 221, .25); }
.bell { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: #d8edff; color: #65baff; }
button { width: 100%; min-height: 54px; margin-top: 11px; border: 0; border-radius: 16px; color: #fff; font-weight: 800; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .42; }
.primary { background: linear-gradient(135deg, #2995ff, #1267cf); }
.answer { background: linear-gradient(135deg, #39d98a, #15985a); }
.danger { background: #3b2026; color: #ff939a; }
.secondary { background: #25425e; }
.text-button { background: transparent; color: #9eb5ca; min-height: 40px; }
.hidden { display: none; }
.hint { margin: 18px 4px 2px; color: #91a3b4; font-size: .86rem; line-height: 1.5; }
.settings { border-radius: 20px; }
summary { cursor: pointer; font-weight: 750; }
form { margin-top: 18px; }
label { display: block; margin: 14px 0; color: #b7c8d8; font-size: .84rem; }
input { width: 100%; margin-top: 6px; padding: 13px 14px; border: 1px solid #33485b; border-radius: 12px; outline: none; background: #0d1720; color: #f3f8fc; }
input:focus { border-color: #2995ff; box-shadow: 0 0 0 3px rgba(41, 149, 255, .16); }