.online-help[data-v-d2b9f4d2]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:calc(100vh - 150px);padding:10px}.online-help.fullscreen[data-v-d2b9f4d2]{height:100vh;padding:0;background:#000}.online-help.fullscreen .main-content[data-v-d2b9f4d2]{height:100%}.online-help.fullscreen .video-area[data-v-d2b9f4d2]{border-radius:0;-webkit-box-shadow:none;box-shadow:none}.online-help.fullscreen .grid-container[data-v-d2b9f4d2]{min-height:100%}.fullscreen-exit[data-v-d2b9f4d2]{position:absolute;top:10px;right:10px;z-index:200;background:rgba(0,0,0,.6);color:#fff;padding:8px 16px;border-radius:4px;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;font-size:13px;-webkit-transition:background .2s;transition:background .2s}.fullscreen-exit[data-v-d2b9f4d2]:hover{background:rgba(64,158,255,.8)}.toolbar[data-v-d2b9f4d2]{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:10px 15px;background:#fff;border-radius:4px;margin-bottom:10px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.1);box-shadow:0 1px 3px rgba(0,0,0,.1)}.toolbar-left[data-v-d2b9f4d2],.toolbar[data-v-d2b9f4d2]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.main-content[data-v-d2b9f4d2]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;gap:10px;min-height:0}.port-list[data-v-d2b9f4d2]{width:220px;min-width:220px;background:#fff;border-radius:4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.1);box-shadow:0 1px 3px rgba(0,0,0,.1)}.port-list-header[data-v-d2b9f4d2]{padding:12px 15px;font-weight:700;font-size:14px;border-bottom:1px solid #ebeef5;background:#fafafa;border-radius:4px 4px 0 0}.port-list-body[data-v-d2b9f4d2]{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:auto;padding:5px}.port-item[data-v-d2b9f4d2]{padding:10px 12px;cursor:pointer;border-radius:4px;margin-bottom:4px;-webkit-transition:all .2s;transition:all .2s;border:1px solid transparent}.port-item[data-v-d2b9f4d2]:hover{background:#f0f7ff;border-color:#d0e3ff}.port-item.active[data-v-d2b9f4d2]{background:#ecf5ff;border-color:#409eff}.port-item-name[data-v-d2b9f4d2]{font-size:14px;font-weight:500;margin-bottom:4px}.port-item-name i[data-v-d2b9f4d2]{margin-right:5px}.port-item-info[data-v-d2b9f4d2]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:12px}.port-type[data-v-d2b9f4d2]{padding:1px 6px;border-radius:3px;font-size:11px}.type-in[data-v-d2b9f4d2]{background:#e1f3d8;color:#67c23a}.type-out[data-v-d2b9f4d2]{background:#fde2e2;color:#f56c6c}.port-status[data-v-d2b9f4d2]{color:#999}.port-status.online[data-v-d2b9f4d2]{color:#67c23a}.no-data[data-v-d2b9f4d2]{text-align:center;color:#999;padding:30px 0;font-size:13px}.video-area[data-v-d2b9f4d2]{-webkit-box-flex:1;-ms-flex:1;flex:1;background:#fff;border-radius:4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.1);box-shadow:0 1px 3px rgba(0,0,0,.1);position:relative}.video-placeholder[data-v-d2b9f4d2]{cursor:pointer}.placeholder-icon[data-v-d2b9f4d2]{position:relative;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}.placeholder-icon i[data-v-d2b9f4d2]{font-size:56px;color:#409eff;z-index:1}.pulse-ring[data-v-d2b9f4d2]{position:absolute;width:80px;height:80px;border:2px solid rgba(64,158,255,.4);border-radius:50%;-webkit-animation:pulse-d2b9f4d2 2s ease-out infinite;animation:pulse-d2b9f4d2 2s ease-out infinite}@-webkit-keyframes pulse-d2b9f4d2{0%{-webkit-transform:scale(.8);transform:scale(.8);opacity:1}to{-webkit-transform:scale(1.8);transform:scale(1.8);opacity:0}}@keyframes pulse-d2b9f4d2{0%{-webkit-transform:scale(.8);transform:scale(.8);opacity:1}to{-webkit-transform:scale(1.8);transform:scale(1.8);opacity:0}}.spinner-ring[data-v-d2b9f4d2]{width:40px;height:40px;border:3px solid rgba(64,158,255,.2);border-top-color:#409eff;border-radius:50%;-webkit-animation:spin-d2b9f4d2 .8s linear infinite;animation:spin-d2b9f4d2 .8s linear infinite}@-webkit-keyframes spin-d2b9f4d2{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin-d2b9f4d2{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.video-placeholder span[data-v-d2b9f4d2]{color:#999;font-size:14px}.loading-spinner span[data-v-d2b9f4d2]{color:#ccc;font-size:13px}.grid-container[data-v-d2b9f4d2]{-webkit-box-flex:1;-ms-flex:1;flex:1;display:grid;gap:2px;background:#000;padding:2px;min-height:400px;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch}.grid-cell[data-v-d2b9f4d2]{position:relative;background:#1a1a2e;border:2px solid transparent;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden;-webkit-transition:border-color .2s;transition:border-color .2s}.grid-cell.active[data-v-d2b9f4d2]{border-color:#409eff}.grid-cell.drag-over[data-v-d2b9f4d2]{border-color:#67c23a;background:rgba(103,194,58,.1)}.grid-cell.enlarged[data-v-d2b9f4d2]{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;border-color:#e6a23c}.cell-header[data-v-d2b9f4d2]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:4px 8px;background:rgba(0,0,0,.6);font-size:12px;color:#ccc;z-index:2}.cell-title[data-v-d2b9f4d2]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell-mode-tag[data-v-d2b9f4d2]{font-size:10px;padding:1px 6px;border-radius:3px;background:#ecf5ff;color:#409eff;margin-left:6px}.cell-actions i[data-v-d2b9f4d2]{cursor:pointer;color:#999;padding:2px 4px;font-size:14px}.cell-actions i[data-v-d2b9f4d2]:hover{color:#409eff}.cell-actions i.el-icon-close[data-v-d2b9f4d2]:hover{color:#f56c6c}.cell-video[data-v-d2b9f4d2]{-webkit-box-flex:1;-ms-flex:1;flex:1;position:relative;overflow:hidden}.cell-video .video-image[data-v-d2b9f4d2]{position:absolute;top:50%;left:50%;width:100%;height:100%;-o-object-fit:fill;object-fit:fill;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:#000}.fps-badge[data-v-d2b9f4d2]{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.6);color:#0f0;font-size:11px;padding:1px 5px;border-radius:3px;font-family:monospace;z-index:2;pointer-events:none}.notice-bar[data-v-d2b9f4d2]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:-webkit-gradient(linear,left top,right top,from(#e6f7ff),color-stop(#bae7ff),to(#e6f7ff));background:linear-gradient(90deg,#e6f7ff,#bae7ff,#e6f7ff);background-size:200% 100%;-webkit-animation:noticeShimmer-d2b9f4d2 3s linear infinite;animation:noticeShimmer-d2b9f4d2 3s linear infinite;padding:3px 8px;min-height:22px;font-size:12px;color:#1890ff;white-space:nowrap;overflow:hidden;border-top:1px solid #91d5ff;z-index:2;-ms-flex-negative:0;flex-shrink:0}.notice-bar i[data-v-d2b9f4d2]{margin-right:4px;-ms-flex-negative:0;flex-shrink:0}.notice-text[data-v-d2b9f4d2]{overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:100%}@-webkit-keyframes noticeShimmer-d2b9f4d2{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes noticeShimmer-d2b9f4d2{0%{background-position:200% 0}to{background-position:-200% 0}}.notice-flash[data-v-d2b9f4d2]{-webkit-animation:noticeFlash-d2b9f4d2 .6s ease!important;animation:noticeFlash-d2b9f4d2 .6s ease!important}@-webkit-keyframes noticeFlash-d2b9f4d2{0%{background-color:#fff3cd;-webkit-transform:scale(1);transform:scale(1)}30%{background-color:#ffc107;-webkit-transform:scale(1.02);transform:scale(1.02)}60%{background-color:#fff3cd;-webkit-transform:scale(1);transform:scale(1)}80%{background-color:#ffc107}to{background-color:transparent;-webkit-transform:scale(1);transform:scale(1)}}@keyframes noticeFlash-d2b9f4d2{0%{background-color:#fff3cd;-webkit-transform:scale(1);transform:scale(1)}30%{background-color:#ffc107;-webkit-transform:scale(1.02);transform:scale(1.02)}60%{background-color:#fff3cd;-webkit-transform:scale(1);transform:scale(1)}80%{background-color:#ffc107}to{background-color:transparent;-webkit-transform:scale(1);transform:scale(1)}}.cell-video .loading-spinner[data-v-d2b9f4d2],.cell-video .video-placeholder[data-v-d2b9f4d2]{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;font-size:12px;gap:8px}.cell-video .placeholder-icon i[data-v-d2b9f4d2]{font-size:36px}.cell-video .pulse-ring[data-v-d2b9f4d2]{width:50px;height:50px}.cell-video .spinner-ring[data-v-d2b9f4d2]{width:30px;height:30px;border-width:2px}.drop-placeholder[data-v-d2b9f4d2]{cursor:default;border:2px dashed hsla(0,0%,100%,.2);margin:10px;border-radius:4px}.drop-placeholder i[data-v-d2b9f4d2]{font-size:28px;color:hsla(0,0%,100%,.3)}.drop-placeholder span[data-v-d2b9f4d2]{color:hsla(0,0%,100%,.3);font-size:12px}.operation-area[data-v-d2b9f4d2]{padding:12px 15px;border-top:1px solid #ebeef5;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:15px}.op-group[data-v-d2b9f4d2]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px}.op-group label[data-v-d2b9f4d2]{font-size:13px;color:#606266;white-space:nowrap}