:root { --bg:#f8fafc; --card:#fff; --fg:#0f172a; --muted:#64748b; --line:#e2e8f0; --brand:#2563eb; --brand-fg:#fff; --danger:#dc2626; --unread:#2563eb; }
@media (prefers-color-scheme: dark) { :root { --bg:#0b1120; --card:#111a2e; --fg:#e2e8f0; --muted:#94a3b8; --line:#1e293b; --brand:#3b82f6; --danger:#f87171; --unread:#60a5fa; } }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-text-size-adjust:100%; }
main { max-width:640px; margin:0 auto; padding:max(16px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom)); min-height:100vh; }
h1 { font-size:1.25rem; margin:0 0 4px; }
p { margin:8px 0; }
.muted { color:var(--muted); font-size:.9rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; margin:12px 0; }
.center { display:flex; flex-direction:column; justify-content:center; min-height:80vh; }
ol { padding-left:1.2rem; } li { margin:6px 0; }
button { font:inherit; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--fg); padding:10px 14px; min-height:44px; cursor:pointer; }
button.primary { background:var(--brand); color:var(--brand-fg); border-color:var(--brand); font-weight:600; }
button.link { border:0; background:none; color:var(--brand); padding:6px 8px; min-height:36px; }
button:disabled { opacity:.55; cursor:default; }
input { font:inherit; width:100%; padding:12px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--fg); letter-spacing:.2em; text-transform:uppercase; text-align:center; font-size:1.4rem; }
.err { color:var(--danger); font-size:.92rem; }
.bar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.bar .actions { display:flex; gap:4px; flex-wrap:wrap; }
.item { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:8px 0; }
.item.unread { border-left:4px solid var(--unread); }
.item.urgent { border-left:4px solid var(--danger); }
.item h2 { font-size:1rem; margin:0 0 2px; overflow-wrap:anywhere; }
.item p { overflow-wrap:anywhere; white-space:pre-wrap; margin:4px 0; }
.meta { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:.8rem; flex-wrap:wrap; }
.tag { color:var(--danger); font-weight:700; text-transform:uppercase; font-size:.7rem; }
.empty { text-align:center; color:var(--muted); margin:48px 0; }