/* ============================================================
   FitAI — стили слоя v280 (новая структура кабинета).
   Вынесены из app.js, чтобы правились как обычный CSS.
   Подключается ПОСЛЕ cabinet-*.css.
   ============================================================ */
/* Палитра — токены кабинета из cabinet-base.css. Кабинет светлый,
       свои цвета не изобретаем.
       Базовая раскладка (размеры, гриды) живёт весом (0,2,0) и ниже,
       чтобы не перебивать компонентные правила чужих файлов.
       ЦВЕТА — отдельно, в блоках 280.1 и 280.2 в конце файла: там вес
       намеренно выше (0,3,1), иначе styles.css и cabinet-base
       перекрашивают заголовки тёмным. Подробности — в шапках блоков. */

    /* видео техники подставляется в те же обёртки, что и фото */
    .fai159-tech-photo video,.fai159-course-photo video,.fai159-workout-photo video,
    .fai159-card-photo video,.fai241-exercise-card-photo video{
      display:block!important;width:100%!important;height:100%!important;
      object-fit:cover!important;background:var(--c-stone)!important;border:0!important}
    #fp14modal .fai159-tech-photo video,
    #fai137TechniqueOverlay .fai137-tech-body>.fai159-course-photo video{object-fit:contain!important}
    .fai159-card-photo,.fai241-exercise-card-photo,.fai159-tech-photo,.fai159-course-photo{position:relative}
    .fai280-video-badge{position:absolute;left:10px;bottom:10px;z-index:2;
      display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;
      background:rgba(18,20,24,.72);color:#fff;font-size:10px;font-weight:700;letter-spacing:.08em;
      pointer-events:none}

    /* кнопка «Профиль» в правом верхнем углу (десктоп) */
    .fai280-profile-btn{position:fixed;top:18px;right:24px;z-index:900;
      display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
      border:1px solid var(--c-line-2);border-radius:999px;background:var(--c-white);
      color:var(--c-ink);font-family:var(--c-sans);font-size:14px;font-weight:600;
      box-shadow:var(--c-shadow);cursor:pointer}
    .fai280-profile-btn:hover{border-color:var(--c-blue);color:var(--c-blue)}
    .fai280-profile-btn i{font-style:normal;font-size:15px;opacity:.7}
    @media(max-width:700px){.fai280-profile-btn{display:none}}
    /* мобильная шапка тёмная (см. v235), поэтому триггер там тёмный */
    .fai235-profile-trigger{min-height:42px;padding:0 14px;border:1px solid #416c4b;
      border-radius:13px;background:#14261a;color:#edf8ee;font-family:inherit;
      font-size:12px;font-weight:800;white-space:nowrap}

    /* шторка профиля */
    .fai280-profile-layer{position:fixed;inset:0;z-index:2147483646;
      background:rgba(18,20,24,.38);display:flex;justify-content:flex-end;align-items:stretch}
    .fai280-profile-sheet{width:min(92vw,352px);max-height:100dvh;overflow-y:auto;
      padding:20px 18px calc(26px + env(safe-area-inset-bottom));box-sizing:border-box;
      background:var(--c-white);border-left:1px solid var(--c-line);
      box-shadow:-30px 0 70px -30px rgba(18,20,24,.4);font-family:var(--c-sans)}
    .fai280-profile-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
      padding-bottom:16px;margin-bottom:14px;border-bottom:1px solid var(--c-line)}
    .fai280-profile-head b{display:block;color:var(--c-ink);font-family:var(--c-display);
      font-size:17px;font-weight:600}
    .fai280-profile-head small{display:block;margin-top:4px;color:var(--c-ink-3);font-size:12px;word-break:break-all}
    .fai280-profile-head button{width:38px;height:38px;flex:0 0 38px;border:1px solid var(--c-line);
      border-radius:12px;background:var(--c-paper);color:var(--c-ink-2);font-size:20px;line-height:1;cursor:pointer}
    .fai280-profile-plan{display:flex;align-items:center;gap:9px;margin-bottom:16px;padding:11px 13px;
      border:1px solid var(--c-line);border-radius:var(--c-r);background:var(--c-paper);
      color:var(--c-ink-2);font-size:13px}
    .fai280-profile-plan i{font-style:normal;color:var(--c-good);font-weight:700}
    .fai280-profile-sheet nav{display:grid;gap:8px}
    .fai280-profile-item{display:grid;grid-template-columns:26px minmax(0,1fr) 16px;align-items:center;gap:12px;
      width:100%;min-height:52px;padding:0 14px;border:1px solid var(--c-line);border-radius:var(--c-r);
      background:var(--c-white);color:var(--c-ink);text-align:left;
      font-family:var(--c-sans);font-size:15px;font-weight:600;cursor:pointer}
    .fai280-profile-item:hover{border-color:var(--c-blue);background:var(--c-paper)}
    .fai280-profile-item span:first-child{color:var(--c-ink-3);font-size:16px;text-align:center}
    /* шеврон — это текстовый узел; на --c-line-2 он давал 1.54:1 */
    .fai280-profile-item i{font-style:normal;justify-self:end;color:var(--c-ink-3)}
    .fai280-profile-item.admin{border-color:var(--c-blue);background:var(--c-sky);color:var(--c-blue-2)}
    .fai280-profile-item.admin span:first-child{color:var(--c-blue)}
    .fai280-profile-item.danger{margin-top:10px;background:var(--c-white)!important;
      border-color:var(--c-line)!important;color:var(--c-bad)!important;font-weight:600!important}
    .fai280-profile-item.danger span:first-child{color:var(--c-bad)!important}
    .fai280-profile-item.danger i{color:var(--c-bad)!important;opacity:1}
    .fai280-profile-item.danger:hover{border-color:var(--c-bad)!important;background:var(--c-paper)!important}

    /* заголовок объединённого раздела + вкладки */
    .fai280-section-head{padding:2px 0 6px}
    .fai280-section-head h2{margin:0 0 14px;color:var(--c-ink);font-family:var(--c-display);
      font-size:clamp(24px,2.2vw,32px);font-weight:600;letter-spacing:-.02em}
    /* styles.css красит голые button тёмным через !important —
       поэтому здесь тоже !important, как это делают cabinet-*.css */
    .fai280-tabs{margin-bottom:10px;background:transparent!important}
    .fai83-shell .fai280-tabs button{min-height:42px!important;padding:0 18px!important;
      border:1px solid var(--c-line)!important;border-radius:999px!important;
      background:var(--c-white)!important;color:var(--c-ink-2)!important;
      font-family:var(--c-sans)!important;font-size:14px!important;font-weight:600!important;
      box-shadow:none!important;cursor:pointer}
    .fai83-shell .fai280-tabs button:hover{border-color:var(--c-line-2)!important;color:var(--c-ink)!important}
    .fai83-shell .fai280-tabs button.active{background:var(--c-blue)!important;
      border-color:var(--c-blue)!important;color:#fff!important}

    /* главная: один следующий шаг.
       Это ЕДИНСТВЕННАЯ тёмная карточка кабинета — акцент на одно действие,
       как .nl-plan-card на лендинге. Весь текст внутри красим светлым
       принудительно (см. блок 280.1 ниже), иначе styles.css сделает
       заголовок тёмным по тёмному. */
    .fai280-next{display:grid;gap:14px;padding:26px}
    .fai280-next h3{margin:0;font-size:clamp(22px,2.4vw,30px);line-height:1.15}
    .fai280-quiet{display:block;width:100%;margin-top:14px;padding:14px;
      border:1px solid var(--c-line);border-radius:var(--c-r);background:transparent;
      color:var(--c-ink-3);font-family:var(--c-sans);font-size:13px;font-weight:500;cursor:pointer}
    .fai280-quiet b{color:var(--c-ink);font-weight:700}
    .fai280-quiet:hover{border-color:var(--c-line-2);background:var(--c-white)}

    /* мои тренировки — список вместо полноэкранного оверлея */
    .fai280-workout-list{display:grid;gap:12px;margin:0}
    .fai280-workout-card{display:grid;grid-template-columns:minmax(0,1fr) auto auto;
      align-items:center;gap:14px;padding:18px 20px;color:var(--c-ink)}
    .fai280-workout-card b{display:block;font-family:var(--c-display);font-size:17px;
      font-weight:600;line-height:1.2}
    .fai280-workout-card small{display:block;margin-top:6px;color:var(--c-ink-3);font-size:13px}
    .fai280-workout-card .btn{min-height:46px;white-space:nowrap}
    .fai83-shell .fai280-workout-del{width:38px!important;height:38px!important;padding:0!important;
      border:1px solid transparent!important;border-radius:11px!important;background:transparent!important;
      color:var(--c-ink-3)!important;font-size:19px!important;line-height:1!important;
      box-shadow:none!important;cursor:pointer}
    .fai83-shell .fai280-workout-del:hover{background:var(--c-stone)!important;color:var(--c-bad)!important}
    .fai280-empty{display:grid;gap:10px;padding:30px 24px;margin:0;text-align:center}
    .fai280-empty b{color:var(--c-ink);font-family:var(--c-display);font-size:18px;font-weight:600}
    /* две кнопки под списком: фиксированные две колонки, а не auto-fit —
       auto-fit плодил лишние треки и кнопки прижимались к блоку выше */
    .fai280-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}

    /* питание: только вес и цель */
    .fai280-food-form{display:grid;gap:18px;padding:24px}
    .fai280-field{display:grid;gap:9px}
    .fai280-field>span{color:var(--c-ink-3);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
    .fai280-food-form input[type=number]{width:100%;min-height:56px;padding:0 16px;box-sizing:border-box;
      border:1px solid var(--c-line-2);border-radius:var(--c-r);background:var(--c-white);
      color:var(--c-ink);font-family:var(--c-display);font-size:22px;font-weight:600}
    .fai280-food-form input[type=number]:focus{outline:none;border-color:var(--c-blue);
      box-shadow:0 0 0 3px var(--c-sky)}
    .fai280-sex-link{justify-self:start;padding:6px 0;border:0;background:transparent;
      color:var(--c-ink-3);font-family:var(--c-sans);font-size:13px;font-weight:500;
      text-decoration:underline;cursor:pointer}
    .fai280-sex-link:hover{color:var(--c-blue)}
    .fai280-plan-preview{display:grid;gap:14px;padding:24px;margin-top:16px;color:var(--c-ink)}
    .fai280-plan-preview b{font-family:var(--c-display);font-size:20px;font-weight:600}
    .fai280-plan-price{color:var(--c-brass-ink);font-size:15px;font-weight:700}

    /* прогресс: что я уже сделал */
    .fai280-done-list{display:grid;gap:9px;margin-top:8px}
    .fai280-done-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
      padding:13px 16px;border:1px solid var(--c-line);border-radius:var(--c-r);
      background:var(--c-white);color:var(--c-ink)}
    .fai280-done-row i{font-style:normal;color:var(--c-good);font-size:15px;font-weight:700}
    .fai280-done-row b{font-size:14px;font-weight:700}
    .fai280-done-row small{display:block;margin-top:3px;color:var(--c-ink-3);font-size:12px}
    .fai280-done-row>span{color:var(--c-ink-3);font-size:12px;white-space:nowrap}

    @media(max-width:700px){
      .fai280-next{padding:20px}
      .fai280-workout-card{grid-template-columns:minmax(0,1fr);gap:12px}
      .fai280-workout-card .btn{width:100%}
      .fai280-food-form{padding:18px}
      .fai280-row{grid-template-columns:1fr}
    }

/* ============================================================
   280.1 СВЕТЛАЯ СХЕМА. Читать вместе с шапкой cabinet-base.css.
   Что перебиваем и каким весом:
     styles.css  html[data-theme="light"] h1,h2,h3,h4,b,strong  = (0,1,2)
     cabinet-base .fai83-shell.fai83-shell :where(h1..h6)       = (0,2,0)
     styles.css  .btn, button:not(..):not(..):not(..)           = (0,3,1)
   Поэтому цвет текста здесь — не ниже (0,3,1): префикс .fai83-shell
   плюс удвоенный собственный класс. Удвоение даёт запас и против
   <style>, который app.js инжектит рантаймом (при равном весе
   инжект выигрывает, поэтому берём вес выше, а не равный).
   ============================================================ */

/* ---------- светлые поверхности (белая карточка на --c-paper) ---------- */
.fai83-shell .card.fai280-empty.fai280-empty,
.fai83-shell .card.fai280-workout-card.fai280-workout-card,
.fai83-shell .card.fai280-food-form.fai280-food-form,
.fai83-shell .card.fai280-plan-preview.fai280-plan-preview{
  background:var(--c-white)!important;
  border:1px solid var(--c-line)!important;
  border-radius:var(--c-r-lg)!important;
  box-shadow:var(--c-shadow)!important;
  color:var(--c-ink)!important}

/* текст на светлых карточках */
.fai83-shell .fai280-empty.fai280-empty b,
.fai83-shell .fai280-workout-card.fai280-workout-card b,
.fai83-shell .fai280-plan-preview.fai280-plan-preview b{color:var(--c-ink)!important}
.fai83-shell .fai280-empty.fai280-empty p,
.fai83-shell .fai280-plan-preview.fai280-plan-preview p,
.fai83-shell .fai280-food-form.fai280-food-form p{color:var(--c-ink-2)!important}
.fai83-shell .fai280-workout-card.fai280-workout-card small{color:var(--c-ink-3)!important}
/* цена: латунь читается только на светлом, на тёмном давала ~2:1 */
.fai83-shell .fai280-plan-preview.fai280-plan-preview .fai280-plan-price{
  color:var(--c-brass-ink)!important}

/* ---------- единственная тёмная карточка: «следующий шаг» ---------- */
.fai83-shell .card.fai280-next.fai280-next{
  background:var(--c-blue)!important;
  border:1px solid transparent!important;
  border-radius:var(--c-r-lg)!important;
  box-shadow:0 30px 60px -34px rgba(47,62,92,.7)!important;
  color:#fff!important}
/* принудительно светлый текст — иначе заголовок уедет в #111611 */
.fai83-shell .card.fai280-next.fai280-next h1,
.fai83-shell .card.fai280-next.fai280-next h2,
.fai83-shell .card.fai280-next.fai280-next h3,
.fai83-shell .card.fai280-next.fai280-next h4,
.fai83-shell .card.fai280-next.fai280-next b,
.fai83-shell .card.fai280-next.fai280-next strong{color:#fff!important}
.fai83-shell .card.fai280-next.fai280-next p{color:rgba(255,255,255,.86)!important}
/* .eyebrow глобально перекрашен в фиолетовый через !important */
.fai83-shell .card.fai280-next.fai280-next .eyebrow{
  color:rgba(255,255,255,.78)!important;background:none!important;
  font-family:var(--c-sans)!important;font-size:11px!important;
  font-weight:600!important;letter-spacing:.14em!important}

/* ---------- кнопки: плоские, как .nl .btn на лендинге ---------- */
/* вес (0,4,0) — выше, чем .btn,button:not()... = (0,3,1) */
.fai83-shell .fai280-row .btn.btn,
.fai83-shell .fai280-workout-card .btn.btn,
.fai83-shell .fai280-plan-preview .btn.btn,
.fai83-shell .fai280-food-form .btn.btn{
  min-height:50px!important;padding:0 22px!important;
  border-radius:999px!important;
  background-image:none!important;
  background-color:var(--c-white)!important;
  border:1px solid var(--c-line-2)!important;
  color:var(--c-ink)!important;
  font:600 15px/1 var(--c-sans)!important;
  letter-spacing:normal!important;text-transform:none!important;
  box-shadow:none!important}
.fai83-shell .fai280-row .btn.btn:hover,
.fai83-shell .fai280-workout-card .btn.btn:hover,
.fai83-shell .fai280-plan-preview .btn.btn:hover,
.fai83-shell .fai280-food-form .btn.btn:hover{border-color:var(--c-ink)!important}
/* главное действие — заливка --c-blue, без градиента */
.fai83-shell .fai280-row .btn.btn.accent,
.fai83-shell .fai280-workout-card .btn.btn.accent,
.fai83-shell .fai280-plan-preview .btn.btn.accent,
.fai83-shell .fai280-food-form .btn.btn.accent{
  background-color:var(--c-blue)!important;border-color:var(--c-blue)!important;
  color:#fff!important}
.fai83-shell .fai280-row .btn.btn.accent:hover,
.fai83-shell .fai280-workout-card .btn.btn.accent:hover,
.fai83-shell .fai280-plan-preview .btn.btn.accent:hover,
.fai83-shell .fai280-food-form .btn.btn.accent:hover{
  background-color:var(--c-blue-2)!important;border-color:var(--c-blue)!important}
/* на тёмной карточке кнопка белая — как .nl-plan-card .btn.btn */
.fai83-shell .fai280-next .btn.btn{
  min-height:58px!important;padding:0 26px!important;
  border-radius:999px!important;
  background-image:none!important;background-color:#fff!important;
  border:1px solid transparent!important;color:var(--c-ink)!important;
  font:600 16px/1 var(--c-sans)!important;
  letter-spacing:normal!important;text-transform:none!important;
  box-shadow:none!important}
.fai83-shell .fai280-next .btn.btn:hover{background-color:var(--c-sky)!important}

/* ---------- подвал и подложка страницы ---------- */
/* footer.fai94-global-footer живёт ВНЕ .fai83-shell и оставался тёмным:
   «Поддержка — ...» давала 3.53:1. Подложка .fai83-app-page — тёмно-зелёная. */
footer.fai94-global-footer.fai94-global-footer{
  background:var(--c-paper)!important;border-top:1px solid var(--c-line)!important}
footer.fai94-global-footer.fai94-global-footer,
footer.fai94-global-footer.fai94-global-footer *{color:var(--c-ink-2)!important}
footer.fai94-global-footer.fai94-global-footer a{color:var(--c-blue)!important}
/* обёртки страницы под .fai83-shell тоже были тёмными: .fai83-app-main
   (#15171B) вылезал чёрной полосой между контентом и подвалом */
.fai83-app-page.fai83-app-page,
main.fai83-app-main.fai83-app-main{background:var(--c-paper)!important}

/* ============================================================
   280.2 МОДАЛКА РЕЦЕПТА.
   Корень проблемы — подстрочные правила styles.css:
     [class*="recipe"][class*="modal"]{background:#0D120E!important;
       border:1px solid #2B372B!important}            = (0,2,0)
     [class*="recipe-modal"]{background:#15171B!important} = (0,1,0)
   Они красят в чёрное ЛЮБОЙ узел, у которого в class есть и «recipe»,
   и «modal»: .recipe-modal-cols-v56, .recipe-modal-macros-v56,
   .recipe-macros-label-v61.modal, .recipe-modal-head-actions-v58,
   img.recipe-modal-photo-v59. cabinet-food.css покрасил текст внутри
   (h3 → --c-ink), но подложку не гасил — отсюда тёмное по тёмному.
   Гасим подложку у всех внутренних контейнеров разом, саму карточку
   .recipe-modal-v56 не трогаем (её ведёт cabinet-food.css).
   Модалка висит на document.body — префикс .fai83-shell НЕЛЬЗЯ,
   вес держим через #id и удвоенный класс оверлея.
   ============================================================ */
/* :not(button) обязателен — под маску «recipe»+«modal» попадает и
   button.recipe-heart-v58.modal, у него заливка активного состояния
   от cabinet-food.css; без исключения сердечко становится белым по белому */
#recipeModalV56 [class*="recipe"][class*="modal"]:not(.recipe-modal-v56):not(button),
.recipe-modal-overlay-v56.recipe-modal-overlay-v56 [class*="recipe"][class*="modal"]:not(.recipe-modal-v56):not(button){
  background:transparent!important;
  background-image:none!important;
  border-color:transparent!important;
  box-shadow:none!important}
/* заголовки колонок — на белом, вес (1,3,1) поверх html[data-theme=light] h3 */
#recipeModalV56 .recipe-modal-cols-v56 h3,
.recipe-modal-overlay-v56.recipe-modal-overlay-v56 .recipe-modal-cols-v56 h3{
  color:var(--c-ink)!important}
/* «УСРЕДНЁННЫЕ ЗНАЧЕНИЯ» — обычный eyebrow на белом */
#recipeModalV56 .recipe-macros-label-v61,
.recipe-modal-overlay-v56.recipe-modal-overlay-v56 .recipe-macros-label-v61{
  color:var(--c-ink-3)!important}
/* фото: пока грузится — светлая подложка, а не чёрная дыра */
#recipeModalV56 img.recipe-modal-photo-v59,
.recipe-modal-overlay-v56.recipe-modal-overlay-v56 img.recipe-modal-photo-v59{
  background:var(--c-stone)!important}

/* ---------- 280.3 чёрная полоса в карточке рецепта ----------
   styles.css кладёт на .recipe-card-top-v56 сплошной тёмный градиент
   linear-gradient(#15171B,#15171B) — это background-IMAGE, поэтому
   правки через background-color в cabinet-food.css его не снимают.
   Результат: через все карточки идёт чёрная полоса, категория на ней
   даёт 2.89:1. Гасим именно картинку. (Зона cabinet-food.css —
   если тот файл погасит градиент сам, этот блок можно удалить.) */
.fai83-shell .recipe-card-v56 .recipe-card-top-v56.recipe-card-top-v56{
  background:transparent!important;background-image:none!important;
  border-color:transparent!important;box-shadow:none!important}
.fai83-shell .recipe-card-v56 .recipe-card-top-v56.recipe-card-top-v56>span{
  color:var(--c-ink-3)!important}

/* ---------- 280.4 модалка техники: белым по белому ----------
   Обратный случай к 280.2. Карточку #fp14modal cabinet-training.css
   уже сделал светлой, но h4 и b внутри тела остались белыми от тёмной
   темы styles.css — «Основные мышцы…», «Оборудование:» и заголовок
   техники давали ровно 1.00:1, то есть не видны вовсе.
   Модалка на document.body, .fai83-shell нельзя — вес держим через #id.
   (Зона cabinet-training.css: если тот файл покрасит заголовки сам,
   этот блок можно удалить.) */
#fp14modal .fp14-modal.fp14-modal h1,
#fp14modal .fp14-modal.fp14-modal h2,
#fp14modal .fp14-modal.fp14-modal h3,
#fp14modal .fp14-modal.fp14-modal h4,
#fp14modal .fp14-modal.fp14-modal b,
#fp14modal .fp14-modal.fp14-modal strong{color:var(--c-ink)!important}
/* бейдж «ТЕХНИКА» лежит на фото — там белый текст как раз нужен */
#fp14modal .fp14-modal.fp14-modal .fai280-video-badge{color:#fff!important}

/* ============================================================
   v283 — векторные иконки профиля.
   app.js (слой v283) заменил ◍ ♡ ₽ ⚙ ⏻ ◈ × на inline-SVG
   .fai282-ic. Правила ниже задают им размер в тех контейнерах,
   где раньше стоял текстовый символ, иначе SVG берёт 20px из
   cabinet-nav.css и ломает сетку 26px / 1fr / 16px.
   ============================================================ */
.fai280-profile-btn i{display:inline-flex;align-items:center;opacity:1}
.fai280-profile-btn .fai282-ic{width:18px;height:18px;vertical-align:0;opacity:.75}
.fai280-profile-btn:hover .fai282-ic{opacity:1}

.fai280-profile-head button .fai282-ic{width:17px;height:17px;vertical-align:0;stroke-width:2}
.fai280-profile-plan i{display:inline-flex;align-items:center}
.fai280-profile-plan .fai282-ic{width:17px;height:17px;vertical-align:0}

.fai280-profile-item span:first-child{display:inline-flex;align-items:center;justify-content:center}
.fai280-profile-item span:first-child .fai282-ic{width:20px;height:20px;vertical-align:0}
.fai280-profile-item i{display:inline-flex;align-items:center}
.fai280-profile-item .fai283-chev{width:15px;height:15px;vertical-align:0;opacity:.6}

/* мобильная шапка: раньше «Меню» и «Профиль» были голым текстом */
.fai235-mobile-header .fai282-ic{width:18px;height:18px;vertical-align:0}
.fai235-menu-trigger,.fai235-profile-trigger{
  display:inline-flex!important;align-items:center;gap:7px}

/* ============================================================
   v283 — мобильная шапка в новой палитре.
   Было (v235, старый дизайн): кнопки «Меню» и «Профиль» —
   тёмно-зелёные #142619 с рамкой #416c4b, шапка с отступами
   по 14 px по бокам, из-за чего висела «карточкой».
   Стало: шапка во всю ширину экрана, «Меню» — тёмная primary
   как на лендинге, «Профиль» — светлая контурная.
   ============================================================ */
/* 1100, а не 700: с v284 шапка включается уже с 1100 px, и на
   планшете её кнопки оставались тёмно-зелёными из старой палитры */
@media (max-width:1100px){
  .fai235-mobile-header.fai235-mobile-header{
    width:100vw!important;margin-left:calc(50% - 50vw)!important;
    padding:10px 14px calc(10px + env(safe-area-inset-top,0px))!important;
    background:rgba(250,250,248,.92)!important;
    backdrop-filter:saturate(180%) blur(12px)!important;
    border-bottom:1px solid var(--c-line)!important;
    box-shadow:none!important;
  }
  .fai235-mobile-header.fai235-mobile-header .fai235-menu-trigger{
    border:1px solid var(--c-blue)!important;border-radius:999px!important;
    background:var(--c-blue)!important;color:var(--c-white)!important;
    font-family:var(--c-sans)!important;font-size:13px!important;font-weight:600!important;
    padding:0 14px!important;min-height:40px!important;
  }
  .fai235-mobile-header.fai235-mobile-header .fai235-profile-trigger{
    border:1px solid var(--c-line-2)!important;border-radius:999px!important;
    background:var(--c-white)!important;color:var(--c-ink)!important;
    font-family:var(--c-sans)!important;font-size:13px!important;font-weight:600!important;
    padding:0 14px!important;min-height:40px!important;
  }
  .fai235-mobile-header.fai235-mobile-header #fai235MobileTitle{
    font-family:var(--c-display)!important;color:var(--c-ink)!important;
    font-size:15px!important;font-weight:600!important;letter-spacing:-.01em!important;
  }
}

/* ============================================================
   v283 — мобильная шторка меню в новой палитре.
   Старые правила лежат в рантайм-<style> id="fai235-mobile-
   drawer-style" (app.js:9276+) со специфичностью (0,1,0)–(0,1,1)
   и !important, и этот <style> подключается позже наших <link>.
   Поэтому здесь всё с префиксом #fai235MenuLayer = (1,1,0)+.
   ============================================================ */
#fai235MenuLayer .fai238-menu-page{
  background:var(--c-paper)!important;color:var(--c-ink)!important;
  font-family:var(--c-sans)!important;
}
#fai235MenuLayer .fai238-menu-page header{
  background:transparent!important;border-bottom:1px solid var(--c-line)!important;
}
#fai235MenuLayer .fai238-menu-brand{color:var(--c-ink)!important;font-family:var(--c-display)!important;font-weight:600!important;letter-spacing:.14em!important}
/* логотип светлый — на бумаге не читается, даём тёмный бейдж */
#fai235MenuLayer .fai238-menu-brand img{
  border-radius:11px!important;background:var(--c-blue)!important;padding:5px!important;
}
#fai235MenuLayer .fai238-menu-page header>button{
  border:1px solid var(--c-line-2)!important;background:var(--c-white)!important;
  color:var(--c-ink)!important;border-radius:999px!important;
}
#fai235MenuLayer .fai238-menu-page header>button .fai282-ic{width:18px;height:18px;vertical-align:0;stroke-width:2}
#fai235MenuLayer .fai238-menu-page>p{color:var(--c-ink-3)!important;font-weight:600!important;letter-spacing:.1em!important}

#fai235MenuLayer .fai238-menu-item{
  border:1px solid var(--c-line)!important;background:var(--c-white)!important;
  color:var(--c-ink)!important;font-family:var(--c-sans)!important;
  font-size:16px!important;font-weight:600!important;box-shadow:none!important;
}
#fai235MenuLayer .fai238-menu-item i{
  background:var(--c-stone)!important;color:var(--c-ink-2)!important;border-radius:12px!important;
}
#fai235MenuLayer .fai238-menu-item i .fai282-ic{width:19px;height:19px;vertical-align:0;opacity:1}
#fai235MenuLayer .fai238-menu-item b{color:var(--c-ink-3)!important}
#fai235MenuLayer .fai238-menu-item b .fai282-ic{width:15px;height:15px;vertical-align:0;opacity:.6}
#fai235MenuLayer .fai238-menu-item.active{
  border-color:var(--c-blue)!important;background:var(--c-blue)!important;
  color:var(--c-white)!important;box-shadow:none!important;
}
#fai235MenuLayer .fai238-menu-item.active i{background:rgba(255,255,255,.14)!important;color:var(--c-white)!important}
#fai235MenuLayer .fai238-menu-item.active b{color:rgba(255,255,255,.7)!important}

/* «Профиль» в шапке был подчёркнут — наследовал text-decoration */
.fai235-profile-trigger,.fai235-menu-trigger{text-decoration:none!important}

/* ============================================================
   v284 — раскладка ниже 1100 px.
   Рантайм-стиль app.js:9230 прячет .fai235-mobile-header и
   показывает её только в @media(max-width:700px) — это (0,1,0)
   в inline-<style>, то есть позже наших <link>. Поэтому здесь
   префикс .fai109-app-only = (0,2,0).
   ============================================================ */
@media (max-width:1100px){
  /* сайдбар в этой ширине превращался в столбец на весь экран,
     а контент уезжал под него — убираем совсем */
  .fai83-shell.fai83-shell>.sidebar{display:none!important}

  .fai109-app-only .fai235-mobile-header{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    align-items:center!important;gap:10px!important;
    position:sticky!important;top:0!important;z-index:50!important;
  }
  /* бургер не нужен: он вёл в те же 5 разделов, что и нижняя
     панель, а «Профиль» есть в шапке справа */
  .fai109-app-only .fai235-mobile-header .fai235-menu-trigger{display:none!important}
  .fai109-app-only .fai235-mobile-header{grid-template-columns:minmax(0,1fr) auto!important}

  /* Внутреннее оформление шапки в рантайм-стиле объявлено только
     внутри @media(max-width:700px). Мы показываем шапку с 1100,
     поэтому в зазоре 700–1100 логотип растягивался на пол-экрана,
     а заголовок уезжал. Задаём размеры сами. */
  .fai109-app-only .fai235-mobile-brand{
    display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important;
  }
  .fai109-app-only .fai235-mobile-brand img{
    width:32px!important;height:32px!important;flex:0 0 32px!important;
    object-fit:contain!important;padding:4px!important;box-sizing:border-box!important;
    /* графика логотипа светлая — на бумаге не читается, даём плашку */
    background:var(--c-blue)!important;border-radius:10px!important;
  }
  .fai109-app-only .fai235-mobile-header #fai235MobileTitle{
    overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  }

  /* фиксированная кнопка «Профиль» в правом верхнем углу — она для
     десктопа; в шапке уже есть своя, иначе их видно две сразу */
  .fai280-profile-btn{display:none!important}

  /* контент не должен прятаться за нижней панелью */
  .fai83-shell.fai83-shell>.main{
    padding-bottom:calc(92px + env(safe-area-inset-bottom))!important;
  }

  /* старая нижняя навигация из app.js:2622 — 4 вкладки со
     старыми id разделов, заменена на .fai284-nav */
  nav.fitai-mobile-nav.fitai-mobile-nav{display:none!important}
}

/* ---------- нижняя панель разделов ----------
   ЛОВУШКА: styles.css:3808 прячет вообще любую навигацию на
   верхнем уровне — `body>nav:not(.navlinks):not(.fai82-nav)
   {display:none!important}` = (0,3,1). Панель молча не
   показывалась. Поэтому селектор с запасом по специфичности. */
body>nav.fai284-nav{display:none}
@media (max-width:1100px){
  body>nav.fai284-nav.fai284-nav.fai284-nav.fai284-nav{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    position:fixed;left:0;right:0;bottom:0;z-index:9000;
    gap:2px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:rgba(250,250,248,.94);
    border-top:1px solid var(--c-line);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
  }
  /* класс троим: перебиваем `button:not(.exercise-heart)
     :not(.check):not(.modal-close)` = (0,3,1) из styles.css */
  .fai284-nav.fai284-nav.fai284-nav button{
    display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:center!important;
    gap:4px!important;min-height:56px!important;padding:7px 2px!important;
    border:1px solid transparent!important;border-radius:15px!important;
    background:transparent!important;color:var(--c-ink-3)!important;
    font-family:var(--c-sans)!important;box-shadow:none!important;
    cursor:pointer!important;
    transition:background .18s ease,color .18s ease!important;
  }
  .fai284-nav.fai284-nav.fai284-nav button i{
    display:grid!important;place-items:center!important;
    width:22px!important;height:22px!important;font-style:normal!important;
  }
  .fai284-nav .fai282-ic{width:21px;height:21px;vertical-align:0;opacity:1}
  .fai284-nav.fai284-nav.fai284-nav button small{
    font-size:10.5px!important;font-weight:500!important;
    line-height:1!important;white-space:nowrap!important;color:inherit!important;
  }
  .fai284-nav.fai284-nav.fai284-nav button.active{
    background:var(--c-blue)!important;color:#fff!important;
    border-color:transparent!important;font-weight:600!important;
  }
  .fai284-nav.fai284-nav.fai284-nav button:focus-visible{
    outline:2px solid var(--c-blue-3)!important;outline-offset:-2px!important;
  }
}

/* Кнопка Telegram в подвале (.fai94-tg-mini, app.js:fai94Telegram):
   белый SVG на белом круге — выглядела пустым кружком. */
.fai94-footer-right .fai94-tg-mini{
  display:grid!important;place-items:center!important;
  width:34px!important;height:34px!important;
  border:1px solid var(--c-line-2)!important;border-radius:50%!important;
  background:var(--c-white)!important;color:var(--c-ink-2)!important;
  box-shadow:none!important;cursor:pointer!important;
}
.fai94-footer-right .fai94-tg-mini:hover{
  border-color:var(--c-blue)!important;color:var(--c-blue)!important;
}
.fai94-footer-right .fai94-tg-mini svg{width:17px!important;height:17px!important}
.fai94-footer-right .fai94-tg-mini svg path{fill:currentColor!important}