/* ═══ Палитра «Тихая студия» ═══
   ⚠️ ЛЕСТНИЦА СЕРОГО ПОДНЯТА ЦЕЛИКОМ, А НЕ ПО ОДНОЙ СТУПЕНИ.
   `--faint` был #5E6B7A: 3.41 к фону, 2.88 на плашке — ниже нормы AA (4.5),
   и стоял он на самых мелких кеглях продукта (9–12.5px). То есть самый
   нечитаемый цвет держал подсказки полей, лейблы дорожек, весь медиаплан и
   метаданные — весь объясняющий слой интерфейса.

   Поднять один `--faint` было нельзя: разрыв с `--muted` схлопывался с 2.21×
   до 1.32×, и три ступени «главное / второстепенное / пояснение» становились
   двумя. Поэтому вверх сдвинуты ОБА: 5.41 и 8.70 к фону, шаг между ними 1.73×.
   Тон не менялся — те же серо-синие, вся лестница просто светлее.

   `--faint-2` — прежнее значение. Оно осталось ровно там, где приглушённость
   и есть смысл: выключенная кнопка обязана выглядеть выключенной, и норма
   контраста на неактивные контролы не распространяется. */
:root{
  --bg:#0F1418; --surface:#161C22; --raised:#1C242C; --high:#232C36;
  --line:#26303A; --line2:#36424F;
  --text:#E9EEF3; --muted:#A8B3BF; --faint:#808C9A; --faint-2:#5E6B7A;
  --ac:#57A99A; --ac-hi:#6DC0B0; --ac-dk:#2C6156; --ac-gl:rgba(87,169,154,.13);
  --sand:#D9B98C; --sand-dk:#8A7550;
  --ok:#6FBF8E; --warn:#D9A85C; --dg:#CE7A72;
  --fd:'Onest','Noto Sans SC',system-ui,sans-serif;
  --fb:'IBM Plex Sans','Noto Sans SC',system-ui,sans-serif;
  --fm:'IBM Plex Mono',ui-monospace,monospace;

  /* ═══ ШКАЛЫ ═══
     Собраны 2026-08-26 по факту: в файле лежало 51 значение отступа,
     31 кегль и 28 радиусов — то есть шкалы не было вовсе, каждое число
     подбиралось на глаз в своём месте. Системность глаз читает как «дорого»
     даже не осознавая её, поэтому здесь она заводится явно.

     ⚠️ ПЕРЕХОД ИДЁТ ПО КОМПОНЕНТАМ, А НЕ ОДНОЙ ПАЧКОЙ. Переписать разом сто
     тридцать объявлений — способ сломать вёрстку так, что причину потом не
     найти. `--r` и `--r2` оставлены псевдонимами на ступени шкалы: старые
     правила продолжают работать и переезжают по очереди.

     Ступени подобраны ВОКРУГ УЖЕ СУЩЕСТВУЮЩИХ значений — каждое сдвигается
     не больше чем на пиксель. Это не новый вид, а тот же, но воспроизводимый. */

  /* отступы: 2 — волосок между плотными строками, дальше почти вдвое */
  --sp-0:2px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* кегли: 15 — основной текст, 11 — мелкая метка, 34 — заголовок экрана.
     Ступени стоят так, чтобы ни одно живое значение не сдвинулось больше чем
     на пиксель: 14.5 → 15, 13.5 → 13, 12.5 → 12, 10.5 → 11, 16 → 15, 18 → 17. */
  --fs-1:11px; --fs-2:12px; --fs-3:13px; --fs-4:15px;
  --fs-5:17px; --fs-6:21px; --fs-7:26px; --fs-8:34px;

  /* радиусы: 6 — мелкое, 10 — контролы, 16 — панели, 999 — пилюля.
     `50%` в шкалу не входит: круг — это не ступень, а форма. */
  --rad-1:6px; --rad-2:10px; --rad-3:16px; --rad-4:999px;
  --r:var(--rad-2); --r2:var(--rad-3);   /* псевдонимы на время перехода */

  /* чернила и затемнения: было семь разных «почти чёрных» на одну задачу */
  --ink:#08110F;
  --scrim-1:rgba(8,11,14,.55); --scrim-2:rgba(8,11,14,.78); --scrim-3:rgba(8,11,14,.93);

  --pad:clamp(17px,3.4vw,54px); --top:62px;
  --rail:244px;  /* панель проектов слева от рабочего стола */
  --d:170ms; --e:cubic-bezier(.4,0,.2,1);
  --sb:#2A3540; --sb-hi:#3D4B58;   /* ползунок прокрутки и он же под курсором */
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--sp-8);overflow-x:hidden}

/* ═══ Полосы прокрутки ═══
   Свои, но без единой строки JS: только CSS, поэтому вес нулевой, а инерция,
   колесо и клавиатура остаются нативными. Правило одно на обе оси и на все
   вложенные панели — задан и width, и height, иначе горизонтальная полоса
   осталась бы системной.

   Firefox понимает только `scrollbar-width/color`; они наследуются, поэтому
   стоят на html и покрывают вложенные скроллеры. Там, где полосу прячут
   намеренно (ленты со свайпом), стоит `scrollbar-width:none` — это не
   исключение из правила, а осознанное «полосы нет». */
html{scrollbar-width:thin;scrollbar-color:var(--sb) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background-color:var(--sb);background-clip:content-box;
  border:3px solid transparent;border-radius:var(--rad-2)}
::-webkit-scrollbar-thumb:hover{background-color:var(--sb-hi)}
::-webkit-scrollbar-thumb:active{background-color:var(--ac-dk)}
::-webkit-scrollbar-corner{background:transparent}
/* узкие списки: в раскрытом списке и в панели шапки полоса тоньше */
.sel-l::-webkit-scrollbar,.pop-list::-webkit-scrollbar,.ctx::-webkit-scrollbar{width:8px;height:8px}
.sel-l::-webkit-scrollbar-thumb,.pop-list::-webkit-scrollbar-thumb,.ctx::-webkit-scrollbar-thumb{border-width:2px}
/* overflow-x на body ломает position:sticky (body становится скроллером), а
   горизонтальный клип и так делает html — он и есть вьюпорт-скроллер. */
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--fb);font-size:var(--fs-4);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-family:var(--fd);font-weight:600;text-wrap:balance;line-height:1.18;letter-spacing:-.015em}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;text-align:left}
a{color:var(--ac);text-decoration:none}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:var(--rad-1)}
input,textarea{font:inherit}
.mono{font-family:var(--fm);font-variant-numeric:tabular-nums}
.hide{display:none !important}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-5);border-radius:var(--rad-2);
  font-family:var(--fd);font-weight:600;font-size:var(--fs-4);min-height:44px;white-space:nowrap;
  transition:all var(--d) var(--e)}
.btn-p{background:var(--ac);color:var(--ink)}
.btn-p:hover{background:var(--ac-hi);transform:translateY(-1px)}
.btn-p:active{transform:scale(.98)}
.btn-s{border:1px solid var(--line2);color:var(--text)}
.btn-s:hover{border-color:var(--muted);background:var(--surface)}
.btn-g{color:var(--muted)}
.btn-g:hover{color:var(--text);background:var(--surface)}
/* Выключенная кнопка держится на `--faint-2`: это единственное место, где
   приглушённость — не оформление, а сообщение «нажимать нечего». Подними её
   вместе со всей лестницей — и «Запустить генерацию» стала бы выглядеть
   доступной, пока таковой не является. */
.btn[disabled]{background:var(--raised);color:var(--faint-2);cursor:not-allowed;transform:none;border-color:var(--line)}
.btn-sm{padding:var(--sp-2) var(--sp-3);min-height:37px;font-size:var(--fs-3)}
.btn-lg{padding:var(--sp-4) var(--sp-6);min-height:54px;font-size:var(--fs-5)}

/* ═══ Шапка ═══ */
.top{position:fixed;inset:0 0 auto;height:var(--top);z-index:80;display:flex;align-items:center;gap:var(--sp-2);
  padding:0 var(--pad);background:rgba(15,20,24,.93);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.lg{display:flex;align-items:center;gap:var(--sp-2);margin-right:var(--sp-4);flex:none}
.lg .tx{font-family:var(--fd);font-weight:700;font-size:var(--fs-4);letter-spacing:.01em;white-space:nowrap}
.lg .tx i{font-style:normal;color:var(--ac)}
.nav{display:flex;gap:var(--sp-0);overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav button{padding:var(--sp-2) var(--sp-3);border-radius:var(--rad-2);font-size:var(--fs-4);color:var(--muted);
  white-space:nowrap;transition:all var(--d) var(--e)}
.nav button:hover{color:var(--text);background:var(--surface)}
.nav button.on{color:var(--text);background:var(--raised)}
.tr{margin-left:auto;display:flex;gap:var(--sp-1);align-items:center;flex:none}
.ic{width:39px;height:39px;border-radius:var(--rad-2);display:grid;place-items:center;color:var(--muted);position:relative;
  transition:all var(--d) var(--e);flex:none}
.ic:hover{color:var(--text);background:var(--surface)}
.ic .dot{position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--sand);
  border:2px solid var(--bg)}
.avw{position:relative;width:39px;height:39px;flex:none}
.avw svg{position:absolute;inset:0;transform:rotate(-90deg)}
.av{position:absolute;inset:var(--sp-1);border-radius:50%;display:grid;place-items:center;font-family:var(--fd);
  font-weight:600;font-size:var(--fs-3);background:var(--ac);color:var(--ink)}

/* всплывающие панели */
.pop{position:fixed;top:calc(var(--top) + 6px);right:var(--pad);width:310px;background:var(--surface);
  border:1px solid var(--line2);border-radius:var(--rad-3);padding:var(--sp-2);z-index:92;display:none;
  box-shadow:0 20px 50px var(--scrim-2)}
.pop.on{display:block;animation:pd .16s var(--e)}
@keyframes pd{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pop-h{padding:var(--sp-3) var(--sp-3) var(--sp-2);border-bottom:1px solid var(--line);margin-bottom:var(--sp-1)}
.pop-h .n{font-family:var(--fd);font-weight:600;font-size:var(--fs-4)}
.pop-h .e{font-size:var(--fs-2);color:var(--faint);font-family:var(--fm);word-break:break-all}
.pop-i{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-3);border-radius:var(--rad-2);
  font-size:var(--fs-4);color:var(--muted);transition:background var(--d) var(--e)}
.pop-i:hover{background:var(--raised);color:var(--text)}
.pop-i.on{background:var(--ac-gl);color:var(--ac)}
.pop-i .r{margin-left:auto;font-family:var(--fm);font-size:var(--fs-2);color:var(--faint)}
.pop-bal{margin:var(--sp-1) 0 var(--sp-2);padding:var(--sp-3);background:var(--raised);border-radius:var(--rad-2)}
.pop-bal .k{font-size:var(--fs-2);color:var(--faint)}
.pop-bal .v{font-family:var(--fm);font-size:var(--fs-7);font-weight:500;color:var(--ac);margin:var(--sp-0) 0 var(--sp-2)}
.bar{height:4px;border-radius:var(--rad-1);background:var(--high);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ac);border-radius:var(--rad-1)}
.sep{height:1px;background:var(--line);margin:var(--sp-1)}
.srch{width:100%;padding:var(--sp-2) var(--sp-3);border:1px solid var(--line2);border-radius:var(--rad-2);
  background:var(--bg);color:var(--text);font-size:var(--fs-4);margin-bottom:var(--sp-1)}
.srch:focus{outline:none;border-color:var(--ac)}
.pop-list{max-height:280px;overflow-y:auto}

/* ═══ Каркас ═══ */
.wrap{padding-top:var(--top)}
.screen{display:none}
.screen.on{display:block;animation:fade .26s var(--e)}
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.sec{padding:clamp(34px,5vw,64px) var(--pad);max-width:1300px;margin:0 auto}
/* главная идёт во всю ширину экрана — ряд форматов, шаги и витрина тянутся вместе с ней */
#s-home .sec{max-width:none;margin:0}
.sh{margin-bottom:var(--sp-5)}
.sh .lb{font-family:var(--fm);font-size:var(--fs-2);letter-spacing:.14em;text-transform:uppercase;color:var(--ac);
  margin-bottom:var(--sp-2);display:block}
.sh h2{font-size:clamp(24px,3.3vw,37px);font-weight:700}
.sh p{color:var(--muted);font-size:var(--fs-4);margin-top:var(--sp-2);max-width:60ch}
/* заголовок в две колонки — подпись уходит вправо и забирает пустую ширину */
.sh.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,32%);gap:var(--sp-5) var(--sp-7);align-items:end}
.sh.split>p{margin:0 0 var(--sp-0);max-width:46ch}

/* ═══ Герой ═══ */
.hero{position:relative;overflow:hidden;padding:clamp(50px,8vw,104px) var(--pad) clamp(34px,4vw,56px);text-align:center;
  border-bottom:1px solid var(--line)}
.hero::before{content:'';position:absolute;inset:-60% 20% 20%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(87,169,154,.16),rgba(217,185,140,.05) 40%,transparent 66%);filter:blur(40px)}
.hero>*{position:relative}
.hero h1{font-size:clamp(35px,6.6vw,70px);font-weight:700;letter-spacing:-.035em;line-height:1.04;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--ac)}
.hero .ld{color:var(--muted);font-size:clamp(15.5px,1.55vw,18.5px);max-width:52ch;margin:0 auto 28px}
.hcta{display:flex;gap:var(--sp-2);justify-content:center;flex-wrap:wrap}

/* ═══ Ряд форматов — во всю ширину, без карточек ═══ */
.frail{position:relative}
.frow{display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr 1.2fr;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fc{position:relative;display:flex;flex-direction:column;align-items:stretch;width:100%;overflow:hidden;
  padding:var(--sp-6) var(--sp-5) var(--sp-6);background:none;transition:background var(--d) var(--e)}
.fc + .fc{border-left:1px solid var(--line)}
/* акцентная линия сверху — вместо рамки карточки */
.fc::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--c,var(--ac));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--e)}
@media (hover:hover){                    /* на тач-экранах hover не «залипает» */
  .fc:hover{background:var(--surface)}
  .fc:hover::after{transform:scaleX(1)}
  .fc:hover .fnum{color:var(--c,var(--ac))}
  .fc:hover .fi{transform:translateY(-2px);opacity:1}
  .fc:hover .fb p{color:var(--muted)}
}
.fc:active::after,.fc:focus-visible::after{transform:scaleX(1)}
.fc:focus-visible{outline:2px solid var(--c,var(--ac));outline-offset:-3px;border-radius:0}
.fc.dive{animation:dive .3s var(--e) forwards}
@keyframes dive{to{transform:scale(1.04);opacity:0}}
.fnum{display:block;font-family:var(--fm);font-size:var(--fs-1);letter-spacing:.16em;color:var(--faint);
  margin-bottom:var(--sp-5);transition:color var(--d) var(--e)}
.fi{display:flex;align-items:flex-end;height:54px;margin-bottom:var(--sp-4);opacity:.9;
  transition:transform var(--d) var(--e),opacity var(--d) var(--e)}
.fi svg{width:auto;height:100%;max-width:100%}
.fb h3{font-size:var(--fs-4);font-weight:600;margin-bottom:var(--sp-1)}
.fb p{color:var(--faint);font-size:var(--fs-3);line-height:1.45}
.fc:first-child .fb h3{font-size:var(--fs-6)}

/* ═══ Процесс: список шагов слева, видоискатель справа ═══ */
.pr-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(22px,3vw,52px);align-items:stretch}

.pr-steps{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.pr-step{flex:1}
.pr-step{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-3);align-items:baseline;align-content:center;
  width:100%;padding:var(--sp-4) var(--sp-1) var(--sp-4) 0;border-bottom:1px solid var(--line);
  transition:padding-left .3s var(--e)}
/* отметка активного шага — вертикальный штрих, а не заливка */
.pr-step::before{content:'';position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--ac);
  transform:scaleY(0);transform-origin:top;transition:transform .35s var(--e)}
.pr-step[aria-selected="true"]{padding-left:var(--sp-4)}
.pr-step[aria-selected="true"]::before{transform:scaleY(1)}
.pr-step:focus-visible{outline:2px solid var(--ac);outline-offset:-2px;border-radius:var(--rad-1)}
.pr-num{font-size:var(--fs-1);letter-spacing:.12em;color:var(--faint);transition:color var(--d) var(--e)}
.pr-step[aria-selected="true"] .pr-num{color:var(--ac)}
.pr-name{display:block;font-family:var(--fd);font-size:var(--fs-5);font-weight:600;letter-spacing:-.01em;margin-bottom:var(--sp-1)}
.pr-hint{display:block;font-size:var(--fs-3);line-height:1.45;color:var(--muted)}
.pr-by{font-size:var(--fs-1);color:var(--faint);white-space:nowrap}

/* ── кадр ── */
.pr-stage{position:relative}
.pr-frame{position:relative;container-type:inline-size;aspect-ratio:16/10;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r2);overflow:hidden}
.pr-corner{position:absolute;width:18px;height:18px;border:1.5px solid var(--ac);opacity:.4;z-index:4;pointer-events:none}
.pr-corner.tl{top:12px;left:12px;border-right:0;border-bottom:0}
.pr-corner.tr{top:12px;right:12px;border-left:0;border-bottom:0}
.pr-corner.bl{bottom:12px;left:12px;border-right:0;border-top:0}
.pr-corner.br{bottom:12px;right:12px;border-left:0;border-top:0}
.pr-hud{position:absolute;left:17px;bottom:15px;z-index:5;font-size:clamp(9.5px,1.5cqw,12px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ac);opacity:.85}
.pr-tag{position:absolute;right:17px;top:15px;z-index:5;font-size:clamp(9.5px,1.5cqw,12px);letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:var(--sp-1)}
.pr-tag i{width:5px;height:5px;border-radius:50%;background:var(--dg);animation:prBlink 1.4s steps(2,end) infinite}
@keyframes prBlink{50%{opacity:.2}}

.pr-pane{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(9px,1.7cqw,14px);padding:clamp(24px,4cqw,36px) clamp(14px,3cqw,26px) clamp(28px,5cqw,42px);
  opacity:0;visibility:hidden;transition:opacity .32s var(--e),visibility .32s}
.pr-pane.is-on{opacity:1;visibility:visible}
.pr-cap{text-align:center;font-size:clamp(10px,1.9cqw,15px);letter-spacing:.03em;color:var(--faint);margin:0}
.pr-cap b{color:var(--ac);font-weight:400}

/* 01 — бриф */
.pr-form{display:flex;flex-direction:column;gap:clamp(7px,1.3cqw,13px);width:min(80%,560px);margin:0 auto}
.pr-row{display:flex;justify-content:space-between;gap:var(--sp-3);font-size:clamp(11px,2.25cqw,17px);
  padding-bottom:clamp(6px,1.1cqw,11px);border-bottom:1px dashed var(--line2);opacity:0}
.pr-row span:first-child{color:var(--faint)}
.pr-pane.is-on .pr-row{animation:prIn .34s var(--e) forwards;animation-delay:calc(var(--i)*.11s + .08s)}
@keyframes prIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* 02 — референсы */
.pr-sheet{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,1.6cqw,12px);width:min(84%,620px);margin:0 auto}
.pr-thumb{aspect-ratio:1;border-radius:clamp(6px,1.2cqw,9px);border:1px solid var(--line2);opacity:0;transform:scale(.9);
  background:linear-gradient(140deg,var(--raised),var(--bg))}
.pr-thumb:nth-child(3n){background:linear-gradient(140deg,#243230,#141B21)}
.pr-thumb:nth-child(4n){background:linear-gradient(140deg,#2A2620,#141B21)}
.pr-pane.is-on .pr-thumb{animation:prPop .3s cubic-bezier(.34,1.4,.64,1) forwards;animation-delay:calc(var(--i)*.045s + .06s)}
@keyframes prPop{to{opacity:1;transform:none}}

/* 03 — генерация */
.pr-shot{position:relative;width:min(82%,600px);margin:0 auto;aspect-ratio:16/8;border-radius:clamp(8px,1.5cqw,12px);overflow:hidden;
  border:1px solid var(--line2);display:flex;align-items:flex-end;justify-content:center;
  background:radial-gradient(120% 90% at 50% 22%,#1E3830 0%,#141B21 58%,#0F1418 100%)}
.pr-horizon{position:absolute;left:0;right:0;top:58%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(87,169,154,.45),transparent)}
.pr-sub{position:relative;margin-bottom:clamp(10px,2cqw,17px);font-size:clamp(11px,2.4cqw,18px);font-weight:600;
  background:rgba(8,12,15,.72);padding:clamp(3px,.7cqw,6px) clamp(8px,1.5cqw,14px);border-radius:5px;opacity:0}
.pr-pane.is-on .pr-sub{animation:prIn .4s var(--e) .45s forwards}
.pr-wave{display:flex;align-items:center;justify-content:center;gap:clamp(3px,.5cqw,4px);height:clamp(22px,5cqw,38px)}
.pr-wave i{width:clamp(2px,.4cqw,3px);height:20%;border-radius:2px;background:var(--ac);opacity:.5}
.pr-pane.is-on .pr-wave i{animation:prWave 1.1s var(--e) infinite alternate;animation-delay:calc(var(--i)*.055s)}
@keyframes prWave{to{height:92%;opacity:.9}}

/* 04 — правки */
.pr-tl{display:flex;gap:clamp(4px,.9cqw,7px);width:min(86%,650px);margin:0 auto}
.pr-clip{height:clamp(30px,11cqw,82px);min-width:9px;border-radius:clamp(5px,1cqw,7px);background:var(--raised);border:1px solid var(--line2)}
.pr-clip.sel{border:1px dashed var(--ac);background:var(--ac-gl)}
.pr-pane.is-on .pr-clip.sel{animation:prPulse 1.8s var(--e) infinite}
@keyframes prPulse{50%{background:rgba(87,169,154,.22)}}

/* ═══ Конструктор: рабочий стол в две колонки ═══ */
.wk{display:grid;grid-template-columns:var(--rail) minmax(0,1fr) minmax(390px,29vw);
  /* строка ровно в высоту экрана: иначе колонки растут по содержимому и уводят
     поле ввода и кнопку запуска за нижний край */
  grid-template-rows:minmax(0,1fr);height:calc(100vh - var(--top))}
.wk-l{display:flex;flex-direction:column;min-width:0;background:var(--bg)}
/* разговор идёт без правой панели: медиаплан — язык режима «Настрою сам» */
.wk-solo{grid-template-columns:var(--rail) minmax(0,1fr)}

/* ── панель проектов ── */
.rail{display:flex;flex-direction:column;min-width:0;background:var(--surface);
  border-right:1px solid var(--line)}
.rail-new{display:flex;align-items:center;gap:var(--sp-2);flex:none;margin:var(--sp-3) var(--sp-3) var(--sp-2);padding:var(--sp-2) var(--sp-3);
  border:1px dashed var(--line2);border-radius:var(--rad-2);color:var(--muted);
  font-family:var(--fd);font-weight:600;font-size:var(--fs-3);
  transition:color var(--d) var(--e),border-color var(--d) var(--e),background var(--d) var(--e)}
.rail-new:hover{color:var(--ac);border-color:var(--ac-dk);background:var(--ac-gl)}
.rail-l{flex:1;min-height:0;overflow-y:auto;padding:0 var(--sp-2) var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-0)}
.rail-i{display:flex;align-items:center;border-radius:var(--rad-2);transition:background var(--d) var(--e)}
.rail-i:hover{background:var(--raised)}
.rail-i.on{background:var(--high)}
.rail-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-0);padding:var(--sp-2) var(--sp-1) var(--sp-2) var(--sp-2);text-align:left}
.rail-n{font-size:var(--fs-3);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-i.on .rail-n{color:var(--text)}
.rail-m{font-size:var(--fs-1);letter-spacing:.04em;color:var(--faint);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* крестик появляется под курсором: постоянный, он превращал бы список в
   двадцать кнопок удаления */
.rail-x{width:26px;height:26px;margin-right:var(--sp-1);border-radius:var(--rad-1);flex:none;display:grid;place-items:center;
  color:var(--faint);opacity:0;transition:opacity var(--d) var(--e),color var(--d) var(--e),
  background var(--d) var(--e)}
.rail-i:hover .rail-x,.rail-i.on .rail-x{opacity:1}
.rail-x:hover{background:var(--line2);color:var(--dg)}

.wk-h{display:flex;align-items:center;gap:var(--sp-3);flex:none;padding:var(--sp-3) var(--pad);border-bottom:1px solid var(--line)}
.wk-ic{width:44px;height:44px;border-radius:var(--rad-2);display:grid;place-items:center;flex:none;overflow:hidden;
  background:linear-gradient(150deg,var(--c1,#1D262E),var(--c2,#141B21));border:1px solid var(--line2)}
.wk-ic svg{width:34px;height:27px}
.wk-hn{display:flex;flex-direction:column;gap:var(--sp-0);min-width:0;flex:1}
.wk-hn b{font-family:var(--fd);font-size:var(--fs-4);font-weight:600;letter-spacing:-.015em}
.wk-hn i{font-style:normal;font-size:var(--fs-2);color:var(--faint)}

.wk-m{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;flex:none;padding:var(--sp-3) var(--pad) var(--sp-1)}
.wk-m .seg{border:0;background:var(--raised);border-radius:var(--rad-2);padding:var(--sp-0);gap:var(--sp-0)}
/* выбранный режим — подсвеченным текстом, а не постоянной плашкой: плашка
   читается как приподнятая кнопка и спорит с остальным интерфейсом */
.wk-m .seg button{flex:0 0 auto;white-space:nowrap;border:0;border-radius:var(--rad-1);padding:var(--sp-2) var(--sp-4);
  background:none;color:var(--faint);font-family:var(--fd);font-weight:600;font-size:var(--fs-3)}
.wk-m .seg button:hover{background:none;color:var(--muted)}
.wk-m .seg button.on{background:none;color:var(--ac)}
.wk-mh{font-size:var(--fs-2);color:var(--faint)}

/* форма внутри рабочего стола: секции без карточек, заголовок липнет */
.wk-form{flex:1;min-height:0;overflow-y:auto;padding:0 var(--pad) var(--sp-7)}
.wk-form .sect{background:none;border:0;border-radius:0;padding:0;margin-bottom:var(--sp-6);max-width:980px}
.wk-form .sect-h{position:sticky;top:0;z-index:4;background:var(--bg);
  padding:var(--sp-4) 0 var(--sp-3);margin-bottom:var(--sp-4)}
.fld.hi{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-gl)}

/* ── разговор ── */
/* Лента прокручивается во всю ширину колонки, а содержимое держится в узкой
   мере: строка шире 730px перестаёт читаться, а полоса прокрутки, прижатая к
   тексту, читается как рамка. */
.chat{flex:1;min-height:0;overflow-y:auto;padding:var(--sp-4) var(--pad) var(--sp-3);display:flex;flex-direction:column}
/* лента растёт снизу вверх: короткий разговор жмётся к полю ввода, а не висит
   под шапкой над экраном пустоты */
.chat-in{margin:auto 0 0;display:flex;flex-direction:column;gap:var(--sp-4)}

/* ширину держит САМА РЕПЛИКА, а не колонка: лента занимает весь стол, но строка
   длиннее ~78 знаков перестаёт читаться — глаз теряет начало следующей */
.ms{display:flex;gap:var(--sp-3);max-width:min(78ch,100%)}
.ms-a{width:24px;height:24px;border-radius:var(--rad-1);flex:none;margin-top:var(--sp-0);display:grid;place-items:center;
  background:linear-gradient(150deg,var(--high),var(--surface))}
.ms-a::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--ac);
  box-shadow:0 0 0 3px var(--ac-gl)}
.ms-t{font-size:var(--fs-4);line-height:1.62;min-width:0}
.ms-t small{display:block;font-size:var(--fs-2);color:var(--faint);margin-top:var(--sp-1);line-height:1.5}
.ms.me{align-self:flex-end;max-width:min(560px,88%)}
/* пузырь без рамки: у реплики человека и так есть фон, обводка делала её тяжелее
   собственного текста */
.ms.me .ms-t{background:var(--raised);border-radius:var(--rad-3) var(--rad-3) var(--rad-1) var(--rad-3);
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-4)}

/* ⚠️ ВХОД АНИМИРУЮТ ТОЛЬКО НОВЫЕ РЕПЛИКИ (`.ms-an`). Экран перерисовывается
   целиком, и анимация на `.ms` заставляла бы всю ленту вспыхивать на каждый
   клик — движение вместо смысла. */
.ms-an{animation:msIn .34s var(--e) both}
@keyframes msIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* мастер отвечает: слова проявляются по очереди, высота реплики известна сразу */
.w{display:inline-block;opacity:0;filter:blur(5px);transform:translateY(3px);
  animation:wIn .44s var(--e) forwards;animation-delay:calc(var(--i)*44ms)}
@keyframes wIn{to{opacity:1;filter:none;transform:none}}
.cur{display:inline-block;width:2px;height:.95em;vertical-align:-1px;margin-left:var(--sp-0);border-radius:var(--rad-1);
  background:var(--ac);animation:blink .9s steps(2,end) infinite,
  curOff .01s linear calc(var(--n)*44ms + 300ms) forwards}
@keyframes blink{50%{opacity:.15}}
@keyframes curOff{to{opacity:0;width:0;margin:0}}
.ms-an .ms-t small{opacity:0;animation:wIn .42s var(--e) calc(var(--n)*44ms + 200ms) forwards}

.ms-think{display:flex;align-items:center;gap:var(--sp-1);height:26px;margin-left:var(--sp-6);animation:msIn .3s var(--e) both}
.ms-think i{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.32;
  animation:think 1.25s var(--e) infinite}
.ms-think i:nth-child(2){animation-delay:.16s}
.ms-think i:nth-child(3){animation-delay:.32s}
@keyframes think{30%{opacity:1;transform:translateY(-4px) scale(1.14)}}

/* варианты ответа — пилюли по краю, а не плашки: это продолжение реплики,
   а не панель управления */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-left:var(--sp-6)}
.chip{padding:var(--sp-2) var(--sp-4);border-radius:var(--rad-3);background:none;border:1px solid var(--line2);
  font-size:var(--fs-3);color:var(--muted);animation:chipIn .4s var(--e) both;
  animation-delay:calc(var(--i)*60ms + 110ms);
  transition:color .2s var(--e),border-color .2s var(--e),background .2s var(--e),transform .2s var(--e)}
.chip:hover{color:var(--ac);border-color:var(--ac-dk);background:var(--ac-gl);transform:translateY(-1px)}
.chip:active{transform:translateY(0) scale(.98)}
@keyframes chipIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* ── начало разговора ──
   Лента растёт снизу вверх, и до первой фразы это оборачивалось против неё:
   одна реплика у нижнего края держала над собой экран черноты. Пустота никуда
   не девалась от прижатия к низу — она переезжала наверх, где её видно первой.

   Поэтому до ответа человека лента уступает место холсту и встаёт по центру
   (`margin:auto 0` вместо `auto 0 0`). Содержимое то же самое — приглашение и
   примеры замысла, — но в полный рост.

   Строки примеров сняты с ряда форматов на главной: волосяная линия, номер
   моноширинным, штрих слева под курсором. Это не новый вид карточки, а тот же
   приём в третий раз, — ради него он и заведён. */
.chat-in.chat-beg{margin:auto 0}
.beg{width:min(72ch,100%);padding:var(--sp-4) 0}
.beg-t{font-size:clamp(22px,2.5vw,31px);font-weight:700;letter-spacing:-.02em;margin-bottom:var(--sp-2)}
.beg-s{color:var(--muted);font-size:var(--fs-4);max-width:54ch;margin-bottom:var(--sp-5)}
.beg-ex{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.beg-i{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-3);
  align-items:baseline;width:100%;padding:var(--sp-4) var(--sp-1) var(--sp-4) 0;border-bottom:1px solid var(--line);
  transition:padding-left .3s var(--e)}
/* штрих слева вместо заливки — как у шагов процесса */
.beg-i::before{content:'';position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--ac);
  transform:scaleY(0);transform-origin:top;transition:transform .35s var(--e)}
@media (hover:hover){                    /* на тач-экранах hover не «залипает» */
  .beg-i:hover{padding-left:var(--sp-4)}
  .beg-i:hover::before{transform:scaleY(1)}
  .beg-i:hover .beg-n{color:var(--ac)}
  .beg-i:hover .beg-a{opacity:1;transform:none}
}
.beg-i:active{padding-left:var(--sp-4)}
.beg-i:active::before{transform:scaleY(1)}
.beg-i:focus-visible{outline:2px solid var(--ac);outline-offset:-2px;border-radius:var(--rad-1)}
.beg-n{font-size:var(--fs-1);letter-spacing:.12em;color:var(--faint);transition:color var(--d) var(--e)}
.beg-x{font-size:var(--fs-4);line-height:1.45}
.beg-a{color:var(--ac);opacity:0;transform:translateX(-5px);
  transition:opacity var(--d) var(--e),transform var(--d) var(--e)}
@media (max-width:680px){
  .beg{padding:var(--sp-2) 0}
  .beg-s{margin-bottom:var(--sp-4)}
  .beg-i{gap:var(--sp-3);padding:var(--sp-3) var(--sp-0) var(--sp-3) 0}
  .beg-x{font-size:var(--fs-4)}
  /* стрелка на телефоне не нужна: наведения нет, а тап и так открывает пример */
  .beg-a{display:none}
}

/* ── сводка заказа в ленте ── */
/* Живая: пересчитывается на каждой отрисовке, поэтому переписанная строка
   видна сразу. Строка кликабельна — это тот же «переписать», что и в плане. */
.sum{margin-left:var(--sp-6);max-width:min(78ch,100%);border:1px solid var(--line);background:var(--surface);border-radius:var(--rad-3);
  padding:var(--sp-4) var(--sp-4) var(--sp-3);animation:msIn .42s var(--e) both}
.sum-h{display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-2)}
.sum-h span{font-family:var(--fd);font-weight:600;font-size:var(--fs-4)}
.sum-h b{margin-left:auto;font-weight:400;font-size:var(--fs-1);color:var(--faint);text-align:right}
.sum-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:var(--sp-0);margin-bottom:var(--sp-3)}
.sum-r{display:flex;align-items:baseline;gap:var(--sp-2);min-width:0;padding:var(--sp-1) var(--sp-2);border-radius:var(--rad-1);
  text-align:left;transition:background var(--d) var(--e)}
.sum-r:hover{background:var(--raised)}
.sum-r.wide{grid-column:1/-1}
.sum-r span{flex:none;width:82px;font-size:var(--fs-2);color:var(--faint)}
.sum-r i{flex:1;min-width:0;font-style:normal;font-size:var(--fs-3);color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sum-go{min-height:44px;padding:var(--sp-3) var(--sp-5);border-radius:var(--rad-2);font-size:var(--fs-4)}
.sum-go em{font-style:normal;font-size:var(--fs-2);opacity:.75}
.sum-w{margin:var(--sp-2) 0 0;font-size:var(--fs-2);color:var(--warn)}

/* ── поле ввода ── */
.ask{flex:none;padding:var(--sp-1) var(--pad) var(--sp-4)}
.ask-w{width:100%}
.ask-in{display:flex;align-items:flex-end;gap:var(--sp-2);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-3);
  transition:border-color .22s var(--e),background .22s var(--e),box-shadow .22s var(--e)}
.ask-in:focus-within{border-color:var(--line2);background:var(--raised);box-shadow:0 0 0 4px var(--ac-gl)}
.ask textarea{flex:1;min-height:24px;max-height:148px;resize:none;background:none;border:0;outline:none;
  color:var(--text);font:inherit;font-size:var(--fs-4);line-height:1.5;padding:var(--sp-1) 0}
/* кнопка загорается, когда есть что отправить: пустой акцентный квадрат
   обещал действие, которого нет */
.ask-go{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--high);color:var(--faint);
  transition:background .24s var(--e),color .24s var(--e),transform .24s var(--e)}
.ask-in.has .ask-go{background:var(--ac);color:#08110F}
.ask-in.has .ask-go:hover{transform:translateY(-1px) scale(1.06)}
.ask-go:active{transform:scale(.94)}
/* подсказка о клавишах нужна ровно тогда, когда в поле печатают */
.ask-h{font-size:var(--fs-1);color:var(--faint);margin:var(--sp-2) 0 0;text-align:center;opacity:0;
  transform:translateY(-3px);transition:opacity .25s var(--e),transform .25s var(--e)}
.ask-w:focus-within .ask-h{opacity:1;transform:none}

/* ── медиаплан ── */
.plan{display:flex;flex-direction:column;min-width:0;background:var(--surface);border-left:1px solid var(--line)}
.pl-h{display:flex;align-items:center;gap:var(--sp-3);flex:none;padding:var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom:1px solid var(--line)}
.pl-t{font-family:var(--fd);font-size:var(--fs-4);font-weight:600}
.pl-s{margin-left:auto;font-size:var(--fs-1);color:var(--faint)}
.pl-s b{color:var(--ac);font-weight:400}
.pl-b{flex:1;min-height:0;overflow-y:auto;padding:var(--sp-4) var(--sp-4) var(--sp-5)}

.pl-frame{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--rad-2);
  background:var(--raised);margin-bottom:var(--sp-4);min-height:100px}
/* размеры кадра приходят из разметки: пропорция считается из ориентации */
.pl-box{flex:none;border-radius:var(--rad-1);border:1px solid var(--line2);
  background:linear-gradient(150deg,#1E2A28,#141B21);
  transition:width .42s var(--e),height .42s var(--e),border-color .42s var(--e)}
.pl-box.turn{border-color:var(--ac)}
.pl-fi{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.pl-fn{font-size:var(--fs-3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-fm{font-size:var(--fs-1);color:var(--faint);letter-spacing:.04em}

.pl-g{margin-bottom:var(--sp-4)}
.pl-gt{font-size:var(--fs-1);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
  margin-bottom:var(--sp-1);padding:0 var(--sp-0)}
.pr{display:flex;align-items:center;gap:var(--sp-2);border-bottom:1px solid var(--line);border-radius:var(--rad-1);
  transition:background var(--d) var(--e)}
.pr:hover{background:rgba(255,255,255,.02)}
.pr-b{flex:1;display:flex;align-items:center;gap:var(--sp-3);min-width:0;padding:var(--sp-2) var(--sp-0)}
.pr-l{width:98px;flex:none;font-size:var(--fs-2);color:var(--muted)}
.pr-l i{font-style:normal;color:var(--warn);margin-left:var(--sp-0)}
.pr-v{flex:1;min-width:0;font-size:var(--fs-3);color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr.set .pr-v{color:var(--text)}
.pr-src{flex:none;font-size:var(--fs-1);letter-spacing:.09em;padding:0 var(--sp-1);border-radius:var(--rad-1);opacity:0;
  background:var(--ac-gl);color:var(--ac);transition:opacity var(--d) var(--e)}
.pr.set .pr-src{opacity:1}
.pr.mine .pr-src{background:var(--high);color:var(--muted)}
/* Решение тарифа — песочным: это ни человек, ни мастер, а то, что уже куплено.
   Тон взят у существующего бейджа `.b2`, новых цветов не заводим. */
.pr.tier .pr-src{background:rgba(217,185,140,.14);color:var(--sand)}
/* Четыре ступени: покой → строка под курсором → сам значок → закреплено.
   В покое стоял хардкод #3A4550 — он подбирался под прежний тёмный `--faint`
   и после подъёма лестницы остался бы единственным цветом внизу, то есть
   ключевая механика плана окончательно пропала бы со страницы. `--faint-2`
   держит прежнюю разницу с соседней ступенью, но значок наконец видно. */
.pr-pin{width:24px;height:24px;border-radius:var(--rad-1);flex:none;display:grid;place-items:center;color:var(--faint-2);
  transition:all var(--d) var(--e)}
.pr:hover .pr-pin{color:var(--faint)}
.pr-pin:hover{background:var(--high);color:var(--text)}
.pr.pinned .pr-pin{color:var(--ac)}

.pl-f{flex:none;border-top:1px solid var(--line);padding:var(--sp-3) var(--sp-4) var(--sp-4)}
.pl-miss{list-style:none;margin:0 0 var(--sp-3);padding:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.pl-miss li{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-2);color:var(--muted)}
.pl-miss li::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:var(--warn)}
.pl-miss li.done{color:var(--faint)}
.pl-miss li.done::before{background:var(--ok)}
.pl-money{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.pl-cr{font-size:var(--fs-6);letter-spacing:.02em}
.pl-u{font-size:var(--fs-2);color:var(--muted)}
.pl-x{text-align:right;font-size:var(--fs-1);color:var(--faint);line-height:1.6}
.pl-go{width:100%;min-height:50px;font-size:var(--fs-4)}
.pl-go em{font-style:normal;font-size:var(--fs-2);opacity:.75;margin-left:var(--sp-2)}
.pl-w{min-height:15px;margin-top:var(--sp-2);font-size:var(--fs-2);color:var(--warn);text-align:center}

/* узкий экран: колонки в одну ленту, план уходит вниз, а деньги и запуск
   остаются на виду — их незачем искать прокруткой */
@media (max-width:1080px){
  /* строки по содержимому: с десктопной `1fr` лента проектов растягивалась в
     полосу высотой в треть экрана */
  .wk{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;height:auto;padding-bottom:var(--sp-8)}
  /* панель проектов ложится лентой над столом: колонка в 244px забрала бы
     треть узкого экрана у самой работы */
  .rail{flex-direction:row;align-items:center;gap:var(--sp-2);height:auto;overflow-x:auto;
    border-right:0;border-bottom:1px solid var(--line);padding:0 var(--pad)}
  .rail-new{margin:var(--sp-2) 0;white-space:nowrap}
  .rail-l{flex-direction:row;overflow:visible;padding:var(--sp-2) 0;gap:var(--sp-1)}
  .rail-i{flex:none;max-width:210px;border:1px solid var(--line)}
  .rail-x{display:none}
  .wk-form,.chat,.pl-b{overflow:visible;min-height:0}
  .chat{min-height:38vh}
  /* разговор остаётся на весь экран: панели запуска внизу здесь нет, а лента,
     отданная прокрутке страницы, уводила бы поле ввода из-под пальца */
  .wk-solo{height:calc(100dvh - var(--top));grid-template-rows:auto minmax(0,1fr);padding-bottom:0}
  .wk-solo .chat{overflow-y:auto;min-height:0}
  .wk-solo .ask{position:static}
  .wk-form .sect-h{top:var(--top)}
  .plan{border-left:0;border-top:1px solid var(--line)}
  .ask{position:sticky;bottom:0;background:var(--bg);padding-top:var(--sp-2)}
  .pl-f{position:fixed;left:0;right:0;bottom:0;z-index:70;border-top:1px solid var(--line2);
    background:var(--surface);box-shadow:0 -14px 30px rgba(15,20,24,.6);
    padding:var(--sp-3) var(--pad) calc(var(--sp-3) + env(safe-area-inset-bottom))}
  /* в узкой панели остаётся причина отказа: полный список — выше, в плане */
  .pl-miss{display:none}
  .pl-money{margin-bottom:var(--sp-2)}
  .pl-w{margin-top:var(--sp-1)}
}
/* четыре сектора — каждый единым блоком */
.sect{border:1px solid var(--line);background:var(--surface);border-radius:var(--rad-3);
  padding:var(--sp-5);margin-bottom:var(--sp-4)}
.sect-h{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4);padding-bottom:var(--sp-4);
  border-bottom:1px solid var(--line)}
.sect-h .n{width:24px;height:24px;border-radius:var(--rad-1);background:var(--ac-gl);color:var(--ac);display:grid;
  place-items:center;font-family:var(--fm);font-size:var(--fs-1);flex:none}
.sect-h h3{font-size:var(--fs-5);font-weight:600}
.sect-h .cnt{margin-left:auto;font-family:var(--fm);font-size:var(--fs-1);color:var(--faint)}
/* ⚠️ ПЛИТКИ РАСТУТ ПО СОДЕРЖИМОМУ, А НЕ ПО СОСЕДУ.
   Было `align-items:stretch` плюс `margin-top:auto` у подсказки: соседи по
   ряду тянулись до высоты самого длинного, подсказка уезжала к нижнему краю, и
   между полем и ею зияло 80–120 px. «Название проекта», «Визуальный стиль»,
   «Локации», «Референсы персонажей» — везде дыра, и форма читалась как
   незаполненный шаблон, а не как плотный инструмент.
   Ряд с плитками разной высоты живее ровняния по пустоте: край снизу неровный,
   зато под каждым полем ровно столько места, сколько ему нужно. */
.flds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);align-items:start}
.fld{display:flex;flex-direction:column;min-width:0;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--rad-2);padding:var(--sp-4)}
.fld.full{grid-column:1/-1}
.fld .fl{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2);flex-wrap:wrap}
.fld .fl label{font-size:var(--fs-4);font-weight:600;color:var(--text)}
/* Метка «обязательно» набиралась 9 пикселями — ниже всякой читаемости, да ещё
   капсом. Ступень шкалы начинается с 11: значок и должен быть мелким, но не
   нечитаемым. */
.fld .fl .rq{font-family:var(--fm);font-size:var(--fs-1);letter-spacing:.05em;color:var(--ac);
  border:1px solid var(--ac-dk);border-radius:var(--rad-1);padding:0 var(--sp-1)}
/* Подсказка идёт СРАЗУ ЗА полем, а не прибита к низу плитки: `margin-top:auto`
   отрывал её от того, что она объясняет, и растил дыру ровно посередине. */
.fld .hint{font-size:var(--fs-2);color:var(--faint);margin-top:var(--sp-3);line-height:1.45}
/* вложенные подпараметры внутри плитки */
.sub{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px dashed var(--line)}
.sub:first-of-type{margin-top:var(--sp-3)}
.sl{display:block;font-size:var(--fs-2);color:var(--faint);margin-bottom:var(--sp-1);letter-spacing:.02em}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}

/* выбор ориентации: рамка нужной пропорции вместо подписи */
.pick{display:flex;gap:var(--sp-2)}
.pick button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:var(--sp-2);padding:var(--sp-3) var(--sp-2);border:1px solid var(--line2);border-radius:var(--rad-2);
  color:var(--muted);font-size:var(--fs-2);font-weight:500;text-align:center;transition:all var(--d) var(--e)}
.pick button:hover{border-color:var(--muted);color:var(--text)}
.pick button.on{border-color:var(--ac);color:var(--text);background:var(--ac-gl)}
.pick s{display:block;flex:none;text-decoration:none;border:1.5px solid currentColor;border-radius:var(--rad-1);
  opacity:.55;transition:opacity var(--d) var(--e),color var(--d) var(--e)}
.pick button.on s{opacity:1;color:var(--ac)}
.pick span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pick i{font-style:normal;font-size:var(--fs-1);letter-spacing:.06em;color:var(--faint)}
.pick button.on i{color:var(--ac)}

/* компактный select с поиском */
.sel{position:relative}
.sel-b{display:flex;align-items:center;gap:var(--sp-2);width:100%;padding:var(--sp-3);border:1px solid var(--line2);
  border-radius:var(--rad-2);background:var(--bg);font-size:var(--fs-4);min-height:42px;
  transition:border-color var(--d) var(--e)}
.sel-b:hover{border-color:var(--muted)}
.sel-b.set{border-color:var(--ac-dk)}
.sel-b .v{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-b .v.ph{color:var(--faint)}
.sel-b .cv{width:8px;height:8px;border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);
  transform:rotate(45deg) translate(-2px,-2px);flex:none}
.sel-p{position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--raised);border:1px solid var(--line2);
  border-radius:var(--rad-2);padding:var(--sp-2);z-index:60;box-shadow:0 16px 40px var(--scrim-1);display:none}
.sel.open .sel-p{display:block;animation:pd .14s var(--e)}
/* поля в самом низу формы раскрывают список вверх — внизу места нет */
.sel.up .sel-p{top:auto;bottom:calc(100% + 5px)}
.sel-l{max-height:216px;overflow-y:auto}
.sel-i{display:flex;align-items:center;gap:var(--sp-2);width:100%;padding:var(--sp-2) var(--sp-3);
  border-radius:var(--rad-1);font-size:var(--fs-4);color:var(--muted);transition:background var(--d) var(--e)}
.sel-i:hover{background:var(--high);color:var(--text)}
.sel-i.on{background:var(--ac-gl);color:var(--ac)}
.sel-i .s{margin-left:auto;font-size:var(--fs-1);color:var(--faint);font-family:var(--fm);flex:none}
.sel-none{padding:var(--sp-3);font-size:var(--fs-3);color:var(--faint);text-align:center}

.seg{display:flex;border:1px solid var(--line2);border-radius:var(--rad-2);overflow:hidden}
.seg button{flex:1;padding:var(--sp-2) var(--sp-1);font-size:var(--fs-3);text-align:center;color:var(--muted);
  font-family:var(--fm);border-right:1px solid var(--line2);transition:all var(--d) var(--e)}
.seg button:last-child{border-right:0}
.seg button:hover{background:var(--high);color:var(--text)}
.seg button.on{background:var(--ac);color:var(--ink);font-weight:600}
.sw{display:flex;align-items:center;gap:var(--sp-3);width:100%;font-size:var(--fs-3);color:var(--muted);padding:var(--sp-0) 0}
.sw .t{width:36px;height:21px;border-radius:var(--rad-4);background:var(--high);border:1px solid var(--line2);position:relative;flex:none;transition:all var(--d) var(--e)}
.sw .t::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--faint);transition:all var(--d) var(--e)}
.sw.on .t{background:var(--ac-gl);border-color:var(--ac)}
.sw.on .t::after{left:17px;background:var(--ac)}
.sw.on{color:var(--text)}
.inp{width:100%;padding:var(--sp-3);border:1px solid var(--line2);border-radius:var(--rad-2);background:var(--bg);
  color:var(--text);font-size:var(--fs-4);min-height:40px}
textarea.inp{min-height:68px;resize:vertical;line-height:1.5}
.inp:focus{outline:none;border-color:var(--ac)}
.inp::placeholder{color:var(--faint)}
.lb2{font-size:var(--fs-2);color:var(--faint);margin:var(--sp-3) 0 var(--sp-1);display:block}
.sl-r{display:flex;align-items:center;gap:var(--sp-3)}
.sl-v{font-family:var(--fm);font-size:var(--fs-6);color:var(--ac);min-width:60px}
input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:var(--rad-1);background:var(--high);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:var(--ac);cursor:pointer;border:3px solid var(--bg)}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--ac);cursor:pointer;border:3px solid var(--bg)}
.ups{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:var(--sp-2)}
.up{border:1px solid var(--line2);border-radius:var(--rad-1);background:var(--bg);overflow:hidden;text-align:center}
.up .a{aspect-ratio:3/4;display:grid;place-items:center}
.up .n{padding:var(--sp-1) var(--sp-0);font-size:var(--fs-1);border-top:1px solid var(--line);color:var(--faint)}
.up-a{border:1px dashed var(--line2);border-radius:var(--rad-1);display:grid;place-items:center;aspect-ratio:3/4;
  color:var(--ac);font-size:var(--fs-5);width:100%;transition:all var(--d) var(--e)}
.up-a:hover{border-color:var(--ac);background:var(--ac-gl)}
.tags{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-2)}
.tag{padding:var(--sp-1) var(--sp-2);border-radius:var(--rad-1);background:var(--ac-gl);color:var(--ac);
  font-size:var(--fs-2);display:inline-flex;gap:var(--sp-1);align-items:center}
.tag b{cursor:pointer;opacity:.6;font-weight:400}
.tag b:hover{opacity:1}

/* ═══ Быстрый стол ═══
   Вторая половина «Создать»: одна вещь за один запрос.

   Вид у него НАРОЧНО другой, чем у конструктора. Там — рабочий стол в три
   колонки, потому что заказ большой и его надо держать перед глазами целиком.
   Здесь работы ровно на одну строку, и три колонки вокруг неё выглядели бы
   как пульт без приборов. Поэтому одна узкая мера по центру: сверху выбор
   вида, посередине запрос, снизу сделанное. Читается за один взгляд.

   Новых приёмов не заводится. Колодец запроса — тот же, что поле разговора
   (`.ask-in`): поверхность, крупный радиус, свечение по фокусу. Плитки видов —
   тот же приём, что выбор ориентации (`.pick`): рамка, значок, подпись,
   акцент на выбранном. Ряд сделанного разделён волосяной линией, как строки
   примеров в начале разговора. Третье-четвёртое повторение приёма — ради него
   он и заведён. */
.qk{height:calc(100vh - var(--top));overflow-y:auto}
.qk-in{width:min(880px,100%);margin:0 auto;padding:var(--sp-7) var(--pad) var(--sp-8)}
/* Пока не сделано ничего, столу не над чем висеть — он встаёт по центру.
   Тот же приём, что у начала разговора (`.chat-beg`): пустота никуда не
   девается от прижатия к верху, она лишь переезжает вниз, где её видно
   целым экраном. */
.qk.solo{display:flex}
.qk.solo .qk-in{margin:auto;padding-top:var(--sp-5);padding-bottom:var(--sp-6)}

.qk-hd{margin-bottom:var(--sp-6)}
.qk-hd h1{font-size:clamp(26px,3.4vw,var(--fs-8));letter-spacing:-.025em;margin-bottom:var(--sp-2)}
.qk-hd p{color:var(--muted);font-size:var(--fs-4);max-width:62ch}

/* ── выбор вида ── */
.qk-kinds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2);margin-bottom:var(--sp-4)}
.qk-k{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);min-width:0;
  padding:var(--sp-4) var(--sp-2) var(--sp-3);border:1px solid var(--line2);border-radius:var(--rad-2);
  color:var(--muted);text-align:center;transition:all var(--d) var(--e)}
.qk-k:hover{border-color:var(--muted);color:var(--text)}
.qk-k.on{border-color:var(--ac);background:var(--ac-gl);color:var(--text)}
.qk-k svg{opacity:.62;transition:opacity var(--d) var(--e)}
.qk-k.on svg,.qk-k:hover svg{opacity:1}
.qk-k span{font-family:var(--fd);font-weight:600;font-size:var(--fs-3)}
/* имя модели под видом — не украшение: это ответ на «а чем именно» до того,
   как человек полез в список */
.qk-k i{font-style:normal;font-size:var(--fs-1);letter-spacing:.02em;color:var(--faint);
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qk-k.on i{color:var(--ac)}

/* ── колодец запроса ── */
.qk-box{border:1px solid var(--line);background:var(--surface);border-radius:var(--rad-3);
  padding:var(--sp-4) var(--sp-4) var(--sp-3);
  transition:border-color .22s var(--e),background .22s var(--e),box-shadow .22s var(--e)}
.qk-box:focus-within{border-color:var(--line2);background:var(--raised);box-shadow:0 0 0 4px var(--ac-gl)}
/* пока идёт вызов, колодец приглушён и не принимает правок: менять запрос,
   который уже ушёл, — значит спорить с собственным заказом */
.qk-box.busy{opacity:.66;pointer-events:none}
.qk-t{width:100%;min-height:76px;max-height:260px;resize:vertical;background:none;border:0;outline:none;
  color:var(--text);font:inherit;font-size:var(--fs-5);line-height:1.5;display:block}
.qk-t::placeholder{color:var(--faint)}

.qk-bar{display:flex;align-items:flex-end;gap:var(--sp-3);margin-top:var(--sp-3);padding-top:var(--sp-3);
  border-top:1px solid var(--line)}
.qk-ps{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-2) var(--sp-3)}
.qk-p{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.qk-p.wide{flex:1 1 190px;max-width:300px}
.qk-p > i{font-style:normal;font-size:var(--fs-1);letter-spacing:.06em;color:var(--faint)}
/* контролы в строке параметров ниже, чем в форме: здесь их четыре в ряд, и
   полная высота плитки превратила бы строку в вторую форму */
.qk-bar .sel-b{min-height:34px;padding:var(--sp-1) var(--sp-2);font-size:var(--fs-3);background:var(--bg)}
.qk-bar .seg button{padding:var(--sp-1) var(--sp-2);font-size:var(--fs-2);white-space:nowrap}
.qk-bar .sel-p{min-width:230px}
.qk-one{font-size:var(--fs-3);color:var(--muted);padding:var(--sp-1) 0}
.qk-go{flex:none;min-height:38px;padding:var(--sp-2) var(--sp-5);font-size:var(--fs-4)}

/* опоры нет — вместо ручки следующий шаг, а не запрет */
.qk-need{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  font-size:var(--fs-3);color:var(--muted);padding:var(--sp-1) 0}

.qk-cost{margin:var(--sp-3) var(--sp-1) 0;font-size:var(--fs-2);color:var(--muted);min-height:19px}
.qk-cost .qk-usd{color:var(--faint);margin-left:var(--sp-2)}
/* отказ остаётся на экране: всплывашка уходит через три секунды, а причина
   должна пережить их */
.qk-err{margin:var(--sp-2) var(--sp-1) 0;font-size:var(--fs-2);color:var(--warn);max-width:68ch}

/* ── сделанное ── */
.qk-out{margin-top:var(--sp-7)}
.qk-oh{display:flex;align-items:baseline;gap:var(--sp-3);padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--line)}
.qk-oh span{font-size:var(--fs-1);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.qk-oh i{font-style:normal;font-family:var(--fm);font-size:var(--fs-1);color:var(--ac)}
.qk-clr{margin-left:auto;font-size:var(--fs-2);color:var(--faint);padding:var(--sp-0) var(--sp-1);
  border-radius:var(--rad-1);transition:color var(--d) var(--e),background var(--d) var(--e)}
.qk-clr:hover{color:var(--dg);background:var(--surface)}

.qk-where{display:flex;align-items:center;gap:var(--sp-1);flex-wrap:wrap;
  margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--line);
  font-size:var(--fs-2);color:var(--faint)}
.qk-where .btn{color:var(--ac);padding:var(--sp-0) var(--sp-1);min-height:0}

.qk-og{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--sp-3);
  padding-top:var(--sp-4)}
.qk-c{margin:0;display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.qk-cw{aspect-ratio:16/10;border-radius:var(--rad-2);overflow:hidden;border:1px solid var(--line);
  background:var(--surface);display:grid;place-items:center}
.qk-cw img,.qk-cw video{width:100%;height:100%;object-fit:cover;display:block}
/* Файла нет — и колодец об этом молчит значком, а не заглушкой: подставить
   сюда чужой кадр значило бы показать работу, которой не было. */
.qk-cw.empty{background:linear-gradient(150deg,var(--raised),var(--surface));border-style:dashed}
.qk-cw.empty svg{opacity:.34}
.qk-c figcaption{display:flex;flex-direction:column;gap:var(--sp-0);min-width:0}
.qk-cp{font-size:var(--fs-2);color:var(--muted);line-height:1.42;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qk-cm{font-size:var(--fs-1);color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:680px){
  .qk{height:auto}
  .qk-in{padding:var(--sp-5) var(--pad) var(--sp-8)}
  /* четыре вида в ряд на телефоне дают подпись в два слова на строку —
     два ряда по два читаются */
  .qk-kinds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qk-bar{flex-direction:column;align-items:stretch}
  .qk-go{width:100%}
  .qk-og{grid-template-columns:repeat(auto-fill,minmax(136px,1fr))}
}

/* ═══ Тарифы и пакеты ═══ */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);max-width:950px;margin:0 auto}
.pl{padding:var(--sp-4) var(--sp-4);border:1px solid var(--line);background:var(--surface);border-radius:var(--r2);
  display:flex;flex-direction:column;position:relative}
.pl.hi{border-color:var(--ac);background:linear-gradient(180deg,var(--ac-gl),transparent 46%)}
.pl .bd{position:absolute;top:-9px;left:18px;padding:var(--sp-0) var(--sp-2);background:var(--ac);color:#08110F;border-radius:var(--rad-1);
  font-family:var(--fm);font-size:var(--fs-1);letter-spacing:.05em}
.pl h3{font-size:var(--fs-5);margin-bottom:var(--sp-3)}
.pl .pr{font-family:var(--fm);font-size:var(--fs-7);font-weight:500;letter-spacing:-.02em}
.pl .pr small{font-size:var(--fs-2);color:var(--muted)}
.pl .cr{font-family:var(--fm);font-size:var(--fs-3);color:var(--ac);margin:var(--sp-1) 0 var(--sp-0)}
.pl .mn{font-size:var(--fs-2);color:var(--faint);margin-bottom:var(--sp-4)}
.pl ul{list-style:none;margin:0 0 var(--sp-4);padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.pl li{font-size:var(--fs-3);color:var(--muted);display:flex;gap:var(--sp-2);line-height:1.42}
.pl li::before{content:'';flex:none;width:13px;height:13px;margin-top:var(--sp-0);border-radius:50%;background:var(--ac-gl);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 7.2l2.2 2.3 4.5-5' stroke='%2357A99A' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pl li.no{color:var(--faint)}
.pl li.no::before{background:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 4l6 6M10 4l-6 6' stroke='%235E6B7A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.pl .btn{margin-top:auto;width:100%}

.pk{display:flex;flex-direction:column;gap:var(--sp-2);max-width:880px;margin:0 auto}
.pkc{border:1px solid var(--line);background:var(--surface);border-radius:var(--r2);padding:var(--sp-3) var(--sp-4);
  display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;transition:all var(--d) var(--e);position:relative}
.pkc:hover{border-color:var(--line2)}
.pkc.hi{border-color:var(--ac)}
.pkc .lft{flex:1;min-width:220px}
.pkc .top-r2{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-1)}
.pkc .cr{font-family:var(--fd);font-size:var(--fs-6);font-weight:700;letter-spacing:-.02em}
.pkc .rate{font-family:var(--fm);font-size:var(--fs-1);color:var(--muted);border:1px solid var(--line2);
  border-radius:var(--rad-1);padding:var(--sp-0) var(--sp-2)}
.pkc .disc{font-family:var(--fm);font-size:var(--fs-1);background:var(--sand);color:#1A1409;border-radius:var(--rad-1);padding:var(--sp-0) var(--sp-2);font-weight:500}
.pkc .lab{font-family:var(--fm);font-size:var(--fs-1);background:var(--ac);color:#08110F;border-radius:var(--rad-1);padding:var(--sp-0) var(--sp-2)}
.pkc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.pkc li{font-size:var(--fs-3);color:var(--muted);display:flex;gap:var(--sp-2)}
.pkc li::before{content:'';flex:none;width:12px;height:12px;margin-top:var(--sp-0);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 7.2l2.2 2.3 4.5-5' stroke='%2357A99A' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pkc .rgt{display:flex;align-items:center;gap:var(--sp-3);flex:none}
.pkc .prc{text-align:right}
.pkc .old{font-family:var(--fm);font-size:var(--fs-2);color:var(--faint);text-decoration:line-through}
.pkc .new{font-family:var(--fm);font-size:var(--fs-6);font-weight:500}
.pkc .btn{min-width:112px;min-height:38px;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-3)}

/* ═══ Таблицы / панели ═══ */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--rad-2)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:var(--fs-4)}
th,td{padding:var(--sp-3) var(--sp-4);text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--raised);font-family:var(--fm);font-weight:400;font-size:var(--fs-2);letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
td{color:var(--muted)}
tr:last-child td{border-bottom:0}
td b{color:var(--text);font-weight:500}
.pos{color:var(--ok)} .neg{color:var(--dg)}
.card{border:1px solid var(--line);background:var(--surface);border-radius:var(--rad-3);
  padding:var(--sp-5);margin-bottom:var(--sp-4)}
.card h3{font-size:var(--fs-5);margin-bottom:var(--sp-4)}
.kv{display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) 0;
  border-bottom:1px solid var(--line);font-size:var(--fs-4);align-items:center}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted)}
.kv .v{font-weight:500;text-align:right}
.badge{display:inline-flex;padding:var(--sp-0) var(--sp-2);border-radius:var(--rad-1);font-family:var(--fm);font-size:var(--fs-1)}
.b1{background:var(--ac-gl);color:var(--ac)}
.b2{background:rgba(217,185,140,.14);color:var(--sand)}
.b3{background:rgba(141,154,168,.13);color:var(--muted)}
.tabs{display:flex;gap:var(--sp-0);padding:var(--sp-0);background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-2);
  margin-bottom:var(--sp-5);overflow-x:auto}
.tabs button{padding:var(--sp-2) var(--sp-4);border-radius:var(--rad-1);font-size:var(--fs-3);color:var(--muted);white-space:nowrap;transition:all var(--d) var(--e)}
.tabs button.on{background:var(--raised);color:var(--text);font-weight:500}
/* ═══ Витрина: плёнка из трёх этажей ═══
   Верхний ряд едет вправо, средний влево, нижний снова вправо — три разные
   скорости, разные высоты и разные формы кадров: витрина должна читаться как
   чужая нарезка, а не как ровная сетка превью.

   Кадры стоят почти вплотную: щель в несколько пикселей и мягкий угол — ровно
   столько, чтобы соседние кадры читались по отдельности, но полотно осталось
   полотном. Вертикальный разброс кадров при этом всё равно запрещён: сдвиг
   внутри ряда прорезал бы в плёнке дыры вместо ровной щели. */
.film{
  /* во всю ширину экрана: секция даёт поля, плёнке они мешают */
  margin:0 calc(var(--pad) * -1);
  display:flex;flex-direction:column;gap:var(--fgap);
  --fgap:clamp(4px,.42vw,7px);
  /* края растворяются, чтобы лента не обрывалась о рамку экрана */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.film-row{overflow:hidden;line-height:0}
.film-a{--fh:clamp(124px,16vw,232px)}
.film-b{--fh:clamp(102px,13vw,190px)}
.film-c{--fh:clamp(134px,17.5vw,252px)}

.film-track{display:flex;gap:var(--fgap);width:max-content;
  animation:filmL var(--dur,60s) linear infinite;will-change:transform}
.film-left{animation-name:filmR}
/* наведение останавливает ленту — иначе в кадр не попасть курсором */
.film-row:hover .film-track{animation-play-state:paused}
/* остановленная плёнка: этажи стоят и листаются рукой */
.film.still .film-track{animation:none}
.film.still .film-row{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.film.still .film-row::-webkit-scrollbar{display:none}
@keyframes filmL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes filmR{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}

.film-cell{position:relative;flex:none;height:var(--fh);
  /* узкие формы (9:16, 3:4) при большой высоте вырождались в полоски */
  min-width:clamp(132px,15vw,268px);
  border:0;border-radius:clamp(6px,.55vw,10px);overflow:hidden;padding:0;
  background:linear-gradient(150deg,var(--c1,#1D262E),var(--c2,#141B21));
  display:grid;place-items:center;transition:filter var(--d) var(--e)}
.film-cell img,.film-cell video{width:100%;height:100%;object-fit:cover;display:block}
/* видео ложится поверх плитки: пока кат не начался, виден постер */
.film-cell video{position:absolute;inset:0}
.film-cell:hover{filter:brightness(1.14)}
.film-tag{position:absolute;left:0;right:0;bottom:0;padding:var(--sp-4) var(--sp-3) var(--sp-2);
  font-size:var(--fs-2);line-height:1.25;color:var(--text);text-align:left;
  background:linear-gradient(transparent,rgba(9,12,15,.88));
  opacity:0;transition:opacity var(--d) var(--e);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film-cell:hover .film-tag{opacity:1}

/* ═══ Финал главной ═══
   Последнее, что видит человек, — обещание и его цена во времени. */
.fin{padding:clamp(64px,9vw,132px) var(--pad);text-align:center}
.fin h2{font-size:clamp(30px,5.6vw,66px);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.fin p{margin-top:clamp(12px,1.4vw,20px);color:var(--muted);font-size:clamp(14px,1.5vw,17px)}

/* ═══ Генерация / плеер ═══ */
.gen{max-width:680px;margin:0 auto;padding:clamp(36px,6vw,72px) var(--pad) 70px}
.gen h2{font-size:clamp(24px,3.2vw,32px);font-weight:700;margin-bottom:9px}
.gen .gs{color:var(--muted);margin-bottom:var(--sp-5);font-family:var(--fm);font-size:var(--fs-2)}
/* Смета сервера: она объясняет цену на строке выше, поэтому идёт впритык к ней. */
.gen .gs-est{margin-top:calc(var(--sp-5) * -1);margin-bottom:var(--sp-5);color:var(--faint);font-size:var(--fs-2);line-height:1.6}
.pb{height:3px;background:var(--high);overflow:hidden;border-radius:var(--rad-1);margin-bottom:var(--sp-2)}
.pb i{display:block;height:100%;width:0;background:var(--ac);transition:width .7s var(--e)}
.pct{display:flex;justify-content:space-between;font-family:var(--fm);font-size:var(--fs-2);color:var(--muted);margin-bottom:var(--sp-5)}
.stg{display:flex;gap:var(--sp-3);align-items:center;padding:var(--sp-2) var(--sp-3);border-radius:var(--rad-1);transition:all .35s var(--e)}
.stg .i{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line2);display:grid;place-items:center}
.stg .l{font-size:var(--fs-3);color:var(--faint)}
.stg .t{margin-left:auto;font-family:var(--fm);font-size:var(--fs-1);color:var(--faint)}
.stg.act{background:var(--surface)}
.stg.act .i{border-color:var(--ac);border-right-color:transparent;animation:sp 1s linear infinite}
.stg.act .l{color:var(--text);font-weight:500}
.stg.fin .i{border-color:var(--ok);background:var(--ok)}
.stg.fin .i::after{content:'';width:10px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.3L9.5 3.5' stroke='%230F1418' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.stg.fin .l{color:var(--muted)}
@keyframes sp{to{transform:rotate(360deg)}}
.fr{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:var(--sp-2);margin-top:var(--sp-5)}
.fr div{aspect-ratio:16/9;background:var(--raised);border-radius:var(--rad-1);opacity:0;transform:scale(.92);transition:all .5s var(--e)}
.fr div.in{opacity:1;transform:none}
.plw{display:grid;grid-template-columns:minmax(0,1fr) 314px;gap:var(--sp-4);padding:var(--sp-5) var(--pad) var(--sp-7);max-width:1400px;margin:0 auto;min-width:0}
.ph{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.ph h2{font-size:clamp(20px,2.4vw,26px);font-weight:700}
.pill{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-0) var(--sp-2);border-radius:var(--rad-3);background:var(--ac-gl);color:var(--ac);font-family:var(--fm);font-size:var(--fs-1)}
.stage{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;border:1px solid var(--line2);
  background:linear-gradient(150deg,#212B33,#0E1317);display:grid;place-items:center}
/* Внутри стоит настоящий кадр: подложке под ним взяться неоткуда, а рамка
   берёт пропорции самого файла (см. `onRatio`). */
.stage.stage-live{background:#000}
.play{width:64px;height:64px;border-radius:50%;border:2px solid rgba(233,238,243,.8);display:grid;place-items:center;
  background:rgba(15,20,24,.32);transition:transform var(--d) var(--e)}
.play:hover{transform:scale(1.08)}
.stage .tc{position:absolute;left:14px;bottom:12px;font-family:var(--fm);font-size:var(--fs-2)}
.stage .mt{position:absolute;right:14px;bottom:12px;font-family:var(--fm);font-size:var(--fs-1);color:var(--muted)}
.tlh{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);margin:var(--sp-4) 0 var(--sp-2);flex-wrap:wrap}
.tlh .t{font-size:var(--fs-2);color:var(--muted)}
.tlh .s{font-family:var(--fm);font-size:var(--fs-2);color:var(--ac)}
.tl{display:flex;gap:var(--sp-0);padding:var(--sp-1);border:1px solid var(--line);border-radius:var(--rad-1);background:var(--surface);overflow-x:auto}
.shot{flex:1 1 auto;min-width:52px;height:50px;border-radius:var(--rad-1);border:1px solid var(--line2);background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-0);font-family:var(--fm);
  font-size:var(--fs-1);color:var(--faint);transition:all var(--d) var(--e)}
.shot:hover{border-color:var(--muted);color:var(--muted)}
.shot.on{border-color:var(--ac);background:var(--ac-gl);color:var(--ac)}
.shot.rd{border-color:var(--ok);background:rgba(111,191,142,.1);color:var(--ok)}
.shot .sl{font-size:var(--fs-1);opacity:.7}
.rev{border:1px solid var(--ac);background:var(--surface);border-radius:var(--r2);padding:var(--sp-4);position:sticky;top:calc(var(--top) + 18px)}
.rev.id{border-color:var(--line)}
.rev h3{font-size:var(--fs-5);margin-bottom:var(--sp-1)}
.rev .m2{font-family:var(--fm);font-size:var(--fs-1);color:var(--ac);margin-bottom:var(--sp-3)}
.rev .em{color:var(--muted);font-size:var(--fs-3);line-height:1.55}
.rad{display:flex;gap:var(--sp-2);align-items:center;width:100%;padding:var(--sp-2) var(--sp-0);font-size:var(--fs-3);color:var(--muted)}
.rad .r{flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--faint);display:grid;place-items:center}
.rad.on{color:var(--text)}
.rad.on .r{border-color:var(--ac)}
.rad.on .r::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--ac)}

/* ═══ Монтажная студия ═══ */
/* Тональная лестница вместо рамок на всём: фон экрана глубже полотна, полотно
   глубже поверхностей, рамка живёт только там, где есть настоящий край. */
/* Монтажная — не страница, а рабочее место: она занимает экран целиком и
   прокручивается внутри себя. Иначе чек пересборки уезжает под сгиб, а его
   нельзя не видеть — он про деньги. */
/* ⚠️ `--st-lab` — ШИРИНА КОЛОНКИ ПОДПИСЕЙ, и она держит ТРИ размера сразу:
   саму колонку дорожки, отступ линейки времени и левый край головки. Пока это
   было три отдельных числа (74 / 84 / 84), любая правка одного разъезжалась с
   остальными: линейка показывала не то время, что стоит под ней. */
.st{--st-lab:74px;
  display:flex;flex-direction:column;height:calc(100vh - var(--top));max-width:1560px;margin:0 auto;
  padding:var(--sp-3) var(--pad) var(--sp-4)}
.st-bar{flex:none;display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.st-pick{width:min(280px,54vw)}
.st-pick-sm{width:min(132px,32vw)}
.st-facts-line{font-size:var(--fs-1);color:var(--faint);letter-spacing:.05em}
.st-bar-r{margin-left:auto;display:flex;gap:var(--sp-2);flex-wrap:wrap}
.st-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 342px;gap:var(--sp-4);
  align-items:stretch;min-width:0}
.st-main{display:flex;flex-direction:column;min-width:0;min-height:0}

/* ── плеер ── */
/* Полотно — просто место, где стоит кадр. Своей заливки у него нет: две
   подложки разного цвета вокруг маленького ролика читаются как дефект. */
.st-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0}
.st-screen{position:relative;height:100%;max-width:100%;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
  background:radial-gradient(120% 100% at 50% 25%,#1A242A,#0B1013 70%)}
/* Кадр пришёл — рамка ровно по нему, и заливке под ним взяться неоткуда. */
.st-screen-live{background:#000}
/* Пустому полотну незачем занимать всю высоту: показывать нечего. */
.st-screen.empty-screen{height:min(100%,300px)}
.st-video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.st-screen-bar{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3);font-size:var(--fs-1);color:var(--muted);letter-spacing:.05em;pointer-events:none;
  background:linear-gradient(rgba(6,9,11,.72),transparent)}
.st-blank{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);
  height:100%;padding:var(--sp-5);text-align:center}
.st-blank p{max-width:34ch;font-size:var(--fs-3);color:var(--muted);line-height:1.5}
.st-blank-i{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line2);color:var(--faint);
  display:grid;place-items:center;padding-left:var(--sp-1)}

/* ── таймлайн ── */
.st-tl{flex:none;max-height:46%;overflow:auto;margin-top:var(--sp-3);padding:0 var(--sp-3) var(--sp-3);
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.st-tl-empty{padding:var(--sp-5) var(--sp-4)}
.st-tl-empty p{font-size:var(--fs-3);color:var(--faint);line-height:1.5;max-width:64ch}
.st-ruler{display:flex;justify-content:space-between;align-items:flex-end;height:24px;
  padding:0 0 var(--sp-1) calc(var(--st-lab) + var(--sp-2));
  font-size:var(--fs-1);color:var(--faint);letter-spacing:.08em}
.st-rows{position:relative;display:flex;flex-direction:column;gap:var(--sp-1)}
/* головка идёт по дорожкам, а не по всей строке: колонка подписей — не время */
.st-head{position:absolute;top:0;bottom:0;left:calc(var(--st-lab) + var(--sp-2));width:1px;background:var(--text);
  z-index:4;pointer-events:none}
.st-head::before{content:'';position:absolute;top:-4px;left:-4px;width:9px;height:9px;background:var(--text);
  clip-path:polygon(0 0,100% 0,50% 100%)}
.st-row{display:grid;grid-template-columns:var(--st-lab) minmax(0,1fr);gap:var(--sp-2);align-items:center}
.st-lab{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-1);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap}
.st-lab i{width:6px;height:6px;border-radius:var(--rad-1);flex:none}
.st-lab i.v{background:var(--ac)}
.st-lab i.a{background:var(--sand)}
.st-lab i.m{background:#8E9CD8}
.st-clips{display:flex;gap:var(--sp-0);min-width:0}
.st-clip{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-0);
  height:46px;min-width:0;padding:var(--sp-1) var(--sp-2);border-radius:var(--rad-1);border:1px solid transparent;
  background:var(--raised);overflow:hidden;text-align:left;
  transition:background var(--d) var(--e),border-color var(--d) var(--e)}
.st-clip:hover{background:var(--high)}
.st-clip-id{font-family:var(--fm);font-size:var(--fs-1);letter-spacing:.09em;color:var(--faint)}
.st-clip-nm{font-size:var(--fs-1);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-clip.on{border-color:var(--ac);background:var(--ac-gl)}
.st-clip.on .st-clip-nm{color:var(--text)}
.st-clip.on .st-clip-id{color:var(--ac)}
/* изменён и ждёт пересборки — единственное состояние, которое стоит денег */
.st-clip.dirty{background:rgba(217,168,92,.14);border-color:rgba(217,168,92,.5)}
.st-clip.dirty .st-clip-id{color:var(--warn)}
.st-clip.dirty .st-clip-nm{color:#EBD1A6}
.st-clip.fresh{border-color:var(--ok);background:rgba(111,191,142,.1)}
.st-clip.fresh .st-clip-id{color:var(--ok)}
.st-clip.busy{border-color:var(--ac);background:var(--ac-gl);animation:stPulse 1.5s var(--e) infinite}
/* «сейчас играет» — штрих сверху: подсветка идёт за головкой, а выбор шота
   остаётся за человеком, и путать их нельзя */
.st-clip.now::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--ac);
  border-radius:2px 2px 0 0}
@keyframes stPulse{0%,100%{opacity:1}50%{opacity:.55}}
.st-clip-aud{height:34px;align-items:center;justify-content:center}
.st-clip-aud.off{opacity:.3;border-style:dashed;border-color:var(--line2)}
.st-wave{display:flex;align-items:center;gap:var(--sp-0);height:16px}
.st-wave i{width:1.5px;border-radius:var(--rad-1);background:var(--sand);opacity:.55}
.st-strip{flex:1;display:flex;align-items:center;justify-content:center;height:32px;border-radius:var(--rad-1);
  font-family:var(--fm);font-size:var(--fs-1);letter-spacing:.06em;color:#AAB4E2;
  background:linear-gradient(90deg,rgba(142,156,216,.17),rgba(142,156,216,.07));
  border:1px solid rgba(142,156,216,.22)}
.st-strip.off{color:var(--faint);background:none;border-style:dashed;border-color:var(--line2)}
.st-tip{margin-top:var(--sp-2);font-size:var(--fs-1);color:var(--faint)}

/* ── инспектор ── */
.st-side{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r2);background:var(--surface)}
.st-scope{display:flex;gap:var(--sp-0);padding:var(--sp-2) var(--sp-3) 0}
.st-scope button{flex:1;padding:var(--sp-2);border-radius:var(--rad-1);font-size:var(--fs-3);font-weight:600;text-align:center;
  color:var(--muted);transition:all var(--d) var(--e)}
.st-scope button:hover{color:var(--text)}
.st-scope button[aria-selected="true"]{background:var(--raised);color:var(--text)}
.st-body{flex:1;min-height:0;overflow-y:auto;padding:var(--sp-3) var(--sp-3) var(--sp-4)}
.st-blk{margin-bottom:var(--sp-4)}
.st-blk:last-child{margin-bottom:0}
.st-blk-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.st-blk-t{font-family:var(--fd);font-size:var(--fs-3);font-weight:600;overflow:hidden;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.st-blk-c{font-size:var(--fs-1);color:var(--faint);white-space:nowrap}
.st-lbl{display:block;margin:var(--sp-2) 0 var(--sp-1);font-size:var(--fs-1);font-weight:500;color:var(--muted)}
.st-chips{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.st-chip{padding:var(--sp-1) var(--sp-3);border-radius:var(--rad-3);border:1px solid var(--line2);background:var(--raised);
  font-size:var(--fs-2);color:var(--muted);transition:all var(--d) var(--e)}
.st-chip:hover{border-color:var(--muted);color:var(--text)}
.st-chip.on{border-color:var(--ac);background:var(--ac-gl);color:var(--ac)}
.st-hint{margin-top:var(--sp-2);font-size:var(--fs-1);line-height:1.5;color:var(--faint)}
.st-wait{padding-left:var(--sp-2);border-left:2px solid var(--warn);color:var(--muted)}
.st-facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2) var(--sp-3);margin:0}
.st-facts dt{font-size:var(--fs-1);letter-spacing:.04em;color:var(--faint)}
.st-facts dd{margin:var(--sp-0) 0 0;font-size:var(--fs-3)}
.st-rng{width:100%;margin-top:var(--sp-1);accent-color:var(--ac)}

/* ── чек пересборки ── */
.st-check{flex:none;padding:var(--sp-3) var(--sp-3) var(--sp-3);border-top:1px solid var(--line);background:var(--bg)}
.st-check-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.st-check-t{font-size:var(--fs-1);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.st-check-n{font-size:var(--fs-1);color:var(--warn)}
.st-list{list-style:none;margin:0 0 var(--sp-2);padding:0;display:flex;flex-direction:column;gap:var(--sp-0);
  max-height:148px;overflow-y:auto}
.st-list li{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-2);border-radius:var(--rad-1);
  background:var(--surface);font-size:var(--fs-2)}
.st-what{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-cost{font-size:var(--fs-1);color:var(--faint);white-space:nowrap}
.st-cost.paid{color:var(--ac)}
.st-cost.wait{color:var(--warn)}
.st-x{width:20px;height:20px;border-radius:var(--rad-1);display:grid;place-items:center;color:var(--faint);flex:none}
.st-x:hover{background:var(--high);color:var(--dg)}
.st-empty{background:none;color:var(--faint);line-height:1.5;display:block;white-space:normal;padding:var(--sp-2) var(--sp-0)}
.st-job{margin-bottom:var(--sp-2);padding:var(--sp-2) var(--sp-2);border:1px solid var(--line);border-radius:var(--rad-2);background:var(--surface)}
.st-job-h{display:flex;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-2);font-size:var(--fs-2);color:var(--muted)}
.st-job-f{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-top:var(--sp-2);
  font-size:var(--fs-1);color:var(--faint)}
.st-go{width:100%;justify-content:center}
.st-go-c{font-size:var(--fs-2);opacity:.72}

/* Узкий экран: рабочее место разворачивается в обычную страницу — держать
   плеер, дорожки и чек в одном экране там не во что. */
/* ── построчный звук и правка произведения ── */
.st-lineblk{padding:var(--sp-2) 0;border-bottom:1px dashed var(--line)}
.st-lineblk:last-of-type{border-bottom:0}
.st-lineblk.off{opacity:.55}
.st-line-row{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-1)}
.st-line-row .st-rng{flex:1;margin-top:0}
.st-line-v{flex:none;min-width:56px;font-size:var(--fs-1);color:var(--faint);text-align:right}
.st-line-txt{flex:1;min-width:0;padding:var(--sp-2) var(--sp-2);font-size:var(--fs-2)}
.st-line-row .btn{flex:none}
/* заголовок группы в чеке: правки произведения стоят отдельно от сценовых */
.st-group{padding:var(--sp-2) var(--sp-2) var(--sp-0);font-size:var(--fs-1);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);background:none}

/* ── сцены, полка неснятого, подрезка ── */
.st-scenes{display:flex;gap:var(--sp-1);flex-wrap:wrap}
.st-scene{position:relative;padding:var(--sp-2) var(--sp-3);border-radius:var(--rad-1);border:1px solid var(--line2);
  background:var(--surface);font-family:var(--fm);font-size:var(--fs-1);color:var(--muted);
  transition:all var(--d) var(--e)}
.st-scene:hover{color:var(--text);border-color:var(--muted)}
.st-scene.on{border-color:var(--ac);background:var(--ac-gl);color:var(--ac)}
/* сцена, у которой правка новее сборки */
.st-scene.dirty::after{content:'';position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%;
  background:var(--warn)}

/* ⚠️ Неснятые каты стоят ВНЕ оси времени: в ролике их нет, и место на дорожке
   дало бы им длительность, которой не существует. */
.st-shelf{display:flex;align-items:flex-start;gap:var(--sp-2);margin-top:var(--sp-2);padding-top:var(--sp-2);
  border-top:1px dashed var(--line2)}
.st-shelf-t{flex:none;width:var(--st-lab);font-size:var(--fs-1);letter-spacing:.06em;color:var(--faint);line-height:1.3}
.st-shelf-l{display:flex;flex-wrap:wrap;gap:var(--sp-1);min-width:0}
.st-ghost{display:flex;align-items:center;gap:var(--sp-1);max-width:210px;padding:var(--sp-1) var(--sp-2);border-radius:var(--rad-1);
  border:1px dashed var(--line2);background:transparent;font-size:var(--fs-1);color:var(--faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all var(--d) var(--e)}
.st-ghost:hover{border-color:var(--muted);color:var(--muted)}
.st-ghost.on{border-color:var(--ac);color:var(--ac);border-style:solid}
.st-ghost .mono{font-size:var(--fs-1);opacity:.8}

.st-trim{margin-top:var(--sp-1)}
.st-trim-h{display:flex;justify-content:space-between;gap:var(--sp-2);font-size:var(--fs-1);color:var(--faint);
  margin-bottom:var(--sp-1)}
.st-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-top:var(--sp-2)}
.st-line{margin:0 0 var(--sp-2);font-size:var(--fs-2);line-height:1.45;color:var(--muted)}
.st-line b{color:var(--text);font-weight:600;margin-right:var(--sp-1)}
.st-line .mono{font-size:var(--fs-1);color:var(--faint);margin-left:var(--sp-1)}
.st-file{display:block;margin-top:var(--sp-2);padding:var(--sp-2);border:1px dashed var(--line2);border-radius:var(--rad-1);
  font-size:var(--fs-2);color:var(--muted);text-align:center;cursor:pointer;transition:all var(--d) var(--e)}
.st-file:hover{border-color:var(--ac);color:var(--text)}
.st-file input{display:none}
/* предупреждения сервера показываются как есть: он видит то, чего не видит витрина */
.st-warn{list-style:none;margin:0 0 var(--sp-2);padding:var(--sp-2) var(--sp-2);border-radius:var(--rad-1);
  background:rgba(217,168,92,.1);border:1px solid rgba(217,168,92,.32)}
.st-warn li{font-size:var(--fs-1);line-height:1.45;color:#EBD1A6}
.st-warn li + li{margin-top:var(--sp-1)}
.st-go-row{display:grid;gap:var(--sp-2)}

@media (max-width:1080px){
  .st{display:block;height:auto;padding-bottom:var(--sp-6)}
  .st-grid{display:block}
  .st-main{display:block}
  .st-stage{padding:var(--sp-2)}
  .st-screen,.st-screen.empty-screen{height:auto;width:100%;max-height:62vh}
  .st-video{height:auto;max-height:62vh}
  .st-tl{max-height:none}
  .st-side{margin-top:var(--sp-3);overflow:visible}
  .st-body{overflow:visible}
}

/* ═══ Плеер монтажной ═══ */
/* Своя оболочка вместо `controls` браузера: та не знает про шоты, а здесь
   дорожка ими размечена. Контролы уходят, когда идёт воспроизведение —
   на этом экране смотрят кадр, а не кнопки. */
.st-screen-slot{position:absolute;inset:0}
.st-screen-live{background:#000}
.vp{position:relative;width:100%;height:100%;background:#000;overflow:hidden;border-radius:inherit;
  --vp-ink:#E9EEF3}
.vp:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}
.vp-video{display:block;width:100%;height:100%;object-fit:contain;background:#000;cursor:pointer}
.vp-shade{position:absolute;left:0;right:0;bottom:0;height:132px;pointer-events:none;
  background:linear-gradient(transparent,rgba(4,7,9,.82));opacity:1;transition:opacity var(--d) var(--e)}
.vp.idle .vp-shade{opacity:0}

.vp-ctl{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:var(--sp-1);
  padding:0 var(--sp-3) var(--sp-2);transition:opacity var(--d) var(--e),transform var(--d) var(--e)}
.vp.idle .vp-ctl{opacity:0;transform:translateY(7px);pointer-events:none}

/* дорожка */
.vp-track{position:relative;display:flex;align-items:center;height:18px;cursor:pointer}
.vp-track:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:var(--rad-1)}
.vp-rail{position:relative;width:100%;height:3px;border-radius:var(--rad-1);background:rgba(233,238,243,.24);
  transition:height var(--d) var(--e)}
.vp-track:hover .vp-rail,.vp-track:focus-visible .vp-rail{height:5px}
.vp-buf,.vp-play{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:var(--rad-1)}
.vp-buf{background:rgba(233,238,243,.3)}
.vp-play{background:var(--ac)}
/* Сдвиг ползунка — ПОЛОВИНА его собственного размера, а не ступень отступа:
   он центрируется по дорожке, и к шкале это отношения не имеет. */
.vp-knob{position:absolute;top:50%;left:0;width:11px;height:11px;
  margin:calc(var(--sp-3) / -2) 0 0 calc(var(--sp-3) / -2);border-radius:50%;
  background:var(--ac);opacity:0;transition:opacity var(--d) var(--e)}
.vp-track:hover .vp-knob,.vp-track:focus-visible .vp-knob{opacity:1}
/* границы шотов: по ним же ходят «предыдущий/следующий» */
.vp-marks i{position:absolute;top:50%;width:2px;height:9px;margin-top:calc(var(--sp-2) / -2);border-radius:var(--rad-1);
  background:rgba(8,11,14,.85)}
.vp-tip{position:absolute;bottom:20px;left:0;transform:translateX(-50%);padding:var(--sp-0) var(--sp-2);border-radius:var(--rad-1);
  background:rgba(10,14,17,.94);border:1px solid var(--line2);font-family:var(--fm);font-size:var(--fs-1);
  color:var(--vp-ink);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--d) var(--e)}
.vp-track:hover .vp-tip{opacity:1}

/* ряд кнопок */
.vp-row{display:flex;align-items:center;gap:var(--sp-1);color:var(--vp-ink)}
.vp-btn{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--rad-1);flex:none;
  color:rgba(233,238,243,.85);transition:background var(--d) var(--e),color var(--d) var(--e)}
.vp-btn:hover{background:rgba(233,238,243,.13);color:#fff}
.vp-btn.on{color:var(--ac)}
.vp-btn.off{color:rgba(233,238,243,.5)}
.vp-btn[hidden]{display:none}
.vp-speed{width:auto;padding:0 var(--sp-2);font-family:var(--fm);font-size:var(--fs-1)}
.vp-time{margin:0 var(--sp-1);font-family:var(--fm);font-size:var(--fs-1);color:rgba(233,238,243,.72);white-space:nowrap}
.vp-time b{font-weight:500;color:#fff}
.vp-sp{flex:1}
.vp-vol{display:flex;align-items:center;gap:var(--sp-1);max-width:32px;overflow:hidden;
  transition:max-width var(--d) var(--e)}
.vp-vol:hover,.vp-vol:focus-within{max-width:126px}
.vp-vol-r{width:78px;accent-color:var(--ac)}

/* центральная кнопка и состояния */
.vp-big{position:absolute;inset:0;margin:auto;width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;color:var(--vp-ink);background:rgba(10,14,17,.5);
  border:1.5px solid rgba(233,238,243,.45);backdrop-filter:blur(5px);
  transition:opacity var(--d) var(--e),transform var(--d) var(--e),border-color var(--d) var(--e)}
.vp-big svg{margin-left:var(--sp-0)}
.vp-big:hover{transform:scale(1.06);border-color:var(--ac);color:var(--ac)}
.vp.playing .vp-big{opacity:0;transform:scale(.92);pointer-events:none}
.vp-chip{position:absolute;left:12px;top:11px;max-width:calc(100% - 24px);padding:var(--sp-1) var(--sp-2);border-radius:var(--rad-3);
  background:rgba(10,14,17,.62);border:1px solid rgba(233,238,243,.15);color:var(--vp-ink);
  font-size:var(--fs-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity var(--d) var(--e)}
.vp-chip[hidden]{display:none}
.vp.idle .vp-chip{opacity:0}
/* буферизация: кольцо на месте кнопки, без подмены смысла */
.vp.busy .vp-big{opacity:1;border-color:var(--ac);border-right-color:transparent;animation:sp 1s linear infinite}
.vp.busy .vp-big svg{display:none}
.vp.fs{border-radius:0}

@media (max-width:680px){
  .vp-btn{width:36px;height:36px}
  .vp-time{margin:0 var(--sp-0);font-size:var(--fs-1)}
  .vp-vol{display:none}
}

/* ═══ Документы / модалка / прочее ═══ */
.doc{max-width:800px;margin:0 auto;padding:var(--sp-6) var(--pad) var(--sp-7)}
.doc h2{font-size:clamp(23px,3vw,33px);font-weight:700;margin-bottom:var(--sp-2)}
.doc .dm{font-family:var(--fm);font-size:var(--fs-2);color:var(--faint);margin-bottom:var(--sp-5);
  padding-bottom:var(--sp-4);border-bottom:1px solid var(--line)}
.doc h3{font-size:var(--fs-5);margin:var(--sp-6) 0 var(--sp-3)}
.doc h4{font-size:var(--fs-4);margin:var(--sp-4) 0 var(--sp-2);color:var(--muted)}
.doc p{margin-bottom:var(--sp-3);color:var(--muted);font-size:var(--fs-4);line-height:1.7}
.doc ul,.doc ol{margin:0 0 var(--sp-4);padding-left:var(--sp-5);color:var(--muted);font-size:var(--fs-4);line-height:1.7}
.doc li{margin-bottom:var(--sp-1)}
.doc strong{color:var(--text);font-weight:600}
.warn{border:1px solid var(--warn);border-left-width:3px;background:rgba(217,168,92,.07);padding:var(--sp-4);
  margin-bottom:var(--sp-5);font-size:var(--fs-3);color:var(--muted);line-height:1.6;
  border-radius:0 var(--rad-2) var(--rad-2) 0}
.warn b{color:var(--warn)}
.ov{position:fixed;inset:0;z-index:96;background:var(--scrim-2);backdrop-filter:blur(5px);display:none;
  place-items:center;padding:var(--sp-5)}
.ov.on{display:grid;animation:fade .18s var(--e)}
.mod{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line2);border-radius:var(--rad-3);
  padding:var(--sp-5);max-height:90vh;overflow-y:auto}
.mod h3{font-size:var(--fs-6);font-weight:700;margin-bottom:var(--sp-2)}
.mod .ms{color:var(--muted);font-size:var(--fs-3);margin-bottom:var(--sp-4)}
/* Вход без подзаголовка: строка «подойдут любые данные» живёт только в моке,
   и в живом режиме вкладки прижимались бы к заголовку вплотную. Отступ отдан
   соседству, а не самому заголовку, — когда подзаголовок есть, он свой уже
   держит, и удваивать его незачем. */
.mod h3 + .seg2{margin-top:var(--sp-4)}
.seg2{display:flex;border:1px solid var(--line2);border-radius:var(--rad-2);overflow:hidden;margin-bottom:var(--sp-4)}
.seg2 button{flex:1;padding:var(--sp-3);font-size:var(--fs-3);text-align:center;color:var(--muted);transition:all var(--d) var(--e)}
.seg2 button.on{background:var(--ac);color:var(--ink);font-weight:600}
.soc{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.soc button{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-3);
  border:1px solid var(--line2);border-radius:var(--rad-2);font-size:var(--fs-4);transition:all var(--d) var(--e)}
.soc button:hover{border-color:var(--muted);background:var(--raised)}
.dv{display:flex;align-items:center;gap:var(--sp-3);color:var(--faint);font-family:var(--fm);font-size:var(--fs-1);
  margin:var(--sp-4) 0;letter-spacing:.06em}
.dv::before,.dv::after{content:'';flex:1;height:1px;background:var(--line)}
.toast{position:fixed;left:50%;bottom:96px;z-index:120;transform:translate(-50%,18px);
  padding:var(--sp-3) var(--sp-5);border-radius:var(--rad-2);background:var(--raised);border:1px solid var(--line2);
  font-size:var(--fs-4);opacity:0;pointer-events:none;transition:all .3s var(--e);max-width:90vw}
.toast.on{opacity:1;transform:translate(-50%,0)}
.foot{border-top:1px solid var(--line);padding:var(--sp-6) var(--pad);display:flex;gap:var(--sp-5);
  justify-content:space-between;flex-wrap:wrap;font-size:var(--fs-2);color:var(--faint)}
.foot a{color:var(--muted)}
.fl{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.empty{text-align:center;padding:var(--sp-8) var(--sp-5);color:var(--muted)}
.empty h3{font-size:var(--fs-5);margin-bottom:var(--sp-2);color:var(--text)}
.note{border-left:2px solid var(--ac);background:var(--surface);padding:var(--sp-4);
  border-radius:0 var(--rad-2) var(--rad-2) 0;font-size:var(--fs-4);color:var(--muted);line-height:1.55}
.note b{color:var(--text)}

/* широкий монитор: ряд форматов не «худеет» — растут отступы и кегль */
@media (min-width:1500px){
  .pr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pr-frame{max-width:1000px;margin-left:auto}
  .pr-step{padding-top:var(--sp-5);padding-bottom:var(--sp-5)}
  .pr-name{font-size:var(--fs-5)}
  .pr-hint{font-size:var(--fs-4)}
}
@media (min-width:1600px){
  .fc{padding:var(--sp-7) var(--sp-6) var(--sp-6)}
  .fnum{margin-bottom:var(--sp-6)}
  .fi{height:64px;margin-bottom:var(--sp-5)}
  .fb h3{font-size:var(--fs-5)}
  .fc:first-child .fb h3{font-size:var(--fs-6)}
  .fb p{font-size:var(--fs-3)}
}
/* ряд форматов: планшет — пять равных колонок, всё компактнее */
@media (max-width:1180px){
  .frow{grid-template-columns:repeat(5,minmax(0,1fr))}
  .fc{padding:var(--sp-5) var(--sp-4) var(--sp-5)}
  .fnum{margin-bottom:var(--sp-4)}
  .fi,.fc:first-child .fi{height:42px;margin-bottom:var(--sp-3)}
  .fb h3,.fc:first-child .fb h3{font-size:var(--fs-4)}
  .fb p{font-size:var(--fs-2)}
}
/* узкий экран: кадр липнет к шапке, шаги проходят под ним */
@media (max-width:860px){
  /* не grid, а колонка: у липкого элемента в гриде нет хода — его держит своя строка */
  .pr-grid{display:flex;flex-direction:column;gap:0}
  /* кадр встаёт над списком и липнет к шапке, шаги проходят под ним */
  .pr-stage{order:-1;position:sticky;top:calc(var(--top) + 10px);z-index:3;margin-bottom:var(--sp-4)}
  .pr-frame{aspect-ratio:16/10}
  .pr-form{width:min(90%,320px)}
  .pr-sheet{width:min(92%,300px)}
  .pr-shot,.pr-tl{width:min(94%,340px)}
  /* запас снизу — иначе кадр отлипает раньше, чем последний шаг дойдёт до центра.
     Отступ именно у списка: липкий элемент держит content-box контейнера, не padding. */
  .pr-steps{border-top:0;padding-bottom:14vh}
  .pr-step{grid-template-columns:auto minmax(0,1fr);padding:var(--sp-4) 0;flex:0 0 auto}
  .pr-step[aria-selected="true"]{padding-left:var(--sp-3)}
  .pr-name{font-size:var(--fs-4)}
  .pr-hint{font-size:var(--fs-3)}
  .pr-by{display:none}
}
@media (max-width:860px){ .sh.split{display:block} .sh.split>p{margin-top:9px;max-width:60ch} }
/* телефон: не столбик, а лента со свайпом — следующий формат подглядывает из-за края */
@media (max-width:860px){
  .frail{margin-inline:calc(var(--pad) * -1)}
  .frow{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);
    padding-inline:var(--pad);border:0;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .frow::-webkit-scrollbar{display:none}
  .fc{flex:0 0 46%;scroll-snap-align:start;padding:var(--sp-5) var(--sp-4) var(--sp-5);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .fi,.fc:first-child .fi{height:44px}
  .fb h3,.fc:first-child .fb h3{font-size:var(--fs-4)}
  .frail::after{content:'';position:absolute;top:0;bottom:0;right:0;width:46px;pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--bg))}
}
@media (max-width:680px){ .fc{flex-basis:62%} }
@media (max-width:520px){ .fc{flex-basis:76%} }
@media (max-width:1080px){ .plw{grid-template-columns:minmax(0,1fr)} .rev{position:static} }
@media (max-width:900px){ .plans{grid-template-columns:minmax(0,1fr);max-width:380px} }
@media (max-width:820px){ .flds{grid-template-columns:minmax(0,1fr)} }
/* ═══ МОБИЛЬНАЯ ВЕРСИЯ ═══ */
.burger{display:none;width:39px;height:39px;border-radius:var(--rad-2);place-items:center;color:var(--muted);flex:none}
.burger:hover{color:var(--text);background:var(--surface)}
@media (max-width:860px){
  .burger{display:grid}
  .lg{margin-right:var(--sp-2)}
  .nav{position:fixed;top:var(--top);left:0;right:0;flex-direction:column;gap:var(--sp-0);padding:var(--sp-2);
    background:var(--surface);border-bottom:1px solid var(--line2);z-index:79;display:none;
    box-shadow:0 16px 34px rgba(0,0,0,.55);max-height:calc(100vh - var(--top));overflow-y:auto}
  .nav.open{display:flex;animation:pd .16s var(--e)}
  .nav button{width:100%;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-4);border-radius:var(--rad-2);text-align:left}
}
@media (max-width:680px){
  .pop{left:8px;right:8px;width:auto}
  .sect{padding:var(--sp-4) var(--sp-3)}
  .flds{grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}
  .two{grid-template-columns:minmax(0,1fr)}
  .pkc .rgt{width:100%;justify-content:space-between}
  /* длинные слова не рвут вёрстку */
  body{overflow-wrap:break-word}
  .hero h1{letter-spacing:-.02em;hyphens:auto}
  /* нижняя панель складывается */
  .btn-lg{min-height:48px;font-size:var(--fs-4);padding:var(--sp-3) var(--sp-4)}
  /* монтажка: дорожки прокручиваются вбок, инспектор идёт под ними */
  .st-rows,.st-ruler{min-width:560px}
  .st{padding-bottom:var(--sp-6)}
  .st-bar-r{margin-left:0;width:100%}
  .st-list{max-height:200px}
  .acts{grid-template-columns:1fr 1fr}
  /* плеер и таблицы */
  .plw{padding-bottom:var(--sp-6)}
  .tw{-webkit-overflow-scrolling:touch}
}
@media (max-width:680px){
  /* длинные адреса API не рвут строку таблицы */
  .kv{flex-wrap:wrap;gap:var(--sp-1)}
  .kv .v{text-align:left;overflow-wrap:anywhere;word-break:break-word;max-width:100%}
  .kv .k{max-width:100%}
  /* ряд кнопок в шапке плеера и студии переносится */
  .ph>div,.st-bar-r{flex-wrap:wrap;width:100%;margin-left:0 !important}
  .ph>div .btn,.st-bar-r .btn{flex:1 1 auto}
}
@media (max-width:520px){
  #bIn{display:none}
  .ic{width:36px;height:36px}
  .lg .tx{font-size:var(--fs-3)}
}
/* Плёнка на телефоне: этажи ниже, зазоры плотнее, подписи не показываются —
   наведения нет, а тап по кадру и так открывает пример. */
@media (max-width:600px){
  .film-a{--fh:118px}
  .film-b{--fh:96px}
  .film-c{--fh:128px}
  .film-cell{min-width:104px;border-radius:var(--rad-1)}
  .film{--fgap:4px}
  .film-tag{display:none}
  .film{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
}

/* На узких телефонах имя студии уступает место кнопкам: с ним шапка уезжала
   за край и аватар обрезался. Значок остаётся — он же ведёт на главную. */
@media (max-width:430px){
  .lg .tx{display:none}
  .lg{margin-right:var(--sp-1)}
  .top{gap:var(--sp-1)}
}
@media (prefers-reduced-motion:reduce){.frow{scroll-behavior:auto}.pr-pane *{animation:none !important;opacity:1 !important;transform:none !important}*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;
  /* ⚠️ ЗАДЕРЖКУ ТОЖЕ. Пословный выход реплики и лесенка вариантов держат
     содержимое скрытым именно задержкой: погасив одну длительность, мы оставляли
     человеку с `reduce` пустое место там, где уже есть текст. */
  animation-delay:0s !important;transition-delay:0s !important}html{scroll-behavior:auto}}

/* ═══ Кабинет ═══ */
/* Профиль и баланс стоят рядом: это два ответа на один вопрос «что у меня есть».
   На узком экране они складываются в колонку — таблицы ниже и так прокручиваются. */
.acc-top{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--sp-3);align-items:start}
@media(max-width:820px){.acc-top{grid-template-columns:1fr}}
.acc-card{border:1px solid var(--line);background:var(--surface);border-radius:var(--r2);padding:var(--sp-4)}
.acc-row{display:flex;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) 0;
  border-bottom:1px solid var(--line);font-size:var(--fs-3);align-items:baseline}
.acc-row:last-of-type{border-bottom:0}
.acc-row .k{color:var(--muted)}
.acc-row .v{text-align:right;color:var(--text)}
.acc-row .ok{color:var(--ok);font-family:var(--fm);font-size:var(--fs-1)}
.acc-acts{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.acc-bal .k{color:var(--muted);font-family:var(--fm);font-size:var(--fs-1);letter-spacing:.07em;text-transform:uppercase}
.acc-bal .big{font-size:var(--fs-8);line-height:1.1;margin:var(--sp-2) 0 var(--sp-3);color:var(--text)}
.acc-bal .big span{font-size:var(--fs-4);color:var(--muted)}
.acc-bal .bar{height:3px;background:var(--high);border-radius:var(--rad-1);overflow:hidden}
.acc-bal .bar i{display:block;height:100%;background:var(--ac)}
.acc-bal .sub{margin-top:var(--sp-2);font-size:var(--fs-1);color:var(--faint);line-height:1.6}

.acc-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-2);margin-top:var(--sp-3)}
.acc-tile{border:1px solid var(--line);background:var(--surface);border-radius:var(--r2);padding:var(--sp-3) var(--sp-4)}
.acc-tile .k{color:var(--muted);font-size:var(--fs-1);font-family:var(--fm);letter-spacing:.05em}
.acc-tile .v{margin-top:var(--sp-1);font-size:var(--fs-5);color:var(--text)}

.acc-wait{color:var(--faint);font-size:var(--fs-3);padding:var(--sp-3) 0}
.acc-notes{display:grid;gap:var(--sp-2)}
.acc-note{border:1px solid var(--line);background:var(--surface);border-radius:var(--r2);padding:var(--sp-3) var(--sp-4)}
/* Непрочитанное помечено полосой, а не цветом текста: цвет здесь уже занят
   смыслом «потрачено / получено», и второе значение сделало бы оба нечитаемыми. */
.acc-note.unread{border-left:2px solid var(--ac)}
.acc-note .t{font-size:var(--fs-3);color:var(--text)}
.acc-note .b{margin-top:var(--sp-1);font-size:var(--fs-3);color:var(--muted)}
.acc-note .m{margin-top:var(--sp-1);font-size:var(--fs-1);color:var(--faint)}
.lnk{background:none;border:0;padding:0;color:var(--ac);font:inherit;font-size:var(--fs-2);cursor:pointer}
.lnk:hover{color:var(--ac-hi)}
.lnk.neg{color:var(--dg)}

/* Свежий ключ виден один раз — поэтому он выделен и переносится целиком. */
.acc-key-new{border:1px solid var(--ac-dk);background:var(--ac-gl);border-radius:var(--r2);
  padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3)}
.acc-key-new .k{font-size:var(--fs-2);color:var(--ac-hi)}
.acc-key-new .v{margin-top:var(--sp-2);font-size:var(--fs-3);color:var(--text);word-break:break-all}
.acc-invite{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.acc-invite .inp{flex:1 1 190px;margin:0}