.subtitle-style-modal { position:fixed; inset:0; z-index:1400; display:grid; place-items:center; padding:16px; background:rgba(8,23,37,.65); box-sizing:border-box; }
.subtitle-style-modal[hidden] { display:none!important; }
body .subtitle-studio-dialog { --studio-edge:color-mix(in srgb,var(--sia-sidebar-active-line) 35%,var(--sia-line)); display:flex; flex-direction:column; width:min(1200px,calc(100vw - 32px)); max-width:calc(100vw - 32px); min-height:0; max-height:calc(100dvh - 32px); overflow:hidden; border:1px solid var(--studio-edge); border-radius:24px; background:var(--sia-sidebar-bg); color:var(--sia-text); box-shadow:var(--sia-shadow); font:400 15px/1.5 Inter,system-ui,sans-serif; }
.subtitle-studio-dialog .subtitle-style-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 28px; border-bottom:1px solid var(--studio-edge); flex-shrink:0; }
.subtitle-studio-dialog .subtitle-style-dialog-head h2 { color:var(--sia-heading); font:800 26px/1.2 Inter,system-ui,sans-serif; margin:0; }
.subtitle-studio-dialog .subtitle-style-dialog-head p { font-size:15px; line-height:1.5; color:var(--sia-muted); margin:8px 0 0; }
.subtitle-studio-dialog .icon-button { width:44px; height:44px; min-height:44px; flex:0 0 44px; border:1px solid var(--studio-edge); border-radius:14px; background:var(--sia-surface-soft); color:var(--sia-text); cursor:pointer; }
.subtitle-studio-dialog .subtitle-style-dialog-body { display:block; min-height:0; overflow-y:auto; padding:24px 28px; scrollbar-width:thin; scrollbar-color:var(--sia-line-strong) transparent; }
.subtitle-studio-dialog .subtitle-style-dialog-actions { display:flex; justify-content:flex-end; gap:12px; padding:16px 28px; border-top:1px solid var(--studio-edge); background:var(--sia-surface-soft); flex-shrink:0; }
.subtitle-studio-dialog .subtitle-style-dialog-actions button { min-height:48px; padding:12px 20px; font:700 15px/1.4 Inter,system-ui,sans-serif; border:1px solid var(--studio-edge); border-radius:16px; color:var(--sia-text); background:var(--sia-surface); cursor:pointer; }
.subtitle-studio-dialog .subtitle-style-dialog-actions .primary { background:color-mix(in srgb,var(--sia-teal-dark) 94%,var(--sia-heading)); color:#fff; border-color:var(--sia-teal-dark); }
html[data-theme="dark"] .subtitle-studio-dialog .subtitle-style-dialog-actions .primary { color:var(--sia-bg); }
.subtitle-studio { display:grid; grid-template-columns:minmax(300px,1fr) minmax(0,1.05fr); gap:28px; align-items:start; }
.subtitle-studio-preview { position:sticky; top:0; min-width:0; border:1px solid var(--studio-edge); border-radius:20px; padding:20px; background:var(--sia-surface); }
.subtitle-studio-eyebrow { display:block; color:var(--sia-teal-dark); font-size:11px; font-weight:800; letter-spacing:.12em; margin-bottom:16px; }
.subtitle-studio-stage { position:relative; aspect-ratio:9/12; overflow:hidden; border-radius:16px; background:radial-gradient(ellipse at 70% 25%,#d6a77055,transparent 40%),linear-gradient(160deg,#1a4051,#152835 55%,#0d1922); border:1px solid #ffffff12; isolation:isolate; }
.subtitle-studio-stage-scene { position:absolute; inset:30% -15% -20%; background:linear-gradient(150deg,#254f56,#10242f); clip-path:polygon(0 70%,35% 10%,60% 50%,78% 25%,100% 65%,100% 100%,0 100%); opacity:.8; }
.subtitle-studio-caption { position:absolute; left:7%; right:7%; bottom:7%; width:fit-content; max-width:86%; margin:0 auto; padding:6px 10px; border-radius:4px; line-height:1.25; font-size:calc(24px * var(--subtitle-scale,1)); font-weight:700; text-align:center; overflow-wrap:anywhere; }
.subtitle-studio-caption[data-position="top"] { top:7%; bottom:auto; }
.subtitle-studio-caption[data-position="middle"] { top:50%; bottom:auto; transform:translateY(-50%); }
.subtitle-studio-preview p { font-size:13px; color:var(--sia-muted); margin:14px 0; }
.subtitle-studio-current { border-top:1px solid var(--sia-line); padding-top:14px; font-size:13px; font-weight:650; color:var(--sia-heading); }
.subtitle-studio-settings { min-width:0; }
.subtitle-studio-tabs { display:flex; padding:4px; gap:4px; border:1px solid var(--studio-edge); border-radius:16px; background:var(--sia-surface); margin-bottom:20px; }
.subtitle-studio button { font:650 14px/1.4 Inter,system-ui,sans-serif; cursor:pointer; box-shadow:none; }
.subtitle-studio-tabs button { flex:1; min-width:0; min-height:44px; padding:8px; border:1px solid transparent; border-radius:12px; background:transparent; color:var(--sia-muted); }
.subtitle-studio-tabs button[aria-selected="true"] { background:var(--sia-teal-soft); color:var(--sia-teal-dark); border-color:var(--studio-edge); }
.subtitle-studio [hidden] { display:none!important; }
.subtitle-studio .subtitle-style-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.subtitle-studio .subtitle-style-option { display:flex; flex-direction:column; position:relative; align-items:stretch; gap:8px; padding:8px; min-height:104px; min-width:0; text-align:left; border:1px solid var(--studio-edge); border-radius:14px; background:var(--sia-surface)!important; color:var(--sia-heading); }
.subtitle-studio-mini { display:flex; align-items:center; justify-content:center; height:54px; border-radius:8px; background:linear-gradient(145deg,#263943,#12202b); padding:4px; box-sizing:border-box; overflow:hidden; }
.subtitle-studio-mini span { display:block; padding:2px 4px; border-radius:2px; font-size:13px; line-height:1.3; white-space:nowrap; font-weight:700; }
.subtitle-studio .subtitle-style-option strong { font-size:12px; line-height:1.3; padding:0 2px; }
.subtitle-studio-selected { position:absolute; top:10px; right:10px; display:none; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:var(--sia-teal-dark); color:var(--sia-bg); font-size:11px; }
.subtitle-studio .subtitle-style-option[aria-pressed="true"] .subtitle-studio-selected { display:flex; }
.subtitle-studio .subtitle-style-option[aria-pressed="true"],.subtitle-studio .subtitle-font-option[aria-pressed="true"] { border-color:var(--sia-teal); }
.subtitle-studio .subtitle-font-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.subtitle-studio .subtitle-font-option { min-height:48px; padding:12px; border:1px solid var(--studio-edge); border-radius:14px; background:var(--sia-surface); color:var(--sia-heading); font-size:16px; text-align:left; }
.subtitle-studio-adjust { border-top:1px solid var(--sia-line); margin-top:24px; padding-top:20px; }
.subtitle-studio-label,.subtitle-studio-sliders>label { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.subtitle-studio h3 { font-size:14px; font-weight:700; color:var(--sia-heading); margin:0; }
.subtitle-studio-label button { border:0; background:transparent; padding:4px 0; min-height:32px; color:var(--sia-teal-dark); font-size:12px; }
.subtitle-studio-colors { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:6px; }
.subtitle-studio-colors button { display:flex; align-items:center; justify-content:center; width:100%; min-width:0; height:32px; padding:4px; border:1px solid var(--sia-line-strong); border-radius:9px; background:var(--sia-surface); }
.subtitle-studio-colors button span { width:100%; height:100%; border:1px solid #00000018; border-radius:5px; background:var(--swatch); }
.subtitle-studio-colors button[aria-pressed="true"] { outline:2px solid var(--sia-teal); outline-offset:1px; }
.subtitle-studio-custom { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0 24px; font-size:13px; color:var(--sia-muted); }
.subtitle-studio input[type="text"],.subtitle-studio input:not([type]) { min-width:0; box-sizing:border-box; border:1px solid var(--studio-edge); border-radius:12px; background:var(--sia-surface); color:var(--sia-text); min-height:44px; padding:10px 12px; font:400 14px/1.5 Inter,system-ui,sans-serif; }
.subtitle-studio #subtitle-hex { width:112px; font-variant-numeric:tabular-nums; }
.subtitle-studio-sliders>label { font-size:14px; font-weight:650; color:var(--sia-heading); }
.subtitle-studio output { color:var(--sia-muted); font-size:13px; }
.subtitle-studio input[type="range"] { display:block; width:100%; min-height:32px; padding:0; border:0; background:transparent; accent-color:var(--sia-teal); cursor:pointer; margin:0 0 20px; }
.subtitle-studio-positions { display:flex; gap:8px; }
.subtitle-studio-positions button { flex:1; min-height:44px; padding:8px; border:1px solid var(--studio-edge); border-radius:12px; background:var(--sia-surface); color:var(--sia-text); }
.subtitle-studio-positions button[aria-pressed="true"] { background:var(--sia-teal-soft); color:var(--sia-teal-dark); border-color:var(--sia-teal); }
.subtitle-studio-save>label { display:block; margin-bottom:8px; font-size:14px; font-weight:650; color:var(--sia-heading); }
.subtitle-studio-save>div { display:flex; gap:8px; }
.subtitle-studio-save input { flex:1; width:100%; }
.subtitle-studio [data-save-preset],.subtitle-studio [data-retry] { min-height:44px; border:1px solid var(--studio-edge); border-radius:12px; padding:10px 12px; background:var(--sia-teal-soft); color:var(--sia-teal-dark); }
.subtitle-studio-status,.subtitle-studio-empty { font-size:13px; line-height:1.55; color:var(--sia-muted); }
.subtitle-studio-status:empty { display:none; }
.subtitle-studio-presets { display:grid; gap:8px; margin-top:16px; }
.subtitle-studio-preset { display:flex; align-items:center; gap:8px; border:1px solid var(--studio-edge); border-radius:14px; padding:8px; background:var(--sia-surface); }
.subtitle-studio-preset-apply { display:flex; flex:1; align-items:center; gap:12px; min-width:0; text-align:left; padding:0; border:0; background:transparent; color:var(--sia-heading); }
.subtitle-studio-preset-apply strong { overflow-wrap:anywhere; }
.subtitle-studio-preset-sample { flex:0 0 44px; padding:8px 4px; border-radius:8px; text-align:center; }
.subtitle-studio-remove { min-height:44px; border:0; background:transparent; color:var(--sia-danger); font-size:12px!important; padding:4px; }
.subtitle-studio-dialog :is(button,input):focus-visible { outline:2px solid var(--sia-teal); outline-offset:3px; }
.subtitle-studio-dialog button:disabled { opacity:.6; cursor:wait; }
@media(max-width:760px) {
  body .subtitle-studio-dialog { width:calc(100vw - 32px); min-height:0; max-height:calc(100dvh - 32px); border-radius:20px; }
  .subtitle-studio-dialog .subtitle-style-dialog-head { padding:20px; }
  .subtitle-studio-dialog .subtitle-style-dialog-head h2 { font-size:22px; }
  .subtitle-studio-dialog .subtitle-style-dialog-body { padding:16px; }
  .subtitle-studio-dialog .subtitle-style-dialog-actions { padding:16px; }
  .subtitle-studio { grid-template-columns:1fr; gap:20px; }
  .subtitle-studio-preview { position:static; padding:16px; }
  .subtitle-studio-stage { aspect-ratio:16/8; }
  .subtitle-studio-caption { font-size:calc(20px * var(--subtitle-scale,1)); }
  .subtitle-studio-preview p { margin:10px 0; }
  .subtitle-studio-eyebrow { margin-bottom:10px; }
  .subtitle-studio .subtitle-style-options { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .subtitle-studio .subtitle-style-option { min-height:96px; padding:6px; }
  .subtitle-studio-mini span { font-size:10px; }
  .subtitle-studio .subtitle-style-option strong { font-size:11px; }
  .subtitle-studio-colors { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .subtitle-studio-save>div { flex-wrap:wrap; }
  .subtitle-studio-save input { flex-basis:100%; }
  .subtitle-studio-dialog .subtitle-style-dialog-actions button { flex:1; padding:12px; }
}

.subtitle-studio-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.8; }
.subtitle-studio-image:not([hidden]) ~ .subtitle-studio-stage-scene { display:none; }
.subtitle-studio-caption,.subtitle-studio-mini span,.subtitle-studio-preset-sample { font-synthesis:none; }
.subtitle-studio input[type="range"] { appearance:none; -webkit-appearance:none; }
.subtitle-studio input[type="range"]::-webkit-slider-runnable-track { height:5px; border-radius:999px; background:var(--sia-line-strong); }
.subtitle-studio input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:16px; height:16px; margin-top:-5.5px; border:3px solid var(--sia-surface); border-radius:50%; background:var(--sia-teal); box-shadow:0 0 0 1px var(--sia-teal); }
.subtitle-studio input[type="range"]::-moz-range-track { height:5px; border-radius:999px; background:var(--sia-line-strong); }
.subtitle-studio input[type="range"]::-moz-range-thumb { width:10px; height:10px; border:3px solid var(--sia-surface); border-radius:50%; background:var(--sia-teal); }

/* Saved library: ten styles remain readable inside the shared scrolling dialog. */
.subtitle-studio-library-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 10px; }
.subtitle-studio-library-head h3 { margin:0; font-size:16px; color:var(--sia-heading); }
.subtitle-studio-counter { display:inline-flex; align-items:center; padding:5px 11px; border:1px solid var(--studio-edge); border-radius:999px; background:var(--sia-surface); color:var(--sia-muted); font-size:12px; font-weight:750; font-variant-numeric:tabular-nums; white-space:nowrap; }
.subtitle-studio-counter.is-full { background:var(--sia-teal-soft); color:var(--sia-teal-dark); border-color:var(--sia-teal); }
.subtitle-studio-quota-note { margin:0 0 18px; color:var(--sia-muted); font-size:13px; line-height:1.55; }
.subtitle-studio-presets { grid-template-columns:repeat(2,minmax(0,1fr)); }
.subtitle-studio-preset { gap:6px; min-width:0; }
.subtitle-studio-preset-apply { gap:8px; min-height:64px; }
.subtitle-studio-preset-details { min-width:0; display:grid; gap:4px; }
.subtitle-studio-preset-details strong { font-size:13px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.subtitle-studio-preset-details small { color:var(--sia-muted); font-size:11px; line-height:1.4; overflow-wrap:anywhere; }
.subtitle-studio-remove { flex:0 0 36px; width:36px; display:grid; place-items:center; border-radius:10px; }
.subtitle-studio-remove:hover:not(:disabled) { background:color-mix(in srgb,var(--sia-danger) 9%,var(--sia-surface)); }
.subtitle-studio-dialog button:disabled { cursor:not-allowed; }
.subtitle-studio-presets>.subtitle-studio-empty { grid-column:1/-1; }
@media(max-width:760px) { .subtitle-studio-presets { grid-template-columns:1fr; } .subtitle-studio-preset-apply { min-height:60px; } }

.subtitle-studio-preset:has([aria-pressed="true"]) { border-color:var(--sia-teal); background:color-mix(in srgb,var(--sia-teal-soft) 40%,var(--sia-surface)); }

/* The same stage geometry in every entry context, sized to the chosen video format. */
@media(min-width:761px) {
  .subtitle-studio-stage { width:min(100%,calc(var(--subtitle-preview-ratio,1.777778) * (100dvh - 340px))); margin-inline:auto; }
}