:root{--bg:#f6f7f9;--card:#fff;--text:#1c2330;--muted:#6b7686;--line:#dde2ea;--accent:#2457c5;--danger:#c0392b;--ok:#2e8b57}
@media (prefers-color-scheme:dark){:root{--bg:#12161d;--card:#1b212b;--text:#e8ecf3;--muted:#93a0b4;--line:#2b3442;--accent:#6b9bff;--danger:#ff7b6b;--ok:#5fcf8f}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
main{max-width:820px;margin:0 auto;padding:16px}
.top{display:flex;justify-content:space-between;align-items:center;max-width:820px;margin:0 auto;padding:14px 16px}
input,select,textarea,button{font:inherit;color:inherit}
input,select,textarea{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:9px 10px;min-width:0}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
button{cursor:pointer;background:var(--accent);color:#fff;border:0;border-radius:8px;padding:9px 16px;font-weight:600}
button.link{background:none;color:var(--accent);padding:4px 6px;font-weight:500}
button.link.danger{color:var(--danger)}
.quick,.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.quick input[name=title]{flex:1 1 100%}
.quick textarea{flex:1 1 100%;resize:vertical}
.quick input[name=tags]{flex:1 1 160px}
.filters input{flex:1 1 200px}
.count{color:var(--muted);margin:8px 0}
.todos{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.todo{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:10px;padding:10px 12px}
.todo.prio1{border-left-color:var(--danger)}
.todo.prio2{border-left-color:var(--accent)}
.todo.done .title{text-decoration:line-through;color:var(--muted)}
.check{background:none;color:var(--ok);font-size:20px;padding:0 4px;line-height:1.3}
.body{flex:1;min-width:0}
.title{font-weight:600;overflow-wrap:anywhere}
.note{color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere;margin-top:2px}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;font-size:13px}
.badge,.tag,.due{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:1px 9px;color:var(--muted)}
.due.overdue{color:var(--danger);border-color:var(--danger)}
.actions{display:flex;flex-direction:column;align-items:flex-end}
.edit{display:grid;gap:8px;width:100%}
.edit .row{display:flex;gap:8px;flex-wrap:wrap}
.empty{color:var(--muted);text-align:center;padding:24px}
.login{max-width:340px;margin:12vh auto;padding:0 16px}
.login form{display:grid;gap:12px}
.login label{display:grid;gap:4px;font-size:14px;color:var(--muted)}
.error{color:var(--danger);margin:0}
@media (max-width:560px){.actions{flex-direction:row}.todo{flex-wrap:wrap}.actions{width:100%;justify-content:flex-end}}
header.top nav{display:flex;gap:16px;align-items:center}
header.top nav a{color:var(--muted);text-decoration:none;font-weight:600}
header.top nav a[aria-current=page]{color:var(--accent);border-bottom:2px solid var(--accent)}
.mailrow.unread .title{font-weight:800}
.mailrow .title{text-decoration:none;color:var(--text);display:block}
.pager{display:flex;justify-content:space-between;margin:12px 0}
.mail h1{font-size:20px;margin:0 0 6px;overflow-wrap:anywhere}
.mailbody{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;overflow-wrap:anywhere;overflow-x:auto;margin-top:10px}
pre.mailbody{white-space:pre-wrap;font:inherit}
.mailbody table{max-width:100%}
.actions-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:8px 0}
.hint{color:var(--muted);font-size:13px}
.ok{color:var(--ok);margin:6px 0}
details.reply{margin-top:16px}
details.reply summary{cursor:pointer;font-weight:600;color:var(--accent)}
.filters select{max-width:100%}
.account-form label{display:grid;gap:4px;font-size:14px;color:var(--muted)}
.account-form details{display:grid;gap:8px}
.h{font-size:18px;margin:16px 0 8px}
.actions form{margin:0}
.senders{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:10px;margin:10px 0}
.senders th,.senders td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.senders .num{text-align:right;font-variant-numeric:tabular-nums}
.senders input[type=checkbox]{width:20px;height:20px}
.bulk{margin:10px 0}
button.danger{background:var(--danger)}
.badge-n{background:var(--danger);color:#fff;border-radius:10px;padding:0 7px;font-size:12px}
form.inline{display:inline}