:root {
  --bg: #eef3fb;
  --bg-accent: #dfe7f7;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-strong: rgba(255, 255, 255, 0.94);
  --text: #101725;
  --muted: #66718a;
  --line: rgba(24, 40, 76, 0.1);
  --primary: #1f6fff;
  --primary-dark: #184fc7;
  --secondary: #e9eef9;
  --support: #141c2b;
  --shadow: 0 24px 60px rgba(27, 48, 92, 0.12);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }

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

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes soft-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 106, 77, 0.22);
  }

  50% {
    box-shadow: 0 0 0 10px rgba(255, 106, 77, 0);
  }
}

@keyframes ambient-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(0, -10px, 0) scale(1.04);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  font-family: "Avenir Next", "SF Pro Display", "IBM Plex Sans", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.95), transparent 30%),
    radial-gradient(circle at bottom right, rgba(31, 111, 255, 0.16), transparent 28%),
    linear-gradient(145deg, var(--bg) 0%, var(--bg-accent) 100%);
}

.app-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 18px calc(40px + env(safe-area-inset-bottom, 0px));
}

.hidden {
  display: none !important;
}

.welcome-screen {
  display: grid;
  gap: 18px;
  min-height: calc(100vh - 64px);
  align-content: center;
  padding: 30px 24px 24px;
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.7) 0%, rgba(237, 245, 255, 0.64) 100%);
  box-shadow:
    0 24px 56px rgba(20, 42, 86, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  animation: fade-up 0.55s ease both;
}

.welcome-screen::before,
.welcome-screen::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  animation: ambient-drift 8.5s ease-in-out infinite;
}

.welcome-screen::before {
  width: 300px;
  height: 300px;
  top: -170px;
  right: -120px;
  background: radial-gradient(circle, rgba(31, 111, 255, 0.25) 0%, rgba(31, 111, 255, 0) 70%);
}

.welcome-screen::after {
  width: 250px;
  height: 250px;
  left: -110px;
  bottom: -130px;
  background: radial-gradient(circle, rgba(255, 160, 86, 0.22) 0%, rgba(255, 160, 86, 0) 74%);
  animation-duration: 10.5s;
  animation-direction: reverse;
}

.welcome-screen > * {
  position: relative;
  z-index: 1;
}

.welcome-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 9px 15px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(24, 79, 199, 0.14) 0%, rgba(31, 111, 255, 0.22) 100%);
  color: #123978;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(24, 79, 199, 0.18);
}

.welcome-title {
  margin: 0;
  max-width: 620px;
  font-size: clamp(38px, 8vw, 58px);
  line-height: 0.92;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.welcome-subtitle {
  margin: 0;
  max-width: 600px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.45;
}

.welcome-highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 560px;
}

.welcome-highlight-item {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(24, 40, 76, 0.09);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 20px rgba(20, 42, 86, 0.08);
}

.welcome-highlight-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.welcome-highlight-value {
  color: #0d1f3d;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.welcome-enter-button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 22px;
  font-size: 18px;
  font-weight: 800;
  border-radius: 18px;
  box-shadow:
    0 18px 36px rgba(24, 79, 199, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.welcome-enter-button::after {
  content: "->";
  font-size: 18px;
  line-height: 1;
  transition: transform 0.22s ease;
}

.welcome-enter-button:hover::after {
  transform: translateX(4px);
}

.welcome-email-button {
  width: 100%;
  max-width: none;
  border-radius: 16px;
  font-weight: 700;
  border: 1px solid transparent;
}

.welcome-email-register {
  color: #5a3200;
  background: linear-gradient(135deg, #ffd9a8 0%, #ffbe74 100%);
  border-color: rgba(193, 120, 34, 0.35);
  box-shadow: 0 14px 26px rgba(206, 133, 49, 0.24);
}

.welcome-email-login {
  color: #123978;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(220, 234, 255, 0.95) 100%);
  border-color: rgba(43, 93, 182, 0.26);
  box-shadow: 0 12px 24px rgba(42, 80, 148, 0.16);
}

.welcome-auth-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 560px;
}

.welcome-trial-button {
  width: 100%;
  max-width: 560px;
  padding: 15px 18px;
  border-radius: 16px;
  font-weight: 700;
  color: #123978;
  background: linear-gradient(135deg, rgba(232, 243, 255, 0.98) 0%, rgba(216, 230, 255, 0.98) 100%);
  border: 1px solid rgba(43, 93, 182, 0.24);
  box-shadow: 0 12px 24px rgba(42, 80, 148, 0.14);
}

.email-auth-screen {
  display: grid;
  gap: 16px;
  min-height: calc(100vh - 64px);
  align-content: center;
  animation: fade-up 0.4s ease both;
}

.email-auth-card {
  display: grid;
  gap: 12px;
}

.auth-input {
  width: 100%;
  border: 1px solid rgba(24, 40, 76, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  padding: 13px 14px;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.auth-input:focus {
  outline: 2px solid rgba(31, 111, 255, 0.22);
  border-color: rgba(31, 111, 255, 0.5);
}

.auth-code-input {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-action-button,
.auth-back-button {
  width: 100%;
}

.auth-status {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(24, 40, 76, 0.09);
  background: rgba(255, 255, 255, 0.9);
}

.auth-hint {
  margin-top: 2px;
}

.hero {
  padding: 14px 2px 22px;
  animation: fade-up 0.5s ease both;
}

.dashboard-hero {
  padding: 8px 2px 14px;
}

.dashboard-hero-shell {
  padding: 18px 18px 10px;
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.44) 100%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 20px 60px rgba(27, 48, 92, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  font-size: clamp(32px, 6vw, 46px);
  line-height: 0.96;
  letter-spacing: -0.04em;
}

.hero-copy {
  max-width: 560px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.hero-copy strong {
  color: var(--text);
}

.content {
  display: grid;
  gap: 16px;
}

.dashboard-content {
  gap: 18px;
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  padding: 20px;
  animation: fade-up 0.55s ease both;
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease,
    background 0.24s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 64px rgba(27, 48, 92, 0.16);
  border-color: rgba(24, 40, 76, 0.14);
}

.dashboard-balance-card,
.dashboard-actions-card,
.dashboard-soft-card {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 18px 50px rgba(27, 48, 92, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.content > .card:nth-child(1),
.welcome-screen > *:nth-child(1),
.payment-screen > *:nth-child(1) {
  animation-delay: 0.04s;
}

.content > .card:nth-child(2),
.welcome-screen > *:nth-child(2),
.payment-screen > *:nth-child(2) {
  animation-delay: 0.1s;
}

.content > .card:nth-child(3),
.welcome-screen > *:nth-child(3),
.payment-screen > *:nth-child(3) {
  animation-delay: 0.16s;
}

.content > .card:nth-child(4),
.welcome-screen > *:nth-child(4),
.payment-screen > *:nth-child(4) {
  animation-delay: 0.22s;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card-label {
  display: inline-block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card-label-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.label-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(31, 111, 255, 0.1);
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.profile-summary-card .profile-list {
  margin-top: 18px;
}

.profile-summary-card {
  padding: 18px 18px 20px;
}

.profile-summary-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.profile-summary-status {
  display: grid;
  gap: 10px;
}

.profile-summary-id {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-id-copy {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.profile-id-label {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.1;
}

.profile-id-value {
  font-size: clamp(18px, 4vw, 28px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.profile-avatar {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  color: rgba(24, 40, 76, 0.62);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  background:
    radial-gradient(circle at 50% 34%, rgba(113, 147, 205, 0.88) 0 20%, transparent 21%),
    radial-gradient(circle at 50% 82%, rgba(154, 177, 220, 0.95) 0 34%, transparent 35%),
    linear-gradient(180deg, rgba(227, 234, 248, 1) 0%, rgba(210, 221, 243, 1) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.profile-avatar.has-photo {
  background: #d6e2f5;
}

.profile-avatar-button {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
  border-radius: 999px;
  transition: transform 0.16s ease, filter 0.16s ease;
}

.profile-avatar-button:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
}

.profile-avatar-button:active {
  transform: translateY(0);
}

.profile-avatar-button:focus-visible {
  outline: 2px solid rgba(31, 111, 255, 0.52);
  outline-offset: 3px;
}

.profile-avatar-button.avatar-discovery-pulse {
  animation: profileAvatarHintPulse 1.2s ease-in-out 2;
}

.profile-avatar-hint {
  position: absolute;
  top: 72px;
  right: 0;
  z-index: 3;
  max-width: min(230px, 72vw);
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(16, 23, 37, 0.94);
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 10px 24px rgba(16, 23, 37, 0.22);
  pointer-events: none;
}

.profile-avatar-hint::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 18px;
  width: 12px;
  height: 12px;
  background: rgba(16, 23, 37, 0.94);
  transform: rotate(45deg);
}

.profile-avatar-menu {
  position: absolute;
  top: 84px;
  right: 0;
  z-index: 4;
  min-width: min(314px, calc(100vw - 34px));
  padding: 12px;
  border-radius: 26px;
  border: 1px solid rgba(162, 189, 233, 0.4);
  background:
    radial-gradient(135% 140% at 100% 0%, rgba(208, 230, 255, 0.62) 0%, transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 250, 255, 0.97) 100%);
  box-shadow:
    0 20px 46px rgba(35, 68, 117, 0.18),
    0 2px 8px rgba(35, 68, 117, 0.08);
  backdrop-filter: blur(6px) saturate(1.05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.985);
  transform-origin: top right;
  pointer-events: none;
  will-change: transform, opacity;
  transition:
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 320ms;
}

.profile-avatar-menu::before {
  content: none;
}

.profile-avatar-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s;
}

.profile-avatar-menu-item {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border: 1px solid rgba(173, 198, 237, 0.54);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 247, 255, 0.96) 100%);
  color: rgba(20, 38, 77, 0.96);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.profile-avatar-menu-item::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.55);
  opacity: 0.7;
  pointer-events: none;
}

.profile-avatar-menu-item:hover {
  transform: translateY(-1px);
  border-color: rgba(110, 160, 236, 0.58);
  box-shadow: 0 10px 20px rgba(53, 98, 169, 0.18);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99) 0%, rgba(230, 242, 255, 0.98) 100%);
}

.profile-avatar-menu-item:active {
  transform: translateY(0) scale(0.998);
}

.profile-avatar-menu-item:focus-visible {
  outline: 2px solid rgba(87, 146, 232, 0.7);
  outline-offset: 3px;
}

.profile-avatar-menu-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(68, 144, 255, 0.24) 0%, rgba(72, 158, 255, 0.16) 100%);
  color: rgba(24, 61, 122, 0.95);
  font-size: 18px;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 10px rgba(67, 127, 210, 0.16);
}

.profile-avatar-menu-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.profile-avatar-menu-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.profile-avatar-menu-subtitle {
  color: rgba(38, 72, 128, 0.74);
  font-size: 12px;
  line-height: 1.35;
}

.profile-summary-divider {
  height: 1px;
  margin: 18px -2px 14px;
  background: linear-gradient(90deg, rgba(24, 40, 76, 0.04) 0%, rgba(24, 40, 76, 0.1) 50%, rgba(24, 40, 76, 0.04) 100%);
}

.profile-balance-panel {
  padding: 4px 2px 2px;
}

.profile-balance-label {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.2;
}

.profile-balance-value {
  margin-top: 10px;
  font-size: clamp(40px, 10vw, 66px);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.06em;
}
/* One-shot flash applied via JS when a roulette prize hits the balance.
   Pulses gold + scales up briefly so the user sees the number changed
   even while looking at the chest screen. */
.profile-balance-value.balance-flash {
  animation: balance-flash 1.2s ease-out;
}
@keyframes balance-flash {
  0%   { transform: scale(1);    color: inherit; text-shadow: 0 0 0 rgba(240, 187, 60, 0); }
  20%  { transform: scale(1.12); color: #d99a1a; text-shadow: 0 0 18px rgba(240, 187, 60, 0.85); }
  60%  { transform: scale(1.05); color: #d99a1a; text-shadow: 0 0 10px rgba(240, 187, 60, 0.45); }
  100% { transform: scale(1);    color: inherit; text-shadow: 0 0 0 rgba(240, 187, 60, 0); }
}

.profile-days-wrap {
  margin-top: 18px;
}

.profile-days-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffbf82 0%, #f39a54 100%);
  color: #fff;
  font-size: clamp(22px, 5vw, 36px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  box-shadow: 0 10px 26px rgba(243, 154, 84, 0.26);
}

.profile-hidden-value {
  display: none;
}

.dashboard-main-panel {
  display: grid;
  gap: 18px;
  padding: 6px;
}

.dashboard-status-block {
  display: grid;
  gap: 10px;
}

.dashboard-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(24, 40, 76, 0.06);
}

.dashboard-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dashboard-identity-copy {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.dashboard-id-value {
  font-size: clamp(18px, 4vw, 28px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.dashboard-avatar {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%, rgba(113, 147, 205, 0.88) 0 20%, transparent 21%),
    radial-gradient(circle at 50% 82%, rgba(154, 177, 220, 0.95) 0 34%, transparent 35%),
    linear-gradient(180deg, rgba(227, 234, 248, 1) 0%, rgba(210, 221, 243, 1) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.dashboard-balance-panel {
  padding: 22px 20px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(24, 40, 76, 0.06);
}

.dashboard-balance-value {
  margin-top: 10px;
  font-size: clamp(42px, 10vw, 72px);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.06em;
}

.dashboard-days-wrap {
  margin-top: 16px;
}

.dashboard-days-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffbf82 0%, #f39a54 100%);
  color: #fff;
  font-size: clamp(22px, 5vw, 38px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  box-shadow: 0 10px 26px rgba(243, 154, 84, 0.26);
}

.dashboard-balance-copy {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.dashboard-status-note {
  margin: 0 0 0 8px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.2;
}

.vpn-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.vpn-status-active {
  color: #167a46;
  background: rgba(22, 122, 70, 0.1);
}

.vpn-status-inactive {
  color: #c63c4b;
  background: rgba(198, 60, 75, 0.1);
}

.vpn-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: vpnStatusPulse 1.4s ease-in-out infinite;
}

.vpn-status-active .vpn-status-dot {
  background: #22b35f;
}

.vpn-status-inactive .vpn-status-dot {
  background: #eb4a5b;
}

.profile-status-note {
  margin: 0 0 0 6px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.4;
}

.metric-label {
  color: var(--muted);
  font-size: 13px;
}

.metric-value {
  margin-top: 6px;
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.metric-card {
  padding: 16px 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(24, 40, 76, 0.06);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.metric-card-balance .metric-value {
  font-size: clamp(30px, 7vw, 44px);
}

.metric-card-days .metric-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffbf82 0%, #f39a54 100%);
  color: #fff;
  font-size: clamp(20px, 4vw, 26px);
  box-shadow: 0 10px 22px rgba(243, 154, 84, 0.24);
}

.profile-list {
  margin: 14px 0 0;
}

.profile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.profile-row:first-child {
  border-top: 0;
}

.profile-row dt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.profile-row dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 10px;
  background: rgba(31, 111, 255, 0.1);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
}

.tariff-inline {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.tariff-inline-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.tariff-inline-price {
  margin-top: 10px;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.tariff-inline-copy {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.profile-estimate-copy {
  margin: 16px 2px 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.option-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(24, 40, 76, 0.04);
  border: 1px solid rgba(24, 40, 76, 0.07);
}

.option-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.option-toggle-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.option-toggle-price {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.2;
}

.option-hint {
  margin-top: 10px;
}

.toggle-button {
  position: relative;
  flex-shrink: 0;
  width: 50px;
  height: 28px;
  border-radius: 999px;
  border: 0;
  background: rgba(24, 40, 76, 0.15);
  cursor: pointer;
  transition: background 0.22s ease;
  padding: 0;
}

.toggle-button[aria-pressed="true"] {
  background: #1b7f5e;
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform 0.22s ease;
}

.toggle-button[aria-pressed="true"] .toggle-thumb {
  transform: translateX(22px);
}

.topup-button {
  width: 100%;
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.dashboard-actions-card {
  display: grid;
  gap: 16px;
}

.dashboard-device-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 2px 2px;
}

.dashboard-row-copy {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
}

.dashboard-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(80, 150, 255, 0.2) 0%, rgba(53, 111, 227, 0.18) 100%);
}

.dashboard-row-value {
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.dashboard-info-card {
  padding: 18px 18px 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(24, 40, 76, 0.06);
}

.dashboard-info-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.dashboard-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-shortcut-button,
.dashboard-nav-button {
  border: 0;
  border-radius: 999px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  transition: transform 0.18s ease, background 0.18s ease;
}

.dashboard-shortcut-button:hover,
.dashboard-nav-button:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.88);
}

.dashboard-shortcut-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.dashboard-shortcut-icon,
.dashboard-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #77b5ff 0%, #4d8cff 100%);
  color: #fff;
  font-size: 14px;
  box-shadow: 0 8px 18px rgba(77, 140, 255, 0.22);
}

.dashboard-topup-button {
  width: 100%;
  margin-top: 2px;
  padding: 18px 20px;
  border-radius: 22px;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  box-shadow: 0 18px 36px rgba(31, 111, 255, 0.24);
}

.dashboard-topup-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary);
  font-size: 24px;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.dashboard-utility-card {
  padding: 14px 16px;
}

.dashboard-bottom-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dashboard-nav-danger {
  color: #d64a5c;
  background: rgba(255, 244, 246, 0.92);
}

.dashboard-hint {
  margin-top: 0;
}

.devices-card {
  display: grid;
  gap: 14px;
}

.devices-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.devices-add-button {
  padding: 12px 16px;
  white-space: nowrap;
  align-self: center;
}

.devices-title {
  margin: 10px 0 0;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.devices-summary {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.devices-summary strong {
  color: var(--text);
}

.devices-list {
  display: grid;
  gap: 12px;
  overflow: hidden;
}

.device-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 18px 16px;
  border-radius: 20px;
  border: 1px solid rgba(24, 40, 76, 0.08);
  background: rgba(255, 255, 255, 0.94);
  animation: fade-up 0.45s ease both;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.device-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(27, 48, 92, 0.1);
}

.device-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #2f8cff 0%, #1757d5 100%);
  color: #fff;
  font-size: 26px;
  font-weight: 700;
}

.device-meta {
  min-width: 0;
}

.device-name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
}

.device-type {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.device-side {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.device-date {
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}

.device-edit-button {
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(31, 111, 255, 0.1);
  color: var(--primary-dark);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.device-edit-input {
  width: 100%;
  border: 1px solid rgba(24, 40, 76, 0.12);
  border-radius: 14px;
  background: #fff;
  padding: 12px 14px;
  color: var(--text);
  font: inherit;
  /* 16px is the minimum that prevents iOS Safari from auto-zooming
     into the input on tap. Anything smaller and the layout shifts +
     the caret becomes hard to spot during the zoom transition. */
  font-size: 16px;
  caret-color: var(--primary);
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.device-edit-input:focus {
  border-color: rgba(31, 111, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(31, 111, 255, 0.14);
}

.device-empty {
  padding: 18px 16px;
  color: var(--muted);
  font-size: 15px;
  border-radius: 20px;
  border: 1px dashed rgba(24, 40, 76, 0.14);
  background: rgba(255, 255, 255, 0.72);
}

.action-stack {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 10px;
}

.primary-button,
.secondary-button,
.ghost-button,
.support-button,
.sos-button {
  border: 0;
  border-radius: var(--radius-md);
  font: inherit;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
  text-decoration: none;
  text-align: center;
}

.primary-button:hover,
.secondary-button:hover,
.ghost-button:hover,
.support-button:hover,
.sos-button:hover,
.amount-button:hover,
.trial-device-button:hover,
.method-button:hover,
.device-option-button:hover,
.protocol-option-button:hover,
.android-app-option-button:hover,
.store-download-button:hover,
.danger-button:hover {
  transform: translateY(-2px);
  filter: saturate(1.05);
}

.primary-button:active,
.secondary-button:active,
.ghost-button:active,
.support-button:active,
.sos-button:active {
  transform: translateY(1px) scale(0.995);
}

.primary-button {
  padding: 16px 18px;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.primary-button.disabled,
.secondary-button:disabled,
.primary-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.1);
  transform: none;
}

.secondary-button {
  padding: 14px 18px;
  color: var(--text);
  background: var(--secondary);
}

.support-button {
  padding: 14px 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--support) 0%, #2a3958 100%);
  font-weight: 700;
  box-shadow: 0 12px 24px rgba(20, 28, 43, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.sos-button {
  padding: 14px 18px;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, #ff6a4d 0%, #d83a2e 100%);
  box-shadow: 0 14px 28px rgba(216, 58, 46, 0.24);
  animation: pulse-glow 2.6s ease-in-out infinite;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ghost-button {
  padding: 10px 14px;
  color: var(--primary-dark);
  font-size: 14px;
  font-weight: 700;
  background: rgba(31, 143, 98, 0.08);
}

.hint {
  margin: 14px 2px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.sos-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: end center;
  padding: 18px;
  animation: fade-in 0.2s ease both;
}

.sos-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 23, 37, 0.36);
  backdrop-filter: blur(8px);
}

.sos-modal-sheet {
  position: relative;
  width: min(100%, 520px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
  padding: 20px;
  animation: fade-up 0.28s ease both;
}

.sos-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sos-modal-close {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.sos-modal-title {
  margin: 14px 0 0;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.sos-reason-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.sos-reason-button {
  width: 100%;
  padding: 15px 18px;
  font-weight: 700;
}

.code-block {
  margin: 16px 0 0;
  padding: 16px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(52, 38, 22, 0.18);
  background: rgba(255, 250, 242, 0.88);
  color: #2b241d;
  font-family: "SF Mono", "JetBrains Mono", "Menlo", monospace;
  font-size: 13px;
  line-height: 1.5;
}

.button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: currentColor;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.button-icon-light {
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary);
}

.button-icon-secondary {
  background: rgba(31, 111, 255, 0.1);
  color: var(--primary-dark);
}

.button-icon-alert {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.referral-copy {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

/* Secondary line under the referral card — clarifies WHEN the inviter
   bonus is credited (after invitee issues a key + uses VPN). Visually
   subordinate to the main "+50 ₽" message: smaller, lighter, italics. */
.referral-copy.referral-copy-secondary {
  margin-top: 6px;
  font-size: 13px;
  font-style: italic;
  opacity: 0.85;
}

.referral-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.stat-chip {
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: rgba(31, 111, 255, 0.08);
}

.stat-chip-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stat-chip strong {
  font-size: 22px;
}

.referral-button {
  width: 100%;
  margin-top: 12px;
}

/* Achievements MVP — Phase-1 owner-only test rollout.
   Two surfaces:
   1. .achievements-entry-card  — compact entry on profile screen (Open button).
   2. .achievements-fullscreen  — dedicated screen with the full grid.
   3. .ach-modal                — detail popup when a tile is tapped. */

.achievements-entry-card {
  display: grid;
  gap: 10px;
}
.achievements-entry-summary {
  margin: 0;
  font-size: 14px;
  color: #4d5b74;
}
.achievements-entry-summary strong {
  color: #10213a;
}
.achievements-open-button {
  width: 100%;
  background: linear-gradient(180deg, #f0bb3c 0%, #d99a1a 100%);
  color: #4a2f02;
}
.achievements-open-button .button-icon-light {
  background: rgba(74, 47, 2, 0.18);
  color: #4a2f02;
}

/* Full-screen achievements view — flipped on by setScreen('achievements'). */
.achievements-fullscreen {
  background: #f6f7fb;
  min-height: 100vh;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.achievements-fullscreen.hidden {
  display: none;
}
.achievements-screen-head {
  background: #fff;
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: 0 6px 18px rgba(16, 33, 58, 0.06);
}
.achievements-screen-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: #10213a;
}
.achievements-screen-subtitle {
  margin: 0;
  font-size: 14px;
  color: #4d5b74;
  line-height: 1.4;
}
.achievements-screen-subtitle strong {
  color: #10213a;
}
.achievements-full-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* Tile — used inside .achievements-full-grid. */
.achievement-tile {
  background: #fff;
  border: 1px solid rgba(45, 109, 246, 0.10);
  border-radius: 16px;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  min-height: 130px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 3px 10px rgba(16, 33, 58, 0.04);
}
.achievement-tile:active {
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(16, 33, 58, 0.06);
}
.achievement-tile.earned {
  background: linear-gradient(180deg, #fff5d6 0%, #fde8a3 100%);
  border-color: rgba(217, 168, 32, 0.45);
  box-shadow: 0 4px 14px rgba(217, 168, 32, 0.18);
}
.achievement-icon {
  font-size: 38px;
  line-height: 1;
  filter: grayscale(1);
  opacity: 0.4;
}
.achievement-tile.earned .achievement-icon {
  filter: none;
  opacity: 1;
}
.achievement-name {
  font-size: 12px;
  font-weight: 600;
  color: #10213a;
  line-height: 1.2;
}
.achievement-tile:not(.earned) .achievement-name {
  color: #6b7892;
}
.achievement-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(16, 33, 58, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.achievement-progress-bar-fill {
  height: 100%;
  background: #2d6df6;
  transition: width 0.3s ease;
}
.achievement-tile.earned .achievement-progress-bar {
  display: none;
}
.achievement-reward {
  font-size: 11px;
  color: #6b7892;
}
.achievement-tile.earned .achievement-reward {
  color: #8a5d0a;
  font-weight: 600;
}
/* Ticket reward chip — rendered for kind='tickets' achievements
   (e.g. veteran). Uses the chest's red accent so users immediately
   read it as "this gives you spins" rather than money. */
.achievement-reward-tickets {
  color: #b8410a;
}
.achievement-tile.earned .achievement-reward-tickets {
  color: #8a3208;
}

/* Detail modal — pops over the achievements screen. Shape mirrors sos-modal. */
.ach-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.ach-modal.hidden {
  display: none;
}
.ach-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 33, 58, 0.55);
  backdrop-filter: blur(2px);
}
.ach-modal-sheet {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 22px 22px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  box-shadow: 0 -10px 30px rgba(16, 33, 58, 0.18);
  animation: ach-modal-rise 0.22s ease;
}
@keyframes ach-modal-rise {
  from {
    transform: translateY(20px);
    opacity: 0.4;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.ach-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  margin-bottom: 4px;
}
.ach-modal-icon {
  font-size: 64px;
  line-height: 1;
  margin: 6px 0 4px;
  display: inline-block;
  transform-origin: center;
}

/* Animations for the icon ONLY when the modal is open.
   Earned achievements get a celebratory bounce-in then a slow glow-pulse.
   Locked achievements get a gentler bounce + idle wobble (less rewarding).
   Both kick off via the modal-open state, so revealing details always
   feels alive but the grid tiles themselves stay quiet. */
@keyframes ach-icon-bounce-in {
  0%   { transform: scale(0.3) rotate(-220deg); opacity: 0; }
  55%  { transform: scale(1.20) rotate(18deg);  opacity: 1; }
  75%  { transform: scale(0.92) rotate(-9deg); }
  90%  { transform: scale(1.04) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes ach-icon-glow {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 6px rgba(217, 168, 32, 0.5));
  }
  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 22px rgba(217, 168, 32, 0.9))
            drop-shadow(0 0 8px rgba(255, 220, 100, 0.6));
  }
}

@keyframes ach-icon-wobble {
  0%, 100% { transform: scale(1) rotate(0deg); }
  20%      { transform: scale(1.04) rotate(-4deg); }
  50%      { transform: scale(1) rotate(0deg); }
  80%      { transform: scale(1.04) rotate(4deg); }
}

.ach-modal:not(.hidden) .ach-modal-icon {
  animation:
    ach-icon-bounce-in 0.65s cubic-bezier(0.34, 1.6, 0.64, 1) both,
    ach-icon-wobble 3s 0.65s ease-in-out infinite;
}

.ach-modal.earned:not(.hidden) .ach-modal-icon {
  animation:
    ach-icon-bounce-in 0.65s cubic-bezier(0.34, 1.6, 0.64, 1) both,
    ach-icon-glow 2.4s 0.65s ease-in-out infinite;
}

/* Respect users who prefer no motion (iOS/Android system setting). */
@media (prefers-reduced-motion: reduce) {
  .ach-modal:not(.hidden) .ach-modal-icon,
  .ach-modal.earned:not(.hidden) .ach-modal-icon {
    animation: none;
  }
}
.ach-modal-name {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #10213a;
}
.ach-modal-description {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.4;
  color: #4d5b74;
}
.ach-modal-progress {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ach-modal-progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #4d5b74;
  font-weight: 600;
}
.ach-modal-progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(16, 33, 58, 0.08);
  border-radius: 4px;
  overflow: hidden;
}
.ach-modal-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #2d6df6 0%, #6c91f9 100%);
  transition: width 0.4s ease;
}
.ach-modal.earned .ach-modal-progress {
  display: none;
}
.ach-modal-reward {
  font-size: 18px;
  font-weight: 700;
  color: #2d6df6;
  margin-top: 6px;
}
.ach-modal.earned .ach-modal-reward {
  color: #8a5d0a;
}
.ach-modal-status {
  font-size: 13px;
  color: #6b7892;
  margin-bottom: 4px;
}
.ach-modal.earned .ach-modal-status {
  color: #2c8f3a;
  font-weight: 600;
}

/* CTA button inside the achievement-detail modal — currently used
   only for the subscribe_prossto achievement. Hidden by default;
   JS toggles .hidden based on the achievement code. */
.ach-modal-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  background: linear-gradient(180deg, #2aabee 0%, #1d83b8 100%);
  color: #fff;
  text-decoration: none;
  padding: 14px 16px;
  border-radius: 14px;
  font-weight: 600;
}
.ach-modal-action:active {
  transform: scale(0.98);
}
.ach-modal-action .button-icon-light {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.ach-modal-action.hidden {
  display: none;
}

.history-card {
  display: grid;
  gap: 16px;
}

.history-list {
  display: grid;
  gap: 10px;
  max-height: min(48vh, 440px);
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(24, 40, 76, 0.18) transparent;
}

.history-list::-webkit-scrollbar {
  width: 6px;
}

.history-list::-webkit-scrollbar-track {
  background: transparent;
}

.history-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(24, 40, 76, 0.18);
}

.history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(24, 40, 76, 0.08);
  background: rgba(255, 255, 255, 0.94);
}

.history-main {
  min-width: 0;
}

.history-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.history-details {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.history-side {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 96px;
}

.history-date {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.history-amount {
  color: var(--primary-dark);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.history-amount-negative {
  color: #d64a5c;
}

@keyframes vpnStatusPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.12);
    opacity: 0.72;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes profileAvatarHintPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(31, 111, 255, 0);
  }
  45% {
    box-shadow: 0 0 0 10px rgba(31, 111, 255, 0.18);
  }
}

.device-settings-hero {
  padding-top: 18px;
}

.device-settings-card {
  display: grid;
  gap: 14px;
}

.device-settings-input {
  margin-top: 4px;
}

.device-settings-copy {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.danger-card {
  display: grid;
  gap: 14px;
  border-color: rgba(234, 74, 91, 0.16);
  background: rgba(255, 247, 248, 0.92);
}

.danger-label {
  color: #d64a5c;
}

.danger-copy {
  margin: 0;
  color: #7c4a53;
  font-size: 15px;
  line-height: 1.55;
}

.danger-button {
  border: 0;
  border-radius: var(--radius-md);
  padding: 16px 18px;
  background: linear-gradient(135deg, #ff7c8c 0%, #eb4e62 100%);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.payment-screen {
  display: grid;
  gap: 18px;
  animation: fade-up 0.5s ease both;
}

.payment-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.inline-back-button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}

.topbar-balance {
  display: grid;
  justify-items: end;
  color: var(--muted);
  font-size: 14px;
}

.topbar-balance strong {
  color: var(--text);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.payment-header {
  text-align: center;
}

.payment-header h1 {
  margin: 0;
  font-size: clamp(30px, 6vw, 42px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.payment-header p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 16px;
}

.subscription-gate-card {
  padding: 24px 20px;
}

.subscription-gate-copy {
  margin: 0;
  color: #2f3f58;
  font-size: 16px;
  line-height: 1.62;
}

.topup-card {
  padding: 26px 20px;
}

.topup-amount {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.topup-amount strong {
  font-size: clamp(44px, 12vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.topup-amount span {
  color: var(--muted);
  font-size: 18px;
}

.amount-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.amount-button {
  border: 1px solid rgba(31, 111, 255, 0.15);
  border-radius: 16px;
  padding: 15px 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.amount-button.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  box-shadow: 0 14px 24px rgba(31, 111, 255, 0.2);
}

.amount-button:active,
.method-button:active {
  transform: translateY(1px) scale(0.995);
}

.payment-note {
  margin: 2px auto 0;
  max-width: 560px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}

.payment-next-button {
  width: 100%;
  padding: 18px 20px;
  font-size: 18px;
}

.methods-card {
  display: grid;
  gap: 16px;
}

.device-category {
  display: grid;
  gap: 14px;
}

.device-category + .device-category {
  padding-top: 18px;
  border-top: 1px solid rgba(24, 40, 76, 0.08);
}

.device-category-head {
  display: grid;
  gap: 6px;
}

.device-category-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.device-category-copy {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.device-category-options {
  display: grid;
  gap: 16px;
}

.method-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.method-label {
  color: var(--muted);
  font-size: 15px;
}

.method-summary strong {
  font-size: 28px;
  letter-spacing: -0.04em;
}

.method-button {
  width: 100%;
  border: 1px solid rgba(31, 111, 255, 0.16);
  border-radius: 18px;
  padding: 18px 16px;
  background: linear-gradient(135deg, rgba(31, 111, 255, 0.08) 0%, rgba(31, 111, 255, 0.18) 100%);
  color: var(--text);
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.method-button-active {
  border-color: rgba(31, 111, 255, 0.2);
}

.device-option-button,
.android-app-option-button {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title check"
    "copy check";
  gap: 4px 14px;
  border: 1px solid rgba(31, 111, 255, 0.14);
  border-radius: 20px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.protocol-options {
  display: grid;
  gap: 12px;
}

.protocol-option-button {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title check"
    "copy check";
  gap: 4px 14px;
  border: 1px solid rgba(31, 111, 255, 0.14);
  border-radius: 20px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.protocol-option-button.active {
  border-color: rgba(31, 111, 255, 0.28);
  background: linear-gradient(135deg, rgba(31, 111, 255, 0.08) 0%, rgba(31, 111, 255, 0.16) 100%);
  box-shadow: inset 0 0 0 1px rgba(31, 111, 255, 0.06);
}

.protocol-option-title {
  grid-area: title;
  font-size: 18px;
  font-weight: 700;
}

.protocol-option-copy {
  grid-area: copy;
  color: var(--muted);
  font-size: 14px;
}

.protocol-option-check {
  grid-area: check;
  align-self: center;
  justify-self: center;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(31, 111, 255, 0.1);
  color: transparent;
  font-size: 16px;
  font-weight: 800;
}

.protocol-option-button.active .protocol-option-check {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
}

.protocol-hint {
  margin: 2px 0 0;
}

.protocol-kicker {
  margin: 2px 0 0;
  color: rgba(24, 40, 76, 0.72);
}

.device-option-button.active,
.android-app-option-button.active {
  border-color: rgba(31, 111, 255, 0.28);
  background: linear-gradient(135deg, rgba(31, 111, 255, 0.08) 0%, rgba(31, 111, 255, 0.16) 100%);
  box-shadow: inset 0 0 0 1px rgba(31, 111, 255, 0.06);
}

.device-option-title {
  grid-area: title;
  font-size: 22px;
  font-weight: 700;
}

.device-option-copy {
  grid-area: copy;
  color: var(--muted);
  font-size: 15px;
}

.device-option-note {
  grid-column: 1 / 2;
  color: rgba(24, 40, 76, 0.68);
  font-size: 13px;
  line-height: 1.4;
}

.device-option-check {
  grid-area: check;
  align-self: center;
  justify-self: center;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(31, 111, 255, 0.1);
  color: transparent;
  font-size: 18px;
  font-weight: 800;
}

.device-option-button.active .device-option-check,
.android-app-option-button.active .device-option-check {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
}

.android-app-options {
  display: grid;
  gap: 12px;
}

.android-app-note {
  margin-top: 0;
  text-align: left;
}

.method-note {
  margin-top: 0;
}

.trial-device-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.trial-device-button {
  border: 1px solid rgba(31, 111, 255, 0.14);
  border-radius: 14px;
  padding: 14px 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.trial-device-button.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  box-shadow: 0 12px 22px rgba(31, 111, 255, 0.2);
}

.trial-status {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(24, 40, 76, 0.09);
  background: rgba(255, 255, 255, 0.9);
}

.device-install-hero {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;
  padding-top: 10px;
}

.device-install-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(31, 111, 255, 0.1);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: soft-float 3.2s ease-in-out infinite;
}

.device-install-kicker {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 16px;
}

.device-install-hero h1 {
  margin: 0;
  font-size: clamp(34px, 8vw, 50px);
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.device-install-copy {
  max-width: 520px;
  margin: 4px 0 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.45;
}

.device-step-label {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.25;
  text-align: center;
}

.device-install-card {
  display: grid;
  gap: 16px;
}

.store-app-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.95);
}

.store-app-meta {
  display: grid;
  gap: 6px;
}

.store-app-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.store-app-subtitle {
  color: var(--muted);
  font-size: 18px;
}

.store-download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 124px;
  padding: 14px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(31, 111, 255, 0.1) 0%, rgba(31, 111, 255, 0.18) 100%);
  color: var(--primary);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

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

.device-install-note {
  margin-top: 0;
}

.device-link-card {
  display: grid;
  gap: 16px;
}

.instruction-row {
  padding: 18px;
  border-radius: 18px;
  background: rgba(31, 111, 255, 0.08);
}

.instruction-title {
  font-size: 20px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .app-shell {
    padding: calc(18px + env(safe-area-inset-top, 0px)) 14px calc(28px + env(safe-area-inset-bottom, 0px));
  }

  .welcome-screen {
    min-height: calc(100vh - 46px);
    align-content: start;
    padding: 18px 14px 14px;
    border-radius: 30px;
  }

  .welcome-highlights,
  .welcome-auth-actions {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .card {
    padding: 18px;
    border-radius: 24px;
  }

  .status-grid {
    grid-template-columns: 1fr;
  }

  .referral-stats {
    grid-template-columns: 1fr;
  }

  .amount-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .action-row {
    grid-template-columns: 1fr;
  }

  .store-app-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .store-download-button {
    width: 100%;
  }

  .profile-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-row dd {
    text-align: left;
  }
}

@media (max-width: 720px) {
  .hero {
    padding: 6px 2px 18px;
  }

  .hero-copy,
  .welcome-subtitle {
    font-size: 15px;
  }

  .devices-card-head {
    flex-direction: column;
    align-items: stretch;
  }

  .devices-add-button {
    width: 100%;
  }

  .dashboard-topline {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-identity {
    justify-content: space-between;
  }

  .dashboard-identity-copy {
    justify-items: start;
  }

  .dashboard-shortcuts,
  .dashboard-bottom-nav {
    grid-template-columns: 1fr;
  }

  .history-item {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .history-side {
    width: 100%;
    min-width: 0;
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
  }

  .device-item {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .device-side {
    grid-column: 2;
    justify-items: start;
    grid-auto-flow: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .topbar-balance strong {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .app-shell {
    padding-left: 12px;
    padding-right: 12px;
  }

  .welcome-screen {
    gap: 14px;
    min-height: auto;
    padding: 14px 12px 12px;
    border-radius: 24px;
  }

  .welcome-title {
    font-size: clamp(32px, 11vw, 44px);
  }

  .welcome-highlight-value {
    font-size: 15px;
  }

  .hero h1,
  .payment-header h1,
  .device-install-hero h1 {
    font-size: clamp(28px, 11vw, 38px);
  }

  .dashboard-hero-shell,
  .card {
    border-radius: 28px;
  }

  .dashboard-balance-panel {
    padding: 18px 16px;
  }

  .dashboard-balance-value {
    font-size: clamp(38px, 14vw, 54px);
  }

  .dashboard-days-pill {
    font-size: 18px;
    padding: 9px 14px;
  }

  .dashboard-row-copy {
    font-size: 16px;
  }

  .metric-value {
    font-size: 28px;
  }

  .devices-title {
    font-size: 22px;
  }

  .devices-summary,
  .referral-copy,
  .tariff-inline-copy,
  .hint,
  .payment-note,
  .device-settings-copy,
  .danger-copy {
    font-size: 14px;
  }

  .device-item {
    padding: 14px;
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .device-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 22px;
  }

  .device-name {
    font-size: 15px;
  }

  .device-type,
  .device-date {
    font-size: 13px;
  }

  .device-edit-button,
  .primary-button,
  .secondary-button,
  .support-button,
  .sos-button,
  .danger-button {
    width: 100%;
  }

  .payment-topbar {
    align-items: flex-start;
  }

  .inline-back-button {
    font-size: 16px;
  }

.code-block {
    font-size: 12px;
    padding: 14px;
  }
}

/* =====================================================================
   ROULETTE / Колесо удачи
   ---------------------------------------------------------------------
   1. .roulette-entry-card  — compact card on profile (between balance
      card and "Управление"). Hidden by default; revealed when
      /api/roulette/state returns 200 (owner-only test rollout).
   2. .roulette-fullscreen  — dedicated screen with the wheel itself.
   3. .roulette-modal       — result popup after a spin lands.
   ===================================================================== */

.roulette-entry-card {
  display: grid;
  gap: 10px;
}
.roulette-entry-summary {
  margin: 0;
  font-size: 14px;
  color: #4d5b74;
}
.roulette-entry-summary strong {
  color: #10213a;
}
.roulette-entry-hint {
  margin: 0;
  font-size: 13px;
  color: #6b7891;
}
.roulette-open-button {
  width: 100%;
  background: linear-gradient(180deg, #ff7a5c 0%, #e84a3d 100%);
  color: #fff;
}
.roulette-open-button .button-icon-light {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* Full-screen roulette view */
.roulette-fullscreen {
  background: #f6f7fb;
  min-height: 100vh;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.roulette-fullscreen.hidden {
  display: none;
}
.roulette-screen-head {
  background: #fff;
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: 0 6px 18px rgba(16, 33, 58, 0.06);
}
.roulette-screen-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: #10213a;
}
.roulette-screen-subtitle {
  margin: 0;
  font-size: 14px;
  color: #4d5b74;
}

/* Chest stage — replaces the earlier wheel iteration. Wheel UX didn't
   scale past 8 prizes (label collisions on the segments); chest is
   open-ended: server picks the prize, client just plays the open animation
   and reveals the prize via the result modal. The catalog grid below the
   chest tells users what's possible without crowding the chest itself.

   Animation timeline (~2.7s total):
   0.0–0.6s:  Anticipation — chest grows, glow brightens, sparkles dance
   0.6–1.2s:  Shake — frantic wobble building tension
   1.2–1.4s:  Flash bang — full-screen white flash overlay
   1.4–2.4s:  Burst — chest opens, rays spin, particles fly out (12 coins/stars)
   2.4–2.7s:  Settle — chest floats above the platform, glowing softly */
.roulette-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 28px 8px 18px;
  min-height: 260px;
  perspective: 800px;
}
.chest {
  position: relative;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 14px 22px rgba(16, 33, 58, 0.25));
  transform-style: preserve-3d;
}

/* Soft elliptical shadow under the chest — anchors it to the platform. */
.chest-shadow {
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 130px;
  height: 18px;
  margin-left: -65px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 70%);
  z-index: 0;
  animation: chest-shadow-bob 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes chest-shadow-bob {
  0%, 100% { transform: scaleX(1)    scaleY(1);   opacity: 0.9; }
  50%      { transform: scaleX(0.85) scaleY(0.7); opacity: 0.55; }
}

/* The chest itself — bobs up and down idle, with subtle Y-axis tilt to
   give a sense of depth. Animation is upgraded mid-spin via .opening. */
.chest-emoji {
  font-size: 150px;
  line-height: 1;
  position: relative;
  z-index: 3;
  animation: chest-bob 3.2s ease-in-out infinite;
  transform-origin: 50% 80%;
  filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.18));
}
@keyframes chest-bob {
  0%, 100% { transform: translateY(0)    rotate(-1.5deg); }
  50%      { transform: translateY(-8px) rotate(1.5deg); }
}

/* Glow halo behind chest — pulses softly while idle. Two-stop radial
   gradient with a warm gold core fading to transparent. */
.chest-glow {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 230, 140, 0.7) 0%,
    rgba(240, 187, 60, 0.35) 35%,
    rgba(240, 187, 60, 0) 70%);
  z-index: 1;
  animation: chest-glow-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes chest-glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1);    }
  50%      { opacity: 0.9;  transform: scale(1.1);  }
}

/* Full-stage flash overlay — white sheet that pulses at "lid open"
   moment for the cinematic flashbang effect. */
.chest-flash {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 240, 0.85) 30%,
    rgba(255, 255, 240, 0) 70%);
  opacity: 0;
  z-index: 4;
  pointer-events: none;
}

/* Light-rays burst from behind the chest at open time. Hidden until
   .chest.opening is set. Pure CSS conic gradient for the rays — looks
   like sun-rays radiating outward from the chest center. */
.chest-rays {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 220, 120, 0) 0deg,
    rgba(255, 220, 120, 0.85) 8deg,
    rgba(255, 220, 120, 0) 16deg,
    rgba(255, 220, 120, 0) 30deg,
    rgba(255, 220, 120, 0.85) 38deg,
    rgba(255, 220, 120, 0) 46deg,
    rgba(255, 220, 120, 0) 60deg,
    rgba(255, 220, 120, 0.85) 68deg,
    rgba(255, 220, 120, 0) 76deg,
    rgba(255, 220, 120, 0) 90deg,
    rgba(255, 220, 120, 0.85) 98deg,
    rgba(255, 220, 120, 0) 106deg,
    rgba(255, 220, 120, 0) 120deg,
    rgba(255, 220, 120, 0.85) 128deg,
    rgba(255, 220, 120, 0) 136deg,
    rgba(255, 220, 120, 0) 150deg,
    rgba(255, 220, 120, 0.85) 158deg,
    rgba(255, 220, 120, 0) 166deg,
    rgba(255, 220, 120, 0) 180deg,
    rgba(255, 220, 120, 0.85) 188deg,
    rgba(255, 220, 120, 0) 196deg,
    rgba(255, 220, 120, 0) 210deg,
    rgba(255, 220, 120, 0.85) 218deg,
    rgba(255, 220, 120, 0) 226deg,
    rgba(255, 220, 120, 0) 240deg,
    rgba(255, 220, 120, 0.85) 248deg,
    rgba(255, 220, 120, 0) 256deg,
    rgba(255, 220, 120, 0) 270deg,
    rgba(255, 220, 120, 0.85) 278deg,
    rgba(255, 220, 120, 0) 286deg,
    rgba(255, 220, 120, 0) 300deg,
    rgba(255, 220, 120, 0.85) 308deg,
    rgba(255, 220, 120, 0) 316deg,
    rgba(255, 220, 120, 0) 330deg,
    rgba(255, 220, 120, 0.85) 338deg,
    rgba(255, 220, 120, 0) 346deg,
    rgba(255, 220, 120, 0) 360deg
  );
  opacity: 0;
  transform: scale(0.6) rotate(0deg);
  z-index: 1;
  pointer-events: none;
  mask: radial-gradient(circle, black 30%, transparent 75%);
  -webkit-mask: radial-gradient(circle, black 30%, transparent 75%);
}

/* Idle decorative sparkles — gold stars floating around the chest.
   Different element from the burst particles below. */
.chest-sparkle {
  position: absolute;
  font-size: 22px;
  color: #f0bb3c;
  text-shadow: 0 0 8px rgba(240, 187, 60, 0.7);
  z-index: 3;
  pointer-events: none;
  opacity: 0.85;
  animation: chest-sparkle-twinkle 2.6s ease-in-out infinite;
}
.chest-sparkle.s1 { top: 6%;  left: 10%; animation-delay: 0s;   }
.chest-sparkle.s2 { top: 18%; right: 6%; animation-delay: 0.6s; font-size: 18px; }
.chest-sparkle.s3 { bottom: 14%; left: 4%; animation-delay: 1.2s; font-size: 24px; }
.chest-sparkle.s4 { bottom: 22%; right: 12%; animation-delay: 1.8s; font-size: 16px; }
@keyframes chest-sparkle-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.7) rotate(0); }
  50%      { opacity: 1;   transform: scale(1.2) rotate(20deg); }
}

/* Burst particles — coins and stars that fly out from chest center on
   open. Each particle has a custom direction (--p-x, --p-y) defined
   inline. Hidden until .chest.opening; then animated outward. */
.chest-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -14px 0 0 -14px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  text-shadow: 0 0 6px rgba(255, 220, 120, 0.8);
  transform: translate(0, 0) scale(0);
}
/* Direction vectors for each particle (in px). Layout: 12 particles
   spread roughly around the upper hemisphere, biased upward. */
.chest-particle.p1  { --p-x: -130px; --p-y: -90px;  --p-rot: -360deg; }
.chest-particle.p2  { --p-x:  -90px; --p-y: -140px; --p-rot:  300deg; }
.chest-particle.p3  { --p-x:  -40px; --p-y: -160px; --p-rot: -240deg; font-size: 20px; }
.chest-particle.p4  { --p-x:   30px; --p-y: -170px; --p-rot:  450deg; font-size: 26px; }
.chest-particle.p5  { --p-x:   90px; --p-y: -140px; --p-rot: -300deg; }
.chest-particle.p6  { --p-x:  140px; --p-y:  -80px; --p-rot:  360deg; font-size: 22px; }
.chest-particle.p7  { --p-x:  150px; --p-y:    0px; --p-rot: -180deg; }
.chest-particle.p8  { --p-x: -150px; --p-y:    0px; --p-rot:  240deg; font-size: 20px; }
.chest-particle.p9  { --p-x:    0px; --p-y: -180px; --p-rot:  540deg; font-size: 28px; }
.chest-particle.p10 { --p-x:  -70px; --p-y:  -50px; --p-rot: -360deg; font-size: 18px; }
.chest-particle.p11 { --p-x:   70px; --p-y:  -50px; --p-rot:  360deg; font-size: 18px; }
.chest-particle.p12 { --p-x:    0px; --p-y: -100px; --p-rot: -540deg; font-size: 22px; }

/* "opening" state — triggered by JS via classList.add('opening').
   Sequence (total ~2.7s):
   - 0–0.6s:    Anticipation (chest-anticipate replaces chest-bob)
   - 0.6–1.2s:  Frantic shake (chest-shake)
   - 1.2–1.4s:  Flash bang (chest-flash-bang on .chest-flash)
   - 1.4–2.4s:  Burst (chest opens + rays + particles)
   - 2.4–2.7s:  Settle (chest hovers in opened position) */
.chest.opening .chest-emoji {
  animation:
    chest-anticipate 0.6s ease-out forwards,
    chest-shake 0.6s 0.6s ease-in-out forwards,
    chest-burst 1.3s 1.2s cubic-bezier(0.17, 0.67, 0.4, 1.5) forwards;
}
@keyframes chest-anticipate {
  0%   { transform: translateY(0)   scale(1)    rotate(0); filter: brightness(1); }
  60%  { transform: translateY(-4px) scale(1.05) rotate(0); filter: brightness(1.1); }
  100% { transform: translateY(-2px) scale(1.08) rotate(0); filter: brightness(1.2); }
}
@keyframes chest-shake {
  0%, 100% { transform: translateY(-2px) scale(1.08) rotate(0); }
  10%      { transform: translateY(-4px) scale(1.10) rotate(-7deg); }
  25%      { transform: translateY(-2px) scale(1.08) rotate(8deg); }
  40%      { transform: translateY(-4px) scale(1.12) rotate(-10deg); }
  55%      { transform: translateY(-3px) scale(1.10) rotate(9deg); }
  70%      { transform: translateY(-4px) scale(1.13) rotate(-8deg); }
  85%      { transform: translateY(-2px) scale(1.10) rotate(6deg); }
}
@keyframes chest-burst {
  0%   { transform: translateY(-2px) scale(1.08) rotate(0);    filter: brightness(1.2); }
  15%  { transform: translateY(-25px) scale(1.42) rotate(-3deg); filter: brightness(1.6); }
  35%  { transform: translateY(-50px) scale(1.5)  rotate(4deg);  filter: brightness(1.8); }
  60%  { transform: translateY(-35px) scale(1.32) rotate(-2deg); filter: brightness(1.4); }
  100% { transform: translateY(-22px) scale(1.22) rotate(0);    filter: brightness(1.2); }
}

/* Glow intensifies during anticipation, then flashes massively at burst,
   then settles to a steady warm halo. */
.chest.opening .chest-glow {
  animation:
    chest-glow-build 0.6s ease-out forwards,
    chest-glow-flash 1.3s 1.2s ease-out forwards;
}
@keyframes chest-glow-build {
  0%   { opacity: 0.55; transform: scale(1);    }
  100% { opacity: 1;    transform: scale(1.25); }
}
@keyframes chest-glow-flash {
  0%   { opacity: 1;    transform: scale(1.25); }
  20%  { opacity: 1;    transform: scale(1.7);  }
  60%  { opacity: 0.85; transform: scale(1.4);  }
  100% { opacity: 0.7;  transform: scale(1.2);  }
}

/* Flashbang overlay — pulses bright white at the lid-open moment. */
.chest.opening .chest-flash {
  animation: chest-flash-bang 0.5s 1.2s ease-out forwards;
}
@keyframes chest-flash-bang {
  0%   { opacity: 0;    transform: scale(0.4); }
  20%  { opacity: 0.95; transform: scale(1.4); }
  60%  { opacity: 0.5;  transform: scale(1.6); }
  100% { opacity: 0;    transform: scale(1.8); }
}

/* Rays appear during anticipation, expand & spin during burst. */
.chest.opening .chest-rays {
  animation:
    chest-rays-build 0.6s ease-out forwards,
    chest-rays-burst 1.3s 1.2s ease-out forwards,
    chest-rays-rotate 2.5s 0.6s linear forwards;
}
@keyframes chest-rays-build {
  0%   { opacity: 0;   transform: scale(0.6) rotate(0deg); }
  100% { opacity: 0.5; transform: scale(0.95) rotate(0deg); }
}
@keyframes chest-rays-burst {
  0%   { opacity: 0.5; transform: scale(0.95); }
  30%  { opacity: 1;   transform: scale(1.3);  }
  100% { opacity: 0.7; transform: scale(1.1);  }
}
@keyframes chest-rays-rotate {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(180deg); }
}

/* Idle sparkles fade out during anticipation (replaced by burst particles). */
.chest.opening .chest-sparkle {
  animation: chest-sparkle-out 0.6s ease-out forwards;
}
@keyframes chest-sparkle-out {
  to { opacity: 0; transform: scale(2) translate(0, -10px); }
}

/* Burst particles fly out at the moment the lid pops open (1.2s offset
   to align with chest-burst start). Spin while flying for extra flair.
   Fade out at the end of their flight. */
.chest.opening .chest-particle {
  animation: chest-particle-fly 1.5s 1.2s cubic-bezier(0.2, 0.6, 0.4, 1.0) forwards;
}
@keyframes chest-particle-fly {
  0%   {
    opacity: 0;
    transform: translate(0, 0) scale(0) rotate(0);
  }
  15%  {
    opacity: 1;
    transform: translate(calc(var(--p-x) * 0.18), calc(var(--p-y) * 0.18)) scale(0.8) rotate(calc(var(--p-rot) * 0.15));
  }
  60%  {
    opacity: 1;
    transform: translate(calc(var(--p-x) * 0.95), calc(var(--p-y) * 0.95 + 20px)) scale(1) rotate(calc(var(--p-rot) * 0.7));
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--p-x) * 1.1), calc(var(--p-y) * 1.1 + 100px)) scale(0.6) rotate(var(--p-rot));
  }
}

/* Stagger particle launch slightly so they don't all leave at once. */
.chest.opening .chest-particle.p1  { animation-delay: 1.20s; }
.chest.opening .chest-particle.p2  { animation-delay: 1.22s; }
.chest.opening .chest-particle.p3  { animation-delay: 1.18s; }
.chest.opening .chest-particle.p4  { animation-delay: 1.20s; }
.chest.opening .chest-particle.p5  { animation-delay: 1.24s; }
.chest.opening .chest-particle.p6  { animation-delay: 1.18s; }
.chest.opening .chest-particle.p7  { animation-delay: 1.26s; }
.chest.opening .chest-particle.p8  { animation-delay: 1.22s; }
.chest.opening .chest-particle.p9  { animation-delay: 1.16s; }
.chest.opening .chest-particle.p10 { animation-delay: 1.28s; }
.chest.opening .chest-particle.p11 { animation-delay: 1.30s; }
.chest.opening .chest-particle.p12 { animation-delay: 1.14s; }

/* Pending promo banner — shown on chest screen + topup screen when the
   user has an unredeemed promo discount waiting. Subtle gradient, gift
   icon, two-line text. Hides via .hidden. */
.roulette-promo-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #ffe5c2 0%, #f3c889 100%);
  border: 1px solid rgba(255, 122, 58, 0.45);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(255, 122, 58, 0.18);
}
.roulette-promo-banner.hidden {
  display: none;
}
.roulette-promo-icon {
  font-size: 32px;
  line-height: 1;
}
.roulette-promo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.roulette-promo-text strong {
  font-size: 15px;
  color: #4a1d00;
}
.roulette-promo-text span {
  font-size: 13px;
  color: #6b3d10;
}

/* Catalog grid — renders the prize list under the chest so users see
   what's possible. Three columns on phones; auto-fits. */
.roulette-catalog-card {
  display: grid;
  gap: 10px;
}
.roulette-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
}
.roulette-catalog-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  background: linear-gradient(180deg, #fff7e6 0%, #fcefcf 100%);
  border: 1px solid rgba(240, 187, 60, 0.6);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.roulette-catalog-tile:active {
  transform: scale(0.96);
  box-shadow: inset 0 0 0 2px rgba(240, 187, 60, 0.5);
}
.roulette-catalog-tile .catalog-icon {
  font-size: 26px;
  line-height: 1;
}
.roulette-catalog-tile .catalog-value {
  font-size: 14px;
  font-weight: 700;
  color: #5a3d05;
}
.roulette-catalog-tile.rare {
  background: linear-gradient(180deg, #f3e1ff 0%, #e1c4fb 100%);
  border-color: rgba(122, 61, 240, 0.45);
}
.roulette-catalog-tile.rare .catalog-value {
  color: #4a1f86;
}
.roulette-catalog-tile.jackpot {
  background: linear-gradient(180deg, #ffe5c2 0%, #ffb060 100%);
  border-color: #ff7a3a;
  animation: catalog-jackpot-pulse 2s ease-in-out infinite;
}
.roulette-catalog-tile.jackpot .catalog-value {
  color: #4a1d00;
}
@keyframes catalog-jackpot-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 122, 58, 0.6); }
  50%      { box-shadow: 0 0 12px rgba(255, 122, 58, 0.6); }
}

.roulette-spin-button {
  width: 100%;
  background: linear-gradient(180deg, #ff7a5c 0%, #e84a3d 100%);
  color: #fff;
  font-size: 17px;
  padding: 16px;
}
.roulette-spin-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.roulette-spin-button .button-icon-light {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.roulette-hint {
  text-align: center;
  margin: 0;
}

.roulette-history-card {
  display: grid;
  gap: 10px;
}
.roulette-history-list {
  display: grid;
  gap: 8px;
}
.roulette-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #f6f7fb;
  border-radius: 12px;
  font-size: 14px;
}
.roulette-history-row .roulette-history-prize {
  font-weight: 600;
  color: #10213a;
}
.roulette-history-row .roulette-history-when {
  color: #6b7891;
  font-size: 12px;
}

/* Result modal */
.roulette-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.roulette-modal.hidden {
  display: none;
}
.roulette-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 28, 0.55);
}
.roulette-modal-sheet {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 22px 18px 26px;
  box-shadow: 0 -10px 40px rgba(8, 14, 28, 0.35);
  text-align: center;
  animation: roulette-modal-rise 0.28s ease;
}
@keyframes roulette-modal-rise {
  from { transform: translateY(100%); opacity: 0.5; }
  to   { transform: translateY(0);    opacity: 1; }
}
.roulette-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.roulette-modal-icon {
  font-size: 64px;
  line-height: 1;
  margin: 4px 0 12px;
  animation: roulette-prize-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1.0);
}
@keyframes roulette-prize-pop {
  0%   { transform: scale(0.2) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(8deg);  opacity: 1; }
  100% { transform: scale(1)    rotate(0);     opacity: 1; }
}
.roulette-modal-name {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 800;
  color: #10213a;
  letter-spacing: -0.5px;
}
.roulette-modal-description {
  margin: 0 0 16px;
  font-size: 14px;
  color: #4d5b74;
}
.roulette-modal-stats {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}
.roulette-spin-again-button {
  width: 100%;
  background: linear-gradient(180deg, #ff7a5c 0%, #e84a3d 100%);
  color: #fff;
}

/* Jackpot pulse for the 1000₽ win. */
.roulette-modal.jackpot .roulette-modal-icon {
  animation: roulette-jackpot-pulse 1.2s ease infinite;
}
@keyframes roulette-jackpot-pulse {
  0%, 100% { transform: scale(1)   rotate(0); }
  50%      { transform: scale(1.18) rotate(-4deg); }
}

/* Prize-detail modal — same chrome as the result modal but the icon
   uses a softer entry (no jackpot pulse), and the description has
   more vertical space because there are no stat-chips below it. */
.prize-detail-modal .prize-detail-icon {
  animation: prize-detail-pop 0.32s ease;
  margin: 6px 0 14px;
}
.prize-detail-modal.jackpot .prize-detail-icon {
  /* Override the result-modal jackpot pulse — the detail view should
     stay calm; users are reading, not celebrating. */
  animation: prize-detail-pop 0.32s ease;
}
@keyframes prize-detail-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
.prize-detail-description {
  margin: 0 0 6px;
  font-size: 15px;
  color: #4d5b74;
  line-height: 1.45;
}
/* Tier label gets a tinted chip background so the user sees at a
   glance whether they're looking at a regular / rare / jackpot prize. */
.prize-detail-modal .roulette-modal-head .card-label {
  background: rgba(240, 187, 60, 0.18);
  color: #876b25;
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.prize-detail-modal.tier-rare .roulette-modal-head .card-label {
  background: rgba(122, 61, 240, 0.18);
  color: #5a2bb0;
}
.prize-detail-modal.tier-jackpot .roulette-modal-head .card-label {
  background: rgba(255, 122, 58, 0.22);
  color: #b8410a;
}

@media (prefers-reduced-motion: reduce) {
  .chest-emoji,
  .chest-glow,
  .chest-sparkle,
  .chest-shadow,
  .chest.opening .chest-emoji,
  .chest.opening .chest-rays,
  .chest.opening .chest-glow,
  .chest.opening .chest-sparkle,
  .chest.opening .chest-flash,
  .chest.opening .chest-particle,
  .roulette-modal-sheet,
  .roulette-modal-icon,
  .roulette-modal.jackpot .roulette-modal-icon,
  .roulette-catalog-tile.jackpot {
    animation: none;
  }
  .chest.opening .chest-emoji {
    transform: scale(1.2);
    filter: brightness(1.3);
  }
  .chest.opening .chest-rays,
  .chest.opening .chest-glow {
    opacity: 0.8;
  }
}

/* =====================================================================
   REFERRAL TREE / Древо приглашений
   ---------------------------------------------------------------------
   Vertical tree of milestone nodes with a connecting trunk. Each node
   has three visual states:
     locked   — gray, dimmed; threshold not yet reached
     active   — pulsing accent border; this is the next milestone
     claimed  — green check; reward already granted
   The trunk uses ::before pseudo-elements on each node so it adapts to
   variable node heights without absolute positioning.
   ===================================================================== */

.referral-tree-button {
  width: 100%;
  margin-top: 10px;
  background: linear-gradient(180deg, #5dbb6a 0%, #2c8f3a 100%);
  color: #fff;
}
.referral-tree-button .button-icon-light {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.referral-tree-button.hidden {
  display: none;
}

.referral-tree-fullscreen {
  background: linear-gradient(180deg, #f3faf4 0%, #e9f5ec 100%);
  min-height: 100vh;
  padding: 16px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.referral-tree-fullscreen.hidden {
  display: none;
}
.referral-tree-head {
  background: #fff;
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: 0 6px 18px rgba(16, 33, 58, 0.06);
}
.referral-tree-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: #10213a;
}
.referral-tree-subtitle {
  margin: 0 0 8px;
  font-size: 14px;
  color: #4d5b74;
}
.referral-tree-progress-summary {
  margin: 0;
  font-size: 13px;
  color: #2c8f3a;
  font-weight: 600;
}

/* Tree container — vertical column of nodes. Trunk is drawn by the
   ::before of each node, fixed-x at the icon's center. */
.referral-tree-nodes {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 8px 0 8px 0;
}

/* One milestone tile (node). Layout: icon-circle on the left, content
   on the right. Tappable for detail modal. */
.referral-tree-node {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 14px;
  background: #fff;
  border-radius: 18px;
  padding: 14px 16px 14px 14px;
  box-shadow: 0 4px 12px rgba(16, 33, 58, 0.06);
  border: 1.5px solid rgba(16, 33, 58, 0.06);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}
.referral-tree-node:active {
  transform: scale(0.985);
}

/* Trunk segment — drawn between this node and the next via ::after.
   Hidden on the last node. */
.referral-tree-node::after {
  content: "";
  position: absolute;
  left: 47px; /* center of the 60px icon column */
  top: 100%;
  height: 18px;
  width: 4px;
  background: linear-gradient(180deg, rgba(45, 143, 58, 0.45) 0%, rgba(45, 143, 58, 0.15) 100%);
  border-radius: 2px;
  z-index: 0;
}
.referral-tree-node:last-child::after {
  display: none;
}

/* Locked state — most muted. */
.referral-tree-node.locked {
  background: #fafbfc;
  border-color: rgba(16, 33, 58, 0.05);
  opacity: 0.85;
}
.referral-tree-node.locked .tree-node-icon {
  background: #e6e9ef;
  color: #95a0b3;
}

/* Active state — the next milestone, pulses subtly. */
.referral-tree-node.active {
  border-color: rgba(45, 143, 58, 0.55);
  box-shadow: 0 6px 18px rgba(45, 143, 58, 0.18),
              0 0 0 3px rgba(45, 143, 58, 0.08);
  animation: tree-node-pulse 2.4s ease-in-out infinite;
}
@keyframes tree-node-pulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(45, 143, 58, 0.18),
                         0 0 0 3px rgba(45, 143, 58, 0.06); }
  50%      { box-shadow: 0 8px 22px rgba(45, 143, 58, 0.28),
                         0 0 0 5px rgba(45, 143, 58, 0.14); }
}
.referral-tree-node.active .tree-node-icon {
  background: linear-gradient(180deg, #f0bb3c 0%, #d99a1a 100%);
  color: #4a2f02;
}

/* Claimed state — green accent + check. */
.referral-tree-node.claimed {
  border-color: rgba(45, 143, 58, 0.45);
  background: linear-gradient(180deg, #ffffff 0%, #f4faf5 100%);
}
.referral-tree-node.claimed .tree-node-icon {
  background: linear-gradient(180deg, #5dbb6a 0%, #2c8f3a 100%);
  color: #fff;
}
.referral-tree-node.claimed::after {
  background: linear-gradient(180deg, rgba(45, 143, 58, 0.85) 0%, rgba(45, 143, 58, 0.55) 100%);
}

.tree-node-icon {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  background: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6),
              0 2px 6px rgba(16, 33, 58, 0.12);
  z-index: 1;
}
.tree-node-icon .tree-node-check {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2c8f3a;
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

.tree-node-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tree-node-title {
  font-size: 15px;
  font-weight: 700;
  color: #10213a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tree-node-threshold {
  font-size: 11px;
  font-weight: 600;
  color: #6b7891;
  background: rgba(16, 33, 58, 0.06);
  padding: 2px 7px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tree-node-reward {
  font-size: 13px;
  font-weight: 600;
  color: #2c8f3a;
  margin: 0;
}
.referral-tree-node.locked .tree-node-reward {
  color: #95a0b3;
}
.tree-node-progress {
  margin-top: 4px;
  height: 6px;
  background: #eef1f5;
  border-radius: 3px;
  overflow: hidden;
}
.tree-node-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #5dbb6a 0%, #2c8f3a 100%);
  border-radius: 3px;
  transition: width 0.6s ease;
}
.tree-node-progress-text {
  font-size: 11px;
  color: #6b7891;
  margin-top: 2px;
}
.referral-tree-node.claimed .tree-node-progress-fill {
  background: linear-gradient(90deg, #2c8f3a 0%, #1f6a29 100%);
}

@media (prefers-reduced-motion: reduce) {
  .referral-tree-node.active {
    animation: none;
  }
  .tree-node-progress-fill {
    transition: none;
  }
}

/* =====================================================================
   BETA TEST BADGE
   ---------------------------------------------------------------------
   Used on the three test-rollout features (achievements, roulette/chest,
   referral tree) so test cohort users immediately see "this is in beta".
   Inline next to titles + entry-card labels. Compact pill, gold accent
   matching the existing achievement/jackpot palette so it doesn't
   visually compete with the feature's primary color.
   ===================================================================== */
.beta-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #f0bb3c 0%, #d99a1a 100%);
  color: #4a2f02;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(74, 47, 2, 0.18);
  white-space: nowrap;
}
/* Smaller variant for use inside a button label where space is tight. */
.beta-badge-sm {
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 9px;
}

/* =====================================================================
   ACHIEVEMENTS RIBBON (embedded inside balance card)
   ---------------------------------------------------------------------
   Achievements used to live in their own card; we now embed a compact
   tappable strip at the bottom of the balance card. The visual goal:
   feel like a "next step" CTA — gold-tinted (matches trophy/jackpot
   palette), slightly elevated, with an arrow on the right hinting at
   navigation. Trophy on the left for instant recognition.
   ===================================================================== */
.profile-achievements-ribbon {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #fff7e6 0%, #fcefcf 100%);
  border: 1.5px solid rgba(240, 187, 60, 0.5);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(218, 154, 26, 0.10);
}
.profile-achievements-ribbon:active {
  transform: scale(0.985);
  box-shadow: 0 1px 4px rgba(218, 154, 26, 0.18);
  border-color: rgba(240, 187, 60, 0.75);
}
.profile-achievements-ribbon .ribbon-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: linear-gradient(180deg, #f0bb3c 0%, #d99a1a 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6),
              0 2px 4px rgba(74, 47, 2, 0.18);
}
.profile-achievements-ribbon .ribbon-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
}
.profile-achievements-ribbon .ribbon-title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 700;
  color: #4a2f02;
}
.profile-achievements-ribbon .ribbon-stats {
  font-size: 12px;
  color: #876b25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-achievements-ribbon .ribbon-stats strong {
  color: #4a2f02;
}
.profile-achievements-ribbon .ribbon-arrow {
  flex-shrink: 0;
  font-size: 20px;
  color: #8a5d0a;
  font-weight: 700;
  margin-left: 4px;
}



/* =====================================================================
   PREMIUM GLASS REDESIGN  (performance-first, test-cohort only)
   ---------------------------------------------------------------------
   Activated by ``body.balance-redesign-enabled``.

   Performance philosophy:
     The previous version stacked backdrop-filter on every nested
     element (cards, toggle rows, history items, pills, buttons,
     code blocks). On iOS Safari each blurred element forces a
     separate compositing layer + per-frame GPU pass — the screen was
     re-blurred up to 12 times on every paint. Result: the phone
     heated up and scrolling stuttered.

     This version applies backdrop-filter ONLY to the top-level cards
     (5 elements max) at a moderate blur(14px) — enough to read as
     glass, cheap enough that scroll stays at 60fps. All inner
     elements use plain translucent rgba backgrounds with subtle
     inset highlights — visually "glass-adjacent" without the GPU cost.

     Animations are eliminated except for the one-shot CTA shine on
     the topup button. Background is a STATIC mesh, no drift. The
     decorative blob behind the balance number is also static.

   Visual impact:
     Almost identical to the heavy version on a still screen. Slightly
     less "swimming" effect during scroll because nested elements no
     longer re-blur — but they still inherit the parent card's glass
     surface so they look right.
   ===================================================================== */

/* ---------- 1. Static mesh background ---------- */
.balance-redesign-enabled {
  background:
    radial-gradient(at 18% 8%,  rgba(122, 61, 240, 0.20) 0%, transparent 40%),
    radial-gradient(at 85% 12%, rgba(45, 143, 58, 0.18) 0%, transparent 42%),
    radial-gradient(at 88% 80%, rgba(240, 187, 60, 0.20) 0%, transparent 44%),
    linear-gradient(160deg, #f3f6ff 0%, #f7f4ff 50%, #f4faf6 100%) !important;
  /* No background-attachment: fixed and no body::before — both proved
     too expensive on iOS Safari (heat + scroll jank). The mesh is
     painted once on the document root and composited statically. */
}

/* ---------- 2. Glass cards (top-level only) ---------- */
.balance-redesign-enabled .card {
  position: relative;
  /* Stronger transparency — the mesh background colors are clearly
     visible through each card now, giving a true frosted-glass feel
     instead of a "milky white" panel. Blur stays at 16px (only
     marginally costlier than 14, gives a noticeably richer frost). */
  background: rgba(255, 255, 255, 0.48);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 22px;
  box-shadow:
    0 10px 28px rgba(16, 33, 58, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.55) inset;
  /* Promote the card to its own compositing layer so blur reuses cache. */
  transform: translateZ(0);
}
/* Top-edge light reflection — pure CSS, no GPU compositing layer
   (just a small absolutely-positioned strip). Cheap, decorative. */
.balance-redesign-enabled .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0)   0%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0)   100%);
  pointer-events: none;
}

/* Per-card tints — backgrounds are layered linear gradients (cheap,
   composited once per card) on top of the blur layer. Opacity dropped
   ~10pt across the board so the colored mesh shows through more. */
.balance-redesign-enabled #rouletteCard {
  background: linear-gradient(180deg,
    rgba(255, 251, 240, 0.55) 0%,
    rgba(252, 239, 207, 0.42) 100%);
  border-color: rgba(240, 187, 60, 0.35);
}
.balance-redesign-enabled .devices-card {
  background: rgba(248, 252, 255, 0.50);
}
.balance-redesign-enabled .referral-card {
  background: linear-gradient(180deg,
    rgba(252, 248, 255, 0.52) 0%,
    rgba(243, 235, 255, 0.42) 100%);
  border-color: rgba(122, 61, 240, 0.20);
}
.balance-redesign-enabled .history-card {
  background: rgba(255, 255, 255, 0.46);
}

/* Fallback for browsers without backdrop-filter — opaquer fill. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .balance-redesign-enabled .card {
    background: rgba(255, 255, 255, 0.92);
  }
}

/* ---------- 3. Profile summary card internals ---------- */
.balance-redesign-enabled .profile-summary-divider {
  background: linear-gradient(90deg,
    rgba(16, 33, 58, 0)    0%,
    rgba(16, 33, 58, 0.10) 50%,
    rgba(16, 33, 58, 0)    100%);
  height: 1px;
  border: none;
  margin: 16px 0;
}

.balance-redesign-enabled .profile-balance-panel {
  background: transparent;
  box-shadow: none;
  margin: 0;
  padding: 4px 0 8px;
  position: relative;
}
.balance-redesign-enabled .profile-balance-panel::before {
  /* Static green halo — no animation, just composited once. */
  content: "";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(45, 143, 58, 0.20) 0%,
    rgba(45, 143, 58, 0)    70%);
  pointer-events: none;
  z-index: 0;
}
.balance-redesign-enabled .profile-balance-label {
  font-size: 12px;
  font-weight: 700;
  color: #66718a;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
.balance-redesign-enabled .profile-balance-value {
  font-size: clamp(48px, 13vw, 80px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #10213a 0%, #2a3f70 50%, #4965a4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 1;
  margin: 0;
}
.balance-redesign-enabled .profile-balance-value.balance-flash {
  background: linear-gradient(135deg, #d99a1a 0%, #f0bb3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.balance-redesign-enabled .profile-days-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
/* Days pill — static rgba bg, NO backdrop-filter (was contributing to
   heat). Visual difference is negligible inside the already-frosted
   parent card. */
.balance-redesign-enabled .profile-days-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(45, 95, 154, 0.18);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #2a3f70;
  box-shadow: 0 1px 3px rgba(16, 33, 58, 0.05);
}
.balance-redesign-enabled .profile-days-pill::before {
  content: "🕐";
  font-size: 13px;
}
.balance-redesign-enabled .profile-estimate-copy {
  margin: 8px 0 0;
  font-size: 12px;
  color: #66718a;
  font-style: italic;
  position: relative;
  z-index: 1;
}

/* ---------- 4. Toggle rows (Telegram Proxy / Adblock) ---------- */
/* No backdrop-filter — translucent rgba is enough since they sit
   inside the already-blurred parent card. */
.balance-redesign-enabled #proxyCard,
.balance-redesign-enabled #adblockCard {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(16, 33, 58, 0.06);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
.balance-redesign-enabled #proxyCard:has([aria-pressed="true"]),
.balance-redesign-enabled #adblockCard:has([aria-pressed="true"]) {
  background: rgba(45, 143, 58, 0.10);
  border-color: rgba(45, 143, 58, 0.45);
}
.balance-redesign-enabled .option-toggle-title {
  font-weight: 600;
  color: #10213a;
}
.balance-redesign-enabled .option-toggle-price {
  font-size: 11px;
  font-weight: 600;
  color: #876b25;
  background: rgba(240, 187, 60, 0.20);
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: 8px;
}

/* ---------- 5. Tariff inline copy ---------- */
.balance-redesign-enabled .tariff-inline-copy.balance-copy {
  margin: 16px 0 4px;
  padding: 12px 14px;
  font-size: 13px;
  color: #4d5b74;
  background: rgba(122, 61, 240, 0.06);
  border-left: 3px solid rgba(122, 61, 240, 0.50);
  border-radius: 0 12px 12px 0;
  line-height: 1.45;
}

/* ---------- 6. Top-up CTA hero ---------- */
.balance-redesign-enabled #openTopupButton {
  margin-top: 16px;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(135deg, #2aabee 0%, #1d83b8 60%, #146ea3 100%);
  color: #fff;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  box-shadow:
    0 8px 22px rgba(29, 131, 184, 0.30),
    0 1px 0 rgba(255, 255, 255, 0.40) inset;
  position: relative;
  overflow: hidden;
}
.balance-redesign-enabled #openTopupButton::after {
  content: "";
  position: absolute;
  top: 0; left: -50%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg,
    rgba(255, 255, 255, 0)    0%,
    rgba(255, 255, 255, 0.40) 50%,
    rgba(255, 255, 255, 0)    100%);
  transform: skewX(-20deg);
  animation: glass-shine 2.4s ease-out 0.6s 1 forwards;
  pointer-events: none;
}
@keyframes glass-shine {
  0%   { left: -50%; opacity: 0; }
  20%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}
.balance-redesign-enabled #openTopupButton .button-icon-light {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.balance-redesign-enabled #openTopupButton:active {
  transform: scale(0.985);
}

/* ---------- 7. Gift button ---------- */
.balance-redesign-enabled #giftButton {
  background: linear-gradient(135deg, #9a5af0 0%, #7a3df0 60%, #5e26c4 100%) !important;
  border-radius: 16px !important;
  margin-top: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 6px 18px rgba(122, 61, 240, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.30) inset !important;
}

/* ---------- 8. Achievements ribbon ---------- */
/* Solid gradient (no blur) — the parent card already provides glass. */
.balance-redesign-enabled .profile-achievements-ribbon {
  margin-top: 16px;
  background: linear-gradient(180deg,
    rgba(255, 247, 230, 0.92) 0%,
    rgba(252, 239, 207, 0.85) 100%);
  border: 1px solid rgba(240, 187, 60, 0.55);
  border-radius: 16px;
  box-shadow:
    0 4px 14px rgba(218, 154, 26, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

/* ---------- 9. Action card buttons (Поддержка / SOS) ---------- */
/* Brand gradients preserved — no backdrop-filter, these are
   pure-color buttons that don't need glass treatment. */
.balance-redesign-enabled .action-card .support-button {
  background: linear-gradient(135deg, var(--support) 0%, #2a3958 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 10px 22px rgba(20, 28, 43, 0.24),
    0 1px 0 rgba(255, 255, 255, 0.18) inset;
}
.balance-redesign-enabled .action-card .sos-button {
  background: linear-gradient(135deg, #ff6a4d 0%, #d83a2e 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 12px 26px rgba(216, 58, 46, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.30) inset;
}
.balance-redesign-enabled .action-card .support-button:active,
.balance-redesign-enabled .action-card .sos-button:active {
  transform: translateY(1px) scale(0.985);
}

/* ---------- 10. Devices card internals ---------- */
.balance-redesign-enabled .devices-card .devices-list .device-row {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(16, 33, 58, 0.06);
  border-radius: 14px;
}
.balance-redesign-enabled .devices-card .device-empty {
  background: rgba(255, 255, 255, 0.45);
  border-radius: 12px;
  padding: 12px;
  color: #66718a;
}
.balance-redesign-enabled .devices-add-button {
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(16, 33, 58, 0.08);
}

/* ---------- 11. Referral card ---------- */
.balance-redesign-enabled .referral-card .stat-chip {
  background: rgba(255, 255, 255, 0.60);
  border: 1px solid rgba(122, 61, 240, 0.18);
  border-radius: 12px;
}
.balance-redesign-enabled .referral-card .code-block {
  background: rgba(16, 33, 58, 0.05);
  border: 1px solid rgba(16, 33, 58, 0.08);
  color: #2a3f70;
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.balance-redesign-enabled #copyReferralButton {
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(122, 61, 240, 0.20);
}
.balance-redesign-enabled #openReferralTreeButton {
  box-shadow:
    0 6px 18px rgba(45, 143, 58, 0.26),
    0 1px 0 rgba(255, 255, 255, 0.30) inset;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* ---------- 12. History card internals ---------- */
.balance-redesign-enabled .history-card .history-list .history-item {
  background: rgba(255, 255, 255, 0.50);
  border: 1px solid rgba(16, 33, 58, 0.06);
  border-radius: 12px;
  margin-bottom: 8px;
}
.balance-redesign-enabled .history-card .device-empty {
  background: rgba(255, 255, 255, 0.45);
  border-radius: 12px;
  padding: 14px;
  color: #66718a;
}

/* ---------- 13. VPN status badge ---------- */
.balance-redesign-enabled .vpn-status-badge {
  border: 1px solid rgba(255, 255, 255, 0.40);
  box-shadow: 0 4px 12px rgba(16, 33, 58, 0.08);
}
.balance-redesign-enabled .vpn-status-badge.vpn-status-active {
  background: linear-gradient(180deg,
    rgba(45, 143, 58, 0.85) 0%,
    rgba(45, 143, 58, 0.70) 100%);
  color: #fff;
  /* No infinite pulse animation — keeps the GPU idle. */
}

/* ---------- 14. Card heads / labels ---------- */
.balance-redesign-enabled .card .card-label {
  color: #4d5b74;
  font-weight: 700;
}
.balance-redesign-enabled .card .card-head {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---------- 15. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .balance-redesign-enabled #openTopupButton::after {
    animation: none;
  }
}

/* ---------- 16. Small viewport / older device hint ----------
   On iPhones older than ~iOS 15 backdrop-filter still costs more than
   it gives. Switch the cards to a solid translucent fill — visually
   close, GPU-light. iPhone 7/8/X benefit most. */
@media (max-width: 380px) {
  .balance-redesign-enabled .card {
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

/* =====================================================================
   PREMIUM GLASS REDESIGN — page-wide consistency layer
   ---------------------------------------------------------------------
   Two related fixes:

   1. iOS rubber-band bounce was exposing a black gap below the content
      because nothing was painting the html-level bounce area. Combine:
         - ``overscroll-behavior: none`` on html/body (best-effort;
           Telegram WebView honors it on iOS 16+)
         - matching ``html`` background so the iOS-level bounce shows
           the same color as the body
         - JS-side ``Telegram.WebApp.setBackgroundColor()`` (in app.js)
           — the real fix on TG iOS clients

   2. Cards and buttons on the secondary screens (topup, methods,
      device-issue, gift, settings) used 16–20px radii — visually
      sharper than the 22px+ used on the redesigned main screen.
      Round them up so the screen-to-screen flow feels coherent.
   ===================================================================== */

/* ---------- 1. Stop iOS rubber-band exposing black ---------- */
.balance-redesign-enabled,
.balance-redesign-enabled body {
  overscroll-behavior: none;
}
/* Note: the html-level background + overscroll-behavior is set via
   ``html.balance-redesign-host`` further below (added later). The
   previous ``html:has(body.balance-redesign-enabled)`` rule was
   removed because :has() is unreliable on iOS <16.4 — the host class
   approach works on every iOS version we care about. */

/* ---------- 2. Consistent rounded corners across all screens ---------- */
/* Modal sheets — these previously varied (sos 22px, ach-modal 22px,
   roulette-modal 22px, prize-detail 22px, tree-detail 22px). Lock in
   24px so it matches the main-screen card radius. */
.balance-redesign-enabled .sos-modal-sheet,
.balance-redesign-enabled .ach-modal-sheet,
.balance-redesign-enabled .roulette-modal-sheet {
  border-radius: 24px 24px 0 0;
}

/* Topup / methods / device-issue screens use grids of buttons —
   round them to match the main aesthetic (≥20px). */
.balance-redesign-enabled .amount-button {
  border-radius: 20px;
}
.balance-redesign-enabled .method-button {
  border-radius: 22px;
}
.balance-redesign-enabled .device-option-button,
.balance-redesign-enabled .android-app-option-button,
.balance-redesign-enabled .protocol-option-button,
.balance-redesign-enabled .trial-device-button {
  border-radius: 22px;
}
.balance-redesign-enabled .store-download-button {
  border-radius: 18px;
}
.balance-redesign-enabled .danger-button {
  border-radius: 18px;
}

/* Topup / payment / device cards — outer .card containers on those
   screens. Bring them in line with main-screen cards (22px). */
.balance-redesign-enabled .topup-card,
.balance-redesign-enabled .methods-card,
.balance-redesign-enabled .device-link-card,
.balance-redesign-enabled .email-auth-card,
.balance-redesign-enabled .subscription-gate-card {
  border-radius: 22px;
}

/* Reference number boxes / code blocks across all screens */
.balance-redesign-enabled .code-block {
  border-radius: 14px;
}

/* Reference: legacy .card baseline already uses var(--radius-xl)=28px
   so the main cards default to even more rounded; we just need to
   make the secondary screens MATCH (not exceed) that for coherence.
   The selectors above target the specific items that were sharper. */

/* =====================================================================
   PREMIUM GLASS REDESIGN — html-level overscroll lock
   ---------------------------------------------------------------------
   ``html.balance-redesign-host`` is set by JS in tandem with
   ``body.balance-redesign-enabled``. We need html-targeted rules
   because iOS bounces at the document/window level, not body.
   This avoids ``:has()`` which has spotty cross-iOS support.
   ===================================================================== */
html.balance-redesign-host {
  background: #f3f6ff;
  overscroll-behavior: none;
}
html.balance-redesign-host body {
  overscroll-behavior: none;
}

/* =====================================================================
   PREMIUM GLASS REDESIGN — chest screen rounded corners
   ---------------------------------------------------------------------
   Chest catalog tiles, history rows and the screen-head card had
   12–18px radii, sharper than the 22px used on the main screen. Round
   them up so navigating from main → chest doesn't feel like a tonal
   shift. Spin / spin-again buttons get 18px to match the topup CTA.
   ===================================================================== */
.balance-redesign-enabled .roulette-screen-head {
  border-radius: 22px;
}
.balance-redesign-enabled .roulette-catalog-tile {
  border-radius: 18px;
}
.balance-redesign-enabled .roulette-history-row {
  border-radius: 14px;
}
.balance-redesign-enabled .roulette-spin-button,
.balance-redesign-enabled .roulette-spin-again-button {
  border-radius: 18px;
}
/* Result modal sheet on chest already covered by the modal-sheet rule
   in the radius-unification block (24px). Prize-detail modal too. */

/* =====================================================================
   PREMIUM GLASS REDESIGN — hide page scrollbar
   ---------------------------------------------------------------------
   Hides the right-edge scrollbar on the main page scroll. Inner
   overflow-scroll containers (like the payment methods grid) keep
   their own custom scrollbar styling — only the page-level bar is
   suppressed. Scrolling itself still works.
   ===================================================================== */
html.balance-redesign-host,
html.balance-redesign-host body {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* legacy Edge / IE */
}
html.balance-redesign-host::-webkit-scrollbar,
html.balance-redesign-host body::-webkit-scrollbar {
  display: none;                  /* WebKit (Safari, Telegram WebView, Chrome) */
  width: 0;
  height: 0;
}

/* =====================================================================
   GLOBAL INPUT CARET FIX  (applies to all users, not test-cohort only)
   ---------------------------------------------------------------------
   Telegram WebView on iOS hides the caret on text inputs whose
   ``font-size`` is below 16px (the iOS auto-zoom triggers on tap and
   the caret rendering gets dropped during the layout shift). Several
   inline-styled inputs across the app set ``font-size:16px`` directly
   and worked fine; others inherited smaller fonts and felt "dead" —
   user couldn't tell they were typeable.

   Universal rule: every text input gets a brand-blue caret color so
   the blink is always visible against any background, plus a minimum
   font-size of 16px to suppress iOS auto-zoom. Plus a generic
   ``:focus`` state so users see clear feedback when the field is
   active.
   ===================================================================== */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[inputmode="numeric"],
input[inputmode="email"],
textarea {
  caret-color: var(--primary);
}
/* iOS auto-zoom protection — only bump font size for inputs that
   currently set a smaller value via class. Inline ``font-size:16px``
   on the gift inputs already covers them. */
input[type="text"]:not([style*="font-size"]),
input[type="email"]:not([style*="font-size"]),
input[type="number"]:not([style*="font-size"]),
input[type="tel"]:not([style*="font-size"]),
textarea:not([style*="font-size"]) {
  font-size: max(16px, 1em);
}

/* =====================================================================
   PREMIUM GLASS REDESIGN — extended coverage (modals + fullscreen heads)
   ---------------------------------------------------------------------
   The base ``.card`` rule (broadened above) already covers every card
   on every screen. This block adds glass to elements that aren't
   ``.card`` but should still feel coherent:
     - Fullscreen screen headers (achievements / roulette / referral
       tree) — they have their own white panels, switch to glass
     - Modal sheets (sos / ach / roulette-result / prize-detail /
       referral-tree-detail) — bottom-sheets that overlay the screen
   ===================================================================== */

/* ---------- Fullscreen heads ---------- */
.balance-redesign-enabled .achievements-screen-head,
.balance-redesign-enabled .roulette-screen-head,
.balance-redesign-enabled .referral-tree-head {
  background: rgba(255, 255, 255, 0.50);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 22px;
  box-shadow:
    0 10px 28px rgba(16, 33, 58, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.55) inset;
}

/* ---------- Modal sheets (bottom sheets) ---------- */
.balance-redesign-enabled .sos-modal-sheet,
.balance-redesign-enabled .ach-modal-sheet,
.balance-redesign-enabled .roulette-modal-sheet {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  /* Bottom sheets need a slightly higher opacity so the modal content
     is unambiguously focused above the dimmed backdrop — but still
     glassy enough to feel coherent with the rest of the redesign. */
}
.balance-redesign-enabled .sos-modal-backdrop,
.balance-redesign-enabled .ach-modal-backdrop,
.balance-redesign-enabled .roulette-modal-backdrop {
  /* Slightly darker dim + minor blur on the backdrop itself reinforces
     focus on the modal sheet. */
  background: rgba(8, 14, 28, 0.50);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* ---------- Profile-summary card — slightly higher opacity since it
              holds critical info (balance number, days, options). */
.balance-redesign-enabled .profile-summary-card {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(245, 248, 255, 0.42) 100%);
}

/* ---------- Action card (Поддержка/SOS) — keeping it slightly more
              opaque since the buttons inside are bright brand colors
              that benefit from a calmer surface behind. */
.balance-redesign-enabled .action-card {
  background: rgba(255, 255, 255, 0.50);
}

/* Fallback opacity bumps for browsers without backdrop-filter. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .balance-redesign-enabled .achievements-screen-head,
  .balance-redesign-enabled .roulette-screen-head,
  .balance-redesign-enabled .referral-tree-head,
  .balance-redesign-enabled .sos-modal-sheet,
  .balance-redesign-enabled .ach-modal-sheet,
  .balance-redesign-enabled .roulette-modal-sheet {
    background: rgba(255, 255, 255, 0.92);
  }
}

/* =====================================================================
   PREMIUM GLASS REDESIGN — referral tree + SOS modal harmony
   ---------------------------------------------------------------------
   1. Referral-tree node tiles: 18px radius felt sharper than the 22px
      used by the main-screen cards. Bump to 22px so navigating from
      main → tree feels visually continuous.

   2. SOS modal previously rendered as a *floating* center-bottom sheet
      with 24px all-corner radius and 18px screen-edge gaps. That style
      doesn't match the achievement-detail modal (bottom-attached
      sheet with top-only rounded corners). User wants the SOS modal
      to feel the same as achievement-details, so we override SOS to
      behave as a true bottom-sheet under the redesign skin.
   ===================================================================== */

/* ---------- 1. Tree nodes ---------- */
.balance-redesign-enabled .referral-tree-node {
  border-radius: 22px;
}

/* ---------- 2. SOS modal as a bottom-sheet (mirrors .ach-modal) ---------- */
/* Container: drop the 18px padding so the sheet sits flush at the bottom. */
.balance-redesign-enabled .sos-modal {
  padding: 0;
  align-items: flex-end;
  justify-content: center;
}

/* Backdrop: match the achievement-detail dim + blur. */
.balance-redesign-enabled .sos-modal-backdrop {
  background: rgba(16, 33, 58, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Sheet: full-width up to 520px, attached to bottom edge, top corners
   rounded, glass background, slide-up animation. The .ach-modal-rise
   keyframe is already defined in the legacy block (line ~1875) — we
   reuse it here. */
.balance-redesign-enabled .sos-modal-sheet {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0;
  padding: 22px 22px 30px;
  border: none;
  border-radius: 24px 24px 0 0;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 -10px 30px rgba(16, 33, 58, 0.18);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  animation: ach-modal-rise 0.22s ease;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .balance-redesign-enabled .sos-modal-sheet {
    background: rgba(255, 255, 255, 0.96);
  }
}

/* Header row (label + close button) — same flex layout as ach-modal */
.balance-redesign-enabled .sos-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  margin-bottom: 4px;
}

/* Title — center it like the ach-modal name. */
.balance-redesign-enabled .sos-modal-title {
  margin: 6px 0 4px;
  font-size: 22px;
  font-weight: 700;
  color: #10213a;
  text-align: center;
  letter-spacing: -0.02em;
}

/* Reason buttons — give them clean rounded edges + brand gradients
   so they feel like CTAs inside the sheet, not flat list items. */
.balance-redesign-enabled .sos-reason-list {
  margin-top: 10px;
  gap: 10px;
}
.balance-redesign-enabled .sos-reason-button {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(16, 33, 58, 0.10);
  color: #10213a;
  font-weight: 700;
  padding: 14px 18px;
  box-shadow: 0 2px 6px rgba(16, 33, 58, 0.06);
  transition: transform 0.12s ease, background 0.16s ease;
}
.balance-redesign-enabled .sos-reason-button:active {
  transform: translateY(1px) scale(0.985);
  background: rgba(255, 255, 255, 0.80);
}

/* =====================================================================
   PREMIUM GLASS REDESIGN — fullscreen container transparency fix
   ---------------------------------------------------------------------
   The achievements / chest / referral-tree fullscreen containers had
   solid background colors (#f6f7fb / linear gradients). For the
   redesign cohort that completely covered the colorful body mesh,
   defeating the glass effect — cards looked frosted over flat gray
   instead of mesh. Plus the screen-edge corners read as sharp
   rectangles.

   Fix: drop the opaque background for these three screens under the
   redesign skin. Body mesh shows through, glass cards now actually
   frost a colorful surface.

   Also bump tile/button radii on those screens for full corner
   consistency with the main screen (22px standard).
   ===================================================================== */

.balance-redesign-enabled .achievements-fullscreen,
.balance-redesign-enabled .roulette-fullscreen,
.balance-redesign-enabled .referral-tree-fullscreen {
  background: transparent;
}

/* Achievement tiles (in the achievements full-grid) — 16px → 20px */
.balance-redesign-enabled .achievement-tile {
  border-radius: 20px;
}

/* Roulette stage corners (the chest area itself doesn't have a
   container bg, it's the catalog tiles + history rows that have
   visible corners — already covered by earlier roulette rules at 18 /
   14, bump to 20 / 16 for closer match). */
.balance-redesign-enabled .roulette-catalog-tile {
  border-radius: 20px;
}
.balance-redesign-enabled .roulette-history-row {
  border-radius: 16px;
}

/* Referral-tree node — already 22px from earlier. The progress bar
   stays at 3px (thin 6px-tall bar, can't visibly round more). */


/* === "Не работает ключ?" modal — clean look === */
#recreateDeviceModal .ach-modal-sheet {
  padding: 24px 20px 28px;
  gap: 16px;
}
#recreateDeviceModal .ach-modal-head {
  align-items: center;
}
#recreateDeviceModal .ach-modal-icon {
  font-size: 44px;
  margin: 8px auto 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(76, 217, 100, 0.10);
  border: 2px solid rgba(76, 217, 100, 0.25);
}
#recreateDeviceModal .ach-modal-icon.error {
  background: rgba(217, 83, 79, 0.10);
  border-color: rgba(217, 83, 79, 0.30);
}
#recreateDeviceModal .ach-modal-icon.loading {
  background: rgba(127, 127, 127, 0.10);
  border-color: rgba(127, 127, 127, 0.25);
}
#recreateDeviceModal .ach-modal-name {
  font-size: 22px;
  font-weight: 700;
  margin: 4px 0 0;
  color: #10213a;
}
#recreateDeviceModal .ach-modal-description {
  font-size: 14px;
  line-height: 1.45;
  color: #4d5b74;
  margin: 0;
}
/* Phase 1: device list */
#recreateDeviceList button {
  background: #f6f8fb;
  border: 1.5px solid rgba(16, 33, 58, 0.06);
  border-radius: 14px;
  transition: transform 0.1s ease, border-color 0.16s ease, background 0.16s ease;
}
#recreateDeviceList button:active {
  transform: scale(0.98);
  background: #eef2f7;
  border-color: rgba(16, 33, 58, 0.12);
}
#recreateDeviceList button strong {
  font-size: 15px;
  color: #10213a;
}
#recreateDeviceList button small {
  font-size: 12px;
  color: #6b7891;
}
/* Phase 2/3: action buttons */
#recreateConfirmButton,
#recreateResultKaringLink,
#recreateResultCloseButton {
  border-radius: 12px;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 15px;
}
#recreateConfirmButton {
  background: linear-gradient(180deg, #e85a4f 0%, #c8443a 100%) !important;
  color: #fff !important;
  border: none;
  box-shadow: 0 4px 12px rgba(232, 90, 79, 0.25);
}
#recreateConfirmButton:active {
  transform: scale(0.99);
  box-shadow: 0 2px 6px rgba(232, 90, 79, 0.30);
}
#recreateResultKaringLink {
  background: linear-gradient(180deg, #5dbb6a 0%, #2c8f3a 100%);
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(45, 143, 58, 0.25);
}
#recreateResultCloseButton {
  background: #f6f8fb;
  border: 1.5px solid rgba(16, 33, 58, 0.08);
  color: #4d5b74;
}
#recreatePhaseConfirm .ach-modal-name {
  margin-top: 4px;
}
#recreatePhaseConfirm .ach-modal-description {
  background: rgba(217, 83, 79, 0.06);
  border: 1px solid rgba(217, 83, 79, 0.15);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
}


/* === "Не работает ключ?" button — attention-grabbing helper card === */
.recreate-device-button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fff7ed 0%, #ffe9d0 100%);
  border: 1.5px solid rgba(232, 138, 26, 0.35);
  border-radius: 16px;
  color: #8a4f00;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  box-shadow:
    0 2px 8px rgba(232, 138, 26, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}
.recreate-device-button.hidden {
  display: none;
}
.recreate-device-button:active {
  transform: scale(0.99);
  box-shadow:
    0 1px 4px rgba(232, 138, 26, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.recreate-device-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f5a523 0%, #e88a1a 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(232, 138, 26, 0.30);
}
.recreate-device-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.recreate-device-title {
  font-size: 15px;
  font-weight: 700;
  color: #6b3a00;
  line-height: 1.2;
}
.recreate-device-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: #a06600;
  opacity: 0.85;
  line-height: 1.3;
}
.recreate-device-chevron {
  flex-shrink: 0;
  font-size: 24px;
  font-weight: 300;
  color: #c97a00;
  opacity: 0.6;
  margin-left: 4px;
}


/* === Action card buttons (Добавить устройство / etc.) === */
.action-card-button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 12px;
  padding: 14px 16px;
  border: none;
  border-radius: 16px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}
.action-card-button:active {
  transform: scale(0.99);
}
/* Primary variant — for "Add device" main action */
.action-card-button-primary {
  background: linear-gradient(135deg, #eef4ff 0%, #d8e4ff 100%);
  border: 1.5px solid rgba(63, 124, 242, 0.30);
  color: #1f5ec7;
  box-shadow:
    0 2px 8px rgba(63, 124, 242, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.action-card-button-primary:active {
  box-shadow:
    0 1px 4px rgba(63, 124, 242, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.action-card-button-primary .action-card-icon {
  background: linear-gradient(180deg, #4a8af0 0%, #2e6fd9 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(63, 124, 242, 0.30);
}
.action-card-button-primary .action-card-title {
  color: #103572;
}
.action-card-button-primary .action-card-subtitle {
  color: #3d6ab8;
}
.action-card-button-primary .action-card-chevron {
  color: #1f5ec7;
}
/* Shared structural styles */
.action-card-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.action-card-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.action-card-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
.action-card-subtitle {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.85;
  line-height: 1.3;
}
.action-card-chevron {
  flex-shrink: 0;
  font-size: 24px;
  font-weight: 300;
  opacity: 0.55;
  margin-left: 4px;
}


/* label-icon SVG fix — slightly bigger container so SVG breathes */
.label-icon {
  width: 22px;
  height: 22px;
  font-size: 11px;
}
.label-icon svg {
  display: block;
}