/* Общие правила сайта, вынесенные из встроенных <style> в отдельный файл.

   ЗАЧЕМ. Эти блоки печатались в разметке КАЖДОЙ страницы заново: около 40 КБ
   на страницу, и ни один браузер их не запоминал, потому что html мы намеренно
   не кэшируем. Файл кэшируется на год (nginx, location /assets/), поэтому со
   второй страницы он не скачивается вовсе. Особенно это важно тем, кто сидит
   через VPN: у них каждый лишний килобайт идёт через заграницу.

   ПОРЯДОК ПОДКЛЮЧЕНИЯ ВАЖЕН. Файл идёт в head ПОСЛЕ основного webflow-css и
   после menu-v2.css: правила ниже перебивают вебфлоу (ширина контейнеров,
   фон навбара), и если поставить его раньше, ширина блоков вернётся к 80rem.

   Правки класть в ТОТ ЖЕ раздел, где живёт тема, а не в конец файла.
*/

/* ==========================================================================
   Шапка, ширина блоков, картинки. Было в <style> внутри layouts/webflow.
   ========================================================================== */
    header.menu { top: 0; transition: transform .35s ease; will-change: transform; }
    header.menu.menu--hidden { transform: translateY(-100%); }
    /* Навбар — сплошной непрозрачный белый (был полупрозрачный #fffffff2 + blur).
       При прокрутке открытого меню карусель уезжала под шапку и ПРОСВЕЧИВАЛА
       сквозь полупрозрачный фон. Непрозрачный фон это убирает: карусель чисто
       скрывается под шапкой. Позицию/липкость не трогаем. */
    header.menu .navbar {
      background: #fff !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }
    /* Единая ширина внутренних страниц = ширине меню/главной (85rem).
       container-xmedium раньше выпадал из этого правила и оставался 80rem (1120px) —
       из-за него контент калькуляторов/клуба был уже тарифов (1190px). Добавлен. */
    .container-medium, .container-mediumx, .container-xmedium { max-width: 85rem; }
    /* Моб. overflow статей: у грид-колонки article по умолчанию min-width:auto,
       поэтому широкий min-content внутри (полноширинный fate-калькулятор на
       /chislo-sudby/ с отриц. margin и сеткой картинок) распирал единственную
       колонку 1fr шире экрана — статью «уводило вбок». min-width:0 разрешает
       колонке сжиматься. Правит /chislo-sudby/ и страхует остальные статьи. */
    @media (max-width: 991px) {
      .div-grid.article > *, .div-grid.article .rich, .div-grid.article .div { min-width: 0; }
    }
    /* Картинкам проставлены родные размеры атрибутами width/height, чтобы браузер
       заранее знал пропорцию и держал место — иначе страница дёргается, когда
       картинка догружается. Базовое правило Webflow (img{max-width:100%}) высоту
       НЕ сбрасывает, поэтому атрибут height прибил бы высоту в пикселях и картинку
       бы расплющило. Этот класс возвращает height:auto — и стоит он ТОЛЬКО на тех
       картинках, которым высоту не задаёт ни один другой стиль (проверено по всем
       css и по <style> в шаблонах), так что перебить он ничего не может. */
    .nm-imgfit { height: auto; }
  

/* ==========================================================================
   Аккордеоны и воздух между разделами. Было в partials/nm-widgets-style.
   ========================================================================== */
  .description-tab { height: 0; overflow: hidden; transition: height .28s ease; }
  .description-tab.nm-acc-open { height: auto; }
  .nm-acc-head { cursor: pointer; }
  .nm-acc-head:focus-visible { outline: 2px solid #6c7af5; outline-offset: 2px; }

  /* Плюс/минус в кружке. Обе картинки лежат друг на друге в `.arrow-container`
     (14×14, overflow:hidden) — webflow их сдвигал, мы проще: показываем нужную.
     Правило намеренно узкое, по классу-метке `.nm-acc-head`: те же
     `.button-arrow`/`.button-arrow-2` стоят в обычных кнопках-стрелках. */
  .nm-acc-head .arrow-container .button-arrow-2 { opacity: 0; transition: opacity .18s ease; }
  .nm-acc-head .arrow-container .button-arrow   { opacity: 1; transition: opacity .18s ease; }
  .nm-acc-head.nm-acc-open .arrow-container .button-arrow-2 { opacity: 1; }
  .nm-acc-head.nm-acc-open .arrow-container .button-arrow   { opacity: 0; }

  /* Вариант с другими именами картинок (курс «Ведическая нумерология»):
     там плюс/минус подписаны -1/-3 и погашены стилем прямо в теге, поэтому
     без !important не перебить. */
  .nm-acc-head .arrow-container .button-arrow-3 { opacity: 1 !important; transition: opacity .18s ease; }
  .nm-acc-head .arrow-container .button-arrow-1 { opacity: 0 !important; transition: opacity .18s ease; }
  .nm-acc-head:not(.nm-acc-open) .arrow-container .button-arrow-3 { opacity: 0 !important; }
  .nm-acc-head:not(.nm-acc-open) .arrow-container .button-arrow-1 { opacity: 1 !important; transform: none !important; }

  @media (prefers-reduced-motion: reduce) {
    .description-tab, .nm-acc-head .arrow-container img { transition: none; }
  }

  /* 🔴 ВОЗДУХ МЕЖДУ БЛОКАМИ: ОДНА ТОЧКА НА ВЕСЬ САЙТ.

     Вебфлоу-класс `.section` своего отступа НЕ имеет ни в одном подключаемом
     css (проверено перебором всех файлов в папке public/assets/css). Воздух на
     эталонных страницах даёт обёртка `.margin-large` в разметке, и там, где
     её забыли поставить, разделы слипаются в одну простыню. Владелица ловила
     это по одной штуке за раз: Сюцай 14.09.2026 («что за склейки, где воздух
     просила»), до него Ба-цзы и кунхап.

     Лечение не по местам: правило одно, и разделу больше не нужна ни своя
     обёртка в разметке, ни своё правило в шаблоне страницы.

     ⚠️ Величины заведены переменными, потому что ими пользуются ещё и
     карточки разбора с плашками-выводами внутри калькуляторов. Второй копии
     числа быть не должно: поменяли здесь, поменялось везде.
     ⚠️ Отступ ВНЕШНИЙ, а не внутренний. `padding` тоже даёт воздух глазами,
     но границы блоков при этом продолжают соприкасаться, и замер
     `mobile-audit` честно показывает те же «0px»: доказать правку нечем.
     Соседние внешние отступы схлопываются, поэтому между блоками получается
     один зазор, а не два подряд.
     ⚠️ Стиль стоит в ГОЛОВЕ обоих лейаутов (`layouts/webflow`,
     `intl/layouts/app`), а не в `menu-v2.css`: тот подключается из шапки
     сайта, то есть в режиме приложения (§6.1) и при откате на старое меню
     (`?newmenu=0`) не грузится вовсе. Воздух не должен зависеть от того,
     какая на странице шапка. */
  :root {
    --nm-vozduh-razdel: clamp(2.2rem, 3.6vw, 3.6rem); /* между разделами страницы */
    --nm-vozduh-kard:   clamp(1.1rem, 1.6vw, 1.5rem); /* между карточками разбора */
    --nm-vozduh-vyvod:  clamp(1.3rem, 2.2vw, 2rem);   /* вокруг плашки-вывода */
  }

/* ==========================================================================
   Новые разделы сайта (меню, шторка, витрины). Было в partials/novye-razdely.
   ========================================================================== */
  /* Новые разделы сайта. Один набор правил на четыре места показа: меню,
     шторка телефона, витрина /numerology/ и главная. */
  .nr-blok { max-width: var(--nm-blok, 85rem); margin: 3rem auto 0; }
  .nr-h { font-size: 1.6rem; line-height: 1.2; margin: 0 0 .5rem; color: #241c3f; }
  .nr-sub { color: #6b7094; font-size: 1rem; line-height: 1.55; margin: 0 0 1.4rem; max-width: 46rem; }
  .nr-gr-t { font-size: .86rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #9a97b5; margin: 1.4rem 0 .6rem; }
  .nr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .7rem; }
  .nr-card { display: flex; align-items: flex-start; gap: .75rem; padding: .9rem 1rem;
    border: 1px solid #eceaf6; border-radius: 16px; background: #fff; text-decoration: none;
    box-shadow: 0 4px 14px rgba(36, 28, 63, .05);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
  .nr-card:hover { transform: translateY(-2px); border-color: #5d6eff; box-shadow: 0 10px 22px rgba(36, 28, 63, .1); }
  .nr-card-z { font-size: 1.6rem; line-height: 1.1; flex: 0 0 auto; }
  .nr-card-tt { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
  .nr-card-t { color: #241c3f; font-weight: 700; font-size: .98rem; line-height: 1.25; overflow-wrap: anywhere; }
  /* .86rem это ровно 12px при базовых 14px. Ниже опускаться нельзя. */
  .nr-card-d { color: #6b7094; font-size: .86rem; line-height: 1.4; }

  /* Меню: те же разделы полосками. Карточки сюда не ставим, панель и шторка
     и без того длинные (жалоба владелицы «слишком длинное»). */
  .nr-menu { padding-top: .8rem; border-top: 1px solid rgba(36, 28, 63, .09); margin-top: .9rem; }
  .nr-menu-t { font-size: .86rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #9a97b5; margin: .7rem 0 .4rem; }
  .nr-menu-t:first-child { margin-top: 0; }
  .nr-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
  .nr-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .75rem;
    border: 1px solid #eceaf6; border-radius: 50rem; background: #fff; text-decoration: none;
    color: #241c3f; font-size: .86rem; font-weight: 600; line-height: 1.25; }
  .nr-chip:hover { border-color: #5d6eff; color: #5d6eff; }
  .nr-chip-z { font-size: 1.05rem; line-height: 1; }
  /* Страховка от панели выше экрана: в выпадающем меню калькуляторов теперь
     двенадцать карточек и десять этих полосок, и на невысоком ноутбуке низ
     панели ушёл бы за край без всякой возможности до него добраться.
     Правило только ограничивает высоту, ничего не переставляя: пока
     содержимое влезает, оно не меняет ровно ничего. */
  .nm2-drop-panel--calc { max-height: min(80vh, 48rem); overflow-y: auto; }

  @media (max-width: 600px) {
    .nr-blok { margin-top: 2.2rem; }
    .nr-h { font-size: 1.3rem; }
    .nr-sub { font-size: .93rem; margin-bottom: 1.1rem; }
    .nr-grid { grid-template-columns: 1fr; }
  }

/* ==========================================================================
   Подвал. Было в partials/footer.
   ========================================================================== */
    /* Футер: своя сетка вместо webflow-грида (там оставались пустые ячейки). */
    .nf-footer .nf-wrap { display:grid; grid-template-columns:1.6fr 1fr 1.2fr 1.2fr; gap:2.5rem 2rem;
      align-items:start; position:relative; }
    .nf-brand { display:flex; flex-direction:column; gap:1rem; align-items:flex-start; }
    .nf-slogan { color:#6b7094; font-size:.95rem; line-height:1.6; margin:0; max-width:22rem; }
    .nf-cta { display:inline-block; padding:.85rem 1.7rem; border-radius:50rem; text-decoration:none;
      background:linear-gradient(90deg,#8b5cf6,#5d6eff); color:#fff !important;
      font:700 .92rem Montserrat,sans-serif; box-shadow:0 8px 20px rgba(99,102,241,.28);
      transition:transform .16s ease, box-shadow .2s ease; }
    .nf-cta:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(99,102,241,.38); }
    .nf-social { display:flex; gap:.6rem; margin-top:.2rem; }
    .nf-col-title { margin-bottom:1.1rem; }
    .nf-footer .footer-nav { display:flex; flex-direction:column; gap:.65rem; }
    /* Новые разделы: полоса на всю ширину подвала, ссылки в несколько
       столбцов, чтобы десять пунктов не вытянули подвал вниз. */
    .nf-razdely { grid-column:1 / -1; border-top:1px solid #eceef7; padding-top:1.4rem; }
    .nf-footer .nf-razdely-nav { display:grid; grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr));
      gap:.6rem 1.4rem; }
    .nf-bottom { grid-column:1 / -1; border-top:1px solid #eceef7; padding-top:1.4rem; margin-top:.6rem;
      display:flex; flex-direction:column; gap:.7rem; }
    .nf-bottom-row { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.6rem; }
    .nf-legal-links { display:flex; gap:1.4rem; flex-wrap:wrap; }
    .nf-legal-links a { color:#6b7094; font-size:.87rem; text-decoration:none; }
    .nf-legal-links a:hover { color:#5d6eff; }
    /* Было #9a97b0 — контраст 2.83 на белом при норме 4.5. Здесь это не только
       доступность: строкой ниже стоят ИП, ОГРНИП и ИНН, то есть обязательные
       реквизиты, которые обязаны читаться. Тон сохранён, оттенок темнее —
       контраст 4.55. */
    .nf-legal-info, .nf-copy { color:#767487; font-size:.82rem; line-height:1.5; }
    .nf-top { width:40px; height:40px; border-radius:50%; flex:none; margin-left:auto;
      border:1px solid #e1ddf6; display:inline-flex; align-items:center; justify-content:center;
      color:#5d6eff; background:#fff; transition:transform .16s ease, border-color .16s ease; }
    .nf-top svg { transform:rotate(180deg); }
    .nf-top:hover { transform:translateY(-2px); border-color:#5d6eff; }
    @media (max-width:991px) {
      .nf-footer .nf-wrap { grid-template-columns:1fr 1fr; gap:2rem 1.5rem; }
      .nf-brand { grid-column:1 / -1; }
      .nf-top { display:none; }
    }
    @media (max-width:600px) {
      /* Мобилка: колонки ссылок в ДВА столбца, иначе футер становится бесконечным. */
      .nf-footer .nf-wrap { grid-template-columns:1fr 1fr; gap:1.6rem 1.2rem; }
      .nf-brand { grid-column:1 / -1; gap:.85rem; }
      .nf-slogan { font-size:.9rem; }
      .nf-cta { width:100%; text-align:center; padding:.8rem 1rem; }
      .nf-col-title { margin-bottom:.7rem; font-size:.82rem; }
      .nf-footer .footer-nav { gap:.5rem; }
      .nf-footer .footer-nav a { font-size:.88rem; }
      /* «Школа» — самая длинная колонка, её ссылки в две колонки внутри блока. */
      .nf-col--wide { grid-column:1 / -1; }
      .nf-col--wide .footer-nav { display:grid; grid-template-columns:1fr 1fr; gap:.5rem .8rem; }
      /* Новые разделы на телефоне тоже в два столбца: десять пунктов одной
         колонкой сделали бы подвал бесконечным. */
      .nf-footer .nf-razdely-nav { grid-template-columns:1fr 1fr; gap:.5rem .8rem; }
      .nf-bottom { padding-top:1.1rem; gap:.5rem; }
      .nf-legal-links { gap:1rem; }
      /* 🔴 Ниже 12px на телефоне не опускаемся (правило владелицы). Было
           .75rem, это 11.02px на живой странице, и мелкий текст в подвале
           выходил на КАЖДОЙ странице сайта разом. Чиним здесь, а не по
           страницам. */
      .nf-legal-info, .nf-copy { font-size:12px; }
    }
  

/* ==========================================================================
   Всплывашки. Было в partials/popup.
   ========================================================================== */
  .pu-back {
    position: fixed; inset: 0; z-index: 9999; display: flex;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(24, 12, 48, .55); opacity: 0; transition: opacity .25s ease;
  }
  .pu-back.is-on { opacity: 1; }
  /* КРИТИЧНО: без этого невидимое окно блокирует клики по всему сайту. */
  .pu-back[hidden] { display: none !important; }
  .pu-back, .pu-back * { box-sizing: border-box; }

  .pu-modal {
    position: relative; background: #fff; border-radius: 22px; overflow: hidden;
    width: 100%; max-width: 520px; min-width: 0;
    box-shadow: 0 30px 80px rgba(20, 8, 45, .45);
    max-height: calc(100dvh - 40px); overflow-y: auto;
    transform: translateY(14px); transition: transform .25s ease;
  }
  .pu-back.is-on .pu-modal { transform: none; }

  /* height:auto обязателен: атрибут height у картинки перебил бы aspect-ratio. */
  .pu-shot { display: block; width: 100%; height: auto; aspect-ratio: 2/1; object-fit: cover; }

  .pu-body { padding: 22px 26px 26px; }
  .pu-flag {
    display: inline-block; background: #fff5ec; color: #b4661f; border: 1px solid #f0a675;
    font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    padding: 5px 11px; border-radius: 20px; margin-bottom: 14px;
  }
  .pu-title {
    margin: 0 0 10px; font-size: 1.35rem; line-height: 1.2; font-weight: 800;
    letter-spacing: -.02em; color: #241c3f; text-wrap: balance;
  }
  .pu-p { margin: 0 0 18px; color: #5b5878; font-size: .95rem; line-height: 1.5; }

  /* Выделение важного: подсветка снизу, а не жёлтый маркер. Читается спокойно,
     но взгляд цепляется. */
  .pu-mark {
    background: linear-gradient(180deg, transparent 62%, #ded7ff 62%);
    color: inherit; padding: 0 .1em; border-radius: 2px;
  }

  /* Ценовой блок: то, ради чего окно и показывается. Новая цена крупная,
     старая зачёркнута и приглушена, процент цветной плашкой. */
  .pu-price {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
    margin: 0 0 20px;
  }
  .pu-price__now {
    font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; color: #241c3f;
    font-variant-numeric: tabular-nums; line-height: 1;
  }
  /* Старая цена зачёркнута КРАСНЫМ: так читается как распродажа, а не как
     справка. Просила владелица 07.09.2026. Цвет один и тот же у черты и у
     плашки с процентом, иначе блок выглядит собранным из разных мест. */
  .pu-price__old {
    font-size: 1.05rem; color: #d92d20; text-decoration-thickness: 2px;
    text-decoration-color: #d92d20; font-variant-numeric: tabular-nums;
  }
  .pu-price__off {
    font-size: .8rem; font-weight: 800; letter-spacing: .02em; color: #fff;
    background: #d92d20; padding: 4px 9px; border-radius: 8px; line-height: 1;
  }
  .pu-btn {
    display: block; text-align: center; padding: 14px; border-radius: 50rem;
    font-weight: 700; font-size: .95rem; text-decoration: none; color: #fff;
    background: linear-gradient(90deg, #6f5fe0, #8b5cf6);
    box-shadow: 0 10px 26px rgba(111, 95, 224, .32);
  }
  .pu-later {
    display: block; width: 100%; margin-top: 10px; padding: 6px; border: 0; background: none;
    font: inherit; font-size: .85rem; color: #8b87a5; cursor: pointer;
  }
  .pu-x {
    position: absolute; top: 12px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
    border: 0; background: rgba(255, 255, 255, .9); color: #3a2f5e; font-size: 18px;
    line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(20, 8, 45, .25); z-index: 2;
  }
  .pu-btn:focus-visible, .pu-later:focus-visible, .pu-x:focus-visible {
    outline: 2px solid #6f5fe0; outline-offset: 3px;
  }

  /* ── Фото на всю подложку ── */
  .pu-cover .pu-modal { max-width: 560px; }
  .pu-cover .pu-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .pu-cover .pu-modal::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(18,8,40,.28) 0%, rgba(18,8,40,.80) 55%, rgba(18,8,40,.94) 100%);
  }
  .pu-cover .pu-body { position: relative; z-index: 1; padding: 170px 30px 28px; }
  .pu-cover .pu-title { color: #fff; font-size: 1.6rem; }
  .pu-cover .pu-p { color: rgba(255,255,255,.85); }
  .pu-cover .pu-flag { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color: #fff; }
  .pu-cover .pu-btn { background: #fff; color: #2a1f55; box-shadow: 0 10px 26px rgba(0,0,0,.3); }
  .pu-cover .pu-later { color: rgba(255,255,255,.65); }
  .pu-cover .pu-x { background: rgba(255,255,255,.22); color: #fff; }

  /* ── Фото слева ── */
  .pu-side .pu-modal { max-width: 760px; display: grid; grid-template-columns: 40% 1fr; }
  /* Точка обрезки приходит инлайном из настройки окна (Popup::objectPosition).
     Здесь только запасное значение: держим верх, режем низ. */
  .pu-side .pu-side-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
  .pu-side .pu-body { padding: 30px 32px; align-self: center; }

  /* ── Снимок расчёта: картинка целиком ──
     Экран расчёта обрезать нельзя: по краям у него и цифры, и подписи, и
     полоса процентов. Полосой сверху (2:1) и колонкой слева (узкой и высокой)
     от такого снимка оставалась середина, и человек не понимал, что видит.
     Здесь картинка вписывается целиком, а поля добираются светлым фоном:
     все снимки сняты на светлом, стык не виден.
     ⚠️ height:auto обязателен — иначе max-height не даст сохранить пропорцию. */
  .pu-snimok .pu-modal { max-width: 560px; }
  .pu-snimok .pu-snimok-img {
    display: block; width: 100%; height: auto; max-height: 58vh;
    object-fit: contain; background: #f7f6fc; border-bottom: 1px solid #efedf9;
  }

  /* ── Без картинки ── */
  .pu-minimal .pu-modal { max-width: 460px; }
  .pu-minimal .pu-body { padding: 34px 30px 30px; text-align: center; }
  .pu-minimal .pu-title { font-size: 1.5rem; }

  /* ── Полоса внизу ── */
  .pu-bar { align-items: flex-end; padding: 0; background: none; pointer-events: none; }
  .pu-bar .pu-modal {
    pointer-events: auto; max-width: none; width: 100%; border-radius: 18px 18px 0 0;
    max-height: none; transform: translateY(100%); box-shadow: 0 -12px 40px rgba(20,8,45,.28);
  }
  .pu-bar.is-on .pu-modal { transform: none; }
  .pu-bar .pu-body {
    display: flex; align-items: center; gap: 18px; padding: 14px 60px 14px 20px;
    max-width: 1100px; margin: 0 auto;
  }
  .pu-bar .pu-thumb { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; }
  .pu-bar .pu-text { flex: 1; min-width: 0; }
  .pu-bar .pu-flag { margin-bottom: 6px; }
  .pu-bar .pu-title { font-size: 1.05rem; margin-bottom: 2px; }
  .pu-bar .pu-p { margin: 0; font-size: .88rem; }
  .pu-bar .pu-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
  .pu-bar .pu-btn { padding: 12px 24px; }
  .pu-bar .pu-later { width: auto; margin: 0; }

  @media (max-width: 767px) {
    .pu-side .pu-modal { grid-template-columns: 1fr; }
    /* На телефоне колонка схлопывается в полосу. 2:1 отрезало слишком много —
       делаем полосу выше. Точку обрезки не задаём: она приходит инлайном из
       настройки окна, иначе телефон перебивал бы выбор владелицы. */
    .pu-side .pu-side-img { aspect-ratio: 4/3; height: auto; }
    /* Телефон выше и уже: снимку оставляем меньше, чтобы кнопка была видна
       без прокрутки окна. */
    .pu-snimok .pu-snimok-img { max-height: 44vh; }
    .pu-bar .pu-body { flex-wrap: wrap; padding: 14px 46px 16px 16px; }
    .pu-bar .pu-actions { width: 100%; }
    .pu-bar .pu-btn { flex: 1; }
  }
  @media (max-width: 479px) {
    .pu-body { padding: 18px 18px 22px; }
    .pu-title { font-size: 1.2rem; }
    .pu-cover .pu-body { padding-top: 120px; }
    .pu-bar .pu-thumb { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pu-back, .pu-modal { transition: none; }
  }

/* ==========================================================================
   Нумера, плавающий чат. Было в partials/goddess-widget.
   ========================================================================== */
    #gd-root { --gd-c1:#6a3df0; --gd-c2:#9b4dff; --gd-gold:#ffd27a; --gd-bg:#fbfaff; }
    .gd-launcher {
        position: fixed; right: 24px; bottom: 24px; z-index: 9998;
        width: 104px; height: 104px; border: none; padding: 0; cursor: pointer;
        background: none; -webkit-tap-highlight-color: transparent;
        transition: opacity .35s ease;
    }
    /* Свечение-ореол вокруг кнопки отключено (для сферы оформление не нужно). */
    .gd-launcher__pulse { display: none; }
    @keyframes gd-wave { 0% { transform: scale(.9); opacity: .55; } 100% { transform: scale(2); opacity: 0; } }
    .gd-orb {
        position: relative; z-index: 1; box-sizing: border-box;
        display: inline-flex; align-items: center; justify-content: center;
        width: 104px; height: 104px; border-radius: 50%; overflow: hidden;
        background: #fff; border: 2px solid #5c7cfc;
        box-shadow: 0 12px 30px rgba(92,124,252,.35);
    }
    /* Картинка квадратная — поэтому реально увеличиваем и сдвигаем вниз:
       верх закреплён, низ выходит за круг и обрезается (overflow:hidden). */
    .gd-orb__img {
        width: 100%; height: 100%; display: block;
        object-fit: cover; object-position: center top;
        transform: scale(1.3) translateY(6%); transform-origin: top center;
    }

    /* --- Кнопка-лаунчер: только сфера, без рамки/фона/тени --- */
    .gd-orb--pop { overflow: visible; background: none; border: none; box-shadow: none; }
    .gd-orb--pop .gd-orb__circle {
        position: absolute; inset: 0; border-radius: 50%; overflow: hidden; box-sizing: border-box;
        display: flex; align-items: center; justify-content: center;
        background: transparent; border: none; z-index: 1;
        box-shadow: none;
    }
    .gd-orb--pop .gd-orb__img {
        /* сфера заполняет круг и центрируется; квадратные углы картинки обрезаются кругом */
        position: absolute; left: 50%; top: 50%; width: 122%; height: 122%;
        transform: translate(-50%, -50%); object-fit: cover; object-position: center;
        transition: transform .18s ease;
    }
    .gd-orb--pop.gd-orb--noimg .gd-orb__circle { background: linear-gradient(140deg, var(--gd-c1), var(--gd-c2)); }
    .gd-launcher:hover .gd-orb--pop .gd-orb__circle { box-shadow: none; }
    .gd-launcher:hover .gd-orb--pop .gd-orb__img { transform: translate(-50%, -50%) scale(1.06); }
    .gd-orb__glyph { display: none; color: var(--gd-c2); font-size: 2rem; text-shadow: 0 0 10px rgba(155,77,255,.5); }
    .gd-orb--noimg { background: linear-gradient(140deg, var(--gd-c1), var(--gd-c2)); }
    .gd-orb--noimg .gd-orb__glyph { display: block; color: var(--gd-gold); }
    .gd-orb--sm { width: 44px; height: 44px; border-width: 1.5px; animation: none; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
    .gd-orb--sm .gd-orb__glyph { font-size: 1.1rem; }
    .gd-launcher:hover .gd-orb:not(.gd-orb--pop) { box-shadow: 0 14px 36px rgba(106,61,240,.6); }

    .gd-panel {
        position: fixed; right: 22px; bottom: 22px; z-index: 9999;
        width: 370px; max-width: calc(100vw - 24px);
        height: 560px; max-height: calc(100vh - 32px);
        background: #fcfcfd; border-radius: 20px; overflow: hidden;
        display: flex; flex-direction: column;
        box-shadow: 0 1px 2px rgba(20,18,30,.04), 0 12px 30px -8px rgba(20,18,30,.13), 0 40px 76px -30px rgba(20,18,30,.2);
        opacity: 0; transform: translateY(16px) scale(.98); pointer-events: none;
        transition: opacity .25s ease, transform .25s ease;
        font-family: inherit;
    }
    .gd-panel.gd-open { opacity: 1; transform: none; pointer-events: auto; }

    /* Шапка чата. Фон сплошной синий (#5c6efe) — цвет прислала владелица,
       вместо прежнего фиолетового градиента. Фигура Нумеры «стоит» на нижней
       кромке шапки, поэтому выравнивание по низу, а верхний отступ нулевой. */
    /* Шапка чата: рисунок Нумеры во всю ширину, поверх него затемнение слева
       и надпись. Высота фиксированная — рисунок скадрирован под неё. */
    .gd-head {
        display: flex; align-items: center; gap: 10px;
        padding: 0 12px 0 20px;
        background: #191821; color: #fff; position: relative;
        height: 104px; overflow: hidden;
    }
    .gd-head__cover { position: absolute; inset: 0; }
    .gd-head__cover img {
        width: 100%; height: 100%; display: block;
        object-fit: cover; object-position: 50% 50%;
    }
    /* 🔴 Затемнение НЕ убирать: без него белая надпись пропадает на светлых
       прядях. Справа оно сходит на нет, чтобы лицо оставалось чистым. */
    .gd-head__veil {
        position: absolute; inset: 0;
        background: linear-gradient(90deg, #191821 0%, rgba(25,24,33,.96) 26%,
            rgba(25,24,33,.72) 44%, rgba(25,24,33,.1) 68%, transparent 84%);
    }

    /* Звёзды фона: копия приёма с главной (public/assets/css/home.css).
       Белая точка обрезается в четырёхлучевую звезду и мерцает. */


    .gd-head__meta {
        display: flex; flex-direction: column; line-height: 1.2;
        position: relative; z-index: 2; flex: 1;
    }
    .gd-head__name { font-weight: 700; font-size: 1.03rem; letter-spacing: -.015em;
        text-shadow: 0 1px 10px rgba(0,0,0,.5); }
    /* 12px, а не .75rem: на телефоне .75rem давало 11.02px, а ниже 12px мы
         не опускаемся. */
    .gd-head__status { font-size: 12px; color: #b8b4c6; white-space: nowrap;
        text-shadow: 0 1px 10px rgba(0,0,0,.6); }
    .gd-head__status i { color: #aaffc4; font-style: normal; }
    .gd-reset {
        margin-left: auto; background: rgba(10,9,16,.52); border: none; color: #fff;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
        width: 32px; height: 32px; border-radius: 50%; font-size: 1.1rem; line-height: 1; cursor: pointer;
        position: relative; z-index: 3;
    }
    .gd-reset:hover { background: rgba(10,9,16,.8); }
    .gd-close {
        margin-left: 6px; background: rgba(10,9,16,.52); border: none; color: #fff;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
        width: 32px; height: 32px; border-radius: 50%; font-size: 1.3rem; line-height: 1; cursor: pointer;
        position: relative; z-index: 3;
    }
    .gd-close:hover { background: rgba(10,9,16,.8); }

    /* 🔴 ТЕЛО ЧАТА СОБРАНО ПО МАКЕТУ ВЛАДЕЛИЦЫ (docs/sources/numeraflow2.html).
       Светлая подложка, серый пузырь бота, варианты СТОЛБИКОМ прямоугольными
       строками, поле ввода без обводки. Не возвращать прежние пилюли в ряд и
       фиолетовые градиенты: макет она утвердила целиком, а не только шапку. */
    .gd-log { flex: 1; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 13px; background: #fcfcfd; }
    .gd-msg { max-width: 88%; padding: 11px 14px; font-size: 13.5px; line-height: 1.55; word-wrap: break-word; }
    .gd-msg a { color: #5b4bd6; font-weight: 600; }
    .gd-msg--bot { align-self: flex-start; background: #f2f1f6; color: #292732; border-radius: 14px 14px 14px 4px; }
    .gd-msg--me  { align-self: flex-end; background: #8b7ff0; color: #fff; border-radius: 14px 14px 4px 14px; }
    .gd-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; background: #f2f1f6; border-radius: 14px 14px 14px 4px; }
    .gd-typing span { width: 7px; height: 7px; border-radius: 50%; background: #8b7ff0; opacity: .5; animation: gd-blink 1.2s infinite; }
    .gd-typing span:nth-child(2){ animation-delay: .2s } .gd-typing span:nth-child(3){ animation-delay: .4s }
    @keyframes gd-blink { 0%,100%{opacity:.3;transform:translateY(0)} 50%{opacity:1;transform:translateY(-3px)} }

    /* Варианты столбиком, а не пилюлями в ряд: так в макете. */
    /* Внутри окна переписки: горизонтальные отступы уже заданы окном. */
    .gd-chips { display: flex; flex-direction: column; gap: 7px; padding: 2px 0 4px; background: transparent; }
    .gd-chips-hint { font-size: 12px; line-height: 1.5; color: #8a8893; padding: 0 2px; margin: 0 0 4px; }
    .gd-chip {
        display: flex; align-items: center; gap: 9px; text-align: left;
        border: 1px solid #e7e6ec; background: #fff; color: #292732;
        padding: 10px 14px; border-radius: 11px; font-size: 13px; font-weight: 500; cursor: pointer;
        font-family: inherit;
        transition: transform .14s cubic-bezier(.2,.8,.3,1), background .14s ease, border-color .14s ease;
    }
    .gd-chip:hover { transform: translateX(3px); border-color: #c9c3e9; background: #fbfaff; }
    /* Значок слева: тонкий символ фиксированной ширины, чтобы подписи стояли в столбик. */
    /* ⚠️ Свой шрифтовой ряд для значков: основной шрифт сайта Montserrat части
       этих символов не содержит, и без запасных получится пустой прямоугольник.
       Так же уже наступали на «ё» в BebasNaue. */
    .gd-chip i { font-style: normal; font-size: 13px; opacity: .85; width: 15px; text-align: center; flex: 0 0 15px;
        font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', 'DejaVu Sans', sans-serif; }
    /* Акцентная строка (подбор обучения) — как «chip on» в макете. */
    .gd-chip--soft { border-color: #8b7ff0; background: #f6f4ff; color: #5b4bd6; }
    .gd-chip--soft:hover { border-color: #8b7ff0; background: #f1eeff; }

    .gd-form { display: flex; align-items: center; gap: 9px; padding: 12px 14px 14px; border-top: 1px solid #f0eff3; background: #fcfcfd; }
    /* Кнопка «варианты» у поля ввода: тот же размер и скругление, что у отправки. */
    .gd-menu-btn {
        flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid #e7e6ec; border-radius: 12px;
        background: #fff; color: #5b4bd6; cursor: pointer; font-size: 1rem; line-height: 1;
        font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', 'DejaVu Sans', sans-serif;
        transition: background .14s ease, border-color .14s ease;
    }
    .gd-menu-btn:hover { border-color: #c9c3e9; background: #fbfaff; }
    .gd-menu-btn[aria-expanded="true"] { background: #f6f4ff; border-color: #8b7ff0; }
    /* Само меню всплывает НАД полем, поверх переписки, и её не трогает. */
    .gd-menu {
        position: absolute; left: 12px; right: 12px; bottom: 70px; z-index: 4;
        background: #fff; border: 1px solid #e7e6ec; border-radius: 14px;
        box-shadow: 0 12px 30px -8px rgba(20,18,30,.22);
        padding: 8px; max-height: 58%; overflow-y: auto;
    }
    .gd-menu[hidden] { display: none; }
    .gd-menu__title { font-size: 12px; color: #8a8893; padding: 4px 6px 8px; }
    .gd-menu__list { display: flex; flex-direction: column; gap: 7px; }
    .gd-menu .gd-chip { width: 100%; }
    .gd-input {
        flex: 1; border: 1px solid transparent; border-radius: 12px; padding: 11px 14px;
        font-size: 13.5px; line-height: 1.35; outline: none; background: #f5f4f8; color: #292732;
        -webkit-appearance: none; appearance: none;
        font-family: inherit; resize: none; max-height: 96px; overflow-y: auto;
        transition: background .15s ease, border-color .15s ease;
    }
    .gd-input:focus { background: #fff; border-color: #cfc8f5; }
    /* Убираем «поисковое» оформление type=search (крестик/иконка). */
    .gd-input::-webkit-search-cancel-button,
    .gd-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
    /* Кнопка отправки — скруглённый квадрат, не круг: так в макете. */
    .gd-send {
        flex: 0 0 38px; width: 38px; height: 38px; border: none; border-radius: 12px; cursor: pointer;
        background: #8b7ff0; color: #fff; font-size: 1rem; line-height: 1;
        transition: transform .14s ease, opacity .2s ease;
    }
    .gd-send:hover { transform: scale(1.05); }
    .gd-send:disabled { opacity: .5; cursor: default; transform: none; }

    /* При открытом мобильном меню (бургер #menu получает класс w--open)
       прячем кнопку-сферу, чтобы она не перекрывала меню. */
    #gd-root.gd-navopen .gd-launcher { display: none; }

    @media (max-width: 479px) {
        .gd-launcher { right: 16px; bottom: 16px; width: 70px; height: 70px; }
        .gd-orb { width: 70px; height: 70px; border-width: 2px; }
        /* Панель почти на весь экран; высоту/верх подгоняет JS под видимую
           область (учёт экранной клавиатуры), чтобы поле ввода не перекрывалось. */
        .gd-panel {
            left: 6px; right: 6px; top: 6px; bottom: 6px; width: auto; max-width: none;
            height: auto; max-height: none; border-radius: 16px;
        }
        .gd-log { padding: 12px; }
        .gd-form { padding: 10px 12px; }
        /* 16px — чтобы iOS не зумил страницу при фокусе на поле ввода. */
        .gd-input { font-size: 16px; }
    }

    /* «Спокойный» режим (страницы калькуляторов): сфера компактнее и
       полупрозрачнее, чтобы не закрывать показатели расчёта; при наведении
       или фокусе — полная видимость. */
    #gd-root.gd-calm .gd-launcher { width: 74px; height: 74px; opacity: .55; }
    #gd-root.gd-calm .gd-orb { width: 74px; height: 74px; }
    #gd-root.gd-calm .gd-launcher:hover,
    #gd-root.gd-calm .gd-launcher:focus-visible { opacity: 1; }
    @media (max-width: 479px) {
        #gd-root.gd-calm .gd-launcher { width: 54px; height: 54px; opacity: .6; }
        #gd-root.gd-calm .gd-orb { width: 54px; height: 54px; }
    }

    /* Деликатность для всех страниц: пока пользователь прокручивает/читает,
       сфера затухает и не отвлекает; при остановке — плавно возвращается.
       Правило идёт ПОСЛЕДНИМ — чтобы во время скролла перебивать «спокойный»
       режим на любой ширине. При наведении остаётся кликабельной. */
    #gd-root.gd-scrolling .gd-launcher { opacity: .2; }
    #gd-root.gd-scrolling .gd-launcher:hover,
    #gd-root.gd-scrolling .gd-launcher:focus-visible { opacity: 1; }