/* Информационные страницы, карта сайта, 404, вход и профиль. Поверх kg.css */
.page-wrap { width: min(calc(100% - 32px), 860px); margin: 0 auto; padding: 36px 0 20px; }
.page-wrap .crumbs { display: flex; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.page-wrap .crumbs a { color: var(--muted); text-decoration: none; }
.page-h { font: 300 clamp(38px, 6vw, 64px)/1.02 var(--head); letter-spacing: -0.03em; }
.page-lead { color: var(--muted); font-size: 16px; line-height: 25px; margin-top: 12px; max-width: 620px; }
.page-card { margin-top: 26px; padding: 28px 24px; border-radius: 28px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
@media (min-width: 760px) { .page-card { padding: 40px 44px; } }
.page-prose { font-size: 16px; line-height: 27px; color: #EFE3D8; }
.page-prose > * + * { margin-top: 14px; }
.page-prose h2 { font: 400 26px/32px var(--head); color: var(--text); margin-top: 32px; }
.page-prose h3 { font: 500 20px/26px var(--head); color: var(--gold-hi); margin-top: 24px; }
.page-prose a { color: var(--gold-hi); }
.page-prose ul, .page-prose ol { padding-left: 22px; }
.page-prose li + li { margin-top: 6px; }
/* старые тексты из редактора приходят с инлайн‑стилями — выравниваем */
.page-prose [style] { font-size: inherit !important; text-align: inherit !important; color: inherit !important; }
.sitemap-col { display: grid; gap: 22px; }
@media (min-width: 760px) { .sitemap-col { grid-template-columns: 1fr 1fr; } }
.sitemap-col h2 { font: 600 12px/16px var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; }
.sitemap-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.sitemap-col a { color: var(--text); text-decoration: none; font-size: 15px; line-height: 22px; }
.sitemap-col a:hover { color: var(--gold-hi); }

/* Цены VIP */
.prices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 22px; }
.price { padding: 18px 16px; border-radius: 20px; background: rgba(255,240,225,.04); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 4px; }
.price b { font: 300 32px/1 var(--head); }
.price span { color: var(--muted); font-size: 13px; }
.price.hit { background: linear-gradient(140deg, rgba(142,22,56,.35), rgba(216,180,122,.12)); box-shadow: inset 0 0 0 1px var(--line-strong); }
.price.hit span::after { content: " · выгодно"; color: var(--gold-hi); }

/* 404 */
.nf { text-align: center; padding: 70px 0 30px; }
.nf .code { font: 300 clamp(110px, 22vw, 200px)/.9 var(--head); letter-spacing: -0.06em; }

/* Вход, код и профиль на старой вёрстке: тёмная карточка вместо розовой */
.legacy .content, .legacy .login-page { width: min(calc(100% - 32px), 560px); margin: 30px auto 0; color: var(--text); }
.legacy .pink-block, .legacy .login-block { background: var(--glass) !important; border-radius: 28px !important; box-shadow: inset 0 0 0 1px var(--line) !important; padding: 28px 24px !important; color: var(--text) !important; }
.legacy h1, .legacy h2 { font: 300 32px/38px var(--head) !important; color: var(--text) !important; }
.legacy .label { color: var(--muted) !important; }
.legacy input:not([type=checkbox]):not([type=radio]), .legacy .form-control { background: rgba(255,240,225,.06) !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--line) !important; color: var(--text) !important; border-radius: 14px !important; padding: 12px 14px !important; }
.legacy .btn-primary, .legacy .subscribe-button, .legacy .custom-red-btn, .legacy button[type=submit] { background: var(--gold-metal) !important; color: var(--ink) !important; border: 0 !important; border-radius: 16px !important; font-weight: 600 !important; padding: 12px 20px !important; }
.legacy .modal-content { background: #1a0a10 !important; color: var(--text) !important; border-radius: 24px !important; box-shadow: inset 0 0 0 1px var(--line-strong) !important; }
.legacy .alert { border-radius: 16px; }

/* ===== Вход и код подтверждения ===== */
.auth { min-height: calc(100svh - 260px); display: grid; place-items: center; padding: 40px 16px 10px; }
.auth-card { position: relative; width: 100%; max-width: 440px; padding: 34px 28px 28px; border-radius: 32px; text-align: center; background: radial-gradient(120% 80% at 50% 0%, rgba(142,22,56,.38), transparent 60%), rgba(22,9,14,.85); box-shadow: inset 0 0 0 1px var(--line-strong), 0 40px 100px rgba(0,0,0,.55); display: grid; gap: 14px; }
.auth-card .mark { margin: 0 auto 4px; width: 52px; height: 52px; border-radius: 16px; font-size: 18px; }
.auth-card h1 { font: 300 34px/38px var(--head); letter-spacing: -0.02em; }
.auth-sub { color: var(--muted); font-size: 14px; line-height: 21px; }
.auth-sub b { color: var(--text); font-weight: 600; }
.auth-form { display: grid; gap: 12px; margin-top: 6px; text-align: left; }
.auth-field { display: grid; gap: 6px; }
.auth-field span { font: 600 11px/14px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.auth-field input { width: 100%; padding: 15px 16px; border: 0; border-radius: 16px; background: rgba(255,240,225,.06); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: 500 16px/22px var(--font); outline: none; transition: box-shadow 250ms var(--ease); }
.auth-field input:focus { box-shadow: inset 0 0 0 2px var(--gold); }
.auth-code { text-align: center; letter-spacing: .4em; font-size: 22px !important; }
.auth-form .btn { width: 100%; }
.auth-form .btn[disabled] { opacity: .5; }
.auth-note { color: var(--muted); font-size: 12px; text-align: center; }
.auth-err { color: #ff8fa3; font-size: 13px; }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-vk { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px; border: 0; border-radius: 16px; cursor: pointer; background: #fff; color: #0b0508; font: 600 15px/20px var(--font); transition: transform 300ms var(--spring); }
.auth-vk:hover { transform: translateY(-2px); }
.auth-perks { list-style: none; padding: 14px 0 0; margin: 4px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; text-align: left; color: var(--muted); font-size: 13px; }
.auth-perks li::before { content: "✦"; color: var(--gold); margin-right: 8px; }
.auth-back { color: var(--muted); font-size: 13px; text-decoration: none; }
.auth-back:hover { color: var(--gold-hi); }

/* ===== Личный кабинет ===== */
.acc { width: min(calc(100% - 32px), 1100px); margin: 0 auto; padding: 30px 0 10px; display: grid; gap: 18px; }
.acc-msg { padding: 12px 16px; border-radius: 16px; background: rgba(216,180,122,.12); box-shadow: inset 0 0 0 1px rgba(216,180,122,.35); font-size: 14px; }
.acc-msg.error { background: rgba(200,50,92,.15); box-shadow: inset 0 0 0 1px rgba(200,50,92,.4); }
.acc-head { display: flex; align-items: center; gap: 18px; padding: 8px 0 6px; }
.acc-ava { flex: none; width: 72px; height: 72px; border-radius: 24px; display: grid; place-items: center; background: var(--gold-metal); color: var(--ink); font: 500 30px/1 var(--head); box-shadow: 0 16px 40px rgba(216,180,122,.25); }
.acc-who { display: grid; gap: 6px; min-width: 0; }
.acc-who h1 { font: 300 clamp(26px, 4vw, 40px)/1.1 var(--head); overflow-wrap: anywhere; }
.acc-badge { justify-self: start; padding: 5px 12px; border-radius: 999px; font: 600 12px/16px var(--font); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.acc-badge.vip { color: var(--ink); background: var(--gold-metal); box-shadow: none; }
.acc-grid { display: grid; gap: 18px; }
@media (min-width: 900px) { .acc-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } }
.acc-side { display: grid; gap: 18px; }
.acc-card { padding: 24px 22px; border-radius: 28px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 12px; align-content: start; }
.acc-plans { background: radial-gradient(120% 90% at 100% 0%, rgba(216,180,122,.12), transparent 55%), radial-gradient(100% 80% at 0% 100%, rgba(142,22,56,.3), transparent 60%), rgba(22,9,14,.8); box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (min-width: 760px) { .acc-card { padding: 30px; } }
.acc-card h2 { font: 300 30px/34px var(--head); }
.acc-sub { color: var(--muted); font-size: 15px; line-height: 23px; }
.plans { display: grid; gap: 14px; margin-top: 6px; }
.plan-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
@media (max-width: 420px) { .acc-card { padding: 20px 16px; } .plan { padding: 14px 12px; } .pl-price b { font-size: 26px; } }
.plan { position: relative; display: grid; gap: 6px; padding: 16px 14px; border-radius: 20px; cursor: pointer; background: rgba(255,240,225,.04); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 250ms var(--ease), transform 300ms var(--spring); }
.plan:hover { transform: translateY(-2px); }
.plan input { position: absolute; opacity: 0; pointer-events: none; }
.plan:has(input:checked) { box-shadow: inset 0 0 0 2px var(--gold); background: rgba(216,180,122,.10); }
.plan:has(input:focus-visible) { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.pl-name { font-size: 13px; color: var(--muted); }
.pl-price b { font: 300 30px/1 var(--head); }
.pl-price s { margin-left: 6px; color: var(--muted); font-size: 13px; }
.pl-tag { justify-self: start; padding: 3px 9px; border-radius: 999px; background: var(--gold-metal); color: var(--ink); font: 700 10px/14px var(--font); letter-spacing: .04em; }
.plan.best { background: linear-gradient(140deg, rgba(142,22,56,.35), rgba(216,180,122,.12)); }
.plans .btn { width: 100%; }
@media (min-width: 760px) { .plans .btn { width: auto; justify-self: start; } }
.acc-note { color: var(--muted); font-size: 13px; line-height: 19px; }
.acc-note a { color: var(--gold-hi); }
.acc-dl { margin: 0; display: grid; gap: 10px; }
.acc-dl div { display: grid; gap: 2px; }
.acc-dl dt { font: 600 11px/14px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.acc-dl dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.acc-dl a { color: var(--text); }
.acc-out { width: 100%; }
.acc-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.acc-links a { color: var(--gold-hi); text-decoration: none; }
.acc-games h2 { font: 300 30px/34px var(--head); margin: 14px 0 12px; }
.games-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.games-mini a { padding: 14px; border-radius: 18px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-decoration: none; display: grid; gap: 4px; transition: transform 300ms var(--spring); }
.games-mini a:hover { transform: translateY(-3px); }
.games-mini b { font: 500 16px/20px var(--head); color: var(--gold-hi); }
.games-mini small { color: var(--muted); font-size: 12px; line-height: 16px; }
