:root{--ink:#172235;--line:#dce4ef;--bg:#f4f7fb;--blue:#2f6fcb}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}button,input,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}.login-screen{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 70% 15%,#234d7a,#101f34 48%,#0a1422)}.login-card{width:min(400px,100%);padding:38px;border:1px solid #2e4664;border-radius:20px;background:rgba(15,29,49,.96);box-shadow:0 30px 90px #07111f;color:white}.login-brand span,.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:#2f7ee6;color:white;font-weight:900}.login-card>p{margin:25px 0 8px;color:#82a6d6;font-size:9px;font-weight:bold;letter-spacing:2px}.login-card h1{margin:0 0 28px;font-size:29px;font-weight:750;letter-spacing:-.025em}.login-card label{display:grid;gap:8px;color:#aabbd2;font-size:11px}.login-card input{width:100%;border:1px solid #334d6f;border-radius:9px;background:#0d1a2c;color:#fff;padding:12px;outline:none}.login-card input:focus{border-color:#4b91ec}.login-card button,.save-button{width:100%;margin-top:17px;border:0;border-radius:9px;background:#2f78ce;color:white;padding:12px;font-size:11px;font-weight:bold}.login-card small{display:block;height:15px;margin-top:10px;color:#ff9f91;font-size:10px}
.app-shell{min-height:100vh;display:flex}.sidebar{position:fixed;inset:0 auto 0 0;width:248px;display:flex;flex-direction:column;background:#0f1b2d;color:#dce6f4;padding:28px 18px 20px;z-index:5}.brand{display:flex;align-items:center;gap:12px;padding:0 10px 30px;font-size:18px;font-weight:750}.brand-mark{width:34px;height:34px}.brand small{display:block;margin-top:2px;color:#7f93ad;font-size:9px;letter-spacing:2px}.sidebar nav{display:grid;gap:7px}.sidebar nav button{position:relative;display:flex;align-items:center;gap:12px;width:100%;border:0;border-radius:10px;background:transparent;color:#9fb0c7;padding:11px 12px;text-align:left;font-size:14px;font-weight:650}.sidebar nav button:hover,.sidebar nav button.active{background:#192c49;color:#f4f8ff}.sidebar nav button.active:before{content:"";position:absolute;left:-18px;width:3px;height:24px;background:#4b92f0}.sidebar nav i{width:20px;color:#7f93ad;font-style:normal;text-align:center}.count{margin-left:auto;padding:2px 7px;border-radius:20px;background:#25436a;font-size:10px}.sidebar-bottom{margin-top:auto;display:grid;gap:19px}.storage-mini{padding:15px;border:1px solid #2a3f5c;border-radius:12px;background:#14243a}.storage-mini>div:first-child{display:flex;justify-content:space-between;color:#aab9cd;font-size:10px}.storage-mini b{color:#e9f1fb}.storage-mini small{color:#70859f;font-size:9px}.meter{height:5px;margin:10px 0 7px;overflow:hidden;border-radius:10px;background:#2d4462}.meter i{display:block;width:0;height:100%;background:#438ee8}.system-ok{display:flex;align-items:center;gap:10px;padding:0 5px}.system-ok>span{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#244972;color:#65a6f3}.system-ok b,.system-ok small{display:block}.system-ok b{font-size:11px}.system-ok small{margin-top:2px;color:#70859f;font-size:9px}
.workspace{width:100%;min-width:0;margin-left:248px;padding:0 42px 48px}.topbar{height:120px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.topbar p,.section-heading p,.settings-card p{margin:0 0 7px;color:#8a9691;font-size:9px;font-weight:800;letter-spacing:1.7px}.topbar h1{margin:0;font-size:30px;font-weight:750;letter-spacing:-.025em}.top-actions{display:flex;align-items:center;gap:16px}.top-actions>span{color:#59645f;font-size:12px;font-weight:bold}.avatar{width:36px;height:36px;border:0;border-radius:50%;background:#dfeafb;color:#285f9e;font-size:10px;font-weight:bold}.view{display:none}.view.active{display:block}.summary-row{display:flex;align-items:center;justify-content:space-between;padding:24px 0 18px}.summary-copy{display:flex;align-items:center;gap:9px;font-size:12px}.summary-copy>span:last-child{color:#7b8581}.pulse-dot{width:8px;height:8px;border-radius:50%;background:#377fd4;box-shadow:0 0 0 5px #dbeafe}.outline-button{border:1px solid #d5ddd9;border-radius:8px;background:#fff;padding:9px 12px;color:#4d5a55;font-size:10px;font-weight:bold}
.camera-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.camera-card{overflow:hidden;border:1px solid #d9e0dc;border-radius:15px;background:white}.camera-feed{position:relative;min-height:280px;background:#14233a}.camera-feed video{position:absolute;width:100%;height:100%;object-fit:cover;background:#14233a}.camera-feed .offline{position:absolute;inset:0;display:grid;place-items:center;color:#8ca097;font-size:11px;background:radial-gradient(circle,#2c4c76,#14243c)}.live-pill,.feed-label{position:absolute;z-index:2;color:white}.live-pill{top:14px;left:14px;padding:5px 8px;border-radius:5px;background:#0c192bbf;font-size:9px;font-weight:bold}.live-pill i{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#63a7ff}.feed-label{left:17px;bottom:15px;text-shadow:0 1px 7px #000}.feed-label b,.feed-label span{display:block}.feed-label b{font-size:14px}.feed-label span{margin-top:4px;color:#d8e4f2;font-size:9px}.camera-footer{display:flex;justify-content:space-between;padding:12px 15px;color:#7b8581;font-size:10px}.status-dot{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#9aa49f}.status-dot.online{background:#4f92e6}.recording-flag{color:#bb493d;font-weight:bold}
.recent-section{margin-top:35px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:13px}.section-heading h2,.settings-card h2{margin:0;font-size:21px;font-weight:720;letter-spacing:-.018em}.section-heading button{border:0;background:transparent;color:#2f6fcb;font-size:10px;font-weight:bold}.event-list{overflow:hidden;border:1px solid #dde3e0;border-radius:13px;background:white}.event-list.empty,.event-gallery.empty{padding:35px;color:#86918c;font-size:11px;text-align:center}.event-row{display:grid;grid-template-columns:58px 1fr auto auto;align-items:center;gap:14px;padding:10px;border-bottom:1px solid #e5e9e7}.event-row:last-child{border:0}.event-play{display:grid;place-items:center;width:54px;height:42px;border:0;border-radius:8px;background:linear-gradient(135deg,#315986,#82a8d4);color:#fff}.event-main b,.event-main span{display:block}.event-main b{font-size:11px}.event-main span{margin-top:4px;color:#88928e;font-size:9px}.event-row time{font:9px monospace;color:#69746f}.lock-button,.download-button{border:1px solid #dce2df;border-radius:7px;background:white;color:#53615b;padding:6px 8px;font-size:9px}.lock-button.locked{background:#e8f1fc;color:#2f6daf}
.events-page,.settings-page{padding-top:26px}.filterbar{display:flex;justify-content:space-between;margin-bottom:22px}.segmented{display:flex;padding:3px;border:1px solid #d7dfda;border-radius:9px;background:white}.segmented button{border:0;border-radius:6px;background:#2f6fcb;color:white;padding:7px 12px;font-size:10px}.filterbar select{border:1px solid #d7dfda;border-radius:8px;background:white;padding:8px 11px;color:#51605a;font-size:10px}.event-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.event-card{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:13px;padding:10px;border:1px solid #dce2df;border-radius:12px;background:white}.event-card .event-play{width:110px;height:78px}.event-card small{display:block;margin-top:5px;color:#75807b;font-size:9px}.event-card b{font-size:11px}
.settings-page{max-width:980px}.settings-card{padding:24px;border:1px solid #dce2df;border-radius:14px;background:white}.settings-card>div:first-child>span,.alert-settings>span{display:block;margin-top:7px;color:#7b8681;font-size:10px}.camera-setting{display:grid;grid-template-columns:1fr 2fr auto auto;gap:12px;align-items:end;margin-top:18px;padding:15px;border:1px solid #e1e6e3;border-radius:10px}.settings-card label{display:grid;gap:7px;color:#65716c;font-size:9px}.settings-card input,.settings-card select{width:100%;border:1px solid #d8dfdb;border-radius:8px;background:white;padding:9px;color:#34413b}.camera-setting [data-camera-url],.camera-setting [data-camera-live-url]{font-family:monospace;font-size:9px}.camera-setting .live-url-field{grid-column:1/3;align-self:start}.camera-setting .live-url-field small{color:#87938d;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:8px;line-height:1.4}.camera-setting .enabled{display:flex;align-items:center;gap:6px;padding-bottom:9px}.camera-setting .enabled input{width:auto}.remove-camera,.add-camera-button{border:1px solid #cdd9e8;border-radius:8px;background:#f5f8fd;color:#2f6fcb;padding:9px 11px;font-size:9px;font-weight:bold}.remove-camera{margin-bottom:1px}.remove-camera:disabled{cursor:not-allowed;opacity:.4}.add-camera-button{margin-top:14px}.recording-settings,.alert-settings{margin-top:28px;padding-top:24px;border-top:1px solid #e2e7e4}.fixed-storage{display:flex;justify-content:space-between;margin-top:18px;padding:12px;border-radius:8px;background:#eff4fb;color:#53647b;font-size:10px}.fixed-storage b{color:#2d6eb8}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:15px}.form-grid label{position:relative}.form-grid label small{position:absolute;right:10px;bottom:10px;color:#98a19d}.alert-enabled{display:flex!important;align-items:center;gap:8px;margin-top:17px;padding:11px;border-radius:8px;background:#eff4fb;color:#2d65a6!important;font-weight:bold}.alert-enabled input{width:auto}.alert-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:15px}.alert-grid .wide-field{grid-column:1/-1}.alert-grid label{position:relative}.alert-grid label small{color:#87938d;font-size:8px}.test-email-row{display:flex;align-items:center;gap:12px;margin-top:16px}.test-email-row .outline-button{color:#2f6fcb}.test-email-row span{color:#2f71bd;font-size:10px}.save-button{max-width:270px}#settings-message{display:inline-block;margin-left:12px;color:#2f71bd;font-size:10px}.mobile-nav{display:none}
dialog{width:min(800px,calc(100% - 24px));padding:0;border:0;border-radius:14px;background:#0b1627;color:white;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#07111ecc;backdrop-filter:blur(5px)}dialog video{display:block;width:100%;max-height:70vh;background:#000}dialog>button{position:absolute;z-index:2;right:10px;top:10px;width:34px;height:34px;border:0;border-radius:50%;background:#0009;color:white;font-size:22px}#player-caption{padding:14px;font-size:11px}
.storage-form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.storage-warning{display:block;margin-top:10px;color:#8b5c2e;font-size:9px}.pwa-settings{margin-top:28px;padding-top:24px;border-top:1px solid #e2e7e4}.pwa-settings>span{display:block;margin-top:7px;color:#7b8681;font-size:10px}.pwa-install-row{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}.pwa-install-row .outline-button{color:#2f6fcb}.pwa-install-row span{color:#66736d;font-size:10px}
.event-filters{display:grid;grid-template-columns:minmax(150px,1.4fr) repeat(3,minmax(130px,1fr)) auto;gap:12px;align-items:end;margin-bottom:8px;padding:15px;border:1px solid #dce4ef;border-radius:12px;background:#fff}.event-filters label{display:grid;gap:6px;color:#65716c;font-size:9px;font-weight:700}.event-filters input,.event-filters select{width:100%;min-height:38px;border:1px solid #d6dfeb;border-radius:8px;background:#fff;padding:8px 10px;color:#334256}.filter-actions{display:flex;gap:7px}.filter-button,.clear-filter-button{min-height:38px;border-radius:8px;padding:8px 13px;font-size:10px;font-weight:750}.filter-button{border:0;background:#2f6fcb;color:#fff}.clear-filter-button{border:1px solid #d5deea;background:#fff;color:#506077}.event-filter-message{min-height:18px;color:#a33d35;font-size:10px}.event-bulkbar{display:flex;align-items:center;gap:13px;margin:5px 0 15px;padding:10px 12px;border:1px solid #dce4ef;border-radius:10px;background:#edf4fd;color:#52657d;font-size:10px}.select-page-label{display:flex;align-items:center;gap:7px;font-weight:700}.select-page-label input,.event-check input{accent-color:#2f6fcb}.mark-all-seen{margin-left:auto;border:1px solid #9ebce4;border-radius:7px;background:#fff;color:#2f6fcb;padding:7px 10px;font-size:9px;font-weight:750}.mark-all-seen:disabled{cursor:not-allowed;opacity:.45}.delete-selected,.delete-button{border:1px solid #e3b8b4;border-radius:7px;background:#fff5f4;color:#a53730;padding:7px 10px;font-size:9px;font-weight:750}.delete-selected:disabled,.delete-button:disabled{cursor:not-allowed;opacity:.45}.event-bulkbar>span:last-child{color:#536b88}.event-gallery{grid-template-columns:1fr}.event-card{position:relative;grid-template-columns:24px 150px minmax(0,1fr) auto;gap:14px;min-height:112px;padding:12px;transition:border-color .15s,box-shadow .15s}.event-card.selected{border-color:#73a5e6;box-shadow:0 0 0 2px #dbeafe}.event-check{display:grid;align-content:start;justify-items:center;gap:5px;color:#7b8797;font-size:8px}.event-check input{width:16px;height:16px}.event-thumbnail{position:relative;isolation:isolate;overflow:hidden;width:150px;height:88px;background:linear-gradient(135deg,#284d7b,#86addb)}.event-thumbnail.compact{width:54px;height:42px}.event-thumbnail img{position:absolute;z-index:-1;inset:0;width:100%;height:100%;object-fit:cover}.event-thumbnail:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,transparent,#07152680)}.event-thumbnail span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#0b1b2cbf;color:white;font-size:10px}.event-details{min-width:0}.event-details b{display:block;font-size:12px}.event-details small{font-size:10px}.event-actions{display:flex;align-items:center;gap:7px}.event-actions a{text-decoration:none}.pagination{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:12px 2px;color:#6f7d8e;font-size:10px}.pagination>div{display:flex;align-items:center;gap:10px}.pagination button{border:1px solid #d7e0eb;border-radius:8px;background:#fff;color:#3e5470;padding:8px 11px;font-size:9px;font-weight:700}.pagination button:disabled{cursor:not-allowed;opacity:.4}.pagination b{min-width:90px;text-align:center;color:#354961;font-size:10px}
@media(max-width:900px){.camera-feed{min-height:230px}.event-gallery{grid-template-columns:1fr}.workspace{padding-inline:27px}}
@media(max-width:720px){.sidebar{display:none}.workspace{margin-left:0;padding:0 14px 90px}.topbar{height:92px}.topbar h1{font-size:25px}.top-actions>span{display:none}.summary-row{padding:17px 2px 13px}.summary-copy>span:last-child,.summary-row>.outline-button{display:none}.camera-grid{grid-template-columns:1fr;gap:13px}.camera-feed{min-height:245px}.recent-section{margin-top:26px}.mobile-nav{position:fixed;z-index:10;display:flex;inset:auto 0 0;justify-content:space-around;padding:8px 14px max(9px,env(safe-area-inset-bottom));border-top:1px solid #dce3df;background:#fffffff5}.mobile-nav button{display:grid;gap:4px;place-items:center;width:72px;border:0;background:transparent;color:#84908a;font-size:9px}.mobile-nav button span{font-size:17px}.mobile-nav button.active{color:#2f72c4}.event-card{grid-template-columns:85px 1fr}.event-card .event-play{width:85px;height:65px}.event-card>.download-button{display:none}.camera-setting{grid-template-columns:1fr}.camera-setting .live-url-field{grid-column:auto}.camera-setting .enabled{padding:0}.form-grid,.alert-grid{grid-template-columns:1fr}.alert-grid .wide-field{grid-column:auto}.test-email-row{align-items:flex-start;flex-direction:column}.test-email-row .outline-button{display:block}.save-button{max-width:none}#settings-message{display:block;margin:9px 0 0}.event-row{grid-template-columns:48px 1fr auto}.event-play{width:45px}.event-row time{display:none}}
@media(max-width:1000px){.event-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-actions{grid-column:1/-1}.event-card{grid-template-columns:24px 125px minmax(0,1fr)}.event-thumbnail{width:125px}.event-actions{grid-column:3;justify-content:flex-start}}
@media(max-width:720px){.events-page{padding-top:16px}.event-filters{grid-template-columns:1fr 1fr;gap:9px;padding:11px}.event-filters label:first-child,.event-filters label:nth-child(2),.filter-actions{grid-column:1/-1}.filter-actions button{flex:1}.event-bulkbar{align-items:flex-start;flex-wrap:wrap}.mark-all-seen{margin-left:0}.event-bulkbar>span:last-child{width:100%}.event-card{grid-template-columns:24px 94px minmax(0,1fr);gap:9px}.event-card .event-thumbnail{width:94px;height:68px}.event-actions{grid-column:2/-1;flex-wrap:wrap}.event-actions .download-button{display:inline-block}.event-check span{display:none}.pagination{align-items:flex-start;flex-direction:column;gap:10px}.pagination>div{width:100%;justify-content:space-between}.pagination b{min-width:auto}.event-row{grid-template-columns:48px 1fr auto}.event-thumbnail.compact{width:45px;height:42px}.event-row time{display:none}}
.count{background:#2f78ce;color:#fff}.count.zero{display:none}.event-card.unviewed{border-left:3px solid #2f78ce;background:#fbfdff}.event-row.unviewed{box-shadow:inset 3px 0 #2f78ce}.new-event{display:inline-block;margin-left:7px;border-radius:4px;background:#e1eeff;color:#2566b8;padding:2px 5px;font-size:7px;font-style:normal;font-weight:800;letter-spacing:.5px;vertical-align:1px}
.detection-badge{display:inline-block;margin-left:6px;border-radius:4px;padding:3px 6px;font-size:8px;font-style:normal;font-weight:800;letter-spacing:.35px;vertical-align:1px}.detection-person{background:#dcecff;color:#175da9}.detection-vehicle{background:#dcf3e6;color:#207044}.detection-animal{background:#fff0d8;color:#9b5815}.detection-other{background:#eee5fa;color:#7043a2}.detection-motion{background:#e9edeb;color:#53615b}@media(max-width:720px){.detection-badge{margin-left:5px;padding:2px 5px;font-size:7px}}
body{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:15px}.brand{font-size:20px}.brand small{font-size:11px}.sidebar nav button{padding:13px 12px;font-size:15px}.storage-mini>div:first-child,.storage-mini small{font-size:12px}.system-ok b{font-size:13px}.system-ok small{font-size:11px}.topbar p,.section-heading p,.settings-card p{font-size:11px}.topbar h1{font-size:32px}.top-actions>span{font-size:14px}.summary-copy{font-size:14px}.outline-button{padding:10px 14px;font-size:13px}.camera-preview{display:block;width:100%;padding:0;border:0;text-align:left;cursor:pointer}.camera-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .2s ease}.camera-preview:hover img{transform:scale(1.015)}.camera-preview:focus-visible{outline:4px solid #2f78ce;outline-offset:-4px}.camera-preview .offline{z-index:1;font-size:14px}.preview-action{position:absolute;z-index:3;left:50%;top:50%;display:flex;align-items:center;gap:9px;transform:translate(-50%,-50%);border-radius:24px;background:#0a1729d9;color:#fff;padding:10px 15px;font-size:13px;font-weight:700;box-shadow:0 8px 25px #0005;opacity:.92}.preview-action span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#2f78ce;font-size:10px}.camera-preview:hover .preview-action{background:#152b49}.live-pill{font-size:11px}.feed-label b{font-size:17px}.feed-label span{font-size:12px}.camera-footer{padding:14px 16px;font-size:13px}.section-heading h2,.settings-card h2{font-size:25px}.section-heading button{font-size:13px}.event-main b,.event-card b{font-size:14px}.event-main span,.event-card small{font-size:12px}.event-row time{font-size:12px}.lock-button,.download-button,.delete-button{padding:8px 10px;font-size:12px}.event-filters label,.event-check{font-size:12px}.event-filters input,.event-filters select{font-size:14px}.filter-button,.clear-filter-button,.mark-all-seen{font-size:13px}.event-filter-message,.event-bulkbar{font-size:13px}.event-details b{font-size:15px}.event-details small{font-size:12px}.event-total-label,.pagination{font-size:12px}.pagination button,.pagination b{font-size:12px}.settings-card>div:first-child>span,.alert-settings>span,.pwa-settings>span,.password-settings>span{font-size:13px;line-height:1.5}.settings-card label{font-size:13px}.settings-card input,.settings-card select{padding:11px;font-size:14px}.camera-setting [data-camera-url],.camera-setting [data-camera-live-url]{font-size:13px}.camera-setting .live-url-field small{font-size:11px}.remove-camera,.add-camera-button{font-size:12px}.storage-warning,.alert-grid label small{font-size:11px}.alert-enabled{font-size:13px}.test-email-row span,#settings-message,.pwa-install-row span{font-size:13px}.password-settings{margin-top:28px;padding-top:24px;border-top:1px solid #e2e7e4}.password-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:17px}.password-action-row{display:flex;align-items:center;gap:13px;margin-top:16px}.password-action-row .outline-button{color:#2f6fcb}.password-action-row span{font-size:13px;color:#2f71bd}.viewer-dialog{width:min(1000px,calc(100% - 32px));overflow:hidden;border-radius:16px}.live-viewer-dialog{width:min(1120px,calc(100% - 32px))}.viewer-dialog::backdrop{background:#07111ed9;backdrop-filter:blur(7px)}.viewer-dialog>button{width:42px;height:42px;right:14px;top:14px;font-size:27px}.live-viewer-media{position:relative;aspect-ratio:16/9;background:#050b13}.live-viewer-media video{width:100%;height:100%;max-height:none;object-fit:contain}.live-viewer-media .offline{position:absolute;z-index:2;inset:0;display:grid;place-items:center;background:radial-gradient(circle,#284b78,#091525);color:#dbe8f8;font-size:16px}.viewer-live-badge{position:absolute;z-index:3;left:17px;top:17px;border-radius:6px;background:#0a172bd9;color:#fff;padding:7px 10px;font-size:12px;font-weight:800}.viewer-live-badge::first-letter{color:#51a1ff}.viewer-caption{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px 18px;background:#0b192c;color:#fff;font-size:14px}.viewer-caption b{font-size:17px}.viewer-caption span{color:#aebed4;font-size:13px}#player-caption.viewer-caption{display:block;font-size:14px}.login-card>p{font-size:11px}.login-card label{font-size:13px}.login-card input{font-size:15px}.login-card button{font-size:14px}
@media(max-width:720px){body{font-size:14px}.topbar h1{font-size:27px}.summary-copy{font-size:13px}.camera-preview .preview-action{padding:9px 13px;font-size:12px}.feed-label b{font-size:16px}.event-main b,.event-card b{font-size:14px}.event-main span,.event-card small{font-size:11px}.password-grid{grid-template-columns:1fr}.password-action-row{align-items:flex-start;flex-direction:column}.viewer-dialog,.live-viewer-dialog{width:calc(100% - 16px);border-radius:12px}.viewer-dialog>button{width:38px;height:38px;right:9px;top:9px}.viewer-caption{align-items:flex-start;flex-direction:column;padding:13px}.live-viewer-media .offline{font-size:14px}}
.camera-feed{min-height:0;aspect-ratio:16/9}.camera-grid.single-camera{grid-template-columns:minmax(0,1100px)}.dashboard-live{display:block;width:100%;padding:0;border:0;background:#07111e;text-align:left;cursor:pointer}.dashboard-live video{object-fit:contain;pointer-events:none}.dashboard-live:focus-visible{outline:4px solid #2f78ce;outline-offset:-4px}.expand-hint{position:absolute;z-index:3;right:14px;top:14px;border-radius:6px;background:#0b192dcc;color:#fff;padding:7px 10px;font-size:12px;font-weight:700;opacity:.78}.dashboard-live:hover .expand-hint{opacity:1;background:#17365f}.dashboard-live .offline{z-index:1}
@media(max-width:720px){.camera-grid.single-camera{grid-template-columns:1fr}.expand-hint{right:10px;top:10px;padding:6px 8px;font-size:11px}}
.camera-grid{max-width:1320px;align-items:start}.camera-grid.single-camera{grid-template-columns:minmax(0,880px)}.dashboard-live video{inset:0;display:block;object-fit:contain;object-position:center}#player-dialog{width:min(900px,calc(100% - 32px))}#event-player{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:68vh;object-fit:contain;background:#000}#player-caption.viewer-caption{min-height:48px;padding:14px 18px}
@media(max-width:720px){.camera-grid.single-camera{grid-template-columns:1fr}#player-dialog{width:calc(100% - 16px)}#event-player{max-height:72vh}}
.feed-label{left:auto;right:17px;text-align:right}
.sidebar,.workspace{transition:width .2s ease,margin-left .2s ease,padding .2s ease}.sidebar-toggle{position:absolute;z-index:6;right:-14px;top:82px;display:grid;place-items:center;width:30px;height:30px;border:1px solid #304865;border-radius:50%;background:#162a45;color:#dce8f7;font-size:24px;line-height:1;box-shadow:0 4px 14px #07111e66}.sidebar-toggle:hover{background:#234467}.app-shell.sidebar-collapsed .sidebar{width:76px;padding-inline:10px}.app-shell.sidebar-collapsed .workspace{margin-left:76px}.app-shell.sidebar-collapsed .brand{justify-content:center;padding-inline:0}.app-shell.sidebar-collapsed .brand>span:last-child,.app-shell.sidebar-collapsed .nav-label,.app-shell.sidebar-collapsed .count,.app-shell.sidebar-collapsed .sidebar-bottom{display:none}.app-shell.sidebar-collapsed .sidebar nav button{justify-content:center;gap:0;padding-inline:0}.app-shell.sidebar-collapsed .sidebar nav i{width:auto}.app-shell.sidebar-collapsed .sidebar nav button.active:before{left:-10px}
@media(max-width:720px){.sidebar-toggle{display:none}.app-shell.sidebar-collapsed .workspace{margin-left:0}}
.pull-refresh{position:fixed;z-index:100;left:50%;top:0;display:flex;align-items:center;gap:8px;transform:translate(-50%,-62px);padding:9px 14px;border:1px solid #bfd0e5;border-radius:24px;background:#fff;color:#3e5877;font-size:12px;box-shadow:0 5px 20px #0b1a2d33;opacity:0;transition:opacity .12s ease,background .12s ease;pointer-events:none}.pull-refresh.visible{opacity:1}.pull-refresh.ready{background:#e8f2ff;color:#2467b7}.pull-refresh.refreshing span{animation:pull-spin .7s linear infinite}@keyframes pull-spin{to{transform:rotate(360deg)}}
.system-metrics{display:flex;align-items:center;gap:7px}.system-metrics span{display:flex;align-items:center;gap:5px;padding:7px 9px;border:1px solid #d8e2ee;border-radius:8px;background:#fff;color:#748195;font-size:11px;font-weight:700}.system-metrics b{color:#284f7c;font-size:12px}.system-metrics span.high{border-color:#e5aaa4;background:#fff2f1;color:#a33d35}.system-metrics span.high b{color:#b72e26}@media(max-width:720px){.top-actions{gap:6px}.top-actions>span{display:block;font-size:10px}.system-metrics{gap:4px}.system-metrics span{gap:3px;padding:6px 6px;font-size:9px}.system-metrics b{font-size:10px}.topbar p{display:none}.avatar{width:32px;height:32px}}
@media(max-width:720px){.topbar{height:auto;min-height:calc(108px + env(safe-area-inset-top));padding:calc(env(safe-area-inset-top) + 10px) 0 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"heading avatar" "metrics metrics";align-content:end;align-items:center;column-gap:12px;row-gap:9px}.topbar>div:first-child{grid-area:heading;min-width:0}.topbar h1{line-height:1.05;white-space:nowrap}.top-actions{display:contents}.system-metrics{grid-area:metrics;justify-content:flex-start;gap:7px}.system-metrics span{padding:7px 9px;font-size:10px}.system-metrics b{font-size:11px}#clock{display:none}.avatar{grid-area:avatar;justify-self:end}}
@media(min-width:721px){.viewer-dialog{width:min(1344px,calc(100% - 32px))}.live-viewer-dialog{width:min(1344px,calc(100% - 32px))}#player-dialog{width:min(1344px,calc(100% - 32px))}#event-player{max-height:81.6vh}}
.recent-actions{display:flex;align-items:center;gap:12px}.section-heading .refresh-recent{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid #cfdbea;border-radius:7px;background:#fff;color:#356cae}.refresh-recent:disabled{cursor:wait;opacity:.65}.refresh-recent .refresh-icon{display:inline-block;line-height:1;transform-origin:center}.refresh-recent.refreshing .refresh-icon{animation:pull-spin .7s linear infinite}@media(max-width:720px){.recent-actions{gap:6px}.section-heading .refresh-recent{padding:6px 8px}.refresh-recent .refresh-label{display:none}}
.camera-setting{grid-template-columns:minmax(0,1fr) 170px 190px auto;align-items:start}.camera-setting-actions{display:flex;align-items:center;gap:12px;padding-top:24px}.camera-setting .enabled{padding:0}.camera-setting-actions .remove-camera{margin:0}.camera-setting .recording-url-field,.camera-setting .live-url-field{grid-column:1/-1}.camera-setting .motion-area-field small,.camera-setting .ai-confidence-field small{color:#87938d;font-size:11px;line-height:1.35}.storage-form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.motion-setting-note{display:block;margin-top:12px;color:#65716c;font-size:12px}@media(max-width:720px){.camera-setting{grid-template-columns:1fr}.camera-setting-actions{justify-content:space-between;padding-top:0}.camera-setting .recording-url-field,.camera-setting .live-url-field{grid-column:auto}.storage-form-grid{grid-template-columns:1fr}}
.smart-detection-field{grid-column:1/-1;margin:2px 0 1px;padding:12px 13px;border:1px solid #dce3df;border-radius:9px}.smart-detection-field legend{padding:0 5px;color:#65716c;font-size:13px}.smart-detection-field>small{display:block;margin-top:8px;color:#87938d;font-size:11px}.detection-options{display:flex;flex-wrap:wrap;gap:8px}.settings-card .detection-options label{display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid #d8e0dc;border-radius:18px;background:#f8faf9;color:#34413b;font-size:13px;cursor:pointer}.detection-options input{width:auto}.settings-card .detection-options label:has(input:checked){border-color:#79a9e2;background:#edf5ff;color:#205fae}@media(max-width:720px){.smart-detection-field{grid-column:auto}.detection-options{gap:7px}.settings-card .detection-options label{padding:8px 10px}}
.password-grid{align-items:start}.password-grid label{align-content:start}
.zoom-surface{position:relative;overflow:hidden;background:#000;touch-action:none;user-select:none}.zoom-content{width:100%;height:100%;transform-origin:center center;will-change:transform}.zoom-surface.zoomed{cursor:grab}.zoom-surface.panning{cursor:grabbing}.live-viewer-media>#live-zoom-surface{position:absolute;inset:0}.live-viewer-media #live-zoom-content video{display:block;width:100%;height:100%;max-height:none;object-fit:contain}.playback-zoom-surface{width:100%;aspect-ratio:16/9;max-height:81.6vh}.playback-zoom-surface #event-player{width:100%;height:100%;max-height:none;object-fit:contain}.viewer-caption>div:first-child{display:grid;gap:3px}.zoom-controls{display:flex;align-items:center;gap:6px;margin-left:auto}.zoom-controls button{min-width:36px;height:34px;border:1px solid #38506d;border-radius:7px;background:#152842;color:#fff;padding:0 10px;font-size:14px;font-weight:750}.zoom-controls button:hover{background:#21436d}.zoom-controls output{min-width:48px;color:#b9c9dc;font-size:12px;text-align:center}#player-caption.viewer-caption{display:flex;align-items:center;justify-content:space-between;gap:14px}@media(max-width:720px){.zoom-controls{width:100%;margin-left:0}.zoom-controls button{flex:1;min-width:42px}.zoom-controls output{min-width:52px}#player-caption.viewer-caption{align-items:stretch;flex-direction:column}.playback-zoom-surface{max-height:72vh}}
@media(orientation:landscape) and (max-height:600px){.viewer-dialog,.live-viewer-dialog,#player-dialog{width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 12px);max-width:none;max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 8px);border-radius:10px}.live-viewer-media,.playback-zoom-surface{height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 58px);max-height:none;aspect-ratio:auto!important}.viewer-caption,#player-caption.viewer-caption{min-height:50px;padding:7px 12px;align-items:center;flex-direction:row;gap:10px}.viewer-caption>div:first-child{min-width:0}.viewer-caption>div:first-child span{display:none}#player-caption-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zoom-controls{width:auto;flex:0 0 auto;margin-left:auto;gap:4px}.zoom-controls button{flex:0 0 auto;min-width:32px;height:32px;padding:0 8px}.zoom-controls output{min-width:44px}.viewer-dialog>button{right:9px;top:9px;width:36px;height:36px}.viewer-live-badge{left:10px;top:10px}}
.inline-player-controls{position:absolute;z-index:5;left:8px;right:8px;bottom:8px;display:flex;align-items:center;gap:9px;min-height:46px;padding:7px 10px;border-radius:10px;background:#07111ee6;color:#fff;box-shadow:0 4px 18px #0007;touch-action:manipulation;opacity:1;transform:translateY(0);transition:opacity .28s ease,transform .28s ease}.inline-player-controls.controls-hidden{opacity:0;transform:translateY(12px);pointer-events:none}.inline-player-controls[hidden]{display:none!important}.inline-player-controls button{display:grid;place-items:center;flex:0 0 36px;width:36px;height:34px;padding:0;border:0;border-radius:7px;background:#18314f;color:#fff;font-size:15px}.inline-player-controls button:active{background:#285687}.inline-player-controls span{flex:0 0 auto;min-width:92px;font-size:12px;font-variant-numeric:tabular-nums}.inline-player-controls input{min-width:60px;flex:1;accent-color:#4c9cf5;touch-action:manipulation}@media(max-width:720px){.inline-player-controls{left:6px;right:6px;bottom:6px;gap:6px;padding:6px 8px}.inline-player-controls span{min-width:84px;font-size:11px}.inline-player-controls button{flex-basis:34px;width:34px;height:32px}}
.viewer-dialog[open]{display:flex;flex-direction:column;max-height:calc(100dvh - 24px)}.viewer-dialog[open]>.live-viewer-media,.viewer-dialog[open]>.playback-zoom-surface{flex:1 1 auto;min-height:0;max-height:calc(100dvh - 96px)}.viewer-dialog[open]>.viewer-caption{flex:0 0 auto}@media(max-width:720px) and (orientation:portrait){.viewer-dialog[open]>.live-viewer-media,.viewer-dialog[open]>.playback-zoom-surface{max-height:calc(100dvh - 154px)}}@media(orientation:landscape) and (max-height:600px){.viewer-dialog[open]>.live-viewer-media,.viewer-dialog[open]>.playback-zoom-surface{height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 58px);max-height:none}}
.camera-setting{display:block;padding:0;overflow:hidden}.camera-setting>summary{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px;cursor:pointer;list-style:none;background:#f8fafc;color:#152b45}.camera-setting>summary::-webkit-details-marker{display:none}.camera-setting>summary span{display:grid;gap:4px}.camera-setting>summary b{font-size:15px}.camera-setting>summary small{color:#728096;font-size:12px;font-weight:400}.camera-setting>summary i{font-size:20px;font-style:normal;transition:transform .2s}.camera-setting[open]>summary{border-bottom:1px solid #e1e6e3;background:#f1f6fc}.camera-setting[open]>summary i{transform:rotate(180deg)}.camera-setting-body{display:grid;grid-template-columns:minmax(0,1fr) 170px 190px auto;gap:12px;align-items:start;padding:15px}.camera-setting-body .recording-url-field,.camera-setting-body .live-url-field,.camera-zone-field{grid-column:1/-1}.camera-zone-field{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px;border:1px solid #d8e0dc;border-radius:9px;background:#fafcfb}.camera-zone-field>div{display:grid;gap:4px}.camera-zone-field b{color:#34413b;font-size:13px}.camera-zone-field small{color:#87938d;font-size:11px}.zone-dialog{width:min(1100px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:18px;border:0;border-radius:16px;background:#f5f8fc;color:#12243c;box-shadow:0 24px 80px #0008}.zone-dialog::backdrop{background:#07111ee8;backdrop-filter:blur(6px)}.zone-dialog[open]{display:flex;flex-direction:column;gap:12px}.zone-close{position:absolute;z-index:4;right:17px;top:17px;width:40px;height:40px;border:0;border-radius:50%;background:#10243ee8;color:#fff;font-size:26px}.zone-heading p{color:#7a8b83;font-size:11px;font-weight:800;letter-spacing:1.5px}.zone-heading h2{margin-top:3px;font-size:24px}.zone-heading span{display:block;margin-top:4px;color:#667589;font-size:12px}.zone-stage{position:relative;flex:1 1 auto;min-height:280px;max-height:calc(100dvh - 245px);aspect-ratio:16/9;overflow:hidden;border-radius:11px;background:#07111e;touch-action:none}.zone-stage video{display:block;width:100%;height:100%;object-fit:contain}.zone-stage canvas{position:absolute;z-index:3;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none}.zone-stage .offline{position:absolute;z-index:2;inset:0;display:grid;place-items:center;color:#dbe8f8}.zone-legend{display:flex;gap:17px;font-size:12px}.zone-legend span::before{content:"";display:inline-block;width:11px;height:11px;margin-right:6px;border-radius:3px;vertical-align:-1px}.ai-zone-key::before{background:#a84fde}.motion-zone-key::before{background:#ed7827}.zone-toolbar{display:flex;flex-wrap:wrap;gap:8px}.zone-toolbar button{padding:9px 12px;border:1px solid #cbd7e5;border-radius:8px;background:#fff;color:#31506f;font-size:12px;font-weight:700}.zone-toolbar button.active{border-color:#6c36a6;background:#f1e5ff;color:#6c269d}.zone-toolbar button:disabled{opacity:.45}.zone-toolbar .zone-apply{margin-left:auto;border-color:#2f76c9;background:#2f76c9;color:#fff}.zone-help{color:#64758a;font-size:11px;line-height:1.4}@media(max-width:720px){.camera-setting-body{grid-template-columns:1fr;padding:12px}.camera-setting-body .recording-url-field,.camera-setting-body .live-url-field,.camera-zone-field{grid-column:auto}.camera-zone-field{align-items:stretch;flex-direction:column}.zone-dialog{padding:12px}.zone-heading{padding-right:44px}.zone-stage{min-height:210px;max-height:calc(100dvh - 300px)}.zone-toolbar button{flex:1 1 auto}.zone-toolbar .zone-apply{margin-left:0}.zone-help{display:none}}