/*
 * «Мои покупки» на сайте с закрытым каталогом (app/partials/my-purchases.php) — личный кабинет покупателя.
 * Figma wGC5YgBMUF7AxqsAquKJKC, ряд «Мои покупки v2 · 27.10»: Л1 1751:8121 (вошёл, пусто), Л2 1755:8184 (покупки есть),
 * Л0 1757:8249 (не вошёл; в нём вход через Telegram — кадры Т1–Т4). Только ПК-вёрстка: контейнер 1200,
 * сетка 792 + 384, зазор 24; ниже 1100 колонки встают в одну.
 *
 * Размеры, цвета и радиусы — прямо из макета (Inter, синий #1D4ED8, карточки с рамкой #E5E9F2 и мягкой тенью,
 * радиус 20, кнопки-пилюли 22). Цвета — локальные токены `.mp`, чтобы страницу не сдвигали правки общих стилей.
 * ⚠ Текст кнопок — БЕЛЫЙ на синем. Прежняя страница рисовала «пустой синий прямоугольник»: цвет текста совпадал
 * с фоном (стили магазина). Здесь цвет задан прямо у кнопки, чтобы общий `a { color }` его не перебил.
 */

.mp {
	--mp-ink: #0f172a;
	--mp-mute: #5b6478;
	--mp-faint: #8a93a6;
	--mp-line: #e5e9f2;
	--mp-blue: #1d4ed8;
	--mp-blue-dark: #1e40af;
	--mp-tint: #eef3ff;
	--mp-tg: #229ed9;
	--mp-shadow: 0 4px 8px rgba(15, 23, 41, .06);

	background: #f5f7fb;
	color: var(--mp-ink);
	padding: 32px 0 64px;
}

/* Атрибут hidden сильнее любого display ниже (у блоков входа он переключается скриптом). */
.mp [hidden] { display: none !important; }

/* Контейнер 1200 по макету. */
.mp__in { max-width: 1248px; margin: 0 auto; padding: 0 24px; }

.mp__ic { display: block; flex: none; }

/* Подпись для скринридера у кнопок-значков (aria-label из PHP-вывода сторож кабинета не пропускает — подпись текстом). */
.mp__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.mp__crumbs { margin: 0 0 24px; font-size: 13px; line-height: 17px; color: var(--mp-mute); }
.mp__crumbs a { color: var(--mp-mute); text-decoration: none; }
.mp__crumbs a:hover { color: var(--mp-blue); text-decoration: underline; }
.mp__crumbs span { margin: 0 2px; }

/* Текстовая кнопка без заливки (в том числе <button>). */
.mp__link {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	color: var(--mp-blue);
	cursor: pointer;
	text-decoration: none;
}
.mp__link:hover { text-decoration: underline; }

.mp__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 32px;
	border: 1px solid var(--mp-blue);
	border-radius: 999px;
	background: var(--mp-blue);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.mp__btn:hover { background: var(--mp-blue-dark); border-color: var(--mp-blue-dark); color: #fff; }
.mp__btn--wide { width: 100%; margin-top: 18px; min-height: 52px; }

/* Карточка: белая, рамка #E5E9F2, тень, радиус 20. */
.mp__card {
	background: #fff;
	border: 1px solid var(--mp-line);
	border-radius: 20px;
	box-shadow: var(--mp-shadow);
}

.mp__h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--mp-ink); }
.mp__h2--lg { font-size: 24px; line-height: 32px; }

.mp__lead { margin: 0 0 20px; color: var(--mp-mute); }
.mp__small { margin: 14px 0 0; font-size: 13px; color: var(--mp-mute); }
.mp__small a { color: var(--mp-blue); }

.mp__said {
	margin: 0 0 24px;
	padding: 12px 18px;
	border-radius: 12px;
	background: var(--mp-tint);
	color: var(--mp-blue-dark);
}
.mp__said a { margin-left: 8px; font-weight: 600; }

/* ── Полоса-приветствие (Л1 / Л2) и «Ваш кабинет на …» (Л0) ───────────────────────────────────────── */

.mp__hello {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0 0 24px;
	padding: 28px 32px;
	border: 1px solid #d9e3fa;
	border-radius: 20px;
	background: linear-gradient(90deg, #eef3ff, #f7f9ff);
	box-shadow: var(--mp-shadow);
}

.mp__who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 20px; }
.mp__who > div { min-width: 0; }
.mp__who h1 { margin: 0; font-size: 28px; line-height: 36px; font-weight: 700; color: var(--mp-ink); }
.mp__who p { margin: 6px 0 0; display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; color: var(--mp-mute); }
.mp__who p .mp__ic { color: #16a34a; }

.mp__hello--guest .mp__who h1 { font-size: 32px; line-height: 40px; }
.mp__hello--guest .mp__who p { font-size: 16px; line-height: 24px; }

/* Аватар 64: инициалы 22 жирным или значок человека; значок Telegram 24 в правом нижнем углу. */
.mp__ava {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--mp-blue);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	font-weight: 700;
}
.mp__avatg {
	position: absolute;
	left: 44px;
	top: 44px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--mp-tg);
	color: #fff;
}

.mp__side-top { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }

.mp__out { margin: 0; }
.mp__out button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px 8px 14px;
	border: 1px solid #c7d3f0;
	border-radius: 18px;
	background: #fff;
	color: var(--mp-blue);
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	cursor: pointer;
}
.mp__out button:hover { background: var(--mp-tint); }

/* Три плитки-счётчика 168×88. */
.mp__stats { display: flex; gap: 12px; }
.mp__stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 168px;
	height: 88px;
	padding: 14px 16px;
	border: 1px solid #e1e8f7;
	border-radius: 16px;
	background: #fff;
}
.mp__stat b { font-size: 28px; line-height: 32px; font-weight: 700; color: var(--mp-ink); }
.mp__stat.is-empty b { color: var(--mp-faint); }
.mp__stat span { font-size: 12px; line-height: 16px; color: var(--mp-mute); white-space: nowrap; }

/* Стопка карточек-лицензий — иллюстрация (260×152). */
.mp__stack { position: relative; flex: none; width: 260px; height: 152px; }
.mp__stack i { position: absolute; display: block; font-style: normal; }
.mp__st3 { left: 48px; top: 0; width: 164px; height: 64px; border: 1px solid #d2defa; border-radius: 16px; background: #e2eaff; }
.mp__st2 { left: 24px; top: 28px; width: 212px; height: 72px; border: 1px solid #d2defa; border-radius: 16px; background: #f0f5ff; }
.mp__st1 { left: 0; top: 56px; width: 260px; height: 96px; border: 1px solid #d2defa; border-radius: 18px; background: #fff; box-shadow: 0 6px 16px rgba(15, 23, 41, .1); }
.mp__sl { height: 8px; border-radius: 4px; background: #c9d5ee; }
.mp__sl--a { left: 74px; top: 10px; width: 72px; }
.mp__sl--b { left: 74px; top: 46px; width: 100px; }
.mp__sl--c { left: 80px; top: 84px; width: 110px; height: 12px; border-radius: 6px; }
.mp__sl--d { left: 80px; top: 104px; width: 150px; background: #e3e9f6; }
.mp__sdot { left: 44px; top: 40px; width: 20px; height: 20px; border-radius: 50%; background: #2fc6f6; }
.mp__slogo { left: 20px; top: 82px; width: 44px; height: 44px; border-radius: 50%; background: #1e6fff; color: #fff; font-size: 22px; line-height: 44px; text-align: center; font-weight: 700; }
.mp__schip { left: 80px; top: 122px; height: 20px; padding: 0 10px; border-radius: 11px; background: #dcfce7; color: #166534; font-size: 11px; line-height: 20px; font-weight: 600; white-space: nowrap; }

/* ── Сетка 792 + 384, зазор 24 ──────────────────────────────────────────────────────────────────── */

.mp__grid { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 24px; align-items: stretch; }
.mp__main { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.mp__aside { min-width: 0; align-self: start; display: flex; flex-direction: column; gap: 16px; }

/* Заголовок «Лицензии» и сегменты-фильтры. */
.mp__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mp__segs {
	display: flex;
	gap: 2px;
	padding: 4px;
	border: 1px solid var(--mp-line);
	border-radius: 22px;
	background: #fff;
}
.mp__seg {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 0;
	border-radius: 18px;
	background: none;
	color: var(--mp-mute);
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	cursor: pointer;
}
.mp__seg b { font-weight: 600; color: var(--mp-faint); }
.mp__seg:hover { color: var(--mp-blue); }
.mp__seg.is-on { background: var(--mp-blue); color: #fff; }
.mp__seg.is-on b { color: #fff; }
.mp__seg:disabled { cursor: default; }
.mp__seg:disabled:hover { color: var(--mp-mute); }
.mp__seg.is-on:disabled:hover { color: #fff; }

/* Пустое состояние (Л1): растягивается до низа правой колонки. */
.mp__empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 40px;
	text-align: center;
}
.mp__empty h2 { margin: 0; font-size: 22px; line-height: 30px; font-weight: 700; color: var(--mp-ink); }
.mp__empty p { margin: 0; max-width: 480px; font-size: 15px; line-height: 24px; color: var(--mp-mute); text-wrap: balance; }

/* «С чего начать»: три карточки-предложения в ряд. */
.mp__start { display: flex; flex-direction: column; gap: 16px; }
.mp__offers { display: flex; align-items: stretch; gap: 16px; }
.mp__offer { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 20px; }
.mp__offer h3 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--mp-ink); }
.mp__offer-in { flex: 1; min-height: 72px; }
.mp__offer-in b { display: block; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--mp-ink); }
.mp__offer-in span { display: block; margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--mp-mute); }
.mp__offer-in small { display: block; margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--mp-faint); }
.mp__offer-in p { margin: 0; font-size: 14px; line-height: 20px; color: var(--mp-mute); }

/* Значок-кружок вендора 44. */
.mp__logo {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #e2eaff;
	color: var(--mp-blue);
	font-size: 22px;
	line-height: 1;
	font-weight: 700;
}
.mp__logo--amo { background: #1e6fff; color: #fff; }
.mp__logo--b24 { background: #2fc6f6; color: #fff; font-size: 15.84px; }
.mp__logo--tg { background: var(--mp-tg); color: #fff; }

/* Кнопки-пилюли радиус 22: заливка (главная), Telegram, контур. */
.mp__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	border: 0;
	border-radius: 22px;
	font-family: inherit;
	font-size: 15px;
	line-height: 20px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.mp__pill--main { background: var(--mp-blue); color: #fff; }
.mp__pill--main:hover { background: var(--mp-blue-dark); color: #fff; }
.mp__pill--tg { background: var(--mp-tg); color: #fff; }
.mp__pill--tg:hover { background: #1c88bb; color: #fff; }
.mp__pill--ghost { padding: 9px 19px; border: 1px solid #c7d3f0; background: #fff; color: var(--mp-blue); }
.mp__pill--ghost:hover { background: var(--mp-tint); color: var(--mp-blue-dark); }
.mp__offer .mp__pill, .mp__mgracts .mp__pill { padding: 12px 20px; }
.mp__offer .mp__pill--ghost, .mp__mgracts .mp__pill--ghost { padding: 11px 19px; }
.mp__offer .mp__pill { width: 100%; }

/* ── Карточки лицензий (Л2) ─────────────────────────────────────────────────────────────────────── */

.mp__list { display: flex; flex-direction: column; gap: 16px; }

.mp__order { display: flex; flex-direction: column; gap: 16px; padding: 24px; }

.mp__top { display: flex; align-items: flex-start; gap: 16px; }
.mp__what-line { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mp__meta { font-size: 12px; line-height: 16px; color: var(--mp-faint); }
.mp__line { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.mp__line + .mp__line { margin-top: 8px; }
.mp__item { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; color: var(--mp-ink); }
.mp__sub { margin: 0; font-size: 14px; line-height: 20px; color: var(--mp-mute); }
.mp__note { margin: 0; font-size: 14px; line-height: 20px; color: var(--mp-mute); }

/* Адрес аккаунта со значком «скопировать». */
.mp__acc {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px;
	border: 1px solid var(--mp-line);
	border-radius: 8px;
	background: #f5f7fb;
	font-size: 13px;
	line-height: 18px;
	font-weight: 500;
	color: var(--mp-ink);
}
.mp__copy { position: relative; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--mp-faint); cursor: pointer; }
.mp__copy:hover { color: var(--mp-blue); }
.mp__copy.is-done { color: #16a34a; }

.mp__sum { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.mp__sum b { font-size: 22px; line-height: 28px; font-weight: 700; white-space: nowrap; color: var(--mp-ink); }
.mp__sum small { font-size: 12px; line-height: 16px; color: var(--mp-faint); }

/* Чип состояния: точка 8 + подпись 12 жирным (серый «оплачен по счёту» — без точки). */
.mp__chip {
	--dot: #16a34a;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 12px;
	background: #e5e7eb;
	color: #374151;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	white-space: nowrap;
}
.mp__chip:not(.mp__chip--off)::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.mp__chip--ok   { background: #dcfce7; color: #166534; --dot: #16a34a; }
.mp__chip--soon { background: #fef3c7; color: #92400e; --dot: #f59e0b; }
.mp__chip--wait { background: #ffedd5; color: #c2410c; --dot: #ea580c; }
.mp__chip--bad  { background: #fee2e2; color: #991b1b; --dot: #dc2626; }
.mp__chip--off  { background: #e5e7eb; color: #374151; }

/* Жёлтая плашка («скоро кончится») и красная у входа (Т4): одна форма. */
.mp__alert {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid #fcd34d;
	border-radius: 12px;
	background: #fef3c7;
	color: #92400e;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
}

/* Полоса срока: подписи 13, дорожка 8 с радиусом 4. */
.mp__term { display: flex; flex-direction: column; gap: 8px; }
.mp__termtxt { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; font-size: 13px; line-height: 18px; color: var(--mp-mute); }
.mp__termtxt b { font-weight: 600; color: var(--mp-ink); }
.mp__term--soon .mp__termtxt b { color: #92400e; }
.mp__term--bad .mp__termtxt b { color: #991b1b; }
.mp__term--off .mp__termtxt b { color: var(--mp-mute); }
.mp__track { height: 8px; border-radius: 4px; background: #e8edf7; overflow: hidden; }
.mp__track i { display: block; height: 100%; border-radius: 4px; background: #16a34a; }
.mp__term--soon .mp__track i { background: #f59e0b; }
.mp__term--bad .mp__track i { background: #dc2626; }

.mp__acts { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.mp__acts form { margin: 0; }

.mp__none { margin: 0; padding: 24px; text-align: center; color: var(--mp-mute); }

/* ── Правая колонка ─────────────────────────────────────────────────────────────────────────────── */

.mp__side { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.mp__side h2 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--mp-ink); }

.mp__mgrwho { display: flex; align-items: center; gap: 14px; }
.mp__mgrava {
	flex: none;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid #d2defa;
	border-radius: 50%;
	background: var(--mp-tint);
	color: var(--mp-blue);
}
.mp__mgrwho b { display: block; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--mp-ink); }
.mp__mgrwho span { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--mp-mute); }
.mp__mgracts { display: flex; gap: 12px; }
.mp__mgracts .mp__pill { flex: 1; min-width: 0; }
.mp__mgrtel { margin: 0; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--mp-mute); }

/* Счета и документы: пустой вид и список заказов со ссылкой на страницу заказа. */
.mp__docs { gap: 8px; }
.mp__docs-empty { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.mp__docs-empty p { flex: 1; margin: 0; font-size: 14px; line-height: 20px; color: var(--mp-mute); }
.mp__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #f1f4fa; color: var(--mp-mute); }
.mp__doclist { list-style: none; margin: 0; padding: 0; }
.mp__doclist li { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.mp__doclist li + li { border-top: 1px solid var(--mp-line); }
.mp__doclist li > div { flex: 1; min-width: 0; }
.mp__doclist b { display: block; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--mp-ink); }
.mp__doclist span { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--mp-mute); }
.mp__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; }
.mp__dot--ok { background: #16a34a; }
.mp__dot--soon { background: #f59e0b; }
.mp__dot--wait { background: #ea580c; }
.mp__dot--bad { background: #dc2626; }
.mp__dl {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--mp-line);
	border-radius: 50%;
	background: #f5f7fb;
	color: var(--mp-blue);
}
.mp__dl:hover { background: var(--mp-tint); }

.mp__how ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.mp__how li { display: flex; align-items: center; gap: 12px; }
.mp__how i {
	flex: none;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--mp-tint);
	color: var(--mp-blue);
	font-size: 14px;
	line-height: 18px;
	font-style: normal;
	font-weight: 700;
}
.mp__how span { flex: 1; font-size: 14px; line-height: 20px; color: var(--mp-ink); }

/* ── Л0: «Что здесь будет» — три выгоды карточками ─────────────────────────────────────────────── */

.mp__what { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.mp__what li { display: flex; align-items: center; gap: 16px; padding: 20px; }
.mp__what i {
	flex: none;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--mp-tint);
	color: var(--mp-blue);
}
.mp__what span { flex: 1; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--mp-ink); }

/* ── Л0 (М1 / М2): вход по SMS — запасной вид, пока Telegram у сайта не включён ─────────────────── */

.mp__login { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 40px; }
.mp__login h2 { margin: 0; font-size: 30px; line-height: 38px; font-weight: 700; color: var(--mp-ink); }
.mp__login .mp__lead { margin: 0; font-size: 16px; line-height: 26px; }
.mp__login .mp__small { margin: 0; }
.mp__login form { margin: 0; }
.mp__login label { display: block; margin: 16px 0 6px; font-size: 14px; color: var(--mp-mute); }

.mp__phone {
	display: flex;
	align-items: center;
	border: 1px solid #d1d5db;
	border-radius: 12px;
	background: #fff;
}
.mp__phone:focus-within, .mp__input:focus { border-color: var(--mp-blue); outline: 2px solid #bfdbfe; }
.mp__prefix { padding: 0 14px; font-size: 17px; font-weight: 500; border-right: 1px solid var(--mp-line); line-height: 28px; }
.mp__phone input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	padding: 14px;
	font: inherit;
	font-size: 17px;
	outline: none;
}

.mp__input {
	width: 100%;
	padding: 14px;
	border: 1px solid #d1d5db;
	border-radius: 12px;
	font: inherit;
	font-size: 17px;
}
.mp__input--code { letter-spacing: 6px; font-size: 22px; }

.mp__sent { margin: 0; color: var(--mp-mute); }
.mp__sent a { color: var(--mp-blue); }

.mp__err { margin: 0; padding: 10px 14px; border-radius: 10px; background: #fef2f2; color: #991b1b; font-size: 14px; }

/* ── Т1–Т4: вход через Telegram (макет «Вход через Telegram · 26.10», кадры Т1–Т4; вид — Л0) ────────── */

/* Кнопка Telegram: #229ED9 с белым самолётиком и белым текстом, высота 56, радиус 28. */
.mp__btn--tg { gap: 10px; background: var(--mp-tg); border-color: var(--mp-tg); color: #fff; }
.mp__btn--tg:hover { background: #1c88bb; border-color: #1c88bb; color: #fff; }
.mp__btn--tg svg { flex: none; }
.mp__tg .mp__btn--wide { margin: 0; min-height: 56px; border-radius: 28px; font-size: 17px; }

.mp__tgnew { display: flex; flex-direction: column; gap: 28px; }

/* Разделитель «или с телефона» и QR 192×192 той же ссылки, подпись справа. */
.mp__or { display: flex; align-items: center; gap: 16px; margin: 0; color: var(--mp-faint); font-size: 13px; line-height: 16px; }
.mp__or::before, .mp__or::after { content: ""; flex: 1; border-top: 1px solid var(--mp-line); }
.mp__qrbox { display: flex; align-items: center; gap: 32px; }
/* Белый фон самой картинки QR прозрачный: модули лежат на сером, как в макете; «тихая зона» вокруг них — из самой картинки. */
.mp__qr { flex: none; width: 192px; height: 192px; overflow: hidden; border: 1.2px solid #d1d5db; border-radius: 10px; background: #f3f4f6; }
.mp__qr svg { display: block; width: 100%; height: 100%; }
.mp__qr svg rect { fill: transparent; }
.mp__qrtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.mp__qrhint { margin: 0; font-size: 17px; line-height: 26px; font-weight: 600; color: var(--mp-ink); }
.mp__qrtext .mp__small { margin: 0; font-size: 14px; line-height: 20px; }
.mp__qrtext .mp__small a { color: inherit; text-decoration: none; }

/* Т2: три шага и ожидание. */
.mp__steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 14px; }
.mp__steps li { display: flex; gap: 14px; align-items: center; }
.mp__steps i {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #dbeafe;
	color: var(--mp-blue);
	font-style: normal;
	font-weight: 700;
	display: grid;
	place-items: center;
}
.mp__steps a { color: var(--mp-blue); text-decoration: none; }
.mp__steps a:hover { text-decoration: underline; }

.mp__wait { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; font-size: 15px; color: var(--mp-mute); }
.mp__wait i {
	width: 16px;
	height: 16px;
	border: 2px solid #bfdbfe;
	border-top-color: var(--mp-blue);
	border-radius: 50%;
	animation: mp-spin .9s linear infinite;
}
@keyframes mp-spin { to { transform: rotate(360deg); } }
.mp__row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.mp__row--left { justify-content: flex-start; gap: 24px; margin: 14px 0 0; }

/* ── Узкий экран: макет рисовали под ПК, здесь страница лишь не должна ломаться ─────────────────── */

@media (max-width: 1100px) {
	.mp__grid { grid-template-columns: minmax(0, 1fr); }
	.mp__aside { align-self: stretch; }
	.mp__hello { flex-wrap: wrap; }
	.mp__side-top { width: 100%; align-items: flex-start; }
	.mp__stats { flex-wrap: wrap; }
	.mp__offers { flex-direction: column; }
}

@media (max-width: 860px) {
	.mp__stack { display: none; }
	.mp__top { flex-wrap: wrap; }
	.mp__sum { align-items: flex-start; }
	.mp__qrbox { flex-direction: column; align-items: flex-start; }
	.mp__login, .mp__side, .mp__order { padding: 22px 20px; }
}