.history-page [hidden] { display: none !important; }
.attempt-toolbar { flex-wrap: wrap; }
.record-navigation, .mail-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mail-actions { margin-left: auto; }
.history-page a.button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--ink); box-sizing: border-box; }
.history-page .record-link:not([href]) { color: #8a929a; background: #f8f9fa; cursor: default; }
.history-page .detail-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-height: 36px; padding: 0; flex-shrink: 0; border-color: transparent; background: transparent; color: #7b838c; font-size: 26px; font-weight: 400; line-height: 1; }
.history-page .detail-close:hover { background: #f0f2f4; border-color: #e8ebed; color: var(--ink); }
.record-navigation:has(> [hidden]) { display: none; }
@media(max-width: 600px) {
  .record-navigation { width: 100%; align-items: stretch; flex-direction: column; gap: 8px; }
  .mail-actions { margin-left: 0; width: 100%; gap: 8px; }
  .mail-actions .button { flex: 1 1 auto; }
}
.history-panel { background: white; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.filter-bar { display: flex; align-items: center; gap: 10px; padding: 20px 22px; }
.history-page input, .history-page select { font: inherit; font-size: 12px; height: 38px; border: 1px solid #dce0e4; border-radius: 6px; background: white; padding: 0 12px; color: var(--ink); min-width: 0; max-width: 100%; }
#search { width: 360px; margin-right: auto; }
#status { min-width: 135px; }
.table-scroll { overflow-x: auto; }
.history-page table { width: 100%; border-collapse: collapse; font-size: 12px; }
.history-page th { background: #f8f9fa; color: #7b838c; font-size: 11px; font-weight: 500; text-align: left; padding: 13px 18px; border-top: 1px solid #e9ecef; white-space: nowrap; }
.history-page td { padding: 20px 18px; border-bottom: 1px solid #edf0f2; vertical-align: middle; max-width: 260px; overflow-wrap: anywhere; }
.history-page tbody tr:last-child td { border-bottom: 0; }
.history-page tbody tr:hover { background: #fcfdf9; }
.history-page small { display: block; color: #8a929a; font-size: 11px; line-height: 1.6; margin-top: 5px; }
.report-name { font-weight: 600; font-size: 13px; }
.format-badge { display: inline-block; border: 1px solid #dce2e7; border-radius: 6px; padding: 5px 10px; font-size: 13px; font-weight: 500; line-height: 1.4; color: #53616f; background: #fafbfc; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 5px; color: #747d87; background: #f0f2f4; font-size: 11px; white-space: nowrap; }
.status-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-accepted { color: #51752b; background: #eff6e6; }
.status-pending, .status-submitting { color: #526f98; background: #eef3fa; }
.status-partial, .status-unknown { color: #95701c; background: #fff7df; }
.status-failed, .status-rejected { color: #b0534e; background: #fdf0ee; }
.history-page .detail-link { min-height: 30px; border: 0; background: transparent; color: #617c2c; padding: 0; }
.time-cell { white-space: nowrap; font-size: 11px; }
.recipient-cell { line-height: 1.6; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid #e9ecef; padding: 16px 22px; color: #8a929a; font-size: 11px; }
#resend-error:empty, #detail-error:empty, #error:empty, #empty:empty, #reason:empty, #duplicates:empty { display: none; }
#resend-error, #detail-error { color: #b42318; background: #fff1f0; padding: 12px; border-radius: 6px; font-size: 12px; }
#error { margin: 0 22px 16px; color: #b42318; background: #fff1f0; padding: 12px; border-radius: 6px; }
#empty { padding: 50px 20px; text-align: center; color: #8a929a; font-size: 13px; }
#detail { margin-top: 28px; scroll-margin-top: 20px; }
#title { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
#detail .eyebrow { font-size: 9px; margin-bottom: 5px; }
#reason { color: #7c858e; font-size: 12px; overflow-wrap: anywhere; }
.attempt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.attempt-toolbar label { font-size: 12px; color: #7b838c; }
#attempts { margin-left: 10px; }
.mail-envelope { white-space: pre-wrap; overflow-wrap: anywhere; padding: 18px 20px; background: #f8f9fa; border: 1px solid #e8ebed; border-radius: 8px; font-size: 12px; line-height: 2; }
.history-page iframe { width: 100%; min-height: 360px; border: 1px solid #e5e8eb; border-radius: 8px; background: white; margin: 18px 0; }
.detail-section { margin-top: 24px; }
#detail .detail-section > h3 { margin: 0 0 10px; }
#detail #body { display: block; margin: 0; box-sizing: border-box; }
.history-page h3 { margin: 0 0 12px; font-size: 13px; font-weight: 600; }
#files, #preview-files { display: flex; flex-wrap: wrap; gap: 8px; }
#files a, #preview-files a { display: block; padding: 11px 14px; border: 1px solid #e2e6e9; border-radius: 6px; font-size: 12px; color: #617c2c; text-decoration: none; overflow-wrap: anywhere; max-width: 100%; }
#files a:hover, #preview-files a:hover { background: #f5f8ee; }
#results p { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #edf0f2; padding: 10px 0; margin: 0; font-size: 12px; overflow-wrap: anywhere; }
#results .attempt-meta { display: block; color: #8a929a; font-size: 11px; line-height: 1.8; border: 0; }
#editor { margin-top: 24px; padding: 22px; border: 1px solid #dfe6d4; border-radius: 8px; background: #fafcf7; }
.editor-hint { font-size: 12px; color: #7b838c; }
.resend-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.resend-fields label { font-size: 12px; color: #606971; }
.resend-fields input { display: block; width: 100%; margin-top: 8px; }
.editor-actions { display: flex; gap: 10px; margin-top: 16px; }
#preview-panel { border-top: 1px solid #e0e7d5; padding-top: 22px; margin-top: 22px; }
#duplicates { color: #956023; background: #fff5df; border: 1px solid #efdfb9; border-radius: 6px; padding: 13px; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
@media(max-width: 1100px) { .history-page table { min-width: 850px; } }
@media(max-width: 600px) { .filter-bar { flex-wrap: wrap; padding: 16px; } #search { width: 100%; } #status { flex: 1; } .pagination { padding: 14px 16px; } .attempt-toolbar { align-items: stretch; flex-direction: column; } #attempts { display: block; margin: 8px 0 0; width: 100%; } .resend-fields { grid-template-columns: 1fr; } #editor { padding: 16px; } }
.history-page #detail { width: min(1120px, calc(100vw - 40px)); max-height: calc(100vh - 48px); padding: 0; margin: auto; color: var(--ink); border: 1px solid #e1e5e8; box-shadow: 0 24px 80px #1113; overflow: auto; }
#detail::backdrop { background: #18202766; }
.history-page #detail > .rule-header { position: sticky; top: 0; z-index: 2; background: white; padding: 20px 24px; }
.history-page #detail > .rule-body { padding: 22px 24px; }
.history-page #detail .mail-envelope { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; white-space: normal; font-size: 14px; }
.envelope-field { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 12px; align-items: start; }
.envelope-field > span { color: #7b838c; }
.envelope-field > strong { font-weight: 550; overflow-wrap: anywhere; }
#mail-subject { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; margin: 0; }
.history-page #detail table { min-width: 640px; }
#attempt-rows td { padding: 13px 14px; font-size: 11px; }
#attempt-rows tr.selected-attempt { background: #f5f8ee; }
#detail .detail-section > .table-scroll { border: 1px solid #e8ebed; border-radius: 8px; }
body:has(dialog[open]) { overflow: hidden; }
@media(max-width: 600px) { .history-page #detail { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); } .history-page #detail .mail-envelope { grid-template-columns: 1fr; padding: 14px; } .history-page #detail > .rule-body { padding: 16px; } }

.history-page #editor { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 0; margin: auto; border: 1px solid #dfe4e8; border-radius: 12px; background: white; color: var(--ink); box-shadow: 0 24px 80px #1114; overflow: auto; }
#editor::backdrop { background: #18202780; }
.resend-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; background: white; border-bottom: 1px solid var(--line); }
#resend-title { margin: 0; font-size: 18px; }
.resend-content { padding: 24px; }
#editor .editor-hint { margin-top: 0; line-height: 1.7; }
#editor #preview-panel { border: 0; margin: 0; padding: 0; }
#editor .editor-actions { justify-content: flex-end; position: sticky; bottom: -24px; background: white; padding: 16px 0; border-top: 1px solid var(--line); }
#resend-error { margin: 0 0 18px; outline: none; }
#editor [hidden] { display: none; }
@media(max-width:600px) { .resend-content { padding: 16px; } .resend-header { padding: 16px; } }