@font-face{font-family:"Oswald";font-weight:700;font-display:swap;
src:url(/fonts/Oswald-Bold.ttf) format("truetype")}
:root{color-scheme:dark;--bg:#141414;--card:#1c1c1c;--line:#2c2c2c;--tx:#f2ede4;
--dim:#8f8a80;--ok:#4ec98a;--bad:#e5645f;--warn:#d9a441;--acc:#c9922f;--acc-soft:#e0b25c}
*{box-sizing:border-box}
body{margin:0;padding:0 0 96px;background:var(--bg);color:var(--tx);
font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.wrap{max-width:1180px;margin:0 auto;padding:24px}
.logo{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--tx)}
.logo svg{width:26px;height:26px;display:block}
.logo span{font-size:23px;letter-spacing:-.02em}
.logo b{font-weight:800}
.logo i{font-style:normal;font-weight:800;color:var(--acc)}
h2{font-size:12px;margin:28px 0 12px;text-transform:uppercase;
letter-spacing:.09em;color:var(--dim)}
.head{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
padding-bottom:16px;border-bottom:1px solid var(--line)}
.badge{font-size:12px;padding:4px 10px;border-radius:20px;border:1px solid var(--line);
color:var(--dim)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.row{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
/* Зона загрузки — главное действие шага, поэтому стоит первой и заметна:
   светлый пунктир потолще и кружок с плюсом, чтобы читалась как кнопка. */
.drop{border:3px dashed rgba(242,237,228,.5);border-radius:16px;padding:30px;
text-align:center;color:var(--tx);cursor:pointer;transition:.15s;
display:flex;flex-direction:column;align-items:center;gap:10px}
.drop .plus{width:46px;height:46px;border-radius:50%;flex:none;
border:2px solid rgba(242,237,228,.75);display:flex;align-items:center;
justify-content:center;font-size:28px;line-height:1;padding-bottom:3px}
.drop .what{font-size:16px}
.drop:hover,.drop.over{border-color:var(--acc);background:rgba(201,146,47,.06)}
.drop:hover .plus,.drop.over .plus{border-color:var(--acc);color:var(--acc)}
input[type=text],select{background:#0d0f13;border:1px solid var(--line);color:var(--tx);
border-radius:8px;padding:9px 11px;font:inherit;width:100%}
button{background:#232733;border:1px solid var(--line);color:var(--tx);
border-radius:8px;padding:9px 14px;font:inherit;cursor:pointer}
button:hover:not(:disabled){border-color:var(--acc)}
button:disabled{opacity:.4;cursor:default}
button.primary{background:var(--acc);color:#141414;border-color:var(--acc);font-weight:700}
button.costly{border-color:var(--warn);color:var(--warn)}
video{border-radius:10px;background:#000;display:block}
.log{font:12px/1.7 ui-monospace,monospace;color:var(--dim);max-height:170px;
overflow:auto;white-space:pre-wrap}
.bar{position:fixed;left:0;right:0;bottom:0;background:#12151b;
border-top:1px solid var(--line);padding:12px 24px;display:flex;gap:14px;
align-items:center;flex-wrap:wrap}
.bar .grow{flex:1}
/* Редактор монтажа (editor.js): формат и раскладка, плеер, две дорожки и
   панель выбранного. Холст плеера — в пропорциях цели, всё внутри в px,
   пересчитанных из холста цели. */
.ed-bar{display:flex;gap:28px;flex-wrap:wrap;margin-top:12px}
.ed-langs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.ed-langs select{width:auto;padding:6px 10px;font-size:13px}
/* сцена — панель на всю ширину, как таймлайн под ней: рамка и тёмная
   подложка, плеер по центру; так видно, где кончается плеер и где
   начинается страница, а вертикальный ролик не висит в пустоте */
.ed-player{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:16px;
padding:16px 16px 12px;border:1px solid var(--line);border-radius:10px;background:#0f1013}
/* размер ставит editor.js (sizeCanvas): пропорция цели точно, без рамки —
   border съел бы пиксели из ширины, по которой считается масштаб */
.ed-canvas{position:relative;overflow:hidden;border-radius:10px;background:#000;flex:none;
box-shadow:0 0 0 1px var(--line)}
.ed-canvas video{position:absolute;border-radius:0;max-width:none;object-fit:fill}
.ed-blur,.ed-game,.ed-glow,.ed-cap,.ed-end{position:absolute}
.ed-blur{inset:0;overflow:hidden}
.ed-blur video{inset:0;width:100%;height:100%;object-fit:cover;filter:blur(18px) brightness(.75);
transform:scale(1.12)}
.ed-game{overflow:hidden}
.ed-game.carded{box-shadow:0 12px 34px rgba(10,6,30,.55),0 0 0 1px rgba(255,255,255,.12)}
.ed-cover{position:absolute;left:0;right:0}.ed-cover.top{top:0}.ed-cover.bottom{bottom:0}
.ed-glow{left:0;right:0;pointer-events:none}
.ed-cap{pointer-events:none;text-align:center;white-space:nowrap;font-family:"Oswald",sans-serif;
font-weight:700;paint-order:stroke fill;transition:none}
.ed-end{inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
.ed-end.on{opacity:1}
.ed-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center}
.ed-icon{width:44px;height:44px;padding:0;border-radius:50%;display:inline-flex;
align-items:center;justify-content:center}
.ed-icon svg{width:22px;height:22px;display:block}
.ed-note{text-align:center}
.ed-timeline{display:grid;grid-template-columns:52px 1fr;gap:8px;margin-top:12px;
user-select:none}
.ed-labels{display:grid;grid-template-rows:64px 34px;gap:6px;align-items:center}
/* isolation: z-index курсора, выбора и черты конца ролика — внутри дорожек,
   иначе при прокрутке они вылезали поверх нижней панели с кнопками */
.ed-area{position:relative;display:grid;grid-template-rows:64px 34px;gap:6px;cursor:pointer;
touch-action:none;isolation:isolate}
.ed-track{position:relative;background:#0d0f13;border:1px solid var(--line);border-radius:8px}
.ed-clip,.ed-title{position:absolute;top:3px;bottom:3px;box-sizing:border-box;border-radius:6px;
overflow:hidden;cursor:pointer;border:2px solid transparent;background-clip:padding-box}
.ed-clip{background:#2a2f3b;margin:0 1px}
.ed-clip.end,.ed-title.end{background:repeating-linear-gradient(45deg,#2b2419,#2b2419 6px,#1f1b14 6px,#1f1b14 12px)}
.ed-thumbs{display:flex;height:100%}
.ed-thumbs img{height:100%;flex:1;min-width:0;object-fit:cover;display:block;opacity:.6}
.ed-num{position:absolute;left:4px;top:3px;font:700 11px/1 ui-monospace,monospace;
background:rgba(0,0,0,.65);color:var(--tx);padding:2px 5px;border-radius:4px}
.ed-title{background:rgba(201,146,47,.16);border-color:rgba(201,146,47,.4);cursor:grab;
touch-action:none}
.ed-title:active{cursor:grabbing}
/* ручки у краёв титра: за них тянется начало и конец показа */
.ed-grip{position:absolute;top:4px;bottom:4px;width:3px;border-radius:2px;
background:rgba(224,178,92,.75);pointer-events:none}
.ed-grip.l{left:2px}.ed-grip.r{right:2px}
/* .now — что под курсором сейчас (заливка), .sel — что выбрано (рамка) */
.ed-clip.now{background:#3d4454;box-shadow:inset 0 0 0 1px rgba(242,237,228,.4)}
.ed-clip.now .ed-thumbs img{opacity:1}
.ed-title.now{background:var(--acc)}
.ed-title.now .ed-label{color:#141414}
.ed-title.now .ed-grip{background:rgba(20,20,20,.5)}
/* подпись без перевода на выбранный язык — пунктир; не влезающая — красная рамка */
.ed-title.untranslated{border-style:dashed;opacity:.7}
.ed-title.nofit{border-color:var(--bad)}
.ed-panel.busy{pointer-events:none;opacity:.5}
.ed-label{display:block;padding:0 8px;line-height:24px;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;font:700 12px/24px "Oswald",sans-serif;text-transform:uppercase;
letter-spacing:.02em;color:var(--acc-soft)}
.ed-clip.end .ed-label{line-height:54px;color:var(--dim);font-family:inherit;text-transform:none}
.ed-clip.sel,.ed-title.sel{border-color:#fff;box-shadow:0 0 0 2px var(--acc);z-index:1}
.ed-head{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1.5px;background:#fff;
pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.6);z-index:2}
.ed-head::before{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);
border:7px solid transparent;border-top-color:#fff;border-bottom:0}
/* Unity: концовка не в ролике — черта конца ролика, свой блок, картинка на затемнении */
.ed-divider{position:absolute;top:-6px;bottom:-6px;width:0;border-left:2px dashed var(--acc);
pointer-events:none;z-index:1}
.ed-divider span{position:absolute;top:-14px;left:5px;white-space:nowrap;
font:11px/1 ui-monospace,monospace;color:var(--acc-soft)}
.ed-clip.end.unity,.ed-title.end.unity{background:repeating-linear-gradient(135deg,#1b2430,#1b2430 6px,
#141b24 6px,#141b24 12px)}
.ed-endimg{inset:0;display:flex;align-items:center;justify-content:center;background:rgba(8,6,16,.9)}
.ed-endframe{position:relative;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.ed-endframe img{display:block;width:100%;height:100%;border-radius:0}
.ed-cropzone{position:absolute;box-sizing:border-box;border:1px dashed rgba(255,255,255,.75);
background:rgba(255,255,255,.07)}
.ed-endlabel{position:absolute;left:8px;bottom:8px;font:11px/1.2 ui-monospace,monospace;color:#fff;
background:rgba(0,0,0,.6);padding:3px 6px;border-radius:4px}
.ed-safe{position:absolute;left:0;right:0;pointer-events:none;background:rgba(0,0,0,.2)}
.ed-safe.top{top:0;border-bottom:1px dashed rgba(255,255,255,.6)}
.ed-safe.bottom{bottom:0;border-top:1px dashed rgba(255,255,255,.6)}
.ed-safe span{position:absolute;right:6px;font:10px/1 ui-monospace,monospace;color:rgba(255,255,255,.8)}
.ed-safe.top span{bottom:4px}.ed-safe.bottom span{top:4px}
.endimgs{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px;align-items:flex-end}
.endimgs figure{margin:0}
.endimgs img{display:block;height:96px;width:auto;border-radius:6px;box-shadow:0 0 0 1px var(--line)}
.endimgs figcaption{margin-top:4px}
.out .soft{color:var(--warn)}
/* плеер и таймлайн липнут к верху, список титров едет под ними */
.ed-top{position:sticky;top:0;z-index:5;background:var(--bg);padding-bottom:10px}
.ed-list{margin-top:8px;border:1px solid var(--line);border-radius:10px}
.ed-row{display:flex;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line);
border-left:3px solid transparent;cursor:pointer}
.ed-row:last-child{border-bottom:0}
.ed-row:hover{background:#1a1a18}
.ed-row.sel{background:#20201c;border-left-color:var(--acc);cursor:default}
.ed-row.now .num{background:var(--acc);color:#141414}
.ed-row .thumb{width:36px;height:64px;border-radius:4px;background:#0d0f13;flex:none;overflow:hidden;
position:relative;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--dim)}
.ed-row .thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:.7}
/* номер клипа — отдельная колонка слева, крупно и ярко: по нему титр
   находится с таймлайна; у текущего в плеере — цветом акцента */
.ed-row .no{width:30px;flex:none;font:700 17px/64px ui-monospace,monospace;color:var(--acc-soft);
text-align:center}
.ed-row.now .no{color:var(--acc)}
.ed-row .body{flex:1;min-width:0}
.ed-row .meta{font:12px ui-monospace,monospace;color:var(--dim);margin-bottom:4px}
.ed-row .src{font-size:13px;color:var(--dim);margin-bottom:4px}
.ed-row input[type=text]{padding:7px 10px}
.ed-row .mark{font-size:12px;margin-top:4px}
/* автодополнение: варианты копирайтинга выпадают под полем. Непрозрачный
   фон обязателен — под списком строки соседних титров. (.suggest занят
   подсказкой редактора среза, поэтому другое имя) */
.field{position:relative}
.complete{position:absolute;left:0;right:0;top:100%;z-index:6;margin-top:4px;background:#1c1d22;
border:1px solid #3a3c44;border-radius:8px;max-height:230px;overflow:auto;
box-shadow:0 10px 28px rgba(0,0,0,.6)}
.complete div{padding:8px 11px;font-size:14px;color:var(--tx);cursor:pointer}
.complete div:hover,.complete div.on{background:#2c2e36}
.ed-row .more{margin-top:10px}
.ed-row .more .chips{margin:0 0 10px}
.ed-row .tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--dim)}
.ed-row .tools button{font-size:12px;padding:5px 10px}
.ed-why{font-size:13px;color:var(--dim);margin:8px 0 0;line-height:1.45}
@media (max-width:640px){.ed-timeline{grid-template-columns:40px 1fr}}
.why{font-size:12px;color:var(--dim);margin-top:8px;line-height:1.45}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{font-size:13px;padding:6px 11px;border-radius:16px;background:#0d0f13;
border:1px solid var(--line);cursor:pointer}
.chip:hover{border-color:var(--acc)}
.chip.off{opacity:.4;cursor:not-allowed}.chip.off:hover{border-color:var(--line)}
.chip.on{background:var(--acc);color:#141414;border-color:var(--acc)}
.text-row{margin-bottom:20px}
.text-row .now{font-size:19px;font-weight:700;color:var(--acc-soft);margin:6px 0}
.mono{font:12px ui-monospace,monospace;color:var(--dim)}
/* Два слоя: сплошной — сделанные шаги, полосатый — тот, что идёт сейчас.
   Иначе на первом (самом долгом) шаге бар честно стоял бы на нуле и читался
   как зависший. */
.progress{position:relative;height:8px;border-radius:6px;background:#0d0f13;
border:1px solid var(--line);overflow:hidden;margin:14px 0 7px}
.progress i,.progress u{position:absolute;top:0;bottom:0;left:0;width:0;
transition:width .3s ease,left .3s ease}
.progress i{background:var(--acc)}
.progress u{background:repeating-linear-gradient(115deg,
var(--acc) 0 9px,transparent 9px 18px);opacity:.5;
animation:crawl .7s linear infinite}
@keyframes crawl{to{background-position:18px 0}}
/* Длительность неизвестна (планирование, тексты) — бегунок вместо доли:
   рисовать проценты, которых мы не знаем, хуже, чем не рисовать их вовсе */
.progress.wait i{width:38%;transition:none;
background:linear-gradient(90deg,transparent,var(--acc),transparent);
animation:runner 1.3s ease-in-out infinite}
@keyframes runner{from{transform:translateX(-110%)}to{transform:translateX(330%)}}
.prog-label{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.prog-label span:last-child{flex:none;color:var(--acc-soft)}
.ok{color:var(--ok)}.bad{color:var(--bad)}.warn{color:var(--warn)}
.free{font-size:11px;color:var(--ok);margin-left:6px}
.hide{display:none}

/* Результат надо отличать от исходника: первый кадр готового ролика — тот же
   геймплей, и без подписи его путают с записью. */
.dl{display:inline-block;background:var(--acc);color:#141414;font-weight:700;
padding:9px 16px;border-radius:8px;text-decoration:none}
.dl:hover{background:var(--acc-soft)}

.must{color:var(--bad);font-weight:700}
.optional{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
textarea{width:100%;background:#0d0f13;border:1px solid var(--line);color:var(--tx);
border-radius:8px;padding:9px 11px;font:inherit;resize:vertical}

/* ---------- мастер ---------- */
h1{font-size:24px;margin:22px 0 6px;letter-spacing:-.01em}
.lead{color:var(--dim);margin:0 0 18px;max-width:760px}
#stepper{list-style:none;display:flex;gap:4px;padding:0;margin:16px 0 0;flex-wrap:wrap}
#stepper li{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--dim);
padding:6px 10px;border-radius:20px;border:1px solid transparent;cursor:default}
#stepper li i{display:inline-flex;width:20px;height:20px;border-radius:50%;
align-items:center;justify-content:center;font-style:normal;font-size:11px;
border:1px solid var(--line)}
#stepper li.done,#stepper li.open{color:var(--tx);cursor:pointer}
#stepper li.open i{border-color:var(--acc-soft)}
#stepper li.done i{background:var(--acc);color:#141414;border-color:var(--acc)}
#stepper li.current{border-color:var(--acc);color:var(--acc)}
#stepper li.current i{border-color:var(--acc)}
#stepper li.locked{opacity:.45}
.step{display:none}
.step.on{display:block}

table.list{width:100%;border-collapse:collapse}
table.list td{padding:10px 8px;border-top:1px solid var(--line);vertical-align:middle}
table.list tr:first-child td{border-top:0}
.empty{color:var(--dim);padding:24px;text-align:center}
table.list td.thumb{width:44px;padding-right:16px}
table.list td.thumb img,table.list td.thumb .blank{display:block;width:40px;
height:70px;object-fit:cover;border-radius:6px;background:#0d0f13;
border:1px solid var(--line)}
table.list a.open{color:var(--tx);font-weight:700;text-decoration:none}
table.list a.open:hover{color:var(--acc);text-decoration:underline}
/* Удаление — кружок с крестиком: подпись «Удалить» рядом с «Открыть» читалась
   как равноправное действие, хотя одно из них необратимо. */
.icon-del{width:26px;height:26px;padding:0;flex:none;border-radius:50%;
border:1px solid rgba(229,100,95,.45);background:rgba(229,100,95,.08);
color:var(--bad);font-size:16px;line-height:1;display:inline-flex;
align-items:center;justify-content:center}
.icon-del:hover:not(:disabled){border-color:var(--bad);
background:rgba(229,100,95,.22)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
/* Площадки — две строки по две: так пары App Store и Google читаются вместе */
#targets{grid-template-columns:repeat(2,minmax(260px,1fr))}
@media (max-width:680px){#targets{grid-template-columns:1fr}}
.tcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;
padding:14px;cursor:pointer;transition:.12s}
.tcard:hover{border-color:var(--acc-soft)}
.tcard[aria-pressed=true]{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.tcard .head{display:flex;align-items:center;gap:10px}
.tcard .head b{font-size:15px}
.tcard.on{background:#20201c}
input[type=checkbox]{width:17px;height:17px;flex:none;margin:0;
accent-color:var(--acc);pointer-events:none}
/* выбор языков, как в Play Console: таблица выбранных с основным в первой
   строке и панель добавления с поиском и галочками */
.langtable{border:1px solid var(--line);border-radius:8px;margin-top:8px}
.langrow{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:14px;
border-bottom:1px solid var(--line)}
.langrow:last-child{border-bottom:0}
.langrow .name{flex:1}
.langrow .tag{font-size:12px;color:var(--dim)}
.langrow .main{font-size:12px;color:#141414;background:var(--acc);border-radius:10px;padding:2px 10px;white-space:nowrap}
.langrow button{font-size:12px;padding:3px 9px;white-space:nowrap}
.langadd{margin-top:10px;border:1px solid var(--line);border-radius:8px;padding:12px}
.langadd input[type=text]{margin-bottom:8px}
.langlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2px 12px}
.langlist label{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:14px;cursor:pointer}
.langlist input[type=checkbox]{pointer-events:auto;cursor:pointer}
.tcard .size{color:var(--acc-soft);font:12px ui-monospace,monospace;margin:4px 0}
.tcard ul{margin:8px 0 0;padding-left:16px;color:var(--dim);font-size:12px}
.tcard .orients{display:flex;gap:6px;margin-top:8px}
.tcard .orients .chip{display:flex;align-items:center;gap:6px;font-size:12px;
padding:4px 9px}
.tcard .orients .chip input[type=checkbox]{width:13px;height:13px}

details.howto{border:1px solid var(--line);border-radius:12px;background:var(--card);
padding:12px 16px;margin-bottom:14px}
details.howto > summary{cursor:pointer;font-weight:600;list-style:none}
details.howto > summary::before{content:"▸ ";color:var(--acc)}
details.howto[open] > summary::before{content:"▾ "}
details.howto[open] > summary{margin-bottom:10px}
details.howto #need p{margin:4px 0}
.tips details{margin-top:8px;border:1px solid var(--line);border-radius:10px;
padding:8px 12px;background:#0d0f13}
.tips summary{cursor:pointer;font-weight:600}
.tips p{margin:8px 0 2px;color:var(--dim);font-size:14px}
.uprow{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px 12px;
background:var(--card);border:1px solid var(--line);border-radius:10px;flex-wrap:wrap}
.uprow .progress{flex:1;min-width:140px;margin:0}
.uprow .name{min-width:160px}

#usage-summary{margin-top:14px}
#usage-summary .msg{padding:10px 12px;margin:6px 0;font-size:14px}
.msg.ok{color:var(--ok);background:rgba(78,201,138,.07)}
.rec{margin-top:14px}
.rec .head-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge.warn{border-color:var(--warn);color:var(--warn)}
.badge.bad{border-color:var(--bad);color:var(--bad)}
.badge.ok{border-color:var(--ok);color:var(--ok)}
.msg{font-size:13px;margin:4px 0;padding:6px 10px;border-radius:8px;background:#0d0f13}
.msg.bad{color:var(--bad)}.msg.warn{color:var(--warn)}.msg.note{color:var(--dim)}

.text-row .at,.ed-row .at{display:inline-flex;align-items:center;gap:6px;font-size:12px;
color:var(--dim)}
.text-row .at{margin-left:12px}
.text-row .at input,.ed-row .at input{width:64px;background:#0d0f13;border:1px solid var(--line);
color:var(--tx);border-radius:8px;padding:4px 8px;font:inherit}
.caption-edit{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.caption-stage{position:relative;height:420px;background:#000;border-radius:8px;overflow:hidden;
user-select:none;touch-action:none}
.caption-stage canvas.shot{position:absolute;inset:0;width:100%;height:100%;display:block}
.caption-stage .shade{position:absolute;background:rgba(0,0,0,.62)}
.caption-stage .shade.top{top:0;left:0;right:0}.caption-stage .shade.bottom{bottom:0;left:0;right:0}
.caption-stage .shade.left{left:0}.caption-stage .shade.right{right:0}
.caption-stage .frame{position:absolute;border:1px dashed rgba(224,178,92,.6);pointer-events:none;
box-sizing:border-box}
.caption-stage .band-zone{position:absolute;pointer-events:none;box-sizing:border-box;
background:rgba(46,36,69,.75);border-bottom:1px solid var(--acc-soft)}
.caption-stage .cap-band{position:absolute;left:0;right:0;pointer-events:none}
.caption-stage .caption{position:absolute;transform:translate(-50%,-50%);cursor:grab;
font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;line-height:1.02;
text-align:center;white-space:nowrap;paint-order:stroke fill;-webkit-text-stroke:0 transparent}
.caption-stage .caption:active{cursor:grabbing}
.caption-stage .caption.locked{cursor:default}
.cap-note{max-width:520px}
.crop{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start;margin-top:8px}
.crop-view{display:flex;flex-direction:column;gap:10px}
.scrub-row{display:flex;align-items:center;gap:10px;margin:0 60px}
.scrub{flex:1;accent-color:var(--acc);min-width:120px}
.scrub-row .at{white-space:nowrap}
.crop-stage .fill{position:absolute;pointer-events:none}
.group-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;
color:var(--dim);margin-top:6px}
.band-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.crop-fields input.px{width:84px;background:#0d0f13;border:1px solid var(--line);
color:var(--tx);border-radius:8px;padding:6px 9px;font:inherit}
.crop-fields input.px:disabled{opacity:.45}
.effect{flex:1;min-width:180px}
.edges{display:flex;gap:10px;flex-wrap:wrap}
.edge-in{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--dim)}
.check-row{display:flex;align-items:center;gap:8px;cursor:pointer;flex-wrap:wrap}
.check-row.hide{display:none}
.check-row input[type=checkbox]{accent-color:var(--acc);width:16px;height:16px;margin:0}
.check-row input.px{width:72px;padding:4px 8px}
.auto-tag{font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:10px;
padding:1px 7px}
.crop-stage{position:relative;height:360px;background:#000;border-radius:8px;
user-select:none;touch-action:none;margin:0 60px}
.crop-stage img{height:100%;width:100%;display:block;border-radius:8px;object-fit:fill}
.crop-stage .shade{position:absolute;background:rgba(0,0,0,.62);pointer-events:none}
.crop-stage .shade.t,.crop-stage .shade.b{left:0;right:0}
/* Рамка «что останется»: тело двигает, восемь ручек тянут. Зона нажатия у
   ручки вдвое больше видимого квадрата — иначе на тачпаде не поймать. */
.crop-stage .rect{position:absolute;border:2px solid var(--acc);box-sizing:border-box;cursor:move}
.crop-stage .rect .size{position:absolute;left:6px;bottom:6px;font-size:11px;
background:rgba(20,20,20,.75);color:var(--acc-soft);padding:2px 7px;border-radius:10px;
pointer-events:none;white-space:nowrap}
.crop-stage .h{position:absolute;width:24px;height:24px;margin:-13px 0 0 -13px}
.crop-stage .h::before{content:"";position:absolute;left:6px;top:6px;width:12px;height:12px;
background:var(--acc);border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.crop-stage .h.n,.crop-stage .h.s{left:50%;width:40px;margin-left:-20px}
.crop-stage .h.n::before,.crop-stage .h.s::before{left:8px;top:9px;width:24px;height:6px}
.crop-stage .h.e,.crop-stage .h.w{top:50%;height:40px;margin-top:-20px}
.crop-stage .h.e::before,.crop-stage .h.w::before{top:8px;left:9px;width:6px;height:24px}
.crop-stage .h.nw,.crop-stage .h.w,.crop-stage .h.sw{left:0}
.crop-stage .h.ne,.crop-stage .h.e,.crop-stage .h.se{left:100%}
.crop-stage .h.nw,.crop-stage .h.n,.crop-stage .h.ne{top:0}
.crop-stage .h.sw,.crop-stage .h.s,.crop-stage .h.se{top:100%}
.crop-stage .h.nw,.crop-stage .h.se{cursor:nwse-resize}
.crop-stage .h.ne,.crop-stage .h.sw{cursor:nesw-resize}
.crop-stage .h.n,.crop-stage .h.s{cursor:ns-resize}
.crop-stage .h.e,.crop-stage .h.w{cursor:ew-resize}
.crop-stage .frame{position:absolute;border:2px dashed var(--acc-soft);pointer-events:none;
box-sizing:border-box}
.crop-stage .pad{position:absolute;pointer-events:none;
background:repeating-linear-gradient(45deg,rgba(224,178,92,.35) 0 6px,transparent 6px 12px)}
.crop-fields{display:flex;flex-direction:column;gap:10px;min-width:300px;flex:1}

.estimate{display:flex;flex-direction:column;gap:6px}
.estimate .line{display:flex;justify-content:space-between;gap:12px}
.cost{font-size:20px;font-weight:700;color:var(--acc-soft)}

#outputs-actions{margin-top:14px;display:flex;align-items:center;gap:10px}
.outputs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;
margin-top:14px}
.out{border-color:var(--line)}
.out.ready{border-color:var(--acc)}
.out.muted{opacity:.55}
.out.stale{border-color:var(--warn)}
.out video{display:block;margin:8px auto 0;max-width:100%}
.out video.portrait{width:220px}
.out video.landscape{width:100%;max-width:420px}
.out .title{font-weight:700}
.out .ytnote{color:var(--dim);font-size:12px;margin-top:8px}

#toasts{position:fixed;right:18px;bottom:82px;display:flex;flex-direction:column;gap:8px;z-index:20}
.toast{background:#232733;border:1px solid var(--line);border-radius:10px;padding:10px 14px;
font-size:13px;max-width:360px;transition:opacity .5s}
.toast.bad{border-color:var(--bad)}.toast.ok{border-color:var(--ok)}.toast.warn{border-color:var(--warn)}
.toast.gone{opacity:0}
button.link{background:none;border:0;color:var(--acc);padding:0;cursor:pointer;text-decoration:underline}
@media (max-width:640px){.crop-stage{margin:0 40px;height:280px}.wrap{padding:14px}
.caption-stage{height:320px}}
#stepper.hide{display:none}
.suggest{font-size:12px;color:var(--warn);background:rgba(217,164,65,.08);
border:1px solid rgba(217,164,65,.3);border-radius:8px;padding:8px 10px;line-height:1.5}

/* Хлебные крошки: где я и куда выйти. Название проекта крупнее ссылки, но
   мельче заголовка шага — крошки отвечают «где», заголовок «что делаю». */
#crumbs{display:flex;align-items:baseline;gap:9px;margin:18px 0 0}
#crumbs a{color:var(--dim);text-decoration:none;font-size:13px}
#crumbs a:hover{color:var(--acc)}
#crumbs .sep{color:var(--line)}
#crumbs b{font-size:17px;letter-spacing:-.01em}
#crumbs.hide{display:none}
#stepper{margin-top:12px}

/* Кредиты: бейдж в шапке и витрина. Витрина — модалка, а не шаг мастера:
   пополнять приходится посреди работы, и терять место в мастере нельзя. */
.badge.credits{cursor:pointer;font:inherit;font-size:12px;color:var(--acc-soft);
border-color:var(--acc-soft)}
.badge.credits:hover{border-color:var(--acc);color:var(--acc)}
.badge.credits.low{border-color:var(--warn);color:var(--warn)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.66);z-index:40;
display:flex;align-items:flex-start;justify-content:center;padding:32px 16px;
overflow:auto}
.sheet{background:var(--card);border:1px solid var(--line);border-radius:14px;
padding:20px 22px;width:100%;max-width:620px}
.sheet-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sheet-head b{font-size:18px}
.sheet h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;
color:var(--dim);margin:22px 0 8px;font-weight:600}
.sheet .balance{font-size:30px;font-weight:800;color:var(--acc-soft);line-height:1.1}
table.tariff,table.ledger{width:100%;border-collapse:collapse}
table.tariff td,table.ledger td{border-top:1px solid var(--line);padding:8px 4px;
vertical-align:top;font-size:13px}
table.tariff td.kind{white-space:nowrap;width:1%}
table.tariff td.num,table.ledger td.num{text-align:right;white-space:nowrap;
font-weight:700;color:var(--acc-soft)}
table.ledger td:first-child{white-space:nowrap;width:1%}
.packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.pack{text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
background:#0d0f13;color:var(--tx);cursor:pointer;font:inherit}
.pack:hover{border-color:var(--acc)}
.pack.best{border-color:var(--acc-soft)}
.pack.test{border-style:dashed}
.pack .pt{font-weight:700}
.pack .pc{color:var(--acc-soft);font-weight:700;margin-top:2px}
.pack .pu{font:12px ui-monospace,monospace;color:var(--dim);margin:2px 0 4px}

/* Аккаунт и выход. Выход вынесен в шапку отдельной кнопкой, а не спрятан в
   окне аккаунта: он нужен с любого экрана, в том числе изнутри проекта, где
   человек и вспоминает, что сидит не под тем адресом. */
.badge.account{cursor:pointer;font:inherit;font-size:12px}
.badge.account:hover{border-color:var(--acc);color:var(--acc)}
.badge.logout{cursor:pointer;font:inherit;font-size:12px}
.badge.logout:hover{border-color:var(--bad);color:var(--bad)}