*{margin:0;padding:0;box-sizing:border-box}body{overflow:hidden;background:#0f172a;font-family:system-ui,-apple-system,sans-serif}.webgl{display:block;width:100vw;height:100vh}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0f172a;z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity .8s ease,visibility .8s ease}.loading-overlay.fade-out{opacity:0;visibility:hidden;pointer-events:none}.loading-container{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;max-width:320px;padding:0 24px}.lottie-container{width:120px;height:120px}.progress-wrapper{width:100%;display:flex;flex-direction:column;gap:12px}.progress-bar{width:100%;height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden}.progress-fill{height:100%;width:0%;background:#06b6d4;border-radius:2px;transition:width .1s linear;box-shadow:0 0 10px #06b6d480}.progress-text{display:flex;justify-content:space-between;align-items:center;font-family:system-ui,-apple-system,sans-serif}#loading-percentage{font-size:14px;font-weight:600;color:#06b6d4}.loading-label{font-size:12px;font-weight:500;color:#fff9;text-transform:uppercase;letter-spacing:.5px}.device-label{font-family:system-ui,-apple-system,sans-serif;background:#ffffffe6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.4);border-radius:10px;padding:8px 12px;box-shadow:0 4px 16px #00000026;-webkit-user-select:none;user-select:none;pointer-events:none;transition:opacity .15s ease,transform .15s ease,box-shadow .15s ease}.device-label .label-id{font-size:13px;font-weight:700;color:#1e293b;letter-spacing:.3px;line-height:1.2}.device-label .label-location{font-size:10px;font-weight:500;color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-top:2px;line-height:1.2}.device-label.hover{background:#fffffff2;border-color:#06b6d4;box-shadow:0 6px 24px #06b6d440;transform:translate(-50%,-100%) scale(1.05)!important}.device-label.proximity{background:#ffffffd9}.device-label.persistent{background:#ffffffbf;border-color:#ffffff4d;box-shadow:0 2px 8px #0000001a}@media(max-width:768px){.device-label{padding:6px 10px;border-radius:8px}.device-label .label-id{font-size:12px}.device-label .label-location{font-size:9px}}.label-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#0006;border-radius:12px;margin-bottom:16px}.label-toggle-text{font-size:14px;font-weight:500;color:#fff}.toggle-switch{position:relative;width:44px;height:24px;background:#cbd5e1;border-radius:12px;cursor:pointer;transition:background .2s ease}.toggle-switch.active{background:#06b6d4}.toggle-switch:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s ease;box-shadow:0 2px 4px #0003}.toggle-switch.active:after{transform:translate(20px)}.dashboard{position:fixed;top:50%;right:0;width:360px;height:640px;background:#a0c2ff59;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:2px solid rgba(192,237,255,.7);border-right:none;border-radius:20px 0 0 20px;box-shadow:-4px 0 24px #0003;z-index:100;display:flex;flex-direction:column;transform:translateY(-50%) translate(0);transition:transform .35s cubic-bezier(.4,0,.2,1)}.dashboard.closed{transform:translateY(-50%) translate(340px)}.drawer-tab{position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:20px;height:80px;background:#ffffff80;border:1px solid rgba(255,255,255,.3);border-right:none;border-radius:12px 0 0 12px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:-4px 0 12px #00000026;z-index:101;transition:background .2s ease,box-shadow .2s ease;padding:0}.drawer-tab:hover{background:#fff;box-shadow:-6px 0 16px #0003}.drawer-tab:hover .tab-icon{color:#000}.tab-icon{font-size:18px;font-weight:700;color:#fff;line-height:1;font-family:system-ui,sans-serif;-webkit-user-select:none;user-select:none}.tab-icon{font-size:16px}.device-grid{max-height:calc(100vh - 200px)}.tab-headers{display:flex;border-bottom:1px solid rgba(0,0,0,.1);background:#ffffff80;border-top-left-radius:20px}.tab-btn{flex:1;padding:16px;border:none;background:transparent;cursor:pointer;font-size:14px;font-weight:600;color:#00000080;transition:all .2s ease;text-transform:uppercase;letter-spacing:.5px;min-height:48px}.tab-btn:hover{background:#0000000d;color:#000c}.tab-btn.active{color:#000;border-bottom:2px solid #06b6d4}.tab-content{display:none;flex:1;padding:24px;overflow-y:auto}.tab-content.active{display:flex;flex-direction:column}.panel-title{font-size:18px;font-weight:700;margin-bottom:24px;color:#fff;flex-shrink:0}.control-group{margin-bottom:8px}.checkbox-label{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:14px;font-weight:500;color:#334155;min-height:48px}.checkbox-label input[type=checkbox]{width:20px;height:20px;accent-color:#06b6d4;cursor:pointer}.control-btn{width:100%;padding:16px 24px;margin-bottom:8px;border:none;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;min-height:48px;text-transform:uppercase;letter-spacing:.5px}.control-group .control-btn:last-child{margin-bottom:0}.control-group .label-toggle-row:last-child{margin-bottom:0}.control-btn.primary{background:#06b6d4;color:#fff}.control-btn.primary:hover{background:#0891b2;transform:translateY(-1px);box-shadow:0 4px 12px #06b6d44d}.control-btn.secondary{background:#000c;color:#fff}.control-btn.secondary:hover{background:#000;transform:translateY(-1px)}.control-btn.danger{background:#ef4444;color:#fff;margin-bottom:8px}.control-btn.danger:hover{background:#dc2626;box-shadow:0 4px 12px #ef44444d}.control-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.fire-status .value.alarm{color:#ef4444;animation:pulse-text 1s infinite}@keyframes pulse-text{0%,to{opacity:1}50%{opacity:.7}}.section-title{font-size:12px;text-transform:uppercase;color:#fff;margin-bottom:12px;letter-spacing:.5px}.info-box{background:#0000000d;border-radius:12px;padding:16px;margin-top:24px}.status-row{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.status-row:last-child{margin-bottom:0}.status-row .label{color:#fff;font-weight:500}.status-row .value{color:#000;font-weight:700}.device-grid{display:flex;flex-direction:column;gap:16px;max-height:480px;overflow-y:auto;padding-right:8px;min-height:0}.device-grid::-webkit-scrollbar{width:6px}.device-grid::-webkit-scrollbar-thumb{background:#0003;border-radius:3px}.device-card{width:100%;min-height:230px;border-radius:16px;padding:16px;display:grid;grid-template-columns:100px 1fr 1fr;grid-template-rows:auto 1fr auto;gap:12px;position:relative;overflow:hidden;transition:transform .2s ease;cursor:pointer;border:1px solid rgba(255,255,255,.5)}.device-card.online{background:linear-gradient(135deg,#0ea5e9,#005c8a);color:#fff}.device-card.offline{background:linear-gradient(135deg,#64748b,#475569);color:#ffffffb3}.device-card.alarm{background:linear-gradient(135deg,#ef4444,#991b1b);color:#fff;border-color:#fffc;animation:pulse-border 2s infinite}.device-card.low-battery .battery-fill{stroke:#efc744}.device-card.test{background:linear-gradient(135deg,#0ea5e9,#005c8a);color:#fff}.battery-offline{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff9;border:2px solid rgba(255,255,255,.3);border-radius:50%;box-sizing:border-box}@keyframes pulse-border{0%,to{border-color:#fbbf2466}50%{border-color:#fbbf24}}.card-header{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:flex-start}.card-title{display:flex;flex-direction:column;gap:2px}.device-id{font-size:16px;font-weight:700;letter-spacing:.5px}.device-location{font-size:11px;opacity:.9;text-transform:uppercase;letter-spacing:.5px}.signal-indicator{display:flex;align-items:center;gap:6px;font-size:10px;text-transform:uppercase}.signal-dots{display:flex;gap:3px}.dot{width:6px;height:6px;border-radius:50%;background:#fff3}.dot.active{background:#22c55e}.dot.fair{background:#fbbf24}.dot.weak{background:#ef4444}.dot.offline{background:#ffffff1a}.card-image{grid-row:2 / 4;width:100px;height:100px;background:#ffffff1a;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(255,255,255,.2)}.card-image img{width:100%;height:100%;object-fit:contain;opacity:.9}.card-stats{grid-column:2 / -1;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:center}.stat-item{display:flex;flex-direction:column;align-items:center;gap:4px}.battery-ring{width:40px;height:40px;position:relative}.battery-ring svg{transform:rotate(-90deg);width:100%;height:100%}.battery-bg{fill:none;stroke:#fff3;stroke-width:3}.battery-fill{fill:none;stroke:#22c55e;stroke-width:3;stroke-linecap:round;stroke-dasharray:113;stroke-dashoffset:calc(113 - (113 * var(--battery)) / 100);transition:stroke-dashoffset .5s}.device-card.alarm .battery-fill{stroke:#ef4444}.device-card.offline .battery-fill{stroke:#94a3b8;opacity:.5}.device-card.offline .battery-text{opacity:.5}.battery-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:700}.power-btn{width:40px;height:40px;border-radius:50%;border:none;background:#fff3;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .2s}.icon-power{width:20px;height:20px;filter:brightness(0) invert(1);pointer-events:none}.power-btn:hover{transform:scale(1.1)}.device-card.offline .power-btn{background:#ef4444}.icon-volume{width:20px;height:20px;opacity:.9;cursor:pointer;transition:opacity .2s,filter .2s;filter:brightness(0) invert(1)}.device-card.offline .icon-volume{filter:grayscale(100%) opacity(.5)}.device-card.alarm .icon-volume{filter:brightness(0) invert(1) drop-shadow(0 0 4px rgba(255,255,255,.5))}.icon-volume:hover{opacity:1;transform:scale(1.1)}.test-btn{display:inline-flex;align-items:center;justify-content:center;height:25px;width:auto;padding:0 16px;border-radius:6px;border:none;background:#06b5d4;color:#fff;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.5px;margin-left:12px;line-height:1}.test-btn:hover:not(:disabled){background:#06b6d466}.test-btn:disabled{background:#64748b33;color:#64748b;cursor:not-allowed}.device-card.test .test-btn,.device-card.alarm .test-btn{background:#ef4444;color:#fff}.stat-label{font-size:9px;text-transform:uppercase;opacity:.8}.stat-value{font-size:13px;font-weight:700;height:20px;line-height:20px;text-align:center}.device-card.alarm .smoke-value{color:#fbbf24;font-size:16px}.card-footer{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;font-size:10px;text-transform:uppercase;opacity:.8;padding-top:4px;border-top:1px solid rgba(255,255,255,.2);margin-top:auto}.footer-text{flex:1}