.mail-center-page *{box-sizing:border-box}
.mail-center-page{margin:0;padding:10px;background:var(--canvas);height:100dvh;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;color:var(--fg)}
.mail-center-page [hidden]{display:none!important}
.mail-center-page button,.mail-center-page input,.mail-center-page select,.mail-center-page textarea{font:inherit}
.mail-center-page button{cursor:pointer}
.mail-center-page button:disabled{cursor:not-allowed;opacity:.48}
.mail-center-page button:focus-visible,.mail-center-page input:focus-visible,.mail-center-page select:focus-visible,.mail-center-page textarea:focus-visible{outline:2px solid var(--green-ink);outline-offset:3px}
.mail-center-page .mail-heading{height:68px;padding:0 26px;display:flex;align-items:center;gap:12px;flex-shrink:0;background:var(--card);border-radius:var(--workspace-radius) var(--workspace-radius) 0 0;box-shadow:0 0 0 1px var(--line)}
.mail-center-page .mail-heading h1{font-size:21px;letter-spacing:.02em;margin:0;font-weight:650}
.mail-center-page .preview-label{font-size:11px;color:var(--fg3);padding:3px 6px;border:1px solid var(--line);border-radius:var(--r-xs)}
.mail-center-page .btn{height:34px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 14px;border:1px solid var(--line2);font-size:13px;line-height:20px;white-space:nowrap}
.mail-center-page .btn-pri{border-color:transparent}
.mail-center-page #compose{margin-left:auto}
.mail-center-page .mail-body{flex:1;min-height:0;display:flex;background:var(--card);box-shadow:0 0 0 1px var(--line);border-top:0}
.mail-center-page .mail-list-pane{width:var(--mail-list-width,340px);max-width:50%;min-width:260px;flex-shrink:0;display:flex;flex-direction:column;min-height:0}
.mail-center-page .mail-divider{width:5px;flex-shrink:0;cursor:col-resize;background:var(--line);border:2px solid var(--card);touch-action:none}
.mail-center-page .mail-divider:hover,.mail-center-page .mail-divider:focus-visible{background:var(--green-ink);outline:none}
.mail-center-page .mail-tools{display:flex;align-items:center;gap:8px;padding:16px 16px 10px;flex-shrink:0;flex-wrap:wrap}
.mail-center-page .mail-search{width:100%;display:flex;align-items:center;height:34px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--control-bg);padding:0 10px}
.mail-center-page .mail-search input{min-width:0;width:100%;border:0;background:transparent;color:var(--fg);outline:none;height:30px;padding:0;box-shadow:none}
.mail-center-page .mail-search:focus-within{outline:1px solid var(--fg3)}
.mail-center-page .mail-tools select{height:34px;padding:0 10px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--control-bg);color:var(--fg2)}
.mail-center-page .mail-count{color:var(--fg3);white-space:nowrap;font-size:12px}
.mail-center-page .mail-list-meta{display:flex;align-items:center;justify-content:space-between;padding:0 16px 10px;color:var(--fg3);font-size:12px;border-bottom:1px solid var(--line)}
.mail-center-page .mail-scroll{flex:1;min-height:0;overflow:auto}
.mail-center-page .mail-item{width:100%;display:flex;flex-direction:column;gap:7px;text-align:left;padding:14px 16px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--fg2)}
.mail-center-page .mail-item:hover,.mail-center-page .mail-item.is-selected{background:var(--bg-alt)}
.mail-center-page .mail-item.is-selected{box-shadow:inset 2px 0 var(--green-ink)}
.mail-center-page .mail-item-top{display:flex;align-items:center;gap:7px;width:100%;min-width:0}
.mail-center-page .mail-item .subject{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--fg);font-weight:500}
.mail-center-page .mail-item-person{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--fg3);padding-left:14px}
.mail-center-page .mail-item-foot{display:flex;justify-content:space-between;gap:8px;width:100%;font-size:11px;color:var(--fg3);padding-left:14px;flex-wrap:wrap}
.mail-center-page #sort{border:0;padding:0;color:inherit;background:transparent}
.mail-center-page .mail-dot{display:inline-block;width:7px;height:7px;flex-shrink:0;border-radius:50%;background:transparent}
.mail-center-page .is-unread .mail-dot{background:var(--green)}
.mail-center-page .is-unread .subject{font-weight:650}
.mail-center-page .date{color:var(--fg3);font-variant-numeric:tabular-nums}
.mail-center-page .mail-link{border:0;background:transparent;padding:5px 0;color:var(--green-ink);font-size:12px;cursor:pointer;white-space:nowrap}
.mail-center-page .mail-link.dim{color:var(--fg3)}
.mail-center-page .empty{text-align:center;padding:48px 20px;color:var(--fg3);line-height:1.8}
.mail-center-page .empty strong{display:block;color:var(--fg2);font-size:14px;font-weight:500;margin-bottom:8px}
.mail-center-page .mail-reading-pane{flex:1;min-width:0;padding:24px;overflow:auto;background:var(--card)}
.mail-center-page .mail-reading-empty{padding:64px 16px;text-align:center;color:var(--fg3)}
.mail-center-page .mail-reading-pane.is-composing{padding:0;display:flex;flex-direction:column}
.mail-center-page .is-composing .dlg-body{flex:1;min-height:0;padding:20px 24px}
.mail-center-page .is-composing .dlg-head,.mail-center-page .is-composing .dlg-foot{padding-left:24px;padding-right:24px;flex-shrink:0;flex-wrap:wrap}
.mail-center-page .detail-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;color:var(--fg2)}
.mail-center-page .detail-head h2{flex:1 1 240px;margin:0}
.mail-center-page .detail-head .detail-actions{margin-left:auto}
.mail-center-page .mail-compose-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:16px 24px;border-bottom:1px solid var(--line);flex-shrink:0}
.mail-center-page .mail-compose-subject{flex:1 1 220px;min-width:0}
.mail-center-page .mail-compose-subject input{width:100%;font-size:18px;font-weight:600}
.mail-center-page .mail-compose-actions{display:flex;gap:8px;align-items:center;margin-left:auto}
.mail-center-page .mail-compose-subject .visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
.main-scroll.mail-center-page .mail-compose-subject input{height:34px;border-color:transparent;background:transparent;padding:0;box-shadow:none}
.main-scroll.mail-center-page .mail-compose-subject input:focus{border-bottom-color:var(--green-ink);border-radius:0}
.main-scroll.mail-center-page .is-composing .dlg-field{display:grid;grid-template-columns:68px minmax(0,1fr);align-items:start;gap:8px}
.main-scroll.mail-center-page .is-composing .dlg-field>span:first-child{line-height:34px}
.main-scroll.mail-center-page .is-composing .dlg-field .att-actions{grid-column:2}
.main-scroll.mail-center-page .dlg-field input,.main-scroll.mail-center-page .dlg-field select{height:34px}
.mail-center-page .detail-close{border:0;background:transparent;width:28px;height:28px;font-size:21px;color:var(--fg3);cursor:pointer}
.mail-center-page .mail-reading-pane h2{font-size:18px;overflow-wrap:anywhere;line-height:1.6;margin:0 0 12px}
.mail-center-page .mail-reading-pane dl{margin:0 0 16px;display:grid;grid-template-columns:58px 1fr;gap:12px;font-size:12px;line-height:1.7}
.mail-center-page .mail-reading-pane dt{color:var(--fg3)}
.mail-center-page .mail-reading-pane dd{margin:0;overflow-wrap:anywhere;color:var(--fg2)}
.mail-center-page .att-block{border-top:1px solid var(--line);padding:12px 0}
.mail-center-page .att-title{color:var(--fg3);font-size:12px;margin-bottom:6px}
.mail-center-page .att-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg-alt);border-radius:var(--r-sm);margin-bottom:6px;font-size:12px}
.mail-center-page .att-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg)}
.mail-center-page .att-meta{color:var(--fg3);font-size:11px;white-space:nowrap}
.mail-center-page .mail-body-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.9;font-family:inherit;background:var(--bg-alt);padding:14px;margin:0 0 16px;border-radius:var(--r);max-height:300px;overflow:auto}
.mail-center-page .detail-actions{display:flex;gap:8px;flex-wrap:wrap}
.mail-center-page .preview-footer{border-top:1px solid var(--line);padding:11px 26px;color:var(--fg3);font-size:11px;line-height:1.6;flex-shrink:0;display:flex;align-items:center;gap:7px;background:var(--card);box-shadow:0 0 0 1px var(--line);border-top:0}
.mail-center-page .preview-dot{width:5px;height:5px;border-radius:50%;background:var(--amber);flex-shrink:0}
.mail-center-page #notice{position:fixed;bottom:52px;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--line2);border-radius:var(--r);box-shadow:0 4px 20px var(--line);padding:12px 20px;max-width:90%;z-index:5;color:var(--fg2)}

/* 附件选择 / 设置 / 归档 / 发送确认；撰写不使用弹层。 */
.mail-center-page .mail-overlay{position:absolute;inset:0;background:rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;z-index:8;padding:20px}
.mail-center-page .mail-dialog{background:var(--card);border-radius:var(--r);box-shadow:0 12px 40px rgba(0,0,0,.18);width:560px;max-width:100%;max-height:100%;display:flex;flex-direction:column}
.mail-center-page .dlg-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);color:var(--fg);font-weight:600}
.mail-center-page .dlg-body{padding:16px 18px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.mail-center-page .dlg-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--line)}
.mail-center-page .dlg-field{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--fg3)}
.mail-center-page .dlg-field input,.mail-center-page .dlg-field select,.mail-center-page .dlg-field textarea{height:34px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--control-bg);color:var(--fg);padding:0 10px}
.mail-center-page .dlg-field textarea{height:auto;padding:8px 10px;resize:vertical;line-height:1.7;font-size:12px}
.mail-center-page .dlg-error{color:var(--red,#c0392b);font-size:12px;line-height:1.6}
.mail-center-page .candidate-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}
.mail-center-page .candidate-chip{background:var(--bg-alt);border:1px dashed var(--green-ink);color:var(--fg2);border-radius:var(--r-sm);padding:5px 10px}
.mail-center-page .candidate-row.adopted .candidate-chip{border-style:solid;color:var(--green-ink)}
.mail-center-page .candidate-note{color:var(--fg3);font-size:11px}
.mail-center-page .att-actions{display:flex;align-items:center;gap:10px}
.mail-center-page .att-required{color:var(--fg3);font-size:11px}
.mail-center-page .att-required b{color:var(--green-ink)}
.mail-center-page .att-empty{color:var(--fg3);font-size:11px;background:var(--bg-alt);border-radius:var(--r-sm);padding:8px 10px}
.mail-center-page .picker-note{color:var(--fg3);font-size:12px;line-height:1.7;background:var(--bg-alt);border-radius:var(--r-sm);padding:8px 10px}
.mail-center-page .pick-file{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px}
.mail-center-page .pick-name{font-size:13px;color:var(--fg);margin-bottom:6px}
.mail-center-page .pick-version{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--fg2);padding:3px 0}
.mail-center-page .pick-version input{accent-color:var(--green-ink)}
.mail-center-page .send-list{display:grid;grid-template-columns:58px 1fr;gap:10px;font-size:12px;line-height:1.7}
.mail-center-page .send-list dt{color:var(--fg3)}
.mail-center-page .send-list dd{margin:0;overflow-wrap:anywhere;color:var(--fg2)}
.mail-center-page .send-missing{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--fg2);background:var(--bg-alt);border-radius:var(--r-sm);padding:8px 10px}
.mail-center-page .send-missing input{accent-color:var(--green-ink)}
.mail-center-page .send-warn{color:var(--fg3);font-size:11px;line-height:1.6;border:1px dashed var(--line2);border-radius:var(--r-sm);padding:8px 10px}
.mail-center-page .accounts-table{width:100%;border-collapse:collapse;font-size:12px}
.mail-center-page .accounts-table th{text-align:left;color:var(--fg3);font-weight:400;padding:6px 8px;border-bottom:1px solid var(--line)}
.mail-center-page .accounts-table td{padding:8px;border-bottom:1px solid var(--line);color:var(--fg2);overflow-wrap:anywhere}
.mail-center-page .accounts-table .masked{color:var(--fg3)}
/* —— 对齐旧版设计：投递状态徽标 / 地址 chips / 未保存与重发说明 —— */
.mail-center-page .state-chip{display:inline-block;margin-top:5px;padding:2px 7px;border-radius:var(--r-xs);font-size:11px;background:var(--bg-alt);color:var(--fg3);white-space:nowrap}
.mail-center-page .state-chip.state-accepted{color:var(--green-ink)}
.mail-center-page .state-chip.state-partially_accepted{color:var(--amber)}
.mail-center-page .state-chip.state-bounced,.mail-center-page .state-chip.state-send_failed{color:var(--red,#c0392b)}
.mail-center-page .state-chip.state-send_unknown{color:var(--fg2);border:1px dashed var(--line2)}
.mail-center-page .addr-chips{display:flex;flex-wrap:wrap;gap:6px}
.mail-center-page .addr-chip{display:inline-flex;align-items:center;min-width:0;max-width:100%;padding:3px 8px;border:1px solid var(--line);border-radius:6px;background:var(--bg-alt);color:var(--fg);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-center-page .dirty-note{margin-right:auto;color:var(--amber);font-size:12px;align-self:center}
.mail-center-page .mail-field-status{grid-column:2;font-size:11px;color:var(--fg3);overflow-wrap:anywhere}
.mail-center-page .mail-field-status:empty{display:none}
.mail-center-page .mail-field-status.is-error{color:var(--red,#c0392b)}
.mail-center-page .mail-connection-note{padding:10px 24px;font-size:12px;color:var(--fg3);border-bottom:1px solid var(--line)}
.mail-center-page .mail-compose-subject input[readonly]{cursor:text}
.mail-center-page .resend-note{margin:10px 0 0;color:var(--fg3);font-size:12px;line-height:1.7;border-top:1px dashed var(--line);padding-top:10px}
.mail-center-page .send-body-view{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px}
.mail-center-page .send-body-view .mail-body-text{margin:6px 0 0;max-height:200px}

.main-scroll.mail-center-page{height:100%;min-height:0;padding:0;overflow:hidden;display:flex;flex-direction:column;position:relative;background:var(--card)}
.main-scroll.mail-center-page .mail-heading{height:auto;min-height:68px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.main-scroll.mail-center-page #notice{position:absolute}
.main-scroll.mail-center-page .mail-body{flex:1;min-height:0}
.main-scroll.mail-center-page .preview-footer{position:relative}
.mail-center-page .mail-pagination{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--fg3)}
.mail-center-page .mail-pagination[hidden]{display:none}
.mail-center-page .mail-pagination .btn{height:32px;padding:0 10px;font-size:12px}
.mail-settings-page .mail-heading #mail-account-back{margin-left:auto}
.mail-settings-page .mail-settings-content{padding:24px 26px;overflow:auto;flex:1;min-height:0}
.mail-settings-page #mail-account-form{display:grid;grid-template-columns:repeat(2,minmax(0,280px));gap:16px 20px;max-width:580px}
.mail-settings-page #mail-account-form .dlg-field{margin:0}
.mail-settings-page .mail-settings-summary{font-size:14px;margin:0 0 22px;color:var(--fg2)}
.mail-settings-page .mail-settings-help{grid-column:1/-1;color:var(--fg3);font-size:12px;line-height:1.7;max-width:580px;margin:0}
.mail-settings-page .mail-settings-actions{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.mail-settings-page .mail-settings-lifecycle{margin:24px 0 14px;padding-top:20px;border-top:1px solid var(--line);max-width:580px}
.mail-settings-page .mail-settings-result{font-size:13px;color:var(--green-ink);max-width:580px;line-height:1.7}
.mail-settings-page .mail-settings-result.is-error{color:var(--red)}

@media(max-width:700px){
.mail-settings-page #mail-account-form{grid-template-columns:minmax(0,1fr)}
.mail-settings-page .mail-settings-content{padding:20px 16px}
.mail-center-page{padding:0}
.mail-center-page .mail-heading{padding:0 16px;height:60px}
.mail-center-page .mail-heading h1{font-size:18px}
.mail-center-page .mail-tools{padding:12px 16px 8px}
.mail-center-page .mail-search{width:100%}
.mail-center-page .mail-list-pane{width:100%;max-width:100%;min-width:0}
.mail-center-page .mail-reading-pane,.mail-center-page .mail-divider{display:none}
.mail-center-page.mail-has-selection .mail-list-pane{display:none}
.mail-center-page.mail-has-selection .mail-reading-pane{display:block;padding:16px}
.mail-center-page.mail-has-selection .mail-reading-pane.is-composing{display:flex;padding:0}
.mail-center-page .mail-dialog{width:100%}
}
