:root{color-scheme:dark;--bg:#0b1220;--panel:#111e32;--line:#293b58;--text:#e3ecfc;--muted:#a2b2ca;--accent:#74c4ff}html[data-theme=light]{color-scheme:light;--bg:#f4f7fc;--panel:#fff;--line:#cbd5e1;--text:#162338;--muted:#52647c;--accent:#075bad}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px system-ui;display:grid;grid-template-columns:240px 1fr;min-height:100vh}aside{padding:28px 22px;background:var(--panel);border-right:1px solid var(--line)}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.brand{font-size:26px;font-weight:750}.account{overflow-wrap:anywhere;color:var(--muted);font-size:13px}nav{display:grid;gap:5px;margin:25px 0}nav a{padding:10px;border-radius:6px}nav a:hover{background:var(--bg)}.primary,button{background:#2463eb;color:white;border:0;border-radius:7px;padding:11px 16px;font:inherit;cursor:pointer}.primary{display:block;text-align:center}.secondary{background:var(--panel);color:var(--text);border:1px solid var(--line)}.danger{background:#b5233b}main{padding:30px 38px;min-width:0;max-width:1400px;width:100%}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}h1{font-size:28px;margin:0}.muted{color:var(--muted);line-height:1.6}section{border:1px solid var(--line);border-radius:10px;padding:20px;margin:20px 0;overflow-wrap:anywhere}section.messages{padding:0;overflow:hidden}.message{border-bottom:1px solid var(--line);padding:16px 20px}.message:last-child{border:0}.message>a:first-child{display:grid;grid-template-columns:minmax(120px,1fr) minmax(180px,2fr) 150px;gap:15px;color:var(--text)}.message time{font-size:12px;color:var(--muted)}.unread{background:var(--panel)}.unread strong:before{content:'● ';color:var(--accent)}label{display:block;margin:16px 0 8px}input:not([type=hidden]):not([type=checkbox]),select,textarea{width:100%;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:11px;font:inherit;margin:6px 0}textarea,#editor{min-height:220px;line-height:1.6}#editor{padding:16px;border:1px solid var(--line);background:var(--panel);border-radius:6px;overflow-wrap:anywhere}#html-tools{display:flex;gap:8px;margin:10px 0}[hidden]{display:none!important}.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:20px 0}.search{display:flex;gap:12px}.search input{flex:1}pre{white-space:pre-wrap;font:inherit;line-height:1.65;overflow-wrap:anywhere}iframe{width:100%;min-height:450px;border:1px solid var(--line);background:white}body.login{display:grid;place-items:center;grid-template-columns:1fr}.login main{max-width:430px;border:1px solid var(--line);border-radius:12px;background:var(--panel);margin:30px}.login button{width:100%;margin-top:15px}li{margin:12px 0}li form{display:inline-block;margin-left:15px}@media(max-width:800px){body{grid-template-columns:1fr}aside{border:0;border-bottom:1px solid var(--line);padding:18px}nav{grid-template-columns:repeat(3,1fr);margin:12px 0}.brand{font-size:22px}.primary{max-width:220px}main{padding:24px 16px}.message>a:first-child{grid-template-columns:1fr;gap:6px}header{gap:20px}h1{font-size:24px}}

/* Mailbox navigation and reading surfaces */
aside { background: var(--bg); }
nav a { color: var(--text); border-radius: 18px; padding-inline: 15px; }
nav a:hover, nav a[aria-current=page] { background: var(--panel); color: var(--accent); }
nav a[aria-current=page] { font-weight: 700; box-shadow: inset 3px 0 var(--accent); }
.primary { border-radius: 18px; font-weight: 650; }
main > header { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.search { align-items: center; }
.search input { min-width: 0; }
section.messages { border-radius: 16px; background: var(--panel); }
.message { padding-block: 13px; }
.message:not(.unread) { background: var(--bg); }
.message:hover { box-shadow: inset 3px 0 var(--accent); }
.message time { text-align: right; }
.empty { padding: 24px; color: var(--muted); margin: 0; }
.page-link { display: inline-block; margin: 8px 16px 8px 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media(max-width:800px) {
  nav { display: flex; overflow-x: auto; padding: 4px; }
  nav a { white-space: nowrap; }
  .message time { text-align: left; }
  .login main { width: calc(100% - 32px); margin: 16px; }
}