/* 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; }
.web-main--wide { align-items: stretch; max-width: var(--web-content); width: 100%; margin: 0 auto; }
.web-main--wide .web-form { max-width: 700px; }

.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; }

/* ---------- 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 { margin-top: 4px; line-height: 1.5; max-width: 593px; }
.web-consent__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; }
.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; }
/* 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; }
.web-table tbody tr:hover { background: var(--web-surface-2); }

/* ---------- 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; }

.web-step { border: none; padding: 0; margin: 0; }
.web-step__head { display: flex; align-items: center; gap: 10px; justify-content: center; 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: center; margin: 0; padding: 0 40px; }
.web-step__subtitle { color: var(--web-text-2); text-align: center; margin: 0 0 32px; font-size: 14px; line-height: 16px; }
.web-back {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--web-muted); font-size: 20px; cursor: pointer;
  text-decoration: none; border-radius: 8px;
}
.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; justify-content: center; }

/* Gender cards (screen 01) */
.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; }

/* Label + control row (date, steppers) */
.web-field-row { display: flex; align-items: center; justify-content: space-between; gap: 40px;
  padding: 10px 0; }
.web-field-row__label { color: #DBDBDB; font-size: 16px; line-height: 22px; }
/* «Ваши параметры»: fixed label column so the Рост / Вес inputs are equal width
   (otherwise the shorter «Вес» label leaves its input wider). Scoped to this screen
   so it doesn't clip the long «Дата рождения» label on the previous screen. */
.web-survey [data-type="measures"] .web-field-row__label { flex: 0 0 64px; }
/* 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; }
.web-numfield--center { width: 220px; margin: 8px auto 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; }
.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. */
.web-chips { display: flex; flex-direction: column; gap: 12px; }
.web-chip {
  display: flex; align-items: center; gap: 6px; 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; }
/* Checkbox (multi-choice only) */
.web-chip__check {
  flex: none; width: 26px; height: 26px; border-radius: 4px;
  border: 1px solid var(--web-muted); background: #232325;
  display: flex; align-items: center; justify-content: center;
}
.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; }

/* Analysis animation (screens 21–24) */
.web-analysis { text-align: center; }
.web-analysis__bars { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.web-analysis__bar { height: 10px; border-radius: 999px; background: var(--web-surface-2); overflow: hidden; position: relative; }
.web-analysis__bar::after {
  content: ""; position: absolute; inset: 0; width: 0; border-radius: 999px; background: var(--web-green);
  animation: web-analysis-fill 1.6s ease forwards; animation-delay: var(--delay, 0s);
}
@keyframes web-analysis-fill { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .web-analysis__bar::after { animation: none; width: 100%; }
  .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; }

/* Profile summary (screen 25) */
.web-summary { display: flex; flex-direction: column; gap: 18px; margin: 20px 0 26px; }
.web-summary__group { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.web-summary__value { margin: 0; color: var(--web-text-2); font-size: 15px; }
.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 (login): grey until all required fields are filled. */
.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); }

.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; }
}

/* ---------- 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); }