.ep-detail-heading {
 display: flex;
 align-items: center;
 justify-content: space-between;
 min-height: 36px;
 color: var(--text);
 font: 700 14px/1.25 "Permutrix UI Inter", Inter, system-ui, sans-serif;
}

.result-preview-enlarge {
 width: 36px;
 min-width: 36px;
 height: 36px;
 padding: 7px;
 color: var(--muted);
}

.result-preview-enlarge svg { width: 20px; height: 20px; display: block; }
.result-preview-enlarge:hover { color: var(--text); }
.result-preview-enlarge:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 2px; }

.result-preview-back {
 position: fixed;
 inset: 0;
 z-index: 11000;
 display: none;
 align-items: center;
 justify-content: center;
 box-sizing: border-box;
 padding: clamp(12px, 3.55vh, 32px) clamp(12px, 4vw, 48px);
 background: rgb(5 8 14 / 72%);
 font-family: "Permutrix UI Inter", Inter, system-ui, sans-serif;
}

.result-preview-back.show { display: flex; }
.result-preview-back[hidden] { display: none !important; }

.result-preview-modal {
 --result-preview-border: var(--border, #343b48);
 width: min(1120px, calc(100vw - 24px));
 height: min(836px, calc(100dvh - 24px));
 max-height: calc(100dvh - 24px);
 min-width: 0;
 min-height: 0;
 display: grid;
 grid-template-rows: auto auto minmax(0, 1fr) auto;
 overflow: hidden;
 box-sizing: border-box;
 color: var(--text, #f4f6fb);
 background: var(--bg-panel);
 border: 1px solid var(--result-preview-border);
 border-radius: 14px;
 box-shadow: 0 28px 80px rgb(0 0 0 / 48%);
}

.result-preview-header,
.result-preview-toolbar,
.result-preview-footer {
 display: flex;
 align-items: center;
 gap: 12px;
 box-sizing: border-box;
 padding-inline: clamp(16px, 2.5vw, 28px);
}

.result-preview-header {
 min-height: 92px;
 justify-content: space-between;
 padding-block: 18px 14px;
 border-bottom: 1px solid var(--result-preview-border);
}

.result-preview-heading-copy { min-width: 0; }
.result-preview-header h2 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700; }
.result-preview-info { margin: 7px 0 0; color: var(--muted, #a8afbd); font-size: 14px; line-height: 1.3; }
.result-preview-close { flex: 0 0 auto; width: 40px; height: 40px; font-size: 24px; }

.result-preview-toolbar {
 min-height: 60px;
 justify-content: space-between;
 padding-block: 10px;
 border-bottom: 1px solid var(--result-preview-border);
}

.result-preview-toolbar-group { display: flex; align-items: center; gap: 8px; }
.result-preview-modal .btn { min-height: 36px; font: 600 14px/1 "Permutrix UI Inter", Inter, system-ui, sans-serif; }
.result-preview-mode.active { color: #fff; background: var(--ui-action); border-color: var(--ui-action); }
.result-preview-step { min-width: 40px; font-size: 20px !important; }
.result-preview-modal :focus-visible { outline: 2px solid #8b5cf6; outline-offset: 2px; }

.result-preview-workspace {
 position: relative;
 min-width: 0;
 min-height: 0;
 overflow: auto;
 overscroll-behavior: contain;
 touch-action: none;
 display: flex;
 align-items: flex-start;
 justify-content: flex-start;
 margin: clamp(12px, 2vh, 20px) clamp(16px, 4vw, 48px);
 border: 1px solid var(--result-preview-border);
 border-radius: 8px;
 background: #fff;
 cursor: grab;
}

.result-preview-workspace:active { cursor: grabbing; }
.result-preview-back[data-result-alpha="transparent"] .result-preview-workspace {
 background: conic-gradient(#737b8820 25%, #737b8855 0 50%, #737b8820 0 75%, #737b8855 0) 0 0 / 20px 20px;
}
.result-preview-back[data-result-alpha="opaque"] .result-preview-workspace { background: #fff; }

.result-preview-stage {
 flex: 0 0 auto;
 margin: auto;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 0 0 1px rgb(0 0 0 / 10%);
}
.result-preview-stage canvas { display: block; width: 1px; height: 1px; }

.result-preview-message {
 position: absolute;
 inset: 0;
 z-index: 2;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 12px;
 padding: 24px;
 text-align: center;
 color: var(--text, #f4f6fb);
 background: var(--bg-panel);
 cursor: default;
}
.result-preview-message[hidden] { display: none; }
.result-preview-spinner {
 width: 28px;
 height: 28px;
 border: 3px solid rgb(139 92 246 / 25%);
 border-top-color: #8b5cf6;
 border-radius: 50%;
 animation: result-preview-spin .8s linear infinite;
}
.result-preview-message:has(#btnResultPreviewRetry:not([hidden])) .result-preview-spinner { display: none; }
@keyframes result-preview-spin { to { transform: rotate(360deg); } }

.result-preview-footer {
 min-height: 68px;
 justify-content: space-between;
 padding-block: 12px;
 border-top: 1px solid var(--result-preview-border);
}
.result-preview-filename {
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 color: var(--muted, #a8afbd);
 font-size: 13px;
}
.result-preview-footer .btn { flex: 0 0 auto; min-height: 40px; }

@media (max-width: 720px), (max-height: 620px) {
 .result-preview-back { padding: 8px; }
 .result-preview-modal { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); border-radius: 10px; }
 .result-preview-header { min-height: 72px; padding-block: 10px; }
 .result-preview-header h2 { font-size: 20px; }
 .result-preview-toolbar { min-height: 52px; padding-block: 8px; }
 .result-preview-workspace { margin: 8px 12px; }
 .result-preview-footer { min-height: 60px; }
}

@media (max-width: 520px) {
 .result-preview-filename { max-width: 45vw; }
 .result-preview-toolbar-group { gap: 4px; }
}