:root {
  --bg: #14161a; --panel: #1b1e24; --panel-2: #22262e; --line: #2e333d;
  --text: #e6e8ec; --muted: #98a0ae; --accent: #6ea8fe; --ok: #5ec98b;
  --warn: #e8b563; --err: #e87c7c; --mono: ui-monospace, SFMono-Regular,
  "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text); overflow: hidden;
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
button, input, select {
  font: inherit; color: inherit; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px;
}
button { cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--accent); color: #10131a; border-color: var(--accent);
  font-weight: 600; }

/* ---------- layout ---------- */
#shell { display: flex; flex-direction: column; height: 100%; }
#topbar {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--panel); border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
#topbar .brand { font-weight: 650; letter-spacing: .2px; margin-right: 4px; }
#topbar .spacer { flex: 1; }
#meter {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px;
}
#meter b { color: var(--ok); font-weight: 600; }

#panes { display: flex; flex: 1; min-height: 0; }
.pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#left { flex: 0 0 240px; border-right: 1px solid var(--line); background: var(--panel); }
#middle { flex: 1 1 auto; border-right: 1px solid var(--line); }
#right { flex: 0 0 42%; background: var(--panel); }
.pane h2 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 0; padding: 9px 12px;
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px;
}
.pane h2 .spacer { flex: 1; }

/* ---------- file tree ---------- */
#tree { overflow: auto; flex: 1; padding: 6px 0; }
.node {
  padding: 3px 12px; cursor: pointer; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-size: 13px;
}
.node:hover { background: var(--panel-2); }
.node.active { background: #2c3444; color: #fff; }
.node.dir { color: var(--muted); }

/* ---------- middle ---------- */
#stream { flex: 1; min-height: 0; padding: 6px; background: #0f1115; }
#editorWrap { display: none; flex: 1; min-height: 0; flex-direction: column; }
#editorWrap.on { display: flex; }
#streamWrap { display: flex; flex: 1; min-height: 0; flex-direction: column; }
#streamWrap.off { display: none; }
.CodeMirror { height: 100% !important; font-size: 13px; }
#composer {
  display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line);
  background: var(--panel);
}
#prompt { flex: 1; resize: none; height: 62px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px;
  color: var(--text); font: inherit; }
#status { padding: 5px 12px; font-size: 12px; color: var(--muted);
  border-top: 1px solid var(--line); font-family: var(--mono); }
#status.queued { color: var(--warn); }
#status.running { color: var(--accent); }
#status.error { color: var(--err); }
#status.done { color: var(--ok); }

/* ---------- preview ---------- */
#previewBar { display: flex; gap: 6px; align-items: center; }
#previewUrl { flex: 1; font-family: var(--mono); font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#preview { flex: 1; border: 0; background: #fff; width: 100%; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.dot.running { background: var(--ok); }
.dot.stopped { background: var(--muted); }
.dot.absent { background: var(--err); }
.empty { color: var(--muted); padding: 20px 12px; font-size: 13px; }