/* GOLDEN KEY — App screens: login.html, cabinet.html, subscription.html. Только токены. */

.app { min-height: 100dvh; display: flex; flex-direction: column; }
.app main { flex: 1; padding: var(--s-6) 0 var(--s-16); }
.has-tabbar main { padding-bottom: calc(var(--tabbar-h) + var(--bar-gap) + env(safe-area-inset-bottom) + var(--s-10)); }
@media (min-width: 834px) { .has-tabbar main { padding-bottom: var(--s-20); } }

/* Large title (iOS) */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.page-head h1 { font-size: var(--fs-large-title); line-height: var(--lh-large-title); letter-spacing: var(--ls-large-title); font-weight: var(--w-bold); }
.page-head p { color: var(--label-2); font-size: var(--fs-subhead); margin-top: 2px; }
@media (min-width: 834px) { .page-head h1 { font-size: 40px; line-height: 46px; letter-spacing: -0.025em; } }

.group { margin-top: var(--s-8); }
.group:first-child { margin-top: 0; }

/* Аватар */
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); color: var(--gold-text); display: grid; place-items: center; font-weight: var(--w-semibold); font-size: 15px; flex: none; }

/* ---------- STATUS CARD (кабинет) ---------- */
.status { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: var(--s-5); background: var(--surface-1); }
.status::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 70% at 100% 0%, rgba(255,196,20,.20), transparent 60%); }
.status.is-expired::before { background: radial-gradient(90% 70% at 100% 0%, rgba(255,255,255,.06), transparent 60%); }
.status-top { position: relative; display: flex; gap: var(--s-4); align-items: flex-start; }
.status-top .grow { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.status-top .mascot { width: 76px; margin: -6px -4px -10px 0; flex: none; }
.status-top video.mascot { width: 128px; height: 128px; margin: -22px -26px -30px -20px; }
.status h2 { font-size: var(--fs-title-1); line-height: var(--lh-title-1); letter-spacing: var(--ls-title-1); font-weight: var(--w-bold); }
.status .sub { color: var(--label-2); font-size: var(--fs-subhead); }
.status .progress { margin-top: var(--s-4); position: relative; }
.status .progress-meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: var(--fs-footnote); color: var(--label-2); position: relative; }
.status .actions { position: relative; margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
@media (min-width: 734px) { .status { padding: var(--s-8); } .status-top .mascot { width: 84px; margin: -12px 0 -24px 0; }
  .status-top video.mascot { width: 150px; height: 150px; margin: -30px -30px -40px -20px; } .status h2 { font-size: 34px; line-height: 40px; } }

/* Быстрые действия: 3 плитки под главной кнопкой */
.quick { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s-2); }
.quick a, .quick button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 72px; padding: 10px 6px; border-radius: var(--r-md); background: var(--fill-3);
  font-size: var(--fs-footnote); font-weight: var(--w-medium); color: var(--label); text-align: center;
  transition: transform var(--d-press) var(--ease-ios), background var(--d-fast);
}
.quick .i { font-size: 24px; color: var(--gold-text); }
.quick a:active, .quick button:active { transform: scale(.96); background: var(--fill-1); }
@media (hover: hover) { .quick a:hover, .quick button:hover { background: var(--fill-2); } }

/* Мини-прогресс в строке списка */
.row-meter { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.row-meter .progress { height: 4px; }

/* LTE-строка: остаток + «Докупить» всегда под рукой */
.lte-row .lte-add { flex: none; margin-left: 2px; gap: 4px; padding: 0 12px; }
.lte-row .lte-add .i { font-size: 13px; }
.lte-row.is-low .progress > i { background: var(--orange); }
.lte-row.is-low #lte-val { color: var(--orange); }
.c-orange-t { color: var(--orange); font-weight: var(--w-semibold); }
.progress > i { transition: width var(--d-sheet) var(--ease-ios), background var(--d-fast); }

/* ---------- REVIEW BAR (только для макета) ---------- */
.review { margin: 0 auto var(--s-6); display: flex; align-items: center; justify-content: center; gap: var(--s-3); flex-wrap: wrap; padding: 10px; border-radius: var(--r-lg); border: 1px dashed rgba(255,255,255,.18); }
.review span { font-size: var(--fs-caption); color: var(--label-3); }

/* ---------- AUTH ---------- */
.auth { min-height: 100dvh; display: flex; flex-direction: column; }
.auth main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: var(--s-6) var(--page-margin) var(--s-12); }
.auth-card { margin: auto 0; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--s-5); }
.auth-card .mascot { width: 128px; height: 128px; margin: -8px auto -16px; }
@media (min-width: 734px) { .auth-card .mascot { width: 150px; height: 150px; } }
.auth-card h1 { text-align: center; font-size: var(--fs-title-1); line-height: var(--lh-title-1); letter-spacing: var(--ls-title-1); }
.auth-card .lead { text-align: center; color: var(--label-2); font-size: var(--fs-callout); margin-top: -10px; }
.divider { display: flex; align-items: center; gap: var(--s-3); color: var(--label-3); font-size: var(--fs-footnote); }
.divider::before, .divider::after { content: ""; flex: 1; height: 0.5px; background: var(--separator); }
.plan-context { display: flex; align-items: center; gap: var(--s-3); padding: 12px 14px; border-radius: var(--r-md); background: var(--gold-tint); font-size: var(--fs-subhead); }
.plan-context .i { color: var(--gold-text); font-size: 20px; }
.legal { text-align: center; font-size: var(--fs-caption); line-height: 1.45; color: var(--label-3); }
.legal a { color: var(--label-2); text-decoration: underline; text-underline-offset: 2px; }

/* OTP: 6 ячеек */
.otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.otp input {
  height: 58px; width: 100%; text-align: center; border: 0; outline: none; border-radius: var(--r-md);
  background: var(--surface-2); font-size: 24px; font-weight: var(--w-semibold); font-variant-numeric: tabular-nums;
  transition: box-shadow var(--d-fast);
}
.otp input:focus { box-shadow: inset 0 0 0 1.5px var(--gold); }
.back-btn { display: inline-flex; align-items: center; gap: 2px; color: var(--gold-text); font-size: var(--fs-body); min-height: var(--tap); padding-right: 8px; }
.back-btn .i { font-size: 18px; }

/* ---------- SUBSCRIPTION (Remnawave) ---------- */
.sub-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.sub-layout > * { min-width: 0; }
@media (min-width: 1068px) { .sub-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-8); align-items: start; } .sub-aside { position: sticky; top: calc(var(--nav-h) + 24px); } }
.sub-status { display: flex; align-items: center; gap: var(--s-3); padding: 14px var(--s-4); border-radius: var(--r-lg); background: var(--surface-1); }
.sub-status .grow b { display: block; font-size: var(--fs-headline); }
.sub-status .grow span { display: block; font-size: var(--fs-footnote); color: var(--label-2); }
.sub-status .stat { text-align: right; font-size: var(--fs-footnote); color: var(--label-2); }
.sub-status .stat b { display: block; color: var(--label); font-size: var(--fs-headline); font-variant-numeric: tabular-nums; }

.platform-pick { overflow-x: auto; margin: 0 calc(var(--page-margin) * -1); padding: 0 var(--page-margin); scrollbar-width: none; }
.platform-pick::-webkit-scrollbar { display: none; }
.platform-pick .segmented { min-width: 100%; }
.platform-pick .segmented button .i { font-size: 15px; }
@media (max-width: 440px) { .platform-pick .segmented button { padding: 0 8px; font-size: var(--fs-footnote); } .platform-pick .segmented button .i { display: none; } }

/* Шаги — таймлайн: номер, линия-связка, без подсветки фоном */
.steps-card { border-radius: var(--r-xl); background: var(--surface-1); padding: var(--s-2) var(--s-2); }
.sstep { display: grid; grid-template-columns: 28px 1fr; gap: 4px var(--s-4); padding: var(--s-5) var(--s-4); position: relative; }
.sstep:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--s-4) + 13px); top: calc(var(--s-5) + 34px); bottom: calc(var(--s-5) * -1 + 6px); width: 2px; border-radius: 1px; background: var(--fill-3); }
.sstep.is-done:not(:last-child)::after { background: var(--green); opacity: .5; }
.sstep h3 { font-size: var(--fs-headline); line-height: 28px; font-weight: var(--w-semibold); }
.sstep p { grid-column: 2; color: var(--label-2); font-size: var(--fs-subhead); line-height: var(--lh-subhead); }
.sstep .act { grid-column: 2; margin-top: var(--s-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.sstep .act .btn-primary { min-width: 260px; }
.sstep.is-upcoming h3 { color: var(--label-2); }
.app-chip { display: inline-flex; align-items: center; gap: 10px; }
.app-chip img { width: 40px; height: 40px; border-radius: 10px; }
.app-chip b { display: block; font-size: var(--fs-subhead); }
.app-chip span { display: block; font-size: var(--fs-caption); color: var(--label-2); }
@media (max-width: 520px) { .sstep .act .btn, .sstep .act .store-btn { width: 100%; justify-content: center; } .sstep .act .btn-primary { min-width: 0; } }

.store-btn { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px 0 14px; border-radius: var(--r-md); background: #fff; color: #000; font-weight: var(--w-semibold); font-size: 16px; transition: transform var(--d-press) var(--ease-ios); }
.store-btn:active { transform: scale(var(--press-scale)); }
.store-btn .i { font-size: 24px; }
.store-btn small { display: block; font-size: 11px; font-weight: var(--w-medium); line-height: 1; opacity: .7; }
.store-btn span { line-height: 1.1; text-align: left; }

.app-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; font-weight: var(--w-bold); font-size: 17px; color: #fff; }
.qr-box { background: #fff; border-radius: var(--r-lg); padding: 16px; width: 100%; max-width: 240px; aspect-ratio: 1; margin: 0 auto; }
.qr-box svg { width: 100%; height: 100%; }
.qr-card { text-align: center; display: flex; flex-direction: column; gap: var(--s-4); align-items: center; }

/* =====================================================================
   WIZARD подключения (subscription.html)
   Принцип Duolingo: если нужно читать — UI сделан неправильно.
   На экране всегда ОДИН шаг: картинка → 2–4 слова → одна кнопка.
   ===================================================================== */
.wizard { position: relative; border-radius: var(--r-xl); background: var(--surface-1); padding: var(--s-5) var(--s-5) var(--s-6); overflow: hidden; }
.wz-top { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); min-height: 32px; }
.wz-progress { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wz-progress i { height: 4px; border-radius: 2px; background: var(--fill-3); overflow: hidden; position: relative; }
.wz-progress i::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--d-sheet) var(--ease-ios); }
.wz-progress i.is-on::after { transform: none; }
.wz-progress i.is-done::after { transform: none; background: var(--green); }
.wz-count { font-size: var(--fs-footnote); color: var(--label-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wz-back { width: 32px; height: 32px; border-radius: 50%; background: var(--fill-3); color: var(--label-2); display: grid; place-items: center; font-size: 13px; position: relative; flex: none; transition: opacity var(--d-fast); }
.wz-back::after { content: ""; position: absolute; inset: -6px; }
.wz-back[hidden] { display: grid !important; visibility: hidden; }

.wz-step { display: none; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); padding-top: var(--s-2); }
.wz-step.is-on { display: flex; animation: wzIn 420ms var(--ease-ios) both; }
@keyframes wzIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.wizard.is-back .wz-step.is-on { animation-name: wzBack; }
@keyframes wzBack { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.wz-step h2 { font-size: var(--fs-title-1); line-height: var(--lh-title-1); letter-spacing: var(--ls-title-1); font-weight: var(--w-bold); margin-top: var(--s-2); }
.wz-step .sub { color: var(--label-2); font-size: var(--fs-callout); line-height: 1.4; max-width: 30ch; }
.wz-step .sub b { color: var(--label); font-weight: var(--w-semibold); }
.wz-actions { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.wz-actions .btn { width: 100%; }
.wz-actions .btn-plain { min-height: var(--tap); }

/* Визуалы шагов */
.wz-visual { height: 172px; width: 100%; display: grid; place-items: center; position: relative; }
.wz-visual::before { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,196,20,.16), transparent); }
.wz-app { position: relative; width: 104px; height: 104px; border-radius: 24px; box-shadow: 0 18px 40px rgba(0,0,0,.5), inset 0 0 0 .5px rgba(255,255,255,.12); }
.wz-free { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); }

/* Шаг 2: ключ → приложение */
.wz-flow { position: relative; display: flex; align-items: center; gap: 14px; }
.wz-flow .tile { width: 80px; height: 80px; border-radius: 19px; display: grid; place-items: center; flex: none; box-shadow: 0 14px 30px rgba(0,0,0,.5); }
.wz-flow .tile.gk { background: var(--gold); color: var(--on-gold); }
.wz-flow .tile.gk svg { width: 50px; height: 50px; fill: currentColor; }
.wz-flow img.tile { box-shadow: 0 14px 30px rgba(0,0,0,.5), inset 0 0 0 .5px rgba(255,255,255,.12); }
.wz-flow .cap { position: absolute; top: calc(100% + 10px); font-size: var(--fs-caption); color: var(--label-2); width: 80px; text-align: center; }
.wz-dots { display: flex; gap: 6px; }
.wz-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); opacity: .25; animation: wzDot 1.4s var(--ease-in-out) infinite; }
.wz-dots i:nth-child(2) { animation-delay: .18s; } .wz-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes wzDot { 0%, 100% { opacity: .25; transform: scale(.85); } 40% { opacity: 1; transform: scale(1.1); } }

/* Шаг 3: мини-экран INCY с большой кнопкой */
.wz-phone { position: relative; width: 132px; height: 164px; border-radius: 28px; background: #0B0B0C; box-shadow: inset 0 0 0 1.5px #2C2C2E, 0 18px 40px rgba(0,0,0,.5); display: grid; place-items: center; }
.wz-phone .pw { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: var(--gold); color: var(--on-gold); box-shadow: 0 0 0 9px rgba(255,196,20,.10), 0 0 40px rgba(255,196,20,.45); }
.wz-phone .tap { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.85); left: 50%; top: 50%; margin: 6px 0 0 4px; animation: wzTap 2s var(--ease-out) infinite; }
@keyframes wzTap { 0% { transform: scale(1.4); opacity: 0; } 25% { transform: scale(1); opacity: .9; box-shadow: 0 0 0 0 rgba(255,255,255,.35); } 50% { box-shadow: 0 0 0 14px rgba(255,255,255,0); } 75%, 100% { opacity: 0; } }
.wz-phone .lbl { position: absolute; top: 12px; left: 0; right: 0; font-size: 10px; font-weight: var(--w-semibold); color: var(--label-3); letter-spacing: .06em; }

/* Кнопки сторов (официальные бейджи) */
.store-badge { display: inline-flex; height: 56px; border-radius: 12px; transition: transform var(--d-press) var(--ease-ios), opacity var(--d-fast); }
.store-badge img { height: 100%; width: auto; }
.store-badge:active { transform: scale(var(--press-scale)); }
@media (hover: hover) { .store-badge:hover { opacity: .88; } }
.store-badge.is-custom { align-items: center; gap: 10px; padding: 0 20px 0 16px; background: #fff; color: #000; font-weight: var(--w-semibold); font-size: 17px; }
.store-badge.is-custom .i { font-size: 24px; }
.store-badge.is-custom small { display: block; font-size: 11px; font-weight: var(--w-medium); opacity: .65; line-height: 1; }
.store-badge.is-custom span { line-height: 1.15; text-align: left; }

/* «Получилось?» после deeplink */
.wz-check { width: 100%; max-width: 360px; display: none; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface-2); }
.wz-check.is-on { display: flex; animation: wzIn 360ms var(--ease-ios) both; }
.wz-check .row { gap: var(--s-2); }
.wz-check .row .btn { flex: 1; }
.wz-help { width: 100%; max-width: 360px; display: none; flex-direction: column; gap: var(--s-3); text-align: left; padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface-2); }
.wz-help.is-on { display: flex; animation: wzIn 360ms var(--ease-ios) both; }
.wz-help ol { margin: 0; padding-left: 20px; color: var(--label-2); font-size: var(--fs-subhead); line-height: 1.5; }
.wz-help ol b { color: var(--label); }

/* Финал */
.wz-done video { width: 200px; height: 200px; margin: -20px auto -24px; }

/* Ссылка «Что такое INCY?» и альтернативы под мастером */
.wz-links { display: flex; justify-content: center; gap: var(--s-2) var(--s-5); flex-wrap: wrap; }
.wz-links button, .wz-links a { min-height: var(--tap); display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-subhead); color: var(--label-2); }
.wz-links .i { font-size: 16px; color: var(--label-3); }
@media (hover: hover) { .wz-links button:hover, .wz-links a:hover { color: var(--label); } }

/* Объяснялка «ключ + приложение» (шит) */
.explain { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: var(--s-3); text-align: center; margin: var(--s-2) 0 var(--s-5); }
.explain .it { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.explain .it .tile { width: 64px; height: 64px; border-radius: 15px; display: grid; place-items: center; }
.explain .it .tile.gk { background: var(--gold); color: var(--on-gold); }
.explain .it .tile.gk svg { width: 40px; height: 40px; fill: currentColor; }
.explain .it b { font-size: var(--fs-subhead); }
.explain .it span { font-size: var(--fs-footnote); color: var(--label-2); line-height: 1.3; }
.explain .plus { font-size: 26px; color: var(--label-3); padding-top: 18px; font-weight: var(--w-bold); }
.analogy { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface-2); font-size: var(--fs-subhead); line-height: 1.4; color: var(--label-2); }
.analogy b { color: var(--label); }
.analogy .i { font-size: 28px; color: var(--gold); flex: none; }
@media (min-width: 734px) { .wizard { padding: var(--s-6) var(--s-8) var(--s-8); } .wz-visual { height: 196px; } }

/* =====================================================================
   CHECKOUT (checkout.html) — паттерн российского финтеха:
   сумма → почта → [СБП] [Карта]. Без регистрации и паролей: пароль придёт на почту.
   ===================================================================== */
.co-card { margin: auto 0; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: var(--s-5); }
.co-summary { border-radius: var(--r-xl); background: var(--surface-1); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.co-summary .top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.co-summary .name { font-size: var(--fs-headline); font-weight: var(--w-semibold); }
.co-summary .desc { font-size: var(--fs-footnote); color: var(--label-2); margin-top: 2px; }
.co-summary .price { font-size: 40px; line-height: 1; font-weight: var(--w-bold); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.co-summary .after { font-size: var(--fs-footnote); color: var(--label-2); margin-top: 6px; }
.co-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.co-plans button { height: 52px; border-radius: 12px; background: var(--fill-4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: var(--fs-footnote); font-weight: var(--w-semibold); color: var(--label-2); transition: background var(--d-fast), box-shadow var(--d-fast), color var(--d-fast); }
.co-plans button small { font-size: 11px; font-weight: var(--w-regular); color: var(--label-3); font-variant-numeric: tabular-nums; }
.co-plans button[aria-pressed="true"] { background: var(--gold-tint); color: var(--label); box-shadow: inset 0 0 0 1.5px var(--gold); }
.co-plans button[aria-pressed="true"] small { color: var(--gold-text); }
.co-pay { display: flex; flex-direction: column; gap: var(--s-2); }
.pay-btn { --h: 56px; height: var(--h); border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 17px; font-weight: var(--w-semibold); letter-spacing: var(--ls-headline); width: 100%; position: relative; transition: transform var(--d-press) var(--ease-ios), background var(--d-fast); }
.pay-btn:active { transform: scale(var(--press-scale)); }
.pay-btn img { height: 24px; width: auto; flex: none; }
.pay-sbp { background: #FFFFFF; color: #000; }
.pay-sbp:active { background: #E9E9EB; }
.pay-card { background: var(--gold); color: var(--on-gold); }
.pay-card:active { background: var(--gold-pressed); }
.pay-card .i { font-size: 24px; }
@media (hover: hover) { .pay-sbp:hover { background: #F2F2F4; } .pay-card:hover { background: var(--gold-hover); } }
.pay-btn.is-loading { color: transparent !important; pointer-events: none; }
.pay-btn.is-loading > * { visibility: hidden; }
.pay-btn.is-loading::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2px solid; border-color: #000 transparent #000 #000; animation: spin .7s linear infinite; }
.pay-methods { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: var(--fs-caption); color: var(--label-3); }
.pay-methods img { height: 12px; width: auto; opacity: .9; }
.co-note { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-footnote); color: var(--label-2); line-height: 1.4; padding: 0 4px; }
.co-note .i { font-size: 18px; color: var(--gold-text); margin-top: 1px; }
.co-done { text-align: center; align-items: center; }
.co-done video { width: 200px; height: 200px; margin: -24px auto -28px; }
.co-done .mail { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-md); background: var(--surface-1); font-size: var(--fs-subhead); }
.co-done .mail .i { color: var(--gold-text); font-size: 18px; }

/* =====================================================================
   «НЕ ТЕРЯЙТЕ НАС» — кабинет на экран «Домой» (assets/js/pwa.js)
   ===================================================================== */
.install-banner { position: relative; margin-top: var(--s-3); display: flex; align-items: center; gap: 10px; padding: 12px 30px 12px 12px; border-radius: var(--r-lg); background: var(--surface-1); }
.install-banner .app-ico { width: 44px; height: 44px; border-radius: 10px; background: var(--gold); color: var(--on-gold); display: grid; place-items: center; flex: none; }
.install-banner .app-ico svg { width: 28px; height: 28px; fill: currentColor; }
.install-banner b { display: block; white-space: nowrap; font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-semibold); }
.install-banner .grow span { display: block; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.install-banner .btn { flex: none; }
.ib-close { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; color: var(--label-3); display: grid; place-items: center; font-size: 10px; }
.ib-close::after { content: ""; position: absolute; inset: -9px; }
@media (hover: hover) { .ib-close:hover { color: var(--label-2); } }

/* Шит-инструкция: цель в картинке (иконка среди приложений) + 3 шага-«кнопки» как в системе */
.hs-demo { display: grid; grid-template-columns: repeat(4, 56px); justify-content: center; gap: 0 18px; padding: 20px 0 16px; margin-bottom: var(--s-4); border-radius: var(--r-lg);
  background: radial-gradient(60% 90% at 86% 40%, rgba(255,196,20,.20), transparent 70%), linear-gradient(160deg, #222226, #131315); overflow: hidden; }
.hs-demo .hs-app { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hs-demo .hs-app i { width: 56px; height: 56px; border-radius: 14px; background: rgba(255,255,255,.10); display: grid; place-items: center; }
.hs-demo .hs-app small { font-size: 10px; line-height: 12px; color: var(--label-2); white-space: nowrap; }
.hs-demo .ours i { background: var(--gold); color: var(--on-gold); animation: hsPop 3.2s var(--ease-out) infinite; }
.hs-demo .ours svg { width: 34px; height: 34px; fill: currentColor; }
.hs-demo .ours small { color: var(--label); font-weight: var(--w-semibold); }
@keyframes hsPop { 0%, 8% { transform: scale(.3); opacity: 0; } 22% { transform: scale(1.1); opacity: 1; } 30%, 100% { transform: scale(1); opacity: 1; } }
.hs-steps { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hs-steps li { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 9px 8px 12px; border-radius: 16px; background: var(--surface-2); }
.hs-steps .n { width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--on-gold); font-size: 13px; font-weight: var(--w-bold); display: grid; place-items: center; flex: none; }
.hs-steps .what { font-size: var(--fs-subhead); color: var(--label-2); white-space: nowrap; }
.hs-steps .keys { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.hs-steps .keys[hidden] { display: none; }
.hs-steps .k { min-width: 40px; height: 40px; padding: 0 9px; border-radius: 12px; background: var(--surface-3); color: var(--blue); display: inline-grid; place-items: center; font-size: 22px; font-weight: var(--w-semibold); }
.hs-steps .k-wide { font-size: 15px; color: var(--label); }
.hs-steps .k .i { font-size: 22px; }
.hs-steps .then { color: var(--label-3); font-size: 12px; }
.hs-steps .plus { color: var(--label-3); font-weight: var(--w-semibold); }
.hs-steps .ios-row { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 12px; background: var(--surface-3); font-size: var(--fs-subhead); color: var(--label); white-space: nowrap; }
.hs-steps .ios-row .i { font-size: 20px; }
.hs-steps .ios-add { margin-left: auto; height: 40px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 12px; background: var(--surface-3); color: var(--blue); font-weight: var(--w-semibold); }
@media (max-width: 370px) { .hs-steps .what { display: none; } }

/* Коучмарк: стрелка на кнопку браузера (⋯ / ⬆) */
.coach { position: fixed; z-index: 130; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--gold); opacity: 0; pointer-events: none; transition: opacity var(--d-fast), transform var(--d-sheet) var(--ease-ios); }
.coach.is-on { opacity: 1; pointer-events: auto; }
.coach .bubble { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 7px 0 16px; border-radius: 22px; background: var(--gold); color: var(--on-gold); font-weight: var(--w-semibold); font-size: var(--fs-subhead); box-shadow: 0 10px 30px rgba(0,0,0,.55); white-space: nowrap; }
.coach .key { width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.12); display: grid; place-items: center; font-size: 18px; }
.coach .arrow { width: 34px; height: 34px; animation: coachB .9s var(--ease-in-out) infinite alternate; }
@keyframes coachB { to { transform: translateY(8px); } }
.coach.is-bottom-center { left: 50%; bottom: calc(6px + env(safe-area-inset-bottom)); transform: translate(-50%, 16px); }
.coach.is-bottom-center.is-on { transform: translate(-50%, 0); }
.coach.is-bottom-right { right: 10px; bottom: calc(6px + env(safe-area-inset-bottom)); align-items: flex-end; transform: translateY(16px); }
.coach.is-bottom-right .arrow { margin-right: 8px; }
.coach.is-top-right { right: 10px; top: calc(6px + env(safe-area-inset-top)); flex-direction: column-reverse; align-items: flex-end; transform: translateY(-16px); }
.coach.is-top-right .arrow { margin-right: 8px; transform: rotate(180deg); animation-name: coachT; }
@keyframes coachT { from { transform: rotate(180deg); } to { transform: rotate(180deg) translateY(8px); } }
.coach.is-on:not(.is-bottom-center) { transform: none; }

/* =====================================================================
   ДОКУПИТЬ LTE (шит в кабинете): превью «Сейчас → Станет» + 3 пакета
   ===================================================================== */
.tu-preview { padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface-2); margin-bottom: var(--s-5); }
.tu-nums { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: 12px; }
.tu-nums span { display: block; font-size: var(--fs-footnote); color: var(--label-2); }
.tu-nums b { display: block; font-size: 26px; line-height: 30px; font-weight: var(--w-bold); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.tu-nums .is-after { text-align: right; }
.tu-nums .is-after b { color: var(--gold-text); }
.tu-arrow { color: var(--label-3); font-size: 18px; margin-bottom: 6px; }
.tu-bar { display: flex; gap: 3px; height: 10px; }
.tu-bar i { display: block; height: 100%; border-radius: 5px; transition: width var(--d-sheet) var(--ease-ios); min-width: 6px; }
.tu-bar .cur { background: rgba(235,235,245,.55); }
.tu-bar .add { background: var(--gold); }
.tu-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 9px; }
.tu-packs button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 20px 4px 14px; border-radius: 18px; background: var(--surface-2);
  transition: transform var(--d-press) var(--ease-ios), background var(--d-fast), box-shadow var(--d-fast); }
.tu-packs button:active { transform: scale(.96); }
.tu-packs b { font-size: 21px; line-height: 26px; font-weight: var(--w-bold); letter-spacing: -0.025em; }
.tu-packs .pr { font-size: var(--fs-subhead); font-weight: var(--w-semibold); }
.tu-packs small { font-size: 11px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.tu-packs [aria-checked="true"] { background: var(--gold-tint); box-shadow: inset 0 0 0 2px var(--gold); }
.tu-packs [aria-checked="true"] small { color: var(--gold-text); }
.tu-packs .tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); height: 18px; padding: 0 8px; border-radius: 9px; background: var(--gold); color: var(--on-gold); font-size: 10px; font-weight: var(--w-bold); line-height: 18px; white-space: nowrap; }
.tu-packs .tag.is-green { background: var(--green); color: #002A0C; }
.tu-note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--fs-footnote); color: var(--label-2); margin: var(--s-4) 0; }
.tu-note .i { color: var(--gold-text); }

/* =====================================================================
   РЕФЕРАЛКА — тизер в кабинете, попап, страница invite.html
   ===================================================================== */
.invite-teaser { margin-top: var(--s-8); display: flex; align-items: center; gap: var(--s-3); padding: 12px 16px 12px 6px; border-radius: var(--r-lg); overflow: hidden;
  background: radial-gradient(90% 160% at 0% 50%, rgba(255,196,20,.18), transparent 60%), var(--surface-1); transition: transform var(--d-base) var(--ease-ios); }
.invite-teaser:active { transform: scale(var(--press-scale-card)); }
.invite-teaser img { width: 100px; height: auto; margin: -4px -6px -8px 0; flex: none; }
.invite-teaser b { display: block; font-size: var(--fs-headline); line-height: var(--lh-headline); }
.invite-teaser .grow > span { display: block; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); margin-top: 2px; }
.invite-teaser em { font-style: normal; color: var(--gold-text); font-weight: var(--w-semibold); }
.invite-teaser .chev { color: var(--label-3); font-size: 13px; flex: none; }

/* Попап (half-sheet): маскот → 2 строки → одна кнопка, крестик справа сверху */
.sheet-promo { text-align: center; }
.sheet-promo .promo-x { position: absolute; top: 16px; right: 16px; z-index: 1; }
.promo-art { position: relative; width: min(300px, 82%); margin: 0 auto 8px; }
.promo-art::before { content: ""; position: absolute; inset: -10% -20%; background: radial-gradient(closest-side, rgba(255,196,20,.22), transparent); }
.promo-art img { position: relative; width: 100%; }
.sheet-promo p { margin: 10px auto 24px; max-width: 32ch; line-height: 1.4; }
.sheet-promo p b { color: var(--label); font-weight: var(--w-semibold); }
@media (min-width: 734px) { .sheet-promo .promo-x { top: 20px; right: 20px; } }

/* invite.html */
.inv-wrap { max-width: calc(1000px + var(--page-margin) * 2); }
.inv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.inv-grid > .group { margin-top: var(--s-5); }
.inv-hero { position: relative; overflow: hidden; border-radius: var(--r-xl); text-align: center; padding: var(--s-4) var(--s-5) var(--s-6);
  background: radial-gradient(80% 70% at 50% 18%, rgba(255,196,20,.22), transparent 70%), var(--surface-1); }
.inv-hero img { width: min(300px, 80%); margin: 0 auto 6px; }
.inv-hero h2 { font-size: var(--fs-title-1); line-height: var(--lh-title-1); letter-spacing: var(--ls-title-1); font-weight: var(--w-bold); text-wrap: balance; }
.inv-hero p { color: var(--label-2); font-size: var(--fs-callout); line-height: 1.4; margin: 10px auto 0; max-width: 34ch; }
.inv-both { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.inv-both .it { border-radius: var(--r-lg); background: var(--surface-1); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 2px; }
.inv-both .who { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-footnote); color: var(--label-2); font-weight: var(--w-semibold); margin-bottom: 6px; }
.inv-both .who .i { color: var(--gold-text); font-size: 15px; }
.inv-both b { font-size: 22px; line-height: 27px; font-weight: var(--w-bold); letter-spacing: -0.025em; color: var(--gold-text); }
.inv-both .it > span:last-child { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.inv-share { border-radius: var(--r-xl); background: var(--surface-1); padding: var(--s-5); display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; }
.inv-share-head b { display: block; font-size: var(--fs-headline); }
.inv-share-head span { display: block; font-size: var(--fs-footnote); color: var(--label-2); margin-top: 2px; }
.inv-qr { max-width: 232px; cursor: zoom-in; transition: transform var(--d-press) var(--ease-ios); margin: 4px auto 6px; padding: 14px; }
.inv-qr:active { transform: scale(.97); }
.inv-share .copy-field { width: 100%; }
.inv-share .copy-field .btn { flex: none; }
.inv-full { font-size: var(--fs-subhead); gap: 6px; margin-bottom: -8px; }
.days { color: var(--gold-text); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.days.is-max { font-size: var(--fs-title-3); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: var(--r-lg); background: var(--surface-1); padding: 16px 0; }
.stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stats > div + div { box-shadow: -0.5px 0 0 var(--separator); }
.stats b { font-size: 28px; line-height: 34px; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stats span { font-size: var(--fs-footnote); color: var(--label-2); }
.how3 { list-style: none; margin: 0; padding: var(--s-5) var(--s-3); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); border-radius: var(--r-lg); background: var(--surface-1); }
.how3 li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.how3 .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--gold-tint); color: var(--gold-text); display: grid; place-items: center; font-size: 20px; margin-bottom: 6px; }
.how3 b { font-size: var(--fs-subhead); line-height: var(--lh-subhead); }
.how3 li > span:last-child { font-size: var(--fs-footnote); color: var(--label-2); }
@media (min-width: 900px) {
  .inv-grid { grid-template-columns: minmax(0, 1fr) 380px; column-gap: var(--s-8); row-gap: var(--s-3); align-items: start; }
  .inv-grid > :not(.inv-share) { grid-column: 1; }
  .inv-share { grid-column: 2; grid-row: 1 / span 6; position: sticky; top: calc(var(--nav-h) + 24px); padding: var(--s-6); }
  .inv-qr { max-width: 260px; }
  .inv-hero { display: grid; grid-template-columns: 1fr 210px; align-items: center; text-align: left; padding: var(--s-8); gap: var(--s-6); }
  .inv-hero img { grid-column: 2; grid-row: 1 / span 2; width: 100%; margin: -10px 0 -20px; }
  .inv-hero h2 { font-size: 30px; line-height: 36px; align-self: end; }
  .inv-hero img { width: 250px; justify-self: end; margin-right: -20px; }
  .inv-hero p { margin: 0; align-self: start; }
}

/* QR на весь экран — «покажите другу» */
.qr-show { position: fixed; inset: 0; z-index: 140; background: #000; display: grid; place-items: center; padding: 24px; overflow: auto; animation: qsIn 320ms var(--ease-ios) both; }
@keyframes qsIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.qs-x { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; width: 36px; height: 36px; font-size: 14px; }
.qs-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; width: 100%; max-width: 420px; }
.qs-mark { width: 52px; height: 52px; border-radius: 13px; margin-bottom: 6px; }
.qs-mark svg { width: 34px; height: 34px; }
.qs-in h2 { font-size: var(--fs-title-2); line-height: var(--lh-title-2); font-weight: var(--w-bold); letter-spacing: var(--ls-title-2); }
.qs-in p { font-size: var(--fs-callout); color: var(--label-2); }
.qs-in p b { color: var(--gold-text); font-weight: var(--w-semibold); }
.qs-qr { max-width: min(78vw, 360px); padding: 20px; border-radius: 30px; margin: 14px auto 10px; box-shadow: 0 0 0 8px rgba(255,196,20,.12), 0 0 80px rgba(255,196,20,.25); }
.qs-hint { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-footnote); color: var(--label-3); }