:root { --bg:#fff; --fg:#14181f; --muted:#5b6573; --line:#d9dee6; --accent:#1a4d8f; --accent-fg:#fff; --card:#f4f6f9; --err:#b3261e; }
@media (prefers-color-scheme: dark) { :root { --bg:#10141a; --fg:#e8ecf2; --muted:#9aa5b4; --line:#2a323e; --accent:#6aa3ee; --accent-fg:#0b1220; --card:#1a212b; --err:#ff8a80; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui, sans-serif; }
header { display:flex; justify-content:space-between; align-items:center; padding:.75rem 16px; border-bottom:1px solid var(--line); padding-top:max(.75rem, env(safe-area-inset-top)); }
.pq { font-size:.8rem; color:var(--muted); }
main { max-width:44rem; margin:0 auto; padding:1rem 16px calc(2rem + env(safe-area-inset-bottom)); }
h1 { font-size:1.35rem; margin:.5rem 0; }
label { display:block; margin:.75rem 0; font-size:.9rem; color:var(--muted); }
input { display:block; width:100%; margin-top:.25rem; padding:.7rem; font:inherit; color:var(--fg); background:var(--card); border:1px solid var(--line); border-radius:8px; }
button { font:inherit; padding:.65rem 1rem; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--fg); cursor:pointer; min-height:44px; }
form button { width:100%; background:var(--accent); color:var(--accent-fg); border:0; font-weight:600; }
button:disabled { opacity:.6; }
.bar { display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap; }
.row { display:grid; grid-template-columns:1fr auto; gap:0 .75rem; width:100%; text-align:left; margin:.35rem 0; padding:.7rem .85rem; }
.row .from { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .date { color:var(--muted); font-size:.8rem; grid-row:1; grid-column:2; }
.row .subj { grid-column:1 / -1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .prev { grid-column:1 / -1; color:var(--muted); font-size:.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row.unread .from, .row.unread .subj { font-weight:700; }
pre { white-space:pre-wrap; word-break:break-word; font:inherit; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:.85rem; }
.muted { color:var(--muted); font-size:.9rem; }
.err { color:var(--err); min-height:1.5em; }
.notice { background:var(--card); border-left:4px solid var(--accent); padding:.6rem .8rem; border-radius:4px; }
[hidden] { display:none !important; }

button.primary { background:var(--accent); color:var(--accent-fg); border:0; font-weight:600; }
#setup button, #menc button { display:block; width:100%; margin:.4rem 0; }
.code { font:1.05rem/1.7 ui-monospace, Menlo, Consolas, monospace; letter-spacing:.04em; text-align:center; user-select:all; }
details { margin:1rem 0; } summary { cursor:pointer; color:var(--muted); }
.good { color:#1b7a3a; } .warn { color:#a15c00; }
@media (prefers-color-scheme: dark) { .good { color:#6fd18b; } .warn { color:#ffb454; } }