/* Dogym payments website — design system (dark theme).
 * Palette sampled from Figma frames "Оплата" (11113:22256) and "Анкета web"
 * (11927:28810): near-black surfaces, emerald-green primary, amber for
 * prices / trial / discount badges, off-white text. */

:root {
  --web-bg: #0e0e0d;
  --web-bg-tint: #0d100e;
  --web-surface: #131414;        /* cards */
  --web-surface-2: #232325;      /* inputs, secondary buttons, table hover */
  --web-surface-3: #2c2c2e;
  --web-border: #26282a;
  --web-border-strong: #34363a;
  --web-selected: #16241d;       /* green-tinted selected bg */

  --web-text: #f4f6f5;
  --web-text-2: #d9dcda;
  --web-muted: #88888D;

  --web-green: #0A905C;
  --web-green-strong: #0aa86a;
  --web-green-dim: #0b6844;
  --web-amber: #ED7803;
  --web-amber-2: #f59020;
  --web-danger: #f06363;

  --web-radius: 20px;
  --web-radius-md: 14px;
  --web-radius-sm: 10px;
  --web-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  --web-content: 1080px;         /* wide pages (account) */
  --web-card: 560px;             /* centered card pages */
  --web-font: 'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --web-font-title: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --web-font-nav: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

.web-body {
  min-height: 100vh;
  background:
    radial-gradient(900px 480px at 88% 6%, rgba(9, 144, 92, 0.14), transparent 60%),
    radial-gradient(900px 520px at 0% 70%, rgba(9, 144, 92, 0.10), transparent 60%),
    var(--web-bg);
  color: var(--web-text-2);
  font-family: var(--web-font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* ---------- Top navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 18px 24px;
}
.nav__pill {
  display: flex; align-items: center; gap: 26px;
  background: rgba(20, 22, 21, 0.72);
  border: 1px solid #4A4A4F;
  border-radius: 999px;
  padding: 8px 8px 8px 22px;
  backdrop-filter: blur(10px);
}
.nav__logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; }
.nav__logo img { height: 28px; display: block; }
.nav__links { display: flex; align-items: center; gap: 22px; }
.nav__links a { font-family: var(--web-font-nav); color: var(--web-text); text-decoration: none; font-size: 14px; }
.nav__links a:hover { color: var(--web-text); }
.nav__cta {
  background: var(--web-green); color: #fff; font-weight: 600; font-size: 14px;
  padding: 9px 18px; border-radius: 999px; text-decoration: none;
}
.nav__cta:hover { background: var(--web-green-strong); }

.nav__account { position: absolute; right: 24px; }
.nav__login { color: var(--web-text); text-decoration: none; font-size: 14px;
  border: 1px solid var(--web-border-strong); padding: 9px 18px; border-radius: 999px; }
.nav__login:hover { background: var(--web-surface-2); }

.acct { position: relative; }
.acct__avatar {
  list-style: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--web-green); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.acct__avatar::-webkit-details-marker { display: none; }
.acct__menu {
  position: absolute; right: 0; top: 52px; min-width: 201px;
  background: var(--web-surface-2); border: 1px solid #4A4A4F;
  border-radius: 20px; padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.acct__user { display: flex; align-items: center; gap: 12px; }
.acct__ava {
  width: 28px; height: 28px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--web-green); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.acct__ava img { width: 100%; height: 100%; object-fit: cover; }
.acct__ava svg { width: 18px; height: 18px; }
.acct__email { color: #fff; font-size: 14px; }
.acct__item {
  display: flex; align-items: center; gap: 8px; background: none; border: none;
  color: var(--web-green); font-size: 14px; font-weight: 500; padding: 4px 0; border-radius: 12px;
  cursor: pointer; text-decoration: none; font-family: inherit;
}
.acct__item:hover { opacity: .8; }
.acct__icon { width: 20px; height: 20px; flex: none; }
.acct__logout { color: #D93518; }

/* ---------- Layout ---------- */
.web-main { display: flex; flex-direction: column; padding: 16px 24px 64px; }
.web-main--center { align-items: center; min-height: calc(100vh - 160px); justify-content: center; }
/* Survey wizard: pin the card to the top so the progress bar keeps a fixed
   position (~90px from the viewport top) and never jumps as step height changes. */
.web-main--survey { align-items: center; min-height: calc(100vh - 160px); justify-content: flex-start; padding-top: 24px; }
.web-main--wide { align-items: stretch; max-width: var(--web-content); width: 100%; margin: 0 auto; }
.web-main--wide .web-form { max-width: 700px; }

/* Legal footer (ИП/ОГРНИП/ИНН + регистрация) — rendered at the end of the
   checkout page, under the YooKassa pay button. Full-width top divider like the
   landing footer's border-top (spans the whole content column, not the card). */
.web-legal {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 40px; padding: 40px 4px 8px; text-align: center;
  border-top: 1px solid var(--web-border);
  font-size: 13px; line-height: 1.6; color: var(--web-muted);
}
.web-legal__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.web-legal__row--links { gap: 4px 24px; margin-bottom: 6px; }
.web-legal__sep { color: var(--web-border); }
.web-legal a { color: var(--web-muted); text-decoration: none; transition: color .2s; }
.web-legal a:hover { color: var(--web-text); }

.web-messages { list-style: none; margin: 0 0 16px; padding: 0; width: 100%; max-width: var(--web-card); align-self: center; }
.web-message { border-radius: 12px; padding: 12px 16px; margin-bottom: 8px; font-size: 14px;
  background: var(--web-surface-2); border: 1px solid var(--web-border); color: var(--web-text); }
.web-message--error { background: #2a1414; border-color: #5a2a2a; color: #fecaca; }
.web-message--success { background: var(--web-selected); border-color: #1f5a3a; color: #bbf7d0; }
.web-message--warning { background: #2b1f0e; border-color: #6b4a18; color: #fde68a; }
.web-messages:empty { display: none; margin: 0; }

/* Toast notifications — bottom-right, auto-dismiss after 5s (see @keyframes). */
.web-toasts {
  position: fixed; right: 20px; bottom: 20px; z-index: 100;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(360px, calc(100vw - 40px)); pointer-events: none;
}
.web-toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px; border-radius: var(--web-radius-md);
  background: #1c1414; border: 1px solid var(--web-danger);
  color: var(--web-text); font-size: 14px; line-height: 1.4;
  box-shadow: var(--web-shadow); pointer-events: auto;
  animation: web-toast-life 5s ease forwards;
}
.web-toast__icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--web-danger); margin-top: 1px; }
.web-toast__text { flex: 1 1 auto; }

@keyframes web-toast-life {
  0%   { opacity: 0; transform: translateY(12px); }
  4%   { opacity: 1; transform: translateY(0); }
  92%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(12px); visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .web-toast { animation: web-toast-fade 5s linear forwards; }
  @keyframes web-toast-fade { 0%, 92% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
}

/* ---------- Cards & headings ---------- */
.web-card {
  width: 100%; max-width: var(--web-card);
  background: var(--web-surface); border: 1px solid var(--web-border);
  border-radius: var(--web-radius); padding: 32px; box-shadow: var(--web-shadow);
}
.web-title { margin: 0 0 8px; font-family: var(--web-font-title); font-size: 32px; line-height: 1; font-weight: 800; color: #fff; }
.web-subtitle { margin: 0; color: var(--web-muted); font-size: 15px; }
.web-section-title { font-family: var(--web-font-title); font-size: 24px; line-height: 28px; font-weight: 800; color: #fff; margin: 28px 0 16px; }

@media (max-width: 600px) {
  .web-card { padding: 24px 20px; border-radius: 16px; }
  .nav__links { display: none; }
}

/* ---------- Forms ---------- */
.web-form { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.web-field { display: flex; flex-direction: column; gap: 6px; }
.web-field__row { display: flex; flex-direction: column; gap: 6px; }
.web-field__label { font-size: 13px; color: var(--web-muted); }

.web-form input[type="text"], .web-form input[type="email"],
.web-form input[type="password"], .web-form input[type="number"] {
  width: 100%; padding: 13px 14px; border: 1px solid var(--web-border-strong);
  border-radius: var(--web-radius-sm); font-size: 15px; background: var(--web-surface-2); color: var(--web-text);
}
.web-form input::placeholder { color: #6b706d; }
.web-form input:focus { outline: none; border-color: var(--web-green); box-shadow: 0 0 0 3px rgba(9,144,92,0.28); }
.web-field--checkbox .web-field__row { flex-direction: row; align-items: center; gap: 10px; }
.web-field--checkbox .web-field__label { color: var(--web-text-2); }
.web-form input[type="checkbox"], .web-form input[type="radio"] { accent-color: var(--web-green); width: 18px; height: 18px; }
.web-field__error { color: var(--web-danger); font-size: 13px; }
.web-field__help { color: var(--web-muted); font-size: 13px; }
.web-field__help a { color: var(--web-green); }
/* Consent note under the password field (Figma «Мои данные»): muted text, green
   links, leading star. URLs come from LaunchConfig (same source as /v1/launch). */
.web-consent-note { margin-top: 4px; line-height: 1.5; max-width: 593px; }
.web-consent-note__star { margin-right: 2px; }
.web-form-errors { list-style: none; margin: 0; padding: 12px 16px; background: #2a1414; border: 1px solid #5a2a2a;
  border-radius: 12px; color: #fecaca; font-size: 14px; }

/* ---------- Buttons ---------- */
.web-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%;
  padding: 14px 18px; border: 1px solid transparent; border-radius: var(--web-radius-sm);
  font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background-color .15s, transform .05s, box-shadow .15s; font-family: inherit; }
.web-btn:active { transform: translateY(1px); }
.web-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(9,144,92,0.4); }
.web-btn[disabled] { opacity: .6; cursor: not-allowed; }
.web-btn--primary { background: var(--web-green); color: #fff; }
.web-btn--primary:hover { background: var(--web-green-strong); }
.web-btn--secondary { background: var(--web-surface-2); color: var(--web-text); border-color: var(--web-border-strong); }
.web-btn--secondary:hover { background: var(--web-surface-3); }
.web-btn--ghost { background: transparent; color: var(--web-green); border-color: transparent; width: auto; padding: 12px 4px; }
.web-btn--ghost:hover { color: var(--web-green-strong); }
.web-btn--outline { background: #232325; color: var(--web-green); border: none; border-radius: 16px; }
.web-btn--outline:hover { background: var(--web-surface-3); }
.web-btn--auto { width: auto; }

.web-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 18px; font-size: 14px; }
.web-links a { color: var(--web-green); text-decoration: none; }
.web-links a:hover { text-decoration: underline; }
.web-linkbtn { background: none; border: none; padding: 0; cursor: pointer; color: var(--web-green); font-size: 14px; font-family: inherit; }
.web-linkbtn:hover { text-decoration: underline; }

/* ---------- Badges & chips ---------- */
.web-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.web-badge__icon { width: 14px; height: 14px; flex: none; }
.web-badge--amber { background: var(--web-amber); color: #2a1602; }
.web-badge--amber-outline { background: rgba(237, 120, 3, 0.1); border: 1px solid var(--web-amber); color: var(--web-amber); border-radius: 8px; font-weight: 500; }
.web-badge--green { background: var(--web-green); color: #06140d; }
.web-badge--muted { background: var(--web-surface-2); color: var(--web-muted); }
.web-badge--active { background: var(--web-selected); color: #6ee7a8; }
.web-badge--trialing { background: var(--web-amber); color: #2a1602; }
.web-badge--past_due { background: #2b1f0e; color: #fbbf5b; }
.web-badge--canceled, .web-badge--expired { background: #2a1414; color: #fca5a5; }
.web-badge--pending { background: var(--web-surface-2); color: var(--web-muted); }

.web-chip { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px;
  background: var(--web-green); color: #06140d; font-size: 14px; font-weight: 600; }
.web-chip--dark { background: var(--web-surface-2); color: var(--web-text); }
.web-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Tabs ---------- */
.web-tabs { display: flex; gap: 24px; margin: 6px 0 24px; }
.web-tab { padding: 0 0 8px; color: var(--web-muted); text-decoration: none; font-size: 18px; line-height: 24px; font-weight: 500; border-bottom: 1px solid transparent; }
.web-tab:hover { color: var(--web-text); }
.web-tab--active { color: var(--web-green); border-bottom-color: var(--web-green); }

/* ---------- Plan cards (checkout) ---------- */
/* ---------- Checkout "Оплата" — Figma frame ---------- */
.web-checkout {
  display: flex; flex-direction: column; gap: 40px; max-width: 710px; margin-top: 24px;
  border: 1px solid #4A4A4F; border-radius: 20px; padding: 30px;
}
.web-checkout__intro { display: flex; flex-direction: column; gap: 12px; }
.web-checkout__head { display: flex; align-items: center; gap: 20px; }
.web-checkout__plan { margin: 0; font-family: var(--web-font-title); font-size: 20px; font-weight: 700; color: #fff; }
.web-checkout__note { position: relative; margin: 0; padding-left: 12px; color: var(--web-text-2); font-size: 14px; line-height: 1.2; }
.web-checkout__note-star { position: absolute; left: 0; top: 0; }
.web-checkout__form { display: flex; flex-direction: column; gap: 40px; }

.web-plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.web-plan {
  position: relative; display: flex; flex-direction: column; gap: 20px; cursor: pointer;
  background: var(--web-surface-2); border: 1px solid #4A4A4F; border-radius: 20px; padding: 20px;
}
.web-plan:has(input:checked) { border-color: var(--web-green); }
.web-plan input { position: absolute; opacity: 0; pointer-events: none; }
.web-plan__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; }
.web-plan__radio {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--web-muted);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.web-plan:has(input:checked) .web-plan__radio { border-color: var(--web-green); }
.web-plan:has(input:checked) .web-plan__radio::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--web-green);
}
.web-plan__title { color: var(--web-text-2); font-size: 18px; font-weight: 500; }
.web-plan__price { font-family: var(--web-font-title); font-size: 28px; font-weight: 800; color: var(--web-amber); line-height: 1; }
.web-plan__price small { font-family: var(--web-font); font-size: 14px; font-weight: 400; color: var(--web-text-2); }

.web-info {
  display: flex; gap: 12px; align-items: center; background: var(--web-surface-2);
  border-radius: 20px; padding: 16px; color: var(--web-text-2); font-size: 14px; line-height: 1.2;
}
.web-info__icon { width: 24px; height: 24px; flex: none; color: var(--web-green-strong); }
.web-checkout .web-btn { border-radius: 16px; }
/* Legal note under the pay button. Pulls itself closer than the form's 40px gap. */
.web-checkout__legal {
  margin: -24px 0 0; text-align: center;
  font-size: 13px; line-height: 1.5; color: var(--web-muted);
}
.web-checkout__legal a { color: var(--web-muted); text-decoration: underline; text-underline-offset: 2px; }
.web-checkout__legal a:hover { color: var(--web-text); }
/* Post-checkout «processing» banner on Мой тариф (shown while a payment is pending). */
.web-processing { max-width: 710px; margin: 0 0 24px; }

@media (max-width: 600px) { .web-plan-grid { grid-template-columns: 1fr; } }

/* ---------- Tariff card + payment history (account) ---------- */
/* Plan title + status badge on one line (Figma «Мой тариф»): badge sits inline,
   right after the title, vertically centred — not stacked below it. */
.web-pro-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 16px; }
.web-pro-head h2 {
  margin: 0; font-family: var(--web-font-title); font-size: 24px; line-height: 24px;
  font-weight: 800; color: #fff;
}

/* Active-subscription card (Figma «Мой тариф»): surface-2 fill, green border, r=20. */
.web-tariff {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: var(--web-surface-2); border: 1px solid var(--web-green);
  border-radius: 20px; padding: 20px;
}
/* Card buttons use the Figma 16px radius / 12×20 padding / Public Sans 500 16. */
.web-tariff .web-btn { border-radius: 16px; padding: 12px 20px; font-size: 16px; font-weight: 500; }
.web-tariff .web-linkbtn { font-size: 16px; }
.web-tariff__price { font-family: var(--web-font-title); font-size: 32px; line-height: 32px; font-weight: 800; color: var(--web-amber); }
.web-tariff__price small { font-family: var(--web-font); font-size: 14px; line-height: 18px; font-weight: 400; color: #D8D8DD; }
/* flex-start so the chip hugs its content instead of stretching to the label width. */
.web-tariff__col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.web-tariff .web-field__label { color: #D8D8DD; font-size: 14px; line-height: 18px; }
.web-tariff__spacer { flex: 1; }
/* «Следующий платёж» value — light chip (Figma): #F4FCFF bg, blue text, centred. */
.web-pill { display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 10px; border-radius: 8px; background: #F4FCFF; color: #1796D8;
  font-family: var(--web-font); font-size: 14px; font-weight: 500; line-height: 18px; }

/* Payment history — Body/L fonts (Figma): header 16/22 muted, rows 16/20 medium. */
.web-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 16px; }
.web-table th { text-align: left; color: var(--web-muted); font-weight: 400; font-size: 16px; line-height: 22px; padding: 16px 14px; }
.web-table td { padding: 16px 14px; border-top: 1px solid var(--web-border); color: #D8D8DD; font-weight: 500; font-size: 16px; line-height: 20px; }
/* Keep single-value cells (paid-at datetime, card) on one line. */
.web-table td.web-cell-nowrap { white-space: nowrap; }
/* Uniform-width status badges so «Оплачено» matches «Ожидает оплаты». */
.web-table td .web-badge { min-width: 132px; justify-content: center; }
/* «Скачать счет» в истории оплаты */
.web-table .web-btn--receipt { width: auto; padding: 10px 16px; font-size: 14px; line-height: 20px; gap: 8px; }
.web-table tbody tr:hover { background: var(--web-surface-2); }
.web-card-icon { height: 20px; width: auto; vertical-align: middle; margin-right: 8px; }

/* ---------- Tariff comparison (Free vs Pro) — Figma "Мой тариф" ---------- */
.web-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1000px; align-items: start; }
.web-pcard {
  display: flex; flex-direction: column; gap: 20px;
  background: var(--web-surface); border: 1px solid #4A4A4F;
  border-radius: 16px; padding: 20px;
}
.web-pcard--pro { border-color: var(--web-amber); }
.web-pcard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.web-pcard__title { margin: 0; font-family: var(--web-font-title); font-size: 28px; font-weight: 800; color: #fff; }
.web-pcard:not(.web-pcard--pro) .web-pcard__title { color: var(--web-text-2); }
.web-pcard__price { font-family: var(--web-font-title); font-size: 40px; font-weight: 800; color: var(--web-amber); line-height: 1; }
.web-pcard__price small { font-size: 14px; font-weight: 400; color: var(--web-text-2); }
.web-pcard__year { color: var(--web-text-2); font-size: 14px; margin: -12px 0 0; }
.web-pcard__year b { color: var(--web-amber); font-weight: 600; }
.web-pcard__note { margin: 0; text-align: center; }
/* Divider line between header / price block and the feature list. */
.web-divider { border: none; border-top: 1px solid #4A4A4F; margin: 0; align-self: stretch; height: 0; }
/* Chips: rounded-rect (not pill); "Текущий тариф" grey, trial = amber outline. */
.web-pcard__head .web-badge { border-radius: 8px; padding: 6px 8px; font-weight: 500; }
.web-pcard__head .web-badge--muted { background: #232325; color: var(--web-text-2); }
.web-pcard__head .web-badge--amber { background: rgba(237, 120, 3, 0.1); border: 1px solid var(--web-amber); color: var(--web-amber); }
.web-pcard .web-btn { border-radius: 16px; }

.web-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.web-feature { position: relative; padding-left: 32px; color: var(--web-text-2); font-size: 16px; line-height: 22px; }
.web-features:not(.web-features--pro) .web-feature { color: var(--web-muted); }
/* Default check-circle icon (replaces the checkbox squares): green for Pro, grey for Free. */
.web-feature::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px;
  background-color: var(--web-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.web-features--pro .web-feature::before { background-color: var(--web-green); }
/* Benefit rows that carry their own icon (by tag) hide the default check-circle. */
.web-feature--icon::before { display: none; }
/* Figma: 24px icon, vertically centered on the first text line (line-height 22 → top -1). */
.web-feature--icon { padding-left: 34px; }
.web-feature__icon { position: absolute; left: 0; top: -1px; width: 24px; height: 24px; object-fit: contain; }
@media (max-width: 720px) { .web-compare { grid-template-columns: 1fr; } }

/* ---------- Account "Мои данные" ---------- */
/* Values from Figma "Мои данные": avatar 160, 80px gap to the 593px field column. */
.web-account-grid { display: grid; grid-template-columns: 160px minmax(0, 593px); gap: 80px; align-items: start; max-width: 840px; }
/* Fields align with the avatar top (drop the default form top offset); 20px row gap. */
.web-account-grid .web-form { margin-top: 0; gap: 20px; }
.web-account-grid .web-field__label { color: #D8D8DD; font-size: 12px; }
/* Read-only display fields: #3B3B40 fill, 8px radius, 16px text, no outline.
   Selector matches the global `.web-form input[type=...]` specificity and wins by order. */
.web-account-grid .web-form input { background: #3B3B40; border: none; border-radius: 8px; padding: 13px 12px; font-size: 16px; }
.web-avatar { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; background: var(--web-surface-2); }
.web-avatar--placeholder { display: flex; align-items: center; justify-content: center; background: var(--web-green); color: #06140d; }
.web-inline { display: flex; gap: 12px; align-items: flex-end; }
.web-inline .web-field { flex: 1; }
/* Match button height to the input field it sits next to (same 13px padding +
   normal line-height; the button otherwise inherits the body's 1.5 line-height). */
.web-inline .web-btn { padding-top: 13px; padding-bottom: 13px; line-height: normal; font-size: 16px; }
/* Equal-width fields (flex:1) and equal-width buttons; the spacer keeps the login
   input the same width as the email/password inputs (which yield room to a button). */
.web-inline .web-btn, .web-inline__spacer { flex: 0 0 173px; width: 173px; }
.web-inline .web-btn { white-space: nowrap; }
.web-fieldgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 720px) { .web-fieldgrid { grid-template-columns: 1fr 1fr; } .web-account-grid { grid-template-columns: 1fr; } }

/* ---------- Account «Анкета» (Figma «Мои данные» → survey answers) ---------- */
/* Section heading with the «re-take survey» pencil. */
.web-anketa-head { display: flex; align-items: center; gap: 12px; }
.web-anketa-head .web-section-title { margin-bottom: 0; }
.web-anketa-edit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; color: var(--web-green); text-decoration: none;
}
.web-anketa-edit:hover { background: var(--web-surface-2); color: var(--web-green-strong); }

.web-anketa { display: flex; flex-direction: column; gap: 20px; max-width: 840px; margin-top: 16px; }
/* Category label — green outline pill. */
.web-anketa__cat {
  align-self: flex-start; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--web-green); background: rgba(10, 144, 92, 0.10);
  color: var(--web-green); font-size: 13px; font-weight: 600;
}
/* Basic info — Пол / Дата рождения / Рост / Вес as read-only boxes. */
.web-anketa__basic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.web-anketa__field { display: flex; flex-direction: column; gap: 6px; }
.web-anketa__field .web-field__label { color: #D8D8DD; font-size: 12px; }
.web-anketa__box {
  background: #3B3B40; border-radius: 8px; padding: 13px 12px;
  font-size: 16px; color: var(--web-text); min-height: 46px; display: flex; align-items: center;
}
/* Answered question — label on the left, green answer chips on the right. */
.web-anketa__q { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.web-anketa__q-title { flex: 0 0 240px; color: var(--web-text-2); font-size: 16px; line-height: 22px; }
.web-anketa__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.web-anketa__chip {
  display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px;
  background: var(--web-green); color: #06140d; font-size: 14px; font-weight: 600;
}
@media (max-width: 720px) {
  .web-anketa__basic { grid-template-columns: 1fr 1fr; }
  .web-anketa__q { flex-direction: column; align-items: flex-start; gap: 8px; }
  .web-anketa__q-title { flex: none; }
}

/* ---------- Survey wizard ---------- */
.web-card--survey {
  width: 100%; max-width: 520px; padding: 30px;
  background: #131413; border-color: #4A4A4F; box-shadow: none;
}

.web-progress { display: flex; gap: 20px; margin-bottom: 30px; }
.web-progress__seg { flex: 1; height: 3px; border-radius: 999px; background: #4A4A4F; overflow: hidden; }
.web-progress__fill { display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--web-green); transition: width .35s ease; }
/* Summary screen: anketa is complete, so every segment is filled (no JS drives it). */
.web-progress--done .web-progress__fill { width: 100%; }

.web-step { border: none; padding: 0; margin: 0; }
/* Header — back arrow + title, left-aligned (Figma «Анкета»). */
.web-step__head { display: flex; align-items: center; gap: 8px; justify-content: flex-start; position: relative; margin-bottom: 8px; }
.web-step__title { font-family: var(--web-font-title); font-size: 24px; line-height: 28px; font-weight: 700; color: #fff; text-align: left; margin: 0; padding: 0; }
.web-step__subtitle { color: var(--web-text-2); text-align: center; margin: 0 0 32px; font-size: 14px; line-height: 16px; }
.web-back {
  flex: none; width: 28px; height: 28px; margin-left: -4px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--web-muted); cursor: pointer;
  text-decoration: none; border-radius: 8px;
}
.web-back svg { display: block; width: 20px; height: 20px; }
.web-back:hover { color: var(--web-text); background: var(--web-surface-2); }
.web-back[hidden] { display: none; }
.web-step__foot { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* Gender cards */
.web-genders { display: flex; justify-content: center; gap: 60px; width: 327px; max-width: 100%; margin: 0 auto 20px; }
.web-gender {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  padding: 16px 15px; border: 1px solid transparent;
  border-radius: 16px; background: #232325; color: #A0AEC0;
}
.web-gender:has(input:checked) { border-color: var(--web-green); background: var(--web-selected); color: var(--web-text); }
.web-gender input { position: absolute; opacity: 0; pointer-events: none; }
.web-gender__icon { color: #A0AEC0; display: flex; line-height: 0; }
.web-gender:has(input:checked) .web-gender__icon { color: var(--web-green); }
.web-gender__label { font-size: 14px; font-weight: 500; line-height: 20px; }

/* Control row — holds the full-width date input (the block title is its label). */
.web-field-row { display: flex; align-items: center; justify-content: space-between; gap: 40px;
  padding: 10px 0; }

/* Combined screen (пол+дата, рост+вес) — stacked rows, each «label — input». */
.web-combo { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.web-combo .web-genders { margin: 0 auto; }
.web-field-row__label { flex: none; color: var(--web-text-2); font-size: 16px; line-height: 22px; }
/* Higher specificity than the global `.web-form input[type="text"]` rule. */
.web-survey .web-field-row .web-input--date {
  flex: 1; min-width: 0; box-sizing: border-box; width: auto; height: 40px;
  background: #232325; border: 1px solid transparent; border-radius: 8px;
  padding: 0 12px; text-align: right;
  font-family: var(--web-font); font-weight: 600; font-size: 20px; line-height: 25px;
  color: #fff; outline: none;
}
.web-survey .web-field-row .web-input--date::placeholder { color: var(--web-muted); font-weight: 600; }
.web-survey .web-field-row .web-input--date:focus { border-color: var(--web-green); box-shadow: none; }

/* Numeric questions (height / weight / number) — manual entry field with a unit
   suffix. In a .web-field-row it sits on the right; --center is the standalone
   number-question variant. */
.web-numfield {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 14px; box-sizing: border-box;
  background: #232325; border: 1px solid transparent; border-radius: 8px;
}
.web-numfield:focus-within { border-color: var(--web-green); }
.web-field-row .web-numfield { flex: 1; min-width: 0; }
/* Block-level flex so `margin: auto` centers the box (the base .web-numfield is
   inline-flex, where auto margins don't center). Narrower than the row variant. */
.web-numfield--center { display: flex; width: 150px; margin: 24px auto 0; justify-content: center; }
.web-step__subtitle ~ .web-numfield--center { margin-top: 0; }
/* High specificity (3 classes) to override the global `.web-form input[type="number"]`
   box (0,2,1); otherwise the input draws its own filled box nested inside .web-numfield. */
.web-survey .web-numfield .web-numfield__input {
  flex: 1; min-width: 0; width: 100%; height: auto; padding: 0; box-sizing: border-box;
  background: transparent; border: none; border-radius: 0; outline: none; box-shadow: none;
  color: #fff; font-family: var(--web-font); font-weight: 600; font-size: 20px; line-height: 25px;
  text-align: right; -moz-appearance: textfield; appearance: textfield;
}
.web-survey .web-numfield .web-numfield__input:focus { border: none; box-shadow: none; }
.web-survey .web-numfield .web-numfield__input::placeholder { color: var(--web-muted); font-weight: 600; }
/* Standalone centered number question: size the input to its content and center
   the number+unit as a group (the row variant keeps flex:1 + right-align). */
.web-survey .web-numfield--center .web-numfield__input {
  flex: 0 1 auto; width: 5ch; min-width: 2ch; max-width: 9ch;
  field-sizing: content; text-align: center;
}
.web-numfield__input::-webkit-outer-spin-button,
.web-numfield__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.web-numfield__unit { flex: none; color: var(--web-muted); font-weight: 600; font-size: 16px; }

/* Option rows — Figma «Chip». Shared by single- and multi-choice. The
   description line, when present, supplies the gap to the title; otherwise the
   options container does (balanced spacing on questions with no description). */
.web-chips { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.web-step__subtitle ~ .web-chips { margin-top: 0; }
.web-chip {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  min-height: 60px; padding: 12px 16px; border: 1px solid transparent;
  border-radius: 12px; background: #232325; color: #fff;
}
.web-chip input { position: absolute; opacity: 0; pointer-events: none; }
.web-chip__label { flex: 1; font-family: var(--web-font); font-weight: 400; font-size: 14px; line-height: 18px; color: #fff; }
.web-chip:has(input:checked) { border-color: #17AA71; }
/* Multi-choice select indicator — a square checkbox on the right (Figma «check-box»).
   Empty state is always visible (outlined square); selected fills green + white tick.
   Single-choice has no indicator (border highlight only). */
.web-chip__check {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  border: 2px solid var(--web-border-strong); background: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.web-chip__check svg { display: none; }
.web-chip:has(input:checked) .web-chip__check { background: var(--web-green); border-color: var(--web-green); }
.web-chip:has(input:checked) .web-chip__check svg { display: block; }

/* Survey action buttons (Далее / Выбрать): Figma height 48, radius 16. */
.web-survey .web-step__foot .web-btn { min-height: 48px; border-radius: 16px; padding: 12px 20px; font-size: 16px; font-weight: 500; }
.web-survey .web-step__foot .web-btn--ghost { min-height: 0; }

/* ---- Intro v2: media (emoji/image), grid layout, one-rep-max table ---- */
.web-chips--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Grid options (days/time/duration) select via border only — no check indicator. */
.web-chips--grid .web-chip__check { display: none; }
.web-media { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.web-media--emoji { line-height: 1; }
.web-media--chip { width: 24px; height: 24px; font-size: 20px; }
.web-media--chip img { width: 24px; height: 24px; object-fit: contain; }
/* Image option thumbnail (Figma «Rectangle 512») — larger rounded light tile,
   distinct from the small inline emoji. */
.web-chip .web-media--chip:not(.web-media--emoji) {
  width: 56px; height: 56px; border-radius: 8px; background: #E9E9EC;
}
.web-chip .web-media--chip:not(.web-media--emoji) img {
  width: 56px; height: 56px; border-radius: 8px; object-fit: cover;
}
.web-media--hero { width: 96px; height: 96px; font-size: 56px; margin: 0 auto 4px; }
.web-media--hero img { width: 96px; height: 96px; object-fit: contain; }
.web-media--orm { width: 28px; height: 28px; font-size: 22px; }
.web-media--orm img { width: 28px; height: 28px; object-fit: contain; }

.web-orm { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.web-step__subtitle ~ .web-orm { margin-top: 0; }
.web-orm__row { display: flex; flex-direction: column; gap: 14px; padding: 16px; background: #232325; border-radius: 12px; }
.web-orm__ex { display: flex; align-items: center; gap: 10px; }
.web-orm__name { font-size: 14px; font-weight: 500; color: #fff; }
.web-orm__fields { display: flex; align-items: center; gap: 8px; }
.web-orm__field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 12px; box-sizing: border-box;
  background: #3B3B40; border: 1px solid transparent; border-radius: 8px;
}
.web-orm__field:focus-within { border-color: var(--web-green); }
/* 3 classes to beat the global `.web-form input[type="number"]` box (0,1,1) — otherwise
   the number input paints its own filled box nested inside .web-orm__field. */
.web-survey .web-orm__field .web-orm__input {
  flex: 1; min-width: 0; width: 100%; height: auto; padding: 0;
  background: transparent; border: none; border-radius: 0; outline: none; box-shadow: none;
  color: #fff; font-family: var(--web-font); font-weight: 600; font-size: 16px;
  -moz-appearance: textfield; appearance: textfield;
}
.web-orm__input::-webkit-outer-spin-button,
.web-orm__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.web-orm__input:disabled { color: var(--web-muted); }
.web-orm__unit { flex: none; color: var(--web-muted); font-weight: 600; font-size: 14px; }
.web-orm__unknown {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--web-muted); cursor: pointer; white-space: nowrap;
}
.web-orm__unknown input { width: 16px; height: 16px; accent-color: var(--web-green); }
@media (max-width: 600px) { .web-orm__fields { flex-wrap: wrap; } }

/* Analysis animation (Figma «Анкета 4.1.2»): icon + horizontal bar per stage,
   filling sequentially. Icon state: pending #6C6C6E → active #075235 → done #17AA71. */
.web-analysis { display: flex; flex-direction: column; gap: 32px; }
/* `display: flex` above would override the `hidden` attribute, so the block must
   re-assert display:none while hidden (attribute selector wins over the class). */
.web-analysis[hidden] { display: none; }
.web-analysis__group { display: flex; flex-direction: column; gap: 16px; }
.web-analysis__subtitle { margin: 0; color: #D8D8DD; font-size: 14px; line-height: 16px; text-align: center; }
.web-analysis__row { display: flex; align-items: center; gap: 16px; }
.web-analysis__icon {
  flex: none; width: 24px; height: 24px; line-height: 0; color: #6C6C6E;
  animation: web-analysis-icon .7s linear var(--d, 0s) forwards;
}
.web-analysis__icon svg { display: block; width: 24px; height: 24px; }
.web-analysis__bar {
  flex: 1; min-width: 0; position: relative; overflow: hidden;
  height: 10px; border-radius: 999px; background: #4A4A4F;
}
.web-analysis__fill {
  position: absolute; left: 0; top: 0; height: 100%; width: 0;
  border-radius: 999px; background: #17AA71;
  animation: web-analysis-fill .7s ease var(--d, 0s) forwards;
}
.web-analysis__fill::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px; opacity: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.28) 0 5px, transparent 5px 10px);
  background-size: 14px 14px;
  animation: web-analysis-stripe .5s linear infinite, web-analysis-stripe-show .7s linear var(--d, 0s) forwards;
}
@keyframes web-analysis-fill { to { width: 100%; } }
@keyframes web-analysis-icon { 0% { color: #075235; } 100% { color: #17AA71; } }
@keyframes web-analysis-stripe { to { background-position: 14px 0; } }
@keyframes web-analysis-stripe-show { 0% { opacity: 1; } 99% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .web-analysis__fill { animation: none; width: 100%; }
  .web-analysis__fill::after { animation: none; opacity: 0; }
  .web-analysis__icon { animation: none; color: #17AA71; }
  .web-progress__fill { transition: none; }
}

/* No-JS fallback save button is hidden once JS takes over. */
.web-survey[data-js] .web-survey__fallback { display: none; }
.web-survey__fallback { margin-top: 22px; }
/* No JS (survey.js never runs): reveal every step as one long form so the fallback
   «Сохранить и продолжить» can submit it; the per-step nav buttons are dead — hide them. */
@media (scripting: none) {
  .web-survey .web-step[hidden] { display: block; }
  .web-survey .web-step__foot, .web-survey .web-back { display: none; }
}

/* Profile summary (screen 25) */
.web-summary { display: flex; flex-direction: column; gap: 24px; margin: 24px 0 30px; }
.web-summary__group { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
/* Section label (Figma «Chip») — blue outline tag, not the tappable 60px option .web-chip. */
.web-summary__title {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 8px;
  background: rgba(12, 124, 181, 0.1); border: 1px solid #1796D8; color: #1796D8;
  font-family: var(--web-font); font-weight: 500; font-size: 12px; line-height: 15px;
}
.web-summary__value { margin: 0; color: #D8D8DD; font-size: 14px; line-height: 16px; }
.web-summary__cta { margin-top: 4px; }

@media (max-width: 600px) {
  .web-grid { grid-template-columns: 1fr; }
  .web-genders { width: 100%; gap: 16px; }
}

/* ---------- Auth (login / register) ---------- */
/* Flash messages on auth pages match the 520px card width, not --web-card. */
.web-main--auth .web-messages { max-width: 520px; }
.web-auth__card {
  box-sizing: border-box;
  width: 520px; max-width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 30px;
  padding: 30px;
  background: #131413; border: 1px solid #4A4A4F; border-radius: 20px;
}
.web-auth__title {
  margin: 0; font-family: var(--web-font-title);
  font-weight: 700; font-size: 24px; line-height: 28px;
  color: #fff; text-align: center;
}
.web-auth__progress { display: flex; gap: 20px; width: 100%; }
.web-auth__head { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; }
.web-auth__content { width: 100%; display: flex; flex-direction: column; gap: 24px; }
.web-auth__form { display: flex; flex-direction: column; gap: 24px; }
.web-auth__list { display: flex; flex-direction: column; gap: 24px; }

.web-field2 { display: flex; flex-direction: column; gap: 4px; }
.web-field2__label {
  font-family: var(--web-font); font-weight: 400; font-size: 12px; line-height: 15px;
  color: var(--web-text-2);
}
.web-field2__box {
  box-sizing: border-box;
  display: flex; align-items: center; gap: 8px;
  height: 48px; padding: 12px;
  background: #3B3B40; border-radius: 8px;
  border: 1px solid transparent;
}
.web-field2__box:focus-within { border-color: var(--web-green); }
.web-field2__box input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none; padding: 0;
  font-family: var(--web-font); font-weight: 400; font-size: 16px; line-height: 22px;
  color: #fff;
}
.web-field2__box input::placeholder { color: var(--web-muted); }
.web-field2__eye {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  background: none; border: none; cursor: pointer; color: #A3A3A8;
}
.web-field2__eye .web-field2__eye-open { display: none; }
.web-field2__eye.is-open .web-field2__eye-closed { display: none; }
.web-field2__eye.is-open .web-field2__eye-open { display: block; }
.web-field2__hint { font-size: 12px; line-height: 15px; color: var(--web-muted); }
.web-field2__error { font-size: 12px; line-height: 15px; color: var(--web-red, #D93518); }

.web-auth__forgot {
  align-self: flex-end; margin-top: -12px;
  font-family: var(--web-font); font-size: 13px; color: var(--web-muted); text-decoration: none;
}
.web-auth__forgot:hover { color: var(--web-text-2); }

.web-auth__submit {
  box-sizing: border-box; width: 100%;
  display: flex; align-items: center; justify-content: center;
  height: 56px; padding: 16px 20px;
  background: var(--web-green); border: none; border-radius: 16px;
  font-family: var(--web-font); font-weight: 500; font-size: 16px; line-height: 20px;
  text-align: center; color: #fff; text-decoration: none;
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.web-auth__submit:hover { background: var(--web-green-strong); }
.web-auth__submit--sm { height: 48px; padding: 12px 20px; }
/* Gated variant: grey until all required fields are filled (+ required consent). */
.web-auth__submit--gated { background: #4A4A4F; color: var(--web-muted); cursor: not-allowed; }
.web-auth__submit--gated.is-ready { background: var(--web-green); color: #fff; cursor: pointer; }
.web-auth__submit--gated.is-ready:hover { background: var(--web-green-strong); }

/* Registration consent checkboxes (accept legal docs — blocking; marketing — optional). */
.web-consent { display: flex; flex-direction: column; gap: 20px; margin: 4px 0 8px; }
.web-consent__row { display: flex; align-items: flex-start; gap: 14px; }
.web-consent__row--clickable { cursor: pointer; }
.web-consent__box {
  flex: none; width: 26px; height: 26px; margin: 0; cursor: pointer;
  accent-color: var(--web-green);
}
.web-consent__text { font-size: 14px; line-height: 20px; color: var(--web-text-2); }
/* «Принимаю» toggles the box; the legal links next to it navigate only. */
.web-consent__accept { cursor: pointer; }
.web-consent__text a { color: var(--web-text-2); text-decoration: underline; text-underline-offset: 2px; }
.web-consent__text a:hover { color: var(--web-text); }

.web-or { display: flex; align-items: center; gap: 24px; width: 100%; }
.web-or::before, .web-or::after { content: ""; flex: 1; height: 0; border-top: 1px solid var(--web-muted); }
.web-or__text {
  font-family: var(--web-font); font-weight: 400; font-size: 14px; line-height: 16px; color: var(--web-muted);
}

.web-auth__alt {
  font-family: var(--web-font); font-weight: 400; font-size: 14px; line-height: 150%;
  color: #fff; text-align: center; text-decoration: none;
}
.web-auth__alt span { color: var(--web-green); text-decoration: underline; }
.web-auth__alt:hover span { color: var(--web-green-strong); }

@media (max-width: 600px) {
  .web-auth__card { width: 100%; padding: 24px 20px; border-radius: 16px; }
}

/* ---------- Two-factor / admin auth (reuses the web-auth card) ---------- */
.web-tf__lead {
  margin: 0; font-family: var(--web-font); font-weight: 400; font-size: 14px; line-height: 18px;
  color: var(--web-text-2); text-align: center;
}
.web-auth__actions { display: flex; gap: 12px; width: 100%; }
.web-auth__actions .web-btn { flex: 1; width: auto; }
.web-auth__actions--col { flex-direction: column; }
.web-tf__cancel { width: 100%; }
.web-tf__qr { display: flex; justify-content: center; }
.web-tf__qr img {
  width: 200px; height: 200px; padding: 12px;
  background: #fff; border-radius: var(--web-radius-md);
}
.web-tf__secret {
  margin: 0; text-align: center; word-break: break-all;
  font-family: var(--web-font); font-size: 15px;
}
.web-tf__secret a { color: var(--web-green); text-decoration: none; font-weight: 600; }
.web-tf__secret a:hover { color: var(--web-green-strong); }

/* ---------- Email verification (code) ---------- */
.web-auth__head { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.web-auth__subtitle {
  margin: 0; font-family: var(--web-font); font-weight: 400; font-size: 14px; line-height: 18px;
  color: var(--web-text-2); text-align: center;
}
.web-verify { width: 343px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.web-verify__form { width: 100%; }
.web-code__inputs { display: flex; align-items: center; gap: 8px; width: 100%; }
.web-code__cell {
  box-sizing: border-box;
  flex: 1 1 0; min-width: 0; height: 46.5px;
  background: #232325; border: 1px solid transparent; border-radius: 8px;
  text-align: center; color: #fff;
  font-family: var(--web-font); font-weight: 600; font-size: 20px; line-height: 25px;
  padding: 0; outline: none;
}
.web-code__cell:focus { border-color: var(--web-green); }
.web-code__dash { flex: 0 0 16px; height: 2px; border-radius: 2px; background: #515154; }
.web-code__resend {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--web-font); font-weight: 400; font-size: 14px; line-height: 20px;
  color: #fff; text-align: center;
}
.web-code__resend-form { margin: 0; }
.web-code__resend-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--web-green); text-decoration: underline;
}
.web-code__resend-btn:hover { color: var(--web-green-strong); }