/* ============ tokens ============ */
:root{
  --bg:#f7f9fc; --bg2:#eef2f7; --surf:#ffffff; --surf2:#f4f7fb;
  --line:#e1e8f0; --line2:#c8d4e2;
  --txt:#0f1a2b; --txt2:#48566b; --txt3:#6b7c93;
  --pri:#1d4ed8; --pri-d:#1a3fb0; --pri-soft:#eaf0ff;
  --acc:#c2410c; --acc-soft:#fff2ea;
  --cy:#0e7490; --cy-soft:#e6f6fb;
  --ok:#047857; --ok-soft:#e8f7f1;
  --warn:#a16207; --warn-soft:#fdf6e3;
  --dan:#c81e1e; --dan-soft:#fdeeee;
  --r:10px; --r-lg:14px;
  --mono:'Fira Code',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Fira Sans',-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --shadow:0 1px 2px rgba(15,26,43,.05),0 4px 14px rgba(15,26,43,.06);
  --shadow-lg:0 2px 4px rgba(15,26,43,.06),0 12px 32px rgba(15,26,43,.09);
  --max:1180px;
}
*{box-sizing:border-box}
/* 仅桌面版 —— 窗口过窄时横向滚动,不做重排 */
body{min-width:1200px}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{line-height:1.25;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
b,strong{font-weight:600;color:var(--txt)}
code{font-family:var(--mono);font-size:.86em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.muted{color:var(--txt3)}

.skip{position:absolute;left:-9999px;top:0;background:var(--pri);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--pri);outline-offset:3px;border-radius:4px}

/* ============ topbar ============ */
.topbar{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;gap:28px;
  padding:0 24px;height:60px;
  background:rgba(255,255,255,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand svg{width:22px;height:22px;fill:none;stroke:var(--pri);stroke-width:1.6}
.brand svg .dot{fill:var(--pri);stroke:none}
.brand span{display:flex;flex-direction:column;line-height:1.15}
.brand b{font-size:14px;letter-spacing:.2px}
.brand em{font-style:normal;font-size:11px;color:var(--txt3);font-family:var(--mono)}
.nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{
  color:var(--txt2);text-decoration:none;font-size:13.5px;
  padding:7px 11px;border-radius:7px;white-space:nowrap;
  transition:background .18s ease,color .18s ease;
}
.nav a:hover{color:var(--txt);background:var(--bg2)}
.nav a.on{color:var(--pri);background:var(--pri-soft);box-shadow:inset 0 0 0 1px #c3d4ff;font-weight:600}

/* ============ hero ============ */
.hero{padding:76px 0 64px;border-bottom:1px solid var(--line);
  background:radial-gradient(1100px 460px at 20% -20%,#e7eeff,transparent 62%),
             radial-gradient(760px 380px at 90% 0%,#fff0e6,transparent 60%);}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;color:var(--pri);text-transform:uppercase;margin-bottom:16px}
.hero h1{font-size:clamp(30px,4.6vw,50px);font-weight:700;letter-spacing:-.02em}
.hero h1 .sep{color:var(--line2);margin:0 .35em;font-weight:300}
.lede{margin-top:18px;max-width:66ch;font-size:17px;color:var(--txt2)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-top:38px}
.stat{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow)}
.stat b{font-family:var(--mono);font-size:30px;font-weight:600;color:var(--pri);line-height:1.1}
.stat.accent b{color:var(--acc)}
.stat span{font-size:13.5px;color:var(--txt2);display:flex;flex-direction:column}
.stat em{font-style:normal;font-size:11.5px;color:var(--txt3);margin-top:2px}

.callouts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.callout{border-radius:var(--r);padding:18px 20px;border:1px solid var(--line)}
.callout.ok{background:var(--ok-soft);border-color:#bfe6d6}
.callout.warn{background:var(--warn-soft);border-color:#ecd9a4}
.callout h4{font-size:14px;margin-bottom:10px}
.callout.ok h4{color:var(--ok)} .callout.warn h4{color:var(--warn)}
.callout li{font-size:14px;color:var(--txt2);padding-left:16px;position:relative;margin-bottom:5px}
.callout li::before{content:'';position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5}

/* ============ section ============ */
.sec{padding:72px 0;border-bottom:1px solid var(--line)}
.sec.alt{background:var(--bg2)}
.sec h2{font-size:clamp(22px,3vw,30px);font-weight:600;display:flex;align-items:baseline;gap:14px;letter-spacing:-.01em}
.sec h2 .num{font-family:var(--mono);font-size:13px;color:var(--pri);font-weight:500}
.sub{margin-top:12px;color:var(--txt2);max-width:76ch;font-size:15.5px}
.h3{font-size:17px;font-weight:600;margin:44px 0 16px;padding-left:12px;border-left:3px solid var(--pri)}

/* ============ chain ============ */
.chain{margin-top:34px;display:flex;flex-direction:column;align-items:center}
.node{width:100%;max-width:760px;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 24px;text-align:center;position:relative}
.node .tag{display:inline-block;font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:20px;margin-bottom:8px;letter-spacing:.03em}
.node h3{font-size:17px;font-weight:600}
.node p{font-size:13.5px;color:var(--txt2);margin-top:7px}
.node.entry{max-width:420px;border-color:var(--line2)}
.node.entry .tag{background:var(--surf2);color:var(--txt3)}
.node.runtime{border-color:#bfe6d6;background:linear-gradient(180deg,var(--ok-soft),var(--surf))}
.node.runtime .tag{background:var(--ok-soft);color:var(--ok)}
.node.gateway{border-color:#c3d4ff;background:linear-gradient(180deg,var(--pri-soft),var(--surf))}
.node.gateway .tag{background:#dbe6ff;color:var(--pri)}
.node.compute{max-width:100%;border-color:#f5cdb5;background:linear-gradient(180deg,var(--acc-soft),var(--surf))}
.node.compute .tag{background:var(--acc-soft);color:var(--acc)}
.arrow{width:2px;height:30px;background:linear-gradient(180deg,var(--line2),var(--pri));position:relative;flex-shrink:0}
.arrow::after{content:'';position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--pri)}
.gbrow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.gb{background:var(--surf2);border:1px solid var(--line);border-radius:var(--r);padding:12px 8px;font-size:12.5px;color:var(--txt2);line-height:1.5}
.gb b{display:block;font-family:var(--mono);color:var(--acc);font-size:14px;margin-bottom:6px}
.gb em{display:block;font-style:normal;font-size:10.5px;color:var(--txt3);margin-top:6px}
.gb.has-data{border-color:#e8a97e;box-shadow:0 0 0 2px #fde5d4}
.gb.has-data em{color:var(--acc)}
.chain-hs{margin-top:14px !important;font-family:var(--mono);font-size:11.5px !important;color:var(--txt3) !important}
.note{margin-top:26px;background:var(--surf);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:var(--r);padding:16px 20px;font-size:14px;color:var(--txt2)}
.note .risk{display:block;margin-top:8px;color:var(--warn)}

/* ============ devices ============ */
.devgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:32px}
.dev{background:var(--surf);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.dev header{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:6px}
.dev h3{font-size:17px;font-weight:600}
.dev code{color:var(--txt3);font-size:11.5px;width:100%}
.pill{font-family:var(--mono);font-size:10.5px;padding:3px 8px;border-radius:5px;letter-spacing:.04em}
.pill.c1{background:var(--acc-soft);color:var(--acc)}
.pill.c2{background:var(--ok-soft);color:var(--ok)}
.pill.c3{background:var(--cy-soft);color:var(--cy)}
.role{font-size:13px;color:var(--txt3);margin-bottom:14px !important;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.feat{display:flex;flex-wrap:wrap;gap:6px}
.feat li{font-size:12.5px;background:var(--surf2);border:1px solid var(--line);color:var(--txt2);padding:4px 9px;border-radius:6px}
.feat li.muted{background:transparent;border-style:dashed;color:var(--txt3)}
.spec{margin-top:auto;padding-top:14px;font-size:12.5px;color:var(--txt3);line-height:1.6}

.tablewrap{overflow-x:auto;margin-top:16px;border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
th,td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--surf2);font-size:12.5px;font-weight:600;color:var(--txt2);letter-spacing:.02em}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--pri-soft)}
td.y{color:var(--ok);font-weight:600} td.n{color:var(--txt3)}
td.warn-td{color:var(--warn)}
table.bom td:first-child{font-family:var(--mono);color:var(--txt3);width:44px}
table.bom td:nth-child(3){font-family:var(--mono);text-align:center;width:66px}
tr.grp td{background:var(--surf2);font-family:var(--mono);font-size:12px;color:var(--pri);letter-spacing:.06em;padding:8px 16px}
tr.grp:hover td{background:var(--surf2)}

/* ============ rack 3d ============ */
.rackgrid{display:grid;grid-template-columns:1fr 320px;gap:20px;margin-top:30px;align-items:start}
.canvaswrap{background:var(--surf);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
#rack3d{width:100%;height:560px;display:block;cursor:grab;position:relative;overflow:hidden}
#rack3d:active{cursor:grabbing}
#rack3d canvas{display:block;width:100% !important;height:100% !important}
#rack3d .labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lbl{
  display:flex;align-items:baseline;gap:7px;white-space:nowrap;
  padding:3px 9px 3px 7px;border-radius:6px;font-family:var(--sans);
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);box-shadow:var(--shadow);
  border:1px solid var(--line);border-left-width:3px;
  transition:background .18s,border-color .18s,opacity .18s;opacity:.9;
}
.lbl b{font-size:11.5px;font-weight:600;color:var(--txt);line-height:1.35}
.lbl .u{font-family:var(--mono);font-size:9.5px;color:var(--txt3);line-height:1.35}
.lbl.ca{border-left-color:var(--acc)}
.lbl.cb{border-left-color:var(--cy)}
.lbl.cnull{border-left-color:#94a3b8}
.lbl.hv{opacity:1;background:#fff;border-color:var(--line2)}
.lbl.on{opacity:1;background:#fff;border-color:var(--pri);box-shadow:0 0 0 2px #c3d4ff,var(--shadow-lg)}
.lbl.on b{color:var(--pri)}
/* 侧壁固定件(不占 U 位)—— 虚线框区别于机架内设备 */
.lbl.side{margin-top:6px;border-style:dashed;border-left-style:solid;background:rgba(255,255,255,.96)}
.lbl.side .u{color:var(--cy);font-weight:600}
.canvasbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--line);background:var(--surf2);flex-wrap:wrap}
.legend{display:flex;gap:16px;flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--txt2)}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
#resetView{background:var(--surf);border:1px solid var(--line2);color:var(--txt2);font-family:var(--sans);font-size:12.5px;padding:6px 13px;border-radius:7px;cursor:pointer;transition:all .18s}
#resetView:hover{background:var(--pri-soft);border-color:var(--pri);color:var(--pri)}
.fallback{padding:20px;color:var(--txt3);font-size:14px}

.rackinfo{background:var(--surf);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;min-height:260px;position:sticky;top:80px}
.rackinfo .hint{color:var(--txt3);font-size:13.5px;text-align:center;padding:36px 8px;line-height:1.7}
.rackinfo h4{font-size:16px;margin-bottom:4px}
.rackinfo .u{font-family:var(--mono);font-size:11.5px;color:var(--txt3);margin-bottom:14px}
.rackinfo dl{margin:0;font-size:13.5px}
.rackinfo dt{color:var(--txt3);font-size:11.5px;margin-top:12px;letter-spacing:.03em}
.rackinfo dd{margin:3px 0 0;color:var(--txt2)}
.rackinfo .cir{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:20px;margin-bottom:12px;font-family:var(--mono)}
.rackinfo .cir.a{background:#fbdcc9;color:var(--acc)}
.rackinfo .cir.b{background:#cfeaf2;color:var(--cy)}

.ulist{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin-top:16px}
.ub{background:var(--surf);border:1px solid var(--line);border-left-width:3px;border-radius:8px;padding:9px 13px;font-size:12.5px;cursor:pointer;transition:all .18s;text-align:left;font-family:var(--sans);color:var(--txt2);width:100%}
.ub:hover,.ub.on{background:var(--pri-soft);color:var(--txt);border-color:var(--line2)}
.ub b{display:block;font-size:13px;color:inherit}
.ub span{font-family:var(--mono);font-size:10.5px;color:var(--txt3)}

/* ============ converge ============ */
.converge{display:grid;grid-template-columns:230px 120px 1fr;gap:0;margin-top:32px;align-items:stretch}
.src,.dst{display:flex;flex-direction:column;gap:12px}
.src h4,.dst h4{font-size:12px;font-family:var(--mono);color:var(--txt3);letter-spacing:.08em;margin-bottom:2px;text-transform:uppercase}
.chip{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;font-size:13.5px;font-weight:500;flex:1;display:flex;flex-direction:column;justify-content:center}
.chip em{font-style:normal;font-size:11.5px;color:var(--txt3);margin-top:3px}
.chip.hs{border-left:3px solid var(--acc)} .chip.mg{border-left:3px solid var(--pri)}
.chip.sc{border-left:3px solid var(--ok)} .chip.pw{border-left:3px solid var(--cy)}
.flow svg{width:100%;height:100%;overflow:visible}
.flow path{fill:none;stroke:var(--line2);stroke-width:1.5;stroke-dasharray:4 4}
.agg{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;flex:1}
.agg b{display:block;font-size:14.5px;margin-bottom:5px}
.agg p{font-size:13px;color:var(--txt2)}
.agg .good{color:var(--ok);margin-top:6px;font-size:12.5px}
.agg .bad{color:var(--txt3);margin-top:6px;font-size:12.5px}
.agg.hs{border-left:3px solid var(--acc)} .agg.hs b{color:var(--acc)}
.agg.mg{border-left:3px solid var(--pri)} .agg.mg b{color:#7dabff}
.agg.sc{border-left:3px solid var(--ok)} .agg.sc b{color:var(--ok)}
.agg.pw{border-left:3px solid var(--cy)} .agg.pw b{color:var(--cy)}

/* ============ power ============ */
.circuits{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.circuit{border-radius:var(--r-lg);padding:22px;border:1px solid var(--line)}
.circuit.a{background:linear-gradient(180deg,var(--acc-soft),var(--surf));border-color:#f5cdb5}
.circuit.b{background:linear-gradient(180deg,var(--cy-soft),var(--surf));border-color:#b6dfea}
.circuit header{display:flex;align-items:center;gap:11px;margin-bottom:8px}
.circuit h3{font-size:16px;font-weight:600}
.badge{font-family:var(--mono);font-size:11px;padding:4px 10px;border-radius:6px}
.circuit.a .badge{background:#fbdcc9;color:var(--acc)}
.circuit.b .badge{background:#cfeaf2;color:var(--cy)}
.circuit .desc{font-size:13px;color:var(--txt3);margin-bottom:14px !important;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.circuit li{font-size:13.5px;color:var(--txt2);padding:5px 0 5px 18px;position:relative}
.circuit li::before{content:'';position:absolute;left:3px;top:13px;width:6px;height:6px;border-radius:2px}
.circuit.a li::before{background:var(--acc)} .circuit.b li::before{background:var(--cy)}
.circuit .why{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font-size:13px;color:var(--cy)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px}
.card b{display:block;font-size:14px;margin-bottom:6px}
.card p{font-size:13px;color:var(--txt2)}
.card.risk{border-color:#ecd9a4;background:var(--warn-soft)}
.card.risk b{color:var(--warn)}

.tree{margin-top:22px}
.tnode.start{max-width:280px;margin:0 auto 8px;text-align:center;background:var(--surf2);border:1px solid var(--line2);border-radius:var(--r);padding:11px;font-size:14px;font-weight:600}
.tbranch{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:20px;position:relative}
.tbranch::before{content:'';position:absolute;top:-14px;left:50%;width:1px;height:14px;background:var(--line2)}
.tcase{background:var(--surf);border:1px solid var(--line);border-top-width:3px;border-radius:var(--r);padding:16px 18px}
.tcase .w{font-family:var(--mono);font-size:12px;display:block;margin-bottom:8px}
.tcase b{display:block;font-size:15px;margin-bottom:8px}
.tcase .act{font-size:13.5px;color:var(--txt2)}
.tcase .act.danger{color:var(--dan);font-weight:600}
.c-off{border-top-color:var(--txt3)} .c-off .w{color:var(--txt3)}
.c-hang{border-top-color:var(--warn)} .c-hang .w{color:var(--warn)}
.c-net{border-top-color:var(--dan);background:var(--dan-soft)} .c-net .w{color:var(--dan)}
.tfoot{margin-top:16px;font-size:13.5px;color:var(--txt2);background:var(--surf);border-left:3px solid var(--dan);border-radius:var(--r);padding:14px 18px}

.wref{margin-top:30px;background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px}
.wref>span{font-size:12px;font-family:var(--mono);color:var(--txt3);letter-spacing:.06em}
.bars{margin-top:14px;display:flex;flex-direction:column;gap:11px}
.bar{position:relative;height:30px;background:var(--bg2);border-radius:6px;display:flex;align-items:center;padding:0 12px;gap:12px;overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#cfdcff,#fbd3ba);border-radius:6px}
.bar b{position:relative;font-family:var(--mono);font-size:12.5px;min-width:88px}
.bar em{position:relative;font-style:normal;font-size:12.5px;color:var(--txt2)}

/* ============ excl / open ============ */
.excl{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px}
.excl>div{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:13px 16px;display:flex;flex-direction:column;gap:4px}
.excl b{font-size:13.5px;color:var(--txt2)}
.excl span{font-size:12.5px;color:var(--txt3)}

.opengrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.opencol h3{font-size:15px;margin-bottom:14px;color:var(--pri)}
.opencol ol{counter-reset:none}
.opencol li{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:13px 16px;margin-bottom:9px;display:flex;flex-direction:column;gap:4px}
.opencol li b{font-size:13.5px}
.opencol li span{font-size:12.5px;color:var(--txt3)}
.tail{margin-top:24px;font-size:13.5px;color:var(--txt3);padding:14px 18px;background:var(--surf);border-radius:var(--r);border:1px dashed var(--line2)}

.foot{padding:30px 0;background:var(--bg2)}
.foot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--txt3)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ============ disclaimer ============ */
.disclaimer{
  margin-top:18px;background:var(--warn-soft);border:1px solid #ecd9a4;
  border-left:3px solid var(--warn);border-radius:var(--r);padding:14px 18px;
}
.disclaimer>b{display:block;font-size:14px;color:var(--warn);margin-bottom:8px}
.disclaimer li{font-size:13.5px;color:var(--txt2);padding-left:16px;position:relative;margin-bottom:4px}
.disclaimer li::before{content:'';position:absolute;left:3px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--warn);opacity:.5}
.disclaimer.draft{background:var(--dan-soft);border-color:#f2c8c8;border-left-color:var(--dan)}
.disclaimer.draft>b{color:var(--dan)}
.disclaimer.draft li::before{background:var(--dan)}
.note.ok-note{border-left-color:var(--ok)}
.note.ok-note .risk{color:var(--warn)}

/* ============ 组网图:交换机机箱 ============ */
.chassis{
  background:var(--surf);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px;box-shadow:var(--shadow);display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;
}
.chassis.hs{border-left:3px solid var(--acc)}
.chassis.mg{border-left:3px solid var(--pri)}
.chname{flex:0 0 150px;font-size:14.5px;font-weight:600;display:flex;flex-direction:column;gap:2px}
.chname span{font-family:var(--mono);font-size:11px;color:var(--txt3);font-weight:400}
.ports{flex:1;display:flex;gap:8px;flex-wrap:wrap;min-width:280px}
.port{
  flex:1 1 116px;min-width:106px;border-radius:8px;padding:9px 11px;
  border:1px solid var(--line);background:var(--surf2);
  display:flex;flex-direction:column;gap:2px;
}
.port.wide{flex:1 1 180px}
.port b{font-family:var(--mono);font-size:12px;color:var(--txt)}
.port span{font-size:10.5px;color:var(--txt3)}
.port i{font-style:normal;font-size:12px;color:var(--txt2);margin-top:3px;font-weight:500}
.chassis.hs .port.used{background:var(--acc-soft);border-color:#f0c4a8}
.chassis.hs .port.used i{color:var(--acc)}
.chassis.mg .port.used{background:var(--pri-soft);border-color:#c9d8ff}
.chassis.mg .port.used i{color:var(--pri)}
.chassis.mg .port.used.alt{background:var(--surf2);border-color:var(--line2)}
.chassis.mg .port.used.alt i{color:var(--txt2)}
.port.split{box-shadow:inset 0 -3px 0 rgba(194,65,12,.35)}
.port.uplink{background:var(--ok-soft);border-color:#bfe6d6}
.port.uplink i{color:var(--ok)}
.port.free{background:repeating-linear-gradient(45deg,var(--surf2),var(--surf2) 6px,#eaeff6 6px,#eaeff6 12px);border-style:dashed}
.port.free i{color:var(--txt3)}

/* ============ 对外接口:后面板 ============ */
.portlegend{display:flex;gap:14px;flex-wrap:wrap;margin:24px 0 18px}
.pl{font-size:12.5px;color:var(--txt2);display:flex;align-items:center;gap:7px}
.pl::before{content:'';width:12px;height:12px;border-radius:3px;border:1px solid var(--line2)}
.pl.hs::before{background:#fbdcc9;border-color:#f0c4a8}
.pl.mg::before{background:#dbe6ff;border-color:#c9d8ff}
.pl.sc::before{background:#d7f0e6;border-color:#bfe6d6}
.pl.pw::before{background:#d5edf5;border-color:#b6dfea}
.pl.idle::before{background:repeating-linear-gradient(45deg,#f4f7fb,#f4f7fb 4px,#e6ecf4 4px,#e6ecf4 8px)}

.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
.panel{background:var(--surf);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow)}
.panel header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.panel h3{font-size:15.5px;font-weight:600}
.panel .qty{font-family:var(--mono);font-size:11.5px;color:var(--txt3);background:var(--surf2);padding:3px 9px;border-radius:5px}
.pstrip{display:flex;gap:6px;flex-wrap:wrap;padding:10px;background:var(--bg2);border-radius:8px;border:1px solid var(--line)}
.p{
  font-family:var(--mono);font-size:11px;padding:6px 10px;border-radius:6px;
  border:1px solid var(--line2);background:#fff;color:var(--txt);
  display:flex;flex-direction:column;gap:1px;line-height:1.35;
}
.p em{font-style:normal;font-size:9.5px;color:var(--txt3)}
.p.hs{background:#fbdcc9;border-color:#f0c4a8}
.p.mg{background:#dbe6ff;border-color:#c9d8ff}
.p.sc{background:#d7f0e6;border-color:#bfe6d6}
.p.pw{background:#d5edf5;border-color:#b6dfea}
.p.soft{background:#fff;border-style:dashed}
.p.idle{background:repeating-linear-gradient(45deg,#f4f7fb,#f4f7fb 4px,#e6ecf4 4px,#e6ecf4 8px);border-style:dashed;color:var(--txt3)}

.pconn{margin:14px 0 0;font-size:13px;display:flex;flex-direction:column;gap:8px}
.pconn>div{display:flex;flex-direction:column;gap:1px}
.pconn dt{font-family:var(--mono);font-size:11px;color:var(--txt3)}
.pconn dd{margin:0;color:var(--txt2)}
.pconn .ca{color:var(--acc)} .pconn .cb{color:var(--cy)}
.pnote{margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--txt3)}
.pnote.warn{color:var(--warn)}

/* 型号待定标记 */
.tbd{color:var(--warn);font-weight:600}
.qty.tbd-q{background:var(--warn-soft);color:var(--warn);border:1px solid #ecd9a4}

.dim{color:var(--txt3);font-size:12px}

/* ============ 电源管理架构图 ============ */
.pwrdiag{margin-top:22px}
.pwr-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
.pwr-box{
  background:var(--surf);border:1px solid var(--line2);border-radius:var(--r);
  padding:11px 18px;text-align:center;font-size:14px;font-weight:600;
  display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow);min-width:150px;
}
.pwr-box em{font-style:normal;font-size:11px;color:var(--txt3);font-weight:400}
.pwr-box.mains{background:var(--surf2)}
.pwr-box.brk{border-color:var(--warn);background:var(--warn-soft)}
.pwr-box.brk em{color:var(--warn)}
.pwr-arrow{width:44px;height:2px;background:var(--line2);position:relative;flex-shrink:0}
.pwr-arrow::after{content:'';position:absolute;right:-1px;top:50%;transform:translateY(-50%);border:5px solid transparent;border-left-color:var(--line2)}

.pwr-split{height:24px;position:relative;margin:2px 0 0}
.pwr-split::before{content:'';position:absolute;top:0;left:50%;width:1px;height:12px;background:var(--line2)}
.pwr-split::after{content:'';position:absolute;top:12px;left:25%;right:25%;height:12px;
  border-top:1px solid var(--line2);border-left:1px solid var(--line2);border-right:1px solid var(--line2)}
.pwr-split span{display:none}

.pwr-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pwr-branch{border-radius:var(--r-lg);padding:16px 18px;border:1px solid var(--line)}
.pwr-branch.a{background:var(--acc-soft);border-color:#f5cdb5}
.pwr-branch.b{background:var(--cy-soft);border-color:#b6dfea}
.pwr-branch header{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;margin-bottom:12px}
.pwr-branch.a .badge{background:#fbdcc9;color:var(--acc)}
.pwr-branch.b .badge{background:#cfeaf2;color:var(--cy)}
.ctrl{background:var(--surf);border:1px solid var(--line);border-radius:8px;padding:11px 14px;
  display:grid;grid-template-columns:auto 1fr;gap:3px 12px;align-items:baseline}
.ctrl b{font-size:13px;font-family:var(--mono)}
.ctrl span{font-size:11.5px;color:var(--txt3)}
.ctrl.plain b{color:var(--txt2)}
.loads{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ld{background:var(--surf);border:1px solid var(--line2);border-radius:6px;padding:5px 10px;font-size:12px;color:var(--txt2)}
.pwr-branch.a .ld{border-left:3px solid var(--acc)}
.pwr-branch.b .ld{border-left:3px solid var(--cy)}
.ld.key{border-color:var(--warn);background:var(--warn-soft);color:var(--warn);font-weight:600}
.bwhy{margin-top:12px;font-size:12.5px;color:var(--cy);padding-top:10px;border-top:1px dashed #b6dfea}

.pwr-ctrlplane{margin-top:20px;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow)}
.cp-title{font-family:var(--mono);font-size:11.5px;color:var(--txt3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.cp-flow{display:flex;align-items:center;flex-wrap:wrap;gap:0}
.cp{background:var(--surf2);border:1px solid var(--line);border-radius:8px;padding:9px 14px;font-size:13px;font-weight:500;
  display:flex;flex-direction:column;gap:1px;flex-shrink:0}
.cp em{font-style:normal;font-size:10.5px;color:var(--txt3);font-weight:400}
.cp.hi{background:var(--pri-soft);border-color:#c9d8ff;color:var(--pri)}
.cp.hi em{color:var(--pri)}
.cp-arrow{width:34px;height:2px;background:var(--line2);position:relative;flex-shrink:0}
.cp-arrow::after{content:'';position:absolute;right:-1px;top:50%;transform:translateY(-50%);border:4px solid transparent;border-left-color:var(--line2)}
.cp-fork{width:26px;height:2px;background:var(--line2);flex-shrink:0}
.cp-two{display:flex;flex-direction:column;gap:8px;flex:1;min-width:230px}
.cp.out{background:var(--surf);border-left:3px solid var(--pri)}
.cp.out b{font-size:12.5px}
.cp.out span{font-size:11.5px;color:var(--txt3);font-weight:400}
.cp-note{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font-size:13px;color:var(--txt2)}


/* 机柜工具栏 */
.cbtns{display:flex;gap:8px}
.cbtns button{
  background:var(--surf);border:1px solid var(--line2);color:var(--txt2);
  font-family:var(--sans);font-size:12.5px;padding:6px 13px;border-radius:7px;
  cursor:pointer;transition:all .18s;
}
.cbtns button:hover{background:var(--pri-soft);border-color:var(--pri);color:var(--pri)}
.cbtns button.on{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:600}
.legend i.hatch{
  background:repeating-linear-gradient(45deg,#dfe5ee,#dfe5ee 3px,#9aa8ba 3px,#9aa8ba 6px);
  border:1px solid #b3bfcd;
}
.lbl.ctbd{border-left-color:#9aa8ba;border-left-style:dashed;border-left-width:4px}
.lbl.ctbd b{color:var(--txt3)}
.rackinfo .cir.tbd{background:#eef2f7;color:var(--txt3);border:1px dashed var(--line2)}

/* 风扇进/排风标记 */
.fantag{
  font-family:var(--mono);font-size:9.5px;color:var(--txt3);
  background:rgba(255,255,255,.85);border:1px dashed var(--line2);
  padding:2px 7px;border-radius:5px;white-space:nowrap;pointer-events:none;
}