:root {
  --bg: #E4E9EE;
  --panel: #FFFFFF;
  --ink: #1B2430;
  --mute: #5F6B78;
  --line: #CAD2DA;
  --soft: #F2F5F8;
  --lr: #1E4FD6;
  --rr: #C8321E;
  --cs: #7B2D9E;
  --sys: #6B7682;
  --ok: #23945A;
  --warn: #C98A0B;
  --bad: #C8321E;
  --focus: #1E4FD6;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 14px/1.45 var(--sans); color: var(--ink); background: var(--bg);
  display: flex; flex-direction: column; overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
[hidden] { display: none !important; }

/* ---------- top bar & tabs ---------- */
.bar {
  display: flex; align-items: stretch; gap: 12px;
  background: var(--ink); color: #E8EDF2; padding: 0 12px; min-height: 46px;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.link-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }
.link-dot.on { background: var(--ok); }
.tabs { display: flex; gap: 2px; overflow-x: auto; flex: 1; align-items: flex-end; scrollbar-width: thin; }
.tab {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px 9px; border: 0; cursor: pointer;
  background: #2C3746; color: #C4CDD6; border-radius: 6px 6px 0 0; white-space: nowrap; max-width: 260px;
}
.tab:hover { background: #364354; color: #fff; }
.tab[aria-selected="true"] { background: var(--bg); color: var(--ink); font-weight: 500; }
.tab .nm { overflow: hidden; text-overflow: ellipsis; }
.tab .port { font: 12px var(--mono); opacity: .7; }
.tab .n { font-size: 12px; background: var(--ok); color: #fff; border-radius: 9px; padding: 0 6px; }
.tab.new-data:not([aria-selected="true"]) .nm::after { content: " •"; color: #7FB0FF; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #7A8795; flex: none; }
.dot.listening { background: var(--warn); }
.dot.live { background: var(--ok); box-shadow: 0 0 0 3px rgba(35,148,90,.25); }
.dot.error { background: var(--bad); }
.tab-add {
  align-self: center; background: transparent; color: #E8EDF2; border: 1px solid #4A5868;
  border-radius: 6px; padding: 5px 10px; cursor: pointer; white-space: nowrap;
}
.tab-add:hover { background: #2C3746; }

/* ---------- layout ---------- */
.empty { flex: 1; display: grid; place-content: center; text-align: center; gap: 12px; color: var(--mute); }
.work { flex: 1; display: grid; grid-template-columns: 300px 1fr; min-height: 0; }
.side { overflow-y: auto; padding: 14px; border-right: 1px solid var(--line); background: var(--soft); }
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 12px; gap: 10px; }

.group { padding: 12px 0; border-bottom: 1px solid var(--line); }
.group:first-child { padding-top: 0; }
.group:last-child { border-bottom: 0; }
.group h2 { font-size: 13px; font-weight: 600; margin: 0 0 8px; color: var(--ink); }
.field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.field > span { font-size: 12px; color: var(--mute); }
.field.inline { flex-direction: row; align-items: center; gap: 6px; }
.field.inline input { width: 80px; }
.field em { font-style: normal; color: var(--mute); font-size: 12px; }
.row { display: flex; gap: 6px; }
.row input { flex: 1; min-width: 0; }
textarea { resize: vertical; min-height: 56px; font: inherit; }
.field em { font-style: normal; }
input, select, textarea {
  border: 1px solid var(--line); background: var(--panel); border-radius: 5px; padding: 6px 8px;
}
input:focus { border-color: var(--focus); }
.hint { color: var(--mute); font-size: 12px; display: block; }
.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.check.small { font-size: 12px; color: var(--mute); }

.btn {
  border: 1px solid var(--line); background: var(--panel); border-radius: 5px; padding: 6px 12px; cursor: pointer;
}
.btn:hover { border-color: #9AA6B2; }
.btn.primary { background: var(--lr); border-color: var(--lr); color: #fff; }
.btn.primary:hover { background: #173FAF; }
.btn.ghost { background: transparent; }
.btn.big { width: 100%; padding: 9px; font-weight: 600; background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.big.stop { background: var(--panel); border-color: var(--bad); color: var(--bad); }
.btn.danger { color: var(--bad); }

.status { margin: 8px 0 0; font-size: 13px; color: var(--mute); }
.status.err { color: var(--bad); }

.conns { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.conns li { background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: 6px 8px; font-size: 12px; }
.conns .top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.conns .addr { font-family: var(--mono); font-size: 12px; }
.conns .meta { color: var(--mute); }
.conns .up-connected { color: var(--ok); }
.conns .up-connecting { color: var(--warn); }
.conns button { border: 0; background: none; color: var(--bad); cursor: pointer; font-size: 12px; padding: 0; }
.conns .none { color: var(--mute); background: none; border: 0; padding: 0; }

/* ---------- log ---------- */
.log-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.legend { display: flex; gap: 14px; flex: 1; font-size: 12px; }
.legend .k::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.legend .lr::before { background: var(--lr); }
.legend .rr::before { background: var(--rr); }
.legend .cs::before { background: var(--cs); }
.legend .con::before { background: var(--ok); }
.legend .dis::before { background: var(--warn); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; background: var(--panel); }
.seg button { border: 0; background: none; padding: 5px 10px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-checked="true"] { background: var(--ink); color: #fff; }

.log {
  flex: 1; min-height: 120px; overflow: auto; background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 8px 10px; font: 13px/1.55 var(--mono);
}
.ln { white-space: pre-wrap; word-break: break-all; }
.ln .ts { opacity: .95; }
.ln .cn { color: var(--sys); margin: 0 6px 0 2px; font-size: 12px; }
.ln .fl { font: 11px var(--sans); color: #fff; background: var(--warn); border-radius: 3px; padding: 0 4px; margin-right: 6px; }
.ln.LR, .ln.CR { color: var(--lr); }
.ln.RR { color: var(--rr); }
.ln.CS { color: var(--cs); font-weight: 500; }
.ln.SYS { color: var(--sys); }
.ln.ERR { color: var(--bad); font-style: italic; }
.ln.CON { color: var(--ok); font-weight: 500; background: rgba(35,148,90,.07); }
.ln.DIS { color: #9A5B00; font-weight: 500; background: rgba(201,138,11,.10); }
.log .blank { color: var(--mute); font-family: var(--sans); }

/* ---------- command pane ---------- */
.cmd { display: grid; grid-template-columns: minmax(320px, 1fr) 1fr; gap: 10px; height: 230px; flex: none; }
.cmd-rows { display: flex; flex-direction: column; gap: 8px; }
.cmd-row { display: flex; gap: 8px; align-items: center; }
.cmd-row input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; }
.cmd-to { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--mute); }
.cmd-to select { min-width: 0; flex: 1; }
.cmdlog { min-height: 0; }

.conns .imei { font-family: var(--mono); color: var(--ink); }

.dlg { border: 1px solid var(--line); border-radius: 8px; padding: 16px; width: min(860px, 94vw); max-height: 86vh; color: var(--ink); }
.dlg::backdrop { background: rgba(27,36,48,.45); }
.dlg[open] { display: flex; flex-direction: column; gap: 8px; }
.dlg-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dlg-head h2 { font-size: 16px; margin: 0; flex: 1; }
.files-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
.files { width: 100%; border-collapse: collapse; font-size: 13px; }
.files th { text-align: left; font-weight: 600; background: var(--soft); position: sticky; top: 0; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.files td { padding: 6px 10px; border-bottom: 1px solid var(--soft); white-space: nowrap; }
.files td:first-child { font-family: var(--mono); font-size: 12px; white-space: normal; word-break: break-all; }
.files .live { font: 11px var(--sans); color: #fff; background: var(--ok); border-radius: 3px; padding: 0 5px; margin-left: 6px; }
.files a { color: var(--lr); margin-left: 10px; text-decoration: none; }
.files a:hover { text-decoration: underline; }
.files .none td { color: var(--mute); font-family: var(--sans); }

.toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(20px); opacity: 0;
  background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 6px; pointer-events: none;
  transition: opacity .15s, transform .15s; max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.bad { background: var(--bad); }

@media (max-width: 900px) {
  body { overflow: auto; }
  .work { grid-template-columns: 1fr; }
  .side { border-right: 0; border-bottom: 1px solid var(--line); }
  .stage { min-height: 80vh; }
  .cmd { grid-template-columns: 1fr; height: auto; }
  .cmdlog { height: 160px; flex: none; }
}
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }