*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#0f1419;color:#e4e6eb;overflow:hidden}.app-container{display:flex;height:100vh}.sidebar{width:320px;background:#1a1f2e;border-right:1px solid #2a3441;display:flex;flex-direction:column;overflow:hidden}.sidebar-header{padding:20px;border-bottom:1px solid #2a3441;display:flex;justify-content:space-between;align-items:center}.sidebar-header h2{font-size:18px;font-weight:600;color:#e4e6eb}.refresh-btn{background:#2a3441;border:none;color:#8b95a5;padding:8px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.refresh-btn:hover{background:#3a4451;color:#e4e6eb}.search-box{padding:15px;border-bottom:1px solid #2a3441}.search-box input{width:100%;padding:10px 12px;background:#0f1419;border:1px solid #2a3441;border-radius:6px;color:#e4e6eb;font-size:14px}.search-box input:focus{outline:none;border-color:#1d9bf0}.device-list{flex:1;overflow-y:auto;padding:10px}.device-item{background:#0f1419;border:1px solid #2a3441;border-radius:8px;padding:12px;margin-bottom:10px;cursor:pointer;transition:all .2s}.device-item:hover{border-color:#1d9bf0;background:#1a1f2e}.device-item.online{border-left:3px solid #00ba7c}.device-item.offline{border-left:3px solid #536471}.device-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.device-imei{font-weight:600;font-size:14px;color:#e4e6eb}.device-status{font-size:12px;padding:2px 8px;border-radius:4px;background:#536471;color:#fff}.device-status.online{background:#00ba7c}.device-info{font-size:12px;color:#8b95a5;margin-bottom:8px}.device-channels{display:flex;gap:8px;flex-wrap:wrap}.channel-checkbox{display:flex;align-items:center;gap:4px;font-size:12px;color:#8b95a5;cursor:pointer;-webkit-user-select:none;user-select:none}.channel-checkbox input[type=checkbox]{cursor:pointer;accent-color:#1d9bf0}.channel-checkbox:hover{color:#e4e6eb}.loading{text-align:center;padding:40px 20px;color:#8b95a5;font-size:14px}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.main-header{padding:20px;border-bottom:1px solid #2a3441;display:flex;justify-content:space-between;align-items:center;background:#1a1f2e}.main-header h1{font-size:20px;font-weight:600}.view-controls{display:flex;gap:8px}.grid-btn{background:#2a3441;border:none;color:#8b95a5;padding:8px 12px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.grid-btn:hover{background:#3a4451;color:#e4e6eb}.grid-btn.active{background:#1d9bf0;color:#fff}.video-grid{flex:1;padding:20px;display:grid;gap:15px;overflow-y:auto}.video-grid.grid-1x1{grid-template-columns:1fr}.video-grid.grid-2x2{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(300px,1fr)}.video-grid.grid-3x3{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(250px,1fr)}.video-container{background:#000;border-radius:8px;overflow:hidden;position:relative;border:2px solid #2a3441;transition:border-color .2s}.video-container:hover{border-color:#1d9bf0}.video-container video{width:100%;height:100%;object-fit:contain;background:#000}.video-overlay{position:absolute;top:0;left:0;right:0;padding:12px;background:linear-gradient(to bottom,rgba(0,0,0,.8),transparent);z-index:10}.video-title{font-size:14px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}.video-subtitle{font-size:12px;color:#e4e6eb;margin-top:2px;text-shadow:0 1px 3px rgba(0,0,0,.5)}.video-controls{position:absolute;bottom:0;left:0;right:0;padding:12px;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);display:flex;gap:8px;z-index:10;opacity:0;transition:opacity .2s}.video-container:hover .video-controls{opacity:1}.video-btn{background:#fff3;border:none;color:#fff;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;transition:background .2s}.video-btn:hover{background:#ffffff4d}.video-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#8b95a5;background:#0f1419}.video-placeholder svg{width:64px;height:64px;margin-bottom:12px;opacity:.3}.video-placeholder p{font-size:14px}.empty-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#8b95a5}.empty-state svg{width:80px;height:80px;margin-bottom:16px;opacity:.3}.empty-state h3{font-size:18px;margin-bottom:8px;color:#e4e6eb}.empty-state p{font-size:14px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0f1419}::-webkit-scrollbar-thumb{background:#2a3441;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#3a4451}@media (max-width: 768px){.sidebar{width:280px}.video-grid.grid-2x2,.video-grid.grid-3x3{grid-template-columns:1fr}}