/* ============================================================
   WaifuHunt — «Полночный архив»: единый дизайн-язык
   Override-слой НАД waifuhunt-theme.css. Подтягивает остальной
   сайт к лендингу-залу: champagne-gold на тёмном лаке, серифный
   дисплей (Fraunces→Georgia), хайрлайны, сдержанность.
   Только same-origin (CSS+цвета) → проходит строгий CSP всех страниц.
   Точный шрифт Fraunces грузится там, где разрешён CSP (index);
   на остальных — изящный серифный фолбэк Georgia до само-хостинга.
   Подключать ПОСЛЕ waifuhunt-theme.css. Полностью обратимо (убери <link>).
   ============================================================ */

/* self-hosted Fraunces (Latin display) + Plus Jakarta Sans (Latin UI).
   src=../assets/fonts → font-src 'self' проходит строгий CSP всех страниц. OFL.
   Кириллица у обоих отсутствует → русский текст осознанно падает на Georgia
   (дисплей) и system-ui (UI), как и на главной. Шрифты тянут только латиницу
   (логотип-вордмарк и т.п.) благодаря unicode-range. */
@font-face{
  font-family:'Fraunces'; font-style:italic; font-weight:300 500; font-display:swap;
  src:url(../assets/fonts/fraunces-latin-ext-italic.woff2) format('woff2');
  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:'Fraunces'; font-style:italic; font-weight:300 500; font-display:swap;
  src:url(../assets/fonts/fraunces-latin-italic.woff2) format('woff2');
  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;
}
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:300 600; font-display:swap;
  src:url(../assets/fonts/fraunces-latin-ext.woff2) format('woff2');
  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:'Fraunces'; font-style:normal; font-weight:300 600; font-display:swap;
  src:url(../assets/fonts/fraunces-latin.woff2) format('woff2');
  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;
}
@font-face{
  font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../assets/fonts/plusjakarta-cyrillic-ext.woff2) format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../assets/fonts/plusjakarta-latin-ext.woff2) format('woff2');
  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:'Plus Jakarta Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../assets/fonts/plusjakarta-latin.woff2) format('woff2');
  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;
}

:root {
  /* лак + бумага */
  --ar-ink:      #0a0810;
  --ar-ink-2:    #140f1e;
  --ar-paper:    #efe7d8;
  --ar-muted:    rgba(239, 231, 216, 0.62);
  --ar-soft:     rgba(239, 231, 216, 0.40);
  /* champagne-gold — структурный акцент (хром, хайрлайны, нумерация) */
  --ar-gold:     #e8c990;
  --ar-gold-2:   #f6e2b6;
  --ar-gold-dim: #b39c74;
  /* хайрлайны */
  --ar-hair:      rgba(238, 228, 214, 0.16);
  --ar-hair-soft: rgba(238, 228, 214, 0.08);
  /* бренд-градиент — ТОЛЬКО на главных действиях */
  --ar-brand: linear-gradient(132deg, #ff5fa8 0%, #a96bff 54%, #ff9a7e 100%);
  /* типографика */
  --ar-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ar-ui: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ar-e-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ar-e-spring: cubic-bezier(0.32, 0.72, 0, 1);

  /* перекрашиваем токены темы под архив */
  --wh-gold: #e8c990 !important;
  --wh-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  --wh-ink: #fbf6ec !important;
  --wh-text: #efe7d8 !important;
  --wh-muted: rgba(239, 231, 216, 0.62) !important;
  --wh-line: rgba(238, 228, 214, 0.16) !important;
  --wh-line-strong: rgba(238, 228, 214, 0.26) !important;
}

/* ---------- общий лаковый фон вместо неон-авроры ---------- */
html { background: var(--ar-ink) !important; }

body {
  font-family: var(--ar-ui) !important;
  background:
    radial-gradient(118% 90% at 64% 8%, rgba(232, 201, 144, 0.10), transparent 50%),
    radial-gradient(90% 70% at 16% 96%, rgba(169, 107, 255, 0.085), transparent 58%),
    linear-gradient(160deg, #0a0810 0%, #0c0916 48%, #080610 100%) !important;
  background-attachment: fixed !important;
}
/* приглушаем розовую «ауру»-подсветку темы до тёплого золота */
body::before {
  background:
    linear-gradient(115deg, transparent 0 30%, rgba(232, 201, 144, 0.05) 42%, transparent 58%),
    linear-gradient(235deg, transparent 0 34%, rgba(169, 107, 255, 0.04) 48%, transparent 62%) !important;
  opacity: 0.7 !important;
}

/* ---------- дисплейная типографика: сериф + champagne ---------- */
h1, h2, h3,
.logo,
.footer-brand-title,
.account-panel-title,
.page-title, .hero-title,
.section-title {
  font-family: var(--ar-display) !important;
  letter-spacing: -0.012em !important;
}
h1 {
  color: #fbf6ec !important;
  font-weight: 360 !important;
  text-shadow: 0 18px 60px rgba(0, 0, 0, 0.45) !important;
}
h2 { color: #fbf6ec !important; font-weight: 420 !important; }
h3 { color: #f3ecdf !important; font-weight: 500 !important; }

/* акцентное золото на курсиве-эмфазе внутри заголовков */
h1 em, h2 em, .hero-title em, .page-title em {
  font-style: italic; font-weight: 460;
  color: var(--ar-gold-2) !important;
  -webkit-text-fill-color: var(--ar-gold-2);
}

/* надписи-«eyebrow» (KICKER) — золото, разрядка, моно-настроение */
.eyebrow, .kicker, .badge-pill, [class*="eyebrow"], [class*="showcase"] {
  font-family: var(--ar-ui) !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase;
  color: var(--ar-gold) !important;
}

/* ====================================================
   ШАПКА — лак + хайрлайн + золотой росчерк
   ==================================================== */
header,
.site-header {
  background:
    linear-gradient(90deg, rgba(232, 201, 144, 0.05), transparent 36%, rgba(169, 107, 255, 0.03)),
    rgba(9, 7, 14, 0.74) !important;
  border-bottom: 1px solid var(--ar-hair) !important;
  box-shadow: 0 18px 50px -28px rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
}

.logo {
  color: #fbf6ec !important;
  font-weight: 540 !important;
  font-size: 1.32em !important;
  text-shadow: none !important;
  letter-spacing: -0.01em !important;
}
.logo::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.8), transparent 38%),
    linear-gradient(140deg, #f6e2b6 0%, #c79bff 58%, #e8c990 100%) !important;
  box-shadow: 0 6px 18px -4px rgba(232, 201, 144, 0.5),
              inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
  border-radius: 9px !important;
}

/* пилюля-навигация: хайрлайн, золотой активный стейт вместо розового */
.desktop-nav,
.site-nav {
  background: rgba(238, 228, 214, 0.035) !important;
  border: 1px solid var(--ar-hair-soft) !important;
}
.nav-link,
.mobile-nav-link,
.dropdown-item {
  color: #efe7d8 !important;
  font-weight: 560 !important;
  letter-spacing: 0.01em !important;
}
.nav-link:hover,
.mobile-nav-link:hover,
.dropdown-item:hover,
.nav-link.is-active,
.nav-link[aria-current="page"] {
  background:
    radial-gradient(circle at 50% 0%, rgba(246, 226, 182, 0.16), transparent 62%),
    rgba(232, 201, 144, 0.10) !important;
  border-color: color-mix(in srgb, var(--ar-gold) 42%, transparent) !important;
  box-shadow: 0 0 22px -4px rgba(232, 201, 144, 0.22) !important;
  color: #fff7ea !important;
}

/* «?»/иконка-кнопки в шапке → хайрлайн-золото */
.account-btn,
.account-notify-btn,
.mobile-nav-btn,
.mobile-nav-close,
.account-panel-close {
  border: 1px solid var(--ar-hair) !important;
  background: rgba(238, 228, 214, 0.045) !important;
  color: var(--ar-gold-2) !important;
}
.account-btn:hover,
.account-notify-btn:hover,
.mobile-nav-btn:hover {
  border-color: color-mix(in srgb, var(--ar-gold) 46%, transparent) !important;
  background: rgba(232, 201, 144, 0.10) !important;
}

/* ====================================================
   КНОПКИ — главные держат бренд-градиент, прочие → золото
   ==================================================== */
.btn-primary, .primary-btn,
.account-submit, .auth-submit,
button[type="submit"].primary,
.cta-primary {
  background: var(--ar-brand) !important;
  color: #160a14 !important;
  border: 0 !important;
  font-weight: 700 !important;
  box-shadow: 0 16px 40px -16px rgba(169, 107, 255, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
.btn.secondary, .btn-secondary, .ghost-btn,
.secondary-btn {
  background: rgba(238, 228, 214, 0.05) !important;
  border: 1px solid var(--ar-hair) !important;
  color: #f3ecdf !important;
}
.btn.secondary:hover, .btn-secondary:hover, .ghost-btn:hover {
  border-color: color-mix(in srgb, var(--ar-gold) 44%, transparent) !important;
  background: rgba(232, 201, 144, 0.10) !important;
}

/* ====================================================
   ПАНЕЛИ / КАРТОЧКИ — лак + хайрлайн + уголковая сдержанность
   ==================================================== */
.account-panel, .panel, .box, .card,
.account-overlay-panel, .modal-panel,
.news-card, .info-window {
  border-color: var(--ar-hair) !important;
}
.account-overlay,
.account-overlay-backdrop,
.modal-backdrop {
  background: rgba(6, 5, 12, 0.62) !important;
  backdrop-filter: blur(8px) saturate(115%) !important;
}

/* поля ввода — лак + золотой фокус */
input, textarea, select,
.account-field input, .auth-field input {
  font-family: var(--ar-ui) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: color-mix(in srgb, var(--ar-gold) 55%, transparent) !important;
  box-shadow: 0 0 0 3px rgba(232, 201, 144, 0.14) !important;
  outline: none !important;
}

/* ссылки — тёплое золото вместо розового */
a:not(.btn):not(.nav-link):not(.logo):not(.account-btn) {
  color: var(--ar-gold) !important;
}
a:not(.btn):not(.nav-link):not(.logo):hover {
  color: var(--ar-gold-2) !important;
}

/* ====================================================
   ПОДВАЛ — лак + хайрлайн + серифный бренд
   ==================================================== */
.site-footer, footer {
  border-top: 1px solid var(--ar-hair) !important;
  background: linear-gradient(180deg, transparent, rgba(8, 6, 14, 0.55)) !important;
}
.footer-brand-title { color: #fbf6ec !important; font-weight: 460 !important; }
.footer-link:hover { color: var(--ar-gold-2) !important; }

/* ---------- скроллбар → золото ---------- */
* { scrollbar-color: rgba(232, 201, 144, 0.42) rgba(255, 255, 255, 0.05) !important; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(rgba(232, 201, 144, 0.5), rgba(179, 156, 116, 0.5)) !important;
}

/* ====================================================
   ОВЕРЛЕЙ АККАУНТА — вход / профиль / настройки / магазин
   account-overlay.js инжектит свой <style> позже в source order,
   поэтому скоупим .account-panel-root + !important: выше специфичность
   и важность → перебиваем гарантированно. Правим общие примитивы
   (карта, табы, карточки, поля, кнопки, kicker) — один блок
   поднимает ВСЕ account-вью разом в язык «Полночного архива».
   OAuth-кнопки (VK/Yandex/Google) намеренно не трогаем — у них
   обязан остаться фирменный цвет провайдера.
   ==================================================== */

/* лаковая карта вместо холодного сине-чёрного, золотой внутренний блик */
.account-panel-root .account-panel {
  background:
    linear-gradient(180deg, rgba(22, 16, 32, 0.97), rgba(10, 8, 16, 0.99)) !important;
  border: 1px solid var(--ar-hair) !important;
  box-shadow: 0 36px 100px -28px rgba(0, 0, 0, 0.72),
              inset 0 1px 0 rgba(246, 226, 182, 0.06) !important;
}

/* тёплое золото+фиолет вместо розово-оранжевого свечения */
.account-panel-root .account-panel-glow {
  background:
    radial-gradient(circle at 50% 12%, rgba(232, 201, 144, 0.16), transparent 42%),
    radial-gradient(circle at 76% 78%, rgba(169, 107, 255, 0.12), transparent 38%) !important;
}
.account-panel-root .account-panel-backdrop {
  background: linear-gradient(rgba(6, 5, 12, 0.5), rgba(6, 5, 12, 0.62)) !important;
  backdrop-filter: blur(8px) saturate(115%) !important;
}

/* заголовок-дисплей: champagne (сериф уже от глобального слоя) */
.account-panel-root .account-panel-title {
  color: #fbf6ec !important;
  letter-spacing: -0.015em !important;
}
.account-panel-root .account-panel-top {
  border-bottom: 1px solid var(--ar-hair) !important;
}

/* табы Вход/Регистрация: хайрлайн в покое → бренд-градиент в актив */
.account-panel-root .account-panel-tab {
  border: 1px solid var(--ar-hair) !important;
  background: rgba(238, 228, 214, 0.045) !important;
  color: var(--ar-muted) !important;
}
.account-panel-root .account-panel-tab:hover {
  background: rgba(232, 201, 144, 0.10) !important;
  color: #f3ecdf !important;
}
.account-panel-root .account-panel-tab.is-active {
  background: var(--ar-brand) !important;
  border-color: transparent !important;
  color: #160a14 !important;
}

/* внутренние карточки: тёплый тинт + хайрлайн + серифный титул */
.account-panel-root .account-panel-card,
.account-panel-root .account-panel-stat {
  background: rgba(238, 228, 214, 0.04) !important;
  border: 1px solid var(--ar-hair) !important;
}
.account-panel-root .account-panel-card-title {
  font-family: var(--ar-display) !important;
  font-weight: 500 !important;
  color: #f3ecdf !important;
  letter-spacing: -0.01em !important;
}

/* «kicker» секций → золото вместо розового — главный маркер языка */
.account-panel-root .account-panel-section-kicker,
.account-panel-root .account-panel-stat-label {
  color: var(--ar-gold) !important;
}

/* поля ввода: лак + золотой фокус + UI-шрифт вместо Arial */
.account-panel-root .account-panel-field input,
.account-panel-root .account-panel-field select,
.account-panel-root .account-panel-field textarea {
  background: rgba(238, 228, 214, 0.05) !important;
  border: 1px solid var(--ar-hair) !important;
  color: var(--ar-paper) !important;
  font-family: var(--ar-ui) !important;
}
.account-panel-root .account-panel-field input:focus,
.account-panel-root .account-panel-field select:focus,
.account-panel-root .account-panel-field textarea:focus {
  border-color: color-mix(in srgb, var(--ar-gold) 55%, transparent) !important;
  box-shadow: 0 0 0 3px rgba(232, 201, 144, 0.14) !important;
  outline: none !important;
}
.account-panel-root .account-panel-field label { color: var(--ar-muted) !important; }

/* кнопки: primary держит бренд-градиент (как CTA лендинга),
   secondary → золотой хайрлайн */
.account-panel-root .account-panel-btn.primary {
  background: var(--ar-brand) !important;
  color: #160a14 !important;
  box-shadow: 0 16px 40px -16px rgba(169, 107, 255, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
.account-panel-root .account-panel-btn.secondary {
  background: rgba(238, 228, 214, 0.05) !important;
  border: 1px solid var(--ar-hair) !important;
  color: #f3ecdf !important;
}
.account-panel-root .account-panel-btn.secondary:hover {
  border-color: color-mix(in srgb, var(--ar-gold) 44%, transparent) !important;
  background: rgba(232, 201, 144, 0.10) !important;
}

/* чипы и текст-ссылки → золото вместо розового */
.account-panel-root .account-panel-chip.is-active {
  background: rgba(232, 201, 144, 0.14) !important;
  border-color: color-mix(in srgb, var(--ar-gold) 40%, transparent) !important;
  color: #fff7ea !important;
}
.account-panel-root .account-panel-inline-link { color: var(--ar-gold) !important; }
.account-panel-root .account-panel-inline-link:hover { color: var(--ar-gold-2) !important; }

/* settings-навигация: активный пункт на тёплом золоте */
.account-panel-root .account-panel-settings-nav a:hover,
.account-panel-root .account-panel-settings-nav a:focus-visible,
.account-panel-root .account-panel-settings-nav a.is-active {
  background: rgba(232, 201, 144, 0.10) !important;
  color: #fff7ea !important;
}

/* --- профиль/настройки: «богатые» карточки и bespoke-поля ---
   generic .account-panel-card выше красит !important и сплющил бы
   контекстные карточки (холодный сине-чёрный 0.72) — поэтому
   возвращаем им плотность, но уже в тёплом лаке. */

/* меню профиля/уведомлений, контентные карточки профиля, карты настроек */
.account-panel-root .account-panel-account-center .account-panel-card,
.account-panel-root .account-panel-inbox-center .account-panel-card,
.account-panel-root[data-view="profile"] .account-panel-profile-main > .account-panel-card,
.account-panel-root .account-panel-settings-center .account-panel-card {
  background:
    linear-gradient(180deg, rgba(246, 226, 182, 0.045), rgba(246, 226, 182, 0.02)),
    rgba(18, 13, 26, 0.74) !important;
  border: 1px solid var(--ar-hair) !important;
}

/* геро-баннер профиля: тёплый золото+фиолет вместо розово-сине-оранжевого */
.account-panel-root .account-panel-profile-hero,
.account-panel-root .account-panel-profile-hero.account-panel-card {
  background:
    linear-gradient(135deg, rgba(232, 201, 144, 0.10), rgba(169, 107, 255, 0.07) 46%, rgba(232, 201, 144, 0.05)),
    radial-gradient(circle at 16% 16%, rgba(232, 201, 144, 0.18), transparent 34%),
    radial-gradient(circle at 86% 12%, rgba(169, 107, 255, 0.18), transparent 32%),
    rgba(12, 9, 20, 0.9) !important;
  box-shadow:
    inset 0 0 0 1px rgba(246, 226, 182, 0.07),
    0 24px 80px rgba(0, 0, 0, 0.42),
    0 0 54px rgba(232, 201, 144, 0.06) !important;
}
.account-panel-root .account-panel-profile-hero.account-panel-card::before {
  background: radial-gradient(circle, rgba(169, 107, 255, 0.24), transparent 68%) !important;
}
.account-panel-root .account-panel-profile-hero.account-panel-card::after {
  background: radial-gradient(circle, rgba(232, 201, 144, 0.16), transparent 70%) !important;
}

/* settings-навигация → тёплый лак */
.account-panel-root .account-panel-settings-nav {
  background: rgba(18, 13, 26, 0.7) !important;
  border: 1px solid var(--ar-hair) !important;
}

/* поля настроек (класс .account-panel-settings-input ≠ .account-panel-field input) */
.account-panel-root .account-panel-settings-input {
  background: rgba(238, 228, 214, 0.05) !important;
  border: 1px solid var(--ar-hair) !important;
  color: var(--ar-paper) !important;
  font-family: var(--ar-ui) !important;
}
.account-panel-root .account-panel-settings-input:focus {
  border-color: color-mix(in srgb, var(--ar-gold) 55%, transparent) !important;
  box-shadow: 0 0 0 3px rgba(232, 201, 144, 0.14) !important;
  outline: none !important;
}

/* аватар-плашка настроек → тёплый градиент */
.account-panel-root .account-panel-settings-avatar {
  background: linear-gradient(135deg, rgba(232, 201, 144, 0.22), rgba(169, 107, 255, 0.14)) !important;
  border: 1px solid var(--ar-hair) !important;
}

/* ---------- reduced-motion безопасно ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none !important; }
}