@font-face {
  font-family: SFProText;
  font-style: normal;
  font-weight: 700;
  src: url(/fonts/SFProText-Bold.woff2) format("truetype");
}
@font-face {
  font-family: SFProText;
  font-style: normal;
  font-weight: 500;
  src: url(/fonts/SFProText-Medium.woff2) format("truetype");
}
@font-face {
  font-family: SFProText;
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/SFProText-Regular.woff2) format("truetype");
}
@font-face {
  font-family: SFProText;
  font-style: normal;
  font-weight: 600;
  src: url(/fonts/SFProText-Semibold.woff2) format("truetype");
}
:root {
  --bg-glass: #000;
  --c-light: #fff;
  --c-dark: #000;
  --c-content: #ffffff;
  --glass-reflex-dark: 2;
  --glass-reflex-light: 0.3;
  --saturation: 140%;
  --switcher-transition: 0.25s cubic-bezier(1, 0, 0.4, 1);
  --height: 62px;
  --glass-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 1.8px 3px 0px -2px rgba(255, 255, 255, 0.27),
    inset -2px -2px 0px -2px rgba(255, 255, 255, 0.24),
    inset -3px -8px 1px -6px rgba(255, 255, 255, 0.18),
    inset -0.3px -1px 4px 0px rgba(0, 0, 0, 0.24),
    inset -1.5px 2.5px 0px -2px rgba(0, 0, 0, 0.4),
    inset 0px 3px 4px -2px rgba(0, 0, 0, 0.4),
    inset 2px -6.5px 1px -4px rgba(0, 0, 0, 0.2),
    0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 6px 16px 0px rgba(0, 0, 0, 0.16);
  --glass-shadow-modern:
    inset 0 0 0 1px
      color-mix(
        in srgb,
        var(--c-light) calc(var(--glass-reflex-light) * 10%),
        transparent
      ),
    inset 1.8px 3px 0px -2px
      color-mix(
        in srgb,
        var(--c-light) calc(var(--glass-reflex-light) * 90%),
        transparent
      ),
    inset -2px -2px 0px -2px
      color-mix(
        in srgb,
        var(--c-light) calc(var(--glass-reflex-light) * 80%),
        transparent
      ),
    inset -3px -8px 1px -6px
      color-mix(
        in srgb,
        var(--c-light) calc(var(--glass-reflex-light) * 60%),
        transparent
      ),
    inset -0.3px -1px 4px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 12%),
        transparent
      ),
    inset -1.5px 2.5px 0px -2px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
        transparent
      ),
    inset 0px 3px 4px -2px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
        transparent
      ),
    inset 2px -6.5px 1px -4px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
        transparent
      ),
    0px 1px 5px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
        transparent
      ),
    0px 6px 16px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
        transparent
      );
}
@supports (color-mix(in srgb, white, transparent)) {
  :root {
    --glass-shadow: var(--glass-shadow-modern);
  }
}
._container_khmv6_95 {
  display: flex;
  flex-direction: row;
  gap: 12px;
}
._switcherBtn_khmv6_101 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  width: 58px;
  height: var(--height);
  border-radius: 99em;
  background-color: color-mix(in srgb, var(--bg-glass) 12%, transparent);
  backdrop-filter: blur(8px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
  box-shadow: var(--glass-shadow);
  border: none;
  cursor: pointer;
  padding: 4px;
  box-sizing: border-box;
}
._switcherIcon_khmv6_121 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff6;
}
._switcherIcon_khmv6_121 svg {
  width: 20px;
  height: 20px;
}
._switcherTitle_khmv6_133 {
  font-weight: 700;
  font-size: 10px;
  text-align: center;
  line-height: 1.2;
  color: #fff6;
  letter-spacing: -0.4px;
}
._profile_khmv6_142 {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background-color: #282727f2;
  border-radius: 99em;
  height: var(--height);
  width: var(--height);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
._profileIcon_khmv6_156 {
  border-radius: 99em;
  border: 2px solid var(--color-background-secondary-2);
}
._profileIconActive_khmv6_161 {
  border: 2px solid var(--primary);
}
._switcherGames_khmv6_165 ._profileIconActive_khmv6_161 {
  border-color: #af51de;
}
._filter_khmv6_169 {
  position: absolute;
  width: 0;
  height: 0;
  z-index: -1;
  pointer-events: none;
}
._switcher_khmv6_101 {
  --tab-accent: var(--primary);
  --tab-count: 3;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--tab-count), 1fr);
  align-items: center;
  gap: 0px;
  width: 100%;
  height: var(--height);
  padding: 4px;
  box-sizing: border-box;
  border: none;
  border-radius: 99em;
  background-color: color-mix(in srgb, var(--bg-glass) 12%, transparent);
  backdrop-filter: blur(8px) saturate(var(--saturation));
  isolation: isolate;
  -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
  box-shadow: var(--glass-shadow);
  transition:
    background-color var(--switcher-transition),
    box-shadow var(--switcher-transition);
}
._switcherGames_khmv6_165 {
  --tab-accent: #af51de;
}
._switcher_khmv6_101:after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  display: block;
  width: calc((100% - 8px) / var(--tab-count));
  height: 54px;
  border-radius: 99em;
  background-color: #0000004d;
  z-index: -1;
  box-shadow:
    inset 0 0 0 1px #ffffff08,
    inset 2px 1px 0 -1px #ffffff45,
    inset -1.5px -1px 0 -1px #ffffff3d,
    inset -2px -6px 1px -5px #ffffff2e,
    inset -1px 2px 3px -1px #0006,
    inset 0 -4px 1px -2px #0003,
    0 3px 6px #00000029;
  transition:
    background-color var(--switcher-transition),
    translate var(--switcher-transition);
}
._switcher_khmv6_101[data-active="0"]:after {
  translate: 0 0;
  transform-origin: right;
  animation: _scaleToggle_khmv6_1 0.44s ease;
}
._switcher_khmv6_101[data-active="1"]:after {
  translate: 100% 0;
  transition:
    background-color var(--switcher-transition),
    translate var(--switcher-transition);
  animation: _scaleToggle2_khmv6_1 0.44s ease;
}
._switcher_khmv6_101[data-previous="0"][data-active="1"]:after {
  transform-origin: left;
}
._switcher_khmv6_101[data-previous="2"][data-active="1"]:after {
  transform-origin: right;
}
._switcher_khmv6_101[data-active="2"]:after {
  translate: 200% 0;
  transform-origin: left;
  transition:
    background-color var(--switcher-transition),
    translate var(--switcher-transition);
  animation: _scaleToggle3_khmv6_1 0.44s ease;
}
._switcher_khmv6_101[data-previous="1"][data-active="2"]:after {
  transform-origin: left;
}
._switcher_khmv6_101[data-active="-1"]:after {
  display: none;
}
._switcher_khmv6_101[data-tabs="2"] {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
._switcher_khmv6_101[data-tabs="2"]:after {
  width: calc((100% - 16px) / 2);
}
._switcher_khmv6_101[data-tabs="2"][data-active="1"]:after {
  translate: calc(100% + 8px) 0;
  transform-origin: left;
  animation: _scaleToggle2_khmv6_1 0.44s ease;
}
@keyframes _scaleToggle_khmv6_1 {
  0% {
    scale: 1 1;
  }
  50% {
    scale: 1.05 1.1;
  }
  to {
    scale: 1 1;
  }
}
@keyframes _scaleToggle2_khmv6_1 {
  0% {
    scale: 1 1;
  }
  50% {
    scale: 1.1 1.1;
  }
  to {
    scale: 1 1;
  }
}
@keyframes _scaleToggle3_khmv6_1 {
  0% {
    scale: 1 1;
  }
  50% {
    scale: 1.05 1.1;
  }
  to {
    scale: 1 1;
  }
}
._optionWrap_khmv6_324 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
}
._option_khmv6_324 {
  --c: var(--c-content);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 99em;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.4;
  color: var(--c);
  transition:
    opacity 0.16s,
    color 0.16s;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
._option_khmv6_324:hover {
  opacity: 0.7;
  cursor: pointer;
}
._option_khmv6_324:hover ._icon_khmv6_357 {
  scale: 1.1;
}
._optionActive_khmv6_363 {
  --c: var(--tab-accent, var(--primary));
  opacity: 1;
  cursor: auto;
  color: var(--c);
}
._optionActive_khmv6_363:hover {
  opacity: 1;
  cursor: pointer;
}
._optionActive_khmv6_363:hover ._icon_khmv6_357 {
  scale: 1;
}
._icon_khmv6_357 {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: scale 0.2s cubic-bezier(0.5, 0, 0, 1);
  color: currentColor;
}
._icon_khmv6_357 svg {
  width: 24px;
  height: 24px;
}
._title_khmv6_392 {
  font-weight: 500;
  font-size: 10px;
  text-align: center;
  line-height: 1.2;
  color: currentColor;
}
._button_oz7me_1 {
  --bg-glass: #000;
  --c-light: #fff;
  --c-dark: #000;
  --glass-reflex-dark: 2;
  --glass-reflex-light: 0.3;
  --saturation: 140%;
  --glass-shadow:
    inset 0 0 0 1px
      color-mix(
        in srgb,
        var(--c-light) calc(var(--glass-reflex-light) * 10%),
        transparent
      ),
    inset 1.8px 3px 0px -2px
      color-mix(
        in srgb,
        var(--c-light) calc(var(--glass-reflex-light) * 90%),
        transparent
      ),
    inset -2px -2px 0px -2px
      color-mix(
        in srgb,
        var(--c-light) calc(var(--glass-reflex-light) * 80%),
        transparent
      ),
    inset -3px -8px 1px -6px
      color-mix(
        in srgb,
        var(--c-light) calc(var(--glass-reflex-light) * 60%),
        transparent
      ),
    inset -0.3px -1px 4px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 12%),
        transparent
      ),
    inset -1.5px 2.5px 0px -2px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
        transparent
      ),
    inset 0px 3px 4px -2px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
        transparent
      ),
    inset 2px -6.5px 1px -4px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
        transparent
      ),
    0px 1px 5px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
        transparent
      ),
    0px 6px 16px 0px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
        transparent
      );
  background-color: color-mix(in srgb, var(--bg-glass) 12%, transparent);
  backdrop-filter: blur(8px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
  box-shadow: var(--glass-shadow);
  isolation: isolate;
}
._banner_omgk7_1 {
  --bg-glass: #000;
  --c-light: #fff;
  --c-dark: #000;
  --glass-reflex-dark: 2;
  --glass-reflex-light: 0.3;
  --saturation: 140%;
  --glass-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 1.8px 3px 0px -2px rgba(255, 255, 255, 0.27),
    inset -2px -2px 0px -2px rgba(255, 255, 255, 0.24),
    inset -3px -8px 1px -6px rgba(255, 255, 255, 0.18),
    inset -0.3px -1px 4px 0px rgba(0, 0, 0, 0.24),
    inset -1.5px 2.5px 0px -2px rgba(0, 0, 0, 0.4),
    inset 0px 3px 4px -2px rgba(0, 0, 0, 0.4),
    inset 2px -6.5px 1px -4px rgba(0, 0, 0, 0.2),
    0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 6px 16px 0px rgba(0, 0, 0, 0.16);
  background-color: color-mix(in srgb, var(--bg-glass) 12%, transparent);
  backdrop-filter: blur(8px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
  box-shadow: var(--glass-shadow);
  isolation: isolate;
}
@supports (color-mix(in srgb, white, transparent)) {
  ._banner_omgk7_1 {
    --glass-shadow:
      inset 0 0 0 1px
        color-mix(
          in srgb,
          var(--c-light) calc(var(--glass-reflex-light) * 10%),
          transparent
        ),
      inset 1.8px 3px 0px -2px
        color-mix(
          in srgb,
          var(--c-light) calc(var(--glass-reflex-light) * 90%),
          transparent
        ),
      inset -2px -2px 0px -2px
        color-mix(
          in srgb,
          var(--c-light) calc(var(--glass-reflex-light) * 80%),
          transparent
        ),
      inset -3px -8px 1px -6px
        color-mix(
          in srgb,
          var(--c-light) calc(var(--glass-reflex-light) * 60%),
          transparent
        ),
      inset -0.3px -1px 4px 0px
        color-mix(
          in srgb,
          var(--c-dark) calc(var(--glass-reflex-dark) * 12%),
          transparent
        ),
      inset -1.5px 2.5px 0px -2px
        color-mix(
          in srgb,
          var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
          transparent
        ),
      inset 0px 3px 4px -2px
        color-mix(
          in srgb,
          var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
          transparent
        ),
      inset 2px -6.5px 1px -4px
        color-mix(
          in srgb,
          var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
          transparent
        ),
      0px 1px 5px 0px
        color-mix(
          in srgb,
          var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
          transparent
        ),
      0px 6px 16px 0px
        color-mix(
          in srgb,
          var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
          transparent
        );
  }
} /*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-pan-x: initial;
      --tw-pan-y: initial;
      --tw-pinch-zoom: initial;
      --tw-scroll-snap-strictness: proximity;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-animation-delay: 0s;
      --tw-animation-direction: normal;
      --tw-animation-duration: initial;
      --tw-animation-fill-mode: none;
      --tw-animation-iteration-count: 1;
      --tw-enter-blur: 0;
      --tw-enter-opacity: 1;
      --tw-enter-rotate: 0;
      --tw-enter-scale: 1;
      --tw-enter-translate-x: 0;
      --tw-enter-translate-y: 0;
      --tw-exit-blur: 0;
      --tw-exit-opacity: 1;
      --tw-exit-rotate: 0;
      --tw-exit-scale: 1;
      --tw-exit-translate-x: 0;
      --tw-exit-translate-y: 0;
    }
  }
}
@layer theme {
  :root,
  :host {
    --font-sans:
      ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono:
      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-yellow-500: oklch(79.5% 0.184 86.047);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --text-base: 1rem;
    --text-base--line-height: 1.5;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -0.025em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --drop-shadow-sm: 0 1px 2px #00000026;
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --blur-md: 12px;
    --blur-lg: 16px;
    --blur-2xl: 40px;
    --blur-3xl: 64px;
    --default-transition-duration: 0.15s;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --text-transparent-2: var(--text-transparent-2);
    --text-transparent-3: var(--text-transparent-3);
    --color-background-secondary: var(--color-background-secondary);
    --color-background-secondary-2: var(--color-background-secondary-2);
  }
}
@layer base {
  *,
  :after,
  :before,
  ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
  html,
  :host {
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(
      --default-font-family,
      ui-sans-serif,
      system-ui,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol",
      "Noto Color Emoji"
    );
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b,
  strong {
    font-weight: bolder;
  }
  code,
  kbd,
  samp,
  pre {
    font-family: var(
      --default-mono-font-family,
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace
    );
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(
      --default-mono-font-variation-settings,
      normal
    );
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub,
  sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol,
  ul,
  menu {
    list-style: none;
  }
  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    vertical-align: middle;
    display: block;
  }
  img,
  video {
    max-width: 100%;
    height: auto;
  }
  button,
  input,
  select,
  optgroup,
  textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }
  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not ((-webkit-appearance: -apple-pay-button))) or
    (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }
    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button,
  input:where([type="button"], [type="reset"], [type="submit"]) {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
  }
  ::file-selector-button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
  }
  ::-webkit-inner-spin-button {
    height: auto;
  }
  ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer components;
@layer utilities {
  .\@container\/card-header {
    container: card-header/inline-size;
  }
  .pointer-events-auto {
    pointer-events: auto;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }
  .inset-x-4 {
    inset-inline: calc(var(--spacing) * 4);
  }
  .-top-0\.5 {
    top: calc(var(--spacing) * -0.5);
  }
  .-top-1\.5 {
    top: calc(var(--spacing) * -1.5);
  }
  .-top-2 {
    top: calc(var(--spacing) * -2);
  }
  .-top-4 {
    top: calc(var(--spacing) * -4);
  }
  .-top-5 {
    top: calc(var(--spacing) * -5);
  }
  .-top-12 {
    top: calc(var(--spacing) * -12);
  }
  .-top-36 {
    top: calc(var(--spacing) * -36);
  }
  .-top-40 {
    top: calc(var(--spacing) * -40);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-0\.5 {
    top: calc(var(--spacing) * 0.5);
  }
  .top-1 {
    top: calc(var(--spacing) * 1);
  }
  .top-1\/2 {
    top: 50%;
  }
  .top-2 {
    top: calc(var(--spacing) * 2);
  }
  .top-3 {
    top: calc(var(--spacing) * 3);
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .top-\[-1px\] {
    top: -1px;
  }
  .top-\[-2px\] {
    top: -2px;
  }
  .top-\[-5px\] {
    top: -5px;
  }
  .top-\[calc\(\(100\%-16px\)\/2\)\] {
    top: calc(50% - 8px);
  }
  .top-\[calc\(50\%-1px\)\] {
    top: calc(50% - 1px);
  }
  .top-\[calc\(var\(--tg-viewport-safe-area-inset-top\)\+42px\)\] {
    top: calc(var(--tg-viewport-safe-area-inset-top) + 42px);
  }
  .top-\[calc\(var\(--tg-viewport-safe-area-inset-top\)\+46px\)\] {
    top: calc(var(--tg-viewport-safe-area-inset-top) + 46px);
  }
  .top-\[calc\(var\(--tg-viewport-safe-area-inset-top\)\+46px\)\]\! {
    top: calc(var(--tg-viewport-safe-area-inset-top) + 46px) !important;
  }
  .-right-1 {
    right: calc(var(--spacing) * -1);
  }
  .-right-1\.5 {
    right: calc(var(--spacing) * -1.5);
  }
  .-right-2 {
    right: calc(var(--spacing) * -2);
  }
  .-right-3 {
    right: calc(var(--spacing) * -3);
  }
  .-right-5 {
    right: calc(var(--spacing) * -5);
  }
  .-right-12 {
    right: calc(var(--spacing) * -12);
  }
  .-right-14 {
    right: calc(var(--spacing) * -14);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .right-1 {
    right: calc(var(--spacing) * 1);
  }
  .right-1\.5 {
    right: calc(var(--spacing) * 1.5);
  }
  .right-1\/2 {
    right: 50%;
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .right-3 {
    right: calc(var(--spacing) * 3);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .right-4\.5 {
    right: calc(var(--spacing) * 4.5);
  }
  .right-\[-1px\] {
    right: -1px;
  }
  .right-\[-4px\] {
    right: -4px;
  }
  .right-\[2px\] {
    right: 2px;
  }
  .right-\[5px\] {
    right: 5px;
  }
  .right-\[14px\] {
    right: 14px;
  }
  .-bottom-0\.5 {
    bottom: calc(var(--spacing) * -0.5);
  }
  .-bottom-1 {
    bottom: calc(var(--spacing) * -1);
  }
  .-bottom-1\.5 {
    bottom: calc(var(--spacing) * -1.5);
  }
  .-bottom-2\.5 {
    bottom: calc(var(--spacing) * -2.5);
  }
  .-bottom-12 {
    bottom: calc(var(--spacing) * -12);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .bottom-0\.5 {
    bottom: calc(var(--spacing) * 0.5);
  }
  .bottom-1 {
    bottom: calc(var(--spacing) * 1);
  }
  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }
  .bottom-3 {
    bottom: calc(var(--spacing) * 3);
  }
  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }
  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }
  .bottom-7 {
    bottom: calc(var(--spacing) * 7);
  }
  .bottom-9 {
    bottom: calc(var(--spacing) * 9);
  }
  .bottom-\[-4px\] {
    bottom: -4px;
  }
  .bottom-\[-5px\] {
    bottom: -5px;
  }
  .bottom-\[4\.5px\] {
    bottom: 4.5px;
  }
  .bottom-\[7\.5px\] {
    bottom: 7.5px;
  }
  .bottom-\[10\.5px\] {
    bottom: 10.5px;
  }
  .bottom-\[60px\] {
    bottom: 60px;
  }
  .bottom-\[calc\(var\(--tg-viewport-safe-area-inset-bottom\)\+16px\)\] {
    bottom: calc(var(--tg-viewport-safe-area-inset-bottom) + 16px);
  }
  .bottom-\[calc\(var\(--tg-viewport-safe-area-inset-bottom\)\+72px\)\] {
    bottom: calc(var(--tg-viewport-safe-area-inset-bottom) + 72px);
  }
  .bottom-\[calc\(var\(--tg-viewport-safe-area-inset-bottom\)\+80px\)\] {
    bottom: calc(var(--tg-viewport-safe-area-inset-bottom) + 80px);
  }
  .bottom-\[calc\(var\(--tg-viewport-safe-area-inset-bottom\)\+84px\)\] {
    bottom: calc(var(--tg-viewport-safe-area-inset-bottom) + 84px);
  }
  .-left-1 {
    left: calc(var(--spacing) * -1);
  }
  .-left-4 {
    left: calc(var(--spacing) * -4);
  }
  .-left-12 {
    left: calc(var(--spacing) * -12);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-1 {
    left: calc(var(--spacing) * 1);
  }
  .left-1\/2 {
    left: 50%;
  }
  .left-1\/3 {
    left: 33.3333%;
  }
  .left-2 {
    left: calc(var(--spacing) * 2);
  }
  .left-4 {
    left: calc(var(--spacing) * 4);
  }
  .left-7\.5 {
    left: calc(var(--spacing) * 7.5);
  }
  .left-12 {
    left: calc(var(--spacing) * 12);
  }
  .left-20 {
    left: calc(var(--spacing) * 20);
  }
  .left-\[4px\] {
    left: 4px;
  }
  .left-\[5px\] {
    left: 5px;
  }
  .left-\[12px\] {
    left: 12px;
  }
  .left-\[50px\] {
    left: 50px;
  }
  .z-0 {
    z-index: 0;
  }
  .z-1 {
    z-index: 1;
  }
  .z-2 {
    z-index: 2;
  }
  .z-4 {
    z-index: 4;
  }
  .z-10 {
    z-index: 10;
  }
  .z-11 {
    z-index: 11;
  }
  .z-12 {
    z-index: 12;
  }
  .z-13 {
    z-index: 13;
  }
  .z-20 {
    z-index: 20;
  }
  .z-25 {
    z-index: 25;
  }
  .z-30 {
    z-index: 30;
  }
  .z-50 {
    z-index: 50;
  }
  .z-100 {
    z-index: 100;
  }
  .z-\[2\] {
    z-index: 2;
  }
  .z-\[10\] {
    z-index: 10;
  }
  .z-\[12\] {
    z-index: 12;
  }
  .z-\[20\] {
    z-index: 20;
  }
  .z-\[100\] {
    z-index: 100;
  }
  .z-\[9999\] {
    z-index: 9999;
  }
  .col-span-2 {
    grid-column: span 2 / span 2;
  }
  .col-start-2 {
    grid-column-start: 2;
  }
  .col-start-3 {
    grid-column-start: 3;
  }
  .row-span-2 {
    grid-row: span 2 / span 2;
  }
  .row-start-1 {
    grid-row-start: 1;
  }
  .container {
    width: 100%;
  }
  @media (min-width: 33.125rem) {
    .container {
      max-width: 33.125rem;
    }
  }
  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }
  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }
  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }
  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }
  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }
  .m-0 {
    margin: calc(var(--spacing) * 0);
  }
  .m-2 {
    margin: calc(var(--spacing) * 2);
  }
  .m-auto {
    margin: auto;
  }
  .-mx-1 {
    margin-inline: calc(var(--spacing) * -1);
  }
  .-mx-4 {
    margin-inline: calc(var(--spacing) * -4);
  }
  .mx-1 {
    margin-inline: calc(var(--spacing) * 1);
  }
  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }
  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-0 {
    margin-block: calc(var(--spacing) * 0);
  }
  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }
  .my-1\.5 {
    margin-block: calc(var(--spacing) * 1.5);
  }
  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }
  .my-2\.5 {
    margin-block: calc(var(--spacing) * 2.5);
  }
  .my-3 {
    margin-block: calc(var(--spacing) * 3);
  }
  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }
  .my-auto {
    margin-block: auto;
  }
  .-mt-1\.5 {
    margin-top: calc(var(--spacing) * -1.5);
  }
  .-mt-2 {
    margin-top: calc(var(--spacing) * -2);
  }
  .-mt-3 {
    margin-top: calc(var(--spacing) * -3);
  }
  .-mt-4 {
    margin-top: calc(var(--spacing) * -4);
  }
  .mt-0 {
    margin-top: calc(var(--spacing) * 0);
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-2\.5 {
    margin-top: calc(var(--spacing) * 2.5);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-3\.5 {
    margin-top: calc(var(--spacing) * 3.5);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-\[1\.5px\] {
    margin-top: 1.5px;
  }
  .mt-\[3px\] {
    margin-top: 3px;
  }
  .mt-\[4px\] {
    margin-top: 4px;
  }
  .mt-\[11px\] {
    margin-top: 11px;
  }
  .mt-\[12px\] {
    margin-top: 12px;
  }
  .mt-\[46px\] {
    margin-top: 46px;
  }
  .mt-auto {
    margin-top: auto;
  }
  .mr-0\.5 {
    margin-right: calc(var(--spacing) * 0.5);
  }
  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }
  .mr-6 {
    margin-right: calc(var(--spacing) * 6);
  }
  .mr-auto {
    margin-right: auto;
  }
  .-mb-0\.5 {
    margin-bottom: calc(var(--spacing) * -0.5);
  }
  .-mb-1 {
    margin-bottom: calc(var(--spacing) * -1);
  }
  .-mb-4 {
    margin-bottom: calc(var(--spacing) * -4);
  }
  .mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .mb-0\.5 {
    margin-bottom: calc(var(--spacing) * 0.5);
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-2\.5 {
    margin-bottom: calc(var(--spacing) * 2.5);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-20 {
    margin-bottom: calc(var(--spacing) * 20);
  }
  .mb-\[68px\] {
    margin-bottom: 68px;
  }
  .mb-\[120px\] {
    margin-bottom: 120px;
  }
  .mb-\[160px\] {
    margin-bottom: 160px;
  }
  .mb-\[calc\(var\(--tg-viewport-safe-area-inset-bottom\)\+66px\)\] {
    margin-bottom: calc(var(--tg-viewport-safe-area-inset-bottom) + 66px);
  }
  .mb-auto {
    margin-bottom: auto;
  }
  .mb-px {
    margin-bottom: 1px;
  }
  .-ml-4 {
    margin-left: calc(var(--spacing) * -4);
  }
  .ml-0 {
    margin-left: calc(var(--spacing) * 0);
  }
  .ml-0\.5 {
    margin-left: calc(var(--spacing) * 0.5);
  }
  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }
  .ml-5 {
    margin-left: calc(var(--spacing) * 5);
  }
  .ml-\[46px\] {
    margin-left: 46px;
  }
  .ml-auto {
    margin-left: auto;
  }
  .box-content\! {
    box-sizing: content-box !important;
  }
  .line-clamp-1 {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
  .line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .table-caption {
    display: table-caption;
  }
  .table-cell {
    display: table-cell;
  }
  .table-row {
    display: table-row;
  }
  .aspect-327\/212 {
    aspect-ratio: 327/212;
  }
  .aspect-327\/257 {
    aspect-ratio: 327/257;
  }
  .aspect-343\/180 {
    aspect-ratio: 343/180;
  }
  .aspect-\[16\/9\] {
    aspect-ratio: 16/9;
  }
  .aspect-square {
    aspect-ratio: 1;
  }
  .size-0\.5 {
    width: calc(var(--spacing) * 0.5);
    height: calc(var(--spacing) * 0.5);
  }
  .size-1 {
    width: calc(var(--spacing) * 1);
    height: calc(var(--spacing) * 1);
  }
  .size-1\.5 {
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
  }
  .size-2 {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
  }
  .size-2\.5 {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
  }
  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }
  .size-3\.5 {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }
  .size-3\.25 {
    width: calc(var(--spacing) * 3.25);
    height: calc(var(--spacing) * 3.25);
  }
  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .size-4\! {
    width: calc(var(--spacing) * 4) !important;
    height: calc(var(--spacing) * 4) !important;
  }
  .size-4\.5 {
    width: calc(var(--spacing) * 4.5);
    height: calc(var(--spacing) * 4.5);
  }
  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }
  .size-5\! {
    width: calc(var(--spacing) * 5) !important;
    height: calc(var(--spacing) * 5) !important;
  }
  .size-5\.5 {
    width: calc(var(--spacing) * 5.5);
    height: calc(var(--spacing) * 5.5);
  }
  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }
  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }
  .size-8\.5 {
    width: calc(var(--spacing) * 8.5);
    height: calc(var(--spacing) * 8.5);
  }
  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }
  .size-9\.5 {
    width: calc(var(--spacing) * 9.5);
    height: calc(var(--spacing) * 9.5);
  }
  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }
  .size-10\.5 {
    width: calc(var(--spacing) * 10.5);
    height: calc(var(--spacing) * 10.5);
  }
  .size-11 {
    width: calc(var(--spacing) * 11);
    height: calc(var(--spacing) * 11);
  }
  .size-12 {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
  }
  .size-16 {
    width: calc(var(--spacing) * 16);
    height: calc(var(--spacing) * 16);
  }
  .size-30 {
    width: calc(var(--spacing) * 30);
    height: calc(var(--spacing) * 30);
  }
  .size-\[1em\] {
    width: 1em;
    height: 1em;
  }
  .size-\[7px\] {
    width: 7px;
    height: 7px;
  }
  .size-\[8px\] {
    width: 8px;
    height: 8px;
  }
  .size-\[9px\] {
    width: 9px;
    height: 9px;
  }
  .size-\[11px\] {
    width: 11px;
    height: 11px;
  }
  .size-\[12px\] {
    width: 12px;
    height: 12px;
  }
  .size-\[13px\] {
    width: 13px;
    height: 13px;
  }
  .size-\[14px\] {
    width: 14px;
    height: 14px;
  }
  .size-\[16px\] {
    width: 16px;
    height: 16px;
  }
  .size-\[18px\] {
    width: 18px;
    height: 18px;
  }
  .size-\[18px\]\! {
    width: 18px !important;
    height: 18px !important;
  }
  .size-\[20px\]\! {
    width: 20px !important;
    height: 20px !important;
  }
  .size-\[21px\] {
    width: 21px;
    height: 21px;
  }
  .size-\[22px\] {
    width: 22px;
    height: 22px;
  }
  .size-\[24px\] {
    width: 24px;
    height: 24px;
  }
  .size-\[28px\] {
    width: 28px;
    height: 28px;
  }
  .size-\[34px\] {
    width: 34px;
    height: 34px;
  }
  .size-\[38px\] {
    width: 38px;
    height: 38px;
  }
  .size-\[42px\] {
    width: 42px;
    height: 42px;
  }
  .size-\[50px\] {
    width: 50px;
    height: 50px;
  }
  .size-\[52px\] {
    width: 52px;
    height: 52px;
  }
  .size-\[56px\] {
    width: 56px;
    height: 56px;
  }
  .size-\[120px\] {
    width: 120px;
    height: 120px;
  }
  .size-\[129px\] {
    width: 129px;
    height: 129px;
  }
  .size-\[196px\] {
    width: 196px;
    height: 196px;
  }
  .size-\[212px\] {
    width: 212px;
    height: 212px;
  }
  .size-full {
    width: 100%;
    height: 100%;
  }
  .h-0 {
    height: calc(var(--spacing) * 0);
  }
  .h-0\.5 {
    height: calc(var(--spacing) * 0.5);
  }
  .h-1 {
    height: calc(var(--spacing) * 1);
  }
  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-3\! {
    height: calc(var(--spacing) * 3) !important;
  }
  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-4\.5 {
    height: calc(var(--spacing) * 4.5);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-5\! {
    height: calc(var(--spacing) * 5) !important;
  }
  .h-5\.5 {
    height: calc(var(--spacing) * 5.5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-7 {
    height: calc(var(--spacing) * 7);
  }
  .h-7\.5 {
    height: calc(var(--spacing) * 7.5);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-8\.5 {
    height: calc(var(--spacing) * 8.5);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-11 {
    height: calc(var(--spacing) * 11);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-12\.5 {
    height: calc(var(--spacing) * 12.5);
  }
  .h-13 {
    height: calc(var(--spacing) * 13);
  }
  .h-14 {
    height: calc(var(--spacing) * 14);
  }
  .h-15 {
    height: calc(var(--spacing) * 15);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-18 {
    height: calc(var(--spacing) * 18);
  }
  .h-20 {
    height: calc(var(--spacing) * 20);
  }
  .h-21 {
    height: calc(var(--spacing) * 21);
  }
  .h-24 {
    height: calc(var(--spacing) * 24);
  }
  .h-28 {
    height: calc(var(--spacing) * 28);
  }
  .h-32 {
    height: calc(var(--spacing) * 32);
  }
  .h-36 {
    height: calc(var(--spacing) * 36);
  }
  .h-40 {
    height: calc(var(--spacing) * 40);
  }
  .h-42 {
    height: calc(var(--spacing) * 42);
  }
  .h-52 {
    height: calc(var(--spacing) * 52);
  }
  .h-60 {
    height: calc(var(--spacing) * 60);
  }
  .h-70 {
    height: calc(var(--spacing) * 70);
  }
  .h-80 {
    height: calc(var(--spacing) * 80);
  }
  .h-\[0\.33px\] {
    height: 0.33px;
  }
  .h-\[4px\] {
    height: 4px;
  }
  .h-\[5px\] {
    height: 5px;
  }
  .h-\[6px\] {
    height: 6px;
  }
  .h-\[7px\] {
    height: 7px;
  }
  .h-\[9px\] {
    height: 9px;
  }
  .h-\[10px\] {
    height: 10px;
  }
  .h-\[10px\]\! {
    height: 10px !important;
  }
  .h-\[11px\] {
    height: 11px;
  }
  .h-\[12px\] {
    height: 12px;
  }
  .h-\[13px\] {
    height: 13px;
  }
  .h-\[14px\] {
    height: 14px;
  }
  .h-\[15px\] {
    height: 15px;
  }
  .h-\[17px\] {
    height: 17px;
  }
  .h-\[18px\] {
    height: 18px;
  }
  .h-\[21px\] {
    height: 21px;
  }
  .h-\[22px\] {
    height: 22px;
  }
  .h-\[25px\] {
    height: 25px;
  }
  .h-\[26px\] {
    height: 26px;
  }
  .h-\[30px\] {
    height: 30px;
  }
  .h-\[34px\] {
    height: 34px;
  }
  .h-\[38px\] {
    height: 38px;
  }
  .h-\[40px\] {
    height: 40px;
  }
  .h-\[44px\] {
    height: 44px;
  }
  .h-\[50px\] {
    height: 50px;
  }
  .h-\[52px\] {
    height: 52px;
  }
  .h-\[54px\] {
    height: 54px;
  }
  .h-\[56\.5vw\] {
    height: 56.5vw;
  }
  .h-\[56px\] {
    height: 56px;
  }
  .h-\[62px\] {
    height: 62px;
  }
  .h-\[64px\] {
    height: 64px;
  }
  .h-\[66px\] {
    height: 66px;
  }
  .h-\[70px\] {
    height: 70px;
  }
  .h-\[86px\] {
    height: 86px;
  }
  .h-\[88px\] {
    height: 88px;
  }
  .h-\[92px\] {
    height: 92px;
  }
  .h-\[100px\] {
    height: 100px;
  }
  .h-\[110px\] {
    height: 110px;
  }
  .h-\[120px\] {
    height: 120px;
  }
  .h-\[122px\] {
    height: 122px;
  }
  .h-\[130px\] {
    height: 130px;
  }
  .h-\[140px\] {
    height: 140px;
  }
  .h-\[150px\] {
    height: 150px;
  }
  .h-\[165px\] {
    height: 165px;
  }
  .h-\[200px\] {
    height: 200px;
  }
  .h-\[212px\] {
    height: 212px;
  }
  .h-\[360px\] {
    height: 360px;
  }
  .h-\[380px\] {
    height: 380px;
  }
  .h-\[calc\(208px\+var\(--tg-viewport-safe-area-inset-bottom\)\)\] {
    height: calc(208px + var(--tg-viewport-safe-area-inset-bottom));
  }
  .h-\[calc\(var\(--tg-viewport-safe-area-inset-top\)\+32px\)\] {
    height: calc(var(--tg-viewport-safe-area-inset-top) + 32px);
  }
  .h-auto {
    height: auto;
  }
  .h-dvh {
    height: 100dvh;
  }
  .h-full {
    height: 100%;
  }
  .h-px {
    height: 1px;
  }
  .h-screen {
    height: 100vh;
    height: 100dvh;
  }
  .max-h-5 {
    max-height: calc(var(--spacing) * 5);
  }
  .max-h-16 {
    max-height: calc(var(--spacing) * 16);
  }
  .max-h-40 {
    max-height: calc(var(--spacing) * 40);
  }
  .max-h-\[60vh\] {
    max-height: 60vh;
  }
  .max-h-\[68px\] {
    max-height: 68px;
  }
  .max-h-\[320px\] {
    max-height: 320px;
  }
  .max-h-\[calc\(100vh-\(var\(--tg-viewport-safe-area-inset-top\)\+48px\)\)\] {
    max-height: calc(100vh - (var(--tg-viewport-safe-area-inset-top) + 48px));
  }
  .max-h-full {
    max-height: 100%;
  }
  .min-h-8\.5 {
    min-height: calc(var(--spacing) * 8.5);
  }
  .min-h-10 {
    min-height: calc(var(--spacing) * 10);
  }
  .min-h-37\.5 {
    min-height: calc(var(--spacing) * 37.5);
  }
  .min-h-\[46px\] {
    min-height: 46px;
  }
  .min-h-\[52px\] {
    min-height: 52px;
  }
  .min-h-\[54px\] {
    min-height: 54px;
  }
  .min-h-\[60vh\] {
    min-height: 60vh;
  }
  .min-h-\[64px\] {
    min-height: 64px;
  }
  .min-h-\[68px\] {
    min-height: 68px;
  }
  .min-h-\[70px\] {
    min-height: 70px;
  }
  .min-h-\[130px\] {
    min-height: 130px;
  }
  .min-h-full {
    min-height: 100%;
  }
  .min-h-screen {
    min-height: 100vh;
    min-height: 100dvh;
  }
  .w-0 {
    width: calc(var(--spacing) * 0);
  }
  .w-0\.5 {
    width: calc(var(--spacing) * 0.5);
  }
  .w-1 {
    width: calc(var(--spacing) * 1);
  }
  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }
  .w-2 {
    width: calc(var(--spacing) * 2);
  }
  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }
  .w-2\/3 {
    width: 66.6667%;
  }
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
  .w-3\! {
    width: calc(var(--spacing) * 3) !important;
  }
  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }
  .w-3\/4 {
    width: 75%;
  }
  .w-3\/5 {
    width: 60%;
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-4\.5 {
    width: calc(var(--spacing) * 4.5);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-5\.5 {
    width: calc(var(--spacing) * 5.5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-9\.5 {
    width: calc(var(--spacing) * 9.5);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-10\.5 {
    width: calc(var(--spacing) * 10.5);
  }
  .w-11 {
    width: calc(var(--spacing) * 11);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-12\.5 {
    width: calc(var(--spacing) * 12.5);
  }
  .w-13 {
    width: calc(var(--spacing) * 13);
  }
  .w-14 {
    width: calc(var(--spacing) * 14);
  }
  .w-15 {
    width: calc(var(--spacing) * 15);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-17 {
    width: calc(var(--spacing) * 17);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-21 {
    width: calc(var(--spacing) * 21);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-28 {
    width: calc(var(--spacing) * 28);
  }
  .w-30 {
    width: calc(var(--spacing) * 30);
  }
  .w-32 {
    width: calc(var(--spacing) * 32);
  }
  .w-35 {
    width: calc(var(--spacing) * 35);
  }
  .w-36 {
    width: calc(var(--spacing) * 36);
  }
  .w-40 {
    width: calc(var(--spacing) * 40);
  }
  .w-48 {
    width: calc(var(--spacing) * 48);
  }
  .w-50 {
    width: calc(var(--spacing) * 50);
  }
  .w-70 {
    width: calc(var(--spacing) * 70);
  }
  .w-80 {
    width: calc(var(--spacing) * 80);
  }
  .w-\[4px\] {
    width: 4px;
  }
  .w-\[5px\] {
    width: 5px;
  }
  .w-\[7px\] {
    width: 7px;
  }
  .w-\[9px\] {
    width: 9px;
  }
  .w-\[10px\] {
    width: 10px;
  }
  .w-\[10px\]\! {
    width: 10px !important;
  }
  .w-\[15px\] {
    width: 15px;
  }
  .w-\[18px\] {
    width: 18px;
  }
  .w-\[25px\] {
    width: 25px;
  }
  .w-\[29px\] {
    width: 29px;
  }
  .w-\[30\%\] {
    width: 30%;
  }
  .w-\[30px\] {
    width: 30px;
  }
  .w-\[32px\] {
    width: 32px;
  }
  .w-\[34px\] {
    width: 34px;
  }
  .w-\[37px\] {
    width: 37px;
  }
  .w-\[44px\] {
    width: 44px;
  }
  .w-\[45px\] {
    width: 45px;
  }
  .w-\[70\%\] {
    width: 70%;
  }
  .w-\[70px\] {
    width: 70px;
  }
  .w-\[80px\] {
    width: 80px;
  }
  .w-\[86px\] {
    width: 86px;
  }
  .w-\[90\%\] {
    width: 90%;
  }
  .w-\[90px\] {
    width: 90px;
  }
  .w-\[91px\] {
    width: 91px;
  }
  .w-\[93px\] {
    width: 93px;
  }
  .w-\[100px\] {
    width: 100px;
  }
  .w-\[110px\] {
    width: 110px;
  }
  .w-\[115px\] {
    width: 115px;
  }
  .w-\[120px\] {
    width: 120px;
  }
  .w-\[150px\] {
    width: 150px;
  }
  .w-\[168px\] {
    width: 168px;
  }
  .w-\[170px\] {
    width: 170px;
  }
  .w-\[328px\] {
    width: 328px;
  }
  .w-\[calc\(100\%\+32px\)\] {
    width: calc(100% + 32px);
  }
  .w-\[calc\(100\%-16px\)\] {
    width: calc(100% - 16px);
  }
  .w-\[calc\(100\%-68px\)\] {
    width: calc(100% - 68px);
  }
  .w-auto {
    width: auto;
  }
  .w-fit {
    width: fit-content;
  }
  .w-fit\! {
    width: fit-content !important;
  }
  .w-full {
    width: 100%;
  }
  .w-max {
    width: max-content;
  }
  .w-min {
    width: min-content;
  }
  .w-px {
    width: 1px;
  }
  .max-w-12 {
    max-width: calc(var(--spacing) * 12);
  }
  .max-w-30 {
    max-width: calc(var(--spacing) * 30);
  }
  .max-w-50 {
    max-width: calc(var(--spacing) * 50);
  }
  .max-w-75 {
    max-width: calc(var(--spacing) * 75);
  }
  .max-w-\[100px\] {
    max-width: 100px;
  }
  .max-w-\[120px\] {
    max-width: 120px;
  }
  .max-w-\[165\.5px\] {
    max-width: 165.5px;
  }
  .max-w-\[220px\] {
    max-width: 220px;
  }
  .max-w-\[280px\]\! {
    max-width: 280px !important;
  }
  .max-w-\[300px\] {
    max-width: 300px;
  }
  .max-w-\[330px\]\! {
    max-width: 330px !important;
  }
  .max-w-\[360px\]\! {
    max-width: 360px !important;
  }
  .max-w-\[calc\(\(100\%-8px\)\/2\)\] {
    max-width: calc(50% - 4px);
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xs {
    max-width: var(--container-xs);
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .min-w-4\.5 {
    min-width: calc(var(--spacing) * 4.5);
  }
  .min-w-5 {
    min-width: calc(var(--spacing) * 5);
  }
  .min-w-7 {
    min-width: calc(var(--spacing) * 7);
  }
  .min-w-10 {
    min-width: calc(var(--spacing) * 10);
  }
  .min-w-11\.5 {
    min-width: calc(var(--spacing) * 11.5);
  }
  .min-w-12 {
    min-width: calc(var(--spacing) * 12);
  }
  .min-w-40 {
    min-width: calc(var(--spacing) * 40);
  }
  .min-w-80 {
    min-width: calc(var(--spacing) * 80);
  }
  .min-w-\[12px\] {
    min-width: 12px;
  }
  .min-w-\[30px\] {
    min-width: 30px;
  }
  .min-w-\[54px\] {
    min-width: 54px;
  }
  .min-w-\[56px\] {
    min-width: 56px;
  }
  .min-w-\[57\%\] {
    min-width: 57%;
  }
  .min-w-\[64px\] {
    min-width: 64px;
  }
  .min-w-\[70px\] {
    min-width: 70px;
  }
  .min-w-\[75px\] {
    min-width: 75px;
  }
  .min-w-\[103px\] {
    min-width: 103px;
  }
  .min-w-\[288px\] {
    min-width: 288px;
  }
  .min-w-\[328px\] {
    min-width: 328px;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-1\/2 {
    flex: 50%;
  }
  .flex-none {
    flex: none;
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .flex-shrink-0,
  .shrink-0 {
    flex-shrink: 0;
  }
  .flex-grow,
  .grow {
    flex-grow: 1;
  }
  .grow-0 {
    flex-grow: 0;
  }
  .basis-8 {
    flex-basis: calc(var(--spacing) * 8);
  }
  .basis-\[54px\] {
    flex-basis: 54px;
  }
  .basis-auto {
    flex-basis: auto;
  }
  .basis-full {
    flex-basis: 100%;
  }
  .caption-bottom {
    caption-side: bottom;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .-translate-1\/2 {
    --tw-translate-x: -50%;
    --tw-translate-y: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-1\/2 {
    --tw-translate-x: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-15 {
    --tw-translate-x: calc(var(--spacing) * -15);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-1\/2 {
    --tw-translate-x: 50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-1\/4 {
    --tw-translate-x: 25%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-3 {
    --tw-translate-x: calc(var(--spacing) * 3);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1 {
    --tw-translate-y: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/4 {
    --tw-translate-y: -25%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-2 {
    --tw-translate-y: calc(var(--spacing) * -2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-3 {
    --tw-translate-y: calc(var(--spacing) * -3);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-full {
    --tw-translate-y: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-0\.5 {
    --tw-translate-y: calc(var(--spacing) * 0.5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-1 {
    --tw-translate-y: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-1\/2 {
    --tw-translate-y: 50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-1\/4 {
    --tw-translate-y: 25%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-2 {
    --tw-translate-y: calc(var(--spacing) * 2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-3 {
    --tw-translate-y: calc(var(--spacing) * 3);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-110 {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .-scale-x-100 {
    --tw-scale-x: -100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .-rotate-2 {
    rotate: -2deg;
  }
  .-rotate-90 {
    rotate: -90deg;
  }
  .-rotate-180 {
    rotate: -180deg;
  }
  .rotate-0 {
    rotate: none;
  }
  .rotate-90 {
    rotate: 90deg;
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .rotate-\[-15\.03deg\] {
    rotate: -15.03deg;
  }
  .rotate-\[4\.09deg\] {
    rotate: 4.09deg;
  }
  .rotate-\[8deg\] {
    rotate: 8deg;
  }
  .rotate-\[28\.01deg\] {
    rotate: 28.01deg;
  }
  .-skew-x-3 {
    --tw-skew-x: skewX(-3deg);
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,)
      var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .-skew-x-6 {
    --tw-skew-x: skewX(-6deg);
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,)
      var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .-skew-x-12 {
    --tw-skew-x: skewX(-12deg);
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,)
      var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .skew-x-12 {
    --tw-skew-x: skewX(12deg);
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,)
      var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,)
      var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-pulse {
    animation: var(--animate-pulse);
  }
  .animate-spin {
    animation: var(--animate-spin);
  }
  .cursor-default {
    cursor: default;
  }
  .cursor-grab {
    cursor: grab;
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .cursor-text {
    cursor: text;
  }
  .touch-pan-x {
    --tw-pan-x: pan-x;
    touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,);
  }
  .touch-none {
    touch-action: none;
  }
  .resize {
    resize: both;
  }
  .snap-x {
    scroll-snap-type: x var(--tw-scroll-snap-strictness);
  }
  .snap-mandatory {
    --tw-scroll-snap-strictness: mandatory;
  }
  .snap-center {
    scroll-snap-align: center;
  }
  .list-decimal {
    list-style-type: decimal;
  }
  .list-disc {
    list-style-type: disc;
  }
  .auto-rows-min {
    grid-auto-rows: min-content;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-cols-\[17px_minmax\(0\,1fr\)_minmax\(110px\,40\%\)\] {
    grid-template-columns: 17px minmax(0, 1fr) minmax(110px, 40%);
  }
  .grid-cols-\[auto\,1fr\] {
    grid-template-columns: auto, 1fr;
  }
  .grid-cols-\[repeat\(auto-fill\,minmax\(160px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
  .grid-rows-\[auto_auto\] {
    grid-template-rows: auto auto;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-col-reverse {
    flex-direction: column-reverse;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-nowrap {
    flex-wrap: nowrap;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .place-items-center {
    place-items: center;
  }
  .content-center {
    align-content: center;
  }
  .\!items-center {
    align-items: center !important;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .items-center-safe {
    align-items: safe center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .\!justify-start {
    justify-content: flex-start !important;
  }
  .justify-around {
    justify-content: space-around;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-center-safe {
    justify-content: safe center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }
  .gap-0\! {
    gap: calc(var(--spacing) * 0) !important;
  }
  .gap-0\.5 {
    gap: calc(var(--spacing) * 0.5);
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-\[4px\] {
    gap: 4px;
  }
  .gap-\[6px\] {
    gap: 6px;
  }
  .gap-\[7px\] {
    gap: 7px;
  }
  .gap-\[10px\] {
    gap: 10px;
  }
  :where(.space-y-0\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(
      calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse)
    );
    margin-block-end: calc(
      calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse))
    );
  }
  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(
      calc(var(--spacing) * 1) * var(--tw-space-y-reverse)
    );
    margin-block-end: calc(
      calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))
    );
  }
  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(
      calc(var(--spacing) * 2) * var(--tw-space-y-reverse)
    );
    margin-block-end: calc(
      calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))
    );
  }
  :where(.space-y-2\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(
      calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse)
    );
    margin-block-end: calc(
      calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse))
    );
  }
  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(
      calc(var(--spacing) * 3) * var(--tw-space-y-reverse)
    );
    margin-block-end: calc(
      calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))
    );
  }
  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(
      calc(var(--spacing) * 4) * var(--tw-space-y-reverse)
    );
    margin-block-end: calc(
      calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))
    );
  }
  :where(.space-y-5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(
      calc(var(--spacing) * 5) * var(--tw-space-y-reverse)
    );
    margin-block-end: calc(
      calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse))
    );
  }
  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(
      calc(var(--spacing) * 6) * var(--tw-space-y-reverse)
    );
    margin-block-end: calc(
      calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))
    );
  }
  .gap-x-1 {
    column-gap: calc(var(--spacing) * 1);
  }
  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-y-1 {
    row-gap: calc(var(--spacing) * 1);
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }
  .self-start {
    align-self: flex-start;
  }
  .justify-self-end {
    justify-self: flex-end;
  }
  .justify-self-stretch {
    justify-self: stretch;
  }
  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-visible {
    overflow: visible;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-x-hidden {
    overflow-x: hidden;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .squircle-2xl\/\[40px\] {
    border-radius: 26px;
  }
  @supports (corner-shape: squircle) {
    .squircle-2xl\/\[40px\] {
      corner-shape: squircle;
      border-radius: 40px;
    }
  }
  .squircle-2xl\/\[50px\] {
    border-radius: 26px;
  }
  @supports (corner-shape: squircle) {
    .squircle-2xl\/\[50px\] {
      corner-shape: squircle;
      border-radius: 50px;
    }
  }
  .squircle-2xl\/\[50px\]\! {
    border-radius: 26px !important;
  }
  @supports (corner-shape: squircle) {
    .squircle-2xl\/\[50px\]\! {
      corner-shape: squircle !important;
      border-radius: 50px !important;
    }
  }
  .squircle-3xl\/\[60px\] {
    border-radius: 28px;
  }
  @supports (corner-shape: squircle) {
    .squircle-3xl\/\[60px\] {
      corner-shape: squircle;
      border-radius: 60px;
    }
  }
  .squircle-md\/\[30px\] {
    border-radius: 16px;
  }
  @supports (corner-shape: squircle) {
    .squircle-md\/\[30px\] {
      corner-shape: squircle;
      border-radius: 30px;
    }
  }
  .squircle-md\/\[50px\] {
    border-radius: 16px;
  }
  @supports (corner-shape: squircle) {
    .squircle-md\/\[50px\] {
      corner-shape: squircle;
      border-radius: 50px;
    }
  }
  .squircle-xl\/\[50px\] {
    border-radius: 24px;
  }
  @supports (corner-shape: squircle) {
    .squircle-xl\/\[50px\] {
      corner-shape: squircle;
      border-radius: 50px;
    }
  }
  .\!squircle-2xl {
    border-radius: 26px !important;
  }
  @supports (corner-shape: squircle) {
    .\!squircle-2xl {
      corner-shape: squircle !important;
      border-radius: 70px !important;
    }
  }
  .squircle-2md {
    border-radius: 18px;
  }
  @supports (corner-shape: squircle) {
    .squircle-2md {
      corner-shape: squircle;
      border-radius: 70px;
    }
  }
  .squircle-2sm {
    border-radius: 10px;
  }
  @supports (corner-shape: squircle) {
    .squircle-2sm {
      corner-shape: squircle;
      border-radius: 70px;
    }
  }
  .squircle-2xl {
    border-radius: 26px;
  }
  @supports (corner-shape: squircle) {
    .squircle-2xl {
      corner-shape: squircle;
      border-radius: 70px;
    }
  }
  .squircle-3xl {
    border-radius: 28px;
  }
  @supports (corner-shape: squircle) {
    .squircle-3xl {
      corner-shape: squircle;
      border-radius: 70px;
    }
  }
  .squircle-4xl {
    border-radius: 32px;
  }
  @supports (corner-shape: squircle) {
    .squircle-4xl {
      corner-shape: squircle;
      border-radius: 70px;
    }
  }
  .squircle-\[44px\] {
    border-radius: 44px;
  }
  @supports (corner-shape: squircle) {
    .squircle-\[44px\] {
      corner-shape: squircle;
      border-radius: 70px;
    }
  }
  .squircle-lg {
    border-radius: 20px;
  }
  @supports (corner-shape: squircle) {
    .squircle-lg {
      corner-shape: squircle;
      border-radius: 70px;
    }
  }
  .squircle-md {
    border-radius: 16px;
  }
  @supports (corner-shape: squircle) {
    .squircle-md {
      corner-shape: squircle;
      border-radius: 70px;
    }
  }
  .squircle-sm {
    border-radius: 12px;
  }
  @supports (corner-shape: squircle) {
    .squircle-sm {
      corner-shape: squircle;
      border-radius: 70px;
    }
  }
  .squircle-xl {
    border-radius: 24px;
  }
  @supports (corner-shape: squircle) {
    .squircle-xl {
      corner-shape: squircle;
      border-radius: 70px;
    }
  }
  .squircle-xs {
    border-radius: 8px;
  }
  @supports (corner-shape: squircle) {
    .squircle-xs {
      corner-shape: squircle;
      border-radius: 70px;
    }
    .squircle {
      corner-shape: squircle;
      border-radius: 70px !important;
    }
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2md {
    border-radius: 18px;
  }
  .rounded-2sm {
    border-radius: 10px;
  }
  .rounded-2xl {
    border-radius: 26px;
  }
  .rounded-2xs {
    border-radius: 4px;
  }
  .rounded-3xl {
    border-radius: 28px;
  }
  .rounded-4xl {
    border-radius: 32px;
  }
  .rounded-\[2px\] {
    border-radius: 2px;
  }
  .rounded-\[4px\] {
    border-radius: 4px;
  }
  .rounded-\[5px\] {
    border-radius: 5px;
  }
  .rounded-\[6px\] {
    border-radius: 6px;
  }
  .rounded-\[7px\] {
    border-radius: 7px;
  }
  .rounded-\[8px\] {
    border-radius: 8px;
  }
  .rounded-\[9px\] {
    border-radius: 9px;
  }
  .rounded-\[13px\] {
    border-radius: 13px;
  }
  .rounded-\[14px\] {
    border-radius: 14px;
  }
  .rounded-\[20px\] {
    border-radius: 20px;
  }
  .rounded-\[22px\] {
    border-radius: 22px;
  }
  .rounded-\[100px\] {
    border-radius: 100px;
  }
  .rounded-full {
    border-radius: 3.40282e38px;
  }
  .rounded-lg {
    border-radius: 20px;
  }
  .rounded-md {
    border-radius: 16px;
  }
  .rounded-none {
    border-radius: 0;
  }
  .rounded-none\! {
    border-radius: 0 !important;
  }
  .rounded-semimd {
    border-radius: 14px;
  }
  .rounded-semimd\! {
    border-radius: 14px !important;
  }
  .rounded-sm {
    border-radius: 12px;
  }
  .rounded-xl {
    border-radius: 24px;
  }
  .rounded-xs {
    border-radius: 8px;
  }
  .rounded-t-2xl {
    border-top-left-radius: 26px;
    border-top-right-radius: 26px;
  }
  .rounded-t-4xl {
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
  }
  .rounded-t-\[13px\] {
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
  }
  .rounded-t-\[24px\] {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }
  .rounded-t-lg {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
  .rounded-t-xl {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }
  .rounded-l-full {
    border-top-left-radius: 3.40282e38px;
    border-bottom-left-radius: 3.40282e38px;
  }
  .rounded-l-lg {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  .rounded-r-lg {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  .rounded-b-2xl {
    border-bottom-right-radius: 26px;
    border-bottom-left-radius: 26px;
  }
  .rounded-b-3xl {
    border-bottom-right-radius: 28px;
    border-bottom-left-radius: 28px;
  }
  .rounded-b-\[22px\] {
    border-bottom-right-radius: 22px;
    border-bottom-left-radius: 22px;
  }
  .rounded-b-md {
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
  }
  .rounded-b-none {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .rounded-b-xl {
    border-bottom-right-radius: 24px;
    border-bottom-left-radius: 24px;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border\! {
    border-style: var(--tw-border-style) !important;
    border-width: 1px !important;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }
  .border-1 {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-\[0\.5px\] {
    border-style: var(--tw-border-style);
    border-width: 0.5px;
  }
  .border-\[1\.5px\] {
    border-style: var(--tw-border-style);
    border-width: 1.5px;
  }
  .border-\[2px\] {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-t-\[0\.33px\] {
    border-top-style: var(--tw-border-style);
    border-top-width: 0.33px;
  }
  .border-b,
  .border-b-1,
  .border-b-\[1px\] {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-none {
    --tw-border-style: none;
    border-style: none;
  }
  .border-\[\#1B1B1B\] {
    border-color: #1b1b1b;
  }
  .border-\[\#3A3A3A\] {
    border-color: #3a3a3a;
  }
  .border-\[\#191919\] {
    border-color: #191919;
  }
  .border-\[\#414141\] {
    border-color: #414141;
  }
  .border-\[\#FA5A5D\] {
    border-color: #fa5a5d;
  }
  .border-accent\/20 {
    border-color: var(--accent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-accent\/20 {
      border-color: color-mix(in oklab, var(--accent) 20%, transparent);
    }
  }
  .border-background {
    border-color: var(--background);
  }
  .border-border,
  .border-border\/50 {
    border-color: var(--border);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/50 {
      border-color: color-mix(in oklab, var(--border) 50%, transparent);
    }
  }
  .border-cyan\/20 {
    border-color: var(--bg-cyan);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-cyan\/20 {
      border-color: color-mix(in oklab, var(--bg-cyan) 20%, transparent);
    }
  }
  .border-dark {
    border-color: var(--bg-dark);
  }
  .border-dark-2 {
    border-color: var(--bg-dark-2);
  }
  .border-dark-4 {
    border-color: var(--bg-dark-4);
  }
  .border-destructive\! {
    border-color: var(--destructive) !important;
  }
  .border-gold\/20 {
    border-color: var(--bg-gold);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-gold\/20 {
      border-color: color-mix(in oklab, var(--bg-gold) 20%, transparent);
    }
  }
  .border-gray-300 {
    border-color: var(--color-gray-300);
  }
  .border-gray-400 {
    border-color: var(--color-gray-400);
  }
  .border-grey {
    border-color: var(--bg-grey);
  }
  .border-input {
    border-color: var(--input);
  }
  .border-muted {
    border-color: var(--muted);
  }
  .border-primary,
  .border-primary\/20 {
    border-color: var(--primary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/20 {
      border-color: color-mix(in oklab, var(--primary) 20%, transparent);
    }
  }
  .border-purple\/20 {
    border-color: var(--bg-purple);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-purple\/20 {
      border-color: color-mix(in oklab, var(--bg-purple) 20%, transparent);
    }
  }
  .border-secondary {
    border-color: var(--secondary);
  }
  .border-secondary-60 {
    border-color: var(--secondary-60);
  }
  .border-secondary-foreground {
    border-color: var(--secondary-foreground);
  }
  .border-transparent {
    border-color: #0000;
  }
  .border-warm-coral\/20 {
    border-color: var(--warm-coral);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-warm-coral\/20 {
      border-color: color-mix(in oklab, var(--warm-coral) 20%, transparent);
    }
  }
  .border-white\/8 {
    border-color: #ffffff14;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/8 {
      border-color: color-mix(in oklab, var(--color-white) 8%, transparent);
    }
  }
  .border-white\/24 {
    border-color: #ffffff3d;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/24 {
      border-color: color-mix(in oklab, var(--color-white) 24%, transparent);
    }
  }
  .border-white\/30 {
    border-color: #ffffff4d;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/30 {
      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }
  .border-t-\[\#3C3C435C\] {
    border-top-color: #3c3c435c;
  }
  .glass {
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    background-color: #0000001f;
  }
  .bg-\[\#0F0F0F29\],
  .bg-\[\#0F0F0F\]\/16 {
    background-color: #0f0f0f29;
  }
  .bg-\[\#00BCD4\] {
    background-color: #00bcd4;
  }
  .bg-\[\#1ABC9C\] {
    background-color: #1abc9c;
  }
  .bg-\[\#1C1C1C99\],
  .bg-\[\#1C1C1C\]\/60 {
    background-color: #1c1c1c99;
  }
  .bg-\[\#1E1E1E\] {
    background-color: #1e1e1e;
  }
  .bg-\[\#1E8449\] {
    background-color: #1e8449;
  }
  .bg-\[\#2D2D2D\] {
    background-color: #2d2d2d;
  }
  .bg-\[\#03A9F4\] {
    background-color: #03a9f4;
  }
  .bg-\[\#3A3A3AA3\] {
    background-color: #3a3a3aa3;
  }
  .bg-\[\#3a3a3a\] {
    background-color: #3a3a3a;
  }
  .bg-\[\#4A9CC2\]\/8 {
    background-color: #4a9cc214;
  }
  .bg-\[\#5B2C6F\] {
    background-color: #5b2c6f;
  }
  .bg-\[\#6D51DE\] {
    background-color: #6d51de;
  }
  .bg-\[\#8E44AD\] {
    background-color: #8e44ad;
  }
  .bg-\[\#9B59B6\] {
    background-color: #9b59b6;
  }
  .bg-\[\#15AA303D\] {
    background-color: #15aa303d;
  }
  .bg-\[\#16A085\] {
    background-color: #16a085;
  }
  .bg-\[\#27AE60\] {
    background-color: #27ae60;
  }
  .bg-\[\#49DE64\] {
    background-color: #49de64;
  }
  .bg-\[\#49DF64\]\/8 {
    background-color: #49df6414;
  }
  .bg-\[\#49DF641F\] {
    background-color: #49df641f;
  }
  .bg-\[\#49df64\] {
    background-color: #49df64;
  }
  .bg-\[\#262A2F\] {
    background-color: #262a2f;
  }
  .bg-\[\#673AB7\] {
    background-color: #673ab7;
  }
  .bg-\[\#22C55E\]\/8 {
    background-color: #22c55e14;
  }
  .bg-\[\#22c55e\] {
    background-color: #22c55e;
  }
  .bg-\[\#2980B9\] {
    background-color: #2980b9;
  }
  .bg-\[\#3498DB\] {
    background-color: #3498db;
  }
  .bg-\[\#23272C\] {
    background-color: #23272c;
  }
  .bg-\[\#121212\] {
    background-color: #121212;
  }
  .bg-\[\#181818\] {
    background-color: #181818;
  }
  .bg-\[\#212020\] {
    background-color: #212020;
  }
  .bg-\[\#323232a3\] {
    background-color: #323232a3;
  }
  .bg-\[\#646464\]\/20 {
    background-color: #64646433;
  }
  .bg-\[\#AF51DE\]\/8 {
    background-color: #af51de14;
  }
  .bg-\[\#C0392B\] {
    background-color: #c0392b;
  }
  .bg-\[\#C2185B\] {
    background-color: #c2185b;
  }
  .bg-\[\#D35400\] {
    background-color: #d35400;
  }
  .bg-\[\#E74C3C\] {
    background-color: #e74c3c;
  }
  .bg-\[\#E91E63\] {
    background-color: #e91e63;
  }
  .bg-\[\#F1C40F\] {
    background-color: #f1c40f;
  }
  .bg-\[\#F39C12\] {
    background-color: #f39c12;
  }
  .bg-\[\#FBC294\]\/20 {
    background-color: #fbc29433;
  }
  .bg-\[\#FF55E8\]\/22 {
    background-color: #ff55e838;
  }
  .bg-\[\#FF5722\] {
    background-color: #ff5722;
  }
  .bg-\[\#FF8317\] {
    background-color: #ff8317;
  }
  .bg-\[\#b3b3b3\]\/70 {
    background-color: #b3b3b3b3;
  }
  .bg-\[rgba\(28\,28\,28\,0\.6\)\],
  .bg-\[rgba\(28\,28\,28\,0\.60\)\] {
    background-color: #1c1c1c99;
  }
  .bg-\[rgba\(40\,39\,39\,0\.8\)\] {
    background-color: #282727cc;
  }
  .bg-\[rgba\(40\,39\,39\,0\.32\)\] {
    background-color: #28272752;
  }
  .bg-\[rgba\(250\,90\,93\,0\.24\)\] {
    background-color: #fa5a5d3d;
  }
  .bg-\[var\(--destructive-secondary\)\] {
    background-color: var(--destructive-secondary);
  }
  .bg-accent {
    background-color: var(--accent);
  }
  .bg-accent\! {
    background-color: var(--accent) !important;
  }
  .bg-accent\/15 {
    background-color: var(--accent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-accent\/15 {
      background-color: color-mix(in oklab, var(--accent) 15%, transparent);
    }
  }
  .bg-accent\/20 {
    background-color: var(--accent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-accent\/20 {
      background-color: color-mix(in oklab, var(--accent) 20%, transparent);
    }
  }
  .bg-amber-400 {
    background-color: var(--color-amber-400);
  }
  .bg-background {
    background-color: var(--background);
  }
  .bg-background-secondary {
    background-color: var(--color-background-secondary);
  }
  .bg-background-secondary-2 {
    background-color: var(--color-background-secondary-2);
  }
  .bg-background-secondary\/20 {
    background-color: var(--color-background-secondary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-background-secondary\/20 {
      background-color: color-mix(
        in oklab,
        var(--color-background-secondary) 20%,
        transparent
      );
    }
  }
  .bg-background\/10 {
    background-color: var(--background);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/10 {
      background-color: color-mix(in oklab, var(--background) 10%, transparent);
    }
  }
  .bg-background\/95 {
    background-color: var(--background);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/95 {
      background-color: color-mix(in oklab, var(--background) 95%, transparent);
    }
  }
  .bg-black {
    background-color: var(--color-black);
  }
  .bg-black\/12 {
    background-color: #0000001f;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/12 {
      background-color: color-mix(
        in oklab,
        var(--color-black) 12%,
        transparent
      );
    }
  }
  .bg-black\/30 {
    background-color: #0000004d;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/30 {
      background-color: color-mix(
        in oklab,
        var(--color-black) 30%,
        transparent
      );
    }
  }
  .bg-black\/50 {
    background-color: #00000080;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/50 {
      background-color: color-mix(
        in oklab,
        var(--color-black) 50%,
        transparent
      );
    }
  }
  .bg-black\/60 {
    background-color: #0009;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/60 {
      background-color: color-mix(
        in oklab,
        var(--color-black) 60%,
        transparent
      );
    }
  }
  .bg-blue-500\/25 {
    background-color: #3080ff40;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-500\/25 {
      background-color: color-mix(
        in oklab,
        var(--color-blue-500) 25%,
        transparent
      );
    }
  }
  .bg-border {
    background-color: var(--border);
  }
  .bg-bright-azure {
    background-color: var(--bright-azure);
  }
  .bg-bright-azure-2 {
    background-color: var(--bright-azure-2);
  }
  .bg-card {
    background-color: var(--card);
  }
  .bg-current {
    background-color: currentColor;
  }
  .bg-cyan,
  .bg-cyan\/12 {
    background-color: var(--bg-cyan);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-cyan\/12 {
      background-color: color-mix(in oklab, var(--bg-cyan) 12%, transparent);
    }
  }
  .bg-cyan\/20 {
    background-color: var(--bg-cyan);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-cyan\/20 {
      background-color: color-mix(in oklab, var(--bg-cyan) 20%, transparent);
    }
  }
  .bg-dark {
    background-color: var(--bg-dark);
  }
  .bg-dark-2 {
    background-color: var(--bg-dark-2);
  }
  .bg-dark-4 {
    background-color: var(--bg-dark-4);
  }
  .bg-dark\/80 {
    background-color: var(--bg-dark);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-dark\/80 {
      background-color: color-mix(in oklab, var(--bg-dark) 80%, transparent);
    }
  }
  .bg-darkness {
    background-color: var(--bg-darkness);
  }
  .bg-destructive {
    background-color: var(--destructive);
  }
  .bg-gold {
    background-color: var(--bg-gold);
  }
  .bg-gold\! {
    background-color: var(--bg-gold) !important;
  }
  .bg-gold\/8 {
    background-color: var(--bg-gold);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-gold\/8 {
      background-color: color-mix(in oklab, var(--bg-gold) 8%, transparent);
    }
  }
  .bg-gold\/12 {
    background-color: var(--bg-gold);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-gold\/12 {
      background-color: color-mix(in oklab, var(--bg-gold) 12%, transparent);
    }
  }
  .bg-gold\/15 {
    background-color: var(--bg-gold);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-gold\/15 {
      background-color: color-mix(in oklab, var(--bg-gold) 15%, transparent);
    }
  }
  .bg-gold\/20 {
    background-color: var(--bg-gold);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-gold\/20 {
      background-color: color-mix(in oklab, var(--bg-gold) 20%, transparent);
    }
  }
  .bg-gold\/44 {
    background-color: var(--bg-gold);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-gold\/44 {
      background-color: color-mix(in oklab, var(--bg-gold) 44%, transparent);
    }
  }
  .bg-grey {
    background-color: var(--bg-grey);
  }
  .bg-input,
  .bg-input\/60 {
    background-color: var(--input);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-input\/60 {
      background-color: color-mix(in oklab, var(--input) 60%, transparent);
    }
  }
  .bg-input\/80 {
    background-color: var(--input);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-input\/80 {
      background-color: color-mix(in oklab, var(--input) 80%, transparent);
    }
  }
  .bg-muted,
  .bg-muted\/34 {
    background-color: var(--muted);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/34 {
      background-color: color-mix(in oklab, var(--muted) 34%, transparent);
    }
  }
  .bg-muted\/50 {
    background-color: var(--muted);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/50 {
      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
    }
  }
  .bg-muted\/80 {
    background-color: var(--muted);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/80 {
      background-color: color-mix(in oklab, var(--muted) 80%, transparent);
    }
  }
  .bg-preview-notification {
    background-color: var(--preview-notification);
  }
  .bg-primary,
  .bg-primary\/10 {
    background-color: var(--primary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/10 {
      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    }
  }
  .bg-primary\/12 {
    background-color: var(--primary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/12 {
      background-color: color-mix(in oklab, var(--primary) 12%, transparent);
    }
  }
  .bg-primary\/15 {
    background-color: var(--primary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/15 {
      background-color: color-mix(in oklab, var(--primary) 15%, transparent);
    }
  }
  .bg-primary\/20 {
    background-color: var(--primary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/20 {
      background-color: color-mix(in oklab, var(--primary) 20%, transparent);
    }
  }
  .bg-purple,
  .bg-purple\/8 {
    background-color: var(--bg-purple);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-purple\/8 {
      background-color: color-mix(in oklab, var(--bg-purple) 8%, transparent);
    }
  }
  .bg-purple\/12 {
    background-color: var(--bg-purple);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-purple\/12 {
      background-color: color-mix(in oklab, var(--bg-purple) 12%, transparent);
    }
  }
  .bg-red-500 {
    background-color: var(--color-red-500);
  }
  .bg-secondary {
    background-color: var(--secondary);
  }
  .bg-secondary-40 {
    background-color: var(--secondary-40);
  }
  .bg-secondary-60 {
    background-color: var(--secondary-60);
  }
  .bg-secondary-60\! {
    background-color: var(--secondary-60) !important;
  }
  .bg-secondary-64 {
    background-color: var(--secondary-64);
  }
  .bg-secondary-64\! {
    background-color: var(--secondary-64) !important;
  }
  .bg-secondary-foreground {
    background-color: var(--secondary-foreground);
  }
  .bg-secondary-foreground\! {
    background-color: var(--secondary-foreground) !important;
  }
  .bg-secondary-foreground\/10 {
    background-color: var(--secondary-foreground);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-secondary-foreground\/10 {
      background-color: color-mix(
        in oklab,
        var(--secondary-foreground) 10%,
        transparent
      );
    }
  }
  .bg-secondary-foreground\/32 {
    background-color: var(--secondary-foreground);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-secondary-foreground\/32 {
      background-color: color-mix(
        in oklab,
        var(--secondary-foreground) 32%,
        transparent
      );
    }
  }
  .bg-secondary\/15 {
    background-color: var(--secondary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-secondary\/15 {
      background-color: color-mix(in oklab, var(--secondary) 15%, transparent);
    }
  }
  .bg-secondary\/20 {
    background-color: var(--secondary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-secondary\/20 {
      background-color: color-mix(in oklab, var(--secondary) 20%, transparent);
    }
  }
  .bg-secondary\/24 {
    background-color: var(--secondary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-secondary\/24 {
      background-color: color-mix(in oklab, var(--secondary) 24%, transparent);
    }
  }
  .bg-secondary\/32 {
    background-color: var(--secondary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-secondary\/32 {
      background-color: color-mix(in oklab, var(--secondary) 32%, transparent);
    }
  }
  .bg-secondary\/35 {
    background-color: var(--secondary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-secondary\/35 {
      background-color: color-mix(in oklab, var(--secondary) 35%, transparent);
    }
  }
  .bg-secondary\/40 {
    background-color: var(--secondary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-secondary\/40 {
      background-color: color-mix(in oklab, var(--secondary) 40%, transparent);
    }
  }
  .bg-secondary\/50 {
    background-color: var(--secondary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-secondary\/50 {
      background-color: color-mix(in oklab, var(--secondary) 50%, transparent);
    }
  }
  .bg-secondary\/64 {
    background-color: var(--secondary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-secondary\/64 {
      background-color: color-mix(in oklab, var(--secondary) 64%, transparent);
    }
  }
  .bg-secondary\/65 {
    background-color: var(--secondary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-secondary\/65 {
      background-color: color-mix(in oklab, var(--secondary) 65%, transparent);
    }
  }
  .bg-secondary\/80 {
    background-color: var(--secondary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-secondary\/80 {
      background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
    }
  }
  .bg-transparent {
    background-color: #0000;
  }
  .bg-transparent\! {
    background-color: #0000 !important;
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\! {
    background-color: var(--color-white) !important;
  }
  .bg-white\/3 {
    background-color: #ffffff08;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/3 {
      background-color: color-mix(in oklab, var(--color-white) 3%, transparent);
    }
  }
  .bg-white\/4 {
    background-color: #ffffff0a;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/4 {
      background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
    }
  }
  .bg-white\/5 {
    background-color: #ffffff0d;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/5 {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }
  .bg-white\/8 {
    background-color: #ffffff14;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/8 {
      background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
    }
  }
  .bg-white\/10 {
    background-color: #ffffff1a;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/10 {
      background-color: color-mix(
        in oklab,
        var(--color-white) 10%,
        transparent
      );
    }
  }
  .bg-white\/12 {
    background-color: #ffffff1f;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/12 {
      background-color: color-mix(
        in oklab,
        var(--color-white) 12%,
        transparent
      );
    }
  }
  .bg-white\/15 {
    background-color: #ffffff26;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/15 {
      background-color: color-mix(
        in oklab,
        var(--color-white) 15%,
        transparent
      );
    }
  }
  .bg-white\/16 {
    background-color: #ffffff29;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/16 {
      background-color: color-mix(
        in oklab,
        var(--color-white) 16%,
        transparent
      );
    }
  }
  .bg-white\/24 {
    background-color: #ffffff3d;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/24 {
      background-color: color-mix(
        in oklab,
        var(--color-white) 24%,
        transparent
      );
    }
  }
  .bg-white\/25 {
    background-color: #ffffff40;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/25 {
      background-color: color-mix(
        in oklab,
        var(--color-white) 25%,
        transparent
      );
    }
  }
  .bg-white\/40 {
    background-color: #fff6;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/40 {
      background-color: color-mix(
        in oklab,
        var(--color-white) 40%,
        transparent
      );
    }
  }
  .bg-white\/95 {
    background-color: #fffffff2;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/95 {
      background-color: color-mix(
        in oklab,
        var(--color-white) 95%,
        transparent
      );
    }
  }
  .bg-linear-to-l {
    --tw-gradient-position: to left;
  }
  @supports (background-image: linear-gradient(in lab, red, red)) {
    .bg-linear-to-l {
      --tw-gradient-position: to left in oklab;
    }
  }
  .bg-linear-to-l {
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-linear-to-r {
    --tw-gradient-position: to right;
  }
  @supports (background-image: linear-gradient(in lab, red, red)) {
    .bg-linear-to-r {
      --tw-gradient-position: to right in oklab;
    }
  }
  .bg-linear-to-r {
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-l {
    --tw-gradient-position: to left in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-\[linear-gradient\(90deg\,\#FAC297_0\%\,\#FFC386_50\%\,\#CA8E52_100\%\)\] {
    background-image: linear-gradient(90deg, #fac297, #ffc386, #ca8e52);
  }
  .bg-\[linear-gradient\(106\.57deg\,\#9339E2_6\.02\%\,\#22C55E_97\.01\%\)\] {
    background-image: linear-gradient(106.57deg, #9339e2 6.02%, #22c55e 97.01%);
  }
  .bg-\[radial-gradient\(120\%_120\%_at_50\%_-10\%\,rgba\(116\,255\,153\,0\.42\)\,rgba\(28\,57\,37\,0\.88\)_56\%\,rgba\(20\,20\,20\,0\.95\)_100\%\)\] {
    background-image: radial-gradient(
      120% 120% at 50% -10%,
      #74ff996b,
      #1c3925e0 56%,
      #141414f2
    );
  }
  .from-\[\#242424\] {
    --tw-gradient-from: #242424;
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .from-\[\#D96C28\] {
    --tw-gradient-from: #d96c28;
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .from-\[\#E3E3E3\] {
    --tw-gradient-from: #e3e3e3;
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .from-\[\#F1AA05\] {
    --tw-gradient-from: #f1aa05;
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .from-\[\#d96c28\] {
    --tw-gradient-from: #d96c28;
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .from-\[\#e3e3e3\] {
    --tw-gradient-from: #e3e3e3;
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .from-\[\#f1aa05\] {
    --tw-gradient-from: #f1aa05;
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .from-background {
    --tw-gradient-from: var(--background);
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .from-background\/30 {
    --tw-gradient-from: var(--background);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .from-background\/30 {
      --tw-gradient-from: color-mix(
        in oklab,
        var(--background) 30%,
        transparent
      );
    }
  }
  .from-background\/30 {
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .from-black {
    --tw-gradient-from: var(--color-black);
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .from-secondary {
    --tw-gradient-from: var(--secondary);
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .via-background\/20 {
    --tw-gradient-via: var(--background);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .via-background\/20 {
      --tw-gradient-via: color-mix(
        in oklab,
        var(--background) 20%,
        transparent
      );
    }
  }
  .via-background\/20 {
    --tw-gradient-via-stops:
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-via) var(--tw-gradient-via-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .to-\[\#9F9F9F\],
  .to-\[\#9f9f9f\] {
    --tw-gradient-to: #9f9f9f;
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .to-\[\#A43606\] {
    --tw-gradient-to: #a43606;
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .to-\[\#AB893B\] {
    --tw-gradient-to: #ab893b;
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .to-\[\#CE930A\] {
    --tw-gradient-to: #ce930a;
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .to-\[\#a43606\] {
    --tw-gradient-to: #a43606;
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .to-\[\#ce930a\] {
    --tw-gradient-to: #ce930a;
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .bg-cover {
    background-size: cover;
  }
  .bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
  }
  .bg-center {
    background-position: 50%;
  }
  .bg-no-repeat {
    background-repeat: no-repeat;
  }
  .fill-current {
    fill: currentColor;
  }
  .fill-muted-foreground {
    fill: var(--muted-foreground);
  }
  .fill-primary {
    fill: var(--primary);
  }
  .stroke-muted-foreground\/25 {
    stroke: var(--muted-foreground);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .stroke-muted-foreground\/25 {
      stroke: color-mix(in oklab, var(--muted-foreground) 25%, transparent);
    }
  }
  .stroke-4 {
    stroke-width: 4px;
  }
  .object-contain {
    object-fit: contain;
  }
  .object-cover {
    object-fit: cover;
  }
  .p-0 {
    padding: calc(var(--spacing) * 0);
  }
  .p-0\.5 {
    padding: calc(var(--spacing) * 0.5);
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-\[2px\] {
    padding: 2px;
  }
  .p-\[3px\] {
    padding: 3px;
  }
  .p-\[5px\] {
    padding: 5px;
  }
  .p-\[10px\] {
    padding: 10px;
  }
  .p-\[15px\] {
    padding: 15px;
  }
  .p-px {
    padding: 1px;
  }
  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }
  .px-0\.5 {
    padding-inline: calc(var(--spacing) * 0.5);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-16 {
    padding-inline: calc(var(--spacing) * 16);
  }
  .px-\[2px\] {
    padding-inline: 2px;
  }
  .px-\[3px\] {
    padding-inline: 3px;
  }
  .px-\[10px\] {
    padding-inline: 10px;
  }
  .px-\[12px\] {
    padding-inline: 12px;
  }
  .px-\[15px\] {
    padding-inline: 15px;
  }
  .px-\[18px\] {
    padding-inline: 18px;
  }
  .px-\[20px\] {
    padding-inline: 20px;
  }
  .px-\[21px\] {
    padding-inline: 21px;
  }
  .py-0 {
    padding-block: calc(var(--spacing) * 0);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-\[1px\] {
    padding-block: 1px;
  }
  .py-\[2\.5px\] {
    padding-block: 2.5px;
  }
  .py-\[2px\] {
    padding-block: 2px;
  }
  .py-\[5px\] {
    padding-block: 5px;
  }
  .py-\[6px\] {
    padding-block: 6px;
  }
  .py-\[7px\] {
    padding-block: 7px;
  }
  .py-\[8px\] {
    padding-block: 8px;
  }
  .py-\[9px\] {
    padding-block: 9px;
  }
  .py-\[10\.5px\] {
    padding-block: 10.5px;
  }
  .py-\[10px\] {
    padding-block: 10px;
  }
  .py-\[11px\] {
    padding-block: 11px;
  }
  .py-\[14px\] {
    padding-block: 14px;
  }
  .py-\[28px\] {
    padding-block: 28px;
  }
  .py-px {
    padding-block: 1px;
  }
  .ps-0 {
    padding-inline-start: calc(var(--spacing) * 0);
  }
  .pt-0 {
    padding-top: calc(var(--spacing) * 0);
  }
  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-2\.5 {
    padding-top: calc(var(--spacing) * 2.5);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }
  .pt-20 {
    padding-top: calc(var(--spacing) * 20);
  }
  .pt-\[calc\(var\(--tg-viewport-safe-area-inset-top\)\+30px\)\] {
    padding-top: calc(var(--tg-viewport-safe-area-inset-top) + 30px);
  }
  .pr-1 {
    padding-right: calc(var(--spacing) * 1);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }
  .pr-10 {
    padding-right: calc(var(--spacing) * 10);
  }
  .pr-16 {
    padding-right: calc(var(--spacing) * 16);
  }
  .pr-\[30px\] {
    padding-right: 30px;
  }
  .pb-\(--tg-viewport-safe-area-inset-bottom\) {
    padding-bottom: var(--tg-viewport-safe-area-inset-bottom);
  }
  .pb-0 {
    padding-bottom: calc(var(--spacing) * 0);
  }
  .pb-0\.5 {
    padding-bottom: calc(var(--spacing) * 0.5);
  }
  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-2\.5 {
    padding-bottom: calc(var(--spacing) * 2.5);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }
  .pb-15 {
    padding-bottom: calc(var(--spacing) * 15);
  }
  .pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
  }
  .pb-20\.5 {
    padding-bottom: calc(var(--spacing) * 20.5);
  }
  .pb-24 {
    padding-bottom: calc(var(--spacing) * 24);
  }
  .pb-32 {
    padding-bottom: calc(var(--spacing) * 32);
  }
  .pb-35 {
    padding-bottom: calc(var(--spacing) * 35);
  }
  .pb-\[100px\] {
    padding-bottom: 100px;
  }
  .pb-\[200px\] {
    padding-bottom: 200px;
  }
  .pb-\[calc\(16px\+var\(--tg-viewport-safe-area-inset-bottom\)\)\] {
    padding-bottom: calc(16px + var(--tg-viewport-safe-area-inset-bottom));
  }
  .pb-\[calc\(100px\+var\(--tg-viewport-safe-area-inset-bottom\)\)\] {
    padding-bottom: calc(100px + var(--tg-viewport-safe-area-inset-bottom));
  }
  .pb-\[calc\(230px\+var\(--tg-viewport-safe-area-inset-bottom\)\)\] {
    padding-bottom: calc(230px + var(--tg-viewport-safe-area-inset-bottom));
  }
  .pb-\[calc\(var\(--tg-viewport-safe-area-inset-bottom\)\+10px\)\] {
    padding-bottom: calc(var(--tg-viewport-safe-area-inset-bottom) + 10px);
  }
  .pb-\[calc\(var\(--tg-viewport-safe-area-inset-bottom\)\+16px\)\] {
    padding-bottom: calc(var(--tg-viewport-safe-area-inset-bottom) + 16px);
  }
  .pb-\[calc\(var\(--tg-viewport-safe-area-inset-bottom\)\+32px\)\] {
    padding-bottom: calc(var(--tg-viewport-safe-area-inset-bottom) + 32px);
  }
  .pb-\[calc\(var\(--tg-viewport-safe-area-inset-bottom\)\+50px\)\] {
    padding-bottom: calc(var(--tg-viewport-safe-area-inset-bottom) + 50px);
  }
  .pb-\[calc\(var\(--tg-viewport-safe-area-inset-bottom\)\+60px\)\] {
    padding-bottom: calc(var(--tg-viewport-safe-area-inset-bottom) + 60px);
  }
  .pb-\[calc\(var\(--tg-viewport-safe-area-inset-bottom\)\+68px\)\] {
    padding-bottom: calc(var(--tg-viewport-safe-area-inset-bottom) + 68px);
  }
  .pb-\[calc\(var\(--tg-viewport-safe-area-inset-bottom\)\+84px\)\] {
    padding-bottom: calc(var(--tg-viewport-safe-area-inset-bottom) + 84px);
  }
  .pb-\[calc\(var\(--tg-viewport-safe-area-inset-bottom\)\+86px\)\] {
    padding-bottom: calc(var(--tg-viewport-safe-area-inset-bottom) + 86px);
  }
  .pb-\[calc\(var\(--tg-viewport-safe-area-inset-bottom\)\+90px\)\] {
    padding-bottom: calc(var(--tg-viewport-safe-area-inset-bottom) + 90px);
  }
  .pb-\[calc\(var\(--tg-viewport-safe-area-inset-bottom\)\+98px\)\] {
    padding-bottom: calc(var(--tg-viewport-safe-area-inset-bottom) + 98px);
  }
  .pb-\[calc\(var\(--tg-viewport-safe-area-inset-bottom\)\+112px\)\] {
    padding-bottom: calc(var(--tg-viewport-safe-area-inset-bottom) + 112px);
  }
  .pb-\[calc\(var\(--tg-viewport-safe-area-inset-bottom\)\+180px\)\] {
    padding-bottom: calc(var(--tg-viewport-safe-area-inset-bottom) + 180px);
  }
  .pb-\[calc\(var\(--tg-viewport-safe-area-inset-bottom\)\+200px\)\] {
    padding-bottom: calc(var(--tg-viewport-safe-area-inset-bottom) + 200px);
  }
  .pb-\[calc\(var\(--tg-viewport-safe-area-inset-bottom\)\+210px\)\] {
    padding-bottom: calc(var(--tg-viewport-safe-area-inset-bottom) + 210px);
  }
  .pb-\[calc\(var\(--tg-viewport-safe-area-inset-bottom\)\+220px\)\] {
    padding-bottom: calc(var(--tg-viewport-safe-area-inset-bottom) + 220px);
  }
  .pl-0 {
    padding-left: calc(var(--spacing) * 0);
  }
  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
  .pl-\[41px\] {
    padding-left: 41px;
  }
  .text-center {
    text-align: center;
  }
  .text-end {
    text-align: end;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .align-middle {
    vertical-align: middle;
  }
  .align-top {
    vertical-align: top;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .text-2xl {
    font-size: 32px;
    line-height: var(--tw-leading, 40px);
  }
  .text-2xs {
    font-size: 10px;
    line-height: var(--tw-leading, 100%);
  }
  .text-3xl {
    font-size: 40px;
    line-height: var(--tw-leading, 48px);
  }
  .text-4xl {
    font-size: 48px;
    line-height: var(--tw-leading, 56px);
  }
  .text-\[10px\]\/2\.5 {
    font-size: 10px;
    line-height: calc(var(--spacing) * 2.5);
  }
  .text-\[10px\]\/\[11px\] {
    font-size: 10px;
    line-height: 11px;
  }
  .text-\[10px\]\/\[100\%\] {
    font-size: 10px;
    line-height: 100%;
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: 17px;
    line-height: var(--tw-leading, 22px);
  }
  .text-semi2xl {
    font-size: 28px;
    line-height: var(--tw-leading, 28px);
  }
  .text-sm {
    font-size: 14px;
    line-height: var(--tw-leading, 18px);
  }
  .text-xl {
    font-size: 24px;
    line-height: var(--tw-leading, 32px);
  }
  .text-xs {
    font-size: 13px;
    line-height: var(--tw-leading, 18px);
  }
  .text-\[0\.9em\] {
    font-size: 0.9em;
  }
  .text-\[1\.125em\] {
    font-size: 1.125em;
  }
  .text-\[9px\] {
    font-size: 9px;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-\[12px\] {
    font-size: 12px;
  }
  .text-\[13px\] {
    font-size: 13px;
  }
  .text-\[14px\] {
    font-size: 14px;
  }
  .text-\[15px\] {
    font-size: 15px;
  }
  .text-\[16px\] {
    font-size: 16px;
  }
  .text-\[17px\] {
    font-size: 17px;
  }
  .text-\[20px\] {
    font-size: 20px;
  }
  .text-\[22px\] {
    font-size: 22px;
  }
  .text-\[28px\] {
    font-size: 28px;
  }
  .text-\[32px\] {
    font-size: 32px;
  }
  .text-\[48px\] {
    font-size: 48px;
  }
  .text-\[50px\] {
    font-size: 50px;
  }
  .leading-4 {
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }
  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }
  .leading-\[9px\] {
    --tw-leading: 9px;
    line-height: 9px;
  }
  .leading-\[10px\] {
    --tw-leading: 10px;
    line-height: 10px;
  }
  .leading-\[14px\] {
    --tw-leading: 14px;
    line-height: 14px;
  }
  .leading-\[16px\] {
    --tw-leading: 16px;
    line-height: 16px;
  }
  .leading-\[18px\] {
    --tw-leading: 18px;
    line-height: 18px;
  }
  .leading-\[22px\] {
    --tw-leading: 22px;
    line-height: 22px;
  }
  .leading-\[24px\] {
    --tw-leading: 24px;
    line-height: 24px;
  }
  .leading-\[32px\] {
    --tw-leading: 32px;
    line-height: 32px;
  }
  .leading-\[40px\] {
    --tw-leading: 40px;
    line-height: 40px;
  }
  .leading-\[56px\] {
    --tw-leading: 56px;
    line-height: 56px;
  }
  .leading-\[100\%\] {
    --tw-leading: 100%;
    line-height: 100%;
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-normal {
    --tw-leading: var(--leading-normal);
    line-height: var(--leading-normal);
  }
  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-light {
    --tw-font-weight: var(--font-weight-light);
    font-weight: var(--font-weight-light);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-\[-0\.5px\] {
    --tw-tracking: -0.5px;
    letter-spacing: -0.5px;
  }
  .tracking-\[-0\.6px\] {
    --tw-tracking: -0.6px;
    letter-spacing: -0.6px;
  }
  .tracking-\[-0\.7px\] {
    --tw-tracking: -0.7px;
    letter-spacing: -0.7px;
  }
  .tracking-\[-0\.08px\] {
    --tw-tracking: -0.08px;
    letter-spacing: -0.08px;
  }
  .tracking-\[-0\.8px\] {
    --tw-tracking: -0.8px;
    letter-spacing: -0.8px;
  }
  .tracking-\[-0\.43px\] {
    --tw-tracking: -0.43px;
    letter-spacing: -0.43px;
  }
  .tracking-\[-1px\] {
    --tw-tracking: -1px;
    letter-spacing: -1px;
  }
  .tracking-\[0\.1px\] {
    --tw-tracking: 0.1px;
    letter-spacing: 0.1px;
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .text-nowrap {
    text-wrap: nowrap;
  }
  .break-words,
  .wrap-break-word {
    overflow-wrap: break-word;
  }
  .break-all {
    word-break: break-all;
  }
  .text-ellipsis {
    text-overflow: ellipsis;
  }
  .whitespace-normal {
    white-space: normal;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre {
    white-space: pre;
  }
  .whitespace-pre-line {
    white-space: pre-line;
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }
  .text-\[\#2D2D32\] {
    color: #2d2d32;
  }
  .text-\[\#5AC8FA\] {
    color: #5ac8fa;
  }
  .text-\[\#5AC8FA\]\/40 {
    color: #5ac8fa66;
  }
  .text-\[\#6D6D71\],
  .text-\[\#6d6d71\] {
    color: #6d6d71;
  }
  .text-\[\#49DF64\],
  .text-\[\#49df64\] {
    color: #49df64;
  }
  .text-\[\#22C55E\],
  .text-\[\#22c55e\] {
    color: #22c55e;
  }
  .text-\[\#141414\] {
    color: #141414;
  }
  .text-\[\#AF51DE\] {
    color: #af51de;
  }
  .text-\[\#E2A900\] {
    color: #e2a900;
  }
  .text-\[\#F1AA05\] {
    color: #f1aa05;
  }
  .text-\[\#FA5A5D\] {
    color: #fa5a5d;
  }
  .text-\[\#FBC294\] {
    color: #fbc294;
  }
  .text-accent {
    color: var(--accent);
  }
  .text-accent\! {
    color: var(--accent) !important;
  }
  .text-background {
    color: var(--background);
  }
  .text-background\! {
    color: var(--background) !important;
  }
  .text-background-secondary-2 {
    color: var(--color-background-secondary-2);
  }
  .text-background\/60 {
    color: var(--background);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-background\/60 {
      color: color-mix(in oklab, var(--background) 60%, transparent);
    }
  }
  .text-black {
    color: var(--color-black);
  }
  .text-black\/40 {
    color: #0006;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-black\/40 {
      color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }
  .text-bright-azure {
    color: var(--bright-azure);
  }
  .text-bright-azure-2 {
    color: var(--bright-azure-2);
  }
  .text-bronze {
    color: var(--bronze);
  }
  .text-card-foreground {
    color: var(--card-foreground);
  }
  .text-current {
    color: currentColor;
  }
  .text-cyan {
    color: var(--bg-cyan);
  }
  .text-dark-3 {
    color: var(--bg-dark-3);
  }
  .text-destructive {
    color: var(--destructive);
  }
  .text-foreground {
    color: var(--foreground);
  }
  .text-gold {
    color: var(--bg-gold);
  }
  .text-gold\! {
    color: var(--bg-gold) !important;
  }
  .text-gray-600 {
    color: var(--color-gray-600);
  }
  .text-green-500 {
    color: var(--color-green-500);
  }
  .text-inherit {
    color: inherit;
  }
  .text-light-gold {
    color: var(--light-gold);
  }
  .text-muted {
    color: var(--muted);
  }
  .text-muted-foreground {
    color: var(--muted-foreground);
  }
  .text-orange {
    color: var(--orange);
  }
  .text-primary {
    color: var(--primary);
  }
  .text-primary-foreground {
    color: var(--primary-foreground);
  }
  .text-purple {
    color: var(--bg-purple);
  }
  .text-red-400 {
    color: var(--color-red-400);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-secondary {
    color: var(--secondary);
  }
  .text-secondary\! {
    color: var(--secondary) !important;
  }
  .text-secondary-foreground,
  .text-secondary-foreground\/40 {
    color: var(--secondary-foreground);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-secondary-foreground\/40 {
      color: color-mix(in oklab, var(--secondary-foreground) 40%, transparent);
    }
  }
  .text-secondary-foreground\/50 {
    color: var(--secondary-foreground);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-secondary-foreground\/50 {
      color: color-mix(in oklab, var(--secondary-foreground) 50%, transparent);
    }
  }
  .text-silver {
    color: var(--silver);
  }
  .text-tifany {
    color: var(--tifany);
  }
  .text-transparent {
    color: #0000;
  }
  .text-transparent-1 {
    color: var(--text-transparent-1);
  }
  .text-transparent-2 {
    color: var(--text-transparent-2);
  }
  .text-transparent-3 {
    color: var(--text-transparent-3);
  }
  .text-white {
    color: var(--color-white);
  }
  .text-white\/24 {
    color: #ffffff3d;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/24 {
      color: color-mix(in oklab, var(--color-white) 24%, transparent);
    }
  }
  .text-white\/25 {
    color: #ffffff40;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/25 {
      color: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
  }
  .text-white\/30 {
    color: #ffffff4d;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/30 {
      color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }
  .text-white\/32 {
    color: #ffffff52;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/32 {
      color: color-mix(in oklab, var(--color-white) 32%, transparent);
    }
  }
  .text-white\/35 {
    color: #ffffff59;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/35 {
      color: color-mix(in oklab, var(--color-white) 35%, transparent);
    }
  }
  .text-white\/40 {
    color: #fff6;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/40 {
      color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }
  .text-white\/45 {
    color: #ffffff73;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/45 {
      color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
  }
  .text-white\/50 {
    color: #ffffff80;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/50 {
      color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }
  .text-white\/60 {
    color: #fff9;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/60 {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .text-white\/70 {
    color: #ffffffb3;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/70 {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }
  .text-white\/80 {
    color: #fffc;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/80 {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  .text-white\/90 {
    color: #ffffffe6;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/90 {
      color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }
  .text-yellow-500 {
    color: var(--color-yellow-500);
  }
  .capitalize {
    text-transform: capitalize;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,)
      var(--tw-numeric-figure,) var(--tw-numeric-spacing,)
      var(--tw-numeric-fraction,);
  }
  .line-through {
    text-decoration-line: line-through;
  }
  .no-underline\! {
    text-decoration-line: none !important;
  }
  .underline {
    text-decoration-line: underline;
  }
  .decoration-\[\#FA5A5D\]\/24 {
    text-decoration-color: #fa5a5d3d;
  }
  .decoration-white\/24 {
    text-decoration-color: #ffffff3d;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .decoration-white\/24 {
      -webkit-text-decoration-color: color-mix(
        in oklab,
        var(--color-white) 24%,
        transparent
      );
      text-decoration-color: color-mix(
        in oklab,
        var(--color-white) 24%,
        transparent
      );
    }
  }
  .decoration-wavy {
    text-decoration-style: wavy;
  }
  .underline-offset-2 {
    text-underline-offset: 2px;
  }
  .underline-offset-4 {
    text-underline-offset: 4px;
  }
  .opacity-0 {
    opacity: 0;
  }
  .opacity-40 {
    opacity: 0.4;
  }
  .opacity-45 {
    opacity: 0.45;
  }
  .opacity-50 {
    opacity: 0.5;
  }
  .opacity-60 {
    opacity: 0.6;
  }
  .opacity-70 {
    opacity: 0.7;
  }
  .opacity-90 {
    opacity: 0.9;
  }
  .opacity-100 {
    opacity: 1;
  }
  .opacity-100\! {
    opacity: 1 !important;
  }
  .mix-blend-difference {
    mix-blend-mode: difference;
  }
  .shadow {
    --tw-shadow:
      0 1px 3px 0 var(--tw-shadow-color, #0000001a),
      0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_8px_30px_rgba\(0\,0\,0\,0\.45\)\] {
    --tw-shadow: 0 8px 30px var(--tw-shadow-color, #00000073);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_16px_64px_0_rgba\(255\,85\,232\,0\.24\)\] {
    --tw-shadow: 0 16px 64px 0 var(--tw-shadow-color, #ff55e83d);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0px_12px_12px_0px_rgba\(0\,0\,0\,0\.16\)\] {
    --tw-shadow: 0px 12px 12px 0px var(--tw-shadow-color, #00000029);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[inset_4px_4px_8px_0px_rgba\(142\,253\,255\,0\.6\)\] {
    --tw-shadow: inset 4px 4px 8px 0px var(--tw-shadow-color, #8efdff99);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[inset_4px_4px_8px_0px_rgba\(255\,142\,244\,0\.6\)\] {
    --tw-shadow: inset 4px 4px 8px 0px var(--tw-shadow-color, #ff8ef499);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow:
      0 10px 15px -3px var(--tw-shadow-color, #0000001a),
      0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-none\! {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }
  .shadow-sm {
    --tw-shadow:
      0 1px 3px 0 var(--tw-shadow-color, #0000001a),
      0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xs {
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
      calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-0 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
      calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
      calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-\[1\.5px\] {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
      calc(1.5px + var(--tw-ring-offset-width))
      var(--tw-ring-color, currentcolor);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .\[box-shadow\:none\] {
    box-shadow: none;
  }
  .glass-shadow {
    box-shadow: var(--glass-shadow);
  }
  .glass-shadow-none {
    box-shadow: none;
  }
  .ring-\[\#1b1b1b\] {
    --tw-ring-color: #1b1b1b;
  }
  .ring-\[\#141414\] {
    --tw-ring-color: #141414;
  }
  .ring-\[\#191919\] {
    --tw-ring-color: #191919;
  }
  .ring-\[\#FF55E8\] {
    --tw-ring-color: #ff55e8;
  }
  .ring-dark {
    --tw-ring-color: var(--bg-dark);
  }
  .ring-dark-2 {
    --tw-ring-color: var(--bg-dark-2);
  }
  .ring-secondary,
  .ring-secondary\/64 {
    --tw-ring-color: var(--secondary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .ring-secondary\/64 {
      --tw-ring-color: color-mix(in oklab, var(--secondary) 64%, transparent);
    }
  }
  .ring-white\/12 {
    --tw-ring-color: #ffffff1f;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .ring-white\/12 {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 12%, transparent);
    }
  }
  .ring-white\/40 {
    --tw-ring-color: #fff6;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .ring-white\/40 {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }
  .ring-offset-background {
    --tw-ring-offset-color: var(--background);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .outline-2\! {
    outline-style: var(--tw-outline-style) !important;
    outline-width: 2px !important;
  }
  .outline-primary\! {
    outline-color: var(--primary) !important;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,)
      var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,)
      var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .blur-3xl {
    --tw-blur: blur(var(--blur-3xl));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,)
      var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,)
      var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .blur-lg {
    --tw-blur: blur(var(--blur-lg));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,)
      var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,)
      var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow-sm {
    --tw-drop-shadow-size: drop-shadow(
      0 1px 2px var(--tw-drop-shadow-color, #00000026)
    );
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-sm));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,)
      var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,)
      var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,)
      var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,)
      var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,)
      var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,)
      var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur-2xl {
    --tw-backdrop-blur: blur(var(--blur-2xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,)
      var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
      var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,)
      var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
      var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,)
      var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,)
      var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,)
      var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,)
      var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-\[1px\] {
    --tw-backdrop-blur: blur(1px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,)
      var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
      var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,)
      var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
      var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,)
      var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,)
      var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,)
      var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,)
      var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-\[4px\] {
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,)
      var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
      var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,)
      var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
      var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,)
      var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,)
      var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,)
      var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,)
      var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-\[6px\] {
    --tw-backdrop-blur: blur(6px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,)
      var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
      var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,)
      var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
      var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,)
      var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,)
      var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,)
      var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,)
      var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-\[12px\] {
    --tw-backdrop-blur: blur(12px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,)
      var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
      var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,)
      var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
      var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,)
      var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,)
      var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,)
      var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,)
      var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-\[16px\] {
    --tw-backdrop-blur: blur(16px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,)
      var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
      var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,)
      var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
      var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,)
      var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,)
      var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,)
      var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,)
      var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-lg {
    --tw-backdrop-blur: blur(var(--blur-lg));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,)
      var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
      var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,)
      var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
      var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,)
      var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,)
      var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,)
      var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,)
      var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,)
      var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
      var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,)
      var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
      var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,)
      var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,)
      var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,)
      var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,)
      var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property:
      color,
      background-color,
      border-color,
      outline-color,
      text-decoration-color,
      fill,
      stroke,
      --tw-gradient-from,
      --tw-gradient-via,
      --tw-gradient-to,
      opacity,
      box-shadow,
      transform,
      translate,
      scale,
      rotate,
      filter,
      -webkit-backdrop-filter,
      backdrop-filter,
      display,
      content-visibility,
      overlay,
      pointer-events;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[background-color\,color\,opacity\,transform\] {
    transition-property: background-color, color, opacity, transform;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[color\,box-shadow\] {
    transition-property: color, box-shadow;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property:
      color, background-color, border-color, outline-color,
      text-decoration-color, fill, stroke, --tw-gradient-from,
      --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-none {
    transition-property: none;
  }
  .transition-none\! {
    transition-property: none !important;
  }
  .duration-200 {
    --tw-duration: 0.2s;
    transition-duration: 0.2s;
  }
  .duration-300 {
    --tw-duration: 0.3s;
    transition-duration: 0.3s;
  }
  .duration-500 {
    --tw-duration: 0.5s;
    transition-duration: 0.5s;
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .\[-ms-overflow-style\:none\] {
    -ms-overflow-style: none;
  }
  .\[scrollbar-width\:none\] {
    scrollbar-width: none;
  }
  .ring-inset {
    --tw-ring-inset: inset;
  }
  .running {
    animation-play-state: running;
  }
  .group-data-\[state\=active\]\:opacity-100:is(
      :where(.group)[data-state="active"] *
    ) {
    opacity: 1;
  }
  .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block:is(
      :where(.group\/drawer-content)[data-vaul-drawer-direction="bottom"] *
    ) {
    display: block;
  }
  .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center:is(
      :where(.group\/drawer-content)[data-vaul-drawer-direction="bottom"] *
    ),
  .group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center:is(
      :where(.group\/drawer-content)[data-vaul-drawer-direction="top"] *
    ) {
    text-align: center;
  }
  .first-letter\:uppercase:first-letter {
    text-transform: uppercase;
  }
  .selection\:bg-primary ::selection {
    background-color: var(--primary);
  }
  .selection\:bg-primary::selection {
    background-color: var(--primary);
  }
  .selection\:text-primary-foreground ::selection {
    color: var(--primary-foreground);
  }
  .selection\:text-primary-foreground::selection {
    color: var(--primary-foreground);
  }
  .file\:inline-flex::file-selector-button {
    display: inline-flex;
  }
  .file\:h-7::file-selector-button {
    height: calc(var(--spacing) * 7);
  }
  .file\:border-0::file-selector-button {
    border-style: var(--tw-border-style);
    border-width: 0;
  }
  .file\:bg-transparent::file-selector-button {
    background-color: #0000;
  }
  .file\:text-lg::file-selector-button {
    font-size: 17px;
    line-height: var(--tw-leading, 22px);
  }
  .file\:text-sm::file-selector-button {
    font-size: 14px;
    line-height: var(--tw-leading, 18px);
  }
  .file\:font-medium::file-selector-button {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .file\:text-foreground::file-selector-button {
    color: var(--foreground);
  }
  .placeholder\:text-base::placeholder {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .placeholder\:text-sm::placeholder {
    font-size: 14px;
    line-height: var(--tw-leading, 18px);
  }
  .placeholder\:text-xs::placeholder {
    font-size: 13px;
    line-height: var(--tw-leading, 18px);
  }
  .placeholder\:text-muted-foreground::placeholder {
    color: var(--muted-foreground);
  }
  .first\:rounded-l-4xl:first-child {
    border-top-left-radius: 32px;
    border-bottom-left-radius: 32px;
  }
  .last\:mb-0:last-child {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .last\:rounded-r-4xl:last-child {
    border-top-right-radius: 32px;
    border-bottom-right-radius: 32px;
  }
  .last\:border-b-0:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }
  .last\:border-none:last-child {
    --tw-border-style: none;
    border-style: none;
  }
  @media (hover: hover) {
    .hover\:scale-105:hover {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
    .hover\:bg-\[\#6D51DE\]\/90:hover {
      background-color: #6d51dee6;
    }
    .hover\:bg-\[\#49DE64\]\/80:hover {
      background-color: #49de64cc;
    }
    .hover\:bg-\[\#22c55e\]\/90:hover {
      background-color: #22c55ee6;
    }
    .hover\:bg-\[var\(--destructive-secondary\)\]\/90:hover {
      background-color: var(--destructive-secondary);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--destructive-secondary\)\]\/90:hover {
        background-color: color-mix(
          in oklab,
          var(--destructive-secondary) 90%,
          transparent
        );
      }
    }
    .hover\:bg-accent\/20:hover {
      background-color: var(--accent);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-accent\/20:hover {
        background-color: color-mix(in oklab, var(--accent) 20%, transparent);
      }
    }
    .hover\:bg-dark-4\/60:hover {
      background-color: var(--bg-dark-4);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-dark-4\/60:hover {
        background-color: color-mix(
          in oklab,
          var(--bg-dark-4) 60%,
          transparent
        );
      }
    }
    .hover\:bg-destructive\/90:hover {
      background-color: var(--destructive);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-destructive\/90:hover {
        background-color: color-mix(
          in oklab,
          var(--destructive) 90%,
          transparent
        );
      }
    }
    .hover\:bg-input\/50:hover {
      background-color: var(--input);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-input\/50:hover {
        background-color: color-mix(in oklab, var(--input) 50%, transparent);
      }
    }
    .hover\:bg-input\/60:hover {
      background-color: var(--input);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-input\/60:hover {
        background-color: color-mix(in oklab, var(--input) 60%, transparent);
      }
    }
    .hover\:bg-muted\/50:hover {
      background-color: var(--muted);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/50:hover {
        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
      }
    }
    .hover\:bg-muted\/60:hover {
      background-color: var(--muted);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/60:hover {
        background-color: color-mix(in oklab, var(--muted) 60%, transparent);
      }
    }
    .hover\:bg-muted\/80:hover {
      background-color: var(--muted);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/80:hover {
        background-color: color-mix(in oklab, var(--muted) 80%, transparent);
      }
    }
    .hover\:bg-primary\/30:hover {
      background-color: var(--primary);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/30:hover {
        background-color: color-mix(in oklab, var(--primary) 30%, transparent);
      }
    }
    .hover\:bg-primary\/90:hover {
      background-color: var(--primary);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/90:hover {
        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
      }
    }
    .hover\:bg-purple\/90:hover {
      background-color: var(--bg-purple);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-purple\/90:hover {
        background-color: color-mix(
          in oklab,
          var(--bg-purple) 90%,
          transparent
        );
      }
    }
    .hover\:bg-secondary\/40:hover {
      background-color: var(--secondary);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-secondary\/40:hover {
        background-color: color-mix(
          in oklab,
          var(--secondary) 40%,
          transparent
        );
      }
    }
    .hover\:bg-secondary\/80:hover {
      background-color: var(--secondary);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-secondary\/80:hover {
        background-color: color-mix(
          in oklab,
          var(--secondary) 80%,
          transparent
        );
      }
    }
    .hover\:bg-white:hover {
      background-color: var(--color-white);
    }
    .hover\:bg-white\/5:hover {
      background-color: #ffffff0d;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/5:hover {
        background-color: color-mix(
          in oklab,
          var(--color-white) 5%,
          transparent
        );
      }
    }
    .hover\:bg-white\/25:hover {
      background-color: #ffffff40;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/25:hover {
        background-color: color-mix(
          in oklab,
          var(--color-white) 25%,
          transparent
        );
      }
    }
    .hover\:bg-white\/35:hover {
      background-color: #ffffff59;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/35:hover {
        background-color: color-mix(
          in oklab,
          var(--color-white) 35%,
          transparent
        );
      }
    }
    .hover\:bg-white\/50:hover {
      background-color: #ffffff80;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/50:hover {
        background-color: color-mix(
          in oklab,
          var(--color-white) 50%,
          transparent
        );
      }
    }
    .hover\:bg-white\/85:hover {
      background-color: #ffffffd9;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/85:hover {
        background-color: color-mix(
          in oklab,
          var(--color-white) 85%,
          transparent
        );
      }
    }
    .hover\:bg-white\/90:hover {
      background-color: #ffffffe6;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/90:hover {
        background-color: color-mix(
          in oklab,
          var(--color-white) 90%,
          transparent
        );
      }
    }
    .hover\:text-foreground:hover {
      color: var(--foreground);
    }
    .hover\:text-muted-foreground:hover {
      color: var(--muted-foreground);
    }
    .hover\:text-white:hover {
      color: var(--color-white);
    }
    .hover\:text-white\/50:hover {
      color: #ffffff80;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-white\/50:hover {
        color: color-mix(in oklab, var(--color-white) 50%, transparent);
      }
    }
    .hover\:text-white\/80:hover {
      color: #fffc;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-white\/80:hover {
        color: color-mix(in oklab, var(--color-white) 80%, transparent);
      }
    }
    .hover\:underline:hover {
      text-decoration-line: underline;
    }
    .hover\:opacity-80:hover {
      opacity: 0.8;
    }
  }
  .focus-visible\:border-destructive\!:focus-visible {
    border-color: var(--destructive) !important;
  }
  .focus-visible\:border-primary:focus-visible {
    border-color: var(--primary);
  }
  .focus-visible\:border-ring:focus-visible {
    border-color: var(--ring);
  }
  .focus-visible\:shadow-none\!:focus-visible {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }
  .focus-visible\:ring-2:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
      calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .focus-visible\:ring-\[3px\]:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
      calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .focus-visible\:ring-\[var\(--destructive-secondary\)\]\/20:focus-visible {
    --tw-ring-color: var(--destructive-secondary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-\[var\(--destructive-secondary\)\]\/20:focus-visible {
      --tw-ring-color: color-mix(
        in oklab,
        var(--destructive-secondary) 20%,
        transparent
      );
    }
  }
  .focus-visible\:ring-destructive\/20:focus-visible {
    --tw-ring-color: var(--destructive);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-destructive\/20:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }
  .focus-visible\:ring-ring:focus-visible,
  .focus-visible\:ring-ring\/50:focus-visible {
    --tw-ring-color: var(--ring);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-ring\/50:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }
  .focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0
      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }
  .focus-visible\:outline-hidden:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }
  @media (forced-colors: active) {
    .focus-visible\:outline-hidden:focus-visible {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }
  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }
  .active\:scale-95:active {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .active\:cursor-grabbing:active {
    cursor: grabbing;
  }
  .active\:bg-\[\#6D51DE\]\/80:active {
    background-color: #6d51decc;
  }
  .active\:bg-\[\#49DE64\]\/70:active {
    background-color: #49de64b3;
  }
  .active\:bg-\[\#22c55e\]\/80:active {
    background-color: #22c55ecc;
  }
  .active\:bg-\[var\(--destructive-secondary\)\]\/80:active {
    background-color: var(--destructive-secondary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .active\:bg-\[var\(--destructive-secondary\)\]\/80:active {
      background-color: color-mix(
        in oklab,
        var(--destructive-secondary) 80%,
        transparent
      );
    }
  }
  .active\:bg-accent\/25:active {
    background-color: var(--accent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .active\:bg-accent\/25:active {
      background-color: color-mix(in oklab, var(--accent) 25%, transparent);
    }
  }
  .active\:bg-destructive\/80:active {
    background-color: var(--destructive);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .active\:bg-destructive\/80:active {
      background-color: color-mix(
        in oklab,
        var(--destructive) 80%,
        transparent
      );
    }
  }
  .active\:bg-input\/40:active {
    background-color: var(--input);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .active\:bg-input\/40:active {
      background-color: color-mix(in oklab, var(--input) 40%, transparent);
    }
  }
  .active\:bg-input\/70:active {
    background-color: var(--input);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .active\:bg-input\/70:active {
      background-color: color-mix(in oklab, var(--input) 70%, transparent);
    }
  }
  .active\:bg-muted\/70:active {
    background-color: var(--muted);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .active\:bg-muted\/70:active {
      background-color: color-mix(in oklab, var(--muted) 70%, transparent);
    }
  }
  .active\:bg-primary\/80:active {
    background-color: var(--primary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .active\:bg-primary\/80:active {
      background-color: color-mix(in oklab, var(--primary) 80%, transparent);
    }
  }
  .active\:bg-purple\/80:active {
    background-color: var(--bg-purple);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .active\:bg-purple\/80:active {
      background-color: color-mix(in oklab, var(--bg-purple) 80%, transparent);
    }
  }
  .active\:bg-secondary\/70:active {
    background-color: var(--secondary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .active\:bg-secondary\/70:active {
      background-color: color-mix(in oklab, var(--secondary) 70%, transparent);
    }
  }
  .active\:text-muted-foreground:active {
    color: var(--muted-foreground);
  }
  .active\:opacity-70:active {
    opacity: 0.7;
  }
  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }
  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }
  .disabled\:bg-\[\#6D6D71\]:disabled {
    background-color: #6d6d71;
  }
  .disabled\:bg-white\/24:disabled {
    background-color: #ffffff3d;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .disabled\:bg-white\/24:disabled {
      background-color: color-mix(
        in oklab,
        var(--color-white) 24%,
        transparent
      );
    }
  }
  .disabled\:text-black\/50:disabled {
    color: #00000080;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .disabled\:text-black\/50:disabled {
      color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }
  .disabled\:text-white\/40:disabled {
    color: #fff6;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .disabled\:text-white\/40:disabled {
      color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }
  .disabled\:opacity-50:disabled {
    opacity: 0.5;
  }
  .disabled\:opacity-100:disabled {
    opacity: 1;
  }
  .has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has(
      [data-slot="card-action"]
    ) {
    grid-template-columns: 1fr auto;
  }
  .aria-invalid\:border-destructive[aria-invalid="true"] {
    border-color: var(--destructive);
  }
  .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }
  .data-disabled\:opacity-50[data-disabled] {
    opacity: 0.5;
  }
  .data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"] {
    height: calc(var(--spacing) * 1.5);
  }
  .data-\[orientation\=horizontal\]\:h-2\.5[data-orientation="horizontal"] {
    height: calc(var(--spacing) * 2.5);
  }
  .data-\[orientation\=horizontal\]\:h-full[data-orientation="horizontal"] {
    height: 100%;
  }
  .data-\[orientation\=horizontal\]\:w-\[calc\(100\%-25px\)\][data-orientation="horizontal"] {
    width: calc(100% - 25px);
  }
  .data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"] {
    width: 100%;
  }
  .data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
    height: 100%;
  }
  .data-\[orientation\=vertical\]\:min-h-44[data-orientation="vertical"] {
    min-height: calc(var(--spacing) * 44);
  }
  .data-\[orientation\=vertical\]\:w-1\.5[data-orientation="vertical"] {
    width: calc(var(--spacing) * 1.5);
  }
  .data-\[orientation\=vertical\]\:w-2\.5[data-orientation="vertical"] {
    width: calc(var(--spacing) * 2.5);
  }
  .data-\[orientation\=vertical\]\:w-\[2px\][data-orientation="vertical"] {
    width: 2px;
  }
  .data-\[orientation\=vertical\]\:w-auto[data-orientation="vertical"] {
    width: auto;
  }
  .data-\[orientation\=vertical\]\:w-full[data-orientation="vertical"] {
    width: 100%;
  }
  .data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
    flex-direction: column;
  }
  .data-\[state\=active\]\:bg-transparent[data-state="active"] {
    background-color: #0000;
  }
  .data-\[state\=active\]\:text-\[\#282727\][data-state="active"] {
    color: #282727;
  }
  .data-\[state\=active\]\:text-secondary[data-state="active"] {
    color: var(--secondary);
  }
  .data-\[state\=active\]\:text-white[data-state="active"] {
    color: var(--color-white);
  }
  .data-\[state\=checked\]\:translate-x-6[data-state="checked"] {
    --tw-translate-x: calc(var(--spacing) * 6);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .data-\[state\=checked\]\:border-primary[data-state="checked"] {
    border-color: var(--primary);
  }
  .data-\[state\=checked\]\:bg-primary[data-state="checked"] {
    background-color: var(--primary);
  }
  .data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
    color: var(--primary-foreground);
  }
  .data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
    animation: accordion-up
      var(--tw-animation-duration, var(--tw-duration, 0.2s))
      var(--tw-ease, ease-out) var(--tw-animation-delay, 0s)
      var(--tw-animation-iteration-count, 1)
      var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
  }
  .data-\[state\=closed\]\:animate-out[data-state="closed"] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, 0.15s))
      var(--tw-ease, ease) var(--tw-animation-delay, 0s)
      var(--tw-animation-iteration-count, 1)
      var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
  }
  .data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
    --tw-exit-opacity: 0;
  }
  .data-\[state\=inactive\]\:text-background[data-state="inactive"] {
    color: var(--background);
  }
  .data-\[state\=inactive\]\:text-white[data-state="inactive"] {
    color: var(--color-white);
  }
  .data-\[state\=inactive\]\:opacity-50[data-state="inactive"] {
    opacity: 0.5;
  }
  .data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
    animation: accordion-down
      var(--tw-animation-duration, var(--tw-duration, 0.2s))
      var(--tw-ease, ease-out) var(--tw-animation-delay, 0s)
      var(--tw-animation-iteration-count, 1)
      var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
  }
  .data-\[state\=open\]\:animate-in[data-state="open"] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, 0.15s))
      var(--tw-ease, ease) var(--tw-animation-delay, 0s)
      var(--tw-animation-iteration-count, 1)
      var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
  }
  .data-\[state\=open\]\:fade-in-0[data-state="open"] {
    --tw-enter-opacity: 0;
  }
  .data-\[state\=selected\]\:bg-muted[data-state="selected"] {
    background-color: var(--muted);
  }
  .data-\[state\=unchecked\]\:translate-x-0\.5[data-state="unchecked"] {
    --tw-translate-x: calc(var(--spacing) * 0.5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .data-\[state\=unchecked\]\:bg-\[\#3A3A3A\][data-state="unchecked"] {
    background-color: #3a3a3a;
  }
  .data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction="bottom"] {
    inset-inline: calc(var(--spacing) * 0);
  }
  .data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction="bottom"] {
    bottom: calc(var(--spacing) * 0);
  }
  .data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction="bottom"] {
    margin-top: calc(var(--spacing) * 24);
  }
  .data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction="bottom"] {
    max-height: 80vh;
  }
  .data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction="bottom"] {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
  .data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction="bottom"] {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction="left"] {
    inset-block: calc(var(--spacing) * 0);
  }
  .data-\[vaul-drawer-direction\=left\]\:left-0[data-vaul-drawer-direction="left"] {
    left: calc(var(--spacing) * 0);
  }
  .data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction="left"] {
    width: 75%;
  }
  .data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction="left"] {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction="right"] {
    inset-block: calc(var(--spacing) * 0);
  }
  .data-\[vaul-drawer-direction\=right\]\:right-0[data-vaul-drawer-direction="right"] {
    right: calc(var(--spacing) * 0);
  }
  .data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction="right"] {
    width: 75%;
  }
  .data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction="right"] {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction="top"] {
    inset-inline: calc(var(--spacing) * 0);
  }
  .data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction="top"] {
    top: calc(var(--spacing) * 0);
  }
  .data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction="top"] {
    margin-bottom: calc(var(--spacing) * 24);
  }
  .data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction="top"] {
    max-height: 80vh;
  }
  .data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction="top"] {
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  .data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction="top"] {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  @media not all and (min-width: 400px) {
    .max-\[400px\]\:grid-cols-\[repeat\(auto-fill\,minmax\(140px\,1fr\)\)\] {
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
  }
  @media (min-width: 33.125rem) {
    .xs\:block {
      display: block;
    }
    .xs\:flex {
      display: flex;
    }
    .xs\:hidden {
      display: none;
    }
    .xs\:grid-cols-\[17px_minmax\(0\,1fr\)_124px_116px\] {
      grid-template-columns: 17px minmax(0, 1fr) 124px 116px;
    }
    .xs\:gap-x-4 {
      column-gap: calc(var(--spacing) * 4);
    }
    .xs\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
    .xs\:text-sm {
      font-size: 14px;
      line-height: var(--tw-leading, 18px);
    }
  }
  @media (min-width: 40rem) {
    .sm\:text-xs {
      font-size: 13px;
      line-height: var(--tw-leading, 18px);
    }
    .data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction="left"],
    .data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction="right"] {
      max-width: var(--container-sm);
    }
  }
  @media (min-width: 48rem) {
    .md\:gap-1\.5 {
      gap: calc(var(--spacing) * 1.5);
    }
    .md\:text-left {
      text-align: left;
    }
    .md\:text-lg {
      font-size: 17px;
      line-height: var(--tw-leading, 22px);
    }
    .md\:text-sm {
      font-size: 14px;
      line-height: var(--tw-leading, 18px);
    }
  }
  @media (prefers-color-scheme: dark) {
    .dark\:bg-input\/30 {
      background-color: var(--input);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .dark\:bg-input\/30 {
        background-color: color-mix(in oklab, var(--input) 30%, transparent);
      }
    }
    @media (hover: hover) {
      .dark\:hover\:bg-input\/50:hover {
        background-color: var(--input);
      }
      @supports (color: color-mix(in lab, red, red)) {
        .dark\:hover\:bg-input\/50:hover {
          background-color: color-mix(in oklab, var(--input) 50%, transparent);
        }
      }
    }
    .dark\:focus-visible\:ring-\[var\(--destructive-secondary\)\]\/40:focus-visible {
      --tw-ring-color: var(--destructive-secondary);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .dark\:focus-visible\:ring-\[var\(--destructive-secondary\)\]\/40:focus-visible {
        --tw-ring-color: color-mix(
          in oklab,
          var(--destructive-secondary) 40%,
          transparent
        );
      }
    }
    .dark\:active\:bg-input\/70:active {
      background-color: var(--input);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .dark\:active\:bg-input\/70:active {
        background-color: color-mix(in oklab, var(--input) 70%, transparent);
      }
    }
    .dark\:aria-invalid\:ring-destructive\/40[aria-invalid="true"] {
      --tw-ring-color: var(--destructive);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .dark\:aria-invalid\:ring-destructive\/40[aria-invalid="true"] {
        --tw-ring-color: color-mix(
          in oklab,
          var(--destructive) 40%,
          transparent
        );
      }
    }
    .dark\:data-\[state\=checked\]\:bg-primary[data-state="checked"] {
      background-color: var(--primary);
    }
    .dark\:data-\[state\=unchecked\]\:bg-\[\#3A3A3A\][data-state="unchecked"] {
      background-color: #3a3a3a;
    }
  }
  .\[\&_\.arrow-down\]\:fill-white .arrow-down {
    fill: var(--color-white);
  }
  .\[\&_\.arrow-down\]\:fill-white\/40 .arrow-down {
    fill: #fff6;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .\[\&_\.arrow-down\]\:fill-white\/40 .arrow-down {
      fill: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }
  .\[\&_\.arrow-up\]\:fill-white .arrow-up {
    fill: var(--color-white);
  }
  .\[\&_\.arrow-up\]\:fill-white\/40 .arrow-up {
    fill: #fff6;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .\[\&_\.arrow-up\]\:fill-white\/40 .arrow-up {
      fill: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }
  .\[\&_\[data-slot\=switch-thumb\]\]\:size-\[25px\]
    [data-slot="switch-thumb"] {
    width: 25px;
    height: 25px;
  }
  .\[\&_\[data-slot\=switch-thumb\]\]\:data-\[state\=checked\]\:translate-x-\[calc\(2\.5rem-0\.625rem-2px\)\]
    [data-slot="switch-thumb"][data-state="checked"] {
    --tw-translate-x: calc(1.875rem - 2px);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .\[\&_img\]\:h-4 img {
    height: calc(var(--spacing) * 4);
  }
  .\[\&_img\]\:h-12 img {
    height: calc(var(--spacing) * 12);
  }
  .\[\&_img\]\:w-4 img {
    width: calc(var(--spacing) * 4);
  }
  .\[\&_img\]\:w-12 img {
    width: calc(var(--spacing) * 12);
  }
  .\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none;
  }
  .\[\&_svg\]\:block svg {
    display: block;
  }
  .\[\&_svg\]\:size-4 svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .\[\&_svg\]\:size-7\! svg {
    width: calc(var(--spacing) * 7) !important;
    height: calc(var(--spacing) * 7) !important;
  }
  .\[\&_svg\]\:size-7\.5 svg {
    width: calc(var(--spacing) * 7.5);
    height: calc(var(--spacing) * 7.5);
  }
  .\[\&_svg\]\:size-\[14px\]\! svg {
    width: 14px !important;
    height: 14px !important;
  }
  .\[\&_svg\]\:size-\[24px\] svg {
    width: 24px;
    height: 24px;
  }
  .\[\&_svg\]\:size-\[38px\] svg {
    width: 38px;
    height: 38px;
  }
  .\[\&_svg\]\:size-full svg {
    width: 100%;
    height: 100%;
  }
  .\[\&_svg\]\:h-4\! svg {
    height: calc(var(--spacing) * 4) !important;
  }
  .\[\&_svg\]\:h-12\! svg {
    height: calc(var(--spacing) * 12) !important;
  }
  .\[\&_svg\]\:w-4\! svg {
    width: calc(var(--spacing) * 4) !important;
  }
  .\[\&_svg\]\:w-12\! svg {
    width: calc(var(--spacing) * 12) !important;
  }
  .\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0;
  }
  .\[\&_svg\]\:object-cover svg {
    object-fit: cover;
  }
  .\[\&_svg\]\:align-middle svg {
    vertical-align: middle;
  }
  .\[\&_svg\]\:leading-\[0\] svg {
    --tw-leading: 0;
    line-height: 0;
  }
  .\[\&_svg\]\:text-white\/40 svg {
    color: #fff6;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .\[\&_svg\]\:text-white\/40 svg {
      color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }
  .\[\&_svg\:not\(\[class\*\=\"size-\"\]\)\]\:size-4 svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .\[\&_tr\]\:border-b tr {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .\[\&_tr\:last-child\]\:border-0 tr:last-child {
    border-style: var(--tw-border-style);
    border-width: 0;
  }
  .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
    display: none;
  }
  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role="checkbox"]) {
    padding-right: calc(var(--spacing) * 0);
  }
  .\[\.border-b\]\:pb-6.border-b {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .\[\.border-t\]\:pt-6.border-t {
    padding-top: calc(var(--spacing) * 6);
  }
  .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] > [role="checkbox"] {
    --tw-translate-y: 2px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .\[\&\>div\>div\:last-child\]\:\!p-1 > div > div:last-child {
    padding: calc(var(--spacing) * 1) !important;
  }
  .\[\&\>div\>div\:last-child\>svg\]\:\!hidden > div > div:last-child > svg {
    display: none !important;
  }
  .\[\&\>svg\]\:hidden > svg {
    display: none;
  }
  .\[\&\>tr\]\:last\:border-b-0 > tr:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }
  .\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state="open"] > svg {
    rotate: 180deg;
  }
}
@property --tw-animation-delay {
  syntax: "*";
  inherits: false;
  initial-value: 0s;
}
@property --tw-animation-direction {
  syntax: "*";
  inherits: false;
  initial-value: normal;
}
@property --tw-animation-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-animation-fill-mode {
  syntax: "*";
  inherits: false;
  initial-value: none;
}
@property --tw-animation-iteration-count {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-enter-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-enter-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-enter-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-enter-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-enter-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-enter-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-exit-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-exit-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
:root {
  --tg-viewport-safe-area-inset-top: -30px;
  --tg-viewport-safe-area-inset-bottom: 0px;
  --color-background: #141414;
  --color-background-secondary: #282727;
  --color-background-secondary-2: #3a3a3a;
  --color-text: #fff;
  --color-text-muted: #6d6d71;
  --font-sans:
    "SFProText", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --text-transparent-3: #ffffff3d;
  --text-transparent-2: #fff6;
  --text-transparent-1: #ffffffb3;
  --radius: 16px;
  --background: #141414;
  --foreground: #fff;
  --card: #fff;
  --card-foreground: #fff;
  --popover: #fff;
  --popover-foreground: #fff;
  --primary: #22c55e;
  --primary-foreground: #fff;
  --secondary: #282727;
  --secondary-foreground: #6d6d71;
  --secondary-40: var(--secondary);
}
@supports (color: color-mix(in lab, red, red)) {
  :root {
    --secondary-40: color-mix(in srgb, var(--secondary) 30%, var(--background));
  }
}
:root {
  --secondary-60: var(--secondary);
}
@supports (color: color-mix(in lab, red, red)) {
  :root {
    --secondary-60: color-mix(in srgb, var(--secondary) 60%, var(--background));
  }
}
:root {
  --secondary-64: #282727;
  --muted: #3a3a3a;
  --muted-foreground: #6d6d71;
  --accent: #49df64;
  --accent-foreground: #363636;
  --destructive: #df494d;
  --destructive-secondary: #ff3f46;
  --border: #454545;
  --input: #1c1c1c;
  --ring: #fff;
  --chart-1: #f4a261;
  --chart-2: #2a9d8f;
  --chart-3: #264653;
  --chart-4: #e9c46a;
  --chart-5: #e76f51;
  --sidebar: #fcfcfc;
  --sidebar-foreground: #252525;
  --sidebar-primary: #363636;
  --sidebar-primary-foreground: #fcfcfc;
  --sidebar-accent: #f7f7f7;
  --sidebar-accent-foreground: #363636;
  --sidebar-border: #ebebeb;
  --sidebar-ring: #b3b3b3;
  --bg-gold: #f1aa05;
  --bg-purple: #af51de;
  --bg-cyan: #5ac8fa;
  --bright-azure: #22c55e;
  --bright-azure-2: #18b653;
  --bg-dark: #121212;
  --bg-dark-2: #1a1a1a;
  --bg-dark-3: #00131d;
  --bg-dark-4: #1e1e1e;
  --bg-darkness: #0a0a0a;
  --bg-grey: #2d2d2d;
  --bg-grey-2: #292929;
  --bg-grey-3: #b8b8b8;
  --tifany: #68fbdd;
  --orange: #f18305;
  --wallet-history-green: #49df64;
  --wallet-history-red: #df494d;
  --wallet-history-gray: #6d6d71;
  --preview-notification: #f1aa051f;
  --gold-gradient: linear-gradient(
    94.02deg,
    #fac297 1.95%,
    #ffc386 50.42%,
    #ca8e52 98.56%
  );
  --gold-gradient-secondary: linear-gradient(
    95.81deg,
    #f1aa05 0.35%,
    #fbae61 49.03%,
    #e6b94e 97.72%
  );
  --warm-coral: #d88b6b;
  --light-gold: #e7d741;
  --light-gold-2: #ffe823;
  --silver: #a5a5a5;
  --bronze: #d3aa4e;
  --lazure: #b0e6ff;
  --c-light: #fff;
  --glass-reflex-light: 0.3;
  --glass-shadow:
    inset 1.8px 3px 0px -2px #ffffff0f, inset 2px 2px 0px -2px #ffffff17,
    inset -2px -2px 2px -2px #ffffff17, inset -1.8px -3px 0px -2px #ffffff0f;
  --glass-shadow-modern:
    inset 1.8px 3px 0px -2px var(--c-light),
    inset 2px 2px 0px -2px var(--c-light),
    inset -2px -2px 2px -2px var(--c-light),
    inset -1.8px -3px 0px -2px var(--c-light);
}
@supports (color: color-mix(in lab, red, red)) {
  :root {
    --glass-shadow-modern:
      inset 1.8px 3px 0px -2px
        color-mix(
          in srgb,
          var(--c-light) calc(var(--glass-reflex-light) * 20%),
          transparent
        ),
      inset 2px 2px 0px -2px
        color-mix(
          in srgb,
          var(--c-light) calc(var(--glass-reflex-light) * 30%),
          transparent
        ),
      inset -2px -2px 2px -2px
        color-mix(
          in srgb,
          var(--c-light) calc(var(--glass-reflex-light) * 30%),
          transparent
        ),
      inset -1.8px -3px 0px -2px
        color-mix(
          in srgb,
          var(--c-light) calc(var(--glass-reflex-light) * 20%),
          transparent
        );
  }
}
@supports color-mix(in srgb, white, transparent) {
  :root {
    --glass-shadow: var(--glass-shadow-modern);
  }
}
.glass-shadow {
  box-shadow: var(--glass-shadow);
}
.cart-wrapper {
  bottom: calc(var(--tg-viewport-safe-area-inset-bottom) + 75px);
  transition: transform 0.25s ease-in-out;
  transform: translateY(0);
}
html.keyboard-visible .cart-wrapper {
  transform: translateY(55px);
}
html.keyboard-visible div.fixed.left-0.bottom-0.z-20.w-full {
  visibility: hidden !important;
  pointer-events: none !important;
}
html,
body {
  height: 100%;
  color: var(--foreground);
  background: var(--background);
  font-family: var(--font-sans);
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
*,
:after,
:before {
  box-sizing: border-box;
  scrollbar-color: black #141414;
  scrollbar-width: none;
  outline: none;
}
button {
  cursor: pointer;
}
a {
  text-decoration: none;
}
* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -khtml-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
input,
textarea {
  -webkit-user-select: text;
  user-select: text;
  -khtml-user-select: text;
}
html {
  touch-action: manipulation;
  -webkit-text-size-adjust: none;
}
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.gold-gradient {
  background: var(--gold-gradient);
}
.gold-gradient-secondary {
  background: var(--gold-gradient-secondary);
}
.gold-gradient,
.gold-gradient-secondary {
  -webkit-text-fill-color: transparent;
  color: #0000;
  -webkit-background-clip: text;
  background-clip: text;
}
.bg-collection {
  background: radial-gradient(100% 100% at 50% 100%, #4e4c4c, #333131);
}
.text-transparent-3 {
  color: var(--text-transparent-3);
}
.text-transparent-2 {
  color: var(--text-transparent-2);
}
.text-transparent-1 {
  color: var(--text-transparent-1);
}
.preview-notification {
  background-color: var(--preview-notification);
}
#confetti canvas {
  pointer-events: none;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-pan-x {
  syntax: "*";
  inherits: false;
}
@property --tw-pan-y {
  syntax: "*";
  inherits: false;
}
@property --tw-pinch-zoom {
  syntax: "*";
  inherits: false;
}
@property --tw-scroll-snap-strictness {
  syntax: "*";
  inherits: false;
  initial-value: proximity;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@keyframes enter {
  0% {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(
        var(--tw-enter-translate-x, 0),
        var(--tw-enter-translate-y, 0),
        0
      )
      scale3d(
        var(--tw-enter-scale, 1),
        var(--tw-enter-scale, 1),
        var(--tw-enter-scale, 1)
      )
      rotate(var(--tw-enter-rotate, 0));
    filter: blur(var(--tw-enter-blur, 0));
  }
}
@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(
        var(--tw-exit-translate-x, 0),
        var(--tw-exit-translate-y, 0),
        0
      )
      scale3d(
        var(--tw-exit-scale, 1),
        var(--tw-exit-scale, 1),
        var(--tw-exit-scale, 1)
      )
      rotate(var(--tw-exit-rotate, 0));
    filter: blur(var(--tw-exit-blur, 0));
  }
}
@keyframes accordion-down {
  0% {
    height: 0;
  }
  to {
    height: var(
      --radix-accordion-content-height,
      var(
        --bits-accordion-content-height,
        var(
          --reka-accordion-content-height,
          var(
            --kb-accordion-content-height,
            var(--ngp-accordion-content-height, auto)
          )
        )
      )
    );
  }
}
@keyframes accordion-up {
  0% {
    height: var(
      --radix-accordion-content-height,
      var(
        --bits-accordion-content-height,
        var(
          --reka-accordion-content-height,
          var(
            --kb-accordion-content-height,
            var(--ngp-accordion-content-height, auto)
          )
        )
      )
    );
  }
  to {
    height: 0;
  }
}

/* === appended: giftpay overlay CSS (originally giftpay.css) === */
/*!
 * GiftPay overlay styles — `.gp-*` classes the Russian-overlay JS
 * applies to currency markers, star icons, deposit-method switch
 * pills, etc. Keeps the cloned Portals layout pixel-identical while
 * letting our markers inherit font metrics from neighbouring text.
 */

/* Ruble glyph fallback. The project ships SFProText.woff2 as a
 * Latin+Cyrillic subset (~100 KB each weight) and U+20BD (the ₽
 * sign) is NOT included — the buyer kept seeing the ruble render
 * in a serif-y system font on the /cart price pills because the
 * browser fell back to a generic CSS fallback when SFProText
 * couldn't supply the glyph.
 *
 * Inject a SFProText alias that maps the ruble glyph specifically
 * to a system sans-serif via `unicode-range`. The browser will use
 * the regular SFProText woff2 for every character it has and only
 * dip into this fallback for U+20BD, where it picks the closest
 * sans-serif match available — visually consistent with the
 * neighbouring digits no matter the OS. `font-weight: 100 900` so
 * the alias covers every weight the bundle paints (regular,
 * semibold, bold). */
@font-face {
  font-family: SFProText;
  font-style: normal;
  font-weight: 100 900;
  src:
    local("SF Pro Text"),
    local("SF Pro"),
    local("Helvetica Neue"),
    local("Helvetica"),
    local("Arial"),
    local("Segoe UI"),
    local("Roboto");
  unicode-range: U+20BD;
}

.gp-currency-marker {
  align-items: baseline !important;
  display: inline !important;
  font-family: inherit !important;
  /* font-size deliberately NOT pinned: the russian-overlay JS syncs an
     inline `font-size: …px` only when the bundle didn't choose an explicit
     Tailwind size class (text-[40px], text-2xl, …). Forcing 1em here on
     top of the JS used to clobber the buy-modal's 40-px price down to
     the 16-px label that lived next to it. */
  font-weight: inherit !important;
  height: auto !important;
  justify-content: center !important;
  line-height: inherit !important;
  min-height: 0 !important;
  min-width: 0 !important;
  position: static !important;
  transform: none !important;
  vertical-align: baseline !important;
  width: auto !important;
}

.gp-runtime-hidden {
  display: none !important;
}

.sticky[class*="backdrop-blur"] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

div[class*="grid-cols-[repeat(auto-fill"] > div[class*="bg-card-secondary"],
#root div[class*="grid-cols-[repeat(auto-fill"] > * {
  overflow: visible !important;
}

div[class*="bg-secondary/65"][class*="squircle-3xl"] {
  backface-visibility: hidden;
  transform: translateZ(0);
}

#root div[class*="grid-cols-[repeat(auto-fill"] img {
  backface-visibility: hidden;
}

.gp-ruble-amount {
  font-weight: 800 !important;
}

.gp-star-svg {
  background: url("/assets/star.svg") center / contain no-repeat !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  height: 1em !important;
  line-height: 1 !important;
  min-width: 1em !important;
  transform: none !important;
  vertical-align: -0.12em !important;
  width: 1em !important;
}

.gp-season-nav-star,
.gp-season-nav-star-img {
  -webkit-mask: url("/assets/star.svg") center / contain no-repeat !important;
  background: currentColor !important;
  color: currentColor !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  mask: url("/assets/star.svg") center / contain no-repeat !important;
  object-fit: contain !important;
  pointer-events: none !important;
  /* Inherit the tab's text colour so the star matches the label —
     gray when inactive, green when active. Earlier revision pinned
     the colour to gold which the user rejected ("звезда цветная,
     исправь"). */
  width: 24px !important;
  height: 24px !important;
}

/* Empty-state placeholder illustrations (e.g. /top-up "История пуста"
   pirate chest, marketplace empty cart) are 1536×1024 PNGs but the
   bundle hardcodes w-[100px] h-[100px] on the <img>, which both crushes
   the proportions and renders an unreadably small icon. Bump to a
   180×120 box (matches the source 3:2 aspect) and `object-fit: contain`
   keeps the original proportions intact. */
img[src*="makeFirstPlaceholder"],
img[src*="empty-cart"],
img[src*="offers-placeholder"] {
  width: 180px !important;
  height: 120px !important;
  object-fit: contain !important;
}

/* Splash wordmark stacking: the bundle (~index-p7V068-5.js :156150) renders
   the GiftPay logo as a sibling of a 700×700 glow wrapper that comes LATER
   in document order. Without an explicit stack value the wrapper paints on
   top of the logo, leaving the brand text obscured by the green radial
   glow. The wrapper's children include a glow with z-index:-1 (which only
   sinks below its own siblings, not below the wordmark), so the cleanest
   fix is to lift the wordmark itself. The splash uses position:absolute
   with no own stacking context, so a positive z-index here is enough.
   The selector matches both inline-style serializations (Chrome/Safari
   emit `position: absolute` with a space; some WebViews drop the space). */
img[src$="/giftpay-logo.svg"][style*="absolute"] {
  z-index: 2 !important;
}

/* Resale-route splash wordmark — REMOVED 2026-05-15 (regression).
   A previous attempt rendered the brand text via body::before gated by
   :has(.fixed.inset-0.z-\[9999\].bg-background) so it would only paint
   while the splash overlay was mounted. The :has() target did not match
   the actual splash root in this build, so the FunPay/Playerok brand
   text persisted ON TOP of the loaded page (visible on the green banner
   and on the right-side empty area — buyer-reported regression). The
   acceptable trade-off is the brief GiftPay flash on splash; chasing it
   needs either a brand SVG asset for each route (none exist today) or
   a JS hook into bpt's mount/unmount, which is out of scope here. */

/* Splash glow — predict bakes the SVG at a fixed 700×700 (the bundle
   passes width:700, height:700 as React props). On wide desktop
   viewports that left huge black margins around the halo ("по бокам
   не растягивается"), so we scale up to 90vw on desktop. The earlier
   pass made it `width: 90vw` unconditionally, which on a 540-wide
   Telegram WebApp window shrunk the SVG to 486×486 — smaller than
   predict's intended 700×700, leaving the glow visibly tiny relative
   to Pepe ("почему свечение такое мелкое"). `max(700px, 90vw)` keeps
   predict's baseline at narrow widths and only scales up when the
   viewport actually has room to spare. Same selector covers our /
   splash (z-9999 wrapper) and predict's /onboarding logo glow (Z
   export from index-CdMVaiUp.js); both reuse the 562×562 viewBox. */
svg[viewBox="0 0 562 562"] {
  /* Keep the halo wide on desktop, but cap only its height. The SVG is
     allowed to stretch as an ellipse via preserveAspectRatio="none" in
     the bundle, so it no longer gets bottom-clipped OR side-collapsed.
     Width deliberately exceeds the viewport: the fade continues past
     the screen edges instead of ending as dark side panels. */
  width: max(700px, 125vw) !important;
  height: min(max(700px, 90vw), calc(100vh - 2px)) !important;
  width: max(700px, 125vw) !important;
  height: min(max(700px, 90vw), calc(100dvh - 2px)) !important;
}

button[class*="_optionActive"] .gp-season-nav-star,
button[class*="_optionActive"] .gp-season-nav-star-img {
  color: inherit !important;
  background: currentColor !important;
}

.gp-deposit-switch {
  align-items: center !important;
  justify-content: center !important;
}

.gp-deposit-switch > :not(.gp-deposit-switch-icon) {
  display: none !important;
}

.gp-deposit-switch-icon {
  align-items: center !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  height: 30px !important;
  justify-content: center !important;
  line-height: 1 !important;
  min-width: 30px !important;
  width: 30px !important;
}

.gp-deposit-switch-icon-rub {
  color: inherit !important;
  font-family: inherit !important;
  font-size: 28px !important;
  font-weight: 800 !important;
}

.gp-native-deposit-rub-icon {
  color: inherit !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.gp-deposit-switch-icon-star {
  -webkit-mask: url("/assets/star.svg") center / contain no-repeat !important;
  background: currentColor !important;
  color: inherit !important;
  height: 30px !important;
  mask: url("/assets/star.svg") center / contain no-repeat !important;
  width: 30px !important;
}

button[class*="_optionActive"] .gp-deposit-switch-icon-star {
  background: var(--primary) !important;
  color: var(--primary) !important;
}

/* Pull the deposit clear-input "⌫" button INSIDE its input pill. The
 * bundle's `right: -56px` was meant to place the button just outside
 * the pill on a mobile viewport (~390 px). On anything wider the pill
 * expands and the button floats off into blank space (or off-screen
 * entirely). `right: 8px` is the universal "clear input ✕" pattern.
 * Higher specificity (.glass-shadow > .relative.flex > button.absolute)
 * keeps it from touching modal close ✕ buttons.
 */
div[class*="glass-shadow"]
  div[class*="relative"][class*="flex"][class*="justify-center"]
  > button[class*="absolute"][class*="rounded-full"] {
  right: 8px !important;
}

/*!
 * GiftPay route-specific stylesheet — companion to giftpay-route-fixes.js.
 * All rules are scoped via body[data-gp-route="..."] selectors so they
 * only apply on the matching route. data-gp-route is set by the route-
 * attribute installer in giftpay-route-fixes.js (history.pushState hook),
 * which runs before the Vite bundle so the attribute is present from
 * first paint.
 */
/* Per-card price pill ₽ glyph — strip inline-style offset so it sits
   on the same baseline as the number and reads as one centred token.
   The bundle inlines `font-family: Segoe UI, Arial, sans-serif;
   font-size: 15px; transform: translateY(-1px);` on the ₽ span. With
   the digits at 20px and ₽ at 15px shifted up 1px, the pill's contents
   look "криво/влево" (buyer feedback). Match the digit size + drop the
   transform so the ₽ shares one optical line with the number. Inherit
   font-family from the bundle's body font (SFProText) — without this
   the inline Segoe UI inline-style wins on Windows desktops, giving the
   ₽ a noticeably different glyph from the digit, and the buyer flagged
   it as "другой шрифт у Р" (Issue 2026-05-12). */
/* Per-card price pill ₽ glyph — strip the bundle's inline-style offset
   so the glyph sits on the same baseline as the digit. The bundle
   inlines `font-family: "Segoe UI", Arial, sans-serif; font-size: 15px;
   transform: translateY(-1px); margin-left: 1px;` on the ₽ span.

   Two-part fix:
   1) The selector below targets ANY ₽ span (`[style*="Segoe"]`)
      regardless of parent so all five surfaces — price pill, profile
      header, deposit input, deposit tab icon, cart row — pick up the
      same font/baseline rules. `inherit` is unreliable in Telegram
      WebView (Android fallback resolves to Roboto, which has a
      noticeably different ₽ glyph shape from the digit glyphs the
      bundle ships in the SF Pro stack), so the stack is named
      explicitly to match `body`.
   2) Override `font-size` and `margin-left` only inside `bg-primary`
      price pills where the digit size has been bumped to 17px. The
      bundle's 15px inline keeps the ₽ visibly smaller than the
      adjacent digit and reads as "another font" even when the family
      matches; matching the digit size makes the pair read as one
      typographic token. */
span.leading-none[style*="Segoe"],
span[style*="Segoe UI"][style*="Arial"] {
  font-family:
    SFProText,
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    sans-serif !important;
  transform: none !important;
  line-height: 1 !important;
}
[data-slot="button"].bg-primary > span.leading-none[style*="Segoe"] {
  font-size: 17px !important;
  font-weight: 700 !important;
  margin-left: 3px !important;
}

/* /stars gift cards inject their own price pill (not a bundle Button)
   so the `[data-slot="button"].bg-primary` selector above doesn't
   reach them. Same one-span-per-glyph trick: we render `<span>24</span>
   <span class="gp-ruble-amount">₽</span>` and pin the ruble's font
   explicitly so it picks up the same family/weight/size as the digit
   sibling. Without this the system font stack runs per-glyph fallback
   and ₽ ends up in a thinner family than the digit. */
span.gp-ruble-amount {
  font-family:
    SFProText,
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    sans-serif !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  margin-left: 3px !important;
  line-height: 1 !important;
}

/* Universal ₽ glyph normalisation — buyer flag 2026-05-16: "цена и
   символ рубля находятся не в одном поле а в двух разных, изза этого
   мы видим то, что они разных размеров, разной высоты и прочее".
   The bundle has at least four different ₽ rendering paths:
     • <span class="leading-none" style="transform:translateY(-1px); ...">
       ₽</span>  (rapid-buy buttons, see ke component at ~141925)
     • <span class="leading-none gp-ruble-amount">  (stars gift pills)
     • <span style="fontFamily:'Segoe UI', Arial, ...">  (legacy NFT cards)
     • <span style="font-family: inherit; font-size: inherit; ...">
       (cart/drawer prices, line 102292 et al)
   The previous narrow rules only caught the "Segoe" inline-style and
   gp-ruble-amount class paths, so the translateY-shifted variant still
   rendered the ₽ one pixel above the digit baseline at a different
   font weight, exactly the asymmetry the buyer sees in the gift card
   screenshots. This block force-inherits typography for ALL spans
   adjacent to a price digit span inside any button or pill, so the
   pair reads as one glyph regardless of which render path emitted it. */
[data-slot="button"] > span.leading-none + span.leading-none,
[data-slot="button"] > span:not([class]) + span:not([class]),
.bg-primary > span.leading-none + span.leading-none {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  vertical-align: baseline !important;
  transform: none !important;
  display: inline !important;
  margin: 0 0 0 3px !important;
  padding: 0 !important;
}

/* "Купить подарок" CTA hard-disable when balance is insufficient.
   `pointer-events:none` blocks React's synthetic onClick from ever
   firing — the document-level capture handler in giftpay-route-fixes.js
   is the fallback. We do NOT visibly grey-out the button (the bundle
   already shows "Недостаточно средств" inside the drawer; double
   indication is noisy), only neutralise the click. */
button[data-gp-buy-disabled="1"] {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Top-left cashback pill — same dimensions on EVERY route.
   The old profile-only replacement layer is gone; only the native
   bundle pill remains. route-fixes.js
   stamps replaced coin svgs with data-gp-coin-replaced so we can target
   the cashback glyph without shrinking unrelated gold icons.
   Keeping the bundle's p-2 padding intact — no height overrides,
   no extra padding, no wrapper sizing. Natural pill height becomes
   8 + 16 + 8 = 32px content + 2px borders = 34px, exactly equal to
   the topup pill across every viewport. */
.bg-gold\/15.rounded-xl.p-2 svg[data-gp-coin-replaced="1"],
button.bg-gold\/15 svg[data-gp-coin-replaced="1"] {
  width: 16px !important;
  height: 16px !important;
}


[style*="--gp-banner-bg"] {
  background-color: var(--gp-banner-bg, transparent);
}

/* Promo-banner cold-load fallback.
   The bundle first paints the banner slot as `.bg-secondary/40.animate-pulse`.
   If the banner request resolves late, that looks like a dead black block.
   Paint the real local promo image into that placeholder, then the bundle's
   fetched banner replaces it in place once data arrives. */
.scrollable > .px-4.mb-3.z-11 > div.bg-secondary\/40.animate-pulse {
  background: url("/assets/giftpay-banner.webp") center / cover no-repeat !important;
  animation: none !important;
}

/* Single-banner mode (no carousel UX) 2026-05-13: backend
   `/api/market/banners` now always returns ONE banner. Hide the
   navigation chrome (left/right arrows, position dots) the bundle's
   carousel ships by default — it is meaningless when there's only a
   single slide and the user explicitly does not want a carousel. */
[data-slot="carousel"].relative.px-4.mb-3.z-11 button[aria-label="Scroll right"],
[data-slot="carousel"].relative.px-4.mb-3.z-11 button[aria-label="Scroll left"],
[data-slot="carousel"].relative.px-4.mb-3.z-11 [role="tablist"],
[data-slot="carousel"].relative.px-4.mb-3.z-11 [class*="indicator"],
[data-slot="carousel"].relative.px-4.mb-3.z-11 [class*="_dot"],
[data-slot="carousel"].relative.px-4.mb-3.z-11 [class*="dots"] {
  display: none !important;
}

/* Per-route banner override. The API response /api/market/banners
   always returns /assets/giftpay-banner.webp, but the /funpay and
   /play rebrand routes need their own brand artwork. We hide
   the original <img> via opacity (so layout / aspect-ratio stays
   intact) and paint the route-specific image as a background on
   the immediate img-container. data-gp-route is set on body by the
   route-attr observer in the giftpay overlay below. */
body[data-gp-route="funpay"] .scrollable img[src*="/assets/giftpay-banner.webp"],
body[data-gp-route="play"] .scrollable img[src*="/assets/giftpay-banner.webp"] {
  opacity: 0 !important;
}
body[data-gp-route="funpay"] .scrollable img[src*="/assets/giftpay-banner.webp"] {
  background: url("/assets/funpay-banner.webp") center / cover no-repeat !important;
  opacity: 1 !important;
  /* Hide the underlying broken img by emptying it via a tiny
     transparent placeholder, then paint the real image as bg. */
  content: url("/assets/funpay-banner.webp") !important;
}
body[data-gp-route="play"] .scrollable img[src*="/assets/giftpay-banner.webp"] {
  background: url("/assets/playerok-banner.webp") center / cover no-repeat !important;
  opacity: 1 !important;
  content: url("/assets/playerok-banner.webp") !important;
}

/* On /stars and /premium, every form submit button starts visually
   locked. Our buttonContext()/MutationObserver flips data-gp-button-ok
   to "1" once it has confirmed the form is in a submittable state
   (positive amount, valid recipient, sufficient balance). Without this
   pre-emptive lock the bundle's React paints the button at full green
   on first mount, then our JS runs ~one frame later and dims it — the
   user sees a half-second flash. The CSS rule wins the race because it
   applies on first paint, before any JavaScript has executed. */
body[data-gp-route="stars"] form button[type="submit"]:not([data-gp-button-ok="1"]),
body[data-gp-route="premium"] form button[type="submit"]:not([data-gp-button-ok="1"]) {
  pointer-events: none !important;
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  filter: grayscale(0.4) !important;
}

/* Recipient @username field — red border when validator marks the input
   as hard-invalid (channel/group/bot/non-existent handle). The bundle
   wraps the visible <input> in a flex `bg-input/60 rounded-2xl` div, so
   we target both the input AND that wrapper so the rounded outer ring
   becomes red. The submit-button gate uses pointer-events instead of
   the disabled attribute — fighting React's controlled disabled state
   was the cause of the half-second green-flash users saw on form mount
   (we forced disabled=false, React re-set true on next render). With
   pointer-events:none the bundle's own disabled handling stays the
   single source of truth for the visual look; we just prevent the
   click from firing while validation is failing. */
[data-gp-recipient-invalid="1"] {
  outline: 1px solid #f87171 !important;
  outline-offset: -1px;
  box-shadow: inset 0 0 0 1px #f87171 !important;
  border-radius: 1rem;
}
input[data-gp-recipient-invalid="1"] {
  caret-color: #f87171;
}
button[data-gp-recipient-block="1"],
button[data-gp-balance-block="1"] {
  pointer-events: none !important;
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  filter: grayscale(0.4) !important;
  transition: none !important;
}
/* Fade is allowed only AWAY from the locked state (block→active), not
   towards it. Without the fade-out the lock looks abrupt; without
   blocking the fade-in the user reports the half-second "green flash"
   on form mount as the button transitions from full-active visually
   to its computed locked state. The `:not()` chain keeps the eased
   transition for active buttons but skips it the moment a gate flag
   is added, so the lock is instantaneous. */
button:not([data-gp-recipient-block="1"]):not([data-gp-balance-block="1"]):not([data-gp-buy-disabled="1"]) {
  transition: opacity 120ms ease, filter 120ms ease;
}

/* === extracted from index.html line 2908 === */
      /* Stars-page injected gifts grid. We deliberately reuse the bundle's own
         Tailwind utility classes (bg-secondary/65, glass-shadow, squircle-*,
         aspect-square, bg-primary, etc.) for visuals. The element-level rules
         below are pure layout — viewport-responsive grid, image fit.

         Spacing tightened so the gap between the Buy Stars form's bottom
         button and "Все подарки" heading is compact (~12px instead of ~70).
         Heading bumped to 22px so it reads as a proper section header,
         matching the bundle's own NFT-collection page section titles. */
      /* Section sits inside Zht's .px-4 wrapper now — its parent already
         provides the 16px lateral inset, so we only carry vertical
         breathing room here (12px top to lift off the form's bottom
         edge, 96px bottom for bottom-nav clearance + scroll comfort). */
      #gp-stars-gifts-section { padding: 12px 0 96px; }
      #gp-stars-gifts-section .gp-stars-section-title {
        font-weight: 700;
        font-size: 28px;
        line-height: 1.2;
        margin: 0 0 16px;
      }
      /* Stars cards: enforce a minimum of 3 columns at any viewport
         width via `min(33.33% - 7px, 130px)` as the column floor. The
         33%-derived term wins on narrow viewports (clamps each cell to
         a third of the row, guaranteeing 3 columns side-by-side even on
         320px phones); the 130px term wins as soon as 33% of the row
         exceeds that, letting the grid pack 4+ columns on tablet/desktop
         widths without making cards tiny. The card stays at this size —
         user wants only the gift PNG inside the card to shrink, not the
         card area, so the image is scaled down separately below. */
      #gp-stars-gifts-section .gp-stars-grid {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(min(33.33% - 7px, 130px), 1fr));
      }
      #gp-stars-gifts-section [data-gift-id] {
        content-visibility: auto;
        contain-intrinsic-size: 220px 320px;
      }
      /* Shrink the gift PNG inside the card. The img is a replaced element
         with `width:100% height:100% object-fit:contain bg:rgba(0,0,0,0.18)`
         (set by the .gp-stars-card-img rule above). Adding inset padding
         shrinks the CONTENT BOX while the rendered background still paints
         the full BORDER BOX — so the dark squircle frame keeps its original
         full-card size and the PNG inside renders smaller within it (the
         contain-fit picks up the new content box). Matches the bundle's
         NFT card aesthetic where the gift icon sits inside a colored
         squircle with breathing room around it. transform: scale() was
         the wrong tool here — it shrinks the visible box AND its
         background together, leaving a tiny square instead of a
         full-card squircle. */
      #gp-stars-gifts-section .gp-stars-card-img {
        padding: 10% !important;
        box-sizing: border-box !important;
      }
      /* NFT marketplace grid: ensure ≥2 columns at every viewport. The
         bundle's compiled grid uses minmax(160px,1fr) and minmax(140px,
         1fr) inside @media (max-width:400px) — both leave only 1 column
         on a 320px phone (288px container ÷ 140 col ≈ 1.97 cells) which
         reads as a broken layout. The `min(50% - 6px, X)` floor clamps
         each column to half-the-row at narrow widths so two cells always
         pack side-by-side, while the X term wins as soon as the row is
         wide enough to let cards reach their native size — and the grid
         then naturally packs 3+ columns on tablet/desktop widths. The
         override targets the bundle's exact compiled class names. */
      .grid-cols-\[repeat\(auto-fill\,minmax\(160px\,1fr\)\)\] {
        grid-template-columns: repeat(auto-fill, minmax(min(50% - 6px, 160px), 1fr)) !important;
      }
      @media (max-width: 400px) {
        .max-\[400px\]\:grid-cols-\[repeat\(auto-fill\,minmax\(140px\,1fr\)\)\] {
          grid-template-columns: repeat(auto-fill, minmax(min(50% - 6px, 140px), 1fr)) !important;
        }
      }

      #gp-stars-gifts-section .gp-stars-card-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: rgba(0, 0, 0, 0.18);
      }

      /* "Звёзды" bottom-nav button: the runtime-injected <span> star sits
         next to the original (now hidden via inner-svg.gp-runtime-hidden)
         _icon_ wrapper. Behave like the NFT icon (flex layout) and fully
         hide the empty _icon_ sibling. Sizing/clipping is handled by the
         tight star-nav.svg viewBox referenced in .gp-season-nav-star —
         no mask-size or vertical-nudge overrides needed here. */
      button[class*="_option_"] .gp-season-nav-star {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
      }
      button[class*="_option_"]:has(> .gp-season-nav-star) > div[class*="_icon_"] {
        display: none !important;
      }

      /* Bottom-nav "Звёзды" star icon — paired class with the bundle
       * change at index-p7V068-5.js:110610. Ultra-strong selector
       * chain so the bundle's `._icon_ svg { width:24px height:24px }`
       * rule + any hover-scale cascade can't override us regardless
       * of route or interactivity state. */
      button[class*="_option_"] div[class*="_icon_"] svg.gp-nav-star-icon,
      div[class*="_icon_"] svg.gp-nav-star-icon,
      svg.gp-nav-star-icon {
        width: 30px !important;
        height: 28px !important;
        min-width: 30px !important;
        min-height: 28px !important;
        max-width: none !important;
        max-height: none !important;
      }

      /* "Себе" quick-fill button inside the @username input on the
       * Stars + Premium purchase forms. The bundle renders it
       * conditionally (only when the input is empty) so authenticated
       * WebApp buyers can one-tap their own handle into the form —
       * this is intentional UX. The buyer asked to remove it ONLY
       * from the bot-landing public-web view (anonymous visitors who
       * have no Telegram identity to fill from), not from the real
       * Telegram WebApp. Gate the visibility on
       * `data-gp-bot-landing="1"` which the bootstrap sets on body
       * for that surface only. */
      body[data-gp-bot-landing="1"] button.gp-self-shortcut {
        display: none !important;
      }

      /* Cashback / referrals stat tile icons — REMOVED (2026-05-12).
       *
       * Previously I bumped `width/height` to 28-px and added
       * `padding-left: 16px` on the parent to "fix" what looked like
       * clipping at the rounded tile corners. Buyer correction:
       * "ну тут не как в предикте сделано. исправь че за
       * самодеятельность и обрезания." — predict ships these icons
       * at their bundle-native 21-px size and the rounded corner is
       * the intentional design, not a clipping bug. My size bump
       * was the source of the cut-off look, not the cure. Letting
       * the bundle's intrinsic sizing through preserves the predict
       * reference. */

      /* Filter-chips horizontal scroll-arrow indicators are owned by the
         bundle: it sets opacity-100 on mount and the ResizeObserver swaps
         to opacity-0 when no overflow exists. We previously hid them
         outright, but users want them visible when content is actually
         truncated (e.g. with the "Модель" dropdown chevron getting cut
         off). No CSS override needed — the bundle's own opacity logic
         is correct. */

      /* Deposit amount is now rendered by the bundle as a centered inline row:
         number input + visual currency + clear button. No route override. */

      /* Suppress all switcher transitions/animations (slider :after, option
         backgrounds, scaleToggle keyframes) while gp-switcher-no-anim is
         applied. Targets the switcher itself plus :before/:after AND any
         descendants — bundle attaches the slider as :after, but the option
         buttons also have their own background-color/box-shadow transitions
         (lines 204-206 of index-DhzwQ6hH.css) that can fire during route
         changes from -1 → valid. We hold this class through the bundle's
         post-route-change useEffect (which uses a 100ms setTimeout — see
         index-p7V068-5.js:110476) so any data-active attribute updates the
         bundle does as a side-effect of /stars navigation pass through
         without playing the wrong slide animation. */
      [class*="_switcher_"].gp-switcher-no-anim,
      [class*="_switcher_"].gp-switcher-no-anim *,
      [class*="_switcher_"].gp-switcher-no-anim::before,
      [class*="_switcher_"].gp-switcher-no-anim::after {
        transition: none !important;
        animation: none !important;
      }

      /* Surgical version of gp-switcher-no-anim — kills ONLY the slider's
         translate transition while leaving the data-active keyframe
         animations (_scaleToggle*) intact. Used when correcting data-active
         on /stars entry: the slider needs to snap to the Stars slot without
         playing a "from НФТ" slide, but the destination's scale-pulse
         keyframe must still fire so the button reads as "I just entered
         this section" — exactly the visual the user wants on /stars to
         match the NFT route's natural mount feel. */
      [class*="_switcher_"].gp-switcher-no-slide::after {
        transition:
          background-color var(--switcher-transition),
          box-shadow var(--switcher-transition) !important;
      }

      /* Hide the @-prefix on the stars-buy username input — the placeholder
         already starts with "@" so an extra prefix glyph reads as duplicate.
         Also match data-gp-prev-route so these stay hidden through the page
         exit animation (the data-gp-route attribute flips synchronously on
         pushState, but the /stars DOM is still on screen ~300ms during
         Framer's exit transition — without this the user sees the hidden
         "@" and "Доступна оплата картой" elements briefly flash). */
      body[data-gp-route="stars"] div.relative > div[class*="text-muted-foreground"] > span.text-lg,
      body[data-gp-prev-route="stars"] div.relative > div[class*="text-muted-foreground"] > span.text-lg {
        display: none !important;
      }
      body[data-gp-route="stars"] div.relative > input[placeholder^="@"],
      body[data-gp-prev-route="stars"] div.relative > input[placeholder^="@"] {
        padding-left: 16px !important;
      }

      /* Hide "Доступна оплата картой" footer — user requested removal. The
         row is the only mt-3.5 + text-white/40 wrapper inside the form. */
      body[data-gp-route="stars"] div[class*="text-white/40"][class*="mt-3.5"],
      body[data-gp-prev-route="stars"] div[class*="text-white/40"][class*="mt-3.5"] {
        display: none !important;
      }

      /* Stars-buy / Premium form decorative background. The bundle ships
         /assets/stars_bg.svg (warm-yellow + centerpiece star) and
         /assets/premium_bg.svg (blue + centerpiece star). Both SVGs have
         the centerpiece graphic in the upper third. Bundle wraps them in
         a fixed-height 360px container — but the form is taller than
         360px, so the image ends partway down and the form's solid
         `bg-input/60` shows beneath, creating a visible horizontal
         "rectangle cutoff" the user reported. Stretching the image
         container to fill the entire form (h-full + inset-0) makes the
         bg image extend to the form's rounded bottom edge, which clips
         it cleanly — no artificial mask gradient needed. The image keeps
         its top anchor so the star stays visible regardless of viewport
         aspect. */
      body[data-gp-route="stars"] form > div.pointer-events-none.absolute.inset-x-0.top-0,
      body[data-gp-prev-route="stars"] form > div.pointer-events-none.absolute.inset-x-0.top-0 {
        height: 100% !important;
      }
      body[data-gp-route="stars"] form > div.pointer-events-none.absolute.inset-x-0.top-0 > img,
      body[data-gp-prev-route="stars"] form > div.pointer-events-none.absolute.inset-x-0.top-0 > img {
        object-position: 50% 0% !important;
      }

      /* /stars top tabs (Покупка звёзд / Premium): hide the leading icons
         per user request — they read as decorative and the form below
         already shows the relevant context. The bundle's _title_ class
         renders the label at 10px which feels too small once the icon is
         gone, so we bump it to 15px and tighten weight. The bottom-nav
         switcher (НФТ / Звёзды) lives in `div.fixed.bottom-0` and is
         matched by a different ancestor path, so its icons and sizing
         are unaffected. */
      body[data-gp-route="stars"] div.px-4 > div.mt-2 > [class*="_switcher_"] [class*="_option_"] [class*="_icon_"],
      body[data-gp-prev-route="stars"] div.px-4 > div.mt-2 > [class*="_switcher_"] [class*="_option_"] [class*="_icon_"] {
        display: none !important;
      }
      body[data-gp-route="stars"] div.px-4 > div.mt-2 > [class*="_switcher_"] [class*="_option_"] [class*="_title_"],
      body[data-gp-prev-route="stars"] div.px-4 > div.mt-2 > [class*="_switcher_"] [class*="_option_"] [class*="_title_"] {
        font-size: 15px !important;
        font-weight: 600 !important;
      }

      /* (gp-stars-tab-persistence was REMOVED — see giftpay-route-fixes.js
         for the rationale. Without the auto-restore, there is no form swap
         on reload, so this `data-gp-stars-restoring` opacity mask serves
         no purpose. Rule deleted; if a future change re-introduces tab
         persistence, the mask should be reconsidered as part of that
         change, not kept around dormant.) */

      /* Купить звёзды / Купить Premium subtitle: bundle ships it at
         `text-white/45` (45% white opacity) which became hard to read
         once the bg image fades over the same vertical position. Bump
         to ~85% opacity so it's clearly legible without competing with
         the bold title above. */
      body[data-gp-route="stars"] form p[class*="text-white/45"],
      body[data-gp-prev-route="stars"] form p[class*="text-white/45"] {
        color: rgba(255, 255, 255, 0.85) !important;
      }

      /* Premium options price chip: bundle renders the price as
         `<₽-icon><span>₽ 32.00</span><span>~</span><span>$0.00</span>`.
         User requested removing the dollar conversion — keep just the
         ruble amount. Both the tilde separator and the dollar amount
         live inside the same flex row with class `text-white/35`, so a
         single rule clears both. */
      body[data-gp-route="stars"] div.flex.items-center.gap-1.whitespace-nowrap > span[class*="text-white/35"],
      body[data-gp-prev-route="stars"] div.flex.items-center.gap-1.whitespace-nowrap > span[class*="text-white/35"] {
        display: none !important;
      }

      /* Premium options price chip — ruble glyph position. The bundle ships
         the chip as `<span.h-3.5.w-3.5>₽</span><span>4 000</span>`: the
         glyph is force-fit into a 14x14 box that knocks it off the text
         baseline (looks tilted/crooked) AND it sits to the LEFT of the
         number. Russian convention is "<amount> ₽" — number first, symbol
         after. Reverse the flex order so the glyph trails the number, and
         strip the box constraint so the glyph aligns with the 13px text
         baseline. Scoped to the duration-option buttons only (matched by
         `button[aria-pressed].justify-between.rounded-sm` which is unique
         to the premium tab; stars-buy preset chips use `rounded-full`). */
      body[data-gp-route="stars"] form button[aria-pressed].flex.w-full.items-center.justify-between.rounded-sm > div.flex.items-center.gap-1.whitespace-nowrap,
      body[data-gp-prev-route="stars"] form button[aria-pressed].flex.w-full.items-center.justify-between.rounded-sm > div.flex.items-center.gap-1.whitespace-nowrap {
        flex-direction: row-reverse !important;
        gap: 2px !important;
      }
      body[data-gp-route="stars"] form button[aria-pressed].flex.w-full.items-center.justify-between.rounded-sm > div.flex.items-center.gap-1.whitespace-nowrap > span.h-3\.5.w-3\.5,
      body[data-gp-prev-route="stars"] form button[aria-pressed].flex.w-full.items-center.justify-between.rounded-sm > div.flex.items-center.gap-1.whitespace-nowrap > span.h-3\.5.w-3\.5 {
        width: auto !important;
        height: auto !important;
        font-size: 13px !important;
        line-height: 18px !important;
        display: inline-block !important;
      }

      /* Submit-button visual states are now governed by the data
         attribute gates at the top of this stylesheet
         (data-gp-button-ok / data-gp-balance-block / data-gp-recipient
         -block). The earlier "always solid green" override has been
         removed: it created the half-second green-flash users reported
         on form mount (button briefly lit before our gates engaged).
         The bundle's own `disabled:opacity-50` Tailwind class
         provides the dim look until the form is submittable; the gate
         attributes hard-lock pointer-events while validation is
         pending. */

      /* Купить звёзды form preset buttons (100/500/1000/2000): bundle ships
         them as small white pills (`bg-white text-[#2D2D32] h-8.5 w-20
         text-xs`) — visually unrelated to the dark chunky pills the deposit
         Stars topup uses for its 50/300/750/1500 presets. User wants both
         forms to read as one design system, so we re-skin the buy-stars
         pills to match deposit's `bg-secondary py-2 px-3 rounded-full
         font-bold text-sm` styling (dark fill, white text, content-sized).
         The orange star icon (inline SVG with fill=#F1AA05) stays — that
         was the perfect part per user.

         Selector update: the user reported the "100" chip rendering as
         a bare white pill without the star while the other three were
         dark with stars. Root cause: the previous selector required
         `button.bg-white.rounded-full` AND `h-8.5 w-20` class tokens —
         but the bundle re-skins the FIRST chip when it's the
         pre-selected preset (drops some classes). We now match by
         the chip's role inside the preset row (parent `.flex.w-max`
         + sibling count) so every preset gets the same treatment
         regardless of which one is selected. */
      body[data-gp-route="stars"] form .flex.w-max.items-center.gap-2.px-1 > button,
      body[data-gp-prev-route="stars"] form .flex.w-max.items-center.gap-2.px-1 > button,
      body[data-gp-route="premium"] form .flex.w-max.items-center.gap-2.px-1 > button,
      body[data-gp-prev-route="premium"] form .flex.w-max.items-center.gap-2.px-1 > button {
        background-color: rgb(40, 39, 39) !important;
        color: #ffffff !important;
        width: auto !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        gap: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
      }
      /* Inline SVG star inside those buttons — bundle pins it at h-3.5 w-3.5
         (14px). Match deposit's 16px (size-4) so the icon line-height feels
         the same in both forms. */
      body[data-gp-route="stars"] form .flex.w-max.items-center.gap-2.px-1 > button > svg,
      body[data-gp-prev-route="stars"] form .flex.w-max.items-center.gap-2.px-1 > button > svg,
      body[data-gp-route="premium"] form .flex.w-max.items-center.gap-2.px-1 > button > svg,
      body[data-gp-prev-route="premium"] form .flex.w-max.items-center.gap-2.px-1 > button > svg {
        width: 16px !important;
        height: 16px !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
      }

      /* Stars-buy preset chips ("100 / 500 / 1 000 / 2 000"): bundle's
         scroll row is 319px but content sums to ~359px, so the 4th chip
         is clipped on the right. Tightening gap (8 → 4) and chip side
         padding (12 → 8) shaves ~44px and lets all four sit visible on
         the default 375px viewport without changing the chip's font,
         icon size, or rounded shape. */
      body[data-gp-route="stars"] form .flex.w-max.items-center.gap-2.px-1,
      body[data-gp-prev-route="stars"] form .flex.w-max.items-center.gap-2.px-1 {
        gap: 4px !important;
      }
      body[data-gp-route="stars"] form .flex.w-max.items-center.gap-2.px-1 > button,
      body[data-gp-prev-route="stars"] form .flex.w-max.items-center.gap-2.px-1 > button {
        padding-left: 8px !important;
        padding-right: 8px !important;
      }

      /* Deposit (balance topup) Stars tab + STARS_TOPUP history rows:
         replace the bundle's yellow star (/assets/star.svg with hardcoded
         fill=#FFD54A) with the orange star variant the buy-stars form uses
         (#F1AA05). User said the orange tone in /stars looks "идеальные"
         so we propagate it to the deposit form and to the STARS_TOPUP
         rows in /top-up history for consistency.
         The `content: url()` trick on a replaced <img> swaps the rendered
         image without touching the underlying src — original star.svg
         keeps working as a fallback for any other place the bundle uses
         it (e.g. missing-icon fallback at index-p7V068-5.js:125685, the
         bottom-nav Звёзды tab swap at index-p7V068-24.js:11287).

         History rows are tagged by giftpay-overlay's tagStarsGiftRows()
         with data-gp-stars-gift-row="1" on the row wrapper. Targeting
         the row attribute (not `data-gp-prev-route`) makes the swap
         independent of route navigation timing — the prior version's
         `data-gp-prev-route="deposit"` selector flickered to yellow
         500ms after navigating /deposit → /top-up because the prev-route
         attribute was cleared on a timer. */
      body[data-gp-route="deposit"] img[src="/assets/star.svg"],
      [data-gp-stars-gift-row="1"] img[src="/assets/star.svg"] {
        content: url("/assets/star-orange.svg") !important;
      }

      /* Deposit Stars/RUB topup input: bundle renders the row as
         `[input + unit-icon + ✕ clear-button]` flex siblings inside a
         `flex items-center justify-center` row, so by default they
         center as one group and the ✕ sits adjacent to the number.
         An older override here forced the row to width:100% and
         absolute-positioned the ✕ at the form card's right edge,
         which made the ✕ float visually disconnected from the
         number on wide viewports. Override removed — let the
         bundle's natural inline flex centering keep the ✕ adjacent
         to the digit at every width. */

      /* Marketplace filter chip row (Коллекция / Модель / Фон): the chips
         sit inside an Embla carousel whose viewport has `overflow: hidden`
         clipping anything that extends past the row's box. After scrolling
         and returning to the top, layout settles such that the chip's
         outer pixels (rounded-full bottom edge + glass shadow inset
         bleeding into AA) get trimmed by exactly the viewport edge.
         Adding 2-3px of bottom padding to the row's flex container gives
         the chips room to render their full pill shape without bleeding
         into the carousel's clip rectangle. The marketplace filter row is
         identifiable by being the only flex row directly inside a
         `.flex-1.min-w-0.relative.flex.items-center` viewport wrapper
         that hosts the embla `_carousel-content_` slot containing chip
         buttons. */
      div.flex-1.min-w-0.relative.flex.items-center > [data-slot="carousel"] {
        padding-bottom: 4px;
      }
      div.flex-1.min-w-0.relative.flex.items-center > [data-slot="carousel"] [data-slot="carousel-content"] {
        padding-bottom: 4px;
        padding-top: 2px;
      }

      /* Tighten the gap between the Collection/Model/Backdrop chip row
         and the gift-card grid. Bundle's natural mb-3 + sticky-wrapper
         pb-2 produces ~20px which the user calls out as visually too
         loose — they want it as compact as the banner → quick-search
         transition reads to them, not as wide as the literal pixel
         match. Drop the strip's bottom margin and let the sticky
         wrapper's own pb-2 provide the entire breathing room (~8-10px).
         Scoped via :has() so we only catch the chip-row wrapper, not
         other `py-2 mb-3` containers in the layout. */
      div.py-2.mb-3:has(> div.flex.items-center.gap-1 > div.flex-1.min-w-0.relative.flex.items-center > [data-slot="carousel"]) {
        margin-bottom: 0 !important;
      }

      /* Top promo banner carousel: on wide viewports cap the banner
         image at its mobile-rendered width (688px) and tile a green
         starfield continuation pattern across the rest of the slide.
         The tile asset is composed mirror|original (2058x261 source)
         so a single repeat-x produces the alternating mirror→original
         →mirror→original sequence the user spec'd, with seamless
         pixel-matched joins. The fallback `--gp-banner-bg` colour
         (computed by the JS sampler) survives as the underlay so a
         tile-asset 404 / CORS-tainted decode still degrades to a
         flat banner-edge colour rather than a hard transparent gap.
         Mobile (≤ 700px) keeps the bundle's original behaviour: image
         fills the slot at natural ratio (matched by the slot
         aspect-ratio rule below) — no tile is needed because there's
         no gap to fill. */
      @media (min-width: 701px) {
        /* Selector mirrors the squircle-class chain used by the
           below skeleton rule (specificity 0,7,3) so the tile fill
           wins the cascade. Without these extra classes the bundle's
           `bg-secondary/40` shimmer fallback would override
           background-color/image and the right-of-image gap rendered
           as a faint-white block on dark theme instead of the green
           banner-bg + repeating tile continuation. */
        [data-slot="carousel"].relative.px-4.mb-3.z-11
          [data-slot="carousel-item"]
          > div.cursor-pointer.rounded-xl.w-full.overflow-hidden.squircle-2xl {
          /* Owner ask 2026-05-22 round 9: the fallback was `transparent`,
             so when the JS edge-sampler had not yet computed the per-
             banner colour (first ~300 ms on cold cache while
             giftpay-banner.webp decodes) the area to the right of the
             capped image showed the body's #141414 through — exactly
             the «прижатый к краю чёрный кусок» the buyer screenshotted.
             Hard-coding the GiftPay banner's right-edge colour
             (sampled from the actual asset) means the bg paints green
             from the very first frame, BEFORE the tile.webp arrives,
             BEFORE the JS sampler fires. The JS sampler still runs and
             over-writes this default per-route (so FunPay / Playerok
             variants pick up their own edge colour), but the no-JS
             baseline is finally correct. */
          background-color: var(--gp-banner-bg, rgb(14, 64, 38));
          background-image: url("/assets/gp-banner-tile.webp");
          background-repeat: repeat-x;
          /* Anchor the first tile to the right edge of the capped
             image (688px wide). The 2058x261 source contains
             mirror|original halves, so the first slice the buyer sees
             past the main banner is the mirrored half — matches the
             "сначала отзеркалённый, потом нормальный" sequence. */
          background-position: 688px center;
          /* Scale the tile to the slide's vertical extent so its
             star/glow elements align pixel-for-pixel with the main
             banner's bottom edge regardless of viewport DPR or zoom. */
          background-size: auto 100%;
          /* Pin slide height to the capped image's intrinsic height
             (688 × 261/1029 ≈ 174.5 px). The skeleton rule below
             sets aspect-ratio: 1029/261 unconditionally, which on a
             1920px viewport yields a 479px tall slide while the
             image is only 174px tall — leaving a huge L-shaped gap
             that read as the "white block" complaint. Forcing the
             slide to the image's height keeps the tile flush with
             the banner's bottom edge at every viewport ≥ 701px. */
          aspect-ratio: auto !important;
          height: calc(688px * 261 / 1029);
        }
        [data-slot="carousel"].relative.px-4.mb-3.z-11
          [data-slot="carousel-item"]
          > div.cursor-pointer.rounded-xl.w-full.overflow-hidden.squircle-2xl > img {
          width: auto !important;
          max-width: 688px;
          height: auto !important;
          max-height: none;
          display: block;
          margin-left: 0;
          margin-right: auto;
        }
      }

/* === extracted from index.html line 3288 === */
      /* Fallback avatar. The bundle now points at /logo.png directly, so no
         late CSS `content:url()` or MutationObserver source swap is needed.
         Keep only sizing/shape rules for the real image element. */
      [class*="_profileIcon_"]:empty,
      [class*="_profileIcon_"]:has(> img[src="/logo.png"]) {
        width: 42px !important;
        height: 42px !important;
        border-radius: 99em !important;
        overflow: hidden !important;
        transform: translateZ(0);
      }
      [class*="_profileIcon_"]:empty {
        background: #1c1c1c url("/logo.png") center / cover no-repeat !important;
      }
      [class*="_profileIcon_"]:has(> img[src="/logo.png"]) {
        background: #1c1c1c !important;
      }
      [class*="_profileIcon_"] > img[src="/logo.png"] {
        border-radius: 99em !important;
        clip-path: circle(50%);
        display: block !important;
        height: 100% !important;
        image-rendering: auto !important;
        object-fit: cover !important;
        opacity: 1 !important;
        transform: translateZ(0);
        width: 100% !important;
      }
      /* Bottom/profile nav avatar parity: keep the avatar round, matching
         the Predict build and Telegram's native profile affordance. */
      [class*="_profile_khmv6_"] {
        border-radius: 99em !important;
      }
      [class*="_profileIcon_"] {
        border-radius: 99em !important;
        overflow: hidden !important;
      }
      [class*="_profileIcon_"] > img {
        border-radius: inherit !important;
        clip-path: circle(50%) !important;
      }

      /* Profile page big avatar fallback: keep the parent background as a
         no-flash fallback during route exit. */
      /* Match data-gp-prev-route too so the substitution stays through
         the page exit transition. */
      body[data-gp-route="profile"] div.relative.overflow-hidden.squircle-2xl > img[src="/logo.png"],
      body[data-gp-prev-route="profile"] div.relative.overflow-hidden.squircle-2xl > img[src="/logo.png"] {
        opacity: 1 !important;
      }
      body[data-gp-route="profile"] div.relative.overflow-hidden.squircle-2xl:has(> img[src="/logo.png"]),
      body[data-gp-prev-route="profile"] div.relative.overflow-hidden.squircle-2xl:has(> img[src="/logo.png"]) {
        background: url("/logo.png") center / cover no-repeat !important;
      }

      /* GiftPay profile cleanup. The previous version hid the bundle's
         native gold cashback pill on every /profile visit and replaced
         it from a separate timer-driven layer. That replacement is gone,
         so the bundle's native pill must stay visible for real Telegram
         users. The public-view
         hide for the gold-level badge is kept further below. */

      /* Keep the profile stat row visible in the Telegram WebApp while
         removing the dead inventory-cost cell and marketplace chevron. */
      body[data-gp-route="profile"] button.flex.justify-between.items-center.w-full.px-4.py-2.cursor-pointer > div.flex.flex-col.items-start:first-child,
      body[data-gp-prev-route="profile"] button.flex.justify-between.items-center.w-full.px-4.py-2.cursor-pointer > div.flex.flex-col.items-start:first-child {
        display: none !important;
      }
      body[data-gp-route="profile"] .flex.justify-between.items-center.w-full.px-4.py-2.cursor-pointer,
      body[data-gp-prev-route="profile"] .flex.justify-between.items-center.w-full.px-4.py-2.cursor-pointer {
        pointer-events: none !important;
        cursor: default !important;
        justify-content: flex-start !important;
        gap: 0 !important;
      }
      body[data-gp-route="profile"] .flex.justify-between.items-center.w-full.px-4.py-2.cursor-pointer > div.flex.flex-col.items-start,
      body[data-gp-prev-route="profile"] .flex.justify-between.items-center.w-full.px-4.py-2.cursor-pointer > div.flex.flex-col.items-start {
        flex: 1 1 0 !important;
      }
      body[data-gp-route="profile"] .flex.justify-between.items-center.w-full.px-4.py-2.cursor-pointer > svg,
      body[data-gp-prev-route="profile"] .flex.justify-between.items-center.w-full.px-4.py-2.cursor-pointer > svg {
        display: none !important;
      }

      /* Profile page cleanup — LANDING/PUBLIC-VIEW ONLY. The buyer asked
         for these on the public-web variant (anonymous visitor with the
         synthetic 777001 envelope OR ?gp_dev=0 bot-landing) where the
         profile renders all-zero stats and a marketplace nav-chevron
         that goes nowhere useful. For a real Telegram WebApp user the
         bundle's natural profile (balance pill, cashback level row,
         inventory cost, "Куплено" stats) MUST stay visible —
         the buyer flagged the previous unconditional gating as
         "ведёт себя как лендинг внутри бота: ни баланса, ни покупок,
         ни кэшбека". Every rule below now requires `data-gp-public-view`
         so real Telegram users keep the bundle's profile intact.
         Each rule pairs data-gp-route + data-gp-prev-route so the hide
         survives the exit transition — without it, the user sees these
         elements flash back when navigating away from /profile. */
      body[data-gp-public-view="1"][data-gp-route="profile"] div.flex.flex-col.items-start:has(> span.max-w-30:nth-child(2)) {
        /* placeholder — actual hide done via attribute set by the runtime
           patch since :has() with text-content match is impossible in CSS.
           See gp-hide-stat below. */
      }
      body[data-gp-public-view="1"][data-gp-route="profile"] [data-gp-hide-stat="cost"],
      body[data-gp-public-view="1"][data-gp-prev-route="profile"] [data-gp-hide-stat="cost"] {
        display: none !important;
      }
      /* Pure-CSS fallback for the cost-inventory stat. The data-gp-hide-stat
         marker above is set by JS after a MutationObserver finds the cell
         by text content — that introduces a 30-50 ms race where the cell
         flashes through before the marker lands. Hide structurally too:
         the stat-row is a 3-cell + chevron <button>, and "Стоимость
         инвентаря" is always the first cell, so :first-child is safe and
         applies on the very first paint. */
      body[data-gp-public-view="1"][data-gp-route="profile"] button.flex.justify-between.items-center.w-full.px-4.py-2.cursor-pointer > div.flex.flex-col.items-start:first-child,
      body[data-gp-public-view="1"][data-gp-prev-route="profile"] button.flex.justify-between.items-center.w-full.px-4.py-2.cursor-pointer > div.flex.flex-col.items-start:first-child {
        display: none !important;
      }
      body[data-gp-public-view="1"][data-gp-route="profile"] button.bg-\[\#1C1C1C\]\/60.squircle-sm,
      body[data-gp-public-view="1"][data-gp-prev-route="profile"] button.bg-\[\#1C1C1C\]\/60.squircle-sm {
        display: none !important;
      }
      body[data-gp-public-view="1"][data-gp-route="profile"] span[class*="bg-gold/20"][class*="text-gold"],
      body[data-gp-public-view="1"][data-gp-prev-route="profile"] span[class*="bg-gold/20"][class*="text-gold"] {
        display: none !important;
      }
      /* Profile main row "Куплено / Общий объём" with chevron used to navigate
         to the NFT marketplace ("/"). User wants this row to display stats
         only, not act as a clickable link. The bundle renders it as a
         <button> (not <div>); we match both for safety across builds.
         Disable pointer events + hide the trailing chevron SVG (the only
         direct svg child). Public-web only — real Telegram users get the
         native marketplace navigation. */
      body[data-gp-public-view="1"][data-gp-route="profile"] .flex.justify-between.items-center.w-full.px-4.py-2.cursor-pointer,
      body[data-gp-public-view="1"][data-gp-prev-route="profile"] .flex.justify-between.items-center.w-full.px-4.py-2.cursor-pointer {
        pointer-events: none !important;
        cursor: default !important;
        /* The first cell ("Стоимость инвентаря") is hidden, leaving the two
           visible stats. Make each visible stat take an equal slice of the
           row so they read as a balanced two-column block instead of two
           pills jammed against the left edge. */
        justify-content: flex-start !important;
        gap: 0 !important;
      }
      body[data-gp-public-view="1"][data-gp-route="profile"] .flex.justify-between.items-center.w-full.px-4.py-2.cursor-pointer > div.flex.flex-col.items-start,
      body[data-gp-public-view="1"][data-gp-prev-route="profile"] .flex.justify-between.items-center.w-full.px-4.py-2.cursor-pointer > div.flex.flex-col.items-start {
        flex: 1 1 0 !important;
      }
      body[data-gp-public-view="1"][data-gp-route="profile"] .flex.justify-between.items-center.w-full.px-4.py-2.cursor-pointer > svg,
      body[data-gp-public-view="1"][data-gp-prev-route="profile"] .flex.justify-between.items-center.w-full.px-4.py-2.cursor-pointer > svg {
        display: none !important;
      }
      /* "Пригласить друзей" heading on /profile is rendered by Gft as
         `<p>{title} <span class="inline">₽</span></p>` — the bundle
         hardcodes a trailing rouble symbol that, paired with our
         currency-normalisation runtime patch, renders as "₽₽" or "РР"
         to the user. There is no purchase amount to label here, so the
         lone ₽ is meaningless. Hide it. Public-web only. */
      body[data-gp-public-view="1"][data-gp-route="profile"] div.flex.flex-col.p-3 > p.text-muted-foreground.font-semibold.mb-3 > span.inline,
      body[data-gp-public-view="1"][data-gp-prev-route="profile"] div.flex.flex-col.p-3 > p.text-muted-foreground.font-semibold.mb-3 > span.inline {
        display: none !important;
      }
      /* alt="seasons-preview" is unique to the Season widget card; match it
         globally and at any nesting depth so the hide also applies when the
         backend is unreachable and data-gp-route hasn't been set yet (or the
         Lt component re-wraps the img differently across builds). */
      div[class*="cursor-pointer"]:has(img[alt="seasons-preview"]) {
        display: none !important;
      }
      /* Carousel scroll-arrow indicators (the `>` / `<` chevrons that the
         bundle overlays on data-slot="carousel" rows). The bundle's logic
         starts at opacity-100 while loading state is true (`!i || t`) and
         only after embla computes overflow does it flip to opacity-0 if
         not needed — that's the "flash" the user sees on initial mount
         when chips fit but the chevron briefly appears anyway. We mute
         the arrows during a startup window (~400ms after load) so embla
         has time to settle before the bundle's own opacity class becomes
         visible. After the startup window ends the bundle's logic
         controls visibility natively — chevron correctly appears when
         content actually overflows. */
      html.gp-carousel-startup [data-slot="carousel"] button[aria-label="Scroll right"],
      html.gp-carousel-startup [data-slot="carousel"] button[aria-label="Scroll left"] {
        opacity: 0 !important;
        pointer-events: none !important;
      }
      /* Filter-chip row: chips are 34 px tall but the carousel container
         stretches to ~44 px because the green clear-filter button on the
         left is taller. The bundle anchors the scroll arrows top:0 /
         bottom:0 so they fill the carousel height — their centre lands
         3 px below the chip centre and reads as "сидит криво ниже чипов".
         Pin the arrow to the chip top (2 px below the carousel top, the
         vertical offset created by the taller clear-filter button) and
         force its height to the chip height so its centre coincides
         with the chips it controls. */
      [data-slot="carousel"] button[aria-label="Scroll right"],
      [data-slot="carousel"] button[aria-label="Scroll left"] {
        top: 2px !important;
        bottom: auto !important;
        height: 34px !important;
      }
      /* Cart-page close X button: leave the bundle's native
         `position:absolute` placement alone. The user explicitly wants
         the X to scroll OFF the top of the viewport when scrolling
         down (natural document-flow behaviour) rather than ride along
         pinned to the top — earlier rules had pinned it via
         `position:fixed`, which contradicted the requested behaviour
         and produced a "weird floating ✕" visual in the cart. The
         hide-when-modal-open rule that paired with the pin is also
         dropped: with the X scrolling out of the page like everything
         else, it can't hover above an overlaid drawer in the first
         place. The matching JS override in giftpay-route-fixes.js was
         removed for the same reason. */

      /* Vaul drawer close lag: when a sheet starts closing, vaul keeps
         the full-viewport `[data-vaul-overlay]` mounted with
         `pointer-events: auto` for the entire 500 ms fade-out animation.
         During that window, every tap on the page (gift cards, scroll
         drag, tab bar) lands on the still-rendered overlay and is
         absorbed instead of reaching the underlying content — the user
         experiences it as a half-second freeze right after closing the
         modal. Forcing `pointer-events: none` the moment vaul flips the
         overlay to `data-state="closed"` releases interactions
         immediately while the visual fade-out continues to play.
         Same treatment for shadcn dialogs that share the same fade
         primitive. */
      [data-vaul-overlay][data-state="closed"],
      [data-radix-dialog-overlay][data-state="closed"],
      [role="dialog"][data-state="closed"] {
        pointer-events: none !important;
      }

      /* Vaul close-jerk fix: NFT detail drawer (and any other Vaul
         drawer) used to "jerk UP a few pixels, then slide DOWN" when
         closing. Cause: the bundle defines

           [data-vaul-drawer] {
             transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
             ...
           }
           [data-vaul-drawer][...][data-state="closed"] {
             animation-name: slideToBottom;
           }

         and `slideToBottom` only specifies a 100% keyframe — its
         implicit 0% is the element's underlying (un-animated)
         transform. When state flips to "closed", two things race:

           1) The keyframe animation `slideToBottom` starts: paints
              from current → translate3d(0, 100%, 0) (off-screen).
           2) The same instant, any inline `transform` Vaul put on the
              drawer during a drag (e.g. translateY(40px) from a
              partial pull-down) is cleared. Because the
              `transition: transform 0.5s` rule is still active, that
              clear is interpolated by the transition: drawer slides
              UP from translateY(40px) toward translateY(0) — visible
              as a brief upward jerk — before slideToBottom takes
              over and pulls it back down.

         Killing the transition once `[data-state="closed"]` lands
         leaves the keyframe animation as the sole driver of the
         transform during the close, eliminating the upward jerk.
         OPEN side has the SAME race: when the bundle flips
         `data-state` from "closed" to "open", the drawer carries
         the inline `transform: translate3d(0, 100%, 0)` Vaul puts
         on it just before mount. The `transition: transform 0.5s`
         rule then interpolates that 100% → 0 in parallel with the
         `slideFromBottom` keyframe — for ~1 frame the browser
         renders the transition's intermediate value (somewhere
         above the final spot) before the keyframe overrides it.
         The user perceives that as the drawer "jerking up and
         back" the moment they tap any profile-page menu. Killing
         the transition on the open state too leaves the keyframe
         as the sole transform driver during the open, mirroring
         the close fix above. */
      [data-vaul-drawer][data-state="closed"] {
        transition: none !important;
      }

      /* Empty-history placeholder image (the treasure chest shown
         on /top-up when there are no transactions yet). The bundle
         hardcodes `w-[100px] h-[100px]` on the <img>; user found
         100 px too small AND found the previous 160×160 override
         "leaning / looking crooked" — that perception came from the
         square box crushing the source 1536×1024 (3:2) into a square
         and squishing the isometric perspective. Bump the box and
         use object-fit:contain so the natural aspect is preserved
         and the chest sits straight. */
      img[src*="makeFirstPlaceholder"] {
        width: 220px !important;
        height: 160px !important;
        object-fit: contain !important;
      }

      /* Cart page ✕ close button: pull it up so it sits on the same
         row as the global balance pills ("⭐ 0" / "+ 0 ₽") instead of
         landing inside the cart's content gutter.
         DOM layout (bundle):
            <wrapper pt-[safe-area+30px]>      <!-- viewport top -->
              <nav class="flex justify-between items-center mb-3 px-4 pt-4">
                <BalancePills />               <!-- y ≈ 16-50 -->
              </nav>
              <main class="flex flex-col min-h-screen relative">
                <button absolute right-4 top-4>×</button>   <!-- y = 62+16 = 78 -->
                <content class="px-4 pt-14">…</content>
              </main>
            </wrapper>
         The bundle's ✕ has `top-4` (16 px) measured from the cart
         `<main>`, which itself starts ~62 px below the viewport top
         because the navbar has already consumed that space. Result:
         the ✕ ends up below the balance pills, looking misplaced.
         A negative `top` of -46 px (-(62 - 16)) puts the ✕ exactly on
         the balance row's Y. Because we're still using
         `position: absolute` against the cart `<main>` parent, the ✕
         scrolls together with it on long carts (and goes off-screen
         naturally) — matching the user's "no fixed pin, no clone"
         requirement.
         The earlier `pt-14` fix is dropped: with the ✕ now sitting
         ABOVE the cart `<main>`, the gutter the bundle reserved for
         it is no longer necessary; tree-shaken `.pt-14` resolving to
         0 leaves the cart content flush with the navbar's bottom,
         which is the correct position. */
      body[data-gp-route="cart"] button[class*="absolute"][class*="right-4"][class*="top-4"],
      body[data-gp-prev-route="cart"] button[class*="absolute"][class*="right-4"][class*="top-4"] {
        top: -46px !important;
      }
      /* While the cart is fading out (the 500 ms `data-gp-prev-route`
         hold maintained by the route IIFE), fade the close ✕ together
         with the rest of the cart instead of clipping it instantly.
         Previously we used `visibility: hidden` to hide the ✕ as soon
         as the user tapped it — the user reported it as "the X
         disappears faster than everything else, not coordinated with
         the menu". Pinning `top: -46px` on the prev-route too keeps
         the ✕ in place while it opacity-fades, so it leaves the
         viewport in lockstep with the cart content. The 0.4s timing
         lines up with the bundle's typical exit-fade duration; the
         500 ms data-gp-prev-route window then clears the rule. */
      body[data-gp-prev-route="cart"] button[class*="absolute"][class*="right-4"][class*="top-4"] {
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.4s ease-out !important;
      }
      /* Global jerk-protection for every absolutely-positioned ✕ close
         button in the app (cart, /stars buy-flow, /top-up, drawer
         dialogs, …). The bundle puts `transition-all 0.15s` on each
         `ke` button, which means ANY transitionable property change
         smoothly animates over 150 ms — including `top` and
         `transform`. When the user taps a ✕ the click triggers a
         route change or modal close; if any of our scoped CSS rules
         (`body[data-gp-route=...]` etc.) detach for a frame, top can
         jump from a custom value back to the Tailwind default and
         the ✕ visibly slides several dozen pixels down before the
         page leaves the screen. Restrict the transition property
         list to colour/opacity transitions only so vertical/position
         changes always snap instantly. */
      button[class*="absolute"][class*="right-4"][class*="top-4"][class*="rounded-full"] {
        transition-property: background-color, box-shadow, opacity, color, border-color !important;
      }

      /* NFT detail modal: photo squircle should look clickable on
         desktop. The bundle's lottie wrapper has an onClick handler
         that re-triggers playback, but the host <div> inherits the
         default cursor — so users on a real cursor (not just touch)
         get no affordance that the photo is interactive. The
         JS-injected mask in giftpay-route-fixes.js already has
         `cursor: pointer`, but once the user dismisses it the bundle's
         own lottie wrapper takes over for replay clicks. Apply the
         pointer cursor to the squircle visual area so both states
         feel clickable. */
      [data-vaul-drawer] .bg-input\/60.squircle-\[44px\].overflow-hidden,
      [data-vaul-drawer] .bg-input\/60.squircle-\[44px\].overflow-hidden .relative,
      [role="dialog"][data-state="open"] .bg-input\/60.squircle-\[44px\].overflow-hidden,
      [role="dialog"][data-state="open"] .bg-input\/60.squircle-\[44px\].overflow-hidden .relative {
        cursor: pointer;
      }

      /* Disable native drag for every <img> in the app. The user can
         long-press / right-click images (treasure-chest empty-state
         art, gift cards, etc.) and the browser shows the context
         menu / drag ghost — those gestures don't belong in a Telegram
         Mini App and feel like a leak from regular desktop browsers. */
      img {
        -webkit-user-drag: none !important;
        -webkit-touch-callout: none !important;
        user-select: none !important;
      }
      /* Home-page banner slot pre-reserves vertical space so the search
         input + filter chips + grid don't jerk down when the banner image
         finishes loading. The promo banner image (`three_collections_0.webp`
         and friends) ships with intrinsic 1029x261, i.e. ~3.94:1.
         The shift used to be ~137 px (banner height + mb-3 margin),
         producing CLS 0.146 — well above the 0.1 "needs improvement"
         threshold. We layer three rules so the gap is reserved at every
         possible mount stage:
           1. The main content sibling carries a margin-top equal to the
              banner block (banner height + mb-3 = aspect + 12px). When
              the carousel hasn't mounted yet — the empty React shell
              between paint-1 and paint-2 — this margin holds the space.
           2. As soon as the carousel wrapper is present in the DOM, the
              `+` adjacent-sibling selector zeroes the margin so we don't
              double-count.
           3. The carousel itself gets a min-height matching the same
              aspect, so even a still-empty carousel (no items rendered
              before the /api/market/banners response arrives) holds the
              space.
           4. Once items render, aspect-ratio on the per-slide wrapper
              keeps the size exact regardless of viewport width.
         All four rules use the same calc — `(100vw - 32px) * 261 / 1029`
         — so the reservation matches the eventual rendered size to the
         pixel. The `100vw` reflects the bundle's full-bleed banner; the
         32px subtracts the `px-4` left+right padding on the carousel
         item wrapper. Scoped to the banner carousel only
         (`.px-4.mb-3.z-11`) so filter chips and other carousels are
         untouched. */
      /* Banner space reservation: ONLY the carousel itself takes
         layout space. Earlier we tried propagating a `padding-top` /
         `margin-top` reservation to the main page container so the
         layout wouldn't jerk when banner data resolved late, but
         since React reuses the same `div.relative.flex.flex-col.flex-1`
         DOM node across routes, every flavour of that approach
         caused content to slide on route transitions (profile→home
         and back) — which the user reports as "everything jerks
         when I go to NFT".
         The pragmatic fix: keep a `min-height` + `aspect-ratio`
         reservation ONLY on the carousel element itself. While the
         bundle's banner-data API call is in flight, the carousel
         either doesn't render at all (clean state, no fake gutter)
         or renders empty with the reserved size. Once banner data
         lands the carousel is already at its final size and image
         decode causes no further shift. The rare cold-cache initial
         page load may still produce a single small shift when the
         carousel first appears — that's a one-time event the user
         can live with, vs. a visible jerk on EVERY route transition.
         Caching of banner data is handled by the bundle's
         react-query store, so SPA navs after the first load fire
         the carousel synchronously from cache. */
      @media (max-width: 700px) {
        [data-slot="carousel"].relative.px-4.mb-3.z-11 {
          min-height: calc((100vw - 32px) * 261 / 1029);
        }
        [data-slot="carousel"].relative.px-4.mb-3.z-11 [data-slot="carousel-item"] > div {
          aspect-ratio: 1029 / 261;
        }
      }
      @media (min-width: 701px) {
        [data-slot="carousel"].relative.px-4.mb-3.z-11 {
          min-height: calc(688px * 261 / 1029);
        }
        [data-slot="carousel"].relative.px-4.mb-3.z-11 [data-slot="carousel-item"] > div {
          min-height: calc(688px * 261 / 1029);
        }
      }


      /* Cashback info drawer (Hde at index-p7V068-5.js:124158) cleanup.
         Hide the "Buy gift / Earn Cashback" timeline banner block — the
         user does not want it. Match the wrapper by its inner structure
         (a Lt squircle + an absolute bottom-positioned text-white/30
         "Кэшбэк" label, see index-p7V068-5.js:124168-124181) instead of
         by `:has(img[src$="modal-info-banner-..."])`. The previous img-
         based rule had a race: when the bundle's Lt fallback path runs
         (image src 404 / blocked / slow), the <img> element is removed
         and replaced with `<div class="bg-muted">` + the absolute text
         overlay — so :has() stopped matching, the wrapper became
         display:block, and ~28-44 px of phantom space appeared above
         the row list 1-2 sec after the drawer opened. Targeting the
         text-semi2xl/text-white/30 overlay class combo keeps the rule
         aligned with the drawer regardless of image load state. */
      #modal-scrollable div.relative.mb-4:has(> div.absolute.text-white\/30.text-semi2xl) {
        display: none !important;
      }
      /* Banner aspect-ratio reservation on the home page.
         The bundle's market-banner carousel mounts an empty
         `<div class="cursor-pointer rounded-xl ... squircle-2xl">`
         and only learns the banner image's intrinsic dimensions
         once the <img> has decoded. The user complained that when
         the banner finishes loading the rest of the page "дергается
         вниз" — that's CLS (cumulative layout shift) caused by
         the wrapper having zero height before the image lands.

         Pinning aspect-ratio on the wrapper keeps a placeholder
         box of the correct shape from the very first paint, so
         everything below stays put. The 1029×261 (≈3.94:1) ratio
         comes from the actual bundled `three_collections_0.webp`
         banner; we also paint a faint `bg-secondary/40` so the
         empty slot reads as a skeleton instead of a black hole
         while the image streams in. */
      div[data-slot="carousel-content"] div[class*="basis-full"]
        > div.cursor-pointer.rounded-xl.w-full.overflow-hidden.squircle-2xl,
      div.embla__viewport div.cursor-pointer.rounded-xl.w-full.overflow-hidden.squircle-2xl {
        aspect-ratio: 1029 / 261;
        background-color: rgba(255, 255, 255, 0.04);
        background-image: linear-gradient(
          110deg,
          rgba(255, 255, 255, 0.02) 0%,
          rgba(255, 255, 255, 0.06) 40%,
          rgba(255, 255, 255, 0.02) 80%
        );
      }
      div[data-slot="carousel-content"] div[class*="basis-full"]
        > div.cursor-pointer.rounded-xl.w-full.overflow-hidden.squircle-2xl > img,
      div.embla__viewport div.cursor-pointer.rounded-xl.w-full.overflow-hidden.squircle-2xl > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      /* gp-shim: Portals tech-works visual kill removed. Fk component
         now renders null and bounces /technical-works to "/" at the
         source (see index-p7V068-5.js Fk), and the technical-works
         image references are deleted. No CSS hide needed. */

      /* Splash radial glow (bundle's `cpt` SVG): green palette is
         baked into the bundle (#22c55e / #49df64 / #16a34a). The runtime
         fill overrides used to live here but were removed once the
         source SVG shipped green — see index-p7V068-5.js cpt. */

      /* NFT detail drawer Кешбэк row currency icon: bundle ships a
         `<svg>` with the Telegram TON brand mark (blue rounded rect
         #35AFF1 + white V glyph) wrapped in a `text-cyan` <span>.
         User wants the EXACT same orange-gold 4-point star + gold
         text from the top-left "+0" balance badge (bundle's `text-gold`
         class). We:
            • hide the inner TON svg,
            • flip the span colour to text-gold,
            • paint the star via ::after with the same 4-point puffy-star
              SVG path the badge uses (data-URI, same 14x14 viewBox). */
      /* NFT detail drawer: chevron + side prices + "Минимальная Цена".
         The bundle ships a clickable title "Chill Flame ›" — the chevron
         opened the legacy Portals collection page in the cloned market.
         GiftPay has no such page (the X-close was already removed). Hide
         the chevron and re-center the title. Also kill the right-edge
         price column in attribute rows (Модель / Фон / Символ each had a
         redundant collection floor) and the whole "Минимальная Цена"
         row — both are noise that the user explicitly does not want. */
      [data-vaul-drawer] div.text-xl.text-center.line-clamp-2.flex > svg,
      [role="dialog"][data-state="open"] div.text-xl.text-center.line-clamp-2.flex > svg {
        display: none !important;
      }
      [data-vaul-drawer] div.text-xl.text-center.line-clamp-2.flex,
      [role="dialog"][data-state="open"] div.text-xl.text-center.line-clamp-2.flex {
        justify-content: center !important;
      }
      /* Kill the entire price slot in attribute rows — value+rarity stay,
         everything to the right of the rarity badge is gone, including:
           • the bundle's flex-1 spacer that pushed the price right,
           • the resolved-data <span class="gp-currency-marker">…₽</span>,
           • any loading-state placeholder the bundle renders before
             /api/nfts/attribute-floors resolves (skeleton blocks).
         The general-sibling combinator `~` matches every sibling that
         appears after the rarity badge, so React's lazy mounts can't
         leak through. */
      [data-vaul-drawer] table tr td.bg-transparent > div.text-primary.bg-primary\/10 ~ *,
      [role="dialog"][data-state="open"] table tr td.bg-transparent > div.text-primary.bg-primary\/10 ~ * {
        display: none !important;
      }
      [data-vaul-drawer] table tr:last-child,
      [role="dialog"][data-state="open"] table tr:last-child {
        display: none !important;
      }

      /* /top-up "Баланс кошелька" card recolour — restore the
         original blue→green tint of the bundle's portal-frog SVG
         until the user-supplied GiftPay logo is optimised. The
         shipped `giftpay-logo.svg` (and the pre-tinted green copy)
         was an AI-traced graphic with a single 3 658-segment cubic
         bezier path inside one 168 KB file. Using it as a mask OR a
         background-image triggered a multi-second render stall in
         every paint frame on the deposit card — the browser
         compositor cannot keep up with re-rasterising that many
         curves on each scroll/transition. Falling back to the
         bundle's original SVG (which is only a couple of curves +
         circles) keeps the card responsive; replacing the logo can
         be revisited once the source SVG is run through SVGO /
         simplification or exported as a PNG. */
      /* Recolour the Portals-blue glow on the wallet balance card to
         GiftPay green. This now matches GLOBALLY (no route gate) — the
         buyer reported seeing the original blue gradient during slow
         Telegram-WebApp loads, when our `data-gp-route="top-up"`
         attribute hadn't yet been written by the route observer. The
         balance card mounts on /top-up AND lives behind the splash
         while data is fetched, so the rule must apply regardless of
         which route attribute happens to be live. The selector targets
         the same unique class signature the bundle uses for the card
         (squircle-2xl/[40px] + relative + overflow-hidden + bg-secondary),
         so unrelated containers can't accidentally match. */
      div.w-full[class*="squircle-2xl"].relative.overflow-hidden.bg-secondary svg [fill="#1689FF"] {
        fill: var(--primary, #22c55e) !important;
      }
      /* (Removed the outer hue-rotate(95deg) filter — it interacted
         with the fill override above to double-shift the colour back
         toward blue/cyan. The fill swap alone is enough: the inner
         <circle fill="#1689FF"> renders as green via CSS, the outer
         Gaussian blur preserves the green hue across the glow.) */

      /* Share button overlay on the NFT-detail gift image: the bundle
         renders a "Поделиться" / share button in the top-right corner
         above the photo. Earlier this was hidden because the share text
         pointed at a Portals-style "Сделайте офер" copy GiftPay does
         not support; the share-string cleaner in the IIFE above now
         rewrites that text into the GiftPay-native variant ("Сейчас
         на GiftPay" + "Цена: …"), so the button is safe to show. The
         user explicitly wants it back. */

      /* The bundle no longer ships the /top-up funnel button this rule
         was written for — but the same `bg-primary/15` + `w-9.5/h-8.5
         rounded-full` class signature is also used by the home-page
         "clear filters" green-X next to the filter chips, and the
         data-gp-prev-route="top-up" 500ms hold meant the X was hidden
         for half a second every time the buyer opened the deposit
         screen and came back. Rule removed; the funnel hide-out is no
         longer necessary and the home-page X stays put across route
         transitions. The divider/gap rules below are kept since they
         still apply to the named-pill row layout. */
      body[data-gp-route="top-up"] div.flex.items-center.gap-2 > div.h-4.w-px,
      body[data-gp-prev-route="top-up"] div.flex.items-center.gap-2 > div.h-4.w-px {
        display: none !important;
      }
      body[data-gp-route="top-up"] div[class*="sticky"] div.flex.items-center.gap-2,
      body[data-gp-prev-route="top-up"] div[class*="sticky"] div.flex.items-center.gap-2 {
        gap: 8px !important;
        align-items: center !important;
      }
      body[data-gp-route="top-up"] div[class*="sticky"] div.flex.items-center.gap-2 > [class*="w-px"],
      body[data-gp-route="top-up"] div[class*="sticky"] div.flex.items-center.gap-2 > [class*="h-px"],
      body[data-gp-route="top-up"] div[class*="sticky"] div.flex.items-center.gap-2 > [data-orientation="vertical"],
      body[data-gp-route="top-up"] div[class*="sticky"] div.flex.items-center.gap-2 > *[style*="width: 1px"],
      body[data-gp-route="top-up"] div[class*="sticky"] div[class*="data-[orientation=vertical]"][class*="w-0.5"],
      body[data-gp-route="top-up"] div[class*="sticky"] div[class*="w-0.5"][class*="h-5"],
      body[data-gp-prev-route="top-up"] div[class*="sticky"] div.flex.items-center.gap-2 > [class*="w-px"],
      body[data-gp-prev-route="top-up"] div[class*="sticky"] div.flex.items-center.gap-2 > [class*="h-px"],
      body[data-gp-prev-route="top-up"] div[class*="sticky"] div.flex.items-center.gap-2 > [data-orientation="vertical"],
      body[data-gp-prev-route="top-up"] div[class*="sticky"] div.flex.items-center.gap-2 > *[style*="width: 1px"],
      body[data-gp-prev-route="top-up"] div[class*="sticky"] div[class*="data-[orientation=vertical]"][class*="w-0.5"],
      body[data-gp-prev-route="top-up"] div[class*="sticky"] div[class*="w-0.5"][class*="h-5"] {
        display: none !important;
      }
      body[data-gp-route="top-up"] div[class*="sticky"] [data-slot="carousel"],
      body[data-gp-prev-route="top-up"] div[class*="sticky"] [data-slot="carousel"] {
        margin-left: 0 !important;
        padding-left: 0 !important;
      }
      body[data-gp-route="top-up"] div[class*="sticky"] [data-slot="carousel-content"],
      body[data-gp-prev-route="top-up"] div[class*="sticky"] [data-slot="carousel-content"] {
        gap: 8px !important;
      }
      /* Inside the all-filters modal that opens when the user taps
         "Баланс" or "Подарки", the bundle additionally renders an
         expandable section header repeating the same name above the
         options list. The user wants those duplicate headers gone —
         only the actual choices should remain. Hide the expandable
         trigger row (the `Js` component) inside the filter modal so
         the Radix accordion stays open with the items immediately
         visible underneath. The trigger is the only direct flex row
         that has both `flex items-center justify-between gap-3 w-full`
         classes within the modal, with `touch-action: none` set
         inline — AND a Radix `data-state` or `aria-expanded` attribute,
         which is what distinguishes the accordion trigger from any
         other flex row inside the drawer (the Цена section header,
         the "Сбросить" button row, etc.). Without those qualifiers
         this rule used to ALSO hide the price-section header + reset
         button — and the only reason the user could ever see them was
         during the drawer's exit transition, when [data-state="open"]
         briefly flipped to "closed" before unmount and the rule
         released. */
      [data-vaul-drawer][data-state="open"] div[data-state].flex.items-center.justify-between.gap-3.w-full[style*="touch-action"],
      [data-vaul-drawer][data-state="open"] div[aria-expanded].flex.items-center.justify-between.gap-3.w-full[style*="touch-action"],
      [role="dialog"][data-state="open"] div[data-state].flex.items-center.justify-between.gap-3.w-full[style*="touch-action"],
      [role="dialog"][data-state="open"] div[aria-expanded].flex.items-center.justify-between.gap-3.w-full[style*="touch-action"] {
        display: none !important;
      }

      /* Buy-modal price ("Купить подарок") — historical workaround for the
         missing `text-[40px]` Tailwind JIT rule. The bundle now ships an
         inline { fontSize: 40px } style on the price node (i1 component
         in index-p7V068-5.js), so this CSS override is no longer needed
         and was actively shrinking the headline price to 28 px when the
         user wanted the predict-equivalent 40 px. Selector kept (with no
         body) only as a marker; safe to delete in a future cleanup pass. */

      [data-vaul-drawer] span.flex.gap-1.items-center.text-cyan.font-bold > svg {
        display: none !important;
      }
      [data-vaul-drawer] span.flex.gap-1.items-center.text-cyan.font-bold {
        color: var(--gold, #f4b842) !important;
      }
      [data-vaul-drawer] span.flex.gap-1.items-center.text-cyan.font-bold::after {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        background: url("/assets/giftpay-ruble-coin-bigger-bolder.svg") center / contain no-repeat;
      }

      /* Splash screen — keep the bundle's native splash layout (it matches
         predict/Portals: wordmark pinned 100 px below the safe-area top,
         frog centred, progress bar at the bottom). An earlier override
         here bumped the wordmark font to 64 px and pushed it down to
         +200 px, which dropped the GiftPay text on top of the frog and
         the loading spinner. Remove the override; the only rule we
         actually need is keeping the splash non-interactive once the
         bundle has booted. */
      body[data-gp-route] .fixed.inset-0.z-\[9999\].bg-background {
        pointer-events: none !important;
      }

      /* Enforce z-index priority on the splash. Without explicit
         z-index, the bundle stacks elements by DOM order — on
         smaller phones the 700×700 frog container's stacking
         context buried the "GiftPay" wordmark behind it. The user
         flagged this: they want the wordmark visible TOGETHER with
         the frog, with the progress bar always on top.

         Selector matches the splash layer's three children by their
         unique inline-style signatures (the bundle ships them with
         `style="position:absolute;..."` blocks that include either
         the 700px width or the safe-area-inset-bottom anchor).

         Stack:
           - frog container (700×700)         z-index: 1
           - GiftPay wordmark (230×47)        z-index: 2
           - progress bar (bottom anchor)     z-index: 100 (already
                                              set inline by bundle) */
      .fixed.inset-0.z-\[9999\].bg-background div[style*="width: 700"],
      .fixed.inset-0.z-\[9999\].bg-background div[style*="width:700"] {
        z-index: 1 !important;
      }
      .fixed.inset-0.z-\[9999\].bg-background div[style*="font-size: 44"],
      .fixed.inset-0.z-\[9999\].bg-background div[style*="font-size:44"] {
        z-index: 2 !important;
      }
      .fixed.inset-0.z-\[9999\].bg-background div[style*="--tg-viewport-safe-area-inset-bottom"] {
        z-index: 100 !important;
      }
      /* Кешбэк-бонус card on /profile renders a "Доступно 0 ₽" footer
         row under the level progress; the user wants that whole row
         gone for landing/public-view (where the 0 ₽ is misleading).
         Real Telegram users keep the row — they have an actual cashback
         balance to display. */
      body[data-gp-public-view="1"][data-gp-route="profile"] div.px-4.py-1.flex.justify-center.items-center.gap-1,
      body[data-gp-public-view="1"][data-gp-prev-route="profile"] div.px-4.py-1.flex.justify-center.items-center.gap-1 {
        display: none !important;
      }
      /* Tighten the gap between profile sections (cashback row → invite
         friends → ...) since the season widget being hidden left the
         column feeling sparse on public-web. The bundle uses gap-4
         (16px); 8px reads better with the level scale row visually
         closing the cashback card. Landing/public-view only — real
         Telegram users keep the bundle's gap-4 spacing because all the
         hidden sections come back, and 8px would crowd them. */
      body[data-gp-public-view="1"][data-gp-route="profile"] div.flex.flex-col.gap-4.px-4,
      body[data-gp-public-view="1"][data-gp-prev-route="profile"] div.flex.flex-col.gap-4.px-4 {
        gap: 8px !important;
      }
      /* Cashback page jitter fix: when navigating /profile → /cashback,
         the body briefly carries data-gp-prev-route="profile" which
         triggers the gap-8px profile rule above on the cashback wrapper.
         The cashback layout actually wants gap-4 (16px), so the page
         renders at 8px for ~480ms then snaps up by 8px when the
         data-gp-prev-route attr clears.

         Target ONLY the cashback element via the unique pb-[calc(...)+90px)]
         class signature (profile's wrapper has no pb-[calc] suffix). This
         prevents this rule from leaking onto profile's gap-4 element
         during the route transition (which would push profile content
         apart by 8px while leaving and snap it back on return). */
      body[data-gp-route="cashback"] div.flex.flex-col.gap-4.px-4[class*="pb-[calc"] {
        gap: 16px !important;
      }
      body[data-gp-prev-route="cashback"] div.flex.flex-col.gap-4.px-4[class*="pb-[calc"] {
        gap: 16px !important;
      }
      /* Cashback row scale: bundle uses fixed `basis-[54px]` per dot
         which leaves blank space at the right of the card. Make each
         level item grow to fill the row, and stretch the connector
         (w-10, 40px) to consume the freed cell width so the line
         actually reaches the last dot. */
      body[data-gp-route="profile"] div.space-y-2\.5.bg-secondary.rounded-2xl.p-3 [data-slot="carousel-content"],
      body[data-gp-prev-route="profile"] div.space-y-2\.5.bg-secondary.rounded-2xl.p-3 [data-slot="carousel-content"] {
        margin-left: 0 !important;
      }
      body[data-gp-route="profile"] div.space-y-2\.5.bg-secondary.rounded-2xl.p-3 [data-slot="carousel-item"],
      body[data-gp-prev-route="profile"] div.space-y-2\.5.bg-secondary.rounded-2xl.p-3 [data-slot="carousel-item"] {
        flex: 1 1 0 !important;
        max-width: none !important;
        min-width: 0 !important;
        padding-left: 0 !important;
      }
      /* Last cell (35%): no connector follows it, so giving it the same
         flex:1 share as the others leaves a 41px void between the 30%
         connector and the 35% dot. Shrink the last cell to its natural
         content width so cells 0-4 absorb the freed space (their
         connectors stretch to compensate) and the 35% dot/label sit
         flush against the previous connector — no gap. */
      body[data-gp-route="profile"] div.space-y-2\.5.bg-secondary.rounded-2xl.p-3 [data-slot="carousel-item"]:last-child,
      body[data-gp-prev-route="profile"] div.space-y-2\.5.bg-secondary.rounded-2xl.p-3 [data-slot="carousel-item"]:last-child {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        max-width: none !important;
      }
      body[data-gp-route="profile"] div.space-y-2\.5.bg-secondary.rounded-2xl.p-3 [data-slot="carousel-item"]:last-child > .flex.flex-col,
      body[data-gp-prev-route="profile"] div.space-y-2\.5.bg-secondary.rounded-2xl.p-3 [data-slot="carousel-item"]:last-child > .flex.flex-col {
        align-items: center !important;
      }
      body[data-gp-route="profile"] div.space-y-2\.5.bg-secondary.rounded-2xl.p-3 [data-slot="carousel-item"]:last-child .flex.items-center,
      body[data-gp-prev-route="profile"] div.space-y-2\.5.bg-secondary.rounded-2xl.p-3 [data-slot="carousel-item"]:last-child .flex.items-center {
        width: auto !important;
        flex: 0 0 auto !important;
      }
      body[data-gp-route="profile"] div.space-y-2\.5.bg-secondary.rounded-2xl.p-3 [data-slot="carousel-item"] .flex.items-center,
      body[data-gp-prev-route="profile"] div.space-y-2\.5.bg-secondary.rounded-2xl.p-3 [data-slot="carousel-item"] .flex.items-center {
        width: 100%;
      }
      body[data-gp-route="profile"] div.space-y-2\.5.bg-secondary.rounded-2xl.p-3 [data-slot="carousel-item"] .flex.items-center > .w-10,
      body[data-gp-prev-route="profile"] div.space-y-2\.5.bg-secondary.rounded-2xl.p-3 [data-slot="carousel-item"] .flex.items-center > .w-10 {
        flex: 1 1 auto !important;
        width: auto !important;
      }

      /* No max-width on #scroller — user wants the page to fill the
         Telegram window naturally without visible side margins. The
         earlier overlap bug (cashback row collapsing into rows above /
         below) was caused by a separate CSS regression in the
         cashback-row scale rules and is fixed there. */

/* === extracted from index.html line 3983 === */
      /* "Награда" reward row in the gift purchase modal (and any other
         flow that uses the same `cie` component) renders a flex row
         whose right side has the unique class combo
         `text-gold flex items-center gap-1 text-sm font-bold`. Hide
         the whole row — the bundle keeps the cashback row beneath it
         intact. */
      div.flex.justify-between.items-center.w-full:has(> div.text-gold.flex.items-center.gap-1.text-sm.font-bold) {
        display: none !important;
      }

/* === extracted from index.html line 4045 === */
      /* /cashback page chrome trim. The page ships:
           - a ₽/USDT currency toggle above the title (`w-fit mx-auto mt-4`),
         which the user does not want. Hide it (uses display:none rather
         than visibility:hidden — the parent layout collapses cleanly).
         The "Получить" claim column on the right of the "Заработано ₽"
         card stays VISIBLE per the user's later request: they want the
         button shown so the min-threshold hint reads as actionable
         (mirrors the TON portal "Получить (min 1 TON)" pattern). The
         hint text itself is injected at runtime by the
         __gpCashbackMinHint IIFE in giftpay-route-fixes.js. Pair
         data-gp-route + data-gp-prev-route so the rule stays matched
         through the page exit animation. */
      body[data-gp-route="cashback"] div.w-fit.mx-auto.mt-4,
      body[data-gp-prev-route="cashback"] div.w-fit.mx-auto.mt-4 {
        display: none !important;
        pointer-events: none !important;
      }
      body[data-gp-route="cashback"] .scrollable > div.flex.flex-col.gap-4.px-4[class*="pb-[calc"],
      body[data-gp-prev-route="cashback"] .scrollable > div.flex.flex-col.gap-4.px-4[class*="pb-[calc"],
      body[data-gp-route="cashback"] .scrollable > div.h-full > div.flex.flex-col.gap-4.px-4[class*="pb-[calc"],
      body[data-gp-prev-route="cashback"] .scrollable > div.h-full > div.flex.flex-col.gap-4.px-4[class*="pb-[calc"] {
        padding-top: 16px !important;
      }

      /* Stats-tabs (Все / 24ч / 7 дней). Radix Tabs lazy-mounts panels:
         on the very first click on a never-rendered tab the previous
         panel's DOM is destroyed and the new one is built from scratch,
         so the container's height briefly collapses before the new
         content paints. Pin the panel + ancestor min-heights so the
         layout stays fixed; the thumb keeps its native 500 ms slide
         transition (the bundle's cubic-bezier-ish ease-in-out reads as
         the natural Radix indicator animation). */
      body[data-gp-route="cashback"] div:has(> [role="tabpanel"]) {
        min-height: 194px !important;
      }
      body[data-gp-route="cashback"] [role="tabpanel"] {
        min-height: 160px !important;
      }
      /* Smooth out the first-time content swap with a short opacity
         fade so the user never sees the empty 1-frame state between
         "old panel unmounted" and "new panel rendered". Animation runs
         on every tab activation, but it's cheap enough (~140 ms,
         transform-free) and identical between tabs so it reads as
         consistent rather than as a flicker. */
      body[data-gp-route="cashback"] [role="tabpanel"][data-state="active"] {
        animation: gp-tabpanel-fade 140ms ease-out;
      }
      @keyframes gp-tabpanel-fade {
        from { opacity: 0; }
        to { opacity: 1; }
      }

      /* Floating close button on /cashback. Reuses the bundle's existing
         "remove" badge styling shipped at index-p7V068-5.js:130464 —
         `p-1 rounded-full bg-muted border-[1.5px] border-secondary` with
         the bundle's `Rs` X icon (line 105289, the same X used in clear-
         filters / cart-remove / unsubscribe across the app). No invented
         tokens: classes and SVG path are verbatim from the bundle. */
      body[data-gp-route="cashback"] .gp-cashback-close {
        /* Sits inside the scrollable cr container so it scrolls away
           when the user pages down — `fixed` would pin it to the
           viewport, which the user explicitly does not want. The cr
           wrapper is `position: relative`, so absolute positions
           against its content origin and follows the scroll naturally. */
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 30;
      }

/* === extracted from index.html line 4889 === */
      /* Scroll-to-top FAB. Visually identical to the bundle's `Afe`
         component (glass tokens copied verbatim from the reference
         project's `_button_oz7me_1` class — same backdrop blur +
         SVG turbulence distortion + multi-layer inset shadow). The
         bundle only renders Afe on the offers tab; we render an
         identical button outside the React root so it is available
         everywhere with a long scrolling list. Position matches the
         reference exactly: bottom-left, 16px from each edge plus
         safe-area-inset, w-13/h-13 (52×52). */
      /* Float-cart positioning: the bundle itself owns the cart pill's
         bottom-edge animation via Tailwind's `transition-all duration-300`
         class (see the JSX at the cart pill in the bundle around line
         153510 — it toggles between bottom-[+80px] when the tabbar is
         visible and bottom-[+16px] when it slides out). Predict ships
         with no CSS override on this element and the slide is buttery
         smooth there. Our previous `transition: bottom 0.22s ease`
         desynced from the tabbar's 300 ms framer-motion slide — the
         cart finished moving while the tabbar was still mid-animation,
         which is the "buggy rises up" the user flagged. Letting the
         bundle's native transition run fixes it. The body.gp-fab-row
         override is no longer needed because the FAB scroll listener
         already toggles `setIsTabbarVisible(false)` (see the dg fiber
         reader in the FAB IIFE), so React renders the cart with
         bottom-[+16px] and the bundle's transition animates the drop. */

      #gp-scroll-top {
        position: fixed;
        /* Position copied verbatim from predict's Afe component:
           `fixed left-4 z-30 bottom-[calc(var(--tg-viewport-safe-area-inset-bottom)+16px)]`.
           When the FAB shows, the bundle's setIsTabbarVisible hook hides
           the tabbar via framer-motion, so 16px clearance is correct. */
        left: 16px;
        bottom: calc(var(--tg-viewport-safe-area-inset-bottom, 0px) + 16px);
        z-index: 30;
        width: 52px;
        height: 52px;
        border-radius: 9999px;
        border: none;
        padding: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        --bg-glass: #000;
        --c-light: #fff;
        --c-dark: #000;
        --glass-reflex-dark: 2;
        --glass-reflex-light: 0.3;
        --saturation: 140%;
        background-color: color-mix(in srgb, var(--bg-glass) 12%, transparent);
        backdrop-filter: blur(8px) saturate(var(--saturation));
        -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
        box-shadow:
          inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
          inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
          inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
          inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
          inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
          inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
          inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
          inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
          0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
          0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
        isolation: isolate;
        opacity: 0;
        transform: translateY(20px) scale(0.8);
        pointer-events: none;
        transition: opacity 0.2s, transform 0.2s;
      }
      #gp-scroll-top.gp-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
      }

      /* /profile card: vertically center the username next to the avatar.
         Bundle uses `flex flex-col justify-between` for the text column,
         which falls back to top-alignment when there's only one child
         (no rank badge / no subtitle). User explicitly asked for the
         username to sit on the same horizontal line as the avatar. */
      .bg-secondary\/65.glass-shadow.squircle-3xl > .flex.gap-2 > .flex.flex-col.justify-between {
        justify-content: center !important;
        gap: 4px;
      }

      /* Recent-actions filter modal trigger (funnel button) — also kill
         it via CSS, in addition to the JS-based hide, so no flash of the
         button while the bundle mounts and our MutationObserver fires.
         The button is a popover-trigger sibling of the filter chips
         carousel. We catch the parent slot via the unique combination of
         a `[data-slot="popover-trigger"]` button containing a 16x16 svg
         AND a Kb badge, mounted inside a sticky chip rail. */
      /* Gift-card price pill: subtle gap tightening between the digits
         and the ₽ glyph. Bundle default `gap-1` (4px) reads as too airy
         per buyer feedback ("чет рубль слишком далеко встал"); 3px
         pulls the glyph closer without gluing it to the last digit.
         Font-size bumped to 17px (from 14px) — buyer reported "цена
         пиздец маленькая". 17px lets the digits dominate the pill
         without forcing wrap on 4-digit prices (e.g. "1234₽" at
         the narrower w-[91px] card width). Padding kept at the
         bundle default so the pill stays the same height; only the
         glyph weight reads as larger. */
      div.bg-secondary\/65.cursor-pointer.flex.flex-col button[data-slot="button"].bg-primary,
      div.bg-secondary\/65.cursor-pointer.flex.flex-col button[data-slot="button"].rounded-2xl {
        gap: 3px !important;
        font-size: 17px !important;
        /* OWNER 2026-05-17: long prices (millions) bled outside the pill on
           Plush Pepe and friends — buyer flagged "почему вылазит за рамки?".
           Allow the price button to shrink digits inside its own pill width:
           clamp via container-query (pill width is fixed by the card grid →
           cqw scales the font-size in step with the pill). Falls back to
           17px when container queries unsupported (clamp is ignored, plain
           `font-size: 17px !important` above stays). The min 11px keeps
           ridiculous prices (8-digit) still legible. */
        container-type: inline-size;
        min-width: 0 !important;
        overflow: hidden !important;
      }
      /* The digit and ruble spans inside the pill inherit-shrink. We pick
         per-span overrides so we beat the broader `font-size: 17px` rule
         above without losing it for the short-price baseline (a short
         "523 ₽" stays at 17px because cqw at full pill width × 0.18 ≈ 18px,
         clamped down by 17px ceiling). */
      div.bg-secondary\/65.cursor-pointer.flex.flex-col button[data-slot="button"].bg-primary > span,
      div.bg-secondary\/65.cursor-pointer.flex.flex-col button[data-slot="button"].rounded-2xl > span {
        font-size: clamp(11px, 18cqw, 17px) !important;
        white-space: nowrap !important;
      }

      /* === NFT-bonus discount badge (red "%" circle) ====================
         Owner bug A (2026-05-23): unified geometry across every surface.
         Previously the catalog-grid pill carried `top/left: -5px` on a
         16px circle (only ~30% of the circle stuck out — "впритык к
         краю"), while the buy-CTA carried `top/left: -9px` on a 18px
         circle (50/50 on the button corner). On top of that, both
         glyphs were `font-size: 7px` so the symbol read smaller inside
         the larger CTA circle ("еле вижно процент в попапе"). Now:
           - circles sized proportionally to their host surface
             (16px on the price pill, 18px on the big buy-CTA);
           - both circles sit HALF INSIDE / HALF OUTSIDE their host's
             top-left corner (top/left always equal to negative half the
             diameter), so the visual treatment reads identical even
             though the absolute sizes differ;
           - glyph sized to ~62% of the circle diameter (10px on 16px,
             11px on 18px) so the "%" looks the same proportional
             weight on both surfaces.

         Owner bug B (2026-05-23): the badge is now a CSS `::before`
         pseudo-element painted directly on every NFT pill/CTA, gated
         on the body-level `data-gp-bonus-active` attribute. This
         removes the old "DOM-append-via-MutationObserver" race where a
         freshly-mounted pill rendered without a badge for one RAF tick
         and the user saw "красные круги тупо исчезают перед переходом"
         on every route change. CSS pseudo-elements are part of the
         host element's render box, so they paint synchronously with
         their host on first frame — no observer round-trip required.

         The legacy `.gp-bonus-pct-badge` <span> class is still produced
         by `cartBonusDiscountDistribution` (which picks the SINGLE
         most-expensive checked row in /cart and badges only that one —
         a single-element JS rule no CSS selector can express). For
         those, the legacy class rule below renders the same red circle.
         Everywhere else, the bundle's IIFEs strip any legacy span and
         the badge comes from the pseudo-element rule further down. */

      /* Legacy span-based badge — still used by the /cart row-picker
         IIFE. Same visual contract as the pseudo-element rule below so
         both surfaces look identical.
         Owner round-trip 2026-05-23 (Bug F v3): badge sits HALF outside
         the pill's top-left corner ("слева сверху как и было" the user
         insisted on after I incorrectly tried to move it inside). The
         clipping that prompted the inside-pill attempt is now solved
         differently — see the `overflow:visible` rules further down
         which lift the clip on the specific wrappers that hold a
         bonus-active pill. */
      /* Owner report 2026-05-23 (round 6): the "%" glyph rendered with
         font-text + flex-centering sat visibly off-centre inside the
         16-px red circle — SFProText's percent has asymmetric vertical
         bbox (ascent 4.28 vs descent 2.72 at font-size 10) so flex
         centres the LINE-BOX, not the glyph. Owner screenshot showed a
         clear leftward + upward bias.

         ROOT-CAUSE FIX: drop the font-rendered glyph entirely and paint
         the "%" as an inline-SVG background-image. SVG `<text>` with
         `text-anchor="middle"` + `dominant-baseline="central"` puts the
         glyph's geometric centre EXACTLY at (cx, cy) regardless of font
         metrics. The colour stop stays on `background-color` so the red
         circle still paints cleanly even if the browser refuses the
         inline-SVG decode (graceful degradation). Same SVG content +
         viewBox for both the legacy span class (here) and the
         `::before` pseudo-elements below — single visual contract. */
      /* Owner round-trip 2026-05-23 (round 8): rounds 6/7 produced
         pixel-noisy badges at the real 16-px render size because:
           round 6  → SVG <text> with Arial-fallback metrics drifted left.
           round 7  → SVG primitives with FRACTIONAL coords (cx=5.2 etc.)
                      landed between pixel centres → subpixel antialiasing
                      smeared the dots asymmetrically; owner reported the
                      glyph "криво" at the actual 16-px display size even
                      though it looked clean at 8× zoom.
         ROOT-CAUSE FIX (round 8): blow up the internal SVG coordinate
         system to viewBox 0 0 64 64, then let the browser downsample
         to 16 px. At 4× internal resolution the geometric primitives'
         own anti-aliasing is computed at sub-pixel precision and then
         smoothly resampled — both dots end up identically rendered
         instead of one being thicker than the other from rounding bias.
         All coordinates are integer multiples of 4 (20 / 32 / 44) so
         the layout is perfectly symmetric around the centre (32, 32).
         Same data-URI shape is shared with the catalog-grid and
         drawer-CTA pseudo-element rules below so all three surfaces
         render the badge identically. */
      .gp-bonus-pct-badge {
        position: absolute !important;
        top: -8px !important;
        left: -8px !important;
        width: 16px !important;
        height: 16px !important;
        border-radius: 9999px !important;
        background-color: #e53935 !important;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='20' cy='20' r='7' fill='white'/><circle cx='44' cy='44' r='7' fill='white'/><line x1='46' y1='18' x2='18' y2='46' stroke='white' stroke-width='6.5' stroke-linecap='round'/></svg>") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 100% 100% !important;
        font-size: 0 !important;
        color: transparent !important;
        pointer-events: none !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
        z-index: 2 !important;
      }

      /* DEPRECATED — the bundle no longer creates `<span class="gp-bonus-
         cta-badge">` elements. Hide any that survive from a pre-fix
         render so the new `::before` pseudo-element below does not
         stack with a stale span. */
      .gp-bonus-cta-badge {
        display: none !important;
      }

      /* === Pseudo-element badge on catalog-grid pills ====================
         Triggered by body[data-gp-bonus-active="1"] (set synchronously
         by bonusDiscountCards.syncAll whenever an NFT-discount bonus is
         active AND the active route is an NFT route AND not a resale
         path). Targets the same selector chain the JS rewriter uses for
         price text, scoped OUTSIDE dialogs/drawers (those CTAs are
         badged by [data-gp-bonus-cta] further down).

         Owner report 2026-05-23 (round 4): the red "%" badge was hidden
         "под кнопкой" on every NFT grid card. Root cause: the bundle's
         own pill rule at line ~9836 (`div.bg-secondary\/65.cursor-pointer
         .flex.flex-col button[data-slot="button"].bg-primary`) declares
         `overflow: hidden !important` with specificity (0,6,2). The
         former bonus-visible override below was scoped to
         `body[data-gp-bonus-active="1"] div[class*="squircle"]
         [class*="flex-col"] button.bg-primary` — specificity (0,5,2).
         Same !important, lower specificity → conflict rule wins, pill
         stays clipped, the `::before` badge that sits at top:-8px /
         left:-8px is sliced off entirely. To beat (0,6,2) the override
         must add at LEAST one extra class/attribute selector. The first
         selector below keeps the broad `[class*=…]` match for any card
         shape (list-view variants don't carry `bg-secondary/65`); the
         second/third selectors mirror the EXACT class chain the conflict
         keys on (grid view) bumping specificity to (0,7,2) so the
         override wins on grid cards too. Both rounded-2xl and bg-primary
         pill variants are covered to match the conflict's both pill
         classes.
      */
      body[data-gp-bonus-active="1"]
        div[class*="squircle"][class*="flex-col"]
        button[data-slot="button"].bg-primary,
      body[data-gp-bonus-active="1"]
        div.bg-secondary\/65.cursor-pointer.flex.flex-col
        button[data-slot="button"].bg-primary,
      body[data-gp-bonus-active="1"]
        div.bg-secondary\/65.cursor-pointer.flex.flex-col
        button[data-slot="button"].rounded-2xl {
        position: relative;
        overflow: visible !important;
      }
      /* Owner round-trip 2026-05-23 (Bug F v3): lift overflow clipping
         on every ancestor in the catalog-card chain so the half-outside
         badge isn't sliced off by a parent. The previous round tried to
         dodge clipping by moving the badge inside the pill; the user
         rejected that ("блять слева сверху а не внутри"). We're back to
         the original outside-corner placement and the clip is removed
         at every level instead. Scoped to body[data-gp-bonus-active="1"]
         so non-bonus pages keep their natural overflow contract. */
      body[data-gp-bonus-active="1"]
        div[class*="squircle"][class*="flex-col"]:has(
          > div > button[data-slot="button"].bg-primary,
          > * > div > button[data-slot="button"].bg-primary,
          > button[data-slot="button"].bg-primary
        ),
      body[data-gp-bonus-active="1"]
        div[class*="squircle"][class*="flex-col"]:has(
          button[data-slot="button"].bg-primary
        ) > * {
        overflow: visible !important;
      }
      body[data-gp-bonus-active="1"]
        div[class*="squircle"][class*="flex-col"]
        button[data-slot="button"].bg-primary::before {
        /* Round 8: same 64-unit viewBox + 4-aligned coords as the legacy
           span rule above — both surfaces render the badge identically.
           See the rationale block on .gp-bonus-pct-badge for why the
           internal coordinate system is 4× the rendered pixel size. */
        content: "";
        position: absolute;
        top: -8px;
        left: -8px;
        width: 16px;
        height: 16px;
        border-radius: 9999px;
        background-color: #e53935;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='20' cy='20' r='7' fill='white'/><circle cx='44' cy='44' r='7' fill='white'/><line x1='46' y1='18' x2='18' y2='46' stroke='white' stroke-width='6.5' stroke-linecap='round'/></svg>");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        pointer-events: none;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
        z-index: 2;
      }
      /* Suppress the catalog-pill pseudo-badge inside dialogs / drawers
         so the buy-CTA inside the gift drawer (handled by
         `[data-gp-bonus-cta="1"]::before` below) is the only badge on
         those surfaces — without this we'd paint two red circles when
         the drawer's outer wrapper also carries `squircle … flex-col`
         (a known overlap; the same exclusion lives in the JS sync). */
      [role="dialog"]
        div[class*="squircle"][class*="flex-col"]
        button[data-slot="button"].bg-primary::before,
      [data-vaul-drawer]
        div[class*="squircle"][class*="flex-col"]
        button[data-slot="button"].bg-primary::before,
      [data-gp-gift-drawer]
        div[class*="squircle"][class*="flex-col"]
        button[data-slot="button"].bg-primary::before {
        content: none !important;
      }

      /* === Pseudo-element badge on the buy-CTA inside drawers ============
         The bundle tags eligible drawer CTAs ("Купить подарок", "Купить
         за …") with `data-gp-bonus-cta="1"` once the active-bonus value
         has resolved and the current route is NFT-eligible (see
         buyCtaBonusBadges in index-p7V068-24.js). The CTA sits on a
         taller surface than the grid-pill, so the circle is bumped to
         18 px while the glyph stays a proportional ~62% (11 px) — no
         "fat %" on CTAs, no "tiny %" on the pill, both read identical. */
      button[data-gp-bonus-cta="1"] {
        position: relative !important;
        overflow: visible !important;
      }
      /* Owner round-trip 2026-05-23 (Bug F v3): lift overflow clipping on
         the drawer chain that wraps a bonus CTA so the half-outside badge
         is fully visible. Same intent as the catalog-card chain above —
         badge stays outside the corner ("как и было") and the clipping
         is removed at the wrapper level instead of relocating the badge. */
      [data-vaul-drawer][data-state="open"]:has(button[data-gp-bonus-cta="1"]),
      [data-vaul-drawer][data-state="open"]:has(button[data-gp-bonus-cta="1"]) > *,
      [role="dialog"][data-state="open"]:has(button[data-gp-bonus-cta="1"]),
      [role="dialog"][data-state="open"]:has(button[data-gp-bonus-cta="1"]) > * {
        overflow: visible !important;
      }
      /* The drawer/card itself must keep clipping its rounded mask. The
         external bonus badge is hidden in drawers by the owner-level rule
         in index.html, so leaving the top wrapper overflow-visible only
         exposes square gray corners behind Vaul's rounded sheet. */
      [data-vaul-drawer][data-state="open"]:has(button[data-gp-bonus-cta="1"]),
      [role="dialog"][data-state="open"]:has(button[data-gp-bonus-cta="1"]) {
        overflow: hidden !important;
      }
      button[data-gp-bonus-cta="1"]::before {
        /* Round 8: same 64-unit viewBox shared with the grid-pill +
           cart-row variants. Browser rasterises at the FINAL 18-px
           display size for this surface, but the 64-unit internal
           grid keeps the dots' anti-aliasing identical on both ends
           and avoids the subpixel asymmetry rounds 6/7 produced. */
        content: "";
        position: absolute;
        top: -9px;
        left: -9px;
        width: 18px;
        height: 18px;
        border-radius: 9999px;
        background-color: #e53935;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='20' cy='20' r='7' fill='white'/><circle cx='44' cy='44' r='7' fill='white'/><line x1='46' y1='18' x2='18' y2='46' stroke='white' stroke-width='6.5' stroke-linecap='round'/></svg>");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        pointer-events: none;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
        z-index: 2;
      }
      /* OWNER 2026-05-20: the price-pill button in catalog cards carries
         `overflow: hidden !important` (line ~9837 below) so long prices
         can't widen the pill. That same rule clips the absolutely-positioned
         red "%" sticker the moment a bonus is active. Override on equal
         specificity (same long selector + :has) so the override wins via
         later-cascade, but ONLY for pills that currently carry a badge —
         everything else keeps the digit-clamp protection. */
      div.bg-secondary\/65.cursor-pointer.flex.flex-col button[data-slot="button"].bg-primary:has(> .gp-bonus-pct-badge),
      div.bg-secondary\/65.cursor-pointer.flex.flex-col button[data-slot="button"].rounded-2xl:has(> .gp-bonus-pct-badge) {
        overflow: visible !important;
      }
      /* Same logic for the big buy-CTA button inside the gift drawer
         (any button carrying .gp-bonus-cta-badge — predict / cart /
         drawer). Selector is broader because the CTA's wrapper classes
         vary by surface. */
      button:has(> .gp-bonus-cta-badge) {
        overflow: visible !important;
      }

      [data-slot="popover-trigger"] > button[data-slot="button"][class*="2sm"][class*="input"] {
        display: none !important;
      }
      /* Drop the popover-trigger wrapper itself + any sibling spacer
         (gap stub, vertical-rule div, divider) that the bundle injects
         next to the hidden funnel. User's red arrow in the original
         screenshot #2 pointed at a thin vertical "tick" left of the
         Баланс/Подарки chip row — that tick is the empty wrapper we
         had been leaving behind. Cover the same area with two layered
         rules: hide ANY popover-trigger that contains the hidden funnel
         button, AND hide direct empty children of the sticky filter row
         on /top-up + /profile + /history. */
      [data-slot="popover-trigger"]:has(> button[data-slot="button"][class*="2sm"][class*="input"]) {
        display: none !important;
      }
      [data-slot="popover-trigger"]:empty {
        display: none !important;
      }
      body[data-gp-route="top-up"] div[class*="sticky"] > div:empty,
      body[data-gp-route="top-up"] div[class*="sticky"] > span:empty,
      body[data-gp-route="profile"] div[class*="sticky"] > div:empty,
      body[data-gp-route="profile"] div[class*="sticky"] > span:empty,
      body[data-gp-prev-route="top-up"] div[class*="sticky"] > div:empty,
      body[data-gp-prev-route="profile"] div[class*="sticky"] > div:empty {
        display: none !important;
      }
      /* Catch-all: any FLEX-row child in the /top-up history sticky bar
         that is < 6 px wide is almost certainly an artifact (real chips
         are ≥ 60 px). Use container width measurement via :has() + child
         filter so legitimate spacers stay if they grow. */
      body[data-gp-route="top-up"] div[class*="sticky"] [data-slot="popover-trigger"][class*=""]:not(:has(button[type])),
      body[data-gp-route="top-up"] div[class*="sticky"] > *:not(button):not(input):not(select):not([role="tablist"]):not([data-slot]):empty {
        display: none !important;
      }


      /* Hide the gift-detail "share" button when the gift detail drawer
         (Vs) is opened FROM the wallet-history transaction-details page.
         Bundle's Krt renders the share affordance inside the
         `.absolute.w-full.z-2.flex.flex-col.items-end` topSlot wrapper,
         and the share button itself carries the bundle's `bg-secondary/15`
         hover-pair class. We only want to remove it for the wallet-history
         detail context (route: /transaction-details), NOT on marketplace
         where sharing the gift makes sense. */
      body[data-gp-route="transaction-details"] [data-vaul-drawer][data-state="open"]
        .absolute.w-full.z-2.flex.flex-col.items-end button,
      body[data-gp-route="transaction-details"] [data-vaul-drawer][data-state="open"]
        button.bg-secondary\/15,
      body[data-gp-route="transaction-details"] [role="dialog"][data-state="open"]
        .absolute.w-full.z-2.flex.flex-col.items-end button {
        display: none !important;
      }

      /* Custom centered "Подарок куплен" toast — fired by route-fixes.js
         only after the order's status reaches ACQUIRED (thermos-confirmed),
         not on the initial PAID order creation. Deliberately minimal:
         centered text on a small card, no subtitle, no inventory button
         (the bundle's stock toast was rejected for being noisy). */
      .gp-gift-purchased-toast {
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 28px);
        left: 50%;
        transform: translate(-50%, -16px);
        z-index: 200002;
        min-width: 220px;
        padding: 18px 28px;
        background: #16181c;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        border-radius: 18px;
        box-shadow: 0 16px 40px rgba(0,0,0,0.55);
        opacity: 0;
        transition: opacity 220ms ease, transform 220ms ease;
        pointer-events: none;
      }
      .gp-gift-purchased-toast.gp-gift-purchased-open {
        opacity: 1;
        transform: translate(-50%, 0);
      }

      /* Hide bundle-rendered field errors on /stars and /premium for the
         @username field. Our overlay (giftpay-route-fixes.js
         __gpRecipientValidatorInstalled) is the single source of truth
         for recipient validation: it suppresses errors while the buyer
         is typing and only surfaces ONE message on blur. Letting the
         bundle's own "Неверный формат @username" / "Минимум 5 символов"
         band of red text linger underneath would stack two errors for
         the same problem (the user explicitly flagged this as a bug:
         "нельзя выводить сразу 2 ошибки").
         The wrapper is matched by the `:has(input[placeholder*="username"])`
         signature so the rule only kills the recipient field's bundle
         error — the amount field's "Минимум 50 звёзд" inline error is
         left intact (it has no overlay competitor). */
      body[data-gp-route="stars"] form .relative.w-full:has(input[placeholder*="username"]) > .text-destructive.mt-1,
      body[data-gp-route="premium"] form .relative.w-full:has(input[placeholder*="username"]) > .text-destructive.mt-1,
      body[data-gp-route="stars"] form .relative.w-full:has(> .relative > input[placeholder*="username"]) > .text-destructive.mt-1,
      body[data-gp-route="premium"] form .relative.w-full:has(> .relative > input[placeholder*="username"]) > .text-destructive.mt-1 {
        display: none !important;
      }
      /* Belt-and-suspenders: kill the amount-field bundle error too while
         the field is empty (untouched). Bundle keeps `touched=true` after
         the first submit attempt and leaves "Минимум 50 звёзд" stranded
         under an empty input; we still want the empty-input case to read
         as neutral. */
      body[data-gp-route="stars"] form .relative.w-full:has(input[inputmode]:placeholder-shown) > .text-destructive.mt-1,
      body[data-gp-route="premium"] form .relative.w-full:has(input[inputmode]:placeholder-shown) > .text-destructive.mt-1 {
        display: none !important;
      }

      /* Suppress aria-invalid red border + ring on empty fields. The bundle
         input renders with `aria-invalid:border-destructive aria-invalid:ring-destructive/20`
         tailwind classes; React resets the touched flag to false on empty
         input via onChange, but the order of state updates can leave
         aria-invalid="true" on a field that's already been cleared. Anchoring
         to :placeholder-shown — which is true iff the input has no value —
         locks the visual to "no error" whenever the field is actually empty,
         regardless of any stale touched/error flag. */
      body[data-gp-route="stars"] form input[aria-invalid="true"]:placeholder-shown,
      body[data-gp-route="premium"] form input[aria-invalid="true"]:placeholder-shown {
        border-color: transparent !important;
        --tw-ring-color: transparent !important;
        --tw-ring-shadow: 0 0 #0000 !important;
        box-shadow: none !important;
      }

      /* === 2026-05-08 punch list patches ============================== */

      /* Купить звёзды / Купить Premium — kill the hover/active
         background flicker. Bundle ships these CTAs as
         `bg-primary hover:bg-primary/90 active:bg-primary/80
         transition-all` so a cursor sitting on the button (или micro-
         shake мышью) проигрывает короткий fade каждый раз, что
         читается как мигание. Стабилизируем фон во всех состояниях
         и убираем transition вообще — рисуем ровный зелёный, без
         отдачи под мышью. */
      body[data-gp-route="stars"] button[data-slot="button"].bg-primary.rounded-full.w-full,
      body[data-gp-route="premium"] button[data-slot="button"].bg-primary.rounded-full.w-full,
      body[data-gp-prev-route="stars"] button[data-slot="button"].bg-primary.rounded-full.w-full,
      body[data-gp-prev-route="premium"] button[data-slot="button"].bg-primary.rounded-full.w-full {
        transition: none !important;
        -webkit-tap-highlight-color: transparent !important;
      }
      body[data-gp-route="stars"] button[data-slot="button"].bg-primary.rounded-full.w-full:hover,
      body[data-gp-route="stars"] button[data-slot="button"].bg-primary.rounded-full.w-full:active,
      body[data-gp-route="stars"] button[data-slot="button"].bg-primary.rounded-full.w-full:focus,
      body[data-gp-route="stars"] button[data-slot="button"].bg-primary.rounded-full.w-full:focus-visible,
      body[data-gp-route="premium"] button[data-slot="button"].bg-primary.rounded-full.w-full:hover,
      body[data-gp-route="premium"] button[data-slot="button"].bg-primary.rounded-full.w-full:active,
      body[data-gp-route="premium"] button[data-slot="button"].bg-primary.rounded-full.w-full:focus,
      body[data-gp-route="premium"] button[data-slot="button"].bg-primary.rounded-full.w-full:focus-visible,
      body[data-gp-prev-route="stars"] button[data-slot="button"].bg-primary.rounded-full.w-full:hover,
      body[data-gp-prev-route="stars"] button[data-slot="button"].bg-primary.rounded-full.w-full:active,
      body[data-gp-prev-route="premium"] button[data-slot="button"].bg-primary.rounded-full.w-full:hover,
      body[data-gp-prev-route="premium"] button[data-slot="button"].bg-primary.rounded-full.w-full:active {
        background-color: var(--primary, #16a34a) !important;
        background-image: none !important;
        opacity: inherit !important;
        filter: none !important;
        box-shadow: inherit !important;
        outline: none !important;
        --tw-ring-color: transparent !important;
        --tw-ring-shadow: 0 0 #0000 !important;
      }

      /* === 2026-05-03 punch list patches ============================== */

      /* Issue 3 — kill the green-on-press highlight on the /top-up
         wallet card "Пополнить" CTA. The bundle paints the idle pill
         with `bg-white text-black` and adds `active:bg-primary/80` —
         so every press flips the button from white to green for the
         duration of the tap, which the buyer reads as "she lights
         up green when I click". Override `:active` / `:hover` /
         `:focus` so the press keeps the white surface (slight grey
         tint at hover/active for tactile feedback only) and never
         touches the brand green. */
      body[data-gp-route="top-up"] div.w-full[class*="squircle-2xl"].relative.overflow-hidden.bg-secondary button[data-slot="button"][class*="bg-white"],
      body[data-gp-prev-route="top-up"] div.w-full[class*="squircle-2xl"].relative.overflow-hidden.bg-secondary button[data-slot="button"][class*="bg-white"] {
        -webkit-tap-highlight-color: transparent !important;
      }
      body[data-gp-route="top-up"] div.w-full[class*="squircle-2xl"].relative.overflow-hidden.bg-secondary button[data-slot="button"][class*="bg-white"]:active,
      body[data-gp-prev-route="top-up"] div.w-full[class*="squircle-2xl"].relative.overflow-hidden.bg-secondary button[data-slot="button"][class*="bg-white"]:active,
      body[data-gp-route="top-up"] div.w-full[class*="squircle-2xl"].relative.overflow-hidden.bg-secondary button[data-slot="button"][class*="bg-white"]:hover,
      body[data-gp-prev-route="top-up"] div.w-full[class*="squircle-2xl"].relative.overflow-hidden.bg-secondary button[data-slot="button"][class*="bg-white"]:hover,
      body[data-gp-route="top-up"] div.w-full[class*="squircle-2xl"].relative.overflow-hidden.bg-secondary button[data-slot="button"][class*="bg-white"]:focus,
      body[data-gp-prev-route="top-up"] div.w-full[class*="squircle-2xl"].relative.overflow-hidden.bg-secondary button[data-slot="button"][class*="bg-white"]:focus,
      body[data-gp-route="top-up"] div.w-full[class*="squircle-2xl"].relative.overflow-hidden.bg-secondary button[data-slot="button"][class*="bg-white"]:focus-visible,
      body[data-gp-prev-route="top-up"] div.w-full[class*="squircle-2xl"].relative.overflow-hidden.bg-secondary button[data-slot="button"][class*="bg-white"]:focus-visible {
        background-color: rgba(255, 255, 255, 0.85) !important;
        background-image: none !important;
        color: rgb(0, 0, 0) !important;
        box-shadow: none !important;
        filter: none !important;
        outline: none !important;
        --tw-ring-color: transparent !important;
        --tw-ring-shadow: 0 0 #0000 !important;
        --tw-ring-offset-shadow: 0 0 #0000 !important;
      }

      /* Issue 4 — wallet history row avatar PNG is too big. The bundle
         renders each wallet-history row's leading icon inside a small
         (40-48px) circle or squircle with the gift PNG filling 100% of
         the box. Without padding the PNG sits edge-to-edge and reads as
         a giant "sticker" — buyer flagged "ебануто большие и не
         пропорциональные" (Issue 2026-05-12). Shrink the PNG itself
         (NOT the wrapper) so it sits centred with breathing room, like
         a real avatar icon.

         Scope: any horizontal flex row with `flex items-center gap-3`
         whose first child is a `shrink-0` rounded wrapper hosting an
         <img>. That signature is unique to list rows (wallet history,
         transaction details meta-row, deposit-drawer history) — the
         gift purchase modal and grid cards use `flex flex-col`, so
         they don't match. Two wrapper variants exist: `rounded-full`
         (deposit page) and `squircle-…` (wallet history list shown
         in the buyer's screenshot — slightly rounded square, not full
         circle). The earlier patch only covered `rounded-full`, which
         is why the squircle-wrapped Stars/Gift PNGs stayed huge. */
      body[data-gp-route="top-up"] div.flex.items-center.gap-3 > div.shrink-0[class*="rounded-full"][class*="overflow-hidden"] > img,
      body[data-gp-prev-route="top-up"] div.flex.items-center.gap-3 > div.shrink-0[class*="rounded-full"][class*="overflow-hidden"] > img,
      body[data-gp-route="top-up"] div.flex.items-center.gap-3 > div.shrink-0[class*="squircle-"] > img,
      body[data-gp-prev-route="top-up"] div.flex.items-center.gap-3 > div.shrink-0[class*="squircle-"] > img,
      body[data-gp-route="transaction-details"] div.flex.items-center.gap-3 > div.shrink-0[class*="squircle-"] > img,
      body[data-gp-prev-route="transaction-details"] div.flex.items-center.gap-3 > div.shrink-0[class*="squircle-"] > img {
        padding: 22% !important;
        box-sizing: border-box !important;
      }
      /* Wallet-history row icons: the previous patch scaled them to
       * 0.88 to add breathing room, but the scale was gated on
       * `body[data-gp-route="top-up"]` — when the buyer taps a row to
       * open /transaction-details, the route attribute flips first
       * and the icons snap from 0.88 → 1.0 while the wallet-history
       * page is still painted underneath the route-transition. The
       * buyer flagged that as "карточки резко увеличиваются и
       * уменьшаются" (Issue 2026-05-12). Removing the kludge: icons
       * render at the bundle's intrinsic size on both routes, no
       * route-conditional transform, no flash. */
      /* Force the gift artwork itself to be rounded inside the
       * transaction-details icon frame.
       *
       * BACKGROUND (the full reason chain — kept here so the next
       * maintainer doesn't waste a debug cycle on this):
       *
       * The bundle's Lt component renders the gift as:
       *   <div class="relative overflow-hidden squircle-2xl w-21 h-21 squircle-[44px]">
       *     <img class="w-full h-full object-cover" src="…">
       *   </div>
       *
       * Reasoning chain followed for the buyer's "квадрат внутри
       * круга" report:
       *   1. The parent has `squircle-2xl squircle-[44px]` which
       *      compiles (in browsers that DO support `corner-shape`) to
       *      `corner-shape: squircle; border-radius: 70px`. That ought
       *      to clip the inner <img> via `overflow: hidden`.
       *   2. An older patch set `padding: 8% !important` on the <img>
       *      — that was rolled back (the padded image sat as a smaller
       *      square in the middle of the rounded frame, exactly the
       *      symptom). Removing the padding by itself was not enough.
       *   3. Chrome's experimental `corner-shape: squircle` (shipped
       *      in M134) does NOT consistently clip `overflow: hidden`
       *      descendants — the rendered border curve matches the
       *      squircle but the clipping mask the compositor uses falls
       *      back to a rectangular border-box on `<img>` and other
       *      replaced elements. The image's solid-colour artwork
       *      (Chill Flame yellow, every NFT/Telegram unique gift)
       *      then sits as a sharp rectangle inside the rounded parent.
       *
       * FIX: bypass the parent's flaky overflow-clip entirely by
       * giving the <img> its OWN matching radius. `border-radius:
       * inherit` would pick up the parent's value but corner-shape
       * doesn't inherit on replaced elements, so we hard-set 44 px to
       * match the bundle's `squircle-[44px]` token. On an 84-px box
       * the CSS spec clamps 44 px to 50 % which renders as the same
       * rounded sticker shape the buyer sees in the history list row
       * — no more "превращается в квадрат".
       *
       * Scoped to /transaction-details + the wallet history sub-
       * drawer (the only places where the icon is rendered at the
       * w-21/h-21 size). Other Lt callers (gift cards in the catalog
       * grid, NFT modal thumbnails) keep the bundle's native shape. */
      /* Lt-image rounding: inherit the wrapper's squircle.
       * Chrome's corner-shape: squircle on the parent doesn't always
       * clip replaced elements (img) — img would render as a sharp
       * rectangle inside the rounded wrapper. Setting border-radius
       * + corner-shape on the img itself gives it the same squircle
       * shape as the wrapper, so the visual matches predict 1:1.
       *
       * `border-radius: inherit` picks up the wrapper's value (16-70px
       * depending on the squircle-* token), so a 48-px avatar stays
       * round-ish and a 96-px buy-modal photo gets the full 70-px
       * squircle just like predict renders it. corner-shape is
       * forced to squircle so the inherited radius is interpreted
       * as a squircle curve, not a circular one. */
      div.relative.overflow-hidden[class*="squircle-"] > img,
      div.relative.overflow-hidden[class*="squircle-"] > div.relative > img {
        border-radius: inherit;
        corner-shape: squircle !important;
      }
      /* Inside the wallet-history transaction-details drawer the
         bundle stacks several meta rows below the photo (Дата +
         время, Цена, Тип, Количество, Заметка). User wants ONLY
         date/time visible — hide the rest. Scoped to
         /transaction-details so the buy-gift purchase modal (which
         shares some of these flex containers) keeps all its rows. */
      body[data-gp-route="transaction-details"] dl.grid.grid-cols-2 > div:nth-child(n+3),
      body[data-gp-prev-route="transaction-details"] dl.grid.grid-cols-2 > div:nth-child(n+3) {
        display: none !important;
      }
      body[data-gp-route="transaction-details"] div.flex.flex-col.gap-3 > div.flex.items-center.justify-between:nth-of-type(n+2),
      body[data-gp-prev-route="transaction-details"] div.flex.flex-col.gap-3 > div.flex.items-center.justify-between:nth-of-type(n+2) {
        display: none !important;
      }

      /* Issue 8 — promo banner click handler. Bundle renders the home
         banner as a `cursor-pointer` div whose React onClick triggers a
         marketplace filter change. User wants nothing to happen on tap.
         pointer-events:none kills both React's synthetic click and any
         underlying anchor without removing the visual — the banner
         remains interactable for swiping (carousel root still receives
         pointer events) yet individual slides cannot be tapped. */
      [data-slot="carousel"].relative.px-4.mb-3.z-11 [data-slot="carousel-item"] > div.cursor-pointer {
        pointer-events: none !important;
        cursor: default !important;
      }

      /* Issue 6 — drop the redundant first menu item inside the topup
         drawer's two main tabs. The bundle's deposit drawer renders
         the option list as a flat sequence; the FIRST entry duplicates
         the parent tab name (Баланс tab → first row "Баланс"; Подарки
         tab → first row "Подарки"). User wants only the "purchase" /
         action items to remain, so each list's first entry is hidden.
         Targets the deposit drawer's structured option rows (button
         children of the option-list container with the bundle's known
         class signature). The remaining items keep their natural order. */
      body[data-gp-route="top-up"] [data-vaul-drawer][data-state="open"] [data-gp-deposit-tab-list="1"] > [data-gp-tab-row]:first-child,
      body[data-gp-route="top-up"] [role="dialog"][data-state="open"] [data-gp-deposit-tab-list="1"] > [data-gp-tab-row]:first-child {
        display: none !important;
      }

      /* Portals brand "P" mark on /top-up balance card. The bundle's G0t SVG
         (viewBox="0 0 335 140") draws TWO shapes inside the wallet card:
            1. <circle cx=327 cy=147 r=147 fill="#1689FF"> — the soft blue
               glow (Gaussian-blurred to a warm green-tinted halo by the
               card's bg-secondary backdrop). The user wants to keep this
               — it's the visual ambient lighting on the balance card.
            2. <path opacity=0.12 fill="white"> — the white Portals "P"
               letterform sitting on top of the glow. THIS is the brand
               mark to remove.
         The rule used to be scoped to body[data-gp-route="top-up"], but
         that left a one-frame Portals flash on the close-out animation
         (route attribute swaps to the next page before the modal's exit
         transition finishes, so for a beat the "P" shows). Globally
         hiding the same SVG path everywhere it can render kills the
         flash and is safe — no other surface in GiftPay uses the
         exact 335x140 wallet-card viewBox. */
      svg[viewBox="0 0 335 140"] > path[fill="white"] {
        display: none !important;
      }

      /* Bottom-nav «Звёзды» star icon — both icons (gift + 5-point star)
         ship at identical 25×24 viewBox, but a 5-point star inherently
         leaves more negative space than a filled gift box, so visually
         the star reads as smaller next to the gift. Buyer flagged it
         "звезда маленькая". Scale the star up so it occupies the same
         visual weight. The selector targets the second tabbar option
         (data-option="1") and bumps its inline SVG via transform so
         the icon's own currentColor + path data remain untouched. */
      [data-option="1"] > div > svg[viewBox="0 0 25 24"] {
        transform: scale(1.25);
        transform-origin: center;
      }

      /* Tiled Portals "P" logos baked into the bundle's `.bg-collection`
         backdrop. The bundle imports a single base64 webp (variable `hP`
         in index-p7V068-5.js) that is a 142×140 tile of small white
         Portals letterforms on transparent. It is rendered at z-0 behind
         every model thumbnail in the Коллекция / Модель / Символ / Фон
         filter modals on the home gifts page, so each card shows several
         tiny "P" marks fanned around the model image — the user flagged
         them as "лого порталса которые там летают". Hiding the inner
         <img> kills the watermark and keeps the wrapper's layout (it is
         absolutely positioned with z-0, so leaving it empty has no visual
         side-effects). The model thumbnail itself sits in the sibling z-1
         <div class="squircle-2xl ... w-7 h-7"> and is unaffected. */
      .bg-collection > img,
      .bg-collection img[src^="data:image/webp;base64,UklGRgQFAABXRUJQVlA4WAoAAAAwAAAAjQAAiwAA"] {
        display: none !important;
      }

      /* STARS_GIFT row patches — see the IIFE in giftpay-route-fixes.js
         that stamps the data-attributes. Two concerns:
           1. The icon button is a clickable opener for the bundle's
              gift-info modal; for STARS_GIFT items that modal shows
              an empty title with no data, so disable pointer-events
              there. The whole-row click (open transaction detail)
              survives because clicks with `pointer-events:none` pass
              through to the row's parent (the bundle's `.cursor-pointer`
              wrapper that holds the React onClick). The capture-phase
              JS swallow is belt; this is suspenders.
           2. The detail-page tile that pairs "Telegram Gift" with a
              "#" placeholder is dead — hide it (rule below).

         The PNG in the history row used to be shrunk to 78% width to
         match NFT thumbnails visually. That made the same image render
         at 78% of a 48px squircle on the history list (~37px) but at
         78% of an 84px squircle on the detail page (~66px) — so the
         user saw the icon visibly "shrink" on tap and "grow back" on
         exit. Drop the shrink: the IMG keeps its bundle-default 100%
         sizing, identical to NFT rows, and the size stays constant
         across navigation. */
      /* Disable pointer-events on the icon column (the row's first
         direct child) so the bundle's gift-info-modal opener never
         fires. The text + amount columns continue to receive clicks,
         and the row's parent `.cursor-pointer` still navigates to
         the transaction-detail page. Same row-scoped rationale as the
         scaling rule: don't depend on attributes that React strips
         on re-render. */
      [data-gp-stars-gift-row="1"] > *:first-child {
        pointer-events: none !important;
        cursor: default !important;
      }

      /* Frame + scale-down the icon on every non-NFT history row
         (STARS_GIFT, STARS_TOPUP, PREMIUM) so the sticker artwork sits
         inside the same dark squircle the +Пополнение row uses.
         The bundle's e.nft branch renders the photo full-bleed at
         48x48 (object-cover), which leaves the row visually mismatched
         with the deposit row's wZ-wrapped 48x48 bg-secondary tile.
         Restore visual parity:
           • the IMG's parent (Lt's relative.overflow-hidden wrapper,
             sized w-12 h-12) gets bg-secondary so the dark tile is
             visible around the artwork;
           • the IMG itself drops to 70% of the tile and switches to
             object-contain so the sticker is centred with breathing
             room instead of being cropped by the 48x48 box.
         The image-stage tag `data-gp-stars-gift-icon` is stamped on
         every ancestor between the IMG and the row, so the parent
         wrapper carries both tags — we target the w-12/h-12 stage
         specifically so the rule doesn't bleed into the larger
         84x84 detail-page tile or any other gp-icon-tagged ancestor. */
      [data-gp-stars-gift-icon="1"][class*="w-12"][class*="h-12"] {
        background-color: var(--secondary) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
      }
      img[data-gp-stars-gift-icon-img="1"] {
        width: 70% !important;
        height: 70% !important;
        object-fit: contain !important;
      }
      /* Filter modal self-referential option suppression — when the
         heading text and an option label are identical (e.g. modal
         titled "Баланс" containing an option also labelled "Баланс"),
         the JS observer above stamps this attribute. */
      [data-gp-filter-self-hidden="1"] {
        display: none !important;
      }

      /* Page-level X close button — pokes above modal overlays.
         The /top-up (and similar subflow) routes render their own
         page-close X at `position:absolute; top:4; right:4; z-100`.
         Vaul's drawer overlay sits at `z-50` with `backdrop-filter:
         blur(16px)`. With the X at z-100, the button is drawn ABOVE
         the blur — it stays sharp while the entire page below it is
         blurred, which the user flagged as "крестик выше всех / не
         блюрится" when opening the gift-info modal from the topup
         history. Demote the X to z-40 (below the overlay) only while
         a drawer is open (`body[data-scroll-locked]` is set by Vaul);
         the overlay's blur then covers the button just like the rest
         of the page, and the user dismisses the modal via its own
         drag handle / "Закрыть" button rather than the page X. When
         the drawer closes the lock attribute clears and the button
         returns to its native z-100 for normal page interaction. */
      body[data-scroll-locked="1"] button.z-100.absolute.top-4.right-4 {
        z-index: 40 !important;
      }

      /* NFT buy-confirmation modal: all custom layout overrides
         removed — predict ships no patches for this modal, the
         bundle's native classes (text-lg name, text-[20px] price,
         w-12 photo bumped to w-24 in our i1) render the predict
         look once nothing else interferes. */

      /* Wallet-history row title — keep on a single line WITHOUT
         truncation. The bundle renders rows via the `l8` component
         (index-p7V068-24.js:151227) with `text-lg font-semibold` (17 px)
         and no whitespace control, so titles like "2858 Telegram Stars"
         wrap onto a second line under the typical mobile row budget
         (~140-160 px for the title column once icon + amount take their
         share). Buyer is explicit: "без сокращений, без троеточий,
         без переносов. Грамотно!".

         The earlier truncate-with-ellipsis fix violated the directive
         (showed "2858 Telegram St…"). Switch to font-size shrink: drop
         the title to 15 px, which fits "2858 Telegram Stars" (~155 px
         at 15 px Semibold) inside the column without any clip. Long
         premium titles get a separate backend-side compaction (see
         profile_service.py / thermos_frontend_adapter.py) so this rule
         doesn't have to handle 26-char strings on its own. Line height
         drops to 19 px to match the slightly smaller font. No
         overflow/ellipsis rule — if a title ever exceeds the column it
         pushes the amount column wider rather than being cut off,
         which the buyer prefers over visible truncation. */
      .flex.justify-between.items-center.gap-3.flex-1.py-3.min-h-\[64px\] {
        min-width: 0;
      }
      .flex.justify-between.items-center.gap-3.flex-1.py-3.min-h-\[64px\] > div:first-child {
        min-width: 0 !important;
        flex: 1 1 auto !important;
      }
      .flex.justify-between.items-center.gap-3.flex-1.py-3.min-h-\[64px\] > div:first-child > .text-lg.font-semibold {
        font-size: 15px !important;
        line-height: 19px !important;
        white-space: nowrap !important;
      }

      /* History-row gift icons (and any other 48 px squircle
         thumbnail in a list row): when the user clicks a row in the
         deposit-drawer history list, a sub-drawer (gift detail)
         opens. The bundle ships these tiny thumbnails with
         `transition: all` AND `flex-shrink: 1`, so any layout
         change the parent emits during the sub-drawer open
         animation is visibly animated as the thumbnail shrinking,
         then growing back when the sub-drawer closes. The image's
         box-size doesn't actually change — the visible
         "сжимается → разжимается" is purely an animation artifact.
         Locking flex-shrink and disabling the transition on the 48
         px squircle thumbnail (and any nested `<img>`) freezes the
         thumbnail at its rendered 48x48 box for the entire
         transition. Targeted by the exact `w-12 h-12` size so the
         catalog's larger card images (`w-full` etc.) keep their
         own transitions. */
      [class*="squircle"][class*="w-12"][class*="h-12"],
      [class*="squircle"][class*="w-12"][class*="h-12"] > img,
      [class*="squircle"][class*="w-12"][class*="h-12"] img.object-cover {
        flex-shrink: 0 !important;
        transition: none !important;
      }

      /* Buyer ask 2026-05-17: transaction-detail icon for a gift purchase
         (Покупка подарка) renders the heart-bow PNG inside a dark
         bg-secondary squircle wrapper + a small shopping-cart badge at
         the bottom-right. Predict's design didn't have the dark ring —
         the user reads it as "круглая хуйня" because squircle-[44px]
         on an 84 px box is ~52 % radius (effectively a circle), and
         the cart badge sits on top of the photo. Strip the dark fill
         AND hide the cart-glyph badge for the NFT/gift-buy variant.
         Other transaction types (cashback_earn, deposit, etc.) keep
         their dark squircle + badge so visual parity with predict's
         other detail screens is preserved.
         The selector relies on the `data-gp-tx-detail-nft="1"` marker
         the JS shim stamps onto the wrapper when it detects an <img>
         child (i.e. the photo branch). Using a data attribute instead
         of CSS `:has(img)` so it works on older Telegram WebViews
         (some Android builds still ship Chromium < 105 which has no
         `:has()` support — the rule would silently no-op there). */
      /* OWNER 2026-05-18 (round 3 correction): keep the dark squircle
         plate AND the corner badge on every transaction-detail variant
         including NFT/gift-buy. Buyer's revised spec is "везде должна
         быть область … в каждой покупке, пополнении, везде". The old
         rule that stripped the plate for NFT detail is removed so the
         plate stays at its natural `bg-secondary` (#282727) regardless
         of icon type. The JS marker IIFE is left in place because
         removing it is unnecessary noise — the `data-gp-tx-detail-nft`
         attribute is now harmless (no CSS consumer). */

/* SPEC 2026-05-09 (Issue 7): cart-page top pills (rouble-balance +
 * topup) MUST be interactive — user explicitly flagged them as
 * "не работают кнопки баланса и кешбека". Earlier patch made them
 * inert (assuming predict-style informational chips); reverting so
 * the bundle's native click handlers fire — tapping the topup pill
 * opens the deposit drawer, the balance pill opens the balance
 * detail. Empty rule kept so the comment archive isn't lost. */

/* Transaction-details headline tile icon renders looking square in
 * our build. The bundle ships an 84x84 wrapper as
 *   `bg-secondary w-21 h-21 squircle-[44px] text-white`
 * (see index-p7V068-5.js:153292 — the `gmt` component used by the
 * `bmt` /transaction-details route). The Tailwind `squircle-[44px]`
 * class maps to `border-radius: 44px` in browsers without
 * `corner-shape: squircle` support, and to `corner-shape: squircle;
 * border-radius: 70px` when supported. On an 84-px box the un-squircle
 * fallback (44 px ≈ half) reads as a flat-cornered rounded rectangle —
 * what the buyer flagged as "квадратные" next to predict's same icon
 * which renders as a round avatar.
 *
 * Earlier this rule targeted `.squircle-2xl.squircle-xl`, classes
 * that don't appear on this element at all (the bundle uses
 * `squircle-[44px]` only). The selector never matched and the rule
 * was a no-op for the past ~weeks — exactly what the buyer is
 * complaining about now. Fix: target the real class chain and force
 * `border-radius: 50%` so the wrapper renders as a perfect circle
 * regardless of whether `corner-shape: squircle` is honoured by the
 * current browser/transform context.
 *
 * Also widened to `[class*="squircle-"]` for any sibling tile/photo
 * the bundle may add on this route — keeps the rule from drifting
 * stale the next time the bundle is rebuilt with a different
 * squircle-* token. */
/* The transaction-details outer icon container uses
 *   `bg-secondary w-21 h-21 squircle-[44px]`
 * (index-p7V068-5.js:153294 — the `gmt` component). The actual root
 * cause for "картинки квадратные" wasn't this container's shape — the
 * bundle's `squircle-[44px]` already maps to `border-radius: 44px`
 * (or `corner-shape: squircle; border-radius: 70px` when supported)
 * which clamps to a perfect circle on an 84-px box. The square the
 * buyer was seeing came from the `padding: 8% !important` rule that
 * used to live on the inner `<img>` (rolled back above) — the padded
 * image content sat as a square in the centre of the rounded parent
 * while the `overflow: hidden` clip had nothing to bite into.
 *
 * No outer-shape override is needed once the padding rule is gone.
 * The earlier "force border-radius: 50% + corner-shape: round"
 * variant was unwanted (the buyer flagged "нахуя изменил область на
 * круглую, я не просил") — kept this comment as an archive so the
 * next maintainer doesn't re-add it. */

/* /profile — Куплено / Общий объём stat row layout. The bundle ships
   the two stat blocks inside a `flex justify-between` row (the only
   occurrence of that exact class string in the entire bundle), which
   pushes "0 / Куплено" hard-left and "0 ₽ / Общий объём" hard-right
   with empty negative space between them — buyer flagged this as
   "криво некрасиво — по разным сторонам". Predict-style profile
   header has the two stats sitting symmetrically as a centered pair.
   Switch to a 2-column grid where each block is centred within its
   column; the parent already provides the bg/squircle so we just
   re-distribute the children.

   SPEC 2026-05-09: scope dropped from `body[data-gp-route="profile"]`
   to global. The route-pinned variant was breaking on tab transitions
   — when the user navigated AWAY from /profile, `data-gp-route`
   flipped before the profile screen finished its exit animation, the
   rule stopped matching mid-transition, the bundle's native
   `flex justify-between` re-took control, and "Куплено / Общий объём"
   visibly snapped to the edges for a frame. The class chain above is
   unique enough (per the comment) that dropping the route prefix is
   safe and the centred layout now stays through the unmount frame. */
@media (max-width: 640px) {
  body[data-gp-route="transaction-details"] [data-gp-tx-detail-nft="1"],
  body[data-gp-prev-route="transaction-details"] [data-gp-tx-detail-nft="1"],
  body[data-gp-route="transaction-details"] [data-gp-tx-detail-nft="1"] div.relative.overflow-hidden[class*="squircle-"],
  body[data-gp-prev-route="transaction-details"] [data-gp-tx-detail-nft="1"] div.relative.overflow-hidden[class*="squircle-"],
  body[data-gp-route="transaction-details"] [data-gp-tx-detail-nft="1"] div.relative.overflow-hidden[class*="squircle-"] > img,
  body[data-gp-prev-route="transaction-details"] [data-gp-tx-detail-nft="1"] div.relative.overflow-hidden[class*="squircle-"] > img {
    border-radius: 24px !important;
    corner-shape: squircle !important;
  }
}

div.flex.justify-between.items-center.w-full.px-4.py-2:has(> div.flex.flex-col.items-start) {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  justify-items: center !important;
  gap: 8px !important;
}
div.flex.justify-between.items-center.w-full.px-4.py-2:has(> div.flex.flex-col.items-start) > div.flex.flex-col.items-start {
  align-items: center !important;
  text-align: center !important;
}

/* /profile — "647 ₽" stat: bundle ships ₽ as a small muted secondary
   span (text-xs text-muted-foreground) next to the white text-sm number,
   so the symbol looks half-height and grey. Spec: ₽ должен быть того же
   размера и цвета, что и цифра. Match the parent's font size + colour
   so the glyph reads as part of the price.

   SPEC 2026-05-09 (Issue 6): scope dropped from `body[data-gp-route=
   "profile"]` to global. The route-pinned variant was failing during
   profile sub-toggle transitions — when the user toggles the stat
   panel (or navigates briefly off-profile and back), the route
   attribute flipped just long enough for the bundle's native muted
   colouring to flash through, which the user read as "₽ меняет цвет
   с белого на серый". The class chain is already unique enough that
   removing the route prefix is safe. */
span.text-white.font-semibold.text-sm.flex.items-start.gap-1 > span.text-xs.text-muted-foreground {
  font-size: inherit !important;
  color: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

/* /deposit — hide the filter-chip carousel (Баланс / Подарки / Оферы /
   Залоги) and the "История" section header until ACTUAL action rows are
   rendered. The bundle's gate `x = isLoading || hasActiveFilter ||
   v.length > 0` shows the chips during the initial loading skeleton and
   even when the user has zero history, which the user flagged as "якобы
   у тебя история есть когда её нет".

   The action list wrapper (`div.bg-input.glass-shadow.squircle-2xl/[40px]`)
   is only mounted when there are real rows to render, so :has() lets us
   gate visibility on its presence without a runtime patch. The "История"
   header is already gated by `v.length !== 0` in the bundle but it's
   sometimes still visible during the placeholder/loading window — we
   bind it to the same gate for consistency. */
body[data-gp-route="deposit"] div.flex.flex-col.pb-4.pt-2.flex-1:not(:has(> div.bg-input.glass-shadow)) > div.py-2.sticky.top-0,
body[data-gp-route="deposit"] div.flex.flex-col.pb-4.pt-2.flex-1:not(:has(> div.bg-input.glass-shadow)) > div.text-xl.font-semibold.mb-2 {
  display: none !important;
}

/* SPEC 2026-05-09 (Issue 9 — second pass): visibility:hidden
 * approach removed; was producing a visible flash and didn't
 * fully suppress the outgoing-content jerk. Replaced by the
 * page-transition fade approach below (no scroll-snap involved). */

/* SPEC 2026-05-09 (Issue 8): cart per-item price pills are bundle
 * <button>s with a press-scale animation, but they have no useful
 * action — tapping them just highlights briefly. User flagged this
 * as "функциональные кнопки с ценой … не должны иметь никаких
 * анимаций и тем более функционала." Render them as inert chips:
 * pointer-events off (kills the click + the press-scale), cursor
 * default. Scoped to /cart and to the green-primary pill class so
 * the row-level checkbox button (role="checkbox", neutral colour)
 * keeps working — only the per-item green price chip is neutered. */
body[data-gp-route="cart"] [class*="bg-secondary-60"] button[class*="bg-primary"]:not([role="checkbox"]) {
  pointer-events: none !important;
  cursor: default !important;
}

/* OWNER 2026-05-18: empty-state placeholder ("Подарки не найдены" +
   "Сбросить фильтры", "Корзина пуста", "В избранных пока пусто", и т.п.)
   uses the bundle's `fi` placeholder component (~126522). Its
   `useLayoutEffect` writes inline styles on `#scroller.scrollable`:
       el.style.overflow = "hidden";
       el.style.overflowY = "hidden";
       el.style.overflowX = "hidden";
       el.style.touchAction = "none";
       el.style.overscrollBehavior = "none";
   That locks scroll while the placeholder is up. Buyer report:
   "когда подарков нет … я не могу скролить вниз. типа не дает." —
   on short viewports the bottom-nav can sit below the visible area and
   the lock leaves the user with no way to reach it. External rules
   marked `!important` outrank inline declarations (which are NOT marked
   `!important` by `fi`), so re-enabling scroll here cleanly overrides
   the inline lock without monkey-patching the component. The pull-to-
   refresh handler (Dpt ~172400) keys off `scrollTop<=0`, which stays
   correct on a non-overflowing page (only fires when the user actually
   pulls), so this doesn't break refresh UX. */
#scroller.scrollable {
  overflow-y: auto !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: auto !important;
}

/* Vaul drawer ships an iOS-style "card stack" effect: when a drawer
   opens it applies inline `transform: scale(0.94) translate3d(...)` +
   `border-radius: 8px` to the wrapping `[data-vaul-drawer-wrapper]`
   (see index-p7V068-5.js ~107847). The scale transform corrupts the
   `corner-shape: squircle` rendering of every squircle card inside
   the wrapper — every history row, every NFT card, every list item
   inside the active scroll container — making them visually
   "превращаются в квадрат" (lose their rounded/squircle corners and
   look like raw rectangles) for the duration of the drawer animation.
   Vaul's own JS sets these inline styles with `transition: "none"`
   and bumps them every pointer/mutation tick, so the only safe way
   to neutralise is a stylesheet rule with !important — that beats
   the inline declaration without `!important` that Vaul installs.
   The drawer itself (`[data-vaul-drawer]`) is a separate element and
   keeps its own slide-up animation. */
[data-vaul-drawer-wrapper] {
  transform: none !important;
  border-radius: 0 !important;
}
/*!
 * GiftPay resale-overlay styles — scoped to body[data-gp-route="funpay"]
 * and body[data-gp-route="play"].
 *
 * Each rule strips one piece of the bundle's standard marketplace
 * chrome that doesn't belong on a "find this gift on FunPay/Playerok"
 * landing page. Selectors are based on real bundle Tailwind class
 * signatures inspected in the browser, not assumptions about
 * CSS-modules naming.
 */

/* === 1. Top-left coin (cashback) pill =============================
   The bundle paints a `bg-gold/15` rounded squircle pill at the very
   top-left corner showing the user's cashback coin balance. On
   resale routes there's no balance — kill it. */
body[data-gp-route="funpay"] div.flex.items-center.gap-2.font-bold.bg-gold\/15.rounded-xl.p-2.cursor-pointer.glass-shadow,
body[data-gp-route="play"] div.flex.items-center.gap-2.font-bold.bg-gold\/15.rounded-xl.p-2.cursor-pointer.glass-shadow {
  display: none !important;
}

/* === 2. Top-right deposit (+ ₽) pill ==============================
   The header's right-aligned deposit affordance: a `bg-primary/15`
   rounded-full button showing the user's wallet balance + a "+" coin
   that opens the topup drawer. We only want to hide the HEADER
   instance — there's an identical-shape floating basket pill
   (handled below) that lives at fixed bottom-right. Scope by
   ancestor: must be inside the page header, NOT inside a `.fixed`
   wrapper at the page bottom. */
body[data-gp-route="funpay"] header button.bg-primary\/15.rounded-full,
body[data-gp-route="play"] header button.bg-primary\/15.rounded-full,
body[data-gp-route="funpay"] div:not(.fixed) > button.flex.items-center.gap-2.font-bold.bg-primary\/15.glass-shadow.rounded-full.p-2,
body[data-gp-route="play"] div:not(.fixed) > button.flex.items-center.gap-2.font-bold.bg-primary\/15.glass-shadow.rounded-full.p-2 {
  display: none !important;
}

/* === 3. Bottom navigation ========================================
   Bundle's bottom nav wrapper: `<div class="fixed left-0 bottom-0
   z-20 w-full">` hosts the НФТ/Звёзды tab bar. Single match. */
body[data-gp-route="funpay"] div.fixed.left-0.bottom-0.z-20.w-full,
body[data-gp-route="play"] div.fixed.left-0.bottom-0.z-20.w-full {
  display: none !important;
}

/* === 4. Floating basket pill =====================================
   The "19 600 ₽ / 9 подарков" white pill at fixed bottom-right
   (`<div class="fixed right-[14px] z-[20]">`). Only one floating
   pill matches that exact selector pair. */
body[data-gp-route="funpay"] div.fixed.right-\[14px\].z-\[20\],
body[data-gp-route="play"] div.fixed.right-\[14px\].z-\[20\] {
  display: none !important;
}

/* === 5. Per-card basket icon button ==============================
   Each card renders a small icon-only basket button next to the
   price pill ("add to cart" affordance). Spec calls for it to go
   away on resale routes — only the card-level click into the
   detail drawer stays.
   Scope by parent: must live inside a gift card root
   (`.bg-secondary/65.cursor-pointer.flex.flex-col`) so we don't
   accidentally hit the search-bar's filter / sort / expand icons
   (also `data-slot="button"` rounded-full, but mounted in the
   page header, not inside a card). */
body[data-gp-route="funpay"] div.bg-secondary\/65.cursor-pointer.flex.flex-col [data-slot="button"].rounded-full.font-medium,
body[data-gp-route="play"] div.bg-secondary\/65.cursor-pointer.flex.flex-col [data-slot="button"].rounded-full.font-medium {
  display: none !important;
}

/* === 5b. Per-card price pill — visible but inert ===================
   Buyer spec for resale routes: "вся карточка это единая кнопка
   перехода в менюшку нфт. нет отдельной кнопки функционал зеленой
   для покупки. одна большая кнопка включая и кнопку зеленую и фотки
   и название - все переводит в менюшку нфт". The green per-card
   "523 ₽" pill stays visually present (it shows the price, which is
   useful in the grid), but its click MUST flow up to the card root
   so predict's onCardClick opens the gift-detail drawer. Without
   pointer-events:none here the bundle's onClick on the pill (a
   different action — usually add-to-cart or open-buy-modal) fires
   first and the buyer never sees the detail drawer. The card root
   `div.bg-secondary/65.cursor-pointer.flex.flex-col` already
   carries the React click handler that opens the drawer, so the
   click landing on the card div behind the inert pill is enough. */
body[data-gp-route="funpay"] div.bg-secondary\/65.cursor-pointer.flex.flex-col [data-slot="button"].bg-primary,
body[data-gp-route="play"] div.bg-secondary\/65.cursor-pointer.flex.flex-col [data-slot="button"].bg-primary {
  pointer-events: none !important;
}

/* === 6. Detail-drawer cashback row ================================
   Bundle's gift-detail drawer renders the cashback summary as:
     <div class="flex justify-between font-normal text-sm">
       <div class="cursor-pointer">
         <span class="text-secondary-foreground">Кэшбэк <svg.../></span>
       </div>
       <!-- right-side coin badge -->
     </div>
   The `<svg>` next to the "Кэшбэк" label is the info-icon — no
   other row in the drawer (Модель / Фон / Символ / Награда /
   Минимальная цена) renders an inline SVG inside the text-secondary
   foreground span, so `:has()` on that signature uniquely targets
   the cashback row. */
body[data-gp-route="funpay"] [data-vaul-drawer][data-state="open"]
  div.flex.justify-between.font-normal.text-sm:has(> .cursor-pointer > .text-secondary-foreground > svg),
body[data-gp-route="play"] [data-vaul-drawer][data-state="open"]
  div.flex.justify-between.font-normal.text-sm:has(> .cursor-pointer > .text-secondary-foreground > svg),
body[data-gp-route="funpay"] [role="dialog"][data-state="open"]
  div.flex.justify-between.font-normal.text-sm:has(> .cursor-pointer > .text-secondary-foreground > svg),
body[data-gp-route="play"] [role="dialog"][data-state="open"]
  div.flex.justify-between.font-normal.text-sm:has(> .cursor-pointer > .text-secondary-foreground > svg) {
  display: none !important;
}

/* === 7. Detail-drawer share button ===============================
   The bundle's Krt component renders a Share affordance in the
   `topSlot` overlay above the gift photo. Same selector shape used
   by the existing transaction-details share-hide rule in
   route-fixes.css, scoped to resale routes. */
body[data-gp-route="funpay"] [data-vaul-drawer][data-state="open"]
  .absolute.w-full.z-2.flex.flex-col.items-end button,
body[data-gp-route="play"] [data-vaul-drawer][data-state="open"]
  .absolute.w-full.z-2.flex.flex-col.items-end button,
body[data-gp-route="funpay"] [data-vaul-drawer][data-state="open"]
  button.bg-secondary\/15,
body[data-gp-route="play"] [data-vaul-drawer][data-state="open"]
  button.bg-secondary\/15,
body[data-gp-route="funpay"] [role="dialog"][data-state="open"]
  .absolute.w-full.z-2.flex.flex-col.items-end button,
body[data-gp-route="play"] [role="dialog"][data-state="open"]
  .absolute.w-full.z-2.flex.flex-col.items-end button {
  display: none !important;
}

/* === 8. Cart-quantity slider — neutered ==========================
   Spec item 7: "пусть просто не работает, типа да его можно будет
   двигать, но он ничего не даст". The detail drawer ships a slider;
   we leave the visual but kill its pointer-events. */
body[data-gp-route="funpay"] [data-vaul-drawer][data-state="open"] [role="slider"],
body[data-gp-route="play"] [data-vaul-drawer][data-state="open"] [role="slider"],
body[data-gp-route="funpay"] [data-vaul-drawer][data-state="open"] [data-slot="slider"],
body[data-gp-route="play"] [data-vaul-drawer][data-state="open"] [data-slot="slider"],
body[data-gp-route="funpay"] [role="dialog"][data-state="open"] [role="slider"],
body[data-gp-route="play"] [role="dialog"][data-state="open"] [role="slider"] {
  pointer-events: none !important;
  cursor: default !important;
}

/* === 9. Banner image swap fallback ================================
   The JS shim rewrites the carousel <img>'s `src` to the route's
   own banner.webp. If the JS fails to mount in time this CSS
   fallback paints the route banner via `content:url()`. */
body[data-gp-route="funpay"]
  [data-slot="carousel"].relative.px-4.mb-3.z-11
  [data-slot="carousel-item"] > div > img:not([data-gp-resale-banner-swapped="1"]) {
  content: url("/assets/funpay-banner.webp");
}
body[data-gp-route="play"]
  [data-slot="carousel"].relative.px-4.mb-3.z-11
  [data-slot="carousel-item"] > div > img:not([data-gp-resale-banner-swapped="1"]) {
  content: url("/assets/playerok-banner.webp");
}

/* === 10. Banner click affordance ==================================
   The base route-fixes.css disables the bundle's onClick on the home
   banner with `pointer-events: none`. Restore pointer-events on
   /funpay so our capture-phase listener can intercept the click and
   redirect to ROUTES.funpay.externalUrl (the FunPay account). /play
   is intentionally LEFT inert (externalUrl is null) — the global home-
   banner-inert rule keeps applying there. */
body[data-gp-route="funpay"]
  [data-slot="carousel"].relative.px-4.mb-3.z-11 [data-slot="carousel-item"] > div.cursor-pointer {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* === 12. Symmetric breathing room around banner ===================
   The page wrapper's pt evaluates to 0 on resale routes (the bundle
   pre-seeds --tg-viewport-safe-area-inset-top to -30px to cancel the
   +30px in calc), so without any compensation the banner's rounded
   TOP corners flush against the viewport edge — flagged as
   "обрезается чутка, видишь круглешок".

   The sibling header bar (`flex justify-between items-center mb-3
   px-4 pt-4 relative z-12`) normally holds the gold/balance pills,
   but rules 5-6 above hide those pills on resale routes. Without
   visible children the bar still occupies 16px (pt-4) + 12px (mb-3)
   = 28px of dead space above the banner. Combined with the carousel's
   own mt that totaled 44px of dark space above vs only 12px (mb-3)
   below — the user flagged the asymmetry.

   Fix: collapse the empty header bar and equalise the carousel's
   own mt/mb to 16px on each side. Banner now sits with matching
   dark bands top and bottom. */
body[data-gp-route="funpay"] div.flex.justify-between.items-center.mb-3.px-4.pt-4.relative.z-12,
body[data-gp-route="play"] div.flex.justify-between.items-center.mb-3.px-4.pt-4.relative.z-12 {
  display: none !important;
}
body[data-gp-route="funpay"] [data-slot="carousel"].relative.px-4.mb-3.z-11,
body[data-gp-route="play"] [data-slot="carousel"].relative.px-4.mb-3.z-11 {
  /* Top gap = mt only. Bottom gap = mb + the search bar's own py-2
     (8px) inside its sticky wrapper. Pad mt by an extra 8px so the
     visible dark bands above and below the banner both come out to
     24px. */
  margin-top: 24px !important;
  margin-bottom: 16px !important;
}

/* === 15. Hide fast-sell promo cards on resale routes ============
   Bundle injects a "fast_sell_first_offer / fast_sell_create"
   promo card into the home grid for collections without an
   active first offer (see index-p7V068-5.js:127141 cit + 127191
   dit components). Our build doesn't ship the seller-side i18n
   keys, so the card renders with raw key strings as text — the
   buyer flagged it as "что это за бред". On resale routes
   (/funpay, /play) the seller flow is irrelevant anyway,
   so kill the card. Selector matches both component variants
   by their unique bg-* color tokens (no other home-grid card
   uses these bg-[#15AA303D] / bg-[#49DF641F] classes). */
body[data-gp-route="funpay"] div.glass-shadow.rounded-3xl.overflow-hidden.bg-\[\#15AA303D\],
body[data-gp-route="funpay"] div.glass-shadow.squircle-3xl.overflow-hidden.bg-\[\#49DF641F\],
body[data-gp-route="play"] div.glass-shadow.rounded-3xl.overflow-hidden.bg-\[\#15AA303D\],
body[data-gp-route="play"] div.glass-shadow.squircle-3xl.overflow-hidden.bg-\[\#49DF641F\] {
  display: none !important;
}
/* Same card variants are also rendered as ancestors with no
   inner content when collection state is "stale". Catch the
   wrapper that contains the raw i18n key strings as a defensive
   second layer. */
body[data-gp-route="funpay"] *:has(> p:only-child),
body[data-gp-route="play"] *:has(> p:only-child) {
  /* no-op placeholder — the :has rule above is too broad to use
     directly; left here as documentation that further narrowing
     would happen here if the bg-color rule misses an instance. */
}

/* === 17. Bonus UI must not show on resale routes ==================
   The NFT-discount bonus is bound to the buyer's Telegram account
   and settles through GiftPay's own checkout. /funpay and /play
   redirect to external marketplaces — any "%" sticker, strikethrough,
   or floating chip there would be misleading (the discount cannot
   apply to a FunPay/Playerok purchase). The JS overlays already gate
   themselves on these routes; this is a CSS belt for the brief
   window between mount and first sync. */
body[data-gp-route="funpay"] #gp-active-bonus-chip,
body[data-gp-route="play"] #gp-active-bonus-chip,
body[data-gp-route="funpay"] .gp-bonus-pct-badge,
body[data-gp-route="play"] .gp-bonus-pct-badge {
  display: none !important;
}

/* === 16. Suppress the React ErrorBoundary "Something went wrong"
   fallback banner ===============================================
   index-p7V068-5.js:87661 ships `vFe`, a full-screen
   `<div class="w-full h-screen flex justify-center items-center
   text-xl font-semibold">Something went wrong</div>` that the
   ErrorBoundary `tse` falls back to when any descendant throws.
   In our build it flashes for ~1 frame during initial load when
   framer-motion or react-query trips a transient render error
   (the ErrorBoundary auto-recovers on the next render via
   `resetErrorBoundary`). The flash was reported as "сзади пишет
   Something went wrong и длинный какой то текст который потом
   резко пропадает". Hide the fallback so transient errors don't
   leak to the buyer; React still recovers normally. */
div.w-full.h-screen.flex.justify-center.items-center.text-xl.font-semibold {
  display: none !important;
}

/* === 14. Drawer name overlay — strip click affordance ============
   The bundle wraps the gift's collection name + #id under the photo
   in `<div class="absolute left-0 bottom-0 w-full z-[2] flex flex-col
   items-center pb-3 font-semibold cursor-pointer">` whose onClick
   navigates to /my-offers?tab=collections (the seller-side flow).
   The buyer flagged this as wrong: "просто кликнул по названию
   подарка в его меню и … меня перекинуло в этот раздел который я
   удалил". Kill the click + the cursor affordance entirely on resale
   routes so the name is plain decorative text. */
body[data-gp-route="funpay"] [data-vaul-drawer][data-state="open"] div.absolute.left-0.bottom-0.w-full.z-\[2\].flex.flex-col.items-center.pb-3.font-semibold,
body[data-gp-route="play"] [data-vaul-drawer][data-state="open"] div.absolute.left-0.bottom-0.w-full.z-\[2\].flex.flex-col.items-center.pb-3.font-semibold,
body[data-gp-route="funpay"] [role="dialog"][data-state="open"] div.absolute.left-0.bottom-0.w-full.z-\[2\].flex.flex-col.items-center.pb-3.font-semibold,
body[data-gp-route="play"] [role="dialog"][data-state="open"] div.absolute.left-0.bottom-0.w-full.z-\[2\].flex.flex-col.items-center.pb-3.font-semibold {
  pointer-events: auto !important;
  cursor: pointer !important;
  -webkit-user-select: text !important;
  user-select: text !important;
}
/* OWNER 2026-05-23: «должно выделяться (мочь) сугубо номер!!!!»
   Раньше тут стоял `*` — выделение разрешалось всему внутри блока
   (и названию «Xmas Stocking» и номеру «#21180»). Юзер скриншотом
   показал, что название тоже выделяется — он этого не хочет.
   Разделяем правило: для `.text-sm` (номер #NNNNN) оставляем
   выделение, для `.text-xl` (название) и любых других дочерних
   элементов — запрещаем. */
body[data-gp-route="funpay"] [data-vaul-drawer][data-state="open"] div.absolute.left-0.bottom-0.w-full.z-\[2\].flex.flex-col.items-center.pb-3.font-semibold > .text-sm,
body[data-gp-route="play"] [data-vaul-drawer][data-state="open"] div.absolute.left-0.bottom-0.w-full.z-\[2\].flex.flex-col.items-center.pb-3.font-semibold > .text-sm,
body[data-gp-route="funpay"] [role="dialog"][data-state="open"] div.absolute.left-0.bottom-0.w-full.z-\[2\].flex.flex-col.items-center.pb-3.font-semibold > .text-sm,
body[data-gp-route="play"] [role="dialog"][data-state="open"] div.absolute.left-0.bottom-0.w-full.z-\[2\].flex.flex-col.items-center.pb-3.font-semibold > .text-sm {
  -webkit-user-select: text !important;
  user-select: text !important;
  cursor: text !important;
}
body[data-gp-route="funpay"] [data-vaul-drawer][data-state="open"] div.absolute.left-0.bottom-0.w-full.z-\[2\].flex.flex-col.items-center.pb-3.font-semibold > .text-xl,
body[data-gp-route="play"] [data-vaul-drawer][data-state="open"] div.absolute.left-0.bottom-0.w-full.z-\[2\].flex.flex-col.items-center.pb-3.font-semibold > .text-xl,
body[data-gp-route="funpay"] [role="dialog"][data-state="open"] div.absolute.left-0.bottom-0.w-full.z-\[2\].flex.flex-col.items-center.pb-3.font-semibold > .text-xl,
body[data-gp-route="play"] [role="dialog"][data-state="open"] div.absolute.left-0.bottom-0.w-full.z-\[2\].flex.flex-col.items-center.pb-3.font-semibold > .text-xl {
  -webkit-user-select: none !important;
  user-select: none !important;
  cursor: default !important;
}
/* The chevron next to the gift name is the legacy "open collection"
   affordance — buyer wants it gone. The SVG sits inside the gift-name
   div with rotate-90 + size-3 + text-white/70 classes. Hide it on
   resale routes (the click is already swallowed below). */
body[data-gp-route="funpay"] [data-vaul-drawer][data-state="open"] div.absolute.left-0.bottom-0.w-full.z-\[2\].flex.flex-col.items-center.pb-3.font-semibold svg.rotate-90,
body[data-gp-route="play"] [data-vaul-drawer][data-state="open"] div.absolute.left-0.bottom-0.w-full.z-\[2\].flex.flex-col.items-center.pb-3.font-semibold svg.rotate-90,
body[data-gp-route="funpay"] [role="dialog"][data-state="open"] div.absolute.left-0.bottom-0.w-full.z-\[2\].flex.flex-col.items-center.pb-3.font-semibold svg.rotate-90,
body[data-gp-route="play"] [role="dialog"][data-state="open"] div.absolute.left-0.bottom-0.w-full.z-\[2\].flex.flex-col.items-center.pb-3.font-semibold svg.rotate-90 {
  display: none !important;
}

/* Trait-chip clicks (Pine Cone / Lavender / Feather styled as
   primary-color underlined spans) ALSO navigate into the inventory
   filter view that's no longer plumbed in our build. Same neutering. */
body[data-gp-route="funpay"] [data-vaul-drawer][data-state="open"] span.text-primary.font-bold.cursor-pointer,
body[data-gp-route="play"] [data-vaul-drawer][data-state="open"] span.text-primary.font-bold.cursor-pointer,
body[data-gp-route="funpay"] [role="dialog"][data-state="open"] span.text-primary.font-bold.cursor-pointer,
body[data-gp-route="play"] [role="dialog"][data-state="open"] span.text-primary.font-bold.cursor-pointer {
  pointer-events: none !important;
  cursor: default !important;
  color: var(--primary) !important;
  text-decoration: none !important;
}

/* === 11. Buy CTA — pinned dimensions across thermos states ========
   The detail-drawer "Купить подарок" button cycles through three
   states (spinner → price OR sold). Without a pinned min-height the
   button visibly resizes when its content swaps:
     spinner → just a 22px circle, button shrinks
     price   → big-price layout, button grows
     sold    → single-line label, mid-size
   Pin a uniform min-height + center the contents so all three
   states look identical from the buyer's perspective. The bundle's
   own price-button height is ~52px on mobile and ~56px on desktop;
   we land at 56px to clear the two-line price comfortably. */
button[data-gp-resale-thermos] {
  min-height: 56px !important;
  height: 56px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* === 11b. Buy CTA — fully inert on /play ONLY ==================
   Spec for /play: banner + buy CTA are visual-only (externalUrl is
   null, captureHandler no-ops). Strip the visual hover/cursor so the
   button reads as look-but-don't-touch. /funpay is INTENTIONALLY NOT
   in this rule — its buy CTA must redirect to the FunPay account
   (ROUTES.funpay.externalUrl), so it needs to remain interactive. */
body[data-gp-route="play"] [data-vaul-drawer][data-state="open"] button[data-gp-resale-thermos],
body[data-gp-route="play"] [role="dialog"][data-state="open"]      button[data-gp-resale-thermos] {
  pointer-events: none !important;
  cursor: default !important;
}

/* Price row inside the buy CTA: number + ₽ aligned to the same optical
   baseline. The ruble glyph in Inter sits ~1px higher than digits at
   matching font-size; flex-baseline of the row + uniform 1em line-height
   on each child eliminates that drift. */
button[data-gp-resale-thermos="price"] .gp-resale-price-row {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.18em;
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: 0;
  font-size: clamp(18px, 5.2vw, 26px);
  line-height: 1;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  /* OWNER 2026-05-18: was `overflow: hidden`, which clipped the bottom
     of the ₽ SVG (path goes to y=25.39 inside a 7..25.6 viewBox AND
     stroke-width=1.4 adds ±0.7 units past the path bounds — the
     bottom round-cap of the glyph fell ~0.5 units outside the
     viewBox AND the row's hidden overflow truncated whatever crept
     past the line-height: 1 box). Allow Y-overflow so the stroked
     glyph renders complete; keep X-overflow hidden so a long number
     can't widen the pill. */
  overflow-x: hidden;
  overflow-y: visible;
  text-align: center;
}
button[data-gp-resale-thermos="price"] .gp-resale-price-num {
  display: inline-block;
  line-height: 1;
  font-size: inherit;
  font-weight: inherit;
}
/* ₽ is rendered as an inline SVG (see paintPrice in index-p7V068-24.js)
   so the glyph stays pixel-identical to the digit's design across
   platforms; without this SFProText woff2 falls back inconsistently
   for ₽ vs digits at heavy weights. */
button[data-gp-resale-thermos="price"] .gp-resale-price-cur {
  display: inline-block;
  height: 0.78em;
  /* OWNER 2026-05-18 (round 3): paintPrice viewBox widened from
     `8.5 7 15 18.6` (aspect 0.806) to `8 6 16 20` (aspect 0.8) so the
     stroke-width=1.4 outline isn't clipped to a flat-bottomed ₽. Match
     the CSS width to the new aspect so the glyph keeps its proportions.
     Plus `overflow: visible` belt-and-suspenders — clamp browsers
     ignore the SVG-attribute change. */
  width: calc(0.78em * 16 / 20);
  flex-shrink: 0;
  color: currentColor;
  vertical-align: baseline;
  transform: translateY(0.02em);
  overflow: visible;
}

/* OWNER 2026-05-23 (round 3): «если кнопка неактивная она у нас
   темно зеленая в проекте а не серая». Стандартный disabled-look
   в дизайн-системе — `bg-primary` (var(--primary) = #22c55e) с
   `disabled:opacity-50` (см. ~line 4534 в index-p7V068-24.js,
   line 141607 «dim green CTA»). Применяем тот же визуальный
   результат к спиннеру = «идёт проверка, временно некликабельно»:
   color-mix даёт точно тот цвет, что получается у opacity:0.5
   layer'а над #141414 — без потери чёткости spinner glyph'а
   (opacity:1 на самом элементе сохраняем). Fallback `#1b6c39`
   на случай браузеров без color-mix совпадает с вычисленным
   значением. Серый (#4a4a4a) был ошибкой round'а 2 — в проекте
   серое = «Sold» (final), не «checking». */
button[data-gp-resale-thermos="spinner"],
button[data-gp-resale-thermos="spinner"]:hover,
button[data-gp-resale-thermos="spinner"]:focus,
button[data-gp-resale-thermos="spinner"]:active,
button[data-gp-resale-thermos="spinner"]:focus-visible {
  background-color: #1b6c39 !important;
  background-color: color-mix(in oklab, var(--primary) 50%, var(--background)) !important;
  background-image: none !important;
  color: #ffffff !important;
  pointer-events: none !important;
  cursor: default !important;
  opacity: 1 !important;
  filter: none !important;
  transition: none !important;
}

/* OWNER 2026-05-18: "убери подсвечивание наведения" — keep the price
   button's bg color identical on hover/focus/active so the buyer
   doesn't see a green-darken animation when the cursor crosses it. The
   bundle uses Tailwind's hover:bg-primary/90 (≈ 10% darker) on the
   underlying button class chain; pin the background to var(--primary)
   in all interaction states to suppress that. */
button[data-gp-resale-thermos="price"],
button[data-gp-resale-thermos="price"]:hover,
button[data-gp-resale-thermos="price"]:focus,
button[data-gp-resale-thermos="price"]:active,
button[data-gp-resale-thermos="price"]:focus-visible {
  background-color: var(--primary) !important;
  background-image: none !important;
  filter: none !important;
  opacity: 1 !important;
  transition: none !important;
}

/* "Sold" state — grey, disabled, no-go affordance. Override the
   bundle's bg-primary green completely. */
button[data-gp-resale-thermos="sold"] {
  background-color: #4a4a4a !important;
  background-image: none !important;
  color: #d0d0d0 !important;
  pointer-events: none !important;
  cursor: default !important;
  opacity: 1 !important;
}

/* Spinner state — keep button visually identical to price/sold,
   just centred spinner. */
button[data-gp-resale-thermos="spinner"] .gp-resale-spinner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* === 13. Sold card overlay — mirrors the bundle's cart "не на
       продаже" treatment 1-to-1 ===============================
   The bundle ships a `Iit` component (index-p7V068-5.js:128312-19)
   that renders a frosted-glass overlay over the gift image inside
   the cart whenever availability comes back as NFT_NOT_LISTED:
     <div class="absolute squircle-2xl overflow-hidden top-0 left-0
                 w-full h-full flex flex-col justify-center
                 items-center gap-1 bg-[#3A3A3AA3] backdrop-blur-[4px]
                 text-center text-xs font-semibold">
       <NFT_NOT_LISTED-icon />
       <div>{t('cart_nft_not_listed')}</div>
     </div>
   The buyer asked for the same look on resale-route home cards
   ("1 в 1 как в корзине"). We inject a real DOM child via JS into
   the card's image wrapper rather than fake it with pseudo-
   elements, since the overlay needs both an SVG icon and a text
   line stacked vertically, which CSS pseudos can't comfortably do.
   The class lives here so changes are easy to grep. */
.gp-resale-sold-overlay {
  position: absolute;
  /* Mirror predict's cart overlay (squircle-2xl + inset:0): the overlay
     takes the parent's exact shape so it covers the full squircle with
     no edge gaps. `border-radius: inherit` doesn't carry corner-shape,
     so the overlay would render as a too-round rectangle inside the
     parent's squircle, leaving thin crescents at the edges. */
  inset: 0;
  border-radius: 26px;
  corner-shape: squircle;
  border-radius: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #3A3A3AA3;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-align: center;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
  color: #ffffff;
  padding: 0 10px;
  pointer-events: none;
  overflow: hidden;
}
[data-gp-resale-sold="1"] {
  cursor: default !important;
}
/* Right-side price pill becomes a grey "Продано" affordance.
   The pill stays mounted (layout slot is preserved) but its
   contents are visually replaced by a ::before pseudo + the
   original text is blacked out via `color: transparent`. */
[data-gp-resale-sold="1"] [data-slot="button"] {
  background-color: #4a4a4a !important;
  background-image: none !important;
  color: transparent !important;
  pointer-events: none !important;
  cursor: default !important;
  position: relative;
  overflow: hidden;
}
[data-gp-resale-sold="1"] [data-slot="button"]::before {
  content: "Продано";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d0d0d0;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2px;
}
/*!
 * GiftPay Telegram-bot landing shim — visual rules.
 *
 * Two narrow concerns:
 *   1. Hide the personal-balance widgets in predict's site header.
 *      The site is a public landing for visitors who haven't signed
 *      in yet, so showing a "0 ₽" green pill and a "0" gold cashback
 *      pill at the top implies they have an empty wallet — which
 *      they don't, they have NO wallet at all on this domain. The
 *      pills also navigate to /top-up / /cashback respectively; with
 *      the drawer-based landing those routes are notification stubs,
 *      not destinations the visitor should be sent to from the
 *      always-visible header. Hide both globally; predict's bundle
 *      keeps using the same header on `/profile` (which we redirect
 *      anyway) so no other route is affected.
 *
 *   2. Make sure the drawer mounted by giftpay-auth.js doesn't get
 *      tab-focused when its transform keeps it 110% off the screen.
 *      Pointer-events are managed in JS but `tabindex` is the more
 *      reliable knob for keyboard users.
 *
 * No fixed-position panels covering route content, no inset-zero
 * overlays, no z-index stacking against the bundle. The earlier
 * auth-card overlay is dead and stays dead.
 */

/* Cashback gold pill on every public-web view (bot-landing + demo).
   Demo mode shows the same `0` gold pill the bot-landing variant
   does — for a guest visitor the `0` reads as "you have no cashback
   here" which is misleading on the public marketing surface. Hide the
   native header pill for both. Real Telegram WebApp users keep it. */
body[data-gp-bot-landing="1"] [data-gp-cashback-pill="header"],
body[data-gp-public-view="1"] [data-gp-cashback-pill="header"] {
  display: none !important;
}

/* Public-web wrapper: `pt-[calc(var(--tg-viewport-safe-area-inset-top)+
   30px)]` evaluates to 0 px in a desktop browser anyway, but pin it
   so a future inset change doesn't reintroduce a top gap above the
   already-hidden header bar. Telegram WebApp (positive inset) is
   untouched. */
body[data-gp-bot-landing="1"] .scrollable.h-screen,
body[data-gp-public-view="1"] .scrollable.h-screen {
  padding-top: 0 !important;
}

/* Page-header bar wrapping the cashback / balance pills. Collapse it
   on every public-web view — both pills are hidden in this variant
   (gold cashback above, ruble balance below), so the bar is just
   dead `pt-4 + mb-3 = 28 px` of vertical waste above the home banner.
   The buyer flagged the resulting top gap as "сверху увеличено
   расстояние и не является таким же 1 в 1 как снизу"; collapsing the
   empty bar lets the banner sit at the carousel's own margin, which
   we then pin symmetric below. */
body[data-gp-bot-landing="1"] .z-12.pt-4,
body[data-gp-public-view="1"] .z-12.pt-4 {
  display: none !important;
}

/* Symmetric breathing room around the home banner on every public-
   web view. With the header bar collapsed, the wrapper's pt evaluates
   to 0; without explicit margin the banner butts straight against
   the viewport edge. The search bar that mounts directly below has
   its own `py-2` (= 8 px) inside its rounded chip, which reads as
   extra empty space below the banner. To make the visible top/bottom
   bands match, top margin = 24 px, bottom margin = 16 px (16 + 8 px
   from the search bar's interior padding = 24 px visible bottom = 24
   px visible top). Buyer flagged the previous symmetric 12 / 12 as
   "сверху такое маленькое расстояние, должно быть как снизу". */
body[data-gp-bot-landing="1"] [data-slot="carousel"].relative.px-4.mb-3.z-11,
body[data-gp-public-view="1"] [data-slot="carousel"].relative.px-4.mb-3.z-11 {
  margin-top: 24px !important;
  margin-bottom: 16px !important;
}

/* Balance ruble pill — `<button class="bg-primary/15 ... rounded-full p-2">`.
   The pill is the only `bg-primary/15` button in the global header so
   the selector is safe; on /stars or /referrals other UI uses
   bg-primary/15 *with different layout* (e.g. inside chips, not the
   header bar). Scope by the rounded-full + p-2 + glass-shadow combo
   so we only hit the pill style. Landing/public-web only — real
   Telegram WebApp users keep their balance pill visible (the buyer
   flagged "никаких балансов покупок кешбека и прочее" inside the
   bot's WebApp, where the pill MUST render). */
body[data-gp-bot-landing="1"] button.bg-primary\/15.glass-shadow.rounded-full.p-2,
body[data-gp-public-view="1"] button.bg-primary\/15.glass-shadow.rounded-full.p-2 {
  display: none !important;
}

/* Cart basket icon next to each gift card price. Predict ships TWO
   visual states: `bg-primary/15` for "already in cart" (filled green
   pill, with `w-9.5 h-8.5` sizing) and `bg-muted` for "add to cart"
   (dark squircle with basket SVG, in a `<div class="shrink-0">`
   wrapper). The landing variant has no cart so both are dead weight;
   hide them so each card shows only the price CTA. The :has() rule
   targets the wrapper div so layout collapses cleanly (using
   display:none on the inner button alone leaves an empty 48-px gap).
   :has() is supported in all browsers Telegram WebView ships in.
   Landing/public-web only — real Telegram users keep "add to cart"
   alongside the price button. */
body[data-gp-bot-landing="1"] div.bg-secondary\/65.cursor-pointer.flex.flex-col button.bg-primary\/15.rounded-full.w-9\.5.h-8\.5,
body[data-gp-public-view="1"] div.bg-secondary\/65.cursor-pointer.flex.flex-col button.bg-primary\/15.rounded-full.w-9\.5.h-8\.5 {
  display: none !important;
}
body[data-gp-bot-landing="1"] div.shrink-0:has(> button.bg-muted.glass-shadow.rounded-full),
body[data-gp-public-view="1"] div.shrink-0:has(> button.bg-muted.glass-shadow.rounded-full) {
  display: none !important;
}

/* Drawer offscreen state shouldn't claim hit-testing. The JS mirrors
   pointerEvents inline, but a visitor with assistive tech could still
   tab into the offscreen content; explicit `tabindex="-1"` on a
   pre-open drawer keeps focus on the page. */
#gp-bot-drawer:not([data-gp-drawer-open]) {
  pointer-events: none;
}

/* Backdrop blur. The plain rgba(0,0,0,0.55) fade left the catalog
   visibly bleeding through behind the drawer; with blur the visitor's
   eye locks onto the drawer content and the "this happens in the bot"
   prompt reads as the active surface, not just a translucent panel
   over the catalog. -webkit- prefix kept for older WebKit (Telegram's
   in-app browser on iOS still ships a non-prefixed-aware build). */
#gp-bot-drawer-backdrop {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Lift route-fixes' non-money visual locks on primary CTAs across the
   bot landing. The balance-block gate stays visible because it protects
   real Telegram sessions that were temporarily mis-marked as landing.
   On the bot landing the buyer flagged
   the gray-green half-state as "почему везде кнопки зелёные, а в
   звёздном подарке серо-зелёный?" — overriding the visual layer
   keeps the marketplace JS untouched while allowing genuine
   insufficient-funds states to remain dimmed. */
body[data-gp-bot-landing="1"] button[data-gp-recipient-block="1"],
body[data-gp-bot-landing="1"] button[data-gp-buy-disabled="1"],
body[data-gp-bot-landing="1"][data-gp-route="stars"] form button[type="submit"]:not([data-gp-balance-block="1"]),
body[data-gp-bot-landing="1"][data-gp-route="premium"] form button[type="submit"]:not([data-gp-balance-block="1"]) {
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Predict's gift-detail drawer dims the buy CTA to a desaturated
   green when the cached balance is below the price (no `disabled`
   attr, just opacity/filter). On bot landing we want the
   CTA fully lit. Real WebApp/demo/public-view sessions keep the balance
   gate visible because `data-gp-public-view` can be a first-tick false
   negative in Telegram. */
body[data-gp-bot-landing="1"] [role="dialog"]:not([data-state="closed"]) button.bg-primary:not([data-gp-balance-block="1"]),
body[data-gp-bot-landing="1"] [data-vaul-drawer]:not([data-state="closed"]) button.bg-primary:not([data-gp-balance-block="1"]),
body[data-gp-bot-landing="1"] [data-radix-dialog-content]:not([data-state="closed"]) button.bg-primary:not([data-gp-balance-block="1"]) {
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
}

/* Cashback row inside the gift-detail drawer. The earlier rule hid
   this row for both `data-gp-bot-landing="1"` (truly anonymous
   visitor) and `data-gp-public-view="1"` (demo guest OR any
   non-real-Telegram surface). The buyer reported "почему не
   показывает сколько кешбека я получу? куда делось?" — bootstrap's
   `hasRealTelegramContext` is computed on the very first tick and
   races with `tgWebAppData` arrival; if the launch params haven't
   been parsed by then, `data-gp-public-view="1"` lands on body and
   never clears even after a real init payload shows up. That made
   the rule fire for legitimately authenticated users and hid their
   cashback line, which is the one piece of info they actually want
   to see on a purchase. Narrow the rule to bot-landing ONLY (the
   genuinely off-account surface — no user, no cashback to compute)
   and drop public-view, so the cashback row is visible everywhere a
   real or demo user is browsing. */
body[data-gp-bot-landing="1"] [role="dialog"] .flex.justify-between:has(> .cursor-pointer > span.text-secondary-foreground),
body[data-gp-bot-landing="1"] [data-vaul-drawer] .flex.justify-between:has(> .cursor-pointer > span.text-secondary-foreground),
body[data-gp-bot-landing="1"] [data-radix-dialog-content] .flex.justify-between:has(> .cursor-pointer > span.text-secondary-foreground) {
  display: none !important;
}

/* Drag handle is a touch target, not just decoration. Wider hit area
   so the visitor's thumb finds it without aiming. */
#gp-bot-drawer [data-gp-drawer-grab] {
  touch-action: none;
  cursor: grab;
}
#gp-bot-drawer [data-gp-drawer-grab]:active { cursor: grabbing; }

/* === LANDING-MODE TRIM 2026-05-13 ===
   On the public-web landing (no real Telegram WebApp context, body
   carries data-gp-public-view="1" and/or data-gp-bot-landing="1"),
   the user's directive is: do NOT show ANY UI whose purpose is
   personal-account state — no balance pill, no profile route, no
   topup, no cashback, no "open in Telegram bot" drawer. Visitors see
   the NFT and Stars catalogs in browse-only mode and that's it.
   Click handlers for transactional CTAs (NFT price buttons, etc.)
   are absorbed by the existing `__gpAuthInstalled` interceptor;
   `openDrawer` was no-op'd in the bundle so the click is silent. */

/* Header balance pill — `bg-primary/15` translucent rounded-full
   button showing "0 ₽". Without a real wallet this is meaningless
   noise. Note: bg-primary/15 chips inside other components (e.g.
   "in cart" state on a card) keep different layout (no rounded-full
   p-2 on a top-level header button), so this selector targets only
   the header pill. */
body[data-gp-public-view="1"] header button.bg-primary\/15.rounded-full,
body[data-gp-bot-landing="1"] header button.bg-primary\/15.rounded-full,
body[data-gp-public-view="1"] > div button.bg-primary\/15.glass-shadow.rounded-full.p-2,
body[data-gp-bot-landing="1"] > div button.bg-primary\/15.glass-shadow.rounded-full.p-2 {
  display: none !important;
}