:root{--bg:#101417;--panel:rgba(20,27,33,.94);--line:rgba(156,187,202,.22);--muted:#aabcc6;--shadow:none}
body{background:#0b1015;font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;letter-spacing:0}
.app{background:none;padding:16px 22px;gap:12px;grid-template-rows:82px minmax(0,1fr) 58px}
.top{grid-template-columns:220px minmax(0,1fr) 360px}
.title-shell:before,.title-shell:after{display:none}.title-shell{border:0}h1{font-size:30px;font-weight:650;text-shadow:none}.cn-title{font-size:14px;font-weight:400;color:var(--muted);margin-top:9px}
.top-meta{font-size:12px;gap:8px}.logo{font-size:25px}.logo:before{box-shadow:none}
.glass{border-radius:6px;background:var(--panel);backdrop-filter:none}.command{grid-template-rows:118px minmax(0,1fr) 158px;gap:12px}
.kpi-row,.main-grid,.scenario-status{gap:12px}.kpi{text-align:left;padding:20px 24px;display:grid;grid-template-columns:62px 1fr;grid-template-rows:auto auto;column-gap:20px;align-content:center;border-bottom:2px solid currentColor}
.kpi .icon{grid-row:1/3;width:58px;height:58px;margin:0;float:none;border:0;border-radius:0;align-self:center}.kpi .icon:before{display:none}.ui-icon{width:100%;height:100%;background:currentColor;mask:var(--icon) center/contain no-repeat;display:inline-block}
.kpi h3{font-size:17px;font-weight:550;color:#d8e4eb}.kpi small{display:none}.kpi b{font-size:42px;margin-top:7px;font-weight:650;font-variant-numeric:tabular-nums}.kpi:after{width:110px;height:34px;opacity:.2}
.main-grid{grid-template-columns:minmax(0,1fr) 370px}.port-map{padding:18px;min-height:300px}.port-map:before{background:linear-gradient(180deg,rgba(4,12,18,.74),transparent 24%,transparent 80%,rgba(4,12,18,.6)),url("port-aerial.png") center/cover no-repeat;opacity:1;transition:transform .6s}
.port-map .yard,.port-map .water,.port-map .ship,.port-map .cranes,.port-map .pile,.port-map .belt-line{display:none}.map-title{font-size:17px}.map-weather{font-size:12px}.hotspot{min-width:0;padding:9px 12px;background:rgba(10,21,29,.92);border-color:#7eb4c3;box-shadow:0 5px 16px #0005}.hotspot>span:first-child{font-size:15px}.hotspot>span+span{font-size:12px;color:#c2d9e3}.hotspot:after{content:"";position:absolute;width:1px;height:28px;left:24px;top:100%;background:currentColor}.hotspot:nth-of-type(10){left:12%!important;top:38%!important}.hotspot:nth-of-type(11){left:38%!important;top:25%!important}.hotspot:nth-of-type(12){right:9%!important;top:23%!important}.hotspot.risk{left:57%!important;top:60%!important;cursor:pointer}.pulse{left:59%!important;top:79%!important;width:12px;height:12px;cursor:pointer}
.map-tools button{width:38px;height:36px;padding:8px;font-size:12px}.map-tools{bottom:12px;right:12px}.map-tools .ui-icon{width:18px;height:18px}.port-map.flat:before{transform:scale(1.15)}
.risk-panel{padding:14px;overflow:auto}.panel-head h2{font-size:18px}.panel-head button{font-size:12px}.risk-card{border-width:1px;border-left-width:3px;grid-template-columns:68px minmax(0,1fr);padding:10px;margin-bottom:10px;gap:10px}.risk-card h3{font-size:15px}.risk-card p{font-size:12px}.risk-meta{font-size:10px;gap:2px}.risk-meta b{font-size:11px}.badge{font-size:10px;padding:3px 6px}.thumb{height:76px}.risk-card .open{font-size:12px;background:color-mix(in srgb,var(--c) 22%,#121a20)}
.status-card{text-align:left;padding:14px 18px;display:grid;grid-template-columns:1fr 94px;grid-template-rows:auto 1fr auto;column-gap:12px;border-top:2px solid var(--s)}.status-card h3{font-size:18px;grid-column:1/-1}.status-card small{font-size:12px;margin-top:5px}.status-card .diagram{grid-column:2;grid-row:2/4;width:72px;height:66px;justify-self:end;background:none!important;border:0;margin:0;color:var(--s)}.status-card .diagram:after{display:none}.status{font-size:14px}.status:before{content:"";display:inline-block;width:6px;height:6px;background:var(--s);border-radius:50%;margin-right:7px}
.nav{box-shadow:none;background:#141c23;padding:5px;border-color:var(--line)}.nav button{background:transparent;font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;gap:10px}.nav button.active{background:#234450;color:#b4f4ee}.nav .ui-icon{width:20px;height:20px}
button{transition:background .18s,border-color .18s,transform .18s}button:hover{filter:brightness(1.16)}button:focus-visible{outline:2px solid #fff;outline-offset:3px}.status-card:hover,.kpi:hover{background:#20303a;transform:translateY(-2px)}
.incident{grid-template-rows:64px minmax(0,1fr)}.step{padding:10px 16px;border-radius:4px}.step b{font-size:24px}.step span{font-size:16px}.step small{font-size:12px}.workspace{grid-template-columns:minmax(0,1.12fr) minmax(0,.95fr) minmax(220px,.52fr);gap:12px}.evidence-panel,.assessment,.side-stack{padding:16px;overflow:auto}.evidence-panel h2,.assessment h2,.close-grid h2{font-size:21px;margin-bottom:14px}.big-video{height:auto;aspect-ratio:16/10;background-image:linear-gradient(0deg,#0003,transparent),url("belt-camera-feed.png");background-size:cover}.big-video:before{font-size:11px;z-index:2}.callout{left:auto;right:12px;top:43%;width:160px;padding:10px;font-size:16px}.callout span{font-size:12px}.scan-line{position:absolute;left:0;right:0;height:1px;background:#79eee6;box-shadow:0 0 15px #4bd8d6;animation:scan 6s linear infinite;opacity:.45;pointer-events:none}
.score{border:0;border-bottom:1px solid var(--line);padding:18px 0}.score span{display:block;margin-bottom:12px;font-size:13px;color:var(--muted)}.score b{font-size:52px}.score strong{font-size:27px}.reason,.recommend,.side-card{border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;padding:14px 0}.side-stack{background:#161e25}.side-card h3{font-size:17px}.side-card p,.alarm{font-size:14px}.reason p,.reason ul,.recommend li{font-size:14px;line-height:1.5}.fields{font-size:13px}.fusion-row{gap:7px}.fusion-card{padding:9px 8px;border-radius:4px}.fusion-card h3{font-size:12px}.fusion-card b{font-size:13px}.fusion-card span{font-size:11px}.primary{background:#dd4c4e}.secondary{background:#243b47}.action-row button{font-size:14px}
.scenarios{grid-template-columns:minmax(0,1fr) 350px;gap:16px}.scene{padding:18px;grid-template-rows:auto minmax(140px,1fr) 50px 40px;border-top:2px solid #729ba8;min-height:0}.scene h2{font-size:20px}.scene small{display:block;font-size:13px;line-height:1.4;max-width:95%;margin-top:6px}.scene-img{background-blend-mode:normal;min-height:130px}.scene-img:after{font-size:12px;padding:7px 10px;top:12px;right:12px}.scene-metrics b{font-size:24px}.scene-metrics span{font-size:11px}.value-panel{padding:18px;overflow:auto}.value{grid-template-columns:32px 1fr 90px;padding:14px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;gap:10px;min-height:100px}.value .vicon{width:30px;height:30px}.value h3{font-size:16px}.value small{font-size:12px}.value b{font-size:32px}.scale{grid-template-columns:1fr;gap:0}.scale div{text-align:left;min-height:0;border:0;border-top:1px solid var(--line);border-radius:0;padding:12px 0;background:none}.scale b{font-size:15px}.scale span{font-size:12px}.scene.selected{outline:2px solid var(--cyan);outline-offset:-2px}
.copilot{position:fixed;bottom:87px;right:28px;width:180px;height:40px;padding:10px 14px}.copilot h3{font-size:14px}.copilot h3 button{background:transparent}.copilot.open{height:302px}.close-grid{grid-template-columns:1fr .7fr 1.15fr}.closure-left,.closure-mid,.closure-right{overflow:auto;padding:16px}.dispatch-card{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:14px 0}.dispatch-card h3{font-size:18px}.dispatch-hero{grid-template-columns:100px 1fr}.approved{grid-template-columns:30px 1fr}.approved>b{grid-column:2}.exec{grid-template-columns:1fr 1fr}.exec .box{min-height:76px}.resolution{grid-template-columns:repeat(3,1fr)}.res-card{min-height:85px;font-size:12px}.time-row{font-size:14px;grid-template-columns:70px 1fr}.impact{gap:10px;min-height:70px;padding:12px}.impact b{font-size:24px}.impact span{font-size:12px}.workflow-action{width:100%;margin-top:14px}.brief{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:14px 0}.brief p{font-size:14px}
.demo-tag{position:absolute;left:18px;bottom:18px;z-index:5;color:#d6e2e8;background:#0b1725d9;padding:6px 10px;font-size:11px;border-left:2px solid var(--cyan)}
.risk-card{padding:8px;margin-bottom:8px}.risk-card:last-child{margin-bottom:0}.big-video:before{content:attr(data-live)}.big-video{height:min(38vh,400px);aspect-ratio:auto}.kpi:after{display:none}.status-card .diagram .ui-icon{height:60px}.copilot{bottom:20px;right:30px;width:155px;border:0;background:#17242c}.nav{padding-right:176px}.mini-photo{background:url('belt-camera-feed.png') center/cover}.xray{background:url('belt-camera-feed.png') center 65%/cover;filter:grayscale(1)}
.scenario-dialog{width:min(920px,94vw);border:1px solid var(--line);border-radius:8px;padding:24px;background:#141c23;color:var(--text)}.scenario-dialog::backdrop{background:#03090dd9;backdrop-filter:blur(5px)}.scenario-dialog h2{font-size:24px;margin-bottom:18px}.scenario-dialog .scene-img{height:340px;background-size:300% 100%}.scenario-dialog label{display:flex;justify-content:space-between;margin:20px 0 12px}.scenario-dialog input{width:100%;accent-color:var(--cyan)}.scenario-dialog output{display:block;padding:14px 0;color:var(--cyan);font-size:18px}.scenario-dialog .drawer-close{top:16px;right:16px}.scenario-dialog .scene-metrics{margin:18px 0}.scenario-dialog button.secondary{width:100%;margin-top:10px}
@keyframes scan{0%{top:12%}100%{top:95%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(min-width:2200px){.app{max-width:2560px;margin:auto}.main-grid{grid-template-columns:1fr 460px}.risk-card{padding:16px}.risk-card h3{font-size:19px}.risk-card p{font-size:15px}.risk-meta{font-size:13px}.thumb{height:100px}.command{grid-template-rows:140px minmax(0,1fr) 180px}}
@media(max-width:1300px){.app{height:auto;grid-template-rows:auto auto 58px}.top{grid-template-columns:1fr}.logo{display:none}.top-meta{justify-self:center}.command.active{display:grid;grid-template-rows:auto auto auto}.main-grid{grid-template-columns:minmax(0,1fr) 330px;min-height:530px}.port-map{min-height:530px}.workspace,.close-grid,.scenarios{grid-template-columns:1fr}.scenario-list{grid-auto-rows:410px}.glass{margin:0}.nav{position:sticky;bottom:8px}.copilot{bottom:85px}.status-card{min-height:142px}}
@media(max-width:700px){.app{padding:10px}.main-grid{grid-template-columns:1fr}.kpi-row{gap:8px}.kpi{padding:14px 10px;grid-template-columns:34px 1fr;column-gap:9px}.kpi .icon{width:28px;height:28px}.kpi h3{font-size:12px}.kpi b{font-size:28px}.kpi b span{font-size:16px!important}.kpi:after{display:none}h1{font-size:23px}.scenario-status,.scenario-list{grid-template-columns:1fr}.port-map{min-height:400px}.map-weather{display:none}.hotspot{padding:6px}.hotspot>span+span{max-width:105px;font-size:10px}.hotspot>span:first-child{font-size:12px}.stepper{gap:4px}.step{padding:7px 4px;display:block}.step b{font-size:14px}.step span{font-size:11px}.step small{display:none}.workspace{display:flex!important;flex-direction:column}.workspace[style*="none"]{display:none!important}.fusion-row{grid-template-columns:1fr 1fr}.fusion-card:after{display:none}.sub-evidence{grid-template-columns:1fr}.impact-row{grid-template-columns:1fr 1fr}.nav button{font-size:11px;gap:5px}.nav .ui-icon{width:15px;height:15px}.health-drawer{max-width:100vw}.copilot.open{width:calc(100vw - 40px)}.callout{width:120px;font-size:12px}.callout span{font-size:10px}}