:root{--bg:#f6f7f9;--fg:#1b1f24;--muted:#667085;--card:#fff;--line:#e2e5ea;--brand:#2f5bea;--ok:#157f3b;--bad:#b42318;--me:#e8f0ff;--pea:#f1f3f5}
@media (prefers-color-scheme:dark){:root{--bg:#14161a;--fg:#e8eaed;--muted:#9aa3af;--card:#1d2026;--line:#2c313a;--brand:#7aa2ff;--ok:#4ade80;--bad:#f87171;--me:#243456;--pea:#262a31}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.45 system-ui,-apple-system,Segoe UI,sans-serif}
header{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--card);border-bottom:1px solid var(--line)}
header h1{font-size:18px;margin:0}
main{max-width:1000px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:14px}
.card h2{font-size:16px;margin:0 0 10px}
.muted{color:var(--muted);font-size:14px}
.err{color:var(--bad)} .ok{color:var(--ok)}
button,.btn{font:inherit;padding:10px 14px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer}
button.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.names{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 16px}
.names button{flex:1 1 40%;min-height:56px;font-size:18px}
input,select{font:inherit;padding:10px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--fg);width:100%;margin:4px 0 10px}
label{display:block;font-size:14px;color:var(--muted)}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1 1 200px}
ul.plain{list-style:none;margin:0;padding:0}
ul.plain li{padding:6px 0;border-bottom:1px solid var(--line)}
.chat{height:340px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--bg)}
.msg{max-width:85%;margin:6px 0;padding:8px 12px;border-radius:12px;white-space:pre-wrap;word-wrap:break-word}
.msg.customer{background:var(--me);margin-left:auto}
.msg.mrpea,.msg.system{background:var(--pea)}
.msg small{display:block;color:var(--muted);font-size:12px}
.compose{display:flex;gap:8px;margin-top:10px}.compose input{margin:0}
table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:6px;border-bottom:1px solid var(--line);vertical-align:top}
.banner{background:#fff4d6;color:#5b4300;padding:8px 12px;border-radius:8px;margin-bottom:12px;font-size:14px}
@media (prefers-color-scheme:dark){.banner{background:#3a2f10;color:#ffe08a}}
.foot{text-align:center;padding:16px}
.msg.system{background:transparent;border:1px dashed var(--line);font-size:14px}
.msg.t-status,.msg.t-system_notice{font-style:italic}
.msg img.mock{display:block;max-width:100%;border-radius:8px;margin-bottom:6px;border:1px solid var(--line)}
.msg.t-approval_request{border-left:4px solid var(--brand)}
pre.diff{margin:6px 0 0;padding:8px;background:var(--bg);border-radius:6px;overflow-x:auto;font-size:13px;white-space:pre}
pre.diff .add{color:var(--ok)} pre.diff .del{color:var(--bad)} pre.diff .hunk{color:var(--muted)}
.waiting{font-style:italic}
.intake{border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:10px;background:var(--card)}
.intake-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--pea)}
.pill.s-confirming{background:var(--me)} .pill.s-done{color:var(--ok)} .pill.s-declined{color:var(--bad)}
.bar{height:6px;background:var(--pea);border-radius:3px;margin:8px 0;overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand)}
.checklist li{display:flex;gap:6px;border:0;padding:3px 0}
.checklist .tick{width:1.2em;color:var(--ok)} .checklist .todo{color:var(--muted)}
/* admin: CSP style-src 'self' blocks inline styles, so these live here */
.cap-row{display:flex;align-items:center;gap:8px;padding:4px 0;color:inherit}
input.cap-cb{width:auto;margin:0}
pre.wrap{white-space:pre-wrap}
input.sha-input{width:220px;margin:0 8px}
h2.sub{margin-top:14px}
.sugg{padding:6px 0;border-top:1px solid var(--line)}
blockquote.quote{margin:4px 0;padding:4px 10px;border-left:3px solid var(--line);color:var(--muted);font-size:14px;white-space:pre-wrap}
.pill.s-queued{background:var(--me)} .pill.s-proposed{color:var(--brand)} .pill.s-accepted,.pill.s-edited{color:var(--ok)} .pill.s-failed,.pill.s-rejected{color:var(--bad)}