:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0a0c10;
  color: #edf1f7;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background:
  radial-gradient(circle at 15% 5%, rgba(92,111,255,.16), transparent 30rem),
  radial-gradient(circle at 90% 15%, rgba(27,211,170,.10), transparent 28rem),
  #0a0c10;
}
button, input, select { font: inherit; }
.shell { width: min(1180px, calc(100% - 32px)); margin: 42px auto; }
.card {
  background: rgba(18,22,29,.88);
  border: 1px solid #242b36;
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
}
.hero { display: grid; grid-template-columns: 1fr 1.15fr; gap: 34px; padding: 32px; }
h1 { font-size: clamp(36px, 6vw, 68px); margin: 5px 0 12px; letter-spacing: -.055em; line-height: .98; }
h2 { margin: 5px 0 0; }
p { color: #929cac; max-width: 48ch; line-height: 1.7; }
.eyebrow { color: #7f8b9e; font-size: 12px; letter-spacing: .18em; font-weight: 800; }
.address-box { align-self: center; }
.address-box label { display:block; margin-bottom: 9px; color:#9ca6b5; font-size:13px; }
.address-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:10px; }
input, select {
  min-width: 0;
  width:100%;
  background:#0e1218;
  color:#fff;
  border:1px solid #303846;
  border-radius:13px;
  padding:14px 15px;
  outline:none;
}
input:focus, select:focus { border-color:#6473ff; box-shadow:0 0 0 3px rgba(100,115,255,.12); }
.at { color:#697588; font-weight:700; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
button {
  border:1px solid #303846;
  background:#171d26;
  color:#e7ebf2;
  border-radius:12px;
  padding:11px 14px;
  cursor:pointer;
}
button:hover { transform: translateY(-1px); border-color:#465164; }
button.primary { background:#6473ff; border-color:#6473ff; color:#fff; }
.current { margin-top:15px; font-weight:800; word-break:break-all; }
.status { min-height:20px; margin-top:7px; color:#8d98a8; font-size:13px; }
.mail-layout { display:grid; grid-template-columns: 390px 1fr; gap:18px; margin-top:18px; }
.inbox, .reader { min-height:520px; }
.inbox { padding:20px; }
.section-head { display:flex; align-items:center; justify-content:space-between; padding:2px 4px 16px; }
.badge { min-width:28px; text-align:center; padding:5px 9px; border-radius:999px; background:#232a35; color:#abb5c4; font-size:12px; }
.mail-list { display:flex; flex-direction:column; gap:9px; }
.mail-item {
  border:1px solid #252d39;
  background:#10151c;
  padding:14px;
  border-radius:14px;
  cursor:pointer;
}
.mail-item:hover { border-color:#465268; }
.mail-item.active { border-color:#6473ff; box-shadow:0 0 0 2px rgba(100,115,255,.12); }
.mail-item .subject { font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mail-item .sender, .mail-item .preview { color:#8792a2; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:5px; }
.empty, .reader-empty { color:#667285; display:grid; place-items:center; min-height:280px; text-align:center; }
.reader { padding:28px; overflow:hidden; }
.reader-content h2 { font-size:28px; overflow-wrap:anywhere; }
dl { margin:22px 0; border-top:1px solid #242c37; border-bottom:1px solid #242c37; padding:13px 0; }
dl div { display:grid; grid-template-columns:70px 1fr; gap:10px; padding:5px 0; }
dt { color:#6f7b8d; }
dd { margin:0; color:#b9c1ce; overflow-wrap:anywhere; }
pre { white-space:pre-wrap; word-break:break-word; font:14px/1.72 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:#d8dee8; margin:0; }
.mail-view-tools { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.mail-view-tools button { padding:8px 11px; font-size:13px; }
.mail-view-tools button.active { border-color:#6473ff; background:#232b54; }
.mail-view-tools button:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.mail-frame {
  display:block;
  width:100%;
  height:68vh;
  min-height:520px;
  border:1px solid #2b3441;
  border-radius:14px;
  background:#fff;
}
.mail-frame.hidden { display:none; }
#mail-body { min-height:280px; }
.hidden { display:none; }
@media (max-width: 850px) {
  .hero, .mail-layout { grid-template-columns:1fr; }
  .reader { min-height:380px; }
}
@media (max-width: 540px) {
  .shell { width:min(100% - 20px, 1180px); margin:18px auto; }
  .hero { padding:22px; }
  .address-row { grid-template-columns:1fr; }
  .at { display:none; }
  .actions button { flex:1; }
}