@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);
}
._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);
}
._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(100dvh - (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,
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 GiftPay 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;
}

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

.fixed.inset-0.z-\[9999\].bg-background.overflow-hidden svg[viewBox="0 0 562 562"] {
  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;
}

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;
}

/* 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;
}

.gp-deposit-switch {
  align-items: center !important;
  justify-content: center !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;
}

/* 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;
}

/* === 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;
      }
      #gp-stars-gifts-section .gp-stars-card-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: rgba(0, 0, 0, 0.18);
      }

      /* Bottom-nav "Звёзды" star icon. Keep the same 24px icon box as the
       * left НФТ gift icon; the previous 30×28 override made the star read
       * heavier than its neighbour. */
      button[class*="_option_"] div[class*="_icon_"] svg.gp-nav-star-icon,
      button[class*="_option_"] div[class*="_icon_"] img.gp-nav-star-icon,
      div[class*="_icon_"] svg.gp-nav-star-icon,
      div[class*="_icon_"] img.gp-nav-star-icon,
      img.gp-nav-star-icon,
      svg.gp-nav-star-icon {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
        display: block !important;
        flex-shrink: 0 !important;
        object-fit: contain !important;
        opacity: 1 !important;
      }

      /* 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. */

      /* 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).

        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. */

      /* 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.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.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 GiftPay 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;
      }

      /* 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;
        animation-fill-mode: forwards !important;
        pointer-events: none !important;
      }

      /* Open-side mirror of the close-jerk fix above. The comment block
         already documents that OPEN has the same race: clearing Vaul's
         inline translate3d(0,100%,0) gets interpolated by the base
         `transition: transform .5s` in parallel with the slideFromBottom
         keyframe, so the drawer jerks up-and-back for ~1 frame
         («анимация пересвапывается» in кешбек «Подробнее» and every other
         Vaul sheet). This higher-specificity rule cancels the base
         transition during open so the keyframe is the sole transform
         driver. Deliberately NO !important and NO animation-fill-mode:
         a plain declaration still beats the base `[data-vaul-drawer]`
         transition by specificity, yet leaves Vaul's INLINE transition
         (set on this same element to animate the drag-release snap-back)
         free to win — an !important here would make a pulled-down sheet
         teleport back instead of animating. */
      [data-vaul-drawer][data-state="open"] {
        transition: none;
      }

      [data-vaul-drawer][data-state="closed"] * {
        pointer-events: 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;
      }

      /* 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);
        }
      }


      /* 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.rounded-xl.w-full.overflow-hidden.squircle-2xl,
      div.embla__viewport div.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.rounded-xl.w-full.overflow-hidden.squircle-2xl > img,
      div.embla__viewport div.rounded-xl.w-full.overflow-hidden.squircle-2xl > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      /* 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 cashback row currency icon: replace the old
         blue wallet glyph with the same orange-gold 4-point star and
         gold text from the top-left balance badge. */
      /* /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. */
      /* Share button overlay on the NFT-detail gift image: the bundle
         renders a "Поделиться" / share button in the top-right corner
         above the photo. The share text is GiftPay-native, built by the
         $rt generator in the bundle: when the gift is listed it emits
         "На GiftPay уже в продаже" + "Цена: …", otherwise just
         "Сейчас на GiftPay" + name/number. No marketplace-offer copy is
         emitted anymore. The user explicitly wants the button shown. */

      /* 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 GiftPay-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;
      }

      /* Кешбэк-бонус 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 4045 === */
      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 === */
      /* /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;
      }

      /* 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;
      }

      /* 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);
      }

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

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

      /* 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 GiftPay 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 GiftPay 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;
      }

      /* Older SVG branch fallback: do not upscale the second tab icon. The
         active bundle now uses .gp-nav-star-icon above, sized to match НФТ. */
      [data-option="1"] > div > svg[viewBox="0 0 25 24"] {
        transform: none;
        transform-origin: center;
      }

      /* 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 — GiftPay 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 GiftPay
         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. GiftPay'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 GiftPay'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 GiftPay-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 GiftPay'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
   "криво некрасиво — по разным сторонам". GiftPay-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;
}

/* 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;
}

/* 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 GiftPay'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;
}

/* === 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. */
/* === 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: none !important;
  user-select: none !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 *,
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 * {
  -webkit-user-select: none !important;
  user-select: none !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;
  overflow: hidden;
  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 by the static bundle
   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. Aspect ratio comes from the
   tight viewBox (8.5 7 15 18.6) so height-em maps 1:1 to cap-height
   instead of leaving glyph padding inside the SVG box. */
button[data-gp-resale-thermos="price"] .gp-resale-price-cur {
  display: inline-block;
  height: 0.78em;
  width: calc(0.78em * 15 / 18.6);
  flex-shrink: 0;
  color: currentColor;
  vertical-align: baseline;
  transform: translateY(0.02em);
}

/* Keep the checked/available CTA visually atomic. Without this state-level
   rule the base button transition animates from the dark spinner green to
   primary green after data-gp-resale-thermos flips to "price". */
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"],
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;
}
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 GiftPay'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 GiftPay'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; GiftPay'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;
}

/* 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;
}

/* Keep bottom-drawer primary actions above device/browser bottom chrome. */
div.fixed.bottom-0.left-0.right-0.z-\[100\]
  .pb-\[calc\(var\(--tg-viewport-safe-area-inset-bottom\)\+16px\)\] {
  padding-bottom: calc(var(--tg-viewport-safe-area-inset-bottom) + 24px) !important;
}

/* Cart basket icon next to each gift card price. GiftPay 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;
}
#gp-bot-drawer {
  border: 0.5px solid #3a3a3a;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}
#gp-bot-drawer::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 200%;
  background: inherit;
  background-color: inherit;
}

/* 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;
}

/* GiftPay Stars parity fixes: keep the GiftPay card/drawer surface intact
   after the native /stars fork moved the DOM back under the active bundle. */
#gp-stars-gifts-section .gp-stars-card {
  border: 0 !important;
  outline: 0;
  animation: none !important;
  animation-delay: 0s !important;
}
#gp-stars-gifts-section .gp-stars-card:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--primary) 65%, transparent);
  outline-offset: 2px;
}
#gp-stars-gifts-section .gp-stars-card-frame {
  background: rgba(0, 0, 0, 0.18);
}
#gp-stars-gifts-section .gp-stars-price-chip {
  min-height: 32px;
}
[data-vaul-drawer][data-state="open"][class*="bg-\[\#212020\]"][class*="m-2"] {
  border: 0.5px solid #3a3a3a !important;
}
.gp-stars-gift-drawer-content .gp-stars-drawer-image {
  width: min(260px, 72vw) !important;
  height: min(260px, 72vw) !important;
  max-width: 260px;
  max-height: 260px;
}
.gp-stars-gift-drawer-content .gp-stars-drawer-img {
  width: 70% !important;
  height: 70% !important;
  object-fit: contain !important;
}
.gp-stars-gift-drawer-content .gp-stars-stepper {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
}

.gp-nft-discount-badge {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ff4d57;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.gp-nft-discount-badge--price-chip {
  position: absolute;
  left: -6px;
  top: -6px;
  z-index: 2;
}

.gp-nft-discount-badge--cart {
  width: 16px;
  height: 16px;
  min-width: 16px;
  font-size: 10px;
}

:where(*):not(input):not(textarea):not([contenteditable="true"]):not([contenteditable="true"] *) {
  -webkit-user-select: none !important;
  user-select: none !important;
  -khtml-user-select: none !important;
  -webkit-touch-callout: none !important;
}

:where(img, svg, canvas, video) {
  -webkit-user-drag: none !important;
  user-drag: none !important;
  -webkit-touch-callout: none !important;
}