.account-pill {
  position: fixed;
  z-index: 1500;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  min-height: 42px;
  width: auto;
  padding: 5px 12px 5px 7px;
  border-radius: 999px;
  font: 700 14px/1.2 var(--font-ui, system-ui, sans-serif);
  gap: 8px;
}
.account-pill:not([hidden]) { border-color: color-mix(in srgb, var(--yellow, #ffd166) 62%, var(--mint, #65e6c2)); background: linear-gradient(105deg, color-mix(in srgb, var(--mint, #65e6c2) 16%, rgba(5,20,16,.94)), rgba(5,20,16,.9)); color: var(--chalk, #fff8df); box-shadow: 0 8px 24px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.08); }
.account-pill-icon, .account-pill-avatar { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; object-fit: cover; overflow: hidden; border: 1px solid color-mix(in srgb, var(--yellow, #ffd166) 58%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--yellow, #ffd166) 9%, transparent); }
.account-pill-icon { padding: 3px; }
.account-pill-avatar.account-avatar-emoji { margin: 0; font-size: 17px; }
.account-pill.is-authenticated { border-color: color-mix(in srgb, var(--green, #b8dfae) 66%, var(--chalk, #fff8df)); }
body:has(.modal-layer:not([hidden]), .platform-modal:not([hidden])) .account-pill {
  visibility: hidden;
  pointer-events: none;
}
.platform-modal {
  position: fixed;
  z-index: 5000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(max(16px, env(safe-area-inset-bottom)) + var(--native-banner-offset, 0px)) max(16px, env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--mint, #65e6c2) 10%, transparent), transparent 42%), rgba(2, 10, 8, .92);
}
.platform-modal[hidden], .platform-toast[hidden] { display: none; }
.platform-modal:not([hidden]) { animation: platform-veil-in var(--motion-standard, 260ms) ease-out both; }
.platform-modal:not([hidden]) > .platform-card { animation: platform-card-in var(--motion-standard, 260ms) var(--ease-out-back, ease-out) both; }
.platform-card {
  --platform-accent: var(--mint, #65e6c2);
  position: relative;
  width: min(100%, 480px);
  max-height: calc(100dvh - max(32px, env(safe-area-inset-top)) - max(32px, env(safe-area-inset-bottom)) - var(--native-banner-offset, 0px));
  overflow: auto;
  padding: 28px;
  border: 2px solid color-mix(in srgb, var(--platform-accent) 34%, var(--chalk, #fff8df));
  border-radius: 18px;
  background: radial-gradient(circle at 8% 0, color-mix(in srgb, var(--platform-accent) 12%, transparent), transparent 38%), var(--panel-gradient, var(--board-deep, #071a15));
  color: var(--chalk, #eef1e9);
  box-shadow: 0 20px 58px rgba(0, 0, 0, .48), inset 0 0 34px color-mix(in srgb, var(--platform-accent) 4%, transparent);
}

@keyframes platform-veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes platform-card-in { from { opacity: 0; transform: translateY(12px) scale(.965); } to { opacity: 1; transform: none; } }
/*
 * Form dialogs can be taller than the keyboard-reduced Android WebView.
 * Giving both the overlay and the card their own scroll range creates a nested
 * scroll trap: Chromium may move the card above the visual viewport while its
 * clipped top and actions remain unreachable. Keep the overlay as the only
 * scroller for keyboard forms. Safe alignment centres the card when there is
 * room and falls back to the reachable top edge when the viewport is shorter.
 */
.keyboard-safe-modal {
  scroll-padding-block: max(16px, env(safe-area-inset-top)) calc(max(16px, env(safe-area-inset-bottom)) + var(--native-banner-offset, 0px));
  -webkit-overflow-scrolling: touch;
}
.platform-modal.keyboard-safe-modal {
  display: flex;
  align-items: safe center;
  justify-content: center;
}
.modal-layer.keyboard-safe-modal { justify-content: safe center; }
.platform-modal.keyboard-safe-modal[hidden] { display: none; }
.keyboard-safe-modal > .keyboard-safe-card {
  flex: 0 0 auto;
  max-height: none;
  margin-block: 0;
  overflow: visible;
}
.keyboard-safe-modal input:focus { scroll-margin-block: 72px; }
.platform-card h2 { margin: 0 42px 18px; text-align: center; }
.platform-card > p { text-align: center; }
.platform-card label { display: grid; gap: 6px; margin: 12px 0; }
.platform-card input {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(238, 241, 233, .55);
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  color: inherit;
}
.platform-card button { width: auto; max-width: 100%; min-width: 0; height: auto; min-height: 44px; padding: 9px 14px; justify-content: center; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
.platform-card > button:not(.platform-close), .platform-email > button { margin: 6px 0; }
.platform-close { position: absolute; top: 12px; right: 12px; width: 40px !important; height: 40px; min-height: 40px !important; margin: 0 !important; padding: 0 !important; border-radius: 50%; font-size: 24px; }
.platform-close::before { border-radius: 50%; }
.platform-email, .platform-actions, .platform-links, .platform-debug, .rate-stars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.platform-email input { min-width: 0; width: 100%; }
.platform-actions button, .platform-links button, .platform-debug button { width: 100%; min-width: 0; }
.account-avatar {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  margin: 0 auto 10px;
  object-fit: cover;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--yellow, #ebd38c) 68%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--yellow, #ebd38c) 8%, transparent);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
}
.account-avatar-empty { color: color-mix(in srgb, var(--chalk-soft, #b9c2b7) 60%, transparent); font-size: 26px; }
.account-avatar-empty-icon { width: 52px; height: 52px; object-fit: contain; }
.account-avatar-emoji { font-size: 38px; line-height: 1; }
.account-identity strong { color: var(--chalk, #eef1e9); font-size: 19px; }
.account-identity small { overflow-wrap: anywhere; }
.auth-card {
  --platform-accent: var(--lilac, #c6a8ff);
  width: min(100%, 430px);
  padding: 30px 28px 26px;
  border-color: color-mix(in srgb, var(--chalk, #eef1e9) 74%, var(--yellow, #ebd38c));
  text-align: center;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, .58),
    inset 0 0 42px color-mix(in srgb, var(--yellow, #ebd38c) 5%, transparent);
}
#account-modal.is-authenticated .auth-card { border-color: color-mix(in srgb, var(--green, #b8dfae) 62%, var(--chalk, #eef1e9)); box-shadow: 0 28px 90px rgba(0,0,0,.58), inset 0 0 42px color-mix(in srgb, var(--green, #b8dfae) 7%, transparent); }
#account-modal.is-authenticated .auth-mark { border-color: var(--green, #b8dfae); color: var(--green, #b8dfae); }
.auth-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid color-mix(in srgb, var(--chalk, #eef1e9) 16%, transparent);
  border-radius: 12px;
  pointer-events: none;
}
.auth-mark {
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--yellow, #ebd38c) 72%, transparent);
  border-radius: 50%;
  color: var(--yellow, #ebd38c);
  background: color-mix(in srgb, var(--yellow, #ebd38c) 9%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--yellow, #ebd38c) 12%, transparent);
}
.auth-mark::before { content: ""; position: absolute; inset: -6px; border: 1px dashed color-mix(in srgb, currentColor 48%, transparent); border-radius: 50%; animation: auth-mark-orbit 10s linear infinite; }
.auth-mark { position: relative; }
.auth-mark-icon { width: 42px; height: 42px; object-fit: contain; }
.auth-eyebrow {
  margin: 0 0 7px !important;
  color: var(--yellow, #ebd38c) !important;
  font-size: 12px !important;
  font-weight: 750;
  line-height: 1.2 !important;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.auth-card h2 {
  margin: 0 44px 12px;
  font-family: var(--font-accent, cursive);
  font-size: 44px;
  font-weight: 400;
  line-height: .94;
}
.auth-body { display: grid; gap: 12px; }
.auth-copy {
  max-width: 330px;
  margin: 0 auto 5px !important;
  color: var(--chalk-soft, #b9c2b7) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  text-align: center;
}
.auth-field {
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
  color: var(--chalk-soft, #b9c2b7);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: left;
}
.auth-field input {
  width: 100%;
  min-height: 50px;
  padding: 11px 13px;
  border-color: color-mix(in srgb, var(--chalk, #eef1e9) 34%, transparent);
  background: rgba(5, 12, 9, .34);
  font-size: 16px;
}
.auth-field input:focus {
  border-color: var(--yellow, #ebd38c);
  outline: 2px solid color-mix(in srgb, var(--yellow, #ebd38c) 55%, transparent);
  outline-offset: 1px;
}
.auth-actions { display: grid; gap: 9px; width: 100%; }
.auth-actions button,
.auth-step > button,
.auth-card > .auth-text-button {
  width: 100%;
  min-height: 50px;
  margin: 0 !important;
  justify-content: center;
}
.auth-provider {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center;
  padding-inline: 12px;
  text-align: center;
}
.auth-provider::after { content: ""; }
.auth-provider-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: 800 14px/1 var(--font-ui, system-ui, sans-serif);
}
.auth-inline-icon { width: 22px; height: 22px; flex: 0 0 auto; object-fit: contain; pointer-events: none; }
.auth-provider-icon .auth-inline-icon { width: 20px; height: 20px; }
.auth-provider.primary .auth-inline-icon { filter: brightness(.2) saturate(.45); }
.auth-provider:hover .auth-provider-icon,
.auth-provider:focus-visible .auth-provider-icon { color: var(--yellow, #ebd38c); box-shadow: 0 0 14px color-mix(in srgb, var(--yellow, #ebd38c) 24%, transparent); transform: scale(1.08); }
.auth-text-button {
  min-height: 40px !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--chalk-soft, #b9c2b7) !important;
  font-size: 14px !important;
}
.auth-text-button::before { display: none; }
.auth-guest-button { display: inline-flex; align-items: center; gap: 7px; }
.auth-step { grid-template-columns: 1fr; gap: 10px; margin: 15px 0 10px; }
.auth-card .platform-actions { grid-template-columns: 1fr; }
.profile-edit-card { --platform-accent: var(--mint, #65e6c2); width: min(100%, 450px); }
.profile-edit-card h2 { margin-bottom: 14px; font-size: 40px; }
.profile-avatar-preview {
  width: 96px;
  height: 96px;
  margin: 0 auto 10px;
}
.profile-avatar-preview.avatar-changed { animation: avatar-change 540ms var(--ease-out-back, ease-out) both !important; }
.profile-avatar-preview-media {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--yellow, #ebd38c) 72%, transparent);
  border-radius: 24px;
  background: color-mix(in srgb, var(--yellow, #ebd38c) 9%, transparent);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .32);
}
.profile-avatar-preview .account-avatar-emoji { font-size: 47px; }
.profile-avatar-preview .account-avatar-empty { font-size: 28px; color: var(--chalk-soft, #b9c2b7); }
.profile-file-input { display: none; }
.profile-photo-button { width: 100% !important; margin: 0 !important; border-style: dashed !important; }
.profile-photo-button .auth-inline-icon { width: 24px; height: 24px; margin-inline-end: 2px; }
.profile-avatar-hint { margin: 5px 0 10px !important; color: var(--chalk-soft, #b9c2b7) !important; font-size: 12px !important; }
.profile-emoji-fieldset { margin: 0 0 12px; padding: 0; border: 0; }
.profile-emoji-fieldset legend { width: 100%; margin-bottom: 7px; color: var(--chalk-soft, #b9c2b7); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-align: left; }
.profile-emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.profile-emoji-grid button {
  width: 100%;
  min-width: 0;
  min-height: 43px;
  padding: 4px;
  border-color: color-mix(in srgb, var(--chalk, #eef1e9) 18%, transparent);
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  font-size: 22px;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
.profile-emoji-grid button.selected { border-color: var(--yellow, #ebd38c); background: color-mix(in srgb, var(--yellow, #ebd38c) 15%, transparent); transform: translateY(-2px); }
.profile-name-error { min-height: 18px; margin: 4px 0 8px !important; color: var(--coral, #ee9a8b) !important; font-size: 12px !important; text-align: left !important; }
.profile-save-button { width: 100% !important; margin: 0 !important; }
.auth-field input[aria-invalid="true"] { border-color: var(--coral, #ee9a8b); }

/* Account flow */
.account-flow-card,
.email-flow-card,
.profile-edit-card {
  --platform-accent: var(--mint, #65e6c2);
  border-color: color-mix(in srgb, var(--mint, #65e6c2) 55%, var(--chalk, #fff8df));
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% -12%, color-mix(in srgb, var(--mint, #65e6c2) 17%, transparent), transparent 42%),
    linear-gradient(155deg, color-mix(in srgb, var(--board-deep, #071a15) 94%, var(--lilac, #c6a8ff)), var(--board-deep, #071a15));
}
.account-flow-card::after,
.email-flow-card::after,
.profile-edit-card::after { display: none; }
.account-flow-header,
.profile-edit-header { display: grid; justify-items: center; gap: 9px; margin-bottom: 18px; }
.account-flow-header .auth-mark { margin: 0; }
.account-flow-header h2,
.profile-edit-header h2 { margin: 0 44px; font-family: var(--font-accent, cursive); font-size: 43px; font-weight: 400; line-height: .95; text-align: center; }
.flow-back {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  margin: 0 !important;
  padding: 0 2px 4px 0 !important;
  border-radius: 999px !important;
  font: 35px/1 var(--font-ui, system-ui, sans-serif);
}
.flow-back::before { border-radius: 50%; }
.account-intro { max-width: 310px; margin-bottom: 7px !important; }
.auth-actions { gap: 10px; }
.auth-provider { min-height: 56px !important; border-radius: 14px; }
.auth-provider.secondary { background: linear-gradient(100deg, color-mix(in srgb, var(--lilac, #c6a8ff) 10%, rgba(7,26,21,.9)), rgba(5,20,16,.78)); }
.auth-guest-button { margin-top: 2px !important; }
.account-profile-summary {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--green, #b8dfae) 36%, transparent);
  border-radius: 16px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--green, #b8dfae) 10%, transparent), rgba(255,255,255,.025));
  text-align: left;
}
.account-profile-summary .account-avatar { width: 74px; height: 74px; margin: 0; }
.account-profile-summary .account-identity { min-width: 0; display: grid; gap: 3px; }
.account-profile-summary .account-identity strong { overflow: hidden; font-size: 21px; text-overflow: ellipsis; white-space: nowrap; }
.account-profile-summary .account-identity small { color: var(--chalk-soft, #b9c2b7); font-size: 12px; }
.account-status { width: max-content; margin-top: 3px; padding: 3px 7px; border-radius: 999px; color: var(--green, #b8dfae); background: color-mix(in srgb, var(--green, #b8dfae) 10%, transparent); font-size: 11px; font-weight: 750; }
.account-flow-actions { display: grid; gap: 9px; }
.account-flow-actions button { width: 100%; min-height: 52px; margin: 0 !important; }
.account-sign-out { border-color: transparent !important; background: transparent !important; color: var(--coral, #ee9a8b) !important; }
.account-sign-out::before { display: none; }
.account-flow-card { position: relative; }
.auth-wait { position: absolute; z-index: 30; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; border-radius: inherit; background: color-mix(in srgb, var(--board-deep, #071a15) 92%, transparent); color: var(--mint, #65e6c2); }
.auth-wait[hidden] { display: none; }
.auth-spinner { width: 42px; height: 42px; border: 3px solid color-mix(in srgb, var(--mint, #65e6c2) 22%, transparent); border-top-color: var(--mint, #65e6c2); border-radius: 50%; animation: auth-spinner .72s linear infinite; }
.is-auth-busy .account-flow-header,
.is-auth-busy #account-body { opacity: .18; filter: blur(1px); }
@keyframes auth-spinner { to { rotate: 360deg; } }

.email-flow-card { width: min(100%, 430px); }
.email-flow-step { display: grid; gap: 11px; }
.email-flow-step[hidden] { display: none; }
.email-flow-step .auth-field { margin: 0 !important; }
.email-primary-action { width: 100% !important; min-height: 54px !important; margin: 2px 0 0 !important; }
.email-code-destination { display: grid; gap: 4px; margin-bottom: 3px; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--mint, #65e6c2) 26%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--mint, #65e6c2) 7%, transparent); text-align: left; }
.email-code-destination span { color: var(--chalk-soft, #b9c2b7); font-size: 12px; }
.email-code-destination strong { overflow: hidden; color: var(--mint, #65e6c2); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
#auth-code { text-align: center; font-size: 22px; font-weight: 800; letter-spacing: .18em; }

.profile-edit-card { width: min(100%, 520px); padding: 26px; }
.profile-edit-header { margin-bottom: 14px; }
.profile-editor-body { display: grid; gap: 12px; }
.profile-avatar-section,
.profile-name-section { padding: 14px; border: 1px solid color-mix(in srgb, var(--chalk, #eef1e9) 18%, transparent); border-radius: 16px; background: rgba(255,255,255,.025); }
.profile-avatar-preview { width: 90px; height: 90px; margin-bottom: 10px; }
.profile-avatar-preview-media { border-radius: 50%; }
.profile-photo-button { min-height: 46px !important; border-style: solid !important; }
.profile-avatar-hint { margin: 6px 0 12px !important; text-align: center; }
.profile-emoji-fieldset { margin-bottom: 0; }
.profile-emoji-fieldset legend { margin-bottom: 9px; text-align: center; }
.profile-emoji-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.profile-emoji-grid button { min-height: 46px; border-radius: 13px; }
.profile-name-section .auth-field { margin: 0 !important; }
.profile-name-error:empty { min-height: 0; margin: 0 !important; }
.profile-name-error:not(:empty) { margin: 7px 0 0 !important; }
.profile-save-button { min-height: 54px !important; margin-top: 12px !important; }

.rate-card { --platform-accent: var(--yellow, #ffd166); width: min(100%, 440px); text-align: center; border-color: color-mix(in srgb, var(--yellow, #ffd166) 58%, var(--chalk, #fff8df)); background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--yellow, #ffd166) 14%, transparent), transparent 42%), var(--panel-gradient, var(--board-deep, #071a15)); }
.rate-emblem { width: 64px; height: 64px; margin: -3px auto 10px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--yellow, #ebd38c) 64%, transparent); border-radius: 50%; color: var(--yellow, #ebd38c); background: color-mix(in srgb, var(--yellow, #ebd38c) 8%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--yellow, #ebd38c) 13%, transparent); }
.rate-emblem span { font-size: 31px; line-height: 1; text-shadow: 0 0 10px currentColor; }
#rate-modal:not([hidden]) .rate-emblem { animation: rate-emblem-in 520ms var(--ease-out-back, ease-out) 70ms both; }
.rate-stars { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#rate-modal:not([hidden]) .rate-stars button { animation: rate-star-in 380ms var(--ease-out-back, ease-out) both; }
#rate-modal:not([hidden]) .rate-stars button:nth-child(1) { animation-delay: 140ms; }
#rate-modal:not([hidden]) .rate-stars button:nth-child(2) { animation-delay: 180ms; }
#rate-modal:not([hidden]) .rate-stars button:nth-child(3) { animation-delay: 220ms; }
#rate-modal:not([hidden]) .rate-stars button:nth-child(4) { animation-delay: 260ms; }
#rate-modal:not([hidden]) .rate-stars button:nth-child(5) { animation-delay: 300ms; }
.rate-stars button { width: 100%; min-width: 0; padding-inline: 4px; border-color: transparent; color: var(--chalk-soft, #c7d8ce); font-size: 28px; opacity: .34; transition: color 140ms, opacity 140ms, transform 140ms; }
.rate-stars button.selected { border-color: color-mix(in srgb, var(--yellow, #ffd166) 48%, transparent); color: var(--yellow, #ffd166); opacity: 1; transform: translateY(-2px) scale(1.04); text-shadow: 0 0 12px color-mix(in srgb, currentColor 65%, transparent); animation: rate-star-select 360ms var(--ease-out-back, ease-out) both !important; }
.rate-copy { min-height: 42px; margin: 10px 0 4px; color: var(--chalk-soft, #b9c2b7); font-size: 14px; line-height: 1.4; }
.rate-copy.rating-changed { animation: rating-copy-change 360ms var(--ease-out-back, ease-out); }
#rate-modal.has-rating .rate-copy { color: var(--yellow, #ebd38c); }
.rate-confirm { width: 100% !important; }
.platform-toast {
  position: fixed;
  z-index: 6000;
  left: 50%;
  bottom: calc(max(24px, env(safe-area-inset-bottom)) + var(--native-banner-offset, 0px));
  translate: -50% 0;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border-radius: 12px;
  background: #f3ead3;
  color: #17251f;
  font: 600 14px/1.35 var(--font-ui, system-ui, sans-serif);
}
.platform-toast:not([hidden]) { animation: platform-toast-in 360ms var(--ease-out-back, ease-out) both; }
.menu-actions button.subscription-cta {
  isolation: isolate;
  overflow: hidden;
  min-height: 58px;
  padding: 10px 18px;
  border-color: color-mix(in srgb, var(--yellow, #ebd38c) 82%, var(--chalk, #fff8df));
  color: var(--chalk, #fff8df);
  background: linear-gradient(112deg, color-mix(in srgb, var(--lilac, #c6a8ff) 58%, #30204a) 0%, color-mix(in srgb, var(--coral, #ff8177) 38%, #69425f) 52%, color-mix(in srgb, var(--yellow, #ebd38c) 68%, #70441e) 100%);
  box-shadow: 0 10px 28px rgba(0,0,0,.36), 0 0 28px color-mix(in srgb, var(--yellow, #ebd38c) 20%, transparent), inset 0 1px rgba(255,255,255,.28), inset 0 -12px 24px rgba(31,13,43,.18);
}
.subscription-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -70% -35%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.34) 49%, transparent 58%);
  transform: translateX(-80%) rotate(5deg);
  animation: pass-cta-shimmer 4.2s ease-in-out 1.4s infinite;
}
.subscription-cta-emblem {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--yellow, #ebd38c) 68%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--yellow, #ebd38c) 12%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--yellow, #ebd38c) 25%, transparent);
  animation: pass-cta-emblem 2.8s ease-in-out infinite;
}
.subscription-cta-emblem img { width: 22px; height: 22px; object-fit: contain; }
.subscription-cta-copy { flex: 1 1 auto; text-align: left; font-weight: 700; }
.subscription-cta-spark {
  color: var(--yellow, #ebd38c);
  font-size: 16px;
  text-shadow: 0 0 10px currentColor;
  animation: pass-cta-spark 2.2s ease-in-out -.8s infinite;
}
.menu-actions button.subscription-cta.subscription-cta-active {
  border-color: var(--green, #b8dfae);
  color: var(--board-deep, #17251f);
  background: linear-gradient(110deg, color-mix(in srgb, var(--green, #b8dfae) 78%, #315d4c), color-mix(in srgb, var(--mint, #65e6c2) 76%, #397761));
  box-shadow: 0 0 20px color-mix(in srgb, var(--green, #b8dfae) 24%, transparent);
}
.subscription-cta.subscription-cta-active .subscription-cta-emblem { border-color: color-mix(in srgb, var(--board-deep, #17251f) 42%, transparent); background: rgba(255,255,255,.18); box-shadow: none; }
.subscription-cta.subscription-cta-active .subscription-cta-spark { color: var(--board-deep, #17251f); }
@keyframes pass-cta-shimmer { 0%, 24% { transform: translateX(-80%) rotate(5deg); opacity: 0; } 44% { opacity: .9; } 70%, 100% { transform: translateX(82%) rotate(5deg); opacity: 0; } }
@keyframes pass-cta-emblem { 0%, 100% { transform: scale(.96) rotate(-3deg); } 50% { transform: scale(1.07) rotate(3deg); } }
@keyframes pass-cta-spark { 0%, 100% { opacity: .35; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.18) rotate(18deg); } }
.billing-modal { background: radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--lilac, #c6a8ff) 14%, transparent), transparent 34%), radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--yellow, #ffd166) 12%, transparent), transparent 32%), radial-gradient(circle at 50% 86%, color-mix(in srgb, var(--mint, #65e6c2) 11%, transparent), transparent 38%), rgba(2, 8, 7, .95); }
.billing-card { --platform-accent: var(--yellow, #ffd166); width: min(100%, 560px); isolation: isolate; padding: 26px 30px 24px; overflow-x: hidden; border-color: color-mix(in srgb, var(--yellow, #ffd166) 72%, var(--chalk, #fff8df)); border-radius: 24px; background: radial-gradient(circle at 50% -5%, color-mix(in srgb, var(--yellow, #ffd166) 18%, transparent), transparent 37%), radial-gradient(circle at 95% 40%, color-mix(in srgb, var(--lilac, #c6a8ff) 9%, transparent), transparent 30%), linear-gradient(155deg, color-mix(in srgb, var(--board, #0d2d24) 92%, var(--lilac, #c6a8ff)), var(--board-deep, #04130f) 68%); box-shadow: 0 30px 92px rgba(0,0,0,.64), 0 0 48px color-mix(in srgb, var(--yellow, #ffd166) 11%, transparent), inset 0 0 58px color-mix(in srgb, var(--yellow, #ffd166) 6%, transparent); scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--yellow, #ffd166) 52%, transparent) transparent; }
.billing-card::-webkit-scrollbar { width: 5px; }
.billing-card::-webkit-scrollbar-track { background: transparent; }
.billing-card::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb, var(--yellow, #ffd166) 52%, transparent); }
.billing-card::after { content: ""; position: absolute; z-index: 0; inset: 7px; border: 1px solid color-mix(in srgb, var(--chalk, #fff8df) 16%, transparent); border-radius: 17px; pointer-events: none; }
.billing-card .platform-close { z-index: 10; }
.billing-hero { position: relative; z-index: 1; isolation: isolate; min-height: 188px; margin: -8px -10px 6px; padding-top: 4px; display: grid; justify-items: center; align-content: start; overflow: hidden; }
.billing-aurora { position: absolute; z-index: -1; inset: -38px 4% 0; pointer-events: none; }
.billing-aurora i { position: absolute; width: 130px; aspect-ratio: 1; border-radius: 50%; opacity: .2; }
.billing-aurora i:nth-child(1) { left: 8%; top: 12px; background: radial-gradient(circle, var(--lilac, #c6a8ff), transparent 68%); animation: billing-aurora-left 8s ease-in-out infinite alternate; }
.billing-aurora i:nth-child(2) { left: calc(50% - 76px); top: -26px; width: 152px; background: radial-gradient(circle, var(--yellow, #ffd166), transparent 70%); animation: billing-aurora-center 7s ease-in-out infinite alternate; }
.billing-aurora i:nth-child(3) { right: 6%; top: 18px; background: radial-gradient(circle, var(--mint, #65e6c2), transparent 68%); animation: billing-aurora-right 9s ease-in-out infinite alternate; }
.billing-emblem { position: relative; width: 104px; height: 104px; margin: 0 auto 4px; display: grid; place-items: center; color: var(--yellow, #ffd166); }
.billing-emblem::before, .billing-emblem::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.billing-emblem::before { inset: 12px; border: 1px solid color-mix(in srgb, var(--yellow, #ffd166) 54%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--chalk, #fff8df) 18%, transparent), color-mix(in srgb, var(--yellow, #ffd166) 8%, transparent) 48%, transparent 70%); box-shadow: 0 0 36px color-mix(in srgb, var(--yellow, #ffd166) 26%, transparent), inset 0 0 24px color-mix(in srgb, var(--yellow, #ffd166) 12%, transparent); }
.billing-emblem::after { inset: 2px; border: 1px dashed color-mix(in srgb, var(--chalk, #fff8df) 34%, transparent); }
.billing-emblem-core { position: relative; z-index: 3; width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--chalk, #fff8df) 44%, transparent); border-radius: 50%; background: linear-gradient(145deg, color-mix(in srgb, var(--yellow, #ffd166) 34%, var(--board-deep, #04130f)), color-mix(in srgb, var(--lilac, #c6a8ff) 17%, var(--board-deep, #04130f))); box-shadow: 0 8px 28px rgba(0,0,0,.36); }
.billing-emblem-core strong { font-size: 32px; line-height: 1; text-shadow: 0 0 13px currentColor; }
.billing-orbit { position: absolute; z-index: 2; inset: 4px; border: 1px solid color-mix(in srgb, var(--mint, #65e6c2) 46%, transparent); border-radius: 50%; }
.billing-orbit-b { inset: 15px -3px; border-color: color-mix(in srgb, var(--lilac, #c6a8ff) 45%, transparent); }
.billing-orbit b { position: absolute; width: 10px; height: 10px; border: 2px solid color-mix(in srgb, var(--chalk, #fff8df) 78%, transparent); border-radius: 50%; background: var(--yellow, #ffd166); box-shadow: 0 0 12px currentColor; }
.billing-orbit b:first-child { left: 7px; top: 9px; }
.billing-orbit b:last-child { right: 5px; bottom: 11px; background: var(--mint, #65e6c2); }
.billing-orbit-b b:first-child { left: 13px; top: -3px; background: var(--lilac, #c6a8ff); }
.billing-orbit-b b:last-child { right: 11px; bottom: -3px; background: var(--coral, #ff8f7d); }
.billing-emblem > em { position: absolute; z-index: 4; right: 4px; top: 7px; color: var(--chalk, #fff8df); font-style: normal; font-size: 16px; animation: billing-spark 2.8s ease-in-out infinite; }
.billing-modal:not([hidden]) .billing-emblem { animation: billing-emblem-in 620ms var(--ease-out-back, ease-out) 60ms both; }
.billing-orbit-a { animation: billing-emblem-orbit 8s linear infinite; }
.billing-orbit-b { animation: billing-emblem-orbit-reverse 11s linear infinite; }
.billing-eyebrow { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 3px !important; color: var(--yellow, #ffd166); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.billing-eyebrow span { color: var(--mint, #65e6c2); font-size: 9px; }
.billing-card h2 { margin: 0 42px 5px; color: var(--chalk, #fff8df); font-size: clamp(32px, 7vw, 43px); line-height: 1; letter-spacing: -.045em; text-shadow: 0 5px 24px rgba(0,0,0,.48); }
.billing-subtitle { margin: 7px 0 0 !important; color: color-mix(in srgb, var(--yellow, #ffd166) 88%, var(--chalk, #fff8df)); font-size: 17px; font-weight: 650; }
.billing-modal:not([hidden]) .billing-eyebrow { animation: billing-item-in 380ms ease-out 120ms both; }
.billing-modal:not([hidden]) .billing-hero h2 { animation: billing-item-in 430ms var(--ease-out-back, ease-out) 155ms both; }
.billing-modal:not([hidden]) .billing-subtitle { animation: billing-item-in 420ms ease-out 195ms both; }
.billing-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; max-width: 100%; margin: 9px auto 14px; padding: 0; color: var(--chalk, #fff8df); list-style: none; }
.billing-benefits li { --benefit-color: var(--yellow, #ffd166); position: relative; min-width: 0; min-height: 100px; display: grid; justify-items: center; align-content: center; gap: 8px; padding: 12px 8px 11px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--benefit-color) 35%, transparent); border-radius: 16px; background: radial-gradient(circle at 50% -14%, color-mix(in srgb, var(--benefit-color) 22%, transparent), transparent 65%), color-mix(in srgb, var(--benefit-color) 6%, rgba(4,19,15,.76)); text-align: center; font-size: 13px; font-weight: 650; line-height: 1.24; box-shadow: inset 0 1px color-mix(in srgb, var(--chalk, #fff8df) 8%, transparent); }
.billing-benefit-ads { --benefit-color: var(--coral, #ff8f7d) !important; }
.billing-benefit-hints { --benefit-color: var(--yellow, #ffd166) !important; }
.billing-benefit-restore { --benefit-color: var(--mint, #65e6c2) !important; }
.billing-benefit-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--benefit-color) 70%, var(--chalk, #fff8df)); border-radius: 50%; color: var(--board-deep, #04130f); background: var(--benefit-color); font-size: 18px; font-weight: 900; box-shadow: 0 0 20px color-mix(in srgb, var(--benefit-color) 24%, transparent); }
.billing-modal:not([hidden]) .billing-benefits li { animation: billing-item-in 440ms var(--ease-out-back, ease-out) both; }
.billing-modal:not([hidden]) .billing-benefits li:nth-child(1) { animation-delay: 215ms; }
.billing-modal:not([hidden]) .billing-benefits li:nth-child(2) { animation-delay: 255ms; }
.billing-modal:not([hidden]) .billing-benefits li:nth-child(3) { animation-delay: 295ms; }
.billing-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin: 13px 0 14px; }
.billing-plan { position: relative; width: 100% !important; min-height: 118px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label check" "price price" "period period"; gap: 2px 8px; align-content: center; padding: 15px 15px 13px !important; overflow: visible; border-color: color-mix(in srgb, var(--chalk, #fff8df) 24%, transparent); border-radius: 17px; background: linear-gradient(145deg, color-mix(in srgb, var(--chalk, #fff8df) 7%, transparent), color-mix(in srgb, var(--lilac, #c6a8ff) 5%, transparent)); text-align: start; box-shadow: inset 0 1px color-mix(in srgb, var(--chalk, #fff8df) 7%, transparent); }
.billing-plan > strong { grid-area: label; align-self: center; color: var(--chalk, #fff8df); font-size: 15px; }
.billing-plan-check { grid-area: check; width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--chalk, #fff8df) 26%, transparent); border-radius: 50%; color: transparent; font-size: 12px; }
.billing-price { grid-area: price; margin-top: 5px; color: var(--yellow, #ffd166); font-size: clamp(22px, 5vw, 29px); font-weight: 850; line-height: 1.04; letter-spacing: -.035em; }
.billing-period { grid-area: period; color: var(--chalk-soft, #b9c2b7); font-size: 12px; }
.billing-modal:not([hidden]) .billing-plans { animation: billing-item-in 460ms var(--ease-out-back, ease-out) 330ms both; }
.billing-plan.selected { border-color: color-mix(in srgb, var(--yellow, #ffd166) 86%, var(--chalk, #fff8df)); background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--mint, #65e6c2) 18%, transparent), transparent 43%), linear-gradient(145deg, color-mix(in srgb, var(--yellow, #ffd166) 20%, rgba(4,19,15,.86)), color-mix(in srgb, var(--lilac, #c6a8ff) 10%, rgba(4,19,15,.86))); box-shadow: 0 0 28px color-mix(in srgb, var(--yellow, #ffd166) 19%, transparent), inset 0 0 24px color-mix(in srgb, var(--yellow, #ffd166) 8%, transparent); }
.billing-plan.selected::after { content: ""; position: absolute; inset: -4px; border: 1px solid color-mix(in srgb, var(--yellow, #ffd166) 38%, transparent); border-radius: 20px; pointer-events: none; }
.billing-plan.selected .billing-plan-check { border-color: var(--yellow, #ffd166); color: var(--board-deep, #04130f); background: var(--yellow, #ffd166); box-shadow: 0 0 16px color-mix(in srgb, var(--yellow, #ffd166) 38%, transparent); }
.billing-badge {
  position: absolute;
  inset-block-start: -9px;
  inset-inline-end: 12px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--chalk, #fff8df) 46%, transparent);
  background: linear-gradient(105deg, var(--yellow, #ffd166), color-mix(in srgb, var(--coral, #ff8f7d) 32%, var(--yellow, #ffd166)));
  color: var(--board-deep, #17251f);
  font: 800 10px/1 var(--font-ui, system-ui, sans-serif);
  white-space: normal;
  overflow-wrap: anywhere;
}
.billing-premium-button { position: relative; width: 100% !important; min-height: 56px !important; justify-content: center; overflow: hidden; border-color: color-mix(in srgb, var(--chalk, #fff8df) 80%, var(--yellow, #ffd166)) !important; border-radius: 16px !important; background: linear-gradient(105deg, var(--mint, #65e6c2), var(--yellow, #ffd166) 58%, color-mix(in srgb, var(--coral, #ff8f7d) 36%, var(--yellow, #ffd166))) !important; color: var(--board-deep, #04130f) !important; font-size: 19px !important; font-weight: 850 !important; box-shadow: 0 13px 34px color-mix(in srgb, var(--yellow, #ffd166) 20%, transparent), inset 0 1px rgba(255,255,255,.42); }
.billing-premium-button::after { content: ""; position: absolute; inset: -40% auto -40% -40%; width: 28%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent); pointer-events: none; animation: billing-cta-shimmer 3.4s ease-in-out 1.2s infinite; }
.billing-premium-button > span, .billing-premium-button > b { position: relative; z-index: 1; }
.billing-premium-button > b { font-size: 23px; transition: transform 160ms ease-out; }
.billing-premium-button:hover:not(:disabled) > b { transform: translateX(4px); }
.billing-continue.busy::after { content: ""; position: relative; inset: auto; flex: 0 0 auto; width: 17px; height: 17px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; background: none; transform: none; animation: billing-spinner .72s linear infinite; }
.billing-disclosure { font: 12px/1.45 var(--font-ui, system-ui, sans-serif); color: var(--chalk-soft, #b9c2b7); }
.billing-status { min-height: 20px; color: var(--coral, #ee9a8b); }
.billing-status.success { color: var(--green, #b8dfae); }
.billing-footer { display: grid; grid-template-columns: 1fr; gap: 8px; }
.billing-footer button { width: 100%; min-width: 0; padding-inline: 6px; }
.billing-legal { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; color: var(--chalk-soft, #b9c2b7); }
.billing-legal button { min-height: 36px; padding: 4px 8px; border-color: transparent; background: transparent; color: inherit; font-size: 13px; text-decoration: underline; }
.billing-legal button::before { display: none; }
.billing-active-status { width: fit-content; display: flex; align-items: center; gap: 7px; margin: -2px auto 15px !important; padding: 8px 13px; border: 1px solid color-mix(in srgb, var(--chalk, #fff8df) 46%, transparent); border-radius: 999px; color: var(--board-deep, #04130f) !important; background: linear-gradient(105deg, var(--green, #b8dfae), var(--mint, #65e6c2)); box-shadow: 0 0 24px color-mix(in srgb, var(--mint, #65e6c2) 22%, transparent); font-weight: 850; }
.billing-modal.is-active:not([hidden]) .billing-active-status { animation: billing-active-in 620ms var(--ease-out-back, ease-out) 180ms both; }
.billing-active-plan { display: grid; gap: 7px; max-width: 100%; margin: 14px auto 12px; padding: 17px; border: 1px solid color-mix(in srgb, var(--green, #b8dfae) 54%, transparent); border-radius: 17px; text-align: center; background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--mint, #65e6c2) 17%, transparent), transparent 72%), color-mix(in srgb, var(--green, #b8dfae) 7%, transparent); box-shadow: inset 0 1px color-mix(in srgb, var(--chalk, #fff8df) 10%, transparent); }
.billing-active-plan span { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--chalk-soft, #b9c2b7); font-size: 11px; text-transform: uppercase; letter-spacing: .11em; }
.billing-active-plan span i { color: var(--yellow, #ffd166); font-style: normal; font-size: 8px; }
.billing-active-plan strong { color: var(--green, #b8dfae); font-size: 23px; }
.billing-manage { width: 100% !important; }
@keyframes billing-emblem-in { from { opacity: 0; transform: scale(.35) rotate(-16deg); } to { opacity: 1; transform: none; } }
@keyframes billing-emblem-orbit { to { transform: rotate(360deg); } }
@keyframes billing-emblem-orbit-reverse { to { transform: rotate(-360deg); } }
@keyframes billing-aurora-left { to { opacity: .34; transform: translate3d(26px, 12px, 0) scale(1.12); } }
@keyframes billing-aurora-center { to { opacity: .32; transform: translate3d(-12px, 15px, 0) scale(.9); } }
@keyframes billing-aurora-right { to { opacity: .35; transform: translate3d(-28px, -5px, 0) scale(1.08); } }
@keyframes billing-spark { 0%, 100% { opacity: .55; transform: scale(.72) rotate(0); } 50% { opacity: 1; transform: scale(1.18) rotate(18deg); } }
@keyframes billing-item-in { from { opacity: 0; transform: translateY(9px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes billing-cta-shimmer { 0%, 58% { opacity: 0; transform: translateX(0) skewX(-18deg); } 68% { opacity: 1; } 86%, 100% { opacity: 0; transform: translateX(560px) skewX(-18deg); } }
@keyframes billing-spinner { to { transform: rotate(360deg); } }
@keyframes billing-active-in { from { opacity: 0; transform: scale(.65); } to { opacity: 1; transform: none; } }
@keyframes auth-mark-in { from { opacity: 0; transform: scale(.35) rotate(-18deg); } to { opacity: 1; transform: none; } }
@keyframes auth-mark-orbit { to { transform: rotate(360deg); } }
@keyframes platform-item-in { from { opacity: 0; transform: translateY(9px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes avatar-preview-in { from { opacity: 0; transform: scale(.72) rotate(-5deg); } to { opacity: 1; transform: none; } }
@keyframes avatar-change { 0% { transform: scale(.82) rotate(-7deg); opacity: .76; } 58% { transform: scale(1.08) rotate(3deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes emoji-select { 0% { transform: scale(.72); } 65% { transform: translateY(-3px) scale(1.12); } 100% { transform: translateY(-2px); } }
@keyframes rate-emblem-in { from { opacity: 0; transform: scale(.3) rotate(-24deg); } to { opacity: 1; transform: none; } }
@keyframes rate-star-in { from { opacity: 0; transform: translateY(10px) scale(.55); } to { opacity: .38; transform: none; } }
@keyframes rate-star-select { 0% { transform: translateY(-2px) scale(.72); opacity: .55; } 62% { transform: translateY(-4px) scale(1.16); opacity: 1; } 100% { transform: translateY(-2px) scale(1.04); opacity: 1; } }
@keyframes rating-copy-change { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes platform-toast-in { from { opacity: 0; translate: -50% 10px; scale: .94; } to { opacity: 1; translate: -50% 0; scale: 1; } }
:root[data-performance-tier="low"] .billing-aurora i,
:root[data-performance-tier="low"] .billing-emblem > em,
:root[data-performance-tier="low"] .billing-premium-button::after { animation: none !important; }
:root[data-performance-tier="low"] .billing-orbit-a { animation-duration: 14s; }
:root[data-performance-tier="low"] .billing-orbit-b { animation-duration: 18s; }
:root[data-performance-tier="low"] .billing-continue.busy::after { animation-duration: 1.4s; }
:root[data-performance-tier="low"] .account-pill,
:root[data-performance-tier="low"] .auth-mark::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .billing-emblem, .billing-orbit, .billing-aurora i,
  .billing-emblem > em, .billing-premium-button::after,
  .billing-eyebrow, .billing-hero h2, .billing-subtitle,
  .billing-benefits li, .billing-plans, .billing-active-status,
  .billing-continue.busy::after,
  .account-pill, .auth-mark::before { animation: none !important; }
}
@media (max-width: 430px) {
  .billing-card, .platform-card { padding: 22px 16px; }
  .billing-card { padding-block: 18px; border-radius: 20px; }
  .billing-card .billing-hero { min-height: 166px; margin-top: -7px; }
  .billing-card .billing-emblem { width: 88px; height: 88px; }
  .billing-card .billing-emblem-core { width: 50px; height: 50px; }
  .billing-card .billing-emblem-core strong { font-size: 28px; }
  .billing-card h2 { margin-inline: 34px; font-size: clamp(28px, 9vw, 34px); overflow-wrap: anywhere; }
  .billing-card .billing-subtitle { margin-block: 8px; font-size: 16px; }
  .billing-card .billing-benefits { gap: 6px; margin-block: 8px; }
  .billing-card .billing-benefits li { min-height: 92px; padding-inline: 5px; font-size: 11px; }
  .billing-card .billing-benefit-icon { width: 30px; height: 30px; font-size: 16px; }
  .billing-card .billing-plans { gap: 8px; margin-block: 12px; }
  .billing-card .billing-plan { min-height: 100px; padding: 13px 9px 11px !important; }
  .billing-card .billing-price { font-size: 19px; }
  .billing-card .billing-disclosure { margin-block: 8px; }
  .billing-card .billing-status { margin-block: 4px; }
  .platform-card h2 { margin-inline: 40px; font-size: 36px; }
  .auth-card { padding: 26px 20px 20px; }
  .auth-card h2 { margin-inline: 30px; font-size: 38px; }
  .auth-mark { width: 52px; height: 52px; margin-bottom: 10px; }
  .profile-edit-card { padding-top: 22px; }
  .profile-edit-card h2 { font-size: 34px; }
  .profile-emoji-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .platform-email, .platform-actions, .platform-links, .platform-debug { grid-template-columns: 1fr; }
  .account-pill { top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); }
}
@media (max-height: 700px) {
  .platform-card { max-height: calc(100dvh - 20px); padding-block: 18px; }
  .platform-card h2 { margin-bottom: 12px; }
  .billing-hero { min-height: 164px; }
  .billing-emblem { width: 88px; height: 88px; }
  .billing-benefits li { min-height: 88px; }
  .billing-plans { margin-block: 12px; }
}
html[dir="rtl"] .platform-card,
html[dir="rtl"] .billing-plan { text-align: center; }
html[lang="ar"] body { font-family: "Noto Sans Arabic", "Noto Naskh Arabic", system-ui, sans-serif; }
html[lang="ja-JP"] body { font-family: "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif; }
html[lang="th-TH"] body { font-family: "Noto Sans Thai", system-ui, sans-serif; }
.complex-script-locale .brand,
.complex-script-locale .molecule-name { letter-spacing: normal; text-transform: none; }

/* Molecular Pass offer — image-led paywall. The generated artwork carries the
   value story; live DOM copy remains short, localisable and store-compliant. */
.billing-modal {
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) calc(max(10px, env(safe-area-inset-bottom)) + var(--native-banner-offset, 0px)) max(10px, env(safe-area-inset-left));
  overflow: hidden;
  background: radial-gradient(circle at 50% 10%, color-mix(in srgb, var(--yellow, #ffd166) 12%, transparent), transparent 32%), radial-gradient(circle at 12% 70%, color-mix(in srgb, var(--coral, #ff8177) 9%, transparent), transparent 28%), radial-gradient(circle at 88% 68%, color-mix(in srgb, var(--lilac, #c6a8ff) 10%, transparent), transparent 30%), rgba(1,8,6,.97);
}
.billing-modal::before { content: ""; position: fixed; inset: 5%; pointer-events: none; opacity: .6; background: radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--yellow, #ffd166) 34%, transparent) 0 2px, transparent 3px), radial-gradient(circle at 91% 28%, color-mix(in srgb, var(--mint, #65e6c2) 28%, transparent) 0 2px, transparent 3px), radial-gradient(circle at 16% 82%, color-mix(in srgb, var(--lilac, #c6a8ff) 30%, transparent) 0 1px, transparent 2px), radial-gradient(circle at 84% 78%, color-mix(in srgb, var(--coral, #ff8177) 25%, transparent) 0 1px, transparent 2px); }
.billing-card {
  --platform-accent: var(--yellow, #ffd166);
  width: min(100%, 440px);
  max-height: calc(100dvh - 20px - var(--native-banner-offset, 0px));
  padding: 17px 18px 15px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 2px solid transparent;
  border-radius: 25px;
  background: radial-gradient(circle at 50% -8%, color-mix(in srgb, var(--yellow, #ffd166) 19%, transparent), transparent 34%), radial-gradient(circle at 105% 38%, color-mix(in srgb, var(--lilac, #c6a8ff) 11%, transparent), transparent 30%), radial-gradient(circle at -8% 72%, color-mix(in srgb, var(--mint, #65e6c2) 8%, transparent), transparent 30%), linear-gradient(160deg, #163b30, #071d17 54%, #03110d) padding-box, linear-gradient(125deg, #fff3b0 0%, #b77b27 24%, #ffe398 45%, #9a78d2 67%, #65e6c2 82%, #f0c562 100%) border-box;
  box-shadow: 0 28px 90px rgba(0,0,0,.74), 0 0 56px color-mix(in srgb, var(--yellow, #ffd166) 15%, transparent), 0 0 18px color-mix(in srgb, var(--lilac, #c6a8ff) 8%, transparent), inset 0 0 50px color-mix(in srgb, var(--mint, #65e6c2) 5%, transparent);
}
.billing-modal:not(.is-active) .billing-card { min-height: min(720px, calc(100dvh - 36px - var(--native-banner-offset, 0px))); display: flex; flex-direction: column; }
.billing-card::after { inset: 6px; border-color: color-mix(in srgb, var(--yellow, #ffd166) 33%, var(--chalk, #fff8df)); border-radius: 18px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chalk, #fff8df) 7%, transparent), 0 0 22px color-mix(in srgb, var(--yellow, #ffd166) 7%, transparent); }
.billing-card .platform-close { top: 11px; right: 11px; width: 38px !important; height: 38px; min-height: 38px !important; z-index: 20; border-color: color-mix(in srgb, var(--chalk, #fff8df) 25%, transparent); background: rgba(2,12,9,.62); color: var(--chalk-soft, #b9c2b7); }
.billing-hero { min-height: 325px; margin: -1px 0 5px; padding: 0; overflow: visible; display: grid; justify-items: stretch; align-content: start; }
.billing-card .billing-hero h2 { position: relative; z-index: 8; margin: 0 40px; color: var(--chalk, #fff8df); font-family: var(--font-accent, cursive); font-size: clamp(38px, 11vw, 50px); font-weight: 400; line-height: .82; letter-spacing: 0; text-align: center; text-shadow: 0 5px 24px rgba(0,0,0,.58), 0 0 18px color-mix(in srgb, var(--yellow, #ffd166) 12%, transparent); }
.billing-pass-scene { position: relative; height: 284px; margin-top: 1px; isolation: isolate; }
.billing-scene-glow { position: absolute; z-index: -1; left: 50%; top: 43%; width: 205px; height: 142px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--yellow, #ffd166) 20%, transparent), color-mix(in srgb, var(--mint, #65e6c2) 9%, transparent) 44%, transparent 72%); filter: blur(7px); }
.billing-pass-core { position: absolute; z-index: 3; left: 50%; top: -5px; width: 205px; height: 220px; translate: -50% 0; object-fit: contain; filter: drop-shadow(0 12px 21px rgba(0,0,0,.48)) drop-shadow(0 0 21px color-mix(in srgb, var(--yellow, #ffd166) 28%, transparent)); pointer-events: none; user-select: none; }
.billing-benefits { position: absolute; z-index: 5; inset: 0; display: block; max-width: none; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.billing-benefits > span { position: absolute; width: 90px; min-height: 0; display: block; }
.billing-benefits > span img { width: 90px; height: 90px; object-fit: contain; filter: drop-shadow(0 8px 15px rgba(0,0,0,.5)); }
.billing-benefit-ads { left: 3px; top: 66px; }
.billing-benefit-hints { right: 18px; top: 63px; }
.billing-benefit-ads img { transform: rotate(-5deg); }.billing-benefit-hints img { transform: rotate(5deg); }
.billing-benefit-cosmetics, .billing-benefit-wheel { z-index: 5; width: 76px !important; top: 172px; }
.billing-benefit-cosmetics img, .billing-benefit-wheel img { width: 76px !important; height: 76px !important; }
.billing-benefit-cosmetics { left: 31px; animation: billing-benefit-float-b 5.3s ease-in-out -.7s infinite; }.billing-benefit-cosmetics img { transform: rotate(-5deg); }
.billing-benefit-wheel { right: 23px; animation: billing-benefit-float-a 5s ease-in-out -1.8s infinite; }.billing-benefit-wheel img { transform: rotate(5deg); }
.billing-orbit-label { --label-color: var(--yellow, #ffd166); position: absolute; z-index: 7; left: 50%; top: 76px; min-height: 28px; display: flex; align-items: center; gap: 5px; padding: 4px 8px 4px 5px; translate: -50% 0; border: 1px solid color-mix(in srgb, var(--label-color) 48%, var(--chalk, #fff8df)); border-radius: 999px; background: linear-gradient(105deg, color-mix(in srgb, var(--label-color) 12%, rgba(4,17,13,.94)), rgba(3,13,10,.9)); color: var(--chalk, #fff8df); box-shadow: 0 6px 17px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.09); font-size: 10px; font-weight: 820; line-height: 1.05; white-space: nowrap; pointer-events: none; }
.billing-orbit-label i { width: 19px; height: 19px; display: grid; place-items: center; flex: 0 0 19px; border-radius: 50%; background: color-mix(in srgb, var(--label-color) 16%, transparent); color: var(--label-color); font-size: 12px; font-weight: 900; font-style: normal; }.billing-orbit-label em { font-style: normal; }
.billing-label-ads { --label-color: var(--coral, #ff8177); }.billing-label-hints { --label-color: var(--mint, #65e6c2); }.billing-label-cosmetics { --label-color: var(--lilac, #c6a8ff); top: 64px; }.billing-label-wheel { --label-color: var(--yellow, #ffd166); top: 64px; }
.billing-scene-spark { position: absolute; z-index: 6; color: var(--yellow, #ffd166); text-shadow: 0 0 9px currentColor; pointer-events: none; animation: billing-scene-twinkle 2.7s ease-in-out infinite; }
.billing-scene-spark.spark-a { left: 24%; top: 23px; font-size: 13px; }.billing-scene-spark.spark-b { right: 23%; top: 124px; color: var(--lilac, #c6a8ff); font-size: 10px; animation-delay: -.9s; }.billing-scene-spark.spark-c { left: 22%; top: 144px; color: var(--mint, #65e6c2); font-size: 18px; animation-delay: -1.6s; }
.billing-perk-list { position: relative; z-index: 7; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; list-style: none; }
.billing-perk-list li { --perk-color: var(--yellow, #ffd166); min-width: 0; min-height: 35px; display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--perk-color) 30%, transparent); border-radius: 11px; background: linear-gradient(100deg, color-mix(in srgb, var(--perk-color) 8%, rgba(255,255,255,.02)), rgba(3,15,11,.62)); }
.billing-perk-list li:nth-child(1) { --perk-color: var(--coral, #ff8177); }.billing-perk-list li:nth-child(2) { --perk-color: var(--mint, #65e6c2); }.billing-perk-list li:nth-child(3) { --perk-color: var(--lilac, #c6a8ff); }.billing-perk-list li:nth-child(4) { --perk-color: var(--yellow, #ffd166); }
.billing-perk-list i { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--perk-color) 55%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--perk-color) 11%, transparent); color: var(--perk-color); font-size: 14px; font-weight: 900; font-style: normal; line-height: 1; }
.billing-perk-list span { min-width: 0; color: var(--chalk, #fff8df); font-size: 11px; font-weight: 750; line-height: 1.12; text-align: left; }
.billing-plans { position: relative; z-index: 7; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 8px 0 12px; }
.billing-card .billing-plan { min-height: 92px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label price" "period price"; column-gap: 12px; align-content: center; padding: 13px 52px 12px 58px !important; overflow: hidden; border: 1px solid color-mix(in srgb, var(--chalk, #fff8df) 30%, transparent); border-radius: 18px; background: radial-gradient(circle at 10% 18%, color-mix(in srgb, var(--lilac, #c6a8ff) 10%, transparent), transparent 34%), linear-gradient(120deg, rgba(13,39,31,.98), rgba(3,17,13,.96)); box-shadow: inset 0 1px rgba(255,255,255,.11), inset 0 -1px rgba(0,0,0,.45), 0 9px 22px rgba(0,0,0,.26); }
.billing-plan::before { content: "✦"; position: absolute; left: 15px; top: 50%; width: 29px; height: 38px; display: grid; place-items: center; translate: 0 -50%; opacity: 1; border: 1px solid color-mix(in srgb, var(--chalk, #fff8df) 30%, transparent); border-radius: 50% 50% 46% 54% / 58% 48% 52% 42%; background: radial-gradient(circle at 35% 27%, rgba(255,255,255,.34), transparent 18%), linear-gradient(145deg, color-mix(in srgb, var(--lilac, #c6a8ff) 34%, rgba(10,32,25,.96)), rgba(3,15,11,.96)); color: var(--lilac, #c6a8ff); font-size: 15px; text-shadow: 0 0 10px currentColor; box-shadow: inset 0 0 10px rgba(255,255,255,.08), 0 0 15px rgba(0,0,0,.35); }
.billing-plan > strong { align-self: end; color: var(--chalk, #fff8df); font-family: var(--font-ui, system-ui, sans-serif); font-size: clamp(20px, 5.6vw, 24px); font-weight: 860; line-height: 1; letter-spacing: .045em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 2px 9px rgba(0,0,0,.5); }.billing-plan-check { position: absolute; right: 14px; top: 50%; width: 29px; height: 29px; align-self: auto; translate: 0 -50%; border-width: 2px; border-color: color-mix(in srgb, var(--chalk, #fff8df) 30%, transparent); background: rgba(2,13,10,.55); font-size: 15px; }.billing-card .billing-price { align-self: center; margin-top: 0; color: color-mix(in srgb, var(--yellow, #ffd166) 92%, white); font-size: clamp(30px, 8.2vw, 36px); font-weight: 900; line-height: .95; letter-spacing: -.045em; text-align: right; text-shadow: 0 3px 13px rgba(0,0,0,.55), 0 0 15px color-mix(in srgb, var(--yellow, #ffd166) 12%, transparent); }.billing-period { align-self: start; width: max-content; margin-top: 6px; padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--chalk, #fff8df) 16%, transparent); border-radius: 999px; background: rgba(1,11,8,.42); color: color-mix(in srgb, var(--chalk-soft, #b9c2b7) 88%, white); font-size: 12px; font-weight: 750; line-height: 1.1; letter-spacing: .03em; }
.billing-plan.selected { border-color: color-mix(in srgb, var(--yellow, #ffd166) 82%, var(--chalk, #fff8df)); background: radial-gradient(circle at 10% 18%, color-mix(in srgb, var(--yellow, #ffd166) 20%, transparent), transparent 36%), radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--mint, #65e6c2) 13%, transparent), transparent 35%), linear-gradient(120deg, rgba(23,48,36,.99), rgba(5,23,17,.98)); box-shadow: inset 0 1px rgba(255,255,255,.16), inset 0 0 28px color-mix(in srgb, var(--yellow, #ffd166) 7%, transparent), 0 10px 26px rgba(0,0,0,.32); }
.billing-plan.selected::before { border-color: color-mix(in srgb, var(--yellow, #ffd166) 82%, white); background: radial-gradient(circle at 35% 27%, white, transparent 14%), linear-gradient(145deg, color-mix(in srgb, var(--yellow, #ffd166) 88%, white), color-mix(in srgb, var(--coral, #ff8177) 24%, var(--yellow, #ffd166))); color: var(--board-deep, #04130f); text-shadow: none; box-shadow: 0 0 20px color-mix(in srgb, var(--yellow, #ffd166) 25%, transparent); }
.billing-plan.selected::after { inset: 4px; border-color: color-mix(in srgb, var(--yellow, #ffd166) 22%, transparent); border-radius: 14px; }
.billing-plan.selected .billing-plan-check { border-color: color-mix(in srgb, var(--yellow, #ffd166) 90%, white); color: var(--board-deep, #04130f); background: linear-gradient(145deg, color-mix(in srgb, var(--yellow, #ffd166) 86%, white), var(--yellow, #ffd166)); box-shadow: 0 0 18px color-mix(in srgb, var(--yellow, #ffd166) 24%, transparent); }
.billing-plan:focus-visible { outline: 2px solid color-mix(in srgb, var(--yellow, #ffd166) 82%, white); outline-offset: 2px; }
.billing-badge { inset-block-start: 6px; inset-inline-end: 48px; padding: 4px 8px; max-width: calc(100% - 106px); border-color: color-mix(in srgb, var(--yellow, #ffd166) 56%, transparent); background: rgba(4,20,15,.92); color: var(--yellow, #ffd166); font-size: 9px; letter-spacing: .075em; box-shadow: 0 4px 13px rgba(0,0,0,.35); }
.billing-card .billing-plan { min-height: 104px; grid-template-columns: minmax(0, 1fr) minmax(94px, 42%); grid-template-areas: "label price" "badge price" "period price"; row-gap: 5px; padding: 12px 52px 12px 58px !important; }
.billing-plan > strong { align-self: end; min-width: 0; overflow: hidden; font-size: clamp(17px, 5vw, 22px); text-overflow: ellipsis; }
.billing-card .billing-price { min-width: 0; max-width: 100%; overflow: hidden; font-size: clamp(22px, 6.3vw, 30px); overflow-wrap: normal; text-overflow: clip; white-space: nowrap; word-break: normal; }
.billing-card .billing-price.price-compact { font-size: clamp(18px, 5vw, 24px); letter-spacing: -.055em; }
.billing-card .billing-price.price-tight { font-size: clamp(15px, 4.2vw, 20px); letter-spacing: -.06em; }
.billing-badge { position: static; grid-area: badge; justify-self: start; inset: auto; max-width: 100%; padding: 4px 9px; border-color: color-mix(in srgb, var(--yellow, #ffd166) 75%, white); background: linear-gradient(105deg, var(--yellow, #ffd166), color-mix(in srgb, var(--coral, #ff8177) 28%, var(--yellow, #ffd166))); color: var(--board-deep, #071a15); font-size: 10px; font-weight: 900; letter-spacing: .07em; box-shadow: 0 4px 14px color-mix(in srgb, var(--yellow, #ffd166) 18%, transparent); }
.billing-period { grid-area: period; }
.billing-plan.price-loading .billing-price { display: none; }
.billing-plan.price-loading { grid-template-columns: minmax(0, 1fr) 34px; }
.billing-card > button.billing-premium-button { margin: 0; }
.billing-premium-button { min-height: 59px !important; border-radius: 16px !important; background: linear-gradient(105deg, color-mix(in srgb, var(--mint, #65e6c2) 82%, var(--chalk, #fff8df)), var(--yellow, #ffd166) 58%, color-mix(in srgb, var(--coral, #ff8177) 28%, var(--yellow, #ffd166))) !important; font-size: 18px !important; box-shadow: 0 12px 30px color-mix(in srgb, var(--yellow, #ffd166) 20%, transparent), inset 0 1px rgba(255,255,255,.48); }
.billing-disclosure { margin: 9px 3px 4px !important; color: color-mix(in srgb, var(--chalk-soft, #b9c2b7) 82%, transparent); font-size: 9px; line-height: 1.3; text-align: center; }
.billing-status { min-height: 0; margin: 4px 0 !important; font-size: 11px; line-height: 1.25; }.billing-status:empty { display: none; }
.billing-footer { margin-top: auto; display: flex; justify-content: center; }.billing-footer button { width: auto; min-height: 32px; margin: 0 !important; padding: 3px 8px; border-color: transparent; background: transparent; color: var(--chalk-soft, #b9c2b7); font-size: 11px; text-decoration: underline; }
.billing-footer button::before { display: none; }
.billing-legal { gap: 5px; margin-top: 0; }.billing-legal button { min-height: 27px; padding: 2px 6px; font-size: 10px; }
.billing-active-status { position: relative; z-index: 7; margin: -3px auto 9px !important; padding: 7px 12px; font-size: 12px; }.billing-active-plan { margin: 6px auto 10px; padding: 13px; }.billing-active-plan strong { font-size: 20px; }.billing-manage { margin-top: 4px !important; }
.billing-modal.is-busy .billing-pass-core, .billing-modal.is-busy .billing-benefits > span, .billing-modal.is-busy .billing-scene-spark, .billing-modal.is-busy .billing-plans { animation: none !important; }
@keyframes billing-pass-core-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1deg); } }
@keyframes billing-benefit-float-a { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes billing-benefit-float-b { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 3px; } }
@keyframes billing-label-drift-a { 0%, 100% { translate: 0 0; } 50% { translate: 2px -3px; } }
@keyframes billing-label-drift-b { 0%, 100% { translate: 0 0; } 50% { translate: -2px 3px; } }
@keyframes billing-scene-twinkle { 0%, 100% { opacity: .35; scale: .72; rotate: 0deg; } 50% { opacity: 1; scale: 1.15; rotate: 18deg; } }
.billing-modal:not([hidden]):not(.is-busy) .billing-pass-core { animation: billing-pass-core-float 5.2s ease-in-out 700ms infinite; }
.billing-modal:not([hidden]):not(.is-busy) .billing-benefit-ads { animation: billing-benefit-float-a 4.6s ease-in-out 300ms infinite; }
.billing-modal:not([hidden]):not(.is-busy) .billing-benefit-hints { animation: billing-benefit-float-b 5s ease-in-out 500ms infinite; }
@media (max-width: 370px) {
  .billing-card { padding-inline: 13px; }
  .billing-card .billing-hero h2 { font-size: 39px; }
  .billing-pass-core { width: 158px; height: 171px; }
  .billing-benefits > span { width: 75px; }.billing-benefits > span img { width: 75px; height: 75px; }
  .billing-benefit-cosmetics { left: 28px; }.billing-benefit-wheel { right: 20px; }
  .billing-orbit-label { padding-right: 6px; font-size: 9px; }
  .billing-card .billing-plan { padding: 12px 45px 11px 50px !important; }.billing-plan::before { left: 12px; width: 27px; }.billing-plan-check { right: 10px; }.billing-plan > strong { font-size: 17px; }.billing-card .billing-price { font-size: 24px; }.billing-card .billing-price.price-compact { font-size: 18px; }.billing-card .billing-price.price-tight { font-size: 15px; }.billing-period { font-size: 11px; }
}
@media (max-height: 700px) {
  .billing-card { padding-block: 12px; }.billing-modal:not(.is-active) .billing-card { min-height: calc(100dvh - 20px - var(--native-banner-offset, 0px)); }
  .billing-hero { min-height: 215px; }.billing-pass-scene { height: 176px; }.billing-pass-core { width: 140px; height: 150px; }.billing-benefits > span { top: 34px; }.billing-benefits > span img { width: 70px; height: 70px; }.billing-orbit-label { top: 58px; }
  .billing-benefit-cosmetics, .billing-benefit-wheel { top: 91px; width: 54px !important; }.billing-benefit-cosmetics img, .billing-benefit-wheel img { width: 54px !important; height: 54px !important; }.billing-benefit-cosmetics .billing-orbit-label, .billing-benefit-wheel .billing-orbit-label { top: 44px; }
  .billing-plan { min-height: 80px; }.billing-plans { margin-bottom: 8px; }.billing-premium-button { min-height: 53px !important; }.billing-disclosure { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .billing-pass-core, .billing-benefits > span, .billing-scene-spark { animation: none !important; }
}