/* ONYX FACET — оформление кабинета одним файлом.
   Подключено одной строкой в index.html. Работает поверх любой версии Cabinet:
   новые карточки и страницы берут цвета из темы автоматически, а здесь только
   добавки. Если после обновления что-то из селекторов исчезнет, оформление
   просто вернётся к стандартному, ничего не сломается. */

/* Баннер на главной */
[data-onboarding='welcome'] {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: 190px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #000 url('/onyx-hero.jpg') right top / cover no-repeat;
  border: 1px solid rgba(var(--color-accent-400), 0.18);
}
[data-onboarding='welcome']::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0) 85%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 55%);
}
[data-onboarding='welcome'] > * {
  position: relative;
}
[data-onboarding='welcome'] h1 {
  font-size: clamp(26px, 6vw, 38px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: #fff;
  max-width: 80%;
}
@media (min-width: 640px) {
  [data-onboarding='welcome'] {
    min-height: 220px;
    padding: 28px;
  }
}

/* Крупные цифры в карточке подписки */
.font-display.text-\[38px\].font-extrabold {
  font-size: 60px;
  letter-spacing: -0.05em;
}
.font-display.text-\[38px\].font-extrabold > span {
  font-size: 24px;
}
span.text-\[22px\].font-bold.tracking-tight.transition-colors.duration-300 {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* Каменная карточка текущего уровня и мягкое свечение карточек */
.onyx-tier-active {
  position: relative;
  overflow: hidden;
  border-color: rgba(var(--color-accent-400), 0.55) !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.2) 100%),
    url('/onyx-hero.jpg') right center / cover no-repeat !important;
  box-shadow: 0 0 28px -8px rgba(var(--color-accent-400), 0.45);
}
.bento-card {
  box-shadow: 0 14px 40px -28px rgba(var(--color-accent-400), 0.28);
}