body > .tool-page.tool-page--subtitle-editor { width: 100%; max-width: none; margin: 0; padding: 0; }
.tool-page--subtitle-editor [hidden] { display: none !important; }
.sub-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 420px); height: 100%; min-height: 0; text-align: left; font-variant-numeric: tabular-nums; }
.sub-viewer { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sub-stage { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; background: #000; }
.sub-stage video { display: block; width: 100%; height: 100%; object-fit: contain; }
.sub-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 16px; color: #bdbbc8; text-align: center; }
.sub-empty p { margin: 0; }
.sub-video-actions { position: absolute; top: 8px; left: 8px; }
.tool-page--subtitle-editor #sub-choose-video { grid-template-columns: var(--eyy-action-icon-size); justify-content: center; column-gap: 0; width: 36px; min-width: 36px; height: 36px; padding: 0; }
.sub-caption { position: absolute; left: 8%; right: 8%; bottom: 5%; text-align: center; color: #fff; font: 500 clamp(14px, 1.6vw, 22px)/1.35 Inter, sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; pointer-events: none; text-shadow: 0 1px 4px #000, 0 1px 4px #000, 1px 1px 2px #000; }
.sub-transport { flex: none; padding-bottom: 12px; }
.sub-transport-row { display: flex; align-items: center; gap: 10px; margin: 5px 12px 0; }
.tool-page--subtitle-editor #sub-play { flex: 0 0 88px; width: 88px; height: 36px; padding: 6px 8px; }
#sub-time { white-space: nowrap; }
.sub-volume { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sub-volume input { width: 96px; --eyy-range-accent: #76a0ff; }
.sub-volume output { width: 4.5ch; text-align: right; color: #bdbbc8; }
#sub-seek { --eyy-seek-accent: #76a0ff; }
.sub-editor { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; padding: 12px 8px; border-left: 2px solid var(--eyy-border, #101010); }
.sub-header { flex: none; padding-bottom: 10px; border-bottom: 2px solid var(--eyy-border, #101010); }
.sub-header h1 { margin: 0; font-size: 1rem; }
.sub-header p { margin: 6px 0 0; color: #bdbbc8; }
.sub-imports { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; }
.sub-track { display: grid; gap: 6px; min-width: 0; padding-bottom: 10px; }
.sub-list-heading { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 2px solid var(--eyy-border, #101010); }
.sub-list-heading span { color: #bdbbc8; }
.sub-list-wrap { position: relative; flex: 1 1 0; min-height: 0; min-width: 0; }
.sub-list { height: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #45454f transparent; }
.sub-list-empty { margin: 4px 0; color: #bdbbc8; }
.sub-cue { display: grid; gap: 6px; padding: 8px 0 10px; border-top: 2px solid #1e1e1e; }
.sub-cue:first-child { border-top: 0; padding-top: 0; }
.sub-cue.active { border-color: #768fff; }
.sub-cue-head { display: flex; align-items: center; gap: 6px; }
.sub-cue-head strong { flex: 1; }
.sub-cue-head button { flex: none; }
.sub-times { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.sub-time-field { display: grid; grid-template-columns: minmax(0, 1fr) 36px; min-width: 0; gap: 4px; }
.sub-time-field input { min-width: 0; width: 100%; font-variant-numeric: tabular-nums; }
.sub-time-field button { width: 36px; min-width: 0; padding: 0; }
.sub-cue textarea { box-sizing: border-box; width: 100%; min-width: 0; min-height: 58px; resize: vertical; }
.sub-export { display: grid; grid-template-columns: minmax(96px, .65fr) minmax(0, 1fr); gap: 8px; align-items: end; flex: none; padding-top: 8px; border-top: 2px solid var(--eyy-border, #101010); }
.sub-format { display: grid; gap: 6px; min-width: 0; }
.tool-page--subtitle-editor .sub-workspace button:not(.default) { min-height: 36px; font: inherit; }
.tool-page--subtitle-editor .sub-workspace button:disabled { opacity: .46; cursor: default; }
.sub-drop { position: fixed; inset: 52px 10px 10px; z-index: 990; display: flex; align-items: center; justify-content: center; border: 2px dashed #76a0ff; border-radius: 10px; background: #0a1020ee; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 140ms ease, visibility 140ms; }
.sub-workspace.is-dragging .sub-drop { opacity: 1; visibility: visible; }
@media (max-width: 760px) { .sub-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(150px, 36%) minmax(0, 1fr); } .sub-editor { padding: 8px 18px 8px 6px; border: 0; border-top: 2px solid var(--eyy-border, #101010); } }
@media (max-width: 400px) { .sub-transport-row { gap: 6px; margin-inline: 6px; } .sub-volume { gap: 4px; min-width: 0; } .sub-volume input { width: 48px; min-width: 32px; } }
@media (max-width: 330px) { .sub-transport-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); } .sub-volume { grid-column: 1 / -1; justify-self: end; margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .sub-drop { transition: none; } }
.tool-page--subtitle-editor .sub-cue-head button[data-icon], .tool-page--subtitle-editor .sub-time-field button[data-icon] { grid-template-columns: var(--eyy-action-icon-size); justify-content: center; column-gap: 0; width: 36px; min-width: 36px; padding: 0; }
.sub-more { width: 100%; margin: 8px 0; }
.sub-time-field input[aria-invalid="true"] { border-color: #ed7f96; }
.sub-time-group { display: grid; gap: 4px; min-width: 0; }
.sub-time-group > span { color: #bdbbc8; }