/* МОНТАЖНАЯ СТУДИЯ — фронт. Визуальная система: ORBIT / Кабинет (docs/ORBIT_DESIGN.md).
   Свет и один синий: белые карточки на #F2F4F7, весь цвет — ультрамарин #1F41F5.
   Пять радиусов (10/14/22/28/пилюля), Onest 400–700, одно авторское движение screenRise. */

:root{
  --bg:#f2f4f7;
  --panel:#ffffff;
  --panel-2:#f4f6fb;
  --panel-3:#dfe9ff;
  --ink:#131415;
  --muted:#4b5666;
  --dim:#64697d;
  --line:#e6eaf2;
  --line-2:#d8e1e8;
  --rule:#b9c3d4;
  --accent:#1f41f5;
  --accent-ink:#ffffff;
  --accent-strong:#05369d;
  --accent-soft:#dfe9ff;
  --danger:#d92d20;
  --warm:#2b3554;
  --ok-fill:#e7f4ec;
  --ok-ink:#15703c;
  --err-fill:#fdeceb;
  --err-ink:#a8261a;

  --r-sm:10px;
  --r:14px;
  --r-lg:22px;
  --r-xl:28px;
  --r-pill:999px;

  --lift:0 1px 2px rgba(16,24,40,.04),0 8px 24px -14px rgba(16,24,40,.16);
  --lift-2:0 2px 4px rgba(16,24,40,.05),0 22px 48px -22px rgba(16,24,40,.22);
  --ring:0 0 0 4px rgba(31,65,245,.16);

  --glass:rgba(255,255,255,.82);
  --glass-blur:saturate(160%) blur(18px);

  --gap:clamp(16px,2.1vw,26px);
  --ease:cubic-bezier(.2,.8,.3,1);
  --roll:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:Onest,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
/* clip на обоих: overflow-x только на body не мешает html скроллиться вбок на телефоне */
html,body{overflow-x:clip}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.06;text-wrap:balance}
h1{font-size:clamp(28px,3vw,38px)}
h2{font-size:clamp(19px,1.6vw,23px);font-weight:600;letter-spacing:-.03em}
h3{font-size:16.5px;font-weight:600;letter-spacing:-.02em}
p{margin:0}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
img,video{max-width:100%}
svg{width:16px;height:16px;flex:none}
::selection{background:var(--accent);color:var(--accent-ink)}
[hidden]{display:none !important}

.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.02em;color:var(--dim);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.dim{color:var(--dim)}

/* фокус с клавиатуры — обводка акцентом */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}

/* ============ КАРКАС ============ */
/* Узкая плашка с орбиты вместо шапки: живой шейдер под знаком, навигация тут же.
   Нет WebGL — остаётся градиент из background. */
.bar-wrap{max-width:1080px;margin:0 auto;padding:clamp(12px,1.6vw,20px) clamp(16px,3vw,28px) 0}
.bar{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;gap:14px;
  border-radius:var(--r-lg);border:1px solid var(--line);
  padding:11px clamp(14px,2vw,22px);
  background:
    radial-gradient(140% 300% at 82% 20%,rgba(31,65,245,.16),transparent 62%),
    var(--panel);
}
.bar-mesh{
  position:absolute;inset:0;z-index:-1;width:100%;height:100%;display:block;pointer-events:none;
  opacity:.5;
  -webkit-mask-image:linear-gradient(100deg,transparent 4%,rgba(0,0,0,.55) 40%,#000 100%);
          mask-image:linear-gradient(100deg,transparent 4%,rgba(0,0,0,.55) 40%,#000 100%);
}
.bar-brand{
  font-family:Unbounded,Arial,sans-serif;font-weight:600;
  font-size:clamp(15px,1.8vw,19px);letter-spacing:.02em;line-height:1.1;
  margin-right:auto;
}
.bar-nav{display:flex;gap:6px}
.bar-nav button{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:8px 14px;border-radius:var(--r-pill);
  font-size:13.5px;font-weight:500;color:var(--muted);
  background:rgba(255,255,255,.66);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  transition:background .16s var(--ease),color .16s var(--ease);
}
.bar-nav button:hover{color:var(--ink);background:rgba(255,255,255,.9)}
.bar-nav button.is-active{background:var(--accent);color:var(--accent-ink)}
.bar-nav button .n{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;
  font-variant-numeric:tabular-nums;opacity:.75;
}

main{max-width:1080px;margin:0 auto;padding:clamp(22px,2.8vw,34px) clamp(16px,3vw,28px) 88px}

/* одно авторское движение на кабинет */
.screen{animation:screenRise .34s var(--roll) both}
@keyframes screenRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

.screen-head{margin-bottom:clamp(20px,2.6vw,30px)}
.screen-head .lede{margin-top:10px;color:var(--muted);max-width:44ch}

/* ============ КНОПКИ (пилюли) ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  padding:10px 18px;border-radius:var(--r-pill);font-size:14px;font-weight:500;
  border:1px solid var(--line-2);color:var(--ink);
  background:var(--panel);box-shadow:var(--lift);
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),box-shadow .16s var(--ease),transform .14s var(--ease);
}
.btn svg{width:15px;height:15px;stroke-width:1.6}
.btn:hover{background:var(--panel-2);border-color:var(--rule)}
.btn:active{background:var(--panel-3);box-shadow:none;transform:translateY(1px)}
.btn--accent{
  background:var(--accent);color:var(--accent-ink);border-color:transparent;
  box-shadow:0 6px 16px -8px rgba(31,65,245,.7);
}
.btn--accent:hover{background:var(--accent-strong)}
.btn--accent:active{box-shadow:none;transform:translateY(1px);background:var(--accent-strong)}
.btn--dark{background:var(--ink);color:#fff;border-color:transparent}
.btn--dark:hover{background:#2b3554;color:#fff;border-color:transparent}
.btn--ghost{border-color:transparent;background:none;box-shadow:none;color:var(--muted);padding:8px 12px}
.btn--ghost:hover{color:var(--ink);background:rgba(13,16,32,.05);border-color:transparent}
.btn--big{padding:13px 24px;font-size:15px}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ============ КАРТОЧКИ ============ */
.card{
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--lift);
}
.card-head{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line)}
.card-head h3{flex:1}
.card-body{padding:20px 22px}

/* круглая плашка иконки */
.icoball{
  width:34px;height:34px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--panel-2);color:var(--muted);
}
.icoball--accent{background:var(--accent);color:var(--accent-ink)}
.icoball--soft{background:var(--accent-soft);color:var(--accent)}

/* метки состояний */
.state{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:500;background:var(--panel-2);color:var(--muted);
}
.state--run{background:var(--accent-soft);color:var(--accent-strong)}
.state--ok{background:var(--ok-fill);color:var(--ok-ink)}
.state--err{background:var(--err-fill);color:var(--err-ink)}

/* ============ ФОРМА С ЖИВЫМ КАДРОМ ============ */
.formwrap{display:grid;grid-template-columns:minmax(230px,300px) 1fr;gap:clamp(20px,2.6vw,34px);align-items:start}
/* дети грид-колонок не должны распирать трек своей мин-шириной: без этого
   «Готово» на телефоне разъезжалось за экран (виноват был инпут ассистента) */
.formwrap>*,.jobwrap>*,.donewrap>*{min-width:0}
.form-col{display:flex;flex-direction:column;gap:20px;min-width:0}
.stage-col{display:flex;flex-direction:column;gap:10px}
.stage-note{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.stage-note small{font-size:12.5px;color:var(--dim)}

/* кадр 9:16 — герой экрана: сюда кидают файл, тут живут субтитры выбранным цветом */
.stage{
  aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;position:relative;
  background:var(--ink);border:1px solid var(--line-2);cursor:pointer;
  container-type:inline-size;
  transition:box-shadow .16s var(--ease),border-color .16s var(--ease);
}
.stage--quiet,.stage--mini{cursor:default}
.stage--mini{width:120px}
.stage.is-over{box-shadow:var(--ring);border-color:var(--accent)}
.stage > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* скрим под текст: без него субтитры тонут в светлых кадрах юзера */
.stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(13,14,19,.55),rgba(13,14,19,0) 45%);
}
.stage .cap{
  position:absolute;left:7%;right:7%;bottom:22%;z-index:2;text-align:center;
  color:rgba(255,255,255,.92);display:flex;flex-direction:column;gap:4px;
}
.stage .cap .s{font-weight:600;font-size:clamp(11px,4.2cqw,14px);line-height:1.25;min-height:1em}
.stage .cap .big{
  font-weight:700;font-size:clamp(26px,13cqw,44px);line-height:1.02;letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.stage--mini .cap .big{font-size:15px}
/* примерка стилей субтитров в живом кадре: плашка и караоке */
.stage .cap[data-substyle="box"] .s{display:none}
.stage .cap[data-substyle="box"] .big{
  align-self:center;padding:.12em .5em;border-radius:.3em;
  font-size:clamp(20px,9.5cqw,32px);
  box-shadow:0 .35em 1em rgba(0,0,0,.35);
}
.stage .cap[data-substyle="karaoke"] .big{font-size:clamp(15px,6cqw,20px);letter-spacing:0}
.stage .cap.is-in .big{animation:capIn .22s var(--roll) both}
@keyframes capIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.stage .chipdemo{
  position:absolute;left:8%;top:8%;z-index:2;
  padding:4px 12px;border-radius:var(--r-pill);
  color:#0d0e13;font-weight:600;font-size:12px;
}
.stage-hint{
  position:absolute;left:0;right:0;top:34%;z-index:2;text-align:center;
  color:rgba(255,255,255,.55);font-size:12.5px;letter-spacing:.02em;
}
/* на таче «кинь в кадр» — пустой жест: там тап по кадру ведёт в галерею,
   поэтому подсказка своя для мыши и своя для пальца */
.if-tap{display:none}
@media (pointer:coarse){
  .if-drag{display:none}
  .if-tap{display:inline}
}

/* выбранный файл */
.filecard{
  display:flex;align-items:center;gap:12px;
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r);
  padding:12px 14px;
}
.filecard .thumb{width:34px;height:34px;border-radius:var(--r-sm);object-fit:cover;flex:none}
.filecard b{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filecard .meta{font-size:12.5px;color:var(--dim)}
.filecard .x{margin-left:auto}

/* ============ ПАЛИТРА — точки, цвет смотрят на кадре ============ */
.f-label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:8px}
.dots{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:2px}
.dot{
  width:28px;height:28px;border-radius:50%;border:1px solid rgba(13,16,32,.1);flex:none;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease);
}
.dot:hover{transform:scale(1.12)}
.dot.is-on{box-shadow:0 0 0 3px var(--panel),0 0 0 5px currentColor;transform:scale(1.12)}
.dot-name{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px;color:var(--dim);
  margin-left:4px;font-variant-numeric:tabular-nums;
}

/* шрифты — ряд поменьше */
.fontrow{display:flex;flex-wrap:wrap;gap:8px}
.fontchip{
  padding:8px 15px;border-radius:var(--r-pill);border:1px solid var(--line-2);
  background:var(--panel);color:var(--muted);font-size:13.5px;font-weight:700;
  transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease),box-shadow .16s var(--ease);
}
.fontchip:hover{border-color:var(--rule);color:var(--ink)}
.fontchip.is-on{background:var(--accent);border-color:transparent;color:var(--accent-ink);box-shadow:0 6px 16px -8px rgba(31,65,245,.7)}

/* ============ ТОЧНЫЕ НАСТРОЙКИ (раскрывашка внутри формы) ============ */
.fold{border-top:1px solid var(--line)}
.fold-toggle{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:14px 0 0;text-align:left;
}
.fold-toggle h3{flex:1;font-size:14px}
.fold-toggle .chev{transition:transform .18s var(--ease);color:var(--muted)}
.fold.is-open .fold-toggle .chev{transform:rotate(180deg)}
.fold-hint{font-size:12.5px;color:var(--dim)}
.fold-body{padding:18px 0 4px}

.ctrl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px 30px}
.ctrl{border-radius:var(--r);padding:2px 4px;transition:box-shadow .3s var(--ease),background .3s var(--ease)}
.ctrl b{display:block;font-size:13.5px;font-weight:500;margin-bottom:2px}
.ctrl small{display:block;font-size:12.5px;color:var(--dim);margin-bottom:10px}
/* подсветка ручки, которую тронул ассистент */
.ctrl.is-changed{box-shadow:var(--ring);background:var(--panel)}

/* переключатель-тумблер */
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{
  width:40px;height:24px;border-radius:var(--r-pill);flex:none;
  background:var(--panel-2);border:1px solid var(--line-2);position:relative;
  transition:background .16s var(--ease),border-color .16s var(--ease);
}
.switch .track::after{
  content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.25);
  transition:transform .16s var(--ease);
}
.switch input:checked + .track{background:var(--accent);border-color:transparent}
.switch input:checked + .track::after{transform:translateX(16px)}
.switch input:focus-visible + .track{box-shadow:var(--ring)}
.switch .t-lab{font-size:14px}

/* чипы-варианты */
.chiprow{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:var(--r-pill);border:1px solid var(--line-2);
  font-size:13px;font-weight:500;color:var(--muted);background:var(--panel);
  transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease);
}
.chip:hover{border-color:var(--rule);color:var(--ink)}
.chip.is-on{background:var(--accent);border-color:transparent;color:var(--accent-ink)}

/* ползунки — тонкая дорожка, графитовая точка */
.rangewrap{display:flex;flex-direction:column;gap:6px}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:2px;
  background:rgba(13,16,32,.16);outline:0;border-radius:2px;margin:8px 0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--warm);border:0;cursor:pointer;
}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--warm);border:0;cursor:pointer}
input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.range-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--dim)}
.range-val{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}

/* переключатель скорости — лоток-пилюля */
.seg{
  display:inline-flex;gap:2px;padding:4px;border-radius:var(--r-pill);
  background:var(--panel-2);border:1px solid var(--line-2);
}
.seg button{
  padding:6px 14px;font-size:13px;color:var(--muted);border-radius:var(--r-pill);
  font-variant-numeric:tabular-nums;
  transition:background .16s var(--ease),color .16s var(--ease),box-shadow .16s var(--ease);
}
.seg button.is-on{background:var(--panel);color:var(--ink);box-shadow:var(--lift)}

/* низ формы */
.gorow{display:flex;align-items:center;gap:14px;margin-top:var(--gap);flex-wrap:wrap}
.gorow .note{font-size:12.5px;color:var(--dim)}

/* ============ ЭКРАН РАБОТЫ ============ */
.jobwrap{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:var(--gap);align-items:start}
.jobcard .card-body{display:flex;flex-direction:column;gap:18px}

/* шаги */
.steps{display:flex;flex-direction:column;gap:2px}
.step{
  display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;
  padding:10px 6px;border-radius:var(--r);
}
.step .lab{font-size:14.5px;color:var(--dim);transition:color .2s var(--ease)}
.step time{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.step.is-done .lab{color:var(--muted)}
.step.is-done .icoball{background:var(--ok-fill);color:var(--ok-ink)}
.step.is-now .lab{color:var(--ink);font-weight:600}
.step.is-now .icoball{background:var(--accent);color:var(--accent-ink)}
.step.is-now .icoball svg{animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.progressbar{height:6px;border-radius:3px;background:var(--panel-2);overflow:hidden}
.progressbar i{display:block;height:100%;border-radius:3px;background:var(--accent);width:0;transition:width .5s var(--ease)}

/* ============ ЭКРАН ГОТОВО ============ */
.donewrap{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:var(--gap);align-items:start}
.player{
  aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;position:relative;
  background:var(--ink);border:1px solid var(--line-2);
}
.player video,.player img{width:100%;height:100%;object-fit:cover;display:block}
.player .demo-tag{
  position:absolute;left:10px;top:10px;
  padding:4px 10px;border-radius:var(--r-pill);
  background:rgba(19,20,21,.72);backdrop-filter:blur(8px);
  color:rgba(255,255,255,.85);font-size:11.5px;
}
.done-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}

/* ассистент */
.assist{border-top:1px solid var(--line);padding:18px 22px}
.assist-row{display:flex;gap:10px}
.assist-row input{
  flex:1;height:52px;padding:0 16px;border-radius:var(--r);
  background:var(--panel-2);border:1px solid var(--line-2);
  font-size:16px;min-width:0; /* меньше 16px нельзя — iOS зумит страницу при фокусе */
  transition:border-color .16s var(--ease),background .16s var(--ease),box-shadow .16s var(--ease);
}
.assist-row input:focus{outline:0;border-color:var(--accent);background:var(--panel);box-shadow:var(--ring)}
.assist-row input::placeholder{color:var(--dim)}
.assist-reply{
  margin-top:12px;display:flex;gap:10px;align-items:flex-start;
}
.assist-reply .bubble{
  background:var(--panel-2);border-radius:var(--r-lg);border-top-left-radius:var(--r-sm);
  padding:12px 16px;font-size:14px;max-width:56ch;
}
.assist-reply.is-think .bubble{color:var(--dim)}

/* ============ ОТЧЁТ О ДИКЦИИ ============ */
.report .card-body{padding-top:14px}
.report .r-row{padding:12px 0;border-top:1px solid var(--line)}
.report .r-row:first-child{border-top:0;padding-top:0}
.report .r-row > b{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:4px}
.report .r-row p{font-size:14px;line-height:1.45}
.meter{position:relative;height:14px;margin:6px 0 2px}
.meter i{display:block;position:absolute}
.meter .track{left:0;right:0;top:6px;height:2px;background:rgba(13,16,32,.12);border-radius:2px}
.meter .zone{top:4px;height:6px;background:var(--accent-soft);border-radius:3px}
.meter .dot{top:2px;width:10px;height:10px;border-radius:50%;background:var(--warm);transform:translateX(-50%)}
.meter .dot.is-out{background:var(--accent)}
.meter .m-arrow{
  position:absolute;top:-9px;transform:translateX(-50%);
  font-size:12px;color:var(--accent);line-height:1;
}
.meter-ends{display:flex;justify-content:space-between;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;color:var(--dim);margin-bottom:6px}
.wordpills{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.wordpills span{padding:4px 11px;border-radius:var(--r-pill);background:var(--panel-2);border:1px solid var(--line-2);font-size:12.5px}
.report .r-foot{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}

/* ============ МОИ РОЛИКИ ============ */
.rolls{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--gap)}
.roll{
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--lift);overflow:hidden;text-align:left;
  transition:box-shadow .16s var(--ease),transform .16s var(--ease);
}
.roll:hover{box-shadow:var(--lift-2);transform:translateY(-2px)}
.roll .cover{aspect-ratio:9/16;background:var(--panel-2);position:relative}
.roll .cover img{width:100%;height:100%;object-fit:cover;display:block}
.roll .cover .state{position:absolute;left:8px;bottom:8px}
.roll .r-meta{padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.roll .r-meta b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.roll .r-meta span{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;color:var(--dim)}

.empty{
  padding:clamp(34px,6vw,60px) 20px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.empty p{color:var(--muted);max-width:38ch}

/* ============ УВЕДОМЛЕНИЕ ============ */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);
  background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:var(--r-lg);box-shadow:var(--lift-2);
  font-size:14px;max-width:min(90vw,480px);text-align:center;
  opacity:0;pointer-events:none;z-index:60;
  transition:opacity .18s var(--ease),transform .18s var(--ease);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ============ ТЕЛЕФОН ============ */
@media (max-width:880px){
  .formwrap,.jobwrap,.donewrap{grid-template-columns:1fr}
  .stage,.jobwrap .stage{max-width:250px;margin:0 auto;width:100%}
  .stage--mini{max-width:120px}
  .stage-note{justify-content:center}
  /* на сборке первым — прогресс: человек пришёл смотреть, как идёт заливка,
     а декоративный кадр 9:16 съедал весь первый экран */
  .jobwrap .stage{order:2}
  .player{max-width:300px;margin:0 auto}
  main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  /* ряды примерки — горизонтальная лента: 14 шрифтов столбиком занимали два экрана.
     Лента вылезает под самый край карточки, срезанный чип намекает — дальше есть ещё */
  .fontrow{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    margin:0 -22px;padding:4px 22px 8px;
    scrollbar-width:none;
  }
  .fontrow::-webkit-scrollbar{display:none}
  /* flex:none + nowrap: лента не ужимает чипы до мин-ширины, «Golos Text» не ломается в две строки */
  .fontchip{scroll-snap-align:start;padding:11px 16px;flex:none;white-space:nowrap} /* повыше — под палец */
  /* точки цветов: сами крупнее, плюс невидимый ореол — зона касания ~44px */
  .dots{gap:12px}
  .dot{width:32px;height:32px;position:relative}
  .dot::after{content:"";position:absolute;inset:-6px;border-radius:50%}
  /* липкая кнопка сборки — паттерн кабинета ORBIT */
  #s-new .gorow{
    position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));z-index:20;
    background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
    padding:10px 14px;border-radius:var(--r-lg);
    border:1px solid var(--line);box-shadow:var(--lift-2);
  }
}
@media (max-width:520px){
  h1{font-size:24px}
  /* плашка: бренд и две пилюли обязаны жить в одну строку вплоть до 320px,
     поэтому размеры дышат от ширины экрана, а не фиксированы */
  .bar-wrap{padding-left:8px;padding-right:8px}
  .bar{padding:9px 10px;gap:8px}
  .bar-brand{font-size:clamp(10.5px,3.4vw,13px)}
  .bar-nav{gap:4px}
  .bar-nav button{padding:8px clamp(7px,2.4vw,10px);font-size:clamp(11px,3.4vw,12.5px)}
  .card-body,.card-head,.fold-body,.assist{padding-left:16px;padding-right:16px}
  .fontrow{margin:0 -16px;padding:4px 16px 8px} /* срез ленты — по краю карточки */
  .ctrl-grid{grid-template-columns:1fr}
  .rolls{grid-template-columns:repeat(2,1fr)}
  /* заголовок раскрывашки и подсказка в столбик — рядом им тесно */
  .fold-toggle{flex-wrap:wrap;column-gap:12px;row-gap:2px}
  .fold-toggle .fold-hint{order:4;flex-basis:100%}
  /* липкий CTA компактнее: кнопка во всю ширину, подпись одной строкой под ней */
  #s-new .gorow{flex-direction:column;align-items:stretch;gap:8px;padding:10px 12px;margin-top:12px}
  #s-new .gorow .btn{width:100%}
  #s-new .gorow .note{text-align:center;font-size:12px}
}