:root{
  --bg:#0E0F13; --card:#151821; --line:#262B38; --txt:#E7E9EE; --muted:#8B8F9A;
  --acc:#7C5CFC; --acc2:#6B4EFF; --err:#EF4444; --ok:#22C55E;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--txt);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
a{color:inherit;text-decoration:none}
.muted{color:var(--muted)}
.small{font-size:13px}

/* шапка */
.hdr{background:linear-gradient(135deg,#7c3aed,#4f46e5);box-shadow:0 6px 22px rgba(124,58,237,.3)}
.hdr-in{display:flex;justify-content:space-between;align-items:center;padding:14px 20px}
.hdr h1{margin:0;font-size:20px;color:#fff}
.hdr p{margin:2px 0 0;color:#E9E6FF;font-size:13px}
.hdr-right{display:flex;gap:12px;align-items:center}
.who{color:#fff;font-size:13px;background:rgba(255,255,255,.16);padding:4px 10px;border-radius:999px}

/* вкладки */
.tabs{display:flex;gap:8px;margin:16px 0;flex-wrap:wrap}
.tabs a{padding:9px 16px;border:1px solid var(--line);border-radius:10px;color:var(--muted);white-space:nowrap}
.tabs a.on{background:var(--card);color:var(--txt);border-color:var(--acc)}

/* карточки/формы */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.card h2{margin:0 0 14px;font-size:17px}
.row-between{display:flex;justify-content:space-between;align-items:center}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid .full{grid-column:1/(-1)}
label{display:block;font-size:13px;color:var(--muted)}
input,select{width:100%;margin-top:6px;padding:11px 12px;background:#1F222A;color:var(--txt);
  border:1px solid var(--line);border-radius:10px;font-size:15px;outline:none}
input:focus,select:focus{border-color:var(--acc)}
.actions{display:flex;justify-content:flex-end}

/* кнопки */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;background:#222736;
  color:var(--txt);border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:15px}
.btn:hover{border-color:var(--acc)}
.btn.primary{background:linear-gradient(135deg,var(--acc),var(--acc2));border:none;color:#fff;font-weight:600}
.btn.small{padding:7px 12px;font-size:13px}

/* результат */
.result{margin-top:16px}
.job{border:1px solid var(--line);border-radius:12px;padding:14px;background:#12151D}
.job-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.tag{background:#2A2140;color:#C9B8FF;padding:3px 10px;border-radius:999px;font-size:12px}
.bar{height:6px;background:#262B38;border-radius:6px;overflow:hidden;margin:10px 0}
.bar i{display:block;height:100%;width:35%;
  background:linear-gradient(90deg,var(--acc),var(--acc2));animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* файлы */
.files{width:100%;border-collapse:collapse;margin-top:8px}
.files th{text-align:left;color:var(--muted);font-weight:500;font-size:13px;padding:8px 6px;
  border-bottom:1px solid var(--line)}
.files td{padding:10px 6px;border-bottom:1px solid #1C202B}
.files .name{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;word-break:break-all}
.empty{color:var(--muted);text-align:center;padding:28px;border:1px dashed var(--line);border-radius:12px}
.err{background:#3A1D22;color:#FFB4B4;border:1px solid #6B2B33;padding:10px 12px;border-radius:10px;margin:10px 0}

/* страница входа */
.login-body{display:flex;min-height:100vh;align-items:center;justify-content:center}
.login-card{width:360px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:26px;text-align:center}
.login-card .logo{font-size:34px}
.login-card h1{margin:6px 0 2px;font-size:20px}
.login-card label{text-align:left;margin-top:12px}
.login-card .btn{width:100%;justify-content:center;margin-top:16px}
.hint{margin-top:12px;font-size:12px}

/* ══════════ экран «Производство» ══════════ */
.topgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:900px){.topgrid{grid-template-columns:1fr}}
.main{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
.main:has(#editor:not(:empty)){grid-template-columns:1fr 380px}
@media(max-width:900px){.main:has(#editor:not(:empty)){grid-template-columns:1fr}}

.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:10px}
.spacer{flex:1}
textarea{width:100%;margin-top:6px;padding:11px 12px;background:#1F222A;color:var(--txt);
  border:1px solid var(--line);border-radius:10px;font:14px/1.45 ui-monospace,Menlo,monospace;outline:none;resize:vertical}
textarea:focus{border-color:var(--acc)}
small,.small{font-size:12.5px}

/* статистика */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}
.st{background:#12151D;border:1px solid var(--line);border-radius:10px;padding:10px 6px;text-align:center}
.st b{display:block;font-size:22px;line-height:1.1}
.st span{color:var(--muted);font-size:12px}
.st.ok b{color:#4ADE80}.st.err b{color:#F87171}

/* фильтр */
.filters{display:flex;gap:6px;align-items:center;margin:6px 0 10px}
.filters a{padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);
  font-size:13px;cursor:pointer}
.filters a.on{background:var(--card);color:var(--txt);border-color:var(--acc)}

/* массовые операции */
.bulkbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#171222;
  border:1px solid #3B2A63;border-radius:10px;padding:10px 12px;margin-bottom:10px}

/* таблица очереди */
table.q{width:100%;border-collapse:collapse}
table.q th{text-align:left;color:var(--muted);font-weight:500;font-size:12.5px;
  padding:8px 6px;border-bottom:1px solid var(--line)}
table.q td{padding:9px 6px;border-bottom:1px solid #1C202B;vertical-align:middle}
table.q tr.run{background:#141A26}
table.q .topic{font-weight:600}
table.q .params{color:var(--muted);font-size:13px}
table.q .pen{color:var(--acc);margin-right:4px}
table.q .acts{white-space:nowrap;text-align:right}
table.q .acts button{background:transparent;border:1px solid transparent;color:var(--muted);
  cursor:pointer;font-size:14px;padding:3px 7px;border-radius:7px}
table.q .acts button:hover{border-color:var(--line);color:var(--txt)}
.chk{background:transparent;border:1px solid var(--line);color:var(--muted);width:26px;height:26px;
  border-radius:8px;cursor:pointer}
.chk.on{background:#2A2140;border-color:var(--acc);color:#C9B8FF}
.state{font-size:12px;padding:3px 9px;border-radius:999px;background:#1F222A;color:var(--muted);white-space:nowrap}
.state.running{background:#2A2140;color:#C9B8FF}
.state.done{background:#12301F;color:#4ADE80}
.state.error{background:#3A1D22;color:#FF9B9B}
.state.cancelled{background:#26262B;color:#9CA3AF}

/* редактор ролика */
.editor{position:sticky;top:12px;background:var(--card);border:1px solid var(--acc);
  border-radius:14px;padding:16px}
.editor h3{margin:0 0 10px;font-size:16px}
.editor label{margin-top:10px}
.src{float:right;font-size:11px;padding:1px 8px;border-radius:999px}
.src.def{background:#20242E;color:var(--muted)}
.src.item{background:#2A2140;color:#C9B8FF}

/* панель запуска */
.runbar{position:sticky;bottom:10px;margin-top:14px;background:#12151D;border:1px solid var(--line);
  border-radius:14px;padding:12px 16px;box-shadow:0 -8px 30px rgba(0,0,0,.35);z-index:20}
.badge{font-size:12.5px;padding:4px 10px;border-radius:999px;margin-right:8px}
.badge.ok{background:#12301F;color:#6EE7A0}
.badge.err{background:#3A1D22;color:#FF9B9B}
.badge.work{background:#2A2140;color:#C9B8FF}
.badlist{margin:8px 0 0;padding-left:18px;color:#FF9B9B;font-size:13px}
.ok{background:#12301F;border:1px solid #1F5236;color:#6EE7A0;padding:8px 12px;
  border-radius:10px;margin-bottom:10px;font-size:13.5px}
.ghost-danger{border-color:#5B2A33 !important;color:#FF9B9B !important}

/* полные настройки ролика */
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.two{grid-template-columns:1fr}}
details.more{margin-top:12px;border:1px solid var(--line);border-radius:10px;padding:8px 12px}
details.more summary{cursor:pointer;color:var(--muted);font-size:13.5px}
details.more[open] summary{margin-bottom:8px}
.chkline{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--txt);margin-top:8px}
.chkline input{width:auto;margin:0}
input[type=range]{width:100%;margin-top:6px;accent-color:var(--acc)}
output{color:var(--acc);font-weight:600}

/* полосы прогресса */
.pbar{height:6px;background:#262B38;border-radius:6px;overflow:hidden;margin-top:6px;min-width:110px}
.pbar.big{height:8px;margin:8px 0 4px}
.pbar i{display:block;height:100%;width:0;border-radius:6px;
  background:linear-gradient(90deg,#7C5CFC,#6B4EFF);transition:width .35s ease}
.pbar i.done{background:linear-gradient(90deg,#22C55E,#4ADE80)}
.stcell{min-width:150px}

.hint{color:var(--muted);font-size:12px;font-weight:400}

.note{color:var(--muted);font-size:11.5px;margin-top:4px;max-width:260px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* вкладка «Клипы» */
.clipbar{display:flex;flex-direction:column;gap:6px;background:#12151D;border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;margin-bottom:10px}
.clipbar .btn{align-self:flex-start}

/* ── тёмные нативные контролы: выпадающие списки, скроллбары, дата ── */
:root{color-scheme:dark}
select{color-scheme:dark}
select option,select optgroup{background:#1F222A;color:#E7E9EE}
select optgroup{font-weight:600}
input[type=range]{color-scheme:dark}

/* ── своё окно подтверждения ── */
.cfm-back{position:fixed;inset:0;background:rgba(6,8,12,.66);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:1000;padding:20px}
.cfm-back.on{display:flex;animation:_fadeUp .16s ease both}
.cfm{width:min(430px,94vw);background:var(--card);border:1px solid var(--acc);border-radius:16px;
  padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.55);text-align:center}
.cfm-ico{font-size:30px;line-height:1}
.cfm p{margin:12px 0 18px;font-size:15px;line-height:1.45}
.cfm-acts{justify-content:center}
.btn.danger{background:linear-gradient(135deg,#EF4444,#DC2626);border:none;color:#fff;font-weight:600}

/* «живая» полоса: видно, что рендер идёт, а не висит */
.pbar.live{height:8px}
.pbar.live i{width:100%;border-radius:6px;
  background:repeating-linear-gradient(90deg,#7C5CFC 0 14px,#5B3FE0 14px 28px);
  background-size:28px 100%;animation:_slide 1s linear infinite}
@keyframes _slide{to{background-position:28px 0}}
.timer{color:#C9B8FF;font-variant-numeric:tabular-nums}
.timer-static{color:#C9B8FF}

/* пустой редактор ролика не показываем (раньше висела пустая рамка) */
#editor:empty{display:none}

/* ═══════ прогресс и статусы — строго в цвет темы (фиолет) ═══════ */
.pbar{height:6px;background:#232838;border-radius:6px}
.pbar.big{height:8px}
.pbar i{background:linear-gradient(90deg,#7C5CFC,#8B6BFF);border-radius:6px}
.pbar i.done{background:linear-gradient(90deg,#7C5CFC,#A78BFA)}
.pbar.live i{width:100%;border-radius:6px;
  background:repeating-linear-gradient(90deg,#7C5CFC 0 14px,#5B3FE0 14px 28px);
  background-size:28px 100%;animation:_slide 1s linear infinite}

/* пилюли статуса — приглушённые, без «светофора» */
.state{background:#1F222A;color:#8B8F9A;border:1px solid transparent}
.state.running{background:#2A2140;color:#C9B8FF;border-color:#4B3A80}
.state.done{background:#232041;color:#B9A6FF;border-color:#3B3A6B}
.state.error{background:#2E1F2B;color:#E9A0B4;border-color:#5A3244}
.state.waiting,.state.cancelled{background:#1B1F29;color:#8B8F9A}

/* счётчик этапа под статусом — тоже в тон */
.note{color:#9A93B8}

/* статус в строке: переносим на 2 строки вместо обрезки многоточием */
table.q .stcell{min-width:230px;max-width:270px}
.note{color:#9A93B8;font-size:11.5px;margin-top:4px;max-width:260px;
  white-space:normal;overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
table.q .topic{max-width:360px}

/* имя голоса в колонке «Параметры» */
.voicename{color:#C9B8FF;font-size:12px;white-space:nowrap}
.voicename b{color:#9C7BFF}
.params{line-height:1.45}

/* блочная полоса (как из эмодзи 🟩⬜), но в цвете темы */
.pbar.seg{display:flex;gap:3px;height:8px;background:transparent;border-radius:0}
.pbar.seg i{display:block;flex:1;height:100%;border-radius:2px;background:#2A2E3E;
  transition:background .25s ease}
.pbar.seg i.on{background:linear-gradient(180deg,#9B7BFF,#7C5CFC)}
.pbar.seg i.next{background:#4B3A80;animation:_blink 1.1s ease-in-out infinite}
@keyframes _blink{0%,100%{opacity:.45}50%{opacity:1}}
.pbar.seg i.done{background:linear-gradient(180deg,#B9A6FF,#8B6BFF)}

/* ── страница входа: две колонки (что это + форма) ── */
.login-body{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:24px}
.login-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;width:min(920px,96vw);
  align-items:center}
@media(max-width:820px){.login-wrap{grid-template-columns:1fr;gap:16px}}
.login-hero .logo{font-size:42px;line-height:1}
.login-hero h1{margin:8px 0 4px;font-size:26px}
.login-hero .lead{color:var(--muted);margin:0 0 16px;font-size:14px}
.feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.feats li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#C7CAD3;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.feats li span{flex:0 0 auto}
.login-card{width:100%;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:26px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login-card h2{margin:0 0 6px;font-size:19px}
.login-card label{margin-top:12px}
.login-card .btn{width:100%;justify-content:center;margin-top:18px}
.login-card code{background:#1F222A;padding:1px 6px;border-radius:6px;font-size:12px}

/* ══════════ лендинг ══════════ */
body.lp{display:block;padding:0;background:var(--bg)}
.lp-head{position:sticky;top:0;z-index:50;background:rgba(14,15,19,.86);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.lp-head-in{display:flex;justify-content:space-between;align-items:center;padding:12px 20px}
.lp-logo{font-size:18px}.lp-logo b{letter-spacing:.3px}
.btn.big{padding:13px 22px;font-size:15.5px}
.lp-hero{text-align:center;padding:64px 0 40px}
.lp-badge{display:inline-block;background:#2A2140;color:#C9B8FF;border:1px solid #4B3A80;
  padding:5px 14px;border-radius:999px;font-size:13px;margin-bottom:18px}
.lp-hero h1{font-size:clamp(30px,5vw,52px);line-height:1.1;margin:0 0 16px;
  background:linear-gradient(120deg,#fff 20%,#A78BFA);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.lp-hero .lead{max-width:680px;margin:0 auto 26px;color:#B9BEC9;font-size:16px;line-height:1.6}
.lp-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.lp-chain{margin-top:22px;color:var(--muted);font-size:14px;letter-spacing:.4px}
.lp-sec{padding:52px 0}
.lp-sec.alt{background:#12131A;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lp-sec h2{font-size:26px;margin:0 0 22px;text-align:center}
.lp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.lp-steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lp-steps{grid-template-columns:1fr}}
.lp-step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.lp-step span{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;
  border-radius:8px;background:linear-gradient(135deg,#7C5CFC,#6B4EFF);color:#fff;font-weight:700;
  font-size:14px;margin-bottom:10px}
.lp-step h3{margin:0 0 6px;font-size:16px}
.lp-step p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
.lp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1000px){.lp-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lp-grid{grid-template-columns:1fr}}
.lp-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.lp-card .ico{font-size:22px}
.lp-card h3{margin:8px 0 6px;font-size:15.5px}
.lp-card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
.lp-final{text-align:center}
.lp-final .lead{max-width:620px}
.lp-foot{border-top:1px solid var(--line);padding:20px 0;color:var(--muted);font-size:13px;text-align:center}

/* ══════════ лендинг v2 ══════════ */
.lp-nav{display:flex;gap:18px;font-size:14px}
.lp-nav a{color:var(--muted)}
.lp-nav a:hover{color:var(--txt)}
@media(max-width:820px){.lp-nav{display:none}}
.lp-hero2{padding:46px 0 30px}
.lp-hero2-in{display:grid;grid-template-columns:1fr 1.05fr;gap:36px;align-items:center}
@media(max-width:1000px){.lp-hero2-in{grid-template-columns:1fr;gap:22px}}
.lp-hero2 h1{font-size:clamp(28px,3.6vw,44px);line-height:1.08;margin:0 0 16px}
.lp-hero2 h1 span{background:linear-gradient(120deg,#A78BFA,#7C5CFC);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lp-hero2 .lead{color:#B9BEC9;font-size:15.5px;line-height:1.6;margin:0 0 22px;max-width:560px}
.lp-logos{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px;color:var(--muted);font-size:13px}
.lp-kicker{color:#A78BFA;font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;margin-bottom:8px}
.lp-kicker.center{text-align:center}
.center{text-align:center}
.lp-head2{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:end;margin-bottom:24px}
@media(max-width:820px){.lp-head2{grid-template-columns:1fr;gap:10px}}
.lp-head2 h2{font-size:clamp(22px,2.6vw,32px);line-height:1.15;margin:0}
.lp-grid.four{grid-template-columns:repeat(4,1fr)}
.lp-split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
@media(max-width:900px){.lp-split{grid-template-columns:1fr;gap:20px}}
.lp-checks{list-style:none;margin:14px 0 20px;padding:0;display:flex;flex-direction:column;gap:8px}
.lp-checks li{position:relative;padding-left:26px;font-size:14px;color:#C7CAD3}
.lp-checks li:before{content:"✓";position:absolute;left:0;top:0;color:#8B6BFF;font-weight:700}
.lp-access{display:grid;grid-template-columns:1fr 420px;gap:34px;align-items:start}
@media(max-width:900px){.lp-access{grid-template-columns:1fr}}
.lp-form{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.lp-form h3{margin:0 0 12px;font-size:17px}
.lp-form label{margin-top:10px}
.lp-form .btn{width:100%;justify-content:center;margin-top:16px}
.lp-foot .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lp-foot a{color:var(--muted)}

/* мокап интерфейса */
.mock{background:#12141C;border:1px solid #2C3040;border-radius:14px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5);font-size:12px}
.mock-top{background:#171A24;padding:8px 12px;color:var(--muted);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:6px}
.mock-top i{width:9px;height:9px;border-radius:50%;background:#2E3342;display:inline-block}
.mock-top b{color:#C9B8FF;margin-left:6px}
.mock-body{display:grid;grid-template-columns:42px 1fr 190px;min-height:250px}
.mock-body.one{grid-template-columns:1fr}
.mock-nav{background:#141721;border-right:1px solid var(--line);display:flex;flex-direction:column;
  align-items:center;gap:12px;padding:12px 0;font-size:15px}
.mock-list{padding:10px 12px}
.mock-filters{color:var(--muted);margin-bottom:8px}
.mock-filters b{color:#C9B8FF}
.mock-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin-bottom:7px;background:#161A24}
.mock-row .mt{font-weight:600;color:#E7E9EE}
.mock-row .mt i{display:block;font-style:normal;color:var(--muted);font-weight:400;font-size:11px;margin-top:2px}
.pill{font-size:11px;padding:3px 8px;border-radius:999px;white-space:nowrap}
.pill.run{background:#2A2140;color:#C9B8FF}
.pill.wait{background:#1E222C;color:#8B8F9A}
.pill.done{background:#1E2A3A;color:#9CC3FF}
.mock-side{border-left:1px solid var(--line);padding:12px;background:#141721}
.mock-side h4{margin:0 0 10px;font-size:12.5px;color:#E7E9EE}
.mock-side dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 10px;font-size:11.5px}
.mock-side dt{color:var(--muted)}
.mock-side dd{margin:0;color:#D8DAE2}
.mock-btn{margin-top:12px;background:linear-gradient(135deg,#7C5CFC,#6B4EFF);color:#fff;
  text-align:center;padding:8px;border-radius:8px;font-weight:600}
.mock.mini{max-width:440px}
.mini-fields{display:flex;flex-direction:column;gap:7px}
.mini-fields label{color:var(--muted);font-size:11.5px;background:#161A24;border:1px solid var(--line);
  border-radius:9px;padding:8px 10px}
.mini-fields b{display:block;color:#E7E9EE;font-size:12.5px;margin-top:2px}
.mini-bar{display:flex;gap:3px;margin-top:12px}
.mini-bar i{flex:1;height:8px;border-radius:2px;background:#2A2E3E}
.mini-bar i:nth-child(-n+6){background:linear-gradient(180deg,#9B7BFF,#7C5CFC)}

/* вкладки «Озвучка» и «Тренды» */
.vsrc label{margin-top:10px}
.err-inline{color:#E9A0B4}
.ok-inline{color:#8B6BFF}

/* ── лендинг: доводка ── */
@keyframes _fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fade-up{animation:_fadeUp .5s cubic-bezier(.22,1,.36,1) both}
.fade-up.d2{animation-delay:.12s}
.lp-link{color:#C9B8FF;font-size:15px;align-self:center}
.lp-link:hover{color:#fff}
.lp-micro{color:var(--muted);font-size:13px;margin-top:14px}
.lp-badge.sm{margin-bottom:10px;font-size:12px;padding:4px 11px}

/* цифры */
.lp-facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#12131A}
.lp-facts-in{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:22px 20px}
@media(max-width:820px){.lp-facts-in{grid-template-columns:1fr 1fr;gap:14px}}
.lp-facts-in div{display:flex;flex-direction:column;gap:4px}
.lp-facts-in b{font-size:26px;background:linear-gradient(120deg,#A78BFA,#7C5CFC);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lp-facts-in span{color:var(--muted);font-size:12.5px;line-height:1.35}

/* карточки инструментов */
.lp-card .why{color:#D8DAE2;font-weight:600;margin:0 0 6px}
.lp-card p + p{margin-top:0}

/* что будет после заявки */
.lp-next{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:16px 0}
.lp-next-t{color:#C9B8FF;font-size:13px;margin-bottom:10px;font-weight:600}
.lp-next ol{margin:0;padding-left:20px;color:#C7CAD3;font-size:14px}
.lp-next li{margin-bottom:6px}
.lp-more{margin-top:12px;border:1px dashed var(--line);border-radius:10px;padding:8px 12px}
.lp-more summary{cursor:pointer;color:var(--muted);font-size:13px}
.lp-more[open] summary{margin-bottom:6px}
.mini-fields b.hl{color:#C9B8FF}

/* лёгкое «дыхание» полос в мокапе — ощущение живого продукта */
.mini-bar i:nth-child(7){animation:_blink 1.6s ease-in-out infinite}
.mock-row .pill.run{animation:_blink 1.8s ease-in-out infinite}

/* витрина «Сделано в STUDIO» */
.lp-lead-c{max-width:640px;margin:0 auto 26px;text-align:center}
.lp-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1000px){.lp-gal{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.lp-gal{grid-template-columns:1fr}}
.lp-gal-item{margin:0;background:var(--card);border:1px solid var(--line);border-radius:14px;
  overflow:hidden}
.lp-gal-item video{display:block;width:100%;aspect-ratio:16/9;background:#0C0E13;object-fit:cover}
.lp-gal-item figcaption{padding:10px 12px;font-size:13.5px;color:#D8DAE2}

/* клик по названию ведёт на главную */
.login-brand{display:block;text-decoration:none;color:inherit}
.login-brand:hover h1{color:#C9B8FF}
.hdr-brand{display:block;text-decoration:none;color:inherit}
.hdr-brand:hover h1{filter:brightness(1.15)}

/* ── воздух на лендинге: больше отступов, короче тексты ── */
.lp-sec{padding:76px 0}
.lp-hero2{padding:64px 0 52px}
.lp-facts-in{padding:30px 20px}
.lp-card{padding:22px 18px}
.lp-card p{font-size:13.5px;line-height:1.55}
.lp-step{padding:22px 18px}
.lp-steps{gap:18px}
.lp-grid{gap:18px}
.lp-checks li{font-size:14.5px}
@media(max-width:820px){.lp-sec{padding:52px 0} .lp-hero2{padding:40px 0 32px}}

/* ── шапка не «режет» контент ── */
html{scroll-padding-top:90px}                 /* якорные ссылки не прячутся под шапкой */
.lp-head{background:#0E0F13;backdrop-filter:none;border-bottom:1px solid var(--line)}
.lp-hero2{padding:88px 0 56px}                /* больше воздуха сверху — значок не у края */
@media(max-width:820px){.lp-hero2{padding:56px 0 36px}}
.lp-badge{padding:7px 16px}                   /* значок чуть просторнее */
.lp-badge.sm{padding:5px 13px}

/* ═══════ выравнивание: всё по одной линии ═══════ */
/* герой — подпись и ссылка вровень с текстом (слева), а не по центру */
.lp-hero2 .lp-cta{justify-content:flex-start;align-items:center}
.lp-hero2 .lp-left{text-align:left}
.lp-micro{line-height:1.4}
.lp-link{text-decoration:none;white-space:nowrap}

/* цифры — ровной полосой, по центру ячеек */
.lp-facts-in{align-items:stretch}
.lp-facts-in div{align-items:center;text-align:center;justify-content:center}

/* карточки в ряду — одинаковой высоты, текст ровно */
.lp-grid{align-items:stretch}
.lp-card,.lp-step{height:100%;display:flex;flex-direction:column}
.lp-card .ico{margin-bottom:4px}
.lp-card h3{margin:6px 0 6px}
.lp-card p{margin:0}
.lp-step h3{margin:0 0 6px}
.lp-step p{margin:0}
.lp-step span{margin-bottom:10px}

/* блок контроля и доступ — колонки по верху */
.lp-split,.lp-access{align-items:start}

/* витрина — карточки одной высоты */
.lp-gal{align-items:stretch}
.lp-gal-item{height:100%;display:flex;flex-direction:column}
.lp-gal-item video{margin-top:auto}

/* ══════════ страница входа — «продуктовый» вид ══════════ */
.login-body{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:28px}
.login-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;width:min(1000px,96vw);
  align-items:center}
@media(max-width:880px){.login-wrap{grid-template-columns:1fr;gap:26px;width:min(520px,96vw)}}

/* левая часть */
.login-brand{display:block;text-decoration:none;color:inherit}
.login-hero .logo{font-size:44px;line-height:1}
.brand-t{font-size:23px;font-weight:700;letter-spacing:.3px;margin-top:6px}
.brand-s{color:var(--muted);font-size:14px;margin-top:2px}
.login-brand:hover .brand-t{color:#C9B8FF}
.lh{font-size:clamp(26px,3vw,38px);line-height:1.12;font-weight:800;margin:24px 0 18px}
.lh span{background:linear-gradient(120deg,#A78BFA,#7C5CFC);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lfeat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.lfeat li{position:relative;padding-left:26px;color:#C7CAD3;font-size:15px}
.lfeat li:before{content:"✓";position:absolute;left:0;color:#8B6BFF;font-weight:700}

/* карточка входа */
.login-card{background:#1A1D24;border:1px solid #2A2E3A;border-radius:20px;padding:30px;
  box-shadow:0 26px 70px rgba(0,0,0,.5)}
.login-card h2{margin:0 0 6px;font-size:20px;text-align:center}
.login-card label{display:block;font-size:13px;color:var(--muted);margin-top:16px}
.login-card input{margin-top:7px;height:48px;width:100%;padding:0 14px;font-size:15px;
  background:#12151D;color:var(--txt);border:1px solid #2A2E3A;border-radius:12px;outline:none;
  transition:border-color .15s ease, box-shadow .15s ease}
.login-card input:focus{border-color:#7C5CFC;box-shadow:0 0 0 3px rgba(124,92,252,.25)}

/* пароль + «глаз» */
.pass-wrap{position:relative;display:block}
.pass-wrap input{padding-right:48px}
.eye{position:absolute;right:6px;top:7px;height:48px;width:40px;background:transparent;border:0;
  color:var(--muted);font-size:16px;cursor:pointer;border-radius:10px}
.eye:hover{color:var(--txt);background:#1F222A}

/* кнопка и подпись */
.login-card .btn{width:100%;height:50px;justify-content:center;margin-top:22px;font-size:15.5px;
  box-shadow:0 12px 26px rgba(124,92,252,.35)}
.login-card .btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.login-note{text-align:center;color:var(--muted);font-size:12.5px;margin:12px 0 0}
.login-card .hint{text-align:center;margin-top:10px}
.login-card code{background:#12151D;padding:1px 6px;border-radius:6px;font-size:12px}
.login-card .err{margin-top:14px}

/* ═══════ свои выпадающие списки — в цвете темы ═══════ */
.sel{position:relative;width:100%;margin-top:7px}
.sel select{display:none !important}          /* нативный прячем, значение остаётся в форме */
.sel-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  min-height:48px;padding:10px 14px;background:#1F222A;color:var(--txt);
  border:1px solid var(--line);border-radius:12px;font-size:15px;text-align:left;cursor:pointer}
.sel-btn:hover{border-color:#4B3A80}
.sel.open .sel-btn{border-color:#7C5CFC;box-shadow:0 0 0 3px rgba(124,92,252,.22)}
.sel-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-a{color:var(--muted);font-style:normal;transition:transform .15s ease}
.sel.open .sel-a{transform:rotate(180deg)}
.sel-menu{position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;display:none;
  max-height:320px;overflow:auto;background:#1A1D24;border:1px solid #3B2A63;border-radius:12px;
  box-shadow:0 22px 60px rgba(0,0,0,.55);padding:6px}
.sel.open .sel-menu{display:block}
.sel-opt{display:block;width:100%;text-align:left;background:transparent;border:0;color:#D8DAE2;
  font-size:14.5px;padding:10px 12px;border-radius:9px;cursor:pointer;white-space:normal}
.sel-opt:hover{background:#241C3A;color:#fff}
.sel-opt.on{background:#2A2140;color:#C9B8FF;font-weight:600}

/* в строке с кнопкой (например «Голос + Прослушать») — ведёт себя как прежний select */
.row .sel{width:auto;flex:1 1 220px;min-width:0}

/* ═══════ редактор ролика — чище и понятнее ═══════ */
.editor{padding:18px 18px 16px}
.ed-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ed-head h3{margin:0;font-size:16px}
.ed-nav{display:flex;align-items:center;gap:6px}
.ed-nav button{width:28px;height:28px;border-radius:8px;background:#1F222A;color:var(--txt);
  border:1px solid var(--line);cursor:pointer;font-size:15px;line-height:1}
.ed-nav button:hover:not(:disabled){border-color:#7C5CFC}
.ed-nav button:disabled{opacity:.35;cursor:default}
.editor label{margin-top:12px}
.editor .two{gap:12px}
.editor select,.editor input{width:100%}
.ed-dirty{display:none;color:#C9B8FF;font-size:12.5px;margin-top:12px}
.ed-actions{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.ed-actions .btn{justify-content:center;width:100%}
.ed-status{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.ed-status .state{display:inline-block}
.ed-status .pbar{margin-top:8px}
.ed-status .note{margin-top:6px;max-width:none}

/* ниша ролика в очереди */
.q-niche{color:#C9B8FF;font-size:12.5px}
/* стиль ролика в очереди — видно, что применён */
.q-style{color:#7FE3B0;font-size:12.5px}
.q-style b{color:#FFD166}

/* ══════════════════════════════════════════════════════════════
   ТЕЛЕФОН: ничего не «плывёт», не режется и не наезжает
   ══════════════════════════════════════════════════════════════ */
html{-webkit-text-size-adjust:100%}
img,video,audio{max-width:100%}

/* iOS Safari «зумит» страницу при тапе в поле, если шрифт < 16px */
@media(max-width:820px){
  input,select,textarea{font-size:16px}
}

@media(max-width:700px){
  html,body{overflow-x:hidden}          /* никакой горизонтальной прокрутки страницы */
  html,body{overflow-x:clip}            /* clip там, где поддерживается — не мешает «липкой» шапке лендинга */
  .wrap{padding:0 14px}

  /* шапка — компактная, ничего не переносится криво */
  .hdr-in{padding:11px 14px;gap:10px}
  .hdr h1{font-size:17px}
  .hdr p{font-size:11.5px}
  .hdr-right{gap:8px;flex:0 0 auto;align-items:center}
  .who{font-size:12px;padding:3px 8px}
  .hdr-right .muted{font-size:12.5px;white-space:nowrap}

  /* вкладки — лента, которую можно пролистать пальцем */
  .tabs{overflow-x:auto;flex-wrap:nowrap;margin:12px 0;padding-bottom:2px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{flex:0 0 auto;white-space:nowrap;padding:8px 13px;font-size:13.5px}

  .card{padding:14px}
  .card h2{font-size:16px}
  .row-between{flex-wrap:wrap}

  /* цифры */
  .stats{grid-template-columns:repeat(4,1fr);gap:6px}
  .st{padding:8px 4px}
  .st b{font-size:18px}
  .st span{font-size:11px}

  .filters{flex-wrap:wrap}

  /* ── панель запуска: больше НЕ висит поверх кнопок ── */
  .runbar{position:static;margin-top:12px;padding:12px 14px;box-shadow:none}
  .runbar .row-between{flex-direction:column;align-items:stretch;gap:10px}
  .runbar .row-between > div{width:100%}
  .runbar .row{width:100%}
  .runbar .btn{width:100%;justify-content:center;min-height:46px}

  /* редактор — обычный блок, не «липкий» */
  .editor{position:static}

  /* массовые операции — во всю ширину */
  .bulkbar{flex-direction:column;align-items:stretch}
  .bulkbar form.row{width:100%}
  .bulkbar .sel,.bulkbar .btn{width:100%}
  .bulkbar .btn{justify-content:center}

  /* кнопки — удобные для пальца */
  .btn{min-height:44px}
  .btn.small{min-height:38px}
}

@media(max-width:860px){
  /* ── очередь: таблица → карточки ── */
  table.q{display:block}
  table.q thead{display:none}
  table.q tbody{display:block}
  table.q tr{display:block;border:1px solid var(--line);border-radius:12px;
    padding:10px 12px;margin:0 0 10px;background:#12151D}
  table.q tr.run{background:#141A26}
  table.q td{display:block;border:0;padding:2px 0;max-width:none;min-width:0}
  table.q td:nth-child(1),table.q td:nth-child(2){display:inline-block;width:auto;
    vertical-align:middle;margin-right:10px}
  table.q .chk{width:30px;height:30px}
  table.q .topic{font-size:15px;font-weight:600;max-width:none;margin:4px 0 6px;line-height:1.35}
  table.q .params{font-size:13px}
  table.q .voicename{white-space:normal}
  table.q .stcell{min-width:0;max-width:none;margin-top:8px}
  table.q .acts{display:flex;gap:6px;margin-top:10px;white-space:normal;text-align:left}
  table.q .acts button{flex:1 1 auto;border-color:var(--line);padding:8px 6px;font-size:15px}

  /* ── остальные таблицы (файлы, клипы, озвучки, тренды) ── */
  table.files{display:block}
  table.files thead{display:none}
  table.files tbody{display:block}
  table.files tr{display:block;border:1px solid var(--line);border-radius:12px;
    padding:10px 12px;margin:0 0 10px;background:#12151D}
  table.files td{display:block;border:0;padding:2px 0;max-width:none}
  table.files td.name{word-break:break-word}
  table.files .btn{margin-top:6px}
}

@media(max-width:430px){
  .stats{grid-template-columns:1fr 1fr}
  table.q .acts{flex-wrap:wrap}
  table.q .acts button{flex:1 1 28%}
}

/* ── grid-дети не должны «распирать» карточку ── */
.main > *,.topgrid > *,.card{min-width:0}

/* ══ до 860px: таблицы превращаются в карточки (телефон + планшет портретом) ══ */

/* ═══ кнопка «скопировать название» ═══ */
.copy{background:transparent;border:1px solid transparent;color:var(--muted);cursor:pointer;
  font-size:13px;padding:2px 7px;border-radius:7px;margin-left:6px;line-height:1.25;
  vertical-align:middle;opacity:.5;flex:0 0 auto}
.copy:hover{opacity:1;border-color:var(--line);color:var(--txt)}
.copy:active{transform:scale(.94)}
.copy.copied{opacity:1;color:#6EE7A0;border-color:#1F5236;background:#12301F}
.copy.copyfail{opacity:1;color:#FF9B9B;border-color:#5B2A33}
.copyrow{display:flex;align-items:center;gap:6px;margin-top:6px}
.copyrow input{margin-top:0;flex:1 1 auto;width:auto;min-width:0}
.copyrow .copy{margin-left:0;padding:10px 12px;font-size:15px}
/* название ролика — выделяется мышью/пальцем, как обычный текст */
table.q .topic,.tl,table.files .name{user-select:text;-webkit-user-select:text}
/* на телефоне наведения нет — кнопка видна сразу */
@media(max-width:860px){ .copy{opacity:1} }

/* ══════════════════════════════════════════════════════════════
   ЛЕНДИНГ: блоки воронки (боль → шаги → выгоды → для кого → вопросы)
   ══════════════════════════════════════════════════════════════ */

/* крупнее и весомее — как на «продающих» страницах */
.lp-hero2 h1{font-size:clamp(30px,4.4vw,52px);font-weight:900;letter-spacing:-.6px}
.lp-sec h2{font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.3px;line-height:1.15}
.lp-facts-in b{font-size:32px}
.lp-step h3{font-size:17px}
.lp-card h3{font-size:16px}

/* три галочки под кнопками героя */
.lp-trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;color:var(--muted);font-size:13.5px}
.lp-trust span{display:inline-flex;align-items:center;gap:7px}

/* заголовок секции выровнен влево */
.lp-shead{max-width:720px;margin-bottom:34px}
.lp-shead h2{text-align:left;margin:0}
.lp-ps{color:var(--muted);margin:12px 0 0;font-size:16px;line-height:1.55}

/* значок «изменено» в мокапе */
.mock-side dd.hl{color:#C9B8FF}

/* ── боль ── */
.lp-pain{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.lp-pain{grid-template-columns:1fr}}
.lp-pain-item{display:flex;gap:11px;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:16px 18px;color:#D4D7DE;font-size:14.5px;line-height:1.5}
.lp-pain-item .x{color:#F87171;font-weight:800;flex:none;line-height:1.4}
.lp-pain-kick{margin-top:26px;font-size:clamp(18px,2.2vw,22px);font-weight:800;color:#fff;letter-spacing:-.2px}

/* ── сетка на 3 колонки (6 выгод) ── */
.lp-grid.three{grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.lp-grid.three{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lp-grid.three{grid-template-columns:1fr}}

/* ── для кого ── */
.lp-tags{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.lp-tag{background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:11px 20px;font-weight:600;color:#E7E9EE;font-size:14.5px}
.lp-whom-kick{margin:24px 0 0;color:var(--muted);font-size:16.5px}
.lp-whom-kick b{color:#fff}

/* ── частые вопросы ── */
.lp-faq{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.lp-faq{grid-template-columns:1fr}}
.lp-faq-item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.lp-faq-item .q{font-weight:700;color:#fff;margin-bottom:6px;font-size:15px}
.lp-faq-item .a{color:var(--muted);font-size:14px;line-height:1.55}

/* мобильная доводка новых блоков */
@media(max-width:700px){
  .lp-hero2 h1{font-size:clamp(28px,7.4vw,38px)}
  .lp-sec h2{font-size:clamp(22px,5.6vw,28px)}
  .lp-facts-in b{font-size:26px}
  .lp-trust{gap:10px;font-size:13px}
  .lp-pain-kick{font-size:18px}
  .lp-tag{padding:9px 16px;font-size:14px}
  .lp-shead{margin-bottom:24px}
}

/* ── мокап на узких экранах: боковая панель не должна обрезаться ── */
.mock-side dd{overflow-wrap:anywhere;word-break:break-word}
@media(max-width:620px){
  .mock-body{grid-template-columns:34px 1fr}
  .mock-side{display:none}          /* на телефоне оставляем только очередь — панель читается ниже, в блоке «Контроль» */
  .mock-nav{font-size:13px;gap:9px}
  .mock-row .mt{font-size:12.5px}
}

/* иконка копирования — SVG вместо эмодзи (эмодзи у части браузеров рисуется пустым квадратом) */
.copy svg{display:inline-block;vertical-align:-2px}
.copy.copied svg,.copy.copyfail svg{vertical-align:0}
.copy{font-size:15px;font-weight:700}

/* имя файла — мелкой строкой под названием ролика */
.fname{color:var(--muted);font-size:11.5px;margin-top:3px;word-break:break-all;line-height:1.35}

/* «скрыто N файлов без названия» под списком готовых роликов */
.files-more{margin-top:12px;color:var(--muted);font-size:12.5px}
.files-more a{color:#C9B8FF;cursor:pointer}
.files-more a:hover{color:#fff}

/* ярлычок ниши на карточке витрины */
.lp-gal-badge{display:inline-block;background:#2A2140;color:#C9B8FF;border:1px solid #4B3A80;
  border-radius:999px;padding:2px 10px;font-size:12px;margin-right:8px;white-space:nowrap}

/* пояснение под кнопкой героя: что будет после нажатия */
.lp-after{color:#B9BEC9;font-size:13.5px;margin-top:12px;max-width:560px}
/* честная подпись под макетом интерфейса */
.lp-mockwrap{display:flex;flex-direction:column}
.mock-caption{color:var(--muted);font-size:12px;margin-top:10px;text-align:center}

/* ══════════════════════════════════════════════════════════════
   ОТКЛИК НА НАЖАТИЕ: кнопка «вдавливается», видно, что клик принят
   ══════════════════════════════════════════════════════════════ */

/* на телефоне убираем синюю вспышку — показываем свою */
.btn,.chk,.copy,.sel-btn,.sel-opt,.eye,.tabs a,.filters a,.ed-nav button,.lp-gal-item{-webkit-tap-highlight-color:transparent}

/* обычные кнопки */
.btn:active{transform:translateY(1px) scale(.985);filter:brightness(.93)}
/* главные (градиентные) — тень «сплющивается», как будто нажали физически */
.btn.primary:active{box-shadow:0 2px 10px rgba(124,92,252,.3);filter:brightness(.9)}
/* отключённая кнопка не притворяется нажимаемой */
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;filter:none}

/* строки действий в очереди и стрелки редактора */
table.q .acts button:active,.ed-nav button:active{background:#1F222A;border-color:var(--acc);transform:scale(.9)}
/* чекбокс выбора ролика */
.chk:active{transform:scale(.88);border-color:var(--acc)}
/* вкладки и фильтры */
.tabs a:active,.filters a:active{background:var(--card);transform:translateY(1px)}
/* свой выпадающий список */
.sel-btn:active{border-color:var(--acc);background:#22262F}
.sel-opt:active{background:#2A2140;color:#fff}
/* «глаз» в форме входа */
.eye:active{background:#1F222A;transform:scale(.94)}
/* ссылки с рамкой (лендинг) */
.lp-nav a:active,.lp-link:active{color:#fff;opacity:.75}

/* фокус с клавиатуры — видно, на чём стоишь (мышью не мешает) */
.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--acc);outline-offset:2px}

/* пока запрос идёт — кнопка «занята»: не жмётся второй раз и видно, что работает */
.btn.htmx-request,table.q .acts button.htmx-request,.chk.htmx-request,
.filters a.htmx-request,.tabs a.htmx-request,.sel-btn.htmx-request{
  opacity:.55;pointer-events:none;transform:none}

/* ═══ запись экрана «как это работает» (появляется, когда есть static/demo.mp4) ═══ */
.lp-demo{margin:0 0 34px}
/* высоту не задаём — видео само её определяет под свою пропорцию (запись экрана широкая) */
.lp-demo video{display:block;width:100%;height:auto;background:#0A0C11;
  border:1px solid var(--line);border-radius:16px}
.lp-demo-cap{color:var(--muted);font-size:13px;margin-top:10px;text-align:center}
@media(max-width:700px){.lp-demo video{border-radius:12px}.lp-demo{margin-bottom:24px}}

/* ═══ ошибка: раскрывается по нажатию ═══ */
.errbox{margin:0}
.errbox summary{cursor:pointer;list-style:none;display:inline-block}
.errbox summary::-webkit-details-marker{display:none}
.errbox summary.state.error{border:1px solid #5A3244}
.errbox summary:after{content:" ▾";opacity:.7}
.errbox[open] summary:after{content:" ▴"}
.errbox[open] summary.state.error{background:#3A1D22;color:#FFB4B4}
.err-body{margin-top:10px;background:#12151D;border:1px solid #4A2A38;border-radius:10px;
  padding:10px 12px;max-width:460px}
.err-why{color:#FFC9C9;font-size:13.5px;line-height:1.5;word-break:break-word}
.err-log-t{color:var(--muted);font-size:12px;margin-top:8px}
.err-log{margin:4px 0 0;padding-left:18px;color:#C9B8FF;font-size:12.5px;line-height:1.5}
.err-log li{margin-bottom:3px}
.err-stage{color:var(--muted);font-size:12px;margin-top:8px}
.err-hint{color:var(--muted);font-size:12px;margin-top:8px;line-height:1.45}

/* ═══ «Коротко о главном»: карточки в фиолетовой рамке ═══ */
.lp-faq-item{border-color:rgba(124,92,252,.38);box-shadow:0 0 0 1px rgba(124,92,252,.10) inset,
  0 6px 18px rgba(0,0,0,.25)}
.lp-faq-item .q{color:#E9E3FF}
.lp-faq-item:hover{border-color:rgba(124,92,252,.65)}

/* ═══ «Для кого»: мягкое фиолетовое свечение на фоне ═══ */
.lp-sec.lp-whom{position:relative;overflow:hidden;
  background:
    radial-gradient(900px 340px at 50% -12%, rgba(124,92,252,.30), rgba(124,92,252,0) 66%),
    radial-gradient(640px 280px at 6% 112%, rgba(107,78,255,.18), rgba(107,78,255,0) 70%),
    linear-gradient(180deg,#171B29 0%,#12131A 48%,#101322 100%)}
.lp-whom h2{position:relative}
.lp-whom .lp-tag{background:rgba(124,92,252,.10);border-color:rgba(124,92,252,.35)}

/* ═══ форма заявки: заметная рамка и мягкое свечение ═══ */
.lp-form{border:1px solid rgba(124,92,252,.55);
  box-shadow:0 0 0 4px rgba(124,92,252,.08), 0 22px 50px rgba(0,0,0,.45)}
.lp-form h3{color:#E9E3FF}
.lp-form:focus-within{border-color:rgba(124,92,252,.85);
  box-shadow:0 0 0 5px rgba(124,92,252,.14), 0 22px 50px rgba(0,0,0,.5)}

/* ═══ ход ролика в очереди: идёт / сцены / осталось ═══ */
.runline{color:#C9B8FF;font-size:12.5px;margin-top:6px;font-variant-numeric:tabular-nums}
.runbox{margin-top:6px}
.runbox summary{cursor:pointer;color:var(--muted);font-size:12px;list-style:none;display:inline-block}
.runbox summary::-webkit-details-marker{display:none}
.runbox summary:after{content:" ▾"}
.runbox[open] summary:after{content:" ▴"}

/* ═══ компактный статус в очереди ═══ */
.st-count{color:#C9B8FF;font-size:12.5px;margin-top:4px;font-variant-numeric:tabular-nums}
.st-act{color:var(--muted);font-size:12px;margin-top:4px;line-height:1.35}
.st-cell .pbar.seg{margin-top:6px}


/* ═══ колонки не распирает длинный текст в select ═══
   Ширина select равна самой длинной опции — из-за названий голосов
   колонка вылезала за панель редактора. */
.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.two > *{min-width:0}
.two select,.two input{max-width:100%}

/* кнопка «свернуть» в шапке редактора */
.ed-tools{display:flex;align-items:center;gap:8px}
.ed-x{width:28px;height:28px;border-radius:8px;background:#1F222A;color:var(--muted);
  border:1px solid var(--line);cursor:pointer;font-size:12px;line-height:1;flex:none}
.ed-x:hover{border-color:#7C5CFC;color:var(--txt)}


/* ═══ вкладки + баланс озвучки справа ═══ */
.tabbar{display:flex;align-items:center;gap:12px}
.tabbar .tabs{flex:1 1 auto;min-width:0}
.credits{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);
  background:#151821;border:1px solid var(--line);border-radius:999px;padding:5px 12px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.credits b{color:var(--txt);font-weight:600}
@media(max-width:1200px){.credits .lbl{display:none}}

/* ═══ переключатель языка: сегменты без слэша ═══ */
.langsw{display:inline-flex;align-items:center;gap:2px;background:#1B1E26;border:1px solid var(--line);
  border-radius:999px;padding:3px}
.langsw a{padding:3px 10px;border-radius:999px;color:var(--muted);font-size:12px;line-height:1.25;
  transition:background .15s ease,color .15s ease}
.langsw a:hover{color:var(--txt)}
.langsw a.on{background:#2A2140;color:var(--txt);font-weight:600}


/* ═══ аккаунт в шапке: пилюля + меню ═══ */
.hdr-right{display:flex;align-items:center;gap:16px}
.acct{position:relative}
.acct-btn{display:inline-flex;align-items:center;gap:8px;background:#2A2E38;color:var(--txt);
  border:1px solid transparent;border-radius:20px;padding:6px 13px 6px 11px;cursor:pointer;
  font:inherit;font-size:13.5px;line-height:1;transition:background .15s ease}
.acct-btn:hover{background:#343946}
.acct-ico{opacity:.65;font-size:11px}
.acct-name{font-weight:500}
.acct-caret{font-style:normal;font-size:10px;opacity:.55;transition:transform .15s ease}
.acct.open .acct-caret{transform:rotate(180deg)}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:184px;display:none;
  background:#1A1D24;border:1px solid #3B2A63;border-radius:12px;padding:6px;z-index:80;
  box-shadow:0 18px 50px rgba(0,0,0,.55)}
.acct.open .acct-menu{display:block}
.acct-menu a{display:block;padding:9px 12px;border-radius:8px;color:var(--txt);font-size:13.5px}
.acct-menu a:hover{background:#241C3A}
.acct-menu a.danger{color:#FF9B9B}
.acct-menu a.danger:hover{background:#3A1D22}
@media(max-width:560px){
  .hdr-right{gap:10px}
  .acct-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}


/* ═══ страница профиля ═══ */
.prof-list{margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.prof-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 16px;border-top:1px solid var(--line);font-size:14px}
.prof-row:first-child{border-top:0}
.prof-row > span{color:var(--muted)}
.prof-row b{font-weight:600}
.prof-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.langsw-lg{padding:4px}
.langsw-lg a{padding:5px 14px;font-size:13.5px}

/* на узких экранах вкладки — лента с прокруткой, а не два ряда */
@media(max-width:900px){
  .tabs{overflow-x:auto;flex-wrap:nowrap;margin:12px 0;padding-bottom:2px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{flex:0 0 auto;white-space:nowrap;padding:8px 13px;font-size:13.5px}
  .tabbar{gap:8px}
}


/* ═══ админка лимитов ═══ */
.q-head,.q-row{display:grid;grid-template-columns:1.1fr .9fr .9fr .9fr auto;gap:12px;align-items:center}
.q-head{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.q-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.q-form{display:flex;gap:6px;align-items:center}
.q-form input[type=number]{width:118px;padding:6px 9px;font-size:13px}
@media(max-width:760px){
  .q-head{display:none}
  .q-row{grid-template-columns:1fr 1fr;gap:6px 12px;padding:14px 16px}
  .q-actions{grid-column:1/-1;justify-content:flex-start}
}


/* ═══ обложки в «Готовых» ═══ */
td.thumbs{white-space:nowrap;vertical-align:middle}
td.thumbs img{width:104px;height:59px;object-fit:cover;border-radius:6px;
  border:1px solid var(--line);margin-right:5px;vertical-align:middle;background:#0d0f14}
td.thumbs form{display:inline-block;vertical-align:middle;margin-left:2px}