:root { --bg:#f7f7f5; --fg:#1d1d1b; --muted:#6b6b66; --line:#dddcd6; --accent:#2f5d50; --err:#a33a2a; }
@media (prefers-color-scheme: dark) { :root { --bg:#161615; --fg:#ecebe6; --muted:#a3a29b; --line:#33322f; --accent:#7fb8a4; --err:#e0806f; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.5 system-ui, sans-serif; }
main { max-width:720px; margin:0 auto; padding:32px 16px; }
h1 { font-size:22px; margin:0 0 20px; }
h2 { font-size:16px; margin:24px 0 8px; }
form.stack { display:grid; gap:12px; max-width:360px; }
label { display:grid; gap:4px; color:var(--muted); font-size:13px; }
input { padding:9px 10px; border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--fg); font:inherit; }
button { padding:9px 14px; border:0; border-radius:6px; background:var(--accent); color:var(--bg); font:inherit; cursor:pointer; }
.err { color:var(--err); }
.muted { color:var(--muted); }
ul.agents { list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }
ul.agents li { padding:10px 0; border-bottom:1px solid var(--line); }
header { display:flex; justify-content:space-between; align-items:center; }
.wrap { word-break:break-all; }
a.button { display:inline-block; padding:9px 14px; border-radius:6px; background:var(--accent); color:var(--bg); text-decoration:none; max-width:360px; text-align:center; }
form.inline { display:inline; }
div.stack { display:grid; gap:12px; max-width:360px; }
textarea { padding:9px 10px; border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--fg); font:inherit; width:100%; resize:vertical; }
button:disabled { opacity:.5; cursor:default; }
button.secondary { background:transparent; color:var(--fg); border:1px solid var(--line); }
form.wide { max-width:none; }
.agent-links { float:right; font-size:13px; }
.chat-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.chat-head h1 { margin:0; }
ol.chat { list-style:none; padding:0; margin:20px 0 140px; display:grid; gap:10px; }
ol.chat li { overflow-wrap:anywhere; }
.msg { padding:10px 12px; border-radius:8px; white-space:pre-wrap; }
.msg.user { background:var(--line); justify-self:end; max-width:85%; }
.msg.assistant { border:1px solid var(--line); }
.model { color:var(--muted); font-size:12px; margin-top:-6px; }
.tool { color:var(--muted); font-size:13px; }
.tool.partial, .tool.unavailable { color:var(--err); }
details.thinking { color:var(--muted); font-size:13px; }
details.thinking pre { white-space:pre-wrap; font:inherit; margin:6px 0 0; }
.approval { border:1px solid var(--accent); border-radius:8px; padding:12px; display:grid; gap:8px; }
.approval pre { white-space:pre-wrap; font-size:12px; margin:0; color:var(--muted); }
.approval .actions { display:flex; gap:8px; }
.run-error { color:var(--err); font-size:13px; }
form.composer { position:fixed; left:0; right:0; bottom:0; background:var(--bg); border-top:1px solid var(--line); padding:12px 16px; }
form.composer div { max-width:720px; margin:0 auto; display:flex; gap:8px; align-items:flex-end; }
form.composer textarea { min-height:44px; max-height:200px; }
.admin-nav { display:flex; flex-wrap:wrap; gap:4px 14px; margin:0 0 20px; font-size:14px; }
.admin-nav a[aria-current] { color:var(--fg); font-weight:600; text-decoration:none; }
h2 a.admin-link { font-size:13px; font-weight:400; margin-left:8px; }
.table-wrap { overflow-x:auto; margin:8px 0 16px; }
table { border-collapse:collapse; width:100%; font-size:14px; }
th, td { text-align:left; vertical-align:top; padding:6px 8px; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-weight:500; }
td input { width:100%; min-width:180px; }
td.wrap { overflow-wrap:anywhere; }
select { padding:8px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); font:inherit; max-width:100%; }
label.check { display:flex; gap:8px; align-items:center; color:var(--fg); font-size:15px; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0; }
.ok { color:var(--accent); }
.status-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:8px; }
.status-grid > div { border:1px solid var(--line); border-radius:8px; padding:10px; }
form.filters { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:8px; align-items:end; }
form.filters .row { grid-column:1 / -1; }
form.filters input, form.filters select, form.stack input:not([type=checkbox]), form.stack select { width:100%; min-width:0; }
.chat-head { flex-wrap:wrap; }
.approval pre { overflow-wrap:anywhere; }
form.composer { padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 600px) {
  main { padding:20px 16px; }
  input, textarea, select { font-size:16px; }
  .msg.user { max-width:92%; }
  .agent-links { float:none; display:block; }
}