@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@600;700&display=swap";:root{color:#1a3038;--navy:#0d4148;--teal:#075e66;--line:#dce7ea;--muted:#78909a;background:#edf4f6;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}.app{background:#edf4f6;min-height:100vh;display:flex}.sidebar{color:#a9cbcb;background:#0d4148;flex-direction:column;flex-shrink:0;width:202px;min-height:100vh;padding:23px 12px 18px;display:flex}.brand{color:#fff;align-items:flex-start;gap:9px;padding:0 9px 25px;display:flex}.brand img{object-fit:contain;filter:brightness(0)invert();width:31px;height:31px}.brand strong{font-family:Space Grotesk;font-size:16px;line-height:17px;display:block}.brand small{color:#94bdbc;margin-top:3px;font-size:8px;line-height:11px;display:block}nav{gap:4px;display:grid}nav button{color:#9abdbc;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;align-items:center;gap:11px;width:100%;padding:11px 10px;font-size:11px;display:flex}nav button:hover,nav button.active{color:#fff;background:#185a61}nav button.active{box-shadow:inset 3px 0 #63d2bc}.side-status{border-top:1px solid #2a6065;gap:14px;margin-top:auto;padding:13px 8px 0;display:grid}.side-status>div{align-items:flex-start;gap:9px;display:flex}.side-status b,.side-status small{display:block}.side-status b{color:#e5f4f2;font-size:10px}.side-status small{color:#83a8aa;margin-top:3px;font-size:8px}.online-dot{background:#53d1ad;border-radius:50%;width:7px;height:7px;margin-top:3px;display:block;box-shadow:0 0 0 3px #225d61}.server-icon{color:#80bfc0;width:9px;font-size:15px;line-height:11px}.main{flex:1;min-width:0}header{border-bottom:1px solid var(--line);background:#fff;justify-content:space-between;align-items:center;height:89px;padding:19px 28px 16px;display:flex}header h1{color:#18353d;margin:0;font-family:Space Grotesk;font-size:23px}header p{color:#7b9299;margin:4px 0 0;font-size:11px}.header-right{align-items:center;gap:22px;display:flex}.header-date{text-align:right;color:#73878e;font-size:10px;line-height:15px}.header-date b{color:#1d3b43;font-size:11px}.admin{align-items:center;gap:8px;display:flex}.admin-avatar{color:#fff;background:#d6ad63;border-radius:50%;place-items:center;width:29px;height:29px;font-size:10px;font-weight:700;display:grid}.admin b,.admin small{display:block}.admin b{color:#1c3b42;font-size:10px}.admin small{color:#7c9298;margin-top:2px;font-size:9px}.bell{color:#80969a}.mobile-menu{background:0;border:0;display:none}.page-body{padding:20px 27px 30px}.toolbar{justify-content:space-between;align-items:end;margin-bottom:14px;display:flex}.filters{align-items:end;gap:10px;display:flex}.filters label{color:#7b9197;gap:5px;font-size:9px;display:grid}.filters select{color:#29434b;background:#fff;border:1px solid #d5e2e5;border-radius:5px;outline:0;min-width:135px;padding:8px 28px 8px 10px;font-size:10px}.filters label:nth-child(2) select{min-width:136px}.filters label:nth-child(3) select{min-width:92px}.online-count{color:#367c70;align-items:center;gap:5px;margin:0 6px 9px;font-size:10px;display:flex}.online-count i{background:#43b895;border-radius:50%;width:7px;height:7px}.snapshot,.modal-action{color:#fff;cursor:pointer;background:#0e6269;border:0;border-radius:5px;align-items:center;gap:7px;padding:9px 13px;font-size:10px;display:flex}.camera-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;display:grid}.camera-card{background:#fff;border:1px solid #dde8ea;border-radius:7px;min-width:0;overflow:hidden;box-shadow:0 2px 6px #204b540b}.camera-card-head{justify-content:space-between;align-items:center;height:48px;padding:10px 12px;display:flex}.camera-card-head b,.camera-card-head small{display:block}.camera-card-head b{color:#214149;font-size:11px}.camera-card-head small{color:#91a2a7;margin-top:3px;font-size:8px}.online-label{color:#3a8c79;align-items:center;gap:4px;font-size:9px;display:flex}.online-label i{background:#39b58e;border-radius:50%;width:6px;height:6px;display:block}.feed{cursor:pointer;background-color:#547e82;border:0;width:100%;height:154px;display:block;position:relative;overflow:hidden}.feed-one{background:linear-gradient(140deg,#99b8b4 0%,#547b7b 45%,#273f45 100%)}.feed-two{background:linear-gradient(140deg,#b3a68e,#667267 48%,#28383a)}.feed-three{background:linear-gradient(140deg,#b4c3be,#748b8a 45%,#334c50)}.feed-four{background:linear-gradient(140deg,#9dabb0,#526c75 48%,#263b43)}.feed:before{content:"";opacity:.8;background:linear-gradient(110deg,#0000 22%,#ffffff1f 23%,#0000 24% 58%,#ffffff1a 59%,#0000 60%);position:absolute;inset:0}.feed-grid{background-color:#0000;background-image:linear-gradient(#ffffff14 1px,#0000 1px),linear-gradient(90deg,#ffffff14 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:38px 31px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:absolute;inset:0}.demo-label{color:#fffc;letter-spacing:.14em;font-size:8px;font-weight:700;position:absolute;top:9px;left:10px}.ai-overlay{color:#a9e5d2;text-align:left;background:#062528b3;border-left:2px solid #5bceb2;padding:5px 7px;font-size:8px;line-height:12px;position:absolute;top:27px;left:10px}.ai-overlay b{color:#fff;font-size:8px}.feed-center{color:#0000;background:0 0;place-items:center;font-size:10px;transition:all .15s;display:grid;position:absolute;inset:0}.feed:hover .feed-center{color:#fff;background:#06262b59}.camera-controls{color:#d2e2e2;background:#172b30;justify-content:space-between;align-items:center;height:32px;padding:0 11px;font-size:8px;display:flex}.camera-controls>span{align-items:center;gap:5px;display:flex}.camera-controls time{color:#93a8aa;margin-left:2px}.rec-dot{background:#ec5d59;border-radius:50%;width:6px;height:6px}.control-buttons{gap:10px}.control-buttons button{color:#d2e2e2;cursor:pointer;background:0 0;border:0;place-items:center;padding:0;display:grid}.bottom-panels{grid-template-columns:1.35fr 1fr;gap:15px;margin-top:18px;display:grid}.activity-panel,.info-panel{background:#fff;border:1px solid #dde8ea;border-radius:7px}.activity-panel{padding:13px 16px}.panel-heading{color:#78949a;justify-content:space-between;align-items:flex-start;display:flex}.panel-heading h2{color:#23434a;margin:0;font-size:13px}.panel-heading p{color:#8ba0a5;margin:4px 0 9px;font-size:9px}.activity-row{border-top:1px solid #edf1f2;align-items:center;gap:9px;padding:9px 0;display:flex}.activity-icon{border-radius:50%;place-items:center;width:20px;height:20px;font-size:10px;font-weight:700;display:grid}.activity-icon.warning{color:#b78322;background:#fff3d8}.activity-icon.success{color:#2f9b78;background:#e2f7ee}.activity-icon.info{color:#397da1;background:#e3f1f8}.activity-row span:nth-child(2){flex:1}.activity-row b,.activity-row small{display:block}.activity-row b{color:#355057;font-size:9px}.activity-row small{color:#8da0a4;margin-top:2px;font-size:8px}.activity-row time{color:#83979c;font-size:9px}.info-panel{color:#318c79;align-items:flex-start;gap:14px;padding:22px;display:flex}.info-panel h3{color:#25454c;margin:0 0 6px;font-size:13px}.info-panel p,.info-panel small{color:#788f95;margin:0;font-size:9px;line-height:15px;display:block}.info-panel small{color:#a0afb2;margin-top:8px}.other-page{padding:32px}.modal-backdrop{z-index:4;background:#092529a3;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.camera-modal{background:#fff;border-radius:9px;width:min(620px,100%);position:relative;overflow:hidden;box-shadow:0 18px 50px #00000040}.modal-close{color:#fff;z-index:2;cursor:pointer;background:#00000047;border:0;border-radius:50%;place-items:center;width:29px;height:29px;display:grid;position:absolute;top:12px;right:12px}.modal-title{padding:19px 20px 13px}.modal-title h2{color:#193940;margin:9px 0 4px;font-size:18px}.modal-title p{color:#84979b;margin:0;font-size:10px}.live-badge{color:#398c78;align-items:center;gap:5px;font-size:9px;display:flex}.live-badge i{background:#3ab78e;border-radius:50%;width:6px;height:6px}.modal-feed{cursor:default;height:300px}.modal-meta{gap:35px;padding:17px 20px;display:flex}.modal-meta small,.modal-meta b{display:block}.modal-meta small{color:#8ca0a4;margin-bottom:5px;font-size:9px}.modal-meta b{color:#23444b;font-size:11px}.modal-meta b.green{color:#308c75}.modal-action{margin:0 20px 19px}.modal-action:hover,.snapshot:hover{background:#084f56}@media (width<=1000px){.sidebar{width:190px}.page-body{padding-left:18px;padding-right:18px}.header-right{gap:12px}.header-date{display:none}.camera-grid{gap:10px}}@media (width<=700px){.sidebar{z-index:5;transition:all .2s;position:fixed;top:0;bottom:0;left:-220px}.sidebar.open{left:0}.mobile-menu{color:#25444b;margin-right:10px;display:block}.main header{height:76px;padding:16px 15px}.main header>div:first-of-type{flex:1}.header-right .admin,.header-right .bell{display:none}.page-body{padding:15px}.toolbar{flex-direction:column;align-items:stretch;gap:10px}.filters{grid-template-columns:1fr 1fr;gap:8px;display:grid}.filters label select,.filters label:nth-child(2) select,.filters label:nth-child(3) select{width:100%;min-width:0}.online-count{margin:4px 0 0}.snapshot{justify-content:center}.camera-grid{grid-template-columns:1fr}.feed{height:175px}.bottom-panels{grid-template-columns:1fr}.modal-meta{justify-content:space-between;gap:12px}.modal-feed{height:220px}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}