:root{--bg:#f5f5f9;--ink:#202333;--muted:#777b8e;--accent:#5865db;--line:#e8e9f0;--good:#279f7a;--surface:#fff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,sans-serif;-webkit-tap-highlight-color:transparent}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a6afff;outline-offset:3px}header{display:flex;align-items:center;justify-content:space-between;padding:24px 22px 12px;max-width:1000px;margin:auto}.brand{display:flex;align-items:center;gap:12px}.brand-icon{width:44px;height:44px;border-radius:15px;background:var(--accent);display:grid;place-items:center;color:#fff}.brand-icon svg{width:25px;height:25px}h1{font-size:23px;letter-spacing:-.7px;margin:0;font-weight:750}header p{font-size:12px;color:var(--muted);margin:2px 0 0}.icon-button{border:0;background:#fff;border-radius:50%;width:42px;height:42px;display:inline-grid;place-items:center;color:#656b80}.icon-button svg,nav svg{width:23px;height:23px}main{padding:12px 20px 104px;max-width:1000px;margin:auto}h2{font-size:25px;letter-spacing:-.7px;margin:8px 0 3px}h3{font-size:17px;margin:0}.description{color:var(--muted);margin:0 0 20px;font-size:13px}.section-head{display:flex;justify-content:space-between;align-items:center;margin:8px 0 18px}.pill{display:inline-flex;align-items:center;gap:6px;background:#e8f5ef;color:#247f62;border-radius:20px;padding:5px 11px;font-size:12px;font-weight:600}.dot{width:6px;height:6px;border-radius:50%;background:currentColor}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.card{background:#fff;border-radius:21px;overflow:hidden;box-shadow:0 5px 20px #252c4d06;border:1px solid #ececf3}.video-wrap{position:relative;aspect-ratio:16/10;background:#161a24;overflow:hidden}.video-wrap camera-player,.video-wrap video{display:block;width:100%;height:100%;object-fit:contain}.live-label{position:absolute;top:11px;left:11px;background:#202537b3;backdrop-filter:blur(8px);color:#fff;font-size:10px;font-weight:700;letter-spacing:.4px;border-radius:8px;padding:4px 8px;pointer-events:none}.live-label.playing{background:#e8f5ef;color:#187555}.card-content{padding:13px 14px}.card-title{display:flex;align-items:center;justify-content:space-between;gap:5px}.card-title h3{font-size:15px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.small{font-size:11px;color:var(--muted)}.text-button{background:none;border:0;color:var(--accent);font-weight:650;padding:10px 0;display:flex;align-items:center;gap:5px}.text-button svg{width:17px;height:17px}.card-actions{display:flex;gap:8px;margin-top:10px}.card-actions button{flex:1;border:0;border-radius:10px;background:#f1f2fa;color:#5b6487;padding:8px 4px;font-size:11px;font-weight:650;min-height:38px}.card-actions button:first-child{background:#eceefe;color:#505dc4}.hint{color:var(--muted);font-size:12px;display:flex;align-items:center;justify-content:center;gap:6px;margin:23px 0}.hint svg{width:15px;height:15px}.toolbar{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 12px}.field{display:flex;flex-direction:column;gap:6px;min-width:0}.field label{font-size:11px;color:var(--muted);font-weight:650}select,input{width:100%;min-height:46px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px 12px;color:var(--ink);min-width:0;color-scheme:light}.segmented{display:flex;background:#e9eaf2;padding:4px;border-radius:13px;margin:12px 0 18px;gap:4px}.segmented button{flex:1;border:0;border-radius:10px;background:none;color:var(--muted);padding:10px 5px;font-size:13px;font-weight:650;min-height:42px}.segmented .selected{background:#fff;color:var(--accent);box-shadow:0 2px 5px #282c4d08}.panel{background:#fff;border:1px solid var(--line);padding:18px;border-radius:20px;margin:16px 0}.panel p{margin:5px 0;color:var(--muted);font-size:13px}.primary{background:var(--accent);color:#fff;border:0;border-radius:13px;min-height:48px;padding:12px 20px;font-weight:650;width:100%}.secondary{background:#eef0fb;color:var(--accent);border:0;border-radius:12px;padding:11px 16px;min-height:44px;font-weight:600}.record-player{background:#151925;border-radius:18px;overflow:hidden;aspect-ratio:16/9;margin-top:17px;position:relative}.record-player video{width:100%;height:100%;object-fit:contain}.record-player .empty{color:#bbc0d1;height:100%;min-height:160px}.timeline{height:18px;position:relative;border-radius:7px;background:#eceef6;margin:20px 0 6px;overflow:hidden}.timeline span{position:absolute;height:100%;background:#8e99ed;min-width:2px}.hours{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.row+.row{margin-top:15px}.setting{padding:17px 0;border-bottom:1px solid var(--line)}.setting:last-child{border:0}.setting-title{font-weight:650;font-size:14px}.setting p{font-size:12px;margin:2px 0 0}.switch{appearance:none;width:46px;min-height:27px;height:27px;border:0;border-radius:20px;background:#d8dbe8;position:relative;margin:0;padding:0;flex-shrink:0}.switch:before{content:'';position:absolute;width:21px;height:21px;background:#fff;border-radius:50%;top:3px;left:3px;box-shadow:0 1px 3px #0002}.switch:checked{background:var(--accent)}.switch:checked:before{left:22px}.event{display:flex;gap:13px;background:#fff;border-radius:17px;border:1px solid var(--line);padding:12px;margin:10px 0;text-align:left;width:100%;color:var(--ink)}.event img{width:90px;height:64px;object-fit:cover;border-radius:10px;background:#e9ebf2}.event-body{flex:1;min-width:0}.event-time{color:var(--accent);font-size:12px;font-weight:700}.event strong{display:block;font-size:14px}.event p{margin:2px 0;font-size:11px;color:var(--muted)}.empty,.loading{display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;padding:35px 18px;color:var(--muted);font-size:14px}.empty svg{width:40px;height:40px;margin-bottom:13px;stroke:#a6acc6}.login{max-width:390px;margin:35px auto}.login .field{margin:14px 0}.error{background:#fff0ed;color:#b45d49;padding:12px 15px;border-radius:12px;font-size:13px;margin:10px 0}.login .brand-icon{width:62px;height:62px;border-radius:21px;margin-bottom:18px}.footer-note{font-size:11px;text-align:center;color:var(--muted);margin-top:15px}nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;background:#ffffffed;backdrop-filter:blur(20px);border-top:1px solid #e9eaf2;padding:8px 12px calc(9px + env(safe-area-inset-bottom));z-index:30}nav button{border:0;background:none;color:#9196aa;font-size:10px;font-weight:600;display:flex;align-items:center;gap:4px;flex-direction:column;width:110px;min-height:52px;border-radius:14px}nav button.active{color:var(--accent)}nav button.active>span{background:#eef0ff;border-radius:10px;padding:3px 16px}nav button>span{padding:3px 16px;height:31px}dialog{border:0;border-radius:25px;padding:24px;width:calc(100% - 28px);max-width:650px;max-height:90vh;color:var(--ink);box-shadow:0 20px 90px #0004}dialog::backdrop{background:#11182788;backdrop-filter:blur(4px)}.sheet-close{float:right;background:#f0f1f7}.sheet-video{margin:20px 0;aspect-ratio:16/9;background:#151925;border-radius:15px;overflow:hidden}.sheet-video camera-player{display:block;height:100%;width:100%}#toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:#22283e;color:#fff;padding:12px 18px;border-radius:14px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90%;z-index:60}#toast.show{opacity:1}.wide{width:100%}a{color:var(--accent)}@media(max-width:400px){main{padding-left:14px;padding-right:14px}header{padding-left:16px;padding-right:16px}.grid{gap:10px}.card{border-radius:17px}.card-content{padding:11px}.card-actions{gap:5px}.card-actions button{font-size:10px}}@media(min-width:700px){header{padding-top:35px}main{padding-top:22px}.grid{gap:22px}.card-content{padding:18px}.card-title h3{font-size:18px}.card-actions button{font-size:13px}nav{left:50%;transform:translateX(-50%);max-width:600px;border-radius:22px 22px 0 0}.video-wrap{aspect-ratio:16/9}}

.pending-camera{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#c1c5d7}.pending-camera svg{width:32px;height:32px;opacity:.6}.pending-camera span{font-size:13px}.pending-camera small{font-size:11px;color:#888fa7}

.card-actions button:disabled{opacity:.38;cursor:default}

/* Four-camera archive and immersive swipe viewer. */
[hidden]{display:none!important}.camera-number{display:inline-grid;place-items:center;flex-shrink:0;border-radius:7px;width:23px;height:23px;background:#f1f2f8;color:#969cb0;font-size:11px;font-weight:650}.tap-camera{cursor:pointer;touch-action:manipulation}.tap-camera video{pointer-events:none}.tap-camera:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}.archive-date{width:170px}.archive-timebar{display:flex;align-items:flex-end;gap:10px;background:white;border:1px solid var(--line);padding:13px;border-radius:17px;margin:0 0 18px}.archive-timebar .field{flex:1}.archive-timebar input{min-height:43px;height:43px}.archive-timebar .primary{width:auto;min-height:43px;padding:10px 20px}.archive-timebar .secondary{width:43px;height:43px;min-height:43px;padding:10px;display:grid;place-items:center}.archive-timebar svg{width:20px;height:20px}.archive-video-wrap{position:relative;aspect-ratio:16/10;background:#151925;overflow:hidden}.archive-video-wrap video{width:100%;height:100%;display:block;object-fit:contain}.recording-empty{height:100%;color:#a7adc2;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;font-size:12px;text-align:center;padding:14px}.recording-empty svg{width:25px;height:25px;opacity:.6}.archive-grid .small{font-size:10px;margin-top:5px}.timeline-row{margin-top:14px}.timeline-row>span{display:block;font-size:11px;color:var(--muted);margin-bottom:5px}.timeline-row .timeline{margin:0;height:13px}.archive-timelines .hours{margin-top:10px}.archive-timelines h3{font-size:15px}.viewer-open{overflow:hidden;overscroll-behavior:none}#camera-viewer{position:fixed;inset:0;z-index:100;background:#080b12;color:#fff;display:flex;flex-direction:column;width:100%;height:100%;height:100dvh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);overscroll-behavior:none}#camera-viewer:fullscreen{width:100vw;height:100vh}.viewer-top{display:flex;align-items:center;gap:12px;flex-shrink:0;padding:14px 18px;z-index:2}.viewer-top>div{flex:1;min-width:0}.viewer-top h2{font-size:18px;letter-spacing:-.3px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.viewer-top p{font-size:11px;color:#9da6bc;margin:3px 0 0}.viewer-top>span{font-size:12px;color:#a7b0c5;border:1px solid #303748;border-radius:10px;padding:6px 10px}.viewer-button{display:inline-grid;place-items:center;width:43px;height:43px;flex-shrink:0;border:1px solid #303748;background:#1a202d;color:#dfe5f4;border-radius:50%}.viewer-button svg{width:22px;height:22px}#viewer-stage{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:pan-y}#viewer-video,#viewer-video camera-player{width:100%;height:100%;display:block}#viewer-video video{width:100%;height:100%;display:block;object-fit:contain}#viewer-video video::-webkit-media-controls-fullscreen-button{display:none}#viewer-swipe{position:absolute;inset:0;z-index:1;touch-action:pan-y;cursor:grab}.archive-viewer #viewer-swipe{bottom:70px}#viewer-swipe:active{cursor:grabbing}#viewer-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;color:#a3adc4}#viewer-empty>svg{width:40px;height:40px;margin-bottom:15px}#viewer-empty h3{color:#edf0fa}#viewer-empty p{font-size:13px;margin:5px 0}.viewer-bottom{flex-shrink:0;padding:12px 22px 17px;background:linear-gradient(#080b12,#101521)}.viewer-navigation{display:flex;justify-content:center;align-items:center;gap:22px}.viewer-navigation .viewer-button{width:42px;height:42px}#viewer-dots{display:flex;gap:9px}#viewer-dots button{width:30px;height:30px;border-radius:50%;border:1px solid #3b4253;background:transparent;color:#9da7bc;font-size:12px;font-weight:600}#viewer-dots button.selected{background:#7681f0;border-color:#7681f0;color:white}.viewer-tools{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px}.viewer-tools button{border:1px solid #303748;background:#1a202d;color:#dce3f3;border-radius:11px;min-height:42px;padding:10px 15px;font-size:12px;display:flex;align-items:center;justify-content:center;gap:8px}.viewer-tools svg{width:18px;height:18px}.swipe-hint{font-size:10px;text-align:center;color:#7f89a0;margin:12px 0 0}@media(max-width:400px){.archive-date{width:143px}.archive-timebar{gap:7px;padding:11px}.archive-timebar .primary{padding:10px 14px}.section-head h2{font-size:23px}.viewer-bottom{padding-left:14px;padding-right:14px}}@media(orientation:landscape){.viewer-top{position:absolute;top:env(safe-area-inset-top);left:0;right:0;background:linear-gradient(#080b12b8,transparent);padding-top:10px}.viewer-bottom{position:absolute;bottom:env(safe-area-inset-bottom);left:0;right:0;background:linear-gradient(transparent,#080b12db);padding:6px 14px 8px;pointer-events:none}.viewer-bottom button{pointer-events:auto}.viewer-navigation{gap:18px}.viewer-tools{position:absolute;right:14px;bottom:12px;margin:0}.swipe-hint{margin:5px 0 0}.viewer-tools button{min-height:34px;padding:7px 10px;font-size:11px}.viewer-navigation .viewer-button{height:34px;width:34px}.archive-viewer #viewer-swipe{bottom:100px}.archive-viewer #viewer-video video{padding-bottom:62px}.archive-grid .archive-video-wrap{aspect-ratio:16/9}}
.event-explanation{font-size:12px;color:var(--muted);margin:0 0 17px;max-width:470px}.event-card{display:block;width:100%;background:white;border:1px solid var(--line);border-radius:21px;overflow:hidden;padding:0;text-align:left;color:var(--ink);margin:16px 0;box-shadow:0 4px 20px #252c4d05}.event-picture{height:190px;position:relative;background:#161b27;overflow:hidden}.event-picture img{display:block;width:100%;height:100%;object-fit:contain}.event-kind{position:absolute;left:13px;top:13px;padding:5px 11px;background:#202537c9;color:#fff;border-radius:9px;font-size:12px;font-weight:650;backdrop-filter:blur(8px)}.event-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:45px;height:45px;border:1px solid #ffffff70;background:#20253777;backdrop-filter:blur(7px);display:grid;place-items:center;border-radius:50%;color:white}.event-play svg{width:21px;height:21px;margin-left:3px}.event-active{position:absolute;bottom:12px;left:12px;background:#e9f8ef;color:#21794f;padding:4px 10px;border-radius:8px;font-size:11px;font-weight:650}.event-details{padding:17px}.event-details h3{font-size:15px}.event-moments{display:flex;align-items:center;justify-content:space-between;background:#f6f7fb;padding:14px;border-radius:13px;margin-top:15px;gap:8px}.event-moments>div{flex:1}.moment-label{display:block;font-size:10px;color:var(--muted)}.event-moments strong{display:block;font-size:20px;font-variant-numeric:tabular-nums;letter-spacing:.2px;margin-top:3px}.moment-arrow{color:#acb1c8;margin:0 5px}.moment-arrow svg{width:18px;height:18px}.event-foot{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);margin-top:14px;gap:10px}.event-foot>span:last-child{display:flex;gap:5px;align-items:center;color:var(--accent);font-weight:650}.event-foot svg{width:15px;height:15px}@media(min-width:700px){#events-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}.event-card{margin:0}.event-picture{height:210px}}

/* Quiet connection state: never expose Android's oversized play placeholder. */
#viewer-video video{opacity:0;transition:opacity .32s ease;background:#080b12}#viewer-video video.video-ready{opacity:1}#viewer-loading{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:radial-gradient(ellipse at center,#183d35 0%,#0c211d 55%,#080b12 100%);pointer-events:none}#viewer-loading strong{font-size:16px;font-weight:550;letter-spacing:-.2px}#viewer-loading>span{font-size:12px;color:#a3b9b1}.loading-lens{width:78px;height:78px;border-radius:26px;display:grid;place-items:center;background:#a9e8c812;border:1px solid #a9e8c830;position:relative;margin-bottom:10px;color:#a9e8c8}.loading-lens svg{width:33px;height:33px}.loading-lens:after{content:"";position:absolute;inset:-8px;border-radius:34px;border:2px solid transparent;border-top-color:#a9e8c8;border-right-color:#a9e8c840;animation:lens-turn 1.8s linear infinite}#viewer-retry{pointer-events:auto;border:1px solid #a9e8c855;border-radius:14px;padding:12px 18px;background:#a9e8c818;color:#e4d6fa;margin-top:10px}@keyframes lens-turn{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.loading-lens:after{animation:none}#viewer-video video{transition:none}}

/* Home previews use the same quiet loading treatment as immersive viewing. */
.video-wrap{background:radial-gradient(ellipse at center,#183d35,#0c211d 70%)}.video-wrap camera-player video{opacity:0;transition:opacity .35s ease}.video-wrap camera-player.stream-ready video{opacity:1}.preview-loading{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:#a9c4b9;pointer-events:none;transition:opacity .3s ease}.preview-loading .loading-lens{width:43px;height:43px;border-radius:15px;margin:0}.preview-loading .loading-lens svg{width:22px;height:22px}.preview-loading .loading-lens:after{inset:-6px;border-radius:21px}.preview-loading>span{font-size:10px;letter-spacing:.15px}.video-wrap.stream-ready .preview-loading{opacity:0;visibility:hidden}.video-wrap:not(.stream-ready) .live-label{visibility:hidden}.video-wrap .live-label{z-index:2}.brand-icon{background:linear-gradient(135deg,#153d36,#102c28);color:#a9e8c8}@media(prefers-reduced-motion:reduce){.video-wrap camera-player video,.preview-loading{transition:none}}

.archive-video-wrap{background:radial-gradient(ellipse at center,#183d35,#0c211d 70%)}.archive-video-wrap video{opacity:0;transition:opacity .35s ease}.archive-video-wrap.record-ready video{opacity:1}.archive-video-wrap.record-ready .preview-loading{opacity:0;visibility:hidden}@media(prefers-reduced-motion:reduce){.archive-video-wrap video{transition:none}}

.app-loading{min-height:42vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;color:#153d36}.app-loading .loading-lens{color:#286b54;background:#e2efe8;border-color:#c9e0d4}.app-loading strong{font-size:16px;font-weight:600}.app-loading>span{font-size:12px;color:#7b8f85}.app-loading .loading-lens svg{width:32px;height:32px}.event-picture{background:radial-gradient(ellipse,#183d35,#0c211d)}.event-picture img{opacity:0;transition:opacity .3s}.event-picture.picture-ready img{opacity:1}.event-picture.picture-ready .preview-loading{display:none}.event-kind,.event-play,.event-active{z-index:2}video::-webkit-media-controls-overlay-play-button{display:none!important}video::-webkit-media-controls-start-playback-button{display:none!important}#viewer-loading{color:#e4f1eb}#viewer-retry{color:#d3efe0}.viewer-dots button.selected{background:#328266}@media(prefers-reduced-motion:reduce){.event-picture img{transition:none}}