:root,html[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#12110f;--panel:#1c1a17;--raised:#24211c;--line:#3a342c;--text:#f3efe6;--muted:#a39888;--orange:#ff7a18;--cyan:#5ee0c5;--amber:#f0c14a;--red:#ff5d4a;--good:#8fd18a;--input:#12110f;--topbar:#12110feb;--sidebar:#0000002e;--pill-bg:#1c1a17cc;--log:#12110f73;--thead:#1a1814;--row-line:#3a342cbf;--hover:#ff7a1812;--on-orange:#1a1008;--on-cyan:#06231d;--glow:#ff7a1824;--scrollbar:#4a4036;--mono:"IBM Plex Mono", "Cascadia Mono", Consolas, monospace;--sans:Outfit, "Segoe UI", sans-serif}html[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#fff;--panel:#fff;--raised:#fff;--line:#e5e7eb;--text:#1d1814;--muted:#6b7280;--orange:#d65a00;--cyan:#0b7f6c;--amber:#a57500;--red:#c0392b;--good:#2f7d3e;--input:#fff;--topbar:#fff;--sidebar:#fff;--pill-bg:#fff;--log:#fff;--thead:#f9fafb;--row-line:#e5e7eb;--hover:#d65a0014;--on-orange:#fff;--on-cyan:#04241c;--glow:transparent;--scrollbar:#d1d5db}*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent}html,body,#root{background:var(--bg);height:100%}body{background:radial-gradient(900px 420px at 0% -10%, var(--glow), transparent 55%), var(--bg);color:var(--text);font-family:var(--sans);margin:0;font-size:14px;line-height:1.45;overflow:hidden}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}:focus-visible{outline:2px solid var(--orange);outline-offset:2px}.app{grid-template-rows:auto auto minmax(0,1fr);height:100vh;display:grid}.pane-switch{display:none}.topbar{border-bottom:1px solid var(--line);background:var(--topbar);justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;display:flex}.brand h1,.eyebrow,.hint,.topic-meta,.panel h2{margin:0}.eyebrow{color:var(--orange);letter-spacing:.14em;text-transform:uppercase;font-size:11px;font-weight:600}.brand h1{letter-spacing:-.03em;font-size:22px;font-weight:600}.top-stats{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.theme-icon{border:1px solid var(--line);background:var(--raised);width:36px;height:36px;color:var(--muted);border-radius:999px;justify-content:center;align-items:center;padding:0;display:inline-flex}.theme-icon:hover{color:var(--text);background:var(--hover)}.pill{border:1px solid var(--line);background:var(--pill-bg);min-height:30px;color:var(--muted);font-family:var(--mono);border-radius:999px;align-items:center;gap:8px;padding:4px 10px;font-size:12px;display:inline-flex}.status-dot{background:currentColor;border-radius:50%;width:8px;height:8px}.status-connected{color:var(--cyan)}.status-connecting,.status-reconnecting{color:var(--amber)}.status-error{color:var(--red)}.status-connected .status-dot{animation:1.8s infinite pulse}.rx.hot{color:var(--orange);border-color:#ff7a188c}.layout{grid-template-columns:340px minmax(0,1fr);min-height:0;display:grid}.sidebar{border-right:1px solid var(--line);background:var(--sidebar);flex-direction:column;gap:12px;min-height:0;padding:14px;display:flex;overflow:auto}.board{grid-template-rows:auto auto minmax(0,1fr);gap:12px;min-height:0;padding:14px 16px 16px;display:grid}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}.panel h2{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;font-size:11px;font-weight:600}.hint{color:var(--muted);margin-bottom:10px;font-size:12px}.hint.tail{margin:10px 0 0}.hint-inline{color:var(--muted);white-space:nowrap;font-size:12px}label{color:var(--muted);flex-direction:column;gap:6px;margin-bottom:10px;font-size:12px;display:flex}input,textarea,select{border:1px solid var(--line);background:var(--input);border-radius:10px;width:100%;padding:8px 10px}textarea{resize:vertical;min-height:88px;font-family:var(--mono);font-size:12px;line-height:1.5}.split{grid-template-columns:1fr 1fr;gap:8px;display:grid}.presets{flex-wrap:wrap;gap:6px;margin-bottom:10px;display:flex}.preset,.btn,.text-btn,.jump{border-radius:10px}.preset{border:1px solid var(--line);background:0 0;border-radius:999px;padding:4px 10px}.preset.active{border-color:var(--orange);color:var(--orange)}.url-preview code{text-overflow:ellipsis;white-space:nowrap;max-width:100%;color:var(--orange);font-family:var(--mono);vertical-align:bottom;font-size:11px;display:inline-block;overflow:hidden}.advanced{border:1px solid var(--line);border-radius:10px;margin:4px 0 10px;padding:8px 10px}.advanced summary{cursor:pointer;color:var(--muted);font-size:12px;font-weight:600}.advanced[open] summary{margin-bottom:8px}.tls-files{border-top:1px solid var(--line);margin:4px 0 10px;padding-top:8px}.tls-files h3{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px;font-size:11px;font-weight:600}.file-field{margin-bottom:10px}.file-row{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;display:grid}.file-row input[type=file]{width:auto;max-width:100%;padding:6px;font-size:12px}.file-name{text-overflow:ellipsis;white-space:nowrap;color:var(--orange);font-family:var(--mono);font-size:11px;overflow:hidden}.protocol-note{margin:22px 0 0}.btn{background:var(--orange);color:var(--on-orange);border:0;padding:8px 12px;font-weight:600}.btn-block{width:100%}.btn-secondary,.btn-disconnect{color:var(--text);border:1px solid var(--line);background:0 0}.btn-live{background:var(--cyan);color:var(--on-cyan)}.btn-block+.btn-block,form+.btn-block{margin-top:8px}.form-error{color:var(--red);background:#ff5d4a14;border:1px solid #ff5d4a66;border-radius:10px;margin:0 0 10px;padding:8px 10px;font-size:12px}.row,.publish-row,.board-bar,.log-actions{align-items:center;gap:8px;display:flex}.row{margin-bottom:8px}.row>input{flex:1;width:auto;min-width:0}.qos-select{flex:none;width:88px}.check{color:var(--text);flex-direction:row;align-items:center;gap:8px;margin:0}.check input{width:auto}.sub-list{flex-direction:column;gap:8px;margin:10px 0 0;padding:0;list-style:none;display:flex}.sub-list li{grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;gap:6px;display:grid}.sub-copy{flex-direction:column;gap:2px;min-width:0;display:flex}.sub-list code,.unit-copy code,.topic-path{text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);color:var(--orange);font-size:12px;overflow:hidden}.topic-path{color:var(--muted);margin:4px 0 0;font-size:11px}.unit-list{flex-direction:column;gap:8px;margin:0 0 10px;padding:0;list-style:none;display:flex}.unit-list li.unit-block{border-bottom:1px solid var(--line);flex-direction:column;gap:8px;padding-bottom:8px;display:flex}.unit-head{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;display:grid}.process-list{flex-wrap:wrap;gap:6px;display:flex}.process-chip{border:1px solid var(--line);color:var(--muted);font-family:var(--mono);letter-spacing:.03em;background:0 0;border-radius:999px;padding:4px 8px;font-size:10px}.process-chip.on{border-color:var(--cyan);color:var(--cyan)}.unit-copy{flex-direction:column;gap:2px;min-width:0;display:flex}.unit-copy strong{font-size:13px;font-weight:600}.live-dot{background:var(--muted);border-radius:50%;width:7px;height:7px}.live-dot.on{background:var(--cyan)}.tag{color:var(--muted);font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;font-size:10px}.text-btn{color:var(--muted);background:0 0;border:0;padding:0}.text-btn:hover{color:var(--text)}.board-bar .search{flex:1;min-width:180px}.topic-wrap{min-height:0;max-height:320px;overflow:auto}.topic-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;display:grid}.topic-card{border:1px solid var(--line);background:var(--raised);border-radius:12px;min-width:0;padding:12px}.topic-name{text-overflow:ellipsis;white-space:nowrap;color:var(--orange);font-family:var(--mono);margin:0;font-size:12px;font-weight:500;overflow:hidden}.big-value{color:var(--cyan);font-family:var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin:8px 0;font-size:32px;font-weight:500}.card-text{font-family:var(--mono);white-space:pre-wrap;word-break:break-word;margin:8px 0;font-size:13px}.kv{gap:4px;margin:8px 0;display:grid}.kv div{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:8px;display:grid}.kv dt{text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:12px;overflow:hidden}.kv dd{text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);text-align:right;margin:0;font-size:13px;overflow:hidden}.good{color:var(--good)}.warn{color:var(--amber)}.bad{color:var(--red)}.spark{width:100%;height:32px;display:block}.spark path{fill:none;stroke:var(--cyan);stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round}.topic-meta{color:var(--muted);font-family:var(--mono);margin-top:6px;font-size:11px}.empty{border:1px dashed var(--line);color:var(--muted);text-align:center;border-radius:12px;padding:22px 16px}.log{grid-template-rows:minmax(0,1fr) auto;gap:8px;min-height:0;display:grid;position:relative}.log.paused .log-scroll{box-shadow:inset 0 2px 0 var(--amber)}.log-scroll{border:1px solid var(--line);background:var(--log);border-radius:12px;min-height:0;overflow:auto}.log-table{border-collapse:collapse;table-layout:fixed;width:100%}.log-table th{border-bottom:1px solid var(--line);background:var(--thead);color:var(--muted);letter-spacing:.08em;text-align:left;text-transform:uppercase;padding:8px;font-size:11px;font-weight:600;position:sticky;top:0}.log-table td{border-bottom:1px solid var(--row-line);vertical-align:top;padding:7px 8px}.log-table tbody tr{cursor:pointer}.log-table tbody tr:hover td,.log-table tbody tr.selected td{background:var(--hover)}.col-time{width:196px}.col-topic{width:24%}.col-qos{width:64px}.col-ack{width:88px}td.ack{font-family:var(--mono);text-transform:uppercase;letter-spacing:.03em;font-size:12px}td.time,td.topic,td.payload{font-family:var(--mono);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}td.time{color:var(--muted)}td.topic{color:var(--orange)}.detail-row,.detail-row:hover td{cursor:default;background:0 0}.detail{padding:4px 4px 8px}.detail-meta{color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;flex-wrap:wrap;gap:10px;margin-bottom:8px;font-size:11px;display:flex}.detail pre{white-space:pre-wrap;word-break:break-word;font-family:var(--mono);margin:0;font-size:12px;line-height:1.55}.jump{background:var(--orange);color:var(--on-orange);border:0;padding:7px 12px;font-weight:600;position:absolute;bottom:58px;left:50%;transform:translate(-50%)}.log-actions{flex-wrap:wrap}@keyframes pulse{0%{box-shadow:0 0 #5ee0c5a6}70%{box-shadow:0 0 0 7px #5ee0c500}to{box-shadow:0 0 #5ee0c500}}@media (prefers-reduced-motion:reduce){.status-connected .status-dot{animation:none}}@media (width<=900px){.topbar{flex-direction:column;align-items:flex-start}.top-stats{justify-content:flex-start}.pane-switch{grid-template-columns:1fr 1fr;gap:8px;padding:10px 14px 0;display:grid}.pane-switch button{border:1px solid var(--line);background:0 0;border-radius:999px;padding:8px 12px;font-weight:600}.pane-switch button.active{border-color:var(--orange);background:var(--orange);color:var(--on-orange)}.layout{min-height:0;display:block}.sidebar,.board{height:100%;min-height:0;display:none}.layout.show-setup .sidebar,.layout.show-live .board{display:flex}.layout.show-live .board{display:grid}.sidebar{border-right:0;overflow:auto}.topic-wrap{max-height:220px}.log-scroll{max-height:none}}