/* ============================================================
   Рейтинг партнёров Б24 — оформление БС:Design (Задача 10).

   tokens.css / components.css — ЛОКАЛЬНАЯ копия дизайн-системы
   /projects/bs-design/ (сделана 2026-08-07). Причина копирования,
   а не @import с bzsys.ru: этот сайт живёт на своём домене
   (b24rating.ru), bzsys.ru — сторонний для него хост. Копия
   исключает зависимость публичного сайта от доступности другого
   нашего проекта; синхронизировать вручную при обновлении
   дизайн-системы (см. отчёт задачи 10).

   Дальше — только правила, специфичные для этого приложения:
   компонентов вроде nav-хедера, футера, таблиц рейтинга, бейджей
   уровня и CSS-баров динамики в исходной системе нет (это
   мульти-страничный сайт, не визард), поэтому они дописаны здесь
   поверх токенов.
   ============================================================ */

@import url("bs/tokens.css");
@import url("bs/components.css");

/* ---------- логотип в шапке ---------- */
/* Реюзаем .bst-logo/.bs/.colon/.talks из components.css (секция 5
   styleguide) — эти классы просто дают стиль/цвет, текст внутри
   произвольный (см. styleguide.md §10 — <span class="talks">Reports</span>). */
a.bst-logo,
a.bst-logo:hover {
  border-bottom: none;
  text-decoration: none;
}

/* ---------- шапка сайта ---------- */

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}
.site-nav .nav-link {
  display: inline-block;
  font-family: var(--body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  padding: 9px 16px;
  border-radius: 999px;
  border-bottom: none;
  transition: background .15s, color .15s;
}
.site-nav .nav-link:hover {
  background: rgba(127, 217, 242, 0.18);
  color: var(--blue);
  border-bottom: none;
}

/* контент под sticky-шапкой — используем обычный .container,
   но с воздухом сверху/снизу в духе app-shell */
main.site-main {
  padding: 40px 0 24px;
}

/* ---------- футер ---------- */

.site-footer {
  margin-top: 56px;
  padding: 24px 0 32px;
  border-top: 1px solid var(--border);
}
.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.site-footer-copy {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-footer-credit {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  border-bottom: 1px solid rgba(0, 88, 146, 0.25);
}
.site-footer-credit:hover { color: var(--turq); border-color: var(--turq); }

/* Ссылки на публичные страницы (О сервисе / доступ / политика / контакты) —
   в середине футера, на телефоне переносятся в столбик. */
.site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.site-footer-nav a {
  font-family: var(--body);
  font-size: 13px;
  color: var(--muted);
}
.site-footer-nav a:hover { color: var(--blue); }

/* Строка оператора: вторая линия футера, поэтому display:flex от
   .site-footer .container здесь сбрасываем в block. */
.site-footer-legal-row {
  display: block !important;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.site-footer-legal {
  font-family: var(--body);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- заголовки страниц (h1.h4 из bootstrap-утилит) ---------- */

h1.h4 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-size: clamp(24px, 3.4vw, 32px);
}
h2.h5, h2.h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* ---------- карточки (bootstrap .card) ---------- */

.card {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.card.border-primary { border-color: rgba(4, 186, 238, 0.35) !important; }
.card .card-title {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.card .card-text { color: var(--ink); }
.card .card-text.text-muted { color: var(--muted) !important; }
.card.bg-light {
  background: var(--surf-2) !important;
  border-style: dashed;
}

/* ---------- лендинг: hero ---------- */

.jumbotron {
  background:
    radial-gradient(70% 100% at 100% 0%, rgba(4, 186, 238, 0.14), transparent 65%),
    radial-gradient(50% 80% at 0% 100%, rgba(0, 88, 146, 0.10), transparent 65%),
    var(--surf) !important;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 48px 40px !important;
}
.jumbotron h1.display-5 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--ink);
  text-wrap: balance;
  font-size: clamp(30px, 4.6vw, 52px);
}
.jumbotron p.lead { color: var(--ink); text-wrap: pretty; }
.jumbotron p.lead,
.jumbotron p { font-size: 16px; }

/* ---------- лендинг: четыре блока и полосочки (вектор D) ---------- */
/* Верхнего меню на лендинге нет (layoutTopLanding() в core/layout.php): в правом
   углу только неброская ссылка «Войти». Разметка блоков собирается в
   pageLandingHtml() (core/pages_logic.php) — инлайновых style= и on*= там нет
   намеренно, их молча режет наша CSP.

   Классы-крючки без собственных правил: .landing-hero, .landing-reciprocity,
   .landing-steps, .landing-ratings. Оформление им даёт .jumbotron/.landing-section,
   а имена стоят в разметке специально — чтобы точечная правка одного блока не
   начиналась с изобретения селектора и не задевала соседние. Пустых правил под
   них не заводим: пустое правило выглядит забытым и однажды будет «подчищено». */

.landing-header .landing-login {
  font-family: var(--body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 999px;
  border-bottom: none;
  transition: background .15s, color .15s;
}
.landing-header .landing-login:hover {
  background: rgba(127, 217, 242, 0.18);
  color: var(--blue);
  border-bottom: none;
}

.landing-hero-count {
  font-family: var(--body);
  font-size: 14px;
  color: var(--muted);
}
.landing-cta { margin: 0; }
/* «Уже участвую» — второй вход для вернувшегося партнёра. Мелкая и приглушённая
   намеренно: главное действие на лендинге одно — «Участвовать». */
.landing-alt { margin: 10px 0 0; }
.landing-alt a {
  font-family: var(--body);
  font-size: 13px;
  color: var(--muted);
}
.landing-alt a:hover { color: var(--blue); }

.landing-section { margin: 48px 0 0; }
.landing-lead {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 760px;
  text-wrap: pretty;
}
.landing-points {
  margin: 0 0 12px;
  padding-left: 20px;
  max-width: 760px;
}
.landing-points li {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 8px;
}
.landing-note {
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 760px;
}

/* Полосочки: две карточки рядом на десктопе, в столбик на телефоне. */
.landing-bars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 16px;
}
.landing-bars-card {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
}
.landing-bars-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 4px;
}
.landing-bars-hint {
  font-family: var(--body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 16px;
}
.landing-bars-empty {
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
}
.landing-bar { margin-bottom: 14px; }
.landing-bar:last-child { margin-bottom: 0; }
.landing-bar-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
/* «Партнёр #3», где 3 — настоящее место (pageLandingBarLabel()). Отдельного
   номера рядом нет намеренно: он был бы тем же самым числом дважды в строке. */
.landing-bar-name {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
/* Короткая версия оговорки внутри карточки. Полная стоит НАД блоком полос:
   рамку надо ставить до картинки, а не после. */
.landing-bars-foot {
  margin: 14px 0 0;
  font-family: var(--body);
  font-size: 11.5px;
  color: var(--muted);
}
.landing-bar-track {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: var(--surf-2);
  overflow: hidden;
}
.landing-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--turq), var(--blue));
}
/* ⚠️ Ширины — равномерная лесенка по позиции в списке, а не доля от лидера.
   Пропорциональная длина полосы — это чужая цифра, записанная другим способом
   (участник знает своё значение и восстановил бы по отношению длин сумму
   первого места), и вдобавок она отдаёт гостю без аккаунта весь вектор
   разрывов — то есть тот самый бенчмарк, который сервис двумя блоками выше
   объявляет наградой за подключённый токен.
   Ступени равные и мелкие (12 %) специально: при 100/74/54 три партнёра с почти
   одинаковой базой рисовались бы как заметно разные — в самой честной ситуации
   картинка врала бы сильнее всего. Оговорка стоит НАД блоком и в подписи
   карточки (см. pageLandingHtml()).
   Менять на проценты от максимума нельзя — это красная линия проекта, а не
   вопрос вкуса. */
.landing-bar-w1 { width: 100%; }
.landing-bar-w2 { width: 88%; }
.landing-bar-w3 { width: 76%; }

.landing-principle {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  margin: 20px 0 20px;
  padding-left: 14px;
  border-left: 3px solid var(--turq);
  max-width: 760px;
  text-wrap: pretty;
}

/* Телефон: карточки полосочек в столбик, отступы между блоками меньше.
   Владелец продукта смотрит сайт с телефона — эта часть обязательна. */
@media (max-width: 767.98px) {
  .landing-bars { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .landing-section { margin-top: 36px; }
  .landing-bars-card { padding: 16px 18px; }
  .landing-cta .btn-lg { display: block; width: 100%; text-align: center; }
}

/* ---------- бейджи ---------- */

.badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.badge-primary { background: var(--turq); color: #fff; }
.badge-secondary { background: var(--surf-2); color: var(--muted); border: 1px solid var(--border-strong); }

/* Бейджи уровня партнёра (PLATINUM/GOLD/SILVER/BRONZE) — отдельная
   палитра под каждый уровень поверх стандартного .badge (см.
   levelBadgeClass() в core/layout.php — только подбор класса,
   значение и текст уровня не меняются). */
.badge-level-platinum { background: linear-gradient(135deg, #E4EAF2, #B7C4D6); color: var(--ink); border: 1px solid rgba(10, 37, 64, 0.12); }
.badge-level-gold     { background: linear-gradient(135deg, #FFE28A, #F2B705); color: #5B3B00; }
.badge-level-silver   { background: linear-gradient(135deg, #ECEFF2, #C3CBD3); color: var(--ink); }
.badge-level-bronze   { background: linear-gradient(135deg, #E3A97A, #B5651D); color: #fff; }
.badge-level-default  { background: var(--surf-2); color: var(--muted); border: 1px solid var(--border-strong); }

/* Маркер парных категорий «База» / «База на начало периода» — на вкладке,
   в плитке бенчмарка и в заголовке плашки методики (pageCategoryBadge()
   в core/pages_logic.php). Две категории считают одно и то же в разные
   моменты времени, и без метки вторая читается как дубль первой.
   Новых цветов НЕ заводим: владелец продукта предлагал выкрасить страницы
   в разные цвета, но два цвета в одной дизайн-системе читаются как два
   разных продукта. Берём тот же .badge-secondary, только мельче. */
/* Размер и контраст не занижаем: бейдж здесь СМЫСЛОВОЙ — он единственное, что
   отличает две почти одинаковые категории. 9 px с opacity .7 (первая редакция)
   были на грани читаемости, то есть метка формально стояла, а работать
   переставала. Приглушаем на неактивной вкладке только цветом рамки. */
.category-badge {
  margin-left: 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  vertical-align: middle;
  color: var(--ink);
  background: var(--surf);
  border: 1px solid var(--border-strong);
}
.nav-tabs .nav-link .category-badge { border-color: var(--border); }
.nav-tabs .nav-link.active .category-badge,
.nav-tabs .nav-link:hover .category-badge { border-color: var(--turq); }

/* ---------- таблицы рейтинга и динамики ---------- */

/* Горизонтальный скролл на узких экранах (375px) — без изменения
   структуры таблицы, только обёртка div.table-responsive
   (см. bootstrap-утилиту, которую переопределяем под свои токены). */
.table-responsive {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.table-responsive .table {
  box-shadow: none;
  margin-bottom: 0;
}

/* зебра */
.table tbody tr:nth-child(even) td {
  background: rgba(10, 37, 64, 0.02);
}
.table tbody tr:hover td {
  background: rgba(127, 217, 242, 0.12);
}

/* своя строка — подсветка бирюзой поверх bootstrap .table-primary */
.table-primary,
.table-primary td,
.table-primary:nth-child(even) td {
  background: rgba(4, 186, 238, 0.14) !important;
}
.table-primary:hover td {
  background: rgba(4, 186, 238, 0.20) !important;
}

.table td .small.text-muted {
  font-size: 12px;
  color: var(--muted) !important;
}

/* ---------- вкладки категорий и переключатель периода (rating.php) ---------- */

.nav-tabs {
  border-bottom: 1px solid var(--border);
  gap: 4px;
  flex-wrap: wrap;
}
.nav-tabs .nav-item { margin-bottom: -1px; }
.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
  padding: 10px 16px;
}
.nav-tabs .nav-link:hover {
  color: var(--blue);
  border-color: rgba(4, 186, 238, 0.35);
  background: transparent;
}
.nav-tabs .nav-link.active {
  color: var(--ink);
  background: transparent;
  border-color: var(--turq);
  font-weight: 700;
}

.btn-group .btn-outline-secondary {
  font-family: var(--body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  border-color: var(--border-strong);
  background: var(--surf);
  border-radius: 0;
  padding: 9px 18px;
}
.btn-group .btn-outline-secondary:first-child { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.btn-group .btn-outline-secondary:last-child { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
.btn-group .btn-outline-secondary:hover {
  background: rgba(127, 217, 242, 0.18);
  border-color: var(--turq);
  color: var(--blue);
}
.btn-group .btn-outline-secondary.active {
  background: var(--turq);
  border-color: var(--turq);
  color: #fff;
}

/* ---------- главный зачёт «Сила роста» (вектор H) ---------- */
/* Блок над пятёркой витрин в кабинете и на «Рейтингах». Читается как награда:
   место крупно слева, рядом — свой прирост за период. Разметка собирается в
   pageHeadlineHtml() (core/pages_logic.php), инлайновых style= и on*= здесь нет
   намеренно — их молча режет наша CSP.
   Под блоком вектор C поставит плашку методики, поэтому нижний отступ (mb-4)
   задаётся классом bootstrap на самой секции, а не margin'ом отсюда. */

.headline-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 26px;
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(4, 186, 238, 0.14), transparent 70%),
    var(--surf);
  border: 1px solid rgba(4, 186, 238, 0.35);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

.headline-rank {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  padding-right: 24px;
  border-right: 1px solid var(--border);
}
.headline-rank-num {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--blue);
  font-size: clamp(40px, 6vw, 60px);
}
.headline-rank-of {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.headline-body { min-width: 0; }
.headline-title {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-size: 18px;
  margin-bottom: 4px;
}
.headline-lead {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 8px;
}
.headline-growth {
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 0;
}
.headline-period {
  font-size: 12.5px;
  color: var(--muted);
}
.headline-note {
  margin: 10px 0 0;
  padding-left: 12px;
  border-left: 3px solid rgba(4, 186, 238, 0.35);
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 576px) {
  /* Телефон: место переезжает наверх, разделительная линия из вертикальной
     становится горизонтальной. */
  .headline-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
  }
  .headline-rank {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    padding: 0 0 12px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    width: 100%;
  }
  .headline-rank-num { font-size: 40px; }
  .headline-rank-of { margin-top: 0; }
}

/* ---------- страница «Рейтинги»: узкая колонка + плашка методики (вектор C) ---------- */
/* Таблица больше не растягивается на всю ширину экрана: слева узкая колонка со
   списком, справа — рельса с объяснением, как считается открытый показатель.
   Ширина первой колонки ограничена сверху (minmax(0, 640px)), поэтому на широком
   мониторе список остаётся узким и читаемым, а не расползается на 1600px.
   Текст плашек живёт в pageMethodNote() (core/pages_logic.php). */

/* Приоритет у таблицы: её колонка не сжимается ниже 360px, а рельса отдаёт
   ширину первой (min 0). Иначе на 1000–1150px объяснение оказывалось ШИРЕ
   самого рейтинга — узкая колонка задумывалась не для этого. */
.rating-layout {
  display: grid;
  grid-template-columns: minmax(360px, 640px) minmax(260px, 380px);
  gap: 28px;
  align-items: start;
}
.rating-main { min-width: 0; }
.rating-aside { min-width: 0; }

/* Ноутбук и уже: одна колонка, плашка уходит ПОД таблицу. Порог 1200px, а не
   992px: между ними на две колонки места не хватает — рейтинг и объяснение
   становились одинаково узкими. */
@media (max-width: 1199.98px) {
  .rating-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* Рельса едет со страницей: на 30-й строке списка партнёр уже не видит, как
   считается то, на что он смотрит. Только на широком экране — в одноколоночной
   раскладке липнуть нечему. Высоту ограничиваем окном: длинную плашку иначе
   обрезало бы снизу без возможности доскроллить. */
@media (min-width: 1200px) {
  .rating-aside {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }
}

/* Ссылка-якорь «перейти к своей строке»: при 60 участниках своя строка может
   быть 54-й, и найти её иначе можно только прокруткой. */
.rating-jump {
  margin-bottom: 10px;
  font-size: 13.5px;
}
.rating-table tr[id="me"] { scroll-margin-top: 24px; }

/* Место — просто номер, без «из скольких»: столбец узкий и выровнен по центру,
   чтобы двузначные и однозначные номера стояли в одну линию. */
.rating-table .rating-place {
  width: 1%;
  white-space: nowrap;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--ink);
}
/* Своё значение в скобках после названия — вместо убранного столбца
   «Моё значение». Чужих значений здесь не бывает: их нет в данных строки. */
.rating-my-value {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--blue);
  white-space: nowrap;
}

/* Плашка методики главного зачёта — сразу под самим блоком зачёта, вплотную:
   .headline-card несёт bootstrap-отступ mb-4 (24px), и без подтяжки объяснение
   читалось бы как отдельный блок, а не как пояснение к нему. */
.headline-method { margin-top: -1rem; }
.headline-method .method-card { margin-bottom: 0; }

.method-card {
  background: var(--surf-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.method-title {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-size: 15px;
  margin: 0 0 12px;
}
.method-list { margin: 0; }
.method-list dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-top: 12px;
}
.method-list dt:first-child { margin-top: 0; }
.method-list dd {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
}
.method-note {
  margin: 12px 0 0;
  padding-left: 12px;
  border-left: 3px solid rgba(4, 186, 238, 0.35);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

/* Свёрнутая плашка главного зачёта — на чистом <details>, без единой строки JS:
   инлайновые скрипты и on*-атрибуты у нас молча режет CSP. */
.method-card-collapsed > .method-title {
  margin-bottom: 0;
  cursor: pointer;
  list-style: none;
}
.method-card-collapsed > .method-title::-webkit-details-marker { display: none; }
.method-card-collapsed > .method-title::before {
  content: "+";
  display: inline-block;
  width: 16px;
  font-family: var(--mono);
  color: var(--turq);
}
.method-card-collapsed[open] > .method-title { margin-bottom: 12px; }
.method-card-collapsed[open] > .method-title::before { content: "−"; }

/* ---------- личный разрыв двух баз (кабинет) ---------- */
/* Две цифры партнёра рядом и разница под ними. Список, а не таблица:
   строк ровно три, и на 375px они обязаны просто переноситься.
   Суммы моноширинным — их сравнивают глазами по разрядам. */
.gap-list {
  margin: 16px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  align-items: baseline;
}
.gap-list dt {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--muted);
}
.gap-list dd {
  margin: 0;
  text-align: right;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap;
}
/* Разница — последняя пара, отделена чертой: это вывод, а не третья цифра. */
.gap-list dt:last-of-type,
.gap-list dd:last-of-type {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .gap-list { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .gap-list dd { text-align: left; margin-bottom: 8px; }
  .gap-list dt:last-of-type { padding-top: 8px; }
  .gap-list dd:last-of-type { border-top: none; padding-top: 0; }
}

/* ---------- динамика базы: CSS-бары (Task 8) ---------- */
/* Ширина задаётся инлайн-style="width:N%" в cabinet.php — не трогаем,
   только оформление трека и заливки в фирменных цветах. */
.bar-track {
  background: var(--surf-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
}
.bar {
  height: 100%;
  min-width: 3px;
  background: linear-gradient(90deg, var(--turq), var(--blue));
  border-radius: 999px;
}

/* ---------- прочее ---------- */

code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--surf-2);
  color: var(--blue);
  padding: 2px 6px;
  border-radius: 6px;
}

/* ---------- боковое меню (rating.php/cabinet.php/connect.php, Задача UI-1) ---------- */
/* Только внутренние экраны вошедшего партнёра — layoutTopSidebar()/layoutBottomSidebar()
   в core/layout.php. Лендинг/логин/регистрация остаются на layoutTop() с горизонтальным
   хедером (.brand-header выше) без изменений. */

body.has-sidebar { margin: 0; }

.app-layout {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.side-nav {
  width: 240px;
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 20px;
  background: var(--ink);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}
.side-nav .bst-logo { margin-bottom: 28px; border-bottom: none; }
.side-nav .bst-logo .bs,
.side-nav .bst-logo .talks { color: #fff; }

.side-nav-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
}
.side-nav-link {
  display: block;
  padding: 11px 16px;
  border-radius: var(--r-sm);
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  border-bottom: none;
  transition: background .15s, color .15s;
}
.side-nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-bottom: none;
}
.side-nav-link.active {
  background: var(--turq);
  color: #fff;
}
.side-nav-logout {
  margin-top: auto;
  color: rgba(255, 255, 255, 0.55);
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.side-nav-logout:hover { color: #fff; }

.side-content {
  flex: 1 1 auto;
  min-width: 0;
}
.side-content .site-main { padding: 40px 40px 24px; }
.side-content .site-footer { margin-top: 40px; }

/* Бургер виден только на телефоне (см. медиазапрос ниже) */
.side-nav-burger { display: none; }

@media (max-width: 767.98px) {
  /* Телефон: шапка в одну строку — логотип и кнопка-бургер. Пункты меню
     скрыты, разворачиваются по нажатию (класс .open на .side-nav).
     Обработчик — в js/app.js: inline-скрипты запрещены нашей CSP. */
  .app-layout { flex-direction: column; min-height: 0; }
  .side-nav {
    width: 100%;
    flex: 0 0 auto;
    height: auto;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    overflow: visible;
  }
  .side-nav .bst-logo { margin-bottom: 0; margin-right: auto; flex: 0 1 auto; }

  .side-nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    cursor: pointer;
    flex: 0 0 auto;
  }
  .side-nav-burger span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  /* Раскрытое состояние: три полоски складываются в крестик */
  .side-nav.open .side-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .side-nav.open .side-nav-burger span:nth-child(2) { opacity: 0; }
  .side-nav.open .side-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .side-nav-menu {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
  }
  .side-nav.open .side-nav-menu { display: flex; }

  .side-nav-links { flex-direction: column; gap: 4px; }
  .side-nav-link { padding: 12px 14px; font-size: 15px; }
  .side-nav-logout {
    margin-top: 4px;
    padding: 12px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 12px;
  }
  .side-content .site-main { padding: 24px 16px; }
}

/* ---------- уведомление о безопасности данных (Задача UI-1, п.4) ---------- */

.safety-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surf-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 13.5px;
  color: var(--muted);
}
.safety-note-icon { font-size: 16px; line-height: 1.3; flex-shrink: 0; }
.safety-note p { color: inherit; }
.safety-note-full { color: var(--ink); }
.safety-note-full p { color: var(--ink); }
.safety-note-deny {
  background: var(--danger-bg);
  border-color: rgba(255, 91, 46, 0.25);
}
.safety-note-deny p { color: var(--ink); }

/* Кнопка-ссылка "Создать токен в партнёрском кабинете" (connect.php) — не главное
   целевое действие на экране (это сабмит формы, тоже .btn-primary), но и не
   дефолтный серый bootstrap: бирюзовая рамка по умолчанию (не только на hover). */
.btn-outline-turq {
  border-color: var(--turq);
  color: var(--blue);
}
.btn-outline-turq:hover:not(:disabled) {
  border-color: var(--turq);
  color: var(--blue);
  background: rgba(127, 217, 242, 0.15);
}

/* ---------- прогресс подключения токена (connect.php, Задача UI-1, п.3) ---------- */

.connect-progress .progress { margin-bottom: 0; }

/* ---------- спиннер на кнопке при сабмите (защита от двойного клика) ---------- */

.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------- мобильная адаптация (375px) ---------- */

@media (max-width: 576px) {
  .jumbotron { padding: 32px 22px !important; }
  .brand-header { padding: 14px 16px; }
  /* На 360px (самый массовый Android-вьюпорт) логотип в 22px занимает ~260px,
     и вместе со ссылкой справа шапка не влезает в 328px доступной ширины —
     .brand-header без flex-wrap, overflow-x: hidden в проекте нет, приезжает
     горизонтальная прокрутка всей страницы. 18px дают ~216px и запас ~44px;
     на login/register, где меню шире лендинговой ссылки, это тем более нужно. */
  .brand-header .bst-logo { font-size: 18px; }
  .site-nav { gap: 0; }
  .site-nav .nav-link { padding: 8px 10px; font-size: 12.5px; }
  .btn-group { display: flex; width: 100%; }
  .btn-group .btn-outline-secondary { flex: 1; text-align: center; padding: 9px 8px; }
  .card-body { padding: 16px; }
}