/* ================================================================
     ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ И БАЗОВЫЕ СТИЛИ
     Цвета продублированы в RGB-компонентах для использования в rgba()
     — так мы получаем оттенки и прозрачность, не выходя за рамки
     утверждённой палитры (никаких новых HEX-значений).
     ================================================================ */
  :root{
    --primary: 102 8 16;   /* #660810 */
    --accent:  129 1 0;    /* #810100 */
    --ink:     39 7 7;     /* #270707 */
    --canvas:  250 248 245;/* #FAF8F5 */
    --ease-premium: cubic-bezier(.16,.8,.24,1);
  }

  html{ scroll-behavior: smooth; }

  body{
    background-color: #FAF8F5;
  }

  ::selection{ background:#660810; color:#FAF8F5; }

  /* Тонкий фирменный скроллбар (WebKit) */
  ::-webkit-scrollbar{ width:11px; height:11px; }
  ::-webkit-scrollbar-track{ background:#FAF8F5; }
  ::-webkit-scrollbar-thumb{ background:rgba(102,8,16,0.35); border:3px solid #FAF8F5; border-radius:8px; }
  ::-webkit-scrollbar-thumb:hover{ background:rgba(102,8,16,0.6); }

  /* Блок 7 (ТЗ, раздел 10: «видимый фокус на тёмном»): базовый акцентный контур (#810100) почти не
     виден на тёмных фонах сайта (#270707 в подвале, мобильном меню, шапке-плашке и т. д.) — акцент и
     тёмный фон слишком близки по яркости. Раньше это чинилось точечно, классом .on-dark на отдельных
     секциях (см. ниже) — но подвал и мобильное меню такой класс не получили и остались без видимого
     фокуса. Вместо точечных классов — один общий, работающий везде: доп. кольцо цвета canvas (кремовый)
     чуть шире акцентного контура. На светлом фоне это кольцо того же цвета, что и фон — сливается,
     незаметно (как и было). На тёмном фоне кольцо становится видимым светлым контуром вокруг элемента.
     Правило ничего не меняет в обычном (нефокусном) виде страниц — на скриншотах пиксельного сравнения
     это никак не сказывается. */
  :focus-visible{ outline:2px solid #810100; outline-offset:3px; }

  /* Блок 7 (ТЗ, раздел 10: «ссылка «Перейти к содержимому»») — первая по табу ссылка на странице,
     невидима, пока не получит фокус с клавиатуры; тогда выезжает в верхний левый угол. Ведёт на
     <main id="main"> (эта разметка уже была). Не влияет на обычный вид страниц — как и фокус выше. */
  .skip-link{
    position:fixed; top:-4rem; left:1rem; z-index:200;
    background:rgb(var(--ink)); color:rgb(var(--canvas));
    padding:.75rem 1.25rem; font-size:.875rem; font-weight:500;
    transition:top .2s var(--ease-premium);
  }
  .skip-link:focus{ top:1rem; }

  /* Блок 7 (ТЗ, раздел 10: «чуть темнее слабый серый текст»). Самые слабые уровни прозрачности
     text-ink/35..55 и text-canvas/40..45 (подписи, метки, второстепенные подписи по всему сайту) дают
     контраст 2.3–4.2:1 — ниже нормы WCAG AA (4.5:1 для обычного текста). Сдержанный сдвиг на 10
     процентных пунктов (относительный порядок уровней сохранён, просто всё чуть плотнее) — контраст
     ощутимо лучше, а внешне разница едва заметна, как и просил заказчик; полная гарантия нормы для
     самых слабых уровней потребовала бы заметно более тёмного текста (это отдельно обсуждалось и не
     выбрано). Правило — здесь, а не в самом tailwind.css: site.css подключается вторым (после
     tailwind.css, см. base.html), поэтому те же классы здесь побеждают по порядку подключения, без
     необходимости трогать сгенерированный файл.
       text-ink/35     → фактически .45  (было 2.29:1 → стало 3.05:1)
       text-ink/40     → фактически .50  (было 2.64:1 → стало 3.56:1)
       text-ink/45     → фактически .55  (было 3.05:1 → стало 4.19:1)
       text-ink/50     → фактически .60  (было 3.56:1 → стало 4.96:1 — норма)
       text-ink/55     → фактически .65  (было 4.19:1 → стало 5.90:1 — норма;
                          совпало со значением text-ink/65 — так и задумано)
       text-canvas/40  → фактически .50  (было 3.57:1 → стало 4.96:1 — норма)
       text-canvas/45  → фактически .55  (было 4.22:1 → стало 5.79:1 — норма) */
  .text-ink\/35{ color:rgba(39,7,7,.45); }
  .text-ink\/40{ color:rgba(39,7,7,.50); }
  .text-ink\/45{ color:rgba(39,7,7,.55); }
  .text-ink\/50{ color:rgba(39,7,7,.60); }
  .text-ink\/55{ color:rgba(39,7,7,.65); }
  .text-canvas\/40{ color:hsla(36,33%,97%,.50); }
  .text-canvas\/45{ color:hsla(36,33%,97%,.55); }

  /* ================================================================
     ПЕРЕКЛЮЧЕНИЕ "СТРАНИЦ" (SPA-имитация многостраничности)
     ================================================================ */
  .page{ animation: pageIn .7s var(--ease-premium) both; }
  .page.is-hidden{ display:none; }
  @keyframes pageIn{
    from{ opacity:0; transform:translateY(18px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* ================================================================
     SCROLL-REVEAL (Intersection Observer добавляет .in-view)
     ================================================================ */
  .reveal{
    opacity:0; transform:translateY(32px);
    transition:opacity .9s var(--ease-premium), transform .9s var(--ease-premium);
    transition-delay: var(--d,0ms);
  }
  .reveal.in-view{ opacity:1; transform:translateY(0); }

  .reveal-l{ opacity:0; transform:translateX(-28px); transition:opacity .9s var(--ease-premium), transform .9s var(--ease-premium); transition-delay:var(--d,0ms); }
  .reveal-l.in-view{ opacity:1; transform:translateX(0); }

  .reveal-scale{ opacity:0; transform:scale(.92); transition:opacity .8s var(--ease-premium), transform .8s var(--ease-premium); transition-delay:var(--d,0ms); }
  .reveal-scale.in-view{ opacity:1; transform:scale(1); }

  /* ================================================================
     ССЫЛКИ С "РАСКРЫВАЮЩЕЙСЯ" ПОДЧЁРКИВАЮЩЕЙ ЛИНИЕЙ
     ================================================================ */
  .link-hover{ position:relative; }
  .link-hover::after{
    content:''; position:absolute; left:0; bottom:-3px; width:100%; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:right;
    transition:transform .5s var(--ease-premium);
  }
  .link-hover:hover::after, .link-hover.is-active::after{ transform:scaleX(1); transform-origin:left; }

  /* ================================================================
     КНОПКИ: заполненная (primary) и контурная с "раскрывающейся рамкой"
     ================================================================ */
  .btn-fill{
    position:relative; overflow:hidden; transition:transform .45s var(--ease-premium), background-color .45s var(--ease-premium);
  }
  .btn-fill:hover{ transform:translateY(-3px); }
  .btn-fill:active{ transform:translateY(-1px); }

  .btn-frame{ position:relative; }
  .btn-frame::after{
    content:''; position:absolute; inset:0; border:1px solid currentColor;
    transform:scale(.86); opacity:0;
    transition:transform .5s var(--ease-premium), opacity .5s var(--ease-premium);
  }
  .btn-frame:hover::after{ transform:scale(1); opacity:1; }
  .btn-frame:hover{ transform:translateY(-2px); }
  .btn-frame{ transition:transform .5s var(--ease-premium); }

  /* ================================================================
     КАРТОЧКИ: приподнимаются и мягко подсвечиваются при наведении
     ================================================================ */
  .card-lift{ transition:transform .55s var(--ease-premium), border-color .4s ease; }
  .card-lift:hover{ transform:translateY(-7px); border-color:rgba(102,8,16,0.35); }

  /* ================================================================
     АККОРДЕОН (grid-template-rows 0fr → 1fr — корректная плавная
     анимация высоты независимо от объёма контента, без "рывка")
     ================================================================ */
  .acc-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease-premium); }
  .acc-item.is-open .acc-wrap{ grid-template-rows:1fr; }
  /* Нижний отступ pb-7 не давал закрытой карточке сжаться до 0 (28px содержимого «выглядывали»).
     Отступ перенесён на последний элемент — в закрытом состоянии высота теперь ровно 0. */
  .acc-inner{ overflow:hidden; padding-bottom:0; }
  .acc-inner > :last-child{ margin-bottom:1.75rem; }
  .acc-chevron{ transition:transform .5s var(--ease-premium); }
  @media (prefers-reduced-motion:reduce){ .acc-chevron{ transition-duration:.01s; } }
  .acc-item.is-open .acc-chevron{ transform:rotate(180deg); }

  /* ================================================================
     ПЛАШКА «ПРИСОЕДИНИТЬСЯ» (низ страницы «Сектора и клубы»)
     Правка 7: раньше держалась на классах p-10/md:p-14/gap-8/md:text-3xl/
     max-w-lg, которых нет в предсобранном tailwind.css — у плашки были
     нулевые отступы и растянутая на всю высоту кнопка. Вынесено в
     отдельный класс с явными значениями (совпадают с шагом Tailwind:
     2rem/2.5rem, 1.25rem/1.5rem) + герб-водяной знак тем же приёмом,
     что и .ev-featured__crest выше — но крест лежит первым в разметке,
     а текст и кнопка получают position:relative, чтобы отрисоваться
     поверх него (иначе позиционированный крест лёг бы поверх обычного
     потока, см. порядок отрисовки в CSS2.1 Appendix E).
     ================================================================ */
  .join-cta{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:1.25rem; padding:2rem; }
  @media (min-width:768px){
    .join-cta{ flex-direction:row; align-items:center; justify-content:space-between; gap:1.5rem; padding:2.5rem; }
  }
  .join-cta__crest{ position:absolute; right:-2.5rem; bottom:-4rem; width:13rem; height:auto; color:rgb(var(--canvas) / .06); pointer-events:none; }
  .join-cta__body, .join-cta__action{ position:relative; }
  .join-cta__desc{ max-width:32rem; }

  /* ================================================================
     ЗНАЧОК «ЕСТЬ НЕОБРАБОТАННОЕ» (раздел управления, Правка 8)
     Колокольчик + число — вариант B из предпросмотра-артефакта (значок
     на кружке-кнопке отклонён заказчиком). По умолчанию — плашка в углу
     карточки (карточка должна быть position:relative — см. .pending-host
     ниже); модификатор --inline — та же плашка обычным строчным
     элементом рядом с текстом (кнопка «Раздел управления» в кабинете).
     Число берётся из app/services/pending.py — считает только то, что
     реально ждёт решения текущего пользователя (право+статус), а не
     любые записи вообще.
     ================================================================ */
  .pending-host{ position:relative; }
  .pending-badge{
    position:absolute; top:1.1rem; right:1.1rem; display:inline-flex; align-items:center; gap:5px;
    padding:4px 10px 4px 7px; border-radius:999px; background:rgb(var(--primary) / .07);
    border:1px solid rgb(var(--primary) / .22); color:rgb(var(--primary)); font-size:12px; font-weight:600;
    line-height:1.1;
  }
  .pending-badge svg{ width:13px; height:13px; flex-shrink:0; }
  .pending-badge--inline{ position:static; margin-left:10px; }

  /* ================================================================
     БЕГУЩАЯ СТРОКА СОБЫТИЙ (marquee)
     ================================================================ */
  @keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
  .ticker-track{ display:flex; width:max-content; animation:marquee 42s linear infinite; }
  .ticker-track.is-paused{ animation-play-state:paused; }
  /* Не даём бегущей строке вообще запуститься, если у человека включено «уменьшить движение»
     в системе — это системная настройка, отдельная кнопка ниже не нужна ей в замену. */
  @media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } }

  /* Блок 7 (ТЗ, раздел 10: «пауза бегущей строки»). Раньше строка ставилась на паузу только наведением
     мыши — клавиатурой и на телефоне поставить на паузу было нечем. Кнопка — новый элемент, которого
     нет в статичном макете (там бегущая строка декоративная и не участвует в пиксельном сравнении в
     виде отдельного элемента управления) — раскрыто в PROGRESS.md вместе с остальными отличиями. */
  .ticker-pause{
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:2.25rem; height:2.25rem; margin-left:.25rem;
    color:rgb(var(--canvas) / .75); border-left:1px solid rgb(var(--canvas) / .2);
  }
  .ticker-pause:hover{ color:rgb(var(--canvas)); }
  .ticker-pause svg{ width:1rem; height:1rem; }
  .ticker-pause .icon-play{ display:none; }
  .ticker-pause.is-paused .icon-pause{ display:none; }
  .ticker-pause.is-paused .icon-play{ display:block; }

  /* ================================================================
     PRELOADER — печать фирменной печати
     ================================================================ */
  #loader{
    position:fixed; inset:0; z-index:100; background:#270707;
    display:flex; align-items:center; justify-content:center;
    transition:opacity .8s ease, visibility .8s ease;
  }
  #loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
  .crest-stamp{ opacity:0; transform:scale(1.5); filter:blur(6px); animation:sealStamp 1.1s var(--ease-premium) forwards; animation-delay:.15s; }
  @keyframes sealStamp{ 0%{opacity:0; transform:scale(1.5); filter:blur(6px);} 65%{opacity:1; transform:scale(.94); filter:blur(0);} 100%{opacity:1; transform:scale(1); filter:blur(0);} }
  .loader-word{ opacity:0; transform:translateY(10px); animation:fadeUp .8s var(--ease-premium) forwards; animation-delay:1.05s; }
  @keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }

  /* ================================================================
     ПАНЕЛЬ РЕЙТИНГА — заполнение полосы прогресса
     ================================================================ */
  .progress-fill{ width:0%; transition:width 1.7s var(--ease-premium); }

  /* ================================================================
     TOAST-УВЕДОМЛЕНИЯ
     ================================================================ */
  #toast-region{ position:fixed; bottom:1.25rem; right:1.25rem; z-index:90; display:flex; flex-direction:column; gap:.6rem; width:min(360px,calc(100vw - 2rem)); }
  .toast{ opacity:0; transform:translateY(14px) scale(.97); transition:opacity .45s var(--ease-premium), transform .45s var(--ease-premium); }
  .toast.is-shown{ opacity:1; transform:translateY(0) scale(1); }

  /* ================================================================
     УВЕДОМЛЕНИЯ О ДОСТИЖЕНИЯХ («Карточка+» — согласовано с заказчиком на предпросмотре, см.
     PROGRESS.md, раздел «Уведомления о достижениях»; логика показа/очереди — app/static/js/achv-toast.js).
     Сверху по центру, чтобы не путать с обычными toast (те — снизу справа, см. выше). top:96px —
     запас чуть больше высоты шапки в обычном виде (h-20=80px), с которым карточка не наезжает на шапку
     даже пока JS ещё не сжал её при прокрутке (initHeaderScroll в app.js, h-20 → h-16).
     ================================================================ */
  #achv-region{ position:fixed; top:108px; left:50%; transform:translateX(-50%); z-index:95;
    display:flex; flex-direction:column; align-items:center; gap:.6rem;
    width:min(400px,calc(100vw - 2rem)); pointer-events:none; }
  #achv-region > *{ pointer-events:auto; width:100%; }

  .toast-cardplus{
    position:relative; width:100%; background:rgb(var(--canvas));
    border:1px solid rgba(var(--ink)/.25); border-radius:0;
    padding:18px 20px 16px; display:flex; align-items:center; gap:14px;
    overflow:hidden; opacity:0; transform:translateY(-28px) scale(.94); perspective:600px;
  }
  .toast-cardplus.is-shown{ animation:cardRise .6s var(--ease-premium) both; }
  .toast-cardplus.is-leaving{
    transition:opacity .38s ease-in, transform .38s ease-in;
    opacity:0; transform:translateY(-10px) scale(.97);
  }
  .tcard-close{ position:absolute; top:0; right:0; width:40px; height:40px; display:flex;
    align-items:center; justify-content:center; color:rgba(var(--ink)/.35); background:none; border:0;
    cursor:pointer; transition:color .25s var(--ease-premium); }
  .tcard-close:hover{ color:rgba(var(--ink)/.7); }
  .tcard-close svg{ width:13px; height:13px; stroke:currentColor; stroke-width:1.8; fill:none; }
  .tcard-shimmer{ position:absolute; top:0; bottom:0; left:0; width:55px;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    transform:translateX(-160%) skewX(-16deg); opacity:0; pointer-events:none; }
  .toast-cardplus.is-shown .tcard-shimmer{ animation:shimmerSweep 1.1s ease-out .5s both; }
  .tcard-icon-wrap{ position:relative; flex-shrink:0; width:46px; height:46px; display:flex;
    align-items:center; justify-content:center; transform-style:preserve-3d; }
  .tcard-glow{ position:absolute; inset:-8px; border-radius:50%;
    background:radial-gradient(circle, var(--tier-color) 0%, transparent 70%); opacity:0; filter:blur(2px); }
  .toast-cardplus.is-shown .tcard-glow{ animation:glowPulse 1s ease-out .1s both; }
  .tcard-ring{ position:absolute; inset:-6px; width:58px; height:58px; transform:rotate(-90deg); }
  .tcard-ring circle{ fill:none; stroke-width:2; }
  .tcard-ring .ring-bg{ stroke:rgba(var(--ink)/.08); }
  .tcard-ring .ring-fg{ stroke:var(--tier-color); stroke-linecap:round; stroke-dasharray:151; stroke-dashoffset:0; }
  .tcard-ring .ring-fg.run{ transition:stroke-dashoffset linear var(--achv-duration,4.2s); }
  .tcard-icon{ position:relative; z-index:1; color:var(--tier-color); transform:rotateY(-110deg) scale(.5); opacity:0; }
  .toast-cardplus.is-shown .tcard-icon{ animation:iconFlip .65s var(--ease-premium) .1s both; }
  .tcard-icon svg{ width:26px; height:26px; }
  .tcard-icon img{ width:26px; height:26px; border-radius:50%; }
  .achv-body{ min-width:0; }
  .achv-eyebrow{ font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--tier-color);
    font-weight:600; margin:0 0 3px; }
  .achv-eyebrow-tier{ opacity:.6; font-weight:500; }
  .achv-title{ font-family:"Playfair Display",Georgia,serif; font-size:17px; line-height:1.25; margin:0 0 3px;
    color:rgb(var(--ink)); }
  .achv-desc{ font-size:12.5px; line-height:1.45; color:rgba(var(--ink)/.55); margin:0; }

  @keyframes cardRise{
    0%   { transform:translateY(-28px) scale(.94); opacity:0; }
    60%  { transform:translateY(3px) scale(1.012); opacity:1; }
    100% { transform:translateY(0) scale(1); opacity:1; }
  }
  @keyframes shimmerSweep{
    0%{ transform:translateX(-160%) skewX(-16deg); opacity:0; }
    18%{ opacity:.6; } 55%{ opacity:.6; }
    100%{ transform:translateX(260%) skewX(-16deg); opacity:0; }
  }
  @keyframes glowPulse{
    0%{ transform:scale(.5); opacity:0; } 45%{ opacity:.55; } 100%{ transform:scale(1.7); opacity:0; }
  }
  @keyframes iconFlip{
    0%{ transform:rotateY(-110deg) scale(.5); opacity:0; }
    60%{ transform:rotateY(18deg) scale(1.08); opacity:1; }
    100%{ transform:rotateY(0deg) scale(1); opacity:1; }
  }

  /* ================================================================
     МОБИЛЬНОЕ МЕНЮ
     ================================================================ */
  #mobile-menu{ transition:opacity .5s var(--ease-premium), visibility .5s var(--ease-premium); }
  #mobile-menu.is-closed{ opacity:0; visibility:hidden; pointer-events:none; }
  #mobile-menu .mm-link{ opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease-premium), transform .5s var(--ease-premium); }
  #mobile-menu:not(.is-closed) .mm-link{ opacity:1; transform:translateY(0); }

  /* ================================================================
     ГЛАВНЫЕ СОБЫТИЯ (Главная): ближайшее событие + афиша + недавние.
     ---------------------------------------------------------------
     Один компонент вместо трёх прежних (бенто-анонс, лента «Мероприятия
     в лицах», плитки-маркиза). Язык общий с остальным сайтом: квадратные
     углы, hairline-границы 1px, Playfair для заголовков, палитра только из
     токенов :root. Карточка события повторяет анатомию .event-card со
     страницы «Мероприятия» (метка сектора → серифный заголовок → мета →
     подвал с баллами), поэтому здесь описано лишь то, чего нет в
     Tailwind-сборке: сетка, список фактов и слот под фото.
     ================================================================ */
  .ev-section :is(h2,h3,h4){ text-wrap:balance; }
  .ev-section :is(p,li,dd){ text-wrap:pretty; }

  /* Два столбца на десктопе (ближайшее — шире), одна колонка ниже 1024px */
  .ev-main{ display:grid; gap:1.5rem; }
  @media (min-width:1024px){ .ev-main{ grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:2rem; } }

  /* Тёмная панель ближайшего события. Водяной знак герба — тот же приём,
     что в hero. Фокус-контур на тёмном фоне светлый: глобальный акцентный
     (#810100) на #270707 почти не виден. */
  .ev-featured{ position:relative; overflow:hidden; }
  .ev-featured__crest{ position:absolute; right:-3.5rem; bottom:-4.5rem; width:16rem; height:auto; color:rgb(var(--canvas) / .06); pointer-events:none; }
  .ev-featured :focus-visible{ outline-color:rgb(var(--canvas)); }

  /* Факты о событии: <dl>, 2 колонки на телефоне, 3 — от 640px */
  .ev-facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid rgb(var(--canvas) / .18); }
  .ev-facts > div{ padding:1rem 1rem 1rem 0; border-bottom:1px solid rgb(var(--canvas) / .18); }
  @media (min-width:640px){ .ev-facts{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

  /* Строка списка «Далее в афише»: дата слева, описание справа */
  .ev-row{ display:grid; grid-template-columns:4.25rem minmax(0,1fr); column-gap:1rem; align-items:start; padding-block:1.25rem; }

  /* Слот под фото прошедшего мероприятия. Пока кадров нет — цветная
     заглушка с гербом (как фото-заглушка председателя). Когда появятся
     реальные снимки: положите <img alt="…"> первым ребёнком .ev-photo,
     уберите герб, подпись .ev-photo__note и aria-hidden с контейнера. */
  .ev-photo{ position:relative; aspect-ratio:4 / 3; overflow:hidden; display:flex; align-items:flex-end; padding:1rem 1.25rem; background:rgb(var(--ink)); color:rgb(var(--canvas)); }
  .ev-photo--primary{ background:rgb(var(--primary)); }
  .ev-photo--accent{ background:rgb(var(--accent)); }
  .ev-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .ev-photo__crest{ position:absolute; top:50%; left:50%; width:26%; height:auto; transform:translate(-50%,-50%); color:rgb(var(--canvas) / .14); }
  .ev-photo__note{ position:relative; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgb(var(--canvas) / .65); }

  /* ================================================================
     ПРОЧИЕ УТИЛИТЫ
     ================================================================ */
  .eyebrow{ letter-spacing:.28em; }
  .tick-underline{ background-image:linear-gradient(currentColor,currentColor); background-size:0% 1px; background-repeat:no-repeat; background-position:left bottom; transition:background-size .5s var(--ease-premium); }
  .tick-underline:hover{ background-size:100% 1px; }
  .hairline{ border-color:rgba(39,7,7,0.12); }
  .header-shadow{ border-bottom:1px solid rgba(39,7,7,0.14); }

  /* Плитка «Не нашли, что искали?» на всю ширину сетки быстрых ссылок */
  .qs-wide{ grid-column:1 / -1; }

  /* ================================================================
     ШАПКА: шесть пунктов меню + логотип + кнопка не помещаются в контейнер
     (он ограничен 1200px), поэтому полная навигация показывается от 1280px,
     ниже — бургер. Пункты и логотип не переносятся (nowrap / shrink-0).
     Суммарная ширина навигации не больше прежней (5 пунктов, 15px, gap 2.25rem).
     ================================================================ */
  .brand-link{ flex-shrink:0; white-space:nowrap; }
  .main-nav{ display:none; align-items:center; gap:1.5rem; font-size:14px; white-space:nowrap; }
  .header-cta{ display:none; align-items:center; gap:.75rem; white-space:nowrap; flex-shrink:0; }
  .header-burger{ display:flex; }
  @media (min-width:1280px){
    .main-nav, .header-cta{ display:flex; }
    .header-burger{ display:none; }
  }

  /* Фото, растянутое на весь слот (страница «Приёмная председателя») */
  .photo-fill{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; }
  /* В одну колонку (<1024px) портрет не растягивается на всю ширину экрана */
  @media (max-width:1023px){ .chair-photo{ max-width:26rem; } }

  /* ================================================================
     «Правки 1»: фото университета наложением на тёмную шапку (--ink) —
     Главная и Приёмная Председателя. Бордовая основа (--ink) остаётся
     нижним слоем, фото — поверх с прозрачностью ~15%, текст — ещё выше.
     Градиент (::after) чуть притемняет низ, чтобы текст не терялся на
     светлых участках снимка; он часть того же слоя, что и фото, и
     поэтому визуально приглушается вместе с ним — так был утверждён
     макет-предпросмотр. Затрагивает только сами блоки-шапки, больше
     никакие тёмные секции сайта (см. согласованный предпросмотр).
     ================================================================ */
  .hero-photo{
    position:absolute; inset:0;
    background-image:url('../img/hero-university.webp');
    background-size:cover;
    background-position:center;
    opacity:.15;
    pointer-events:none;
  }
  .hero-photo::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgb(var(--ink) / .15) 0%, rgb(var(--ink) / .55) 100%);
  }
  /* На «Приёмной» кадр короче — поднимаем видимую часть фото к зданию,
     а не к фонтану/земле (согласовано отдельной правкой к предпросмотру). */
  .hero-photo--chairman{ background-position:center 20%; }

  /* ================================================================
     РУКОВОДСТВО СОВЕТА — композиция по референсу заказчика:
       1) большая плашка председателя: слева надпись, заголовок в две
          строки, короткое описание и кнопка; справа крупная фигура,
          обрезанная нижним краем;
       2) тёмная лента карточек руководителей: квадратное фото · подпись
          капсом · имя и должность · ссылка со стрелкой; под лентой ряд
          «кнопка — индикатор — кнопка» (симметричный).
     От сайта — только цвет (токены палитры) и шрифты (Playfair для имени,
     Inter для остального). Здесь описано лишь то, чего нет в Tailwind-сборке.
     ================================================================ */
  .lead-section :is(h1,h2,h3){ text-wrap:balance; }
  .lead-section :is(p,li){ text-wrap:pretty; }
  .visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

  /* Светлый фокус-контур на тёмных областях (глобальный #810100 на #270707 не виден) */
  .on-dark :focus-visible{ outline-color:rgb(var(--canvas)); }

  /* --- Плашка председателя ---
     «Правка 13»: фото председателя (вырезанная фигура на прозрачном фоне) больше не обрезается при
     загрузке — его размер и место на плашке задаются кадром в разделе управления и приходят сюда
     CSS-переменными на .lead-hero (style="--d-size:63;--d-x:50;…", см. services/leadership.py):
       --d-* — компьютер, --m-* — телефон; size — рост фигуры в % высоты области под фото;
       x — компьютер: центр фигуры в % ширины правой колонки, телефон: в % ширины области;
       y — подъём (+) / опускание (−) в % собственной высоты фото; h — компьютер: мин. высота плашки
       в rem, телефон: высота области под фото в % её ширины.
     Раскладка компьютер/телефон — контейнерный запрос по ширине самой плашки (а не @media по окну):
     тогда уменьшенная копия плашки в редакторе кадра раскладывается ровно как на сайте. Порог 1008px =
     прежние 1024px окна минус полоса прокрутки (плашка во всю ширину окна). Отступы внутреннего
     контейнера и размер имени тоже отсюда (раньше — px-6 lg:px-10 и 5.6vw): по той же причине.
     Значения по умолчанию воспроизводят плашку ровно такой, какой она была до правки. */
  .lead-hero{ background:rgb(var(--canvas)); background:color-mix(in srgb, rgb(var(--ink)) 6%, rgb(var(--canvas))); overflow:hidden; container-type:inline-size; }
  .lead-hero__inner{ display:grid; grid-template-columns:minmax(0,1fr); padding-inline:1.5rem; }
  .lead-hero__text{ padding-block:3.5rem 2.5rem; }
  .lead-name{ font-size:clamp(2.75rem,5.6cqw,4.75rem); line-height:1.02; letter-spacing:-.01em; }
  /* Телефон: область под фото — во всю ширину экрана (за боковые отступы), под текстом. */
  .lead-hero__figure{ position:relative; margin-inline:-1.5rem; margin-bottom:-1px; overflow:hidden;
    aspect-ratio:100 / var(--m-h, 53); }
  .lead-hero__figure > img{ position:absolute; bottom:0; left:calc(var(--m-x, 50) * 1%);
    height:calc(var(--m-size, 100) * 1%); width:auto; max-width:none;
    transform:translate(-50%, calc(var(--m-y, 0) * -1%)); }
  @container (min-width:1008px){
    /* две равные колонки: текст по левому краю контейнера, фигура в правой */
    .lead-hero__inner{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:3rem; padding-inline:2.5rem;
      min-height:calc(var(--d-h, 36) * 1rem); }
    .lead-hero__text{ align-self:center; padding-block:4rem; }
    /* Область фото: правая колонка + 9rem в левую (до текста не достаёт) + до правого края экрана.
       Что выходит за область — срезается её краями (и верхом/низом плашки). */
    .lead-hero__figure{ aspect-ratio:auto; align-self:stretch;
      margin-left:-9rem; margin-right:calc(-1 * (max(0px, (100cqw - 1280px) / 2) + 2.5rem)); }
    /* x отсчитывается от левого края правой колонки в % её ширины: ширина колонки =
       (ширина контейнера − 2×2.5rem отступов − 3rem промежутка) / 2 */
    .lead-hero__figure > img{ left:calc(9rem + var(--d-x, 50) * (min(100cqw, 1280px) - 8rem) / 200);
      height:calc(var(--d-size, 63) * 1%); transform:translate(-50%, calc(var(--d-y, 0) * -1%)); }
  }

  /* Редактор кадра (раздел управления): уменьшенная копия плашки */
  .lh-editor{ display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem; align-items:start; }
  @media (min-width:1100px){ .lh-editor{ grid-template-columns:minmax(0,1fr) 19rem; } }
  .lh-tabs{ display:flex; border-bottom:1px solid rgba(39,7,7,.12); margin-bottom:.875rem; }
  .lh-tab{ border-bottom:2px solid transparent; margin-bottom:-1px; padding:.625rem 1rem; font-size:.75rem; font-weight:500;
    letter-spacing:.08em; text-transform:uppercase; color:rgb(var(--ink) / .55); }
  .lh-tab[aria-selected="true"]{ color:rgb(var(--primary)); border-bottom-color:rgb(var(--primary)); }
  .lh-stage{ position:relative; border:1px solid rgba(39,7,7,.12); background:#E9E4E1; overflow:hidden; }
  .lh-stage.is-mob{ display:flex; justify-content:center; padding-block:1.125rem; }
  .lh-holder{ position:relative; overflow:hidden; }
  .lh-stage.is-mob .lh-holder{ border-radius:18px; box-shadow:0 0 0 1px rgba(39,7,7,.18); background:rgb(var(--canvas)); }
  .lh-scaler{ transform-origin:0 0; background:rgb(var(--canvas)); }
  .lh-strip{ height:5rem; background:rgb(var(--ink)); }
  .lh-scaler .lead-hero__figure > img{ cursor:grab; touch-action:none; user-select:none; -webkit-user-drag:none; }
  .lh-scaler .lead-hero__figure.is-drag > img{ cursor:grabbing; }
  .lh-scaler .lead-hero__figure.is-outlined::after{ content:""; position:absolute; inset:0; pointer-events:none;
    outline:1.5px dashed rgb(var(--accent) / .55); outline-offset:-1.5px; }
  .lh-panel{ border:1px solid rgba(39,7,7,.12); background:#fff; padding:1.125rem; }
  .lh-ctl{ padding-block:.75rem; border-top:1px solid rgba(39,7,7,.08); }
  .lh-ctl:first-of-type{ border-top:0; padding-top:0; }
  .lh-ctl-head{ display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; margin-bottom:.5rem; font-size:.8125rem; font-weight:500; }
  .lh-val{ font-variant-numeric:tabular-nums; font-size:.75rem; font-weight:400; color:rgb(var(--ink) / .6); white-space:nowrap; }
  .lh-row{ display:grid; grid-template-columns:2rem minmax(0,1fr) 2rem; gap:.5rem; align-items:center; }
  .lh-step{ width:2rem; height:2rem; border:1px solid rgba(39,7,7,.16); background:rgb(var(--canvas)); display:grid; place-items:center; font-size:.9375rem; }
  .lh-step:hover{ border-color:rgb(var(--primary)); color:rgb(var(--primary)); }
  .lh-row input[type=range]{ width:100%; accent-color:rgb(var(--primary)); margin:0; }
  .lh-sub{ font-size:.71875rem; color:rgb(var(--ink) / .5); margin-top:.375rem; }

  /* --- Тёмная лента руководителей --- */
  .lead-strip{ padding-block:2.5rem; }
  @media (min-width:768px){ .lead-strip{ padding-block:3rem; } }
  .lead-strip__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.75rem; }
  .lead-strip__count{ font-size:12px; letter-spacing:.18em; color:rgb(var(--canvas) / .7); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .lead-section .lead-strip__count{ text-wrap:nowrap; } /* перебивает общее text-wrap:pretty для абзацев */

  .lead-track{
    --lead-gap:1.5rem;
    display:flex; align-items:stretch; gap:var(--lead-gap); margin:0; padding:.25rem 0; list-style:none;
    overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none;
    counter-reset:lead; /* автонумерация плашек: новая карточка получает следующий номер сама */
  }
  .lead-track::-webkit-scrollbar{ display:none; }

  /* Плашка руководителя. Сверху строка «уровень — номер», ниже ПОЛНОЕ название
     структуры, затем квадратное фото рядом с ФИО и должностью, внизу — почта.
     Названия и должности выводятся целиком: ничего не сокращается и не обрезается.
     Телефон — вертикальная компоновка, от 640px — фото слева, текст справа. */
  .lead-card{
    --thumb:5.5rem;
    position:relative; flex:0 0 88%; scroll-snap-align:start; counter-increment:lead;
    display:grid; grid-template-columns:var(--thumb) minmax(0,1fr);
    grid-template-areas:"meta meta" "title title" "photo person" "foot foot";
    grid-template-rows:auto auto 1fr auto; /* лишняя высота уходит в ряд «фото — ФИО»: почта всегда внизу */
    column-gap:1.25rem; row-gap:1rem; padding:1.25rem;
    border:1px solid rgb(var(--canvas) / .16); background:rgb(var(--canvas) / .03);
  }
  /* короткая светлая «закладка» на верхней кромке плашки */
  .lead-card::before{ content:""; position:absolute; left:1.25rem; top:-1px; width:2.5rem; height:2px; background:rgb(var(--canvas)); }
  @media (min-width:640px){
    .lead-card{
      --thumb:9rem; flex-basis:34rem; padding:1.5rem; column-gap:1.5rem; row-gap:.75rem;
      grid-template-areas:"photo meta" "photo title" "photo person" "foot foot";
      grid-template-rows:auto auto 1fr auto;
    }
    .lead-card::before{ left:1.5rem; }
  }
  @media (min-width:1024px){ .lead-card{ --thumb:10rem; flex-basis:calc((100% - var(--lead-gap)) / 2); } }

  .lead-card__meta{ grid-area:meta; display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; }
  .lead-card__level{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; line-height:1.45; color:rgb(var(--canvas) / .7); }
  .lead-card__no{ font-size:1rem; line-height:1; color:rgb(var(--canvas) / .5); font-variant-numeric:tabular-nums; }
  .lead-card__no::before{ content:counter(lead, decimal-leading-zero); }
  .lead-card__title{ grid-area:title; font-size:1.25rem; line-height:1.25; color:rgb(var(--canvas)); }
  .lead-card__person{ grid-area:person; min-width:0; align-self:start; }
  .lead-card__name{ display:block; font-size:15px; font-weight:500; line-height:1.35; color:rgb(var(--canvas)); }
  .lead-card__name--pending{ font-weight:400; color:rgb(var(--canvas) / .6); }
  .lead-card__role{ margin-top:.4rem; font-size:13px; line-height:1.45; color:rgb(var(--canvas) / .75); }
  .lead-card__foot{ grid-area:foot; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:1rem; border-top:1px solid rgb(var(--canvas) / .16); }
  .lead-card__cap{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgb(var(--canvas) / .6); }
  @media (max-width:639px){ .lead-card__cap{ display:none; } } /* на телефоне адрес и так понятен, а строки не хватает */

  /* Фото — квадрат 1:1. Пока снимков нет — светлая плашка с бюстом в цвете герба
     (как светлые фото на тёмной полосе референса). Реальное фото: <img alt="…"> в .lead-thumb. */
  .lead-thumb{ grid-area:photo; position:relative; overflow:hidden; align-self:start; width:var(--thumb); aspect-ratio:1 / 1; display:flex; align-items:flex-end; justify-content:center; background:rgb(var(--canvas) / .92); }
  .lead-thumb svg{ display:block; width:92%; height:auto; color:rgb(var(--primary)); fill:currentColor; }
  .lead-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

  .lead-link{ display:inline-flex; align-items:center; gap:.5rem; padding-block:.35rem; font-size:13px; font-weight:500; letter-spacing:.02em; overflow-wrap:anywhere; }
  .lead-link > span{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.4em; text-decoration-color:rgb(var(--canvas) / .5); transition:text-decoration-color .4s var(--ease-premium); }
  .lead-link:hover > span{ text-decoration-color:rgb(var(--canvas)); }
  .lead-link svg{ width:.9rem; height:.9rem; flex-shrink:0; transition:transform .4s var(--ease-premium); }
  .lead-link:hover svg{ transform:translateX(3px); }

  /* Нижний ряд: кнопка — индикатор — кнопка (симметрично, на всю ширину ленты) */
  .lead-bar{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; column-gap:1.25rem; margin-top:2rem; }
  .lead-btn{ width:2.75rem; height:2.75rem; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgb(var(--canvas) / .4); color:rgb(var(--canvas)); transition:background-color .4s var(--ease-premium), color .4s var(--ease-premium), opacity .3s; }
  .lead-btn:hover{ background:rgb(var(--canvas)); color:rgb(var(--ink)); }
  /* aria-disabled вместо disabled — фокус не теряется на краю ленты */
  .lead-btn[aria-disabled="true"]{ opacity:.35; cursor:not-allowed; }
  .lead-btn[aria-disabled="true"]:hover{ background:transparent; color:rgb(var(--canvas)); }
  .lead-progress{ position:relative; height:1px; background:rgb(var(--canvas) / .2); }
  .lead-progress__thumb{ position:absolute; top:-1px; left:0; height:3px; width:0; background:rgb(var(--canvas)); transition:left .25s var(--ease-premium), width .25s var(--ease-premium); }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:.01ms !important; animation-iteration-count:1 !important;
      transition-duration:.01ms !important; scroll-behavior:auto !important;
    }
  }


/* ================================================================
   СЕРВЕРНАЯ ВЕРСИЯ: добавлено при переходе от макета к сайту
   ================================================================ */
/* Ссылки-«кнопки»: раньше это были <button> — сохраняем их вид и поведение */
:where(a.nav-link){ display:inline-flex; text-align:center; }
:where(a.nav-link:not(.flex)){ align-items:center; justify-content:center; }
/* inline-flex + центрирование текста повторяют устройство <button>: высота строки и переносы те же, что в макете.
   Карточки-ссылки (класс .flex) сохраняют собственную раскладку. */
/* Прелоадер показывается один раз за сеанс (класс ставит boot.js) */
.no-loader #loader{ display:none !important; }

/* ================================================================
   ВХОД И РАЗДЕЛ УПРАВЛЕНИЯ (блок 2).
   Экраны, которых не было в макете, оформлены в его языке: те же поля,
   кнопки, тонкие линии и цвета из палитры.
   ================================================================ */
.form-label{ display:block; margin-bottom:.5rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgb(var(--ink) / .6); }
.form-input{ width:100%; border:1px solid rgba(39,7,7,.12); background:rgb(var(--canvas)); padding:.75rem 1rem; font-size:.875rem; transition:border-color .3s; }
.form-input:focus{ outline:none; border-color:rgb(var(--primary)); }
.form-hint{ margin-top:.5rem; font-size:.75rem; line-height:1.6; color:rgb(var(--ink) / .6); }
.form-hint--after{ margin-top:2rem; }
.form-check{ display:flex; gap:.75rem; align-items:flex-start; cursor:pointer; }
.form-check input{ margin-top:.2rem; width:1rem; height:1rem; flex-shrink:0; accent-color:rgb(var(--primary)); }
.form-check span{ font-size:.75rem; line-height:1.6; color:rgb(var(--ink) / .7); }

.notice{ border:1px solid rgba(39,7,7,.12); padding:1.25rem 1.5rem; font-size:.875rem; line-height:1.6; }
.notice ul{ margin:.5rem 0 0; padding-left:1.25rem; list-style:disc; }
.notice--error{ border-color:rgb(var(--accent)); color:rgb(var(--accent)); }
/* «Правка 17»: текст «по ширине» (lang="ru" на <html> → hyphens:auto переносит слова; на телефоне узкая колонка даёт дыры между словами — там по левому краю) */
.txt-justify{ -webkit-hyphens:auto; hyphens:auto; }
@media (min-width:768px){ .txt-justify{ text-align:justify; } }
.notice--warn{ border-color:rgb(var(--primary) / .4); background:rgb(var(--primary) / .04); }
/* «Правка 14»: строка структуры в заявке на вступление (галочки, можно несколько) */
.mem-pick:hover{ border-color:rgb(var(--primary) / .45); }
.mem-pick.is-picked{ border-color:rgb(var(--primary) / .55); background:rgb(var(--primary) / .04); }

.table-scroll{ overflow-x:auto; border:1px solid rgba(39,7,7,.12); }
.mg-table{ width:100%; min-width:720px; border-collapse:collapse; font-size:.875rem; }
.mg-table th{ text-align:left; padding:.75rem 1.25rem; font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:rgb(var(--ink) / .6); border-bottom:1px solid rgba(39,7,7,.12); white-space:nowrap; }
.mg-table td{ padding:1rem 1.25rem; border-top:1px solid rgba(39,7,7,.08); vertical-align:top; }
.mg-table tbody tr:first-child td{ border-top:0; }
.mg-mono{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing:.02em; }
td.mg-mono{ white-space:nowrap; }
.mg-sub{ display:block; margin-top:.15rem; font-size:.75rem; color:rgb(var(--ink) / .6); }
.pw-cell{ font-size:1rem; font-weight:600; user-select:all; }

.badge{ display:inline-block; padding:.15rem .6rem; border:1px solid rgb(var(--primary) / .35); color:rgb(var(--primary)); font-size:11px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.badge--muted{ border-color:rgba(39,7,7,.25); color:rgb(var(--ink) / .6); }
.is-soon{ opacity:.5; cursor:not-allowed; }
.mg-actions{ display:flex; flex-wrap:wrap; gap:.25rem 1rem; align-items:center; }
.mg-actions form{ display:inline; }
.linklike{ font-size:.75rem; letter-spacing:.025em; text-transform:uppercase; color:rgb(var(--primary)); padding:.25rem 0; }
.linklike:hover{ text-decoration:underline; text-underline-offset:.3em; }
.pager{ display:flex; gap:1rem; align-items:center; margin-top:1.5rem; font-size:.875rem; }

@media print{
  #site-header, #mobile-menu, footer, .no-print{ display:none !important; }
  body{ background:#fff !important; }
  .table-scroll{ overflow:visible; border-color:#999; }
}

/* Раскладки новых экранов (в собранных Tailwind-стилях таких сочетаний нет) */
.text-link{ color:rgb(var(--primary)); text-decoration:underline; text-underline-offset:.3em; }
.mg-grid-2{ display:grid; gap:2rem; }
.mg-grid-3{ display:grid; gap:1.25rem; }
.mg-filter{ display:grid; gap:1rem; align-items:end; }
.stack-10 > * + *{ margin-top:2.5rem; }
@media (min-width:640px){
  .mg-grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mg-filter{ grid-template-columns:var(--mg-filter-cols, 1fr 12rem 10rem auto); }
}
@media (min-width:1024px){ .mg-grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Раздел «Баллы» (блок 3): раскрывающиеся подсказки без JS в очереди заявок, ряды поиска в штрафах/начислениях */
.mg-detail{ font-size:.75rem; }
.mg-detail summary{ cursor:pointer; list-style:none; }
.mg-detail summary::-webkit-details-marker{ display:none; }
.mg-actions.items-start{ align-items:flex-start; }
.rank-row{ display:grid; grid-template-columns:8rem 1fr auto; gap:1rem; align-items:end; }
.rank-row + .rank-row{ margin-top:1rem; }

/* Правки блока 3 (по замечаниям): под-навигация БРС, история начислений, фильтр журнала */
.mg-subnav{ display:flex; flex-wrap:wrap; gap:.5rem 1.75rem; border-bottom:1px solid rgba(39,7,7,.12); padding-bottom:1rem; }
.mg-subnav a{ font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; color:rgb(var(--ink) / .55); padding:.35rem 0; border-bottom:2px solid transparent; }
.mg-subnav a:hover{ color:rgb(var(--primary)); }
.mg-subnav a.is-active{ color:rgb(var(--primary)); border-color:rgb(var(--primary)); font-weight:600; }
.mg-row--muted{ opacity:.55; }
.mg-row--muted td{ color:rgb(var(--ink) / .7); }
.rank-row-remove{ white-space:nowrap; }

/* Страница «Рейтинг» (кабинет): своя строка в списке, места топ-3 */
.mg-row--mine{ background:rgb(var(--primary) / .06); }
.mg-row--mine td{ font-weight:600; }
.rating-pos{ display:inline-flex; align-items:center; justify-content:center; width:1.75rem; height:1.75rem; font-size:.75rem; color:rgb(var(--ink) / .6); }
.rating-pos--top{ background:rgb(var(--primary) / .12); color:rgb(var(--primary)); border-radius:999px; font-weight:600; }

/* ================================================================
   ВХОД И ПЕРВЫЙ ВХОД: сцена по центру.
   Фон — ровный тёмный бордовый, по центру светлая карточка с логотипом. Анимация проигрывается один раз при открытии;
   состояние «по умолчанию» у всех элементов видимое, поэтому при отключённой
   анимации (prefers-reduced-motion) ничего не пропадает.
   ================================================================ */
.auth-stage{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  min-height:calc(100svh - 7.5rem); padding:3.5rem 1.25rem 4rem;
  background:rgb(var(--primary)); background:color-mix(in srgb, rgb(var(--primary)) 62%, rgb(var(--ink))); } /* тёмный бордовый: темнее герба, светлее подвала */
.auth-card{ position:relative; width:100%; max-width:29rem; padding:2.75rem 2.25rem 2.5rem; text-align:center; background:rgb(var(--canvas));
  animation:cardIn .9s var(--ease-premium) .1s backwards; }
.auth-card--wide{ max-width:33rem; }
.auth-card.has-error{ animation:cardIn .9s var(--ease-premium) .1s backwards, cardShake .6s ease .95s; }
.auth-lockup{ display:flex; flex-direction:column; align-items:center; gap:.7rem; }
.auth-lockup svg{ width:3.25rem; height:auto; color:rgb(var(--primary)); animation:crestStamp 1s var(--ease-premium) .35s backwards; }
.auth-lockup__name{ display:block; font-family:'Playfair Display',Georgia,serif; font-size:1.375rem; line-height:1.1; color:rgb(var(--ink)); }
.auth-lockup__sub{ display:block; margin-top:.35rem; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:rgb(var(--ink) / .6); }
.auth-rule{ display:block; width:3rem; height:1px; margin:1.75rem auto 1.75rem; background:rgb(var(--primary) / .55); animation:ruleGrow .9s var(--ease-premium) .55s backwards; }
.rise{ animation:riseIn .8s var(--ease-premium) backwards; animation-delay:calc(.5s + var(--i, 0) * 70ms); }

.field{ position:relative; }
.field > .form-input{ padding-left:2.9rem; }
.field.has-toggle > .form-input{ padding-right:3rem; }
.field__icon{ position:absolute; left:1rem; top:50%; width:1.1rem; height:1.1rem; transform:translateY(-50%); color:rgb(var(--ink) / .4); pointer-events:none; transition:color .3s; }
.field:focus-within .field__icon{ color:rgb(var(--primary)); }
.field__toggle{ position:absolute; right:.3rem; top:50%; width:2.5rem; height:2.5rem; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; color:rgb(var(--ink) / .55); transition:color .3s; }
.field__toggle:hover{ color:rgb(var(--primary)); }
.field__toggle svg{ width:1.1rem; height:1.1rem; }
.field__toggle .eye-slash{ opacity:0; transition:opacity .2s; }
.field__toggle[aria-pressed="true"] .eye-slash{ opacity:1; }

.auth-step{ display:flex; align-items:center; gap:.75rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:rgb(var(--ink) / .75); }
.auth-step span{ width:1.5rem; height:1.5rem; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgb(var(--primary) / .5); color:rgb(var(--primary)); font-size:.75rem; letter-spacing:0; }

@keyframes cardIn{ from{ opacity:0; transform:translateY(32px); } to{ opacity:1; transform:none; } }
@keyframes crestStamp{ from{ opacity:0; transform:scale(.7); } to{ opacity:1; transform:none; } }
@keyframes ruleGrow{ from{ opacity:0; transform:scaleX(0); } to{ opacity:1; transform:none; } }
@keyframes riseIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes cardShake{ 10%,90%{ transform:translateX(-2px); } 20%,80%{ transform:translateX(4px); } 30%,50%,70%{ transform:translateX(-6px); } 40%,60%{ transform:translateX(6px); } }
@media (max-width:479px){ .auth-card{ padding:2.25rem 1.5rem 2rem; } .auth-stage{ padding:2rem .75rem 3rem; } }
@media (prefers-reduced-motion: reduce){
  .auth-card, .auth-lockup svg, .auth-rule, .rise{ animation:none !important; }
}

/* ================================================================
   РЕДАКТОР ПОРЯДКА КАРТОЧЕК РУКОВОДСТВА (раздел управления, /upravlenie/rukovodstvo/redaktor) —
   доработка после блока 4, часть 4. Часть 3 (черновик) делала это «живым превью» тёмной карточки с
   панелью оформления — заказчик решил вернуть обычные поля формы; здесь просто список обычных
   бордер-карточек с текстовыми полями и кнопками ↑/↓, тем же визуальным языком, что и остальной раздел
   управления (ср. .border.hairline в других manage-шаблонах).
   ================================================================ */
.order-strip{ display:flex; flex-direction:column; gap:1.5rem; }
.order-level + .order-level{ margin-top:2rem; }
.order-level__title{ font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:rgb(var(--ink) / .55); margin-bottom:1rem; }
.order-cards{ display:flex; flex-direction:column; gap:1rem; }
.order-block{ border:1px solid rgb(var(--ink) / .14); }
.order-block__head{ display:flex; align-items:center; gap:.6rem; padding:.75rem 1.1rem; border-bottom:1px solid rgb(var(--ink) / .1); background:rgb(var(--ink) / .02); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgb(var(--ink) / .6); }
.order-block__order-btn{ margin-left:auto; padding:.15rem .5rem; font-size:1rem; line-height:1; color:rgb(var(--ink) / .6); }
.order-block__order-btn:hover{ color:rgb(var(--ink)); }
.order-block__error{ margin:0 1.1rem 1rem; padding:.6rem .9rem; font-size:.8rem; border:1px solid rgb(var(--accent)); color:rgb(var(--accent)); }
.order-block__body{ padding:1.25rem 1.1rem; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr)); }
.order-empty{ color:rgb(var(--ink) / .5); font-size:.875rem; }

/* ================================================================
   ОБРЕЗКА ФОТО ПРИ ЗАГРУЗКЕ (доработка после блока 4, часть 4) — панель, которую вставляет
   app/static/js/photo_cropper.js сразу после <input type="file" data-crop-aspect="…">. Кадр — обычный
   canvas фиксированного размера (сам служит «окном» обрезки, лишнее за его пределами не рисуется).
   ================================================================ */
.crop-panel{ padding:1.1rem; max-width:22rem; }
.crop-hint{ margin:0 0 .75rem; }
.crop-frame{ overflow:hidden; border:1px solid rgb(var(--ink) / .14); background:rgb(var(--ink) / .04); }
.crop-canvas{ display:block; cursor:grab; touch-action:none; }
.crop-canvas:active{ cursor:grabbing; }
.crop-slider{ display:block; width:100%; }

/* «Правка 19»: реестр Совета обучающихся */
.reg-chips{ display:flex; flex-direction:column; gap:.4rem; }
.reg-chip{ border:1px solid rgba(39,7,7,.12); padding:.65rem 1rem; background:rgb(var(--ink) / .025); font-size:.875rem; }
.reg-chip span{ color:rgb(var(--ink) / .6); }
.reg-lock{ margin-top:.4rem; font-size:.75rem; color:rgb(var(--ink) / .6); }
.form-error{ margin-top:.4rem; font-size:.75rem; line-height:1.5; color:rgb(var(--accent)); }
.reg-stats{ display:flex; flex-wrap:wrap; gap:1rem 2.5rem; }
.reg-stats b{ display:block; font-family:"Playfair Display",Georgia,serif; font-weight:400; font-size:1.75rem; line-height:1.1; color:rgb(var(--primary)); }
.reg-stats span{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgb(var(--ink) / .6); }
.reg-card{ border:1px solid rgba(39,7,7,.12); padding:1.25rem 1.5rem; }
.reg-card--todo{ border-color:rgb(var(--primary) / .45); background:rgb(var(--primary) / .04); }
.reg-dot{ display:inline-block; width:.5rem; height:.5rem; border-radius:999px; margin-right:.5rem; background:#2c6b3f; }
.badge--ok{ border-color:#2c6b3f66; color:#2c6b3f; }
.badge--todo{ border-color:#8a5a0066; color:#8a5a00; background:#8a5a0010; }
.reg-table{ min-width:960px; }
/* «Правка 33»: содержимое строк реестра — по центру по высоте; курс с группой, телефон и ник не рвутся */
.reg-table td{ vertical-align:middle; }
.reg-nw{ white-space:nowrap; }
.reg-note td{ border-top:0 !important; }
@media (min-width:640px){
  .reg-g3{ display:grid; gap:1.25rem; grid-template-columns:2fr 1fr 1fr; }
  .reg-g2{ display:grid; gap:1.25rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.reg-g3, .reg-g2{ display:grid; gap:1.25rem; }

/* «Правка 20»: вкладки очереди заявок на баллы у председателя (Руководители / Активисты) */
.lv-tabs{ display:flex; flex-wrap:wrap; }
.lv-tabs a{ border:1px solid rgba(39,7,7,.12); padding:.65rem 1.1rem; font-size:.8125rem; margin-right:-1px; }
.lv-tabs a:hover{ border-color:rgb(var(--primary) / .45); }
.lv-tabs a.is-active{ border-color:rgb(var(--primary)); background:rgb(var(--primary) / .05); color:rgb(var(--primary)); font-weight:500; position:relative; }
.lv-count{ display:inline-block; min-width:1.25rem; margin-left:.5rem; padding:.05rem .4rem; border-radius:999px; text-align:center; font-size:11px; background:rgb(var(--primary)); color:rgb(var(--canvas)); }
.lv-count--muted{ background:rgb(var(--ink) / .12); color:rgb(var(--ink)); }

/* «Правка 21»: выговоры */
.rp-sq{ display:inline-flex; gap:.3rem; vertical-align:middle; margin-right:.6rem; }
.rp-sq i{ width:.875rem; height:.875rem; border:1.5px solid rgb(var(--primary)); display:inline-block; }
.rp-sq i.on{ background:rgb(var(--primary)); }
.rp-box{ border:1px solid rgba(39,7,7,.12); padding:1.25rem 1.5rem; }
.rp-box--warn, .rp-pcard{ border-color:#8a5a0080; background:#8a5a000d; }
.rp-box--warn .rp-sq i{ border-color:#8a5a00; }
.rp-box--warn .rp-sq i.on{ background:#8a5a00; }
.rp-rec{ display:grid; gap:.25rem .75rem; border-top:1px solid rgba(39,7,7,.12); padding:.75rem 0; font-size:.875rem; }
.rp-rec--dim{ color:rgb(var(--ink) / .6); }
.rp-rec-date{ color:rgb(var(--ink) / .6); font-size:.8125rem; }
.rp-pcard{ border:1px solid #8a5a0080; padding:1.25rem 1.5rem; margin-bottom:.75rem; }
.rp-acts{ display:flex; flex-wrap:wrap; gap:.625rem; margin-top:1rem; }
.rp-acts form{ display:inline; }
.rp-btn{ border:1px solid rgb(var(--primary)); color:rgb(var(--primary)); font-size:.75rem; font-weight:500; letter-spacing:.025em; text-transform:uppercase; padding:.625rem 1rem; background:none; cursor:pointer; }
.rp-btn:hover{ background:rgb(var(--primary) / .06); }
.rp-btn--danger{ border-color:#810100; color:#810100; }
.rp-btn--gray{ border-color:rgba(39,7,7,.2); color:rgb(var(--ink) / .6); }
.rp-revoke summary{ cursor:pointer; list-style:none; }
.rp-revoke summary::-webkit-details-marker{ display:none; }
.rp-revoke form{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; min-width:16rem; }
.rp-revoke input{ flex:1 1 11rem; padding:.5rem .625rem; }
@media (min-width:640px){ .rp-rec{ grid-template-columns:7rem 1fr auto; align-items:start; } }

.rp-chip{ border:1px solid rgba(39,7,7,.12); padding:.5rem 1rem; font-size:.875rem; }
.rp-chip--on{ border-color:rgb(var(--primary)); background:rgb(var(--primary) / .05); color:rgb(var(--primary)); font-weight:500; }

/* «Правка 22»: распределение прямых баллов */
.dist-sum{ display:flex; flex-wrap:wrap; gap:.5rem 1.75rem; margin-bottom:.5rem; }
.dist-sum b{ display:block; font-family:'Playfair Display',Georgia,serif; font-size:1.625rem; font-weight:400; line-height:1.1; color:rgb(var(--primary)); }
.dist-sum span{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgb(var(--ink) / .6); }
.dist-bar{ position:relative; height:.5rem; background:rgb(var(--ink) / .1); margin:.5rem 0 .25rem; max-width:32rem; }
.dist-bar i{ position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg, rgb(var(--primary)), rgb(var(--accent))); }
.dist-row{ display:grid; gap:.75rem; margin-bottom:.75rem; }
@media (min-width:700px){ .dist-row{ grid-template-columns:1.8fr .8fr; align-items:end; } }

/* ---- «Правка 24»: рейтинг структур на виду (.sr-*) ---- */
.sr-hero{ display:grid; grid-template-columns:auto 1fr auto; gap:1.75rem; align-items:center; padding-bottom:1.25rem; margin-bottom:.5rem; border-bottom:1px solid rgb(var(--ink) / .12); }
.sr-place{ font-family:'Playfair Display',Georgia,serif; font-size:4rem; line-height:1; color:rgb(var(--primary)); }
.sr-place small{ font-family:Inter,sans-serif; font-size:1rem; color:rgb(var(--ink) / .55); margin-left:.25rem; }
.sr-side{ text-align:right; font-size:.8125rem; color:rgb(var(--ink) / .6); }
.sr-side b{ display:block; font-family:'Playfair Display',Georgia,serif; font-size:1.625rem; font-weight:400; color:rgb(var(--primary)); }
.sr-table{ width:100%; border-collapse:collapse; font-size:.875rem; }
.sr-table th{ font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:rgb(var(--ink) / .5); text-align:left; padding:.5rem .625rem; border-bottom:1px solid rgb(var(--ink) / .12); font-weight:500; white-space:nowrap; }
.sr-table td{ padding:.6875rem .625rem; border-bottom:1px solid rgb(var(--ink) / .1); vertical-align:middle; }
.sr-table .sr-num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.sr-table th.sr-num{ text-align:right; }
.sr-table .sr-bcol{ width:22%; }
.sr-mine td{ background:rgb(var(--primary) / .07); font-weight:500; }
.sr-mine td:first-child{ box-shadow:inset 3px 0 0 rgb(var(--primary)); }
.sr-you{ font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase; color:rgb(var(--primary)); margin-left:.5rem; }
.sr-bar{ height:6px; background:rgb(var(--ink) / .08); min-width:90px; }
.sr-bar i{ display:block; height:100%; background:linear-gradient(90deg, rgb(var(--primary)), rgb(var(--accent))); }
.sr-up{ color:#2c6b3f; } .sr-dn{ color:#810100; }
.sr-trophy{ display:flex; gap:.75rem; align-items:center; margin-top:1rem; font-size:.8125rem; color:rgb(var(--ink) / .6); }
.sr-trophy svg{ width:1.75rem; height:1.75rem; flex:none; color:rgb(var(--primary)); }
.sr-share{ display:flex; flex-wrap:wrap; gap:.5rem 1.125rem; align-items:center; margin-top:1rem; padding-top:.75rem; border-top:1px solid rgb(var(--ink) / .12); font-size:.8125rem; }
.sr-share .sr-sb{ flex:1 1 10rem; max-width:16rem; height:6px; background:rgb(var(--ink) / .08); }
.sr-share .sr-sb i{ display:block; height:100%; background:rgb(var(--primary)); }
/* «Правка 25»: тройка лидеров — римские цифры в тонкой бордовой рамке, остальное без изменений */
.sr-rm{ display:inline-flex; align-items:center; justify-content:center; min-width:2.25rem; height:1.875rem; padding:0 .25rem; border:1px solid rgb(var(--primary) / .4); font-family:'Playfair Display',Georgia,serif; font-size:1rem; font-weight:500; color:rgb(var(--primary)); letter-spacing:.02em; }
.sr-top td{ padding-top:.875rem; padding-bottom:.875rem; }
.sr-topname{ font-family:'Playfair Display',Georgia,serif; font-size:1.0625rem; }
.sr-toppts{ font-family:'Playfair Display',Georgia,serif; font-size:1.25rem; color:rgb(var(--primary)); }
@media (max-width:700px){
  .sr-hero{ grid-template-columns:auto 1fr; gap:1rem; }
  .sr-side{ grid-column:1 / -1; text-align:left; display:flex; gap:1rem; align-items:baseline; }
  .sr-place{ font-size:3rem; }
  .sr-table .sr-bcol, .sr-table .sr-wk{ display:none; }
  .sr-card{ padding:1.25rem; }
  .sr-table th, .sr-table td{ padding-inline:.35rem; }
  .sr-table{ font-size:.8125rem; }
  .sr-table td{ overflow-wrap:anywhere; }
}

/* ==================================================================
   «Правка 27»: пасхалка «Нотный блок» (логика — app/static/js/noteblock.js).
   Блок спрятан справа внизу кабинета: маленький, полупрозрачный, без подписи. После нажатия рядом
   выезжает панель плеера; пока музыка играет, на других страницах — мини-окошко в левом нижнем углу.
   ================================================================== */
.px-icon{ image-rendering:pixelated; image-rendering:crisp-edges; border-radius:0 !important; object-fit:contain; }
.tcard-icon img.px-icon{ border-radius:0; }
.nb-home{ display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:28px; min-height:30px; }
.nb-block{ position:relative; width:22px; height:22px; padding:0; border:0; cursor:pointer; display:block; flex:none;
  background:url(../img/noteblock.png) center/100% 100% no-repeat; image-rendering:pixelated;
  opacity:.38; transition:opacity .25s, transform .15s; }
.nb-block:hover, .nb-block:focus-visible{ opacity:.9; }
.nb-block:focus-visible{ outline:2px solid #660810; outline-offset:3px; }
.nb-block.is-on{ opacity:1; }
.nb-block.is-hit{ animation:nbHit .22s ease-out; }
@keyframes nbHit{ 50%{ transform:scale(.86); } }
.nb-note{ position:absolute; left:4px; top:-6px; font-size:14px; line-height:1; color:#660810; pointer-events:none;
  animation:nbNote 1.1s ease-out forwards; }
@keyframes nbNote{ from{ opacity:1; transform:translateY(0); } to{ opacity:0; transform:translate(6px,-30px); } }
.nb-panel{ display:flex; align-items:center; gap:6px; border:1px solid rgba(39,7,7,.12); background:#faf8f5; color:#270707;
  padding:6px 8px 6px 12px; animation:nbIn .25s ease-out; }
.nb-panel[hidden]{ display:none !important; }
@keyframes nbIn{ from{ opacity:0; transform:translateX(-6px); } to{ opacity:1; transform:none; } }
.nb-info{ min-width:0; width:196px; margin-right:4px; }
.nb-eyebrow{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#660810; opacity:.8; line-height:1.3; }
.nb-title{ font-family:"Playfair Display",Georgia,serif; font-size:14px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nb-seek{ display:flex; align-items:center; gap:6px; margin-top:2px; }
.nb-time{ font-size:9.5px; line-height:1; letter-spacing:.04em; color:rgba(39,7,7,.6); font-variant-numeric:tabular-nums; min-width:2.4em; }
.nb-time:last-child{ text-align:right; }
/* «Правка 38»: полоса перемотки — тонкая линия в широкой зоне нажатия, на конце маленький квадратный ползунок */
.nb-bar{ position:relative; flex:1; min-width:0; height:16px; cursor:pointer; touch-action:none; outline:none; }
.nb-bar::before{ content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background:rgba(39,7,7,.12); }
.nb-bar i{ position:absolute; left:0; top:50%; height:2px; margin-top:-1px; width:0; background:#660810; }
.nb-bar b{ position:absolute; top:50%; left:0; width:8px; height:8px; margin:-4px 0 0 -4px; background:#660810; border-radius:50%; transition:transform .12s; }
.nb-bar:hover b, .nb-bar:focus-visible b, .nb-bar.is-drag b{ transform:scale(1.4); }
.nb-bar:focus-visible{ outline:2px solid #660810; outline-offset:1px; }
.nb-btn{ width:30px; height:30px; border:1px solid transparent; background:none; display:inline-flex; align-items:center;
  justify-content:center; cursor:pointer; color:#660810; padding:0; flex:none; }
.nb-btn:hover, .nb-btn:focus-visible{ border-color:rgba(102,8,16,.3); outline:none; }
.nb-btn svg{ width:14px; height:14px; fill:currentColor; }
.nb-mini{ position:fixed; left:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:40;
  display:flex; align-items:center; gap:10px; max-width:calc(100vw - 32px); }
.nb-mini .nb-block{ width:30px; height:30px; opacity:1; box-shadow:0 0 0 1px rgba(39,7,7,.12); }
@media (max-width:420px){ .nb-info{ width:150px; } }
@media (prefers-reduced-motion:reduce){ .nb-block.is-hit, .nb-note, .nb-panel{ animation:none; } .nb-note{ display:none; } }
/* «Правка 30»: плашка «В разработке» поверх блока (три нажатия) и ноты при наведении */
.nb-spot{ position:relative; display:flex; justify-content:flex-end; align-items:center; min-width:22px; min-height:26px; }
.nb-block.is-hidden{ visibility:hidden; }
.nb-block.is-reveal{ animation:nbReveal .6s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes nbReveal{ from{ opacity:0; transform:scale(.4); } 60%{ opacity:1; } to{ opacity:.9; transform:none; } }
.nb-wip{ position:absolute; right:0; top:50%; transform:translateY(-50%); white-space:nowrap; cursor:pointer;
  font:inherit; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(39,7,7,.45);
  background:#faf8f5; border:1px dashed rgba(39,7,7,.25); padding:6px 12px; transition:border-color .2s, color .2s; }
.nb-wip:hover, .nb-wip:focus-visible{ border-color:rgba(102,8,16,.4); color:rgba(39,7,7,.65); outline:none; }
.nb-wip span{ display:inline-block; transition:opacity .18s, transform .18s; }
.nb-wip span.is-swap{ opacity:0; transform:translateY(4px); }
.nb-wip.is-nudge{ animation:nbNudge .32s ease-out; }
@keyframes nbNudge{ 25%{ transform:translate(-3px,-50%); } 50%{ transform:translate(3px,-50%); } 75%{ transform:translate(-1px,-50%); } }
.nb-wip.is-gone{ animation:nbGone .55s ease-in forwards; pointer-events:none; }
@keyframes nbGone{ from{ opacity:1; transform:translateY(-50%); clip-path:inset(0 0 0 0); }
  to{ opacity:0; transform:translateY(-80%); clip-path:inset(0 0 0 100%); } }
.nb-fly{ position:absolute; left:50%; bottom:60%; line-height:1; pointer-events:none; font-weight:500;
  font-family:"Segoe UI Symbol","DejaVu Sans","Noto Sans Symbols",Inter,sans-serif;
  animation:nbFly var(--dur,1.4s) ease-out forwards; }
@keyframes nbFly{ 0%{ opacity:0; transform:translate(calc(-50% + var(--x0)),0) scale(.5); }
  12%{ opacity:1; transform:translate(calc(-50% + var(--x0)),-6px) scale(1.1) rotate(calc(var(--rot) * -.5)); }
  70%{ opacity:.8; }
  100%{ opacity:0; transform:translate(calc(-50% + var(--x0) + var(--dx)),var(--dy)) scale(.9) rotate(var(--rot)); } }
@media (prefers-reduced-motion:reduce){ .nb-fly{ display:none; } .nb-wip.is-nudge, .nb-block.is-reveal{ animation:none; } }


/* «Правка 28»: выбор иконки достижения сеткой (панель управления, manage/achievements_form.html) */
.icon-pick-wrap{ border:0; padding:0; margin:0; min-width:0; }
.icon-pick-head{ display:flex; justify-content:space-between; gap:10px; width:100%; }
.icon-pick-current{ color:#660810; text-transform:none; letter-spacing:0; }
.icon-pick{ display:grid; grid-template-columns:repeat(auto-fill,minmax(46px,1fr)); gap:6px; max-height:320px; overflow-y:auto; padding:2px; }
.icon-pick-item{ position:relative; cursor:pointer; }
.icon-pick-item input{ position:absolute; opacity:0; pointer-events:none; }
.icon-pick-item > span{ height:46px; border:1px solid rgba(39,7,7,.12); display:flex; align-items:center; justify-content:center;
  color:#660810; transition:border-color .15s, background .15s; }
.icon-pick-item:hover > span{ border-color:rgba(102,8,16,.45); }
.icon-pick-item input:focus-visible + span{ outline:2px solid #660810; outline-offset:2px; }
.icon-pick-item input:checked + span{ background:#660810; border-color:#660810; color:#faf8f5; }
.icon-pick-item.is-used::after{ content:""; position:absolute; top:4px; right:4px; width:5px; height:5px; border-radius:50%;
  background:rgba(39,7,7,.35); pointer-events:none; }
.icon-pick-item.is-used:has(input:checked)::after{ background:#faf8f5; }
.icon-pick-item .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* «Правка 29»: выдача аккаунта — выбор структур (manage/issue.html, логика — manage.js) */
.iss-sect{ border-top:1px solid rgba(39,7,7,.12); padding-top:1.25rem; }
.iss-sect[hidden]{ display:none !important; }
.iss-h{ font-family:"Playfair Display",Georgia,serif; font-weight:400; font-size:1.2rem; margin:0 0 .25rem; }
.iss-main-select{ max-width:28rem; margin-top:.6rem; }
.iss-fixed-line{ margin:.6rem 0 0; font-size:.9rem; }
.iss-rows{ display:grid; gap:.5rem; margin-top:.9rem; grid-template-columns:1fr; }
.iss-row{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; border:1px solid rgba(39,7,7,.12);
  padding:.55rem .75rem; min-height:2.6rem; }
.iss-row.is-on{ border-color:rgba(102,8,16,.5); background:rgba(102,8,16,.05); }
.iss-row.is-main{ opacity:.55; }
.iss-chk{ display:flex; align-items:center; gap:.6rem; cursor:pointer; font-size:.85rem; line-height:1.3; min-width:0; }
.iss-chk input{ accent-color:#660810; width:1rem; height:1rem; flex:none; }
.iss-status{ font:inherit; font-size:.78rem; border:1px solid rgba(39,7,7,.14); background:#faf8f5; color:#270707; padding:.3rem .35rem;
  max-width:9.5rem; flex:none; }
.iss-status[hidden]{ display:none; }
.iss-tag{ font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; color:#660810; border:1px solid rgba(102,8,16,.35);
  padding:.05rem .4rem; flex:none; }
.iss-tag[hidden]{ display:none; }

/* «Правка 31»: БРС как в Совете — ссылка на документ БРС, отметки руководителя в очереди, этапы заявки */
.brs-doc{ display:flex; gap:.75rem; align-items:flex-start; border:1px solid rgb(var(--primary) / .3); background:rgb(var(--primary) / .03);
  padding:.8rem 1rem; font-size:.8125rem; line-height:1.55; max-width:48rem; }
.brs-doc svg{ flex:none; width:1.1rem; height:1.1rem; margin-top:.1rem; fill:none; stroke:rgb(var(--primary)); stroke-width:1.5; }
.brs-doc p{ margin:0; }
.brs-doc a{ color:rgb(var(--primary)); text-decoration:underline; text-underline-offset:.2em; }
.lc-mark{ display:block; margin-top:.4rem; font-size:.75rem; line-height:1.45; color:rgb(var(--primary)); }
.lc-mark q{ quotes:"«" "»"; color:rgb(var(--ink) / .75); }
.lc-wait{ display:block; margin-top:.4rem; font-size:.75rem; line-height:1.45; color:rgb(var(--ink) / .78);
  background:rgb(var(--primary) / .05); border-left:2px solid rgb(var(--primary) / .45); padding:.3rem .55rem; }
/* «Правка 32»: раздельные числа заявок на карточке «БРС» у председателя */
.pts-split{ display:flex; flex-wrap:wrap; gap:.25rem 1rem; font-size:.8125rem; line-height:1.4; color:rgb(var(--ink) / .65); }
.pts-split b{ font-weight:600; color:rgb(var(--ink)); }
.pts-split-old, .pts-split-old b{ color:rgb(var(--primary)); }
.lc-muted{ display:block; margin-top:.4rem; font-size:.75rem; line-height:1.45; color:rgb(var(--ink) / .6); }
.pr-steps{ display:flex; gap:3px; margin-top:.4rem; }
.pr-steps i{ height:3px; width:1.9rem; background:rgb(var(--ink) / .1); }
.pr-steps i.is-done{ background:rgb(var(--primary)); }
.pts-neg{ color:rgb(var(--accent)); }
.st-note{ display:block; margin-top:.2rem; font-size:.75rem; color:rgb(var(--ink) / .6); }

/* «Правка 35»: компактный кабинет — строка статусов, рейтинги одной плашкой, заявка рядом с мероприятиями */
.dash-strip{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); border:1px solid rgba(39,7,7,.12); }
.dash-cell{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:1rem 1.25rem; border:0; border-left:1px solid rgba(39,7,7,.12); background:none; color:inherit; font:inherit; text-align:left; text-decoration:none; cursor:pointer; transition:background .2s; }
.dash-cell:first-child{ border-left:0; }
.dash-cell:hover{ background:rgb(var(--ink) / .03); }
.dash-cell:focus-visible{ outline:2px solid rgb(var(--primary)); outline-offset:-2px; }
.dash-lbl{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgb(var(--ink) / .6); }
.dash-val{ display:flex; align-items:center; gap:.6rem; margin-top:.25rem; font-family:"Playfair Display",Georgia,serif; font-size:1.125rem; line-height:1.3; }
.dash-go{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgb(var(--primary)); white-space:nowrap; }
.dash-cell--todo{ background:rgb(var(--primary) / .05); box-shadow:inset 0 0 0 1px rgb(var(--primary) / .45); }
.dash-cell--todo .dash-lbl{ color:rgb(var(--primary)); }
.dash-cell--warn{ background:rgb(var(--primary) / .05); }
.dash-panel{ border:1px solid rgba(39,7,7,.12); border-top:0; padding:1rem 1.25rem; }
.dash-panel[hidden]{ display:none; }

.dash-rt{ padding:0; }
.dash-rt-sum{ display:flex; align-items:center; justify-content:space-between; gap:1.25rem; padding:1.5rem 2rem; cursor:pointer; list-style:none; }
.dash-rt-sum::-webkit-details-marker{ display:none; }
.dash-rt-sum:focus-visible{ outline:2px solid rgb(var(--primary)); outline-offset:-2px; }
.dash-rt-main{ display:flex; align-items:center; gap:1.25rem; min-width:0; flex:1; }
.dash-rt-place{ font-family:"Playfair Display",Georgia,serif; font-size:2.5rem; line-height:1; color:rgb(var(--primary)); white-space:nowrap; }
.dash-rt-place small{ font-family:Inter,system-ui,sans-serif; font-size:.8125rem; color:rgb(var(--ink) / .6); margin-left:.35rem; }
.dash-rt-txt{ display:flex; flex-direction:column; gap:.3rem; min-width:0; font-size:.9375rem; line-height:1.45; }
.dash-rt-btn{ border:1px solid rgba(39,7,7,.12); padding:.45rem .85rem; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgb(var(--primary)); white-space:nowrap; }
.dash-rt-btn .is-open{ display:none; }
.dash-rt[open] .dash-rt-btn .is-open{ display:inline; }
.dash-rt[open] .dash-rt-btn .is-closed{ display:none; }
.dash-rt-body{ padding:0 2rem 2rem; }
.dash-rt[open] .dash-rt-sum{ padding-bottom:1rem; }
.dash-rt-body [data-rt-panel] + [data-rt-panel]{ margin-top:2rem; }
.dash-tabs{ display:flex; flex-wrap:wrap; gap:.25rem 1.5rem; border-bottom:1px solid rgba(39,7,7,.12); margin-bottom:1.25rem; }
.dash-tabs[hidden]{ display:none; }
.dash-tabs button{ background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; padding:.55rem 0; font:inherit; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:rgb(var(--ink) / .6); cursor:pointer; }
.dash-tabs button:hover{ color:rgb(var(--primary)); }
.dash-tabs button[aria-selected="true"]{ color:rgb(var(--primary)); border-bottom-color:rgb(var(--primary)); font-weight:600; }
.dash-rt-body [data-rt-panel][hidden]{ display:none; }

.dash-two{ display:grid; gap:1.5rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
.dash-two--one{ grid-template-columns:minmax(0,1fr); }
.dash-req{ display:flex; flex-direction:column; justify-content:space-between; gap:1.25rem; }
.dash-ev{ list-style:none; margin:.75rem 0 0; padding:0; }
.dash-ev-item{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:.85rem 0; border-top:1px solid rgba(39,7,7,.08); }
.dash-ev-item:first-child{ border-top:0; }
.dash-ev-more{ margin-top:.25rem; border-top:1px solid rgba(39,7,7,.08); padding-top:.75rem; }
.dash-ev-more summary{ cursor:pointer; }
.dash-ev-more .dash-ev{ margin-top:.5rem; }

@media (max-width:760px){
  .dash-strip{ grid-auto-flow:row; }
  .dash-cell{ border-left:0; border-top:1px solid rgba(39,7,7,.12); }
  .dash-cell:first-child{ border-top:0; }
  .dash-two{ grid-template-columns:minmax(0,1fr); }
  .dash-rt-sum{ padding:1.25rem; flex-wrap:wrap; }
  .dash-rt-body{ padding:0 1.25rem 1.5rem; }
  .dash-rt-place{ font-size:2rem; }
  .dash-rt-main{ gap:.9rem; }
}

/* «Правка 36»: уведомление о принятой заявке на вступление — торжественная бордовая карточка с гербом */
.app-ok{ scroll-margin-top:6rem; position:relative; overflow:hidden; margin-bottom:2.5rem; padding:2.75rem 2.75rem 2.5rem; text-align:center; background:rgb(var(--primary)); color:rgb(var(--canvas)); border:1px solid rgb(var(--primary)); }
.app-ok::before{ content:""; position:absolute; inset:10px; border:1px solid rgb(var(--canvas) / .22); pointer-events:none; }
.app-ok__crest{ display:block; width:44px; height:auto; margin:0 auto; color:rgb(var(--canvas)); }
.app-ok__eyebrow{ margin-top:1.4rem; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgb(var(--canvas) / .72); }
.app-ok__title{ margin:.6rem 0 .75rem; font-family:"Playfair Display",Georgia,serif; font-weight:400; font-size:2.125rem; line-height:1.15; }
.app-ok__lead{ max-width:46ch; margin:0 auto; line-height:1.6; color:rgb(var(--canvas) / .8); }
.app-ok__num{ display:inline-flex; flex-direction:column; gap:.25rem; margin:1.6rem 0 .4rem; padding:.75rem 1.9rem; border-top:1px solid rgb(var(--canvas) / .28); border-bottom:1px solid rgb(var(--canvas) / .28); }
.app-ok__num span{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgb(var(--canvas) / .66); }
.app-ok__num b{ font-family:"Playfair Display",Georgia,serif; font-weight:500; font-size:2rem; letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.app-ok__steps{ display:flex; max-width:520px; margin:1.75rem auto 0; padding:0; list-style:none; }
.app-ok__steps li{ position:relative; flex:1; padding-top:1.6rem; font-size:12px; color:rgb(var(--canvas) / .66); }
.app-ok__steps li::before{ content:""; position:absolute; top:6px; left:50%; width:11px; height:11px; margin-left:-5.5px; border-radius:50%; border:1px solid rgb(var(--canvas)); background:rgb(var(--primary)); z-index:1; }
.app-ok__steps li::after{ content:""; position:absolute; top:11px; left:50%; width:100%; height:1px; background:rgb(var(--canvas) / .28); }
.app-ok__steps li:last-child::after{ display:none; }
.app-ok__steps li.is-done{ color:rgb(var(--canvas)); }
.app-ok__steps li.is-done::before{ background:rgb(var(--canvas)); }
.app-ok__steps li.is-now::before{ animation:appOkPulse 2s ease-in-out 4; }
.app-ok__note{ max-width:52ch; margin:1.5rem auto 0; font-size:13px; line-height:1.6; color:rgb(var(--canvas) / .8); }
.app-ok__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem; margin-top:1.6rem; }
.app-ok__btn{ display:inline-block; padding:.7rem 1.4rem; border:1px solid rgb(var(--canvas) / .7); color:rgb(var(--canvas)); font-size:12px; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; transition:background .2s,color .2s; }
.app-ok__btn:hover{ background:rgb(var(--canvas) / .12); }
.app-ok__btn--fill{ background:rgb(var(--canvas)); color:rgb(var(--primary)); }
.app-ok__btn--fill:hover{ background:rgb(var(--canvas) / .9); }
.app-ok__btn:focus-visible{ outline:2px solid rgb(var(--canvas)); outline-offset:2px; }
@keyframes appOkPulse{ 0%,100%{ box-shadow:0 0 0 0 rgb(var(--canvas) / .45); } 50%{ box-shadow:0 0 0 7px rgb(var(--canvas) / 0); } }
/* появление: скрипт ставит .is-anim (исходное скрытое состояние), затем .is-play; без скрипта и при «уменьшить анимацию» всё видно сразу */
@media (prefers-reduced-motion:no-preference){
  .app-ok.is-anim .app-ok__crest{ opacity:0; transform:scale(1.5); filter:blur(6px); }
  .app-ok.is-anim .app-ok__i{ opacity:0; transform:translateY(10px); }
  .app-ok.is-play .app-ok__crest{ animation:appOkStamp 1.1s var(--ease-premium) .15s forwards; }
  .app-ok.is-play .app-ok__i{ animation:appOkUp .7s var(--ease-premium) forwards; animation-delay:calc(.9s + var(--i) * 130ms); }
}
@keyframes appOkStamp{ 0%{ opacity:0; transform:scale(1.5); filter:blur(6px); } 65%{ opacity:1; transform:scale(.94); filter:blur(0); } 100%{ opacity:1; transform:scale(1); filter:blur(0); } }
@keyframes appOkUp{ to{ opacity:1; transform:none; } }
@media (max-width:560px){
  .app-ok{ padding:2.1rem 1.15rem 1.9rem; }
  .app-ok__title{ font-size:1.7rem; }
  .app-ok__num b{ font-size:1.65rem; }
  .app-ok__steps li{ font-size:11px; }
}

/* Страница достижений: «N из M получено» и «Текущий сезон» на одной линии; рамка даты с воздухом вокруг текста */
.ach-summary{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:1.5rem; row-gap:.5rem; }
.ach-season{ line-height:1.5; padding-left:1.5rem; border-left:1px solid rgb(var(--primary) / .18); }
.ach-date{ display:inline-block; font-size:.75rem; line-height:1.4; color:rgb(var(--primary)); border:1px solid rgb(var(--primary) / .3); padding:.5rem 1rem; }
@media (max-width:520px){ .ach-season{ padding-left:0; border-left:0; } }

/* ====================================================================
   «Правка 47»: аватарки за достижения — кнопка-аватар с «+», галерея-примерочная, добавки к уведомлению.
   Разметка: pages/_avatar_gallery.html + блок профиля в pages/dashboard.html; логика: js/avatar.js, js/achv-toast.js.
   ==================================================================== */
.av-open{ position:relative; display:block; width:64px; height:64px; border-radius:50%; padding:0; border:0; background:none; cursor:pointer; }
.av-face{ width:64px; height:64px; border-radius:50%; overflow:hidden; background:rgb(var(--primary)); color:rgb(var(--canvas)); font-family:"Playfair Display",Georgia,serif; font-size:1.5rem; display:flex; align-items:center; justify-content:center; transition:filter .3s var(--ease-premium); }
.av-face img{ width:100%; height:100%; object-fit:cover; display:block; }
.av-open:hover .av-face{ filter:brightness(.88); }
.av-plus{ position:absolute; right:-4px; bottom:-4px; width:24px; height:24px; border-radius:50%; background:rgb(var(--canvas)); border:1.5px solid rgb(var(--primary)); color:rgb(var(--primary)); display:flex; align-items:center; justify-content:center; transition:transform .35s var(--ease-premium),background .25s,color .25s; }
.av-plus svg{ width:11px; height:11px; }
.av-plus .av-i-pen{ display:block; }
.av-plus .av-i-plus{ display:none; }
.av-plus.is-plus .av-i-pen{ display:none; }
.av-plus.is-plus .av-i-plus{ display:block; }
.av-open:hover .av-plus,.av-open[aria-expanded=true] .av-plus{ background:rgb(var(--primary)); color:rgb(var(--canvas)); }
.av-open[aria-expanded=true] .av-plus.is-plus{ transform:rotate(45deg); }
.av-open:focus-visible,.av-tile:focus-visible{ outline:2px solid rgb(var(--primary)); outline-offset:4px; }

.av-gal{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease-premium),margin .5s var(--ease-premium); margin-bottom:0 !important; }
.av-gal.open{ grid-template-rows:1fr; margin-bottom:2rem !important; }
.av-gal > div{ overflow:hidden; min-height:0; }
.av-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:1.6rem .5rem; }
.av-tile{ background:none; border:0; padding:0; cursor:pointer; text-align:center; font:inherit; font-size:12px; line-height:1.35; color:rgb(var(--ink) / .6); }
.av-ph{ position:relative; display:block; width:84px; height:84px; margin:0 auto 8px; border-radius:50%; overflow:hidden; isolation:isolate; background:rgb(var(--primary) / .06); }
.av-ph img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.av-ph::before{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(39,7,7,.12); z-index:3; pointer-events:none; }
.av-tile.is-cur .av-ph{ overflow:visible; }
.av-tile.is-cur .av-ph img{ border-radius:50%; }
.av-tile.is-cur .av-ph::before{ inset:-4px; box-shadow:0 0 0 1.5px rgb(var(--primary)); background:none; }
.av-tile.is-hint .av-ph{ overflow:visible; }
.av-tile.locked .av-ph::after,.av-tile.hid .av-ph::after{ border-radius:50%; }
.av-tile.is-hint .av-ph::before{ inset:-4px; box-shadow:0 0 0 1.5px rgb(var(--ink) / .45); }
.av-cap{ display:block; }
.av-tile b{ display:block; font-weight:500; color:rgb(var(--ink)); }
.av-tag{ display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgb(var(--primary)); margin-top:2px; }
.av-tile.locked img{ filter:saturate(.7); }
.av-tile.locked .av-ph::after,.av-tile.hid .av-ph::after{ content:""; position:absolute; inset:0; background:rgba(39,7,7,.22); z-index:1; }
.av-lock{ position:absolute; left:50%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; background:rgba(39,7,7,.78); color:#fff; z-index:2; display:flex; align-items:center; justify-content:center; }
.av-lock svg{ width:17px; height:17px; display:block; }
.av-tile.hid .av-ph{ background:#e6d9d9; }
.av-tile.hid .blob{ position:absolute; inset:-20%; background:radial-gradient(circle at 28% 30%,#b04a55 0,transparent 52%),radial-gradient(circle at 72% 68%,#660810 0,transparent 55%),radial-gradient(circle at 70% 25%,#d9b9a8 0,transparent 45%),#c9a5a5; filter:blur(9px); }
.av-tile.hid .q{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; color:#fff; font-family:"Playfair Display",Georgia,serif; font-size:2.1rem; text-shadow:0 1px 6px rgba(39,7,7,.5); }
.av-tile.ini .av-ph{ background:rgb(var(--primary)); color:rgb(var(--canvas)); display:flex; align-items:center; justify-content:center; font-family:"Playfair Display",Georgia,serif; font-size:1.6rem; }
.av-tile.fresh .av-ph{ animation:avPulse 1.6s ease-out 3; }
@keyframes avPulse{ 0%{ box-shadow:0 0 0 0 rgba(102,8,16,.4); } 100%{ box-shadow:0 0 0 16px rgba(102,8,16,0); } }
.av-info b{ color:rgb(var(--ink)); font-weight:500; }
.av-hd{ display:none; }
@media (prefers-reduced-motion:reduce){ .av-gal,.av-plus{ transition:none; } .av-tile.fresh .av-ph{ animation:none; } }

/* уведомление: вторая карточка «Новая аватарка» (вариант B, согласован с заказчиком) */
.tcard-icon img.av-photo{ width:40px; height:40px; border-radius:50%; object-fit:cover; display:block; }
.achv-actions{ margin-top:8px; }
.achv-try{ background:none; border:0; padding:.25rem 0; cursor:pointer; font:inherit; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgb(var(--primary)); white-space:nowrap; }
.achv-try:hover{ text-decoration:underline; text-underline-offset:.3em; }

/* страница «Достижения»: строка «Награда — аватарка» на карточке достижения */
.ach-reward{ display:flex; align-items:center; gap:.6rem; margin-top:.9rem; padding-top:.8rem; border-top:1px solid rgb(var(--ink) / .08); font-size:.75rem; color:rgb(var(--ink) / .6); }
.ach-reward-av{ position:relative; flex:none; width:28px; height:28px; border-radius:50%; overflow:hidden; background:rgb(var(--primary) / .08); }
.ach-reward-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.ach-reward-av.locked::after{ content:""; position:absolute; inset:0; background:rgba(39,7,7,.28); }
.ach-reward-av.locked svg{ position:absolute; left:50%; top:50%; width:13px; height:13px; margin:-6.5px 0 0 -6.5px; color:#fff; z-index:1; }

/* раздел управления: библиотека фото и выбор аватарки в форме достижения */
.avl-span{ grid-column:1 / -1; }
.avl-count{ margin:3rem 0 1.5rem; }
.avl-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1.5rem 1rem; }
.avl-item{ font-size:12px; line-height:1.4; color:rgb(var(--ink) / .6); }
.avl-item img{ width:96px; height:96px; border-radius:50%; object-fit:cover; display:block; margin-bottom:.5rem; }
.avl-item b{ display:block; font-weight:500; color:rgb(var(--ink)); }
.avp{ display:flex; flex-wrap:wrap; gap:.9rem .5rem; }
.avp-opt{ position:relative; display:block; width:88px; text-align:center; font-size:11px; line-height:1.3; color:rgb(var(--ink) / .6); cursor:pointer; }
.avp-opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.avp-opt img{ width:64px; height:64px; border-radius:50%; object-fit:cover; display:block; margin:0 auto .3rem; box-shadow:0 0 0 1px rgba(39,7,7,.14); transition:box-shadow .2s; }
.avp-opt input:checked + img{ box-shadow:0 0 0 2px rgb(var(--primary)); }
.avp-opt input:focus-visible + img{ outline:2px solid rgb(var(--primary)); outline-offset:3px; }
.avp-opt.taken img{ opacity:.45; }
.avp-opt.taken input:checked + img{ opacity:1; }
.avp-note{ display:block; font-size:10px; color:rgb(var(--ink) / .5); }

/* «Правка 50»: поле-ловушка для ботов — человек его не видит и не заполняет */
.hp-field{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ================================================================
   «Правка 55»: внешний вид (аудит В-01…В-13, В-18, В-21, В-26)
   ================================================================ */
/* В-01: классы, которые использовались в шаблонах, но не попали в собранный tailwind.css */
.py-5{ padding-top:1.25rem; padding-bottom:1.25rem; }
.mt-12{ margin-top:3rem; }
.-mt-2{ margin-top:-.5rem; }
.leading-7{ line-height:1.75rem; }
.list-decimal{ list-style-type:decimal; }
.max-w-4xl{ max-width:56rem; }
.min-h-\[3\.5rem\]{ min-height:3.5rem; }
.min-w-\[560px\]{ min-width:560px; }
.border-canvas\/12{ border-color:rgb(var(--canvas) / .12); }
@media (min-width:640px){
  .sm\:col-span-2{ grid-column:span 2 / span 2; }
  .sm\:grid-cols-\[2fr_1fr_auto_auto\]{ grid-template-columns:2fr 1fr auto auto; }
}
/* активный пункт в строке фильтров (раньше text-ink перекрывался цветом .linklike) */
.linklike.is-active{ color:rgb(var(--ink)); font-weight:600; text-decoration:underline; text-underline-offset:.3em; }
.table-hint{ display:none; margin:0 0 .5rem; font-size:.75rem; color:rgb(var(--ink) / .6); }
.table-hint.is-on{ display:block; }

/* В-18: без теней; служебные цвета — из одной пары (зелёный, янтарный, бордовый) */
::placeholder{ color:rgb(var(--ink) / .45); opacity:1; }

/* В-03: мобильное меню прокручивается на низких экранах */
#mobile-menu{ overflow-y:auto; }
#mobile-menu nav{ justify-content:flex-start; padding-block:1rem; }
@media (min-height:700px){ #mobile-menu nav{ justify-content:center; } }
@media (max-height:600px){ #mobile-menu .mm-link{ font-size:1.5rem; padding-block:.5rem; } }

/* В-05: колонки сетки не шире экрана (нативное поле выбора файла раньше растягивало карточку) */
.mg-grid-2 > *, .mg-grid-3 > *{ min-width:0; }
input[type=file].form-input{ width:100%; max-width:100%; }
@media (max-width:480px){ .mg-grid-2 > .border{ padding:1.25rem; } }

/* В-07, В-34: плашка «Соревнование структур» и двухколоночные блоки кабинета на узких экранах */
@media (max-width:900px){ .dash-two{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:560px){
  .dash-rt-main{ flex:1 1 100%; flex-wrap:wrap; }
  .dash-rt-txt{ flex:1 1 100%; }
  .dash-rt-btn{ width:100%; text-align:center; padding-block:.7rem; }
}

/* В-09: ранги — широкое поле порога, строка по центру */
.rank-row{ grid-template-columns:11rem minmax(0,1fr) auto; align-items:center; }
@media (max-width:560px){ .rank-row{ grid-template-columns:minmax(0,1fr) auto; } .rank-row > :first-child{ grid-column:1 / -1; } }

/* В-10: редактор карточек руководства — подписи одной высоты, поля шире, стрелки рядом */
.order-block__body{ grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); align-items:start; }
@media (min-width:1100px){ .order-block__body{ grid-template-columns:1.7fr 2fr .8fr 1.4fr; } .order-block__body > div:nth-child(5), .order-block__body > div:nth-child(6){ grid-column:span 2; } }
.order-block__body .form-label{ display:flex; align-items:flex-end; min-height:2.6em; }
.order-block__body > div:last-child{ align-self:end; }
select.form-input{ min-height:46px; }
.order-block__order-btn{ width:2.25rem; height:2.25rem; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.order-block__order-btn + .order-block__order-btn{ margin-left:0; }

/* В-21: текст «по ширине» — с автоматическими переносами слов, без «рек» в узких колонках */
.txt-justify{ -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:6 3 3; text-wrap:pretty; overflow-wrap:break-word; }
.mg-table--narrow{ min-width:480px; }
.mg-table--narrow td{ overflow-wrap:anywhere; }

/* ================================================================
   «Правка 56»: внешний вид, остальное (аудит В-14…В-37)
   ================================================================ */
/* В-22: текст не мельче 12 px, бледный серый не бледнее ink/60 */
.text-\[9px\], .text-\[10px\], .text-\[11px\]{ font-size:12px; line-height:1.4; }
.text-ink\/40, .text-ink\/45, .text-ink\/50, .text-ink\/55{ color:rgb(var(--ink) / .6); }
.badge, .mg-table th{ font-size:12px; }

/* В-15: поля и кнопки одной высоты (не ниже 44/46 px) */
.form-input, input.form-input, select.form-input{ min-height:46px; }
textarea.form-input{ min-height:7rem; }
.btn-fill, .btn-frame{ min-height:48px; }

/* В-17: подвал карточки мероприятия — без «пустышки», действия справа, баллы слева */
.ev-foot{ justify-content:flex-end; }
.ev-foot > span:empty{ display:none; }
.ev-foot > :first-child:not(:last-child){ margin-right:auto; }

/* В-14: бегущая строка на телефоне — без подписи, кнопка паузы 40×40 */
.ticker-pause{ width:2.5rem; height:2.5rem; }
@media (max-width:640px){ .ticker-label{ display:none; } }

/* В-23: цели касания на телефоне не меньше ~44 px */
@media (max-width:767px), (pointer:coarse){
  .linklike{ display:inline-flex; align-items:center; min-height:44px; padding-block:.5rem; }
  footer a{ display:inline-block; padding-block:.6rem; }
  .mg-subnav a, .doc-filter-btn, .event-filter-btn{ min-height:44px; display:inline-flex; align-items:center; }
  .doc-download-btn, .link-hover{ padding-block:.6rem; display:inline-block; }
  input[type=checkbox], input[type=radio]{ width:1.25rem; height:1.25rem; }
}

/* В-24: мобильное меню — текущая страница выделена, левый край как у заголовка */
#mobile-menu nav{ padding-inline:1.5rem; }
#mobile-menu .nav-link.is-active, #mobile-menu .mm-link.is-active{ color:rgb(var(--canvas)); border-left:2px solid rgb(var(--canvas)); padding-left:.75rem; }

/* В-27: пустые состояния — один компонент */
.empty-state{ border:1px solid rgba(39,7,7,.12); padding:2.5rem 1.5rem; text-align:center; color:rgb(var(--ink) / .6); font-size:.9375rem; }
.empty-state strong{ display:block; font-family:"Playfair Display",Georgia,serif; font-weight:400; font-size:1.25rem; color:rgb(var(--ink)); margin-bottom:.35rem; }

/* В-31: одна плашка-подсказка — .notice; у варианта без фона и рамки кегль как у остальных */
.notice--warn, .notice--error{ font-size:.875rem; }

/* В-32: карточки кабинета не растягиваются по высоте соседа */
.dash-two{ align-items:start; }

/* В-37: поле с ошибкой подсвечено рамкой */
.form-input[aria-invalid=true], .has-error > .form-input, .form-input.is-invalid{ border-color:rgb(var(--accent)); }

/* В-33: галерея аватарок — 3 колонки на телефоне, плитки по верхней линии */
@media (max-width:480px){ .av-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.av-grid{ align-items:start; }
.gap-1{ gap:.25rem; }
@media (min-width:640px){ .sm\:items-center{ align-items:center; } .sm\:justify-between{ justify-content:space-between; } .sm\:flex-row{ flex-direction:row; } }

/* ===== Правка 57 (В-36, В-38): единый ритм страниц управления ===== */
/* Отступ между заголовком страницы и первым блоком: 40 px, со вкладками — 24 px.
   Если сразу под заголовком идёт пояснительный абзац — он прижат к заголовку (16 px),
   а 40 px отсчитывается уже от него до первого блока. */
.page--manage > div > :first-child + *{ margin-top:2.5rem; }
.page--manage > div > :first-child + p:not(.table-hint){ margin-top:1rem; }
.page--manage > div > :first-child + p:not(.table-hint) + *{ margin-top:2.5rem; }
.page--manage > div > :first-child + .mg-subnav{ margin-top:1.5rem; }
/* подсказка «листайте вправо» вставляется скриптом перед таблицей и сама отступ не задаёт */
.page--manage > div > :first-child + .table-hint:not(.is-on) + *{ margin-top:2.5rem; }
.page--manage > div > :first-child + .table-hint.is-on + *{ margin-top:0; }

/* Три ширины форм: узкая 576 px, средняя 768 px, широкая — вся ширина (карточки с таблицами). */
.page--manage :is(form, .notice, .table-scroll, .border).max-w-md,
.page--manage :is(form, .notice, .table-scroll, .border).max-w-xl{ max-width:36rem; }
.page--manage :is(form, .notice, .table-scroll, .border).max-w-2xl,
.page--manage :is(form, .notice, .table-scroll, .border).max-w-3xl,
.page--manage :is(form, .notice, .table-scroll, .border).max-w-4xl{ max-width:48rem; }