/* Шрифт шапки — Cormorant прописными (вариант № 2 из галереи шрифтов, 25.09.2026).
   @font-face дублируется здесь, потому что не все страницы подключают style.css. */
@font-face{font-family:Cormorant;src:url('/landing-assets/assets/cormorant-cyr.woff2') format('woff2');font-weight:300 700;font-display:swap;unicode-range:U+0400-052F}
@font-face{font-family:Cormorant;src:url('/landing-assets/assets/cormorant.woff2') format('woff2');font-weight:300 700;font-display:swap}

/* One header geometry for the homepage, services and reference pages. */
body.site-unified > header.lilit-header {
  box-sizing: border-box;
  display: grid;
  /* лого · меню · правый блок (тема + Войти/профиль); правый блок собирает site-session.js.
     Боковые колонки равные — меню стоит ровно по центру и не прыгает, когда «Войти»
     сменяется на имя пользователя. */
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: none;
  min-height: 88px;
  height: auto;
  margin: 0;
  padding: 20px max(32px, calc((100% - 1320px) / 2));
  border: 0;
  border-bottom: 1px solid #3d437a80;
  background: #101426 !important; /* Overrides legacy transparent !important headers. */
  position: relative;
  z-index: 30;
  font: 14px/1.5 Manrope, Arial, sans-serif;
  color: #f8f9ff;
  text-align: left;
}
body.site-unified > header.lilit-header .logo {
  font: 500 32px/1 Cormorant, Georgia, serif;
  letter-spacing: .2em;
  padding: 0;
  margin: 0;
  color: #fff;
}
body.site-unified > header.lilit-header nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 18px;
  width: auto;
  margin: 0;
  padding: 0;
  order: initial;
}
body.site-unified > header.lilit-header nav a {
  font: 600 14px/1.5 Cormorant, Georgia, serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  color: #c7cbe3;
  text-decoration: none;
}
body.site-unified > header.lilit-header nav a[aria-current] { color: #fff; border-bottom-color: #c9bcff; }
body.site-unified > header.lilit-header nav a:hover { color: #fff; background: transparent; }
/* Правый блок шапки. Гость: [тема] [ВОЙТИ]. Вошёл: [тема] [инициал + имя ▾] с меню. */
body.site-unified > header.lilit-header .lilit-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
body.site-unified > header.lilit-header.auth-pending :is(.login, .header-account-menu) { visibility: hidden; }
body.site-unified > header.lilit-header.is-guest .header-account-menu,
body.site-unified > header.lilit-header.is-user .login { display: none; }
body.site-unified > header.lilit-header :is(.login, .header-account-menu summary, .theme-toggle) {
  box-sizing: border-box;
  height: 38px;
  margin: 0;
  border: 1px solid #6e6caa;
  background: transparent;
  color: #f8f9ff;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
body.site-unified > header.lilit-header :is(.login, .header-account-menu summary, .theme-toggle):hover,
body.site-unified > header.lilit-header .header-account-menu[open] summary {
  border-color: #c9bcff;
  box-shadow: 0 0 16px #a88bff33;
}
body.site-unified > header.lilit-header .login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: none;
  padding: 0 24px;
  border-radius: 24px;
  font: 600 13px/1 Cormorant, Georgia, serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.site-unified > header.lilit-header .header-account-menu {
  position: relative;
  width: auto;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
}
body.site-unified > header.lilit-header .header-account-menu summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px 0 3px;
  border-radius: 24px;
  list-style: none;
  font: 600 13px/1 Cormorant, Georgia, serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.site-unified > header.lilit-header .header-account-menu summary::-webkit-details-marker { display: none; }
.lilit-header .avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d2c7ff, #9d86f0);
  color: #15122c;
  font: 600 16px/1 Cormorant, Georgia, serif;
  letter-spacing: 0;
}
.lilit-header .user-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.lilit-header .chevron { width: 10px; height: 10px; flex: none; opacity: .7; transition: transform .2s; }
.lilit-header .header-account-menu[open] .chevron { transform: rotate(180deg); }

.lilit-header .account-links {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 40;
  width: 260px;
  max-width: calc(100vw - 32px);
  padding: 8px;
  border: 1px solid #3d437a;
  border-radius: 16px;
  background: #141833;
  box-shadow: 0 16px 40px #0008;
  font: 400 14px/1.4 Manrope, Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.lilit-header .account-card { padding: 10px 12px 14px; margin-bottom: 6px; border-bottom: 1px solid #3d437a; }
.lilit-header .account-card b { display: block; font: 500 22px/1.15 Cormorant, Georgia, serif; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lilit-header .account-card small { display: block; margin-top: 3px; font-size: 12px; color: #a9aed0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lilit-header .account-card .plan { display: inline-block; margin-top: 10px; padding: 3px 10px; border: 1px solid #6e6caa; border-radius: 20px; font-size: 11px; color: #c9bcff; }
.lilit-header .account-links a,
.lilit-header .account-links button { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; color: #f8f9ff; font: inherit; text-align: left; white-space: nowrap; cursor: pointer; }
.lilit-header .account-links :is(a, button):hover { background: #232a5a; }
.lilit-header .account-links hr { margin: 6px 4px; border: 0; border-top: 1px solid #3d437a; }
.lilit-header .account-links .logout { color: #a9aed0; }
.lilit-header :is(a, summary, button):focus-visible { outline: 2px solid #c9bcff; outline-offset: 4px; }
/* Прописные с разрядкой шире Manrope — меню уходит на вторую строку раньше (было 1180px). */
@media (max-width: 1340px) {
  body.site-unified > header.lilit-header { grid-template-columns: 1fr auto; gap: 10px 20px; padding-block: 16px; }
  body.site-unified > header.lilit-header nav { grid-row: 2; grid-column: 1 / -1; gap: 6px 24px; flex-wrap: wrap; }
}
@media (max-width: 680px) {
  body.site-unified > header.lilit-header { padding: 16px 20px; gap: 14px 12px; }
  body.site-unified > header.lilit-header .logo { font-size: 28px; }
  body.site-unified > header.lilit-header .lilit-actions { gap: 8px; }
  body.site-unified > header.lilit-header .login { padding: 0 16px; }
  body.site-unified > header.lilit-header .header-account-menu summary { padding-right: 10px; gap: 7px; }
  .lilit-header .user-name { display: none; }
  body.site-unified > header.lilit-header nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; text-align: center; }
  body.site-unified > header.lilit-header nav a { font-size: 11px; letter-spacing: .06em; padding: 8px 0; white-space: normal; line-height: 1.2; }
}

/* Переключатель дневной/ночной темы, инжектится через site-session.js на любой странице. */
/* Логотип-картинка (site-session.js подменяет текст LILIT на <img>). */
header .logo img { display:block; height:32px; width:auto; }
header .logo img.logo-day { display:none; }
:root[data-theme="day"] header .logo img.logo-night { display:none; }
:root[data-theme="day"] header .logo img.logo-day { display:block; }
@media (max-width: 680px) { header .logo img { height:26px; } }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; margin:0; border:1px solid #6e6caa; border-radius:50%; background:none; color:inherit; cursor:pointer; flex:none; }
.theme-toggle img { display:block; width:26px; height:26px; }

/* Дневная («белая») тема — весь сайт тёмный по умолчанию, отдельной светлой
   палитры ни у одного из ~30 CSS-файлов нет. Вместо переписывания каждого —
   инвертируем всю страницу (invert+hue-rotate — стандартный приём: тёмный фон
   становится светлым, светлый текст тёмным, а оттенки остаются на своих местах,
   а не превращаются в дополнительные цвета). Работает сразу везде, на любой
   странице сайта, без правки конкретных цветов вручную.
   Настоящие изображения (арты карт, иконки, фото) обратно инвертируем, чтобы
   они не выглядели фотонегативом — список селекторов ниже собран по факту того,
   что на сайте используется как картинка/фото, а не как декоративный градиент. */
:root[data-theme="day"] {
  filter: invert(1) hue-rotate(180deg);
  background: #0b0e1a;
}
:root[data-theme="day"] img,
:root[data-theme="day"] video,
:root[data-theme="day"] iframe {
  filter: invert(1) hue-rotate(180deg);
}
/* Исключение: крупные декоративные флэт-блоки на tarot.html (1-hero.png,
   3-steps.png, 4-article.png) и вырезанные из hero декоративные карты
   (.hero-card) — это цельная тёмная сцена-иллюстрация, а не справочная
   картинка вроде карты Таро, где важны настоящие цвета. Если их тоже
   возвращать к оригиналу, они остаются тёмными пятнами на светлой
   странице — пусть вместо этого инвертируются вместе со всем остальным,
   как уже красиво получается с портретом на главной. */
:root[data-theme="day"] .block-img-wrap img,
:root[data-theme="day"] .products-art-strip img,
:root[data-theme="day"] .hero-card {
  filter: none;
}
/* Убираем все фоновые картинки/градиенты body (у каждой страницы свои, через
   разные *.css) — остаётся только сплошной тёмный цвет из того же правила,
   который инверсия превращает в сплошной светлый. Без этого получился бы
   негатив космической картинки вместо просто белого фона. */
:root[data-theme="day"] body {
  background-image: none !important;
}
/* То же самое для декоративных секционных градиентов (.starfield — #spreads,
   .how, .article, .faq и т.д.): у каждого свой radial-gradient поверх body,
   после инверсии он давал чуть другой оттенок, чем чистый фон страницы —
   на стыке секций была заметна граница/полоса. Карточки (.spread и т.п.)
   сюда не входят — им можно и нужно отличаться от фона, это не баг. */
:root[data-theme="day"] .starfield {
  background-image: none !important;
}
@media (max-width: 360px) {
  body.site-unified > header.lilit-header nav a { font-size: 10.5px; letter-spacing: .02em; }
}

/* ── Дневная тема: все карточки — почти белые, тонкая бледно-сиреневая линия, мягкая тень
   (как в Лунном календаре; Павел, 25.09.2026: «так надо сделать везде»). Раньше были
   сиреневая заливка + синяя рамка. Цвета записаны «до» переворота страницы:
   #050409 → #fbfaff (заливка), #241d39 → #e2dbf7 (линия), #423669 → #c9bdf0 (линия при
   наведении/выборе), #120e20 → #f1edff (подложка выбранного), #9281d6 → #7c6bc0 (тень). */
:root[data-theme="day"] :is(
  .service, .price-card, .goal,
  .spread, .spread-helper, .dlg-guide, .lt-deck,
  .sign, .forecast-box, .year-card, .topic-grid button, .sky-item,
  .nc-card, .nc-note-card, #birth-form, .reading-panel,
  .tool-card, .step, .masters, .meaning-row, .meaning-result, #number-form,
  .calendar-panel, .day-panel, .phase-guide article,
  .path-why, #build,
  .upright, .reversed, .note-grid > aside, .calculator aside, .card-related-grid > a, .suits a, .suits button,
  .faq details, .nc-faq details, main details:not(.finder)
) {
  background: #050409 !important;
  border: 1px solid #241d39 !important;
  box-shadow: 0 12px 36px #9281d61a !important;
}
:root[data-theme="day"] :is(.service, .price-card, .spread, .sign, .tool-card, .nc-card, .step, .phase-guide article, .forecast-box, .year-card, .lt-deck, .reading-panel, .calendar-panel, .day-panel) { border-radius: 20px !important; }
:root[data-theme="day"] :is(.service, .price-card, .goal, .spread, .sign, .tool-card, .meaning-row, .topic-grid button, .card-related-grid > a, .suits a, .suits button):hover {
  border-color: #423669 !important;
  box-shadow: 0 16px 40px #9281d62e !important;
}
/* Выбранное / главное — бледно-сиреневая подложка и линия потемнее */
:root[data-theme="day"] :is(.topic-grid button[aria-pressed="true"], .goal.active, .sign.active, .sign[aria-pressed="true"], .tool-card.active, .tool-card[aria-pressed="true"], .meaning-row.active) {
  background: #120e20 !important;
  border-color: #423669 !important;
}
:root[data-theme="day"] .price-card.premium { border-color: #423669 !important; }