:root { --bg:#0f1720; --panel:#17212d; --line:#263445; --text:#e6edf3; --muted:#8b9bb0; --accent:#3b82f6; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, Segoe UI, sans-serif; background:var(--bg); color:var(--text); height:100vh; }
.hidden { display:none !important; }
.center { display:flex; align-items:center; justify-content:center; height:100vh; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:24px; width:340px; display:flex; flex-direction:column; gap:12px; }
.card.wide { width:min(640px, 94vw); }
input, textarea { background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:10px; font:inherit; width:100%; }
button { background:var(--line); color:var(--text); border:0; border-radius:8px; padding:10px 14px; cursor:pointer; font:inherit; }
button.primary, #loginForm button { background:var(--accent); }
.err { color:#f87171; margin:0; min-height:1em; }
.muted { color:var(--muted); }
.row { display:flex; gap:8px; }
#app { display:grid; grid-template-columns: 220px 340px 1fr; height:100vh; }
aside { background:var(--panel); border-right:1px solid var(--line); padding:16px; display:flex; flex-direction:column; gap:12px; }
aside h2 { margin:0 0 8px; }
nav { display:flex; flex-direction:column; gap:4px; flex:1; }
nav a { color:var(--text); text-decoration:none; padding:8px 10px; border-radius:8px; }
nav a.active, nav a:hover { background:var(--line); }
.me { display:flex; flex-direction:column; gap:8px; font-size:.85rem; color:var(--muted); word-break:break-all; }
#list { overflow-y:auto; border-right:1px solid var(--line); }
.item { padding:12px 14px; border-bottom:1px solid var(--line); cursor:pointer; }
.item:hover, .item.sel { background:var(--panel); }
.item.unread .subj { font-weight:700; }
.item .from { font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item .subj { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item .date { font-size:.75rem; color:var(--muted); }
main { padding:20px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
main h3 { margin:0; }
.meta { color:var(--muted); font-size:.9rem; }
pre.body { white-space:pre-wrap; word-wrap:break-word; font:inherit; margin:0; }
iframe { width:100%; flex:1; min-height:400px; border:0; background:#fff; border-radius:8px; }
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; }
@media (max-width: 900px) { #app { grid-template-columns: 1fr; height:auto; } #list { max-height:40vh; } }