/* Палитра взята с metapulse.pro/landing.css — раздел должен выглядеть частью сайта. */
:root {
  --bg: #091226;
  --bg2: #0c1832;
  --card: #101f3d;
  --line: #1d3155;
  --line2: #27416b;
  --txt: #eaf1fb;
  --dim: #90a4c4;
  --sky: #38bdf8;
  --vi: #a78bfa;
  --cy: #22d3ee;
  --li: #a3e635;
  --g: #34d399;
  --warn: #e7b765;
  --bad: #ef6f6f;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--sky); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1760px; margin: 0 auto; padding: 28px 28px 64px; }

/* ---------- Шапка ---------- */

.head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.head h1 { margin: 0; font-size: 26px; letter-spacing: -0.02em; }
.head .sub { color: var(--dim); font-size: 14px; }
.head .spacer { flex: 1; }
.head .links { display: flex; gap: 14px; font-size: 13px; }


.stats { color: var(--dim); font-size: 13px; margin: 0 0 22px; }
.stats b { color: var(--txt); font-weight: 600; }

/* ---------- Шапка раздела ---------- */
/* Одна полоса на все страницы витрины. Оформление повторяет соседние разделы
   метапульса (/value, /me): при переходе между ними шапка не должна прыгать.

   Классы с префиксом topbar- намеренно свои. Имена .logo и .chip в витрине
   уже заняты — плиткой площадки и фильтр-чипом, — и общая область видимости
   протекает: неперечисленные свойства продолжают действовать от базового
   правила. Один раз на это уже наступили. */
.topbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 26px;
  height: 62px;
  border-bottom: 1px solid var(--line);
  background: rgba(12, 24, 50, 0.72);
  backdrop-filter: blur(8px);
  flex-wrap: wrap;
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.5px;
  text-decoration: none;
  color: var(--txt);
  white-space: nowrap;
}
.topbar-mk {
  width: 16px;
  height: 16px;
  border-radius: 6px;
  background: linear-gradient(135deg, #a78bfa, #22d3ee);
  transform: rotate(45deg);
  flex: none;
}
.topbar-brand b {
  background: linear-gradient(90deg, #7dd3fc, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.topbar-tag {
  font-size: 10.5px;
  color: var(--li);
  border: 1px solid var(--li);
  border-radius: 7px;
  padding: 3px 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.topbar-sp { flex: 1; }
.topbar-link {
  padding: 8px 15px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: #13254a;
  color: var(--txt);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.15s;
}
.topbar-link:hover { border-color: var(--sky); color: var(--sky); }

@media (max-width: 640px) {
  .topbar { height: auto; padding: 10px 16px; row-gap: 8px; }
}

/* ---------- Фильтры ---------- */

.filters {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  display: grid;
  /* Поиск и сортировка — фиксированной ширины сверху, полки — во всю строку. */
  grid-template-columns: minmax(220px, 340px) 200px auto;
  align-items: end;
  gap: 12px 14px;
  margin-bottom: 20px;
}
.filters .chips-row { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); }

.field select,
.field input {
  background: var(--card);
  border: 1px solid var(--line2);
  color: var(--txt);
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  outline: none;
}
.field select:focus,
.field input:focus { border-color: var(--sky); }
.field select[multiple] { min-height: 92px; padding: 6px; }
.field select[multiple] option { padding: 3px 6px; border-radius: 6px; }
.field .hint { font-size: 11px; color: var(--dim); }

.reset {
  align-self: end;
  background: transparent;
  border: 1px solid var(--line2);
  color: var(--dim);
  border-radius: 10px;
  padding: 9px 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}
.reset:hover { color: var(--txt); border-color: var(--sky); }

/* ---------- Карточки ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover { border-color: var(--line2); transform: translateY(-2px); }

.card-top { display: flex; align-items: center; gap: 10px; }

.logo {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--bg);
  flex: none;
}

/* Плитка под настоящую марку: нейтральный фон, потому что у знаков свои цвета. */
.logo.has-mark {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px;
}

/* Вордмарк вместо плитки: файл тёмный (у Bybit #15182A), а на фоне #091226
   он был бы не виден. Перекрашивать чужой логотип нельзя, поэтому под него
   подкладывается светлая плашка — файл остаётся нетронутым. */
.logo-wordmark {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 9px;
  border-radius: 9px;
  background: #f4f7fc;
  flex: none;
}
.logo-wordmark img { height: 18px; width: auto; display: block; }

/* contain, а не cover: непропорциональные марки (у MEXC 4:3) не должны обрезаться. */
.logo.has-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.source-name { font-weight: 600; font-size: 14px; }
.card-top .spacer { flex: 1; }

.badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.card h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  /* Заголовки у бирж бывают очень длинными — режем до трёх строк. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card p.desc {
  margin: 0;
  color: var(--dim);
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reward {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 8px 10px;
  background: rgba(56, 189, 248, 0.07);
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 10px;
}
.reward .label { color: var(--dim); }
.reward .value { font-weight: 600; color: var(--txt); }

.card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}

.deadline { font-size: 12px; color: var(--dim); }
.deadline.soon { color: var(--warn); font-weight: 600; }
.deadline.over { color: var(--bad); }
.card-foot .spacer { flex: 1; }

.cta {
  background: var(--sky);
  color: #061426;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 10px;
  white-space: nowrap;
}
.cta:hover { text-decoration: none; filter: brightness(1.08); }

/* ---------- Служебное ---------- */

.empty {
  text-align: center;
  padding: 56px 20px;
  color: var(--dim);
  border: 1px dashed var(--line2);
  border-radius: var(--radius);
}
.empty b { display: block; color: var(--txt); font-size: 16px; margin-bottom: 6px; }

.pager { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.pager button {
  background: var(--card);
  border: 1px solid var(--line2);
  color: var(--txt);
  border-radius: 10px;
  padding: 8px 16px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}
.pager button:hover:not(:disabled) { border-color: var(--sky); }
.pager button:disabled { opacity: 0.35; cursor: default; }
.pager .count { color: var(--dim); font-size: 13px; }

.result-meta { color: var(--dim); font-size: 13px; margin-bottom: 12px; }

/* Индикатор загрузки HTMX */
#loading { opacity: 0; transition: opacity 0.2s ease; color: var(--sky); font-size: 13px; }
#loading.htmx-request { opacity: 1; }

/* ---------- Страница статуса ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { color: var(--dim); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; }
tr:last-child td { border-bottom: none; }

.pill { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.pill.success { background: rgba(52, 211, 153, 0.15); color: var(--g); }
.pill.partial { background: rgba(231, 183, 101, 0.15); color: var(--warn); }
.pill.failed  { background: rgba(239, 111, 111, 0.15); color: var(--bad); }
.pill.skipped { background: rgba(144, 164, 196, 0.15); color: var(--dim); }

h2 { font-size: 18px; margin: 30px 0 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.err { color: var(--bad); }
.warn { color: var(--warn); }

@media (max-width: 640px) {
  .wrap { padding: 20px 14px 48px; }
  .grid { grid-template-columns: 1fr; }
}


/* ---------- Чипы фильтров ---------- */

/* Чекбокс скрыт, но остаётся в форме и в табуляции: HTMX собирает его значение
   как обычное поле, поэтому JS для фильтров по-прежнему не нужен. */
.chip-in {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.chips-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dim);
  min-width: 92px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--line2);
  color: var(--txt);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.12s, background 0.12s;
  border-color: color-mix(in srgb, var(--c, var(--line2)) 40%, var(--line2));
}

.chip:hover { border-color: var(--c, var(--sky)); }

.chip b {
  font-weight: 600;
  font-size: 11px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* Выбранная полка. Соседний селектор работает потому, что input стоит перед
   label — при обратном порядке подсветка молча перестанет включаться. */
/* Цвет приходит из разметки переменной --c и разный у каждой категории:
   тип, направление, площадка и статус должны различаться с одного взгляда.
   Невыбранный чип держит цвет приглушённым — иначе сорок разноцветных кнопок
   превращаются в рябь и перестают что-либо подсказывать. */
.chip-in:checked + .chip {
  background: color-mix(in srgb, var(--c, var(--sky)) 16%, transparent);
  border-color: var(--c, var(--sky));
  color: var(--c, var(--sky));
}
.chip-in:checked + .chip b { color: var(--c, var(--sky)); }

/* Клавиатура: фокус на скрытом чекбоксе подсвечивает его метку. */
.chip-in:focus-visible + .chip { outline: 2px solid var(--sky); outline-offset: 2px; }

.chip-logo { border-radius: 4px; object-fit: contain; }

/* ---------- Направления на карточке ---------- */

.card-themes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: -2px; }

.card-theme {
  font-size: 11px;
  color: var(--dim);
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 7px;
}

@media (max-width: 900px) {
  .filters { grid-template-columns: 1fr; }
  .chips-label { min-width: 100%; }
}

/* ---------- Открытие карточки ---------- */

.card { position: relative; }

.card h3 a.card-open { color: inherit; text-decoration: none; }
.card h3 a.card-open:hover { color: var(--sky); }

/* Растянутая ссылка: кликается вся карточка, но это по-прежнему обычный <a>
   с настоящим href, поэтому Ctrl+клик и «открыть в новой вкладке» работают. */
.card h3 a.card-open::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Кликается вся карточка, а рамку фокуса браузер рисовал по строчному боксу
   самой ссылки — то есть вокруг заголовка. Со стороны это выглядит обведённым
   куском текста посреди карточки, а не выделенной карточкой.

   Переносим индикатор на растянутый ::after: он и есть настоящая область
   клика. Убирать фокус совсем нельзя — по витрине ходят с клавиатуры. */
.card h3 a.card-open:focus-visible {
  outline: none;
}
.card h3 a.card-open:focus-visible::after {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* Кнопка источника должна оставаться выше растянутой ссылки, иначе клик по ней
   открывал бы детали вместо перехода на биржу. */
.card .cta { position: relative; z-index: 2; }
.card:hover { border-color: var(--sky); }

/* ---------- Модалка с деталями ---------- */

body.modal-open { overflow: hidden; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 9, 20, 0.72);
  z-index: 50;
}

.modal {
  position: fixed;
  z-index: 51;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  padding: 22px 24px 20px;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  color: var(--dim);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.modal-close:hover { color: var(--txt); }

.modal-permalink { display: inline-block; margin-top: 16px; font-size: 13px; }

.detail-page {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 760px;
}

/* ---------- Тело деталей ---------- */

.detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

.detail-title { margin: 0 0 8px; font-size: 20px; line-height: 1.35; }

.detail-original {
  margin: 0 0 10px;
  color: var(--dim);
  font-size: 13px;
  font-style: italic;
}

.detail-desc { margin: 12px 0 0; color: var(--txt); font-size: 14px; }

.detail-block { margin-top: 16px; }
.detail-block h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); }
.detail-block p { margin: 0; font-size: 14px; }

.detail-empty {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px dashed var(--line2);
  border-radius: 10px;
  color: var(--dim);
  font-size: 13px;
}

.detail-facts {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  gap: 8px 18px;
  margin: 18px 0 0;
  font-size: 13px;
}
.detail-facts dt { color: var(--dim); }
.detail-facts dd { margin: 0; }
.detail-facts dd.accent { color: var(--sky); font-weight: 600; }
.detail-facts dd.dim { color: var(--dim); }

.detail-actions { margin-top: 20px; }
.detail-actions .cta { display: inline-block; }

@media (max-width: 640px) {
  .modal { width: calc(100vw - 16px); max-height: 92vh; padding: 18px 16px; }
  .detail-facts { grid-template-columns: 1fr; gap: 2px 0; }
  .detail-facts dd { margin-bottom: 8px; }
}

/* Описание в деталях — полный текст анонса с абзацами и списками условий.
   pre-line: переносы из источника сохраняются, лишние пробелы схлопываются. */
.detail-desc { white-space: pre-line; }

/* Структура анонса в деталях: заголовки разделов, списки условий, абзацы.
   Копируем разметку источника, поэтому и стили простые — читаемость, не декор. */
.detail-desc h4 {
  margin: 18px 0 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sky);
}
.detail-desc h4:first-child { margin-top: 0; }
.detail-desc p { margin: 0 0 8px; font-size: 14px; }
.detail-desc ul { margin: 0 0 10px; padding-left: 18px; }
.detail-desc li { font-size: 14px; margin-bottom: 4px; }
.detail-desc li::marker { color: var(--dim); }

/* Ссылки внутри анонса и кнопки площадки. Кнопка у бирж стоит отдельной
   строкой и выглядит кнопкой — если оставить её обычной ссылкой в абзаце,
   структура анонса теряется, а именно из-за неё промку и открывают. */
.detail-desc a.detail-link { color: var(--sky); text-decoration: underline; text-underline-offset: 2px; }
.detail-desc a.detail-link:hover { color: var(--li); }
.detail-btn-row { margin: 12px 0 14px; }
.detail-btn-row a.detail-link {
  display: inline-block;
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--sky);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.detail-btn-row a.detail-link:hover { filter: brightness(1.1); color: var(--bg); }
.detail-desc blockquote {
  margin: 8px 0;
  padding: 6px 0 6px 12px;
  border-left: 2px solid var(--line2);
  color: var(--dim);
  font-size: 14px;
}
.detail-desc strong { color: var(--txt); }

/* Иллюстрации анонса. Грузятся с CDN площадки — это контент, а не зависимость
   витрины: htmx и стили по-прежнему свои. referrerpolicy и lazy — чтобы не
   отдавать реферера и не тянуть картинки, пока их не открыли. */
.detail-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 10px 0 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg2);
}

/* Таблица наград из анонса. Горизонтальная прокрутка — на узком экране
   таблица призовых мест иначе ломает модалку. */
.detail-table-wrap { overflow-x: auto; margin: 10px 0 14px; }
.detail-desc table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 320px; }
.detail-desc th,
.detail-desc td { text-align: left; padding: 7px 10px; border: 1px solid var(--line); }
.detail-desc th { color: var(--dim); font-weight: 600; background: var(--bg2); }

/* ---------- Замок: содержимое карточки под подпиской ---------- */
/* Карточка разворачивается целиком, но вместо условий — размытая заглушка.
   Размывается ЗАГЛУШКА, а не настоящий текст: блюр это оформление, и настоящий
   текст остался бы в исходнике страницы. */
.locked {
  position: relative;
  margin-top: 18px;
  border-radius: 12px;
  overflow: hidden;
}
.locked-blur {
  filter: blur(6px);
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
  padding: 4px 2px;
  /* Высота задаёт «объём» карточки: видно, что под замком не одна строка. */
  min-height: 340px;
}
.locked-blur h3 {
  margin: 14px 0 8px;
  font-size: 16px;
}
.locked-blur p {
  margin: 0 0 10px;
  line-height: 1.6;
}
.locked-blur ul {
  margin: 0 0 12px;
  padding-left: 20px;
  line-height: 1.8;
}
.locked-blur table {
  width: 100%;
  border-collapse: collapse;
}
.locked-blur td {
  padding: 7px 10px;
  border: 1px solid var(--line);
}

/* Накладка с предложением. Затемняет заглушку и держит призыв по центру. */
.locked-gate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(9, 18, 38, 0.55), rgba(9, 18, 38, 0.88));
}
.locked-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}
.locked-lead {
  margin: 0;
  max-width: 460px;
  color: var(--dim);
  line-height: 1.6;
}
.locked-cta {
  margin-top: 6px;
  display: inline-block;
  padding: 11px 26px;
  border-radius: 10px;
  background: var(--sky);
  color: var(--bg);
  font-weight: 700;
  text-decoration: none;
}
.locked-cta:hover {
  filter: brightness(1.1);
}
.locked-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--dim);
  text-align: center;
}