/* ============================================================
   MagicTales — спільні стилі
   ------------------------------------------------------------
   Раніше лежали інлайном у index.html. Винесені сюди, бо ті самі
   правила потрібні редактору чернетки (/editor.html): конструктор
   на обох сторінках однаковий, тож і стилі мусять бути одні.
   ============================================================ */

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  /* ---- ТЕМНА ТЕМА: глибокий фіолет + м'які світлові плями ----
     Фон закріплений (background-attachment:fixed), щоб плями не «їхали»
     при скролі й сторінка виглядала як одне суцільне нічне небо. */
  body{margin:0;color:#efeaff;font-family:'Nunito',sans-serif;
      background:
        radial-gradient(1100px 700px at 78% -6%, rgba(139,92,246,.30), transparent 62%),
        radial-gradient(900px 620px at 8% 12%, rgba(236,72,153,.16), transparent 60%),
        radial-gradient(1000px 800px at 50% 108%, rgba(56,189,248,.10), transparent 65%),
        linear-gradient(180deg,#1c0b3d 0%,#190a36 42%,#150830 100%);
      background-attachment:fixed;background-repeat:no-repeat}
  ::selection{background:rgba(236,72,153,.45)}
  a{color:#c4b5fd;text-decoration:none;transition:color .15s}
  a:hover{color:#f9a8d4}
  button{font-family:inherit}
  /* Дрібні зорі на фоні — статичний шар, не заважає кліками */
  .sky{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
      background-image:
        radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 27% 62%, #e9d5ff, transparent),
        radial-gradient(1.6px 1.6px at 44% 24%, #fff, transparent),
        radial-gradient(1.1px 1.1px at 61% 71%, #fbcfe8, transparent),
        radial-gradient(1.5px 1.5px at 73% 33%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 88% 58%, #ddd6fe, transparent),
        radial-gradient(1.3px 1.3px at 34% 88%, #fff, transparent),
        radial-gradient(1.1px 1.1px at 92% 12%, #fff, transparent)}
  /* Загальні картки лендінга: скло на темному */
  .lp-card{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);
      backdrop-filter:blur(6px);transition:border-color .18s,transform .18s,background .18s}
  .lp-card:hover{border-color:rgba(196,181,253,.42);transform:translateY(-3px);background:rgba(255,255,255,.08)}
  /* Строк кроку в блоці «Як це працює». Колір задається в розмітці —
     свій акцент на кожній картці; тут лише форма плашки. */
  .how-time{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:999px;
      background:rgba(255,255,255,.08);border:1px solid currentColor;
      font-size:11px;font-weight:800;line-height:1.4;letter-spacing:.01em;opacity:.92}
  .lp-h2{font-family:'Baloo 2',sans-serif;font-weight:800;color:#fff;margin:0 0 10px;
      text-shadow:0 2px 22px rgba(167,139,250,.35)}
  .lp-sub{color:rgba(233,224,255,.62);margin:0}

  /* ---------- Приклади казок ----------
     Картка — це кнопка: за нею відкривається справжня книга, і
     виглядати вона мусить натисканою, а не просто гарною. Тому
     обкладинка світлішає під курсором, а поверх неї виїжджає
     напис «Погортати».

     Пропорція 3:4 — вертикаль книжкової сторінки. Було фіксовані
     190 px, і обкладинки різних форматів обрізалися по-різному. */
  .gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .sample-card{display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;
      border-radius:20px;cursor:pointer;font-family:inherit;color:inherit;
      box-shadow:0 18px 36px -18px rgba(0,0,0,.8)}
  .sample-card:disabled,.sample-card.is-busy{cursor:progress}
  .sample-pic{position:relative;display:block;width:100%;aspect-ratio:3/4;overflow:hidden;
      background:rgba(0,0,0,.25)}
  .sample-pic img{width:100%;height:100%;object-fit:cover;display:block;
      transition:transform .25s,filter .18s}
  .sample-card:hover .sample-pic img{transform:scale(1.04);filter:brightness(1.06)}
  .sample-open{position:absolute;left:50%;bottom:12px;transform:translate(-50%,14px);
      padding:8px 18px;border-radius:999px;background:linear-gradient(135deg,#ec4899,#8b5cf6);
      color:#fff;font-size:12.5px;font-weight:800;white-space:nowrap;
      box-shadow:0 12px 26px -10px rgba(236,72,153,.9);
      opacity:0;transition:opacity .18s,transform .18s;pointer-events:none}
  .sample-card:hover .sample-open,
  .sample-card:focus-visible .sample-open{opacity:1;transform:translate(-50%,0)}
  .sample-card.is-busy .sample-open{opacity:1;transform:translate(-50%,0)}
  .sample-body{display:block;padding:12px 14px}
  .sample-ttl{display:block;font-weight:800;font-size:13.5px;color:#fff;line-height:1.3}
  .sample-sub{display:block;font-size:12px;color:rgba(233,224,255,.55);margin-top:3px;line-height:1.4}

  /* ---------- Відгуки батьків ----------
     Два однакові відгуки в один ряд — і на цьому все. Блок стоїть
     між прикладами казок і цінами, тобто його справа — коротко
     підтвердити, а не показати другу вітрину. Тут була ще й велика
     картка з фото на всю ширину над рядом; вона розтягувала блок
     на пів екрана й відсувала ціни за край видимого.

     Фото клікабельне, тому це <button>: обрізаний кадр у картці
     нічого не доводить, а великим на ньому видно розворот книги.
     Скидаємо кнопкові за замовчуванням стилі — рамку, тло й
     шрифт, — бо виглядати воно мусить картинкою. */
  .rv-badge{display:inline-block;background:rgba(139,92,246,.20);border:1px solid rgba(196,181,253,.34);
      color:#ddd6fe;font-weight:800;font-size:11.5px;padding:5px 13px;border-radius:999px}
  /* Картки тягнемо на однакову висоту (align-items за замовчуванням —
     stretch): відгуки різної довжини інакше дали б фото на різних
     рівнях, і ряд читався б як зламаний. Різницю з'їдає margin-top:auto
     на фото — воно притискається донизу, а зайве місце лишається над
     ним, усередині картки.

     Колонки рахує auto-fit, а не число: та сама сітка малює три
     картки в блоці на лендінгу й десяток на /reviews.html, і
     ширина колонки там різна. 215 px — межа, за якою рядок тексту
     стає в три слова. */
  .rv-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}

  /* Посилання на всі відгуки під рядом карток. Не кнопка: головна
     дія на лендінгу — «Створити казку», і другий яскравий овал
     поруч із нею відбирав би натискання.

     Висота під палець задана рядком, а не колом: посилання лишається
     текстом, але площа натискання виходить на 40 px. */
  .rv-all{display:inline-flex;align-items:center;min-height:40px;
      color:#c4b5fd;font-weight:800;font-size:13px;
      border-bottom:1px solid rgba(196,181,253,.35);
      transition:color .15s,border-color .15s}
  .rv-all:hover{color:#fff;border-color:rgba(255,255,255,.6)}

  /* Лічильник під заголовком на самій сторінці відгуків */
  .rv-count{margin-top:10px;font-size:12.5px;font-weight:800;color:rgba(233,224,255,.5)}
  /* Повернення на лендінг. Своє, а не .lg-back з юридичних сторінок:
     той клас живе всередині legal-page.js і сюди просто не приїде. */
  .rv-back{display:inline-flex;align-items:center;gap:7px;color:#c4b5fd;font-weight:800;font-size:13.5px;
      margin-bottom:18px;min-height:32px}

  /* Сторінка без жодного відгуку. Порожня сітка виглядає як збій,
     тому кажемо прямо — і одразу даємо, куди йти далі. */
  .rv-empty{text-align:center;padding:40px 20px;border-radius:18px;
      background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
  .rv-empty p{margin:0 0 18px;color:rgba(233,224,255,.6);font-size:14px;line-height:1.6}
  .rv-empty-cta{display:inline-block;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;
      font-weight:800;padding:12px 24px;border-radius:999px;font-size:14px;
      box-shadow:0 12px 28px -10px rgba(168,85,247,.85)}
  /* Картка — кнопка: натискання будь-де відкриває відгук цілком.
     Тому скидаємо кнопкові за замовчуванням рамку, тло, шрифт і
     вирівнювання тексту, щоб вона лишилася карткою на вигляд. */
  .rv-card{border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
      box-shadow:0 14px 28px -20px rgba(0,0,0,.8);
      padding:0;border:0;font:inherit;text-align:left;width:100%;cursor:pointer}
  .rv-body{padding:14px 15px;display:flex;flex-direction:column;gap:9px}
  /* Два рядки й три крапки. Відгуки приходять різної довжини, і один
     довгий розтягував увесь ряд — картка тут анонс, решту слів людина
     дочитує у вікні. */
  .rv-text{margin:0;font-size:13px;line-height:1.55;color:rgba(233,224,255,.84);
      display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
      overflow:hidden}
  .rv-who{display:flex;align-items:center;gap:9px;min-width:0}
  .rv-ava{flex-shrink:0;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
      background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;font-weight:800;font-size:13px}
  .rv-who-txt{min-width:0}
  .rv-name{display:block;font-weight:800;font-size:12.5px;color:#fff;line-height:1.3}
  .rv-meta{display:block;font-size:11px;color:rgba(233,224,255,.52);margin-top:1px;line-height:1.4}
  .rv-pic{position:relative;display:block;width:100%;padding:0;margin:0;border:0;overflow:hidden;
      background:rgba(0,0,0,.28);font-family:inherit}
  .rv-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s,filter .18s}
  .rv-pic:hover img{transform:scale(1.03);filter:brightness(1.06)}
  /* Горизонтальний кадр і притиснутий донизу: фото тут підтверджує,
     що книга є, а не розповідає історію — високий кадр з'їдав би
     стовпчик. margin-top:auto вирівнює низ обох карток, коли тексти
     різної довжини. */
  .rv-pic{aspect-ratio:16/9;margin-top:auto}
  .rv-zoom{position:absolute;right:10px;bottom:10px;padding:5px 12px;border-radius:999px;
      background:rgba(15,10,35,.72);border:1px solid rgba(196,181,253,.35);backdrop-filter:blur(4px);
      color:#efeaff;font-size:12px;font-weight:800;white-space:nowrap;
      opacity:0;transform:translateY(8px);transition:opacity .18s,transform .18s;pointer-events:none}
  .rv-card:hover .rv-zoom,.rv-card:focus-visible .rv-zoom{opacity:1;transform:translateY(0)}
  .rv-card:hover .rv-pic img{transform:scale(1.03);filter:brightness(1.06)}
  /* На сенсорних екранах наведення немає — підказка просто стоїть. */
  @media (hover:none){.rv-zoom{opacity:1;transform:translateY(0)}}

  /* Вікно відгуку. Живе поверх усього, тому z-index навмисно
     великий: конструктор нижче має власні спливні шари. */
  .rv-light{position:fixed;inset:0;z-index:9999;background:rgba(8,4,22,.92);backdrop-filter:blur(6px);
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px 20px;
      cursor:zoom-out;animation:rvFade .16s ease-out}
  /* Трохи ширше за картку, але не на весь монітор: це той самий
     відгук, а рядок на всю ширину екрана читається гірше. Висота
     обмежена екраном — довгий текст гортається всередині вікна. */
  .rv-modal{width:min(560px,94vw);max-height:86vh;overflow:auto;cursor:auto;
      border-radius:20px;padding:22px;background:#191036;
      border:1px solid rgba(196,181,253,.22);
      box-shadow:0 30px 80px -30px rgba(0,0,0,.9);animation:rvUp .2s ease-out}
  .rv-modal-head{margin-bottom:14px}
  .rv-modal-head .rv-ava{width:36px;height:36px;font-size:15px}
  .rv-modal-head .rv-name{font-size:14px}
  .rv-modal-head .rv-meta{font-size:12px}
  .rv-modal-text{margin:0;font-size:14.5px;line-height:1.65;color:rgba(233,224,255,.9)}
  .rv-modal-pic{width:100%;margin-top:16px;border-radius:14px;display:block}
  .rv-light-cap{color:rgba(233,224,255,.72);font-size:13px;font-weight:700;text-align:center}
  .rv-light-x{position:absolute;top:18px;right:20px;width:40px;height:40px;border-radius:50%;
      border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;
      font-size:16px;cursor:pointer}
  @keyframes rvFade{from{opacity:0}to{opacity:1}}
  @keyframes rvUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

  /* Плитки переваг у героєві */
  .hb-tile{width:64px;height:64px;border-radius:20px;display:flex;align-items:center;justify-content:center;
      background:rgba(255,255,255,.07);border:1px solid rgba(196,181,253,.24);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 24px -14px rgba(0,0,0,.9);
      transition:transform .18s,border-color .18s,background .18s}
  .hb:hover .hb-tile{transform:translateY(-3px);border-color:rgba(244,114,182,.55);background:rgba(255,255,255,.11)}
  /* Аватарки «10 000 казок» */
  .ava{width:34px;height:34px;border-radius:50%;border:2px solid #2a1550;
      display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1}
  .cta-main{transition:transform .18s,box-shadow .18s}
  .cta-main:hover{transform:translateY(-2px);box-shadow:0 20px 44px -10px rgba(236,72,153,.95);color:#fff}
  @keyframes twinkle{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
  .mt-spin{width:26px;height:26px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:#ec4899;animation:spin .8s linear infinite}
  .mt-busy{background:linear-gradient(100deg,rgba(255,255,255,.05) 30%,rgba(236,72,153,.22) 50%,rgba(255,255,255,.05) 70%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
  #btn-gen-char:disabled{opacity:.45;cursor:not-allowed}
  @keyframes charIn{from{opacity:0;transform:translateX(-50%) translateY(14px) scale(.94)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
  .mt-char-in{animation:charIn .45s cubic-bezier(.2,.8,.3,1.1) both}

  /* ---- обкладинка: клік → великий перегляд ---- */
  #book-cover{cursor:zoom-in;transition:transform .18s ease,box-shadow .18s ease}
  #book-cover:hover{transform:translateY(-3px);box-shadow:0 28px 54px -16px rgba(0,0,0,.7)}
  #cover-zoom-hint{position:absolute;top:9px;right:9px;z-index:6;width:28px;height:28px;border-radius:9px;
      background:rgba(0,0,0,.5);backdrop-filter:blur(3px);color:#fff;font-size:13px;line-height:1;
      display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s;pointer-events:none}
  #book-cover:hover #cover-zoom-hint{opacity:1}

  #cover-modal{position:fixed;inset:0;z-index:900;display:none;align-items:center;justify-content:center;
      padding:24px;background:rgba(12,5,28,.82);backdrop-filter:blur(6px);cursor:zoom-out}
  #cover-modal.open{display:flex;animation:covFade .2s ease both}
  @keyframes covFade{from{opacity:0}to{opacity:1}}
  #cover-modal-stage{position:relative;cursor:default;animation:covPop .28s cubic-bezier(.2,.8,.3,1.05) both}
  @keyframes covPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
  #cover-modal-stage > *{transform-origin:top left}
  #cover-modal-close{position:fixed;top:18px;right:20px;z-index:2;width:40px;height:40px;border-radius:50%;
      border:none;background:rgba(255,255,255,.14);color:#fff;font-size:19px;line-height:1;cursor:pointer;
      display:flex;align-items:center;justify-content:center;transition:background .15s}
  #cover-modal-close:hover{background:rgba(255,255,255,.26)}
  #cover-modal-cap{position:fixed;left:0;right:0;bottom:16px;text-align:center;color:rgba(255,255,255,.5);
      font-size:11.5px;font-weight:700;pointer-events:none}
  /* Стрілки «попередня / наступна сторінка» — видимі лише для прикладів сторінок */
  .cov-nav{position:fixed;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;
      border:none;background:rgba(255,255,255,.14);color:#fff;font-size:20px;line-height:1;cursor:pointer;
      display:none;align-items:center;justify-content:center;transition:background .15s,transform .15s;
      -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  .cov-nav:hover{background:rgba(255,255,255,.28)}
  .cov-nav:active{transform:translateY(-50%) scale(.94)}
  #cover-modal.has-nav .cov-nav{display:flex}
  #cover-modal-prev{left:16px}
  #cover-modal-next{right:16px}
  #cover-modal-dots{position:fixed;left:0;right:0;bottom:40px;display:none;justify-content:center;gap:7px;z-index:2}
  #cover-modal.has-nav #cover-modal-dots{display:flex}
  #cover-modal-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28);transition:background .15s,transform .15s}
  #cover-modal-dots i.on{background:#fbbf24;transform:scale(1.25)}
  @media(max-width:640px){
    .cov-nav{width:40px;height:40px;font-size:17px}
    #cover-modal-prev{left:6px} #cover-modal-next{right:6px}
  }

  /* ---- сторінка книги: А4 портрет, текст поверх ілюстрації ----
     Стилі на КЛАСАХ, а не на id: у лайтбоксі показується клон, з якого
     id знімаються, і при id-селекторах він лишався б без оформлення.
     Розміри — у cqw, тож текст масштабується разом зі сторінкою. ---- */
  .bpage{position:relative;flex:1;min-width:0;aspect-ratio:210/297;
      border-radius:10px;overflow:hidden;background:#1e1147;container-type:inline-size;
      cursor:zoom-in;transition:transform .18s ease;
      box-shadow:0 14px 30px -12px rgba(0,0,0,.65)}
  .bpage:hover{transform:translateY(-3px)}
  .bpage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  /* Затемнення на весь кадр: текст лежить поверх усієї ілюстрації */
  .bpage-scrim{position:absolute;inset:0;
      background:linear-gradient(180deg,rgba(10,4,26,.5) 0%,rgba(10,4,26,.42) 35%,rgba(10,4,26,.72) 100%)}
  /* Зона тексту — вся сторінка. Кегль підбирається скриптом так, щоб текст
     заповнив її: короткий фрагмент буде великим, довгий — дрібнішим. */
  .bpage-text{position:absolute;inset:0;padding:7% 7% 11%;
      display:flex;align-items:center;overflow:hidden;
      color:#fff;line-height:1.4;text-align:left;text-shadow:0 1px 6px rgba(0,0,0,.9)}
  .bpage-text > span{display:block;width:100%}
  .bpage-num{position:absolute;left:0;right:0;bottom:2.8%;text-align:center;
      color:rgba(255,255,255,.6);font-size:2.6cqw;font-weight:700;letter-spacing:.08em;
      text-shadow:0 1px 5px rgba(0,0,0,.85)}
  /* режим «без тексту» — лишається чиста ілюстрація */
  .bpage.no-text .bpage-scrim,
  .bpage.no-text .bpage-text,
  .bpage.no-text .bpage-num{display:none}
  .bpage-busy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
      justify-content:center;gap:8px;background:rgba(20,8,45,.8);color:rgba(255,255,255,.8);
      font-size:10px;font-weight:700}

  /* ---- кастомний випадний список у стилі сайту ----
     Нативний <select> лишається в DOM (з ним працює решта коду),
     але сховано — бачимо і клікаємо цю обгортку. ---- */
  .mt-sel{position:relative;width:100%;font-family:inherit}
  .mt-sel select{display:none}

  .mt-sel-btn{width:100%;display:flex;align-items:center;gap:12px;
      padding:12px 16px;border-radius:12px;border:1px solid transparent;
      background:rgba(255,255,255,.1);color:#fff;font-family:inherit;font-size:14px;
      text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
  .mt-sel-btn:hover{background:rgba(255,255,255,.15)}
  .mt-sel.open .mt-sel-btn{background:rgba(255,255,255,.15);border-color:#ec4899}
  .mt-sel-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* стрілка: власний svg із нормальним відступом від краю */
  .mt-sel-arrow{flex-shrink:0;width:11px;height:11px;opacity:.65;transition:transform .2s,opacity .15s}
  .mt-sel-btn:hover .mt-sel-arrow{opacity:1}
  .mt-sel.open .mt-sel-arrow{transform:rotate(180deg);opacity:1}

  .mt-sel-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;
      background:#2c1a5c;border:1px solid rgba(255,255,255,.16);border-radius:12px;
      box-shadow:0 18px 40px -12px rgba(0,0,0,.7);padding:5px;
      max-height:264px;overflow-y:auto;display:none}
  .mt-sel.open .mt-sel-list{display:block;animation:selIn .16s ease both}
  @keyframes selIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
  .mt-sel-opt{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:9px;
      color:rgba(255,255,255,.82);font-size:13.5px;line-height:1.3;cursor:pointer;
      transition:background .12s,color .12s}
  .mt-sel-opt:hover,.mt-sel-opt.active{background:rgba(255,255,255,.09);color:#fff}
  .mt-sel-opt.sel{background:rgba(236,72,153,.2);color:#f9a8d4;font-weight:700}
  .mt-sel-opt.sel:hover,.mt-sel-opt.sel.active{background:rgba(236,72,153,.3)}
  .mt-sel-tick{flex-shrink:0;width:14px;font-size:12px;font-weight:800;opacity:0}
  .mt-sel-opt.sel .mt-sel-tick{opacity:1}
  .mt-sel-list::-webkit-scrollbar{width:8px}
  .mt-sel-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:8px}

  /* ---- image-slot (real drag&drop / click-to-upload placeholder) ---- */
  image-slot{position:relative;display:block;overflow:hidden;background:
      repeating-linear-gradient(45deg,rgba(255,255,255,.045),rgba(255,255,255,.045) 12px,rgba(255,255,255,.02) 12px,rgba(255,255,255,.02) 24px);
      border:2px dashed rgba(196,181,253,.30);cursor:pointer;transition:border-color .15s,background .15s}
  image-slot[shape="circle"]{border-radius:50%}
  image-slot[shape="pill"]{border-radius:999px}
  image-slot:hover{border-color:#a78bfa}
  image-slot.dragover{border-color:#ec4899;background:rgba(236,72,153,.16)}
  image-slot.filled{border-style:solid;border-color:transparent;background:none}
  image-slot .is-cap{position:absolute;inset:0;display:flex;flex-direction:column;
      align-items:center;justify-content:center;gap:6px;padding:10px;text-align:center;
      font-size:11.5px;font-weight:700;color:rgba(226,214,255,.55);line-height:1.35;pointer-events:none}
  image-slot .is-cap .is-ico{font-size:20px;opacity:.8}
  image-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
  image-slot.filled img{display:block}
  image-slot.filled .is-cap{display:none}
  image-slot .is-clear{position:absolute;top:7px;right:7px;width:28px;height:28px;border-radius:50%;
      border:2px solid rgba(255,255,255,.9);background:rgba(12,5,28,.72);color:#fff;font-size:13px;
      font-weight:700;line-height:1;cursor:pointer;padding:0;
      display:none;align-items:center;justify-content:center;z-index:4;
      box-shadow:0 2px 8px rgba(0,0,0,.45);transition:background .15s,transform .15s}
  image-slot .is-clear:hover{background:#e11d48;transform:scale(1.1)}
  image-slot.filled .is-clear{display:flex}

  /* ---- велике коло для фото ----
     Хрестик винесено ЗА межі image-slot: слот має overflow:hidden для круглої
     обрізки картинки, і кнопка всередині нього обрізалась по краю кола. ---- */
  .hero-wrap{position:relative;flex-shrink:0;line-height:0}
  /* top/right 3px → центр кнопки лягає рівно на межу кола, тобто вона
     наполовину заходить на фото і наполовину виступає назовні */
  .hero-wrap .hero-clear{position:absolute;top:3px;right:3px;z-index:6;width:30px;height:30px;
      border-radius:50%;border:2px solid #2a1550;background:#e11d48;color:#fff;font-size:13px;
      font-weight:800;line-height:1;padding:0;cursor:pointer;display:none;
      align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.5);
      transition:transform .15s,background .15s}
  .hero-wrap .hero-clear:hover{background:#f43f5e;transform:scale(1.12)}
  .hero-wrap.has-photo .hero-clear{display:flex}
  .hero-wrap.busy .hero-clear{display:none}
  image-slot.hero-slot .is-clear{display:none !important}   /* вбудований хрестик не використовуємо */

  /* ---- фото не підійшло (обличчя не розпізнано) ---- */
  .hero-wrap .hero-bad{position:absolute;left:3px;bottom:3px;z-index:6;width:30px;height:30px;
      border-radius:50%;border:2px solid #2a1550;background:#f59e0b;color:#3b1d00;font-size:15px;
      font-weight:800;line-height:1;display:none;align-items:center;justify-content:center;
      box-shadow:0 3px 10px rgba(0,0,0,.5);cursor:help}
  .hero-wrap.invalid .hero-bad{display:flex}
  .hero-wrap.invalid image-slot.hero-slot.filled{border-color:#f59e0b}
  .hero-wrap.invalid image-slot.hero-slot img{filter:grayscale(.65) brightness(.72)}
  .hero-wrap.busy .hero-bad{display:none}

  image-slot.hero-slot{width:124px;height:124px;flex-shrink:0;border:2px dashed rgba(255,255,255,.3);
      background:radial-gradient(circle at 50% 34%,rgba(255,255,255,.13),rgba(255,255,255,.05))}
  image-slot.hero-slot:hover{border-color:#ec4899;background:radial-gradient(circle at 50% 34%,rgba(236,72,153,.22),rgba(255,255,255,.07))}
  image-slot.hero-slot.dragover{border-color:#ec4899;background:rgba(236,72,153,.26)}
  image-slot.hero-slot.filled{border:2px solid rgba(236,72,153,.65);background:none}
  image-slot.hero-slot .is-cap{gap:3px;padding:8px;color:rgba(255,255,255,.72)}
  image-slot.hero-slot .is-cap .is-ico{font-size:26px;opacity:.9;margin-bottom:1px}
  image-slot.hero-slot .is-cap .is-lbl{font-size:11.5px;font-weight:800;color:#fff}
  image-slot.hero-slot .is-cap .is-sub{font-size:9.5px;font-weight:700;color:rgba(255,255,255,.45)}

  /* ---- індикатор аналізу фото (замість хрестика) ---- */
  image-slot .is-busy{position:absolute;inset:0;z-index:5;display:none;flex-direction:column;
      align-items:center;justify-content:center;gap:6px;background:rgba(10,4,26,.62);border-radius:inherit}
  image-slot.analyzing .is-busy{display:flex}
  image-slot.analyzing .is-clear{display:none}
  image-slot.analyzing{cursor:default}
  image-slot .is-ring{width:36px;height:36px;border-radius:50%;border:3px solid rgba(255,255,255,.2);
      border-top-color:#fbbf24;animation:isSpin .8s linear infinite}
  @keyframes isSpin{to{transform:rotate(360deg)}}
  image-slot .is-busy-t{font-size:10px;font-weight:800;color:#fbbf24;font-variant-numeric:tabular-nums}

  /* ================= КОНСТРУКТОР СЮЖЕТУ ================= */
  /* Мініатюра шаблона. Емодзі лежить у самій рамці, картинка (якщо
     вона є) накривається зверху — не завантажилася, лишається емодзі. */
  .tpl-thumb{position:relative;border-radius:11px;overflow:hidden;display:flex;align-items:center;
      justify-content:center;object-fit:cover}
  .tpl-thumb-ph{background:linear-gradient(135deg,rgba(236,72,153,.35),rgba(124,58,237,.45));
      font-size:22px;line-height:1;color:#fff}
  .tpl-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

  /* Шаблони в лівому сайдбарі — список після вибору сюжету */
  .tpl-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:13px;margin-bottom:7px;
      cursor:pointer;border:1.5px solid transparent;transition:background .15s,border-color .15s}
  .tpl-item:hover{background:rgba(255,255,255,.06)}
  .tpl-item.sel{background:rgba(124,58,237,.28);border-color:rgba(167,139,250,.6)}
  .tpl-item .tpl-txt{min-width:0}
  .tpl-item .tpl-name{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.72);line-height:1.25}
  .tpl-item .tpl-desc{font-size:11px;color:rgba(255,255,255,.45);line-height:1.35;margin-top:3px;
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tpl-item.sel .tpl-name{color:#fff}
  .tpl-item.sel .tpl-desc{color:rgba(255,255,255,.7)}
  .tpl-item.tpl-own{border-style:dashed;border-color:rgba(255,255,255,.22)}
  .tpl-item.tpl-own.sel{border-style:solid}

  /* ---------- Екран вибору сюжету (перший крок конструктора) ----------
     Пошук, чипи категорій і сітка плиток. Раніше цей екран стояв на
     кроці «Сюжет» і показувався, доки історію не оберуть; тепер це
     сам перший крок, тож він мусить читатися як вітрина, а не як
     проміжне вікно. */
  .tpl-search{position:relative;margin-bottom:14px}
  .tpl-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;
      color:rgba(255,255,255,.45);pointer-events:none}
  .tpl-search input{width:100%;padding:14px 16px 14px 46px;border-radius:14px;
      border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);color:#fff;
      font-family:inherit;font-size:14px;outline:none;transition:border-color .15s,background .15s}
  .tpl-search input::placeholder{color:rgba(255,255,255,.4)}
  .tpl-search input:focus{border-color:rgba(236,72,153,.6);background:rgba(255,255,255,.1)}
  /* Хрестик очищення в Chrome темний і на темному тлі невидимий */
  .tpl-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;
      width:14px;height:14px;cursor:pointer;
      background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'><path d='M6 6 18 18M18 6 6 18'/></svg>");
      opacity:.5}
  .tpl-search input::-webkit-search-cancel-button:hover{opacity:.9}

  /* Чипи категорій — один рядок із горизонтальним скролом.
     Раніше вони переносилися на другий рядок, і смуга то в один
     рядок, то в два: сітка сюжетів під нею стрибала щоразу, коли
     додавали категорію.

     Смугу прокрутки ховаємо — під чипами вона з'їдає висоту й
     виглядає як чужий елемент. Замість неї край підтікає градієнтом:
     класи fade-l / fade-r ставить renderTplCats(), коли є куди
     гортати. */
  .tpl-cats{display:flex;flex-wrap:nowrap;gap:8px;margin-bottom:18px;
      overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;
      scrollbar-width:none;-ms-overflow-style:none}
  .tpl-cats::-webkit-scrollbar{display:none}
  .tpl-cats.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 42px),transparent);
      mask-image:linear-gradient(90deg,#000 calc(100% - 42px),transparent)}
  .tpl-cats.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 42px);
      mask-image:linear-gradient(90deg,transparent,#000 42px)}
  .tpl-cats.fade-l.fade-r{
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 42px,#000 calc(100% - 42px),transparent);
      mask-image:linear-gradient(90deg,transparent,#000 42px,#000 calc(100% - 42px),transparent)}

  .tpl-cat{flex:0 0 auto;padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);color:rgba(255,255,255,.72);font-family:inherit;
      font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;
      transition:background .15s,border-color .15s,color .15s}
  .tpl-cat:hover{background:rgba(255,255,255,.11);color:#fff}
  .tpl-cat.on{background:linear-gradient(135deg,#ec4899,#a855f7);border-color:transparent;color:#fff}

  /* Сітка сюжетів прокручується всередині себе. Казок три десятки,
     і без цього крок перетворювався на нескінченну стрічку: кнопка
     «Далі» їхала за другий екран, і людина не бачила, що робити
     після вибору.

     Висоту рахує JS — рівно три ряди карток, скільки б їх не було
     в ряду (fitTplPicker у constructor.js). Тому тут лише сам
     скрол і повзунок: у темній темі системний майже не видно. */
  /* Рівно три в ряд, а не «скільки влізе»: колонка з сюжетами на
     цьому кроці найширша (renderPanels), і auto-fill ставив би туди
     чотири-п'ять дрібних плиток — картинку в них уже не роздивитися,
     а саме по картинці сюжет і вибирають. */
  .tpl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;
      scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.26) rgba(255,255,255,.07)}
  .tpl-grid.is-scroll{overflow-y:auto;padding-right:12px}
  .tpl-grid::-webkit-scrollbar{width:10px}
  .tpl-grid::-webkit-scrollbar-track{background:rgba(255,255,255,.07);border-radius:999px}
  .tpl-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.26);border-radius:999px;
      border:3px solid transparent;background-clip:content-box}
  .tpl-grid::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.42);background-clip:content-box}
  /* Плитка сюжету — це сама картинка, а назва лежить на ній.
     Раніше під картинкою була ще смуга з назвою та описом, і саме
     вона робила сітку заввишки у два екрани.

     Назву не можна просто покласти поверх фото: на світлій ділянці
     (небо, пісок) білий текст зникає. Тому знизу підмальовуємо
     градієнт від чорного — він темніє рівно під літерами й не
     чіпає верхню половину картинки. */
  .tpl-tile{position:relative;display:block;text-align:left;padding:0;cursor:pointer;
      overflow:hidden;border-radius:14px;border:2px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);font-family:inherit;
      transition:border-color .15s,transform .15s,box-shadow .15s}
  .tpl-tile:hover{border-color:#ec4899;transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.8)}
  /* display у рамці не чіпаємо: .tpl-thumb — це flex, який центрує
     емодзі-заглушку в сюжеті без картинки. */
  .tpl-tile .tpl-thumb{border-radius:0;width:100%}
  /* Назва набрана великою: сюжет вибирають по картинці, але саме
     назва каже, про що вона, — а дрібний рядок на строкатому фото
     просто не читався. Разом із кеглем густішає й градієнт: більші
     літери займають більше місця, і підкладка під ними має бути
     темнішою, щоб текст не губився на світлому небі чи піску. */
  .tpl-tile-name{position:absolute;left:0;right:0;bottom:0;z-index:1;
      padding:30px 12px 11px;color:#fff;font-family:'Baloo 2',sans-serif;
      font-weight:800;font-size:17px;line-height:1.24;text-shadow:0 2px 8px rgba(0,0,0,.85);
      background:linear-gradient(transparent,rgba(6,2,18,.62) 34%,rgba(6,2,18,.95))}
  /* Довгі назви трапляються. Обрізати їх трикрапкою — найгірше з
     можливого: сюжет вибирають саме за назвою. Тому кегль підбирає
     JS (fitTileNames у constructor.js): зменшує рядок, доки той не
     влізе, і лише на самій межі дозволяє третій рядок.

     Клемп тут лишається запобіжником для назви в сорок слів — і,
     головне, тим механізмом, за яким JS розуміє, що текст не влазить
     (scrollHeight > clientHeight).

     Обрізання живе на вкладеному span, а не на самій смузі: смуга
     позиційована absolute, а це перетворює display:-webkit-box на
     блок — і -webkit-line-clamp просто перестає діяти.

     overflow-wrap:anywhere — щоб одне довжелезне слово («Найкращий-
     подарунок-на-світі») не вилазило за плитку, а переносилось. */
  .tpl-tile-name > span{display:-webkit-box;-webkit-line-clamp:2;
      -webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
  .tpl-tile-own{border-style:dashed;border-color:rgba(255,255,255,.28);background:transparent}
  .tpl-tile-own .tpl-thumb-ph{background:rgba(255,255,255,.07)}

  /* Обраний сюжет: рожева рамка й галочка в кутку — той самий знак,
     що стояв на чипі жанру, тож звичка переноситься без пояснень. */
  .tpl-tile.sel{border-color:#ec4899;box-shadow:0 0 0 3px rgba(236,72,153,.28)}
  .tpl-tile-check{position:absolute;top:7px;right:7px;z-index:2;width:22px;height:22px;border-radius:50%;
      background:#ec4899;color:#fff;display:none;align-items:center;justify-content:center;
      font-size:12px;font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.4)}
  .tpl-tile.sel .tpl-tile-check{display:flex}

  .tpl-picker-empty{padding:34px 20px;text-align:center;border-radius:16px;
      background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
      color:rgba(255,255,255,.6);font-size:13.5px;line-height:1.6}

  @media(max-width:900px){
    .tpl-grid{gap:9px}
  }

  /* Обкладинка сюжету під шапкою кроку й дугою */
  #plot-hero{position:relative;border-radius:20px;padding:18px 20px 4px;margin-bottom:22px;
      background-color:rgba(255,255,255,.04);background-size:cover;background-position:center 40%;
      border:1px solid rgba(255,255,255,.08);transition:background-image .25s}
  #plot-hero.has-cover{border-color:rgba(255,255,255,.16);
      box-shadow:inset 0 0 60px -20px rgba(0,0,0,.9)}
  #plot-hero .arc-box{margin-bottom:8px}

  /* Дуга сюжету */
  .arc-box{position:relative;padding:14px 10px 6px;margin-bottom:22px;overflow-x:auto;overflow-y:hidden;
      scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
  .arc-box.anim{overflow-x:hidden}   /* поки їдуть вузли — щоб не блимав скролбар */
  .arc-box::-webkit-scrollbar{height:7px}
  .arc-box::-webkit-scrollbar-track{background:transparent}
  .arc-box::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}
  .arc-box::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}
  /* svg живе всередині .arc-row — тобто в системі координат саме вмісту, а не видимої частини */
  .arc-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  /* Вузли діляться шириною порівну і стискаються (flex-shrink:1), тож
     дуга намагається вміститись без горизонтального скролу. Скрол
     лишається запобіжником, коли подій дуже багато. */
  .arc-row{position:relative;display:flex;align-items:flex-start;gap:4px}
  .arc-node{position:relative;flex:1 1 0;min-width:62px;display:flex;flex-direction:column;align-items:center;text-align:center;
      cursor:pointer;transition:transform .15s}
  .arc-node:hover{transform:translateY(-2px)}
  .arc-dot{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
      font-size:18px;line-height:1;background:rgba(20,10,45,.9);border:2px solid currentColor;
      box-shadow:0 6px 16px -6px rgba(0,0,0,.7),0 0 13px -3px currentColor;
      transition:box-shadow .2s,transform .15s,border-color .2s,color .2s,background .2s}
  .arc-node.active .arc-dot{box-shadow:0 0 0 4px rgba(236,72,153,.28),0 8px 20px -6px rgba(0,0,0,.8);transform:scale(1.06)}
  .arc-node .arc-name{margin-top:8px;font-size:12px;font-weight:800;color:#fff;line-height:1.2;
      max-width:100%;overflow-wrap:anywhere}
  .arc-node .arc-hint{margin-top:3px;font-size:10.5px;color:rgba(255,255,255,.45);line-height:1.3;
      max-width:100%;overflow-wrap:anywhere}

  #preview-col{min-width:0}

  /* Сітка жанрів стояла тут із max-width:430px, щоб картинки чипів
     не розтягувалися. Вибір жанру перетворився на смугу чипів-фільтра
     над сіткою сюжетів (.tpl-cats) — ширину їй обмежувати нема чого. */

  /* ---------- крок «Книга»: зведення ---------- */
  .bs-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);border-radius:16px;
      padding:15px 17px;margin-bottom:12px}
  .bs-head{display:flex;align-items:center;gap:9px;margin-bottom:11px}
  .bs-head .t{color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;gap:7px}
  .bs-edit{margin-left:auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
      color:rgba(233,224,255,.8);font-family:inherit;font-weight:700;font-size:11px;padding:5px 11px;
      border-radius:999px;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
  .bs-edit:hover{background:rgba(255,255,255,.16);color:#fff}
  .bs-row{display:flex;align-items:baseline;gap:9px;font-size:12.5px;padding:4px 0}
  .bs-row .k{color:rgba(233,224,255,.45);font-weight:600;white-space:nowrap;min-width:82px}
  .bs-row .v{color:#fff;font-weight:700;overflow-wrap:anywhere}
  .bs-empty{font-size:12px;color:rgba(233,224,255,.42);font-weight:600;line-height:1.5}
  .bs-hero{display:flex;gap:15px;align-items:flex-start}
  .bs-hero img{width:78px;height:104px;object-fit:contain;flex:0 0 auto;border-radius:11px;
      background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.12)}
  .bs-beats{margin:0;padding-left:19px;display:grid;gap:6px;font-size:12.5px;line-height:1.5;
      color:rgba(233,224,255,.8)}
  .bs-beats b{color:#fff;font-weight:800}

  /* ---------- крок «Оформлення» ---------- */
  .co-step{color:#fff;font-weight:800;font-size:14px;margin:0 0 12px}
  .co-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:24px}
  .co-grid-2{grid-template-columns:repeat(2,1fr)}
  .co-card{position:relative;border-radius:16px;padding:16px 14px;cursor:pointer;text-align:center;
      background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.10);
      transition:border-color .16s,background .16s,transform .16s}
  .co-card:hover{border-color:rgba(196,181,253,.5);background:rgba(255,255,255,.08);transform:translateY(-2px)}
  .co-card.on{border-color:#a78bfa;background:rgba(124,58,237,.22);box-shadow:0 0 0 3px rgba(167,139,250,.18)}
  .co-card .ic{font-size:30px;line-height:1;margin-bottom:9px}
  /* Малюнок книги замість емодзі. Усі три файли однакового розміру, а
     книжка в них притиснута до низу й намальована в одному масштабі —
     тому висоту досить задати один раз, і товста книга справді виглядає
     товщою за тонку, а стоять вони на одній лінії. */
  .co-card .co-pic{display:block;height:82px;width:auto;max-width:100%;margin:0 auto -6px;
      object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5));
      transition:transform .18s}
  .co-card:hover .co-pic{transform:translateY(-2px) scale(1.04)}
  .co-card.on .co-pic{transform:scale(1.06)}
  .co-card .nm{color:#fff;font-weight:800;font-size:14.5px;line-height:1.2}
  .co-card .sb{color:rgba(255,255,255,.5);font-size:11px;margin-top:3px;line-height:1.35}
  .co-card .pr{color:#f472b6;font-weight:800;font-size:15px;margin-top:10px}
  .co-card .tick{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;
      background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;display:none;
      align-items:center;justify-content:center;font-size:12px;font-weight:800}
  .co-card.on .tick{display:flex}
  .co-card .badge{position:absolute;top:-9px;left:50%;transform:translateX(-50%);white-space:nowrap;
      background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;font-size:10px;font-weight:800;
      padding:3px 10px;border-radius:999px;box-shadow:0 6px 14px -6px rgba(236,72,153,.9)}

  /* ---------- дані доставки ---------- */
  .ship-box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:18px;
      padding:18px;margin-bottom:24px;display:grid;gap:14px}
  .ship-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .ship-f{display:block;position:relative}
  .ship-f > span{display:block;color:rgba(255,255,255,.8);font-size:12.5px;font-weight:700;margin-bottom:7px}
  .ship-f > span i{color:#f472b6;font-style:normal}
  .ship-f input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.08);color:#fff;font-family:inherit;font-size:14px;transition:border-color .15s}
  .ship-f input::placeholder{color:rgba(255,255,255,.35)}
  .ship-f input:focus{outline:none;border-color:#a78bfa;background:rgba(255,255,255,.11)}
  .ship-f input:disabled{opacity:.5;cursor:not-allowed}
  .ship-f input.bad{border-color:rgba(248,113,113,.7)}
  .ship-f input.ok{border-color:rgba(52,211,153,.55)}

  /* Комбобокси мають хрестик у правому краї — лишаємо під нього місце,
     інакше довга назва відділення заповзає під кнопку. */
  .ship-combo input{padding-right:44px;text-overflow:ellipsis}

  .ship-clear{position:absolute;right:9px;bottom:9px;width:26px;height:26px;border-radius:50%;border:none;
      background:rgba(255,255,255,.12);color:rgba(255,255,255,.7);font-size:12px;cursor:pointer;display:none;
      align-items:center;justify-content:center;font-family:inherit}
  .ship-clear:hover{background:rgba(255,255,255,.22);color:#fff}
  .ship-combo.filled .ship-clear{display:flex}

  .ship-list{position:absolute;left:0;right:0;top:100%;margin-top:6px;z-index:40;display:none;
      max-height:262px;overflow:auto;border-radius:14px;border:1px solid rgba(196,181,253,.3);
      background:#241046;box-shadow:0 22px 48px -18px rgba(0,0,0,.9);overscroll-behavior:contain}
  .ship-list.open{display:block}
  .ship-list .it{padding:10px 14px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.06);line-height:1.35}
  .ship-list .it:last-child{border-bottom:0}
  .ship-list .it:hover,.ship-list .it.cur{background:rgba(139,92,246,.28)}
  .ship-list .it .n{color:#fff;font-weight:700;font-size:13.5px}
  .ship-list .it .s{color:rgba(233,224,255,.5);font-size:11.5px;margin-top:2px}
  .ship-list .msg{padding:13px 14px;color:rgba(233,224,255,.5);font-size:12.5px;font-weight:600;text-align:center}

  .ship-warn{font-size:12.5px;line-height:1.55;font-weight:600;padding:10px 13px;border-radius:12px;
      background:rgba(251,191,36,.14);border:1px solid rgba(251,191,36,.36);color:#fde68a}

  @media(max-width:640px){ .ship-grid{grid-template-columns:1fr} }

  .co-sum{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:20px}
  .co-sum-h{color:#fff;font-weight:800;font-size:15px;margin-bottom:14px}
  .co-row{display:flex;align-items:baseline;gap:8px;font-size:13px;padding:5px 0}
  .co-row .k{color:rgba(233,224,255,.55);font-weight:600;white-space:nowrap}
  .co-row .dots{flex:1;border-bottom:1px dotted rgba(255,255,255,.18);min-width:12px;transform:translateY(-3px)}
  .co-row .v{color:#fff;font-weight:800;text-align:right}
  .co-row.accent .v{color:#c4b5fd}
  .co-total{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
      margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
  .co-total-k{color:#c4b5fd;font-weight:800;font-size:14px}
  .co-total-v{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:34px;line-height:1.1;color:#ec4899}
  .co-total-v small{font-size:16px;color:rgba(255,255,255,.75);margin-left:4px}
  .co-buy{flex:1;min-width:210px;background:linear-gradient(135deg,#ec4899,#8b5cf6);color:#fff;border:none;
      padding:16px 26px;border-radius:999px;font-weight:800;font-size:15px;cursor:pointer;font-family:inherit;
      box-shadow:0 14px 32px -12px rgba(236,72,153,.95);transition:transform .16s,box-shadow .16s}
  .co-buy:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 20px 40px -12px rgba(236,72,153,1)}
  .co-buy:disabled{opacity:.5;cursor:not-allowed;transform:none}
  .co-note{margin-top:11px;text-align:center;font-size:11.5px;color:rgba(233,224,255,.5);font-weight:600}

  /* ---------- згода з договором ----------
     Блок навмисно не сірий і не дрібний: галку, яку не помітили,
     згодою вважати не можна. Коли її пропустили — .miss підсвічує
     рамку, а не ховає кнопку: людина має бачити, чого від неї
     хочуть, а не гадати, чому нічого не відбувається. */
  .co-consent{margin-top:16px;padding-top:15px;border-top:1px solid rgba(255,255,255,.12);
      display:flex;flex-direction:column;gap:10px}
  .co-agree{display:flex;align-items:flex-start;gap:11px;cursor:pointer;user-select:none;
      font-size:12.5px;line-height:1.55;font-weight:600;color:rgba(233,224,255,.8);
      padding:10px 13px;border-radius:13px;border:1px solid transparent;transition:border-color .18s,background .18s}
  .co-agree input{width:17px;height:17px;flex-shrink:0;margin-top:1px;accent-color:#ec4899;cursor:pointer}
  .co-agree a{color:#c4b5fd;font-weight:800;text-decoration:underline}
  .co-agree a:hover{color:#f0abfc}
  .co-agree.miss{border-color:rgba(239,68,68,.55);background:rgba(239,68,68,.12);color:#fecaca}
  .co-agree-2{color:rgba(233,224,255,.55);font-weight:600}
  .co-consent.locked{opacity:.6;pointer-events:none}
  @media(max-width:900px){
    .co-grid{grid-template-columns:repeat(2,1fr)}
    .co-grid-2{grid-template-columns:1fr}
    .co-total-v{font-size:28px}
  }

  /* Тісно: спершу ховаємо підказки, потім зменшуємо кружечки й підписи.
     Клас ставить renderArc/fitArc за реальною шириною контейнера. */
  .arc-row.tight .arc-hint{display:none}
  .arc-row.tight .arc-name{font-size:11px}
  .arc-row.tiny .arc-dot{width:34px;height:34px;font-size:15px}
  .arc-row.tiny .arc-name{font-size:10px;margin-top:6px}
  .arc-row.tiny{gap:2px}
  /* порожня подія: іконка лишається на повну яскравість, приглушене тільки кільце */
  .arc-node.empty .arc-dot{border-style:dashed;border-color:rgba(255,255,255,.3);
      background:#3d2273;box-shadow:0 6px 16px -6px rgba(0,0,0,.7)}
  .arc-node.empty:hover .arc-dot{border-color:rgba(255,255,255,.55)}
  .arc-node.empty .arc-name{color:rgba(255,255,255,.8)}

  /* Картки подій */
  .beat-card{display:flex;align-items:stretch;gap:14px;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.08);
      border-radius:16px;padding:14px 14px;margin-bottom:10px;transition:border-color .15s,background .15s,opacity .15s}
  .beat-card:hover{background:rgba(255,255,255,.07)}
  .beat-card.focused{border-color:rgba(236,72,153,.5)}
  .beat-card.dragging{position:relative;z-index:30;border-color:#ec4899;background:rgba(58,26,84,.98);
      box-shadow:0 18px 40px -12px rgba(0,0,0,.85);cursor:grabbing;transition:none}
  .beat-card.dragging .beat-grip{cursor:grabbing;background:rgba(255,255,255,.14);color:#fff}
  .beat-num{width:34px;height:34px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
      font-weight:800;font-size:14px;color:#fff;background:rgba(255,255,255,.12)}
  .beat-card.focused .beat-num{background:linear-gradient(135deg,#ec4899,#7c3aed)}
  /* Назва + підказка, а під ними поле вводу — колонкою на всю ширину */
  .beat-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
  /* Назва й підказка — в один рядок через крапку-роздільник */
  .beat-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:7px;min-width:0}
  .beat-label{font-weight:800;font-size:13.5px;color:#fff;line-height:1.25;background:none;border:none;padding:0;
      font-family:inherit;width:auto;max-width:100%;min-width:40px;field-sizing:content;outline:none}
  .beat-label:focus{color:#fbbf24}
  .beat-sub{font-size:11px;color:rgba(255,255,255,.45);line-height:1.35;min-width:0}
  .beat-sub::before{content:'·';margin-right:7px;color:rgba(255,255,255,.28)}
  .beat-sub:empty{display:none}
  .beat-field{position:relative;min-width:0}
  /* min-height під три-чотири речення: шаблонні акти тепер описують
     сцену, а не натякають на неї, і в поле на 62px вони не влазили. */
  .beat-field textarea{width:100%;min-height:112px;resize:vertical;padding:11px 13px 20px;border-radius:12px;border:1.5px solid rgba(255,255,255,.1);
      background:rgba(12,5,30,.45);color:#fff;font-family:inherit;font-size:13px;line-height:1.5;outline:none;transition:border-color .15s}
  .beat-field textarea:focus{border-color:rgba(236,72,153,.55);background:rgba(12,5,30,.65)}
  .beat-field .beat-count{position:absolute;right:11px;bottom:8px;font-size:10.5px;color:rgba(255,255,255,.35);pointer-events:none}
  .beat-side{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;flex-shrink:0}
  .beat-grip{width:26px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
      color:rgba(255,255,255,.35);font-size:14px;cursor:grab;user-select:none;touch-action:none;transition:background .15s,color .15s}
  .beat-grip:hover{background:rgba(255,255,255,.1);color:#fff}
  .beat-grip:active{cursor:grabbing}
  .beat-del{width:26px;height:26px;border-radius:8px;border:none;background:transparent;color:rgba(255,255,255,.3);
      font-size:13px;cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
  .beat-del:hover{background:rgba(244,63,94,.2);color:#fda4af}

  .plot-btn{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);color:#fff;border:none;
      padding:10px 16px;border-radius:11px;font-family:inherit;font-weight:700;font-size:12.5px;cursor:pointer;
      transition:background .15s;white-space:nowrap}
  .plot-btn:hover{background:rgba(255,255,255,.18)}
  .plot-add{width:100%;padding:15px;border-radius:16px;border:1.5px dashed rgba(255,255,255,.22);background:transparent;
      color:rgba(255,255,255,.6);font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
  .plot-add:hover{border-color:rgba(236,72,153,.6);color:#fff;background:rgba(236,72,153,.08)}
  .plot-add:disabled,
  .plot-add:disabled:hover{border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.5);background:transparent}

  @media (max-width:760px){
    .beat-card{gap:10px}
  }

  /* ------------------------------------------------------------
     Блок «Погортайте готову казку»
     ------------------------------------------------------------
     Наведення тут зайве: картка не клікабельна цілком, клікає
     тільки кнопка всередині, — а .lp-card за замовчуванням
     піднімається під курсором і обіцяє те, чого не робить. */
  .fd-grid:hover{transform:none;border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.055)}

  @media (max-width:960px){
    .hero-grid,.gallery-grid,.pricing-grid,.footer-grid{grid-template-columns:1fr !important}
    /* Книга йде над текстом, роздільник із бічного стає верхнім */
    .fd-grid{grid-template-columns:1fr !important}
    .fd-txt{border-left:none !important;border-top:1px solid rgba(255,255,255,.08);align-items:center !important;text-align:center}
    .fd-txt .lp-sub{max-width:520px}
    .fd-art{max-width:620px;margin:0 auto}
    .constructor-shell{grid-template-columns:minmax(0,1fr) !important}
    .constructor-panels{grid-template-columns:minmax(0,1fr) !important}
    .gallery-grid{grid-template-columns:1fr 1fr !important}
    .how-row{flex-direction:column}
    .how-row .how-arrow{transform:rotate(90deg);align-self:center !important}
    /* на вузькому екрані ілюстрація не виходить за колонку */
    .hero-art img{width:112% !important;margin:0 -6% !important}
  }
  @media (max-width:560px){
    .gallery-grid,.pricing-grid,.footer-grid{grid-template-columns:1fr !important}
    .hero-benefits{grid-template-columns:1fr 1fr !important}
    /* Два відгуки поруч на телефоні дають по три слова в рядку —
       ставимо їх один під одним. Фото при цьому може бути вищим:
       на всю ширину екрана 16:9 виглядає смужкою. */
    .rv-wrap{grid-template-columns:1fr;gap:12px}
    .rv-pic{aspect-ratio:4/3}
    .rv-text{font-size:13.5px}
  }

  /* ============================================================
     КРОК «ГЕРОЙ»
     ------------------------------------------------------------
     Фото і пояснення до нього стоять в один рядок, а три поля про
     самого героя (ім'я, вік, стать) зібрані в окрему картку — щоб
     крок читався як два блоки, а не як довгий стовпчик полів.
     ============================================================ */
  /* Заголовок кроку й кнопка очищення в одному рядку: кнопка
     притиснута до правого краю, тож заголовок лишається першим, що
     читають, а вихід «прибрати все» — там, де його шукають. */
  .hero-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
  .hero-head-t{color:#fff;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:18px}
  /* Тьмяна, поки її не шукають: це не дія, до якої ведуть, а
     запобіжник. Червоніє лише під курсором — щоб було видно, що
     натискання щось витирає. */
  .step-clear{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
      padding:7px 13px;border-radius:999px;cursor:pointer;font-family:inherit;
      font-size:12px;font-weight:800;white-space:nowrap;
      color:rgba(233,224,255,.6);background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.14);
      transition:color .15s,border-color .15s,background .15s}
  .step-clear:hover{color:#fecaca;border-color:rgba(248,113,113,.5);background:rgba(220,38,38,.16)}

  .hero-photo-row{display:flex;align-items:flex-start;gap:18px;margin-bottom:22px}
  .hero-photo-txt{flex:1;min-width:0;padding-top:2px}
  .hero-photo-txt .hp-title{color:#efeaff;font-family:'Baloo 2',sans-serif;
      font-weight:700;font-size:15px;margin-bottom:6px}
  .hero-photo-txt .hp-desc{font-size:12px;color:rgba(226,214,255,.7);line-height:1.5;margin-bottom:10px}
  .hero-photo-txt .hp-hint{font-size:11.5px;color:rgba(226,214,255,.42);line-height:1.6}

  /* ---- картка з полями ---- */
  /* Картка «Основна інформація» з кроку «Герой». Сам блок розібрано
     на картки-питання (.q-card наприкінці файлу), але класи лишаємо:
     на них тримаються підписи полів (.mt-flabel, .mt-fhint) і поле з
     іконкою (.mt-field), які нікуди не поділися. */
  .mt-card{border-radius:20px;padding:20px 18px;margin-bottom:22px;
      border:1px solid rgba(167,139,250,.26);
      background:linear-gradient(165deg,rgba(124,58,237,.18),rgba(255,255,255,.03))}
  .mt-card-head{display:flex;align-items:center;gap:11px;color:#fff;
      font-family:'Baloo 2',sans-serif;font-weight:700;font-size:16px;margin-bottom:18px}
  .mt-card-ico{flex-shrink:0;width:32px;height:32px;border-radius:10px;
      background:rgba(167,139,250,.24);color:#ddd6fe;
      display:flex;align-items:center;justify-content:center}
  .mt-card-ico svg{width:17px;height:17px}

  .mt-flabel{display:block;color:#c4b5fd;font-size:12.5px;font-weight:800;margin-bottom:8px}
  .mt-fhint{font-size:11px;color:rgba(226,214,255,.42);line-height:1.45;margin:7px 0 18px}
  .mt-card .mt-fhint:last-of-type{margin-bottom:18px}

  /* поле вводу з іконкою: іконка — плитка в лівому краю */
  .mt-field{position:relative}
  .mt-field .mt-field-ico{position:absolute;left:9px;top:50%;transform:translateY(-50%);
      width:28px;height:28px;border-radius:8px;background:rgba(167,139,250,.22);
      color:#ddd6fe;display:flex;align-items:center;justify-content:center;pointer-events:none}
  .mt-field .mt-field-ico svg{width:15px;height:15px}
  .mt-field input{transition:border-color .18s,box-shadow .18s,background .18s}
  .mt-field input:focus{outline:none;border-color:rgba(236,72,153,.65);background:rgba(255,255,255,.12)}

  /* поле заповнене — зелена обводка замість білого фону */
  .mt-field input:not(:placeholder-shown){
      border-color:rgba(52,211,153,.75);
      box-shadow:0 0 0 2px rgba(52,211,153,.16)}
  .mt-field input:not(:placeholder-shown):focus{
      border-color:rgba(52,211,153,.9);
      box-shadow:0 0 0 3px rgba(52,211,153,.22)}

  /* прибираємо білий фон автозаповнення Chrome */
  .mt-field input:-webkit-autofill,
  .mt-field input:-webkit-autofill:hover,
  .mt-field input:-webkit-autofill:focus,
  .mt-field input:-webkit-autofill:active{
      -webkit-text-fill-color:#fff !important;
      caret-color:#fff;
      -webkit-box-shadow:0 0 0 1000px rgba(60,30,110,.95) inset,
                         0 0 0 2px rgba(52,211,153,.16) !important;
      box-shadow:0 0 0 1000px rgba(60,30,110,.95) inset,
                 0 0 0 2px rgba(52,211,153,.16) !important;
      border-color:rgba(52,211,153,.75) !important;
      transition:background-color 9999s ease-in-out 0s}

  /* та сама плитка всередині кастомного списку */
  .mt-sel-btn{gap:10px}
  .mt-sel-ico{flex-shrink:0;width:28px;height:28px;margin:-4px 0 -4px -6px;border-radius:8px;
      background:rgba(167,139,250,.22);color:#ddd6fe;
      display:flex;align-items:center;justify-content:center}
  .mt-sel-ico svg{width:15px;height:15px}

  /* ---- стать ---- */
  .mt-gender{display:flex;gap:12px}
  .mt-gender-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
      padding:14px 10px;border-radius:14px;cursor:pointer;color:#fff;font-weight:700;font-size:13.5px;
      border:1.5px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
      transition:background .18s,border-color .18s,box-shadow .18s,transform .12s}
  .mt-gender-btn:hover{border-color:rgba(167,139,250,.55);background:rgba(167,139,250,.14)}
  .mt-gender-btn:active{transform:scale(.985)}
  .mt-gender-btn.on{border-color:#a855f7;
      background:linear-gradient(135deg,rgba(168,85,247,.55),rgba(124,58,237,.32));
      box-shadow:0 0 0 3px rgba(168,85,247,.16),0 10px 24px -10px rgba(168,85,247,.85)}

  @media (max-width:560px){
    .hero-photo-row{flex-direction:column;align-items:center;text-align:center;gap:14px}
    .hero-photo-txt{padding-top:0}
  }

  /* ============================================================
     ТЕЛЕФОН
     ------------------------------------------------------------
     Розмітка сторінок написана інлайн-стилями, тож майже все тут
     іде через !important — інакше правило програє атрибуту style.
     Це свідомо: переписувати всю розмітку на класи заради адаптиву
     дорожче, ніж тримати мобільні винятки в одному місці.

     Межа 760px, а не 640: планшет у портреті теж не тягне дві
     колонки конструктора. Нижче йде ще один блок на 430px —
     там уже сам телефон, з іншими кеглями.
     ============================================================ */
  @media (max-width:760px){

    /* ---- шапка ----
       Порядок міняємо: логотип і кнопки в один рядок, меню під ними
       окремою смугою. Меню гортається вбік, а не переносить пункти
       на три рядки, як було. */
    .lp-header{padding:14px 16px !important;column-gap:12px !important;row-gap:10px !important}
    .lp-logo{order:1;font-size:18px !important}
    .lp-actions{order:2;gap:8px !important}
    .lp-actions a{padding:10px 14px !important;font-size:13px !important}
    /* Кнопку «Створити казку» в шапці ховаємо: на телефоні вона не
       влазить поряд із профілем і налазить на нього, а та сама дія
       є великою кнопкою на першому екрані й пунктом «Конструктор».
       Клас, а не «останнє посилання в шапці»: у редакторі останнім
       стоїть «До кабінету», і його ховати не можна. */
    .lp-cta{display:none !important}
    .lp-nav{order:3;width:100%;flex-wrap:nowrap !important;overflow-x:auto;gap:16px !important;
        padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
    .lp-nav::-webkit-scrollbar{display:none}
    /* Профіль у шапці: на телефоні лишаємо саму плитку з ім'ям —
       вона ж і посилання на кабінет. «Мій кабінет», «Адмінка» та
       «Вийти» ховаємо: разом вони йшли на 640px завширшки і просто
       їхали за край екрана, де їх ніхто не бачив. */
    [data-auth-slot]{min-width:0}
    .auth-box{gap:8px !important;min-width:0}
    .auth-link{display:none !important}
    .auth-chip{max-width:52vw;overflow:hidden}
    .auth-chip span{max-width:34vw !important}

    /* ---- перший екран ----
       Ілюстрація йде першою: на телефоні саме вона пояснює, що це
       за сайт, швидше за будь-який заголовок. */
    .hero-grid{gap:22px !important;padding-top:18px !important;padding-bottom:34px !important}
    .hero-art{order:-1}
    /* Хмарка «AI створює казку…» на телефоні лягає просто на
       обличчя дітей — на вузькому екрані їй нема куди відсунутись. */
    .hero-art > div:last-child{display:none !important}
    .hero-grid > div[style*="position:absolute"]{display:none}   /* зірочки з фіксованими left */
    .hero-benefits{gap:8px !important}
    .hb{max-width:none !important;flex:1 1 40%}

    /* ---- «як це працює» ----
       Стрілки між картками прибираємо: у стовпчик вони показують
       убік і збивають з пантелику. */
    .how-row{gap:10px !important;padding-bottom:16px !important}
    .how-row .how-arrow{display:none !important}
    .how-card{padding:15px 14px !important;gap:11px !important}
    .how-card img{width:44px !important;height:44px !important}
    .how-sum{padding-bottom:44px !important}
    .how-sum p{font-size:13px !important}

    /* ---- решта секцій ---- */
    .gallery-grid{gap:12px !important}
    .pricing-grid{gap:14px !important}
    .pricing-grid > div{padding:22px 18px !important}
    .footer-grid{gap:18px !important}

    /* ---- конструктор ----
       Три колонки в одну вже зводить блок на 960px. Тут головне —
       відступи: 34/30px по краях з'їдали чверть екрана. */
    #constructor{padding:0 10px !important;margin-bottom:44px !important}
    .constructor-shell{border-radius:22px !important}
    .constructor-shell > div:first-child{border-radius:22px !important}
    .c-side{padding:18px 14px !important;border-right:0 !important;
        border-bottom:1px solid rgba(255,255,255,.08)}
    .c-side > div:first-child{font-size:16px !important;margin-bottom:14px !important}
    #form-col{padding:20px 14px !important;border-right:0 !important}
    #preview-col{padding:20px 14px !important}

    /* Кроки — горизонтальна смуга кружечків замість списку на пів
       екрана. Підписи ховаємо в усіх, крім поточного: інакше смуга
       не влазить, а знати назву треба лише того кроку, де стоїш. */
    #steps-nav{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;
        scrollbar-width:none;-webkit-overflow-scrolling:touch}
    #steps-nav::-webkit-scrollbar{display:none}
    .step-row{margin-bottom:0 !important;padding:8px 10px !important;gap:8px !important;
        flex-shrink:0;border-radius:999px !important;
        background:rgba(255,255,255,.06) !important}
    .step-row.on{background:rgba(255,255,255,.14) !important}
    .step-row .step-dot{width:26px !important;height:26px !important;font-size:12.5px !important}
    .step-row .step-sub{display:none}
    .step-row .step-lbl{font-size:12.5px !important;white-space:nowrap}
    .step-row:not(.on) .step-txt{display:none}
    /* У закритих кроків підпис прихований, і три однакові замочки
       вже нічого не означають. Тому на телефоні в кружечку стоїть
       номер кроку, а замок лишається тільки на десктопі, де поруч
       є назва. */
    #steps-nav{counter-reset:mtstep}
    .step-row{counter-increment:mtstep}
    .step-row.off .step-dot{font-size:0 !important}
    .step-row.off .step-dot::before{content:counter(mtstep);font-size:12.5px}

    /* Шаблони сюжету в боковій колонці на телефоні лише подовжують
       дорогу до форми — той самий вибір є на самому кроці. */
    #plot-side{display:none !important}

    /* Кнопки майстра — на всю ширину і під палець. */
    .step-nav{gap:8px !important;margin-top:20px !important}
    .step-nav button{padding:15px 16px !important;font-size:14.5px !important;min-height:50px}

    /* Прев'ю книги під формою: обкладинку лишаємо великою, бо це
       єдине місце, де видно результат. */
    #book-cover{width:180px !important}
    #page-samples{grid-template-columns:repeat(3,1fr) !important}

    /* ---- поля й кнопки під палець ----
       16px у полях — не про красу: Safari масштабує сторінку, якщо
       кегль поля менший, і після кожного тапу екран «стрибає». */
    #form-col input,#form-col textarea,#form-col select,
    #form-col .mt-sel-btn{font-size:16px !important}
    #form-col input,#form-col .mt-sel-btn{min-height:48px}
    .mt-gender-btn{min-height:52px}
    .tpl-tile{min-height:44px}
    .tpl-cat{min-height:40px}
    /* Довга назва сюжету не має вилазити за плитку: плитка з
       overflow:hidden просто обрізала б їй хвіст. */
    .tpl-tile-name > span{overflow-wrap:anywhere;hyphens:auto}
    /* На телефоні плитка вдвічі вужча, і той самий кегль лишав би
       в рядку три слова — назва обривалася б трикрапкою частіше,
       ніж читалася. Трохи меншає, але лишається помітно більшою за
       попередні 13 px. */
    .tpl-tile-name{font-size:15.5px;padding:26px 10px 10px}
  }

  /* ---- власне телефон ---- */
  @media (max-width:430px){
    .lp-actions a{padding:9px 12px !important;font-size:12.5px !important}
    .gallery-grid{grid-template-columns:1fr 1fr !important}
    .footer-grid{grid-template-columns:1fr 1fr !important}
    .tpl-grid{grid-template-columns:repeat(2,1fr) !important}
    #page-samples{grid-template-columns:repeat(2,1fr) !important}
    .hero-photo-row{gap:12px}
  }

  /* ── Підсвічування незаповненого поля ───────────────────────
     Ставиться з JS (flashMissing) при спробі перейти далі з
     порожнім обов'язковим полем. !important — бо поля мають
     інлайнові рамки в розмітці конструктора. */
  .mt-miss{
    border:1.5px solid #f87171 !important;
    box-shadow:0 0 0 3px rgba(248,113,113,.18) !important;
    animation:mtMiss .38s ease;
  }
  @keyframes mtMiss{
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-5px)}
    45%{transform:translateX(5px)}
    70%{transform:translateX(-3px)}
  }

/* ── Вікно «зареєструйтесь, щоб продовжити» ─────────────────
   Гість збирає книгу без реєстрації, і рівно один раз — коли
   безкоштовні малювання героя скінчились — ми просимо його
   увійти. Вікно, а не перехід на /login.html: вхід іде через
   popup і зберігає uid, тож герой лишається на екрані.

   Розмітку збирає openRegisterGate() у js/constructor.js. */
.mt-gate{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(10,4,26,.72);backdrop-filter:blur(4px);
  animation:mtGateIn .18s ease;
}
@keyframes mtGateIn{from{opacity:0}to{opacity:1}}

.mt-gate__box{
  width:100%;max-width:420px;text-align:center;
  background:linear-gradient(160deg,#1b0c3d,#150a30);
  border:1px solid rgba(255,255,255,.12);border-radius:18px;
  padding:28px 24px 22px;
  box-shadow:0 30px 70px -25px rgba(0,0,0,.9);
}
.mt-gate__title{margin:0 0 10px;font-size:19px;font-weight:800;color:#fff;line-height:1.3}
.mt-gate__text{margin:0 0 18px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.72)}

.mt-gate__box .btn-main,
.mt-gate__box button[data-gate-login]{
  width:100%;border:none;cursor:pointer;font-family:inherit;
  background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;
  font-weight:800;font-size:14.5px;padding:13px 20px;border-radius:999px;
  box-shadow:0 12px 28px -12px rgba(236,72,153,.95);
}
.mt-gate__box button[data-gate-login]:disabled{opacity:.65;cursor:default}

.mt-gate__later{
  margin-top:12px;background:none;border:none;cursor:pointer;font-family:inherit;
  color:rgba(255,255,255,.5);font-size:12.5px;text-decoration:underline;
}
.mt-gate__err{margin-top:12px;font-size:12px;line-height:1.5;color:#fecaca}
.mt-gate__err:empty{display:none}

/* ── Замовлення оплачено ────────────────────────────────────
   Показується замість форми оформлення після успішного платежу.
   Розмітка — в js/constructor-markup.js (#paid-card), рядки
   підсумку заповнює renderPaidCard() у js/constructor.js.

   Окремий блок, а не зелена плашка під кнопкою: оплата — головна
   подія цього екрана, і вона має виглядати як подія. */
.paid-card{
  max-width:560px;margin:0 auto;text-align:center;
  border:1px solid rgba(255,255,255,.12);border-radius:22px;
  background:linear-gradient(165deg,rgba(124,58,237,.18),rgba(20,8,45,.35));
  padding:30px 26px 26px;
  animation:paidIn .32s cubic-bezier(.2,.7,.3,1);
}
@keyframes paidIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.paid-ill{margin:0 auto 6px;width:176px;max-width:52%}
.paid-ill img{display:block;width:100%;height:auto}

.paid-title{
  margin:0 0 10px;color:#fff;font-family:'Baloo 2',sans-serif;
  font-weight:800;font-size:27px;line-height:1.2;
}
.paid-sub{margin:0 0 22px;font-size:14px;line-height:1.6;color:rgba(233,224,255,.72)}

/* Рядки підсумку: ключ ліворуч, значення праворуч, крапки між ними.
   Крапки — на псевдоелементі, тож довжина підбирається сама й не
   ламається від довгого значення. */
.paid-rows{
  border:1px solid rgba(255,255,255,.1);border-radius:16px;
  background:rgba(255,255,255,.04);padding:6px 16px;margin-bottom:14px;text-align:left;
}
.paid-row{display:flex;align-items:baseline;gap:8px;padding:11px 0;font-size:13.5px}
.paid-row + .paid-row{border-top:1px solid rgba(255,255,255,.06)}
/* Іконка рядка — картинка 96×96, показана вчетверо меншою: так вона
   лишається різкою на retina. align-self, бо решта рядка вирівняна
   по базовій лінії тексту, а в картинки базової лінії немає. */
.paid-row-ico{flex:none;display:block;width:22px;height:22px;align-self:center}
.paid-row-ico img{display:block;width:100%;height:100%;object-fit:contain}
.paid-row-k{flex:none;color:rgba(233,224,255,.62);font-weight:600}
.paid-row-dots{
  flex:1;min-width:14px;overflow:hidden;white-space:nowrap;
  color:rgba(255,255,255,.18);letter-spacing:2px;
}
.paid-row-v{flex:none;color:#fff;font-weight:800;text-align:right}
/* Номер і сума — те, за чим повертаються до цього екрана. */
.paid-row-v.accent{color:#f472b6}
.paid-row-v.total{color:#f472b6;font-size:19px}

.paid-eta{
  display:flex;align-items:center;gap:13px;text-align:left;
  border:1px solid rgba(255,255,255,.1);border-radius:16px;
  background:rgba(255,255,255,.04);padding:14px 16px;margin-bottom:20px;
}
.paid-eta-ico{flex:none;font-size:26px;line-height:1}
.paid-eta-t{color:#fff;font-weight:800;font-size:14.5px;line-height:1.35}
.paid-eta-s{color:#a5b4fc;font-size:12.5px;line-height:1.45;margin-top:2px}

.paid-btn{
  display:block;text-decoration:none;text-align:center;
  background:linear-gradient(135deg,#ec4899,#7c3aed);color:#fff;
  font-weight:800;font-size:15px;padding:15px 22px;border-radius:999px;
  box-shadow:0 16px 34px -14px rgba(236,72,153,.95);
}
.paid-btn:hover{transform:translateY(-1px)}
.paid-home{
  display:inline-block;margin-top:14px;color:#c4b5fd;
  font-size:13px;font-weight:700;text-decoration:underline;
}
.paid-mail{margin-top:16px;font-size:12px;line-height:1.55;color:rgba(233,224,255,.5)}

/* Один крок замість списку: після оплати рухатись по кроках уже
   нема куди, лишається почати наступну книгу. */
.step-new{
  display:flex;gap:14px;align-items:center;width:100%;text-align:left;
  padding:13px 14px;border-radius:14px;cursor:pointer;font-family:inherit;
  background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.22);
}
.step-new:hover{background:rgba(255,255,255,.1)}
.step-new-dot{
  width:32px;height:32px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;color:#fff;background:linear-gradient(135deg,#ec4899,#7c3aed);
}
.step-new-lbl{font-weight:800;font-size:14px;color:#fff}
.step-new-sub{font-size:11.5px;color:rgba(255,255,255,.5);margin-top:1px}

@media (max-width:700px){
  .paid-card{padding:24px 16px 20px;border-radius:18px}
  .paid-title{font-size:22px}
  .paid-ill{width:132px}
  .paid-row{font-size:12.5px}
  .paid-row-v.total{font-size:17px}
}

/* Тестовий платіж адміністратора. Рядок навмисно помітний: без
   нього пісочниця не відрізняється від справжньої оплати. */
.paid-sandbox{
  margin:-12px 0 18px;font-size:12.5px;font-weight:700;line-height:1.5;
  color:#fde68a;background:rgba(251,191,36,.12);
  border:1px solid rgba(251,191,36,.35);border-radius:12px;padding:9px 12px;
}

/* ── Пошта гостя в оформленні ───────────────────────────────
   Показується лише тому, хто не входив (renderGuestBox у
   constructor.js). Два рівноправні шляхи: вписати пошту або
   увійти — вхід нічого не відкриває, лише додає книгу в кабінет. */
.guest-box{
  border:1px solid rgba(255,255,255,.12);border-radius:16px;
  background:rgba(255,255,255,.04);padding:16px 16px 18px;margin-bottom:18px;
}
.guest-note{margin-top:7px;font-size:11.5px;line-height:1.5;color:rgba(233,224,255,.55)}

/* «або» з рисками обабіч: рисок дві, тож псевдоелементи, а не рамка. */
.guest-or{display:flex;align-items:center;gap:12px;margin:15px 0 13px;
  font-size:11.5px;font-weight:700;color:rgba(255,255,255,.4)}
.guest-or::before,.guest-or::after{
  content:'';flex:1;height:1px;background:rgba(255,255,255,.12)}

.guest-login{
  width:100%;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-weight:700;font-size:13.5px;padding:12px 18px;border-radius:999px;
}
.guest-login:hover{background:rgba(255,255,255,.13)}
.guest-login:disabled{opacity:.6;cursor:default}

/* Той самий вхід, але вже після оплати: там він не про пошту, а про
   те, щоб книга лишилась у кабінеті. */
.paid-login{margin:0 0 16px;text-align:left;
  border:1px solid rgba(255,255,255,.14);border-radius:16px;
  background:rgba(255,255,255,.05);padding:15px 16px}
.paid-login-t{color:#fff;font-weight:800;font-size:14px;line-height:1.4}
.paid-login-s{color:rgba(233,224,255,.6);font-size:12.5px;line-height:1.5;margin:4px 0 12px}
.paid-login-err{margin-top:9px;font-size:12px;line-height:1.5;color:#fecaca}
.paid-login-err:empty{display:none}

/* ── Картки-питання на кроці «Герой» ────────────────────────
   Крок був однією довгою полотниною: фото, ім'я, вік, стать і
   прикмети йшли підряд, і не було видно, де закінчується одне
   питання й починається наступне. Тепер кожне — окрема картка з
   номером, і по номерах одразу видно, скільки їх усього.

   Рамка світиться рожевим на тій картці, з якою людина зараз
   працює (:focus-within): підказка, куди дивитись, без жодного
   рядка JS. */
.q-card{
  border:1px solid rgba(167,139,250,.26);border-radius:20px;
  background:linear-gradient(165deg,rgba(124,58,237,.18),rgba(255,255,255,.03));
  padding:20px 18px;margin-bottom:16px;
  transition:border-color .18s,box-shadow .18s;
}
.q-card:focus-within{
  border-color:rgba(236,72,153,.55);
  box-shadow:0 0 0 3px rgba(236,72,153,.12);
}

.q-head{display:flex;align-items:flex-start;gap:13px;margin-bottom:16px}

.q-num{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#ec4899,#7c3aed);color:#fff;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:16px;line-height:1;
  box-shadow:0 8px 18px -8px rgba(236,72,153,.9);
}
/* Підсумкова картка: та сама кулька, але золота — вона не про
   питання, а про результат. */
.q-num-res{background:linear-gradient(135deg,#fbbf24,#f472b6);font-size:17px}

.q-title{
  margin:0;color:#fff;font-family:'Baloo 2',sans-serif;
  font-weight:700;font-size:17px;line-height:1.3;
}
.q-sub{margin:5px 0 0;font-size:12.5px;line-height:1.5;color:rgba(226,214,255,.6)}

/* Усередині картки фото стоїть без нижнього відступу: його дає
   сама картка, і подвійний проміжок виглядав би дірою. */
.q-card .hero-photo-row{margin-bottom:0}
.q-card .mt-fhint:last-child{margin-bottom:0}

@media (max-width:700px){
  .q-card{padding:16px 14px;border-radius:16px}
  .q-head{gap:11px;margin-bottom:14px}
  .q-num{width:30px;height:30px;font-size:14.5px}
  .q-title{font-size:15.5px}
  .q-sub{font-size:12px}
}