/* Светлый стиль макета 16.10. 1.146.0 - масштаб и раскладка по Brandly (их стили экрана монтажа, Юра 16.10:
   «сделай приближенно к Брендли… по размеру кнопок, по расположению»): колонка до 560 px, большой вертикальный
   образец со стрелками стиля, при прокрутке - закреплённая полоса образца, плитки оформления по 3, «?» у функций. */
:root {
  --bg: #F5F4F8; --surface: #FFFFFF; --surface-2: #FAF9FC; --ink: #16151A; --ink-2: #4A4657; --mute: #8C889B; --faint: #C9C5D3;
  --line: #ECEAF1; --line-2: #DEDBE6; --accent: #16151A;
  --grad: linear-gradient(135deg, #FFA41B, #FF4F8B 55%, #A04BFF); --grad-h: linear-gradient(90deg, #FF8A3D, #FF4F8B 50%, #A04BFF);
  --pink: #FF4F8B; --r: 18px; --r-sm: 14px; --sh: 0 2px 10px rgba(30,20,60,.06);
  --red-bg: #FFF1F2; --red: #E5484D; --red-text: #D1343A;
  --nav-h: 72px; --safe: env(safe-area-inset-bottom);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Golos Text', -apple-system, system-ui, sans-serif; font-size: 15px; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
#app { min-height: 100vh; display: flex; flex-direction: column; }
.top, main { width: 100%; max-width: 560px; margin: 0 auto; }
.top { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px 0; }
.brand { display: flex; align-items: center; gap: 7px; }
.logo { width: 26px; height: 26px; border-radius: 8px; background: var(--grad); display: flex; align-items: center; justify-content: center; }
.brand-name, .h1 { font-family: Unbounded, 'Golos Text', sans-serif; font-weight: 800; }
.brand-name { font-size: 16px; }
.pill { background: var(--surface); border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 700; box-shadow: var(--sh); }
main { flex: 1; padding: 8px 16px calc(var(--nav-h) + 24px + var(--safe)); }
.mn { display: flex; flex-direction: column; }
.mn > section { margin-top: 26px; display: flex; flex-direction: column; }
.mn > section:first-child, .mn > .h1 + .p + section { margin-top: 14px; }
.loading, .empty { color: var(--mute); text-align: center; padding: 32px 0; font-size: 14px; }
.h1 { font-size: 20px; margin: 4px 0 6px; }
.p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.muted { font-size: 13px; color: var(--mute); }
.center { text-align: center; display: flex; justify-content: center; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card { background: var(--surface); border-radius: var(--r); box-shadow: var(--sh); }

/* подписи разделов и «?» */
.lbl { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; font-weight: 800; color: var(--ink-2); }
.help { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface-2); color: var(--mute);
  font-size: 12px; font-weight: 800; line-height: 1; display: grid; place-items: center; flex-shrink: 0; }

/* поле видео */
.drop { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 2px dashed var(--mute); border-radius: var(--r); padding: 18px 18px; background: transparent; }
.drop.filled { border-style: solid; border-color: var(--line-2); background: var(--surface); }
.drop .grow b { font-size: 15px; font-weight: 700; }
.drop .grow span { font-size: 13px; color: var(--mute); }
.drop .plus { width: 36px; height: 36px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 22px; display: grid; place-items: center; flex-shrink: 0; }
.drop .ok { width: 24px; height: 24px; border-radius: 50%; background: #E6F6EC; color: #1E8A4C; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.drop .spin { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--pink); animation: spin .7s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.dprog { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--grad-h); transition: width .2s; }
.grow { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.grow b { font-size: 15px; font-weight: 700; }
.grow span { font-size: 13px; color: var(--mute); }

/* образец и стиль */
.lead { align-items: center; }
.hero { position: relative; width: 67%; max-width: 340px; border-radius: var(--r); overflow: hidden; background: #1c1924; box-shadow: 0 8px 24px rgba(30,20,60,.16); }
.hero .tag { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0,0,0,.4); padding: 4px 9px; border-radius: 999px; }
.crop { position: relative; overflow: hidden; background: #1c1924; width: 100%; }
.crop img { display: block; width: 100%; height: 100%; }
.style-row { display: flex; align-items: center; justify-content: center; width: 67%; max-width: 340px; margin-top: 14px; padding: 3px; border-radius: 999px; background: var(--surface); box-shadow: var(--sh); }
.style-row .chev { width: 32px; height: 32px; font-size: 22px; color: var(--ink-2); display: grid; place-items: center; }
.style-name { flex: 1; text-align: center; padding: 6px 0; font-size: 15px; font-weight: 800; }
.dots { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
.dots button { width: 6px; height: 6px; border-radius: 3px; background: var(--line-2); transition: width .2s; }
.dots button.on { width: 16px; background: var(--ink); }
.lead .center { margin-top: 8px; }
.mini { position: fixed; z-index: 10; top: 8px; left: 0; right: 0; max-width: 560px; margin: 0 auto; padding: 0 16px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.mini.on { opacity: 1; visibility: visible; transform: none; }
.mini .crop { height: clamp(92px, 15vh, 120px); border-radius: var(--r); box-shadow: 0 6px 18px rgba(0,0,0,.22); aspect-ratio: auto !important; }
.mini .crop img { object-fit: cover; }

/* выбор: цвет - ряд, размер и анимация - овальные переключатели */
.hscroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 4px; }
.hscroll::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--line-2); background: var(--surface);
  border-radius: 999px; padding: 9px 15px; font-size: 14px; font-weight: 700; }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.sw-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); flex-shrink: 0; }
.pills { display: flex; padding: 3px; border-radius: 999px; background: var(--surface); box-shadow: var(--sh); }
.pills button { flex: 1; padding: 10px 6px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.pills button.on { background: var(--accent); color: #fff; }

/* переключатели */
.sw { width: 44px; height: 26px; border-radius: 999px; background: var(--line-2); flex-shrink: 0; position: relative; transition: background .15s; }
.sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.sw.on { background: var(--ink); }
.sw.on::after { transform: translateX(18px); }
.sw.sm { width: 36px; height: 22px; }
.sw.sm::after { width: 16px; height: 16px; }
.sw.sm.on::after { transform: translateX(14px); }
.cut-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); }
.cut-ic { width: 28px; height: 28px; border-radius: 8px; background: var(--grad); color: #fff; display: grid; place-items: center; flex-shrink: 0; font-size: 15px; }
.cut-row b { font-size: 14.5px; font-weight: 700; }
.trow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px 0; font-size: 14.5px; font-weight: 600; }
.field { width: 100%; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); padding: 11px 13px; font: inherit; font-size: 16px; resize: none; color: var(--ink); }
.field:focus { outline: none; border-color: var(--pink); }

/* плитки оформления */
.opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.opt { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 86px; padding: 10px 8px 8px 10px;
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.ohead { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
.ohead b { font-size: 12.5px; font-weight: 700; line-height: 1.25; hyphens: auto; overflow-wrap: break-word; min-width: 0; }
.ohead .help { margin-top: -4px; }
.ofoot { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; }
.ofoot span:first-child { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cyc { color: var(--ink-2); font-size: 18px; flex-shrink: 0; }

/* музыка под спойлером */
.spoiler { border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; }
.spoiler summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px; cursor: pointer; }
.spoiler summary::-webkit-details-marker { display: none; }
.spoiler summary b { font-size: 14.5px; font-weight: 700; }
.spoiler summary .val { flex: 1; text-align: right; font-size: 13px; color: var(--mute); }
.chev2 { color: var(--mute); font-size: 18px; transition: transform .2s; }
.spoiler[open] .chev2 { transform: rotate(90deg); }
.spoiler-body { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 10px; }
.list { overflow: hidden; }
.row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--line); width: 100%; text-align: left; }
.row:last-child { border-bottom: 0; }
.row .name { flex: 1; font-size: 14.5px; }
.row .val { font-size: 14px; color: var(--mute); max-width: 55%; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; }
.row.on .dot { border: 0; background: var(--grad); box-shadow: inset 0 0 0 4px #fff, 0 0 0 2px var(--pink); }
.track { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-top: 1px solid var(--line); cursor: pointer; }
.track .play { width: 30px; height: 30px; border-radius: 50%; background: var(--line); display: grid; place-items: center; flex: none; font-size: 11px; }
.track .play.on { background: var(--grad); color: #fff; }
.track .tname { flex: 1; font-size: 14.5px; }
.track .pick { padding: 6px 11px; border-radius: 999px; border: 1.5px solid var(--line-2); font-size: 12.5px; font-weight: 700; }
.track .pick.on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* кнопка «Смонтировать» - в конце ленты, как у Brandly (не плавает над меню) */
.mbar { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 28px; padding-bottom: 10px; }
.mbar-info { display: flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.mbar-info .cap { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.btn { border-radius: 999px; padding: 14px 20px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 800; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.2; }
.btn.light { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line-2); margin-top: 12px; }
.btn.grad { background: var(--grad); box-shadow: 0 8px 20px rgba(255,79,139,.28); }
.btn:disabled { opacity: .45; box-shadow: none; }
.btn .bt { font-size: 15px; font-weight: 800; }
.btn .bs { font-size: 11px; font-weight: 600; opacity: .9; }

/* окно объяснения «?» */
.sheet { position: fixed; inset: 0; z-index: 30; background: rgba(15,12,22,.4); display: flex; align-items: flex-end; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .2s; }
.sheet.on { opacity: 1; visibility: visible; }
.sheet-card { width: 100%; max-width: 560px; background: var(--surface); border-radius: 22px 22px 0 0; padding: 22px 22px calc(18px + var(--safe)); transform: translateY(20px); transition: transform .2s; }
.sheet.on .sheet-card { transform: none; }
.sheet h4 { margin: 0 0 8px; font-family: Unbounded, sans-serif; font-size: 18px; font-weight: 800; }
.sheet p { margin: 0 0 18px; font-size: 14.5px; font-weight: 500; line-height: 1.5; color: var(--ink-2); }

/* нижнее меню - размеры Brandly */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(var(--nav-h) + var(--safe)); padding: 0 4px var(--safe);
  display: grid; grid-template-columns: repeat(5, minmax(0, 112px)); justify-content: center; align-items: center;
  background: var(--surface); border-top: 1px solid var(--line); }
.nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px; color: var(--mute); font-size: 10.5px; font-weight: 600; }
.nav button svg { width: 23px; height: 23px; }
.nav button.on { color: var(--ink); font-weight: 700; }
.nav .tile { width: 34px; height: 26px; border-radius: 9px; background: var(--grad); display: grid; place-items: center; }
.nav .tile svg { width: 16px; height: 16px; }
.nav .nav-unique { color: var(--ink); font-weight: 700; }
.nav .nav-unique.on { color: var(--pink); }
.nav .fab { width: 54px; height: 54px; margin-top: -20px; border-radius: 999px; background: var(--grad); display: grid; place-items: center; box-shadow: 0 8px 22px rgba(255,79,139,.35); outline: 4px solid var(--bg); }
.nav .fab svg { width: 25px; height: 25px; }
.nav .nav-main { gap: 6px; }
/* плавающая кнопка (редактор) - выше выступа «Монтажа», меню не закрывает */
.bar-bottom { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--safe) + 22px); padding: 0 16px; z-index: 15; display: flex; justify-content: center; pointer-events: none; }
.bar-bottom .btn { max-width: 528px; pointer-events: auto; box-shadow: 0 8px 22px rgba(30,20,60,.2); }
body.has-bar main { padding-bottom: calc(var(--nav-h) + 110px + var(--safe)); }
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 40px + var(--safe)); transform: translateX(-50%); background: var(--ink); color: #fff; padding: 9px 15px; border-radius: 12px; font-size: 13.5px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 40; max-width: 90%; text-align: center; }
.toast.show { opacity: 1; }

/* прочие экраны */
.label { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; color: var(--mute); letter-spacing: .08em; padding: 14px 2px 8px; text-transform: uppercase; }
.label span:last-child { text-transform: none; letter-spacing: 0; font-weight: 600; }
.back { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.back button { width: 34px; height: 34px; border-radius: 11px; background: var(--surface); box-shadow: var(--sh); display: grid; place-items: center; }
.back span { font-size: 17px; font-weight: 800; }
.big { font-size: 28px; font-weight: 800; font-family: Unbounded, sans-serif; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.stat { padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.stat.g { background: var(--grad); color: #fff; }
.stat.g .muted { color: rgba(255,255,255,.88); }
.packs { display: flex; flex-direction: column; gap: 8px; }
.pack { display: flex; align-items: center; gap: 12px; padding: 14px 16px; width: 100%; text-align: left; }
.pack .pr { font-weight: 800; font-size: 15px; }
.job { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.job:last-child { border-bottom: 0; }
.badge { font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--line); color: var(--ink-2); white-space: nowrap; }
.badge.ok { background: #E6F6EC; color: #1E8A4C; }
.badge.work { background: #FFF4E5; color: #B86A00; }
.badge.fail { background: var(--red-bg); color: var(--red-text); }
.linkbox { font-size: 14px; font-weight: 700; background: #F5F0FF; padding: 12px 14px; border-radius: 12px; word-break: break-all; margin: 12px 0; }
.err { background: var(--red-bg); color: #5A2328; border-left: 3px solid var(--red); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; margin-top: 10px; }
.rolls { display: flex; flex-direction: column; gap: 8px; }
.roll { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; text-align: left; }
.rnum { width: 36px; height: 36px; border-radius: 10px; background: var(--grad); color: #fff; font-weight: 800; display: grid; place-items: center; flex: none; }
.split { display: flex; flex-direction: column; gap: 12px; }
.side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.side.lead { position: sticky; top: 0; z-index: 4; background: var(--bg); padding: 4px 0 6px; }

/* редактор титров */
.player { border-radius: var(--r); overflow: hidden; background: #000; display: flex; justify-content: center; }
.player video { width: 100%; height: 34vh; object-fit: contain; display: block; background: #000; }
.words { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.sent { margin: 0; line-height: 2.1; }
.word { font: inherit; font-size: 15px; border: 0; border-radius: 7px; padding: 2px 5px; background: var(--line); color: var(--ink); width: auto; text-align: center; margin: 0 1px; }
.word:focus { outline: 2px solid var(--pink); background: #fff; }
.word.changed { background: #FFE9F1; color: #B0124F; font-weight: 700; }

/* переключатель «Титры | Плашка» на образце (1.147.0) */
.viewsw { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; padding: 3px; border-radius: 999px; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.viewsw.hide { display: none; }
.viewsw button { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.8); }
.viewsw button.on { background: #fff; color: var(--ink); }

/* 1.147.1, Юра 16.10: «хотя бы половина экрана». Закреплённая полоса резала кадр (cover в широком окне) - убрана.
   Закреплён сам вертикальный образец со стрелками стиля: ~половина высоты экрана, кадр целиком, настройки листаются под ним. */
.lead { position: sticky; top: 0; z-index: 8; background: var(--bg); margin: 0 -16px; padding: 8px 16px 10px; box-shadow: 0 10px 12px -12px rgba(30,20,60,.35); }
.lead .hero { width: auto; max-width: none; height: min(40vh, 460px); aspect-ratio: 533 / 800; }
.lead .hero .crop { width: 100%; height: 100%; }
.style-line { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; width: 100%; }
.style-line .style-row { margin-top: 0; width: auto; min-width: 200px; max-width: 280px; flex: 0 1 auto; }
.lead .dots { margin-top: 6px; }
.mini { display: none; }

/* лента тайм-кода редактора по кускам (1.151.x) */
.tl { position: relative; margin-top: 8px; width: 100%; align-self: stretch; }
.tl-strip { display: flex; gap: 2px; height: 26px; border-radius: 8px; overflow: hidden; }
.tl-seg { min-width: 3px; background: #DCD8E6; }
.tl-seg:nth-child(even) { background: #CBC6D8; }
.tl-seg.on { background: var(--grad); }
.tl-head { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; left: 0; pointer-events: none; }
.tl-info { margin-top: 5px; text-align: center; font-size: 12px; width: 100%; }
.segs { display: flex; flex-direction: column; }
.segcard { background: var(--surface); border: 1.5px solid var(--line-2); border-radius: var(--r-sm); padding: 8px 10px 10px; transition: border-color .15s; }
.segcard.on { border-color: var(--pink); box-shadow: 0 4px 14px rgba(255,79,139,.18); }
.seghead { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; padding: 0 0 4px; }
.seghead b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.seghead span { font-size: 12px; color: var(--mute); }
.segwords { line-height: 2.1; }
.cutmark { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; font-weight: 700; color: var(--red-text); }
.cutmark::before, .cutmark::after { content: ''; flex: 1; border-top: 1.5px dashed #F2B8BB; }
.cutmark.plain { color: var(--mute); font-weight: 600; }
.cutmark.plain::before, .cutmark.plain::after { border-top-color: var(--line-2); }
/* награды за приглашение */
.rewards { overflow: hidden; }
.rewards .row b { font-weight: 800; color: var(--ink); }

/* уникализация по ссылке (1.152.0) */
.linkrow { display: flex; gap: 8px; align-items: center; }
.linkrow .field { flex: 1; min-width: 0; padding: 10px 12px; font-size: 15px; }
.warn { margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: #8A5A00; background: #FFF6E5; border-radius: 10px; padding: 8px 10px; }