.email-card{overflow:hidden}
.email-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;padding:22px 24px 20px;border-bottom:1px solid var(--line)}
.email-heading{display:flex;align-items:center;gap:13px;min-width:0}
.email-heading>div{min-width:0}
.email-heading h2{font-size:18px;line-height:1.45}
.email-heading p{margin-top:4px;font-size:12px;color:var(--muted)}
.email-symbol{display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;border:1px solid #d9ebed;border-radius:12px;background:#eef8f8;color:var(--teal)}
.email-symbol .icon{width:21px;height:21px}
.email-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.email-actions .button{min-height:38px}
.email-body{padding:20px 24px 18px}
.email-status-strip{display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px;margin-bottom:16px}
.email-status-strip>div{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.email-status-strip .badge{font-size:11px}
.email-addresses{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(145px,.65fr);gap:0;margin:0;padding:15px 0;border:1px solid #dfedef;border-radius:12px;background:#f3f9fa}
.email-addresses>div{min-width:0;padding:0 20px;border-left:1px solid #dfedef}
.email-addresses>div:first-child{border-left:0}
.email-addresses dt{font-size:11px;color:var(--muted);margin-bottom:5px}
.email-addresses dd{margin:0;color:var(--ink-strong);font-size:14px;font-weight:600;line-height:1.6;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.email-unit{font-size:12px;color:var(--muted);font-weight:400}
.email-alert{margin-top:15px;overflow-wrap:anywhere}
.email-alert .notice,.email-load-error .notice{margin:0}
.email-history{margin-top:22px;min-width:0}
.email-history-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px 14px;margin-bottom:11px}
.email-history-heading h3{font-size:14px}
.email-history-heading>span{font-size:11px;color:var(--muted)}
.email-table-wrap{max-width:100%;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.email-table{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left;font-size:12px}
.email-table th{padding:10px 14px;background:#f5f9fa;color:var(--muted);font-size:11px;font-weight:400;line-height:1.5}
.email-table th:nth-child(1){width:24%}
.email-table th:nth-child(2){width:16%}
.email-table th:nth-child(3){width:25%}
.email-table th:nth-child(4){width:35%}
.email-table td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top;line-height:1.8;overflow-wrap:anywhere}
.email-table .badge{font-size:10px}
.email-kind{font-weight:550;color:var(--ink-strong)}
.email-time{font-variant-numeric:tabular-nums;color:#647f8b}
.email-error{display:block;margin-top:5px;color:#bb5f6c;font-size:11px;line-height:1.6;overflow-wrap:anywhere;white-space:normal}
.email-delivery-note{margin-top:10px;font-size:11px;color:var(--muted);line-height:1.7;overflow-wrap:anywhere}
.email-notes{display:grid;gap:7px;margin-top:18px;padding-top:15px;border-top:1px solid var(--line);font-size:11px;line-height:1.8;color:var(--muted)}
.email-notes p{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px}
.email-notes strong{font-weight:500;color:#647f8b}
.email-notes span{overflow-wrap:anywhere}
.email-loading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:145px;border:1px dashed #d9e9ec;border-radius:12px;background:#f6fafb;color:var(--muted);font-size:12px}
.email-load-error{padding:18px 0}
.email-empty{display:flex;align-items:center;justify-content:center;gap:13px;padding:26px 18px;border:1px dashed #d9e9ec;border-radius:10px;background:#f8fbfc}
.email-empty-symbol{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;border-radius:10px;background:#eaf4f5;color:#79a5ae}
.email-empty strong{display:block;font-size:12px;font-weight:550;color:#647f8b}
.email-empty p{margin-top:3px;font-size:11px;color:var(--muted);overflow-wrap:anywhere}
@media(max-width:900px){
  .email-header{padding:18px 20px;gap:16px}
  .email-body{padding:18px 20px}
  .email-addresses>div{padding:0 14px}
}
@media(max-width:680px){
  .email-header{padding:17px 16px;align-items:flex-start}
  .email-heading{gap:10px}
  .email-heading h2{font-size:16px}
  .email-heading p{font-size:11px}
  .email-symbol{width:36px;height:36px;border-radius:10px}
  .email-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .email-actions .button{padding:9px 6px;gap:6px;font-size:11px;white-space:normal}
  .email-body{padding:16px}
  .email-status-strip{gap:10px 18px}
  .email-status-strip>div{gap:7px}
  .email-addresses{grid-template-columns:minmax(0,1fr);padding:3px 14px}
  .email-addresses>div{display:grid;grid-template-columns:102px minmax(0,1fr);gap:10px;align-items:baseline;padding:11px 0;border-left:0;border-top:1px solid #dfedef}
  .email-addresses>div:first-child{border-top:0}
  .email-addresses dt{margin:0}
  .email-addresses dd{font-size:12px}
  .email-table,.email-table tbody{display:block;width:100%}
  .email-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .email-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 14px;padding:13px;border-top:1px solid var(--line)}
  .email-table tr:first-child{border-top:0}
  .email-table td{display:block;min-width:0;padding:0;border:0;font-size:11px}
  .email-table td:before{content:attr(data-label);display:block;margin-bottom:4px;color:var(--muted);font-size:10px;font-weight:400}
  .email-history{margin-top:20px}
  .email-empty{justify-content:flex-start;padding:20px 14px}
  .email-notes p{grid-template-columns:minmax(0,1fr);gap:2px}
}