:root { --bg:#f4f6fb; --fg:#1b1f2a; --mut:#5d6578; --card:#fff; --line:#dde2ee; --pri:#14213d; --acc:#2563eb; --ok:#15803d; --warn:#b45309; --bad:#b91c1c; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; }
body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
#top { position: sticky; top: 0; background: var(--pri); color: #fff; padding: 10px 14px; display: flex; justify-content: space-between; z-index: 5; }
#top .brand { font-weight: 700; letter-spacing: .04em; }
#who { font-size: 12px; opacity: .8; }
main { max-width: 720px; margin: 0 auto; padding: 12px; }
#tabs { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 5; }
#tabs a { flex: 1; text-align: center; padding: 12px 0; color: var(--mut); text-decoration: none; font-size: 14px; position: relative; }
#tabs a.on { color: var(--acc); font-weight: 700; }
.badge { background: var(--bad); color: #fff; border-radius: 10px; font-size: 11px; padding: 0 6px; margin-left: 4px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 10px 0; }
.card h3, .card h2 { margin: 0 0 6px; font-size: 16px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.mut { color: var(--mut); font-size: 13px; }
.pill { display: inline-block; border-radius: 10px; padding: 1px 9px; font-size: 12px; background: #e8ecf6; color: var(--pri); }
.pill.running { background: #dbeafe; color: #1d4ed8; } .pill.waiting_human { background: #fef3c7; color: var(--warn); } .pill.done { background: #dcfce7; color: var(--ok); }
.pill.failed { background: #fee2e2; color: var(--bad); } .pill.cancelled, .pill.paused { background: #e5e7eb; color: #374151; }
button, .btn { font: inherit; border: 1px solid var(--pri); background: var(--pri); color: #fff; border-radius: 10px; padding: 9px 14px; cursor: pointer; text-decoration: none; display: inline-block; }
button.sec, .btn.sec { background: #fff; color: var(--pri); }
button.bad { background: var(--bad); border-color: var(--bad); }
button.ok { background: var(--ok); border-color: var(--ok); }
button:disabled { opacity: .5; cursor: default; }
input, textarea, select { font: inherit; width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--fg); }
textarea { min-height: 90px; resize: vertical; }
label { display: block; margin: 10px 0 4px; font-size: 13px; color: var(--mut); }
pre, code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }
pre { background: #0f172a; color: #e2e8f0; padding: 10px; border-radius: 8px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; margin: 6px 0; }
.line-add { color: #86efac; } .line-del { color: #fca5a5; } .line-hunk { color: #93c5fd; }
ul.tl { list-style: none; margin: 0; padding: 0; }
ul.tl li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; display: flex; gap: 8px; }
ul.tl li time { color: var(--mut); font-size: 12px; min-width: 52px; }
ul.tl li.k-decision, ul.tl li.k-stop { font-weight: 600; }
#toast { position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); background: #111827; color: #fff; padding: 10px 14px; border-radius: 10px; z-index: 9; }
#toast.err { background: var(--bad); }
.err-box { background: #fee2e2; color: var(--bad); padding: 10px 12px; border-radius: 10px; margin: 10px 0; }
.empty { text-align: center; color: var(--mut); padding: 30px 0; }
a { color: var(--acc); }
.tabs2 { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 14px; }
.kv dt { color: var(--mut); } .kv dd { margin: 0; word-break: break-word; }