:root { --bg:#f6f7f9; --card:#fff; --ink:#1d2330; --muted:#6b7280; --line:#e3e6ea; --accent:#0f5ea8; --warn:#b45309; --err:#b91c1c; --ok:#15803d; }
* { box-sizing: border-box; }
body { margin:0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--ink); background:var(--bg); }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
.topbar { display:flex; align-items:center; gap:18px; padding:10px 22px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; }
.topbar .brand { font-weight:700; font-size:16px; color:var(--ink); } .topbar .brand span { color:var(--accent); }
.topbar nav a { margin-right:12px; color:var(--ink); } .spacer { flex:1; }
main { max-width: 1100px; margin: 0 auto; padding: 18px 22px 60px; }
h1 { font-size: 22px; margin: 10px 0 14px; } h2 { font-size: 16px; margin: 22px 0 8px; } h3 { font-size:14px; margin:14px 0 6px; }
h1 small { font-weight: 400; font-size: 13px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin: 10px 0; }
.card.narrow { max-width: 380px; margin: 60px auto; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .row.between { justify-content:space-between; }
.grid2 { display:grid; grid-template-columns: 1.4fr 1fr; gap: 12px; } @media (max-width:800px) { .grid2 { grid-template-columns:1fr; } }
.form-grid label { display:block; margin: 8px 0; font-weight:500; }
.form-grid input:not([type=checkbox]), .form-grid select, .form-grid textarea { display:block; width:100%; margin-top:3px; padding:7px 9px; border:1px solid var(--line); border-radius:6px; font:inherit; }
.form-grid label.check { font-weight:400; } .form-grid label.check input { margin-right:6px; }
fieldset { border:1px solid var(--line); border-radius:8px; margin: 10px 0; padding: 6px 14px 12px; } legend { font-weight:600; padding: 0 6px; }
button, .button { display:inline-block; padding: 7px 13px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); font:inherit; cursor:pointer; }
button.primary, .button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.danger { background:var(--err); border-color:var(--err); color:#fff; }
button.link { border:none; background:none; color:var(--accent); padding:0; }
button:disabled { opacity:.5; cursor:not-allowed; }
form.inline { display:inline; }
table.list { width:100%; border-collapse: collapse; background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
table.list th, table.list td { padding: 8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
table.list th { background:#fafbfc; font-weight:600; font-size:12px; text-transform:uppercase; color:var(--muted); }
table.list.compact td { padding: 5px 10px; }
.muted { color: var(--muted); } .small { font-size: 12px; }
.pill { display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; background:#eef0f3; color:var(--ink); }
.pill.open { background:#e6f0fb; color:var(--accent); } .pill.queued, .pill.running, .pill.busy { background:#fff4e0; color:var(--warn); }
.pill.delivered, .pill.uploaded, .pill.ok, .pill.success, .pill.done, .pill.applied { background:#e5f6ea; color:var(--ok); }
.pill.needs_review, .pill.warn, .pill.skipped, .pill.pending, .pill.no_package, .pill.reverted { background:#fff4e0; color:var(--warn); }
.pill.failed, .pill.error, .pill.budget_exceeded, .pill.timeout { background:#fde8e8; color:var(--err); }
.pill.closed, .pill.on_hold { background:#eef0f3; color:var(--muted); }
.flash { padding: 9px 12px; border-radius:6px; margin: 8px 0; background:#e6f0fb; color:var(--accent); }
.flash.success { background:#e5f6ea; color:var(--ok); } .flash.error { background:#fde8e8; color:var(--err); }
.prose { line-height:1.55; } .prose pre { background:#f3f4f6; padding:8px; overflow:auto; border-radius:6px; } .prose code { background:#f3f4f6; padding:1px 4px; border-radius:4px; }
.prose table { border-collapse: collapse; } .prose td, .prose th { border:1px solid var(--line); padding:4px 8px; }
.timeline { list-style:none; padding:0; margin:0; } .timeline li { padding: 4px 0; border-bottom:1px dashed var(--line); }
.events { list-style:none; padding:0; } .events li { padding:6px 8px; border-left:3px solid var(--line); margin:4px 0; background:#fff; }
.events li.thinking { border-color:#cbd5e1; background:#fafafa; } .events li.thinking summary { cursor:pointer; color:var(--muted); font-style:italic; }
.events li.tool_use { border-color: var(--accent); } .events li.tool_result { border-color: var(--ok); } .events li.error { border-color: var(--err); }
.crumbs { color: var(--muted); margin: 0 0 4px; }
details.danger { margin-top: 30px; } details.danger summary { color: var(--err); cursor:pointer; }
code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }