:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #0f172a;
  background: #f4f7fb;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(135deg,#f8fafc 0%,#eef2ff 100%); }
button,input,textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar { border-right: 1px solid #e2e8f0; background: rgba(255,255,255,.92); padding: 18px; position: sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:10px; margin-bottom:28px; }
.mark { width:36px; height:36px; border-radius:12px; background:#111827; color:#fff; display:grid; place-items:center; font-weight:800; }
.brand h1 { font-size:15px; margin:0; }
.brand p { font-size:11px; color:#64748b; margin:2px 0 0; }
.nav { display:flex; flex-direction:column; gap:6px; }
.nav button { border:0; background:transparent; text-align:left; padding:11px 12px; border-radius:11px; color:#475569; }
.nav button.active,.nav button:hover { background:#eef2ff; color:#312e81; }
.account { position:absolute; left:18px; right:18px; bottom:18px; padding:12px; border:1px solid #e2e8f0; border-radius:14px; background:#f8fafc; }
.account small { color:#64748b; word-break:break-all; }
.main { min-width:0; display:grid; grid-template-rows:auto 1fr; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; background:rgba(255,255,255,.78); border-bottom:1px solid #e2e8f0; backdrop-filter: blur(10px); }
.topbar h2 { margin:0; font-size:18px; }
.search { width:min(440px,50vw); border:1px solid #cbd5e1; border-radius:12px; padding:10px 13px; background:#fff; }
.content { display:grid; grid-template-columns: 420px 1fr; min-height:0; }
.list { border-right:1px solid #e2e8f0; background:rgba(255,255,255,.78); overflow:auto; }
.listhead { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid #e2e8f0; }
.message { width:100%; border:0; border-bottom:1px solid #edf2f7; background:#fff; padding:14px 16px; text-align:left; }
.message:hover { background:#f8fafc; }
.message.unread { background:#f8f9ff; }
.message .line { display:flex; justify-content:space-between; gap:10px; }
.message .sender { font-weight:700; font-size:13px; }
.message .date { font-size:11px; color:#94a3b8; }
.message .subject { font-size:13px; margin-top:5px; color:#1e293b; }
.message .snippet { font-size:12px; color:#64748b; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reader { min-width:0; overflow:auto; background:#fff; }
.reader-inner { max-width:900px; margin:0 auto; padding:28px 34px 60px; }
.reader-meta { border-bottom:1px solid #e2e8f0; padding-bottom:20px; margin-bottom:24px; }
.reader-meta h3 { font-size:22px; margin:0 0 12px; }
.reader-meta p { margin:5px 0; color:#64748b; font-size:13px; }
.body { line-height:1.65; font-size:15px; overflow-wrap:anywhere; }
.compose { position:fixed; right:24px; bottom:24px; width:min(620px,calc(100vw - 48px)); background:#fff; border:1px solid #cbd5e1; border-radius:18px; box-shadow:0 30px 70px rgba(15,23,42,.18); padding:18px; }
.compose h3 { margin:0 0 12px; }
.field { display:grid; gap:6px; margin-bottom:10px; }
.field label { font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.08em; }
.field input,.field textarea { border:1px solid #cbd5e1; border-radius:10px; padding:10px 12px; outline:none; }
.field textarea { min-height:220px; resize:vertical; }
.row { display:flex; gap:8px; justify-content:flex-end; }
.primary { border:0; background:#111827; color:#fff; padding:10px 14px; border-radius:10px; font-weight:700; }
.secondary { border:1px solid #cbd5e1; background:#fff; color:#334155; padding:10px 14px; border-radius:10px; font-weight:600; }
.login { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(420px,100%); background:#fff; border:1px solid #e2e8f0; border-radius:22px; padding:28px; box-shadow:0 25px 60px rgba(15,23,42,.08); }
.login-card h1 { margin:0 0 6px; }
.login-card p { margin:0 0 22px; color:#64748b; }
.error { background:#fff1f2; color:#be123c; border:1px solid #fecdd3; padding:10px 12px; border-radius:10px; font-size:12px; margin-bottom:12px; }
.empty { display:grid; place-items:center; height:100%; color:#94a3b8; padding:30px; text-align:center; }
.mobile-menu { display:none; }
@media (max-width:900px) {
  .shell { grid-template-columns:1fr; }
  .sidebar { display:none; position:fixed; inset:0 auto 0 0; width:280px; z-index:20; box-shadow:10px 0 30px rgba(15,23,42,.1); }
  .sidebar.open { display:block; }
  .mobile-menu { display:block; }
  .content { grid-template-columns:1fr; }
  .list { border-right:0; }
  .reader { display:none; }
  .reader.show { display:block; }
  .search { display:none; }
}