/* Shared visual language with the Android HomeCam app. */
:root{--bg:#081821;--panel:#10232d;--panel-2:#172e3a;--line:#34505e;--text:#f3f7fb;--muted:#a4bdc9;--blue:#69adff;--green:#65d5b3;--red:#ff9ea7;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
body{background:radial-gradient(ellipse at 80% 0,rgba(43,78,92,.25),transparent 48%),var(--bg)}
.app-shell{width:min(1260px,100%);padding-inline:clamp(16px,3vw,36px)}
.topbar{padding:8px 0 18px}.brand{letter-spacing:-.5px}.brand img{border-radius:13px;width:44px;height:44px}
button,input,select{font:inherit}button{touch-action:manipulation}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #8bc7ff;outline-offset:3px}
button:disabled{opacity:.45;cursor:not-allowed}
.primary,.secondary,.compact-button,.tool-button,.icon-button,.close-button,.remote-sound-grid button,.archive-filters button,.duration-presets button{border:1px solid #45606f;border-radius:16px;background:linear-gradient(180deg,#2a4051,#1a2f3d);box-shadow:inset 0 1px 0 #ffffff15,0 3px 0 #152630,0 5px 12px #0002;color:#edf6ff;font-weight:750;min-height:46px;transition:background .15s,transform .15s;cursor:pointer}
.primary,.archive-filters button.active,.duration-presets button.active,#activity-duration.active{background:linear-gradient(#3483d8,#215ab1);border-color:#75b8ff;box-shadow:inset 0 1px 0 #ffffff40,0 3px 0 #1b477d}
button:not(:disabled):active{transform:translateY(2px);box-shadow:inset 0 1px 3px #0003}
.text-button{color:#a6c9e3}.danger-text{color:#ffb4bd!important;background:linear-gradient(#422e3c,#2b2330)!important;border-color:#795568!important}
input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=hidden]),select{background:#0a1b27!important;border:1px solid #40586a!important;border-radius:12px;color:var(--text);min-height:46px;padding:10px 12px;max-width:100%}
input[type=range]{accent-color:#70b4ff;width:100%;height:30px;padding:0;cursor:pointer}
input[type=checkbox]{accent-color:#5b9fff}
.login-view{gap:clamp(24px,5vw,70px);padding:30px 0 60px}.login-copy h1{font-size:clamp(32px,4vw,52px);line-height:1.12;letter-spacing:-1.5px;max-width:540px}.login-copy>p{max-width:480px}
.home-art{height:clamp(180px,23vw,300px);background:url('/viewer/assets/home-hero-v2.webp') center/cover;border-radius:26px;box-shadow:0 24px 55px #0003;margin-bottom:30px;border:1px solid #49616b55}
.login-card,.saved-card,.modal-card{background:linear-gradient(145deg,#152a35,#0e202c);border:1px solid #3b5462;border-radius:24px;box-shadow:0 18px 60px #0003}
.login-card{padding:28px}.remember-row{border-radius:14px}.security-note{font-size:12px;line-height:1.55;color:var(--muted)}
.saved-heading h1{font-size:clamp(32px,4vw,48px);letter-spacing:-1px}.saved-camera-row{border-radius:18px;margin-bottom:12px;background:#122a37;border:1px solid #3d5c6d}.saved-camera-icon{border-radius:14px;background:#234761;color:#b4dbff}.saved-camera-open{min-height:100px}.saved-camera-tools button{border-radius:12px}.saved-actions{grid-template-columns:1fr auto;gap:15px}
.viewer-view{grid-template-columns:minmax(0,1fr) 260px;align-items:start;gap:20px;width:100%;margin:10px 0 26px}.camera-hero{grid-column:1/-1;position:relative;overflow:hidden;min-height:166px;border:1px solid #3a5262;border-radius:24px;background:linear-gradient(90deg,rgba(6,22,33,.55),transparent 70%),url('/viewer/assets/viewer-header-v1.webp') center/cover}
.camera-hero-copy{position:relative;z-index:1;padding:22px 26px;max-width:65%}.camera-hero h1{font-size:clamp(23px,3vw,34px);margin:6px 0;line-height:1.12;overflow-wrap:anywhere}.camera-hero p{color:#c5d7e3;margin:7px 0;font-size:13px}.camera-hero .eyebrow{font-size:10px;color:#95cbfc;letter-spacing:2px}
.puppy-track{position:absolute;bottom:10px;left:15px;width:55%;height:35px;pointer-events:none}.puppy-walk{position:absolute;width:55px;height:34px;animation:puppy-travel 18s linear infinite alternate}.puppy-frame{width:55px;height:31px;background:url('/viewer/assets/walking-puppy-happy-v8.webp') -30.7px 0/104px 311px no-repeat;animation:puppy-steps 1.6s step-end infinite}
@keyframes puppy-travel{from{left:0}to{left:calc(100% - 55px)}}@keyframes puppy-steps{0%{background-position-y:0}10%{background-position-y:-32.3px}20%{background-position-y:-64.4px}30%{background-position-y:-95.7px}40%{background-position-y:-128.1px}50%{background-position-y:-158.5px}60%{background-position-y:-190.2px}70%{background-position-y:-222.3px}80%{background-position-y:-253.2px}90%{background-position-y:-283.6px}}
.recording-indicator{position:absolute;right:16px;bottom:14px;display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:12px;background:#873846d9;color:#fff;border:1px solid #ff9ea770;font-size:12px}.recording-indicator i{width:8px;height:8px;border-radius:50%;background:#ff6b75}
.video-shell{min-width:0;gap:16px}.video-stage{border-radius:20px;border:1px solid #466678;background:#040b10;overflow:hidden}.video-controls{position:relative;inset:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;background:none;padding:14px 0 4px}.video-controls .icon-button{padding:10px 6px;gap:6px;justify-content:center;min-width:0}.icon-button b{font-size:12px}.icon-button>span{font-size:21px}.video-topline{font-size:12px;background:linear-gradient(#06151ab3,transparent)}
.viewer-tabs{padding:6px;gap:6px;border-radius:18px;background:#0c202b}.viewer-tab{min-height:50px;border-radius:12px;line-height:1.25;font-size:14px}.viewer-tab.active{background:#234564;color:#bce0ff;box-shadow:inset 0 1px 0 #ffffff18}
.tool-panel{border-radius:20px;background:#10212c;padding:20px;border-color:#344c5b}.tool-panel h2{font-size:18px}.view-adjustments summary,.status-card summary{cursor:pointer;font-size:14px;font-weight:750;color:#c5dced;min-height:28px}.view-adjustments[open] summary{margin-bottom:18px}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-help{font-size:12px;line-height:1.6;color:#9fb7c8}.zoom-row{grid-template-columns:1fr}.notification-row{border-radius:14px;background:#0c1b25;padding:14px;gap:12px}.notification-row small{font-size:12px}.notification-row b{font-size:13px}
.viewer-side .status-card{border-radius:20px;padding:18px;background:#10232d}.status-card>.eyebrow{margin-top:18px}.status-card h2{font-size:18px}.status-card dd{font-size:12px}.status-card .secondary{font-size:13px}
.panel-heading p{display:none}.panel-heading{align-items:center}.panel-actions .compact-button{font-size:12px;padding:0 10px}.panel-status{border-radius:12px;background:#122e3c;border-color:#34546b}.panel-status:empty{display:none}
.archive-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:18px}.archive-filters button{display:grid;gap:4px;align-content:center;padding:10px 4px;min-height:62px;font-size:12px}.archive-filters small{color:#9db5ca;font-size:11px}.archive-filters button.active small{color:#c1e3ff}
.archive-date{display:flex;gap:10px;align-items:center;margin:18px 0;font-size:12px;flex-wrap:wrap}.archive-date input{min-width:0;width:158px;font-size:12px}.archive-date .text-button{padding:0 5px}.archive-selection{display:flex;gap:8px;margin:14px 0}.archive-selection button{font-size:12px;flex:1;padding-inline:8px}
.recording-row{grid-template-columns:minmax(0,1fr) auto;border-radius:16px;padding:13px 14px;gap:10px;background:#0b1926;border-color:#304554;cursor:pointer;user-select:none;-webkit-user-select:none}.recording-row.selected{border-color:#76b8ff;background:#153650}.recording-heading{gap:8px;font-size:14px}.recording-copy small{font-size:12px}.recording-row .recording-actions{display:flex}.recording-delete{width:44px;padding:0!important}.recording-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.saved-icon{width:17px;height:17px;color:#72debd;flex:0 0 auto}.recording-events{gap:3px}.event-marker{font-size:9px;padding:2px 5px}.recording-select{accent-color:#68aeff;width:18px;height:18px;flex:0 0 auto}
.recording-mode-options{grid-template-columns:repeat(3,minmax(0,1fr))}.recording-mode-options span{border-radius:14px;background:linear-gradient(#2a4051,#1a2f3d);min-height:65px;padding:12px 5px;text-align:center;align-items:center;box-shadow:0 3px 0 #08151f;font-size:13px}.recording-mode-options small{display:none}.recording-mode-options input:checked+span{background:linear-gradient(#3483d8,#215ab1);border-color:#75b8ff;box-shadow:0 3px 0 #1b477d}.recording-mode-options input:focus-visible+span{outline:3px solid #8bc7ff;outline-offset:3px}
.settings-copy p{font-size:12px}.settings-grid{grid-template-columns:1fr 1fr;gap:18px}.event-triggers,.duration-field{grid-column:1/-1}.event-triggers{display:grid;grid-template-columns:1fr 1fr;gap:10px}.switch-row{border-radius:14px;min-height:58px;background:#0d1d2b;font-size:13px;padding:14px}.switch-row input{appearance:none;flex:0 0 42px;width:42px;height:25px;border-radius:20px;background:#3e5262;position:relative;cursor:pointer}.switch-row input::after{content:'';position:absolute;width:19px;height:19px;border-radius:50%;background:#ccdbe8;top:3px;left:3px;transition:transform .15s}.switch-row input:checked{background:#2d72d1}.switch-row input:checked::after{transform:translateX(17px);background:#e2f1ff}.switch-row small{display:none}
.duration-field{border:0;margin:0;padding:0;min-width:0}.duration-field legend{font-size:13px;color:#aac3d3;margin-bottom:10px}.duration-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.duration-presets button{font-size:12px;padding:5px;min-width:0}.duration-field #activity-duration{width:100%;margin-top:12px;font-size:13px}.duration-field label{margin-top:12px;display:grid;gap:6px;font-size:12px}.detection-settings{display:grid;grid-template-columns:1fr 1fr;gap:10px}.detection-settings .settings-copy{grid-column:1/-1}.range-heading,.range-labels{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:13px}.range-labels{font-size:11px;color:var(--muted);margin-bottom:15px}.sound-sensitivity-section{padding-top:18px;border-top:1px solid var(--line)}.sound-sensitivity-section label{font-weight:750}.sound-test-status{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);min-height:30px}.sound-test-status i{width:13px;height:13px;background:#617586;border:1px solid #8c9da9;border-radius:50%;flex:0 0 auto}.sound-test-status.detected i{background:#48df92;box-shadow:0 0 12px #45d89455}.settings-apply{position:sticky;bottom:12px;width:100%;z-index:2}.auto-save-section{padding-top:18px;border-top:1px solid var(--line)}
.modal-card{max-height:90dvh;overflow:auto}.modal-backdrop{background:#020c18a6;backdrop-filter:blur(4px)}.recording-player-card{width:min(860px,100%)}.recording-player-heading h2{font-size:18px}.close-button{flex:0 0 44px}.player-navigation,.player-actions{display:flex;gap:10px;margin-top:14px}.player-navigation button,.player-actions button{flex:1;min-width:0;font-size:13px;padding:10px}.recording-player-card video{border-radius:14px;max-height:55dvh}.remote-sound-backdrop{background:transparent;backdrop-filter:none;place-items:end center;pointer-events:none}.remote-sound-card{pointer-events:auto;background:#102536e8;backdrop-filter:blur(8px);max-height:42dvh;border-radius:22px 22px 16px 16px;box-shadow:0 -10px 60px #0005}.remote-sound-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}.remote-sound-grid button{min-width:0;font-size:13px}.remote-sound-playing{border-radius:14px}.empty-library{padding:32px 18px;text-align:center;color:var(--muted);font-size:14px;line-height:1.6}
.app-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}.icon-button .app-icon{width:23px;height:23px}
footer{border-top:1px solid #30455466;padding-top:20px;margin-top:28px;gap:22px}footer a{font-size:12px;color:#a0bdcc}
.video-stage{min-height:0;aspect-ratio:16/10;width:100%}.video-stage:fullscreen,.video-stage.pseudo-fullscreen{aspect-ratio:auto}.camera-hero .hero-back{position:absolute;right:16px;top:14px;width:auto;min-height:38px;margin:0;padding:8px 12px;font-size:12px;border-radius:12px;background:#112a3bcc;z-index:2}.saved-recording-status{color:#ff9ca5;font-size:12px;font-weight:750}.recording-player-card .panel-status{min-height:42px}
.video-controls{transform:none;width:100%;max-width:none;border:0;left:auto;bottom:auto}.settings-grid .switch-row{display:flex}.settings-grid>*{min-width:0}
.recording-mode-options label{position:relative}.recording-mode-options input{width:1px;height:1px;min-height:0;padding:0;margin:0;clip-path:inset(50%);overflow:hidden}
.settings-apply{position:static;margin-top:20px}.login-copy h1{word-break:keep-all;overflow-wrap:anywhere}.remote-sound-card{background:rgba(16,37,54,.83)}
.exit-fullscreen{display:none;position:absolute;right:16px;bottom:16px;z-index:12;background:#18374cc9}.video-stage:fullscreen .exit-fullscreen,.video-stage.pseudo-fullscreen .exit-fullscreen{display:block}
@media(max-width:960px){.viewer-view{grid-template-columns:1fr}.viewer-side{display:block}.status-card{margin:0}.camera-hero{min-height:154px}.viewer-side .status-card:not([open]){padding-bottom:10px}.login-view{gap:28px}.login-card{padding:22px}}
@media(max-width:680px){.app-shell{padding-inline:14px}.topbar{padding-bottom:12px}.brand{font-size:17px}.viewer-language{max-width:115px}.login-view{display:grid;grid-template-columns:1fr;padding-top:12px}.home-art{height:190px;margin-bottom:22px}.login-copy h1{font-size:32px}.login-copy>p{font-size:14px}.login-card{padding:20px}.saved-view{margin-top:16px}.saved-heading .home-art{height:175px}.camera-hero{border-radius:20px;min-height:160px;background-position:60% center}.camera-hero-copy{padding:18px;max-width:63%}.camera-hero h1{font-size:23px}.tool-panel{padding:16px}.panel-heading{display:flex;gap:8px}.panel-heading h2{font-size:17px;margin:0}.panel-actions{display:flex}.archive-filters{gap:6px}.archive-filters button{font-size:11px;border-radius:13px}.archive-selection{gap:6px}.recording-heading{font-size:13px}.recording-row{grid-template-columns:minmax(0,1fr) auto;padding:12px;gap:8px}.recording-actions .compact-button{width:42px}.recording-badge{font-size:9px}.recording-mode-options{grid-template-columns:repeat(3,minmax(0,1fr))}.recording-mode-options b{font-size:12px}.settings-grid{grid-template-columns:1fr 1fr}.event-triggers,.detection-settings{grid-template-columns:1fr}.tool-grid{grid-template-columns:1fr 1fr}.notification-row{display:grid}.viewer-tabs{position:static}.viewer-tab{font-size:12px}.video-controls .icon-button b{font-size:11px}.modal-backdrop{padding:12px}.modal-card{padding:18px}.remote-sound-card{max-height:43dvh}.player-actions{gap:7px}.player-actions button{font-size:12px}.duration-presets{gap:6px}.duration-presets button{font-size:11px}.saved-actions{grid-template-columns:1fr}.modal-actions{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Recording actions remain reachable on narrow screens. */
.recording-actions[hidden]{display:none}
.recording-actions .compact-button{width:44px;min-width:44px;min-height:44px;padding:0;display:grid;place-items:center}
.saved-icon-button{color:#72debd}
.recording-meta{flex-wrap:nowrap;gap:5px}
.recording-meta small{white-space:nowrap}
.recording-badge{white-space:nowrap}
#motion-recording-sensitivity input,#motion-alert-sensitivity input{width:100%;accent-color:#60a5fa}
@media(max-width:480px){.recording-row{grid-template-columns:minmax(0,1fr)}.recording-actions{justify-self:end}.recording-meta{font-size:12px}}
/* Each sensitivity control stays below its own switch on desktop and mobile. */
.event-triggers,.detection-settings{grid-template-columns:minmax(0,1fr)}
.auto-save-section>label[for="auto-storage"]{display:block;margin:14px 0 8px}
.auto-save-section select{width:100%;min-height:44px;background:#142738;color:#eef6ff;border:1px solid #456173;border-radius:12px;padding:10px}
.device-folder-actions{display:flex;flex-wrap:wrap;gap:8px}
.device-folder-actions button{flex:1;min-height:44px}
#auto-folder-name{overflow-wrap:anywhere}
#recordings-panel .panel-heading{flex-wrap:wrap}
#recordings-panel .panel-actions{display:flex;flex-wrap:wrap;gap:8px}
.bulk-download-card{max-height:90dvh;overflow:auto}
.bulk-download-card progress{width:100%;height:14px;accent-color:#60a5fa}
.bulk-download-card p{overflow-wrap:anywhere}
.bulk-download-card .modal-actions{display:flex;justify-content:flex-end}
.bulk-download-card .modal-actions button{min-width:100px;min-height:44px}