body.mail-layout-active { overflow: hidden; }
.app.mail-layout-active .main-shell { position: relative; padding-left: 250px; }
.app.mail-layout-active .content, .app.mail-layout-active .topbar,
.app.sidebar-collapsed.mail-layout-active .content, .app.sidebar-collapsed.mail-layout-active .topbar { margin-left: 0; }
.app.mail-layout-active .content { height: calc(100vh - 62px); min-height: 0; padding: 0; overflow: hidden; }
#mailModule, .mail-shell { height: calc(100vh - 62px); min-height: 0; }
.mail-shell { display: block; background: #fff; }
.mail-menu-pane { position: fixed; z-index: 70; top: 0; bottom: 0; left: 224px; width: 250px; overflow-y: auto; border-right: 1px solid #dce3ec; background: #fbfcfe; transition: left .24s ease; }
.app.sidebar-collapsed.mail-layout-active .mail-menu-pane { left: 64px; }
.mail-menu-head { height: 62px; display: flex; align-items: center; gap: 11px; padding: 0 16px; border-bottom: 1px solid #e5eaf1; background: #fff; }
.mail-menu-head div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mail-menu-head strong { color: #172b43; font-size: 15px; }
.mail-menu-head small { overflow: hidden; color: #76869a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.mail-logo { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: #e9f7f1; color: #11815f; font-size: 19px; }
.mail-menu { padding: 10px 8px 20px; }
.mail-menu-item { width: 100%; min-height: 46px; display: grid; grid-template-columns: 30px minmax(0,1fr) 15px; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: #34465a; text-align: left; cursor: pointer; }
.mail-menu-item:hover { background: #f0f5f8; }
.mail-menu-item.active { background: #e6f5ef; color: #087657; font-weight: 600; }
.mail-menu-item b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: #edf1f5; color: #60748a; font-size: 12px; }
.mail-menu-item.active b { background: #15936d; color: #fff; }
.mail-menu-item i { color: #a5b0bd; font-style: normal; font-size: 18px; }
.mail-menu-item.danger { margin-top: 3px; color: #b42318; }
.mail-content-pane { height: 100%; overflow-y: auto; background: #fff; }
.mail-view { min-height: 100%; background: #fff; }
.mail-view-head { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; border-bottom: 1px solid #e4e9ef; }
.mail-view-head h3 { margin: 0 0 4px; color: #172b43; font-size: 18px; }
.mail-view-head p { margin: 0; color: #7a899a; font-size:13px; }
.mail-refresh, .mail-back { border: 0; background: transparent; color: #087657; cursor: pointer; }
.mail-list-tools { display: flex; align-items: center; gap: 12px; }
.mail-read-btn { min-width: 96px; height: 34px; padding: 0 14px; border: 1px solid #d4dee8; border-radius: 6px; background: #fff; color: #087657; font-size:13px; font-weight: 600; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.mail-read-btn:hover:not(:disabled) { border-color: #bed8ce; background: #f4fbf8; color: #07674c; }
.mail-read-btn:disabled { border-color: #e1e6eb; background: #f4f5f6; color: #a8b0b8; cursor: not-allowed; }
.mail-delete-btn { min-width: 88px; height: 34px; padding: 0 14px; border: 1px solid #f2d2cf; border-radius: 6px; background: #fff5f4; color: #c24137; font-size:13px; font-weight: 600; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.mail-delete-btn:hover:not(:disabled) { border-color: #e6b7b2; background: #fdeeee; color: #a8342b; }
.mail-delete-btn:disabled { border-color: #e1e6eb; background: #f4f5f6; color: #a8b0b8; cursor: not-allowed; }
.mail-delete-btn.inline { min-width: 56px; height: 30px; padding: 0 10px; border-color: transparent; background: transparent; color: #d04a3d; }
.mail-delete-btn.inline:hover:not(:disabled) { border-color: #f3d2cf; background: #fff5f5; }
.mail-junk-btn, .mail-restore-btn { min-width: 108px; height: 34px; padding: 0 14px; border: 1px solid #d4dee8; border-radius: 6px; background: #fff; color: #40556b; font-size:13px; font-weight: 600; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.mail-junk-btn:hover:not(:disabled), .mail-restore-btn:hover:not(:disabled) { border-color: #c8d6e3; background: #f7fafc; color: #263b50; }
.mail-junk-btn:disabled, .mail-restore-btn:disabled { border-color: #e1e6eb; background: #f4f5f6; color: #a8b0b8; cursor: not-allowed; }
.mail-alert { margin: 12px 20px 0; padding: 10px 14px; border: 1px solid #fecaca; background: #fff7f7; color: #b42318; }
.mail-alert button { float: right; border: 0; background: transparent; cursor: pointer; }
.mail-state { min-height: 360px; display: grid; place-content: center; gap: 8px; color: #8492a2; text-align: center; }
.mail-state > span { font-size: 38px; color: #b8c4d1; }
.mail-state strong { color: #4b5e72; }
.mail-list-wrap { position: relative; padding-bottom: 92px; }
.mail-list { width: 100%; padding: 0 20px 16px; background: #fff; }
.mail-list-head { min-height: 40px; display: grid; grid-template-columns: 34px 28px minmax(250px,1.12fr) minmax(380px,1.7fr) 150px; align-items: center; column-gap: 18px; margin: 0; padding: 8px 16px; border-bottom: 1px solid #dfe6ee; background: #f7f9fb; color: #607287; font-size:13px; font-weight: 600; }
.mail-row { width: 100%; min-height: 58px; display: grid; grid-template-columns: 34px 28px minmax(250px,1.12fr) minmax(380px,1.7fr) 150px; align-items: center; column-gap: 18px; margin: 0; padding: 8px 16px; border: 0; border-bottom: 1px solid #edf1f5; background: #fff; color: #33465a; text-align: left; cursor: pointer; box-shadow: none; transition: background .18s ease; }
.mail-row:hover { background: #f7faf9; }
.mail-row.selected { background: #f2fbf7; }
.mail-row.selected:hover { background: #eaf8f1; }
.mail-select-cell { display: grid; place-items: center; }
.mail-select-cell input { width: 16px; height: 16px; accent-color: #15936d; cursor: pointer; }
.mail-star { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: #aab5c1; font-size: 20px; line-height: 1; cursor: pointer; }
.mail-star:hover, .mail-star.active { color: #f2a600; }
.mail-favorite-detail { margin-left: 10px; padding: 7px 12px; border: 1px solid #d5dee7; border-radius: 6px; background: #fff; color: #52667a; cursor: pointer; }
.mail-favorite-detail.active { border-color: #f4ce75; background: #fffaf0; color: #b77900; }
.mail-blacklist-detail { margin-left: 10px; padding: 7px 12px; border: 1px solid #f0c5c2; border-radius: 6px; background: #fff7f6; color: #b42318; cursor: pointer; }
.mail-blacklist-detail:hover { border-color: #e79a94; background: #fff0ee; }
.mail-row strong, .mail-sender { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-sender { color: #496075; font-size: 13px; }
.mail-subject-col { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-list-head .mail-subject-col, .mail-row .mail-subject-col { padding-left: 20px; border-left: 1px solid #edf1f5; }
.mail-time-col { width: 100%; display: block; justify-self: stretch; text-align: right; }
.mail-list-head .mail-time-col { color: #607287; }
.mail-row time.mail-time-col { padding: 0; border-radius: 0; background: transparent; color: #8190a0; font-size:13px; font-variant-numeric: tabular-nums; box-shadow: none; }
.mail-pagination-shell { position: sticky; left: 0; right: 0; bottom: 0; z-index: 8; padding: 12px 20px 14px; border-top: 1px solid #e7edf3; background: #fff; }
.mail-pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.mail-pagination-left, .mail-pagination-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mail-pagination-total { color: #33465a; font-size: 13px; }
.mail-page-size select, .mail-page-jump input { height: 38px; border: 1px solid #d5e0ea; border-radius: 8px; background: #fff; color: #24384d; font: inherit; }
.mail-page-size select { min-width: 106px; padding: 0 12px; cursor: pointer; }
.mail-page-btn { min-width: 40px; height: 38px; padding: 0 14px; border: 1px solid #d5e0ea; border-radius: 8px; background: #fff; color: #2e455d; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.mail-page-btn:hover:not(:disabled) { border-color: #adc9ff; background: #f5f9ff; color: #2563eb; }
.mail-page-btn.active { border-color: #4c84ff; background: #4c84ff; color: #fff; box-shadow: none; }
.mail-page-btn.icon { min-width: 38px; padding: 0 10px; font-size: 18px; line-height: 1; }
.mail-page-btn:disabled { border-color: #e5ebf2; background: #f5f7fa; color: #a6b1bd; cursor: not-allowed; box-shadow: none; }
.mail-page-jump { display: inline-flex; align-items: center; gap: 8px; color: #52667a; white-space: nowrap; }
.mail-page-jump input { width: 72px; padding: 0 10px; }
.mail-dialog-mask { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: 24px; background: rgba(15, 23, 42, 0.18); backdrop-filter: blur(6px); }
.mail-dialog { width: min(520px, calc(100vw - 48px)); display: grid; grid-template-columns: 68px minmax(0,1fr); gap: 18px; padding: 24px 26px; border: 1px solid rgba(227, 235, 243, 0.95); border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,0.98) 0, #ffffff 100%); box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18); }
.mail-dialog-badge { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(135deg, #ffe9e7 0, #ffd4cf 100%); color: #b9382c; font-size: 24px; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.mail-dialog-content h4 { margin: 2px 0 10px; color: #172b43; font-size: 22px; }
.mail-dialog-content p { margin: 0; color: #52667a; font-size: 14px; line-height: 1.75; }
.mail-dialog-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }
.mail-dialog-btn { min-width: 92px; height: 40px; padding: 0 18px; border-radius: 12px; border: 1px solid #d6e0ea; background: #fff; color: #31485f; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .18s ease; }
.mail-dialog-btn:hover:not(:disabled) { border-color: #b8c9da; background: #f8fafc; }
.mail-dialog-btn.ghost { box-shadow: 0 8px 18px rgba(148, 163, 184, 0.12); }
.mail-dialog-btn.danger { border-color: #1d1b1f; background: linear-gradient(180deg, #3b373d 0, #1d1b1f 100%); color: #fff; box-shadow: 0 16px 26px rgba(29, 27, 31, 0.22); }
.mail-dialog-btn.danger:hover:not(:disabled) { border-color: #111015; background: linear-gradient(180deg, #49444c 0, #242129 100%); }
.mail-dialog-btn.primary { border-color: #11815f; background: #15936d; color: #fff; }
.mail-dialog-btn.primary:hover:not(:disabled) { border-color: #087657; background: #087657; }
.mail-dialog-btn:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }
.mail-detail { padding: 22px 28px 40px; }
.mail-detail h2 { margin: 24px 0 14px; color: #172b43; }
.mail-detail dl { padding-bottom: 16px; border-bottom: 1px solid #e7ebf0; }
.mail-detail dl div { display: flex; gap: 12px; margin: 7px 0; }
.mail-detail dt { width: 56px; color: #8693a1; }
.mail-detail dd { margin: 0; color: #34465a; }
.mail-detail article { max-width: 900px; padding: 24px 0; color: #27394d; line-height: 1.75; }
.mail-detail article pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: inherit; }
.mail-compose, .mail-admin-form { max-width: 820px; display: grid; gap: 10px; padding: 18px 24px; }
.mail-compose { align-content: start; grid-auto-rows: max-content; }
.mail-compose label, .mail-admin-form label { display: grid; gap: 7px; color: #44576b; font-size: 13px; }
.mail-compose input, .mail-compose textarea, .mail-admin-form input, .mail-admin-form select { width: 100%; padding: 10px 12px; border: 1px solid #ced8e3; border-radius: 6px; background: #fff; color: #172b43; font: inherit; }
.mail-compose > label:nth-of-type(1), .mail-compose > label:nth-of-type(2) { grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 10px; }
.mail-compose > label:nth-of-type(1) input, .mail-compose > label:nth-of-type(2) input { height: 38px; padding-top: 6px; padding-bottom: 6px; }
.mail-compose > label:nth-of-type(3) { gap: 0; font-size: 0; }
.mail-compose > label:nth-of-type(3) textarea { font-size: 13px; }
.mail-compose textarea { min-height: 320px; resize: vertical; }
.mail-compose textarea:focus, .mail-html-editor:focus { outline: none; border-color: #82c9bb; box-shadow: 0 0 0 2px rgba(33, 169, 139, .13); }
.mail-row strong { color: #1d3550; font-size: 14px; font-weight: 400; }
.mail-row.unread { color: #111827; background: #fff; }
.mail-row.unread .mail-sender, .mail-row.unread strong, .mail-row.unread time { color: #111827; font-weight: 700; }
.mail-editor-shell { width: 100%; border: 1px solid #ced8e3; border-radius: 6px; overflow: hidden; background: #fff; }
.mail-editor-shell:focus-within { border-color: #82c9bb; box-shadow: 0 0 0 2px rgba(33, 169, 139, .13); }
.mail-editor-toolbar { min-height: 40px; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 4px 7px; border-bottom: 1px solid #d9e2eb; background: #f5f7f9; }
.mail-editor-toolbar button { min-width: 34px; height: 30px; padding: 3px 8px; border: 0; border-radius: 4px; background: transparent; color: #263b50; font-size: 15px; cursor: pointer; }
.mail-editor-toolbar button:hover { background: #dff3ee; color: #087a62; }
.mail-html-editor { min-height: 320px; padding: 12px; color: #172b43; font-size: 14px; line-height: 1.6; overflow: auto; }
.mail-html-editor:empty::before { content: attr(data-placeholder); color: #8292a5; pointer-events: none; }
.mail-reply-compose-line { min-height: 23px; }
.mail-reply-quote { margin-top: 8px; padding: 14px 14px 12px; border-top: 1px solid #d9e2ec; background: #f8fafc; border-radius: 0 0 6px 6px; }
.mail-reply-quote-title { display: block; margin-bottom: 8px; color: #2563eb; font-weight: 600; }
.mail-reply-quote-meta { display: grid; gap: 3px; color: #64748b; }
.mail-reply-quote-body { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #dbe4ee; white-space: pre-wrap; color: #334155; }
.mail-compose > div { display: flex; gap: 10px; }
.mail-admin-form { max-width: 560px; }
.mail-settings-grid { display: grid; grid-template-columns: minmax(320px, 560px) minmax(360px, 1fr); gap: 22px; align-items: start; padding: 18px 24px 36px; }
.mail-settings-single, .mail-blacklist-shell { padding: 18px 24px 36px; }
.mail-settings-single .mail-admin-form, .mail-blacklist-shell .mail-blacklist-panel { max-width: 820px; }
.mail-settings-grid .mail-admin-form { padding: 0; }
.mail-settings-grid h4 { margin: 0 0 10px; color: #23384d; }
.mail-blacklist-panel { min-width: 0; padding: 18px; border: 1px solid #e2e9ef; border-radius: 10px; background: #f9fbfc; }
.mail-blacklist-panel > p { margin: -3px 0 14px; color: #718196; font-size:13px; line-height: 1.6; }
.mail-blacklist-form { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(120px, .8fr) minmax(140px, 1fr) auto; gap: 8px; }
.mail-blacklist-form input { min-width: 0; padding: 9px 10px; border: 1px solid #ced8e3; border-radius: 6px; font: inherit; }
.mail-blacklist-form button { white-space: nowrap; }
.mail-blacklist-empty { margin-top: 14px; padding: 22px; border: 1px dashed #d5dee7; border-radius: 8px; color: #8a98a7; text-align: center; }
.mail-blacklist-list { display: grid; gap: 8px; margin-top: 14px; }
.mail-blacklist-list article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #e3e9ef; border-radius: 7px; background: #fff; }
.mail-blacklist-list article div { min-width: 0; display: grid; gap: 3px; }
.mail-blacklist-list strong, .mail-blacklist-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-blacklist-list small { color: #718196; }
.mail-blacklist-list button { border: 0; background: transparent; color: #b42318; cursor: pointer; }
.mail-check { display: flex !important; grid-template-columns: auto 1fr; align-items: center; }
.mail-check input { width: auto; }
.mail-warning { padding: 10px 12px; border-left: 3px solid #d92d20; background: #fff5f4; color: #b42318; }
.mail-submenu { display: grid; margin: 0 8px 6px 38px; border-left: 1px solid #d9e2eb; }
.mail-submenu button { padding: 8px 14px; border: 0; background: transparent; color: #516579; text-align: left; cursor: pointer; }
.mail-submenu button:hover { color: #087657; background: #f0f7f4; }
.mail-submenu button.danger { color: #b42318; }
.mail-compose-tools { display: flex; gap: 8px; }
.mail-compose-tools button, .mail-compose-tools label, .mail-reply { padding: 7px 12px; border: 1px solid #d4dee8; border-radius: 6px; background: #fff; color: #40556b; font-size:13px; cursor: pointer; }
.mail-compose-tools button:disabled { border-color: #e1e6eb; background: #f4f5f6; color: #a8b0b8; cursor: not-allowed; }
.mail-recipient-line, .mail-subject-line { grid-template-columns: 58px minmax(0, 1fr) !important; align-items: center; gap: 10px !important; font-size: 13px !important; }
.mail-body-line { gap: 0 !important; font-size: 0 !important; }
.mail-body-line textarea { font-size: 13px !important; }
.mail-recipient-control { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 38px 38px; }
.mail-recipient-control input { border-radius: 6px 0 0 6px; }
.mail-recipient-control > button { border: 1px solid #ced8e3; border-left: 0; border-radius: 0; background: #fff; color: #304a61; font-size: 20px; cursor: pointer; }
.mail-recipient-control > button:last-of-type { border-radius: 0 6px 6px 0; }
.mail-contact-picker-btn { font-size: 16px !important; }
.mail-recipient-suggestions { position: absolute; z-index: 9; top: 42px; right: 76px; left: 0; display: grid; padding: 5px; border: 1px solid #d5dee7; border-radius: 8px; background: #fff; box-shadow: 0 12px 28px rgba(31, 50, 68, .16); }
.mail-recipient-suggestions button { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 10px; border: 0; border-radius: 5px; background: transparent; color: #30465b; text-align: left; cursor: pointer; }
.mail-recipient-suggestions button:hover { background: #eef7f3; }
.mail-recipient-suggestions b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-recipient-suggestions small { color: #7b8998; }
.mail-recipient-menu { position: absolute; z-index: 5; top: 42px; right: 0; width: 150px; display: grid; padding: 5px 0; border: 1px solid #d5dee7; border-radius: 6px; background: #fff; box-shadow: 0 8px 24px rgba(31, 50, 68, .15); }
.mail-recipient-menu button { padding: 9px 14px; border: 0; background: transparent; color: #40556b; text-align: left; cursor: pointer; }
.mail-recipient-menu button:hover { background: #eef7f3; color: #087657; }
.mail-compose-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; min-height: calc(100vh - 134px); }
.mail-compose-layout .mail-compose { max-width: none; }
.mail-compose-options { display: grid; align-content: start; gap: 14px; padding: 22px 18px; border-left: 1px solid #e2e8ef; background: #fbfcfd; }
.mail-compose-options h4 { margin: 0 0 4px; color: #253b52; }
.mail-compose-options > label:not(.mail-upload-box) { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #52667a; font-size:13px; }
.mail-compose-options select { min-width: 110px; padding: 7px; border: 1px solid #ced8e3; border-radius: 5px; background: #fff; }
.mail-upload-box { min-height: 130px; display: grid; place-content: center; gap: 12px; border: 2px dashed #ced8e3; border-radius: 8px; color: #7d8b99; text-align: center; cursor: pointer; }
.mail-upload-box strong { color: #087657; }
.mail-attachment-list { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px; background: #f5f8fa; }
.mail-attachment-list span { padding: 5px 8px; border-radius: 5px; background: #fff; color: #516579; font-size:13px; }
.mail-reply { margin-left: 10px; }
.mail-admin-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #ced8e3; border-radius: 6px; font: inherit; }
.mail-contact-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-bottom: 1px solid #edf1f5; color: #718196; font-size:13px; }
.mail-contact-toolbar input { width: min(420px, 60vw); height: 38px; padding: 0 12px; border: 1px solid #ced8e3; border-radius: 7px; font: inherit; }
.mail-contact-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; padding: 20px 24px 40px; }
.mail-contact-card { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 16px; border: 1px solid #e1e8ef; border-radius: 10px; background: #fff; box-shadow: 0 5px 16px rgba(30, 50, 70, .05); }
.mail-contact-avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #e6f5ef; color: #087657; font-weight: 700; }
.mail-contact-card h4 { margin: 0 0 5px; color: #21374d; font-size: 14px; }
.mail-contact-card a { display: block; overflow: hidden; color: #2d6fa7; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.mail-contact-card small { display: block; margin-top: 5px; color: #8290a0; }
.mail-contact-actions { display: flex; gap: 5px; }
.mail-contact-actions button { padding: 6px 8px; border: 1px solid #d6e0ea; border-radius: 5px; background: #fff; color: #40566c; cursor: pointer; }
.mail-contact-actions button:hover { background: #eef7f3; color: #087657; }
.mail-contact-actions button.danger { color: #b42318; }
.mail-contact-dialog, .mail-contact-picker { width: min(520px, calc(100vw - 48px)); max-height: calc(100vh - 64px); overflow: auto; padding: 22px; border: 1px solid #e0e8ef; border-radius: 16px; background: #fff; box-shadow: 0 26px 60px rgba(15, 23, 42, .18); }
.mail-contact-dialog { display: grid; gap: 14px; }
.mail-contact-dialog header, .mail-contact-picker header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mail-contact-dialog h4, .mail-contact-picker h4 { margin: 0 0 5px; color: #172b43; font-size: 20px; }
.mail-contact-dialog header p, .mail-contact-picker header p { margin: 0; color: #7b8998; font-size:13px; }
.mail-contact-dialog header > button, .mail-contact-picker header > button { border: 0; background: transparent; color: #718196; font-size: 22px; cursor: pointer; }
.mail-contact-dialog label { display: grid; gap: 7px; color: #44576b; font-size: 13px; }
.mail-contact-dialog label input:not([type="checkbox"]), .mail-contact-picker-search { width: 100%; height: 40px; padding: 0 11px; border: 1px solid #ced8e3; border-radius: 7px; font: inherit; }
.mail-contact-dialog footer, .mail-contact-picker footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 8px; }
.mail-contact-picker-search { margin: 16px 0 10px; }
.mail-contact-picker-row { display: grid; grid-template-columns: 22px 40px minmax(0,1fr); align-items: center; gap: 10px; padding: 10px 7px; border-bottom: 1px solid #edf1f5; cursor: pointer; }
.mail-contact-picker-row input { width: 16px; height: 16px; accent-color: #15936d; }
.mail-contact-picker-row span:last-child { display: grid; gap: 3px; min-width: 0; }
.mail-contact-picker-row small { overflow: hidden; color: #7b8998; text-overflow: ellipsis; white-space: nowrap; }
.mail-contact-picker-empty { padding: 34px; color: #8290a0; text-align: center; }
.mail-contact-picker footer { justify-content: space-between; color: #607287; font-size: 13px; }
.mail-contact-picker footer div { display: flex; gap: 8px; }
@media (max-width: 1250px) { .mail-compose-layout { grid-template-columns: 1fr; } .mail-compose-options { border-top: 1px solid #e2e8ef; border-left: 0; } }
@media (max-width: 1100px) { .app.mail-layout-active .main-shell { padding-left: 220px; } .mail-menu-pane { width: 220px; } .mail-list-head, .mail-row { grid-template-columns: 34px 28px minmax(190px,1fr) minmax(240px,1.3fr) 132px; column-gap: 14px; } .mail-pagination { flex-direction: column; align-items: flex-start; } .mail-pagination-shell { padding-right: 14px; padding-left: 14px; } .mail-settings-grid { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .mail-list-wrap { padding-bottom: 128px; } .mail-list { padding: 0 12px 16px; } .mail-list-head, .mail-row { grid-template-columns: 34px 28px minmax(0,1fr) 110px; column-gap: 10px; } .mail-list-head span:nth-child(3), .mail-row .mail-sender { display: none; } .mail-list-head .mail-subject-col, .mail-row .mail-subject-col { padding-left: 0; border-left: 0; } .mail-row { padding: 8px 14px; } .mail-dialog { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; } .mail-dialog-badge { width: 46px; height: 46px; } .mail-dialog-actions { justify-content: stretch; } .mail-dialog-btn { flex: 1; } .mail-contact-list { grid-template-columns: 1fr; padding: 14px; } .mail-contact-card { grid-template-columns: 40px minmax(0,1fr); } .mail-contact-actions { grid-column: 1 / -1; } .mail-settings-grid, .mail-settings-single, .mail-blacklist-shell { padding: 14px; } .mail-blacklist-form { grid-template-columns: 1fr; } }