:root{color-scheme:dark;--bg:#111513;--panel:#1b211d;--line:#333d35;--text:#f0f3ed;--muted:#a5b2a8;--accent:#d4ee9b;--radius:20px;font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text)}
button,input,a{-webkit-tap-highlight-color:transparent}
button,input{font:inherit}
button,a,summary{touch-action:manipulation}
button{min-height:44px;border:1px solid transparent;border-radius:12px;padding:10px 16px;background:var(--panel);color:var(--text);font-weight:600;cursor:pointer}
button:disabled{opacity:.42;cursor:default}
button:not(:disabled):hover{filter:brightness(1.13)}
a{color:var(--accent);text-decoration:none}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
h1,h2,p{margin:0}
h1{font-size:36px;letter-spacing:-1.3px;font-weight:650;line-height:1.15}
h2{font-size:20px;font-weight:600;letter-spacing:-.4px}
h1:focus{outline:none}
.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icon-defs{position:absolute;width:0;height:0;overflow:hidden}
.app-shell{max-width:1200px;margin:auto;padding:0 40px 110px}
.app-header{height:100px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);font-size:20px;font-weight:650;letter-spacing:-.6px}
.brand-light{font-weight:400;color:var(--muted)}
.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--accent);color:var(--bg)}
.badge{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:12px;padding:6px 11px;border:1px solid var(--line);border-radius:30px;color:var(--muted)}
.badge[data-state=live]{color:var(--accent);border-color:#506641}
.badge[data-state=live]:before{content:"";width:6px;height:6px;background:var(--accent);border-radius:50%}
.page-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:32px 0 24px}
.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:650;color:var(--muted);margin-bottom:8px}
.local-tag{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}
.local-tag .icon{width:16px;height:16px}
.live-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);gap:24px;align-items:start}
.watch-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.video-stage{position:relative;aspect-ratio:16/9;background:#0a0d0b;display:grid;place-items:center}
video{display:block;width:100%;max-height:100%;background:#0a0d0b}
.video-stage video{width:100%;height:100%;object-fit:contain;position:absolute;inset:0}
.video-placeholder{display:flex;align-items:center;flex-direction:column;gap:8px;padding:24px;text-align:center;color:var(--muted)}
.video-placeholder .icon{height:36px;width:36px;margin-bottom:8px;opacity:.65}
.video-placeholder strong{color:var(--text);font-size:16px}
.video-placeholder span{font-size:12px}
.player-panel{padding:16px 20px 12px}
.player-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.player-top p{font-size:12px;color:var(--muted)}
.live-jump{background:transparent;color:var(--accent);white-space:nowrap;padding:8px 0 8px 10px;font-size:12px}
.live-jump span{margin-left:8px}
#live-position{display:block;width:100%;height:28px;margin:4px 0 0;accent-color:var(--accent);cursor:pointer}
.timeline-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.playback-controls{display:flex;gap:8px;margin-top:12px;border-top:1px solid var(--line);padding-top:8px}
.playback-controls button{flex:1;background:transparent;font-size:12px;padding:8px;white-space:nowrap}
.camera-panel{padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.camera-state{display:flex;align-items:center;justify-content:space-between}
.state-dot{width:10px;height:10px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 6px #ffffff06}
.state-dot[data-state=live]{background:var(--accent)}
.camera-state .eyebrow{margin-bottom:3px}
.subtle{color:var(--muted);font-size:13px;line-height:1.65}
#status{margin:12px 0 18px;min-height:42px}
.camera-power{width:100%;background:var(--accent);color:#172012;min-height:48px}
.capture-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.capture-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px 10px;min-height:104px;border-color:var(--line);font-size:12px;line-height:1.35;text-align:center}
.capture-button:before{content:"";height:22px;width:22px;flex-shrink:0}
#archive-toggle:before{border:2px solid #e8a799;border-radius:50%;box-shadow:inset 0 0 0 5px var(--panel);background:#e8a799}
#archive-toggle[data-recording=true]:before{border-radius:5px;background:#e8a799;box-shadow:none;width:17px;height:17px;margin:2.5px}
#snapshot:before{border:2px solid var(--accent);border-radius:6px;background:radial-gradient(circle,transparent 4px,var(--accent) 4px,var(--accent) 5.5px,transparent 5.5px)}
.buffer-note{display:flex;align-items:flex-start;gap:10px;margin:18px 0;color:var(--muted);font-size:12px}
.buffer-note .icon{width:17px;height:17px;margin-top:2px}
.automation-link{display:flex;gap:12px;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:16px;font-size:12px}
.automation-link p{color:var(--text);margin-top:3px}
.automation-link .eyebrow{font-size:9px;letter-spacing:1.1px}
.automation-link a{font-size:12px;white-space:nowrap}
.privacy-note{color:var(--muted);font-size:12px;margin-top:20px}
.app-nav{position:fixed;z-index:10;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:6px;padding:6px;background:#242d26f5;border:1px solid #435046;border-radius:20px;box-shadow:0 12px 40px #0005;backdrop-filter:blur(20px)}
.app-nav a{display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 25px;border-radius:14px;color:var(--muted);font-size:13px;font-weight:600}
.app-nav a[aria-current=page]{background:var(--accent);color:#182211}
.app-nav .icon{height:19px;width:19px}
.alert:empty,.feedback:empty{display:none}
.alert{padding:14px 16px;background:#35231f;border:1px solid #754a40;border-radius:12px;color:#ffc6b7;margin-top:18px;font-size:14px;overflow-wrap:anywhere}
.feedback{padding:12px 16px;background:#263421;border:1px solid #506641;border-radius:12px;color:var(--accent);margin-top:18px;font-size:13px}
.library-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.filters{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.filters button{background:transparent;color:var(--muted);font-size:13px;padding:8px 17px;min-height:44px}
.filters button[aria-pressed=true]{background:var(--accent);color:#182211}
.library-menu{position:relative}
.library-menu summary{list-style:none;padding:9px 15px;border:1px solid var(--line);border-radius:12px;cursor:pointer;min-height:44px;letter-spacing:2px}
.library-menu summary::-webkit-details-marker{display:none}
.menu-content{position:absolute;right:0;top:54px;z-index:5;width:260px;border:1px solid var(--line);padding:16px;background:#242d26;box-shadow:0 16px 30px #0008;border-radius:14px}
.menu-content p{font-size:12px;color:var(--muted);margin-top:12px}
.delete{color:#f2b2a5;background:#392823}
.media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.media-card{overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:16px;min-width:0}
.media-open{display:block;width:100%;padding:0;text-align:left;border:0;border-radius:0;background:transparent;font-weight:400}
.media-preview{aspect-ratio:16/10;display:grid;place-items:center;background:#252f27;overflow:hidden;position:relative}
.media-preview img{width:100%;height:100%;object-fit:cover}
.video-glyph{display:grid;place-items:center;height:48px;width:48px;border:1px solid #66795a;border-radius:50%;color:var(--accent);font-size:20px;padding-left:3px}
.media-type{position:absolute;bottom:10px;left:10px;font-size:10px;font-weight:600;letter-spacing:.4px;padding:4px 8px;border-radius:6px;background:#111c14e8;color:#dce8d6}
.media-info{padding:14px 14px 4px}
.media-date{font-size:14px;font-weight:600;display:block}
.media-time{font-size:12px;color:var(--muted);display:block;margin-top:3px}
.media-footer{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:0 8px 8px 14px}
.media-footer .meta{font-size:11px;color:var(--muted)}
.media-delete{font-size:12px;min-height:44px;background:transparent;color:#e5afa4;padding:8px}
.empty-state{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:320px;border:1px dashed var(--line);border-radius:var(--radius);padding:32px}
.empty-state .icon{height:36px;width:36px;margin-bottom:18px;color:var(--muted)}
.empty-state p{color:var(--muted);max-width:300px;margin:8px 0 20px;font-size:13px}
.empty-state a{padding:12px 20px;border:1px solid var(--line);border-radius:12px;font-size:13px}
.load-more{display:block;margin:24px auto}
#library-status:empty,#library-drive-status:empty{display:none}
#library-status{margin:12px 0}
.settings-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:start}
.settings-card{padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.card-heading{display:flex;gap:14px;align-items:center;margin-bottom:20px}
.card-heading>.icon{color:var(--accent)}
.card-heading p{color:var(--muted);font-size:12px;margin-top:4px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border-top:1px solid var(--line)}
.setting-row label{min-width:0}
.setting-row strong{display:block;font-size:14px;font-weight:500}
.setting-row label span{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.switch{appearance:none;flex-shrink:0;width:46px;height:28px;margin:0;background:#455046;border-radius:20px;position:relative;cursor:pointer}
.switch:before{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;background:#e3e8df;border-radius:50%}
.switch:checked{background:var(--accent)}
.switch:checked:before{transform:translateX(18px);background:#26311e}
.number-field{display:flex;align-items:center;gap:6px;flex-shrink:0;color:var(--muted);font-size:11px}
.number-field input{width:70px;padding:10px 8px;border:1px solid #4e5b51;background:var(--bg);color:var(--text);border-radius:10px;font-size:16px;text-align:center;min-height:44px}
.settings-footer{border-top:1px solid var(--line);padding-top:18px}
.settings-footer p{font-size:12px;color:var(--muted);margin-bottom:16px}
.primary{background:var(--accent);color:#172012}
.settings-footer button{width:100%}
.settings-side{display:grid;gap:20px}
.settings-side p+p{margin-top:12px}
.diagnostics summary{font-size:14px;cursor:pointer;padding:4px 0}
.diagnostics p,.diagnostics a{font-size:12px;margin-top:18px;display:block}
pre{font:11px/1.5 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted);max-height:300px;overflow:auto}
dialog{max-width:850px;width:calc(100% - 32px);max-height:90dvh;padding:24px;background:var(--panel);color:var(--text);border:1px solid #4e5b51;border-radius:20px}
dialog::backdrop{background:#000c;backdrop-filter:blur(8px)}
.viewer-header{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:20px}
.viewer-header h2{font-size:18px}
.viewer-header .eyebrow{margin-bottom:4px}
.secondary{border-color:var(--line);background:transparent}
.viewer-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;font-size:12px;color:var(--muted)}
#viewer-content img{display:block;width:100%;max-height:60dvh;object-fit:contain;border-radius:10px}
#viewer-content video{max-height:60dvh;border-radius:10px}
#viewer-error{color:#ffc6b7;font-size:13px;margin-top:12px}
#live-player:fullscreen{background:var(--bg);overflow:auto;display:flex;flex-direction:column;justify-content:center}
#live-player:fullscreen .video-stage{max-height:70vh;aspect-ratio:auto;flex:1}
#live-player:fullscreen .player-panel{width:100%;max-width:900px;margin:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}

@media(min-width:1100px){.watch-card{position:sticky;top:24px}
}

@media(max-width:850px){.app-shell{padding:0 24px 110px}
.live-layout{grid-template-columns:1fr}
.camera-panel{padding:20px}
.camera-panel #status{min-height:0;margin-bottom:16px}
.capture-actions{grid-template-columns:1fr 1fr}
.capture-button{min-height:86px;flex-direction:row;gap:12px}
.settings-layout{grid-template-columns:1fr}
.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.local-tag{display:none}
.app-header{height:80px}
}

@media(max-width:480px){.app-shell{padding:0 18px calc(100px + env(safe-area-inset-bottom))}
.app-header{height:76px}
.brand{font-size:18px;gap:9px}
.brand-mark{width:34px;height:34px;border-radius:11px}
.badge{font-size:11px;padding:5px 9px}
.page-heading{margin:26px 0 20px}
h1{font-size:30px}
.eyebrow{font-size:9px;letter-spacing:1.5px}
.live-layout{gap:16px}
.watch-card{border-radius:16px}
.player-panel{padding:10px 14px 8px}
.camera-panel{padding:18px;border-radius:16px}
.camera-state h2{font-size:19px}
.capture-button{flex-direction:column;min-height:96px;padding:12px 8px;gap:10px}
.buffer-note{margin:16px 0;font-size:11px}
.privacy-note{font-size:11px;margin-top:16px}
.app-nav{bottom:0;left:0;transform:none;width:100%;border-width:1px 0 0;border-radius:0;padding:6px 18px calc(6px + env(safe-area-inset-bottom));gap:12px;justify-content:space-around;background:#19201df5}
.app-nav a{flex:1;flex-direction:column;gap:4px;padding:8px 12px;font-size:10px;border-radius:12px}
.app-nav a[aria-current=page]{background:#d4ee9b15;color:var(--accent)}
.app-nav .icon{width:21px;height:21px}
.media-grid{gap:12px}
.media-info{padding:12px 10px 4px}
.media-date{font-size:12px}
.media-time{font-size:11px}
.media-footer{padding:0 4px 4px 10px}
.media-delete{font-size:11px;padding:8px}
.media-footer .meta{font-size:10px}
.media-preview{aspect-ratio:1.3}
.filters button{font-size:12px;padding:8px 12px}
.settings-card{padding:18px;border-radius:16px}
.card-heading{gap:10px}
.card-heading h2{font-size:18px}
.setting-row{gap:12px}
.number-field input{width:62px}
.setting-row label span{font-size:11px}
.setting-row strong{font-size:13px}
.viewer-header h2{font-size:15px}
dialog{padding:16px}
.viewer-footer{align-items:flex-start}
.privacy-note{max-width:320px}
}

@media(prefers-reduced-motion:no-preference){button,a{transition:background .15s,color .15s}
.switch:before{transition:transform .15s}
}


.feedback{position:fixed;z-index:20;left:50%;transform:translateX(-50%);bottom:calc(100px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 36px);box-shadow:0 8px 30px #0007;margin:0}
@media(min-width:851px){.app-nav{top:20px;bottom:auto;position:absolute}.feedback{bottom:24px}.app-shell{padding-bottom:48px}}

.drive-folder-label{display:block;font-size:13px;margin:0 0 8px}.drive-folder{width:100%;min-width:0;min-height:44px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;color:var(--text);font-size:16px}.drive-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.drive-actions button{flex:1}#drive-setup summary{cursor:pointer;min-height:44px;padding:10px 0;font-size:13px}#drive-setup p{margin-bottom:10px}#drive-setup a{font-size:13px}.drive-note{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}#drive-error{color:#ffc6b7;font-size:13px;overflow-wrap:anywhere}#drive-folder-name{margin-top:8px;overflow-wrap:anywhere}
.account-card{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.account-card h2{margin-top:0}.account-card p{margin-bottom:0}.account-card button{flex-shrink:0;min-height:44px}@media(max-width:480px){.account-card{align-items:flex-start;flex-direction:column}.account-card button{width:100%}}
.password-card,.drive-password-card{margin-bottom:20px}.password-card summary{font-weight:650;min-height:44px;cursor:pointer;display:flex;align-items:center}.password-card form{max-width:480px;display:grid;gap:12px;margin-top:12px}.password-card input{width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text);padding:14px;font-size:16px}.password-card button{min-height:48px}.password-card p{margin:0}.password-card [role=alert]{color:#ffb2a9}.password-card [role=status]{color:var(--accent)}.password-card [role]:empty{display:none}
.legal-links{font-size:13px;color:var(--muted);text-align:center;margin:24px 0}.legal-links a{display:inline-flex;align-items:center;min-height:44px;color:inherit;padding:0 8px}

#delete-dialog{box-sizing:border-box;width:min(440px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid var(--border);border-radius:20px;background:var(--panel,#1a211c);color:var(--text)}
#delete-dialog::backdrop{background:#000a}#delete-dialog h2{margin-top:0}#delete-dialog p{line-height:1.5}
#delete-dialog [hidden]{display:none}.delete-drive-option{display:flex;gap:12px;align-items:center;min-height:48px;margin:16px 0}.delete-drive-option input{width:22px;height:22px;flex:0 0 22px}
#delete-drive-password,.drive-password-card input{box-sizing:border-box;width:100%;min-width:0;padding:14px;font-size:16px;color:var(--text);background:#111513;border:1px solid #59655e;border-radius:12px}
.drive-password-card form{display:grid;gap:12px;padding-top:16px}.dialog-actions{display:flex;gap:12px;margin-top:24px}.dialog-actions button{flex:1;min-height:48px}#delete-error,#drive-password-error{color:#ffb2a9}#delete-error:empty,#drive-password-error:empty,#drive-password-success:empty{display:none}

.talk-button{width:100%;margin-top:12px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.talk-button[aria-pressed="true"]{background:var(--accent);color:var(--bg)}
.talk-status{font-size:13px;margin:8px 0 0;min-height:1.5em}