/* =============================================================
   Скин «cactus» — тёмно-зелёный, почти чёрный фон, лаймовый акцент,
   плотные заголовки в верхнем регистре (Oswald), прямые углы 8–12px,
   плоский фон без «полярного сияния» и сетки.

   Это ОВЕРЛЕЙ поверх app.css: разметка, кнопки и поведение те же, меняются
   только токены и внешний вид. Подключается, когда у экземпляра
   BRAND_SKIN=cactus (на <html> стоит data-skin="cactus").

   Правила игры (см. комментарии в app.css):
   - токены тем в app.css сидят на :root[data-theme=…] (0,2,0), поэтому здесь
     селекторы html[data-skin='cactus'][data-theme=…] — (0,2,1), побеждают;
   - никаких инлайновых стилей и внешних ресурсов (CSP), шрифт лежит рядом;
   - body overflow-x и анимацию окна оформления (.pay) не трогаем;
   - вендорные псевдоэлементы слайдера — отдельными правилами.
   ============================================================= */

/* --- шрифт заголовков: Oswald (OFL), кириллица + латиница ---- */

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 200 700;
  src: url('/static/fonts/oswald-cyrillic-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 200 700;
  src: url('/static/fonts/oswald-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 200 700;
  src: url('/static/fonts/oswald-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 200 700;
  src: url('/static/fonts/oswald-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- токены ----------------------------------------------------- */

html[data-skin='cactus'] {
  --font-display: 'Oswald', Impact, 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --radius-card: 12px;
  --radius-control: 8px;
  /* лайм для кнопок и плашек — один на обе темы, чтобы бренд не плыл */
  --lime: #a4ff26;
  --lime-2: #76d719;
  --lime-ink: #071004;
  --lime-gradient: linear-gradient(135deg, #a4ff26, #76d719);
  /* фон не рисуем слоями: ни сияния, ни луча, ни зерна, ни сетки на холсте */
  --aurora-opacity: 0;
  --beam-opacity: 0;
  --grain-opacity: 0;
  --net-strength: 0;
  --net-dot: 0;
}

/* Светлая тема: бумага с сажевым текстом и травяным акцентом. Лайм как текст
   на белом не читается, поэтому акцент для ссылок и заливок здесь темнее;
   кнопки остаются лаймовыми — они не завязаны на --accent. */
html[data-skin='cactus'],
html[data-skin='cactus'][data-theme='light'] {
  color-scheme: light;
  --accent: #367a0c;
  --accent-2: #2b640a;
  --accent-3: #5fb01a;
  --bg: #f2f5ee;
  --bg-2: #f2f5ee;
  --text: #0b120b;
  --muted: #5b665b;
  --surface: #ffffff;
  --border: #d3dbcd;
  --card-bg: #ffffff;
  --card-shadow: none;
  --header-bg: rgba(242, 245, 238, 0.94);
  --header-line: rgba(11, 18, 11, 0.08);
  --panel-line: rgba(11, 18, 11, 0.07);
  --panel-gradient: linear-gradient(180deg, rgba(11, 18, 11, 0.012), transparent 28%);
  --hero-line: #0b120b;
}

html[data-skin='cactus'][data-theme='dark'] {
  color-scheme: dark;
  --accent: #a4ff26;
  --accent-2: #79d91c;
  --accent-3: #4c9815;
  --bg: #030503;
  --bg-2: #030503;
  --text: #f4f5f2;
  --muted: #989f99;
  --surface: #0a0e0a;
  --border: #2a302a;
  --card-bg: #080b08;
  --card-shadow: none;
  --header-bg: rgba(3, 5, 3, 0.94);
  --header-line: rgba(255, 255, 255, 0.055);
  --panel-line: rgba(255, 255, 255, 0.075);
  --panel-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 28%);
  --hero-line: #f4f4f1;
}

/* --- фон: плоский --------------------------------------------- */

html[data-skin='cactus'] .bg {
  background: var(--bg);
}

html[data-skin='cactus'] .bg__aurora,
html[data-skin='cactus'] .bg__beam,
html[data-skin='cactus'] .bg__canvas,
html[data-skin='cactus'] .bg__grain {
  display: none;
  animation: none;
}

html[data-skin='cactus'] ::selection {
  background: var(--lime);
  color: var(--lime-ink);
}

/* --- шапка ------------------------------------------------------ */

html[data-skin='cactus'] .header {
  border-bottom: 1px solid var(--header-line);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

html[data-skin='cactus'] .header__inner {
  max-width: 1180px;
  min-height: 74px;
}

html[data-skin='cactus'] .logo {
  gap: 10px;
  border-radius: 8px;
}

/* фирменный знак — кактус в лаймовом квадрате, как плашка бренда. Встроенный
   SVG-знак шаблона гасим и рисуем свой фоном (у проекта со своим логотипом
   .logo__img этот блок не задействован) */
html[data-skin='cactus'] .logo__mark {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: url('/static/img/skins/cactus/mark-a1.svg') center / 30px 30px no-repeat,
    linear-gradient(145deg, #adff37, #4c9815);
  color: var(--lime-ink);
}

html[data-skin='cactus'] .logo__mark > * {
  display: none;
}

html[data-skin='cactus'] .logo__name {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

html[data-skin='cactus'] .theme-toggle {
  border: 1px solid var(--border);
  background: var(--surface);
}

/* --- кнопки ------------------------------------------------------ */

html[data-skin='cactus'] .btn {
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

html[data-skin='cactus'] .btn--lg {
  min-height: 58px;
  font-size: 0.95rem;
}

html[data-skin='cactus'] .btn--primary {
  background: var(--lime);
  background: var(--lime-gradient);
  border-color: #8ce525;
  color: var(--lime-ink);
  box-shadow: 0 12px 30px -16px rgba(164, 255, 38, 0.55);
}

html[data-skin='cactus'] .btn--primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px -16px rgba(164, 255, 38, 0.7);
}

html[data-skin='cactus'] .btn--ghost,
html[data-skin='cactus'] .btn--outline {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

html[data-skin='cactus'] .btn--ghost:hover,
html[data-skin='cactus'] .btn--outline:hover:not(:disabled) {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--lime) 45%, var(--border));
  transform: translateY(-1px);
}

html[data-skin='cactus'] .btn--social {
  border-radius: 8px;
}

/* строчная «кнопка-ссылка» остаётся текстом */
html[data-skin='cactus'] .btn--link {
  font: inherit;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* --- заголовки: плотный верхний регистр ------------------------- */

html[data-skin='cactus'] .hero__title,
html[data-skin='cactus'] .auth__title,
html[data-skin='cactus'] .account__title,
html[data-skin='cactus'] .hello__title,
html[data-skin='cactus'] .section-head__title,
html[data-skin='cactus'] .plans__title,
html[data-skin='cactus'] .plan__name,
html[data-skin='cactus'] .docpage__title,
html[data-skin='cactus'] .docpage__section h2,
html[data-skin='cactus'] .welcome__title,
html[data-skin='cactus'] .refer__title,
html[data-skin='cactus'] .key-card__title,
html[data-skin='cactus'] .list-card__title,
html[data-skin='cactus'] .steps-card__title,
html[data-skin='cactus'] .info-card__title,
html[data-skin='cactus'] .sub-card__title,
html[data-skin='cactus'] .sub-card__empty-title,
html[data-skin='cactus'] .account__soon-title,
html[data-skin='cactus'] .pay__title,
html[data-skin='cactus'] .pay__final-title,
html[data-skin='cactus'] .order__title,
html[data-skin='cactus'] .tickets__heading,
html[data-skin='cactus'] .install-app__title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

html[data-skin='cactus'] .auth__title,
html[data-skin='cactus'] .account__title {
  font-size: 1.9rem;
}

html[data-skin='cactus'] .hello__title,
html[data-skin='cactus'] .section-head__title,
html[data-skin='cactus'] .docpage__title {
  font-size: clamp(1.8rem, 3.8vw, 2.3rem);
}

html[data-skin='cactus'] .section-head__title--chat {
  font-size: 1.5rem;
}

html[data-skin='cactus'] .welcome__title,
html[data-skin='cactus'] .refer__title,
html[data-skin='cactus'] .key-card__title,
html[data-skin='cactus'] .list-card__title,
html[data-skin='cactus'] .steps-card__title,
html[data-skin='cactus'] .info-card__title,
html[data-skin='cactus'] .sub-card__title,
html[data-skin='cactus'] .sub-card__empty-title,
html[data-skin='cactus'] .pay__title,
html[data-skin='cactus'] .pay__final-title,
html[data-skin='cactus'] .order__title,
html[data-skin='cactus'] .docpage__section h2 {
  font-size: 1.22rem;
}

/* числа — тоже плотным шрифтом: суммы, срок, счётчики */
html[data-skin='cactus'] .plan__price,
html[data-skin='cactus'] .sub-card__plan,
html[data-skin='cactus'] .pay__total-value,
html[data-skin='cactus'] .pay-period__price,
html[data-skin='cactus'] .tile__value,
html[data-skin='cactus'] .tg-wait__code {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
}

html[data-skin='cactus'] .plan__price {
  font-size: 2.1rem;
}

/* трекинг кода и компенсирующий отступ (центровка) — всегда одним значением */
html[data-skin='cactus'] .tg-wait__code {
  letter-spacing: 0.25em;
  text-indent: 0.25em;
}

html[data-skin='cactus'] .plan__cur {
  font-family: var(--font);
}

/* --- главный экран: текст слева, «постер» справа ---------------- */

html[data-skin='cactus'] .hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  min-height: 0;
  padding: 26px max(20px, env(safe-area-inset-right)) 28px max(20px, env(safe-area-inset-left));
  text-align: left;
}

html[data-skin='cactus'] .hero__content {
  max-width: 560px;
}

html[data-skin='cactus'] .hero__title {
  font-size: clamp(3.3rem, 6.6vw + 0.6rem, 5.4rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.012em;
  color: var(--accent);
  text-shadow: 0 0 30px color-mix(in srgb, var(--lime) 10%, transparent);
}

/* первая строка — подводка обычным цветом и мельче, остальное — лаймом */
html[data-skin='cactus'] .hero__title-line:first-child:not(:only-child) {
  margin-bottom: 0.22em;
  font-size: 0.52em;
  color: var(--hero-line);
  text-shadow: none;
}

html[data-skin='cactus'] .hero__subline {
  margin: 22px 0 0;
  max-width: 31em;
  font-size: 1rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--text) 86%, var(--muted));
}

html[data-skin='cactus'] .hero__cta {
  margin-top: 26px;
}

/* Постер: тёмная панель с неоновым кактусом. Картинка своя, лежит в образе;
   на телефоне идёт под текстом и короче */
html[data-skin='cactus'] .hero::after {
  content: '';
  display: block;
  min-height: 240px;
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  background: #060806 url('/static/img/skins/cactus/hero-a1.svg') center 32% / cover no-repeat;
}

/* С планшета — две колонки: узкая полоса на всю ширину резала постер сверху
   и снизу (cover по квадратной картинке), а рядом с текстом он высокий и целый */
@media (min-width: 700px) {
  html[data-skin='cactus'] .hero {
    grid-template-columns: minmax(0, 46%) minmax(0, 54%);
    gap: 24px;
    padding-top: 22px;
    padding-bottom: 10px;
  }

  html[data-skin='cactus'] .hero__content {
    padding: 24px 0;
  }

  html[data-skin='cactus'] .hero::after {
    min-height: 460px;
    background-position: center;
  }
}

@media (min-width: 900px) {
  html[data-skin='cactus'] .hero {
    grid-template-columns: minmax(0, 45%) minmax(0, 55%);
    gap: 28px;
  }

  html[data-skin='cactus'] .hero__content {
    padding: 28px 0;
  }

  html[data-skin='cactus'] .hero::after {
    min-height: 520px;
  }
}

/* --- тарифы ------------------------------------------------------ */

html[data-skin='cactus'] .plans {
  max-width: 1180px;
  padding-top: 34px;
  text-align: left;
}

html[data-skin='cactus'] .plans__title {
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
}

html[data-skin='cactus'] .plans__hint {
  margin-left: 0;
}

/* auto-fit давал 3+1 на планшете — «1 год» (лучший) сиротой в пустом ряду */
@media (min-width: 560px) and (max-width: 999px) {
  html[data-skin='cactus'] .plans__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  html[data-skin='cactus'] .plans__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Карточка тарифа — она же .reveal: transition здесь — шорткат, и список
   ОБЯЗАН повторять появление из app.css (opacity/transform 0.7s с --delay),
   иначе карточки не проявляются, а выскакивают. Свой — только цвет рамки. */
html[data-skin='cactus'] .plan {
  border-radius: 12px;
  background: var(--panel-gradient), var(--card-bg);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--delay, 0s),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--delay, 0s),
    border-color 0.18s ease;
}

html[data-skin='cactus'] .plan:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
}

/* лучший тариф: рамка акцентом ТЕМЫ (в светлой лайм на белом не виден) */
html[data-skin='cactus'] .plan--best {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%),
    var(--card-bg);
  box-shadow: none;
}

html[data-skin='cactus'] .plan__save {
  border-radius: 6px;
  background: var(--lime);
  color: var(--lime-ink);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

html[data-skin='cactus'] .plans__methods {
  text-align: center;
}

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

html[data-skin='cactus'] .card,
html[data-skin='cactus'] .tile,
html[data-skin='cactus'] .quick__item {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--panel-gradient), var(--card-bg);
  box-shadow: none;
}

html[data-skin='cactus'] .tile,
html[data-skin='cactus'] .quick__item {
  border-radius: 12px;
}

html[data-skin='cactus'] .welcome {
  background: linear-gradient(135deg, color-mix(in srgb, var(--lime) 9%, transparent), transparent 60%),
    var(--card-bg);
}

html[data-skin='cactus'] .welcome__icon,
html[data-skin='cactus'] .quick__icon,
html[data-skin='cactus'] .device-picker__icon,
html[data-skin='cactus'] .pay-method__icon,
html[data-skin='cactus'] .pay-slot__icon,
html[data-skin='cactus'] .device__icon,
html[data-skin='cactus'] .tickets__icon {
  border-radius: 10px;
}

html[data-skin='cactus'] .refer__item,
html[data-skin='cactus'] .device-picker__item,
html[data-skin='cactus'] .app-pick__item,
html[data-skin='cactus'] .pay-slot,
html[data-skin='cactus'] .tg-wait__code,
html[data-skin='cactus'] .auth__tg-option,
html[data-skin='cactus'] .profile__panel {
  border-radius: 10px;
}

html[data-skin='cactus'] .profile__item {
  border-radius: 8px;
}

html[data-skin='cactus'] .device-picker__item--active .device-picker__icon,
html[data-skin='cactus'] .device-picker__badge,
html[data-skin='cactus'] .app-pick__tag--main {
  background: var(--lime-gradient);
  color: var(--lime-ink);
}

html[data-skin='cactus'] .device-picker__badge,
html[data-skin='cactus'] .app-pick__tag,
html[data-skin='cactus'] .badge,
html[data-skin='cactus'] .chat__badge,
html[data-skin='cactus'] .chat__day span,
html[data-skin='cactus'] .chat-history__count {
  border-radius: 6px;
}

html[data-skin='cactus'] .device__remove,
html[data-skin='cactus'] .device__x {
  border-radius: 8px;
}

/* --- поля и переключатели --------------------------------------- */

html[data-skin='cactus'] .field__input,
html[data-skin='cactus'] .key-card__input,
html[data-skin='cactus'] .refer__input {
  border-radius: 8px;
  background: var(--surface);
}

html[data-skin='cactus'] .field__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

html[data-skin='cactus'] .segmented {
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

html[data-skin='cactus'] .segmented__thumb,
html[data-skin='cactus'] .segmented__btn {
  border-radius: 8px;
}

html[data-skin='cactus'] .segmented__thumb {
  border: 1px solid var(--border);
  box-shadow: none;
}

html[data-skin='cactus'] .chat__input {
  border-radius: 10px;
}

/* --- кабинет: навигация ------------------------------------------ */

html[data-skin='cactus'] .cab-nav {
  border-radius: 12px;
  background: var(--card-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-skin='cactus'] .cab-nav__item {
  border-radius: 8px;
  font-weight: 700;
}

html[data-skin='cactus'] .cab-nav__item--active {
  color: var(--lime-ink);
  background: var(--lime);
  background: var(--lime-gradient);
  box-shadow: none;
}

@media (min-width: 900px) {
  html[data-skin='cactus'] .cab-nav {
    border-radius: 12px;
  }
}

@media (max-width: 899px) {
  html[data-skin='cactus'] .cab-nav {
    border-radius: 14px;
    border-color: var(--border);
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.8);
  }

  html[data-skin='cactus'] .cab-nav__item {
    border-radius: 10px;
  }
}

/* плашки статусов: «ок» — лаймом в тёмной теме, травой в светлой */
html[data-skin='cactus'][data-theme='dark'] .badge--ok,
html[data-skin='cactus'][data-theme='dark'] .chat__badge--open {
  background: rgba(164, 255, 38, 0.12);
  color: var(--lime);
}

html[data-skin='cactus'][data-theme='dark'] .alert--ok {
  background: rgba(164, 255, 38, 0.1);
  border-color: rgba(164, 255, 38, 0.3);
  color: #d6ff9a;
}

/* --- окно оформления --------------------------------------------- */
/* Анимации не трогаем: они на .pay__inner, и это принципиально (WebKit). */

html[data-skin='cactus'] .pay {
  border-radius: 12px;
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.85);
}

html[data-skin='cactus'] .pay::backdrop {
  /* литералы: ::backdrop не наследует переменные не во всех браузерах */
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

html[data-skin='cactus'] .pay-period__box,
html[data-skin='cactus'] .pay-method__box,
html[data-skin='cactus'] .pay__recap {
  border-radius: 10px;
}

html[data-skin='cactus'] .pay-period__save {
  border-radius: 6px;
  background: var(--lime);
  color: var(--lime-ink);
}

html[data-skin='cactus'] .pay__radio:checked + .pay-method__box .pay-method__mark {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--lime-ink);
}

/* вендорные псевдоэлементы — строго по одному на правило */
html[data-skin='cactus'] .pay-slider__input::-webkit-slider-thumb {
  background: var(--lime);
  border-color: var(--lime-ink);
}

html[data-skin='cactus'] .pay-slider__input::-moz-range-thumb {
  background: var(--lime);
  border-color: var(--lime-ink);
}

/* --- чат поддержки ------------------------------------------------ */

html[data-skin='cactus'] .chat__bubble {
  border-radius: 12px;
}

html[data-skin='cactus'] .chat__msg--you .chat__bubble {
  background: var(--lime);
  background: var(--lime-gradient);
  color: var(--lime-ink);
}

html[data-skin='cactus'] .chat__msg--you .chat__time {
  color: rgba(7, 16, 4, 0.7);
}

html[data-skin='cactus'] .chat__msg--you .chat__filechip {
  border-color: rgba(7, 16, 4, 0.3);
  background: rgba(7, 16, 4, 0.1);
  color: var(--lime-ink);
}

html[data-skin='cactus'] .chat__media,
html[data-skin='cactus'] .chat__media img {
  border-radius: 10px;
}

/* --- документы, футер ----------------------------------------------- */

html[data-skin='cactus'] .docpage__section h2 {
  margin-top: 1.8em;
}

html[data-skin='cactus'] .footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* одна сетка с шапкой и контентом: 1180 минус поля по 20 */
html[data-skin='cactus'] .footer__inner {
  max-width: 1140px;
}