.subtitle-shell {
  --subtitle-line: color-mix(in srgb, var(--border, #d9d0c4) 82%, transparent);
  --subtitle-soft: color-mix(in srgb, var(--primary, #8f241b) 7%, var(--surface, #fff));
  --subtitle-code: color-mix(in srgb, var(--surface-2, #f4efe7) 78%, var(--surface, #fff));
  --subtitle-warn: color-mix(in srgb, var(--warning, #9a6500) 11%, var(--surface, #fff));
  min-width: 0;
  color: var(--text, #251f1b);
}

.subtitle-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.subtitle-head h2,
.subtitle-head p,
.subtitle-panel h3,
.subtitle-panel p {
  margin: 0;
}

.subtitle-head p {
  max-width: 70ch;
  margin-top: 6px;
  color: var(--muted, #6f655d);
  line-height: 1.65;
}

.subtitle-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--primary, #8f241b);
  font: 800 0.68rem/1.2 var(--mono, ui-monospace, monospace);
  letter-spacing: .12em;
}

.subtitle-badge {
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--primary, #8f241b) 25%, var(--subtitle-line));
  border-radius: 999px;
  background: var(--subtitle-soft);
  color: var(--primary, #8f241b);
  font: 800 .72rem/1 var(--mono, ui-monospace, monospace);
  white-space: nowrap;
}

.subtitle-workbench,
.subtitle-output-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.subtitle-output-grid {
  margin-top: 14px;
}

.subtitle-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--subtitle-line);
  border-radius: var(--radius-sm, 12px);
  background: linear-gradient(180deg, var(--subtitle-soft), transparent 78px), var(--surface, #fff);
}

.subtitle-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin-bottom: 9px;
}

.subtitle-panel-head small {
  color: var(--muted, #6f655d);
  font: 650 .7rem/1.4 var(--mono, ui-monospace, monospace);
  text-align: end;
}

.subtitle-field,
.subtitle-file,
.subtitle-options label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.subtitle-field > span,
.subtitle-file > span,
.subtitle-options label > span {
  color: var(--text, #251f1b);
  font-size: .82rem;
  font-weight: 800;
}

.subtitle-field textarea,
.subtitle-output-grid textarea {
  width: 100%;
  min-width: 0;
  min-height: 260px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--subtitle-line);
  border-radius: var(--radius-sm, 12px);
  background: var(--surface, #fff);
  color: var(--text, #251f1b);
  font: 500 .79rem/1.6 var(--mono, ui-monospace, monospace);
  resize: vertical;
  tab-size: 2;
}

.subtitle-output-grid textarea {
  min-height: 310px;
  background: var(--subtitle-code);
}

.subtitle-field textarea:focus-visible,
.subtitle-output-grid textarea:focus-visible,
.subtitle-options :where(input, select):focus-visible,
.subtitle-file input:focus-visible,
.subtitle-shell button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary, #8f241b) 38%, transparent);
  outline-offset: 2px;
}

.subtitle-file {
  margin-top: 12px;
  padding: 10px;
  border: 1px dashed var(--subtitle-line);
  border-radius: var(--radius-sm, 12px);
  background: color-mix(in srgb, var(--surface-2, #f4efe7) 68%, transparent);
}

.subtitle-file input {
  max-width: 100%;
  color: var(--muted, #6f655d);
  font-size: .78rem;
}

.subtitle-note {
  margin-top: 10px !important;
  color: var(--muted, #6f655d);
  font-size: .78rem;
  line-height: 1.55;
}

.subtitle-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr)) minmax(260px, 1.8fr);
  gap: 12px;
  align-items: end;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--subtitle-line);
  border-radius: var(--radius-sm, 12px);
  background: var(--surface-2, #f4efe7);
}

.subtitle-options :where(input, select) {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--subtitle-line);
  border-radius: var(--radius-sm, 12px);
  background: var(--surface, #fff);
  color: var(--text, #251f1b);
}

.subtitle-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.subtitle-shell button {
  min-height: 44px;
}

.subtitle-job {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(120px, 260px) auto;
  gap: 10px 14px;
  align-items: center;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--subtitle-line);
  border-radius: var(--radius-sm, 12px);
  background: var(--surface, #fff);
}

.subtitle-job > div:first-child {
  display: grid;
  gap: 2px;
}

.subtitle-job strong {
  color: var(--text, #251f1b);
  font-size: .82rem;
}

.subtitle-job span,
.subtitle-job p {
  color: var(--muted, #6f655d);
  font-size: .75rem;
}

.subtitle-job p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.subtitle-job progress {
  width: 100%;
  accent-color: var(--primary, #8f241b);
}

.subtitle-status {
  min-width: 0;
  color: var(--muted, #6f655d);
  font-size: .75rem;
  overflow-wrap: anywhere;
}

.subtitle-status[data-tone="error"] {
  color: var(--danger, #a42b25);
}

.subtitle-status[data-tone="success"] {
  color: var(--success, #277054);
}

.subtitle-status[data-tone="warning"] {
  color: var(--warning, #8b5a00);
}

.subtitle-preview {
  min-height: 260px;
  max-height: 560px;
  overflow: auto;
  border: 1px solid var(--subtitle-line);
  border-radius: var(--radius-sm, 12px);
  background: var(--subtitle-code);
  scrollbar-gutter: stable;
}

.subtitle-empty,
.subtitle-issue-ok,
.subtitle-preview-limit {
  margin: 0;
  padding: 20px;
  color: var(--muted, #6f655d);
  font-size: .78rem;
  line-height: 1.6;
  text-align: center;
}

.subtitle-cue-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 10px 10px 10px 34px;
}

.subtitle-cue-card {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--subtitle-line);
  border-radius: 9px;
  background: var(--surface, #fff);
}

.subtitle-cue-card code {
  display: block;
  margin-bottom: 5px;
  color: var(--primary, #8f241b);
  font-size: .68rem;
}

.subtitle-cue-card p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text, #251f1b);
  font-size: .8rem;
  line-height: 1.55;
}

.subtitle-issues {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--subtitle-line);
  border-radius: var(--radius-sm, 12px);
  background: var(--surface, #fff);
  color: var(--text, #251f1b);
  font-size: .76rem;
  line-height: 1.55;
}

.subtitle-issues ul {
  display: grid;
  gap: 4px;
  margin: 7px 0 0;
  padding-inline-start: 20px;
}

.subtitle-issues li {
  overflow-wrap: anywhere;
}

.subtitle-issues:has(ul) {
  background: var(--subtitle-warn);
}

@media (max-width: 860px) {
  .subtitle-workbench,
  .subtitle-output-grid {
    grid-template-columns: 1fr;
  }

  .subtitle-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .subtitle-options .subtitle-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .subtitle-job {
    grid-template-columns: 1fr 1fr;
  }

  .subtitle-job > p,
  .subtitle-job > progress,
  .subtitle-job > .subtitle-status {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .subtitle-head {
    display: grid;
  }

  .subtitle-badge {
    justify-self: start;
  }

  .subtitle-options {
    grid-template-columns: 1fr;
  }

  .subtitle-options .subtitle-actions {
    grid-column: auto;
  }

  .subtitle-actions {
    justify-content: stretch;
  }

  .subtitle-actions button {
    flex: 1 1 120px;
  }

  .subtitle-job {
    grid-template-columns: 1fr;
  }

  .subtitle-job > p,
  .subtitle-job > progress,
  .subtitle-job > .subtitle-status {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .subtitle-shell *,
  .subtitle-shell *::before,
  .subtitle-shell *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}