.mail-page-head { margin-bottom:16px; }
.mail-view { --mail-row-height:48px; }
.mail-account-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; margin-bottom:10px; padding:10px 14px; border:1px solid var(--line); border-radius:9px; background:var(--panel); box-shadow:var(--shadow); }
.mail-account-state { display:flex; align-items:center; gap:11px; min-width:0; }
.mail-account-state>div { display:grid; min-width:0; }
.mail-account-state strong,.mail-account-state small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-account-state small { color:var(--muted); font-size:.8125rem; }
.mail-commandbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.mail-search { display:flex; align-items:center; gap:8px; width:min(480px,100%); min-height:42px; padding:0 12px; border:1px solid var(--line2); border-radius:7px; background:var(--panel); }
.mail-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.mail-search>span { color:var(--muted); }
.mail-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; }
.mail-filters { display:flex; gap:6px; }
.mail-filters .chip { min-height:40px; padding-block:7px; }
.mail-panel { padding:0; overflow:hidden; border-radius:9px; }
.mail-columns { display:grid; grid-template-columns:22px minmax(145px,.65fr) minmax(300px,1.8fr) 92px; gap:10px; padding:8px 14px; border-bottom:1px solid var(--line2); background:var(--panel2); color:var(--muted); font-size:.75rem; font-weight:600; }
.mail-columns span:first-child { grid-column:2; }
.mail-columns span:nth-child(2) { grid-column:3; }
.mail-columns span:nth-child(3) { grid-column:4; text-align:right; }
.mail-list { display:grid; }
.mail-list .mail-row { position:relative; display:grid; grid-template-columns:22px minmax(145px,.65fr) minmax(300px,1.8fr) 92px; gap:10px; align-items:center; min-height:var(--mail-row-height); padding:6px 14px; border-bottom:1px solid var(--line); background:var(--panel); cursor:pointer; }
.mail-list .mail-row:last-child { border-bottom:0; }
.mail-list .mail-row:hover,.mail-list .mail-row:focus-visible { z-index:1; background:var(--accent-soft); outline:1px solid color-mix(in srgb,var(--accent) 42%,transparent); outline-offset:-1px; }
.mail-list .mail-row.unread { background:color-mix(in srgb,var(--accent-soft) 62%,var(--panel)); }
.mail-list .mail-row.unread:before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--accent); }
.mail-unread-dot { width:8px; height:8px; border-radius:50%; background:transparent; }
.mail-row.unread .mail-unread-dot { background:var(--accent); }
.mail-row .sender,.mail-summary,.mail-summary>* { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-row .sender { font-size:.9rem; font-weight:500; }
.mail-row.unread .sender,.mail-row.unread .mail-summary>strong,.mail-row.unread time { color:var(--accent); font-weight:650; }
.mail-summary { display:flex; align-items:baseline; gap:6px; }
.mail-summary>strong { flex:0 1 auto; font-size:.9rem; font-weight:500; }
.mail-summary>span { color:var(--muted); }
.mail-summary>p { flex:1 1 auto; margin:0!important; color:var(--muted); font-size:.875rem; }
.mail-row time { color:var(--muted); font-size:.8125rem; text-align:right; white-space:nowrap; }
.mail-detail-meta>div { display:grid; }
.mail-detail-meta small { color:var(--muted); }

@media (max-width:720px) {
  .mail-commandbar { align-items:stretch; flex-direction:column; }
  .mail-search { width:100%; }
  .mail-columns { display:none; }
  .mail-list .mail-row { grid-template-columns:14px minmax(0,1fr) auto; gap:7px; min-height:72px; padding:10px 12px; }
  .mail-row .sender { grid-column:2; }
  .mail-row time { grid-column:3; }
  .mail-summary { grid-column:2/4; }
  .mail-summary>span { display:none; }
  .mail-account-bar { align-items:flex-start; }
}