:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#17191b;background:#f8f9fa;--green:#009d78;--amber:#f1bc36;--muted:#83888c;--line:#eef0f1;--red:#e54d4d;color-scheme:light}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.55;cursor:wait}[hidden]{display:none!important}.symbols{width:0;height:0;position:absolute;overflow:hidden}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.app{max-width:650px;min-height:100vh;margin:auto;background:white;padding:0 22px 100px}.header{display:flex;align-items:center;gap:13px;height:80px}.header h1{font-size:21px;font-weight:700;letter-spacing:-.45px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.header-status{font-size:10px;color:var(--green);white-space:nowrap;display:flex;align-items:center;gap:5px}.header-status i,.online-label:before{content:"";display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:3px}.header-status.offline{color:var(--muted)}.header-status.offline i{background:#a5a9ab}.avatar{display:grid;place-items:center;width:66px;height:66px;background:#f4f5f5;color:#b5b9b9;border:0;border-radius:50%;flex-shrink:0;overflow:hidden}.avatar svg{width:48px;height:48px;fill:#b5b9b9;stroke:none}.avatar.small{width:37px;height:37px}.avatar.small svg{width:28px;height:28px}.icon-button{display:grid;place-items:center;border:0;background:none;padding:5px;min-width:36px;min-height:44px}.sections{display:flex;justify-content:space-between;gap:10px;overflow-x:auto;padding:11px 6px 18px;scrollbar-width:none}.section-button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:56px;flex:1;padding:3px;color:var(--muted);font-size:11px}.section-button .name{max-width:100%;width:100%;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section-button.selected .section-icon{outline:2px solid var(--green);outline-offset:4px}.section-button.selected .name{color:#15191b;font-weight:650}.section-icon{display:grid;place-items:center;flex-shrink:0;width:55px;height:55px;background:var(--amber);color:white;border-radius:50%}.section-icon svg{width:27px;height:31px;stroke-width:2.2}.section-icon.armed{background:var(--green)}.section-icon.large{width:86px;height:86px}.section-icon.large svg{width:42px;height:48px}.section-icon.unconfigured{background:#f0f2f2;color:#8c9392}.section-heading{display:flex;align-items:center;justify-content:space-between;margin:13px 0 13px;gap:12px}.section-heading h2{font-size:22px;letter-spacing:-.4px;margin:0;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.online-label{font-size:11px;color:var(--muted);white-space:nowrap}.online-label.offline:before{background:#a7abad}.video-card{position:relative;background:#111714;border-radius:15px;overflow:hidden;aspect-ratio:16/9}.video-card video{width:100%;height:100%;object-fit:contain;background:#111714;display:block}.video-state{position:absolute;inset:0;background:#121916dd;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;color:#dae2df;font-size:12px;padding:18px;text-align:center}.video-state button{border:1px solid #ffffff60;background:transparent;color:white;border-radius:8px;padding:11px 19px;font-size:12px}.spinner{height:23px;width:23px;border:2px solid #ffffff30;border-top-color:#d5eee5;border-radius:50%;animation:spin .9s linear infinite}.live-label{position:absolute;top:12px;left:12px;padding:5px 8px;border-radius:5px;background:#111b;display:flex;align-items:center;gap:5px;color:white;font-size:9px;font-weight:650;letter-spacing:.6px}.live-label i{width:5px;height:5px;border-radius:50%;background:#ff5b57}.guard-card{display:flex;align-items:center;gap:15px;padding:21px 0;width:100%;border:0;border-bottom:1px solid var(--line);background:white;text-align:left;color:#14191b}.guard-card .section-icon{width:59px;height:59px}.guard-copy{display:flex;flex-direction:column;gap:7px;flex:1}.guard-copy strong{font-size:18px;font-weight:650;letter-spacing:-.25px}.guard-copy>span{font-size:12px;color:var(--muted)}.chevron{font-size:28px;font-weight:300;color:#bcc1c3;line-height:1}.menu-row{display:flex;align-items:center;gap:13px;width:100%;background:white;border:0;border-bottom:1px solid var(--line);padding:18px 0;text-align:left;color:#17191b;font-size:15px;font-weight:550}.menu-row>span:nth-child(2){flex:1}.row-icon{width:33px;height:33px;display:grid;place-items:center;border-radius:9px;background:#f3f4f4;color:#343c3d}.row-icon svg{width:21px;height:21px}.info-note{font-size:11px;color:var(--muted);line-height:1.7;padding:15px 0 20px}.navigation{position:fixed;z-index:4;bottom:0;left:50%;transform:translateX(-50%);width:min(650px,100%);display:flex;background:#fffffff5;backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:10px 15px max(10px,env(safe-area-inset-bottom))}.navigation button{display:flex;flex:1;flex-direction:column;align-items:center;gap:5px;border:0;background:transparent;color:#a0a5a6;min-height:47px;font-size:10px}.navigation button svg{height:24px;width:24px}.navigation button.active{color:var(--green)}.group-label{font-size:12px;font-weight:450;color:var(--muted);margin:29px 0 13px}.owner-card{display:flex;align-items:center;gap:17px;padding:7px 0 22px;border-bottom:1px solid var(--line)}.owner-card strong{font-size:16px}.owner-card p{font-size:13px;color:var(--muted);margin:7px 0 0}.settings-note{font-size:12px;line-height:1.8;color:var(--muted);margin:23px 0}.pin-state{font-size:12px;color:var(--muted);font-weight:400}.setting-copy{display:flex;flex-direction:column;gap:5px;flex:1}.event-filters{display:flex;gap:9px;padding:6px 0 17px}.event-filters button{border:0;background:#f1f3f3;color:#747c7c;border-radius:18px;font-size:12px;padding:9px 15px;min-height:36px}.event-filters .active{color:var(--green);background:#e8f5ef}.day-label{font-size:13px;color:#777f80;font-weight:650;margin:24px 0 12px}.event-row{display:flex;align-items:center;gap:15px;padding:16px 0;border-bottom:1px solid var(--line);text-align:left;width:100%;background:white;color:#17191b;border-left:0;border-right:0;border-top:0}.event-avatar{width:55px;height:55px;border-radius:50%;position:relative;background:#f3f4f4;color:#a4aaaa;display:grid;place-items:center;flex-shrink:0}.event-avatar>svg{width:35px;height:35px;fill:#aeb4b3;stroke:none}.event-badge{position:absolute;right:-2px;bottom:-1px;width:24px;height:24px;border:2px solid white;border-radius:50%;display:grid;place-items:center;background:var(--green);color:white}.event-badge svg{width:12px;height:14px;stroke-width:2}.event-badge.disarmed{background:var(--amber)}.event-badge.alarm{background:#e8675d}.event-copy{flex:1;min-width:0}.event-copy strong{display:block;font-size:14px;font-weight:600;line-height:1.45}.event-copy span{display:block;font-size:12px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.event-row time{font-size:12px;color:#8e9595;align-self:flex-start;margin-top:4px;white-space:nowrap}.empty{color:var(--muted);text-align:center;padding:70px 15px;font-size:14px}.login{display:flex;align-items:center;flex-direction:column;text-align:center;max-width:360px;margin:75px auto 0}.login h2{font-size:30px;letter-spacing:-.6px;margin:28px 0 10px}.login p{font-size:15px;line-height:1.8;color:var(--muted)}dialog{border:0;border-radius:22px;background:white;color:#17191b;box-shadow:0 8px 70px #0002}dialog::backdrop{background:#17251d70;backdrop-filter:blur(3px)}.pin-dialog{width:min(370px,94vw);padding:28px 30px 20px;text-align:center;max-height:95vh}.pin-dialog>.section-icon{margin:2px auto 20px}.pin-dialog h2{font-size:23px;margin:0 0 9px;letter-spacing:-.4px}.pin-dialog>p:not(.pin-error){margin:0;font-size:13px;color:var(--muted);min-height:19px}.dialog-close{position:absolute;right:10px;top:9px;display:grid;place-items:center;min-width:38px;min-height:38px;border:0;background:transparent;color:#8e9693;font-size:29px;font-weight:300}.pin-dots{display:flex;justify-content:center;gap:17px;margin:27px 0 0}.pin-dots i{width:13px;height:13px;border:1.6px solid #b9c2be;border-radius:50%}.pin-dots i.filled{background:var(--green);border-color:var(--green)}.pin-error{font-size:12px;line-height:1.5;color:var(--red);min-height:36px;margin:10px 0 0}.same-pin{display:flex;align-items:center;gap:8px;font-size:11px;color:#737e79;margin:0 0 10px;text-align:left;line-height:1.5}.same-pin input{accent-color:var(--green);width:17px;height:17px}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px 20px}.keypad button{display:grid;place-items:center;font-size:29px;font-weight:400;min-height:58px;min-width:58px;border-radius:50%;background:#f5f7f6;color:#202a25;border:0}.keypad #pin-delete{font-size:23px;background:transparent;color:#748078}.photo-dialog{padding:0;width:min(650px,96vw);max-height:95vh}.photo-dialog img{display:block;width:100%;max-height:80vh;object-fit:contain;background:#121714}.photo-dialog p{font-size:12px;line-height:1.6;padding:2px 16px 9px;color:var(--muted)}.photo-dialog .dialog-close{color:white;background:#1117;border-radius:50%}.toast{position:fixed;z-index:10;bottom:90px;left:50%;transform:translateX(-50%);max-width:90vw;padding:13px 19px;border-radius:12px;background:#192d24;color:white;box-shadow:0 3px 25px #0002;font-size:13px;text-align:center;line-height:1.6}button:focus-visible,input:focus-visible{outline:2px solid var(--green);outline-offset:3px}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:700px){body{padding:35px 0}.app{border:1px solid var(--line);border-radius:24px;padding:0 30px 110px}.header{height:86px}.video-card{border-radius:15px}.navigation{bottom:15px;width:590px;border:1px solid var(--line);border-radius:18px;box-shadow:0 4px 35px #0001}.section-icon{width:65px;height:65px}.section-icon svg{width:32px;height:38px}.section-button{font-size:12px}}@media(max-width:370px){.app{padding-left:16px;padding-right:16px}.sections{gap:5px}.section-icon{width:49px;height:49px}.section-button{min-width:49px;font-size:10px}.header h1{font-size:19px}.pin-dialog{padding:24px}.keypad{gap:8px 17px}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}}

.keypad button{width:64px;height:64px;min-width:64px;min-height:64px;justify-self:center}