/**
 * YAZME · КНИГИ 2026 — слой вида
 * ---------------------------------------------------------------------------
 * Идёт ПОВЕРХ books.css, story.css, create.css и ничего в них не переписывает:
 * всё, что здесь есть, либо новые классы (.yz2-*, размётку которых мы сами и
 * пишем), либо точечные переопределения существующих классов на страницах,
 * где размётку рисует чужой JS и трогать её нельзя.
 *
 * Цвета — только переменные --yz-* из yazme-theme.css, поэтому светлая тема
 * cloud и midnight работают сами собой, без второго набора правил.
 *
 * Док (floating_nav) не описан здесь ни одной строкой — он общий для сайта.
 */

/* ══════════════════════════════════════════════════════════════════════════
   0 · ОБЩЕЕ
   ══════════════════════════════════════════════════════════════════════════ */
/* Отступ под нижний док. Тонкое место: books.css задаёт его через .yzb-app,
   но story.css ниже по каскаду объявляет body.story-app{padding:0} — селектор
   с элементом сильнее одного класса, и отступ обнулялся. Пока страница
   заканчивалась подвалом, это было незаметно; без него док накрывал последних
   авторов. Только для прокручиваемых страниц раздела (.yzb-app): у /story/new
   экран фиксированный, и отступ дал бы ему 104px пустой прокрутки. */
body.yz2.yzb-app{padding-bottom:calc(104px + env(safe-area-inset-bottom, 0px))}
.yz2{--yz2-air:clamp(18px,4vw,30px)}
.yz2-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(14px,3vw,26px)}

.yz2-k{font:700 11px/1 var(--yz-font-ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--yz-muted)}
.yz2-eyebrow{display:inline-flex;align-items:center;gap:7px;font:700 10.5px/1 var(--yz-font-ui);
  letter-spacing:.05em;text-transform:uppercase;color:var(--yz-accent);padding:6px 12px;
  border-radius:var(--yz-r-pill);background:var(--yz-accent-soft)}
.yz2-h1{font:800 clamp(28px,5vw,46px)/1.02 var(--yz-font-display);letter-spacing:-.038em;
  margin:14px 0 10px;text-wrap:balance}
.yz2-h2{font:800 clamp(20px,2.6vw,27px)/1.1 var(--yz-font-display);letter-spacing:-.032em;margin:0}
.yz2-lead{color:var(--yz-dim);font-size:15px;line-height:1.6;margin:0;max-width:56ch}
.yz2-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:calc(var(--yz2-air) + 8px) 0 16px}
.yz2-head .yz2-lead{margin-top:8px}
.yz2-head__r{margin-left:auto}

.yz2-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;
  padding:0 24px;border-radius:var(--yz-r-pill);border:none;cursor:pointer;background:var(--yz-grad);
  color:#fff;font:700 15px/1 var(--yz-font-ui);box-shadow:var(--yz-accent-glow);
  transition:transform .18s var(--yz-ease)}
.yz2-btn:active{transform:scale(.97)}
.yz2-btn--gh{background:transparent;border:1px solid var(--yz-accent-line);color:var(--yz-accent-hi);
  box-shadow:none}
.yz2-btn--sm{height:38px;padding:0 16px;font-size:13.5px}

/* переключатель периода */
.yz2-per{display:flex;gap:7px;flex-wrap:wrap}
.yz2-per a{height:36px;display:inline-flex;align-items:center;padding:0 15px;border-radius:var(--yz-r-pill);
  border:1px solid var(--yz-border);background:var(--yz-surface);color:var(--yz-dim);
  font:600 13px/1 var(--yz-font-ui);transition:all .2s var(--yz-ease)}
.yz2-per a.on{background:var(--yz-accent-soft);border-color:var(--yz-accent-line);color:var(--yz-accent-hi)}

/* ══════════════════════════════════════════════════════════════════════════
   1 · /books — ЧАРТ
   ══════════════════════════════════════════════════════════════════════════ */
.yz2-top{display:grid;grid-template-columns:minmax(0,204px) minmax(0,1fr);
  column-gap:clamp(18px,3vw,30px);row-gap:16px;align-items:start;padding:clamp(16px,3vw,24px);
  border-radius:var(--yz-r-xl);
  background:linear-gradient(180deg,var(--yz-accent-soft) 0,transparent 180px),var(--yz-surface);
  border:1px solid var(--yz-border);box-shadow:var(--yz-shadow-md);margin-top:6px}
.yz2-top__cv{grid-column:1;grid-row:1/3}
.yz2-top__c{grid-column:2;grid-row:1;display:block;min-width:0}
.yz2-top__f{grid-column:2;grid-row:2;display:block;min-width:0;align-self:end}
.yz2-top__cv{position:relative;display:block}
.yz2-top__cv .st-cover{border-radius:16px;box-shadow:var(--yz-shadow-lg)}
.yz2-top__rk{position:absolute;left:-8px;top:-16px;z-index:5;font:900 clamp(46px,7vw,68px)/1 var(--yz-font-display);
  letter-spacing:-.06em;color:var(--yz-text);text-shadow:0 2px 14px var(--yz-bg),0 0 6px var(--yz-bg)}
.yz2-top h3{font:800 clamp(23px,3.4vw,34px)/1.06 var(--yz-font-display);letter-spacing:-.038em;margin:0 0 10px;
  text-wrap:balance}
.yz2-top .au{display:flex;align-items:center;gap:9px;color:var(--yz-dim);font-size:14px;margin-bottom:12px;
  flex-wrap:wrap}
.yz2-top .an{display:block;color:var(--yz-dim);font-size:14.5px;line-height:1.6;margin:0 0 16px;max-width:52ch}
.yz2-top .st{display:flex;gap:18px;flex-wrap:wrap;padding:14px 0;margin-bottom:16px;
  border-top:1px solid var(--yz-border);border-bottom:1px solid var(--yz-border)}
.yz2-top .st i{min-width:74px;font-style:normal}
.yz2-top .st b{display:block;font:800 21px/1 var(--yz-font-display);letter-spacing:-.04em}
.yz2-top .st em{display:block;font:700 9.5px/1 var(--yz-font-ui);font-style:normal;letter-spacing:.14em;
  text-transform:uppercase;color:var(--yz-muted);margin-top:7px}

.yz2-rows{margin-top:8px}
.yz2-row{display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:var(--yz-r-lg);
  transition:background .2s var(--yz-ease)}
.yz2-row:hover{background:var(--yz-surface)}
.yz2-row__n{flex:0 0 26px;text-align:right;font:800 17px/1 var(--yz-font-display);letter-spacing:-.05em;
  color:var(--yz-muted)}
.yz2-row__cv{flex:0 0 46px;width:46px;min-width:0}
.yz2-row__cv .st-cover{border-radius:9px;box-shadow:var(--yz-shadow-sm)}
.yz2-row__c{flex:1;min-width:0}
.yz2-row__c b{display:block;font:600 15px/1.25 var(--yz-font-ui);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.yz2-row__c span{display:block;font-size:12.5px;color:var(--yz-muted);margin-top:5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.yz2-row__r{flex:0 0 auto;text-align:right}
.yz2-row__r b{display:block;font:800 15px/1 var(--yz-font-display);letter-spacing:-.03em}
.yz2-row__r small{display:block;font-size:10px;color:var(--yz-muted);margin-top:5px}
.yz2-row__c span em{font-style:normal;font-weight:600;color:var(--yz-accent-hi)}
.yz2-more{display:block;width:100%;margin:14px 0 0;height:46px;border-radius:var(--yz-r-pill);
  border:1px solid var(--yz-border);background:var(--yz-surface);color:var(--yz-dim);
  font:600 14px/1 var(--yz-font-ui);cursor:pointer}
.yz2-more:hover{border-color:var(--yz-accent-line);color:var(--yz-accent-hi)}

.yz2-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:7px;
  font:800 9.5px/1.5 var(--yz-font-ui);letter-spacing:.06em;text-transform:uppercase;
  background:rgba(124,92,255,.16);color:#a68bff;vertical-align:1px;margin-left:7px}
.yz2-tag--new{background:var(--yz-accent-soft);color:var(--yz-accent-hi)}
.yz2-row__c .yz2-tag,.yz2-top .yz2-tag{display:inline-flex;width:auto;margin-top:0;vertical-align:1px}

/* ══════════════════════════════════════════════════════════════════════════
   2 · /books — ЖИВЫЕ ГЕРОИ (персоны)
   ══════════════════════════════════════════════════════════════════════════ */
.yz2-pn{display:flex;gap:12px;overflow-x:auto;padding:4px 4px 12px;scrollbar-width:none;
  scroll-snap-type:x proximity}
.yz2-pn::-webkit-scrollbar{display:none}
/* Строки фиксированной высоты: имя, описание, книга и кнопка обязаны стоять
   на одной линии во всех карточках. Иначе длинное описание у одного героя
   роняет его кнопку ниже соседних, и ряд выглядит собранным на глаз. */
.yz2-pnc{flex:0 0 172px;width:172px;scroll-snap-align:start;display:grid;
  grid-template-rows:78px 20px 34px 26px 38px;row-gap:10px;justify-items:center;text-align:center;
  padding:18px 13px 14px;border-radius:var(--yz-r-xl);
  background:linear-gradient(180deg,rgba(124,92,255,.13) 0,transparent 96px),var(--yz-surface);
  border:1px solid var(--yz-border);
  transition:transform .22s var(--yz-spring),border-color .2s var(--yz-ease)}
.yz2-pnc:hover{transform:translateY(-3px);border-color:var(--yz-border-strong)}
.yz2-pnc__ring{position:relative;width:78px;height:78px;border-radius:50%;display:grid;place-items:center}
.yz2-pnc__ring::before{content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 210deg,#7c5cff,#d97757,#7c5cff);animation:yz2spin 4.5s linear infinite}
@keyframes yz2spin{to{transform:rotate(360deg)}}
.yz2-pnc__ring>*{position:relative;z-index:1;width:68px;height:68px;border-radius:50%;object-fit:cover;
  display:grid;place-items:center;background:var(--yz-surface-2);color:var(--yz-text);
  font:800 24px/1 var(--yz-font-display);border:3px solid var(--yz-surface)}
.yz2-pnc__n{display:flex;align-items:center;gap:6px;justify-content:center;flex-wrap:nowrap;
  max-width:100%;font:700 14.5px/20px var(--yz-font-ui);overflow:hidden}
.yz2-pnc__n>b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.yz2-ai{font:800 8.5px/1 var(--yz-font-ui);letter-spacing:.1em;padding:4px 6px;border-radius:5px;
  background:linear-gradient(135deg,#a68bff,#7c5cff);color:#fff}
.yz2-pnc__t{width:100%;font-size:11.5px;line-height:17px;color:var(--yz-muted);height:34px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yz2-pnc__b{display:flex;align-items:center;justify-content:center;width:100%;height:26px;padding:0 9px;
  border-radius:8px;background:var(--yz-surface-2);color:var(--yz-dim);font-size:10.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yz2-pnc__go{width:100%;height:38px;border-radius:var(--yz-r-pill);border:none;cursor:pointer;
  background:var(--yz-grad);color:#fff;font:700 13px/1 var(--yz-font-ui);display:inline-flex;
  align-items:center;justify-content:center;gap:7px;box-shadow:var(--yz-accent-glow)}
.yz2-shuf{width:38px;height:38px;border-radius:50%;border:1px solid var(--yz-border);cursor:pointer;
  background:var(--yz-surface);color:var(--yz-dim);display:grid;place-items:center;font-size:15px}
.yz2-shuf:hover{border-color:var(--yz-accent-line);color:var(--yz-accent-hi)}
.yz2-shuf.spin{animation:yz2spin .55s var(--yz-ease)}

/* ══════════════════════════════════════════════════════════════════════════
   3 · /books — АВТОРЫ
   ══════════════════════════════════════════════════════════════════════════ */
.yz2-au{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:var(--yz-r-lg);
  transition:background .2s var(--yz-ease)}
.yz2-au:hover{background:var(--yz-surface)}
.yz2-au__n{flex:0 0 24px;text-align:right;font:800 17px/1 var(--yz-font-display);letter-spacing:-.05em;
  color:var(--yz-muted)}
.yz2-au__av{width:48px;height:48px;flex:0 0 48px;border-radius:17px;object-fit:cover;display:grid;
  place-items:center;background:var(--yz-grad);color:#fff;font:800 17px/1 var(--yz-font-display);
  box-shadow:0 0 0 1px var(--yz-border) inset}
.yz2-au__c{flex:1;min-width:0}
.yz2-au__c b{display:flex;align-items:center;gap:6px;font:600 15px/1.2 var(--yz-font-ui)}
.yz2-au__c span{display:block;font-size:12px;color:var(--yz-muted);margin-top:5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.yz2-au__st{flex:0 0 auto;font:800 9.5px/1 var(--yz-font-ui);letter-spacing:.1em;text-transform:uppercase;
  padding:5px 8px;border-radius:7px;background:rgba(226,177,60,.16);color:var(--yz-gold)}
.yz2-au__st--d{background:var(--yz-accent-soft);color:var(--yz-accent-hi)}

.yz2-empty{text-align:center;padding:44px 20px;color:var(--yz-muted);font-size:14.5px;line-height:1.6}
.yz2-empty .em{font-size:34px;margin-bottom:14px}

@media (max-width:760px){
  .yz2-top{grid-template-columns:104px minmax(0,1fr);column-gap:14px;row-gap:14px;padding:14px}
  .yz2-top__cv{grid-row:1}
  .yz2-top__f{grid-column:1/-1;grid-row:2}
  .yz2-top__rk{left:6px;top:6px;width:26px;height:26px;display:grid;place-items:center;
    font-size:14px;letter-spacing:0;border-radius:9px;background:var(--yz-grad);color:#fff;
    text-shadow:none;box-shadow:var(--yz-shadow-sm)}
  .yz2-top h3{font-size:19px;margin-bottom:8px}
  .yz2-top .au{font-size:12.5px;margin-bottom:8px;gap:7px}
  .yz2-top .an{font-size:12.5px;line-height:1.5;margin-bottom:0;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .yz2-top .st{gap:14px;padding:12px 0;margin-bottom:14px}
  .yz2-top .st i{min-width:0}
  .yz2-top .st b{font-size:18px}
  .yz2-top .yz2-btn{width:100%;height:46px}
  .yz2-head__r{margin-left:0;width:100%}
}

/* ══════════════════════════════════════════════════════════════════════════
   4 · /books/new — РАЗВИЛКА «ЧТО НАПИШЕМ»
   ══════════════════════════════════════════════════════════════════════════ */
.yz2-fork{max-width:900px;margin:0 auto;padding:clamp(20px,4vw,36px) 0 0}
.yz2-fork__h{text-align:center;margin-bottom:clamp(22px,4vw,34px)}
.yz2-fork__h h1{font:800 clamp(30px,5.4vw,50px)/1.02 var(--yz-font-display);letter-spacing:-.042em;
  margin:14px 0 12px;text-wrap:balance}
.yz2-fork__h p{color:var(--yz-dim);font-size:15px;line-height:1.6;margin:0 auto;max-width:46ch}

.yz2-doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.yz2-door{display:block;overflow:hidden;border-radius:var(--yz-r-xl);border:1px solid var(--yz-border);
  background:var(--yz-surface);box-shadow:var(--yz-shadow-md);
  transition:transform .22s var(--yz-spring),border-color .2s var(--yz-ease)}
.yz2-door:hover{transform:translateY(-4px);border-color:var(--yz-border-strong)}
.yz2-door--story{background:linear-gradient(180deg,var(--yz-accent-soft) 0,transparent 150px),var(--yz-surface)}
.yz2-door--game{background:linear-gradient(180deg,rgba(124,92,255,.15) 0,transparent 150px),var(--yz-surface)}
.yz2-door--gift{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:15px 17px;
  box-shadow:none;background:linear-gradient(180deg,rgba(226,177,60,.1) 0,transparent 74px),var(--yz-surface)}

.yz2-door__pv{display:flex;height:100px;display:flex;align-items:center;gap:14px;padding:0 18px;
  border-bottom:1px solid var(--yz-border);background:var(--yz-bg-deep)}
.yz2-mini{flex:0 0 56px;width:56px;height:78px;border-radius:9px;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;padding:6px 4px;overflow:hidden;
  position:relative;box-shadow:var(--yz-shadow-sm);color:#faf9f5;
  background:linear-gradient(135deg,#eaa77c,#b3552e)}
.yz2-mini::after{content:'';position:absolute;inset:0;
  background:radial-gradient(70% 70% at 50% 42%,rgba(255,255,255,.16),rgba(0,0,0,.2))}
.yz2-mini b{position:relative;z-index:1;font:800 10px/1.05 var(--yz-font-display);letter-spacing:-.03em}
.yz2-mini--game{background:linear-gradient(135deg,#33344a,#141520)}
.yz2-lines{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.yz2-lines i{display:block;height:6px;border-radius:3px;background:rgba(141,136,120,.36)}
.yz2-lines i.s{width:62%}
.yz2-lines i.m{width:84%}
.yz2-lines u{display:flex;align-items:center;gap:6px;height:20px;border-radius:7px;padding:0 8px;
  background:var(--yz-surface-2);border:1px solid var(--yz-border);text-decoration:none}
.yz2-lines u em{width:12px;height:12px;flex:0 0 12px;border-radius:4px;background:var(--yz-surface)}
.yz2-lines u s{flex:1;height:5px;border-radius:3px;background:rgba(141,136,120,.4);text-decoration:none}
.yz2-lines u.on{background:var(--yz-accent-soft);border-color:var(--yz-accent-line)}
.yz2-lines u.on em{background:var(--yz-accent)}
.yz2-lines u.on s{background:rgba(232,138,104,.55)}

.yz2-door__c{display:block;padding:16px 18px 18px}
.yz2-door__b{display:inline-flex;align-items:center;gap:5px;height:23px;padding:0 10px;
  border-radius:var(--yz-r-pill);font:700 10px/1 var(--yz-font-ui);letter-spacing:.05em;
  text-transform:uppercase;background:var(--yz-accent-soft);color:var(--yz-accent-hi);margin-bottom:11px}
.yz2-door--game .yz2-door__b{background:rgba(124,92,255,.18);color:#a68bff}
.yz2-door__c h3{margin:0 0 8px;font:800 21px/1.1 var(--yz-font-display);letter-spacing:-.035em}
.yz2-door__c p{margin:0 0 13px;font-size:13.5px;line-height:1.55;color:var(--yz-dim)}
.yz2-door__f{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:15px}
.yz2-door__f span{font:600 11.5px/1 var(--yz-font-ui);color:var(--yz-muted);padding:7px 10px;
  border-radius:8px;background:var(--yz-surface-2)}
.yz2-door__go{display:inline-flex;align-items:center;gap:7px;font:700 14.5px/1 var(--yz-font-ui);
  color:var(--yz-accent-hi)}
.yz2-door--game .yz2-door__go{color:#a68bff}
.yz2-door__ic{width:46px;height:46px;flex:0 0 46px;border-radius:16px;display:grid;place-items:center;
  font-size:21px;background:rgba(226,177,60,.16)}
.yz2-door__gc{display:block;flex:1;min-width:0}
.yz2-door__gc b{display:block;font:700 15.5px/1.2 var(--yz-font-ui)}
.yz2-door__gc span{display:block;font-size:12.5px;color:var(--yz-muted);margin-top:6px;line-height:1.5}
.yz2-door__gc em{font-style:normal;font:700 9.5px/1 var(--yz-font-ui);letter-spacing:.05em;
  text-transform:uppercase;color:var(--yz-gold);background:rgba(226,177,60,.16);padding:4px 7px;
  border-radius:6px;margin-right:7px;display:inline-block;vertical-align:1px}
.yz2-door__ar{flex:0 0 auto;color:var(--yz-muted);font-size:18px}

.yz2-note{margin:18px auto 0;max-width:640px;padding:15px 17px;border-radius:var(--yz-r-lg);display:flex;
  gap:13px;align-items:center;background:var(--yz-surface);border:1px solid var(--yz-border);text-align:left}
.yz2-note__i{width:42px;height:42px;flex:0 0 42px;border-radius:14px;display:grid;place-items:center;
  background:var(--yz-grad);color:#fff;font-size:18px}
.yz2-note__c{display:block;flex:1;min-width:0}
.yz2-note__c b{display:block;font:600 14px/1.3 var(--yz-font-ui)}
.yz2-note__c span{display:block;font-size:12.5px;color:var(--yz-muted);margin-top:5px;line-height:1.5}
.yz2-note a{color:var(--yz-accent-hi);border-bottom:1px solid currentColor}
.yz2-note--warn{background:linear-gradient(180deg,rgba(226,177,60,.12) 0,transparent 70px),var(--yz-surface)}
.yz2-note--warn .yz2-note__i{background:rgba(226,177,60,.2);color:var(--yz-gold)}

@media (max-width:720px){
  .yz2-door--gift{flex-wrap:wrap}
  .yz2-door__ar{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   5 · /story/new — ДВА ШАГА ДО РАЗГОВОРА
   Каркас шагов (.st-start / .st-step / .steps) остаётся от story.css: он рабочий
   и завязан на start.js. Мы переодеваем только содержимое, и всё под .yz2 —
   чтобы /story/ и /story/create остались нетронутыми.
   ══════════════════════════════════════════════════════════════════════════ */
.yz2 .st-start-in{width:min(680px,100%);padding-top:clamp(14px,3vw,26px)}
/* небезопасное центрирование: контент выше экрана уезжал вверх и не доскролливался */
.yz2 .st-step[data-step="2"].on{align-items:flex-start}
.yz2 .st-start-head .steps i{height:4px;border-radius:4px}
.yz2 .st-start-head .steps i.on{background:var(--yz-accent)}

.yz2 .st-eyebrow{display:inline-flex;align-items:center;gap:7px;font:700 10.5px/1 var(--yz-font-ui);
  letter-spacing:.2em;text-transform:uppercase;color:var(--yz-accent);margin-bottom:14px}
.yz2 .st-start-t{font-family:'Unbounded','Inter',sans-serif;font-weight:800;letter-spacing:-.04em;
  font-size:clamp(27px,5vw,42px);line-height:1.04}
.yz2 .st-start-t.sm{font-size:clamp(22px,4.2vw,32px);line-height:1.15;letter-spacing:-.035em}
.yz2 .st-start-sub{font-size:15px;line-height:1.6;max-width:46ch;color:var(--yz-dim)}
.yz2 .st-start-note{color:var(--yz-muted);font-size:12.5px;margin-top:26px}

.yz2 .st-fmt-grid{gap:11px}
.yz2 .st-fmt{padding:16px;border-radius:var(--yz-r-lg);border:1px solid var(--yz-border);
  background:var(--yz-surface);gap:14px;transition:all .2s var(--yz-ease)}
.yz2 .st-fmt:hover{transform:translateY(-2px);border-color:var(--yz-accent-line);
  background:linear-gradient(180deg,var(--yz-accent-soft) 0,transparent 88px),var(--yz-surface)}
.yz2 .st-fmt .em{width:46px;height:46px;flex:0 0 46px;border-radius:16px;display:grid;place-items:center;
  font-size:21px;background:var(--yz-surface-2)}
.yz2 .st-fmt:hover .em{background:var(--yz-grad);color:#fff}
.yz2 .st-fmt .tx b{font:700 16px/1.25 var(--yz-font-ui)}
.yz2 .st-fmt .tx i{font-size:12.5px;color:var(--yz-muted);margin-top:5px;line-height:1.45}
.yz2 .st-fmt .go{color:var(--yz-muted)}

.yz2 .st-answer textarea,.yz2 #q-input{border-radius:var(--yz-r-lg);font-size:16.5px;line-height:1.6;
  padding:16px 52px 16px 18px;min-height:126px}
.yz2 .st-sugs{gap:8px;margin-top:16px}
.yz2 .st-sugs .st-chip{height:36px;padding:0 14px;border-radius:var(--yz-r-pill);
  border:1px solid var(--yz-border);background:var(--yz-surface);color:var(--yz-dim);
  font:600 12.5px/1 var(--yz-font-ui);display:inline-flex;align-items:center}
.yz2 .st-sugs .st-chip:hover{border-color:var(--yz-accent-line);color:var(--yz-accent-hi)}
.yz2 .st-ai-line{margin-bottom:16px}
.yz2 .st-start-acts{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.yz2 .st-start-acts .st-btn.primary{border-radius:var(--yz-r-pill);height:52px;font:700 15.5px/1 var(--yz-font-ui);
  box-shadow:var(--yz-accent-glow)}
.yz2 .st-start-acts .st-btn.ghost{border-radius:var(--yz-r-pill);height:46px;font-size:14px}

/* врезка «героев здесь нет» — единственный новый элемент на экране */
.yz2 .st-hint{display:flex;gap:13px;align-items:flex-start;margin-top:20px;padding:15px 17px;
  border-radius:var(--yz-r-lg);background:var(--yz-surface);border:1px solid var(--yz-border)}
.yz2 .st-hint .ic{width:42px;height:42px;flex:0 0 42px;margin-top:1px;border-radius:14px;display:grid;place-items:center;
  font-size:18px;background:var(--yz-surface-2)}
.yz2 .st-hint .tx{flex:1;min-width:0}
.yz2 .st-hint .tx b{display:block;font:600 14px/1.3 var(--yz-font-ui)}
.yz2 .st-hint .tx span{display:block;font-size:12.5px;color:var(--yz-muted);margin-top:5px;line-height:1.5}
.yz2 .st-hint a{color:var(--yz-accent-hi);border-bottom:1px solid currentColor}

/* ══════════════════════════════════════════════════════════════════════════
   6 · /book/create.php — МАСТЕР ИНТЕРАКТИВНОЙ КНИГИ
   Размётку слайдов рисует create.js, менять её нельзя: здесь только вид.
   Все классы-состояния (.on, .done, .active, .bk-hidden) сохраняются.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- шаг виден целиком ----------------------------------------------------
   Было justify-content:center на прокручиваемом контейнере: если контент выше
   экрана, верх уезжает выше нуля и доскроллить до него нельзя. На «Деталях»
   так пряталось семь полей. flex-start это чинит, не меняя ни строчки JS. */
.bkw-slide{justify-content:flex-start;padding-top:calc(84px + var(--safe-top))}
.bkw-inner{max-width:600px;text-align:left}

/* --- рейка шагов: активный шаг называет себя ------------------------------
   Точки уже несут title="Название" — подпись берём оттуда, номер считаем
   счётчиком CSS. Ни одного нового атрибута в JS. */
.bkw-dots{counter-reset:yz2st;gap:6px;align-items:center}
.bkw-dot{counter-increment:yz2st;width:9px;height:9px;border-radius:50%;padding:0;
  background:color-mix(in srgb,var(--bk-text) 15%,transparent);
  box-shadow:none;overflow:hidden;white-space:nowrap;
  transition:width .4s cubic-bezier(.22,1,.36,1),background .3s}
.bkw-dot.done{background:rgba(217,119,87,.55)}
.bkw-dot.on{width:auto;height:30px;padding:0 13px 0 7px;border-radius:999px;
  background:var(--bk-grad);color:#fff;display:inline-flex;align-items:center;gap:7px;
  font:700 12px/1 'Inter',system-ui,sans-serif;box-shadow:0 6px 18px -8px rgba(217,119,87,.85)}
.bkw-dot.on::before{content:counter(yz2st);display:grid;place-items:center;width:18px;height:18px;
  border-radius:50%;background:rgba(255,255,255,.22);font:800 10px/1 'Inter',system-ui,sans-serif}
.bkw-dot.on::after{content:attr(title)}

/* --- типографика шага ----------------------------------------------------- */
.bkw-step-label{font-size:10.5px;letter-spacing:.22em;color:var(--bk-accent-hi);margin-bottom:14px}
.bkw-q{font-family:'Unbounded','Inter',sans-serif;font-weight:800;letter-spacing:-.04em;
  font-size:clamp(25px,4vw,36px);margin-bottom:12px}
.bkw-hint{margin:0 0 26px;max-width:44ch;font-size:14px}

.bkw-title-input{text-align:left;font-family:'Unbounded','Inter',sans-serif;letter-spacing:-.035em;
  font-size:clamp(23px,4.2vw,36px);border-bottom-width:2px}
.bkw-count{text-align:right}

.bkw-genres{justify-content:flex-start}
.bkw-genre{padding:0 16px;height:42px;border-radius:999px;font-size:14px;font-weight:600;border-width:1px}
.bkw-genre.on{transform:none;box-shadow:0 8px 22px -10px rgba(217,119,87,.75)}
.bkw-genre:hover{transform:none}

.bkw-prompt{border-radius:var(--bk-r-lg,20px);font-size:16px;line-height:1.7;min-height:170px}
.bkw-ai-row{justify-content:flex-start}
.bkw-ai-note{margin-top:18px}

/* --- шаг «Герои»: карточки в столбик, как в списке ------------------------ */
#sl_chars .bkw-hint{max-width:none;padding:14px 16px;border-radius:16px;
  background:rgba(124,92,255,.1);border:1px solid rgba(124,92,255,.24);color:var(--bk-dim);
  font-size:13px;line-height:1.55;margin-bottom:20px}
.bkw-chars{flex-direction:column;flex-wrap:nowrap;gap:9px;justify-content:flex-start;margin-bottom:14px}
.bkw-char{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:13px;
  align-items:center;text-align:left;padding:12px 74px 12px 12px;border-radius:18px;border-width:1px}
.bkw-char img{grid-column:1;grid-row:1/4;width:52px;height:52px;border-radius:17px;margin:0;
  border-width:1px}
.bkw-char b{grid-column:2;align-self:end;font-size:15px;margin:0}
.bkw-char span{grid-column:2;font-size:10px;letter-spacing:.09em;text-transform:uppercase;margin:3px 0 0;
  color:#a68bff}
.bkw-char p{grid-column:2;-webkit-line-clamp:1;margin-top:4px;font-size:12px}
.bkw-char .del{top:50%;right:12px;transform:translateY(-50%);width:30px;height:30px;font-size:12px;
  background:color-mix(in srgb,var(--bk-text) 8%,transparent)}
.bkw-char .edit-pen{top:50%;left:auto;right:48px;transform:translateY(-50%);width:30px;height:30px;
  font-size:11px;background:color-mix(in srgb,var(--bk-text) 8%,transparent)}
.bkw-add-char{width:100%;min-height:0;height:54px;flex-direction:row;gap:10px;border-radius:18px;
  border-width:1.5px;font-size:14px}
.bkw-add-char i{font-size:15px}
.bkw-add-char:hover{transform:none}

/* --- обложка и детали ----------------------------------------------------- */
.bkw-cover-zone{justify-content:flex-start;align-items:flex-start}
.bkw-swatch.on{box-shadow:0 0 0 3px rgba(217,119,87,.55)}
.bkw-format-card{border-radius:16px;border-width:1px}
.bkw-format-card:hover{transform:none;border-color:var(--bk-border-strong)}
.bkw-format-card.on{box-shadow:none}
.bkw-format-card b{font-size:14.5px}

/* --- финал ---------------------------------------------------------------- */
.bkw-review{justify-content:flex-start}
.bkw-review-info h3{font-family:'Unbounded','Inter',sans-serif;letter-spacing:-.035em;font-size:24px}
.bkw-nav{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

@media (max-width:640px){
  .bkw-inner{max-width:none}
  .bkw-char{padding-right:70px}
  .bkw-dot.on{max-width:52vw}
}


/* [cloud-fix 2026-08-19] Лавандовый #a68bff на белом читался ~2:1 — в светлой теме темнее. */
html[data-yz-theme="cloud"] .yz2-tag{color:#6d4fd8}
html[data-yz-theme="cloud"] .yz2-door--game .yz2-door__b{color:#6d4fd8}
html[data-yz-theme="cloud"] .yz2-door--game .yz2-door__go{color:#6d4fd8}
html[data-yz-theme="cloud"] .bkw-char span{color:#6d4fd8}