.ep-preview, .ep-dialog { color: #1B2A4A; font-family: 'Synbar Inter', Inter, Arial, sans-serif; text-align: left; }
.ep-preview { min-width: 0; margin: 0; overflow: clip; border: 1px solid #E0E3E5; border-radius: 16px; background: #FFFFFF; box-shadow: 0 12px 36px #1B2A4A08; }
.ep-preview :where(p, h3), .ep-dialog :where(p, h2, h3) { margin: 0; }
.ep-preview-head { min-height: 76px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 22px 26px; border-bottom: 1px solid #E8E8E4; font-size: 15px; }
.ep-preview-head > [data-ep-connection] { color: #64748B; font-size: 12px; text-align: right; }
.ep-preview-brand { display:inline-flex; align-items:center; gap:10px; }
.ep-mark { width:25px; height:25px; flex-shrink:0; }
.ep-mark-piece { transform-box:fill-box; transform-origin:center; }
.ep-preview-stage { display:grid; align-items:start; }
.ep-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 18px 0; }
.ep-tabs button { min-height: 44px; padding: 9px 12px; border: 0; border-radius: 7px; background: transparent; color: #64748B; font: inherit; font-size: 12px; cursor: pointer; }
.ep-tabs button[aria-pressed="true"] { background: #E8EDF6; color: #1B2A4A; font-weight: 600; }
.ep-preview-case { grid-area:1 / 1; min-width:0; padding: 24px 26px 28px; }
/* Reserve the tallest example, keeping the surrounding page still on every swap. */
.ep-preview-case[hidden] { display:block; visibility:hidden; pointer-events:none; }
.ep-dialog-case[hidden], .ep-receipt[hidden] { display: none; }
.ep-preview-case.is-leaving { opacity:0; transform:translateY(-4px); transition:opacity 220ms ease, transform 220ms ease; }
.ep-preview-case.is-entering { animation:ep-case-in 360ms ease both; }
@keyframes ep-case-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes ep-piece-working { 0%,22%,100% { opacity:1; transform:scale(1); } 42%,58% { opacity:.08; transform:scale(.8); } 78% { opacity:1; transform:scale(1); } }
@media(prefers-reduced-motion:no-preference) {
 .ep-preview.is-preparing .ep-mark-piece { animation:ep-piece-working 1.8s ease-in-out infinite; }
 .ep-preview.is-preparing .ep-mark-piece:nth-child(2) { animation-delay:.2s; }
 .ep-preview.is-preparing .ep-mark-piece:last-child { animation-delay:.4s; }
}
.ep-preview h3, .ep-dialog h3 { font-size: 22px; line-height: 1.3; letter-spacing: -.02em; font-weight: 600; }
.ep-target { margin-top: 8px !important; color: #64748B; font-size: 12px; overflow-wrap: anywhere; }
.ep-changes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; }
.ep-changes > div { min-width: 0; padding: 16px; border-radius: 9px; background: #F1F5F9; }
.ep-changes > div:last-child { background: #EBF1F9; }
.ep-changes dt { margin-bottom: 10px; color: #64748B; font-size: 11px; font-weight: 500; }
.ep-changes dd { margin: 0; color: #334155; font-size: 13px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.ep-changes .ep-code { font-family: ui-monospace, monospace; font-size: 11px; }
.ep-route { margin: 14px 0 !important; color: #64748B; font-size: 13px; line-height: 1.75; }
.ep-primary { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 16px; padding: 11px 18px; border: 1px solid #1B2A4A; border-radius: 8px; background: #1B2A4A; color: white; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ep-primary:disabled { opacity: .5; cursor: default; }
.ep-preview button:focus-visible, .ep-dialog :where(button,input):focus-visible { outline: 3px solid #4C7DB8; outline-offset: 3px; }
.ep-preview figcaption { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 18px 6px 24px; border-top:1px solid #E8E8E4; color:#64748B; font-size:10px; }
.ep-autoplay { display:inline-flex; min-height:44px; align-items:center; gap:8px; padding:8px; border:0; border-radius:6px; background:transparent; color:#1B2A4A; font:inherit; font-size:11px; cursor:pointer; }
.ep-autoplay[hidden] { display:none; }
.ep-autoplay:hover { background:#1B2A4A08; }
.ep-tabs button { transition:background-color 220ms ease, color 220ms ease; }
.ep-dialog { box-sizing: border-box; width: min(900px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid #E0E3E5; border-radius: 12px; background: #FFFFFF; box-shadow: 0 24px 100px #0F172A40; }
.ep-dialog::backdrop { background: #0F172A60; }
.ep-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; border-bottom: 1px solid #E8E8E4; }
.ep-dialog-head h2 { font-size: 20px; font-weight: 600; }
.ep-dialog-head button { width: 44px; height: 44px; border: 0; border-radius: 7px; background: transparent; color: #64748B; font-size: 28px; cursor: pointer; }
.ep-dialog-case { padding: 24px; }
.ep-dialog-case .ep-changes { margin-block: 18px; }
.ep-approval { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0; color: #334155; font-size: 13px; line-height: 1.7; }
.ep-approval input { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; accent-color: #1B2A4A; }
.ep-receipt { margin-top: 16px !important; padding: 14px; border-radius: 8px; background: #ECF6F0; color: #176448; font-size: 13px; line-height: 1.65; }
.ep-dialog-notice { padding: 12px 24px; border-top: 1px solid #E8E8E4; color: #64748B; font-size: 11px; }
@media (max-width: 600px) { .ep-preview-head, .ep-preview-case { padding: 20px; } .ep-tabs { padding-inline: 12px; } .ep-changes { gap: 8px; } .ep-changes > div { padding: 12px; } .ep-preview h3, .ep-dialog h3 { font-size: 20px !important; } .ep-dialog-head { padding: 8px 16px; } .ep-dialog-case { padding: 16px; } .ep-dialog .ep-changes { margin-block: 14px; } .ep-dialog .ep-route { font-size: 12px; margin-block: 10px !important; } .ep-dialog .ep-changes dd { font-size: 12px; } .ep-dialog .ep-changes .ep-code { font-size: 10px; } .ep-approval { margin: 14px 0; } }

@media(max-width:600px) {
 .ep-changes { grid-template-columns:1fr; }
 .ep-changes dd { line-height:1.7; }
 .ep-dialog .ep-changes > div { padding:12px 14px; }
}
@media(prefers-reduced-motion:reduce) { .ep-preview-case, .ep-tabs button, .ep-mark-piece { animation:none !important; transition:none !important; } }