:root{color:#1f1f1f;background:#f5f7fa;font-family:Inter,PingFang SC,Microsoft YaHei,Arial,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#root{width:100%;min-width:0;min-height:100%;margin:0}body{min-height:100vh;background:#f5f7fa}button,input,select,textarea{font:inherit}.ai-opc-demo-page{--demo-bg: #030914;--demo-panel: #07111f;--demo-panel-strong: #0a1727;--demo-border: #193c55;--demo-muted: #6f8da0;--demo-text: #e5f6ff;min-height:100vh;height:100vh;padding:20px 22px 14px;overflow:hidden;color:var(--demo-text);background:var(--demo-bg);font-family:Inter,PingFang SC,Microsoft YaHei,sans-serif}.ai-opc-demo-page,.ai-opc-demo-page *{letter-spacing:0!important}.demo-topbar,.demo-metrics-row,.demo-workspace,.demo-footer{width:100%;max-width:1920px;margin-inline:auto}.demo-topbar{display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr);align-items:center;min-height:46px;padding-bottom:18px;border-bottom:1px solid #143148}.demo-brand{display:flex;align-items:center;gap:11px}.demo-brand-mark{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #3b839f;border-radius:9px;color:#8bf1ff;background:#0a2436;box-shadow:0 0 20px #41d8ef2e}.demo-brand div,.demo-metric-label,.demo-node-main,.demo-log-copy,.demo-detail-heading div,.demo-system-line{display:grid}.demo-brand div{gap:1px}.demo-brand strong{color:#e8fbff;font-size:18px;letter-spacing:2px}.demo-brand small{color:#68899d;font-size:9px;letter-spacing:1.8px}.demo-topbar-center{display:flex;align-items:center;gap:9px;color:#83a6b9;font-size:10px;letter-spacing:1.5px;white-space:nowrap}.demo-live-dot{width:7px;height:7px;border-radius:50%;background:#64f4b4;box-shadow:0 0 12px #64f4b4}.demo-separator{width:1px;height:13px;background:#254960}.demo-topbar-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}.demo-topbar-actions .ant-btn{color:#88a8b8}.demo-language-switch{display:inline-flex;align-items:center;padding:2px;border:1px solid #21475e;background:#081b2a}.demo-language-switch button{min-width:30px;height:22px;padding:0 6px;border:0;color:#63879a;background:transparent;font-family:inherit;font-size:9px;letter-spacing:.3px;cursor:pointer}.demo-language-switch button:hover,.demo-language-switch button.is-active{color:#d8f8ff;background:#16425a}.demo-mock-tag{margin:0;border-color:#55704d;color:#b6d89b;background:#14271f;font-size:10px;letter-spacing:1px}.demo-runtime-badge{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:0 7px;border:1px solid #28586b;color:#89afbd;background:#0a1c29;font-size:9px;white-space:nowrap}.demo-runtime-badge i,.demo-live-text i{width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}.demo-runtime-badge strong{color:currentColor;font-size:9px;font-weight:600}.demo-runtime-badge.state-loading,.demo-live-text.state-loading,.demo-system-line.state-loading,.demo-footer .state-loading{color:#4dc9ff}.demo-runtime-badge.state-operational,.demo-live-text.state-operational,.demo-system-line.state-operational,.demo-footer .state-operational{color:#64f4b4}.demo-runtime-badge.state-attention,.demo-live-text.state-attention,.demo-system-line.state-attention,.demo-footer .state-attention{color:#ffc766}.demo-runtime-badge.state-critical,.demo-runtime-badge.state-unavailable,.demo-live-text.state-critical,.demo-live-text.state-unavailable,.demo-system-line.state-critical,.demo-system-line.state-unavailable,.demo-footer .state-critical,.demo-footer .state-unavailable{color:#ff6f7d}.demo-metrics-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:12px 0}.demo-metric-card,.demo-panel,.demo-scene-panel{border:1px solid var(--demo-border);background:var(--demo-panel);box-shadow:inset 0 1px #72cce60d,0 12px 34px #0000002e}.demo-metric-card{position:relative;min-height:88px;padding:11px 16px;overflow:hidden}.demo-metric-card.tone-green{color:#64f4b4}.demo-metric-card.tone-cyan{color:#4dc9ff}.demo-metric-card.tone-violet{color:#b393ff}.demo-metric-card.tone-amber{color:#ffc766}.demo-metric-label{grid-template-columns:auto 1fr;align-items:center;gap:7px;color:#7997a8;font-size:10px;letter-spacing:1px}.demo-metric-card strong{display:block;margin-top:6px;color:currentColor;font-family:Inter,SFMono-Regular,monospace;font-size:25px;letter-spacing:0;line-height:1}.demo-metric-delta{display:block;margin-top:6px;color:#608093;font-size:10px;letter-spacing:.7px}.demo-workspace{display:grid;grid-template-columns:minmax(270px,.78fr) minmax(510px,1.8fr) minmax(290px,.9fr);gap:12px;height:calc(100vh - 239px);min-height:0}.demo-panel{min-width:0;padding:14px}.demo-panel-title{display:flex;align-items:center;justify-content:space-between;min-height:24px;margin-bottom:13px;color:#86a8b9;font-size:10px;letter-spacing:1.1px}.demo-panel-title>span:first-child{display:inline-flex;align-items:center;gap:7px;color:#a3c3d1}.demo-panel-title .ant-badge-status-text,.demo-panel-title .ant-badge-color{color:#64f4b4;font-size:9px;letter-spacing:.8px}.demo-left-panel{display:flex;flex-direction:column;min-height:0}.demo-node-head,.demo-node-row{display:grid;grid-template-columns:10px minmax(0,1.42fr) .58fr .5fr .72fr;column-gap:7px;align-items:center}.demo-node-head{padding:0 9px 8px;color:#55768b;font-size:9px;letter-spacing:.8px}.demo-node-head span:nth-child(n+2){text-align:right}.demo-node-head span:nth-child(2){text-align:left}.demo-node-list{display:grid;flex:1;gap:3px;min-height:0;overflow-y:auto}.demo-node-row{width:100%;min-height:56px;padding:8px 9px;border:1px solid transparent;color:#a7c5d3;background:transparent;text-align:left;cursor:pointer}.demo-node-row:hover,.demo-node-row.is-active{border-color:#205775;background:#0b1e30}.demo-node-status{width:6px;height:6px;margin-left:1px;border-radius:50%}.demo-node-main{min-width:0;gap:3px}.demo-node-main strong{overflow:hidden;color:#d5edf4;font-size:11px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.demo-node-main small,.demo-node-users,.demo-node-state{overflow:hidden;color:#5f8195;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.demo-node-revenue,.demo-node-users,.demo-node-state{text-align:right}.demo-node-revenue{color:#86e8d0;font-family:Inter,monospace;font-size:10px}.demo-node-state{font-size:8px;letter-spacing:.5px}.demo-left-footer{display:flex;justify-content:space-between;gap:7px;margin-top:auto;padding:13px 7px 0;border-top:1px solid #153448;color:#5d7d8e;font-size:9px}.status-pip,.legend-dot{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%}.status-pip.green,.legend-dot.green{background:#64f4b4;box-shadow:0 0 7px #64f4b4}.legend-dot.cyan{background:#4dc9ff;box-shadow:0 0 7px #4dc9ff}.legend-dot.amber{background:#ffc766;box-shadow:0 0 7px #ffc766}.legend-dot.violet{background:#b393ff;box-shadow:0 0 7px #b393ff}.demo-scene-panel{position:relative;min-width:0;min-height:0;overflow:hidden;background:#040b16}.demo-scene-panel:before,.demo-scene-panel:after{position:absolute;z-index:2;width:16px;height:16px;border-color:#4ecce7;content:"";pointer-events:none}.demo-scene-panel:before{top:12px;left:12px;border-top:1px solid;border-left:1px solid}.demo-scene-panel:after{right:12px;bottom:12px;border-right:1px solid;border-bottom:1px solid}.ai-opc-global-scene{position:absolute;inset:0;min-height:0}.ai-opc-global-scene canvas{display:block;width:100%;height:100%}.demo-scene-label{position:absolute;z-index:3;top:19px;left:21px;display:grid;gap:5px;pointer-events:none}.scene-label-kicker{display:inline-flex;align-items:center;gap:6px;color:#54cfe5;font-size:9px;letter-spacing:1.3px}.demo-scene-label strong{color:#d8f6ff;font-size:18px;letter-spacing:2px}.demo-scene-label small{color:#628296;font-size:9px;letter-spacing:.7px}.demo-scene-label .demo-scene-value{max-width:430px;color:#8daeb8;font-size:10px;line-height:1.35}.demo-business-loop{display:inline-flex;align-items:center;gap:6px;margin-top:2px;color:#5e9aab;font-size:8px;letter-spacing:1px}.demo-business-loop>span{display:inline-flex;align-items:center;gap:6px}.demo-business-loop b{color:#9dd7e3;font-weight:500}.demo-business-loop em{color:#dff9ff;font-family:Inter,monospace;font-size:9px;font-style:normal;font-weight:700}.demo-business-loop i{color:#3d7186;font-style:normal}.demo-core-overlay{position:absolute;z-index:3;top:50%;left:50%;display:grid;justify-items:center;gap:5px;width:112px;transform:translate(-50%,-50%);pointer-events:none}.demo-core-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border:1px solid #65e8ff;border-radius:50%;color:#d4fbff;background:#092237;box-shadow:0 0 28px #4cdef36b,inset 0 0 20px #5de9ff33}.demo-core-overlay strong{color:#c6f5ff;font-size:10px;letter-spacing:1.3px;line-height:1.25;text-align:center}.demo-core-overlay small{color:#63e5c4;font-size:8px;letter-spacing:1px}.demo-core-ring{position:absolute;top:8px;width:105px;height:105px;border:1px solid #3999b1;border-radius:50%;opacity:.45}.demo-core-ring.ring-one{transform:rotateX(70deg) rotate(18deg)}.demo-core-ring.ring-two{border-color:#8668d8;transform:rotateY(68deg) rotate(-26deg)}.demo-scene-legend{position:absolute;z-index:3;right:22px;bottom:51px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:11px;color:#6e8a9a;font-size:9px;pointer-events:none}.demo-scene-foot{position:absolute;z-index:3;right:20px;bottom:17px;left:20px;display:flex;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid #17394f;color:#5e7f91;font-size:9px;letter-spacing:.8px;pointer-events:none}.demo-scene-foot strong{overflow:hidden;max-width:132px;color:#96dced;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.demo-scene-foot span{display:inline-flex;align-items:center;gap:4px;min-width:0;white-space:nowrap}.demo-scene-foot span:nth-child(2){justify-content:center}.demo-scene-foot span:last-child{justify-content:flex-end}.demo-right-stack{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;min-width:0;min-height:0}.demo-node-detail{background:var(--demo-panel-strong)}.demo-live-text{display:inline-flex;align-items:center;gap:5px;color:#64f4b4;font-size:9px}.demo-live-text i{flex:0 0 auto}.demo-detail-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 0 13px;border-bottom:1px solid #17394f}.demo-detail-heading div{gap:4px}.demo-detail-heading strong{color:#e0f4f8;font-size:18px}.demo-detail-heading small{color:#648699;font-size:9px;letter-spacing:.5px}.demo-detail-heading div>span{overflow:hidden;max-width:230px;color:#8cb2c2;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.demo-detail-state{display:grid;flex:0 0 auto;gap:4px;justify-items:end;font-size:9px;text-align:right}.demo-detail-state b{font-weight:600}.demo-detail-state small{color:#7597a6;font-size:8px;white-space:nowrap}.demo-detail-revenue{display:grid;gap:5px;padding:15px 0}.demo-detail-revenue span,.demo-detail-grid span,.demo-load-bar span{color:#5e7e91;font-size:9px;letter-spacing:.7px}.demo-detail-revenue strong{color:#6cf3cf;font-family:Inter,monospace;font-size:29px;line-height:1}.demo-detail-revenue small{color:#6790a1;font-size:9px}.demo-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:12px 0;border-top:1px solid #17394f;border-bottom:1px solid #17394f}.demo-detail-grid div{display:grid;gap:5px}.demo-detail-grid strong{color:#b9dce6;font-family:Inter,monospace;font-size:14px}.demo-load-bar{display:grid;gap:7px;padding-top:14px}.demo-load-bar>div{display:flex;justify-content:space-between;gap:10px}.demo-load-bar strong{color:#afd5df;font-size:10px}.demo-load-bar .ant-progress{line-height:1}.demo-load-bar .ant-progress-inner{border-radius:1px;background:#132536}.demo-load-bar .ant-progress-bg{border-radius:1px}.demo-log-panel{min-height:0;overflow:hidden}.demo-log-count{color:#5f8394;font-size:9px}.demo-log-list{display:grid;gap:2px;max-height:392px;overflow:hidden}.demo-log-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:7px;min-height:48px;padding:5px 0;border-bottom:1px solid #102b3c}.demo-log-row:last-child{border-bottom:0}.demo-log-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid #22506a;border-radius:5px;color:#70cce5;background:#0b2031}.demo-log-icon.log-revenue,.demo-log-value.log-revenue{color:#64f4b4}.demo-log-icon.log-agent,.demo-log-value.log-agent{color:#b393ff}.demo-log-icon.log-signal,.demo-log-value.log-signal{color:#4dc9ff}.demo-log-icon.log-task,.demo-log-value.log-task,.demo-log-icon.log-sealroute,.demo-log-value.log-sealroute{color:#ffc766}.demo-log-copy{min-width:0;gap:4px}.demo-log-copy small{overflow:hidden;color:#557789;font-size:8px;text-overflow:ellipsis;white-space:nowrap}.demo-log-copy strong{overflow:hidden;color:#a6c6d1;font-size:10px;font-weight:500;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.demo-log-value{color:#6b96a8;font-family:Inter,monospace;font-size:9px}.demo-system-panel{display:grid;gap:9px;padding-block:12px}.demo-system-line{grid-template-columns:17px minmax(0,1fr) auto;align-items:center;gap:6px;color:#6d8da0;font-size:9px}.demo-system-line svg{color:#64f4b4}.demo-system-line strong{color:#64f4b4;font-size:9px;letter-spacing:.8px}.demo-system-line.state-loading svg,.demo-system-line.state-operational svg,.demo-system-line.state-attention svg,.demo-system-line.state-critical svg,.demo-system-line.state-unavailable svg,.demo-system-line.state-loading strong,.demo-system-line.state-operational strong,.demo-system-line.state-attention strong,.demo-system-line.state-critical strong,.demo-system-line.state-unavailable strong{color:currentColor}.demo-footer{display:flex;justify-content:space-between;gap:18px;padding-top:12px;color:#4f7184;font-size:9px;letter-spacing:.5px}.demo-footer span{display:inline-flex;align-items:center;gap:5px}.demo-footer span:last-child{color:#64f4b4}.demo-footer span.state-loading{color:#4dc9ff}.demo-footer span.state-operational{color:#64f4b4}.demo-footer span.state-attention{color:#ffc766}.demo-footer span.state-critical,.demo-footer span.state-unavailable{color:#ff6f7d}.demo-core-overlay.state-attention .demo-core-icon{border-color:#ffc766;color:#fff0bd;box-shadow:0 0 28px #ffc76657,inset 0 0 20px #ffc76624}.demo-core-overlay.state-critical .demo-core-icon,.demo-core-overlay.state-unavailable .demo-core-icon{border-color:#ff6f7d;color:#ffd4d8;box-shadow:0 0 28px #ff6f7d57,inset 0 0 20px #ff6f7d24}.demo-core-overlay.state-attention small{color:#ffc766}.demo-core-overlay.state-critical small,.demo-core-overlay.state-unavailable small{color:#ff6f7d}@media(min-width:1101px)and (max-height:760px){.ai-opc-demo-page{padding:12px 22px 8px}.demo-topbar{min-height:40px;padding-bottom:8px}.demo-metrics-row{gap:12px;padding:8px 0}.demo-metric-card{min-height:70px;padding:8px 14px}.demo-metric-card strong{margin-top:5px;font-size:22px}.demo-metric-delta{margin-top:4px}.demo-workspace{height:calc(100vh - 191px)}.demo-panel{padding:10px 12px}.demo-panel-title{margin-bottom:8px}.demo-node-head{padding:0 7px 5px}.demo-node-head,.demo-node-row{grid-template-columns:10px minmax(0,1.22fr) .58fr .5fr 1fr}.demo-node-list{gap:2px}.demo-node-row{min-height:42px;padding:5px 7px}.demo-left-footer{padding:8px 5px 0}.demo-detail-heading{padding:3px 0 5px}.demo-node-detail{padding-top:6px;padding-bottom:6px}.demo-node-detail .demo-panel-title{margin-bottom:3px}.demo-detail-revenue{gap:1px;padding:5px 0}.demo-detail-revenue strong{font-size:23px}.demo-detail-grid{padding:4px 0}.demo-load-bar{gap:2px;padding-top:3px}.demo-log-row{min-height:38px;padding:3px 0}.demo-log-copy small{font-size:9px}.demo-log-copy strong{font-size:10px}.demo-system-panel{gap:5px;padding-block:6px}.demo-footer{padding-top:8px}}@media(max-width:1100px){.demo-workspace{grid-template-columns:minmax(230px,.72fr) minmax(460px,1.5fr)}.demo-right-stack{grid-column:1 / -1;grid-template-columns:minmax(280px,.85fr) minmax(350px,1.25fr) minmax(200px,.7fr);grid-template-rows:auto}}@media(max-width:820px){.ai-opc-demo-page{padding:14px 12px 12px;height:auto;overflow:visible}.demo-topbar{grid-template-columns:1fr auto;row-gap:14px}.demo-topbar-center{grid-column:1 / -1;grid-row:2;justify-content:flex-start;overflow:hidden}.demo-metrics-row{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-workspace{grid-template-columns:1fr;height:auto;min-height:0}.demo-scene-panel{min-height:510px;order:-1}.ai-opc-global-scene{min-height:510px}.demo-right-stack{grid-column:auto;grid-template-columns:1fr;grid-template-rows:auto}.demo-log-list{max-height:none}.demo-footer{align-items:flex-start;flex-direction:column;gap:7px}}@media(max-width:520px){.demo-metrics-row{grid-template-columns:1fr}.demo-metric-card strong{font-size:25px}.demo-node-head,.demo-node-row{grid-template-columns:10px minmax(0,1.4fr) .62fr .5fr}.demo-node-head span:last-child,.demo-node-state{display:none}.demo-node-head span:nth-child(2){text-align:left}.demo-scene-label strong{font-size:15px}.demo-scene-label small{max-width:180px;line-height:1.4}.demo-scene-legend{right:16px;bottom:49px;max-width:160px;gap:6px}.demo-scene-foot{right:14px;left:14px;font-size:8px}.demo-scene-foot span:nth-child(3){display:none}}@media(max-height:800px)and (min-width:1101px){.demo-node-detail{padding:10px 12px}.demo-node-detail .demo-panel-title{margin-bottom:7px}.demo-detail-heading{padding:5px 0 8px}.demo-detail-heading strong{font-size:16px}.demo-detail-revenue{padding:9px 0}.demo-detail-revenue strong{font-size:24px}.demo-detail-grid{padding:8px 0}.demo-load-bar{gap:5px;padding-top:8px}.demo-system-panel{gap:6px;padding-block:8px}.demo-log-row{min-height:41px}}