:root {
  color-scheme: dark;
  --checkout-bg: #111513;
  --checkout-surface: #1b211e;
  --checkout-surface-raised: #202723;
  --checkout-border: #343d38;
  --checkout-accent: #10b981;
  --checkout-accent-hover: #34d399;
  --checkout-text: #f3f6f4;
  --checkout-muted: #a8b0ab;
  --checkout-danger: #fca5a5;
}

* { box-sizing: border-box; }

html { background: var(--checkout-bg); }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--checkout-bg);
  color: var(--checkout-text);
}

button, input, select, a { min-height: 44px; }

button, input, select { font: inherit; }

button:not(:disabled), label { cursor: pointer; }

#checkout-header {
  position: sticky;
  z-index: 30;
  top: 0;
  background: rgb(17 21 19 / 94%);
  backdrop-filter: blur(14px);
}

.checkout-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.checkout-header-sign-out {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: 0 8px;
  color: var(--checkout-muted);
  font-size: .875rem;
  font-weight: 650;
}

.checkout-header-sign-out:hover:not(:disabled) { color: var(--checkout-text); }
.checkout-header-sign-out:disabled { cursor: wait; opacity: .65; }
.checkout-header-status { max-width: 180px; color: var(--checkout-danger); font-size: .75rem; line-height: 1.25; }

.checkout-test-mode {
  color: #f87171;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
}

:focus-visible { outline: 3px solid #34d399; outline-offset: 3px; }

#checkout-main {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 36px 24px 64px;
}

#checkout-main:has(.checkout-recovery-auth:not(.checkout-recovery-static)) {
  min-height: calc(100dvh - 64px);
  display: grid;
  align-items: center;
  justify-items: center;
  padding-block: 32px;
}

#checkout-main[data-summary-layout="aside"]:has(.checkout-recovery-auth:not(.checkout-recovery-static)) {
  grid-template-columns: minmax(0, 1fr);
}

#checkout-main:has(.checkout-recovery-auth:not(.checkout-recovery-static)) > #checkout-app { width: min(440px, 100%); }

#checkout-main:has(.checkout-invalid-entry) {
  min-height: calc(100dvh - 64px);
  display: grid;
  align-items: center;
  justify-items: center;
  padding-block: 32px;
}

#checkout-main:has(.checkout-invalid-entry) > #checkout-app { width: min(440px, 100%); }

.checkout-route-auth #checkout-main {
  min-height: calc(100dvh - 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  padding-block: 32px;
}

.checkout-route-auth #checkout-app { width: min(440px, 100%); }
.checkout-route-auth #checkout-main:has(.checkout-portal) {
  display: block;
  min-height: 0;
  padding-block: 44px 72px;
}

.checkout-route-auth #checkout-main:has(.checkout-portal) > #checkout-app { width: 100%; }
.checkout-recovery-static { display: none; pointer-events: none; }
.checkout-route-auth .checkout-recovery-static { display: block; }
.checkout-route-auth [data-checkout-skeleton] { display: none; }
.checkout-route-auth #checkout-summary { display: none !important; }
.checkout-portal-restore { display: none; }
.checkout-session-hint #checkout-main {
  min-height: 0;
  display: block;
  padding-block: 44px 72px;
}
.checkout-session-hint #checkout-app { width: 100%; }
.checkout-session-hint .checkout-portal-restore {
  display: block;
}
.checkout-session-hint .checkout-recovery-static,
.checkout-session-hint [data-checkout-skeleton] { display: none; }
.checkout-session-hint #checkout-summary { display: none !important; }
.checkout-recovery-static__en { display: none; }
.checkout-route-auth--en .checkout-recovery-static__ru { display: none; }
.checkout-route-auth--en .checkout-recovery-static__en { display: inline; }

#checkout-app { min-width: 0; }

#checkout-summary {
  display: none;
  align-self: start;
  border: 1px solid var(--checkout-border);
  border-radius: 18px;
  background: var(--checkout-surface);
  padding: 22px;
}

#checkout-summary[hidden] { display: none !important; }

.checkout-screen {
  position: relative;
  width: 100%;
}

.checkout-invalid-entry {
  max-width: 440px;
  margin: 0 auto;
  text-align: center;
}

.checkout-invalid-entry > p {
  max-width: 360px;
  margin: 10px auto 0;
  color: var(--checkout-muted);
  line-height: 1.5;
}

.checkout-invalid-entry .checkout-option-list {
  width: 100%;
  margin-top: 24px;
}

.checkout-invalid-entry .checkout-primary-action,
.checkout-invalid-entry .checkout-secondary-action { min-height: 54px; }

.checkout-portal-entry-error .checkout-primary-action {
  width: 100%;
  min-height: 54px;
}

.checkout-step-intro {
  display: grid;
  grid-template-rows: 20px auto;
  row-gap: 7px;
}

.checkout-eyebrow,
.checkout-back {
  block-size: 20px;
  min-block-size: 0;
  margin: 0;
}

.checkout-eyebrow {
  color: var(--checkout-muted);
  font-size: .875rem;
  font-weight: 600;
}

.checkout-title {
  margin: 0 0 26px;
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -.035em;
  font-weight: 800;
}

.checkout-title--payment { margin-top: 0; }

.checkout-card {
  border: 1px solid var(--checkout-border);
  border-radius: 18px;
  background: var(--checkout-surface);
  padding: 20px;
}

.checkout-recovery-auth {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  transform: translateY(-32px);
}

.checkout-recovery-auth__intro { margin: 0 0 24px; }
.checkout-recovery-auth__intro .checkout-title { margin: 7px 0 10px; }
.checkout-recovery-auth__copy { margin: 0; color: var(--checkout-muted); line-height: 1.5; }
.checkout-recovery-auth__card { display: grid; gap: 14px; }
.checkout-recovery-auth__card .checkout-label { margin-bottom: 0; }
.checkout-recovery-auth__card .checkout-primary-action,
.checkout-recovery-auth__card .checkout-secondary-action { width: 100%; }
.checkout-recovery-auth__card--sent {
  position: relative;
  display: block;
}
.checkout-recovery-auth__sent-sizer {
  display: grid;
  gap: 14px;
  visibility: hidden;
}
.checkout-recovery-auth__sent-sizer .checkout-label { margin: 0; }
.checkout-recovery-auth__sent-sizer .checkout-email-input { display: block; }
.checkout-recovery-auth__sent-content {
  position: absolute;
  inset: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.checkout-recovery-auth__sent-title {
  margin: 0 0 8px;
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 750;
}
.checkout-recovery-auth__sent-copy {
  max-width: 300px;
  margin: 0;
  color: var(--checkout-muted);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.checkout-recovery-auth__sent-back { margin-top: 18px; }
.checkout-recovery-auth__checkout-link,
.checkout-recovery-auth__sent-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.checkout-recovery-auth__divider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  color: var(--checkout-muted);
  font-size: .8125rem;
}
.checkout-recovery-auth__divider > span { height: 1px; background: var(--checkout-border); }
.checkout-recovery-auth__divider p {
  margin: 0;
  background: transparent;
  animation: none;
}

.checkout-label {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  color: var(--checkout-text);
  font-size: 1rem;
  font-weight: 650;
}

.checkout-card-title {
  margin: 0 0 14px;
  color: var(--checkout-text);
  font-size: 1rem;
  font-weight: 700;
}

.checkout-option-list {
  display: grid;
  gap: 10px;
}

.checkout-option,
.checkout-payment-option {
  display: flex;
  position: relative;
  min-height: 76px;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid var(--checkout-border);
  border-radius: 14px;
  background: transparent;
  padding: 14px 16px;
  color: inherit;
  text-align: left;
  transition: border-color 140ms ease, background-color 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .checkout-option:hover,
  .checkout-payment-option:not(.checkout-payment-option--disabled):hover {
    border-color: #34d399;
    background: #075f46;
  }
}

.checkout-option--selected,
.checkout-payment-option--selected {
  border-color: var(--checkout-accent);
  background: #064e3b;
}

.checkout-option input,
.checkout-payment-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.checkout-option:focus-within,
.checkout-payment-option:focus-within {
  border-color: #34d399;
  outline: 3px solid #34d399;
  outline-offset: 3px;
}

.checkout-radio {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 2px solid #a8b0ab;
  border-radius: 999px;
}

.checkout-option--selected .checkout-radio {
  border-color: var(--checkout-accent);
  box-shadow: inset 0 0 0 4px var(--checkout-surface), inset 0 0 0 10px var(--checkout-accent);
}

.checkout-option__copy {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
}

.checkout-option__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
}

.checkout-option__monthly {
  color: var(--checkout-muted);
  font-size: .8125rem;
}

.checkout-option__price {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: 4px;
  text-align: right;
}

.checkout-option__total {
  flex: 0 0 auto;
  font-weight: 650;
}

.checkout-payment-brand {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 24px;
  object-fit: contain;
}

.checkout-payment-brand-stage {
  display: flex;
  height: 24px;
  min-width: 24px;
  flex: 0 0 auto;
  align-items: center;
}

.checkout-payment-brands {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  width: 92px;
  height: 24px;
}

.checkout-payment-brands .checkout-payment-brand {
  width: 24px;
  height: 18px;
}

.checkout-payment-brand--mir { width: 27px !important; }
.checkout-payment-brand--mastercard { width: 22px !important; }
.checkout-payment-brand--visa { width: 25px !important; }
.checkout-payment-brand--sbp { width: 20px; height: 20px; }
.checkout-payment-brand--crypto { width: 90px; height: 20px; }

.checkout-badge {
  border-radius: 999px;
  background: #153e2f;
  padding: 3px 8px;
  color: #7de3b9;
  font-size: .75rem;
  font-weight: 600;
}

.checkout-sticky-action { margin-top: 18px; }

.checkout-primary-action {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 14px;
  background: var(--checkout-accent);
  padding: 0 20px;
  color: #062d21;
  font-weight: 750;
  transition: background-color 140ms ease, opacity 140ms ease;
}

.checkout-primary-action:hover:not(:disabled) { background: var(--checkout-accent-hover); }

.checkout-primary-action:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.checkout-secondary-action {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--checkout-border);
  border-radius: 14px;
  background: transparent;
  padding: 0 16px;
  color: inherit;
}

.checkout-back,
.checkout-link-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #a8b0ab;
  text-decoration: none;
}

.checkout-back {
  display: flex;
  justify-content: flex-start;
  width: fit-content;
  padding: 0;
  font-size: .875rem;
  font-weight: 600;
  line-height: 20px;
}
.checkout-link-action { color: #7de3b9; }

.checkout-back:disabled { cursor: wait; opacity: .45; }

.checkout-payment-option {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  height: 80px;
  min-height: 80px;
  padding: 8px 16px;
  font-weight: 650;
}

.checkout-payment-option__leading {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.checkout-payment-option__label { display: block; }
.checkout-payment-option__renewal-label {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 18px;
  border-radius: 999px;
  background: #153e2f;
  padding: 2px 7px;
  color: #8ee7bd;
  font-size: .6875rem;
  font-weight: 750;
  letter-spacing: .01em;
  line-height: 1.15;
}

.checkout-payment-option--disabled {
  cursor: not-allowed;
  opacity: .42;
}

.checkout-payment-option--disabled img { filter: grayscale(1); }

.checkout-email-card { margin-bottom: 14px; }

.checkout-email-input {
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--checkout-border);
  border-radius: 12px;
  background: #272e2a;
  padding: 0 15px;
  color: var(--checkout-text);
}

.checkout-email-input::placeholder { color: #7d8781; }
.checkout-email-input[aria-invalid="true"] { border-color: var(--checkout-danger); }

.checkout-field-help,
.checkout-field-error {
  margin: 9px 0 0;
  font-size: .8125rem;
  line-height: 1.45;
}

.checkout-field-help { color: var(--checkout-muted); }
.checkout-field-error { color: var(--checkout-danger); }
.checkout-field-error:empty { display: none; }

.checkout-method-card { margin: 0; }

.checkout-error {
  margin-top: 14px;
  border: 1px solid #6e4141;
  border-radius: 12px;
  background: #2a1d1d;
  padding: 12px 14px;
  color: #fecaca;
  font-size: .875rem;
}

.checkout-notice {
  margin: 0 0 12px;
  border: 1px solid #356b55;
  border-radius: 12px;
  background: #172a22;
  padding: 12px 14px;
  color: #a7f3d0;
  font-size: .875rem;
}

.checkout-result-card,
.checkout-portal-summary,
.checkout-device-card {
  margin-bottom: 14px;
}

.checkout-portal-summary h2,
.checkout-device-card h2 {
  margin: 0 0 12px;
  font-size: 1.125rem;
}

.checkout-activation-code {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  overflow-wrap: anywhere;
  border: 1px solid #527565;
  border-radius: 12px;
  background: #121a16;
  padding: 10px 14px;
  color: #d1fae5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(1rem, 4vw, 1.25rem);
  font-weight: 750;
  letter-spacing: .06em;
  text-align: center;
}

.checkout-device-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checkout-device {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  min-height: 72px;
  align-items: center;
  gap: 14px;
  border-top: 1px solid #2c3530;
  padding: 12px 0;
}

.checkout-device:first-child {
  border-top: 0;
  padding-top: 0;
}

.checkout-device:last-child { padding-bottom: 0; }

.checkout-device__icon-wrap {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #3d5046;
  border-radius: 12px;
}

.checkout-device__icon {
  display: block;
  width: 19px;
  height: 19px;
  color: #9ee7c5;
}

.checkout-device__meta { display: grid; min-width: 0; gap: 3px; }
.checkout-device__meta strong { overflow-wrap: anywhere; font-weight: 750; }
.checkout-device__meta span { overflow-wrap: anywhere; color: var(--checkout-muted); font-size: .8125rem; line-height: 1.35; }

.checkout-device__revoke-action {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #754d4d;
  border-radius: 10px;
  background: transparent;
  padding: 0 11px;
  color: #fca5a5;
  font-size: .8125rem;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.checkout-device__revoke-action:hover:not(:disabled) { border-color: #c57878; background: #3a2525; color: #fecaca; }
.checkout-device__revoke-action:disabled { cursor: wait; opacity: .6; }
.checkout-device__revoke-icon { width: 16px; height: 16px; flex: 0 0 auto; }

.checkout-portal-actions { margin-top: 14px; }

#checkout-main:has(.checkout-portal) { max-width: 1080px; }
.checkout-portal-dashboard { width: 100%; margin: 0 auto; }
.checkout-portal-dashboard > .checkout-eyebrow { margin-bottom: 7px; }
.checkout-portal-dashboard > .checkout-title { margin-bottom: 10px; font-weight: 850; }
.checkout-portal-dashboard > .checkout-title + p { max-width: 650px; margin: 0 0 28px; color: var(--checkout-muted); font-size: 1rem; line-height: 1.5; }

.checkout-portal-status {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) minmax(184px, auto);
  align-items: center;
  gap: 22px;
  margin-bottom: 18px;
  overflow: hidden;
}

.checkout-portal-status--active { border-color: #356b55; background: linear-gradient(112deg, #1b3026, var(--checkout-surface)); }
.checkout-portal-status--grace { border-color: #8a6a2b; background: linear-gradient(112deg, #352b18, var(--checkout-surface)); }
.checkout-portal-status--inactive { border-color: #4a4d48; background: linear-gradient(112deg, #272b28, var(--checkout-surface)); }
.checkout-portal-status__frog { display: block; width: 116px; height: 116px; object-fit: contain; }
.checkout-portal-status__content h2,
.checkout-portal-service h2,
.checkout-portal-device-card h2 { margin: 0; font-size: 1.125rem; font-weight: 800; letter-spacing: -.015em; }
.checkout-portal-status__content > p { margin: 7px 0 0; color: var(--checkout-muted); line-height: 1.45; }
.checkout-portal-status__content .checkout-field-help { margin-top: 10px; }
.checkout-portal-status__badge {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 9px;
  border-radius: 999px;
  background: #153e2f;
  padding: 4px 9px;
  color: #7de3b9;
  font-size: .75rem;
  font-weight: 700;
}
.checkout-portal-status--inactive .checkout-portal-status__badge,
.checkout-portal-telegram--unlinked .checkout-portal-status__badge { background: #353b37; color: #d1d5d3; }
.checkout-portal-status--grace .checkout-portal-status__badge { background: #4a3918; color: #ffd47a; }
.checkout-portal-status__action { width: auto; min-width: 184px; }

.checkout-portal-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, .84fr); gap: 20px; align-items: start; }
.checkout-portal-grid__side { display: grid; gap: 14px; }
.checkout-portal-recurring { gap: 14px; }
.checkout-portal-recurring__summary {
  margin: -3px 0 2px;
  color: var(--checkout-muted);
  font-size: 1rem;
  line-height: 1.4;
}
.checkout-portal-recurring__controls {
  position: relative;
  display: flex;
  min-height: 36px;
  align-items: center;
  padding-right: 44px;
}
.checkout-portal-recurring__switch {
  display: inline-flex;
  width: fit-content;
  min-height: 36px;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--checkout-text);
  font-size: .875rem;
  font-weight: 700;
}
.checkout-portal-recurring__switch:disabled { cursor: wait; opacity: .65; }
.checkout-portal-recurring__switch:focus-visible { outline: 2px solid #8ee7bd; outline-offset: 3px; }
.checkout-portal-recurring__switch-track {
  display: inline-flex;
  width: 38px;
  height: 22px;
  align-items: center;
  border: 1px solid #4c5b53;
  border-radius: 999px;
  background: #303934;
  padding: 2px;
  transition: background-color .16s ease, border-color .16s ease;
}
.checkout-portal-recurring__switch-track > span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #cfd7d2;
  transition: transform .16s ease, background-color .16s ease;
}
.checkout-portal-recurring__switch[aria-checked="true"] .checkout-portal-recurring__switch-track { border-color: #10b981; background: #0b6a4d; }
.checkout-portal-recurring__switch[aria-checked="true"] .checkout-portal-recurring__switch-track > span { transform: translateX(16px); background: #ecfff5; }
.checkout-portal-recurring__remove {
  position: absolute;
  right: -2px;
  top: 50%;
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  padding: 0;
  color: var(--checkout-muted);
  transform: translateY(-50%);
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.checkout-portal-recurring__remove:hover { border-color: #634145; background: #38272a; color: #ffb6b8; }
.checkout-portal-recurring__remove:focus-visible { outline: 2px solid #ffb6b8; outline-offset: 2px; }
.checkout-portal-recurring__remove:disabled { cursor: wait; opacity: .55; }
.checkout-portal-recurring__remove-icon { width: 19px; height: 19px; }
.checkout-portal-recurring-modal-backdrop {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: grid;
  place-items: center;
  overflow-y: auto;
  background: rgb(7 10 8 / 76%);
  padding: 24px;
  overscroll-behavior: contain;
}
.checkout-portal-recurring-modal { display: grid; width: min(100%, 420px); gap: 16px; margin: auto; box-shadow: 0 24px 80px rgb(0 0 0 / 42%); }
.checkout-portal-recurring-modal h2 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.015em; }
.checkout-portal-recurring-modal > p { margin: 0; color: var(--checkout-muted); line-height: 1.5; }
.checkout-portal-recurring-modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 2px; }
.checkout-portal-recurring-modal__actions .checkout-secondary-action,
.checkout-portal-recurring-modal__actions .checkout-danger-action { min-height: 44px; padding: 0 12px; }
.checkout-danger-action {
  min-height: 40px;
  border: 1px solid #8d4d50;
  border-radius: 14px;
  background: #542b30;
  padding: 0 10px;
  color: #ffe3e3;
  font-weight: 700;
}
.checkout-danger-action:disabled { cursor: wait; opacity: .55; }
.checkout-portal-card-heading { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.checkout-portal-card-heading p,
.checkout-portal-device-help { color: var(--checkout-muted); font-size: 1rem; line-height: 1.5; }
.checkout-portal-card-heading p { margin: 6px 0 0; }
.checkout-portal-device-help { margin: 0 0 16px; }
.checkout-portal-device-card:has(.checkout-portal-device-help) .checkout-portal-card-heading { margin-bottom: 8px; }
.checkout-portal-add-device-action { margin: 0 0 16px; }
.checkout-portal-device-list { border-top: 1px solid #2c3530; padding-top: 14px; }

.checkout-portal-activation-modal-backdrop {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  overflow-y: auto;
  background: rgb(7 10 8 / 76%);
  padding: 24px;
}
.checkout-portal-activation-modal { width: min(100%, 860px); margin: auto; box-shadow: 0 24px 80px rgb(0 0 0 / 42%); }
.checkout-portal-activation-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.checkout-portal-activation-modal__header h2,
.checkout-portal-activation-modal__connection h3,
.checkout-portal-activation-modal__manual h3 { margin: 0; font-size: 1.125rem; font-weight: 800; letter-spacing: -.015em; }
.checkout-portal-activation-modal__header p,
.checkout-portal-activation-modal__manual > p { margin: 6px 0 0; color: var(--checkout-muted); line-height: 1.45; }
.checkout-portal-activation-modal__close {
  display: grid;
  width: 36px;
  height: 36px;
  min-height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 1px solid #3b4942;
  border-radius: 10px;
  background: #202824;
  padding: 0;
  color: var(--checkout-text);
}
.checkout-portal-activation-modal__close-icon { display: block; width: 18px; height: 18px; }
.checkout-portal-activation-modal__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.checkout-portal-activation-modal__connection,
.checkout-portal-activation-modal__manual { border: 1px solid #334039; border-radius: 14px; background: var(--checkout-surface-raised); padding: 18px; }
.checkout-portal-activation-modal__connection { display: grid; align-content: start; gap: 14px; }
.checkout-portal-activation-modal__connection:has(.checkout-portal-activation-modal__loading) { align-content: stretch; }
.checkout-portal-activation-modal__code-label { color: var(--checkout-text); }
.checkout-portal-activation-modal__connection .checkout-activation-code { width: 100%; }
.checkout-portal-activation-modal__connection .checkout-field-help { margin: -4px 0 0; }
.checkout-portal-activation-modal__loading,
.checkout-portal-activation-modal__error { display: grid; min-height: 178px; align-content: center; justify-items: center; gap: 14px; text-align: center; }
.checkout-portal-activation-modal__loading { align-self: stretch; }
.checkout-portal-activation-modal__loading p,
.checkout-portal-activation-modal__error p { margin: 0; }
.checkout-portal-activation-modal__manual { display: grid; align-content: start; gap: 12px; }
.checkout-portal-activation-modal__manual > p { margin: 0; }
.checkout-portal-activation-modal__manual ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: activation-step;
  color: var(--checkout-muted);
  line-height: 1.4;
}
.checkout-portal-activation-modal__manual li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  counter-increment: activation-step;
}
.checkout-portal-activation-modal__manual li::before {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid #42614f;
  border-radius: 50%;
  background: #27352d;
  color: #a9f1ca;
  content: counter(activation-step);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1;
}

.checkout-portal-service { display: grid; gap: 12px; }
.checkout-portal-service > p { margin: -3px 0 2px; color: var(--checkout-muted); line-height: 1.45; }
.checkout-portal-service .checkout-portal-status__badge { margin: 0; }
.checkout-portal-service__header { display: flex; align-items: center; gap: 9px; }
.checkout-portal-service__header h2 { flex: 1 1 auto; }
.checkout-portal-service__icon { width: 20px; height: 20px; flex: 0 0 auto; color: #8ee7bd; }
.checkout-portal-telegram--linked .checkout-secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.checkout-portal-link-list { display: grid; gap: 8px; }
.checkout-portal-app-download { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; }
.checkout-portal-app-download .checkout-portal-quick-action { width: 100%; }
.checkout-portal-qr-action {
  display: inline-grid;
  min-height: 48px;
  place-items: center;
  border: 1px solid #3b4942;
  border-radius: 12px;
  background: #202824;
  color: #8ee7bd;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.checkout-portal-qr-action:hover { border-color: #5d9b7b; background: #26332d; transform: translateY(-1px); }
.checkout-portal-qr-action:focus-visible { outline: 2px solid #8ee7bd; outline-offset: 2px; }
.checkout-portal-qr-action__icon { width: 20px; height: 20px; }
.checkout-portal-app-qr {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #3b4942;
  border-radius: 12px;
  background: #f7faf8;
  padding: 10px;
}
.checkout-portal-app-qr img { width: 96px; height: 96px; flex: 0 0 auto; }
.checkout-portal-app-qr p { margin: 0; color: #27302b; font-size: .8125rem; line-height: 1.4; }
.checkout-portal-quick-action {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 11px;
  border: 1px solid #3b4942;
  border-radius: 12px;
  background: #202824;
  padding: 9px 12px;
  color: var(--checkout-text);
  font-size: .875rem;
  font-weight: 720;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.checkout-portal-quick-action:hover { border-color: #5d9b7b; background: #26332d; transform: translateY(-1px); }
.checkout-portal-quick-action__icon { width: 22px; height: 22px; flex: 0 0 auto; color: #8ee7bd; }

.checkout-portal-skeleton__intro { display: grid; gap: 10px; margin-bottom: 28px; }
.checkout-portal-skeleton__line,
.checkout-portal-skeleton__frog,
.checkout-portal-skeleton__badge,
.checkout-portal-skeleton__action,
.checkout-portal-skeleton__device,
.checkout-portal-skeleton__quick-action,
.checkout-portal-skeleton__service-icon {
  display: block;
  border-radius: 999px;
  background: #2a342e;
}
.checkout-portal-skeleton__line--title { width: min(280px, 58%); height: clamp(2.1rem, 4.48vw, 2.8rem); }
.checkout-portal-skeleton__line--subtitle { width: min(520px, 88%); height: 24px; }
.checkout-portal-skeleton__status { height: 156px; }
.checkout-portal-skeleton__frog { width: 116px; height: 116px; border-radius: 28px; }
.checkout-portal-skeleton__status-copy { display: grid; align-content: center; gap: 12px; }
.checkout-portal-skeleton__badge { width: 88px; height: 24px; }
.checkout-portal-skeleton__badge--service { width: 68px; height: 24px; }
.checkout-portal-skeleton__line--heading { width: 46%; height: 22px; }
.checkout-portal-skeleton__line--copy { width: min(100%, 360px); height: 16px; }
.checkout-portal-skeleton__line--count { width: 34%; height: 18px; }
.checkout-portal-skeleton__line--service-heading { width: 42%; height: 22px; }
.checkout-portal-skeleton__line--device-name { width: 44%; height: 14px; }
.checkout-portal-skeleton__line--device-meta { width: 62%; height: 12px; }
.checkout-portal-skeleton__action { width: 184px; height: 54px; border-radius: 12px; }
.checkout-portal-skeleton__action--full { width: 100%; }
.checkout-portal-skeleton__card { display: grid; align-content: start; }
.checkout-portal-skeleton__device-card { gap: 18px; }
.checkout-portal-skeleton__device-heading { display: grid; gap: 6px; }
.checkout-portal-skeleton__device-list { display: grid; gap: 0; border-top: 1px solid #2c3530; padding-top: 14px; }
.checkout-portal-skeleton__device,
.checkout-portal-skeleton__quick-action { width: 100%; height: 48px; border-radius: 12px; }
.checkout-portal-skeleton__device {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 96px;
  min-height: 72px;
  align-items: center;
  gap: 14px;
  border-top: 1px solid #2c3530;
  border-radius: 0;
  background: transparent;
  padding: 12px 0;
}
.checkout-portal-skeleton__device:first-child { border-top: 0; padding-top: 0; }
.checkout-portal-skeleton__device:last-child { padding-bottom: 0; }
.checkout-portal-skeleton__device-icon,
.checkout-portal-skeleton__device-action {
  display: block;
  background: #2a342e;
}
.checkout-portal-skeleton__device-icon { width: 38px; height: 38px; border-radius: 12px; }
.checkout-portal-skeleton__device-copy { display: grid; gap: 6px; }
.checkout-portal-skeleton__device-action { width: 96px; height: 40px; border-radius: 10px; }
.checkout-portal-skeleton__service { gap: 12px; }
.checkout-portal-skeleton__service--telegram { min-height: 202px; }
.checkout-portal-skeleton__service--links { min-height: 178px; }
.checkout-portal-skeleton__service-heading { display: flex; align-items: center; gap: 9px; }
.checkout-portal-skeleton__service-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.checkout-portal-skeleton__service-heading .checkout-portal-skeleton__line { flex: 1 1 auto; }
.checkout-portal-skeleton__copy-stack,
.checkout-portal-skeleton__link-list { display: grid; gap: 8px; }
.checkout-portal-skeleton__shimmer { animation: checkout-portal-skeleton-pulse 1.45s ease-in-out infinite; }

@keyframes checkout-portal-skeleton-pulse {
  0%, 100% { opacity: .58; }
  50% { opacity: 1; }
}

@media (min-width: 768px) and (max-width: 980px) {
  .checkout-portal-grid { grid-template-columns: 1fr; }
  .checkout-portal-grid__side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .checkout-portal-telegram--linked,
  .checkout-portal-telegram--unlinked,
  .checkout-portal-recurring,
  .checkout-portal-skeleton__service--telegram { grid-column: 1 / -1; }
}

.checkout-selected-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--checkout-border);
  border-radius: 12px;
  background: var(--checkout-surface-raised);
  padding: 13px 14px;
}

.checkout-mobile-summary { margin: -12px 0 16px; }

.checkout-benefits { margin-top: 24px; }
#checkout-summary > .checkout-benefits { margin-top: 0; }

.checkout-summary-stack {
  display: grid;
  gap: 16px;
}

.checkout-summary-stack > .checkout-summary-title,
.checkout-summary-stack > .checkout-selected-plan,
.checkout-summary-stack > .checkout-annual-upsell,
.checkout-summary-stack > .checkout-benefits {
  margin-top: 0;
  margin-bottom: 0;
}

.checkout-benefits__title,
.checkout-summary-title {
  margin: 0 0 15px;
  font-size: 1.125rem;
  font-weight: 700;
}

.checkout-benefits__list {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  color: var(--checkout-text);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.45;
  list-style: none;
}

.checkout-benefits__list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.checkout-benefits__list img { flex: 0 0 auto; }

.checkout-benefits--compact {
  border-top: 1px solid #27302b;
  margin-top: 22px;
  padding-top: 20px;
}

.checkout-benefits--compact .checkout-benefits__list {
  grid-template-columns: 1fr;
}

.checkout-annual-upsell {
  margin-top: 28px;
  border: 1px solid var(--checkout-border);
  border-radius: 14px;
  background: #1d2521;
  padding: 16px;
}

.checkout-annual-upsell__saving {
  margin: 0;
  color: var(--checkout-text);
  font-size: .9375rem;
  font-weight: 700;
}

.checkout-annual-upsell__discount {
  margin: 3px 0 0;
  color: var(--checkout-muted);
  font-size: .8125rem;
}

.checkout-annual-upsell__prices {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 14px;
}

.checkout-annual-upsell__prices strong {
  color: var(--checkout-text);
  font-size: 1.125rem;
}

.checkout-annual-upsell__prices span {
  color: var(--checkout-muted);
  font-size: .8125rem;
  text-decoration: line-through;
}

.checkout-annual-upsell__action {
  min-height: 0;
  margin-top: 10px;
  border: 0;
  background: transparent;
  padding: 4px 0;
  color: #7de3b9;
  font-size: .875rem;
  font-weight: 700;
}

.checkout-mobile-payment-details { display: block; }
.checkout-mobile-payment-details .checkout-benefits { margin-top: 22px; }

.checkout-mobile-only { display: block; }

.checkout-legal { margin: 14px 0 0; color: #a8b0ab; font-size: .8125rem; line-height: 1.45; text-align: center; }
.checkout-legal a {
  display: inline;
  min-height: 0;
  color: #7de3b9;
}

.checkout-screen--submitting > :not(.checkout-dim-layer, .checkout-creating-dialog) {
  pointer-events: none;
}

.checkout-dim-layer {
  position: fixed;
  z-index: 40;
  inset: 0;
  background: rgb(7 10 8 / 76%);
}

.checkout-creating-dialog {
  position: fixed;
  z-index: 41;
  top: 50%;
  left: 50%;
  width: min(90vw, 420px);
  transform: translate(-50%, -50%);
  border: 1px solid #3e5147;
  border-radius: 16px;
  background: #1b211e;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 24px 70px rgb(0 0 0 / 32%);
}

.checkout-creating-dialog h2 {
  margin: 15px 0 0;
  font-size: 1.125rem;
}

.checkout-creating-dialog p {
  margin: 7px 0 0;
  color: var(--checkout-muted);
  font-size: .875rem;
}

.checkout-spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid #527565;
  border-top-color: var(--checkout-accent);
  border-radius: 999px;
  animation: checkout-spin .8s linear infinite;
}

@keyframes checkout-spin { to { transform: rotate(360deg); } }

.checkout-skeleton-card {
  display: grid;
  gap: 11px;
  min-height: 300px;
}

.checkout-skeleton-line,
.checkout-skeleton-row,
.checkout-summary-skeleton {
  display: block;
  border-radius: 10px;
  background: #252d29;
  animation: checkout-pulse 1.4s ease-in-out infinite alternate;
}

.checkout-skeleton-line {
  width: 42%;
  height: 20px;
}

.checkout-skeleton-row { height: 70px; }
.checkout-summary-skeleton { min-height: 260px; }

@keyframes checkout-pulse {
  to { background: #2c3631; }
}

@media (min-width: 768px) {
  #checkout-main {
    padding-top: 48px;
  }

  #checkout-main[data-summary-layout="aside"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
  }

  #checkout-main[data-summary-layout="aside"]:has(.checkout-invalid-entry) {
    grid-template-columns: minmax(0, 440px);
    justify-content: center;
    gap: 0;
  }

  #checkout-main[data-summary-layout="aside"] > #checkout-summary {
    display: block;
    align-self: start;
  }

  .checkout-screen--with-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: auto auto;
    column-gap: 24px;
    align-items: start;
  }

  .checkout-step-intro,
  .checkout-step-content { grid-column: 1; }
  .checkout-step-intro { grid-row: 1; }
  .checkout-step-content,
  .checkout-screen--with-summary #checkout-summary { grid-row: 2; }
  .checkout-step-content { min-width: 0; }

  .checkout-screen--with-summary #checkout-summary {
    display: block;
    grid-column: 2;
    align-self: start;
    margin: 0;
  }

  .checkout-mobile-only,
  .checkout-mobile-summary,
  .checkout-mobile-payment-details { display: none; }
  .checkout-plan-card { padding: 20px; }
  .checkout-plan-card .checkout-option {
    min-height: 68px;
    padding: 10px 14px;
  }
}

@media (max-width: 767px) {
  #checkout-main { padding: 28px 16px 164px; }
  #checkout-main:has(.checkout-recovery-auth:not(.checkout-recovery-static)) { padding-block: 28px; }
  .checkout-route-auth #checkout-main { padding-block: 28px; }
  .checkout-session-hint #checkout-main { padding-block: 44px 72px; }
  .checkout-recovery-auth { transform: translateY(-20px); }

  .checkout-card { padding: 16px; }
  .checkout-recovery-auth__sent-content { inset: 16px; }

  .checkout-option {
    min-height: 72px;
    padding: 12px;
  }

  .checkout-option__name { flex-wrap: wrap; }

  .checkout-plan-card .checkout-option {
    min-height: 66px;
    padding: 10px 12px;
  }

  .checkout-device {
    align-items: flex-start;
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .checkout-device__revoke-action { grid-column: 1 / -1; width: 100%; }

  .checkout-header-actions { gap: 8px; }
  .checkout-header-status { display: none; }
  .checkout-portal-status { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .checkout-portal-status__frog { width: 84px; height: 84px; }
  .checkout-portal-skeleton__frog { width: 84px; height: 84px; }
  .checkout-portal-skeleton__status { height: auto; min-height: 0; }
  .checkout-portal-skeleton__status-copy { gap: 10px; }
  .checkout-portal-skeleton__action { grid-column: 1 / -1; width: 100%; height: 54px; }
  .checkout-portal-skeleton__device { height: auto; grid-template-columns: 38px minmax(0, 1fr); align-items: start; }
  .checkout-portal-skeleton__device-action { grid-column: 1 / -1; width: 100%; }
  .checkout-portal-status__action { grid-column: 1 / -1; width: 100%; }
  .checkout-portal-grid { grid-template-columns: 1fr; gap: 14px; }
  .checkout-portal-grid__side { grid-template-columns: 1fr; }
  .checkout-portal-recurring__controls { width: 100%; }
  .checkout-portal-card-heading { margin-bottom: 14px; }
  .checkout-portal-activation-modal-backdrop { align-items: center; padding: 16px; }
  .checkout-portal-activation-modal { max-height: calc(100dvh - 32px); margin: auto; overflow-y: auto; padding: 16px; }
  .checkout-portal-activation-modal__header { gap: 12px; margin-bottom: 16px; }
  .checkout-portal-activation-modal__body { grid-template-columns: 1fr; gap: 14px; }
  .checkout-portal-activation-modal__connection,
  .checkout-portal-activation-modal__manual { padding: 16px; }

  .checkout-sticky-action {
    position: sticky;
    z-index: 20;
    bottom: 0;
    margin: 18px -16px -148px;
    border-top: 1px solid #27302b;
    background: rgb(17 21 19 / 96%);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    backdrop-filter: blur(14px);
  }
}

@media (max-width: 380px) {
  .checkout-payment-option {
    gap: 8px;
    padding: 8px 12px;
  }

  .checkout-payment-option__renewal-label { font-size: .625rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
  .checkout-portal-skeleton__shimmer { animation: none; }
}