/* ============================================================
   Z-CSS  主题 · 布局 · 面板 · 动画
   ============================================================ */
:root{
  --bg:#dfe4f2; --panel:#eef1fa; --panel2:#e2e8f6; --panel3:#f6f8fe;
  --line:#3a5fa8; --line2:#7d92c4;
  --magenta:#c02090; --magenta2:#e34fb8;
  --green:#00a651; --green2:#39c57e;
  --blue:#2b5797; --deep:#16244a;
  --text:#1a2440; --dim:#5a6685;
  --warn:#d98a00; --bad:#d02020;
  --yellow:#f5f0c0; --yellowB:#b8a94a;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg); color:var(--text); overflow:hidden;
  display:flex; flex-direction:column;
}
/* ---------- 顶栏 ---------- */
#topbar{
  height:52px; flex:0 0 52px; display:flex; align-items:center; gap:14px;
  padding:0 16px; background:linear-gradient(180deg,#f2f5fd,#dde3f4);
  border-bottom:2px solid var(--line); z-index:20;
}
#topbar .logo{font-weight:800; font-size:17px; color:var(--deep); letter-spacing:.5px; white-space:nowrap;}
#topbar .logo small{color:var(--magenta); font-weight:700;}
.lamp{display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--dim); white-space:nowrap;}
.lamp i{width:10px; height:10px; border-radius:50%; background:#9aa; display:inline-block;}
.lamp i.on{background:var(--green); box-shadow:0 0 6px var(--green2);}
.lamp i.busy{background:var(--warn); box-shadow:0 0 6px var(--warn);}
#playCtl{display:flex; align-items:center; gap:8px;}
#playCtl button{
  min-width:34px; height:30px; border:1px solid var(--line); border-radius:5px;
  background:var(--panel3); color:var(--deep); font-size:14px; cursor:pointer;
}
#playCtl button:hover{background:#dce6fb;}
#playCtl button.active{background:var(--blue); color:#fff;}
#speedSel{height:30px; border:1px solid var(--line); border-radius:5px; background:var(--panel3); color:var(--deep);}
#progWrap{flex:1; display:flex; align-items:center; gap:8px; min-width:120px;}
#progWrap span{font-size:11px; color:var(--dim); white-space:nowrap;}
#progSlider{flex:1; accent-color:var(--magenta);}
/* ---------- 页签 ---------- */
#tabs{height:40px; flex:0 0 40px; display:flex; align-items:stretch; background:var(--panel2); border-bottom:1px solid var(--line2); z-index:19;}
#tabs .tab{
  padding:0 26px; display:flex; align-items:center; font-size:14px; cursor:pointer;
  border-right:1px solid var(--line2); color:var(--dim); user-select:none;
}
#tabs .tab .n{display:inline-flex; width:20px; height:20px; margin-right:8px; border-radius:50%; background:#c6cfe8; color:#fff; align-items:center; justify-content:center; font-size:12px;}
#tabs .tab.active{background:#fff; color:var(--deep); font-weight:700; box-shadow:inset 0 -3px 0 var(--magenta);}
#tabs .tab.active .n{background:var(--magenta);}
/* ---------- 主区 ---------- */
#main{flex:1; position:relative; overflow:hidden;}
.page{position:absolute; inset:0; display:none; flex-direction:column;}
.page.active{display:flex;}
.mode-bar{
  flex:0 0 40px; display:flex; align-items:center; gap:8px; padding:0 12px;
  background:var(--panel); border-bottom:1px solid var(--line2); overflow-x:auto; z-index:5;
}
.mode-bar .mbtn{
  padding:5px 13px; border:1px solid var(--line); border-radius:14px; background:#fff;
  color:var(--deep); font-size:12.5px; cursor:pointer; white-space:nowrap;
}
.mode-bar .mbtn:hover{background:#e8eefc;}
.mode-bar .mbtn.active{background:var(--magenta); border-color:var(--magenta); color:#fff;}
.mode-bar .sep{width:1px; height:22px; background:var(--line2); margin:0 4px;}
.mode-bar .hint{font-size:11px; color:var(--dim); margin-left:auto; white-space:nowrap;}
.scene-wrap{flex:1; position:relative; overflow:hidden; background:var(--bg);}
.scene-wrap svg{width:100%; height:100%; display:block;}
.desc-card{
  position:absolute; left:14px; bottom:14px; max-width:520px; z-index:8;
  background:rgba(255,255,255,.94); border:1px solid var(--line); border-left:4px solid var(--magenta);
  border-radius:8px; padding:10px 14px; font-size:12.5px; line-height:1.65; box-shadow:0 3px 14px rgba(30,50,110,.18);
}
.desc-card b{color:var(--magenta);}
.desc-card .en{color:var(--dim); font-size:11px;}
.phase-bar{
  position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:8; display:flex; gap:6px;
}
.phase-bar .pbtn{
  padding:5px 14px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.92);
  font-size:12.5px; cursor:pointer; color:var(--deep);
}
.phase-bar .pbtn.active{background:var(--blue); color:#fff;}
/* ---------- 图表区 ---------- */
.charts-row{flex:0 0 220px; display:flex; gap:10px; padding:6px 10px; background:var(--panel2); border-top:1px solid var(--line2); overflow:hidden; min-height:0;}
.charts-row canvas{flex:1; background:#fdfefe; border:1px solid var(--line2); border-radius:6px; min-width:0; height:100%;}
/* ---------- MS 页布局 ---------- */
#page-ms .ms-layout{flex:1; display:flex; min-height:0;}
#page-ms .ms-left{flex:1.55; display:flex; flex-direction:column; min-width:0;}
#page-ms .ms-left .scene-wrap{flex:1;}
#page-ms .ms-charts{flex:0 0 236px; display:flex; flex-direction:column; gap:6px; padding:6px 10px; background:var(--panel2); border-top:1px solid var(--line2); overflow:hidden; min-height:0;}
#page-ms .spec-row{flex:1; display:flex; gap:8px; min-height:0;}
#page-ms .spec-row canvas{flex:1; background:#f2fbfc; border:1px solid var(--line2); border-radius:5px; min-width:0; min-height:0; height:100%;}
#mrmCanvas{flex:1; background:#fdfefe; border:1px solid var(--line2); border-radius:5px; min-height:0;}
#page-ms .ms-right{
  flex:0 0 332px; overflow-y:auto; background:var(--panel); border-left:2px solid var(--line);
  padding:10px 12px 30px;
}
/* ---------- Tune Diagnostics 面板 ---------- */
#tunePanel h4{
  font-size:12.5px; color:var(--deep); border-bottom:1px solid var(--line2); padding-bottom:3px; margin:12px 0 6px;
}
#tunePanel h4:first-child{margin-top:0;}
.tgrid{display:grid; grid-template-columns:1fr auto; gap:2px 10px; font-size:11.5px;}
.tgrid .k{color:var(--dim);}
.tgrid .v{font-family:"SF Mono",Consolas,monospace; color:var(--magenta); text-align:right; min-width:74px;}
.tgrid .v.warn{color:var(--warn);} .tgrid .v.bad{color:var(--bad);}
.trow3{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:2px 6px; font-size:11px; margin-top:3px;}
.trow3 .hd{color:var(--dim); font-size:10px;}
.trow3 .c{font-family:Consolas,monospace; color:var(--magenta); text-align:right;}
.vacbar{display:flex; gap:3px; margin-top:5px;}
.vacbar i{flex:1; height:9px; border-radius:2px; background:#c8d2ec;}
.vacbar i.ok{background:var(--green);}
/* ---------- 参数面板 ---------- */
.param-panel{
  flex:0 0 252px; background:var(--panel); border-top:2px solid var(--line);
  display:flex; overflow:hidden; z-index:6;
}
.param-panel.collapsed{flex-basis:34px;}
.param-panel .pp-head{
  flex:0 0 34px; writing-mode:vertical-rl; text-orientation:mixed; display:flex; align-items:center; justify-content:center;
  background:var(--blue); color:#fff; font-size:12px; letter-spacing:3px; cursor:pointer; user-select:none;
}
.param-body{flex:1; display:flex; overflow:hidden;}
.pp-left{flex:1; overflow-y:auto; padding:10px 14px; border-right:1px solid var(--line2);}
.pp-right{flex:1.25; overflow-y:auto; padding:10px 14px;}
.pp-left h5,.pp-right h5{font-size:12.5px; color:var(--magenta); margin-bottom:8px;}
.frow{display:flex; align-items:center; gap:8px; margin-bottom:7px; font-size:12px;}
.frow label{flex:0 0 128px; color:var(--deep);}
.frow input[type=number],.frow select{
  width:92px; height:24px; border:1px solid var(--line); border-radius:4px; background:#fff; padding:0 6px; font-size:12px;
}
.frow .unit{color:var(--dim); font-size:11px;}
.frow input[type=checkbox]{accent-color:var(--magenta);}
.fbtn{
  padding:4px 12px; border:1px solid var(--line); border-radius:4px; background:#fff; cursor:pointer; font-size:12px; color:var(--deep);
}
.fbtn.primary{background:var(--blue); color:#fff;}
.grad-table{width:100%; border-collapse:collapse; font-size:11.5px; margin:4px 0 8px;}
.grad-table th{background:var(--panel2); color:var(--deep); font-weight:600; padding:3px 4px; border:1px solid var(--line2);}
.grad-table td{border:1px solid var(--line2); padding:1px 2px; text-align:center;}
.grad-table input{width:56px; border:none; background:transparent; text-align:center; font-size:11.5px;}
.comp-list{display:flex; flex-wrap:wrap; gap:3px 10px; font-size:11px;}
.comp-list label{display:inline-flex; gap:4px; align-items:center; color:var(--deep);}
.comp-list label.tr-ok{color:var(--deep);} 
.readout{display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; font-size:11.5px; margin-top:6px;}
.readout .rk{color:var(--dim);} .readout .rv{font-family:Consolas,monospace; color:var(--magenta); text-align:right;}
.readout .rv.warn{color:var(--warn);} .readout .rv.bad{color:var(--bad);}
/* ---------- SVG 通用 ---------- */
text{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; user-select:none;}
.tube{stroke:#3a5fa8; stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.tube-thin{stroke:#3a5fa8; stroke-width:1.6; fill:none;}
.tube-flow{stroke:var(--green); stroke-width:4.6; fill:none; opacity:.0; stroke-linecap:round;}
.tube-flow.on{opacity:.55;}
.tube-flow.anim{stroke-dasharray:7 11; animation:flowdash .55s linear infinite;}
@keyframes flowdash{to{stroke-dashoffset:-18;}}
.mag-lab{fill:var(--magenta); font-size:11.5px; font-weight:600;}
.val-lab{fill:var(--magenta); font-size:10.5px; font-weight:700; font-family:Consolas,monospace;}
.comp-lab{fill:var(--deep); font-size:11.5px;}
.comp-lab-s{fill:var(--deep); font-size:10px;}
.dim-lab{fill:var(--dim); font-size:10px;}
.en-lab{fill:var(--dim); font-size:9.5px; font-style:italic;}
.zone-lab{fill:#44508c; font-size:12px; font-weight:700; letter-spacing:1px;}
.piston{stroke:#445; stroke-width:3; stroke-linecap:round;}
.needle-line{stroke:#333; stroke-width:3; stroke-linecap:round;}
.glow{filter:drop-shadow(0 0 3px rgba(0,166,81,.9));}
.badge-tut{
  position:absolute; right:12px; top:8px; z-index:9; font-size:10.5px; color:#778;
  background:rgba(255,255,255,.8); border:1px dashed #99a; border-radius:10px; padding:2px 10px;
}
/* Hybrid console: reference A shell, reference B fluidics organisation. */
#topbar .logo{font-size:16px}#topbar .fbtn{white-space:nowrap}#tabs .tab{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}.mode-bar{flex-basis:auto;min-height:42px;flex-wrap:wrap;gap:5px;padding:6px 10px;overflow:visible}.mode-bar .mbtn{font-size:11.5px;padding:4px 10px}.mode-bar .hint{font-size:10px}.lc-layout{display:flex;flex:1;min-height:0;overflow:hidden}.lc-left{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}.lc-left .scene-wrap{min-height:0}.lc-right{width:342px;flex:0 0 342px;display:flex;flex-direction:column;background:var(--panel);border-left:2px solid var(--line);min-height:0}.side-heading{display:flex;align-items:center;gap:7px;padding:9px 10px;background:var(--panel2);border-bottom:1px solid var(--line2);font-size:12px}.side-heading .fbtn:first-of-type{margin-left:auto}.side-tabs{display:flex;padding:7px 10px;gap:5px;border-bottom:1px solid var(--line2)}.side-tabs button{flex:1;border:1px solid var(--line2);background:white;border-radius:4px;padding:5px;font-size:11px;color:var(--deep);cursor:pointer}.side-tabs button.active{background:var(--blue);color:#fff;border-color:var(--blue)}.lc-right .param-body{display:block;overflow-y:auto;min-height:0;padding:10px 12px;scrollbar-width:thin;flex:1}.lc-right .pp-left,.lc-right .pp-right{padding:0;border:0;overflow:visible}.lc-right .pp-right,#lcCompoundsPanel{display:none}.side-bottom{padding:8px 12px;display:flex;gap:8px;border-top:1px solid var(--line2)}.lc-right .frow label{flex:1;font-size:11.5px}.lc-right .frow input,.lc-right .frow select{width:83px;border-color:var(--line2)}.lc-right h5{font-size:12px;color:var(--magenta);margin:9px 0 10px}.default-hint{font-size:10px;color:var(--dim);line-height:1.65;margin:10px 0}.live-strip{display:flex;justify-content:space-around;gap:10px;padding:7px 10px;background:var(--panel3);border-bottom:1px solid var(--line2);font-size:10px;white-space:nowrap}.live-strip b{color:var(--magenta);font:11px Consolas,monospace;margin-left:5px}.lc-description{font-size:11px;line-height:1.65;padding:6px 12px;background:#f6f8ff;border-top:1px solid var(--line2);min-height:42px;flex-shrink:0}.route-strip{font-size:10.5px;padding:5px 12px;color:var(--blue);background:var(--panel2);flex-shrink:0;min-height:25px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chart-header{display:flex;gap:10px;align-items:center;padding:4px 10px;font-size:11px;background:var(--panel2);border-top:1px solid var(--line2)}.chart-header small{color:var(--dim);font-size:9px}.chart-header .fbtn{margin-left:auto;font-size:10px;padding:2px 8px}.lc-left .charts-row{flex:0 0 clamp(130px,20vh,185px);border-top:0;padding:4px 10px 8px;gap:8px}.lc-left .charts-row canvas:first-child{flex:1.6}.lc-left .charts-row canvas:last-child{flex:1}.lc-right.collapsed{width:36px;flex-basis:36px}.lc-right.collapsed .side-heading{writing-mode:vertical-rl;display:flex;height:100%;padding:10px 6px;gap:14px}.lc-right.collapsed .side-heading>b{font-size:11px;letter-spacing:2px}.lc-right.collapsed #lcDefault,.lc-right.collapsed .param-body,.lc-right.collapsed .side-tabs,.lc-right.collapsed .side-bottom{display:none}.lc-right.collapsed #lcCollapse{margin:0;padding:4px}.compound-item{display:flex;align-items:center;gap:7px;font-size:11px;padding:7px 0;border-bottom:1px solid #c6d1e7}.compound-item small{margin-left:auto;color:var(--magenta);font:10px Consolas,monospace}.compound-item i{height:7px;width:7px;border-radius:50%}.lc-panel{fill:#edf1fa;stroke:#a9b8d2;stroke-width:1}.fluid-title{fill:var(--deep);font-size:14px;font-weight:700}.fluid-sub{fill:var(--dim);font-size:11px}.fluid-label{fill:var(--deep);font-size:12px}.fluid-value{fill:var(--magenta);font:11px Consolas,monospace}.fluid-tube{fill:none;stroke:#b4bfd6;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.fluid-flow{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:2 13}.fluid-component{cursor:pointer}.fluid-component:hover .component-outline{stroke:var(--magenta);stroke-width:2}.overview-story{background:var(--panel);border-top:1px solid var(--line2);padding:10px 16px;font-size:12px;line-height:1.7;flex-shrink:0;min-height:56px}.overview-story b{color:var(--magenta)}#page-overview .scene-wrap{min-height:0}#page-overview .badge-tut{font-size:9px}#page-ms .ms-right{flex-basis:342px;scrollbar-width:thin}#page-ms .ms-charts{flex-basis:clamp(185px,28vh,250px)}.ms-right .tgrid .k{display:flex;justify-content:space-between;gap:5px}.ms-right h4{margin-top:12px}.ms-right .default-hint{border-top:1px solid var(--line2);padding-top:8px}#page-ms .desc-card{max-width:480px;font-size:11px;padding:7px 10px;bottom:8px;left:10px;line-height:1.6}.mode-bar .hint{display:none}dialog{width:min(1020px,90vw);max-height:88vh;border:1px solid var(--line);border-radius:8px;background:var(--panel3);color:var(--deep);padding:18px;overflow:auto}dialog::backdrop{background:#16244a80}.dialog-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.dialog-title button{border:0;background:none;font-size:25px;color:var(--blue);cursor:pointer}#referenceBody p{font-size:12px;line-height:1.9;margin:10px 0}#referenceBody img{max-width:100%;max-height:66vh;object-fit:contain}.ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.ref-grid button{border:1px solid var(--line2);border-radius:5px;background:white;padding:8px;cursor:pointer;color:var(--deep);font-size:11px}.ref-grid img{width:100%;height:140px;object-fit:contain;display:block;margin-bottom:6px}.ref-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:15px}.validation-error{color:#b02040;font-size:11px;min-height:20px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#notification{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);border-radius:6px;padding:9px 18px;background:var(--deep);color:white;z-index:50;font-size:12px;opacity:0;pointer-events:none}#notification.show{opacity:1}
@media(max-width:1150px){.lc-right,#page-ms .ms-right{width:302px;flex-basis:302px}.mode-bar .mbtn{padding:4px 8px;font-size:10.5px}.live-strip{gap:5px;font-size:9px}.live-strip b{font-size:10px}.lc-left .charts-row{flex-basis:140px}#progWrap{min-width:90px}#progWrap span{max-width:140px;overflow:hidden;text-overflow:ellipsis}.mode-bar{min-height:38px}.logo small{display:none}}
@media(max-height:750px){#topbar{height:44px;flex-basis:44px}#tabs{height:35px;flex-basis:35px}.lc-left .charts-row{flex-basis:125px}#page-ms .ms-charts{flex-basis:185px}.lc-description{min-height:34px;padding-top:4px;padding-bottom:4px;font-size:10px}.overview-story{padding:7px 12px;font-size:11px;min-height:46px}.side-heading{padding:6px 10px}.side-tabs{padding:5px 8px}}
@media(max-width:800px){#topbar{gap:8px;padding:0 8px}#topbar .lamp{display:none}#topbar .logo{font-size:13px}#topbar #openReferences{font-size:10px}#topbar #openHelp{display:none}#progWrap span{display:none}#tabs .tab{flex:1;font-size:11px;padding:0 8px;justify-content:center}.lc-right,#page-ms .ms-right{width:270px;flex-basis:270px}.live-strip{flex-wrap:wrap;justify-content:flex-start;padding:4px 8px}.lc-left .charts-row canvas:last-child{display:none}.lc-description{max-height:66px;overflow:auto}.lc-right .frow label{font-size:10px}.lc-right .frow{gap:4px}.lc-right .frow .unit{font-size:9px}.badge-tut{display:none}}
/* Fixed stator / metal fittings, with a visibly rotating valve rotor. */
.fluid-port-number{fill:#17334f;font:bold 12px Consolas,monospace;paint-order:stroke;stroke:#f1f5fc;stroke-width:3px;stroke-linejoin:round}
.fluid-valve-state{fill:#f1f5fc;font:bold 8px Consolas,monospace;letter-spacing:.1px}

/* Console MS Display: the mode explanation stays below the unobstructed optics. */
.ms-description{flex-shrink:0;padding:6px 12px;font-size:11px;line-height:1.6;background:#f6f8ff;border-top:1px solid var(--line2);min-height:42px}.ms-description b{color:var(--magenta)}
#svgMS .ms-label{fill:#233c71;font:17px system-ui,sans-serif}#svgMS .ms-small{fill:#405879;font:14px system-ui,sans-serif}#svgMS .ms-readout{fill:#193b69;font:bold 16px Consolas,monospace}#svgMS .ms-heading{fill:#213b71;font:bold 21px system-ui,sans-serif}

#tunePanel .ms-source-grid{grid-template-columns:minmax(0,1fr);gap:4px}#tunePanel .ms-source-grid .k{display:grid;grid-template-columns:minmax(0,1fr) 70px;align-items:center;gap:8px}#tunePanel .tgrid:not(.ms-source-grid){grid-template-columns:minmax(0,1fr) 74px}#tunePanel .tgrid .k{min-width:0}#tunePanel .tgrid .v{min-width:0}#tunePanel .ms-source-grid input{flex-shrink:0}#tunePanel .fbtn{margin:0 3px 5px 0}

/* Component knowledge cards and keyboard-accessible SVG targets. */
.component-interactive{cursor:pointer;outline:none}.component-interactive:hover>rect.component-hit,.component-interactive:focus>rect.component-hit{stroke:#2473bb;stroke-width:2;fill:#4f91cc15}.component-interactive:focus-visible{filter:drop-shadow(0 0 3px #1266ae)}.component-pipe-hit{pointer-events:stroke;stroke:transparent;stroke-width:12;fill:none}.component-pipe-hit:hover,.component-pipe-hit:focus{stroke:#297abb33}
#referenceDialog.component-dialog{width:min(1080px,94vw);max-width:1080px;height:min(750px,87vh);padding:0;overflow:hidden}.component-dialog .dialog-title{padding:14px 18px;border-bottom:1px solid #bccbe0}.component-dialog #referenceBody{padding:0;height:calc(100% - 58px);overflow:hidden}.component-shell{display:grid;grid-template-columns:258px minmax(0,1fr);height:100%;min-height:0}.component-nav{padding:14px;display:flex;flex-direction:column;gap:9px;background:#e7edf8;border-right:1px solid #bccbe0;min-height:0}.component-nav input,.component-nav select{width:100%;box-sizing:border-box;padding:8px;border:1px solid #a4b6d0;border-radius:4px;font-size:13px;background:white}.component-count{font-size:12px;color:#60738b}.component-list{overflow:auto;min-height:0}.component-entry{display:block;width:100%;text-align:left;padding:10px 9px;margin-bottom:5px;border:1px solid transparent;border-radius:4px;background:transparent;color:#263e59;cursor:pointer;font-size:13px}.component-entry small{display:block;font-size:11px;color:#677c97;margin-top:4px}.component-entry:hover{background:#d3e3f5}.component-entry[aria-current=true]{background:#fff;border-color:#6f9bcd;box-shadow:0 1px 3px #59739320}.component-detail{padding:22px 28px;overflow:auto;min-width:0;line-height:1.65;font-size:14px;color:#283e55}.component-detail h2{font-size:22px;margin:7px 0 0}.component-en{color:#667b94;font-size:13px;margin-bottom:19px}.component-group{background:#dce9f7;border-radius:4px;padding:3px 7px;color:#315b89;font-size:12px}.component-detail section{border-top:1px solid #d7e0ed;margin-top:17px;padding-top:12px}.component-detail h3{margin:0 0 7px;font-size:15px;color:#1e5388}.component-detail p{margin:7px 0}.component-detail ul{padding-left:20px;margin:6px 0}.component-detail li{margin:5px 0}.component-source{display:block;color:#175c9d;margin-top:12px}.component-source-scope{display:block;color:#687a90;font-size:12px}.component-chapter{color:#596f8b;font-size:12px}.component-related{display:flex;flex-wrap:wrap;gap:7px}.component-detail details{margin-top:18px}.component-detail summary{cursor:pointer;color:#195e9e}.component-detail img{max-width:100%;height:auto}.component-detail button:focus-visible,.component-nav button:focus-visible{outline:2px solid #216caa;outline-offset:1px}
@media(max-width:800px){.component-shell{grid-template-columns:190px minmax(0,1fr)}.component-detail{padding:16px}.component-nav{padding:9px}}@media(max-width:540px){.component-shell{grid-template-columns:135px minmax(0,1fr)}.component-detail{padding:12px;font-size:13px}.component-detail h2{font-size:18px}.component-entry{font-size:12px;padding:7px 4px}.component-entry small{display:none}}

.component-dialog .dialog-title{margin-bottom:0;height:58px;box-sizing:border-box}.component-dialog #referenceBody .component-detail p{font-size:14px;line-height:1.65}#topbar #openComponents{font-size:11px}

#referenceDialog.component-dialog{margin:auto}

/* Compact, simultaneous text/photo reading. The two panes scroll independently. */
#referenceDialog.component-dialog{width:min(1180px,94vw);max-width:1180px}.component-shell{grid-template-columns:220px minmax(0,1fr)}.component-detail{padding:0;overflow:hidden;display:flex;flex-direction:column;min-height:0}.component-detail-header{padding:17px 22px 10px;flex-shrink:0;border-bottom:1px solid #d3deed}.component-detail h2{font-size:21px;margin:5px 0 1px}.component-detail-header .component-en{margin-bottom:0}.component-reader{display:grid;grid-template-columns:minmax(0,1fr) 228px;gap:0;flex:1;min-height:0;overflow:hidden}.component-text{overflow:auto;min-width:0;padding:4px 22px 20px}.component-text section:first-child{border-top:0;margin-top:7px;padding-top:6px}.component-text section{margin-top:13px;padding-top:10px}.component-photos{overflow:auto;padding:14px 12px;background:#eaf0f9;border-left:1px solid #c9d8e9;min-height:0}.component-detail .component-photos h3{margin:0;font-size:14px}.photo-hint{font-size:10px;color:#627790;margin:3px 0 12px}.photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px}.photo-grid figure{margin:0;min-width:0}.photo-thumb{display:block;width:100%;height:86px;border:1px solid #b5c8df;padding:4px;border-radius:5px;background:#fff;cursor:zoom-in;box-shadow:0 1px 3px #68809a12}.photo-thumb:hover,.photo-thumb:focus-visible{border-color:#1d6cb2;outline:2px solid #78a5d15c}.component-dialog #referenceBody .photo-thumb img{display:block;width:100%;height:100%;max-height:100%;object-fit:contain}.photo-grid figcaption{font-size:10px;line-height:1.45;margin-top:4px;color:#334e6f;overflow-wrap:anywhere}.photo-relation{display:block;font-size:9px;color:#778da7;margin-bottom:1px}.photo-source{font-size:9px;color:#205e9a;display:block;margin-top:3px}.component-dialog #referenceBody p.photo-evidence-note{font-size:11px;line-height:1.55;color:#536b88;margin:15px 0 0;padding:10px 0 0;border-top:1px solid #cbd9e9}.component-detail .component-text details img{max-width:100%;height:auto}
#componentPhotoDialog{margin:auto;padding:0;width:min(1100px,94vw);max-width:1100px;max-height:92vh;overflow:auto;background:#f4f7fc}.photo-view-title{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-bottom:1px solid #c5d4e8}.photo-view-title h3{font-size:15px;margin:0}.photo-view-title button{background:none;border:0;font-size:27px;color:#35628e;cursor:pointer}.photo-view-stage{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;align-items:center;gap:8px;padding:12px}.photo-view-stage button{height:48px;background:#e1eaf7;border:1px solid #adbfda;color:#326395;font-size:27px;border-radius:4px;cursor:pointer}.photo-view-stage img{width:100%;height:min(60vh,580px);object-fit:contain;background:#fff}.photo-view-meta{padding:0 22px;color:#48627d;font-size:12px;line-height:1.7;overflow-wrap:anywhere}.photo-view-meta p{margin:4px 0}.photo-view-meta a{color:#165e9e}.photo-view-count{text-align:center;padding:10px;font-size:12px;color:#687e99}
@media(max-width:1100px){.component-shell{grid-template-columns:180px minmax(0,1fr)}.component-reader{grid-template-columns:minmax(0,1fr) 186px}.component-text{padding-left:16px;padding-right:16px}.component-photos{padding:12px 8px}.photo-thumb{height:73px}.component-detail-header{padding-left:16px;padding-right:16px}}
@media(max-width:780px){.component-shell{grid-template-columns:148px minmax(0,1fr)}.component-reader{display:flex;flex-direction:column;overflow:auto}.component-text{overflow:visible;order:2}.component-photos{order:1;flex-shrink:0;overflow:visible;border-left:0;border-bottom:1px solid #c9d8e9}.photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.photo-evidence-note{max-height:70px;overflow:auto}.photo-thumb{height:72px}.component-detail-header{padding:10px 12px}.component-detail h2{font-size:17px}}
@media(max-width:540px){.component-shell{grid-template-columns:125px minmax(0,1fr)}.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.photo-grid figure:nth-child(n+5){display:none}.photo-thumb{height:68px}.component-text{padding:4px 12px 16px}}

/* Official component imagery: retain compact thumbnails and expose figure keys on enlargement. */
.photo-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:4px 16px;padding-left:18px;margin:7px 0;font-size:12px;color:#314a60}
.photo-mirror-note{display:block;margin-top:6px;color:#62798c;font-size:11px}
.photo-view-meta{max-height:28vh;overflow:auto}

/* Manufacturer manuals remain in a compact, independently scrollable reference dialog. */
#referenceDialog.manual-dialog{width:min(1060px,94vw);padding:0;overflow:hidden;max-height:88vh;margin:auto}
.manual-dialog .dialog-title{padding:14px 20px;margin:0;border-bottom:1px solid #b9cbe0}
.manual-dialog #referenceBody{overflow:auto;max-height:calc(88vh - 64px);padding:14px 20px 20px}
.manual-intro{font-size:12px;color:#586e87;line-height:1.7;margin-bottom:12px}
.manual-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.manual-toolbar input{flex:1;min-width:180px;padding:8px 10px;border:1px solid #aec2dc;border-radius:4px;background:#fff;color:#294666}
.manual-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 8px}.manual-tabs button[aria-pressed=true]{background:#2f6498;color:#fff;border-color:#2f6498}
.manual-count{font-size:11px;color:#647b93;margin-bottom:10px}.manual-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.manual-card{background:#fff;border:1px solid #c3d1e3;border-radius:6px;padding:12px 14px;min-width:0;display:flex;flex-direction:column}
.manual-badge{font-size:10px;color:#657d96}.manual-card h4{margin:5px 0;font-size:14px;color:#294666}.manual-meta{font:11px Consolas,monospace;color:#47688d}
.manual-dialog #referenceBody .manual-card p{font-size:12px;line-height:1.65;margin:8px 0}.manual-scope{font-size:11px;line-height:1.6;color:#6d7f91;margin-bottom:9px}
.manual-link{font-size:12px;color:#215f98;margin-top:auto;align-self:flex-start}.manual-access-note{margin-top:15px;font-size:11px;line-height:1.7;color:#697d93}.manual-access-note a{color:#215f98}
.component-detail-header{position:relative}.component-manual-link{position:absolute;right:16px;top:14px}.component-detail-header h2{padding-right:100px}.manual-shortcut{margin-left:auto;white-space:nowrap;font-size:11px}
@media(max-width:700px){.manual-grid{grid-template-columns:1fr}.manual-dialog #referenceBody{padding:12px}.manual-toolbar .fbtn{font-size:11px}.component-manual-link{position:static;margin:5px 0}.component-detail-header h2{padding-right:0}}