:root { --fg: #1d2127; --dim: #6b7280; --line: #e5e7eb; --accent: #2563eb; --ok: #15803d; --bad: #b91c1c; --warn: #b45309; --bg: #fff; --code: #f6f7f9; }
@media (prefers-color-scheme: dark) { :root { --fg: #e5e7eb; --dim: #9ca3af; --line: #374151; --accent: #60a5fa; --ok: #4ade80; --bad: #f87171; --warn: #fbbf24; --bg: #111418; --code: #1a1f26; } }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg); background: var(--bg); }
header { display: flex; gap: 1.5rem; align-items: center; padding: .6rem 1.5rem; border-bottom: 1px solid var(--line); }
header .brand { font-weight: 600; color: var(--fg); text-decoration: none; }
header nav a { margin-right: 1rem; }
header .who { margin-left: auto; display: flex; gap: .6rem; align-items: center; color: var(--dim); }
main { max-width: 1100px; margin: 0 auto; padding: 1rem 1.5rem 3rem; }
footer { text-align: center; color: var(--dim); font-size: 12px; padding: 1rem; }
a { color: var(--accent); }
h1 { font-size: 1.4rem; margin: .4rem 0 .6rem; } h2 { font-size: 1.1rem; margin-top: 1.6rem; }
table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: .35rem .6rem; border-bottom: 1px solid var(--line); }
th { font-weight: 600; color: var(--dim); font-size: 13px; }
input, textarea, button { font: inherit; } input, textarea { padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); }
button { padding: .35rem .8rem; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; }
button.danger { background: transparent; color: var(--bad); border-color: var(--bad); }
button:disabled { opacity: .5; cursor: default; }
.narrow { max-width: 420px; margin: 3rem auto; } .narrow input[type=email] { width: 100%; margin-bottom: .6rem; }
.dim { color: var(--dim); } .ok { color: var(--ok); } .bad { color: var(--bad); } .notice { background: var(--code); padding: .5rem .8rem; border-radius: 6px; }
.code { font: 600 1.6rem ui-monospace, monospace; letter-spacing: .15em; }
.tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--line); margin: 1rem 0; } .tabs a { padding: .4rem .9rem; text-decoration: none; color: var(--dim); border-bottom: 2px solid transparent; }
.tabs a.on { color: var(--fg); border-color: var(--accent); } .tabs.small a { font-size: 13px; padding: .25rem .7rem; }
.crumbs { color: var(--dim); font-size: 13px; }
.task { border: 1px solid var(--line); border-radius: 8px; padding: .7rem .9rem; margin: .6rem 0; display: grid; gap: .35rem; }
.task label, .publish label { display: block; font-size: 13px; color: var(--dim); } .task input, .publish input:not([type=checkbox]) { width: 100%; }
.inline { display: flex; gap: .5rem; margin: 1rem 0; } .inline input { flex: 1; }
.publish { margin-top: 1rem; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: .5rem; } .check { display: flex !important; gap: .4rem; align-items: center; }
.state.succeeded, .state.open { color: var(--ok); } .state.failed { color: var(--bad); } .state.running, .state.queued { color: var(--accent); } .state.cancelled, .state.closed { color: var(--warn); }
.bar { display: flex; gap: .8rem; align-items: center; margin-bottom: .8rem; } .bar button { margin-left: auto; } .bar button + button { margin-left: 0; }
#log { border: 1px solid var(--line); border-radius: 8px; padding: .8rem 1rem; min-height: 12rem; font-size: 14px; }
#log .thinking { color: var(--dim); font-style: italic; white-space: pre-wrap; margin: .3rem 0; }
#log .text { white-space: pre-wrap; margin: .5rem 0; }
#log .msg { background: var(--code); border-radius: 8px; padding: .5rem .8rem; margin: .8rem 0; white-space: pre-wrap; } #log .msg .by { color: var(--dim); font-size: 12px; }
#log .tool { font-family: ui-monospace, monospace; font-size: 13px; margin: .15rem 0; } #log .tool summary { cursor: pointer; } #log .tool pre { background: var(--code); padding: .5rem; overflow: auto; max-height: 20rem; white-space: pre-wrap; }
#log .res-ok { color: var(--ok); } #log .res-bad { color: var(--bad); }
#log .approval { border: 1px solid var(--warn); border-radius: 8px; padding: .5rem .8rem; margin: .5rem 0; } #log .approval pre { white-space: pre-wrap; margin: .3rem 0; }
#log .approval input { width: 50%; } #log .sys { color: var(--dim); font-size: 13px; margin: .4rem 0; } #log .end { font-weight: 600; margin-top: .6rem; }
#say { display: flex; gap: .5rem; margin-top: .8rem; } #say textarea { flex: 1; }