:root { --bg:#0f1116; --card:#171a21; --line:#262a33; --text:#e8eaf0; --muted:#8b91a0; --accent:#4f8cff; --ok:#2ecc71; --warn:#f5b041; --bad:#e74c3c; --chip:#232834; }
@media (prefers-color-scheme: light) { :root { --bg:#f5f6f8; --card:#fff; --line:#e3e6ec; --text:#141720; --muted:#667085; --chip:#eef1f6; } }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.hidden { display:none !important; }
.muted { color:var(--muted); } .small { font-size:12.5px; }
header { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; padding:10px 16px; padding-top:calc(10px + env(safe-area-inset-top)); background:var(--bg); border-bottom:1px solid var(--line); }
.brand { font-weight:700; font-size:18px; }
.pill { border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:999px; padding:6px 12px; font-size:14px; cursor:pointer; }
.pill.on { border-color:var(--bad); color:var(--bad); }
.pill.off { color:var(--ok); }
.tabs { display:flex; gap:4px; padding:8px 12px 0; overflow-x:auto; }
.tab { flex:1; min-width:90px; border:0; background:transparent; color:var(--muted); padding:8px 6px; border-bottom:2px solid transparent; font-size:14px; cursor:pointer; white-space:nowrap; }
.tab.active { color:var(--text); border-bottom-color:var(--accent); }
.tab b { font-weight:600; margin-left:4px; background:var(--chip); border-radius:999px; padding:0 7px; font-size:12px; }
.filters { display:flex; gap:6px; padding:8px 12px; }
.filters select { flex:1; min-width:0; background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:6px 8px; font-size:13px; }
main { padding:4px 12px 40px; max-width:820px; margin:0 auto; }
.banner { margin:8px 12px 0; padding:10px 12px; border-radius:10px; background:#3a2a10; color:#ffd48a; font-size:13.5px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin:10px 0; }
.card.high { border-left:4px solid var(--bad); }
.card.triage { border-left:4px solid var(--warn); }
.card-head .who { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.sender { font-weight:600; }
.chip { background:var(--chip); border-radius:999px; padding:1px 8px; font-size:12px; color:var(--muted); }
.chip.kind-change_request { color:#ffb86b; } .chip.kind-question { color:#8fb8ff; }
.chip.urg-high { color:var(--bad); font-weight:600; }
.flags { font-size:12px; color:var(--warn); }
.meta { margin-top:3px; }
.summary { margin:8px 0 6px; font-size:15px; }
details { margin:6px 0; } summary { cursor:pointer; color:var(--muted); font-size:13px; }
pre { white-space:pre-wrap; word-break:break-word; font:13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin:6px 0; max-height:260px; overflow:auto; }
.thread .t { font-size:13px; padding:6px 0; border-top:1px dashed var(--line); } .thread .t b { color:var(--muted); font-weight:600; }
.label { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:10px 0 4px; }
textarea { width:100%; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:10px; font:15px/1.45 inherit; resize:vertical; }
.notes { margin-top:4px; white-space:pre-wrap; }
.error { margin-top:8px; color:var(--bad); font-size:13px; white-space:pre-wrap; }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.actions button { border:1px solid var(--line); background:var(--chip); color:var(--text); border-radius:10px; padding:9px 12px; font-size:14px; cursor:pointer; }
.actions button.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.actions button.danger { color:var(--bad); }
.actions button:disabled { opacity:.5; }
.audit-list { padding-left:18px; margin:4px 0; color:var(--muted); }
.staging { display:inline-block; margin-top:6px; color:var(--accent); word-break:break-all; }
.empty { text-align:center; color:var(--muted); padding:40px 0; }
footer { text-align:center; padding:12px; }
.login { min-height:100vh; display:grid; place-items:center; padding:20px; }
.login form { width:100%; max-width:340px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; display:grid; gap:12px; }
.login input { padding:12px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:16px; }
.login button { padding:12px; border-radius:10px; border:0; background:var(--accent); color:#fff; font-weight:600; font-size:15px; }
.err { color:var(--bad); font-size:13px; min-height:1em; }
@media (min-width: 700px) { .filters { max-width:820px; margin:0 auto; } .tabs { max-width:820px; margin:0 auto; } }

.owner-line { margin:2px 0 6px; color:var(--muted); }
.owner-line b { color:var(--text); }
.owner-line.me b { color:var(--warn); } .owner-line.them b { color:#8fb8ff; } .owner-line.eve b { color:var(--ok); }
.eve-read { background:var(--chip); border-radius:10px; padding:8px 10px; font-size:13.5px; white-space:pre-wrap; margin:6px 0; }
.eve-read:empty { display:none; }
.next-step { color:var(--muted); margin:4px 0 2px; }
.next-step:empty { display:none; }
.timeline { margin:6px 0 0; color:var(--muted); }
.timeline .ev { padding:3px 0; border-top:1px dashed var(--line); }
.timeline .ev b { color:var(--text); font-weight:600; }
.timeline .ev .msg { display:block; color:var(--text); white-space:pre-wrap; margin-top:2px; }
.tabs .tab { min-width:auto; padding:8px 8px; }

.card-top { display:flex; align-items:flex-start; gap:10px; }
.src-icon { flex:0 0 auto; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; background:var(--chip); margin-top:1px; }
.src-icon svg { width:16px; height:16px; }
.headline { flex:1; font-size:15.5px; line-height:1.35; font-weight:600; }
.headline .eve-part { font-weight:400; color:var(--muted); }
.card-top .status { flex:0 0 auto; margin-top:2px; max-width:42%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meta { margin:6px 0 0 36px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.owner-line { margin:4px 0 4px 36px; }
details.more { margin-top:8px; border-top:1px solid var(--line); padding-top:6px; }
details.more > summary { font-size:13px; color:var(--accent); }
details.more[open] > summary { margin-bottom:6px; }

.next-box { margin:8px 0 0 36px; padding:10px 12px; border-radius:10px; background:color-mix(in srgb, var(--accent) 12%, var(--card)); border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.next-label { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); font-weight:700; }
.next-main { font-size:15px; font-weight:600; margin-top:2px; }
.next-detail { color:var(--muted); margin-top:2px; word-break:break-word; }
.next-detail a { color:var(--accent); }
.fyi-points { margin:6px 0 0 36px; white-space:pre-wrap; font-size:14px; }
.actions { margin-left:36px; }
.draft-box, .clarify-box, .error { margin-left:36px; }
@media (max-width: 480px) { .actions, .draft-box, .clarify-box, .error, .next-box, .fyi-points, .meta, .owner-line { margin-left:0; } }