:root {
  color-scheme: dark;
  --bg: #061427;
  --panel-top: #173253;
  --panel-mid: #0b1f38;
  --panel-bottom: #061427;
  --border: rgba(224, 237, 255, 0.14);
  --border-strong: rgba(147, 197, 253, 0.28);
  --surface: rgba(224, 237, 255, 0.06);
  --surface-strong: rgba(215, 231, 255, 0.14);
  --text-primary: #f7faff;
  --text-secondary: #d7e7ff;
  --text-muted: #93c5fd;
  --accent: #93c5fd;
  --accent-soft: rgba(147, 197, 253, 0.18);
  --info: #e0edff;
  --danger-soft: rgba(255, 109, 109, 0.14);
  --danger-text: #ffb2b2;
}

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

@keyframes colorDriftOne {
  0%   { transform: translate3d(  0px,    0px, 0); }
  15%  { transform: translate3d(180px,   60px, 0); }
  30%  { transform: translate3d(220px,  320px, 0); }
  50%  { transform: translate3d( 40px,  500px, 0); }
  65%  { transform: translate3d(-160px, 340px, 0); }
  80%  { transform: translate3d(-100px, 120px, 0); }
  100% { transform: translate3d(  0px,    0px, 0); }
}

@keyframes colorDriftTwo {
  0%   { transform: translate3d(  0px,    0px, 0); }
  20%  { transform: translate3d(-180px,  200px, 0); }
  40%  { transform: translate3d(-80px,  480px, 0); }
  55%  { transform: translate3d( 60px,  600px, 0); }
  70%  { transform: translate3d( 160px, 300px, 0); }
  85%  { transform: translate3d( 80px,   80px, 0); }
  100% { transform: translate3d(  0px,    0px, 0); }
}

@keyframes colorDriftThree {
  0%   { transform: translate3d(  0px,    0px, 0); }
  18%  { transform: translate3d(-140px, -80px, 0); }
  36%  { transform: translate3d( 100px,  80px, 0); }
  54%  { transform: translate3d( 200px, 360px, 0); }
  72%  { transform: translate3d( -60px, 480px, 0); }
  88%  { transform: translate3d(-180px, 200px, 0); }
  100% { transform: translate3d(  0px,    0px, 0); }
}

@keyframes startupShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@keyframes startupSpinnerRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


html,
body,
#root {
  width: 100%;
  height: 100%;
}

body {
  background: #000000;
  color: var(--text-primary);
  overflow: hidden;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
  overscroll-behavior: none;
}

.canvas {
  --ui-scale: 1;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

.startup-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050b14;
  opacity: 1;
  transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

.startup-overlay--fade-out {
  opacity: 0;
  pointer-events: none;
}

.startup-overlay__spinner {
  position: relative;
  width: 38px;
  height: 38px;
}

.startup-overlay__spinner-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(255, 255, 255, 0.88);
  animation: startupSpinnerRotate 0.9s linear infinite;
}

.app-toast {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: 50%;
  z-index: 140;
  width: min(calc(100% - 24px), 380px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(224, 237, 255, 0.12);
  border-radius: 20px;
  background: rgba(8, 19, 36, 0.92);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  transform: translateX(-50%);
  animation: confirm-sheet-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.app-toast--success {
  border-color: rgba(134, 239, 172, 0.22);
  background:
    linear-gradient(180deg, rgba(8, 28, 24, 0.94), rgba(8, 19, 36, 0.94));
}

.app-toast__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d7e7ff;
  background: rgba(147, 197, 253, 0.14);
}

.app-toast--success .app-toast__icon {
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.16);
}

.app-toast__icon svg {
  width: 18px;
  height: 18px;
}

.app-toast__message {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
  color: #f8fbff;
  letter-spacing: -0.01em;
}

button {
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.main-card-shell {
  --pulse-zone-min-height: calc(164px * var(--ui-scale));
  --center-size: calc(141px * var(--ui-scale));
  --setup-ring-size: calc(172px * var(--ui-scale));
  --pulse-diameter: calc(884px * var(--ui-scale));
  --status-date-size: calc(22px * var(--ui-scale));
  --status-date-line: calc(34px * var(--ui-scale));
  --status-pill-height: calc(34px * var(--ui-scale));
  --status-pill-font: calc(12px * var(--ui-scale));
  --action-min-height: calc(67px * var(--ui-scale));
  --action-radius: calc(24px * var(--ui-scale));
  --action-pad-y: calc(16px * var(--ui-scale));
  --action-pad-x-right: calc(16px * var(--ui-scale));
  --action-pad-x-left: calc(14px * var(--ui-scale));
  --action-content-pad-right: calc(18px * var(--ui-scale));
  --action-content-pad-left: calc(26px * var(--ui-scale));
  --action-icon-offset: calc(18px * var(--ui-scale));
  --action-icon-size: calc(23px * var(--ui-scale));
  --action-title-size: calc(16px * var(--ui-scale));
  --support-value-size: calc(14px * var(--ui-scale));
  --support-action-font: calc(11px * var(--ui-scale));
  --support-action-pad-y: calc(5px * var(--ui-scale));
  --support-action-pad-x-right: calc(10px * var(--ui-scale));
  --support-action-pad-x-left: calc(9px * var(--ui-scale));
  --support-action-icon-size: calc(12px * var(--ui-scale));
  position: relative;
  width: 100%;
  max-width: 430px;
  min-height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  border-radius: 0;
  background: linear-gradient(168deg, #061428 0%, #040e1c 30%, #02080f 65%, #010508 100%);
}

.main-card-shell--sheet-open .main-card__pulse {
  animation-play-state: paused;
}

.main-card-shell--sheet-open .living-bg__color,
.main-card-shell--sheet-open .main-card-shell__glow {
  animation-play-state: paused;
}

.living-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.living-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 20%, rgba(1, 4, 10, 0.55) 70%, rgba(1, 4, 10, 0.80) 100%);
  pointer-events: none;
  z-index: 1;
}

.living-bg__color {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

.living-bg__color--one {
  width: 595px;
  height: 595px;
  top: -120px;
  left: -100px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.40) 0%, rgba(34, 211, 238, 0.26) 18%, rgba(34, 211, 238, 0.08) 42%, rgba(34, 211, 238, 0.02) 60%, transparent 72%);
  animation: colorDriftOne 38s ease-in-out infinite;
}

.living-bg__color--two {
  width: 646px;
  height: 646px;
  top: 80px;
  left: -80px;
  background: radial-gradient(circle, rgba(147, 197, 253, 0.70) 0%, rgba(147, 197, 253, 0.48) 18%, rgba(147, 197, 253, 0.16) 42%, rgba(147, 197, 253, 0.04) 60%, transparent 72%);
  animation: colorDriftTwo 46s ease-in-out infinite;
  animation-delay: -17s;
}

.living-bg__color--three {
  width: 544px;
  height: 544px;
  top: 300px;
  left: -20px;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.68) 0%, rgba(96, 165, 250, 0.46) 18%, rgba(96, 165, 250, 0.14) 42%, rgba(96, 165, 250, 0.03) 60%, transparent 72%);
  animation: colorDriftThree 32s ease-in-out infinite;
  animation-delay: -7s;
}


.main-card-shell__glow {
  position: absolute;
  pointer-events: none;
  filter: blur(64px);
  z-index: 0;
  display: none;
}

.main-card-shell__glow--top {
  top: -24px;
  left: 50%;
  width: 240px;
  height: 140px;
  background: rgba(224, 237, 255, 0.18);
  transform: translateX(-50%);
}

.main-card-shell__glow--middle {
  top: 120px;
  left: 50%;
  width: 128px;
  height: 128px;
  background: rgba(147, 197, 253, 0.24);
  transform: translateX(-50%);
}

.main-card-shell__glow--bottom {
  right: 0;
  bottom: 32px;
  width: 180px;
  height: 140px;
  background: rgba(147, 197, 253, 0.14);
}

.main-card {
  --home-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --home-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --home-layout-duration: 760ms;
  --home-transform-duration: 420ms;
  --home-fade-duration: 240ms;
  --home-logo-duration: 620ms;
  --home-dock-reserve: 78px;
  --home-panel-to-ack-gap: 10px;
  --home-ack-to-dock-gap: 6px;
  --home-ack-height: 52px;
  --home-panel-top-offset: 18px;
  --home-panel-bottom-clearance: calc(var(--home-dock-reserve) + var(--home-panel-to-ack-gap) + var(--home-ack-height) + var(--home-ack-to-dock-gap));
  --screen-transition-duration: 420ms;
  --screen-transition-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100%;
  min-height: 100dvh;
  padding: 14px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.main-card--subscription-view {
  justify-content: flex-start;
}

.main-card__screen {
  width: 100%;
  min-height: 100%;
  min-width: 0;
}

.main-card__screen--home {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  padding: 16px 16px 84px;
  gap: 10px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity var(--screen-transition-duration) var(--screen-transition-ease),
    transform var(--screen-transition-duration) var(--screen-transition-ease),
    visibility 0s linear 0ms;
}

.main-card__screen--setup {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 84px;
  min-width: 0;
  z-index: 3;
  background: transparent;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity var(--screen-transition-duration) var(--screen-transition-ease),
    transform var(--screen-transition-duration) var(--screen-transition-ease),
    visibility 0s linear var(--screen-transition-duration);
}

.main-card__screen--subscription {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: auto;
  max-width: 100%;
  z-index: 4;
  background:
    linear-gradient(180deg, rgba(10, 26, 47, 0.96), rgba(8, 21, 40, 0.98)),
    linear-gradient(135deg, rgba(23, 50, 83, 0.34) 0%, rgba(11, 31, 56, 0.44) 56%, rgba(6, 20, 39, 0.58) 100%);
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity var(--screen-transition-duration) var(--screen-transition-ease),
    transform var(--screen-transition-duration) var(--screen-transition-ease),
    visibility 0s linear var(--screen-transition-duration);
}

.main-card__screen--device-purchase {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: auto;
  max-width: 100%;
  z-index: 5;
  background: rgba(10, 22, 41, 0.985);
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity var(--screen-transition-duration) var(--screen-transition-ease),
    transform var(--screen-transition-duration) var(--screen-transition-ease),
    visibility 0s linear var(--screen-transition-duration);
}

.main-card__screen--support {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 0;
  min-width: 0;
  z-index: 3;
  background: transparent;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity var(--screen-transition-duration) var(--screen-transition-ease),
    transform var(--screen-transition-duration) var(--screen-transition-ease),
    visibility 0s linear var(--screen-transition-duration);
}

/* Содержимое экрана поддержки */
.support-screen {
  --support-title-size: clamp(27px, calc(27px * var(--ui-scale)), 29px);
  --support-section-size: 11px;
  --support-label-size: clamp(12px, calc(12px * var(--ui-scale)), 13px);
  --support-value-size: clamp(13px, calc(13px * var(--ui-scale)), 15px);
  --support-badge-size: clamp(11px, calc(11px * var(--ui-scale)), 12px);
  --support-action-font: clamp(11.5px, calc(11.5px * var(--ui-scale)), 12.5px);
  --support-action-pad-y: clamp(6px, calc(6px * var(--ui-scale)), 7px);
  --support-action-pad-x-right: clamp(12px, calc(12px * var(--ui-scale)), 13px);
  --support-action-pad-x-left: clamp(11px, calc(11px * var(--ui-scale)), 12px);
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 78px;
}
.support-screen::-webkit-scrollbar { display: none; }

/* Прокручиваемая область (блоки 1–3) */
.support-scroll {
  display: flex;
  flex-direction: column;
}
.support-scroll::-webkit-scrollbar { display: none; }

.support-scroll > .support-card:first-child {
  margin-top: 0;
}

.support-scroll::-webkit-scrollbar {
  display: none;
}

.support-screen__header {
  padding: 4px 2px 0;
}

.support-screen__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.9;
}

.support-screen__title {
  margin-top: 6px;
  font-size: var(--support-title-size);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: #ffffff;
}

/* ── Support cards ── */
.support-card {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(147, 197, 253, 0.12);
  border-radius: 22px;
  background: rgba(224, 237, 255, 0.05);
  backdrop-filter: blur(12px);
}

.support-card__profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.support-card__avatar {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(224, 237, 255, 0.12);
  background: rgba(224, 237, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: rgba(224, 237, 255, 0.60);
}

.support-card__avatar-image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
  opacity: 0;
  transition: opacity 180ms ease;
}

.support-card__avatar-image--loaded {
  opacity: 1;
}

.support-card__avatar-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.support-card__avatar-spinner-ring {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-top-color: rgba(255, 255, 255, 0.92);
  animation: startupSpinnerRotate 1.26s linear infinite;
}

.support-card__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.support-card__name {
  font-size: clamp(16px, calc(16px * var(--ui-scale)), 17px);
  font-weight: 650;
  color: #ffffff;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.support-card__id {
  font-size: var(--support-label-size);
  font-weight: 550;
  color: rgba(224, 237, 255, 0.5);
  letter-spacing: 0.02em;
}

.support-card__copy {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(224, 237, 255, 0.14);
  background: rgba(224, 237, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(224, 237, 255, 0.50);
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.support-card__copy svg {
  width: 16px;
  height: 16px;
}

.support-card__copy:active {
  transform: scale(0.88);
}

.support-card__copy--done {
  border-color: rgba(134, 239, 172, 0.40);
  background: rgba(134, 239, 172, 0.10);
  color: rgba(134, 239, 172, 0.85);
  transform: scale(1.08);
}

.support-card--sub {
  margin-top: 10px;
}

.support-card__section-title {
  font-size: var(--support-section-size);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(147, 197, 253, 0.56);
  margin-bottom: 12px;
}

.support-sub__rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Unified subscription info group ── */
.support-sub__rows--compact {
  --support-sub-compact-right-col: clamp(108px, calc(120px * var(--ui-scale)), 132px);
  gap: 0;
  border: 1px solid rgba(147, 197, 253, 0.10);
  border-radius: 12px;
  background: rgba(224, 237, 255, 0.035);
  overflow: hidden;
}

.support-sub__rows--compact .support-sub__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--support-sub-compact-right-col);
  align-items: center;
  border: none;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid rgba(224, 237, 255, 0.06);
}

.support-sub__rows--compact .support-sub__row:last-child {
  border-bottom: none;
}

.support-sub__rows--compact .support-sub__label {
  min-width: 0;
}

.support-sub__rows--compact .support-sub__value,
.support-sub__rows--compact .support-sub__badge {
  justify-self: end;
}

.support-sub__rows--compact .support-sub__value {
  width: 100%;
}

.support-sub__rows--compact .support-sub__badge {
  min-width: auto;
  justify-content: center;
}

.support-sub__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(224, 237, 255, 0.07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.support-sub__label {
  font-size: var(--support-label-size);
  color: rgba(224, 237, 255, 0.5);
  font-weight: 550;
}

.support-sub__value {
  font-size: var(--support-value-size);
  font-weight: 650;
  color: #ffffff;
  text-align: right;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.support-sub__value--accent {
  color: rgba(147, 197, 253, 0.95);
}

.support-sub__value--muted {
  color: rgba(224, 237, 255, 0.30);
  font-weight: 500;
}

.support-sub__badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: var(--support-badge-size);
  font-weight: 700;
}

.support-sub__badge--active {
  background: rgba(134, 239, 172, 0.08);
  border: 1px solid rgba(134, 239, 172, 0.26);
  color: rgba(134, 239, 172, 0.88);
}

.support-sub__badge--inactive {
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.22);
  color: rgba(252, 165, 165, 0.92);
}

.support-sub__row-end {
  --support-devices-action-font: clamp(11.5px, calc(11.5px * var(--ui-scale)), 12.5px);
  --support-devices-action-pad-y: clamp(5px, calc(5px * var(--ui-scale)), 6px);
  --support-devices-action-pad-x-right: clamp(10px, calc(10px * var(--ui-scale)), 11px);
  --support-devices-action-pad-x-left: clamp(9px, calc(9px * var(--ui-scale)), 10px);
  --support-devices-action-icon-size: clamp(12px, calc(12px * var(--ui-scale)), 13px);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
  flex: 0 1 auto;
}

.support-sub__row--col {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-bottom: 12px;
}

.support-sub__row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.support-sub__row--col .support-sub__row-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.support-sub__hint {
  font-size: var(--support-label-size);
  color: rgba(147, 197, 253, 0.6);
  font-weight: 500;
  line-height: 1.45;
  margin-top: 7px;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(96, 165, 250, 0.06);
  border: 1px solid rgba(96, 165, 250, 0.12);
}

.support-sub__action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--support-action-pad-y) var(--support-action-pad-x-right) var(--support-action-pad-y) var(--support-action-pad-x-left);
  border-radius: 999px;
  border: 1px solid rgba(224, 237, 255, 0.12);
  background: rgba(224, 237, 255, 0.05);
  color: rgba(224, 237, 255, 0.45);
  font-size: var(--support-action-font);
  font-weight: 650;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms ease;
  white-space: nowrap;
  flex: 0 0 auto;
}

.support-sub__action--primary {
  border-color: rgba(147, 197, 253, 0.22);
  background: rgba(96, 165, 250, 0.10);
  color: rgba(224, 237, 255, 0.84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.support-sub__action--primary:active {
  background: rgba(96, 165, 250, 0.16);
  border-color: rgba(147, 197, 253, 0.34);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.14);
}

.support-sub__action svg {
  width: var(--support-action-icon-size);
  height: var(--support-action-icon-size);
  flex: 0 0 var(--support-action-icon-size);
}

.support-sub__row-top .support-sub__label {
  flex: 1 1 auto;
  min-width: 0;
}

.support-sub__row-top .support-sub__value {
  flex: 0 0 auto;
  white-space: nowrap;
}

.support-sub__row--col .support-sub__row-top .support-sub__value {
  font-size: var(--support-value-size);
}

.support-sub__row-end .support-sub__action {
  font-size: var(--support-devices-action-font);
  padding: var(--support-devices-action-pad-y) var(--support-devices-action-pad-x-right) var(--support-devices-action-pad-y) var(--support-devices-action-pad-x-left);
}

.support-sub__row-end .support-sub__action svg {
  width: var(--support-devices-action-icon-size);
  height: var(--support-devices-action-icon-size);
  flex: 0 0 var(--support-devices-action-icon-size);
}

.support-sub__row-end--devices {
  display: grid;
  width: 100%;
  margin-top: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  justify-content: stretch;
  align-items: center;
  gap: 5px 6px;
}

.support-sub__value--devices {
  justify-self: end;
  align-self: center;
  font-size: var(--support-value-size);
}

.support-sub__action--devices {
  min-height: 28px;
}

.support-sub__row-end--devices .support-sub__action--primary {
  justify-self: start;
}

.support-sub__row-end--devices .support-sub__action--devices:not(.support-sub__action--primary) {
  justify-self: end;
}

.support-sub__action:active {
  transform: scale(0.90);
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.30);
  color: rgba(248, 113, 113, 0.85);
  box-shadow: 0 0 10px rgba(248, 113, 113, 0.15);
}

/* ── Confirm modal ── */
@keyframes confirm-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 10, 20, 0.58);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  animation: confirm-overlay-in 160ms ease both;
}

.confirm-overlay--payment {
  padding: 18px;
  background: rgba(4, 10, 20, 0.46);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
}

@keyframes confirm-sheet-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes device-sheet-in {
  from { opacity: 0; transform: translateY(28px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.confirm-sheet {
  width: 100%;
  max-width: 390px;
  padding: 24px 20px 20px;
  border: 1px solid rgba(224, 237, 255, 0.10);
  border-radius: 24px;
  background: rgba(12, 26, 48, 0.97);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: confirm-sheet-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.confirm-sheet--device {
  width: 100%;
  max-width: 100%;
  min-height: calc(100dvh - 18px);
  padding: 0;
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at top, rgba(123, 170, 231, 0.12), transparent 34%),
    #0a1629;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 60px rgba(0, 0, 0, 0.42);
  animation: device-sheet-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.confirm-sheet__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(248, 113, 113, 0.25);
  background: rgba(248, 113, 113, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(248, 113, 113, 0.80);
  margin-bottom: 4px;
}

.confirm-sheet__icon svg {
  width: 22px;
  height: 22px;
}

.confirm-sheet__icon-image {
  width: 22px;
  height: 22px;
  display: block;
  background-color: currentColor;
  mask-image: url('/strelkaaa.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url('/strelkaaa.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.confirm-sheet__title {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  text-align: center;
}

.confirm-sheet__desc {
  font-size: 14px;
  color: rgba(224, 237, 255, 0.45);
  text-align: center;
  line-height: 1.45;
  max-width: 300px;
}

.confirm-sheet__actions {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}

.confirm-sheet__btn {
  flex: 1 1 0;
  min-height: 50px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 700;
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 150ms ease;
}

.confirm-sheet__btn:active {
  transform: scale(0.94);
  opacity: 0.85;
}

.confirm-sheet__btn--cancel {
  border: 1px solid rgba(224, 237, 255, 0.12);
  background: rgba(224, 237, 255, 0.06);
  color: rgba(224, 237, 255, 0.65);
}

.confirm-sheet__btn--danger {
  border: 1px solid rgba(248, 113, 113, 0.30);
  background: rgba(248, 113, 113, 0.14);
  color: rgba(248, 113, 113, 0.92);
}

.confirm-sheet__icon--amber {
  border-color: rgba(251, 191, 36, 0.25);
  background: rgba(251, 191, 36, 0.10);
  color: rgba(251, 191, 36, 0.80);
}

.confirm-sheet__btn--warning {
  border: 1px solid rgba(251, 191, 36, 0.30);
  background: rgba(251, 191, 36, 0.14);
  color: rgba(251, 191, 36, 0.92);
}

.payment-sheet {
  max-width: 388px;
  padding: 24px 18px 18px;
  gap: 14px;
  border-radius: 24px;
  background: #050608;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.payment-sheet__header {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}

.payment-sheet__header--waiting {
  gap: 8px;
}

.payment-sheet__header--success {
  align-items: center;
}

.payment-sheet__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.payment-sheet__inline-link {
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  color: #93c5fd;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.payment-sheet__waiting-body {
  --payment-status-center-y: 78px;
  width: 100%;
  min-height: 156px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-sheet__waiting-body--success {
  position: relative;
  min-height: 188px;
  display: block;
}

.payment-sheet__waiting-spinner {
  position: relative;
  width: 64px;
  height: 64px;
}

.payment-sheet__waiting-spinner-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(255, 255, 255, 0.92);
  animation: startupSpinnerRotate 0.9s linear infinite;
}

.payment-sheet__status-visual {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-sheet__status-visual--success {
  position: absolute;
  top: var(--payment-status-center-y);
  left: 50%;
  transform: translate(-50%, -50%);
}

.payment-sheet__status-ring,
.payment-sheet__status-glow {
  position: absolute;
  inset: 0;
  border-radius: 999px;
}

.payment-sheet__status-ring {
  border: 2px solid rgba(187, 247, 208, 0.34);
  background: radial-gradient(circle at 30% 30%, rgba(187, 247, 208, 0.18), rgba(90, 180, 140, 0.06) 58%, rgba(0, 0, 0, 0) 74%);
  animation: paymentSuccessRingIn 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.payment-sheet__status-glow {
  inset: 8px;
  background: rgba(112, 216, 168, 0.12);
  filter: blur(10px);
  animation: paymentSuccessGlowIn 420ms ease both;
}

.payment-sheet__status-check {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  color: #d8ffeb;
  animation: paymentSuccessCheckIn 360ms 120ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.payment-sheet__status-copy {
  width: 100%;
  padding-top: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.payment-sheet__status-message {
  max-width: 260px;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  color: rgba(232, 245, 255, 0.72);
}

.payment-sheet__waiting-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.payment-sheet__waiting-actions--success {
  margin-top: 2px;
}

.payment-sheet__secondary-btn {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(224, 237, 255, 0.82);
  font-size: 14px;
  font-weight: 600;
}

.payment-sheet__secondary-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.payment-sheet__submit {
  width: 100%;
}

.payment-sheet__submit--quiet {
  min-height: 50px;
  border-radius: 16px;
  border: 1px solid rgba(186, 210, 236, 0.14);
  background: rgba(163, 188, 218, 0.06);
  color: rgba(214, 229, 246, 0.82);
  box-shadow: none;
}

.payment-sheet__submit--quiet .payment-sheet__submit-label,
.payment-sheet__submit--quiet .subscription-sheet__submit-label {
  color: rgba(214, 229, 246, 0.82);
}

.payment-sheet__submit--quiet:active {
  transform: scale(0.985);
}

.payment-sheet__submit--ack {
  min-height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(187, 247, 208, 0.18);
  background: rgba(120, 216, 170, 0.10);
  color: #e9fff5;
}

.payment-sheet__submit--ack .payment-sheet__submit-label,
.payment-sheet__submit--ack .subscription-sheet__submit-label {
  color: #e9fff5;
}

@keyframes paymentSuccessRingIn {
  from {
    opacity: 0;
    transform: scale(0.76);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes paymentSuccessGlowIn {
  from {
    opacity: 0;
    transform: scale(0.7);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes paymentSuccessCheckIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.payment-sheet__section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 15px;
  border-radius: 18px;
  background: rgba(11, 15, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.payment-sheet__purchase-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.payment-sheet__purchase-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.payment-sheet__purchase-row-label {
  font-size: 12px;
  color: rgba(224, 237, 255, 0.5);
}

.payment-sheet__purchase-row-value {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  text-align: right;
}

.payment-sheet__purchase-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.payment-sheet__purchase-row--summary .payment-sheet__purchase-row-label,
.payment-sheet__purchase-row--summary .payment-sheet__purchase-row-value {
  font-size: 14px;
  color: #ffffff;
}

.payment-sheet__method-card {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(23, 53, 95, 0.92), rgba(13, 35, 63, 0.96));
  border: 1px solid rgba(147, 197, 253, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.payment-sheet__method-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
}

.payment-sheet__sbp-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 40px;
  padding: 5px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
}

.payment-sheet__sbp-badge img {
  width: auto;
  height: 24px;
  display: block;
}

.payment-sheet__method-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.payment-sheet__method-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.payment-sheet__method-caption {
  font-size: 11px;
  line-height: 1.25;
  color: rgba(224, 237, 255, 0.72);
}

.payment-sheet__footer {
  width: 100%;
  margin-top: 4px;
}

.payment-sheet__submit {
  width: 100%;
  min-height: 58px;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 18px;
}

.payment-sheet__submit-label {
  justify-content: flex-start;
  text-align: left;
  font-size: 15px;
}

.payment-sheet__submit-prices {
  justify-content: flex-end;
  min-width: 0;
}

.payment-sheet__submit-price {
  white-space: nowrap;
  font-size: 18px;
}

.payment-sheet__submit:disabled {
  opacity: 0.6;
  cursor: default;
}

@media (max-width: 380px) {
  .payment-sheet {
    padding: 20px 16px 16px;
  }

  .payment-sheet__waiting-body {
    --payment-status-center-y: 68px;
    min-height: 136px;
  }

  .payment-sheet__waiting-body--success {
    min-height: 170px;
  }

  .payment-sheet__waiting-spinner {
    width: 58px;
    height: 58px;
  }

  .payment-sheet__status-visual {
    width: 58px;
    height: 58px;
  }

  .payment-sheet__status-copy {
    padding-top: 106px;
  }

  .payment-sheet__purchase-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .payment-sheet__purchase-row-value {
    text-align: left;
  }

  .payment-sheet__method-card {
    padding: 8px 9px;
  }

  .payment-sheet__sbp-badge {
    width: 44px;
    height: 38px;
  }

  .payment-sheet__sbp-badge img {
    height: 22px;
  }
}

.device-sheet__viewport {
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  overscroll-behavior: contain;
}

.device-screen {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  height: 100%;
  padding: 16px 16px 0;
  overflow: hidden;
}

.device-screen__back {
  margin-bottom: 10px;
  align-self: flex-start;
}

.device-screen__header {
  margin-bottom: 4px;
}

.devices-block--device-purchase {
  margin-top: 12px;
}

.device-purchase-estimate {
  margin-top: 14px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(224, 237, 255, 0.08);
  background: rgba(224, 237, 255, 0.08);
  backdrop-filter: blur(22px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(3, 10, 20, 0.12);
}

.device-purchase-estimate__hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
  min-width: 0;
}

.device-purchase-estimate__hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.device-purchase-estimate__hero-label {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(224, 237, 255, 0.06);
  border: 1px solid rgba(224, 237, 255, 0.12);
  color: rgba(224, 237, 255, 0.78);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: 0 1 auto;
  min-width: 0;
}

.device-purchase-estimate__hero-note {
  color: rgba(224, 237, 255, 0.62);
  font-size: 13px;
  line-height: 1.4;
  min-height: 17px;
}

.device-purchase-estimate__hero-value {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  min-width: 88px;
  color: #f5fbff;
  flex: 0 0 auto;
  white-space: nowrap;
}

.device-purchase-estimate__hero-value .subscription-price {
  display: inline-flex;
  justify-content: flex-end;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.device-purchase-estimate__hero-value .subscription-price__currency {
  color: rgba(224, 237, 255, 0.72);
  font-size: 16px;
  font-weight: 700;
}

.device-purchase-estimate__meta {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.device-purchase-estimate__meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(224, 237, 255, 0.06);
  border: 1px solid rgba(224, 237, 255, 0.12);
  color: rgba(247, 250, 255, 0.92);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.device-purchase-estimate__meta-text {
  color: rgba(224, 237, 255, 0.56);
  font-size: 13px;
  text-align: left;
}

.device-purchase-estimate__summary {
  display: grid;
  gap: 8px;
}

.device-purchase-estimate__summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(104px, 0.92fr);
  align-items: flex-start;
  column-gap: 12px;
  min-width: 0;
}

.device-purchase-estimate__summary-label {
  color: rgba(224, 237, 255, 0.48);
  font-size: 13px;
  min-width: 0;
  line-height: 1.32;
}

.device-purchase-estimate__summary-value {
  color: #f5fbff;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.32;
}

.device-purchase-estimate__summary-row--result {
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.device-screen__submit {
  margin-top: 14px;
  margin-bottom: 0;
  flex: 0 0 auto;
  min-height: 67px;
  border-radius: 24px;
  border-color: rgba(218, 238, 255, 0.56);
  background: #7aa7df;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 26px rgba(7, 23, 40, 0.26),
    0 0 0 1px rgba(186, 224, 255, 0.14);
  font-size: 16px;
}

.device-screen__submit:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -6px 12px rgba(20, 40, 74, 0.12),
    0 6px 14px rgba(6, 18, 34, 0.16);
}

@media (max-width: 390px) {
  .device-screen {
    padding: 12px 12px 0;
  }

  .device-screen__header .subscription-screen__title {
    font-size: 28px;
    line-height: 1;
  }

  .device-screen__header .subscription-screen__subtitle {
    font-size: 13px;
    line-height: 1.3;
  }

  .device-purchase-estimate {
    margin-top: 12px;
    padding: 11px;
    border-radius: 18px;
  }

  .device-purchase-estimate__hero {
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }

  .device-purchase-estimate__hero-value {
    min-width: fit-content;
    justify-content: flex-end;
    align-self: flex-start;
    margin-left: auto;
  }

  .device-purchase-estimate__hero-value .subscription-price {
    font-size: 25px;
    letter-spacing: -0.05em;
  }

  .device-purchase-estimate__hero-value .subscription-price__currency {
    font-size: 13px;
  }

  .device-purchase-estimate__hero-copy {
    gap: 5px;
  }

  .device-purchase-estimate__meta {
    margin-bottom: 9px;
    padding-bottom: 9px;
  }

  .device-purchase-estimate__meta-text {
    text-align: left;
    font-size: 12px;
  }

  .device-purchase-estimate__summary-row {
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    column-gap: 8px;
  }

  .device-purchase-estimate__summary-row--result {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    margin-top: 2px;
    padding-top: 8px;
  }

  .device-purchase-estimate__summary-label {
    font-size: 12px;
  }

  .device-purchase-estimate__summary-value {
    font-size: 12px;
  }

  .device-screen__submit {
    margin-top: 10px;
    min-height: 56px;
    border-radius: 20px;
  }
}

@media (max-height: 760px) {
  .device-screen {
    padding-top: 10px;
  }

  .device-screen__header {
    margin-bottom: 2px;
  }

  .device-screen__header .subscription-screen__title {
    font-size: 30px;
    line-height: 1;
  }

  .device-screen__header .subscription-screen__subtitle {
    font-size: 13px;
    line-height: 1.3;
  }

  .devices-block--device-purchase {
    margin-top: 8px;
  }

  .device-purchase-estimate {
    margin-top: 10px;
    padding: 12px;
    border-radius: 18px;
  }

  .device-purchase-estimate__hero {
    margin-bottom: 7px;
    gap: 8px;
  }

  .device-purchase-estimate__hero-copy {
    gap: 5px;
  }

  .device-purchase-estimate__hero-label {
    min-height: 26px;
    padding: 0 10px;
    font-size: 11px;
  }

  .device-purchase-estimate__hero-note,
  .device-purchase-estimate__meta-text,
  .device-purchase-estimate__summary-label,
  .device-purchase-estimate__summary-value {
    font-size: 12px;
  }

  .device-purchase-estimate__hero-value .subscription-price {
    font-size: 26px;
  }

  .device-purchase-estimate__hero-value .subscription-price__currency {
    font-size: 12px;
  }

  .device-purchase-estimate__meta {
    margin-bottom: 8px;
    padding-bottom: 8px;
  }

  .device-purchase-estimate__summary {
    gap: 6px;
  }

  .device-purchase-estimate__summary-row {
    column-gap: 8px;
  }

  .device-purchase-estimate__summary-row--result {
    margin-top: 1px;
    padding-top: 7px;
  }

  .device-screen__submit {
    margin-top: 10px;
    min-height: 54px;
    font-size: 15px;
  }
}

@media (max-width: 360px) {
  .device-screen {
    padding: 10px 10px 0;
  }

  .device-screen__header .subscription-screen__title {
    font-size: 26px;
  }

  .device-screen__header .subscription-screen__subtitle,
  .device-purchase-estimate__hero-note,
  .device-purchase-estimate__meta-text,
  .device-purchase-estimate__summary-label,
  .device-purchase-estimate__summary-value {
    font-size: 11px;
  }

  .device-purchase-estimate {
    padding: 10px;
    border-radius: 16px;
  }

  .device-purchase-estimate__hero {
    gap: 7px;
  }

  .device-purchase-estimate__hero-label {
    min-height: 24px;
    padding: 0 9px;
    font-size: 10px;
  }

  .device-purchase-estimate__hero-value .subscription-price {
    font-size: 22px;
  }

  .device-purchase-estimate__hero-value .subscription-price__currency {
    font-size: 11px;
  }

  .device-purchase-estimate__summary-row {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    column-gap: 7px;
  }

  .device-purchase-estimate__summary-row--result {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  }

  .device-screen__submit {
    min-height: 52px;
    font-size: 14px;
  }
}

@media (max-height: 680px) {
  .device-screen {
    padding-top: 8px;
  }

  .devices-block--device-purchase {
    margin-top: 6px;
  }

  .device-purchase-estimate {
    margin-top: 8px;
    padding: 10px;
    border-radius: 16px;
  }

  .device-purchase-estimate__hero {
    gap: 7px;
    margin-bottom: 6px;
  }

  .device-purchase-estimate__hero-copy {
    gap: 4px;
  }

  .device-purchase-estimate__hero-label {
    min-height: 24px;
    padding: 0 9px;
    font-size: 10px;
  }

  .device-purchase-estimate__hero-value .subscription-price {
    font-size: 22px;
  }

  .device-purchase-estimate__hero-value .subscription-price__currency {
    font-size: 11px;
  }

  .device-purchase-estimate__meta {
    margin-bottom: 7px;
    padding-bottom: 7px;
  }

  .device-purchase-estimate__summary {
    gap: 5px;
  }

  .device-screen__submit {
    margin-top: 8px;
    min-height: 50px;
  }
}

/* ── Support screen hidden when ref open ── */
.support-screen {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0;
  transition: opacity 160ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.support-screen--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-14px);
}

/* ── Referral program screen ── */
.ref-screen {
  position: absolute;
  inset: 0;
  padding: 14px 14px 78px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  scrollbar-width: none;
  opacity: 0;
  pointer-events: none;
  transform: translateX(20px);
  transition: opacity 160ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ref-screen--active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

/* ── Unified back button ── */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: rgba(224, 237, 255, 0.55);
  padding: 4px 0;
  align-self: flex-start;
  transition: color 180ms ease;
}
.back-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: -0.5px;
}
.back-btn:active {
  color: rgba(224, 237, 255, 0.90);
}

.ref-screen__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 12px 8px;
  gap: 8px;
}

.ref-screen__hero-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  border: 1px solid rgba(167, 139, 250, 0.22);
  background: rgba(139, 92, 246, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(196, 181, 253, 0.80);
  margin-bottom: 4px;
}

.ref-screen__hero-icon svg {
  width: 32px;
  height: 32px;
}

.ref-screen__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #ffffff;
  line-height: 1.15;
}

.ref-screen__subtitle {
  font-size: 13px;
  color: rgba(224, 237, 255, 0.45);
  line-height: 1.4;
  max-width: 240px;
}

.ref-screen__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ref-stat-card {
  padding: 16px 14px;
  border: 1px solid rgba(224, 237, 255, 0.09);
  border-radius: 18px;
  background: rgba(247, 250, 255, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ref-stat-card__val {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #ffffff;
  line-height: 1;
}

.ref-stat-card__val--accent {
  color: rgba(167, 139, 250, 0.95);
}

.ref-stat-card__label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(224, 237, 255, 0.35);
  text-align: center;
}

.ref-screen__how {
  padding: 14px 16px;
  border: 1px solid rgba(224, 237, 255, 0.08);
  border-radius: 18px;
  background: rgba(247, 250, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ref-screen__how-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(224, 237, 255, 0.35);
}

.ref-screen__how-text {
  font-size: 13px;
  color: rgba(224, 237, 255, 0.60);
  line-height: 1.5;
}

.ref-screen__how-text strong {
  color: rgba(167, 139, 250, 0.90);
  font-weight: 700;
}

/* Реферальная ссылка */
.ref-screen__link-card {
  position: sticky;
  bottom: 0;
  flex: 0 0 auto;
  margin-top: 8px;
  padding: 11px 18px;
  border-radius: 22px;
  border: 1px solid rgba(196, 181, 253, 0.56);
  background: #8b6fc0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 26px rgba(30, 10, 60, 0.26),
    0 0 0 1px rgba(196, 181, 253, 0.14);
}

.ref-screen__link-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ref-screen__link-label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ref-screen__link-label-text {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(252, 254, 255, 0.72);
}

.ref-screen__link-val {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: #fcfeff;
  text-shadow: 0 1px 0 rgba(30, 10, 60, 0.14);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ref-screen__link-copy {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(252, 254, 255, 0.32);
  background: rgba(255, 255, 255, 0.12);
  color: #fcfeff;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ref-screen__link-copy svg {
  width: 16px;
  height: 16px;
}
.ref-screen__link-copy:active {
  transform: scale(0.88);
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(252, 254, 255, 0.58);
}
.ref-screen__link-copy--done {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(252, 254, 255, 0.5);
}

/* ── Support link rows ── */
.support-sub__link-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(224, 237, 255, 0.07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  text-align: left;
  transition: background 200ms ease, border-color 200ms ease, transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.support-sub__link-row:active {
  transform: scale(0.97);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(224, 237, 255, 0.14);
}

.support-sub__link-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.support-sub__link-icon svg {
  width: 17px;
  height: 17px;
}

.support-sub__link-icon--blue {
  background: rgba(147, 197, 253, 0.10);
  border: 1px solid rgba(147, 197, 253, 0.18);
  color: rgba(147, 197, 253, 0.75);
}

.support-sub__link-icon--neutral {
  background: rgba(147, 197, 253, 0.10);
  border: 1px solid rgba(147, 197, 253, 0.18);
  color: rgba(147, 197, 253, 0.75);
}

.support-sub__link-icon--purple {
  background: rgba(147, 197, 253, 0.10);
  border: 1px solid rgba(147, 197, 253, 0.18);
  color: rgba(147, 197, 253, 0.75);
}

.support-sub__ref-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(167, 139, 250, 0.14);
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.05);
}

.support-sub__ref-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.support-sub__ref-hint {
  font-size: 11px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: rgba(196, 181, 253, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.support-sub__link-label {
  flex: 1 1 auto;
  font-size: var(--support-value-size);
  font-weight: 650;
  color: rgba(224, 237, 255, 0.88);
  min-width: 0;
}

.support-sub__link-arrow {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: rgba(147, 197, 253, 0.28);
}

/* ── Support screen entrance animations ── */
.support-scroll .support-card:nth-child(1) {
  animation: enterCard 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 40ms;
}

.support-scroll .support-card:nth-child(2) {
  animation: enterCard 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 120ms;
}

.support-scroll .support-card:nth-child(3) {
  animation: enterCard 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 200ms;
}

.main-card__screen--support .support-card--key {
  animation: enterCardUp 450ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 260ms;
}

@keyframes enterCard {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes enterCardUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Key block ── */
.support-card--key {
  position: sticky;
  bottom: 0;
  flex: 0 0 auto;
  margin-top: 8px;
  padding: 11px 18px;
  border-radius: 22px;
  border-color: rgba(218, 238, 255, 0.56);
  background: #7aa7df;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 26px rgba(7, 23, 40, 0.26),
    0 0 0 1px rgba(186, 224, 255, 0.14);
}

.support-key__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.support-key__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.support-key__label {
  font-size: var(--support-section-size);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(252, 254, 255, 0.72);
}

.support-key__val {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  font-weight: 550;
  color: #fcfeff;
  text-shadow: 0 1px 0 rgba(7, 23, 40, 0.14);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.support-key__copy-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(252, 254, 255, 0.32);
  background: rgba(255, 255, 255, 0.12);
  color: #fcfeff;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.support-key__copy-btn svg {
  width: 16px;
  height: 16px;
}

.support-key__copy-btn--done {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(252, 254, 255, 0.5);
}

.support-key__copy-btn:active {
  transform: scale(0.88);
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(252, 254, 255, 0.58);
  color: #ffffff;
}

.support-key__reissue {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(252, 254, 255, 0.24);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(252, 254, 255, 0.92);
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.support-key__reissue svg {
  width: 18px;
  height: 18px;
}

.support-key__reissue img {
  width: 18px;
  height: 18px;
  display: block;
}

.support-key__reissue-icon {
  width: 18px;
  height: 18px;
  display: block;
  background-color: currentColor;
  mask-image: url('/strelkaaa.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url('/strelkaaa.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.support-key__reissue:active {
  transform: scale(0.88);
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(252, 254, 255, 0.42);
  color: #ffffff;
}

/* ── Help screen (tab 3) ── */
.main-card__screen--help {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 78px;
  z-index: 3;
  background: transparent;
  opacity: 0;
  transform: none;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 160ms ease, visibility 0s linear 260ms;
}

.main-card__screen--active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity var(--screen-transition-duration) var(--screen-transition-ease),
    transform var(--screen-transition-duration) var(--screen-transition-ease),
    visibility 0s linear 0ms;
}

.help-screen {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: 100%;
  transition: opacity 160ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.help-screen--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-20px);
}

/* Hero-блок */
.help-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 22px 26px;
  border: 1px solid rgba(224, 237, 255, 0.09);
  border-radius: 24px;
  background: rgba(247, 250, 255, 0.05);
  backdrop-filter: blur(12px);
  animation: enterItem 600ms cubic-bezier(0.65, 0, 0.35, 1) both;
  animation-delay: 60ms;
}

.help-hero__icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(139, 92, 246, 0.10);
  border: 1px solid rgba(167, 139, 250, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(196, 181, 253, 0.80);
}

.help-hero__icon svg {
  width: 28px;
  height: 28px;
}

.help-hero__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.help-hero__title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #ffffff;
  line-height: 1.1;
}

.help-hero__subtitle {
  font-size: 14px;
  color: rgba(224, 237, 255, 0.45);
  line-height: 1.5;
  max-width: 300px;
}

/* Кнопки-блоки действий */
.help-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.help-action-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(224, 237, 255, 0.09);
  border-radius: 16px;
  background: rgba(247, 250, 255, 0.04);
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.help-action-card:nth-child(1) {
  animation: enterItem 600ms cubic-bezier(0.65, 0, 0.35, 1) both;
  animation-delay: 140ms;
}

.help-action-card:nth-child(2) {
  animation: enterItem 600ms cubic-bezier(0.65, 0, 0.35, 1) both;
  animation-delay: 220ms;
}

.help-action-card:nth-child(3) {
  animation: enterItem 600ms cubic-bezier(0.65, 0, 0.35, 1) both;
  animation-delay: 300ms;
}

.help-action-card:active {
  transform: scale(0.97);
  background: rgba(247, 250, 255, 0.08);
  border-color: rgba(224, 237, 255, 0.16);
}

.help-action-card__icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-action-card__icon svg {
  width: 19px;
  height: 19px;
}

.help-action-card__icon--blue {
  background: rgba(96, 165, 250, 0.10);
  border: 1px solid rgba(96, 165, 250, 0.20);
  color: rgba(147, 197, 253, 0.90);
}

.help-action-card__icon--teal {
  background: rgba(45, 212, 191, 0.08);
  border: 1px solid rgba(45, 212, 191, 0.18);
  color: rgba(94, 234, 212, 0.85);
}

.help-action-card__icon--green {
  background: rgba(74, 222, 128, 0.10);
  border: 1px solid rgba(74, 222, 128, 0.22);
  color: rgba(134, 239, 172, 0.90);
}

.help-action-card__icon--purple {
  background: rgba(139, 92, 246, 0.10);
  border: 1px solid rgba(167, 139, 250, 0.22);
  color: rgba(196, 181, 253, 0.80);
}

.help-action-card__icon--purple svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.help-action-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.help-action-card__title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(224, 237, 255, 0.90);
  letter-spacing: -0.01em;
}

.help-action-card__sub {
  font-size: 12px;
  color: rgba(224, 237, 255, 0.38);
  font-weight: 500;
}

.help-action-card__arrow {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: rgba(224, 237, 255, 0.22);
}

.main-card__screen--hidden {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity var(--screen-transition-duration) var(--screen-transition-ease),
    transform var(--screen-transition-duration) var(--screen-transition-ease),
    visibility 0s linear var(--screen-transition-duration);
}

/* ── Entrance animations ─────────────────────────────────── */
@keyframes enterItem {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes enterHero {
  from { opacity: 0; transform: scale(0.82) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Вся пульс-зона целиком: лого + волны вырастают из одной точки */
.main-card__hero .main-card__pulse-zone {
  animation: enterHero 750ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 0ms;
  transform-origin: center;
}

/* Home screen — bottom-stack элементы */
.main-card__screen--home .main-card__status-block {
  animation: enterItem 600ms cubic-bezier(0.65, 0, 0.35, 1) both;
  animation-delay: 120ms;
}

.home-brand-panel {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: clamp(202px, calc((100vw - 28px) * 0.679), 278px);
  margin-top: 12px;
  border-radius: 26px;
  background: linear-gradient(168deg, rgba(147, 197, 253, 0.07) 0%, rgba(224, 237, 255, 0.04) 100%);
  border: 1px solid rgba(224, 237, 255, 0.1);
  backdrop-filter: blur(22px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(3, 10, 20, 0.14);
  overflow: hidden;
  transform-origin: top center;
  will-change: height, transform, opacity;
  transition:
    height var(--home-layout-duration) var(--home-motion-ease),
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}

.home-brand-panel__logo-group {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  transition: transform var(--home-logo-duration) var(--home-motion-ease);
}

.home-brand-panel__logo {
  display: block;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  will-change: width, transform, opacity;
  transition:
    width var(--home-logo-duration) var(--home-motion-ease),
    transform var(--home-logo-duration) var(--home-motion-ease),
    opacity var(--home-logo-duration) var(--home-motion-ease);
}

.home-brand-panel__logo--enc {
  z-index: 1;
  top: 51.8519%;
  left: 0;
  width: 78.5978%;
}

.home-brand-panel__logo--vpn {
  z-index: 2;
  top: 0;
  left: 78.5978%;
  width: 21.4022%;
}

.home-brand-panel__logo--brand {
  width: 82%;
  filter: drop-shadow(0 0 32px rgba(147, 197, 253, 0.12));
}

.home-brand-panel__prompt {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 8px 10px 8px 14px;
  border: 1px solid rgba(224, 237, 255, 0.1);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(10, 18, 31, 0.32), rgba(10, 18, 31, 0.48));
  color: rgba(238, 245, 255, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 24px rgba(3, 10, 20, 0.1);
  backdrop-filter: blur(18px);
  will-change: opacity, transform;
  transition:
    opacity var(--home-fade-duration) var(--home-fade-ease),
    transform var(--home-transform-duration) var(--home-motion-ease),
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}

.home-brand-panel__prompt-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.home-brand-panel__prompt--unread {
  border-color: rgba(156, 214, 255, 0.2);
}

.home-brand-panel__prompt-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #f5f9ff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.home-brand-panel__prompt-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #79cfff;
  box-shadow: 0 0 0 4px rgba(121, 207, 255, 0.1), 0 0 14px rgba(121, 207, 255, 0.45);
}

.home-brand-panel__prompt-text {
  color: rgba(228, 237, 250, 0.64);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
}

.home-brand-panel__prompt-action {
  flex: 0 0 auto;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px 0 13px;
  border: 1px solid rgba(156, 214, 255, 0.2);
  border-radius: 999px;
  background: rgba(156, 214, 255, 0.1);
  color: #f5f9ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease;
}

.home-brand-panel__prompt-action svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.home-brand-panel__prompt-action:active {
  transform: scale(0.96);
  background: rgba(156, 214, 255, 0.18);
  border-color: rgba(156, 214, 255, 0.3);
}

.home-brand-panel__separator {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 96px;
  z-index: 3;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(224, 237, 255, 0.34) 16%, rgba(224, 237, 255, 0.34) 84%, rgba(255, 255, 255, 0));
  transform: translate3d(0, 14px, 0) scaleX(0.3);
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity;
  transition:
    transform var(--home-transform-duration) var(--home-motion-ease),
    opacity var(--home-fade-duration) var(--home-fade-ease);
}

.home-brand-panel__info {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 110px;
  bottom: 22px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  pointer-events: none;
  will-change: transform, opacity;
  transition:
    opacity var(--home-fade-duration) var(--home-fade-ease),
    transform var(--home-transform-duration) var(--home-motion-ease);
}

.home-brand-panel__info-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  will-change: transform, opacity;
  transition:
    opacity var(--home-fade-duration) var(--home-fade-ease),
    transform var(--home-transform-duration) var(--home-motion-ease);
}

.home-brand-panel__info-status {
  color: rgba(156, 214, 255, 0.68);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
}

.home-brand-panel__info-label {
  width: fit-content;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(224, 237, 255, 0.1);
  color: rgba(228, 237, 250, 0.72);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 22px;
}

.home-brand-panel__info-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(224, 237, 255, 0.12);
  border-radius: 999px;
  background: rgba(224, 237, 255, 0.06);
  color: rgba(228, 237, 250, 0.78);
  cursor: pointer;
}

.home-brand-panel__info-close svg {
  width: 14px;
  height: 14px;
}

.home-brand-panel__info-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 0;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  will-change: transform, opacity;
  transition:
    opacity var(--home-fade-duration) var(--home-fade-ease),
    transform var(--home-transform-duration) var(--home-motion-ease);
}

.home-brand-panel__info-title {
  width: 100%;
  min-width: 0;
  max-width: none;
  color: #f5f9ff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.home-brand-panel__info-message {
  width: 100%;
  min-width: 0;
  max-width: none;
  color: rgba(228, 237, 250, 0.8);
  font-size: 13px;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.home-brand-panel__ack-slot {
  position: relative;
  z-index: 11;
  flex-shrink: 0;
  width: 100%;
  max-height: 0;
  margin: auto 0 0;
  overflow: hidden;
  pointer-events: none;
  will-change: max-height, margin-bottom;
  transition:
    max-height var(--home-layout-duration) var(--home-motion-ease),
    margin-bottom 260ms var(--home-motion-ease);
}

.home-brand-panel__ack-slot--visible {
  max-height: calc(var(--home-ack-height) + var(--home-panel-to-ack-gap));
  margin-bottom: var(--home-ack-to-dock-gap);
  pointer-events: auto;
}

.home-brand-panel__ack-button {
  width: 100%;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  will-change: transform, opacity;
  transition:
    opacity var(--home-fade-duration) var(--home-fade-ease) 110ms,
    transform var(--home-transform-duration) var(--home-motion-ease) 110ms;
}

.home-brand-panel__ack-slot--visible .home-brand-panel__ack-button {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.home-brand-panel__ack-button svg[fill="none"] {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-brand-panel--expanded {
  height: calc(100dvh - var(--home-panel-bottom-clearance) - var(--home-panel-top-offset));
  border-color: rgba(224, 237, 255, 0.14);
  background: linear-gradient(180deg, rgba(224, 237, 255, 0.1), rgba(224, 237, 255, 0.06));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -24px 44px rgba(4, 14, 28, 0.08),
    0 12px 28px rgba(3, 10, 20, 0.14);
}

.home-brand-panel--expanded .home-brand-panel__prompt {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  pointer-events: none;
}

.home-brand-panel--expanded .home-brand-panel__logo--enc {
  top: 0;
  left: -1.2%;
  width: 22.9%;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.1));
}

.home-brand-panel--expanded .home-brand-panel__logo--vpn {
  top: 9px;
  left: 12.4%;
  width: 9.2%;
  transform: none;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.08));
}

.home-brand-panel--expanded .home-brand-panel__logo--brand {
  width: 31.5%;
  transform: translateX(-34%) translateY(-42%);
  opacity: 0.6;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.1));
}

.home-brand-panel--expanded .home-brand-panel__separator {
  transform: translate3d(0, 0, 0) scaleX(1);
  opacity: 1;
  transition-delay: 40ms;
}

.home-brand-panel--expanded .home-brand-panel__info {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
  transition-delay: 70ms;
}

.home-brand-panel--expanded .home-brand-panel__info-top {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 100ms;
}

.home-brand-panel--expanded .home-brand-panel__info-body {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 130ms;
}

.main-card__actions .main-action {
  backface-visibility: hidden;
}

.setup-header {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 0 2px;
  z-index: 2;
}

.setup-header__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.setup-header__title-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.setup-header__title-device {
  font-size: 23px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.setup-header__meta {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.4;
  max-width: 300px;
}

.main-card__bottom-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: auto;
  margin-bottom: 10px;
  overflow: visible;
  opacity: 1;
  transform: none;
}

.main-card__bottom-stack--brand-hidden {
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.main-card__screen--home > .main-card__bottom-stack {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 84px;
  margin: 0;
  overflow: visible;
  opacity: 1;
  transform: none;
  clip-path: none;
  z-index: 2;
}

.main-card__screen--home > .main-card__bottom-stack.main-card__bottom-stack--brand-hidden {
  overflow: hidden;
  opacity: 0;
  transform: none;
  pointer-events: none;
}

.main-card-shell--sheet-open .main-card__screen--home {
  pointer-events: none;
}

.main-card__header,
.main-card__status-block,
.main-card__footer-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.main-card__eyebrow {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.main-card__title {
  margin-top: 4px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.08;
}

.main-card__pulse {
  /* Фиксированный размер = финальный диаметр волны */
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--pulse-diameter);
  height: var(--pulse-diameter);
  border: 1.5px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  opacity: 0;
  /* Стартовый scale = 150/884 ≈ 0.1697 — визуально тот же старт что и раньше */
  transform: translate3d(-50%, -50%, 0) scale(0.1697);
  transform-origin: center;
  z-index: 1;
  pointer-events: none;
  /* forwards вместо infinite — animationend срабатывает → элемент удаляется из DOM */
  animation: pulseRing 21s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  /* только composite операции — нет layout/reflow */
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.main-card__pulse-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.58);
  stroke-width: 0.55;
  opacity: 0;
  shape-rendering: geometricPrecision;
}

.main-card__pulse--primary {
  border-color: rgba(255, 255, 255, 0.68);
  border-width: 1.5px;
  animation-name: pulseRingPrimary;
}

@keyframes pulseRing {
  0%   { opacity: 0;    transform: translate3d(-50%, -50%, 0) scale(0.1697); }
  7%   { opacity: 0.80; }
  22%  { opacity: 0.45; }
  35%  { opacity: 0; }
  100% { opacity: 0;    transform: translate3d(-50%, -50%, 0) scale(1); }
}

@keyframes pulseRingPrimary {
  0%   { opacity: 0;    transform: translate3d(-50%, -50%, 0) scale(0.1697); }
  7%   { opacity: 0.35; }
  14%  { opacity: 0.90; }
  24%  { opacity: 0.35; }
  30%  { opacity: 0.12; }
  38%  { opacity: 0; }
  100% { opacity: 0;    transform: translate3d(-50%, -50%, 0) scale(1); }
}

.main-card__chip,
.main-card__status-pill,
.main-card__footer-badge {
  display: inline-flex;
  align-items: center;
  z-index: 2;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #e7f2ff;
  font-size: 12px;
  backdrop-filter: blur(18px) saturate(120%);
  white-space: nowrap;
}

.main-card__hero {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  margin-top: -18px;
}

.main-card__pulse-zone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: var(--pulse-zone-min-height);
  overflow: visible;
}

.main-card__screen--setup .main-card__pulse-zone {
  transform: translateY(-35%);
}

.main-card__center {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--center-size);
  height: var(--center-size);
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
}

.main-card__center-svg {
  display: block;
  width: 62%;
  height: 62%;
  fill: #ffffff;
  opacity: 0.82;
  overflow: visible;
  shape-rendering: geometricPrecision;
  transform-origin: center;
  transform-box: fill-box;
}

.main-card__center-svg--setup {
  width: 68%;
  height: 68%;
}

.main-card__status-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  min-height: 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.main-card__status-copy {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  min-height: calc(23px * var(--ui-scale));
}

.main-card__status-date {
  display: inline-flex;
  align-items: center;
  margin-top: 0;
  height: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(22px * var(--ui-scale));
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(244, 248, 255, 0.96);
  line-height: 1;
}

.main-card__status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(25px * var(--ui-scale));
  padding: 0 calc(11px * var(--ui-scale));
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: calc(12px * var(--ui-scale));
  font-weight: 700;
  line-height: calc(25px * var(--ui-scale));
  white-space: nowrap;
  margin-left: auto;
  flex: 0 0 auto;
}

.summary-tile__label,
.main-card__footer-label {
  color: rgba(225, 235, 255, 0.54);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.main-card__status-pill--expired {
  border-color: rgba(255, 109, 109, 0.14);
  background: var(--danger-soft);
  color: var(--danger-text);
}

.main-card__status-pill--inactive {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(148, 163, 184, 0.12);
  color: rgba(226, 232, 240, 0.92);
}

.main-card__status-pill--active {
  border-color: rgba(134, 239, 172, 0.2);
  background: rgba(134, 239, 172, 0.1);
  color: rgba(134, 239, 172, 0.92);
}

.main-card__status-pill--loading {
  border-color: rgba(125, 211, 252, 0.2);
  background: rgba(125, 211, 252, 0.12);
  color: rgba(186, 230, 253, 0.94);
}

.main-card__footer-title,
.main-action__title {
  color: var(--text-primary);
}
.main-card__footer-title,
.main-action__title {
  font-weight: 600;
}

.main-card__actions {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.main-card__screen--setup .main-card__actions .main-action__content {
  display: grid;
  grid-template-columns: clamp(18px, calc(23px * var(--ui-scale)), 23px) minmax(0, 1fr) clamp(18px, calc(23px * var(--ui-scale)), 23px);
  align-items: center;
  justify-content: stretch;
  column-gap: clamp(10px, calc(12px * var(--ui-scale)), 14px);
  width: 100%;
  padding: 0 var(--action-content-pad-right) 0 var(--action-content-pad-left);
}

.main-card__screen--setup .main-card__actions .main-action__icon {
  position: relative;
  left: auto;
  top: auto;
  width: clamp(18px, calc(23px * var(--ui-scale)), 23px);
  height: clamp(18px, calc(23px * var(--ui-scale)), 23px);
  flex: 0 0 clamp(18px, calc(23px * var(--ui-scale)), 23px);
  transform: none;
}

.main-card__screen--setup .main-card__actions .main-action__title {
  grid-column: 2;
  min-width: 0;
  font-size: clamp(13px, calc(15px * var(--ui-scale)), 16px);
  line-height: 1.16;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.main-card__screen--home .main-card__actions .main-action__title {
  font-size: clamp(13px, calc(15px * var(--ui-scale)), 16px);
  line-height: 1.16;
}

.main-card__screen--setup .main-card__actions .main-action__balance {
  display: block;
  width: clamp(18px, calc(23px * var(--ui-scale)), 23px);
  height: clamp(18px, calc(23px * var(--ui-scale)), 23px);
  visibility: hidden;
}

/* ── Setup ring + steps overlay ──────────────────────────── */

/* Кольцо прогресса вокруг центрального объекта */
.setup-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--setup-ring-size);
  height: var(--setup-ring-size);
  transform: translate(-50%, -50%) rotate(-90deg);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.65, 0, 0.35, 1);
}
.is-steps .setup-ring {
  opacity: 1;
}
.setup-ring__track {
  fill: none;
  stroke: rgba(255,255,255,0.08);
  stroke-width: 3.5;
}
.setup-ring__fill {
  fill: none;
  stroke: rgba(147,197,253,0.85);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 471.2;
  stroke-dashoffset: 471.2;
  transition: stroke-dashoffset 600ms cubic-bezier(0.65, 0, 0.35, 1),
              opacity 400ms ease;
}

/* Нижние кнопки — absolute, не в flex-потоке, hero не двигается */
.setup-bottom-stack {
  position: absolute;
  bottom: 84px;
  left: 16px;
  right: 16px;
  margin: 0;
  will-change: opacity;
  transition: opacity 220ms ease 80ms;
}
.is-steps .setup-bottom-stack,
.is-device-picker .setup-bottom-stack,
.is-instruction-picker .setup-bottom-stack,
.is-full-instruction .setup-bottom-stack {
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

/* Контент шагов — базовое = скрыто/уходит (быстро) */
.setup-step-info {
  position: absolute;
  bottom: 84px;
  left: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  will-change: opacity, transform;
  transition: opacity 150ms ease, transform 170ms ease;
}
/* Активное = появляется (отложено, плавно) */
.is-steps .setup-step-info {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 260ms cubic-bezier(0.65, 0, 0.35, 1) 100ms,
              transform 300ms cubic-bezier(0.65, 0, 0.35, 1) 100ms;
}
/* Смена шага — ремаунт body-блока по key */
.setup-step-info__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: stepBodyEnter 320ms cubic-bezier(0.65, 0, 0.35, 1) both;
}
@keyframes stepBodyEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.setup-step-info__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.setup-step-info__count {
  font-size: 13px;
  font-weight: 600;
  color: rgba(147,197,253,0.8);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.setup-step-info__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-muted);
  cursor: pointer;
  margin-left: auto;
  z-index: 5;
}
.setup-step-info__close svg { width: 16px; height: 16px; }
.setup-step-info__title {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.setup-step-info__desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: -4px;
}
.setup-step-info__row {
  display: flex;
  justify-content: center;
  gap: 24px;
}
.steps-actions__link {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
}
.steps-actions__link:active { color: #ffffff; }

.steps-actions__link--qr {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ffffff;
  background: rgba(122, 167, 223, 0.22);
  border: 1px solid rgba(122, 167, 223, 0.35);
  border-radius: 12px;
  padding: 6px 14px 6px 11px;
  font-weight: 600;
}
.steps-actions__link--qr svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}
.steps-actions__link--qr:active {
  color: #ffffff;
  background: rgba(122, 167, 223, 0.35);
}

/* ── QR-код модалка ── */
.qr-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 10, 20, 0.62);
  backdrop-filter: blur(16px) saturate(120%);
  animation: qr-overlay-in 160ms ease both;
}

@keyframes qr-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.qr-sheet {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 20px 20px;
  border: 1px solid rgba(224, 237, 255, 0.12);
  border-radius: 26px;
  background: rgba(12, 26, 48, 0.97);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 64px rgba(0, 0, 0, 0.5);
  animation: qr-sheet-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes qr-sheet-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.qr-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.qr-sheet__title {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.qr-sheet__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--text-muted);
  cursor: pointer;
}

.qr-sheet__close svg {
  width: 16px;
  height: 16px;
}

.qr-sheet__code {
  width: 220px;
  height: 220px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(224, 237, 255, 0.08);
  padding: 12px;
  image-rendering: pixelated;
}

.qr-sheet__hint {
  color: rgba(224, 237, 255, 0.45);
  font-size: 13px;
  text-align: center;
  line-height: 1.4;
  max-width: 240px;
}

.qr-sheet__copy {
  width: 100%;
  margin-top: 4px;
}

/* ── Установка на другом устройстве ── */
.guide-screen {
  position: absolute;
  inset: 0;
  padding: 14px 14px 78px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  scrollbar-width: none;
  background: linear-gradient(170deg, rgba(10, 22, 41, 0.97) 0%, rgba(8, 16, 32, 0.99) 100%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(20px);
  transition: opacity 160ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.guide-screen::-webkit-scrollbar { display: none; }

.guide-screen--active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}



.guide-screen__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 12px 4px;
  gap: 8px;
}

.guide-screen__hero-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  border: 1px solid rgba(74, 222, 128, 0.22);
  background: rgba(74, 222, 128, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(134, 239, 172, 0.80);
  margin-bottom: 4px;
}
.guide-screen__hero-icon svg {
  width: 34px;
  height: 34px;
}

.guide-screen__title {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.guide-screen__subtitle {
  font-size: 13px;
  font-weight: 500;
  color: rgba(224, 237, 255, 0.50);
  line-height: 1.4;
  max-width: 280px;
}

.guide-screen__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 6px 0;
}

.guide-platform-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px 12px 20px;
  border-radius: 22px;
  border: 1px solid rgba(147, 197, 253, 0.10);
  background: rgba(224, 237, 255, 0.04);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.guide-platform-btn:active {
  background: rgba(224, 237, 255, 0.09);
  border-color: rgba(147, 197, 253, 0.22);
  transform: scale(0.96);
}

.guide-platform-btn__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Force uniform visual size for all SVGs */
  overflow: hidden;
}
.guide-platform-btn__icon svg {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.guide-platform-btn__name {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.guide-screen__grid .guide-platform-btn:nth-child(1) {
  animation: enterItem 500ms cubic-bezier(0.65, 0, 0.35, 1) both;
  animation-delay: 80ms;
}
.guide-screen__grid .guide-platform-btn:nth-child(2) {
  animation: enterItem 500ms cubic-bezier(0.65, 0, 0.35, 1) both;
  animation-delay: 140ms;
}
.guide-screen__grid .guide-platform-btn:nth-child(3) {
  animation: enterItem 500ms cubic-bezier(0.65, 0, 0.35, 1) both;
  animation-delay: 200ms;
}
.guide-screen__grid .guide-platform-btn:nth-child(4) {
  animation: enterItem 500ms cubic-bezier(0.65, 0, 0.35, 1) both;
  animation-delay: 260ms;
}

.guide-screen .support-card--key {
  padding: 12px 14px;
  border-radius: 20px;
}

.guide-screen .support-key__row {
  gap: 8px;
  align-items: center;
}

.guide-screen .support-key__text {
  gap: 3px;
}

.guide-screen .support-key__label {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(252, 254, 255, 0.62);
}

.guide-screen .support-key__val {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(248, 251, 255, 0.9);
  text-shadow: none;
}

.guide-screen .support-key__copy-btn,
.guide-screen .support-key__reissue {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.guide-screen .support-key__copy-btn svg,
.guide-screen .support-key__reissue-icon {
  width: 15px;
  height: 15px;
}

@media (max-width: 390px) {
  .guide-screen .support-card--key {
    padding: 11px 12px;
    border-radius: 18px;
  }

  .guide-screen .support-key__label {
    font-size: 9px;
  }

  .guide-screen .support-key__val {
    font-size: 10px;
  }
}

/* Пикер выбора устройства */
.setup-device-picker {
  position: absolute;
  bottom: 84px;
  left: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  will-change: opacity, transform;
  transition: opacity 150ms ease, transform 170ms ease;
}
.is-device-picker .setup-device-picker {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 260ms cubic-bezier(0.65, 0, 0.35, 1) 100ms,
              transform 300ms cubic-bezier(0.65, 0, 0.35, 1) 100ms;
}
.setup-device-picker__header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.setup-device-picker__title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(147,197,253,0.8);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.setup-device-picker__list,
.setup-device-picker__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.setup-device-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 120ms ease, border-color 120ms ease;
}
.setup-device-item:last-child { border-bottom: none; }
.setup-device-item:active { background: rgba(255,255,255,0.07); }
.setup-device-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex-shrink: 0;
}
.setup-device-item__icon svg { width: 22px; height: 22px; }
.setup-device-item__name {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.setup-device-item__chevron {
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,0.25);
  flex-shrink: 0;
}

/* ── Instruction type picker ──────────────────────────────── */
.setup-instruction-picker {
  position: absolute;
  bottom: 84px;
  left: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  will-change: opacity, transform;
  transition: opacity 150ms ease, transform 170ms ease;
}
.is-instruction-picker .setup-instruction-picker {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 260ms cubic-bezier(0.65, 0, 0.35, 1) 100ms,
              transform 300ms cubic-bezier(0.65, 0, 0.35, 1) 100ms;
}
.setup-instruction-picker__header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.setup-instruction-picker__device-badge {
  font-size: 13px;
  font-weight: 600;
  color: rgba(147,197,253,0.85);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* Кнопка «назад» со стрелкой */


.setup-instruction-picker__cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Карточка варианта инструкции */
.setup-instr-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 120ms ease, border-color 120ms ease;
}
.setup-instr-card:active {
  background: rgba(255,255,255,0.10);
}
.setup-instr-card--full {
  background: rgba(139,92,246,0.10);
  border-color: rgba(167,139,250,0.18);
}
.setup-instr-card--full:active {
  background: rgba(139,92,246,0.18);
}
.setup-instr-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(147,197,253,0.13);
  color: rgba(147,197,253,0.9);
  flex-shrink: 0;
}
.setup-instr-card__icon svg { width: 20px; height: 20px; }
.setup-instr-card__icon--globe {
  background: rgba(139,92,246,0.16);
  color: #c4b5fd;
}
.setup-instr-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.setup-instr-card__title {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.setup-instr-card__desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}
.setup-instr-card__badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 20px;
  background: rgba(147,197,253,0.13);
  color: rgba(147,197,253,0.85);
  flex-shrink: 0;
}
.setup-instr-card__badge--full {
  background: rgba(139,92,246,0.18);
  color: #c4b5fd;
}

/* ── Full instruction overlay ─────────────────────────────── */
.setup-full-instruction {
  position: absolute;
  bottom: 78px;
  left: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  will-change: opacity, transform;
  transition: opacity 150ms ease, transform 170ms ease;
}
.is-full-instruction .setup-full-instruction {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 260ms cubic-bezier(0.65, 0, 0.35, 1) 100ms,
              transform 300ms cubic-bezier(0.65, 0, 0.35, 1) 100ms;
}
.setup-full-instruction__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Карточка со ссылкой */
.setup-full-instruction__link-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
}
.setup-full-instruction__link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(139,92,246,0.14);
  color: #c4b5fd;
  flex-shrink: 0;
}
.setup-full-instruction__link-icon svg { width: 22px; height: 22px; }
.setup-full-instruction__link-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.setup-full-instruction__link-title {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.setup-full-instruction__link-url {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.setup-full-instruction__open-btn {
  font-size: 12px;
  font-weight: 600;
  color: rgba(147,197,253,0.5);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 7px 13px;
  cursor: not-allowed;
  flex-shrink: 0;
}
.setup-full-instruction__open-btn:not(:disabled) {
  color: rgba(147,197,253,0.9);
  border-color: rgba(147,197,253,0.25);
  cursor: pointer;
}

.subscription-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: 14px 14px 10px;
  overflow-x: clip;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.subscription-screen::-webkit-scrollbar {
  display: none;
}

.subscription-screen__header {
  padding: 2px 2px 0;
  min-width: 0;
}

.subscription-screen > .back-btn {
  margin-bottom: 10px;
}

.subscription-screen__eyebrow {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.92;
}

.subscription-screen__title {
  margin-top: 4px;
  max-width: 280px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.subscription-screen__subtitle {
  margin-top: 6px;
  max-width: 320px;
  color: rgba(224, 237, 255, 0.5);
  font-size: 13px;
  line-height: 1.42;
}

.subscription-screen__plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  width: 100%;
  min-width: 0;
  padding: 0;
}

.subscription-screen__plans .subscription-plan:first-child {
  grid-column: 1 / -1;
}

.subscription-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  width: 100%;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(224, 237, 255, 0.08);
  border-radius: 22px;
  background: rgba(224, 237, 255, 0.08);
  backdrop-filter: blur(22px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(3, 10, 20, 0.12);
  overflow: hidden;
  isolation: isolate;
  text-align: left;
  color: #f7faff;
  --plan-fill-x: 50%;
  --plan-fill-y: 50%;
  transition: border-color 260ms ease, background-color 260ms ease, transform 220ms ease, box-shadow 320ms ease;
}

.subscription-plan::before {
  content: '';
  position: absolute;
  left: var(--plan-fill-x);
  top: var(--plan-fill-y);
  width: 240%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(103, 163, 236, 0.26);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.02);
  transition: opacity 280ms ease, transform 620ms cubic-bezier(0.2, 0.9, 0.22, 1);
  pointer-events: none;
  z-index: 0;
}

.subscription-plan--active {
  border-color: rgba(188, 220, 255, 0.46);
  background: linear-gradient(180deg, rgba(186, 221, 255, 0.18), rgba(89, 141, 222, 0.16));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -16px 26px rgba(20, 64, 140, 0.18),
    0 14px 28px rgba(7, 23, 40, 0.22),
    0 0 0 1px rgba(147, 197, 253, 0.1);
  transform: translateY(-1px);
}

.subscription-plan--active::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.subscription-plan__ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-radius: 999px;
  background: rgba(125, 181, 246, 0.34);
  transform: translate(-50%, -50%) scale(0.01);
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
}

.subscription-plan > *:not(.subscription-plan__ripple) {
  position: relative;
  z-index: 2;
}

.subscription-plan__topline,
.subscription-plan__meta,
.subscription-sheet__devices-topline,
.subscription-sheet__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.subscription-sheet__devices-topline {
  align-items: center;
  gap: 10px;
}

.subscription-plan__topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  min-height: 30px;
  flex-wrap: nowrap;
}

.subscription-plan__name,
.subscription-sheet__section-title,
.subscription-sheet__summary-label {
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.subscription-plan__name {
  flex: 1 1 auto;
  align-self: start;
  line-height: 1.2;
}

.subscription-plan__badge,
.subscription-sheet__section-note {
  font-size: 11px;
  color: rgba(224, 237, 255, 0.72);
}

.subscription-plan__badge {
  flex: 0 0 auto;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid rgba(186, 224, 255, 0.18);
  border-radius: 999px;
  background: rgba(186, 224, 255, 0.08);
  align-self: start;
  text-align: right;
  line-height: 1.1;
  white-space: nowrap;
}

.subscription-plan__price,
.subscription-sheet__summary-price {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #ffffff;
}

.subscription-price {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.subscription-price__slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.64em;
  height: 1em;
  overflow: hidden;
  flex: 0 0 0.64em;
}

.subscription-price__slot--static {
  overflow: visible;
}

.subscription-price__digit {
  display: block;
  line-height: 1;
}

.subscription-price__slot--animated .subscription-price__digit {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  will-change: transform, opacity;
}

.subscription-price__slot--up .subscription-price__digit--previous {
  animation: price-digit-out-up 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.subscription-price__slot--up .subscription-price__digit--current {
  animation: price-digit-in-up 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.subscription-price__slot--down .subscription-price__digit--previous {
  animation: price-digit-out-down 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.subscription-price__slot--down .subscription-price__digit--current {
  animation: price-digit-in-down 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.subscription-price__currency {
  margin-left: 0.16em;
}

@keyframes price-digit-in-up {
  from {
    opacity: 0.2;
    transform: translateX(-50%) translateY(105%);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes price-digit-out-up {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  to {
    opacity: 0.16;
    transform: translateX(-50%) translateY(-105%);
  }
}

@keyframes price-digit-in-down {
  from {
    opacity: 0.2;
    transform: translateX(-50%) translateY(-105%);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes price-digit-out-down {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  to {
    opacity: 0.16;
    transform: translateX(-50%) translateY(105%);
  }
}

.subscription-plan__meta {
  color: rgba(224, 237, 255, 0.68);
  font-size: 11px;
  gap: 8px;
  align-items: flex-start;
  flex-wrap: nowrap;
}

.subscription-plan__meta span {
  min-width: 0;
}

.subscription-plan__meta span:empty {
  flex: 1 1 auto;
}

.subscription-plan__saving {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: rgba(224, 237, 255, 0.84);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.subscription-sheet__devices,
.subscription-sheet__summary {
  margin-top: 12px;
  width: 100%;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(224, 237, 255, 0.08);
  border-radius: 22px;
  background: rgba(224, 237, 255, 0.08);
  backdrop-filter: blur(22px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(3, 10, 20, 0.12);
}

.subscription-sheet__devices-topline,
.subscription-sheet__summary {
  flex-wrap: wrap;
}

.subscription-sheet__devices-topline > div:first-child,
.subscription-sheet__summary > div:first-child {
  min-width: 0;
  flex: 1 1 140px;
}

.subscription-sheet__devices-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1.5px solid rgba(96, 165, 250, 0.32);
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.1);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── Devices block ── */
.devices-block {
  margin-top: 14px;
  width: 100%;
  padding: 12px 14px 13px;
  border: 1px solid rgba(224, 237, 255, 0.06);
  border-radius: 20px;
  background: rgba(224, 237, 255, 0.05);
  backdrop-filter: blur(22px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 18px rgba(3, 10, 20, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Шапка: счётчик слева + текст справа */
.devices-block__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.devices-block__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.devices-block__label-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.85;
}

.devices-block__label-note {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 30px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(224, 237, 255, 0.74);
  line-height: 1.3;
}

.devices-block__label-note-text {
  min-width: 0;
}

.devices-block__label-discount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(186, 224, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(186, 224, 255, 0.12), rgba(96, 165, 250, 0.1)),
    rgba(224, 237, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 6px 14px rgba(7, 23, 40, 0.12);
  color: rgba(241, 248, 255, 0.96);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(12px) saturate(120%);
  animation: devices-discount-slide-in 280ms cubic-bezier(0.18, 0.9, 0.24, 1);
}

@keyframes devices-discount-slide-in {
  from {
    opacity: 0;
    transform: translateX(16px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Счётчик */
.devices-block__counter {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

@keyframes count-pop {
  from { transform: scale(0.65) translateY(6px); opacity: 0.15; filter: blur(4px); }
  to   { transform: scale(1)    translateY(0);   opacity: 1;    filter: blur(0);   }
}

.devices-block__counter-val {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(147, 197, 253, 0.26);
  background: rgba(147, 197, 253, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1;
  animation: count-pop 340ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.devices-block__counter-of {
  display: none;
}

/* ── Devices slider ── */

@property --pos {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.devices-slider {
  --t-h:   22px;
  --th-sz: 14px;           /* диаметр точки                      */
  --pad:    4px;           /* (--t-h - --th-sz) / 2 = (22-14)/2  */
  --pos:    0;
  position: relative;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  transition: --pos 400ms cubic-bezier(0.34, 1.35, 0.64, 1);
}

.devices-slider--dragging {
  transition: none;
}

.devices-slider__track {
  position: relative;
  height: var(--t-h);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 2px 8px  rgba(0, 0, 0, 0.28),
    inset 0 1px 0    rgba(255, 255, 255, 0.06),
    inset 0 -1px 0   rgba(0, 0, 0, 0.10);
}

.devices-slider__marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.devices-slider__mark {
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.02);
  transform: translate(-50%, -50%);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.devices-slider__mark--active {
  background: rgba(191, 223, 255, 0.82);
  border-color: rgba(191, 223, 255, 0.32);
  box-shadow: 0 0 0 4px rgba(147, 197, 253, 0.08);
  transform: translate(-50%, -50%) scale(1.04);
}

/*
  Заливка идёт до правого края точки и на финальном шаге добирает
  оставшийся внутренний отступ трека, чтобы конец визуально был полным.
*/
.devices-slider__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(
    var(--pad) +
    var(--pos) * (100% - var(--th-sz) - 2 * var(--pad)) +
    var(--th-sz) +
    (var(--pos) * var(--pad))
  );
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(96, 165, 250, 0.35) 0%,
    rgba(122, 167, 223, 0.50) 50%,
    rgba(147, 197, 253, 0.45) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 0 10px rgba(96, 165, 250, 0.15);
  pointer-events: none;
  z-index: 0;
}

/*
  Отступ --pad одинаковый со всех четырёх сторон:
  · top/bottom: translateY(-50%) + точка --th-sz → сверху и снизу ровно --pad
  · left/right: диапазон [--pad … 100% - --th-sz - --pad]
*/
.devices-slider__dot {
  position: absolute;
  top: 50%;
  left: calc(var(--pad) + var(--pos) * (100% - var(--th-sz) - 2 * var(--pad)));
  width:  var(--th-sz);
  height: var(--th-sz);
  transform: translateY(-50%) scale(1);
  border-radius: 50%;
  background: radial-gradient(
    circle at 36% 30%,
    #ffffff   0%,
    #e8f4ff  40%,
    #c0deff 100%
  );
  box-shadow:
    0 1px 5px   rgba(0, 0, 0, 0.32),
    0 0 0 1.5px rgba(255, 255, 255, 0.70),
    0 0 8px     rgba(96, 165, 250, 0.40);
  pointer-events: none;
  z-index: 1;
  transition:
    transform  340ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 260ms ease;
}

.devices-slider--dragging .devices-slider__dot {
  transform: translateY(-50%) scale(1.20);
  box-shadow:
    0 2px 10px  rgba(0, 0, 0, 0.28),
    0 0 0 1.5px rgba(255, 255, 255, 0.85),
    0 0 16px    rgba(96, 165, 250, 0.60);
}

@media (max-width: 390px) {
  .main-card {
    --home-dock-reserve: 74px;
    --home-panel-to-ack-gap: 8px;
    --home-ack-to-dock-gap: 5px;
    --home-ack-height: 48px;
    --home-panel-top-offset: 16px;
  }

  .main-card {
    gap: 8px;
    padding: 12px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .home-brand-panel {
    height: clamp(248px, calc((100vw - 24px) * 0.936), 338px);
    border-radius: 24px;
  }

  .home-brand-panel__logo-group {
    top: 22px;
    left: 22px;
    width: calc(100% - 44px);
  }

  .home-brand-panel__prompt {
    left: 14px;
    right: 14px;
    bottom: 14px;
    min-height: 48px;
    padding: 9px 9px 9px 12px;
    border-radius: 14px;
    gap: 10px;
  }

  .home-brand-panel__prompt-badge,
  .home-brand-panel__prompt-text {
    font-size: 11px;
  }

  .home-brand-panel__prompt-action {
    min-height: 30px;
    padding: 0 10px;
    font-size: 10px;
  }

  .home-brand-panel__prompt-action svg {
    width: 12px;
    height: 12px;
    flex-basis: 12px;
  }

  .home-brand-panel__separator {
    left: 14px;
    right: 14px;
    top: 82px;
    transform: translate3d(0, 24px, 0) scaleX(0.16);
  }

  .home-brand-panel__info {
    left: 14px;
    right: 14px;
    top: 96px;
    bottom: 18px;
    gap: 10px;
    transform: translate3d(0, 24px, 0);
  }

  .home-brand-panel__info-title {
    font-size: 16px;
  }

  .home-brand-panel__info-message {
    font-size: 12px;
  }

  .home-brand-panel--expanded .home-brand-panel__logo--enc {
    top: 0;
    left: -1%;
    width: 26.3%;
  }

  .home-brand-panel--expanded .home-brand-panel__logo--vpn {
    top: 8px;
    left: 13.9%;
    width: 10.7%;
  }

  .home-brand-panel--expanded .home-brand-panel__logo--brand {
    width: 36.5%;
    transform: translateX(-30%) translateY(-40%);
  }

  .home-brand-panel--expanded .home-brand-panel__separator {
    transform: translate3d(0, 0, 0) scaleX(1);
  }

  .home-brand-panel--expanded .home-brand-panel__info {
    transform: translate3d(0, 0, 0);
  }

  .home-brand-panel--expanded {
    height: calc(100dvh - var(--home-panel-bottom-clearance) - var(--home-panel-top-offset));
  }

  .home-brand-panel__info-status {
    font-size: 9px;
  }

  .home-brand-panel__ack-button {
    min-height: 48px;
  }

  .main-card__pulse-zone {
    min-height: var(--pulse-zone-min-height);
  }

  .main-card__center {
    width: var(--center-size);
    height: var(--center-size);
  }

  .main-card__status-block {
    min-height: 42px;
    padding: 0 8px 0 6px;
  }

  .main-card__status-date {
    font-size: 14px;
  }

  .main-card__status-subtitle {
    max-width: none;
    font-size: 12px;
  }

  .subscription-screen {
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .subscription-screen__subtitle {
    max-width: none;
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.3;
  }

  .subscription-screen__plans {
    gap: 8px;
    margin-top: 10px;
  }

  .subscription-plan,
  .subscription-sheet__devices,
  .subscription-sheet__summary {
    padding: 11px;
    border-radius: 18px;
  }

  .subscription-plan__price,
  .subscription-sheet__summary-price {
    font-size: 20px;
  }

  .subscription-sheet__devices-count {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .subscription-sheet__range-field {
    margin-top: 12px;
  }

  .devices-block {
    padding: 12px 12px 10px;
    border-radius: 18px;
  }

  .devices-block__head {
    gap: 10px;
  }

  .devices-block__counter-val {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }

  .devices-block__label-note {
    font-size: 11px;
  }

  .devices-block__row {
    margin-bottom: 12px;
  }
  .subscription-sheet__submit {
    min-height: 46px;
    border-radius: 16px;
  }

  .main-action {
    min-height: 52px;
    padding: 12px 12px 12px 10px;
    border-radius: 24px;
  }

  .main-action__title {
    font-size: 13px;
  }

  .main-action__icon {
    left: calc(12.5% - 7.25px);
  }

  .dock-nav {
    gap: 5px;
    min-height: 50px;
    border-radius: 22px;
  }

  .dock-nav__item {
    min-height: 42px;
    border-radius: 20px;
  }

  .dock-nav__icon,
  .dock-nav__icon svg {
    width: 17px;
    height: 17px;
  }
}

@media (max-width: 360px) {
  .main-card {
    padding: 10px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .main-card__pulse-zone {
    min-height: var(--pulse-zone-min-height);
  }

  .main-card__center {
    width: var(--center-size);
    height: var(--center-size);
  }

  .main-card__status-block {
    gap: 8px;
  }

  .main-card__status-date {
    font-size: 14px;
  }

  .main-action {
    min-height: 52px;
    padding: 12px 12px 12px 10px;
    border-radius: 24px;
  }

  .main-action__title {
    font-size: 13px;
  }

  .main-action__icon {
    left: calc(12.5% - 7.25px);
    width: 16px;
    height: 16px;
  }

  .subscription-screen {
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .subscription-screen__plans {
    grid-template-columns: 1fr;
  }

  .subscription-screen__plans .subscription-plan:first-child {
    grid-column: auto;
  }

  .subscription-plan__topline,
  .subscription-plan__meta,
  .subscription-sheet__devices-topline,
  .subscription-sheet__summary {
    gap: 8px;
  }

  .subscription-sheet__devices-topline > div:first-child,
  .subscription-sheet__summary > div:first-child {
    flex: 1 1 140px;
  }

  .subscription-sheet__devices,
  .subscription-sheet__summary {
    padding: 11px;
  }

  .devices-block {
    padding: 10px 10px 8px;
  }

  .devices-block__count-num {
    font-size: 27px;
  }
}

.subscription-sheet__range-field {
  /* Толщина трека и размер бегунка — единые источники правды */
  --t-h:  5px;   /* track height  */
  --th-sz: 22px; /* thumb size     */
  position: relative;
  margin-top: 14px;
  height: var(--th-sz);
}

/* Маркеры шагов — left/right = половина бегунка,
   чтобы 0% = позиция min, 100% = позиция max */
.subscription-sheet__range-dots {
  position: absolute;
  top: 50%;
  left:  calc(var(--th-sz) / 2);
  right: calc(var(--th-sz) / 2);
  height: var(--t-h);
  pointer-events: none;
  transform: translateY(-50%);
  z-index: 1;
}

.subscription-sheet__range-dot {
  position: absolute;
  top: 50%;
  width:  7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transform: translate(-50%, -50%);
  transition:
    background 200ms ease,
    transform  200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.subscription-sheet__range-dot:nth-child(1) { left:   0%; }
.subscription-sheet__range-dot:nth-child(2) { left:  20%; }
.subscription-sheet__range-dot:nth-child(3) { left:  40%; }
.subscription-sheet__range-dot:nth-child(4) { left:  60%; }
.subscription-sheet__range-dot:nth-child(5) { left:  80%; }
.subscription-sheet__range-dot:nth-child(6) { left: 100%; }

.subscription-sheet__range-dot--active {
  background: rgba(147, 197, 253, 0.9);
  transform: translate(-50%, -50%) scale(1.18);
}

/* Нативный input — занимает всю область, браузер рисует трек/бегунок */
.subscription-sheet__range {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  appearance: none;
  background: transparent;
  outline: none;
  overflow: visible;
  cursor: pointer;
  z-index: 2;
}

/* ── WebKit (iOS / Android Chrome) ── */
.subscription-sheet__range::-webkit-slider-runnable-track {
  width: 100%;
  height: var(--t-h);
  border-radius: 999px;
  background: linear-gradient(
    to right,
    rgba(96, 165, 250, 0.78) var(--slider-progress),
    rgba(255, 255, 255, 0.12) var(--slider-progress)
  );
}

.subscription-sheet__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width:  var(--th-sz);
  height: var(--th-sz);
  margin-top: calc((var(--t-h) - var(--th-sz)) / 2);
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 1px 6px rgba(0, 0, 0, 0.28),
    0 0 0 5px rgba(96, 165, 250, 0.22);
  cursor: pointer;
  transition: box-shadow 160ms ease;
}

.subscription-sheet__range:active::-webkit-slider-thumb {
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.32),
    0 0 0 7px rgba(96, 165, 250, 0.3);
}

/* ── Firefox ── */
.subscription-sheet__range::-moz-range-track {
  width: 100%;
  height: var(--t-h);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.subscription-sheet__range::-moz-range-progress {
  height: var(--t-h);
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.78);
}

.subscription-sheet__range::-moz-range-thumb {
  width:  var(--th-sz);
  height: var(--th-sz);
  border: none;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 1px 6px rgba(0, 0, 0, 0.28),
    0 0 0 5px rgba(96, 165, 250, 0.22);
  cursor: pointer;
}

.subscription-sheet__summary-label {
  color: rgba(224, 237, 255, 0.74);
  font-size: 12px;
}

.subscription-sheet__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--action-min-height);
  padding: 0 calc(20px * var(--ui-scale));
  border-radius: var(--action-radius);
  border: 1px solid rgba(182, 214, 248, 0.42);
  background: #6f98d1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -10px 18px rgba(23, 55, 108, 0.14),
    0 12px 24px rgba(7, 23, 40, 0.16),
    0 0 0 1px rgba(163, 202, 255, 0.06);
  color: #f2fbff;
  font-size: var(--action-title-size);
  font-weight: 700;
  white-space: normal;
  backdrop-filter: none;
}

.subscription-sheet__submit--priced {
  margin-top: 12px;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px 0 20px;
}

.subscription-sheet__submit-label {
  min-width: 0;
  text-align: left;
}

.subscription-sheet__submit-prices {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
}

.subscription-sheet__submit-price {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.subscription-sheet__submit-price-old {
  display: inline-flex;
  align-items: center;
  color: rgba(228, 238, 251, 0.65);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(228, 238, 251, 0.58);
  white-space: nowrap;
  transform: translateY(1px);
}

.subscription-sheet__submit-price .subscription-price {
  font-size: inherit;
}

.main-action {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  width: 100%;
  min-height: var(--action-min-height);
  padding: var(--action-pad-y) var(--action-pad-x-right) var(--action-pad-y) var(--action-pad-x-left);
  border: 1px solid var(--border-strong);
  border-radius: var(--action-radius);
  text-align: center;
  z-index: 1;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.main-action__content {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  padding: 0 var(--action-content-pad-right) 0 var(--action-content-pad-left);
}

.main-action__icon {
  display: inline-flex;
  position: absolute;
  left: var(--action-icon-offset);
  top: 50%;
  align-items: center;
  justify-content: center;
  width: var(--action-icon-size);
  height: var(--action-icon-size);
  flex: 0 0 var(--action-icon-size);
  margin-left: 0;
  line-height: 0;
  transform: translateY(-50%);
  z-index: 1;
}

.main-action__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Stroke-иконки (setup-экран, кнопки с fill="none") */
.main-action__icon svg[fill="none"] {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.main-action__icon--primary-logo svg {
  width: 100%;
  height: 100%;
}

/* Щит на primary-кнопке (светлый фон) — тёмный */
.main-action--primary .main-action__icon img {
  filter: brightness(0) !important;
}

/* Щит на secondary-кнопке (тёмный фон) — белый */
.main-action--secondary .main-action__icon img {
  filter: brightness(0) invert(1) !important;
}

.main-action__icon--plug svg {
  transform: translateY(0.5px);
}

.main-action__balance {
  display: none;
}

.main-action--primary {
  border-color: rgba(218, 238, 255, 0.56);
  background: #7aa7df;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 26px rgba(7, 23, 40, 0.26),
    0 0 0 1px rgba(186, 224, 255, 0.14);
}

.main-action__title {
  display: block;
  font-size: var(--action-title-size);
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}

.main-action--primary .main-action__title,
.main-action--primary {
  color: #fcfeff;
}

.main-action--primary .main-action__title {
  text-shadow: 0 1px 1px rgba(7, 23, 40, 0.22);
}

.main-action--primary .main-action__icon {
  color: #ffffff;
}

.main-action--primary .main-action__icon svg {
  filter: drop-shadow(0 1px 0 rgba(7, 23, 40, 0.12));
}

.main-action--secondary {
  border-color: rgba(186, 224, 255, 0.3);
  background: rgba(18, 36, 60, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(7, 23, 40, 0.16),
    0 0 0 1px rgba(147, 197, 253, 0.08);
}

.main-action:active {
  transform: translateY(1px);
}

.main-action--secondary .main-action__title,
.main-action--secondary {
  color: #eef6ff;
}

.dock-nav {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
  min-height: 60px;
  padding: 5px;
  border: 0;
  border-radius: 26px;
  background: rgba(224, 237, 255, 0.08);
  backdrop-filter: blur(22px) saturate(130%);
  box-shadow: none;
  overflow: hidden;
  flex-shrink: 0;
  touch-action: none;
  user-select: none;
}

.main-card--subscription-view .dock-nav {
  background: rgba(12, 23, 38, 0.82);
  backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.dock-nav__indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: calc((100% - 26px) / 4);
  left: 4px;
  transform: translateX(calc(var(--tab-index, 0) * (100% + 6px)));
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.main-card--subscription-view .dock-nav__indicator {
  opacity: 0.72;
}

.dock-nav__indicator::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(147, 197, 253, 0.18);
  border: 1px solid rgba(147, 197, 253, 0.36);
  border-radius: 20px;
}

.main-card--subscription-view .dock-nav__indicator::before {
  background: rgba(147, 197, 253, 0.1);
  border-color: rgba(147, 197, 253, 0.18);
}

.dock-nav__item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 50px;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 24px;
  color: var(--text-muted);
  text-align: center;
  transition: color 280ms ease;
}

.dock-nav__item:not(.dock-nav__item--active) .dock-nav__icon {
  opacity: 0.94;
}

.dock-nav__item--active {
  color: #f7faff;
}

.main-card--subscription-view .dock-nav__item {
  color: rgba(147, 197, 253, 0.72);
}

.main-card--subscription-view .dock-nav__item--active {
  color: rgba(247, 250, 255, 0.92);
}

.dock-nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  line-height: 1;
}

.dock-nav__icon svg {
  width: 25px;
  height: 25px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

@keyframes blobFloatOne {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1);        border-radius: 61% 39% 54% 46% / 31% 63% 37% 69%; }
  33%       { transform: translate3d(52px, 22px, 0) rotate(22deg) scale(1.14);  border-radius: 34% 66% 47% 53% / 62% 29% 71% 38%; }
  66%       { transform: translate3d(22px, 68px, 0) rotate(-18deg) scale(0.9); border-radius: 72% 28% 63% 37% / 43% 61% 39% 57%; }
}

@keyframes blobFloatTwo {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1);           border-radius: 33% 67% 59% 41% / 57% 38% 62% 43%; }
  35%       { transform: translate3d(-48px, 26px, 0) rotate(-20deg) scale(1.12); border-radius: 68% 32% 45% 55% / 31% 65% 35% 69%; }
  70%       { transform: translate3d(-14px, -28px, 0) rotate(18deg) scale(0.9);  border-radius: 41% 59% 71% 29% / 63% 27% 73% 37%; }
}

@keyframes blobFloatThree {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1);          border-radius: 69% 31% 43% 57% / 34% 61% 39% 66%; }
  30%       { transform: translate3d(-30px, -20px, 0) rotate(16deg) scale(1.1); border-radius: 28% 72% 61% 39% / 56% 28% 72% 44%; }
  68%       { transform: translate3d(34px, -36px, 0) rotate(-18deg) scale(0.86); border-radius: 62% 38% 33% 67% / 72% 34% 66% 28%; }
}

@keyframes blobFloatFour {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1);          border-radius: 58% 42% 68% 32% / 37% 55% 45% 63%; }
  40%       { transform: translate3d(38px, -18px, 0) rotate(14deg) scale(1.08); border-radius: 27% 73% 51% 49% / 64% 26% 74% 36%; }
  75%       { transform: translate3d(12px, 26px, 0) rotate(-16deg) scale(0.92); border-radius: 71% 29% 37% 63% / 42% 68% 32% 58%; }
}

@keyframes streamRotate {
  0% {
    transform: translateX(-50%) rotate(0deg) scale(0.92);
    opacity: 0.7;
  }

  50% {
    transform: translateX(-50%) rotate(180deg) scale(1.08);
    opacity: 1;
  }

  100% {
    transform: translateX(-50%) rotate(360deg) scale(0.92);
    opacity: 0.7;
  }
}

@keyframes blobFloatOneMobile {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  50% {
    transform: translate3d(24px, 18px, 0) rotate(8deg);
  }
}

@keyframes blobFloatTwoMobile {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  50% {
    transform: translate3d(-22px, 18px, 0) rotate(-7deg);
  }
}

@keyframes blobFloatThreeMobile {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  50% {
    transform: translate3d(18px, -18px, 0) rotate(-6deg);
  }
}

@keyframes blobFloatFourMobile {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  50% {
    transform: translate3d(18px, -10px, 0) rotate(5deg);
  }
}

@keyframes streamRotateMobile {
  0% {
    transform: translate3d(-50%, 0, 0) rotate(0deg) scale(0.97);
    opacity: 0.62;
  }

  50% {
    transform: translate3d(-50%, 0, 0) rotate(180deg) scale(1.01);
    opacity: 0.8;
  }

  100% {
    transform: translate3d(-50%, 0, 0) rotate(360deg) scale(0.97);
    opacity: 0.62;
  }
}

@media (hover: none) and (pointer: coarse) {
  .main-action,
  .subscription-plan,
  .dock-nav__item {
    transition-duration: 160ms;
  }

  .main-card__bottom-stack {
    gap: 10px;
    margin-bottom: 8px;
  }

  .main-action {
    min-height: 52px;
    padding: 12px 12px 12px 10px;
    border-radius: 24px;
  }

  .main-action__title {
    font-size: 13px;
    line-height: 1.05;
  }

  .main-action__icon {
    left: calc(12.5% - 7.25px);
    width: 16px;
    height: 16px;
  }

}

@media (hover: none) and (pointer: coarse) and (max-height: 760px) {
  .main-card__pulse-zone {
    min-height: var(--pulse-zone-min-height);
  }

  .main-card__center {
    width: var(--center-size);
    height: var(--center-size);
  }

  .main-card__bottom-stack {
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .main-card__pulse:nth-of-type(n + 2),
  .main-card-shell__glow--bottom {
    display: none;
  }
}

@media (max-width: 420px) {
  .canvas {
    padding: 0;
  }

  .main-card {
    padding: 12px;
  }

  .main-card__hero {
    padding-top: 0;
  }

  .main-card__pulse-zone {
    min-height: var(--pulse-zone-min-height);
  }

  .main-card__bottom-stack {
    gap: 10px;
    margin-bottom: 8px;
  }

  .main-card__title {
    font-size: 22px;
  }

  .main-card__status-block {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .main-card__status-pill {
    margin-left: auto;
  }

  .main-card__screen--subscription {
    inset: 0;
  }

  .subscription-screen {
    padding: 10px 12px 8px;
  }

  .subscription-screen__title {
    font-size: 21px;
  }

  .subscription-sheet__summary {
    align-items: stretch;
  }

  .main-action {
    min-height: 52px;
    padding: 12px 12px 12px 10px;
    border-radius: 24px;
  }

  .main-action__title {
    font-size: 13px;
  }

  .main-action__icon {
    left: calc(12.5% - 7.25px);
    width: 16px;
    height: 16px;
  }

}

/* Сохраняем единую геометрию интерфейса на узких и низких экранах:
   уменьшается весь кадр целиком, а не отдельные кнопки и блоки. */
@media (max-width: 420px), (max-height: 760px), (hover: none) and (pointer: coarse) {
  .main-card {
    gap: 10px;
    padding: 14px;
  }

  .home-brand-panel {
    height: clamp(202px, calc((430px - 28px) * 0.679), 278px);
    border-radius: 28px;
  }

  .main-card__pulse-zone {
    min-height: 164px;
  }

  .main-card__center {
    width: 141px;
    height: 141px;
  }

  .main-card__status-block {
    min-height: 40px;
    gap: 14px;
    padding: 0 14px;
  }

  .main-card__status-date {
    height: auto;
    font-size: 21px;
    line-height: 1;
  }

  .main-card__status-copy {
    min-height: 27px;
  }

  .main-card__status-pill {
    height: 29px;
    padding: 0 13px;
    font-size: 13px;
    line-height: 29px;
  }

  .main-action,
  .subscription-sheet__submit {
    min-height: 67px;
    border-radius: 24px;
  }

  .main-action {
    padding: 16px 16px 16px 14px;
  }

  .main-action__content {
    padding: 0 18px 0 26px;
  }

  .main-action__title {
    font-size: 16px;
    line-height: 1.2;
  }

  .main-action__icon {
    left: 18px;
    width: 23px;
    height: 23px;
  }

  .main-card__bottom-stack {
    gap: 10px;
    margin-bottom: 0;
  }

  .dock-nav {
    gap: 8px;
    min-height: 60px;
    border-radius: 26px;
  }

  .dock-nav__item {
    min-height: 50px;
    border-radius: 24px;
  }

  .dock-nav__icon,
  .dock-nav__icon svg {
    width: 25px;
    height: 25px;
  }
}

@media (max-height: 760px) {
  .main-card {
    gap: 10px;
    padding: 12px;
  }

  .main-card__pulse-zone {
    min-height: var(--pulse-zone-min-height);
    height: 100%;
  }

  .main-action {
    padding: 11px 12px;
  }

  .dock-nav__item {
    min-height: 42px;
  }
}

@media (max-height: 680px) {
  .main-card {
    --home-dock-reserve: 70px;
    --home-panel-to-ack-gap: 8px;
    --home-ack-to-dock-gap: 4px;
    --home-ack-height: 46px;
    --home-panel-top-offset: 16px;
  }

  .canvas {
    padding: 0;
  }

  .home-brand-panel {
    height: min(204px, clamp(248px, calc((100vw - 24px) * 0.936), 338px));
  }

  .home-brand-panel--expanded {
    height: calc(100dvh - var(--home-panel-bottom-clearance) - var(--home-panel-top-offset));
  }

  .home-brand-panel__ack-slot--visible {
    max-height: calc(var(--home-ack-height) + var(--home-panel-to-ack-gap));
  }

  .main-card {
    gap: 8px;
    padding: 10px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .main-card__bottom-stack {
    gap: 6px;
    margin-bottom: 4px;
  }

  .main-card__title {
    font-size: 20px;
  }

  .main-card__pulse-zone {
    min-height: var(--pulse-zone-min-height);
    height: 100%;
  }

  .main-card__center {
    width: var(--center-size);
    height: var(--center-size);
  }

  .main-card__status-date {
    height: auto;
    font-size: 18px;
    line-height: 1;
  }

  .main-card__status-copy {
    min-height: 28px;
  }

  .main-card__status-subtitle,
  .main-action__subtitle,
  .main-action__side {
    font-size: 11px;
  }

  .main-action__title {
    font-size: 13px;
  }

  .main-card__chip,
  .main-card__status-pill {
    min-height: 28px;
    font-size: 11px;
  }

  .dock-nav__item {
    min-height: 38px;
  }

  .subscription-plan__price,
  .subscription-sheet__summary-price {
    font-size: 19px;
  }

  .subscription-sheet__submit {
    min-height: 44px;
    padding: 0 16px;
  }

  .subscription-plan {
    padding: 10px;
  }

  .subscription-screen {
    padding-top: 6px;
  }

  .subscription-screen__subtitle {
    margin-top: 5px;
    font-size: 11px;
  }
}