:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#fff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#07070a;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}body{min-width:320px;min-height:100vh;margin:0;display:flex}*{box-sizing:border-box}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#0003}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#fff3}:root{--primary:#0f8;--bg-dark:#07070a;--bg-card:#ffffff08;--border-glass:#ffffff14;--text-main:#f0f0f0;--text-muted:#888}body{background-color:var(--bg-dark);color:var(--text-main);background-image:radial-gradient(circle at 50% 0%, #1a1a2e 0%, var(--bg-dark) 50%);background-attachment:fixed;margin:0;font-family:Inter,sans-serif;overflow-x:hidden}.dashboard-container{flex-direction:column;min-height:100vh;display:flex;position:relative}.dashboard-header{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-glass);z-index:100;background:#07070a99;justify-content:space-between;align-items:center;height:80px;padding:0 50px;display:flex;position:sticky;top:0}.logo h1{letter-spacing:2px;margin:0;font-size:1.8rem;font-weight:300}.logo span{color:var(--primary);text-shadow:0 0 15px #0f86;font-weight:700}.active-cameras{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-size:.95rem;font-weight:500}.cam-count{color:#000;background:var(--primary);border-radius:12px;margin-right:8px;padding:2px 8px;font-weight:700;box-shadow:0 0 10px #00ff8880}.camera-grid{flex:1;grid-template-columns:repeat(auto-fill,minmax(450px,1fr));gap:30px;padding:50px;display:grid}.camera-tile{background:var(--bg-card);border:1px solid var(--border-glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:24px;flex-direction:column;transition:all .4s;display:flex;overflow:hidden;box-shadow:0 10px 30px #00000080}.camera-tile:hover{border-color:#ffffff26;transform:translateY(-5px)}.camera-tile.live{border-color:#00ff884d;box-shadow:0 10px 40px #00ff880d}.tile-header{border-bottom:1px solid var(--border-glass);background:#0006;justify-content:space-between;align-items:center;padding:20px 25px;display:flex}.header-left{align-items:center;gap:12px;display:flex}.status-indicator{background:#444;border-radius:50%;width:10px;height:10px}.status-indicator.pulse{background:#f36;animation:2s ease-in-out infinite pulse;box-shadow:0 0 10px #f36}@keyframes pulse{0%{opacity:1;transform:scale(.9)}50%{opacity:.6;transform:scale(1.4)}to{opacity:1;transform:scale(.9)}}.tile-header h3{letter-spacing:.5px;margin:0;font-size:1.1rem;font-weight:500}.control-btn{border:1px solid var(--border-glass);cursor:pointer;color:#fff;background:#ffffff0d;border-radius:12px;padding:8px 12px;font-size:1.1rem;transition:all .3s}.control-btn:hover{background:#ffffff1a}.control-btn.muted{color:#f36}.video-container{aspect-ratio:16/9;background:#000;flex:1;position:relative;overflow:hidden}.video-feed{object-fit:contain;width:100%;height:100%}.offline-overlay{z-index:5;background:linear-gradient(135deg,#111,#0a0a0c);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.offline-content{text-align:center;color:var(--text-muted)}.offline-content .icon{opacity:.5;margin-bottom:15px;font-size:3rem;display:block}.offline-content p{letter-spacing:1.5px;text-transform:uppercase;font-size:1rem}.remote-overlay{opacity:0;z-index:10;background:linear-gradient(#0000,#000000e6);justify-content:center;gap:15px;padding:20px;transition:all .3s;display:flex;position:absolute;bottom:0;left:0;right:0;transform:translateY(10px)}.camera-tile:hover .remote-overlay{opacity:1;transform:translateY(0)}.remote-btn{cursor:pointer;text-transform:uppercase;letter-spacing:1px;border:none;border-radius:30px;padding:10px 24px;font-size:.9rem;font-weight:600;transition:all .3s}.remote-btn.start{color:var(--primary);background:#00ff8826;border:1px solid #00ff884d}.remote-btn.start:hover{background:var(--primary);color:#000;box-shadow:0 0 20px #0f86}.remote-btn.stop{color:#f36;background:#ff33661a;border:1px solid #ff33664d}.remote-btn.stop:hover{color:#fff;background:#f36;box-shadow:0 0 20px #f366}.no-cameras{height:400px;color:var(--text-muted);flex-direction:column;grid-column:1/-1;justify-content:center;align-items:center;display:flex}.empty-box{border:2px dashed #ffffff1a;border-radius:16px;width:60px;height:60px;margin-bottom:20px;animation:10s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}