:root { --bg:#101216; --panel:#181b21; --fg:#d5dae2; --muted:#7a8290;
  --accent:#6cb2ff; --ok:#7fd77f; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  display:flex; flex-direction:column; height:100vh; }
header { display:flex; gap:1rem; align-items:center; padding:.5rem 1rem;
  background:var(--panel); border-bottom:1px solid #262b33; }
header h1 { font-size:1rem; margin:0; color:var(--accent); }
#status { color:var(--muted); font-size:.85rem; flex:1; }
nav button { background:none; border:none; color:var(--muted);
  padding:.4rem .8rem; cursor:pointer; font:inherit; }
nav button.active { color:var(--fg); border-bottom:2px solid var(--accent); }
main { flex:1; overflow:hidden; display:flex; }
.tab { display:none; flex:1; flex-direction:column; padding:1rem;
  overflow-y:auto; }
.tab.active { display:flex; }
.log { flex:1; overflow-y:auto; padding-bottom:.5rem; }
.msg { margin:.15rem 0; white-space:pre-wrap; }
.msg.you b { color:var(--accent); }
.msg.atlas b { color:var(--ok); }
.msg.system { color:var(--muted); }
.thinking { color:var(--muted); font-style:italic; }
.hidden { display:none; }
form { display:flex; gap:.5rem; }
input, button { background:var(--panel); color:var(--fg);
  border:1px solid #2a2f38; border-radius:4px; padding:.5rem .7rem;
  font:inherit; }
input { flex:1; }
input:focus { outline:1px solid var(--accent); }
button { cursor:pointer; }
details { margin:.4rem 0; } summary { cursor:pointer; }
pre { white-space:pre-wrap; background:var(--panel); padding:.8rem;
  border-radius:4px; }
.wish { display:flex; gap:.5rem; align-items:center; margin:.3rem 0; }
.pg-controls { display:flex; gap:.5rem; margin-bottom:.5rem; }
#jobs-table { border-collapse:collapse; width:100%; }
#jobs-table td, #jobs-table th { border-bottom:1px solid #262b33;
  padding:.3rem .5rem; text-align:left; }