.custom-caption-actions { margin-top: .75rem; display: flex; align-items: center; gap: .65rem; }
.custom-caption-open {
    min-height: 42px; padding: 0 .95rem; display: inline-flex; align-items: center; gap: .55rem;
    border: 1px dashed rgba(16,20,239,.7); border-radius: 10px; color: var(--v2-blue-light, #93acff);
    background: rgba(16,20,239,.08); font: 700 .78rem/1 "Manrope", sans-serif; cursor: pointer;
}
.custom-caption-open:hover, .custom-caption-open:focus-visible { border-style: solid; background: rgba(16,20,239,.15); }
.custom-caption-open b { color: var(--v2-blue-light, #93acff); font-size: 1.1rem; }
.custom-caption-count, .custom-hook-count { color: #7f8a9b; font: 600 .68rem/1 "JetBrains Mono", monospace; }
.custom-caption-backdrop {
    position: fixed; inset: 0; z-index: 5000; padding: 16px; display: grid; place-items: center;
    background: rgba(4,5,9,.82); backdrop-filter: blur(12px);
}
.custom-caption-backdrop[hidden] { display: none !important; }
.custom-caption-backdrop [hidden] { display: none !important; }
.custom-caption-dialog {
    --v2-blue-light: #93acff; /* Builder dialogs stay dark in both page themes. */
    width: min(720px, 100%); max-height: min(850px, calc(100dvh - 32px)); overflow: auto;
    border: 1px solid rgba(255,255,255,.11); border-radius: 18px; color: #f1f4f7;
    background: #11141c; box-shadow: 0 30px 100px rgba(0,0,0,.65); font-family: "Manrope", sans-serif;
}
.custom-caption-builder-dialog {
    width: min(1540px, calc(100vw - 32px)); height: min(940px, calc(100dvh - 32px)); max-height: none;
    display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden;
}
.custom-caption-head { padding: 20px 24px 17px; display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid rgba(255,255,255,.075); }
.custom-caption-head p { max-width: 760px; margin: 5px 0 0; color: #929ba8; font-size: .82rem; line-height: 1.45; }
.custom-caption-head h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.025em; }
.custom-caption-close { width: 40px; height: 40px; flex: none; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; color: #aab2be; background: rgba(255,255,255,.035); font-size: 1.2rem; cursor: pointer; }
.custom-caption-close:hover { color: #fff; background: rgba(255,255,255,.08); }
.custom-caption-body { padding: 22px 24px 24px; display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 24px; }
.custom-caption-builder-dialog .custom-caption-body { min-height: 0; padding: 18px 20px 20px; grid-template-columns: 176px minmax(0,1fr); gap: 18px; overflow: hidden; }
.custom-caption-slots { display: grid; align-content: start; gap: 8px; min-width: 0; }
.custom-caption-catalog { min-width: 0; display: grid; align-content: start; gap: 12px; }
.custom-caption-catalog-heading { display: grid; gap: 4px; }
.custom-caption-catalog-heading strong { font-size: .82rem; color: var(--v2-white, #edf0f5); }
.custom-caption-catalog-heading span { font-size: .74rem; color: var(--v2-muted, #929ba8); }
.custom-caption-catalog-capacity { margin: 0; color: var(--v2-muted, #929ba8); font-size: .76rem; line-height: 1.5; }
.custom-caption-catalog-notice { padding: 12px; border: 1px solid var(--v2-border, #ffffff18); border-radius: 10px; background: var(--v2-slate, #11141c); }
.custom-caption-catalog-notice p { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--v2-muted, #929ba8); }
.custom-caption-catalog-notice.error p { color: #ffb1b8; }
.custom-caption-catalog-notice button { min-height: 42px; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--v2-border, #ffffff18); border-radius: 8px; background: var(--v2-slate-2, #1a1d26); color: var(--v2-white, #edf0f5); font: inherit; font-size: .78rem; cursor: pointer; }
.custom-caption-catalog-notice[hidden], .custom-caption-catalog-notice button[hidden] { display: none; }
.custom-caption-slot, .custom-caption-new { min-height: 50px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; color: #cad0da; background: rgba(255,255,255,.025); text-align: left; cursor: pointer; }
.custom-caption-slot:hover, .custom-caption-new:hover { border-color: rgba(16,20,239,.55); background: rgba(16,20,239,.08); }
.custom-caption-slot.active { border-color: var(--v2-blue, #1014ef); background: rgba(16,20,239,.15); color: #fff; }
.custom-caption-slot small { display: block; margin-top: 4px; color: #727d8c; text-transform: capitalize; }
.custom-caption-new { border-style: dashed; color: var(--v2-blue-light, #93acff); }
.custom-caption-form { display: grid; gap: 15px; }
.custom-caption-builder-dialog .custom-caption-form {
    min-width: 0; min-height: 0; grid-template-columns: minmax(520px, .95fr) minmax(430px, 1.05fr);
    grid-template-rows: minmax(0,1fr) auto auto; column-gap: 20px; row-gap: 10px;
}
.custom-caption-controls { min-height: 0; padding: 2px; display: grid; align-content: start; gap: 13px; overflow: visible; }
.custom-caption-builder-dialog .custom-caption-controls {
    gap: 10px; overflow-y: auto; padding-right: 6px; padding-bottom: 8px; scrollbar-gutter: stable;
}
.custom-caption-section {
    min-width: 0; padding: 11px 12px 12px; border: 1px solid rgba(255,255,255,.075);
    border-radius: 12px; background: rgba(255,255,255,.018);
}
.custom-caption-typography { position: relative; }
.custom-caption-typography.font-picker-open { z-index: 200; }
.custom-caption-dialog .custom-caption-section > header {
    position: static; top: auto; z-index: auto; min-height: 0; margin-bottom: 9px; padding: 0;
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    border: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.custom-caption-section > header strong { color: #eef2f8; font-size: .78rem; }
.custom-caption-section > header span { color: var(--v2-muted); font-size: .62rem; text-align: right; }
.custom-caption-section-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 10px; }
.custom-caption-name-field, .custom-caption-font-field { grid-column: 1 / -1; }
.custom-caption-casing { grid-column: 1 / -1; }
.custom-caption-section-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.custom-caption-layout-grid, .custom-caption-motion-grid { align-items: end; }
.custom-caption-line-height-field { grid-column: 1 / -1; }
.custom-caption-field { display: grid; gap: 7px; color: #b9c0cb; font-size: .72rem; font-weight: 750; letter-spacing: .01em; }
.custom-caption-builder-dialog .custom-caption-field { gap: 5px; }
.custom-caption-field[hidden] { display: none !important; }
.custom-caption-field input[type="text"], .custom-caption-field select, .custom-caption-font-trigger {
    width: 100%; min-height: 40px; padding: 0 11px; border: 1px solid rgba(255,255,255,.1);
    border-radius: 9px; color: #fff; background: rgba(255,255,255,.04); font: 600 .86rem "Manrope", sans-serif;
}
.custom-caption-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.custom-caption-color { min-height: 42px; padding: 5px 9px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.04); }
.custom-caption-color input { width: 34px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.custom-caption-color output, .custom-caption-range output { color: #aeb6c2; font: 600 .68rem "JetBrains Mono", monospace; white-space: nowrap; }
.custom-caption-font-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.custom-caption-font-picker { position: relative; min-width: 0; }
.custom-caption-font-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; cursor: pointer; }
.custom-caption-font-trigger span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
.custom-caption-font-trigger i { color: #8f98a8; font: normal 1rem/1 "Manrope", sans-serif; }
.custom-caption-font-options {
    position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; max-height: 310px; padding: 6px;
    overflow-y: auto; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: #181c26;
    box-shadow: 0 18px 50px rgba(0,0,0,.52);
}
.custom-caption-font-options[hidden] { display: none; }
.custom-caption-font-option { width: 100%; min-height: 42px; padding: 7px 9px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; border-radius: 7px; color: #eef1f6; background: transparent; text-align: left; cursor: pointer; }
.custom-caption-font-option span { font-size: 1rem; }
.custom-caption-font-option small { color: #7f8999; font: 600 .58rem "JetBrains Mono", monospace; text-transform: uppercase; }
.custom-caption-font-option:hover, .custom-caption-font-option:focus-visible, .custom-caption-font-option[aria-selected="true"] { background: rgba(16,20,239,.2); }
.custom-caption-upload { min-height: 40px; padding: 0 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; color: #d9dde5; background: rgba(255,255,255,.045); font-weight: 700; cursor: pointer; }
.custom-caption-effects { border: 1px solid rgba(255,255,255,.075); border-radius: 12px; background: rgba(255,255,255,.018); }
.custom-caption-effects > summary { min-height: 46px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #e8edf5; cursor: pointer; list-style: none; }
.custom-caption-effects > summary::-webkit-details-marker { display: none; }
.custom-caption-effects > summary span { display: flex; align-items: baseline; gap: 9px; }
.custom-caption-effects > summary strong { font-size: .78rem; }
.custom-caption-effects > summary small { color: var(--v2-muted); font-size: .62rem; }
.custom-caption-effects > summary b { color: var(--v2-blue-light, #93acff); font-size: 1rem; transition: rotate .16s ease; }
.custom-caption-effects[open] > summary b { rotate: 45deg; }
.custom-caption-effects-grid { padding: 0 10px 10px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.custom-caption-effect-card-shadow { grid-column: 1 / -1; }
.custom-caption-builder-dialog .custom-caption-effect-card-shadow .custom-caption-effect-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
.custom-caption-effect-card { min-width: 0; margin: 0; padding: 11px 12px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: rgba(255,255,255,.018); }
.custom-caption-builder-dialog .custom-caption-effect-card { padding: 8px 9px 9px; }
.custom-caption-effect-card legend { padding: 0 6px; color: #dce3ee; font-size: .76rem; font-weight: 800; }
.custom-caption-check { display: flex; align-items: center; gap: 9px; min-height: 26px; color: #dce3ee; font-size: .78rem; font-weight: 800; }
.custom-caption-check input { accent-color: var(--v2-blue, #1014ef); }
.custom-caption-casing { width: max-content; align-self: center; }
.custom-caption-effect-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; transition: opacity .15s; }
.custom-caption-effect-controls-wide { grid-template-columns: 1fr 1fr; }
.custom-caption-effect-controls.disabled { opacity: .38; }
.custom-caption-range { min-height: 42px; padding: 0 9px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.04); }
.custom-caption-range input { width: 100%; accent-color: var(--v2-blue, #1014ef); }
.custom-caption-preview { padding: 14px; border: 1px solid rgba(255,255,255,.075); border-radius: 11px; background: linear-gradient(145deg,rgba(16,20,239,.07),rgba(255,255,255,.025)); }
.custom-caption-builder-dialog .custom-caption-preview { min-width: 0; min-height: 0; padding: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; background: #0a0d14; }
.custom-caption-preview-head { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(255,255,255,.075); }
.custom-caption-preview-head div { display: grid; gap: 3px; }
.custom-caption-preview-head strong { color: #f1f4f8; font-size: .82rem; }
.custom-caption-preview-head span { color: #788394; font: 600 .62rem "JetBrains Mono", monospace; }
.custom-caption-preview-head label { display: flex; align-items: center; gap: 8px; color: #8e98a7; font-size: .68rem; font-weight: 700; }
.custom-caption-preview-head select { min-height: 38px; padding: 0 30px 0 10px; border: 1px solid rgba(255,255,255,.11); border-radius: 8px; color: #fff; background: #171b25; font: 650 .75rem "Manrope", sans-serif; }
.custom-caption-preview-viewport { min-height: 0; padding: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; container-type: size; }
.custom-caption-preview-canvas {
    --preview-ratio: .5625;
    position: relative; flex: none; width: min(100cqw, calc(100cqh * var(--preview-ratio))); height: auto; aspect-ratio: var(--preview-ratio); box-sizing: border-box; container-type: inline-size;
    overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: #05070d;
    box-shadow: 0 18px 50px rgba(0,0,0,.38);
}
.custom-caption-preview-canvas[data-ratio="16:9"] { --preview-ratio: 1.77777778; }
.custom-caption-preview-canvas[data-ratio="4:5"] { --preview-ratio: .8; }
.custom-caption-preview-canvas[data-ratio="1:1"] { --preview-ratio: 1; }
.custom-caption-renderer-preview { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.custom-caption-preview-fallback { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 8% var(--caption-safe-inset, 5.462963%); text-align: center; }
.custom-caption-preview-fallback span { display: block; width: 100%; color: #fff; font-size: clamp(.4rem,10cqw,2rem); font-weight: 800; line-height: 1.05; white-space: pre; }
.custom-caption-preview-canvas.renderer-ready .custom-caption-preview-fallback { display: none; }
.custom-caption-renderer-preview { z-index: 3; object-fit: fill; background: transparent; }
.custom-caption-preview-safe-area { position: absolute; z-index: 4; inset: 5% var(--caption-safe-inset, 5.462963%); border: 1px dashed rgba(255,255,255,.11); border-radius: 5px; pointer-events: none; }
.custom-caption-preview-loading { position: absolute; z-index: 5; left: 50%; bottom: 12px; translate: -50% 8px; min-height: 30px; padding: 0 10px; display: flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #dce1e9; background: rgba(7,9,14,.78); opacity: 0; pointer-events: none; transition: opacity .15s, translate .15s; font: 650 .62rem "JetBrains Mono", monospace; white-space: nowrap; }
.custom-caption-preview-loading.visible { opacity: 1; translate: -50% 0; }
.custom-caption-preview-loading span { width: 10px; height: 10px; border: 2px solid rgba(255,255,255,.24); border-top-color: var(--v2-blue, #1014ef); border-radius: 50%; animation: custom-caption-spin .8s linear infinite; }
.custom-caption-preview-footer { display: flex; align-items: center; gap: 8px; border-top: 1px solid rgba(255,255,255,.075); }
.custom-caption-preview-footer > button { min-height: 36px; padding: 6px 10px; border: 1px solid #ffffff26; border-radius: 7px; background: #ffffff0a; color: #edf0f5; font: 600 .72rem "Manrope", sans-serif; cursor: pointer; }
.custom-caption-preview-footer > button:last-child { margin-right: 8px; }
.custom-caption-preview-footer > button:focus-visible { outline: 2px solid #8d91ff; outline-offset: 2px; }
.custom-caption-preview-status { min-width: 0; flex: 1; min-height: 31px; margin: 0; padding: 8px 14px; color: #7f8999; font: 600 .62rem "JetBrains Mono", monospace; }
.custom-caption-preview-expand { display: none; flex: none; min-height: 42px; margin: 6px 8px 6px 0; padding: 8px; border: 1px solid var(--v2-border, #ffffff18); border-radius: 8px; background: transparent; color: var(--v2-text, #edf0f5); font: 650 .72rem "Manrope", sans-serif; cursor: pointer; }
.custom-caption-preview-label { display: block; margin-bottom: 10px; color: #858fa0; font: 700 .62rem/1 "JetBrains Mono", monospace; letter-spacing: .11em; text-transform: uppercase; }
.custom-hook-preview-stage { min-height: 84px; display: grid; place-items: center; text-align: center; }
.custom-hook-preview-stage span { display: inline-block; padding: .42em .68em; border-radius: .42em; font-size: 1.25rem; font-weight: 700; line-height: 1.02; white-space: nowrap; }
.custom-hook-builder-dialog {
    width: min(1040px, calc(100vw - 32px)); max-height: min(760px, calc(100dvh - 32px));
    display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden;
}
.custom-hook-builder-dialog .custom-caption-body { min-height: 0; grid-template-columns: 170px minmax(0,1fr); gap: 18px; overflow: hidden; }
.custom-hook-builder-dialog .custom-caption-form {
    min-width: 0; min-height: 0; grid-template-columns: minmax(340px,1fr) minmax(300px,.9fr);
    grid-template-rows: auto auto auto auto auto minmax(0,1fr) auto auto; column-gap: 18px; row-gap: 10px;
}
.custom-hook-builder-dialog :is(.custom-hook-name-field,.custom-hook-font-field,.custom-hook-color-grid,.custom-hook-opacity-field,.custom-hook-size-field,.custom-hook-max-lines-field,.custom-hook-casing) { grid-column: 1; }
.custom-hook-size-field small { color: #7f8999; font-size: .64rem; font-weight: 600; line-height: 1.35; }
.custom-hook-line-buttons { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 7px; }
.custom-hook-line-buttons button { min-height: 34px; border: 1px solid rgba(255,255,255,.11); border-radius: 8px; color: #aeb6c4; background: rgba(255,255,255,.035); font-weight: 800; cursor: pointer; }
.custom-hook-line-buttons button.active { border-color: var(--v2-blue, #1014ef); color: #fff; background: rgba(16,20,239,.24); box-shadow: inset 0 0 0 1px rgba(16,20,239,.24); }
.custom-hook-builder-dialog .custom-hook-preview { grid-column: 2; grid-row: 1 / 8; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.custom-hook-builder-dialog .custom-caption-message,
.custom-hook-builder-dialog .custom-caption-footer { grid-column: 1 / -1; }
.custom-hook-builder-dialog .custom-caption-message { grid-row: 8; }
.custom-hook-builder-dialog .custom-caption-footer { grid-row: 9; }
.custom-hook-builder-dialog .custom-hook-preview-stage { min-height: 210px; }
.custom-caption-message { min-height: 18px; margin: 0; color: #929ba8; font-size: .74rem; }
.custom-caption-builder-dialog .custom-caption-message { grid-column: 1 / -1; }
.custom-caption-message.error { color: #ff9aa4; }
.custom-caption-footer { padding-top: 4px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.custom-caption-builder-dialog .custom-caption-footer { grid-column: 1 / -1; }
.custom-caption-delete { border: 0; color: #ff9aa4; background: transparent; font-weight: 700; cursor: pointer; }
.custom-caption-save { min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px; color: #fff; background: var(--v2-blue, #1014ef); font-weight: 800; cursor: pointer; }
.custom-caption-save:disabled, .custom-caption-upload:disabled { opacity: .55; cursor: wait; }
.custom-caption-dialog :is(button,input,select):focus-visible { outline: 2px solid var(--v2-blue-light, #93acff); outline-offset: 2px; }
@keyframes custom-caption-spin { to { transform: rotate(360deg); } }

@media (max-width: 1200px) {
    .custom-caption-builder-dialog .custom-caption-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); overflow-y: auto; }
    .custom-caption-builder-dialog .custom-caption-slots { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .custom-caption-builder-dialog .custom-caption-form { grid-template-columns: minmax(310px,370px) minmax(390px,1fr); }
}
@media (max-width: 900px) {
    .custom-caption-builder-dialog, .custom-hook-builder-dialog { height: calc(100dvh - 20px); width: calc(100vw - 20px); }
    .custom-caption-builder-dialog .custom-caption-body { padding: 14px; overflow-y: auto; }
    .custom-caption-builder-dialog .custom-caption-form { min-height: max-content; display: flex; flex-direction: column; overflow: visible; }
    .custom-caption-builder-dialog :is(.custom-caption-preview,.custom-caption-controls,.custom-caption-message,.custom-caption-footer) { flex: none; }
    .custom-caption-builder-dialog .custom-caption-preview { min-height: 280px; height:32dvh; order: -1; }
    .custom-caption-preview-expand { display: inline-block; }
    .custom-caption-builder-dialog .custom-caption-preview.preview-expanded { min-height: 460px; height: min(660px, 75dvh); }
    .custom-hook-builder-dialog .custom-caption-body { grid-template-columns: 1fr; padding: 14px; overflow-y: auto; }
    .custom-hook-builder-dialog .custom-caption-form { display: flex; flex-direction: column; overflow: visible; }
    .custom-hook-builder-dialog .custom-hook-preview { min-height: 220px; height:28dvh; order: -1; }
    .custom-caption-controls { overflow: visible; }
    .custom-caption-form .custom-caption-footer { position: sticky; bottom: 0; z-index: 10; min-height: 56px; padding: 10px 0; border-top: 1px solid var(--v2-border, #ffffff18); background: var(--v2-slate, #11141c); }
}
@media (max-width: 620px) {
    .custom-caption-backdrop { padding: 6px; align-items: end; }
    .custom-caption-dialog, .custom-caption-builder-dialog { width: 100%; height: calc(100dvh - 12px); max-height: none; border-radius: 16px 16px 8px 8px; }
    .custom-caption-body { grid-template-columns: 1fr; padding: 14px; }
    .custom-caption-slots, .custom-caption-builder-dialog .custom-caption-slots { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .custom-caption-grid, .custom-caption-effect-controls,
    .custom-caption-section-pair, .custom-caption-section-grid,
    .custom-caption-effects-grid { grid-template-columns: 1fr; }
    .custom-caption-builder-dialog .custom-caption-effect-card-shadow .custom-caption-effect-controls { grid-template-columns: minmax(0,1fr); }
    .custom-caption-name-field, .custom-caption-font-field,
    .custom-caption-casing, .custom-caption-line-height-field,
    .custom-caption-active-motion-field, .custom-caption-effect-card-shadow { grid-column: 1; }
    .custom-caption-builder-dialog .custom-caption-preview { min-height: 400px; height: max(400px, 44dvh); }
    .custom-caption-preview-head { flex-wrap: wrap; gap: 8px; padding: 12px; }
    .custom-caption-preview-head > div { flex: 1 1 150px; }
    .custom-caption-preview-head label { flex: 1 1 100%; justify-content: space-between; }
    .custom-caption-preview-head select { flex: 0 0 auto; width: auto; min-width: 180px; max-width: 100%; }
    .custom-caption-preview-head span { font-size: 12px; }
    .custom-caption-preview-head label { font-size: 13px; }
    .custom-caption-preview-footer { flex-wrap: wrap; gap: 8px; }
    .custom-caption-preview-footer p { flex: 1 1 100%; width: 100%; font-size: 13px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
    .custom-caption-preview-loading, .custom-caption-preview-loading span { animation: none; transition: none; }
}

/* Builder controls follow the page theme; the video preview remains dark. */
html[data-theme="light"] .custom-caption-dialog {
    --v2-blue-light: var(--v2-blue);
    color: var(--v2-white);
    border-color: var(--v2-border-strong);
    background: var(--v2-slate);
}
html[data-theme="light"] .custom-caption-head { border-color: var(--v2-border); background: var(--v2-slate); backdrop-filter: none; }
html[data-theme="light"] .custom-caption-head p,
html[data-theme="light"] :is(.custom-caption-count, .custom-hook-count, .custom-caption-slot small,
    .custom-caption-section > header span, .custom-caption-effects > summary small,
    .custom-caption-message, .custom-caption-font-option small,
    .custom-caption-color output, .custom-caption-range output, .custom-hook-size-field small) { color: var(--v2-muted); }
html[data-theme="light"] :is(.custom-caption-catalog-notice.error p,
    .custom-caption-message.error, .custom-caption-delete) { color: var(--v2-red); }
html[data-theme="light"] :is(.custom-caption-section, .custom-caption-effects,
    .custom-caption-effect-card, .custom-caption-slot, .custom-caption-new,
    .custom-caption-color, .custom-caption-range, .custom-caption-close,
    .custom-caption-upload, .custom-hook-line-buttons button) {
    border-color: var(--v2-border-strong);
    background: var(--v2-fill);
    color: var(--v2-white);
}
html[data-theme="light"] :is(.custom-caption-section > header strong, .custom-caption-field,
    .custom-caption-effect-card legend, .custom-caption-check,
    .custom-caption-effects > summary) { color: var(--v2-white); }
html[data-theme="light"] :is(.custom-caption-field input[type="text"],
    .custom-caption-field select, .custom-caption-font-trigger,
    .custom-caption-preview-head select) {
    border-color: var(--v2-border-strong);
    background: var(--v2-fill);
    color: var(--v2-white);
}
html[data-theme="light"] .custom-caption-font-options {
    border-color: var(--v2-border-strong);
    background: var(--v2-slate);
}
html[data-theme="light"] .custom-caption-font-option { color: var(--v2-white); }
html[data-theme="light"] .custom-caption-slot.active,
html[data-theme="light"] .custom-hook-line-buttons button.active {
    color: var(--v2-blue);
    background: rgba(16,20,239,.08);
}
html[data-theme="light"] .custom-caption-new { color: var(--v2-blue); }
html[data-theme="light"] .custom-caption-builder-dialog .custom-caption-preview {
    background: #0a0d14;
    color: #f1f4f7;
}
html[data-theme="light"] .custom-caption-builder-dialog .custom-caption-preview-head select {
    color: #f1f4f7;
    background: #171b25;
    border-color: rgba(255,255,255,.14);
}
@media (pointer: coarse), (max-width: 760px) {
    .custom-caption-close { width: 44px; height: 44px; }
    .custom-caption-dialog :is(.custom-caption-font-option,.custom-caption-upload,.custom-caption-check,.custom-caption-delete,.custom-hook-line-buttons button) { min-height: 44px; }
    .custom-caption-dialog :is(input[type="text"],select,.custom-caption-font-trigger) { min-height: 44px; font-size: 16px; }
}

/* Caption builder uses the application's Outfit hierarchy. Caption samples and
   font-choice specimens keep their selected, renderer-owned font families. */
.custom-caption-builder-dialog { font-family: 'Outfit', system-ui, sans-serif; }
.custom-caption-builder-dialog .custom-caption-head h2 { font-weight: 600; font-size: 1.4rem; letter-spacing: -.02em; }
.custom-caption-builder-dialog .custom-caption-head p { font-size: .9rem; color: #adb6c3; }
.custom-caption-builder-dialog .custom-caption-section > header strong,
.custom-caption-builder-dialog .custom-caption-catalog-heading strong,
.custom-caption-builder-dialog .custom-caption-preview-head strong { font-size: .9rem; font-weight: 600; }
.custom-caption-builder-dialog .custom-caption-section > header span { font-size: .75rem; line-height: 1.35; }
.custom-caption-builder-dialog .custom-caption-field,
.custom-caption-builder-dialog .custom-caption-check,
.custom-caption-builder-dialog .custom-caption-preview-head label {
    font-family: 'Outfit', system-ui, sans-serif; font-size: .85rem; font-weight: 500;
    text-transform: none; letter-spacing: 0; color: #b9c2cf;
}
.custom-caption-builder-dialog .custom-caption-field :is(input[type='text'], select),
.custom-caption-builder-dialog .custom-caption-preview-head select,
.custom-caption-builder-dialog :is(.custom-caption-new,.custom-caption-slot,.custom-caption-upload,.custom-caption-save,.custom-caption-preview-expand) {
    font-family: 'Outfit', system-ui, sans-serif; font-size: .9rem; font-weight: 500;
}
.custom-caption-builder-dialog .custom-caption-preview-status,
.custom-caption-builder-dialog .custom-caption-preview-head span,
.custom-caption-builder-dialog .custom-caption-preview-loading {
    font-family: 'Outfit', system-ui, sans-serif; font-size: .75rem; font-weight: 400; color: #aeb8c8;
}

@media (max-width: 640px) {
    .custom-caption-builder-dialog .custom-caption-field :is(input[type='text'], select),
    .custom-caption-builder-dialog .custom-caption-preview-head select { font-size: 16px; }
}