.video-container{min-height:82vh;background-color:#fff;color:#333;padding:16px}.toolbar{height:48px;background-color:#e4e3e3;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:0 16px;border-bottom:1px solid #d1d5db}.toolbar,.toolbar .toolbar-left,.toolbar .toolbar-right{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.toolbar .toolbar-left,.toolbar .toolbar-right{gap:8px}.view-controls{gap:8px}.main-content,.view-controls{display:-webkit-box;display:-ms-flexbox;display:flex}.main-content{-webkit-box-orient:horizontal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:calc(85vh - 48px)}.control-panel,.main-content{background-color:#f9fafb;-webkit-box-direction:normal}.control-panel{-webkit-box-flex:2;-ms-flex:2;flex:2;border-right:1px solid #374151;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;height:100%}.control-panel .ptz-control{padding:8px}.control-panel .ptz-control h3{font-size:14px;font-weight:500;margin-bottom:16px}.control-panel .ptz-control .direction-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}.control-panel .ptz-control .direction-grid .direction-btn{width:40px;height:40px;background-color:#e5e7eb;border:1px solid #d1d5db;color:#1f2937;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;cursor:pointer}.control-panel .ptz-control .direction-grid .direction-btn:hover{background-color:#d1d5db}.control-panel .ptz-control .control-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px}.control-panel .ptz-control .control-group .control-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.control-panel .ptz-control .control-group .control-item span{font-size:14px}.control-panel .ptz-control .control-group .control-item .control-buttons{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px}.device-tree{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:16px;background-color:#fff;color:#333;border-top:1px solid #e5e7eb;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:var(--device-tree-height)}.device-tree,.device-tree .device-tree-header{display:-webkit-box;display:-ms-flexbox;display:flex}.device-tree .device-tree-header{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:16px;-ms-flex-negative:0;flex-shrink:0}.device-tree .device-tree-header h3{margin:0}.device-tree .device-tree-header .tree-controls{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px}.device-tree h3{margin-bottom:16px;-ms-flex-negative:0;flex-shrink:0}.device-tree .el-tree{overflow-y:auto;height:calc(100% - 40px)}.device-tree .el-table{margin-top:10px}.el-collapse{border:none}.el-collapse .el-collapse-item__header{background-color:#f0f2f5;padding:0 16px;font-weight:500}.el-collapse .el-collapse-item__content{padding:8px;will-change:height;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.el-collapse .el-collapse-item.is-active .el-collapse-item__header{border-bottom-color:transparent}.video-grid{-webkit-box-flex:8;-ms-flex:8;flex:8;padding:16px;display:grid;gap:8px}.video-grid.layout-1{grid-template-columns:1fr}.video-grid.layout-4{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.video-grid.layout-6{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}.video-grid.layout-9{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}.video-grid .video-item{background-color:#939c9b;color:#1f2937;position:relative;border:2px solid transparent}.video-grid .video-item .video-header{position:absolute;top:50%;left:50%;color:#fff;font-size:32px;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.video-grid .video-item .camera-name{position:absolute;top:8px;left:8px;color:#fff;font-size:14px;z-index:10;background-color:rgba(0,0,0,.5);padding:4px 8px;border-radius:4px;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.video-grid .video-item .video-timestamp{position:absolute;bottom:0;left:0;right:0;padding:8px;background:#606060;color:#fff}.video-grid .video-item .video-timestamp span{font-size:12px}.video-grid .video-item .player-container{width:100%;height:100%}input[type=range]{-webkit-appearance:none;width:128px;height:4px;background:#4b5563;border-radius:9999px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#3b82f6;border-radius:50%;cursor:pointer}input[type=range]::-moz-range-thumb{width:16px;height:16px;background:#3b82f6;border-radius:50%;cursor:pointer;border:none}input[type=range]:focus{outline:none}:deep(.custom-tree-node).active-camera{color:#67c23a;font-weight:500}.direction-grid .el-button.is-active{background-color:#409eff;color:#fff}.direction-grid .el-button.is-active:hover{background-color:#66b1ff}.el-icon-video-camera{font-size:18px}.el-icon-video-camera.is-playing{color:#fe0000;-webkit-animation:pulse 1.5s infinite;animation:pulse 1.5s infinite}@-webkit-keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.ptz-control{padding:15px}.ptz-control.disabled{opacity:.6;pointer-events:none}.ptz-header{margin-bottom:10px;padding:5px 0;border-bottom:1px solid #eee}.ptz-header span{font-size:14px;color:#606266}.el-button.is-active{color:#409eff;border-color:#409eff}.el-button [class^=el-icon-]{margin-right:5px}