*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0f172a;--surface:#1e293b;--border:#334155;--accent:#38bdf8;--green:#4ade80;--red:#f87171;--muted:#64748b;--text:#e2e8f0;--tx-col:#818cf8;--rx-col:#4ade80;--err-col:#f87171;--sys-col:#fbbf24}body{background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,sans-serif}#root{flex-direction:column;height:100dvh;display:flex}header{background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:12px;padding:12px 16px;display:flex}.header-title{flex:1}header h1{color:var(--accent);font-size:1rem;font-weight:600;line-height:1.2}header p{color:var(--muted);margin-top:2px;font-size:.72rem}.status{color:var(--muted);align-items:center;gap:6px;font-size:.8rem;display:flex}.dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.dot.on{background:var(--green);box-shadow:0 0 6px var(--green)}.dot.off{background:var(--muted)}.app-body{flex:1;grid-template-columns:1fr 1fr;display:grid;overflow:hidden}.config-panel{border-right:1px solid var(--border);flex-direction:column;display:flex;overflow-y:auto}.config-panel::-webkit-scrollbar{width:4px}.config-panel::-webkit-scrollbar-track{background:0 0}.config-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}.config-inner{flex-direction:column;flex:1;gap:0;padding:20px;display:flex}.browser-warn{color:var(--red);background:#f8717114;border:1px solid #f8717138;border-radius:6px;margin-bottom:16px;padding:10px 14px;font-size:.82rem}.connect-bar{border-bottom:1px solid var(--border);align-items:center;gap:10px;margin-bottom:20px;padding-bottom:16px;display:flex}.baud-label{color:var(--muted);flex-direction:column;gap:5px;font-size:.72rem;display:flex}.baud-select{background:var(--bg);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:6px;outline:none;padding:6px 10px;font-size:.85rem}.baud-select:disabled{opacity:.4;cursor:default}.baud-select:focus{border-color:var(--accent)}.btn-connect{cursor:pointer;background:var(--accent);color:#0f172a;border:none;border-radius:6px;margin-left:auto;padding:7px 18px;font-size:.85rem;font-weight:600;transition:opacity .15s}.btn-connect.connected{border:1px solid var(--red);color:var(--red);background:0 0}.btn-connect:hover{opacity:.85}.section-header{color:var(--muted);text-transform:uppercase;letter-spacing:.07em;align-items:center;gap:8px;margin-bottom:12px;font-size:.7rem;font-weight:700;display:flex}.section-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px}.field{margin-bottom:12px}.field-label{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;font-size:.72rem;font-weight:600;display:block}.field-wrap{position:relative}.field-icon{color:var(--muted);pointer-events:none;align-items:center;display:flex;position:absolute;top:50%;left:10px;transform:translateY(-50%)}.field-input{border:1px solid var(--border);background:var(--bg);width:100%;color:var(--text);border-radius:6px;outline:none;padding:8px 12px 8px 34px;font-size:.875rem;transition:border-color .15s}.field-input::placeholder{color:var(--muted);opacity:.5}.field-input:focus{border-color:var(--accent)}.form-divider{border:none;border-top:1px solid var(--border);margin:16px 0}.toggle-row{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.toggle{flex-shrink:0;width:36px;height:20px;position:relative}.toggle input{opacity:0;width:0;height:0;position:absolute}.toggle-track{background:var(--border);cursor:pointer;border-radius:99px;transition:background .2s;position:absolute;inset:0}.toggle-track:after{content:"";background:var(--muted);border-radius:50%;width:14px;height:14px;transition:transform .2s,background .2s;position:absolute;top:3px;left:3px}.toggle input:checked+.toggle-track{background:#38bdf833}.toggle input:checked+.toggle-track:after{background:var(--accent);transform:translate(16px)}.field-input:disabled{opacity:.35;cursor:default}.action-row{border-top:1px solid var(--border);gap:10px;margin-top:auto;padding-top:16px;padding-bottom:4px;display:flex}.btn-read{cursor:pointer;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:6px;flex:1;padding:8px 0;font-size:.85rem;font-weight:500;transition:opacity .15s}.btn-apply{cursor:pointer;background:var(--accent);color:#0f172a;border:none;border-radius:6px;flex:1;padding:8px 0;font-size:.85rem;font-weight:600;transition:opacity .15s}.btn-read:not(:disabled):hover,.btn-apply:not(:disabled):hover{opacity:.82}.btn-read:disabled,.btn-apply:disabled{opacity:.35;cursor:default}.log-panel{flex-direction:column;display:flex;overflow:hidden}.log-titlebar{background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:8px;padding:10px 16px;display:flex}.log-trafficlights span{border-radius:50%;width:11px;height:11px;display:inline-block}.log-titlebar-label{color:var(--muted);text-transform:uppercase;letter-spacing:.09em;flex:1;margin-left:4px;font-size:.7rem;font-weight:700}.log-count{color:var(--muted);font-size:.72rem}.btn-clear{background:var(--surface);border:1px solid var(--border);color:var(--muted);cursor:pointer;border-radius:6px;padding:5px 12px;font-size:.75rem;font-weight:600;transition:color .15s}.btn-clear:hover{color:var(--text)}.log-legend{border-bottom:1px solid var(--border);background:var(--bg);flex-shrink:0;gap:18px;padding:7px 16px;display:flex}.log-legend-item{align-items:center;gap:5px;font-size:.72rem;display:flex}.log-scroll{background:var(--bg);flex:1;padding:12px 16px;font-family:Cascadia Code,Fira Code,Consolas,monospace;font-size:.8rem;line-height:1.65;overflow-y:auto}.log-scroll::-webkit-scrollbar{width:4px}.log-scroll::-webkit-scrollbar-track{background:0 0}.log-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}.log-empty{height:100%;color:var(--muted);flex-direction:column;justify-content:center;align-items:center;gap:8px;font-family:Segoe UI,system-ui,sans-serif;font-size:.85rem;display:flex}.log-empty-sub{font-size:.75rem}.log-line{word-break:break-all;border-radius:3px;gap:10px;padding:1px 4px;display:flex}.log-line:hover{background:#ffffff08}.log-ts{color:var(--muted);-webkit-user-select:none;user-select:none;flex-shrink:0}.log-prefix{flex-shrink:0;width:12px}.log-msg{white-space:pre-wrap}.log-line.tx .log-prefix,.log-line.tx .log-msg{color:var(--tx-col)}.log-line.rx .log-prefix,.log-line.rx .log-msg{color:var(--rx-col)}.log-line.sys .log-prefix,.log-line.sys .log-msg{color:var(--sys-col)}.log-line.err .log-prefix,.log-line.err .log-msg{color:var(--err-col)}@keyframes slide-in{0%{opacity:0;transform:translate(110%)}to{opacity:1;transform:translate(0)}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.toast{z-index:50;border:1px solid;border-radius:8px;align-items:center;gap:10px;padding:10px 16px;font-size:.85rem;font-weight:600;display:flex;position:fixed;top:16px;right:16px}.toast.success{color:var(--green);background:#4ade801a;border-color:#4ade8047}.toast.error{color:var(--red);background:#f871711a;border-color:#f8717147}.toast-enter{animation:.3s cubic-bezier(.16,1,.3,1) forwards slide-in}.toast-exit{animation:.25s forwards fade-out}