/* ============================================================================
   Obsidian Gold — поверхность «Кабинет».
   Страницы: dashboard, keys, profile, profile_settings, profile_security,
   profile_link, referral, link_confirm, link_result, error, maintenance.

   Только переменные из tokens.css (прозрачные оттенки — теми же rgba(), что
   заданы в дизайн-хендоффе). Каркас и общие примитивы живут в shell.css и не
   переопределяются без нужды.

   ОГЛАВЛЕНИЕ
   0  Мост legacy-переменных (для разметки, которую рисует общий script.js)
   1  Общие блоки кабинета .cabinet-*
   2  Кольцо остатка дней .sub-ring
   3  Главная .cabinet-dashboard
   4  Подписки .cabinet-keys (карточки, подключение, модалки, обход)
   5  Профиль, настройки, безопасность, привязка Telegram
   6  Реферальная программа
   7  Служебные экраны (ошибка, техработы, результат привязки)
   8  Адаптив: 1280 / 1024 / 768 / 640 / 380
   ============================================================================ */


/* ============================================================================
   0. Мост legacy-переменных
   Старая тема (custom.css) всё ещё грузится, а общий script.js и несколько
   инлайновых скриптов кабинета рисуют разметку со ссылками на её переменные.
   Переопределяем их значениями Obsidian Gold — только внутри своих экранов.
   ============================================================================ */

.cabinet-dashboard,
.cabinet-keys,
.cabinet-profile,
.cabinet-profile-settings,
.cabinet-profile-security,
.cabinet-profile-link,
.cabinet-referral,
.cabinet-message {
  --text-muted: var(--zp-ink-3);
  --text-secondary: var(--zp-ink-2);
  --border-default: var(--zp-hairline);
  --bg-secondary: rgba(255, 255, 255, 0.03);
  --color-primary: var(--zp-gold);
  --color-success: var(--zp-ok-ink);
  --color-warning: var(--zp-warn);
  --color-danger: var(--zp-err-ink);
  --color-info: var(--zp-gold-light);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  display: flex;
  flex-direction: column;
  /* Макет: герой → плитки ровно 14px. Больший шаг до секций добирается
     собственным margin-top у .cabinet-section (см. раздел 1). */
  gap: 14px;
  min-width: 0;

  /* Значения макета «Кабинет», которых нет в tokens.css */
  --zp-hairline-soft: rgba(246, 240, 228, 0.08);
  --zp-cab-rise: 800ms;
}

/* Появление блоков в кабинете: в макете 800ms и старт с translateY(24px)/blur(8px) */
@keyframes zp-cab-rise {
  from { opacity: 0; transform: translateY(24px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Парение знака: в макете ±3deg и подъём на 14px */
@keyframes zp-cab-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-14px) rotate(3deg); }
}

.cabinet-dashboard .zp-rise,
.cabinet-keys .zp-rise {
  animation-name: zp-cab-rise;
  animation-duration: var(--zp-cab-rise);
}

/* Макет: плитки сводки выходят все разом, задержкой 320ms */
.cabinet-dashboard .dashboard-stat-rail .zp-rise-4,
.cabinet-dashboard .dashboard-stat-rail .zp-rise-5,
.cabinet-dashboard .dashboard-stat-rail .zp-rise-6 { animation-delay: 320ms; }

/* Вертикальный ритм экрана задаёт gap контейнера: утилиты .mb-* из разметки
   старой темы здесь удвоили бы отступы между карточками верхнего уровня */
.cabinet-referral > .mb-6,
.cabinet-referral > .card.mb-6,
.cabinet-dashboard > .mb-6,
.cabinet-keys > .mb-6 { margin-bottom: 0; }

/* Бейджи и чипы внутри гибких рядов не сжимаются: у них white-space:nowrap,
   при сжатии текст просто уезжал бы под край карточки */
.cabinet-dashboard .badge,
.cabinet-keys .badge,
.cabinet-keys .chip,
.cabinet-profile .badge,
.cabinet-profile-settings .badge,
.cabinet-profile-link .badge,
.cabinet-referral .badge,
.bypass-state { flex: 0 0 auto; }

/* В кабинете `.badge-dot` — модификатор бейджа (точка перед текстом), а не
   самостоятельная точка, как на лендинге. Возвращаем бейджу его размеры и
   рисуем точку псевдоэлементом; общий .badge-dot из shell.css не трогаем. */
.cabinet-dashboard .badge.badge-dot,
.cabinet-keys .badge.badge-dot {
  width: auto;
  height: auto;
  padding: 4px 11px;
  border: 1px solid var(--zp-hairline);
  border-radius: var(--zp-r-pill);
  background: rgba(255, 255, 255, 0.04);
  color: var(--zp-ink-2);
}

.cabinet-dashboard .badge.badge-dot::before,
.cabinet-keys .badge.badge-dot::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.cabinet-dashboard .badge.badge-dot.badge-success,
.cabinet-keys .badge.badge-dot.badge-success {
  background: var(--zp-ok-bg);
  border-color: var(--zp-ok-line);
  color: var(--zp-ok-ink);
}

.cabinet-dashboard .badge.badge-dot.badge-warning,
.cabinet-keys .badge.badge-dot.badge-warning {
  background: var(--zp-warn-bg);
  border-color: var(--zp-warn-line);
  color: var(--zp-warn);
}

.cabinet-dashboard .badge.badge-dot.badge-danger,
.cabinet-keys .badge.badge-dot.badge-danger {
  background: var(--zp-err-bg);
  border-color: var(--zp-err-line);
  color: var(--zp-err-ink);
}

/* Экранная подпись только для скринридера (есть в разметке keys.html) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ============================================================================
   1. Общие блоки кабинета
   ============================================================================ */

.cabinet-notice { margin-bottom: 0; }

/* --- Герой экрана: стеклянная карточка + вторая карточка справа --- */
.cabinet-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 14px;
  align-items: stretch;
}

.cabinet-hero__copy {
  position: relative;
  overflow: hidden;
  /* Макет: фиксированные 300px и текст прижат к верху карточки */
  min-height: 300px;
  padding: clamp(26px, 3.2vw, 44px);
  display: block;
}

/* Знак Z в углу героя — фирменный ассет z-bolt.svg, свободно стоящий */
.cabinet-hero__mark {
  position: absolute;
  right: -6%;
  top: -10%;
  width: min(58%, 360px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.cabinet-hero__mark img,
.cabinet-hero__mark svg {
  position: relative;
  width: 78%;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(255, 140, 0, 0.4));
  animation: zp-cab-float 7s ease-in-out infinite;
}

.cabinet-hero__halo {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 150, 0, 0.4), transparent 70%);
  filter: blur(24px);
  animation: zp-breathe 6s ease-in-out infinite;
}

/* Знак стоит абсолютом в углу карточки — он обязан остаться вне этого правила,
   иначе position:relative возвращает его в поток и раздувает высоту героя. */
.cabinet-hero__copy > *:not(.cabinet-hero__mark) { position: relative; z-index: 1; }

/* Текстовая колонка героя: в макете она занимает 62 % ширины карточки, знак
   стоит в оставшейся трети и текст под него не заезжает */
.cabinet-hero__body {
  position: relative;
  z-index: 1;
  max-width: 62%;
}

/* Имя в приветствии — золотой градиент и вес 500 на фоне лёгкого h1 */
.cabinet-hero__name { font-weight: 500; }

.cabinet-hero__copy h1,
.cabinet-hero__copy h2 {
  margin-top: 14px;
  font-family: var(--zp-font-display);
  font-weight: 200;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--zp-ink);
  overflow-wrap: anywhere;
}

.cabinet-hero__lead,
.cabinet-hero__copy p:not(.cabinet-hero__context) {
  margin-top: 16px;
  max-width: 38ch;
  font-size: 16px;
  color: var(--zp-ink-2);
}

.cabinet-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(24px, 3vw, 36px);
}

/* --- Кнопки героя: геометрия макета (не .btn-lg) --- */
.cab-btn {
  min-height: 0;
  border-radius: 14px;
  font-size: 15px;
}

.cab-btn--hero-gold {
  padding: 15px 26px;
  font-weight: 600;
  background: linear-gradient(140deg, #ffe38a, #ffb800 50%, #ff8300);
  color: var(--zp-on-gold);
  box-shadow: 0 14px 34px rgba(255, 140, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Блик героя чуть шире базового (было width: 40% против 36%) и со своим
   таймингом. База (.btn-primary::after в shell.css) теперь возит блик через
   background-position, не вынося слой за правую кромку кнопки, поэтому здесь
   переопределяем только полосу света и тайминг. Прежние `width` + `zp-shimmer`
   возвращали слою сдвиг наружу, и у кнопки снова распухал scrollWidth. */
.cab-btn--hero-gold::after {
  background-image: linear-gradient(108deg,
    rgba(255, 255, 255, 0) 43.5%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 56.5%);
  animation: zp-shimmer-btn 3.2s var(--zp-ease) 1.2s infinite;
}

.cab-btn--hero-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(255, 140, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.cab-btn--hero-ghost {
  padding: 15px 22px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(246, 240, 228, 0.16);
  color: var(--zp-ink);
}

.cab-btn--hero-ghost:hover {
  border-color: rgba(255, 184, 0, 0.6);
  color: var(--zp-gold);
  transform: translateY(-2px);
}

/* --- Компактные кнопки карточек (подключить / управлять / продлить) --- */
.cab-btn--card,
.cab-btn--card-gold {
  min-height: 0;
  padding: 11px 18px;
  border-radius: var(--zp-r-btn-sm);
  font-size: 14px;
  font-weight: 500;
}

.cab-btn--card-gold {
  background: rgba(255, 184, 0, 0.12);
  border-color: rgba(255, 184, 0, 0.4);
  color: var(--zp-gold);
}

.cab-btn--card-gold:hover { background: rgba(255, 184, 0, 0.22); color: var(--zp-gold); transform: none; }

.cab-btn--card {
  background: transparent;
  border-color: rgba(246, 240, 228, 0.14);
  color: var(--zp-ink);
}

.cab-btn--card:hover { border-color: rgba(246, 240, 228, 0.35); color: var(--zp-ink); transform: none; }

/* --- Заголовок секции --- */
/* gap контейнера уже даёт 14px, остальное добираем до макетных
   clamp(26px,3.4vw,44px) между плитками и секцией */
.cabinet-section { margin-top: clamp(12px, calc(3.4vw - 14px), 30px); }

.cabinet-section__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 18px;
}

.cabinet-section__heading h2 {
  font-family: var(--zp-font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.3vw, 30px);
  letter-spacing: -0.03em;
  color: var(--zp-ink);
}

.cabinet-section__heading p {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--zp-ink-3);
}

.cabinet-text-link {
  font-size: 14.5px;
  color: var(--zp-gold);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--zp-t-fast) var(--zp-ease), color var(--zp-t-fast) var(--zp-ease);
}

.cabinet-text-link:hover { transform: translateX(4px); }

/* --- Плитки сводки --- */
.cabinet-stat-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

/* Условия реферальной программы: плитка может остаться одна — auto-fill
   оставляет пустую колонку и не растягивает её на всю карточку. */
.cabinet-stat-rail--terms { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

/* Плитка макета вертикальная: моно-лейбл → крупное число → подпись. Иконок нет. */
.cabinet-stat {
  position: relative;
  display: block;
  min-width: 0;
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: var(--zp-r-tile);
  background: var(--zp-grad-card);
  border: 1px solid var(--zp-hairline-soft, rgba(246, 240, 228, 0.08));
  color: var(--zp-ink);
  text-decoration: none;
  transition: transform 240ms var(--zp-ease), border-color 240ms var(--zp-ease);
}

a.cabinet-stat:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 184, 0, 0.5);
}

.cabinet-stat__label {
  display: block;
  font-family: var(--zp-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--zp-ink-3);
}

.cabinet-stat > span:not(.cabinet-stat__label) {
  display: block;
  min-width: 0;
}

.cabinet-stat strong {
  display: block;
  margin-top: 18px;
  font-family: var(--zp-font-display);
  font-weight: 300;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--zp-ink);
  overflow-wrap: anywhere;
}

.cabinet-stat--gold strong { color: var(--zp-gold); }

.cabinet-stat small {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--zp-ink-2);
}

/* Плитка «Управление» на странице подписок — с рядом кнопок */
.cabinet-stat--actions {
  grid-column: span 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 18px;
}

.cabinet-stat--actions strong {
  font-family: var(--zp-font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.cabinet-stat--actions small { margin-top: 4px; color: var(--zp-ink-3); }

/* --- Заметка о синхронизации Telegram --- */
.cabinet-sync-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  padding: clamp(16px, 2.2vw, 24px);
  border-radius: var(--zp-r-tile);
  border: 1px dashed rgba(255, 184, 0, 0.3);
  background: rgba(255, 184, 0, 0.03);
}

.cabinet-sync-note > div { flex: 1 1 280px; min-width: 0; }

.cabinet-sync-note__icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--zp-r-btn-sm);
  background: rgba(255, 184, 0, 0.12);
  color: var(--zp-gold);
}

.cabinet-sync-note strong {
  display: block;
  font-family: var(--zp-font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--zp-ink);
}

.cabinet-sync-note p { margin-top: 6px; font-size: 13.5px; color: var(--zp-ink-2); }

/* --- Пустое состояние --- */
.cabinet-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2.4vw, 28px);
  padding: clamp(26px, 3.4vw, 44px);
  border-radius: var(--zp-r-card);
  border: 1px dashed rgba(255, 184, 0, 0.28);
  background: rgba(255, 184, 0, 0.03);
  text-align: left;
  color: var(--zp-ink-2);
}

.cabinet-empty > div:not(.cabinet-empty__actions) { flex: 1 1 280px; min-width: 0; }

.cabinet-empty__icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: var(--zp-r-tile-sm);
  background: rgba(255, 184, 0, 0.1);
  color: var(--zp-gold);
}

.cabinet-empty h3 {
  font-family: var(--zp-font-display);
  font-weight: 400;
  font-size: clamp(19px, 2vw, 24px);
  letter-spacing: -0.02em;
  color: var(--zp-ink);
}

.cabinet-empty p { margin-top: 8px; max-width: 52ch; font-size: 14px; color: var(--zp-ink-3); }

/* flex-shrink должен остаться 1: при 0 блок держит max-content обеих кнопок и на
   узком экране вылезает за карточку (на 380px это давало горизонтальную прокрутку
   всей страницы). Расти он по-прежнему не должен — на широком экране прижат вправо. */
.cabinet-empty__actions {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cabinet-empty__form { display: contents; }

.cabinet-empty--compact { padding: clamp(20px, 2.4vw, 28px); }

/* --- Быстрые действия --- */
.cabinet-action-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 14px;
}

/* В макете отдельной секции «быстрые действия» нет; строки приведены к
   пилюле-списку макета (padding 13/16, radius 14, 14.5px), а крупные номера
   01/02/03 заменены моно-индексом — они выбивались из системы. */
.cabinet-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label arrow" "body arrow";
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: clamp(16px, 2vw, 22px);
  border-radius: var(--zp-r-tile-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--zp-hairline-soft, rgba(246, 240, 228, 0.08));
  color: var(--zp-ink-2);
  font-size: 14.5px;
  text-decoration: none;
  transition: transform 200ms var(--zp-ease),
    border-color 200ms var(--zp-ease),
    background-color 200ms var(--zp-ease);
}

.cabinet-action:hover {
  border-color: rgba(255, 184, 0, 0.5);
  background: rgba(255, 184, 0, 0.08);
  color: var(--zp-ink);
}

.cabinet-action__number {
  grid-area: label;
  min-width: 0;
  font-family: var(--zp-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zp-ink-3);
}

.cabinet-action:hover .cabinet-action__number { color: var(--zp-gold); }

.cabinet-action > span:nth-child(2) {
  grid-area: body;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cabinet-action strong { font-size: 14.5px; font-weight: 500; color: var(--zp-ink); }
.cabinet-action small { font-size: 13px; color: var(--zp-ink-3); }

.cabinet-action__arrow {
  grid-area: arrow;
  align-self: center;
  color: var(--zp-gold);
  transition: transform var(--zp-t-fast) var(--zp-ease);
}

.cabinet-action:hover .cabinet-action__arrow { transform: translateX(4px); }


/* ============================================================================
   2. Кольцо остатка дней (SVG stroke-dasharray, значение ставит cabinet.js)
   ============================================================================ */

/* Кольцо отрисовано всегда (как в макете): шаблон ставит его только там, где
   у ключа есть срок, поэтому пустых колец не бывает даже без JS. */
.sub-ring {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: block;
}

.sub-ring__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.sub-ring__track {
  fill: none;
  stroke: rgba(246, 240, 228, 0.08);
  stroke-width: 4;
}

.sub-ring__value {
  fill: none;
  stroke: var(--zp-gold);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 0 170;
  transition: stroke-dasharray 1.4s var(--zp-ease);
}

.sub-ring--warn .sub-ring__value { stroke: var(--zp-warn); }
.sub-ring--err .sub-ring__value { stroke: var(--zp-err); }

.sub-ring__days {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--zp-font-mono);
  font-size: 12px;
  color: var(--zp-gold);
}

.sub-ring--warn .sub-ring__days { color: var(--zp-warn); }
.sub-ring--err .sub-ring__days { color: var(--zp-err-ink); }


/* ============================================================================
   3. Главная
   ============================================================================ */

/* --- Золотая карточка баланса --- */
.dashboard-balance {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3.2vw, 40px);
}

.dashboard-balance::before,
.dashboard-balance::after {
  content: "";
  position: absolute;
  right: -30%;
  bottom: -40%;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(60, 30, 0, 0.18);
  pointer-events: none;
}

.dashboard-balance::after { right: -18%; bottom: -28%; width: 56%; border-color: rgba(60, 30, 0, 0.22); }

.dashboard-balance > * { position: relative; z-index: 1; }

/* Верхняя строка карточки: слева «баланс», справа — активные кассы */
.dashboard-balance__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* Подпись «баланс» не сжимается: касс в каталоге бывает больше двух, и длинный
   список иначе съедал бы слово слева */
.dashboard-balance__label { flex: 0 0 auto; }

.dashboard-balance__providers {
  flex: 0 1 auto;
  font-family: var(--zp-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(40, 20, 0, 0.7);
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-balance__value {
  margin-top: clamp(28px, 4vw, 56px);
  font-family: var(--zp-font-display);
  font-weight: 300;
  font-size: clamp(50px, 6vw, 84px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--zp-on-gold);
  /* шестизначный баланс не должен вылезать за золотую карточку */
  overflow-wrap: anywhere;
}

.dashboard-balance__value small {
  margin-left: 8px;
  font-size: 0.42em;
  font-weight: 400;
  color: var(--zp-on-gold-soft);
}

.dashboard-balance__hint {
  margin-top: 14px;
  font-size: 14px;
  color: rgba(40, 20, 0, 0.78);
}

/* Нижний ряд: слева факт из истории операций, справа кнопка */
.dashboard-balance__foot {
  margin-top: auto;
  padding-top: clamp(22px, 3vw, 34px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.dashboard-balance__fact {
  font-family: var(--zp-font-mono);
  font-size: 12px;
  color: rgba(40, 20, 0, 0.75);
  min-width: 0;
}

/* Тёмная пилюля на золотой карточке — как в макете: на нижнем (самом тёмном)
   крае градиента светлый текст читается лучше, чем тёмный по золоту */
.dashboard-balance__action {
  /* в ряду .dashboard-balance__foot кнопка всегда справа, даже если слева пусто */
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--zp-r-btn-sm);
  background: #120b00;
  color: var(--zp-gold-light);
  font-weight: 600;
  font-size: 14px;
  /* макет: высота пилюли ровно 12+17+12 = 41px, без наследованного line-height */
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(40, 20, 0, 0.35);
  transition: transform 200ms var(--zp-ease);
}

.dashboard-balance__action:hover {
  color: var(--zp-gold-light);
  transform: translateY(-2px);
}

/* --- Карточки активных подписок --- */
.dashboard-subscriptions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 14px;
}

.dashboard-subscription {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--zp-r-tile);
  background: var(--zp-grad-card) padding-box,
    linear-gradient(160deg, rgba(255, 184, 0, 0.32), rgba(255, 184, 0, 0.04) 45%, rgba(246, 240, 228, 0.07)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  transition: transform var(--zp-t-mid) var(--zp-ease), box-shadow var(--zp-t-mid) var(--zp-ease);
}

.dashboard-subscription:hover { transform: translateY(-4px); box-shadow: var(--zp-shadow-card-hover); }

.dashboard-subscription__head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dashboard-subscription__title { flex: 1 1 auto; min-width: 0; }

/* Бейдж статуса стоит рядом с названием тарифа, а не отдельной колонкой */
.dashboard-subscription__titlerow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.dashboard-subscription__title h3 {
  font-family: var(--zp-font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--zp-ink);
  overflow-wrap: anywhere;
}

/* Секция «Активные подписки» в макете появляется с задержкой 480 ms */
.dashboard-subs-section { animation-delay: 480ms; }

.dashboard-subscription__email:empty { display: none; }

.dashboard-subscription__email {
  margin-top: 4px;
  font-family: var(--zp-font-mono);
  font-size: 12px;
  color: var(--zp-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-subscription__facts {
  margin: 20px 0 0;
  display: grid;
  /* макет: ровно три колонки, чтобы карточки не «плясали» по сетке */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.dashboard-subscription__facts dt,
.keys-fact-label {
  font-family: var(--zp-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zp-ink-3);
}

.dashboard-subscription__facts dd {
  margin: 5px 0 0;
  font-family: var(--zp-font-mono);
  font-size: 13px;
  color: var(--zp-ink);
  overflow-wrap: anywhere;
}

/* Цвет значения повторяет бейдж: «скоро истечёт» — жёлтый, «активен» — зелёный */
.dashboard-subscription__facts dd.is-soon { color: var(--zp-warn); }
.dashboard-subscription__facts dd.is-muted { color: var(--zp-ink-3); }

.dashboard-subscription__actions {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- Популярные тарифы ---
   В макете тарифы живут на экране «Тарифы и оплата»; здесь взята та же
   геометрия карточки плана: minmax(min(100%,180px),1fr), gap 12, radius 20,
   выбранный — радиальная золотая карта с тенью. */
.dashboard-tariff-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 14px;
}

.dashboard-tariff {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: var(--zp-r-tile);
  background: var(--zp-grad-card);
  border: 1px solid var(--zp-hairline);
  transition: transform 260ms var(--zp-ease), border-color 260ms var(--zp-ease);
}

.dashboard-tariff:hover { transform: translateY(-4px); border-color: rgba(255, 184, 0, 0.45); }

.dashboard-tariff--popular {
  border-color: transparent;
  background: radial-gradient(130% 150% at 0% 0%, #ffe38a 0%, #ffb800 38%, #ff8300 74%, #c25b00 100%);
  box-shadow: 0 24px 60px rgba(255, 140, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.dashboard-tariff--popular:hover { transform: translateY(-4px); }

.dashboard-tariff__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dashboard-tariff__group {
  font-family: var(--zp-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--zp-ink-3);
}

.dashboard-tariff--popular .dashboard-tariff__group { color: var(--zp-on-gold); }

.dashboard-tariff--popular .badge-warning {
  background: rgba(26, 16, 0, 0.18);
  border-color: rgba(26, 16, 0, 0.3);
  color: var(--zp-on-gold);
}

.dashboard-tariff h3 {
  margin-top: 14px;
  font-family: var(--zp-font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.dashboard-tariff__price {
  margin-top: 8px;
  font-family: var(--zp-font-display);
  font-weight: 300;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--zp-ink);
}

.dashboard-tariff--popular .dashboard-tariff__price { color: var(--zp-on-gold); }

.dashboard-tariff__price small { font-size: 0.45em; margin-left: 4px; color: var(--zp-ink-2); }
.dashboard-tariff--popular .dashboard-tariff__price small { color: var(--zp-on-gold); }

.dashboard-tariff__facts {
  margin: 16px 0 18px;
  display: grid;
  gap: 8px;
}

.dashboard-tariff__facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-tariff__facts dt { margin: 0; font-size: 12.5px; color: var(--zp-ink-3); }
.dashboard-tariff__facts dd { margin: 0; font-family: var(--zp-font-mono); font-size: 12.5px; color: var(--zp-ink); text-align: right; }

.dashboard-tariff--popular .dashboard-tariff__facts dt { color: var(--zp-on-gold); }
.dashboard-tariff--popular .dashboard-tariff__facts dd { color: var(--zp-on-gold); }

.dashboard-tariff .btn { margin-top: auto; }

/* На золотой карточке кнопка тёмная — как «Пополнить» на карточке баланса */
.dashboard-tariff--popular .cab-btn--card,
.dashboard-tariff--popular .btn-secondary {
  background: #120b00;
  border-color: transparent;
  color: var(--zp-gold-light);
}

.dashboard-tariff--popular .cab-btn--card:hover,
.dashboard-tariff--popular .btn-secondary:hover { color: var(--zp-gold-lighter); border-color: transparent; }


/* ============================================================================
   4. Подписки
   ============================================================================ */

/* Шапка списка: заголовок + моно-счётчик, справа поиск и общие кнопки */
.keys-list-heading__main { min-width: 0; }

.keys-list-heading__meta {
  margin-top: 6px;
  font-family: var(--zp-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zp-ink-3);
}

.keys-list-heading__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}

.keys-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Пунктирная карточка «Новая подписка» в конце списка (геометрия макета) */
.keys-new-sub {
  margin-top: 14px;
  padding: clamp(20px, 2.4vw, 32px);
  gap: clamp(16px, 2.4vw, 36px);
}

.keys-new-sub h2 {
  font-family: var(--zp-font-display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--zp-ink);
}

.keys-new-sub > .zp-stub__body > p { margin-top: 8px; font-size: 14px; color: var(--zp-ink-3); }

.keys-new-sub__balance {
  font-family: var(--zp-font-mono);
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--zp-ink-3);
}

.keys-new-sub__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.cab-btn--stub-gold,
.cab-btn--stub-ghost {
  min-height: 0;
  border-radius: var(--zp-r-btn-sm);
  font-size: 14.5px;
}

.cab-btn--stub-gold {
  padding: 13px 22px;
  font-weight: 600;
  background: linear-gradient(140deg, #ffe38a, #ffb800 50%, #ff8300);
  color: var(--zp-on-gold);
  box-shadow: 0 12px 30px rgba(255, 140, 0, 0.3);
}

.cab-btn--stub-gold:hover { color: var(--zp-on-gold); transform: translateY(-2px); }

.cab-btn--stub-ghost {
  padding: 13px 20px;
  background: transparent;
  border-color: rgba(246, 240, 228, 0.16);
  color: var(--zp-ink);
}

.cab-btn--stub-ghost:hover { border-color: var(--zp-gold); color: var(--zp-gold); transform: none; }

/* --- Поиск по подпискам --- */
.keys-list-heading .search-input-wrap {
  position: relative;
  flex: 0 1 320px;
  min-width: 0;
  max-width: 100%;
}

.keys-list-heading .search-input-wrap .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--zp-ink-3);
  pointer-events: none;
}

.keys-list-heading .search-input-wrap .form-input {
  padding-left: 42px;
  border-radius: var(--zp-r-pill);
}

/* --- Карточка подписки ---
   Макет: карточки идут одной колонкой, внутри карточки два столбца —
   слева ключ, справа панель обхода именно этого ключа. */
.keys-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sub-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: var(--zp-r-card);
  background: var(--zp-grad-card) padding-box,
    linear-gradient(160deg, rgba(255, 184, 0, 0.35), rgba(255, 184, 0, 0.04) 45%, rgba(246, 240, 228, 0.07)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2.6vw, 40px);
  transition: transform var(--zp-t-mid) var(--zp-ease), box-shadow var(--zp-t-mid) var(--zp-ease);
}

.sub-card:hover { transform: translateY(-3px); box-shadow: var(--zp-shadow-card-hover); }

.sub-card__main { flex: 1 1 280px; min-width: 0; }

.sub-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}

.sub-card-name {
  font-family: var(--zp-font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--zp-ink);
  overflow-wrap: anywhere;
}

.sub-card-email {
  font-family: var(--zp-font-mono);
  font-size: 12px;
  color: var(--zp-ink-3);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Полоса жизни ключа вместо кольца: ширина приходит из шаблона (--zp-life) */
.sub-card-life {
  margin-top: 16px;
  height: 6px;
  border-radius: var(--zp-r-pill);
  background: rgba(246, 240, 228, 0.08);
  overflow: hidden;
}

.sub-card-life__value {
  display: block;
  height: 100%;
  width: var(--zp-life, 0%);
  border-radius: var(--zp-r-pill);
  background: linear-gradient(140deg, #ffd75a, #ff8300);
  animation: zp-life-fill 1.2s var(--zp-ease) both;
}

.sub-card-life--soon .sub-card-life__value { background: linear-gradient(90deg, #ff8300, #ffd052); }

@keyframes zp-life-fill {
  from { width: 0; }
  to   { width: var(--zp-life, 0%); }
}

.sub-card-meta {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 14px;
}

.sub-card-meta-item { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.sub-card-meta-label {
  font-family: var(--zp-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zp-ink-3);
}

.sub-card-meta-value {
  font-family: var(--zp-font-mono);
  font-size: 13.5px;
  color: var(--zp-ink);
  overflow-wrap: anywhere;
}

.sub-card-meta-value--soon { color: var(--zp-warn); }

.sub-card-key { margin-top: 18px; }

/* Поле ссылки подписки — размеры макета (общий .zp-copyfield чуть крупнее) */
.sub-card-key .zp-copyfield__value {
  flex: 1 1 220px;
  padding: 12px 14px;
  border-radius: var(--zp-r-btn-sm);
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(246, 240, 228, 0.1);
  font-size: 12px;
  color: var(--zp-ink-2);
}

.zp-copyfield__btn {
  flex: 0 0 auto;
  padding: 12px 16px;
  border-radius: var(--zp-r-btn-sm);
  border: 1px solid rgba(246, 240, 228, 0.18);
  background: transparent;
  font-family: var(--zp-font-text);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--zp-ink);
  cursor: pointer;
  transition: border-color 200ms var(--zp-ease), color 200ms var(--zp-ease);
}

.zp-copyfield__btn:hover { border-color: rgba(255, 184, 0, 0.55); color: var(--zp-gold); }

.zp-copyfield__btn.is-copied { color: var(--zp-ok-ink); border-color: rgba(88, 184, 120, 0.5); }

.sub-card-actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- Обход белых списков: панель внутри карточки ключа ---
   Макет: правая колонка карточки, тёмная подложка с золотой рамкой. */
.sub-card__bypass {
  flex: 1 1 260px;
  min-width: 0;
  padding: clamp(16px, 2vw, 22px);
  border-radius: var(--zp-r-tile-sm);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 184, 0, 0.2);
}

.sub-card__bypass-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sub-card__bypass-head .keys-fact-label {
  font-family: var(--zp-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zp-ink-3);
}

.sub-card__bypass-note {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--zp-ink-2);
}

.sub-card__bypass .m2-notice { margin-top: 12px; font-size: 13px; }

.bypass-state {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: var(--zp-r-pill);
  font-family: var(--zp-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  background: var(--zp-warn-bg);
  border: 1px solid var(--zp-warn-line);
  color: var(--zp-warn);
}

.bypass-state.is-active { background: var(--zp-ok-bg); border-color: var(--zp-ok-line); color: var(--zp-ok-ink); }
.bypass-state.is-review { background: var(--zp-warn-bg); border-color: var(--zp-warn-line); color: var(--zp-warn); }

.bypass-offers { margin-top: 14px; display: flex; flex-direction: column; }

.bypass-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(246, 240, 228, 0.07);
}

.bypass-offer:last-child { border-bottom: 0; }

.bypass-offer__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  color: var(--zp-ink-2);
}

.bypass-offer__side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.bypass-offer__side form { margin: 0; }

.bypass-offer__price {
  font-family: var(--zp-font-mono);
  font-size: 12.5px;
  color: var(--zp-ink);
  white-space: nowrap;
}

.bypass-offer__price--free { color: var(--zp-ok-ink); }
.bypass-offer--daily .bypass-offer__label { color: var(--zp-ink); }
.bypass-offer--daily .bypass-offer__price { color: var(--zp-gold-light); }

.bypass-offer__btn {
  padding: 7px 13px;
  border-radius: 9px;
  border: 1px solid rgba(246, 240, 228, 0.14);
  background: transparent;
  font-family: var(--zp-font-text);
  font-size: 12.5px;
  color: var(--zp-ink-2);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms var(--zp-ease), color 160ms var(--zp-ease);
}

.bypass-offer__btn:hover:not([disabled]) { border-color: rgba(255, 184, 0, 0.5); color: var(--zp-gold); }
.bypass-offer__btn--free { border-color: rgba(255, 184, 0, 0.4); color: var(--zp-gold); }
.bypass-offer__btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.bypass-offer.is-unavailable { opacity: 0.62; }

.bypass-key__rule {
  margin-top: 14px;
  font-family: var(--zp-font-mono);
  font-size: 11px;
  line-height: 1.65;
  color: var(--zp-ink-3);
}

/* Общая сноска под списком: состояние кассы и предупреждения о запуске.
   Отдельной секции обхода в макете нет, поэтому это тонкая моно-строка. */
.bypass-footnote {
  margin-top: clamp(20px, 2.6vw, 32px);
  padding-top: 18px;
  border-top: 1px solid var(--zp-hairline);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bypass-panel__status {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--zp-r-pill);
  background: var(--zp-warn-bg);
  border: 1px solid var(--zp-warn-line);
  font-family: var(--zp-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zp-warn);
}

.bypass-panel__status span {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--zp-warn);
}

.bypass-panel__status.is-ready {
  background: rgba(88, 184, 120, 0.08);
  border-color: rgba(88, 184, 120, 0.28);
  color: var(--zp-ok-ink);
}

.bypass-panel__status.is-ready span { background: var(--zp-ok); animation: zp-glow 2.2s ease-out infinite; }

.bypass-gate-note {
  padding: 14px 16px;
  border-radius: var(--zp-r-btn-sm);
  background: var(--zp-warn-bg);
  border: 1px solid var(--zp-warn-line);
  font-size: 13.5px;
  color: var(--zp-ink-2);
}

.bypass-empty {
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: var(--zp-r-tile-sm);
  border: 1px dashed rgba(255, 184, 0, 0.3);
  background: rgba(255, 184, 0, 0.03);
}

.bypass-empty strong {
  font-family: var(--zp-font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--zp-ink);
}

.bypass-empty p { margin-top: 8px; font-size: 14px; color: var(--zp-ink-2); }

.bypass-bot-note {
  font-family: var(--zp-font-mono);
  font-size: 11px;
  line-height: 1.65;
  color: var(--zp-ink-3);
}

.bypass-bot-note strong { font-size: 11px; color: var(--zp-ink-2); }

/* --- Быстрый выбор тарифа в модалках --- */
.main-plan-picker {
  margin-bottom: 18px;
  padding: clamp(14px, 1.8vw, 18px);
  border-radius: var(--zp-r-tile-sm);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--zp-hairline);
}

.main-plan-picker__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
}

.main-plan-picker__heading span {
  font-family: var(--zp-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zp-ink-3);
}

.main-plan-picker__heading small { font-size: 12.5px; color: var(--zp-ink-2); }

.main-plan-picker__grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  gap: 8px;
}

.main-plan-choice {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 44px;
  padding: 12px 14px;
  border-radius: var(--zp-r-btn-sm);
  border: 1px solid var(--zp-hairline);
  background: rgba(255, 255, 255, 0.02);
  color: var(--zp-ink);
  text-align: left;
  cursor: pointer;
  transition: transform var(--zp-t-fast) var(--zp-ease), border-color var(--zp-t-fast) var(--zp-ease);
}

.main-plan-choice:hover:not([disabled]) { transform: translateY(-2px); border-color: rgba(255, 184, 0, 0.5); }

.main-plan-choice[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(255, 184, 0, 0.14), rgba(255, 184, 0, 0.04));
  border-color: rgba(255, 184, 0, 0.55);
}

.main-plan-choice[disabled] { opacity: 0.45; cursor: not-allowed; }

.main-plan-choice__term {
  font-family: var(--zp-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zp-ink-3);
}

.main-plan-choice strong {
  font-family: var(--zp-font-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.03em;
}

.main-plan-choice strong small { font-size: 0.5em; margin-left: 3px; color: var(--zp-ink-2); }
.main-plan-choice__state { font-size: 12px; color: var(--zp-ink-3); }
.main-plan-choice[aria-pressed="true"] .main-plan-choice__state { color: var(--zp-gold-light); }

.main-plan-picker__hint { margin-top: 10px; font-size: 12.5px; color: var(--zp-ink-3); }

.purchase-acknowledgement {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: var(--zp-r-btn-sm);
  border: 1px solid var(--zp-warn-line);
  background: var(--zp-warn-bg);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--zp-ink);
  cursor: pointer;
}

.purchase-acknowledgement input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--zp-gold);
}

.promo-row { display: flex; flex-wrap: wrap; gap: 8px; }
.promo-row .form-input { flex: 1 1 160px; min-width: 0; }
.promo-row .btn { flex: 0 0 auto; }

.promo-total {
  margin: 4px 0 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  color: var(--zp-ink-2);
}

.promo-total strong { font-family: var(--zp-font-mono); color: var(--zp-ink); }
.promo-total--final strong { color: var(--zp-gold-light); }

.modal-trial-form { margin-top: 16px; }
.hwid-actions { margin: 4px 0 12px; display: flex; flex-wrap: wrap; gap: 8px; }

.modal.modal-lg { max-width: 860px; }

/* Кнопка «скоро истечёт» рядом с обычными действиями карточки */
.btn-warning {
  background: var(--zp-warn-bg);
  border-color: var(--zp-warn-line);
  color: var(--zp-warn);
}

.btn-warning:hover { background: rgba(255, 184, 0, 0.2); color: var(--zp-warn); transform: translateY(-2px); }

.btn-icon { padding-inline: 12px; }

/* Чип тарифа в шапке карточки */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--zp-r-pill);
  border: 1px solid var(--zp-hairline);
  background: rgba(255, 255, 255, 0.03);
  font-size: 12.5px;
  color: var(--zp-ink-2);
  white-space: nowrap;
}

.m2-success { background: var(--zp-ok-bg); border-color: var(--zp-ok-line); color: var(--zp-ok-ink); }
.m2-warning { background: var(--zp-warn-bg); border-color: var(--zp-warn-line); color: var(--zp-warn); }

/* --- Подключение устройства (3 шага) ---
   Экран «Подключение» макета целиком: рельс прогресса, три моно-шага,
   одна стеклянная карточка с плитками и нижним рядом действий. */
.connect-rail {
  position: relative;
  height: 3px;
  border-radius: var(--zp-r-pill);
  background: rgba(246, 240, 228, 0.08);
  overflow: hidden;
}

.connect-rail__value {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 33.3333%;
  border-radius: var(--zp-r-pill);
  background: linear-gradient(140deg, #ffd75a, #ff8300);
  box-shadow: 0 0 16px rgba(255, 184, 0, 0.6);
  transition: width 600ms var(--zp-ease);
}

.connect-steps {
  margin-top: 14px;
  display: flex;
  gap: 8px;
}

.connect-steps__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--zp-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--zp-ink-3);
  transition: color 300ms var(--zp-ease);
}

.connect-steps__item.is-active { color: var(--zp-gold); }

.connect-steps__num { flex: 0 0 auto; }

.connect-steps__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connect-flow {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Стеклянная карточка шага — геометрия макета */
.connect-panel {
  position: relative;
  overflow: hidden;
  margin-top: clamp(22px, 3vw, 36px);
  padding: clamp(22px, 3vw, 40px);
  border-radius: var(--zp-r-card);
  background: var(--zp-grad-glass) padding-box,
    linear-gradient(160deg, rgba(255, 184, 0, 0.45), rgba(255, 184, 0, 0.06) 40%, rgba(246, 240, 228, 0.08)) border-box;
  border: 1px solid transparent;
  box-shadow: var(--zp-shadow-card);
  min-height: clamp(300px, 30vw, 440px);
  display: flex;
  flex-direction: column;
}

.connect-panel__title {
  font-family: var(--zp-font-display);
  font-weight: 300;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--zp-ink);
}

.connect-panel__lead {
  margin-top: 12px;
  max-width: 56ch;
  font-size: 15.5px;
  color: var(--zp-ink-2);
}

.connect-panel__stage { margin-top: clamp(22px, 3vw, 36px); min-width: 0; }
.connect-panel__stage[hidden] { display: none; }

.connect-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.connect-tiles--apps { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Плитка выбора: база в shell.css (.zp-tile), здесь только содержимое макета */
.connect-tile { cursor: pointer; }

.connect-tile__code {
  display: block;
  font-family: var(--zp-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zp-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connect-tile[aria-pressed="true"] .connect-tile__code { color: var(--zp-gold); }

.connect-tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.connect-tile__name {
  display: block;
  min-width: 0;
  font-family: var(--zp-font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--zp-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connect-tile__code + .connect-tile__name { margin-top: 14px; }

.connect-tile__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: rgba(246, 240, 228, 0.2);
  transition: background 200ms var(--zp-ease), box-shadow 200ms var(--zp-ease);
}

.connect-tile[aria-pressed="true"] .connect-tile__dot {
  background: linear-gradient(140deg, #ffd75a, #ff8300);
  box-shadow: 0 0 12px rgba(255, 184, 0, 0.8);
}

.connect-tile__note {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--zp-ink-3);
  overflow-wrap: anywhere;
}

.connect-tile__head + .connect-tile__note { margin-top: 10px; }

/* Шаг 3: моно-подпись, ссылка подписки и кнопка копирования */
.connect-link__label {
  display: block;
  margin-top: 22px;
  margin-bottom: 10px;
  font-family: var(--zp-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zp-ink-3);
}

.connect-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.connect-link .connect-link__value {
  flex: 1 1 260px;
  min-width: 0;
  width: auto;
  padding: 16px 18px;
  border-radius: var(--zp-r-input);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 184, 0, 0.3);
  font-family: var(--zp-font-mono);
  font-size: 13px;
  color: var(--zp-gold-light);
  text-overflow: ellipsis;
}

.connect-link .btn { flex: 0 0 auto; }

.connect-selected-card {
  margin-top: 18px;
  padding: clamp(16px, 2vw, 20px);
  border-radius: var(--zp-r-tile-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--zp-hairline);
}

.connect-selected-card:empty { display: none; }

.connect-selected-card__title {
  font-family: var(--zp-font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--zp-ink);
}

.connect-selected-card__note { margin-top: 8px; font-size: 13.5px; color: var(--zp-ink-3); }
.connect-selected-card__actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.connect-selected-card .form-group { margin-top: 14px; margin-bottom: 0; }

.connect-action-bar {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Нижний ряд карточки: «Далее», «Назад» и моно-сводка выбора */
.connect-panel__foot {
  margin-top: auto;
  padding-top: clamp(22px, 3vw, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.connect-panel__next { padding: 15px 26px; border-radius: var(--zp-r-input); font-size: 15px; }

.connect-panel__prev {
  padding: 15px 20px;
  border-radius: var(--zp-r-input);
  background: transparent;
  border: 1px solid rgba(246, 240, 228, 0.14);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--zp-ink-3);
}

.connect-panel__prev:hover { border-color: rgba(246, 240, 228, 0.35); color: var(--zp-ink); }
.connect-panel__prev[disabled] { opacity: 0.35; pointer-events: none; }

.connect-panel__summary {
  margin-left: auto;
  min-width: 0;
  font-family: var(--zp-font-mono);
  font-size: 11.5px;
  color: var(--zp-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connect-help {
  margin-top: 6px;
  padding: 14px 16px;
  border-radius: var(--zp-r-tile-sm);
  border: 1px solid var(--zp-hairline);
  background: rgba(255, 255, 255, 0.02);
}

.connect-help summary {
  cursor: pointer;
  font-size: 14px;
  color: var(--zp-gold);
  list-style: none;
}

.connect-help summary::-webkit-details-marker { display: none; }
.connect-help summary::before { content: "\ff0b "; }
.connect-help[open] summary::before { content: "\2212 "; }

.connect-help ol {
  margin: 12px 0 0;
  padding-left: 20px;
  list-style: decimal;
  display: grid;
  gap: 8px;
  font-size: 13.5px;
  color: var(--zp-ink-2);
}

/* --- Устройства HWID ---
   Экран «Статистика» макета: строка = модель + моно-HWID, справа «Отвязать». */
/* Шапка списка устройств: заголовок секции и моно-счётчик слотов */
.hwid-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
}

.hwid-head__title {
  font-family: var(--zp-font-display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--zp-ink);
}

.hwid-head__count {
  font-family: var(--zp-font-mono);
  font-size: 11px;
  color: var(--zp-ink-3);
  white-space: nowrap;
}

.hwid-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.hwid-device {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(246, 240, 228, 0.07);
}

.hwid-device:last-child { border-bottom: 0; }

.hwid-device__main { flex: 1 1 150px; min-width: 0; }

.hwid-device__model {
  display: block;
  font-size: 14.5px;
  color: var(--zp-ink);
  overflow-wrap: anywhere;
}

.hwid-device__id {
  display: block;
  margin-top: 3px;
  padding: 0;
  max-width: 100%;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--zp-font-mono);
  font-size: 11px;
  color: var(--zp-ink-3);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hwid-device__id:hover { color: var(--zp-gold); }

.hwid-device__meta {
  display: block;
  margin-top: 3px;
  font-family: var(--zp-font-mono);
  font-size: 10.5px;
  color: var(--zp-ink-3);
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hwid-device__unbind {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 98, 93, 0.3);
  background: transparent;
  font-family: var(--zp-font-text);
  font-size: 13px;
  color: var(--zp-err-ink);
  cursor: pointer;
  transition: background-color 200ms var(--zp-ease), border-color 200ms var(--zp-ease);
}

.hwid-device__unbind:hover:not([disabled]) { background: rgba(255, 98, 93, 0.12); border-color: rgba(255, 98, 93, 0.55); }
.hwid-device__unbind[disabled] { opacity: 0.5; cursor: not-allowed; }

.hwid-note {
  margin-top: 14px;
  font-family: var(--zp-font-mono);
  font-size: 11px;
  line-height: 1.65;
  color: var(--zp-ink-3);
}


/* ============================================================================
   5. Профиль, настройки, безопасность, привязка Telegram
   ============================================================================ */

.profile-push-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: clamp(16px, 2vw, 22px);
  border-radius: var(--zp-r-tile-sm);
  border: 1px solid rgba(255, 184, 0, 0.32);
  background: rgba(255, 184, 0, 0.06);
}

.profile-push-banner > div:first-child { flex: 1 1 260px; min-width: 0; }
.profile-push-banner strong { font-size: 15px; font-weight: 600; color: var(--zp-ink); }
.profile-push-banner p { margin-top: 5px; font-size: 13.5px; }
.profile-push-banner__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Шапка профиля --- */
.profile-command {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2.6vw, 32px);
  padding: clamp(22px, 2.8vw, 36px);
}

.profile-command__identity {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-command__who { min-width: 0; }

.profile-command__who h1 {
  margin-top: 6px;
  font-family: var(--zp-font-display);
  font-weight: 300;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--zp-ink);
  overflow-wrap: anywhere;
}

.profile-command__email {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--zp-font-mono);
  font-size: 12.5px;
  color: var(--zp-ink-3);
  overflow-wrap: anywhere;
}

/* Баланс в шапке профиля — та же золотая карточка, что в макете на главной:
   радиальный градиент, тёмные чернила, кнопка пополнения тёмной плашкой. */
.profile-command__balance {
  position: relative;
  overflow: hidden;
  flex: 0 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(16px, 2vw, 22px);
  border-radius: var(--zp-r-tile);
  border: 1px solid transparent;
  background: var(--zp-grad-gold-card);
  box-shadow: var(--zp-shadow-gold-card);
  color: var(--zp-on-gold);
}

.profile-command__balance .zp-eyebrow { color: rgba(40, 20, 0, 0.7); }

.profile-command__balance strong {
  font-family: var(--zp-font-display);
  font-weight: 300;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--zp-on-gold);
  overflow-wrap: anywhere;
}

.profile-command__balance strong small { font-size: 0.42em; margin-left: 6px; color: rgba(40, 20, 0, 0.75); }

.profile-command__balance a {
  align-self: flex-start;
  padding: 11px 18px;
  border-radius: var(--zp-r-btn-sm);
  background: #120b00;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--zp-gold-light);
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(40, 20, 0, 0.35);
  transition: transform var(--zp-t-fast) var(--zp-ease);
}

.profile-command__balance a:hover { color: var(--zp-gold-light); transform: translateY(-2px); }

/* --- Сетка профиля --- */
.profile-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 14px;
  align-items: start;
}

.profile-panel {
  min-width: 0;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--zp-r-card);
  background: var(--zp-grad-card);
  border: 1px solid var(--zp-hairline);
  box-shadow: var(--zp-shadow-card);
}

.profile-data-list { display: grid; gap: 2px; margin: 0; }

.profile-data-list > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(246, 240, 228, 0.07);
}

.profile-data-list > div:last-child { border-bottom: 0; }
.profile-data-list dt { margin: 0; font-size: 13.5px; color: var(--zp-ink-3); }

.profile-data-list dd {
  margin: 0;
  font-family: var(--zp-font-mono);
  font-size: 13px;
  color: var(--zp-ink);
  text-align: right;
  overflow-wrap: anywhere;
}

.profile-action-list { display: grid; gap: 8px; }

.profile-action-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--zp-r-btn-sm);
  border: 1px solid var(--zp-hairline);
  background: rgba(255, 255, 255, 0.02);
  color: var(--zp-ink);
  text-decoration: none;
  transition: transform var(--zp-t-fast) var(--zp-ease), border-color var(--zp-t-fast) var(--zp-ease);
}

.profile-action-list a:hover { transform: translateX(3px); border-color: rgba(255, 184, 0, 0.45); }
.profile-action-list a > span:first-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.profile-action-list strong { font-size: 14.5px; font-weight: 600; }
.profile-action-list small { font-size: 12.5px; color: var(--zp-ink-3); }
.profile-action-list a > span:last-child { color: var(--zp-gold); }

.profile-trial-status {
  margin-top: 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--zp-r-btn-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--zp-hairline);
  font-size: 13.5px;
  color: var(--zp-ink-3);
}

.profile-trial-status strong { font-family: var(--zp-font-mono); font-size: 13px; color: var(--zp-ink); }

.profile-logout { margin-top: 16px; }
.profile-logout .btn { width: 100%; }

.profile-support__links { display: flex; flex-wrap: wrap; gap: 10px; }

.profile-support h2 {
  margin-top: 6px;
  font-family: var(--zp-font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -0.03em;
  color: var(--zp-ink);
}

.profile-support p:last-child { margin-top: 8px; font-size: 14px; color: var(--zp-ink-2); }

/* --- Настройки аккаунта ---
   Заголовок экрана живёт в шапке кабинета, здесь только надстрочник и лид. */
.settings-heading { margin-bottom: 18px; }

.settings-heading__lead { margin-top: 10px; max-width: 58ch; font-size: 15px; color: var(--zp-ink-2); }

.settings-grid,
.settings-notification-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 14px;
  align-items: start;
}

.settings-panel { min-width: 0; }

.settings-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
}

.card-footer .settings-actions-row { margin: 0; }

.setting-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(246, 240, 228, 0.07);
}

.setting-row:last-child { border-bottom: 0; }
.setting-row > div { min-width: 0; }
.setting-label { font-size: 14.5px; color: var(--zp-ink); }
.setting-field { margin-top: 12px; }

/* --- Безопасность --- */
.security-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 14px;
  align-items: start;
}

.security-intro {
  position: relative;
  min-width: 0;
  padding: clamp(22px, 2.8vw, 36px);
}

.security-intro__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
  border-radius: var(--zp-r-tile-sm);
  background: rgba(255, 184, 0, 0.12);
  color: var(--zp-gold);
}

.security-intro h1 {
  margin-top: 10px;
  font-family: var(--zp-font-display);
  font-weight: 300;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--zp-ink);
}

.security-intro__lead { margin-top: 14px; max-width: 46ch; font-size: 15px; color: var(--zp-ink-2); }

.security-intro__rules {
  margin-top: 20px;
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
}

.security-intro__rules li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  color: var(--zp-ink-3);
}

.security-intro__rules li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: var(--zp-gold);
}

.security-form-panel { min-width: 0; }

/* --- Привязка Telegram --- */
.profile-link-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2.4vw, 28px);
  padding: clamp(22px, 2.8vw, 36px);
}

.profile-link-hero > div { flex: 1 1 280px; min-width: 0; }

.profile-link-hero__icon {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: var(--zp-r-tile-sm);
  background: var(--zp-tg);
  color: var(--zp-tg-ink);
  box-shadow: 0 10px 26px rgba(30, 143, 214, 0.35);
}

.profile-link-hero h1 {
  margin-top: 8px;
  font-family: var(--zp-font-display);
  font-weight: 300;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--zp-ink);
}

.profile-link-hero__lead { margin-top: 12px; max-width: 62ch; font-size: 15px; color: var(--zp-ink-2); }

.profile-link-guarantees {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px;
}

.profile-link-guarantees > div {
  display: flex;
  gap: 14px;
  min-width: 0;
  padding: clamp(16px, 2vw, 22px);
  border-radius: var(--zp-r-tile-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--zp-hairline);
}

.profile-link-guarantees__num {
  flex: 0 0 auto;
  font-family: var(--zp-font-display);
  font-weight: 300;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(255, 184, 0, 0.55);
}

.profile-link-guarantees p { min-width: 0; font-size: 13.5px; color: var(--zp-ink-2); }

.profile-link-guarantees strong {
  display: block;
  margin-bottom: 5px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--zp-ink);
}

.profile-link-panel { min-width: 0; }

.profile-link-state {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px 18px;
  padding: clamp(16px, 2vw, 22px);
  border-radius: var(--zp-r-tile-sm);
  border: 1px solid var(--zp-hairline);
  background: rgba(255, 255, 255, 0.02);
}

.profile-link-state > div { flex: 1 1 260px; min-width: 0; }

.profile-link-state__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--zp-r-btn-sm);
  background: rgba(255, 184, 0, 0.12);
  color: var(--zp-gold);
}

.profile-link-state h2 {
  margin-top: 6px;
  font-family: var(--zp-font-display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--zp-ink);
}

.profile-link-state p { margin-top: 8px; font-size: 14px; color: var(--zp-ink-2); }

.profile-link-state--success {
  border-color: var(--zp-ok-line);
  background: var(--zp-ok-bg);
}

.profile-link-state--success .profile-link-state__icon {
  background: rgba(88, 184, 120, 0.16);
  color: var(--zp-ok-ink);
}

.profile-link-state--neutral .profile-link-state__icon {
  background: rgba(255, 255, 255, 0.05);
  color: var(--zp-ink-2);
}

.profile-link-unlink {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--zp-hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
}

.profile-link-unlink p { flex: 1 1 280px; min-width: 0; font-size: 13.5px; color: var(--zp-ink-3); }

.profile-link-connect { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }

.profile-link-connect .profile-link-tg {
  background: var(--zp-tg);
  border-color: transparent;
  color: var(--zp-tg-ink);
  box-shadow: 0 12px 30px rgba(30, 143, 214, 0.3);
}

.profile-link-connect .profile-link-tg:hover {
  color: var(--zp-tg-ink);
  border-color: transparent;
  transform: translateY(-2px);
}


/* ============================================================================
   6. Реферальная программа
   ============================================================================ */

.referral-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2.4vw, 32px);
  padding: clamp(22px, 2.8vw, 36px);
}

.referral-hero > div { flex: 1 1 300px; min-width: 0; }

.referral-hero h1 {
  margin-top: 8px;
  font-family: var(--zp-font-display);
  font-weight: 300;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--zp-ink);
}

.referral-hero p:last-child { margin-top: 12px; max-width: 54ch; font-size: 15px; color: var(--zp-ink-2); }

.referral-hero__mark {
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: var(--zp-r-tile);
  background: rgba(255, 184, 0, 0.1);
  border: 1px solid rgba(255, 184, 0, 0.3);
  color: var(--zp-gold);
  animation: zp-float 8s ease-in-out infinite;
}

.cabinet-referral .kpi-icon.primary,
.cabinet-referral .kpi-icon.info { background: rgba(255, 184, 0, 0.12); color: var(--zp-gold); }
.cabinet-referral .kpi-icon.success { background: var(--zp-ok-bg); color: var(--zp-ok-ink); }
.cabinet-referral .kpi-icon.warning { background: var(--zp-warn-bg); color: var(--zp-warn); }
.cabinet-referral .kpi-icon.danger { background: var(--zp-err-bg); color: var(--zp-err-ink); }

.cabinet-referral .alert-title {
  display: block;
  margin-bottom: 4px;
  font-family: var(--zp-font-display);
  font-weight: 500;
  font-size: 15.5px;
  letter-spacing: -0.02em;
}

/* Обёртка и шапка таблицы из старой темы приходят со слейтовым фоном
   (и sticky у th) — в тёмной золотой теме это чужеродная полоса */
.cabinet-referral .table-wrap {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--zp-hairline);
  border-radius: var(--zp-r-tile-sm);
  overflow: hidden;
}
/* Шапка таблицы из старой темы приходит со слейтовым фоном и sticky —
   в тёмной золотой теме это чужеродная полоса */
.cabinet-referral .table th {
  background: transparent;
  position: static;
  font-family: var(--zp-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--zp-ink-3);
  border-bottom: 1px solid var(--zp-hairline);
}

.cabinet-referral .table td { color: var(--zp-ink); border-bottom: 1px solid rgba(246, 240, 228, 0.06); }
.cabinet-referral .table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

.cabinet-referral .divider {
  height: 1px;
  margin: 20px 0;
  border: 0;
  background: var(--zp-hairline);
}

/* Поле со ссылкой + «Копировать» */
.copy-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.copy-wrap code {
  flex: 1 1 240px;
  min-width: 0;
  padding: 13px 15px;
  border-radius: var(--zp-r-input);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 184, 0, 0.3);
  font-family: var(--zp-font-mono);
  font-size: 12.5px;
  color: var(--zp-gold-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copy-wrap .btn { flex: 0 0 auto; }

.referral-link-hint { margin: 0; font-size: 13px; color: var(--zp-ink-3); }

.referral-money-card {
  min-width: 0;
  padding: clamp(16px, 2vw, 20px);
  border-radius: var(--zp-r-tile-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--zp-hairline);
}

.referral-money-card__title {
  display: block;
  margin-bottom: 12px;
  font-family: var(--zp-font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--zp-ink);
}

.referral-money-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(246, 240, 228, 0.07);
}

.referral-money-row:last-child { border-bottom: 0; }

.referral-money-value {
  font-family: var(--zp-font-mono);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--zp-ink);
}

.referral-money-value--warn { color: var(--zp-warn); }
.referral-money-value--info { color: var(--zp-gold-light); }

.referral-payout-actions { margin-top: 18px; display: grid; gap: 12px; }
.referral-payout-form { margin-top: 12px; }

.referral-disclosure {
  cursor: pointer;
  list-style: none;
  width: fit-content;
}

.referral-disclosure::-webkit-details-marker { display: none; }

.referral-empty-mark { margin-bottom: 14px; color: var(--zp-ink-3); }

/* Как это работает */
.step-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px;
}

.step-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--zp-r-tile);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--zp-hairline);
  text-align: left;
  transition: transform var(--zp-t-mid) var(--zp-ease), border-color var(--zp-t-mid) var(--zp-ease);
}

.step-card:hover { transform: translateY(-4px); border-color: rgba(255, 184, 0, 0.45); }

.step-number {
  /* сбрасываем кружок из старой темы: в Obsidian Gold номер — водяной знак */
  width: auto;
  height: auto;
  margin: 0;
  background: none;
  border-radius: 0;
  display: block;
  position: absolute;
  right: 10px;
  top: -18px;
  font-family: var(--zp-font-display);
  font-weight: 200;
  font-size: 110px;
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(255, 184, 0, 0.07);
  pointer-events: none;
}

.step-title {
  position: relative;
  font-family: var(--zp-font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--zp-ink);
}

.step-text { position: relative; margin-top: 10px; font-size: 13.5px; color: var(--zp-ink-2); }


/* ============================================================================
   7. Служебные экраны
   ============================================================================ */

.cabinet-message { align-items: center; }

.cabinet-message__card {
  width: 100%;
  max-width: 560px;
  padding: clamp(26px, 3.4vw, 44px);
  text-align: center;
}

.cabinet-message__icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: var(--zp-r-tile-sm);
  background: rgba(255, 184, 0, 0.12);
  color: var(--zp-gold);
}

.cabinet-message__icon--lg { width: 76px; height: 76px; }
.cabinet-message__icon--ok { background: var(--zp-ok-bg); color: var(--zp-ok-ink); }
.cabinet-message__icon--err { background: var(--zp-err-bg); color: var(--zp-err-ink); }
.cabinet-message__icon--warn { background: var(--zp-warn-bg); color: var(--zp-warn); }

.cabinet-message__code {
  font-family: var(--zp-font-display);
  font-weight: 200;
  font-size: clamp(48px, 9vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  background: var(--zp-grad-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cabinet-message__title {
  margin-top: 10px;
  font-family: var(--zp-font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 27px);
  letter-spacing: -0.03em;
  color: var(--zp-ink);
}

.cabinet-message__text { margin-top: 12px; font-size: 15px; color: var(--zp-ink-2); }
.cabinet-message__note { margin-top: 10px; font-size: 13.5px; color: var(--zp-ink-3); }

.cabinet-message__actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.cabinet-message__merge {
  margin-top: 20px;
  padding: clamp(16px, 2vw, 22px);
  border-radius: var(--zp-r-tile-sm);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--zp-hairline);
  text-align: left;
}

.cabinet-message__support {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--zp-hairline);
  display: grid;
  gap: 8px;
  text-align: left;
}

.cabinet-message__support p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}


/* ============================================================================
   8. Адаптив
   ============================================================================ */

@media (max-width: 1280px) {
  /* пересчёт от макетной базы min(58%,360px) */
  .cabinet-hero__mark { width: min(52%, 290px); }
}

@media (max-width: 1024px) {
  /* Плитка «Управление» занимает всю строку, иначе её кнопки встают столбиком */
  .cabinet-stat--actions { grid-column: 1 / -1; }
  .cabinet-hero__body { max-width: 72%; }
}

@media (max-width: 768px) {
  .cabinet-hero__copy { min-height: 0; }
  .cabinet-hero__mark { width: 180px; top: -26px; right: -26px; }
  .cabinet-hero__body { max-width: 100%; }
  .cabinet-hero__copy h1,
.cabinet-hero__copy h2 { max-width: 100%; }
  .profile-command__balance { flex: 1 1 100%; }
  /* Шаги мастера подключения: на узком экране остаются только номера */
  .connect-steps__label { display: none; }
  .connect-panel { min-height: 0; }
  .connect-panel__summary { margin-left: 0; flex: 1 1 100%; }
  .cabinet-empty { text-align: left; }
  .cabinet-empty__actions .btn,
  .cabinet-empty__form .btn { flex: 1 1 200px; }
}

@media (max-width: 640px) {
  .dashboard-subscription__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sub-card-meta { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .profile-data-list > div { flex-direction: column; align-items: flex-start; gap: 4px; }
  .profile-data-list dd { text-align: left; }
  .step-number { font-size: 84px; top: -12px; }
  .bypass-panel__status { order: 3; }
}

@media (max-width: 380px) {
  .cabinet-hero__mark { display: none; }
  .sub-ring { width: 54px; height: 54px; }
  .cabinet-action { gap: 10px; }
}

/* Уважаем системную настройку «меньше движения»: парение и дыхание выключаются
   общим правилом из tokens.css, здесь дополнительно гасим сдвиги при наведении */
@media (prefers-reduced-motion: reduce) {
  .cabinet-stat,
  .cabinet-action,
  .sub-card,
  .step-card,
  .dashboard-tariff,
  .dashboard-subscription,
  .main-plan-choice,
  .profile-action-list a { transition: none; }

  a.cabinet-stat:hover,
  .cabinet-action:hover,
  .sub-card:hover,
  .step-card:hover,
  .dashboard-tariff:hover,
  .dashboard-subscription:hover,
  .main-plan-choice:hover:not([disabled]),
  .profile-action-list a:hover { transform: none; }
}