/* =========================================================================
   物理 AI 开发应用工厂 · HUD 样式
   黑色主背景 / 白色结构线 / 极少量冷白光效 / 高端企业科技感
   ========================================================================= */

:root{
  --bg:#000000;
  --ink:#e9eef4;
  --ink2:#9aa7b4;
  --ink3:#6b7784;
  --ink4:#454f59;
  --line:rgba(255,255,255,.14);
  --line-soft:rgba(255,255,255,.075);
  --line-hard:rgba(255,255,255,.34);
  --glass:rgba(3,5,8,.62);
  --glass2:rgba(5,8,12,.78);
  --ice:rgba(206,228,255,.9);
  --mono:"Consolas","SF Mono",ui-monospace,"Roboto Mono",monospace;
  --sans:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  --rad:2px;
  --dur:.42s;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer;}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3);}

#app{position:fixed;inset:0;overflow:hidden;}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;}

/* ============================== HUD 容器 */
#hud{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .8s ease;
}
#hud>*{pointer-events:auto;}

/* ============================== 顶部导航 */
#topbar{
  position:absolute;left:0;right:0;top:0;height:56px;display:flex;align-items:center;
  gap:26px;padding:0 22px;
  background:linear-gradient(180deg,rgba(2,4,7,.86),rgba(2,4,7,.42));
  border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.brand .mk{
  width:11px;height:11px;border:1px solid var(--line-hard);display:block;position:relative;
  transform:rotate(45deg);
}
.brand .mk::after{content:"";position:absolute;inset:3px;background:#fff;opacity:.85;}
.brand b{font:600 13px/1 var(--mono);letter-spacing:.30em;color:#fff;}

#mainnav{display:flex;gap:4px;margin:0 auto;}
.navbtn{
  font:500 11px/1 var(--mono);letter-spacing:.16em;color:var(--ink3);
  padding:9px 15px;position:relative;transition:color var(--dur);
  white-space:nowrap;
}
.navbtn:hover{color:var(--ink);}
.navbtn::after{
  content:"";position:absolute;left:15px;right:15px;bottom:4px;height:1px;background:#fff;
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur) cubic-bezier(.2,.8,.2,1);
}
.navbtn.on{color:#fff;}
.navbtn.on::after{transform:scaleX(1);}

.livestat{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.live{font:600 11px/1 var(--mono);letter-spacing:.18em;color:#fff;display:flex;align-items:center;gap:7px;}
.live i{width:6px;height:6px;background:#fff;display:block;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,255,255,.5)}50%{opacity:.45;box-shadow:0 0 0 5px rgba(255,255,255,0)}}
.livestat .bar{width:1px;height:14px;background:var(--line);}
.livestat .ok{font:500 11px/1 var(--mono);letter-spacing:.16em;color:var(--ink3);}

/* ============================== 状态条 / 面包屑 */
#subbar{
  position:absolute;left:0;right:0;top:56px;height:38px;display:flex;align-items:center;
  justify-content:space-between;padding:0 22px;gap:20px;
  background:linear-gradient(180deg,rgba(2,4,7,.5),rgba(2,4,7,0));
  border-bottom:1px solid var(--line-soft);
}
#crumbs{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;}
.backbtn{
  font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--ink2);
  padding:6px 10px;border:1px solid var(--line);transition:all var(--dur);
  white-space:nowrap;
}
.backbtn:hover{color:#fff;border-color:var(--line-hard);background:rgba(255,255,255,.05);}
.crumb{font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--ink2);padding:5px 2px;
  border-bottom:1px solid transparent;transition:all var(--dur);white-space:nowrap;}
.crumb:not(.cur):hover{color:#fff;border-bottom-color:var(--line-hard);}
.crumb.cur{color:#fff;letter-spacing:.14em;}
.crumb.cur::before{content:"";display:inline-block;width:4px;height:4px;background:#fff;margin-right:7px;
  vertical-align:middle;transform:rotate(45deg) translateY(-1px);}
#crumbs .sep{color:var(--ink4);font:400 11px/1 var(--mono);}

#stats{display:flex;gap:0;flex:0 0 auto;}
.stat{display:flex;align-items:baseline;gap:7px;padding:0 16px;border-left:1px solid var(--line-soft);}
.stat b{font:600 13px/1 var(--mono);color:#fff;letter-spacing:.04em;}
.stat i{font:400 9.5px/1 var(--mono);color:var(--ink3);letter-spacing:.20em;font-style:normal;}

/* ============================== 右侧详情面板 */
#panel{
  position:absolute;right:20px;top:108px;bottom:126px;width:376px;
  background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  overflow-y:auto;overflow-x:hidden;
  padding:20px 18px 24px;
  transition:transform var(--dur) cubic-bezier(.2,.8,.2,1),opacity var(--dur);
  background-image:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 120px);
}
#panel::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
}
#panelBody{animation:fadeUp .5s cubic-bezier(.2,.8,.2,1);}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.big{font:600 19px/1.32 var(--sans);color:#fff;letter-spacing:.02em;margin:2px 0 6px;}
.sub{font:400 10.5px/1.45 var(--mono);color:var(--ink3);letter-spacing:.16em;margin-bottom:18px;text-transform:uppercase;}

.sec{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:22px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line-soft);
}
.sec>span{font:600 11px/1 var(--sans);color:#fff;letter-spacing:.14em;}
.sec>i{font:400 9px/1 var(--mono);color:var(--ink4);letter-spacing:.18em;font-style:normal;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;}
.sec:first-child{margin-top:0;}

.kv{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:5px 0;
  border-bottom:1px dashed rgba(255,255,255,.055);}
.kv .k{font:400 11.5px/1.5 var(--sans);color:var(--ink3);flex:0 0 auto;}
.kv .v{font:400 11.5px/1.5 var(--mono);color:var(--ink);letter-spacing:.03em;text-align:right;}

.specgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);margin:6px 0 16px;}
.specgrid>div{background:rgba(255,255,255,.018);padding:12px 12px 11px;}
.specgrid b{display:block;font:600 17px/1 var(--mono);color:#fff;letter-spacing:.02em;}
.specgrid i{display:block;margin-top:6px;font:400 10px/1 var(--sans);color:var(--ink3);
  letter-spacing:.1em;font-style:normal;}

.tagrow{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px;}
.tg{font:400 10.5px/1 var(--mono);color:var(--ink);letter-spacing:.06em;
  padding:6px 9px;border:1px solid var(--line);background:rgba(255,255,255,.026);}
.tg.sm{font-size:9.5px;padding:5px 7px;color:var(--ink2);}

.kpigrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);margin:4px 0 12px;}
.kpi{background:rgba(255,255,255,.02);padding:11px 8px 10px;text-align:center;}
.kpi i{display:block;font:400 9.5px/1 var(--sans);color:var(--ink3);letter-spacing:.08em;font-style:normal;margin-bottom:8px;}
.kpi b{font:600 15px/1 var(--mono);color:#fff;}
.kpi b em{font:400 9.5px/1 var(--mono);color:var(--ink3);font-style:normal;margin-left:2px;}

.minilist{margin:8px 0 4px;}
.minilist div{font:400 11px/1.85 var(--mono);color:var(--ink2);letter-spacing:.02em;}

.rolegrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.rolecard{
  text-align:left;padding:12px 11px 11px;border:1px solid var(--line);
  background:rgba(255,255,255,.022);transition:all var(--dur);position:relative;overflow:hidden;
}
.rolecard::after{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:#fff;
  transform:scaleY(0);transform-origin:top;transition:transform var(--dur);}
.rolecard:hover{background:rgba(255,255,255,.06);border-color:var(--line-hard);}
.rolecard:hover::after{transform:scaleY(1);}
.rolecard i{display:block;font:400 9px/1 var(--mono);color:var(--ink4);letter-spacing:.2em;
  font-style:normal;margin-bottom:7px;}
.rolecard b{display:block;font:600 12px/1.3 var(--sans);color:#fff;}
.rolecard span{display:block;margin-top:5px;font:400 8.5px/1.35 var(--mono);color:var(--ink4);letter-spacing:.08em;}

.pjlist{display:flex;flex-direction:column;gap:8px;}
.pj{text-align:left;width:100%;padding:11px 12px 10px;border:1px solid var(--line);
  background:rgba(255,255,255,.022);transition:all var(--dur);position:relative;}
.pj:hover{background:rgba(255,255,255,.062);border-color:var(--line-hard);transform:translateX(-2px);}
.pjtop{display:flex;justify-content:space-between;gap:10px;align-items:baseline;}
.pjtop b{font:600 12px/1.35 var(--sans);color:#fff;}
.pjtop span{font:400 9.5px/1 var(--mono);color:var(--ink2);letter-spacing:.1em;white-space:nowrap;
  border:1px solid var(--line-soft);padding:3px 6px;}
.pjbar{height:2px;background:rgba(255,255,255,.09);margin:9px 0 8px;position:relative;overflow:hidden;}
.pjbar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(255,255,255,.35),#fff);
  transition:width .9s cubic-bezier(.2,.8,.2,1);}
.pjbar.big{height:4px;}
.pjfoot{display:flex;justify-content:space-between;gap:8px;font:400 9.5px/1 var(--mono);color:var(--ink4);letter-spacing:.1em;}

.progwrap{display:flex;align-items:center;gap:12px;margin:6px 0 14px;}
.progwrap .pjbar{flex:1;margin:0;}
.progwrap b{font:600 14px/1 var(--mono);color:#fff;}

.ctlrow{margin:12px 0 0;}
.btn{
  display:block;width:100%;text-align:center;padding:10px 12px;
  font:500 10.5px/1 var(--mono);letter-spacing:.16em;color:#fff;
  border:1px solid var(--line-hard);background:rgba(255,255,255,.05);
  transition:all var(--dur);
}
.btn:hover{background:rgba(255,255,255,.13);letter-spacing:.2em;}
.btn.ghost{border-color:var(--line);background:transparent;color:var(--ink2);}
.btn.ghost:hover{color:#fff;border-color:var(--line-hard);}
.btn+.btn{margin-top:8px;}

.tip{margin-top:16px;font:400 10.5px/1.7 var(--sans);color:var(--ink4);letter-spacing:.04em;}

/* 作业流程条 */
.flowstrip{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin:6px 0 4px;}
.flowstrip .fs{
  font:400 10px/1 var(--mono);color:var(--ink3);letter-spacing:.06em;
  padding:6px 7px;border:1px solid transparent;transition:all .5s cubic-bezier(.2,.8,.2,1);
}
.flowstrip .fs.on{color:#fff;border-color:var(--line-hard);background:rgba(255,255,255,.09);}
.flowstrip i{font:400 9px/1 var(--mono);color:var(--ink4);font-style:normal;padding:0 1px;}

/* ============================== 大屏镜像 */
#screenPanel{
  position:absolute;left:20px;bottom:86px;width:470px;
  background:var(--glass2);border:1px solid var(--line);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transform:translateY(14px);opacity:0;pointer-events:none;
  transition:all .5s cubic-bezier(.2,.8,.2,1);
}
#screenPanel.on{transform:none;opacity:1;pointer-events:auto;}
#screenPanel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.6),transparent);}
.sphead{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-bottom:1px solid var(--line-soft);}
#spTitle{font:500 10px/1.4 var(--mono);color:#fff;letter-spacing:.1em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.spclose{font:400 12px/1 var(--mono);color:var(--ink3);padding:2px 6px;transition:color var(--dur);}
.spclose:hover{color:#fff;}
#screenMirror{padding:8px 10px 2px;background:#000;}
#screenMirror canvas{display:block;width:100%;height:auto;image-rendering:auto;}
.spfoot{display:flex;justify-content:space-between;padding:7px 12px 8px;
  font:400 8.5px/1 var(--mono);color:var(--ink4);letter-spacing:.18em;}

/* ============================== 区域导航 */
#regionnav{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;gap:5px;flex-wrap:nowrap;max-width:calc(100vw - 520px);
  overflow-x:auto;padding:6px 8px;
  background:rgba(3,5,8,.62);border:1px solid var(--line-soft);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  scrollbar-width:none;
}
#regionnav::-webkit-scrollbar{display:none;}
.chip{
  font:400 10.5px/1 var(--sans);color:var(--ink3);letter-spacing:.06em;
  padding:7px 11px;white-space:nowrap;border:1px solid transparent;transition:all var(--dur);
}
.chip:hover{color:#fff;background:rgba(255,255,255,.06);border-color:var(--line);}

/* ============================== 提示 / toast */
#hint{
  position:absolute;left:22px;top:104px;font:400 10.5px/1.7 var(--mono);
  color:var(--ink4);letter-spacing:.09em;max-width:230px;pointer-events:none;
}
#tooltip{
  position:fixed;z-index:60;pointer-events:none;opacity:0;transform:translateY(4px);
  transition:opacity .18s ease,transform .18s ease;
  background:rgba(4,6,10,.9);border:1px solid var(--line-hard);
  padding:7px 10px;max-width:300px;
}
#tooltip.on{opacity:1;transform:none;}
#tooltip b{display:block;font:600 11.5px/1.3 var(--sans);color:#fff;}
#tooltip span{display:block;margin-top:4px;font:400 9.5px/1.4 var(--mono);color:var(--ink2);letter-spacing:.08em;}

#toast{
  position:absolute;left:50%;top:110px;transform:translate(-50%,-8px);
  padding:10px 18px;background:rgba(4,6,10,.88);border:1px solid var(--line-hard);
  font:400 11px/1 var(--mono);color:#fff;letter-spacing:.1em;
  opacity:0;pointer-events:none;transition:all .5s cubic-bezier(.2,.8,.2,1);white-space:nowrap;
}
#toast.on{opacity:1;transform:translate(-50%,0);}

/* ============================== 开场 */
#intro{
  position:absolute;inset:0;z-index:80;background:#000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity 1.1s ease,visibility 1.1s;
}
#intro.off{opacity:0;visibility:hidden;pointer-events:none;}

.ibox{text-align:center;position:relative;z-index:2;}
.t-en{
  font:600 40px/1 var(--mono);letter-spacing:.42em;color:#fff;text-indent:.42em;
  opacity:0;animation:inFade 1.2s cubic-bezier(.2,.8,.2,1) .15s forwards;
}
.t-en2{
  font:300 40px/1.15 var(--mono);letter-spacing:.26em;color:rgba(255,255,255,.62);text-indent:.26em;
  opacity:0;animation:inFade 1.2s cubic-bezier(.2,.8,.2,1) .45s forwards;
}
.t-cn{
  margin-top:30px;font:400 17px/1 var(--sans);letter-spacing:.62em;color:rgba(255,255,255,.9);text-indent:.62em;
  opacity:0;animation:inFade 1.2s cubic-bezier(.2,.8,.2,1) .9s forwards;
}
.t-rule{width:230px;height:1px;background:rgba(255,255,255,.16);margin:26px auto 0;
  opacity:0;animation:inFade 1s ease 1.05s forwards;overflow:hidden;}
.t-rule i{display:block;height:1px;background:#fff;width:100%;
  transform:translateX(-100%);animation:ruleIn 1.4s cubic-bezier(.2,.8,.2,1) 1.5s forwards;}
.t-sub{margin-top:20px;font:400 10px/1 var(--mono);letter-spacing:.3em;color:var(--ink3);
  opacity:0;animation:inFade 1.2s ease 1.4s forwards;}
@keyframes inFade{to{opacity:1;}}
@keyframes ruleIn{to{transform:none;}}

.iscan{
  position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  opacity:0;
}
#intro:not(.off) .iscan{animation:scanSweep 1.5s cubic-bezier(.4,0,.2,1) .7s 1 forwards;}
@keyframes scanSweep{
  0%{opacity:0;transform:translateY(0);}
  10%{opacity:1;}
  90%{opacity:1;}
  100%{opacity:0;transform:translateY(100vh);}
}

.isteps{
  position:absolute;left:50%;bottom:104px;transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;white-space:nowrap;
  opacity:0;animation:inFade 1.2s ease 2.2s forwards;
}
.isteps span{font:400 10.5px/1 var(--mono);letter-spacing:.16em;color:var(--ink2);}
.isteps i{font:400 10px/1 var(--mono);color:var(--ink4);font-style:normal;}

#skipbtn{
  position:absolute;right:32px;bottom:32px;
  font:400 10px/1 var(--mono);letter-spacing:.24em;color:var(--ink3);
  padding:9px 14px;border:1px solid var(--line);transition:all var(--dur);
  opacity:0;animation:inFade 1s ease 2.6s forwards;z-index:3;
}
#skipbtn:hover{color:#fff;border-color:var(--line-hard);letter-spacing:.3em;}

#screenStage{position:absolute;left:-99999px;top:0;width:1px;height:1px;overflow:hidden;}
#boot{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;background:#000;z-index:90;}
#boot:empty{display:none;}

/* ============================== 建设方案档案 */
#bpOpen{
  font:400 10px/1 var(--mono);letter-spacing:.2em;color:var(--ink3);
  padding:7px 12px;border:1px solid var(--line);transition:all var(--dur);
  white-space:nowrap;flex:0 0 auto;
}
#bpOpen:hover{color:#fff;border-color:var(--line-hard);background:rgba(255,255,255,.05);letter-spacing:.24em;}

#bp{
  position:absolute;inset:0;z-index:80;display:none;
  background:rgba(0,0,0,.82);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  padding:64px 56px 48px;
}
#bp.on{display:block;animation:fadeIn .35s ease;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.bpbox{
  height:100%;max-width:1560px;margin:0 auto;display:flex;flex-direction:column;
  background:var(--glass2);border:1px solid var(--line);position:relative;
  box-shadow:0 40px 120px rgba(0,0,0,.7);
  animation:bpIn .45s cubic-bezier(.2,.8,.2,1);
}
@keyframes bpIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.bpbox::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);}
.bphead{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 24px;border-bottom:1px solid var(--line);flex:0 0 auto;}
.bptitle b{display:block;font:600 16px/1.35 var(--sans);color:#fff;letter-spacing:.03em;}
.bptitle span{display:block;margin-top:6px;font:400 9.5px/1 var(--mono);color:var(--ink3);letter-spacing:.22em;}
.bpclose{font:400 14px/1 var(--mono);color:var(--ink3);padding:8px 10px;border:1px solid var(--line);transition:all var(--dur);}
.bpclose:hover{color:#fff;border-color:var(--line-hard);}
.bpbody{flex:1;min-height:0;display:flex;}
#bpIndex{width:262px;flex:0 0 auto;border-right:1px solid var(--line);overflow-y:auto;padding:14px 0;}
.bpi{display:block;width:100%;text-align:left;padding:12px 20px;border-left:2px solid transparent;
  transition:all var(--dur);}
.bpi:hover{background:rgba(255,255,255,.035);}
.bpi.on{background:rgba(255,255,255,.06);border-left-color:#fff;}
.bpi i{font:400 9px/1 var(--mono);color:var(--ink4);letter-spacing:.14em;font-style:normal;}
.bpi b{display:block;font:500 12.5px/1.4 var(--sans);color:var(--ink2);margin-top:4px;letter-spacing:.02em;}
.bpi.on b{color:#fff;}
.bpi span{display:block;margin-top:3px;font:400 8.5px/1.2 var(--mono);color:var(--ink4);letter-spacing:.16em;}
#bpContent{flex:1;min-width:0;overflow-y:auto;padding:24px 28px 40px;}
#bpContent::-webkit-scrollbar{width:4px;}
#bpIndex::-webkit-scrollbar{width:4px;}
#bpContent::-webkit-scrollbar-thumb,#bpIndex::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);}

.bpsec{margin-bottom:30px;animation:fadeUp .5s cubic-bezier(.2,.8,.2,1);}
.bpsec.line{border-left:1px solid var(--line-soft);padding-left:16px;}
.bpsec h3{font:600 14px/1.4 var(--sans);color:#fff;letter-spacing:.04em;
  padding-bottom:9px;border-bottom:1px solid var(--line-soft);margin-bottom:12px;display:flex;align-items:baseline;gap:12px;}
.bpsec h3 i{font:400 9px/1 var(--mono);color:var(--ink4);letter-spacing:.2em;font-style:normal;}
.bpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 32px;}

.bplist{list-style:none;font:400 12px/1.85 var(--sans);color:var(--ink2);}
.bplist li{position:relative;padding-left:14px;}
.bplist li::before{content:"";position:absolute;left:0;top:.82em;width:4px;height:1px;background:var(--ink4);}
.bpolist{list-style:none;counter-reset:bp;font:400 12px/1.85 var(--sans);color:var(--ink2);}
.bpolist li{counter-increment:bp;position:relative;padding-left:26px;}
.bpolist li::before{content:counter(bp,decimal-leading-zero);position:absolute;left:0;top:0;
  font:400 9.5px/1.85 var(--mono);color:var(--ink4);letter-spacing:.1em;}
.bpnote{margin-top:10px;padding:10px 12px;border-left:1px solid var(--line-hard);
  background:rgba(255,255,255,.028);font:400 11.5px/1.75 var(--sans);color:var(--ink3);}
/* 本模型已落地项（区分 PRD 原文与实建内容）*/
.bpimpl{margin-top:9px;padding:8px 10px;border-left:2px solid rgba(255,255,255,.30);
  background:rgba(255,255,255,.045);font:400 11px/1.72 var(--sans);color:var(--ink2);}
.bptags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.bptags span{font:400 10.5px/1 var(--mono);color:var(--ink2);letter-spacing:.08em;
  padding:6px 9px;border:1px solid var(--line);}
.bpapps{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;}
.bpapps span{font:400 10px/1 var(--mono);color:#fff;letter-spacing:.12em;padding:6px 10px;
  border:1px solid var(--line-hard);background:rgba(255,255,255,.05);}
.bpkpi{margin-top:10px;font:400 11px/1.7 var(--mono);color:var(--ink3);letter-spacing:.04em;}
.bpsec code{font:400 11px/1 var(--mono);color:var(--ink);background:rgba(255,255,255,.07);
  padding:2px 5px;letter-spacing:.02em;}
.bptbl{width:100%;border-collapse:collapse;font:400 12px/1.6 var(--sans);}
.bptbl th{text-align:left;font:400 9.5px/1 var(--mono);color:var(--ink4);letter-spacing:.18em;
  padding:0 10px 9px 0;border-bottom:1px solid var(--line);font-weight:400;}
.bptbl td{padding:8px 10px 8px 0;border-bottom:1px solid var(--line-soft);color:var(--ink2);vertical-align:top;}
.bptbl td.k{color:#fff;font-weight:500;white-space:nowrap;}

/* ------- 目录项：PRD 章节号 + 章节编号 ------- */
.bpi em{position:absolute;right:16px;top:14px;font:400 8.5px/1 var(--mono);color:var(--ink4);
  letter-spacing:.1em;font-style:normal;}
.bpi{position:relative;}

/* ------- 核心流水线（§一） ------- */
.bpflow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 14px;}
.bpflow b{font:500 12px/1 var(--sans);color:#fff;letter-spacing:.03em;padding:8px 12px;
  border:1px solid var(--line-hard);background:rgba(255,255,255,.05);}
.bpflow i{font:400 11px/1 var(--mono);color:var(--ink4);font-style:normal;}

/* ------- 2D 总平面图（§三） ------- */
.bpplanwrap{margin:2px 0 6px;}
.bpplan{display:block;width:100%;height:auto;max-width:820px;
  background:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px) 0 0/40px 40px,
    rgba(255,255,255,.012);
  border:1px solid var(--line-soft);}
.bpplan .bpz rect{fill:rgba(255,255,255,.030);stroke:rgba(255,255,255,.26);stroke-width:1;}
.bpplan .bpz.key rect{fill:rgba(255,255,255,.070);stroke:var(--line-hard);}
.bpplan .bpz.line rect{fill:rgba(255,255,255,.045);stroke:rgba(255,255,255,.36);}
.bpplan .bpz .t{font:500 11.5px var(--sans);fill:#fff;letter-spacing:.02em;}
.bpplan .bpz .s{font:400 8.5px var(--mono);fill:rgba(255,255,255,.42);letter-spacing:.04em;}
.bpplan .bpa rect{fill:rgba(255,255,255,.012);stroke:rgba(255,255,255,.13);
  stroke-width:1;stroke-dasharray:7 5;}
.bpplan .bpa .s{font:400 8.5px var(--mono);fill:rgba(255,255,255,.44);letter-spacing:.06em;}
.bpplan .bpm{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.4;}
.bpplan .bpg{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1;stroke-dasharray:3 5;}
.bpplan .bpn{stroke:rgba(255,255,255,.10);stroke-width:1;stroke-dasharray:2 4;}
.bpplan .bpt{fill:none;stroke:rgba(255,255,255,.72);stroke-width:1.3;stroke-dasharray:6 5;}
.bpplan .bpd{fill:#000;stroke:rgba(255,255,255,.85);stroke-width:1.2;}
.bpplan .bpn2{font:600 8px var(--mono);fill:#fff;letter-spacing:0;}
.bpplan .bpe{font:400 9px var(--mono);fill:rgba(255,255,255,.6);letter-spacing:.06em;}
.bpplan .bpa2{fill:rgba(255,255,255,.55);}
.bpplan .bpl2{font:400 8.5px var(--sans);fill:rgba(255,255,255,.5);letter-spacing:.1em;}
.bpplan .bpm2{font:400 9px var(--mono);fill:rgba(255,255,255,.42);letter-spacing:.12em;}
.bplegend{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:12px;
  font:400 10px/1 var(--mono);color:var(--ink3);letter-spacing:.08em;}
.bplegend span{display:flex;align-items:center;gap:7px;}
.bplegend i{display:block;width:20px;height:0;border-top:1px solid;font-style:normal;}
.bplegend .lg1{border-color:rgba(255,255,255,.5);}
.bplegend .lg2{border-color:rgba(255,255,255,.16);border-top-style:dashed;}
.bplegend .lg3{border-color:rgba(255,255,255,.36);border-top-width:5px;height:5px;
  background:rgba(255,255,255,.045);}
.bplegend .lg4{border-color:rgba(255,255,255,.13);border-top-style:dashed;}
.bplegend .lg5{border-color:rgba(255,255,255,.72);border-top-style:dashed;}
.bplegend .lg6{border:0;width:7px;height:9px;background:rgba(255,255,255,.55);
  clip-path:polygon(100% 0,0 50%,100% 100%);}
.bplegend .lg7{border:0;width:7px;height:9px;background:rgba(255,255,255,.55);
  clip-path:polygon(0 0,100% 50%,0 100%);}


/* ------- 联动机制（PRD §四.4）· 5 项真实功能 ------- */
.lnkgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:4px;}
.lnk{position:relative;display:block;width:100%;text-align:left;padding:10px 11px 11px;
  border:1px solid var(--line);background:rgba(255,255,255,.022);transition:all var(--dur);}
.lnk:hover{border-color:var(--line-hard);background:rgba(255,255,255,.055);}
.lnk.on{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.085);}
.lnk.on::after{content:"";position:absolute;right:9px;top:11px;width:5px;height:5px;
  background:#fff;border-radius:50%;animation:pulseDot 1.6s infinite;}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.25}}
.lnk i{font:400 8.5px/1 var(--mono);color:var(--ink4);letter-spacing:.14em;font-style:normal;}
.lnk b{display:block;margin-top:5px;font:500 11.5px/1.25 var(--sans);color:var(--ink2);letter-spacing:.01em;}
.lnk.on b,.lnk:hover b{color:#fff;}
.lnk span{display:block;margin-top:4px;font:400 7.5px/1 var(--mono);color:var(--ink4);letter-spacing:.12em;}
.lnkgrid .lnk:nth-child(5){grid-column:1 / -1;}
.lnkdesc{margin-top:9px;font:400 11px/1.7 var(--sans);color:var(--ink3);
  padding-left:9px;border-left:1px solid var(--line-hard);}
.lnkpicker{margin-top:11px;padding:11px;border:1px solid var(--line-hard);background:rgba(255,255,255,.04);
  animation:fadeUp .3s cubic-bezier(.2,.8,.2,1);}
.lnkpicker-h{font:400 9.5px/1 var(--mono);color:var(--ink3);letter-spacing:.16em;margin-bottom:9px;}
.lnkpicker-g{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:9px;}
.lnkline{display:flex;align-items:baseline;gap:7px;padding:8px 9px;border:1px solid var(--line);
  background:rgba(255,255,255,.02);transition:all var(--dur);text-align:left;}
.lnkline:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.08);}
.lnkline b{font:600 11px/1 var(--mono);color:#fff;}
.lnkline span{font:400 10px/1 var(--sans);color:var(--ink3);}

/* ------- 联动浮层（告警 / 远程指挥 / 每日复盘） ------- */
#sheet{position:absolute;inset:0;z-index:88;display:none;background:rgba(0,0,0,.78);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:88px 60px 60px;}
#sheet.on{display:block;animation:fadeIn .3s ease;}
.sheetbox{max-width:940px;max-height:100%;margin:0 auto;display:flex;flex-direction:column;
  background:var(--glass2);border:1px solid var(--line);position:relative;
  box-shadow:0 36px 110px rgba(0,0,0,.72);animation:bpIn .4s cubic-bezier(.2,.8,.2,1);}
.sheetbox::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);}
.sheethead{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:17px 20px;border-bottom:1px solid var(--line);flex:0 0 auto;}
.sheettitle b{display:block;font:600 14.5px/1.35 var(--sans);color:#fff;letter-spacing:.03em;}
.sheettitle span{display:block;margin-top:5px;font:400 9px/1 var(--mono);color:var(--ink3);letter-spacing:.2em;}
.sheetclose{font:400 13px/1 var(--mono);color:var(--ink3);padding:7px 9px;border:1px solid var(--line);transition:all var(--dur);}
.sheetclose:hover{color:#fff;border-color:var(--line-hard);}
.sheetbody{flex:1;min-height:0;overflow-y:auto;padding:18px 20px 24px;}
.sheetbody::-webkit-scrollbar{width:4px;}
.sheetbody::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);}
.sheetstat{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px;}
.sheetstat .ss{padding:10px 12px;border:1px solid var(--line);background:rgba(255,255,255,.028);}
.sheetstat .ss.hot{border-color:var(--line-hard);background:rgba(255,255,255,.08);}
.sheetstat .ss i{display:block;font:400 9px/1 var(--mono);color:var(--ink4);letter-spacing:.16em;font-style:normal;}
.sheetstat .ss b{display:inline-block;margin-top:7px;font:600 19px/1 var(--sans);color:#fff;}
.sheetstat .ss span{margin-left:4px;font:400 9px/1 var(--mono);color:var(--ink4);}
.shsettbl{font-size:11.5px;}
.shsettbl td{padding:7px 9px 7px 0;}
.shsettbl td.k{color:#fff;font-weight:600;}
.rmbox{margin-bottom:18px;}
.rmrow{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft);flex-wrap:wrap;}
.rmrow i{flex:0 0 78px;font:400 9px/1 var(--mono);color:var(--ink4);letter-spacing:.14em;font-style:normal;}
.rmrow b{font:500 12.5px/1.5 var(--sans);color:#fff;}
.rmrow span{font:400 9px/1 var(--mono);color:var(--ink4);letter-spacing:.1em;}
.rmlog li{margin-bottom:6px;}
.bpsec .shsettbl{margin-top:2px;}

/* ============================== 响应式 */
@media (min-width:2400px){
  #panel{width:420px;right:26px;padding:24px 22px 28px;}
  #screenPanel{width:470px;left:26px;}
  .big{font-size:21px;}
  #regionnav{max-width:calc(100vw - 640px);}
}
@media (max-width:1600px){
  #panel{width:344px;right:16px;}
  #screenPanel{width:430px;left:16px;}
  #regionnav{max-width:calc(100vw - 460px);}
  #bp{padding:46px 30px 34px;}
  #bpIndex{width:214px;}
  #bpContent{padding:20px 22px 34px;}
  .bpgrid{grid-template-columns:1fr;}
}
@media (max-width:1360px){
  #panel{width:312px;padding:16px 14px 20px;}
  #screenPanel{width:380px;bottom:78px;}
  #hint{display:none;}
  .navbtn{padding:9px 10px;font-size:10px;}
  .stat{padding:0 11px;}
  #bpOpen{display:none;}
}
@media (max-width:1100px){
  #panel{width:280px;}
  #screenPanel{width:290px;}
  #stats .stat:nth-child(n+3){display:none;}
  #topbar{gap:12px;padding:0 14px;}
}
@media (max-height:760px){
  #panel{top:98px;bottom:104px;}
  #screenPanel{bottom:70px;}
  .big{font-size:17px;}
}
@media (max-height:640px){
  #screenPanel{display:none;}
}