/* CSS • style.css • Lume Home • responsive web / Android WebView */
@font-face{font-family:Manrope;src:url('/assets/manrope.woff2') format('woff2');font-display:swap;font-weight:200 800}
:root{color-scheme:dark;--bg:#0c1110;--side:#101613;--panel:#141b17;--panel-raised:#1a231d;--border:#273029;--text:#eef1eb;--muted:#89958c;--accent:#c8f58a;--accent-ink:#1b2c17;--soft:#222e21;--red:#ff9b8c;--shadow:0 24px 80px #0005;--radius:18px;font-family:Manrope,'Segoe UI',sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:13px;line-height:1.6}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:wait;opacity:.5}button,a{touch-action:manipulation}button{border:0;background:none}a{color:inherit;text-decoration:none}svg{width:20px;height:20px;vertical-align:middle;flex-shrink:0}button svg{pointer-events:none}input,select{color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:13px 14px;outline:none;min-width:0}input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #c8f58a12}input::placeholder{color:var(--muted);opacity:.65}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.3;letter-spacing:-.045em;font-weight:650}h1{font-size:32px}h2{font-size:20px}h3{font-size:15px;letter-spacing:-.02em}[hidden]{display:none!important}.muted{color:var(--muted)}.eyebrow{font-size:10px;letter-spacing:.17em;font-weight:650;color:var(--muted)}.brand{display:flex;align-items:center;gap:10px;font-size:32px;font-weight:750;letter-spacing:-2px;line-height:1}.brand img{width:35px;height:35px}.brand-dot{color:var(--accent)}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;flex-shrink:0;box-shadow:0 0 0 3px #c8f58a0a}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--border);border-radius:10px;padding:10px 15px;background:var(--panel-raised);font-size:12px;font-weight:650;white-space:nowrap;transition:background .2s,transform .2s}.button:hover{background:var(--soft);transform:translateY(-1px)}.button svg{width:17px;height:17px}.button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.button.primary:hover{background:#dcffab}.button.subtle{background:transparent}.button.danger{color:var(--red)}.button.small{padding:7px 11px;font-size:11px}.icon-btn{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:9px;flex-shrink:0;color:var(--muted)}.icon-btn:hover{background:var(--panel-raised);color:var(--text)}.text-button{font-size:11px;color:var(--accent);display:inline-flex;align-items:center;gap:7px;padding:5px 0}.text-button svg{width:14px;height:14px}.field{display:flex;flex-direction:column;gap:8px;color:var(--text);font-size:12px;font-weight:550;margin-bottom:18px}.field small{font-size:11px;font-weight:400;color:var(--muted)}.field select,.field input{width:100%;font-weight:400}.form-error{padding:10px;border:1px solid #ff9b8c33;background:#ff9b8c0b;color:var(--red);font-size:12px;border-radius:8px;margin:0 0 16px}.boot{height:100dvh;display:flex;justify-content:center;align-items:center;gap:16px;color:var(--muted)}.boot img{width:40px}.boot span{animation:breathe 1s alternate infinite}@keyframes breathe{to{opacity:.4}}@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* The sign-in screen */
.login-layout{display:grid;grid-template-columns:1.12fr 1fr;min-height:100dvh}.login-story{position:relative;background:#17231b;padding:45px 55px;overflow:hidden;min-height:760px}.login-story:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 40% 70%,#8ba96613,transparent 65%);pointer-events:none}.story-copy{margin-top:90px;position:relative;z-index:1}.story-copy .eyebrow{color:#b6c1a8;font-size:10px}.story-copy h1{font-size:clamp(40px,4.4vw,68px);font-weight:500;line-height:1.12;margin:24px 0;letter-spacing:-.055em}.story-copy h1 em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}.story-copy p{font-size:14px;color:#9cae9f;line-height:1.9}.house-art{position:relative;height:335px;margin-top:-38px;margin-left:60px}.house-art>img{position:absolute;width:550px;max-width:120%;top:-25px;left:50%;transform:translateX(-50%)}.orbit{position:absolute;border:1px solid #c8f58a0e;border-radius:50%;width:380px;height:380px;left:50%;top:-20px;transform:translateX(-50%)}.orbit-two{width:480px;height:480px;top:-70px}.art-label{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;gap:9px;align-items:center;white-space:nowrap;font-size:10px;background:#17231bdd;border:1px solid #c8f58a22;border-radius:30px;padding:9px 15px;color:#bfccb6}.story-foot{display:flex;justify-content:space-between;font-size:10px;color:#82927f;margin-top:48px;position:relative}.story-foot>span:last-child{font-size:9px;letter-spacing:.15em}.login-side{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:70px 40px}.login-box{width:100%;max-width:350px}.tag{display:inline-flex;align-items:center;gap:8px;font-size:9px;letter-spacing:.12em;color:#c5cdbf;border:1px solid var(--border);border-radius:30px;padding:7px 11px;margin-bottom:28px}.login-box h2{font-size:28px;letter-spacing:-.05em}.login-box>p{color:var(--muted);margin:12px 0 35px;font-size:13px}.login-box .field{margin-bottom:22px}.login-box input{height:48px;background:var(--side)}.password-input{position:relative;display:block}.password-input input{padding-right:45px}.password-input button{position:absolute;right:5px;top:6px}.login-submit{width:100%;height:48px;margin-top:8px;justify-content:space-between;padding:0 18px}.login-note{border-top:1px solid var(--border);margin-top:30px;padding-top:24px;display:flex;gap:12px;align-items:center;color:var(--muted);font-size:10px}.login-note svg{width:17px;color:var(--accent)}.login-bottom{position:absolute;bottom:30px;font-size:9px;letter-spacing:.15em;color:var(--muted);display:flex;justify-content:space-between;width:calc(100% - 80px)}.login-bottom>span{letter-spacing:0}
/* App frame */
.app-layout{display:grid;grid-template-columns:234px minmax(0,1fr);min-height:100dvh}.sidebar{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;background:var(--side);border-right:1px solid var(--border);padding:31px 18px 0}.sidebar>.brand{padding-left:12px}.home-switch{margin:38px 0 29px;border:1px solid var(--border);border-radius:12px;display:flex;align-items:center;gap:11px;padding:12px 11px;text-align:left;background:linear-gradient(120deg,#c8f58a06,transparent)}.home-icon{display:grid;place-items:center;background:var(--soft);color:var(--accent);width:33px;height:33px;border-radius:9px}.home-icon svg{width:17px}.home-switch>span:nth-child(2){flex:1;min-width:0}.home-switch strong{font-size:12px;display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:114px}.home-switch small{font-size:9px;color:var(--muted);display:block}.home-switch>span:last-child svg{width:13px;color:var(--muted)}.nav-label{font-size:9px;letter-spacing:.14em;color:#647367;padding:0 13px;margin-bottom:12px}.navigation{display:flex;flex-direction:column;gap:6px}.nav-item{display:flex;align-items:center;gap:11px;padding:11px 13px;width:100%;text-align:left;color:var(--muted);border-radius:9px;font-size:12px;font-weight:500;transition:.15s}.nav-item svg{width:18px;height:18px}.nav-item:hover{color:var(--text);background:#c8f58a05}.nav-item.active{background:var(--soft);color:var(--accent)}.nav-item i{width:5px;height:5px;background:var(--accent);border-radius:50%;margin-left:auto;display:none}.nav-item.active i{display:block}.nav-item small{font-size:10px;margin-left:auto;background:#ffffff08;min-width:19px;text-align:center;border-radius:4px}.sidebar-spacer{flex:1;min-height:40px}.sidebar-note{padding:18px 13px 25px}.note-icon{display:grid;place-items:center;width:32px;height:32px;border:1px solid #c8f58a22;border-radius:50%;color:var(--accent);margin-bottom:14px}.note-icon svg{width:16px;height:16px}.sidebar-note strong{display:block;font-size:11px;font-weight:550}.sidebar-note p{font-size:10px;color:var(--muted);margin:7px 0 15px;line-height:1.9}.little-line{display:block;width:26px;height:2px;background:var(--accent)}.settings-nav{margin-bottom:19px}.sidebar-profile{margin:0 -18px;padding:20px 18px;display:flex;gap:9px;align-items:center;border-top:1px solid var(--border)}.avatar{height:33px;width:33px;border-radius:50%;background:#bfb6a3;color:#2b3026;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:750;flex-shrink:0}.avatar.small{height:30px;width:30px;font-size:11px}.sidebar-profile>span:nth-child(2){flex:1;min-width:0}.sidebar-profile strong{display:block;font-size:11px;max-width:110px;overflow:hidden;text-overflow:ellipsis}.sidebar-profile small{font-size:8px;color:var(--muted)}.sidebar-profile .icon-btn{width:27px}.sidebar-profile svg{width:16px}.main-shell{min-width:0;display:flex;flex-direction:column}.topbar{height:77px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding:0 35px;gap:16px}.breadcrumb{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--muted)}.breadcrumb svg{width:15px;height:15px}.breadcrumb strong{color:var(--text);font-weight:500}.crumb-separator{color:#4b574d}.topbar-actions{display:flex;align-items:center;gap:12px}.system-badge{font-size:10px;display:flex;align-items:center;gap:7px;color:#b4c1ae}.system-badge.offline{color:var(--muted)}.system-badge.offline .status-dot{background:#8a938a}.top-divider{height:20px;width:1px;background:var(--border);margin:0 4px}.topbar-actions .icon-btn{width:25px}.topbar-actions svg{width:17px;height:17px}main{padding:34px 35px 20px;flex:1;outline:none;max-width:1700px;width:100%;margin:auto;animation:enter .35s ease}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:28px}.page-heading .eyebrow{font-size:9px;letter-spacing:.15em;display:block;margin-bottom:7px}.page-heading h1{font-size:29px}.page-heading p{color:var(--muted);font-size:12px;margin-top:9px}.heading-actions{display:flex;align-items:center;gap:10px}.date-chip{display:flex;gap:8px;align-items:center;border:1px solid var(--border);border-radius:9px;color:var(--muted);padding:10px 12px;font-size:10px}.date-chip svg{width:14px;height:14px}.app-footer{padding:18px 35px 23px;display:flex;justify-content:space-between;color:var(--muted);font-size:9px;gap:15px}.app-footer .status-dot{width:4px;height:4px;margin-right:7px}.app-footer>span:last-child{font-size:9px}.mobile-nav{display:none}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:30px}.stat-card{border:1px solid var(--border);background:var(--panel);border-radius:var(--radius);padding:18px 20px;position:relative;overflow:hidden}.stat-top{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px}.stat-icon{width:30px;height:30px;border-radius:8px;background:var(--soft);display:grid;place-items:center;color:#b1c0a6}.stat-icon svg{width:16px;height:16px}.stat-value{margin-top:8px;display:flex;align-items:baseline;gap:7px}.stat-value strong{font-size:30px;font-weight:550;letter-spacing:-.06em;line-height:1.4}.stat-value>span{font-size:11px;color:var(--muted)}.stat-foot{font-size:9px;color:var(--muted);margin-top:7px;display:flex;align-items:center;gap:6px}.stat-foot .status-dot{width:4px;height:4px}.stat-lines{position:absolute;bottom:20px;right:20px;display:flex;align-items:flex-end;gap:3px;height:22px;opacity:.4}.stat-lines i{width:4px;border-radius:1px;background:var(--accent)}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px;gap:12px}.section-header h2{font-size:16px;letter-spacing:-.025em}.section-header h2>span{font-size:10px;color:var(--muted);font-weight:400;margin-left:8px;letter-spacing:0}.segmented{display:flex;gap:2px;background:var(--panel);padding:3px;border:1px solid var(--border);border-radius:8px}.segmented button{padding:5px 8px;color:var(--muted);font-size:10px;display:flex;align-items:center;gap:6px;border-radius:5px}.segmented button svg{width:13px;height:13px}.segmented button.active{background:var(--panel-raised);color:var(--text)}.dashboard-columns{display:grid;grid-template-columns:minmax(0,1fr) 286px;gap:22px}.camera-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--panel)}.camera-stage{aspect-ratio:16/9;position:relative;overflow:hidden;background:#090e0b;isolation:isolate}.camera-stage video,.camera-stage>img{position:absolute;width:100%;height:100%;object-fit:contain;inset:0;transition:transform .2s}.camera-stage:fullscreen{height:100dvh;aspect-ratio:auto}.stage-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:11px;background:radial-gradient(ellipse at 50% 100%,#2e4030aa,transparent 75%),repeating-linear-gradient(0deg,transparent,transparent 39px,#c8f58a03 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,#c8f58a03 40px);z-index:1;text-align:center;padding:20px}.stage-placeholder svg{width:35px;height:35px;color:#71866a}.stage-placeholder strong{font-size:13px;font-weight:500;color:#bdcbb4}.stage-placeholder small{font-size:10px;color:#6e8068;max-width:270px}.camera-overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,#0006,transparent 30%,transparent 60%,#0008);pointer-events:none}.camera-top{position:absolute;top:17px;left:17px;right:17px;display:flex;align-items:center;justify-content:space-between;z-index:3}.live-tag{font-size:8px;letter-spacing:.08em;display:flex;align-items:center;gap:6px;color:#eee;background:#141c17bb;backdrop-filter:blur(10px);padding:5px 8px;border:1px solid #ffffff15;border-radius:5px}.live-tag .status-dot{width:5px;height:5px}.live-tag.offline .status-dot{background:#89958c}.stage-tools{display:flex;gap:5px}.stage-tools .icon-btn{width:27px;height:27px;background:#141c1799;backdrop-filter:blur(8px);color:#d1d9ce;border:1px solid #ffffff12}.stage-tools svg{width:14px;height:14px}.camera-bottom{position:absolute;bottom:17px;left:17px;right:17px;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;color:#fff}.camera-bottom strong{font-size:12px;display:block;font-weight:550}.camera-bottom small{font-size:8px;color:#ffffff88;display:block;margin-top:2px}.camera-bottom .frame-time{font-family:monospace;font-size:10px;letter-spacing:.07em;background:#0003;border-radius:4px;padding:3px 5px}.camera-card-footer{padding:14px 17px;display:flex;align-items:center;justify-content:space-between;gap:12px}.camera-description{display:flex;gap:10px;align-items:center}.camera-description .stat-icon{width:29px;height:29px}.camera-description strong{font-size:11px;font-weight:550;display:block}.camera-description small{font-size:9px;color:var(--muted);display:flex;gap:5px;align-items:center}.camera-description small svg{width:11px;height:11px}.quality-chip{font-size:8px;color:var(--muted);border:1px solid var(--border);border-radius:5px;padding:3px 6px;white-space:nowrap}.quick-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.quick-actions .button{font-size:10px;padding:8px 11px;flex:1}.quick-actions .button svg{width:14px;height:14px}.quick-actions .recording{color:var(--red);border-color:#ff9b8c66}.overview-bottom{margin-top:24px;border:1px solid var(--border);border-radius:14px;padding:17px 19px;display:flex;align-items:center;gap:15px;background:linear-gradient(90deg,#c8f58a07,transparent)}.overview-bottom>.note-icon{margin:0;flex-shrink:0}.overview-bottom>div{flex:1}.overview-bottom strong{font-size:11px;font-weight:550}.overview-bottom p{font-size:10px;color:var(--muted);margin-top:4px}.overview-bottom .button{flex-shrink:0}.right-stack{display:flex;flex-direction:column;gap:18px}.panel{border:1px solid var(--border);background:var(--panel);border-radius:var(--radius);padding:18px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px}.panel-head h3{font-size:12px;letter-spacing:-.015em}.panel-head>span{font-size:8px;color:var(--muted);border:1px solid var(--border);border-radius:4px;padding:2px 5px}.ptz-content{text-align:center}.ptz-content>p{font-size:10px;color:var(--muted);margin-bottom:16px}.ptz-pad{display:grid;grid-template-columns:repeat(3,38px);grid-template-rows:repeat(3,38px);gap:4px;width:max-content;margin:auto;background:var(--bg);border:1px solid var(--border);padding:9px;border-radius:50%}.ptz-pad button{display:grid;place-items:center;color:var(--muted);border-radius:10px;touch-action:none;user-select:none}.ptz-pad button:hover,.ptz-pad button.pressed{color:var(--accent);background:var(--soft)}.ptz-pad button svg{width:16px;height:16px}.ptz-up{grid-area:1/2}.ptz-left{grid-area:2/1}.ptz-stop{grid-area:2/2;background:var(--soft);border-radius:50%!important;color:var(--accent)!important}.ptz-right{grid-area:2/3}.ptz-down{grid-area:3/2}.ptz-speed{display:flex;gap:10px;align-items:center;margin-top:19px;color:var(--muted);font-size:9px}.ptz-speed input{width:100%;accent-color:var(--accent);padding:0;height:15px;box-shadow:none}.ptz-hint{border-top:1px solid var(--border);font-size:8px;color:var(--muted);margin-top:15px;padding-top:11px;text-align:center}.event-mini{display:flex;gap:10px;position:relative;padding:0 0 19px}.event-mini:last-child{padding-bottom:0}.event-mini:not(:last-child):before{content:'';position:absolute;left:13px;top:30px;bottom:5px;width:1px;background:var(--border)}.event-icon{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;background:var(--soft);color:#b2c2a4}.event-icon svg{width:13px;height:13px}.event-mini strong{display:block;font-size:10px;font-weight:500;line-height:1.5}.event-mini p{font-size:9px;color:var(--muted);max-width:200px;overflow-wrap:anywhere}.event-mini time{font-size:8px;color:#73816f}.panel-link{display:flex;align-items:center;justify-content:space-between;width:100%;border-top:1px solid var(--border);margin-top:17px;padding-top:12px;color:var(--muted);font-size:9px}.panel-link svg{width:13px;height:13px}.empty-mini{text-align:center;color:var(--muted);font-size:11px;padding:16px 0}.empty-mini svg{display:block;margin:0 auto 12px;color:var(--accent)}
/* Camera list, activity and saved media */
.toolbar{display:flex;justify-content:space-between;gap:12px;margin-bottom:24px;align-items:center}.search-box{position:relative;display:flex;align-items:center;flex:1;max-width:330px}.search-box>svg{position:absolute;left:13px;width:16px;color:var(--muted)}.search-box input{padding-left:39px;width:100%;font-size:11px;background:var(--panel)}.filters{display:flex;gap:7px;flex-wrap:wrap}.filter{font-size:10px;padding:7px 12px;border:1px solid var(--border);border-radius:8px;color:var(--muted)}.filter.active{background:var(--soft);color:var(--accent);border-color:#c8f58a33}.camera-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.camera-grid.single{grid-template-columns:1fr;max-width:1050px}.camera-item{min-width:0}.add-camera-card{border:1px dashed #506047;min-height:240px;border-radius:18px;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--muted);gap:12px;transition:.2s;background:#c8f58a02}.add-camera-card:hover{border-color:var(--accent);background:#c8f58a06}.add-camera-card>span{width:43px;height:43px;border:1px solid var(--border);border-radius:50%;display:grid;place-items:center;color:var(--accent)}.add-camera-card strong{font-size:12px;color:var(--text);font-weight:500}.add-camera-card small{font-size:10px}.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;min-height:300px;justify-content:center;padding:40px;border:1px dashed var(--border);border-radius:18px;background:radial-gradient(ellipse at 50% 0,#c8f58a05,transparent 70%)}.empty-state>span{display:grid;place-items:center;width:57px;height:57px;background:var(--soft);border-radius:18px;color:var(--accent);margin-bottom:20px}.empty-state>span svg{width:25px;height:25px}.empty-state h2{font-size:18px}.empty-state p{color:var(--muted);font-size:12px;max-width:360px;margin:11px 0 20px}.timeline{border:1px solid var(--border);background:var(--panel);border-radius:18px;overflow:hidden}.timeline-group{padding:15px 22px;background:#c8f58a03;border-bottom:1px solid var(--border);font-size:10px;color:var(--muted)}.timeline-row{display:flex;align-items:center;gap:16px;padding:19px 22px;border-bottom:1px solid var(--border)}.timeline-row:last-child{border:0}.timeline-row>.event-icon{width:34px;height:34px;border-radius:10px}.timeline-row>.event-icon svg{width:16px;height:16px}.timeline-row>div:nth-child(2){flex:1}.timeline-row strong{font-weight:550;font-size:12px}.timeline-row p{font-size:10px;color:var(--muted);margin-top:3px}.timeline-row time{font-size:10px;color:var(--muted);flex-shrink:0}.library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}.media-card{border:1px solid var(--border);border-radius:15px;overflow:hidden;background:var(--panel)}.media-preview{display:block;width:100%;aspect-ratio:16/10;background:var(--bg);position:relative;overflow:hidden;padding:0}.media-preview img,.media-preview video{width:100%;height:100%;object-fit:cover}.media-preview>.video-symbol{position:absolute;inset:0;display:grid;place-items:center;color:var(--accent);background:radial-gradient(ellipse,#45614155,transparent)}.video-symbol svg{width:36px;height:36px}.media-kind{position:absolute;left:12px;top:12px;background:#0c1110cc;border:1px solid #ffffff11;border-radius:5px;padding:3px 6px;font-size:8px;color:#fff}.media-info{padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:10px}.media-info strong{font-size:11px;display:block;font-weight:500}.media-info small{color:var(--muted);font-size:9px}.media-info svg{width:15px;height:15px}.media-full{width:100%;max-height:65dvh;object-fit:contain;border-radius:10px;background:#000}.media-modal-foot{margin-top:18px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted)}
/* Preferences */
.settings-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.8fr);gap:22px}.settings-stack{display:flex;flex-direction:column;gap:20px}.settings-panel{border:1px solid var(--border);border-radius:18px;background:var(--panel);padding:23px}.settings-title{display:flex;align-items:center;gap:12px;margin-bottom:24px}.settings-title>span{display:grid;place-items:center;border-radius:10px;width:35px;height:35px;background:var(--soft);color:var(--accent)}.settings-title svg{width:17px;height:17px}.settings-title h2{font-size:14px;letter-spacing:-.02em}.settings-title p{color:var(--muted);font-size:10px;margin-top:4px}.settings-panel .field{font-size:11px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 0;border-top:1px solid var(--border)}.settings-row:last-child{padding-bottom:0}.settings-row strong{font-size:11px;font-weight:500}.settings-row p{font-size:10px;color:var(--muted);margin-top:4px;max-width:300px}.settings-row select{font-size:10px;padding:7px 10px}.switch{width:37px;height:22px;position:relative;border-radius:20px;background:var(--border);flex-shrink:0;border:1px solid #ffffff08}.switch:after{content:'';position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:.2s}.switch.on{background:var(--accent);border-color:var(--accent)}.switch.on:after{left:18px;background:var(--accent-ink)}.connection-box{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:13px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}.connection-box code{font-size:10px;word-break:break-all;color:var(--accent)}.connection-box .icon-btn{width:28px;height:28px}.connection-box svg{width:14px}.about-logo{display:flex;align-items:center;gap:15px;margin:10px 0 20px}.about-logo img{width:50px;height:50px}.about-logo h2{font-size:23px}.about-logo p{font-size:10px;color:var(--muted)}.spec-row{display:flex;justify-content:space-between;padding:10px 0;font-size:10px;border-top:1px solid var(--border);gap:12px}.spec-row>span:first-child{color:var(--muted)}.info-note{padding:12px;border:1px solid #c8f58a1a;border-radius:9px;color:var(--muted);font-size:10px;background:#c8f58a04;margin-top:18px}.info-note strong{color:var(--text);font-weight:500}.settings-panel .button{font-size:10px}.settings-panel .field input{font-size:12px}.camera-edit-row{display:flex;align-items:center;gap:11px;padding:13px 0;border-top:1px solid var(--border)}.camera-edit-row>.stat-icon{flex-shrink:0}.camera-edit-row>div{flex:1}.camera-edit-row strong{font-size:11px;font-weight:500}.camera-edit-row small{font-size:9px;color:var(--muted);display:block}.camera-edit-row .icon-btn svg{width:15px}.native-only{margin-top:14px}.paused-banner{display:flex;align-items:center;gap:14px;padding:15px 19px;border:1px solid #c8f58a33;border-radius:12px;margin-bottom:23px;background:var(--soft)}.paused-banner svg{color:var(--accent)}.paused-banner>div{flex:1}.paused-banner strong{font-size:12px}.paused-banner p{font-size:10px;color:var(--muted)}
/* Dialogs and feedback */
dialog{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:20px;padding:27px;width:min(560px,calc(100% - 32px));box-shadow:var(--shadow);max-height:90dvh;overflow:auto}dialog::backdrop{background:#040805bb;backdrop-filter:blur(8px)}dialog[open]{animation:enter .2s ease}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:27px}.modal-head h2{margin-top:8px;font-size:22px}.modal-head .eyebrow{font-size:8px}.modal-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:10px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.checkbox-field{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:11px;margin-bottom:20px}.checkbox-field input{accent-color:var(--accent);width:16px;height:16px}.toast-region{position:fixed;bottom:24px;right:25px;display:flex;flex-direction:column;gap:9px;z-index:30;pointer-events:none;max-width:min(380px,calc(100% - 30px))}.toast{background:var(--panel-raised);border:1px solid #c8f58a33;border-radius:12px;box-shadow:var(--shadow);padding:13px 17px;display:flex;gap:11px;align-items:center;font-size:11px;animation:enter .2s}.toast svg{color:var(--accent);width:17px;height:17px;flex-shrink:0}.toast.error{border-color:#ff9b8c55}.toast.error svg{color:var(--red)}.loading-label{padding:50px;color:var(--muted);text-align:center}.no-results{color:var(--muted);text-align:center;padding:40px;grid-column:1/-1}
/* Daylight palette */
:root[data-theme=light]{color-scheme:light;--bg:#f5f6f0;--side:#eeefe8;--panel:#fdfef9;--panel-raised:#e9eee2;--border:#dfe4d8;--text:#202d22;--muted:#74816f;--accent:#b8e77a;--accent-ink:#213417;--soft:#e3ecd7;--red:#bb4839;--shadow:0 24px 80px #29402120}:root[data-theme=light] .login-story{color:#eef1eb}:root[data-theme=light] .brand-dot{color:#81a64e}:root[data-theme=light] .login-story .brand-dot{color:#c8f58a}:root[data-theme=light] .system-badge{color:#526a42}:root[data-theme=light] .text-button{color:#537b30}:root[data-theme=light] .connection-box code{color:#537b30}:root[data-theme=light] .sidebar-note .note-icon{color:#537b30}:root[data-theme=light] .ptz-stop{color:#537b30!important}:root[data-theme=light] .nav-item.active{color:#476727}
@media(min-width:1550px){main{padding:40px 48px 25px}.dashboard-columns{grid-template-columns:minmax(0,1fr) 330px;gap:26px}.camera-stage{aspect-ratio:16/9}.stat-card{padding:22px 25px}.right-stack{gap:23px}.panel{padding:22px}.ptz-pad{grid-template-columns:repeat(3,45px);grid-template-rows:repeat(3,45px)}}
@media(max-width:1200px){.app-layout{grid-template-columns:205px minmax(0,1fr)}.sidebar{padding-left:13px;padding-right:13px}.sidebar-profile{margin:0 -13px;padding:18px 13px}.topbar{padding:0 25px}main{padding:28px 25px 20px}.dashboard-columns{grid-template-columns:minmax(0,1fr) 245px;gap:17px}.stat-card{padding:15px}.stat-value strong{font-size:26px}.stat-lines{display:none}.date-chip{display:none}.settings-layout{grid-template-columns:minmax(0,1fr) minmax(255px,.85fr)}.library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-heading h1{font-size:27px}.panel{padding:16px}.house-art{margin-left:0}}
@media(max-width:980px){.app-layout{grid-template-columns:184px minmax(0,1fr)}.sidebar{padding-left:10px;padding-right:10px}.sidebar-profile{margin:0 -10px;padding:18px 10px}.sidebar-profile small{font-size:7px}.sidebar-profile .icon-btn{width:23px}.home-switch{gap:7px;padding:10px 8px}.home-switch strong{max-width:94px;font-size:11px}.home-switch small{font-size:8px}.dashboard-columns{grid-template-columns:1fr}.right-stack{display:grid;grid-template-columns:1fr 1fr;align-items:start}.page-heading{align-items:flex-start}.heading-actions .button{font-size:10px;padding:9px 11px}.stat-card{padding:14px}.stat-top{font-size:9px}.stat-icon{width:25px;height:25px}.stat-foot{font-size:8px}.settings-layout{grid-template-columns:1fr}.camera-grid{grid-template-columns:1fr}.login-story{padding:40px 35px}.story-copy{margin-top:80px}.story-copy h1{font-size:47px}.house-art{margin-top:0}.house-art>img{width:480px}.story-foot>span:last-child{display:none}.login-side{padding:60px 30px}.login-box h2{font-size:24px}}
@media(max-width:700px){.login-layout{display:block;min-height:100dvh}.login-story{min-height:0;padding:28px 26px 35px;background:#17231b}.login-story .brand{font-size:28px}.login-story .brand img{width:30px;height:30px}.story-copy{margin-top:30px}.story-copy .eyebrow{font-size:8px}.story-copy h1{font-size:39px;margin:15px 0 0}.story-copy h1 br{display:none}.story-copy p,.house-art,.story-foot{display:none}.login-side{padding:38px 26px 85px;min-height:480px}.login-box{max-width:430px}.login-box .tag{display:none}.login-box h2{font-size:25px}.login-box>p{font-size:12px;margin:10px 0 26px}.login-bottom{bottom:24px;width:calc(100% - 52px);font-size:8px}.app-layout{display:block}.sidebar{display:none}.main-shell{min-height:100dvh;padding-bottom:78px}.topbar{padding:0 21px;height:67px;background:var(--side)}.breadcrumb{gap:9px;font-size:11px}.breadcrumb>svg{color:var(--accent);width:17px;height:17px}.breadcrumb .crumb-separator,.breadcrumb strong{display:none}.breadcrumb>span:nth-child(2){font-size:13px;color:var(--text);font-weight:550}.topbar-actions{gap:13px}.topbar-actions>.top-divider,.topbar-actions>.avatar{display:none}.system-badge{font-size:8px}.topbar-actions .icon-btn{width:22px}.topbar-actions svg{width:17px;height:17px}main{padding:26px 20px 16px}.page-heading{gap:10px;margin-bottom:23px;align-items:flex-start}.page-heading h1{font-size:25px}.page-heading .eyebrow{font-size:8px;margin-bottom:7px}.page-heading p{font-size:10px;line-height:1.8;margin-top:7px}.heading-actions .button{font-size:0;gap:0;width:36px;height:36px;border-radius:11px;padding:9px}.heading-actions .button svg{width:17px;height:17px}.stat-grid{gap:9px;margin-bottom:26px}.stat-card{padding:13px 11px;border-radius:13px}.stat-top{font-size:9px;gap:4px;align-items:flex-start;min-height:32px}.stat-top .stat-icon{width:21px;height:21px;border-radius:6px}.stat-top .stat-icon svg{width:12px;height:12px}.stat-value{margin-top:4px;gap:4px;flex-wrap:wrap}.stat-value strong{font-size:26px}.stat-value>span{font-size:8px}.stat-foot{font-size:7px;margin-top:5px;gap:4px}.stat-foot .status-dot{width:3px;height:3px}.section-header h2{font-size:14px}.section-header h2>span{font-size:9px}.segmented button{font-size:0;gap:0;padding:5px 7px}.segmented button svg{width:13px;height:13px}.dashboard-columns{gap:22px}.camera-card{border-radius:14px}.camera-top{top:12px;left:12px;right:12px}.camera-bottom{bottom:12px;left:12px;right:12px}.camera-bottom strong{font-size:11px}.camera-bottom .frame-time{font-size:8px}.camera-card-footer{padding:12px}.camera-description strong{font-size:10px}.camera-description small{font-size:8px}.quality-chip{font-size:7px}.quick-actions{gap:7px;margin-top:10px}.quick-actions .button{padding:9px 8px;font-size:9px;gap:6px;min-height:37px}.quick-actions .button svg{width:13px;height:13px}.overview-bottom{margin-top:18px;padding:14px;gap:10px}.overview-bottom strong{font-size:10px}.overview-bottom p{font-size:8px}.overview-bottom>.note-icon{width:28px;height:28px}.overview-bottom .button{font-size:8px;padding:7px 8px}.overview-bottom .button svg{display:none}.right-stack{gap:12px}.panel{border-radius:14px;padding:14px}.panel-head{margin-bottom:14px}.panel-head h3{font-size:10px}.panel-head>span{font-size:7px}.ptz-content>p{font-size:8px}.ptz-pad{grid-template-columns:repeat(3,31px);grid-template-rows:repeat(3,31px);gap:2px;padding:7px}.ptz-speed{font-size:8px;gap:5px}.ptz-hint{font-size:7px;margin-top:12px}.event-mini{gap:7px;padding-bottom:16px}.event-icon{width:23px;height:23px;border-radius:7px}.event-icon svg{width:11px;height:11px}.event-mini:not(:last-child):before{left:11px}.event-mini strong{font-size:9px}.event-mini p,.event-mini time{font-size:7px}.panel-link{font-size:8px}.mobile-nav{position:fixed;display:flex;z-index:10;bottom:0;left:0;right:0;justify-content:space-around;background:var(--side);border-top:1px solid var(--border);padding:10px 7px calc(12px + env(safe-area-inset-bottom))}.mobile-nav button{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--muted);font-size:8px;min-width:54px;min-height:44px;border-radius:9px;padding:5px}.mobile-nav button.active{color:var(--accent);background:#c8f58a08}.mobile-nav svg{width:19px;height:19px}.app-footer{padding:14px 20px;font-size:8px}.app-footer .muted{display:none}.app-footer>span:last-child{font-size:7px}.toolbar{align-items:flex-start;flex-direction:column;gap:13px;margin-bottom:20px}.search-box{max-width:none;width:100%}.filters{gap:6px}.filter{font-size:9px;padding:6px 10px}.library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.media-info{padding:10px;gap:5px}.media-info strong{font-size:9px}.media-info small{font-size:7px}.media-info .icon-btn{width:23px;height:27px}.media-kind{font-size:7px;top:8px;left:8px}.timeline-row{padding:16px 13px;gap:10px}.timeline-row strong{font-size:10px}.timeline-row p{font-size:9px}.timeline-row time{font-size:8px}.timeline-row>.event-icon{width:29px;height:29px;align-self:flex-start}.timeline-group{font-size:9px;padding:13px}.settings-panel{padding:19px;border-radius:14px}.settings-title h2{font-size:13px}.settings-title p{font-size:9px}.settings-row strong{font-size:10px}.settings-row p{font-size:9px}.settings-layout{gap:17px}.settings-stack{gap:17px}.settings-panel .field input{font-size:12px}.toast-region{bottom:100px;right:15px}.toast{font-size:10px}.empty-state{padding:30px 20px;min-height:290px}.empty-state h2{font-size:16px}.empty-state p{font-size:11px}.paused-banner{padding:12px;gap:10px}.paused-banner strong{font-size:10px}.paused-banner p{font-size:8px}.paused-banner .button{font-size:8px;padding:7px 9px}.field-grid{gap:12px}.modal-head h2{font-size:20px}dialog{padding:22px}.add-camera-card{min-height:190px}.stage-placeholder strong{font-size:11px}.stage-placeholder small{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.family-view [data-action="add-camera"], .family-view [data-action="favorite"], .family-view [data-action="resume"] { display:none!important; }
.family-view .add-camera-card { display:none!important; }

.no-capture [data-action="capture"], .no-record [data-action="record"], .no-ptz [data-action="control"], .remote-video [data-action="sound"] { display:none!important; }