:root{font-family:"Segoe UI","Microsoft YaHei",sans-serif;font-size:12px;color:#25313a;background:#f0f0f0;line-height:1.35;--line:#bcc5cb;--muted:#6d7a82}
*{box-sizing:border-box}body{margin:0;min-width:1060px}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}input,select{min-width:0;border:1px solid #bfc8ce;border-radius:2px;background:#fff;color:#25313a}input:focus,select:focus{outline:1px solid #538fa9;border-color:#538fa9}button:focus-visible{outline:2px solid #538fa9;outline-offset:1px}[hidden]{display:none!important}
.app-shell{height:100vh;min-height:600px;display:flex;flex-direction:column}.topbar{height:40px;flex:none;background:#2a333d;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 12px}.brand{display:flex;align-items:center;gap:8px}.brand-mark{border:1px solid #8abcd0;color:#bde5ed;padding:2px 5px;font-weight:bold}.brand strong{font-size:13px;font-weight:600}.brand small{display:none}.connection-chip{display:flex;gap:8px;align-items:center;font-size:11px}.dot{height:8px;width:8px;border-radius:50%}.offline{background:#8e9aa5}.online{background:#6dc28d}.product-chip{border:1px solid #657c8d;padding:2px 6px}.workspace{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 280px}.main-content{grid-column:1;grid-row:1;padding:8px;min-width:0;min-height:0;overflow:auto}.sidebar{grid-column:2;grid-row:1;border-left:1px solid #c4cccf;background:#e3ebeb;display:flex;flex-direction:column;gap:7px;padding:8px;min-height:0;overflow:hidden}.side-card{border:1px solid #c3cdd1;background:#f7f9f9;padding:7px;flex:none;min-width:0}.section-title{display:flex;align-items:center;justify-content:space-between;font-weight:600;margin-bottom:6px;font-size:12px}.muted{font-size:11px;color:var(--muted)}.nav-card{display:flex;padding:0;border:0;gap:3px;background:transparent}.nav-item{flex:1;background:#3a4855;color:#dce4e8;border:0;padding:6px;min-width:0;font-size:12px}.nav-item.active{background:#597989;color:#fff}.nav-item:hover{background:#4c6675}.connection-card label{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.connection-card select{width:122px;height:26px;padding:3px}.button-row{display:grid;grid-template-columns:1fr 65px;gap:4px}.primary,.secondary,.ghost,.outline,.action-btn,.toggle-btn,.set-btn{border:1px solid #b8c2c8;border-radius:2px;padding:4px 7px;min-height:26px;background:#fff;color:#263e48;white-space:nowrap}.primary{background:#e2f0f1}.secondary{width:100%;margin-top:4px;background:#fff0d6}.ghost{background:#f3f4f4}.outline{background:#f6f8f8}.tip{color:#697881;font-size:11px;line-height:1.4;margin-top:6px;min-height:31px}.quick-row{display:grid;grid-template-columns:1fr 46px;gap:4px}.quick-row input{height:28px;padding:4px 6px;background:#efffee}.quick-row button,.quick-hints button{border:1px solid #bdc9cc;background:#fff;border-radius:2px;padding:3px 5px;min-height:26px}.quick-hints{display:flex;gap:4px;margin-top:4px}.quick-hints button{flex:1;font-size:11px}.log-card{flex:1;min-height:0;display:flex;flex-direction:column;background:#faebd7}.log-card .section-title{margin-bottom:5px}.log-card pre{flex:1;min-height:0;margin:0;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;color:#38434a;font:11px/1.45 Consolas,monospace}.link-button{padding:0 3px;background:transparent;border:0;color:#416c80;font-size:11px}
.view{max-width:1600px;margin:0 auto}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px;margin-bottom:6px}.page-heading h1{font-size:15px;font-weight:600;margin:0}.heading-actions{display:flex;align-items:center;gap:5px;flex:none;color:#6a7983;font-size:11px}.eyebrow{font-size:11px;color:#688492;margin:0 0 4px}.page-heading p:not(.eyebrow){font-size:12px;color:#7a8790;margin:5px 0}.product-layout{display:grid;gap:6px}.layout-2152{grid-template-columns:minmax(0,2.35fr) minmax(225px,1fr)}.product-left,.product-right{display:flex;flex-direction:column;gap:6px;min-width:0}.control-panel{border:1px solid #b6c1c7;border-radius:2px;padding:6px;min-width:0;background:#f4f5f5}.panel-title{font-weight:600;font-size:12px;margin:0 0 5px;color:#364c57;line-height:16px}.blue-panel{background:#ffffe1}.cyan-panel{background:#b0e0e6}.purple-panel{background:#b9d1ea}.green-panel,.pd1-panel{background:#b0e0b6}.slate-panel{background:#edf1f1}.field-grid{display:grid;grid-template-columns:minmax(0,1fr) 38px;gap:4px;align-items:center;min-width:0}.field-grid label{display:grid;grid-template-columns:78px minmax(0,1fr);gap:3px;align-items:center;position:relative;min-width:0;font-size:11px;white-space:nowrap;line-height:24px}.field-grid input,.field-grid select{height:24px;width:100%;margin:0;padding:2px 5px;font:12px Consolas,monospace;text-align:left}.field-grid input{padding-right:24px}.field-grid em{position:absolute;right:4px;font-style:normal;font-size:10px;line-height:24px;color:#839096;pointer-events:none}.set-btn{height:24px;min-height:24px;padding:2px 4px;font-size:11px;align-self:center}.set-btn:hover,.action-btn:hover,.outline:hover,.toggle-btn:hover{background:#e8f0f3}.toggle-btn.on{background:#9bd179;border-color:#78a65d;color:#244317}.toggle-btn.warm{background:#ffb96c}.panel-actions{display:flex;gap:4px;margin:0;min-width:0}.toggle-btn,.action-btn{font-size:11px}.readout-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-bottom:7px}.cyan-panel .readout-row{grid-template-columns:repeat(3,minmax(0,1fr))}.status-card{min-width:0;padding:2px 4px;text-align:center;border:0;background:transparent}.status-card span{display:block;color:#657980;font-size:10px;white-space:nowrap}.status-card strong{display:block;font:20px/1.2 Consolas,monospace;color:#1c3d45;white-space:nowrap;margin:2px 0}.status-card small{display:block;color:#647984;font-size:10px;line-height:1.3}.readout-row .status-card small{display:none}.status-card.alarm{background:#ffc3c3}.ld-controls{display:grid;grid-template-columns:minmax(230px,1fr) minmax(160px,.8fr);gap:8px}.ld-controls .panel-actions{display:grid;grid-template-columns:1fr 1fr}.ld2-controls{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 72px;gap:8px}.ld2-controls>.field-grid:first-child label{grid-template-columns:66px minmax(0,1fr)}.ld2-controls>.field-grid:nth-child(2) label{grid-template-columns:49px minmax(0,1fr)}.ld2-controls>.panel-actions{display:flex;flex-direction:column;justify-content:center}.ld2-controls>.panel-actions button{min-height:57px}.lower-controls{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(230px,1fr);gap:6px}.settings-body{display:grid;grid-template-columns:1fr 1.4fr;gap:4px}.mode-column{display:flex;flex-direction:column;gap:4px;min-width:0}.mode-column .status-card{height:47px;padding:2px 0}.mode-column .status-card strong{font-size:17px}.mode-column .status-card small{display:none}.mode-column button{min-height:32px;flex:1;padding:3px}.lower-controls .field-grid label{grid-template-columns:66px minmax(0,1fr)}.lower-controls>.control-panel{min-height:204px}.product-right .field-grid label{grid-template-columns:80px minmax(0,1fr)}.product-right .control-panel{padding:6px}.product-footer{display:flex;justify-content:flex-end;margin-top:5px;min-height:23px}.product-footer .status-card{display:flex;align-items:center;gap:8px;text-align:right;padding:0 4px}.product-footer .status-card strong{font-size:12px;margin:0}.product-footer .status-card small{font-size:11px}.alarm-banner{background:#ffe1e1;border:1px solid #d99696;color:#9b3333;padding:4px 7px;margin:4px 0;font-size:11px}.layout-2151{grid-template-columns:minmax(0,1fr)}.main-readouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#b0e0b6;border:1px solid #b4c5b8;padding:5px;gap:6px}.main-readouts .status-card strong{font-size:24px}.main-readouts .status-card small{display:none}.ld-row{display:grid;grid-template-columns:minmax(230px,1fr) minmax(0,1.5fr);gap:8px;align-items:center}.cp-panel{border:0;padding:0;background:transparent}.cp-body{display:grid;grid-template-columns:1fr 1fr;gap:8px}.cp-body .field-grid label{grid-template-columns:62px minmax(0,1fr)}.cp-body .field-grid:nth-child(2) label{grid-template-columns:27px minmax(0,1fr)}.tec-pd-row{display:grid;grid-template-columns:2fr 1fr;gap:6px}.tec-body{display:grid;grid-template-columns:1fr 1.1fr;gap:8px}.tec-body>.field-grid label{grid-template-columns:32px minmax(0,1fr)}.temp-column{display:flex;flex-direction:column;justify-content:center;gap:5px}.temp-column .status-card small{display:none}.temp-column .status-card strong{font-size:22px}.temp-column .field-grid label{grid-template-columns:62px minmax(0,1fr)}.pd1-panel .field-grid label{grid-template-columns:66px minmax(0,1fr)}.startup-body{display:grid;grid-template-columns:minmax(230px,1fr) minmax(0,1.5fr);gap:12px}.startup-actions{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:5px}.startup-actions button{min-height:40px}.startup-actions #ld-toggle{grid-column:3;grid-row:2}.startup-actions #tec-toggle{grid-column:2;grid-row:2}.startup-actions #cccp-toggle{grid-column:1;grid-row:2}.startup-actions #startup-toggle{grid-column:3;grid-row:1}.layout-2151>.blue-panel{padding-top:8px;padding-bottom:8px}
.console-grid{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:10px}.empty-panel,.info-panel{border:1px solid #c4cdd2;background:#fff;padding:16px}.empty-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:310px;text-align:center}.empty-panel h2{font-size:18px;margin:6px}.empty-panel p{color:#7b8a91}.empty-icon{font-size:42px;color:#83a6ad}.flow{display:flex;gap:8px;font-size:11px;color:#7b8a91;margin-top:12px}.flow i{font-style:normal}.info-panel h3{font-size:13px;margin:0 0 10px}.info-panel dl{margin:0}.info-panel dl>div{display:flex;justify-content:space-between;border-bottom:1px solid #e8edef;padding:9px 0}.info-panel dd{margin:0}.info-panel dt{color:#7b8a91}.browser-note{margin-top:16px;font-size:11px;color:#7b8a91}.browser-note strong{display:block;margin-bottom:5px}
.product-right .field-grid{row-gap:2px}.product-right .field-grid label,.product-right .field-grid em{line-height:22px}.product-right .field-grid input,.product-right .set-btn{height:22px;min-height:22px}
.lower-controls>.control-panel{min-height:180px}.lower-controls .field-grid{row-gap:2px}.lower-controls .field-grid label,.lower-controls .field-grid em{line-height:22px}.lower-controls .field-grid input,.lower-controls .set-btn{height:22px;min-height:22px}.mode-column .status-card{height:42px}.mode-column button{min-height:29px}
@media(min-height:800px){.product-left{gap:8px}.readout-row{margin-bottom:10px}.control-panel{padding:8px}.field-grid{row-gap:6px}.layout-2151{gap:8px}.main-readouts{padding:9px}.layout-2151>.blue-panel{padding:12px}.startup-actions button{min-height:45px}.product-right .field-grid{row-gap:6px}.product-right .field-grid input,.product-right .set-btn{height:26px;min-height:26px}.product-right .field-grid label,.product-right .field-grid em{line-height:26px}}
@media(max-width:1180px){.workspace{grid-template-columns:minmax(0,1fr) 250px}.main-content{padding:6px}.sidebar{padding:6px;gap:5px}.layout-2152{grid-template-columns:minmax(0,2.25fr) 225px}.ld2-controls{gap:5px;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) 64px}.field-grid{column-gap:3px}.lower-controls{grid-template-columns:minmax(0,1fr) 225px}.ld-controls{grid-template-columns:minmax(210px,1.2fr) minmax(140px,1fr)}.mode-column button{font-size:10px;padding:2px}.product-right .field-grid label{grid-template-columns:74px minmax(0,1fr)}.cp-body{gap:5px}.cp-body .field-grid label{grid-template-columns:52px minmax(0,1fr)}.cp-body .field-grid:nth-child(2) label{grid-template-columns:23px minmax(0,1fr)}.ld-row{grid-template-columns:minmax(220px,1fr) minmax(0,1.4fr)}.tec-body{gap:4px}.console-grid{grid-template-columns:1fr}.info-panel{display:none}}

.product-footer .status-card{margin-left:auto}.product-footer .alarm-banner{flex:1;min-width:0;padding:2px 5px;margin:0;line-height:16px;font-size:10px}

/* Serial page matches the original top selector / three buttons and bottom four-button strip. */
.sidebar{gap:0;padding:6px;background:#f0f0f0}.serial-top{flex:none}.serial-top>select{height:29px;width:100%;border:1px solid #bcc6cc;border-radius:0;background:#fdfdfd;padding:3px 6px}.serial-top-buttons{display:grid;grid-template-columns:repeat(3,1fr);height:30px;margin:3px 0 0}.serial-top-buttons button,.serial-bottom-buttons button{border:0;border-radius:0;background:#fdfdfd;color:#111;font-size:12px;padding:3px 2px;min-width:0;white-space:nowrap}.serial-top-buttons button:hover,.serial-bottom-buttons button:hover{background:#e0ebef}.serial-top-buttons button.on,.serial-bottom-buttons button.on{background:yellowgreen}.sidebar>#log-output{flex:1;min-height:0;margin:0;padding:5px;background:#faebd7;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.5 Consolas,monospace;color:#161616}.serial-tip{flex:none;min-height:20px;line-height:20px;font-size:10px;color:#6f7378;background:#faebd7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.serial-command{flex:none;width:100%;height:30px;border:0;border-radius:0;padding:4px 6px;background:#eeffee}.serial-bottom-buttons{display:grid;grid-template-columns:repeat(4,1fr);height:30px;flex:none}.serial-status{display:grid;grid-template-columns:16px minmax(0,1.5fr) minmax(0,1fr) 37px;align-items:center;height:23px;flex:none;gap:3px;padding:0 2px;font:8px 'Segoe UI',sans-serif;color:#002447}.serial-status>span{white-space:nowrap;text-align:right;overflow:hidden;text-overflow:ellipsis}.serial-status #serial-online{font:20px/1 sans-serif;overflow:visible;text-align:center}.serial-offline{color:#ff3c23}.serial-on{color:#4aab6f}.serial-status .alarm{background:#ffb2a8;color:#990c00}
/* Shorter value boxes leave more room for the buttons beside them. */
.field-grid{grid-template-columns:minmax(0,1fr) 58px}.field-grid .value-box{display:block;position:relative;min-width:0;width:100%;max-width:126px;line-height:1}.field-grid .value-box input,.field-grid .value-box select{width:100%}.field-grid .value-box em{right:4px;top:0}.field-grid input{padding-right:21px}.field-grid .value-box:not(:has(em)) input{padding-right:4px}.field-grid .value-box em{line-height:24px}.set-btn{font-size:12px;padding:2px 8px}.ld-controls{grid-template-columns:minmax(260px,1fr) minmax(180px,.9fr)}.ld2-controls{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr) 92px}.product-right .field-grid{grid-template-columns:minmax(0,1fr) 52px}.product-right .field-grid .value-box em,.lower-controls .field-grid .value-box em{line-height:22px}.cp-body .field-grid{grid-template-columns:minmax(0,1fr) 52px}.product-footer:empty{display:none}
@media(max-width:1180px){.field-grid{grid-template-columns:minmax(0,1fr) 50px}.product-right .field-grid{grid-template-columns:minmax(0,1fr) 46px}.ld-controls{grid-template-columns:minmax(220px,1.1fr) minmax(180px,1fr)}.ld2-controls{grid-template-columns:minmax(0,1.13fr) minmax(0,1fr) 82px}.ld2-controls>.field-grid:first-child label{grid-template-columns:60px minmax(0,1fr)}.ld2-controls>.field-grid:nth-child(2) label{grid-template-columns:42px minmax(0,1fr)}.lower-controls .field-grid label{grid-template-columns:59px minmax(0,1fr)}.product-right .field-grid label{grid-template-columns:70px minmax(0,1fr)}.cp-body .field-grid{grid-template-columns:minmax(0,1fr) 46px}.cp-body .field-grid label{grid-template-columns:48px minmax(0,1fr)}.cp-body .field-grid:nth-child(2) label{grid-template-columns:22px minmax(0,1fr)}}
@media(min-height:800px){.product-right .field-grid .value-box em{line-height:26px}}

/* Match the original WPF shell: reserve a 330px serial column so the status
   strip keeps product, firmware and serial text readable. */
.workspace{grid-template-columns:minmax(0,1fr) 330px}
.serial-status{grid-template-columns:16px 7fr 5fr 3fr}
@media(max-width:1180px){.workspace{grid-template-columns:minmax(0,1fr) 330px}}

/* Use the original WPF icon assets in the browser shell. */
.brand-logo{width:32px;height:32px;object-fit:contain;flex:none}
.brand strong{font-size:16px;font-weight:600;white-space:nowrap}
.serial-status #serial-online{width:16px;height:16px;background-position:center;background-repeat:no-repeat;background-size:contain}
.serial-status #serial-online.serial-offline{background-image:url("offline.png");color:transparent}
.serial-status #serial-online.serial-on{background-image:url("online.png");color:transparent}

/* Keep each value field close to its corresponding setting button, as in WPF. */
.field-grid{grid-template-columns:minmax(0,1fr) 58px}
.field-grid label{grid-template-columns:max-content minmax(0,126px)}
.field-grid .value-box{max-width:126px}
.product-right .field-grid{grid-template-columns:minmax(0,1fr) 52px}
.product-right .field-grid label{grid-template-columns:max-content minmax(0,126px)}
@media(max-width:1180px){.field-grid{grid-template-columns:minmax(0,1fr) 50px}.field-grid label{grid-template-columns:max-content minmax(0,126px)}.product-right .field-grid{grid-template-columns:minmax(0,1fr) 46px}.product-right .field-grid label{grid-template-columns:max-content minmax(0,126px)}}

/* The port picker is now the browser Web Serial button; no HTML port dropdown is used. */
.serial-top>select{display:none}

/* Compact field rows: label, textbox and setting button form one intrinsic-width group. */
.field-grid{grid-template-columns:max-content 58px;width:max-content;max-width:100%;justify-content:start}
.field-grid label{grid-template-columns:max-content 126px;width:max-content}
.field-grid .value-box{width:126px;max-width:126px}
.product-right .field-grid{grid-template-columns:max-content 52px;width:max-content}
.product-right .field-grid label{grid-template-columns:max-content 126px;width:max-content}
@media(max-width:1180px){.field-grid{grid-template-columns:max-content 50px}.product-right .field-grid{grid-template-columns:max-content 46px}}

/* Override the legacy per-panel label widths so every row uses the same spacing. */
.ld-controls .field-grid label,
.ld2-controls .field-grid label,
.lower-controls .field-grid label,
.product-right .field-grid label,
.cp-body .field-grid label,
.tec-body > .field-grid label,
.temp-column .field-grid label,
.pd1-panel .field-grid label,
.startup-body .field-grid label{grid-template-columns:max-content 126px !important;width:max-content}

/* Aligned rows: fixed label/button columns, flexible textbox column. */
.field-grid{grid-template-columns:minmax(0,1fr) 86px !important;width:100%;max-width:none;justify-content:stretch}
.field-grid label{grid-template-columns:max-content minmax(0,1fr) !important;width:100%;min-width:0}
.field-grid .value-box{width:100%;max-width:none;min-width:0}
.product-right .field-grid{grid-template-columns:minmax(0,1fr) 78px !important;width:100%}
.product-right .field-grid label{grid-template-columns:max-content minmax(0,1fr) !important;width:100%}
@media(max-width:1180px){.field-grid{grid-template-columns:minmax(0,1fr) 58px !important}.product-right .field-grid{grid-template-columns:minmax(0,1fr) 54px !important}}

/* Let label cells fill the flexible column; the nested textbox then stretches. */
.field-grid label{width:100% !important}
.field-grid .value-box{width:100% !important;max-width:none !important}

/* Final specificity override for panels that previously fixed textbox width. */
.ld-controls .field-grid label,
.ld2-controls .field-grid label,
.lower-controls .field-grid label,
.product-right .field-grid label,
.cp-body .field-grid label,
.tec-body > .field-grid label,
.temp-column .field-grid label,
.pd1-panel .field-grid label,
.startup-body .field-grid label{grid-template-columns:max-content minmax(0,1fr) !important;width:100% !important}

/* Match Window2152.xaml's 3:4:3 columns: label, flexible textbox, button. */
.field-grid{grid-template-columns:minmax(0,7fr) minmax(0,3fr) !important;width:100%}
.field-grid label{grid-template-columns:minmax(0,3fr) minmax(0,4fr) !important;width:100% !important;gap:6px}
.field-grid .set-btn{width:100%}
.product-right .field-grid{grid-template-columns:minmax(0,7fr) minmax(0,3fr) !important;width:100%}
.product-right .field-grid label{grid-template-columns:minmax(0,3fr) minmax(0,4fr) !important;width:100% !important}
@media(max-width:1180px){.field-grid{grid-template-columns:minmax(0,7fr) minmax(0,3fr) !important}.product-right .field-grid{grid-template-columns:minmax(0,7fr) minmax(0,3fr) !important}}
.ld-controls .field-grid label,
.ld2-controls .field-grid label,
.lower-controls .field-grid label,
.product-right .field-grid label,
.cp-body .field-grid label,
.tec-body > .field-grid label,
.temp-column .field-grid label,
.pd1-panel .field-grid label,
.startup-body .field-grid label{grid-template-columns:minmax(0,3fr) minmax(0,4fr) !important;width:100% !important}