:root{--nav:#172630;--blue:#207ba7;--bg:#f3f6f8;--line:#dfe6ea;--text:#1c2a33;--muted:#71808a;--green:#168466;--red:#d9534f;--purple:#6f65b5}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:"Segoe UI",Arial,sans-serif;font-size:12px}.app{min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:244px;background:var(--nav);color:#c8d1d6;display:flex;flex-direction:column}.brand{height:78px;background:#1d6688;color:#fff;display:flex;align-items:center;gap:12px;padding:0 20px}.brand-mark{width:38px;height:38px;border:1px solid #7fb6ce;border-radius:9px;display:grid;place-items:center;font-weight:700}.brand strong,.brand small,.user strong,.user small{display:block}.brand strong{font-size:15px}.brand small{font-size:10px;color:#bdd8e4}.sidebar nav{padding:18px 10px;flex:1}.sidebar nav>p{font-size:9px;letter-spacing:.16em;color:#70828d;margin:4px 12px 10px}.sidebar nav>p.system{margin-top:26px}.nav{width:100%;height:44px;border:0;border-radius:6px;background:transparent;color:#b9c5cb;text-align:left;padding:0 12px;cursor:pointer;font:12px inherit;display:flex;align-items:center;gap:12px}.nav i{font-style:normal;width:18px;text-align:center;color:#85a1ae}.nav:hover{background:#1d303b;color:#fff}.nav.active{background:#254554;color:#fff;box-shadow:inset 3px 0 #35a9dc}.nav b{margin-left:auto;background:#d94e4a;color:#fff;border-radius:10px;min-width:18px;text-align:center;font-size:9px}.nav b:empty{display:none}.user{height:72px;border-top:1px solid #2a3c47;display:flex;align-items:center;gap:10px;padding:0 17px}.user>span{width:34px;height:34px;background:#2d8db7;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:10px}.user strong{font-size:10px;color:#e9eff2}.user small{font-size:9px;color:#778b96}main{margin-left:244px;min-height:100vh}header{height:78px;background:#fff;border-bottom:1px solid var(--line);padding:0 28px;display:flex;align-items:center;justify-content:space-between}header h1{font-size:19px;margin:0 0 3px}header p{margin:0;color:var(--muted);font-size:11px}.monitor{display:flex;align-items:center;gap:7px;color:#5f6e77;font-size:10px}.monitor>i{width:7px;height:7px;border-radius:50%;background:#20a276;box-shadow:0 0 0 3px #dff4ed}.monitor span{border-left:1px solid var(--line);padding-left:13px;margin-left:6px}.content{padding:24px 28px 35px}.page{display:none}.page.active{display:block}.notice{background:#e8f5fb;border:1px solid #c7e6f4;color:#236c8d;border-radius:6px;padding:10px 13px;margin-bottom:14px}.hide{display:none!important}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}.stat{background:#fff;border:1px solid var(--line);border-left:3px solid #3995bc;border-radius:8px;padding:16px 18px}.stat.purple{border-left-color:var(--purple)}.stat.green{border-left-color:var(--green)}.stat.slate{border-left-color:#8a99a2}.stat span,.stat small{display:block}.stat span{color:#667681;font-size:10px;font-weight:600}.stat strong{display:block;font-size:28px;margin:8px 0 2px}.stat small{color:#8a969e;font-size:9px}.dash-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:15px;margin-bottom:15px}.panel,.table-card{background:#fff;border:1px solid var(--line);border-radius:8px}.panel-head{height:66px;padding:0 17px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e8edef}.panel-head h2{font-size:12px;margin:0 0 4px}.panel-head p{font-size:9px;color:#8a969e;margin:0}.panel-head button{border:0;background:transparent;color:#267fa7;font-size:9px;cursor:pointer}.health{height:200px;display:flex;align-items:center;justify-content:center;gap:55px}.donut{--pct:0%;width:128px;height:128px;border-radius:50%;background:conic-gradient(#1c8f6c var(--pct),#e6ecef 0);display:grid;place-items:center}.donut>div{width:91px;height:91px;border-radius:50%;background:#fff;display:grid;place-content:center;text-align:center}.donut strong{font-size:22px}.donut small{font-size:9px;color:#7f8b92}.legend{width:130px}.legend p{display:flex;align-items:center;margin:14px 0;color:#68767f;font-size:10px}.legend i{width:7px;height:7px;border-radius:50%;margin-right:8px}.legend i.online{background:var(--green)}.legend i.offline{background:var(--red)}.legend i.unknown{background:#c7d0d5}.legend b{margin-left:auto}.activity{height:200px;padding:15px 18px;overflow:auto}.activity.empty{display:grid;place-items:center;text-align:center;color:#9ca8ae;font-size:10px}.activity .event{padding:9px 0;border-bottom:1px solid #edf1f3;font-size:10px}.activity .event small{display:block;color:#929da4;margin-top:3px}.categories{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:20px}.cat{background:#f7f9fa;border:1px solid #e8edef;border-radius:6px;padding:12px}.cat span,.cat small{display:block;color:#7c8a92;font-size:9px}.cat strong{display:block;font-size:18px;margin:4px 0}.toolbar{display:flex;gap:9px;align-items:center;margin-bottom:14px}.toolbar>span{flex:1}.search,input,select,textarea{height:37px;background:#fff;border:1px solid #d5dee3;border-radius:5px;padding:0 10px;font:10px inherit;outline:none}.search{width:310px}.primary,.secondary{height:37px;border-radius:5px;padding:0 14px;font:600 10px inherit;cursor:pointer}.primary{background:#287fa5;color:#fff;border:1px solid #287fa5}.primary:hover{background:#216c8d}.secondary{background:#fff;color:#41515b;border:1px solid #d4dde2}.scan{height:78px;background:#eaf5fa;border:1px solid #cbe5f0;border-radius:7px;margin-bottom:14px;padding:0 14px;display:flex;align-items:center;gap:12px}.scan-icon{width:38px;height:38px;background:#fff;border:1px solid #d1e7f0;border-radius:7px;display:grid;place-items:center;color:#2783aa;font-size:21px}.scan strong,.scan small{display:block}.scan strong{color:#286e8e;font-size:11px}.scan small{color:#668592;font-size:9px;margin-top:3px}.scan input{margin-left:auto;width:250px}.table-card{overflow:auto;min-height:200px}table{width:100%;border-collapse:collapse;white-space:nowrap}th{text-align:left;background:#f6f8f9;color:#78868e;text-transform:uppercase;letter-spacing:.04em;font-size:9px;padding:11px 14px;border-bottom:1px solid #dde5e8}td{font-size:10px;color:#52616a;padding:12px 14px;border-bottom:1px solid #edf1f3}td strong,td small{display:block}td strong{font-size:11px;color:#263740}td small{font-size:9px;color:#8b979e;margin-top:3px}td code{background:#f1f5f7;padding:4px 6px;border-radius:4px;font-size:9px}.badge{display:inline-flex;align-items:center;border-radius:10px;padding:4px 7px;font-size:9px}.badge.online,.badge.in-stock,.badge.deployed{background:#e4f4ef;color:#167354}.badge.offline,.badge.checked-out{background:#fbe9e8;color:#b3423f}.badge.unknown{background:#eef2f4;color:#68767f}.stage{height:29px;font-size:9px}.source-btn{border:1px solid #d4dde2;background:#fff;color:#267fa7;border-radius:4px;padding:5px 8px;font-size:9px;cursor:pointer}.mini-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.mini{background:#fff;border:1px solid var(--line);border-left:3px solid #438caf;border-radius:6px;padding:11px 13px;display:flex;justify-content:space-between;align-items:center}.mini span{color:#738089;font-size:10px}.mini strong{font-size:17px}.alert-list{display:grid;gap:8px}.alert{background:#fff;border:1px solid var(--line);border-left:3px solid var(--red);border-radius:6px;padding:13px 15px;display:flex;align-items:center;gap:12px}.alert.resolved{opacity:.55;border-left-color:#9da9af}.alert .icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#fbe9e8;color:#c14440;font-weight:700}.alert .text{flex:1}.alert .text strong,.alert .text small{display:block}.alert .text small{color:#89969d;font-size:9px;margin-top:3px}.modal-wrap{position:fixed;inset:0;background:#0c1820a6;display:grid;place-items:center;z-index:50;padding:20px}.modal{width:min(620px,96vw);max-height:90vh;overflow:auto;background:#fff;border-radius:9px;box-shadow:0 25px 70px #09131955}.modal-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.modal-head h2{font-size:16px;margin:0 0 4px}.modal-head p{font-size:10px;color:#829098;margin:0}.modal-head>button{border:0;background:transparent;font-size:22px;color:#829098;cursor:pointer}.modal form{padding:18px 20px}.field{display:block;margin-bottom:12px}.field label{display:block;color:#52616a;font-size:10px;font-weight:600;margin-bottom:6px}.field input,.field select,.field textarea{width:100%}.field textarea{height:130px;padding:9px;resize:vertical;font-family:Consolas,monospace}.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.modal-actions{border-top:1px solid #e7ecef;margin:5px -20px -18px;padding:14px 20px;display:flex;justify-content:flex-end;gap:8px}.code-modal{width:min(850px,96vw)}pre{margin:0;background:#172630;color:#dce7ec;padding:18px;min-height:430px;max-height:65vh;overflow:auto;font:11px/1.6 Consolas,monospace}@media(max-width:950px){.stats{grid-template-columns:1fr 1fr}.dash-grid{grid-template-columns:1fr}}@media(max-width:700px){.sidebar{width:64px}.brand{padding:0 13px}.brand>div:last-child,.nav:not(.active){font-size:0}.nav{font-size:0;justify-content:center}.nav i{font-size:14px}.sidebar nav>p,.user div{display:none}main{margin-left:64px}.content{padding:18px 14px}.stats,.mini-stats{grid-template-columns:1fr 1fr}.categories{grid-template-columns:1fr 1fr}.scan>div:nth-child(2){display:none}.search{width:100%}.toolbar{flex-wrap:wrap}.toolbar>span{display:none}}

.actions{display:flex;gap:5px}.icon-btn{border:1px solid #d4dde2;background:#fff;color:#267fa7;border-radius:4px;padding:5px 8px;font-size:9px;cursor:pointer}.icon-btn.danger{color:#b3423f;border-color:#ecc9c7}.view-switch{display:flex;border:1px solid #d4dde2;border-radius:5px;overflow:hidden;background:#fff}.view-switch button{height:35px;padding:0 13px;border:0;border-right:1px solid #d4dde2;background:#fff;color:#61717a;font:600 9px inherit;cursor:pointer}.view-switch button:last-child{border:0}.view-switch button.active{background:#287fa5;color:#fff}.device-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:15px}.device-card{min-height:245px;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:grid;grid-template-columns:42% 58%}.device-visual{position:relative;display:grid;place-items:center;background:linear-gradient(145deg,#edf3f5,#dce6e9);border-right:1px solid var(--line)}.device-led{position:absolute;left:12px;top:12px;width:9px;height:9px;border-radius:50%;background:#aab5ba;box-shadow:0 0 0 4px #fff8}.device-card.online .device-led{background:#1aa477}.device-card.offline .device-led{background:#d9534f}.rpi-board{width:104px;height:142px;border-radius:9px;background:#168764;box-shadow:0 12px 22px #143d3350,inset 0 0 0 4px #126c51;position:relative;transform:rotate(-4deg)}.rpi-board:before{content:"";position:absolute;width:48px;height:48px;background:#2b3337;border:5px solid #c5d0d1;left:26px;top:44px;box-shadow:0 -35px 0 -11px #d7b744,0 35px 0 -13px #20282c}.rpi-board:after{content:"";position:absolute;width:14px;height:112px;right:8px;top:15px;background:repeating-linear-gradient(#d7bd4e 0 4px,#222 4px 8px);border-radius:2px}.generic-device{width:108px;height:128px;border-radius:8px;background:#33444e;box-shadow:0 12px 22px #1a293350,inset 0 0 0 5px #50636d;display:grid;place-items:center;color:#dce7eb;font-size:11px;font-weight:700;text-align:center;padding:10px}.device-info{padding:17px;display:flex;flex-direction:column}.device-info h3{font-size:14px;margin:0 0 3px}.device-info>small{color:#819098;margin-bottom:14px}.device-meta{display:grid;gap:8px}.device-meta div{font-size:10px;color:#263740}.device-meta label{display:block;text-transform:uppercase;font-size:8px;letter-spacing:.08em;color:#89969d;margin-bottom:2px}.device-info .actions{margin-top:auto;padding-top:13px}
html[data-theme="dark"] .view-switch{border-color:#35505e;background:#13232c}
html[data-theme="dark"] .view-switch button{border-right-color:#35505e;background:#13232c;color:#b9c9d1}
html[data-theme="dark"] .view-switch button:hover:not(.active){background:#1b303b;color:#eef6f9}
html[data-theme="dark"] .view-switch button.active{background:#2684ad;color:#fff}

.device-model{display:block;width:94%;height:94%;object-fit:contain;filter:drop-shadow(0 12px 10px #31444b40)}

.device-card{min-height:330px;grid-template-columns:52% 48%}.device-visual{min-height:330px}.device-model-viewer{position:absolute;inset:0;overflow:hidden;touch-action:none;background:radial-gradient(circle at 48% 40%,#f9fcfd 0,#e2ecef 70%)}.device-model-viewer canvas{display:block;width:100%;height:100%;cursor:grab}.device-model-viewer canvas:active{cursor:grabbing}.model-loading{position:absolute;inset:0;display:grid;place-items:center;color:#71808a;font-size:9px;letter-spacing:.04em}.device-model-viewer.loaded .model-loading{display:none}.model-tools{position:absolute;left:10px;bottom:10px;display:flex;gap:5px}.model-tools button{width:29px;height:29px;border:1px solid #cbd8de;border-radius:5px;background:#ffffffd9;color:#42606d;cursor:pointer;font-size:13px}.model-tools button.active{background:#287fa5;color:#fff;border-color:#287fa5}.device-led{z-index:3}.device-info{padding:18px 15px}

.device-card .device-model-viewer{background:radial-gradient(circle at 48% 38%,#d9e3e7 0,#a8bac2 62%,#8298a2 100%)}

.page .device-gallery{grid-template-columns:repeat(auto-fill,minmax(520px,1fr))}.device-gallery .device-card{grid-template-columns:minmax(330px,68%) minmax(175px,32%);min-height:390px}.device-gallery .device-visual{min-height:390px}.device-gallery .device-info{padding:22px 18px}

.page .device-gallery .device-card{grid-template-columns:minmax(310px,62%) minmax(190px,38%)}

/* Readability scale: larger typography throughout the application. */
html body{font-size:16px}
html body header h1{font-size:27px}
html body header p,html body .panel-head p{font-size:14px}
html body .panel-head h2{font-size:18px}
html body .brand strong{font-size:20px}
html body .brand small,html body .user small{font-size:13px}
html body .user strong{font-size:14px}
html body .nav{font-size:16px}
html body .sidebar nav>p{font-size:13px}
html body input,html body select,html body textarea,html body button{font-size:14px}
html body .primary,html body .secondary,html body .view-switch button,html body .stage{font-size:14px}
html body th{font-size:13px}
html body td{font-size:14px;line-height:1.5;padding-top:18px;padding-bottom:18px}
html body td strong{font-size:15px}
html body td small{font-size:13px}
html body td code{font-size:13px}
html body .badge{font-size:13px}
html body .stat span,html body .mini span{font-size:14px}
html body .stat small,html body .cat span,html body .cat small{font-size:13px}
html body .stat strong{font-size:35px}
html body .mini strong{font-size:24px}
html body .monitor{font-size:13px}
html body .scan strong{font-size:15px}
html body .scan small{font-size:13px}
html body .field label{font-size:14px}
html body .modal-head h2{font-size:22px}
html body .modal-head p{font-size:14px}
html body .device-info h3{font-size:20px}
html body .device-info>small,html body .device-meta div{font-size:14px}
html body .device-meta label{font-size:12px}
html body .icon-btn,html body .source-btn{font-size:13px}
html body .legend p,html body .activity .event,html body .alert .text strong{font-size:14px}
html body .legend small,html body .activity .event small,html body .alert .text small{font-size:12px}
html body .cat strong{font-size:23px}
html body .notice{font-size:14px}

.cctv-grid{display:grid;gap:24px}.cctv-group{min-width:0}.cctv-group-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}.cctv-group-head h2{margin:0;font-size:21px}.cctv-group-head span{color:var(--muted);font-size:13px}.cctv-group-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}.cctv-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;transition:transform .18s,box-shadow .18s}.cctv-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px #17263018}.cctv-thumb{height:190px;background:#dce6ea;overflow:hidden}.cctv-thumb img{width:100%;height:100%;object-fit:cover}.cctv-placeholder{height:100%;display:grid;place-content:center;text-align:center;color:#71808a;background:radial-gradient(circle,#edf3f5,#d3e0e5)}.cctv-placeholder span{font-size:24px;font-weight:700}.cctv-placeholder small{margin-top:8px}.cctv-card-body{padding:16px}.cctv-card-body>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px}.cctv-card h3{margin:0;font-size:18px}.cctv-card p{margin:10px 0 15px;color:var(--muted)}.channel-badge{white-space:nowrap;background:#e8f5fb;color:#236c8d;border-radius:14px;padding:6px 9px;font-size:12px;font-weight:700}.cctv-empty{grid-column:1/-1;background:#fff;border:1px dashed #cbd7dc;border-radius:10px;padding:55px;text-align:center;color:#71808a}.cctv-empty strong{font-size:18px;color:#41515b}.cctv-detail{width:min(850px,96vw)}.cctv-detail>img{display:block;width:100%;max-height:62vh;object-fit:contain;background:#172630}.cctv-detail-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:18px 20px}.cctv-detail-meta p{margin:0;color:#52616a;overflow-wrap:anywhere}.cctv-detail-meta strong{display:block;color:#263740;margin-bottom:5px}.field small{display:block;color:#829098;margin-top:5px}@media(max-width:700px){.cctv-group-grid{grid-template-columns:1fr}.cctv-detail-meta{grid-template-columns:1fr}}
.cctv-detail{width:min(980px,96vw)}.cctv-playback-panel{grid-column:1/-1;display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) auto;gap:12px;align-items:end;min-width:0;padding:16px;border:1px solid #cce1eb;border-radius:8px;background:#f2f9fc}.cctv-playback-panel>div:first-child{grid-column:1/-1}.cctv-playback-panel>div>strong,.cctv-playback-panel>div>small{display:block}.cctv-playback-panel>div>small{margin-top:5px;color:#71808a}.cctv-playback-panel label{display:grid;min-width:0;gap:6px;color:#52616a;font-size:13px;font-weight:600}.cctv-playback-panel input{display:block;width:100%;min-width:0;height:40px;font-size:13px}.cctv-playback-actions{display:flex;gap:8px}.cctv-playback-actions button{height:40px;white-space:nowrap}.cctv-live-badge{min-width:72px;text-align:center}@media(max-width:800px){.cctv-playback-panel{grid-template-columns:1fr 1fr}.cctv-playback-panel>div:first-child,.cctv-playback-actions{grid-column:1/-1}.cctv-playback-actions button{flex:1}}@media(max-width:560px){.cctv-playback-panel{grid-template-columns:1fr}.cctv-playback-panel label,.cctv-playback-panel>div:first-child,.cctv-playback-actions{grid-column:1}.cctv-playback-actions{flex-direction:column}.cctv-playback-actions button{width:100%}}
.cctv-playback-timeline{grid-column:1/-1;display:grid;gap:7px;padding:12px 0 2px}.cctv-playback-timeline>div{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:#60727c;font-variant-numeric:tabular-nums}.cctv-playback-timeline>div span:last-child{text-align:right}.cctv-playback-timeline b{padding:5px 10px;border-radius:14px;background:#1f789f;color:#fff;font-size:13px}.cctv-playback-panel .cctv-playback-timeline input{appearance:none;width:100%;height:20px;margin:0;padding:0;border:0;background:transparent;cursor:pointer}.cctv-playback-timeline input::-webkit-slider-runnable-track{height:8px;border-radius:5px;background:repeating-linear-gradient(90deg,#a9c4d0 0 1px,transparent 1px 10%),linear-gradient(90deg,#b9d8e5,#287fa5)}.cctv-playback-timeline input::-webkit-slider-thumb{appearance:none;width:18px;height:18px;margin-top:-5px;border:3px solid #fff;border-radius:50%;background:#176f96;box-shadow:0 1px 5px #102d3b66}.cctv-playback-timeline input::-moz-range-track{height:8px;border-radius:5px;background:linear-gradient(90deg,#b9d8e5,#287fa5)}.cctv-playback-timeline input::-moz-range-thumb{width:14px;height:14px;border:3px solid #fff;border-radius:50%;background:#176f96;box-shadow:0 1px 5px #102d3b66}.cctv-playback-timeline input:disabled{cursor:not-allowed;opacity:.45}.cctv-playback-transport{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;padding-top:2px}.cctv-playback-transport button{min-width:104px;height:38px}.cctv-playback-transport span{margin-left:5px;color:#71808a;font-size:11px}@media(max-width:560px){.cctv-playback-transport{flex-wrap:wrap}.cctv-playback-transport button{flex:1;min-width:90px}.cctv-playback-transport span{width:100%;margin:2px 0 0;text-align:center}}
.cctv-player{overflow:hidden;background:#172630;border-bottom:1px solid #cce1eb}.cctv-player .cctv-playback-panel{margin:0;border-width:1px 0 0;border-radius:0;background:#f2f9fc;box-shadow:inset 0 1px 0 #fff}.cctv-player .cctv-live{border-radius:0}

.nav .nav-camera{position:relative;display:inline-block;flex:0 0 18px;width:15px;height:11px;border:1.5px solid currentColor;border-radius:2px}.nav .nav-camera:after{content:"";position:absolute;right:-5px;top:2px;border:3.5px solid transparent;border-right:0;border-left:5px solid currentColor}

.user>span{overflow:hidden;background:#dceef6}.user>span img{display:block;width:100%;height:100%;object-fit:cover}.user-avatar b{display:grid;place-items:center;width:100%;height:100%;color:#176f93;font-size:12px}

.software-git{display:grid;gap:5px;min-width:210px;margin-top:8px;white-space:normal}.software-git a{color:#267fa7;font-weight:700;text-decoration:none}.software-git b,.software-git small{display:block;font-size:12px}.software-git small{color:#71808a;line-height:1.35}.software-git .git-clean{color:#168466}.software-git .git-dirty{color:#c26a24}.git-checking{color:#71808a;font-size:12px}.cctv-camera{width:92px;height:92px;border-radius:50%;background:#2d3748;box-shadow:0 0 0 5px #4a5568,inset 0 0 0 4px #1a202c,0 14px 22px #00000033;position:relative;display:grid;place-items:center}.cctv-camera:before{content:"";position:absolute;width:32px;height:32px;border-radius:50%;background:linear-gradient(145deg,#1a202c,#000);box-shadow:0 0 0 6px #64748b}.cctv-camera:after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:#e2e8f0;box-shadow:0 0 0 3px #94a3b8}

.scan-copy{flex:1}.scanner-status{margin-top:5px!important;color:#287fa5!important;font-weight:600}.scanner-status.receiving{color:#b76816!important}.scanner-status.success{color:#168466!important}.scanner-status.error{color:#b3423f!important}.scan.processing{opacity:.72;pointer-events:none}.scan #scanInput{min-width:190px}.scan #scanBtn{flex:0 0 auto}@media(max-width:950px){.scan{height:auto;min-height:78px;flex-wrap:wrap;padding:12px 14px}.scan-copy{min-width:220px}.scan #scanInput{width:calc(100% - 75px);margin-left:50px}.scan #scanBtn{width:65px;padding:0 8px}}
.hardware-row{cursor:pointer}.hardware-row:hover td{background:#f3f9fc}.hardware-detail-modal{position:relative;width:min(820px,94vw);max-height:90vh;overflow:auto;border-radius:18px;padding:22px;background:linear-gradient(145deg,#fff,#fbfcfe)}.hardware-detail-close{position:absolute;right:16px;top:16px;width:38px;height:38px;border:0;border-radius:11px;background:#f2f4f7;color:#637080;font-size:23px;cursor:pointer}.hardware-hero{display:flex;align-items:center;gap:24px;padding:0 50px 18px 0}.hardware-hero h2{margin:0 0 11px;font-size:28px;color:#08152a;letter-spacing:.02em}.hardware-hero p{display:inline-block;margin:0;padding:7px 13px;border-radius:20px;background:#f0f2f8;color:#1c3160;font-size:15px}.hardware-photo{position:relative;width:120px;height:120px;flex:0 0 120px;border:1px solid #dbe3ea;border-radius:15px;background:#f7f9fb;overflow:hidden}.hardware-photo img{width:100%;height:100%;object-fit:contain}.hardware-photo button{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);white-space:nowrap;padding:5px 9px;background:#ffffffe8;font-size:12px}.hardware-detail-body{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:8px 0 18px}.hardware-detail-body p{margin:0;min-height:70px;padding:13px;border:1px solid #dce6ed;border-radius:11px;background:#fbfdfe;color:#59697d;font-size:13px}.hardware-detail-body strong{display:block;margin-bottom:7px;color:#0b1730;font-size:13px}.hardware-detail-body .deployment-card{grid-column:1/-1;min-height:auto;padding:16px 20px;background:linear-gradient(135deg,#f5fcf9,#f8fcfd);border:1px solid #cfe9df;border-left:4px solid #13a66f;line-height:1.55}.deployment-form{padding:17px 19px 14px;border:1px solid #dce6ed;border-radius:13px;background:#f8fbfc}.hardware-detail-actions{padding-top:8px;display:flex;justify-content:flex-end}.hardware-detail-actions .primary{padding:10px 18px;font-size:14px}@media(max-width:800px){.hardware-detail-modal{padding:18px}.hardware-hero{gap:18px}.hardware-photo{width:105px;height:105px;flex-basis:105px}.hardware-hero h2{font-size:23px}.hardware-detail-body{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.hardware-hero{align-items:flex-start;flex-direction:column}.hardware-detail-body{grid-template-columns:1fr}.hardware-detail-body .deployment-card{grid-column:auto}}
.hardware-stats{grid-template-columns:repeat(3,1fr)}.hardware-stats .mini:nth-child(2){border-left-color:#1b9b72}.hardware-stats .mini:nth-child(3){border-left-color:#7a5fb3}
.hardware-detail-actions{gap:8px}.history-modal{width:min(760px,94vw);max-height:86vh}.history-list{padding:18px 20px;display:grid;gap:12px;overflow:auto}.history-entry{padding:16px;border:1px solid #dbe5ea;border-left:4px solid #2684aa;border-radius:11px;background:#fbfdfe}.history-entry>div{display:flex;justify-content:space-between;gap:15px;margin-bottom:13px}.history-entry>div span{color:#687985}.history-entry dl{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0}.history-entry dl div{padding:9px;background:#f1f5f7;border-radius:7px}.history-entry dt{font-size:11px;color:#778792;margin-bottom:4px}.history-entry dd{margin:0;font-size:12px;font-weight:600;color:#21323d}.history-empty{padding:35px;text-align:center;color:#778792}@media(max-width:700px){.history-entry dl{grid-template-columns:repeat(2,1fr)}.history-entry>div{display:grid}}
.hardware-photo button{opacity:0;transform:translate(-50%,6px);transition:opacity .16s ease,transform .16s ease}.hardware-photo:hover button,.hardware-photo:focus-within button{opacity:1;transform:translate(-50%,0)}
.history-list{max-height:480px;overflow-y:auto;scrollbar-gutter:stable}.history-entry{min-height:135px}.history-entry dl{grid-template-columns:repeat(3,1fr)}.condition-history{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 0!important}.condition-history>div{display:grid!important;gap:5px;padding:9px 11px;border-radius:8px;background:#eef5f8}.condition-history span{font-size:11px;color:#687985}.condition-history b{width:max-content;max-width:100%;padding:4px 8px;border-radius:12px;background:#dfeaf0;color:#203944;font-size:12px}.condition-history>div:first-child{background:#eef4ff}.condition-history>div:first-child b{background:#dce8ff;color:#2457a5}.condition-history>div:last-child{background:#eff9f4}.condition-history>div:last-child b{background:#dcefe6;color:#16734f}@media(max-width:600px){.condition-history{grid-template-columns:1fr}.history-list{max-height:440px}}
.history-modal{width:min(940px,95vw)}.history-list{max-height:420px;padding:18px;gap:12px;overflow-y:auto;scrollbar-gutter:stable}.history-entry{height:120px;min-height:120px;padding:12px 14px}.history-entry .history-owner{margin-bottom:9px}.history-details{display:grid;grid-template-columns:1.2fr 1.2fr .65fr 1fr 1fr;gap:9px}.history-details>div{min-width:0;padding:8px 10px;border-radius:7px;background:#f1f5f7}.history-details span,.history-details b{display:block;overflow:hidden;text-overflow:ellipsis}.history-details span{margin-bottom:4px;color:#71818c;font-size:10px;white-space:nowrap}.history-details b{color:#263943;font-size:11px;white-space:normal;line-height:1.25}.history-details .condition-deployed{background:#eef4ff}.history-details .condition-deployed b{color:#2457a5}.history-details .condition-pulled{background:#eff9f4}.history-details .condition-pulled b{color:#16734f}@media(max-width:750px){.history-list{max-height:510px}.history-entry{height:auto;min-height:150px}.history-details{grid-template-columns:repeat(2,1fr)}.history-details>div:nth-child(3){grid-column:1/-1}}
.history-entry>.history-details{display:grid;margin-bottom:0}
.history-list{max-height:438px}.history-entry{height:126px;min-height:126px}.history-owner strong{font-size:16px}.history-owner span{font-size:14px}.history-details span{font-size:12px}.history-details b{font-size:14px;line-height:1.3}
.condition-log-section{padding:0 20px 18px}.condition-log-section h3{margin:3px 0 10px;font-size:15px}.condition-log{display:grid;gap:7px;max-height:150px;overflow-y:auto}.condition-log>div{display:grid;grid-template-columns:1.1fr 1fr .55fr;gap:10px;align-items:center;padding:8px 10px;border-radius:7px;background:#f2f6f8;font-size:12px}.condition-log small{text-align:right;color:#6e7e88}.condition-log p{color:#7c8991}
.filter-heading{padding-top:8px;padding-bottom:8px}.header-filter{display:block;width:100%;min-width:92px;height:30px;margin:0;padding:2px 24px 2px 4px;border:1px solid transparent;border-radius:5px;background:transparent;color:#6c7b84;font-size:13px;font-weight:700;text-transform:uppercase;cursor:pointer}.header-filter:hover,.header-filter:focus,.header-filter.filtered{border-color:#c8d7de;background:#fff;color:#287fa5}.header-filter:focus{outline:2px solid #8bc7df;outline-offset:1px}.header-filter.filtered{text-transform:none}
#hardware .table-card{height:440px;overflow:auto}#hardware table{width:100%;table-layout:fixed}#hardware thead{position:sticky;top:0;z-index:2;background:#f5f7f8}#hardware th:nth-child(1){width:17%}#hardware th:nth-child(2){width:10%}#hardware th:nth-child(3){width:12%}#hardware th:nth-child(4){width:9%}#hardware th:nth-child(5){width:9%}#hardware th:nth-child(6){width:11%}#hardware th:nth-child(7){width:15%}#hardware th:nth-child(8){width:9%}#hardware th:nth-child(9){width:8%}#hardware td{overflow:hidden;text-overflow:ellipsis}.icon-btn{display:inline-grid;place-items:center;width:34px;height:32px;padding:0}.icon-btn svg{width:17px;height:17px;fill:currentColor}.actions{flex-wrap:nowrap}
#hardware.page.active{display:flex;flex-direction:column;height:calc(100vh - 137px);min-height:560px}#hardware .toolbar,#hardware .hardware-stats,#hardware .scan{flex:0 0 auto}#hardware .table-card{flex:1 1 auto;height:auto;min-height:200px}
.scan-capture-input{position:fixed!important;left:-10000px!important;top:0!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.camera-scanner{display:flex;align-items:center;gap:18px;margin:-4px 0 14px;padding:14px;border:1px solid #cbe5f0;border-radius:8px;background:#edf8fc}.camera-scanner video{width:240px;height:150px;border-radius:7px;background:#15252e;object-fit:cover}.camera-scanner strong,.camera-scanner small{display:block}.camera-scanner small{margin:6px 0 13px;color:#71808a}.settings-card{max-width:720px;border:1px solid var(--line);border-radius:9px;background:#fff;overflow:hidden}.settings-head{padding:20px 22px;border-bottom:1px solid var(--line)}.settings-head h2{margin:0 0 5px;font-size:17px}.settings-head p{margin:0;color:var(--muted)}.settings-body{padding:22px}.settings-body>.field{max-width:520px;margin-bottom:20px}.settings-body>.field>small{display:block;margin-top:6px;color:#71808a;line-height:1.4}.setting-inline{display:flex;align-items:center;gap:9px}.setting-inline input{width:130px}.setting-inline span{color:#71808a}.settings-actions{display:flex;align-items:center;gap:14px;padding-top:5px}.settings-actions span{color:#168466}@media(max-width:650px){.camera-scanner{align-items:stretch;flex-direction:column}.camera-scanner video{width:100%;height:210px}.settings-actions{align-items:flex-start;flex-direction:column}}
.com-settings{max-width:560px;margin:0 0 20px;padding:16px;border:1px solid #cfe1e9;border-radius:8px;background:#f5fafc}.com-settings .field{max-width:520px}.com-settings .setting-inline select{flex:1}.setting-check{display:flex;align-items:center;gap:8px;margin:3px 0 13px;color:#41515b;font-weight:600}.setting-check input{width:16px;height:16px}.com-settings #comScannerStatus.connected{color:#168466}.com-settings #comScannerStatus.error{color:#b3423f}
.com-settings>strong{display:block;margin-bottom:7px;font-size:13px}.com-settings>p{margin:0 0 13px;color:#60727c;line-height:1.5}.bridge-download{display:inline-flex;align-items:center;text-decoration:none}.com-settings>code{display:block;margin-top:13px;padding:10px;border-radius:6px;background:#172630;color:#e4eef2;white-space:normal;overflow-wrap:anywhere;line-height:1.45}
.notice{position:fixed;left:50%;top:50%;z-index:120;width:min(520px,88vw);margin:0;padding:22px 26px;transform:translate(-50%,-50%);border-radius:12px;text-align:center;font-size:15px;font-weight:600;line-height:1.5;box-shadow:0 22px 65px #0d1c2540}.notice.success{border:1px solid #86d2b5;background:#e8f8f1;color:#116b4a}.notice.error{border:1px solid #e5a29e;background:#fdeceb;color:#a52e29}.notice.info{border:1px solid #9ccfe5;background:#eaf6fb;color:#236c8d}
.notice{max-height:min(320px,70vh);overflow:auto;overflow-wrap:anywhere;word-break:break-word}
@keyframes hardware-added-glow{0%,100%{box-shadow:inset 0 0 0 0 transparent}15%,75%{box-shadow:inset 0 0 0 3px #22ad76,0 0 20px #22ad7666}}.hardware-row.just-added{position:relative;animation:hardware-added-glow 1.1s ease-in-out 4;background:#e8f8f1}.hardware-row.just-added td{background:#e8f8f1;color:#145f45}
@keyframes new-row-fade{0%{background:#e8f8f1}65%{background:#f4fbf8}100%{background:#fff}}.hardware-row.just-added{animation:none;background:transparent}.hardware-row.just-added td{color:inherit;background:#fff;animation:new-row-fade 5s ease-out;border-top:1px solid #6bcba7;border-bottom:1px solid #6bcba7}.hardware-row.just-added td:first-child{box-shadow:inset 4px 0 #1fa873}.item-name-line{display:flex;align-items:center;gap:8px}.new-row-badge{display:inline-flex;padding:2px 6px;border-radius:9px;background:#1fa873;color:#fff;font-size:9px;font-weight:700;letter-spacing:.05em}
@keyframes new-row-smooth{0%{background:#dff6ec;box-shadow:inset 0 1px #28ad7a,inset 0 -1px #28ad7a}22%{background:#eaf9f2;box-shadow:inset 0 1px #63c8a3,inset 0 -1px #63c8a3}100%{background:#fff;box-shadow:inset 0 1px transparent,inset 0 -1px transparent}}@keyframes new-row-edge{0%{box-shadow:inset 4px 0 #1fa873,inset 0 1px #28ad7a,inset 0 -1px #28ad7a}100%{box-shadow:inset 0 0 transparent,inset 0 1px transparent,inset 0 -1px transparent}}.hardware-row.just-added td{border-color:transparent;animation:new-row-smooth 5s cubic-bezier(.22,.8,.3,1)}.hardware-row.just-added td:first-child{animation:new-row-smooth 5s cubic-bezier(.22,.8,.3,1),new-row-edge 5s cubic-bezier(.22,.8,.3,1)}
.location-inventory-modal{width:min(720px,94vw)}.location-inventory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:20px;max-height:65vh;overflow:auto}.location-inventory-card{min-height:112px;padding:16px;text-align:left;border:1px solid #dbe5ea;border-left:4px solid #2684aa;border-radius:10px;background:#fbfdfe;color:#1b2c36;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.location-inventory-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px #17374718}.location-inventory-card span,.location-inventory-card small{display:block}.location-inventory-card span{font-size:12px;font-weight:700;color:#4d6471}.location-inventory-card strong{display:block;margin:7px 0 5px;font-size:27px;color:#172a36}.location-inventory-card small{font-size:11px;color:#71838d}.location-inventory-empty{grid-column:1/-1;padding:35px;text-align:center;color:#778792}@media(max-width:650px){.location-inventory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hardware-detail-body .detail-card-select{width:100%;height:32px;padding:0 25px 0 0;border:0;background-color:transparent;color:#59697d;font-size:13px;font-weight:500;cursor:pointer}.hardware-detail-body .detail-card-select:focus{outline:2px solid #8bc7df;outline-offset:3px;border-radius:4px}
.drawer-inventory-body{display:grid;grid-template-columns:230px 1fr;min-height:420px;max-height:68vh}.drawer-list{padding:16px;border-right:1px solid #e2e9ed;overflow:auto;background:#f7fafb}.drawer-card{display:block;width:100%;margin-bottom:9px;padding:13px;text-align:left;border:1px solid #dbe5ea;border-radius:9px;background:#fff;color:#354953;cursor:pointer}.drawer-card.active{border-color:#2585ad;box-shadow:inset 4px 0 #2585ad;background:#edf7fb}.drawer-card span,.drawer-card small{display:block}.drawer-card span{font-weight:700}.drawer-card strong{display:block;margin:5px 0;font-size:20px}.drawer-card small{color:#75858e}.drawer-items{min-width:0;padding:18px;overflow:auto}.drawer-items-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px}.drawer-items-head h3,.drawer-items-head p{margin:0}.drawer-items-head h3{font-size:19px}.drawer-items-head p{margin-top:4px;color:#788891}.drawer-item-list{display:grid;gap:8px}.drawer-item-list>button{display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%;padding:12px 14px;text-align:left;border:1px solid #e0e7eb;border-radius:8px;background:#fff;cursor:pointer}.drawer-item-list>button:hover{background:#f3f9fc;border-color:#bcd9e5}.drawer-item-list strong,.drawer-item-list small{display:block}.drawer-item-list small{margin-top:4px;color:#7c8b94}@media(max-width:650px){.drawer-inventory-body{grid-template-columns:1fr}.drawer-list{display:flex;gap:8px;border-right:0;border-bottom:1px solid #e2e9ed}.drawer-card{min-width:160px}.drawer-items-head{align-items:flex-start;flex-direction:column}}

/* Compact navigation: icons remain visible and labels slide out on hover. */
@media(min-width:701px){
  .sidebar{width:68px;z-index:45;overflow:hidden;box-shadow:4px 0 18px transparent;transition:width .22s ease,box-shadow .22s ease}
  .sidebar:hover,.sidebar:focus-within{width:244px;box-shadow:8px 0 28px #07141c38}
  main{margin-left:68px;transition:margin-left .22s ease}
  .brand{width:244px;padding:0 15px;gap:14px}
  .brand-mark{flex:0 0 38px}
  .brand>div:last-child,.user>div{opacity:0;transform:translateX(-7px);white-space:nowrap;pointer-events:none;transition:opacity .14s ease,transform .2s ease}
  .sidebar:hover .brand>div:last-child,.sidebar:focus-within .brand>div:last-child,.sidebar:hover .user>div,.sidebar:focus-within .user>div{opacity:1;transform:none;pointer-events:auto;transition-delay:.07s}
  .sidebar nav{width:244px;padding:18px 10px}
  .sidebar nav>p{height:16px;margin-left:12px;opacity:0;white-space:nowrap;transition:opacity .14s ease}
  .sidebar:hover nav>p,.sidebar:focus-within nav>p{opacity:1;transition-delay:.07s}
  html body .nav{width:224px;padding:0 13px;font-size:0;gap:13px;white-space:nowrap;transition:background .18s ease,color .18s ease,font-size .24s cubic-bezier(.22,1,.36,1) .04s}
  html body .sidebar:hover .nav,html body .sidebar:focus-within .nav{font-size:16px;transition-delay:0s}
  .nav i{flex:0 0 24px;font-size:19px}
  .nav b{font-size:9px}
  .user{width:244px;padding:0 17px}
  .user>span{flex:0 0 34px}
}
.hardware-batch-panel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:12px 14px;border:1px solid #cbdaf5;border-radius:10px;background:#f4f8ff}.hardware-batch-panel.hide{display:none}.hardware-batch-panel select,.hardware-batch-panel input{min-height:38px;padding:8px 10px;border:1px solid #cbd5e1;border-radius:7px;background:#fff}.hardware-batch-panel small{color:#64748b}.select-cell{width:42px;text-align:center!important}.hardware-check{width:18px;height:18px;cursor:pointer}.select-all-icon{width:28px;height:28px;padding:0;border:1px solid #b8c4d6;border-radius:6px;background:#fff;color:#64748b;cursor:pointer}.select-all-icon.active,#batchScanToggle.active{background:#2563eb;color:#fff;border-color:#2563eb}
#hardware th.select-cell,#hardware td.select-cell{width:44px!important;min-width:44px!important;padding-left:8px;padding-right:8px}#hardware th:nth-child(2){width:17%}#hardware th:nth-child(3){width:10%}#hardware th:nth-child(4){width:12%}#hardware th:nth-child(5){width:9%}#hardware th:nth-child(6){width:9%}#hardware th:nth-child(7){width:11%}#hardware th:nth-child(8){width:15%}#hardware th:nth-child(9){width:9%}#hardware th:nth-child(10){width:8%}.hardware-batch-panel .add-drawer-btn{white-space:nowrap}@media(max-width:700px){.hardware-batch-panel{gap:7px;padding:10px}.hardware-batch-panel strong{width:100%}.hardware-batch-panel select,.hardware-batch-panel input{flex:1 1 145px;min-width:0}.hardware-batch-panel .primary{margin-left:0}}

/* Always collapse the navigation after the pointer leaves, even when a link still has focus. */
@media(min-width:701px){
  .sidebar:not(:hover){width:68px;box-shadow:none}
  .sidebar:not(:hover) .brand>div:last-child,.sidebar:not(:hover) .user>div{opacity:0;transform:translateX(-7px);pointer-events:none}
  .sidebar:not(:hover) nav>p{opacity:0}
  html body .sidebar:not(:hover) .nav{font-size:0}
}

/* Animated rain is limited to the middle navigation panel. */
@property --sidebar-rain-shift{syntax:"<length>";inherits:true;initial-value:0px}
.sidebar nav{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  --sidebar-rain-color:#001f5b;
  --sidebar-rain-grid:rgb(255 255 255 / .72);
  --sidebar-rain-filter:blur(.8em) saturate(1.6) contrast(1.15);
  --sidebar-rain-shift:0px;
  background-color:#b7cee9;
  background-image:
    radial-gradient(4px 100px at var(--sidebar-rain-shift) 235px,var(--sidebar-rain-color),#0000),radial-gradient(4px 100px at calc(300px + var(--sidebar-rain-shift)) 235px,var(--sidebar-rain-color),#0000),radial-gradient(1.5px 1.5px at calc(150px + var(--sidebar-rain-shift)) 117.5px,var(--sidebar-rain-color) 100%,#0000 150%),
    radial-gradient(4px 100px at var(--sidebar-rain-shift) 252px,var(--sidebar-rain-color),#0000),radial-gradient(4px 100px at calc(300px + var(--sidebar-rain-shift)) 252px,var(--sidebar-rain-color),#0000),radial-gradient(1.5px 1.5px at calc(150px + var(--sidebar-rain-shift)) 126px,var(--sidebar-rain-color) 100%,#0000 150%),
    radial-gradient(4px 100px at var(--sidebar-rain-shift) 150px,var(--sidebar-rain-color),#0000),radial-gradient(4px 100px at calc(300px + var(--sidebar-rain-shift)) 150px,var(--sidebar-rain-color),#0000),radial-gradient(1.5px 1.5px at calc(150px + var(--sidebar-rain-shift)) 75px,var(--sidebar-rain-color) 100%,#0000 150%),
    radial-gradient(4px 100px at var(--sidebar-rain-shift) 253px,var(--sidebar-rain-color),#0000),radial-gradient(4px 100px at calc(300px + var(--sidebar-rain-shift)) 253px,var(--sidebar-rain-color),#0000),radial-gradient(1.5px 1.5px at calc(150px + var(--sidebar-rain-shift)) 126.5px,var(--sidebar-rain-color) 100%,#0000 150%),
    radial-gradient(4px 100px at var(--sidebar-rain-shift) 204px,var(--sidebar-rain-color),#0000),radial-gradient(4px 100px at calc(300px + var(--sidebar-rain-shift)) 204px,var(--sidebar-rain-color),#0000),radial-gradient(1.5px 1.5px at calc(150px + var(--sidebar-rain-shift)) 102px,var(--sidebar-rain-color) 100%,#0000 150%),
    radial-gradient(4px 100px at var(--sidebar-rain-shift) 134px,var(--sidebar-rain-color),#0000),radial-gradient(4px 100px at calc(300px + var(--sidebar-rain-shift)) 134px,var(--sidebar-rain-color),#0000),radial-gradient(1.5px 1.5px at calc(150px + var(--sidebar-rain-shift)) 67px,var(--sidebar-rain-color) 100%,#0000 150%),
    radial-gradient(4px 100px at var(--sidebar-rain-shift) 179px,var(--sidebar-rain-color),#0000),radial-gradient(4px 100px at calc(300px + var(--sidebar-rain-shift)) 179px,var(--sidebar-rain-color),#0000),radial-gradient(1.5px 1.5px at calc(150px + var(--sidebar-rain-shift)) 89.5px,var(--sidebar-rain-color) 100%,#0000 150%),
    radial-gradient(4px 100px at var(--sidebar-rain-shift) 299px,var(--sidebar-rain-color),#0000),radial-gradient(4px 100px at calc(300px + var(--sidebar-rain-shift)) 299px,var(--sidebar-rain-color),#0000),radial-gradient(1.5px 1.5px at calc(150px + var(--sidebar-rain-shift)) 149.5px,var(--sidebar-rain-color) 100%,#0000 150%),
    radial-gradient(4px 100px at var(--sidebar-rain-shift) 215px,var(--sidebar-rain-color),#0000),radial-gradient(4px 100px at calc(300px + var(--sidebar-rain-shift)) 215px,var(--sidebar-rain-color),#0000),radial-gradient(1.5px 1.5px at calc(150px + var(--sidebar-rain-shift)) 107.5px,var(--sidebar-rain-color) 100%,#0000 150%),
    radial-gradient(4px 100px at var(--sidebar-rain-shift) 281px,var(--sidebar-rain-color),#0000),radial-gradient(4px 100px at calc(300px + var(--sidebar-rain-shift)) 281px,var(--sidebar-rain-color),#0000),radial-gradient(1.5px 1.5px at calc(150px + var(--sidebar-rain-shift)) 140.5px,var(--sidebar-rain-color) 100%,#0000 150%),
    radial-gradient(4px 100px at var(--sidebar-rain-shift) 158px,var(--sidebar-rain-color),#0000),radial-gradient(4px 100px at calc(300px + var(--sidebar-rain-shift)) 158px,var(--sidebar-rain-color),#0000),radial-gradient(1.5px 1.5px at calc(150px + var(--sidebar-rain-shift)) 79px,var(--sidebar-rain-color) 100%,#0000 150%),
    radial-gradient(4px 100px at var(--sidebar-rain-shift) 210px,var(--sidebar-rain-color),#0000),radial-gradient(4px 100px at calc(300px + var(--sidebar-rain-shift)) 210px,var(--sidebar-rain-color),#0000),radial-gradient(1.5px 1.5px at calc(150px + var(--sidebar-rain-shift)) 105px,var(--sidebar-rain-color) 100%,#0000 150%);
  background-size:300px 235px,300px 235px,300px 235px,300px 252px,300px 252px,300px 252px,300px 150px,300px 150px,300px 150px,300px 253px,300px 253px,300px 253px,300px 204px,300px 204px,300px 204px,300px 134px,300px 134px,300px 134px,300px 179px,300px 179px,300px 179px,300px 299px,300px 299px,300px 299px,300px 215px,300px 215px,300px 215px,300px 281px,300px 281px,300px 281px,300px 158px,300px 158px,300px 158px,300px 210px,300px 210px,300px 210px;
  animation:sidebar-rain-flow 75s linear infinite;
}
html[data-theme="dark"] .sidebar nav{--sidebar-rain-color:#09f;--sidebar-rain-grid:hsl(0 0% 4%);--sidebar-rain-filter:blur(1em) brightness(6);background-color:#000}
.sidebar nav::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(circle at 50% 50%,#0000 0,#0000 2px,var(--sidebar-rain-grid) 2px);
  background-size:8px 8px;
  backdrop-filter:var(--sidebar-rain-filter);
}
.sidebar nav::before{content:"";position:absolute;z-index:1;top:0;bottom:0;left:0;width:68px;pointer-events:none;background:rgba(4,15,22,.32)}
html[data-theme="light"] .sidebar nav::before{background:rgba(255,255,255,.18)}
.sidebar nav>*{position:relative;z-index:2}
@media(min-width:701px){
  .sidebar nav::before{transition:box-shadow .42s cubic-bezier(.22,1,.36,1)}
  .sidebar:not(:hover) nav::before{box-shadow:inset -18px 0 14px -6px #021216}
  html[data-theme="light"] .sidebar:not(:hover) nav::before{box-shadow:inset -10px 0 12px -8px rgb(7 83 123 / .28)}
}

/* Use one easing curve for the panel, labels, profile, and edge shading. */
@media(min-width:701px){
  .sidebar,.sidebar:hover,.sidebar:focus-within,.sidebar:not(:hover){will-change:width;transition:width .42s cubic-bezier(.22,1,.36,1),box-shadow .34s ease}
  .brand>div:last-child,.user>div{transition:opacity .28s ease,transform .38s cubic-bezier(.22,1,.36,1)}
  .sidebar nav>p{transition:opacity .28s ease}
  .sidebar+main{margin-left:68px;transition:none}
}

/* Apply theme colors immediately; hover expansion remains animated normally. */
html.theme-switching .sidebar,
html.theme-switching .sidebar *,
html.theme-switching .sidebar *::before,
html.theme-switching .sidebar *::after{transition:none!important}

@keyframes sidebar-rain-flow{
  0%{background-position:0 220px,3px 220px,151.5px 337.5px,25px 24px,28px 24px,176.5px 150px,50px 16px,53px 16px,201.5px 91px,75px 224px,78px 224px,226.5px 350.5px,100px 19px,103px 19px,251.5px 121px,125px 120px,128px 120px,276.5px 187px,150px 31px,153px 31px,301.5px 120.5px,175px 235px,178px 235px,326.5px 384.5px,200px 121px,203px 121px,351.5px 228.5px,225px 224px,228px 224px,376.5px 364.5px,250px 26px,253px 26px,401.5px 105px,275px 75px,278px 75px,426.5px 180px}
  100%{background-position:0 6800px,3px 6800px,151.5px 6917.5px,25px 13632px,28px 13632px,176.5px 13758px,50px 5416px,53px 5416px,201.5px 5491px,75px 17175px,78px 17175px,226.5px 17301.5px,100px 5119px,103px 5119px,251.5px 5221px,125px 8428px,128px 8428px,276.5px 8495px,150px 9876px,153px 9876px,301.5px 9965.5px,175px 13391px,178px 13391px,326.5px 13540.5px,200px 14741px,203px 14741px,351.5px 14848.5px,225px 18770px,228px 18770px,376.5px 18910.5px,250px 5082px,253px 5082px,401.5px 5161px,275px 6375px,278px 6375px,426.5px 6480px}
}
@media(prefers-reduced-motion:reduce){.sidebar nav,.sidebar nav::after{animation:none}}
html.atlas-lite .sidebar nav{animation:none}

/* Theme-aware ATLAS brand header. Keep the light reference teal and use a
   deeper navigation tone in dark mode without changing the product mark. */
html[data-theme="dark"] .sidebar .brand{
  border-bottom:1px solid #204657;
  background:linear-gradient(135deg,#0b2633 0%,#123b4c 100%);
  box-shadow:inset 0 -1px #071820,0 6px 18px rgb(0 0 0 / .18);
}
html[data-theme="dark"] .sidebar .brand strong{color:#f2f8fb}
html[data-theme="dark"] .sidebar .brand small{color:#9fc5d5}
html[data-theme="dark"] .sidebar .user{
  border-top-color:#204657;
  background:linear-gradient(135deg,#0b2633 0%,#123b4c 100%);
}
html[data-theme="dark"] .sidebar .user strong{color:#f2f8fb}
html[data-theme="dark"] .sidebar .user small{color:#9fc5d5}

/* Navigation colors tuned to the animated rain background. */
.sidebar nav>p{color:#68b9d2;text-shadow:0 1px 3px #000;letter-spacing:.18em}
html body .sidebar .nav{color:#d2e2e9;text-shadow:0 1px 3px #000c}
.sidebar .nav i{color:#60c4e3;text-shadow:0 0 7px #168ebc88}
.sidebar .nav:hover{background:#143847cc;color:#fff;box-shadow:inset 3px 0 #49c7ef,0 0 14px #07151dcc}
.sidebar .nav:hover i{color:#9ee7fa}
.sidebar .nav.active{background:linear-gradient(90deg,#1b5369f2,#254b5af2);color:#fff;border:1px solid #3c8199;box-shadow:inset 3px 0 #4bd0ff,0 5px 15px #0007}
.sidebar .nav.active i{color:#b6efff;text-shadow:0 0 8px #39bde8}
.sidebar .nav b{box-shadow:0 0 0 2px #08161d,0 0 8px #ff625c88;text-shadow:none}
html[data-theme="light"] .sidebar nav>p{color:#245d7a;text-shadow:0 1px 2px #fff;letter-spacing:.2em;font-weight:700}
html[data-theme="light"] body .sidebar .nav{color:#294e63;text-shadow:none;border:1px solid transparent;border-radius:9px;font-weight:500}
html[data-theme="light"] .sidebar .nav i{color:#087ba8;text-shadow:0 1px 0 #fff,0 0 5px #69c9eb55}
html[data-theme="light"] .sidebar .nav:hover{border-color:#8dcce3;background:rgb(231 247 255 / .76);color:#174b66;box-shadow:0 3px 10px rgb(17 91 124 / .12)}
html[data-theme="light"] .sidebar .nav:hover i{color:#056b98;text-shadow:0 0 7px #5dc8ef88}
html[data-theme="light"] .sidebar .nav.active{border-color:#247fa3;background:linear-gradient(135deg,#237fa3eF,#1b6482eF);color:#fff;text-shadow:0 1px 2px #083b50;box-shadow:inset 3px 0 #72d8f7,inset 0 1px #ffffff55,0 5px 13px rgb(10 65 88 / .28)}
html[data-theme="light"] .sidebar .nav.active i{color:#bcefff;text-shadow:0 0 8px #37c4f2}
html[data-theme="light"] .sidebar .nav b{border:1px solid #fff;background:#c7353c;color:#fff;box-shadow:0 1px 5px #7b192c55;text-shadow:none}

/* Alerts use a clear icon plus a compact unread-status dot. */
.sidebar .nav[data-page="alerts"] .sidebar-svg-icon{color:#5fd4f2;filter:drop-shadow(0 0 4px #24b8df99)}
html[data-theme="light"] .sidebar .nav[data-page="alerts"] .sidebar-svg-icon{color:#08759d;filter:drop-shadow(0 1px 0 #fff) drop-shadow(0 0 2px #5bc5e477)}
.sidebar .nav[data-page="alerts"]{position:relative}
.sidebar .nav[data-page="alerts"] #alertBadge{
  position:absolute;
  top:7px;
  right:auto;
  left:30px;
  width:9px;
  min-width:9px;
  height:9px;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:#ed1c2f;
  color:#ed1c2f;
  font-size:0;
  line-height:0;
  box-shadow:none;
  animation:sidebar-alert-pulse 1.8s ease-out infinite;
}
@keyframes sidebar-alert-pulse{
  0%,45%{box-shadow:0 0 0 0 rgb(237 28 47 / .62)}
  75%,100%{box-shadow:0 0 0 7px rgb(237 28 47 / 0)}
}
@media(prefers-reduced-motion:reduce){.sidebar .nav[data-page="alerts"] #alertBadge{animation:none}}

/* Clean reference-inspired navigation for light mode; dark mode keeps the animated pattern. */
@media(min-width:701px){
  html[data-theme="light"] .sidebar,html[data-theme="dark"] .sidebar{width:68px}
  html[data-theme="light"] .sidebar:hover,html[data-theme="light"] .sidebar:focus-within,
  html[data-theme="dark"] .sidebar:hover,html[data-theme="dark"] .sidebar:focus-within{width:244px}
  html[data-theme="light"] .sidebar{border-right:0;background:#fff;box-shadow:inset -1px 0 #cbdde6,3px 0 14px rgb(26 72 92 / .08)}
  html[data-theme="light"] .sidebar:hover,html[data-theme="light"] .sidebar:focus-within{box-shadow:inset -1px 0 #cbdde6,7px 0 24px rgb(25 67 86 / .15)}
  html[data-theme="light"] .sidebar .brand{height:78px;border-bottom:1px solid #c4dbe5;background:#176f89;box-shadow:none}
  html[data-theme="light"] .sidebar .brand-mark svg{filter:none;opacity:1}
  html[data-theme="light"] .sidebar .brand strong{color:#fff;font-size:16px;letter-spacing:.02em}
  html[data-theme="light"] .sidebar .brand small{max-width:160px;color:#e3f3f8;font-size:9px;line-height:1.35}
  html[data-theme="light"] .sidebar nav{padding:18px 10px;background:#fff;background-image:none;animation:none}
  html[data-theme="light"] .sidebar nav::after{display:none;backdrop-filter:none}
  html[data-theme="light"] .sidebar nav::before{background:transparent}
  html[data-theme="light"] .sidebar:not(:hover) nav::before{box-shadow:none}
  html[data-theme="light"] .sidebar nav>p{height:17px;margin:3px 10px 8px;color:#466776;font-size:10px;font-weight:700;letter-spacing:.14em;text-shadow:none}
  html[data-theme="light"] .sidebar nav>p.system{margin-top:22px}
  html[data-theme="light"] body .sidebar .nav{height:44px;padding:0 13px;gap:13px;border:0;border-radius:8px;color:#15394a;font-size:14px;font-weight:500;text-shadow:none}
  html[data-theme="light"] .sidebar .nav .sidebar-svg-icon{flex-basis:24px;width:24px;height:24px;color:#496e7f;filter:none;transform:none}
  html[data-theme="light"] .sidebar .nav>i:not(.sidebar-svg-icon){color:#496e7f;text-shadow:none}
  html[data-theme="light"] .sidebar .nav:hover{border:0;background:#eff7fa;color:#123b4e;box-shadow:none}
  html[data-theme="light"] .sidebar .nav:hover .sidebar-svg-icon{color:#24738f;filter:none;transform:none}
  html[data-theme="light"] .sidebar .nav.active{border:0;background:#dceef4;color:#123b4e;text-shadow:none;box-shadow:none}
  html[data-theme="light"] .sidebar .nav.active .sidebar-svg-icon{color:#167b9c;filter:none;text-shadow:none;transform:scale(1.08)}
  html[data-theme="light"] .sidebar .nav.active>i:not(.sidebar-svg-icon){color:#167b9c;filter:none;text-shadow:none;transform:none}
  html[data-theme="light"] body .sidebar:not(:hover) .nav{width:48px;height:44px;padding:0 12px;border:0;background:transparent;box-shadow:none;font-size:0}
  html[data-theme="light"] body .sidebar:not(:hover) .nav.active{width:48px;height:48px;padding:0 12px;border:0;border-radius:8px;background:#dceef4;box-shadow:none}
  html[data-theme="light"] .sidebar:not(:hover) .nav .nav-desktop-label,html[data-theme="light"] .sidebar:not(:hover) .nav .nav-mobile-label{display:none}
  html[data-theme="light"] .sidebar .user{width:244px;height:72px;margin:0;padding:0 17px;border:0;border-top:1px solid #d9e6ec;border-radius:0;background:#f6f9fa;color:#183d4e}
  html[data-theme="light"] .sidebar .user>span{width:34px;height:34px;flex-basis:34px;background:#16809e;color:#fff}
  html[data-theme="light"] .sidebar .user strong{color:#153747;font-size:14px}
  html[data-theme="light"] .sidebar .user small{margin-top:0;color:#6b818c;font-size:13px}
  html[data-theme="light"] .sidebar:not(:hover) .user{margin-left:0}
}
@media(min-width:701px){
  html body .sidebar .nav{margin-left:0;transition:width .42s cubic-bezier(.22,1,.36,1),margin-left .42s cubic-bezier(.22,1,.36,1),border-color .28s ease,border-radius .32s ease,box-shadow .32s ease,color .24s ease}
  html body .sidebar:not(:hover) .nav{width:48px;padding-right:12px;padding-left:12px;background:transparent;border-color:transparent;box-shadow:none}
  html body .sidebar:not(:hover) .nav.active{width:48px;height:48px;margin-left:0;padding:0 12px;gap:13px;justify-content:flex-start;border-radius:7px;background:linear-gradient(90deg,#1b5369f2,#254b5af2);border-color:#47a2c2;box-shadow:inset 3px 0 #4bd0ff,0 4px 12px #0008}
  html body .sidebar:not(:hover) .nav b{position:absolute;top:2px;right:2px;transform:scale(.78);transform-origin:top right}
  html body .sidebar:hover .nav,html body .sidebar:focus-within .nav{width:224px}
}

/* Desktop sidebar is hover-only: it overlays content and collapses immediately
   even if a navigation control still owns keyboard focus. */
@media(min-width:701px){
  html body .sidebar:not(:hover){width:68px!important}
  html body .sidebar:not(:hover) .nav{width:48px!important;font-size:0!important}
  html body .sidebar:not(:hover) .nav .nav-desktop-label,
  html body .sidebar:not(:hover) .nav .nav-mobile-label{display:none!important}
  html body .sidebar:not(:hover) .nav[data-page="alerts"] #alertBadge{top:7px;right:auto;left:30px;transform:none}
  html body .sidebar:not(:hover) .brand>div:last-child,
  html body .sidebar:not(:hover) .user>div,
  html body .sidebar:not(:hover) nav>p{opacity:0!important;transition:none!important;pointer-events:none}
}

/* SVG masks keep the supplied artwork crisp while inheriting the neon panel palette. */
.sidebar .nav .sidebar-svg-icon{
  display:inline-block;
  flex:0 0 24px;
  width:24px;
  height:24px;
  background-color:currentColor;
  -webkit-mask:var(--sidebar-icon) center/contain no-repeat;
  mask:var(--sidebar-icon) center/contain no-repeat;
  filter:drop-shadow(0 0 3px #26bce099);
  text-shadow:none;
  transition:color .26s ease,filter .34s ease,transform .34s cubic-bezier(.22,1,.36,1);
}
.icon-dashboard{--sidebar-icon:url('/icons/sidebar/dashboard.svg')}
.icon-hub{--sidebar-icon:url('/icons/sidebar/hub.svg')}
.icon-hardware{--sidebar-icon:url('/icons/sidebar/hardware.svg')}
.icon-qr{--sidebar-icon:url('/icons/sidebar/qr.svg')}
.icon-software{--sidebar-icon:url('/icons/sidebar/software.svg')}
.icon-devices{--sidebar-icon:url('/icons/sidebar/devices.svg')}
.icon-cctv{--sidebar-icon:url('/icons/sidebar/cctv.svg')}
.icon-alerts{--sidebar-icon:url('/icons/sidebar/alerts.svg?v=2')}
.icon-settings{--sidebar-icon:url('/icons/sidebar/settings.svg')}
.icon-accounts{--sidebar-icon:url('/icons/sidebar/accounts.svg')}
.sidebar .nav:hover .sidebar-svg-icon{
  filter:drop-shadow(0 0 4px #91e8ff) drop-shadow(0 0 8px #1ea6d099);
  transform:scale(1.06);
}
.sidebar .nav.active .sidebar-svg-icon{
  filter:drop-shadow(0 0 4px #d1f7ff) drop-shadow(0 0 9px #36c8f0);
  transform:scale(1.08);
}

/* Keep sidebar icon geometry identical when switching themes. */
html[data-theme="light"] .sidebar .nav>i,
html[data-theme="dark"] .sidebar .nav>i{
  width:24px;
  height:24px;
  flex:0 0 24px;
}
html[data-theme="light"] .sidebar .nav>i:not(.sidebar-svg-icon),
html[data-theme="dark"] .sidebar .nav>i:not(.sidebar-svg-icon){
  display:grid;
  place-items:center;
  font-size:14px;
  line-height:1;
  transform:none;
}
html[data-theme="light"] .sidebar .nav .sidebar-svg-icon,
html[data-theme="dark"] .sidebar .nav .sidebar-svg-icon{transform:none}
html[data-theme="light"] .sidebar .nav.active .sidebar-svg-icon,
html[data-theme="dark"] .sidebar .nav.active .sidebar-svg-icon{transform:scale(1.08)}
html[data-theme="light"] .sidebar .nav:hover:not(.active) .sidebar-svg-icon,
html[data-theme="dark"] .sidebar .nav:hover:not(.active) .sidebar-svg-icon{transform:none}

.cctv-live{position:relative;min-height:280px;background:#172630;display:grid;place-items:center}
.cctv-live.hide{display:none}
.cctv-live>img{display:block;width:100%;max-height:62vh;object-fit:contain;background:#172630}
.cctv-live-status{position:absolute;inset:0;display:grid;place-items:center;color:#e8f0f3;background:#172630;font-weight:700}
.cctv-live-status.hide{display:none}
.cctv-live-badge{position:absolute;left:14px;top:14px;padding:6px 9px;border-radius:5px;background:#d92d20;color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;box-shadow:0 2px 8px #0005}
.cctv-live-badge:before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#fff}
.cctv-snapshot-control{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cctv-snapshot-control button{white-space:nowrap}
.cctv-card .actions{gap:8px}
.cctv-card .icon-btn{display:inline-flex;width:auto;min-width:64px;height:34px;padding:0 12px;justify-content:center;white-space:nowrap}
.cctv-qr-panel{grid-column:1/-1;display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;padding:16px;border:1px solid #dce6ea;border-radius:10px;background:#f8fbfc}
.cctv-qr-panel>img{display:block;width:150px;height:150px;padding:7px;background:#fff;border:1px solid #dce6ea;border-radius:7px}
.cctv-qr-panel strong,.cctv-qr-panel span,.cctv-qr-panel small{display:block}.cctv-qr-panel strong{font-size:15px;color:#263740}.cctv-qr-panel span{margin-top:6px;color:#236c8d;font-weight:700}.cctv-qr-panel small{margin:7px 0 12px;color:#71808a;line-height:1.45}.cctv-qr-panel>div>div{display:flex;gap:8px;flex-wrap:wrap}
.cctv-qr-panel a.secondary{display:inline-flex;align-items:center;text-decoration:none}
@media(max-width:520px){.cctv-qr-panel{grid-template-columns:1fr}.cctv-qr-panel>img{margin:auto}}

/* CCTV surveillance console */
#cctvDetail{padding:18px;background:#0b151bcc}
#cctvDetail .cctv-detail{width:min(1440px,96vw);height:min(900px,94vh);max-width:none;max-height:none;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 380px;border:1px solid #c6d0d5;border-radius:12px;background:#061116;font-family:Consolas,"Courier New",monospace;box-shadow:0 28px 80px #0009}
.cctv-console-view{min-width:0;min-height:0;display:flex;flex-direction:column;background:#061116;color:#eafff7}
#cctvDetail .cctv-console-head{min-height:64px;padding:14px 20px;border:0;background:linear-gradient(180deg,#07151b,#061116);align-items:flex-start;color:#fff}
#cctvDetail .cctv-console-head h2{margin:0;font:700 16px/1.1 Consolas,"Courier New",monospace;letter-spacing:.045em;text-transform:uppercase;color:#fff}
.cctv-console-title{display:flex;align-items:center;gap:12px}
#cctvModeBadge{padding:3px 7px;border:1px solid #ff3c2f;color:#ff4c40;font-size:10px;line-height:1;letter-spacing:.08em;text-transform:uppercase}
#cctvDetailChannel{margin-top:7px!important;color:#51f3a8!important;font:700 10px/1 Consolas,"Courier New",monospace!important;letter-spacing:.08em;text-transform:uppercase}
#cctvConsoleClock{margin-left:auto;color:#fff;font-size:16px;font-weight:700;white-space:nowrap}
.cctv-console-view>.cctv-player{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;border:0;background:#061116}
.cctv-console-view>#cctvDetailImage{flex:1;min-height:0;width:100%;object-fit:contain;background:#07181d}
#cctvDetail .cctv-live{flex:1;min-height:270px;overflow:hidden;background:#07181d}
#cctvDetail .cctv-live:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0 3px,#02101438 3px 4px),linear-gradient(90deg,#163d430f,#62afa418,#163d430f);box-shadow:inset 0 0 80px #0008}
#cctvDetail .cctv-live>img{display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain!important;object-position:center;background:#07181d}
#cctvDetail .cctv-live-status{z-index:3;background:#07181d;color:#83c9b8;letter-spacing:.09em;text-transform:uppercase}
#cctvDetail .cctv-live-badge{display:none}
#cctvDetail .cctv-playback-panel{flex:0 0 auto;display:grid;grid-template-columns:155px 155px minmax(0,1fr);gap:7px;padding:10px 20px 16px;border:0;border-top:1px solid #17412f;border-radius:0;background:#061116;color:#bdffe0;box-shadow:none;align-items:end}
#cctvDetail .cctv-playback-panel>div:first-child{display:none}
#cctvDetail .cctv-playback-timeline{grid-column:1/-1;order:1;gap:5px;padding:0 0 3px}
#cctvDetail .cctv-playback-timeline>div{color:#b9ffdc;font-size:9px;font-weight:700}
#cctvDetail .cctv-playback-timeline b{padding:4px 9px;border:1px solid #66e8a3;border-radius:2px;background:#138049;color:#fff;font-size:10px}
#cctvDetail .cctv-playback-timeline input::-webkit-slider-runnable-track{height:10px;border:1px solid #2c7250;border-radius:0;background:repeating-linear-gradient(90deg,transparent 0 50px,#4ba977 50px 52px),linear-gradient(90deg,#39b96f,#163f2b)}
#cctvDetail .cctv-playback-timeline input::-webkit-slider-thumb{width:0;height:0;margin:0;border:0;box-shadow:none}
#cctvDetail .cctv-playback-timeline input::-moz-range-track{height:9px;border:1px solid #2c7250;border-radius:0;background:linear-gradient(90deg,#39b96f,#163f2b)}
#cctvDetail .cctv-playback-transport{grid-column:1/-1;order:2;justify-content:flex-start;gap:6px;padding:0}
#cctvDetail .cctv-playback-transport span{margin-left:4px;color:#5c9679;font-size:9px}
#cctvDetail .cctv-playback-panel label{order:3;gap:5px;color:#55e69a;font-size:9px;text-transform:uppercase;letter-spacing:.06em}
#cctvDetail .cctv-playback-panel input{height:37px;padding:0 8px;border:1px solid #286d4b;border-radius:1px;background:#071a17;color:#e5fff2;font:700 10px Consolas,"Courier New",monospace;color-scheme:dark}
#cctvDetail .cctv-playback-actions{order:3;align-items:end;justify-content:flex-end;gap:7px}
#cctvDetail .cctv-playback-panel button,#cctvDetail .cctv-playback-panel a{height:37px;border:1px solid #2d7852;border-radius:2px;background:#071713;color:#bdffe0;font:700 10px Consolas,"Courier New",monospace;letter-spacing:.035em;text-transform:uppercase;box-shadow:none}
#cctvDetail .cctv-playback-panel button:hover{background:#103b29;color:#fff}
#cctvDetail .cctv-playback-panel button.primary{border-color:#4bd78a;background:#147646;color:#fff}
#cctvDetail .cctv-playback-transport button{min-width:0;padding:0 13px}
#cctvDetail .cctv-playback-transport [data-cctv-live]{margin-left:auto}
.cctv-console-details{min-width:0;min-height:0;display:flex;flex-direction:column;background:#f3f8fa;color:#142b37;border-left:1px solid #cbd9df;font-family:"Segoe UI",Arial,sans-serif}
.cctv-details-head{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 22px}
.cctv-details-head h3{margin:0;font-size:16px;color:#152c38}
.cctv-details-head button{width:28px;height:28px;border:0;background:transparent;color:#55717f;font-size:20px;cursor:pointer}
#cctvDetail .cctv-detail-meta{flex:1;min-height:0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:18px 20px;padding:0 22px 22px;overflow:auto}
#cctvDetail .cctv-detail-meta>p{flex:1 1 calc(50% - 10px);min-width:110px;margin:0;color:#1c4152;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
#cctvDetail .cctv-detail-meta>p.cctv-meta-wide{flex-basis:100%}
#cctvDetail .cctv-detail-meta>p strong{margin:0 0 7px;color:#416374;font-size:11px;letter-spacing:.07em;text-transform:uppercase}
#cctvDetail .cctv-qr-panel{flex:0 0 auto;width:100%;display:grid;grid-template-columns:1fr;gap:12px;align-items:center;margin-top:4px;padding:16px;border:1px solid #d2e0e6;border-radius:12px;background:#fff}
#cctvDetail .cctv-qr-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
#cctvDetail .cctv-qr-head>strong{font-size:11px;letter-spacing:.06em;text-transform:uppercase}
#cctvDetail .cctv-qr-head #cctvSnapshotButton{height:35px;padding:0 12px;font-size:11px}
#cctvDetail .cctv-qr-panel>img{width:210px;height:210px;margin:auto;padding:4px;border:0;border-radius:0}
#cctvDetail .cctv-qr-copy{text-align:center}
#cctvDetail .cctv-qr-copy>span{margin:0;color:#15759e;font-size:13px;font-weight:600}
#cctvDetail .cctv-qr-copy>small{margin:10px 0 13px;color:#617783;font-size:11px;line-height:1.5}
#cctvDetail .cctv-qr-copy>div{display:grid;grid-template-columns:1fr 1fr;gap:7px}
#cctvDetail .cctv-qr-copy .secondary{height:37px;justify-content:center;padding:0 10px;font-size:11px}
@media(max-width:800px){#cctvDetail{padding:6px;overflow:auto;place-items:start center}#cctvDetail .cctv-detail{height:auto;min-height:calc(100vh - 12px);grid-template-columns:1fr;overflow:visible}.cctv-console-view{min-height:610px}.cctv-console-details{border-left:0;border-top:1px solid #cbd9df}.cctv-console-title{align-items:flex-start;flex-direction:column;gap:5px}#cctvConsoleClock{font-size:12px}#cctvDetail .cctv-playback-panel{grid-template-columns:1fr 1fr}#cctvDetail .cctv-playback-actions{grid-column:1/-1;justify-content:stretch}#cctvDetail .cctv-playback-actions button{flex:1}#cctvDetail .cctv-detail-meta{overflow:visible}}
/* Integrated account access uses the same typography and controls as the inventory UI. */
.permission-hidden{display:none!important}
.auth-screen{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:24px;background:linear-gradient(145deg,#edf3f7 0%,#f8fafb 52%,#e7eef3 100%)}
.auth-screen.hide{display:none}.auth-locked{overflow:hidden}
.auth-card{width:min(430px,100%);padding:34px;border:1px solid #dbe4e9;border-radius:22px;background:#fff;box-shadow:0 24px 70px rgba(24,45,58,.16);font-family:inherit}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:34px}.auth-brand>div:last-child{display:grid}.auth-brand strong{font-size:18px;color:#263b47}.auth-brand small{color:#829099}
.auth-card h1{margin:0 0 8px;color:#203541;font-size:28px}.auth-card>p{margin:0 0 26px;color:#71818a}.auth-card .field{margin-bottom:17px}.auth-submit{width:100%;margin-top:6px;justify-content:center}
.auth-error{margin:4px 0 14px!important;padding:10px 12px;border-radius:9px;background:#fff0f0;color:#b42318!important;font-size:13px}
.account-nav-icon{display:grid!important;place-items:center;border:1px solid currentColor;border-radius:50%;font-size:10px;font-style:normal}
.sidebar .user{gap:10px}.sidebar .user>div{min-width:0;flex:1}.sidebar .user strong,.sidebar .user small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logout-button{border:0;background:transparent;color:#8c9aa2;font:inherit;font-size:11px;cursor:pointer}.logout-button:hover{color:#d14c45}
.accounts-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.accounts-head h2{margin:0 0 5px;color:#263a46}.accounts-head p{margin:0;color:#7b8991}
.account-list{display:grid;gap:12px}.account-card{display:grid;grid-template-columns:48px minmax(180px,1fr) minmax(160px,.55fr) auto;align-items:center;gap:16px;padding:18px 20px;border:1px solid #dde6ea;border-radius:14px;background:#fff;box-shadow:0 3px 12px rgba(31,54,65,.04)}
.account-card.disabled{opacity:.62}.account-avatar{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:#e8f3f8;color:#24779d;font-size:19px;font-weight:700}
.account-copy,.account-state{display:grid;gap:3px}.account-copy strong{color:#243a46}.account-copy span,.account-copy small,.account-state small{color:#7c8b93;font-size:12px}.account-state b{color:#27835c;font-size:12px}.account-card.disabled .account-state b{color:#a7534d}.account-empty{padding:32px;text-align:center;color:#829099}
.account-modal{width:min(760px,calc(100vw - 32px));max-height:90vh;overflow:auto}.account-enabled{display:flex;align-items:center;gap:9px;margin:8px 0 20px;color:#475c67}.account-enabled input{width:auto}
.permission-heading{display:flex;justify-content:space-between;gap:15px;margin-bottom:10px}.permission-heading small{color:#7d8b93}.permission-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-height:320px;overflow:auto;padding:2px}
.permission-option{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid #dfe7eb;border-radius:10px;background:#f9fbfc;cursor:pointer}.permission-option input{width:auto;margin-top:3px}.permission-option span{display:grid;gap:2px}.permission-option strong{font-size:13px;color:#344b57}.permission-option small{font-size:11px;line-height:1.35;color:#7c8a92}
html[data-theme="dark"] .auth-card,html[data-theme="dark"] .account-card{background:#17242bf2;border-color:#30414a}html[data-theme="dark"] .auth-card h1,html[data-theme="dark"] .auth-brand strong,html[data-theme="dark"] .account-copy strong,html[data-theme="dark"] .accounts-head h2{color:#edf5f7}html[data-theme="dark"] .permission-option{background:#1c2a31;border-color:#34464f}html[data-theme="dark"] .permission-option strong{color:#e7f0f3}
@media(max-width:760px){.account-card{grid-template-columns:44px 1fr}.account-state{grid-column:2}.account-card button{grid-column:2;justify-self:start}.permission-grid{grid-template-columns:1fr}.accounts-head{align-items:flex-start;flex-direction:column}}

/* Animated rain background supplied for the login screen. */
.auth-screen{
  position:fixed;
  overflow:hidden;
  isolation:isolate;
  --c:#001f5b;
  --auth-rain-grid:rgb(255 255 255 / .72);
  --auth-rain-filter:blur(.8em) saturate(1.6) contrast(1.15);
  --auth-rain-overlay-opacity:1;
  background-color:#b7cee9;
  background-image:
    radial-gradient(4px 100px at 0 235px,var(--c),#0000),radial-gradient(4px 100px at 300px 235px,var(--c),#0000),radial-gradient(1.5px 1.5px at 150px 117.5px,var(--c) 100%,#0000 150%),
    radial-gradient(4px 100px at 0 252px,var(--c),#0000),radial-gradient(4px 100px at 300px 252px,var(--c),#0000),radial-gradient(1.5px 1.5px at 150px 126px,var(--c) 100%,#0000 150%),
    radial-gradient(4px 100px at 0 150px,var(--c),#0000),radial-gradient(4px 100px at 300px 150px,var(--c),#0000),radial-gradient(1.5px 1.5px at 150px 75px,var(--c) 100%,#0000 150%),
    radial-gradient(4px 100px at 0 253px,var(--c),#0000),radial-gradient(4px 100px at 300px 253px,var(--c),#0000),radial-gradient(1.5px 1.5px at 150px 126.5px,var(--c) 100%,#0000 150%),
    radial-gradient(4px 100px at 0 204px,var(--c),#0000),radial-gradient(4px 100px at 300px 204px,var(--c),#0000),radial-gradient(1.5px 1.5px at 150px 102px,var(--c) 100%,#0000 150%),
    radial-gradient(4px 100px at 0 134px,var(--c),#0000),radial-gradient(4px 100px at 300px 134px,var(--c),#0000),radial-gradient(1.5px 1.5px at 150px 67px,var(--c) 100%,#0000 150%),
    radial-gradient(4px 100px at 0 179px,var(--c),#0000),radial-gradient(4px 100px at 300px 179px,var(--c),#0000),radial-gradient(1.5px 1.5px at 150px 89.5px,var(--c) 100%,#0000 150%),
    radial-gradient(4px 100px at 0 299px,var(--c),#0000),radial-gradient(4px 100px at 300px 299px,var(--c),#0000),radial-gradient(1.5px 1.5px at 150px 149.5px,var(--c) 100%,#0000 150%),
    radial-gradient(4px 100px at 0 215px,var(--c),#0000),radial-gradient(4px 100px at 300px 215px,var(--c),#0000),radial-gradient(1.5px 1.5px at 150px 107.5px,var(--c) 100%,#0000 150%),
    radial-gradient(4px 100px at 0 281px,var(--c),#0000),radial-gradient(4px 100px at 300px 281px,var(--c),#0000),radial-gradient(1.5px 1.5px at 150px 140.5px,var(--c) 100%,#0000 150%),
    radial-gradient(4px 100px at 0 158px,var(--c),#0000),radial-gradient(4px 100px at 300px 158px,var(--c),#0000),radial-gradient(1.5px 1.5px at 150px 79px,var(--c) 100%,#0000 150%),
    radial-gradient(4px 100px at 0 210px,var(--c),#0000),radial-gradient(4px 100px at 300px 210px,var(--c),#0000),radial-gradient(1.5px 1.5px at 150px 105px,var(--c) 100%,#0000 150%);
  background-size:
    300px 235px,300px 235px,300px 235px,300px 252px,300px 252px,300px 252px,
    300px 150px,300px 150px,300px 150px,300px 253px,300px 253px,300px 253px,
    300px 204px,300px 204px,300px 204px,300px 134px,300px 134px,300px 134px,
    300px 179px,300px 179px,300px 179px,300px 299px,300px 299px,300px 299px,
    300px 215px,300px 215px,300px 215px,300px 281px,300px 281px,300px 281px,
    300px 158px,300px 158px,300px 158px,300px 210px,300px 210px,300px 210px;
  animation:auth-rain-fall 75s linear infinite;
  will-change:background-position;
}
html[data-theme="dark"] .auth-screen{
  --c:#09f;
  --auth-rain-grid:hsl(0 0% 4%);
  --auth-rain-filter:blur(1em) brightness(6);
  --auth-rain-overlay-opacity:1;
  background-color:#000;
}
.auth-screen::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:var(--auth-rain-overlay-opacity);
  backdrop-filter:var(--auth-rain-filter);
  background-image:radial-gradient(circle at 50% 50%,#0000 0,#0000 2px,var(--auth-rain-grid) 2px);
  background-size:8px 8px;
}
.auth-card{position:relative;z-index:2;background:#fffffff5;box-shadow:0 28px 90px #18384833}
html[data-theme="dark"] .auth-card{box-shadow:0 28px 90px #000b}
html[data-theme="dark"] .auth-card>p,html[data-theme="dark"] .auth-brand small{color:#91a6b1}
html[data-theme="dark"] .auth-card .field label{color:#b8c7ce}
html[data-theme="dark"] .auth-card input{background:#0e1a20;border-color:#3a4c55;color:#edf5f7}
html[data-theme="dark"] .auth-card input::placeholder{color:#71858f}
html[data-theme="dark"] .auth-brand .brand-mark{border-color:#3f89aa;color:#ddecf3;background:#112129}
@keyframes auth-rain-fall{
  0%{background-position:
    0 220px,3px 220px,151.5px 337.5px,25px 24px,28px 24px,176.5px 150px,
    50px 16px,53px 16px,201.5px 91px,75px 224px,78px 224px,226.5px 350.5px,
    100px 19px,103px 19px,251.5px 121px,125px 120px,128px 120px,276.5px 187px,
    150px 31px,153px 31px,301.5px 120.5px,175px 235px,178px 235px,326.5px 384.5px,
    200px 121px,203px 121px,351.5px 228.5px,225px 224px,228px 224px,376.5px 364.5px,
    250px 26px,253px 26px,401.5px 105px,275px 75px,278px 75px,426.5px 180px}
  to{background-position:
    0 6800px,3px 6800px,151.5px 6917.5px,25px 13632px,28px 13632px,176.5px 13758px,
    50px 5416px,53px 5416px,201.5px 5491px,75px 17175px,78px 17175px,226.5px 17301.5px,
    100px 5119px,103px 5119px,251.5px 5221px,125px 8428px,128px 8428px,276.5px 8495px,
    150px 9876px,153px 9876px,301.5px 9965.5px,175px 13391px,178px 13391px,326.5px 13540.5px,
    200px 14741px,203px 14741px,351.5px 14848.5px,225px 18770px,228px 18770px,376.5px 18910.5px,
    250px 5082px,253px 5082px,401.5px 5161px,275px 6375px,278px 6375px,426.5px 6480px}
}
@media(prefers-reduced-motion:reduce){.auth-screen{animation:none}}

/* Reference-matched login card; product branding remains Inventory. */
.auth-card{width:min(430px,100%);padding:36px 35px 34px;border:1px solid #cbdbe5;border-radius:20px;background:#fffffff8;box-shadow:0 22px 65px #1838482b}
.auth-brand{gap:12px;margin-bottom:30px}.auth-brand .brand-mark{width:44px;height:44px;flex-basis:44px;border:0;border-radius:10px;background:#0d2d3b;color:#fff;font-size:13px}.auth-brand strong{font-size:16px;color:#163848}.auth-brand small{margin-top:2px;color:#526d7d;font-size:13px}
.auth-card h1{margin:0 0 6px;color:#123746;font-size:30px;line-height:1.2}.auth-card>p{margin:0 0 24px;color:#506c7d;font-size:15px}
.auth-card .field{margin-bottom:19px}.auth-card .field label{margin-bottom:7px;color:#183f50;font-size:14px}
.auth-input-wrap{position:relative}.auth-input-wrap>svg{position:absolute;left:16px;top:50%;z-index:1;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:#567487;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.auth-card .auth-input-wrap input{width:100%;height:49px;padding:0 48px;border:1px solid #7897ac;border-radius:11px;background:#fff;color:#183746;font:14px inherit;transition:border-color .16s,box-shadow .16s}.auth-card .auth-input-wrap input:focus{border-color:#19789f;box-shadow:0 0 0 3px #1b83ac1a}.auth-card .auth-input-wrap input::placeholder{color:#8498a3}
.auth-password-toggle{position:absolute;right:15px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#18749b;font:600 14px inherit;cursor:pointer}.auth-password-toggle:hover{text-decoration:underline}.auth-password-hint{display:block;margin-top:7px;color:#587181;font-size:13px}
.auth-error{margin:0 0 14px!important}.auth-submit{width:100%;height:51px;margin-top:3px;border-radius:11px;background:#247ea5;border-color:#247ea5;font-size:15px;justify-content:center}.auth-submit:hover{background:#1d6e91}
.auth-support{margin:22px 0 0!important;color:#526f80!important;font-size:13px!important}.auth-support a{color:#146f96;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.auth-remember{display:flex;align-items:flex-start;gap:10px;margin:-3px 0 18px;color:#294b5b;cursor:pointer}.auth-remember input{width:17px!important;height:17px!important;margin:2px 0 0;padding:0!important;accent-color:#247ea5;flex:0 0 auto}.auth-remember span{display:grid;gap:2px}.auth-remember strong{font-size:13px;font-weight:650}.auth-remember small{color:#647d8a;font-size:12px;line-height:1.35}
html[data-theme="dark"] .auth-card{background:#17242bf7;border-color:#3b505c}html[data-theme="dark"] .auth-brand .brand-mark{background:#0a1d26;color:#f2f7f9}html[data-theme="dark"] .auth-card .auth-input-wrap input{background:#0e1a20;border-color:#587484;color:#edf5f7}html[data-theme="dark"] .auth-input-wrap>svg{stroke:#9ab0bb}html[data-theme="dark"] .auth-password-hint,html[data-theme="dark"] .auth-support{color:#91a6b1!important}
html[data-theme="dark"] .auth-remember{color:#d9e6ea}html[data-theme="dark"] .auth-remember small{color:#91a6b1}
@media(max-width:520px){.auth-screen{padding:12px}.auth-card{padding:30px 26px}.auth-brand small{font-size:12px}}
@media(max-height:620px){.auth-screen{place-items:start center;overflow:auto;padding:6px}.auth-card{margin:auto;padding-top:30px;padding-bottom:28px}.auth-brand{margin-bottom:24px}.auth-support{margin-top:17px!important}}

/* Floating previews of the main tools available after sign-in. */
.auth-float-layer{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}.auth-card{z-index:3}
.auth-float{position:absolute;display:flex;align-items:center;gap:11px;width:220px;padding:12px 14px;border:1px solid #92b2c766;border-radius:14px;background:#ffffffe0;box-shadow:0 14px 35px #16394b20;backdrop-filter:blur(10px);color:#153848;animation:auth-float-drift 9s ease-in-out infinite;will-change:transform}
.auth-float-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:10px;background:#dcecf6;color:#126f98}.auth-float-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.auth-float>span:last-child{display:grid;min-width:0;gap:4px}.auth-float strong{overflow:hidden;color:#153848;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.auth-float small{display:flex;align-items:center;gap:6px;color:#607987;font-size:10px}.auth-float small i{width:6px;height:6px;border-radius:50%;background:#20a276;box-shadow:0 0 0 3px #20a2761d}
.auth-float-assets{left:6%;top:12%;animation-delay:-1s}.auth-float-devices{right:6%;top:14%;animation-duration:10.5s;animation-delay:-4s}.auth-float-alerts{left:2.5%;top:46%;animation-duration:8.5s;animation-delay:-5.5s}.auth-float-access{right:2.5%;top:48%;animation-duration:11s;animation-delay:-2s}.auth-float-software{left:8%;bottom:12%;animation-duration:10s;animation-delay:-7s}.auth-float-cctv{right:8%;bottom:11%;animation-duration:9.5s;animation-delay:-3s}
html[data-theme="dark"] .auth-float{border-color:#3f6f8766;background:#10232dde;box-shadow:0 16px 42px #0007}html[data-theme="dark"] .auth-float strong{color:#e5f0f4}html[data-theme="dark"] .auth-float small{color:#91a7b2}html[data-theme="dark"] .auth-float-icon{background:#183c4d;color:#68c8ef}
@keyframes auth-float-drift{0%,100%{transform:translate3d(0,0,0) rotate(-.35deg)}50%{transform:translate3d(0,-13px,0) rotate(.45deg)}}
@media(max-width:1100px){.auth-float{width:190px;padding:10px 12px}.auth-float-assets,.auth-float-software{left:3%}.auth-float-devices,.auth-float-cctv{right:3%}.auth-float-alerts,.auth-float-access{display:none}}
@media(max-width:900px){.auth-float-layer{display:none}}
@media(prefers-reduced-motion:reduce){.auth-float{animation:none}}

/* Randomized pop-outs are positioned by auth.js with collision checks. */
.auth-float{left:0;top:0;right:auto;bottom:auto;opacity:0;filter:blur(5px);transform:scale(.76) translateY(12px);animation:none;transition:opacity .42s ease,transform .46s cubic-bezier(.18,.9,.25,1.18),filter .38s ease}
.auth-float.is-visible{opacity:1;filter:blur(0);transform:scale(1) translateY(0)}
.auth-float-errors .auth-float-icon{background:#f9e1df;color:#bd4540}.auth-float-errors small i{background:#d9534f;box-shadow:0 0 0 3px #d9534f1d}
.auth-float-tools .auth-float-icon{background:#e8e5fa;color:#6657b4}.auth-float-remote .auth-float-icon{background:#dff2ed;color:#168466}
html[data-theme="dark"] .auth-float-errors .auth-float-icon{background:#4a2527;color:#ff8d86}html[data-theme="dark"] .auth-float-tools .auth-float-icon{background:#2e294b;color:#bcb2ff}html[data-theme="dark"] .auth-float-remote .auth-float-icon{background:#173b34;color:#6ed8ba}

/* ATLAS product artwork in the application and sign-in branding. */
.brand-mark{overflow:hidden;background:#fff;border-color:#a9c9dc}.brand-mark img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.brand>div:last-child{min-width:0}.brand small{max-width:158px;line-height:1.25;white-space:normal}
.auth-brand .brand-mark{overflow:hidden;background:transparent;border:0}.auth-brand .brand-mark img{width:100%;height:100%;object-fit:cover;object-position:center}.auth-brand small{max-width:295px;line-height:1.3}
html[data-theme="dark"] .auth-brand .brand-mark{background:transparent;border:0}

/* Varied floating-card sizes and live activity previews. */
.auth-float-assets{width:238px}.auth-float-devices{width:210px}.auth-float-software{width:232px}.auth-float-cctv{width:218px}.auth-float-alerts{width:188px}.auth-float-access{width:226px}.auth-float-errors{width:234px}.auth-float-tools{width:178px}.auth-float-remote{width:244px}
.auth-float>span:last-child{flex:1}.auth-mini{height:12px;margin-top:2px;color:#168466}.auth-mini b,.auth-mini span{font:600 8px/1 "Segoe UI",Arial,sans-serif}
.auth-mini-stat,.auth-mini-alert{display:flex;align-items:baseline;gap:4px}.auth-mini-stat b{color:#167a9f;font-size:11px}.auth-mini-stat span,.auth-mini-alert span{color:#77909d}.auth-mini-alert b{display:grid;place-items:center;width:17px;height:17px;margin-top:-2px;border-radius:6px;background:#fff0ef;color:#c4433e;font-size:9px;animation:auth-alert-pop 1.8s ease-in-out infinite}
.auth-mini-bars{display:flex;align-items:flex-end;gap:2px}.auth-mini-bars i{width:3px;height:4px;border-radius:2px;background:#288daf;animation:auth-bar-wave 1.1s ease-in-out infinite}.auth-mini-bars i:nth-child(2){animation-delay:-.8s}.auth-mini-bars i:nth-child(3){animation-delay:-.55s}.auth-mini-bars i:nth-child(4){animation-delay:-.3s}.auth-mini-bars i:nth-child(5){animation-delay:-.7s}.auth-mini-bars i:nth-child(6){animation-delay:-.15s}
.auth-mini-progress{position:relative;overflow:hidden;height:4px;margin-top:5px;border-radius:5px;background:#dce9ef}.auth-mini-progress span{position:absolute;inset:0 auto 0 0;width:68%;border-radius:inherit;background:linear-gradient(90deg,#197ca5,#37b3d8);animation:auth-progress-scan 2.8s ease-in-out infinite}
.auth-mini-live{display:flex;align-items:center;gap:5px}.auth-mini-live>i{width:6px;height:6px;border-radius:50%;background:#ef554e;box-shadow:0 0 0 0 #ef554e80;animation:auth-live-pulse 1.4s ease-out infinite}.auth-mini-live b{color:#d54c46}.auth-mini-live span{position:relative;overflow:hidden;width:48px;height:3px;margin-left:auto;border-radius:4px;background:#dce8ed}.auth-mini-live span::after{content:"";position:absolute;inset:0;width:45%;background:#2a91b5;animation:auth-scan-line 1.7s linear infinite}
.auth-mini-shield{display:flex;align-items:center;gap:5px}.auth-mini-shield span{width:9px;height:9px;border:2px solid #1b9a72;border-radius:50%;animation:auth-shield-pulse 2s ease-in-out infinite}.auth-mini-shield b{color:#26846a}
.auth-mini-errors{display:flex;align-items:center;gap:3px}.auth-mini-errors i{width:5px;height:5px;border-radius:50%;background:#dc5a54;animation:auth-error-dots 1.4s ease-in-out infinite}.auth-mini-errors i:nth-child(2){animation-delay:.2s}.auth-mini-errors i:nth-child(3){animation-delay:.4s}.auth-mini-errors b{margin-left:3px;color:#a8625e}
.auth-mini-tools{display:flex;gap:4px}.auth-mini-tools i{width:7px;height:7px;border:2px solid #7568bd;border-radius:2px;animation:auth-tool-spin 2.4s linear infinite}.auth-mini-tools i:nth-child(2){animation-delay:-.8s}.auth-mini-tools i:nth-child(3){animation-delay:-1.6s}
.auth-mini-signal{display:flex;align-items:flex-end;gap:2px}.auth-mini-signal i{width:3px;border-radius:2px;background:#1a9a72;animation:auth-signal 1.6s ease-in-out infinite}.auth-mini-signal i:nth-child(1){height:3px}.auth-mini-signal i:nth-child(2){height:5px;animation-delay:-.2s}.auth-mini-signal i:nth-child(3){height:8px;animation-delay:-.4s}.auth-mini-signal i:nth-child(4){height:11px;animation-delay:-.6s}.auth-mini-signal b{margin-left:5px;color:#26846a}
html[data-theme="dark"] .auth-mini-progress{background:#29404b}html[data-theme="dark"] .auth-mini-stat span,html[data-theme="dark"] .auth-mini-alert span{color:#849aa5}
@keyframes auth-bar-wave{0%,100%{height:3px;opacity:.45}50%{height:12px;opacity:1}}@keyframes auth-progress-scan{0%,100%{width:38%}50%{width:86%}}@keyframes auth-live-pulse{70%{box-shadow:0 0 0 6px #ef554e00}}@keyframes auth-scan-line{from{transform:translateX(-110%)}to{transform:translateX(230%)}}@keyframes auth-alert-pop{50%{transform:scale(1.14)}}@keyframes auth-shield-pulse{50%{box-shadow:0 0 0 4px #1b9a7225}}@keyframes auth-error-dots{0%,100%{opacity:.25;transform:translateY(1px)}50%{opacity:1;transform:translateY(-2px)}}@keyframes auth-tool-spin{to{transform:rotate(360deg)}}@keyframes auth-signal{50%{opacity:.35;transform:scaleY(.55)}}
@media(max-width:1100px){.auth-float{width:190px!important}.auth-float-alerts,.auth-float-access,.auth-float-tools{display:none}}
@media(prefers-reduced-motion:reduce){.auth-mini *{animation:none!important}}
html.auth-pending{background:#f3f6f8}html.auth-pending body{visibility:hidden}

/* Animated ATLAS product logo and first-visit handoff. */
[data-atlas-logo]{display:block;line-height:0;-webkit-tap-highlight-color:transparent}
[data-atlas-logo] svg{display:block;width:100%;height:100%;overflow:visible}
.brand-mark.atlas-logo-mark,.auth-brand .brand-mark.atlas-logo-mark{overflow:visible;border:0;background:transparent;cursor:pointer;transform-origin:center;transition:opacity .18s ease,transform .18s ease}
.brand-mark.atlas-logo-mark svg,.auth-brand .brand-mark.atlas-logo-mark svg{object-fit:initial}
html.atlas-intro-active [data-atlas-logo]:not(.atlas-intro-logo){opacity:0}
.atlas-intro{overflow:hidden;color:#123746;background:radial-gradient(circle at 50% 42%,#fff 0,#f4f8fc 40%,#e8f1f8 100%)}
.atlas-intro::before,.atlas-intro::after{content:"";position:absolute;border:1px solid #168de51f;border-radius:50%;animation:atlas-intro-ripple 2.2s ease-out infinite}
.atlas-intro::before{width:360px;height:360px}.atlas-intro::after{width:520px;height:520px;animation-delay:.48s}
.atlas-intro-content{position:relative;z-index:1;display:grid;justify-items:center;width:min(390px,82vw)}
.atlas-intro-logo{width:min(260px,58vw);aspect-ratio:670/520;transform-origin:center;will-change:transform,filter;filter:drop-shadow(0 18px 32px #00419138)}
.atlas-intro-content>strong{margin-top:18px;font-size:28px;letter-spacing:.28em;text-indent:.28em}
.atlas-intro-content>span{margin-top:7px;color:#688296;font-size:12px;letter-spacing:.08em}
.atlas-intro-content>i{position:relative;width:120px;height:3px;overflow:hidden;margin-top:21px;border-radius:999px;background:#cfe0eb}
.atlas-intro-content>i::after{content:"";position:absolute;inset:0;width:42%;border-radius:inherit;background:linear-gradient(90deg,#0a66e0,#2cb8ff);animation:atlas-intro-progress 1.05s ease-in-out infinite}
@keyframes atlas-intro-ripple{0%{transform:scale(.7);opacity:0}24%{opacity:1}100%{transform:scale(1.25);opacity:0}}
@keyframes atlas-intro-progress{from{transform:translateX(-125%)}to{transform:translateX(340%)}}
html[data-theme="dark"] .atlas-intro{color:#edf7fb;background:radial-gradient(circle at 50% 42%,#183241 0,#101f28 48%,#09141b 100%)}
html[data-theme="dark"] .atlas-intro-content>span{color:#92adbc}html[data-theme="dark"] .atlas-intro-content>i{background:#294552}
@media(prefers-reduced-motion:reduce){.atlas-intro::before,.atlas-intro::after,.atlas-intro-content>i::after{animation:none}.atlas-intro::before,.atlas-intro::after{display:none}}
html.atlas-lite .atlas-intro::before,html.atlas-lite .atlas-intro::after{display:none}
html.atlas-lite .auth-screen{animation:none}
html.atlas-lite .auth-mini *{animation:none!important}
html.atlas-lite .auth-float{backdrop-filter:none}
.device-toolbar{flex-wrap:wrap}.device-filter{min-width:145px;color:#41515b}.device-clear-filters{white-space:nowrap}.device-sort{display:flex;align-items:center;gap:6px;width:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:inherit;letter-spacing:inherit;text-align:left;text-transform:inherit;cursor:pointer}.device-sort::after{content:"↕";color:#a5b1b8;font-size:11px}.device-sort.active::after{color:#287fa5}.device-sort.active[data-direction="asc"]::after{content:"↑"}.device-sort.active[data-direction="desc"]::after{content:"↓"}.device-sort:hover,.device-sort:focus-visible{color:#287fa5}.device-sort:focus-visible{outline:2px solid #8bc7df;outline-offset:3px;border-radius:2px}.device-empty-filter{padding:30px;text-align:center;color:#71808a}html[data-theme="dark"] .device-filter{background:#13232c;border-color:#314650;color:#dbe7ec}html[data-theme="dark"] .device-sort.active::after,html[data-theme="dark"] .device-sort:hover{color:#5cc3ed}@media(max-width:900px){.device-toolbar .search{flex:1 1 100%}.device-filter{flex:1 1 145px}.device-toolbar>span{display:none}}
.personal-dashboard-page{--personal-card:#fff;--personal-soft:#f5f9fb;--personal-border:#dce6eb}.personal-dashboard-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.personal-dashboard-head h2{margin:0 0 5px;font-size:24px}.personal-dashboard-head p{margin:0;color:var(--muted);font-size:12px}.personal-dashboard-grid{display:grid;gap:18px}.personal-widget{overflow:hidden;border:1px solid var(--personal-border);border-radius:14px;background:var(--personal-card);box-shadow:0 5px 18px #1838480a}.personal-widget-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 19px;border-bottom:1px solid var(--personal-border)}.personal-widget-head h3{margin:0 0 4px;font-size:16px}.personal-widget-head p{margin:0;color:var(--muted);font-size:10px}.personal-widget-head>button{border:0;background:transparent;color:#247fa6;font:600 11px inherit;cursor:pointer}.personal-device-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:12px;padding:15px}.personal-device-card{min-width:0;padding:15px;border:1px solid var(--personal-border);border-radius:11px;background:var(--personal-soft)}.personal-card-title{display:flex;align-items:center;gap:10px}.personal-card-title>div{min-width:0;flex:1}.personal-card-title strong,.personal-card-title small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.personal-card-title strong{font-size:13px}.personal-card-title small{margin-top:3px;color:var(--muted);font-size:9px}.personal-device-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:#dceef6;color:#19799f;font-size:10px;font-weight:800}.personal-device-card dl{display:grid;gap:7px;margin:14px 0}.personal-device-card dl div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:8px}.personal-device-card dt{color:var(--muted);font-size:9px}.personal-device-card dd{overflow:hidden;margin:0;color:var(--text);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.personal-card-actions{display:flex;gap:7px}.personal-card-actions button{height:32px;flex:1;padding:0 9px}.personal-cctv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;padding:15px}.personal-cctv-card{overflow:hidden;padding:0;border:1px solid var(--personal-border);border-radius:11px;background:var(--personal-soft);color:inherit;text-align:left;cursor:pointer;transition:transform .16s,box-shadow .16s}.personal-cctv-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px #1738471c}.personal-cctv-preview{position:relative;display:block;height:135px;background:#122732}.personal-cctv-preview img{width:100%;height:100%;object-fit:cover}.personal-cctv-placeholder{display:grid;place-items:center;height:100%;color:#9cb4bf;font-size:22px;font-weight:800}.personal-cctv-preview i{position:absolute;right:10px;top:10px;width:9px;height:9px;border:2px solid #fff;border-radius:50%;background:#20a276;box-shadow:0 1px 5px #0006}.personal-cctv-preview i.offline{background:#d9534f}.personal-cctv-copy{display:block;padding:12px 13px 5px}.personal-cctv-copy strong,.personal-cctv-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.personal-cctv-copy strong{font-size:12px}.personal-cctv-copy small{margin-top:4px;color:var(--muted);font-size:9px}.personal-cctv-card>b{display:block;padding:0 13px 12px;color:#168466;font-size:9px}.personal-widget-placeholder,.personal-dashboard-empty{padding:36px;text-align:center;color:var(--muted)}.personal-dashboard-empty{border:1px dashed #b9ccd5;border-radius:14px;background:var(--personal-card)}.personal-dashboard-empty strong{display:block;color:var(--text);font-size:17px}.personal-dashboard-empty p{margin:7px 0 16px}.personal-dashboard-settings{margin-bottom:18px;padding:19px;border:1px solid var(--personal-border);border-radius:14px;background:var(--personal-card);box-shadow:0 10px 35px #18384812}.personal-settings-head{display:flex;align-items:flex-start;justify-content:space-between}.personal-settings-head h3{margin:0 0 4px;font-size:17px}.personal-settings-head p{margin:0;color:var(--muted)}.personal-settings-head>button{border:0;background:transparent;color:var(--muted);font-size:24px;cursor:pointer}.personal-widget-toggles{display:flex;gap:18px;margin:18px 0 13px}.personal-widget-toggles label{display:flex;align-items:center;gap:8px;font-weight:600}.personal-widget-toggles input,.personal-choice-list input{width:auto;height:auto}.personal-choice-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px}.personal-choice-columns>section{min-width:0;border:1px solid var(--personal-border);border-radius:11px;background:var(--personal-soft)}.personal-choice-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px;border-bottom:1px solid var(--personal-border)}.personal-choice-head input{width:180px}.personal-choice-list{display:grid;gap:5px;max-height:290px;overflow:auto;padding:8px}.personal-choice-list>label{display:flex;align-items:center;gap:9px;padding:9px;border-radius:8px;cursor:pointer}.personal-choice-list>label:hover{background:#e8f2f6}.personal-choice-list label span{min-width:0}.personal-choice-list strong,.personal-choice-list small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.personal-choice-list small{margin-top:3px;color:var(--muted);font-size:9px}.personal-choice-list>p{padding:18px;text-align:center;color:var(--muted)}.personal-settings-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}html[data-theme="dark"] .personal-dashboard-page{--personal-card:#13232c;--personal-soft:#182b35;--personal-border:#304650}html[data-theme="dark"] .personal-device-icon{background:#1b4050;color:#76c9ec}html[data-theme="dark"] .personal-choice-list>label:hover{background:#213945}@media(max-width:850px){.personal-choice-columns{grid-template-columns:1fr}.personal-dashboard-head{align-items:flex-start;flex-direction:column}.personal-widget-toggles{align-items:flex-start;flex-direction:column}.personal-choice-head input{width:min(180px,52%)}}@media(max-width:520px){.personal-device-grid,.personal-cctv-grid{grid-template-columns:1fr}.personal-card-actions{flex-direction:column}.personal-choice-head{align-items:flex-start;flex-direction:column}.personal-choice-head input{width:100%}}
.settings-grid{display:grid;grid-template-columns:minmax(0,720px);gap:20px}.profile-settings-card{max-width:720px}.profile-photo-row{display:flex;align-items:center;gap:18px;margin-bottom:24px;padding-bottom:22px;border-bottom:1px solid var(--line)}.profile-photo-preview{display:grid;place-items:center;width:86px;height:86px;flex:0 0 86px;overflow:hidden;border:3px solid #fff;border-radius:50%;background:#dceef6;color:#176f93;box-shadow:0 0 0 1px #cad9e0,0 7px 18px #17374718}.profile-photo-preview img{width:100%;height:100%;object-fit:cover}.profile-photo-preview b{font-size:24px}.profile-photo-row>div{display:grid;gap:5px}.profile-photo-row small{color:var(--muted)}.profile-photo-actions{display:flex;gap:8px;margin-top:8px}.profile-photo-actions label{display:inline-flex;align-items:center;cursor:pointer}.profile-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.profile-password{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}.profile-password h3{margin:0 0 5px;font-size:15px}.profile-password>p{margin:0 0 16px;color:var(--muted)}.profile-password>.field{max-width:calc(50% - 8px)}#profileSettingsStatus{color:#168466}.account-avatar{overflow:hidden}.account-avatar img{width:100%;height:100%;object-fit:cover}.account-avatar b{font-size:18px}.personal-dashboard-actions{justify-content:flex-end}html[data-theme="dark"] .settings-card{background:#13232c}html[data-theme="dark"] .profile-photo-preview{border-color:#13232c;background:#1b4050;color:#76c9ec;box-shadow:0 0 0 1px #38515d}@media(max-width:650px){.profile-fields{grid-template-columns:1fr}.profile-password>.field{max-width:none}.profile-photo-row{align-items:flex-start}.profile-photo-actions{flex-wrap:wrap}}
.settings-shell{display:grid;grid-template-columns:240px minmax(0,1fr);align-items:start;gap:22px;width:100%}.settings-section-nav{position:sticky;top:92px;display:grid;gap:8px;padding:9px;border:1px solid var(--line);border-radius:12px;background:var(--surface,#fff)}.settings-section-nav button{display:flex;align-items:center;gap:11px;width:100%;min-height:64px;padding:10px 11px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--text);text-align:left;cursor:pointer;transition:border-color .15s,background .15s,color .15s}.settings-section-nav button:hover{background:#eef6f9}.settings-section-nav button.active{border-color:#75b4cc;background:#e8f5fa;color:#176f93;box-shadow:0 3px 12px #18384810}.settings-section-nav svg{width:21px;height:21px;flex:0 0 21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.settings-section-nav span,.settings-section-nav strong,.settings-section-nav small{display:block;min-width:0}.settings-section-nav strong{font-size:12px}.settings-section-nav small{margin-top:3px;color:var(--muted);font-size:9px}.settings-grid{display:block;width:100%;min-width:0}.settings-grid>[data-settings-panel]{display:none;width:100%;max-width:none}.settings-grid>[data-settings-panel].active{display:block}.settings-grid .settings-card{max-width:none}.settings-grid .settings-body{padding:26px 28px}.settings-grid .settings-head{padding:21px 28px}html[data-theme="dark"] .settings-section-nav{background:#13232c}html[data-theme="dark"] .settings-section-nav button:hover{background:#182d38}html[data-theme="dark"] .settings-section-nav button.active{border-color:#3e7186;background:#183946;color:#7fd0f0}@media(max-width:800px){.settings-shell{grid-template-columns:1fr}.settings-section-nav{position:static;grid-template-columns:repeat(3,minmax(0,1fr))}.settings-section-nav button{min-height:58px}.settings-section-nav small{display:none}}@media(max-width:540px){.settings-section-nav{display:flex;overflow-x:auto}.settings-section-nav button{min-width:155px}.settings-grid .settings-body,.settings-grid .settings-head{padding-left:18px;padding-right:18px}}
.device-monitoring-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.device-monitoring-toolbar label{flex:1}.device-monitoring-toolbar input{width:100%}.device-monitoring-toolbar>span{color:var(--muted);font-size:10px;white-space:nowrap}.device-monitoring-settings-list{display:grid;border:1px solid var(--line);border-radius:9px;overflow:hidden}.device-monitoring-setting{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:12px 13px;border-bottom:1px solid var(--line)}.device-monitoring-setting:last-child{border-bottom:0}.device-monitoring-setting>div{min-width:0}.device-monitoring-setting strong,.device-monitoring-setting small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.device-monitoring-setting small{margin-top:3px;color:var(--muted);font-size:9px}.device-monitoring-state{padding:5px 8px;border-radius:12px;background:#edf2f4;color:#667780;font-size:9px;font-weight:700;white-space:nowrap}.device-monitoring-state.enabled{background:#e4f4ef;color:#167354}.device-monitoring-setting button{height:32px;padding:0 11px}.device-monitoring-empty{padding:24px;text-align:center;color:var(--muted)}html[data-theme="dark"] .device-monitoring-state{background:#263943;color:#aebfc7}html[data-theme="dark"] .device-monitoring-state.enabled{background:#173b30;color:#7ce3b8}@media(max-width:600px){.device-monitoring-toolbar{align-items:stretch;flex-direction:column}.device-monitoring-toolbar>span{align-self:flex-end}.device-monitoring-setting{grid-template-columns:minmax(0,1fr) auto}.device-monitoring-setting button{grid-column:1/-1}}

/* Individual Hub workspace: draggable and resizable on a 12-column snap grid. */
.hub-edit-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px;padding:13px 15px;border:1px solid #9bcddd;border-radius:10px;background:#edf8fc}.hub-edit-bar>div:first-child{display:grid;gap:3px}.hub-edit-bar strong{font-size:14px}.hub-edit-bar span{color:#627984;font-size:11px}.hub-edit-bar>div:last-child{display:flex;gap:8px}
.personal-dashboard-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:44px;gap:12px;min-height:280px;align-items:stretch}
.personal-dashboard-grid.hub-editing{padding:12px;border:1px dashed #7fb8ce;border-radius:12px;background-color:#f4fafc;background-image:linear-gradient(to right,#75bad21f 1px,transparent 1px),linear-gradient(to bottom,#75bad21f 1px,transparent 1px);background-size:8.333% 56px}
.hub-workspace-tile{position:relative;min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--personal-border);border-radius:12px;background:var(--personal-card);box-shadow:0 5px 18px #18384814}
.hub-add-panel{display:grid;min-width:0;min-height:0;place-content:center;justify-items:center;gap:11px;padding:22px;border:1px solid var(--personal-border);border-radius:12px;background:var(--personal-card);color:#247fa6;text-align:center;cursor:pointer;box-shadow:0 5px 18px #18384814;transition:border-color .16s,background .16s,box-shadow .16s,transform .16s}.hub-add-panel:hover{border-color:#78b7cf;background:#f3fafc;box-shadow:0 9px 25px #1838481f;transform:translateY(-2px)}.hub-add-panel>span:first-child{display:grid;width:46px;height:46px;place-items:center;border-radius:12px;background:#dceef6;color:#19799f;font-size:28px;line-height:1}.hub-add-panel>span:last-child{display:grid;gap:5px}.hub-add-panel strong{font-size:14px}.hub-add-panel small{color:#667d88;font-size:10px}
.app-update-banner{position:fixed;z-index:20000;right:18px;bottom:18px;display:flex;align-items:center;gap:18px;width:min(430px,calc(100vw - 36px));padding:14px 15px;border:1px solid #83b9ce;border-radius:13px;background:#f5fbfd;color:#173b4b;box-shadow:0 16px 45px #102d3b35}.app-update-banner>div{display:grid;min-width:0;gap:3px;flex:1}.app-update-banner strong{font-size:13px}.app-update-banner small{color:#607985;font-size:10px;line-height:1.35}.app-update-banner button{height:36px;flex:0 0 auto;padding:0 13px;font-size:11px}
.hub-tile-handle{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--personal-border);background:var(--personal-card);user-select:none}.hub-tile-handle>div{min-width:0;display:flex;align-items:center;gap:9px}.hub-tile-handle>div>span:last-child,.hub-tile-handle>div:not(:has(.personal-device-icon)){display:grid;min-width:0}.hub-tile-handle strong,.hub-tile-handle small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-tile-handle strong{font-size:13px}.hub-tile-handle small{margin-top:2px;color:var(--muted);font-size:9px}
.hub-editing .hub-tile-handle{cursor:grab;touch-action:none;background:#eaf6fa}.hub-workspace-tile.is-moving{z-index:20;opacity:.9;box-shadow:0 16px 40px #102d3b38}.hub-workspace-tile.is-moving .hub-tile-handle{cursor:grabbing}
.hub-resize-handle{display:none;position:absolute;right:3px;bottom:3px;width:18px;height:18px;cursor:nwse-resize;touch-action:none;background:linear-gradient(135deg,transparent 45%,#2783a6 46% 55%,transparent 56% 65%,#2783a6 66% 75%,transparent 76%)}.hub-editing .hub-resize-handle{display:block}
.hub-tile-remove{position:absolute;z-index:14;right:8px;top:48px;display:none;width:32px;height:32px;place-items:center;padding:0;border:1px solid #ff8d8d80;border-radius:8px;background:#401d22e8;color:#ffb2b2;cursor:pointer;box-shadow:0 3px 12px #0006}.hub-editing .hub-tile-remove{display:grid}.hub-tile-remove:hover,.hub-tile-remove:focus-visible{border-color:#ffaaa5;background:#8d2f38;color:#fff;outline:none}.hub-tile-remove:disabled{opacity:.55;cursor:wait}.hub-tile-remove svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.hub-editing .hub-overlay-actions{display:none}
.hub-device-capture,.hub-cctv-preview{position:relative;min-height:0;flex:1;overflow:hidden;border:0;background:#10222c;color:#dceaf0;cursor:pointer}.hub-device-capture img,.hub-cctv-preview img{display:block;width:100%;height:100%;object-fit:contain;background:#071117}.hub-device-capture>span{position:absolute;left:0;right:0;bottom:0;padding:7px 10px;background:#06131dcc;color:#fff;font-size:9px;text-align:left}.hub-device-capture.empty{display:grid;place-content:center;gap:5px;text-align:center}.hub-device-capture.empty>span{position:static;padding:0;background:none;font-size:12px;font-weight:700;text-align:center}.hub-device-capture.empty small{color:#8fa6b1}.hub-device-summary{display:flex;justify-content:space-between;gap:8px;padding:8px 11px;color:var(--muted);font-size:9px}.hub-device-summary span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-tile-actions{display:flex;gap:7px;padding:0 10px 10px}.hub-tile-actions button{height:31px;flex:1;padding:0 8px;font-size:10px}.hub-editing .hub-device-capture,.hub-editing .hub-cctv-preview,.hub-editing .hub-tile-actions{pointer-events:none}.hub-camera-status{padding:4px 7px;border-radius:10px;background:#e4f4ef;color:#167354;font-size:9px;font-weight:700}.hub-camera-status.offline{background:#fbe9e8;color:#b3423f}.hub-cctv-preview>span{display:grid;place-items:center;height:100%;font-weight:800}.hub-cctv-panel .hub-tile-actions{padding-top:10px}
.hub-device-config-list>div{border-bottom:1px solid var(--personal-border)}.hub-device-config-list>div:last-child{border-bottom:0}.hub-item-choice{display:flex;align-items:center;gap:9px;padding:10px 10px 6px;cursor:pointer}.hub-item-choice input,.hub-idle-controls input{width:auto;height:auto}.hub-item-choice span{min-width:0}.hub-item-choice strong,.hub-item-choice small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-item-choice small{margin-top:3px;color:var(--muted);font-size:9px}.hub-idle-controls{display:flex;align-items:center;flex-wrap:wrap;gap:7px 14px;padding:6px 10px 11px;color:#4d626d;font-size:10px}.hub-idle-controls label{display:flex;align-items:center;gap:5px}.hub-idle-controls input[type="number"]{width:62px;height:29px;padding:0 7px}.hub-config-permission{display:block;padding:0 10px 10px;color:var(--muted)}.personal-choice-head>div{display:grid;gap:3px}.personal-choice-head>div small{color:var(--muted);font-size:9px}
.device-idle-history-modal{width:min(1120px,96vw);max-height:90vh}.device-idle-history-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:13px;max-height:72vh;overflow:auto;padding:16px}.device-idle-history-list>a{overflow:hidden;border:1px solid var(--line);border-radius:9px;background:#fff;color:inherit;text-decoration:none}.device-idle-history-list img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#071117}.device-idle-history-list a>span{display:block;padding:10px}.device-idle-history-list strong,.device-idle-history-list small{display:block}.device-idle-history-list small{margin-top:3px;color:var(--muted)}.device-idle-loading{grid-column:1/-1;padding:35px;text-align:center;color:var(--muted)}
html[data-theme="dark"] .hub-edit-bar{border-color:#355665;background:#142a35}html[data-theme="dark"] .hub-edit-bar span{color:#91a7b2}html[data-theme="dark"] .personal-dashboard-grid.hub-editing{border-color:#3e7186;background-color:#0d1d25;background-image:linear-gradient(to right,#52bde01c 1px,transparent 1px),linear-gradient(to bottom,#52bde01c 1px,transparent 1px)}html[data-theme="dark"] .hub-editing .hub-tile-handle{background:#193441}html[data-theme="dark"] .hub-idle-controls{color:#b8c8cf}html[data-theme="dark"] .device-idle-history-list>a{border-color:#304650;background:#13232c}html[data-theme="dark"] .hub-add-panel{border-color:#3e6576;background:#112630;color:#7fd0f0}html[data-theme="dark"] .hub-add-panel:hover{border-color:#5db5d8;background:#173441}html[data-theme="dark"] .hub-add-panel small{color:#91a7b2}
html[data-theme="dark"] .app-update-banner{border-color:#3f687a;background:#132a35;color:#e5f1f5}html[data-theme="dark"] .app-update-banner small{color:#99adb6}
@media(max-width:900px){.personal-dashboard-grid{display:grid;grid-template-columns:1fr;grid-auto-rows:auto}.hub-workspace-tile,.hub-add-panel{grid-column:1!important;grid-row:auto!important;min-height:330px}.personal-dashboard-grid.hub-editing{background-image:none}.hub-resize-handle{display:none!important}.hub-edit-bar{align-items:flex-start;flex-direction:column}.personal-choice-columns{grid-template-columns:1fr}}

/* Keep Hub layout editing visible; panel selection and monitoring use a separate dialog. */
.personal-dashboard-settings{position:fixed;z-index:1200;left:50%;top:88px;width:min(1080px,calc(100vw - 48px));max-height:calc(100vh - 120px);overflow:auto;margin:0;padding:18px;transform:translateX(-50%);box-shadow:0 0 0 100vmax #07151d80,0 22px 65px #07151d55}
.personal-dashboard-settings .personal-choice-list{max-height:230px}
#openHubSettings{border-color:#91b8c8;color:#245f78;background:transparent}
html[data-theme="dark"] #openHubSettings{border-color:#466675;color:#d5e5ec;background:#13232c}
@media(max-width:700px){#customizePersonalDashboard,#openHubSettings{width:auto;min-width:0;padding:0 12px}#customizePersonalDashboard span,#openHubSettings span{display:inline}}
@media(max-width:600px){.personal-dashboard-settings{top:72px;width:calc(100vw - 20px);max-height:calc(100vh - 84px);padding:14px}.personal-dashboard-settings .personal-choice-list{max-height:190px}}
.personal-cctv-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:18px}.personal-widget-head{padding:19px 21px}.personal-widget-head h3{font-size:18px}.personal-widget-head p{font-size:12px}.personal-widget-head>button{font-size:12px}.personal-card-title strong,.personal-cctv-copy strong{font-size:14px}.personal-card-title small,.personal-cctv-copy small{font-size:11px}.personal-cctv-copy{padding:13px 14px 6px}.personal-cctv-card>b{padding:0 14px 13px;font-size:10px}.personal-device-card dt{font-size:10px}.personal-device-card dd{font-size:11px}@media(max-width:1000px){.personal-cctv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.personal-cctv-grid{grid-template-columns:1fr}}
.hub-customize-header{height:40px;padding:0 17px;border-radius:20px;font:600 12px "Segoe UI",Arial,sans-serif;white-space:nowrap}.hub-customize-header i{display:none;font-style:normal;font-size:18px}.personal-device-grid{gap:14px;padding:18px}.personal-device-card{display:flex;min-height:205px;padding:18px;flex-direction:column}.personal-device-icon{width:44px;height:44px;flex-basis:44px;font-size:11px}.personal-card-title{gap:12px}.personal-card-title strong{font-size:16px}.personal-card-title small{margin-top:4px;font-size:12px}.personal-device-card dl{gap:9px;margin:17px 0}.personal-device-card dl div{grid-template-columns:96px minmax(0,1fr);gap:10px}.personal-device-card dt{font-size:11px}.personal-device-card dd{font-size:13px}.personal-card-actions{margin-top:auto}.personal-card-actions button{height:38px;font-size:12px}@media(max-width:700px){.hub-customize-header{width:40px;min-width:40px;padding:0}.hub-customize-header i{display:block}.hub-customize-header span{display:none}}@media(max-width:520px){.personal-device-card{min-height:0}}
.personal-device-grid,.personal-cctv-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.personal-device-card{min-width:0;padding:14px}.personal-device-card dl div{grid-template-columns:82px minmax(0,1fr);gap:7px}.personal-card-title{gap:9px}.personal-card-title strong{font-size:14px}.personal-card-title small{font-size:11px}.personal-device-icon{width:38px;height:38px;flex-basis:38px}.personal-card-actions{flex-direction:column}.personal-cctv-preview{height:115px}.personal-vacant-tile{display:grid;min-height:205px;place-content:center;padding:16px;border:1px dashed #bfd0d8;border-radius:11px;background:color-mix(in srgb,var(--personal-soft) 55%,transparent);color:#8a9aa3;text-align:center}.personal-vacant-tile span{font-size:13px;font-weight:700}.personal-vacant-tile small{max-width:130px;margin-top:6px;font-size:10px;line-height:1.4}.personal-vacant-camera{min-height:190px}html[data-theme="dark"] .personal-vacant-tile{border-color:#405761;color:#8197a1}@media(max-width:1250px){.personal-device-grid,.personal-cctv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:750px){.personal-device-grid,.personal-cctv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.personal-device-grid,.personal-cctv-grid{grid-template-columns:1fr}.personal-vacant-tile{min-height:120px}}

/* Clear Hub selection workflow with the real Hub kept visible as a live preview. */
.personal-dashboard-settings{position:relative;z-index:auto;left:auto;top:auto;width:auto;max-height:none;overflow:visible;margin:0 0 20px;padding:20px;transform:none;box-shadow:0 8px 28px #18384812}
.hub-settings-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0;padding:12px;border-radius:10px;background:#eef7fb;color:#46616e}.hub-settings-guide span{display:flex;align-items:center;gap:8px}.hub-settings-guide b{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;border-radius:50%;background:#287fa5;color:#fff;font-size:11px}.hub-selected-count{display:inline-block;margin-left:6px;padding:3px 7px;border-radius:10px;background:#e5f3f9;color:#22789d;font-size:10px}.hub-choice-state{margin-left:auto;padding:5px 8px;border:1px solid #b9ced8;border-radius:12px;color:#617884;font-size:9px;white-space:nowrap}.hub-item-choice,.hub-camera-choice-list>label{border:1px solid transparent}.hub-device-config.is-selected>.hub-item-choice,.hub-camera-choice-list>label.is-selected{border-color:#7dbbd3;background:#eaf6fb}.is-selected .hub-choice-state{border-color:#287fa5;background:#287fa5;color:#fff}.hub-monitor-settings{margin:0 10px 10px;padding:9px 10px;border-left:3px solid #b9d9e6;border-radius:5px;background:#f5f9fb}.hub-monitor-settings>strong{display:block;margin-bottom:5px;color:#526975;font-size:10px}.hub-idle-controls{padding:2px 0}
.device-monitor-btn,.veyon-deploy-btn,.veyon-view-btn{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 9px;border:1px solid #b9ced8;border-radius:5px;background:#fff;color:#24799e;font:600 10px inherit;cursor:pointer}.device-monitor-btn svg,.veyon-deploy-btn svg,.veyon-view-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}.veyon-deploy-btn{border-color:#76b7a1;color:#167354}.device-monitor-modal,.veyon-deploy-modal{width:min(610px,96vw)}.device-monitor-modal form,.veyon-deploy-modal form{padding:20px}.device-monitor-switch{display:flex;align-items:flex-start;gap:12px;padding:15px;border:1px solid #d8e4e9;border-radius:10px;background:#f7fafb;cursor:pointer}.device-monitor-switch input{width:18px;height:18px;flex:0 0 18px;margin-top:2px}.device-monitor-switch span,.device-monitor-switch strong,.device-monitor-switch small{display:block}.device-monitor-switch small{margin-top:4px;color:#71808a;line-height:1.45}.device-monitor-options{display:grid;gap:14px;margin-top:14px;transition:opacity .15s}.device-monitor-options.is-disabled{opacity:.45}.device-monitor-options .field{margin:0}.device-monitor-duration{display:flex;align-items:center;gap:9px}.device-monitor-duration input{width:110px}.device-monitor-duration span{color:#667984}.device-monitor-switch.compact{padding:12px}.device-monitor-note{margin:14px 0 4px;padding:10px 12px;border-radius:7px;background:#edf7fb;color:#4b6875}.veyon-deploy-preflight{margin-bottom:14px;padding:10px 12px;border:1px solid #cbdce4;border-radius:7px;background:#f3f8fa;color:#5c727d}.veyon-deploy-preflight.ready{border-color:#acd6c7;background:#edf8f4;color:#167354}.veyon-deploy-preflight.failed{border-color:#e7b9b7;background:#fdf1f0;color:#a83f3b}.veyon-deploy-progress{display:flex;align-items:flex-start;gap:12px;margin:4px 0 12px;padding:15px;border:1px solid #bcd9e5;border-radius:9px;background:#f0f8fb}.veyon-deploy-progress>i{width:22px;height:22px;flex:0 0 22px;border:3px solid #bdd8e4;border-top-color:#287fa5;border-radius:50%;animation:veyon-deploy-spin .8s linear infinite}.veyon-deploy-progress span,.veyon-deploy-progress strong,.veyon-deploy-progress small{display:block}.veyon-deploy-progress small{margin-top:4px;color:#657b86;line-height:1.45}.veyon-deploy-progress.success{border-color:#acd6c7;background:#edf8f4}.veyon-deploy-progress.success>i{border:0;background:#25a074;animation:none}.veyon-deploy-progress.success>i::after{content:'✓';display:grid;height:22px;place-items:center;color:#fff;font-style:normal}.veyon-deploy-progress.failed{border-color:#e7b9b7;background:#fdf1f0}.veyon-deploy-progress.failed>i{border:0;background:#cf504b;animation:none}.veyon-deploy-progress.failed>i::after{content:'!';display:grid;height:22px;place-items:center;color:#fff;font-style:normal;font-weight:800}@keyframes veyon-deploy-spin{to{transform:rotate(360deg)}}
html[data-theme="dark"] .hub-settings-guide,html[data-theme="dark"] .hub-monitor-settings,html[data-theme="dark"] .device-monitor-note{background:#172f3a;color:#b9ccd5}html[data-theme="dark"] .hub-device-config.is-selected>.hub-item-choice,html[data-theme="dark"] .hub-camera-choice-list>label.is-selected{background:#183946}html[data-theme="dark"] .device-monitor-switch{border-color:#344c58;background:#172a34}html[data-theme="dark"] .device-monitor-btn,html[data-theme="dark"] .veyon-deploy-btn{border-color:#3e5b68;background:#172630;color:#75c8eb}html[data-theme="dark"] .veyon-deploy-preflight,html[data-theme="dark"] .veyon-deploy-progress{border-color:#35505c;background:#172b35;color:#c2d5dd}html[data-theme="dark"] .veyon-deploy-preflight.ready,html[data-theme="dark"] .veyon-deploy-progress.success{border-color:#2d6654;background:#17332a;color:#80dab8}html[data-theme="dark"] .veyon-deploy-preflight.failed,html[data-theme="dark"] .veyon-deploy-progress.failed{border-color:#6e3c3b;background:#382323;color:#f0aaa6}
@media(max-width:760px){.hub-settings-guide{grid-template-columns:1fr}.hub-choice-state{display:none}.device-monitor-btn span,.veyon-deploy-btn span{display:none}}

.computer-manage-modal{width:min(680px,96vw);max-height:min(900px,94vh);overflow:auto}.computer-manage-fields{margin:0 0 14px;padding:12px;border:1px solid #d8e4e9;border-radius:9px;background:#f8fbfc}.computer-manage-fields .field:last-child{margin-bottom:0}.computer-manage-warning{background:#fff4df;color:#82550a}.computer-manage-history{margin:12px 20px 0;border-top:1px solid #dce6ea;padding-top:10px}.computer-manage-history summary{cursor:pointer;color:#327d9d;font-weight:700}.computer-manage-history>div{display:grid;gap:8px;margin-top:10px}.computer-manage-history-row{display:flex;gap:9px;padding:9px 10px;border:1px solid #dde7eb;border-radius:7px;background:#f8fafb}.computer-manage-history-row>span{width:8px;height:8px;flex:0 0 8px;margin-top:5px;border-radius:50%;background:#8296a0}.computer-manage-history-row.success>span{background:#25a074}.computer-manage-history-row.failed>span{background:#cf504b}.computer-manage-history-row div,.computer-manage-history-row strong,.computer-manage-history-row small{display:block}.computer-manage-history-row small{margin-top:2px;color:#788993}.computer-manage-history-row p{margin:5px 0 0;color:#536a75;font-size:11px;line-height:1.4}html[data-theme="dark"] .computer-manage-fields,html[data-theme="dark"] .computer-manage-history-row{border-color:#344c58;background:#172a34}html[data-theme="dark"] .computer-manage-history{border-color:#344c58}html[data-theme="dark"] .computer-manage-warning{background:#3a301d;color:#f0c875}

.hub-workspace-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 16px;padding:10px 12px;border:1px solid var(--personal-border,#d9e4e9);border-radius:12px;background:var(--personal-card,#fff)}.hub-workspace-tabs{display:flex;align-items:center;gap:7px;min-width:0;overflow-x:auto;padding:2px}.hub-workspace-tabs button{display:flex;align-items:center;gap:7px;flex:0 0 auto;padding:9px 12px;border:1px solid #cfdee5;border-radius:9px;background:#f6fafb;color:#536d79;cursor:pointer}.hub-workspace-tabs button span{font-weight:750}.hub-workspace-tabs button small{padding:2px 6px;border-radius:10px;background:#e5eef2;color:#6f838d;font-size:9px}.hub-workspace-tabs button.active{border-color:#287fa5;background:#287fa5;color:#fff;box-shadow:0 4px 12px #287fa52b}.hub-workspace-tabs button.active small{background:#ffffff2e;color:#fff}.hub-workspace-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}.hub-workspace-actions button{white-space:nowrap}.hub-workspace-actions .danger{color:#a63f3b}.hub-favorite-mark{color:#e2a927;font-style:normal}html[data-theme="dark"] .hub-workspace-bar{border-color:#304956;background:#122630}html[data-theme="dark"] .hub-workspace-tabs button{border-color:#38535f;background:#172d37;color:#bed0d8}html[data-theme="dark"] .hub-workspace-tabs button.active{border-color:#3d94b8;background:#266f8e;color:#fff}@media(max-width:820px){.hub-workspace-bar{align-items:stretch;flex-direction:column}.hub-workspace-actions{justify-content:flex-end}.hub-workspace-actions button{flex:1}.hub-workspace-tabs{padding-bottom:5px}}

/* Full-screen workspace presentation with automatic rotation. */
.hub-tv-button{border-color:#76a9bc;color:#1d6f91}.hub-tv-setup{position:fixed;z-index:21000;inset:0;display:grid;place-items:center;padding:20px;background:#07151dcc;backdrop-filter:blur(5px)}.hub-tv-setup-card{width:min(560px,96vw);max-height:90vh;overflow:auto;border:1px solid #c7dbe4;border-radius:15px;background:#fff;box-shadow:0 24px 80px #0007}.hub-tv-setup-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 22px;border-bottom:1px solid #dce7ec}.hub-tv-setup-head h2{margin:0 0 5px;font-size:19px}.hub-tv-setup-head p{margin:0;color:#71828b;font-size:11px}.hub-tv-setup-head>button{padding:0;border:0;background:transparent;color:#71828b;font-size:27px;line-height:1;cursor:pointer}.hub-tv-workspace-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:18px 22px}.hub-tv-workspace-choices label{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #d7e3e8;border-radius:10px;background:#f7fafb;cursor:pointer}.hub-tv-workspace-choices input{width:18px;height:18px;flex:0 0 auto}.hub-tv-workspace-choices span,.hub-tv-workspace-choices strong,.hub-tv-workspace-choices small{display:block;min-width:0}.hub-tv-workspace-choices strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-tv-workspace-choices small{margin-top:3px;color:#7b8d96}.hub-tv-interval{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0 22px;padding:14px 0;border-top:1px solid #e3ebef;font-weight:650}.hub-tv-interval select{width:170px}.hub-tv-setup-actions{display:flex;justify-content:flex-end;gap:8px;padding:15px 22px;border-top:1px solid #dce7ec;background:#f7fafb}.hub-tv-status{position:fixed;z-index:20500;top:10px;left:12px;right:12px;display:flex;align-items:center;gap:13px;min-height:46px;padding:7px 10px 8px 14px;overflow:hidden;border:1px solid #355361;border-radius:11px;background:#0b1d26e8;color:#eaf6fa;box-shadow:0 6px 24px #0005;backdrop-filter:blur(9px)}.hub-tv-status>div{display:flex;align-items:baseline;gap:11px;min-width:0;flex:1}.hub-tv-status span{color:#62c8ec;font-size:8px;font-weight:800;letter-spacing:.14em}.hub-tv-status strong{overflow:hidden;font-size:15px;text-overflow:ellipsis;white-space:nowrap}.hub-tv-status small{color:#9ab0ba;white-space:nowrap}.hub-tv-status button{height:30px;padding:0 11px;border:1px solid #547483;border-radius:7px;background:#173541;color:#dcecf2;font:600 9px inherit;cursor:pointer}.hub-tv-status>i{position:absolute;left:0;bottom:0;width:100%;height:2px;transform-origin:left;background:#40bce9}@keyframes hub-tv-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html[data-theme="dark"] .hub-tv-setup-card{border-color:#38515d;background:#122630;color:#e8f1f4}html[data-theme="dark"] .hub-tv-setup-head,html[data-theme="dark"] .hub-tv-setup-actions{border-color:#2f4651}html[data-theme="dark"] .hub-tv-setup-actions{background:#0f2028}html[data-theme="dark"] .hub-tv-workspace-choices label{border-color:#38515d;background:#172d37}html[data-theme="dark"] .hub-tv-interval{border-color:#2f4651}
body.hub-tv-mode{overflow:hidden;background:#07141b}body.hub-tv-mode .sidebar,body.hub-tv-mode main>header,body.hub-tv-mode .hub-workspace-bar,body.hub-tv-mode .personal-dashboard-settings,body.hub-tv-mode .hub-edit-bar,body.hub-tv-mode .hub-add-panel,body.hub-tv-mode #personalDashboardEmpty,body.hub-tv-mode #notice{display:none!important}body.hub-tv-mode main{height:100vh;min-height:0;margin:0}body.hub-tv-mode .content{height:100vh;padding:66px 12px 12px}body.hub-tv-mode #personal-dashboard{display:block;height:100%;overflow:auto}body.hub-tv-mode .personal-dashboard-grid{min-height:100%;grid-auto-rows:clamp(42px,calc((100vh - 114px)/15),92px);gap:8px;padding:8px!important;border-color:#29434f!important;border-radius:11px!important;background:#091920!important;box-shadow:none!important;pointer-events:none}body.hub-tv-mode .hub-workspace-tile{min-height:0}body.hub-tv-mode .hub-media-card:hover{transform:none}@media(max-width:650px){.hub-tv-workspace-choices{grid-template-columns:1fr}.hub-tv-status small{display:none}.hub-tv-status>div{gap:7px}}
body.hub-tv-mode main,body.hub-tv-mode .content{width:100vw;height:100dvh}body.hub-tv-mode .content{padding:0}body.hub-tv-mode #personal-dashboard{height:100%;overflow:hidden}body.hub-tv-mode .personal-dashboard-grid{width:100%;height:100%;min-height:0;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(var(--hub-display-rows,1),minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:clamp(4px,.625vw,12px);padding:clamp(4px,.625vw,12px)!important;border:0!important;border-radius:0!important;background:#07141b!important;pointer-events:auto}body.hub-tv-mode .hub-workspace-tile{min-height:0}body.hub-tv-mode .hub-tv-status{top:4px;right:4px;left:auto;width:min(620px,calc(100vw - 8px));min-height:40px;padding:4px 8px 5px 11px;border-radius:7px;opacity:0;transform:translateY(-8px);transition:opacity .18s,transform .18s}body.hub-tv-mode .hub-tv-status:hover,body.hub-tv-mode .hub-tv-status:focus-within{opacity:1;transform:none}body.hub-tv-mode .hub-tv-status strong{font-size:13px}body.hub-tv-mode .hub-tv-status button{height:28px}body.hub-tv-mode .hub-tv-status.paused>i{animation-play-state:paused!important;background:#f1bb4f}

/* Refined Hub workspace navigation and presentation chrome. */
.hub-workspace-bar{position:relative;min-height:66px;padding:9px 10px 9px 12px;border:1px solid #c9dce4;border-radius:15px;background:linear-gradient(135deg,#ffffff 0%,#f4f9fb 100%);box-shadow:0 8px 24px #1738470c,inset 0 1px #fff}.hub-workspace-bar:before{content:"";position:absolute;inset:auto 20% -1px 20%;height:1px;background:linear-gradient(90deg,transparent,#36a9d7,transparent);opacity:.45}.hub-workspace-tabs{gap:8px;padding:3px}.hub-workspace-tabs button{position:relative;height:44px;gap:9px;padding:0 13px 0 30px;overflow:hidden;border:1px solid transparent;border-radius:11px;background:transparent;color:#607681;font-size:11px;transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease}.hub-workspace-tabs button:before{content:"";position:absolute;left:13px;width:8px;height:8px;border:2px solid #fff;border-radius:50%;background:#91a7b1;box-shadow:0 0 0 1px #91a7b1}.hub-workspace-tabs button:hover{transform:translateY(-1px);border-color:#c4dbe5;background:#eaf5f9;color:#245a70}.hub-workspace-tabs button:hover:before{background:#48adcf;box-shadow:0 0 0 1px #48adcf,0 0 8px #48adcf66}.hub-workspace-tabs button span{font-size:12px;font-weight:750;letter-spacing:.01em}.hub-workspace-tabs button small{min-width:42px;padding:4px 7px;border:1px solid #d4e1e6;border-radius:12px;background:#fff;color:#70848d;font-size:8px;font-weight:750;text-align:center}.hub-workspace-tabs button.active{transform:none;border-color:#248bb3;background:linear-gradient(135deg,#2389b1,#176e92);color:#fff;box-shadow:0 7px 18px #1d7fa83d,inset 0 1px #ffffff38}.hub-workspace-tabs button.active:after{content:"";position:absolute;right:-12px;bottom:-18px;width:52px;height:52px;border-radius:50%;background:#69d5f426;pointer-events:none}.hub-workspace-tabs button.active:before{background:#4df0b0;box-shadow:0 0 0 1px #4df0b0,0 0 9px #4df0b099}.hub-workspace-tabs button.active small{border-color:#ffffff26;background:#ffffff20;color:#fff}.hub-workspace-actions{gap:6px;padding-left:10px;border-left:1px solid #d9e5ea}.hub-workspace-actions button{height:38px;border-radius:9px;transition:transform .15s,box-shadow .15s,border-color .15s}.hub-workspace-actions button:hover{transform:translateY(-1px)}.hub-workspace-actions .primary{box-shadow:0 5px 13px #287fa52a}.hub-workspace-actions .hub-tv-button{position:relative;padding-left:34px;border-color:#74b5cc;background:#eaf7fb;color:#176d90}.hub-workspace-actions .hub-tv-button:before{content:"";position:absolute;left:13px;top:11px;width:11px;height:11px;border:1.5px solid currentColor;border-radius:2px;box-shadow:3px 3px 0 -2px #eaf7fb,3px 3px 0 -1px currentColor}.hub-workspace-actions .hub-tv-button:hover{border-color:#288db5;background:#dff3fa;box-shadow:0 5px 15px #287fa528}.hub-tv-setup{background:radial-gradient(circle at 50% 30%,#17435b99,#061017e8 58%);backdrop-filter:blur(8px)}.hub-tv-setup-card{overflow:hidden;border-color:#5a8395;border-radius:18px;box-shadow:0 28px 90px #000a,0 0 0 1px #74c7e52b}.hub-tv-setup-head{padding:23px 24px;background:linear-gradient(135deg,#f8fcfd,#edf7fa)}.hub-tv-setup-head h2{color:#173b4a;font-size:21px}.hub-tv-workspace-choices label{transition:transform .15s,border-color .15s,background .15s,box-shadow .15s}.hub-tv-workspace-choices label:hover{transform:translateY(-1px);border-color:#75bad3;background:#eef9fc;box-shadow:0 6px 16px #17384712}.hub-tv-workspace-choices label:has(input:checked){border-color:#3b9fc5;background:#e8f6fb;box-shadow:inset 3px 0 #2693bc}.hub-tv-status{top:12px;left:14px;right:14px;min-height:48px;border-color:#39778f;border-radius:13px;background:linear-gradient(100deg,#0a202beF,#0d2b38e8);box-shadow:0 8px 28px #0007,0 0 0 1px #55c9f017}.hub-tv-status span{display:flex;align-items:center;gap:7px;color:#70d8fa}.hub-tv-status span:before{content:"";width:7px;height:7px;border-radius:50%;background:#4df0b0;box-shadow:0 0 0 4px #4df0b01c,0 0 10px #4df0b080;animation:hub-live-pulse 1.8s ease-out infinite}.hub-tv-status strong{letter-spacing:.01em}.hub-tv-status button{border-color:#4f8295;background:#173946}.hub-tv-status button:hover{border-color:#77c9e8;background:#205266}.hub-tv-status>i{height:3px;background:linear-gradient(90deg,#41d7f5,#4df0b0)}
html[data-theme="dark"] .hub-workspace-bar{border-color:#294a59;background:linear-gradient(135deg,#10252f,#0d1f28);box-shadow:0 8px 28px #0004,inset 0 1px #ffffff0a}html[data-theme="dark"] .hub-workspace-tabs button{border-color:transparent;background:transparent;color:#9eb5bf}html[data-theme="dark"] .hub-workspace-tabs button:hover{border-color:#315667;background:#163542;color:#dff4fc}html[data-theme="dark"] .hub-workspace-tabs button small{border-color:#36515d;background:#142a34;color:#9db2bb}html[data-theme="dark"] .hub-workspace-tabs button.active{border-color:#319bc4;background:linear-gradient(135deg,#237fa4,#185d7a);color:#fff}html[data-theme="dark"] .hub-workspace-tabs button.active small{border-color:#ffffff24;background:#ffffff18;color:#fff}html[data-theme="dark"] .hub-workspace-actions{border-color:#294652}html[data-theme="dark"] .hub-workspace-actions .hub-tv-button{border-color:#32677c;background:#123441;color:#89d3ed}html[data-theme="dark"] .hub-workspace-actions .hub-tv-button:before{box-shadow:3px 3px 0 -2px #123441,3px 3px 0 -1px currentColor}html[data-theme="dark"] .hub-workspace-actions .hub-tv-button:hover{border-color:#4aa5c7;background:#194858}html[data-theme="dark"] .hub-tv-setup-head{background:linear-gradient(135deg,#17323e,#10262f)}html[data-theme="dark"] .hub-tv-setup-head h2{color:#e7f5fa}html[data-theme="dark"] .hub-tv-workspace-choices label:has(input:checked){border-color:#3e93b3;background:#173b49;box-shadow:inset 3px 0 #47b9e3}
@media(max-width:1050px){.hub-workspace-bar{align-items:stretch;flex-direction:column}.hub-workspace-actions{justify-content:flex-end;padding:9px 0 0;border-top:1px solid #d9e5ea;border-left:0}html[data-theme="dark"] .hub-workspace-actions{border-top-color:#294652}}@media(max-width:620px){.hub-workspace-actions{display:grid;grid-template-columns:1fr 1fr}.hub-workspace-actions button{width:100%}.hub-workspace-tabs button{height:41px;padding-right:10px}.hub-workspace-tabs button small{min-width:0}}

/* Compact workspace tabs aligned with the main ATLAS interface. */
.hub-workspace-bar{min-height:52px;margin-bottom:13px;padding:7px 8px;border-color:#cbdbe2;border-radius:11px;background:#fff;box-shadow:0 3px 12px #1738470b}.hub-workspace-bar:before{display:none}.hub-workspace-tabs{gap:5px;padding:0}.hub-workspace-tabs button{height:36px;gap:7px;padding:0 10px;border:1px solid transparent;border-radius:7px;background:transparent;color:#526a76;box-shadow:none;transition:border-color .14s,background .14s,color .14s}.hub-workspace-tabs button:before,.hub-workspace-tabs button:after{display:none}.hub-workspace-tabs button:hover{transform:none;border-color:#c9dce4;background:#f0f6f8;color:#1f5268}.hub-workspace-tabs button span{position:relative;z-index:1;max-width:180px;overflow:hidden;color:inherit;font-size:12px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.hub-workspace-tabs button small{position:relative;z-index:1;min-width:0;padding:3px 6px;border:0;border-radius:8px;background:#e7eff2;color:#647b86;font-size:8px;font-weight:700}.hub-workspace-tabs button.active{border-color:#2d8eb5;background:#247fa5;color:#fff;box-shadow:inset 0 1px #ffffff26,0 2px 7px #287fa527}.hub-workspace-tabs button.active small{border:0;background:#ffffff25;color:#fff}.hub-workspace-actions{gap:5px;padding-left:8px}.hub-workspace-actions button{height:34px;border-radius:6px}.hub-workspace-actions .hub-tv-button{padding-left:31px}.hub-workspace-actions .hub-tv-button:before{left:11px;top:9px}
html[data-theme="dark"] .hub-workspace-bar{border-color:#274753;background:#102731;box-shadow:none}html[data-theme="dark"] .hub-workspace-tabs button{border-color:transparent;background:transparent;color:#c2d2d9}html[data-theme="dark"] .hub-workspace-tabs button:hover{border-color:#355766;background:#193641;color:#f1f8fa}html[data-theme="dark"] .hub-workspace-tabs button small{border:0;background:#213d48;color:#adbec6}html[data-theme="dark"] .hub-workspace-tabs button.active{border-color:#3b9fc5;background:#226f8f;color:#fff;box-shadow:inset 0 1px #ffffff20,0 2px 7px #0003}html[data-theme="dark"] .hub-workspace-tabs button.active small{background:#ffffff22;color:#fff}
@media(max-width:620px){.hub-workspace-tabs button{height:36px;padding:0 9px}.hub-workspace-tabs button span{max-width:125px}}

/* Optional LAN discovery inside Add Device. */
.device-discovery{margin:0 0 15px;overflow:hidden;border:1px solid #bdd8e4;border-radius:10px;background:#f3f9fb}.device-discovery-intro{display:flex;align-items:center;gap:11px;padding:11px 12px}.device-discovery-intro>div{min-width:0;flex:1}.device-discovery-intro strong,.device-discovery-intro small{display:block}.device-discovery-intro strong{color:#244653;font-size:11px}.device-discovery-intro small{margin-top:3px;color:#70838c;font-size:9px}.device-discovery-intro button{height:32px;flex:0 0 auto}.device-discovery-icon{position:relative;width:31px;height:31px;flex:0 0 31px;border-radius:8px;background:#dceff6}.device-discovery-icon:before{content:"";position:absolute;left:7px;top:7px;width:7px;height:7px;border:2px solid #2787ad;border-radius:50%;box-shadow:9px 9px 0 -2px #dceff6,9px 9px 0 0 #2787ad}.device-discovery-icon:after{content:"";position:absolute;left:14px;top:14px;width:7px;height:2px;background:#2787ad;transform:rotate(45deg)}.device-discovery-results{border-top:1px solid #d2e4eb;background:#fff}.device-discovery-loading,.device-discovery-empty{display:grid;justify-items:center;gap:4px;padding:21px;text-align:center}.device-discovery-loading i{width:22px;height:22px;margin-bottom:4px;border:2px solid #c8dce4;border-top-color:#2787ad;border-radius:50%;animation:spin .8s linear infinite}.device-discovery-loading small,.device-discovery-empty small{color:#758891;font-size:9px}.device-discovery-empty.error strong{color:#a94b47}.device-discovery-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;border-bottom:1px solid #e0e9ed}.device-discovery-summary strong{font-size:10px}.device-discovery-summary small{color:#758891;font-size:8px}.device-discovery-list{display:grid;max-height:230px;overflow:auto}.device-discovery-result{display:flex;align-items:center;gap:10px;padding:9px 11px;border-bottom:1px solid #edf2f4}.device-discovery-result:last-child{border-bottom:0}.device-discovery-result.selected{background:#e9f6fb;box-shadow:inset 3px 0 #2b93bb}.device-discovery-result>div{min-width:0;flex:1}.device-discovery-result strong,.device-discovery-result small,.device-discovery-result em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.device-discovery-result strong{font-size:10px}.device-discovery-result small{margin-top:2px;color:#647984;font-size:9px}.device-discovery-result em{margin-top:3px;color:#2c7c9b;font-size:8px;font-style:normal}.device-discovery-result button{height:29px;padding:0 10px}.device-discovery-type{display:grid;width:34px;height:34px;flex:0 0 34px;place-items:center;border-radius:8px;background:#e1f0f5;color:#207c9f;font-size:8px;font-weight:800}
html[data-theme="dark"] .device-discovery{border-color:#315462;background:#132d38}html[data-theme="dark"] .device-discovery-intro strong{color:#e3f1f5}html[data-theme="dark"] .device-discovery-intro small,html[data-theme="dark"] .device-discovery-loading small,html[data-theme="dark"] .device-discovery-empty small{color:#93aab4}html[data-theme="dark"] .device-discovery-icon{background:#1c4352}html[data-theme="dark"] .device-discovery-icon:before{border-color:#67c5e8;box-shadow:9px 9px 0 -2px #1c4352,9px 9px 0 0 #67c5e8}html[data-theme="dark"] .device-discovery-icon:after{background:#67c5e8}html[data-theme="dark"] .device-discovery-results{border-color:#2d4854;background:#10252e}html[data-theme="dark"] .device-discovery-summary,html[data-theme="dark"] .device-discovery-result{border-color:#29434e}html[data-theme="dark"] .device-discovery-result.selected{background:#173c49}html[data-theme="dark"] .device-discovery-result small{color:#9bb0b9}html[data-theme="dark"] .device-discovery-type{background:#1b4050;color:#77caea}@media(max-width:560px){.device-discovery-intro{align-items:flex-start;flex-wrap:wrap}.device-discovery-intro>button{width:100%}.device-discovery-summary{align-items:flex-start;flex-direction:column}}
.device-discovery-filter{display:grid;grid-template-columns:minmax(150px,1fr) auto;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid #e1eaee;background:#f8fbfc}.device-discovery-filter>input{width:100%;height:31px}.device-discovery-filter-buttons{display:flex;gap:4px;overflow-x:auto}.device-discovery-filter-buttons button{height:29px;padding:0 8px;border:1px solid #cddce3;border-radius:6px;background:#fff;color:#58707b;font:650 8px inherit;white-space:nowrap;cursor:pointer}.device-discovery-filter-buttons button b{margin-left:3px;color:#81939b;font-size:7px}.device-discovery-filter-buttons button:hover{border-color:#75b2ca}.device-discovery-filter-buttons button.active{border-color:#2c8eb5;background:#287fa5;color:#fff}.device-discovery-filter-buttons button.active b{color:#d8f3fd}.device-discovery-filter>#deviceDiscoveryVisibleCount{grid-column:1/-1;color:#768991;font-size:8px;text-align:right}.device-discovery-result.hide{display:none}html[data-theme="dark"] .device-discovery-filter{border-color:#29434e;background:#122a34}html[data-theme="dark"] .device-discovery-filter-buttons button{border-color:#365461;background:#172f3a;color:#b8cbd3}html[data-theme="dark"] .device-discovery-filter-buttons button.active{border-color:#3c9fc5;background:#226f8f;color:#fff}@media(max-width:700px){.device-discovery-filter{grid-template-columns:1fr}.device-discovery-filter-buttons{padding-bottom:2px}.device-discovery-filter>#deviceDiscoveryVisibleCount{grid-column:1}}

/* Compact My Hub picker: selection only; monitoring stays on Deployed Devices. */
#openHubSettings,.hub-settings-guide,.personal-widget-toggles,#resetPersonalDashboard,.hub-monitor-settings,.hub-config-permission{display:none!important}
.personal-dashboard-settings{position:fixed;z-index:1200;left:50%;top:50%;width:min(980px,calc(100vw - 36px));max-height:min(720px,calc(100vh - 36px));overflow:auto;margin:0;padding:20px;transform:translate(-50%,-50%);border:1px solid var(--personal-border);border-radius:16px;background:var(--personal-card);box-shadow:0 0 0 100vmax #07151d8c,0 24px 70px #07151d52}
.personal-dashboard-settings .personal-settings-head{margin-bottom:16px}.personal-dashboard-settings .personal-choice-list{max-height:430px}.personal-dashboard-settings .personal-settings-actions{margin-top:16px}.hub-simple-choice{min-height:58px;border:1px solid transparent!important}.hub-simple-choice.is-selected{border-color:#7dbbd3!important;background:#eaf6fb}.hub-simple-choice input:disabled{cursor:not-allowed}
.hub-device-preview-choice{min-height:82px}.hub-choice-preview{position:relative;display:grid;width:104px;height:59px;flex:0 0 104px;place-items:center;overflow:hidden;border:1px solid #c7d8df;border-radius:7px;background:#e8f0f3;color:#578092;font-size:10px;font-weight:800}.hub-choice-preview img{display:block;width:100%;height:100%;object-fit:cover;background:#10212a}.hub-choice-preview.is-empty{background:repeating-linear-gradient(135deg,#edf3f5 0 8px,#e5eef1 8px 16px)}.hub-choice-copy{min-width:0;flex:1}.hub-choice-copy .hub-preview-age{margin-top:5px;color:#69818d;font-size:8px}.hub-device-preview-choice.is-selected .hub-choice-preview{border-color:#4e9cbb;box-shadow:0 0 0 2px #4e9cbb22}
html[data-theme="dark"] .personal-dashboard-settings{background:#13232c}html[data-theme="dark"] .hub-simple-choice.is-selected{border-color:#3f7185!important;background:#183946}html[data-theme="dark"] .hub-choice-preview{border-color:#395562;background:#10232c;color:#7fabbc}html[data-theme="dark"] .hub-choice-preview.is-empty{background:repeating-linear-gradient(135deg,#142a34 0 8px,#19323d 8px 16px)}
@media(max-width:760px){.personal-dashboard-settings{width:calc(100vw - 20px);max-height:calc(100vh - 20px);padding:15px}.personal-dashboard-settings .personal-choice-list{max-height:260px}.hub-choice-preview{width:88px;height:50px;flex-basis:88px}}

/* Media-first My Hub monitoring tiles. */
.hub-media-card{position:relative;isolation:isolate;overflow:hidden;border-color:#294955;background:#08151c;color:#fff}.hub-media-card .hub-device-capture,.hub-media-card .hub-cctv-preview{position:absolute;z-index:1;inset:0;width:100%;height:100%;min-height:0;border:0;border-radius:0;background:#0a1820}.hub-media-card .hub-device-capture img{width:100%;height:100%;object-fit:contain;background:#071117}.hub-media-card .hub-cctv-preview img{width:100%;height:100%;object-fit:cover;background:#071117}.hub-media-card .hub-device-capture.empty,.hub-media-card .hub-cctv-preview:has(>span){display:grid;place-content:center;background:repeating-linear-gradient(135deg,#0c202a 0 10px,#0e2530 10px 20px);color:#d7e8ef}.hub-media-card .hub-device-capture.empty>span{position:static;padding:0;background:none;color:#e4f1f5;font-size:13px}.hub-media-card .hub-device-capture.empty small{margin-top:4px;color:#76a7ba;font-size:9px}.hub-media-card .hub-cctv-preview>span{height:auto;color:#9eb7c2;font-size:12px}.hub-media-card .hub-tile-handle{position:absolute;z-index:6;left:0;right:0;top:0;min-height:37px;padding:8px 10px;border:0;background:linear-gradient(#07141de6,#07141d00);color:#fff}.hub-media-card .hub-tile-handle>div{display:flex;min-width:0;align-items:center;gap:6px}.hub-media-card .hub-tile-handle strong{overflow:hidden;color:#fff;font-size:11px;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 3px #000}.hub-media-card .hub-tile-handle>small{margin-left:auto;padding-left:8px;color:#e2edf1;font-size:8px;white-space:nowrap;text-shadow:0 1px 3px #000}.hub-presence{width:8px;height:8px;flex:0 0 8px;border:1px solid #d9fff0;border-radius:50%;background:#25c88a;box-shadow:0 0 7px #25c88a}.hub-presence.offline{border-color:#ffd6d6;background:#ef5961;box-shadow:0 0 7px #ef5961}.hub-live-pill{padding:3px 6px!important;border-radius:4px;background:#ef5961;color:#fff!important;font-weight:800;text-transform:uppercase}.hub-live-pill.offline{background:#384a53}.hub-overlay-actions{position:absolute;z-index:8;right:8px;top:38px;display:flex;gap:5px}.hub-overlay-actions button{display:grid;width:29px;height:29px;place-items:center;padding:0;border:1px solid #ffffff1f;border-radius:7px;background:#142631df;color:#fff;cursor:pointer;box-shadow:0 2px 8px #0005}.hub-overlay-actions button:hover{background:#247fa6}.hub-overlay-actions svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.hub-overlay-bottom{position:absolute;z-index:6;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:12px;padding:20px 10px 8px;background:linear-gradient(#07141d00,#07141de8);color:#eef6f8;font-size:8px;pointer-events:none}.hub-overlay-bottom span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 3px #000}.hub-media-card .hub-smart-live-state{top:auto!important;right:8px!important;bottom:31px!important}.hub-editing .hub-media-card .hub-tile-handle{background:linear-gradient(#174459ed,#17445955);color:#fff}.hub-editing .hub-overlay-actions{pointer-events:none}.hub-media-card .hub-resize-handle{z-index:12}

/* Deployed Devices list/grid selection and latest screenshot cards. */
.device-select-mode.active{border-color:#287fa5;background:#e8f4f9;color:#1d759a}.device-select-head,.device-select-cell{display:none}.device-selection-mode .device-select-head,.device-selection-mode .device-select-cell{display:table-cell;width:42px;padding-left:12px;padding-right:4px}.device-select-control{position:relative;display:inline-flex;width:19px;height:19px;align-items:center;justify-content:center;cursor:pointer}.device-select-control input{position:absolute;width:1px;height:1px;opacity:0}.device-select-control span{display:block;width:17px;height:17px;border:1px solid #aabec8;border-radius:4px;background:#fff}.device-select-control input:checked+span{border-color:#2387b3;background:#2387b3}.device-select-control input:checked+span:after{content:"";display:block;width:8px;height:4px;margin:4px 0 0 3px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}.device-row-selected td{background:#edf8fc}.device-name-cell{display:flex;align-items:center;justify-content:space-between;gap:8px}.device-name-cell>span{min-width:0}.device-favorite{display:grid;width:30px;height:30px;flex:0 0 30px;place-items:center;padding:0;border:1px solid #cbd9df;border-radius:50%;background:#fff;color:#91a1a8;font-size:18px;line-height:1;cursor:pointer}.device-favorite:hover,.device-favorite.active{border-color:#e2bc42;background:#fff9df;color:#e0a900}.device-favorite[disabled]{opacity:.5;cursor:wait}.page .device-gallery{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.device-grid-card{position:relative;min-width:0;overflow:hidden;border:1px solid #d5e1e6;border-radius:12px;background:#fff;box-shadow:0 5px 18px #18384812;transition:transform .16s,border-color .16s,box-shadow .16s}.device-grid-card:hover{transform:translateY(-2px);border-color:#8fc3d7;box-shadow:0 10px 26px #1838481f}.device-grid-card.selected{border-color:#2198c8;box-shadow:0 0 0 2px #2198c833,0 10px 26px #1838481f}.device-grid-overlay{position:absolute;z-index:3;left:10px;right:10px;top:10px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.device-grid-overlay>*{pointer-events:auto}.device-grid-overlay .device-select-control{display:none}.device-selection-mode .device-grid-overlay .device-select-control{display:inline-flex}.device-grid-screenshot{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;padding:0;border:0;border-radius:0;background:#0b1820;color:#fff;text-align:left;cursor:pointer}.device-grid-screenshot img{display:block;width:100%;height:100%;object-fit:contain}.device-grid-screenshot>span{position:absolute;left:0;right:0;bottom:0;padding:8px 11px;background:linear-gradient(transparent,#061018e8);color:#eaf5f9;font-size:10px}.device-grid-screenshot.empty{display:grid;place-content:center;gap:6px;background:linear-gradient(145deg,#eaf1f4,#d9e5ea);color:#526b77;text-align:center;cursor:default}.device-grid-screenshot.empty b{font-size:14px}.device-grid-screenshot.empty span{position:static;padding:0;background:none;color:#718690}.device-grid-body{padding:15px}.device-grid-title{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.device-grid-title h3{overflow:hidden;margin:0;color:var(--text);font-size:16px;text-overflow:ellipsis;white-space:nowrap}.device-grid-title small{display:block;margin-top:4px;color:var(--muted)}.device-grid-body dl{display:grid;gap:8px;margin:15px 0}.device-grid-body dl div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:8px}.device-grid-body dt{color:var(--muted);font-size:10px}.device-grid-body dd{overflow:hidden;margin:0;color:var(--text);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.device-grid-body>.actions{padding-top:12px;border-top:1px solid var(--line)}.device-bulk-bar{position:fixed;z-index:43;left:calc(244px + (100vw - 244px)/2);bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:9px;border:1px solid #9dc9dc;border-radius:9px;background:#fffffff2;box-shadow:0 8px 26px #17384724;backdrop-filter:blur(8px)}.device-bulk-bar.hide{display:none}.device-bulk-bar strong{padding:0 7px;color:#17303d;white-space:nowrap}.device-bulk-bar button{height:36px;padding:0 12px;border:1px solid #c8d8e1;border-radius:5px;background:#f7fafc;color:#294b5b;font:600 12px inherit;cursor:pointer}.device-bulk-bar .primary{border-color:#2387b3;background:#0f79aa;color:#fff}.device-bulk-bar button:disabled{opacity:.42;cursor:not-allowed}
html[data-theme="dark"] .device-select-mode.active{border-color:#4eb5df;background:#1d3541;color:#fff}html[data-theme="dark"] .device-select-control span{border-color:#52707e;background:#102029}html[data-theme="dark"] .device-row-selected td{background:#18323e}html[data-theme="dark"] .device-favorite{border-color:#3b515d;background:#172630;color:#81949e}html[data-theme="dark"] .device-favorite:hover,html[data-theme="dark"] .device-favorite.active{border-color:#a98525;background:#332d18;color:#ffd34f}html[data-theme="dark"] .device-grid-card{border-color:#304650;background:#13232c;box-shadow:none}html[data-theme="dark"] .device-grid-card.selected{border-color:#45b9e8;box-shadow:0 0 0 2px #45b9e833}html[data-theme="dark"] .device-grid-screenshot.empty{background:linear-gradient(145deg,#172a34,#0f2028);color:#a9bec8}html[data-theme="dark"] .device-grid-screenshot.empty span{color:#78909b}html[data-theme="dark"] .device-bulk-bar{border-color:#218ac0;background:#0d2638ef;box-shadow:0 8px 30px #0009}html[data-theme="dark"] .device-bulk-bar strong{color:#e9f7ff}html[data-theme="dark"] .device-bulk-bar button{border-color:#2b4658;background:#0b1926;color:#d7e9f2}
@media(max-width:1100px){.device-bulk-bar{left:50%}}@media(max-width:700px){.device-toolbar .view-switch{order:2}.device-select-mode{order:3}.device-bulk-bar{right:10px;left:10px;bottom:10px;transform:none;overflow-x:auto}.device-bulk-bar strong,.device-bulk-bar button{flex:0 0 auto}.page .device-gallery{grid-template-columns:1fr!important}.device-grid-card{width:100%}}
.actions .device-favorite{width:32px;height:32px;flex-basis:32px;border-radius:5px}

/* Keep overview summary cards distinct and softly illuminated in dark mode. */
html[data-theme="dark"] #dashboard .stat{box-shadow:inset 0 1px #ffffff0a,0 5px 18px #00000024}
html[data-theme="dark"] #dashboard .stat.blue{border-color:#31596b;border-left-color:#42b9e9;background:linear-gradient(135deg,#18323f 0%,#142731 100%)}
html[data-theme="dark"] #dashboard .stat.purple{border-color:#4d486d;border-left-color:#9d8cf2;background:linear-gradient(135deg,#292840 0%,#1d2331 100%)}
html[data-theme="dark"] #dashboard .stat.green{border-color:#285b4e;border-left-color:#39c994;background:linear-gradient(135deg,#19382f 0%,#152b29 100%)}
html[data-theme="dark"] #dashboard .stat.slate{border-color:#45545d;border-left-color:#9eb0ba;background:linear-gradient(135deg,#27343b 0%,#1b292f 100%)}
html[data-theme="dark"] #dashboard .stat span{color:#c1d0d7}
html[data-theme="dark"] #dashboard .stat strong{color:#f5fafc;text-shadow:0 1px 10px #ffffff0d}
html[data-theme="dark"] #dashboard .stat small{color:#98abb4}
html[data-theme="dark"] .hub-camera-status{border:1px solid #24634f;background:#123b30;color:#73e0b5;box-shadow:0 0 10px #2bae8020}
html[data-theme="dark"] .hub-camera-status.offline{border-color:#70403c;background:#442321;color:#ff9b95;box-shadow:0 0 10px #ed69641a}

/* Optimized CCTV and deployed-device live monitoring inside My Hub. */
.hub-smart-live-toggle{border-color:#8ebfd2;color:#1f7599}.hub-smart-live-toggle.active{border-color:#168466;background:#e5f5ef;color:#116b52;box-shadow:0 0 0 3px #20a27612}.hub-smart-live-toggle.active:before{content:"";width:7px;height:7px;border-radius:50%;background:#20a276;box-shadow:0 0 0 4px #20a2761f;animation:hub-live-pulse 1.8s ease-out infinite}.hub-cctv-preview>.hub-smart-live-video,.hub-device-capture>.hub-smart-device-frame{position:absolute;z-index:2;inset:0;display:block;width:100%;height:100%;object-fit:contain;background:#061117}.hub-smart-live-state{position:absolute!important;z-index:5!important;left:auto!important;right:8px!important;top:8px!important;bottom:auto!important;width:auto!important;padding:5px 8px!important;border:1px solid #9eb3bd!important;border-radius:12px!important;background:#21343ddd!important;color:#e7f1f5!important;font:700 9px/1 "Segoe UI",Arial,sans-serif!important;text-transform:none!important;box-shadow:0 2px 9px #0004}.hub-smart-live-state.connecting{border-color:#be8b35!important;background:#473817e8!important;color:#ffd98e!important}.hub-smart-live-state.live{border-color:#288d6c!important;background:#123b30e8!important;color:#7ce3b8!important}.hub-smart-live-state.failed{border-color:#9b4c48!important;background:#442321e8!important;color:#ffaaa5!important}.hub-smart-live .hub-workspace-tile,.hub-workspace-tile.hub-smart-live{border-color:#5aab8f;box-shadow:0 0 0 2px #20a27618,0 8px 24px #1738471a}.hub-smart-connecting{border-color:#b99047}.hub-smart-failed{border-color:#a4615e}@keyframes hub-live-pulse{70%{box-shadow:0 0 0 7px #20a27600}}
.hub-cctv-borrowed #cctvLiveImage,.hub-cctv-borrowed .cctv-footage-tools-outside,.hub-cctv-borrowed .cctv-playback-panel{display:none!important}.hub-cctv-borrowed #cctvLive>.cctv-hub-borrowed-media{display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;background:#07181d}
.hub-cctv-mosaic-panel{margin:0 0 16px;overflow:hidden;border:1px solid #315b6b;border-radius:12px;background:#07151d;color:#fff;box-shadow:0 10px 28px #07151d2e}.hub-cctv-mosaic-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 13px;border-bottom:1px solid #294753;background:#0d2029}.hub-cctv-mosaic-head strong,.hub-cctv-mosaic-head small{display:block}.hub-cctv-mosaic-head strong{font-size:13px}.hub-cctv-mosaic-head small{margin-top:3px;color:#91adba;font-size:9px}.hub-cctv-mosaic-head button{height:30px;padding:0 11px;border:1px solid #477180;border-radius:7px;background:#15313d;color:#dff4fc;font:600 10px inherit;cursor:pointer}.hub-cctv-mosaic-head button:hover{border-color:#55acd0;background:#1d5268}.hub-cctv-mosaic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,620px),1fr));gap:2px;background:#18303a}.hub-cctv-mosaic-stream{position:relative;min-height:220px;background:repeating-linear-gradient(135deg,#0a1c25 0 12px,#0d222c 12px 24px)}.hub-cctv-mosaic-stream img{display:block;width:100%;height:auto;min-height:220px;object-fit:contain;background:#061117}.hub-cctv-mosaic-stream>span{position:absolute;inset:0;display:grid;place-items:center;color:#91adba;font-size:11px}.hub-cctv-mosaic-stream.ready>span{display:none}@media(max-width:700px){.hub-cctv-mosaic-head{align-items:flex-start}.hub-cctv-mosaic-stream,.hub-cctv-mosaic-stream img{min-height:150px}}

/* Reviewed CCTV names and locations. */
.cctv-thumb{position:relative}
.cctv-label-suggest{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:14px;border:1px solid #cce0e8;border-radius:9px;background:#f3f9fb}.cctv-label-suggest div,.cctv-label-suggest strong,.cctv-label-suggest small{display:block}.cctv-label-suggest strong{color:#263740;font-size:13px}.cctv-label-suggest small{margin-top:5px;color:#6b7f89;font-size:11px;line-height:1.5}.cctv-label-suggest button{width:100%;min-width:0;white-space:normal}.cctv-label-request-modal{width:min(560px,96vw)}.cctv-label-request-modal form{padding:20px}.cctv-label-review-note{margin:14px 0;padding:10px 12px;border-radius:7px;background:#edf7fb;color:#506c79;font-size:11px;line-height:1.45}
.cctv-label-review-panel{margin:0 0 20px;border:1px solid #c9dce4;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 7px 24px #1838480d}.cctv-review-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 17px;border-bottom:1px solid #dce7ec}.cctv-review-head>div,.cctv-review-head strong,.cctv-review-head small{display:block}.cctv-review-head small{margin-top:4px;color:var(--muted)}.cctv-review-head>b{padding:5px 9px;border-radius:14px;background:#e7f4f9;color:#24799e;font-size:10px}.cctv-review-list{display:grid}.cctv-review-list>article{display:grid;grid-template-columns:minmax(150px,1.2fr) minmax(130px,1fr) minmax(150px,1.2fr) minmax(130px,1fr) auto;align-items:center;gap:15px;padding:14px 17px;border-bottom:1px solid #edf2f4}.cctv-review-list>article:last-child{border-bottom:0}.cctv-review-list article>div:not(.cctv-review-actions),.cctv-review-list article strong,.cctv-review-list article small,.cctv-review-list article label{display:block;min-width:0}.cctv-review-list article strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.cctv-review-list article label,.cctv-review-list article small{margin-bottom:3px;color:var(--muted);font-size:9px}.cctv-review-actions{display:flex;gap:7px}.cctv-review-actions button{height:34px;padding:0 11px}.cctv-review-empty{margin:0;padding:22px;text-align:center;color:var(--muted)}
html[data-theme="dark"] .cctv-label-suggest,html[data-theme="dark"] .cctv-label-review-panel{border-color:#314a56;background:#13242d}html[data-theme="dark"] .cctv-label-suggest strong{color:#e4f0f5}html[data-theme="dark"] .cctv-label-suggest small{color:#9db5c0}html[data-theme="dark"] .cctv-label-suggest button{border-color:#426372;background:#172d37;color:#dcecf3}html[data-theme="dark"] .cctv-label-review-note{background:#172f3a;color:#b7cbd4}html[data-theme="dark"] .cctv-review-head,html[data-theme="dark"] .cctv-review-list>article{border-color:#29414c}html[data-theme="dark"] .cctv-review-head>b{background:#183b4a;color:#7ec9e9}
@media(max-width:1000px){.cctv-review-list>article{grid-template-columns:repeat(2,minmax(0,1fr))}.cctv-review-actions{justify-content:flex-end}}@media(max-width:600px){.cctv-label-suggest{align-items:flex-start;flex-direction:column}.cctv-review-list>article{grid-template-columns:1fr}.cctv-review-actions{justify-content:stretch}.cctv-review-actions button{flex:1}}
html[data-theme="dark"] .hub-smart-live-toggle{border-color:#466675;background:#13232c;color:#8bd5f3}html[data-theme="dark"] .hub-smart-live-toggle.active{border-color:#2b8c6e;background:#15382f;color:#82e0bc;box-shadow:0 0 12px #20a27620}
@media(max-width:900px){#hubSmartLive{padding:0 10px}#hubSmartLive span{max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@media(max-width:700px){#hubSmartLive{width:auto;min-width:0;padding:0 10px}}

/* Preserve the device screen ratio; scale down when the tile shape differs. */
.hub-media-card .hub-device-capture img,.hub-media-card .hub-device-capture>.hub-smart-device-frame{width:100%;height:100%;object-fit:contain;background:#071117}

/* Readable overlay details at the four-column Hub size. */
.hub-media-card .hub-tile-handle strong{font-size:13px}.hub-media-card .hub-tile-handle>small{font-size:10px}.hub-media-card .hub-live-pill{font-size:9px}.hub-media-card .hub-overlay-bottom{font-size:10px}.hub-media-card .hub-device-capture.empty>span{font-size:14px}.hub-media-card .hub-device-capture.empty small,.hub-media-card .hub-cctv-preview>span{font-size:10px}

/* Interactive cards and state displayed immediately after the capture age. */
.hub-media-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.hub-media-card:hover{z-index:4;transform:translateY(-3px);border-color:#4e8da5;box-shadow:0 13px 30px #07151d38,0 0 0 1px #55b5d233}.hub-media-card .hub-device-capture img,.hub-media-card .hub-cctv-preview img{transition:transform .3s ease,filter .3s ease}.hub-media-card:hover .hub-device-capture img,.hub-media-card:hover .hub-cctv-preview img{transform:scale(1.018);filter:saturate(1.05)}.hub-media-card .hub-overlay-actions{opacity:.72;transform:translateY(-2px);transition:opacity .16s,transform .16s}.hub-media-card:hover .hub-overlay-actions,.hub-media-card:focus-within .hub-overlay-actions{opacity:1;transform:none}.hub-media-card:hover .hub-overlay-top{background:linear-gradient(#07141df2,#07141d12)}.hub-media-card:hover .hub-overlay-bottom{background:linear-gradient(#07141d00,#07141df2)}.hub-editing .hub-media-card:hover{transform:none}
.hub-top-meta{display:flex;align-items:center;gap:6px;margin-left:auto;padding-left:7px}.hub-top-meta>small{color:#e2edf1;font-size:10px;white-space:nowrap;text-shadow:0 1px 3px #000}.hub-view-state{padding:3px 6px;border:1px solid #8ba0aa;border-radius:9px;background:#233640d9;color:#dce9ee;font-size:8px;line-height:1;text-transform:uppercase;white-space:nowrap}.hub-view-state.preview{border-color:#64899a;background:#1d3540dc;color:#bfe8f7}.hub-view-state.connecting{border-color:#bd8c3c;background:#4a3819e6;color:#ffda91}.hub-view-state.live{border-color:#23835f;background:#123c2fe8;color:#7ce3b8}.hub-view-state.offline,.hub-view-state.failed{border-color:#9a4b4e;background:#482426e8;color:#ffaaa5}.hub-presence.online{animation:hub-presence-pulse 2.2s ease-out infinite}@keyframes hub-presence-pulse{70%{box-shadow:0 0 0 6px #25c88a00}}

/* Light Hub workspace: frame dark monitoring media with a calm light surface. */
html[data-theme="light"] #personal-dashboard{min-width:0;overflow-x:clip}
html[data-theme="light"] .personal-dashboard-grid{width:100%;min-width:0;max-width:100%}
html[data-theme="light"] .personal-dashboard-grid:not(.hub-editing){padding:12px;border:1px solid #d8e4e9;border-radius:14px;background:linear-gradient(145deg,#edf3f6,#f7fafb);box-shadow:inset 0 1px #fff,0 8px 24px #1838480d}
html[data-theme="light"] .hub-media-card{max-width:100%;border:0;background:#f7fafb;color:#17313e;box-shadow:0 6px 18px #18384820}
html[data-theme="light"] .hub-media-card:hover{border:0;box-shadow:0 13px 30px #1738472b}
html[data-theme="light"] .hub-media-card .hub-device-capture,html[data-theme="light"] .hub-media-card .hub-cctv-preview{background:#eaf1f4;color:#17313e}
html[data-theme="light"] .hub-media-card .hub-tile-handle,html[data-theme="light"] .hub-editing .hub-media-card .hub-tile-handle,html[data-theme="light"] .hub-media-card:hover .hub-overlay-top{padding:7px 8px;background:none;color:#17313e}
html[data-theme="light"] .hub-media-card .hub-tile-handle>div{padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none}
html[data-theme="light"] .hub-media-card .hub-tile-handle strong{color:#fff;text-shadow:0 1px 2px #000,0 0 4px #000}
html[data-theme="light"] .hub-media-card .hub-tile-handle>small,html[data-theme="light"] .hub-media-card .hub-top-meta>small{padding:0;border-radius:0;background:none;color:#fff;text-shadow:0 1px 2px #000,0 0 4px #000;box-shadow:none}
html[data-theme="light"] .hub-media-card .hub-overlay-bottom,html[data-theme="light"] .hub-media-card:hover .hub-overlay-bottom{padding:7px 8px;background:none;color:#17313e}
html[data-theme="light"] .hub-media-card .hub-overlay-bottom span{padding:0;border:0;border-radius:0;background:none;color:#fff;text-shadow:0 1px 2px #000,0 0 4px #000;box-shadow:none;backdrop-filter:none}
html[data-theme="light"] .hub-media-card .hub-overlay-actions button{border-color:#a9bdc7;background:rgba(255,255,255,.9);color:#244754;box-shadow:0 3px 9px #1738472b}
html[data-theme="light"] .hub-media-card .hub-overlay-actions button:hover{border-color:#4f94af;background:#fff;color:#116f94}
html[data-theme="light"] .hub-media-card .hub-view-state.preview{border-color:#7fa8b8;background:rgba(255,255,255,.88);color:#176783}
html[data-theme="light"] .hub-smart-live.hub-media-card{border-color:#48a181;box-shadow:0 0 0 2px #20a27624,0 9px 24px #17384722}

/* Coordinated initials avatar for the light and dark sidebar themes. */
html[data-theme="light"] .sidebar .user>span.user-avatar{border:1px solid #9dcedf;background:linear-gradient(145deg,#e4f5fb,#bfe5f2);color:#0d6688;box-shadow:0 3px 10px #246b8624}
html[data-theme="light"] .sidebar .user>span.user-avatar b{color:#0d6688;font-weight:700}
html[data-theme="dark"] .sidebar .user>span.user-avatar{border:1px solid #34758d;background:linear-gradient(145deg,#1a4b5e,#0f3443);color:#9ce6ff;box-shadow:0 0 0 3px #55c7ed0d,0 4px 12px #0005}
html[data-theme="dark"] .sidebar .user>span.user-avatar b{color:#9ce6ff;font-weight:700}