/* Новогодние разделы: фон шапки, снег, строка подбора, вкладки форматов.
   Файл, а не блок <style> в странице, по одной причине: сайт ходит через
   hx-boost, который подменяет только <body>. Стили из <head> новой страницы
   при переходе по ссылке не применяются — герой белеет, снег сыплется
   в поток, вкладки теряют фон. Ссылка в общей шапке живёт всё время. */

    /* ═══ МИКС: новогодний фон под геройским блоком ═══
       Разметку героя не трогаем вообще — перекрашиваем через вложенные
       селекторы. Классы тут работают как обычные CSS-имена, а специфичность
       «.ng-hero .text-textMain» выше одиночного класса, поэтому цвета
       перебиваются без правки ни одного тега. */
    .ng-hero{position:relative;overflow:hidden;
      background:linear-gradient(135deg,#101A3A 0%,#1C2A5C 55%,#0B1228 100%);}
    .ng-hero .text-textMain{color:#FFFFFF;}
    .ng-hero .text-textSec{color:rgba(255,255,255,.62);}
    .ng-hero .border-stroke{border-color:rgba(255,255,255,.16);}
    /* bg-white в этих шапках — это плашки и пилюли, им идёт полупрозрачность.
       Настоящие карточки набраны на bg-bgCard и bg-bgPage: они остаются
       непрозрачно светлыми, поэтому текст в них перекрашивать нельзя. */
    .ng-hero .bg-white{background-color:rgba(255,255,255,.10);}
    .ng-hero .bg-bgCard .text-textMain,
    .ng-hero .bg-bgPage .text-textMain{color:#0F1115;}
    .ng-hero .bg-bgCard .text-textSec,
    .ng-hero .bg-bgPage .text-textSec{color:#6E7178;}
    .ng-hero .bg-bgCard.border-stroke,
    .ng-hero .bg-bgPage.border-stroke,
    .ng-hero .bg-bgCard .border-stroke,
    .ng-hero .bg-bgPage .border-stroke{border-color:#E6E7EB;}
    .ng-hero .hero-bg::before{background:radial-gradient(ellipse 60% 50% at 20% 60%,rgba(255,79,0,.14),transparent),radial-gradient(ellipse 50% 40% at 80% 30%,rgba(120,160,255,.16),transparent);}
    .ng-hero .shadow-sm{box-shadow:none;}

    /* ═══ СНЕЖИНКИ ═══
       Только CSS: два десятка span'ов с падением по своей траектории.
       pointer-events:none, чтобы снег не перехватывал клики по строке поиска. */
    .snow{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;}
    .snow i{position:absolute;top:-8%;color:#fff;opacity:.55;
      animation:snow-fall linear infinite;text-shadow:0 0 6px rgba(255,255,255,.5);}
    @keyframes snow-fall{
      0%{transform:translate3d(0,-10vh,0) rotate(0deg);opacity:0;}
      10%{opacity:.6;}
      90%{opacity:.5;}
      100%{transform:translate3d(var(--dx,20px),110vh,0) rotate(320deg);opacity:0;}
    }
    /* Снег отключаем тем, кто просил меньше движения в системе. */
    @media (prefers-reduced-motion: reduce){ .snow{display:none;} }

    /* ═══ СТРОКА ПОДБОРА ═══ */
    .ng-search{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
      border-radius:24px;padding:20px;max-width:56rem;margin:0 auto;}
    @media (min-width:768px){ .ng-search{padding:24px;} }
    .ng-chip{padding:8px 16px;border-radius:14px;background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.20);color:rgba(255,255,255,.85);
      font-size:14px;font-weight:700;transition:background .2s ease;text-decoration:none;}
    .ng-chip:hover{background:rgba(255,255,255,.20);}
    .ng-chip--accent{background:#FF4F00;border-color:#FF4F00;color:#fff;font-weight:800;}
    .ng-chip--accent:hover{background:#E64700;}

    /* Переключатель признака в форме подбора. Настоящий чекбокс спрятан под
       плашку: так он работает с клавиатуры и уходит с формой без скриптов. */
    .ng-tog input{position:absolute;opacity:0;width:0;height:0;}
    .ng-tog span{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:14px;
      background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
      color:rgba(255,255,255,.85);font-size:14px;font-weight:700;cursor:pointer;transition:all .18s;}
    .ng-tog span:hover{background:rgba(255,255,255,.20);}
    .ng-tog input:checked + span{background:#FF4F00;border-color:#FF4F00;color:#fff;font-weight:800;}
    .ng-tog input:focus-visible + span{outline:3px solid #fff;outline-offset:2px;}

    /* ═══ ВКЛАДКИ ФОРМАТОВ ═══ */
    .fmt-tab{flex:1 1 220px;min-width:220px;border-radius:24px 24px 0 0;padding:16px 24px;
      border:1px solid rgba(255,255,255,.15);border-bottom:0;background:rgba(255,255,255,.08);
      transition:background .2s ease;text-decoration:none;display:block;}
    /* Четыре вкладки в ряд помещаются до 1024px включительно. Ниже базис
       в 220px даёт 3+1, и одинокая четвёртая распирается на всю строку —
       поэтому на планшете кладём их сеткой 2+2, а на телефоне по одной. */
    @media (max-width:1023px){ .fmt-tab{flex:1 1 calc(50% - 4px);min-width:0;} }
    @media (max-width:520px){ .fmt-tab{flex:1 1 100%;} }
    .fmt-tab:hover{background:rgba(255,255,255,.18);}
    .fmt-tab.is-active{background:#F0F0F2;border-color:#F0F0F2;}
    .fmt-tab .fmt-name{font-weight:900;font-size:17px;color:#fff;display:flex;align-items:center;gap:8px;}
    .fmt-tab .fmt-sub{font-size:14px;font-weight:700;color:rgba(255,255,255,.55);margin-top:2px;}
    .fmt-tab.is-active .fmt-name{color:#0F1115;}
    .fmt-tab.is-active .fmt-sub{color:#6E7178;}

    /* Светлый вариант — для страниц без тёмной шапки: вкладки становятся
       обычными карточками на фоне страницы, активная — тёмной, как
       «.tab-nav a.active» в кабинете, чтобы не заводить третий стиль. */
    .fmt-tabs-light .fmt-tab{border-radius:20px;border:1px solid #E6E7EB;border-bottom:1px solid #E6E7EB;
      background:#FFFFFF;}
    .fmt-tabs-light .fmt-tab:hover{background:#F7F7F9;}
    .fmt-tabs-light .fmt-tab .fmt-name{color:#0F1115;}
    .fmt-tabs-light .fmt-tab .fmt-sub{color:#6E7178;}
    .fmt-tabs-light .fmt-tab.is-active{background:#0F1115;border-color:#0F1115;}
    .fmt-tabs-light .fmt-tab.is-active .fmt-name{color:#FFFFFF;}
    .fmt-tabs-light .fmt-tab.is-active .fmt-sub{color:rgba(255,255,255,.6);}
