html.gp-core-ready.gp-motion-reduced *,
html.gp-core-ready.gp-motion-reduced *::before,
html.gp-core-ready.gp-motion-reduced *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}

/* Final layout safety net: keep horizontal insets symmetric and avoid right-edge clipping. */
html body .topbar,
html body #ptr-content {
  padding-left: var(--app-gutter-x, 12px) !important;
  padding-right: var(--app-gutter-x, 12px) !important;
}

html body .topbar {
  align-items: center !important;
  justify-content: flex-end !important;
  margin: 0 0 var(--gp-ui-gap, 8px) !important;
  padding-top: var(--gp-ui-gap, 8px) !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Main-nav screens must never introduce horizontal clipping or side-scroll. */
html.gp-main-nav-enabled body main,
html.gp-main-nav-enabled body #gp-stars-root,
html.gp-main-nav-enabled body #gp-profile-root,
html.gp-main-nav-enabled body .gp-profile-root,
html.gp-main-nav-enabled body .wallet-menu-screen {
  overflow-x: hidden !important;
}

html:not(.public-mode) body .topbar,
html:not(.public-mode) body #balance-widget {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html.gp-main-nav-enabled body .topbar {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin: 0 0 var(--gp-ui-gap, 8px) !important;
  padding-top: var(--gp-ui-gap, 8px) !important;
  padding-bottom: 0 !important;
  padding-left: var(--app-gutter-x, 12px) !important;
  padding-right: var(--app-gutter-x, 12px) !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

html.tg-webapp body .topbar:not(.gp-profile-topbar),
html.tg-webapp.tg-phone body .topbar:not(.gp-profile-topbar),
html.tg-webapp-ios body .topbar:not(.gp-profile-topbar) {
  padding-top: var(--gp-ui-gap, 8px) !important;
  margin-bottom: var(--gp-ui-gap, 8px) !important;
}

html.gp-main-nav-enabled body #ptr-content {
  padding-top: 0 !important;
}

/* Guard against row-stretch bugs on some WebViews where cards/buttons grow to viewport height. */
html body #gift-grid,
html body #gift-grid.gift-grid,
html body .gift-grid {
  align-content: start !important;
  align-items: start !important;
  grid-auto-rows: max-content !important;
}

html body #gift-grid .gift-card,
html body #gift-grid.gift-grid .gift-card,
html body .gift-grid .gift-card {
  height: auto !important;
  min-height: 0 !important;
}

html body #gift-grid .gift-image-wrap,
html body #gift-grid.gift-grid .gift-image-wrap,
html body .gift-grid .gift-image-wrap {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
}

/* Same row-stretch bug affects .filters-bar and .advanced-row grids. */
html body .filters-bar,
html body #sticky-filters .filters-bar,
html body .sticky-filters .filters-bar {
  align-content: start !important;
  align-items: start !important;
  grid-auto-rows: max-content !important;
}

html body .filters-bar .filter-btn,
html body #sticky-filters .filters-bar .filter-btn,
html body .sticky-filters .filters-bar .filter-btn {
  max-height: 56px !important;
}

html body #advanced-panel .advanced-row,
html body #sticky-filters #advanced-panel .advanced-row,
html body .sticky-filters #advanced-panel .advanced-row {
  align-content: start !important;
  align-items: start !important;
  grid-auto-rows: max-content !important;
}

/*
 * Safari/WebView can corrupt promoted grid/filter layers and paint them as
 * stretched dark blocks. Keep market cards and sticky filter controls in the
 * normal paint path so the layout stays deterministic across phones, tablets,
 * and desktop WebViews.
 */
html body #gift-grid,
html body #gift-grid.gift-grid,
html body .gift-grid {
  contain: none !important;
}

html body #gift-grid .gift-card,
html body #gift-grid.gift-grid .gift-card,
html body .gift-grid .gift-card {
  contain: none !important;
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  will-change: auto !important;
}

html body #sticky-filters,
html body .sticky-filters,
html body #sticky-filters .filters-bar,
html body .sticky-filters .filters-bar,
html body #sticky-filters .filters-bar .filter-btn,
html body .sticky-filters .filters-bar .filter-btn,
html body #sticky-filters .filters-bar .filter-label,
html body .sticky-filters .filters-bar .filter-label,
html body #sticky-filters .filters-bar .filter-value,
html body .sticky-filters .filters-bar .filter-value,
html body #sticky-filters .filters-bar .filter-value-count,
html body .sticky-filters .filters-bar .filter-value-count,
html body #sticky-filters .filters-bar .filter-value-pill,
html body .sticky-filters .filters-bar .filter-value-pill,
html body #sticky-filters .filters-bar .filter-value-text,
html body .sticky-filters .filters-bar .filter-value-text,
html body #advanced-panel,
html body #sticky-filters #advanced-panel,
html body .sticky-filters #advanced-panel,
html body #advanced-panel .advanced-row,
html body #sticky-filters #advanced-panel .advanced-row,
html body .sticky-filters #advanced-panel .advanced-row,
html body #advanced-panel .advanced-row .filter-btn,
html body #sticky-filters #advanced-panel .advanced-row .filter-btn,
html body .sticky-filters #advanced-panel .advanced-row .filter-btn,
html body #advanced-panel .advanced-row .advanced-search,
html body #sticky-filters #advanced-panel .advanced-row .advanced-search,
html body .sticky-filters #advanced-panel .advanced-row .advanced-search,
html body #advanced-trigger,
html body #aux-trigger,
html body #inline-reset-btn {
  transform: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  will-change: auto !important;
}

html body #sticky-filters,
html body .sticky-filters,
html body #advanced-panel,
html body #sticky-filters #advanced-panel,
html body .sticky-filters #advanced-panel {
  contain: none !important;
}

html body #advanced-panel.advanced-panel.open #symbols-trigger,
html body #advanced-panel.advanced-panel.closing #symbols-trigger,
html body #advanced-panel.advanced-panel:not(.open):not(.closing) #symbols-trigger,
html body #sticky-filters #advanced-panel.advanced-panel.open #symbols-trigger,
html body #sticky-filters #advanced-panel.advanced-panel.closing #symbols-trigger,
html body #sticky-filters #advanced-panel.advanced-panel:not(.open):not(.closing) #symbols-trigger,
html body .sticky-filters #advanced-panel.advanced-panel.open #symbols-trigger,
html body .sticky-filters #advanced-panel.advanced-panel.closing #symbols-trigger,
html body .sticky-filters #advanced-panel.advanced-panel:not(.open):not(.closing) #symbols-trigger,
html body #sticky-filters #advanced-panel.advanced-panel.open .advanced-row,
html body #sticky-filters #advanced-panel.advanced-panel.closing .advanced-row,
html body .sticky-filters #advanced-panel.advanced-panel.open .advanced-row,
html body .sticky-filters #advanced-panel.advanced-panel.closing .advanced-row {
  transform: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  will-change: auto !important;
}

html body #sticky-filters .filters-bar .filter-btn,
html body .sticky-filters .filters-bar .filter-btn,
html body #advanced-panel .advanced-row .filter-btn,
html body #sticky-filters #advanced-panel .advanced-row .filter-btn,
html body .sticky-filters #advanced-panel .advanced-row .filter-btn,
html body #advanced-panel .advanced-row .advanced-search,
html body #sticky-filters #advanced-panel .advanced-row .advanced-search,
html body .sticky-filters #advanced-panel .advanced-row .advanced-search {
  align-self: start !important;
}

:root {
  --gp-top-dock-gap: 8px;
  --gp-top-dock-top: calc(max(var(--tg-sticky-top, 0px), 0px) + var(--gp-top-dock-gap));
  --gp-top-dock-bottom-gap: var(--gp-ui-gap, 8px);
  --gp-top-dock-total-offset: calc(
    var(--gp-top-dock-top) + var(--gp-balance-widget-height) + var(--gp-top-dock-bottom-gap)
  );
  --gp-balance-topbar-top: calc(
    max(var(--gp-top-safe-offset, var(--tg-sticky-top, 0px)), 0px) + var(--gp-ui-gap, 8px)
  );
  --gp-balance-control-size: 24px;
  --gp-balance-widget-height: 34px;
  --gp-balance-widget-max-width: 162px;
  --gp-balance-pill-pad-x: 5px;
  --gp-balance-pill-gap: 4px;
  --gp-balance-amount-font-size: 16px;
  --gp-balance-amount-lift: 0px;
  --gp-balance-rub-font-size: 14px;
  --gp-balance-rub-font-weight: 700;
  --gp-balance-plus-glyph-size: 11px;
  --gp-balance-widget-right: 0px;
  --gp-balance-pill-bg: rgba(42, 174, 93, 0.24);
  --gp-balance-pill-circle-bg: #2aae5d;
  --gp-balance-pill-circle-ink: #1a1a1a;
}

@media (max-width: 380px) {
  :root {
    --gp-balance-control-size: 24px;
    --gp-balance-widget-height: 34px;
    --gp-balance-widget-max-width: 154px;
    --gp-balance-pill-pad-x: 5px;
    --gp-balance-pill-gap: 4px;
    --gp-balance-amount-font-size: 16px;
    --gp-balance-rub-font-size: 13px;
    --gp-balance-plus-glyph-size: 10px;
  }
}

html body .topbar,
html body #balance-widget,
html body .topbar .balance-widget,
html body #gp-stars-root .gp-stars-balance-row .balance-widget,
html body #gp-profile-root .gp-profile-topbar .balance-widget,
html body #gp-profile-root .gp-profile-topbar .gp-profile-balance-widget,
html body .balance-widget,
html body .gp-profile-balance-widget {
  overflow: visible !important;
}

html body #balance-widget,
html body .topbar #balance-widget,
html body .topbar .balance-widget,
html body #gp-stars-root .gp-stars-balance-row .balance-widget,
html body #gp-profile-root .gp-profile-topbar .balance-widget,
html body #gp-profile-root .gp-profile-topbar .gp-profile-balance-widget,
html body .balance-widget,
html body .gp-profile-balance-widget {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  height: var(--gp-balance-widget-height) !important;
  min-height: var(--gp-balance-widget-height) !important;
  max-height: var(--gp-balance-widget-height) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  gap: 0 !important;
  margin-left: auto !important;
  margin-right: var(--gp-balance-widget-right) !important;
  max-width: min(calc(100vw - (var(--app-gutter-x, 12px) * 2)), var(--gp-balance-widget-max-width, 162px)) !important;
  min-width: 0 !important;
  width: auto !important;
  flex: 0 1 auto !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transform-origin: right center !important;
}

html.tg-webapp body #balance-widget,
html.tg-webapp body .topbar #balance-widget,
html.tg-webapp body #gp-stars-root .gp-stars-balance-row .balance-widget,
html.tg-webapp body #gp-profile-root .gp-profile-topbar .balance-widget,
html.tg-webapp body #gp-profile-root .gp-profile-topbar .gp-profile-balance-widget {
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

html.gp-main-nav-enabled body #balance-widget,
html.gp-main-nav-enabled body #balance-pill {
  position: relative !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
}

html.gp-main-nav-enabled.gp-stars-open body main,
html.gp-profile-open body main {
  overflow-y: hidden !important;
}

html.gp-main-nav-enabled.gp-stars-open body .app,
html.gp-main-nav-enabled.gp-stars-open body #scroll-top-btn,
html.gp-main-nav-enabled.gp-stars-open body #gp-smooth-top-btn,
body.gp-stars-open .app,
body.gp-stars-open #scroll-top-btn,
body.gp-stars-open #gp-smooth-top-btn {
  pointer-events: none !important;
}

html.gp-main-nav-enabled.gp-stars-open body #gp-stars-root,
body.gp-stars-open #gp-stars-root {
  pointer-events: auto !important;
}

html.gp-main-nav-enabled.gp-stars-open body #balance-widget,
html.gp-main-nav-enabled.gp-stars-open body #balance-pill {
  margin-top: 0 !important;
  transform: none !important;
}

html body #balance-pill,
html body .topbar #balance-pill,
html body .balance-widget .balance-pill,
html body .balance-pill {
  display: inline-flex !important;
  gap: var(--gp-balance-pill-gap) !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--gp-balance-widget-height) !important;
  min-height: var(--gp-balance-widget-height) !important;
  max-height: var(--gp-balance-widget-height) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: auto !important;
  flex: 0 1 auto !important;
  padding: 0 var(--gp-balance-pill-pad-x) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--gp-balance-pill-bg) !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  text-decoration: none !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transform: none !important;
  overflow: visible !important;
  touch-action: manipulation !important;
}

html body #balance-pill > *,
html body .topbar #balance-pill > *,
html body .balance-widget .balance-pill > *,
html body .balance-pill > * {
  pointer-events: none !important;
}

html body #balance-pill .balance-pill-icon,
html body .topbar #balance-pill .balance-pill-icon,
html body .balance-widget .balance-pill .balance-pill-icon,
html body .balance-pill .balance-pill-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: var(--gp-balance-control-size) !important;
  min-width: var(--gp-balance-control-size) !important;
  max-width: var(--gp-balance-control-size) !important;
  height: var(--gp-balance-control-size) !important;
  min-height: var(--gp-balance-control-size) !important;
  max-height: var(--gp-balance-control-size) !important;
  flex: 0 0 var(--gp-balance-control-size) !important;
  border-radius: 50% !important;
  background: var(--gp-balance-pill-circle-bg) !important;
  color: var(--gp-balance-pill-circle-ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--gp-balance-rub-font-size) !important;
  font-weight: var(--gp-balance-rub-font-weight) !important;
  letter-spacing: 0 !important;
  line-height: var(--gp-balance-control-size) !important;
  font-family: var(--font-sans, "SF Pro Display"), sans-serif !important;
  text-transform: none !important;
  font-variant-numeric: normal !important;
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased !important;
  transform: none !important;
  pointer-events: none !important;
}

html body #balance-pill .balance-pill-icon svg,
html body .topbar #balance-pill .balance-pill-icon svg,
html body .balance-widget .balance-pill .balance-pill-icon svg,
html body .balance-pill .balance-pill-icon svg {
  display: block !important;
  width: var(--gp-balance-plus-glyph-size) !important;
  height: var(--gp-balance-plus-glyph-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}

html body #balance-pill .balance-pill-amount,
html body .topbar #balance-pill .balance-pill-amount,
html body .balance-widget .balance-pill .balance-pill-amount,
html body .balance-pill .balance-pill-amount {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--gp-balance-control-size) !important;
  margin: 0 !important;
  padding: 0 1px !important;
  color: #ffffff !important;
  font-size: var(--gp-balance-amount-font-size) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  max-width: 100% !important;
  width: auto !important;
  flex: 0 1 auto !important;
  text-align: center !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  transform: translateY(var(--gp-balance-amount-lift)) !important;
  font-family: var(--font-sans, "SF Pro Display"), sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1, "kern" 0 !important;
  text-rendering: geometricPrecision !important;
  font-kerning: none !important;
  -webkit-font-smoothing: antialiased !important;
  pointer-events: none !important;
}

html body #balance-plus-btn,
html body .topbar #balance-plus-btn,
html body .balance-widget .balance-pill .balance-plus-btn,
html body .balance-plus-btn {
  display: inline-grid !important;
  place-items: center !important;
  width: var(--gp-balance-control-size) !important;
  min-width: var(--gp-balance-control-size) !important;
  max-width: var(--gp-balance-control-size) !important;
  height: var(--gp-balance-control-size) !important;
  min-height: var(--gp-balance-control-size) !important;
  max-height: var(--gp-balance-control-size) !important;
  flex: 0 0 var(--gp-balance-control-size) !important;
  border-radius: 50% !important;
  background: var(--gp-balance-pill-circle-bg) !important;
  color: var(--gp-balance-pill-circle-ink) !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  pointer-events: none !important;
  transform: none !important;
}

html body #balance-plus-btn svg,
html body .topbar #balance-plus-btn svg,
html body .balance-widget .balance-pill .balance-plus-btn svg,
html body .balance-plus-btn svg {
  display: block !important;
  width: var(--gp-balance-plus-glyph-size) !important;
  height: var(--gp-balance-plus-glyph-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}

html body #balance-plus-btn svg path,
html body .topbar #balance-plus-btn svg path,
html body .balance-widget .balance-pill .balance-plus-btn svg path,
html body .balance-plus-btn svg path {
  stroke-width: 3.6 !important;
}

/*
 * Legacy specificity overrides.
 * styles.legacy.css uses doubled-ID selectors (#balance-widget#balance-widget)
 * that outrank the rules above. Match their specificity so the market tab's
 * balance button renders identically to the stars and profile tabs.
 */
#balance-widget#balance-widget,
#balance-widget.balance-widget,
html body .topbar #balance-widget.balance-widget {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  position: relative !important;
  height: var(--gp-balance-widget-height) !important;
  min-height: var(--gp-balance-widget-height) !important;
  max-height: var(--gp-balance-widget-height) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  margin-left: auto !important;
  margin-right: var(--gp-balance-widget-right) !important;
  max-width: min(calc(100vw - (var(--app-gutter-x, 12px) * 2)), var(--gp-balance-widget-max-width, 162px)) !important;
  min-width: 0 !important;
  width: auto !important;
  flex: 0 1 auto !important;
  pointer-events: auto !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  transform-origin: right center !important;
}

html.tg-webapp body #balance-widget#balance-widget,
html.tg-webapp body #balance-widget.balance-widget {
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

#balance-pill#balance-pill,
#balance-pill.balance-pill,
html body .topbar #balance-pill.balance-pill {
  display: inline-flex !important;
  gap: var(--gp-balance-pill-gap) !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  height: var(--gp-balance-widget-height) !important;
  min-height: var(--gp-balance-widget-height) !important;
  max-height: var(--gp-balance-widget-height) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: auto !important;
  flex: 0 1 auto !important;
  padding: 0 var(--gp-balance-pill-pad-x) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--gp-balance-pill-bg) !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  font-size: var(--gp-balance-amount-font-size) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  color: #fff !important;
  transform: none !important;
  overflow: visible !important;
  outline: 0 !important;
  box-sizing: border-box !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  touch-action: manipulation !important;
}

#balance-pill#balance-pill .balance-pill-icon,
html body .topbar #balance-pill .balance-pill-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: var(--gp-balance-control-size) !important;
  min-width: var(--gp-balance-control-size) !important;
  max-width: var(--gp-balance-control-size) !important;
  height: var(--gp-balance-control-size) !important;
  min-height: var(--gp-balance-control-size) !important;
  max-height: var(--gp-balance-control-size) !important;
  flex: 0 0 var(--gp-balance-control-size) !important;
  border-radius: 50% !important;
  background: var(--gp-balance-pill-circle-bg) !important;
  color: var(--gp-balance-pill-circle-ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--gp-balance-rub-font-size) !important;
  font-weight: var(--gp-balance-rub-font-weight) !important;
  line-height: var(--gp-balance-control-size) !important;
  transform: none !important;
  pointer-events: none !important;
}

#balance-amount#balance-amount,
#balance-amount.balance-pill-amount,
html body .topbar #balance-amount.balance-pill-amount {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--gp-balance-control-size) !important;
  margin: 0 !important;
  padding: 0 1px !important;
  color: #ffffff !important;
  font-size: var(--gp-balance-amount-font-size) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  max-width: 100% !important;
  width: auto !important;
  flex: 0 1 auto !important;
  text-align: center !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
  transform: translateY(var(--gp-balance-amount-lift)) !important;
  font-variant-numeric: tabular-nums !important;
  vertical-align: middle !important;
  pointer-events: none !important;
}

#balance-amount#balance-amount::after,
#balance-amount.balance-pill-amount::after {
  content: "" !important;
  display: none !important;
}

#balance-plus-btn#balance-plus-btn,
#balance-plus-btn.balance-plus-btn,
html body .topbar #balance-plus-btn.balance-plus-btn {
  display: inline-grid !important;
  place-items: center !important;
  position: static !important;
  width: var(--gp-balance-control-size) !important;
  min-width: var(--gp-balance-control-size) !important;
  max-width: var(--gp-balance-control-size) !important;
  height: var(--gp-balance-control-size) !important;
  min-height: var(--gp-balance-control-size) !important;
  max-height: var(--gp-balance-control-size) !important;
  flex: 0 0 var(--gp-balance-control-size) !important;
  border-radius: 50% !important;
  background: var(--gp-balance-pill-circle-bg) !important;
  color: var(--gp-balance-pill-circle-ink) !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  top: auto !important;
  right: auto !important;
  line-height: 1 !important;
  pointer-events: none !important;
  transform: none !important;
  filter: none !important;
}

#balance-plus-btn#balance-plus-btn svg,
#balance-plus-btn.balance-plus-btn svg,
html body .topbar #balance-plus-btn.balance-plus-btn svg {
  display: block !important;
  width: var(--gp-balance-plus-glyph-size) !important;
  height: var(--gp-balance-plus-glyph-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}

#balance-plus-btn#balance-plus-btn svg path {
  stroke-width: 3.6 !important;
}

@media (min-width: 521px) {
  html body .modal-overlay,
  html body .gift-sheet-overlay,
  html body .pay-sheet-overlay,
  html body .result-sheet-overlay,
  html body .tonkeeper-overlay {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body .modal,
  html body .gift-sheet,
  html body .pay-sheet,
  html body .result-sheet,
  html body .tonkeeper-sheet {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Filter hit-area and sticky layering hardening. */
html body #sticky-filters .filters-bar,
html body .sticky-filters .filters-bar {
  position: relative !important;
  z-index: 3 !important;
}

html body #sticky-filters #advanced-panel,
html body .sticky-filters #advanced-panel {
  position: relative !important;
  z-index: 2 !important;
}

html body #sticky-filters .filters-bar .filter-btn,
html body .sticky-filters .filters-bar .filter-btn {
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

html body #sticky-filters .filters-bar .filter-btn > *,
html body .sticky-filters .filters-bar .filter-btn > * {
  pointer-events: none !important;
}

html body #sticky-filters .filters-bar .filter-btn::before,
html body #sticky-filters .filters-bar .filter-btn::after,
html body .sticky-filters .filters-bar .filter-btn::before,
html body .sticky-filters .filters-bar .filter-btn::after {
  pointer-events: none !important;
}

/* Keep symbols trigger text in the same horizontal rhythm as other filter buttons. */
html body #symbols-trigger.filter-btn,
html body #advanced-panel #symbols-trigger.filter-btn,
html body #sticky-filters #advanced-panel #symbols-trigger.filter-btn,
html body .sticky-filters #advanced-panel #symbols-trigger.filter-btn {
  padding: 10px 44px 10px 8px !important;
}

html body #symbols-trigger.filter-btn.filter-btn--single,
html body #advanced-panel #symbols-trigger.filter-btn.filter-btn--single,
html body #sticky-filters #advanced-panel #symbols-trigger.filter-btn.filter-btn--single,
html body .sticky-filters #advanced-panel #symbols-trigger.filter-btn.filter-btn--single {
  padding: 10px 44px 10px 8px !important;
}

html body #symbols-trigger.filter-btn.filter-btn--adv-inline,
html body #advanced-panel #symbols-trigger.filter-btn.filter-btn--adv-inline,
html body #sticky-filters #advanced-panel #symbols-trigger.filter-btn.filter-btn--adv-inline,
html body .sticky-filters #advanced-panel #symbols-trigger.filter-btn.filter-btn--adv-inline {
  padding: 10px 44px 10px 8px !important;
}

/* Keep shortage states visually explicit in both balance and quick top-up sheets. */
html body .balance-shortage {
  border: 1px solid rgba(242, 63, 66, 0.42) !important;
  background: linear-gradient(180deg, rgba(242, 63, 66, 0.2) 0%, rgba(242, 63, 66, 0.14) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(242, 63, 66, 0.08) !important;
}

html body .balance-shortage .balance-shortage-head {
  color: rgba(255, 83, 87, 0.98) !important;
}

html body .balance-shortage .balance-shortage-need {
  color: rgba(255, 255, 255, 0.96) !important;
}

/* Footer buttons can end up under neighboring layers on some WebViews. */
html body .modal-footer {
  position: relative !important;
  z-index: 4 !important;
  pointer-events: auto !important;
}

html body .modal-footer .modal-btn {
  position: relative !important;
  z-index: 5 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

html body .modal-footer .modal-btn::before,
html body .modal-footer .modal-btn::after {
  pointer-events: none !important;
}

@media (max-width: 520px) {
  html.tg-webapp.tg-phone body #sticky-filters,
  html.tg-webapp.tg-phone body .sticky-filters,
  html.tg-webapp-ios.tg-phone body #sticky-filters,
  html.tg-webapp-ios.tg-phone body .sticky-filters,
  html.tg-webapp-android.tg-phone body #sticky-filters,
  html.tg-webapp-android.tg-phone body .sticky-filters {
    background: var(--tg-bg, #141414) !important;
  }

  html.tg-webapp.tg-phone body #sticky-filters::before,
  html.tg-webapp.tg-phone body .sticky-filters::before,
  html.tg-webapp-ios.tg-phone body #sticky-filters::before,
  html.tg-webapp-ios.tg-phone body .sticky-filters::before,
  html.tg-webapp-android.tg-phone body #sticky-filters::before,
  html.tg-webapp-android.tg-phone body .sticky-filters::before {
    content: "" !important;
    display: block !important;
    background: var(--tg-bg, #141414) !important;
    pointer-events: none !important;
  }
}

/* Keep boot loader minimal: hide verbose fallback diagnostics/actions. */
#boot-loader .boot-loader-hint,
#boot-loader .boot-loader-static-hint,
#boot-loader .boot-loader-actions {
  display: none !important;
}

/* Keep loader title visible while app is bootstrapping. */
#boot-loader .boot-loader-title {
  display: block !important;
  margin-top: 12px !important;
  color: #ffffff !important;
  font-size: clamp(40px, 9.8vw, 56px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

#boot-loader .boot-loader-bar {
  height: 6px !important;
  margin-top: 10px !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

#boot-loader .boot-loader-bar-fill {
  width: 48% !important;
  background: #2AAE5D !important;
}

/* Enforce stable sold label text in unavailable gift-sheet cards. */
html body .gift-sheet--unavailable .gift-sheet-visual::after {
  content: "\041F\0440\043E\0434\0430\043D\043E" !important;
}

/* Gift sheet insufficient-balance state: explicit warning + clearly disabled button. */
html body #gift-sheet-insufficient-note,
html body #gp-stars-gift-insufficient-note {
  display: none;
  width: 100%;
  margin: 0;
  padding: 0 2px;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(15px, 3.3vw, 17px);
  line-height: 1.32;
  font-weight: 500;
  color: #ff2a2a !important;
  -webkit-text-fill-color: #ff2a2a !important;
  letter-spacing: 0.005em;
  min-height: 20px;
  white-space: normal;
  text-shadow: none !important;
  filter: none !important;
  transform: translateZ(0);
}

html body #gift-sheet-insufficient-note {
  margin-top: 8px !important;
  margin-bottom: 10px !important;
}

html body #gp-stars-gift-insufficient-note {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html body #gift-sheet-insufficient-note.is-visible,
html body #gp-stars-gift-insufficient-note.is-visible {
  display: flex !important;
}

html body #gift-sheet-insufficient-note.is-visible + #gift-sheet-buy,
html body #gp-stars-gift-insufficient-note.is-visible + #gp-stars-gift-buy {
  margin-top: 0 !important;
}

html body #gift-sheet-insufficient-note.is-visible + #gift-sheet-buy {
  margin-top: 6px !important;
}

html body #gift-sheet-close,
html body .gift-sheet-close#gift-sheet-close,
html body #gp-stars-gift-close,
html body .gift-sheet-close#gp-stars-gift-close {
  position: absolute !important;
  z-index: 96 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

html body #gp-profile-root .gp-history-thumb .gp-history-thumb-img,
html body #gp-profile-root .gp-history-thumb .gp-history-thumb-img[src*="img/star.svg"],
html body #gp-profile-root .gp-history-thumb .gp-history-thumb-img--star {
  object-fit: contain !important;
  object-position: center !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Items without data-gp-order-kind are styled normally — no visibility toggle
   to prevent the flash/flicker when JS sets the attribute on first visit. */

html body #gp-profile-root .gp-history-item--order[data-gp-order-kind="nft"] .gp-history-thumb .gp-history-thumb-img,
html body #gp-profile-root .gp-history-item--order[data-gp-order-kind="nft"] .gp-history-thumb .gp-history-thumb-img--gift {
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}

html body #gift-sheet-buy.gp-buy-insufficient-lock,
html body #gp-stars-gift-buy.gp-buy-insufficient-lock {
  background: linear-gradient(180deg, rgba(94, 100, 108, 0.96) 0%, rgba(70, 75, 82, 0.96) 100%) !important;
  border: 0 !important;
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  color: rgba(220, 224, 228, 0.95) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  filter: saturate(0.14) brightness(0.93) !important;
}

html body #gift-sheet-buy.gp-buy-insufficient-lock .gift-sheet-buy-text,
html body #gp-stars-gift-buy.gp-buy-insufficient-lock .gift-sheet-buy-text {
  color: rgba(220, 224, 228, 0.95) !important;
  text-shadow: none !important;
}

html body #gift-sheet-buy.gp-buy-insufficient-lock:focus-visible,
html body #gp-stars-gift-buy.gp-buy-insufficient-lock:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5) !important;
}

html body #gift-sheet-buy.gp-buy-insufficient-lock:active,
html body #gp-stars-gift-buy.gp-buy-insufficient-lock:active {
  transform: none !important;
}

/* Disabled topup buttons keep green background but use muted text. */
html body #quick-topup-submit:disabled,
html body #wallet-topup-submit:disabled {
  color: rgba(222, 226, 230, 0.72) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Overlay guard: while any menu/sheet is open, background must not receive taps.
   Primary mechanism: JS sets inert attribute on .app-shell (browser-level block).
   CSS pointer-events is a fallback for WebViews that lack inert support. */
.app-shell[inert] {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.app-shell[inert] * {
  pointer-events: none !important;
}
html.overlay-open body .topbar,
html.overlay-open body #balance-widget,
html.overlay-open body #sticky-filters,
html.overlay-open body .sticky-filters,
html.overlay-open body .app,
html.overlay-open body .app-shell,
html.overlay-open body #gp-main-nav,
html.overlay-open body #gp-profile-root,
html.overlay-open body #gp-stars-root,
html.overlay-open body #scroll-top-btn,
html.overlay-open body #gp-smooth-top-btn,
body.overlay-open .topbar,
body.overlay-open #balance-widget,
body.overlay-open #sticky-filters,
body.overlay-open .sticky-filters,
body.overlay-open .app,
body.overlay-open .app-shell,
body.overlay-open #gp-main-nav,
body.overlay-open #gp-profile-root,
body.overlay-open #gp-stars-root,
body.overlay-open #scroll-top-btn,
body.overlay-open #gp-smooth-top-btn {
  pointer-events: none !important;
}

html.overlay-open body .modal-overlay[aria-hidden="false"]:not(.closing),
html.overlay-open body .gift-sheet-overlay[aria-hidden="false"]:not(.closing),
html.overlay-open body .tonkeeper-overlay[aria-hidden="false"]:not(.closing),
html.overlay-open body .wallet-menu-overlay.is-open:not(.is-closing),
html.overlay-open body .gp-sort-overlay.visible {
  pointer-events: auto !important;
}

html.overlay-open body .modal-overlay[aria-hidden="false"]:not(.closing) *,
html.overlay-open body .gift-sheet-overlay[aria-hidden="false"]:not(.closing) *,
html.overlay-open body .tonkeeper-overlay[aria-hidden="false"]:not(.closing) *,
html.overlay-open body .wallet-menu-overlay.is-open:not(.is-closing) *,
html.overlay-open body .gp-sort-overlay.visible * {
  pointer-events: auto !important;
}

/* Profile mode: keep the dedicated profile topbar in normal document flow. */
html.gp-profile-open body #gp-profile-root .gp-profile-topbar,
html.gp-profile-open body .gp-profile-root .gp-profile-topbar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  margin: 0 0 var(--gp-ui-gap, 8px) !important;
  padding-top: var(--gp-balance-topbar-top, 0px) !important;
  padding-bottom: 0 !important;
  padding-left: var(--app-gutter-x, 12px) !important;
  padding-right: var(--app-gutter-x, 12px) !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  background: var(--tg-bg, #141414) !important;
  box-shadow: none !important;
}

html.gp-profile-open body #gp-profile-root .gp-profile-topbar .balance-widget,
html.gp-profile-open body .gp-profile-root .gp-profile-topbar .balance-widget,
html.gp-profile-open body #gp-profile-root .gp-profile-topbar .gp-profile-balance-widget,
html.gp-profile-open body .gp-profile-root .gp-profile-topbar .gp-profile-balance-widget {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: var(--gp-balance-widget-right) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html.gp-profile-open body #gp-profile-root .gp-profile-topbar .balance-pill,
html.gp-profile-open body .gp-profile-root .gp-profile-topbar .balance-pill {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  transition: none !important;
}

html.gp-profile-open body #gp-profile-root .gp-profile-topbar .balance-pill *,
html.gp-profile-open body .gp-profile-root .gp-profile-topbar .balance-pill * {
  transition: none !important;
}

/* Stars balance row is shown only inside the Stars section. */
html body #gp-stars-root .gp-stars-balance-row.gp-stars-balance-row--hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* iPhone WebApp: keep sheets flush to the bottom and avoid oversized empty space. */
@media (max-width: 520px) {
  html.tg-webapp-ios body #gift-sheet-overlay.gift-sheet-overlay,
  html.tg-webapp-ios body #purchase-cancel-overlay.gift-sheet-overlay {
    inset: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: flex-end !important;
  }

  html.tg-webapp-ios body #gift-sheet-overlay .gift-sheet,
  html.tg-webapp-ios body #purchase-cancel-overlay .gift-sheet {
    margin: 0 !important;
    min-height: 0 !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(
      var(--tg-viewport-height, var(--app-height, 100vh)) - env(safe-area-inset-top, 0px)
    ) !important;
  }
}

/* iOS auto-zoom guard: input font-size must stay >=16px on focus. */
@media (max-width: 520px) {
  html.tg-webapp-ios body input,
  html.tg-webapp-ios body textarea,
  html.tg-webapp-ios body select {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }
}