body { font-family: sans-serif; margin: 20px; }
table { border-collapse: collapse; margin-bottom: 20px; }
td { padding: 4px 8px; border: 1px solid #ccc; }
pre { background: #f9f9f9; padding: 10px; white-space: pre-wrap; }
.email-html img { max-width: 100%; }
button { margin-left: 5px; }

.domains { margin: 0 0 16px; display: flex; gap: 16px; }

.compose { max-width: 850px; }
.compose label { display: block; margin: 16px 0; }
.compose input, .compose textarea { display: block; box-sizing: border-box; width: 100%; padding: 10px; margin-top: 6px; font: inherit; }
.compose button { padding: 10px 20px; margin: 0; }
.error { color: #a31515; }
.success { color: #176837; }

/* Mail composer */
.composer-page { margin:0; background:#f3f5f9; color:#24324a; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.mail-shell { max-width:1080px; margin:36px auto 60px; padding:0 24px; }
.composer-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.back-link { color:#67738b; text-decoration:none; font-size:14px; }
.composer-heading h1 { display:flex; gap:16px; align-items:center; font-size:30px; margin:14px 0 0; letter-spacing:-.8px; }
.domain-badge { font-size:12px; font-weight:600; letter-spacing:0; border:1px solid #d8deed; color:#67738b; border-radius:20px; padding:6px 12px; }
.heading-note { font-size:13px; color:#929bad; }
.heading-actions { display:flex; gap:10px; align-items:center; }
.heading-actions .subtle-button { background:none; border:1px solid #d8deed; color:#67738b; padding:11px 14px; border-radius:9px; font-size:13px; cursor:pointer; }
.login-card { max-width:380px; margin:10vh auto 0; background:white; border:1px solid #e1e5ee; border-radius:18px; padding:28px; box-shadow:0 8px 32px #26345208; }
.login-card h1 { font-size:24px; margin:0 0 20px; }
.login-card label { display:block; font-size:13px; color:#67738b; margin-bottom:14px; }
.login-card input { display:block; width:100%; box-sizing:border-box; margin-top:6px; padding:11px 12px; border:1px solid #d8deed; border-radius:9px; font-size:15px; }
.login-card button { width:100%; border:0; cursor:pointer; margin-top:6px; }
.compose.compose-card { max-width:none; background:white; border:1px solid #e1e5ee; border-radius:18px; box-shadow:0 8px 32px #26345208; overflow:hidden; }
.compose-card .envelope-fields { padding:8px 28px; }
.compose-card .field-row { display:flex; align-items:center; gap:18px; margin:0; border-bottom:1px solid #edf0f5; min-height:56px; }
.field-row>span { flex:0 0 78px; color:#8891a3; font-size:14px; }
.compose-card .field-row input { flex:1; min-width:0; border:0; background:none; padding:16px 0; margin:0; outline:none; font-size:14px; color:#24324a; }
.compose-card .subject-row { border-bottom:0; }
.compose-card .subject-row input { font-weight:600; font-size:16px; }
.compose-card button { font:inherit; cursor:pointer; border:0; background:transparent; margin:0; }
.compose-card .subtle-button { color:#596cc6; font-size:12px; padding:6px 9px; border-radius:6px; background:#f2f4fc; }
.editor-topline { border-top:1px solid #edf0f5; display:flex; justify-content:space-between; align-items:center; padding:0 28px; background:#fcfcfe; }
.editor-tabs { display:flex; gap:20px; }
.compose-card .editor-tabs button { padding:16px 0 13px; border-bottom:3px solid transparent; font-size:13px; color:#8a93a4; }
.compose-card .editor-tabs button[aria-selected=true] { border-bottom-color:#5b65d8; color:#424dba; font-weight:600; }
.editor-caption { color:#929bad; font-size:11px; }
.format-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:4px; padding:10px 24px; border-bottom:1px solid #edf0f5; }
.compose-card .format-toolbar button { width:30px; height:30px; padding:0; color:#667187; border-radius:6px; font-size:15px; }
.compose-card .format-toolbar button:hover,.compose-card .format-toolbar button.active { background:#eff0fb; color:#4b55bd; }
.format-toolbar select { border:0; background:transparent; color:#667187; font-size:12px; max-width:160px; }
.tool-divider { height:18px; width:1px; background:#e5e9f1; margin:0 8px; }
.compose-card .color-tool { position:relative; width:30px; height:30px; text-align:center; line-height:27px; margin:0; font-weight:bold; border-bottom:3px solid #6970de; }
.compose-card .color-tool input { opacity:0; position:absolute; inset:0; width:100%; height:100%; padding:0; margin:0; cursor:pointer; }
.editor-panel { min-height:360px; }
#rich-editor { min-height:360px; padding:28px; box-sizing:border-box; outline:none; font-size:15px; line-height:1.7; overflow-wrap:anywhere; }
#rich-editor:empty:before { content:attr(data-placeholder); color:#b0b7c5; pointer-events:none; }
#rich-editor p { margin:0 0 14px; } #rich-editor h1,#rich-editor h2,#rich-editor h3 { line-height:1.3; }
#rich-editor blockquote { margin:18px 0; padding:4px 20px; border-left:3px solid #c9cfe8; color:#748096; }
#rich-editor img { max-width:100%; }
.compose-card .editor-panel textarea { width:100%; min-height:360px; border:0; padding:28px; margin:0; outline:none; resize:vertical; line-height:1.6; box-sizing:border-box; }
#html-source { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:13px; color:#5360a3; background:#fafbfe; }
.preview-panel { background:#eef1f6; padding:20px; }
#mail-preview { width:100%; min-height:360px; border:0; background:white; border-radius:8px; }
.editor-footnote { display:flex; justify-content:space-between; padding:10px 28px; font-size:11px; color:#97a0af; border-top:1px solid #f0f2f6; }
.advanced-fields { border-top:1px solid #edf0f5; padding:18px 28px; }
.advanced-fields summary { font-size:13px; color:#6f7b8e; cursor:pointer; }
.advanced-fields summary span { color:#a1a9b8; font-size:11px; margin-left:12px; }
.advanced-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding-top:16px; }
.compose-card .advanced-grid label { margin:0; font-size:12px; color:#7a8596; }
.compose-card .advanced-grid input { border:1px solid #e1e5ee; border-radius:7px; margin-top:6px; padding:9px; font-size:12px; }
.compose-footer { display:flex; align-items:center; gap:22px; padding:20px 28px; background:#fafbfe; border-top:1px solid #edf0f5; }
.compose-card .primary-button { background:#5b62d6; color:white; border-radius:9px; padding:12px 20px; font-size:14px; font-weight:600; box-shadow:0 3px 8px #5b62d625; }
.primary-button span { margin-left:14px; } .compose-card .primary-button:hover { background:#4c54c4; } .compose-card .primary-button:disabled { opacity:.5; cursor:default; }
.cancel-link { font-size:13px; color:#8490a3; text-decoration:none; }.footer-note { margin-left:auto; font-size:11px; color:#98a0af; }
.notice { background:#fff; border:1px solid #e1e5ee; border-radius:10px; padding:16px 20px; margin-bottom:20px; font-size:14px; }.notice small { display:block; margin-top:6px; color:#8793a3; }.notice.success { border-color:#cce7d9; background:#f3fbf7; }.notice.error { border-color:#f2d1d1; background:#fff6f6; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
[hidden] { display:none!important; }
button:focus-visible,a:focus-visible,select:focus-visible { outline:2px solid #6970de; outline-offset:3px; }
@media(max-width:700px) { .mail-shell { margin:20px auto; padding:0 12px; }.heading-note,.editor-caption,.advanced-fields summary span { display:none; }.composer-heading h1 { font-size:24px; gap:8px; flex-wrap:wrap; }.compose-card .envelope-fields { padding:8px 16px; }.editor-topline { padding:0 16px; }.editor-tabs { gap:14px; }.compose-card .editor-tabs button { font-size:12px; }.format-toolbar { padding:10px 12px; }.tool-divider { margin:0 4px; }#rich-editor,.compose-card .editor-panel textarea { padding:20px; }.advanced-fields,.compose-footer { padding:18px 16px; }.advanced-grid { grid-template-columns:1fr; }.field-row>span { flex-basis:58px; font-size:12px; }.editor-footnote { padding:10px 16px; } }
.write-button { background:#5b62d6; padding:12px 18px; border-radius:9px; color:white; text-decoration:none; font-size:13px; }
.mailbox-card { background:#fff; border:1px solid #e1e5ee; border-radius:16px; overflow:hidden; }
.folder-tabs { display:flex; gap:26px; padding:0 24px; border-bottom:1px solid #edf0f5; }.folder-tabs a { text-decoration:none; padding:18px 0 14px; color:#8a93a4; border-bottom:3px solid transparent; font-size:14px; }.folder-tabs .selected { color:#505bc4; border-color:#5b65d8; font-weight:600; }
.folder-note { color:#929bad; font-size:12px; padding:8px 24px; }
.message-row { display:flex; align-items:center; gap:16px; padding:18px 24px; border-top:1px solid #f0f2f6; }.message-row:hover { background:#fcfcff; }.message-link { flex:1; min-width:0; text-decoration:none; color:#24324a; }.message-title { font-size:15px; font-weight:600; }.message-address { margin:6px 0; color:#8390a2; font-size:13px; overflow-wrap:anywhere; }.message-link small { font-size:11px; color:#a0a8b6; }.message-state { font-size:11px; color:#707bbe; background:#f1f3fd; border-radius:20px; padding:6px 10px; }.delete-button { background:none; border:0; cursor:pointer; color:#a6afbf; font-size:14px; padding:8px; }.delete-button:hover { color:#b25656; }
.mailbox-empty { text-align:center; color:#98a2b4; padding:70px 20px; }.mailbox-empty span { font-size:36px; color:#c5cce0; }.message-detail { padding:24px; }.mail-headers { font-size:13px; color:#8390a2; margin-bottom:24px; }.mail-headers table { margin-top:16px; max-width:100%; overflow-wrap:anywhere; font-size:12px; }.email-html { line-height:1.7; overflow-wrap:anywhere; }.plain-copy { margin:24px 0; font-size:13px; color:#8390a2; }.domains a { color:#8a93a4; text-decoration:none; font-size:13px; }.domains strong { color:#5963be; font-size:13px; }
@media(max-width:700px){.message-row{padding:14px;gap:8px;flex-wrap:wrap}.message-state{font-size:10px}.write-button{padding:10px 12px;font-size:12px}.composer-heading{gap:12px}.message-detail{padding:16px}.domains{flex-wrap:wrap}}

.dmarc-panel{padding:24px}.dmarc-filter{display:flex;flex-wrap:wrap;align-items:end;gap:16px}.dmarc-filter label{display:grid;gap:6px}.dmarc-filter input{padding:9px;border:1px solid #ddd;border-radius:8px}.dmarc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:12px;margin:24px 0}.dmarc-stats div{padding:18px;background:#f6f5fc;border-radius:12px;color:#656276}.dmarc-stats strong{display:block;font-size:26px;color:#34314a;margin-bottom:6px}.dmarc-table-wrap{overflow:auto}.dmarc-table{width:100%;border-collapse:collapse;font-size:14px}.dmarc-table td,.dmarc-table th{text-align:left;padding:12px;border-bottom:1px solid #e9e7ef;vertical-align:top}.dmarc-warning{padding:14px;border-radius:10px;background:#fff1da;color:#795519}.dmarc-report{padding:15px 0;border-bottom:1px solid #e9e7ef}.dmarc-report summary{cursor:pointer;font-weight:600}.dmarc-panel h2{font-size:20px;margin-top:30px}.dmarc-panel p{overflow-wrap:anywhere}@media(max-width:600px){.dmarc-panel{padding:16px}.dmarc-stats{grid-template-columns:repeat(2,1fr)}}

.message-page .mail-shell { max-width:none; }
.email-frame { width:100%; overflow-x:auto; overflow-y:hidden; background:white; }
iframe.email-html { display:block; width:100%; height:1px; border:0; background:white; }

.dkim-diagnosis { margin:16px 0; padding:18px; border:1px solid #eadfc9; border-radius:12px; background:#fffcf5; overflow-wrap:anywhere; }
.dkim-diagnosis h3 { margin-top:0; font-size:16px; }
.message-state.ok { color:#2f7d4f; background:#eef8f1; }.message-state.warn { color:#9a6a12; background:#fff6e5; }.message-state.bad { color:#b25656; background:#fff1f1; }.notice ul.failures { margin:8px 0 0; padding-left:18px; }.notice ul.failures code { font-size:12px; }.notice form.inline { display:inline; margin-left:12px; }.notice form.inline button { font-size:12px; padding:4px 10px; border:1px solid #c9d0de; border-radius:6px; background:#fff; cursor:pointer; }
/* Keep the scrollbar gutter so a growing message cannot toggle the page scrollbar and re-trigger frame sizing. */
html.message-root { scrollbar-gutter:stable; }
.signature-toggle{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#5b6475;cursor:pointer}.signature-toggle input{margin:0}