.coe-dialog { width: min(1080px,calc(100vw - 32px)); max-height: 92vh; margin: auto; padding: 0; border: 1px solid var(--border); border-radius: 14px; color: var(--text); background: #fff; }
.coe-dialog::backdrop { background: rgba(15,23,42,.45); }
.coe-editor-heading { padding: 20px 24px 16px; display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; }
.coe-editor-heading h2 { margin: 4px 0 6px; font-size: 22px; }
.coe-editor-heading p { margin: 0; color: var(--text-secondary); font-size: 13px; }
.coe-editor-tabs { padding: 0 24px; display: flex; gap: 16px; border-bottom: 1px solid var(--border); }
.coe-editor-tabs button { padding: 12px 2px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--text-secondary); font-weight: 600; font-size: 13px; }
.coe-editor-tabs button[aria-selected=true] { color: var(--primary); border-bottom-color: var(--primary); }
.coe-dialog > section { padding: 16px 24px 24px; }
.coe-record-note { margin: 0 0 18px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.coe-editor-form { display: grid; gap: 18px; }
.coe-editor-form fieldset { margin: 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--border); }
.coe-editor-form legend { padding: 0 10px 0 0; font-size: 15px; font-weight: 700; }
.coe-editor-form fieldset > p { margin: 0 0 12px; color: var(--text-secondary); font-size: 12px; }
.coe-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 20px; }
.coe-full { grid-column: 1 / -1; }
.coe-editor-form .field { display: grid; gap: 7px; margin-bottom: 12px; font-size: 13px; }
.coe-editor-form input:not([type=checkbox]),.coe-editor-form select,.coe-editor-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text); background: #fff; font: inherit; line-height: 1.5; }
.coe-editor-form input:disabled,.coe-editor-form textarea:disabled,.coe-editor-form select:disabled { background: #f8fafc; opacity: 1; }
.coe-editor-form textarea { resize: vertical; }
.coe-editor-form small { color: var(--text-secondary); font-size: 12px; }
.coe-confirmation { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; }
.coe-confirmation input { flex: 0 0 auto; margin-top: 3px; }
.coe-editor-actions { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 16px; border-top: 1px solid var(--border); }
.coe-preview-frame { width: 100%; height: 68vh; border: 1px solid var(--border); background: #eef1f5; border-radius: 8px; }
.coe-preview-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; }
.coe-preview-toolbar .button { margin-bottom: 12px; }
.coe-error { margin: 0 24px; color: var(--danger); font-size: 13px; }
.coe-error:empty { display: none; }
.coe-history-table { min-width: 750px; }
.coe-history-table td:first-child > strong { display: block; line-height: 1.45; }
.coe-history-table td:first-child > small { display: block; margin-top: 6px; color: var(--text-secondary); font-size: 11px; line-height: 1.45; }
.coe-history-table .coe-delete-action { border-color: #efc5c2; background: #fff; color: var(--danger); min-height: 32px; padding: 6px 8px; font-size: 12px; }
.coe-history-table .coe-delete-action:hover:not(:disabled),.coe-history-table .coe-delete-action:focus-visible { border-color: #dfa19e; background: var(--danger-bg); }
.coe-delete-dialog { width: min(520px,calc(100vw - 32px)); }
.coe-delete-form { padding: 24px; font-size: 13px; line-height: 1.6; }
.coe-delete-form h2 { margin: 4px 0 8px; font-size: 20px; }
.coe-delete-form header p,.coe-delete-form > p { color: var(--text-secondary); }
.coe-delete-form .coe-delete-target { padding: 10px 12px; border: 1px solid #efc5c2; border-radius: 8px; background: var(--danger-bg); color: var(--danger); }
.coe-delete-form .field { display: grid; gap: 7px; margin: 16px 0; }
.coe-delete-form input,.coe-delete-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; color: var(--text); }
.coe-delete-form footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.coe-empty { color: var(--text-secondary); }
@media(max-width:650px) { .coe-dialog { width: calc(100vw - 16px); }.coe-editor-heading,.coe-dialog > section { padding: 16px; }.coe-editor-tabs { padding: 0 16px; gap: 12px; }.coe-fields { grid-template-columns: 1fr; }.coe-editor-actions .button { flex: 1 1 auto; }.coe-error { margin: 0 16px; } }

/* Letter portrait, following the supplied single-page certification wording. */
.coe-print-page { margin: 0; background: #e9edf1; color: #000; font-family: 'Times New Roman',serif; }
.coe-print-tools { padding: 12px 20px; display: flex; justify-content: center; align-items: center; gap: 16px; font: 13px 'Segoe UI',sans-serif; }
.coe-print-tools button { padding: 9px 14px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #253244; cursor: pointer; font: inherit; }
.coe-sheet { box-sizing: border-box; width: 215.9mm; min-height: 279.4mm; margin: 0 auto 20px; padding: 12mm; position: relative; display: flex; flex-direction: column; background: #fff; font-size: 12pt; line-height: 1.4; }
.coe-letterhead { display: block; width: 100%; height: auto; object-fit: contain; }
.coe-sheet h1 { margin: 12mm 0 7mm; color: #000; font-family: 'Times New Roman',serif; text-align: center; font-size: 15pt; font-weight: 700; line-height: 1.3; }
.coe-issued-date { margin: 0 0 9mm; text-align: right; }
.coe-recipient { margin: 0 0 7mm; }
.coe-body p { margin: 0 0 7mm; text-align: justify; overflow-wrap: anywhere; }
.coe-body .coe-employee-name { font-weight: 700; }
.coe-signature { width: 100mm; max-width: 100%; margin: 11mm 0 8mm auto; font-size: 11pt; }
.coe-signature p { margin: 0 0 5mm; }
.coe-signature > strong,.coe-signature > span { display: block; line-height: 1.4; }
.coe-signature-space { height: 13mm; }
.coe-document-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 8mm; font-size: 9pt; }
.coe-document-qr { width: 50mm; text-align: center; display: grid; justify-items: center; gap: 1mm; font-family: 'Segoe UI',sans-serif; font-size: 8pt; }
.coe-document-qr img { width: 25mm; height: 25mm; }
.coe-document-qr strong { font-size: 9pt; }
.coe-draft-qr { border: 1px dashed #888; min-height: 25mm; width: 25mm; padding: 3mm; display: grid; align-items: center; color: #666; }
.coe-document-status { align-self: center; color: #666; font: 700 9pt 'Segoe UI',sans-serif; margin-top: 4mm; letter-spacing: .12em; }
.coe-sheet { page: coe; }
@page coe { size: letter portrait; margin: 12mm; }
@media print {
  .coe-print-page { background: white; }
  .coe-print-tools { display: none; }
  .coe-sheet { width: 100%; min-height: 255.4mm; margin: 0; padding: 0; box-shadow: none; }
  .coe-letterhead { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .coe-signature,.coe-document-footer { break-inside: avoid; }
}