/* ═══════════════════════════════════════════════════════════════════════
   БИОЗАРЯД · кабинет покупателя в «Формуляре»: вход по коду из письма,
   обзор, заказы, баллы и история, ссылка для рекомендаций, профиль.

   Основа — page.css и shell.css: палитра, шапка, шапка страницы, кнопки,
   четыре кегля текста (--fs-title / --fs-sub / --fs-body / --fs-fine).
   Числа, коды, даты и метки — Martian Mono, это графика, а не текст.
   Цветных полосок-акцентов нет: блок выделяется подложкой, тонкой рамкой
   или воздухом.

   Раскладка выбрана директором по маркетингу 02.10.2026 — «карточка
   в боковой колонке»: счёт, статус, код и QR всегда под рукой,
   справа — содержимое раздела.

   Источник — прототип web/pages/account/account.css. Ссылка «Кабинет»
   в шапке живёт в shell.css (шапка общая), блок программы в корзине —
   в loyalty.css. Ниже прототипа — то, чего в нём не было: статус в
   карточке, шкала начисления, смена кода, сообщение после действия.
   ═══════════════════════════════════════════════════════════════════════ */

.acc{
  --on-deep:#DBE3C4;          /* второстепенный текст на тёмно-зелёном, 4,7 : 1 */
  --wait-ink:#9A4A05;         /* «ждёт оплаты» на светло-оранжевом, 5,7 : 1 */
  --side:clamp(282px,23vw,330px);
  padding-top:clamp(2px,.6vw,8px); padding-bottom:clamp(56px,6vw,104px)}
.acc input, .acc textarea{caret-color:var(--ink)}
/* Заголовок экрана бывает длинным («Помог себе — передай БИОЗАРЯД другому») — переносится ровно. */
.bza .phead h1{text-wrap:balance}
/* Шапка раздела в кабинете плотнее, чем на страницах-статьях: меню кабинета
   должно целиком помещаться в первый экран ноутбука. */
.bza .phead{padding-top:clamp(16px,2vw,30px)}
.bza .crumbs{margin-bottom:clamp(10px,1.2vw,16px)}
/* Внутри кабинета section — группа с заголовком, а не полоса страницы:
   поля и метка раздела из page.css ей не нужны. */
.acc section{padding:0}

/* ── Раскладка: карточка и меню слева, раздел справа ────────────────── */
.acc__grid{display:grid; gap:clamp(22px,3vw,48px); align-items:start}
.acc__side{display:grid; gap:14px; min-width:0}
.acc__main{display:grid; gap:clamp(30px,3.4vw,48px); min-width:0}
@media (min-width:1000px){
  .acc__grid{grid-template-columns:var(--side) minmax(0,1fr)}
}
/* Боковая колонка едет за страницей, только если помещается в экран целиком. */
@media (min-width:1000px) and (min-height:880px){
  .acc__side{position:sticky; top:96px}
}

/* ── Карточка участника ────────────────────────────────────────────── */
.acc-card{position:relative; isolation:isolate; overflow:hidden; border-radius:var(--r-lg);
  background:var(--deep); color:#FFFFFF; padding:22px 22px 20px; display:grid; gap:0}
.acc-card__net{position:absolute; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none}
.acc-card__row{padding:13px 0; border-top:1px solid rgba(255,255,255,.2)}
.acc-card__row:first-of-type{padding-top:0; border-top:0}
.acc-card__row:last-child{padding-bottom:0}
.acc-card__name{font-size:var(--fs-sub); font-weight:700; line-height:1.2; letter-spacing:-.012em}
.acc-card__mail{display:block; margin-top:3px; font-size:var(--fs-fine); line-height:1.4;
  color:var(--on-deep); overflow-wrap:anywhere}
.acc-card__name--mail{font-size:var(--fs-body); overflow-wrap:anywhere}
a.acc-card__mail{color:#FFFFFF; font-weight:700; text-underline-offset:3px}
.acc-card__l{display:block; font-family:'Martian Mono',ui-monospace,monospace; font-size:10.5px;
  font-weight:600; line-height:1.3; letter-spacing:.11em; text-transform:uppercase; color:var(--on-deep)}
.acc-card__bal{display:flex; align-items:baseline; gap:10px; margin-top:8px}
.acc-card__bal b{font-family:'Martian Mono',ui-monospace,monospace; font-weight:500; font-size:44px;
  line-height:1; letter-spacing:-.06em; word-spacing:-.3em; font-feature-settings:'tnum' 1}
.acc-card__bal span{font-size:var(--fs-body); color:var(--on-deep)}
.acc-card__wait{margin-top:8px; font-size:var(--fs-fine); line-height:1.45; color:var(--on-deep)}
.acc-card__wait .num{color:#FFFFFF}
/* Процент списания одной строкой — в компактной карточке, где ступеней нет. */
.acc-card__pct{margin-top:8px; font-size:var(--fs-fine); line-height:1.4; color:var(--on-deep)}
.acc-card__pct b{color:#FFFFFF; font-family:'Martian Mono',ui-monospace,monospace; font-weight:600; letter-spacing:-.03em}
.acc-card:not(.is-compact) .acc-card__pct{display:none}

.acc-card__lvlrow{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px}
.lvl{display:flex; gap:6px}
.lvl span{font-family:'Martian Mono',ui-monospace,monospace; font-size:12.5px; font-weight:600;
  letter-spacing:-.03em; padding:5px 9px; border-radius:6px; color:var(--on-deep);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
.lvl span.on{background:#FFFFFF; color:var(--deep); box-shadow:none}

.acc-card__code{display:flex; align-items:center; justify-content:space-between; gap:14px}
.acc-card__cv{display:block; margin-top:6px; font-family:'Martian Mono',ui-monospace,monospace;
  font-size:21px; font-weight:600; letter-spacing:.02em}
.acc-card__qr{flex:none; width:68px; height:68px; padding:6px; border:0; border-radius:9px;
  background:#FFFFFF; cursor:pointer; transition:transform .2s var(--e), box-shadow .2s}
.acc-card__qr:hover{transform:scale(1.04); box-shadow:0 8px 20px rgba(0,0,0,.22)}
.acc-card__qr svg{width:100%; height:100%}
.acc-card__btns{display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:14px}

/* Кнопки на тёмно-зелёном поле: белая обводка, при наведении — белая заливка. */
.btn-deep{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px;
  padding:10px 14px; border:0; border-radius:8px; cursor:pointer; font:inherit; font-size:15px;
  font-weight:700; color:#FFFFFF; background:transparent; text-decoration:none;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55); transition:background .2s, color .2s, box-shadow .2s}
.btn-deep:hover{background:#FFFFFF; color:var(--deep); box-shadow:none}
.btn-deep svg{width:18px; height:18px; flex:none}
.btn-deep.is-done{background:#FFFFFF; color:var(--deep); box-shadow:none}

/* В разделах карточка компактная: счёт и код с QR. На странице рекомендаций —
   только счёт, ссылка и QR там крупно. Полная карточка — на обзоре. */
.acc-card.is-compact .acc-card__row--who,
.acc-card.is-compact .acc-card__row--lvl,
.acc-card.is-compact .acc-card__btns{display:none}
.acc-card.is-compact .acc-card__row--sum{padding-top:0; border-top:0}
.acc-card.is-bare .acc-card__row--code{display:none}
.acc-card.is-bare .acc-card__row--sum{padding-bottom:0}

/* ── Меню кабинета ─────────────────────────────────────────────────── */
.acc-nav{display:grid; gap:2px}
.acc-nav a, .acc-nav button{display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; padding:11px 14px; border:0; border-radius:8px; background:transparent; cursor:pointer;
  font:inherit; font-size:16px; font-weight:700; color:#2E2E2E; text-align:left; text-decoration:none;
  transition:background .2s, color .2s}
.acc-nav a:hover, .acc-nav button:hover{background:var(--tint)}
.acc-nav a[aria-current="page"]{background:var(--tint); color:var(--ink)}
.acc-nav .l-short{display:none}
.acc-nav .n{font-family:'Martian Mono',ui-monospace,monospace; font-size:12px; font-weight:500;
  letter-spacing:-.04em; color:var(--g700)}
/* Переход между кабинетом покупателя и кабинетом партнёра — тише разделов. */
.acc-nav .acc-nav__alt{font-weight:400; color:var(--g700)}
.acc-nav__out{margin-top:6px; padding-top:6px; border-top:1px solid var(--hair)}
.acc-nav__out button{font-weight:400; color:var(--g700); justify-content:flex-start}
.acc-nav__out svg{width:18px; height:18px}

/* Узкий экран: меню — вкладки под карточкой, переносятся строками, все на виду.
   Выход — в профиле. */
@media (max-width:999px){
  .acc-nav{display:flex; flex-wrap:wrap; gap:6px}
  .acc-nav a{width:auto; gap:8px; padding:9px 13px; box-shadow:inset 0 0 0 1px var(--line); white-space:nowrap}
  .acc-nav a[aria-current="page"]{box-shadow:inset 0 0 0 1px var(--acc)}
  .acc-nav__out{display:none}
  .acc-nav .l-full{display:none}
  .acc-nav .l-short{display:inline}
}

/* Карточка на узком экране. На обзоре — целиком, в остальных разделах —
   компактно: счёт и код с QR, без имени, ступеней и кнопок. */
@media (max-width:999px){
  .acc-card{padding:18px}
  .acc-card__row{padding:12px 0}
  .acc-card__bal b{font-size:36px}
}
@media (min-width:600px) and (max-width:999px){
  .acc-card{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:28px}
  .acc-card__row--who, .acc-card__row--code{grid-column:1/-1}
  .acc-card__row--sum, .acc-card__row--lvl{border-top:1px solid rgba(255,255,255,.2)}
  .acc-card.is-compact .acc-card__row--sum{border-top:0}
  .acc-card.is-compact .acc-card__row--code{grid-column:auto; border-top:0; padding:0}
  .acc-card.is-bare{grid-template-columns:1fr}
}

/* ── Заголовки разделов внутри кабинета ────────────────────────────── */
.acc-h2{display:flex; align-items:baseline; justify-content:space-between; gap:8px 16px; flex-wrap:wrap;
  margin:0 0 16px; font-size:var(--fs-sub); font-weight:700; line-height:1.22; letter-spacing:-.016em; color:var(--g900)}
.acc-h2 a, .acc-h2 .lnk{font-size:var(--fs-fine); font-weight:700; letter-spacing:0}
.acc-p{font-size:var(--fs-body); line-height:1.55; color:var(--g700); max-width:68ch}
.acc-fine{font-size:var(--fs-fine); line-height:1.55; color:var(--g700); max-width:80ch}
.acc-fine a, .acc-p a{color:var(--ink); font-weight:700; text-underline-offset:3px}

/* Ссылка-кнопка: действие второго ряда без рамки. */
.lnk{display:inline-flex; align-items:center; gap:7px; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; font-weight:700; color:var(--ink); text-decoration:none; text-underline-offset:3px}
.lnk:hover{text-decoration:underline}
.lnk svg{width:17px; height:17px; flex:none}

.btn--sm{padding:13px 22px; font-size:15.5px}
.btn svg{width:19px; height:19px; flex:none}
.btn--line{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px;
  border:0; border-radius:8px; background:#FFFFFF; color:var(--ink); cursor:pointer; font:inherit;
  font-size:15.5px; font-weight:700; text-decoration:none; box-shadow:inset 0 0 0 2px var(--leaf);
  transition:.2s var(--e)}
.btn--line:hover{background:var(--leaf); color:#FFFFFF; box-shadow:none}
.btn--line svg{width:18px; height:18px; flex:none}
.btn--line.is-done{background:var(--tint); color:var(--ink); box-shadow:inset 0 0 0 2px var(--acc)}

/* ── Статус заказа ─────────────────────────────────────────────────── */
.st{display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 9px; border-radius:999px;
  font-size:var(--fs-fine); font-weight:700; line-height:1.25; white-space:nowrap}
.st::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}
.st--paid{background:var(--tint); color:var(--ink)}
.st--wait{background:var(--tint-2); color:var(--wait-ink)}
.st--off{background:var(--field); color:var(--g700)}

.ord-no{font-family:'Martian Mono',ui-monospace,monospace; font-size:13px; font-weight:500;
  letter-spacing:-.03em; color:var(--g700)}
.money{font-family:'Martian Mono',ui-monospace,monospace; font-weight:500; letter-spacing:-.05em;
  word-spacing:-.3em; font-feature-settings:'tnum' 1; color:var(--g900); white-space:nowrap}

/* Начисление за заказ: значок-искра и строка. */
.earn{display:flex; align-items:flex-start; gap:9px; font-size:var(--fs-fine); line-height:1.45; color:var(--ink)}
.earn svg{width:17px; height:17px; flex:none; margin-top:1px}
.earn.is-wait{color:var(--g700)}
.earn.is-off{color:var(--g700)}
.earn .num{font-weight:600}

/* ── Последний заказ ───────────────────────────────────────────────── */
.ord-hero{display:grid; grid-template-columns:clamp(112px,12vw,168px) minmax(0,1fr);
  grid-template-areas:"shot head" "shot body" "shot act"; align-items:start;
  column-gap:clamp(16px,2.2vw,30px); padding:clamp(18px,2.2vw,28px); border-radius:var(--r-lg);
  background:#FFFFFF; box-shadow:inset 0 0 0 1px var(--line)}
.ord-hero > .shot{grid-area:shot}
.ord-hero__head{grid-area:head; min-width:0}
.ord-hero__body{grid-area:body; min-width:0}
.ord-hero > .ord-act{grid-area:act}
.shot{position:relative; aspect-ratio:1; border-radius:var(--r); background:var(--tint); overflow:hidden}
.shot img{position:absolute; left:12%; top:9%; width:76%; height:82%; object-fit:contain;
  filter:drop-shadow(0 10px 12px rgba(52,52,52,.2))}
.shot--apple{background:var(--leaf-tint)}
.shot--citrus{background:var(--tint-2)}
.ord-hero__top{display:flex; align-items:center; justify-content:space-between; gap:8px 14px; flex-wrap:wrap}
.ord-hero__t{margin-top:10px; font-size:var(--fs-sub); font-weight:700; line-height:1.22; letter-spacing:-.014em}
.ord-hero__what{margin-top:2px; color:var(--g700)}
.ord-hero__pay{display:flex; align-items:baseline; gap:6px 14px; flex-wrap:wrap; margin-top:12px}
.ord-hero__pay .money{font-size:21px}
.ord-hero__pay span{font-size:var(--fs-fine); color:var(--g700)}
.ord-hero .earn{margin-top:14px; padding-top:14px; border-top:1px solid var(--hair)}
.ord-act{display:flex; align-items:center; flex-wrap:wrap; gap:12px 22px; margin-top:18px}
@media (max-width:560px){
  .ord-hero{grid-template-columns:72px minmax(0,1fr); grid-template-areas:"shot head" "body body" "act act";
    column-gap:14px}
  .ord-hero__t{margin-top:6px}
  .ord-hero .ord-act .btn{width:100%}
}

/* ── Список заказов ────────────────────────────────────────────────── */
.ords{display:grid; gap:14px}
.ord{border-radius:var(--r-lg); background:#FFFFFF; box-shadow:inset 0 0 0 1px var(--line);
  padding:clamp(16px,1.8vw,24px); transition:box-shadow .2s var(--e)}
.ord.is-open{box-shadow:inset 0 0 0 1px var(--acc)}
.ord__head{display:flex; align-items:center; justify-content:space-between; gap:8px 14px; flex-wrap:wrap}
.ord__id{display:flex; align-items:baseline; gap:6px 12px; flex-wrap:wrap}
.ord__date{font-size:var(--fs-fine); color:var(--g700)}
.ord__body{display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:16px; align-items:center;
  margin-top:14px}
.ord__what b{display:block; font-size:var(--fs-body); font-weight:700; color:var(--g900)}
.ord__what span{display:block; font-size:var(--fs-fine); color:var(--g700); line-height:1.45}
.ord__sum{text-align:right}
.ord__sum .money{display:block; font-size:18px}
.ord__sum span{display:block; margin-top:2px; font-size:var(--fs-fine); color:var(--g700)}
.ord .earn{margin-top:14px}
.ord__foot{display:flex; align-items:center; flex-wrap:wrap; gap:12px 22px; margin-top:16px;
  padding-top:14px; border-top:1px solid var(--hair)}
.ord__more svg{transition:transform .2s var(--e)}
.ord.is-open .ord__more svg{transform:rotate(180deg)}
.ord__det{margin-top:16px}
.ord__det[hidden]{display:none}
@media (max-width:560px){
  .ord__body{grid-template-columns:56px minmax(0,1fr)}
  .ord__sum{grid-column:2; text-align:left}
}

/* Короткий список на обзоре: строки без карточек. */
.ord-lines{display:grid}
.ord-line{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center;
  gap:6px 16px; padding:13px 2px; border-top:1px solid var(--hair); text-decoration:none; color:inherit;
  border-radius:4px; transition:background .2s}
.ord-line:last-child{border-bottom:1px solid var(--hair)}
.ord-line:hover{background:var(--field)}
.ord-line__what{font-size:var(--fs-body); color:var(--g900); min-width:0}
.ord-line__what small{display:block; font-size:var(--fs-fine); color:var(--g700)}
.ord-line .money{font-size:15px}
@media (max-width:560px){
  .ord-line{grid-template-columns:minmax(0,1fr) auto}
  .ord-line .ord-no{grid-column:1/-1}
  .ord-line .st{grid-column:2; grid-row:2}
  .ord-line .money{grid-column:2; grid-row:3; text-align:right}
  .ord-line__what{grid-row:2 / span 2}
}

/* ── Строки «графа — значение» ─────────────────────────────────────── */
.rec{margin:0; display:grid}
.rec > div{display:grid; grid-template-columns:minmax(120px,.34fr) minmax(0,1fr); gap:4px 20px;
  padding:12px 0; border-top:1px solid var(--hair)}
.rec > div:last-child{border-bottom:1px solid var(--hair)}
.rec dt{font-size:var(--fs-fine); line-height:1.5; color:var(--g700); padding-top:2px}
.rec dd{margin:0; font-size:var(--fs-body); line-height:1.5; color:var(--g900); min-width:0}
.rec dd .money{font-size:16px}
@media (max-width:560px){ .rec > div{grid-template-columns:1fr; gap:1px} }

/* ── Счёт: подложка с графами ──────────────────────────────────────── */
.pts-sum{border-radius:var(--r-lg); background:var(--tint); padding:clamp(18px,2.2vw,28px)}
.pts-sum .rec > div{border-color:rgba(53,127,32,.16); align-items:baseline}
.pts-sum .rec > div:first-child{border-top:0; padding-top:0}
.pts-sum .rec > div:last-child{border-bottom:0; padding-bottom:0}
.pts-sum__big{font-family:'Martian Mono',ui-monospace,monospace; font-weight:500; font-size:34px;
  line-height:1; letter-spacing:-.06em; word-spacing:-.3em; color:var(--g900)}
.pts-sum dd small{display:block; margin-top:4px; font-size:var(--fs-fine); color:var(--g700)}

/* ── Лестница списания ─────────────────────────────────────────────── */
/* Три ступени растут вправо, как и процент: высота — сам процент. */
.stairs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:6px;
  height:clamp(150px,15vw,184px); margin-top:4px}
.stairs__step{position:relative; height:calc(var(--h) * 100%); border-radius:var(--r-sm) var(--r-sm) 0 0;
  background:var(--tint); box-shadow:inset 0 0 0 1px rgba(53,127,32,.22); color:var(--ink);
  display:flex; flex-direction:column; justify-content:space-between; gap:6px; padding:12px 14px;
  transform-origin:bottom; animation:bz-rise .7s var(--e) both}
.stairs__step:nth-child(2){animation-delay:.06s}
.stairs__step:nth-child(3){animation-delay:.12s}
.stairs__step.is-done{background:var(--ink); color:#FFFFFF; box-shadow:none}
.stairs__step.is-now{background:var(--deep); color:#FFFFFF; box-shadow:none}
.stairs__pct{font-family:'Martian Mono',ui-monospace,monospace; font-size:clamp(20px,2vw,26px);
  font-weight:600; line-height:1; letter-spacing:-.05em}
.stairs__cap{font-size:var(--fs-fine); line-height:1.35}
.stairs__step.is-now .stairs__cap, .stairs__step.is-done .stairs__cap{color:var(--on-deep)}
.stairs__base{height:1px; background:var(--line)}
@keyframes bz-rise{from{transform:scaleY(.82)} to{transform:none}}

.ppl{display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; margin-top:16px}
.ppl__dots{display:flex; gap:5px}
.ppl__dots i{width:12px; height:12px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--acc)}
.ppl__dots i.on{background:var(--acc); box-shadow:none}
.ppl p{font-size:var(--fs-body); line-height:1.5; color:var(--g900)}
.ppl p .num{font-weight:600}

.stairs__now{display:block; margin-bottom:3px; font-family:'Martian Mono',ui-monospace,monospace;
  font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#FFFFFF}

/* Обзор: сколько человек купили по ссылке — одной полосой. */
.ref-strip{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:14px 24px;
  padding:18px 22px; border-radius:var(--r-lg); background:var(--tint)}
.ref-strip p{font-size:var(--fs-body); line-height:1.5; color:var(--g900)}
.ref-strip p .num{font-weight:600}
@media (max-width:760px){ .ref-strip{grid-template-columns:1fr; justify-items:start} }

/* ── Сколько спишется: таблица по наборам ──────────────────────────── */
.calc-wrap{border-radius:var(--r-lg); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden}
.acc .calc{width:100%; border-collapse:collapse; table-layout:auto}
.acc .calc th, .acc .calc td, .acc .calc tr:first-child td{padding:12px 16px; text-align:right;
  font-size:var(--fs-body); font-weight:400; color:var(--g900); background:transparent;
  border-bottom:1px solid var(--hair); vertical-align:baseline}
.acc .calc thead th{font-family:'Martian Mono',ui-monospace,monospace; font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--g700); background:var(--field)}
.acc .calc tr > :first-child, .acc .calc tr:first-child > td:first-child{text-align:left}
.acc .calc tbody tr:last-child td{border-bottom:0}
.acc .calc .money{font-size:15.5px}
.acc .calc .pts{color:var(--ink); font-weight:600}
.acc .calc td small{display:block; font-size:var(--fs-fine); color:var(--g700)}
@media (max-width:560px){
  .acc .calc th, .acc .calc td, .acc .calc tr:first-child td{padding:10px 10px}
  .acc .calc .col-price{display:none}
}

/* ── История баллов ────────────────────────────────────────────────── */
.hist{list-style:none; margin:0; padding:0; display:grid}
.hist li{display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:4px 18px; align-items:baseline;
  padding:13px 0; border-top:1px solid var(--hair)}
.hist li:last-child{border-bottom:1px solid var(--hair)}
.hist__date{font-family:'Martian Mono',ui-monospace,monospace; font-size:12.5px; letter-spacing:-.03em;
  color:var(--g700); white-space:nowrap}
.hist__what{font-size:var(--fs-body); line-height:1.45; color:var(--g900)}
.hist__what small{display:block; font-size:var(--fs-fine); color:var(--g700)}
.hist__amt{font-family:'Martian Mono',ui-monospace,monospace; font-size:16px; font-weight:600;
  letter-spacing:-.05em; white-space:nowrap}
.hist__amt.is-plus{color:var(--ink)}
.hist__amt.is-minus{color:var(--g900)}
.hist li.is-wait .hist__amt{color:var(--g700)}
@media (max-width:560px){
  .hist li{grid-template-columns:minmax(0,1fr) auto}
  .hist__date{grid-column:1/-1}
}
.hist-wait{border-radius:var(--r-lg); background:var(--field); padding:4px 18px; margin-bottom:22px}
.hist-wait li:first-child{border-top:0}
.hist-wait li:last-child{border-bottom:0}

/* ── Правила коротко ───────────────────────────────────────────────── */
.facts{list-style:none; margin:0; padding:0; display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); column-gap:clamp(20px,2.6vw,40px)}
.facts li{display:grid; grid-template-columns:22px minmax(0,1fr); gap:12px; padding:13px 0;
  border-top:1px solid var(--hair); font-size:var(--fs-body); line-height:1.5; color:var(--g900)}
.facts svg{width:20px; height:20px; color:var(--acc); margin-top:2px}
.facts b{font-weight:700}

/* ── Ссылка для рекомендаций ───────────────────────────────────────── */
.inv{display:grid; gap:clamp(20px,2.6vw,36px); border-radius:var(--r-lg); background:var(--tint);
  padding:clamp(22px,2.8vw,40px)}
@media (min-width:760px){ .inv{grid-template-columns:minmax(0,1fr) auto; align-items:center} }
.inv__how{font-size:var(--fs-sub); line-height:1.45; color:var(--g900); max-width:40ch}
.inv__link{display:grid; gap:10px; margin-top:24px; max-width:520px}
.inv__btns{display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center}
.inv__url{width:100%; min-width:0; height:54px; padding:0 16px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:#FFFFFF; font-family:'Martian Mono',ui-monospace,monospace;
  font-size:14px; letter-spacing:-.03em; color:var(--g900); text-overflow:ellipsis}
.inv__url:focus{outline:none; border-color:var(--leaf); box-shadow:0 0 0 3px rgba(136,191,89,.22)}
.inv__btns .btn{padding:14px 24px; font-size:16px; box-shadow:0 6px 18px rgba(242,139,12,.3)}
.inv__alt{display:flex; align-items:center; flex-wrap:wrap; gap:10px 22px; margin-top:16px;
  font-size:var(--fs-body); color:var(--g700)}
.inv__alt .num{font-size:15px; font-weight:600; color:var(--g900)}
.inv__code{display:inline-flex; align-items:baseline; gap:8px}
@media (max-width:560px){
  .inv__btns .btn, .inv__btns .btn--line{flex:1 1 100%}
}
.inv__qr{margin:0; display:grid; justify-items:center; gap:10px; text-align:center}
.qr-box{width:clamp(172px,16vw,212px); aspect-ratio:1; padding:12px; border-radius:var(--r);
  background:#FFFFFF; box-shadow:0 10px 30px rgba(53,127,32,.14)}
.qr-box svg{display:block; width:100%; height:100%}
.inv__qr figcaption{font-size:var(--fs-fine); line-height:1.45; color:var(--g700); max-width:24ch}

.steps{list-style:none; margin:0; padding:0; display:grid}
.steps li{display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; align-items:baseline;
  padding:14px 0; border-top:1px solid var(--hair); font-size:var(--fs-body); line-height:1.5; color:var(--g900)}
.steps li:last-child{border-bottom:1px solid var(--hair)}
.steps .num{font-size:20px; font-weight:600; color:var(--ink); line-height:1}

.memo{border-radius:var(--r-lg); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden}
.memo + .memo{margin-top:10px}
.memo summary{display:flex; align-items:center; justify-content:space-between; gap:14px; cursor:pointer;
  list-style:none; padding:16px 20px; font-size:var(--fs-body); font-weight:700; color:var(--g900);
  transition:background .2s}
.memo summary::-webkit-details-marker{display:none}
.memo summary:hover{background:var(--field)}
.memo summary svg{width:18px; height:18px; flex:none; color:var(--g700); transition:transform .2s var(--e)}
.memo[open] summary svg{transform:rotate(180deg)}
.memo__in{padding:0 20px 18px; display:grid; gap:10px}
.memo__in ul{margin:0; padding-left:20px; display:grid; gap:6px; font-size:var(--fs-body); line-height:1.5;
  color:var(--g900)}
.memo__in p{font-size:var(--fs-body); line-height:1.5; color:var(--g700)}

/* Наборы полей профиля: заголовок — легенда, между наборами линейка. */
.fs{margin:0; padding:0; border:0; min-width:0}
.fs + .fs{padding-top:22px; border-top:1px solid var(--hair)}
.fs > legend{float:left; width:100%; padding:0; display:block}
.fs > legend + *{clear:both}

/* ── Пустые состояния ──────────────────────────────────────────────── */
.empty{display:grid; gap:14px; justify-items:start; padding:clamp(22px,2.6vw,36px); border-radius:var(--r-lg);
  background:var(--field)}
.empty h3{font-size:var(--fs-sub); line-height:1.22}
.empty p{font-size:var(--fs-body); line-height:1.55; color:var(--g700); max-width:60ch}

/* ── Формы: профиль и вход ─────────────────────────────────────────── */
.form-grid{display:grid; gap:16px 20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.form-grid .wide{grid-column:1/-1}
.fld{display:grid; gap:7px; min-width:0}
.fld__l{font-size:var(--fs-fine); font-weight:700; color:var(--g900)}
.fld__in{width:100%; height:52px; padding:0 16px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:#FFFFFF; font:inherit; font-size:16px; color:var(--g900); transition:border-color .2s, box-shadow .2s}
.fld__in::placeholder{color:var(--g500)}
.fld__in:hover{border-color:var(--g300)}
.fld__in:focus{outline:none; border-color:var(--leaf); box-shadow:0 0 0 3px rgba(136,191,89,.22)}
.fld__in[readonly]{background:var(--field); color:var(--g700)}
.fld__in[aria-invalid="true"]{border-color:#C2410C; box-shadow:0 0 0 3px rgba(194,65,12,.12)}
.fld__row{display:flex; gap:8px}
.fld__row .fld__in{flex:1 1 auto}
.fld__hint{font-size:var(--fs-fine); line-height:1.45; color:var(--g700)}
.fld__err{font-size:var(--fs-fine); line-height:1.45; color:#B4471F; font-weight:700}
.fld__err[hidden]{display:none}

.chk{display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; align-items:start; cursor:pointer;
  font-size:var(--fs-fine); line-height:1.5; color:var(--g700)}
.chk input{width:20px; height:20px; margin:1px 0 0; accent-color:#4E9B2A; cursor:pointer}
.chk a{color:var(--ink); font-weight:700; text-underline-offset:3px}

.panel{border-radius:var(--r-lg); box-shadow:inset 0 0 0 1px var(--line); padding:clamp(18px,2.2vw,28px);
  display:grid; gap:18px; background:#FFFFFF}
.panel__act{display:flex; align-items:center; flex-wrap:wrap; gap:12px 22px}
.saved{display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-fine); font-weight:700; color:var(--ink)}
.saved svg{width:17px; height:17px}
.saved[hidden]{display:none}

/* ── Вход по коду ──────────────────────────────────────────────────── */
.auth{display:grid; gap:clamp(24px,3vw,56px); align-items:start}
@media (min-width:1000px){ .auth{grid-template-columns:minmax(0,520px) minmax(0,1fr)} }
.auth__card{border-radius:var(--r-lg); background:#FFFFFF; box-shadow:inset 0 0 0 1px var(--line),
  0 18px 44px rgba(74,74,74,.08); padding:clamp(22px,2.8vw,40px); display:grid; gap:20px}
.auth__card form{display:grid; gap:18px}
.auth__card form[hidden]{display:none}
.auth__sent{font-size:var(--fs-body); line-height:1.55; color:var(--g700)}
.auth__sent b{color:var(--g900); overflow-wrap:anywhere}
.auth__card .btn{width:100%}
.auth__card .btn:disabled{background:var(--line); color:var(--g700); box-shadow:none; cursor:not-allowed; transform:none}
.auth__again{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px;
  font-size:var(--fs-fine); color:var(--g700)}
.auth__again .lnk:disabled{color:var(--g700); font-weight:400; cursor:default; text-decoration:none}
.auth__why{display:grid; gap:4px}
.why{list-style:none; margin:0; padding:0; display:grid}
.why li{display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px; padding:18px 0;
  border-top:1px solid var(--hair)}
.why li:last-child{border-bottom:1px solid var(--hair)}
.why__ic{width:44px; height:44px; border-radius:10px; background:var(--tint); color:var(--ink);
  display:grid; place-items:center}
.why__ic svg{width:22px; height:22px}
.why b{display:block; font-size:var(--fs-body); color:var(--g900)}
/* Только подпись пункта: значок слева — тоже span, и общее «.why span» делало его
   блоком — значок уезжал в верхний угол квадрата (27.10.2026) */
.why div span{display:block; margin-top:2px; font-size:var(--fs-body); line-height:1.5; color:var(--g700)}

/* Код из письма: настоящее поле одно (автоподстановка кода из почты
   и вставка работают как обычно), шесть клеток — его отображение. */
.otp{position:relative; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; max-width:420px}
.otp__cell{display:grid; place-items:center; height:62px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:#FFFFFF; font-family:'Martian Mono',ui-monospace,monospace;
  font-size:26px; font-weight:500; color:var(--g900); transition:border-color .15s, box-shadow .15s}
.otp__cell.is-cur{border-color:var(--leaf); box-shadow:0 0 0 3px rgba(136,191,89,.22)}
.otp__cell.is-cur:empty::after{content:""; width:2px; height:28px; background:var(--ink);
  animation:bz-caret 1s steps(1) infinite}
.otp.is-bad .otp__cell{border-color:#C2410C}
.otp.is-ok .otp__cell{border-color:var(--acc); background:var(--tint); color:var(--ink)}
.otp__in{position:absolute; inset:0; width:100%; height:100%; opacity:0; border:0; padding:0;
  font-size:16px; color:transparent; background:transparent; caret-color:transparent; cursor:text}
@keyframes bz-caret{50%{opacity:0}}

/* ── Уведомление внизу экрана ──────────────────────────────────────── */
.toast{position:fixed; left:50%; bottom:clamp(16px,3vw,28px); z-index:140; display:flex; align-items:center;
  gap:10px; max-width:calc(100vw - 32px); padding:13px 18px; border-radius:10px; background:#2E2E2E;
  color:#FFFFFF; font-size:var(--fs-body); line-height:1.4; box-shadow:0 16px 40px rgba(0,0,0,.24);
  transform:translate(-50%,16px); opacity:0; pointer-events:none; transition:transform .25s var(--e), opacity .2s}
.toast.on{transform:translate(-50%,0); opacity:1; pointer-events:auto}
.toast svg{width:19px; height:19px; flex:none; color:var(--lite)}
.toast a{color:var(--lite); font-weight:700; white-space:nowrap}

/* ── QR на весь экран: показать телефон другу ──────────────────────── */
.qrdlg{width:min(460px,calc(100vw - 24px)); max-height:calc(100vh - 24px); border:0; border-radius:var(--r-lg);
  padding:clamp(24px,4vw,40px); background:#FFFFFF; color:var(--g900); text-align:center;
  box-shadow:0 32px 80px rgba(46,46,46,.32)}
.qrdlg::backdrop{background:rgba(46,46,46,.6)}
.qrdlg[open]{animation:bz-pop .26s var(--e)}
@keyframes bz-pop{from{transform:translateY(12px) scale(.98)} to{transform:none}}
.qrdlg .qr-box{width:min(320px,100%); box-shadow:none; padding:0; margin:6px auto 0}
.qrdlg h2{font-size:var(--fs-sub); line-height:1.25}
.qrdlg p{margin-top:14px; font-size:var(--fs-fine); color:var(--g700)}
.qrdlg .num{display:block; margin-top:6px; font-size:13px; color:var(--g900); overflow-wrap:anywhere}
.qrdlg__x{position:absolute; right:12px; top:12px; width:40px; height:40px; border:0; border-radius:50%;
  background:var(--field); color:var(--g700); cursor:pointer; display:grid; place-items:center}
.qrdlg__x:hover{color:var(--g900); background:var(--hair)}
.qrdlg__x svg{width:20px; height:20px}

@media (prefers-reduced-motion:reduce){
  .stairs__step, .qrdlg[open]{animation:none}
  .otp__cell.is-cur:empty::after{animation:none}
}

/* ═══ Сверх прототипа ═══════════════════════════════════════════════ */

/* Статус в карточке: название крупно, условия строкой. */
.acc-card__st{margin-top:8px; display:grid; gap:2px}
.acc-card__st b{font-size:var(--fs-sub); font-weight:700; line-height:1.2; letter-spacing:-.012em}
.acc-card__st span{font-size:var(--fs-fine); line-height:1.4; color:var(--on-deep)}
.acc-card.is-compact .acc-card__row--lvl{display:none}

/* QR рисует скрипт кабинета в пустой span. */
.bza-qr{display:block; width:100%; height:100%}
.bza-qr svg{display:block; width:100%; height:100%}

/* Формы-кнопки внутри строк действий. */
.bza-inline{display:inline-flex; margin:0}
.acc-nav__out{margin:6px 0 0}

/* Сообщение после действия: «Сохранено», ошибка смены кода. */
.acc-flash{display:flex; align-items:flex-start; gap:10px; margin:0 0 clamp(18px,2vw,26px); padding:13px 16px;
  border-radius:var(--r); background:var(--tint); color:var(--ink); font-size:var(--fs-body); line-height:1.45}
.acc-flash svg{width:19px; height:19px; flex:none; margin-top:1px}
.acc-flash.is-bad{background:var(--tint-2); color:var(--wait-ink)}

/* Ступени статусов: на ступени — скидка, название и доля оплаты баллами;
   условия — строками «графа — значение» под ступенями. */
.stairs__cap b{font-weight:700}
.stairs__cap .stairs__now{font-weight:600}
.sts-when{margin-top:16px}
.sts-when dt{font-weight:700; color:var(--g900)}

/* Шкала начисления: шесть ступеней, текущая — тёмно-зелёная. */
.tiers{list-style:none; margin:0; padding:0; display:grid; gap:6px;
  grid-template-columns:repeat(6,minmax(0,1fr))}
.tiers li{display:grid; gap:4px; padding:12px 12px 11px; border-radius:var(--r-sm); background:var(--tint);
  box-shadow:inset 0 0 0 1px rgba(53,127,32,.22); color:var(--ink)}
.tiers b{font-family:'Martian Mono',ui-monospace,monospace; font-size:20px; font-weight:600; line-height:1;
  letter-spacing:-.05em}
.tiers span{font-size:var(--fs-fine); line-height:1.35; color:var(--g700)}
.tiers li.is-now{background:var(--deep); color:#FFFFFF; box-shadow:none}
.tiers li.is-now span{color:var(--on-deep)}
@media (max-width:760px){ .tiers{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* История: отменённая операция — бледнее и зачёркнута сумма. */
.hist li.is-void .hist__what, .hist li.is-void .hist__amt{color:var(--g500)}
.hist li.is-void .hist__amt{text-decoration:line-through}

/* Смена кода приглашения. */
.code-edit{margin-top:18px}
.code-edit summary{list-style:none; cursor:pointer; width:max-content}
.code-edit summary::-webkit-details-marker{display:none}
.code-edit[open] summary svg{transform:rotate(180deg)}
.code-edit summary svg{transition:transform .2s var(--e)}
.code-edit__form{display:grid; gap:8px; margin-top:12px; max-width:440px}
.code-edit__form .fld__in{text-transform:uppercase; letter-spacing:.02em}
.code-edit__form .btn--line{flex:none}