:root {
  --bg: #0a0d12;
  --panel: #11161e;
  --panel-2: #161c25;
  --line: #27313e;
  --text: #f4f5f7;
  --muted: #929dac;
  --accent: #79e6c2;
  --accent-strong: #35c89a;
  --good: #54d6a6;
  --warning: #f4ba5e;
  --problem: #f36f7c;
  --shadow: 0 28px 80px rgba(0, 0, 0, .32);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: radial-gradient(circle at 75% -10%, #15352e 0, transparent 30rem), var(--bg); min-height: 100vh; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .46; cursor: default; }

.topbar { height: 76px; padding: 0 max(24px, calc((100vw - 1240px) / 2)); display: flex; align-items: center; gap: 13px; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(10,13,18,.78); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 20; }
.brand-mark { width: 42px; height: 42px; flex: none; padding: 5px; border-radius: 12px; background: #f5f1ff; display: grid; place-items: center; box-shadow: 0 0 22px rgba(115,96,185,.18); }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.topbar h1 { font-size: 17px; margin: 0; letter-spacing: .01em; }
.topbar p { color: var(--muted); font-size: 12px; margin: 2px 0 0; }
.local-pill { margin-left: auto; color: #c7d0dc; border: 1px solid var(--line); padding: 7px 11px; border-radius: 999px; font-size: 12px; }
.local-pill span { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 12px var(--good); }
.topbar-projects { height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid #415164; border-radius: 8px; color: #e2e9f0; background: #17212b; font-size: 12px; font-weight: 700; white-space: nowrap; }
.topbar-projects:hover { border-color: var(--accent); }
.topbar-projects svg { width: 17px; height: 17px; }
.topbar-project-menu { position: relative; flex: none; }
.topbar-project-menu > summary { list-style: none; cursor: pointer; }
.topbar-project-menu > summary::-webkit-details-marker { display: none; }
.topbar-project-menu[open] > summary { border-color: var(--accent); }
.topbar-project-panel { position: absolute; z-index: 50; top: calc(100% + 8px); right: 0; width: min(350px, calc(100vw - 24px)); padding: 11px; border: 1px solid #3a4858; border-radius: 12px; background: #101720; box-shadow: 0 18px 45px rgba(0,0,0,.48); }
.topbar-project-panel > strong { display: block; margin: 1px 4px 8px; font-size: 12px; }
.topbar-project-list { max-height: min(55vh, 450px); overflow-y: auto; }
.topbar-project-list > small { display: block; padding: 10px 5px; }
.topbar-project-item { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; color: #e2e9f0; background: transparent; text-align: left; }
.topbar-project-item:hover:not(:disabled), .topbar-project-item.current { background: rgba(121,230,194,.1); }
.topbar-project-item:disabled { opacity: .48; cursor: default; }
.topbar-project-item strong, .topbar-project-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-project-item strong { font-size: 12px; }
.topbar-project-item small { margin-top: 2px; }
.topbar-project-panel > button { width: 100%; margin-top: 8px; padding: 10px; border: 1px solid #3a4858; border-radius: 8px; color: var(--accent); background: #17212b; text-align: left; font-size: 12px; font-weight: 700; }
.topbar-project-panel > button:hover { border-color: var(--accent); }
.topbar-editor-actions { display: none; align-items: center; gap: 10px; }
body:has(#editorSection:not(.hidden)) .topbar-editor-actions { display: flex; }
.topbar-editor-actions .autosave-state { max-width: 160px; margin-left: 0; overflow: hidden; text-overflow: ellipsis; }

main { max-width: 1240px; margin: 0 auto; padding: 64px 24px 100px; }
.hero { display: grid; grid-template-columns: minmax(280px, .82fr) minmax(520px, 1.18fr); gap: 64px; align-items: start; }
.hero-copy { padding-top: 40px; position: sticky; top: 116px; }
.eyebrow { color: var(--accent); letter-spacing: .18em; font-size: 11px; font-weight: 800; margin: 0 0 14px; }
.hero h2, .editor-header h2 { letter-spacing: -.04em; margin: 0; }
.hero h2 { font-size: clamp(40px, 5vw, 68px); line-height: .99; max-width: 660px; }
.hero-copy > p:not(.eyebrow) { color: #aab3bf; max-width: 570px; font-size: 16px; line-height: 1.7; margin-top: 27px; }
.setup-inline-status { display: flex; align-items: flex-start; gap: 12px; margin-top: 22px; padding: 15px; max-width: 520px; border: 1px solid rgba(121,230,194,.34); border-radius: 12px; background: #15232a; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.setup-inline-status .status-spinner { width: 23px; height: 23px; border-width: 2px; }
.setup-inline-copy { flex: 1; min-width: 0; }
.setup-inline-copy strong, .setup-inline-copy small { display: block; overflow-wrap: anywhere; }
.setup-inline-copy strong { font-size: 13px; }
.setup-inline-copy small { margin-top: 4px; max-height: 6em; overflow-y: auto; }
.setup-inline-copy .progress-track { margin-top: 11px; }

.setup-card { background: linear-gradient(145deg, rgba(24,31,41,.98), rgba(15,20,28,.98)); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; padding: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; box-shadow: var(--shadow); }
.setup-card.is-busy input:disabled, .setup-card.is-busy textarea:disabled, .setup-card.is-busy select:disabled { opacity: .62; cursor: default; }
.setup-card.is-busy .drop-zone { opacity: .62; cursor: default; }
.setup-card.is-busy .drop-zone:hover { border-color: #3c4958; background: rgba(6,10,14,.35); }
.field { min-width: 0; }
.field.full, .initial-text.full, .primary-button.full, .restore-project.full, .project-library.full { grid-column: 1 / -1; }
label, .details-body > label { display: block; color: #dce1e8; font-size: 13px; font-weight: 680; margin-bottom: 8px; }
small { color: var(--muted); font-size: 11px; line-height: 1.5; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #0d1218; color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s; }
input, select { height: 44px; padding: 0 12px; }
textarea { padding: 12px; line-height: 1.5; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent-strong); box-shadow: 0 0 0 3px rgba(53,200,154,.12); }
.secret-field { position: relative; }
.secret-field input { padding-right: 48px; }
.icon-button { position: absolute; right: 5px; top: 5px; width: 34px; height: 34px; background: transparent; border: 0; color: var(--muted); }
.field > small { display: block; margin-top: 6px; }
.auth-row { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 9px; }
.auth-row button, .auth-state button { min-width: 100px; height: 44px; padding: 0 14px; border: 1px solid rgba(121,230,194,.32); border-radius: 10px; background: rgba(53,200,154,.13); color: var(--accent); font-weight: 750; }
.auth-state { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 9px 7px 13px; border: 1px solid rgba(121,230,194,.25); border-radius: 10px; background: rgba(53,200,154,.08); color: #dff9f0; font-size: 13px; }
.auth-state span { display: flex; align-items: center; gap: 8px; }
.auth-state b { color: var(--accent); }
.restore-project { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 14px; border: 1px solid rgba(121,230,194,.28); border-radius: 11px; background: rgba(53,200,154,.08); }
.restore-project > div { display: flex; flex-direction: column; gap: 3px; }
.restore-project button { flex: none; min-height: 38px; padding: 0 13px; border: 1px solid rgba(121,230,194,.32); border-radius: 8px; background: rgba(53,200,154,.13); color: var(--accent); font-weight: 750; }
.project-library { border: 1px solid rgba(121,230,194,.28); border-radius: 12px; background: rgba(53,200,154,.055); }
.project-library > summary { min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; list-style: none; cursor: pointer; }
.project-library > summary::-webkit-details-marker { display: none; }
.project-library > summary::before { content: "+"; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid rgba(121,230,194,.34); border-radius: 7px; color: var(--accent); font-weight: 850; }
.project-library[open] > summary::before { content: "−"; }
.project-library > summary > span { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.project-library > summary > b { min-width: 30px; padding: 5px 8px; border-radius: 999px; color: #07110e; background: var(--accent); text-align: center; font-size: 11px; }
.project-library-body { padding: 0 12px 12px; border-top: 1px solid rgba(121,230,194,.15); }
.project-library-actions { display: flex; align-items: center; gap: 12px; padding: 12px 2px 10px; }
.project-library-actions span { flex: 1; color: var(--muted); font-size: 11px; }
.project-library-actions button, .project-card button { min-height: 34px; padding: 0 11px; border: 1px solid #344657; border-radius: 8px; color: #dce5ee; background: #121a23; font-size: 11px; font-weight: 700; }
.project-list { display: grid; gap: 7px; max-height: 390px; overflow: auto; }
.project-empty { padding: 18px; border: 1px dashed #34404e; border-radius: 9px; color: var(--muted); text-align: center; font-size: 12px; }
.project-card { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid #293746; border-radius: 10px; background: rgba(11,16,23,.8); }
.project-card-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.project-card-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.project-card-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-card-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 5px; }
.project-card .open-project { color: #07110e; border-color: var(--accent); background: var(--accent); }
.project-card .delete-project { color: #f5a9b1; border-color: rgba(243,111,124,.35); }

.drop-zone { min-height: 138px; border: 1px dashed #3c4958; border-radius: 13px; background: rgba(6,10,14,.35); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; margin: 0; transition: .16s; }
.drop-zone:hover, .drop-zone.drag { border-color: var(--accent); background: rgba(121,230,194,.05); }
.drop-zone input { display: none; }
.drop-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(121,230,194,.11); color: var(--accent); font-size: 19px; }
.drop-zone strong { font-size: 13px; max-width: 85%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-source-field { display: flex; flex-direction: column; gap: 12px; }
.media-source-field > label { margin-bottom: -2px; }
.media-source-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: rgba(7,11,16,.42); }
.media-source-tabs label { margin: 0; cursor: pointer; }
.media-source-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.media-source-tabs span { min-height: 40px; display: grid; place-items: center; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); font-size: 12px; font-weight: 750; text-align: center; transition: .15s; }
.media-source-tabs input:checked + span { color: #08120f; border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 2px rgba(121,230,194,.08); }
.media-source-tabs input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.youtube-source { padding: 16px; border: 1px solid rgba(121,230,194,.22); border-radius: 12px; background: rgba(53,200,154,.045); }
.youtube-source > small { display: block; margin-top: 10px; }
.rights-confirmation { margin-top: 10px; }
.check-field { display: flex; align-items: end; }
.check-row { min-height: 44px; display: flex; align-items: center; gap: 10px; margin: 0; padding: 5px 0; }
.check-row input, .mode-row input { width: 17px; height: 17px; accent-color: var(--accent-strong); flex: none; }
.check-row span { display: flex; flex-direction: column; gap: 2px; }
.check-row strong { font-size: 13px; }
.subtitle-limits { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 170px 150px; gap: 14px; align-items: end; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(7,11,16,.3); }
.subtitle-limits > div { display: flex; flex-direction: column; gap: 3px; align-self: center; }
.subtitle-limits > div strong { font-size: 13px; }
.subtitle-limits label, .inline-limits label { margin: 0; }
.subtitle-limits label span, .inline-limits label span { color: var(--muted); display: block; margin-bottom: 5px; font-size: 10px; font-weight: 650; }
.initial-text { border-top: 1px solid var(--line); padding-top: 17px; }
.initial-text summary { color: #d6dce4; font-size: 13px; cursor: pointer; }
.initial-text summary span { color: var(--muted); font-size: 11px; margin-left: 5px; }
.details-body { padding-top: 17px; }
#sonioxContextPanel.has-context { border-color: var(--warning); }
#sonioxContextPanel.has-context summary span { color: var(--warning); }
.context-clear { display: block; margin-top: 10px; padding: 7px 11px; border: 1px solid #435669; border-radius: 6px; color: #dfe6ed; background: #172632; cursor: pointer; }
.mode-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 11px; }
.mode-row label { display: flex; gap: 7px; align-items: center; color: var(--muted); font-weight: 500; margin: 0; }
.initial-input-modes { gap: 8px; margin: 0 0 13px; }
.initial-input-modes label { min-height: 36px; padding: 7px 10px; border: 1px solid #34404e; border-radius: 8px; background: #151c25; color: #d8e0e8; cursor: pointer; font-size: 12px; }
.initial-input-modes label:has(input:checked) { border-color: rgba(121,230,194,.65); background: rgba(53,200,154,.12); color: var(--accent); }
.initial-input-modes label:has(input:disabled) { opacity: .42; cursor: not-allowed; }
.initial-file-badge { display: flex; align-items: center; gap: 9px; width: fit-content; max-width: 100%; margin: 7px 0 11px; padding: 7px 8px 7px 10px; border: 1px solid rgba(121,230,194,.32); border-radius: 8px; background: rgba(53,200,154,.08); color: #dfe9e6; font-size: 12px; }
.initial-file-badge #initialFileName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.initial-file-icon { color: var(--accent); font-size: 17px; }
.initial-file-badge button { flex: none; width: 22px; height: 22px; border: 0; border-radius: 5px; background: transparent; color: #acb9c4; font-size: 17px; cursor: pointer; }
.initial-file-badge button:hover { background: rgba(255,255,255,.1); color: white; }
#initialInputHelp { display: block; margin-top: 8px; }
.primary-button { border: 0; border-radius: 12px; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; color: #07120e; background: var(--accent); font-weight: 800; }
.primary-button:hover { background: #91efd0; transform: translateY(-1px); }
.primary-button:disabled { opacity: .45; cursor: default; transform: none; }
.primary-button:disabled:hover { background: var(--accent); }

.hidden { display: none !important; }
.status-card { margin: 45px auto 0; max-width: 780px; padding: 25px 28px; display: flex; gap: 20px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.status-spinner { width: 35px; height: 35px; border: 3px solid #26313d; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
.status-spinner.done { animation: none; border-color: var(--good); position: relative; }
.status-spinner.error { animation: none; border-color: var(--problem); }
#statusDetail { display: block; margin-top: 8px; color: var(--muted); overflow-wrap: anywhere; }
#retryJobStatus { margin-top: 10px; align-self: flex-start; }
@keyframes spin { to { transform: rotate(360deg); } }
.status-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.status-copy strong { font-size: 15px; }
.status-copy span { color: var(--muted); font-size: 12px; }
.progress-track { margin-top: 7px; height: 3px; background: #26313d; overflow: hidden; border-radius: 5px; }
.progress-track div { height: 100%; width: 16%; background: var(--accent); transition: width .25s; }

.editor-section { margin-top: 10px; }
.editor-header { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 25px; }
.editor-header h2 { font-size: 36px; }
.summary { display: flex; gap: 8px; flex-wrap: wrap; justify-content: end; }
.summary span { background: var(--panel); border: 1px solid var(--line); color: #bbc4d0; border-radius: 999px; padding: 7px 11px; font-size: 11px; }
.summary strong { color: white; }
.toolbar { position: sticky; top: 76px; z-index: 10; display: flex; gap: 8px; align-items: center; padding: 12px; background: rgba(17,22,30,.94); backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 12px 35px rgba(0,0,0,.22); }
.toolbar button, .text-tools button, .utility-panel button, .media-workbench button { height: 36px; padding: 0 12px; border-radius: 8px; color: #d7dde5; border: 1px solid #34404e; background: #151c25; font-size: 12px; font-weight: 650; }
.toolbar button:hover, .text-tools button:hover, .utility-panel button:hover, .media-workbench button:hover { border-color: #526174; }
.toolbar button.is-active { color: #08120f; border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 2px rgba(121,230,194,.1); }
.toolbar button:disabled, .text-tools button:disabled, .utility-panel button:disabled, .media-workbench button:disabled { opacity: .42; cursor: default; border-color: #29333f; }
.autosave-state { color: #83909f; font-size: 10px; white-space: nowrap; }
.autosave-state.saving { color: var(--warning); }.autosave-state.saved { color: var(--good); }.autosave-state.error { color: var(--problem); }
.toolbar-spacer { flex: 1; }
.primary-small { background: rgba(53,200,154,.14) !important; color: var(--accent) !important; border-color: rgba(121,230,194,.28) !important; }
.export-button { background: var(--accent) !important; color: #08120f !important; border-color: var(--accent) !important; }
.export-menu, .history-menu { position: relative; flex: none; }
.export-menu > summary { display: flex; align-items: center; height: 36px; padding: 0 12px; border: 1px solid var(--accent); border-radius: 8px; font-size: 12px; font-weight: 700; list-style: none; cursor: pointer; }
.export-menu > summary::-webkit-details-marker { display: none; }
.export-menu > div { position: absolute; z-index: 40; top: calc(100% + 7px); right: 0; display: grid; gap: 5px; width: 230px; padding: 7px; border: 1px solid #3a4858; border-radius: 10px; background: #101720; box-shadow: 0 18px 45px rgba(0,0,0,.48); }
.export-menu > div button { width: 100%; text-align: left; }
.history-menu > summary { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 11px; border: 1px solid #34404e; border-radius: 8px; color: #d7dde5; background: #151c25; font-size: 12px; font-weight: 650; list-style: none; cursor: pointer; }
.history-menu > summary::-webkit-details-marker { display: none; }
.history-menu > summary span { min-width: 20px; padding: 2px 5px; border-radius: 999px; color: var(--accent); background: rgba(121,230,194,.1); text-align: center; font-size: 9px; }
.history-menu > div { position: absolute; z-index: 45; top: calc(100% + 7px); left: 0; width: min(330px, 75vw); max-height: 330px; overflow: auto; padding: 7px; border: 1px solid #3a4858; border-radius: 10px; background: #101720; box-shadow: 0 18px 45px rgba(0,0,0,.48); }
.topbar-editor-actions .history-menu > div { left: auto; right: 0; }
.history-entry { width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border: 0; border-radius: 7px; color: #dce3eb; background: transparent; text-align: left; }
.history-entry:hover { background: rgba(121,230,194,.08); }
.history-entry small { color: var(--muted); }
.language-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; min-width: 0; }
.language-tabs { display: flex; flex: 1; min-width: 0; align-items: center; gap: 7px; padding: 8px; overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; background: rgba(11,16,23,.82); }
.language-tabs:empty { display: none; }
.language-import-actions { display: flex; flex: none; align-items: center; gap: 6px; }
.language-import-actions button { min-height: 36px; padding: 0 10px; border: 1px solid #34404e; border-radius: 8px; color: #cbd6e0; background: #151c25; font-size: 11px; font-weight: 650; white-space: nowrap; }
.language-import-actions button:hover { border-color: #526174; }
.language-tab-item { display: inline-flex; flex: none; align-items: center; gap: 2px; }
.language-tab { flex: none; min-height: 34px; padding: 0 12px; border: 1px solid #34404e; border-radius: 999px; color: #b8c2ce; background: #121922; font-size: 11px; font-weight: 750; }
.language-tab:hover { border-color: #536174; }
.language-tab.is-active { color: #07110e; border-color: var(--accent); background: var(--accent); }
.language-tab-remove { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; color: #748192; background: transparent; font-size: 17px; line-height: 1; }
.language-tab-remove:hover { color: #fff; background: rgba(225,85,95,.22); }
.language-layer-warning { margin-top: 8px; padding: 9px 12px; border: 1px solid rgba(244,186,94,.35); border-radius: 8px; color: #f3ca85; background: rgba(244,186,94,.07); font-size: 11px; }
.text-tools { margin-top: 12px; border: 1px solid var(--line); background: var(--panel); border-radius: 13px; padding: 18px; }
.text-tools-head { display: flex; justify-content: space-between; gap: 20px; align-items: start; margin-bottom: 12px; }
.text-tools-head div { display: flex; flex-direction: column; gap: 3px; }
.link-status { color: var(--warning); }
.link-status.linked { color: var(--good); }
.help-title { position: relative; display: inline-flex; width: fit-content; align-items: center; cursor: help; outline: none; }
.help-title:hover::before, .help-title:focus::before { content: attr(data-help); position: absolute; z-index: 70; top: calc(100% + 9px); left: 0; width: max-content; max-width: min(440px, 78vw); padding: 9px 11px; border: 1px solid #4b5c6e; border-radius: 8px; background: #18222d; color: #edf2f6; font: 11px/1.45 system-ui, sans-serif; box-shadow: 0 12px 34px rgba(0,0,0,.48); pointer-events: none; }
.help-title:focus { border-radius: 4px; box-shadow: 0 0 0 2px rgba(121,230,194,.16); }
.text-tools-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; margin-top: 10px; }
.editor-tool-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.text-tools .editor-tool-tab { height: 35px; padding: 0 12px; border-radius: 8px; white-space: nowrap; }
.text-tools .editor-tool-tab.is-active { border-color: var(--accent); background: rgba(53,200,154,.16); color: var(--accent); }
.editor-tool-panel { margin-bottom: 12px; }
.editor-tool-panel:not([open]) { display: none; }
.find-replace-panel.editor-tool-panel > summary { display: none; }
.editor-tool-panel > .find-replace-body { margin-top: 0; padding-top: 0; border-top: 0; }
.find-replace-panel { margin: 0 0 12px; padding: 13px 14px; border: 1px solid #283543; border-radius: 10px; background: rgba(7,11,16,.42); }
.find-replace-panel > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; color: #dce4ed; }
.find-replace-panel > summary::-webkit-details-marker { display: none; }
.find-replace-panel > summary::before { content: "+"; display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid #3b4a5a; border-radius: 6px; color: var(--accent); font-weight: 800; }
.find-replace-panel[open] > summary::before { content: "−"; }
.find-replace-panel > summary small { margin-left: auto; color: var(--muted); }
.find-replace-body { margin-top: 12px; padding-top: 12px; border-top: 1px solid #26323f; }
.compact-panel-head { align-items: center; margin-bottom: 10px; }
.find-replace-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 10px; }
.find-replace-head output { flex: none; min-width: 112px; color: var(--accent); font-size: 11px; text-align: right; }
.find-replace-grid { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto auto; gap: 9px; align-items: end; }
.find-replace-grid label { margin: 0; }
.find-replace-grid label span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.find-replace-grid input { height: 36px; }
.find-replace-utilities { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #26323f; }
.find-replace-utilities small { margin-right: auto; }
.find-navigation, .find-actions { display: flex; gap: 6px; }
.find-navigation button, .find-actions button { white-space: nowrap; }
.work-text-editor { position: relative; }
.work-text-with-times { position: relative; display: flex; align-items: stretch; min-width: 0; }
.work-text-editor #workText { display: block; min-width: 0; flex: 1; }
.work-text-timing-gutter { flex: 0 0 218px; overflow: hidden; height: 205px; padding: 12px 4px 12px 0; border: 1px solid var(--line); border-right: 0; border-radius: 10px 0 0 10px; background: #111b20; box-sizing: border-box; }
.work-text-timing-gutter.hidden { display: none; }
.work-text-timing-row { display: flex; align-items: center; gap: 2px; padding: 0 3px; border-radius: 4px; }
.work-text-timing-row.selected { background: rgba(121,230,194,.12); }
.work-text-timing-row.is-problem { background: rgba(243,111,124,.22); box-shadow: inset 3px 0 #f36f7c; }
.work-text-timing-row.is-warning:not(.is-problem) { background: rgba(244,186,94,.13); }
.work-text-timing-row.is-find-match { background: rgba(248,194,83,.33); box-shadow: inset 4px 0 #f8c65c, 0 0 0 1px rgba(248,194,83,.55); }
.work-text-timing-row input { width: 94px; height: 18px; min-width: 0; padding: 0 2px; border: 0; border-radius: 2px; background: transparent; color: #a6c6bf; font: 10px/1 monospace; }
.work-text-timing-row.is-problem input { color: #ffb2bb; }
.work-text-timing-row.is-find-match input { color: #fff2c5; background: rgba(82,51,8,.72); font-weight: 750; }
.work-text-timing-row span { color: var(--muted); font-size: 10px; }
.timing-toggle { padding: 4px 7px; font-size: 10px; color: var(--muted); }
.work-text-with-times:has(.work-text-timing-gutter:not(.hidden)) #workText { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.export-status { margin-top: 8px; padding: 8px 10px; border: 1px solid rgba(244,186,94,.32); border-radius: 8px; background: rgba(244,186,94,.08); color: var(--warning); font-size: 11px; }
#workText.has-active-line { background-image: linear-gradient(rgba(121,230,194,.13), rgba(121,230,194,.13)); background-repeat: no-repeat; background-position: 0 var(--active-line-y, -100px); background-size: 100% var(--active-line-height, 22px); }
.find-highlight-viewport { position: absolute; z-index: 1; overflow: hidden; pointer-events: none; }
.find-highlight-content { box-sizing: border-box; color: transparent; }
.find-highlight-content .find-highlight-match { color: #17120b; background: #f8c65c; border-radius: 2px; box-shadow: 0 0 0 2px rgba(248,198,92,.46); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.selection-translate-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding: 8px 10px; border: 1px solid rgba(121,230,194,.3); border-radius: 9px; background: rgba(53,200,154,.08); color: #cfe8df; font-size: 11px; }
.selection-translate-bar button { flex: 0 0 auto; }
.work-controls { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-top: 10px; }
.inline-limits { display: flex; gap: 8px; }
.inline-limits input { width: 96px; height: 36px; }
.inline-limits select { width: 86px; height: 36px; }
.work-controls .text-tools-actions { margin-top: 0; }
.media-workbench, .utility-panel { margin-top: 12px; border: 1px solid var(--line); background: var(--panel); border-radius: 13px; padding: 18px; }
.panel-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 13px; }
.panel-head > div { display: flex; flex-direction: column; gap: 3px; }
.panel-head strong { font-size: 13px; }
.panel-head button { flex: none; }
.zoom-control { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 11px; }
.zoom-control span { white-space: nowrap; }
.zoom-control select { width: 118px; height: 34px; }
.media-player { width: 100%; margin-bottom: 10px; height: 48px; }
.video-player { height: min(240px, 32vw); background: #05080b; border-radius: 9px; }
.playback-scrubber { display: grid; grid-template-columns: 66px minmax(120px, 1fr) 66px; gap: 10px; align-items: center; margin: 0 2px 10px; }
.playback-scrubber span { color: #9faaba; font: 10px "Cascadia Code", Consolas, monospace; font-variant-numeric: tabular-nums; }
.playback-scrubber span:last-child { text-align: right; }
.playback-scrubber input[type="range"] { width: 100%; height: 22px; padding: 0; accent-color: var(--accent); cursor: pointer; }
.remote-control { margin: 0 2px 10px; border: 1px solid #2b3946; border-radius: 8px; background: #0d151c; }
.remote-control > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; color: #cbd7e2; font-size: 11px; font-weight: 700; cursor: pointer; }
.remote-control > summary small { color: var(--accent); font-weight: 500; }
.remote-control-body { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 10px 12px 12px; border-top: 1px solid #2b3946; }
.remote-control-body p, .remote-control-body > small { width: 100%; margin: 0; color: var(--muted); font-size: 11px; }
.remote-control-body .check-row { display: flex; align-items: center; gap: 8px; margin: 0; }
.remote-control-body .check-row input { width: auto; height: auto; margin: 0; accent-color: var(--accent); }
.remote-control-body .check-row span { font-size: 11px; }
.remote-control-body .check-row small { display: block; }
.remote-seek-label { display: flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; font-size: 11px; }
.remote-seek-label select { width: 73px; height: 31px; padding: 0 7px; }
.remote-control-body button { min-height: 31px; padding: 0 10px; border: 1px solid #3a5d58; border-radius: 7px; color: var(--accent); background: #142822; font-size: 11px; }
.active-cue-display { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: center; min-height: 52px; margin: 0 0 10px; padding: 10px 13px; border: 1px solid #293746; border-radius: 9px; background: rgba(8,13,19,.88); }
.active-cue-display span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.active-cue-display strong { min-width: 28px; color: var(--accent); font: 12px "Cascadia Code", Consolas, monospace; }
.active-cue-display textarea { width: 100%; min-height: 48px; margin: 0; padding: 6px 10px; resize: vertical; border-color: transparent; background: transparent; color: #e9eef4; font-size: 15px; line-height: 1.35; text-align: center; }
.active-cue-display textarea:focus { border-color: rgba(121,230,194,.5); background: rgba(5,12,14,.52); box-shadow: 0 0 0 2px rgba(121,230,194,.1); }
.active-cue-display textarea:disabled { color: #8793a1; opacity: 1; cursor: default; }
.active-cue-display.running { border-color: rgba(121,230,194,.34); background: rgba(17,31,32,.9); }
.waveform-shell { position: relative; overflow: hidden; border: 1px solid #2b3744; border-radius: 10px; background: linear-gradient(180deg, #0a1016, #0c1219); cursor: crosshair; touch-action: none; }
#waveformCanvas { display: block; width: 100%; height: 170px; }
.media-workbench .waveform-pan { position: absolute; top: 50%; transform: translateY(-50%); width: 24px; height: 64px; padding: 0; border-radius: 5px; background: rgba(13,23,31,.92); color: var(--accent); font-size: 26px; cursor: pointer; }
.waveform-pan.left { left: 0; }.waveform-pan.right { right: 0; }
.waveform-pan:disabled { pointer-events: none; }
.ai-diff-view .diff-toggle { cursor: pointer; }
.diff-rejected { background: rgba(145,160,176,.13); color: #a8b6c3; border-bottom: 1px dashed #a8b6c3; }
.ai-history-dialog { width: min(1050px, 94vw); max-height: 90vh; padding: 22px; color: #dfe6ed; background: #101820; border: 1px solid #435669; border-radius: 13px; }
.ai-history-dialog::backdrop { background: rgba(0,0,0,.65); }
.ai-history-dialog form, .ai-history-views { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ai-history-dialog p, .ai-history-dialog label { font-size: 12px; color: #b3c0ce; }
.ai-history-dialog pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; }
.ai-history-dialog button { padding: 7px 12px; border: 1px solid #435669; border-radius: 6px; color: #dfe6ed; background: #172632; cursor: pointer; }
.ai-history-dialog button.is-active { border-color: var(--accent); color: var(--accent); }
.ai-history-dialog details { margin: 12px 0; }
.break-chip-layer { position: absolute; overflow: hidden; pointer-events: none; z-index: 2; }
.break-chip-content { position: absolute; inset: 0; pointer-events: none; }
.text-tools .break-chip { position: absolute; padding: 0; height: auto; min-height: 0; border: 0; border-radius: 3px; background: #25483f; box-shadow: inset 0 0 0 1px #508e7b; color: #acffe3; font: inherit; text-align: center; overflow: hidden; line-height: inherit; cursor: grab; pointer-events: auto; touch-action: none; z-index: 1; }
.text-tools .break-chip.selected { background: #f8c65c; box-shadow: inset 0 0 0 1px #ffe19a, 0 0 0 2px rgba(248,198,92,.45); color: #17120b; }
.cue-line-tint { position: absolute; pointer-events: none; border-radius: 2px; }
.cue-line-1 { background: rgba(180, 195, 212, .13); }
.cue-line-2 { background: rgba(50, 219, 163, .22); }
.cue-line-3 { background: rgba(126, 156, 255, .27); }
.cue-line-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 8px 0; color: var(--muted); font-size: 11px; }
.cue-line-legend span { padding: 2px 7px; border-radius: 4px; color: var(--text); }
.editor-view-options { display: flex; align-items: center; justify-content: space-between; gap: 8px 18px; flex-wrap: wrap; margin: 8px 0; }
.editor-view-options .cue-line-legend { margin: 0; }
.row-editor-toggle { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; cursor: pointer; }
.row-editor-toggle input { width: auto; height: auto; margin: 0; accent-color: var(--accent); }
#workText.row-mode-hidden { display: none; }
#subtitleRowsText { min-width: 0; flex: 1; line-height: 24px; }
#subtitleRowsText[hidden] { display: none; }
.subtitle-row-mode .cue-line-legend, .subtitle-row-mode .break-chip-layer { display: none; }
.speaker-spacing-mode .cue-line-legend, .speaker-spacing-mode .break-chip-layer { display: none; }
.speaker-spacing-view { line-height: 24px !important; position: relative; z-index: 1; background: transparent !important; }
.work-text-with-times:has(.speaker-bands-view) { background: #0d1218; border-radius: 10px; }
.work-text-with-times .speaker-bands-view { position: relative; z-index: 1; background-color: transparent !important; }
.speaker-turn-layer { position: absolute; overflow: hidden; pointer-events: none; z-index: 0; }
.speaker-turn-layer[hidden] { display: none; }
.speaker-turn-bands, .speaker-turn-inlines, .speaker-turn-labels { position: absolute; inset: 0; pointer-events: none; }
.speaker-turn-band, .speaker-inline-band { position: absolute; opacity: .9; }
.speaker-turn-band { left: 0; right: 0; }
.speaker-turn-band.turn-start { border-top: 1px solid rgba(219, 235, 245, .28); box-shadow: inset 4px 0 currentColor; }
.speaker-inline-band.turn-start { box-shadow: inset 3px 0 currentColor; }
.speaker-turn-band.tone-0, .speaker-inline-band.tone-0 { color: #59cda9; background: rgba(52, 162, 130, .13); }
.speaker-turn-band.tone-1, .speaker-inline-band.tone-1 { color: #79a9e3; background: rgba(76, 129, 191, .14); }
.speaker-turn-band.tone-2, .speaker-inline-band.tone-2 { color: #b5a1e5; background: rgba(132, 105, 188, .14); }
.speaker-turn-band.tone-3, .speaker-inline-band.tone-3 { color: #e8bb78; background: rgba(190, 133, 64, .13); }
.speaker-label-band { position: absolute; border-radius: 4px; }
.speaker-label-band.tone-0 { background: rgba(69, 195, 153, .30); }
.speaker-label-band.tone-1 { background: rgba(104, 158, 226, .30); }
.speaker-label-band.tone-2 { background: rgba(166, 137, 224, .30); }
.speaker-label-band.tone-3 { background: rgba(232, 179, 104, .29); }
.work-text-with-times:has(.work-text-timing-gutter:not(.hidden)) #subtitleRowsText { border-top-left-radius: 0; border-bottom-left-radius: 0; }
#subtitleRowsText.has-active-line { background-image: linear-gradient(rgba(121,230,194,.13), rgba(121,230,194,.13)); background-repeat: no-repeat; background-position: 0 var(--active-line-y, -100px); background-size: 100% var(--active-line-height, 24px); }
.text-tools .break-chip:active { cursor: grabbing; }
.break-drop-caret { position: absolute; width: 2px; background: var(--accent); pointer-events: none; }
.break-drop-caret.invalid { background: var(--problem); }
.timeline-footer { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-top: 10px; }
.timeline-footer > strong { text-align: center; color: #d9e0e8; font-size: 12px; font-variant-numeric: tabular-nums; }
.timeline-actions { display: flex; gap: 6px; }
.timeline-actions button:first-child, .timeline-actions button:last-child { width: 36px; padding: 0; }
.utility-panel { background: linear-gradient(145deg, rgba(20,27,36,.98), rgba(14,19,26,.98)); }
.speaker-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.speaker-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; background: #0d1218; }
.speaker-row code { min-width: 35px; color: var(--accent); font-size: 12px; }
.speaker-row input { height: 34px; }
.empty-panel { color: var(--muted); font-size: 12px; padding: 6px 0; }
.panel-actions { display: flex; justify-content: end; gap: 8px; margin-top: 12px; }
.llm-grid { display: grid; grid-template-columns: 210px minmax(240px, 1fr) minmax(190px, 1fr); gap: 12px; align-items: end; }
.llm-grid label, .ai-grid label { margin: 0; }
.llm-grid label > span, .ai-grid label > span { display: block; color: var(--muted); font-size: 10px; margin-bottom: 5px; }
.provider-help { display: block; margin: 7px 0 14px; color: var(--muted); }
.ai-grid { display: grid; grid-template-columns: 240px 1fr; gap: 12px; align-items: start; }
.ai-instruction textarea { min-height: 78px; }
.ai-instruction span small { color: #738091; font-weight: 500; }
.ai-connection { margin-top: 12px; padding: 10px 12px; border: 1px solid #293746; border-radius: 9px; background: rgba(7,11,16,.34); }
.ai-connection > summary { color: #aeb9c5; font-size: 11px; font-weight: 700; cursor: pointer; }
.ai-connection .llm-grid { margin-top: 12px; }
.ai-actions { flex-wrap: wrap; }
.ai-tools { margin-top: 0; background: rgba(10,16,22,.62); }
.ai-tools > .find-replace-body { padding-top: 12px; }
.ai-run-status { margin-top: 12px; padding: 10px 12px; border: 1px solid rgba(121,230,194,.24); border-radius: 9px; color: #c7d2dc; background: rgba(15,31,31,.72); font-size: 12px; }
.ai-result-panel { margin-top: 13px; padding: 14px; border: 1px solid #334355; border-radius: 10px; background: #0c1117; }
.ai-result-panel textarea { min-height: 190px; }
.ai-diff-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 9px; }
.ai-diff-legend span { padding: 3px 7px; border-radius: 5px; font-size: 10px; }
.ai-diff-legend small { margin-left: auto; color: var(--muted); }
.ai-diff-view { min-height: 190px; max-height: 430px; overflow: auto; padding: 13px 14px; border: 1px solid #263441; border-radius: 8px; background: #080d12; color: #dfe6ed; font: 13px/1.65 "Cascadia Code", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.diff-added, .diff-replaced, .diff-removed { position: relative; border-radius: 3px; color: inherit; text-decoration: none; }
.diff-added { background: rgba(69,194,136,.3); box-shadow: inset 0 -1px rgba(92,235,166,.55); }
.diff-replaced { background: rgba(244,186,94,.3); box-shadow: inset 0 -1px rgba(255,205,119,.65); }
.diff-removed { background: rgba(243,111,124,.28); color: #ffb1ba; box-shadow: inset 0 -1px rgba(255,131,145,.6); }
.ai-diff-view .diff-added, .ai-diff-view .diff-replaced { padding: 1px 2px; margin: 0 -1px; }
.ai-diff-view .diff-removed { display: inline-block; min-width: 13px; padding: 0 3px; margin: 0 2px; text-align: center; font-weight: 900; cursor: help; }
.ai-diff-view [data-tooltip] { cursor: help; }
.ai-diff-view [data-tooltip]:hover, .ai-diff-view [data-tooltip]:focus { z-index: 8; outline: 1px solid rgba(255,255,255,.28); }
.ai-diff-view [data-tooltip]:hover::after, .ai-diff-view [data-tooltip]:focus::after { content: attr(data-tooltip); position: absolute; left: 0; bottom: calc(100% + 7px); width: max-content; max-width: min(480px, 72vw); padding: 8px 10px; border: 1px solid #4a5b6d; border-radius: 7px; background: #17202a; color: #f4f7fa; font: 11px/1.4 system-ui, sans-serif; white-space: pre-wrap; box-shadow: 0 10px 28px rgba(0,0,0,.42); pointer-events: none; }
.ai-result-edit { margin-top: 10px; border: 1px solid #263441; border-radius: 8px; padding: 9px 11px; }
.ai-result-edit summary { color: #aeb9c5; font-size: 11px; cursor: pointer; }
.ai-result-edit textarea { margin-top: 9px; }
.ai-result-warnings { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; color: #f3ca85; font-size: 11px; }
.ai-result-warnings:empty { display: none; }
#workText.file-drag { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(53,200,154,.16); background: rgba(53,200,154,.04); }
.cue-section-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 20px 4px 10px; }
.cue-section-head h3 { margin: 0; font-size: 18px; }
.cue-section-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 7px; }
.cue-section-actions button { height: 36px; padding: 0 12px; border: 1px solid #34404e; border-radius: 8px; color: #d7dde5; background: #151c25; font-size: 12px; font-weight: 650; }
.cue-section-actions button:hover { border-color: #526174; }
.cue-section-actions button.is-active { color: #08120f; border-color: var(--accent); background: var(--accent); }

.cue-navigation { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 4px 10px; }
.cue-navigation label { margin: 0; font-size: 12px; }
.cue-navigation input { width: 82px; height: 34px; }
.cue-navigation button { min-height: 34px; padding: 6px 11px; border: 1px solid #34404e; border-radius: 7px; color: #d7dde5; background: #151c25; cursor: pointer; }
.cue-navigation button:disabled { opacity: .45; cursor: default; }
.cue-navigation output { margin-left: auto; color: var(--muted); font-size: 11px; }
.cue-list { position: relative; display: flex; flex-direction: column; gap: 7px; max-height: clamp(260px, 58vh, 620px); overflow: auto; overscroll-behavior-y: contain; overflow-anchor: none; scrollbar-gutter: stable; padding: 3px; border-radius: 11px; }
.cue-list:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cue-list > .cue-row { flex: none; }
.cue-row { display: grid; grid-template-columns: 42px 160px minmax(300px, 1fr) 120px 104px; grid-template-areas: "number times text quality actions" "number issues issues issues actions"; column-gap: 12px; row-gap: 6px; align-items: center; padding: 13px 12px 10px; background: rgba(17,22,30,.82); border: 1px solid var(--line); border-left: 3px solid var(--good); border-radius: 11px; }
.cue-row.warning { border-left-color: var(--warning); }.cue-row.problem { border-left-color: var(--problem); }
.cue-row.selected { border-color: rgba(121,230,194,.55); background: rgba(25,39,43,.92); box-shadow: 0 0 0 2px rgba(121,230,194,.07); }
.cue-row.playing { border-color: rgba(244,186,94,.5); box-shadow: inset 0 0 0 1px rgba(244,186,94,.08); }
.cue-row.short-duration { border-left-color: var(--warning); background: linear-gradient(90deg, rgba(120,81,24,.17), rgba(17,22,30,.82) 45%); }
.cue-row.short-duration .cue-text { border-color: rgba(244,186,94,.5); background: rgba(58,42,18,.24); }
.cue-row.fast-reading { border-left-color: var(--problem); background: linear-gradient(90deg, rgba(132,35,48,.2), rgba(17,22,30,.82) 45%); }
.cue-row.fast-reading .cue-text { border-color: rgba(243,111,124,.58); background: rgba(65,20,28,.3); }
.cue-row.filtered { display: none; }
.cue-number { grid-area: number; color: #667283; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.cue-times { grid-area: times; display: grid; grid-template-columns: 1fr; gap: 2px; }
.cue-times span { display: none; }
.cue-times input { height: 30px; border: 0; background: transparent; padding: 0 4px; color: #9faaba; font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; }
.cue-times input:focus { background: #0c1117; box-shadow: none; }
.cue-text { grid-area: text; resize: vertical; min-height: 56px; background: #0c1117; font-size: 14px; }
.cue-quality { grid-area: quality; display: flex; align-items: start; flex-direction: column; gap: 5px; }
.quality-badge { border-radius: 999px; padding: 5px 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; background: rgba(84,214,166,.1); color: var(--good); }
.warning .quality-badge { background: rgba(244,186,94,.1); color: var(--warning); }.problem .quality-badge { background: rgba(243,111,124,.1); color: var(--problem); }
.short-duration .quality-badge { background: rgba(244,186,94,.12); color: var(--warning); }
.fast-reading .quality-badge { background: rgba(243,111,124,.12); color: #ff9ca6; }
.quality-detail { font-variant-numeric: tabular-nums; }
.reading-speed { color: #8f9aaa; font-variant-numeric: tabular-nums; }.reading-speed.over-limit { color: #ff9ca6; font-weight: 800; }
.cue-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 5px; justify-content: end; }
.cue-actions button { min-width: 27px; height: 27px; padding: 0 5px; border-radius: 7px; border: 1px solid var(--line); color: var(--muted); background: transparent; font-size: 10px; }
.cue-actions .split-cue, .cue-actions .merge-cue { width: 100%; }
.cue-actions button:hover { color: white; border-color: #536175; }
.cue-issues { grid-area: issues; display: flex; gap: 5px; flex-wrap: wrap; min-height: 18px; }
.issue-tag { color: #8f9aaa; font-size: 10px; padding: 2px 6px; border-radius: 5px; background: rgba(255,255,255,.035); }
.transcript-details { margin-top: 20px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); font-size: 12px; }
.transcript-details pre { white-space: pre-wrap; font-family: inherit; line-height: 1.65; color: #aeb7c3; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: #eafdf6; color: #10231d; padding: 11px 15px; border-radius: 9px; font-size: 12px; font-weight: 700; opacity: 0; pointer-events: none; transition: .2s; z-index: 50; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.translation-dialog { width: min(620px, calc(100vw - 28px)); padding: 0; border: 1px solid #3b4c5e; border-radius: 16px; background: linear-gradient(145deg, #151d27, #0d131b); color: var(--text); box-shadow: 0 30px 100px rgba(0,0,0,.72); }
.translation-dialog::backdrop { background: rgba(3,6,10,.74); backdrop-filter: blur(4px); }
.translation-dialog form { padding: 20px; }
.translation-dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
.translation-dialog-head .eyebrow { margin-bottom: 5px; }
.translation-dialog-head h3 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.dialog-close { width: 34px; height: 34px; flex: none; border: 1px solid var(--line); border-radius: 9px; background: #111923; color: #aab5c1; font-size: 22px; line-height: 1; }
.dialog-close:hover { color: white; border-color: #536275; }
.translation-language-grid { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); gap: 9px; align-items: end; }
.translation-provider { display: block; margin: 0 0 12px; }
.translation-language-grid label, .translation-api-key { margin: 0; }
.translation-provider > span, .translation-language-grid label > span, .translation-api-key > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.translation-api-key small { color: #82909e; font-weight: 400; }
.translation-arrow { align-self: center; padding-top: 16px; color: var(--accent); text-align: center; }
.translation-api-key { display: block; margin-top: 12px; }
.translation-selection-summary { margin: 14px 0 10px; border: 1px solid #2b3846; border-radius: 10px; background: rgba(6,10,15,.58); overflow: hidden; }
.translation-selection-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 9px 11px; border-bottom: 1px solid #26323f; }
.translation-selection-summary strong { font-size: 11px; }
.translation-selection-summary pre { max-height: 150px; margin: 0; padding: 11px; overflow: auto; color: #bdc7d2; font: 11px/1.5 "Cascadia Code", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.translation-status { margin-top: 11px; padding: 9px 11px; border: 1px solid rgba(121,230,194,.24); border-radius: 8px; background: rgba(53,200,154,.07); color: #cee8df; font-size: 11px; }
.translation-status.error { border-color: rgba(243,111,124,.4); background: rgba(243,111,124,.08); color: #ffb1ba; }
.translation-confirmation { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding: 11px; border: 1px solid rgba(244,186,94,.35); border-radius: 9px; background: rgba(244,186,94,.07); }
.translation-confirmation input { width: auto; margin-top: 2px; accent-color: var(--accent); }
.translation-confirmation span { display: flex; flex-direction: column; gap: 3px; }
.translation-confirmation strong { color: #f0d096; font-size: 11px; }
.translation-confirmation small { color: #aeb7c3; }
.translation-dialog-actions { display: flex; justify-content: end; gap: 8px; margin-top: 16px; }
.translation-dialog-actions button { height: 38px; padding: 0 14px; border: 1px solid #374455; border-radius: 8px; background: #151c25; color: #d7dde5; font-size: 12px; font-weight: 700; }
.translation-dialog-actions button:disabled { opacity: .45; cursor: default; }
.youtube-publish-dialog { width: min(670px, calc(100vw - 28px)); }
.youtube-publish-dialog form > p { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.youtube-publish-dialog form > label { display: block; margin-top: 12px; color: var(--muted); font-size: 11px; }
.youtube-publish-dialog form > label > input:not([type="checkbox"]), .youtube-publish-fields input { display: block; width: 100%; margin-top: 5px; }
.youtube-publish-dialog .translation-confirmation { display: flex; }
.youtube-publish-row { display: flex; gap: 8px; margin: 10px 0; }
.youtube-publish-row button, #youtubeInspectButton { min-height: 34px; padding: 5px 10px; border: 1px solid #415467; border-radius: 8px; background: #172331; color: var(--text); cursor: pointer; }
#youtubeInspectButton { margin-top: 8px; }
.youtube-publish-fields { display: grid; grid-template-columns: 120px 1fr; gap: 10px; margin-top: 10px; }
.youtube-publish-fields label { color: var(--muted); font-size: 11px; }
.youtube-publish-dialog .translation-status { overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .topbar p { display: none; }
  .topbar-editor-actions .autosave-state { max-width: 112px; }
}
@media (max-width: 900px) {
  main { padding-top: 35px; }
  .hero { grid-template-columns: 1fr; gap: 25px; }
  .hero-copy { position: static; padding-top: 0; }
  .hero h2 { font-size: 46px; }
  .cue-row { grid-template-columns: 34px 1fr 90px; grid-template-areas: "number times quality" "number text text" "number issues actions"; }
  .toolbar { flex-wrap: wrap; overflow-x: visible; top: 76px; }
  .toolbar button, .export-menu > summary, .history-menu > summary { white-space: nowrap; }
  .toolbar-spacer { display: none; }
  .autosave-state { margin-left: auto; }
  .export-menu { margin-left: auto; }
  .timeline-footer { grid-template-columns: 1fr; }.timeline-footer > strong { text-align: left; }
  .llm-grid, .ai-grid { grid-template-columns: 1fr; }
  .find-replace-grid { grid-template-columns: 1fr 1fr; }
  .find-navigation, .find-actions { justify-content: stretch; }.find-navigation button, .find-actions button { flex: 1; }
}
@media (max-width: 580px) {
  .topbar { padding: 0 14px; }.topbar p, .local-pill, .topbar-editor-actions .autosave-state { display: none; }
  .topbar-project-panel { position: fixed; top: 70px; right: 12px; left: 12px; width: auto; }
  main { padding-left: 12px; padding-right: 12px; }
  .setup-card { grid-template-columns: 1fr; padding: 18px; }.field.full, .initial-text.full, .primary-button.full, .project-library.full { grid-column: 1; }
  .project-library-actions, .project-card { align-items: stretch; flex-direction: column; }
  .project-card { display: flex; }
  .project-card-actions { justify-content: stretch; }.project-card-actions button { flex: 1; }
  .subtitle-limits { grid-template-columns: 1fr; }
  .mode-row { flex-direction: column; gap: 9px; }
  .auth-row { grid-template-columns: 1fr; }
  .media-source-tabs { grid-template-columns: 1fr; }
  .language-bar { flex-wrap: wrap; }
  .translation-language-grid { grid-template-columns: 1fr; }
  .translation-arrow { display: none; }
  .work-controls, .text-tools-head, .panel-head { flex-direction: column; align-items: stretch; }
  .cue-section-head { align-items: stretch; flex-direction: column; }
  .cue-section-actions { justify-content: stretch; }.cue-section-actions button { flex: 1; }
  .text-tools-actions { justify-content: stretch; }.text-tools-actions button { flex: 1; }
  .find-replace-head { flex-direction: column; gap: 5px; }.find-replace-head output { text-align: left; }
  .find-replace-grid { grid-template-columns: 1fr; }
  .panel-actions { justify-content: stretch; }.panel-actions button { flex: 1; }
  .editor-header { align-items: start; flex-direction: column; }.summary { justify-content: start; }
  .cue-row { padding-left: 5px; column-gap: 6px; }
  .cue-times { grid-template-columns: 1fr 8px 1fr; }.cue-times span { display: block; }
}