:root {
  color-scheme: light;
  --bg: #f4f7fb;
  --bg-2: #eef3fb;
  --panel: #ffffff;
  --panel-soft: #f8fbff;
  --line: #d8e2ef;
  --line-strong: #c3cede;
  --text: #142033;
  --soft-text: #344054;
  --muted: #68758b;
  --accent: #7c3aed;
  --accent-2: #6d28d9;
  --blue: #1570ef;
  --ok: #039855;
  --warn: #dc8a00;
  --err: #d92d20;
  --violet: #7c3aed;
  --shadow: 0 18px 50px rgba(29, 41, 57, .10);
  --shadow-soft: 0 8px 22px rgba(29, 41, 57, .07);
  --radius: 22px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% 0%, rgba(124, 58, 237, .10), transparent 32%),
    radial-gradient(circle at 88% 14%, rgba(21, 112, 239, .10), transparent 28%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  color: var(--text);
}

a { color: inherit; }
.hidden { display: none !important; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}

.app-topbar, .panel {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .94);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.app-topbar {
  flex: 0 0 auto;
  padding: 14px;
  backdrop-filter: blur(14px);
}

.toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.brand {
  min-width: 260px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-logo {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 24px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .14), rgba(21, 112, 239, .12));
  border: 1px solid rgba(124, 58, 237, .22);
  box-shadow: var(--shadow-soft);
}
.brand h1 { margin: 0; font-size: 19px; line-height: 1.1; color: var(--text); }
.brand p { margin: 4px 0 0; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.top-status, .top-actions, .preview-actions, .download-row, .progress-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.top-actions { justify-content: flex-end; }
.top-status {
  min-height: 38px;
  padding: 7px 12px;
  border-radius: 16px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.top-status strong {
  color: var(--text);
  font-size: 13px;
  margin-left: 6px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #f7f9fd;
  border: 1px solid var(--line);
  color: #344054;
  font-size: 13px;
  font-weight: 800;
}

.btn, button, .download-all, .single-download, .result-actions a, .history-actions a, .ghost-link {
  min-height: 40px;
  border: 1px solid var(--line-strong);
  background: #ffffff;
  color: #24364f;
  border-radius: 14px;
  padding: 9px 13px;
  font-weight: 850;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: .15s transform, .15s background, .15s border-color, .15s box-shadow;
  box-shadow: 0 2px 7px rgba(29, 41, 57, .04);
}
.btn:hover, button:hover, .download-all:hover, .result-actions a:hover, .history-actions a:hover, .ghost-link:hover {
  background: #f8fafc;
  border-color: #aebcd0;
  box-shadow: 0 6px 18px rgba(29, 41, 57, .08);
}
.btn:active, button:active { transform: scale(.98); }
button:disabled, .btn:disabled { opacity: .65; cursor: wait; }
.primary, .btn.primary {
  border-color: rgba(124, 58, 237, .82);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 12px 26px rgba(124, 58, 237, .22);
}
.primary:hover, .btn.primary:hover { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.danger, .btn.danger {
  border-color: rgba(217, 45, 32, .25);
  background: #fff5f4;
  color: var(--err);
}
.danger:hover, .btn.danger:hover { background: #ffeceb; border-color: rgba(217, 45, 32, .38); }
.warning, .btn.warning {
  border-color: rgba(220, 138, 0, .28);
  background: #fff8eb;
  color: #875100;
}
.wide { width: 100%; }

.control-grid {
  display: grid;
  grid-template-columns: minmax(185px, 1fr) minmax(150px, .85fr) minmax(132px, .6fr) minmax(140px, .62fr) minmax(140px, .62fr) minmax(205px, 1fr) minmax(150px, .68fr) auto auto;
  gap: 8px;
  margin-top: 12px;
  align-items: stretch;
}
.control-box {
  min-height: 44px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--text);
  border-radius: 15px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 850;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(29, 41, 57, .04);
}
.control-box > span, .control-box summary span {
  color: var(--muted);
  font-weight: 800;
  flex: 0 0 auto;
}
.file-box { position: relative; }
.file-box input[type="file"] {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--soft-text);
  padding: 0;
  font-weight: 750;
}
.select-box select, .template-select, .control-box select {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  outline: none;
  font-weight: 850;
}
.toggle-box { justify-content: flex-start; }
.switch-line { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 850; }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.manual-text-trigger {
  border: 1px solid var(--line);
  text-align: left;
}
.manual-text-trigger b {
  min-width: 64px;
  color: var(--accent);
  font-size: 13px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal-open { overflow: hidden; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, .38);
  backdrop-filter: blur(8px);
}
.modal-card {
  width: min(760px, 100%);
  max-height: min(76vh, 680px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 24px 80px rgba(15, 23, 42, .22);
  overflow: hidden;
}
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}
.modal-head h2 { margin: 0; font-size: 22px; }
.modal-head p { margin: 6px 0 0; color: var(--muted); line-height: 1.45; font-weight: 700; }
.modal-close {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font-size: 28px;
  line-height: 1;
  font-weight: 600;
}
.manual-text-modal textarea {
  min-height: 300px;
  flex: 1;
  margin: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  resize: none;
  padding: 14px 15px;
  outline: none;
  color: var(--text);
  background: #fbfdff;
  line-height: 1.55;
  font-weight: 700;
}
.manual-text-modal textarea:focus, .search-input:focus {
  border-color: rgba(124, 58, 237, .55);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .10);
}
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px 16px;
  color: var(--muted);
  font-weight: 850;
}
.modal-actions { display: flex; gap: 8px; }

.top-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.status { margin: 0; color: var(--muted); font-size: 13px; font-weight: 750; }
.status.ok { color: var(--ok); }
.status.err { color: var(--err); }
.mini-calculator {
  display: grid;
  grid-template-columns: repeat(5, minmax(74px, 1fr));
  gap: 7px;
  min-width: min(650px, 58vw);
}
.mini-calculator div {
  border: 1px solid var(--line);
  background: #fbfdff;
  border-radius: 14px;
  padding: 7px 9px;
}
.mini-calculator span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; font-weight: 950; letter-spacing: .04em; }
.mini-calculator strong { display: block; margin-top: 3px; color: var(--text); font-size: 15px; line-height: 1; }

.workspace {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 14px;
}
.left-column, .right-column {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.panel { min-height: 0; overflow: hidden; }
.panel-head, .preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 15px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fff, #fbfdff);
}
.panel h2, .preview-head h2 { margin: 0; font-size: 18px; line-height: 1.15; color: var(--text); }
.panel p, .preview-head p { margin: 5px 0 0; color: var(--muted); font-size: 13px; font-weight: 700; }

.progress-panel { flex: 0 0 auto; max-height: 58%; display: flex; flex-direction: column; }
.language-panel { flex: 1; display: flex; flex-direction: column; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 15px 6px; }
.stat-card {
  border: 1px solid var(--line);
  background: #ffffff;
  border-radius: 16px;
  padding: 9px 10px;
  min-width: 0;
  box-shadow: 0 2px 8px rgba(29, 41, 57, .04);
}
.stat-card span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; font-weight: 950; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-card strong { display: block; margin-top: 5px; font-size: 20px; line-height: 1; }
.green { color: var(--ok); }
.amber { color: var(--warn); }
.red { color: var(--err); }
.violet { color: var(--violet); }
.blue { color: var(--blue); }

.progress-track { height: 10px; border-radius: 999px; background: #e9eef7; border: 1px solid var(--line); overflow: hidden; margin: 8px 15px 12px; }
.progress-fill { width: 0%; height: 100%; background: linear-gradient(90deg, var(--violet), var(--blue), var(--ok)); border-radius: 999px; transition: width .25s ease; }

.result-tools { padding: 0 15px 12px; display: flex; flex-direction: column; gap: 9px; }
.filter-tabs { display: flex; gap: 7px; overflow: auto; padding-bottom: 2px; }
.filter-tabs button {
  min-height: 34px;
  flex: 0 0 auto;
  border-radius: 12px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 950;
}
.filter-tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.search-input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  border-radius: 14px;
  padding: 0 12px;
  outline: none;
  font-weight: 750;
}
.results {
  min-height: 0;
  overflow: auto;
  padding: 0 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.result-row, .history-row {
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--text);
  border-radius: 18px;
  padding: 10px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  box-shadow: 0 2px 9px rgba(29, 41, 57, .04);
}
/* 1.64.0. Галочка выбора файла в пакете. Своя колонка слева — иначе она
   налезает на флаг и попадает по ней случайно вместе с открытием файла. */
.result-row:has(.result-pick) { grid-template-columns: 26px 42px minmax(0, 1fr) auto; }
.result-pick { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.result-pick input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent, #7c3aed); }

/* 1.64.0. Действия прямо в строке файла: отменить и повторить. Значками —
   строка узкая, подписи в неё не помещаются, а всплывающая подсказка есть. */
.row-act {
  width: 28px; height: 28px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; font-size: 13px; line-height: 1;
  display: inline-grid; place-items: center; padding: 0;
  transition: border-color .15s, background .15s, transform .1s;
}
.row-act:hover { border-color: #b7c5d8; background: #f6f9ff; }
.row-act:active { transform: scale(.94); }
.row-act:disabled { opacity: .45; cursor: default; }
html[data-theme="dark"] .row-act { background: #202b3d; }
html[data-theme="dark"] .row-act:hover { background: #26334a; }

.result-row:hover, .history-row:hover { background: #fbfdff; border-color: #b7c5d8; }
.result-row.active { background: #f4efff; border-color: rgba(124, 58, 237, .72); }
.result-row.done { border-color: rgba(3, 152, 85, .30); }
.result-row.needs_review { border-color: rgba(220, 138, 0, .38); }
.result-row.error { border-color: rgba(217, 45, 32, .35); }
.result-row.audio-error { border-color: rgba(220, 138, 0, .38); }
.lang-flag, .lang-flag-emoji, .result-flag {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #f4f7fb;
  border: 1px solid var(--line);
  font-size: 24px;
  flex: 0 0 auto;
}
.lang-flag-img { width: 24px; height: 18px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px rgba(29, 41, 57, .10); }
.result-main, .history-main { min-width: 0; }
.result-main strong, .history-main strong { display: block; color: var(--text); font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-main span, .history-main span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.error-text { display: block; margin-top: 5px; color: var(--warn); font-size: 12px; line-height: 1.35; white-space: normal; word-break: break-word; }
.result-actions, .history-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.result-actions button, .result-actions a, .history-actions button, .history-actions a { min-height: 32px; padding: 6px 9px; border-radius: 10px; font-size: 12px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  border: 1px solid currentColor;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
  background: #fff;
}

.language-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
  background: #fbfdff;
}
.language-toolbar button, .language-toolbar select { min-height: 36px; border-radius: 12px; padding: 7px 10px; font-size: 12px; }
.template-select { min-width: 150px; border: 1px solid var(--line-strong); background: #fff; color: var(--text); font-weight: 850; }
.languages {
  min-height: 0;
  overflow: auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 8px;
  align-content: start;
}
.lang, .language-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 9px 10px;
  background: #ffffff;
  min-height: 48px;
  box-shadow: 0 2px 8px rgba(29, 41, 57, .04);
  cursor: pointer;
}
.lang:hover, .language-choice:hover { background: #fbfdff; border-color: #b7c5d8; }
.lang input, .language-choice input { position: absolute; opacity: 0; pointer-events: none; }
.lang:has(input:checked), .language-choice:has(input:checked) { background: #f4efff; border-color: rgba(124, 58, 237, .65); }
.language-info { min-width: 0; }
.language-info strong { display: block; color: var(--text); font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.language-info span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 850; }

.right-column { overflow: hidden; }
.global-downloads {
  flex: 0 0 auto;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.download-info strong { display: block; color: var(--text); font-size: 14px; }
.download-info span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 750; }

.preview-empty {
  flex: 0 0 auto;
  min-height: 240px;
  padding: 36px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.empty-icon { font-size: 44px; margin-bottom: 12px; }
.preview-empty h2 { margin: 0; font-size: 24px; }
.preview-empty p { max-width: 620px; color: var(--muted); line-height: 1.55; }
.download-row { justify-content: center; margin-top: 12px; }
.download-all { background: #ecfdf3; border-color: rgba(3, 152, 85, .24); color: #027a48; }
.download-all.disabled { pointer-events: none; opacity: .48; filter: grayscale(.3); }
.preview-panel { flex: 1; display: flex; flex-direction: column; }
.preview-head { flex: 0 0 auto; }
.preview-panel pre {
  min-height: 0;
  flex: 1;
  margin: 0;
  padding: 18px;
  overflow: auto;
  background: #ffffff;
  color: #182230;
  font-size: 15px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
  border-top: 0;
}
.history-panel { flex: 1; display: flex; flex-direction: column; }
.history-list { min-height: 0; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: #f8fbff; }
.history-row { grid-template-columns: minmax(0, 1fr) auto; }
.history-main strong { font-size: 13px; }

.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 18px;
}
.auth-card {
  width: min(430px, 100%);
  background: rgba(255,255,255,.94);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.logo-badge {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  letter-spacing: .04em;
  background: linear-gradient(135deg, var(--accent), var(--blue));
  color: #fff;
  box-shadow: 0 10px 26px rgba(124, 58, 237, .24);
}
.auth-card h1 { margin: 0; font-size: 28px; }
.auth-sub, .auth-error { margin: 0; color: var(--muted); line-height: 1.5; }
.auth-error { min-height: 18px; color: var(--err); }
.contact-link { text-align: center; color: var(--accent); text-decoration: none; font-weight: 850; font-size: 14px; }
.auth-button { text-decoration: none; }

@media (max-width: 1280px) {
  .control-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .workspace { grid-template-columns: 390px minmax(0, 1fr); }
  .top-chips { display: none; }
}

@media (max-width: 1020px) {
  body { overflow: auto; }
  .app-shell { height: auto; min-height: 100vh; overflow: visible; }
  .workspace { grid-template-columns: 1fr; overflow: visible; }
  .left-column, .right-column, .progress-panel, .language-panel, .history-panel, .preview-panel { min-height: 420px; max-height: none; }
  .control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-calculator { min-width: 100%; }
  .top-footer, .toprow { align-items: stretch; flex-direction: column; }
  .top-actions { justify-content: flex-start; }
  .brand { min-width: 0; }
}

@media (max-width: 640px) {
  .app-shell { padding: 8px; gap: 8px; }
  .app-topbar, .panel { border-radius: 18px; }
  .control-grid { grid-template-columns: 1fr; }
  .stat-grid, .mini-calculator { grid-template-columns: repeat(2, 1fr); }
  .result-row { grid-template-columns: 42px minmax(0, 1fr); }
  .result-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .history-row { grid-template-columns: 1fr; }
  .history-actions { justify-content: flex-start; }
}

.result-flag .lang-flag-emoji { width: auto; height: auto; border: 0; background: transparent; font-size: 24px; }
.empty-results { margin: 10px; color: var(--muted); font-size: 13px; font-weight: 750; }

/* UI stage 1.1 — calm compact fix */
:root {
  --bg: #f3f5f8;
  --bg-2: #edf1f6;
  --panel: #ffffff;
  --panel-soft: #f7f9fc;
  --line: #d7dfeb;
  --line-strong: #bdc8d8;
  --text: #172033;
  --soft-text: #344054;
  --muted: #667085;
  --accent: #5b5ce2;
  --accent-2: #4f46e5;
  --blue: #2563eb;
  --ok: #078a52;
  --warn: #b86e00;
  --err: #c3362b;
  --violet: #5b5ce2;
  --shadow: 0 10px 28px rgba(15, 23, 42, .07);
  --shadow-soft: 0 4px 14px rgba(15, 23, 42, .055);
}

html, body {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
body {
  background: linear-gradient(180deg, #f5f7fa 0%, #edf1f6 100%);
}

.app-shell {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  gap: 10px;
  padding: 10px;
}

.app-topbar, .panel {
  box-shadow: var(--shadow);
}

.app-topbar {
  padding: 12px;
}

.brand-logo {
  background: #edf3ff;
  border-color: #c9d7f2;
  color: var(--accent);
}

.control-grid {
  grid-template-columns: minmax(205px, 1.05fr) minmax(160px, .86fr) minmax(130px, .58fr) minmax(150px, .62fr) minmax(210px, 1fr) minmax(145px, .66fr) auto auto;
  gap: 7px;
  margin-top: 10px;
}
.control-box {
  min-height: 40px;
  padding: 7px 11px;
  border-radius: 14px;
  box-shadow: none;
}
.btn, button, .download-all, .single-download, .result-actions a, .history-actions a, .ghost-link {
  min-height: 38px;
  border-radius: 13px;
  box-shadow: none;
}
.primary, .btn.primary {
  background: linear-gradient(135deg, #6264e8, #5147d8);
  border-color: rgba(91, 92, 226, .75);
  box-shadow: 0 8px 18px rgba(91, 92, 226, .18);
}

.top-footer {
  margin-top: 8px;
}
.mini-calculator div {
  padding: 7px 10px;
  box-shadow: none;
}

.workspace {
  min-height: 0;
  overflow: hidden;
  grid-template-columns: 430px minmax(0, 1fr);
  gap: 10px;
}
.left-column, .right-column {
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  gap: 10px;
}

.panel-head, .preview-head {
  padding: 12px 14px;
  background: #fff;
}
.panel h2, .preview-head h2 {
  font-size: 17px;
}
.panel p, .preview-head p {
  font-size: 12px;
  line-height: 1.35;
}

.progress-panel {
  flex: 0 0 auto;
  max-height: min(44%, 340px);
}
.language-panel {
  min-height: 0;
  flex: 1 1 auto;
}
.language-head {
  align-items: flex-start;
  gap: 8px;
}
.language-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: -3px;
  flex: 0 0 auto;
}
.language-count {
  flex: 0 0 auto;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #344054;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}
.language-toolbar {
  padding: 10px 12px;
  gap: 7px;
  background: #f8fafc;
}
.language-toolbar button, .language-toolbar select {
  min-height: 34px;
  padding: 6px 9px;
  font-size: 12px;
}

.languages {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  padding: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  background: #f8fafc;
}
.lang, .language-choice {
  min-width: 0;
  min-height: 50px;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 9px;
  border-radius: 14px;
  box-shadow: none;
  overflow: hidden;
}
.lang:has(input:checked), .language-choice:has(input:checked) {
  background: #eef2ff;
  border-color: #a8b2ff;
}
.lang-flag, .lang-flag-emoji, .result-flag {
  width: 34px;
  height: 34px;
  min-width: 34px;
  max-width: 34px;
  border-radius: 11px;
  font-size: 20px;
  overflow: hidden;
  justify-self: center;
  align-self: center;
  background: #f1f5f9;
}
.lang-flag-img {
  width: 28px;
  height: 21px;
  display: block;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
}
.result-flag .lang-flag-img {
  width: 28px;
  height: 21px;
}
.result-flag .lang-flag-emoji {
  width: auto;
  height: auto;
  min-width: 0;
  max-width: none;
  border: 0;
  background: transparent;
  font-size: 20px;
}
.language-info strong {
  font-size: 12.5px;
}
.language-info span {
  margin-top: 2px;
  font-size: 10.5px;
}

.global-downloads {
  flex: 0 0 auto;
  min-height: 64px;
  padding: 10px 14px;
}
.preview-empty, .preview-panel {
  flex: 1 1 auto;
  min-height: 0;
}
.preview-empty {
  padding: 24px 20px;
}
.preview-empty h2 {
  font-size: 22px;
}
.history-panel {
  flex: 0 0 180px;
  min-height: 150px;
  max-height: 210px;
}
.history-list {
  background: #f8fafc;
}
.preview-panel pre {
  background: #fff;
  color: #172033;
}

/* Hide full-page scrollbars caused by nested panels; scroll only inside language/results/history/text areas. */
.right-column > .panel,
.left-column > .panel {
  min-height: 0;
}
.results,
.languages,
.history-list,
.preview-panel pre {
  scrollbar-width: thin;
  scrollbar-color: #a7b1c2 transparent;
}

@media (max-width: 1280px) {
  .workspace { grid-template-columns: 400px minmax(0, 1fr); }
  .control-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1020px) {
  html, body { overflow: auto; }
  .app-shell { height: auto; min-height: 100dvh; overflow: visible; }
  .workspace { overflow: visible; }
  .left-column, .right-column { overflow: visible; }
  .history-panel { flex-basis: auto; max-height: none; }
}

/* UI stage 1.2 — hard scroll and language-card fix */
html,
body {
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body {
  background: #f2f4f7 !important;
}

.app-shell:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 10px !important;
}

.app-topbar {
  min-height: 0 !important;
}

.workspace {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  grid-template-columns: minmax(390px, 420px) minmax(0, 1fr) !important;
  gap: 10px !important;
}

.left-column,
.right-column {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.left-column {
  display: flex !important;
  flex-direction: column !important;
}

.right-column {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) minmax(132px, 172px) !important;
}

.progress-panel.hidden + .language-panel,
.language-panel {
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
}

.progress-panel {
  max-height: 320px !important;
  overflow: hidden !important;
}

.languages,
.results,
.history-list,
.preview-panel pre {
  min-height: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
}

.languages {
  height: auto !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  padding: 8px !important;
  gap: 7px !important;
}

.language-choice {
  position: relative !important;
  min-width: 0 !important;
  overflow: hidden !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
}

.language-choice input[type="checkbox"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.lang-flag,
.lang-flag-emoji,
.result-flag {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.lang-flag-img {
  width: 27px !important;
  height: 20px !important;
  max-width: 27px !important;
  max-height: 20px !important;
  object-fit: cover !important;
  display: block !important;
}

.language-info {
  min-width: 0 !important;
  overflow: hidden !important;
}

.language-info strong,
.language-info span {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.preview-empty,
.preview-panel,
.history-panel {
  min-height: 0 !important;
  max-height: none !important;
}

.preview-empty {
  height: 100% !important;
}

.history-panel {
  height: auto !important;
}

@media (max-width: 1280px) {
  .workspace { grid-template-columns: minmax(370px, 400px) minmax(0, 1fr) !important; }
}

@media (max-width: 1020px) {
  html, body { overflow: hidden !important; }
  .app-shell:not(.hidden) {
    position: fixed !important;
    inset: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .workspace {
    grid-template-columns: 1fr !important;
    overflow: hidden !important;
  }
  .left-column,
  .right-column {
    overflow: hidden !important;
  }
}


/* UI stage 1.3 — calmer light background + day/night theme switch */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --bg: #e9eef5;
  --bg-2: #e4eaf2;
  --panel: #fbfcfe;
  --panel-soft: #f3f6fa;
  --line: #cfd8e6;
  --line-strong: #b5c1d1;
  --text: #172033;
  --soft-text: #344054;
  --muted: #667085;
  --accent: #5558d9;
  --accent-2: #473fc8;
  --blue: #2464d6;
  --ok: #047b4b;
  --warn: #a36200;
  --err: #bd3027;
  --violet: #5558d9;
}

html[data-theme="light"] body,
body[data-theme="light"] {
  background: linear-gradient(180deg, #e9eef5 0%, #e3e9f2 100%) !important;
}

.theme-toggle {
  min-width: 94px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111827;
  --bg-2: #0f172a;
  --panel: #182235;
  --panel-soft: #1e293b;
  --line: #344154;
  --line-strong: #475569;
  --text: #f1f5f9;
  --soft-text: #d7dee9;
  --muted: #9aa8ba;
  --accent: #8b7cf6;
  --accent-2: #6d5df0;
  --blue: #60a5fa;
  --ok: #34d399;
  --warn: #fbbf24;
  --err: #fb7185;
  --violet: #a78bfa;
  --shadow: 0 14px 34px rgba(0, 0, 0, .26);
  --shadow-soft: 0 8px 20px rgba(0, 0, 0, .20);
}

html[data-theme="dark"] body,
body[data-theme="dark"] {
  background: linear-gradient(180deg, #111827 0%, #0f172a 100%) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .app-topbar,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .auth-card {
  background: rgba(24, 34, 53, .96) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .panel-head,
html[data-theme="dark"] .preview-head,
html[data-theme="dark"] .global-downloads,
html[data-theme="dark"] .footer-actions,
html[data-theme="dark"] .stats {
  background: #182235 !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .languages,
html[data-theme="dark"] .results,
html[data-theme="dark"] .history-list,
html[data-theme="dark"] .language-toolbar,
html[data-theme="dark"] .text-area {
  background: #111827 !important;
}

html[data-theme="dark"] .control-box,
html[data-theme="dark"] .selectbox,
html[data-theme="dark"] .uploadbox,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .mini-calculator div,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .filter,
html[data-theme="dark"] .row,
html[data-theme="dark"] .result-row,
html[data-theme="dark"] .history-row,
html[data-theme="dark"] .lang,
html[data-theme="dark"] .language-choice,
html[data-theme="dark"] .search-input,
html[data-theme="dark"] .manual-text-modal textarea,
html[data-theme="dark"] .modal-close,
html[data-theme="dark"] .template-select,
html[data-theme="dark"] .btn,
html[data-theme="dark"] button,
html[data-theme="dark"] .download-all,
html[data-theme="dark"] .single-download,
html[data-theme="dark"] .result-actions a,
html[data-theme="dark"] .history-actions a,
html[data-theme="dark"] .ghost-link,
html[data-theme="dark"] .badge {
  background: #202b3d !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] button:hover,
html[data-theme="dark"] .download-all:hover,
html[data-theme="dark"] .result-actions a:hover,
html[data-theme="dark"] .history-actions a:hover,
html[data-theme="dark"] .ghost-link:hover,
html[data-theme="dark"] .lang:hover,
html[data-theme="dark"] .language-choice:hover,
html[data-theme="dark"] .result-row:hover,
html[data-theme="dark"] .history-row:hover {
  background: #263449 !important;
  border-color: #5b6b80 !important;
}

html[data-theme="dark"] .primary,
html[data-theme="dark"] .btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  border-color: rgba(167, 139, 250, .72) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(109, 93, 240, .22) !important;
}

html[data-theme="dark"] .danger,
html[data-theme="dark"] .btn.danger {
  background: rgba(251, 113, 133, .12) !important;
  border-color: rgba(251, 113, 133, .35) !important;
  color: #fecdd3 !important;
}

html[data-theme="dark"] .warning,
html[data-theme="dark"] .btn.warning,
html[data-theme="dark"] .notice {
  background: rgba(251, 191, 36, .12) !important;
  border-color: rgba(251, 191, 36, .36) !important;
  color: #fde68a !important;
}

html[data-theme="dark"] .download-all {
  background: rgba(52, 211, 153, .12) !important;
  border-color: rgba(52, 211, 153, .34) !important;
  color: #a7f3d0 !important;
}

html[data-theme="dark"] .download-all.disabled {
  opacity: .45 !important;
}

html[data-theme="dark"] .brand h1,
html[data-theme="dark"] .panel h2,
html[data-theme="dark"] .preview-head h2,
html[data-theme="dark"] .preview-empty h2,
html[data-theme="dark"] .auth-card h1,
html[data-theme="dark"] .download-info strong,
html[data-theme="dark"] .result-main strong,
html[data-theme="dark"] .history-main strong,
html[data-theme="dark"] .language-info strong,
html[data-theme="dark"] .mini-calculator strong,
html[data-theme="dark"] .select-box select,
html[data-theme="dark"] .template-select,
html[data-theme="dark"] .control-box select,
html[data-theme="dark"] .file-box input[type="file"] {
  color: var(--text) !important;
}

html[data-theme="dark"] .brand p,
html[data-theme="dark"] .status,
html[data-theme="dark"] .panel p,
html[data-theme="dark"] .preview-head p,
html[data-theme="dark"] .download-info span,
html[data-theme="dark"] .result-main span,
html[data-theme="dark"] .history-main span,
html[data-theme="dark"] .language-info span,
html[data-theme="dark"] .control-box > span,
html[data-theme="dark"] .control-box summary span,
html[data-theme="dark"] .mini-calculator span,
html[data-theme="dark"] .stat-card span,
html[data-theme="dark"] .auth-sub,
html[data-theme="dark"] .empty-results {
  color: var(--muted) !important;
}

html[data-theme="dark"] .brand-logo,
html[data-theme="dark"] .lang-flag,
html[data-theme="dark"] .lang-flag-emoji,
html[data-theme="dark"] .result-flag,
html[data-theme="dark"] .flag,
html[data-theme="dark"] .bigflag {
  background: #273449 !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .lang:has(input:checked),
html[data-theme="dark"] .language-choice:has(input:checked),
html[data-theme="dark"] .result-row.active,
html[data-theme="dark"] .row.active {
  background: rgba(139, 124, 246, .18) !important;
  border-color: rgba(167, 139, 250, .70) !important;
}

html[data-theme="dark"] .progress-track,
html[data-theme="dark"] .bar {
  background: #101827 !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .preview-panel pre,
html[data-theme="dark"] .text-box {
  background: #101827 !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .preview-empty {
  background: #182235 !important;
}
html[data-theme="dark"] .modal-backdrop {
  background: rgba(2, 6, 23, .62) !important;
}

html[data-theme="dark"] .modal-card {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .modal-head {
  background: #182235 !important;
  border-color: var(--line) !important;
}


html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #7f8da3 !important;
}

html[data-theme="dark"] option {
  background: #202b3d;
  color: var(--text);
}

html[data-theme="dark"] .green { color: var(--ok) !important; }
html[data-theme="dark"] .amber { color: var(--warn) !important; }
html[data-theme="dark"] .red { color: var(--err) !important; }
html[data-theme="dark"] .violet { color: var(--violet) !important; }
html[data-theme="dark"] .blue { color: var(--blue) !important; }

html[data-theme="dark"] .results,
html[data-theme="dark"] .languages,
html[data-theme="dark"] .history-list,
html[data-theme="dark"] .preview-panel pre {
  scrollbar-color: #64748b transparent;
}

[data-theme="dark"] .top-status {
  background: var(--panel-soft);
  border-color: var(--line);
}
[data-theme="dark"] .top-status strong { color: var(--text); }

/* UI stage 1.6 — progressive intake flow + drag/drop */
:root,
html[data-theme="light"] {
  --bg: #e6ebf2;
  --bg-2: #dde5ef;
  --panel: #f8fafc;
  --panel-soft: #eef3f8;
}
html[data-theme="light"] body,
body[data-theme="light"] {
  background: linear-gradient(180deg, #e5ebf3 0%, #dfe7f0 100%) !important;
}
.app-topbar {
  padding: 12px !important;
}
.control-grid {
  grid-template-columns: minmax(330px, 1.35fr) minmax(270px, 1.05fr) repeat(5, minmax(148px, .72fr)) auto auto !important;
  align-items: stretch !important;
  gap: 10px !important;
}
.control-box.intake-box {
  min-height: 76px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 12px 16px !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 8px 24px rgba(29, 41, 57, .06) !important;
  cursor: pointer;
}
.control-box.intake-box:hover {
  border-color: rgba(85, 88, 217, .45) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5ff 100%) !important;
  box-shadow: 0 12px 32px rgba(85, 88, 217, .10) !important;
}
.file-box {
  border-style: dashed !important;
  border-width: 2px !important;
  position: relative !important;
}
.file-box::after {
  content: 'drop';
  position: absolute;
  right: 14px;
  top: 13px;
  min-width: 44px;
  text-align: center;
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(85, 88, 217, .10);
  color: var(--accent);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.file-box.drag-over {
  border-color: var(--accent) !important;
  background: #eef2ff !important;
  transform: translateY(-1px);
}
.file-box.has-file {
  border-style: solid !important;
  border-color: rgba(4, 123, 75, .42) !important;
  background: #f0fdf7 !important;
}
.file-box.has-file::after {
  content: 'ready';
  background: rgba(4, 123, 75, .12);
  color: var(--ok);
}
.file-box input[type="file"] {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  width: 100% !important;
  height: 100% !important;
}
.control-kicker {
  display: block;
  color: var(--muted) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.intake-main {
  display: block;
  max-width: 100%;
  color: var(--text);
  font-size: 15px;
  line-height: 1.15;
  font-weight: 1000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.intake-sub {
  display: block;
  max-width: 100%;
  color: var(--muted) !important;
  font-size: 12px !important;
  line-height: 1.2;
  font-weight: 800 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.manual-text-trigger .intake-sub.has-text {
  color: var(--ok) !important;
}
.progressive-control {
  opacity: 0;
  transform: translateX(18px) scale(.98);
  pointer-events: none;
  max-width: 0;
  min-width: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-width: 0 !important;
  overflow: hidden !important;
  transition: opacity .22s ease, transform .22s ease, max-width .24s ease, padding .22s ease, border-width .22s ease;
}
.control-grid.has-content .mode-control,
.control-grid.has-content .quality-control,
.control-grid.has-mode .voice-control,
.control-grid.has-mode .telegram-delivery-control,
.control-grid.has-mode .run-control,
.control-grid.has-voice .voice-dependent {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
  max-width: 520px;
  min-width: 0;
  padding: 8px 12px !important;
  border-width: 1px !important;
  animation: stageIn .24s ease both;
}
.control-grid.has-content .intake-box {
  min-height: 58px !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}
.control-grid.has-content .file-box::after { display: none; }
@keyframes stageIn {
  from { opacity: 0; transform: translateX(18px) scale(.98); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
.mode-control select:invalid,
.mode-control select option[value=""] {
  color: var(--muted);
}
.tooltip-control { position: relative; }
.tooltip-control:hover::after {
  content: attr(data-tooltip);
  position: fixed;
  z-index: 10000;
  left: min(var(--tooltip-x, 50vw), calc(100vw - 360px));
  top: calc(var(--tooltip-y, 0px) + 18px);
  width: min(340px, calc(100vw - 24px));
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: #172033;
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 750;
  white-space: normal;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .24);
}
.ios-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  margin-left: auto;
  color: var(--text);
  font-weight: 950;
}
.ios-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ios-track {
  width: 50px;
  height: 28px;
  border-radius: 999px;
  background: #f97066;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .10);
  transition: background .18s ease;
  position: relative;
  flex: 0 0 auto;
}
.ios-knob {
  position: absolute;
  width: 24px;
  height: 24px;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .25);
  transition: transform .18s ease;
}
.ios-switch input:checked + .ios-track {
  background: #12b76a;
}
.ios-switch input:checked + .ios-track .ios-knob {
  transform: translateX(22px);
}
.ios-label {
  min-width: 24px;
  font-size: 13px;
  color: var(--soft-text);
}
.compact-switch {
  margin-left: auto;
  gap: 7px;
}
.top-footer {
  margin-top: 8px !important;
}
.status {
  display: none;
  min-height: 0;
}
.status.status-visible {
  display: block;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .60);
  border: 1px solid var(--line);
}
.mini-calculator {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
}
.control-grid.has-content + .top-footer .mini-calculator,
.top-footer.has-content .mini-calculator {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
html[data-theme="dark"] .control-box.intake-box {
  background: #202b3d !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .control-box.intake-box:hover,
html[data-theme="dark"] .file-box.drag-over {
  background: #263449 !important;
  border-color: rgba(167, 139, 250, .55) !important;
}
html[data-theme="dark"] .file-box.has-file {
  background: rgba(18, 183, 106, .12) !important;
  border-color: rgba(52, 211, 153, .42) !important;
}
html[data-theme="dark"] .tooltip-control:hover::after {
  background: #f8fafc;
  color: #172033;
  border-color: rgba(255,255,255,.20);
}
html[data-theme="dark"] .ios-label,
html[data-theme="dark"] .intake-main { color: var(--text) !important; }
html[data-theme="dark"] .status.status-visible { background: #202b3d; }

@media (max-width: 1480px) {
  .control-grid {
    grid-template-columns: minmax(280px, 1.1fr) minmax(235px, .95fr) repeat(3, minmax(150px, .7fr)) auto !important;
  }
}
@media (max-width: 1280px) {
  .control-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 1020px) {
  .control-grid { grid-template-columns: 1fr 1fr !important; }
  .control-box.intake-box { min-height: 68px !important; }
}

/* reliability override: hidden steps should not reserve grid columns */
.progressive-control {
  display: none !important;
  opacity: 0;
  transform: translateX(16px);
}
.control-grid.has-content .mode-control,
.control-grid.has-content .quality-control,
.control-grid.has-mode .voice-control,
.control-grid.has-mode .telegram-delivery-control,
.control-grid.has-mode .run-control,
.control-grid.has-voice .voice-dependent {
  display: flex !important;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  max-width: none;
  border-width: 1px !important;
}
.control-grid.has-mode .run-control {
  display: inline-flex !important;
}

/* UI stage 1.8 — full progress workspace + new task reset */
.new-task-box {
  display: none !important;
  border-color: rgba(195, 54, 43, .34) !important;
  background: linear-gradient(180deg, #fff5f4 0%, #ffe7e4 100%) !important;
  color: var(--err) !important;
  box-shadow: 0 10px 26px rgba(195, 54, 43, .12) !important;
}
.new-task-box .control-kicker,
.new-task-box .intake-sub {
  color: rgba(195, 54, 43, .76) !important;
}
.new-task-box .intake-main {
  color: var(--err) !important;
  font-size: 17px !important;
}
.new-task-box:hover {
  border-color: rgba(195, 54, 43, .56) !important;
  background: linear-gradient(180deg, #fff1ef 0%, #ffd9d4 100%) !important;
  box-shadow: 0 14px 34px rgba(195, 54, 43, .18) !important;
}

.app-shell.job-final .file-box {
  display: none !important;
}
.app-shell.job-final .new-task-box {
  display: flex !important;
}
.app-shell.job-final .run-control {
  display: none !important;
}

.app-shell.job-active .language-panel {
  display: none !important;
}
.app-shell.job-active .left-column {
  display: flex !important;
  min-height: 0 !important;
}
.app-shell.job-active .progress-panel {
  flex: 1 1 auto !important;
  max-height: none !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}
.app-shell.job-active .progress-panel.hidden {
  display: none !important;
}
.app-shell.job-active .progress-panel .panel-head {
  padding: 18px 18px 14px !important;
}
.app-shell.job-active .progress-panel .panel-head h2 {
  font-size: 24px !important;
}
.app-shell.job-active .progress-panel .panel-head p {
  font-size: 15px !important;
  font-weight: 850 !important;
}
.app-shell.job-active .progress-panel .stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 14px 18px 8px !important;
}
.app-shell.job-active .progress-panel .stat-card {
  min-height: 82px !important;
  border-radius: 18px !important;
  padding: 14px !important;
}
.app-shell.job-active .progress-panel .stat-card span {
  font-size: 12px !important;
}
.app-shell.job-active .progress-panel .stat-card strong {
  font-size: 31px !important;
  margin-top: 8px !important;
}
.app-shell.job-active .progress-track {
  height: 15px !important;
  margin: 12px 18px 16px !important;
}
.app-shell.job-active .result-tools {
  padding: 0 18px 14px !important;
}
.app-shell.job-active .filter-tabs button {
  min-height: 39px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
}
.app-shell.job-active .search-input {
  min-height: 46px !important;
  font-size: 14px !important;
}
.app-shell.job-active .results {
  min-height: 0 !important;
  padding: 0 14px 14px !important;
  gap: 10px !important;
}
.app-shell.job-active .result-row {
  min-height: 66px !important;
  border-radius: 18px !important;
  padding: 12px !important;
}

html[data-theme="dark"] .new-task-box {
  background: rgba(251, 113, 133, .13) !important;
  border-color: rgba(251, 113, 133, .40) !important;
  color: #fecdd3 !important;
}
html[data-theme="dark"] .new-task-box .control-kicker,
html[data-theme="dark"] .new-task-box .intake-sub {
  color: #fda4af !important;
}
html[data-theme="dark"] .new-task-box .intake-main {
  color: #fecdd3 !important;
}
html[data-theme="dark"] .new-task-box:hover {
  background: rgba(251, 113, 133, .20) !important;
  border-color: rgba(251, 113, 133, .55) !important;
}

@media (max-width: 1020px) {
  .app-shell.job-active .progress-panel .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* UI stage 2.0 — readable progress workspace width fix */
.app-shell.job-active .workspace,
.app-shell.job-final .workspace {
  grid-template-columns: minmax(560px, 46vw) minmax(0, 1fr) !important;
}

.app-shell.job-active .progress-panel,
.app-shell.job-final .progress-panel {
  width: 100% !important;
  max-width: 100% !important;
}

.app-shell.job-active .progress-panel .stat-grid,
.app-shell.job-final .progress-panel .stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.app-shell.job-active .progress-panel .stat-card,
.app-shell.job-final .progress-panel .stat-card {
  min-width: 0 !important;
}

.app-shell.job-active .result-row,
.app-shell.job-final .result-row {
  grid-template-columns: 42px minmax(150px, 1fr) max-content !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.app-shell.job-active .result-actions,
.app-shell.job-final .result-actions {
  min-width: max-content !important;
  max-width: 100% !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}

.app-shell.job-active .result-actions button,
.app-shell.job-active .result-actions a,
.app-shell.job-final .result-actions button,
.app-shell.job-final .result-actions a {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.app-shell.job-active .filter-tabs,
.app-shell.job-final .filter-tabs {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: thin !important;
}

@media (max-width: 1280px) {
  .app-shell.job-active .workspace,
  .app-shell.job-final .workspace {
    grid-template-columns: minmax(520px, 50vw) minmax(0, 1fr) !important;
  }
  .app-shell.job-active .progress-panel .stat-grid,
  .app-shell.job-final .progress-panel .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1020px) {
  .app-shell.job-active .workspace,
  .app-shell.job-final .workspace {
    grid-template-columns: 1fr !important;
  }
  .app-shell.job-active .right-column,
  .app-shell.job-final .right-column {
    min-height: 420px !important;
  }
}

/* UI stage 2.1 — keep progress exactly in the original Languages column */
.app-shell.job-active .workspace,
.app-shell.job-final .workspace {
  grid-template-columns: 420px minmax(0, 1fr) !important;
}

.app-shell.job-active .left-column,
.app-shell.job-final .left-column {
  width: 100% !important;
  max-width: 420px !important;
  min-width: 0 !important;
}

.app-shell.job-active .progress-panel,
.app-shell.job-final .progress-panel {
  width: 100% !important;
  max-width: 100% !important;
}

.app-shell.job-active .progress-panel .stat-grid,
.app-shell.job-final .progress-panel .stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.app-shell.job-active .result-row,
.app-shell.job-final .result-row {
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
}

@media (max-width: 1020px) {
  .app-shell.job-active .workspace,
  .app-shell.job-final .workspace {
    grid-template-columns: 1fr !important;
  }

  .app-shell.job-active .left-column,
  .app-shell.job-final .left-column {
    width: 100% !important;
    max-width: none !important;
  }
}

/* UI stage 2.2 — compact progress rows inside the original Languages column */
.app-shell.job-active .progress-panel .panel-head,
.app-shell.job-final .progress-panel .panel-head {
  padding: 12px 14px 10px !important;
}

.app-shell.job-active .progress-panel .panel-head h2,
.app-shell.job-final .progress-panel .panel-head h2 {
  font-size: 20px !important;
}

.app-shell.job-active .progress-panel .panel-head p,
.app-shell.job-final .progress-panel .panel-head p {
  font-size: 13px !important;
}

.app-shell.job-active .progress-panel .stat-grid,
.app-shell.job-final .progress-panel .stat-grid {
  gap: 8px !important;
  padding: 10px 12px 6px !important;
}

.app-shell.job-active .progress-panel .stat-card,
.app-shell.job-final .progress-panel .stat-card {
  min-height: 0 !important;
  border-radius: 15px !important;
  padding: 9px 10px !important;
}

.app-shell.job-active .progress-panel .stat-card span,
.app-shell.job-final .progress-panel .stat-card span {
  font-size: 10px !important;
  letter-spacing: .03em !important;
}

.app-shell.job-active .progress-panel .stat-card strong,
.app-shell.job-final .progress-panel .stat-card strong {
  font-size: 24px !important;
  margin-top: 4px !important;
}

.app-shell.job-active .progress-track,
.app-shell.job-final .progress-track {
  height: 10px !important;
  margin: 8px 12px 10px !important;
}

.app-shell.job-active .result-tools,
.app-shell.job-final .result-tools {
  padding: 0 12px 10px !important;
  gap: 8px !important;
}

.app-shell.job-active .filter-tabs,
.app-shell.job-final .filter-tabs {
  gap: 6px !important;
}

.app-shell.job-active .filter-tabs button,
.app-shell.job-final .filter-tabs button {
  min-height: 32px !important;
  padding: 6px 9px !important;
  border-radius: 11px !important;
  font-size: 12px !important;
}

.app-shell.job-active .search-input,
.app-shell.job-final .search-input {
  min-height: 38px !important;
  border-radius: 13px !important;
  font-size: 13px !important;
}

.app-shell.job-active .results,
.app-shell.job-final .results {
  padding: 0 9px 9px !important;
  gap: 7px !important;
}

.app-shell.job-active .result-row,
.app-shell.job-final .result-row {
  grid-template-columns: 34px minmax(0, 1fr) max-content !important;
  gap: 7px !important;
  min-height: 54px !important;
  padding: 7px 8px !important;
  border-radius: 15px !important;
}

.app-shell.job-active .result-flag,
.app-shell.job-final .result-flag {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  font-size: 20px !important;
}

.app-shell.job-active .result-flag .lang-flag-img,
.app-shell.job-final .result-flag .lang-flag-img {
  width: 23px !important;
  height: 17px !important;
  border-radius: 4px !important;
}

.app-shell.job-active .result-main strong,
.app-shell.job-final .result-main strong {
  font-size: 13px !important;
  line-height: 1.15 !important;
}

.app-shell.job-active .result-main span,
.app-shell.job-final .result-main span {
  margin-top: 3px !important;
  font-size: 11px !important;
}

.app-shell.job-active .result-actions,
.app-shell.job-final .result-actions {
  gap: 5px !important;
  flex-wrap: nowrap !important;
}

/* The status pill duplicated the status line and caused clipping in the compact column. */
.app-shell.job-active .result-actions .badge,
.app-shell.job-final .result-actions .badge {
  display: none !important;
}

.app-shell.job-active .result-actions button,
.app-shell.job-active .result-actions a,
.app-shell.job-final .result-actions button,
.app-shell.job-final .result-actions a {
  min-height: 28px !important;
  padding: 5px 7px !important;
  border-radius: 9px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

@media (max-width: 460px) {
  .app-shell.job-active .result-row,
  .app-shell.job-final .result-row {
    grid-template-columns: 32px minmax(0, 1fr) max-content !important;
  }
  .app-shell.job-active .result-actions button,
  .app-shell.job-active .result-actions a,
  .app-shell.job-final .result-actions button,
  .app-shell.job-final .result-actions a {
    padding: 5px 6px !important;
    font-size: 10px !important;
  }
}

/* UI stage 2.3 — viewport scale for 2K/1K monitors
   Keep the same geometry, but shrink the whole app on smaller desktop widths. */
:root {
  --ui-scale: 1;
}

@media (max-width: 2200px) { :root { --ui-scale: .96; } }
@media (max-width: 1960px) { :root { --ui-scale: .90; } }
@media (max-width: 1760px) { :root { --ui-scale: .84; } }
@media (max-width: 1500px) { :root { --ui-scale: .78; } }

@media (min-width: 1021px) {
  html,
  body {
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .app-shell:not(.hidden) {
    transform: scale(var(--ui-scale)) !important;
    transform-origin: top left !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: calc(100vw / var(--ui-scale)) !important;
    height: calc(100dvh / var(--ui-scale)) !important;
    max-width: none !important;
    max-height: none !important;
  }

  /* On scaled desktops we keep the wide desktop control geometry,
     otherwise media queries were forcing 3-4 columns and breaking the flow. */
  .control-grid {
    grid-template-columns:
      minmax(300px, 1.15fr)
      minmax(240px, .90fr)
      minmax(112px, .44fr)
      minmax(118px, .46fr)
      minmax(112px, .42fr)
      minmax(150px, .58fr)
      minmax(104px, .40fr)
      minmax(96px, .36fr)
      minmax(92px, .34fr)
      auto !important;
  }

  .control-box,
  .btn,
  button,
  .download-all,
  .single-download,
  .result-actions a,
  .history-actions a,
  .ghost-link {
    white-space: nowrap !important;
  }

  .template-select,
  .control-box select {
    min-width: 0 !important;
  }

  .toprow {
    gap: 10px !important;
  }

  .brand {
    min-width: 250px !important;
  }
}

@media (max-width: 1500px) and (min-width: 1021px) {
  .brand p {
    max-width: 230px !important;
  }
  .top-status {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* UI stage 2.4 — compact control blocks + real cursor tooltips */
@media (min-width: 1021px) {
  .control-grid {
    gap: 7px !important;
    grid-template-columns:
      minmax(250px, .95fr)
      minmax(200px, .74fr)
      minmax(96px, .36fr)
      minmax(104px, .39fr)
      minmax(96px, .36fr)
      minmax(134px, .50fr)
      minmax(88px, .32fr)
      minmax(82px, .30fr)
      minmax(78px, .28fr)
      minmax(106px, .40fr)
      auto !important;
  }

  .control-box {
    min-height: 52px !important;
    padding: 7px 10px !important;
    border-radius: 15px !important;
    gap: 4px !important;
  }

  .control-box.intake-box {
    min-height: 58px !important;
    padding: 9px 12px !important;
    border-radius: 17px !important;
  }

  .control-grid.has-content .intake-box {
    min-height: 50px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  .control-box > span,
  .control-box summary span,
  .control-kicker {
    font-size: 10px !important;
    letter-spacing: .035em !important;
    line-height: 1 !important;
  }

  .intake-main {
    font-size: 13px !important;
    line-height: 1.05 !important;
  }

  .intake-sub {
    font-size: 10.5px !important;
    line-height: 1.1 !important;
  }

  .select-box select,
  .template-select,
  .control-box select {
    font-size: 12px !important;
    line-height: 1.15 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-right: 18px !important;
  }

  .toggle-box {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .ios-switch {
    gap: 5px !important;
    margin-left: 6px !important;
    flex: 0 0 auto !important;
  }

  .ios-track {
    width: 40px !important;
    height: 23px !important;
  }

  .ios-knob {
    width: 19px !important;
    height: 19px !important;
  }

  .ios-switch input:checked + .ios-track .ios-knob {
    transform: translateX(17px) !important;
  }

  .ios-label {
    min-width: 18px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  .compact-switch {
    font-size: 12px !important;
    gap: 5px !important;
    margin-left: 6px !important;
  }

  .run-control,
  .btn.primary.run-control {
    min-height: 52px !important;
    padding: 0 14px !important;
    border-radius: 15px !important;
    font-size: 14px !important;
  }

  .top-actions .btn,
  .theme-toggle,
  .ghost-link {
    min-height: 38px !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
  }

  .brand {
    min-width: 230px !important;
  }

  .brand h1 {
    font-size: 17px !important;
  }

  .brand p {
    font-size: 12px !important;
    max-width: 245px !important;
  }

  .top-status {
    min-height: 34px !important;
    padding: 6px 11px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 1760px) and (min-width: 1021px) {
  .control-grid {
    grid-template-columns:
      minmax(230px, .88fr)
      minmax(178px, .66fr)
      minmax(82px, .31fr)
      minmax(90px, .34fr)
      minmax(82px, .31fr)
      minmax(112px, .42fr)
      minmax(74px, .28fr)
      minmax(72px, .27fr)
      minmax(68px, .25fr)
      minmax(96px, .36fr)
      auto !important;
  }

  .control-box {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .run-control,
  .btn.primary.run-control {
    font-size: 13px !important;
    padding-left: 11px !important;
    padding-right: 11px !important;
  }
}

/* Disable the old pseudo-tooltip. It was clipped by compact blocks and transformed layout. */
.tooltip-control:hover::after {
  content: none !important;
  display: none !important;
}

.cursor-tooltip {
  position: fixed;
  z-index: 999999;
  max-width: 320px;
  padding: 9px 11px;
  border-radius: 13px;
  border: 1px solid rgba(15, 23, 42, .14);
  background: #162033;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 750;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .24);
  pointer-events: none;
  opacity: 0;
  transform: translate(12px, 14px) scale(.98);
  transition: opacity .08s ease, transform .08s ease;
}

.cursor-tooltip.visible {
  opacity: 1;
  transform: translate(12px, 14px) scale(1);
}

html[data-theme="dark"] .cursor-tooltip {
  background: #f8fafc;
  color: #172033;
  border-color: rgba(255, 255, 255, .22);
}

.history-countdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin-top: 5px !important;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #cfd9e8;
  background: #f3f7fc;
  color: #516174 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.1;
}
.history-countdown::before { content: '⏳'; }
.history-countdown.urgent {
  border-color: rgba(220, 138, 0, .35);
  background: #fff7e6;
  color: #9a5b00 !important;
}
.history-countdown.expired {
  border-color: rgba(217, 45, 32, .28);
  background: #fff1f0;
  color: #b42318 !important;
}
html[data-theme="dark"] .history-countdown {
  border-color: #354760;
  background: #172235;
  color: #c8d5e8 !important;
}
html[data-theme="dark"] .history-countdown.urgent {
  border-color: rgba(253, 176, 34, .38);
  background: rgba(253, 176, 34, .13);
  color: #ffd58a !important;
}
html[data-theme="dark"] .history-countdown.expired {
  border-color: rgba(249, 112, 102, .35);
  background: rgba(249, 112, 102, .12);
  color: #ffb4ad !important;
}


.ui-language-select {
  min-height: 40px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: #24364f;
  border-radius: 14px;
  padding: 8px 10px;
  font-weight: 850;
  box-shadow: 0 2px 7px rgba(29, 41, 57, .04);
}
:root[data-theme="dark"] .ui-language-select {
  background: var(--panel-soft);
  color: var(--text);
  border-color: var(--line-strong);
}
html[dir="rtl"] .toprow,
html[dir="rtl"] .control-grid,
html[dir="rtl"] .workspace {
  direction: rtl;
}
html[dir="rtl"] .brand-text,
html[dir="rtl"] .preview-panel,
html[dir="rtl"] .history-row,
html[dir="rtl"] .result-row,
html[dir="rtl"] .language-choice {
  text-align: right;
}
html[dir="rtl"] pre,
html[dir="rtl"] textarea {
  direction: rtl;
  text-align: right;
}


/* UI stage 3 — compact clickable history grid + auth language picker */
.auth-language-select {
  width: 100%;
  max-width: 220px;
  margin: 8px auto 12px;
  display: block;
  text-align: center;
}

.history-list {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-content: start !important;
  gap: 8px !important;
  padding: 10px !important;
  overflow: auto !important;
}

.history-card,
.history-row.history-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start !important;
  gap: 3px !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 76px !important;
  padding: 9px 10px !important;
  border-radius: 14px !important;
  border: 1px solid var(--line) !important;
  background: #fff !important;
  color: var(--text) !important;
  text-align: left !important;
  box-shadow: 0 2px 8px rgba(29, 41, 57, .04) !important;
}

.history-card:hover,
.history-row.history-card:hover {
  border-color: #aebcd0 !important;
  background: #fbfdff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(29, 41, 57, .08) !important;
}

.history-card strong {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  color: var(--text) !important;
}

.history-card span,
.history-card small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  color: var(--muted) !important;
}

.history-card .history-countdown {
  justify-self: start !important;
  max-width: 100% !important;
  padding: 3px 7px !important;
  margin-top: 2px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
}

.history-card.completed,
.history-card.completed_with_errors,
.history-card.completedWithErrors {
  border-color: rgba(3, 152, 85, .22) !important;
}

.history-card.failed,
.history-card.error {
  border-color: rgba(217, 45, 32, .25) !important;
  background: #fffafa !important;
}

.history-card.running,
.history-card.queued {
  border-color: rgba(21, 112, 239, .25) !important;
  background: #f7fbff !important;
}

html[data-theme="dark"] .history-card,
html[data-theme="dark"] .history-row.history-card {
  background: var(--panel-soft) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .history-card:hover,
html[data-theme="dark"] .history-row.history-card:hover {
  background: #172235 !important;
  border-color: #465a75 !important;
}

html[data-theme="dark"] .history-card strong { color: var(--text) !important; }
html[data-theme="dark"] .history-card span,
html[data-theme="dark"] .history-card small { color: var(--muted) !important; }

@media (max-width: 1500px) {
  .history-list { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 1180px) {
  .history-list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  .history-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 520px) {
  .history-list { grid-template-columns: 1fr !important; }
}

/* ─── 1.39.0. Плотная «История» ────────────────────────────────────────────
 * Было: сетка из пяти крупных карточек во всю ширину. Пять проектов — и всё,
 * дальше некуда, а причина ошибки не помещалась вообще. Стало: список строк.
 * Той же высотой панель показывает вдвое больше проектов, в строке видно, что
 * именно сломалось, и рядом стоит кнопка «Заново». */
.history-list {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 5px !important;
}

.history-card,
.history-row.history-card {
  display: grid !important;
  grid-template-columns: 8px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  /* Строка в колонке-флексе обязана держать свою высоту. Без этого браузер
     сжимает её под доступное место, и содержимое строк налезает друг на друга —
     ровно то, что было видно на первом же скриншоте. */
  flex: 0 0 auto !important;
  min-height: 44px !important;
  height: auto !important;
  overflow: hidden !important;
  width: 100% !important;
  padding: 7px 10px !important;
  border-radius: 11px !important;
  cursor: pointer;
}

.history-card:hover,
.history-row.history-card:hover {
  transform: none;
  box-shadow: 0 4px 12px rgba(29, 41, 57, .07) !important;
}

.history-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* Открытый сейчас проект видно в списке — иначе, открыв его, непонятно, где ты. */
.history-card.is-open,
.history-row.history-card.is-open {
  border-color: rgba(21, 112, 239, .55) !important;
  box-shadow: inset 3px 0 0 var(--blue) !important;
}

.history-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #b6c2d3; align-self: center;
}
.history-card.completed .history-dot,
.history-card.completed_with_errors .history-dot { background: #039855; }
.history-card.failed .history-dot,
.history-card.error .history-dot { background: #d92d20; }
.history-card.running .history-dot,
.history-card.queued .history-dot { background: #1570ef; }
.history-card.cancelled .history-dot,
.history-card.interrupted .history-dot { background: #d8a015; }

.history-card .history-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: min-content !important;
  gap: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
}
.history-card .history-main strong,
.history-card .history-meta,
.history-card .history-problem {
  line-height: 1.25 !important;
  min-height: 0 !important;
}
.history-card .history-main strong { font-size: 12px !important; }
.history-card .history-meta {
  font-size: 11px !important;
  font-weight: 750 !important;
  color: var(--muted) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.history-card .history-problem {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #b42318 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.history-card .history-side {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.history-restart {
  min-height: 26px !important;
  padding: 3px 9px !important;
  border-radius: 9px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  white-space: nowrap;
}

html[data-theme="dark"] .history-card .history-problem { color: #ffb4ad !important; }
html[data-theme="dark"] .history-card.is-open,
html[data-theme="dark"] .history-row.history-card.is-open {
  border-color: rgba(96, 165, 250, .6) !important;
  box-shadow: inset 3px 0 0 #60a5fa !important;
}

/* Панель может показать больше строк: раньше её высота была рассчитана на два
 * ряда карточек, теперь в те же пиксели помещается семь-восемь проектов. */
.history-panel {
  flex: 0 0 234px !important;
  min-height: 150px !important;
  max-height: 268px !important;
}

@media (max-width: 1020px) {
  .history-panel { flex: 1 1 auto !important; max-height: none !important; }
}

html[dir="rtl"] .history-card,
html[dir="rtl"] .history-row.history-card {
  text-align: right !important;
}
html[dir="rtl"] .history-card .history-countdown {
  justify-self: end !important;
}

/* i18n flag picker + notification settings */
.native-language-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
.custom-language-picker {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  z-index: 50;
}
.custom-language-button {
  min-height: 40px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: #24364f;
  border-radius: 14px;
  padding: 7px 10px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 2px 7px rgba(29, 41, 57, .04);
}
.custom-language-button::after {
  content: '▾';
  color: var(--muted);
  font-size: 11px;
  margin-left: 2px;
}
.custom-language-button img,
.custom-language-menu img {
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(15, 23, 42, .12);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
  flex: 0 0 auto;
}
.custom-language-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  width: 190px;
  max-height: 270px;
  overflow: auto;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  box-shadow: 0 20px 50px rgba(15, 23, 42, .18);
  display: none;
}
.custom-language-picker.open .custom-language-menu { display: grid; gap: 4px; }
.custom-language-menu button {
  border: 0;
  background: transparent;
  color: var(--text);
  border-radius: 12px;
  padding: 8px 9px;
  display: grid;
  grid-template-columns: 24px 34px 1fr;
  align-items: center;
  gap: 8px;
  text-align: left;
  font-weight: 850;
}
.custom-language-menu button:hover,
.custom-language-menu button.active {
  background: rgba(124, 58, 237, .10);
  color: var(--text);
}
.custom-language-menu button span { font-weight: 950; }
.custom-language-menu button strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-language-select + .custom-language-picker {
  margin: 10px auto 4px;
  justify-content: center;
}
.auth-language-select + .custom-language-picker .custom-language-menu {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
.notifications-toggle { min-width: 0; }
.notifications-modal { width: min(620px, 100%); }
.notifications-list {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: var(--panel);
}
.notification-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel-soft);
}
.notification-setting strong {
  display: block;
  font-size: 15px;
  color: var(--text);
}
.notification-setting small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.35;
}
html[data-theme="dark"] .custom-language-button {
  background: var(--panel-soft);
  color: var(--text);
  border-color: var(--line-strong);
}
html[data-theme="dark"] .custom-language-menu {
  background: var(--panel);
  border-color: var(--line-strong);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .45);
}
html[dir="rtl"] .custom-language-menu {
  right: auto;
  left: 0;
}
html[dir="rtl"] .custom-language-menu button {
  text-align: right;
}
@media (max-width: 1280px) {
  .notifications-toggle { padding-left: 9px; padding-right: 9px; }
  .notifications-toggle { font-size: 0; }
  .notifications-toggle::before { content: '🔔'; font-size: 15px; }
}

.auto-download-toggle { min-width: 0; }
.auto-download-modal { width: min(680px, 100%); }
.auto-download-folder-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: 18px;
}
.auto-download-folder-card strong { display: block; color: var(--text); font-size: 15px; }
.auto-download-folder-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; font-weight: 800; }
.auto-download-folder-card.is-ready {
  border-color: rgba(3, 152, 85, .28);
  background: rgba(3, 152, 85, .06);
}
.auto-download-folder-card.is-error {
  border-color: rgba(217, 45, 32, .28);
  background: rgba(217, 45, 32, .06);
}
.auto-download-list { margin-top: 0; }
.auto-download-save-hint { color: var(--muted); font-weight: 800; font-size: 13px; }
html[data-theme="dark"] .auto-download-folder-card {
  background: var(--panel-soft);
  border-color: var(--line);
}
html[data-theme="dark"] .auto-download-folder-card.is-ready {
  border-color: rgba(50, 213, 131, .28);
  background: rgba(50, 213, 131, .08);
}
html[data-theme="dark"] .auto-download-folder-card.is-error {
  border-color: rgba(249, 112, 102, .28);
  background: rgba(249, 112, 102, .08);
}
@media (max-width: 1500px) {
  .auto-download-toggle { padding-left: 9px; padding-right: 9px; }
  .auto-download-toggle { font-size: 0; }
  .auto-download-toggle::before { content: '📁'; font-size: 15px; }
}


.completion-toast {
  position: fixed;
  top: calc(18px + env(safe-area-inset-top, 0px));
  right: calc(18px + env(safe-area-inset-right, 0px));
  z-index: 1200;
  width: min(420px, calc(100vw - 36px));
  display: grid;
  grid-template-columns: 46px 1fr 30px;
  gap: 12px;
  align-items: center;
  padding: 14px 14px;
  border: 1px solid rgba(3, 152, 85, .26);
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 22px 55px rgba(29, 41, 57, .18);
  color: var(--text);
  transform: translateY(-12px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  backdrop-filter: blur(16px);
}
.completion-toast:not(.hidden) {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.completion-toast-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(3, 152, 85, .10);
  color: var(--ok);
  font-size: 23px;
  border: 1px solid rgba(3, 152, 85, .22);
}
.completion-toast-body { min-width: 0; }
.completion-toast-body strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 1.2;
}
.completion-toast-body span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 750;
}
.completion-toast-close {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
}
.completion-toast-close:hover { color: var(--text); border-color: var(--line-strong); }
.completion-toast.is-warning { border-color: rgba(220, 138, 0, .32); }
.completion-toast.is-warning .completion-toast-icon { background: rgba(220, 138, 0, .10); color: var(--warn); border-color: rgba(220, 138, 0, .26); }
.completion-toast.is-error { border-color: rgba(217, 45, 32, .30); }
.completion-toast.is-error .completion-toast-icon { background: rgba(217, 45, 32, .10); color: var(--err); border-color: rgba(217, 45, 32, .24); }
html[data-theme="dark"] .completion-toast {
  background: rgba(13, 25, 44, .96);
  box-shadow: 0 22px 55px rgba(0, 0, 0, .40);
}
@media (max-width: 700px) {
  .completion-toast {
    top: auto;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 24px);
  }
}

/* Language template manager */
.template-manager-modal {
  width: min(1080px, 100%);
  max-height: min(86vh, 820px);
}
.template-manager-body {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
}
.template-manager-list-wrap {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--panel-soft);
}
.template-manager-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-weight: 950;
}
.template-manager-subhead span {
  display: inline-flex;
  min-width: 26px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(124, 58, 237, .10);
  color: var(--violet);
  font-size: 12px;
}
.template-manager-list {
  min-height: 0;
  overflow: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.template-manager-item {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--text);
  padding: 10px 11px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(29, 41, 57, .04);
}
.template-manager-item strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.template-manager-item span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.template-manager-item:hover,
.template-manager-item.active {
  background: #f4efff;
  border-color: rgba(124, 58, 237, .62);
}
.template-manager-empty-list {
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  padding: 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  background: rgba(255,255,255,.6);
  font-weight: 800;
}
.template-editor {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}
.template-editor-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px;
  text-align: center;
  color: var(--muted);
}
.template-editor-empty div { font-size: 42px; }
.template-editor-empty strong { color: var(--text); font-size: 18px; }
.template-editor-empty span { max-width: 320px; font-size: 13px; line-height: 1.45; font-weight: 750; }
.template-editor-form {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px;
  overflow: hidden;
}
.template-name-field {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
  color: var(--text);
  font-weight: 950;
}
.template-name-field span { font-size: 13px; }
.template-name-field input {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfdff;
  color: var(--text);
  padding: 0 12px;
  outline: none;
  font-weight: 850;
}
.template-name-field input:focus {
  border-color: rgba(124, 58, 237, .55);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .10);
}
.template-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  color: var(--text);
}
.template-editor-toolbar strong { font-size: 14px; }
.template-editor-toolbar span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}
.template-editor-languages {
  min-height: 0;
  flex: 1;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
  padding: 2px 2px 8px;
  align-content: start;
}
.template-language-choice {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 8px 9px;
  background: #fff;
  min-height: 46px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(29, 41, 57, .04);
}
.template-language-choice:hover { background: #fbfdff; border-color: #b7c5d8; }
.template-language-choice input { position: absolute; opacity: 0; pointer-events: none; }
.template-language-choice:has(input:checked) { background: #f4efff; border-color: rgba(124, 58, 237, .65); }
.template-manager-footer { padding-top: 12px; }
.template-manager-footer .modal-actions { flex-wrap: wrap; justify-content: flex-end; }

html[data-theme="dark"] .template-manager-list-wrap,
html[data-theme="dark"] .template-manager-subhead,
html[data-theme="dark"] .template-editor-form,
html[data-theme="dark"] .template-editor,
html[data-theme="dark"] .template-manager-footer {
  background: var(--panel);
}
html[data-theme="dark"] .template-manager-item,
html[data-theme="dark"] .template-language-choice,
html[data-theme="dark"] .template-name-field input,
html[data-theme="dark"] .template-manager-empty-list {
  background: #111827;
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="dark"] .template-manager-item:hover,
html[data-theme="dark"] .template-manager-item.active,
html[data-theme="dark"] .template-language-choice:has(input:checked) {
  background: rgba(124, 58, 237, .18);
  border-color: rgba(167, 139, 250, .58);
}

@media (max-width: 820px) {
  .template-manager-body { grid-template-columns: 1fr; }
  .template-manager-list-wrap { border-right: 0; border-bottom: 1px solid var(--line); max-height: 220px; }
  .template-editor-languages { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); }
}

/* Queue workflow: the input blocks stay available after a task starts/finishes,
   so the next file can be dropped immediately and added to the queue. */
.app-shell.job-final .file-box,
.app-shell.job-active .file-box {
  display: flex !important;
}
.app-shell.job-final .new-task-box,
.app-shell.job-active .new-task-box {
  display: none !important;
}
.app-shell.job-final .run-control,
.app-shell.job-active .run-control {
  display: inline-flex;
}
.app-shell.job-active .control-grid.has-content .run-control,
.app-shell.job-final .control-grid.has-content .run-control {
  display: inline-flex !important;
}

.history-card.queued::before,
.history-card.running::before {
  content: attr(data-job-badge);
  align-self: start;
  justify-self: start;
  max-width: 100%;
  border-radius: 999px;
  padding: 2px 7px;
  margin-bottom: 1px;
  font-size: 9px;
  line-height: 1.1;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #075985;
  background: rgba(14, 165, 233, .10);
  border: 1px solid rgba(14, 165, 233, .22);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-card.running::before {
  color: #854d0e;
  background: rgba(245, 158, 11, .12);
  border-color: rgba(245, 158, 11, .24);
}
html[data-theme="dark"] .history-card.queued::before,
html[data-theme="dark"] .history-card.running::before {
  color: #bae6fd;
  background: rgba(14, 165, 233, .16);
  border-color: rgba(125, 211, 252, .22);
}
html[data-theme="dark"] .history-card.running::before {
  color: #fde68a;
  background: rgba(245, 158, 11, .16);
  border-color: rgba(252, 211, 77, .24);
}

/* Queue input switch — when a current task is open and the user adds a new file/text,
   show language selection for the next queued task instead of the current task progress. */
.app-shell.job-active.queue-input-active .progress-panel,
.app-shell.job-final.queue-input-active .progress-panel {
  display: none !important;
}

.app-shell.job-active.queue-input-active .language-panel,
.app-shell.job-final.queue-input-active .language-panel {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.app-shell.job-active.queue-input-active .left-column,
.app-shell.job-final.queue-input-active .left-column {
  display: flex !important;
  min-height: 0 !important;
}


/* Language list controls: display language, alphabetic sort, quick search */
.language-list-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  padding: 0 12px 10px;
}
.language-list-tools input,
.language-list-tools select {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 850;
  outline: none;
}
.language-list-tools input:focus,
.language-list-tools select:focus {
  border-color: rgba(124, 58, 237, .55);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .10);
}
.language-filter-hidden { display: none !important; }
html[data-theme="dark"] .language-list-tools input,
html[data-theme="dark"] .language-list-tools select {
  background: var(--panel2);
  color: var(--text);
  border-color: var(--line);
}
@media (max-width: 760px) {
  .language-list-tools { grid-template-columns: 1fr; }
}

/* Visible language list controls */
.language-view-controls {
  display: block;
  padding: 8px 12px 7px;
  border-bottom: 1px solid var(--line);
  background: #fbfdff;
}
.language-search-field {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(29,41,57,.04);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 850;
  outline: none;
}
.language-search-field:focus {
  border-color: rgba(124,58,237,.55);
  box-shadow: 0 0 0 3px rgba(124,58,237,.10);
}
.language-hidden-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
.language-icon-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  font-weight: 1000;
  box-shadow: 0 2px 8px rgba(29,41,57,.05);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
}
.language-icon-btn:hover {
  border-color: rgba(124,58,237,.55);
  box-shadow: 0 0 0 3px rgba(124,58,237,.10);
}
.language-icon-btn:active { transform: scale(.97); }
.language-icon-btn img {
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 1px rgba(15,23,42,.08);
}
html[data-theme="dark"] .language-view-controls { background: #111827; border-color: var(--line); }
html[data-theme="dark"] .language-search-field,
html[data-theme="dark"] .language-icon-btn { background: var(--panel2); color: var(--text); border-color: var(--line); }
html[data-theme="dark"] .language-count { background: var(--panel2); color: var(--text); border-color: var(--line); }
@media (max-width: 760px) {
  .language-head { align-items: flex-start; }
  .language-head-actions { gap: 5px; }
  .language-count { padding: 6px 8px; font-size: 11px; }
  .language-icon-btn { width: 32px; height: 32px; min-width: 32px; border-radius: 11px; }
}

/* Compact template controls restored under language header */
.language-template-strip {
  display: grid !important;
  grid-template-columns: 34px 34px minmax(0, 1fr) 34px 34px;
  align-items: center;
  gap: 6px;
  padding: 7px 10px 8px !important;
  border-bottom: 1px solid var(--line);
  background: #fbfdff;
}
.language-template-strip .language-mini-btn,
.language-template-strip button {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 11px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px !important;
  line-height: 1;
  font-weight: 950;
  white-space: nowrap;
}
.language-template-strip .template-select {
  width: 100%;
  min-width: 0 !important;
  height: 34px;
  min-height: 34px !important;
  padding: 0 28px 0 10px !important;
  border-radius: 11px !important;
  font-size: 12px !important;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
}
.language-template-strip #selectSaved.hidden {
  display: none !important;
}
.template-create-btn {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--text);
  min-height: 30px;
  border-radius: 10px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(29,41,57,.04);
}
.template-create-btn:hover {
  border-color: rgba(124,58,237,.55);
  box-shadow: 0 0 0 3px rgba(124,58,237,.10);
}
.template-manager-subhead {
  flex-wrap: wrap;
}
.template-manager-subhead strong {
  flex: 1 1 auto;
  min-width: 110px;
}
html[data-theme="dark"] .language-template-strip,
html[data-theme="dark"] .template-create-btn {
  background: var(--panel2);
  color: var(--text);
  border-color: var(--line);
}

.brand-home {
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
}
.brand-home:hover .brand-logo,
.brand-home:focus-visible .brand-logo {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.16);
}
.result-stats {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}
.preview-stats {
  margin-left: 8px;
  color: var(--muted);
}


/* Manual voice modal + readable result cards */
.manual-voice-modal {
  width: min(720px, 100%);
  max-height: min(86vh, 760px);
}
.manual-voice-body {
  min-height: 0;
  display: grid;
  gap: 14px;
  padding: 14px;
  overflow: auto;
}
.manual-voice-field {
  display: grid;
  gap: 8px;
  color: var(--text);
  font-weight: 950;
}
.manual-voice-field > span, .manual-voice-field-head span { font-size: 13px; }
.manual-voice-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.manual-voice-field-head small, #manualVoiceStatus { color: var(--muted); font-size: 12px; font-weight: 850; }
#manualVoiceTemplateSelect {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfdff;
  color: var(--text);
  padding: 0 12px;
  font-weight: 850;
  outline: none;
}
.manual-voice-language-list {
  min-height: 0;
  max-height: 320px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  padding: 2px;
}
.manual-voice-language-choice {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(29, 41, 57, .04);
}
.manual-voice-language-choice:hover { background: #fbfdff; border-color: #b7c5d8; }
.manual-voice-language-choice:has(input:checked) { background: #f4efff; border-color: rgba(124, 58, 237, .65); }
.manual-voice-flag {
  width: 32px; height: 32px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #eef4ff; border: 1px solid var(--line); overflow: hidden;
}
.manual-voice-flag .lang-flag-img { width: 23px; height: 17px; object-fit: cover; border-radius: 4px; }
.manual-voice-info { min-width: 0; display: block; }
.manual-voice-info strong { display: block; color: var(--text); font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.manual-voice-info small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 850; line-height: 1.25; white-space: normal; }
.manual-voice-telegram {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel-soft); color: var(--text); font-weight: 900;
}

.app-shell.job-active .result-row,
.app-shell.job-final .result-row {
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: start !important;
  overflow: visible !important;
}
.app-shell.job-active .result-main,
.app-shell.job-final .result-main {
  min-width: 0 !important;
  overflow: visible !important;
}
.app-shell.job-active .result-main span,
.app-shell.job-final .result-main span,
.app-shell.job-active .result-stats,
.app-shell.job-final .result-stats,
.app-shell.job-active .error-text,
.app-shell.job-final .error-text {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.25 !important;
}
.app-shell.job-active .result-stats,
.app-shell.job-final .result-stats {
  margin-top: 2px !important;
  color: var(--muted) !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
}
.app-shell.job-active .result-actions,
.app-shell.job-final .result-actions {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  padding-top: 2px !important;
}
.app-shell.job-active .result-actions button,
.app-shell.job-active .result-actions a,
.app-shell.job-final .result-actions button,
.app-shell.job-final .result-actions a {
  min-width: 62px !important;
  text-align: center !important;
}
@media (min-width: 1480px) {
  .app-shell.job-active .result-row,
  .app-shell.job-final .result-row { grid-template-columns: 34px minmax(0, 1fr) auto !important; }
  .app-shell.job-active .result-actions,
  .app-shell.job-final .result-actions { grid-column: auto !important; width: auto !important; padding-top: 0 !important; }
}
html[data-theme="dark"] #manualVoiceTemplateSelect,
html[data-theme="dark"] .manual-voice-language-choice {
  background: #111827; color: var(--text); border-color: var(--line);
}
html[data-theme="dark"] .manual-voice-language-choice:hover,
html[data-theme="dark"] .manual-voice-language-choice:has(input:checked) {
  background: rgba(124, 58, 237, .18);
  border-color: rgba(167, 139, 250, .58);
}

/* UI hotfix: result cards are clickable, no separate Open button, no cramped action column */
.app-shell.job-active .result-row,
.app-shell.job-final .result-row,
.result-row {
  grid-template-columns: 36px minmax(0, 1fr) !important;
  grid-template-areas:
    "flag main"
    "actions actions" !important;
  align-items: start !important;
  gap: 8px 10px !important;
  min-height: 0 !important;
  padding: 9px 10px !important;
  overflow: visible !important;
}
.result-row.clickable { cursor: pointer; }
.result-row.clickable:hover { background: #fbfdff; border-color: #9fb3cc; box-shadow: 0 4px 14px rgba(29, 41, 57, .07); }
.result-row.clickable:focus-visible { outline: 3px solid rgba(124, 58, 237, .22); outline-offset: 2px; }
.result-row .result-flag { grid-area: flag !important; }
.result-row .result-main { grid-area: main !important; min-width: 0 !important; overflow: visible !important; padding-top: 1px; }
.result-row .result-actions {
  grid-area: actions !important;
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 6px !important;
  padding-top: 0 !important;
  overflow: visible !important;
}
.result-row .result-main strong,
.app-shell.job-active .result-main strong,
.app-shell.job-final .result-main strong {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.18 !important;
}
.result-row .result-main span,
.result-row .result-stats,
.result-row .error-text,
.app-shell.job-active .result-main span,
.app-shell.job-final .result-main span,
.app-shell.job-active .result-stats,
.app-shell.job-final .result-stats,
.app-shell.job-active .error-text,
.app-shell.job-final .error-text {
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  line-height: 1.28 !important;
}
.result-row .result-stats,
.app-shell.job-active .result-stats,
.app-shell.job-final .result-stats {
  margin-top: 2px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  color: var(--muted) !important;
}
.result-row .error-text {
  color: #b42318 !important;
  font-weight: 850 !important;
}
.result-row .result-actions button,
.result-row .result-actions a,
.app-shell.job-active .result-actions button,
.app-shell.job-active .result-actions a,
.app-shell.job-final .result-actions button,
.app-shell.job-final .result-actions a {
  min-width: 66px !important;
  min-height: 30px !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  font-size: 11.5px !important;
  line-height: 1 !important;
  text-align: center !important;
}
.result-row .result-actions .badge,
.app-shell.job-active .result-actions .badge,
.app-shell.job-final .result-actions .badge { display: none !important; }
.preview-panel pre#error,
.preview-panel pre {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}
html[data-theme="dark"] .result-row.clickable:hover { background: rgba(124, 58, 237, .10); border-color: rgba(167, 139, 250, .45); }
html[data-theme="dark"] .result-row .error-text { color: #fca5a5 !important; }

/* UI hotfix stage 4 — stable result rows: no vertical overlap, clean compact list */
.results {
  display: block !important;
  padding: 0 10px 10px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.results .result-row,
.app-shell.job-active .results .result-row,
.app-shell.job-final .results .result-row {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  grid-template-areas:
    "flag main"
    "actions actions" !important;
  grid-auto-rows: auto !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 58px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 0 8px 0 !important;
  padding: 8px 10px !important;
  gap: 6px 10px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 15px !important;
}
.results .result-row:last-child { margin-bottom: 0 !important; }
.results .result-flag,
.app-shell.job-active .results .result-flag,
.app-shell.job-final .results .result-flag {
  grid-area: flag !important;
  align-self: start !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.results .result-main,
.app-shell.job-active .results .result-main,
.app-shell.job-final .results .result-main {
  grid-area: main !important;
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  gap: 2px !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.results .result-main strong,
.app-shell.job-active .results .result-main strong,
.app-shell.job-final .results .result-main strong {
  display: block !important;
  font-size: 13px !important;
  line-height: 1.18 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.results .result-main span,
.app-shell.job-active .results .result-main span,
.app-shell.job-final .results .result-main span,
.results .result-stats,
.app-shell.job-active .results .result-stats,
.app-shell.job-final .results .result-stats {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: 10.5px !important;
  line-height: 1.18 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: var(--muted) !important;
  font-weight: 850 !important;
}
.results .error-text,
.app-shell.job-active .results .error-text,
.app-shell.job-final .results .error-text {
  display: block !important;
  max-height: 2.45em !important;
  margin: 2px 0 0 0 !important;
  font-size: 10.8px !important;
  line-height: 1.22 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  color: #b42318 !important;
  font-weight: 850 !important;
}
.results .result-actions,
.app-shell.job-active .results .result-actions,
.app-shell.job-final .results .result-actions {
  grid-area: actions !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.results .result-actions .badge,
.app-shell.job-active .results .result-actions .badge,
.app-shell.job-final .results .result-actions .badge {
  display: none !important;
}
.results .result-actions button,
.results .result-actions a,
.app-shell.job-active .results .result-actions button,
.app-shell.job-active .results .result-actions a,
.app-shell.job-final .results .result-actions button,
.app-shell.job-final .results .result-actions a {
  min-width: 58px !important;
  min-height: 28px !important;
  padding: 5px 8px !important;
  border-radius: 9px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
@media (min-width: 1480px) {
  .results .result-row,
  .app-shell.job-active .results .result-row,
  .app-shell.job-final .results .result-row {
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    grid-template-areas: "flag main actions" !important;
    align-items: center !important;
  }
  .results .result-actions,
  .app-shell.job-active .results .result-actions,
  .app-shell.job-final .results .result-actions {
    width: auto !important;
    justify-content: flex-end !important;
  }
}
html[data-theme="dark"] .results .error-text { color: #fca5a5 !important; }

.auto-download-choice-modal {
  width: min(560px, 100%);
  overflow: hidden;
}

.auto-download-choice-head {
  padding-bottom: 14px;
}

.auto-download-choice-hint {
  max-width: 420px;
}

.auto-download-segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  margin: 16px 20px 0;
  border: 1px solid var(--border, #d7e0ef);
  border-radius: 18px;
  background: rgba(80, 103, 246, .06);
}

.auto-download-segment {
  min-height: 42px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--text, #182133);
  font-weight: 900;
  font-size: 14px;
  box-shadow: none;
}

.auto-download-segment:hover {
  transform: none;
  background: rgba(255,255,255,.70);
  box-shadow: none;
}

.auto-download-segment.is-active {
  background: linear-gradient(135deg, var(--accent, #5167f6), #6b7cff);
  color: #fff;
  box-shadow: 0 10px 24px rgba(81, 103, 246, .25);
}

.auto-download-choice-summary {
  margin: 14px 20px 0;
  padding: 14px 16px;
  border: 1px solid rgba(81, 103, 246, .18);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(81, 103, 246, .08), rgba(81, 103, 246, .035));
}

.auto-download-choice-summary strong {
  display: block;
  color: var(--text, #182133);
  font-size: 15px;
  font-weight: 950;
}

.auto-download-choice-summary small {
  display: block;
  margin-top: 5px;
  color: var(--muted, #64748b);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 750;
}

.auto-download-choice-footer {
  margin-top: 16px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.auto-download-choice-footer .btn {
  min-width: 140px;
}

@media (max-width: 520px) {
  .auto-download-segmented { margin-left: 14px; margin-right: 14px; }
  .auto-download-choice-summary { margin-left: 14px; margin-right: 14px; }
  .auto-download-choice-footer { flex-direction: column-reverse; align-items: stretch; }
  .auto-download-choice-footer .btn { width: 100%; }
}

html[data-theme="dark"] .auto-download-segmented {
  background: rgba(99, 102, 241, .12);
  border-color: rgba(148, 163, 184, .22);
}

html[data-theme="dark"] .auto-download-segment:hover {
  background: rgba(255,255,255,.06);
}

html[data-theme="dark"] .auto-download-choice-summary {
  background: rgba(99, 102, 241, .10);
  border-color: rgba(148, 163, 184, .20);
}

/* autosave settings mode patch */
.auto-download-mode-box {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel-soft);
}
.auto-download-mode-label strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}
.auto-download-mode-label small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}
.auto-download-mode-box .auto-download-segmented {
  margin: 12px 0 0;
}
.auto-download-mode-summary {
  margin: 12px 0 0;
}
.auto-download-folder-card .btn {
  white-space: nowrap;
}
@media (max-width: 560px) {
  .auto-download-folder-card {
    flex-direction: column;
    align-items: stretch;
  }
  .auto-download-folder-card .btn {
    width: 100%;
  }
}


.top-balances {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 240px;
}
.top-balance-pill {
  min-width: 112px;
  padding: 8px 12px;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.12));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  display: grid;
  gap: 2px;
}
.top-balance-pill span {
  font-size: 11px;
  line-height: 1.1;
  color: var(--muted, #64748b);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.top-balance-pill strong {
  font-size: 15px;
  line-height: 1.2;
  color: var(--text, #0f172a);
  white-space: nowrap;
}
.top-balance-pill.danger {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(254, 242, 242, 0.92);
}
.top-balance-pill.danger strong { color: #dc2626; }
[data-theme="dark"] .top-balance-pill {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(148, 163, 184, 0.22);
}
[data-theme="dark"] .top-balance-pill.danger {
  background: rgba(127, 29, 29, 0.28);
  border-color: rgba(248, 113, 113, 0.45);
}
@media (max-width: 1100px) {
  .top-balances { width: 100%; order: 3; }
  .top-balance-pill { flex: 1; }
}

/* Result alphabet sorting + filename language mode */
.result-sort-tabs {
  gap: 6px;
}
.result-sort-tabs button {
  min-height: 30px;
  padding: 6px 9px;
  font-size: 11px;
  background: rgba(255,255,255,.78);
}
.file-name-mode-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.file-name-mode-control span {
  text-transform: uppercase;
  letter-spacing: .03em;
}
.file-name-mode-control select {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-weight: 950;
  padding: 3px 8px;
  outline: none;
}
html[data-theme="dark"] .file-name-mode-control select,
html[data-theme="dark"] .result-sort-tabs button {
  background: rgba(15, 23, 42, .82);
  color: var(--text);
}
@media (max-width: 900px) {
  .file-name-mode-control { width: 100%; justify-content: space-between; }
  .file-name-mode-control select { flex: 0 0 auto; }
}


/* UI: direct autosave toggle, selective voice languages, unified Telegram delivery */
.auto-download-toggle {
  border-color: rgba(217, 45, 32, .62) !important;
  background: #fff7f6 !important;
  color: var(--err) !important;
  box-shadow: inset 0 0 0 1px rgba(217, 45, 32, .08) !important;
}
.auto-download-toggle:hover {
  border-color: rgba(217, 45, 32, .88) !important;
  background: #ffefed !important;
}
.auto-download-toggle.is-active {
  border-color: rgba(4, 123, 75, .72) !important;
  background: #effcf6 !important;
  color: var(--ok) !important;
  box-shadow: inset 0 0 0 1px rgba(4, 123, 75, .08) !important;
}
.auto-download-toggle.is-active:hover {
  border-color: rgba(4, 123, 75, .95) !important;
  background: #e3f9ef !important;
}
html[data-theme="dark"] .auto-download-toggle {
  background: rgba(217, 45, 32, .12) !important;
  border-color: rgba(248, 113, 113, .62) !important;
  color: #fca5a5 !important;
}
html[data-theme="dark"] .auto-download-toggle.is-active {
  background: rgba(16, 185, 129, .13) !important;
  border-color: rgba(52, 211, 153, .62) !important;
  color: #6ee7b7 !important;
}

.source-voice-control {
  min-width: 118px !important;
  flex: 0 0 auto;
}
.voice-languages-control {
  appearance: none;
  min-width: 180px;
  cursor: pointer;
  text-align: left;
}
.voice-languages-control > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.voice-languages-control strong {
  margin-left: auto;
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}
.voice-languages-control.has-none strong { color: var(--err); }
.telegram-delivery-control { min-width: 175px; }
.telegram-delivery-control select { cursor: pointer; }
.telegram-delivery-control.is-active {
  border-color: rgba(4, 123, 75, .42);
  background: #f2fcf7;
}
html[data-theme="dark"] .telegram-delivery-control.is-active {
  border-color: rgba(52, 211, 153, .35);
  background: rgba(16, 185, 129, .10);
}

.voice-languages-modal { width: min(720px, 100%); }
.voice-languages-modal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 20px 12px;
}
.voice-languages-modal-toolbar > strong {
  color: var(--text);
  font-size: 13px;
}
.voice-languages-modal-toolbar > div {
  display: flex;
  gap: 8px;
}
.voice-language-selection-list {
  margin: 0 20px;
  max-height: min(52vh, 460px);
}
.voice-languages-save-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
@media (max-width: 680px) {
  .voice-languages-modal-toolbar { align-items: stretch; flex-direction: column; }
  .voice-languages-modal-toolbar > div { display: grid; grid-template-columns: 1fr 1fr; }
  .voice-language-selection-list { margin-left: 14px; margin-right: 14px; }
  .source-voice-control, .voice-languages-control, .telegram-delivery-control { min-width: 0 !important; }
}

/* UI follow-up v2: stable one-line desktop controls.
   Flexbox is used here because optional controls appear/disappear dynamically;
   hidden items no longer leave phantom grid columns behind. */
@media (min-width: 1021px) {
  .control-grid {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .control-grid > * {
    min-width: 0;
  }

  .control-grid > .file-box {
    flex: 1.20 1 280px !important;
    min-width: 230px !important;
    max-width: 330px !important;
  }

  .control-grid > .manual-text-trigger {
    flex: .90 1 220px !important;
    min-width: 175px !important;
    max-width: 265px !important;
  }

  .control-grid > .quality-control {
    flex: 0 1 112px !important;
    min-width: 96px !important;
    max-width: 118px !important;
  }

  .control-grid > .voice-control {
    flex: 0 1 118px !important;
    min-width: 102px !important;
    max-width: 124px !important;
  }

  .control-grid > .voice-template-box {
    flex: 0 1 154px !important;
    min-width: 126px !important;
    max-width: 166px !important;
  }

  .control-grid > .source-voice-control {
    flex: 0 0 116px !important;
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
  }

  .source-voice-control .ios-label {
    display: none !important;
  }

  .control-grid.has-voice > .voice-languages-control {
    flex: 1.05 1 235px !important;
    min-width: 190px !important;
    max-width: 420px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 10px !important;
    text-align: left !important;
  }

  .voice-languages-control > span,
  .voice-languages-control > strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .voice-languages-control > strong {
    max-width: 112px !important;
    margin-left: 0 !important;
    text-align: right !important;
  }

  .control-grid.has-mode > .telegram-delivery-control {
    flex: 1.18 1 270px !important;
    min-width: 220px !important;
    max-width: 470px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 10px !important;
  }

  .telegram-delivery-control select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .control-grid > #cancelJobBtn {
    flex: 0 0 92px !important;
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
  }

  .control-grid > .run-control,
  .control-grid > .btn.primary.run-control {
    flex: 0 0 154px !important;
    width: 154px !important;
    min-width: 154px !important;
    max-width: 154px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 1280px) and (min-width: 1021px) {
  .control-grid > .file-box { min-width: 215px !important; }
  .control-grid > .manual-text-trigger { min-width: 165px !important; }
  .control-grid > .voice-languages-control { min-width: 175px !important; }
  .control-grid > .telegram-delivery-control { min-width: 205px !important; }
  .control-grid > .run-control,
  .control-grid > .btn.primary.run-control {
    flex-basis: 144px !important;
    width: 144px !important;
    min-width: 144px !important;
    max-width: 144px !important;
  }
}

@media (max-width: 1020px) {
  .source-voice-control,
  .voice-languages-control,
  .telegram-delivery-control {
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* UI layout v3 — clean, balanced desktop header */
@media (min-width: 1501px) {
  .app-topbar {
    padding: 13px 14px 12px !important;
  }

  .toprow {
    display: grid !important;
    grid-template-columns: minmax(250px, 1fr) auto auto auto auto !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .brand {
    min-width: 0 !important;
    max-width: 360px !important;
  }

  .brand-text,
  .brand-text h1,
  .brand-text p {
    min-width: 0 !important;
  }

  .top-status {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  .top-balances {
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
  }

  .top-balance-pill {
    min-width: 122px !important;
    padding: 7px 11px !important;
    border-radius: 13px !important;
  }

  #topVoiceBalancePill {
    min-width: 230px !important;
  }

  .top-actions {
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    gap: 7px !important;
  }

  .top-actions > * {
    flex: 0 0 auto !important;
  }

  .control-grid {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 11px !important;
  }

  .control-grid > * {
    min-width: 0 !important;
  }

  .control-grid > .file-box {
    flex: 0 1 350px !important;
    width: 350px !important;
    min-width: 285px !important;
    max-width: 400px !important;
  }

  .control-grid > .manual-text-trigger {
    flex: 0 1 275px !important;
    width: 275px !important;
    min-width: 220px !important;
    max-width: 320px !important;
  }

  .control-grid > .quality-control {
    flex: 0 0 110px !important;
    width: 110px !important;
    max-width: 110px !important;
  }

  .control-grid > .voice-control {
    flex: 0 0 116px !important;
    width: 116px !important;
    max-width: 116px !important;
  }

  .control-grid > .voice-template-box {
    flex: 0 1 165px !important;
    width: 165px !important;
    min-width: 145px !important;
    max-width: 185px !important;
  }

  .control-grid > .source-voice-control {
    flex: 0 0 108px !important;
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
  }

  .control-grid.has-voice > .voice-languages-control {
    flex: 1 1 245px !important;
    width: auto !important;
    min-width: 210px !important;
    max-width: 360px !important;
  }

  .control-grid.has-mode > .telegram-delivery-control {
    flex: 1 1 300px !important;
    width: auto !important;
    min-width: 250px !important;
    max-width: 430px !important;
  }

  .control-grid.has-mode:not(.has-voice) > .telegram-delivery-control {
    flex-basis: 440px !important;
    min-width: 360px !important;
    max-width: 650px !important;
  }

  .control-grid > #cancelJobBtn {
    flex: 0 0 92px !important;
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    margin-left: auto !important;
  }

  .control-grid > .run-control,
  .control-grid > .btn.primary.run-control {
    flex: 0 0 154px !important;
    width: 154px !important;
    min-width: 154px !important;
    max-width: 154px !important;
    margin-left: auto !important;
    padding: 0 14px !important;
  }

  .control-grid > #cancelJobBtn:not(.hidden) + .run-control {
    margin-left: 0 !important;
  }

  .control-box,
  .run-control,
  .btn.primary.run-control {
    min-height: 54px !important;
    height: 54px !important;
    border-radius: 15px !important;
  }

  .control-box.intake-box,
  .control-grid.has-content .intake-box {
    min-height: 54px !important;
    height: 54px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  .source-voice-control .ios-label {
    display: none !important;
  }

  .voice-languages-control {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .telegram-delivery-control {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  .top-footer {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 8px !important;
  }

  .status.status-visible {
    flex: 0 0 315px !important;
    width: 315px !important;
    min-width: 315px !important;
    display: flex !important;
    align-items: center !important;
    padding: 7px 10px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mini-calculator {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .mini-calculator div {
    min-width: 0 !important;
    min-height: 45px !important;
    padding: 7px 10px !important;
    border-radius: 13px !important;
  }

  .mini-calculator span,
  .mini-calculator strong {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Balanced fallback for ordinary laptop widths: two deliberate rows, never overlap. */
@media (min-width: 1021px) and (max-width: 1500px) {
  .toprow {
    display: grid !important;
    grid-template-columns: minmax(230px, 1fr) auto auto auto !important;
    align-items: center !important;
    gap: 9px !important;
  }

  .top-actions {
    grid-column: 1 / -1 !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
  }

  .control-grid {
    display: grid !important;
    grid-template-columns: minmax(250px, 1.25fr) minmax(200px, 1fr) 105px 112px minmax(240px, 1.25fr) 150px !important;
    gap: 8px !important;
  }

  .control-grid.has-voice {
    grid-template-columns: minmax(250px, 1.25fr) minmax(200px, 1fr) 105px 112px 150px 105px minmax(210px, 1fr) minmax(230px, 1.15fr) 150px !important;
  }

  .control-grid > .run-control,
  .control-grid > .btn.primary.run-control {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
  }

  .top-footer {
    display: flex !important;
    align-items: stretch !important;
    gap: 7px !important;
  }

  .status.status-visible {
    flex: 0 0 260px !important;
    width: 260px !important;
    min-width: 260px !important;
    display: flex !important;
    align-items: center !important;
  }

  .mini-calculator {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1501px) {
  .control-grid > .quality-control {
    flex-basis: 138px !important;
    width: 138px !important;
    min-width: 138px !important;
    max-width: 138px !important;
  }

  .control-grid > .voice-control {
    flex-basis: 140px !important;
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
  }

  .control-grid > .voice-template-box {
    flex-basis: 170px !important;
    width: 170px !important;
    min-width: 150px !important;
    max-width: 190px !important;
  }

  .control-grid > .source-voice-control {
    flex-basis: 120px !important;
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
  }
}

@media (min-width: 1021px) and (max-width: 1280px) {
  .control-grid,
  .control-grid.has-voice {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .control-grid > .file-box,
  .control-grid > .manual-text-trigger,
  .control-grid > .quality-control,
  .control-grid > .voice-control,
  .control-grid > .voice-template-box,
  .control-grid > .source-voice-control,
  .control-grid > .voice-languages-control,
  .control-grid > .telegram-delivery-control,
  .control-grid > .run-control,
  .control-grid > .btn.primary.run-control,
  .control-grid > #cancelJobBtn {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
  }

  .top-footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .status.status-visible {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .mini-calculator {
    width: 100% !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* ===== Header cleanup: consolidated settings menu + prominent status banner ===== */
/* .app-topbar has backdrop-filter, which creates its own stacking context. Without an explicit
   position+z-index, that whole context still paints in plain DOM order among its siblings — so
   .workspace (which comes right after it in the markup) was rendering ON TOP of the dropdown
   menu whenever it visually overflowed past the header's bottom edge. Lifting the header above
   the workspace fixes that for any header popover, not just this one. */
.app-topbar {
  position: relative;
  z-index: 60;
}

/* Fewer top-row items after consolidation meant justify-content:space-between spread them out
   with large empty gaps. Keep brand + status + balances as one left-aligned cluster and push
   only the actions (language/settings/logout) to the right edge via auto margin. */
.toprow {
  justify-content: flex-start !important;
  row-gap: 10px;
}
.top-actions {
  margin-left: auto;
}
.settings-menu {
  position: relative;
}
.settings-menu-trigger[aria-expanded="true"] {
  border-color: rgba(124, 58, 237, .55);
  background: #f5f0ff;
}
.settings-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 240px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(29, 41, 57, .18);
}
.settings-menu-panel.hidden {
  display: none !important;
}
.settings-menu-item {
  justify-content: flex-start !important;
  width: 100%;
  text-align: left;
  opacity: 1 !important;
}
/* Plain opaque background for items with no color-state of their own. .auto-download-toggle
   keeps its own red/off green/on background (set further down in this file) — must not be
   overridden here, so it's explicitly excluded. */
.settings-menu-item:not(.auto-download-toggle) {
  background: #ffffff !important;
}
html[data-theme="dark"] .settings-menu-item:not(.auto-download-toggle) {
  background: #202b3d !important;
}
/* These two buttons also carry .notifications-toggle / .auto-download-toggle for their icon
   color states (red/green), but that class also has an icon-only collapse below ~1280-1500px
   viewport width meant for the old cramped top row. Inside this dropdown there's always room
   for the full label, so cancel the collapse here regardless of viewport. */
.settings-menu-panel .notifications-toggle,
.settings-menu-panel .auto-download-toggle {
  font-size: 14px !important;
  padding-left: 13px !important;
  padding-right: 13px !important;
}
.settings-menu-panel .notifications-toggle::before,
.settings-menu-panel .auto-download-toggle::before {
  content: none !important;
}
.settings-menu-item.file-name-mode-control {
  display: flex;
  align-items: center;
  justify-content: space-between !important;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  font-weight: 850;
  color: #24364f;
}
.settings-menu-item.file-name-mode-control select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px 6px;
}
html[data-theme="dark"] .settings-menu-panel {
  background: #1b2434;
  border-color: var(--line);
}
html[data-theme="dark"] .settings-menu-item.file-name-mode-control {
  color: var(--text);
}

/* УСТАРЕЛО (v1.10.3): статус переехал в .topbar-message внутри .toprow, поэтому
   селектор `.app-topbar > .status` (прямой потомок) больше ни с чем не совпадает.
   Блок оставлен как страховка на случай отката разметки — его можно удалить целиком.
   Актуальные стили сообщения см. в разделе «Header v4» в конце файла. */
.app-topbar > .status {
  display: none;
  margin: 10px 0 0 !important;
}
.app-topbar > .status.status-visible {
  display: block !important;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 15px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
  white-space: normal !important;
  overflow-wrap: anywhere;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  color: var(--text);
}
.app-topbar > .status.status-visible.err {
  background: #fff2f1;
  border-color: rgba(217, 45, 32, .35);
  color: var(--err);
}
.app-topbar > .status.status-visible.ok {
  background: #f0fbf5;
  border-color: rgba(21, 128, 61, .3);
  color: var(--ok);
}
html[data-theme="dark"] .app-topbar > .status.status-visible {
  background: #202b3d;
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="dark"] .app-topbar > .status.status-visible.err {
  background: rgba(217, 45, 32, .16);
  border-color: rgba(217, 45, 32, .4);
}
html[data-theme="dark"] .app-topbar > .status.status-visible.ok {
  background: rgba(21, 128, 61, .16);
  border-color: rgba(21, 128, 61, .4);
}

@media (max-width: 720px) {
  .settings-menu-panel {
    right: auto;
    left: 0;
    min-width: 220px;
  }
}

/* ============================================================================
   Header v4 — фиксированная одна строка: [логотип] [сообщение] [мета-блок]
   ---------------------------------------------------------------------------
   Приоритет специфичности: в файле накопились правила вида
   `@media (...) { .toprow { ... !important } }` со специфичностью (0,1,0).
   Все селекторы ниже начинаются с `.app-shell .app-topbar`, что даёт (0,3,0)
   и выше, поэтому они выигрывают у старых правил без их удаления.
   ========================================================================== */

.app-shell .app-topbar .toprow {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  grid-template-columns: none !important;
  gap: 10px !important;
  row-gap: 10px !important;
}

/* --- Логотип: сжимается, но никогда не переносит текст на новую строку --- */
.app-shell .app-topbar .brand {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 330px !important;
}
.app-shell .app-topbar .brand-text {
  min-width: 0 !important;
  overflow: hidden;
}
.app-shell .app-topbar .brand h1 {
  font-size: 17px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-shell .app-topbar .brand p {
  font-size: 12px !important;
  max-width: none !important;
}

/* --- Слот сообщения: занимает весь промежуток между логотипом и «Настройками».
       Высота зарезервирована всегда, поэтому появление сообщения не двигает
       шапку ни на пиксель. --- */
.app-shell .app-topbar .topbar-message {
  position: relative;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  align-self: stretch;
  min-height: 46px;
}
.app-shell .app-topbar .topbar-message > .status {
  display: none !important;
  margin: 0 !important;
}
.app-shell .app-topbar .topbar-message > .status.status-visible {
  display: flex !important;
  align-items: center;
  position: absolute;
  left: 0;
  right: auto;
  top: 0;
  bottom: 0;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: initial !important;
  box-sizing: border-box;
  padding: 5px 12px !important;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-align: start;
  white-space: normal !important;
  overflow: hidden;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
/* Текст обрезается по строкам с многоточием; число строк подбирает fitStatusMessage(). */
.app-shell .app-topbar .topbar-message > .status .status-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.app-shell .app-topbar .topbar-message > .status.status-truncated:hover .status-text,
.app-shell .app-topbar .topbar-message > .status.status-truncated:focus-visible .status-text {
  -webkit-line-clamp: unset;
  display: block;
}
.app-shell .app-topbar .topbar-message > .status.status-visible.ok {
  background: #f0fbf5;
  border-color: rgba(21, 128, 61, .32);
  color: var(--ok);
}
.app-shell .app-topbar .topbar-message > .status.status-visible.err {
  background: #fff2f1;
  border-color: rgba(217, 45, 32, .35);
  color: var(--err);
}
/* Если даже минимальный кегль не вместил текст — раскрываем поверх контента,
   не сдвигая макет. */
.app-shell .app-topbar .topbar-message > .status.status-visible.status-truncated {
  cursor: help;
}
.app-shell .app-topbar .topbar-message > .status.status-visible.status-truncated:hover,
.app-shell .app-topbar .topbar-message > .status.status-visible.status-truncated:focus-visible {
  bottom: auto;
  min-height: 100%;
  height: auto;
  overflow: visible;
  z-index: 70;
  box-shadow: 0 18px 40px rgba(29, 41, 57, .18);
  background: #ffffff;
}
/* В файле выше есть `html[data-theme="dark"] .status { color: ... !important }`,
   поэтому цвета сообщения в тёмной теме тоже помечены !important. */
html[data-theme="dark"] .app-shell .app-topbar .topbar-message > .status.status-visible {
  background: #202b3d;
  border-color: var(--line);
  color: var(--text) !important;
}
html[data-theme="dark"] .app-shell .app-topbar .topbar-message > .status.status-visible.ok {
  background: rgba(21, 128, 61, .16);
  border-color: rgba(21, 128, 61, .4);
  color: #6ee7b7 !important;
}
html[data-theme="dark"] .app-shell .app-topbar .topbar-message > .status.status-visible.err {
  background: rgba(217, 45, 32, .16);
  border-color: rgba(217, 45, 32, .4);
  color: #fca5a5 !important;
}
html[data-theme="dark"] .app-shell .app-topbar .topbar-message > .status.status-visible.status-truncated:hover {
  background: #263449;
}

/* --- Правый мета-блок: настройки + статус + балансы + аккаунт.
       Переносится целиком одной группой, а не поэлементно. --- */
.app-shell .app-topbar .topbar-meta {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin-left: auto !important;
}

/* --- Кнопка настроек со сводкой текущего состояния --- */
.app-shell .app-topbar .settings-menu {
  flex: 0 0 auto !important;
}
.app-shell .app-topbar .settings-menu-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 6px 9px 6px 13px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}
.settings-trigger-label {
  white-space: nowrap;
}
.settings-trigger-badges {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.settings-trigger-badges:empty {
  display: none;
}
.settings-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: rgba(15, 23, 42, .06);
  font-size: 12px;
  line-height: 1;
  transition: background .15s ease, opacity .15s ease;
}
.settings-badge.is-on {
  background: rgba(16, 185, 129, .16);
  border-color: rgba(16, 185, 129, .38);
}
.settings-badge.is-off {
  opacity: .4;
  filter: grayscale(1);
}
.settings-badge.badge-lang {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #4338ca;
  background: rgba(99, 102, 241, .14);
  border-color: rgba(99, 102, 241, .3);
  filter: none;
  opacity: 1;
}
html[data-theme="dark"] .settings-badge {
  background: rgba(148, 163, 184, .16);
}
html[data-theme="dark"] .settings-badge.is-on {
  background: rgba(16, 185, 129, .22);
}
html[data-theme="dark"] .settings-badge.badge-lang {
  color: #c7d2fe;
  background: rgba(99, 102, 241, .25);
}
/* Панель открывается влево от правого края, чтобы не выходить за экран. */
.app-shell .app-topbar .settings-menu-panel {
  left: auto;
  right: 0;
}

/* --- Пилюли: показывают текст целиком, ширина по содержимому --- */
.app-shell .app-topbar .top-status {
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  min-height: 44px !important;
  padding: 7px 12px !important;
  border-radius: 14px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}
.app-shell .app-topbar .top-status strong {
  font-size: 13px !important;
  white-space: nowrap !important;
}

.app-shell .app-topbar .top-balances {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: auto !important;
  min-width: 0 !important;
  order: 0 !important;
  gap: 7px !important;
}
.app-shell .app-topbar .top-balance-pill,
.app-shell .app-topbar #topCharacterBalancePill,
.app-shell .app-topbar #topVoiceBalancePill {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 44px !important;
  padding: 5px 11px !important;
  border-radius: 14px !important;
  align-content: center !important;
  gap: 1px !important;
}
.app-shell .app-topbar .top-balance-pill span {
  font-size: 9.5px !important;
  letter-spacing: .05em;
  white-space: nowrap;
}
.app-shell .app-topbar .top-balance-pill strong {
  font-size: 13px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

.app-shell .app-topbar .top-actions {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  grid-column: auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  gap: 7px !important;
}
.app-shell .app-topbar .top-actions .btn,
.app-shell .app-topbar .custom-language-button {
  min-height: 44px !important;
  padding: 8px 12px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

/* --- Узкие экраны: мета-блок и сообщение получают собственные строки --- */
@media (max-width: 1240px) {
  .app-shell .app-topbar .topbar-message {
    flex: 1 1 180px !important;
  }
}
@media (max-width: 900px) {
  .app-shell .app-topbar .brand {
    max-width: none !important;
  }
  .app-shell .app-topbar .topbar-message {
    flex: 1 1 100% !important;
    order: 3 !important;
    min-height: 0;
  }
  .app-shell .app-topbar .topbar-message:not(.has-message) {
    display: none !important;
  }
  .app-shell .app-topbar .topbar-message > .status.status-visible {
    position: static;
    height: auto;
    font-size: 13px !important;
  }
  .app-shell .app-topbar .topbar-meta {
    flex: 1 1 100% !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
  }
  .app-shell .app-topbar .settings-menu-panel {
    left: 0;
    right: auto;
  }
}

/* ============================================================================
   Строка «Оригинал» в списке прогресса (v1.10.4)
   Закреплена сверху списка: остаётся видимой при прокрутке длинного списка
   языков. Фон непрозрачный — иначе при sticky сквозь неё просвечивают строки.
   ========================================================================== */
/* 1.38.0. Строка «Оригинал» больше не прилипает к верху списка.
   Была position: sticky — она висела над переводами и перекрывала первый из
   них при прокрутке. Осталась первой строкой списка и уезжает вверх вместе со
   всеми. Отдельный цвет и рамку оставляем: это не язык, а источник задачи, и
   отличать его глазом по-прежнему нужно. Тень убрана — она была нужна только
   затем, чтобы прилипшая строка отделялась от того, что под ней проезжает. */
.results .result-row.original-row {
  background: #f4f7fd !important;
  border-color: rgba(99, 102, 241, .34) !important;
}
.results .result-row.original-row:hover {
  background: #eef2fe !important;
  border-color: rgba(99, 102, 241, .55) !important;
}
.results .result-row.original-row.active {
  background: #eae7ff !important;
  border-color: rgba(124, 58, 237, .72) !important;
}
.results .result-row.original-row .result-flag {
  background: rgba(99, 102, 241, .12) !important;
  border-color: rgba(99, 102, 241, .28) !important;
}
.results .result-row.original-row .result-main strong {
  color: #3730a3;
}
.badge.slate {
  color: #64748b;
  background: #f1f5f9;
}

html[data-theme="dark"] .results .result-row.original-row {
  background: #1e2637 !important;
  border-color: rgba(129, 140, 248, .38) !important;
}
html[data-theme="dark"] .results .result-row.original-row:hover {
  background: #253048 !important;
  border-color: rgba(129, 140, 248, .58) !important;
}
html[data-theme="dark"] .results .result-row.original-row.active {
  background: rgba(124, 58, 237, .20) !important;
  border-color: rgba(167, 139, 250, .70) !important;
}
html[data-theme="dark"] .results .result-row.original-row .result-main strong {
  color: #c7d2fe !important;
}
html[data-theme="dark"] .badge.slate {
  color: #94a3b8;
  background: rgba(148, 163, 184, .14);
}

/* ============================================================================
   Панель управления — исправление обрезки текста и раздутого TG (v1.10.5)
   ---------------------------------------------------------------------------
   1. Блоки «Файл .txt» и «Ввести текст» имели ЖЁСТКУЮ высоту (height: 54px и
      min-height: 50px в состоянии .has-content). Трём строкам — кикер, заголовок,
      подпись — нужно было на 3-6px больше. Вместе с justify-content: center и
      overflow: hidden это срезало текст сверху и снизу поровну: у нижней строки
      исчезали хвосты букв у/б/ф.
      Лечение: высота по содержимому (height: auto), min-height остаётся только
      как нижняя граница. Строка выравнивается по самому высокому блоку, поэтому
      остальные контролы подтягиваются сами.
   2. Правило `.control-grid.has-mode:not(.has-voice) > .telegram-delivery-control`
      раздувало селект до flex-basis 440px / min-width 360px, чтобы занять место,
      освободившееся при выключенной озвучке. Свободное место теперь уходит блокам
      файла и текста — им есть что показывать, в отличие от выпадающего списка.
   ========================================================================== */

.app-shell .control-grid .control-box.intake-box,
.app-shell .control-grid.has-content .control-box.intake-box {
  height: auto !important;
  min-height: 54px !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  row-gap: 3px !important;
}

/* ГЛАВНАЯ ПРИЧИНА ОБРЕЗКИ.
   .intake-box — это flex-контейнер с flex-direction: column, а значит кикер,
   заголовок и подпись внутри него являются flex-элементами с flex-shrink: 1 по
   умолчанию. Когда высоты не хватало, браузер сжимал сами строки НИЖЕ их
   line-height: у .intake-main высота бокса становилась 12.28px при line-height
   13.65px, у .intake-sub — 10.39px при 11.55px. Текст обрезался внутри
   собственной строки, поэтому у букв пропадали хвосты.
   Запрещаем сжатие — строки всегда занимают полный line-height. */
.app-shell .control-box.intake-box > .control-kicker,
.app-shell .control-box.intake-box > .intake-main,
.app-shell .control-box.intake-box > .intake-sub {
  flex-shrink: 0 !important;
  flex-basis: auto !important;
}

/* Однострочные контролы не должны растягиваться вслед за интейк-блоками:
   выравниваем их по центру строки вместо stretch. */
.app-shell .control-grid > .toggle-box,
.app-shell .control-grid > .select-box,
.app-shell .control-grid > .voice-languages-control {
  align-self: stretch !important;
}

/* --- TG: нормальная ширина в любом состоянии --- */
.app-shell .control-grid > .telegram-delivery-control,
.app-shell .control-grid.has-mode > .telegram-delivery-control,
.app-shell .control-grid.has-mode:not(.has-voice) > .telegram-delivery-control {
  flex: 0 1 215px !important;
  flex-basis: 215px !important;
  width: 215px !important;
  min-width: 180px !important;
  max-width: 240px !important;
}

/* Освободившееся место отдаём блокам файла и текста. */
.app-shell .control-grid > .file-box {
  flex-grow: 1 !important;
  max-width: 460px !important;
}
.app-shell .control-grid > .manual-text-trigger {
  flex-grow: 1 !important;
  max-width: 380px !important;
}

/* Сетка на ноутбучных ширинах: TG получает фиксированную колонку,
   лишнее уходит первым двум. */
@media (min-width: 1021px) and (max-width: 1500px) {
  .app-shell .control-grid {
    grid-template-columns: minmax(250px, 1.6fr) minmax(200px, 1.2fr) 105px 112px 215px 150px !important;
  }
  .app-shell .control-grid.has-voice {
    grid-template-columns: minmax(250px, 1.35fr) minmax(200px, 1.1fr) 105px 112px 150px 105px minmax(210px, 1fr) 215px 150px !important;
  }
}

/* UI 1.17 — split run button + settings selects.
   The download decision moved out of the settings menu onto the launch button itself, so what will
   happen with files is readable at the exact moment of clicking. The wrapper carries the
   progressive-control/run-control classes the grid uses for show/hide, so its own padding/border
   must be neutralised — the two buttons inside provide the visible surface. */
.control-grid .run-split.run-control {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  overflow: visible !important;
}
.control-grid.has-mode .run-split.run-control {
  display: inline-flex !important;
  padding: 0 !important;
  border-width: 0 !important;
  max-width: none !important;
}
.run-split .btn {
  border-radius: 0;
  height: 100%;
}
/* The grid gives this column a fixed width at most breakpoints, so the main button must be the part
   that gives way — the toggle keeps its full size and can never be pushed out of view. */
.run-split-main {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1.15;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  padding: 8px 8px !important;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.run-split-title,
.run-split-mode {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-split-title {
  font-weight: 700;
}
.run-split-mode {
  font-size: 10.5px;
  font-weight: 600;
  opacity: .88;
  letter-spacing: .01em;
}
.run-split-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-left: 1px solid rgba(255, 255, 255, .38) !important;
  padding: 8px 8px !important;
  font-size: 15px;
  line-height: 1;
  flex: 0 0 auto;
  /* Fixed width so the button doesn't resize as the icon changes between 📁 / 🗜 / 🚫. */
  min-width: 36px;
}
.run-split-toggle.is-off {
  filter: grayscale(1);
  opacity: .72;
}
.run-split-toggle:hover {
  filter: none;
  opacity: 1;
}
/* Match the existing "Имена файлов" row exactly so the settings menu stays one visual system. */
.settings-menu-item.voice-provider-control,
.settings-menu-item.auto-download-mode-control {
  display: flex;
  align-items: center;
  justify-content: space-between !important;
  gap: 8px;
  min-height: 38px;
  padding: 9px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--panel-soft);
  font-size: 11px;
  font-weight: 850;
  color: #24364f;
  white-space: nowrap;
}
.settings-menu-item.voice-provider-control span,
.settings-menu-item.auto-download-mode-control span {
  text-transform: uppercase;
  letter-spacing: .03em;
}
.settings-menu-item.voice-provider-control select,
.settings-menu-item.auto-download-mode-control select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px 6px;
  max-width: 60%;
}
html[data-theme="dark"] .settings-menu-item.voice-provider-control,
html[data-theme="dark"] .settings-menu-item.auto-download-mode-control {
  color: var(--text);
}

/* UI 1.17 — a required-but-empty voice template. Lumean has no default voice, so leaving this
   unset used to translate first and fail on every language afterwards; make the gap visible. */
.control-box.voice-template-box.needs-value {
  border-color: rgba(195, 54, 43, .55) !important;
  box-shadow: 0 0 0 2px rgba(195, 54, 43, .12) !important;
}
select.needs-value {
  border-color: rgba(195, 54, 43, .6) !important;
  color: var(--err) !important;
}

/* Очередь (1.37.0). Одна строка — одна задача, порядок сверху вниз. */
.queue-list{display:flex;flex-direction:column;gap:6px}
.queue-row{display:grid;grid-template-columns:34px 1fr auto 32px;align-items:center;gap:10px;
  padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.queue-row.running{border-color:#2ea04355}
.queue-pos{text-align:center;font-weight:700;color:var(--muted)}
.queue-row.running .queue-pos{color:#7ee2a8}
.queue-name{cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.queue-name:hover{text-decoration:underline}
.queue-meta{color:var(--muted);font-size:12px;white-space:nowrap}
.queue-kill{border:1px solid var(--line);background:transparent;color:#ffa198;
  border-radius:8px;cursor:pointer;width:28px;height:28px;line-height:1}
.queue-kill:hover{border-color:#f8514955}

/* ══════════════════════════════════════════════════════════════════════════
   1.40.0 — новая раскладка под 1920×1080 без прокрутки страницы.

   Что здесь решается, по вашим трём претензиям:
     • шапка была 96 пикселей в два ряда — стала 48 в один;
     • панель «Скачивание» занимала 92 пикселя всегда — переехала в шапку
       текста и включается, когда файлы готовы;
     • «История» занимала 250 пикселей внизу — стала строкой вкладок 36px
       под шапкой, а полный список открывается кнопкой «Все N».

   Итого рабочей области прибавилось около 350 пикселей высоты.
   ══════════════════════════════════════════════════════════════════════════ */

.app-shell:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  height: 100dvh !important;
  overflow: hidden !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* ── шапка в одну строку ─────────────────────────────────────────────── */
.app-shell .app-topbar {
  flex: 0 0 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
  background: var(--panel) !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}
.app-shell .app-topbar .toprow {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}
.app-shell .brand-home {
  flex: 0 0 auto !important;
  padding: 0 !important;
  gap: 7px !important;
  border: none !important;
  background: none !important;
  min-height: 0 !important;
  box-shadow: none !important;
}
.app-shell .brand-logo { width: 26px !important; height: 26px !important; font-size: 14px !important; border-radius: 8px !important; }
.app-shell .brand-text h1 { font-size: 15px !important; line-height: 1 !important; letter-spacing: .2px !important; }
.app-shell .brand-text p { display: none !important; }

.app-shell .top-status {
  flex: 0 0 auto !important;
  display: flex !important; align-items: baseline !important; gap: 6px !important;
  padding: 4px 10px !important; border-radius: 999px !important;
  border: 1px solid var(--line) !important; background: var(--panel-soft) !important;
}
.app-shell .top-status > span { font-size: 10px !important; text-transform: uppercase; letter-spacing: .4px; }
.app-shell .top-status strong { font-size: 12px !important; }

.app-shell .topbar-message {
  flex: 1 1 auto !important; min-width: 0 !important;
  margin: 0 !important; padding: 0 !important; height: auto !important;
  border: none !important; background: none !important;
}
.app-shell .topbar-message .status { margin: 0 !important; font-size: 12px !important; }
.topbar-spacer { flex: 1 1 auto; min-width: 4px; }

/* Счётчики задачи вместо четырёх крупных плиток. Те же числа, ноль высоты. */
.job-chips { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.job-chips.hidden { display: none !important; }
.job-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel-soft);
}
.job-chip i { font-style: normal; font-size: 10px; font-weight: 800; color: var(--muted); letter-spacing: .2px; }
.job-chip strong { font-size: 13px; font-weight: 900; }
.job-chip.done { border-color: rgba(3,152,85,.28); background: rgba(3,152,85,.07); }
.job-chip.error { border-color: rgba(217,45,32,.28); background: rgba(217,45,32,.06); }
.job-chip.review { border-color: rgba(216,160,21,.32); background: rgba(216,160,21,.08); }
.job-chip.audio { border-color: rgba(21,112,239,.26); background: rgba(21,112,239,.06); }

.app-shell .top-balances { flex: 0 0 auto !important; gap: 5px !important; margin: 0 !important; }
.app-shell .top-balance-pill { padding: 4px 9px !important; border-radius: 999px !important; }
.app-shell .top-balance-pill span { font-size: 10px !important; }
.app-shell .top-balance-pill strong { font-size: 12px !important; }
.app-shell .top-actions { flex: 0 0 auto !important; display: flex !important; align-items: center !important; gap: 5px !important; margin: 0 !important; }
.app-shell .top-actions .btn,
.app-shell .voice-section-btn {
  min-height: 32px !important; padding: 6px 10px !important; font-size: 12px !important; border-radius: 9px !important;
  margin: 0 !important; position: static !important;
}
.app-shell .ui-language-select { min-height: 32px !important; padding: 4px 6px !important; font-size: 12px !important; }
.app-shell .settings-menu-panel { top: 40px !important; }

/* ── вкладки проектов ────────────────────────────────────────────────── */
.project-tabs {
  flex: 0 0 38px; height: 38px; display: flex; align-items: stretch; gap: 6px;
  padding: 4px 10px 0; background: var(--panel); border-bottom: 1px solid var(--line);
  min-width: 0;
}
.tabstrip {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; gap: 4px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.tabstrip::-webkit-scrollbar { height: 0; }
.ptab {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  max-width: 190px; padding: 5px 10px; cursor: pointer;
  border: 1px solid var(--line); border-bottom: none; border-radius: 9px 9px 0 0;
  background: var(--panel-soft); color: var(--muted);
  font-size: 12px; font-weight: 800; white-space: nowrap;
}
.ptab:hover { background: #fff; color: var(--text); border-color: #aebcd0; }
.ptab.active {
  background: #fff; color: var(--text);
  border-color: rgba(21,112,239,.5); box-shadow: inset 0 2px 0 var(--blue);
}
.ptab-name { overflow: hidden; text-overflow: ellipsis; }
.ptab-count { font-size: 11px; font-weight: 900; opacity: .75; }
.ptab-warn { color: var(--red); font-size: 11px; }
.ptab .history-dot { flex: 0 0 auto; margin: 0; }
.ptab-restart {
  display: none; padding: 1px 5px; border-radius: 6px; font-size: 11px; line-height: 1.2;
  border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; min-height: 0;
}
.ptab:hover .ptab-restart { display: inline-block; }
.ptab-restart:hover { border-color: #a9bdd8; color: var(--text); }

.tab-add {
  flex: 0 0 auto; width: 30px; border: 1px dashed #9dbbe8; border-bottom: none;
  border-radius: 9px 9px 0 0; background: rgba(21,112,239,.05); color: var(--blue);
  font-size: 15px; font-weight: 900; cursor: pointer; min-height: 0; padding: 0;
}
.tab-add:hover, .tab-add.active { background: rgba(21,112,239,.13); }
.tabs-right { flex: 0 0 auto; display: flex; align-items: center; }
.all-projects { position: relative; }
.tab-more { min-height: 28px !important; padding: 4px 10px !important; font-size: 11.5px !important; border-radius: 8px !important; }
.all-projects-pop {
  position: absolute; top: 34px; right: 0; width: 440px; max-height: 62vh;
  display: flex; flex-direction: column; z-index: 40;
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px;
  box-shadow: 0 22px 60px rgba(29,41,57,.22); overflow: hidden;
}
.all-projects-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.all-projects-head strong { font-size: 13px; font-weight: 900; }
.all-projects-pop .history-list { flex: 1; min-height: 0; overflow: auto; }

.runbar { flex: 0 0 3px; height: 3px; background: #dfe7f2; }
.runbar .progress-fill { height: 100%; }

/* ── рабочая область ─────────────────────────────────────────────────── */
.app-shell .workspace {
  flex: 1 1 auto !important; min-height: 0 !important;
  display: grid !important; grid-template-columns: 348px minmax(0, 1fr) !important;
  gap: 10px !important; padding: 10px !important; margin: 0 !important; overflow: hidden !important;
}
.app-shell .left-column,
.app-shell .right-column {
  min-height: 0 !important; overflow: hidden !important;
  display: flex !important; flex-direction: column !important; gap: 10px !important;
}
.app-shell .left-column > .panel,
.app-shell .right-column > .panel { min-height: 0 !important; max-height: none !important; }

/* Прогресс без собственного заголовка: числа стоят в шапке. */
.app-shell .progress-panel:not(.hidden) { flex: 1 1 auto !important; }
.app-shell .progress-head.compact {
  padding: 8px 11px !important; gap: 8px !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
}
.app-shell .progress-head.compact #progressText { margin: 0 !important; font-size: 12px !important; font-weight: 800 !important; color: var(--muted) !important; }
.app-shell .language-panel { flex: 0 0 auto !important; max-height: 46% !important; }
.app-shell .progress-panel.hidden ~ .language-panel { flex: 1 1 auto !important; max-height: none !important; }

/* ── экран ввода задачи ──────────────────────────────────────────────── */
.intake-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.intake-panel.hidden { display: none !important; }
.intake-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.intake-head h2 { font-size: 15px; font-weight: 900; }
.intake-close { min-height: 30px !important; padding: 4px 11px !important; font-size: 15px !important; }
.intake-body { flex: 1; min-height: 0; overflow: auto; padding: 14px; display: flex; flex-direction: column; }
.intake-body .control-grid {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important; margin: 0 !important; padding: 0 !important; border: none !important; background: none !important;
}
.intake-body .top-footer { margin-top: 12px !important; padding: 0 !important; }
.intake-body .mini-calculator { width: 100% !important; }

/* ── скачивание в шапке текста ───────────────────────────────────────── */
.download-row {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 6px; padding-left: 9px; border-left: 1px solid var(--line);
}
.download-row .download-all {
  min-height: 30px; padding: 5px 10px; border-radius: 9px; font-size: 12px; font-weight: 900;
  border: 1px solid rgba(3,152,85,.32); background: rgba(3,152,85,.07); color: #046c40;
}
.download-row .download-all.disabled { display: none; }
.app-shell .preview-panel:not(.hidden) { flex: 1 1 auto !important; }
.app-shell .preview-head { padding: 9px 13px !important; align-items: center !important; }
.app-shell .preview-head h2 { font-size: 14px !important; }
.app-shell .preview-head #previewMeta { font-size: 11px !important; margin: 1px 0 0 !important; }
.app-shell .preview-panel pre { flex: 1 !important; min-height: 0 !important; }
.app-shell .preview-empty:not(.hidden) { flex: 1 1 auto !important; }

/* ── тёмная тема под новую раскладку ─────────────────────────────────── */
html[data-theme="dark"] .app-shell .app-topbar,
html[data-theme="dark"] .project-tabs { background: var(--panel) !important; border-color: var(--line) !important; }
html[data-theme="dark"] .job-chip,
html[data-theme="dark"] .ptab,
html[data-theme="dark"] .tab-more { background: var(--panel-soft); border-color: var(--line); color: var(--muted); }
html[data-theme="dark"] .ptab:hover,
html[data-theme="dark"] .ptab.active { background: #172235; color: var(--text); border-color: #465a75; }
html[data-theme="dark"] .ptab.active { box-shadow: inset 0 2px 0 #60a5fa; }
html[data-theme="dark"] .ptab-restart { background: #172235; border-color: #354760; color: var(--muted); }
html[data-theme="dark"] .tab-add { border-color: #3d5a86; background: rgba(96,165,250,.1); color: #8fc0ff; }
html[data-theme="dark"] .all-projects-pop { background: var(--panel); border-color: var(--line); box-shadow: 0 22px 60px rgba(0,0,0,.5); }
html[data-theme="dark"] .runbar { background: #1d2a3d; }
html[data-theme="dark"] .download-row { border-color: var(--line); }
html[data-theme="dark"] .download-row .download-all {
  border-color: rgba(52,211,153,.32); background: rgba(52,211,153,.1); color: #6ee7b7;
}
html[data-theme="dark"] .intake-head { border-color: var(--line); }

/* ── языки в две строки: все 16 видны сразу ──────────────────────────── */
.app-shell .results .result-row {
  min-height: 42px !important;
  padding: 6px 9px !important;
  gap: 8px !important;
}
.app-shell .results .result-row .result-actions { opacity: 0; transition: opacity .12s; }
.app-shell .results .result-row:hover .result-actions,
.app-shell .results .result-row:focus-within .result-actions { opacity: 1; }
.app-shell .results .result-main strong { font-size: 12.5px !important; }
.app-shell .results .result-main span { font-size: 11px !important; margin-top: 1px !important; }

@media (max-width: 1400px) {
  .app-shell .workspace { grid-template-columns: 320px minmax(0, 1fr) !important; }
}
@media (max-width: 1100px) {
  .app-shell:not(.hidden) { height: auto !important; overflow: auto !important; }
  .app-shell .workspace { grid-template-columns: minmax(0, 1fr) !important; }
  .app-shell .language-panel { max-height: none !important; }
}

/* ── 1.40.0-fix. Правая часть шапки не должна переполняться ────────────────
   На снимке 1920×1080 «Озвучка», «?», выбор языка, «Настройки» и «Выйти»
   налезали друг на друга и уезжали за край: у ряда не было ни разрешения
   сжиматься, ни ограничения по ширине у балансов. */
.app-shell .app-topbar { box-sizing: border-box !important; }
.app-shell .app-topbar .toprow { flex-wrap: nowrap !important; }
.app-shell .brand-text h1 { max-width: 132px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.app-shell .topbar-message { flex: 1 1 0 !important; }
.app-shell .topbar-message .status { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.app-shell .top-status { flex-shrink: 1 !important; min-width: 0 !important; }
.app-shell .top-balances { flex-shrink: 1 !important; min-width: 0 !important; flex-wrap: nowrap !important; }
.app-shell .top-balance-pill {
  min-width: 0 !important; max-width: 168px !important;
  overflow: hidden !important; white-space: nowrap !important;
}
.app-shell .top-balance-pill span,
.app-shell .top-balance-pill strong { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.app-shell .top-actions { flex: 0 0 auto !important; flex-wrap: nowrap !important; }
.job-chips { flex-shrink: 0; }

/* Уведомление о готовности больше не накрывает органы управления шапкой:
   оно съезжает под строку вкладок. */
.completion-toast { top: 96px !important; }

/* ── Прогресс-панель: список языков занимает всю доступную высоту ──────── */
.app-shell .progress-panel:not(.hidden) .results { flex: 1 1 auto !important; min-height: 0 !important; }

/* ── 1.40.0-fix2. Три вещи, которые видно только на живом снимке ──────────── */

/* 1. Рабочая область не растягивалась на всю высоту: у сетки из одной строки
      высота строки по умолчанию равна содержимому, а не остатку экрана.
      Из-за этого внизу пустовало больше сотни пикселей. */
.app-shell .workspace { grid-template-rows: minmax(0, 1fr) !important; align-items: stretch !important; }
.app-shell .left-column, .app-shell .right-column { height: 100% !important; }

/* 2. «TXT Translator» обрезалось многоточием и выглядело сломанным.
      Название несёт значок — он же кнопка «на главную». */
.app-shell .brand-text { display: none !important; }
.app-shell .brand-home { padding: 0 2px !important; }

/* 3. Уведомление о завершении накрывало кнопки скачивания. Ему место внизу,
      где оно ничего не перекрывает. */
.completion-toast { top: auto !important; bottom: 18px !important; right: 18px !important; }

/* Строка языка в две строки: имя и состояние рядом, цифры под ними.
   Было три строки на язык — видно пять; стало две — видно все. */
.app-shell .results .result-row { min-height: 40px !important; padding: 5px 9px !important; }
.app-shell .results .result-main strong { font-size: 12.5px !important; line-height: 1.2 !important; }
.app-shell .results .result-main span { font-size: 10.5px !important; line-height: 1.25 !important; margin-top: 1px !important; }

/* ── 1.40.0-fix3. Отключаем общее уменьшение приложения ───────────────────
   Раньше вся страница ужималась трансформацией до 90% (а на 1500 пикселях —
   до 78%): прежняя раскладка требовала около 1200 пикселей высоты и иначе
   не помещалась. Новая раскладка рассчитана ровно на 1080 без прокрутки,
   поэтому ужимать больше нечего — а масштаб 0.9 делал весь текст мельче на
   десятую часть и оставлял внизу пустую полосу в сто пикселей. */
:root { --ui-scale: 1 !important; }
@media (min-width: 1021px) {
  .app-shell:not(.hidden) {
    transform: none !important;
    width: 100vw !important;
    height: 100dvh !important;
    inset: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }
}

/* ── 1.40.0-fix4. Раздел «Озвучка» держит ту же шапку ──────────────────────
   Шапка озвучки намеренно повторяет шапку переводчика: те же классы, тот же
   угол экрана для кнопки перехода. Раз переводчик перешёл на строку 48
   пикселей, раздел обязан перейти вместе с ним — иначе кнопка «← Перевод»
   прыгает при каждом переключении, что стенд и поймал. */
#voiceShell:not(.hidden) {
  position: fixed !important; inset: 0 !important;
  width: 100vw !important; height: 100dvh !important;
  transform: none !important;
  display: flex !important; flex-direction: column !important;
  gap: 0 !important; padding: 0 !important; overflow: hidden !important;
}
#voiceShell .app-topbar {
  flex: 0 0 48px !important; height: 48px !important; min-height: 48px !important;
  box-sizing: border-box !important;
  padding: 0 12px !important; margin: 0 !important;
  border: none !important; border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important; background: var(--panel) !important; box-shadow: none !important;
  display: flex !important; align-items: center !important; overflow: hidden !important;
}
#voiceShell .toprow {
  display: flex !important; align-items: center !important; gap: 10px !important;
  width: 100% !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
  border: none !important; flex-wrap: nowrap !important; overflow: hidden !important;
}
#voiceShell .vc-brand { flex: 0 0 auto !important; padding: 0 2px !important; gap: 7px !important; min-height: 0 !important; }
#voiceShell .vc-brand-logo { font-size: 18px !important; }
#voiceShell .vc-brand .brand-text { display: none !important; }
#voiceShell .vc-nav-row { flex: 1 1 auto !important; justify-content: flex-start !important; flex-wrap: nowrap !important; min-width: 0 !important; overflow: hidden !important; }
#voiceShell .vc-nav { padding: 5px 11px !important; font-size: 12px !important; min-height: 32px !important; }
#voiceShell .vc-meta { flex: 0 0 auto !important; margin: 0 !important; }
#voiceShell .voice-section-btn,
.app-shell .voice-section-btn {
  min-height: 32px !important; padding: 6px 10px !important;
  font-size: 12px !important; border-radius: 9px !important; margin: 0 !important; position: static !important;
}
#voiceShell .vc-page { flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; }
#voiceShell .vc-scroll { height: 100% !important; min-height: 0 !important; overflow: auto !important; }

/* ══════════════════════════════════════════════════════════════════════════
   1.40.1 — разбор шести поломок, которые я не увидел, потому что снял один
   экран вместо всех. Каждая правка ниже отвечает за одну из них.
   ══════════════════════════════════════════════════════════════════════════ */

/* (1) ВЫПАДАЮЩИЕ МЕНЮ БЫЛИ НЕ ВИДНЫ.
   Причина простая и стыдная: я поставил шапке overflow: hidden, чтобы правая
   часть не переполнялась, — и этим обрезал всё, что раскрывается ВНИЗ.
   Переполнение теперь решается разрешением сжиматься, а меню всплывает
   поверх строки вкладок. */
.app-shell .app-topbar { position: relative !important; z-index: 200 !important; overflow: visible !important; }
.app-shell .app-topbar .toprow { overflow: visible !important; }
.app-shell .settings-menu { position: relative !important; }
.app-shell .settings-menu-panel {
  position: absolute !important; top: 42px !important; right: 0 !important;
  z-index: 400 !important; max-height: calc(100dvh - 120px) !important; overflow: auto !important;
}
.project-tabs { position: relative; z-index: 30; }
.app-shell .workspace { position: relative; z-index: 1; }

/* (2) ВКЛАДКИ НАЧИНАЛИСЬ СПРАВА, «плюс» стоял в конце.
   В VEO3 кнопка нового проекта — первая слева, вкладки идут за ней. Здесь
   теперь так же: она первая, с подписью, и новый проект появляется рядом. */
.tab-add {
  order: -1;
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  width: auto; padding: 5px 12px; min-height: 0;
  border: 1px dashed #9dbbe8; border-bottom: none; border-radius: 9px 9px 0 0;
  background: rgba(21, 112, 239, .06); color: var(--blue);
  font-size: 12px; font-weight: 900; white-space: nowrap; cursor: pointer;
}
.tab-add:hover, .tab-add.active { background: rgba(21, 112, 239, .14); border-style: solid; }
.tab-add-icon { font-size: 13px; line-height: 1; }
.tabstrip { order: 0; }
.tabs-right { order: 1; margin-left: auto; }

/* (4) КНОПКА «ОЗВУЧКА» БЫЛА ДРУГОГО РАЗМЕРА.
   Она стояла вне ряда действий и не получала его геометрию. Теперь она внутри
   ряда, последней, и подчиняется тем же правилам, что и соседи. */
.app-shell .top-actions > * { min-height: 32px !important; }
.app-shell .top-actions .voice-section-btn {
  min-height: 32px !important; padding: 6px 10px !important;
  font-size: 12px !important; border-radius: 9px !important;
  margin: 0 !important; position: static !important; align-self: center !important;
}

/* (5) ФОРМА НОВОЙ ЗАДАЧИ РАСПОЛЗАЛАСЬ ПО ВСЕЙ ШИРИНЕ.
   Блоки разъезжались на 1500 пикселей, разной высоты, а кнопка запуска висела
   маленьким прямоугольником справа. Причина — форма наследовала сетку из
   девяти колонок, рассчитанную на прежнюю шапку во всю ширину экрана.

   Здесь всё задано через #intakePanel: идентификатор сильнее любых классов,
   поэтому прежние правила больше не спорят с этими. */
.right-column[data-state="intake"] .intake-panel { display: flex !important; }
.right-column:not([data-state="intake"]) .intake-panel { display: none !important; }
.right-column[data-state="empty"] .preview-empty { display: flex !important; }
.right-column:not([data-state="empty"]) .preview-empty { display: none !important; }
.right-column[data-state="preview"] .preview-panel { display: flex !important; }
.right-column:not([data-state="preview"]) .preview-panel { display: none !important; }

#intakePanel .intake-body {
  /* 1.53.0. align-items: flex-start в колонночном флексе — это ГОРИЗОНТАЛЬНАЯ
     ось: .nt сжимался по содержимому и прилипал к левому краю, справа
     оставалось пустое поле. Владелец: «блоки неожиданно переехали влево».
     stretch растягивает .nt на всю ширину, а детей центрируют их собственные
     margin-left/right: auto с max-width — середина, и ничего не ездит. */
  display: flex !important; justify-content: center !important; align-items: stretch !important;
  padding: 22px 20px !important; overflow: auto !important;
}
#intakePanel .nt { width: 100% !important; }
#intakePanel .intake-form {
  width: 100% !important; max-width: 860px !important;
  display: flex !important; flex-direction: column !important; gap: 12px !important;
}
#intakePanel .control-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 10px !important; width: 100% !important;
  margin: 0 !important; padding: 0 !important; border: none !important; background: none !important;
  max-width: none !important; min-width: 0 !important;
}
/* Приём текста: два равных блока в первой строке. */
#intakePanel .control-grid > .intake-box {
  grid-column: span 3 !important; min-height: 86px !important;
  width: 100% !important; max-width: none !important;
}
#intakePanel .control-grid > .new-task-box { grid-column: span 6 !important; min-height: 62px !important; }
/* Настройки: по три в ряд, одинаковой высоты. */
/* Внутреннюю раскладку самих коробок НЕ трогаем: она была нормальной и до
   перекладки. Задаём только место в сетке и одинаковую высоту — иначе подписи
   и переключатели вылезают за края, как это и вышло на первом снимке. */
#intakePanel .control-grid > .control-box:not(.intake-box) {
  /* По ДВА в ряд, а не по три: при трёх коробка получается уже своего
     содержимого, и подписи обрезаются на середине слова — «Авт», «Д». */
  grid-column: span 3 !important;
  /* Коробка обязана занять свою ячейку целиком: иначе она сжимается по
     содержимому и ряд выглядит рваным. */
  width: 100% !important; min-width: 0 !important; max-width: none !important;
  min-height: 72px !important; overflow: visible !important;
}
#intakePanel .control-grid > .control-box select { max-width: 100% !important; }
/* Запуск — во всю ширину формы, крупной кнопкой. Раньше он жался справа. */
#intakePanel .control-grid > .run-split {
  grid-column: span 6 !important; display: flex !important;
  width: 100% !important; max-width: none !important; min-height: 50px !important;
}
#intakePanel .run-split-main { flex: 1 1 auto !important; min-height: 50px !important; font-size: 15px !important; }
#intakePanel .run-split-toggle {
  /* 1.52.0: 52px, как и во всех остальных правилах спутника, — разнобой
     62/52 в двух правилах уже один раз дал «то 62, то 52» на замере. */
  flex: 0 0 auto !important; min-height: 50px !important; width: 52px !important;
  font-size: 18px !important; color: #fff !important;
}
#intakePanel #cancelJobBtn { grid-column: span 6 !important; min-height: 42px !important; width: 100% !important; }
#intakePanel .top-footer { margin: 0 !important; padding: 0 !important; width: 100% !important; }
#intakePanel .mini-calculator {
  width: 100% !important; max-width: none !important; display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 8px !important; margin: 0 !important;
}
#intakePanel .mini-calculator > div {
  display: flex !important; flex-direction: column !important; gap: 2px !important;
  padding: 9px 11px !important; border: 1px solid var(--line) !important; border-radius: 11px !important;
  background: var(--panel-soft) !important;
}
#intakePanel .mini-calculator span { font-size: 10px !important; font-weight: 900 !important; color: var(--muted) !important; text-transform: uppercase; letter-spacing: .3px; }
#intakePanel .mini-calculator strong { font-size: 16px !important; font-weight: 900 !important; }

/* (3) «ВЫЙТИ» УБРАНА ИЗ ШАПКИ — она живёт в меню настроек, как и всё
   остальное, что нажимают раз в месяц. */
.app-shell .settings-menu-panel #logoutBtn { width: 100%; justify-content: flex-start; }

/* Заголовок панели языков занимал пять строк подписью про шаблоны. */
.app-shell .language-panel .panel-head p { display: none !important; }
.app-shell .language-panel .panel-head {
  padding: 8px 11px !important; gap: 8px !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
}
.app-shell .language-panel .panel-head h2 { font-size: 13px !important; }
.app-shell .language-panel .language-head-actions { flex: 0 0 auto !important; gap: 6px !important; }

html[data-theme="dark"] .tab-add { border-color: #3d5a86; background: rgba(96, 165, 250, .1); color: #8fc0ff; }
html[data-theme="dark"] .tab-add:hover, html[data-theme="dark"] .tab-add.active { background: rgba(96, 165, 250, .18); }

/* ── 1.40.1 (6). Левая колонка следует за правой ──────────────────────────
   Прежнее правило queue-input-active было костылём старой раскладки: ввод жил
   в шапке, и стоило напечатать текст новой задачи, как левая колонка
   переключалась с результатов открытого проекта на выбор языков. В новой
   раскладке ввод — это ЭКРАН, и колонка должна следовать за ним, а не за
   наличием текста в поле.

   Поэтому: открыт экран новой задачи — слева выбор языков; открыт проект —
   слева его результаты. Ровно одно из двух, без исключений. */
.app-shell[data-pane="intake"] .language-panel {
  display: flex !important; flex: 1 1 auto !important; max-height: none !important; min-height: 0 !important;
}
.app-shell[data-pane="intake"] .progress-panel { display: none !important; }

.app-shell[data-pane="empty"] .language-panel,
.app-shell[data-pane="preview"] .language-panel { display: none !important; }
.app-shell[data-pane="empty"] .progress-panel:not(.hidden),
.app-shell[data-pane="preview"] .progress-panel:not(.hidden) {
  display: grid !important; flex: 1 1 auto !important; max-height: none !important; min-height: 0 !important;
}
/* Нет задачи вовсе — показывать нечего, панель прогресса остаётся скрытой. */
.app-shell[data-pane="empty"] .progress-panel.hidden,
.app-shell[data-pane="preview"] .progress-panel.hidden { display: none !important; }


/* Сетка панели прогресса рассчитывалась на пять рядов: заголовок, плитки,
   полоса, инструменты, список. Плитки и полоса переехали в шапку — рядов
   осталось три, и список должен забирать весь остаток. */
.app-shell .progress-panel { grid-template-rows: auto auto minmax(0, 1fr) !important; }

/* Кнопки в строке языка появляются при наведении, но место занимали всегда —
   и клик в середину строки попадал в невидимую кнопку, а не в строку.
   Пока они не показаны, они и не ловят нажатия. */
.app-shell .results .result-row .result-actions { pointer-events: none; }
.app-shell .results .result-row:hover .result-actions,
.app-shell .results .result-row:focus-within .result-actions { pointer-events: auto; }

/* Список проектов: имя файла важнее таймера, поэтому ему отдаём ширину. */
.all-projects-pop { width: 540px !important; }
.all-projects-pop .history-card { grid-template-columns: 8px minmax(0, 1fr) auto !important; }
.all-projects-pop .history-card .history-main strong { font-size: 12.5px !important; }
.all-projects-pop .history-countdown { font-size: 9.5px !important; padding: 2px 6px !important; }

/* Кнопки шапки: 32 пикселя под строку в 48, а не прежние 44 под строку в 96.
   Правило записано на том же уровне вложенности, что и прежнее — иначе оно
   проигрывало по «весу», и кнопка «Озвучка» оставалась выше соседей, а при
   переходе в раздел озвучки прыгала на шесть пикселей вверх. */
.app-shell .app-topbar .top-actions .btn,
.app-shell .app-topbar .top-actions .voice-section-btn,
.app-shell .app-topbar .custom-language-button {
  min-height: 32px !important;
  height: 32px !important;
  padding: 6px 10px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  align-self: center !important;
}
.app-shell .app-topbar .top-actions .ui-language-select {
  min-height: 32px !important; height: 32px !important; border-radius: 9px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   1.40.2 — вся коробка нажимается, кнопка запуска в стиле сайта, движение
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Кликабельна вся площадь, а не тонкая полоска ─────────────────────────
   Курсор об этом честно сообщает, и коробка отзывается на наведение. */
#intakePanel .control-grid > .control-box.toggle-box,
#intakePanel .control-grid > .control-box.select-box,
#intakePanel .control-grid > .voice-languages-control {
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
#intakePanel .control-grid > .control-box:hover {
  border-color: #a9bdd8 !important;
  box-shadow: 0 6px 18px rgba(29, 41, 57, .08) !important;
  transform: translateY(-1px);
}
#intakePanel .control-grid > .control-box:active { transform: translateY(0); }

/* Список растягивается на всю коробку — попадать в него больше не нужно. */
#intakePanel .control-grid > .select-box { position: relative !important; }
#intakePanel .control-grid > .select-box > span:first-child { pointer-events: none; z-index: 2; }
#intakePanel .control-grid > .select-box select {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 46px !important;
  cursor: pointer !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
#intakePanel .control-grid > .select-box:hover select { border-color: transparent !important; }

/* Переключатель отзывается на наведение всей коробкой. */
#intakePanel .control-box.toggle-box .ios-track { transition: background .18s ease, box-shadow .18s ease; }
#intakePanel .control-box.toggle-box .ios-knob { transition: transform .18s cubic-bezier(.3, 1.4, .5, 1); }
#intakePanel .control-box.toggle-box:hover .ios-track { box-shadow: 0 0 0 4px rgba(21, 112, 239, .1); }

/* ── Кнопка запуска: скругления как у всего остального ────────────────────
   Было: острые углы — правило .run-split .btn { border-radius: 0 } било по
   весу правила, которое пыталось скруглить края. Задаём через #intakePanel,
   где спорить уже некому. */
#intakePanel .run-split {
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 22px rgba(21, 112, 239, .22) !important;
  transition: box-shadow .18s ease, transform .18s ease;
}
#intakePanel .run-split:hover { box-shadow: 0 12px 30px rgba(21, 112, 239, .3) !important; transform: translateY(-1px); }
#intakePanel .run-split:active { transform: translateY(0); }
/* Скругления задаём НА САМИХ кнопках и весом выше, чем общее «обнулить углы»:
   иначе это правило било по собственному же скруглению — ровно та ошибка,
   из-за которой кнопка была с острыми углами. */
#intakePanel .run-split .btn.run-split-main {
  border-radius: 14px 0 0 14px !important;
  transition: background .18s ease;
}
/* 1.52.0. Это правило — САМОЕ ТЯЖЁЛОЕ по весу из всех про спутник (id + три
   класса), поэтому ширина закрепляется именно здесь: 52px во всех состояниях.
   Прежние width:auto + min-width:62px пережили бы любое новое правило ниже —
   диагностика поймала спутник 62px при заявленных 52. */
#intakePanel .run-split .btn.run-split-toggle {
  border-radius: 0 14px 14px 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 0 !important; padding: 0 !important;
  width: 52px !important; min-width: 52px !important; max-width: 52px !important;
  transition: background .18s ease, filter .18s ease;
  overflow: hidden !important;
}

/* 1.51.0. Здесь жил блок «подпись выезжает при наведении на спутник 📁»:
   кнопка росла с 62 до 168px и толкала всё содержимое ряда. Владелец показал
   это как баг. 1.52.0 вернул спутник, но рост не вернул: ширина закреплена
   намертво, наведение не меняет НИ ОДНОГО размера. */

/* Мелкое движение по всему остальному: вкладки, кнопки, строки. */
.ptab, .tab-add, .history-card, .app-shell .results .result-row {
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.app-shell .results .result-row:hover { transform: translateX(2px); }
.ptab:hover { transform: translateY(-1px); }
#intakePanel .intake-box { transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease; }
#intakePanel .intake-box:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(29, 41, 57, .08) !important; }

html[data-theme="dark"] #intakePanel .control-grid > .control-box:hover {
  border-color: #465a75 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .35) !important;
}
html[data-theme="dark"] #intakePanel .run-split { box-shadow: 0 8px 22px rgba(96, 165, 250, .2) !important; }

@media (prefers-reduced-motion: reduce) {
  #intakePanel .run-split, #intakePanel .run-split-main, #intakePanel .run-split-toggle,
  .ptab, .tab-add, .history-card, .app-shell .results .result-row,
  #intakePanel .control-grid > .control-box { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   1.41.0 / 1.42.0 / 1.43.0 — состояние языка видно ЦВЕТОМ СТРОКИ

   1.43.0 — ОДНА полоса вместо двух половин.

   Было две заливки: левая под перевод, правая под озвучку. На экране это
   читалось так, как и сказал владелец: «странная двойная и в самом начале не до
   конца блока». Двойная — потому что половины включались независимо и между
   ними оставался видимый шов. Не до конца — потому что левая упиралась в свои
   56 % ширины и дальше идти не могла, даже когда идти было куда.

   Теперь полоса одна и она про ВЕСЬ путь языка: перевод — первая половина,
   озвучка — вторая. Едет один край, слева направо, до самого края блока. Цвет
   меняется по дороге: зелёный перевод перетекает в синюю озвучку градиентом —
   ровно то перетекание, о котором шла речь с самого начала.

   Четыре цвета: зелёный — перевод готов, синий — озвучка, жёлтый — просит
   проверки, красный — ошибка.
   ══════════════════════════════════════════════════════════════════════════ */
.app-shell .results .result-row {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Полоса нарисована целиком и стоит на месте — видно из неё ровно столько,
   сколько открыл вырез. Едет только правый край выреза. */
.app-shell .results .result-row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  clip-path: inset(0 var(--обрез, 100%) 0 0);
  transition: clip-path var(--скорость, .5s) var(--кривая, linear);
  background: linear-gradient(90deg, rgba(21, 112, 239, .16) 0%, rgba(21, 112, 239, .1) 60%, rgba(21, 112, 239, .05) 100%);
}
/* Вторая половина больше не используется: полоса одна. */
.app-shell .results .result-row::after { content: none; }

/* ── Перевод идёт ───────────────────────────────────────────────────────── */
.app-shell .results .result-row[data-stage-tr="running"]::before {
  background: linear-gradient(90deg, rgba(21, 112, 239, .16) 0%, rgba(21, 112, 239, .1) 60%, rgba(21, 112, 239, .05) 100%);
}
/* ── Перевода нет вовсе — вся строка красная ────────────────────────────── */
.app-shell .results .result-row[data-stage-tr="error"]::before {
  background: linear-gradient(90deg, rgba(217, 45, 32, .17) 0%, rgba(217, 45, 32, .12) 100%);
}
/* ── Перевод готов, озвучки не заказывали: весь путь зелёный ────────────── */
.app-shell .results .result-row[data-stage-tr="done"]::before {
  background: linear-gradient(90deg, rgba(3, 152, 85, .18) 0%, rgba(3, 152, 85, .13) 100%);
}
.app-shell .results .result-row[data-stage-tr="review"]::before {
  background: linear-gradient(90deg, rgba(216, 160, 21, .2) 0%, rgba(216, 160, 21, .15) 100%);
}

/* ── Перевод готов И заказана озвучка: зелёное перетекает в синее ────────
   Переход занимает середину блока — это и есть градиент между стадиями. */
.app-shell .results .result-row[data-stage-tr="done"][data-stage-voice="idle"]::before,
.app-shell .results .result-row[data-stage-tr="done"][data-stage-voice="running"]::before,
.app-shell .results .result-row[data-stage-tr="done"][data-stage-voice="done"]::before {
  background: linear-gradient(90deg,
    rgba(3, 152, 85, .18) 0%,
    rgba(3, 152, 85, .16) 38%,
    rgba(21, 112, 239, .16) 62%,
    rgba(21, 112, 239, .2) 100%);
}
.app-shell .results .result-row[data-stage-tr="review"][data-stage-voice="idle"]::before,
.app-shell .results .result-row[data-stage-tr="review"][data-stage-voice="running"]::before,
.app-shell .results .result-row[data-stage-tr="review"][data-stage-voice="done"]::before {
  background: linear-gradient(90deg,
    rgba(216, 160, 21, .2) 0%,
    rgba(216, 160, 21, .17) 38%,
    rgba(21, 112, 239, .16) 62%,
    rgba(21, 112, 239, .2) 100%);
}
/* Перевод цел, а озвучка упала — краснеет ТОЛЬКО её часть пути. Так видно,
   что текст в порядке и переделывать надо лишь аудио. */
.app-shell .results .result-row[data-stage-tr="done"][data-stage-voice="error"]::before {
  background: linear-gradient(90deg,
    rgba(3, 152, 85, .18) 0%,
    rgba(3, 152, 85, .16) 38%,
    rgba(217, 45, 32, .15) 62%,
    rgba(217, 45, 32, .18) 100%);
}
.app-shell .results .result-row[data-stage-tr="review"][data-stage-voice="error"]::before {
  background: linear-gradient(90deg,
    rgba(216, 160, 21, .2) 0%,
    rgba(216, 160, 21, .17) 38%,
    rgba(217, 45, 32, .15) 62%,
    rgba(217, 45, 32, .18) 100%);
}

/* Левая кромка цветом стадии — видно даже боковым зрением, при прокрутке. */
.app-shell .results .result-row[data-stage-tr="done"] { border-left: 3px solid rgba(3, 152, 85, .55) !important; }
.app-shell .results .result-row[data-stage-tr="review"] { border-left: 3px solid rgba(216, 160, 21, .6) !important; }
.app-shell .results .result-row[data-stage-tr="error"] { border-left: 3px solid rgba(217, 45, 32, .6) !important; }
.app-shell .results .result-row[data-stage-tr="running"] { border-left: 3px solid rgba(21, 112, 239, .55) !important; }
.app-shell .results .result-row[data-stage-tr="done"][data-stage-voice="done"] { border-left-color: rgba(3, 152, 85, .75) !important; }

/* ── Тёмная тема: те же цвета, чуть плотнее ─────────────────────────────── */
html[data-theme="dark"] .app-shell .results .result-row[data-stage-tr="running"]::before {
  background: linear-gradient(90deg, rgba(96, 165, 250, .2) 0%, rgba(96, 165, 250, .12) 60%, rgba(96, 165, 250, .06) 100%);
}
html[data-theme="dark"] .app-shell .results .result-row[data-stage-tr="error"]::before {
  background: linear-gradient(90deg, rgba(249, 112, 102, .2) 0%, rgba(249, 112, 102, .14) 100%);
}
html[data-theme="dark"] .app-shell .results .result-row[data-stage-tr="done"]::before {
  background: linear-gradient(90deg, rgba(52, 211, 153, .2) 0%, rgba(52, 211, 153, .14) 100%);
}
html[data-theme="dark"] .app-shell .results .result-row[data-stage-tr="review"]::before {
  background: linear-gradient(90deg, rgba(253, 176, 34, .22) 0%, rgba(253, 176, 34, .15) 100%);
}
html[data-theme="dark"] .app-shell .results .result-row[data-stage-tr="done"][data-stage-voice="idle"]::before,
html[data-theme="dark"] .app-shell .results .result-row[data-stage-tr="done"][data-stage-voice="running"]::before,
html[data-theme="dark"] .app-shell .results .result-row[data-stage-tr="done"][data-stage-voice="done"]::before {
  background: linear-gradient(90deg,
    rgba(52, 211, 153, .2) 0%,
    rgba(52, 211, 153, .17) 38%,
    rgba(96, 165, 250, .18) 62%,
    rgba(96, 165, 250, .24) 100%);
}
html[data-theme="dark"] .app-shell .results .result-row[data-stage-tr="review"][data-stage-voice="idle"]::before,
html[data-theme="dark"] .app-shell .results .result-row[data-stage-tr="review"][data-stage-voice="running"]::before,
html[data-theme="dark"] .app-shell .results .result-row[data-stage-tr="review"][data-stage-voice="done"]::before {
  background: linear-gradient(90deg,
    rgba(253, 176, 34, .22) 0%,
    rgba(253, 176, 34, .18) 38%,
    rgba(96, 165, 250, .18) 62%,
    rgba(96, 165, 250, .24) 100%);
}
html[data-theme="dark"] .app-shell .results .result-row[data-stage-tr="done"][data-stage-voice="error"]::before {
  background: linear-gradient(90deg,
    rgba(52, 211, 153, .2) 0%,
    rgba(52, 211, 153, .17) 38%,
    rgba(249, 112, 102, .16) 62%,
    rgba(249, 112, 102, .22) 100%);
}
html[data-theme="dark"] .app-shell .results .result-row[data-stage-tr="review"][data-stage-voice="error"]::before {
  background: linear-gradient(90deg,
    rgba(253, 176, 34, .22) 0%,
    rgba(253, 176, 34, .18) 38%,
    rgba(249, 112, 102, .16) 62%,
    rgba(249, 112, 102, .22) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .app-shell .results .result-row::before { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   1.42.0 — разбор пяти замечаний по интерфейсу

   1. Заливка дёргалась и пульсировала   → переписана выше (clip-path).
   2. В шапке блоки разной высоты        → одна высота и одна форма у всех.
   3. Вкладки не как в VEO               → «＋» справа, вкладка закрывается.
   4. «Стоп» стоял в форме нового ввода  → переехал к прогрессу проекта.
   5. Архивы в шапке текста              → убраны, вместо них — работа с языком.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── (2) ШАПКА: ОДНА ВЫСОТА У ВСЕГО ────────────────────────────────────────
   Претензия была точной: «статус», «символы» и «Voice API» выше остальных,
   и это читается как дешёвая вёрстка. Причина в том, что каждый блок в шапке
   набирал высоту сам — кто из текста в две строки, кто из вертикальной
   раскладки «подпись сверху, число снизу», кто из min-height кнопки.

   Теперь высота задана ОДНА и снаружи, а внутренности выравниваются по центру.
   Никаких «примерно одинаково»: 30 пикселей у всех, включая сообщение об
   ошибке, которое раньше разъезжалось на две строки и было выше всех. */
.app-shell .app-topbar {
  --шапка-высота: 30px;
}
.app-shell .app-topbar .top-status,
.app-shell .app-topbar .job-chip,
.app-shell .app-topbar .top-balance-pill,
.app-shell .app-topbar .topbar-message .status,
.app-shell .app-topbar .top-actions > .btn,
.app-shell .app-topbar .top-actions > .ui-language-select,
.app-shell .app-topbar .settings-menu > .settings-menu-trigger,
.app-shell .app-topbar .voice-section-btn {
  height: var(--шапка-высота) !important;
  min-height: var(--шапка-высота) !important;
  max-height: var(--шапка-высота) !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
/* Марка — тот же рост, но без рамки: это значок, а не орган управления. */
.app-shell .app-topbar .brand-home {
  height: var(--шапка-высота) !important;
  min-height: var(--шапка-высота) !important;
  display: inline-flex !important; align-items: center !important;
  padding: 0 !important; border: none !important; background: none !important;
}
.app-shell .app-topbar .brand-logo { width: 26px !important; height: 26px !important; }
.app-shell .app-topbar .settings-menu {
  display: inline-flex !important; align-items: center !important;
  height: var(--шапка-высота) !important;
}
.app-shell .app-topbar .toprow { gap: 8px !important; }
.app-shell .app-topbar .top-actions { gap: 6px !important; align-items: center !important; }
.app-shell .app-topbar .top-balances { gap: 6px !important; align-items: center !important; }
.app-shell .app-topbar .job-chips { gap: 5px !important; align-items: center !important; }

/* «Символы» и «Voice API» были выше всех, потому что стояли столбиком:
   подпись сверху, значение снизу. Разворачиваем в строку — та же информация,
   тот же рост, что у соседей. */
.app-shell .app-topbar .top-balance-pill {
  flex-direction: row !important;
  max-width: 210px !important;
}
.app-shell .app-topbar .top-status > span,
.app-shell .app-topbar .top-balance-pill > span,
.app-shell .app-topbar .job-chip > i {
  font-size: 10px !important; font-weight: 800 !important;
  text-transform: uppercase; letter-spacing: .3px;
  color: var(--muted) !important; line-height: 1 !important;
}
.app-shell .app-topbar .top-status > strong,
.app-shell .app-topbar .top-balance-pill > strong,
.app-shell .app-topbar .job-chip > strong {
  font-size: 12px !important; font-weight: 900 !important; line-height: 1 !important;
}

/* Сообщение о состоянии: одна строка, тот же рост. Длинный текст ошибки
   сокращается многоточием, а целиком читается подсказкой при наведении —
   раньше он разъезжался на две строки и ломал ряд. */
.app-shell .app-topbar .topbar-message {
  display: flex !important; align-items: center !important;
  height: var(--шапка-высота) !important;
}
.app-shell .app-topbar .topbar-message .status {
  max-width: 100% !important;
  text-overflow: ellipsis !important;
  background: var(--panel-soft) !important;
}
.app-shell .app-topbar .topbar-message .status:not(.status-visible) {
  border-color: transparent !important; background: transparent !important;
}
.app-shell .app-topbar .settings-trigger-badges { line-height: 1 !important; }

/* ── (3) ВКЛАДКИ КАК В VEO ─────────────────────────────────────────────────
   «＋» стоит СПРАВА, сразу за последней вкладкой, и новая вкладка появляется
   там же, где стоит кнопка. Полоса вкладок больше не растягивается на всю
   ширину: она ровно по содержимому, а когда вкладок много — прокручивается,
   и кнопка остаётся видна. */
.tabstrip { order: 0; flex: 0 1 auto !important; }
.tab-add { order: 1 !important; }
.tabs-right { order: 2; margin-left: auto; }

/* Статус вкладки — смайликом. Точка-кружок была одинакового размера у всех
   состояний и различалась только оттенком: на светлой теме «в очереди» и
   «остановлено» путались. Значок читается сразу. */
.ptab .history-dot {
  width: auto !important; height: auto !important;
  min-width: 0 !important; background: none !important; border: none !important;
  box-shadow: none !important; border-radius: 0 !important;
  font-size: 11px !important; line-height: 1 !important;
}

/* Закрытие вкладки — как в VEO: крестик появляется при наведении и на
   активной вкладке, чтобы открытый проект можно было закрыть не целясь. */
.ptab-close {
  display: none; flex: 0 0 auto;
  width: 16px; height: 16px; padding: 0; margin-left: 1px;
  align-items: center; justify-content: center;
  border: none; border-radius: 5px; background: transparent;
  color: var(--muted); font-size: 14px; font-weight: 900; line-height: 1;
  cursor: pointer; min-height: 0;
  transition: background .15s ease, color .15s ease;
}
.ptab:hover .ptab-close,
.ptab.active .ptab-close { display: inline-flex; }
.ptab-close:hover { background: rgba(217, 45, 32, .14); color: var(--red); }
.ptab-close:disabled { opacity: .45; cursor: default; }
html[data-theme="dark"] .ptab-close { color: var(--muted); }
html[data-theme="dark"] .ptab-close:hover { background: rgba(249, 112, 102, .18); color: #f97066; }

/* ── (4) «СТОП» — У ПРОГРЕССА ПРОЕКТА ──────────────────────────────────────
   Кнопка живёт рядом с «Повторить проблемные»: оба действия про ОТКРЫТЫЙ
   проект. В форме нового перевода её больше нет — там она останавливала
   совсем другую задачу, и это справедливо вызывало вопрос. */
.app-shell .progress-head .progress-actions {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
}
.app-shell .progress-head .progress-actions .btn {
  min-height: 28px !important; height: 28px !important;
  padding: 0 10px !important; font-size: 11.5px !important;
  border-radius: 8px !important; white-space: nowrap;
}

/* ── (5) ШАПКА ТЕКСТА: РАБОТА С ЯЗЫКОМ, А НЕ АРХИВЫ ────────────────────────
   Кнопок ZIP здесь больше нет. Остались действия над открытым языком, и все
   они одного размера — раньше архивы были заметно мельче соседей. */
.zip-row-hidden { display: none !important; }
.app-shell .preview-head { align-items: center; gap: 10px; }
.app-shell .preview-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.app-shell .preview-actions > .btn {
  min-height: 32px !important; height: 32px !important;
  box-sizing: border-box !important;
  display: inline-flex !important; align-items: center !important;
  padding: 0 12px !important; font-size: 12.5px !important; font-weight: 800 !important;
  border-radius: 10px !important; white-space: nowrap;
}
.app-shell .preview-actions > .btn.preview-play-btn {
  border-color: rgba(21, 112, 239, .45) !important;
  background: rgba(21, 112, 239, .09) !important;
  color: var(--blue) !important;
}
.app-shell .preview-actions > .btn.preview-play-btn:hover { background: rgba(21, 112, 239, .16) !important; }
html[data-theme="dark"] .app-shell .preview-actions > .btn.preview-play-btn {
  border-color: rgba(96, 165, 250, .45) !important;
  background: rgba(96, 165, 250, .14) !important;
  color: #93c5fd !important;
}
/* Плеер разворачивается под шапкой и не занимает места, пока не нужен. */
.preview-audio {
  width: 100%; height: 34px; margin: 0 0 8px;
  border-radius: 10px; outline: none;
}
.preview-audio.hidden { display: none !important; }

/* ── 1.42.0-fix. То, что видно только по замерам ──────────────────────────
   Проверил computed style, а не глазами по снимку — и нашёл две вещи, которые
   мой же блок выше не победил.

   1. Балансы «Символы» и «Voice API» остались 44 пикселя вместо 30. Правило,
      которое их держало, перечисляет элементы ПО ИДЕНТИФИКАТОРУ, а мой блок
      бил по классу: идентификатор в каскаде сильнее, сколько классов ни ставь.
      Отвечаю тем же уровнем — по идентификатору.
   2. Сообщение о состоянии стояло на 8 пикселей выше ряда: оно позиционировано
      абсолютно и растянуто от верха до низа контейнера, у которого своя
      высота 46. Ставим его в общий ряд. */
.app-shell .app-topbar #topCharacterBalancePill,
.app-shell .app-topbar #topVoiceBalancePill {
  height: var(--шапка-высота) !important;
  min-height: var(--шапка-высота) !important;
  max-height: var(--шапка-высота) !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  align-content: center !important;
  gap: 7px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  max-width: 210px !important;
}
.app-shell .app-topbar #topCharacterBalancePill span,
.app-shell .app-topbar #topVoiceBalancePill span {
  font-size: 10px !important; line-height: 1 !important; letter-spacing: .3px;
}
.app-shell .app-topbar #topCharacterBalancePill strong,
.app-shell .app-topbar #topVoiceBalancePill strong {
  font-size: 12px !important; line-height: 1 !important;
}

.app-shell .app-topbar .topbar-message {
  height: var(--шапка-высота) !important;
  min-height: var(--шапка-высота) !important;
  align-self: center !important;
  position: relative !important;
}
.app-shell .app-topbar .topbar-message > .status.status-visible {
  position: static !important;
  height: var(--шапка-высота) !important;
  min-height: var(--шапка-высота) !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

/* Кнопка перехода между разделами обязана совпадать по обе стороны: «🎧 Озвучка»
   в переводчике и «← Перевод» в разделе озвучки стоят в одном углу экрана, и
   если у них разная высота, при переключении она прыгает. Раз ряд переводчика
   стал 30 пикселей, кнопка раздела идёт за ним. */
#voiceShell .vc-topbar,
.app-shell .app-topbar { --шапка-высота: 30px; }
#voiceShell .voice-section-btn,
#voiceShell #vcBackBtn,
.app-shell .voice-section-btn {
  height: var(--шапка-высота, 30px) !important;
  min-height: var(--шапка-высота, 30px) !important;
  max-height: var(--шапка-высота, 30px) !important;
  box-sizing: border-box !important;
  display: inline-flex !important; align-items: center !important;
  padding: 0 11px !important; border-radius: 999px !important;
  font-size: 12px !important; line-height: 1 !important; margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   1.43.0 — шапка текста не разъезжается от длинного замечания

   Текст претензии бывает длиннее самой шапки. Стоя в ней целиком, он
   переносился на вторую строку и сдвигал ряд кнопок вниз — шапка занимала
   пол-экрана. Теперь подпись держится в одну строку, а полностью читается в
   отдельном окне по кнопке «Подробнее» и подсказкой при наведении.
   ══════════════════════════════════════════════════════════════════════════ */
/* Ряд кнопок не переносится и не сжимается, а заголовок забирает ровно то,
   что осталось. Без `flex: 1 1 0` коробка заголовка росла по содержимому и
   выдавливала кнопки на второй ряд — шапка становилась вдвое выше. */
.app-shell .preview-head { flex-wrap: nowrap !important; align-items: center; gap: 12px; }
.app-shell .preview-head .preview-actions {
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
}
.app-shell .preview-head .preview-title-box {
  flex: 1 1 0 !important;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* Высота второй строки задана явно, и подпись с кнопкой «Подробнее» в неё
     вписаны обе. Иначе шапка становилась выше ровно там, где кнопка появляется,
     то есть на самых проблемных языках — а замер показал разницу в девять
     пикселей, которую глазом видно как «шапка поехала». */
  grid-template-rows: auto 20px;
  grid-template-areas: 'title title' 'meta note';
  align-items: center;
  column-gap: 8px;
}
.app-shell .preview-head .preview-title-box > h2 {
  grid-area: title;
  margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-shell .preview-head .preview-title-box > #previewMeta {
  grid-area: meta;
  margin: 0;
  min-width: 0;
  height: 20px; line-height: 20px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.preview-note-btn {
  grid-area: note;
  align-self: center;
  margin: 0;
  height: 20px; min-height: 20px; box-sizing: border-box;
  display: inline-flex; align-items: center;
  padding: 0 9px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel-soft); color: var(--muted);
  font-size: 11px; font-weight: 800; line-height: 1;
  white-space: nowrap; cursor: pointer;
}
.preview-note-btn:hover { border-color: #a9bdd8; color: var(--text); }
.preview-note-btn.hidden { display: none !important; }
html[data-theme="dark"] .preview-note-btn { background: #172235; border-color: #354760; }
html[data-theme="dark"] .preview-note-btn:hover { color: var(--text); }

.preview-note-modal { max-width: 780px; width: min(780px, 92vw); }
.preview-note-text {
  margin: 0; padding: 14px 16px 18px;
  max-height: 52vh; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
  font-size: 13px; line-height: 1.6; color: var(--text);
}

/* ══════════════════════════════════════════════════════════════════════════
   1.44.0 — плеер снизу, выбор при скачивании, простая панель над списком
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Плеер стоит внизу панели текста и не двигает ничего вокруг ─────────
   Кнопка «Прослушать» появлялась и пропадала при наведении и дёргала весь
   ряд. Плеер занимает своё место один раз и остаётся на нём. */
.app-shell .preview-panel { display: flex; flex-direction: column; min-height: 0; }
.app-shell .preview-panel > #previewText { flex: 1 1 auto; min-height: 0; }
.preview-player {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 8px 14px 10px;
  border-top: 1px solid var(--line);
  background: var(--panel-soft);
}
.preview-player.hidden { display: none !important; }
.preview-player-title {
  flex: 0 0 auto; max-width: 260px;
  font-size: 12px; font-weight: 800; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.preview-audio { flex: 1 1 auto; height: 34px; min-width: 0; border-radius: 10px; outline: none; }
html[data-theme="dark"] .preview-player { background: #131c2c; border-top-color: #2a3a52; }

/* ── Выбор при скачивании ──────────────────────────────────────────────── */
.download-pick { position: relative; display: inline-flex; }
.download-pick.hidden { display: none !important; }
.download-pick-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  display: flex; flex-direction: column; min-width: 210px;
  padding: 5px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); box-shadow: 0 18px 44px rgba(29, 41, 57, .22);
}
.download-pick-menu.hidden { display: none !important; }
.download-pick-item {
  padding: 8px 10px; border-radius: 8px;
  font-size: 12.5px; font-weight: 800; color: var(--text);
  text-decoration: none; white-space: nowrap;
}
.download-pick-item:hover { background: var(--panel-soft); }
html[data-theme="dark"] .download-pick-menu { background: #172235; border-color: #354760; }
html[data-theme="dark"] .download-pick-item:hover { background: #1f2d44; }

/* ── Панель над списком: поиск, язык названий, сортировка ───────────────
   Пять кнопок-фильтров убраны: состояние языка видно цветом строки. */
/* Три правила выше объявляют .result-tools колонкой и переопределяют отступы
   с !important. Ставим ряд тем же весом — иначе поиск занимал всю строку, а
   два переключателя уезжали под него и вставали по центру. */
.app-shell .result-tools,
.app-shell.job-active .result-tools,
.app-shell.job-final .result-tools {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}
.app-shell .result-tools > .filter-tabs[hidden] { display: none !important; }
.app-shell .result-tools > .search-input { flex: 1 1 auto; min-width: 0; }
.result-view-controls { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.result-view-controls .language-icon-btn { min-height: 32px; height: 32px; }
.result-view-controls .language-icon-btn.active {
  border-color: rgba(21, 112, 239, .5);
  background: rgba(21, 112, 239, .1);
  color: var(--blue);
}
html[data-theme="dark"] .result-view-controls .language-icon-btn.active {
  border-color: rgba(96, 165, 250, .5);
  background: rgba(96, 165, 250, .14);
  color: #93c5fd;
}

/* ══════════════════════════════════════════════════════════════════════════
   1.45.0 — таймер проекта и один переключатель списка
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Таймер в шапке ─────────────────────────────────────────────────────
   Тот же рост и та же форма, что у соседей по ряду: он часть шапки, а не
   гость в ней. Разбивка раскрывается при наведении и никого не двигает. */
.app-shell .app-topbar .job-timer {
  position: relative;
  height: var(--шапка-высота, 30px) !important;
  min-height: var(--шапка-высота, 30px) !important;
  box-sizing: border-box;
  display: inline-flex !important; align-items: center; gap: 6px;
  flex: 0 0 auto;
  padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel-soft);
  font-size: 12px; line-height: 1; white-space: nowrap; cursor: default;
}
.app-shell .app-topbar .job-timer.hidden { display: none !important; }
.app-shell .app-topbar .job-timer > span {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .3px; color: var(--muted);
}
.app-shell .app-topbar .job-timer > strong {
  font-size: 12px; font-weight: 900;
  font-variant-numeric: tabular-nums;
}
/* Пока проект идёт — кромка синяя. Без мигания: оно раздражает сильнее, чем
   помогает, и владелец об этом уже говорил про заливку. */
.app-shell .app-topbar .job-timer.идёт {
  border-color: rgba(21, 112, 239, .45);
  background: rgba(21, 112, 239, .08);
}
.app-shell .app-topbar .job-timer.идёт > strong { color: var(--blue); }
html[data-theme="dark"] .app-shell .app-topbar .job-timer.идёт {
  border-color: rgba(96, 165, 250, .45);
  background: rgba(96, 165, 250, .12);
}
html[data-theme="dark"] .app-shell .app-topbar .job-timer.идёт > strong { color: #93c5fd; }

.job-timer-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 70;
  display: none; width: 380px; max-height: 60vh; overflow: auto;
  padding: 12px 14px 10px;
  border: 1px solid var(--line); border-radius: 13px;
  background: var(--panel); box-shadow: 0 22px 60px rgba(29, 41, 57, .24);
  cursor: default;
}
/* Открывается нажатием, а не наведением: до таблицы нужно доводить курсор,
   а по дороге он выходил из зоны и окно захлопывалось. */
.job-timer.открыт .job-timer-pop { display: block; }
.job-timer { cursor: pointer; }
.job-timer.открыт { border-color: rgba(21, 112, 239, .55); }
.job-timer-head { font-size: 13px; font-weight: 900; margin-bottom: 8px; }
.job-timer-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.job-timer-table th {
  text-align: left; padding: 4px 6px; color: var(--muted);
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
  border-bottom: 1px solid var(--line);
}
.job-timer-table td { padding: 4px 6px; font-weight: 700; font-variant-numeric: tabular-nums; }
.job-timer-table td:first-child { font-weight: 800; }
.job-timer-table tbody tr:nth-child(even) { background: var(--panel-soft); }
.job-timer-table tbody tr.идёт td { color: var(--blue); }
.job-timer-table tfoot td {
  border-top: 1px solid var(--line); padding-top: 6px; font-weight: 900;
}
.job-timer-note { margin: 8px 0 0; font-size: 11px; line-height: 1.45; color: var(--muted); font-weight: 700; }
html[data-theme="dark"] .job-timer-pop { background: #172235; border-color: #354760; }
html[data-theme="dark"] .job-timer-table tbody tr:nth-child(even) { background: #1b2739; }
html[data-theme="dark"] .job-timer-table tbody tr.идёт td { color: #93c5fd; }

/* ── Один переключатель списка: флаг и алфавит вместе ──────────────────── */
.result-lang-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; box-sizing: border-box; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--text);
  font-size: 12px; font-weight: 800; cursor: pointer; min-height: 0;
}
.result-lang-btn:hover { border-color: #a9bdd8; }
.result-lang-btn img { width: 18px; height: 13px; border-radius: 2px; object-fit: cover; }
html[data-theme="dark"] .result-lang-btn { background: #172235; border-color: #354760; }

/* ══════════════════════════════════════════════════════════════════════════
   1.46.0. Сборки сайта и исполнителя разъехались.

   Сайт и txt-run собираются из одного архива и раскатываются по отдельности.
   Забыть второй деплой стоило владельцу дня: панель озвучки держала четыре
   задачи вместо двенадцати, всё выглядело исправным, а причина была в том,
   что исполнитель остался на прежней сборке. Версию он называет сам при
   каждом опросе очереди — значит сайт всё это время знал ответ.

   Показываем ТОЛЬКО при расхождении и только владельцу: когда всё сошлось,
   плашки нет вовсе и место в шапке она не занимает.
   ══════════════════════════════════════════════════════════════════════════ */
.app-shell .app-topbar .worker-warn {
  position: relative;
  height: var(--шапка-высота, 30px) !important;
  min-height: var(--шапка-высота, 30px) !important;
  box-sizing: border-box;
  display: inline-flex !important; align-items: center; gap: 6px;
  flex: 0 0 auto;
  margin-right: 8px;
  padding: 0 11px; border-radius: 999px;
  border: 1px solid rgba(217, 45, 32, .5); background: rgba(217, 45, 32, .1);
  font-size: 12px; line-height: 1; white-space: nowrap; cursor: pointer;
}
.app-shell .app-topbar .worker-warn.hidden { display: none !important; }
.app-shell .app-topbar .worker-warn > span {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .3px; color: #d92d20;
}
.app-shell .app-topbar .worker-warn > strong { font-size: 12px; font-weight: 900; color: #d92d20; }
/* Молчит — это не «старая сборка», а «исполнителя нет»: другая беда, другой
   цвет, чтобы не путать одно с другим. */
.app-shell .app-topbar .worker-warn.молчит {
  border-color: rgba(181, 122, 0, .5); background: rgba(181, 122, 0, .1);
}
.app-shell .app-topbar .worker-warn.молчит > span,
.app-shell .app-topbar .worker-warn.молчит > strong { color: #b57a00; }
html[data-theme="dark"] .app-shell .app-topbar .worker-warn > span,
html[data-theme="dark"] .app-shell .app-topbar .worker-warn > strong { color: #fca5a5; }
html[data-theme="dark"] .app-shell .app-topbar .worker-warn.молчит > span,
html[data-theme="dark"] .app-shell .app-topbar .worker-warn.молчит > strong { color: #fcd34d; }

.worker-warn-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  display: none; width: 420px; max-width: 80vw;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 13px;
  background: var(--panel); box-shadow: 0 22px 60px rgba(29, 41, 57, .24);
  cursor: default; white-space: normal; text-align: left;
  font-size: 12.5px; font-weight: 600; line-height: 1.5; color: var(--text);
}
/* Открывается нажатием и держится — ровно как разбивка таймера: причина та же,
   до текста нужно доводить курсор. */
.worker-warn.открыт .worker-warn-pop { display: block; }
.worker-warn-pop b { font-weight: 900; }
.worker-warn-pop .worker-warn-head { font-size: 13px; font-weight: 900; margin-bottom: 6px; }

/* ══════════════════════════════════════════════════════════════════════════
   1.49.1 — полоса возобновления сохранения в папку

   Доступ к папке браузер отдаёт только по действию человека и теряет его при
   перезагрузке страницы. Раньше сохранение в этом месте останавливалось
   молча: из пяти файлов на диск попадали два, и узнать об этом можно было
   только пересчитав папку. Полоса заметная нарочно — это не подсказка, это
   работа, которая встала.
   ══════════════════════════════════════════════════════════════════════════ */
.resume-save {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 11px 16px;
  border: 1px solid rgba(217, 119, 6, .38); border-radius: 14px;
  background: linear-gradient(180deg, rgba(217, 119, 6, .12), rgba(217, 119, 6, .06));
  color: var(--text);
}
.resume-save.hidden { display: none; }
.resume-save-ico { font-size: 18px; line-height: 1; flex: 0 0 auto; }
.resume-save-text { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.resume-save-text strong { font-size: 13px; font-weight: 800; }
.resume-save-text small { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.resume-save .btn { flex: 0 0 auto; }
.resume-save .btn.ghost { background: none; border-color: transparent; color: var(--muted); padding: 6px 10px; }

html[data-theme="dark"] .resume-save {
  border-color: rgba(245, 158, 11, .42);
  background: linear-gradient(180deg, rgba(245, 158, 11, .16), rgba(245, 158, 11, .07));
}

/* ══════════════════════════════════════════════════════════════════════════
   1.50.0 — экран «Новая задача»

   Перевод и озвучка съехались на один экран. Ни одной новой краски: все
   цвета берутся из переменных наверху файла, поэтому тёмная тема работает
   тут сама, без второго набора правил.

   Три ступени радиуса и ровно три уровня высоты (тень панели, тень плитки,
   цветная тень главной кнопки) — разнобой этих двух величин и есть то, от
   чего интерфейс выглядит собранным на скорую руку.
   ══════════════════════════════════════════════════════════════════════════ */

.nt { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* На мониторе 1920 форма во всю ширину рассыпается: сегмент растягивается на
   тысячу восемьсот пикселей, строка файла держит имя слева и объём у правого
   края, и глазу приходится ездить через весь экран. Ограничиваем ширину
   содержимого и ставим его по центру — читается как страница, а не как
   таблица. */
.nt > * { width: 100%; max-width: 1080px; margin-left: auto; margin-right: auto; }

/* ── сегмент режима ────────────────────────────────────────────────────── */
/* Перевод и озвучка — не «галочка», а два разных дела, поэтому это сегмент
   во всю ширину с подписью под каждым словом. Бегунок едет за выбором, цвет
   меняется с фиолетового на синий: режим видно боковым зрением. */
.nt-mode {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 5px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff, #f4f7fd);
  box-shadow: inset 0 1px 0 #fff, var(--shadow-soft);
  flex: 0 0 auto;
}
.nt-mode-thumb {
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(50% - 5px);
  height: calc(100% - 10px);
  border-radius: 14px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  box-shadow: 0 10px 26px rgba(124, 58, 237, .30);
  transition: transform .28s cubic-bezier(.34, 1.3, .44, 1), background .28s ease, box-shadow .28s ease;
  pointer-events: none;
}
/* Положение бегунка задаётся ЭТИМ правилом, а не атрибутом style в разметке:
   на сайте стоит style-src 'self', и инлайновый стиль молча не применится. */
.nt[data-mode="voice"] .nt-mode-thumb {
  transform: translateX(100%);
  background: linear-gradient(135deg, #3b82f6, #1570ef);
  box-shadow: 0 10px 26px rgba(21, 112, 239, .30);
}
.nt-mode-btn {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: center;
  gap: 11px;
  padding: 11px 14px !important;
  min-height: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  text-align: left;
  color: var(--soft-text);
  transition: color .2s ease;
}
.nt-mode-btn:hover { transform: none; }
.nt-mode-ico {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 17px;
  background: #fff;
  border: 1px solid var(--line);
  transition: background .2s ease, border-color .2s ease;
}
.nt-mode-txt { min-width: 0; }
.nt-mode-txt strong { display: block; font-size: 13.5px; font-weight: 900; line-height: 1.15; }
.nt-mode-txt small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; transition: color .2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt[data-mode="translate"] .nt-mode-btn[data-nt-mode="translate"],
.nt[data-mode="voice"] .nt-mode-btn[data-nt-mode="voice"] { color: #fff; }
.nt[data-mode="translate"] .nt-mode-btn[data-nt-mode="translate"] .nt-mode-txt small,
.nt[data-mode="voice"] .nt-mode-btn[data-nt-mode="voice"] .nt-mode-txt small { color: rgba(255, 255, 255, .82); }
.nt[data-mode="translate"] .nt-mode-btn[data-nt-mode="translate"] .nt-mode-ico,
.nt[data-mode="voice"] .nt-mode-btn[data-nt-mode="voice"] .nt-mode-ico {
  background: rgba(255, 255, 255, .20);
  border-color: rgba(255, 255, 255, .36);
}

/* ── шаги ──────────────────────────────────────────────────────────────── */
.nt-step { margin-top: 18px; }
.nt-step-h { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.nt-step-n {
  width: 20px; height: 20px; flex: 0 0 auto;
  border-radius: 7px; display: grid; place-items: center;
  background: rgba(124, 58, 237, .11); color: var(--accent);
  font-size: 11px; font-weight: 900;
  transition: background .2s ease, color .2s ease;
}
.nt[data-mode="voice"] .nt-step-n { background: rgba(21, 112, 239, .11); color: var(--blue); }
.nt-step-h b { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 900; }
.nt-step-h em {
  font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 700;
  margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%;
}

/* ── шаг 1: область ввода ФИКСИРОВАННОЙ высоты ─────────────────────────────
   Пустая зона, зона + три файла, зона + семнадцать файлов — всё живёт внутри
   одних и тех же 196px. Список при переполнении прокручивается ВНУТРИ, а шаги
   2 и 3 не сдвигаются ни на пиксель. Ровно от этого владелец и устал: «фронт
   прыгает», «есть возможность скролить внутри блока». */
.nt-intake-area {
  height: 196px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.nt-intake-area .nt-drop { flex: 1 1 auto; min-height: 0; }
.nt.has-content .nt-intake-area .nt-drop { flex: 0 0 auto; }
.nt-intake-area .nt-files { flex: 1 1 auto; min-height: 0; overflow: auto; margin-top: 0; }
.nt-intake-area .nt-files-foot { flex: 0 0 auto; margin-top: 0; }

/* ── единая зона ввода ─────────────────────────────────────────────────── */
/* Раньше это были ДВЕ плитки — «Файл .txt» и «Открыть окно ввода», — и
   выбирать вход приходилось раньше, чем задачу. Теперь вход один: та же
   зона принимает перетаскивание, выбор файлов и набор текста. */
.nt-drop {
  position: relative;
  border: 2px dashed var(--line-strong);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f7faff);
  min-height: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 20px; text-align: center;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.nt-drop:hover { border-color: rgba(124, 58, 237, .5); background: linear-gradient(180deg, #ffffff, #f5f2ff); }
.nt[data-mode="voice"] .nt-drop:hover { border-color: rgba(21, 112, 239, .5); background: linear-gradient(180deg, #ffffff, #eff6ff); }
.nt-drop.drag-over {
  border-color: var(--accent);
  background: #eef2ff;
  transform: translateY(-1px);
}
.nt[data-mode="voice"] .nt-drop.drag-over { border-color: var(--blue); background: #eff6ff; }
.nt-drop-ico { font-size: 30px; line-height: 1; }
.nt-drop-title { font-size: 15.5px; font-weight: 900; }
.nt-drop-hint { font-size: 12px; color: var(--muted); font-weight: 700; }
/* Кнопки лежат ПОВЕРХ прозрачного поля выбора файла. Без этого поле,
   растянутое на всю зону и стоящее в разметке после них, перехватывало бы
   нажатия: человек жмёт «Ввести текст», а открывается проводник. */
.nt-drop-acts {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 9px; margin-top: 9px; flex-wrap: wrap; justify-content: center;
}
.nt-or { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 800; }
/* Поле выбора файлов невидимо, но кликабельно по всей зоне — как было у
   прежней плитки .file-box. */
.nt-drop input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
/* Когда текст уже есть, зона сжимается в узкую полосу: место нужно списку
   файлов и настройкам, а не приглашению, которое уже сработало. */
.nt.has-content .nt-drop {
  min-height: 0;
  flex-direction: row;
  gap: 10px;
  padding: 10px 14px;
  text-align: left;
}
.nt.has-content .nt-drop-ico { font-size: 18px; }
.nt.has-content .nt-drop-title { font-size: 13px; }
.nt.has-content .nt-drop-hint { font-size: 11.5px; margin-left: 2px; }
.nt.has-content .nt-drop-acts { margin-top: 0; margin-left: auto; }

/* ── список принесённых файлов ─────────────────────────────────────────── */
.nt-files { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; }
.nt-files.hidden { display: none !important; }
.nt-file {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; font-size: 12.5px; min-width: 0;
}
.nt-file-ico {
  width: 26px; height: 26px; flex: 0 0 auto;
  border-radius: 8px; display: grid; place-items: center;
  background: var(--panel-soft); border: 1px solid var(--line); font-size: 12px;
}
.nt-file-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nt-file-size { margin-left: auto; color: var(--muted); font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.nt-file-x {
  flex: 0 0 auto; border: 0 !important; background: none !important; box-shadow: none !important;
  color: var(--muted); font-size: 14px; line-height: 1; padding: 2px 5px !important;
  min-height: 0 !important; border-radius: 6px !important;
}
.nt-file-x:hover { color: var(--err); background: rgba(217, 45, 32, .08) !important; }
/* Набранный руками текст — такая же строка списка, только значок другой:
   для очереди это ровно такой же будущий проект, как файл. */
.nt-file.is-typed .nt-file-ico { background: rgba(124, 58, 237, .10); border-color: rgba(124, 58, 237, .28); }
.nt-files-foot { display: flex; align-items: center; gap: 9px; margin-top: 9px; flex-wrap: wrap; }
.nt-files-foot.hidden { display: none !important; }
.nt-files-foot .btn { min-height: 28px; padding: 4px 10px; font-size: 11.5px; border-radius: 9px; }
.nt-files-hint { margin-left: auto; font-size: 11.5px; color: var(--muted); font-weight: 800; }

/* ── запуск ────────────────────────────────────────────────────────────── */
.nt-run { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nt-run-note { font-size: 11.5px; color: var(--muted); font-weight: 800; line-height: 1.5; flex: 1 1 220px; min-width: 0; }
.nt-run-note b { color: var(--soft-text); }
/* Кнопка запуска на этом экране стоит сама по себе, а не в колонке сетки:
   правило .control-grid для неё здесь не действует, ширину задаёт содержимое. */
.nt-step-run .run-split.run-control {
  display: inline-flex !important;
  flex: 0 0 auto;
  max-width: none !important;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  overflow: visible !important;
  /* Контейнер — невидимая обёртка РОВНО по кнопке. Старые правила давали ему
     свои отступы и синюю тень 1.42 — на снимке это выглядело бледным хвостом
     в 28px справа от кнопки. */
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  width: auto !important;
}
.nt-step-run .run-split-main {
  padding: 11px 26px !important;
  flex: 0 0 auto;
  /* Ширина закреплена: ни наведение, ни смена подписи «Перевести 3 файла» ↔
     «Озвучить» не двигают соседей. */
  min-width: 240px;
}
.nt-step-run .run-split-title { font-size: 14px; font-weight: 900; }
.nt-step-run .run-split-toggle { padding: 11px 15px !important; min-width: 46px; }
/* Пока текста нет, запускать нечего — кнопка гаснет, но остаётся на месте,
   чтобы шаг не прыгал при появлении первого файла.

   Гаснет ИМЕННО ЗАПУСК, а не весь орган: значок справа переключает, куда
   лягут файлы, и это настройка, а не запуск. Её человек вправе выставить
   заранее — до того, как принесёт первый файл. */
.nt:not(.has-content) .nt-step-run .run-split.run-control { opacity: .55; }
.nt:not(.has-content) .nt-step-run .run-split-main { pointer-events: none; }
.nt[data-mode="voice"] .nt-step-run .run-split-main,
.nt[data-mode="voice"] .nt-step-run .run-split-toggle {
  background: linear-gradient(135deg, #3b82f6, #1570ef) !important;
}
.nt[data-mode="voice"] .nt-step-run .run-split { box-shadow: 0 12px 28px rgba(21, 112, 239, .26); }

/* ── настройки шага 2 ──────────────────────────────────────────────────── */
/* Сетка настроек на этом экране — обычные колонки, а не «выезжающая» лента
   1.44.0: плитки тут не появляются по одной справа налево, они просто есть
   или их нет по режиму. */
#intakePanel .nt .control-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  /* Ровно два ряда по 76px ВСЕГДА, в обоих режимах: шаг «Запуск» стоит на
     месте пиксель в пиксель. Плитки подрезаны под ряд ЖЁСТКО — победа этого
     правила проверяется стендом, потому что один раз оно уже проигрывало
     старшему по весу соседу и плитки обрезались молча. */
  grid-template-rows: repeat(2, 76px) !important;
  grid-auto-rows: 0 !important;
  height: 161px !important;
  gap: 9px !important;
  margin: 0 !important; padding: 0 !important; border: none !important; background: none !important;
  align-items: stretch !important;
  overflow: hidden !important;
}
#intakePanel .nt .control-box {
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
  display: flex !important; flex-direction: column !important; justify-content: center !important;
  align-items: flex-start !important;
  gap: 6px !important;
  padding: 10px 14px !important;
  border: 1px solid var(--line) !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
  box-shadow: var(--shadow-soft) !important;
  max-width: none !important;
  overflow: hidden !important;
  text-align: left;
  /* Наведение НЕ двигает плитку: сдвиг на пиксель в сетке с overflow:hidden
     и есть та самая «пропавшая верхняя граница». */
  transform: none !important;
}
#intakePanel .nt .control-box:hover {
  border-color: rgba(124, 58, 237, .42) !important;
  transform: none !important;
}
#intakePanel .nt[data-mode="voice"] .control-box:hover { border-color: rgba(21, 112, 239, .42) !important; }
#intakePanel .nt .control-box > span {
  font-size: 10px !important; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted) !important; font-weight: 900 !important; line-height: 1 !important;
}
#intakePanel .nt .control-box > strong {
  font-size: 13.5px; font-weight: 900; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#intakePanel .nt .control-box select {
  width: 100%; max-width: 100%;
  border: 1px solid var(--line); border-radius: 9px; padding: 5px 8px;
  font-size: 12.5px; font-weight: 800; background: #fff; color: var(--text);
}
/* Вес: id + четыре класса. Старое правило «по два в ряд из шести колонок»
   (#intakePanel .control-grid > .control-box:not(.intake-box) { span 3 })
   тяжелее простого класса и в СЕТКЕ ИЗ ЧЕТЫРЁХ колонок раскладывало плитки
   по одной на ряд: пятая плитка уезжала в невидимый пятый ряд. Снимок
   перевода с озвучкой поймал ровно это. */
#intakePanel .nt .control-grid > .control-box:not(.intake-box) {
  grid-column: span 1 !important;
  min-height: 76px !important;
}
#intakePanel .nt .control-grid > .control-box.languages-control,
#intakePanel .nt .control-grid > .control-box.voice-template-box { grid-column: span 2 !important; }
/* Плитка режима, которого сейчас нет, не прячется рывком: она просто не
   участвует в раскладке. Значения внутри при этом сохраняются — переключение
   сегмента туда-обратно ничего не теряет. */
#intakePanel .nt[data-mode="voice"] .nt-only-translate,
#intakePanel .nt[data-mode="translate"] .nt-only-voice { display: none !important; }
/* «Оригинал» и «Языки озвучки» имеют смысл только когда озвучка включена.
   Шаблон голоса в переводе — тоже: он относится к озвучке. */
#intakePanel .nt[data-mode="translate"]:not(.has-voice) .voice-dependent { display: none !important; }
/* 1.51.0. Приглушения настроек больше НЕТ.
   Раньше блок стоял с opacity .45 и pointer-events: none — и выглядел
   выключенным, оставаясь кликабельным: у плиток внутри собственное правило
   pointer-events: auto, а у этого свойства ребёнок ПЕРЕБИВАЕТ родителя.
   Полувыключенный вид при работающих органах — враньё интерфейса. Владелец
   назвал багом, и решение здесь одно: настройки всегда видимы и всегда
   работают — их можно выставить ДО того, как принесён первый текст. */
/* Правило 1.44.0 «выезжающих» органов управления на этом экране отменяется
   целиком: там оно завязано на классы has-content/has-mode/has-voice сетки,
   здесь режим решает .nt. Без этой отмены плитки остались бы шириной 0. */
#intakePanel .nt .control-grid .progressive-control {
  opacity: 1; pointer-events: auto;
  max-width: none; min-width: 0;
  border-width: 1px !important;
  animation: none;
}
#intakePanel .nt .control-box.voice-template-box.needs-value {
  border-color: rgba(195, 54, 43, .55) !important;
  box-shadow: 0 0 0 2px rgba(195, 54, 43, .12) !important;
}

/* ── калькулятор под шагами ────────────────────────────────────────────── */
/* Вес с id ОБЯЗАТЕЛЕН: старое правило #intakePanel .top-footer { margin: 0 }
   тяжелее класса и молча съедало margin-top:auto — замер ловил калькулятор
   вплотную к кнопке при 237px пустоты ниже. */
#intakePanel .nt .top-footer {
  /* К НИЗУ панели, а не вплотную к кнопке: margin-top:auto забирает всё
     свободное место между шагом «Запуск» и калькулятором. Владелец: «находятся
     очень близко к кнопке… ближе к низу страницы, чтобы выглядело аккуратнее». */
  margin-top: auto !important;
  /* Сокращённая запись стоит РАНЬШЕ частной: padding:0 после padding-top
     молча вернул бы верхний отступ в ноль. */
  padding: 0 !important;
  padding-top: 22px !important;
  /* Виден ВСЕГДА, с нулями. Появление после первого текста — это движение
     страницы, а страница двигаться не должна. */
  display: block !important;
  opacity: 1 !important;
}
/* Прозрачность 1.44.0 (`.mini-calculator { opacity: 0 }` до появления текста)
   на этом экране отменена: калькулятор — часть постоянной геометрии. Снимок
   поймал это сразу — замер видел высоту, а человек видел пустоту: элемент
   стоял на месте, но был прозрачным. */
#intakePanel .nt .mini-calculator {
  width: 100% !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}
#intakePanel .nt[data-mode="voice"] .mini-calculator .nt-only-translate { display: none !important; }

/* ── тёмная тема ───────────────────────────────────────────────────────── */
html[data-theme="dark"] .nt-mode { background: linear-gradient(180deg, var(--panel), var(--panel-soft)); }
html[data-theme="dark"] .nt-mode-ico { background: var(--panel-soft); }
html[data-theme="dark"] .nt-drop { background: linear-gradient(180deg, var(--panel), var(--panel-soft)); }
html[data-theme="dark"] .nt-drop:hover,
html[data-theme="dark"] .nt-drop.drag-over { background: var(--panel-soft); }
html[data-theme="dark"] .nt-file { background: var(--panel); }
html[data-theme="dark"] .nt .control-box { background: linear-gradient(180deg, var(--panel), var(--panel-soft)) !important; }
html[data-theme="dark"] .nt .control-box select { background: var(--panel); color: var(--text); }
html[data-theme="dark"] .nt .control-box > strong { color: var(--text); }

/* ── узкие окна ────────────────────────────────────────────────────────── */
@media (max-width: 1500px) {
  .nt .control-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 1180px) {
  .nt .control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .nt-mode-txt small { display: none; }
}
@media (max-width: 820px) {
  .nt .control-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .nt .control-box.wide, .nt .languages-control, .nt .voice-template-box, .nt .nt-save-control { grid-column: span 1; }
  .nt-step-run .run-split.run-control { width: 100%; }
  .nt-step-run .run-split-main { flex: 1 1 auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   1.50.0 — вкладки: метка вида и свёрнутый пакет

   Озвучка без перевода больше не живёт в отдельном разделе со своей очередью:
   она встаёт в ту же ленту проектов. Вкладки поэтому одной формы — это один
   и тот же объект, проект пользователя. Различает их значок перед именем и
   оттенок верхней кромки.
   ══════════════════════════════════════════════════════════════════════════ */
.ptab-kind { flex: 0 0 auto; font-size: 11px; opacity: .85; line-height: 1; }
.ptab.kind-voice.active {
  border-color: rgba(21, 112, 239, .5);
  box-shadow: inset 0 2px 0 var(--blue);
}

/* Свёрнутый пакет. Семнадцать вкладок в строку не помещаются ни на одном
   мониторе, а прятать их в «Все N» — значит вернуть прежнюю историю внизу
   экрана. Пакет держит их одной кнопкой и разворачивает по нажатию. */
.tab-pack {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; min-height: 0;
  border: 1px solid rgba(124, 58, 237, .4); border-bottom: none;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(180deg, rgba(124, 58, 237, .10), rgba(124, 58, 237, .04));
  color: var(--accent-2); font-size: 12px; font-weight: 900; white-space: nowrap;
  box-shadow: none;
}
.tab-pack:hover { background: rgba(124, 58, 237, .16); border-color: rgba(124, 58, 237, .6); color: var(--accent-2); }
.tab-pack-mini { display: flex; gap: 2px; flex: 0 0 auto; }
.tab-pack-mini i { width: 3px; height: 12px; border-radius: 2px; background: currentColor; opacity: .45; display: block; }
.tab-pack-caret { font-size: 10px; opacity: .8; }
.tab-pack.is-open { background: rgba(124, 58, 237, .18); }
html[data-theme="dark"] .tab-pack { background: rgba(124, 58, 237, .18); color: #c4b5fd; }

/* ══════════════════════════════════════════════════════════════════════════
   1.50.0 — сводка в левой колонке

   В режиме озвучки языки не нужны, и список из сорока трёх строк там просто
   мешает. Вместо него — счёт того, что сейчас запустится: файлы, символы,
   дорожки, сколько спишется и куда лягут результаты.
   ══════════════════════════════════════════════════════════════════════════ */
.nt-summary { flex: 1 1 auto; min-height: 0; }
.nt-summary.hidden { display: none !important; }
.nt-summary-body { flex: 1; min-height: 0; overflow: auto; padding: 14px; }
.nt-sum-title {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 900; margin: 16px 0 8px;
}
.nt-sum-title:first-child { margin-top: 0; }
.nt-sum-list {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.nt-sum-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; background: var(--panel);
}
.nt-sum-row span { font-size: 11.5px; color: var(--muted); font-weight: 800; }
.nt-sum-row b { font-size: 14px; font-variant-numeric: tabular-nums; }
.nt-sum-row.accent b { color: var(--accent); }
.nt-dest {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--panel-soft);
}
.nt-dest-ico { font-size: 17px; flex: 0 0 auto; }
.nt-dest-text { min-width: 0; }
.nt-dest-text strong { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-dest-text small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
/* Список языков не нужен, когда переводить нечего, — и наоборот: пока
   выбирают языки, сводка отняла бы у списка половину высоты. Одна колонка,
   одно назначение, решает режим. */
.app-shell[data-nt-mode="voice"][data-pane="intake"] .language-panel { display: none !important; }
.app-shell:not([data-nt-mode="voice"]) .nt-summary,
.app-shell:not([data-pane="intake"]) .nt-summary { display: none !important; }

/* Подсветка списка языков по нажатию плитки «Языки перевода»: список из сорока
   трёх строк заметен, но не очевиден как то самое место, где отмечают языки. */
.language-panel.nt-flash { animation: ntFlash 1.2s ease; }
@keyframes ntFlash {
  0%, 100% { box-shadow: var(--shadow); }
  20%, 60% { box-shadow: 0 0 0 3px rgba(124, 58, 237, .35), var(--shadow); }
}

/* ══════════════════════════════════════════════════════════════════════════
   1.50.0 — вид пакета

   Прежний экран «Мои задачи» из раздела озвучки: сетка карточек, отбор по
   состоянию, «Скачать всё» одной кнопкой. Он переехал на главную и стал
   общим для перевода и озвучки — потому что теперь это одна лента проектов,
   а не две очереди в разных местах.

   Смысл сетки тот же, что и был: «полоса во всю ширину на мониторе 1920 —
   это одна позиция в ряд и пять пустых колонок справа; тридцать озвучек
   превращались в тридцать экранных строк».
   ══════════════════════════════════════════════════════════════════════════ */
.pack-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pack-panel.hidden { display: none !important; }
.pack-title h2 { margin: 0; font-size: 15px; font-weight: 900; }
.pack-title p { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); font-weight: 800; }
.pack-actions { display: flex; align-items: center; gap: 7px; }
.pack-actions .btn { min-height: 30px; padding: 5px 11px; font-size: 12px; border-radius: 10px; text-decoration: none; }
.pack-filters {
  flex: 0 0 auto; display: flex; gap: 6px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.pack-chip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 28px;
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel-soft);
  color: var(--muted); font-size: 11.5px; font-weight: 800;
}
.pack-chip:hover { border-color: var(--line-strong); color: var(--text); }
.pack-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pack-chip b { font-weight: 900; opacity: .85; }
.pack-body { flex: 1; min-height: 0; overflow: auto; padding: 14px; }
.pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 10px; }
.pack-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel); box-shadow: var(--shadow-soft); min-width: 0;
  text-align: left;
}
.pack-card:hover { border-color: rgba(124, 58, 237, .42); }
.pack-card-h { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pack-card-ico {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 10px;
  display: grid; place-items: center; font-size: 14px;
  background: var(--panel-soft); border: 1px solid var(--line);
}
.pack-card-h > span:last-child { min-width: 0; flex: 1 1 auto; }
.pack-card-t { display: block; font-size: 12.5px; font-weight: 800; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pack-card-s { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Состояние — чипом с точкой И СЛОВОМ. Цвет пропадает при печати, в тёмной
   теме и у тех, кто его не различает; слово остаётся всегда. */
.pack-st {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 800;
}
.pack-st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.pack-st.ok { background: rgba(3, 152, 85, .12); color: #067647; }
.pack-st.run { background: rgba(124, 58, 237, .13); color: var(--accent); }
.pack-st.err { background: rgba(217, 45, 32, .12); color: #b42318; }
.pack-st.idle { background: var(--panel-soft); color: var(--muted); }
.pack-st.gone { background: rgba(104, 117, 139, .14); color: var(--muted); }
.pack-bar { height: 5px; border-radius: 999px; background: #e8eef7; overflow: hidden; }
/* Ширина ставится из кода через CSSOM (атрибут style в разметке запрещён
   политикой style-src 'self'). Здесь нужен ноль по умолчанию: блочный элемент
   без ширины растягивается на всю строку, и ждущая задача рисовалась бы
   полностью готовой. */
.pack-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--accent), var(--blue)); transition: width .3s ease; }
.pack-actions .btn.disabled { opacity: .45; pointer-events: none; }
.pack-card-a { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; flex-wrap: wrap; }
.pack-card-a .btn { min-height: 28px; padding: 4px 10px; font-size: 11.5px; border-radius: 9px; text-decoration: none; }
.pack-empty { padding: 28px 14px; text-align: center; color: var(--muted); font-size: 13px; font-weight: 800; }
html[data-theme="dark"] .pack-bar { background: rgba(255, 255, 255, .10); }

/* ── голос на каждый файл и просмотр текста в списке ввода ─────────────── */
/* В прежнем разделе озвучки у каждой позиции пакета был свой выбор голоса и
   свой просмотр текста. Обе возможности сохранены: они переехали в строку
   списка на экране «Новая задача». */
.nt-file-voice {
  flex: 0 0 auto; max-width: 190px;
  border: 1px solid var(--line); border-radius: 9px; padding: 3px 7px;
  font-size: 11.5px; font-weight: 800; background: var(--panel); color: var(--text);
}
/* 1.53.0. В переводе голос строки виден, КОГДА озвучка включена: раньше он
   прятался всегда, и владелец не мог увидеть, каким шаблоном озвучится
   перевод. Без озвучки голоса нет — показывать нечего. */
.nt[data-mode="translate"]:not(.has-voice) .nt-file-voice { display: none; }
.nt-file-name { cursor: pointer; }
.nt-file-name:hover { color: var(--accent); text-decoration: underline; }

/* Окно просмотра текста позиции. Поверх страницы и во весь рост, а не
   окошком в карточке: владелец про прежний вариант сказал прямо —
   «в мелком окошке, ломающем общий вид фронта». */
.nt-read {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(20, 32, 51, .48); backdrop-filter: blur(3px);
}
.nt-read.hidden { display: none !important; }
.nt-read-box {
  width: min(880px, 100%); max-height: 86vh; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 20px; background: var(--panel);
  box-shadow: 0 30px 80px rgba(20, 32, 51, .34); overflow: hidden;
}
.nt-read-h {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.nt-read-h strong { font-size: 15px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-read-h small { font-size: 11.5px; color: var(--muted); font-weight: 800; white-space: nowrap; }
.nt-read-acts { margin-left: auto; display: flex; gap: 7px; }
.nt-read-body {
  flex: 1; min-height: 0; overflow: auto; padding: 18px;
  font-size: 14px; line-height: 1.75; color: var(--soft-text); white-space: pre-wrap; word-break: break-word;
}

/* ══════════════════════════════════════════════════════════════════════════
   1.50.0 — тёмная тема для новых узлов

   В теме стоит общее правило `html[data-theme="dark"] button { background:
   #202b3d !important }`. Оно старше этих компонентов и бьёт по КАЖДОЙ кнопке
   страницы, включая половинки сегмента режима, чипы отбора и вкладку пакета.
   Мой `background: none !important` на .nt-mode-btn против него не помог:
   при равной важности выигрывает более точный селектор, а у правила темы есть
   лишний атрибутный селектор.

   Поймано это было не чтением кода, а снимком экрана: сегмент в тёмной теме
   оказался ровной серой полосой — бегунок под кнопками был закрашен целиком.
   Ниже правила той же формы `html[data-theme="dark"] …`, но точнее.
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .nt-mode-btn {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--soft-text) !important;
}
html[data-theme="dark"] .nt[data-mode="translate"] .nt-mode-btn[data-nt-mode="translate"],
html[data-theme="dark"] .nt[data-mode="voice"] .nt-mode-btn[data-nt-mode="voice"] {
  color: #fff !important;
}
html[data-theme="dark"] .nt-mode-ico { background: var(--panel-soft) !important; }
html[data-theme="dark"] .nt[data-mode="translate"] .nt-mode-btn[data-nt-mode="translate"] .nt-mode-ico,
html[data-theme="dark"] .nt[data-mode="voice"] .nt-mode-btn[data-nt-mode="voice"] .nt-mode-ico {
  background: rgba(255, 255, 255, .20) !important;
  border-color: rgba(255, 255, 255, .36) !important;
}
/* Чип отбора в пакете: выбранный должен оставаться акцентным, а не сливаться
   с остальными в один серый ряд. */
html[data-theme="dark"] .pack-chip { background: var(--panel-soft) !important; color: var(--muted) !important; }
html[data-theme="dark"] .pack-chip.is-on {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
/* Вкладка пакета — тоже кнопка, и тоже была бы залита общим серым. */
html[data-theme="dark"] .tab-pack {
  background: rgba(124, 58, 237, .18) !important;
  border-color: rgba(124, 58, 237, .5) !important;
  color: #c4b5fd !important;
}
html[data-theme="dark"] .tab-pack:hover { background: rgba(124, 58, 237, .28) !important; }
/* Крестик в строке файла: у него нарочно нет ни фона, ни рамки. */
html[data-theme="dark"] .nt-file-x { background: none !important; border: 0 !important; }
html[data-theme="dark"] .nt-file-x:hover { background: rgba(217, 45, 32, .18) !important; }
/* Кнопка запуска в режиме озвучки: синяя, а не общая серая. */
html[data-theme="dark"] .nt[data-mode="voice"] .nt-step-run .run-split-main,
html[data-theme="dark"] .nt[data-mode="voice"] .nt-step-run .run-split-toggle {
  background: linear-gradient(135deg, #3b82f6, #1570ef) !important;
  border-color: rgba(147, 197, 253, .5) !important;
  color: #fff !important;
}

/* Плитки калькулятора, которых нет в режиме «Озвучка».
   Правило написано через #intakePanel нарочно: выше в файле стоит
   `#intakePanel .mini-calculator > div { display: flex !important }`, и любое
   правило без идентификатора ему проигрывает — селектор с id старше любого
   набора классов. Ровно так же в 1.50.0 общее правило тёмной темы закрашивало
   бегунок сегмента: важность равная, а точность разная.
   Сетка при этом переводится на автоподбор, иначе на месте убранных плиток
   останутся две дыры. */
.nt[data-mode="voice"] #intakePanel .mini-calculator .nt-only-translate,
#intakePanel .nt[data-mode="voice"] .mini-calculator .nt-only-translate { display: none !important; }
.nt[data-mode="voice"] #intakePanel .mini-calculator,
#intakePanel .nt[data-mode="voice"] .mini-calculator {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   1.51.0 — статичный фронт

   Разбор шестнадцати замечаний владельца, у которых один корень: интерфейс
   не должен двигаться от взаимодействия. Ни от наведения, ни от галочки, ни
   от смены секунд в таймере, ни от переключения вкладок или режима. Всё, что
   меняет длину, живёт в контейнере фиксированного размера; всё, что
   появляется и исчезает, резервирует своё место заранее.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── (1) Левая колонка: шапки «Языки» и «Сводка» пиксель в пиксель ───────── */
/* При перещёлкивании Перевод ↔ Озвучка одна панель сменяет другую. Если их
   шапки разной высоты, горизонтальная линия под шапкой прыгает. Обеим —
   ровно 50px, содержимое по центру, лишнее прячется. */
.app-shell .language-panel .language-head,
.app-shell .nt-summary > .panel-head {
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 15px !important;
  overflow: hidden !important;
}
.app-shell .language-panel .language-head > div:first-child p { display: none; }

/* ── (15) Статус-пилл: фиксированная ширина ──────────────────────────────
   «Готово к работе» ↔ «В работе» ↔ «Готово с проверкой» — тексты разной
   длины, а пилл стоит ЛЕВЕЕ счётчиков: его дыхание двигало всё, что правее.
   Ширина закреплена по самому длинному состоянию, лишнее обрезается. */
.app-shell .top-status {
  width: 230px !important;
  flex: 0 0 230px !important;
  overflow: hidden !important;
}
.app-shell .top-status strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── (13) Таймер в шапке: секунды тикают, шапка стоит ────────────────────── */
/* Цифры разной ширины — «0:41» уже, чем «0:44» в пропорциональном шрифте.
   tabular-nums делает все цифры одной ширины, min-width страхует переходы
   0:59 → 1:00 → 10:00. */
#jobTimerValue {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 5ch;
  text-align: center;
}
/* Резервировать место под скрытый таймер нельзя: на мониторах уже 1600px
   шапка переполнялась и уезжала за левый край — это поймал стенд раздела
   голосов. Достаточно табличных цифр и min-width: видимый таймер не дышит. */

/* ── (15) Счётчики задачи: любая цифра влезает без перестройки ───────────── */
.job-chip strong {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 5ch;
  text-align: center;
}
/* То же для счётчиков: место не резервируем (переполняло шапку на узких
   окнах), но видимые значения стоят на табличных цифрах с закреплённой
   шириной — переключение задач их не двигает. */

/* ── (14) Проигрыватель готовой озвучки — заметный, а не серая полоска ───── */
.preview-audio:not(.hidden) {
  display: block;
  width: 100% !important;
  height: 48px !important;
  flex: 0 0 auto !important;
  border-radius: 14px !important;
  border: 1px solid rgba(124, 58, 237, .38);
  background: rgba(124, 58, 237, .07);
  box-shadow: 0 8px 22px rgba(124, 58, 237, .14);
  padding: 3px;
}
html[data-theme="dark"] .preview-audio:not(.hidden) {
  border-color: rgba(167, 139, 250, .45);
  background: rgba(124, 58, 237, .16);
}

/* ── (14) Проект «только озвучка»: кнопок перевода в нём нет ─────────────── */
/* «Почему здесь есть кнопки, связанные с переводом, если перевода нет?» —
   потому что шапка текста была одна на всех. Теперь вид проекта решает:
   у озвучки нет ни «Перевести заново», ни «Принять», ни «⬇ TXT». */
.preview-panel.voice-only-job #retryPreviewBtn,
.preview-panel.voice-only-job #acceptPreviewBtn,
/* 1.54.0. «Озвучить» здесь тоже лишняя: этот файл УЖЕ озвучен, он для того и
   пришёл. Прежде кнопка оставалась видимой и предлагала озвучить озвучку. */
.preview-panel.voice-only-job #voicePreviewBtn,
.preview-panel.voice-only-job #downloadTextPick { display: none !important; }

/* Обёртка кнопки запуска — невидима и неподвижна; правила 1.42 с их синей
   тенью и подскоком перебиты тем же id-весом. */
#intakePanel .nt-step-run .run-split,
#intakePanel .nt-step-run .run-split:hover {
  box-shadow: none !important;
  transform: none !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}
/* 1.52.0. Спутник формата вернулся: три режима по кругу — 📁 папка, 🗜 ZIP,
   🚫 без скачивания. Ширина ЗАКРЕПЛЕНА, подписи не выезжают: наведение не
   меняет ни одного размера (это уже ловил стенд). Углы: у кнопки скруглены
   левые, у спутника правые — вместе они одна таблетка. */
#intakePanel .nt-step-run .run-split-main {
  border-radius: 14px 0 0 14px !important;
}
#intakePanel .nt-step-run .run-split-toggle,
#intakePanel .nt-step-run .run-split-toggle:hover {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  padding: 0 !important;
  border-radius: 0 14px 14px 0 !important;
  border-left: 1px solid rgba(255, 255, 255, .4) !important;
  font-size: 17px;
  transform: none !important;
}
#intakePanel .nt-step-run .run-split-toggle.is-off { filter: grayscale(1); opacity: .8; }
.nt:not(.has-content) .nt-step-run .run-split-toggle { pointer-events: auto; }

/* ── (16) Плитка настройки: смена значения не меняет геометрию ───────────── */
.nt .control-box > strong,
.nt .control-box .ios-label { font-variant-numeric: tabular-nums; }
.nt .control-box .ios-label { display: inline-block; min-width: 2.4em; }

/* ══════════════════════════════════════════════════════════════════════════
   1.52.0 — девять замечаний
   ══════════════════════════════════════════════════════════════════════════ */

/* ── (5) Плеер внизу — без названия языка ──────────────────────────────────
   Название разной длины двигало сам плеер. Заголовок скрыт: чей это звук,
   видно по выделенной строке слева и заголовку текста сверху. */
.preview-player .preview-player-title { display: none !important; }
.preview-player { gap: 0 !important; }
.preview-player .preview-audio { margin: 0 !important; }

/* ── (6) Выбранный язык в списке результатов — очевиден ──────────────────── */
.app-shell .results .result-row.active {
  background: linear-gradient(90deg, rgba(124, 58, 237, .14), rgba(124, 58, 237, .05)) !important;
  border-color: rgba(124, 58, 237, .75) !important;
  box-shadow: inset 4px 0 0 var(--accent), 0 6px 18px rgba(124, 58, 237, .12) !important;
}
.app-shell .results .result-row.active .result-main strong { color: var(--accent-2); }
html[data-theme="dark"] .app-shell .results .result-row.active {
  background: linear-gradient(90deg, rgba(139, 92, 246, .22), rgba(139, 92, 246, .08)) !important;
  border-color: rgba(167, 139, 250, .8) !important;
  box-shadow: inset 4px 0 0 #a78bfa, 0 6px 18px rgba(0, 0, 0, .35) !important;
}
html[data-theme="dark"] .app-shell .results .result-row.active .result-main strong { color: #c4b5fd; }

/* ── (7) Медальон состояния на флаге строки ────────────────────────────────
   Слева в строке есть место — на углу флага сидит кружок со значком:
   ✅ всё готово, 🔄 в работе, ⚠️ проверить, ❌ ошибка, ⏳ ждёт. Значок,
   а не только цвет: цвет пропадает при печати и у того, кто его не различает. */
.result-flag { position: relative !important; overflow: visible !important; }
/* 1.64.0. Медальон уезжал ПОД соседний блок: у строки свой фон и свой слой,
   и кружок оказывался позади него — виден был обрезанный уголок. Слой поднят,
   а строка перестала обрезать вылезающее за край. */
.result-row { overflow: visible; }
.result-medal {
  z-index: 3;
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 3px 8px rgba(20, 32, 51, .18);
  pointer-events: none;
}
.result-medal.ok { border-color: rgba(3, 152, 85, .45); background: #f0fdf7; }
.result-medal.err { border-color: rgba(217, 45, 32, .5); background: #fff1f0; }
.result-medal.warn { border-color: rgba(220, 138, 0, .5); background: #fffaf0; }
.result-medal.run { border-color: rgba(124, 58, 237, .45); background: #f6f2ff; }
.result-medal.idle { opacity: .85; }
html[data-theme="dark"] .result-medal { background: #202b3d; border-color: var(--line); }
html[data-theme="dark"] .result-medal.ok { background: #10261c; }
html[data-theme="dark"] .result-medal.err { background: #2b1413; }
html[data-theme="dark"] .result-medal.run { background: #211a33; }

/* ── (9) Окно «Голоса файлов» ─────────────────────────────────────────────── */
.nt-voices-btn { position: relative; }
.nt-voices-btn.needs-attention {
  border-color: rgba(195, 54, 43, .55) !important;
  box-shadow: 0 0 0 2px rgba(195, 54, 43, .12) !important;
}
.nt-voices .nt-read-box { width: min(760px, 100%); }
.nt-voices-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}
.nt-voices-select {
  flex: 1 1 220px;
  min-width: 180px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 800;
  background: var(--panel);
  color: var(--text);
}
.nt-voices-list { flex: 1; min-height: 0; overflow: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.nt-voices-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  cursor: pointer;
  font-size: 13px;
  min-width: 0;
}
.nt-voices-row:hover { border-color: var(--line-strong); }
.nt-voices-row.is-on { border-color: rgba(124, 58, 237, .6); background: rgba(124, 58, 237, .06); }
.nt-voices-row input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--accent); }
.nt-voices-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.nt-voices-size { color: var(--muted); font-size: 11.5px; font-weight: 800; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.nt-voices-cur {
  flex: 0 0 auto;
  max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 800;
  background: rgba(124, 58, 237, .10);
  color: var(--accent-2);
}
.nt-voices-cur.is-default { background: var(--panel-soft); color: var(--muted); }
.nt-voices-cur.is-missing { background: rgba(217, 45, 32, .10); color: #b42318; }
.nt-voices-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}
.nt-voices-note { flex: 1 1 auto; font-size: 12px; color: var(--muted); font-weight: 700; min-width: 0; }
html[data-theme="dark"] .nt-voices-row.is-on { background: rgba(139, 92, 246, .14); }

/* ══════════════════════════════════════════════════════════════════════════
   1.53.0 — центр, раскрытие списка, голос в переводе
   ══════════════════════════════════════════════════════════════════════════ */

/* ── (2) Раскрытие шага «Текст» поверх настроек ────────────────────────────
   В компактном виде область держит две строки списка — этого мало уже на
   трёх файлах. Наведение (или фокус внутри) раскрывает область до 400px
   ПОВЕРХ шага «Настройки»: рост полностью выкуплен отрицательным нижним
   отступом, поэтому кнопка запуска и калькулятор не двигаются ни на пиксель.
   Отрицательные верх/бока равны рамке с внутренним отступом (1px + 12px):
   содержимое остаётся ровно там, где стояло, — карточка вырастает ВОКРУГ
   него. */
/* Высота 400, а не больше: раскрытая карточка накрывает ТОЛЬКО шаг
   «Настройки» и никогда — кнопку запуска. Кнопка обязана быть нажимаемой в
   любой момент, даже пока список раскрыт под курсором. 196 − 400 + 13 = −191. */
#intakePanel .nt .nt-step-text { position: relative; }
#intakePanel .nt .nt-step-text.nt-раскрыт .nt-intake-area {
  position: relative;
  z-index: 60;
  height: 400px !important;
  margin: -13px -13px -191px !important;
  padding: 12px !important;
  border: 1px solid rgba(124, 58, 237, .4) !important;
  border-radius: 18px !important;
  background: var(--panel) !important;
  box-shadow: 0 30px 70px rgba(20, 32, 51, .3) !important;
}
#intakePanel .nt[data-mode="voice"] .nt-step-text.nt-раскрыт .nt-intake-area {
  border-color: rgba(21, 112, 239, .4) !important;
}
html[data-theme="dark"] #intakePanel .nt .nt-step-text.nt-раскрыт .nt-intake-area {
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55) !important;
}
/* В раскрытом виде список забирает всю прибавку и прокручивается внутри. */
#intakePanel .nt .nt-step-text.nt-раскрыт .nt-files { flex: 1 1 auto !important; max-height: none !important; }
/* Подсказка, что шаг раскрывается: едва заметная стрелка в мете шага,
   только когда файлов больше двух (то есть раскрытие вообще возможно). */
#intakePanel .nt .nt-step-text.nt-раскрываем .nt-step-h em::after {
  content: ' · наведите — развернётся';
  color: var(--accent-2);
  font-weight: 800;
}


/* 1.74.0 / 1.74.2. Переключатель письма у сербского: компактная таблетка второй строкой,
   фиксированной ширины (не растягивается и не «плывёт» от шрифта) */
.language-choice.has-script-toggle .language-info > span:not(.script-toggle) { display: none; }
.language-choice.has-script-toggle .language-info > .script-toggle { display: inline-flex; margin: 3px 0 0; width: auto; gap: 0; padding: 2px; border: 1px solid rgba(124, 58, 237, .35); border-radius: 999px; background: #fff; box-shadow: none; vertical-align: top; line-height: 0; }
.script-toggle button { flex: none; border: none !important; background: transparent; padding: 0 !important; margin: 0 !important; width: 28px !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; height: 14px !important; border-radius: 999px !important; box-shadow: none !important; font: inherit; font-size: 10px !important; font-weight: 850; letter-spacing: .02em; color: var(--muted); cursor: pointer; line-height: 14px !important; text-align: center; }
.script-toggle button.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.script-toggle button:not(.on):hover { background: #f1f5f9; }
html[data-theme="dark"] .language-choice.has-script-toggle .language-info > .script-toggle { background: rgba(255, 255, 255, .06); border-color: rgba(167, 139, 250, .45); }
html[data-theme="dark"] .script-toggle button:not(.on):hover { background: rgba(255, 255, 255, .08); }