/* ============================================================
   RUSOUND.EVENTS — основной файл стилей
   Страницы собираются из блоков; стили брейкпоинтов общие
   для всего проекта.

   Брейкпоинты (согласовано):
     база 320+  — мобильные, drawer и иконки в шапке
     560        — крупные телефоны
     768        — планшеты
     980        — сетки контента
     1024       — сетки контента страниц
     1366       — шапка полным рядом (навигация + кнопка поиска + кнопки)
     1500       — потолок контейнера
   ============================================================ */

/* ---------- Токены (из дизайн-концепта) ---------- */
:root {
  --bg: #0b0c0f;
  --bg-card: #14161c;
  --bg-card-hover: #1b1e26;
  --border: #23262f;
  --border-bright: #2e3240;
  --text: #eceef2;
  --text-dim: #959ca9;
  --accent: #ff5c1f;
  --accent-2: #ff9a3d;
  --accent-soft: rgba(255, 92, 31, 0.13);
  --accent-glow: rgba(255, 92, 31, 0.35);
  --gold: #ffc84d;
  --green: #4ade80;
  --blue: #5aa2ff;
  --radius: 16px;
  --font-body: "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Russo One", "Manrope", sans-serif;
  --header-h: 62px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Запрет горизонтального скролла документа — на html И body
   (clip, а не hidden: не ломает position: sticky шапки) */
html { overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* sticky footer: колонка на всю высоту viewport (100dvh — айфон),
     main растягивается и прижимает футер к низу, когда контента мало */
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
}

main {
  flex: 1 0 auto; /* растягиваем контент, отталкивая футер вниз */
  width: 100%;
}

.footer { flex-shrink: 0; }

/* Блокировка скролла страницы при открытом drawer —
   блокируем и html, и body, иначе остаётся двойной скролл */
html.no-scroll, body.no-scroll { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }

::selection { background: var(--accent); color: #fff; }

/* ---------- Контейнер: потолок 1500px ---------- */
.container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; /* отступ иконки от текста; у кнопки с одним текстом gap не виден */
  border-radius: 10px; font-size: 14px; font-weight: 700;
  padding: 10px 18px; white-space: nowrap;
  /* единая высота всех кнопок: инпуты рядом с ними — 42px (см. .auth-input),
     min-height, а не height — чтобы кнопка росла при переполнении текста.
     Свой line-height обязателен: без него наследуется 1.55 от body и
     «призрачные» кнопки с рамкой вырастают до ~44px, перекрывая min-height */
  min-height: 42px;
  line-height: 1.2;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.btn-accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 4px 18px var(--accent-glow);
}
.btn-accent:hover { transform: translateY(-1px); box-shadow: 0 6px 24px var(--accent-glow); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-bright); }
.btn-ghost:hover { background: var(--bg-card-hover); border-color: var(--text-dim); }
.btn-block { width: 100%; }

/* Иконочные кнопки (поиск, бургер, закрытие) */
.icon-btn {
  display: none; /* по умолчанию (десктоп) скрыты, показываем по брейкпоинтам */
  align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  color: var(--text-dim);
  transition: color 0.15s, background 0.15s;
}
.icon-btn:hover { color: var(--text); background: var(--bg-card-hover); }

/* Кнопка поиска — видна на всех ширинах; строка поиска раскрывается
   под шапкой (панель .header-search-panel), margin-left:auto прижимает
   её вместе с кнопками действий к правому краю */
.search-toggle { display: inline-flex; margin-left: auto; }

/* ============================================================
   ШАПКА
   ============================================================ */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 12, 15, 0.88);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex; align-items: center; gap: 16px;
  height: var(--header-h);
}

/* Логотип с эквалайзером — низ полосок совпадает с низом букв.
   Размер ~20px, чтобы бренд не терялся рядом с правой частью шапки
   (кнопки/чип ~44px высотой). line-height плотный (1.15): строковый бокс
   должен быть сравним с блоком эквалайзера (18px + 8px), иначе при
   центрировании в шапке базовая линия букв уезжает ниже текста меню.
   row-reverse: текст первым в DOM (базовая линия лого как flex-элемента
   считается от текста — иначе браузер синтезирует её от низа блока
   эквалайзера и выравнивание рядом с лого «плывёт»), эквалайзер при
   этом остаётся слева */
.logo {
  display: flex; align-items: flex-end; flex-direction: row-reverse; gap: 10px;
  font-family: var(--font-display);
  font-size: 20px; line-height: 1.15; letter-spacing: 0.5px; white-space: nowrap;
}
.logo-accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* margin-bottom компенсирует нижний выносок строки, чтобы низ полосок
   совпадал с визуальным низом букв (а не с нижней кромкой строки) */
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; margin-bottom: 4px; }
.eq span {
  width: 3px; height: 100%; border-radius: 2px;
  background: var(--accent); transform-origin: bottom;
  animation: eq-bar 1.1s ease-in-out infinite;
}
.eq span:nth-child(2) { animation-delay: 0.12s; }
.eq span:nth-child(3) { animation-delay: 0.28s; }
.eq span:nth-child(4) { animation-delay: 0.42s; }
.eq span:nth-child(5) { animation-delay: 0.18s; }
@keyframes eq-bar {
  0%, 100% { transform: scaleY(0.25); }
  50% { transform: scaleY(1); }
}
/* Уважение к настройке «меньше движения»: анимация эквалайзера отключается */
@media (prefers-reduced-motion: reduce) {
  .eq span { animation: none; }
}
/* В футере эквалайзер статичный — «замершие» полоски разной высоты */
.footer .eq span { animation: none; }
.footer .eq span:nth-child(1) { transform: scaleY(0.55); }
.footer .eq span:nth-child(2) { transform: scaleY(0.9); }
.footer .eq span:nth-child(3) { transform: scaleY(1); }
.footer .eq span:nth-child(4) { transform: scaleY(0.7); }
.footer .eq span:nth-child(5) { transform: scaleY(0.5); }

/* Навигация (десктоп) — без «пилюль»: фона и скруглений нет, отступы
   только через gap. Подчёркивание активного пункта — ::after-полоска
   в нижнем паддинге ссылки: padding-bottom = зазор (3px) + толщина (2px).
   Отрицательный margin-bottom — ручная подгонка базовых линий: шапка
   центрирует блоки, но базовая линия Russo One (лого 20px) сидит ниже,
   чем у Manrope 14px (пункты), без подгонки текст меню визуально «висит
   в середине» лого (~6px выше базовой линии букв) */
.nav { display: flex; gap: 20px; margin-bottom: -9px; }
.nav a {
  position: relative;
  padding-bottom: 5px;
  color: var(--text-dim); font-size: 14px; font-weight: 600;
  transition: color 0.15s;
}
.nav a:hover { color: var(--text); }
.nav a.active { color: var(--text); }
.nav a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--accent);
}

/* Поиск в шапке */
.search {
  flex: 1; min-width: 0; max-width: 300px;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px;
  color: var(--text-dim);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--text); }
.search input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--text); font-family: inherit; font-size: 14px;
}
.search input::placeholder { color: var(--text-dim); }

.header-actions { display: flex; gap: 10px; }

/* Выпадающая панель поиска под шапкой — скрыта по умолчанию,
   открывается классом .search-open (вешает header.js на <header>).
   position:absolute — выпадает ПОВЕРХ контента, не отталкивая его
   (якорь — .header, у него position:sticky, это тоже позиционирование) */
.header-search-panel {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  z-index: 49; /* ниже drawer/overlay (60/70), выше контента */
  background: var(--bg-card); border-bottom: 1px solid var(--border);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.45);
  padding: 12px 0 16px;
}
.header.search-open .header-search-panel { display: block; }
.header-search-panel .search { max-width: none; }

/* Выпадашка результатов поиска — поверх контента внутри панели,
   заполняется JS (позже: Vue) по мере ввода запроса */
.search-results { margin-top: 10px; }

/* ---------- Выезжающее меню (drawer) ---------- */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 60;
  /* 100dvh вместо 100%/inset: панель не прыгает при схлопывании
     адресной строки Safari на айфоне */
  height: 100vh; height: 100dvh;
  background: rgba(5, 6, 8, 0.6);
  opacity: 0; visibility: hidden;
  /* переход включается JS (.is-booted на body) после первой отрисовки —
     иначе при загрузке страницы оверлей может мелькнуть */
}
.drawer {
  position: fixed; top: 0; right: 0; z-index: 70;
  width: 320px; max-width: 88vw;
  height: 100vh; height: 100dvh;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  padding: 16px 20px 24px;
  display: flex; flex-direction: column; gap: 18px;
  transform: translateX(100%);
  visibility: hidden; /* не участвует в переполнении страницы, когда закрыт */
  overflow-y: auto;
  overscroll-behavior: contain; /* скролл drawer не цепляет страницу */
}
/* Переходы — только после первой отрисовки страницы (класс .is-booted
   ставит header.js через двойной requestAnimationFrame). Без этого при
   загрузке (пока догружаются CSS/шрифты) drawer виден в исходном
   состоянии, а применение transform затем анимируется — меню «уезжает»
   за экран на глазах. С .is-booted первое применение стилей мгновенное. */
body.is-booted .drawer { transition: transform 0.25s ease, visibility 0.25s; }
body.is-booted .drawer-overlay { transition: opacity 0.2s, visibility 0.2s; }
/* Открытое состояние (класс .nav-open вешает header.js на <body>) */
body.nav-open .drawer { transform: translateX(0); visibility: visible; }
body.nav-open .drawer-overlay { opacity: 1; visibility: visible; }

.drawer-head { display: flex; align-items: center; justify-content: space-between; }
.drawer-title { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.5px; }
.drawer-head .icon-btn { display: inline-flex; }

/* Как .nav: без «пилюль», активный пункт — вертикальная акцентная
   полоса слева (inset-тень) + светлый текст */.drawer-nav { display: flex; flex-direction: column; gap: 2px; }
.drawer-nav a {
  padding: 10px 12px;
  color: var(--text-dim); font-size: 15px; font-weight: 600;
  transition: color 0.15s;
}
.drawer-nav a:hover { color: var(--text); }
.drawer-nav a.active { color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.drawer-actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

/* ---------- Бургер: иконка Tabler menu (SVG, см. header.php) ---------- */

/* ============================================================
   БРЕЙКПОИНТЫ ШАПКИ
   ============================================================ */

/* 768–1365px: двухрядная шапка как у Ozon. Полный один ряд
   (9 пунктов + кнопка поиска + 2 кнопки ≈ 1130px) помещается только
   с 1366px, поэтому на планшетах/небольших ноутбуках: верх — лого,
   кнопка поиска, кнопки; низ — навигация на всю ширину.
   Drawer здесь не нужен.
   Условие строго «меньше» точки: 1366px уже относится к полному ряду. */
@media (width < 1366px) {
  /* только вертикальные паддинги — горизонтальные остаются от .container,
     иначе короткая запись padding:10px 0 обнулила бы их до 1365px */
  .header-inner { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; gap: 10px 12px; }
  .search-toggle { order: 2; }
  .header-actions { order: 3; margin-left: 0; display: flex; }
  .nav { order: 4; flex-basis: 100%; }
  /* burger — последним, чтобы не вскакивал перед кнопкой поиска
     (у него дефолтный order:0) */
  .burger { order: 5; display: none; }
}

/* <768px: мобильная шапка — лого, иконка поиска (строка раскрывается
   под шапкой), бургер; навигация и кнопки — в drawer.
   Условие строго «меньше» точки: 768px уже относится к двухрядке. */
@media (width < 768px) {
  /* padding не трогаем — горизонтальные отступы даёт .container */
  .header-inner { flex-wrap: nowrap; gap: 12px; }
  .nav, .header-actions { display: none; }
  .burger { display: inline-flex; }
}

/* 560px: компактные отступы. Условие строго «меньше» точки:
   560px уже относится к диапазону 561–767. */
@media (width < 560px) {
  /* только горизонтальные паддинги — короткая запись padding:0 16px
     сбросила бы вертикальные у .header-inner (он тоже .container) */
  .container { padding-left: 16px; padding-right: 16px; }
  .header-inner { gap: 12px; }
  .logo { font-size: 16px; }
  .drawer { width: 100%; max-width: none; border-left: none; }
}

/* ============================================================
   ФУТЕР
   ============================================================ */
.footer {
  border-top: 1px solid var(--border);
  padding: 40px 0 32px; margin-top: 48px;
}
.footer-inner { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
/* заголовок всегда на всю ширину блока-родителя (в grid — на все колонки) */
.footer-col-title { margin: 0 0 10px; font-size: 14px; font-weight: 700; grid-column: 1 / -1; }
/* сетка ссылок общая для обоих меню (Информация и Разделы) —
   nav-обёртки (.footer-nav, .footer-sections) сеткой не являются */
.footer-sections-grid { display: grid; grid-template-columns: repeat(2, auto); gap: 6px 40px; }
/* ссылки — по ширине текста (иначе как grid-items растянутся на дорожку
   и подчёркивание активного пункта займёт всю колонку, а не текст) */
.footer-sections-grid a { position: relative; justify-self: start; margin-bottom: 5px; color: var(--text-dim); font-size: 14px; transition: color 0.15s; }
.footer-sections-grid a:hover { color: var(--text); }
/* активный пункт — как в шапке: ::after-полоска, зазор 3px + толщина 2px.
   Полоска уходит за нижнюю кромку ссылки (bottom: -5px), чтобы высота
   строк сетки не менялась */
.footer-sections-grid a.active { color: var(--text); }
.footer-sections-grid a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px;
  height: 2px; background: var(--accent);
}
.footer-digest-title { font-size: 14px; font-weight: 700; }
.digest { display: flex; gap: 8px; margin-top: 8px; }
.digest input {
  flex: 1; min-width: 0; width: 220px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; color: var(--text);
  font-family: inherit; font-size: 14px; outline: none;
  /* одна высота с кнопкой «Подписаться» в этом же блоке (см. .digest .btn);
     свой line-height, иначе наследуется 1.55 от body и поле выше min-height */
  min-height: 40px;
  line-height: 1.2;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.digest input::placeholder { color: var(--text-dim); }
.digest input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Кнопка подписки — того же размера, что и поле рядом */
.digest .btn { min-height: 40px; }
.footer-copy { display: block; color: var(--text-dim); margin-top: 24px; font-size: 13px; }

/* ≥1024px: без растягивания space-between — обе менюшки группой
   после лого слева, дайджест прижат вправо */
@media (width >= 1024px) {
  .footer-inner { justify-content: flex-start; gap: 48px; }
  .footer-digest { margin-left: auto; }
}
/* 1024–1199px: группе не хватает места с десктопными промежутками —
   сжимаем gap'ы, чтобы «О проекте» не переносилось на две строки */
@media (1024px <= width < 1200px) {
  .footer-inner { gap: 32px; }
  .footer-sections-grid { column-gap: 24px; }
}

/* 768–1023px: лого отдельной строкой, ниже три колонки —
   Информация | Разделы | дайджест (полный ряд из 4 колонок сюда не влезает) */
@media (768px <= width < 1024px) {
  .footer-inner { display: grid; grid-template-columns: auto auto 1fr; gap: 0 24px; justify-content: start; align-items: baseline; }
  /* лого своей строкой; justify-self: start обязателен — без него растянутый
     на всю строку grid-айтем с row-reverse во флексе прижимает содержимое вправо */
  .footer-inner > .logo { grid-column: 1 / -1; justify-self: start; margin-bottom: 24px; }
  /* первое меню — одна колонка, второе — две (gap уже общий) */
  .footer-nav .footer-sections-grid { grid-template-columns: 1fr; gap: 6px; }
  .footer-sections-grid { gap: 6px 24px; }
  .footer-digest { grid-column: 3; justify-self: end; }
}

/* <768px: футер в одну колонку — все блоки-соседи в стек,
   вертикальный ритм — единый gap 24px, дайджест на всю ширину */
@media (width < 768px) {
  .footer-inner { flex-direction: column; }
  .footer-digest, .digest { width: 100%; }
  .digest input { width: auto; }
}

/* 560–767px: три колонки в один ряд — лого | статические | разделы,
   дайджест ниже на всю ширину. Блоки — прямые дети .footer-inner,
   поэтому сетку задаём одним правилом, без display:contents */
@media (560px <= width < 768px) {
  /* все колонки auto + space-between: без переносов внутри ссылок,
     свободное место распределяется между колонками.
     Элементы размещены явно (auto-placement подходит не всем блокам) */
  .footer-inner { display: grid; grid-template-columns: auto auto auto; gap: 0 24px; justify-content: start; align-items: baseline; }
  .footer-digest { grid-column: 1 / -1; width: 100%; margin-top: 24px; }
  /* первое меню — одна колонка, разделы — как на десктопе, две */
  .footer-nav .footer-sections-grid { grid-template-columns: 1fr; gap: 6px; }
  .footer-sections-grid { column-gap: 24px; }
}


/* ============================================================
   НИЖНЯЯ НАВИГАЦИОННАЯ ПАНЕЛЬ (mobile tab bar)
   Видна только <768px — паттерн из мобильных приложений:
   ключевые разделы под большим пальцем, drawer для остального.
   ============================================================ */
.tabbar { display: none; }

@media (width < 768px) {
  /* Отступ под панель, чтобы контент не перекрывался (важно и для SEO) */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

  .tabbar {
    display: flex; align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: rgba(11, 12, 15, 0.95);
    backdrop-filter: blur(14px) saturate(1.4);
    border-top: 1px solid var(--border);
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
  }

  .tabbar a, .tabbar button {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-width: 0; padding: 6px 0; border-radius: 10px;
    color: var(--text-dim); font-size: 11px; font-weight: 600;
    transition: color 0.15s, background 0.15s;
  }
  .tabbar a:hover, .tabbar button:hover { color: var(--text); background: var(--bg-card-hover); }
  .tabbar a.active { color: var(--accent); }

  /* Центральная акцентная кнопка «Создать» */
  .tabbar .tabbar-create {
    flex: 0 0 auto; align-self: center;
    width: 46px; height: 46px; margin: 0 6px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    box-shadow: 0 4px 18px var(--accent-glow);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .tabbar .tabbar-create:hover { transform: translateY(-2px); box-shadow: 0 6px 24px var(--accent-glow); }
}

/* ============================================================
   АВТОРИЗАЦИЯ (auth-страницы)
   Карточка формы по центру, вкладки email/телефон, алерты.
   Все auth-страницы закрыты от индексации (meta noindex в лейауте).
   ============================================================ */
.auth-wrap {
  max-width: 420px;
  width: 100%;
  margin: 48px auto 64px;
}

.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}

.auth-title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}

/* Поля форм */
.auth-field { margin-bottom: 16px; }
.auth-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
/* Подсказка под полем/секцией (счётчики, пояснения) — мелкий приглушённый текст */
.auth-field-hint {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-dim);
}
/* Одиночная подсказка секции редактора (над списком строк этапов/состава):
   тот же воздух снизу, что между полем и его содержимым — без слипания */
.build-editor-section > .auth-field-hint { margin-bottom: 10px; }
.auth-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  /* Фиксированная высота поля: совпадает с min-height кнопки в .auth-form,
     чтобы инпут и кнопка в одной форме были одного размера. Свой line-height
     обязателен: без него наследуется 1.55 от body и поле вырастает до ~43.5px,
     перекрывая min-height (оно не ужимает, только выравнивает снизу) */
  min-height: 42px;
  line-height: 1.2;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-input::placeholder { color: var(--text-dim); }
/* Textarea на базе .auth-input: тянется только по вертикали — иначе
   пользователь может растянуть её за границы карточки по горизонтали */
textarea.auth-input { resize: vertical; max-width: 100%; }
/* Невалидное поле: рамка цвета ошибки (класс вешает Vue по errors из JSON) */
.auth-input-error,
.auth-input.auth-input-error {
  border-color: var(--accent-2);
}
.auth-input-error:focus,
.auth-input.auth-input-error:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.auth-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.auth-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.45;
}
/* Кнопка отправки формы — в один ряд с .auth-input (42px): у кнопки нет рамки,
   поэтому выравнивание идёт через тот же min-height, а не через padding */
.auth-form .btn-block { margin-top: 4px; }
.auth-form .btn { min-height: 42px; }

/* Пояснения и вторичные ссылки под формой */
.auth-note {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.55;
}
.auth-card-center .auth-note { margin-top: 4px; }
.auth-alt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-dim);
}
.auth-alt a, .auth-link-btn {
  color: var(--text);
  font-weight: 700;
  transition: color 0.15s;
}
.auth-alt a:hover, .auth-link-btn:hover { color: var(--accent-2); }
/* Зазор между текстом-вопросом и кнопкой-ссылкой в одной строке
   («Нет аккаунта? [Регистрация]») — без него слова слипаются */
.auth-alt span > .auth-link-btn { margin-left: 6px; }
/* Кнопка-ссылка «Отправить повторно» внутри строки */
.auth-inline-form { display: inline; }
.auth-link-btn { font-size: 14px; padding: 0; }

/* Разделитель перед соцвходами */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
  color: var(--text-dim);
  font-size: 13px;
}
.auth-divider::before, .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Соцвходы — фирменные цвета провайдеров, иконки наследуют color.
   Desktop-first: в ряд по три, на узких экранах — столбик */
.auth-social { display: flex; gap: 10px; }
.auth-social > * { flex: 1; min-width: 0; }
.auth-social-form { margin: 0; display: flex; } /* форма-кнопка MAX не добавляет отступы */
.auth-social-form .btn-social { flex: 1; }
.btn-social { justify-content: center; gap: 8px; padding: 10px 12px; font-size: 14px; min-height: 42px; }
.btn-yandex { background: #ffcc00; color: #111; }
.btn-yandex:hover { background: #ffd633; }
.btn-vk { background: #0077ff; color: #fff; }
.btn-vk:hover { background: #1a8aff; }
@media (width < 560px) {
  .auth-social { flex-direction: column; }
}
/* MAX — фирменный фиолетовый мессенджера */
.btn-max { background: #8b5cf6; color: #fff; }
.btn-max:hover { background: #9d74f7; }

/* Flash-сообщения (ошибки/успех) */
.auth-alert {
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}
.auth-alert-error {
  background: var(--accent-soft);
  border: 1px solid rgba(255, 92, 31, 0.4);
  color: var(--accent-2);
}
.auth-alert-success {
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: var(--green);
}

/* Чип авторизованного пользователя в шапке и drawer.
   Высота (42px: аватар 30 + padding 5+5 + рамка 1+1) намеренно совпадает
   с кнопками .btn — иначе после входа правая часть шапки визуально
   «уменьшалась» по сравнению с гостевой («Создать проект» + «Войти»). */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  padding: 5px 14px 5px 5px;
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  transition: border-color 0.15s, background 0.15s;
}
.user-chip:hover { background: var(--bg-card-hover); border-color: var(--text-dim); }
/* Аватар: нейтральный круг с иконкой пользователя, если фото нет —
   оранжевый акцент на заглушке «мозолит глаза» и конкурирует с CTA-кнопкой.
   Загруженное фото полностью перекрывает фон (img 100% + object-fit) */
.user-chip-avatar {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-card-hover);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 800;
}
.user-chip-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
}

/* Форма выхода рядом с чипом (кнопка «Выйти») —
   отдельный компактный padding больше не нужен: высота задаётся базовым .btn */
.logout-form { display: inline-flex; }

/* В drawer чип и «Выйти» — на всю ширину */
.user-chip-block { width: 100%; max-width: none; }
.logout-form-block { display: flex; }
.logout-form-block .btn { width: 100%; }

/* Адаптив: компактные отступы карточки на узких экранах */
@media (width < 560px) {
  .auth-wrap { margin: 24px auto 48px; }
  .auth-card { padding: 20px; }
  .auth-title { font-size: 20px; }
}

/* ============================================================
   АВТОРИЗАЦИЯ В ШАПКЕ НА VUE (header-auth.js)
   Модальный диалог, выпадающее меню чипа, ошибки у полей.
   Без JS остаётся серверный рендер — эти стили ему не мешают.
   ============================================================ */

/* Ошибка валидации под полем (Vue показывает по errors из JSON) */
.auth-field-error {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--accent-2);
}

/* Модальный оверлей: выше drawer (70) и панели поиска */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 6, 8, 0.72);
}
.auth-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--text-dim);
  transition: color 0.15s, background 0.15s;
}
.modal-close:hover { color: var(--text); background: var(--bg-card-hover); }

/* Обёртка чипа с выпадающим меню */
.header-user { position: relative; }
.user-chip-caret { display: inline-flex; color: var(--text-dim); flex-shrink: 0; }

/* Выпадающее меню чипа */
.user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px; /* ровный зазор между пунктами, как по вертикали, так и к краям (padding) */
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
/* Пункты меню — в масштабе чипа: высота строки ~44px, как сам чип
   с аватаром 32px; иконки 18px (SVG в шаблоне заданы 16px — правим тут).
   Переносы запрещены: меню вправо от чипа может расти по ширине
   (min-width 200px — нижняя граница, не потолок) */
.user-menu a, .user-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.user-menu a svg, .user-menu button svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.user-menu a:hover, .user-menu button:hover {
  color: var(--text);
  background: var(--bg-card-hover);
}

/* No-JS фолбэк меню кабинета: те же пункты, что в выпадашке чипа,
   но статичным списком в потоке (внутри <noscript>) */
.user-menu-noscript {
  position: static;
  min-width: 0;
  margin-top: 8px;
  box-shadow: none;
}

/* Пункты кабинета в drawer: иконка слева от подписи в одну строку */
.drawer-menu-link { justify-content: flex-start; gap: 10px; }
.drawer-menu-link svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Обёртка иконки пункта меню в Vue-шаблонах: без inline-flex SVG внутри
   span встаёт по базовой линии и «уезжает» вверх относительно текста */
.menu-item-icon { display: inline-flex; flex-shrink: 0; }

/* Адаптив диалога: компактные поля на узких экранах */
@media (width < 560px) {
  .modal-overlay { padding: 12px; }
  .auth-modal { max-height: calc(100dvh - 24px); padding: 20px; }
}

/* ============================================================
   ПОСТОЯННАЯ АВТОРИЗАЦИЯ (reauth) + ИСТОРИЯ ВХОДОВ
   reauth выдаётся при каждом входе; страница /account/sessions.
   ============================================================ */

/* Иконка-ссылка в шапке (серверный фолбэк «Устройства и входы») */
.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--text-dim);
  transition: color 0.15s, background 0.15s;
}
.icon-link:hover { color: var(--text); background: var(--bg-card-hover); }

/* Страница истории входов */
.sessions {
  max-width: 720px;
  margin: 40px auto 64px;
}
.sessions-head {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0 14px;
}
.sessions-empty {
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 14px;
}
.sessions-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sessions-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.sessions-item-current { border-color: var(--border-bright); }
.sessions-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-2);
}
.sessions-info { flex: 1; min-width: 0; }
.sessions-device {
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.sessions-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 700;
}
/* Плашка «подтверждён» в строке «Текущий email»: Vue при компиляции
   шаблона схлопывает пробельный текст между </b> и <span>, без явного
   отступа плашка прилипает к адресу */
.auth-note .sessions-badge { margin-left: 8px; vertical-align: 1px; }
.sessions-meta {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}
.sessions-revoke { flex-shrink: 0; }

/* Адаптив: компактные карточки на узких экранах */
@media (width < 560px) {
  .sessions { margin: 24px auto 48px; }
  .sessions-item { flex-wrap: wrap; }
  .sessions-revoke { width: 100%; }
  .sessions-revoke .btn { width: 100%; }
}

/* ============================================================
   ЛИЧНЫЙ КАБИНЕТ — каркас (layouts/account.php)
   Два элемента из blocks/account/sidebar.php, вид переключается CSS:
     <980px  — карточка пользователя статично вверху страницы (уезжает
              при скролле), под ней горизонтальная лента вкладок sticky
              под шапкой;
     ≥980px  — сетка: левая колонка — карточка (первый ряд) и сайдбар
              со вертикальным меню (второй ряд, sticky), справа контент.
   ============================================================ */
.account-container { padding-top: 0; }
.account-content { min-width: 0; }

/* Обёртка левой колонки (карточка + навигация): на mobile растворяется
   (display: contents) — липкая лента вкладок цепляется к .account-container,
   как раньше; на desktop становится grid-item на всю высоту колонки */
.account-side { display: contents; }

/* Карточка пользователя: аватар, имя, группы, рейтинги, звание, стаж.
   Mobile-first — видна сразу под шапкой; ≥980px сетка кладёт её
   в левую колонку над меню */
.account-user {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 12px 0 0; padding: 12px 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s;
}
.account-user:hover { border-color: var(--border-bright); }
.account-user-avatar {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-2);
  overflow: hidden;
}
.account-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* правая колонка карточки: имя, группы, рейтинги, звание, стаж —
   min-width: 0, чтобы длинное имя резалось многоточием, а не толкало аватар */
.account-user-info {
  min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.account-user-name {
  font-size: 15px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* звание — по децибелам, акцентом; рейтинги и стаж — приглушённо */
.account-user-rank {
  font-size: 12px; font-weight: 700;
  color: var(--accent-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-user-scores {
  font-size: 12px; font-weight: 600;
  color: var(--text-dim); font-variant-numeric: tabular-nums;
}
/* бейджи групп RBAC («Модератор», «Администратор»); базовая группа
   'user' в разметку не попадает — у всех и не несёт информации */
.account-user-groups { display: flex; flex-wrap: wrap; gap: 4px; }
.account-user-group {
  padding: 1px 8px;
  border: 1px solid var(--border-bright); border-radius: 999px;
  font-size: 11px; font-weight: 600; color: var(--text-dim);
}
.account-user-tenure { font-size: 12px; color: var(--text-dim); }
/* Прогресс до следующего звания в карточке: компактный бар + подпись
   «ещё N дБ до …»; сам бар — общие .progress-bar/.progress-fill
   (переиспользуем). Вертикальный ритм карточки держим только на
   flex-gap родителя и этого gap'а — без подмесов margin-top, иначе
   отступы между строками скачут (базовый margin у .progress-bar
   обнуляем, он для связки с подписью .progress) */
.account-user-rankbar { display: flex; flex-direction: column; gap: 3px; }
.account-user-rankbar .progress-bar { margin-top: 0; height: 4px; }
.account-user-rankbar-note {
  display: block;
  font-size: 11px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Лента вкладок (mobile-first): sticky под шапкой, полный блид
   за пределы .container через отрицательные маржины, фон с блюром —
   контент при скролле не просвечивает сквозь ленту. Карточка липнуть
   не должна — sticky остаётся на обёртке-ленте, а карточка уезжает */
.account-sidebar {
  /* top на 1px выше высоты шапки с компенсацией паддингом: закрывает
     субпиксельную щель между шапкой и лентой, сквозь которую при
     скролле просвечивал контент (визуальное положение ленты не меняется) */
  position: sticky; top: calc(var(--header-h) - 1px); z-index: 40;
  margin: 12px -20px 0; padding: 11px 20px 10px;
  background: rgba(11, 12, 15, 0.92);
  backdrop-filter: blur(10px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.account-nav {
  display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
  /* затухание правого края — намёк, что лента прокручивается
     (-webkit- — для Safari) */
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.account-nav::-webkit-scrollbar { display: none; }
.account-nav a {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; min-height: 38px;
  border: 1px solid var(--border-bright); border-radius: 999px;
  color: var(--text-dim); font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.account-nav a:hover { color: var(--text); background: var(--bg-card-hover); }
.account-nav a.active {
  color: #fff;
  background: var(--accent-soft);
  border-color: var(--accent);
}
/* Контент кабинета — единый узкий внутренний блок (720px), прижат
   к левому краю колонки: все разделы (профиль, сессии, заглушки) и все
   карточки секции одной ширины, без растяжения на всю сетку */
.account-content { max-width: 720px; padding-bottom: 48px; }
/* Широкие разделы (флаг wide в карте секций кабинета): контент занимает
   всё свободное место сетки — табличные списки («Мои проекты») */
.account-content--wide { max-width: none; }
/* Поля секций внутри блока: авто-центровка .sessions не нужна */
.account-content .sessions { max-width: none; margin: 20px 0 0; }
/* Единый отступ между карточками секции (Vue-карточки анкеты и
   серверные .profile-card) — одна величина на все разделы */
.account-section { margin-bottom: 20px; }
/* no-JS фолбэк анкеты: формы подряд, тот же шаг, чтобы блоки не липли */
.account-content .sessions > form { margin: 0 0 20px; }

/* Заглушка раздела кабинета (blocks/account/stub.php); нижний воздух
   колонки — единый padding-bottom у .account-content */
.account-stub { margin: 20px 0 0; }
.account-stub-card {
  display: flex; align-items: center; gap: 14px;
  margin-top: 16px; padding: 20px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim); font-size: 14px;
}
.account-stub-card svg { flex-shrink: 0; color: var(--accent-2); }

/* ------------------------------------------------------------
   «РЕЙТИНГ» (blocks/account/rating.php)
   Раздел кабинета: звание с прогрессбаром, тарифы начисления и
   личная статистика. Карточки — тот же приём, что .sessions-item
   ------------------------------------------------------------ */
.rating { margin: 20px 0 0; }
.rating-card {
  padding: 20px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.rating-card .progress { margin-top: 14px; color: var(--text-dim); }
.rating-rank-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rating-rank-label { font-size: 13px; color: var(--text-dim); }
.rating-rank-name {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  color: var(--accent-2);
}
.rating-rank-note { margin-top: 8px; font-size: 13px; color: var(--text-dim); }
.rating-rank-note-top { margin-top: 12px; }
.rating-scores {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-dim);
}
.rating-scores b { color: var(--text); font-variant-numeric: tabular-nums; }
.rating-subtitle { margin: 0 0 12px; font-size: 17px; font-weight: 700; }
/* Тарифы начисления: строки «действие → очки» */
.rating-awards {
  list-style: none; display: flex; flex-direction: column; gap: 8px;
}
.rating-award {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
}
.rating-award-label { min-width: 0; }
.rating-award-points {
  flex-shrink: 0;
  font-size: 13px; font-weight: 700; color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}
/* Примечание под таблицей тарифов (рубежи за комментарии — не фикс. тариф) */
.rating-awards-note {
  margin: 12px 0 0; padding: 12px 16px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px; color: var(--text-dim); line-height: 1.55;
}
.rating-awards-note b { color: var(--text); }
/* Личная статистика: плитки счётчиков */
.rating-stats {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.rating-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.rating-stat b {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rating-stat span { font-size: 12px; color: var(--text-dim); }
@media (width >= 560px) {
  .rating-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Галочка верификации рядом с именем (View::verifiedBadge, users.verified):
   синий круг с белой галочкой — декоративный маркер после имени */
.verified-badge { display: inline-block; vertical-align: -2px; margin-left: 4px; }

/* Ссылка на публичный профиль пользователя (View::userLink): выглядит
   как обычный текст того же цвета/веса, hover — акцент. Общий класс для
   всех мест вывода пользователей (комментарии, байлайны, Q&A) */
/* Ссылка на публичный профиль: наследует оформление места; часто
   оборачивает пару «аватар + имя» одним <a> — держим их inline-flex
   с зазором (иначе аватар прилипает к имени, flex-gap шапки между
   ними больше не работает) */
.user-link { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.user-link:hover { color: var(--accent-2); }

/* ------------------------------------------------------------
   ПУБЛИЧНЫЙ ПРОФИЛЬ ПОЛЬЗОВАТЕЛЯ (blocks/user/*)
   /user/id{N}: hero (аналог карточки кабинета) + секции публичного
   контента (проекты/статьи — переиспользуемые карточки, Q&A — компактные
   строки)
   ------------------------------------------------------------ */
.user-hero {
  display: flex; align-items: flex-start; gap: 18px;
  margin: 24px 0 8px; padding: 22px 24px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.user-hero-avatar {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  background: var(--accent-soft); color: var(--accent-2);
}
.user-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-hero-info { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.user-hero-name {
  margin: 0;
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis;
}
.user-hero-groups { display: flex; flex-wrap: wrap; gap: 4px; }
.user-hero-group {
  padding: 1px 8px;
  border: 1px solid var(--border-bright); border-radius: 999px;
  font-size: 11px; font-weight: 600; color: var(--text-dim);
}
.user-hero-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); }
.user-hero-about { margin: 2px 0 0; font-size: 14px; color: var(--text); line-height: 1.6; overflow-wrap: break-word; }
.user-hero-rank { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.user-hero-rank .progress-bar { flex: 0 1 220px; height: 5px; margin-top: 0; }
.user-hero-rank-name { font-size: 14px; font-weight: 700; color: var(--accent-2); }
.user-hero-rank-note { font-size: 12px; color: var(--text-dim); }
.user-hero-scores {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 6px;
  font-size: 13px; color: var(--text-dim);
}
.user-hero-scores b { color: var(--text); font-variant-numeric: tabular-nums; }
/* Секции контента: отступ сверху единый */
.user-section { margin-top: 32px; }
/* Вопросы/ответы — компактные строки */
.user-q-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.user-q-row {
  padding: 14px 16px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.user-q-title { font-size: 15px; font-weight: 700; color: var(--text); text-decoration: none; }
.user-q-title:hover { color: var(--accent-2); }
.user-q-meta { display: block; margin-top: 6px; font-size: 12px; color: var(--text-dim); }
/* Дашборд «Статистика» — единая плашка (паттерн Stack Overflow):
   пары «число подпись» в один ряд, без рамки у каждой пары; между
   парами — волосяной разделитель. На телефоне каждая пара своей
   строкой: подпись слева, число справа (как «табло замера») */
.user-stats {
  list-style: none;
  display: flex; flex-wrap: wrap;
  width: fit-content; max-width: 100%;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.user-stat {
  display: flex; align-items: baseline; gap: 7px;
  padding: 14px 20px;
}
/* разделитель между парами — граница слева (у первой пары нет) */
.user-stat + .user-stat { border-left: 1px solid var(--border); }
.user-stat-val {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  color: var(--text); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.user-stat-val--gold { color: var(--gold); }
.user-stat-val--medal { color: var(--accent-2); }
.user-stat-label { font-size: 13px; color: var(--text-dim); white-space: nowrap; }
@media (width < 560px) {
  .user-stats { flex-direction: column; width: 100%; }
  .user-stat { justify-content: space-between; padding: 12px 16px; }
  .user-stat + .user-stat { border-left: none; border-top: 1px solid var(--border); }
}
/* Секция «Соревнования»: карточка результата в одну строку — крупная
   плитка места (медаль у призёров), событие-ссылка с датой, компактные
   факты (класс, машина, приз) и результат крупным акцентным числом.
   У победителя — золотая подсветка. На телефоне (<560) каждый блок
   своей строкой */
.user-r-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.user-r-row {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 20px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s, transform 0.2s;
}
.user-r-row:hover { border-color: var(--border-bright); transform: translateY(-1px); }
/* Победа: тёплая золотая рамка и лёгкое свечение у края карточки */
.user-r-row--win {
  border-color: rgba(255, 200, 77, 0.45);
  background:
    radial-gradient(300px 80px at 0% 50%, rgba(255, 200, 77, 0.07), transparent 70%),
    var(--bg-card);
}
.user-r-row--win:hover { border-color: rgba(255, 200, 77, 0.65); }
.user-r-place {
  flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 20px; color: var(--text-dim);
  background: var(--bg); border: 1px solid var(--border);
}
.user-r-place--1 { background: linear-gradient(135deg, var(--gold), var(--accent-2)); color: #241a05; border: none; }
.user-r-place--2 { background: #c7cdd8; color: #15171c; border: none; }
.user-r-place--3 { background: #c98a4b; color: #1d1206; border: none; }
.user-r-head { min-width: 0; display: flex; flex-direction: column; gap: 3px; flex: 0 1 260px; }
.user-r-event { font-size: 15px; font-weight: 700; color: var(--text); text-decoration: none; }
.user-r-event:hover { color: var(--accent-2); }
.user-r-date { font-size: 12px; color: var(--text-dim); }
/* Факты — компактные колонки в середине строки */
.user-r-facts {
  flex: 1; min-width: 0;
  display: flex; flex-wrap: wrap; gap: 8px 24px;
}
.user-r-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.user-r-fact-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-dim);
}
.user-r-fact-val { font-size: 14px; font-weight: 600; color: var(--text); }
/* Результат — крупное акцентное число в правом краю: это достижение */
.user-r-score {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.user-r-score-val {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  color: var(--accent-2); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (width < 560px) {
  .user-r-row { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
  .user-r-place { width: 44px; height: 44px; font-size: 17px; }
  /* basis 260px от десктопа в колонке стал бы высотой — убираем */
  .user-r-head { flex: 0 0 auto; }
  /* Факты и результат — каждый своей строкой: подпись слева, значение справа.
     flex: 1 от десктопа убираем — иначе блок растягивается и рвёт карточку */
  .user-r-facts { flex: 0 0 auto; flex-direction: column; gap: 8px; }
  .user-r-fact {
    flex-direction: row; align-items: baseline; justify-content: space-between; gap: 14px;
  }
  .user-r-fact-label { flex-shrink: 0; }
  .user-r-fact-val { text-align: right; overflow-wrap: break-word; }
  .user-r-score {
    flex-direction: row; align-items: baseline; justify-content: space-between; gap: 14px;
    margin-top: 2px; padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  .user-r-score-val { font-size: 16px; }
}
/* Адаптив hero: аватар меньше на телефонах */
@media (width < 560px) {
  .user-hero { flex-direction: column; gap: 12px; padding: 18px; }
  .user-hero-avatar { width: 56px; height: 56px; }
  .user-hero-name { font-size: 22px; }
}
/* Ачивки: сетка медалей; заработанные — полные цвета тира, в прогрессе —
   приглушённые (цвета, не прозрачность: карточка остаётся читаемой) */
.user-ach-grid {
  list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
}
.user-ach {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 12px 14px; text-align: center;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.user-ach-medal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  margin-bottom: 2px;
}
.user-ach-medal svg { width: 22px; height: 22px; }
/* Тиры: градиент медали + контрастный цвет иконки */
.user-ach--bronze .user-ach-medal { background: linear-gradient(135deg, #c98a4b, #8a5a2b); color: #fff8f0; }
.user-ach--silver .user-ach-medal { background: linear-gradient(135deg, #c7cdd8, #8b93a1); color: #15171c; }
.user-ach--gold .user-ach-medal { background: linear-gradient(135deg, var(--gold), var(--accent-2)); color: #241a05; }
/* В прогрессе: приглушённый градиент и приглушённый текст */
.user-ach--progress .user-ach-medal { background: linear-gradient(135deg, var(--bg-card-hover), var(--border)); color: var(--text-dim); }
.user-ach--progress .user-ach-title { color: var(--text-dim); }
.user-ach-title { font-size: 13px; font-weight: 700; }
.user-ach-desc { font-size: 11px; color: var(--text-dim); line-height: 1.45; }
.user-ach-progress { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.user-ach-progress .progress-bar { margin-top: 0; }
.user-ach-remaining { font-size: 11px; color: var(--text-dim); }

/* ------------------------------------------------------------
   ГЛАВНАЯ (blocks/home/*) — по дизайн-концепту concept/index.html
   (приёмы переложены на токены проекта, классы свои .home-*):
   full-bleed hero с фото билда дня, пост-лента + сайдбар-виджеты,
   равная сетка статей, CTA-банда
   ------------------------------------------------------------ */
/* Hero: СЕКЦИЯ во всю ширину экрана (breakout из .container лейаута,
   лейаут не меняем). Без рамки и скругления. Фон: обложка билда дня
   (--img, справа) + затемнение слева + переход в фон страницы снизу */
.home-hero {
  position: relative; overflow: hidden;
  margin: 0 calc(50% - 50vw) 0;
  padding: 52px 0 56px;
  background:
    linear-gradient(180deg, transparent 55%, var(--bg) 98%),
    linear-gradient(100deg, rgba(11, 12, 15, 0.98) 28%, rgba(11, 12, 15, 0.9) 52%, rgba(11, 12, 15, 0.45) 100%),
    var(--img, none) right center / cover no-repeat,
    var(--bg-card);
}
/* Акцентное свечение слева снизу (концепт .hero::before) */
.home-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(700px 300px at 15% 110%, rgba(255, 92, 31, 0.14), transparent 65%);
}
/* Точечная сетка с затуханием вправо (концепт .hero::after) */
.home-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.5px),
    radial-gradient(rgba(255, 92, 31, 0.08) 1px, transparent 1.5px);
  background-size: 26px 26px, 26px 26px;
  background-position: 0 0, 13px 13px;
  -webkit-mask-image: linear-gradient(105deg, #000 0%, #000 45%, transparent 85%);
  mask-image: linear-gradient(105deg, #000 0%, #000 45%, transparent 85%);
}
.home-hero-content { position: relative; z-index: 1; }
.home-hero-kicker {
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px;
}
.home-hero-title {
  margin: 0; max-width: 620px;
  font-family: var(--font-display); font-weight: 400; font-size: 46px; line-height: 1.15;
}
/* Акцент слогана: градиентный текст (концепт .hero h1 em) */
.home-hero-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home-hero-sub { margin: 18px 0 30px; max-width: 520px; font-size: 17px; color: var(--text-dim); line-height: 1.55; }
.home-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* Статистика сообщества под кнопками: число + подпись */
.home-stats { display: flex; gap: 52px; margin-top: 52px; flex-wrap: wrap; }
.home-stat b {
  display: block;
  font-family: var(--font-display); font-weight: 400; font-size: 28px;
  font-variant-numeric: tabular-nums;
}
.home-stat span { color: var(--text-dim); font-size: 13px; }
/* Пост ленты (концепт .post): карточка во всю ширину колонки */
.home-post {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  margin-bottom: 20px;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.home-post:hover {
  transform: translateY(-2px);
  border-color: var(--border-bright);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}
.home-post-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
}
.home-post-avatar {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
  background: var(--accent-soft); color: var(--accent-2);
}
.home-post-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Имя и мета — колонкой у аватара (концепт .post-author/.post-meta) */
.home-post-author { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-post-name { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.home-post-head b { font-size: 14px; font-weight: 700; }
.home-post-meta { font-size: 12px; color: var(--text-dim); }
.home-post-cover {
  display: flex; height: 330px; text-decoration: none;
  background-color: var(--bg-card-hover);
}
.home-post-label {
  position: relative; z-index: 2;
  font-size: 12px; color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.45); padding: 4px 10px; border-radius: 6px;
  backdrop-filter: blur(6px);
}
.home-post-body { padding: 14px 16px 12px; }
.home-post-title { display: block; font-size: 17px; font-weight: 800; color: var(--text); text-decoration: none; margin-bottom: 6px; }
.home-post-title:hover { color: var(--accent-2); }
.home-post-text { margin: 0; font-size: 14px; color: var(--text-dim); line-height: 1.6; }
.home-post-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.home-post-foot {
  display: flex; align-items: center; gap: 4px;
  border-top: 1px solid var(--border); padding: 8px 10px;
}
/* Действия поста (концепт .action): единая зона наведения */
.home-post-act {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: none; background: none; cursor: default;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-dim);
  border-radius: 8px; font-variant-numeric: tabular-nums;
  transition: background 0.15s, color 0.15s;
}
button.home-post-act { cursor: pointer; }
.home-post-act:hover { background: var(--bg-card-hover); color: var(--text); }
.home-post-act svg { width: 16px; height: 16px; }
.home-post-rating { font-weight: 700; color: var(--text); }
.home-post-rating.is-negative { color: #f87171; }
.home-post-open {
  margin-left: auto;
  font-size: 13px; font-weight: 700; color: var(--accent-2); text-decoration: none;
}
.home-post-open:hover { color: var(--accent); }
/* Кнопка «Все билды» внизу ленты: аккуратная призрачная пилюля по
   центру (паттерн Show more / view all): тонкая рамка, подпись +
   стрелка; hover — акцент, стрелка уезжает вправо */
.home-feed-more { padding: 8px 0 12px; text-align: center; }
.home-feed-more-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  border: 1px solid var(--border-bright); border-radius: 999px;
  font-size: 14px; font-weight: 700; color: var(--text-dim);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.home-feed-more-link svg {
  width: 16px; height: 16px;
  transition: transform 0.15s ease;
}
.home-feed-more-link:hover {
  color: var(--accent-2);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.home-feed-more-link:hover svg { transform: translateX(3px); }
/* Двухколоночная сетка: лента + сайдбар (концепт .layout) */
.home-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px;
  padding: 28px 0 8px;
}
.home-feed { min-width: 0; }
/* Вкладки ленты (концепт .tabs): плашки, активная — акцентная рамка */
.home-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.home-tab {
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-dim); border-radius: 10px;
  padding: 8px 16px; font-size: 14px; font-weight: 700; font-family: inherit;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.home-tab:hover { color: var(--text); }
.home-tab.is-active { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.home-feed-empty { color: var(--text-dim); font-size: 14px; }
/* Виджеты сайдбара (концепт .widget: плашка + заголовок-капс) */
.home-widget {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 20px;
  transition: border-color 0.2s;
}
.home-widget:hover { border-color: var(--border-bright); }
.home-widget h3 {
  margin: 0 0 14px;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-dim);
}
/* Мини-списки виджетов: hairline-разделители (концепт .mini-list) */
.home-mini-list { display: flex; flex-direction: column; }
.home-mini-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 8px; margin: 0 -8px;
  border-top: 1px solid var(--border);
}
.home-mini-item:first-child { border-top: none; padding-top: 0; }
.home-mini-cover {
  width: 54px; height: 54px; border-radius: 8px; flex-shrink: 0;
  background-color: var(--bg-card-hover);
}
.home-mini-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-mini-title { font-size: 14px; font-weight: 700; color: var(--text); text-decoration: none; }
.home-mini-title:hover { color: var(--accent-2); }
.home-mini-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
/* Дата-таблетка «Ближайшие события»: компактный вариант .event-date
   (48px, тот же градиентный бордер) */
.home-event-date {
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 10px;
  background:
    linear-gradient(#241207, #180d06) padding-box,
    linear-gradient(135deg, var(--accent), var(--accent-2)) border-box;
  text-decoration: none;
}
.home-event-date b { font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 1.1; color: var(--text); }
.home-event-date span { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-dim); }
/* Секция «Новости и статьи»: сетка 4→2→1; карточки — те же
   articles/card, что в ленте /articles (без перекрытий стилей) */
.home-articles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.home-shops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* Появление при скролле (концепт .reveal): начальное состояние ставит
   JS (home-reveal.js), без JS/редьюсед-моушн элементы видимы всегда */
.home-reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease, transform 0.6s ease; }
.home-reveal--visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .home-reveal { opacity: 1; transform: none; transition: none; }
}
/* Мини-тост «Ссылка скопирована» (поделиться) */
.home-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 90;
  transform: translateX(-50%) translateY(8px);
  padding: 10px 18px; border-radius: 10px;
  background: var(--bg-card); border: 1px solid var(--border-bright);
  color: var(--text); font-size: 13px; font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.home-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
/* CTA-банда: тёмный градиент с акцентным свечением, центрированная */
.home-cta {
  padding: 40px 28px; text-align: center;
  background:
    radial-gradient(500px 220px at 50% 140%, rgba(255, 92, 31, 0.16), transparent 65%),
    var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.home-cta-title { margin: 0 0 10px; font-family: var(--font-display); font-weight: 400; font-size: 26px; }
.home-cta-text { margin: 0 auto 20px; max-width: 460px; font-size: 14px; color: var(--text-dim); line-height: 1.55; }
.home-cta .btn { display: inline-flex; align-items: center; gap: 8px; }
@media (width < 980px) {
  /* Одна колонка: сайдбар под лентой двумя колонками (концепт <960) */
  .home-layout { grid-template-columns: minmax(0, 1fr); }
  .home-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .home-side .home-widget { margin-bottom: 0; }
  .home-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-shops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width < 768px) {
  .home-hero { padding: 36px 0 40px; }
  .home-hero-title { font-size: 32px; }
  .home-post-cover { height: 240px; }
}
@media (width < 560px) {
  .home-hero { padding: 28px 0 32px; }
  .home-hero-title { font-size: 26px; }
  .home-hero-sub { font-size: 15px; }
  .home-stats { gap: 28px; margin-top: 36px; }
  .home-hero-actions .btn { width: 100%; justify-content: center; }
  .home-post-cover { height: 210px; }
  .home-side { grid-template-columns: minmax(0, 1fr); }
  .home-post-foot { flex-wrap: wrap; gap: 12px; }
  .home-articles { grid-template-columns: minmax(0, 1fr); }
  .home-shops { grid-template-columns: minmax(0, 1fr); }
  .home-cta { padding: 32px 20px; }
  .home-cta .btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------
   «МОИ СТАТЬИ» (blocks/account/articles-list.php)
   Список статей автора. Карточка-строка на CSS-grid: превью и текст
   в одной строке, кнопки действий — всегда строкой ниже. Плашки
   статуса/рейтинга — отдельной строкой НАД заголовком, поэтому
   заголовок не душится ими ни на одной ширине экрана.
   ------------------------------------------------------------ */
.articles-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 20px 0 14px;
}
.articles-list-head .auth-title { margin: 0; }
.articles-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.articles-item {
  display: grid;
  /* две зоны: превью + тело в одной строке; действия — всегда строкой ниже */
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  row-gap: 12px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* Строка без превью (Q&A кабинет) — тело на всю ширину */
.articles-item--no-cover { grid-template-columns: minmax(0, 1fr); }
/* Превью обложки: ландшафт 96×64 (пропорции ленты статей);
   без обложки — иконка-заглушка */
.articles-item-cover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 64px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--bg-card-hover);
  border: 1px solid var(--border);
  color: var(--text-dim);
  transition: border-color 0.15s;
}
.articles-item-cover:hover { border-color: var(--border-bright); }
.articles-item-cover img { width: 100%; height: 100%; object-fit: cover; }
.articles-item-cover-empty svg { width: 24px; height: 24px; }
.articles-item-body { min-width: 0; }
/* Верхняя строка тела: статус слева, рейтинг — у правого края */
.articles-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
/* Рейтинг — плашка в верхней строке тела, у правого края */
.articles-item-rating {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-card-hover);
  color: var(--text-dim);
}
.articles-item-rating svg { width: 14px; height: 14px; }
.articles-item-rating-positive { background: rgba(74, 222, 128, 0.12); color: var(--green); }
.articles-item-rating-negative { background: rgba(248, 113, 113, 0.12); color: #f87171; }
/* Заголовок — самостоятельная строка под плашками, обрезка до двух строк */
.articles-item-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  text-decoration: none;
}
.articles-item-title:hover { color: var(--accent-2); }
.articles-item-status {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-card-hover);
  color: var(--text-dim);
}
/* Черновик — акцентный, опубликована — зелёный, архив — нейтральный */
.articles-item-draft .articles-item-status { background: var(--accent-soft); color: var(--accent-2); }
.articles-item-published .articles-item-status { background: rgba(74, 222, 128, 0.12); color: var(--green); }
/* На модерации — золотой (ожидает проверки) */
.articles-item-status--pending { background: rgba(255, 200, 77, 0.12); color: var(--gold); }
.articles-item-meta {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}
.articles-item-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}
/* Кнопки действий — компактный размер, чтобы не перебивали содержимое */
.articles-item-actions .btn { min-height: 36px; padding: 8px 14px; font-size: 13px; }
/* Формы действий («Опубликовать», «Удалить») — прозрачные обёртки:
   кнопки ложатся в общий флекс-ряд, а не каждая в свою форму-строку */
.articles-item-actions form { display: contents; }

/* Адаптив телефона: превью мельчаем; кнопки остаются слева, переносятся по ширине */
@media (width < 560px) {
  .articles-item { grid-template-columns: 64px minmax(0, 1fr); padding: 14px 16px; }
  .articles-item-cover { width: 64px; height: 48px; }
}

/* Карточки профиля (пароль, соцсети) — тот же карточный стиль,
   что у .sessions; анкета/email/аватар рендерит Vue-компонент
   на классах .auth-card/.auth-form */
.profile-card {
  margin: 0 0 20px;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.profile-card-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 14px;
}
.profile-hint {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0 0 14px;
}
.profile-form { display: grid; gap: 12px; max-width: 420px; }
.profile-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 4px; }
.profile-alert { min-height: 20px; font-size: 13px; color: var(--accent-2); }
.profile-providers { list-style: none; display: flex; flex-direction: column; gap: 10px; }
/* Строка провайдера — grid (название | статус | кнопка): колонки структурно
   не пересекаются, в отличие от flex-wrap, где длинный неразрывный email
   переполнял колонку статуса и рисовался поверх кнопки «Отключить» */
.profile-provider {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.profile-provider-name { font-weight: 700; }
/* minmax(0, 1fr) разрешает колонке сжиматься ниже контента, overflow-wrap —
   переносить длинный email по частям, а не вылезать под кнопку */
.profile-provider-state { min-width: 0; font-size: 13px; color: var(--text-dim); overflow-wrap: break-word; }
/* Узкий экран: два ряда — «название + кнопка» сверху, статус с email
   на всю ширину ниже (иначе длинный email расползается по буквам) */
@media (width < 560px) {
  .profile-provider {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name ctl" "state state";
  }
  .profile-provider-name { grid-area: name; min-width: 0; overflow-wrap: break-word; }
  .profile-provider-state { grid-area: state; }
  .profile-provider > form,
  .profile-provider > .btn { grid-area: ctl; }
  .profile-provider > form .btn { width: 100%; }
}

/* Кадрирование аватара: фото целиком в рамке (вписано по JS),
   по фото таскается круг — в него попадёт аватар. Размер круга —
   ползунком. Размеры рамки считает JS (CROP_STAGE_MAX_*) */
.avatar-crop-wrap { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.avatar-stage {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  cursor: grab;
  touch-action: none; /* drag без скролла страницы на таче */
}
.avatar-stage:active { cursor: grabbing; }
.avatar-stage img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.avatar-circle {
  position: absolute;
  border-radius: 50%;
  border: 2px solid #fff;
  /* затемнение вокруг круга: огромный размытый спред обрезается
     overflow:hidden рамки — темнеет только фото за пределами круга;
     первой тенью — акцентная обводка круга */
  box-shadow:
    0 0 0 2px var(--accent),
    inset 0 0 0 1px rgba(0, 0, 0, .25),
    0 0 0 9999px rgba(11, 12, 15, .55);
  pointer-events: none; /* drag вешаем на рамку — круг не перехватывает */
  will-change: left, top, width, height;
}
.avatar-crop-zoom { display: flex; align-items: center; gap: 10px; width: 320px; max-width: 100%; font-size: 13px; color: var(--text-dim); }
.avatar-crop-zoom input[type="range"] { flex: 1; accent-color: var(--accent); }
.avatar-crop-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Выбор файла аватара: стандартный input скрыт, своя кнопка + подсказка */
.avatar-picker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.avatar-picker-hint { font-size: 13px; color: var(--text-dim); flex: 1; min-width: 200px; }
.avatar-current { display: block; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }

/* Кастомный выпадающий список выбора города (CitySelect, анкета профиля):
   триггер выглядит как .auth-input, панель с поиском выпадает поверх
   контента ниже поля */
.city-select { position: relative; }
.city-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.city-select-placeholder { color: var(--text-dim); }
.city-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.city-select-caret { display: inline-flex; flex: none; color: var(--text-dim); transition: transform 0.15s; }
.city-select-open .city-select-caret { transform: rotate(180deg); }
.city-select-trigger.auth-input-error { border-color: var(--accent-2); }
.city-select-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  /* Панель может быть шире триггера (решение по фиче): опции не
     переносятся по словам — панель растягивается по контенту, потолок
     защищает от уезжания за правый край вьюпорта (якорь вправо при
     тесноте ставит JS) */
  min-width: 100%;
  width: max-content;
  max-width: calc(100vw - 48px);
  display: flex;
  flex-direction: column;
  max-height: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.city-select-search { border: 0; border-radius: 0; border-bottom: 1px solid var(--border); min-height: 40px; }
.city-select-search:focus { box-shadow: none; }
.city-select-list {
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.city-select-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap; /* название и регион — одной строкой (панель шире триггера) */
}
.city-select-option-active { background: var(--accent-soft); }
.city-select-name { font-size: 14px; }
.city-select-region { flex: none; font-size: 12px; color: var(--text-dim); }
.city-select-empty { padding: 12px 10px; font-size: 13px; color: var(--text-dim); text-align: center; }

/* Карточка «Группы и права»: группы — плашки, права — список
   по разделам каталога с отметкой источника (группа/лично) */
.profile-roles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.profile-role {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 700;
}
.profile-perms-section {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 16px 0 8px;
}
.profile-perms { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.profile-perm {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
}
.profile-perm-icon { flex-shrink: 0; display: flex; color: var(--accent-2); }
.profile-perm--denied .profile-perm-icon { color: var(--text-dim); }
.profile-perm--denied .profile-perm-name { color: var(--text-dim); }
.profile-perm-name { flex: 1; min-width: 0; }
.profile-perm-source { flex-shrink: 0; font-size: 12px; color: var(--text-dim); }

/* 560px: контейнер с 16px боковыми — лента бледёт соответственно */
@media (width < 560px) {
  .account-sidebar { margin: 0 -16px; padding: 10px 16px; }
}

/* 768–979px: шапка двухрядная (108px) — лента цепляется ниже */
@media (768px <= width < 980px) {
  .account-sidebar { top: 108px; }
}

/* ≥980px: две колонки — карточка + сайдбар слева, контент справа;
   лента превращается в вертикальное меню */
@media (width >= 980px) {
  .account-container {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 32px 40px;
    align-items: start;
    padding-top: 24px;
  }
  /* левая колонка: обёртка на всю высоту сетки — sticky-контекст для
     навигации (липнуть на grid-item напрямую нельзя: sticky элемента
     зажат его grid-областью и «висит» посреди колонки) */
  .account-side {
    display: block;
    grid-column: 1; grid-row: 1 / 3;
    align-self: stretch;
  }
  .account-user { margin: 0 0 16px; padding: 14px 16px; }
  /* 980–1365px: шапка двухрядная (108px) + отступ 16px */
  .account-sidebar {
    position: sticky; top: 124px; z-index: auto;
    margin: 0; padding: 0;
    background: none; backdrop-filter: none;
    border-bottom: none;
  }
  /* контент занимает оба ряда правой колонки — на всю высоту сетки */
  .account-content { grid-column: 2; grid-row: 1 / 3; }
  .account-nav {
    flex-direction: column; gap: 2px;
    overflow: visible; scrollbar-width: auto;
    mask-image: none; -webkit-mask-image: none;
  }
  /* без «пилюль», как .nav шапки: активный пункт — фон + акцентная
     полоска слева через ::before */
  .account-nav a {
    position: relative;
    border: none; border-radius: 10px;
    padding: 10px 12px 10px 16px;
  }
  .account-nav a.active { background: var(--accent-soft); color: var(--text); }
  .account-nav a.active::before {
    content: ""; position: absolute; left: 4px; top: 9px; bottom: 9px;
    width: 2px; border-radius: 2px; background: var(--accent);
  }
  .account-content > .account-stub { margin: 0; }
}

/* ≥1366px: шапка полным рядом (62px) — сайдбар цепляется ниже */
@media (width >= 1366px) {
  .account-sidebar { top: 78px; }
}

/* ============================================================
   ТОСТЫ — глобальные уведомления (Service\Flash, blocks/flash.php)
   Появляются поверх страницы после редиректа: уведомления об
   успехе входа, подтверждении email, смене пароля, ошибках форм.
   ============================================================ */

/* Стопка в правом верхнем углу, выше модального диалога (90) и drawer (70) */
.toast-stack {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  right: 16px;
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(360px, calc(100vw - 32px));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-bright);
  background: var(--bg-card);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
  animation: toast-in 0.25s ease-out;
}

/* Успех — акцентный оранжевый; фон непрозрачный, чтобы текст под тостом не просвечивал */
.toast-success {
  color: var(--accent-2);
  border-color: rgba(255, 154, 61, 0.5);
  background: #241a12;
}

/* Ошибка — красный, не скрывается сама; фон непрозрачный */
.toast-error {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.45);
  background: #251417;
}

/* Информация — нейтрально-синий; фон непрозрачный */
.toast-info {
  color: var(--blue);
  border-color: rgba(90, 162, 255, 0.45);
  background: #151a24;
}

.toast-text { flex: 1; }

.toast-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 0;
  background: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.15s;
}
.toast-close:hover { opacity: 1; }

/* Плавное исчезновение перед удалением из DOM */
.toast-hide { animation: toast-out 0.3s ease-in forwards; }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateX(16px); }
}

/* Мобильные: тосты на всю ширину под шапкой */
@media (width < 560px) {
  .toast-stack {
    right: 8px;
    left: 8px;
    max-width: none;
  }
}

/* ============================================================
   SPECIAL-СТРАНИЦЫ И МОДАЛКИ-ПОЗДРАВЛЕНИЯ (blocks/special.php)
   Единый «прикольный» стиль для 404, недействительных ссылок и
   поздравлений (подтверждение email): карточка с фото на фоне.
   ============================================================ */

.nf-wrap {
  display: flex;
  justify-content: center;
  padding: 60px 0;
}

.nf-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 720px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(11, 12, 15, 0.82), rgba(11, 12, 15, 0.94)),
    url('/assets/img/headunit-1din.jpg') center / cover no-repeat;
  text-align: center;
  padding: 54px 30px 40px;
}

/* Альтернативный фон — встреча/праздник (поздравления) */
.nf-card--car-meet {
  background:
    linear-gradient(180deg, rgba(11, 12, 15, 0.82), rgba(11, 12, 15, 0.94)),
    url('/assets/img/car-meet.jpg') center / cover no-repeat;
}

.nf-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(400px 200px at 50% 115%, rgba(255, 92, 31, 0.16), transparent 65%);
  pointer-events: none;
}

.nf-inner { position: relative; z-index: 1; }

.nf-code {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 1;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nf-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  margin-top: 14px;
}

.nf-text {
  color: var(--text-dim);
  font-size: 15px;
  margin: 12px auto 26px;
  max-width: 420px;
}

.nf-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.nf-links {
  margin-top: 30px;
  font-size: 13px;
  color: var(--text-dim);
}
.nf-links a {
  color: var(--accent-2);
  font-weight: 700;
  margin: 0 8px;
}
.nf-links a:hover { color: var(--accent); }

/* Модальное поздравление поверх страницы кабинета */
.nf-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 6, 8, 0.72);
}

.nf-modal-overlay .nf-card { max-width: 520px; }

.nf-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.nf-modal-close:hover { color: var(--text); background: var(--bg-card-hover); }

@media (width < 560px) {
  .nf-wrap { padding: 32px 0; }
  .nf-card { padding: 36px 18px 28px; }
  .nf-code { font-size: 68px; }
  .nf-title { font-size: 19px; }
}


/* ============================================================
   РАЗДЕЛ «СТАТЬИ»
   Листинг /articles (+ рубрики /articles/{type}) и страница
   статьи /article/{slug}. Порт специфики концепта (articles.html,
   article.html); брейкпоинты проекта: 980 (сетки) и 560 (телефоны).
   ============================================================ */

/* ---------- Заголовок внутренней страницы ---------- */
.page-header { padding-top: 34px; padding-bottom: 2px; }
.page-header h1 { font-family: var(--font-display); font-weight: 400; font-size: 34px; }

/* ---------- Бейдж рубрики ---------- */
.rubric-badge {
  display: inline-block; font-size: 11px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  padding: 4px 11px; border-radius: 6px;
  box-shadow: 0 2px 12px var(--accent-glow);
}
.rubric-badge.guide { background: linear-gradient(135deg, #2f7dd1, var(--blue)); box-shadow: 0 2px 12px rgba(90,162,255,0.35); }
.rubric-badge.blog { background: linear-gradient(135deg, #b98a1f, var(--gold)); color: #241a05; box-shadow: 0 2px 12px rgba(255,200,77,0.3); }

/* ---------- Фоновая обложка (img-cover) ---------- */
/* Фото задаётся кастомным свойством --img:url(...) на элементе; ::after
   держит картинку (с плавным зумом при ховере родителя), ::before —
   градиентную подложку для читаемости текста поверх */
.img-cover {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; padding: 14px;
}
.img-cover::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--img);
  background-size: cover;
  /* позиция кадра — фокус обложки из редактора (--img-pos, миграция 013),
     без значения — центр */
  background-position: var(--img-pos, 50% 50%);
  transition: transform 0.7s ease;
}
.img-cover::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.6));
}

/* ---------- Обложка номера ---------- */
.cover-story {
  border-radius: var(--radius); border: 1px solid var(--border);
  min-height: 400px; margin-bottom: 18px;
}
/* затемнение слева — текст читается на любом фото */
.cover-story::before {
  background: linear-gradient(95deg, rgba(11,12,15,0.94) 22%, rgba(11,12,15,0.6) 55%, rgba(11,12,15,0.25) 100%);
}
.cover-story:hover::after { transform: scale(1.04); }
.cover-body { position: relative; z-index: 2; max-width: 600px; padding: 16px 20px 18px; }
.cover-body h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 32px; line-height: 1.25; margin: 12px 0 10px;
}
.cover-lead { font-size: 15px; color: rgba(255,255,255,0.78); max-width: 520px; }
.cover-meta { display: flex; gap: 14px; flex-wrap: wrap; margin: 18px 0 22px; font-size: 13px; color: rgba(255,255,255,0.65); }
.cover-meta b { color: #fff; font-weight: 700; }

/* ---------- Карточка статьи (вторые + «Читать дальше») ---------- */
.card {
  position: relative; /* якорь для ссылки-оверлея .ovl (иначе она растянется на весь экран) */
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--border-bright);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.card:hover .img-cover::after { transform: scale(1.06); }
.card-cover { height: 140px; padding: 0; }
.card-body { padding: 12px 14px 14px; }
.card-body .rubric-badge { margin-bottom: 8px; }
.card-title { font-size: 14px; font-weight: 700; line-height: 1.4; }
.card-meta { font-size: 12px; color: var(--text-dim); margin-top: 4px; }

.second-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; }
.second-row .card-cover { height: 170px; padding: 0; }
.second-row .card-body { padding: 14px 16px 16px; }
.second-row .card-title { font-size: 16px; font-weight: 800; margin-top: 10px; }
.second-row .card-meta { font-size: 12px; color: var(--text-dim); margin-top: 8px; }

/* Ссылка-оверлей поверх карточки (весь блок кликабелен) */
.ovl { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.ovl:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.second-row .card, .article-row, .mini-product { position: relative; }

/* ---------- Вкладки рубрик ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tab {
  display: inline-block; text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-dim); border-radius: 10px;
  padding: 8px 16px; font-size: 14px; font-weight: 700;
  transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.tab:hover { color: var(--text); }
.tab.active {
  color: var(--text); border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 16px rgba(255, 92, 31, 0.18);
}

/* ---------- Лента строками ---------- */
.article-row {
  display: flex; gap: 18px; align-items: stretch;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 12px;
  transition: border-color 0.2s, transform 0.2s;
}
.article-row:hover { border-color: var(--border-bright); transform: translateY(-1px); }
.article-row:hover .img-cover::after { transform: scale(1.06); }
.article-thumb { width: 150px; min-height: 118px; flex-shrink: 0; padding: 0; }
.article-main { flex: 1; min-width: 0; padding: 14px 18px 14px 0; display: flex; flex-direction: column; }
.article-title { font-size: 16px; font-weight: 800; line-height: 1.4; margin-top: 8px; }
.article-title a { color: var(--text); text-decoration: none; }
.article-title a:hover { color: var(--accent-2); }
.article-desc {
  font-size: 13px; color: var(--text-dim); margin-top: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.article-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--text-dim); }
.article-meta b { color: var(--text); font-weight: 700; }
.read-time { display: inline-flex; align-items: center; gap: 5px; }
.read-time::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.article-list { margin-top: 4px; }
.articles-empty { color: var(--text-dim); font-size: 14px; padding: 24px 0; }

/* ---------- Пагинация ---------- */
.pagination { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 24px 0 48px; }
.pagination-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; padding: 8px 12px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text-dim); font-size: 14px; font-weight: 700; text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.pagination-link:hover { color: var(--text); border-color: var(--text-dim); }
.pagination-link.current {
  color: var(--text); border-color: var(--accent);
  background: var(--accent-soft);
}

/* ---------- Страница статьи ---------- */
.crumbs { padding-top: 26px; margin-bottom: 16px; font-size: 13px; color: var(--text-dim); }
.crumbs a { color: var(--accent-2); font-weight: 700; text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { margin: 0 8px; color: var(--border-bright); }

.article-head { max-width: 780px; margin-bottom: 22px; }
.article-head h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 34px; line-height: 1.25; margin: 14px 0 14px;
}
.article-byline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); }
.article-byline .author { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); }
.article-byline .avatar {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  background: var(--bg-card-hover); display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-dim); flex-shrink: 0;
}
.article-byline .avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Ссылка правки в шапке статьи/проекта — только для автора/владельца (canEdit) */
.article-edit-link,
.build-edit-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin: -6px 0 12px; font-size: 13px; font-weight: 600;
  color: var(--text-dim); text-decoration: none;
}
.article-edit-link:hover,
.build-edit-link:hover { color: var(--accent); }
.article-edit-link svg,
.build-edit-link svg { width: 15px; height: 15px; }
/* У проекта ссылка идёт сразу после крошек (у статьи — под бейджем рубрики) */
.build-edit-link { margin: 4px 0 14px; }

.article-cover { height: 420px; border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 30px; padding: 0; }

/* Сетка тела на всю ширину контейнера: колонка текста (.article-body)
   гнётся по доступному месту, содержание (250px) — у правого края.
   Ограничивать ширину нельзя: на широких экранах оставался бы пустой
   «ров» между текстом/содержанием и краем экрана */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 32px;
  align-items: start;
  margin-bottom: 44px;
}

/* Тело статьи (HTML из БД, пишут редакторы): без потолка ширины — колонка
   заполняет всю доступную сетку ширину (пустоты по краям нет) */
.article-body { min-width: 0; }
.article-body h2 {
  font-family: var(--font-display); font-weight: 400; font-size: 22px;
  margin: 34px 0 12px; scroll-margin-top: 90px;
}
.article-body h2:first-child { margin-top: 0; }
.article-body h2[id] { scroll-margin-top: 136px; } /* двухрядная шапка 768–1365 */
.article-body p { font-size: 15px; color: #c9ced8; margin-bottom: 14px; line-height: 1.7; }
.article-quote {
  border-left: 3px solid var(--accent); margin: 24px 0; padding: 14px 18px;
  background: var(--accent-soft); border-radius: 0 12px 12px 0;
  font-size: 16px; font-weight: 700; line-height: 1.55; color: var(--text);
}
.article-quote span { display: block; font-size: 12px; font-weight: 600; color: var(--text-dim); margin-top: 8px; }

/* Одиночная картинка тела (блок image, Service\ArticleBlocks::image):
   кадр фиксированной высоты — картинка заполняет колонку по ширине,
   лишнее по вертикали обрезается (object-fit: cover), показываемая часть
   задаётся позицией из редактора (модификатор --top|bottom, центр — дефолт) */
.article-body img.article-image {
  display: block; width: 100%; max-height: 480px; object-fit: cover;
  object-position: center; border-radius: 12px; margin: 20px 0;
}
.article-body img.article-image--top { object-position: top; }
.article-body img.article-image--bottom { object-position: bottom; }

/* Режим «целиком» из настроек блока (data.fit): без кропа — элемент
   сжимается до размера картинки (width: auto + max-рамки), обрамление
   в виде равного поля со всех сторон облегает изображение по периметру,
   без полос задника по бокам */
.article-body img.article-image--fit {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 480px;
  /* выравнивание как у текста колонки — влево, иначе блоки разной
     ширины «плавают» каждый по своей оси */
  margin: 20px 0;
  box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.article-body img.article-image--fit.article-image--narrow { width: auto; max-width: 480px; }
.article-body img.article-image--fit.article-image--middle { width: auto; max-width: 640px; }
.article-body img.article-image--fit.article-image--h240 { max-height: 240px; }
.article-body img.article-image--fit.article-image--h360 { max-height: 360px; }
.article-body img.article-image--fit.article-image--h560 { max-height: 560px; }

/* Ширина из настроек блока (ArticleImageTool): уже/средняя колонка;
   выравнивание — настройка align (дефолт влево, как текст колонки) */
.article-body img.article-image--narrow { width: 480px; max-width: 100%; margin: 20px 0; }
.article-body img.article-image--middle { width: 640px; max-width: 100%; margin: 20px 0; }

/* Выравнивание в строке из настроек блока (data.align): работает для любой
   ширины — при полной колонке эффекта не видно, при узкой/средней или
   режиме «целиком» блок смещается по строке */
.article-body img.article-image--center { margin-left: auto; margin-right: auto; }
.article-body img.article-image--right { margin-left: auto; margin-right: 0; }

/* Фиксированная высота из настроек блока (вайтлист 240/360/560 в
   Service\ArticleBlocks): max-height:none, чтобы дефолтный потолок 480px
   не перекрывал выбор автора; кадр по-прежнему object-fit: cover */
.article-body img.article-image--h240 { height: 240px; max-height: none; }
.article-body img.article-image--h360 { height: 360px; max-height: none; }
.article-body img.article-image--h560 { height: 560px; max-height: none; }

.article-photo { height: 300px; border-radius: 12px; margin: 20px 0; padding: 0; border: 1px solid var(--border); }
.photo-caption { font-size: 12px; color: var(--text-dim); margin: -12px 0 20px; }
.compare-table { width: 100%; border-collapse: collapse; margin: 18px 0 22px; font-size: 14px; }
.compare-table th {
  text-align: left; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-dim); padding: 8px 10px;
  border-bottom: 1px solid var(--border-bright);
}
.compare-table td { padding: 11px 10px; border-bottom: 1px solid var(--border); color: #c9ced8; }
.compare-table tr:hover td { background: var(--bg-card-hover); }
.compare-table .score { font-weight: 800; color: var(--green); }
.compare-table .price { font-weight: 800; color: var(--accent-2); white-space: nowrap; }

/* Липкое оглавление (десктоп) / сворачиваемый блок перед статьёй (мобайл).
   Разметка — нативный <details>, без JS. */
.toc {
  position: sticky; top: 84px; /* шапка однорядная ≥1366: 62px + воздух */
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
}
/* Десктоп: сводка не нужна, список всегда виден — авторский CSS перекрывает
   UA-стиль закрытого details (details:not([open]) > :not(summary)) */
.toc > summary { display: none; list-style: none; }
.toc > .toc-list { display: block; }
.toc > .toc-list::before {
  content: "Содержание";
  display: block;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-dim); margin-bottom: 10px;
}
.toc .toc-list a {
  display: block; font-size: 13px; font-weight: 600; color: var(--text-dim);
  padding: 7px 10px; margin: 0 -10px; text-decoration: none;
  border-left: 2px solid var(--border); border-radius: 0 8px 8px 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.toc .toc-list a:hover { color: var(--text); background: var(--bg-card-hover); border-left-color: var(--accent); }
/* Активный пункт (скроллспай article-toc.js): оранжевая полоска и текст —
   читатель видит, в каком разделе статьи находится */
.toc .toc-list a.is-active {
  color: var(--accent); background: var(--bg-card-hover);
  border-left-color: var(--accent);
}

/* Подвал статьи */
.author-block {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 40px;
}
.author-block .avatar {
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  background: var(--bg-card-hover); display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-dim); flex-shrink: 0;
}
.author-block .avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-name { font-size: 15px; font-weight: 800; }
.author-block p { font-size: 13px; color: var(--text-dim); margin-top: 6px; }

/* «Читать дальше» */
.section { margin-bottom: 48px; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 18px;
}
.section-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 22px; }
.section-head a { font-size: 14px; font-weight: 700; color: var(--accent-2); text-decoration: none; }
.section-head a:hover { color: var(--accent); }
.read-next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ---------- Адаптив ---------- */
@media (width < 1366px) {
  /* двухрядная шапка 768–1365: оглавление и якоря ниже */
  .toc { top: 130px; }
}

@media (width < 980px) {
  .second-row { grid-template-columns: 1fr; }
  .second-row .card-cover { height: 190px; }
  .cover-body h2 { font-size: 26px; }
  .article-layout { grid-template-columns: 1fr; }
  /* Оглавление — перед статьёй, свёрнутое в строку «Содержание» */
  .toc { position: static; order: -1; padding: 12px 16px; }
  /* Здесь details должен вести себя нативно: закрытый — список скрыт.
     Авторский display:block выше перекрывает UA-стиль — возвращаем скрытие */
  .toc:not([open]) > .toc-list { display: none; }
  /* Заголовок «Содержание» внутри списка — только для десктопа, где
     сводка скрыта; на мобильных его роль выполняет summary */
  .toc > .toc-list::before { display: none; }
  .toc > summary {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; list-style: none;
    font-size: 13px; font-weight: 800; color: var(--text);
  }
  .toc > summary::-webkit-details-marker { display: none; }
  /* Шеврон раскрытия: CSS-треугольник, поворачивается при открытии */
  .toc > summary::after {
    content: ""; width: 8px; height: 8px; flex-shrink: 0;
    border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim);
    transform: rotate(45deg); transition: transform 0.15s;
  }
  .toc[open] > summary::after { transform: rotate(-135deg); }
  .toc > summary + .toc-list { margin-top: 10px; }
  .article-cover { height: 300px; }
  .read-next { grid-template-columns: 1fr; }
}

@media (width < 560px) {
  .page-header h1 { font-size: 26px; }
  .cover-story { min-height: 360px; }
  .article-row { flex-direction: column; gap: 0; }
  .article-thumb { width: 100%; height: 160px; min-height: 0; }
  .article-main { padding: 12px 16px 14px; }
  .article-desc { white-space: normal; }
  .article-head h1 { font-size: 24px; }
  .article-cover { height: 200px; }
  .article-photo { height: 200px; }
  .compare-table { font-size: 12px; }
  .crumbs { padding-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .cover-story:hover::after,
  .article-row:hover .img-cover::after,
  .card:hover .img-cover::after { transform: none; }
}

/* ---------- Карусель изображений в теле статьи (.article-carousel) ----------
   Разметка — <div class="article-carousel"> с плоским списком <img>
   (Service\ArticleBlocks::carousel); ленту со scroll-snap, стрелками и
   точками собирает assets/js/article-carousel.js. */
.article-carousel { margin: 20px 0; }

.article-carousel__viewport {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  /* Вертикальный скролл страницы трогаем, горизонтальные жесты —
     pointer-свайпу (article-carousel.js) */
  touch-action: pan-y;
}
/* Трек двигаем transform'ом (article-carousel.js): анимация перелистывания —
   cubic-bezier, без рывков scroll-snap. Во время свайпа и пересчёта ширины
   переход гасится классом .article-carousel--dragging на корне */
.article-carousel__track {
  display: flex;
  transform: translateX(0);
  transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
}
.article-carousel--dragging .article-carousel__track { transition: none; }
/* Уважаем системную настройку «меньше движения»: перелистывание без анимации */
@media (prefers-reduced-motion: reduce) {
  .article-carousel__track { transition: none; }
}
.article-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
}
.article-carousel__slide img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
}

/* Стрелки — поверх вьюпорта, проявляются по ховеру (на тач-экранах
   свайпа достаточно — их скрываем на узких экранах ниже) */
.article-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border-bright);
  border-radius: 50%;
  background: rgba(11, 12, 15, 0.72);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s;
}
.article-carousel__arrow svg { width: 20px; height: 20px; }
.article-carousel:hover .article-carousel__arrow,
.article-carousel__arrow:focus-visible { opacity: 1; }
.article-carousel__arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.article-carousel__arrow--prev { left: 10px; }
.article-carousel__arrow--next { right: 10px; }
.article-carousel--single .article-carousel__arrow { display: none; }

/* Точки */
.article-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.article-carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--border-bright);
  cursor: pointer;
  transition: background-color 0.15s, transform 0.15s;
}
.article-carousel__dot--active {
  background: var(--accent);
  transform: scale(1.25);
}
.article-carousel--single .article-carousel__dots { display: none; }

@media (width < 980px) {
  .article-carousel__slide img { height: 260px; }
  .article-body img.article-image { max-height: 380px; }
}

@media (width < 560px) {
  .article-carousel__slide img { height: 200px; }
  .article-body img.article-image { max-height: 280px; }
  /* На телефонах стрелки не нужны: лента листается свайпом */
  .article-carousel__arrow { display: none; }
}


/* ============================================================
   Раздел «Проекты» (билды) — миграция 013.
   Портировано с концептов builds.html / build.html; брейкпоинты
   адаптированы к проектным (980/560, range-синтаксис). Без !important.
   ============================================================ */

/* ---------- Общие элементы концепта (нужны и другим разделам) ---------- */

.hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}

.tag {
  font-size: 12px; font-weight: 600; color: var(--accent-2);
  background: var(--accent-soft); padding: 3px 10px; border-radius: 20px;
}

.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--green);
  background: rgba(74, 222, 128, 0.1); padding: 3px 10px; border-radius: 20px;
}
.status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green);
}
.status.sale { color: var(--accent-2); background: var(--accent-soft); }
.status.sale::before { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.status.process { color: var(--blue); background: rgba(90, 162, 255, 0.1); }
.status.process::before { background: var(--blue); box-shadow: 0 0 8px var(--blue); }

.card-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 11px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  padding: 4px 10px; border-radius: 6px;
  box-shadow: 0 2px 12px var(--accent-glow);
}
.card-badge.gold {
  background: linear-gradient(135deg, var(--gold), var(--accent-2));
  color: #241a05;
  box-shadow: 0 2px 12px rgba(255, 200, 77, 0.35);
}

.filters { margin: 24px 0 26px; display: flex; flex-direction: column; gap: 10px; }
.filter-row { display: flex; align-items: baseline; gap: 14px; }
.filter-row .tabs { margin-bottom: 0; flex-wrap: wrap; }
.filter-label {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-dim); min-width: 110px; flex-shrink: 0;
}

.widget {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 20px;
  transition: border-color 0.2s;
}
.widget:hover { border-color: var(--border-bright); }
.widget h3 {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-dim); margin-bottom: 14px;
}
.mini-list { display: flex; flex-direction: column; }
.mini-item {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 8px; margin: 0 -8px; border-top: 1px solid var(--border);
}
.mini-item:first-child { border-top: none; padding-top: 0; }
.mini-title { font-size: 13px; color: var(--text-dim); flex-shrink: 0; }
.fact-val {
  margin-left: auto; font-size: 13px; font-weight: 800; color: var(--text);
  text-align: right; min-width: 0; overflow-wrap: break-word;
}

.action {
  display: flex; align-items: center; gap: 7px;
  background: none; border: none; color: var(--text-dim);
  font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 8px;
}
.action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Листинг /builds: обложка журнала ---------- */

.featured-build {
  position: relative; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--border);
  min-height: 380px; margin-bottom: 26px;
  display: flex; align-items: flex-end;
}
/* Перекрывает градиент подложки .img-cover::before (равная специфичность,
   правило ниже по файлу — дополнительный приоритет не нужен) */
.featured-build::before {
  background: linear-gradient(95deg, rgba(11,12,15,0.94) 25%, rgba(11,12,15,0.55) 60%, rgba(11,12,15,0.2) 100%);
}
.fb-content { position: relative; z-index: 2; max-width: 560px; padding: 14px 18px 8px; }
.fb-content h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 34px; line-height: 1.2; margin-bottom: 8px;
}
.fb-meta { font-size: 14px; color: rgba(255,255,255,0.75); }
.fb-stats { display: flex; gap: 38px; flex-wrap: wrap; margin: 22px 0 24px; }
.fb-stats .stat b {
  font-size: 30px; display: block;
  background: linear-gradient(135deg, var(--accent-2), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fb-stats .stat span { color: rgba(255,255,255,0.65); font-size: 13px; }

/* ---------- Листинг /builds: асимметричная сетка карточек ---------- */

.builds-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; grid-auto-flow: dense; margin-bottom: 26px;
}
.build-card { position: relative; }
.build-cover { height: 170px; padding: 0; }
.b-wide { grid-column: span 2; }
.b-wide .build-cover { height: 230px; }
.b-tallcover .build-cover { height: 210px; }

.build-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
.build-title { font-size: 15px; font-weight: 800; line-height: 1.35; }
.build-stats {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; align-items: center;
  font-size: 13px; color: var(--text-dim);
}
.build-stats b { color: var(--text); font-weight: 700; }
.build-views { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-weight: 700; color: var(--text-dim); }
.build-views svg { width: 14px; height: 14px; }
.build-updated {
  margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--blue);
}

/* Прогресс этапов у карточек «В процессе» */
.progress { margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--blue); }
.progress-bar { height: 5px; margin-top: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.progress-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--blue), #8fc1ff);
}

/* Бейдж результата в дБ на обложке карточки */
.db-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-family: var(--font-display); font-size: 14px; color: var(--accent-2);
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,154,61,0.45);
  padding: 5px 11px; border-radius: 8px;
}

@media (width < 980px) {
  .builds-grid { grid-template-columns: repeat(2, 1fr); }
  .fb-content h2 { font-size: 27px; }
}

@media (width < 560px) {
  .builds-grid { grid-template-columns: 1fr; }
  .b-wide { grid-column: span 1; }
  .b-wide .build-cover, .b-tallcover .build-cover { height: 180px; }
  .featured-build { min-height: 340px; }
  .fb-stats { gap: 24px; }
  .filter-label { min-width: 0; }
  .filter-row { flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .featured-build:hover .img-cover::after { transform: none; }
}

/* ---------- Страница /build/{slug} ---------- */

/* Шапка билда */
.build-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; flex-wrap: wrap; margin-bottom: 22px;
}
.build-head h1 { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1.2; }
.build-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--text-dim); }
.build-sub .author { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); }
.build-actions { display: flex; gap: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 4px; }

/* Инициал-аватар демо-авторов (пока нет публичных профилей с аватарами) */
.build-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.build-avatar--lg { width: 46px; height: 46px; font-size: 16px; }

/* Галерея: карусель — viewport фиксированной высоты, каждый снимок
   в своей рамке (contain, без кропа), листание — плавный сдвиг трека */
.gallery { margin-bottom: 28px; }
.gallery-main {
  position: relative; overflow: hidden;
  height: 480px;
  /* общей рамки нет — каждый снимок в своей (решение 2026-09-14) */
  background: var(--bg);
}
.gallery-track {
  display: flex; height: 100%;
  transition: transform 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .gallery-track { transition: none; }
}
.gallery-slide {
  flex: 0 0 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
}
.gallery-slide img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border: 1px solid var(--border); border-radius: 10px;
  background: #000; cursor: zoom-in;
}
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0, 0, 0, 0.45); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.gallery-nav:hover { background: rgba(0, 0, 0, 0.65); }
.gallery-nav svg { width: 20px; height: 20px; }
.gallery-prev { left: 12px; }
.gallery-next { right: 12px; }
.gallery-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.g-thumb {
  width: 116px; height: 76px; border-radius: 10px; padding: 0;
  border: 1px solid var(--border); background: none; cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.g-thumb::before { background: none; }
.g-thumb:hover { border-color: var(--text-dim); }
.g-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* Лайтбокс: общий просмотр фото целиком (window.ruLightbox,
   assets/js/lightbox.js). Фото любого формата вписывается contain,
   фон затемняет страницу полностью */
.lightbox {
  position: fixed; inset: 0; z-index: 130;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 7, 10, 0.92);
  animation: lightbox-in 0.18s ease;
}
@keyframes lightbox-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .lightbox { animation: none; }
}
.lightbox__img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 6px; }
.lightbox__counter {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  font-size: 13px; color: rgba(255, 255, 255, 0.75);
}
.lightbox__close, .lightbox__nav {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); color: #fff;
  transition: background 0.15s;
}
.lightbox__close { top: 14px; right: 14px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: 14px; }
.lightbox__next { right: 14px; }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox__close svg, .lightbox__nav svg { width: 24px; height: 24px; }
.lightbox__close:focus-visible, .lightbox__nav:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Основная двухколоночная часть */
.build-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px; align-items: start; margin-bottom: 48px;
}

/* Табло замера */
.scoreboard {
  background:
    radial-gradient(300px 160px at 50% -20%, rgba(255,92,31,0.16), transparent 70%),
    var(--bg-card);
  border: 1px solid rgba(255, 92, 31, 0.35); border-radius: var(--radius);
  padding: 22px 20px; margin-bottom: 20px; text-align: center;
}
.scoreboard h3 {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--text-dim); margin-bottom: 10px;
}
.score-main {
  font-family: var(--font-display); font-size: 62px; line-height: 1;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.score-main--goal { font-size: 30px; line-height: 1.3; }
.score-unit { font-size: 20px; }
.score-note { font-size: 12px; color: var(--text-dim); margin-top: 8px; }
/* Параметры замера — строками: подпись слева, значение справа (длинное
   значение переносится в своей строке и не ломает соседние) */
.score-lines { margin-top: 14px; border-top: 1px solid var(--border); }
.score-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.score-line:last-child { border-bottom: none; }
.score-line span {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-dim); flex-shrink: 0;
}
.score-line b {
  font-family: var(--font-display); font-weight: 400; font-size: 16px;
  text-align: right; min-width: 0; overflow-wrap: break-word;
}

/* Состав системы и карточки основной колонки */
.spec-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px; }
.spec-card > h3 { font-family: var(--font-display); font-weight: 400; font-size: 18px; }
/* Таблица состава: «Компонент (пояснение под названием) / Кол-во / Цена /
   Итого», категории — строками-заголовками; числа не переносятся */
.spec-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.spec-table th {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-dim); text-align: left; padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.spec-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: baseline; }
.spec-table td b { font-weight: 700; overflow-wrap: break-word; }
.spec-table-cat th {
  color: var(--accent-2); padding: 14px 8px 4px;
  border-bottom: none; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px;
}
/* Пояснение — строкой под названием компонента */
.spec-table-note { display: block; color: var(--text-dim); font-size: 12px; margin-top: 2px; overflow-wrap: break-word; }
/* Числовые колонки: узкие, выровнены вправо — кол-во, цена и итого рядом */
.spec-table-num { text-align: right; white-space: nowrap; width: 1%; padding-left: 14px; font-variant-numeric: tabular-nums; }
.spec-table-total td {
  border-bottom: none; border-top: 1px solid var(--border-bright);
  padding-top: 12px; font-weight: 800;
}
.spec-table-total .spec-table-num { font-family: var(--font-display); font-weight: 400; font-size: 17px; }
/* Пустые ячейки итоговой строки: на мобильном их верхняя граница
   рисует лишние «чёрточки» перед суммой */
.spec-table-total td.spec-table-num:empty { display: none; }
/* Снятая техника в истории этапа — зачёркнутая, вся строка приглушённая */
.spec-table-row--removed b { font-weight: 400; color: var(--text-dim); text-decoration: line-through; }
.spec-table-row--removed { opacity: 0.75; }
/* Таблица внутри этапа — без карточной подложки, ширина по колонке */
.stage-components .spec-table { margin-top: 6px; }
/* Мобильные: таблица превращается в список — название, пояснение и одна
   строка «кол-во · цена · итого» под ним (три числовых колонки на 390px
   не помещаются) */
@media (width < 560px) {
  .spec-table thead { display: none; }
  .spec-table tbody, .spec-table tfoot, .spec-table tr, .spec-table td { display: block; }
  .spec-table tr { padding: 8px 0; border-bottom: 1px solid var(--border); }
  .spec-table td { padding: 0; border-bottom: none; }
  .spec-table-cat th { display: block; padding: 12px 0 2px; }
  .spec-table td.spec-table-num {
    display: inline-block; width: auto; padding: 4px 10px 0 0;
    font-size: 12px; text-align: left;
  }
  .spec-table-total td:first-child { font-size: 13px; }
  .spec-table-total .spec-table-num { font-size: 15px; padding-top: 4px; }
}

/* Этапы постройки: секция без карточной рамки (по решению заказчика) —
   общий подзаголовок + лента, пункты разделены тонкими линиями */
.build-subtitle { font-family: var(--font-display); font-weight: 400; font-size: 20px; margin-top: 26px; }
.stage-list { margin: 10px 0 24px; }
.stage {
  display: flex; gap: 16px; padding: 16px 0;
  border-top: 1px solid var(--border);
}
.stage-list .stage:first-child { border-top: none; }
.stage-num {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 15px; color: var(--accent-2);
  background: var(--accent-soft); border: 1px solid rgba(255,92,31,0.3);
}
.stage-main { flex: 1; min-width: 0; }
.stage-date { font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.8px; }
.stage-title { font-size: 15px; font-weight: 800; margin-top: 3px; }
.stage-text { font-size: 13px; color: var(--text-dim); margin-top: 5px; }
/* Техника, добавленная на этапе */
.stage-components { margin-top: 10px; }
.stage-components-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: var(--accent-2);
}
/* Фото этапа на публичной странице — плитки общего компонента на всю
   ширину: auto-fit (пустые дорожки схлопываются — мало фото растягиваются
   на строку), потолок ширины плитки, чтобы одиночное фото не занимало
   полстраницы */
/* Специфичность выше базового .photo-tiles (он ниже по файлу в секции
   редактора) — иначе auto-fill базы перебивает auto-fit */
/* minmax 140px: две колонки помещаются на мобильной ширине (2×140 + gap
   ≤ ~320px контентной колонки), 150px дали бы одну колонку */
.photo-tiles.build-stage-photos { margin-top: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
/* Потолок ширины плитки, чтобы одиночное фото не занимало полстраницы
   (при растяжении на дорожку max-width обрезает ширину, элемент встаёт
   в начало дорожки) */
.build-stage-photos .photo-tile { max-width: 340px; }

/* Рассказ автора */
.author-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px; }
.author-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.author-name { font-size: 16px; font-weight: 800; }
.author-meta { font-size: 12px; color: var(--text-dim); }
.author-card p { font-size: 14px; color: var(--text-dim); line-height: 1.6; }

/* Похожие билды */
.similar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 48px; }
.similar-grid .build-cover { height: 150px; }
.similar-grid .card { position: relative; }

@media (width < 980px) {
  .build-layout { grid-template-columns: 1fr; }
  .gallery-main { height: 340px; }
  .similar-grid { grid-template-columns: 1fr; }
}

@media (width < 560px) {
  .build-head h1 { font-size: 25px; }
  .gallery-main { height: 230px; }
  .g-thumb { width: 84px; height: 56px; }
  .stage { flex-wrap: wrap; }
  .score-main { font-size: 48px; }
  .score-main--goal { font-size: 24px; }
}


/* ============================================================
   Раздел Q&A (база знаний сообщества): лента /qa и страница
   вопроса /question/{slug} (порт концепта qa.html/question.html,
   брейкпоинты 980/560).
   ============================================================ */

/* Заголовок страницы раздела */
.page-header { padding-top: 34px; padding-bottom: 2px; }

/* Вопрос дня */
.qotd {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background:
    radial-gradient(420px 180px at 90% 130%, rgba(90,162,255,0.1), transparent 65%),
    var(--bg-card);
  border: 1px solid rgba(90, 162, 255, 0.35); border-radius: var(--radius);
  padding: 22px 26px; margin-bottom: 26px;
}
.qotd-main { flex: 1; min-width: 260px; }
.qotd-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--blue);
}
.qotd-title { font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.35; }
.qotd-title a { color: var(--text); text-decoration: none; }
.qotd-title a:hover { color: var(--accent-2); }
.qotd-meta { font-size: 13px; color: var(--text-dim); margin-top: 8px; }
.qotd-side { text-align: center; }
.qotd-answers { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--blue); }
.qotd-side span { display: block; font-size: 12px; color: var(--text-dim); margin: 6px 0 12px; }

/* Две колонки: вопросы + сайдбар */
.qa-layout {
  display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: 24px; align-items: start; margin-bottom: 48px;
}

/* Строка вопроса */
.qa-row {
  position: relative;
  display: flex; gap: 18px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px;
  transition: border-color 0.2s, transform 0.2s;
}
.qa-row:hover { border-color: var(--border-bright); transform: translateY(-1px); }
.qa-stats { display: flex; gap: 14px; flex-shrink: 0; align-self: center; }
.qa-stat { text-align: center; min-width: 46px; }
.qa-stat b { display: block; font-size: 17px; font-weight: 800; }
.qa-stat span { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.qa-stat.answered b { color: var(--text); }
.qa-stat.solved {
  border: 1px solid rgba(74, 222, 128, 0.45); border-radius: 9px;
  background: rgba(74, 222, 128, 0.09); padding: 4px 4px 3px;
}
.qa-stat.solved b, .qa-stat.solved span { color: var(--green); }
.qa-main { flex: 1; min-width: 0; }
.qa-title { font-size: 15px; font-weight: 800; line-height: 1.4; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.qa-title a { color: var(--text); text-decoration: none; }
.qa-title a:hover { color: var(--accent-2); }
/* «Решён» — ЕДИНЫЙ статус решённого вопроса на всём сайте (лента Q&A,
   карточка вопроса, профиль, кабинет, похожие вопросы): зелёная
   заполненная пилюля, тот же язык что статусы материалов кабинета */
.solved-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  background: rgba(74, 222, 128, 0.12); color: var(--green);
}
.qa-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 9px; }
.qa-author { margin-left: auto; font-size: 12px; color: var(--text-dim); }
.qa-author b { color: var(--text); font-weight: 700; }

/* Сайдбар Q&A */
.tags-cloud { display: flex; gap: 8px; flex-wrap: wrap; }
.tag--linked { text-decoration: none; cursor: pointer; }
.tag--linked:hover { border-color: var(--accent); color: var(--accent-2); }
.ask-cta {
  background:
    radial-gradient(300px 140px at 50% 130%, rgba(255,92,31,0.14), transparent 70%),
    var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 18px; text-align: center; margin-bottom: 20px;
}
.ask-cta h3 { font-family: var(--font-display); font-weight: 400; font-size: 17px; margin-bottom: 8px; }
.ask-cta p { font-size: 13px; color: var(--text-dim); margin-bottom: 16px; }

/* Крошки страницы вопроса */
.crumbs--qa { padding-top: 26px; margin-bottom: 16px; font-size: 13px; color: var(--text-dim); }
.crumbs--qa a { color: var(--accent-2); font-weight: 700; text-decoration: none; }
.crumbs--qa a:hover { color: var(--accent); }
.crumbs--qa .sep { margin: 0 8px; color: var(--border-bright); }

/* Страница вопроса */
.q-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; margin-bottom: 48px; }
.q-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 20px;
}
.q-card h1 { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.3; margin: 10px 0 12px; }
.q-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); }
.q-meta .author { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); }
.q-counters { display: flex; align-items: center; gap: 16px; margin: 14px 0; font-size: 13px; color: var(--text-dim); }
.q-counter { display: inline-flex; align-items: center; gap: 6px; }
.q-counter svg { width: 15px; height: 15px; }
.q-counters b { color: var(--text); font-weight: 800; }
.q-body { font-size: 15px; color: #c9ced8; line-height: 1.7; margin-top: 12px; }
.q-body p { margin-bottom: 12px; }
.q-config {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; font-size: 13px; color: var(--text-dim); margin: 14px 0;
}
.q-config b { color: var(--text); }

/* Ответы */
.answers-title { font-family: var(--font-display); font-weight: 400; font-size: 19px; margin: 6px 0 14px; }
.answer {
  display: flex; gap: 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px;
}
.answer.best {
  border-color: rgba(74, 222, 128, 0.5);
  background: linear-gradient(180deg, rgba(74,222,128,0.05), transparent 35%), var(--bg-card);
}
.best-mark {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--green); margin-bottom: 8px;
}
.best-mark::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }

/* Рейтинг ответа (+/−) — колонка сбоку: стрелка вверх, сумма, вниз */
.qa-rate {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex-shrink: 0; align-self: flex-start; padding-top: 2px;
}
.qa-rate b { font-size: 13px; font-weight: 800; min-width: 18px; text-align: center; }
.qa-rate-btn {
  width: 26px; height: 22px; border-radius: 7px; border: 1px solid var(--border);
  background: none; color: var(--text-dim); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.qa-rate-btn svg { width: 14px; height: 14px; }
.qa-rate-btn:hover { border-color: var(--accent); color: var(--accent-2); background: var(--accent-soft); }
.qa-rate-btn.is-active { border-color: var(--accent); color: var(--accent-2); background: var(--accent-soft); }
.qa-best-btn {
  width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--border);
  background: none; color: var(--text-dim); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.qa-best-btn svg { width: 14px; height: 14px; }
.qa-best-btn:hover { border-color: var(--green); color: var(--green); background: rgba(74, 222, 128, 0.1); }
.qa-best-btn.is-active { border-color: rgba(74, 222, 128, 0.5); color: var(--green); background: rgba(74, 222, 128, 0.12); }

.answer-main { flex: 1; min-width: 0; }
.answer-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); margin-bottom: 8px; }
.answer-head .author { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--text); font-size: 14px; }
.answer-text { font-size: 14px; color: #c9ced8; line-height: 1.65; }
.answer-text p { margin-bottom: 10px; }

/* Форма ответа */
.answer-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-top: 20px; }
.answer-form h3 { font-family: var(--font-display); font-weight: 400; font-size: 17px; margin-bottom: 12px; }
.answer-form textarea {
  width: 100%; min-height: 110px; resize: vertical;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; color: var(--text); font-size: 14px; font-family: inherit;
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.answer-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.answer-form .btn { margin-top: 12px; }
.qa-login-note { font-size: 14px; color: var(--text-dim); }
.qa-login-note a { color: var(--accent-2); }

/* Похожие вопросы */
.similar-q { position: relative; display: block; }

/* Форма «Задать вопрос» */
.qa-ask { max-width: 760px; margin-bottom: 48px; }
.qa-ask-body { min-height: 140px; resize: vertical; }

@media (width < 980px) {
  .qa-layout { grid-template-columns: 1fr; }
  .qa-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .qa-sidebar .widget, .qa-sidebar .ask-cta { margin-bottom: 0; }
  .q-layout { grid-template-columns: 1fr; }
}
@media (width < 560px) {
  .qa-sidebar { grid-template-columns: 1fr; }
  .qa-row { flex-direction: column; gap: 10px; }
  .qa-stats { align-self: flex-start; }
  .qa-author { margin-left: 0; width: 100%; }
  .q-card h1 { font-size: 21px; }
  .q-counters { flex-wrap: wrap; gap: 12px; }
}

/* Модальная форма «Задать вопрос» (общая, см. blocks/qa/ask-modal.php) */
.qa-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; }
.qa-modal[hidden] { display: none; }
.qa-modal-backdrop { position: absolute; inset: 0; background: rgba(6, 7, 10, 0.8); animation: qa-modal-in 0.18s ease; }
@keyframes qa-modal-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .qa-modal-backdrop { animation: none; } }
.qa-modal-dialog {
  position: relative; width: 100%; max-width: 620px; max-height: 88vh; overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px;
}
.qa-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.qa-modal-title { font-family: var(--font-display); font-weight: 400; font-size: 20px; }
.qa-modal-close {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border);
  background: none; color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.qa-modal-close:hover { border-color: var(--text-dim); color: var(--text); }
.qa-modal-close svg { width: 18px; height: 18px; }
.qa-modal-form .btn { margin-top: 4px; }
@media (width < 560px) {
  .qa-modal { padding: 3vh 10px 10px; }
  .qa-modal-dialog { padding: 16px; }
}

/* ============================================================
   Редактор проекта кабинета (/account/builds/{id}/edit).
   Общие поля — .auth-*, структура — .account-section (как в профиле).
   ============================================================ */

/* Моргание необмонтированного Vue-шаблона */
[v-cloak] { display: none; }

.build-editor { padding: 24px 0 48px; }
.build-editor-head {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.build-editor-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--text-dim);
  text-decoration: none; padding-top: 8px;
}
.build-editor-back:hover { color: var(--accent-2); }
.build-editor-back svg { width: 16px; height: 16px; }
.build-editor-title { display: flex; align-items: center; gap: 12px; flex: 1; flex-wrap: wrap; }
.build-editor-title .auth-title { margin: 0; }
.build-editor-status {
  font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 20px;
  color: var(--green); background: rgba(74, 222, 128, 0.1);
}
/* Черновик — нейтральный; на модерации — золотой (ждёт проверки) */
.build-editor-status--draft { color: var(--text-dim); background: var(--bg-card-hover); }
.build-editor-status--pending { color: var(--gold); background: rgba(255, 200, 77, 0.12); }
.build-editor-save { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.build-editor-saved { font-size: 12px; color: var(--text-dim); }

.build-editor-section { margin-bottom: 20px; }
.build-editor-h2 {
  font-family: var(--font-display); font-weight: 400; font-size: 18px;
  margin-bottom: 14px;
}
.build-editor-h3 { font-size: 15px; font-weight: 800; }
.build-editor-h2-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.build-editor-h2-row .build-editor-h2,
.build-editor-h2-row .build-editor-h3 { margin: 0; }

/* Короткие поля — сетками по двое (теги+бюджет и т.п.) */
.build-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
/* Табло замера: шесть компактных полей — по трое в строку */
.build-editor-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 0 24px; }

.build-editor-story { resize: vertical; min-height: 120px; }
.build-editor-status-tabs { margin-bottom: 0; }

/* Состав системы: строка «группа | название | пояснение | удалить» */
.build-editor-row {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1fr) 40px;
  gap: 8px; align-items: center; margin-bottom: 8px;
}
.build-editor-row .auth-input { margin: 0; }
.build-editor-row-del {
  width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border);
  background: none; color: var(--text-dim); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.15s, border-color 0.15s;
}
.build-editor-row-del:hover { color: var(--accent); border-color: var(--accent); }
.build-editor-row-del svg { width: 15px; height: 15px; }

/* Состав системы: строка «группа | название | кол-во | цена | пояснение | Заменил» */
.build-editor-row--comp { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) 64px 96px minmax(0, 1fr) minmax(86px, auto); }
.build-editor-qty { text-align: center; }
.build-editor-replaced {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--text-dim);
}
.build-editor-replaced input[type="checkbox"] {
  width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer;
}
.build-editor-replaced label { cursor: pointer; white-space: nowrap; }
.build-editor-replaced .build-editor-row-del { flex-shrink: 0; }
/* Заменённый компонент внутри этапа: приглушён, поля недоступны */
.build-editor-row.is-replaced .auth-input { opacity: 0.45; }
.build-editor-row.is-replaced { opacity: 0.75; }
/* Блок «Ранее стояло» под актуальным составом */
.build-editor-replaced-list { margin-top: 14px; }
.build-editor-replaced-title {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-dim); margin-bottom: 8px;
}

/* Блок компонентов внутри карточки этапа */
.build-editor-stage-comps { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.build-editor-stage-comps-add { align-self: flex-start; }

/* Этапы постройки */
.build-editor-stage {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 12px; margin-bottom: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.build-editor-stage-head { display: flex; gap: 8px; align-items: center; }
.build-editor-stage-head .auth-input { margin: 0; }
.build-editor-stage-num {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; color: var(--accent-2);
  background: var(--accent-soft); border: 1px solid rgba(255,92,31,0.3);
}
.build-editor-stage-date { max-width: 150px; }

/* Обложка и галерея */
.build-editor-cover { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; }
.build-editor-cover-preview {
  width: 280px; height: 175px; border-radius: 12px; padding: 0;
  border: 1px dashed var(--border-bright);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 13px;
}
.build-editor-upload { cursor: pointer; display: inline-flex; }
/* Drag фокуса кадра обложки: курсор-«рука», только когда размер картинки
   известен (иначе drag невозможен) */
.build-editor-cover-preview.is-draggable { cursor: grab; touch-action: none; }
.build-editor-cover-preview.is-draggable:active { cursor: grabbing; }

/* Единый компонент списка изображений (плитки): галерея проекта, фото
   этапов — одна разметка и поведение. Плитка 4:3, действие (×) — поверх
   по ховеру в правом верхнем углу, добавление — пунктирная плитка «+»
   в конце сетки. На тач-экранах × виден всегда. */
.photo-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
/* Компактный вариант — внутри строк этапов */
.photo-tiles--sm { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); max-width: 480px; }
.photo-tile {
  position: relative; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border); aspect-ratio: 4 / 3;
}
.photo-tile__img { position: absolute; inset: 0; padding: 0; }
/* Фото этапов на публичной странице — по клику просмотр целиком (лайтбокс) */
.build-stage-photos .photo-tile__img { cursor: zoom-in; }
.photo-tile__del {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 28px; height: 28px; border-radius: 8px; border: none;
  background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s, background-color 0.15s;
}
.photo-tile:hover .photo-tile__del,
.photo-tile__del:focus-visible { opacity: 1; }
.photo-tile__del:hover { background: #d64545; }
.photo-tile__del svg { width: 14px; height: 14px; }
@media (hover: none) {
  /* Тач-экраны: ховера нет — × показываем всегда */
  .photo-tile__del { opacity: 1; }
}
/* Плитка добавления: пунктирная рамка, «+» по центру */
.photo-tile--add {
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: none; color: var(--text-dim);
  border: 1px dashed var(--border-bright);
  transition: color 0.15s, border-color 0.15s;
}
.photo-tile--add:hover { color: var(--accent-2); border-color: var(--accent); }
.photo-tile--add svg { width: 26px; height: 26px; }

/* Первая плитка добавления (галерея пуста) — не на всю ширину */
.build-editor-gallery-first { max-width: 150px; }

.build-editor-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Плавающая кнопка сохранения — всегда под рукой при скролле длинного редактора */
.build-editor-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.build-editor-fab svg { width: 16px; height: 16px; }
/* На мобильных кнопка приподнята над таббаром (<768px он есть у всех страниц) */
@media (width < 768px) {
  .build-editor-fab { right: 16px; bottom: 84px; }
}

.build-new-hint { font-size: 13px; color: var(--text-dim); margin: 8px 0 16px; }
.account-section .auth-form { max-width: 520px; }

@media (width < 560px) {
  .build-editor { padding-top: 16px; }
  .build-editor-grid,
  .build-editor-grid--3 { grid-template-columns: 1fr; }
  .build-editor-row { grid-template-columns: 1fr 36px; }
  .build-editor-row--comp { grid-template-columns: 1fr auto; }
  .build-editor-row .auth-input { grid-column: 1 / -1; }
  .build-editor-row .build-editor-row-del { grid-column: 2; grid-row: 1; }
  .build-editor-row .build-editor-replaced { grid-column: 2; grid-row: 1; justify-self: end; }
  .build-editor-stage-head { flex-wrap: wrap; }
}


/* ============================================================
   Confirm-диалог (assets/js/confirm-dialog.js, window.ruConfirm).
   Единая точка подтверждения деструктивных действий (см. AGENTS.md).
   ============================================================ */

.confirm-overlay {
  position: fixed; inset: 0; z-index: 94;
  background: rgba(5, 6, 8, 0.62);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.confirm-dialog {
  background: var(--bg-card); border: 1px solid var(--border-bright);
  border-radius: 16px; padding: 22px 24px;
  max-width: 420px; width: 100%;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.confirm-title {
  font-family: var(--font-display); font-weight: 400; font-size: 18px;
  line-height: 1.3; margin-bottom: 8px;
}
.confirm-text { font-size: 14px; color: var(--text-dim); line-height: 1.55; }
.confirm-actions {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px;
}
/* Опасное действие (удаление): акцентная кнопка — красная */
.confirm-ok--danger { background: #d64545; }
.confirm-ok--danger:hover { background: #c03c3c; box-shadow: 0 6px 24px rgba(214, 69, 69, 0.25); }

@media (width < 560px) {
  .confirm-dialog { padding: 18px; }
  .confirm-actions { flex-direction: column-reverse; }
  .confirm-actions .btn { width: 100%; justify-content: center; }
}

/* Подзаголовок «Мои ответы» в кабинете — отступ от списка вопросов */
.qa-answers-title {
  font-family: var(--font-display); font-weight: 400; font-size: 18px;
  margin: 26px 0 12px;
}

/* Баннер «вопрос на модерации» — автору его неодобренного вопроса */
.qa-pending-note {
  margin-bottom: 16px; padding: 12px 16px;
  border: 1px solid rgba(255, 200, 77, 0.45); border-radius: var(--radius);
  background: rgba(255, 200, 77, 0.09); color: var(--gold);
  font-size: 13px;
}

/* Скрытие сильно отрицательного рейтинга (≤ -5) за кнопкой */
.qa-rate-reveal {
  padding: 4px 8px; border-radius: 9px; max-width: 84px;
  border: 1px dashed var(--border); background: none;
  color: var(--text-dim); font-size: 11px; line-height: 1.3; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.qa-rate-reveal:hover { border-color: var(--text-dim); color: var(--text); }

/* Свой ответ: рейтинг только на просмотр */
.qa-rate-btn:disabled { opacity: 0.4; cursor: default; }
.qa-rate-btn:disabled:hover { border-color: var(--border); color: var(--text-dim); background: none; }

/* «Новый» у ответа Q&A и комментария проекта — только автору материала;
   счётчик в меню кабинета/шапки */
.qa-new-badge, .build-comment-new {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--accent-2); border: 1px solid rgba(255,92,31,0.45);
  border-radius: 20px; padding: 1px 8px; background: var(--accent-soft);
}
.qa-new-count { color: var(--accent-2); font-weight: 700; }

/* Баджик пункта меню: новые ответы/комментарии (счётчик из AccountMenu) */
.menu-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1;
  color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

/* Выдержка ответа в «Моих ответах» — отдельной строкой, в одну линию */
.articles-item-desc {
  margin-top: 4px; font-size: 13px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Ветки обсуждения внутри ответов (qa_replies): без рейтингов, дерево */
.qa-replies { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.qa-reply { margin-left: calc((var(--depth, 1) - 1) * 18px); padding: 6px 0 2px; }
.qa-reply-head { display: flex; align-items: baseline; gap: 7px; font-size: 12px; color: var(--text-dim); flex-wrap: wrap; }
.qa-reply-head b { color: var(--text); font-size: 13px; }
.qa-reply-btn {
  margin-left: auto; border: none; background: none; padding: 0;
  color: var(--accent-2); font-size: 12px; font-weight: 700; cursor: pointer;
}
.qa-reply-btn:hover { color: var(--accent); }
.qa-reply-text { font-size: 13px; color: #c9ced8; line-height: 1.55; margin-top: 3px; overflow-wrap: break-word; }
.qa-reply-add {
  margin-top: 8px; border: none; background: none; padding: 0;
  color: var(--text-dim); font-size: 12px; font-weight: 700; cursor: pointer;
}
.qa-reply-add:hover { color: var(--accent-2); }
.qa-reply-login { margin-top: 8px; font-size: 12px; color: var(--text-dim); }
.qa-reply-login a { color: var(--accent-2); }
.qa-reply-form { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.qa-reply-form textarea { width: 100%; min-height: 40px; resize: vertical; }
.qa-reply-form-actions { display: flex; gap: 8px; }

/* Аватар-инициал без фото: СПЛОШНОЙ кружок в персональном цвете + белая
   буква. Размеры задаёт контейнер (чип 30px, карточка 40px, байлайн 34px,
   build-avatar 30/46px) — span растягивается на 100% */
.avatar-initial {
  width: 100%; height: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden;
  font-weight: 800; font-size: 13px; color: #fff; flex-shrink: 0;
}
/* Фото-аватар: растягивается на контейнер (во всех местах одинаково) */
.avatar-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* Крупные контейнеры — чуть крупнее буква */
.account-user-avatar .avatar-initial { font-size: 16px; }
.article-byline .avatar .avatar-initial, .build-avatar--lg .avatar-initial { font-size: 15px; }

/* ============================================================
   Раздел «События» (календарь): листинг /events (концепт events-v2 —
   липкие месяцы) и страница события /event/{slug} (концепт event.html).
   Брейкпоинты проекта: 980 (планшеты/сетки), 560 (крупные телефоны).
   ============================================================ */

/* Обратный отсчёт до ближайшего события */
.countdown-block {
    display: flex; align-items: center; gap: 34px; flex-wrap: wrap;
    background:
        radial-gradient(500px 200px at 85% 120%, rgba(255, 92, 31, 0.12), transparent 65%),
        var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 24px 28px; margin-bottom: 26px;
}
.countdown-info { flex: 1; min-width: 260px; }
.countdown-info .hero-kicker { margin-bottom: 10px; font-size: 12px; }
.countdown-title { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.3; }
.countdown-meta { font-size: 14px; color: var(--text-dim); margin: 8px 0 18px; }
.countdown-digits { display: flex; gap: 12px; }
.cd-cell {
    min-width: 74px; text-align: center;
    background: var(--bg); border: 1px solid var(--border-bright); border-radius: 12px;
    padding: 12px 8px 9px;
}
.cd-cell b {
    display: block; font-family: var(--font-display); font-weight: 400;
    font-size: 32px; line-height: 1;
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-variant-numeric: tabular-nums;
}
.cd-cell span {
    display: block; margin-top: 6px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-dim);
}
/* Подложка блока — фото города (--img): затемняем, чтобы текст читался */
.countdown-block[data-cd-photo] {
    background:
        linear-gradient(95deg, rgba(11, 12, 15, 0.92) 20%, rgba(11, 12, 15, 0.55) 100%),
        var(--img) center / cover no-repeat,
        var(--bg-card);
}
/* Подпись атрибуции фото под афишей (обязательна по лицензиям CC) */
.event-cover-credit {
    margin: -14px 0 20px; text-align: right;
    font-size: 11px; color: var(--text-dim);
}
.event-cover-credit a { color: var(--text-dim); }
.event-cover-credit a:hover { color: var(--accent-2); }

/* Завершённое событие: бейдж и приглушённое фото афиши (event-past) */
.done-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; color: var(--text-dim);
    background: rgba(149, 156, 169, 0.12); border: 1px solid var(--border-bright);
    padding: 3px 10px; border-radius: 20px;
}
.done-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); }
.poster.past.img-cover::after { filter: saturate(0.45) brightness(0.85); }

/* Рекорды этапа */
.records-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 40px; }
.record-tile {
    background:
        radial-gradient(220px 100px at 50% -20%, rgba(255, 92, 31, 0.1), transparent 70%),
        var(--bg-card);
    border: 1px solid var(--border); border-radius: 12px;
    padding: 16px 16px 14px; text-align: center;
}
.record-tile b {
    display: block; font-family: var(--font-display); font-weight: 400; font-size: 27px;
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-variant-numeric: tabular-nums;
}
.record-tile span { display: block; font-size: 12px; color: var(--text-dim); margin-top: 6px; }

/* Протокол результатов */
.proto-class {
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    color: var(--accent-2); margin: 16px 0 6px;
}
.proto-head, .proto-row {
    display: grid; grid-template-columns: 44px minmax(0, 1.4fr) minmax(0, 1fr) 100px 110px;
    gap: 12px; align-items: center; padding: 9px 10px; margin: 0 -10px;
}
.proto-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); }
.proto-row { border-top: 1px solid var(--border); font-size: 14px; transition: background 0.15s; }
.proto-row:hover { background: var(--bg-card-hover, var(--bg-card)); }
.proto-row.winner { background: rgba(255, 200, 77, 0.06); }
.proto-row.winner:hover { background: rgba(255, 200, 77, 0.1); }
.medal {
    width: 26px; height: 26px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: var(--text-dim);
    background: var(--bg); border: 1px solid var(--border);
}
.medal.m1 { background: linear-gradient(135deg, var(--gold), var(--accent-2)); color: #241a05; border: none; }
.medal.m2 { background: #c7cdd8; color: #15171c; border: none; }
.medal.m3 { background: #c98a4b; color: #1d1206; border: none; }
.proto-name { font-weight: 800; min-width: 0; overflow-wrap: break-word; }
/* Аватарка привязанного участника (зарегистрирован на портале) —
   рядом с именем в строке протокола */
.proto-avatar {
  display: inline-flex; width: 22px; height: 22px; flex-shrink: 0;
  vertical-align: -5px; margin-right: 7px; border-radius: 50%;
}
.proto-avatar .avatar-initial { font-size: 11px; }
.proto-car { color: var(--text-dim); font-size: 13px; }
.proto-result { font-weight: 800; font-variant-numeric: tabular-nums; }
.proto-row.winner .proto-result { color: var(--gold); }
.proto-prize { font-size: 13px; color: var(--text-dim); text-align: right; }

/* Пьедестал прошедшего события в листинге */
.podium-stage { position: relative; margin-bottom: 34px; }
.podium-head { margin-bottom: 16px; }
.podium-head .card-meta { margin-top: 2px; font-size: 13px; color: var(--text-dim); }
.podium-head h3 { font-family: var(--font-display); font-weight: 400; font-size: 18px; }
.podium-row-wrap { display: flex; align-items: flex-end; gap: 14px; }
.podium-col { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.podium-person {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px 14px;
}
.podium-name { font-size: 14px; font-weight: 800; overflow-wrap: break-word; }
/* Аватарка привязанного участника на пьедестале (подиум в листинге
   прошедших событий) */
.podium-avatar {
  display: inline-flex; width: 24px; height: 24px; flex-shrink: 0;
  vertical-align: -6px; margin-right: 6px; border-radius: 50%;
}
.podium-avatar .avatar-initial { font-size: 11px; }
.podium-car { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.podium-result { font-size: 16px; font-weight: 800; color: var(--accent-2); margin-top: 6px; }
.podium-step {
    border-radius: 12px 12px 0 0; border: 1px solid var(--border); border-bottom: none;
    display: flex; align-items: flex-end; justify-content: center;
    font-family: var(--font-display); font-size: 30px; color: rgba(255, 255, 255, 0.85);
    padding-bottom: 12px;
}
.podium-col.first .podium-step {
    height: 130px;
    background: linear-gradient(180deg, rgba(255, 200, 77, 0.28), rgba(255, 200, 77, 0.05));
    border-color: rgba(255, 200, 77, 0.45); color: var(--gold);
}
.podium-col.second .podium-step {
    height: 90px;
    background: linear-gradient(180deg, rgba(199, 205, 216, 0.2), rgba(199, 205, 216, 0.04));
}
.podium-col.third .podium-step {
    height: 64px;
    background: linear-gradient(180deg, rgba(201, 138, 75, 0.22), rgba(201, 138, 75, 0.04));
}
.podium-col.first .podium-person { border-color: rgba(255, 200, 77, 0.45); }

/* Лента по месяцам: липкие заголовки месяцев (вариант v2) */
.timeline { margin: 0 0 44px; }
.timeline-month {
    position: sticky; top: 84px; z-index: 5;
    display: flex; align-items: center; gap: 16px;
    background: var(--bg); padding: 8px 0;
    margin: 22px 0 12px;
    font-family: var(--font-display); font-weight: 400; font-size: 17px; color: var(--accent-2);
}
.timeline-month:first-child { margin-top: 0; }
.timeline-month::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--border-bright), transparent);
}
.timeline-event {
    position: relative;
    display: flex; align-items: center; gap: 16px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 18px; margin-bottom: 12px;
    transition: border-color 0.2s, transform 0.2s;
}
.timeline-event:hover { border-color: var(--border-bright); transform: translateY(-1px); }
.ev-link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.ev-link:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.ev-more { position: relative; z-index: 3; flex-shrink: 0; }
.event-date {
    width: 64px; height: 64px; flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 12px;
    background:
        linear-gradient(#241207, #180d06) padding-box,
        linear-gradient(135deg, var(--accent), var(--accent-2)) border-box;
}
.event-date b { font-family: var(--font-display); font-weight: 400; font-size: 25px; line-height: 1.1; color: var(--text); }
.event-date span { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-dim); }
.te-main { flex: 1; min-width: 0; }
.te-title { font-size: 15px; font-weight: 800; }
.te-meta { font-size: 13px; color: var(--text-dim); margin-top: 3px; }

/* Строка прошедшего события в секции «Прошедшие» */
.events-past-row {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    padding: 12px 2px; border-top: 1px solid var(--border);
    text-decoration: none; color: var(--text);
}
.events-past-row:first-of-type { border-top: none; }
.events-past-row:hover .events-past-title { color: var(--accent-2); }
.events-past-date { flex: none; font-size: 13px; color: var(--text-dim); width: 110px; }
.events-past-title { font-size: 14px; font-weight: 800; }
.events-past-meta { font-size: 13px; color: var(--text-dim); }

/* Фильтр по городу: компонент .city-select внутри GET-формы */
.events-city-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.events-city-form .city-select { min-width: 240px; }
/* author-стили .city-select-panel задают display и перебивают UA-стиль
   [hidden] — на публичной странице (вне Vue) панель закрываем явно */
.events-city-form .city-select-panel[hidden] { display: none; }
.events-city-reset { font-size: 13px; font-weight: 700; color: var(--accent-2); text-decoration: none; }
.events-city-reset:hover { color: var(--accent); }

/* Афиша-постер страницы события (фото-обложка — следующий срез) */
.poster {
    position: relative; overflow: hidden;
    border-radius: var(--radius); border: 1px solid var(--border);
    min-height: 380px; margin-bottom: 26px;
    background:
        radial-gradient(600px 300px at 85% 110%, rgba(255, 92, 31, 0.14), transparent 65%),
        radial-gradient(400px 240px at 10% 0%, rgba(90, 162, 255, 0.06), transparent 70%),
        var(--bg-card);
    display: flex; align-items: flex-end;
}
.poster-body { position: relative; z-index: 2; max-width: 640px; padding: 18px 22px 20px; }
/* С фото города градиент .img-cover (низ карточки) слишком светлый для
   постера — затемняем почти весь кадр, как в концепте афиши */
.poster.img-cover::before {
    background: linear-gradient(95deg, rgba(11, 12, 15, 0.95) 20%, rgba(11, 12, 15, 0.6) 55%, rgba(11, 12, 15, 0.3) 100%);
}
.poster-date {
    font-family: var(--font-display); font-weight: 400; font-size: 54px; line-height: 1;
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.poster-date span { font-size: 22px; }
.poster h1 { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.25; margin: 12px 0 10px; }
.poster-place { font-size: 15px; color: rgba(255, 255, 255, 0.75); }
.poster-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.poster-org { font-size: 13px; color: rgba(255, 255, 255, 0.65); }
.poster-org b { color: #fff; }

/* Плашки ключевой информации */
.info-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 40px; }
.info-tile {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 13px 14px;
    transition: border-color 0.2s;
}
.info-tile:hover { border-color: var(--border-bright); }
.info-tile span {
    display: block; font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; color: var(--text-dim); margin-bottom: 6px;
}
.info-tile b { font-size: 14px; font-weight: 800; line-height: 1.4; display: block; }

/* Панель «программа дня» / «как добраться» */
.event-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px; }
.event-panel > h3 { font-family: var(--font-display); font-weight: 400; font-size: 18px; margin-bottom: 10px; }
.program-row {
    display: flex; align-items: baseline; gap: 18px;
    padding: 12px 0; border-top: 1px solid var(--border);
}
.program-row:first-of-type { border-top: none; }
.program-time {
    width: 64px; flex-shrink: 0; font-family: var(--font-display);
    font-size: 16px; color: var(--accent-2); font-variant-numeric: tabular-nums;
}
.program-main b { font-size: 14px; font-weight: 800; display: block; }
.program-main span { font-size: 13px; color: var(--text-dim); }
.event-description { font-size: 14px; line-height: 1.6; margin: 0 0 10px; }
.event-address { font-size: 14px; color: var(--text-dim); margin: 0; }
.event-address b { color: var(--text); }

/* Карточка организатора */
.org-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px;
}
.org-logo {
    width: 50px; height: 50px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 18px; color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.org-body { flex: 1; min-width: 0; }
.org-name { font-size: 15px; font-weight: 800; }
.org-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.org-card .btn { margin-left: auto; padding: 8px 14px; flex-shrink: 0; }

/* Двухрядная шапка (768–1365): липкие месяцы ниже её */
@media (width < 1366px) {
    .timeline-month { top: 130px; }
}
@media (width < 980px) {
    .countdown-block { gap: 22px; }
    .info-tiles { grid-template-columns: repeat(2, 1fr); }
    .records-grid { grid-template-columns: repeat(2, 1fr); }
    .poster h1 { font-size: 25px; }
    .poster-date { font-size: 42px; }
}
@media (width < 768px) {
    .timeline-month { top: 72px; }
}
@media (width < 560px) {
    .countdown-digits { width: 100%; }
    .cd-cell { flex: 1; min-width: 0; }
    .cd-cell b { font-size: 24px; }
    .timeline-event { flex-wrap: wrap; }
    .timeline-event .event-date { width: 56px; height: 56px; }
    .timeline-event .event-date b { font-size: 22px; }
    .te-main { flex: 1 1 calc(100% - 80px); }
    .timeline-event .btn { width: 100%; }
    .timeline-event .tag { order: -1; margin-left: auto; }
    .info-tiles { grid-template-columns: 1fr; }
    .events-past-date { width: auto; flex-basis: 100%; }
    .poster { min-height: 340px; }
    .poster-body { padding: 14px 16px 16px; }
    .poster h1 { font-size: 21px; }
    .poster-date { font-size: 34px; }
    .org-card { flex-wrap: wrap; }
    .records-grid { grid-template-columns: 1fr 1fr; }
    .proto-head { display: none; }
    .proto-head, .proto-row { grid-template-columns: 34px minmax(0, 1.3fr) 90px; }
    .proto-car, .proto-prize { display: none; }
    .podium-row-wrap { gap: 8px; }
    .podium-name { font-size: 13px; }
}

/* ============================================================
   Комментарии и рейтинг проекта (блоки build/comments, build/rating,
   build/comment, build/comment-reply; JS — build-comments.js)
   ============================================================ */

/* Виджет рейтинга в сайдбаре — карточка, как табло замера */
.build-rating {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px;
}
.build-rating-label {
  display: block; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-dim);
  margin-bottom: 12px; text-align: center;
}
.build-rating-row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.build-rating-value {
  font-family: var(--font-display); font-size: 30px; line-height: 1;
  min-width: 3ch; text-align: center; font-variant-numeric: tabular-nums;
}
.build-rate-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: none; color: var(--text-dim);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.build-rate-btn svg { width: 18px; height: 18px; }
.build-rate-btn:hover:not(:disabled) {
  border-color: var(--accent); color: var(--accent-2); background: var(--accent-soft);
}
.build-rate-btn.is-active { border-color: var(--accent); color: var(--accent-2); background: var(--accent-soft); }
.build-rate-btn:disabled { opacity: 0.4; cursor: default; }
.build-rating-note { margin-top: 12px; font-size: 12px; color: var(--text-dim); text-align: center; }
.build-rating-note a { color: var(--accent-2); }
/* Инлайн-форма «причина минуса» */
.build-rate-reason { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.build-rate-reason[hidden] { display: none; }
.build-rate-reason textarea {
  width: 100%; min-height: 76px; resize: vertical;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; color: var(--text); font-size: 13px; font-family: inherit;
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.build-rate-reason textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.build-rate-reason-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Секция комментариев — под основной двухколоночной частью, на всю ширину */
.build-comments { margin-bottom: 48px; }
.build-comments-title {
  font-family: var(--font-display); font-weight: 400; font-size: 22px;
  margin-bottom: 18px;
}
.build-comments-empty { font-size: 14px; color: var(--text-dim); margin-bottom: 14px; }
.build-comment-list { display: flex; flex-direction: column; gap: 14px; }

/* Один корневой комментарий */
.build-comment {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
}
.build-comment-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-dim); margin-bottom: 8px;
}
.build-comment-head b { color: var(--text); font-size: 14px; }
/* Бейдж комментария-обоснования минуса рейтинга (minus_reason) */
.build-comment-badge {
  padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: rgba(248, 113, 113, 0.12); color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.35);
}
/* Минусовое обоснование выделяется целиком: тёплая красная рамка
   и едва заметный фон (бейдж в шапке объясняет, почему) */
.build-comment--minus {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.05);
}
.build-comment-avatar { display: inline-flex; }
.build-comment-avatar .avatar-photo, .build-comment-avatar .avatar-initial {
  width: 28px; height: 28px; border-radius: 50%; font-size: 13px;
}
.build-comment-text { font-size: 14px; color: #c9ced8; line-height: 1.65; overflow-wrap: break-word; }
.build-comment-text p { margin-bottom: 8px; }
.build-comment-text p:last-child { margin-bottom: 0; }
/* Действия комментария — компактной строкой под текстом (слева, у места
   чтения — не таскать мышь через экран): «Ответить», голосование,
   «Удалить» иконкой. Порядок у корня и ответа одинаковый */
.build-comment-actions { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.build-comment-reply-btn, .build-comment-delete {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 12px; color: var(--text-dim); font-family: inherit;
}
.build-comment-reply-btn:hover, .build-comment-delete:hover { color: var(--accent-2); }
.build-comment-delete svg { width: 13px; height: 13px; }
/* Удаление — только иконка (подпись в title/aria-label): увеличиваем
   зону наведения, как у кнопок голосования */
.build-comment-delete {
  min-width: 26px; height: 26px; justify-content: center;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.build-comment-delete:hover { background: var(--bg-card-hover); }

/* Голосование за комментарий (лайк/дизлайк): счётчик между кнопками;
   активный знак — акцентная подсветка (класс is-active ставит и сервер,
   и JS по полю own ответа). Строку в дереве комментария задаёт блок
   действий (.build-comment-actions под текстом) */
.build-comment-votes { display: inline-flex; align-items: center; gap: 4px; }
.build-comment-vote {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 8px;
  color: var(--text-dim);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.build-comment-vote svg { width: 15px; height: 15px; }
.build-comment-vote:hover { color: var(--text); background: var(--bg-card-hover); }
.build-comment-vote.is-active {
  color: var(--accent-2);
  background: var(--accent-soft); border-color: var(--accent);
}
.build-comment-votes-sum {
  min-width: 20px; text-align: center;
  font-size: 12px; font-weight: 700; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.build-comment-votes-sum.is-negative { color: #f87171; }

/* Ответы на комментарий — вложенным блоком */
.build-comment-replies {
  margin-top: 12px; padding-left: 16px;
  border-left: 2px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
}
.build-comment-reply { padding-top: 10px; border-top: 1px solid var(--border); }
.build-comment-reply:first-child { padding-top: 0; border-top: none; }

/* Формы: новый комментарий и ответ */
.build-comment-form, .build-reply-form {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.build-comment-form { margin-top: 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.build-reply-form { margin-top: 12px; }
.build-comment-form textarea, .build-reply-form textarea {
  width: 100%; min-height: 76px; resize: vertical;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; color: var(--text); font-size: 14px; font-family: inherit;
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.build-reply-form textarea { min-height: 44px; font-size: 13px; }
.build-comment-form textarea:focus, .build-reply-form textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.build-comment-form-actions, .build-reply-form-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Ошибка валидации под формой (JS) */
.build-form-error { font-size: 12px; color: #f87171; margin: 0; }

/* Плашка входа для гостей */
.build-comments-login { margin-top: 18px; font-size: 14px; color: var(--text-dim); }
.build-comments-login a { color: var(--accent-2); }

/* Строка проекта в кабинете: авто и дата обновления — каждая отдельной
   строкой; отступы в стеке единые (6px, как у .articles-item-meta) */
.articles-item-car { font-size: 14px; color: var(--text-dim); margin-top: 6px; }
.articles-item-updated {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px; font-size: 12px; color: var(--text-dim);
}
.articles-item-updated svg { width: 13px; height: 13px; }

/* Статистика строки проекта в кабинете: отдельный ряд чипов с иконками
   (просмотры, комментарии, рейтинг — блок account/builds-list) */
.articles-item-stats { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.articles-item-stat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--border);
  font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.articles-item-stat svg { width: 14px; height: 14px; color: var(--text-dim); }
.articles-item-stat--negative { color: #f87171; border-color: rgba(248, 113, 113, 0.4); }
.articles-item-stat--negative svg { color: #f87171; }
/* Чип комментариев с «новыми»: акцент + тонкая рамка, как у негатива —
   примета, что по проекту есть непрочитанное */
.articles-item-stat--new { color: var(--accent-2); border-color: rgba(255, 154, 61, 0.45); font-weight: 700; }
.articles-item-stat--new svg { color: var(--accent-2); }

/* Фильтр комментариев на странице проекта: «Все» / «Только минусы»
   (панель видна только с JS, блок build/comments) */
.build-comments-filter { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.build-comments-filter[hidden] { display: none; }
.build-comments-filter-btn {
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: none; color: var(--text-dim);
  font-size: 13px; font-weight: 600; font-family: inherit; white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.build-comments-filter-btn:hover { border-color: var(--accent); color: var(--accent-2); }
.build-comments-filter-btn.is-active {
  border-color: var(--accent); color: var(--accent-2); background: var(--accent-soft);
}

/* ============================================================
   РАЗДЕЛ «МАГАЗИНЫ И СТУДИИ» (блоки shops/* и shop/*)
   Листинг /shops и страница /shop/{slug} по концептам shops.html
   и shop.html. Переиспользует общие компоненты (.img-cover, .tab,
   .tag, .btn, .crumbs, .pagination, .city-select).
   ============================================================ */

/* ---------- Листинг: сетка «список + карта» ---------- */
.shops-layout {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 24px; align-items: start; margin-bottom: 48px;
}
.shops-list { min-width: 0; }

/* Строка поиска по каталогу (концепт .page-search) */
.shops-search {
  display: flex; align-items: center; gap: 10px;
  max-width: 520px; margin: 18px 0 4px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 0 14px;
  transition: border-color 0.15s;
}
.shops-search:focus-within { border-color: var(--accent); }
.shops-search-icon { display: inline-flex; color: var(--text-dim); flex: none; }
.shops-search input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--text); font-family: inherit; font-size: 14px;
  min-height: 42px; line-height: 1.2;
}
.shops-search input::placeholder { color: var(--text-dim); }

/* Фильтр города: компонент .city-select внутри GET-формы (как у событий) */
.shops-city-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shops-city-form .city-select { min-width: 240px; }
.shops-city-form .city-select-panel[hidden] { display: none; }

/* ---------- Карточка магазина в ленте ---------- */
.shop-item {
  position: relative; /* якорь для ссылки-оверлея .ovl */
  display: flex; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 14px;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.shop-item:hover {
  transform: translateY(-2px);
  border-color: var(--border-bright);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.shop-item:hover .img-cover::after { transform: scale(1.06); }

.shop-photo {
  width: 168px; min-height: 148px; flex-shrink: 0; padding: 0;
}
/* Нет обложки — градиент-фолбэк вместо фото */
.shop-photo--empty {
  background: linear-gradient(135deg, rgba(255, 92, 31, 0.22), rgba(90, 162, 255, 0.14)), var(--bg-card-hover);
}
.shop-photo--empty::before { background: none; }

.shop-info {
  flex: 1; min-width: 0; padding: 14px 16px;
  display: flex; flex-direction: column;
}
.shop-info .card-title { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.shop-tags { margin-top: 9px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }

.shop-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 12px;
}
.shop-price { font-size: 14px; font-weight: 800; color: var(--accent-2); }
.shop-foot .btn { padding: 7px 14px; min-height: 0; }
.shop-more { position: relative; z-index: 3; }

/* Рейтинг: звезда + число, как в концепте («4.8 · 126 отзывов») */
.shop-rating {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 800; color: var(--gold);
}
.shop-rating-row .shop-rating { color: var(--accent-2); }

/* Премиум — золотая рамка и плашка */
.shop-item.premium {
  border-color: rgba(255, 200, 77, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 200, 77, 0.18), 0 8px 26px rgba(255, 200, 77, 0.07);
}
.shop-item.premium:hover { border-color: var(--gold); }
.premium-mark {
  font-size: 11px; font-weight: 800; color: var(--gold);
  border: 1px solid rgba(255, 200, 77, 0.45); border-radius: 20px;
  padding: 2px 9px; margin-left: 2px;
}

/* ---------- Демо-панель карты (листинг) ---------- */
.map-panel {
  position: sticky; top: 82px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.map-canvas {
  position: relative; height: 430px;
  background:
    linear-gradient(38deg, transparent 49.3%, rgba(255,255,255,0.06) 49.3%, rgba(255,255,255,0.06) 50.7%, transparent 50.7%),
    linear-gradient(-24deg, transparent 49.5%, rgba(255,255,255,0.05) 49.5%, rgba(255,255,255,0.05) 50.5%, transparent 50.5%),
    repeating-linear-gradient(0deg, transparent 0 44px, rgba(255,255,255,0.04) 44px 46px),
    repeating-linear-gradient(90deg, transparent 0 44px, rgba(255,255,255,0.04) 44px 46px),
    radial-gradient(340px 240px at 30% 30%, rgba(90,162,255,0.07), transparent 70%),
    #101218;
}
.map-river {
  position: absolute; left: -10%; right: -10%; top: 63%; height: 46px;
  transform: rotate(-7deg);
  background: rgba(90, 162, 255, 0.1);
  border-top: 1px solid rgba(90, 162, 255, 0.16);
  border-bottom: 1px solid rgba(90, 162, 255, 0.16);
}
.map-pin {
  position: absolute; width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 92, 31, 0.22), 0 0 14px var(--accent-glow);
  transform: translate(-50%, -50%);
}
.map-pin.active {
  width: 18px; height: 18px;
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(255, 200, 77, 0.2), 0 0 20px rgba(255, 200, 77, 0.55);
  z-index: 2;
}
.map-pin-label {
  position: absolute; transform: translate(-50%, 0); top: 16px; left: 50%;
  white-space: nowrap; font-size: 12px; font-weight: 800; color: var(--gold);
  background: rgba(0,0,0,0.6); border: 1px solid rgba(255,200,77,0.4);
  padding: 3px 9px; border-radius: 6px; backdrop-filter: blur(4px);
}
.map-caption {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-dim);
}
.map-caption b { color: var(--text); font-weight: 700; }

/* ---------- Страница магазина ---------- */
/* Фото-полоса обложки под крошками */
.shop-cover {
  height: 300px; padding: 0;
  border-radius: var(--radius); border: 1px solid var(--border);
  margin-bottom: 24px;
}

/* Шапка магазина */
.shop-head {
  display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 24px; margin-bottom: 24px;
}
.shop-logo {
  width: 74px; height: 74px; border-radius: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.shop-head-main { flex: 1; min-width: 260px; }
.shop-head h1 {
  font-family: var(--font-display); font-weight: 400; font-size: 28px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.partner-badge {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--blue); background: rgba(90,162,255,0.12);
  border: 1px solid rgba(90,162,255,0.4); padding: 3px 10px; border-radius: 20px;
}
.shop-sub {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; font-size: 13px; color: var(--text-dim);
}
.shop-sub .shop-rating { font-size: 13px; color: var(--accent-2); }
.shop-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* Панели «О магазине» и «Как нас найти» (общий каркас как у .widget) */
.shop-panel {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px;
}
.shop-panel > h3 {
  font-family: var(--font-display); font-weight: 400; font-size: 18px;
  margin-bottom: 10px;
}
.shop-panel p { font-size: 14px; color: #c9ced8; line-height: 1.7; }
.shop-panel--contacts { margin-bottom: 48px; }

/* Чипы услуг */
.services-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.service-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 14px;
}
.service-chip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent-glow);
}

/* Карта-заглушка «Как нас найти» */
.map-stub {
  position: relative; height: 260px; overflow: hidden;
  background:
    linear-gradient(38deg, transparent 49.3%, rgba(255,255,255,0.06) 49.3%, rgba(255,255,255,0.06) 50.7%, transparent 50.7%),
    linear-gradient(-24deg, transparent 49.5%, rgba(255,255,255,0.05) 49.5%, rgba(255,255,255,0.05) 50.5%, transparent 50.5%),
    repeating-linear-gradient(0deg, transparent 0 44px, rgba(255,255,255,0.04) 44px 46px),
    repeating-linear-gradient(90deg, transparent 0 44px, rgba(255,255,255,0.04) 44px 46px),
    #101218;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.map-stub .map-pin {
  left: 46%; top: 44%; width: 18px; height: 18px;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(255,92,31,0.2), 0 0 20px var(--accent-glow);
  z-index: 2;
}
.map-stub .map-pin-label {
  top: 16px; left: 50%; transform: translateX(-50%);
  color: var(--accent-2);
  background: rgba(0,0,0,0.6); border-color: rgba(255,154,61,0.4);
}
.map-stub .map-caption {
  position: absolute; right: 12px; bottom: 10px;
  padding: 0; border-top: none;
}

/* Колонки контактов под картой */
.contacts-row { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 14px; font-size: 14px; }
.contacts-row b {
  display: block; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-dim); margin-bottom: 4px;
}
.contacts-row a { color: var(--accent-2); font-weight: 700; }
.contacts-row a:hover { color: var(--accent); }

/* ---------- Адаптив ---------- */
@media (width < 980px) {
  /* Сетка «список + карта» — одна колонка, карта над списком */
  .shops-layout { display: flex; flex-direction: column; }
  .map-panel { position: static; order: -1; width: 100%; }
  .map-canvas { height: 210px; }
  .shops-list { width: 100%; }
}
@media (width < 560px) {
  /* Карточка — вертикальная: фото строкой сверху */
  .shop-item { flex-direction: column; }
  .shop-photo { width: 100%; height: 150px; min-height: 0; }
  .shop-cover { height: 210px; }
  .shop-head h1 { font-size: 22px; }
  .shop-actions { width: 100%; }
  .shop-actions .btn { flex: 1; }
}


/* ============================================================
   Раздел «Видео» (лента /video, страница ролика, блок на странице
   билда, модалка добавления — см. blocks/video/*, blocks/videos/*).
   Карточки и модалка переиспользуют общие компоненты (.card,
   .builds-grid, .qa-modal, .city-select, .auth-field).
   ============================================================ */

/* Карточка ролика: постер 16:9 с круглой кнопкой play поверх */
.video-card-cover { position: relative; height: 170px; padding: 0; }
.video-card-cover > .img-cover { position: absolute; inset: 0; }
.video-card-cover > .img-cover::after { background-size: cover; }
.video-thumb-play {
  position: absolute; top: 50%; left: 50%; z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff; pointer-events: none;
  transition: background 0.15s, transform 0.15s;
}
.video-thumb-play svg { width: 22px; height: 22px; margin-left: 2px; }
.video-card:hover .video-thumb-play { background: var(--accent); transform: translate(-50%, -50%) scale(1.06); }

/* Рубрика в карточке — приглушённый бейдж: яркий .rubric-badge (градиент,
   свечение) на каждой карточке сетки перегружает ленту */
.video-card .rubric-badge {
  align-self: flex-start;
  background: var(--accent-soft); color: var(--accent-2);
  box-shadow: none; padding: 3px 9px; border-radius: 20px;
  letter-spacing: 0.8px;
}

/* Лента: тулбар (фильтр слева, счётчик и кнопка добавления справа) */
.videos-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.videos-filter { margin-bottom: 0; }
.videos-rubric-dd { width: 260px; max-width: 100%; }
.videos-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.videos-total { margin: 0; font-size: 13px; color: var(--text-dim); white-space: nowrap; }
.videos-head .btn svg { width: 16px; height: 16px; }

/* Страница ролика */
.video-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.video-page-head h1 { margin-bottom: 12px; }
.video-page-actions { display: flex; gap: 8px; flex-shrink: 0; }
.video-page-actions .btn svg { width: 16px; height: 16px; }
.video-page-actions .btn-danger { color: #f87171; }
.video-page-actions .btn-danger:hover { border-color: #f87171; background: rgba(248, 113, 113, 0.08); }
.video-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 18px; font-size: 13px; color: var(--text-dim);
}
.video-meta .author { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 700; }
.video-views { display: inline-flex; align-items: center; gap: 5px; }
.video-views svg { width: 14px; height: 14px; }
.video-source {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--accent-2); font-weight: 700; text-decoration: none;
}
.video-source:hover { color: var(--accent); }
.video-source svg { width: 14px; height: 14px; }

/* Отзывчивая обёртка плеера: 16/9 на любой ширине */
.video-player {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: #000; margin-bottom: 22px;
}
.video-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-description { margin-bottom: 22px; font-size: 15px; line-height: 1.65; color: var(--text-dim); }
.video-description p { margin: 0 0 12px; }

/* Привязанный проект */
.video-build { margin-bottom: 26px; }
.video-build-label {
  display: block; margin-bottom: 10px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-dim);
}
.video-build-card { display: flex; align-items: stretch; max-width: 480px; text-decoration: none; }
.video-build-card .card-cover { width: 150px; min-height: 90px; flex-shrink: 0; }
.video-build-card .card-body { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.video-build-card .card-title { color: var(--text); }
.video-build-card .card-meta { color: var(--text-dim); }

/* Секция «Видео проекта» на странице билда */
.build-videos { margin-bottom: 26px; }
.build-videos-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.build-videos-head .section-title { margin-bottom: 0; }
.build-videos-head .btn svg { width: 16px; height: 16px; }

/* Автопревью ссылки в модалке */
.video-link-preview {
  display: flex; gap: 12px; align-items: center;
  margin: 4px 0 14px; padding: 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card-hover);
}
.video-link-preview-frame {
  position: relative; flex-shrink: 0; width: 128px; aspect-ratio: 16 / 9;
  border-radius: 8px; overflow: hidden; background: #000;
}
.video-link-preview-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-link-preview-frame .video-thumb-play { width: 32px; height: 32px; }
.video-link-preview-frame .video-thumb-play svg { width: 15px; height: 15px; }
.video-link-preview-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.video-link-preview-platform { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--accent-2); }
.video-link-preview-title { font-size: 14px; font-weight: 700; line-height: 1.35; }

/* Индикатор загрузки автопревью — спиннер у поля ссылки */
.video-url-loading { background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent); background-size: 200% 100%; animation: video-url-shimmer 1.1s linear infinite; }
@keyframes video-url-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .video-url-loading { animation: none; } }

/* Подпись привязки к проекту в модалке */
.video-modal-build {
  margin: 0 0 12px; padding: 8px 12px;
  border: 1px solid rgba(255, 154, 61, 0.4); border-radius: 10px;
  background: rgba(255, 154, 61, 0.08);
  font-size: 13px; font-weight: 600; color: var(--accent-2);
}

/* Форма правки */
.video-form-url {
  padding: 10px 14px; border: 1px dashed var(--border);
  border-radius: 10px; font-size: 14px; color: var(--text-dim);
  word-break: break-all;
}
.video-form-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Пустое состояние ленты: иконка, заголовок, пояснение */
.videos-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 56px 20px; text-align: center;
  border: 1px dashed var(--border); border-radius: var(--radius);
  color: var(--text-dim);
}
.videos-empty svg { width: 40px; height: 40px; opacity: 0.6; margin-bottom: 6px; }
.videos-empty-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.videos-empty-text { margin: 0; max-width: 440px; font-size: 14px; line-height: 1.6; }

/* Доступное скрытие подписей компонентов (экранные дикторы читают,
   визуально не занимает места) */
.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;
}

/* Адаптив: карточки и превью на мобильных */
@media (width < 560px) {
  .video-card-cover { height: 190px; }
  .video-link-preview { align-items: flex-start; }
  .video-link-preview-frame { width: 104px; }
  .video-build-card .card-cover { width: 110px; }
  .video-page-actions { width: 100%; }
  .video-page-actions .btn { flex: 1; }
  .videos-toolbar { align-items: stretch; flex-direction: column; }
  .videos-rubric-dd { width: 100%; }
  .videos-head { justify-content: space-between; }
}

/* Закрытое состояние панелей .city-select раздела «Видео»: author-стиль
   .city-select-panel задаёт display:flex и перебивает UA-стиль [hidden]
   (без правила панель висела открытой всегда) — та же страховка, что у
   .events-city-form и .shops-city-form (см. комментарии выше по файлу). */
.videos-filter .city-select-panel[hidden],
.qa-modal .city-select-panel[hidden],
.video-form .city-select-panel[hidden] { display: none; }