/* ============================================================
   GLOWTHERY — Robinhood-зелёная тема поверх клона
   ------------------------------------------------------------
   Токены и переменные уже переведены в зелёную гамму скриптом
   tools/recolor-rh.mjs. Здесь добираем то, что цветом в CSS не
   задаётся: растровые декорации (карта, ромб, фоны карточек) и
   общий подтон страницы.
   ============================================================ */

/* Декоративные растры донора нейтрально-серые, а ромб вообще с красными
   кадрами — они не подчиняются переменным. sepia переводит серое в
   тонируемое, hue-rotate уводит в зелёный, saturate добавляет плотности. */
img[src*="decoration/KV"],
img[src*="decoration/i.gif"],
img[src*="decoration/card-bg-"],
img[src*="decoration/l2button"],
img[src*="decoration/pixelated"] {
  filter: sepia(1) hue-rotate(62deg) saturate(2.6) brightness(1.04);
}

/* Точечная карта в hero — самый большой кусок кадра, ей чуть больше
   плотности, иначе зелень читается только на светлых точках. */
img[src*="decoration/KV"] {
  filter: sepia(1) hue-rotate(62deg) saturate(3.2) brightness(1.1);
}

/* Общий подтон страницы: мягкое зелёное свечение сверху и снизу,
   чтобы чёрные зоны не выглядели нейтрально-серыми рядом с зелёными. */
html {
  background-color: #050f0a;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(204, 255, 0, 0.07), transparent 62%),
    radial-gradient(100% 60% at 50% 110%, rgba(204, 255, 0, 0.05), transparent 60%);
}

/* Свечение лежит под всем контентом и ничего не перехватывает.
   Позиционирование инжектируемых панелей НЕ трогаем: стат-бар и quick-nav
   держатся на position:fixed, и переопределение роняет их в поток. */

/* Границы клона были нейтрально-серыми классами Tailwind; переменные их не
   ловят, поэтому дожимаем точечно — иначе сетка остаётся серой на зелёном. */
.border-gray-6,
.border-b-gray-6,
.border-t-gray-6,
.border-l-gray-6,
.border-r-gray-6,
.border-x-gray-6,
.border-y-gray-6 {
  border-color: #184228 !important;
}
.border-gray-5,
.border-b-gray-5 {
  border-color: #1d4e30 !important;
}
.bg-gray-9 {
  background-color: #08150d !important;
}
.bg-gray-8 {
  background-color: #0d2416 !important;
}
.bg-gray-7 {
  background-color: #12311e !important;
}

/* Ссылки и подписи в футерах клона — из серой шкалы; ведём их в зелёный,
   сохраняя приглушённость. */
.text-gray-3 {
  color: #7fa78c !important;
}
.text-gray-4 {
  color: #5d8069 !important;
}

/* ---------- кнопки: салатовый акцент ----------
   Тёмно-зелёный акцент на зелёном фоне читался вяло. Кнопки уводим в
   салатовый лайм — он ярче фона и работает как единственный CTA-цвет.
   Фон и остальную гамму не трогаем. */
:root {
  --rh-lime: #ccff00;
  --rh-lime-dim: #a9d400;
}

.hl-btn {
  color: var(--rh-lime) !important;
  background: rgba(204, 255, 0, 0.07) !important;
  border-color: rgba(204, 255, 0, 0.42) !important;
}
.hl-btn:hover,
.hl-btn:focus-visible {
  color: #0d1a00 !important;
  background: var(--rh-lime) !important;
  border-color: var(--rh-lime) !important;
}

.hl-btn--solid {
  color: #0d1a00 !important;
  background: var(--rh-lime) !important;
  border-color: var(--rh-lime) !important;
}
.hl-btn--solid:hover,
.hl-btn--solid:focus-visible {
  background: var(--rh-lime-dim) !important;
  border-color: var(--rh-lime-dim) !important;
}

/* Призрачные кнопки внутри панелей — тот же лайм, но контуром. */
.hl-btn--ghost {
  color: var(--rh-lime) !important;
  background: transparent !important;
  border-color: rgba(204, 255, 0, 0.35) !important;
}
.hl-btn--ghost:hover {
  color: #0d1a00 !important;
  background: var(--rh-lime) !important;
  border-color: var(--rh-lime) !important;
}

/* BUY в стат-баре — главный CTA, тоже салатовый. */
.hl-buy {
  background: var(--rh-lime) !important;
  color: #0d1a00 !important;
}

/* Чипы состояний: подпись белая. Салатовый на тёмно-зелёной пилюле
   читался плохо, а иконку оставляем акцентной — она и держит цвет. */
.hl-chip__label,
.hl-chips__label {
  color: #ffffff !important;
}
.hl-chip {
  color: #ffffff !important;
}
.hl-chip__ico {
  color: var(--rh-lime) !important;
}
.hl-chip:hover .hl-chip__label {
  color: #0d1a00 !important;
}

/* Кнопки hero (Find vault / All tokens): салатовый контур, белый текст.
   Заливки под ховером нет — на сплошном лайме белая надпись теряется,
   поэтому подсвечиваем фон полупрозрачным. */
.border-white {
  border-color: var(--rh-lime) !important;
}
a > button.border-white .text-white,
button.border-white > div {
  color: #ffffff !important;
}
button.border-white {
  background-color: transparent !important;
}
button.border-white:hover {
  background-color: rgba(204, 255, 0, 0.16) !important;
}
button.border-white:hover > div {
  color: #ffffff !important;
  transform: none !important;   /* текст больше никуда не съезжает */
}
/* В оригинале при наведении из-под текста выезжал чёрный треугольник и
   налезал на надпись. Он декоративный — убираем. */
button.border-white > svg {
  display: none !important;
}

/* Кнопки живой секции (Open Console / The Vault) — тот же приём. */
.hl-sec-btn {
  border-color: var(--rh-lime) !important;
  color: #ffffff !important;
}
.hl-sec-btn:hover,
.hl-sec-btn:focus-visible {
  background: rgba(204, 255, 0, 0.16) !important;
  border-color: var(--rh-lime) !important;
  color: #ffffff !important;
}

/* ---------- стат-бар: адрес и X по центру плашки ----------
   Кластер CA + BUY + X центрируется самим флексом бара, счётчики уходят
   налево абсолютом, индикатор LIVE — направо.
   Без transform на кластере: он делает элемент точкой отсчёта для
   position:fixed внутри, и LIVE тогда наезжает на BUY. */
.hl-statsbar {
  justify-content: center;
}
.hl-statsbar__scroll {
  position: absolute;
  left: 14px;
  top: 0;
  height: 100%;
  flex: 0 0 auto;
  max-width: 44%;
}
.hl-statsbar__right {
  margin-left: 0;
}
.hl-statsbar__right .hl-live {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

/* Стат-бар на телефоне: теперь адрес контракта показывается всегда, и на
   375px он налезал на счётчики. Оставляем самое важное — BURNS, сам адрес
   и кнопку покупки, — остальное убираем, чтобы строка не наезжала сама на себя. */
@media (max-width: 560px) {
  .hl-stat--commits,
  .hl-stat--tps,
  .hl-stat--commits + .hl-sep,
  .hl-stat--tps + .hl-sep,
  .hl-stat--blk + .hl-sep {
    display: none;
  }
  .hl-ca {
    margin-right: 8px;
  }
  .hl-ca__v {
    max-width: 84px;
  }
}