/* ═══════════════════════════════════════════════════════════════════════ AGAVK Studio · skin.css модуля «Перевод и озвучка» (TXT Translator) Подключается ПОСЛЕДНИМ стилем. Меняет только внешний вид: цвета, шрифты, радиусы, рамки, тени, отступы (±25%). Раскладка, колонки и места кнопок — как в оригинале. Собирается скриптом _build/build.sh из трёх частей: 1) skin-head.css — сопоставление переменных оригинала с --st-*; 2) recolor.generated.css — автоматический слой перекраски: каждое объявление оригинала с «жёстким» цветом повторено с тем же селектором и той же важностью, но цвет заменён токеном студии; 3) skin-tail.css — компоненты студии (кнопки, поля, сегменты, чипы, вкладки, строки, окна), режим html.studio, телефон. ═══════════════════════════════════════════════════════════════════════ */ /* ── 1. Переменные оригинала → токены студии (все четыре блока :root) ── */ :root, html[data-theme="light"], html[data-theme="dark"], html:not([data-theme]) { --bg: var(--st-bg); --bg-2: var(--st-bg); --panel: var(--st-panel); --panel-soft: var(--st-panel2); --line: var(--st-line); --line-strong: color-mix(in srgb, var(--st-ink2) 30%, var(--st-line)); --text: var(--st-ink); --soft-text: var(--st-ink2); --muted: var(--st-mut); --accent: var(--st-ink); --accent-2: var(--st-ink); --blue: var(--st-accent); --violet: var(--st-accent); --ok: var(--st-ok); --warn: var(--st-warn); --err: var(--st-bad); --shadow: none; --shadow-soft: none; --radius: var(--st-r); --ui-scale: 1; } /* Акцент инструмента, если модуль открыт без ?tool= (переводчик по умолчанию). */ html:not([data-studio-tool]) { --st-accent: var(--t-trans); } /* Тема оригинала хранится и на : там тоже только токены. */ html[data-theme="dark"] body, body[data-theme="dark"], html[data-theme="light"] body, body[data-theme="light"] { color-scheme: inherit; } /* ── перекраска: styles.css (539 правил) ── */ body { background: var(--bg); } .app-topbar, .panel { background: color-mix(in srgb, var(--st-panel) 94%, transparent); } .brand-logo { background: color-mix(in srgb, var(--st-accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--st-accent) 25%, transparent); } .top-status { font-weight: 600; } .chip { background: var(--st-panel); color: var(--st-ink); font-weight: 600; } .btn, button, .download-all, .single-download, .result-actions a, .history-actions a, .ghost-link { background: var(--st-panel); color: var(--st-ink); font-weight: 600; box-shadow: none; } .btn:hover, button:hover, .download-all:hover, .result-actions a:hover, .history-actions a:hover, .ghost-link:hover { background: var(--st-panel); border-color: var(--st-line); box-shadow: none; } .primary, .btn.primary { border-color: color-mix(in srgb, var(--st-accent) 82%, transparent); background: var(--accent); color: var(--st-bg); box-shadow: none; } .primary:hover, .btn.primary:hover { background: var(--st-ink); } .danger, .btn.danger { border-color: color-mix(in srgb, var(--st-bad) 25%, transparent); background: var(--st-panel2); } .danger:hover, .btn.danger:hover { background: var(--st-panel2); border-color: color-mix(in srgb, var(--st-bad) 38%, transparent); } .warning, .btn.warning { border-color: color-mix(in srgb, var(--st-warn) 28%, transparent); background: var(--st-panel); color: var(--st-warn); } .control-box { background: var(--st-panel); font-weight: 600; box-shadow: none; } .control-box > span, .control-box summary span { font-weight: 600; } .file-box input[type="file"] { font-weight: 600; } .select-box select, .template-select, .control-box select { font-weight: 600; } .switch-line { font-weight: 600; } .modal-backdrop { background: color-mix(in srgb, var(--st-ink) 38%, transparent); } .modal-card { box-shadow: none; } .modal-head p { font-weight: 600; } .modal-close { background: var(--st-panel); } .manual-text-modal textarea { background: var(--st-panel); font-weight: 600; } .manual-text-modal textarea:focus, .search-input:focus { border-color: color-mix(in srgb, var(--st-accent) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--st-accent) 25%, transparent); } .modal-footer { font-weight: 600; } .status { font-weight: 600; } .mini-calculator div { background: var(--st-panel); } .mini-calculator span { font-weight: 600; } .panel-head, .preview-head { background: var(--st-panel); } .panel p, .preview-head p { font-weight: 600; } .stat-card { background: var(--st-panel); box-shadow: none; } .stat-card span { font-weight: 600; } .progress-track { background: var(--st-panel2); } .progress-fill { background: var(--violet); } .filter-tabs button { font-weight: 600; } .filter-tabs button.active { color: var(--st-bg); } .search-input { background: var(--st-panel); font-weight: 600; } .result-row, .history-row { background: var(--st-panel); box-shadow: none; } .result-pick input { accent-color: var(--accent, var(--st-ink)); } .row-act { background: var(--st-panel); } .row-act:hover { border-color: var(--st-line); background: var(--st-panel); } html[data-theme="dark"] .row-act { background: var(--st-panel2); } html[data-theme="dark"] .row-act:hover { background: var(--st-panel2); } .result-row:hover, .history-row:hover { background: var(--st-panel); border-color: var(--st-line); } .result-row.active { background: var(--st-panel2); border-color: color-mix(in srgb, var(--st-accent) 72%, transparent); } .result-row.done { border-color: color-mix(in srgb, var(--st-ok) 30%, transparent); } .result-row.needs_review { border-color: color-mix(in srgb, var(--st-warn) 38%, transparent); } .result-row.error { border-color: color-mix(in srgb, var(--st-bad) 35%, transparent); } .result-row.audio-error { border-color: color-mix(in srgb, var(--st-warn) 38%, transparent); } .lang-flag, .lang-flag-emoji, .result-flag { background: var(--st-panel2); } .lang-flag-img { box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-ink) 10%, transparent); } .result-main span, .history-main span { font-weight: 600; } .badge { font-weight: 600; background: var(--st-panel); } .language-toolbar { background: var(--st-panel); } .template-select { background: var(--st-panel); font-weight: 600; } .lang, .language-choice { background: var(--st-panel); box-shadow: none; } .lang:hover, .language-choice:hover { background: var(--st-panel); border-color: var(--st-line); } .lang:has(input:checked), .language-choice:has(input:checked) { background: var(--st-panel2); border-color: color-mix(in srgb, var(--st-accent) 65%, transparent); } .language-info span { font-weight: 600; } .download-info span { font-weight: 600; } .download-all { background: var(--st-panel); border-color: color-mix(in srgb, var(--st-ok) 24%, transparent); color: var(--st-ok); } .preview-panel pre { background: var(--st-panel); color: var(--st-ink); } .history-list { background: var(--st-panel); } .auth-card { background: color-mix(in srgb, var(--st-panel) 94%, transparent); } .logo-badge { font-weight: 600; background: var(--accent); color: var(--st-bg); box-shadow: none; } .contact-link { font-weight: 600; } .empty-results { font-weight: 600; } body { background: var(--st-panel2); } .brand-logo { background: var(--st-panel2); border-color: color-mix(in srgb, var(--st-accent) 30%, var(--st-line)); } .primary, .btn.primary { background: var(--st-ink); border-color: color-mix(in srgb, var(--st-accent) 75%, transparent); box-shadow: none; } .panel-head, .preview-head { background: var(--st-panel); } .language-count { border: 1px solid var(--st-line); background: var(--st-panel); color: var(--st-ink); font-weight: 600; } .language-toolbar { background: var(--st-panel); } .languages { background: var(--st-panel); } .lang:has(input:checked), .language-choice:has(input:checked) { background: var(--st-panel2); border-color: color-mix(in srgb, var(--st-accent) 30%, var(--st-line)); } .lang-flag, .lang-flag-emoji, .result-flag { background: var(--st-panel2); } .lang-flag-img { box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-ink) 8%, transparent); } .history-list { background: var(--st-panel); } .preview-panel pre { background: var(--st-panel); color: var(--st-ink); } body { background: var(--st-panel2) !important; } html[data-theme="light"] body, body[data-theme="light"] { background: var(--st-panel2) !important; } html[data-theme="dark"] body, body[data-theme="dark"] { background: var(--st-panel) !important; } html[data-theme="dark"] .app-topbar, html[data-theme="dark"] .panel, html[data-theme="dark"] .auth-card { background: color-mix(in srgb, var(--st-bg) 96%, transparent) !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: var(--st-panel) !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: var(--st-panel) !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: var(--st-panel2) !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: var(--st-panel2) !important; border-color: var(--st-mut) !important; } html[data-theme="dark"] .primary, html[data-theme="dark"] .btn.primary { background: var(--accent) !important; border-color: color-mix(in srgb, var(--st-accent) 72%, transparent) !important; color: var(--st-ink) !important; box-shadow: none !important; } html[data-theme="dark"] .danger, html[data-theme="dark"] .btn.danger { background: color-mix(in srgb, var(--st-bad) 16%, transparent) !important; border-color: color-mix(in srgb, var(--st-bad) 35%, transparent) !important; color: var(--st-bad) !important; } html[data-theme="dark"] .warning, html[data-theme="dark"] .btn.warning, html[data-theme="dark"] .notice { background: color-mix(in srgb, var(--st-warn) 16%, transparent) !important; border-color: color-mix(in srgb, var(--st-warn) 36%, transparent) !important; color: var(--st-warn) !important; } html[data-theme="dark"] .download-all { background: color-mix(in srgb, var(--st-ok) 16%, transparent) !important; border-color: color-mix(in srgb, var(--st-ok) 34%, transparent) !important; color: var(--st-ok) !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: var(--st-panel2) !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: color-mix(in srgb, var(--st-accent) 20%, transparent) !important; border-color: color-mix(in srgb, var(--st-accent) 70%, transparent) !important; } html[data-theme="dark"] .progress-track, html[data-theme="dark"] .bar { background: var(--st-panel) !important; } html[data-theme="dark"] .preview-panel pre, html[data-theme="dark"] .text-box { background: var(--st-panel) !important; } html[data-theme="dark"] .preview-empty { background: var(--st-panel) !important; } html[data-theme="dark"] .modal-backdrop { background: color-mix(in srgb, var(--st-bg) 62%, transparent) !important; } html[data-theme="dark"] .modal-head { background: var(--st-panel) !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--st-mut) !important; } html[data-theme="dark"] option { background: var(--st-panel2); } html[data-theme="light"] body, body[data-theme="light"] { background: var(--st-sunk) !important; } .control-box.intake-box { background: var(--st-panel) !important; box-shadow: none !important; } .control-box.intake-box:hover { border-color: color-mix(in srgb, var(--st-accent) 45%, transparent) !important; background: var(--st-panel) !important; box-shadow: none !important; } .file-box::after { background: color-mix(in srgb, var(--st-accent) 12%, transparent); font-weight: 600; } .file-box.drag-over { background: var(--st-panel2) !important; } .file-box.has-file { border-color: color-mix(in srgb, var(--st-ok) 42%, transparent) !important; background: var(--st-panel) !important; } .file-box.has-file::after { background: color-mix(in srgb, var(--st-ok) 16%, transparent); } .control-kicker { font-weight: 600 !important; } .intake-main { font-weight: 600; } .intake-sub { font-weight: 600 !important; } .tooltip-control:hover::after { border: 1px solid color-mix(in srgb, var(--st-ink) 12%, transparent); background: var(--st-ink); color: var(--st-bg); font-weight: 600; box-shadow: none; } .ios-switch { font-weight: 600; } .ios-track { background: color-mix(in srgb, var(--st-bad) 12%, var(--st-panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-ink) 10%, transparent); } .ios-knob { background: var(--st-panel); box-shadow: none; } .ios-switch input:checked + .ios-track { background: color-mix(in srgb, var(--st-ok) 12%, var(--st-panel)); } .status.status-visible { background: color-mix(in srgb, var(--st-panel) 60%, transparent); } html[data-theme="dark"] .control-box.intake-box { background: var(--st-panel2) !important; } html[data-theme="dark"] .control-box.intake-box:hover, html[data-theme="dark"] .file-box.drag-over { background: var(--st-panel2) !important; border-color: color-mix(in srgb, var(--st-accent) 55%, transparent) !important; } html[data-theme="dark"] .file-box.has-file { background: color-mix(in srgb, var(--st-ok) 16%, transparent) !important; border-color: color-mix(in srgb, var(--st-ok) 42%, transparent) !important; } html[data-theme="dark"] .tooltip-control:hover::after { background: var(--st-ink); color: var(--st-bg); border-color: color-mix(in srgb, var(--st-ink) 20%, transparent); } html[data-theme="dark"] .status.status-visible { background: var(--st-panel2); } .new-task-box { border-color: color-mix(in srgb, var(--st-bad) 34%, transparent) !important; background: var(--st-panel2) !important; box-shadow: none !important; } .new-task-box .control-kicker, .new-task-box .intake-sub { color: var(--st-bad) !important; } .new-task-box:hover { border-color: color-mix(in srgb, var(--st-bad) 56%, transparent) !important; background: var(--st-panel2) !important; box-shadow: none !important; } .app-shell.job-active .progress-panel .panel-head p { font-weight: 600 !important; } html[data-theme="dark"] .new-task-box { background: color-mix(in srgb, var(--st-bad) 17%, transparent) !important; border-color: color-mix(in srgb, var(--st-bad) 40%, transparent) !important; color: var(--st-bad) !important; } html[data-theme="dark"] .new-task-box .control-kicker, html[data-theme="dark"] .new-task-box .intake-sub { color: var(--st-bad) !important; } html[data-theme="dark"] .new-task-box .intake-main { color: var(--st-bad) !important; } html[data-theme="dark"] .new-task-box:hover { background: color-mix(in srgb, var(--st-bad) 24%, transparent) !important; border-color: color-mix(in srgb, var(--st-bad) 55%, transparent) !important; } .cursor-tooltip { border: 1px solid color-mix(in srgb, var(--st-ink) 14%, transparent); background: var(--st-ink); color: var(--st-bg); font-weight: 600; box-shadow: none; } html[data-theme="dark"] .cursor-tooltip { background: var(--st-ink); color: var(--st-bg); border-color: color-mix(in srgb, var(--st-ink) 22%, transparent); } .history-countdown { border: 1px solid var(--st-line); background: var(--st-panel2); color: var(--st-ink2) !important; font-weight: 600 !important; } .history-countdown.urgent { border-color: color-mix(in srgb, var(--st-warn) 35%, transparent); background: var(--st-panel2); color: var(--st-warn) !important; } .history-countdown.expired { border-color: color-mix(in srgb, var(--st-bad) 28%, transparent); background: var(--st-panel2); color: var(--st-bad) !important; } html[data-theme="dark"] .history-countdown { border-color: color-mix(in srgb, var(--st-accent) 30%, var(--st-line)); background: var(--st-panel); color: var(--st-ink2) !important; } html[data-theme="dark"] .history-countdown.urgent { border-color: color-mix(in srgb, var(--st-warn) 38%, transparent); background: color-mix(in srgb, var(--st-warn) 17%, transparent); color: var(--st-warn) !important; } html[data-theme="dark"] .history-countdown.expired { border-color: color-mix(in srgb, var(--st-bad) 35%, transparent); background: color-mix(in srgb, var(--st-bad) 16%, transparent); color: var(--st-bad) !important; } .ui-language-select { background: var(--st-panel); color: var(--st-ink); font-weight: 600; box-shadow: none; } .history-card, .history-row.history-card { background: var(--st-panel) !important; box-shadow: none !important; } .history-card:hover, .history-row.history-card:hover { border-color: var(--st-line) !important; background: var(--st-panel) !important; box-shadow: none !important; } .history-card span, .history-card small { font-weight: 600 !important; } .history-card.completed, .history-card.completed_with_errors, .history-card.completedWithErrors { border-color: color-mix(in srgb, var(--st-ok) 22%, transparent) !important; } .history-card.failed, .history-card.error { border-color: color-mix(in srgb, var(--st-bad) 25%, transparent) !important; background: var(--st-panel) !important; } .history-card.running, .history-card.queued { border-color: color-mix(in srgb, var(--st-accent) 25%, transparent) !important; background: var(--st-panel) !important; } html[data-theme="dark"] .history-card:hover, html[data-theme="dark"] .history-row.history-card:hover { background: var(--st-panel) !important; border-color: color-mix(in srgb, var(--st-accent) 55%, var(--st-line)) !important; } .history-card:hover, .history-row.history-card:hover { box-shadow: none !important; } .history-card.is-open, .history-row.history-card.is-open { border-color: color-mix(in srgb, var(--st-accent) 55%, transparent) !important; } .history-dot { background: var(--st-line); } .history-card.completed .history-dot, .history-card.completed_with_errors .history-dot { background: color-mix(in srgb, var(--st-ok) 12%, var(--st-panel)); } .history-card.failed .history-dot, .history-card.error .history-dot { background: color-mix(in srgb, var(--st-bad) 12%, var(--st-panel)); } .history-card.running .history-dot, .history-card.queued .history-dot { background: var(--st-ink); } .history-card.cancelled .history-dot, .history-card.interrupted .history-dot { background: color-mix(in srgb, var(--st-warn) 12%, var(--st-panel)); } .history-card .history-meta { font-weight: 600 !important; } .history-card .history-problem { font-weight: 600 !important; color: var(--st-bad) !important; } .history-restart { font-weight: 600 !important; } html[data-theme="dark"] .history-card .history-problem { color: var(--st-bad) !important; } html[data-theme="dark"] .history-card.is-open, html[data-theme="dark"] .history-row.history-card.is-open { border-color: color-mix(in srgb, var(--st-accent) 60%, transparent) !important; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--st-accent) 55%, var(--st-line)) !important; } .custom-language-button { background: var(--st-panel); color: var(--st-ink); font-weight: 600; box-shadow: none; } .custom-language-button img, .custom-language-menu img { border: 1px solid color-mix(in srgb, var(--st-ink) 12%, transparent); box-shadow: none; } .custom-language-menu { box-shadow: none; } .custom-language-menu button { font-weight: 600; } .custom-language-menu button:hover, .custom-language-menu button.active { background: color-mix(in srgb, var(--st-accent) 12%, transparent); } .custom-language-menu button span { font-weight: 600; } .notification-setting small { font-weight: 600; } html[data-theme="dark"] .custom-language-menu { box-shadow: none; } .auto-download-folder-card small { font-weight: 600; } .auto-download-folder-card.is-ready { border-color: color-mix(in srgb, var(--st-ok) 28%, transparent); background: color-mix(in srgb, var(--st-ok) 10%, transparent); } .auto-download-folder-card.is-error { border-color: color-mix(in srgb, var(--st-bad) 28%, transparent); background: color-mix(in srgb, var(--st-bad) 10%, transparent); } .auto-download-save-hint { font-weight: 600; } html[data-theme="dark"] .auto-download-folder-card.is-ready { border-color: color-mix(in srgb, var(--st-ok) 28%, transparent); background: color-mix(in srgb, var(--st-ok) 12%, transparent); } html[data-theme="dark"] .auto-download-folder-card.is-error { border-color: color-mix(in srgb, var(--st-bad) 28%, transparent); background: color-mix(in srgb, var(--st-bad) 12%, transparent); } .completion-toast { border: 1px solid color-mix(in srgb, var(--st-ok) 26%, transparent); background: color-mix(in srgb, var(--st-panel) 96%, transparent); box-shadow: none; } .completion-toast-icon { background: color-mix(in srgb, var(--st-ok) 14%, transparent); border: 1px solid color-mix(in srgb, var(--st-ok) 22%, transparent); } .completion-toast-body span { font-weight: 600; } .completion-toast.is-warning { border-color: color-mix(in srgb, var(--st-warn) 32%, transparent); } .completion-toast.is-warning .completion-toast-icon { background: color-mix(in srgb, var(--st-warn) 14%, transparent); border-color: color-mix(in srgb, var(--st-warn) 26%, transparent); } .completion-toast.is-error { border-color: color-mix(in srgb, var(--st-bad) 30%, transparent); } .completion-toast.is-error .completion-toast-icon { background: color-mix(in srgb, var(--st-bad) 14%, transparent); border-color: color-mix(in srgb, var(--st-bad) 24%, transparent); } html[data-theme="dark"] .completion-toast { background: color-mix(in srgb, var(--st-bg) 96%, transparent); box-shadow: none; } .template-manager-subhead { font-weight: 600; } .template-manager-subhead span { background: color-mix(in srgb, var(--st-accent) 12%, transparent); } .template-manager-item { background: var(--st-panel); box-shadow: none; } .template-manager-item span { font-weight: 600; } .template-manager-item:hover, .template-manager-item.active { background: var(--st-panel2); border-color: color-mix(in srgb, var(--st-accent) 62%, transparent); } .template-manager-empty-list { background: color-mix(in srgb, var(--st-panel) 60%, transparent); font-weight: 600; } .template-editor { background: var(--st-panel); } .template-editor-empty span { font-weight: 600; } .template-name-field { font-weight: 600; } .template-name-field input { background: var(--st-panel); font-weight: 600; } .template-name-field input:focus { border-color: color-mix(in srgb, var(--st-accent) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--st-accent) 25%, transparent); } .template-editor-toolbar span { font-weight: 600; } .template-language-choice { background: var(--st-panel); box-shadow: none; } .template-language-choice:hover { background: var(--st-panel); border-color: var(--st-line); } .template-language-choice:has(input:checked) { background: var(--st-panel2); border-color: color-mix(in srgb, var(--st-accent) 65%, transparent); } 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: var(--st-panel); } 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: color-mix(in srgb, var(--st-accent) 20%, transparent); border-color: color-mix(in srgb, var(--st-accent) 58%, transparent); } .history-card.queued::before, .history-card.running::before { font-weight: 600; color: var(--st-ink); background: color-mix(in srgb, var(--st-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--st-accent) 25%, transparent); } .history-card.running::before { color: var(--st-warn); background: color-mix(in srgb, var(--st-warn) 16%, transparent); border-color: color-mix(in srgb, var(--st-warn) 24%, transparent); } html[data-theme="dark"] .history-card.queued::before, html[data-theme="dark"] .history-card.running::before { color: var(--st-ink); background: color-mix(in srgb, var(--st-accent) 18%, transparent); border-color: color-mix(in srgb, var(--st-accent) 25%, transparent); } html[data-theme="dark"] .history-card.running::before { color: var(--st-warn); background: color-mix(in srgb, var(--st-warn) 20%, transparent); border-color: color-mix(in srgb, var(--st-warn) 24%, transparent); } .language-list-tools input, .language-list-tools select { font-weight: 600; } .language-list-tools input:focus, .language-list-tools select:focus { border-color: color-mix(in srgb, var(--st-accent) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-accent) 25%, transparent); } .language-view-controls { background: var(--st-panel); } .language-search-field { background: var(--st-panel); box-shadow: none; font-weight: 600; } .language-search-field:focus { border-color: color-mix(in srgb, var(--st-accent) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-accent) 25%, transparent); } .language-icon-btn { background: var(--st-panel); font-weight: 600; box-shadow: none; } .language-icon-btn:hover { border-color: color-mix(in srgb, var(--st-accent) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-accent) 25%, transparent); } .language-icon-btn img { box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-ink) 8%, transparent); } html[data-theme="dark"] .language-view-controls { background: var(--st-panel); } .language-template-strip { background: var(--st-panel); } .language-template-strip .language-mini-btn, .language-template-strip button { font-weight: 600; } .language-template-strip .template-select { font-weight: 600; } .template-create-btn { background: var(--st-panel); font-weight: 600; box-shadow: none; } .template-create-btn:hover { border-color: color-mix(in srgb, var(--st-accent) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-accent) 25%, transparent); } .brand-home:hover .brand-logo, .brand-home:focus-visible .brand-logo { box-shadow: none; } .manual-voice-field { font-weight: 600; } .manual-voice-field-head small, #manualVoiceStatus { font-weight: 600; } #manualVoiceTemplateSelect { background: var(--st-panel); font-weight: 600; } .manual-voice-language-choice { background: var(--st-panel); box-shadow: none; } .manual-voice-language-choice:hover { background: var(--st-panel); border-color: var(--st-line); } .manual-voice-language-choice:has(input:checked) { background: var(--st-panel2); border-color: color-mix(in srgb, var(--st-accent) 65%, transparent); } .manual-voice-flag { background: var(--st-panel2); } .manual-voice-info small { font-weight: 600; } .manual-voice-telegram { font-weight: 600; } .app-shell.job-active .result-stats, .app-shell.job-final .result-stats { font-weight: 600 !important; } html[data-theme="dark"] #manualVoiceTemplateSelect, html[data-theme="dark"] .manual-voice-language-choice { background: var(--st-panel); } html[data-theme="dark"] .manual-voice-language-choice:hover, html[data-theme="dark"] .manual-voice-language-choice:has(input:checked) { background: color-mix(in srgb, var(--st-accent) 20%, transparent); border-color: color-mix(in srgb, var(--st-accent) 58%, transparent); } .result-row.clickable:hover { background: var(--st-panel); border-color: color-mix(in srgb, var(--st-accent) 30%, var(--st-line)); box-shadow: none; } .result-row.clickable:focus-visible { outline: 3px solid color-mix(in srgb, var(--st-accent) 25%, transparent); } .result-row .result-stats, .app-shell.job-active .result-stats, .app-shell.job-final .result-stats { font-weight: 600 !important; } .result-row .error-text { color: var(--st-bad) !important; font-weight: 600 !important; } html[data-theme="dark"] .result-row.clickable:hover { background: color-mix(in srgb, var(--st-accent) 12%, transparent); border-color: color-mix(in srgb, var(--st-accent) 45%, transparent); } html[data-theme="dark"] .result-row .error-text { color: var(--st-bad) !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 { font-weight: 600 !important; } .results .error-text, .app-shell.job-active .results .error-text, .app-shell.job-final .results .error-text { color: var(--st-bad) !important; font-weight: 600 !important; } html[data-theme="dark"] .results .error-text { color: var(--st-bad) !important; } .auto-download-segmented { border: 1px solid var(--border, var(--st-line)); background: color-mix(in srgb, var(--st-accent) 8%, transparent); } .auto-download-segment { color: var(--text, var(--st-ink)); font-weight: 600; } .auto-download-segment:hover { background: color-mix(in srgb, var(--st-panel) 70%, transparent); } .auto-download-segment.is-active { background: var(--st-ink); color: var(--st-bg); box-shadow: none; } .auto-download-choice-summary { border: 1px solid color-mix(in srgb, var(--st-accent) 25%, transparent); background: color-mix(in srgb, var(--st-accent) 10%, transparent); } .auto-download-choice-summary strong { color: var(--text, var(--st-ink)); font-weight: 600; } .auto-download-choice-summary small { color: var(--muted, var(--st-ink2)); font-weight: 600; } html[data-theme="dark"] .auto-download-segmented { background: color-mix(in srgb, var(--st-accent) 14%, transparent); border-color: color-mix(in srgb, var(--st-ink) 22%, transparent); } html[data-theme="dark"] .auto-download-segment:hover { background: color-mix(in srgb, var(--st-ink) 6%, transparent); } html[data-theme="dark"] .auto-download-choice-summary { background: color-mix(in srgb, var(--st-accent) 12%, transparent); border-color: color-mix(in srgb, var(--st-ink) 20%, transparent); } .auto-download-mode-label strong { font-weight: 600; } .auto-download-mode-label small { font-weight: 600; } .top-balance-pill { border: 1px solid var(--border, color-mix(in srgb, var(--st-ink) 12%, transparent)); background: color-mix(in srgb, var(--st-panel) 72%, transparent); box-shadow: none; } .top-balance-pill span { color: var(--muted, var(--st-ink2)); font-weight: 600; } .top-balance-pill strong { color: var(--text, var(--st-ink)); } .top-balance-pill.danger { border-color: color-mix(in srgb, var(--st-bad) 45%, transparent); background: color-mix(in srgb, var(--st-panel) 92%, transparent); } .top-balance-pill.danger strong { color: var(--st-bad); } [data-theme="dark"] .top-balance-pill { background: color-mix(in srgb, var(--st-bg) 72%, transparent); border-color: color-mix(in srgb, var(--st-ink) 22%, transparent); } [data-theme="dark"] .top-balance-pill.danger { background: color-mix(in srgb, var(--st-bad) 32%, transparent); border-color: color-mix(in srgb, var(--st-bad) 45%, transparent); } .result-sort-tabs button { background: color-mix(in srgb, var(--st-panel) 78%, transparent); } .file-name-mode-control { font-weight: 600; } .file-name-mode-control select { background: var(--st-panel); font-weight: 600; } html[data-theme="dark"] .file-name-mode-control select, html[data-theme="dark"] .result-sort-tabs button { background: color-mix(in srgb, var(--st-bg) 82%, transparent); } .auto-download-toggle { border-color: color-mix(in srgb, var(--st-bad) 62%, transparent) !important; background: var(--st-panel) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-bad) 18%, transparent) !important; } .auto-download-toggle:hover { border-color: color-mix(in srgb, var(--st-bad) 88%, transparent) !important; background: var(--st-panel2) !important; } .auto-download-toggle.is-active { border-color: color-mix(in srgb, var(--st-ok) 72%, transparent) !important; background: var(--st-panel) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-ok) 18%, transparent) !important; } .auto-download-toggle.is-active:hover { border-color: color-mix(in srgb, var(--st-ok) 95%, transparent) !important; background: var(--st-panel2) !important; } html[data-theme="dark"] .auto-download-toggle { background: color-mix(in srgb, var(--st-bad) 16%, transparent) !important; border-color: color-mix(in srgb, var(--st-bad) 62%, transparent) !important; color: var(--st-bad) !important; } html[data-theme="dark"] .auto-download-toggle.is-active { background: color-mix(in srgb, var(--st-ok) 17%, transparent) !important; border-color: color-mix(in srgb, var(--st-ok) 62%, transparent) !important; color: var(--st-ok) !important; } .voice-languages-control strong { font-weight: 600; } .telegram-delivery-control.is-active { border-color: color-mix(in srgb, var(--st-ok) 42%, transparent); background: var(--st-panel); } html[data-theme="dark"] .telegram-delivery-control.is-active { border-color: color-mix(in srgb, var(--st-ok) 35%, transparent); background: color-mix(in srgb, var(--st-ok) 14%, transparent); } .voice-languages-save-hint { font-weight: 600; } .settings-menu-trigger[aria-expanded="true"] { border-color: color-mix(in srgb, var(--st-accent) 55%, transparent); background: var(--st-panel2); } .settings-menu-panel { background: var(--st-panel); box-shadow: none; } .settings-menu-item:not(.auto-download-toggle) { background: var(--st-panel) !important; } html[data-theme="dark"] .settings-menu-item:not(.auto-download-toggle) { background: var(--st-panel2) !important; } .settings-menu-item.file-name-mode-control { font-weight: 600; color: var(--st-ink); } html[data-theme="dark"] .settings-menu-panel { background: var(--st-panel2); } .app-topbar > .status.status-visible { font-weight: 600; } .app-topbar > .status.status-visible.err { background: var(--st-panel2); border-color: color-mix(in srgb, var(--st-bad) 35%, transparent); } .app-topbar > .status.status-visible.ok { background: var(--st-panel); border-color: color-mix(in srgb, var(--st-ok) 30%, transparent); } html[data-theme="dark"] .app-topbar > .status.status-visible { background: var(--st-panel2); } html[data-theme="dark"] .app-topbar > .status.status-visible.err { background: color-mix(in srgb, var(--st-bad) 20%, transparent); border-color: color-mix(in srgb, var(--st-bad) 40%, transparent); } html[data-theme="dark"] .app-topbar > .status.status-visible.ok { background: color-mix(in srgb, var(--st-ok) 20%, transparent); border-color: color-mix(in srgb, var(--st-ok) 40%, transparent); } .app-shell .app-topbar .topbar-message > .status.status-visible { font-weight: 600; } .app-shell .app-topbar .topbar-message > .status.status-visible.ok { background: var(--st-panel); border-color: color-mix(in srgb, var(--st-ok) 32%, transparent); } .app-shell .app-topbar .topbar-message > .status.status-visible.err { background: var(--st-panel2); border-color: color-mix(in srgb, var(--st-bad) 35%, transparent); } .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 { box-shadow: none; background: var(--st-panel); } html[data-theme="dark"] .app-shell .app-topbar .topbar-message > .status.status-visible { background: var(--st-panel2); } html[data-theme="dark"] .app-shell .app-topbar .topbar-message > .status.status-visible.ok { background: color-mix(in srgb, var(--st-ok) 20%, transparent); border-color: color-mix(in srgb, var(--st-ok) 40%, transparent); color: var(--st-ok) !important; } html[data-theme="dark"] .app-shell .app-topbar .topbar-message > .status.status-visible.err { background: color-mix(in srgb, var(--st-bad) 20%, transparent); border-color: color-mix(in srgb, var(--st-bad) 40%, transparent); color: var(--st-bad) !important; } html[data-theme="dark"] .app-shell .app-topbar .topbar-message > .status.status-visible.status-truncated:hover { background: var(--st-panel2); } .settings-badge { background: color-mix(in srgb, var(--st-ink) 6%, transparent); } .settings-badge.is-on { background: color-mix(in srgb, var(--st-ok) 20%, transparent); border-color: color-mix(in srgb, var(--st-ok) 38%, transparent); } .settings-badge.badge-lang { font-weight: 600; color: var(--st-ink); background: color-mix(in srgb, var(--st-accent) 16%, transparent); border-color: color-mix(in srgb, var(--st-accent) 30%, transparent); } html[data-theme="dark"] .settings-badge { background: color-mix(in srgb, var(--st-ink) 16%, transparent); } html[data-theme="dark"] .settings-badge.is-on { background: color-mix(in srgb, var(--st-ok) 26%, transparent); } html[data-theme="dark"] .settings-badge.badge-lang { color: var(--st-ink); background: color-mix(in srgb, var(--st-accent) 22%, transparent); } .results .result-row.original-row { background: var(--st-panel2) !important; border-color: color-mix(in srgb, var(--st-accent) 34%, transparent) !important; } .results .result-row.original-row:hover { background: var(--st-panel2) !important; border-color: color-mix(in srgb, var(--st-accent) 55%, transparent) !important; } .results .result-row.original-row.active { background: var(--st-sunk) !important; border-color: color-mix(in srgb, var(--st-accent) 72%, transparent) !important; } .results .result-row.original-row .result-flag { background: color-mix(in srgb, var(--st-accent) 14%, transparent) !important; border-color: color-mix(in srgb, var(--st-accent) 28%, transparent) !important; } .results .result-row.original-row .result-main strong { color: var(--st-ink); } .badge.slate { color: var(--st-ink2); background: var(--st-panel2); } html[data-theme="dark"] .results .result-row.original-row { background: var(--st-panel2) !important; border-color: color-mix(in srgb, var(--st-accent) 38%, transparent) !important; } html[data-theme="dark"] .results .result-row.original-row:hover { background: var(--st-panel2) !important; border-color: color-mix(in srgb, var(--st-accent) 58%, transparent) !important; } html[data-theme="dark"] .results .result-row.original-row.active { background: color-mix(in srgb, var(--st-accent) 22%, transparent) !important; border-color: color-mix(in srgb, var(--st-accent) 70%, transparent) !important; } html[data-theme="dark"] .results .result-row.original-row .result-main strong { color: var(--st-ink) !important; } html[data-theme="dark"] .badge.slate { color: var(--st-ink2); background: color-mix(in srgb, var(--st-ink) 14%, transparent); } .run-split-title { font-weight: 600; } .run-split-toggle { border-left: 1px solid color-mix(in srgb, var(--st-panel) 38%, transparent) !important; } .settings-menu-item.voice-provider-control, .settings-menu-item.auto-download-mode-control { font-weight: 600; color: var(--st-ink); } .control-box.voice-template-box.needs-value { border-color: color-mix(in srgb, var(--st-bad) 55%, transparent) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--st-bad) 18%, transparent) !important; } select.needs-value { border-color: color-mix(in srgb, var(--st-bad) 60%, transparent) !important; } .queue-row.running { border-color: color-mix(in srgb, var(--st-ok) 33%, transparent); } .queue-pos { font-weight: 600; } .queue-row.running .queue-pos { color: var(--st-ok); } .queue-kill { color: var(--st-bad); } .queue-kill:hover { border-color: color-mix(in srgb, var(--st-bad) 33%, transparent); } .job-chip i { font-weight: 600; } .job-chip strong { font-weight: 600; } .job-chip.done { border-color: color-mix(in srgb, var(--st-ok) 28%, transparent); background: color-mix(in srgb, var(--st-ok) 11%, transparent); } .job-chip.error { border-color: color-mix(in srgb, var(--st-bad) 28%, transparent); background: color-mix(in srgb, var(--st-bad) 10%, transparent); } .job-chip.review { border-color: color-mix(in srgb, var(--st-warn) 32%, transparent); background: color-mix(in srgb, var(--st-warn) 12%, transparent); } .job-chip.audio { border-color: color-mix(in srgb, var(--st-accent) 26%, transparent); background: color-mix(in srgb, var(--st-accent) 8%, transparent); } .ptab { font-weight: 600; } .ptab:hover { background: var(--st-panel); border-color: var(--st-line); } .ptab.active { background: var(--st-panel); border-color: color-mix(in srgb, var(--st-accent) 50%, transparent); } .ptab-count { font-weight: 600; } .ptab-restart { background: var(--st-panel); } .ptab-restart:hover { border-color: color-mix(in srgb, var(--st-accent) 30%, var(--st-line)); } .tab-add { border: 1px dashed color-mix(in srgb, var(--st-accent) 30%, var(--st-line)); background: color-mix(in srgb, var(--st-accent) 7%, transparent); font-weight: 600; } .tab-add:hover, .tab-add.active { background: color-mix(in srgb, var(--st-accent) 15%, transparent); } .all-projects-pop { box-shadow: none; } .all-projects-head strong { font-weight: 600; } .runbar { background: var(--st-sunk); } .app-shell .progress-head.compact #progressText { font-weight: 600 !important; } .intake-head h2 { font-weight: 600; } .download-row .download-all { font-weight: 600; border: 1px solid color-mix(in srgb, var(--st-ok) 32%, transparent); background: color-mix(in srgb, var(--st-ok) 11%, transparent); color: var(--st-ok); } html[data-theme="dark"] .ptab:hover, html[data-theme="dark"] .ptab.active { background: var(--st-panel); border-color: color-mix(in srgb, var(--st-accent) 55%, var(--st-line)); } html[data-theme="dark"] .ptab.active { box-shadow: inset 0 2px 0 color-mix(in srgb, var(--st-accent) 55%, var(--st-line)); } html[data-theme="dark"] .ptab-restart { background: var(--st-panel); border-color: color-mix(in srgb, var(--st-accent) 30%, var(--st-line)); } html[data-theme="dark"] .tab-add { border-color: color-mix(in srgb, var(--st-accent) 55%, var(--st-line)); background: color-mix(in srgb, var(--st-accent) 12%, transparent); color: var(--st-ink); } html[data-theme="dark"] .all-projects-pop { box-shadow: none; } html[data-theme="dark"] .runbar { background: var(--st-panel2); } html[data-theme="dark"] .download-row .download-all { border-color: color-mix(in srgb, var(--st-ok) 32%, transparent); background: color-mix(in srgb, var(--st-ok) 14%, transparent); color: var(--st-ok); } .tab-add { border: 1px dashed color-mix(in srgb, var(--st-accent) 30%, var(--st-line)); background: color-mix(in srgb, var(--st-accent) 8%, transparent); font-weight: 600; } .tab-add:hover, .tab-add.active { background: color-mix(in srgb, var(--st-accent) 16%, transparent); } #intakePanel .run-split-toggle { color: var(--st-bg) !important; } #intakePanel .mini-calculator span { font-weight: 600 !important; } #intakePanel .mini-calculator strong { font-weight: 600 !important; } html[data-theme="dark"] .tab-add { border-color: color-mix(in srgb, var(--st-accent) 55%, var(--st-line)); background: color-mix(in srgb, var(--st-accent) 12%, transparent); color: var(--st-ink); } html[data-theme="dark"] .tab-add:hover, html[data-theme="dark"] .tab-add.active { background: color-mix(in srgb, var(--st-accent) 20%, transparent); } #intakePanel .control-grid > .control-box:hover { border-color: color-mix(in srgb, var(--st-accent) 30%, var(--st-line)) !important; box-shadow: none !important; } #intakePanel .control-box.toggle-box:hover .ios-track { box-shadow: 0 0 0 4px color-mix(in srgb, var(--st-accent) 25%, transparent); } #intakePanel .run-split { box-shadow: none !important; } #intakePanel .run-split:hover { box-shadow: none !important; } #intakePanel .intake-box:hover { box-shadow: none !important; } html[data-theme="dark"] #intakePanel .control-grid > .control-box:hover { border-color: color-mix(in srgb, var(--st-accent) 55%, var(--st-line)) !important; box-shadow: none !important; } html[data-theme="dark"] #intakePanel .run-split { box-shadow: none !important; } .app-shell .results .result-row::before { background: color-mix(in srgb, var(--st-accent) 12%, transparent); } .app-shell .results .result-row[data-stage-tr="running"]::before { background: color-mix(in srgb, var(--st-accent) 12%, transparent); } .app-shell .results .result-row[data-stage-tr="error"]::before { background: color-mix(in srgb, var(--st-bad) 16%, transparent); } .app-shell .results .result-row[data-stage-tr="done"]::before { background: color-mix(in srgb, var(--st-ok) 17%, transparent); } .app-shell .results .result-row[data-stage-tr="review"]::before { background: color-mix(in srgb, var(--st-warn) 19%, transparent); } .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: color-mix(in srgb, var(--st-accent) 22%, transparent); } .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: color-mix(in srgb, var(--st-accent) 22%, transparent); } .app-shell .results .result-row[data-stage-tr="done"][data-stage-voice="error"]::before { background: color-mix(in srgb, var(--st-bad) 22%, transparent); } .app-shell .results .result-row[data-stage-tr="review"][data-stage-voice="error"]::before { background: color-mix(in srgb, var(--st-bad) 22%, transparent); } .app-shell .results .result-row[data-stage-tr="done"] { border-left: 3px solid color-mix(in srgb, var(--st-ok) 55%, transparent) !important; } .app-shell .results .result-row[data-stage-tr="review"] { border-left: 3px solid color-mix(in srgb, var(--st-warn) 60%, transparent) !important; } .app-shell .results .result-row[data-stage-tr="error"] { border-left: 3px solid color-mix(in srgb, var(--st-bad) 60%, transparent) !important; } .app-shell .results .result-row[data-stage-tr="running"] { border-left: 3px solid color-mix(in srgb, var(--st-accent) 55%, transparent) !important; } .app-shell .results .result-row[data-stage-tr="done"][data-stage-voice="done"] { border-left-color: color-mix(in srgb, var(--st-ok) 75%, transparent) !important; } html[data-theme="dark"] .app-shell .results .result-row[data-stage-tr="running"]::before { background: color-mix(in srgb, var(--st-accent) 8%, transparent); } html[data-theme="dark"] .app-shell .results .result-row[data-stage-tr="error"]::before { background: color-mix(in srgb, var(--st-bad) 18%, transparent); } html[data-theme="dark"] .app-shell .results .result-row[data-stage-tr="done"]::before { background: color-mix(in srgb, var(--st-ok) 18%, transparent); } html[data-theme="dark"] .app-shell .results .result-row[data-stage-tr="review"]::before { background: color-mix(in srgb, var(--st-warn) 19%, transparent); } 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: color-mix(in srgb, var(--st-accent) 22%, transparent); } 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: color-mix(in srgb, var(--st-accent) 22%, transparent); } html[data-theme="dark"] .app-shell .results .result-row[data-stage-tr="done"][data-stage-voice="error"]::before { background: color-mix(in srgb, var(--st-bad) 26%, transparent); } html[data-theme="dark"] .app-shell .results .result-row[data-stage-tr="review"][data-stage-voice="error"]::before { background: color-mix(in srgb, var(--st-bad) 26%, transparent); } .app-shell .app-topbar .top-status > span, .app-shell .app-topbar .top-balance-pill > span, .app-shell .app-topbar .job-chip > i { font-weight: 600 !important; } .app-shell .app-topbar .top-status > strong, .app-shell .app-topbar .top-balance-pill > strong, .app-shell .app-topbar .job-chip > strong { font-weight: 600 !important; } .ptab-close { font-weight: 600; } .ptab-close:hover { background: color-mix(in srgb, var(--st-bad) 18%, transparent); } html[data-theme="dark"] .ptab-close:hover { background: color-mix(in srgb, var(--st-bad) 22%, transparent); color: var(--st-bad); } .app-shell .preview-actions > .btn { font-weight: 600 !important; } .app-shell .preview-actions > .btn.preview-play-btn { border-color: color-mix(in srgb, var(--st-accent) 45%, transparent) !important; background: color-mix(in srgb, var(--st-accent) 11%, transparent) !important; } .app-shell .preview-actions > .btn.preview-play-btn:hover { background: color-mix(in srgb, var(--st-accent) 18%, transparent) !important; } html[data-theme="dark"] .app-shell .preview-actions > .btn.preview-play-btn { border-color: color-mix(in srgb, var(--st-accent) 45%, transparent) !important; background: color-mix(in srgb, var(--st-accent) 16%, transparent) !important; color: var(--st-ink) !important; } .preview-note-btn { font-weight: 600; } .preview-note-btn:hover { border-color: color-mix(in srgb, var(--st-accent) 30%, var(--st-line)); } html[data-theme="dark"] .preview-note-btn { background: var(--st-panel); border-color: color-mix(in srgb, var(--st-accent) 30%, var(--st-line)); } .preview-player-title { font-weight: 600; } html[data-theme="dark"] .preview-player { background: var(--st-panel); border-top-color: var(--st-line); } .download-pick-menu { box-shadow: none; } .download-pick-item { font-weight: 600; } html[data-theme="dark"] .download-pick-menu { background: var(--st-panel); border-color: color-mix(in srgb, var(--st-accent) 30%, var(--st-line)); } html[data-theme="dark"] .download-pick-item:hover { background: var(--st-panel2); } .result-view-controls .language-icon-btn.active { border-color: color-mix(in srgb, var(--st-accent) 50%, transparent); background: color-mix(in srgb, var(--st-accent) 12%, transparent); } html[data-theme="dark"] .result-view-controls .language-icon-btn.active { border-color: color-mix(in srgb, var(--st-accent) 50%, transparent); background: color-mix(in srgb, var(--st-accent) 16%, transparent); color: var(--st-ink); } .app-shell .app-topbar .job-timer > span { font-weight: 600; } .app-shell .app-topbar .job-timer > strong { font-weight: 600; } .app-shell .app-topbar .job-timer.идёт { border-color: color-mix(in srgb, var(--st-accent) 45%, transparent); background: color-mix(in srgb, var(--st-accent) 10%, transparent); } html[data-theme="dark"] .app-shell .app-topbar .job-timer.идёт { border-color: color-mix(in srgb, var(--st-accent) 45%, transparent); background: color-mix(in srgb, var(--st-accent) 14%, transparent); } html[data-theme="dark"] .app-shell .app-topbar .job-timer.идёт > strong { color: var(--st-ink); } .job-timer-pop { box-shadow: none; } .job-timer.открыт { border-color: color-mix(in srgb, var(--st-accent) 55%, transparent); } .job-timer-head { font-weight: 600; } .job-timer-table th { font-weight: 600; } .job-timer-table td { font-weight: 600; } .job-timer-table td:first-child { font-weight: 600; } .job-timer-table tfoot td { font-weight: 600; } .job-timer-note { font-weight: 600; } html[data-theme="dark"] .job-timer-pop { background: var(--st-panel); border-color: color-mix(in srgb, var(--st-accent) 30%, var(--st-line)); } html[data-theme="dark"] .job-timer-table tbody tr:nth-child(even) { background: var(--st-panel2); } html[data-theme="dark"] .job-timer-table tbody tr.идёт td { color: var(--st-ink); } .result-lang-btn { font-weight: 600; } .result-lang-btn:hover { border-color: color-mix(in srgb, var(--st-accent) 30%, var(--st-line)); } html[data-theme="dark"] .result-lang-btn { background: var(--st-panel); border-color: color-mix(in srgb, var(--st-accent) 30%, var(--st-line)); } .app-shell .app-topbar .worker-warn { border: 1px solid color-mix(in srgb, var(--st-bad) 50%, transparent); background: color-mix(in srgb, var(--st-bad) 14%, transparent); } .app-shell .app-topbar .worker-warn > span { font-weight: 600; color: var(--st-bad); } .app-shell .app-topbar .worker-warn > strong { font-weight: 600; color: var(--st-bad); } .app-shell .app-topbar .worker-warn.молчит { border-color: color-mix(in srgb, var(--st-warn) 50%, transparent); background: color-mix(in srgb, var(--st-warn) 14%, transparent); } .app-shell .app-topbar .worker-warn.молчит > span, .app-shell .app-topbar .worker-warn.молчит > strong { color: var(--st-warn); } html[data-theme="dark"] .app-shell .app-topbar .worker-warn > span, html[data-theme="dark"] .app-shell .app-topbar .worker-warn > strong { color: var(--st-bad); } html[data-theme="dark"] .app-shell .app-topbar .worker-warn.молчит > span, html[data-theme="dark"] .app-shell .app-topbar .worker-warn.молчит > strong { color: var(--st-warn); } .worker-warn-pop { box-shadow: none; } .worker-warn-pop b { font-weight: 600; } .worker-warn-pop .worker-warn-head { font-weight: 600; } .resume-save { border: 1px solid color-mix(in srgb, var(--st-warn) 38%, transparent); background: color-mix(in srgb, var(--st-warn) 10%, transparent); } .resume-save-text strong { font-weight: 600; } html[data-theme="dark"] .resume-save { border-color: color-mix(in srgb, var(--st-warn) 42%, transparent); background: color-mix(in srgb, var(--st-warn) 11%, transparent); } .nt-mode { background: var(--st-panel); box-shadow: inset 0 1px 0 var(--st-line2); } .nt-mode-thumb { background: var(--st-ink); box-shadow: none; } .nt[data-mode="voice"] .nt-mode-thumb { background: var(--st-ink); box-shadow: none; } .nt-mode-ico { background: var(--st-panel); } .nt-mode-txt strong { font-weight: 600; } .nt[data-mode="translate"] .nt-mode-btn[data-nt-mode="translate"], .nt[data-mode="voice"] .nt-mode-btn[data-nt-mode="voice"] { color: var(--st-bg); } .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: color-mix(in srgb, var(--st-bg) 82%, transparent); } .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: color-mix(in srgb, var(--st-panel) 20%, transparent); border-color: color-mix(in srgb, var(--st-panel) 36%, transparent); } .nt-step-n { background: color-mix(in srgb, var(--st-accent) 13%, transparent); font-weight: 600; } .nt[data-mode="voice"] .nt-step-n { background: color-mix(in srgb, var(--st-accent) 13%, transparent); } .nt-step-h b { font-weight: 600; } .nt-step-h em { font-weight: 600; } .nt-drop { background: var(--st-panel); } .nt-drop:hover { border-color: color-mix(in srgb, var(--st-accent) 50%, transparent); background: var(--st-panel); } .nt[data-mode="voice"] .nt-drop:hover { border-color: color-mix(in srgb, var(--st-accent) 50%, transparent); background: var(--st-panel); } .nt-drop.drag-over { background: var(--st-panel2); } .nt[data-mode="voice"] .nt-drop.drag-over { background: var(--st-panel2); } .nt-drop-title { font-weight: 600; } .nt-drop-hint { font-weight: 600; } .nt-or { font-weight: 600; } .nt-file { background: var(--st-panel); } .nt-file-name { font-weight: 600; } .nt-file-size { font-weight: 600; } .nt-file-x:hover { background: color-mix(in srgb, var(--st-bad) 12%, transparent) !important; } .nt-file.is-typed .nt-file-ico { background: color-mix(in srgb, var(--st-accent) 12%, transparent); border-color: color-mix(in srgb, var(--st-accent) 28%, transparent); } .nt-files-hint { font-weight: 600; } .nt-run-note { font-weight: 600; } .nt-step-run .run-split-title { font-weight: 600; } .nt[data-mode="voice"] .nt-step-run .run-split-main, .nt[data-mode="voice"] .nt-step-run .run-split-toggle { background: var(--st-ink) !important; } .nt[data-mode="voice"] .nt-step-run .run-split { box-shadow: none; } #intakePanel .nt .control-box { background: var(--st-panel) !important; } #intakePanel .nt .control-box:hover { border-color: color-mix(in srgb, var(--st-accent) 42%, transparent) !important; } #intakePanel .nt[data-mode="voice"] .control-box:hover { border-color: color-mix(in srgb, var(--st-accent) 42%, transparent) !important; } #intakePanel .nt .control-box > span { font-weight: 600 !important; } #intakePanel .nt .control-box > strong { font-weight: 600; } #intakePanel .nt .control-box select { font-weight: 600; background: var(--st-panel); } #intakePanel .nt .control-box.voice-template-box.needs-value { border-color: color-mix(in srgb, var(--st-bad) 55%, transparent) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--st-bad) 18%, transparent) !important; } html[data-theme="dark"] .nt-mode { background: var(--panel); } html[data-theme="dark"] .nt-drop { background: var(--panel); } html[data-theme="dark"] .nt .control-box { background: var(--panel) !important; } .ptab.kind-voice.active { border-color: color-mix(in srgb, var(--st-accent) 50%, transparent); } .tab-pack { border: 1px solid color-mix(in srgb, var(--st-accent) 40%, transparent); background: color-mix(in srgb, var(--st-accent) 12%, transparent); font-weight: 600; } .tab-pack:hover { background: color-mix(in srgb, var(--st-accent) 18%, transparent); border-color: color-mix(in srgb, var(--st-accent) 60%, transparent); } .tab-pack.is-open { background: color-mix(in srgb, var(--st-accent) 20%, transparent); } html[data-theme="dark"] .tab-pack { background: color-mix(in srgb, var(--st-accent) 20%, transparent); color: var(--st-ink); } .nt-sum-title { font-weight: 600; } .nt-sum-row span { font-weight: 600; } .pack-title h2 { font-weight: 600; } .pack-title p { font-weight: 600; } .pack-chip { font-weight: 600; } .pack-chip.is-on { color: var(--st-bg); } .pack-chip b { font-weight: 600; } .pack-card:hover { border-color: color-mix(in srgb, var(--st-accent) 42%, transparent); } .pack-card-t { font-weight: 600; } .pack-st { font-weight: 600; } .pack-st.ok { background: color-mix(in srgb, var(--st-ok) 16%, transparent); color: var(--st-ok); } .pack-st.run { background: color-mix(in srgb, var(--st-accent) 15%, transparent); } .pack-st.err { background: color-mix(in srgb, var(--st-bad) 16%, transparent); color: var(--st-bad); } .pack-st.gone { background: color-mix(in srgb, var(--st-ink) 14%, transparent); } .pack-bar { background: var(--st-panel2); } .pack-bar i { background: var(--accent); } .pack-empty { font-weight: 600; } html[data-theme="dark"] .pack-bar { background: color-mix(in srgb, var(--st-ink) 10%, transparent); } .nt-file-voice { font-weight: 600; } .nt-read { background: color-mix(in srgb, var(--st-ink) 48%, transparent); } .nt-read-box { box-shadow: none; } .nt-read-h strong { font-weight: 600; } .nt-read-h small { font-weight: 600; } 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: var(--st-ink) !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: color-mix(in srgb, var(--st-ink) 20%, transparent) !important; border-color: color-mix(in srgb, var(--st-ink) 36%, transparent) !important; } html[data-theme="dark"] .pack-chip.is-on { color: var(--st-ink) !important; } html[data-theme="dark"] .tab-pack { background: color-mix(in srgb, var(--st-accent) 20%, transparent) !important; border-color: color-mix(in srgb, var(--st-accent) 50%, transparent) !important; color: var(--st-ink) !important; } html[data-theme="dark"] .tab-pack:hover { background: color-mix(in srgb, var(--st-accent) 22%, transparent) !important; } html[data-theme="dark"] .nt-file-x:hover { background: color-mix(in srgb, var(--st-bad) 22%, transparent) !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: var(--st-ink) !important; border-color: color-mix(in srgb, var(--st-accent) 50%, transparent) !important; color: var(--st-ink) !important; } .preview-audio:not(.hidden) { border: 1px solid color-mix(in srgb, var(--st-accent) 38%, transparent); background: color-mix(in srgb, var(--st-accent) 9%, transparent); box-shadow: none; } html[data-theme="dark"] .preview-audio:not(.hidden) { border-color: color-mix(in srgb, var(--st-accent) 45%, transparent); background: color-mix(in srgb, var(--st-accent) 18%, transparent); } #intakePanel .nt-step-run .run-split-toggle, #intakePanel .nt-step-run .run-split-toggle:hover { border-left: 1px solid color-mix(in srgb, var(--st-panel) 40%, transparent) !important; } .app-shell .results .result-row.active { background: color-mix(in srgb, var(--st-accent) 16%, transparent) !important; border-color: color-mix(in srgb, var(--st-accent) 75%, transparent) !important; box-shadow: inset 4px 0 0 var(--accent) !important; } html[data-theme="dark"] .app-shell .results .result-row.active { background: color-mix(in srgb, var(--st-accent) 10%, transparent) !important; border-color: color-mix(in srgb, var(--st-accent) 80%, transparent) !important; box-shadow: inset 4px 0 0 color-mix(in srgb, var(--st-accent) 55%, var(--st-line)) !important; } html[data-theme="dark"] .app-shell .results .result-row.active .result-main strong { color: var(--st-ink); } .result-medal { background: var(--st-panel); box-shadow: none; } .result-medal.ok { border-color: color-mix(in srgb, var(--st-ok) 45%, transparent); background: var(--st-panel); } .result-medal.err { border-color: color-mix(in srgb, var(--st-bad) 50%, transparent); background: var(--st-panel2); } .result-medal.warn { border-color: color-mix(in srgb, var(--st-warn) 50%, transparent); background: var(--st-panel); } .result-medal.run { border-color: color-mix(in srgb, var(--st-accent) 45%, transparent); background: var(--st-panel2); } html[data-theme="dark"] .result-medal { background: var(--st-panel2); } html[data-theme="dark"] .result-medal.ok { background: var(--st-panel); } html[data-theme="dark"] .result-medal.err { background: var(--st-panel); } html[data-theme="dark"] .result-medal.run { background: var(--st-panel); } .nt-voices-btn.needs-attention { border-color: color-mix(in srgb, var(--st-bad) 55%, transparent) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--st-bad) 18%, transparent) !important; } .nt-voices-select { font-weight: 600; } .nt-voices-row.is-on { border-color: color-mix(in srgb, var(--st-accent) 60%, transparent); background: color-mix(in srgb, var(--st-accent) 8%, transparent); } .nt-voices-name { font-weight: 600; } .nt-voices-size { font-weight: 600; } .nt-voices-cur { font-weight: 600; background: color-mix(in srgb, var(--st-accent) 12%, transparent); } .nt-voices-cur.is-missing { background: color-mix(in srgb, var(--st-bad) 14%, transparent); color: var(--st-bad); } .nt-voices-note { font-weight: 600; } html[data-theme="dark"] .nt-voices-row.is-on { background: color-mix(in srgb, var(--st-accent) 16%, transparent); } #intakePanel .nt .nt-step-text.nt-раскрыт .nt-intake-area { border: 1px solid color-mix(in srgb, var(--st-accent) 40%, transparent) !important; box-shadow: none !important; } #intakePanel .nt[data-mode="voice"] .nt-step-text.nt-раскрыт .nt-intake-area { border-color: color-mix(in srgb, var(--st-accent) 40%, transparent) !important; } html[data-theme="dark"] #intakePanel .nt .nt-step-text.nt-раскрыт .nt-intake-area { box-shadow: none !important; } #intakePanel .nt .nt-step-text.nt-раскрываем .nt-step-h em::after { font-weight: 600; } .language-choice.has-script-toggle .language-info > .script-toggle { border: 1px solid color-mix(in srgb, var(--st-accent) 35%, transparent); background: var(--st-panel); } .script-toggle button { font-weight: 600; } .script-toggle button.on { background: var(--accent); color: var(--st-bg); } .script-toggle button:not(.on):hover { background: var(--st-panel2); } html[data-theme="dark"] .language-choice.has-script-toggle .language-info > .script-toggle { background: color-mix(in srgb, var(--st-ink) 6%, transparent); border-color: color-mix(in srgb, var(--st-accent) 45%, transparent); } html[data-theme="dark"] .script-toggle button:not(.on):hover { background: color-mix(in srgb, var(--st-ink) 8%, transparent); } /* ── перекраска: voice.css (67 правил) ── */ .vc-nav.is-on { color: var(--st-bg); } .vc-bal-v { font-weight: 600; } .vc-h1 { font-weight: 600; } .vc-av { font-weight: 600; color: var(--st-bg); } .vc-rb.is-playing { color: var(--st-bg); } .vc-mk:hover { color: var(--st-bg); } .vc-btn.pri { color: var(--st-bg); } .vc-st-v { font-weight: 600; } .vc-overlay { background: color-mix(in srgb, var(--st-ink) 55%, transparent); } .vc-modal-t { font-weight: 600; } .vc-av.c0 { background: var(--st-ink); } .vc-av.c1 { background: color-mix(in srgb, var(--st-ok) 12%, var(--st-panel)); } .vc-av.c2 { background: var(--st-ink); } .vc-av.c3 { background: color-mix(in srgb, var(--st-warn) 12%, var(--st-panel)); } .vc-av.c4 { background: var(--st-ink); } .vc-av.c5 { background: var(--st-ink); } .vc-av.c6 { background: color-mix(in srgb, var(--st-warn) 12%, var(--st-panel)); } .vc-av.c7 { background: var(--st-ink); } .vc-av.c8 { background: var(--st-ink); } .vc-av.c9 { background: color-mix(in srgb, var(--st-ok) 12%, var(--st-panel)); } .vc-av.c10 { background: color-mix(in srgb, var(--st-bad) 12%, var(--st-panel)); } .vc-av.c11 { background: var(--st-ink); } .vc-play.is-playing .vc-play-ico { background: var(--st-panel); } .vc-play-ring { background: var(--st-panel); } .vc-play.is-playing .vc-play-ring { background: var(--st-panel); } .vc-sk::after { background: var(--line); } .vc-badge { color: var(--st-bg); font-weight: 600; } .vc-warn { border: 1px solid color-mix(in srgb, var(--st-warn) 35%, transparent); background: color-mix(in srgb, var(--st-warn) 12%, transparent); } .vc-batch-empty { font-weight: 600; } .vc-batch-big { font-weight: 600; } .vc-batch-of { font-weight: 600; } .vc-batch-tag { font-weight: 600; } .vc-batch-tag.err { background: color-mix(in srgb, var(--st-bad) 16%, transparent); color: var(--st-bad); } .vc-batch-chars { font-weight: 600; } .vc-chip { font-weight: 600; } .vc-chip.is-on { color: var(--st-bg); } .vc-chip b { font-weight: 600; } .vc-vw { font-weight: 600; } .vc-item:hover { box-shadow: none; } .vc-item[data-stage="done"]::after { background: color-mix(in srgb, var(--st-ok) 12%, var(--st-panel)); } .vc-item[data-stage="error"]::after { background: color-mix(in srgb, var(--st-bad) 12%, var(--st-panel)); } .vc-item::before { background: color-mix(in srgb, var(--st-accent) 10%, transparent); } .vc-item[data-stage="done"]::before { background: color-mix(in srgb, var(--st-ok) 11%, transparent); } .vc-item[data-stage="error"]::before { background: color-mix(in srgb, var(--st-bad) 12%, transparent); } .vc-item-n { font-weight: 600; } .vc-item-d { font-weight: 600; } .vc-item-when { font-weight: 600; } .vc-chip-st { font-weight: 600; } .vc-chip-st.ok { background: color-mix(in srgb, var(--st-ok) 16%, transparent); color: var(--st-ok); } .vc-chip-st.err { background: color-mix(in srgb, var(--st-bad) 16%, transparent); color: var(--st-bad); } .vc-why { font-weight: 600; color: var(--st-bad); } .vc-item-err { color: var(--st-bad); } .vc-item-ok { color: var(--st-ok); } .vc-item-voice { font-weight: 600; } .vc-pl.is-on { color: var(--st-bg); } .vc-item-acts .vc-mk { font-weight: 600; } .vc-dock { box-shadow: none; } .vc-dock-btn.big { color: var(--st-bg); } .vc-dock-btn.big:hover { color: var(--st-bg); } .vc-dock-name { font-weight: 600; } .vc-dock-t { font-weight: 600; } .vc-run-title { font-weight: 600; } .vc-run-toggle { border-left: 1px solid color-mix(in srgb, var(--st-panel) 38%, transparent) !important; } .vc-run-hint { font-weight: 600; } .vc-run-toggle.is-off { background: color-mix(in srgb, var(--accent) 55%, var(--st-mut)) !important; } .vc-mk.vc-drive { border-color: color-mix(in srgb, var(--st-ok) 45%, transparent); color: var(--st-ok); } .vc-mk.vc-drive:hover { background: color-mix(in srgb, var(--st-ok) 12%, var(--st-panel)); border-color: color-mix(in srgb, var(--st-ok) 70%, var(--st-line)); color: var(--st-ok); } /* ── перекраска: onboarding.css (8 правил) ── */ .ag-tour-root { --ag-tour-accent: var(--st-ink); --ag-tour-card: var(--st-ink); --ag-tour-text: var(--st-panel); --ag-tour-muted: var(--st-line); } .ag-tour-shade { background: color-mix(in srgb, var(--st-ink) 76%, transparent); } .ag-tour-focus { border: 3px solid color-mix(in srgb, var(--st-accent) 55%, var(--st-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-accent) 25%, transparent); } .ag-tour-card { border: 1px solid color-mix(in srgb, var(--st-accent) 45%, transparent); box-shadow: none; } .ag-tour-count { color: var(--st-ink); font-weight: 600; } .ag-tour-actions button { border: 1px solid color-mix(in srgb, var(--st-accent) 34%, transparent) !important; background: color-mix(in srgb, var(--st-panel) 7%, transparent) !important; font-weight: 600 !important; } .ag-tour-actions .ag-tour-next { background: var(--st-ink) !important; color: var(--st-bg) !important; } [data-theme="light"] .ag-tour-root, html[data-theme="light"] .ag-tour-root { --ag-tour-card: var(--st-panel); --ag-tour-text: var(--st-ink); --ag-tour-muted: var(--st-mut); } /* ═══════════════════════════════════════════════════════════════════════ 3. КОМПОНЕНТЫ СТУДИИ Селекторы с префиксом `html body` и !important там, где оригинал сам держит значения через !important (в styles.css их ~1700). ═══════════════════════════════════════════════════════════════════════ */ /* ── 3.1 Шрифты и фон ─────────────────────────────────────────────────── */ html body, html body * { font-family: var(--st-f) !important; } html body :is(.top-balance-pill strong, .job-chip strong, .job-timer strong, .ptab-count, .tab-pack .ptab-count, #allProjectsCount, .mini-calculator strong, .nt-sum-row b, .nt-file-size, .nt-voices-size, .language-count, #templateManagerCount, #templateEditorSelectedCount, .nt-step-n, .history-countdown, .job-timer-table td:not(:first-child), .job-timer-table th:not(:first-child), .vc-bal-v, .vc-navcnt, .vc-count, .vc-pageinfo, .vc-slrow b, .vc-slrow > span:not(.vc-tiny), .result-stats, #progressText, #manualTextCount, #keepAsIsCount, #voiceLanguagesModalCount, #manualVoiceSelectedCount, .pack-filters .pack-chip b, .ptab-count) { font-family: var(--st-m) !important; font-variant-numeric: tabular-nums; } html body :is(.top-balance-pill span, .job-chip i, .top-status > span, .job-timer > span, .nt-step-h b, .control-box > span, .nt-sum-title, .mini-calculator span, .worker-warn > span, .template-editor-toolbar strong, .template-name-field > span, .manual-voice-field > span, .manual-voice-field-head > span, .vc-bal-l, .vc-field-l, .vc-kv .k, .nt-summary .panel-head p) { font-family: var(--st-m) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .2em !important; text-transform: uppercase !important; color: var(--st-mut) !important; } html body, html[data-theme] body, html body[data-theme], html[data-theme] body[data-theme] { background: var(--st-bg) !important; color: var(--st-ink) !important; -webkit-font-smoothing: antialiased; } html body .app-shell, html body .app-shell.vc-shell { background: var(--st-bg) !important; color: var(--st-ink) !important; } html body ::selection { background: color-mix(in srgb, var(--st-accent) 28%, transparent); } /* ── 3.2 Панели и карточки: плоские, рамка line, радиус 14 ─────────────── */ html body .app-shell :is(.panel, .intake-panel, .preview-panel, .preview-empty, .pack-panel, .progress-panel, .language-panel, .nt-summary) { background: var(--st-panel) !important; border: 1px solid var(--st-line) !important; border-radius: var(--st-r) !important; box-shadow: none !important; backdrop-filter: none !important; } html body .app-shell :is(.panel-head, .preview-head, .intake-head) { background: transparent !important; border-color: var(--st-line2) !important; box-shadow: none !important; } html body .app-shell .panel-head h2, html body .app-shell .intake-head h2, html body .app-shell .preview-title-box h2 { font-weight: 600 !important; letter-spacing: -.01em; color: var(--st-ink) !important; } /* ── 3.3 Кнопки ──────────────────────────────────────────────────────── */ /* вторичная — по умолчанию */ html body :is(.btn, .modal-close, .language-mini-btn, .language-icon-btn, .result-lang-btn, .row-act, .vc-btn, .vc-rb, .vc-mk, .tab-more, .custom-language-button, .preview-note-btn, .history-restart, .completion-toast-close, .template-create-btn) { border-radius: 11px !important; font-weight: 500 !important; box-shadow: none !important; text-shadow: none !important; background-image: none !important; transition: background .2s, border-color .2s, box-shadow .25s, transform .25s var(--st-ease), color .2s; } html body :is(.btn, .modal-close, .language-mini-btn, .language-icon-btn, .result-lang-btn, .row-act, .vc-btn, .vc-rb, .vc-mk, .tab-more, .custom-language-button, .history-restart, .template-create-btn):where(:not(.primary, .pri, .danger, .warning, .accept-btn)) { background: var(--st-panel) !important; border: 1px solid var(--st-line) !important; color: var(--st-ink) !important; } html body :is(.btn, .modal-close, .language-mini-btn, .language-icon-btn, .result-lang-btn, .row-act, .vc-btn, .vc-rb, .vc-mk, .tab-more, .custom-language-button, .history-restart, .template-create-btn):where(:not(.primary, .pri, .danger, .warning, .accept-btn)):hover { border-color: var(--st-ink2) !important; background: var(--st-panel) !important; } /* основная */ html body :is(.btn.primary, .primary.btn, a.btn.primary, .vc-btn.pri, #translateBtn, #runDownloadToggleBtn, .ag-tour-next) { background: var(--st-ink) !important; border: 1px solid var(--st-ink) !important; color: var(--st-bg) !important; box-shadow: none !important; background-image: none !important; } html body :is(.btn.primary, .vc-btn.pri, #translateBtn, .ag-tour-next):hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--st-shadow-s) !important; } html body :is(.btn.primary, .vc-btn.pri, #translateBtn) :is(span, b, strong, small) { color: inherit !important; } /* тихая */ html body :is(.btn.ghost, .vc-btn.ghost, .vc-link, .preview-note-btn, .completion-toast-close) { background: transparent !important; border-color: transparent !important; color: var(--st-ink2) !important; } html body :is(.btn.ghost, .vc-btn.ghost, .preview-note-btn):hover { background: var(--st-panel2) !important; color: var(--st-ink) !important; } /* смысловые: предупреждение, опасное, принять */ html body :is(.btn.warning) { background: color-mix(in srgb, var(--st-warn) 12%, var(--st-panel)) !important; border: 1px solid color-mix(in srgb, var(--st-warn) 35%, var(--st-line)) !important; color: var(--st-warn) !important; } html body :is(.btn.danger) { background: color-mix(in srgb, var(--st-bad) 10%, var(--st-panel)) !important; border: 1px solid color-mix(in srgb, var(--st-bad) 35%, var(--st-line)) !important; color: var(--st-bad) !important; } html body .btn.accept-btn { background: color-mix(in srgb, var(--st-ok) 12%, var(--st-panel)) !important; border: 1px solid color-mix(in srgb, var(--st-ok) 40%, var(--st-line)) !important; color: var(--st-ok) !important; } html body :is(.btn, .vc-btn, button):disabled:not(.ptab-close) { opacity: .45; } html body :is(.btn, .vc-btn, .vc-mk, button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--st-focus) !important; outline-offset: 2px !important; } /* ── 3.4 Поля ввода и списки ─────────────────────────────────────────── */ html body :is(input[type="text"], input[type="search"], input[type="number"], input:not([type]), textarea, select, .search-input, .language-search-field, .vc-ctl, .template-select, .nt-voices-select, .nt-file-voice) { background-color: var(--st-panel) !important; border: 1px solid var(--st-line) !important; border-radius: 10px !important; color: var(--st-ink) !important; box-shadow: none !important; } html body :is(input[type="text"], input[type="search"], input[type="number"], input:not([type]), textarea, select, .search-input, .language-search-field, .vc-ctl):focus { border-color: var(--st-ink2) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-focus) 18%, transparent) !important; outline: none !important; } html body :is(input, textarea)::placeholder { color: var(--st-mut) !important; opacity: 1; } html body select option { background: var(--st-panel); color: var(--st-ink); } /* select внутри плиток шага 2 — без собственной рамки, плитка и есть поле */ html body .control-box.select-box select { border-color: transparent !important; background-color: transparent !important; padding-left: 0 !important; } html body .control-box.select-box select:focus { box-shadow: none !important; } html body input[type="checkbox"], html body input[type="radio"] { accent-color: var(--st-ink); } html body input[type="range"] { accent-color: var(--st-ink); } /* переключатель iOS → переключатель студии: подложка line, включён — ok */ html body .ios-switch .ios-track { background: var(--st-line) !important; border: 0 !important; box-shadow: none !important; } html body .ios-switch .ios-knob { background: #fff !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .3) !important; } html body .ios-switch input:checked + .ios-track { background: var(--st-ok) !important; } html body .ios-switch input:disabled + .ios-track { opacity: .45; } html body .ios-switch .ios-label { color: var(--st-ink2) !important; font-weight: 500 !important; } /* ── 3.5 Шапка ───────────────────────────────────────────────────────── */ html body .app-shell .app-topbar { background: color-mix(in srgb, var(--st-bg) 86%, transparent) !important; border-bottom: 1px solid var(--st-line) !important; box-shadow: none !important; backdrop-filter: blur(12px) !important; } html body .app-shell .app-topbar :is(.top-status, .job-timer, .top-balance-pill, .job-chip, .worker-warn) { background: var(--st-panel) !important; border: 1px solid var(--st-line) !important; border-radius: 999px !important; box-shadow: none !important; } html body .app-shell .app-topbar :is(.top-status strong, .top-balance-pill strong, .job-timer strong) { color: var(--st-ink) !important; font-weight: 600 !important; } html body .app-shell .app-topbar .top-balance-pill.danger { background: color-mix(in srgb, var(--st-bad) 10%, var(--st-panel)) !important; border-color: color-mix(in srgb, var(--st-bad) 35%, var(--st-line)) !important; } html body .app-shell .app-topbar .top-balance-pill.danger strong { color: var(--st-bad) !important; } html body .app-shell .job-chips .job-chip.done strong { color: var(--st-ok) !important; } html body .app-shell .job-chips .job-chip.review strong { color: var(--st-warn) !important; } html body .app-shell .job-chips .job-chip.error strong { color: var(--st-bad) !important; } html body .app-shell .job-chips .job-chip.audio strong { color: var(--st-accent) !important; } html body .app-shell .job-timer.идёт strong { color: var(--st-accent) !important; } html body .app-shell .topbar-message .status { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--st-ink2) !important; } html body .app-shell .topbar-message .status.ok { color: var(--st-ok) !important; } html body .app-shell .topbar-message .status.warn { color: var(--st-warn) !important; } html body .app-shell .topbar-message .status:is(.err, .error) { color: var(--st-bad) !important; } html body .app-shell .topbar-message .status.status-visible { background: var(--st-panel) !important; border: 1px solid var(--st-line) !important; border-radius: 12px !important; } html body .app-shell .topbar-message .status.status-visible.ok { background: color-mix(in srgb, var(--st-ok) 10%, var(--st-panel)) !important; border-color: color-mix(in srgb, var(--st-ok) 30%, var(--st-line)) !important; } html body .app-shell .topbar-message .status.status-visible.warn { background: color-mix(in srgb, var(--st-warn) 10%, var(--st-panel)) !important; border-color: color-mix(in srgb, var(--st-warn) 30%, var(--st-line)) !important; } html body .app-shell .topbar-message .status.status-visible:is(.err, .error) { background: color-mix(in srgb, var(--st-bad) 10%, var(--st-panel)) !important; border-color: color-mix(in srgb, var(--st-bad) 30%, var(--st-line)) !important; } html body .app-shell .settings-trigger-badges .settings-badge { background: var(--st-panel2) !important; border: 0 !important; color: var(--st-ink2) !important; border-radius: 7px !important; box-shadow: none !important; } html body .app-shell .settings-trigger-badges .settings-badge.is-off { opacity: .55; } /* ── 3.6 Меню, поповеры, подсказки: единственные элементы с тенью ────── */ html body :is(.settings-menu-panel, .all-projects-pop, .job-timer-pop, .worker-warn-pop, .download-pick-menu, .custom-language-menu, .cursor-tooltip) { background: var(--st-panel) !important; border: 1px solid var(--st-line) !important; border-radius: var(--st-r) !important; box-shadow: var(--st-shadow) !important; color: var(--st-ink) !important; backdrop-filter: none !important; } html body .cursor-tooltip { font-size: 12.5px !important; color: var(--st-ink2) !important; border-radius: 12px !important; } html body .settings-menu-panel .settings-menu-item, html body .download-pick-menu .download-pick-item, html body .custom-language-menu button { background: transparent !important; border: 0 !important; border-radius: 9px !important; color: var(--st-ink) !important; box-shadow: none !important; } html body .settings-menu-panel .settings-menu-item:hover, html body .download-pick-menu .download-pick-item:hover, html body .custom-language-menu button:hover { background: var(--st-panel2) !important; } html body .settings-menu-panel label.settings-menu-item > span { color: var(--st-ink2) !important; font-weight: 500 !important; } html body .settings-menu-panel select { min-height: 32px; } html body .job-timer-pop :is(.job-timer-head) { font-weight: 600 !important; color: var(--st-ink) !important; } html body .job-timer-pop table th { color: var(--st-mut) !important; font-weight: 500 !important; border-color: var(--st-line2) !important; background: transparent !important; } html body .job-timer-pop table td { border-color: var(--st-line2) !important; color: var(--st-ink2) !important; background: transparent !important; } html body .job-timer-pop table tr.идёт td { color: var(--st-accent) !important; } html body .job-timer-pop .job-timer-note { color: var(--st-mut) !important; } /* ── 3.7 Лента проектов (вкладки) ────────────────────────────────────── */ html body .app-shell .project-tabs { background: transparent !important; border-color: var(--st-line) !important; box-shadow: none !important; } html body .app-shell .project-tabs :is(.ptab, .tab-pack) { background: var(--st-panel) !important; border: 1px solid var(--st-line) !important; border-radius: 11px !important; color: var(--st-ink2) !important; box-shadow: none !important; background-image: none !important; } html body .app-shell .project-tabs :is(.ptab, .tab-pack):hover { border-color: var(--st-ink2) !important; color: var(--st-ink) !important; } html body .app-shell .project-tabs :is(.ptab.active, .tab-pack.is-open) { background: color-mix(in srgb, var(--st-accent) 10%, var(--st-panel)) !important; border-color: color-mix(in srgb, var(--st-accent) 55%, var(--st-line)) !important; color: var(--st-ink) !important; box-shadow: inset 0 -2px 0 var(--st-accent) !important; } html body .app-shell .project-tabs .ptab .ptab-name { font-weight: 600 !important; } html body .app-shell .project-tabs :is(.ptab-count) { color: var(--st-mut) !important; background: transparent !important; } html body .app-shell .project-tabs .ptab-warn { color: var(--st-warn) !important; } html body .app-shell .project-tabs :is(.ptab-close, .ptab-restart) { background: transparent !important; border: 0 !important; color: var(--st-mut) !important; border-radius: 7px !important; box-shadow: none !important; } html body .app-shell .project-tabs :is(.ptab-close, .ptab-restart):hover { background: var(--st-panel2) !important; color: var(--st-ink) !important; } html body .app-shell .project-tabs .ptab-close:hover { color: var(--st-bad) !important; } html body .app-shell .project-tabs .tab-pack-mini i { background: var(--st-mut) !important; } html body .app-shell .project-tabs .tab-add { background: transparent !important; border: 1px dashed var(--st-line) !important; border-radius: 11px !important; color: var(--st-ink) !important; box-shadow: none !important; } html body .app-shell .project-tabs .tab-add:hover { border-color: var(--st-ink2) !important; background: var(--st-panel) !important; } html body .app-shell .project-tabs .tab-add.active { background: var(--st-ink) !important; border: 1px solid var(--st-ink) !important; color: var(--st-bg) !important; } html body .app-shell .project-tabs .tab-add.active * { color: inherit !important; } html body .app-shell .runbar { background: var(--st-line2) !important; } html body .app-shell .runbar .progress-fill { background: var(--st-accent) !important; box-shadow: none !important; } /* список «Все N» */ html body .all-projects-pop .all-projects-head { border-color: var(--st-line2) !important; background: transparent !important; } html body .all-projects-pop .history-row { background: var(--st-panel) !important; border: 1px solid var(--st-line2) !important; border-radius: 11px !important; box-shadow: none !important; } html body .all-projects-pop .history-row:hover { border-color: var(--st-line) !important; background: var(--st-panel2) !important; } html body .all-projects-pop .history-row.is-open { border-color: color-mix(in srgb, var(--st-accent) 50%, var(--st-line)) !important; background: color-mix(in srgb, var(--st-accent) 8%, var(--st-panel)) !important; } html body .all-projects-pop .history-row .history-meta { color: var(--st-mut) !important; } html body .all-projects-pop .history-row .history-problem { color: var(--st-warn) !important; } html body .all-projects-pop .history-countdown { color: var(--st-mut) !important; background: var(--st-panel2) !important; border: 0 !important; border-radius: 999px !important; } html body .all-projects-pop .history-countdown.urgent { color: var(--st-warn) !important; background: color-mix(in srgb, var(--st-warn) 12%, var(--st-panel)) !important; } html body .all-projects-pop .history-countdown.expired { color: var(--st-bad) !important; background: color-mix(in srgb, var(--st-bad) 12%, var(--st-panel)) !important; } html body .all-projects-pop .history-row .history-dot { background: var(--st-mut) !important; box-shadow: none !important; } html body .all-projects-pop .history-row:is(.completed) .history-dot { background: var(--st-ok) !important; } html body .all-projects-pop .history-row:is(.completed_with_errors) .history-dot { background: var(--st-warn) !important; } html body .all-projects-pop .history-row:is(.failed) .history-dot { background: var(--st-bad) !important; } html body .all-projects-pop .history-row:is(.running, .queued) .history-dot { background: var(--st-accent) !important; } /* полоса «Сохранение в папку приостановлено» */ html body .app-shell .resume-save { background: color-mix(in srgb, var(--st-warn) 10%, var(--st-panel)) !important; border: 1px solid color-mix(in srgb, var(--st-warn) 35%, var(--st-line)) !important; border-radius: var(--st-r) !important; box-shadow: none !important; color: var(--st-ink) !important; } html body .app-shell .resume-save small { color: var(--st-ink2) !important; } /* ── 3.8 Новая задача ────────────────────────────────────────────────── */ /* сегмент «Перевод / Озвучка» */ html body .nt .nt-mode { background: var(--st-panel2) !important; border: 0 !important; border-radius: 13px !important; box-shadow: none !important; padding: 4px !important; } html body .nt .nt-mode .nt-mode-thumb { background: var(--st-panel) !important; background-image: none !important; border: 0 !important; border-radius: 10px !important; box-shadow: var(--st-shadow-s) !important; } html body .nt .nt-mode .nt-mode-btn { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--st-ink2) !important; } html body .nt .nt-mode .nt-mode-btn .nt-mode-txt strong { color: var(--st-ink2) !important; font-weight: 600 !important; } html body .nt .nt-mode .nt-mode-btn .nt-mode-txt small { color: var(--st-mut) !important; } html body .nt[data-mode="translate"] .nt-mode-btn[data-nt-mode="translate"] :is(.nt-mode-txt strong), html body .nt[data-mode="voice"] .nt-mode-btn[data-nt-mode="voice"] :is(.nt-mode-txt strong) { color: var(--st-ink) !important; } html body .nt[data-mode="translate"] .nt-mode-btn[data-nt-mode="translate"] .nt-mode-txt small, html body .nt[data-mode="voice"] .nt-mode-btn[data-nt-mode="voice"] .nt-mode-txt small { color: var(--st-ink2) !important; } html body .nt .nt-mode .nt-mode-ico { background: var(--st-panel) !important; border: 1px solid var(--st-line) !important; border-radius: 10px !important; box-shadow: none !important; } html body .nt[data-mode="translate"] .nt-mode-btn[data-nt-mode="translate"] .nt-mode-ico, html body .nt[data-mode="voice"] .nt-mode-btn[data-nt-mode="voice"] .nt-mode-ico { background: color-mix(in srgb, var(--st-accent) 14%, var(--st-panel)) !important; border-color: color-mix(in srgb, var(--st-accent) 40%, var(--st-line)) !important; } /* номер шага */ html body .nt .nt-step-h .nt-step-n { background: var(--st-panel2) !important; border: 0 !important; color: var(--st-ink2) !important; border-radius: 7px !important; box-shadow: none !important; font-size: 11px !important; } html body .nt .nt-step-h em { color: var(--st-mut) !important; font-style: normal !important; } /* зона приёма */ html body .nt .nt-drop { background: var(--st-panel) !important; border: 1.5px dashed var(--st-line) !important; border-radius: var(--st-r) !important; box-shadow: none !important; } html body .nt .nt-drop.drag-over, html body .nt .nt-drop:hover { border-color: color-mix(in srgb, var(--st-accent) 60%, var(--st-line)) !important; background: color-mix(in srgb, var(--st-accent) 5%, var(--st-panel)) !important; } html body .nt .nt-drop .nt-drop-hint, html body .nt .nt-drop .nt-or { color: var(--st-mut) !important; } html body .nt .nt-drop :is(#ntPickFilesBtn, #openTextModalBtn) { font-size: 13px !important; padding: 7px 12px !important; border-radius: 9px !important; min-height: 0 !important; } /* строки файлов */ html body .nt .nt-files .nt-file { background: var(--st-panel) !important; border: 1px solid var(--st-line) !important; border-radius: 11px !important; box-shadow: none !important; } html body .nt .nt-files .nt-file:hover { border-color: var(--st-ink2) !important; } html body .nt .nt-files .nt-file .nt-file-ico { background: var(--st-panel2) !important; border: 0 !important; border-radius: 8px !important; } html body .nt .nt-files .nt-file .nt-file-name { color: var(--st-ink) !important; } html body .nt .nt-files .nt-file .nt-file-size { color: var(--st-mut) !important; } html body .nt .nt-files .nt-file .nt-file-voice { font-size: 12.5px !important; padding: 5px 8px !important; } html body .nt .nt-files .nt-file .nt-file-x { background: transparent !important; border-color: transparent !important; color: var(--st-mut) !important; } html body .nt .nt-files .nt-file .nt-file-x:hover { color: var(--st-bad) !important; background: var(--st-panel2) !important; } html body .nt .nt-files-foot .nt-files-hint { color: var(--st-mut) !important; } html body .nt .nt-voices-btn.needs-attention { border-color: var(--st-bad) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-bad) 18%, transparent) !important; color: var(--st-bad) !important; } /* плитки шага 2 */ html body .nt .control-grid .control-box { background: var(--st-panel) !important; border: 1px solid var(--st-line) !important; border-radius: 12px !important; box-shadow: none !important; } html body .nt .control-grid .control-box:hover:not(:disabled) { border-color: var(--st-ink2) !important; } html body .nt .control-grid .control-box strong, html body .nt .control-grid .control-box select { color: var(--st-ink) !important; font-weight: 500 !important; } html body .nt .control-grid .control-box.needs-value { border-color: var(--st-bad) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-bad) 14%, transparent) !important; } html body .nt .control-grid .control-box.has-none { border-color: var(--st-warn) !important; } html body .nt .control-grid .control-box:disabled { opacity: .5; } /* кнопка запуска и спутник сохранения */ html body #intakePanel .run-split { box-shadow: none !important; border-radius: 12px !important; background: transparent !important; } html body #intakePanel .run-split .btn.run-split-main { border-radius: 12px 0 0 12px !important; font-size: 15px !important; font-weight: 500 !important; } html body #intakePanel .run-split .btn.run-split-toggle { border-radius: 0 12px 12px 0 !important; border-left: 1px solid color-mix(in srgb, var(--st-bg) 22%, transparent) !important; } html body #intakePanel .run-split .btn.run-split-toggle.is-off { background: var(--st-panel2) !important; border-color: var(--st-line) !important; color: var(--st-ink2) !important; } html body .nt .nt-run-note { color: var(--st-ink2) !important; } html body .nt .nt-run-note b { color: var(--st-ink) !important; font-weight: 600 !important; } /* калькулятор */ html body .app-shell .mini-calculator div { background: var(--st-panel) !important; border: 1px solid var(--st-line) !important; border-radius: 12px !important; box-shadow: none !important; } html body .app-shell .mini-calculator strong { color: var(--st-ink) !important; font-weight: 600 !important; } /* сводка (режим «Озвучка») */ html body .nt-summary .nt-sum-row { border-color: var(--st-line2) !important; } html body .nt-summary .nt-sum-row span { color: var(--st-ink2) !important; } html body .nt-summary .nt-sum-row b { color: var(--st-ink) !important; } html body .nt-summary .nt-sum-row.accent b { color: var(--st-accent) !important; } html body .nt-summary .nt-dest { background: var(--st-panel2) !important; border: 1px solid var(--st-line2) !important; border-radius: 12px !important; } html body .nt-summary .nt-dest small { color: var(--st-mut) !important; } /* ── 3.9 Список языков (выбор) ───────────────────────────────────────── */ html body .app-shell .language-panel .language-count { background: var(--st-panel2) !important; border: 0 !important; color: var(--st-ink2) !important; border-radius: 999px !important; box-shadow: none !important; } html body .app-shell .languages .language-choice, html body .template-editor-languages .template-language-choice { background: var(--st-panel) !important; border: 1px solid var(--st-line2) !important; border-radius: 11px !important; box-shadow: none !important; } html body .app-shell .languages .language-choice:hover, html body .template-editor-languages .template-language-choice:hover { border-color: var(--st-line) !important; background: var(--st-panel2) !important; } html body .app-shell .languages .language-choice:has(input:checked), html body .template-editor-languages .template-language-choice:has(input:checked) { background: color-mix(in srgb, var(--st-accent) 10%, var(--st-panel)) !important; border-color: color-mix(in srgb, var(--st-accent) 55%, var(--st-line)) !important; } html body .app-shell .languages .language-info strong { color: var(--st-ink) !important; font-weight: 600 !important; } html body .app-shell .languages .language-info span { color: var(--st-mut) !important; } html body .app-shell .language-panel.nt-flash { box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-accent) 45%, transparent) !important; } html body .script-toggle { background: var(--st-panel2) !important; border: 0 !important; border-radius: 8px !important; } html body .script-toggle button { background: transparent !important; border: 0 !important; color: var(--st-ink2) !important; border-radius: 6px !important; box-shadow: none !important; } html body .script-toggle button.on { background: var(--st-panel) !important; color: var(--st-ink) !important; box-shadow: var(--st-shadow-s) !important; } html body .lang-flag-img, html body .languages img { border-radius: 4px; } /* ── 3.10 Открытый проект: строки результатов ────────────────────────── */ html body .app-shell .progress-head #progressText { color: var(--st-ink2) !important; font-size: 12px !important; } html body .app-shell .results .result-row { background: var(--st-panel) !important; border: 1px solid var(--st-line2) !important; border-left-width: 3px !important; border-radius: 12px !important; box-shadow: none !important; } html body .app-shell .results .result-row.clickable:hover { border-color: var(--st-line) !important; } html body .app-shell .results .result-row[data-stage-tr="done"] { border-left-color: color-mix(in srgb, var(--st-ok) 65%, var(--st-line)) !important; } html body .app-shell .results .result-row[data-stage-tr="review"] { border-left-color: color-mix(in srgb, var(--st-warn) 70%, var(--st-line)) !important; } html body .app-shell .results .result-row[data-stage-tr="error"] { border-left-color: color-mix(in srgb, var(--st-bad) 70%, var(--st-line)) !important; } html body .app-shell .results .result-row[data-stage-tr="running"] { border-left-color: var(--st-accent) !important; } html body .app-shell .results .result-row[data-stage-tr="idle"] { border-left-color: var(--st-line) !important; } html body .app-shell .results .result-row.active { border-color: color-mix(in srgb, var(--st-accent) 60%, var(--st-line)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-accent) 16%, transparent) !important; } /* полоса хода: перевод — первая половина пути, озвучка — вторая */ html body .app-shell .results .result-row::before { background: color-mix(in srgb, var(--st-accent) 11%, transparent) !important; } html body .app-shell .results .result-row[data-stage-tr="running"]::before { background: linear-gradient(90deg, color-mix(in srgb, var(--st-accent) 16%, transparent), color-mix(in srgb, var(--st-accent) 7%, transparent)) !important; } html body .app-shell .results .result-row[data-stage-tr="error"]::before { background: color-mix(in srgb, var(--st-bad) 11%, transparent) !important; } html body .app-shell .results .result-row[data-stage-tr="done"]::before { background: color-mix(in srgb, var(--st-ok) 11%, transparent) !important; } html body .app-shell .results .result-row[data-stage-tr="review"]::before { background: color-mix(in srgb, var(--st-warn) 13%, transparent) !important; } html body .app-shell .results .result-row[data-stage-tr="done"][data-stage-voice="done"]::before { background: color-mix(in srgb, var(--st-ok) 12%, transparent) !important; } html body .app-shell .results .result-row[data-stage-tr="done"]:is([data-stage-voice="idle"], [data-stage-voice="running"])::before { background: linear-gradient(90deg, color-mix(in srgb, var(--st-ok) 12%, transparent) 0%, color-mix(in srgb, var(--st-ok) 10%, transparent) 38%, color-mix(in srgb, var(--st-accent) 10%, transparent) 62%, color-mix(in srgb, var(--st-accent) 13%, transparent) 100%) !important; } html body .app-shell .results .result-row[data-stage-tr="review"]:is([data-stage-voice="idle"], [data-stage-voice="running"], [data-stage-voice="done"])::before { background: linear-gradient(90deg, color-mix(in srgb, var(--st-warn) 14%, transparent) 0%, color-mix(in srgb, var(--st-warn) 11%, transparent) 38%, color-mix(in srgb, var(--st-accent) 10%, transparent) 62%, color-mix(in srgb, var(--st-accent) 13%, transparent) 100%) !important; } html body .app-shell .results .result-row[data-stage-tr="done"][data-stage-voice="error"]::before, html body .app-shell .results .result-row[data-stage-tr="review"][data-stage-voice="error"]::before { background: linear-gradient(90deg, color-mix(in srgb, var(--st-ok) 12%, transparent) 0%, color-mix(in srgb, var(--st-ok) 10%, transparent) 38%, color-mix(in srgb, var(--st-bad) 10%, transparent) 62%, color-mix(in srgb, var(--st-bad) 13%, transparent) 100%) !important; } html body .app-shell .results .result-row .result-main strong { color: var(--st-ink) !important; font-weight: 600 !important; } html body .app-shell .results .result-row .result-main span { color: var(--st-ink2) !important; } html body .app-shell .results .result-row .result-main small.result-stats { color: var(--st-mut) !important; } html body .app-shell .results .result-row .result-main .error-text { color: var(--st-bad) !important; } html body .app-shell .results .result-row .result-flag { background: transparent !important; box-shadow: none !important; } html body .app-shell .results .result-row .result-flag :is(.lang-flag-img, .lang-flag-emoji) { box-shadow: 0 0 0 1px var(--st-line) !important; border-radius: 6px !important; background: var(--st-panel2) !important; } html body .app-shell .results .result-row .result-medal { background: var(--st-panel) !important; box-shadow: 0 0 0 1px var(--st-line) !important; border: 0 !important; } /* бейджи состояния */ html body .badge { border-radius: 999px !important; border: 0 !important; box-shadow: none !important; font-weight: 500 !important; background: var(--st-panel2) !important; color: var(--st-ink2) !important; } html body .badge.green { background: color-mix(in srgb, var(--st-ok) 12%, var(--st-panel)) !important; color: var(--st-ok) !important; } html body .badge.amber { background: color-mix(in srgb, var(--st-warn) 12%, var(--st-panel)) !important; color: var(--st-warn) !important; } html body .badge.red { background: color-mix(in srgb, var(--st-bad) 12%, var(--st-panel)) !important; color: var(--st-bad) !important; } html body .badge:is(.blue, .violet) { background: color-mix(in srgb, var(--st-accent) 12%, var(--st-panel)) !important; color: var(--st-accent) !important; } html body .badge.slate { background: var(--st-panel2) !important; color: var(--st-ink2) !important; } html body .result-pick input { accent-color: var(--st-ink) !important; } html body .row-act { width: 28px; height: 28px; border-radius: 8px !important; } /* ── 3.11 Просмотр текста ────────────────────────────────────────────── */ html body .app-shell .preview-panel .preview-title-box p { color: var(--st-ink2) !important; } html body .app-shell .preview-panel pre#previewText { font-family: var(--st-f) !important; font-size: 15px !important; line-height: 1.65 !important; color: var(--st-ink) !important; background: transparent !important; } html body .app-shell .preview-panel .preview-player { background: var(--st-panel2) !important; border-top: 1px solid var(--st-line2) !important; box-shadow: none !important; } html body .app-shell .preview-panel .preview-player-title { color: var(--st-ink2) !important; } html body .app-shell .preview-panel .preview-actions .btn { font-size: 13px !important; border-radius: 9px !important; } html body .app-shell .preview-empty .empty-icon { filter: grayscale(.2); } html body .app-shell .preview-empty h2 { color: var(--st-ink) !important; font-weight: 600 !important; } html body .app-shell .preview-empty p { color: var(--st-mut) !important; } /* ── 3.12 Вид пакета ─────────────────────────────────────────────────── */ html body .pack-panel .pack-filters .pack-chip { background: var(--st-panel2) !important; border: 0 !important; border-radius: 999px !important; color: var(--st-ink2) !important; font-size: 12.5px !important; } html body .pack-panel .pack-filters .pack-chip.is-on { background: var(--st-ink) !important; color: var(--st-bg) !important; } html body .pack-panel .pack-filters .pack-chip b { color: inherit !important; opacity: .7; } html body .pack-panel .pack-card { background: var(--st-panel) !important; border: 1px solid var(--st-line) !important; border-radius: var(--st-r) !important; box-shadow: none !important; } html body .pack-panel .pack-card:hover { border-color: var(--st-ink2) !important; } html body .pack-panel .pack-card .pack-card-ico { background: var(--st-panel2) !important; border-radius: 9px !important; border: 0 !important; } html body .pack-panel .pack-card .pack-card-s { color: var(--st-mut) !important; } html body .pack-panel .pack-st { background: var(--st-panel2) !important; color: var(--st-ink2) !important; border-radius: 999px !important; border: 0 !important; } html body .pack-panel .pack-st i { background: currentColor !important; } html body .pack-panel .pack-st.ok { background: color-mix(in srgb, var(--st-ok) 12%, var(--st-panel)) !important; color: var(--st-ok) !important; } html body .pack-panel .pack-st.run { background: color-mix(in srgb, var(--st-accent) 12%, var(--st-panel)) !important; color: var(--st-accent) !important; } html body .pack-panel .pack-st.err { background: color-mix(in srgb, var(--st-bad) 12%, var(--st-panel)) !important; color: var(--st-bad) !important; } html body .pack-panel .pack-st.idle { color: var(--st-mut) !important; } html body .pack-panel .pack-bar { background: var(--st-panel2) !important; border-radius: 4px !important; border: 0 !important; } html body .pack-panel .pack-bar i { background: var(--st-accent) !important; border-radius: 4px !important; } html body .pack-panel .pack-card:has(.pack-st.ok) .pack-bar i { background: var(--st-ok) !important; } html body .pack-panel .pack-card:has(.pack-st.err) .pack-bar i { background: var(--st-bad) !important; } html body .pack-panel .pack-empty { color: var(--st-mut) !important; } /* ── 3.13 Окна ───────────────────────────────────────────────────────── */ html body .modal-backdrop, html body .nt-read, html body .vc-overlay { background: rgba(8, 9, 12, .45) !important; backdrop-filter: blur(4px) !important; } html body :is(.modal-card, .nt-read-box, .vc-modal) { background: var(--st-panel) !important; border: 1px solid var(--st-line) !important; border-radius: 20px !important; box-shadow: var(--st-shadow) !important; color: var(--st-ink) !important; } html body :is(.modal-card .modal-head, .nt-read-box .nt-read-h, .vc-modal .vc-modal-h) { border-color: var(--st-line2) !important; background: transparent !important; } html body :is(.modal-card .modal-head h2, .nt-read-h strong, .vc-modal-t) { font-weight: 600 !important; letter-spacing: -.01em; color: var(--st-ink) !important; } html body :is(.modal-card .modal-head p, .nt-read-h small, .vc-modal-s) { color: var(--st-mut) !important; } html body :is(.modal-card .modal-footer) { border-color: var(--st-line2) !important; background: transparent !important; color: var(--st-ink2) !important; } html body .modal-card textarea { font-family: var(--st-f) !important; line-height: 1.55 !important; } html body .nt-read-box .nt-read-body { color: var(--st-ink) !important; line-height: 1.65 !important; background: transparent !important; } html body .nt-voices .nt-voices-row { background: var(--st-panel) !important; border: 1px solid var(--st-line2) !important; border-radius: 10px !important; } html body .nt-voices .nt-voices-row.is-on { background: color-mix(in srgb, var(--st-accent) 9%, var(--st-panel)) !important; border-color: color-mix(in srgb, var(--st-accent) 45%, var(--st-line)) !important; } html body .nt-voices .nt-voices-cur { background: var(--st-panel2) !important; color: var(--st-ink2) !important; border-radius: 999px !important; border: 0 !important; } html body .nt-voices .nt-voices-cur.is-missing { background: color-mix(in srgb, var(--st-bad) 12%, var(--st-panel)) !important; color: var(--st-bad) !important; } html body .nt-voices .nt-voices-cur.is-default { color: var(--st-mut) !important; } html body .nt-voices .nt-voices-bar, html body .nt-voices .nt-voices-foot { border-color: var(--st-line2) !important; background: transparent !important; } /* менеджер наборов языков */ html body .template-manager-modal .template-manager-list-wrap { background: var(--st-panel2) !important; border-color: var(--st-line2) !important; border-radius: 12px !important; } html body .template-manager-modal .template-manager-item { background: var(--st-panel) !important; border: 1px solid var(--st-line2) !important; border-radius: 10px !important; color: var(--st-ink) !important; box-shadow: none !important; } html body .template-manager-modal .template-manager-item.active { border-color: color-mix(in srgb, var(--st-accent) 55%, var(--st-line)) !important; background: color-mix(in srgb, var(--st-accent) 10%, var(--st-panel)) !important; } html body .template-manager-modal .template-manager-item span { color: var(--st-mut) !important; } html body .template-manager-modal #templateManagerCount { background: var(--st-panel) !important; color: var(--st-ink2) !important; border-radius: 999px !important; border: 0 !important; } html body .template-manager-modal .template-editor-empty { color: var(--st-mut) !important; background: transparent !important; } /* озвучить готовый текст / языки озвучки */ html body .manual-voice-language-choice { background: var(--st-panel) !important; border: 1px solid var(--st-line2) !important; border-radius: 11px !important; } html body .manual-voice-language-choice:has(input:checked) { background: color-mix(in srgb, var(--st-accent) 9%, var(--st-panel)) !important; border-color: color-mix(in srgb, var(--st-accent) 45%, var(--st-line)) !important; } html body .manual-voice-language-choice small { color: var(--st-mut) !important; } html body :is(.manual-voice-telegram, .notification-setting) { background: var(--st-panel2) !important; border: 1px solid var(--st-line2) !important; border-radius: 12px !important; box-shadow: none !important; } html body .notification-setting small { color: var(--st-mut) !important; } html body .preview-note-modal .preview-note-text { font-family: var(--st-f) !important; color: var(--st-ink) !important; background: var(--st-panel2) !important; border-radius: 12px !important; border: 0 !important; line-height: 1.6 !important; } /* уведомление о завершении */ html body .completion-toast { background: var(--st-panel) !important; border: 1px solid var(--st-line) !important; border-radius: 16px !important; box-shadow: var(--st-shadow) !important; color: var(--st-ink) !important; } html body .completion-toast.is-warning { border-color: color-mix(in srgb, var(--st-warn) 45%, var(--st-line)) !important; } html body .completion-toast.is-error { border-color: color-mix(in srgb, var(--st-bad) 45%, var(--st-line)) !important; } html body .completion-toast .completion-toast-icon { background: var(--st-panel2) !important; border-radius: 10px !important; box-shadow: none !important; } html body .completion-toast .completion-toast-body span { color: var(--st-ink2) !important; } /* гайд */ html body .ag-tour-root .ag-tour-card { background: var(--st-panel) !important; border: 1px solid var(--st-line) !important; border-radius: 16px !important; box-shadow: var(--st-shadow) !important; color: var(--st-ink) !important; } html body .ag-tour-root .ag-tour-focus { border-radius: 14px !important; box-shadow: 0 0 0 2px var(--st-accent), 0 0 0 6px color-mix(in srgb, var(--st-accent) 22%, transparent) !important; } html body .ag-tour-root :is(.ag-tour-shade-top, .ag-tour-shade-bottom, .ag-tour-shade-left, .ag-tour-shade-right) { background: rgba(8, 9, 12, .45) !important; } html body .ag-tour-root .ag-tour-count { font-family: var(--st-m) !important; letter-spacing: .12em; text-transform: uppercase; font-size: 11px !important; color: var(--st-mut) !important; } html body .ag-tour-root .ag-tour-text { color: var(--st-ink2) !important; } html body .ag-tour-root :is(.ag-tour-skip, .ag-tour-back) { background: transparent !important; border: 1px solid var(--st-line) !important; color: var(--st-ink) !important; border-radius: 11px !important; box-shadow: none !important; } html body .ag-tour-root .ag-tour-close { background: transparent !important; color: var(--st-mut) !important; border: 0 !important; box-shadow: none !important; } /* ── 3.14 Раздел «Голоса» ────────────────────────────────────────────── */ html body #voiceShell .vc-topbar { background: color-mix(in srgb, var(--st-bg) 86%, transparent) !important; border-bottom: 1px solid var(--st-line) !important; box-shadow: none !important; } html body #voiceShell .vc-brand-logo { background: color-mix(in srgb, var(--st-accent) 14%, var(--st-panel)) !important; border: 1px solid color-mix(in srgb, var(--st-accent) 35%, var(--st-line)) !important; border-radius: 10px !important; box-shadow: none !important; } html body #voiceShell .vc-brand .brand-text h1 { font-weight: 600 !important; color: var(--st-ink) !important; } html body #voiceShell .vc-nav-row { background: var(--st-panel2); border-radius: 12px; padding: 3px; gap: 2px !important; flex: 0 0 auto !important; } html body #voiceShell .vc-nav { background: transparent !important; border: 0 !important; border-radius: 9px !important; color: var(--st-ink2) !important; font-weight: 500 !important; box-shadow: none !important; } html body #voiceShell .vc-nav.is-on { background: var(--st-panel) !important; color: var(--st-ink) !important; box-shadow: var(--st-shadow-s) !important; } html body #voiceShell .vc-bal-v { color: var(--st-ink) !important; font-weight: 600 !important; } html body #voiceShell .vc-bal-s { color: var(--st-mut) !important; } html body #voiceShell .vc-h1 { font-weight: 600 !important; letter-spacing: -.02em; color: var(--st-ink) !important; } html body #voiceShell .vc-sub { color: var(--st-mut) !important; } html body #voiceShell .vc-badge { background: var(--st-ink) !important; color: var(--st-bg) !important; border-radius: 999px !important; } html body #voiceShell :is(.vc-tile, .vc-card) { background: var(--st-panel) !important; border: 1px solid var(--st-line) !important; border-radius: var(--st-r) !important; box-shadow: none !important; } html body #voiceShell :is(.vc-tile, .vc-card):hover { border-color: var(--st-ink2) !important; } html body #voiceShell .vc-card.add { background: transparent !important; border: 1.5px dashed var(--st-line) !important; color: var(--st-ink2) !important; } html body #voiceShell .vc-card.add:hover { border-color: var(--st-ink2) !important; background: var(--st-panel) !important; } html body #voiceShell .vc-plus { color: var(--st-ink) !important; background: transparent !important; } html body #voiceShell :is(.vc-vd, .vc-tile-d, .vc-card-s, .vc-adds, .vc-hint, .vc-count, .vc-pageinfo) { color: var(--st-mut) !important; } html body #voiceShell .vc-vn, html body #voiceShell .vc-card-t, html body #voiceShell .vc-addt { color: var(--st-ink) !important; font-weight: 600 !important; } html body #voiceShell .vc-kv .v { color: var(--st-ink) !important; } html body #voiceShell .vc-kv { border-color: var(--st-line2) !important; } html body :is(#voiceShell, .vc-overlay) .vc-av { background: var(--st-panel2) !important; color: var(--st-ink2) !important; border: 1px solid var(--st-line) !important; box-shadow: none !important; font-weight: 600 !important; } html body :is(#voiceShell, .vc-overlay) .vc-tag { background: var(--st-panel2) !important; color: var(--st-ink2) !important; border: 0 !important; border-radius: 999px !important; } html body :is(#voiceShell, .vc-overlay) .vc-tag.on { background: var(--st-ink) !important; color: var(--st-bg) !important; } html body #voiceShell .vc-play { background: var(--st-panel) !important; border: 1px solid var(--st-line) !important; box-shadow: none !important; color: var(--st-ink) !important; } html body #voiceShell .vc-play:hover { border-color: var(--st-ink2) !important; } html body #voiceShell .vc-play.is-playing { background: var(--st-ink) !important; border-color: var(--st-ink) !important; color: var(--st-bg) !important; } html body #voiceShell .vc-play.is-loading { border-color: var(--st-accent) !important; } html body #voiceShell .vc-play .vc-play-ring { background: color-mix(in srgb, var(--st-accent) 35%, transparent) !important; } html body #voiceShell .vc-play.no-sample { border-style: dashed !important; } html body #voiceShell .vc-mk { font-size: 12.5px !important; } html body #voiceShell .vc-mk:hover { background: var(--st-ink) !important; color: var(--st-bg) !important; border-color: var(--st-ink) !important; } html body #voiceShell .vc-bar { background: color-mix(in srgb, var(--st-warn) 10%, var(--st-panel)) !important; border: 1px solid color-mix(in srgb, var(--st-warn) 35%, var(--st-line)) !important; border-radius: var(--st-r) !important; box-shadow: none !important; } html body #voiceShell .vc-bar-s { color: var(--st-ink2) !important; } html body :is(#voiceShell, .vc-overlay) .vc-state { color: var(--st-ink2) !important; background: transparent !important; } html body :is(#voiceShell, .vc-overlay) .vc-state.ok { color: var(--st-ok) !important; } html body :is(#voiceShell, .vc-overlay) .vc-state.err { color: var(--st-bad) !important; } html body :is(#voiceShell, .vc-overlay) .vc-state.work { color: var(--st-accent) !important; } html body #voiceShell .vc-empty { color: var(--st-mut) !important; background: var(--st-panel) !important; border: 1px solid var(--st-line) !important; border-radius: var(--st-r) !important; } html body #voiceShell .vc-sk { background: var(--st-panel2) !important; } html body .vc-overlay .vc-desc { color: var(--st-ink2) !important; } html body .vc-overlay .vc-adv { border-color: var(--st-line2) !important; background: transparent !important; } html body .vc-overlay .vc-adv-h { color: var(--st-ink2) !important; background: transparent !important; } html body .vc-overlay .vc-slrow { color: var(--st-mut) !important; } html body .vc-overlay .vc-slrow b { color: var(--st-ink) !important; } html body .vc-overlay .vc-chk { color: var(--st-ink2) !important; } html body .vc-overlay .vc-slider { accent-color: var(--st-ink) !important; } /* ═══════════════════════════════════════════════════════════════════════ 4. РЕЖИМ СТУДИИ (html.studio): шапка, вход, тема и язык — у оболочки ═══════════════════════════════════════════════════════════════════════ */ html.studio #authScreen, html.studio .app-topbar .brand.brand-home, html.studio #logoutBtn, html.studio #themeToggleBtn, html.studio #uiLanguageSelect, html.studio .top-actions .custom-language-picker { display: none !important; } html.studio #appShell.hidden { display: none !important; } /* Подписи пилюль шапки — те же моно-капсы, но плотнее: при .2em шапка открытого проекта не помещалась в 1440px (в оригинале — тоже впритык). */ html body .app-shell .app-topbar :is(.top-balance-pill span, .job-chip i, .top-status > span, .job-timer > span, .worker-warn > span) { letter-spacing: .06em !important; font-size: 10.5px !important; } html body .app-shell .app-topbar :is(.top-status, .job-timer, .top-balance-pill, .job-chip) { padding-inline: 9px !important; } html body .app-shell .app-topbar .toprow { gap: 6px !important; } /* Шапка не обрезает органы управления. В оригинале ряд шире экрана уже на 1440px (1690px содержимого) — «⚙ Настройки» и «🎧 Голоса» уезжали за край. В студии модуль живёт в окне уже экрана, поэтому ряд переносится на вторую строку, когда не помещается; на широком экране он один. */ html.studio body .app-shell .app-topbar { height: auto !important; min-height: 48px !important; max-height: none !important; flex: 0 0 auto !important; padding-block: 8px !important; } html.studio body .app-shell .app-topbar .toprow { flex-wrap: wrap !important; row-gap: 6px !important; } html.studio body .app-shell .app-topbar .top-actions { margin-left: auto !important; } /* Ошибка оригинала: `.app-shell .preview-actions > .btn { display:inline-flex !important }` сильнее `.hidden`, и спрятанные приложением кнопки («✓ Принять перевод» у готового языка, «↻ Перевести заново» у оригинала) всё равно стояли на экране. Приложение их прячет — показываем как задумано. */ html body .app-shell .preview-actions > .btn.hidden { display: none !important; } /* Узкое окно студии: ряд действий над текстом переносится, а не уезжает за край. */ @media (max-width: 1320px) { html.studio body .app-shell .preview-head { flex-wrap: wrap !important; } html.studio body .app-shell .preview-head .preview-title-box { flex: 1 1 220px !important; } html.studio body .app-shell .preview-head .preview-actions { flex: 1 1 auto !important; flex-wrap: wrap !important; justify-content: flex-start !important; } } /* Список «Все N»: метка «В работе / В очереди» — строкой над содержимым. В оригинале она становилась лишней ячейкой сетки строки (8px) и сдвигала всё остальное: имя уезжало вправо, таймер удаления — вниз. */ html body .history-card:is(.queued, .running)::before { grid-column: 1 / -1 !important; justify-self: start !important; background: color-mix(in srgb, var(--st-accent) 12%, var(--st-panel)) !important; color: var(--st-accent) !important; border: 0 !important; font-family: var(--st-m) !important; font-weight: 500 !important; letter-spacing: .08em; } html body .job-timer-pop .job-timer-note { white-space: normal !important; } html body .nt .control-grid .control-box.needs-value select { color: var(--st-bad) !important; } html body .app-shell .preview-panel .preview-player :is(audio, .preview-audio) { border: 1px solid var(--st-line) !important; box-shadow: none !important; outline: none !important; border-radius: 999px !important; background: var(--st-panel) !important; } /* Сообщение статуса в шапке не сжимается в точку: если ему не хватает места, ряд переносится и сообщение встаёт отдельной строкой целиком. */ html.studio body .app-shell .app-topbar .topbar-message.has-message { min-width: min(260px, 100%) !important; flex-basis: 260px !important; } /* ═══════════════════════════════════════════════════════════════════════ 5. ТЕЛЕФОН (≤ 760px) В оригинале на узком экране левая колонка схлопывалась в 0px (строка сетки «0px 725px»), а body стоит с overflow:hidden — выбрать языки или открыть список результатов на телефоне было нельзя, часть шапки уезжала за край. В студии колонки встают друг под другом и прокручиваются вместе со страницей; на экране создания сначала форма, потом языки. ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 760px) { html.studio body .app-shell:not(.vc-shell) { overflow-y: auto !important; overflow-x: hidden !important; } html.studio body .app-shell .workspace { display: flex !important; flex-direction: column !important; gap: 10px !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; flex: 0 0 auto !important; } html.studio body .app-shell :is(.left-column, .right-column) { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; flex: 0 0 auto !important; width: 100% !important; } html.studio body .app-shell[data-pane="intake"] .right-column { order: -1; } html.studio body .app-shell .left-column > :is(.language-panel, .progress-panel, .nt-summary) { height: auto !important; max-height: none !important; min-height: 0 !important; } html.studio body .app-shell .languages { max-height: 56vh !important; overflow-y: auto !important; } html.studio body .app-shell .results { max-height: 62vh !important; overflow-y: auto !important; } html.studio body .app-shell .right-column > :is(.intake-panel, .preview-panel, .pack-panel, .preview-empty) { height: auto !important; max-height: none !important; min-height: 0 !important; } html.studio body .app-shell .preview-panel pre#previewText { max-height: 72vh !important; overflow-y: auto !important; } html.studio body .app-shell .app-topbar .job-chips { flex-wrap: wrap !important; } html.studio body #intakePanel .nt .control-grid > .control-box:not(.intake-box) { grid-column: span 3 !important; min-width: 0 !important; } html.studio body #intakePanel .nt .control-grid > .control-box.languages-control { grid-column: span 6 !important; } html.studio body #intakePanel .nt .nt-intake-area { height: auto !important; } html.studio body #intakePanel .nt .nt-intake-area .nt-files { max-height: 40vh !important; flex: 0 0 auto !important; } html.studio body #intakePanel .nt .nt-drop { flex-wrap: wrap !important; } html.studio body #intakePanel .nt .control-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } html.studio body #intakePanel .nt .mini-calculator { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; display: grid !important; } } html body #voiceShell .vc-topbar .vc-meta { margin-left: auto !important; } /* Гайд в оригинале «тёмный по умолчанию» (переменные карточки), светлым он становится только при html[data-theme=light]. В студии — карточка панели. */ html:root body .ag-tour-root { --ag-tour-card: var(--st-panel); --ag-tour-text: var(--st-ink); --ag-tour-muted: var(--st-ink2); --ag-tour-accent: var(--st-accent); } html body .ag-tour-root .ag-tour-card { border-color: var(--st-line) !important; } /* Шапка раздела «Голоса»: в узком окне «Баланс» и «← Перевод» уезжали за край (overflow:hidden) — переносим ряд, как у основной шапки. */ html.studio body #voiceShell .app-topbar { height: auto !important; min-height: 48px !important; flex: 0 0 auto !important; padding-block: 8px !important; } html.studio body #voiceShell .toprow { flex-wrap: wrap !important; row-gap: 6px !important; } html.studio body #voiceShell .vc-nav-row { overflow: visible !important; } /* Кнопки без собственного кегля наследовали 16px браузера — в студии 14px. */ html body :is(.modal-actions, .modal-footer, .resume-save, .all-projects-head, .nt-voices-bar, .nt-voices-foot, .nt-read-acts, .voice-languages-modal-toolbar, .auto-download-segmented, .pack-actions) :is(.btn, button) { font-size: 14px !important; } html body .modal-close { font-size: 18px !important; width: 36px !important; height: 36px !important; } html.studio body .app-shell .app-topbar .top-balance-pill { max-width: 280px !important; } /* ———— 5. «Перевод» и «Озвучка» — разные инструменты студии (адреса точнее правил TXT) ———— */ html.studio body #ntMode, html.studio body #appShell #ntMode { display: none !important; } html.studio.studio-tool-trans body #appShell .voice-control, html.studio.studio-tool-trans body .voice-control, html.studio.studio-tool-trans body #appShell .voice-dependent, html.studio.studio-tool-trans body .voice-dependent, html.studio.studio-tool-trans body #appShell .voice-languages-control, html.studio.studio-tool-trans body .voice-languages-control, html.studio.studio-tool-trans body #appShell .voice-template-box, html.studio.studio-tool-trans body .voice-template-box, html.studio.studio-tool-trans body #appShell .source-voice-control, html.studio.studio-tool-trans body .source-voice-control, html.studio.studio-tool-trans body #appShell #topVoiceBalancePill, html.studio.studio-tool-trans body #topVoiceBalancePill, html.studio.studio-tool-trans body #appShell #voiceSectionBtn, html.studio.studio-tool-trans body #voiceSectionBtn, html.studio.studio-tool-trans body #appShell .voice-provider-control, html.studio.studio-tool-trans body .voice-provider-control, html.studio.studio-tool-trans body #appShell [data-result-filter="voice"], html.studio.studio-tool-trans body [data-result-filter="voice"] { display: none !important; } html.studio.studio-tool-trans body #appShell #ntVoicesBtn, html.studio.studio-tool-trans body #appShell div:has(> #calcVoiceTokens) { display: none !important; }