.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-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-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: #737e8e; 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: #737e8e; 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(4,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; }
.custom-caption-preview-canvas {
    position: relative; height: 100%; width: auto; max-width: 100%; max-height: 100%; aspect-ratio: 9 / 16;
    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"] { aspect-ratio: 16 / 9; width: 100%; height: auto; }
.custom-caption-preview-canvas[data-ratio="4:5"] { aspect-ratio: 4 / 5; }
.custom-caption-preview-canvas[data-ratio="1:1"] { aspect-ratio: 1 / 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%; text-align: center; }
.custom-caption-preview-fallback span { display: block; width: 100%; color: #fff; font-size: clamp(1.1rem,3vw,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%; 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-status { min-height: 31px; margin: 0; padding: 8px 14px; border-top: 1px solid rgba(255,255,255,.075); color: #7f8999; font: 600 .62rem "JetBrains Mono", monospace; }
.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: 620px; order: -1; }
    .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: 320px; order: -1; }
    .custom-caption-controls { overflow: visible; }
}
@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-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: 520px; }
}
@media (prefers-reduced-motion: reduce) {
    .custom-caption-preview-loading, .custom-caption-preview-loading span { animation: none; transition: none; }
}