:root {
  --bg: #ffffff; --fg: #111111; --muted: #4a4a4a; --accent: #1b3a5c; --accent-fg: #ffffff;
  --border: #c9c9c9; --unread: #fff6d6;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121417; --fg: #f2f2f2; --muted: #b5b5b5; --accent: #6ea8e0; --accent-fg: #0b1b2b;
          --border: #3a3f45; --unread: #2a2a1a; }
}
* { box-sizing: border-box; }
html { font-size: 112.5%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
       line-height: 1.5; padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom); }
header h1 { font-size: 1.6rem; margin: 16px 0 4px; }
#status { min-height: 1.5em; color: var(--muted); margin: 0 0 12px; }
h2 { font-size: 1.25rem; margin: 20px 0 8px; }
section { margin-bottom: 12px; }
label { display: block; margin: 8px 0 4px; font-weight: 600; }
input { font: inherit; font-size: 1.4rem; letter-spacing: 0.15em; padding: 10px 12px; width: 100%; max-width: 320px;
        border: 2px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--fg); }
button { font: inherit; font-size: 1.05rem; min-height: 48px; padding: 10px 16px; margin: 8px 8px 0 0;
         border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-fg); cursor: pointer; }
button.secondary { background: transparent; color: var(--fg); border: 2px solid var(--border); }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.row { display: flex; flex-wrap: wrap; }
ul#messages { list-style: none; padding: 0; margin: 0; }
ul#messages li { border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin: 10px 0; }
ul#messages li.unread { background: var(--unread); }
ul#messages h3 { margin: 0 0 4px; font-size: 1.1rem; }
ul#messages .meta { color: var(--muted); font-size: 0.9rem; margin: 0 0 6px; }
ul#messages .body { white-space: pre-wrap; margin: 0; overflow-wrap: anywhere; }
a { color: var(--accent); }