/* ===== ОФОРМЛЕНИЕ ПО РЕФЕРЕНСАМ (10.08.2026) =====
   Ассеты нарезаны из генераций в /root/screenshots/krasota2:
   фон-космос, угловые орнаменты (солнце/луна), 8 иконок вкладок,
   разделитель-виньетка, рубашка карты Таро. Прозрачность вырезана
   из чёрного фона по яркости, водяные знаки срезаны.

   Файл подключается одним <link> на пяти страницах — откат снимается
   удалением строки, ничего в самих страницах не переписано. */

/* ===== ФОН ===== */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,7,15,.10) 0%, rgba(7,7,15,.30) 50%, rgba(7,7,15,.62) 100%),
    url('/img/cosmos-wide.webp') center center / cover no-repeat;
  background-attachment: fixed, fixed;
}
@media (max-width: 780px) {
  /* fixed на мобильном Safari дёргает фон при скролле */
  body::before {
    background:
      linear-gradient(180deg, rgba(7,7,15,.12) 0%, rgba(7,7,15,.34) 50%, rgba(7,7,15,.66) 100%),
      url('/img/cosmos-mobile.webp') center top / cover no-repeat;
    background-attachment: scroll, scroll;
  }
}

/* ===== КАРТОЧКИ С УГЛОВЫМИ ОРНАМЕНТАМИ =====
   Четыре угла набираются двумя способами сразу: нижние два — фоновыми
   картинками самой карточки, верхние два — через ::after. Псевдоэлемент
   ::before у .form-card уже занят страницей, поэтому его не трогаем.
   Файлов всего два: солнце и луна, нижние получаются отражением. */
.form-card,
.ex-card {
  position: relative;
  background-color: rgba(10,13,28,.88) !important;
  border: 1px solid rgba(201,162,39,.34) !important;
  border-radius: 18px !important;
  /* отступы с запасом под угловые орнаменты — иначе солнце наезжает
     на заголовок карточки, а луна на правый край полей */
  padding: 40px 54px !important;
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  box-shadow: 0 20px 56px rgba(0,0,0,.5), 0 0 70px rgba(201,162,39,.06);
}
/* Четыре угла — четырьмя фоновыми картинками одного слоя. Отражением
   обойтись не вышло: transform переворачивает весь псевдоэлемент вместе
   с содержимым карточки под ним. */
.form-card::after,
.ex-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 18px;
  opacity: .9;
  background:
    url('/img/orn-tl.webp') left  top    / 68px 68px no-repeat,
    url('/img/orn-tr.webp') right top    / 68px 68px no-repeat,
    url('/img/orn-bl.webp') left  bottom / 68px 68px no-repeat,
    url('/img/orn-br.webp') right bottom / 68px 68px no-repeat;
}
@media (max-width: 640px) {
  .form-card, .ex-card { padding: 30px 30px !important; }
  .form-card::after, .ex-card::after {
    background-size: 44px 44px, 44px 44px, 44px 44px, 44px 44px;
  }
}

/* ===== ИКОНКИ ВКЛАДОК =====
   Эмодзи в разметке заменяются картинками без правки HTML: сам символ
   гасится нулевым кеглем, иконка приходит фоном. Вкладка опознаётся
   по своему обработчику onclick. */
.tn-icon {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto 5px;
  font-size: 0 !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .82;
  transition: opacity .22s, transform .22s;
}
.tn.active .tn-icon { opacity: 1; transform: scale(1.12); }

.tn[onclick*="'horoscope'"] .tn-icon { background-image: url('/img/ic-forecast.webp'); }
.tn[onclick*="'tarot'"]    .tn-icon { background-image: url('/img/ic-tarot.webp'); }
.tn[onclick*="'dream'"]    .tn-icon { background-image: url('/img/ic-dream.webp'); }
.tn[onclick*="'matrix'"]   .tn-icon { background-image: url('/img/ic-matrix.webp'); }
.tn[onclick*="'compat'"]   .tn-icon { background-image: url('/img/ic-pair.webp'); }
.tn[onclick*="'pair'"]     .tn-icon { background-image: url('/img/ic-pair.webp'); }
.tn[onclick*="'name'"]     .tn-icon { background-image: url('/img/ic-name.webp'); }
.tn[onclick*="'natal'"]    .tn-icon { background-image: url('/img/ic-natal.webp'); }
.tn[onclick*="'palmist'"]  .tn-icon { background-image: url('/img/ic-palm.webp'); }

.tn.active {
  background: rgba(201,162,39,.13) !important;
  border: 1px solid rgba(201,162,39,.55) !important;
  box-shadow: 0 6px 24px rgba(201,162,39,.22) !important;
}

/* ===== ЗАГОЛОВОК КАРТОЧКИ С ВИНЬЕТКОЙ =====
   Разделитель ставится под заголовком: на референсах он отбивает
   шапку карточки от полей ввода. */
.fc-sub::after {
  content: '';
  display: block;
  height: 26px;
  margin: 14px auto 2px;
  background: url('/img/divider.webp') center / contain no-repeat;
  opacity: .75;
}

/* ===== РУБАШКА КАРТЫ ТАРО ===== */
.t-back { background-image: url('/img/tarot-back.webp') !important; }

/* ===== ПОЛЯ ВВОДА =====
   Поверх туманности прозрачные поля теряют плейсхолдер — фон непрозрачный. */
input[type="text"], input[type="date"], input[type="email"],
input[type="password"], textarea, select {
  background-color: rgba(6,6,14,.88) !important;
}

/* ===== ШАПКА ===== */
header {
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}

@media (prefers-reduced-motion: reduce) {
  body::before { background-attachment: scroll, scroll; }
  .tn.active .tn-icon { transform: none; }
}

/* ===== ЧИТАЕМОСТЬ ПОВЕРХ ЯРКОГО ФОНА =====
   В приложении текст лежит на карточках и читается, а на лендинге
   заголовок и абзацы идут прямо по туманности — на светлых участках
   контраст падал ниже нормы. Подкладываем мягкую тёмную подложку
   под текстовую колонку и под диаграмму, не трогая саму вёрстку. */
.hero-form-side,
.hero-visual {
  position: relative;
  border-radius: 20px;
}
.hero-form-side::before,
.hero-visual::before {
  content: '';
  position: absolute;
  inset: -18px -22px;
  z-index: -1;
  border-radius: 26px;
  background: radial-gradient(120% 100% at 50% 40%,
              rgba(7,7,15,.80) 0%, rgba(7,7,15,.66) 55%, rgba(7,7,15,.18) 100%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
/* Подписи под формой и мелкий текст на лендинге — им подложки не хватает */
.hero-note, .trust-row { text-shadow: 0 1px 6px rgba(7,7,15,.9); }
.hero-sub { text-shadow: 0 1px 8px rgba(7,7,15,.85); }

/* ===== ПЛОТНОСТЬ БЛОКОВ ПОВЕРХ ТУМАННОСТИ =====
   У страниц переменная --card это rgba(255,255,255,.03) — почти стекло.
   На прежнем плоском фоне текст в таких блоках читался, поверх туманности
   он тонет: звёзды просвечивают прямо сквозь абзацы. Поднимаем плотность
   и добавляем размытие — фон остаётся виден, но уже как подложка. */
.how-card, .faq-item, .tool-card,
.step, .pos, .arc-i,
.s-user, .card {
  background: rgba(10,13,28,.80) !important;
  border-color: rgba(201,162,39,.20) !important;
  backdrop-filter: blur(8px) saturate(112%);
  -webkit-backdrop-filter: blur(8px) saturate(112%);
}
/* Заголовки секций идут прямо по фону — им нужна тень, а не подложка */
.sec-title, .sec-label, .sec-sub { text-shadow: 0 2px 12px rgba(7,7,15,.9); }

/* Панель вкладок и подсказка «С чего начать» тоже висели прозрачными —
   на туманности сквозь них просвечивали звёзды. */
.tab-nav {
  background: rgba(10,13,28,.78) !important;
  border: 1px solid rgba(201,162,39,.16);
  border-radius: 16px;
  padding: 6px !important;
  backdrop-filter: blur(10px) saturate(112%);
  -webkit-backdrop-filter: blur(10px) saturate(112%);
}
.onboard {
  background: rgba(10,13,28,.84) !important;
  backdrop-filter: blur(8px) saturate(112%);
  -webkit-backdrop-filter: blur(8px) saturate(112%);
}

/* ===== ТАБ-БАР ПО РЕФЕРЕНСУ =====
   Панель — сильно скруглённая пилюля, каждая иконка сидит в своём кружке,
   активная вкладка получает золотое кольцо со свечением. */
.tab-nav { border-radius: 999px !important; padding: 8px 10px !important; }

.tn-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50%;
  border: 1px solid rgba(201,162,39,.28);
  background-color: rgba(201,162,39,.06);
  background-size: 24px 24px !important;   /* сама картинка внутри кружка */
  margin: 0 auto 6px !important;
  transition: border-color .22s, background-color .22s, box-shadow .22s, transform .22s;
}
.tn:hover .tn-icon {
  border-color: rgba(201,162,39,.5);
  background-color: rgba(201,162,39,.12);
}
.tn.active .tn-icon {
  border-color: rgba(240,208,96,.85);
  background-color: rgba(201,162,39,.16);
  box-shadow: 0 0 18px rgba(201,162,39,.35), inset 0 0 12px rgba(201,162,39,.15);
  transform: none;
}
@media (max-width: 640px) {
  .tn-icon { width: 34px !important; height: 34px !important; background-size: 20px 20px !important; }
  .tab-nav { border-radius: 22px !important; }
}

/* ===== ПОДСКАЗКИ ВКЛАДОК =====
   Всплывающая подсказка уходила под карточку формы: у карточки свой
   контекст наложения, и она перекрывала выпадающий текст. Поднимаем
   панель вкладок над контентом, а саму подсказку — над панелью. */
.tab-nav { position: relative; z-index: 30; }
.tab-nav [data-tip]:hover::after,
.tab-nav [data-tip]:hover::before { z-index: 40; }
.form-card, .ex-card { z-index: 1; }

/* ===== МЕДАЛЬОНЫ ДИАГРАММЫ МАТРИЦЫ =====
   В узлах теперь картинки арканов. Оправы приводим к золотой гамме,
   как на референсе: разноцветные обводки (голубая, розовая, сиреневая)
   спорили с иллюстрациями внутри. Центр — самый яркий и со свечением. */
.mw-node[data-node="center"] { filter: drop-shadow(0 0 16px rgba(201,162,39,.42)); }
/* Внутри монеты теперь контурная гравюра — её, наоборот, чуть подсвечиваем,
   чтобы тонкие линии не терялись на матовом поле медальона. */
.mw-node-img { filter: drop-shadow(0 0 2px rgba(201,162,39,.35)); }
.mw-node[data-node="center"] { filter: drop-shadow(0 0 14px rgba(201,162,39,.45)); }
.mw-node-badge { stroke: rgba(201,162,39,.85) !important; }
.mw-node:hover { filter: drop-shadow(0 0 12px rgba(201,162,39,.5)); }

/* ===== ЧИТАЕМОСТЬ ВТОРИЧНОГО ТЕКСТА =====
   Подзаголовки и подписи заданы приглушённым #b89870 — на прежнем плоском
   фоне этого хватало, поверх туманности текст тонет. Осветляем и добавляем
   тень; сам цвет остаётся тёплым, чтобы не выбиваться из палитры. */
.sub, .form-note, .cta-note, .hero-note, .fc-sub, .faq-a {
  color: #e0d3bd !important;
  text-shadow: 0 1px 10px rgba(7,7,15,.92), 0 0 3px rgba(7,7,15,.7);
}
/* Плашки-пилюли под заголовком: фон был почти прозрачный */
.trust span, .trust-row span, .hero-adv-pill, .hero-topic-tag {
  background: rgba(10,13,28,.78) !important;
  border-color: rgba(201,162,39,.32) !important;
  color: #e3d7c2 !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* Заголовок первого экрана на лендингах — тень, чтобы белый не сливался
   со светлыми участками туманности */
.hero h1, .hero-title, h1 { text-shadow: 0 2px 16px rgba(7,7,15,.8); }

/* ===== МЕДАЛЬОН В МОДАЛКЕ РАЗБОРА =====
   Был просто золотой квадрат с цифрой. Делаем его таким же медальоном,
   как в диаграмме: гравюра аркана в круглой оправе, номер — бейджем. */
.mw-modal-numbox {
  position: relative;
  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
  background-color: #16162c !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 76% 76% !important;
  border: 2px solid transparent;
  background-origin: border-box;
  box-shadow: 0 0 0 2px rgba(201,162,39,.85), 0 6px 18px rgba(0,0,0,.5);
  font-size: 0 !important;                 /* саму цифру гасим */
}
/* Номер возвращаем маленьким бейджем на краю медальона */
.mw-modal-numbox::after {
  content: attr(data-num);
  position: absolute;
  right: -4px; bottom: -4px;
  min-width: 22px; height: 22px;
  padding: 0 5px;
  border-radius: 11px;
  background: #0b0a1c;
  border: 1px solid rgba(201,162,39,.85);
  color: #fef3c7;
  font-size: 12px; font-weight: 800;
  line-height: 20px; text-align: center;
}