@font-face { font-family: NeocutCaptionSans; src: url('/api/cutter/subtitle-font/sans') format('opentype'); font-display: swap; }
@font-face { font-family: NeocutCaptionSerif; src: url('/api/cutter/subtitle-font/serif') format('opentype'); font-display: swap; }
.subtitle-surface { position: relative; flex-shrink: 0; }
.subtitle-surface video { width: 100%; height: 100%; }
.subtitle-overlay { position: absolute; pointer-events: none; }
.subtitle-overlay span { display: block; width: fit-content; max-width: 100%; white-space: pre; line-height: normal; paint-order: stroke fill; }
.subtitle-settings h2 { font-size: .9375rem; margin-bottom: 1rem; }
.subtitle-settings label { display: block; color: var(--color-muted); font-size: .75rem; margin-block: .75rem .25rem; }
.subtitle-settings select { width: 100%; }
.subtitle-settings textarea { width: 100%; padding: .625rem; border: 1px solid var(--color-line); border-radius: .5rem; background: var(--input-bg); font-family: inherit; font-size: 1rem; resize: vertical; min-height: 5.5rem; }
.subtitle-settings [aria-invalid="true"] { border-color: var(--color-danger); }
.subtitle-chooser { display: grid; gap: .75rem; }
.subtitle-chooser p { color: var(--color-muted); font-size: .8125rem; }
.subtitle-chooser button { min-height: 2.75rem; padding: .625rem; font-size: .8125rem; }
.subtitle-chooser .badge { font-size: .625rem; }
.subtitle-tabs { display: flex; gap: .5rem; border-bottom: 1px solid var(--color-line); margin-bottom: .5rem; }
.subtitle-tabs button { flex: 1; min-height: 2.75rem; padding: .5rem; border: 0; border-bottom: 2px solid transparent; background: transparent; font-size: .8125rem; }
.subtitle-tabs button[aria-selected="true"] { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }
.subtitle-actions, .subtitle-selected-heading, .subtitle-downloads { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.subtitle-selected-heading { font-size: .8125rem; margin-top: .5rem; }
.subtitle-settings .text-button { font-size: .75rem; }
#subtitle-delete { color: var(--color-danger); }
#subtitle-preview { width: 100%; min-height: 2.75rem; padding: .5rem; font-size: .8125rem; }
.subtitle-validation { color: var(--color-danger); font-size: .75rem; margin-block: .5rem; }
.subtitle-validation:empty { display: none; }
.subtitle-list { grid-template-columns: minmax(0, 1fr); min-width: 0; list-style: none; padding: 0; margin-block: .75rem; display: grid; gap: .5rem; }
.subtitle-list button { width: 100%; min-height: 2.75rem; padding: .625rem; text-align: start; border: 1px solid var(--color-line); border-radius: .5rem; background: var(--color-surface); }
.subtitle-list button[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-tint); }
.subtitle-list strong, .subtitle-list span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subtitle-list strong { font-size: .6875rem; color: var(--color-muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.subtitle-list span { margin-top: .25rem; font-size: .8125rem; }
.subtitle-color { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: .5rem; }
.subtitle-color input { width: 100%; min-height: 2.75rem; padding: .375rem; border: 1px solid var(--color-line); border-radius: .375rem; background: var(--input-bg); font-size: .875rem; }
.subtitle-settings input[type="range"] { width: 100%; min-height: 2.75rem; accent-color: var(--color-primary); }
.subtitle-settings .subtitle-check { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--color-text); font-size: .8125rem; }
.subtitle-check input { accent-color: var(--color-primary); width: 1.125rem; height: 1.125rem; }
.subtitle-style-presets { grid-template-columns: minmax(0, 1fr); display: grid; gap: .625rem; margin-top: 1rem; }
.subtitle-style-presets button { min-height: 3.5rem; padding: .75rem .5rem; border: 1px solid var(--color-line); border-radius: .5rem; background: var(--slate-100); text-align: center; }
.subtitle-style-presets span { padding: .125rem .25rem; font-size: .8125rem; paint-order: stroke fill; }
.subtitle-style-presets button[aria-pressed="true"] { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
body[data-page="subtitles"] .cut-filmstrip { display: none; }
body[data-page="subtitles"] .cut-timeline { height: 6.25rem; touch-action: pan-x; }
body[data-page="subtitles"] .cut-overlays { pointer-events: auto; }
.subtitle-region { position: absolute; display: block; text-align: start; top: .25rem; bottom: .25rem; overflow: hidden; padding: .375rem .25rem; border: 1px solid var(--color-primary); border-radius: .25rem; background: var(--color-tint); cursor: grab; touch-action: none; font-size: .6875rem; white-space: nowrap; text-overflow: ellipsis; }
.subtitle-region.is-selected { box-shadow: inset 0 0 0 2px var(--color-primary); }
.subtitle-region:active { cursor: grabbing; }
.subtitle-settings .transform-hint { color: var(--color-muted); font-size: .75rem; margin-top: .5rem; }
body[data-page="subtitles"] .cut-timeline-toolbar .text-button { min-height: 2.75rem; }
body[data-page="subtitles"] .cut-handle { z-index: 4; }
@media (max-width: 899px) { .subtitle-settings { padding-bottom: 8rem; } }
@media (min-width: 900px) {
  .subtitle-settings { height: calc(100svh - var(--editor-header-height) - var(--editor-export-height)); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 2rem; }
}
.subtitle-auto-panel { padding: 1rem; margin-bottom: 1rem; border: 1px solid var(--color-line); border-radius: .75rem; background: var(--color-surface); }
.subtitle-auto-panel h3 { font-size: .9375rem; }
.subtitle-auto-panel .primary-button { width: 100%; min-height: 2.75rem; margin-block: .75rem .25rem; padding: .625rem; font-size: .8125rem; }
.subtitle-auto-panel progress { width: 100%; }
#subtitle-auto-status { font-size: .8125rem; margin-top: .75rem; }
.subtitle-saved-result { padding: 1rem; border: 1px solid var(--color-line); border-radius: .75rem; margin-bottom: 1rem; }
.subtitle-saved-result a { display: inline-block; padding: .75rem; }
.subtitle-grouping { padding: .75rem; margin-block: .75rem; border: 1px solid var(--color-line); border-radius: .625rem; background: var(--slate-50); }
.subtitle-grouping label { margin-top: 0; color: var(--color-text); font-weight: 600; }
.subtitle-grouping output, #subtitle-group-status { font-size: .75rem; color: var(--color-muted); }
.subtitle-grouping .secondary-button { min-height: 2.75rem; padding: .5rem .75rem; font-size: .8125rem; }
#subtitle-group-status.subtitle-validation { color: var(--color-danger); }
.subtitle-actions { flex-wrap: wrap; }
.subtitle-list button.subtitle-reads-fast { border-inline-start: 3px solid var(--color-danger); }
#subtitle-translate-status { font-size: .8125rem; margin-top: .75rem; }

.subtitle-settings, .subtitle-list li { min-width: 0; }
.subtitle-settings { overflow-x: hidden; }
.subtitle-alignment { display: flex; gap: .5rem; margin-bottom: .75rem; }
.subtitle-alignment button { flex: 1; min-width: 0; min-height: 2.75rem; padding: .5rem; font-size: .75rem; }
.subtitle-settings .ai-action { font-size: .8125rem; }
#subtitle-translate { flex: 1 0 100%; margin-block: .5rem; }