@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap";html,body,#root{min-width:320px;min-height:100%;margin:0}body{min-height:100vh}button:disabled{opacity:.65;cursor:wait}:root{color:#242238;font-synthesis:none;background:#f7f7fb;font-family:DM Sans,Arial,sans-serif}*{box-sizing:border-box}button,input{font:inherit}button{cursor:pointer}.brand-logo{letter-spacing:-1.5px;color:#fff;font-size:25px;font-weight:800}.brand-logo b{color:#f6c844}.eyebrow{color:#8c82bd;letter-spacing:2px;font-size:10px;font-weight:800}.muted{color:#9290a2}.login-page{background:#fff;grid-template-columns:1fr 1fr;min-height:100vh;display:grid}.login-brand{color:#fff;background:radial-gradient(circle at 75% 20%,#46378c 0,#0000 38%),linear-gradient(145deg,#21194c,#171331);flex-direction:column;justify-content:space-between;padding:55px 9%;display:flex}.brand-message{max-width:510px}.brand-message h1{letter-spacing:-2px;margin:22px 0;font-size:clamp(38px,5vw,62px);line-height:1.08}.brand-message p{color:#c3bfd9;font-size:16px;line-height:1.8}.brand-visual{color:#f6c844;background:#ffffff08;border:1px solid #ffffff25;border-radius:18px;justify-content:center;align-items:center;gap:16px;height:135px;margin-top:55px;font-size:33px;display:flex}.brand-visual span{color:#c6c0e2;letter-spacing:3px;font-size:11px}.login-brand>small{color:#8e88ac;letter-spacing:1px;font-size:10px}.login-form-side{justify-content:center;align-items:center;padding:35px;display:flex}.login-card{width:100%;max-width:390px}.login-card h2{letter-spacing:-1px;margin:12px 0 5px;font-size:30px}.login-card>p{margin:0 0 34px;font-size:13px}.login-card label{margin:19px 0 8px;font-size:12px;font-weight:700;display:block}.login-card input{border:1px solid #e7e5ef;border-radius:9px;outline:none;width:100%;height:49px;padding:0 14px}.login-card input:focus{border-color:#7564bd;box-shadow:0 0 0 3px #7564bd18}.primary-button{color:#fff;background:#5b4a9b;border:0;border-radius:9px;padding:13px 18px;font-weight:700}.primary-button:hover{background:#493981}.login-button{justify-content:space-between;align-items:center;width:100%;margin-top:25px;display:flex}.login-button span{font-size:20px}.secure-note{text-align:center;color:#9996a8;margin-top:25px;font-size:11px}.error-message{color:#bd3c50;background:#fff0f2;border-radius:8px;margin-top:15px;padding:11px;font-size:12px}.mobile-logo{display:none}.app-shell{background:#f7f7fb;min-height:100vh;display:flex}.sidebar{color:#fff;background:#211b42;flex-direction:column;flex-shrink:0;width:248px;padding:27px 16px 18px;display:flex}.sidebar-brand{border-bottom:1px solid #ffffff16;padding:0 13px 25px}.sidebar-brand small{color:#9189b4;letter-spacing:2px;margin-top:5px;font-size:8px;display:block}.workspace{background:#ffffff0d;border-radius:9px;align-items:center;gap:10px;margin:22px 4px 28px;padding:12px 9px;display:flex}.workspace-icon,.avatar{color:#31264e;background:#f2c84a;border-radius:9px;place-items:center;width:34px;height:34px;font-weight:800;display:grid}.workspace strong,.workspace small,.user-info strong,.user-info small{display:block}.workspace strong{font-size:11px}.workspace small{color:#a49dbc;margin-top:3px;font-size:10px}.workspace-arrow{color:#a49dbc;margin-left:auto}.nav-group{margin-bottom:24px}.nav-heading{color:#837ca3;letter-spacing:1.5px;padding:0 12px 10px;font-size:9px;font-weight:800}.nav-item{color:#bcb7d0;text-align:left;background:0 0;border:0;border-radius:8px;align-items:center;gap:12px;width:100%;margin:3px 0;padding:11px 12px;font-size:12px;display:flex}.nav-item:hover,.nav-item.active{color:#fff;background:#ffffff14}.nav-item.active{box-shadow:inset 3px 0 #f2c84a}.nav-icon{text-align:center;width:17px;font-size:16px}.nav-count{background:#ffffff20;border-radius:5px;margin-left:auto;padding:3px 7px;font-size:10px}.sidebar-bottom{margin-top:auto}.support-box{background:#ffffff0d;border-radius:10px;padding:14px}.support-icon{color:#211b42;background:#f2c84a;border-radius:50%;place-items:center;width:23px;height:23px;margin-bottom:10px;font-weight:800;display:grid}.support-box strong,.support-box small{display:block}.support-box strong{font-size:11px}.support-box small{color:#aaa4c2;margin-top:5px;font-size:10px;line-height:1.5}.logout-button{color:#bcb7d0;background:0 0;border:0;padding:18px 12px 0;font-size:12px}.logout-button span{margin-left:8px}.main-area{flex:1;min-width:0}.topbar{background:#fff;border-bottom:1px solid #eeedf3;justify-content:space-between;align-items:center;height:72px;padding:0 38px;display:flex}.breadcrumb{color:#9693a6;font-size:11px}.breadcrumb span{color:#d1cfda;margin:0 9px}.topbar-user{align-items:center;gap:12px;display:flex}.notification,.user-menu{color:#77738c;background:0 0;border:0;font-size:19px;position:relative}.notification i{background:#f0c33e;border-radius:50%;width:6px;height:6px;position:absolute;top:2px;right:3px}.avatar{border-radius:50%;width:34px;height:34px}.user-info strong{font-size:11px}.user-info small{color:#9996a8;margin-top:3px;font-size:10px}.page-content{max-width:1600px;margin:auto;padding:34px 38px 20px}.page-heading{justify-content:space-between;align-items:end;margin-bottom:27px;display:flex}.page-heading h1,.coming-soon h1{letter-spacing:-1px;margin:8px 0 5px;font-size:27px}.page-heading p,.section-heading p{color:#9693a6;margin:0;font-size:12px}.live-indicator{color:#9189ac;letter-spacing:1px;background:#fff;border:1px solid #eceaf3;border-radius:7px;padding:10px 13px;font-size:9px;font-weight:800}.live-indicator i,.status-pill i{background:#38b77b;border-radius:50%;width:7px;height:7px;margin-right:6px;display:inline-block}.stats-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;display:grid}.stat-card{background:#fff;border:1px solid #eeedf3;border-radius:11px;min-width:0;padding:19px}.stat-icon{color:#6553a5;background:#f0edfa;border-radius:9px;place-items:center;width:34px;height:34px;margin-bottom:17px;font-size:18px;display:grid}.stat-icon.green{color:#259b68;background:#e9f7f0}.stat-icon.orange{color:#d18b32;background:#fff4e5}.stat-card>span,.stat-card>strong,.stat-card>small{display:block}.stat-card>span{color:#8f8ca0;font-size:11px}.stat-card>strong{letter-spacing:-1px;margin:5px 0;font-size:27px}.stat-card>small{color:#aaa7b6;font-size:10px}.section-heading{justify-content:space-between;align-items:center;margin:36px 0 17px;display:flex}.section-heading h2{margin:0 0 5px;font-size:16px}.outline-button{color:#5c4b98;background:#fff;border:1px solid #e8e6ef;border-radius:7px;padding:9px 13px;font-size:11px;font-weight:700}.outline-button span{margin-left:10px}.camera-toolbar{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.search-box{color:#9995aa;background:#fff;border:1px solid #eae8f0;border-radius:7px;align-items:center;width:min(340px,100%);padding:0 11px;display:flex}.search-box input{background:0 0;border:0;outline:0;width:100%;height:38px;padding-left:8px;font-size:11px}.camera-total{color:#a09cad;font-size:10px}.camera-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;display:grid}.camera-card{background:#fff;border:1px solid #eeedf3;border-radius:10px;overflow:hidden}.camera-preview{color:#6f688e;background:linear-gradient(140deg,#292443,#17162b);place-items:center;height:185px;display:grid;position:relative}.preview-pattern{flex-direction:column;align-items:center;gap:9px;display:flex}.preview-pattern span{color:#6e6597;font-size:35px}.preview-pattern small{letter-spacing:1.5px;color:#8d86a9;font-size:8px}.status-pill{color:#299568;background:#ffffffeb;border-radius:5px;padding:6px 8px;font-size:9px;position:absolute;top:12px;left:12px}.status-pill.offline{color:#c47d29}.status-pill.offline i{background:#e8a33f}.expand-button{color:#fff;background:#ffffff20;border:0;border-radius:5px;padding:5px 8px;position:absolute;top:10px;right:12px}.camera-details{justify-content:space-between;padding:13px 14px 5px;display:flex}.camera-details strong,.camera-details small{display:block}.camera-details strong{font-size:11px}.camera-details small{color:#9996a8;margin-top:4px;font-size:10px}.camera-menu{color:#9996a8;letter-spacing:2px}.camera-location{color:#a09cad;padding:8px 14px 13px;font-size:10px}.coming-soon{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:55vh;display:flex}.coming-icon{color:#6756a4;background:#eeebf8;border-radius:18px;place-items:center;width:65px;height:65px;margin-bottom:20px;font-size:30px;display:grid}.coming-soon p{color:#9996a8;max-width:390px;margin-bottom:22px;font-size:13px;line-height:1.7}.footer{color:#aaa7b5;text-align:center;padding:34px 0 10px;font-size:9px}@media (width<=1000px){.sidebar{width:210px}.page-content{padding:27px 22px}.topbar{padding:0 22px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=700px){.login-page{grid-template-columns:1fr}.login-brand{display:none}.mobile-logo{margin-bottom:38px;display:block}.login-form-side{min-height:100vh;padding:25px}.sidebar{width:65px;padding:20px 7px}.sidebar-brand{text-align:center;padding:0 0 20px}.sidebar-brand .brand-logo{letter-spacing:-1px;font-size:13px}.sidebar-brand small,.workspace,.nav-heading,.nav-item:not(.active):first-letter,.nav-item,.nav-item .nav-count,.sidebar-bottom{display:none}.sidebar nav .nav-group:first-child .nav-item{justify-content:center;font-size:0;display:flex}.sidebar nav .nav-group:first-child .nav-icon{font-size:18px}.topbar{height:62px;padding:0 13px}.user-info,.user-menu,.notification{display:none}.page-content{padding:24px 14px}.page-heading{flex-direction:column;align-items:start;gap:15px}.page-heading h1{font-size:23px}.stats-grid{gap:9px}.stat-card{padding:13px}.stat-card>strong{font-size:23px}.camera-grid{grid-template-columns:1fr}.camera-preview{height:170px}}.customers-page{width:100%}.customers-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-bottom:20px;display:grid}.customers-summary>div{background:#fff;border:1px solid #eeedf3;border-radius:10px;padding:17px 20px}.customers-summary span,.customers-summary strong{display:block}.customers-summary span{color:#9693a6;font-size:11px}.customers-summary strong{color:#30294c;margin-top:7px;font-size:25px}.customers-toolbar{justify-content:space-between;margin:18px 0;display:flex}.customers-toolbar .search-box{width:min(520px,100%)}.customers-table-wrap{background:#fff;border:1px solid #eeedf3;border-radius:10px;overflow-x:auto}.customers-table{border-collapse:collapse;text-align:left;width:100%;min-width:850px}.customers-table th{color:#9693a6;letter-spacing:.7px;background:#faf9fc;padding:15px;font-size:9px}.customers-table td{color:#625e72;border-top:1px solid #f0eef4;padding:14px 15px;font-size:11px}.customers-table td strong,.customers-table td small{display:block}.customers-table td strong{color:#302c42;font-size:11px}.customers-table td small{color:#a09cad;margin-top:5px;font-size:10px}.customer-status{color:#777;background:#f0f0f3;border-radius:20px;padding:5px 9px;font-size:10px;display:inline-block}.customer-status.active{color:#259b68;background:#e8f7ef}.customer-status.inactive{color:#c47d29;background:#fff2e5}.customer-actions{gap:6px;display:flex}.customer-actions .outline-button{padding:7px 9px;font-size:10px}.customers-empty{text-align:center;color:#9693a6;padding:55px 20px;font-size:12px}.customers-empty strong{color:#514b65}.customers-empty p{margin-bottom:0}.customers-pagination{color:#9693a6;justify-content:space-between;align-items:center;padding:17px 0;font-size:11px;display:flex}.customers-pagination>div{gap:8px;display:flex}.customers-pagination button:disabled{opacity:.45;cursor:not-allowed}.customers-error{margin:12px 0}.customer-modal-backdrop{z-index:1000;background:#17132999;place-items:center;padding:18px;display:grid;position:fixed;inset:0;overflow-y:auto}.customer-modal{background:#fff;border-radius:14px;width:min(520px,100%);max-height:94vh;padding:25px;overflow-y:auto;box-shadow:0 20px 70px #17132940}.customer-modal-heading{justify-content:space-between;align-items:center;margin-bottom:22px;display:flex}.customer-modal-heading h2{color:#30294c;margin:7px 0 0;font-size:20px}.modal-close{color:#6553a5;background:#f2f0f7;border:0;border-radius:8px;width:32px;height:32px;font-size:21px}.customer-modal label{color:#625e72;margin:13px 0 6px;font-size:11px;font-weight:700;display:block}.customer-modal input{box-sizing:border-box;color:#302c42;border:1px solid #e8e6ef;border-radius:7px;outline:none;width:100%;height:40px;padding:0 11px;font-size:12px}.customer-modal input:focus{border-color:#7562b5;box-shadow:0 0 0 3px #7562b51a}.customer-modal-actions{justify-content:flex-end;gap:9px;margin-top:23px;display:flex}@media (width<=700px){.customers-summary{grid-template-columns:1fr 1fr;gap:8px}.customers-summary>div{padding:13px}.customers-toolbar{width:100%}.customers-pagination{gap:10px}.customer-modal{padding:19px}}.camera-summary{grid-template-columns:repeat(4,minmax(0,1fr))}@media (width<=700px){.camera-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}