:root { --fg:#1d232b; --muted:#68717d; --bg:#f6f7f9; --card:#fff; --line:#e1e4e8; --acc:#2463eb; --ok:#1a7f37; --err:#b42318; }
@media (prefers-color-scheme: dark) { :root { --fg:#e6e8eb; --muted:#9aa3ad; --bg:#14171b; --card:#1c2026; --line:#2d333b; --acc:#6d9eff; --ok:#4ac26b; --err:#ff7b72; } }
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--fg); background:var(--bg); }
a { color:var(--acc); }
header.top { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.2rem; padding:.6rem 1rem; background:var(--card); border-bottom:1px solid var(--line); }
header.top .brand { font-weight:600; text-decoration:none; color:var(--fg); }
header.top nav { display:flex; flex-wrap:wrap; gap:.9rem; flex:1; }
header.top nav a { text-decoration:none; }
header.top nav a.active { font-weight:600; text-decoration:underline; }
main { padding:1rem; max-width:1200px; margin:0 auto; }
main.narrow { max-width:460px; padding-top:3rem; }
h1 { font-size:1.4rem; margin:.4rem 0 1rem; } h2 { font-size:1.1rem; } h3 { font-size:1rem; margin:.2rem 0 .5rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1rem; margin:0 0 1rem; }
.muted { color:var(--muted); font-size:.9em; }
.note { background:var(--card); border-left:4px solid var(--acc); padding:.5rem .8rem; }
.alert { padding:.6rem .8rem; border-radius:6px; border:1px solid; }
.alert.ok { color:var(--ok); } .alert.err { color:var(--err); }
button { font:inherit; padding:.45rem 1rem; border-radius:6px; border:1px solid var(--acc); background:var(--acc); color:#fff; cursor:pointer; }
.logout button { background:transparent; color:var(--acc); }
input { font:inherit; font-family:ui-monospace, monospace; width:100%; padding:.45rem; margin:.3rem 0 .7rem; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); }
th, td { text-align:left; vertical-align:top; padding:.4rem .6rem; border-bottom:1px solid var(--line); }
th { font-weight:600; font-size:.9em; color:var(--muted); }
.nowrap { white-space:nowrap; }
tr.unseen td { font-weight:600; }
.status { font-size:.8em; padding:.05rem .45rem; border-radius:10px; border:1px solid var(--line); white-space:nowrap; }
.status-new, .status-deferred, .status-in_progress { color:#b26b00; } .status-done, .status-sent { color:var(--ok); } .status-bounced, .status-blocked { color:var(--err); }
.stats { display:flex; flex-wrap:wrap; gap:1rem; margin:1rem 0; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:.7rem 1rem; min-width:170px; }
.stat span { display:block; color:var(--muted); font-size:.85em; } .stat b { font-size:1.35rem; }
dl { display:grid; grid-template-columns:max-content 1fr; gap:.2rem 1rem; margin:0; } dt { color:var(--muted); }
pre { white-space:pre-wrap; word-break:break-word; background:var(--card); border:1px solid var(--line); padding:.8rem; border-radius:6px; }
.mail-body { background:#fff; color:#111; border:1px solid var(--line); padding:1rem; border-radius:6px; overflow:auto; }
.blocked-img { color:#888; font-style:italic; }
.tabs a { margin-right:1rem; } .tabs a.active { font-weight:600; }
ul.log { font-size:.9em; padding-left:1.2rem; } details { margin:.4rem 0; }
.feed td { font-size:.92em; } tr.feed-message td { background:rgba(36,99,235,.07); } tr.feed-journal td { background:rgba(26,127,55,.07); }