:root{color-scheme:dark;--bg:#070b10;--ink:#0b1118;--plate:#111a24;--line:#263544;--text:#f5f9fc;--muted:#9cafbf;--cyan:#36d7ff;--green:#5ee6a8;--amber:#ffbf5a;--red:#ff6370;font-family:'Segoe UI Variable','Segoe UI',sans-serif;color:var(--text);background:var(--bg)}
.notification-settings{border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:24px}.notification-settings h3{font-size:26px;margin:16px 0}.notification-settings h4{font-size:18px;margin:28px 0 12px}.notification-row{border:1px solid var(--line);border-radius:14px;margin:10px 0;padding:10px 14px;display:flex;gap:20px;min-width:0}.notification-row legend{font-size:18px;padding:0 6px}.notification-row label{display:flex;align-items:center;gap:10px;min-height:48px;font-size:16px;cursor:pointer}.notification-row input[type=checkbox]{width:26px;height:26px;padding:0;accent-color:var(--cyan)}.notification-settings button:disabled{opacity:.55;cursor:not-allowed}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 12% 10%,#36d7ff16,transparent 55%)}button,select{font:inherit}button:focus-visible,select:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}a:visited{color:var(--cyan)}.layout{max-width:1100px;margin:auto;display:grid;grid-template-columns:1fr 430px;gap:80px;padding:54px 32px;align-items:start}aside{position:sticky;top:65px;padding-top:32px}.eyebrow{color:var(--cyan);font:700 12px/1.5 Consolas,monospace;letter-spacing:.12em}h1,h2{font-family:Bahnschrift,'Arial Narrow',sans-serif;letter-spacing:-.045em}h1{font-size:70px;line-height:.98;margin:26px 0}h2{font-size:36px;margin:0}h3{font-size:17px}.intro{font-size:22px;line-height:1.5;color:#b7c4ce}.preview{border:1px solid var(--line);border-radius:18px;padding:22px;margin-top:35px;background:var(--ink)}.preview p,.footnote{color:var(--muted);line-height:1.6;font-size:14px}.preview label{display:block;margin:22px 0 8px;font-size:14px}select{width:100%;padding:12px;border:1px solid #415363;border-radius:10px;background:var(--plate);color:var(--text)}.footnote{font-size:12px}.app{border:1px solid #344553;border-radius:30px;background:var(--ink);box-shadow:0 30px 90px #0008;overflow:hidden}header{display:flex;align-items:center;justify-content:space-between;padding:24px}.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px}.mark{display:grid;place-items:center;background:var(--cyan);color:var(--bg);width:32px;height:32px;border-radius:10px}.badge{font:700 10px Consolas,monospace;letter-spacing:.12em;color:var(--muted);border:1px solid var(--line);border-radius:30px;padding:7px}.screen{padding:0 20px 24px;min-height:540px}.screen[hidden]{display:none}.status{border:1px solid #304553;border-radius:24px;padding:22px;background:linear-gradient(145deg,#162331,#101820);position:relative}.status-main{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:25px}.status-main h2{font-size:39px}.muted{color:var(--muted);font-size:14px;line-height:1.6}.status-main .muted{margin:0 0 8px}.shield{font-size:45px;color:var(--cyan);border:1px solid #36d7ff55;border-radius:22px;padding:0 12px}#readiness{color:var(--amber);margin:20px 0 5px;font-weight:600}#connection{margin:0;font-size:12px}.controls{display:flex;gap:8px;margin-top:16px}.controls button{flex:1;padding:13px 4px;background:#15212c;color:#98a9b7;border:1px solid #30414f;border-radius:12px;cursor:not-allowed;font-size:14px}.control-note{font-size:12px;color:var(--muted);text-align:center;margin:10px 0 26px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.section-head h3{margin:0}.section-head span{font-size:10px;color:var(--muted)}.sensors{display:grid;gap:10px}.sensor{border:1px solid var(--line);background:#101923;border-radius:16px;padding:16px;display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:start}.sensor .symbol{color:var(--cyan);font-size:19px}.sensor h4{margin:0;font-size:15px;line-height:1.5}.sensor p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.5}.sensor .value{font-size:12px;font-weight:700;color:var(--green);padding-top:4px}.sensor.warn .value{color:var(--amber)}.sensor.fault{border-color:#675033}.sensor.fault .value{max-width:55px}.sensor:last-child{border-style:dashed}nav{position:sticky;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:#0b1118f5;border-top:1px solid var(--line);padding:12px 16px max(16px,env(safe-area-inset-bottom))}nav button{border:0;border-radius:12px;background:transparent;color:var(--muted);font-size:23px;min-height:55px;cursor:pointer}nav span{display:block;font-size:12px;margin-top:3px}nav [aria-current]{background:#36d7ff12;color:var(--cyan)}.empty{margin-top:30px;padding:30px 22px;border:1px dashed var(--line);border-radius:20px;color:var(--muted);line-height:1.6}.empty>span{font-size:35px;color:var(--cyan)}.empty h3{color:var(--text)}.access-row{display:flex;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid var(--line);font-size:14px}.access-row span{color:var(--muted);text-align:right;max-width:150px}.notice{border:1px solid #675033;border-radius:14px;padding:16px;color:var(--amber);font-size:13px;line-height:1.6}.alarm #heading{color:var(--red)}.offline .shield{color:var(--muted);border-color:var(--line)}
@media(max-width:800px){.layout{grid-template-columns:1fr;max-width:480px;padding:12px;gap:20px}aside{position:static;padding:0}h1,.intro,aside>.eyebrow,.footnote{display:none}.preview{margin:0;padding:15px}.preview p{margin:8px 0}.preview label{margin-top:12px}.app{border-radius:22px}.screen{min-height:450px}header{padding:20px}.status-main h2{font-size:36px}}@media(max-width:360px){.screen{padding:0 12px 20px}.sensor{padding:12px;gap:7px}}

/* Readability floor: no app text below 16px, including secondary labels.
   Coast Spa Monitor's synced release notes specify 11px quick controls;
   exact source-role comparison awaits its unsynced interface files. */
:root{font-size:16px;--type-small:1rem;--type-body:1.0625rem;--type-label:1.125rem}
body{line-height:1.5}
.eyebrow,.badge,.preview p,.preview label,.footnote,.muted,#connection,
.controls button,.control-note,.section-head span,.sensor p,.sensor .value,
nav span,.access-row,.notice{font-size:var(--type-small);line-height:1.5}
.sensor h4{font-size:var(--type-label);line-height:1.4}
.preview>strong,h3{font-size:var(--type-label)}
.eyebrow{letter-spacing:.045em}.badge{letter-spacing:.03em}
.brand-logo{display:block;width:112px;height:auto;background:white;border-radius:6px;padding:5px;object-fit:contain}
.brand{flex-wrap:wrap;min-width:0;gap:10px;font-size:20px}
header{gap:12px;flex-wrap:wrap}
.section-head{align-items:start;flex-direction:column;gap:3px}
.sensor{grid-template-columns:24px minmax(0,1fr);gap:8px 10px}
.sensor .value{grid-column:2;padding-top:0;font-size:var(--type-body)}
.sensor.fault .value{max-width:none}
.sensor h4,.sensor p,.access-row{overflow-wrap:anywhere}
.controls button{min-height:48px}
select{min-height:48px;font-size:16px}
nav button{min-height:64px}
.access-row{flex-direction:column;gap:4px}.access-row span{text-align:left;max-width:none}
@media(max-width:360px){header{padding:16px}.brand-logo{width:100px}.badge{padding:5px}.status{padding:18px}.status-main h2{font-size:32px}.shield{font-size:32px;padding:0 8px}.controls{flex-wrap:wrap}.controls button{flex:1 1 80px}}

input{font:inherit;width:100%;padding:12px;border:1px solid #415363;border-radius:10px;background:var(--plate);color:var(--text)}
input:focus-visible,summary:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}
.live-mode .layout{grid-template-columns:minmax(0,430px);justify-content:center}.live-mode aside{display:none}
.auth-screen{padding-top:16px}.auth-screen h2{margin:12px 0}.owner-actions{display:grid;gap:12px;margin:28px 0}
.owner-actions button,#enroll-button,.secondary-action{min-height:52px;border:1px solid var(--cyan);border-radius:14px;background:var(--cyan);color:var(--bg);font-size:var(--type-small);font-weight:750;cursor:pointer;padding:12px 16px}
.owner-actions button:hover,#enroll-button:hover{background:#a4efff}.auth-screen details{margin-top:26px;border-top:1px solid var(--line);padding-top:20px}.auth-screen summary{color:var(--cyan);cursor:pointer;font-size:var(--type-small);font-weight:700}
.auth-screen label{display:block;margin:16px 0 7px;font-size:var(--type-small)}.auth-screen input,.auth-screen select{min-height:52px;font-size:var(--type-small)}.auth-screen #enroll-button{width:100%;margin-top:16px}.auth-screen .notice{margin-top:18px}.secondary-action{width:100%;margin-top:24px;background:transparent;color:var(--cyan)}
.activity-card{border:1px solid var(--line);background:#101923;border-radius:16px;padding:17px;margin-top:12px}.activity-card h3{margin:0}.activity-card p,.activity-card time{display:block;color:var(--muted);font-size:var(--type-small);line-height:1.5}.activity-card p{margin:6px 0}.activity-card time{color:var(--cyan)}.activity-card.alarm{border-color:var(--red)}
.phone-pairing{margin:24px 0;padding:18px;border:1px solid #344553;border-radius:16px}.phone-pairing p{font-size:16px;line-height:1.5}.phone-pairing button,#phone-save{font:inherit;font-size:16px;min-height:48px;padding:12px;border-radius:12px;border:1px solid #36d7ff;background:#36d7ff;color:#0b1118;width:100%;margin:8px 0}#pair-qr{display:block;max-width:100%;height:auto;margin:16px auto} [hidden],#pair-qr[hidden]{display:none!important}