:root{--ink:#193b35;--muted:#66756e;--paper:#f7f8f2;--card:#fff;--line:#dfe6db;--accent:#dbf27d;--deep:#244e43;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}header{height:94px;margin:0 5.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.brand{font-size:27px;letter-spacing:-1.3px;font-weight:750;color:var(--ink);text-decoration:none}.brand span{display:block;font-size:10px;letter-spacing:1.2px;margin-top:4px;text-transform:uppercase;color:var(--muted);font-weight:500}nav{display:flex;background:#e9eee3;padding:5px;border-radius:40px}.tab{border:0;border-radius:30px;background:none;font-size:13px;padding:11px 20px;color:var(--muted)}.tab.active{background:white;color:var(--ink);box-shadow:0 1px 4px #193b3510}.local{font-size:12px;color:var(--muted)}.local:first-letter{color:#7b9a58}main{max-width:1300px;margin:auto;padding:0 42px}.intro{padding:67px 0 45px}.eyebrow{font-size:10px;font-weight:650;letter-spacing:2.3px;color:var(--muted);margin:0 0 23px}h1{font-size:clamp(36px,4.2vw,60px);font-weight:500;letter-spacing:-2.9px;line-height:1.1;margin:0 0 25px}h1 em{font-style:normal;color:#6c8169}.lead{font-size:16px;color:var(--muted);line-height:1.65;max-width:650px;margin:0}.workspace{display:grid;grid-template-columns:235px minmax(0,1fr);gap:55px;align-items:start}.workspace>aside{padding-top:26px}.workspace ol{list-style:none;counter-reset:path;margin:0 0 35px;padding:0}.workspace li{counter-increment:path;padding:15px 0;font-size:13px;color:var(--muted);border-bottom:1px solid var(--line)}.workspace li:before{content:"0" counter(path);font-size:10px;margin-right:17px;color:#8e9b87}.workspace li.current{color:var(--ink);font-weight:650}.aside-note{padding:20px;background:#eaf0df;border-radius:8px;font-size:12px;line-height:1.6}.aside-note p{color:var(--muted);margin-bottom:0}.card{padding:30px 34px;background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:22px}.section-top{display:flex;align-items:center;gap:15px;margin-bottom:25px}.step{font-size:11px;background:#edf2e6;padding:9px;border-radius:7px}h2{font-size:22px;font-weight:550;letter-spacing:-.5px;margin:0}.section-copy{font-size:13px;color:var(--muted);line-height:1.65;margin-top:-9px}label{display:block;font-size:12px;font-weight:550;line-height:1.5;margin:19px 0 0}input:not([type=checkbox]),textarea,select{display:block;width:100%;border:1px solid #dce3d9;border-radius:7px;padding:13px 14px;margin-top:8px;background:#fbfcf8;color:var(--ink);font:inherit;font-size:13px;line-height:1.5;outline:none}input:focus,textarea:focus,select:focus{border-color:#789277;box-shadow:0 0 0 3px #dceacb}textarea{min-height:96px;resize:vertical}input::placeholder,textarea::placeholder{color:#9aa49b;font-weight:400}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}button,a.primary{font-family:inherit;cursor:pointer}button:disabled{opacity:.42;cursor:not-allowed}.primary,.secondary{border-radius:7px;padding:14px 19px;font-size:13px;font-weight:550;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:25px;text-decoration:none}.primary{background:var(--deep);color:white}.primary:hover:not(:disabled){background:#173e33}.secondary{background:#f1f5ea;color:var(--ink);border-color:#e0e7d9}.primary span{color:var(--accent);font-size:18px}#make-script{margin-top:26px}.hint{font-size:11px;line-height:1.6;color:var(--muted);font-weight:400}details{border-top:1px solid var(--line);margin-top:20px;padding-top:17px;font-size:12px;color:var(--muted);line-height:1.7}summary{cursor:pointer;color:var(--ink);font-size:12px}details p{max-width:520px}.slot{border:1px solid var(--line);padding:20px;border-radius:9px;margin-top:16px;background:#fcfdf9}.slot-top{display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:13px}.slot-index{font-size:11px;color:#819079;margin-right:8px}.slot textarea{background:white;min-height:110px}.slot video{max-height:220px;margin-top:15px}.button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.upload-button{position:relative;cursor:pointer;overflow:hidden;font-size:12px;font-weight:500;margin:0}.upload-button input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;margin:0}.clip-status{font-size:11px;color:#6d7f5b}.check{display:flex;gap:10px;align-items:flex-start;font-size:12px;font-weight:450;margin:20px 0;cursor:pointer}.check input{accent-color:var(--deep);width:15px;height:15px;margin:2px 0 0;flex-shrink:0}.warning{padding:15px;background:#f2f5e8;border-radius:7px;margin-top:0}video{display:block;width:100%;border-radius:8px;background:#13251f}.hidden{display:none!important}.compact{padding-bottom:35px}.compact h1{font-size:47px}.evidence-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:30px;align-items:start}.score-card{position:sticky;top:20px;background:#eaf0df;padding:26px;border-radius:12px;font-size:13px;line-height:1.6}.score-card .eyebrow{margin-bottom:15px;font-size:9px;letter-spacing:1.6px}#score-value{font-size:29px;letter-spacing:-1px;line-height:1.2}#score-description{color:var(--muted);font-size:12px}#score-missing{padding-left:18px;font-size:11px;color:#526750}#score-missing li{margin:10px 0}hr{border:0;border-top:1px solid #ced8c1;margin:24px 0}.score-card strong{font-size:12px}.score-card>p:not(.eyebrow){font-size:12px;color:var(--muted)}footer{max-width:1300px;margin:30px auto 0;padding:24px 42px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:11px;border-top:1px solid var(--line)}.text-button{padding:0;background:transparent;border:0;font-size:11px;color:var(--ink);text-decoration:underline}#status{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:90vw;padding:0;background:var(--deep);color:white;border-radius:10px;font-size:13px;line-height:1.5;z-index:10;box-shadow:0 6px 30px #193b3522}#status:not(:empty){padding:14px 21px}dialog{border:1px solid var(--line);padding:28px;border-radius:15px;max-width:640px;width:90%;color:var(--ink)}dialog::backdrop{background:#10251ec2}dialog h2{margin-bottom:20px}dialog p{font-size:13px;line-height:1.6}dialog video{max-height:350px}#record-clock{font-size:12px;color:var(--muted)}:focus-visible{outline:3px solid #99b86d;outline-offset:3px}@media(max-width:850px){header{margin:0 24px;height:auto;min-height:90px;flex-wrap:wrap;padding:18px 0}.local{display:none}main{padding:0 24px}.workspace{grid-template-columns:1fr;gap:15px}.workspace>aside{display:none}.intro{padding-top:42px}.card{padding:24px}.evidence-layout{grid-template-columns:1fr}.score-card{position:static}.two-col{grid-template-columns:1fr;gap:0}footer{padding:24px}.tab{padding:9px 13px;font-size:12px}h1{letter-spacing:-1.7px}.compact h1{font-size:36px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* Flex-раскладка не должна показывать действия, пока Telegram ещё не выдал вход. */
.button-row[hidden]{display:none!important}
.browser-warning{margin:28px 0 0;padding:22px 24px;background:#fdece6;border:1px solid #e9b9a6;border-left:4px solid #c2552c;border-radius:10px;font-size:13px;line-height:1.65;color:#5d2a18}.browser-warning strong{display:block;font-size:14px;margin-bottom:8px;color:#8f3317}.browser-warning p{margin:8px 0 0}
.assembly-progress{margin-top:18px;padding:18px 20px;background:#eaf0df;border-radius:10px}.assembly-bar{height:8px;background:#d2ddc4;border-radius:5px;overflow:hidden}.assembly-bar span{display:block;height:100%;width:0;background:var(--deep);border-radius:5px;transition:width .3s linear}#assembly-text{margin:12px 0 0;font-size:13px;font-weight:550}.assembly-note{margin:7px 0 0;font-size:11px;color:var(--muted);line-height:1.6}

/* Добавлено 24.10: шапка с логотипом и карточки тарифов. */
.brand-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.brand-logo{width:40px;height:36px;object-fit:contain}
.brand-row .eyebrow{margin:0}
.tier{position:relative;margin-bottom:14px}
.tier .section-top{margin-bottom:10px;justify-content:space-between;gap:12px}
.tier h3{margin:0;font-size:20px;font-weight:600;letter-spacing:-.4px}
.tier .clip-status{font-size:17px;font-weight:600;color:var(--ink)}
.tier .hint{margin:0 0 14px}
.tier .button-row{margin-top:0}
.tier.chosen{border-color:#8fae6a;box-shadow:0 0 0 3px #e7f2cf}
.tier.chosen .tier-pick{background:var(--deep);color:#fff;border-color:var(--deep)}
.tier-top{border-color:#cfe0a8}
.tier-badge{position:absolute;top:-10px;right:18px;background:var(--accent);color:#2f3d22;font-size:10px;font-weight:650;letter-spacing:.6px;text-transform:uppercase;padding:5px 10px;border-radius:20px}

.brand-link{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .brand-text{display:block;font-size:25px;letter-spacing:-1.2px;font-weight:750;line-height:1;text-transform:none;color:var(--ink)}
.brand .brand-text span{display:block;font-size:10px;letter-spacing:1.2px;margin-top:5px;text-transform:uppercase;color:var(--muted);font-weight:500}

/* Шапка ЛК и прайса: это ряд кнопок, а не переключатель вкладок. Правило nav{}
   из прототипа рисует под ними пилюлю с радиусом 40px и полем 5px — она торчит
   из-под кнопок с радиусом 7px и не совпадает с их контуром. Пилюля остаётся
   там, где она к месту: у nav с .tab на странице записи. */
nav.button-row{background:none;padding:0;border-radius:0}

/* Фокус: обводка идёт ровно по контуру кнопки. outline рисует свою рамку со
   своим радиусом и отступом в 3px — на кнопке 7px это читается как отдельный
   овал вокруг. box-shadow повторяет border-radius, и поля ввода уже
   подсвечиваются так же: один язык вместо двух. */
button:focus-visible,a.primary:focus-visible,a.secondary:focus-visible,
.text-button:focus-visible,.tab:focus-visible,summary:focus-visible,
.upload-button:focus-within{outline:none;box-shadow:0 0 0 1px #789277,0 0 0 4px #dceacb}
.upload-button input:focus-visible{outline:none}
/* В режиме высокой контрастности тени не видно — там возвращаем рамку. */
@media(forced-colors:active){
  button:focus-visible,a.primary:focus-visible,a.secondary:focus-visible,
  .text-button:focus-visible,.tab:focus-visible,summary:focus-visible,
  .upload-button:focus-within{outline:2px solid Highlight;outline-offset:2px}}

/* Хронометраж фрагмента от методиста и общая длина урока: подсказка, а не
   приговор — автор снимает как получится, цифра нужна, чтобы он не записал
   урок на сорок секунд и не узнал об этом только на сборке. */
.slot-seconds{font-weight:450;font-size:11px;color:var(--muted);margin-left:10px}
.lesson-total{margin:0 0 4px;padding:11px 14px;background:#eef3e6;border-radius:8px}
.lesson-total.off-target{background:#f6f1e2;color:#6b5f3a}
/* Замечание сборки живёт в карточке результата: всплывашка закрывала собой
   «Скачать видео», а это ровно та кнопка, за которой человек сюда шёл. */
#result-check{margin:16px 0 0;background:#f6f1e2;color:#5d4f2c;font-size:13px;line-height:1.6}
#result-check strong{display:block;margin-bottom:8px}
#result-check ul{margin:0;padding-left:20px}
#result-check li{margin:5px 0}

/* ── Оформление 24.10 ────────────────────────────────────────────────────────
   Отзыв команды: монотонно, цвета не из логотипа, кнопки выглядят дёшево,
   нужен спокойный минимализм в духе Apple. Цвета взяты из знака SkillMesh:
   индиго → синий → мята → жёлтый → оранжевый. Градиент — только на главном
   действии, шагах и прогрессе; остальное — белое, серое и много воздуха.
   Слой идёт последним и перекрывает прежние правила, разметку не трогает. */
:root{--ink:#1d1d1f;--muted:#6e6e73;--paper:#f5f5f7;--card:#fff;--line:#e5e5ea;--deep:#3d6be6;
  --indigo:#5b3fd9;--blue:#3d82f0;--mint:#4fc995;--sun:#f3c046;--orange:#f2843a;
  --grad:linear-gradient(135deg,#5b3fd9 0%,#3d82f0 100%);
  --grad-logo:linear-gradient(90deg,#5b3fd9 0%,#3d82f0 30%,#4fc995 55%,#f3c046 78%,#f2843a 100%);
  --ring:0 0 0 4px rgba(61,130,240,.22);
  --shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px rgba(17,24,39,.06);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:var(--paper);color:var(--ink)}

/* Шапка страницы записи: прозрачная, без линии, переключатель — сегмент iOS. */
header{border-bottom:0;max-width:1300px;margin:0 auto;padding:0 42px;height:84px}
.brand .brand-text{font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.brand .brand-text span{letter-spacing:.08em;color:var(--muted)}
nav{background:rgba(118,118,128,.12);padding:3px;border-radius:999px}
.tab{border-radius:999px;font-size:14px;font-weight:500;padding:8px 16px;color:var(--ink);transition:background .2s}
.tab.active{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.04)}
.local:first-letter{color:#34c759}

/* Шапка входа, кабинета и прайса: заголовок и действия, высота по содержимому. */
header.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 28px;
  height:auto;min-height:0;max-width:1300px;margin:0 auto;padding:40px 42px 12px}
header.top h1{margin:14px 0 10px}
header.top .section-copy{margin:0;max-width:620px}

/* Типографика: крупно, плотно, спокойно. Акцент заголовка — градиент знака. */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
h1{font-weight:700;letter-spacing:-.035em;line-height:1.05}
h1 em{background:var(--grad-logo);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:17px;line-height:1.55;color:var(--muted)}
h2{font-size:24px;font-weight:700;letter-spacing:-.02em}
.section-copy{font-size:15px;line-height:1.55;color:var(--muted);margin-top:-6px}
.hint{font-size:13px;line-height:1.55;color:var(--muted)}

/* Карточки: белые, без рамки, мягкая тень и большой радиус. */
.card{border:0;border-radius:24px;padding:32px;box-shadow:var(--shadow);margin-bottom:20px}
.section-top{gap:14px;margin-bottom:22px}
.step{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;padding:0;border-radius:50%;
  background:var(--grad);color:#fff;font-size:13px;font-weight:700;letter-spacing:0;box-shadow:0 4px 12px rgba(91,63,217,.25)}

/* Поля: серая заливка без рамки, при фокусе — белые с синим кольцом.
   16px — иначе iPhone приближает страницу при каждом касании поля. */
label{font-size:14px;font-weight:600;color:var(--ink);margin-top:20px}
input:not([type=checkbox]),textarea,select{border:1px solid transparent;border-radius:14px;padding:14px 16px;margin-top:8px;
  background:#f2f2f7;color:var(--ink);font-size:16px;line-height:1.45;transition:background .2s,border-color .2s,box-shadow .2s}
input:focus,textarea:focus,select:focus{background:#fff;border-color:rgba(61,130,240,.6);box-shadow:var(--ring)}
input::placeholder,textarea::placeholder{color:#a1a1a6}
textarea{min-height:84px;field-sizing:content}
/* Курсор синим: на iPhone в жирном тексте на белом тонкий чёрный курсор
   теряется (Сергей, #483). */
input,textarea{caret-color:#3d82f0}

/* Кнопки: пилюли. Главная — градиент знака, второстепенная — светло-серая. */
.primary,.secondary{border-radius:999px;min-height:50px;padding:0 24px;font-size:16px;font-weight:600;gap:10px;
  letter-spacing:-.01em;transition:transform .12s ease,box-shadow .2s ease,background .2s ease,filter .2s ease}
.primary{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(61,107,230,.28)}
.primary:hover:not(:disabled){background:var(--grad);filter:brightness(1.07);box-shadow:0 8px 22px rgba(61,107,230,.34)}
.primary span{color:#fff;font-size:17px}
.secondary{background:rgba(118,118,128,.12);color:var(--ink);border-color:transparent}
.secondary:hover:not(:disabled){background:rgba(118,118,128,.18)}
.primary:active:not(:disabled),.secondary:active:not(:disabled){transform:scale(.97)}
button:disabled{opacity:.38}
.primary:disabled{box-shadow:none}
#make-script{width:100%;min-height:56px;font-size:17px;margin-top:28px}
.text-button{color:var(--blue);text-decoration:none;font-size:13px}

/* Раскрывающиеся блоки — как строка настроек. */
details{border-top:1px solid var(--line);margin-top:22px;padding-top:16px;font-size:14px}
summary{color:var(--blue);font-size:15px;font-weight:600}

/* Части урока. */
.slot{border:1px solid var(--line);border-radius:20px;padding:20px;margin-top:14px;background:#fff}
.slot-top{align-items:flex-start;font-size:16px}
.slot-title{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;column-gap:10px;row-gap:2px;font-size:17px;font-weight:650;letter-spacing:-.01em}
.slot-title .slot-seconds{grid-column:2}
.slot-num{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#eef0ff;color:var(--indigo);font-size:13px;font-weight:700}
.slot-seconds{margin-left:0;font-size:13px;font-weight:500;color:var(--muted)}
.clip-status{flex:none;font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;background:rgba(118,118,128,.12);color:var(--muted);white-space:nowrap}
.clip-status.done{background:#e4f7ec;color:#1b7a4a}
.slot textarea{background:#f5f5f7;min-height:64px;font-weight:400;font-size:16px;line-height:1.5}
.slot textarea:focus{background:#fff}
.slot video{max-height:260px;margin-top:14px;border-radius:14px}
.button-row{gap:10px;margin-top:16px}
.upload-button{font-size:16px;font-weight:600}

/* «Бинго» дублей: плитка кадров, галочка на том, что войдёт в ролик. */
.takes-box{margin-top:16px}
.takes-title{margin:0 0 10px;font-size:13px;font-weight:500;color:var(--muted)}
.takes{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:10px;width:100%;max-width:560px}
/* Колонка сетки не должна раздаваться по содержимому: сетка дублей при подсчёте
   ширины берёт свой максимум, и на телефоне страница уезжала вбок. */
.workspace>*{min-width:0}
.take{position:relative;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;padding:0;border:2px solid transparent;border-radius:14px;
  background:#eceef3;cursor:pointer;transition:transform .12s ease,box-shadow .2s ease,border-color .2s ease}
.take video{position:absolute;inset:0;width:100%;height:100%;max-height:none;margin:0;object-fit:cover;border-radius:0;pointer-events:none}
.take-number{position:relative;z-index:1;display:grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:999px;
  background:rgba(255,255,255,.9);color:var(--ink);font-size:14px;font-weight:700}
.take.chosen{border-color:var(--blue);box-shadow:0 0 0 3px rgba(61,130,240,.22)}
.take-check{position:absolute;z-index:2;top:5px;right:5px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--grad);color:#fff;font-size:12px;font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.take:hover:not(:disabled){transform:translateY(-1px)}
.take.elsewhere{opacity:.45;cursor:default}
.take.elsewhere:disabled{opacity:.45}

/* Хронометраж, подтверждение, прогресс, результат. */
.lesson-total{margin:0 0 6px;padding:12px 16px;border-radius:14px;background:#eef3ff;color:#23408e;font-size:14px}
.lesson-total.off-target{background:#fff4e5;color:#8a4b00}
.check{font-size:14px;font-weight:500;line-height:1.5}
.check input{accent-color:var(--blue);width:18px;height:18px;margin-top:1px}
.warning{background:#f5f5f7;border-radius:14px;padding:16px}
.assembly-progress{background:#f4f6ff;border-radius:18px;padding:18px 20px}
.assembly-bar{height:10px;background:#e3e6f0;border-radius:999px}
.assembly-bar span{background:var(--grad-logo);border-radius:999px}
#assembly-text{font-size:14px;font-weight:600}
#result-check{background:#fff6e8;color:#7a4a00;border-radius:16px;font-size:14px}
video{background:#0b0b0f;border-radius:16px}

/* Сообщение — сверху, как баннер iOS, над содержимым, а не над кнопками внизу;
   касание закрывает. */
#status{top:calc(12px + env(safe-area-inset-top,0px));bottom:auto;width:max-content;max-width:min(560px,calc(100vw - 32px));border-radius:16px;
  background:rgba(29,29,31,.92);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  font-size:14px;box-shadow:0 12px 40px rgba(0,0,0,.2);cursor:pointer}
#status:not(:empty){padding:13px 18px}

/* Окно записи — лист с крупной красной кнопкой, как камера в телефоне. */
dialog{border:0;border-radius:24px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
dialog video{border-radius:18px}
#begin-record{background:#ff3b30;box-shadow:0 6px 16px rgba(255,59,48,.35)}
#begin-record:before{content:"";width:12px;height:12px;border-radius:50%;background:#fff;flex:none}
#begin-record:hover:not(:disabled){background:#ff3b30}
#stop-record{background:#1d1d1f;box-shadow:none}
#stop-record:hover:not(:disabled){background:#1d1d1f}
#record-clock{font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* Боковая дорожка шагов, карточка пилота, подвал. */
.workspace li{border-bottom-color:var(--line);font-size:14px}
.workspace li.current{color:var(--ink)}
.workspace li.current:before{color:var(--blue)}
.aside-note{background:#fff;border-radius:18px;box-shadow:var(--shadow)}
.score-card{background:#fff;border-radius:22px;box-shadow:var(--shadow)}
hr{border-top-color:var(--line)}
footer{border-top-color:var(--line);font-size:12px}

/* Прайс. */
.tier{border-radius:20px}
.tier .clip-status{background:none;padding:0;border-radius:0;font-size:20px;font-weight:700;color:var(--ink)}
.tier.chosen{border-color:transparent;box-shadow:0 0 0 2px var(--blue),var(--shadow)}
.tier.chosen .tier-pick{background:var(--grad);color:#fff;border-color:transparent}
.tier-top{box-shadow:0 0 0 1px rgba(61,130,240,.3),var(--shadow)}
.tier-badge{background:var(--grad-logo);color:#fff;letter-spacing:.06em;text-shadow:0 1px 1px rgba(0,0,0,.18)}

/* Фокус с клавиатуры — синее кольцо по контуру. */
button:focus-visible,a.primary:focus-visible,a.secondary:focus-visible,.text-button:focus-visible,.tab:focus-visible,
summary:focus-visible,.upload-button:focus-within,.take:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(61,130,240,.6)}
:focus-visible{outline-color:var(--blue)}

@media(max-width:850px){
  header{padding:14px 0;margin:0 20px;height:auto}
  header.top{padding:28px 20px 6px;margin:0}
  main{padding:0 16px}
  .card{padding:24px 20px;border-radius:22px}
  .slot{padding:16px;border-radius:18px}
  .workspace{grid-template-columns:minmax(0,1fr)}
  .button-row>.primary,.button-row>.secondary{flex:1 1 auto}
  h1{letter-spacing:-.03em}
}
@media(prefers-reduced-motion:reduce){.primary,.secondary,.take,.tab{transition:none}}

/* ── 24.10, вторая итерация оформления ──────────────────────────────────────
   Отзыв владельца: цифры в кружках «1, 2, 3» смотрятся дёшево, кнопки разного
   размера, главная мини-аппа не структурирована, «Мои уроки» и тарифы прячутся
   за кнопками. Вместо цифр — иконки-плитки, как значки в настройках iOS;
   кнопки — единая сетка; на главной уроки и тарифы видны сразу. */
[data-icon="camera"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8A2.5 2.5 0 0 1 6 5.5h7A2.5 2.5 0 0 1 15.5 8v8a2.5 2.5 0 0 1-2.5 2.5H6A2.5 2.5 0 0 1 3.5 16z'/%3E%3Cpath d='m15.5 10.2 4.2-2.6c.6-.4 1.3 0 1.3.7v7.4c0 .7-.7 1.1-1.3.7l-4.2-2.6'/%3E%3C/svg%3E");--tile:linear-gradient(135deg,#5b3fd9,#3d82f0);}
[data-icon="film"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='3'/%3E%3Cpath d='M8 4.5v15M16 4.5v15M3.5 9.5H8M3.5 14.5H8M16 9.5h4.5M16 14.5h4.5'/%3E%3C/svg%3E");--tile:linear-gradient(135deg,#3d82f0,#4fc995);}
[data-icon="play"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M10.2 8.9v6.2c0 .5.5.8.9.5l4.6-3.1c.4-.3.4-.8 0-1.1l-4.6-3c-.4-.3-.9 0-.9.5z'/%3E%3C/svg%3E");--tile:linear-gradient(135deg,#3d82f0,#4fc995);}
[data-icon="tag"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11.6V5.5a2 2 0 0 1 2-2h6.1a2 2 0 0 1 1.4.6l7.3 7.3a2 2 0 0 1 0 2.8l-6.1 6.1a2 2 0 0 1-2.8 0L4.1 13a2 2 0 0 1-.6-1.4z'/%3E%3Ccircle cx='8.3' cy='8.3' r='1.4'/%3E%3C/svg%3E");--tile:linear-gradient(135deg,#f2843a,#f3c046);}
[data-icon="sparkles"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4.5l1.6 4.2c.2.5.6.9 1.1 1.1l4.2 1.6-4.2 1.6c-.5.2-.9.6-1.1 1.1L11 18.3l-1.6-4.2c-.2-.5-.6-.9-1.1-1.1L4.1 11.4l4.2-1.6c.5-.2.9-.6 1.1-1.1z'/%3E%3Cpath d='M18.5 3.5v3M17 5h3M19 16.5v3M17.5 18h3'/%3E%3C/svg%3E");--tile:linear-gradient(135deg,#7c4dff,#5b3fd9);}
[data-icon="list"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6.5h11M9 12h11M9 17.5h11'/%3E%3Ccircle cx='4.8' cy='6.5' r='1.1'/%3E%3Ccircle cx='4.8' cy='12' r='1.1'/%3E%3Ccircle cx='4.8' cy='17.5' r='1.1'/%3E%3C/svg%3E");--tile:linear-gradient(135deg,#3d82f0,#5b8ef7);}
[data-icon="check"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m8.3 12.3 2.6 2.6 5-5.3'/%3E%3C/svg%3E");--tile:linear-gradient(135deg,#34c759,#4fc995);}
[data-icon="chat"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v8a2.5 2.5 0 0 1-2.5 2.5H10l-4.3 3.2c-.5.4-1.2 0-1.2-.6V17h0A2.5 2.5 0 0 1 4 14.5z'/%3E%3C/svg%3E");--tile:linear-gradient(135deg,#5b3fd9,#3d82f0);}
[data-icon="bulb"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 18h5M10.5 21h3'/%3E%3Cpath d='M12 3.5a5.8 5.8 0 0 0-3.4 10.5c.6.5 1 1.2 1 2V16h4.8v-.1c0-.8.4-1.5 1-2A5.8 5.8 0 0 0 12 3.5z'/%3E%3C/svg%3E");--tile:linear-gradient(135deg,#f3a73a,#f3c046);}
[data-icon="doc"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h6.5l4.5 4.5v10.5a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-13a2 2 0 0 1 2-2z'/%3E%3Cpath d='M13.5 3.5V8H18M8.5 12.5h7M8.5 16h5'/%3E%3C/svg%3E");--tile:linear-gradient(135deg,#64748b,#94a3b8);}
[data-icon="chevron"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 6 6 6-6 6'/%3E%3C/svg%3E");}
[data-icon="refresh"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12a7.5 7.5 0 1 1-2.2-5.3'/%3E%3Cpath d='M19.5 4.5v4h-4'/%3E%3C/svg%3E");--tile:linear-gradient(135deg,#3d82f0,#5b3fd9);}
.step,.tile-icon{position:relative;display:inline-block;flex:none;padding:0;background:var(--tile,var(--grad));box-shadow:0 2px 6px rgba(17,24,39,.14)}
.step{width:36px;height:36px;border-radius:10px;font-size:0;color:transparent;letter-spacing:0}
.tile-icon{width:44px;height:44px;border-radius:12px}
.tile-icon.sm{width:34px;height:34px;border-radius:10px}
.step::before,.tile-icon::before{content:"";position:absolute;inset:8px;background:#fff;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.tile-icon::before{inset:10px}
.tile-icon.sm::before{inset:8px}
.step:not([data-icon]){display:inline-grid;place-items:center;font-size:13px;color:#fff}
.step:not([data-icon])::before{content:none}
.chev{display:inline-block;flex:none;width:18px;height:18px;background:#c7c7cc;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}

/* Части урока: «Часть 1 · ≈ 35 с» строкой над названием, без кружка. */
.slot-title{display:block;font-size:17px}
.slot-num{display:block;width:auto;height:auto;margin:0 0 4px;background:none;border-radius:0;color:var(--muted);font-size:13px;font-weight:600;letter-spacing:0}

/* Дубли: подпись «Дубль N» на кадре, без кружков. */
.take-number{position:absolute;left:6px;bottom:6px;display:block;min-width:0;height:auto;padding:3px 7px;border-radius:7px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:600;line-height:1.2}

/* Единая сетка кнопок: одна высота, одинаковая ширина ячеек; главное действие
   — на всю строку. Пара равных действий — .pair. */
.button-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:16px}
.button-row>*{width:100%;min-height:50px;margin:0}
.button-row>.primary{grid-column:1/-1}
.button-row.pair,nav.button-row,dialog .button-row{grid-template-columns:1fr 1fr}
.button-row.pair>.primary,nav.button-row>.primary,dialog .button-row>.primary{grid-column:auto}
.wide{display:flex;width:100%;min-height:52px;margin-top:16px}

/* Главная мини-аппа. */
.hub-page header.top,.hub-page main{max-width:760px}
.quota-pill{display:inline-flex;margin:14px 0 0;padding:7px 12px;border-radius:999px;background:#e4f7ec;color:#1b7a4a;font-size:13px;font-weight:600}
.quota-pill.spent{background:#fff4e5;color:#8a4b00}
.hub-action{display:flex;align-items:center;gap:14px;margin:8px 0 20px;padding:18px;border-radius:22px;background:#fff;box-shadow:var(--shadow);color:var(--ink);text-decoration:none;transition:transform .12s ease}
.hub-action:active{transform:scale(.98)}
.hub-action-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.hub-action-text strong{font-size:18px;font-weight:650;letter-spacing:-.01em}
.hub-action-text small{font-size:14px;line-height:1.4;color:var(--muted)}
.count-pill{margin-left:auto;min-width:30px;padding:3px 10px;border-radius:999px;background:rgba(118,118,128,.12);color:var(--muted);font-size:13px;font-weight:600;text-align:center}
.lesson-list{display:grid;gap:12px}
.lesson{padding:14px;border:1px solid var(--line);border-radius:18px}
.lesson-head{display:flex;align-items:center;gap:14px}
.lesson-thumb{position:relative;flex:none;display:grid;place-items:center;width:76px;height:76px;overflow:hidden;border-radius:14px;background:#eceef3}
.lesson-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.lesson-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .2s}
.lesson-thumb.cover{width:136px;height:76px;cursor:pointer;background:#111}
.lesson-thumb.cover.portrait{width:90px;height:160px}
.lesson-thumb.cover .lesson-play{opacity:.85}
.lesson-play{position:relative;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.lesson-play:before{content:"";position:absolute;left:12px;top:9px;border-left:9px solid var(--ink);border-top:6px solid transparent;border-bottom:6px solid transparent}
.lesson-body{flex:1;min-width:0}
.lesson-body h3{margin:0 0 4px;font-size:16px;font-weight:650;line-height:1.3;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lesson-meta{margin:0 0 7px;font-size:13px;color:var(--muted)}
.status-pill{display:inline-block;padding:3px 10px;border-radius:999px;background:rgba(118,118,128,.12);color:var(--muted);font-size:12px;font-weight:600}
.status-pill.done{background:#e4f7ec;color:#1b7a4a}
.lesson .button-row{margin-top:12px}
.lesson-player{margin-top:12px;max-height:440px}
.guide{list-style:none;display:grid;gap:14px;margin:16px 0 0;padding:0}
.guide li{display:flex;align-items:flex-start;gap:12px}
.guide strong{display:block;font-size:15px;font-weight:650}
.guide small{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--muted)}
.tier-list{display:grid;gap:10px}
.tier-row{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);text-decoration:none;transition:transform .12s ease}
.tier-row.best{border-color:transparent;box-shadow:0 0 0 2px var(--blue)}
.tier-row:active{transform:scale(.98)}
.tier-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tier-row-text strong{font-size:16px;font-weight:650}
.tier-row-text small{font-size:13px;line-height:1.4;color:var(--muted)}
.tier-row-price{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:17px;font-weight:700;white-space:nowrap}
.tier-row-badge{padding:2px 8px;border-radius:999px;background:var(--grad-logo);color:#fff;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}

/* Кабинет: уроки внутри карточки — без второй тени; фрагменты под спойлером. */
#lk-list .card{margin:12px 0 0;padding:18px;border:1px solid var(--line);border-radius:18px;box-shadow:none}
details.fragments{margin-top:14px;padding-top:12px}
details.fragments .button-row{margin-top:10px}
/* На телефоне кнопки — столбиком на всю ширину, одной высоты: по две в строку
   длинные подписи («Сохранить фрагмент») ломались на две строки. Пары
   коротких действий остаются рядом. */
@media(max-width:600px){
  .button-row{grid-template-columns:1fr}
  .button-row.pair,nav.button-row,dialog .button-row{grid-template-columns:1fr 1fr}
  details.fragments .button-row{grid-template-columns:repeat(3,1fr)}
}

/* ── 24.10, третья итерация: один размер иконок и один тип скругления ──────
   Отзыв: иконки разного размера в соседних блоках и кнопки-пилюли рядом с
   прямоугольными карточками смотрятся чужеродно. Теперь иконка везде одна —
   40px, а кнопки — скруглённые прямоугольники с тем же радиусом, что у полей
   ввода. Пилюлями остаются только маленькие ярлыки статуса. */
.step,.tile-icon,.tile-icon.sm{width:40px;height:40px;border-radius:11px}
.step::before,.tile-icon::before,.tile-icon.sm::before{inset:9px}
.primary,.secondary{border-radius:14px}
nav:not(.button-row){border-radius:12px}
.tab{border-radius:9px}
.text-button{border-radius:8px}
/* Кнопка записи не переносит «Записать» на две строки; у списка замечаний
   маркер один — номер из .workspace li:before, без точки списка. */
.record-button{white-space:nowrap}
#result-check ul{list-style:none;padding-left:0}
#result-check li{padding:0;border:0;font-size:inherit;color:inherit}
#result-check li:before{content:none}
.clip-preview{position:relative;margin-top:14px}
.clip-preview video{margin-top:0;cursor:pointer}
.play-button{position:absolute;left:50%;top:50%;width:60px;height:60px;min-height:0;padding:0;transform:translate(-50%,-50%);border:0;border-radius:50%;background:rgba(17,17,20,.55);cursor:pointer;transition:opacity .2s}
.play-button::before{content:"";position:absolute;left:24px;top:19px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}
.clip-preview.playing .play-button{opacity:0}
/* Просмотр урока из демо-кабинета (?view): только чтение — без записи, сборки
   и выбора дублей; сверху плашка с возвратом к урокам. */
.view-only .intro,.view-only aside,.view-only #discovery,.view-only #make-script,.view-only #make-script+.hint,
.view-only .slot .button-row,.view-only .takes-box,.view-only #assemble,.view-only #assemble+.hint,
.view-only #assembly-progress,.view-only #result-section .button-row,.view-only #result-section .hint,
.view-only #result-accepted,.view-only>footer{display:none!important}
.view-only textarea[readonly],.view-only input[readonly]{background:#f5f5f7;cursor:default}
.view-banner{margin:0 0 18px;padding:18px 20px;border-radius:18px;background:#f4f6ff;border:1px solid #e3e6f0}
.view-banner strong{display:block;font-size:15px}
.view-banner p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
.view-banner .button-row{margin-top:14px}
#methodist-questions ul{list-style:none;padding-left:0}
/* Ответ голосом: микрофон в правом углу поля, как в мессенджере; под полем —
   строка записи с таймером и «Стоп». Иконка — та же маска, что у плиток. */
[data-icon="mic"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3.5' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5v3M9 20.5h6'/%3E%3C/svg%3E")}
.voice-field{position:relative;display:block;margin-top:8px}
.voice-field>input,.voice-field>textarea{margin-top:0;padding-right:56px}
.voice-mic{position:absolute;top:6px;right:6px;width:40px;height:40px;min-height:0;padding:0;border:0;border-radius:11px;background:#fff;
  box-shadow:0 1px 3px rgba(17,24,39,.12);cursor:pointer;transition:background .2s,box-shadow .2s}
.voice-field>input+.voice-mic{top:50%;transform:translateY(-50%)}
.voice-mic::before{content:"";position:absolute;inset:9px;background:var(--grad);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
/* Наведение — только там, где есть мышь: на телефоне оно «залипает» после
   касания и перекрасило бы красную кнопку записи. */
@media(hover:hover){.voice-mic:not(.recording):hover:not(:disabled){background:#f4f6ff}}
.voice-mic.busy::before{inset:11px;background:none;-webkit-mask:none;mask:none;border:2.5px solid #dfe3f7;border-top-color:var(--blue);border-radius:50%;animation:voice-spin .8s linear infinite}
.voice-mic.busy:disabled{opacity:1}
/* Панель записи — одна на рассказ и на все поля, в цветах приложения:
   белая карточка, красная только точка «идёт запись». Таймер «0:12 / 2:00»,
   столбики громкости, тонкая линия до предела, что происходит, две кнопки. */
.rec-panel{margin-top:10px;font-size:14px;line-height:1.45;color:var(--muted)}
.rec-panel[hidden]{display:none}
.rec-panel.recording{padding:14px 16px 16px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line),0 8px 24px rgba(17,24,39,.08)}
.rec-head,.rec-track,.rec-actions{display:none}
.rec-panel.recording .rec-head{display:flex;align-items:center;gap:10px}
.rec-panel.recording .rec-track{display:block;height:4px;margin:12px 0 10px;border-radius:999px;background:#eef0f5;overflow:hidden}
.rec-panel.recording .rec-actions:not([hidden]){display:flex;gap:10px;margin-top:12px}
.rec-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#ff3b30;animation:voice-pulse 1.4s ease-in-out infinite}
.rec-panel.paused .rec-dot{background:#c7c7cc;animation:none}
.rec-time{font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.rec-limit{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.rec-level{display:flex;align-items:center;gap:3px;height:22px;margin-left:auto}
.rec-level i{display:block;width:4px;height:22px;border-radius:2px;background:var(--grad);transform:scaleY(.15);transition:transform .08s linear}
.rec-panel.paused .rec-level i{background:#d2d2d7}
.rec-track i{display:block;height:100%;width:0;background:var(--grad);transition:width .25s linear}
.rec-status{margin:0}
.rec-panel.recording .rec-status{color:var(--ink)}
.rec-panel.warn .rec-status{color:#b25000}
.rec-panel.error{color:#c9341f}
.rec-panel.ok{color:#1f8a4c;font-weight:600}
.rec-panel.busy .rec-status::before,.rec-panel.recording.busy .rec-status::before{content:"";display:inline-block;width:13px;height:13px;margin-right:8px;vertical-align:-2px;border:2px solid #dfe3f7;border-top-color:#3d82f0;border-radius:50%;animation:voice-spin .8s linear infinite}
.rec-pause,.rec-stop{flex:1 1 0;min-height:46px;padding:0 14px;border:0;border-radius:12px;font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.rec-pause{background:#f2f2f7;color:var(--ink)}
.rec-stop{background:var(--grad);color:#fff;box-shadow:0 4px 12px rgba(61,130,240,.25)}
/* Поле, в которое сейчас диктуют: синее кольцо, как при фокусе; растёт по тексту. */
textarea.listening,input.listening{background:#fff;border-color:rgba(61,130,240,.6);box-shadow:var(--ring)}
.voice-field.on-air .voice-mic{display:none}
.voice-field.on-air>textarea,.voice-field.on-air>input{padding-right:16px}
textarea.short{min-height:52px}
textarea.grow{overflow:hidden;resize:none}
/* Поле, которое заполнил методист из рассказа: видно, откуда текст. */
.from-story{background:#fffbea}
.from-story-note{display:block;margin-top:6px;font-size:13px;font-weight:500;color:#8a6d00}
/* Фраза встала в поле — поле коротко подсвечивается. */
.just-filled{animation:just-filled .9s ease-out}
@keyframes just-filled{0%{box-shadow:0 0 0 4px rgba(61,130,240,.45)}100%{box-shadow:var(--ring)}}
@keyframes voice-spin{to{transform:rotate(360deg)}}
@keyframes voice-pulse{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.rec-dot{animation:none}}

/* Замечание к дублю от сервера: темно, тихо, без звука. */
.take-flag{position:absolute;top:6px;left:6px;z-index:2;width:20px;height:20px;border-radius:999px;background:#f3c046;color:#1d1d1f;font-size:12px;font-weight:700;display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.25)}

/* Две версии ролика (Сергей, 23.10): оригинал как снято и улучшенная по кнопке. */
.result-method{margin:10px 0 0}
.enhance-box{margin-top:20px;padding:18px 20px;border:1px solid var(--line);border-radius:18px;background:#fafafc}
.enhance-box strong{display:block;font-size:16px;margin-bottom:4px}
.enhance-box .hint{margin:0 0 14px}
.enhance-box .primary{width:100%}
.magic-actions{display:flex;gap:2px;align-items:stretch}
.magic-actions #enhance{flex:1;min-width:0;border-radius:12px 0 0 12px}
.magic-actions .magic-toggle{flex:0 0 52px;width:52px;min-height:48px;padding:10px;border-radius:0 12px 12px 0}
.magic-toggle svg{transition:transform .15s ease}
.magic-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.enhance-box .magic-summary{margin:10px 0 0}
.magic-options{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.magic-group{margin:14px 0 2px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted,#888)}
.magic-options h3{margin:0;font-size:15px;font-weight:600}
.magic-options .check{margin:14px 0;font-size:14px;min-height:44px;align-items:flex-start}
.magic-options .check input{width:20px;height:20px;flex:none}
.magic-options small{display:block;margin-top:4px;font-size:12px;font-weight:400;line-height:1.5;color:var(--muted)}
.magic-options .hint{margin-bottom:0}
@media(prefers-reduced-motion:reduce){.magic-toggle svg{transition:none}}
.enhance-box .assembly-progress{margin-top:14px}
.warning.stale{margin:0 0 14px;background:#fff6e8;color:#7a4a00;font-size:14px;line-height:1.5}
.view-only #enhance-box,.view-only #enhanced-section .button-row,.view-only #enhanced-section .hint{display:none!important}

/* Образец кадра под сценарием части: что должно попасть в кадр. */
.frame-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;padding:10px 12px;border-radius:12px;background:#f5f5f7}
.frame-icon{flex:none;width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#5b3fd9,#3d82f0);display:grid;place-items:center}
.frame-icon:before{content:"";width:16px;height:16px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8A2.5 2.5 0 0 1 6 5.5h7A2.5 2.5 0 0 1 15.5 8v8a2.5 2.5 0 0 1-2.5 2.5H6A2.5 2.5 0 0 1 3.5 16z'/%3E%3Cpath d='m15.5 10.2 4.2-2.6c.6-.4 1.3 0 1.3.7v7.4c0 .7-.7 1.1-1.3.7l-4.2-2.6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8A2.5 2.5 0 0 1 6 5.5h7A2.5 2.5 0 0 1 15.5 8v8a2.5 2.5 0 0 1-2.5 2.5H6A2.5 2.5 0 0 1 3.5 16z'/%3E%3Cpath d='m15.5 10.2 4.2-2.6c.6-.4 1.3 0 1.3.7v7.4c0 .7-.7 1.1-1.3.7l-4.2-2.6'/%3E%3C/svg%3E") center/contain no-repeat}
.frame-label{flex:none;font-size:12px;font-weight:600;color:#6e6e73}
.frame-text{font-size:13px;line-height:1.45;color:#1d1d1f}
.frame-input{flex:1 1 100%;min-width:0;min-height:0;margin:0;padding:9px 10px;font-size:14px;line-height:1.4;background:#fff;border:1px solid #e5e5ea;border-radius:9px;resize:none;overflow:hidden}
.frame-text{flex:1 1 100%}
/* Рассказ своими словами — главный вход; форма — под спойлером. */
#story-block textarea{min-height:140px;font-size:16px}
#story-voice{margin-top:14px}
.story-talk{width:100%;min-height:56px;font-size:17px}
.story-talk[hidden]{display:none}
#form-details{margin-top:18px}
.methodist-dialog{padding:18px 20px;margin:0 0 18px;background:#f4f6fb;border-radius:12px}
.methodist-dialog .eyebrow{margin-bottom:10px}
#methodist-understood{margin:0;font-size:15px;line-height:1.55}
#methodist-questions label{margin-top:14px}
#methodist-questions textarea{min-height:72px}
.say-button{border:0;background:transparent;font-size:16px;padding:0 4px;cursor:pointer;vertical-align:middle}
#methodist-answer{margin-top:14px}
#record-clock.alert{color:#ff3b30;font-weight:700;font-size:16px}
#publish-row{margin-top:16px}
/* Плашка «Вышла новая версия»: сверху, поверх страницы. */
#update-bar,#conflict-bar{position:fixed;left:12px;right:12px;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:30;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;border-radius:16px;background:#1d1d1f;color:#fff;font-size:15px;line-height:1.35;box-shadow:0 10px 30px rgba(0,0,0,.25)}
#update-bar span,#conflict-bar span{flex:1 1 auto}
#update-bar button,#conflict-bar button{flex:none;min-height:40px;padding:0 16px;border:0;border-radius:11px;background:var(--grad);color:#fff;font:inherit;font-weight:600;cursor:pointer}
/* Методист не ответил: заметно, над сценарием, с кнопкой повтора. */
.methodist-failed{padding:16px 18px;margin:0 0 18px;border-radius:14px;background:#fff6e8;color:#7a4a00;font-size:15px;line-height:1.45}
.methodist-failed strong{display:block;font-size:16px;margin-bottom:4px}
.methodist-failed p{margin:0 0 12px}
.methodist-failed .primary{width:100%}
/* Тарифы на главной: бесплатный урок отдельно, ниже карточки пакетов —
   цена крупно, цена за урок и скидка рядом, подпись отдельной строкой. */
.free-lesson{display:flex;flex-direction:column;gap:4px;padding:16px 18px;margin:0 0 16px;border-radius:16px;background:#eaf7ef;color:#1f6b3f;font-size:15px;line-height:1.4}
.free-lesson strong{font-size:17px;color:#14532d}
.free-lesson.used{background:#f2f2f7;color:var(--muted)}
.free-lesson.used strong{color:var(--ink)}
.tier-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 44px 16px 18px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);text-decoration:none;transition:transform .12s ease}
.tier-card+.tier-card{margin-top:10px}
.tier-card.best{border-color:transparent;box-shadow:0 0 0 2px #3d82f0}
.tier-card:active{transform:scale(.98)}
.tier-head{display:flex;align-items:center;gap:8px}
.tier-head strong{font-size:17px;font-weight:650}
.tier-badge{padding:3px 9px;border-radius:999px;background:var(--grad);color:#fff;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.tier-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.tier-price b{font-size:24px;font-weight:750;letter-spacing:-.01em}
.tier-price span{font-size:14px;color:#1f8a4c;font-weight:600}
.tier-note{font-size:14px;line-height:1.4;color:var(--muted)}
.tier-card .chev{position:absolute;right:16px;top:50%;transform:translateY(-50%)}
/* Разбор продюсера: блоки с заголовками, главная мысль крупно, замечания карточками. */
.producer-block{margin-top:16px}
.producer-title{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.producer-block p{margin:0 0 6px;font-size:15px;line-height:1.5}
.producer-thesis{font-size:18px!important;font-weight:650;line-height:1.4!important}
.producer-hooks{margin:0;padding-left:20px;font-size:15px;line-height:1.5}
.producer-hooks li+li{margin-top:6px}
.producer-issue{padding:12px 14px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.producer-issue+.producer-issue{margin-top:8px}
.producer-issue .issue{font-weight:650}
.producer-issue .why{color:var(--muted)}
.producer-issue .fix{color:#1f6b3f;font-weight:550;margin:0!important}
/* Уроков не осталось — предупреждаем до работы, а не на сборке. */
.quota-warning{margin:16px 0;padding:16px 18px;border-radius:16px;background:#fff6e8;color:#7a4a00;font-size:15px;line-height:1.45}
.quota-warning strong{display:block;font-size:17px;margin-bottom:4px}
.quota-warning p{margin:0 0 12px}
.quota-warning .primary{width:100%}
/* Текст части — читаемый блок: обычный вес, списки тезисов, подзаголовки. */
.script-block{margin-top:14px}
.script-head{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px}
.script-head .text-button{font-size:14px;color:#3d6be6;text-decoration:none;font-weight:600}
.script-view{padding:14px 16px;border-radius:14px;background:#f5f5f7;font-size:16px;line-height:1.5;color:var(--ink)}
.script-view p{margin:0 0 8px}
.script-view p:last-child,.script-view ul:last-child{margin-bottom:0}
.script-view ul{margin:0 0 10px;padding-left:20px}
.script-view li{margin:4px 0}
.script-view .script-key b{font-weight:700}
/* Разбор записи продюсером: под частью, жёлтый — переснять, зелёный — оставить. */
.review-box{margin-top:12px;padding:12px 14px;border-radius:14px;background:#eaf7ef;font-size:15px;line-height:1.45}
.review-box.reshoot{background:#fff6e8}
.review-box p{margin:0 0 6px}
.review-box p:last-child{margin:0}
.review-head{font-weight:700;color:#1f6b3f}
.review-box.reshoot .review-head{color:#7a4a00}
.review-box .weak b{color:#c9341f}
.review-box .fix b{color:#3d6be6}
.review-overall{padding:16px 18px;margin:0 0 18px;border-radius:14px;background:#f4f6fb;font-size:15px;line-height:1.5}
.review-overall .eyebrow{margin-bottom:8px}
.review-overall p{margin:0 0 8px}
.review-verdict{font-size:17px;font-weight:650}
/* Старый черновик: спросить, продолжать ли (25.10) */
.stale-draft{margin:0 0 16px;border:2px solid var(--accent,#DBF27D)}
.stale-draft p{margin:0 0 12px;font-size:16px;line-height:1.45}
.stale-actions{display:flex;flex-direction:column;gap:10px}

/* Окно «Что не так?» — на время пилота: кнопка внизу справа, не перекрывает статус. */
/* «Что не так?» закрывала кнопки (#844, #1052, #1099, #1227): уменьшение не помогло, при прокрутке она всё равно садилась на нижние кнопки карточки. Теперь это вертикальный язычок у правого края: поля карточек шире язычка, на кнопки он не заходит. */.feedback-fab{position:fixed;right:0;top:58%;bottom:auto;z-index:9;border:0;border-radius:12px 0 0 12px;padding:14px 5px 14px 6px;writing-mode:vertical-rl;font:inherit;font-size:12px;font-weight:600;color:#fff;background:var(--grad,#3d82f0);box-shadow:-3px 4px 14px rgba(61,107,230,.3);cursor:pointer;opacity:.92}
#feedback-dialog{max-width:520px;width:92%}
#feedback-dialog textarea{min-height:120px;font-size:16px}

/* Текст под видео: описание и таймкоды от режиссёра — скопировать и вставить. */
.publish-box{margin-top:18px;padding:16px;border-radius:14px;background:#f2f2f7}
.publish-box pre{white-space:pre-wrap;font:inherit;font-size:15px;line-height:1.5;margin:0 0 12px}
/* Карточка «вы потратили N минут» под готовым роликом (25.10). */
.time-card{margin:14px 0 0;padding:14px 16px;border-radius:12px;background:linear-gradient(160deg,#f1eeff 0%,#e9f2ff 100%);font-size:14px;line-height:1.5}
.time-card strong{font-weight:650}
.time-card span{display:block;margin-top:4px;color:var(--muted);font-size:13px}

/* Окно записи: развернуть камеру (фронталка ↔ основная), фронталка зеркалом */
.camera-box{position:relative}
#camera-preview.mirrored{transform:scaleX(-1)}
.flip-camera{position:absolute;right:10px;bottom:10px;border:0;border-radius:999px;padding:10px 14px;font-size:13px;font-weight:600;background:rgba(0,0,0,.6);color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
/* Вертикальная запись в превью — без чёрных полос по бокам (#775, Юля #1052, #1067):
   плеер по размеру кадра и по центру, вертикаль выше, горизонталь как была. */
.clip-preview{display:flex;justify-content:center}
.clip-preview video{width:auto;max-width:100%;max-height:440px;background:transparent}

.take-hide{position:absolute;top:4px;right:4px;z-index:3;width:24px;height:24px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:15px;line-height:24px;text-align:center;cursor:pointer}.take.hidden-take{opacity:.45}.takes-more{margin-top:10px;font-size:12px}

.slot-more{margin-top:10px}
.slot-more>summary{cursor:pointer;color:#3d6be6;font-size:15px;padding:6px 0}

.review-wait{margin:10px 0 0;font-size:14px;color:var(--muted)}
.clip-status.fix{background:#fff1d6;color:#7a4a00}
.lesson-progress{margin:0 0 14px;padding:12px 14px;border-radius:14px;background:#eef3ff}
.lesson-progress p{margin:0 0 8px;font-size:15px;font-weight:600}
.lesson-progress-track{display:block;height:6px;border-radius:999px;background:rgba(61,107,230,.15);overflow:hidden;margin-bottom:6px}
.lesson-progress-fill{display:block;height:100%;background:var(--grad,#3d82f0)}
.lesson-progress .text-button{padding:4px 0;text-align:left}

/* Кабинет: действия привязаны к версии, файлы не растягивают карточку. */
.hub-page .hub-top{margin-inline:auto;width:100%;height:auto}
.hub-page .hub-top h1{font-size:clamp(28px,5vw,36px);line-height:1.15}
.hub-page .hub{margin-inline:auto;width:100%}
.lesson-versions{display:grid;gap:14px;margin-top:18px}
.lesson-version h4{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--muted)}
.lesson-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lesson-actions>.primary,.lesson-actions>.secondary,.lesson-edit{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:46px;padding:11px 8px;font-size:14px;line-height:1.3;text-align:center;text-decoration:none}
.action-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;width:20px;height:20px}
.action-icon svg{display:block;width:20px;height:20px;max-width:100%;overflow:hidden}
.lesson-edit{width:100%;margin-top:14px}

.lesson-actions>.primary>span,.lesson-edit.primary>span{font-size:inherit}

/* Ровно три компактных источника видео, на телефоне остаются одним рядом. */
[data-icon="screen"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E")}
[data-icon="attach"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.4 11-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5'/%3E%3C/svg%3E")}
.slot .capture-sources{position:relative;display:inline-grid;grid-template-columns:repeat(3,48px);gap:6px;align-items:center;padding:6px;margin-top:16px;background:#f4f5f9;border:1px solid #e5e7ef;border-radius:19px;box-shadow:inset 0 1px 0 #fff,0 2px 5px rgba(35,44,73,.035)}
.slot .capture-sources>.primary,.slot .capture-sources>.secondary{grid-column:auto;display:flex;align-items:center;justify-content:center;gap:0;width:48px;height:48px;min-width:48px;min-height:48px;padding:0;margin:0;border:1px solid transparent;border-radius:13px;font-size:12px;line-height:1;text-align:center;transition:background .16s ease,box-shadow .16s ease,transform .12s ease,color .16s ease}
.capture-sources .primary>span{font-size:inherit}
.capture-sources .source-icon{display:block;flex:none;width:22px;height:22px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.capture-sources .upload-button:has(input:disabled){opacity:.42;cursor:not-allowed}
#camera-preview.screen-preview{object-fit:contain;transform:none}
.view-only .capture-sources{display:none!important}

.capture-sources .source-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Панель действий: камера ведёт, экран и вложение остаются спокойными. */
.slot .capture-sources>.primary{background:linear-gradient(140deg,#7154ef,#4b77ef);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 8px rgba(87,85,210,.24)}
.slot .capture-sources>.secondary{background:transparent;color:#616b81;box-shadow:none}
.capture-sources .source-icon{width:23px;height:23px;transition:transform .12s ease}
.slot .capture-sources>button:focus-visible,.slot .capture-sources>.upload-button:focus-within{outline:none;box-shadow:0 0 0 2px #f4f5f9,0 0 0 4px #6559df}
@media(hover:hover){
  .slot .capture-sources>.secondary:hover:not(:disabled):not(:has(input:disabled)){background:#fff;color:#4646b6;box-shadow:0 2px 5px rgba(35,44,73,.08)}
  .slot .capture-sources>.primary:hover:not(:disabled){filter:brightness(1.07)}
}
.slot .capture-sources>button:active:not(:disabled),.slot .capture-sources>.upload-button:active:not(:has(input:disabled)){transform:scale(.94)}
@media(prefers-reduced-motion:reduce){.slot .capture-sources>.primary,.slot .capture-sources>.secondary,.capture-sources .source-icon{transition:none}}
@media(forced-colors:active){.slot .capture-sources{border-color:ButtonText}.slot .capture-sources>button:focus-visible,.slot .capture-sources>.upload-button:focus-within{outline:2px solid Highlight;outline-offset:2px}}

/* Публичная зона: служебные вкладки и подвал скрыты сразу, до скрипта. */
.public-zone #pilot-tab, .public-zone header nav, .public-zone footer { display: none; }
/* Открыт свой урок из кабинета: приглашение «Соберите первый урок» ни к чему. */
.lesson-open .intro { display: none; }

/* Кнопки с пиктограммой: значок из того же набора, что у плиток (владелец, 31.10). */
.primary[data-icon]::before,.secondary[data-icon]::before{content:"";flex:none;width:22px;height:22px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
[data-icon="producer"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='3.6'/%3E%3Cpath d='M3.5 20.2a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M19 3.2l.7 1.9 1.9.7-1.9.7-.7 1.9-.7-1.9-1.9-.7 1.9-.7z'/%3E%3C/svg%3E")}
/* Прогресс разбора: полоса по прогнозу и сколько осталось. */
.produce-progress{margin-top:14px;padding:16px 18px;border-radius:18px;background:#f4f6ff}
.produce-progress[hidden]{display:none}
.produce-progress #make-text{margin:10px 0 0;font-size:15px;font-weight:600;color:var(--ink)}
.produce-progress .assembly-bar span{transition:width 1s linear}
.produce-progress .produce-title{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:16px;font-weight:650;color:var(--ink)}
.produce-progress .produce-title::before{content:"";flex:none;width:30px;height:30px;border-radius:9px;background:var(--grad) ;-webkit-mask:none;mask:none}
.produce-progress .produce-title{position:relative}
.produce-progress .produce-title::after{content:"";position:absolute;left:6px;top:50%;width:18px;height:18px;margin-top:-9px;background:#fff;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.produce-progress .assembly-bar{height:10px}
#make-script[hidden]{display:none}
/* «Что не так?»: кнопки не прилипают к полю, одной высоты, текст в одну строку (владелец, 31.10). */
#feedback-dialog .button-row{margin-top:20px;gap:12px}
#feedback-dialog .button-row>button{min-height:52px;white-space:nowrap}
#feedback-dialog label{margin-top:16px}

/* Кабинет, 31.10 (владелец): уроки отдельными карточками, у черновика — ход
   съёмки, материалы и «Полезное» — плитками одного вида. */
[data-icon="image"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2.5'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='m20.5 16-4.5-4.5L6 19.5'/%3E%3C/svg%3E");--tile:linear-gradient(135deg,#f2843a,#f3c046);}
[data-icon="award"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5'/%3E%3Cpath d='m8.5 13.2-1.3 7.3 4.8-2.6 4.8 2.6-1.3-7.3'/%3E%3C/svg%3E");--tile:linear-gradient(135deg,#d99a1e,#f3c046);}
[data-icon="archive"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='17' height='4.5' rx='1.2'/%3E%3Cpath d='M5.5 8.5V18a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8.5M10 12.5h4'/%3E%3C/svg%3E");--tile:linear-gradient(135deg,#64748b,#94a3b8);}
[data-icon="reel"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.5'/%3E%3Cpath d='m10.5 9 4 3-4 3z'/%3E%3C/svg%3E");--tile:linear-gradient(135deg,#5b3fd9,#c04fd9);}
.lessons-flat{margin:4px 0 20px}
.lessons-flat .section-top{margin:0 4px 12px}
.lessons-flat .lesson-list{gap:14px}
.lessons-flat .lesson{padding:16px;border:0;border-radius:22px;background:#fff;box-shadow:var(--shadow)}
.lesson-thumb.draft{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#f4f5f9;border:1.5px dashed #d3d7e2}
.draft-bars{display:flex;align-items:flex-end;gap:4px;height:26px}
.draft-bars i{display:block;width:6px;height:100%;border-radius:3px;background:#dcdfe8}
.draft-bars i.on{background:var(--grad)}
.lesson-thumb.draft small{font-size:12px;font-weight:650;color:var(--muted);white-space:nowrap}
.lesson-pair{margin-top:14px}
.lesson-pair>.lesson-edit{width:auto;margin-top:0}
.lesson-files{display:grid;gap:8px;margin-top:12px}
.lesson-files[hidden]{display:none}
.tile-list{display:grid;gap:8px}
.tile-row{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:transform .12s ease}
.tile-row:active{transform:scale(.98)}
.tile-row:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tile-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tile-row-text strong{font-size:15px;font-weight:650;line-height:1.3}
.tile-row-text small{font-size:13px;line-height:1.4;color:var(--muted)}
.tile-row-go{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:rgba(118,118,128,.12);color:var(--ink)}
.tile-cover{flex:none;width:40px;height:40px;border-radius:11px;object-fit:cover;background:#111;box-shadow:0 2px 6px rgba(17,24,39,.14)}
.useful-docs{margin:14px 2px 0;font-size:13px;line-height:1.5;color:var(--muted)}
.useful-docs a{color:var(--muted)}
#see-examples{margin-top:16px}
/* Значки для кнопок в одно слово (владелец, 31.10: «к пиктограммам, чтобы даже читать не нужно»). */
[data-icon="download"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m-5-5 5 5 5-5M4 16v5h16v-5'/%3E%3C/svg%3E")}
[data-icon="card"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E")}
[data-icon="send"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 10 14M21 3l-7 18-4-7-7-4Z'/%3E%3C/svg%3E")}
[data-icon="copy"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3'/%3E%3C/svg%3E")}
[data-icon="stop"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='6.5' width='11' height='11' rx='2'/%3E%3C/svg%3E")}
[data-icon="close"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E")}
[data-icon="back"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E")}
/* Спойлеры по всему приложению — строкой с шевроном справа, как «Полезное», а не синей
   ссылкой с треугольником (владелец, 31.10: «сверстать по-человечески, как кнопки»). */
details:not(.useful-item):not(.useful-faq)>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:4px 0;color:var(--ink);font-size:15px;font-weight:600;line-height:1.3;cursor:pointer;-webkit-tap-highlight-color:transparent}
details:not(.useful-item):not(.useful-faq)>summary::-webkit-details-marker{display:none}
details:not(.useful-item):not(.useful-faq)>summary::after{content:"";flex:none;width:8px;height:8px;margin:-4px 6px 0 0;border-right:2px solid #c7c7cc;border-bottom:2px solid #c7c7cc;transform:rotate(45deg);transition:transform .18s ease}
details:not(.useful-item):not(.useful-faq)[open]>summary::after{margin-top:4px;transform:rotate(225deg)}
/* Ссылки внутри согласий — цветом текста с подчёркиванием, не синим цветом браузера. */
.check a,.paybox-foot a{color:inherit;text-decoration:underline;text-decoration-color:rgba(60,60,67,.35);text-underline-offset:2px}
/* «Ваш ролик готов»: главная кнопка, ниже материалы плитками — как в кабинете. */
.result-main{margin-top:16px}
.result-files{margin-top:10px}
.result-accept{margin-top:10px}
/* Назад в кабинет — одна капсула вместо ряда серых кнопок. */
.back-row{margin-top:14px;padding:0;background:none;border-radius:0}
.back-link{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 16px 0 12px;border-radius:999px;background:rgba(118,118,128,.12);color:var(--ink);font-size:15px;font-weight:600;text-decoration:none;-webkit-tap-highlight-color:transparent}
.back-link:active{transform:scale(.97)}
/* Галочка галереи — мелкой строкой под материалами, а не абзацем крупного текста (владелец, 31.10). */
.publish-check{align-items:center;gap:8px;margin:14px 2px 0;font-size:13px;line-height:1.4;color:var(--muted)}
.publish-check input{width:18px;height:18px;margin:0}
/* «Полезное» раскрывается на месте: шапка — та же плитка, ниже содержимое. */
.useful-item{border:1px solid var(--line);border-radius:16px;background:#fff;margin:0;padding:0;font-size:inherit;color:var(--ink)}
.useful-item>summary.tile-row{list-style:none;border:0;color:var(--ink);font-size:inherit;font-weight:inherit}
.useful-item>summary::-webkit-details-marker{display:none}
.useful-item>summary .tile-row-go .action-icon{transition:transform .18s ease}
.useful-item[open]>summary .tile-row-go .action-icon{transform:rotate(180deg)}
.useful-body{padding:0 14px 16px}
.useful-body video{border-radius:12px}
.useful-body .tile-row{min-height:56px}
/* Длинное название примера в одну строку не должно распирать сетку на 320 px. */
#useful-list,.useful-body .tile-list{grid-template-columns:minmax(0,1fr)}
.useful-body .tile-row-text strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.useful-example{margin:4px auto 8px}
.useful-note{margin:12px 2px 0;font-size:14px;line-height:1.5;color:var(--muted)}
.useful-go{margin-top:14px}
.useful-steps{list-style:none;counter-reset:st;margin:0;padding:0;display:grid;gap:10px}
.useful-steps li{counter-increment:st;display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;line-height:1.3;white-space:nowrap}
.useful-steps li::before{content:counter(st);flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:rgba(118,118,128,.12);color:var(--muted)}
.useful-steps li.done{color:var(--muted)}
.useful-steps li.done::before{content:"✓";background:#e3f3e6;color:#2f8a4b}
.useful-steps li.now{color:var(--blue)}
.useful-steps li.now::before{background:var(--blue);color:#fff}
.useful-faq{border-top:1px solid var(--line);margin:0;padding:12px 2px 0;font-size:14px;color:var(--ink)}
.useful-faq:first-child{border-top:0;padding-top:0}
.useful-faq+.useful-faq{margin-top:12px}
.useful-faq>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ink);font-size:15px;font-weight:600;cursor:pointer}
.useful-faq>summary::-webkit-details-marker{display:none}
.useful-faq>summary::after{content:"";flex:none;width:8px;height:8px;margin:-4px 4px 0 0;border-right:2px solid #c7c7cc;border-bottom:2px solid #c7c7cc;transform:rotate(45deg);transition:transform .18s ease}
.useful-faq[open]>summary::after{margin-top:4px;transform:rotate(225deg)}
.useful-faq>p{margin:8px 0 0;line-height:1.5;color:var(--muted)}

/* Плеер по размеру ролика, без чёрных полей по бокам (владелец, 31.10): ширина —
   от пропорций самого ролика, не шире колонки; вертикальный — не выше 70 % экрана. */
video[controls],.lesson-player{width:auto;max-width:100%;height:auto;max-height:min(70vh,640px);margin-inline:auto;background:transparent}

/* Смена обложки: превью, полоса кадров, название. */
.cover-picker{width:min(94vw,520px);max-width:none;max-height:92vh;padding:20px;overflow:auto;border:0;border-radius:24px}
.cover-picker h2{margin:0 0 14px;font-size:20px}
.cover-preview{position:relative;display:grid;place-items:center;min-height:120px;border-radius:16px;overflow:hidden;background:#f2f2f7}
.cover-preview img{display:block;width:100%;height:auto}
.cover-picker.portrait .cover-preview img{width:auto;max-width:100%;max-height:44vh;border-radius:16px}
.cover-busy{position:absolute;right:10px;bottom:10px;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.65);color:#fff;font-size:13px;font-weight:600}
.cover-label{display:block;margin:16px 0 8px;font-size:14px;font-weight:600;color:var(--ink)}
.cover-label textarea{min-height:0;margin-top:8px}
.cover-frames{display:flex;gap:8px;overflow-x:auto;padding:4px 4px 6px;scroll-snap-type:x mandatory}
.cover-frame{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;background:none;color:var(--muted);font:inherit;font-size:11px;font-variant-numeric:tabular-nums;scroll-snap-align:start;cursor:pointer}
.cover-frame img{display:block;width:96px;height:54px;object-fit:cover;border-radius:10px;background:#111;outline:3px solid transparent;outline-offset:1px}
.cover-picker.portrait .cover-frame img{width:54px;height:96px}
.cover-frame[aria-pressed="true"]{color:var(--ink);font-weight:650}
.cover-frame[aria-pressed="true"] img{outline-color:var(--blue)}
.cover-error{margin:10px 0 0;color:#b42318;font-size:14px}
.cover-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.cover-actions>*{min-height:46px;justify-content:center}
/* В уроке: строка обложки под готовым роликом. */
#cover-edit{margin-top:16px}

/* Кнопки на узких телефонах в одну строку (UX-обход 31.10): текст по центру, поля меньше, третья кнопка навигации на всю ширину. */
.primary,.secondary{text-align:center}
nav.button-row>:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:360px){
  .card{padding-left:16px;padding-right:16px}
  .primary,.secondary{padding:0 14px}
  #make-script{font-size:15px;gap:8px}
}

/* Кабинет на 320 px: «Изменить урок» и «Материалы» в одну колонку, иначе текст переносится (Нокс #1696). */
@media(max-width:359px){.lesson-pair{grid-template-columns:1fr}}

/* Язычок обратной связи — только значок: надпись «Что не так?» отвлекала от продукта и с порога вызывала недоверие (владелец, 31.10). */
.feedback-fab{writing-mode:horizontal-tb;padding:9px 5px 9px 7px;font-size:16px;line-height:1;opacity:.85}

/* 320–360 px: названия плиток в одну строку (владелец, 31.10: переносы не нужны). */
@media(max-width:360px){.tile-row{gap:10px;padding:10px 12px}.tile-row-text strong{font-size:14px}}
/* Карточка урока: действия — пиктограммы в один ряд, смотреть — тап по обложке
   (Серёжа: пример «Инкогнито» в Яндекс Браузере — значок, инфа после тапа; владелец, 31.10). */
.lesson-actions.lesson-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.lesson-actions.lesson-bar>.secondary{min-height:48px;padding:0;gap:0}
.lesson-actions.lesson-bar>.lesson-more[aria-expanded=true]{background:#e6ecff;color:#3d6be6}
/* «Изменить урок»: четыре значка в закреплённой полосе — Замысел, Сценарий, Съёмка, Результат
   (Серёжа #1786, Нокс #1789). Текущий раздел — плиткой своего цвета, как значок раздела. */
.lesson-nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:6;display:flex;justify-content:space-around;gap:4px;margin:0 0 14px;padding:4px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;box-shadow:0 4px 18px #193b3512}
.lesson-nav button{position:relative;flex:1 1 0;max-width:80px;min-width:44px;height:48px;padding:0;border:0;border-radius:12px;background:none;color:var(--muted)}
.lesson-nav button::before{content:"";position:absolute;top:13px;left:calc(50% - 11px);width:22px;height:22px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.lesson-nav button[aria-current=true]{background:var(--tile,var(--grad));color:#fff}
.lesson-nav button:disabled{opacity:.3}
#author-view .main-column>section,#slots .slot,#assemble{scroll-margin-top:72px}

/* Cabinet direction selected by Sergey, 31.10 (#1852, #1855).
   Global destinations remain reachable while scrolling; stage icons stay local. */
body.with-app-navigation{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px) + var(--app-keyboard-offset,0px))}
.app-bottom-nav{position:fixed;z-index:30;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;width:100%;max-width:760px;margin:0 auto;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));border:0;border-top:1px solid #e8e5ef;border-radius:20px 20px 0 0;background:rgba(255,255,255,.97);box-shadow:0 -4px 20px #29203d08;backdrop-filter:blur(16px)}
.app-bottom-nav a{display:flex;min-width:0;min-height:56px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:12px;color:#777381;text-decoration:none;font-size:11px;font-weight:550;line-height:1.2;-webkit-tap-highlight-color:transparent}
.app-bottom-nav a[aria-current=page]{color:#6538df;background:#f4f0ff}
.app-bottom-nav a[data-app-route=home][aria-current=page] svg{fill:currentColor}
.app-bottom-nav[aria-busy=true]{opacity:.65;pointer-events:none}
.app-bottom-nav a:focus-visible,.lesson-nav button:focus-visible,.lesson-menu-toggle:focus-visible{outline:3px solid #9168ed;outline-offset:1px}
/* Статус у нас сверху (#status top): отступ снизу растягивал его на весь экран над нижним меню. */
.with-app-navigation #status{z-index:35}
body:has(#record-dialog[open]) .app-bottom-nav,body:has(.rec-panel.recording) .app-bottom-nav{visibility:hidden}
#script-section,#slot-0,#assemble,#result-section,#profile,#lessons{scroll-margin-top:82px}
.hub-page{--paper:#f8f7fc;--ink:#24202d;--muted:#777381;--deep:#6538df;--grad:linear-gradient(135deg,#713df4,#5531df)}
.hub-page .hub-top{display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:14px;padding:28px 20px 20px}
.author-avatar{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:#eee8ff;color:#6538df;font-size:23px;font-weight:650}
.hub-page .hub-top h1{margin:0 0 5px;font-size:23px;line-height:1.25;letter-spacing:-.025em;overflow-wrap:anywhere}
.hub-page .hub-top .section-copy{font-size:15px}
.hub-page .hub{padding:0 20px}
.hub-page .hub-action{margin:4px 0 28px;padding:20px 16px;gap:16px;box-shadow:none;border:1px solid #e8e1f7;background:#f1edfc;border-radius:22px;color:#6538df}
.new-lesson-mark{display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:20px;background:var(--grad);color:white;font-size:44px;line-height:1;font-weight:350;box-shadow:0 5px 12px #6538df18}
.hub-page .hub-action-text strong{font-size:20px}
.hub-page .hub-action-text small{font-size:14px;line-height:1.4;max-width:180px}
.hub-page .hub-action>.chev{display:none}
.hub-page #lessons>.section-top{margin:0 0 14px;gap:8px}
.hub-page #lessons>.section-top>.step{display:none}
.hub-page #lessons h2{font-size:21px}
.lesson-filters{display:flex;gap:10px;margin-bottom:18px}
.lesson-filters button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;min-width:0;padding:8px 12px;border:1px solid transparent;border-radius:13px;background:#f0eef5;color:#777381;font:inherit;font-size:14px;cursor:pointer}
.lesson-filters button[aria-selected=true]{background:#eae4f8;color:#4f2aaa;border-color:#ded2f7}
.lesson-filters button span{padding:2px 6px;border-radius:8px;background:#fff8;font-size:12px;font-weight:650}
.hub-page .lessons-flat .lesson{padding:0;overflow:hidden;border-radius:20px;box-shadow:0 3px 14px #25134207;border:1px solid #eeeaf5}
.hub-page .lesson-head{display:block}
.hub-page .lesson-thumb,.hub-page .lesson-thumb.cover,.hub-page .lesson-thumb.cover.portrait{width:100%;height:auto;aspect-ratio:16/9;border-radius:0;background:#eeebf5}
.hub-page .lesson-thumb.cover.portrait img{object-fit:contain}
.hub-page .lesson-thumb.draft{border:0;gap:12px;aspect-ratio:2.5;background:linear-gradient(135deg,#f1edfc,#f9f7ff)}
.hub-page .lesson-body{padding:16px 16px 10px;min-width:0;flex:1}
.hub-page .lesson-body h3{font-size:18px;line-height:1.35}
.hub-page .lesson-body .lesson-meta{font-size:12px;margin-top:6px}
.lesson-ready{color:#268654;font-size:13px;font-weight:600;margin:8px 0 0}
.lesson-card-footer{display:flex;align-items:center;gap:4px}
.lesson-menu-toggle{display:grid;place-items:center;flex:none;width:48px;min-height:48px;margin-right:10px;border:0;border-radius:13px;background:#f5f3f9;color:#3f354f;cursor:pointer}
.lesson-menu-toggle[aria-expanded=true]{color:#6538df;background:#eee6ff}
.hub-page .lesson>.lesson-edit{display:flex;width:calc(100% - 32px);margin:0 16px 16px;min-height:48px}
.lesson-menu{padding:0 16px 16px}
.lesson-menu[hidden],.lesson[hidden]{display:none!important}
.lesson-menu .lesson-actions{margin-top:6px}
.lesson-menu .lesson-files{margin-top:10px}
.hub-page .lesson-list{grid-template-columns:minmax(0,1fr);gap:18px}
.account-card{margin-top:24px}
.diy-template{white-space:pre-wrap;overflow-wrap:anywhere;padding:12px;border-radius:10px;background:#f4f1fa;font-size:13px;line-height:1.6}
@media(min-width:640px){.hub-page .lesson-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:359px){.hub-page .hub{padding-inline:14px}.hub-page .hub-top{padding-inline:14px}.hub-page .hub-top h1{font-size:21px}.new-lesson-mark{width:56px;height:56px}.hub-page .hub-action-text strong{font-size:18px}.lesson-filters{gap:6px}.lesson-filters button{font-size:13px;padding-inline:10px}}
/* «Написать нам» — капсула в самом низу страницы, в потоке, а не язычок поверх кнопок:
   сбоку он наезжал на кнопки и обрезался (владелец, 31.10: «где-нибудь внизу аккуратно»). */
.feedback-fab{position:static;display:flex;align-items:center;justify-content:center;gap:8px;width:auto;margin:8px auto calc(28px + env(safe-area-inset-bottom));padding:10px 18px;border:0;border-radius:999px;writing-mode:horizontal-tb;font:inherit;font-size:15px;font-weight:600;line-height:1.2;color:#fff;background:var(--grad,#3d82f0);box-shadow:0 4px 14px rgba(61,107,230,.25);opacity:1;cursor:pointer}
.feedback-fab.hidden{display:none}
.draft-materials{padding:0 16px 16px}
.source-recordings .tile-row{min-height:48px}
.source-part{margin:16px 0 0}
.source-part h3{margin:0 0 8px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.source-file{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:8px;margin:8px 0}
.source-file .tile-row{min-width:0;padding:8px;gap:8px}
.source-file .tile-icon{display:none}
.source-file .tile-row-text strong{white-space:normal;overflow-wrap:anywhere;font-size:14px}
.source-download{min-height:48px;padding:0;gap:0}
.source-part video{margin:10px auto}
.producer-context[hidden]{display:none}
.producer-context label{margin-top:14px}
.producer-context .text-button{display:block;min-height:44px;margin-top:4px;text-align:left;font-size:13px}