/* Фирменный стиль РГС в интерфейсе: та же палитра, что и в слайдах.
   Цвета продублированы здесь намеренно — фронтенд не должен ходить в бэкенд
   за тем, чтобы нарисовать кнопку. Источник правды один: brand/brand.yaml. */
:root{
  --primary:#B70037; --primary-dark:#81002A; --primary-light:#D70E4B;
  --ink:#1F232B; --ink-soft:#505254; --muted:#6A6B6D; --line:#CBCFD6;
  --bg:#FFFFFF; --bg-alt:#F2F2F5; --bg-soft:#F9F9FA; --ok:#2E7D32; --warn:#B26A00;
  --radius:10px;
}
*{box-sizing:border-box}
/* Атрибут hidden должен скрывать. У браузера это display:none из его же
   таблицы стилей, и любое авторское правило с display его перебивает: полоса
   статуса с display:flex не скрывалась вовсе и сообщала о готовой колоде
   через шесть часов после сборки. */
[hidden]{display:none !important}
body{
  margin:0; background:var(--bg-alt); color:var(--ink);
  font:15px/1.45 "PT Sans","Segoe UI",Arial,sans-serif;
}
h2{font-size:17px;margin:0 0 6px}
h3{font-size:14px;margin:18px 0 8px;color:var(--ink-soft)}
p{margin:0 0 10px}
.hint{color:var(--muted);font-size:13px}
.muted{color:var(--muted)}
.mt{margin-top:22px}

/* шапка */
.top{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:12px 24px;background:var(--bg);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:14px}
/* Кнопка в шапке карточки не переносится: в узкой колонке
   «Предложить по материалу» ломалось на три строки. */
.card-head .ghost{white-space:nowrap}
.home{display:block;border-radius:4px;transition:opacity .15s}
.home:hover{opacity:.7}
.home:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.logo{height:19px;display:block}
/* Номер версии рядом с названием: кнопка, а не подпись, — он открывает
   историю выпусков. Выглядит подписью намеренно, в шапке хватает кнопок. */
.version{
  border:1px solid var(--line);background:var(--bg-soft);color:var(--muted);
  font:inherit;font-size:12px;line-height:1;padding:4px 8px;border-radius:20px;
  cursor:pointer;letter-spacing:.3px;
}
.version:hover{color:var(--primary);border-color:var(--primary)}
.divider{width:1px;height:22px;background:var(--line)}
.product{font-weight:700;letter-spacing:.2px}
.top-right{display:flex;align-items:center;gap:10px}
.health{font-size:12px;color:var(--muted);padding:4px 10px;border-radius:20px;background:var(--bg-alt)}
.health.bad{color:#fff;background:var(--primary)}

/* шаги */
.steps{display:flex;gap:4px;padding:10px 24px 0;background:var(--bg);border-bottom:1px solid var(--line)}
.step{
  border:0;background:none;padding:10px 16px 12px;font:inherit;color:var(--muted);
  cursor:pointer;border-bottom:3px solid transparent;display:flex;gap:8px;align-items:center;
}
.step b{
  display:inline-flex;width:20px;height:20px;border-radius:50%;background:var(--bg-alt);
  color:var(--ink-soft);align-items:center;justify-content:center;font-size:12px;
}
.step.is-active{color:var(--ink);border-bottom-color:var(--primary);font-weight:700}
.step.is-active b{background:var(--primary);color:#fff}
.step:disabled{opacity:.45;cursor:default}

main{padding:22px 24px 60px;max-width:1360px;margin:0 auto}
.view{display:none}
.view.is-visible{display:block}
.grid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;align-items:start}
/* Колонка сетки по умолчанию не ужимается уже своего содержимого. Без этого
   широкая таблица внутри карточки распирала не карточку, а страницу целиком:
   на телефоне админка уезжала за правый край вместе с шапкой. */
.grid>*{min-width:0}
@media (max-width:1000px){.grid{grid-template-columns:1fr}}
/* Две равные колонки: очередь и последние колоды — списки одного веса. */
.grid-even{grid-template-columns:1fr 1fr;margin-top:18px}
@media (max-width:1000px){.grid-even{grid-template-columns:1fr}}

.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.card-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:12px}

/* type=password сюда попал не сразу, и поле пароля на входе оставалось узким,
   в отличие от поля логина рядом. */
textarea,input[type=text],input[type=password],input:not([type]),select{
  width:100%;font:inherit;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:8px;padding:9px 11px;
}
textarea{resize:vertical}
textarea:focus,input:focus,select:focus{outline:2px solid var(--primary-light);outline-offset:-1px;border-color:transparent}
.field{display:block;margin-bottom:12px}
.field>span{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:4px}

button{font:inherit;cursor:pointer;border-radius:8px}
.primary{background:var(--primary);color:#fff;border:1px solid var(--primary);padding:9px 18px;font-weight:700}
.primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
.primary:disabled{background:var(--line);border-color:var(--line);color:var(--muted);cursor:default}
.ghost{background:var(--bg);color:var(--ink);border:1px solid var(--line);padding:8px 14px;text-decoration:none;display:inline-block;font-size:14px}
.ghost:hover{border-color:var(--primary);color:var(--primary)}
.wide{width:100%;margin-top:6px}
.link{background:none;border:0;color:var(--primary);padding:0;text-decoration:underline}
.danger{color:var(--primary);border-color:var(--line)}

/* источник */
.dropzone{
  margin-top:12px;border:1.5px dashed var(--line);border-radius:var(--radius);
  padding:18px;text-align:center;color:var(--ink-soft);background:var(--bg-soft);
}
.dropzone.over{border-color:var(--primary);background:#fff5f7}
.dropzone small{display:block;color:var(--muted);margin-top:4px;font-size:12px}
.filelist{list-style:none;padding:0;margin:10px 0 0}
.filelist li{display:flex;justify-content:space-between;padding:6px 10px;background:var(--bg-alt);border-radius:6px;margin-bottom:6px;font-size:13px}
/* Карточка «Последние колоды» — самостоятельный блок, отступ ей задаёт
   сетка. Правило оставлено для старых мест, где .recent вложен. */
.recent:not(.card){margin-top:24px}
.recent ul{list-style:none;padding:0;margin:0}
.recent li{padding:7px 0;border-bottom:1px solid var(--bg-alt);font-size:13px;display:flex;justify-content:space-between;gap:10px}
.recent a{color:var(--ink);text-decoration:none}
.recent a:hover{color:var(--primary)}

/* план */
.deck-title{font-size:18px;font-weight:700;margin-bottom:14px}
.outline{list-style:none;padding:0;margin:0}
.outline li{
  display:grid;grid-template-columns:26px 1fr 210px auto;gap:10px;align-items:center;
  padding:8px;border:1px solid var(--line);border-radius:8px;margin-bottom:8px;background:var(--bg);
}
.outline li.dragging{opacity:.4}
.outline .num{color:var(--muted);text-align:center;cursor:grab;font-size:13px}
.outline .purpose{font-size:12px;color:var(--muted);margin-top:2px}
.row-actions{display:flex;gap:6px}
.icon{border:1px solid var(--line);background:var(--bg);width:30px;height:30px;line-height:1;color:var(--ink-soft)}
.icon:hover{border-color:var(--primary);color:var(--primary)}

/* слайды */
.slides-layout{display:grid;grid-template-columns:minmax(420px,32vw) 1fr;gap:18px;align-items:start}
@media (max-width:1000px){.slides-layout{grid-template-columns:1fr}}
.thumbs{display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 210px);overflow:auto;padding-right:6px}
/* Без этого колонка ужимала карточки: 13 слайдов в flex-столбце с ограниченной
   высотой сжимались до 42 px при картинке в 219 px, и от слайда была видна
   только верхняя полоса. */
.thumb{flex:0 0 auto}
.thumb{border:2px solid transparent;border-radius:8px;overflow:hidden;background:var(--bg);cursor:pointer;position:relative}
.thumb img{width:100%;display:block;aspect-ratio:16/9;object-fit:contain;background:#fff}
.thumb.is-active{border-color:var(--primary)}
.thumb .tag{position:absolute;left:6px;top:6px;background:rgba(31,35,43,.78);color:#fff;font-size:11px;padding:2px 6px;border-radius:4px;pointer-events:none}
.thumb .warn-dot{position:absolute;right:6px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--primary)}
.thumb .placeholder{padding:26px 10px;text-align:center;color:var(--muted);font-size:12px;border:1px solid var(--line);border-radius:8px}
.editor .preview{width:100%;border:1px solid var(--line);border-radius:8px;margin-bottom:14px}
.commands{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.fields .f{margin-bottom:12px}
.fields label{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:4px}
.fields .limit{color:var(--muted);font-size:12px}
.fields .over{color:var(--primary);font-weight:700}
.pair{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin-bottom:6px}
.list-row{display:flex;gap:8px;margin-bottom:6px}
.list-row input{flex:1}
.issues{list-style:none;padding:0;margin:0}
.issues li{padding:8px 10px;border-radius:8px;margin-bottom:6px;font-size:13px;background:var(--bg-alt)}
.issues li.error{background:#fdeef1;border-left:3px solid var(--primary)}
.issues li.warning{background:#fdf6ea;border-left:3px solid var(--warn)}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:12px;background:var(--bg-alt);color:var(--ink-soft)}
.badge.ok{background:#e8f4e9;color:var(--ok)}
.badge.bad{background:#fdeef1;color:var(--primary)}

/* выгрузка */
.export-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.versions{list-style:none;padding:0;margin:0}
.versions li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--bg-alt);font-size:13px}
.journal{max-height:260px;overflow:auto;font-size:12px;color:var(--ink-soft)}
.journal div{padding:4px 0;border-bottom:1px solid var(--bg-soft);display:flex;gap:10px}
.journal b{color:var(--ink);min-width:74px}
.score{font-size:30px;font-weight:700;color:var(--primary)}

/* прогресс */
.progress{position:fixed;inset:0;background:rgba(31,35,43,.45);display:flex;align-items:center;justify-content:center;z-index:20}
/* display:flex в классе перебивает атрибут hidden из стилей браузера, и
   спрятанный оверлей продолжает перехватывать клики по всей странице. */
.progress[hidden]{display:none}
.progress-inner{background:var(--bg);padding:26px 30px;border-radius:var(--radius);min-width:340px;text-align:center}
.bar{height:6px;background:var(--bg-alt);border-radius:3px;overflow:hidden;margin-bottom:12px}
.bar i{display:block;height:100%;background:var(--primary);width:0;transition:width .4s}

/* предпросмотр макета */
.layout-pick{display:flex;flex-direction:column;gap:6px}
.layout-preview{
  width:210px;border:1px solid var(--line);border-radius:6px;display:block;
  background:var(--bg-soft);min-height:40px;
}
.editor .layout-side{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.editor .layout-side img{width:230px}

/* Визуальный выбор макета: галерея с превью вместо текстового списка. */
.lp-trigger{
  display:flex;flex-direction:column;gap:6px;align-items:stretch;cursor:pointer;
  border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:8px;
  font:inherit;text-align:left;width:230px;
}
.lp-trigger:hover{border-color:var(--primary)}
.lp-trigger img{width:100%;border-radius:4px;display:block;background:var(--bg-soft)}
.lp-trigger .lp-name{font-size:12px;color:var(--ink-soft);line-height:1.25}
.lp-trigger .lp-name b{color:var(--ink)}
.lp-overlay{position:fixed;inset:0;background:rgba(31,35,43,.5);z-index:40;
  display:flex;align-items:center;justify-content:center;padding:30px}
.lp-panel{background:var(--bg);border-radius:var(--radius);max-width:1180px;width:100%;
  max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.lp-head{display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px;border-bottom:1px solid var(--line)}
.lp-head h2{margin:0}
.lp-close{border:0;background:none;font-size:22px;cursor:pointer;color:var(--muted);padding:4px 10px}
.lp-close:hover{color:var(--primary)}
.lp-body{overflow:auto;padding:6px 20px 20px}
.lp-group{margin-top:16px}
.lp-group h3{margin:0 0 10px}
.lp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.lp-cell{border:2px solid var(--line);border-radius:8px;padding:8px;cursor:pointer;
  background:var(--bg);display:flex;flex-direction:column;gap:6px}
.lp-cell:hover{border-color:var(--primary-light)}
.lp-cell.is-current{border-color:var(--primary)}
.lp-cell img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;background:var(--bg-soft)}
.lp-cell .lp-title{font-size:12px;color:var(--ink-soft);line-height:1.25}
.lp-cell .lp-title b{color:var(--ink)}

.check { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 14px; }
.check input { margin-top: 3px; flex: none; }
.check span { font-size: 12.5px; color: var(--muted, #6a6b6d); line-height: 1.45; }

.hint.is-error { color: var(--primary, #b70037); font-weight: 500; }

/* Подбор картинки под полем запроса */
.imgpick { margin-top: 8px; }
.imgpick-now { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.imgpick-now img { width: 56px; height: 56px; object-fit: contain;
  border: 1px solid var(--line, #cbcfd6); border-radius: 8px; padding: 4px; background: #fff; }
.imgpick-empty { width: 56px; height: 56px; display: inline-flex; align-items: center;
  justify-content: center; border: 1px dashed var(--line, #cbcfd6); border-radius: 8px;
  font-size: 11px; color: var(--muted, #6a6b6d); text-align: center; padding: 4px; }
.imgpick-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.as-button { display: inline-flex; align-items: center; cursor: pointer; }
.ib-search { flex: 1; min-width: 160px; margin: 0 12px; padding: 6px 10px;
  border: 1px solid var(--line, #cbcfd6); border-radius: 8px; font: inherit; }

/* Таблица правки диаграммы */
.chart-edit { border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; margin: 14px 0; background: var(--bg-soft); }
.chart-edit-head { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 8px; }
.chart-edit-head select { width: auto; }
.chart-table { border-collapse: collapse; width: 100%; }
.chart-table th, .chart-table td { padding: 2px; }
.chart-table th { font-size: 12px; color: var(--muted); font-weight: 400; }
.chart-table input { padding: 5px 7px; font-size: 13px; min-width: 84px; }
.chart-edit-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Выбор кадра под картинкой */
.focus-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.focus-row .ghost { padding: 5px 10px; font-size: 12px; min-height: 0; }
.focus-row .ghost.is-current { border-color: var(--primary); color: var(--primary); font-weight: 700; }

/* Галерея фотобанка */
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px; margin-top: 12px; }
.ph-cell { border: 1px solid var(--line, #cbcfd6); border-radius: 10px; background: #fff;
  padding: 0; overflow: hidden; cursor: pointer; text-align: left; }
.ph-cell:hover { border-color: var(--primary, #b70037); }
.ph-cell img { width: 100%; height: 130px; object-fit: cover; display: block; background: #f2f2f5; }
.ph-cell span { display: block; padding: 6px 8px; font-size: 11.5px; color: var(--muted, #6a6b6d);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Поле дописывания под кнопками слайда */
.askbox { display: grid; gap: 8px; margin: 14px 0 6px;
  padding: 12px; border: 1px solid var(--line, #cbcfd6); border-radius: 10px;
  background: var(--bg-alt, #f2f2f5); }
.askbox .field { margin: 0; }
.askbox textarea { resize: vertical; }
.askbox .primary { justify-self: start; }
.askbox .hint { font-size: 12px; }

/* Подсказка о неподходящем макете: заметная, но не тревожная — это совет,
   а не ошибка. */
.fitline{border:1px solid var(--line);border-left:3px solid var(--primary);
  border-radius:8px;padding:12px 14px;margin:14px 0;background:var(--bg-soft,#f7f7f9)}
.fitline p{margin:0 0 6px}
.fitline .commands{margin:0}
.fitline .commands button{font-size:13px}

/* --------------------------------------------------------------- вход */
.gate{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;
  align-items:center;justify-content:center;padding:24px}
/* Без этого атрибут hidden не работает: display:flex выше правила браузера,
   и невидимый экран входа продолжает перехватывать нажатия. */
.gate[hidden]{display:none}
.gate-card{width:min(380px,100%);background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:12px}
.gate-card .logo{height:22px;align-self:flex-start}
.gate-card h1{font-size:20px;margin:4px 0 0}
.who{font-size:13px;color:var(--muted);white-space:nowrap}

/* ------------------------------------------------------------- очередь */
.jobs{margin-top:0}
.jobs h3{font-size:14px;margin:0 0 8px}
.jobs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.job{border:1px solid var(--line);border-radius:8px;padding:10px 12px;cursor:pointer;
  background:#fff}
.job:hover{border-color:var(--primary)}
.job-head{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.job .bar{height:4px;background:var(--line);border-radius:2px;margin:6px 0 4px;overflow:hidden}
.job .bar i{display:block;height:100%;background:var(--primary);transition:width .4s}
.job.is-done .bar i{background:#2f8f4e}
.job.is-error .bar i{background:#b70037}
.job .muted{font-size:12px}

/* -------------------------------------------------------------- админка */
.users{width:100%;border-collapse:collapse;font-size:14px}
.users th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;
  border-bottom:1px solid var(--line);padding:6px 8px 6px 0}
.users td{padding:8px 8px 8px 0;border-bottom:1px solid var(--line)}
.users tr.is-off td{opacity:.5}
.row-actions{display:flex;gap:10px;justify-content:flex-end}
.userform{display:grid;grid-template-columns:1fr 1fr 1fr auto auto;gap:8px;align-items:center}
.userform input,.userform select{padding:8px 10px;border:1px solid var(--line);border-radius:8px}
.jobs-all{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.jobs-all li{border-bottom:1px solid var(--line);padding:8px 0;cursor:pointer;font-size:14px;
  display:flex;justify-content:space-between;gap:12px}
.jobs-all li:hover b{color:var(--primary)}
@media (max-width:900px){.userform{grid-template-columns:1fr 1fr}}

/* ---------------------------------------------------- страница тестирования */
.runs-table td, .runs-table th{font-size:13px}
.runs-table .bad-cell{color:var(--primary);font-weight:600}
#runs h3{font-size:14px;margin:18px 0 6px}
#runs h3:first-child{margin-top:0}

/* Прогон идёт минутами: полоса и строка словами отвечают на «сколько ещё» без
   чтения таблицы. Закончившийся прогон красится зелёным — по цвету видно, что
   ждать больше нечего. */
.run-progress{margin:0 0 10px}
.run-progress .bar{height:5px;margin-bottom:4px}
.run-progress.is-done .bar i{background:#2f8f4e}
.run-progress .muted{font-size:12px}
.run-state{min-width:190px}
.run-state .bar-thin{height:4px;margin:0 0 3px}

/* ------------------------------------------------------- голосовой ввод */
.mic-wrap{position:relative;display:block}
/* Кнопка лежит поверх поля, поэтому текст в поле обязан заканчиваться до неё —
   иначе набранное уходит под микрофон и его не прочитать. */
.mic-wrap>input,.mic-wrap>textarea{padding-right:46px}
.mic{position:absolute;right:8px;bottom:8px;border:1px solid var(--line);
  background:#fff;border-radius:8px;width:30px;height:28px;cursor:pointer;
  font-size:14px;line-height:1;padding:0;opacity:.75}
.mic:hover{opacity:1;border-color:var(--primary)}
.mic.is-recording{background:var(--primary);border-color:var(--primary);
  color:#fff;animation:mic-pulse 1.1s ease-in-out infinite}
.mic-wrap input + .mic{bottom:50%;transform:translateY(50%)}
body.voice-off .mic{opacity:.4}
@keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(183,0,55,.45)}
  50%{box-shadow:0 0 0 6px rgba(183,0,55,0)}}

/* ========================================================= телефон ========
   Сервисом пользуются с телефона наравне с десктопом, поэтому мобильный вид —
   не уменьшенная копия, а другая раскладка тех же экранов. Ничего не спрятано:
   доступны все четыре шага, админка и тестирование.

   Три приёма по всему файлу ниже:
   · то, что на десктопе стоит в ряд, на телефоне встаёт в столбец;
   · длинные ряды (лента слайдов, вкладки шагов) прокручиваются вбок,
     а не переносятся и не жмутся;
   · широкие таблицы получают собственную прокрутку внутри .table-scroll,
     чтобы не растягивать страницу целиком. */

.burger{display:none}
.narrow-only{display:none}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Лента слайдов. Колонка превью встаёт под редактор уже на 1000 px (правило
   .slides-layout выше), и дальше вертикальный столбец карточек означает экран
   прокрутки до первого поля. Поэтому лента ложится набок. */
@media (max-width:1000px){
  .thumbs{
    flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden;
    gap:10px;padding:0 0 10px;scroll-snap-type:x proximity;
  }
  .thumb{flex:0 0 min(62%,240px);scroll-snap-align:center}
}

/* Шапка сворачивается раньше остальной вёрстки. Шесть кнопок справа перестают
   помещаться в ряд уже около 1100 px — и до появления кнопки меню именно они
   распирали страницу вширь на планшете в альбомной ориентации. */
@media (max-width:1100px){
  .top{position:sticky;top:0;z-index:10;height:52px;padding:0 12px;gap:10px}
  .brand{gap:10px;min-width:0}
  .product{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .burger{
    display:flex;flex-direction:column;justify-content:center;gap:4px;
    width:44px;height:44px;padding:0 10px;flex:none;
    background:var(--bg);border:1px solid var(--line);border-radius:8px;
  }
  .burger span{display:block;height:2px;background:var(--ink);border-radius:2px}
  .top.is-open .burger{border-color:var(--primary)}
  .top.is-open .burger span{background:var(--primary)}
  .top-right{
    display:none;position:absolute;right:8px;top:52px;z-index:15;
    flex-direction:column;align-items:stretch;gap:8px;width:min(280px,calc(100vw - 16px));
    padding:12px;background:var(--bg);border:1px solid var(--line);
    border-radius:var(--radius);box-shadow:0 12px 28px rgba(31,35,43,.18);
  }
  .top.is-open .top-right{display:flex}
  .top-right .ghost{width:100%;text-align:center;padding:11px 14px}
  .top-right .health,.top-right .who{text-align:center;white-space:normal}

  /* --- шаги: прокручиваются вбок, а не жмутся в четыре узкие колонки --- */
  .steps{
    position:sticky;top:52px;z-index:9;gap:0;padding:0 8px;
    overflow-x:auto;scrollbar-width:none;
  }
  .steps::-webkit-scrollbar{display:none}
  .step{padding:11px 12px 12px;font-size:14px;white-space:nowrap;flex:none}
}

@media (max-width:820px){
  .wide-only{display:none}
  .narrow-only{display:inline}
  .product{font-size:14px}

  /* --- общая плотность --- */
  main{padding:16px 12px 40px}
  /* Поле материала в четырнадцать строк — это целый экран телефона до первого
     параметра. Ниже оно всё равно тянется по мере набора. */
  #source-text{height:150px}
  .card{padding:14px}
  .card-head{flex-direction:column;align-items:stretch;gap:10px}
  .card-head .primary{width:100%}
  h2{font-size:16px}

  /* Safari увеличивает страницу при фокусе в поле мельче 16 px, и после ввода
     текста экран остаётся в зуме. Шестнадцать — это не про читаемость. */
  textarea,input,select{font-size:16px}
  /* Палец — не курсор: всё нажимаемое не мельче 44 px по высоте. */
  .primary,.ghost,.step,button.link{min-height:44px}
  .primary,.ghost{padding:11px 16px}
  .icon{width:44px;height:44px;font-size:16px}
  .mic{width:38px;height:34px;font-size:16px}
  .check input{width:20px;height:20px}

  /* --- план колоды: строка распадается на три яруса --- */
  .outline li{
    grid-template-columns:26px 1fr;
    grid-template-areas:"num title" "pick pick" "act act";
    gap:8px 10px;padding:10px;
  }
  .outline li>.num{grid-area:num;cursor:default}
  .outline li>:nth-child(2){grid-area:title;min-width:0}
  .outline li>.layout-pick{grid-area:pick}
  .outline li>.row-actions{grid-area:act}
  /* Перетаскивание пальцем браузер не отдаёт, поэтому порядок меняют
     стрелками — им и место, по трети ряда каждой. */
  .outline .row-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
  .outline .icon{width:100%}
  .lp-trigger{width:100%}

  /* --- редактор слайда --- */
  .editor .layout-side{align-items:stretch;width:100%}
  .editor .layout-side img{width:100%}
  .commands{gap:6px}
  .commands .ghost{flex:1 1 auto;min-width:calc(50% - 3px);padding:11px 10px;font-size:13px}
  .pair{grid-template-columns:1fr;gap:6px}
  .list-row{flex-wrap:wrap}
  .list-row input{flex:1 1 100%}

  /* --- окна поверх: на телефоне это отдельный экран, а не карточка --- */
  .lp-overlay{padding:0;align-items:stretch}
  .lp-panel{width:100%;max-width:none;max-height:none;height:100%;border-radius:0}
  .lp-head{position:sticky;top:0;z-index:1;background:var(--bg);
    flex-wrap:wrap;gap:8px;padding:12px 14px}
  .lp-head h2{font-size:16px}
  .lp-close{font-size:26px;padding:0 8px;min-height:0}
  .ib-search{order:3;flex-basis:100%;margin:0;min-width:0}
  .lp-body{padding:6px 14px 24px}
  .lp-grid,.ph-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .ph-cell img{height:100px}

  /* --- выгрузка, админка, тестирование --- */
  .export-row{flex-direction:column}
  .export-row button{width:100%}
  .userform{grid-template-columns:1fr}
  .userform button{min-height:44px}
  .table-scroll .users{min-width:520px}
  .runs-table{min-width:640px}
  .jobs-all li,.recent li,.versions li{flex-wrap:wrap}

  /* --- вход и прогресс --- */
  .gate{padding:16px}
  .gate-card{padding:20px}
  .progress-inner{min-width:0;width:min(340px,calc(100vw - 32px));padding:22px}
}

/* Самые узкие экраны: 360 px и уже. */
@media (max-width:400px){
  main{padding:14px 10px 36px}
  .card{padding:12px}
  .product{font-size:13px}
  .step{padding:11px 9px 12px;font-size:13px}
  .lp-grid,.ph-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .thumb{flex:0 0 78%}
}


/* --------------------------------------------------------- что нового */
.release{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.release:first-of-type{border-top:0;padding-top:6px}
.release-head{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.release-no{
  font-weight:700;font-size:15px;color:var(--primary);background:var(--bg-soft);
  border:1px solid var(--line);border-radius:20px;padding:3px 10px;white-space:nowrap;
}
.release.is-current .release-no{color:#fff;background:var(--primary);border-color:var(--primary)}
.release-head h3{margin:0;font-size:15px;color:var(--ink)}
.release-head .hint{margin:2px 0 0}
.changes{list-style:none;margin:12px 0 0;padding:0}
.changes li{padding:10px 0;border-top:1px dashed var(--line)}
.changes li:first-child{border-top:0}
.changes b{font-weight:700}
.changes p{margin:4px 0 0;color:var(--ink-soft);font-size:14px}
/* Дата справа от заголовка: глаз читает сначала что, потом когда. */
.changes .when{float:right;color:var(--muted);font-size:12px;margin-left:12px}
.changes.planned .when{color:var(--warn)}

@media (max-width:720px){
  .changes .when{float:none;display:block;margin:2px 0 0}
}


/* ------------------------------------------------- исходные данные колоды */
/* Материал показываем как есть: переводы строк и отступы автора — часть
   структуры, по ней конвейер и строил план. */
.source-text{
  margin:0;padding:12px 14px;max-height:340px;overflow:auto;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;
  font:13px/1.5 "PT Sans","Segoe UI",Arial,sans-serif;white-space:pre-wrap;
  word-break:break-word;color:var(--ink-soft);
}
/* Пометка в заголовке — не часть заголовка: она поясняет, что за текст ниже,
   и жирным спорит с ним за внимание. */
.source-note{font-weight:400;color:var(--muted)}
.source-files{margin-bottom:14px}
.source-files a{color:var(--primary);text-decoration:none}
.source-files a:hover{text-decoration:underline}
.source-files li{display:flex;justify-content:space-between;gap:12px}
h3 a{font-weight:400;font-size:13px;color:var(--primary);margin-left:8px}

/* ------------------------------------------------- варианты полей брифа */
/* Варианты — это предложение, а не выбор из списка: одно уже стоит в поле,
   остальные лежат рядом и подставляются нажатием. Поэтому не select. */
.variants{display:flex;flex-wrap:wrap;gap:6px;margin:-6px 0 12px}
.variants:empty{margin:0}
.variants button{
  border:1px dashed var(--line);background:var(--bg-soft);color:var(--ink-soft);
  font:inherit;font-size:12px;line-height:1.3;padding:5px 9px;border-radius:14px;
  cursor:pointer;text-align:left;max-width:100%;
}
.variants button:hover{border-style:solid;border-color:var(--primary);color:var(--primary)}
#brief-note{color:var(--warn)}

/* ------------------------------------------------------- полоса статуса */
/* Одна строка на всех экранах: что собирается прямо сейчас. Готовое сюда не
   попадает — «готово» под заголовком «В работе» это и есть враньё статуса. */
.work{
  display:flex;align-items:center;gap:14px;
  padding:9px 24px;background:var(--bg);border-bottom:1px solid var(--line);
}
.work-body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:0 1 auto}
.work-body b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work-body .muted{font-size:12px}
.work-bar{flex:1 1 auto;min-width:80px;height:4px;background:var(--bg-alt);border-radius:2px;overflow:hidden}
.work-bar i{display:block;height:100%;background:var(--primary);transition:width .4s}
.work.is-done .work-bar i{background:var(--ok)}
.work-dot{
  width:9px;height:9px;border-radius:50%;background:var(--primary);flex:none;
  animation:work-pulse 1.4s ease-in-out infinite;
}
.work.is-done .work-dot{background:var(--ok);animation:none}
@keyframes work-pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (max-width:720px){
  .work{padding:8px 14px;gap:10px}
  .work-body b{max-width:44vw}
}

/* --------------------------------------------------------- параметры */
/* Настройки лежат сеткой, а не столбиком: семь узких селектов в колонку
   вытягивали страницу вниз и оставляли рядом с брифом пустое поле в
   пол-экрана. Сколько влезет в ряд — столько и встанет. */
.params{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:0 18px}
.params .check{grid-column:1/-1;margin-top:4px}
/* Кнопки в одну строку и справа: «построить план» — конец разговора на этой
   странице, и стоять он должен там, куда глаз приходит последним. */
.actions{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.actions .hint{margin:0;flex:1 1 240px}
.actions button{white-space:nowrap}
@media (max-width:560px){
  .actions{flex-direction:column;align-items:stretch}
  .actions button{width:100%}
}

/* ------------------------------------------------- предложение агента формы */
.lp-agent{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 10px}
.lp-agent .hint{margin:0;flex:1 1 240px}
#visual-proposal:not(:empty){
  border-top:1px solid var(--line);margin-top:12px;padding-top:12px;
}
/* Превью — то, что человек акцептует. Показываем его крупно: решение
   принимается по картинке, а не по названию формы. */
.visual-preview{
  display:block;width:100%;max-width:560px;margin:10px 0;
  border:1px solid var(--line);border-radius:8px;
}

/* Подпись под надиктованным полем: что поправила модель и как вернуть речь. */
.mic-note{margin:4px 0 0;font-size:12px}
.mic-note .link{font-size:12px}

/* --------------------------------------- отчёт о правке слайда по указанию */
.editlog{margin-top:10px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;background:#fbfbfc;font-size:13px}
.editlog.none{border-color:var(--primary)}
.editlog p{margin:0 0 6px}
.edit-cmd{color:var(--muted)}
.edit-claim{color:var(--muted);font-style:italic}
.edit-rows{margin:0;padding-left:18px}
.edit-rows li{margin-bottom:8px}
.edit-was{color:var(--muted);text-decoration:line-through}
.edit-now{color:var(--ink)}

/* Полоса «интерфейс из кеша». Внизу и поперёк: пропустить её нельзя, а
   работе она не мешает — перезагружает человек, когда ему удобно. */
.stale{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px;
  background:var(--primary);color:#fff;font-size:13px;text-align:center}
.stale .link{color:#fff;text-decoration:underline;font-size:13px}

/* Зона импорта курса. Отделена линией: это другой вход, а не продолжение
   списка файлов материала. */
.course{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.course h3{margin:0 0 4px;font-size:14px}
.course .hint{margin-top:0}
#course-status.bad{color:var(--primary)}