:root {
  color-scheme: dark;
  --bg:#0b0d11; --pane:#11141a; --pane2:#1a1d22; --line:#1d2026; --line2:#2a2f37;
  --text:#e4e6eb; --muted:#7b8794; --accent:#7dd3fc; --ok:#6ee7b7; --warn:#fbbf24; --err:#f87171;
}
html,body { margin:0; padding:0; background:var(--bg); color:var(--text); font:13px/1.55 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif; height:100%; }
.wrap { max-width:1100px; margin:0 auto; padding:14px; display:flex; flex-direction:column; height:100vh; box-sizing:border-box; }
header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:12px; flex-wrap:wrap; }
h1 { margin:0; font-size:16px; color:var(--accent); letter-spacing:1.4px; font-weight:600; }
.sub { font-size:10px; color:var(--muted); letter-spacing:.5px; text-transform:uppercase; }
.key { display:flex; gap:6px; align-items:center; }
.key input { background:var(--pane2); border:1px solid var(--line2); color:var(--text); padding:6px 8px; border-radius:5px; font:11px ui-monospace,monospace; width:280px; }
.pill { font-size:10px; padding:3px 7px; border-radius:10px; background:var(--pane); color:var(--muted); border:1px solid var(--line); }
.pill.ok { color:var(--ok); border-color:var(--ok); }
.pill.err { color:var(--err); border-color:var(--err); }
nav { display:flex; gap:4px; margin:6px 0 10px; }
nav button { background:var(--pane); color:var(--muted); border:1px solid var(--line); padding:6px 14px; border-radius:5px 5px 0 0; cursor:pointer; font:12px inherit; }
nav button.active { background:var(--pane2); color:var(--accent); border-bottom-color:var(--pane2); }
main { flex:1; overflow:auto; background:var(--pane); border:1px solid var(--line); border-radius:0 8px 8px 8px; padding:12px; }
.tab { display:none; }
.tab.active { display:block; }
#log { display:flex; flex-direction:column; gap:8px; }
.msg { padding:9px 11px; border-radius:6px; white-space:pre-wrap; word-wrap:break-word; }
.u { background:#1b2735; border-left:2px solid #38bdf8; }
.a { background:#1a221c; border-left:2px solid var(--ok); }
.e { background:#2a1a1d; border-left:2px solid var(--err); color:#fecaca; font:11px ui-monospace,monospace; }
.meta { font-size:10px; color:var(--muted); margin-top:6px; display:flex; gap:10px; flex-wrap:wrap; }
.meta span { padding:2px 6px; background:var(--pane2); border-radius:3px; }
.meta span.cached { background:#1e293b; color:var(--accent); font-weight:600; }
.input { display:flex; gap:6px; margin-top:10px; }
.input textarea { flex:1; background:var(--pane2); border:1px solid var(--line2); color:var(--text); padding:8px; border-radius:5px; resize:vertical; min-height:48px; font:13px ui-monospace,monospace; }
button.send { background:#2563eb; color:#fff; border:none; padding:0 18px; border-radius:5px; cursor:pointer; font-size:13px; }
button.stop { background:#dc2626; color:#fff; border:none; padding:0 18px; border-radius:5px; cursor:pointer; font-size:13px; font-weight:600; }
button.stop:disabled, button.send:disabled { background:#444; cursor:not-allowed; }
.timeline { font:11px ui-monospace,monospace; }
.stage { padding:6px 8px; border-left:2px solid var(--line2); margin-left:8px; position:relative; }
.stage::before { content:''; position:absolute; left:-5px; top:10px; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.stage.ok::before { background:var(--ok); }
.stage.warn::before { background:var(--warn); }
.stage .name { color:var(--accent); font-weight:600; }
.stage .body { color:#cbd5e1; margin-top:2px; word-break:break-all; }
.running { display:inline-block; padding:3px 8px; background:var(--warn); color:#000; border-radius:4px; font-size:10px; }
.kv-row { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid var(--line); }
.kv-row b { color:var(--accent); }