/* ==========================================================================
   Меню профиля
   ==========================================================================
   Панель одна на страницу, позицию ставит скрипт (position: fixed, координаты
   у пункта, по которому щёлкнули). В шапке и в мобильном ящике это две копии
   одного пункта — поэтому не absolute внутри li: в ящике координаты другие.
   ========================================================================== */

.mg-account {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}

.mg-account[hidden] { display: none; }

.mg-account__panel {
	min-width: 264px;
	max-width: min(320px, calc(100vw - 24px));
	padding: .4rem;
	border: 1px solid var(--mg-line-gold);
	border-radius: 3px;
	background: linear-gradient(180deg, rgba(18, 15, 11, .985), rgba(10, 8, 6, .985));
	box-shadow: 0 28px 70px rgba(0, 0, 0, .62);
	font-family: var(--mg-sans);
}

.mg-account__name {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .8rem;
	margin: 0;
	padding: .7rem .9rem .6rem;
	border-bottom: 1px solid var(--mg-line);
	font-family: var(--mg-serif);
	font-size: 1.05rem;
	color: var(--mg-cream);
}

/* Статус рядом с именем: «подписка» / «без подписки». */
.mg-account__state {
	font-family: var(--mg-sans);
	font-size: .56rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mg-muted);
	white-space: nowrap;
}

.mg-account__state.is-on { color: var(--mg-gold); }

.mg-account__row {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .62rem .9rem;
	border-radius: 2px;
	color: var(--mg-text);
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

.mg-account__row:hover,
.mg-account__row:focus-visible {
	background: rgba(212, 162, 78, .09);
	color: var(--mg-cream);
	outline: none;
}

.mg-account__icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--mg-muted);
}

.mg-account__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.mg-account__text {
	display: grid;
	gap: .14rem;
	min-width: 0;
}

.mg-account__label {
	font-size: .82rem;
	letter-spacing: .03em;
}

.mg-account__meta {
	font-size: .68rem;
	line-height: 1.3;
	color: var(--mg-muted);
}

/* Активная подписка: золотой значок и золотая строка статуса. */
.mg-account__row--sub.is-on .mg-account__icon,
.mg-account__row--sub.is-on .mg-account__meta { color: var(--mg-gold); }

.mg-account__row--out {
	margin-top: .25rem;
	border-top: 1px solid var(--mg-line);
	border-radius: 0 0 2px 2px;
}

.mg-account__row--out .mg-account__label { color: var(--mg-muted); }
.mg-account__row--out:hover .mg-account__label { color: var(--mg-cream); }

/*
 * Пункт с именем — кнопка, а не ссылка: курсор и мягкая подсветка при
 * наведении говорят об этом раньше, чем откроется панель.
 */
li.mg-menu-user > a {
	cursor: pointer;
}

li.mg-menu-user > a[aria-expanded="true"] {
	color: var(--mg-gold);
}

/* ==========================================================================
   Страница «Настройки профиля»
   ==========================================================================
   Две колонки — не «пополам», а по смыслу: слева вы (фото, имя, почта, о себе),
   справа отдельной панелью пароль. Панель с рамкой нужна, чтобы правая часть
   читалась как отдельный блок, а не как поля, случайно вставшие рядом.
   ========================================================================== */

.mg-profile {
	max-width: 880px;
	margin-inline: auto;
}

.mg-profile__note {
	margin: 0 0 1.3rem;
	padding: .8rem 1.05rem;
	border: 1px solid var(--mg-line);
	border-left: 2px solid var(--mg-gold);
	border-radius: 2px;
	background: rgba(212, 162, 78, .06);
	font-size: .9rem;
	color: var(--mg-cream);
}

.mg-profile__note--error {
	border-left-color: #d98b6a;
	background: rgba(217, 139, 106, .07);
}

.mg-profile__form {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
	gap: 1.4rem 2.4rem;
	align-items: start;
}

.mg-profile__main {
	display: grid;
	gap: .95rem;
	min-width: 0;
}

.mg-profile__aside { min-width: 0; }

.mg-profile__panel {
	display: grid;
	gap: .75rem;
	padding: 1.1rem 1.2rem 1.25rem;
	border: 1px solid var(--mg-line);
	border-radius: 3px;
	background: rgba(18, 15, 11, .55);
}

.mg-profile__panel-title {
	margin: 0;
	font-family: var(--mg-serif);
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--mg-cream);
}

/* ---------- Фото профиля ---------- */

.mg-profile__avatar {
	display: flex;
	align-items: center;
	gap: 1.05rem;
}

.mg-profile__avatar-frame {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	overflow: hidden;
	border: 1px solid var(--mg-line-gold);
	border-radius: 50%;
	background: var(--mg-surface);
}

.mg-profile__avatar-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mg-profile__initials {
	font-family: var(--mg-serif);
	font-size: 1.9rem;
	line-height: 1;
	color: var(--mg-gold);
}

.mg-profile__avatar-body {
	display: grid;
	gap: .45rem;
	min-width: 0;
}

.mg-profile__avatar-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .9rem;
}

/* Настоящий input спрятан, но остаётся доступным с клавиатуры. */
.mg-profile__upload {
	position: relative;
	display: inline-flex;
}

.mg-profile__file {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

.mg-profile__file:focus-visible + .mg-profile__upload-btn {
	outline: 1px solid var(--mg-gold);
	outline-offset: 3px;
}

.mg-profile__upload-btn {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: .45em 1.1em;
	border: 1px solid var(--mg-line-gold);
	border-radius: 2px;
	font-family: var(--mg-sans);
	font-size: .66rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mg-gold);
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.mg-profile__upload-btn:hover {
	background: var(--mg-gold);
	color: #14100a;
}

.mg-profile__remove {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .72rem;
	color: var(--mg-muted);
	cursor: pointer;
}

.mg-profile__remove input { accent-color: var(--mg-gold); }

/* ---------- Поля ---------- */

.mg-profile__field {
	display: grid;
	gap: .35rem;
}

.mg-profile__label {
	font-family: var(--mg-sans);
	font-size: .58rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mg-gold);
}

.mg-profile__input {
	width: 100%;
	padding: .7em .95em;
	background: var(--mg-surface);
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	color: var(--mg-cream);
	font-family: var(--mg-sans);
	font-size: .95rem;
	line-height: 1.35;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.mg-profile__input:focus {
	outline: none;
	border-color: var(--mg-gold);
	box-shadow: 0 0 0 3px rgba(212, 162, 78, .12);
}

.mg-profile__textarea {
	min-height: 84px;
	resize: vertical;
}

.mg-profile__hint {
	margin: 0;
	font-size: .72rem;
	line-height: 1.4;
	color: var(--mg-muted);
}

/* ---------- Низ формы ---------- */

.mg-profile__foot {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .8rem 1.4rem;
}

.mg-profile__submit {
	min-height: 42px;
	padding: .7em 1.9em;
	border: 0;
	border-radius: 2px;
	background: var(--mg-gold);
	color: #14100a;
	font-family: var(--mg-sans);
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease;
}

.mg-profile__submit:hover { background: var(--mg-gold-soft); }

.mg-profile__submit:focus-visible {
	outline: 1px solid var(--mg-cream);
	outline-offset: 3px;
}

/* Гость: вместо формы — приглашение войти. */
.mg-profile--guest {
	display: grid;
	gap: 1.2rem;
	justify-items: center;
	text-align: center;
}

.mg-profile__lead {
	margin: 0;
	font-family: var(--mg-serif);
	font-size: 1.15rem;
	color: var(--mg-cream);
}

@media (max-width: 820px) {
	.mg-profile__form { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Страница настроек на главной: один экран и фон
   ==========================================================================
   Фон — ночной лес со светлячками (`bg/forest.jpg`) из запасников сайта.
   Ставим его на body: секции страницы прозрачные, поэтому кадр виден за всей
   страницей, а не полосой в одной секции.

   Высота: шапка сайта 81 px, подвал 197 — на содержимое остаётся ~620. Поэтому
   здесь шапка страницы ниже, отступы считаются от высоты окна, а обёртка темы
   (content-area с полями по 5rem и article с сплошным фоном) раздета.
   ========================================================================== */

body.page-id-198 {
	background-color: #0a0806;
	background-image:
		radial-gradient(130% 95% at 50% 16%, rgba(8, 6, 5, .24) 0%, rgba(8, 6, 5, .66) 58%, rgba(8, 6, 5, .88) 100%),
		url(../../uploads/2026/10/bg/forest.jpg);
	background-position: center 40%;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

body.page-id-198 .site,
body.page-id-198 .site-content,
body.page-id-198 #inner-wrap,
body.page-id-198 #primary,
body.page-id-198 .content-area,
body.page-id-198 .content-bg,
body.page-id-198 .entry,
body.page-id-198 .entry-content-wrap,
body.page-id-198 .single-entry,
body.page-id-198 article,
body.page-id-198 .mg-article-head,
body.page-id-198 .mg-section {
	background: transparent;
	box-shadow: none;
	border: 0;
}

body.page-id-198 .content-area {
	margin-top: 0;
	margin-bottom: 0;
}

body.page-id-198 .entry-content-wrap {
	padding-top: 0;
	padding-bottom: 0;
}

body.page-id-198 .mg-article-head {
	min-height: 0;
	padding-top: clamp(.5rem, 1.4vh, .9rem) !important;
	padding-bottom: clamp(.2rem, .7vh, .4rem) !important;
}

body.page-id-198 .mg-article-head__kicker {
	margin-bottom: .18rem;
	font-size: .54rem;
	letter-spacing: .26em;
}

body.page-id-198 .mg-article-head__title {
	margin-block: 0;
	font-size: clamp(1.1rem, 2.2vh, 1.6rem);
	line-height: 1.05;
}

body.page-id-198 .mg-section { padding-block: .4rem 0; }

/* ---------- Две карточки: профиль и безопасность ---------- */

body.page-id-198 .mg-profile {
	position: relative;
	max-width: 880px;
	margin: .2rem auto 0;
}

body.page-id-198 .mg-profile__note { margin: 0 0 .55rem; }

body.page-id-198 .mg-profile__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
	gap: .9rem;
	align-items: start;
}

/* Карточки стоят по своей высоте: поля не должны растягиваться на пустоту. */
body.page-id-198 .mg-profile__card { display: flex; flex-direction: column; }

body.page-id-198 .mg-profile__card {
	position: relative;
	padding: clamp(.75rem, 1.8vh, 1.1rem) clamp(.85rem, 1.9vw, 1.25rem);
	border: 1px solid rgba(212, 162, 78, .2);
	border-radius: 3px;
	background: linear-gradient(168deg, rgba(30, 24, 17, .9) 0%, rgba(16, 13, 10, .94) 55%, rgba(11, 9, 7, .96) 100%);
	box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(242, 232, 213, .05);
}

/* Единственное украшение — золотая волосяная линия по верхней кромке. */
body.page-id-198 .mg-profile__card::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(212, 162, 78, .6), transparent);
	pointer-events: none;
}

/* ---------- Шапка карточки ---------- */

body.page-id-198 .mg-profile__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .3rem .7rem;
	padding-bottom: .4rem;
	margin-bottom: .5rem;
	border-bottom: 1px solid var(--mg-line);
}

body.page-id-198 .mg-profile__title {
	margin: 0;
	font-family: var(--mg-serif);
	font-weight: 400;
	font-size: clamp(.92rem, 1.6vh, 1.05rem);
	letter-spacing: .01em;
	color: var(--mg-cream);
}

body.page-id-198 .mg-profile__subtitle {
	margin: .7rem 0 .35rem;
	font-family: var(--mg-sans);
	font-size: .52rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mg-gold);
}

/* ---------- Плашка подписки ---------- */

body.page-id-198 .mg-profile__status {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: .35rem;
	max-width: 100%;
	margin: 0;
	padding: .16rem .48rem;
	border: 1px solid rgba(242, 232, 213, .11);
	border-radius: 999px;
	font-size: .52rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mg-muted);
}

body.page-id-198 .mg-profile__status.is-on {
	border-color: rgba(212, 162, 78, .26);
	color: var(--mg-text);
}

body.page-id-198 .mg-profile__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--mg-muted);
}

body.page-id-198 .mg-profile__status.is-on .mg-profile__dot {
	background: var(--mg-gold);
	box-shadow: 0 0 7px rgba(212, 162, 78, .9);
}

body.page-id-198 .mg-profile__status-link {
	color: var(--mg-gold);
	text-decoration: none;
	border-bottom: 1px solid var(--mg-line-gold);
}

/* Точка-разделитель: «до 24 ноября 2026 · Оплата» читается как две части. */
body.page-id-198 .mg-profile__status-link::before {
	content: '·';
	margin-right: .35rem;
	color: rgba(242, 232, 213, .35);
}

body.page-id-198 .mg-profile__status-text,
body.page-id-198 .mg-profile__status-link { white-space: nowrap; }

/* ---------- Поля: подложка и подчёркивание ---------- */

body.page-id-198 .mg-profile__form {
	grid-template-columns: 1fr 1fr;
	gap: .4rem .8rem;
	max-width: none;
	margin-top: 0;
}

body.page-id-198 .mg-profile__form--password {
	grid-template-columns: 1fr;
	gap: .32rem;
	max-width: none;
	margin: 0;
}

body.page-id-198 .mg-profile__form > .mg-profile__avatar,
body.page-id-198 .mg-profile__field--full,
body.page-id-198 .mg-profile__foot { grid-column: 1 / -1; }

body.page-id-198 .mg-profile__field { gap: .06rem; }

body.page-id-198 .mg-profile__label {
	font-size: .52rem;
	letter-spacing: .2em;
	opacity: .92;
}

body.page-id-198 .mg-profile__input {
	padding: .36em .5em .32em;
	background: rgba(242, 232, 213, .035);
	border: 0;
	border-bottom: 1px solid rgba(242, 232, 213, .16);
	border-radius: 2px 2px 0 0;
	font-size: .92rem;
}

body.page-id-198 .mg-profile__input:hover {
	background: rgba(242, 232, 213, .055);
	border-bottom-color: rgba(242, 232, 213, .28);
}

body.page-id-198 .mg-profile__input:focus {
	background: rgba(242, 232, 213, .06);
	border-bottom-color: var(--mg-gold);
	box-shadow: inset 0 -1px 0 var(--mg-gold), 0 10px 24px -20px rgba(212, 162, 78, .9);
}

body.page-id-198 .mg-profile__textarea {
	min-height: 0;
	line-height: 1.4;
	resize: none;
}

body.page-id-198 .mg-profile__hint { font-size: .64rem; line-height: 1.35; }

/* ---------- Фото профиля ---------- */

body.page-id-198 .mg-profile__avatar { gap: .7rem; }

body.page-id-198 .mg-profile__avatar-frame {
	width: 46px;
	height: 46px;
	border: 1px solid rgba(212, 162, 78, .45);
	box-shadow: 0 0 0 4px rgba(212, 162, 78, .07), inset 0 0 18px rgba(212, 162, 78, .12);
}

body.page-id-198 .mg-profile__initials { font-size: 1.15rem; }

body.page-id-198 .mg-profile__avatar-body { gap: .15rem; }

body.page-id-198 .mg-profile__upload-btn {
	min-height: 26px;
	padding: .34em .8em;
	font-size: .54rem;
}

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

body.page-id-198 .mg-profile__foot {
	margin-top: .35rem;
	gap: .5rem;
}

body.page-id-198 .mg-profile__submit {
	min-height: 34px;
	padding: .5em 1.4em;
	font-size: .6rem;
	letter-spacing: .18em;
}

/* Второе действие в карточке — обводкой: золото одно, и оно у «Сохранить». */
body.page-id-198 .mg-profile__submit--ghost {
	background: transparent;
	border: 1px solid var(--mg-line-gold);
	color: var(--mg-gold);
}

body.page-id-198 .mg-profile__submit--ghost:hover {
	background: rgba(212, 162, 78, .12);
	color: var(--mg-cream);
}

body.page-id-198 .mg-profile__link {
	padding: 0;
	border-bottom: 0;
	text-align: left;
	text-decoration: underline;
	text-decoration-color: rgba(212, 162, 78, .35);
	text-underline-offset: 3px;
	font-size: .68rem;
	line-height: 1.45;
}

body.page-id-198 .mg-profile__link:hover { text-decoration-color: var(--mg-gold); }

body.page-id-198 .mg-profile__reset { margin: .4rem 0 0; text-align: left; }

/* ---------- Способы входа ---------- */

body.page-id-198 .mg-profile .mg-methods {
	gap: .3rem;
	padding-left: 0;
	list-style: none;
}

body.page-id-198 .mg-profile__card .mg-methods__row { padding: .34rem .5rem; }

body.page-id-198 .mg-profile__card .mg-methods__name { font-size: .8rem; }

body.page-id-198 .mg-methods__connect { font-size: .58rem; }

/* ---------- Подвал: ниже обычного ---------- */

body.page-id-198 .mg-foot { padding: .5rem 1rem .7rem; }
body.page-id-198 .mg-foot__brand img { width: 22px; height: 22px; }
body.page-id-198 .mg-foot__line { display: none; }
body.page-id-198 .mg-footlegal { margin-top: .25rem; }
body.page-id-198 .mg-footlegal a { font-size: .52rem; }
body.page-id-198 .mg-foot__copy { margin-top: .25rem; font-size: .55rem; }

@media (max-width: 760px) {
	body.page-id-198 .mg-profile__grid { grid-template-columns: 1fr; gap: .5rem; }
	body.page-id-198 .mg-profile__card { padding: .75rem .8rem; }
}

/*
 * Узкие телефоны (360×780 и ниже): та же раскладка, но ещё плотнее — иначе
 * низ карточки «Безопасность» уезжает под сгиб.
 */
@media (max-width: 380px) {
	body.page-id-198 .mg-profile__card { padding: .55rem .65rem; }
	body.page-id-198 .mg-profile__form--password .mg-profile__input { padding: .18em .4em .16em; }
	body.page-id-198 .mg-profile__avatar-frame { width: 38px; height: 38px; }
	body.page-id-198 .mg-profile__submit { min-height: 30px; }
	body.page-id-198 .mg-profile__head { margin-bottom: .26rem; padding-bottom: .26rem; }
	body.page-id-198 .mg-profile__title { font-size: .88rem; }
	body.page-id-198 .mg-profile__subtitle { margin: .42rem 0 .24rem; }
	body.page-id-198 .mg-profile__reset { margin-top: .18rem; }
	body.page-id-198 .mg-profile__link { font-size: .58rem; }
}

body.page-id-198 { background-attachment: scroll; }

/* ==========================================================================
   Композиция: карточки стоят по центру остатка экрана
   ==========================================================================
   Тема тянет #inner-wrap на всю высоту окна, но содержимое прижимает к верху —
   под карточками оставалась пустая полоса. Разворачиваем цепочку обёрток
   Kadence в колонку и отдаём остаток секции: воздух делится поровну над и под
   карточками.
   ========================================================================== */

body.page-id-198 #inner-wrap {
	display: flex;
	flex-direction: column;
}

/*
 * Обёртки Kadence — не одна, а шесть: primary → контейнер → main → wrap →
 * статья → тело записи. Список перечислен целиком, потому что «*» здесь
 * развернул бы в колонки сами поля формы.
 */
body.page-id-198 #primary,
body.page-id-198 .content-container,
body.page-id-198 #main,
body.page-id-198 .content-wrap,
body.page-id-198 article,
body.page-id-198 .entry-content-wrap,
body.page-id-198 .entry-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

body.page-id-198 #primary { margin-bottom: 0; }

body.page-id-198 .mg-section {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	padding-block: .45rem;
}

body.page-id-198 .mg-wrap { width: 100%; }

.mg-profile__reset {
	margin: 1rem 0 0;
	text-align: center;
}

.mg-profile__link {
	padding: 0 0 2px;
	border: 0;
	border-bottom: 1px dashed var(--mg-line);
	background: none;
	font-family: var(--mg-sans);
	font-size: .72rem;
	letter-spacing: .02em;
	color: var(--mg-muted);
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease;
}

.mg-profile__link:hover,
.mg-profile__link:focus-visible {
	outline: none;
	color: var(--mg-gold);
	border-bottom-color: var(--mg-line-gold);
}

/* ---------- Способы входа ---------- */

.mg-profile__methods {
	display: grid;
	gap: .7rem;
	margin-top: 1.2rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--mg-line);
}

.mg-methods {
	display: grid;
	gap: .35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mg-methods__row {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .5rem .7rem;
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	background: rgba(18, 15, 11, .4);
}

.mg-methods__row.is-on { border-color: var(--mg-line-gold); }

.mg-methods__name {
	flex: 1 1 auto;
	font-family: var(--mg-sans);
	font-size: .86rem;
	color: var(--mg-cream);
}

.mg-methods__state {
	font-size: .6rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mg-gold);
}

.mg-methods__soon {
	padding: .12em .45em;
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	font-size: .56rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mg-muted);
}

.mg-methods__form { margin: 0; }

.mg-methods__connect {
	font-family: var(--mg-sans);
	font-size: .66rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mg-gold);
	text-decoration: none;
	border-bottom: 1px solid var(--mg-line-gold);
}

.mg-methods__connect:hover { color: var(--mg-gold-soft); }

/* ==========================================================================
   Профиль на вкладках
   ==========================================================================
   Каждая вкладка — одна задача: профиль, пароль, способы входа. Так страница
   укладывается в экран без прокрутки, а глаз не спотыкается о шесть полей
   сразу.
   ========================================================================== */

/*
 * Форма профиля — снова в один столбец: фото, имя, почта, о себе. Две колонки
 * были нужны, когда рядом стоял блок пароля; теперь он на своей вкладке.
 */
.mg-profile__form {
	grid-template-columns: 1fr;
	gap: .85rem;
	max-width: 560px;
}

.mg-profile__form--password {
	gap: .7rem;
	max-width: 420px;
}

/* Финальная подгонка телефона: 17 px, которые отрезали низ второй карточки. */

/* Телефон: плашка подписки встаёт в одну строку с названием карточки. */

/* Телефон: вторая карточка заканчивается чуть выше — низ уходил под сгиб. */

/* Телефон: шесть пикселей, которые оставались лишними. */

/* ==========================================================================
   Телефон: одна плотная раскладка
   ==========================================================================
   Все правила для узкого кадра собраны здесь: правки «ещё два пикселя»
   не должны превращаться в четыре одинаковых медиа-блока.
   ========================================================================== */

@media (max-width: 560px) {
	body.page-id-198 .mg-profile {
		max-width: none;
	}
	body.page-id-198 .mg-profile__form {
		grid-template-columns: 1fr;
		gap: .3rem .7rem;
	}
	body.page-id-198 .mg-profile__submit {
		width: 100%;
		min-height: 32px;
		font-size: .56rem;
	}
	body.page-id-198 .mg-profile__status {
		font-size: .46rem;
		letter-spacing: .02em;
		padding-inline: .45rem;
		padding: .12rem .38rem;
		overflow: hidden;
	}
	/* * На телефоне всё в одном экране: подписи встают слева от полей, как в * списке настроек, а пояснения уходят — они повторяют то, что и так * видно. Ни один блок не спрятан: просто плотнее. */
	body.page-id-198 .mg-profile__card {
		padding: .55rem .7rem;
	}
	body.page-id-198 .mg-profile__head {
		padding-bottom: .3rem;
		margin-bottom: .32rem;
		flex-wrap: nowrap;
		align-items: center;
		gap: .4rem;
	}
	body.page-id-198 .mg-profile__hint {
		display: none;
	}
	body.page-id-198 .mg-profile__grid {
		gap: .3rem;
	}
	body.page-id-198 .mg-profile__form--password {
		gap: .18rem;
	}
	body.page-id-198 .mg-profile__form--password .mg-profile__field {
		grid-template-columns: 8.4rem minmax(0, 1fr);
		align-items: center;
		gap: .45rem;
	}
	body.page-id-198 .mg-profile__form--password .mg-profile__label {
		font-size: .5rem;
		letter-spacing: .12em;
		white-space: nowrap;
	}
	body.page-id-198 .mg-profile__form--password .mg-profile__input {
		padding: .24em .45em .2em;
		font-size: .88rem;
	}
	body.page-id-198 .mg-profile__textarea {
		min-height: 28px;
	}
	body.page-id-198 .mg-profile__avatar-frame {
		width: 42px;
		height: 42px;
	}
	body.page-id-198 .mg-profile__initials {
		font-size: 1.05rem;
	}
	body.page-id-198 .mg-profile__upload-btn {
		min-height: 24px;
		font-size: .5rem;
	}
	body.page-id-198 .mg-profile__foot {
		margin-top: .2rem;
	}
	body.page-id-198 .mg-profile__subtitle {
		margin: .3rem 0 .18rem;
		font-size: .5rem;
	}
	body.page-id-198 .mg-profile__card .mg-methods__row {
		padding: .2rem .4rem;
	}
	body.page-id-198 .mg-profile__reset {
		margin-top: .2rem;
	}
	body.page-id-198 .mg-profile__link {
		font-size: .62rem;
	}
	/* «Подписка:» на телефоне лишнее: точка и дата уже всё сказали. */
	body.page-id-198 .mg-profile__status-lead {
		display: none;
	}
	/* Последние пиксели: шапка страницы и зазор между карточками. */
	body.page-id-198 .mg-article-head {
		padding-top: .35rem !important;
	}
	body.page-id-198 .mg-article-head__title {
		font-size: 1rem;
	}
	body.page-id-198 .mg-foot {
		padding: .3rem 1rem .45rem;
	}
	body.page-id-198 .mg-foot__brand img {
		width: 18px;
		height: 18px;
	}
	body.page-id-198 .mg-footlegal a {
		font-size: .48rem;
	}
	body.page-id-198 .mg-foot__copy {
		font-size: .5rem;
		margin-top: .2rem;
	}
	body.page-id-198 .mg-article-head {
		padding-top: .15rem !important;
		padding-bottom: .05rem !important;
	}
	body.page-id-198 .mg-profile__status-text {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	body.page-id-198 .mg-profile__title {
		flex: 0 0 auto;
	}
	/* Записка встаёт на место заголовка: сообщение и есть заголовок этого
	   состояния, а полоса в потоке сдвигала карточки. */
	body.page-id-198 .mg-profile__note {
		margin: 0 0 .35rem;
		padding: .42rem .6rem;
		font-size: .78rem;
	}


	body.page-id-198 .mg-profile__card--side {
		padding-bottom: .3rem;
	}
	body.page-id-198 .mg-profile__card--side .mg-profile__hint {
		display: none;
	}
}

/*
 * «О себе» стало в пять строк и добавило высоты. На телефоне возвращаем экран
 * тем, что не несёт смысла: убираем надстрочник «Личный кабинет» (заголовок
 * страницы остаётся), поджимаем подвал и зазор между карточками.
 */
@media (max-width: 560px) {
	/* Надстрочник у кружка — подпись к кнопке «Загрузить», которая и так
	   стоит рядом. Убираем его, а не «Личный кабинет» в шапке. */
	body.page-id-198 .mg-article-head__kicker { display: none; }
	body.page-id-198 .mg-profile__note {
		padding: .28rem .5rem;
		font-size: .72rem;
		margin: 0 0 .22rem;
	}
	body.page-id-198 .mg-profile:has(.mg-profile__note) .mg-profile__card { padding-block: .4rem; }
	body.page-id-198 .mg-profile__avatar-body .mg-profile__label { display: none; }
	body.page-id-198 .mg-profile__avatar-body { gap: .45rem; }
	body.page-id-198 .mg-article-head { padding-bottom: 0 !important; }
	body.page-id-198 .mg-profile__grid { gap: .3rem; }
	body.page-id-198 .mg-footlegal a { font-size: .46rem; }
	body.page-id-198 .mg-foot__copy { font-size: .46rem; }
}

/* ==========================================================================
   Пол и возраст
   ==========================================================================
   Две подписи в одну строку: это короткие поля, и на телефоне они делят
   ширину карточки, а не съедают по строке на каждое.
   ========================================================================== */

body.page-id-198 .mg-profile__pair {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: .4rem .8rem;
}

/* Свой уголёк вместо системной стрелки: в тёмной карточке она серая и чуждая. */
body.page-id-198 .mg-profile__select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 1.5em;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--mg-gold) 50%),
		linear-gradient(135deg, var(--mg-gold) 50%, transparent 50%);
	background-position:
		calc(100% - .72rem) calc(50% + 1px),
		calc(100% - .44rem) calc(50% + 1px);
	background-repeat: no-repeat;
	background-size: .3rem .3rem, .3rem .3rem;
	cursor: pointer;
}

body.page-id-198 .mg-profile__select option {
	background: #14110b;
	color: var(--mg-cream);
}

body.page-id-198 .mg-profile__opt {
	font-size: .46rem;
	letter-spacing: .06em;
	text-transform: none;
	color: var(--mg-muted);
}

/*
 * Телефон: «Способы входа» одной строкой с подписью. Отдельная плашка с
 * рамкой занимала шестьдесят пикселей, а здесь это просто строка настроек:
 * «Способы входа — Яндекс · Подключить».
 */
@media (max-width: 560px) {
	body.page-id-198 .mg-profile__subtitle {
		display: inline-block;
		margin: 0 .5rem 0 0;
		vertical-align: middle;
	}

	body.page-id-198 .mg-profile .mg-methods {
		display: inline-flex;
		flex-wrap: wrap;
		gap: .3rem;
		vertical-align: middle;
	}

	body.page-id-198 .mg-profile__card .mg-methods__row {
		padding: 0;
		border: 0;
		background: none;
		gap: .55rem;
	}

	body.page-id-198 .mg-profile__card .mg-methods__name { font-size: .74rem; }

	body.page-id-198 .mg-methods__connect { font-size: .54rem; }
}

/* Телефон: последние 26 px, которые добавили пол и возраст. */
@media (max-width: 560px) {
	body.page-id-198 .mg-profile__card { padding: .42rem .55rem; }
	body.page-id-198 .mg-profile__head { margin-bottom: .24rem; padding-bottom: .24rem; }
	body.page-id-198 .mg-profile__form { gap: .22rem .7rem; }
	body.page-id-198 .mg-profile__textarea { line-height: 1.3; }
	body.page-id-198 .mg-profile__foot { margin-top: .08rem; }
	body.page-id-198 .mg-article-head { padding-top: .15rem !important; }
	body.page-id-198 .mg-foot { padding-bottom: .3rem; }
}

/* Сообщение о способах входа стоит вплотную к строке «Яндекс». */
body.page-id-198 .mg-profile__note--inline {
	margin: .45rem 0 0;
	padding: .4rem .55rem;
	font-size: .7rem;
	line-height: 1.4;
}

/*
 * Телефон: сообщение после действия добавляло строку и низ карточки уходил под
 * сгиб. Держим его узким — текст короткий, крупнее ему не нужно.
 */
@media (max-width: 560px) {
	body.page-id-198 .mg-profile__note {
		padding: .24rem .45rem;
		margin: 0 0 .16rem;
		font-size: .7rem;
	}
	body.page-id-198 .mg-profile__note--inline {
		margin: .35rem 0 0;
		padding: .3rem .45rem;
		font-size: .66rem;
	}
}

/*
 * Тема даёт спискам внутри записи нижнее поле 32 px — под строкой «Яндекс»
 * оно оставляло пустую полосу, и сообщение об ошибке уезжало вниз.
 */
body.page-id-198 .mg-profile .mg-methods { margin: 0; }

/*
 * Аудит страницы профиля: две правки.
 *
 * 1. Заголовок страницы прячем только тогда, когда сообщение стоит сверху и
 *    его место занимает. Сообщение о способе входа живёт внутри карточки —
 *    там заголовок ни при чём, и пропадать ему незачем.
 * 2. Строка подключённого способа («Яндекс ПОДКЛЮЧЕНО Отключить») на телефоне
 *    была выше строки «Подключить»: форма внутри строки тянула её вверх.
 *    Отсюда лишние 9 px прокрутки у тех, у кого способ уже подключён.
 */

body.page-id-198 .entry-content:has(.mg-profile > .mg-profile__note:not(.mg-profile__note--inline)) .mg-article-head { display: none; }

@media (max-width: 560px) {
	body.page-id-198 .mg-methods__row { align-items: center; }
	body.page-id-198 .mg-methods__form { display: inline-flex; align-items: center; margin: 0; }
	body.page-id-198 .mg-methods__form .mg-profile__link { padding-bottom: 0; line-height: 1.2; }
	body.page-id-198 .mg-methods__state { line-height: 1.2; }
}


/* ==========================================================================
   Уведомления в профиле
   ==========================================================================
   Список событий с переключателями. Обязательные (пароль, подписка) показаны
   списком с замком: их нельзя выключить, и это видно, а не спрятано.
   ========================================================================== */

.mg-profile__card--notify {
	grid-column: 1 / -1;
}

.mg-notify-list {
	list-style: none;
	margin: 0 0 1.2rem;
	padding: 0;
	display: grid;
	gap: .1rem;
}

.mg-notify-item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: .7rem .2rem;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.mg-notify-item:last-child {
	border-bottom: 0;
}

.mg-notify-item__label {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	cursor: pointer;
	min-width: 0;
}

.mg-notify-item.is-forced .mg-notify-item__label {
	cursor: default;
	opacity: .72;
}

.mg-notify-item__check {
	flex: none;
	margin-top: .25rem;
	accent-color: var(--mg-gold-soft);
	width: 1rem;
	height: 1rem;
}

.mg-notify-item__text {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}

.mg-notify-item__title {
	font-size: .92rem;
	color: var(--mg-cream);
}

.mg-notify-item__desc {
	font-size: .78rem;
	line-height: 1.5;
	color: var(--mg-muted);
}

.mg-notify-item__channels {
	flex: none;
	display: flex;
	gap: .35rem;
	padding-top: .15rem;
}

.mg-notify-chip {
	padding: .1rem .45rem;
	border-radius: 999px;
	font-size: .64rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.mg-notify-chip--email {
	color: #d9c7a3;
	border: 1px solid rgba(217, 199, 163, .4);
}

.mg-notify-chip--push {
	color: #a9c7bf;
	border: 1px solid rgba(169, 199, 191, .4);
}

@media (max-width: 640px) {
	.mg-notify-item {
		flex-direction: column;
		gap: .35rem;
	}

	.mg-notify-item__channels {
		padding-left: 1.7rem;
	}
}

/* Форма уведомлений — одна колонка: список во всю ширину, кнопка под ним. */
.mg-profile__card--notify .mg-profile__form {
	display: block;
}

.mg-profile__card--notify .mg-profile__head {
	margin-bottom: .9rem;
}

.mg-profile__card--notify .mg-profile__submit {
	margin-top: .2rem;
}

.mg-profile__card--notify .mg-profile__note {
	margin-top: .9rem;
	margin-bottom: 0;
}