/* 串口通信章节：接线路径、8N1 波形、编码与 CRLF、四字节协议。深色仪器面板，与其它交互一致。 */

.uart-route,.uart-frame,.uart-codec,.uart-proto,.uart-quiz{
  background:#101f26;color:#c9d8ce;border:1px solid #2b444a;border-radius:12px;padding:16px 18px;margin:20px 0;
  box-shadow:0 8px 24px #1b2f2614
}
.uart-route-head,.uart-frame-head,.uart-codec-head,.uart-proto-head,.uart-quiz-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.uart-route-head b,.uart-frame-head b,.uart-codec-head b,.uart-proto-head b,.uart-quiz-head b{font-size:13px;color:#e4efdd}
.uart-frame-head span,.uart-proto-head span{margin-left:auto;font:11px Consolas,monospace;color:#8fae9c}

/* 接线 */
.uart-route-tabs{display:flex;gap:6px;margin-left:auto}
.uart-route-tabs button{background:#1a3038;border:1px solid #2f4d54;border-radius:99px;color:#b6cdbf;font:11px system-ui,sans-serif;padding:5px 10px;cursor:pointer}
.uart-route-tabs button.on{background:#2f5547;border-color:#8ec47f;color:#eaf5e4}
.uart-route-svg{width:100%;height:auto;display:block;margin:4px 0 8px}
.uart-wire{stroke:#5f8f7d;stroke-width:3;fill:none}
.uart-wire.cut{stroke:#a06a58;stroke-dasharray:8 6}
.uart-node rect{fill:#0a171c;stroke:#2b444a}
.uart-node text{fill:#dcebdd;font:12px Consolas,monospace;text-anchor:middle}
.uart-node .uart-node-sub{fill:#8fae9c;font-size:10px}
.uart-node.cut rect{stroke:#a06a58}
.uart-arrow{fill:#8ec47f}
.uart-dir{fill:#cfe0d2;font:11px system-ui,sans-serif}
.uart-cut-note{fill:#e6b39e;font:11px system-ui,sans-serif}
.uart-route-foot{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-top:6px}
.uart-jumper{display:flex;align-items:center;gap:6px;font-size:11px;color:#a3b9ab;white-space:nowrap}
.uart-route-note{margin:0;flex:1;min-width:220px;font-size:11.5px;line-height:1.8;color:#a7c0b2}

/* 波形 */
.uart-frame-controls{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.uart-frame-controls label{display:flex;flex-direction:column;gap:4px;font-size:10px;color:#93ab9c}
.uart-frame-controls select,.uart-frame-controls input{background:#0a171c;border:1px solid #365558;border-radius:6px;color:#e7f2e2;font:12px Consolas,monospace;padding:7px 9px}
.uart-frame-controls button{background:#1d3a42;color:#d6e6da;border:1px solid #365558;border-radius:7px;font:12px system-ui,sans-serif;padding:8px 12px;cursor:pointer}
.uart-frame-controls button:hover{background:#27505a}
.uart-hint{margin-left:auto;font-size:10.5px;color:#7f978b}
.uart-wave-wrap{background:#0a171c;border:1px solid #23393f;border-radius:8px;padding:6px 4px}
.uart-wave{width:100%;height:auto;display:block}
.uart-wave-path{fill:none;stroke:#bce6b4;stroke-width:3}
.uart-guide{stroke:#22383e;stroke-width:1}
.uart-axis{fill:#6f8a80;font:9px Consolas,monospace}
.uart-cursor{stroke:#e7ba76;stroke-width:2}
.uart-bits{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 0}
.uart-bit{flex:1;min-width:44px;background:#0a171c;border:1px solid #23393f;border-radius:6px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:3px;color:#dbe9dd;cursor:pointer}
.uart-bit small{font:9px Consolas,monospace;color:#7f978b}
.uart-bit b{font:14px Consolas,monospace;color:#f0d99a}
.uart-bit.on{border-color:#8ec47f;box-shadow:0 0 0 1px #8ec47f44;background:#1c3a2e}
.uart-bit.start b,.uart-bit.stop b{color:#9fc7e0}
.uart-bit.parity b{color:#e0b0e6}
.uart-summary{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.uart-summary>span{display:flex;flex-direction:column;gap:2px;background:#0a171c;border:1px solid #23393f;border-radius:6px;padding:6px 9px;min-width:92px}
.uart-summary small{font:9px Consolas,monospace;color:#7f978b}
.uart-summary b{font:12px Consolas,monospace;color:#eaf5e4}
.uart-bitnote{font-size:11.5px;color:#a7c0b2;line-height:1.8;margin:10px 0 0;min-height:20px}
.uart-error{font-size:11.5px;color:#e6b39e;margin:6px 0 0;min-height:16px}

/* 编码与 CRLF */
.uart-presets{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.uart-presets button{background:#1a3038;border:1px solid #2f4d54;border-radius:99px;color:#b6cdbf;font:11px Consolas,monospace;padding:5px 10px;cursor:pointer}
.uart-codec-inputrow{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.uart-codec-inputrow input{flex:1;background:#0a171c;border:1px solid #365558;border-radius:6px;color:#e7f2e2;font:13px Consolas,monospace;padding:9px 10px}
.uart-codec-inputrow span{font-size:10.5px;color:#7f978b}
.uart-codec-panes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.uart-pane{background:#0a171c;border:1px solid #23393f;border-radius:8px;padding:9px 11px}
.uart-pane small{display:block;font:9.5px Consolas,monospace;color:#7f978b;margin-bottom:5px}
.uart-pane b{display:block;font:13px Consolas,monospace;color:#f0d99a;word-break:break-all}
.uart-pane span{display:block;margin-top:4px;font-size:10px;color:#8fae9c}
.uart-pane.bad b{color:#e6b39e}
.uart-codec-note{font-size:11.5px;color:#a7c0b2;line-height:1.8;margin:10px 0 0}
.uart-line{margin-top:16px;border-top:1px solid #22383e;padding-top:14px}
.uart-line-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.uart-line-head b{font-size:12px;color:#e4efdd}
.uart-line-head span{margin-left:auto;font-size:11px;color:#9fb6a7}
.uart-line-input input{width:100%;background:#0a171c;border:1px solid #365558;border-radius:6px;color:#e7f2e2;font:13px Consolas,monospace;padding:8px 10px;margin-bottom:8px}
.uart-line-btns{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.uart-line-btns button{background:#1d3a42;color:#d6e6da;border:1px solid #365558;border-radius:7px;font:11.5px system-ui,sans-serif;padding:7px 10px;cursor:pointer}
.uart-line-buf,.uart-line-echo{background:#0a171c;border:1px solid #23393f;border-radius:6px;padding:7px 10px;margin-bottom:6px;display:flex;gap:10px;align-items:baseline}
.uart-line-buf small,.uart-line-echo small{font:9.5px Consolas,monospace;color:#7f978b;white-space:nowrap}
.uart-line-buf b,.uart-line-echo b{font:12px Consolas,monospace;color:#dcebdd;word-break:break-all}

/* 协议 */
.uart-proto-controls{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.uart-proto-controls label{display:flex;flex-direction:column;gap:4px;font-size:10px;color:#93ab9c}
.uart-proto-controls select{background:#0a171c;border:1px solid #365558;border-radius:6px;color:#e7f2e2;font:12px Consolas,monospace;padding:7px 9px}
.uart-badsum{flex-direction:row!important;align-items:center;gap:6px;font-size:11px;color:#a3b9ab;padding-bottom:8px}
.uart-proto-controls button{background:#1d3a42;color:#d6e6da;border:1px solid #365558;border-radius:7px;font:11.5px system-ui,sans-serif;padding:7px 10px;cursor:pointer}
.uart-proto-packet{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#0a171c;border:1px solid #23393f;border-radius:8px;padding:9px 12px}
.uart-proto-packet>span{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:54px}
.uart-proto-packet small{font:9px Consolas,monospace;color:#7f978b}
.uart-proto-packet b{font:15px Consolas,monospace;color:#f0d99a}
.uart-proto-packet>span.bad b{color:#e6b39e}
.uart-proto-packet em{margin-left:auto;font:11px Consolas,monospace;color:#8fae9c;font-style:normal}
.uart-fsm{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 0}
.uart-fsm span{font-size:10.5px;color:#8fa79a;background:#0a171c;border:1px solid #23393f;border-radius:99px;padding:5px 9px}
.uart-fsm span.on{border-color:#8ec47f;color:#eaf5e4;background:#1c3a2e}
.uart-proto-state{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.uart-led{width:18px;height:18px;border-radius:50%;background:#2a3a3f;border:1px solid #3c565c}
.uart-led.on{background:#f0c978;box-shadow:0 0 10px #f0c97888;border-color:#f0c978}
.uart-proto-state>div:not(.uart-led){display:flex;flex-direction:column;gap:2px}
.uart-proto-state small{font:9px Consolas,monospace;color:#7f978b}
.uart-proto-state b{font:12px Consolas,monospace;color:#eaf5e4}
.uart-log{margin:10px 0 0;padding:0;list-style:none;background:#0a171c;border:1px solid #23393f;border-radius:8px;max-height:170px;overflow:auto}
.uart-log li{font:11px/1.7 Consolas,monospace;color:#a7c0b2;padding:4px 10px;border-bottom:1px solid #16292f}
.uart-log li:last-child{border-bottom:0}
.uart-log li.good{color:#a9d9a5}
.uart-log li.bad{color:#e6b39e}
.uart-log li.muted{color:#6f8a80}

/* 测验 */
.uart-quiz-q{margin-bottom:14px;border-top:1px solid #22383e;padding-top:10px}
.uart-quiz-q:first-of-type{border-top:0;padding-top:0}
.uart-quiz-q p{margin:0 0 7px;font-size:12.5px;color:#e6efdf;line-height:1.7}
.uart-quiz-opts{display:flex;gap:8px;flex-wrap:wrap}
.uart-quiz-opts button{background:#0f1c1d;border:1px solid #35503f;border-radius:7px;color:#c8dbcb;font:11.5px system-ui,sans-serif;padding:7px 11px;cursor:pointer}
.uart-quiz-opts button.right{border-color:#8fc47f;background:#1d3526;color:#e6f4dd}
.uart-quiz-opts button.wrong{border-color:#a06a58;background:#33241f;color:#e6b39e}
.uart-quiz-why{margin:6px 0 0;font-size:11px;color:#a7c0b2}
.uart-quiz-sum{margin-left:auto;font:11px Consolas,monospace;color:#8fae9c}

@media(max-width:860px){
  .uart-codec-panes{grid-template-columns:1fr}
  .uart-frame-controls{gap:8px}
  .uart-hint{width:100%;margin-left:0}
  .uart-proto-packet em{margin-left:0;width:100%}
}