:root { --bg:#f6f7f9; --fg:#1d2430; --muted:#6b7280; --line:#e3e6ea; --accent:#1a56db; --accent-fg:#fff; --card:#fff; --danger:#b42318; --unread:#f0f4ff; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#111418; --fg:#e6e8eb; --muted:#9aa3ad; --line:#2a3038; --accent:#5b8def; --accent-fg:#0b1220; --card:#181c22; --danger:#f08c84; --unread:#1b2230; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.5 system-ui, "Segoe UI", Arial, sans-serif; }
a { color:var(--accent); text-decoration:none; }
main { max-width: 980px; margin: 0 auto; padding: 16px; }
.top { display:flex; align-items:center; gap:14px; padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.brand { font-weight:700; color:var(--fg); }
.top nav { display:flex; gap:4px; }
.top nav a { padding:6px 10px; border-radius:8px; color:var(--fg); }
.top nav a.active { background:var(--bg); font-weight:600; }
.badge { background:var(--accent); color:var(--accent-fg); border-radius:999px; padding:0 7px; font-size:12px; }
.spacer { flex:1; }
.btn { display:inline-block; padding:7px 13px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--fg); cursor:pointer; font:inherit; }
.btn.primary { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
.btn.danger { color:var(--danger); }
.inline { display:inline; }
.flash { background:var(--unread); border:1px solid var(--line); padding:8px 12px; border-radius:8px; margin-bottom:12px; }
.muted { color:var(--muted); font-weight:400; }
.small { font-size:13px; }
.folder-title { font-size:20px; margin:4px 0 12px; }
.empty { padding:40px 0; text-align:center; }
.list { list-style:none; margin:0; padding:0; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.list li + li { border-top:1px solid var(--line); }
.list li a { display:grid; grid-template-columns: 220px 1fr auto; gap:12px; padding:10px 14px; color:var(--fg); align-items:baseline; }
.list li.unread { background:var(--unread); }
.list li.unread .who, .list li.unread .subject { font-weight:700; }
.list .who, .list .subject { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list .meta { color:var(--muted); font-size:13px; white-space:nowrap; }
@media (max-width: 640px) {
  .list li a { grid-template-columns: 1fr auto; }
  .list .subject { grid-column: 1 / -1; }
}
.message { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; }
.message h1 { font-size:22px; margin:12px 0; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.headers { border-collapse:collapse; margin-bottom:12px; }
.headers th { text-align:left; color:var(--muted); font-weight:500; padding:2px 12px 2px 0; vertical-align:top; white-space:nowrap; }
.headers td { padding:2px 0; }
.attachments { list-style:none; padding:10px 12px; margin:0 0 12px; background:var(--bg); border-radius:8px; }
.body { border-top:1px solid var(--line); padding-top:12px; }
.body p { margin:0 0 1em; white-space:pre-wrap; word-wrap:break-word; text-align:start; }
.html-body { width:100%; border:0; min-height:200px; background:#fff; border-radius:6px; }
.login { max-width:380px; margin:10vh auto; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:24px; }
.login h1 { font-size:20px; margin:0 0 16px; }
.error { background:#fdecec; color:#8a1c1c; border:1px solid #f5c2c2; padding:8px 12px; border-radius:8px; margin-bottom:12px; }
@media (prefers-color-scheme: dark) { .error { background:#3a1414; color:#f6b8b8; border-color:#6b2a2a; } }
label { display:block; margin-bottom:12px; font-size:13px; color:var(--muted); }
input, textarea, select { display:block; width:100%; margin-top:4px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); font:inherit; }
textarea { resize:vertical; line-height:1.5; }
input[type=file] { padding:6px; }
.compose { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; }