@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");
@import url("./remove-green-dots.css");
/*! tailwindcss v4.1.3 | 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: rotateX(0);
      --tw-rotate-y: rotateY(0);
      --tw-rotate-z: rotateZ(0);
      --tw-skew-x: skewX(0);
      --tw-skew-y: skewY(0);
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-divide-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-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;
    }
  }
}

@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-50: oklch(.971 .013 17.38);
    --color-red-100: oklch(.936 .032 17.717);
    --color-red-200: oklch(.885 .062 18.334);
    --color-red-300: oklch(.808 .114 19.571);
    --color-red-400: oklch(.704 .191 22.216);
    --color-red-500: oklch(.637 .237 25.331);
    --color-red-600: oklch(.577 .245 27.325);
    --color-red-700: oklch(.505 .213 27.518);
    --color-red-800: oklch(.444 .177 26.899);
    --color-red-900: oklch(.396 .141 25.723);
    --color-orange-50: oklch(.98 .016 73.684);
    --color-orange-200: oklch(.901 .076 70.697);
    --color-orange-400: oklch(.75 .183 55.934);
    --color-orange-500: oklch(.705 .213 47.604);
    --color-orange-600: oklch(.646 .222 41.116);
    --color-orange-700: oklch(.553 .195 38.402);
    --color-orange-900: oklch(.408 .123 38.172);
    --color-amber-50: oklch(.987 .022 95.277);
    --color-amber-100: oklch(.962 .059 95.617);
    --color-amber-200: oklch(.924 .12 95.746);
    --color-amber-500: oklch(.769 .188 70.08);
    --color-amber-600: oklch(.666 .179 58.318);
    --color-amber-700: oklch(.555 .163 48.998);
    --color-amber-800: oklch(.473 .137 46.201);
    --color-yellow-50: oklch(.987 .026 102.212);
    --color-yellow-100: oklch(.973 .071 103.193);
    --color-yellow-200: oklch(.945 .129 101.54);
    --color-yellow-300: oklch(.905 .182 98.111);
    --color-yellow-400: oklch(.852 .199 91.936);
    --color-yellow-500: oklch(.795 .184 86.047);
    --color-yellow-600: oklch(.681 .162 75.834);
    --color-yellow-700: oklch(.554 .135 66.442);
    --color-yellow-800: oklch(.476 .114 61.907);
    --color-yellow-900: oklch(.421 .095 57.708);
    --color-green-50: oklch(.982 .018 155.826);
    --color-green-100: oklch(.962 .044 156.743);
    --color-green-200: oklch(.925 .084 155.995);
    --color-green-300: oklch(.871 .15 154.449);
    --color-green-400: oklch(.792 .209 151.711);
    --color-green-500: oklch(.723 .219 149.579);
    --color-green-600: oklch(.627 .194 149.214);
    --color-green-700: oklch(.527 .154 150.069);
    --color-green-800: oklch(.448 .119 151.328);
    --color-green-900: oklch(.393 .095 152.535);
    --color-emerald-50: oklch(.979 .021 166.113);
    --color-emerald-100: oklch(.95 .052 163.051);
    --color-emerald-200: oklch(.905 .093 164.15);
    --color-emerald-300: oklch(.845 .143 164.978);
    --color-emerald-400: oklch(.765 .177 163.223);
    --color-emerald-500: oklch(.696 .17 162.48);
    --color-emerald-600: oklch(.596 .145 163.225);
    --color-emerald-700: oklch(.508 .118 165.612);
    --color-emerald-800: oklch(.432 .095 166.913);
    --color-emerald-900: oklch(.378 .077 168.94);
    --color-teal-50: oklch(.984 .014 180.72);
    --color-teal-100: oklch(.953 .051 180.801);
    --color-teal-400: oklch(.777 .152 181.912);
    --color-teal-500: oklch(.704 .14 182.503);
    --color-teal-600: oklch(.6 .118 184.704);
    --color-cyan-50: oklch(.984 .019 200.873);
    --color-cyan-400: oklch(.789 .154 211.53);
    --color-cyan-500: oklch(.715 .143 215.221);
    --color-cyan-600: oklch(.609 .126 221.723);
    --color-blue-50: oklch(.97 .014 254.604);
    --color-blue-100: oklch(.932 .032 255.585);
    --color-blue-200: oklch(.882 .059 254.128);
    --color-blue-300: oklch(.809 .105 251.813);
    --color-blue-400: oklch(.707 .165 254.624);
    --color-blue-500: oklch(.623 .214 259.815);
    --color-blue-600: oklch(.546 .245 262.881);
    --color-blue-700: oklch(.488 .243 264.376);
    --color-blue-800: oklch(.424 .199 265.638);
    --color-blue-900: oklch(.379 .146 265.522);
    --color-blue-950: oklch(.282 .091 267.935);
    --color-indigo-50: oklch(.962 .018 272.314);
    --color-indigo-100: oklch(.93 .034 272.788);
    --color-indigo-400: oklch(.673 .182 276.935);
    --color-indigo-500: oklch(.585 .233 277.117);
    --color-indigo-600: oklch(.511 .262 276.966);
    --color-indigo-700: oklch(.457 .24 277.023);
    --color-violet-500: oklch(.606 .25 292.717);
    --color-purple-50: oklch(.977 .014 308.299);
    --color-purple-100: oklch(.946 .033 307.174);
    --color-purple-200: oklch(.902 .063 306.703);
    --color-purple-400: oklch(.714 .203 305.504);
    --color-purple-500: oklch(.627 .265 303.9);
    --color-purple-600: oklch(.558 .288 302.321);
    --color-purple-700: oklch(.496 .265 301.924);
    --color-purple-800: oklch(.438 .218 303.724);
    --color-purple-900: oklch(.381 .176 304.987);
    --color-purple-950: oklch(.291 .149 302.717);
    --color-pink-50: oklch(.971 .014 343.198);
    --color-pink-400: oklch(.718 .202 349.761);
    --color-pink-500: oklch(.656 .241 354.308);
    --color-pink-600: oklch(.592 .249 .584);
    --color-rose-500: oklch(.645 .246 16.439);
    --color-slate-600: oklch(.446 .043 257.281);
    --color-slate-700: oklch(.372 .044 257.287);
    --color-slate-800: oklch(.279 .041 260.031);
    --color-slate-900: oklch(.208 .042 265.755);
    --color-gray-50: oklch(.985 .002 247.839);
    --color-gray-100: oklch(.967 .003 264.542);
    --color-gray-200: oklch(.928 .006 264.531);
    --color-gray-300: oklch(.872 .01 258.338);
    --color-gray-400: oklch(.707 .022 261.325);
    --color-gray-500: oklch(.551 .027 264.364);
    --color-gray-600: oklch(.446 .03 256.802);
    --color-gray-700: oklch(.373 .034 259.733);
    --color-gray-800: oklch(.278 .033 256.848);
    --color-gray-900: oklch(.21 .034 264.665);
    --color-zinc-900: oklch(.21 .006 285.885);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --tracking-wider: .05em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --radius-xs: .125rem;
    --radius-lg: var(--radius);
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --drop-shadow-lg: 0 4px 4px #00000026;
    --drop-shadow-2xl: 0 25px 25px #00000026;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --animate-bounce: bounce 1s infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-xl: 24px;
    --blur-2xl: 40px;
    --blur-3xl: 64px;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-font-feature-settings: var(--font-sans--font-feature-settings);
    --default-font-variation-settings: var(--font-sans--font-variation-settings);
    --default-mono-font-family: var(--font-mono);
    --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
    --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
  }
}

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

  body {
    line-height: inherit;
  }

  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;
    -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: -.25em;
  }

  sup {
    top: -.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;
    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;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  * {
    border-color: var(--border);
    outline-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    * {
      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
  }

  * {
    border-color: var(--border);
    outline-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    * {
      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  body {
    background-color: var(--background);
    font-family: var(--font-sans);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--background);
    min-height: 100vh;
    font-family: var(--font-family-sans);
    transform-origin: top !important;
    width: 105.26% !important;
    margin: 0 0 0 -2.63% !important;
    padding-top: 0 !important;
    position: relative !important;
    overflow-x: hidden !important;
    transform: scale(.95) !important;
  }

  html {
    scroll-behavior: smooth !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 95% !important;
    position: relative !important;
    overflow-x: hidden !important;
  }

  #root {
    width: 100% !important;
    min-height: 100vh !important;
    position: relative !important;
  }

  nav.nav-container {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }

  nav.nav-container * {
    box-sizing: border-box !important;
  }

  main {
    padding-top: calc(var(--total-header-height)  + .75rem) !important;
    z-index: 1 !important;
    min-height: calc(100vh - var(--total-header-height)) !important;
    width: 100% !important;
    margin-top: 0 !important;
    position: relative !important;
    overflow: visible !important;
  }

  .pt-40 {
    padding-top: 2rem !important;
  }

  .pt-48 {
    padding-top: 3rem !important;
  }

  .pt-32 {
    padding-top: var(--total-header-height) !important;
  }

  .lg\:top-36 {
    top: calc(var(--total-header-height)  + 1rem) !important;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h1 {
    letter-spacing: -.025em;
    margin-bottom: .375rem;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.1;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h2 {
    letter-spacing: -.025em;
    margin-bottom: .25rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h3 {
    margin-bottom: .1875rem;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h4 {
    margin-bottom: .1875rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) p {
    margin-bottom: .375rem;
    font-size: .6875rem;
    font-weight: 400;
    line-height: 1.4;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) label {
    font-size: .5625rem;
    font-weight: 500;
    line-height: 1.2;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) button {
    padding: .25rem .5rem;
    font-size: .5625rem;
    font-weight: 500;
    line-height: 1.2;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) input {
    padding: .25rem .375rem;
    font-size: .6875rem;
    font-weight: 400;
    line-height: 1.2;
  }
}

@layer utilities {
  .\@container\/card-header {
    container: card-header / inline-size;
  }

  .pointer-events-none {
    pointer-events: none;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip: rect(0, 0, 0, 0);
    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-2 {
    inset: calc(var(--spacing) * 2);
  }

  .inset-4 {
    inset: calc(var(--spacing) * 4);
  }

  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }

  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }

  .-top-0\.5 {
    top: calc(var(--spacing) * -.5);
  }

  .-top-1 {
    top: calc(var(--spacing) * -1);
  }

  .-top-2 {
    top: calc(var(--spacing) * -2);
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .top-0\.5 {
    top: calc(var(--spacing) * .5);
  }

  .top-1\/2 {
    top: 50%;
  }

  .top-1\/3 {
    top: 33.3333%;
  }

  .top-1\/4 {
    top: 25%;
  }

  .top-2 {
    top: calc(var(--spacing) * 2);
  }

  .top-3 {
    top: calc(var(--spacing) * 3);
  }

  .top-4 {
    top: calc(var(--spacing) * 4);
  }

  .top-6 {
    top: calc(var(--spacing) * 6);
  }

  .top-8 {
    top: calc(var(--spacing) * 8);
  }

  .top-12 {
    top: calc(var(--spacing) * 12);
  }

  .top-16 {
    top: calc(var(--spacing) * 16);
  }

  .top-20 {
    top: calc(var(--spacing) * 20);
  }

  .top-32 {
    top: calc(var(--spacing) * 32);
  }

  .top-\[60\%\] {
    top: 60%;
  }

  .top-full {
    top: 100%;
  }

  .-right-0\.5 {
    right: calc(var(--spacing) * -.5);
  }

  .-right-1 {
    right: calc(var(--spacing) * -1);
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .right-1\/4 {
    right: 25%;
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-4 {
    right: calc(var(--spacing) * 4);
  }

  .right-8 {
    right: calc(var(--spacing) * 8);
  }

  .right-10 {
    right: calc(var(--spacing) * 10);
  }

  .right-20 {
    right: calc(var(--spacing) * 20);
  }

  .-bottom-2 {
    bottom: calc(var(--spacing) * -2);
  }

  .-bottom-12 {
    bottom: calc(var(--spacing) * -12);
  }

  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }

  .bottom-1\/3 {
    bottom: 33.3333%;
  }

  .bottom-1\/4 {
    bottom: 25%;
  }

  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }

  .bottom-8 {
    bottom: calc(var(--spacing) * 8);
  }

  .bottom-20 {
    bottom: calc(var(--spacing) * 20);
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

  .left-0\.5 {
    left: calc(var(--spacing) * .5);
  }

  .left-1\/2 {
    left: 50%;
  }

  .left-1\/3 {
    left: 33.3333%;
  }

  .left-1\/4 {
    left: 25%;
  }

  .left-2 {
    left: calc(var(--spacing) * 2);
  }

  .left-3 {
    left: calc(var(--spacing) * 3);
  }

  .left-4 {
    left: calc(var(--spacing) * 4);
  }

  .left-10 {
    left: calc(var(--spacing) * 10);
  }

  .left-20 {
    left: calc(var(--spacing) * 20);
  }

  .-z-10 {
    z-index: calc(10 * -1);
  }

  .z-0 {
    z-index: 0;
  }

  .z-5 {
    z-index: 5;
  }

  .z-10 {
    z-index: 10;
  }

  .z-20 {
    z-index: 20;
  }

  .z-30 {
    z-index: 30;
  }

  .z-50 {
    z-index: 50;
  }

  .z-\[9999\] {
    z-index: 9999;
  }

  .z-\[10000\] {
    z-index: 10000;
  }

  .z-\[10001\] {
    z-index: 10001;
  }

  .order-1 {
    order: 1;
  }

  .order-2 {
    order: 2;
  }

  .col-start-2 {
    grid-column-start: 2;
  }

  .row-span-2 {
    grid-row: span 2 / span 2;
  }

  .row-start-1 {
    grid-row-start: 1;
  }

  .container {
    width: 100%;
  }

  @media (width >= 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (width >= 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (width >= 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (width >= 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (width >= 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .-mx-1 {
    margin-inline: calc(var(--spacing) * -1);
  }

  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }

  .mx-auto {
    margin-inline: auto;
  }

  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }

  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }

  .my-6 {
    margin-block: calc(var(--spacing) * 6);
  }

  .my-8 {
    margin-block: calc(var(--spacing) * 8);
  }

  .my-20 {
    margin-block: calc(var(--spacing) * 20);
  }

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .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-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }

  .mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }

  .mt-32 {
    margin-top: calc(var(--spacing) * 32);
  }

  .mt-auto {
    margin-top: auto;
  }

  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }

  .mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
  }

  .mb-0\.5 {
    margin-bottom: calc(var(--spacing) * .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-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }

  .mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }

  .mb-24 {
    margin-bottom: calc(var(--spacing) * 24);
  }

  .-ml-6 {
    margin-left: calc(var(--spacing) * -6);
  }

  .ml-0 {
    margin-left: calc(var(--spacing) * 0);
  }

  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-1\.5 {
    margin-left: calc(var(--spacing) * 1.5);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-2\.5 {
    margin-left: calc(var(--spacing) * 2.5);
  }

  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }

  .ml-11 {
    margin-left: calc(var(--spacing) * 11);
  }

  .ml-auto {
    margin-left: auto;
  }

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

  .field-sizing-content {
    field-sizing: content;
  }

  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }

  .size-2 {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
  }

  .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-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .size-7 {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
  }

  .h-0\.5 {
    height: calc(var(--spacing) * .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\.5 {
    height: calc(var(--spacing) * 3.5);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .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-14 {
    height: calc(var(--spacing) * 14);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-20 {
    height: calc(var(--spacing) * 20);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-32 {
    height: calc(var(--spacing) * 32);
  }

  .h-40 {
    height: calc(var(--spacing) * 40);
  }

  .h-48 {
    height: calc(var(--spacing) * 48);
  }

  .h-64 {
    height: calc(var(--spacing) * 64);
  }

  .h-80 {
    height: calc(var(--spacing) * 80);
  }

  .h-96 {
    height: calc(var(--spacing) * 96);
  }

  .h-\[420px\] {
    height: 420px;
  }

  .h-\[450px\] {
    height: 450px;
  }

  .h-\[640px\] {
    height: 640px;
  }

  .h-\[calc\(100\%-1px\)\] {
    height: calc(100% - 1px);
  }

  .h-\[calc\(100\%-5rem\)\] {
    height: calc(100% - 5rem);
  }

  .h-\[var\(--radix-select-trigger-height\)\] {
    height: var(--radix-select-trigger-height);
  }

  .h-auto {
    height: auto;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .max-h-\(--radix-dropdown-menu-content-available-height\) {
    max-height: var(--radix-dropdown-menu-content-available-height);
  }

  .max-h-\(--radix-select-content-available-height\) {
    max-height: var(--radix-select-content-available-height);
  }

  .max-h-20 {
    max-height: calc(var(--spacing) * 20);
  }

  .max-h-32 {
    max-height: calc(var(--spacing) * 32);
  }

  .max-h-40 {
    max-height: calc(var(--spacing) * 40);
  }

  .max-h-48 {
    max-height: calc(var(--spacing) * 48);
  }

  .max-h-60 {
    max-height: calc(var(--spacing) * 60);
  }

  .max-h-64 {
    max-height: calc(var(--spacing) * 64);
  }

  .max-h-80 {
    max-height: calc(var(--spacing) * 80);
  }

  .max-h-96 {
    max-height: calc(var(--spacing) * 96);
  }

  .max-h-\[90vh\] {
    max-height: 90vh;
  }

  .max-h-\[520px\] {
    max-height: 520px;
  }

  .min-h-2\.5 {
    min-height: calc(var(--spacing) * 2.5);
  }

  .min-h-3\.5 {
    min-height: calc(var(--spacing) * 3.5);
  }

  .min-h-4 {
    min-height: calc(var(--spacing) * 4);
  }

  .min-h-5 {
    min-height: calc(var(--spacing) * 5);
  }

  .min-h-7 {
    min-height: calc(var(--spacing) * 7);
  }

  .min-h-9 {
    min-height: calc(var(--spacing) * 9);
  }

  .min-h-10 {
    min-height: calc(var(--spacing) * 10);
  }

  .min-h-16 {
    min-height: calc(var(--spacing) * 16);
  }

  .min-h-\[60vh\] {
    min-height: 60vh;
  }

  .min-h-\[120px\] {
    min-height: 120px;
  }

  .min-h-\[300px\] {
    min-height: 300px;
  }

  .min-h-\[580px\] {
    min-height: 580px;
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .w-0 {
    width: calc(var(--spacing) * 0);
  }

  .w-0\.5 {
    width: calc(var(--spacing) * .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-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }

  .w-3\/4 {
    width: 75%;
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-4\/5 {
    width: 80%;
  }

  .w-5 {
    width: calc(var(--spacing) * 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-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-11 {
    width: calc(var(--spacing) * 11);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-14 {
    width: calc(var(--spacing) * 14);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

  .w-18 {
    width: calc(var(--spacing) * 18);
  }

  .w-20 {
    width: calc(var(--spacing) * 20);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-32 {
    width: calc(var(--spacing) * 32);
  }

  .w-40 {
    width: calc(var(--spacing) * 40);
  }

  .w-48 {
    width: calc(var(--spacing) * 48);
  }

  .w-64 {
    width: calc(var(--spacing) * 64);
  }

  .w-80 {
    width: calc(var(--spacing) * 80);
  }

  .w-96 {
    width: calc(var(--spacing) * 96);
  }

  .w-\[420px\] {
    width: 420px;
  }

  .w-\[450px\] {
    width: 450px;
  }

  .w-auto {
    width: auto;
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .w-px {
    width: 1px;
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-4xl {
    max-width: var(--container-4xl);
  }

  .max-w-5xl {
    max-width: var(--container-5xl);
  }

  .max-w-6xl {
    max-width: var(--container-6xl);
  }

  .max-w-7xl {
    max-width: var(--container-7xl);
  }

  .max-w-16 {
    max-width: calc(var(--spacing) * 16);
  }

  .max-w-20 {
    max-width: calc(var(--spacing) * 20);
  }

  .max-w-24 {
    max-width: calc(var(--spacing) * 24);
  }

  .max-w-36 {
    max-width: calc(var(--spacing) * 36);
  }

  .max-w-48 {
    max-width: calc(var(--spacing) * 48);
  }

  .max-w-\[80px\] {
    max-width: 80px;
  }

  .max-w-\[200px\] {
    max-width: 200px;
  }

  .max-w-full {
    max-width: 100%;
  }

  .max-w-lg {
    max-width: var(--container-lg);
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-none {
    max-width: none;
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .max-w-xl {
    max-width: var(--container-xl);
  }

  .max-w-xs {
    max-width: var(--container-xs);
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-2\.5 {
    min-width: calc(var(--spacing) * 2.5);
  }

  .min-w-3\.5 {
    min-width: calc(var(--spacing) * 3.5);
  }

  .min-w-5 {
    min-width: calc(var(--spacing) * 5);
  }

  .min-w-7 {
    min-width: calc(var(--spacing) * 7);
  }

  .min-w-9 {
    min-width: calc(var(--spacing) * 9);
  }

  .min-w-10 {
    min-width: calc(var(--spacing) * 10);
  }

  .min-w-\[2\.5rem\] {
    min-width: 2.5rem;
  }

  .min-w-\[8rem\] {
    min-width: 8rem;
  }

  .min-w-\[120px\] {
    min-width: 120px;
  }

  .min-w-\[160px\] {
    min-width: 160px;
  }

  .min-w-\[220px\] {
    min-width: 220px;
  }

  .min-w-\[var\(--radix-select-trigger-width\)\] {
    min-width: var(--radix-select-trigger-width);
  }

  .min-w-max {
    min-width: max-content;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-shrink {
    flex-shrink: 1;
  }

  .flex-shrink-0, .shrink-0 {
    flex-shrink: 0;
  }

  .flex-grow {
    flex-grow: 1;
  }

  .caption-bottom {
    caption-side: bottom;
  }

  .origin-\(--radix-dropdown-menu-content-transform-origin\) {
    transform-origin: var(--radix-dropdown-menu-content-transform-origin);
  }

  .origin-\(--radix-select-content-transform-origin\) {
    transform-origin: var(--radix-select-content-transform-origin);
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-2 {
    --tw-translate-x: calc(var(--spacing) * -2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-full {
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-1\/2 {
    --tw-translate-x: calc(1 / 2 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-10 {
    --tw-translate-x: calc(var(--spacing) * 10);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-\[-100\%\] {
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    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-10 {
    --tw-translate-y: calc(var(--spacing) * -10);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-0\.5 {
    --tw-translate-y: calc(var(--spacing) * .5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .scale-102 {
    --tw-scale-x: 102%;
    --tw-scale-y: 102%;
    --tw-scale-z: 102%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-105 {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-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-150 {
    --tw-scale-x: 150%;
    --tw-scale-y: 150%;
    --tw-scale-z: 150%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .rotate-3 {
    rotate: 3deg;
  }

  .rotate-180 {
    rotate: 180deg;
  }

  .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-bounce {
    animation: var(--animate-bounce);
  }

  .animate-ping {
    animation: var(--animate-ping);
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .cursor-default {
    cursor: default;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .resize {
    resize: both;
  }

  .resize-none {
    resize: none;
  }

  .scroll-my-1 {
    scroll-margin-block: calc(var(--spacing) * 1);
  }

  .list-inside {
    list-style-position: inside;
  }

  .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-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

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

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

  .grid-cols-\[0_1fr\] {
    grid-template-columns: 0 1fr;
  }

  .grid-rows-\[auto_auto\] {
    grid-template-rows: auto auto;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

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

  .justify-around {
    justify-content: space-around;
  }

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

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .justify-items-center {
    justify-items: center;
  }

  .justify-items-start {
    justify-items: start;
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .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-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-10 {
    gap: calc(var(--spacing) * 10);
  }

  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }

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

  :where(.space-y-7 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 7) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 7) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-8 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-12 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-x-2 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
  }

  .gap-y-0\.5 {
    row-gap: calc(var(--spacing) * .5);
  }

  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }

  :where(.divide-border\/30 > :not(:last-child)) {
    border-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :where(.divide-border\/30 > :not(:last-child)) {
      border-color: color-mix(in oklab, var(--border) 30%, transparent);
    }
  }

  .self-start {
    align-self: flex-start;
  }

  .justify-self-end {
    justify-self: flex-end;
  }

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

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }

  .rounded-\[2\.5rem\] {
    border-radius: 2.5rem;
  }

  .rounded-\[3rem\] {
    border-radius: 3rem;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius);
  }

  .rounded-md {
    border-radius: calc(var(--radius)  - 2px);
  }

  .rounded-none {
    border-radius: 0;
  }

  .rounded-sm {
    border-radius: calc(var(--radius)  - 4px);
  }

  .rounded-xl {
    border-radius: calc(var(--radius)  + 4px);
  }

  .rounded-xs {
    border-radius: var(--radius-xs);
  }

  .rounded-t-lg {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
  }

  .\!border-2 {
    border-style: var(--tw-border-style) !important;
    border-width: 2px !important;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }

  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .border-none {
    --tw-border-style: none;
    border-style: none;
  }

  .\!border-green-300 {
    border-color: var(--color-green-300) !important;
  }

  .\!border-green-600 {
    border-color: var(--color-green-600) !important;
  }

  .border-\[\#00c77c\]\/20 {
    border-color: oklab(73.0533% -.159032 .0654098 / .2);
  }

  .border-\[\#00c77c\]\/30 {
    border-color: oklab(73.0533% -.159032 .0654098 / .3);
  }

  .border-\[\#00d084\] {
    border-color: #00d084;
  }

  .border-\[\#00d084\]\/20 {
    border-color: oklab(75.5558% -.163383 .0650536 / .2);
  }

  .border-\[\#00d084\]\/30 {
    border-color: oklab(75.5558% -.163383 .0650536 / .3);
  }

  .border-\[\#04d484\]\/20 {
    border-color: oklab(76.6082% -.166608 .0691372 / .2);
  }

  .border-\[\#04d484\]\/30 {
    border-color: oklab(76.6082% -.166608 .0691372 / .3);
  }

  .border-accent {
    border-color: var(--accent);
  }

  .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-accent\/30 {
    border-color: var(--accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-accent\/30 {
      border-color: color-mix(in oklab, var(--accent) 30%, transparent);
    }
  }

  .border-amber-200 {
    border-color: var(--color-amber-200);
  }

  .border-blue-200 {
    border-color: var(--color-blue-200);
  }

  .border-blue-400\/30 {
    border-color: color-mix(in srgb, oklch(.707 .165 254.624) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-blue-400\/30 {
      border-color: color-mix(in oklab, var(--color-blue-400) 30%, transparent);
    }
  }

  .border-blue-500 {
    border-color: var(--color-blue-500);
  }

  .border-blue-500\/20 {
    border-color: color-mix(in srgb, oklch(.623 .214 259.815) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-blue-500\/20 {
      border-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
    }
  }

  .border-blue-500\/30 {
    border-color: color-mix(in srgb, oklch(.623 .214 259.815) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-blue-500\/30 {
      border-color: color-mix(in oklab, var(--color-blue-500) 30%, transparent);
    }
  }

  .border-blue-500\/50 {
    border-color: color-mix(in srgb, oklch(.623 .214 259.815) 50%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-blue-500\/50 {
      border-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
    }
  }

  .border-border {
    border-color: var(--border);
  }

  .border-border\/20 {
    border-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/20 {
      border-color: color-mix(in oklab, var(--border) 20%, transparent);
    }
  }

  .border-border\/30 {
    border-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/30 {
      border-color: color-mix(in oklab, var(--border) 30%, transparent);
    }
  }

  .border-border\/40 {
    border-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/40 {
      border-color: color-mix(in oklab, var(--border) 40%, transparent);
    }
  }

  .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-current {
    border-color: currentColor;
  }

  .border-cyan-500\/30 {
    border-color: color-mix(in srgb, oklch(.715 .143 215.221) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-cyan-500\/30 {
      border-color: color-mix(in oklab, var(--color-cyan-500) 30%, transparent);
    }
  }

  .border-destructive\/20 {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-destructive\/20 {
      border-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .border-destructive\/30 {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-destructive\/30 {
      border-color: color-mix(in oklab, var(--destructive) 30%, transparent);
    }
  }

  .border-emerald-200 {
    border-color: var(--color-emerald-200);
  }

  .border-emerald-500\/10 {
    border-color: color-mix(in srgb, oklch(.696 .17 162.48) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-500\/10 {
      border-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
    }
  }

  .border-emerald-500\/20 {
    border-color: color-mix(in srgb, oklch(.696 .17 162.48) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-500\/20 {
      border-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
    }
  }

  .border-emerald-500\/30 {
    border-color: color-mix(in srgb, oklch(.696 .17 162.48) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-500\/30 {
      border-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
    }
  }

  .border-gray-100 {
    border-color: var(--color-gray-100);
  }

  .border-gray-200 {
    border-color: var(--color-gray-200);
  }

  .border-gray-300 {
    border-color: var(--color-gray-300);
  }

  .border-gray-300\/50 {
    border-color: color-mix(in srgb, oklch(.872 .01 258.338) 50%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-gray-300\/50 {
      border-color: color-mix(in oklab, var(--color-gray-300) 50%, transparent);
    }
  }

  .border-gray-400\/30 {
    border-color: color-mix(in srgb, oklch(.707 .022 261.325) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-gray-400\/30 {
      border-color: color-mix(in oklab, var(--color-gray-400) 30%, transparent);
    }
  }

  .border-gray-500\/20 {
    border-color: color-mix(in srgb, oklch(.551 .027 264.364) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-gray-500\/20 {
      border-color: color-mix(in oklab, var(--color-gray-500) 20%, transparent);
    }
  }

  .border-gray-500\/30 {
    border-color: color-mix(in srgb, oklch(.551 .027 264.364) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-gray-500\/30 {
      border-color: color-mix(in oklab, var(--color-gray-500) 30%, transparent);
    }
  }

  .border-gray-600 {
    border-color: var(--color-gray-600);
  }

  .border-gray-700 {
    border-color: var(--color-gray-700);
  }

  .border-green-100 {
    border-color: var(--color-green-100);
  }

  .border-green-200 {
    border-color: var(--color-green-200);
  }

  .border-green-300 {
    border-color: var(--color-green-300);
  }

  .border-green-300\/50 {
    border-color: color-mix(in srgb, oklch(.871 .15 154.449) 50%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-green-300\/50 {
      border-color: color-mix(in oklab, var(--color-green-300) 50%, transparent);
    }
  }

  .border-green-400 {
    border-color: var(--color-green-400);
  }

  .border-green-400\/30 {
    border-color: color-mix(in srgb, oklch(.792 .209 151.711) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-green-400\/30 {
      border-color: color-mix(in oklab, var(--color-green-400) 30%, transparent);
    }
  }

  .border-green-400\/50 {
    border-color: color-mix(in srgb, oklch(.792 .209 151.711) 50%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-green-400\/50 {
      border-color: color-mix(in oklab, var(--color-green-400) 50%, transparent);
    }
  }

  .border-green-500 {
    border-color: var(--color-green-500);
  }

  .border-green-500\/20 {
    border-color: color-mix(in srgb, oklch(.723 .219 149.579) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-green-500\/20 {
      border-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
    }
  }

  .border-green-500\/30 {
    border-color: color-mix(in srgb, oklch(.723 .219 149.579) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-green-500\/30 {
      border-color: color-mix(in oklab, var(--color-green-500) 30%, transparent);
    }
  }

  .border-green-500\/40 {
    border-color: color-mix(in srgb, oklch(.723 .219 149.579) 40%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-green-500\/40 {
      border-color: color-mix(in oklab, var(--color-green-500) 40%, transparent);
    }
  }

  .border-green-500\/50 {
    border-color: color-mix(in srgb, oklch(.723 .219 149.579) 50%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-green-500\/50 {
      border-color: color-mix(in oklab, var(--color-green-500) 50%, transparent);
    }
  }

  .border-green-600 {
    border-color: var(--color-green-600);
  }

  .border-indigo-500\/30 {
    border-color: color-mix(in srgb, oklch(.585 .233 277.117) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-indigo-500\/30 {
      border-color: color-mix(in oklab, var(--color-indigo-500) 30%, transparent);
    }
  }

  .border-input {
    border-color: var(--input);
  }

  .border-orange-200 {
    border-color: var(--color-orange-200);
  }

  .border-orange-400\/30 {
    border-color: color-mix(in srgb, oklch(.75 .183 55.934) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-orange-400\/30 {
      border-color: color-mix(in oklab, var(--color-orange-400) 30%, transparent);
    }
  }

  .border-orange-500\/20 {
    border-color: color-mix(in srgb, oklch(.705 .213 47.604) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-orange-500\/20 {
      border-color: color-mix(in oklab, var(--color-orange-500) 20%, transparent);
    }
  }

  .border-orange-500\/30 {
    border-color: color-mix(in srgb, oklch(.705 .213 47.604) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-orange-500\/30 {
      border-color: color-mix(in oklab, var(--color-orange-500) 30%, transparent);
    }
  }

  .border-pink-500\/30 {
    border-color: color-mix(in srgb, oklch(.656 .241 354.308) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-pink-500\/30 {
      border-color: color-mix(in oklab, var(--color-pink-500) 30%, transparent);
    }
  }

  .border-primary {
    border-color: var(--primary);
  }

  .border-primary\/10 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/10 {
      border-color: color-mix(in oklab, var(--primary) 10%, transparent);
    }
  }

  .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-primary\/30 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/30 {
      border-color: color-mix(in oklab, var(--primary) 30%, transparent);
    }
  }

  .border-purple-200 {
    border-color: var(--color-purple-200);
  }

  .border-purple-500\/20 {
    border-color: color-mix(in srgb, oklch(.627 .265 303.9) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-purple-500\/20 {
      border-color: color-mix(in oklab, var(--color-purple-500) 20%, transparent);
    }
  }

  .border-purple-500\/30 {
    border-color: color-mix(in srgb, oklch(.627 .265 303.9) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-purple-500\/30 {
      border-color: color-mix(in oklab, var(--color-purple-500) 30%, transparent);
    }
  }

  .border-purple-500\/50 {
    border-color: color-mix(in srgb, oklch(.627 .265 303.9) 50%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-purple-500\/50 {
      border-color: color-mix(in oklab, var(--color-purple-500) 50%, transparent);
    }
  }

  .border-red-100 {
    border-color: var(--color-red-100);
  }

  .border-red-200 {
    border-color: var(--color-red-200);
  }

  .border-red-300 {
    border-color: var(--color-red-300);
  }

  .border-red-300\/50 {
    border-color: color-mix(in srgb, oklch(.808 .114 19.571) 50%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-300\/50 {
      border-color: color-mix(in oklab, var(--color-red-300) 50%, transparent);
    }
  }

  .border-red-400\/30 {
    border-color: color-mix(in srgb, oklch(.704 .191 22.216) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-400\/30 {
      border-color: color-mix(in oklab, var(--color-red-400) 30%, transparent);
    }
  }

  .border-red-400\/50 {
    border-color: color-mix(in srgb, oklch(.704 .191 22.216) 50%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-400\/50 {
      border-color: color-mix(in oklab, var(--color-red-400) 50%, transparent);
    }
  }

  .border-red-500 {
    border-color: var(--color-red-500);
  }

  .border-red-500\/20 {
    border-color: color-mix(in srgb, oklch(.637 .237 25.331) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-500\/20 {
      border-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
    }
  }

  .border-red-500\/30 {
    border-color: color-mix(in srgb, oklch(.637 .237 25.331) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-500\/30 {
      border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
    }
  }

  .border-slate-700 {
    border-color: var(--color-slate-700);
  }

  .border-transparent {
    border-color: #0000;
  }

  .border-warning\/20 {
    border-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-warning\/20 {
      border-color: color-mix(in oklab, var(--warning) 20%, transparent);
    }
  }

  .border-warning\/30 {
    border-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-warning\/30 {
      border-color: color-mix(in oklab, var(--warning) 30%, transparent);
    }
  }

  .border-white {
    border-color: var(--color-white);
  }

  .border-white\/5 {
    border-color: #ffffff0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/5 {
      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }

  .border-white\/10 {
    border-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/10 {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .border-white\/20 {
    border-color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/20 {
      border-color: color-mix(in oklab, var(--color-white) 20%, 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-yellow-200 {
    border-color: var(--color-yellow-200);
  }

  .border-yellow-300 {
    border-color: var(--color-yellow-300);
  }

  .border-yellow-400\/30 {
    border-color: color-mix(in srgb, oklch(.852 .199 91.936) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-yellow-400\/30 {
      border-color: color-mix(in oklab, var(--color-yellow-400) 30%, transparent);
    }
  }

  .border-yellow-500\/20 {
    border-color: color-mix(in srgb, oklch(.795 .184 86.047) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-yellow-500\/20 {
      border-color: color-mix(in oklab, var(--color-yellow-500) 20%, transparent);
    }
  }

  .border-yellow-500\/30 {
    border-color: color-mix(in srgb, oklch(.795 .184 86.047) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-yellow-500\/30 {
      border-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
    }
  }

  .border-t-green-400 {
    border-top-color: var(--color-green-400);
  }

  .border-t-transparent {
    border-top-color: #0000;
  }

  .\!bg-green-600 {
    background-color: var(--color-green-600) !important;
  }

  .\!bg-white {
    background-color: var(--color-white) !important;
  }

  .bg-\[\#00c77c\] {
    background-color: #00c77c;
  }

  .bg-\[\#00c77c\]\/20 {
    background-color: oklab(73.0533% -.159032 .0654098 / .2);
  }

  .bg-\[\#00d084\] {
    background-color: #00d084;
  }

  .bg-\[\#00d084\]\/5 {
    background-color: oklab(75.5558% -.163383 .0650536 / .05);
  }

  .bg-\[\#00d084\]\/10 {
    background-color: oklab(75.5558% -.163383 .0650536 / .1);
  }

  .bg-\[\#00d084\]\/20 {
    background-color: oklab(75.5558% -.163383 .0650536 / .2);
  }

  .bg-\[\#1a1a1a\] {
    background-color: #1a1a1a;
  }

  .bg-\[\#1c1c1c\] {
    background-color: #1c1c1c;
  }

  .bg-\[\#2a1a1a\] {
    background-color: #2a1a1a;
  }

  .bg-\[\#2a2a2a\] {
    background-color: #2a2a2a;
  }

  .bg-\[\#04d484\] {
    background-color: #04d484;
  }

  .bg-\[\#04d484\]\/20 {
    background-color: oklab(76.6082% -.166608 .0691372 / .2);
  }

  .bg-\[\#242424\] {
    background-color: #242424;
  }

  .bg-accent {
    background-color: var(--accent);
  }

  .bg-accent\/5 {
    background-color: var(--accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-accent\/5 {
      background-color: color-mix(in oklab, var(--accent) 5%, transparent);
    }
  }

  .bg-accent\/10 {
    background-color: var(--accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-accent\/10 {
      background-color: color-mix(in oklab, var(--accent) 10%, 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-50 {
    background-color: var(--color-amber-50);
  }

  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }

  .bg-background {
    background-color: var(--background);
  }

  .bg-background\/50 {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/50 {
      background-color: color-mix(in oklab, var(--background) 50%, transparent);
    }
  }

  .bg-black {
    background-color: var(--color-black);
  }

  .bg-black\/20 {
    background-color: #0003;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/20 {
      background-color: color-mix(in oklab, var(--color-black) 20%, 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-black\/70 {
    background-color: #000000b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/70 {
      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
    }
  }

  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }

  .bg-blue-100 {
    background-color: var(--color-blue-100);
  }

  .bg-blue-400 {
    background-color: var(--color-blue-400);
  }

  .bg-blue-400\/10 {
    background-color: color-mix(in srgb, oklch(.707 .165 254.624) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-400\/10 {
      background-color: color-mix(in oklab, var(--color-blue-400) 10%, transparent);
    }
  }

  .bg-blue-500 {
    background-color: var(--color-blue-500);
  }

  .bg-blue-500\/5 {
    background-color: color-mix(in srgb, oklch(.623 .214 259.815) 5%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-500\/5 {
      background-color: color-mix(in oklab, var(--color-blue-500) 5%, transparent);
    }
  }

  .bg-blue-500\/10 {
    background-color: color-mix(in srgb, oklch(.623 .214 259.815) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-500\/10 {
      background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
    }
  }

  .bg-blue-500\/20 {
    background-color: color-mix(in srgb, oklch(.623 .214 259.815) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-500\/20 {
      background-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
    }
  }

  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }

  .bg-blue-700 {
    background-color: var(--color-blue-700);
  }

  .bg-border {
    background-color: var(--border);
  }

  .bg-card {
    background-color: var(--card);
  }

  .bg-current {
    background-color: currentColor;
  }

  .bg-cyan-500\/20 {
    background-color: color-mix(in srgb, oklch(.715 .143 215.221) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-cyan-500\/20 {
      background-color: color-mix(in oklab, var(--color-cyan-500) 20%, transparent);
    }
  }

  .bg-destructive {
    background-color: var(--destructive);
  }

  .bg-destructive\/10 {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-destructive\/10 {
      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
    }
  }

  .bg-destructive\/20 {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-destructive\/20 {
      background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .bg-emerald-50 {
    background-color: var(--color-emerald-50);
  }

  .bg-emerald-400 {
    background-color: var(--color-emerald-400);
  }

  .bg-emerald-400\/30 {
    background-color: color-mix(in srgb, oklch(.765 .177 163.223) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-400\/30 {
      background-color: color-mix(in oklab, var(--color-emerald-400) 30%, transparent);
    }
  }

  .bg-emerald-500 {
    background-color: var(--color-emerald-500);
  }

  .bg-emerald-500\/10 {
    background-color: color-mix(in srgb, oklch(.696 .17 162.48) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-500\/10 {
      background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
    }
  }

  .bg-emerald-500\/20 {
    background-color: color-mix(in srgb, oklch(.696 .17 162.48) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-500\/20 {
      background-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
    }
  }

  .bg-emerald-600 {
    background-color: var(--color-emerald-600);
  }

  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }

  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }

  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }

  .bg-gray-400 {
    background-color: var(--color-gray-400);
  }

  .bg-gray-400\/10 {
    background-color: color-mix(in srgb, oklch(.707 .022 261.325) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-gray-400\/10 {
      background-color: color-mix(in oklab, var(--color-gray-400) 10%, transparent);
    }
  }

  .bg-gray-500 {
    background-color: var(--color-gray-500);
  }

  .bg-gray-500\/10 {
    background-color: color-mix(in srgb, oklch(.551 .027 264.364) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-gray-500\/10 {
      background-color: color-mix(in oklab, var(--color-gray-500) 10%, transparent);
    }
  }

  .bg-gray-500\/20 {
    background-color: color-mix(in srgb, oklch(.551 .027 264.364) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-gray-500\/20 {
      background-color: color-mix(in oklab, var(--color-gray-500) 20%, transparent);
    }
  }

  .bg-gray-700 {
    background-color: var(--color-gray-700);
  }

  .bg-gray-700\/50 {
    background-color: color-mix(in srgb, oklch(.373 .034 259.733) 50%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-gray-700\/50 {
      background-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent);
    }
  }

  .bg-gray-800 {
    background-color: var(--color-gray-800);
  }

  .bg-gray-900 {
    background-color: var(--color-gray-900);
  }

  .bg-green-50 {
    background-color: var(--color-green-50);
  }

  .bg-green-100 {
    background-color: var(--color-green-100);
  }

  .bg-green-200 {
    background-color: var(--color-green-200);
  }

  .bg-green-300 {
    background-color: var(--color-green-300);
  }

  .bg-green-400 {
    background-color: var(--color-green-400);
  }

  .bg-green-400\/10 {
    background-color: color-mix(in srgb, oklch(.792 .209 151.711) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-green-400\/10 {
      background-color: color-mix(in oklab, var(--color-green-400) 10%, transparent);
    }
  }

  .bg-green-500 {
    background-color: var(--color-green-500);
  }

  .bg-green-500\/5 {
    background-color: color-mix(in srgb, oklch(.723 .219 149.579) 5%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-green-500\/5 {
      background-color: color-mix(in oklab, var(--color-green-500) 5%, transparent);
    }
  }

  .bg-green-500\/10 {
    background-color: color-mix(in srgb, oklch(.723 .219 149.579) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-green-500\/10 {
      background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
    }
  }

  .bg-green-500\/20 {
    background-color: color-mix(in srgb, oklch(.723 .219 149.579) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-green-500\/20 {
      background-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
    }
  }

  .bg-green-600 {
    background-color: var(--color-green-600);
  }

  .bg-indigo-500 {
    background-color: var(--color-indigo-500);
  }

  .bg-indigo-500\/20 {
    background-color: color-mix(in srgb, oklch(.585 .233 277.117) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-indigo-500\/20 {
      background-color: color-mix(in oklab, var(--color-indigo-500) 20%, transparent);
    }
  }

  .bg-input {
    background-color: var(--input);
  }

  .bg-input-background {
    background-color: var(--input-background);
  }

  .bg-muted {
    background-color: var(--muted);
  }

  .bg-muted-foreground {
    background-color: var(--muted-foreground);
  }

  .bg-muted\/20 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/20 {
      background-color: color-mix(in oklab, var(--muted) 20%, transparent);
    }
  }

  .bg-muted\/30 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/30 {
      background-color: color-mix(in oklab, var(--muted) 30%, 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-orange-50 {
    background-color: var(--color-orange-50);
  }

  .bg-orange-400 {
    background-color: var(--color-orange-400);
  }

  .bg-orange-400\/10 {
    background-color: color-mix(in srgb, oklch(.75 .183 55.934) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-orange-400\/10 {
      background-color: color-mix(in oklab, var(--color-orange-400) 10%, transparent);
    }
  }

  .bg-orange-500 {
    background-color: var(--color-orange-500);
  }

  .bg-orange-500\/5 {
    background-color: color-mix(in srgb, oklch(.705 .213 47.604) 5%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-orange-500\/5 {
      background-color: color-mix(in oklab, var(--color-orange-500) 5%, transparent);
    }
  }

  .bg-orange-500\/10 {
    background-color: color-mix(in srgb, oklch(.705 .213 47.604) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-orange-500\/10 {
      background-color: color-mix(in oklab, var(--color-orange-500) 10%, transparent);
    }
  }

  .bg-orange-500\/20 {
    background-color: color-mix(in srgb, oklch(.705 .213 47.604) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-orange-500\/20 {
      background-color: color-mix(in oklab, var(--color-orange-500) 20%, transparent);
    }
  }

  .bg-pink-500 {
    background-color: var(--color-pink-500);
  }

  .bg-pink-500\/20 {
    background-color: color-mix(in srgb, oklch(.656 .241 354.308) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-pink-500\/20 {
      background-color: color-mix(in oklab, var(--color-pink-500) 20%, transparent);
    }
  }

  .bg-pink-600 {
    background-color: var(--color-pink-600);
  }

  .bg-popover {
    background-color: var(--popover);
  }

  .bg-primary {
    background-color: var(--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\/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-primary\/30 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/30 {
      background-color: color-mix(in oklab, var(--primary) 30%, transparent);
    }
  }

  .bg-primary\/60 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/60 {
      background-color: color-mix(in oklab, var(--primary) 60%, transparent);
    }
  }

  .bg-purple-100 {
    background-color: var(--color-purple-100);
  }

  .bg-purple-400 {
    background-color: var(--color-purple-400);
  }

  .bg-purple-500 {
    background-color: var(--color-purple-500);
  }

  .bg-purple-500\/5 {
    background-color: color-mix(in srgb, oklch(.627 .265 303.9) 5%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-purple-500\/5 {
      background-color: color-mix(in oklab, var(--color-purple-500) 5%, transparent);
    }
  }

  .bg-purple-500\/10 {
    background-color: color-mix(in srgb, oklch(.627 .265 303.9) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-purple-500\/10 {
      background-color: color-mix(in oklab, var(--color-purple-500) 10%, transparent);
    }
  }

  .bg-purple-500\/20 {
    background-color: color-mix(in srgb, oklch(.627 .265 303.9) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-purple-500\/20 {
      background-color: color-mix(in oklab, var(--color-purple-500) 20%, transparent);
    }
  }

  .bg-purple-600 {
    background-color: var(--color-purple-600);
  }

  .bg-red-50 {
    background-color: var(--color-red-50);
  }

  .bg-red-100 {
    background-color: var(--color-red-100);
  }

  .bg-red-400 {
    background-color: var(--color-red-400);
  }

  .bg-red-500 {
    background-color: var(--color-red-500);
  }

  .bg-red-500\/10 {
    background-color: color-mix(in srgb, oklch(.637 .237 25.331) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-500\/10 {
      background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
    }
  }

  .bg-red-500\/20 {
    background-color: color-mix(in srgb, oklch(.637 .237 25.331) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-500\/20 {
      background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
    }
  }

  .bg-red-600 {
    background-color: var(--color-red-600);
  }

  .bg-secondary {
    background-color: var(--secondary);
  }

  .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\/30 {
    background-color: var(--secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-secondary\/30 {
      background-color: color-mix(in oklab, var(--secondary) 30%, 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-slate-800\/40 {
    background-color: color-mix(in srgb, oklch(.279 .041 260.031) 40%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-slate-800\/40 {
      background-color: color-mix(in oklab, var(--color-slate-800) 40%, transparent);
    }
  }

  .bg-slate-800\/60 {
    background-color: color-mix(in srgb, oklch(.279 .041 260.031) 60%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-slate-800\/60 {
      background-color: color-mix(in oklab, var(--color-slate-800) 60%, transparent);
    }
  }

  .bg-slate-900 {
    background-color: var(--color-slate-900);
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-warning\/10 {
    background-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-warning\/10 {
      background-color: color-mix(in oklab, var(--warning) 10%, transparent);
    }
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .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\/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\/20 {
    background-color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/20 {
      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .bg-white\/30 {
    background-color: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/30 {
      background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .bg-white\/60 {
    background-color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/60 {
      background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .bg-yellow-50 {
    background-color: var(--color-yellow-50);
  }

  .bg-yellow-100 {
    background-color: var(--color-yellow-100);
  }

  .bg-yellow-400 {
    background-color: var(--color-yellow-400);
  }

  .bg-yellow-400\/10 {
    background-color: color-mix(in srgb, oklch(.852 .199 91.936) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-yellow-400\/10 {
      background-color: color-mix(in oklab, var(--color-yellow-400) 10%, transparent);
    }
  }

  .bg-yellow-500 {
    background-color: var(--color-yellow-500);
  }

  .bg-yellow-500\/5 {
    background-color: color-mix(in srgb, oklch(.795 .184 86.047) 5%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-yellow-500\/5 {
      background-color: color-mix(in oklab, var(--color-yellow-500) 5%, transparent);
    }
  }

  .bg-yellow-500\/10 {
    background-color: color-mix(in srgb, oklch(.795 .184 86.047) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-yellow-500\/10 {
      background-color: color-mix(in oklab, var(--color-yellow-500) 10%, transparent);
    }
  }

  .bg-yellow-500\/20 {
    background-color: color-mix(in srgb, oklch(.795 .184 86.047) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-yellow-500\/20 {
      background-color: color-mix(in oklab, var(--color-yellow-500) 20%, transparent);
    }
  }

  .bg-yellow-600 {
    background-color: var(--color-yellow-600);
  }

  .bg-zinc-900 {
    background-color: var(--color-zinc-900);
  }

  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-bl {
    --tw-gradient-position: to bottom left in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right 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-r {
    --tw-gradient-position: to right 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-gradient-to-tr {
    --tw-gradient-position: to top right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .from-\[\#00c77c\] {
    --tw-gradient-from: #00c77c;
    --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-\[\#00c77c\]\/10 {
    --tw-gradient-from: oklab(73.0533% -.159032 .0654098 / .1);
    --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-\[\#00c77c\]\/15 {
    --tw-gradient-from: oklab(73.0533% -.159032 .0654098 / .15);
    --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-\[\#00d084\] {
    --tw-gradient-from: #00d084;
    --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-\[\#00d084\]\/5 {
    --tw-gradient-from: oklab(75.5558% -.163383 .0650536 / .05);
    --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-\[\#00d084\]\/10 {
    --tw-gradient-from: oklab(75.5558% -.163383 .0650536 / .1);
    --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-\[\#00d084\]\/15 {
    --tw-gradient-from: oklab(75.5558% -.163383 .0650536 / .15);
    --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-\[\#00d084\]\/20 {
    --tw-gradient-from: oklab(75.5558% -.163383 .0650536 / .2);
    --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-\[\#00d084\]\/30 {
    --tw-gradient-from: oklab(75.5558% -.163383 .0650536 / .3);
    --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-\[\#00d084\]\/60 {
    --tw-gradient-from: oklab(75.5558% -.163383 .0650536 / .6);
    --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-\[\#1c1c1c\] {
    --tw-gradient-from: #1c1c1c;
    --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-\[\#1c1c1c\]\/90 {
    --tw-gradient-from: oklab(22.645% 2.98023e-8 -1.49012e-8 / .9);
    --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-\[\#04d484\] {
    --tw-gradient-from: #04d484;
    --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-\[\#04d484\]\/10 {
    --tw-gradient-from: oklab(76.6082% -.166608 .0691372 / .1);
    --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-accent {
    --tw-gradient-from: var(--accent);
    --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-accent\/20 {
    --tw-gradient-from: var(--accent);
    --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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-accent\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--accent) 20%, transparent);
    }
  }

  .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-blue-50 {
    --tw-gradient-from: var(--color-blue-50);
    --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-blue-500 {
    --tw-gradient-from: var(--color-blue-500);
    --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-blue-500\/10 {
    --tw-gradient-from: color-mix(in srgb, oklch(.623 .214 259.815) 10%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-blue-500\/10 {
      --tw-gradient-from: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
    }
  }

  .from-blue-500\/20 {
    --tw-gradient-from: color-mix(in srgb, oklch(.623 .214 259.815) 20%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-blue-500\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
    }
  }

  .from-blue-500\/30 {
    --tw-gradient-from: color-mix(in srgb, oklch(.623 .214 259.815) 30%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-blue-500\/30 {
      --tw-gradient-from: color-mix(in oklab, var(--color-blue-500) 30%, transparent);
    }
  }

  .from-blue-600 {
    --tw-gradient-from: var(--color-blue-600);
    --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-blue-700 {
    --tw-gradient-from: var(--color-blue-700);
    --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-cyan-500 {
    --tw-gradient-from: var(--color-cyan-500);
    --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-destructive {
    --tw-gradient-from: var(--destructive);
    --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-emerald-50 {
    --tw-gradient-from: var(--color-emerald-50);
    --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-emerald-100 {
    --tw-gradient-from: var(--color-emerald-100);
    --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-emerald-300 {
    --tw-gradient-from: var(--color-emerald-300);
    --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-emerald-400 {
    --tw-gradient-from: var(--color-emerald-400);
    --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-emerald-500 {
    --tw-gradient-from: var(--color-emerald-500);
    --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-emerald-500\/10 {
    --tw-gradient-from: color-mix(in srgb, oklch(.696 .17 162.48) 10%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-emerald-500\/10 {
      --tw-gradient-from: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
    }
  }

  .from-emerald-500\/20 {
    --tw-gradient-from: color-mix(in srgb, oklch(.696 .17 162.48) 20%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-emerald-500\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
    }
  }

  .from-emerald-600 {
    --tw-gradient-from: var(--color-emerald-600);
    --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-gray-50 {
    --tw-gradient-from: var(--color-gray-50);
    --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-gray-500 {
    --tw-gradient-from: var(--color-gray-500);
    --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-gray-500\/20 {
    --tw-gradient-from: color-mix(in srgb, oklch(.551 .027 264.364) 20%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-gray-500\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-gray-500) 20%, transparent);
    }
  }

  .from-gray-600 {
    --tw-gradient-from: var(--color-gray-600);
    --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-gray-900 {
    --tw-gradient-from: var(--color-gray-900);
    --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-green-50 {
    --tw-gradient-from: var(--color-green-50);
    --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-green-100 {
    --tw-gradient-from: var(--color-green-100);
    --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-green-400 {
    --tw-gradient-from: var(--color-green-400);
    --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-green-400\/5 {
    --tw-gradient-from: color-mix(in srgb, oklch(.792 .209 151.711) 5%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-green-400\/5 {
      --tw-gradient-from: color-mix(in oklab, var(--color-green-400) 5%, transparent);
    }
  }

  .from-green-400\/50 {
    --tw-gradient-from: color-mix(in srgb, oklch(.792 .209 151.711) 50%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-green-400\/50 {
      --tw-gradient-from: color-mix(in oklab, var(--color-green-400) 50%, transparent);
    }
  }

  .from-green-500 {
    --tw-gradient-from: var(--color-green-500);
    --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-green-500\/5 {
    --tw-gradient-from: color-mix(in srgb, oklch(.723 .219 149.579) 5%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-green-500\/5 {
      --tw-gradient-from: color-mix(in oklab, var(--color-green-500) 5%, transparent);
    }
  }

  .from-green-500\/10 {
    --tw-gradient-from: color-mix(in srgb, oklch(.723 .219 149.579) 10%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-green-500\/10 {
      --tw-gradient-from: color-mix(in oklab, var(--color-green-500) 10%, transparent);
    }
  }

  .from-green-500\/20 {
    --tw-gradient-from: color-mix(in srgb, oklch(.723 .219 149.579) 20%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-green-500\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-green-500) 20%, transparent);
    }
  }

  .from-green-500\/30 {
    --tw-gradient-from: color-mix(in srgb, oklch(.723 .219 149.579) 30%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-green-500\/30 {
      --tw-gradient-from: color-mix(in oklab, var(--color-green-500) 30%, transparent);
    }
  }

  .from-green-600 {
    --tw-gradient-from: var(--color-green-600);
    --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-indigo-500 {
    --tw-gradient-from: var(--color-indigo-500);
    --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-orange-500 {
    --tw-gradient-from: var(--color-orange-500);
    --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-orange-600 {
    --tw-gradient-from: var(--color-orange-600);
    --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-pink-500 {
    --tw-gradient-from: var(--color-pink-500);
    --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-primary {
    --tw-gradient-from: var(--primary);
    --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-primary\/5 {
    --tw-gradient-from: var(--primary);
    --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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-primary\/5 {
      --tw-gradient-from: color-mix(in oklab, var(--primary) 5%, transparent);
    }
  }

  .from-primary\/10 {
    --tw-gradient-from: var(--primary);
    --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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-primary\/10 {
      --tw-gradient-from: color-mix(in oklab, var(--primary) 10%, transparent);
    }
  }

  .from-primary\/20 {
    --tw-gradient-from: var(--primary);
    --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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-primary\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--primary) 20%, transparent);
    }
  }

  .from-primary\/30 {
    --tw-gradient-from: var(--primary);
    --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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-primary\/30 {
      --tw-gradient-from: color-mix(in oklab, var(--primary) 30%, transparent);
    }
  }

  .from-primary\/60 {
    --tw-gradient-from: var(--primary);
    --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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-primary\/60 {
      --tw-gradient-from: color-mix(in oklab, var(--primary) 60%, transparent);
    }
  }

  .from-primary\/80 {
    --tw-gradient-from: var(--primary);
    --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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-primary\/80 {
      --tw-gradient-from: color-mix(in oklab, var(--primary) 80%, transparent);
    }
  }

  .from-purple-50 {
    --tw-gradient-from: var(--color-purple-50);
    --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-purple-100 {
    --tw-gradient-from: var(--color-purple-100);
    --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-purple-500 {
    --tw-gradient-from: var(--color-purple-500);
    --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-purple-500\/5 {
    --tw-gradient-from: color-mix(in srgb, oklch(.627 .265 303.9) 5%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-purple-500\/5 {
      --tw-gradient-from: color-mix(in oklab, var(--color-purple-500) 5%, transparent);
    }
  }

  .from-purple-500\/10 {
    --tw-gradient-from: color-mix(in srgb, oklch(.627 .265 303.9) 10%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-purple-500\/10 {
      --tw-gradient-from: color-mix(in oklab, var(--color-purple-500) 10%, transparent);
    }
  }

  .from-purple-500\/20 {
    --tw-gradient-from: color-mix(in srgb, oklch(.627 .265 303.9) 20%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-purple-500\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-purple-500) 20%, transparent);
    }
  }

  .from-purple-500\/30 {
    --tw-gradient-from: color-mix(in srgb, oklch(.627 .265 303.9) 30%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-purple-500\/30 {
      --tw-gradient-from: color-mix(in oklab, var(--color-purple-500) 30%, transparent);
    }
  }

  .from-purple-600 {
    --tw-gradient-from: var(--color-purple-600);
    --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-purple-700 {
    --tw-gradient-from: var(--color-purple-700);
    --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-red-50 {
    --tw-gradient-from: var(--color-red-50);
    --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-red-500 {
    --tw-gradient-from: var(--color-red-500);
    --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-red-500\/10 {
    --tw-gradient-from: color-mix(in srgb, oklch(.637 .237 25.331) 10%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-red-500\/10 {
      --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 10%, transparent);
    }
  }

  .from-red-600 {
    --tw-gradient-from: var(--color-red-600);
    --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-slate-600 {
    --tw-gradient-from: var(--color-slate-600);
    --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-slate-800 {
    --tw-gradient-from: var(--color-slate-800);
    --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-slate-800\/40 {
    --tw-gradient-from: color-mix(in srgb, oklch(.279 .041 260.031) 40%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-slate-800\/40 {
      --tw-gradient-from: color-mix(in oklab, var(--color-slate-800) 40%, transparent);
    }
  }

  .from-slate-800\/60 {
    --tw-gradient-from: color-mix(in srgb, oklch(.279 .041 260.031) 60%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-slate-800\/60 {
      --tw-gradient-from: color-mix(in oklab, var(--color-slate-800) 60%, transparent);
    }
  }

  .from-slate-900 {
    --tw-gradient-from: var(--color-slate-900);
    --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-slate-900\/50 {
    --tw-gradient-from: color-mix(in srgb, oklch(.208 .042 265.755) 50%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-slate-900\/50 {
      --tw-gradient-from: color-mix(in oklab, var(--color-slate-900) 50%, transparent);
    }
  }

  .from-teal-500 {
    --tw-gradient-from: var(--color-teal-500);
    --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-transparent {
    --tw-gradient-from: 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));
  }

  .from-violet-500 {
    --tw-gradient-from: var(--color-violet-500);
    --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-warning\/20 {
    --tw-gradient-from: var(--warning);
    --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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-warning\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--warning) 20%, transparent);
    }
  }

  .from-white {
    --tw-gradient-from: var(--color-white);
    --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-white\/20 {
    --tw-gradient-from: #fff3;
    --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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-white\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .from-yellow-400 {
    --tw-gradient-from: var(--color-yellow-400);
    --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-yellow-500 {
    --tw-gradient-from: var(--color-yellow-500);
    --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-yellow-500\/20 {
    --tw-gradient-from: color-mix(in srgb, oklch(.795 .184 86.047) 20%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-yellow-500\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-yellow-500) 20%, transparent);
    }
  }

  .via-\[\#00c77c\] {
    --tw-gradient-via: #00c77c;
    --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);
  }

  .via-\[\#00c77c\]\/5 {
    --tw-gradient-via: oklab(73.0533% -.159032 .0654098 / .05);
    --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);
  }

  .via-\[\#00c77c\]\/10 {
    --tw-gradient-via: oklab(73.0533% -.159032 .0654098 / .1);
    --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);
  }

  .via-\[\#00c77c\]\/15 {
    --tw-gradient-via: oklab(73.0533% -.159032 .0654098 / .15);
    --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);
  }

  .via-\[\#00c77c\]\/40 {
    --tw-gradient-via: oklab(73.0533% -.159032 .0654098 / .4);
    --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);
  }

  .via-\[\#00d084\] {
    --tw-gradient-via: #00d084;
    --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);
  }

  .via-\[\#00d084\]\/5 {
    --tw-gradient-via: oklab(75.5558% -.163383 .0650536 / .05);
    --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);
  }

  .via-\[\#00d084\]\/30 {
    --tw-gradient-via: oklab(75.5558% -.163383 .0650536 / .3);
    --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);
  }

  .via-\[\#1c1c1c\]\/40 {
    --tw-gradient-via: oklab(22.645% 2.98023e-8 -1.49012e-8 / .4);
    --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);
  }

  .via-\[\#242424\] {
    --tw-gradient-via: #242424;
    --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);
  }

  .via-background {
    --tw-gradient-via: var(--background);
    --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);
  }

  .via-emerald-400 {
    --tw-gradient-via: var(--color-emerald-400);
    --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);
  }

  .via-gray-800 {
    --tw-gradient-via: var(--color-gray-800);
    --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);
  }

  .via-green-400 {
    --tw-gradient-via: var(--color-green-400);
    --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);
  }

  .via-green-500 {
    --tw-gradient-via: var(--color-green-500);
    --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);
  }

  .via-green-500\/20 {
    --tw-gradient-via: color-mix(in srgb, oklch(.723 .219 149.579) 20%, transparent);
    --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);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-green-500\/20 {
      --tw-gradient-via: color-mix(in oklab, var(--color-green-500) 20%, transparent);
    }
  }

  .via-green-500\/30 {
    --tw-gradient-via: color-mix(in srgb, oklch(.723 .219 149.579) 30%, transparent);
    --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);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-green-500\/30 {
      --tw-gradient-via: color-mix(in oklab, var(--color-green-500) 30%, transparent);
    }
  }

  .via-primary\/30 {
    --tw-gradient-via: var(--primary);
    --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);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-primary\/30 {
      --tw-gradient-via: color-mix(in oklab, var(--primary) 30%, transparent);
    }
  }

  .via-slate-800\/30 {
    --tw-gradient-via: color-mix(in srgb, oklch(.279 .041 260.031) 30%, transparent);
    --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);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-slate-800\/30 {
      --tw-gradient-via: color-mix(in oklab, var(--color-slate-800) 30%, transparent);
    }
  }

  .via-teal-50 {
    --tw-gradient-via: var(--color-teal-50);
    --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);
  }

  .via-transparent {
    --tw-gradient-via: transparent;
    --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);
  }

  .via-white {
    --tw-gradient-via: var(--color-white);
    --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);
  }

  .via-white\/10 {
    --tw-gradient-via: #ffffff1a;
    --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);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-white\/10 {
      --tw-gradient-via: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .via-white\/30 {
    --tw-gradient-via: #ffffff4d;
    --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);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-white\/30 {
      --tw-gradient-via: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .to-\[\#00c77c\] {
    --tw-gradient-to: #00c77c;
    --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-\[\#00c77c\]\/5 {
    --tw-gradient-to: oklab(73.0533% -.159032 .0654098 / .05);
    --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-\[\#00c77c\]\/10 {
    --tw-gradient-to: oklab(73.0533% -.159032 .0654098 / .1);
    --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-\[\#00c77c\]\/20 {
    --tw-gradient-to: oklab(73.0533% -.159032 .0654098 / .2);
    --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-\[\#00d084\] {
    --tw-gradient-to: #00d084;
    --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-\[\#00d084\]\/5 {
    --tw-gradient-to: oklab(75.5558% -.163383 .0650536 / .05);
    --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-\[\#00d084\]\/10 {
    --tw-gradient-to: oklab(75.5558% -.163383 .0650536 / .1);
    --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-\[\#00d084\]\/15 {
    --tw-gradient-to: oklab(75.5558% -.163383 .0650536 / .15);
    --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-\[\#00d084\]\/20 {
    --tw-gradient-to: oklab(75.5558% -.163383 .0650536 / .2);
    --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-\[\#00d084\]\/30 {
    --tw-gradient-to: oklab(75.5558% -.163383 .0650536 / .3);
    --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-\[\#141414\] {
    --tw-gradient-to: #141414;
    --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-accent {
    --tw-gradient-to: var(--accent);
    --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-accent\/5 {
    --tw-gradient-to: var(--accent);
    --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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-accent\/5 {
      --tw-gradient-to: color-mix(in oklab, var(--accent) 5%, transparent);
    }
  }

  .to-accent\/10 {
    --tw-gradient-to: var(--accent);
    --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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-accent\/10 {
      --tw-gradient-to: color-mix(in oklab, var(--accent) 10%, transparent);
    }
  }

  .to-accent\/20 {
    --tw-gradient-to: var(--accent);
    --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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-accent\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--accent) 20%, transparent);
    }
  }

  .to-accent\/80 {
    --tw-gradient-to: var(--accent);
    --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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-accent\/80 {
      --tw-gradient-to: color-mix(in oklab, var(--accent) 80%, transparent);
    }
  }

  .to-amber-500 {
    --tw-gradient-to: var(--color-amber-500);
    --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-background {
    --tw-gradient-to: 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));
  }

  .to-blue-50 {
    --tw-gradient-to: var(--color-blue-50);
    --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-blue-500 {
    --tw-gradient-to: var(--color-blue-500);
    --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-blue-500\/10 {
    --tw-gradient-to: color-mix(in srgb, oklch(.623 .214 259.815) 10%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-blue-500\/10 {
      --tw-gradient-to: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
    }
  }

  .to-blue-500\/20 {
    --tw-gradient-to: color-mix(in srgb, oklch(.623 .214 259.815) 20%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-blue-500\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
    }
  }

  .to-blue-600 {
    --tw-gradient-to: var(--color-blue-600);
    --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-blue-700 {
    --tw-gradient-to: var(--color-blue-700);
    --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-cyan-50 {
    --tw-gradient-to: var(--color-cyan-50);
    --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-cyan-500 {
    --tw-gradient-to: var(--color-cyan-500);
    --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-cyan-500\/30 {
    --tw-gradient-to: color-mix(in srgb, oklch(.715 .143 215.221) 30%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-cyan-500\/30 {
      --tw-gradient-to: color-mix(in oklab, var(--color-cyan-500) 30%, transparent);
    }
  }

  .to-cyan-600 {
    --tw-gradient-to: var(--color-cyan-600);
    --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-emerald-400 {
    --tw-gradient-to: var(--color-emerald-400);
    --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-emerald-500 {
    --tw-gradient-to: var(--color-emerald-500);
    --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-emerald-500\/5 {
    --tw-gradient-to: color-mix(in srgb, oklch(.696 .17 162.48) 5%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-emerald-500\/5 {
      --tw-gradient-to: color-mix(in oklab, var(--color-emerald-500) 5%, transparent);
    }
  }

  .to-emerald-500\/10 {
    --tw-gradient-to: color-mix(in srgb, oklch(.696 .17 162.48) 10%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-emerald-500\/10 {
      --tw-gradient-to: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
    }
  }

  .to-emerald-500\/20 {
    --tw-gradient-to: color-mix(in srgb, oklch(.696 .17 162.48) 20%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-emerald-500\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
    }
  }

  .to-emerald-500\/30 {
    --tw-gradient-to: color-mix(in srgb, oklch(.696 .17 162.48) 30%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-emerald-500\/30 {
      --tw-gradient-to: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
    }
  }

  .to-emerald-600 {
    --tw-gradient-to: var(--color-emerald-600);
    --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-gray-50 {
    --tw-gradient-to: var(--color-gray-50);
    --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-gray-300 {
    --tw-gradient-to: var(--color-gray-300);
    --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-gray-400 {
    --tw-gradient-to: var(--color-gray-400);
    --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-gray-400\/20 {
    --tw-gradient-to: color-mix(in srgb, oklch(.707 .022 261.325) 20%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-gray-400\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--color-gray-400) 20%, transparent);
    }
  }

  .to-gray-600 {
    --tw-gradient-to: var(--color-gray-600);
    --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-gray-800 {
    --tw-gradient-to: var(--color-gray-800);
    --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-gray-900 {
    --tw-gradient-to: var(--color-gray-900);
    --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-green-50 {
    --tw-gradient-to: var(--color-green-50);
    --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-green-100 {
    --tw-gradient-to: var(--color-green-100);
    --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-green-200 {
    --tw-gradient-to: var(--color-green-200);
    --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-green-300 {
    --tw-gradient-to: var(--color-green-300);
    --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-green-400 {
    --tw-gradient-to: var(--color-green-400);
    --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-green-500 {
    --tw-gradient-to: var(--color-green-500);
    --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-green-500\/20 {
    --tw-gradient-to: color-mix(in srgb, oklch(.723 .219 149.579) 20%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-green-500\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--color-green-500) 20%, transparent);
    }
  }

  .to-green-600 {
    --tw-gradient-to: var(--color-green-600);
    --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-green-600\/5 {
    --tw-gradient-to: color-mix(in srgb, oklch(.627 .194 149.214) 5%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-green-600\/5 {
      --tw-gradient-to: color-mix(in oklab, var(--color-green-600) 5%, transparent);
    }
  }

  .to-green-600\/20 {
    --tw-gradient-to: color-mix(in srgb, oklch(.627 .194 149.214) 20%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-green-600\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--color-green-600) 20%, transparent);
    }
  }

  .to-green-600\/50 {
    --tw-gradient-to: color-mix(in srgb, oklch(.627 .194 149.214) 50%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-green-600\/50 {
      --tw-gradient-to: color-mix(in oklab, var(--color-green-600) 50%, transparent);
    }
  }

  .to-green-700 {
    --tw-gradient-to: var(--color-green-700);
    --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-indigo-50 {
    --tw-gradient-to: var(--color-indigo-50);
    --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-indigo-100 {
    --tw-gradient-to: var(--color-indigo-100);
    --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-indigo-500 {
    --tw-gradient-to: var(--color-indigo-500);
    --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-indigo-500\/30 {
    --tw-gradient-to: color-mix(in srgb, oklch(.585 .233 277.117) 30%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-indigo-500\/30 {
      --tw-gradient-to: color-mix(in oklab, var(--color-indigo-500) 30%, transparent);
    }
  }

  .to-indigo-600 {
    --tw-gradient-to: var(--color-indigo-600);
    --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-indigo-700 {
    --tw-gradient-to: var(--color-indigo-700);
    --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-orange-500 {
    --tw-gradient-to: var(--color-orange-500);
    --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-orange-500\/10 {
    --tw-gradient-to: color-mix(in srgb, oklch(.705 .213 47.604) 10%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-orange-500\/10 {
      --tw-gradient-to: color-mix(in oklab, var(--color-orange-500) 10%, transparent);
    }
  }

  .to-orange-500\/20 {
    --tw-gradient-to: color-mix(in srgb, oklch(.705 .213 47.604) 20%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-orange-500\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--color-orange-500) 20%, transparent);
    }
  }

  .to-orange-600 {
    --tw-gradient-to: var(--color-orange-600);
    --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-pink-50 {
    --tw-gradient-to: var(--color-pink-50);
    --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-pink-500 {
    --tw-gradient-to: var(--color-pink-500);
    --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-pink-500\/20 {
    --tw-gradient-to: color-mix(in srgb, oklch(.656 .241 354.308) 20%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-pink-500\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--color-pink-500) 20%, transparent);
    }
  }

  .to-pink-600 {
    --tw-gradient-to: var(--color-pink-600);
    --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-primary {
    --tw-gradient-to: var(--primary);
    --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-primary\/10 {
    --tw-gradient-to: var(--primary);
    --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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-primary\/10 {
      --tw-gradient-to: color-mix(in oklab, var(--primary) 10%, transparent);
    }
  }

  .to-primary\/20 {
    --tw-gradient-to: var(--primary);
    --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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-primary\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--primary) 20%, transparent);
    }
  }

  .to-purple-50 {
    --tw-gradient-to: var(--color-purple-50);
    --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-purple-500 {
    --tw-gradient-to: var(--color-purple-500);
    --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-purple-500\/10 {
    --tw-gradient-to: color-mix(in srgb, oklch(.627 .265 303.9) 10%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-purple-500\/10 {
      --tw-gradient-to: color-mix(in oklab, var(--color-purple-500) 10%, transparent);
    }
  }

  .to-purple-500\/20 {
    --tw-gradient-to: color-mix(in srgb, oklch(.627 .265 303.9) 20%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-purple-500\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--color-purple-500) 20%, transparent);
    }
  }

  .to-purple-600 {
    --tw-gradient-to: var(--color-purple-600);
    --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-red-100 {
    --tw-gradient-to: var(--color-red-100);
    --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-red-400 {
    --tw-gradient-to: var(--color-red-400);
    --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-red-500 {
    --tw-gradient-to: var(--color-red-500);
    --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-red-500\/20 {
    --tw-gradient-to: color-mix(in srgb, oklch(.637 .237 25.331) 20%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-red-500\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 20%, transparent);
    }
  }

  .to-red-600 {
    --tw-gradient-to: var(--color-red-600);
    --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-rose-500 {
    --tw-gradient-to: var(--color-rose-500);
    --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-secondary\/20 {
    --tw-gradient-to: 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-secondary\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--secondary) 20%, transparent);
    }
  }

  .to-slate-600 {
    --tw-gradient-to: var(--color-slate-600);
    --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-slate-900 {
    --tw-gradient-to: var(--color-slate-900);
    --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-slate-900\/40 {
    --tw-gradient-to: color-mix(in srgb, oklch(.208 .042 265.755) 40%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-slate-900\/40 {
      --tw-gradient-to: color-mix(in oklab, var(--color-slate-900) 40%, transparent);
    }
  }

  .to-slate-900\/50 {
    --tw-gradient-to: color-mix(in srgb, oklch(.208 .042 265.755) 50%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-slate-900\/50 {
      --tw-gradient-to: color-mix(in oklab, var(--color-slate-900) 50%, transparent);
    }
  }

  .to-slate-900\/60 {
    --tw-gradient-to: color-mix(in srgb, oklch(.208 .042 265.755) 60%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-slate-900\/60 {
      --tw-gradient-to: color-mix(in oklab, var(--color-slate-900) 60%, transparent);
    }
  }

  .to-teal-100 {
    --tw-gradient-to: var(--color-teal-100);
    --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-teal-400 {
    --tw-gradient-to: var(--color-teal-400);
    --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-teal-500 {
    --tw-gradient-to: var(--color-teal-500);
    --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-teal-500\/10 {
    --tw-gradient-to: color-mix(in srgb, oklch(.704 .14 182.503) 10%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-teal-500\/10 {
      --tw-gradient-to: color-mix(in oklab, var(--color-teal-500) 10%, transparent);
    }
  }

  .to-teal-500\/20 {
    --tw-gradient-to: color-mix(in srgb, oklch(.704 .14 182.503) 20%, 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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-teal-500\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--color-teal-500) 20%, transparent);
    }
  }

  .to-teal-600 {
    --tw-gradient-to: var(--color-teal-600);
    --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));
  }

  .to-warning\/20 {
    --tw-gradient-to: var(--warning);
    --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));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-warning\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--warning) 20%, transparent);
    }
  }

  .to-yellow-500 {
    --tw-gradient-to: var(--color-yellow-500);
    --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-yellow-600 {
    --tw-gradient-to: var(--color-yellow-600);
    --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-clip-text {
    background-clip: text;
  }

  .fill-current {
    fill: currentColor;
  }

  .fill-none {
    fill: none;
  }

  .fill-yellow-400 {
    fill: var(--color-yellow-400);
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .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-7 {
    padding: calc(var(--spacing) * 7);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .p-10 {
    padding: calc(var(--spacing) * 10);
  }

  .p-12 {
    padding: calc(var(--spacing) * 12);
  }

  .p-\[3px\] {
    padding: 3px;
  }

  .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-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .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-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }

  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }

  .py-24 {
    padding-block: calc(var(--spacing) * 24);
  }

  .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-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-12 {
    padding-top: calc(var(--spacing) * 12);
  }

  .pt-16 {
    padding-top: calc(var(--spacing) * 16);
  }

  .pt-20 {
    padding-top: calc(var(--spacing) * 20);
  }

  .pt-32 {
    padding-top: calc(var(--spacing) * 32);
  }

  .pt-40 {
    padding-top: calc(var(--spacing) * 40);
  }

  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }

  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }

  .pr-14 {
    padding-right: calc(var(--spacing) * 14);
  }

  .pr-28 {
    padding-right: calc(var(--spacing) * 28);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }

  .pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
  }

  .pl-1 {
    padding-left: calc(var(--spacing) * 1);
  }

  .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-6 {
    padding-left: calc(var(--spacing) * 6);
  }

  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }

  .pl-9 {
    padding-left: calc(var(--spacing) * 9);
  }

  .pl-10 {
    padding-left: calc(var(--spacing) * 10);
  }

  .pl-12 {
    padding-left: calc(var(--spacing) * 12);
  }

  .pl-14 {
    padding-left: calc(var(--spacing) * 14);
  }

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

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .align-middle {
    vertical-align: middle;
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .font-sans {
    font-family: var(--font-sans);
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }

  .text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[12px\] {
    font-size: 12px;
  }

  .text-\[16px\] {
    font-size: 16px;
  }

  .text-\[20px\] {
    font-size: 20px;
  }

  .text-\[26px\] {
    font-size: 26px;
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }

  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }

  .break-all {
    word-break: break-all;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  .\!text-green-700 {
    color: var(--color-green-700) !important;
  }

  .\!text-white {
    color: var(--color-white) !important;
  }

  .text-\[\#00c77c\] {
    color: #00c77c;
  }

  .text-\[\#00d084\] {
    color: #00d084;
  }

  .text-\[\#04d484\] {
    color: #04d484;
  }

  .text-accent {
    color: var(--accent);
  }

  .text-amber-600 {
    color: var(--color-amber-600);
  }

  .text-amber-700 {
    color: var(--color-amber-700);
  }

  .text-amber-800 {
    color: var(--color-amber-800);
  }

  .text-black {
    color: var(--color-black);
  }

  .text-blue-200 {
    color: var(--color-blue-200);
  }

  .text-blue-300 {
    color: var(--color-blue-300);
  }

  .text-blue-400 {
    color: var(--color-blue-400);
  }

  .text-blue-500 {
    color: var(--color-blue-500);
  }

  .text-blue-600 {
    color: var(--color-blue-600);
  }

  .text-blue-700 {
    color: var(--color-blue-700);
  }

  .text-blue-800 {
    color: var(--color-blue-800);
  }

  .text-blue-900 {
    color: var(--color-blue-900);
  }

  .text-card-foreground {
    color: var(--card-foreground);
  }

  .text-cyan-400 {
    color: var(--color-cyan-400);
  }

  .text-destructive {
    color: var(--destructive);
  }

  .text-emerald-300 {
    color: var(--color-emerald-300);
  }

  .text-emerald-400 {
    color: var(--color-emerald-400);
  }

  .text-emerald-500 {
    color: var(--color-emerald-500);
  }

  .text-emerald-600 {
    color: var(--color-emerald-600);
  }

  .text-emerald-700 {
    color: var(--color-emerald-700);
  }

  .text-emerald-800 {
    color: var(--color-emerald-800);
  }

  .text-emerald-900 {
    color: var(--color-emerald-900);
  }

  .text-foreground {
    color: var(--foreground);
  }

  .text-gray-200 {
    color: var(--color-gray-200);
  }

  .text-gray-300 {
    color: var(--color-gray-300);
  }

  .text-gray-400 {
    color: var(--color-gray-400);
  }

  .text-gray-500 {
    color: var(--color-gray-500);
  }

  .text-gray-600 {
    color: var(--color-gray-600);
  }

  .text-gray-700 {
    color: var(--color-gray-700);
  }

  .text-gray-800 {
    color: var(--color-gray-800);
  }

  .text-gray-900 {
    color: var(--color-gray-900);
  }

  .text-green-100 {
    color: var(--color-green-100);
  }

  .text-green-200 {
    color: var(--color-green-200);
  }

  .text-green-300 {
    color: var(--color-green-300);
  }

  .text-green-400 {
    color: var(--color-green-400);
  }

  .text-green-500 {
    color: var(--color-green-500);
  }

  .text-green-600 {
    color: var(--color-green-600);
  }

  .text-green-700 {
    color: var(--color-green-700);
  }

  .text-green-800 {
    color: var(--color-green-800);
  }

  .text-green-900 {
    color: var(--color-green-900);
  }

  .text-indigo-400 {
    color: var(--color-indigo-400);
  }

  .text-muted-foreground {
    color: var(--muted-foreground);
  }

  .text-orange-400 {
    color: var(--color-orange-400);
  }

  .text-orange-500 {
    color: var(--color-orange-500);
  }

  .text-orange-600 {
    color: var(--color-orange-600);
  }

  .text-orange-700 {
    color: var(--color-orange-700);
  }

  .text-orange-900 {
    color: var(--color-orange-900);
  }

  .text-pink-400 {
    color: var(--color-pink-400);
  }

  .text-pink-500 {
    color: var(--color-pink-500);
  }

  .text-pink-600 {
    color: var(--color-pink-600);
  }

  .text-popover-foreground {
    color: var(--popover-foreground);
  }

  .text-primary {
    color: var(--primary);
  }

  .text-primary-foreground {
    color: var(--primary-foreground);
  }

  .text-purple-400 {
    color: var(--color-purple-400);
  }

  .text-purple-500 {
    color: var(--color-purple-500);
  }

  .text-purple-600 {
    color: var(--color-purple-600);
  }

  .text-purple-700 {
    color: var(--color-purple-700);
  }

  .text-purple-800 {
    color: var(--color-purple-800);
  }

  .text-purple-900 {
    color: var(--color-purple-900);
  }

  .text-red-200 {
    color: var(--color-red-200);
  }

  .text-red-200\/80 {
    color: color-mix(in srgb, oklch(.885 .062 18.334) 80%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-red-200\/80 {
      color: color-mix(in oklab, var(--color-red-200) 80%, transparent);
    }
  }

  .text-red-300 {
    color: var(--color-red-300);
  }

  .text-red-400 {
    color: var(--color-red-400);
  }

  .text-red-500 {
    color: var(--color-red-500);
  }

  .text-red-600 {
    color: var(--color-red-600);
  }

  .text-red-700 {
    color: var(--color-red-700);
  }

  .text-red-800 {
    color: var(--color-red-800);
  }

  .text-red-900 {
    color: var(--color-red-900);
  }

  .text-secondary-foreground {
    color: var(--secondary-foreground);
  }

  .text-transparent {
    color: #0000;
  }

  .text-warning {
    color: var(--warning);
  }

  .text-white {
    color: var(--color-white);
  }

  .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-200 {
    color: var(--color-yellow-200);
  }

  .text-yellow-300 {
    color: var(--color-yellow-300);
  }

  .text-yellow-400 {
    color: var(--color-yellow-400);
  }

  .text-yellow-500 {
    color: var(--color-yellow-500);
  }

  .text-yellow-600 {
    color: var(--color-yellow-600);
  }

  .text-yellow-700 {
    color: var(--color-yellow-700);
  }

  .text-yellow-800 {
    color: var(--color-yellow-800);
  }

  .text-yellow-900 {
    color: var(--color-yellow-900);
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .underline {
    text-decoration-line: underline;
  }

  .underline-offset-4 {
    text-underline-offset: 4px;
  }

  .placeholder-gray-400::placeholder {
    color: var(--color-gray-400);
  }

  .placeholder-gray-500::placeholder {
    color: var(--color-gray-500);
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-5 {
    opacity: .05;
  }

  .opacity-10 {
    opacity: .1;
  }

  .opacity-20 {
    opacity: .2;
  }

  .opacity-30 {
    opacity: .3;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-75 {
    opacity: .75;
  }

  .opacity-80 {
    opacity: .8;
  }

  .opacity-90 {
    opacity: .9;
  }

  .opacity-100 {
    opacity: 1;
  }

  .mix-blend-overlay {
    mix-blend-mode: overlay;
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    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-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px 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-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-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px 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);
  }

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

  .shadow-accent\/20 {
    --tw-shadow-color: var(--accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-accent\/20 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--accent) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-green-200 {
    --tw-shadow-color: oklch(.925 .084 155.995);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-green-200 {
      --tw-shadow-color: color-mix(in oklab, var(--color-green-200) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-green-300 {
    --tw-shadow-color: oklch(.871 .15 154.449);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-green-300 {
      --tw-shadow-color: color-mix(in oklab, var(--color-green-300) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-green-400\/25 {
    --tw-shadow-color: color-mix(in srgb, oklch(.792 .209 151.711) 25%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-green-400\/25 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-green-400) 25%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-green-400\/50 {
    --tw-shadow-color: color-mix(in srgb, oklch(.792 .209 151.711) 50%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-green-400\/50 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-green-400) 50%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-green-500\/25 {
    --tw-shadow-color: color-mix(in srgb, oklch(.723 .219 149.579) 25%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-green-500\/25 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-green-500) 25%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-red-400\/25 {
    --tw-shadow-color: color-mix(in srgb, oklch(.704 .191 22.216) 25%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-red-400\/25 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-400) 25%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-red-500\/25 {
    --tw-shadow-color: color-mix(in srgb, oklch(.637 .237 25.331) 25%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-red-500\/25 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 25%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .ring-green-400\/30 {
    --tw-ring-color: color-mix(in srgb, oklch(.792 .209 151.711) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-green-400\/30 {
      --tw-ring-color: color-mix(in oklab, var(--color-green-400) 30%, transparent);
    }
  }

  .ring-offset-background {
    --tw-ring-offset-color: var(--background);
  }

  .outline-hidden {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .outline-hidden {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .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-2xl {
    --tw-blur: blur(var(--blur-2xl));
    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-md {
    --tw-blur: blur(var(--blur-md));
    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-sm {
    --tw-blur: blur(var(--blur-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, );
  }

  .blur-xl {
    --tw-blur: blur(var(--blur-xl));
    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 {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f));
    --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
    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-2xl {
    --tw-drop-shadow-size: drop-shadow(0 25px 25px var(--tw-drop-shadow-color, #00000026));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-2xl));
    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-lg {
    --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, #00000026));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-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, );
  }

  .sepia {
    --tw-sepia: sepia(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-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -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-xl {
    --tw-backdrop-blur: blur(var(--blur-xl));
    -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-filter {
    -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;
    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));
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .duration-500 {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .duration-700 {
    --tw-duration: .7s;
    transition-duration: .7s;
  }

  .duration-1000 {
    --tw-duration: 1s;
    transition-duration: 1s;
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .ease-linear {
    --tw-ease: linear;
    transition-timing-function: linear;
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .running {
    animation-play-state: running;
  }

  @media (hover: hover) {
    .group-hover\:translate-x-1:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * 1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }

  @media (hover: hover) {
    .group-hover\:translate-x-\[100\%\]:is(:where(.group):hover *) {
      --tw-translate-x: 100%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }

  @media (hover: hover) {
    .group-hover\:translate-x-full:is(:where(.group):hover *) {
      --tw-translate-x: 100%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }

  @media (hover: hover) {
    .group-hover\:scale-105:is(:where(.group):hover *) {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }

  @media (hover: hover) {
    .group-hover\:scale-110:is(:where(.group):hover *) {
      --tw-scale-x: 110%;
      --tw-scale-y: 110%;
      --tw-scale-z: 110%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }

  @media (hover: hover) {
    .group-hover\:text-\[\#00c77c\]:is(:where(.group):hover *) {
      color: #00c77c;
    }
  }

  @media (hover: hover) {
    .group-hover\:text-\[\#00d084\]:is(:where(.group):hover *) {
      color: #00d084;
    }
  }

  @media (hover: hover) {
    .group-hover\:text-\[\#04d484\]:is(:where(.group):hover *) {
      color: #04d484;
    }
  }

  @media (hover: hover) {
    .group-hover\:text-accent:is(:where(.group):hover *) {
      color: var(--accent);
    }
  }

  @media (hover: hover) {
    .group-hover\:text-emerald-300:is(:where(.group):hover *) {
      color: var(--color-emerald-300);
    }
  }

  @media (hover: hover) {
    .group-hover\:text-foreground:is(:where(.group):hover *) {
      color: var(--foreground);
    }
  }

  @media (hover: hover) {
    .group-hover\:text-gray-600:is(:where(.group):hover *) {
      color: var(--color-gray-600);
    }
  }

  @media (hover: hover) {
    .group-hover\:text-green-300:is(:where(.group):hover *) {
      color: var(--color-green-300);
    }
  }

  @media (hover: hover) {
    .group-hover\:text-green-600:is(:where(.group):hover *) {
      color: var(--color-green-600);
    }
  }

  @media (hover: hover) {
    .group-hover\:text-muted-foreground\/80:is(:where(.group):hover *) {
      color: var(--muted-foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:text-muted-foreground\/80:is(:where(.group):hover *) {
        color: color-mix(in oklab, var(--muted-foreground) 80%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .group-hover\:text-primary:is(:where(.group):hover *) {
      color: var(--primary);
    }
  }

  @media (hover: hover) {
    .group-hover\:text-white:is(:where(.group):hover *) {
      color: var(--color-white);
    }
  }

  @media (hover: hover) {
    .group-hover\:opacity-10:is(:where(.group):hover *) {
      opacity: .1;
    }
  }

  @media (hover: hover) {
    .group-hover\:opacity-20:is(:where(.group):hover *) {
      opacity: .2;
    }
  }

  @media (hover: hover) {
    .group-hover\:opacity-70:is(:where(.group):hover *) {
      opacity: .7;
    }
  }

  @media (hover: hover) {
    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1;
    }
  }

  .selection\:bg-primary ::selection, .selection\:bg-primary::selection {
    background-color: var(--primary);
  }

  .selection\:text-primary-foreground ::selection, .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-sm::file-selector-button {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .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-gray-500::placeholder {
    color: var(--color-gray-500);
  }

  .placeholder\:text-muted-foreground::placeholder {
    color: var(--muted-foreground);
  }

  .last\:border-0:last-child {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .last\:border-b-0:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  @media (hover: hover) {
    .hover\:-translate-y-1:hover {
      --tw-translate-y: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }

  @media (hover: hover) {
    .hover\:scale-101:hover {
      --tw-scale-x: 101%;
      --tw-scale-y: 101%;
      --tw-scale-z: 101%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }

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

  @media (hover: hover) {
    .hover\:scale-110:hover {
      --tw-scale-x: 110%;
      --tw-scale-y: 110%;
      --tw-scale-z: 110%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }

  @media (hover: hover) {
    .hover\:scale-\[1\.02\]:hover {
      scale: 1.02;
    }
  }

  @media (hover: hover) {
    .hover\:rotate-0:hover {
      rotate: none;
    }
  }

  @media (hover: hover) {
    .hover\:rotate-3:hover {
      rotate: 3deg;
    }
  }

  @media (hover: hover) {
    .hover\:border-\[\#00c77c\]:hover {
      border-color: #00c77c;
    }
  }

  @media (hover: hover) {
    .hover\:border-\[\#00c77c\]\/40:hover {
      border-color: oklab(73.0533% -.159032 .0654098 / .4);
    }
  }

  @media (hover: hover) {
    .hover\:border-\[\#00c77c\]\/50:hover {
      border-color: oklab(73.0533% -.159032 .0654098 / .5);
    }
  }

  @media (hover: hover) {
    .hover\:border-\[\#00d084\]:hover {
      border-color: #00d084;
    }
  }

  @media (hover: hover) {
    .hover\:border-\[\#00d084\]\/30:hover {
      border-color: oklab(75.5558% -.163383 .0650536 / .3);
    }
  }

  @media (hover: hover) {
    .hover\:border-\[\#00d084\]\/40:hover {
      border-color: oklab(75.5558% -.163383 .0650536 / .4);
    }
  }

  @media (hover: hover) {
    .hover\:border-\[\#00d084\]\/50:hover {
      border-color: oklab(75.5558% -.163383 .0650536 / .5);
    }
  }

  @media (hover: hover) {
    .hover\:border-\[\#04d484\]\/30:hover {
      border-color: oklab(76.6082% -.166608 .0691372 / .3);
    }
  }

  @media (hover: hover) {
    .hover\:border-accent\/30:hover {
      border-color: var(--accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-accent\/30:hover {
        border-color: color-mix(in oklab, var(--accent) 30%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:border-accent\/50:hover {
      border-color: var(--accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-accent\/50:hover {
        border-color: color-mix(in oklab, var(--accent) 50%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:border-blue-500\/50:hover {
      border-color: color-mix(in srgb, oklch(.623 .214 259.815) 50%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-blue-500\/50:hover {
        border-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:border-border:hover {
      border-color: var(--border);
    }
  }

  @media (hover: hover) {
    .hover\:border-emerald-500\/30:hover {
      border-color: color-mix(in srgb, oklch(.696 .17 162.48) 30%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-emerald-500\/30:hover {
        border-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:border-gray-300:hover {
      border-color: var(--color-gray-300);
    }
  }

  @media (hover: hover) {
    .hover\:border-green-300:hover {
      border-color: var(--color-green-300);
    }
  }

  @media (hover: hover) {
    .hover\:border-green-500\/20:hover {
      border-color: color-mix(in srgb, oklch(.723 .219 149.579) 20%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-green-500\/20:hover {
        border-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:border-green-500\/30:hover {
      border-color: color-mix(in srgb, oklch(.723 .219 149.579) 30%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-green-500\/30:hover {
        border-color: color-mix(in oklab, var(--color-green-500) 30%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:border-green-500\/40:hover {
      border-color: color-mix(in srgb, oklch(.723 .219 149.579) 40%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-green-500\/40:hover {
        border-color: color-mix(in oklab, var(--color-green-500) 40%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:border-green-500\/50:hover {
      border-color: color-mix(in srgb, oklch(.723 .219 149.579) 50%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-green-500\/50:hover {
        border-color: color-mix(in oklab, var(--color-green-500) 50%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:border-primary\/30:hover {
      border-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-primary\/30:hover {
        border-color: color-mix(in oklab, var(--primary) 30%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:border-primary\/40:hover {
      border-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-primary\/40:hover {
        border-color: color-mix(in oklab, var(--primary) 40%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:border-primary\/50:hover {
      border-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-primary\/50:hover {
        border-color: color-mix(in oklab, var(--primary) 50%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:border-primary\/60:hover {
      border-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-primary\/60:hover {
        border-color: color-mix(in oklab, var(--primary) 60%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:border-white\/20:hover {
      border-color: #fff3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-white\/20:hover {
        border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:border-white\/40:hover {
      border-color: #fff6;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-white\/40:hover {
        border-color: color-mix(in oklab, var(--color-white) 40%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:border-yellow-500\/30:hover {
      border-color: color-mix(in srgb, oklch(.795 .184 86.047) 30%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-yellow-500\/30:hover {
        border-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:\!bg-green-50:hover {
      background-color: var(--color-green-50) !important;
    }
  }

  @media (hover: hover) {
    .hover\:\!bg-green-700:hover {
      background-color: var(--color-green-700) !important;
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[\#00c77c\]:hover {
      background-color: #00c77c;
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[\#00d084\]:hover {
      background-color: #00d084;
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[\#2a2a2a\]:hover {
      background-color: #2a2a2a;
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[\#04d484\]\/80:hover {
      background-color: oklab(76.6082% -.166608 .0691372 / .8);
    }
  }

  @media (hover: hover) {
    .hover\:bg-accent:hover {
      background-color: var(--accent);
    }
  }

  @media (hover: hover) {
    .hover\:bg-accent\/5:hover {
      background-color: var(--accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-accent\/5:hover {
        background-color: color-mix(in oklab, var(--accent) 5%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-accent\/10:hover {
      background-color: var(--accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-accent\/10:hover {
        background-color: color-mix(in oklab, var(--accent) 10%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .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);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-accent\/80:hover {
      background-color: var(--accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-accent\/80:hover {
        background-color: color-mix(in oklab, var(--accent) 80%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-blue-500\/10:hover {
      background-color: color-mix(in srgb, oklch(.623 .214 259.815) 10%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-blue-500\/10:hover {
        background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-blue-500\/30:hover {
      background-color: color-mix(in srgb, oklch(.623 .214 259.815) 30%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-blue-500\/30:hover {
        background-color: color-mix(in oklab, var(--color-blue-500) 30%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-blue-700:hover {
      background-color: var(--color-blue-700);
    }
  }

  @media (hover: hover) {
    .hover\:bg-card\/80:hover {
      background-color: var(--card);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-card\/80:hover {
        background-color: color-mix(in oklab, var(--card) 80%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-destructive\/5:hover {
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-destructive\/5:hover {
        background-color: color-mix(in oklab, var(--destructive) 5%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-destructive\/80:hover {
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-destructive\/80:hover {
        background-color: color-mix(in oklab, var(--destructive) 80%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .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);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-emerald-500\/30:hover {
      background-color: color-mix(in srgb, oklch(.696 .17 162.48) 30%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-emerald-500\/30:hover {
        background-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-emerald-600:hover {
      background-color: var(--color-emerald-600);
    }
  }

  @media (hover: hover) {
    .hover\:bg-emerald-700:hover {
      background-color: var(--color-emerald-700);
    }
  }

  @media (hover: hover) {
    .hover\:bg-gray-50:hover {
      background-color: var(--color-gray-50);
    }
  }

  @media (hover: hover) {
    .hover\:bg-gray-100:hover {
      background-color: var(--color-gray-100);
    }
  }

  @media (hover: hover) {
    .hover\:bg-gray-200:hover {
      background-color: var(--color-gray-200);
    }
  }

  @media (hover: hover) {
    .hover\:bg-gray-700:hover {
      background-color: var(--color-gray-700);
    }
  }

  @media (hover: hover) {
    .hover\:bg-green-50:hover {
      background-color: var(--color-green-50);
    }
  }

  @media (hover: hover) {
    .hover\:bg-green-100:hover {
      background-color: var(--color-green-100);
    }
  }

  @media (hover: hover) {
    .hover\:bg-green-200:hover {
      background-color: var(--color-green-200);
    }
  }

  @media (hover: hover) {
    .hover\:bg-green-500\/10:hover {
      background-color: color-mix(in srgb, oklch(.723 .219 149.579) 10%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-green-500\/10:hover {
        background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-green-600:hover {
      background-color: var(--color-green-600);
    }
  }

  @media (hover: hover) {
    .hover\:bg-green-700:hover {
      background-color: var(--color-green-700);
    }
  }

  @media (hover: hover) {
    .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);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-orange-600:hover {
      background-color: var(--color-orange-600);
    }
  }

  @media (hover: hover) {
    .hover\:bg-primary\/5:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/5:hover {
        background-color: color-mix(in oklab, var(--primary) 5%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-primary\/10:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/10:hover {
        background-color: color-mix(in oklab, var(--primary) 10%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-primary\/20:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/20:hover {
        background-color: color-mix(in oklab, var(--primary) 20%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-primary\/80:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/80:hover {
        background-color: color-mix(in oklab, var(--primary) 80%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .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);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-purple-500\/10:hover {
      background-color: color-mix(in srgb, oklch(.627 .265 303.9) 10%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-purple-500\/10:hover {
        background-color: color-mix(in oklab, var(--color-purple-500) 10%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-purple-700:hover {
      background-color: var(--color-purple-700);
    }
  }

  @media (hover: hover) {
    .hover\:bg-red-100:hover {
      background-color: var(--color-red-100);
    }
  }

  @media (hover: hover) {
    .hover\:bg-red-200:hover {
      background-color: var(--color-red-200);
    }
  }

  @media (hover: hover) {
    .hover\:bg-red-500\/30:hover {
      background-color: color-mix(in srgb, oklch(.637 .237 25.331) 30%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-red-500\/30:hover {
        background-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-red-600:hover {
      background-color: var(--color-red-600);
    }
  }

  @media (hover: hover) {
    .hover\:bg-red-700:hover {
      background-color: var(--color-red-700);
    }
  }

  @media (hover: hover) {
    .hover\:bg-secondary\/30:hover {
      background-color: var(--secondary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-secondary\/30:hover {
        background-color: color-mix(in oklab, var(--secondary) 30%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .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);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-slate-700\/60:hover {
      background-color: color-mix(in srgb, oklch(.372 .044 257.287) 60%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-slate-700\/60:hover {
        background-color: color-mix(in oklab, var(--color-slate-700) 60%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-warning\/10:hover {
      background-color: var(--warning);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-warning\/10:hover {
        background-color: color-mix(in oklab, var(--warning) 10%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .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);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-white\/10:hover {
      background-color: #ffffff1a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/10:hover {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-white\/20:hover {
      background-color: #fff3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/20:hover {
        background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-white\/30:hover {
      background-color: #ffffff4d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/30:hover {
        background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-yellow-500\/10:hover {
      background-color: color-mix(in srgb, oklch(.795 .184 86.047) 10%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-yellow-500\/10:hover {
        background-color: color-mix(in oklab, var(--color-yellow-500) 10%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-gradient-to-br:hover {
      --tw-gradient-position: to bottom right in oklab;
      background-image: linear-gradient(var(--tw-gradient-stops));
    }
  }

  @media (hover: hover) {
    .hover\:from-\[\#04d484\]\/80:hover {
      --tw-gradient-from: oklab(76.6082% -.166608 .0691372 / .8);
      --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));
    }
  }

  @media (hover: hover) {
    .hover\:from-accent\/80:hover {
      --tw-gradient-from: var(--accent);
      --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));
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:from-accent\/80:hover {
        --tw-gradient-from: color-mix(in oklab, var(--accent) 80%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:from-accent\/90:hover {
      --tw-gradient-from: var(--accent);
      --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));
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:from-accent\/90:hover {
        --tw-gradient-from: color-mix(in oklab, var(--accent) 90%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:from-blue-500\/30:hover {
      --tw-gradient-from: color-mix(in srgb, oklch(.623 .214 259.815) 30%, 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));
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:from-blue-500\/30:hover {
        --tw-gradient-from: color-mix(in oklab, var(--color-blue-500) 30%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:from-blue-600:hover {
      --tw-gradient-from: var(--color-blue-600);
      --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));
    }
  }

  @media (hover: hover) {
    .hover\:from-destructive\/80:hover {
      --tw-gradient-from: var(--destructive);
      --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));
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:from-destructive\/80:hover {
        --tw-gradient-from: color-mix(in oklab, var(--destructive) 80%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:from-emerald-600:hover {
      --tw-gradient-from: var(--color-emerald-600);
      --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));
    }
  }

  @media (hover: hover) {
    .hover\:from-green-500\/30:hover {
      --tw-gradient-from: color-mix(in srgb, oklch(.723 .219 149.579) 30%, 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));
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:from-green-500\/30:hover {
        --tw-gradient-from: color-mix(in oklab, var(--color-green-500) 30%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:from-green-600:hover {
      --tw-gradient-from: var(--color-green-600);
      --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));
    }
  }

  @media (hover: hover) {
    .hover\:from-green-700:hover {
      --tw-gradient-from: var(--color-green-700);
      --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));
    }
  }

  @media (hover: hover) {
    .hover\:from-primary:hover {
      --tw-gradient-from: var(--primary);
      --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));
    }
  }

  @media (hover: hover) {
    .hover\:from-primary\/20:hover {
      --tw-gradient-from: var(--primary);
      --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));
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:from-primary\/20:hover {
        --tw-gradient-from: color-mix(in oklab, var(--primary) 20%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:from-primary\/80:hover {
      --tw-gradient-from: var(--primary);
      --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));
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:from-primary\/80:hover {
        --tw-gradient-from: color-mix(in oklab, var(--primary) 80%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:from-primary\/90:hover {
      --tw-gradient-from: var(--primary);
      --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));
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:from-primary\/90:hover {
        --tw-gradient-from: color-mix(in oklab, var(--primary) 90%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:via-green-500:hover {
      --tw-gradient-via: var(--color-green-500);
      --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);
    }
  }

  @media (hover: hover) {
    .hover\:to-accent:hover {
      --tw-gradient-to: var(--accent);
      --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));
    }
  }

  @media (hover: hover) {
    .hover\:to-accent\/20:hover {
      --tw-gradient-to: var(--accent);
      --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));
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:to-accent\/20:hover {
        --tw-gradient-to: color-mix(in oklab, var(--accent) 20%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:to-accent\/80:hover {
      --tw-gradient-to: var(--accent);
      --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));
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:to-accent\/80:hover {
        --tw-gradient-to: color-mix(in oklab, var(--accent) 80%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:to-accent\/90:hover {
      --tw-gradient-to: var(--accent);
      --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));
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:to-accent\/90:hover {
        --tw-gradient-to: color-mix(in oklab, var(--accent) 90%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:to-blue-600:hover {
      --tw-gradient-to: var(--color-blue-600);
      --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));
    }
  }

  @media (hover: hover) {
    .hover\:to-emerald-400\/80:hover {
      --tw-gradient-to: color-mix(in srgb, oklch(.765 .177 163.223) 80%, 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));
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:to-emerald-400\/80:hover {
        --tw-gradient-to: color-mix(in oklab, var(--color-emerald-400) 80%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:to-emerald-500\/30:hover {
      --tw-gradient-to: color-mix(in srgb, oklch(.696 .17 162.48) 30%, 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));
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:to-emerald-500\/30:hover {
        --tw-gradient-to: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:to-emerald-500\/80:hover {
      --tw-gradient-to: color-mix(in srgb, oklch(.696 .17 162.48) 80%, 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));
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:to-emerald-500\/80:hover {
        --tw-gradient-to: color-mix(in oklab, var(--color-emerald-500) 80%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:to-emerald-600:hover {
      --tw-gradient-to: var(--color-emerald-600);
      --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));
    }
  }

  @media (hover: hover) {
    .hover\:to-green-400:hover {
      --tw-gradient-to: var(--color-green-400);
      --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));
    }
  }

  @media (hover: hover) {
    .hover\:to-green-500\/30:hover {
      --tw-gradient-to: color-mix(in srgb, oklch(.723 .219 149.579) 30%, 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));
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:to-green-500\/30:hover {
        --tw-gradient-to: color-mix(in oklab, var(--color-green-500) 30%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:to-green-600:hover {
      --tw-gradient-to: var(--color-green-600);
      --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));
    }
  }

  @media (hover: hover) {
    .hover\:to-green-800:hover {
      --tw-gradient-to: var(--color-green-800);
      --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));
    }
  }

  @media (hover: hover) {
    .hover\:to-purple-600:hover {
      --tw-gradient-to: var(--color-purple-600);
      --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));
    }
  }

  @media (hover: hover) {
    .hover\:to-red-400\/80:hover {
      --tw-gradient-to: color-mix(in srgb, oklch(.704 .191 22.216) 80%, 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));
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:to-red-400\/80:hover {
        --tw-gradient-to: color-mix(in oklab, var(--color-red-400) 80%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:to-teal-600:hover {
      --tw-gradient-to: var(--color-teal-600);
      --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));
    }
  }

  @media (hover: hover) {
    .hover\:text-\[\#00c77c\]:hover {
      color: #00c77c;
    }
  }

  @media (hover: hover) {
    .hover\:text-\[\#02a368\]:hover {
      color: #02a368;
    }
  }

  @media (hover: hover) {
    .hover\:text-\[\#04d484\]:hover {
      color: #04d484;
    }
  }

  @media (hover: hover) {
    .hover\:text-accent:hover {
      color: var(--accent);
    }
  }

  @media (hover: hover) {
    .hover\:text-accent-foreground:hover {
      color: var(--accent-foreground);
    }
  }

  @media (hover: hover) {
    .hover\:text-emerald-600:hover {
      color: var(--color-emerald-600);
    }
  }

  @media (hover: hover) {
    .hover\:text-emerald-700:hover {
      color: var(--color-emerald-700);
    }
  }

  @media (hover: hover) {
    .hover\:text-foreground:hover {
      color: var(--foreground);
    }
  }

  @media (hover: hover) {
    .hover\:text-gray-300:hover {
      color: var(--color-gray-300);
    }
  }

  @media (hover: hover) {
    .hover\:text-green-300:hover {
      color: var(--color-green-300);
    }
  }

  @media (hover: hover) {
    .hover\:text-green-700:hover {
      color: var(--color-green-700);
    }
  }

  @media (hover: hover) {
    .hover\:text-primary:hover {
      color: var(--primary);
    }
  }

  @media (hover: hover) {
    .hover\:text-primary\/80:hover {
      color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-primary\/80:hover {
        color: color-mix(in oklab, var(--primary) 80%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:text-purple-700:hover {
      color: var(--color-purple-700);
    }
  }

  @media (hover: hover) {
    .hover\:text-red-800:hover {
      color: var(--color-red-800);
    }
  }

  @media (hover: hover) {
    .hover\:text-white:hover {
      color: var(--color-white);
    }
  }

  @media (hover: hover) {
    .hover\:no-underline:hover {
      text-decoration-line: none;
    }
  }

  @media (hover: hover) {
    .hover\:underline:hover {
      text-decoration-line: underline;
    }
  }

  @media (hover: hover) {
    .hover\:opacity-90:hover {
      opacity: .9;
    }
  }

  @media (hover: hover) {
    .hover\:opacity-100:hover {
      opacity: 1;
    }
  }

  @media (hover: hover) {
    .hover\:shadow-2xl:hover {
      --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  @media (hover: hover) {
    .hover\:shadow-lg:hover {
      --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);
    }
  }

  @media (hover: hover) {
    .hover\:shadow-md:hover {
      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px 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);
    }
  }

  @media (hover: hover) {
    .hover\:shadow-xl:hover {
      --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px 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);
    }
  }

  @media (hover: hover) {
    .hover\:shadow-\[\#00d084\]\/25:hover {
      --tw-shadow-color: #00d08440;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:shadow-\[\#00d084\]\/25:hover {
        --tw-shadow-color: color-mix(in oklab, oklab(75.5558% -.163383 .0650536 / .25) var(--tw-shadow-alpha), transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:shadow-\[\#04d484\]\/10:hover {
      --tw-shadow-color: #04d4841a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:shadow-\[\#04d484\]\/10:hover {
        --tw-shadow-color: color-mix(in oklab, oklab(76.6082% -.166608 .0691372 / .1) var(--tw-shadow-alpha), transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:shadow-accent\/10:hover {
      --tw-shadow-color: var(--accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:shadow-accent\/10:hover {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--accent) 10%, transparent) var(--tw-shadow-alpha), transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:shadow-emerald-500\/25:hover {
      --tw-shadow-color: color-mix(in srgb, oklch(.696 .17 162.48) 25%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:shadow-emerald-500\/25:hover {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-emerald-500) 25%, transparent) var(--tw-shadow-alpha), transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:shadow-green-500\/10:hover {
      --tw-shadow-color: color-mix(in srgb, oklch(.723 .219 149.579) 10%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:shadow-green-500\/10:hover {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-green-500) 10%, transparent) var(--tw-shadow-alpha), transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:shadow-primary\/25:hover {
      --tw-shadow-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:shadow-primary\/25:hover {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--primary) 25%, transparent) var(--tw-shadow-alpha), transparent);
      }
    }
  }

  .focus\:border-\[\#00d084\]:focus {
    border-color: #00d084;
  }

  .focus\:border-\[\#04d484\]:focus {
    border-color: #04d484;
  }

  .focus\:border-blue-500:focus {
    border-color: var(--color-blue-500);
  }

  .focus\:border-emerald-500:focus {
    border-color: var(--color-emerald-500);
  }

  .focus\:border-green-400:focus {
    border-color: var(--color-green-400);
  }

  .focus\:border-green-500:focus {
    border-color: var(--color-green-500);
  }

  .focus\:border-purple-500:focus {
    border-color: var(--color-purple-500);
  }

  .focus\:border-red-500:focus {
    border-color: var(--color-red-500);
  }

  .focus\:bg-accent:focus {
    background-color: var(--accent);
  }

  .focus\:text-accent-foreground:focus {
    color: var(--accent-foreground);
  }

  .focus\:ring-0:focus {
    --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);
  }

  .focus\:ring-2:focus {
    --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\:ring-\[\#04d484\]\/20:focus {
    --tw-ring-color: oklab(76.6082% -.166608 .0691372 / .2);
  }

  .focus\:ring-emerald-500:focus {
    --tw-ring-color: var(--color-emerald-500);
  }

  .focus\:ring-green-400\/20:focus {
    --tw-ring-color: color-mix(in srgb, oklch(.792 .209 151.711) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-green-400\/20:focus {
      --tw-ring-color: color-mix(in oklab, var(--color-green-400) 20%, transparent);
    }
  }

  .focus\:ring-green-500:focus {
    --tw-ring-color: var(--color-green-500);
  }

  .focus\:ring-green-500\/50:focus {
    --tw-ring-color: color-mix(in srgb, oklch(.723 .219 149.579) 50%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-green-500\/50:focus {
      --tw-ring-color: color-mix(in oklab, var(--color-green-500) 50%, transparent);
    }
  }

  .focus\:ring-ring:focus {
    --tw-ring-color: var(--ring);
  }

  .focus\:ring-offset-2:focus {
    --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\:outline-hidden:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .focus\:outline-hidden:focus {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-visible\:border-ring:focus-visible {
    border-color: var(--ring);
  }

  .focus-visible\:ring-\[2px\]: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-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\/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\:outline-1:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .focus-visible\:outline-ring:focus-visible {
    outline-color: var(--ring);
  }

  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:bg-gray-300:disabled {
    background-color: var(--color-gray-300);
  }

  .disabled\:bg-gray-500:disabled {
    background-color: var(--color-gray-500);
  }

  .disabled\:bg-gray-600:disabled {
    background-color: var(--color-gray-600);
  }

  .disabled\:from-gray-500:disabled {
    --tw-gradient-from: var(--color-gray-500);
    --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));
  }

  .disabled\:via-gray-400:disabled {
    --tw-gradient-via: var(--color-gray-400);
    --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);
  }

  .disabled\:to-gray-500:disabled {
    --tw-gradient-to: var(--color-gray-500);
    --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));
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .disabled\:shadow-sm:disabled {
    --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);
  }

  .has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot="card-action"]) {
    grid-template-columns: 1fr auto;
  }

  .has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has( > svg) {
    grid-template-columns: calc(var(--spacing) * 4) 1fr;
  }

  .has-\[\>svg\]\:gap-x-3:has( > svg) {
    column-gap: calc(var(--spacing) * 3);
  }

  .has-\[\>svg\]\:px-1\.5:has( > svg) {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .has-\[\>svg\]\:px-2:has( > svg) {
    padding-inline: calc(var(--spacing) * 2);
  }

  .has-\[\>svg\]\:px-2\.5:has( > svg) {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .has-\[\>svg\]\:px-3\.5:has( > svg) {
    padding-inline: calc(var(--spacing) * 3.5);
  }

  .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\]\:pointer-events-none[data-disabled] {
    pointer-events: none;
  }

  .data-\[disabled\]\:opacity-50[data-disabled] {
    opacity: .5;
  }

  .data-\[inset\]\:pl-8[data-inset] {
    padding-left: calc(var(--spacing) * 8);
  }

  .data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
    color: var(--muted-foreground);
  }

  .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
    --tw-translate-y: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
    --tw-enter-translate-y: calc(2 * var(--spacing) * -1);
  }

  .data-\[side\=left\]\:-translate-x-1[data-side="left"] {
    --tw-translate-x: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
    --tw-enter-translate-x: calc(2 * var(--spacing));
  }

  .data-\[side\=right\]\:translate-x-1[data-side="right"] {
    --tw-translate-x: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
    --tw-enter-translate-x: calc(2 * var(--spacing) * -1);
  }

  .data-\[side\=top\]\:-translate-y-1[data-side="top"] {
    --tw-translate-y: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
    --tw-enter-translate-y: calc(2 * var(--spacing));
  }

  .data-\[size\=default\]\:h-9[data-size="default"] {
    height: calc(var(--spacing) * 9);
  }

  .data-\[size\=sm\]\:h-8[data-size="sm"] {
    height: calc(var(--spacing) * 8);
  }

  :is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *)[data-slot="alert-description"] {
    color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *)[data-slot="alert-description"] {
      color: color-mix(in oklab, var(--destructive) 90%, transparent);
    }
  }

  :is(.\*\:data-\[slot\=select-value\]\:line-clamp-1 > *)[data-slot="select-value"] {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  :is(.\*\:data-\[slot\=select-value\]\:flex > *)[data-slot="select-value"] {
    display: flex;
  }

  :is(.\*\:data-\[slot\=select-value\]\:items-center > *)[data-slot="select-value"] {
    align-items: center;
  }

  :is(.\*\:data-\[slot\=select-value\]\:gap-2 > *)[data-slot="select-value"] {
    gap: calc(var(--spacing) * 2);
  }

  .data-\[state\=active\]\:bg-card[data-state="active"] {
    background-color: var(--card);
  }

  .data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
    animation: accordion-up var(--tw-duration, .2s) ease-out;
  }

  .data-\[state\=closed\]\:animate-out[data-state="closed"] {
    animation: exit var(--tw-duration, .15s) var(--tw-ease, ease);
  }

  .data-\[state\=closed\]\:duration-300[data-state="closed"] {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
    --tw-exit-opacity: 0;
  }

  .data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
    --tw-exit-translate-y: 100%;
  }

  .data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
    --tw-exit-translate-x: -100%;
  }

  .data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
    --tw-exit-translate-x: 100%;
  }

  .data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
    --tw-exit-translate-y: -100%;
  }

  .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
    --tw-exit-scale: .95;
  }

  .data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
    animation: accordion-down var(--tw-duration, .2s) ease-out;
  }

  .data-\[state\=open\]\:animate-in[data-state="open"] {
    animation: enter var(--tw-duration, .15s) var(--tw-ease, ease);
  }

  .data-\[state\=open\]\:bg-accent[data-state="open"] {
    background-color: var(--accent);
  }

  .data-\[state\=open\]\:bg-secondary[data-state="open"] {
    background-color: var(--secondary);
  }

  .data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
    color: var(--accent-foreground);
  }

  .data-\[state\=open\]\:duration-500[data-state="open"] {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .data-\[state\=open\]\:fade-in-0[data-state="open"] {
    --tw-enter-opacity: 0;
  }

  .data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
    --tw-enter-translate-y: 100%;
  }

  .data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
    --tw-enter-translate-x: -100%;
  }

  .data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
    --tw-enter-translate-x: 100%;
  }

  .data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
    --tw-enter-translate-y: -100%;
  }

  .data-\[state\=open\]\:zoom-in-95[data-state="open"] {
    --tw-enter-scale: .95;
  }

  .data-\[state\=selected\]\:bg-muted[data-state="selected"] {
    background-color: var(--muted);
  }

  .data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"] {
    color: var(--destructive);
  }

  .data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant="destructive"]:focus {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant="destructive"]:focus {
      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
    }
  }

  .data-\[variant\=destructive\]\:focus\:text-destructive[data-variant="destructive"]:focus {
    color: var(--destructive);
  }

  @media (width >= 40rem) {
    .sm\:mx-0 {
      margin-inline: calc(var(--spacing) * 0);
    }
  }

  @media (width >= 40rem) {
    .sm\:mt-6 {
      margin-top: calc(var(--spacing) * 6);
    }
  }

  @media (width >= 40rem) {
    .sm\:mb-4 {
      margin-bottom: calc(var(--spacing) * 4);
    }
  }

  @media (width >= 40rem) {
    .sm\:mb-6 {
      margin-bottom: calc(var(--spacing) * 6);
    }
  }

  @media (width >= 40rem) {
    .sm\:mb-8 {
      margin-bottom: calc(var(--spacing) * 8);
    }
  }

  @media (width >= 40rem) {
    .sm\:block {
      display: block;
    }
  }

  @media (width >= 40rem) {
    .sm\:flex {
      display: flex;
    }
  }

  @media (width >= 40rem) {
    .sm\:hidden {
      display: none;
    }
  }

  @media (width >= 40rem) {
    .sm\:table-cell {
      display: table-cell;
    }
  }

  @media (width >= 40rem) {
    .sm\:h-4 {
      height: calc(var(--spacing) * 4);
    }
  }

  @media (width >= 40rem) {
    .sm\:h-6 {
      height: calc(var(--spacing) * 6);
    }
  }

  @media (width >= 40rem) {
    .sm\:h-12 {
      height: calc(var(--spacing) * 12);
    }
  }

  @media (width >= 40rem) {
    .sm\:w-4 {
      width: calc(var(--spacing) * 4);
    }
  }

  @media (width >= 40rem) {
    .sm\:w-6 {
      width: calc(var(--spacing) * 6);
    }
  }

  @media (width >= 40rem) {
    .sm\:w-12 {
      width: calc(var(--spacing) * 12);
    }
  }

  @media (width >= 40rem) {
    .sm\:w-auto {
      width: auto;
    }
  }

  @media (width >= 40rem) {
    .sm\:max-w-none {
      max-width: none;
    }
  }

  @media (width >= 40rem) {
    .sm\:max-w-sm {
      max-width: var(--container-sm);
    }
  }

  @media (width >= 40rem) {
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (width >= 40rem) {
    .sm\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (width >= 40rem) {
    .sm\:flex-row {
      flex-direction: row;
    }
  }

  @media (width >= 40rem) {
    .sm\:flex-wrap {
      flex-wrap: wrap;
    }
  }

  @media (width >= 40rem) {
    .sm\:justify-start {
      justify-content: flex-start;
    }
  }

  @media (width >= 40rem) {
    .sm\:gap-2 {
      gap: calc(var(--spacing) * 2);
    }
  }

  @media (width >= 40rem) {
    .sm\:gap-3 {
      gap: calc(var(--spacing) * 3);
    }
  }

  @media (width >= 40rem) {
    .sm\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }
  }

  @media (width >= 40rem) {
    .sm\:gap-5 {
      gap: calc(var(--spacing) * 5);
    }
  }

  @media (width >= 40rem) {
    .sm\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }
  }

  @media (width >= 40rem) {
    .sm\:p-3 {
      padding: calc(var(--spacing) * 3);
    }
  }

  @media (width >= 40rem) {
    .sm\:p-4 {
      padding: calc(var(--spacing) * 4);
    }
  }

  @media (width >= 40rem) {
    .sm\:p-5 {
      padding: calc(var(--spacing) * 5);
    }
  }

  @media (width >= 40rem) {
    .sm\:p-6 {
      padding: calc(var(--spacing) * 6);
    }
  }

  @media (width >= 40rem) {
    .sm\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }
  }

  @media (width >= 40rem) {
    .sm\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }
  }

  @media (width >= 40rem) {
    .sm\:py-2 {
      padding-block: calc(var(--spacing) * 2);
    }
  }

  @media (width >= 40rem) {
    .sm\:py-2\.5 {
      padding-block: calc(var(--spacing) * 2.5);
    }
  }

  @media (width >= 40rem) {
    .sm\:py-4 {
      padding-block: calc(var(--spacing) * 4);
    }
  }

  @media (width >= 40rem) {
    .sm\:pt-5 {
      padding-top: calc(var(--spacing) * 5);
    }
  }

  @media (width >= 40rem) {
    .sm\:text-left {
      text-align: left;
    }
  }

  @media (width >= 40rem) {
    .sm\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }

  @media (width >= 40rem) {
    .sm\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }

  @media (width >= 40rem) {
    .sm\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }

  @media (width >= 40rem) {
    .sm\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }

  @media (width >= 48rem) {
    .md\:mr-4 {
      margin-right: calc(var(--spacing) * 4);
    }
  }

  @media (width >= 48rem) {
    .md\:mb-2 {
      margin-bottom: calc(var(--spacing) * 2);
    }
  }

  @media (width >= 48rem) {
    .md\:mb-6 {
      margin-bottom: calc(var(--spacing) * 6);
    }
  }

  @media (width >= 48rem) {
    .md\:ml-3 {
      margin-left: calc(var(--spacing) * 3);
    }
  }

  @media (width >= 48rem) {
    .md\:block {
      display: block;
    }
  }

  @media (width >= 48rem) {
    .md\:flex {
      display: flex;
    }
  }

  @media (width >= 48rem) {
    .md\:hidden {
      display: none;
    }
  }

  @media (width >= 48rem) {
    .md\:h-4 {
      height: calc(var(--spacing) * 4);
    }
  }

  @media (width >= 48rem) {
    .md\:h-5 {
      height: calc(var(--spacing) * 5);
    }
  }

  @media (width >= 48rem) {
    .md\:h-10 {
      height: calc(var(--spacing) * 10);
    }
  }

  @media (width >= 48rem) {
    .md\:h-16 {
      height: calc(var(--spacing) * 16);
    }
  }

  @media (width >= 48rem) {
    .md\:h-\[450px\] {
      height: 450px;
    }
  }

  @media (width >= 48rem) {
    .md\:h-\[500px\] {
      height: 500px;
    }
  }

  @media (width >= 48rem) {
    .md\:w-4 {
      width: calc(var(--spacing) * 4);
    }
  }

  @media (width >= 48rem) {
    .md\:w-5 {
      width: calc(var(--spacing) * 5);
    }
  }

  @media (width >= 48rem) {
    .md\:w-10 {
      width: calc(var(--spacing) * 10);
    }
  }

  @media (width >= 48rem) {
    .md\:w-16 {
      width: calc(var(--spacing) * 16);
    }
  }

  @media (width >= 48rem) {
    .md\:w-\[450px\] {
      width: 450px;
    }
  }

  @media (width >= 48rem) {
    .md\:w-\[500px\] {
      width: 500px;
    }
  }

  @media (width >= 48rem) {
    .md\:w-auto {
      width: auto;
    }
  }

  @media (width >= 48rem) {
    .md\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }

  @media (width >= 48rem) {
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (width >= 48rem) {
    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (width >= 48rem) {
    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (width >= 48rem) {
    .md\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  @media (width >= 48rem) {
    .md\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

  @media (width >= 48rem) {
    .md\:grid-cols-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
  }

  @media (width >= 48rem) {
    .md\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }

  @media (width >= 48rem) {
    .md\:flex-row {
      flex-direction: row;
    }
  }

  @media (width >= 48rem) {
    .md\:items-center {
      align-items: center;
    }
  }

  @media (width >= 48rem) {
    .md\:gap-0 {
      gap: calc(var(--spacing) * 0);
    }
  }

  @media (width >= 48rem) {
    .md\:gap-2 {
      gap: calc(var(--spacing) * 2);
    }
  }

  @media (width >= 48rem) {
    .md\:gap-3 {
      gap: calc(var(--spacing) * 3);
    }
  }

  @media (width >= 48rem) {
    .md\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }
  }

  @media (width >= 48rem) {
    .md\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }
  }

  @media (width >= 48rem) {
    .md\:p-4 {
      padding: calc(var(--spacing) * 4);
    }
  }

  @media (width >= 48rem) {
    .md\:p-6 {
      padding: calc(var(--spacing) * 6);
    }
  }

  @media (width >= 48rem) {
    .md\:px-3 {
      padding-inline: calc(var(--spacing) * 3);
    }
  }

  @media (width >= 48rem) {
    .md\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }
  }

  @media (width >= 48rem) {
    .md\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }
  }

  @media (width >= 48rem) {
    .md\:py-1\.5 {
      padding-block: calc(var(--spacing) * 1.5);
    }
  }

  @media (width >= 48rem) {
    .md\:py-5 {
      padding-block: calc(var(--spacing) * 5);
    }
  }

  @media (width >= 48rem) {
    .md\:py-8 {
      padding-block: calc(var(--spacing) * 8);
    }
  }

  @media (width >= 48rem) {
    .md\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }

  @media (width >= 48rem) {
    .md\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }

  @media (width >= 48rem) {
    .md\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }

  @media (width >= 48rem) {
    .md\:text-6xl {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }

  @media (width >= 48rem) {
    .md\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }

  @media (width >= 48rem) {
    .md\:text-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }

  @media (width >= 48rem) {
    .md\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }

  @media (width >= 48rem) {
    .md\:text-xl {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }

  @media (width >= 48rem) {
    .md\:text-xs {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
  }

  @media (width >= 64rem) {
    .lg\:sticky {
      position: sticky;
    }
  }

  @media (width >= 64rem) {
    .lg\:top-36 {
      top: calc(var(--spacing) * 36);
    }
  }

  @media (width >= 64rem) {
    .lg\:right-16 {
      right: calc(var(--spacing) * 16);
    }
  }

  @media (width >= 64rem) {
    .lg\:order-1 {
      order: 1;
    }
  }

  @media (width >= 64rem) {
    .lg\:order-2 {
      order: 2;
    }
  }

  @media (width >= 64rem) {
    .lg\:col-span-1 {
      grid-column: span 1 / span 1;
    }
  }

  @media (width >= 64rem) {
    .lg\:col-span-2 {
      grid-column: span 2 / span 2;
    }
  }

  @media (width >= 64rem) {
    .lg\:col-span-3 {
      grid-column: span 3 / span 3;
    }
  }

  @media (width >= 64rem) {
    .lg\:-ml-12 {
      margin-left: calc(var(--spacing) * -12);
    }
  }

  @media (width >= 64rem) {
    .lg\:flex {
      display: flex;
    }
  }

  @media (width >= 64rem) {
    .lg\:hidden {
      display: none;
    }
  }

  @media (width >= 64rem) {
    .lg\:h-96 {
      height: calc(var(--spacing) * 96);
    }
  }

  @media (width >= 64rem) {
    .lg\:h-\[600px\] {
      height: 600px;
    }
  }

  @media (width >= 64rem) {
    .lg\:h-\[650px\] {
      height: 650px;
    }
  }

  @media (width >= 64rem) {
    .lg\:w-80 {
      width: calc(var(--spacing) * 80);
    }
  }

  @media (width >= 64rem) {
    .lg\:w-\[600px\] {
      width: 600px;
    }
  }

  @media (width >= 64rem) {
    .lg\:w-\[650px\] {
      width: 650px;
    }
  }

  @media (width >= 64rem) {
    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (width >= 64rem) {
    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (width >= 64rem) {
    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (width >= 64rem) {
    .lg\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  @media (width >= 64rem) {
    .lg\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

  @media (width >= 64rem) {
    .lg\:grid-cols-7 {
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }
  }

  @media (width >= 64rem) {
    .lg\:grid-cols-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
  }

  @media (width >= 64rem) {
    .lg\:grid-cols-10 {
      grid-template-columns: repeat(10, minmax(0, 1fr));
    }
  }

  @media (width >= 64rem) {
    .lg\:grid-cols-11 {
      grid-template-columns: repeat(11, minmax(0, 1fr));
    }
  }

  @media (width >= 64rem) {
    .lg\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }

  @media (width >= 64rem) {
    .lg\:grid-cols-16 {
      grid-template-columns: repeat(16, minmax(0, 1fr));
    }
  }

  @media (width >= 64rem) {
    .lg\:flex-row {
      flex-direction: row;
    }
  }

  @media (width >= 64rem) {
    .lg\:items-center {
      align-items: center;
    }
  }

  @media (width >= 64rem) {
    .lg\:justify-between {
      justify-content: space-between;
    }
  }

  @media (width >= 64rem) {
    .lg\:justify-center {
      justify-content: center;
    }
  }

  @media (width >= 64rem) {
    .lg\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }
  }

  @media (width >= 64rem) {
    .lg\:gap-12 {
      gap: calc(var(--spacing) * 12);
    }
  }

  @media (width >= 64rem) {
    .lg\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }
  }

  @media (width >= 64rem) {
    .lg\:pl-12 {
      padding-left: calc(var(--spacing) * 12);
    }
  }

  @media (width >= 64rem) {
    .lg\:text-left {
      text-align: left;
    }
  }

  @media (width >= 64rem) {
    .lg\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }

  @media (width >= 64rem) {
    .lg\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }

  @media (width >= 64rem) {
    .lg\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }

  @media (width >= 64rem) {
    .lg\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }

  @media (width >= 64rem) {
    .lg\:text-6xl {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }

  @media (width >= 64rem) {
    .lg\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }

  @media (width >= 64rem) {
    .lg\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }

  @media (width >= 80rem) {
    .xl\:block {
      display: block;
    }
  }

  @media (width >= 80rem) {
    .xl\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (width >= 80rem) {
    .xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (width >= 80rem) {
    .xl\:grid-cols-10 {
      grid-template-columns: repeat(10, minmax(0, 1fr));
    }
  }

  @media (width >= 80rem) {
    .xl\:grid-cols-16 {
      grid-template-columns: repeat(16, minmax(0, 1fr));
    }
  }

  @media (width >= 96rem) {
    .\32 xl\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  .dark\:border-input:is(.dark *) {
    border-color: var(--input);
  }

  .dark\:bg-destructive\/60:is(.dark *) {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-destructive\/60:is(.dark *) {
      background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
    }
  }

  .dark\:bg-input\/30:is(.dark *) {
    background-color: var(--input);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-input\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--input) 30%, transparent);
    }
  }

  .dark\:from-blue-950:is(.dark *) {
    --tw-gradient-from: var(--color-blue-950);
    --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));
  }

  .dark\:to-purple-950:is(.dark *) {
    --tw-gradient-to: var(--color-purple-950);
    --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));
  }

  .dark\:text-gray-400:is(.dark *) {
    color: var(--color-gray-400);
  }

  .dark\:text-green-400:is(.dark *) {
    color: var(--color-green-400);
  }

  .dark\:text-muted-foreground:is(.dark *) {
    color: var(--muted-foreground);
  }

  .dark\:text-orange-400:is(.dark *) {
    color: var(--color-orange-400);
  }

  .dark\:text-red-400:is(.dark *) {
    color: var(--color-red-400);
  }

  @media (hover: hover) {
    .dark\:hover\:bg-accent\/50:is(.dark *):hover {
      background-color: var(--accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-accent\/50:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--accent) 50%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .dark\:hover\:bg-input\/50:is(.dark *):hover {
      background-color: var(--input);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-input\/50:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--input) 50%, transparent);
      }
    }
  }

  .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }

  .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }

  .dark\:data-\[state\=active\]\:border-input:is(.dark *)[data-state="active"] {
    border-color: var(--input);
  }

  .dark\:data-\[state\=active\]\:bg-input\/30:is(.dark *)[data-state="active"] {
    background-color: var(--input);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:data-\[state\=active\]\:bg-input\/30:is(.dark *)[data-state="active"] {
      background-color: color-mix(in oklab, var(--input) 30%, transparent);
    }
  }

  .dark\:data-\[state\=active\]\:text-foreground:is(.dark *)[data-state="active"] {
    color: var(--foreground);
  }

  .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is(.dark *)[data-variant="destructive"]:focus {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is(.dark *)[data-variant="destructive"]:focus {
      background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .\[\&_p\]\:leading-relaxed p {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none;
  }

  .\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0;
  }

  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*="text-"]) {
    color: var(--muted-foreground);
  }

  .\[\&_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;
  }

  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role="checkbox"]) {
    padding-right: calc(var(--spacing) * 0);
  }

  :is(.\*\:\[span\]\:last\:flex > *):is(span):last-child {
    display: flex;
  }

  :is(.\*\:\[span\]\:last\:items-center > *):is(span):last-child {
    align-items: center;
  }

  :is(.\*\:\[span\]\:last\:gap-2 > *):is(span):last-child {
    gap: calc(var(--spacing) * 2);
  }

  :is(.data-\[variant\=destructive\]\:\*\:\[svg\]\:\!text-destructive[data-variant="destructive"] > *):is(svg) {
    color: var(--destructive) !important;
  }

  .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] > [role="checkbox"] {
    --tw-translate-y: 2px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .\[\&\>h2\]\:mt-10 > h2 {
    margin-top: calc(var(--spacing) * 10);
  }

  .\[\&\>h2\]\:mb-6 > h2 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .\[\&\>h2\]\:text-3xl > h2 {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .\[\&\>h2\]\:font-bold > h2 {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .\[\&\>h2\]\:text-gray-900 > h2 {
    color: var(--color-gray-900);
  }

  .\[\&\>h3\]\:mt-8 > h3 {
    margin-top: calc(var(--spacing) * 8);
  }

  .\[\&\>h3\]\:mb-4 > h3 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .\[\&\>h3\]\:text-xl > h3 {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .\[\&\>h3\]\:font-semibold > h3 {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .\[\&\>h3\]\:text-gray-900 > h3 {
    color: var(--color-gray-900);
  }

  .\[\&\>h4\]\:mt-6 > h4 {
    margin-top: calc(var(--spacing) * 6);
  }

  .\[\&\>h4\]\:mb-3 > h4 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .\[\&\>h4\]\:text-lg > h4 {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .\[\&\>h4\]\:font-medium > h4 {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .\[\&\>h4\]\:text-gray-900 > h4 {
    color: var(--color-gray-900);
  }

  .\[\&\>p\]\:mb-4 > p {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .\[\&\>p\]\:text-base > p {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .\[\&\>p\]\:leading-relaxed > p {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .\[\&\>p\]\:text-gray-700 > p {
    color: var(--color-gray-700);
  }

  .\[\&\>svg\]\:pointer-events-none > svg {
    pointer-events: none;
  }

  .\[\&\>svg\]\:size-2\.5 > svg {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
  }

  .\[\&\>svg\]\:size-4 > svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&\>svg\]\:translate-y-0\.5 > svg {
    --tw-translate-y: calc(var(--spacing) * .5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .\[\&\>svg\]\:text-current > svg {
    color: currentColor;
  }

  .\[\&\>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;
  }

  @media (hover: hover) {
    a.\[a\&\]\:hover\:bg-accent:hover {
      background-color: var(--accent);
    }
  }

  @media (hover: hover) {
    a.\[a\&\]\:hover\:bg-destructive\/90:hover {
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      a.\[a\&\]\:hover\:bg-destructive\/90:hover {
        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
      }
    }
  }

  @media (hover: hover) {
    a.\[a\&\]\:hover\:bg-primary\/90:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      a.\[a\&\]\:hover\:bg-primary\/90:hover {
        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
      }
    }
  }

  @media (hover: hover) {
    a.\[a\&\]\:hover\:bg-secondary\/90:hover {
      background-color: var(--secondary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      a.\[a\&\]\:hover\:bg-secondary\/90:hover {
        background-color: color-mix(in oklab, var(--secondary) 90%, transparent);
      }
    }
  }

  @media (hover: hover) {
    a.\[a\&\]\:hover\:text-accent-foreground:hover {
      color: var(--accent-foreground);
    }
  }
}



[class*="skip"], [class*="Skip"], a[href="#main"], a[href="#content"], a[href="#main-content"], a[href="#skip"], a[href="#skip-to-main"], a[href="#skip-navigation"], .skip-link, .skip-navigation, .skip-to-main, .skip-content, .accessibility-link, .accessibility-skip, .screen-reader-skip, .sr-skip, .sr-only:not(.sr-only-focusable), .visually-hidden:not(.visually-hidden-focusable), .visually-hidden-skip, [aria-label*="skip"], [aria-label*="Skip"], [role="skip"], [data-skip], [data-accessibility*="skip"], .screen-reader-only, .screen-reader-text, .sr-text, .skip-main, .skip-content, .skip-nav, .jump-link, .jump-to-main, .skip-to-main-content, .skip-navigation-link, .skip-main-content, .splash-screen, .loading-screen, .loader-container, .initial-loader, .startup-logo, .startup-screen, [data-component="splash"], [data-component="loader"], [data-component="initial"], [class*="splash"], [class*="loader"], [class*="initial"], [id*="splash"], [id*="loader"], [id*="loading"] {
  visibility: hidden !important;
  opacity: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  z-index: -9999 !important;
  border: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  display: none !important;
  position: absolute !important;
  top: -99999px !important;
  left: -99999px !important;
  overflow: hidden !important;
}

.skip-to-content, .skip-to-main, .skip-navigation, #skip-to-content, #skip-to-main, #skip-navigation, a[href="#main-content"], a[href="#main"], a[href="#content"][class*="skip"], [aria-label="Skip to main content"], [aria-label="Skip to content"] {
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -9999 !important;
  width: 1px !important;
  height: 1px !important;
  display: none !important;
  position: absolute !important;
  top: -99999px !important;
  left: -99999px !important;
  overflow: hidden !important;
}

html, body {
  background: #1c1c1c !important;
}

html {
  opacity: 1 !important;
  visibility: visible !important;
}

body {
  opacity: 1 !important;
  visibility: visible !important;
  background: #1c1c1c !important;
}

#root {
  opacity: 1 !important;
  visibility: visible !important;
}

* {
  transition-delay: 0s !important;
}

:not([class*="animate"]):not([class*="motion"]) {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
}

[class*="skip"]:focus, [class*="Skip"]:focus, a[href="#main"]:focus, a[href="#content"]:focus, a[href="#main-content"]:focus, .skip-link:focus, .skip-navigation:focus, .skip-to-main:focus, .skip-to-content:focus, .accessibility-link:focus {
  visibility: hidden !important;
  opacity: 0 !important;
  box-shadow: none !important;
  color: #0000 !important;
  text-indent: -9999px !important;
  z-index: -9999 !important;
  background: none !important;
  outline: none !important;
  display: none !important;
  position: absolute !important;
  top: -99999px !important;
  left: -99999px !important;
}

.loading-screen, .preloader, .spinner-overlay, .loading-overlay, [data-loading="screen"], [data-preloader], .accessibility-announcement, .screen-reader-announcement {
  visibility: hidden !important;
  opacity: 0 !important;
  display: none !important;
}

[tabindex="-1"]:focus, [aria-hidden="true"]:focus, [style*="position: absolute"][style*="left: -"] {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

html {
  background: #1c1c1c !important;
}

body {
  color: #fff !important;
  background: #1c1c1c !important;
}

* {
  -webkit-tap-highlight-color: transparent !important;
}

#root {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity .2s !important;
}

.min-h-screen {
  min-height: 100dvh !important;
}

[data-loading="true"] {
  pointer-events: none !important;
}

img, svg {
  max-width: 100% !important;
  height: auto !important;
}

html, body, #root, html:not(.loaded) {
  background: #1c1c1c !important;
}

body:not(.loaded) {
  color: #fff !important;
  background: #1c1c1c !important;
}

#root:empty {
  background: #1c1c1c !important;
  min-height: 100vh !important;
}

.loading-prevent-flash {
  visibility: hidden !important;
  opacity: 0 !important;
}

.loading-prevent-flash.loaded {
  visibility: visible !important;
  opacity: 1 !important;
  transition: opacity .3s !important;
}

* {
  box-sizing: border-box !important;
}

:not([class*="animate"]):not([data-animate]) {
  transition: color .15s, background-color .15s !important;
}

button[aria-label*="menu"] svg, button[aria-label*="Menu"] svg, button[aria-label*="navigation"] svg {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
}

.nav-container .lg\\:hidden button svg {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
}

.nav-container .lg\\:hidden button .lucide {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
}

[role="navigation"] .lg\\:hidden button svg {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
}

[role="navigation"] .lg\\:hidden button .lucide {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
}

.nav-container .lg\\:hidden button:hover svg {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
}

.nav-container .lg\\:hidden button:active svg {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
}

.nav-container .lg\\:hidden button:focus svg {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
}

.nav-container .lg\\:hidden button[data-state="open"] svg {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
}

.nav-container .lg\\:hidden button:hover .lucide {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
}

.nav-container .lg\\:hidden button:active .lucide {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
}

.nav-container .lg\\:hidden button:focus .lucide {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
}

.nav-container .lg\\:hidden button[data-state="open"] .lucide {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
}

.mobile-hamburger-button {
  background: #ffffff0d !important;
  border: 1px solid #fff3 !important;
  border-radius: 6px !important;
  transition: all .2s !important;
}

.mobile-hamburger-button:hover {
  background: #ffffff1a !important;
  border-color: #ffffff4d !important;
  transform: translateY(-1px) !important;
}

.mobile-hamburger-icon {
  color: #fff !important;
  stroke: #fff !important;
  stroke-width: 2.5px !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  display: block !important;
}

@media (width <= 1024px) {
  .mobile-hamburger-button {
    visibility: visible !important;
    opacity: 1 !important;
    background: #0000001a !important;
    border: 2px solid #ffffff4d !important;
    border-radius: 8px !important;
    justify-content: center !important;
    align-items: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;
    display: flex !important;
  }

  .mobile-hamburger-icon {
    color: #fff !important;
    stroke: #fff !important;
    stroke-width: 3px !important;
    fill: none !important;
    opacity: 1 !important;
    filter: drop-shadow(0 1px 2px #0000004d) !important;
    width: 28px !important;
    height: 28px !important;
  }

  .mobile-hamburger-button:hover .mobile-hamburger-icon {
    color: #fff !important;
    stroke: #fff !important;
    transform: scale(1.1) !important;
  }
}

.nav-container .lg\\:hidden .mobile-hamburger-button svg.mobile-hamburger-icon {
  color: #fff !important;
  stroke: #fff !important;
  stroke-width: 3px !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-text-fill-color: #fff !important;
  display: block !important;
}

.nav-container .lg\\:hidden .mobile-hamburger-button .lucide.mobile-hamburger-icon {
  color: #fff !important;
  stroke: #fff !important;
  stroke-width: 3px !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-text-fill-color: #fff !important;
  display: block !important;
}

.nav-container .lg\\:hidden button svg[class*="mobile-hamburger"] {
  color: #fff !important;
  stroke: #fff !important;
  stroke-width: 3px !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-text-fill-color: #fff !important;
  display: block !important;
}

.nav-container .lg\\:hidden button .lucide[class*="mobile-hamburger"] {
  color: #fff !important;
  stroke: #fff !important;
  stroke-width: 3px !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-text-fill-color: #fff !important;
  display: block !important;
}

@media (width <= 1024px) {
  .nav-container button[class*="mobile-hamburger"] svg, .nav-container button[class*="mobile-hamburger"] .lucide {
    color: #fff !important;
    stroke: #fff !important;
    stroke-width: 3px !important;
    fill: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-text-fill-color: #fff !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    display: block !important;
  }

  .nav-container .lg\\:hidden button svg {
    color: #fff !important;
    stroke: #fff !important;
    stroke-width: 3px !important;
    fill: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-text-fill-color: #fff !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    display: block !important;
  }

  .nav-container .lg\\:hidden button .lucide {
    color: #fff !important;
    stroke: #fff !important;
    stroke-width: 3px !important;
    fill: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-text-fill-color: #fff !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    display: block !important;
  }

  .nav-container .lg\\:hidden button .lucide-menu {
    color: #fff !important;
    stroke: #fff !important;
    stroke-width: 3px !important;
    fill: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-text-fill-color: #fff !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    display: block !important;
  }

  .nav-container .lg\\:hidden {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
  }

  .nav-container .lg\\:hidden button {
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 999 !important;
    background: #0003 !important;
    border: 2px solid #fff6 !important;
    border-radius: 8px !important;
    justify-content: center !important;
    align-items: center !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 12px !important;
    display: flex !important;
    position: relative !important;
  }

  button[class*="lg:hidden"] svg, button[class*="SheetTrigger"] svg, [data-radix-dialog-trigger] svg, .lucide-menu {
    color: #fff !important;
    stroke: #fff !important;
    stroke-width: 3px !important;
    fill: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 24px !important;
    height: 24px !important;
    display: block !important;
  }
}

div[class*="w-16"][class*="h-16"] svg, div[class*="w-16"][class*="h-16"] .lucide, .feature-icon-box svg, .feature-icon-box .lucide, .feature-card svg, .feature-card .lucide {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 5 !important;
  display: block !important;
  position: relative !important;
}

.enterprise-features svg, .enterprise-features .lucide {
  opacity: 1 !important;
  visibility: visible !important;
  color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
  display: block !important;
}

div:has(h3:contains("Enterprise Features")) svg {
  opacity: 1 !important;
  visibility: visible !important;
  color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
  display: block !important;
}

div:has(h3:contains("Enterprise Features")) .lucide {
  opacity: 1 !important;
  visibility: visible !important;
  color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
  display: block !important;
}

div:has(h4:contains("Enterprise Features")) svg {
  opacity: 1 !important;
  visibility: visible !important;
  color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
  display: block !important;
}

div:has(h4:contains("Enterprise Features")) .lucide {
  opacity: 1 !important;
  visibility: visible !important;
  color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
  display: block !important;
}

div[class*="bg-orange"] svg, div[class*="bg-orange"] .lucide, div[class*="bg-purple"] svg, div[class*="bg-purple"] .lucide, div[class*="bg-green"] svg, div[class*="bg-green"] .lucide, div[class*="bg-blue"] svg, div[class*="bg-blue"] .lucide, div[class*="bg-red"] svg, div[class*="bg-red"] .lucide, div[class*="bg-yellow"] svg, div[class*="bg-yellow"] .lucide {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10 !important;
  display: block !important;
  position: relative !important;
}

.feature-card, .feature-box, .benefit-card, .benefit-box, .info-card, .info-box {
  position: relative !important;
}

.feature-card svg, .feature-box svg, .benefit-card svg, .benefit-box svg, .info-card svg, .info-box svg, .feature-card .lucide, .feature-box .lucide, .benefit-card .lucide, .benefit-box .lucide, .info-card .lucide, .info-box .lucide {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10 !important;
  display: block !important;
  position: relative !important;
}

body:not(footer) div[class*="rounded"] svg:not(footer *), body:not(.footer) div[class*="rounded"] .lucide:not(footer *), body:not(footer) div[class*="flex"] svg:not(footer *), body:not(.footer) div[class*="flex"] .lucide:not(footer *), body:not(footer) div[class*="items-center"] svg:not(footer *), body:not(.footer) div[class*="items-center"] .lucide:not(footer *), body:not(footer) div[class*="justify-center"] svg:not(footer *), body:not(.footer) div[class*="justify-center"] .lucide:not(footer *) {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.glass-card svg, .glass-card .lucide, .hover-lift svg, .hover-lift .lucide {
  opacity: 1 !important;
  visibility: visible !important;
  color: currentColor !important;
  stroke: currentColor !important;
  display: block !important;
}

div[class*="bg-gradient"] svg, div[class*="bg-gradient"] .lucide {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10 !important;
  display: block !important;
  position: relative !important;
}

.card-content svg, .card-content .lucide, .cardcontent svg, .cardcontent .lucide, svg[style*="opacity: 0"]:not(footer svg):not(.footer svg), .lucide[style*="opacity: 0"]:not(footer .lucide):not(.footer .lucide), svg[style*="visibility: hidden"]:not(footer svg):not(.footer svg), .lucide[style*="visibility: hidden"]:not(footer .lucide):not(.footer .lucide), svg[style*="display: none"]:not(footer svg):not(.footer svg), .lucide[style*="display: none"]:not(footer .lucide):not(.footer .lucide) {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

svg:not(footer svg):not(.footer svg):not(footer *), .lucide:not(footer .lucide):not(.footer .lucide):not(footer *) {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  position: relative !important;
}

footer svg, footer .lucide, .footer svg, .footer .lucide {
  opacity: inherit !important;
  visibility: inherit !important;
  display: inherit !important;
}

div[class*="w-16 h-16"] svg, div[class*="w-16 h-16"] .lucide, div[class*="w-12 h-12"] svg, div[class*="w-12 h-12"] .lucide, div[class*="w-10 h-10"] svg, div[class*="w-10 h-10"] .lucide, div[class*="w-8 h-8"] svg, div[class*="w-8 h-8"] .lucide {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10 !important;
  display: block !important;
  position: relative !important;
}

.glass-card svg, .glass-card .lucide {
  opacity: 1 !important;
  visibility: visible !important;
  color: currentColor !important;
  stroke: currentColor !important;
  display: block !important;
}

.bg-orange-500 svg, .bg-orange-500 .lucide, .bg-purple-500 svg, .bg-purple-500 .lucide, .bg-green-500 svg, .bg-green-500 .lucide, .bg-blue-500 svg, .bg-blue-500 .lucide, .bg-red-500 svg, .bg-red-500 .lucide, .bg-yellow-500 svg, .bg-yellow-500 .lucide {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  stroke-width: 2px !important;
  display: block !important;
}

.p-6 svg, .p-6 .lucide, .p-4 svg, .p-4 .lucide {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.flex svg, .flex .lucide {
  opacity: 1 !important;
  visibility: visible !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.rounded-lg svg, .rounded-lg .lucide, .rounded svg, .rounded .lucide, [class*="motion"] svg, [class*="motion"] .lucide {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.lucide-shield, .lucide-zap, .lucide-globe, .lucide-monitor, .lucide-refresh-cw, .lucide-dollar-sign, .lucide-bar-chart-3, .lucide-target, .lucide-pie-chart, .lucide-trending-up, .lucide-trending-down, .lucide-users, .lucide-check-circle, .lucide-star, .lucide-award {
  opacity: 1 !important;
  visibility: visible !important;
  color: currentColor !important;
  stroke: currentColor !important;
  display: block !important;
}

svg[stroke="currentColor"], .lucide[stroke="currentColor"] {
  stroke: currentColor !important;
  fill: none !important;
}

svg[fill="currentColor"], .lucide[fill="currentColor"] {
  fill: currentColor !important;
}

* svg, * .lucide {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

svg:not([style*="display: none"]), .lucide:not([style*="display: none"]) {
  display: block !important;
}

svg {
  width: auto !important;
  height: auto !important;
}

.items-center svg, .items-center .lucide, .justify-center svg, .justify-center .lucide {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

[data-radix-dialog-trigger] {
  background: #0000001a !important;
  border: 2px solid #ffffff4d !important;
  border-radius: 8px !important;
}

[data-radix-dialog-trigger] svg {
  color: #fff !important;
  stroke: #fff !important;
  stroke-width: 2.5px !important;
  fill: none !important;
}

@media (width <= 768px) {
  .mobile-hamburger-button, button[aria-haspopup="dialog"] {
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1000 !important;
    background: #ffffff1a !important;
    border: 2px solid #ffffff80 !important;
    border-radius: 10px !important;
    justify-content: center !important;
    align-items: center !important;
    width: 50px !important;
    height: 50px !important;
    padding: 13px !important;
    display: flex !important;
    position: relative !important;
    box-shadow: 0 2px 8px #0003 !important;
  }

  .nav-container .lg\\:hidden button {
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1000 !important;
    background: #ffffff1a !important;
    border: 2px solid #ffffff80 !important;
    border-radius: 10px !important;
    justify-content: center !important;
    align-items: center !important;
    width: 50px !important;
    height: 50px !important;
    padding: 13px !important;
    display: flex !important;
    position: relative !important;
    box-shadow: 0 2px 8px #0003 !important;
  }

  .mobile-hamburger-icon, button[aria-haspopup="dialog"] svg {
    color: #fff !important;
    stroke: #fff !important;
    stroke-width: 4px !important;
    fill: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: drop-shadow(0 1px 3px #0006) !important;
    width: 26px !important;
    height: 26px !important;
    display: block !important;
  }

  .nav-container .lg\\:hidden button svg {
    color: #fff !important;
    stroke: #fff !important;
    stroke-width: 4px !important;
    fill: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: drop-shadow(0 1px 3px #0006) !important;
    width: 26px !important;
    height: 26px !important;
    display: block !important;
  }
}

.nav-container button:hover, .nav-container .nav-item:hover, .nav-container [class*="nav-item"]:hover, .nav-container .support-dropdown-trigger:hover, .nav-container .exchange-pro-logo:hover, .nav-container .cursor-pointer:hover, .nav-container .group:hover, .force-fixed-header button:hover, .nav-container button:hover *, .nav-container .nav-item:hover *, .nav-container [class*="nav-item"]:hover *, .nav-container .support-dropdown-trigger:hover *, .nav-container .exchange-pro-logo:hover *, .nav-container .cursor-pointer:hover *, .nav-container .group:hover *, .force-fixed-header button:hover * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
  -webkit-box-decoration-break: clone !important;
  box-decoration-break: clone !important;
  background: #00d084 !important;
  border: 2px solid #00c77c !important;
  border-radius: 8px !important;
  outline: none !important;
  transition: all .25s cubic-bezier(.4, 0, .2, 1) !important;
  box-shadow: 0 8px 20px #00d08480 !important;
}

.nav-container .lg\\:hidden button:hover svg {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
}

.nav-container .lg\\:hidden button:hover .lucide {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
}

.nav-container .lg\\:hidden button:hover path {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
}

.nav-container .lg\\:hidden button:hover line {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
}

.crypto-markets .relative .lucide-search, .crypto-markets .relative svg[class*="search"], .crypto-markets .relative .w-4.h-4, .crypto-markets .relative .w-5.h-5, .crypto-markets div.relative > svg, .crypto-markets div[class*="relative"] > svg, .crypto-markets .relative > .lucide {
  z-index: 140 !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #9ca3af !important;
  stroke: #9ca3af !important;
  fill: none !important;
  pointer-events: none !important;
  stroke-width: 2px !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 10px !important;
  transform: translateY(-50%) !important;
}

.crypto-markets .relative, [data-section="markets"] .relative {
  contain: none !important;
  align-items: center !important;
  display: flex !important;
  position: relative !important;
  overflow: visible !important;
}

.crypto-markets .relative input, [data-section="markets"] .relative input {
  box-sizing: border-box !important;
  z-index: 10 !important;
  padding-left: 36px !important;
  padding-right: 12px !important;
  position: relative !important;
}

.crypto-markets .relative:hover svg, .crypto-markets .relative:hover .lucide, [data-section="markets"] .relative:hover svg, [data-section="markets"] .relative:hover .lucide {
  color: #d1d5db !important;
  stroke: #d1d5db !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.crypto-markets .relative input:focus ~ svg, .crypto-markets .relative input:focus ~ .lucide, [data-section="markets"] .relative input:focus ~ svg, [data-section="markets"] .relative input:focus ~ .lucide {
  color: #00d084 !important;
  stroke: #00d084 !important;
  transform: translateY(-50%)scale(1.1) !important;
}

div[data-section="markets"] .relative svg, div[data-section="markets"] .relative .lucide, div.crypto-markets .relative svg, div.crypto-markets .relative .lucide, .min-h-screen.crypto-markets .relative svg, .min-h-screen.crypto-markets .relative .lucide {
  z-index: 150 !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #9ca3af !important;
  stroke: #9ca3af !important;
  stroke-width: 2px !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 10px !important;
  transform: translateY(-50%) !important;
}

div[data-section="markets"] .relative input, div.crypto-markets .relative input, .min-h-screen.crypto-markets .relative input, .crypto-markets input[placeholder*="Search"], [data-section="markets"] input[placeholder*="Search"] {
  box-sizing: border-box !important;
  z-index: 5 !important;
  padding-left: 36px !important;
  padding-right: 12px !important;
  position: relative !important;
  transform: translateY(-6px) !important;
}

div[data-section="markets"] .relative, div.crypto-markets .relative, .min-h-screen.crypto-markets .relative, .crypto-markets-page .relative {
  contain: none !important;
  z-index: 20 !important;
  align-items: center !important;
  display: flex !important;
  position: relative !important;
  overflow: visible !important;
  transform: translateY(-4px) !important;
}

* .crypto-markets * .relative * svg, * .crypto-markets * .relative * .lucide, * div[data-section="markets"] * .relative * svg, * div[data-section="markets"] * .relative * .lucide {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 170 !important;
  color: #9ca3af !important;
  stroke: #9ca3af !important;
  pointer-events: none !important;
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 10px !important;
  transform: translateY(-50%) !important;
}

.crypto-markets .absolute.left-3, .crypto-markets .absolute.left-4, [data-section="markets"] .absolute.left-3, [data-section="markets"] .absolute.left-4, .crypto-markets div[class*="absolute"] svg, .crypto-markets div[class*="absolute"] .lucide {
  z-index: 180 !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #9ca3af !important;
  stroke: #9ca3af !important;
  stroke-width: 2px !important;
  pointer-events: none !important;
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 10px !important;
  transform: translateY(-50%) !important;
}

.crypto-markets .lucide-search, [data-section="markets"] .lucide-search, .crypto-markets-page .lucide-search {
  z-index: 190 !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #9ca3af !important;
  stroke: #9ca3af !important;
  stroke-width: 2px !important;
  pointer-events: none !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 10px !important;
  transform: translateY(-50%) !important;
}

.crypto-markets input[placeholder*="Search"] ~ svg, .crypto-markets input[placeholder*="Search"] + svg, [data-section="markets"] input[placeholder*="Search"] ~ svg, [data-section="markets"] input[placeholder*="Search"] + svg {
  z-index: 200 !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #9ca3af !important;
  stroke: #9ca3af !important;
  stroke-width: 2px !important;
  pointer-events: none !important;
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 10px !important;
  transform: translateY(-50%) !important;
}

.crypto-markets .relative.md\\:col-span-2 svg {
  z-index: 200 !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #9ca3af !important;
  stroke: #9ca3af !important;
  stroke-width: 2px !important;
  pointer-events: none !important;
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 10px !important;
  transform: translateY(-50%) !important;
}

[data-section="markets"] .relative.md\\:col-span-2 svg {
  z-index: 200 !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #9ca3af !important;
  stroke: #9ca3af !important;
  stroke-width: 2px !important;
  pointer-events: none !important;
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 10px !important;
  transform: translateY(-50%) !important;
}

:root {
  --font-family-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-size: 10px;
  --background: #1c1c1c;
  --foreground: #fff;
  --card: #2a2a2a;
  --card-foreground: #fff;
  --popover: #2a2a2a;
  --popover-foreground: #fff;
  --primary: #00d084;
  --primary-foreground: #fff;
  --secondary: #2a2a2a;
  --secondary-foreground: #a1a1aa;
  --muted: #2a2a2a;
  --muted-foreground: #71717a;
  --accent: #00d084;
  --accent-foreground: #fff;
  --destructive: #ef4444;
  --destructive-foreground: #fff;
  --warning: #f59e0b;
  --warning-foreground: #fff;
  --border: #ffffff1a;
  --input: #ffffff0d;
  --input-background: #2a2a2a;
  --switch-background: #2a2a2a;
  --ring: #00d084;
  --chart-1: #00d084;
  --chart-2: #00c77c;
  --chart-3: #f59e0b;
  --chart-4: #ef4444;
  --chart-5: #fff;
  --chart-6: #9ca3af;
  --gradient-primary: linear-gradient(135deg, #00d084, #00c77c);
  --gradient-success: linear-gradient(135deg, #00d084, #00b875);
  --gradient-danger: linear-gradient(135deg, #ef4444, #dc2626);
  --gradient-warning: linear-gradient(135deg, #f59e0b, #d97706);
  --gradient-card: linear-gradient(135deg, #2a2a2acc, #2a2a2a99);
  --gradient-hero: linear-gradient(135deg, #00d0841a, #00c77c0d);
  --header-height: 3rem;
  --ticker-height: 3.5rem;
  --ticker-spacing: .5rem;
  --total-header-height: 7rem;
  --mobile-header-height: 3rem;
  --mobile-total-header-height: 3rem;
  --radius: 3px;
  --spacing-xs: .125rem;
  --spacing-sm: .25rem;
  --spacing-md: .375rem;
  --spacing-lg: .5rem;
  --spacing-xl: .75rem;
  --sidebar: #2a2a2a;
  --sidebar-foreground: #fff;
  --sidebar-primary: #00d084;
  --sidebar-primary-foreground: #fff;
  --sidebar-accent: #2a2a2a;
  --sidebar-accent-foreground: #a1a1aa;
  --sidebar-border: #ffffff1a;
  --sidebar-ring: #00d084;
}

.dark {
  --background: #1c1c1c;
  --foreground: #fff;
  --card: #2a2a2a;
  --card-foreground: #fff;
  --popover: #2a2a2a;
  --popover-foreground: #fff;
  --primary: #00d084;
  --primary-foreground: #fff;
  --secondary: #2a2a2a;
  --secondary-foreground: #a1a1aa;
  --muted: #2a2a2a;
  --muted-foreground: #71717a;
  --accent: #00d084;
  --accent-foreground: #fff;
  --destructive: #ef4444;
  --destructive-foreground: #fff;
  --border: #ffffff1a;
  --input: #ffffff0d;
  --ring: #00d084;
}

.nav-container {
  background: var(--background) !important;
  background-color: var(--background) !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  height: var(--header-height) !important;
  z-index: 9999 !important;
  box-sizing: border-box !important;
  will-change: transform !important;
  contain: layout style paint !important;
  border: none !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: .625rem 0 !important;
  transition: none !important;
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateZ(0) !important;
}

.nav-container button:hover, .nav-container .nav-item:hover, .nav-container .support-dropdown-trigger:hover, .nav-container .exchange-pro-logo:hover, .nav-container button:hover *, .nav-container .nav-item:hover *, .nav-container .support-dropdown-trigger:hover *, .nav-container .exchange-pro-logo:hover *, .nav-container button:hover span, .nav-container .nav-item:hover span, .nav-container button:hover .text-sm, .nav-container .nav-item:hover .text-sm {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
  background: #00d084 !important;
  border: 1px solid #00c77c !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  transition: all .2s !important;
  box-shadow: 0 2px 8px #00d08433 !important;
}

.nav-container .lg\\:hidden button:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
  background: #00d084 !important;
  border: 1px solid #00c77c !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  transition: all .2s !important;
  box-shadow: 0 2px 8px #00d08433 !important;
}

.nav-container .lg\\:hidden button:hover * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
  background: #00d084 !important;
  border: 1px solid #00c77c !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  transition: all .2s !important;
  box-shadow: 0 2px 8px #00d08433 !important;
}

.nav-container .nav-item.active, .nav-container button.nav-item.active, .nav-container .support-dropdown-trigger[data-state="open"] {
  color: #fff !important;
  -webkit-backdrop-filter: none !important;
  background: #00d084 !important;
  border: 2px solid #00c77c !important;
  box-shadow: 0 4px 12px #00d08480 !important;
}

.nav-item {
  border-radius: 6px !important;
  transition: all .25s cubic-bezier(.4, 0, .2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.nav-item:hover, .nav-item.active {
  color: #fff !important;
  -webkit-backdrop-filter: none !important;
  background: #00d084 !important;
  border: 2px solid #00c77c !important;
}

.support-dropdown-trigger {
  border-radius: 6px !important;
  transition: all .25s cubic-bezier(.4, 0, .2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.support-dropdown-trigger:hover, .support-dropdown-trigger[data-state="open"], button.nav-item:hover, button.support-dropdown-trigger:hover {
  color: #fff !important;
  -webkit-backdrop-filter: none !important;
  background: #00d084 !important;
  border: 2px solid #00c77c !important;
}

.nav-container .text-sm {
  font-size: .875rem !important;
  font-weight: 500 !important;
  transition: all .25s !important;
}

.nav-container .nav-item {
  justify-content: center !important;
  align-items: center !important;
  height: auto !important;
  min-height: 2.25rem !important;
  padding: .75rem 1rem !important;
  transition: all .25s cubic-bezier(.4, 0, .2, 1) !important;
  display: flex !important;
}

@media (width <= 1024px) {
  .nav-container .nav-item {
    border-radius: 6px !important;
  }

  .nav-container .nav-item:hover {
    color: #fff !important;
    -webkit-backdrop-filter: none !important;
    background: #00d084 !important;
    border: 2px solid #00c77c !important;
    transform: translateY(-1px) !important;
  }
}

nav.nav-container button:hover, .nav-container > * button:hover, .force-fixed-header button:hover, [role="navigation"] button:hover, .nav-container .cursor-pointer:hover, .nav-container .group:hover, nav.nav-container button:hover *, .nav-container > * button:hover *, .force-fixed-header button:hover *, [role="navigation"] button:hover *, .nav-container .cursor-pointer:hover *, .nav-container .group:hover *, .nav-container button:hover span, .nav-container button:hover .text-sm, .nav-container .nav-item:hover span, .nav-container .nav-item:hover .text-sm, .nav-container .support-dropdown-trigger:hover span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
  background: #00d084 !important;
  border: 1px solid #00c77c !important;
  border-radius: 4px !important;
  outline: none !important;
  text-decoration: none !important;
  transition: all .2s cubic-bezier(.4, 0, .2, 1) !important;
  box-shadow: 0 2px 8px #00d08433 !important;
}

.nav-container .exchange-pro-logo:hover, .nav-container .new-logo-container:hover {
  -webkit-backdrop-filter: none !important;
  background: #00d084 !important;
  border: 1px solid #00c77c !important;
  border-radius: 4px !important;
  padding: .25rem .5rem !important;
  transition: all .2s cubic-bezier(.4, 0, .2, 1) !important;
  box-shadow: 0 2px 8px #00d08433 !important;
}

.nav-container .w-4, .nav-container .h-4 {
  transition: all .2s !important;
}

.nav-container .nav-item:hover .w-4, .nav-container .nav-item:hover .h-4 {
  filter: brightness(1.2) !important;
  color: #fff !important;
}

.nav-container button:hover, .nav-container .nav-item:hover, .nav-container .support-dropdown-trigger:hover, .nav-container button:hover span, .nav-container .nav-item:hover span, .nav-container .support-dropdown-trigger:hover span, .nav-container button:hover .text-sm, .nav-container .nav-item:hover .text-sm, .nav-container .support-dropdown-trigger:hover .text-sm {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
  background: #00d084 !important;
  border-radius: 8px !important;
  padding: .5rem 1rem !important;
  box-shadow: 0 4px 12px #00d0844d !important;
}

.nav-container button:hover *, .nav-container .nav-item:hover *, .nav-container .support-dropdown-trigger:hover *, .nav-container .exchange-pro-logo:hover *, .nav-container .cursor-pointer:hover *, .nav-container .group:hover * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00d084 !important;
}

.nav-container :hover {
  transition: all .25s !important;
}

.nav-container button, .nav-container .nav-item, .nav-container .support-dropdown-trigger, .nav-container span, .nav-container div {
  box-shadow: none !important;
  text-shadow: none !important;
  background: none !important;
  border: none !important;
}

.nav-container button:hover, .nav-container .nav-item:hover, .nav-container .support-dropdown-trigger:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00d084 !important;
  border: 2px solid #00c77c !important;
  border-radius: 8px !important;
  padding: .5rem 1rem !important;
  box-shadow: 0 6px 16px #00d08466 !important;
}

.nav-container button:hover *, .nav-container .nav-item:hover *, .nav-container .support-dropdown-trigger:hover * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
  background: #00d084 !important;
  border: none !important;
}

.nav-container button:hover:before, .nav-container button:hover:after, .nav-container .nav-item:hover:before, .nav-container .nav-item:hover:after, .nav-container .support-dropdown-trigger:hover:before, .nav-container .support-dropdown-trigger:hover:after {
  content: none !important;
  background: none !important;
  display: none !important;
}

.nav-container button:hover, .nav-container .nav-item:hover, .nav-container [class*="nav"]:hover, .nav-container .support-dropdown-trigger:hover, .nav-container .exchange-pro-logo:hover, .nav-container .cursor-pointer:hover, .nav-container .group:hover, .nav-container button:hover *, .nav-container .nav-item:hover *, .nav-container [class*="nav"]:hover *, .nav-container .support-dropdown-trigger:hover *, .nav-container .exchange-pro-logo:hover *, .nav-container .cursor-pointer:hover *, .nav-container .group:hover *, .nav-container button:hover:before, .nav-container button:hover:after, .nav-container .nav-item:hover:before, .nav-container .nav-item:hover:after {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  background: #00d084 !important;
  border: 2px solid #00c77c !important;
  outline: none !important;
}

.nav-container .lg\\:hidden button:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  background: #00d084 !important;
  border: 2px solid #00c77c !important;
  outline: none !important;
}

.nav-container .lg\\:hidden button:hover * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  background: #00d084 !important;
  border: 2px solid #00c77c !important;
  outline: none !important;
}

.nav-container .nav-item span {
  font-size: 1rem !important;
  font-weight: 500 !important;
}

.nav-container .w-4, .nav-container .h-4 {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

.nav-container .mr-2\.5 {
  margin-right: .875rem !important;
}

.nav-container .ml-2\.5 {
  margin-left: .875rem !important;
}

.nav-container .gap-4 {
  gap: 1.125rem !important;
}

.nav-container .gap-2 {
  gap: .625rem !important;
}

.nav-container .badge {
  height: 1.75rem !important;
  padding: .25rem .75rem !important;
  font-size: .8125rem !important;
}

.nav-container .support-dropdown-trigger {
  justify-content: center !important;
  align-items: center !important;
  height: auto !important;
  min-height: 2.25rem !important;
  padding: .75rem 1rem !important;
  display: flex !important;
}

.nav-container .lg\\:hidden button {
  justify-content: center !important;
  align-items: center !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  padding: .625rem !important;
  display: flex !important;
}

.nav-container .lg\\:hidden .w-6 {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

.nav-container .w-full {
  width: 100% !important;
  max-width: none !important;
  padding-left: 1.125rem !important;
  padding-right: 1.125rem !important;
}

@media (width >= 1024px) {
  .nav-container .w-full {
    padding-left: 2.25rem !important;
    padding-right: 2.25rem !important;
  }
}

@media (width >= 1280px) {
  .nav-container .w-full {
    padding-left: 3.25rem !important;
    padding-right: 3.25rem !important;
  }
}

.nav-container.scrolled {
  background: var(--background) !important;
  background-color: var(--background) !important;
  box-shadow: none !important;
  border: none !important;
}

.nav-item {
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
}

.nav-item:before {
  content: "";
  opacity: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #00d0841a, #00c77c1a);
  transition: opacity .3s;
  position: absolute;
  inset: 0;
}

.nav-item:hover:before {
  opacity: 1;
}

.nav-item.active {
  background: linear-gradient(135deg, #00d08433, #00c77c33);
  border-color: #00d0844d;
}

.crypto-ticker-scrollable {
  min-height: var(--ticker-height) !important;
  height: var(--ticker-height) !important;
  top: calc(var(--header-height)  + var(--ticker-spacing)) !important;
  will-change: transform !important;
  contain: layout style paint !important;
  -webkit-backdrop-filter: none !important;
  box-sizing: border-box !important;
  z-index: 9998 !important;
  background: none !important;
  border: none !important;
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  overflow: hidden !important;
  transform: translateZ(0) !important;
}

.crypto-ticker-scrollable .flex[style*="gap"] {
  gap: 3rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.crypto-ticker-scrollable motion-div {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  gap: .75rem !important;
  min-width: 280px !important;
  margin-right: 2rem !important;
  padding: 0 1rem !important;
  display: flex !important;
}

.crypto-ticker-scrollable span {
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  display: inline-block !important;
  overflow: hidden !important;
}

.crypto-ticker-scrollable .font-bold {
  text-align: left !important;
  min-width: 40px !important;
}

.crypto-ticker-scrollable .font-medium {
  text-align: right !important;
  min-width: 80px !important;
}

.crypto-ticker-scrollable .text-green-400, .crypto-ticker-scrollable .text-red-400 {
  text-align: right !important;
  min-width: 70px !important;
}

.crypto-ticker-scrollable {
  top: var(--header-height);
  width: 100vw;
  height: var(--ticker-height);
  background: var(--background);
  background-color: var(--background);
  z-index: 9998;
  position: fixed;
  overflow: hidden;
}

.crypto-ticker-scrollable .min-w-40 {
  flex-shrink: 0;
  min-width: 10rem;
  max-width: 10rem;
  padding: 0 .25rem;
}

.crypto-ticker-scrollable .min-w-14 {
  flex-shrink: 0;
  min-width: 3.5rem;
  max-width: 3.5rem;
}

.crypto-ticker-scrollable .min-w-16 {
  flex-shrink: 0;
  min-width: 4rem;
  max-width: 4rem;
}

.crypto-ticker-scrollable motion-div[class*="gap-2"] {
  gap: .5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.crypto-ticker-scrollable [class*="motion"] {
  flex-shrink: 0 !important;
  width: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
}

.crypto-ticker-scrollable .truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.crypto-ticker-scrollable .flex-shrink-0 {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
}

.crypto-ticker-scrollable .w-7 {
  flex-shrink: 0;
  width: 1.75rem;
  min-width: 1.75rem;
  height: 1.75rem;
  min-height: 1.75rem;
}

.crypto-ticker-scrollable .animate-continuous {
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

.ticker-container {
  align-items: center;
  width: 100%;
  height: 3.5rem;
  padding: .75rem 0;
  display: flex;
  position: relative;
  overflow: hidden;
  background: none !important;
  border: none !important;
}

.ticker-content-optimized {
  align-items: center;
  gap: 3rem;
  width: max-content;
  height: 100%;
  animation: 120s linear infinite scroll-left-slow;
  display: flex;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.ticker-item-optimized {
  white-space: nowrap;
  box-sizing: border-box;
  flex-shrink: 0;
  align-items: center;
  gap: 1.25rem;
  min-width: 320px;
  height: 100%;
  padding: 0 1rem;
  display: flex;
  position: relative;
}

.ticker-crypto-info {
  flex-shrink: 0;
  align-items: center;
  gap: .75rem;
  min-width: 140px;
  display: flex;
}

.ticker-symbol-container {
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-start;
  gap: .1875rem;
  min-width: 80px;
  display: flex;
}

.ticker-symbol-wrapper {
  align-items: center;
  gap: .1875rem;
  display: flex;
}

.ticker-symbol-text {
  color: #fff;
  letter-spacing: .025em;
  font-size: .8125rem;
  font-weight: 700;
}

.ticker-currency-symbol {
  color: #00d084;
  font-size: .75rem;
  font-weight: 600;
}

.ticker-name-text {
  color: #9ca3af;
  letter-spacing: .015em;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 80px;
  font-size: .6875rem;
  font-weight: 400;
  overflow: hidden;
}

.ticker-price-display {
  color: #fff;
  text-align: left;
  flex-shrink: 0;
  min-width: 80px;
  padding-right: .5rem;
  font-size: .75rem;
  font-weight: 500;
}

.ticker-change-display {
  text-align: left;
  flex-shrink: 0;
  align-items: center;
  gap: .25rem;
  min-width: 70px;
  font-size: .6875rem;
  font-weight: 500;
  display: flex;
}

.ticker-change-display.ticker-positive {
  color: #22c55e;
}

.ticker-change-display.ticker-negative {
  color: #ef4444;
}

.ticker-trend-icon {
  flex-shrink: 0;
  width: .75rem;
  height: .75rem;
}

.ticker-change-text {
  white-space: nowrap;
}

.ticker-dot-separator {
  color: #fff6;
  flex-shrink: 0;
  margin: 0 .5rem;
  font-size: 1rem;
  font-weight: bold;
}

.ticker-icon-enhanced {
  background: none;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: .625rem;
  transition: all .2s;
  display: flex;
  box-shadow: 0 2px 8px #00000026;
  width: 1.75rem !important;
  min-width: 1.75rem !important;
  height: 1.75rem !important;
  min-height: 1.75rem !important;
}

.ticker-icon-enhanced:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px #0003;
}

.ticker-icon-enhanced img {
  object-fit: contain;
  filter: drop-shadow(0 1px 3px #0000001a);
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.ticker-icon-compact {
  background: none;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: .625rem;
  display: flex;
  box-shadow: 0 2px 8px #00000026;
  width: 1.75rem !important;
  min-width: 1.75rem !important;
  height: 1.75rem !important;
  min-height: 1.75rem !important;
}

.ticker-icon-compact img {
  object-fit: contain;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

@media (width <= 768px) {
  .crypto-ticker-new {
    height: 3.5rem;
  }

  .crypto-ticker-scrollable .min-w-40 {
    min-width: 8rem !important;
  }

  .crypto-ticker-scrollable .w-7 {
    width: 1.5rem !important;
    min-width: 1.5rem !important;
    height: 1.5rem !important;
    min-height: 1.5rem !important;
  }

  .crypto-ticker-scrollable .text-sm {
    font-size: .6875rem !important;
  }

  .crypto-ticker-scrollable .text-xs {
    font-size: .625rem !important;
  }

  .crypto-ticker-scrollable .min-w-14 {
    min-width: 2.5rem !important;
  }

  .crypto-ticker-scrollable .min-w-16 {
    min-width: 3rem !important;
  }

  .crypto-ticker-scrollable .gap-2 {
    gap: .5rem !important;
  }

  .ticker-container {
    height: 3rem;
    padding: .5rem 0;
    background: none !important;
    border: none !important;
  }

  .ticker-content-optimized {
    gap: 2.5rem;
    animation: 100s linear infinite scroll-left-mobile;
  }

  .ticker-item-optimized {
    gap: 1rem;
    min-width: 240px;
    padding: 0 .75rem;
  }

  .ticker-crypto-info {
    flex-shrink: 0;
    gap: .5rem;
    min-width: 100px;
  }

  .ticker-icon-enhanced, .ticker-icon-compact {
    width: 1.5rem !important;
    min-width: 1.5rem !important;
    height: 1.5rem !important;
    min-height: 1.5rem !important;
  }

  .ticker-name-text {
    max-width: 60px;
    font-size: .625rem;
  }

  .ticker-symbol-text {
    font-size: .6875rem;
  }

  .ticker-currency-symbol {
    font-size: .625rem;
  }

  .ticker-price-display {
    flex-shrink: 0;
    min-width: 65px;
    font-size: .6875rem;
  }

  .ticker-change-display {
    flex-shrink: 0;
    gap: .1875rem;
    min-width: 55px;
    font-size: .625rem;
  }

  .ticker-trend-icon {
    width: .625rem;
    height: .625rem;
  }

  .ticker-dot-separator {
    margin: 0 .375rem;
    font-size: .875rem;
  }
}

@media (width <= 480px) {
  .crypto-ticker-new {
    height: 3rem;
  }

  .crypto-ticker-scrollable .min-w-40 {
    min-width: 7rem !important;
  }

  .crypto-ticker-scrollable .w-7 {
    width: 1.25rem !important;
    min-width: 1.25rem !important;
    height: 1.25rem !important;
    min-height: 1.25rem !important;
  }

  .crypto-ticker-scrollable .text-sm {
    font-size: .625rem !important;
  }

  .crypto-ticker-scrollable .text-xs {
    font-size: .5625rem !important;
  }

  .crypto-ticker-scrollable .min-w-14 {
    min-width: 2rem !important;
  }

  .crypto-ticker-scrollable .min-w-16 {
    min-width: 2.5rem !important;
  }

  .crypto-ticker-scrollable .max-w-14 {
    max-width: 2rem !important;
  }

  .crypto-ticker-scrollable .gap-2 {
    gap: .375rem !important;
  }

  .ticker-container {
    height: 2.75rem;
    padding: .375rem 0;
    background: none !important;
    border: none !important;
  }

  .ticker-content-optimized {
    gap: 2rem;
    animation: 80s linear infinite scroll-left-mobile-compact;
  }

  .ticker-item-optimized {
    gap: .75rem;
    min-width: 200px;
    padding: 0 .5rem;
  }

  .ticker-crypto-info {
    flex-shrink: 0;
    gap: .375rem;
    min-width: 85px;
  }

  .ticker-icon-enhanced, .ticker-icon-compact {
    width: 1.25rem !important;
    min-width: 1.25rem !important;
    height: 1.25rem !important;
    min-height: 1.25rem !important;
  }

  .ticker-name-text {
    max-width: 50px;
    font-size: .5625rem;
  }

  .ticker-symbol-text {
    font-size: .625rem;
  }

  .ticker-currency-symbol {
    font-size: .5625rem;
  }

  .ticker-price-display {
    flex-shrink: 0;
    min-width: 55px;
    font-size: .625rem;
  }

  .ticker-change-display {
    flex-shrink: 0;
    min-width: 45px;
    font-size: .5625rem;
  }

  .ticker-trend-icon {
    width: .5625rem;
    height: .5625rem;
  }

  .ticker-dot-separator {
    margin: 0 .25rem;
    font-size: .75rem;
  }
}

[data-radix-dialog-overlay] {
  z-index: 9999 !important;
}

[data-radix-dialog-content] {
  z-index: 10000 !important;
  -webkit-backdrop-filter: none !important;
  background: #242424 !important;
  border: 1px solid #ffffff1a !important;
}

[data-slot="sheet-overlay"] {
  z-index: 9999 !important;
}

[data-slot="sheet-content"] {
  z-index: 10000 !important;
  -webkit-backdrop-filter: none !important;
  background: #242424 !important;
  border: 1px solid #ffffff1a !important;
}

body:has([data-state="open"]) .crypto-ticker-scrollable {
  z-index: 9000 !important;
}

[data-state="open"] {
  z-index: 10001 !important;
}

.mobile-sidebar-solid {
  -webkit-backdrop-filter: none !important;
  background: #242424 !important;
  border: 1px solid #ffffff1a !important;
  box-shadow: 0 8px 32px #0009 !important;
}

@media (width <= 1024px) {
  [data-radix-dialog-overlay] {
    z-index: 10001 !important;
  }

  [data-radix-dialog-content] {
    z-index: 10002 !important;
    -webkit-backdrop-filter: none !important;
    background: #242424 !important;
    border: 1px solid #ffffff1a !important;
    box-shadow: 0 8px 32px #0006 !important;
  }

  [data-slot="sheet-overlay"] {
    z-index: 10001 !important;
  }

  [data-slot="sheet-content"] {
    z-index: 10002 !important;
    -webkit-backdrop-filter: none !important;
    background: #242424 !important;
    border: 1px solid #ffffff1a !important;
    box-shadow: 0 8px 32px #0006 !important;
  }

  .mobile-sidebar-solid {
    -webkit-backdrop-filter: none !important;
    background: #242424 !important;
    border: 1px solid #ffffff1a !important;
    box-shadow: 0 8px 32px #0009 !important;
  }
}

.crypto-ticker-scrollable > * {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
}

.crypto-ticker-scrollable .relative, .crypto-ticker-scrollable .overflow-hidden {
  width: 100% !important;
  max-width: none !important;
}

.full-width {
  width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  left: 50% !important;
  right: 50% !important;
}

.force-full-width {
  box-sizing: border-box !important;
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
}

.nav-container.force-full-width {
  z-index: 9999 !important;
  background: var(--background) !important;
  background-color: var(--background) !important;
  -webkit-backdrop-filter: none !important;
  width: 100vw !important;
  box-shadow: none !important;
  will-change: transform !important;
  contain: layout style paint !important;
  border: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateZ(0) !important;
}

.crypto-ticker-scrollable.force-full-width {
  top: calc(var(--header-height)  + var(--ticker-spacing)) !important;
  will-change: transform !important;
  contain: layout style paint !important;
  background: var(--background) !important;
  background-color: var(--background) !important;
  -webkit-backdrop-filter: none !important;
  width: 100vw !important;
  max-width: none !important;
  box-shadow: none !important;
  z-index: 9998 !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateZ(0) !important;
}

.crypto-ticker-scrollable .relative.overflow-hidden {
  width: 100% !important;
  max-width: none !important;
}

.crypto-ticker-scrollable * {
  box-sizing: border-box !important;
}

.container, .container-fluid, .max-w-screen-xl, .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: .5rem !important;
  padding-right: .5rem !important;
}

@media (width >= 640px) {
  .force-full-width .px-4, .container, .container-fluid {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }
}

@media (width >= 1024px) {
  .force-full-width .px-4, .container, .container-fluid {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

@media (width >= 1280px) {
  .force-full-width .px-4, .container, .container-fluid {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

.space-compressed > * + * {
  margin-top: var(--spacing-xs) !important;
}

.space-compressed-lg > * + * {
  margin-top: var(--spacing-sm) !important;
}

.gap-compressed {
  gap: var(--spacing-xs) !important;
}

.gap-compressed-lg {
  gap: var(--spacing-sm) !important;
}

.p-compressed {
  padding: var(--spacing-xs) !important;
}

.p-compressed-lg {
  padding: var(--spacing-sm) !important;
}

.px-compressed {
  padding-left: var(--spacing-xs) !important;
  padding-right: var(--spacing-xs) !important;
}

.py-compressed {
  padding-top: var(--spacing-xs) !important;
  padding-bottom: var(--spacing-xs) !important;
}

.m-compressed {
  margin: var(--spacing-xs) !important;
}

.mx-compressed {
  margin-left: var(--spacing-xs) !important;
  margin-right: var(--spacing-xs) !important;
}

.my-compressed {
  margin-top: var(--spacing-xs) !important;
  margin-bottom: var(--spacing-xs) !important;
}

@media (width <= 768px) {
  body {
    padding-top: 0;
  }

  .pro-badge {
    padding: .1875rem .375rem;
    font-size: .625rem;
    animation: none;
  }

  :root {
    --header-height: 2.75rem;
    --ticker-height: 2.5rem;
    --ticker-spacing: .75rem;
    --total-header-height: 6rem;
  }

  main {
    padding-top: calc(var(--total-header-height)  + .25rem) !important;
  }

  .nav-container {
    z-index: 9999 !important;
    width: 100vw !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }

  .lg\\:sticky {
    margin-top: 1.5rem !important;
    margin-bottom: 2rem !important;
    position: static !important;
    top: auto !important;
  }

  section .lg\\:grid-cols-2 {
    gap: 1rem !important;
  }

  .exchange-steps-section {
    margin-top: 2rem !important;
    padding-top: 1rem !important;
  }

  section[class*="py-20"] {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .relative.lg\\:sticky {
    margin-top: 1.5rem !important;
    margin-bottom: 2rem !important;
    position: static !important;
  }

  .glass-card {
    padding: .5rem;
  }

  .glass-card-premium {
    padding: .4375rem;
  }

  .grid.lg\\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .hero-section .lg\\:grid-cols-2 > div:first-child {
    order: 1;
    margin-bottom: 1rem !important;
  }

  .hero-section .lg\\:grid-cols-2 > div:last-child {
    order: 2;
    margin-top: .5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .exchange-steps-section {
    clear: both !important;
    margin-top: 2rem !important;
    padding-top: 1.5rem !important;
  }

  section[class*="py-20"]:has(h2:contains("How Exchange Pro Works")) {
    clear: both !important;
    margin-top: 2rem !important;
    padding-top: 1.5rem !important;
  }

  .section-spacing {
    margin-bottom: 2rem !important;
    padding-bottom: 1rem !important;
  }
}

.premium-graphics {
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(25px);
  background: linear-gradient(135deg, #2a2a2af2, #2a2a2ad9);
  border: 1px solid #ffffff1f;
  width: 100%;
  height: auto;
  transition: all .6s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 80px #0000004d, 0 15px 40px #00d08426, 0 8px 20px #00c77c1a;
}

.bg-gradient-radial {
  background-image: radial-gradient(circle, var(--tw-gradient-stops));
}

.platform-showcase-glow {
  filter: blur(20px);
  background: radial-gradient(#00d08426 0%, #00d0840d 40%, #0000 70%);
  animation: 4s ease-in-out infinite platformGlow;
}

.platform-showcase-light {
  background: linear-gradient(135deg, #00d0841a 0%, #00c77c26 25%, #00d0840d 50%, #00c77c1a 75%, #00d0841a 100%);
  animation: 6s ease-in-out infinite lightShimmer;
}

.platform-image-container {
  filter: drop-shadow(0 25px 50px #00d08433);
  transition: all .6s cubic-bezier(.4, 0, .2, 1);
  position: relative;
}

.platform-image-container:hover {
  filter: drop-shadow(0 35px 70px #00d0844d);
  transform: translateY(-5px);
}

.platform-floating-particles {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

.platform-particle {
  background: #00d08499;
  border-radius: 50%;
  animation: 8s ease-in-out infinite floatParticle;
  position: absolute;
}

.platform-pulse-ring {
  border: 2px solid #00d0844d;
  border-radius: 50%;
  animation: 3s cubic-bezier(.455, .03, .515, .955) infinite pulseRing;
  position: absolute;
}

.green-ambient-light {
  background: radial-gradient(circle, #00d08414 0%, #00c77c0a 30%, #0000 60%);
  animation: 5s ease-in-out infinite ambientGlow;
}

.premium-graphics:hover {
  border-color: #00d08440;
  transform: translateY(-8px)scale(1.03);
  box-shadow: 0 35px 100px #0006, 0 20px 50px #00d08433, 0 12px 25px #00c77c26;
}

.premium-graphics img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  filter: contrast(1.15) saturate(1.1) brightness(1.08) drop-shadow(0 15px 35px #00000040);
  transition: all .4s;
}

.premium-graphics:hover img {
  filter: contrast(1.2) saturate(1.15) brightness(1.1) drop-shadow(0 20px 45px #0000004d);
}

@media (width <= 768px) {
  .premium-graphics {
    border-radius: var(--radius);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 20px 50px #00000040, 0 10px 25px #00d0841f, 0 5px 15px #00c77c14;
  }

  .premium-graphics:hover {
    transform: translateY(-3px)scale(1.02);
    box-shadow: 0 25px 60px #0000004d, 0 15px 35px #00d08426, 0 8px 20px #00c77c1f;
  }

  .premium-graphics img {
    filter: contrast(1.1) saturate(1.05) brightness(1.05) drop-shadow(0 10px 25px #0003);
  }
}

section:last-child {
  margin-bottom: 4rem !important;
  padding-bottom: 2rem !important;
}

.section-spacing {
  margin-bottom: 3rem !important;
  padding-bottom: 1.5rem !important;
}

.footer-margin {
  margin-top: 4rem !important;
}

.page-content {
  margin-top: 0 !important;
  padding-top: .5rem !important;
}

.page-section {
  margin-top: 1rem !important;
  margin-bottom: 1.5rem !important;
}

@media (width <= 768px) {
  .page-content {
    padding-top: .25rem !important;
  }

  .page-section {
    margin-top: .75rem !important;
    margin-bottom: 1rem !important;
  }
}

.hero-section {
  margin-top: 0 !important;
  padding-top: 1rem !important;
}

.landing-page .hero-section {
  padding-top: 1.25rem !important;
}

@media (width <= 768px) {
  .hero-section {
    margin-top: 0 !important;
    padding-top: .5rem !important;
  }

  .landing-page .hero-section {
    padding-top: .75rem !important;
  }

  .hero-section .space-y-8 {
    gap: 1.5rem !important;
  }

  .hero-section .space-y-4 {
    gap: 1rem !important;
  }

  .hero-section h1 {
    margin-bottom: .5rem !important;
  }

  .hero-section p {
    margin-bottom: .75rem !important;
  }
}

section:first-child {
  margin-top: 1rem !important;
  padding-top: 1rem !important;
}

.exchange-widget-position {
  top: calc(var(--total-header-height)  + 2rem) !important;
  position: sticky !important;
}

@media (width <= 768px) {
  .crypto-exchange-widget, [data-component="crypto-exchange-widget"] {
    margin-bottom: 4rem !important;
  }

  .exchange-widget-position {
    margin-top: 2rem !important;
    margin-bottom: 4rem !important;
    position: static !important;
    top: auto !important;
  }

  .exchange-steps-section {
    clear: both !important;
    margin-top: 5rem !important;
    padding-top: 3rem !important;
    position: relative !important;
  }

  section:has(h2:contains("How Exchange Pro Works")) {
    clear: both !important;
    margin-top: 5rem !important;
    padding-top: 3rem !important;
    position: relative !important;
  }

  .grid.lg\\:grid-cols-2 {
    flex-direction: column !important;
    gap: 3rem !important;
    display: flex !important;
  }

  .relative.lg\\:sticky.lg\\:top-36 {
    order: 2 !important;
    margin-top: 2rem !important;
    margin-bottom: 4rem !important;
    position: static !important;
    top: auto !important;
  }
}

.glass-effect {
  -webkit-backdrop-filter: blur(8px);
  background: #232323;
  border: 1px solid #ffffff1a;
  padding: .5rem;
  box-shadow: 0 1px 4px #00000040, inset 0 .5px #ffffff1a;
}

.glass-card {
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius);
  background: #2a2a2acc;
  border: 1px solid #ffffff1a;
  padding: .5rem;
  transition: all .15s;
  box-shadow: 0 1px 4px #0003, inset 0 .5px #ffffff0d;
}

.glass-card:hover {
  background: #2a2a2ae6;
  border-color: #ffffff26;
  transform: translateY(-.5px);
  box-shadow: 0 2px 8px #00000040, inset 0 .5px #ffffff1a;
}

.dark-card {
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius);
  background: #141414;
  border: 1px solid #ffffff1a;
  transition: all .2s;
}

.dark-card:hover {
  border-color: #ffffff26;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px #0000004d, inset 0 1px #ffffff0d;
}

.glass-card-premium {
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius);
  background: #00d0841a;
  border: 1px solid #00d0844d;
  padding: .4375rem;
  box-shadow: 0 2px 6px #00d08426, inset 0 .5px #00d0841a;
}

.pro-badge {
  -webkit-backdrop-filter: blur(6px);
  border-radius: calc(var(--radius)  - 1px);
  background: linear-gradient(135deg, #00d0841a, #00c77c1a);
  border: 1px solid #00d08433;
  padding: .1875rem .375rem;
  font-size: .625rem;
  transition: all .15s cubic-bezier(.4, 0, .2, 1);
  animation: 3s ease-in-out infinite badgeFloat;
}

.pro-badge:hover {
  background: linear-gradient(135deg, #00d08426, #00c77c26);
  border-color: #00d0844d;
  transform: translateY(-.25px)scale(1.005);
}

.hover-lift {
  transition: all .15s cubic-bezier(.4, 0, .2, 1);
}

.hover-lift:hover {
  transform: translateY(-.5px)scale(1.003);
  box-shadow: 0 3px 6px #0003, 0 1px 2px #00d0841a;
}

.hover-scale {
  transition: all .15s cubic-bezier(.4, 0, .2, 1);
}

.hover-scale:hover {
  transform: scale(1.008);
}

.crypto-icon-xs {
  height: calc(var(--spacing) * 4);
  min-height: calc(var(--spacing) * 4);
  width: calc(var(--spacing) * 4);
  min-width: calc(var(--spacing) * 4);
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  box-shadow: none;
  background: none;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: .5rem;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: relative;
  overflow: hidden;
}

.crypto-icon-xs:hover {
  transform: scale(1.05);
  box-shadow: 0 1px 4px #0000001a;
}

.crypto-icon-xs img {
  object-fit: contain;
  filter: drop-shadow(0 1px 2px #0000000d);
  width: 100%;
  height: 100%;
  image-rendering: crisp-edges;
  border-radius: 3.40282e38px;
}

.crypto-icon-sm {
  height: calc(var(--spacing) * 6);
  min-height: calc(var(--spacing) * 6);
  width: calc(var(--spacing) * 6);
  min-width: calc(var(--spacing) * 6);
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  box-shadow: none;
  background: none;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: .75rem;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: relative;
  overflow: hidden;
}

.crypto-icon-sm:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 8px #0000001a;
}

.crypto-icon-sm img {
  object-fit: contain;
  filter: drop-shadow(0 1px 2px #0000001a);
  width: 100%;
  height: 100%;
  image-rendering: crisp-edges;
  border-radius: 3.40282e38px;
}

.crypto-icon {
  height: calc(var(--spacing) * 9);
  min-height: calc(var(--spacing) * 9);
  width: calc(var(--spacing) * 9);
  min-width: calc(var(--spacing) * 9);
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  box-shadow: none;
  background: none;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: .875rem;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: relative;
  overflow: hidden;
}

.crypto-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px #00000026;
}

.crypto-icon img {
  object-fit: contain;
  filter: drop-shadow(0 2px 4px #0000001a);
  width: 100%;
  height: 100%;
  image-rendering: crisp-edges;
  border-radius: 3.40282e38px;
}

.crypto-icon-lg {
  height: calc(var(--spacing) * 12);
  min-height: calc(var(--spacing) * 12);
  width: calc(var(--spacing) * 12);
  min-width: calc(var(--spacing) * 12);
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  box-shadow: none;
  background: none;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: relative;
  overflow: hidden;
}

.crypto-icon-lg:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 20px #00000026;
}

.crypto-icon-lg img {
  object-fit: contain;
  filter: drop-shadow(0 3px 6px #00000026);
  width: 100%;
  height: 100%;
  image-rendering: crisp-edges;
  border-radius: 3.40282e38px;
}

.crypto-icon-xl {
  --tw-font-weight: var(--font-weight-bold);
  width: 3.5rem;
  min-width: 3.5rem;
  height: 3.5rem;
  min-height: 3.5rem;
  font-weight: var(--font-weight-bold);
  box-shadow: none;
  background: none;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: relative;
  overflow: hidden;
}

.crypto-icon-xl:hover {
  transform: scale(1.15);
  box-shadow: 0 8px 25px #0003;
}

.crypto-icon-xl img {
  object-fit: contain;
  filter: drop-shadow(0 4px 8px #0003);
  width: 100%;
  height: 100%;
  image-rendering: crisp-edges;
  border-radius: 3.40282e38px;
}

.crypto-icon-xxl {
  --tw-font-weight: var(--font-weight-bold);
  width: 4.5rem;
  min-width: 4.5rem;
  height: 4.5rem;
  min-height: 4.5rem;
  font-weight: var(--font-weight-bold);
  box-shadow: none;
  background: none;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: relative;
  overflow: hidden;
}

.crypto-icon-xxl:hover {
  transform: scale(1.18);
  box-shadow: 0 10px 30px #00000040;
}

.crypto-icon-xxl img {
  object-fit: contain;
  filter: drop-shadow(0 5px 10px #00000040);
  width: 100%;
  height: 100%;
  image-rendering: crisp-edges;
  border-radius: 3.40282e38px;
}

.gradient-text {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, #00d084, #00c77c, #00b875) 0 0 / 200% 100% text;
}

.gradient-text-primary {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, #00d084, #00c77c) text;
}

.force-fixed-header {
  z-index: 9999 !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  width: 100vw !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateZ(0) !important;
}

body.fixed-header {
  position: relative !important;
  overflow-x: hidden !important;
}

.nav-container, .crypto-ticker-scrollable {
  backface-visibility: hidden !important;
  perspective: 1000px !important;
  transform: translateZ(0) !important;
}

.text-brand-primary {
  background: var(--gradient-primary);
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-brand-animated {
  background: var(--gradient-primary);
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-clip: text;
  animation: 4s ease-in-out infinite logoGradient;
}

.exchange-pro-logo {
  filter: drop-shadow(0 2px 8px #0000001a);
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.exchange-pro-logo:hover {
  filter: drop-shadow(0 8px 20px #10b98166);
}

.exchange-text-glow {
  text-shadow: 0 0 15px #10b98199;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  letter-spacing: -.025em;
  -webkit-text-fill-color: #10b981;
  background: linear-gradient(135deg, #10b981, #34d399) text;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 900;
  transition: all .3s;
  color: #10b981 !important;
}

@supports ((-webkit-background-clip: text)) {
  .exchange-text-glow {
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }
}

.exchange-text-glow:hover {
  text-shadow: 0 0 25px #10b981e6;
  filter: drop-shadow(0 0 15px #10b98166);
  background: linear-gradient(135deg, #34d399, #10b981) text;
  color: #34d399 !important;
}

@supports ((-webkit-background-clip: text)) {
  .exchange-text-glow:hover {
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }
}

.new-logo-container {
  will-change: transform;
  backface-visibility: hidden;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  transform: translateZ(0);
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 100 !important;
  display: inline-block !important;
  position: relative !important;
}

.new-logo-container:hover {
  transform: translateZ(0);
}

.exchange-text-glow {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 101 !important;
  display: inline-block !important;
  position: relative !important;
}

.nav-container .flex.items-center.gap-4 {
  visibility: visible !important;
  opacity: 1 !important;
  display: flex !important;
}

.nav-container .cursor-pointer.group.exchange-pro-logo {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 99 !important;
  display: block !important;
  position: relative !important;
}

.nav-container .flex.items-center.gap-4 > * {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

.nav-container .flex.items-center.gap-4 .cursor-pointer {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

@media (width <= 768px) {
  .nav-container .lg\\:hidden button {
    border-radius: 6px !important;
    justify-content: center !important;
    align-items: center !important;
    width: 3rem !important;
    height: 3rem !important;
    padding: .75rem !important;
    transition: all .25s cubic-bezier(.4, 0, .2, 1) !important;
    display: flex !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .nav-container .lg\\:hidden button .w-6 {
    stroke-width: 3px !important;
    color: #fff !important;
    stroke: #fff !important;
    width: 2rem !important;
    height: 2rem !important;
  }

  .nav-container .lg\\:hidden button svg {
    stroke-width: 3px !important;
    color: #fff !important;
    stroke: #fff !important;
    width: 2rem !important;
    height: 2rem !important;
  }

  .nav-container .lg\\:hidden button[class*="w-11"] svg[class*="w-6"] {
    stroke-width: 3px !important;
    color: #fff !important;
    stroke: #fff !important;
    width: 2rem !important;
    height: 2rem !important;
  }

  .nav-container .lg\\:hidden button svg {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
  }

  .nav-container .lg\\:hidden button .lucide {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
  }

  .nav-container .lg\\:hidden button .lucide-menu {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
  }

  .nav-container .lg\\:hidden button .lucide-x {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
  }

  .nav-container .lg\\:hidden button path {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
  }

  .nav-container .lg\\:hidden button line {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
  }

  .nav-container .lg\\:hidden button:hover svg {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
  }

  .nav-container .lg\\:hidden button:hover .lucide {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
  }

  .nav-container .lg\\:hidden button:hover .lucide-menu {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
  }

  .nav-container .lg\\:hidden button:hover .lucide-x {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
  }

  .nav-container .lg\\:hidden button:hover path {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
  }

  .nav-container .lg\\:hidden button:hover line {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
  }

  .nav-container .lg\\:hidden button:active svg {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
  }

  .nav-container .lg\\:hidden button:focus svg {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
  }

  .nav-container .lg\\:hidden button[data-state="open"] svg {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
  }

  .nav-container .lg\\:hidden button:active .lucide {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
  }

  .nav-container .lg\\:hidden button:focus .lucide {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
  }

  .nav-container .lg\\:hidden button[data-state="open"] .lucide {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
  }

  .nav-container button[aria-label*="menu"], .nav-container button[aria-label*="menu"] *, .nav-container button[aria-label*="Menu"], .nav-container button[aria-label*="Menu"] * {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
    -webkit-text-fill-color: #fff !important;
  }

  .nav-container .lg\\:hidden button {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
    -webkit-text-fill-color: #fff !important;
  }

  .nav-container .lg\\:hidden button * {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
    -webkit-text-fill-color: #fff !important;
  }

  .nav-container .lg\\:hidden button svg * {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
    -webkit-text-fill-color: #fff !important;
  }

  .nav-container .lg\\:hidden button .lucide * {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
    -webkit-text-fill-color: #fff !important;
  }

  .nav-container button.lg\\:block.md\\:hidden {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
    -webkit-text-fill-color: #fff !important;
  }

  .nav-container button.lg\\:block.md\\:hidden * {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
    -webkit-text-fill-color: #fff !important;
  }

  :is(.nav-container .lg\\:hidden button:hover, .nav-container .lg\\:hidden button:hover *, .nav-container .lg\\:hidden button:active, .nav-container .lg\\:hidden button:active *, .nav-container .lg\\:hidden button:focus, .nav-container .lg\\:hidden button:focus *, .nav-container .lg\\:hidden button[data-state="open"], .nav-container .lg\\:hidden button[data-state="open"] *) {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
    -webkit-text-fill-color: #fff !important;
  }

  .nav-container .nav-item {
    border-radius: 6px !important;
    justify-content: center !important;
    align-items: center !important;
    height: auto !important;
    min-height: 2.5rem !important;
    padding: .75rem 1rem !important;
    display: flex !important;
  }

  .nav-container .text-sm {
    font-size: .875rem !important;
  }

  .nav-container .w-4, .nav-container .h-4 {
    width: 1.125rem !important;
    height: 1.125rem !important;
  }

  .new-logo-container {
    display: inline-block;
  }

  .nav-container .exchange-pro-logo {
    padding: .375rem .5rem !important;
  }
}

.nav-container .group:hover .exchange-text-glow {
  text-shadow: 0 0 30px #10b981;
  background: linear-gradient(135deg, #34d399, #10b981, #059669) text;
  color: #34d399 !important;
}

@supports ((-webkit-background-clip: text)) {
  .nav-container .group:hover .exchange-text-glow {
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }
}

.nav-container .exchange-pro-logo {
  border-radius: 4px !important;
  justify-content: center !important;
  align-items: center !important;
  padding: .5rem .75rem !important;
  transition: all .2s cubic-bezier(.4, 0, .2, 1) !important;
  display: flex !important;
  position: relative !important;
  overflow: hidden !important;
}

.nav-container .exchange-pro-logo:hover {
  color: #fff !important;
  -webkit-backdrop-filter: none !important;
  background: #00d084 !important;
  border: 1px solid #00c77c !important;
}

:is(.nav-container .lg\\:hidden button:hover, .nav-container .lg\\:hidden button:hover *) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
  background: #00d084 !important;
  border: 1px solid #00c77c !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px #00d08433 !important;
}

.nav-container, .nav-container *, .force-fixed-header, .force-fixed-header * {
  background-image: none !important;
  background-attachment: inherit !important;
  background-blend-mode: normal !important;
  mix-blend-mode: normal !important;
}

.nav-container .bg-black, .nav-container .bg-gray-900, .nav-container .bg-gray-800, .nav-container .bg-slate-900, .nav-container .bg-slate-800, .nav-container .bg-zinc-900, .nav-container .bg-zinc-800, .nav-container [class*="bg-black"], .nav-container [class*="bg-gray-9"], .nav-container [class*="bg-gray-8"], .nav-container [class*="bg-slate-9"], .nav-container [class*="bg-slate-8"], .nav-container [class*="bg-zinc-9"], .nav-container [class*="bg-zinc-8"] {
  background: none !important;
}

.nav-container .bg-black:hover, .nav-container .bg-gray-900:hover, .nav-container .bg-gray-800:hover, .nav-container .bg-slate-900:hover, .nav-container .bg-slate-800:hover, .nav-container .bg-zinc-900:hover, .nav-container .bg-zinc-800:hover, .nav-container [class*="bg-black"]:hover, .nav-container [class*="bg-gray-9"]:hover, .nav-container [class*="bg-gray-8"]:hover, .nav-container [class*="bg-slate-9"]:hover, .nav-container [class*="bg-slate-8"]:hover, .nav-container [class*="bg-zinc-9"]:hover, .nav-container [class*="bg-zinc-8"]:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00d084 !important;
  border: 2px solid #00c77c !important;
  border-radius: 8px !important;
}

.new-logo-container {
  will-change: transform, filter;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.exchange-text-glow.text-emerald-500, .exchange-text-glow.text-emerald-400, .exchange-text-glow[class*="text-"] {
  color: #10b981 !important;
}

.exchange-text-glow.text-emerald-500:hover, .exchange-text-glow.text-emerald-400:hover, .exchange-text-glow[class*="text-"]:hover {
  color: #34d399 !important;
}

.exchange-text-glow {
  color: #10b981 !important;
  -webkit-text-fill-color: transparent !important;
  text-fill-color: transparent !important;
  background: linear-gradient(135deg, #10b981, #34d399) 0 0 / 100% no-repeat text !important;
}

@media (width >= 768px) {
  .nav-container .nav-item {
    height: 2.875rem !important;
    padding-left: 1.375rem !important;
    padding-right: 1.375rem !important;
  }

  .nav-container .text-sm {
    font-size: 1.0625rem !important;
  }

  .new-logo-container {
    display: inline-block;
  }
}

@media (width >= 1024px) {
  .nav-container .nav-item {
    height: 3rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .nav-container .text-sm {
    font-size: 1.125rem !important;
  }

  .nav-container .support-dropdown-trigger {
    height: 3rem !important;
  }

  .new-logo-container {
    display: inline-block;
  }
}

@media (width >= 1280px) {
  .nav-container .nav-item {
    align-items: center !important;
    height: 3.125rem !important;
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
    display: flex !important;
  }

  .nav-container .text-sm {
    font-size: 1.1875rem !important;
  }

  .nav-container .w-4, .nav-container .h-4 {
    width: 1.375rem !important;
    height: 1.375rem !important;
  }

  .nav-container .support-dropdown-trigger {
    height: 3.125rem !important;
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
  }

  .nav-container .badge {
    height: 1.875rem !important;
    padding-left: .875rem !important;
    padding-right: .875rem !important;
    font-size: .875rem !important;
  }

  .new-logo-container {
    display: inline-block;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(.95);
  }

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

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

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

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px #00d0844d;
  }

  50% {
    box-shadow: 0 0 40px #00d08499;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

@keyframes pulse-ring {
  0% {
    transform: scale(.33);
  }

  40%, 50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes marketRowHover {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(4px);
  }
}

@keyframes purchaseSuccess {
  0% {
    transform: scale(0)rotate(0);
  }

  50% {
    transform: scale(1.2)rotate(180deg);
  }

  100% {
    transform: scale(1)rotate(360deg);
  }
}

@keyframes badge-glow {
  0%, 100% {
    box-shadow: 0 0 10px #00d0844d;
  }

  50% {
    box-shadow: 0 0 20px #00d08499;
  }
}

@keyframes connection-success {
  0% {
    opacity: 0;
    transform: scale(0)rotate(0);
  }

  50% {
    opacity: 1;
    transform: scale(1.3)rotate(180deg);
  }

  100% {
    opacity: 1;
    transform: scale(1)rotate(360deg);
  }
}

@keyframes sparkle {
  0%, 100% {
    opacity: .3;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes premiumGlow {
  0%, 100% {
    box-shadow: 0 0 20px #00d08433, 0 0 40px #00c77c1a;
  }

  50% {
    box-shadow: 0 0 30px #00d08466, 0 0 60px #00c77c33;
  }
}

@keyframes badgeFloat {
  0%, 100% {
    transform: translateY(0)scale(1);
  }

  50% {
    transform: translateY(-2px)scale(1.02);
  }
}

@keyframes logoGradient {
  0%, 100% {
    background-position: 0%;
  }

  25% {
    background-position: 100%;
  }

  50% {
    background-position: 200%;
  }

  75% {
    background-position: 300%;
  }
}

@keyframes exchangeGlow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 20px #10b9814d;
  }

  50% {
    transform: scale(1.02);
    box-shadow: 0 0 30px #10b98199;
  }
}

@keyframes changeiePulse {
  0%, 100% {
    filter: drop-shadow(0 0 15px #10b98166);
    transform: scale(1);
  }

  50% {
    filter: drop-shadow(0 0 25px #10b981cc);
    transform: scale(1.02);
  }
}

@keyframes changeieGlow {
  0%, 100% {
    text-shadow: 0 0 15px #10b98199;
  }

  50% {
    text-shadow: 0 0 30px #10b981;
  }
}

@keyframes gridMove {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 100% 100%;
  }
}

@keyframes borderGlow {
  0%, 100% {
    background-position: 0%;
  }

  25% {
    background-position: 100%;
  }

  50% {
    background-position: 100% 100%;
  }

  75% {
    background-position: 0 100%;
  }
}

@keyframes professionalGlow {
  0%, 100% {
    box-shadow: 0 0 20px #00d0844d, 0 0 40px #00c77c33;
  }

  50% {
    box-shadow: 0 0 30px #00d08480, 0 0 60px #00c77c4d;
  }
}

@keyframes professionalPulse {
  0%, 100% {
    opacity: .8;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes diamondSparkle {
  0%, 100% {
    opacity: .6;
    transform: scale(1)rotate(0);
  }

  50% {
    opacity: 1;
    transform: scale(1.1)rotate(180deg);
  }
}

@keyframes coinFloat {
  0%, 100% {
    transform: translateY(0)rotate(0);
  }

  33% {
    transform: translateY(-3px)rotate(120deg);
  }

  66% {
    transform: translateY(-1px)rotate(240deg);
  }
}

@keyframes gradientX {
  0%, 100% {
    background-position: 0;
    background-size: 200% 200%;
  }

  50% {
    background-position: 100%;
    background-size: 200% 200%;
  }
}

@keyframes platformGlow {
  0%, 100% {
    opacity: .6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes lightShimmer {
  0%, 100% {
    opacity: .8;
    background-position: 0%;
  }

  25% {
    opacity: 1;
    background-position: 100%;
  }

  50% {
    opacity: .9;
    background-position: 200%;
  }

  75% {
    opacity: 1;
    background-position: 300%;
  }
}

@keyframes floatParticle {
  0%, 100% {
    opacity: .4;
    transform: translateY(0)translateX(0)scale(1);
  }

  25% {
    opacity: .8;
    transform: translateY(-20px)translateX(10px)scale(1.2);
  }

  50% {
    opacity: 1;
    transform: translateY(-40px)translateX(-5px)scale(.8);
  }

  75% {
    opacity: .6;
    transform: translateY(-20px)translateX(-15px)scale(1.1);
  }
}

@keyframes pulseRing {
  0% {
    opacity: 1;
    transform: scale(.5);
  }

  50% {
    opacity: .7;
  }

  100% {
    opacity: 0;
    transform: scale(2);
  }
}

@keyframes ambientGlow {
  0%, 100% {
    opacity: .6;
    transform: scale(1)rotate(0);
  }

  33% {
    opacity: .9;
    transform: scale(1.1)rotate(120deg);
  }

  66% {
    opacity: .7;
    transform: scale(1.05)rotate(240deg);
  }
}

@keyframes platformShowcaseFloat {
  0%, 100% {
    transform: translateY(0)scale(1);
  }

  50% {
    transform: translateY(-15px)scale(1.02);
  }
}

@keyframes greenLightPulse {
  0%, 100% {
    box-shadow: 0 0 30px #00d08466, 0 0 60px #00c77c33, 0 0 90px #00d0841a;
  }

  50% {
    box-shadow: 0 0 50px #00d084cc, 0 0 100px #00c77c66, 0 0 150px #00d08433;
  }
}

.learn-more-button, [data-button-text="Learn More"] {
  color: #00d084 !important;
  background: #fff !important;
  border: 1px solid #00d0844d !important;
}

button:contains("Learn More") {
  color: #00d084 !important;
  background: #fff !important;
  border: 1px solid #00d0844d !important;
}

.learn-more-button:hover, [data-button-text="Learn More"]:hover {
  color: #00d084 !important;
  background: #00d0840d !important;
}

button:contains("Learn More"):hover {
  color: #00d084 !important;
  background: #00d0840d !important;
}

.bg-black, .bg-gray-900 {
  color: #00d084 !important;
  background: #fff !important;
  border: 1px solid #00d0844d !important;
}

.bg-black:hover, .bg-gray-900:hover {
  color: #00d084 !important;
  background: #00d0840d !important;
}

[data-button-text*="Watch Demo"], [data-button-text*="Start Exchange"], [data-button-text*="Learn More"], [data-button-text*="Ready to Start Trading"] {
  color: #00d084 !important;
  background: #fff !important;
  border: 1px solid #00d0844d !important;
  transition: all .2s !important;
}

button:contains("Watch Demo") {
  color: #00d084 !important;
  background: #fff !important;
  border: 1px solid #00d0844d !important;
  transition: all .2s !important;
}

button:contains("Start Exchange") {
  color: #00d084 !important;
  background: #fff !important;
  border: 1px solid #00d0844d !important;
  transition: all .2s !important;
}

button:contains("Learn More") {
  color: #00d084 !important;
  background: #fff !important;
  border: 1px solid #00d0844d !important;
  transition: all .2s !important;
}

button:contains("Ready to Start Trading") {
  color: #00d084 !important;
  background: #fff !important;
  border: 1px solid #00d0844d !important;
  transition: all .2s !important;
}

[data-button-text*="Watch Demo"]:hover, [data-button-text*="Start Exchange"]:hover, [data-button-text*="Learn More"]:hover, [data-button-text*="Ready to Start Trading"]:hover {
  color: #16a085 !important;
  background: #00d0840d !important;
  border-color: #00d08466 !important;
}

button:contains("Watch Demo"):hover {
  color: #16a085 !important;
  background: #00d0840d !important;
  border-color: #00d08466 !important;
}

button:contains("Start Exchange"):hover {
  color: #16a085 !important;
  background: #00d0840d !important;
  border-color: #00d08466 !important;
}

button:contains("Learn More"):hover {
  color: #16a085 !important;
  background: #00d0840d !important;
  border-color: #00d08466 !important;
}

button:contains("Ready to Start Trading"):hover {
  color: #16a085 !important;
  background: #00d0840d !important;
  border-color: #00d08466 !important;
}

section[id*="ready"] button, section[class*="ready"] button, section[id*="cta"] button, section[class*="cta"] button, section[id*="call"] button, section[class*="call"] button, .ready-to-start button, .ready-to-start-trading button, .cta-section button, .call-to-action button {
  color: #00d084 !important;
  background: #fff !important;
  border: 1px solid #00d0844d !important;
}

section[id*="ready"] button:hover, section[class*="ready"] button:hover, section[id*="cta"] button:hover, section[class*="cta"] button:hover, section[id*="call"] button:hover, section[class*="call"] button:hover, .ready-to-start button:hover, .ready-to-start-trading button:hover, .cta-section button:hover, .call-to-action button:hover {
  color: #16a085 !important;
  background: #00d0840d !important;
  border-color: #00d08466 !important;
}

button[class*="bg-black"], button[class*="bg-gray-900"], button[class*="bg-slate-900"], button[class*="bg-zinc-900"], .button-dark, .btn-dark {
  color: #00d084 !important;
  background: #fff !important;
  border: 1px solid #00d0844d !important;
  transition: all .2s !important;
}

button[class*="bg-black"]:hover, button[class*="bg-gray-900"]:hover, button[class*="bg-slate-900"]:hover, button[class*="bg-zinc-900"]:hover, .button-dark:hover, .btn-dark:hover {
  color: #16a085 !important;
  background: #00d0840d !important;
  border-color: #00d08466 !important;
}

section[aria-label*="dex"] .card, section[aria-label*="explorer"] .card, div[class*="dex"] .card, div[class*="explorer"] .card {
  background: #242424 !important;
  border: 1px solid #ffffff1a !important;
}

section[aria-label*="dex"] .card:hover, section[aria-label*="explorer"] .card:hover, div[class*="dex"] .card:hover, div[class*="explorer"] .card:hover {
  background: #2a2a2a !important;
  border-color: #ffffff26 !important;
}

.enhanced-dex-explorer [class*="bg-"], .enhanced-dex-explorer .card, .enhanced-dex-explorer div[class*="bg-card"], .enhanced-dex-explorer [data-card] {
  background: #242424 !important;
}

.enhanced-dex-explorer [class*="bg-"]:hover, .enhanced-dex-explorer .card:hover, .enhanced-dex-explorer div[class*="bg-card"]:hover, .enhanced-dex-explorer [data-card]:hover {
  background: #2a2a2a !important;
}

[data-page="enhanced-dex-explorer"] *, .enhanced-dex-explorer * {
  --tw-bg-opacity: 1 !important;
}

[data-page="enhanced-dex-explorer"] [style*="background"], .enhanced-dex-explorer [style*="background"] {
  background: var(--dex-card-background) !important;
}

.enhanced-dex-explorer .text-2xl.font-bold, [data-page="enhanced-dex-explorer"] .text-2xl.font-bold, .enhanced-dex-explorer div[class*="text-2xl"], [data-page="enhanced-dex-explorer"] div[class*="text-2xl"], :is(.enhanced-dex-explorer .grid.grid-cols-2.lg\\:grid-cols-5 .text-2xl, [data-page="enhanced-dex-explorer"] .grid.grid-cols-2.lg\\:grid-cols-5 .text-2xl), .enhanced-dex-explorer [class*="motion"] .text-2xl.font-bold {
  color: #00d084 !important;
}

.enhanced-dex-explorer motion\\:div .text-2xl.font-bold {
  color: #00d084 !important;
}

.enhanced-dex-explorer, .enhanced-dex-explorer * {
  --dex-bg-color: #242424 !important;
}

[data-page="enhanced-dex-explorer"] [class*="bg"], [data-page="enhanced-dex-explorer"] .card, [data-page="enhanced-dex-explorer"] div, .enhanced-dex-explorer [style*="background"] {
  background: #242424 !important;
}

.enhanced-dex-explorer {
  --color-card: #242424 !important;
  --color-background: #242424 !important;
  --color-secondary: #242424 !important;
  --tw-bg-opacity: 1 !important;
}

div[class*="enhanced-dex-explorer"] [class*="bg-"], div[class*="enhanced-dex-explorer"] .card {
  background: var(--dex-bg-color) !important;
}

body > div > div > main > div > div[class*="max-w-7xl"] [class*="bg-"] {
  background: #242424 !important;
}

.wallets-page-zoom-out {
  transform-origin: top !important;
  width: 108.7% !important;
  margin-left: -4.35% !important;
  transform: scale(.92) !important;
}

.wallets-page-zoom-out * {
  box-sizing: border-box !important;
}

.transaction-status-page {
  margin-top: calc(-1 * (var(--total-header-height)  + 1rem)) !important;
  padding-top: var(--total-header-height) !important;
  z-index: 1 !important;
  position: relative !important;
}

.transaction-status-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (width <= 768px) {
  .transaction-status-page {
    padding-top: calc(var(--mobile-total-header-height)  + 1.5rem) !important;
    margin-top: 0 !important;
  }

  .transaction-status-content {
    margin-top: .5rem !important;
    padding-top: 1.5rem !important;
  }
}

[data-page="home"] .card:not(.exchange-widget), [data-page="home"] .glass-card:not(.exchange-widget), [data-page="home"] div[class*="bg-"]:not(.exchange-widget):not([class*="gradient"]), .landing-page .card:not(.exchange-widget), .landing-page .glass-card:not(.exchange-widget), .landing-page div[class*="bg-"]:not(.exchange-widget):not([class*="gradient"]) {
  background: #242424 !important;
  border: 1px solid #ffffff1a !important;
}

[data-page="home"] .card:not(.exchange-widget):hover, [data-page="home"] .glass-card:not(.exchange-widget):hover, .landing-page .card:not(.exchange-widget):hover, .landing-page .glass-card:not(.exchange-widget):hover {
  background: #2a2a2a !important;
  border-color: #ffffff26 !important;
}

.min-h-screen .glass-card:not(.exchange-widget), .min-h-screen .card:not(.exchange-widget), .live-crypto-prices .card, .market-categories .card, .stats-section .card, .floating-security-badge {
  background: #242424 !important;
}

section[class*="py-"] .card:not(.exchange-widget), section[class*="py-"] .glass-card:not(.exchange-widget), div[class*="grid"] .card:not(.exchange-widget), div[class*="grid"] .glass-card:not(.exchange-widget), .crypto-list-item, .crypto-price-card, .market-category-card {
  background: #242424 !important;
  border: 1px solid #ffffff1a !important;
}

div[class*="absolute"] .glass-effect:not(.exchange-widget), div[class*="absolute"] .card:not(.exchange-widget) {
  background: #242424 !important;
}

.glass-effect:not(.exchange-widget) {
  -webkit-backdrop-filter: blur(8px) !important;
  background: #242424e6 !important;
}

.exchange-widget, .crypto-exchange-widget, [data-component="exchange-widget"], [class*="exchange-widget"], .exchange-widget .card, .crypto-exchange-widget .card, [data-component="exchange-widget"] .card, [class*="exchange-widget"] .card {
  background: initial !important;
}

section[aria-label*="markets"] .card, div[class*="markets"] .card, .min-h-screen .card:not(.exchange-widget), .crypto-markets-component .card, [data-component="crypto-markets"] .card {
  background: #242424 !important;
  border: 1px solid #ffffff1a !important;
}

section[aria-label*="markets"] .card:hover, div[class*="markets"] .card:hover, .crypto-markets-component .card:hover, [data-component="crypto-markets"] .card:hover {
  background: #2a2a2a !important;
  border-color: #ffffff26 !important;
}

.crypto-markets [class*="bg-"], .crypto-markets .card, .crypto-markets div[class*="bg-card"], .crypto-markets [data-card] {
  background: #242424 !important;
}

.crypto-markets [class*="bg-"]:hover, .crypto-markets .card:hover, .crypto-markets div[class*="bg-card"]:hover, .crypto-markets [data-card]:hover {
  background: #2a2a2a !important;
}

@keyframes crypto-solid-glow {
  0%, 100% {
    box-shadow: 0 0 20px #0000004d, 0 0 40px #0003;
  }

  50% {
    box-shadow: 0 0 30px #0006, 0 0 60px #0000004d;
  }
}

.crypto-ticker-header .absolute.left-0, .crypto-ticker-header .absolute.right-0, .crypto-ticker-header .absolute.right-0 {
  display: none !important;
}

.ticker-container {
  padding: 0 50px !important;
}

.ticker-content {
  padding: 0 20px !important;
}

@keyframes crypto-ticker-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes crypto-ticker-glow {
  0%, 100% {
    box-shadow: 0 0 10px #10b98133;
  }

  50% {
    box-shadow: 0 0 20px #10b98166;
  }
}

@keyframes crypto-coin-float {
  0%, 100% {
    transform: translateY(0)scale(1);
  }

  50% {
    transform: translateY(-2px)scale(1.02);
  }
}

@keyframes scroll-left-slow {
  0% {
    transform: translateX(100%)translateY(-50%);
  }

  100% {
    transform: translateX(-100%)translateY(-50%);
  }
}

@keyframes scroll-left-mobile {
  0% {
    transform: translateX(100%)translateY(-50%);
  }

  100% {
    transform: translateX(-100%)translateY(-50%);
  }
}

@keyframes scroll-left-mobile-compact {
  0% {
    transform: translateX(100%)translateY(-50%);
  }

  100% {
    transform: translateX(-100%)translateY(-50%);
  }
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.ticker-content-optimized:hover, .ticker-content:hover {
  animation-play-state: paused;
}

.ticker-item-optimized:hover {
  background: none;
  border-radius: 0;
  transition: background .2s;
}

.ticker-item-optimized:hover .ticker-symbol-text {
  color: #00d084;
  transition: color .2s;
}

.ticker-item-optimized:hover .ticker-currency-symbol, .ticker-item-optimized:hover .ticker-name-text {
  color: #fff;
  transition: color .2s;
}

.ticker-item-optimized:hover .ticker-icon-enhanced, .ticker-item-optimized:hover .ticker-icon-compact {
  transition: transform .2s;
  transform: scale(1.1);
}

.ticker-item-optimized * {
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.ticker-crypto-info, .ticker-price-display, .ticker-change-display, .ticker-dot-separator, .ticker-symbol-container, .ticker-symbol-wrapper, .ticker-name-text {
  flex: none !important;
}

.ticker-item-optimized:after {
  content: "";
  flex-shrink: 0;
  width: 1px;
  height: 1px;
  display: block;
}

@keyframes crypto-solid-float {
  0%, 100% {
    transform: translateY(0)scale(1);
  }

  50% {
    transform: translateY(-3px)scale(1.02);
  }
}

@keyframes crypto-solid-pulse {
  0%, 100% {
    opacity: .9;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes crypto-icon-shimmer {
  0% {
    background-position: -200%;
  }

  100% {
    background-position: 200%;
  }
}

.animate-fadeIn {
  animation: .6s ease-out fadeIn;
}

.animate-slideInLeft {
  animation: .6s ease-out slideInLeft;
}

.animate-slideInRight {
  animation: .6s ease-out slideInRight;
}

.animate-scaleIn {
  animation: .4s ease-out scaleIn;
}

.prediction-card {
  contain: layout style paint;
  will-change: transform;
  transform: translateZ(0);
}

.prediction-grid {
  contain: layout;
}

.chart-container {
  contain: layout style;
  transform: translateZ(0);
}

.lazy-loading {
  opacity: 0;
  transition: opacity .3s;
}

.lazy-loaded {
  opacity: 1;
}

.virtual-list {
  will-change: scroll-position;
  height: 100%;
  overflow: auto;
}

.virtual-item {
  contain: layout style;
  transform: translateZ(0);
}

.animate-float {
  animation: 3s ease-in-out infinite float;
}

.animate-glow {
  animation: 2s ease-in-out infinite glow;
}

.animate-shimmer {
  animation: 2s linear infinite shimmer;
}

.animate-market-row-hover {
  animation: .3s ease-out marketRowHover;
}

.animate-purchase-success {
  animation: .8s ease-out purchaseSuccess;
}

.animate-badge-glow {
  animation: 3s ease-in-out infinite badge-glow;
}

.animate-connection-success {
  animation: .6s ease-out connection-success;
}

.animate-sparkle {
  animation: 2s ease-in-out infinite sparkle;
}

.animate-premium-glow {
  animation: 3s ease-in-out infinite premiumGlow;
}

.animate-badge-float {
  animation: 2s ease-in-out infinite badgeFloat;
}

.animate-exchange-glow {
  animation: 3s ease-in-out infinite exchangeGlow;
}

.animate-changeie-pulse {
  animation: 3s ease-in-out infinite changeiePulse;
}

.animate-changeie-glow {
  animation: 2s ease-in-out infinite changeieGlow;
}

.animate-professional-glow {
  animation: 3s ease-in-out infinite professionalGlow;
}

.animate-professional-pulse {
  animation: 2s ease-in-out infinite professionalPulse;
}

.animate-diamond-sparkle {
  animation: 2s ease-in-out infinite diamondSparkle;
}

.animate-coin-float {
  animation: 3s ease-in-out infinite coinFloat;
}

.animate-gradient-x {
  animation: 4s ease-in-out infinite gradientX;
}

.animate-crypto-solid-glow {
  animation: 3s ease-in-out infinite crypto-solid-glow;
}

.animate-crypto-solid-float {
  animation: 2s ease-in-out infinite crypto-solid-float;
}

.animate-crypto-solid-pulse {
  animation: 2.5s ease-in-out infinite crypto-solid-pulse;
}

.animate-crypto-icon-shimmer {
  animation: 2s linear infinite crypto-icon-shimmer;
}

.animate-platform-glow {
  animation: 4s ease-in-out infinite platformGlow;
}

.animate-light-shimmer {
  animation: 6s ease-in-out infinite lightShimmer;
}

.animate-float-particle {
  animation: 8s ease-in-out infinite floatParticle;
}

.animate-pulse-ring {
  animation: 3s cubic-bezier(.455, .03, .515, .955) infinite pulseRing;
}

.animate-ambient-glow {
  animation: 5s ease-in-out infinite ambientGlow;
}

.animate-platform-showcase-float {
  animation: 6s ease-in-out infinite platformShowcaseFloat;
}

.animate-green-light-pulse {
  animation: 4s ease-in-out infinite greenLightPulse;
}

.animate-scroll-left {
  animation: 80s linear infinite scroll-left;
}

.animate-scroll-left-slow {
  animation: 120s linear infinite scroll-left-slow;
}

.animate-scroll-left-mobile {
  animation: 100s linear infinite scroll-left-mobile;
}

.animate-scroll-left-mobile-compact {
  animation: 80s linear infinite scroll-left-mobile-compact;
}

.animate-crypto-ticker-scroll {
  animation: 180s linear infinite crypto-ticker-scroll;
}

.animate-crypto-ticker-glow {
  animation: 3s ease-in-out infinite crypto-ticker-glow;
}

.animate-crypto-coin-float {
  animation: 2s ease-in-out infinite crypto-coin-float;
}

@keyframes groupAppearance {
  0% {
    opacity: 0;
    transform: scale(0)rotate(0);
  }

  30% {
    opacity: 1;
    transform: scale(1.3)rotate(180deg);
  }

  100% {
    opacity: 1;
    transform: scale(1)rotate(360deg);
  }
}

@keyframes worldMapPulse {
  0%, 100% {
    filter: brightness();
    transform: scale(1);
  }

  50% {
    filter: brightness(1.05);
    transform: scale(1.01);
  }
}

@keyframes transactionCounter {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes tradingWave {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

.animate-group-appearance {
  animation: .8s cubic-bezier(.34, 1.56, .64, 1) forwards groupAppearance;
}

.animate-world-map-pulse {
  animation: 6s ease-in-out infinite worldMapPulse;
}

.animate-transaction-counter {
  animation: .6s ease-out transactionCounter;
}

.animate-trading-wave {
  animation: 2s ease-in-out tradingWave;
}

.glass-card:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.gpu-accelerated {
  will-change: transform;
  transform: translateZ(0);
}

.font-inter {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  font-variant-numeric: tabular-nums;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

.exchange-summary-section, [data-section="exchange-summary"], .exchange-summary-box, .exchange-summary-section *, [data-section="exchange-summary"] *, .exchange-summary-box *, .exchange-summary-section h4, [data-section="exchange-summary"] h4, .exchange-summary-box h4, .exchange-summary-section span, [data-section="exchange-summary"] span, .exchange-summary-box span, .tracking-view .exchange-summary, .tracking-view .exchange-summary *, div[class*="Exchange Summary"] *, div[class*="exchange-summary"] *, :is(div[class*="bg-white/10"] h4:contains("Exchange Summary"), div[class*="bg-white/10"] .space-y-2 span, div[class*="bg-white/10"] .space-y-2 div, div[class*="backdrop-blur-sm"] h4:contains("Exchange Summary"), div[class*="backdrop-blur-sm"] .space-y-2 span, div[class*="backdrop-blur-sm"] .space-y-2 div), [class*="backdrop-blur-sm"] [class*="space-y-2"] span[class*="text-white"], [class*="backdrop-blur-sm"] h4[class*="text-white"], [class*="bg-white/10"] [class*="space-y-2"] span[class*="text-white"], [class*="bg-white/10"] h4[class*="text-white"], div[class*="tracking"] div[class*="bg-white"] [class*="text-white"], div[class*="tracking"] div[class*="backdrop"] [class*="text-white"], .tracking-view [class*="text-white"], [data-summary="exchange"] *, .exchange-widget .summary-section * {
  color: #000 !important;
}

:contains("Exchange Summary") {
  color: #000 !important;
}

:contains("Exchange Summary") * {
  color: #000 !important;
}

.tracking [class*="text-white"], div[key="tracking"] [class*="text-white"], motion-div[class*="tracking"] [class*="text-white"] {
  color: #000 !important;
}

.crypto-exchange-box input[type="text"], .crypto-exchange-box input[placeholder*="Search"], div[class*="dropdown"] input[type="text"], div[class*="dropdown"] input[placeholder*="Search"], .currency-dropdown input[type="text"], .currency-dropdown input[placeholder*="Search"], input[placeholder*="Search currencies"], input[placeholder*="Search for"], .search-input, .currency-search-input {
  color: #000 !important;
  background: #fff !important;
  border: 1px solid #0000001a !important;
}

.crypto-exchange-box input[type="text"]:focus, .crypto-exchange-box input[placeholder*="Search"]:focus, div[class*="dropdown"] input[type="text"]:focus, div[class*="dropdown"] input[placeholder*="Search"]:focus, .currency-dropdown input[type="text"]:focus, .currency-dropdown input[placeholder*="Search"]:focus, input[placeholder*="Search currencies"]:focus, input[placeholder*="Search for"]:focus, .search-input:focus, .currency-search-input:focus {
  color: #000 !important;
  background: #fff !important;
  border-color: #00d08480 !important;
  outline: none !important;
}

.crypto-exchange-box input[type="text"]::placeholder, .crypto-exchange-box input[placeholder*="Search"]::placeholder, div[class*="dropdown"] input[type="text"]::placeholder, div[class*="dropdown"] input[placeholder*="Search"]::placeholder, .currency-dropdown input[type="text"]::placeholder, .currency-dropdown input[placeholder*="Search"]::placeholder, input[placeholder*="Search currencies"]::placeholder, input[placeholder*="Search for"]::placeholder, .search-input::placeholder, .currency-search-input::placeholder {
  color: #00000080 !important;
}

div[class*="absolute"] div[class*="bg-white"] input, div[class*="absolute"] div[class*="backdrop-blur"] input, .dropdown-menu input, .dropdown-content input, [data-dropdown] input {
  color: #000 !important;
  background: #fff !important;
}

div[class*="max-h-60"] input[type="text"], div[class*="overflow-auto"] input[type="text"], .currency-list input[type="text"] {
  color: #000 !important;
  background: #fff !important;
  border: 1px solid #0000001a !important;
}

.exchange-widget input, .crypto-exchange-widget input, [data-component="exchange"] input, [class*="exchange"] input[type="text"], div[class*="space-y-2"] input, div[class*="p-3"] input[type="text"], .search-container input {
  color: #000 !important;
  background: #fff !important;
}

input[class*="search"], input[aria-label*="search"], input[aria-label*="Search"] {
  color: #000 !important;
  background: #fff !important;
  border: 1px solid #0000001a !important;
}

.crypto-exchange-box input, .crypto-exchange-box input[type="text"], .crypto-exchange-box input[type="number"], .crypto-exchange-box input[type="search"], div[class*="CryptoExchangeBox"] input, div[class*="crypto-exchange"] input, [data-component="crypto-exchange-box"] input, [data-component="exchange-box"] input {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #0000001a !important;
}

[style*="color: white"] input, [style*="color: #ffffff"] input, [style*="color: #fff"] input {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

div[class*="absolute"] input, div[class*="dropdown"] input, div[class*="z-10"] input, div[class*="z-20"] input, div[class*="bg-white"] input, div[class*="backdrop-blur"] input {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
}

input[placeholder*="Search"], input[placeholder*="search"], input[placeholder*="currency"], input[placeholder*="Currency"], input[placeholder*="crypto"], input[placeholder*="Crypto"] {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #0000001a !important;
}

input {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

input[type="password"], input[type="hidden"], input[type="radio"], input[type="checkbox"] {
  color: initial !important;
  -webkit-text-fill-color: initial !important;
}

[data-text*="1310"], .error-code-1310, .warning-1310 {
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
  overflow: hidden !important;
}

:contains("1310") {
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
  overflow: hidden !important;
}

div:contains("1310") {
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
  overflow: hidden !important;
}

span:contains("1310") {
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
  overflow: hidden !important;
}

div[class*="yellow"]:contains("1310") {
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
  overflow: hidden !important;
}

div[class*="warning"]:contains("1310") {
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
  overflow: hidden !important;
}

div[class*="alert"]:contains("1310") {
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
  overflow: hidden !important;
}

div[class*="bg-yellow"]:contains("1310") {
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
  overflow: hidden !important;
}

.bg-yellow-50, .bg-yellow-100, .bg-yellow-200, .border-yellow-200, .border-yellow-300, div[class*="bg-yellow"][class*="border-yellow"] {
  display: none !important;
}

.crypto-exchange-box .bg-yellow-100, .crypto-exchange-box .bg-yellow-50, .crypto-exchange-box div[class*="bg-yellow"], .crypto-exchange-box div[class*="border-yellow"], [data-component="crypto-exchange-box"] div[class*="bg-yellow"], [data-component="exchange-box"] div[class*="bg-yellow"] {
  visibility: hidden !important;
  opacity: 0 !important;
  display: none !important;
}

div:has(.lucide-alert-circle), div:has([class*="alert-circle"]), div:has([data-icon="alert-circle"]), .alert-section, .warning-section {
  display: none !important;
}

.crypto-markets-page {
  z-index: 1 !important;
  margin-top: 0 !important;
  padding-top: .25rem !important;
  position: relative !important;
}

.crypto-markets-content, [data-section="markets"], [data-section="markets"] > div {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body:has([data-section="markets"]) .crypto-ticker-header, body:has([data-section="markets"]) .crypto-ticker-scrollable {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

.crypto-ticker-header + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.transaction-status-page {
  transform-origin: top !important;
  width: 103.09% !important;
  margin-left: -1.55% !important;
  transform: scale(.97) !important;
}

.transaction-status-page * {
  box-sizing: border-box !important;
}

@media (width <= 768px) {
  .transaction-status-page .transaction-status-content {
    margin-top: 1rem !important;
    padding-top: 2rem !important;
  }

  .transaction-status-page .text-center.mb-8 {
    margin-bottom: 1.5rem !important;
    padding-top: 1rem !important;
  }

  .transaction-status-page .max-w-7xl {
    padding-top: 2rem !important;
  }

  .transaction-status-page {
    margin-top: .5rem !important;
  }
}

@media (width <= 480px) {
  .transaction-status-page .transaction-status-content {
    margin-top: 1.5rem !important;
    padding-top: 2.5rem !important;
  }

  .transaction-status-page .text-center.mb-8 {
    margin-bottom: 1rem !important;
    padding-top: 1.5rem !important;
  }
}

.crypto-markets h1 span.text-white, [data-section="markets"] h1 span.text-white, .min-h-screen.crypto-markets h1 span.text-white, .crypto-markets h1 span[style*="color"], [data-section="markets"] h1 span[style*="color"], .min-h-screen.crypto-markets h1 span[style*="color"] {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

h1 span:contains("Cryptocurrency Market") {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

span:contains("Cryptocurrency Market") {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.crypto-markets h1 span, [data-section="markets"] h1 span, .min-h-screen div[class*="max-w-7xl"] h1 span.text-white {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

@media (width <= 1024px) {
  .crypto-markets .space-y-4 {
    gap: 1rem !important;
    padding: .5rem !important;
  }

  .crypto-markets .grid.grid-cols-2 {
    gap: .75rem !important;
  }

  .crypto-markets .grid.grid-cols-2 > div {
    min-height: 4rem !important;
    padding: .75rem !important;
  }

  .crypto-markets .grid.grid-cols-1 {
    gap: 1rem !important;
  }

  .crypto-markets .grid.grid-cols-1 > div {
    width: 100% !important;
  }

  .crypto-markets input[type="text"] {
    padding: .75rem 1rem .75rem 2.5rem !important;
    font-size: 16px !important;
  }

  .crypto-markets [role="combobox"] {
    padding: .75rem 1rem !important;
    font-size: 14px !important;
  }

  .crypto-markets button {
    min-height: 2.75rem !important;
    padding: .75rem 1rem !important;
    font-size: 14px !important;
  }

  .crypto-markets [data-section="markets"] div:hover {
    transition: transform .2s !important;
    transform: translateY(-1px) !important;
  }

  .crypto-markets h1 {
    margin-bottom: 1rem !important;
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }

  .crypto-markets h1 span:last-child {
    margin-top: .5rem !important;
    font-size: 1.5rem !important;
  }

  .crypto-markets p {
    padding: 0 1rem !important;
    font-size: .875rem !important;
    line-height: 1.4 !important;
  }

  .crypto-markets .badge, .crypto-markets [class*="badge"] {
    padding: .25rem .5rem !important;
    font-size: .75rem !important;
  }

  .crypto-markets .crypto-icon-sm {
    width: 1.5rem !important;
    min-width: 1.5rem !important;
    height: 1.5rem !important;
    min-height: 1.5rem !important;
  }

  .crypto-markets .lg\:hidden .space-y-4 {
    gap: .75rem !important;
    padding: 0 !important;
  }

  .crypto-markets .lg\:hidden .space-y-4 > div {
    background: #242424 !important;
    border: 1px solid #ffffff1a !important;
    border-radius: 12px !important;
    padding: 1rem !important;
  }

  .crypto-markets .grid.grid-cols-2.gap-4 {
    gap: 1rem !important;
  }

  .crypto-markets .grid.grid-cols-2.gap-4 > div {
    background: #ffffff05 !important;
    border: 1px solid #ffffff0d !important;
    border-radius: 8px !important;
    padding: .5rem !important;
  }

  .crypto-markets .font-bold.text-xl {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
  }

  .crypto-markets .font-bold.text-lg {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
  }

  .crypto-markets .font-mono.font-semibold.text-sm {
    font-size: .875rem !important;
    font-weight: 500 !important;
  }

  .crypto-markets .flex.items-center.gap-2 {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: .5rem !important;
  }

  .crypto-markets .flex.items-center.gap-2 button {
    min-width: 2.5rem !important;
    height: 2.5rem !important;
    padding: .5rem !important;
  }
}

@media (width <= 480px) {
  .crypto-markets h1 {
    text-align: center !important;
    font-size: 1.75rem !important;
  }

  .crypto-markets h1 span:last-child {
    font-size: 1.25rem !important;
  }

  .crypto-markets p {
    text-align: center !important;
    font-size: .8125rem !important;
  }

  .crypto-markets .px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .crypto-markets .grid.grid-cols-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: .5rem !important;
  }

  .crypto-markets .grid.grid-cols-2 > div {
    min-height: 3.5rem !important;
    padding: .5rem !important;
  }

  .crypto-markets .text-lg, .crypto-markets .text-xl {
    font-size: 1rem !important;
  }

  .crypto-markets .text-2xl {
    font-size: 1.25rem !important;
  }

  .crypto-markets .lg\:hidden .space-y-4 > div {
    padding: .75rem !important;
  }

  .crypto-markets .grid.grid-cols-2.gap-4 {
    gap: .75rem !important;
  }

  .crypto-markets .grid.grid-cols-2.gap-4 > div {
    padding: .375rem !important;
  }
}

@media (width <= 768px) {
  .crypto-markets button, .crypto-markets [role="combobox"], .crypto-markets input, .crypto-markets [data-state] {
    touch-action: manipulation !important;
    min-height: 44px !important;
  }

  .crypto-markets .lg\:hidden .space-y-4 > div {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -khtml-user-select: none !important;
  }

  .crypto-markets {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
  }

  .crypto-markets .lg\:hidden .space-y-4 > div:active {
    transition: transform .1s !important;
    transform: scale(.98) !important;
  }
}

.crypto-markets-page input[type="text"], .crypto-markets-page input[placeholder*="Search"], .crypto-markets-page input[placeholder*="search"], [data-section="markets"] input[type="text"], [data-section="markets"] input[placeholder*="Search"], [data-section="markets"] input[placeholder*="search"], .min-h-screen.bg-background input[placeholder*="Search cryptocurrencies"], .crypto-markets input[placeholder*="Search cryptocurrencies"], .crypto-markets .relative input[type="text"] {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #2a2a2acc !important;
  border: 1px solid #ffffff1a !important;
}

.crypto-markets .relative .lucide-search, .crypto-markets .relative svg[aria-hidden="true"], .crypto-markets .relative svg.w-4.h-4, [data-section="markets"] .relative .lucide-search, [data-section="markets"] .relative svg[aria-hidden="true"], [data-section="markets"] .relative svg.w-4.h-4, input[placeholder*="Search cryptocurrencies"] + .lucide-search, input[placeholder*="Search cryptocurrencies"] ~ .lucide-search, .crypto-markets input[type="text"] + svg, .crypto-markets input[type="text"] ~ svg {
  z-index: 40 !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #9ca3af !important;
  stroke: #9ca3af !important;
  stroke-width: 2.5px !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
  width: 1.25rem !important;
  min-width: 1.25rem !important;
  height: 1.25rem !important;
  min-height: 1.25rem !important;
  display: block !important;
  position: absolute !important;
  top: 18px !important;
  left: .75rem !important;
  transform: none !important;
}

.crypto-markets .relative input[type="text"], [data-section="markets"] .relative input[type="text"], .crypto-markets-page .relative input[type="text"], .crypto-markets input[class*="pl-10"], [data-section="markets"] input[class*="pl-10"], .crypto-markets-page input[class*="pl-10"], .crypto-markets input[placeholder*="Search cryptocurrencies"], [data-section="markets"] input[placeholder*="Search cryptocurrencies"], .crypto-markets-page input[placeholder*="Search cryptocurrencies"] {
  z-index: 5 !important;
  box-sizing: border-box !important;
  color: #fff !important;
  background: #2a2a2af2 !important;
  border: 2px solid #fff3 !important;
  border-radius: 8px !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding-left: 40px !important;
  padding-right: 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all .2s !important;
  position: relative !important;
}

.crypto-markets .relative, [data-section="markets"] .relative, .crypto-markets-page .relative {
  contain: none !important;
  align-items: center !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  display: flex !important;
  position: relative !important;
  overflow: visible !important;
}

.crypto-markets .relative input[type="text"]:focus, [data-section="markets"] .relative input[type="text"]:focus, .crypto-markets-page .relative input[type="text"]:focus, .crypto-markets input[class*="pl-10"]:focus, [data-section="markets"] input[class*="pl-10"]:focus, .crypto-markets-page input[class*="pl-10"]:focus {
  background: #2a2a2a !important;
  border-color: #00d084b3 !important;
  outline: none !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 0 3px #00d08433 !important;
}

.crypto-markets .relative input[type="text"]:focus + .lucide-search, .crypto-markets .relative input[type="text"]:focus ~ .lucide-search, [data-section="markets"] .relative input[type="text"]:focus + .lucide-search, [data-section="markets"] .relative input[type="text"]:focus ~ .lucide-search, .crypto-markets-page .relative input[type="text"]:focus + .lucide-search, .crypto-markets-page .relative input[type="text"]:focus ~ .lucide-search {
  color: #00d084e6 !important;
  stroke: #00d084e6 !important;
  filter: drop-shadow(0 2px 4px #00d08466) !important;
  transform: translateY(-50%)scale(1.1) !important;
}

.crypto-markets div[class*="relative"]:has(input[placeholder*="Search"]), [data-section="markets"] div[class*="relative"]:has(input[placeholder*="Search"]), .min-h-screen div[class*="relative"]:has(input[placeholder*="Search cryptocurrencies"]) {
  contain: none !important;
  isolation: auto !important;
  z-index: 1 !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  position: relative !important;
  overflow: visible !important;
}

.crypto-markets .relative.md\\:col-span-2 {
  contain: none !important;
  isolation: auto !important;
  z-index: 1 !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  position: relative !important;
  overflow: visible !important;
}

[data-section="markets"] .relative.md\\:col-span-2 {
  contain: none !important;
  isolation: auto !important;
  z-index: 1 !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  position: relative !important;
  overflow: visible !important;
}

.crypto-markets-page .relative.md\\:col-span-2 {
  contain: none !important;
  isolation: auto !important;
  z-index: 1 !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  position: relative !important;
  overflow: visible !important;
}

.crypto-markets Card .grid .relative, [data-section="markets"] Card .grid .relative, .crypto-markets-page Card .grid .relative {
  z-index: 10 !important;
  position: relative !important;
  overflow: visible !important;
}

.crypto-markets .relative:hover input[type="text"], [data-section="markets"] .relative:hover input[type="text"], .crypto-markets-page .relative:hover input[type="text"], .crypto-markets div[class*="relative"]:hover input[class*="pl-10"], [data-section="markets"] div[class*="relative"]:hover input[class*="pl-10"], .crypto-markets-page div[class*="relative"]:hover input[class*="pl-10"] {
  background: #2a2a2a !important;
  border-color: #ffffff80 !important;
  box-shadow: 0 2px 8px #0003 !important;
}

.crypto-markets .relative:hover .lucide-search, [data-section="markets"] .relative:hover .lucide-search, .crypto-markets-page .relative:hover .lucide-search, .crypto-markets div[class*="relative"]:hover .w-4.h-4, [data-section="markets"] div[class*="relative"]:hover .w-4.h-4, .crypto-markets-page div[class*="relative"]:hover .w-4.h-4 {
  color: #fff !important;
  stroke: #fff !important;
  filter: drop-shadow(0 1px 3px #fff3) !important;
  transform: translateY(-50%)scale(1.05) !important;
}

.crypto-markets .relative input[type="text"]::placeholder, [data-section="markets"] .relative input[type="text"]::placeholder, .crypto-markets-page .relative input[type="text"]::placeholder {
  color: #fff9 !important;
  font-size: 14px !important;
}

.crypto-markets-page input[type="text"]:focus, .crypto-markets-page input[placeholder*="Search"]:focus, [data-section="markets"] input[type="text"]:focus, [data-section="markets"] input[placeholder*="Search"]:focus, .crypto-markets input[placeholder*="Search cryptocurrencies"]:focus, .crypto-markets .relative input[type="text"]:focus {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #2a2a2ae6 !important;
  border-color: #00d08480 !important;
  outline: none !important;
}

.crypto-markets-page input[type="text"]::placeholder, .crypto-markets-page input[placeholder*="Search"]::placeholder, [data-section="markets"] input[type="text"]::placeholder, [data-section="markets"] input[placeholder*="Search"]::placeholder, .crypto-markets input[placeholder*="Search cryptocurrencies"]::placeholder, .crypto-markets .relative input[type="text"]::placeholder {
  color: #fff9 !important;
  -webkit-text-fill-color: #fff9 !important;
}

.crypto-markets .relative .absolute.left-3 + input[type="text"] {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #2a2a2acc !important;
}

div[class*="max-w-7xl"] div[class*="relative"] input[placeholder*="Search cryptocurrencies"] {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #2a2a2acc !important;
  border: 1px solid #ffffff1a !important;
}

.crypto-markets input, [data-section="markets"] input, .crypto-markets-page input {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

[data-section="blog"] .pagination, [data-section="blog"] .pagination-container, [data-section="blog"] .pagination-item, [data-section="blog"] .pagination-link, [data-section="blog"] .pagination-button, [data-section="blog"] button[aria-label*="Page"], [data-section="blog"] button[data-page], [data-section="blog"] a[aria-label*="Page"], [data-section="blog"] a[data-page], [data-section="blog"] .page-item, [data-section="blog"] .page-link, [data-section="blog"] .page-button, [data-section="blog"] .page-number, [data-section="blog"] .pagination-page, [data-section="blog"] .pagination-number, .crypto-blog-page .pagination, .crypto-blog-page .pagination-container, .crypto-blog-page .pagination-item, .crypto-blog-page .pagination-link, .crypto-blog-page .pagination-button, .crypto-blog-page button[aria-label*="Page"], .crypto-blog-page button[data-page], .crypto-blog-page a[aria-label*="Page"], .crypto-blog-page a[data-page], .crypto-blog-page .page-item, .crypto-blog-page .page-link, .crypto-blog-page .page-button, .crypto-blog-page .page-number, .crypto-blog-page .pagination-page, .crypto-blog-page .pagination-number, nav[data-section="blog"] button, nav[data-section="blog"] a, [data-component="blog-pagination"] button, [data-component="blog-pagination"] a, .blog-pagination button, .blog-pagination a {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

[data-section="blog"] button:contains("Previous") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

[data-section="blog"] button:contains("Next") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

[data-section="blog"] button:contains("Prev") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

[data-section="blog"] a:contains("Previous") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

[data-section="blog"] a:contains("Next") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

[data-section="blog"] a:contains("Prev") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

[data-section="blog"] button:contains("1") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

[data-section="blog"] button:contains("2") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

[data-section="blog"] button:contains("3") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

[data-section="blog"] button:contains("4") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

[data-section="blog"] button:contains("5") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

[data-section="blog"] a:contains("1") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

[data-section="blog"] a:contains("2") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

[data-section="blog"] a:contains("3") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

[data-section="blog"] a:contains("4") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

[data-section="blog"] a:contains("5") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

.crypto-blog-page button:contains("Previous") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

.crypto-blog-page button:contains("Next") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

.crypto-blog-page button:contains("Prev") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

.crypto-blog-page a:contains("Previous") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

.crypto-blog-page a:contains("Next") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

.crypto-blog-page a:contains("Prev") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

.crypto-blog-page button:contains("1") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

.crypto-blog-page button:contains("2") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

.crypto-blog-page button:contains("3") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

.crypto-blog-page button:contains("4") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

.crypto-blog-page button:contains("5") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

.crypto-blog-page a:contains("1") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

.crypto-blog-page a:contains("2") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

.crypto-blog-page a:contains("3") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

.crypto-blog-page a:contains("4") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

.crypto-blog-page a:contains("5") {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  margin: 0 .125rem !important;
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
}

[data-section="blog"] .pagination-item:hover, [data-section="blog"] .pagination-link:hover, [data-section="blog"] .pagination-button:hover, [data-section="blog"] button[aria-label*="Page"]:hover, [data-section="blog"] button[data-page]:hover, [data-section="blog"] a[aria-label*="Page"]:hover, [data-section="blog"] a[data-page]:hover, [data-section="blog"] .page-item:hover, [data-section="blog"] .page-link:hover, [data-section="blog"] .page-button:hover, [data-section="blog"] .page-number:hover, [data-section="blog"] .pagination-page:hover, [data-section="blog"] .pagination-number:hover, .crypto-blog-page .pagination-item:hover, .crypto-blog-page .pagination-link:hover, .crypto-blog-page .pagination-button:hover, .crypto-blog-page button[aria-label*="Page"]:hover, .crypto-blog-page button[data-page]:hover, .crypto-blog-page a[aria-label*="Page"]:hover, .crypto-blog-page a[data-page]:hover, .crypto-blog-page .page-item:hover, .crypto-blog-page .page-link:hover, .crypto-blog-page .page-button:hover, .crypto-blog-page .page-number:hover, .crypto-blog-page .pagination-page:hover, .crypto-blog-page .pagination-number:hover, nav[data-section="blog"] button:hover, nav[data-section="blog"] a:hover, [data-component="blog-pagination"] button:hover, [data-component="blog-pagination"] a:hover, .blog-pagination button:hover, .blog-pagination a:hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

[data-section="blog"] button:contains("Previous"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

[data-section="blog"] button:contains("Next"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

[data-section="blog"] button:contains("Prev"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

[data-section="blog"] a:contains("Previous"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

[data-section="blog"] a:contains("Next"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

[data-section="blog"] a:contains("Prev"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

[data-section="blog"] button:contains("1"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

[data-section="blog"] button:contains("2"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

[data-section="blog"] button:contains("3"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

[data-section="blog"] button:contains("4"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

[data-section="blog"] button:contains("5"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

[data-section="blog"] a:contains("1"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

[data-section="blog"] a:contains("2"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

[data-section="blog"] a:contains("3"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

[data-section="blog"] a:contains("4"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

[data-section="blog"] a:contains("5"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

.crypto-blog-page button:contains("Previous"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

.crypto-blog-page button:contains("Next"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

.crypto-blog-page button:contains("Prev"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

.crypto-blog-page a:contains("Previous"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

.crypto-blog-page a:contains("Next"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

.crypto-blog-page a:contains("Prev"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

.crypto-blog-page button:contains("1"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

.crypto-blog-page button:contains("2"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

.crypto-blog-page button:contains("3"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

.crypto-blog-page button:contains("4"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

.crypto-blog-page button:contains("5"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

.crypto-blog-page a:contains("1"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

.crypto-blog-page a:contains("2"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

.crypto-blog-page a:contains("3"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

.crypto-blog-page a:contains("4"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

.crypto-blog-page a:contains("5"):hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

[data-section="blog"] .pagination-item.active, [data-section="blog"] .pagination-link.active, [data-section="blog"] .pagination-button.active, [data-section="blog"] button[aria-label*="Page"][aria-current="page"], [data-section="blog"] button[data-page].active, [data-section="blog"] a[aria-label*="Page"][aria-current="page"], [data-section="blog"] a[data-page].active, [data-section="blog"] .page-item.active, [data-section="blog"] .page-link.active, [data-section="blog"] .page-button.active, [data-section="blog"] .page-number.active, [data-section="blog"] .pagination-page.active, [data-section="blog"] .pagination-number.active, [data-section="blog"] [aria-current="page"], .crypto-blog-page .pagination-item.active, .crypto-blog-page .pagination-link.active, .crypto-blog-page .pagination-button.active, .crypto-blog-page button[aria-label*="Page"][aria-current="page"], .crypto-blog-page button[data-page].active, .crypto-blog-page a[aria-label*="Page"][aria-current="page"], .crypto-blog-page a[data-page].active, .crypto-blog-page .page-item.active, .crypto-blog-page .page-link.active, .crypto-blog-page .page-button.active, .crypto-blog-page .page-number.active, .crypto-blog-page .pagination-page.active, .crypto-blog-page .pagination-number.active, .crypto-blog-page [aria-current="page"], nav[data-section="blog"] button.active, nav[data-section="blog"] a.active, [data-component="blog-pagination"] button.active, [data-component="blog-pagination"] a.active, .blog-pagination button.active, .blog-pagination a.active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00d084 !important;
  border-color: #00d084 !important;
  font-weight: 600 !important;
}

[data-section="blog"] .pagination-item.active:hover, [data-section="blog"] .pagination-link.active:hover, [data-section="blog"] .pagination-button.active:hover, [data-section="blog"] button[aria-label*="Page"][aria-current="page"]:hover, [data-section="blog"] button[data-page].active:hover, [data-section="blog"] a[aria-label*="Page"][aria-current="page"]:hover, [data-section="blog"] a[data-page].active:hover, [data-section="blog"] .page-item.active:hover, [data-section="blog"] .page-link.active:hover, [data-section="blog"] .page-button.active:hover, [data-section="blog"] .page-number.active:hover, [data-section="blog"] .pagination-page.active:hover, [data-section="blog"] .pagination-number.active:hover, [data-section="blog"] [aria-current="page"]:hover, .crypto-blog-page .pagination-item.active:hover, .crypto-blog-page .pagination-link.active:hover, .crypto-blog-page .pagination-button.active:hover, .crypto-blog-page button[aria-label*="Page"][aria-current="page"]:hover, .crypto-blog-page button[data-page].active:hover, .crypto-blog-page a[aria-label*="Page"][aria-current="page"]:hover, .crypto-blog-page a[data-page].active:hover, .crypto-blog-page .page-item.active:hover, .crypto-blog-page .page-link.active:hover, .crypto-blog-page .page-button.active:hover, .crypto-blog-page .page-number.active:hover, .crypto-blog-page .pagination-page.active:hover, .crypto-blog-page .pagination-number.active:hover, .crypto-blog-page [aria-current="page"]:hover, nav[data-section="blog"] button.active:hover, nav[data-section="blog"] a.active:hover, [data-component="blog-pagination"] button.active:hover, [data-component="blog-pagination"] a.active:hover, .blog-pagination button.active:hover, .blog-pagination a.active:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00c77c !important;
  border-color: #00c77c !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px #00d08440 !important;
}

[data-section="blog"] .pagination-item.disabled, [data-section="blog"] .pagination-link.disabled, [data-section="blog"] .pagination-button.disabled, [data-section="blog"] .pagination-item:disabled, [data-section="blog"] .pagination-link:disabled, [data-section="blog"] .pagination-button:disabled, [data-section="blog"] button[aria-label*="Page"]:disabled, [data-section="blog"] button[data-page]:disabled, [data-section="blog"] a[aria-label*="Page"].disabled, [data-section="blog"] a[data-page].disabled, [data-section="blog"] .page-item.disabled, [data-section="blog"] .page-link.disabled, [data-section="blog"] .page-button.disabled, [data-section="blog"] .page-number.disabled, [data-section="blog"] .pagination-page.disabled, [data-section="blog"] .pagination-number.disabled, .crypto-blog-page .pagination-item.disabled, .crypto-blog-page .pagination-link.disabled, .crypto-blog-page .pagination-button.disabled, .crypto-blog-page .pagination-item:disabled, .crypto-blog-page .pagination-link:disabled, .crypto-blog-page .pagination-button:disabled, .crypto-blog-page button[aria-label*="Page"]:disabled, .crypto-blog-page button[data-page]:disabled, .crypto-blog-page a[aria-label*="Page"].disabled, .crypto-blog-page a[data-page].disabled, .crypto-blog-page .page-item.disabled, .crypto-blog-page .page-link.disabled, .crypto-blog-page .page-button.disabled, .crypto-blog-page .page-number.disabled, .crypto-blog-page .pagination-page.disabled, .crypto-blog-page .pagination-number.disabled, nav[data-section="blog"] button:disabled, nav[data-section="blog"] a.disabled, [data-component="blog-pagination"] button:disabled, [data-component="blog-pagination"] a.disabled, .blog-pagination button:disabled, .blog-pagination a.disabled {
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
  cursor: not-allowed !important;
  opacity: .6 !important;
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
}

[data-section="blog"] .pagination, [data-section="blog"] .pagination-container, [data-section="blog"] .pagination-list, [data-section="blog"] nav[class*="pagination"], [data-section="blog"] div[class*="pagination"], [data-section="blog"] ul[class*="pagination"], [data-section="blog"] ol[class*="pagination"], .crypto-blog-page .pagination, .crypto-blog-page .pagination-container, .crypto-blog-page .pagination-list, .crypto-blog-page nav[class*="pagination"], .crypto-blog-page div[class*="pagination"], .crypto-blog-page ul[class*="pagination"], .crypto-blog-page ol[class*="pagination"], nav[data-section="blog"], [data-component="blog-pagination"], .blog-pagination {
  justify-content: center !important;
  align-items: center !important;
  gap: .25rem !important;
  margin: 2rem 0 !important;
  padding: 1rem 0 !important;
  list-style: none !important;
  display: flex !important;
}

[data-section="blog"] .pagination-ellipsis, [data-section="blog"] .pagination-dots, [data-section="blog"] .page-ellipsis, [data-section="blog"] .page-dots, .crypto-blog-page .pagination-ellipsis, .crypto-blog-page .pagination-dots, .crypto-blog-page .page-ellipsis, .crypto-blog-page .page-dots {
  color: #6b7280 !important;
  cursor: default !important;
  background: none !important;
  border: none !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  padding: .5rem .25rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
}

[data-section="blog"] span:contains("...") {
  color: #6b7280 !important;
  cursor: default !important;
  background: none !important;
  border: none !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  padding: .5rem .25rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
}

.crypto-blog-page span:contains("...") {
  color: #6b7280 !important;
  cursor: default !important;
  background: none !important;
  border: none !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  padding: .5rem .25rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
}

nav[data-section="blog"] span:contains("...") {
  color: #6b7280 !important;
  cursor: default !important;
  background: none !important;
  border: none !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  padding: .5rem .25rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
}

[data-component="blog-pagination"] span:contains("...") {
  color: #6b7280 !important;
  cursor: default !important;
  background: none !important;
  border: none !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  padding: .5rem .25rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
}

.blog-pagination span:contains("...") {
  color: #6b7280 !important;
  cursor: default !important;
  background: none !important;
  border: none !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  padding: .5rem .25rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
}

[data-section="blog"], .crypto-blog-page, .min-h-screen.bg-white {
  color: #000 !important;
  background: #fff !important;
}

[data-section="blog"] *, .crypto-blog-page *, .min-h-screen.bg-white * {
  color: #000 !important;
}

[data-section="blog"] h1, [data-section="blog"] h2, [data-section="blog"] h3, [data-section="blog"] h4, [data-section="blog"] h5, [data-section="blog"] h6, .crypto-blog-page h1, .crypto-blog-page h2, .crypto-blog-page h3, .crypto-blog-page h4, .crypto-blog-page h5, .crypto-blog-page h6 {
  color: #111827 !important;
}

[data-section="blog"] p, [data-section="blog"] span, [data-section="blog"] div, .crypto-blog-page p, .crypto-blog-page span, .crypto-blog-page div {
  color: #374151 !important;
}

[data-section="blog"] .card, [data-section="blog"] .glass-card, .crypto-blog-page .card, .crypto-blog-page .glass-card {
  color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
}

[data-section="blog"] input[type="text"], [data-section="blog"] input, [data-section="blog"] select, .crypto-blog-page input[type="text"], .crypto-blog-page input, .crypto-blog-page select {
  color: #000 !important;
  background: #fff !important;
  border: 1px solid #d1d5db !important;
}

[data-section="blog"] input[type="text"]::placeholder, [data-section="blog"] input::placeholder, .crypto-blog-page input[type="text"]::placeholder, .crypto-blog-page input::placeholder {
  color: #6b7280 !important;
}

[data-section="learn"], .learn-page, .min-h-screen.bg-white .learn-page {
  color: #000 !important;
  background: #fff !important;
}

[data-section="learn"] *, .learn-page * {
  color: #000 !important;
}

[data-section="learn"] h1, [data-section="learn"] h2, [data-section="learn"] h3, [data-section="learn"] h4, [data-section="learn"] h5, [data-section="learn"] h6, .learn-page h1, .learn-page h2, .learn-page h3, .learn-page h4, .learn-page h5, .learn-page h6 {
  color: #111827 !important;
}

[data-section="learn"] p, [data-section="learn"] span, [data-section="learn"] div, .learn-page p, .learn-page span, .learn-page div {
  color: #374151 !important;
}

[data-section="learn"] .card, [data-section="learn"] .glass-card, .learn-page .card, .learn-page .glass-card {
  color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
}

[data-section="learn"] input[type="text"], [data-section="learn"] input, [data-section="learn"] select, .learn-page input[type="text"], .learn-page input, .learn-page select {
  color: #000 !important;
  background: #fff !important;
  border: 1px solid #d1d5db !important;
}

[data-section="learn"] input[type="text"]::placeholder, [data-section="learn"] input::placeholder, .learn-page input[type="text"]::placeholder, .learn-page input::placeholder {
  color: #6b7280 !important;
}

[data-section="contests"] .bg-black, [data-section="contests"] .bg-gray-900, [data-section="contests"] .bg-gray-800, [data-section="contests"] .bg-slate-900, [data-section="contests"] .bg-zinc-900, .contests-page .bg-black, .contests-page .bg-gray-900, .contests-page .bg-gray-800, .contests-page .bg-slate-900, .contests-page .bg-zinc-900, .min-h-screen.bg-white .bg-black, .min-h-screen.bg-white .bg-gray-900, .min-h-screen.bg-white .bg-gray-800, .min-h-screen.bg-white .bg-slate-900, .min-h-screen.bg-white .bg-zinc-900 {
  color: #000 !important;
  background: #00d084 !important;
  border: 1px solid #00d0844d !important;
}

[data-section="contests"] .bg-black:hover, [data-section="contests"] .bg-gray-900:hover, [data-section="contests"] .bg-gray-800:hover, [data-section="contests"] .bg-slate-900:hover, [data-section="contests"] .bg-zinc-900:hover, .contests-page .bg-black:hover, .contests-page .bg-gray-900:hover, .contests-page .bg-gray-800:hover, .contests-page .bg-slate-900:hover, .contests-page .bg-zinc-900:hover, .min-h-screen.bg-white .bg-black:hover, .min-h-screen.bg-white .bg-gray-900:hover, .min-h-screen.bg-white .bg-gray-800:hover, .min-h-screen.bg-white .bg-slate-900:hover, .min-h-screen.bg-white .bg-zinc-900:hover {
  color: #000 !important;
  background: #00c77c !important;
  border-color: #00d08480 !important;
}

[data-section="contests"] .bg-black *, [data-section="contests"] .bg-gray-900 *, [data-section="contests"] .bg-gray-800 *, [data-section="contests"] .bg-slate-900 *, [data-section="contests"] .bg-zinc-900 *, .contests-page .bg-black *, .contests-page .bg-gray-900 *, .contests-page .bg-gray-800 *, .contests-page .bg-slate-900 *, .contests-page .bg-zinc-900 *, .min-h-screen.bg-white .bg-black *, .min-h-screen.bg-white .bg-gray-900 *, .min-h-screen.bg-white .bg-gray-800 *, .min-h-screen.bg-white .bg-slate-900 *, .min-h-screen.bg-white .bg-zinc-900 * {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

[data-section="contests"] button.bg-black, [data-section="contests"] button.bg-gray-900, [data-section="contests"] button.bg-gray-800, [data-section="contests"] button.bg-slate-900, [data-section="contests"] button.bg-zinc-900, .contests-page button.bg-black, .contests-page button.bg-gray-900, .contests-page button.bg-gray-800, .contests-page button.bg-slate-900, .contests-page button.bg-zinc-900, .contest-categories button.bg-black, .contest-categories button.bg-gray-900, .contest-categories button.bg-gray-800, .contest-categories button.bg-slate-900, .contest-categories button.bg-zinc-900 {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #00d084 !important;
  border: 1px solid #00d0844d !important;
  transition: all .2s !important;
}

[data-section="contests"] button.bg-black:hover, [data-section="contests"] button.bg-gray-900:hover, [data-section="contests"] button.bg-gray-800:hover, [data-section="contests"] button.bg-slate-900:hover, [data-section="contests"] button.bg-zinc-900:hover, .contests-page button.bg-black:hover, .contests-page button.bg-gray-900:hover, .contests-page button.bg-gray-800:hover, .contests-page button.bg-slate-900:hover, .contests-page button.bg-zinc-900:hover, .contest-categories button.bg-black:hover, .contest-categories button.bg-gray-900:hover, .contest-categories button.bg-gray-800:hover, .contest-categories button.bg-slate-900:hover, .contest-categories button.bg-zinc-900:hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #00c77c !important;
  border-color: #00d08480 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px #00d08433 !important;
}

[data-section="contests"] div[class*="bg-black"], [data-section="contests"] div[class*="bg-gray-900"], [data-section="contests"] div[class*="bg-gray-800"], [data-section="contests"] div[class*="bg-slate-900"], [data-section="contests"] div[class*="bg-zinc-900"], [data-page="contests"] div[class*="bg-black"], [data-page="contests"] div[class*="bg-gray-900"], [data-page="contests"] div[class*="bg-gray-800"], [data-page="contests"] div[class*="bg-slate-900"], [data-page="contests"] div[class*="bg-zinc-900"], div[data-section="contests"] div[class*="bg-black"], div[data-section="contests"] div[class*="bg-gray-900"], div[data-section="contests"] div[class*="bg-gray-800"], div[data-section="contests"] div[class*="bg-slate-900"], div[data-section="contests"] div[class*="bg-zinc-900"] {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #00d084 !important;
  border: 1px solid #00d0844d !important;
}

[data-section="contests"] div[class*="bg-black"]:hover, [data-section="contests"] div[class*="bg-gray-900"]:hover, [data-section="contests"] div[class*="bg-gray-800"]:hover, [data-section="contests"] div[class*="bg-slate-900"]:hover, [data-section="contests"] div[class*="bg-zinc-900"]:hover, [data-page="contests"] div[class*="bg-black"]:hover, [data-page="contests"] div[class*="bg-gray-900"]:hover, [data-page="contests"] div[class*="bg-gray-800"]:hover, [data-page="contests"] div[class*="bg-slate-900"]:hover, [data-page="contests"] div[class*="bg-zinc-900"]:hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: #00c77c !important;
  border-color: #00d08480 !important;
}

[data-section="contests"] div[class*="bg-black"] *, [data-section="contests"] div[class*="bg-gray-900"] *, [data-section="contests"] div[class*="bg-gray-800"] *, [data-section="contests"] div[class*="bg-slate-900"] *, [data-section="contests"] div[class*="bg-zinc-900"] *, [data-page="contests"] div[class*="bg-black"] *, [data-page="contests"] div[class*="bg-gray-900"] *, [data-page="contests"] div[class*="bg-gray-800"] *, [data-page="contests"] div[class*="bg-slate-900"] *, [data-page="contests"] div[class*="bg-zinc-900"] *, [data-section="contests"] button[class*="bg-black"] *, [data-section="contests"] button[class*="bg-gray-900"] *, [data-section="contests"] button[class*="bg-gray-800"] *, [data-section="contests"] button[class*="bg-slate-900"] *, [data-section="contests"] button[class*="bg-zinc-900"] *, [data-page="contests"] button[class*="bg-black"] *, [data-page="contests"] button[class*="bg-gray-900"] *, [data-page="contests"] button[class*="bg-gray-800"] *, [data-page="contests"] button[class*="bg-slate-900"] *, [data-page="contests"] button[class*="bg-zinc-900"] * {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

[data-section="contests"] .bg-black, [data-section="contests"] .bg-gray-900, [data-section="contests"] .bg-gray-800, [data-section="contests"] .bg-slate-900, [data-section="contests"] .bg-zinc-900, [data-section="contests"] button, [data-section="contests"] div[style*="background-color: black"], [data-section="contests"] div[style*="background-color: #000"], [data-section="contests"] div[style*="background: black"], [data-section="contests"] div[style*="background: #000"], [data-page="contests"] .bg-black, [data-page="contests"] .bg-gray-900, [data-page="contests"] .bg-gray-800, [data-page="contests"] .bg-slate-900, [data-page="contests"] .bg-zinc-900, [data-page="contests"] button, [data-page="contests"] div[style*="background-color: black"], [data-page="contests"] div[style*="background-color: #000"], [data-page="contests"] div[style*="background: black"], [data-page="contests"] div[style*="background: #000"], div[data-section="contests"] .bg-black, div[data-section="contests"] .bg-gray-900, div[data-section="contests"] .bg-gray-800, div[data-section="contests"] .bg-slate-900, div[data-section="contests"] .bg-zinc-900, div[data-page="contests"] .bg-black, div[data-page="contests"] .bg-gray-900, div[data-page="contests"] .bg-gray-800, div[data-page="contests"] .bg-slate-900, div[data-page="contests"] .bg-zinc-900 {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  text-shadow: none !important;
  background: #00d084 !important;
  border: 1px solid #00d0844d !important;
}

[data-section="contests"] .bg-black:hover, [data-section="contests"] .bg-gray-900:hover, [data-section="contests"] .bg-gray-800:hover, [data-section="contests"] .bg-slate-900:hover, [data-section="contests"] .bg-zinc-900:hover, [data-section="contests"] button:hover, [data-page="contests"] .bg-black:hover, [data-page="contests"] .bg-gray-900:hover, [data-page="contests"] .bg-gray-800:hover, [data-page="contests"] .bg-slate-900:hover, [data-page="contests"] .bg-zinc-900:hover, [data-page="contests"] button:hover, div[data-section="contests"] .bg-black:hover, div[data-section="contests"] .bg-gray-900:hover, div[data-section="contests"] .bg-gray-800:hover, div[data-section="contests"] .bg-slate-900:hover, div[data-section="contests"] .bg-zinc-900:hover, div[data-page="contests"] .bg-black:hover, div[data-page="contests"] .bg-gray-900:hover, div[data-page="contests"] .bg-gray-800:hover, div[data-page="contests"] .bg-slate-900:hover, div[data-page="contests"] .bg-zinc-900:hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  text-shadow: none !important;
  background: #00c77c !important;
  border-color: #00d08480 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px #00d08433 !important;
}

[data-section="contests"] .bg-black *, [data-section="contests"] .bg-gray-900 *, [data-section="contests"] .bg-gray-800 *, [data-section="contests"] .bg-slate-900 *, [data-section="contests"] .bg-zinc-900 *, [data-section="contests"] button *, [data-page="contests"] .bg-black *, [data-page="contests"] .bg-gray-900 *, [data-page="contests"] .bg-gray-800 *, [data-page="contests"] .bg-slate-900 *, [data-page="contests"] .bg-zinc-900 *, [data-page="contests"] button *, div[data-section="contests"] .bg-black *, div[data-section="contests"] .bg-gray-900 *, div[data-section="contests"] .bg-gray-800 *, div[data-section="contests"] .bg-slate-900 *, div[data-section="contests"] .bg-zinc-900 *, div[data-page="contests"] .bg-black *, div[data-page="contests"] .bg-gray-900 *, div[data-page="contests"] .bg-gray-800 *, div[data-page="contests"] .bg-slate-900 *, div[data-page="contests"] .bg-zinc-900 * {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  text-shadow: none !important;
}

.contests-modal-overlay {
  z-index: 999999 !important;
  position: fixed !important;
  inset: 0 !important;
}

.contests-modal-content {
  z-index: 1000000 !important;
  position: relative !important;
}

[data-modal="wallet-contest"] {
  z-index: 1000001 !important;
  position: fixed !important;
}

[data-modal="wallet-contest"] > div {
  z-index: 1000002 !important;
}

[data-radix-dialog-overlay][data-modal="wallet-contest"], [data-radix-dialog-overlay].contests-modal-overlay {
  z-index: 1000003 !important;
}

[data-radix-dialog-content][data-modal="wallet-contest"], [data-radix-dialog-content].contests-modal-content {
  z-index: 1000004 !important;
}

[data-slot="sheet-overlay"][data-modal="wallet-contest"] {
  z-index: 1000005 !important;
}

[data-slot="sheet-content"][data-modal="wallet-contest"] {
  z-index: 1000006 !important;
}

.contests-modal-overlay, .contests-modal-overlay *, [data-modal="wallet-contest"], [data-modal="wallet-contest"] * {
  z-index: 999999 !important;
}

.force-fixed-header, .force-fixed-header *, header, header *, nav, nav *, .navigation, .navigation *, .nav-container, .nav-container *, [role="navigation"], [role="navigation"] *, .nav-bar, .nav-bar *, .navbar, .navbar * {
  background: var(--background) !important;
  background-color: var(--background) !important;
}

.nav-container .animate-sparkle, .nav-container [class*="animate-sparkle"], .force-fixed-header .animate-sparkle, .force-fixed-header [class*="animate-sparkle"] {
  visibility: hidden !important;
  opacity: 0 !important;
  display: none !important;
}

.nav-container .absolute[class*="bg-"], .force-fixed-header .absolute[class*="bg-"], .changeie-logo + .absolute, .changeie-logo ~ .absolute {
  display: none !important;
}

.nav-container .relative:before, .nav-container .relative:after, .nav-container .inline-block:before, .nav-container .inline-block:after, .changeie-logo:before, .changeie-logo:after, .nav-container .group:before, .nav-container .group:after {
  content: none !important;
  display: none !important;
}

.nav-container .flex.items-center.gap-4 > :not(.cursor-pointer) {
  display: none !important;
}

.nav-container .cursor-pointer.group, .nav-container .relative.inline-block {
  box-shadow: none !important;
  background: none !important;
  border: none !important;
}

.nav-container motion-div:before, .nav-container motion-div:after {
  content: none !important;
  display: none !important;
}

.nav-container .flex.items-center.gap-4 {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 98 !important;
  background: none !important;
  align-items: center !important;
  gap: 1rem !important;
  display: flex !important;
  position: relative !important;
}

.nav-container .flex.items-center.gap-4:before, .nav-container .flex.items-center.gap-4:after {
  content: none !important;
  display: none !important;
}

[class*="exchange-text-glow"] {
  visibility: visible !important;
  opacity: 1 !important;
  color: #10b981 !important;
  z-index: 103 !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  display: inline-block !important;
  position: relative !important;
}

span:contains("Changeie") {
  visibility: visible !important;
  opacity: 1 !important;
  color: #10b981 !important;
  z-index: 103 !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  display: inline-block !important;
  position: relative !important;
}

.exchange-text-glow:contains("Changeie") {
  visibility: visible !important;
  opacity: 1 !important;
  color: #10b981 !important;
  z-index: 103 !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  display: inline-block !important;
  position: relative !important;
}

:contains("Changeie") {
  visibility: visible !important;
  opacity: 1 !important;
  display: inline-block !important;
}

.nav-container div[class*="new-logo-container"], .nav-container .new-logo-container, div[class*="new-logo-container"] {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 104 !important;
  display: inline-block !important;
  position: relative !important;
}

.nav-container motion-div[class*="cursor-pointer"], .nav-container motion-div[class*="group"], .nav-container motion-div[class*="exchange-pro-logo"] {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 105 !important;
  display: block !important;
  position: relative !important;
}

.remove-white-background {
  mix-blend-mode: multiply !important;
  filter: contrast(1.2) brightness(.9) saturate(1.1) !important;
  background: none !important;
}

.remove-white-background:hover {
  filter: contrast(1.25) brightness(.95) saturate(1.15) drop-shadow(0 6px 12px #0000004d) !important;
}

.transparent-white-bg {
  mix-blend-mode: darken !important;
  filter: contrast(1.15) brightness(.95) saturate(1.1) drop-shadow(0 4px 8px #0003) !important;
  background: none !important;
}

.transparent-white-bg:hover {
  filter: contrast(1.2) brightness(.9) saturate(1.15) drop-shadow(0 6px 12px #0000004d) !important;
  transform: scale(1.02) !important;
}

img[alt*="DeFi Wallet"], img[alt*="Wallet Logo"], img[src*="18235f3d84b2d1dfe2c8c4eb1f41ef2669ed65d5"] {
  mix-blend-mode: multiply !important;
  filter: contrast(1.15) brightness(.95) saturate(1.1) drop-shadow(0 4px 8px #0003) !important;
  background: none !important;
  mask-image: linear-gradient(#000 0% 100%) !important;
}

img[alt*="DeFi Wallet"]:hover, img[alt*="Wallet Logo"]:hover, img[src*="18235f3d84b2d1dfe2c8c4eb1f41ef2669ed65d5"]:hover {
  filter: contrast(1.2) brightness(.9) saturate(1.15) drop-shadow(0 6px 12px #0000004d) !important;
  transform: scale(1.02) !important;
}

.bitcoin-exchange-page img[alt*="DeFi Wallet"], .bitcoin-exchange-page img[alt*="Wallet Logo"], .bitcoin-exchange-page img[src*="18235f3d84b2d1dfe2c8c4eb1f41ef2669ed65d5"], [data-page="bitcoin-exchange"] img[alt*="DeFi Wallet"], [data-page="bitcoin-exchange"] img[alt*="Wallet Logo"], [data-page="bitcoin-exchange"] img[src*="18235f3d84b2d1dfe2c8c4eb1f41ef2669ed65d5"] {
  mix-blend-mode: multiply !important;
  filter: contrast(1.25) brightness(.85) saturate(1.2) drop-shadow(0 4px 8px #00000040) !important;
  background: none !important;
  mask-image: radial-gradient(circle, #000 60%, #000c 80%, #0000 100%) !important;
}

.bitcoin-exchange-page img[alt*="DeFi Wallet"]:hover, .bitcoin-exchange-page img[alt*="Wallet Logo"]:hover, .bitcoin-exchange-page img[src*="18235f3d84b2d1dfe2c8c4eb1f41ef2669ed65d5"]:hover, [data-page="bitcoin-exchange"] img[alt*="DeFi Wallet"]:hover, [data-page="bitcoin-exchange"] img[alt*="Wallet Logo"]:hover, [data-page="bitcoin-exchange"] img[src*="18235f3d84b2d1dfe2c8c4eb1f41ef2669ed65d5"]:hover {
  filter: contrast(1.3) brightness(.8) saturate(1.25) drop-shadow(0 6px 12px #00000059) !important;
  transform: scale(1.05) !important;
  mask-image: radial-gradient(circle, #000 65%, #000000e6 85%, #0000 100%) !important;
}

.bitcoin-exchange-page .ModernExchangeWidget, .bitcoin-exchange-page [data-component="ModernExchangeWidget"], [data-page="bitcoin-exchange"] .ModernExchangeWidget, [data-page="bitcoin-exchange"] [data-component="ModernExchangeWidget"], .exchange-widget-old, .modern-exchange-widget-old {
  visibility: hidden !important;
  opacity: 0 !important;
  display: none !important;
}

.bitcoin-exchange-page .CryptoExchangeBoxModern, .bitcoin-exchange-page [data-component="CryptoExchangeBoxModern"], [data-page="bitcoin-exchange"] .CryptoExchangeBoxModern, [data-page="bitcoin-exchange"] [data-component="CryptoExchangeBoxModern"], .crypto-exchange-box-modern-container {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 10 !important;
  display: block !important;
  position: relative !important;
}

[data-page="bitcoin-exchange"] div:not(.crypto-exchange-box-modern-container) [class*="ModernExchange"] {
  display: none !important;
}

.crypto-exchange-box-modern-container > * {
  visibility: visible !important;
  display: block !important;
}

.bitcoin-exchange-page .transparent-white-bg, [data-page="bitcoin-exchange"] .transparent-white-bg {
  mix-blend-mode: darken !important;
  filter: contrast(1.3) brightness(.82) saturate(1.25) drop-shadow(0 8px 16px #0000004d) !important;
  background: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.bitcoin-exchange-page .transparent-white-bg:hover, [data-page="bitcoin-exchange"] .transparent-white-bg:hover {
  filter: contrast(1.35) brightness(.78) saturate(1.3) drop-shadow(0 10px 20px #0006) !important;
  transform: scale(1.08) !important;
}

.bitcoin-exchange-page img[alt*="Wallet"], .bitcoin-exchange-page img[alt*="Card"], .bitcoin-exchange-page img[alt*="DeFi"], [data-page="bitcoin-exchange"] img[alt*="Wallet"], [data-page="bitcoin-exchange"] img[alt*="Card"], [data-page="bitcoin-exchange"] img[alt*="DeFi"] {
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: multiply !important;
  background: none !important;
}

.bitcoin-exchange-page .relative.w-full.max-w-xs, [data-page="bitcoin-exchange"] .relative.w-full.max-w-xs {
  background: none !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  overflow: hidden !important;
}

.bitcoin-card-image {
  mix-blend-mode: multiply !important;
  filter: contrast(1.35) brightness(.8) saturate(1.3) drop-shadow(0 8px 16px #0000004d) !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  mask-image: radial-gradient(circle, #000 70%, #000c 90%, #0000 100%) !important;
}

.bitcoin-card-image:hover {
  mix-blend-mode: multiply !important;
  filter: contrast(1.4) brightness(.75) saturate(1.35) drop-shadow(0 12px 24px #0006) !important;
  transform: scale(1.1) !important;
  mask-image: radial-gradient(circle, #000 75%, #000000e6 95%, #0000 100%) !important;
}

.bitcoin-exchange-page .bitcoin-card-image, [data-page="bitcoin-exchange"] .bitcoin-card-image {
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  background: none !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.bitcoin-exchange-page .max-w-xs, [data-page="bitcoin-exchange"] .max-w-xs {
  background: none !important;
}

.nav-container :before, .nav-container :after, .force-fixed-header :before, .force-fixed-header :after, .nav-container button:before, .nav-container button:after, .nav-container .nav-item:before, .nav-container .nav-item:after, .nav-container span:before, .nav-container span:after {
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  display: none !important;
}

[data-section="about"] svg, [data-section="about"] .lucide, .about-us svg, .about-us .lucide, .min-h-screen.bg-white div[class*="about"] svg, .min-h-screen.bg-white div[class*="about"] .lucide, [data-section="journey"] svg, [data-section="journey"] .lucide, [data-section="our-journey"] svg, [data-section="our-journey"] .lucide, .our-journey svg, .our-journey .lucide, div[class*="journey"] svg, div[class*="journey"] .lucide, [data-section="blog"] svg, [data-section="blog"] .lucide, .crypto-blog svg, .crypto-blog .lucide, .crypto-blog-page svg, .crypto-blog-page .lucide, .min-h-screen.bg-white div[class*="blog"] svg, .min-h-screen.bg-white div[class*="blog"] .lucide, [data-section="security"] svg, [data-section="security"] .lucide, .security-page svg, .security-page .lucide, .security-page-compressed svg, .security-page-compressed .lucide, .min-h-screen.bg-white div[class*="security"] svg, .min-h-screen.bg-white div[class*="security"] .lucide {
  color: #00d084 !important;
  stroke: #00d084 !important;
  fill: none !important;
}

.lucide-shield, .lucide-book-open, .lucide-users, .lucide-clock, .lucide-calendar, .lucide-star, .lucide-check-circle, .lucide-arrow-right, .lucide-globe, .lucide-zap, .lucide-building, .lucide-rocket, .lucide-mail, .lucide-network, .lucide-lock, .lucide-eye, .lucide-server, .lucide-alert-triangle, .lucide-key, .lucide-award, .lucide-file-check, .lucide-smartphone, .lucide-wifi, .lucide-database, .lucide-wallet, .lucide-refresh-cw, .lucide-hard-drive, .lucide-download, .lucide-external-link, .lucide-alert-circle, .lucide-search, .lucide-heart, .lucide-message-circle, .lucide-share2, .lucide-bookmark, .lucide-chevron-left, .lucide-chevron-right, .lucide-more-horizontal, .lucide-user, .lucide-trending-up, .lucide-sparkles {
  color: #00d084 !important;
  stroke: #00d084 !important;
}

.min-h-screen.bg-white .text-green-600, .min-h-screen.bg-white .w-3.h-3, .min-h-screen.bg-white .w-4.h-4, .min-h-screen.bg-white .w-5.h-5, .min-h-screen.bg-white .w-6.h-6, .min-h-screen.bg-white .w-8.h-8, .min-h-screen.bg-white .w-10.h-10, .min-h-screen.bg-white .w-12.h-12 {
  color: #00d084 !important;
}

.journey-page svg, .journey-page .lucide, div[class*="journey"] .w-3, div[class*="journey"] .w-4, div[class*="journey"] .w-5, div[class*="journey"] .h-3, div[class*="journey"] .h-4, div[class*="journey"] .h-5, .min-h-screen.bg-white .crypto-blog svg, .min-h-screen.bg-white .crypto-blog .lucide, .crypto-blog-page .w-3, .crypto-blog-page .w-4, .crypto-blog-page .w-5, .crypto-blog-page .h-3, .crypto-blog-page .h-4, .crypto-blog-page .h-5, .security-page .text-green-600, .security-page-compressed .text-green-600, .security-page .w-3, .security-page .w-4, .security-page .w-5, .security-page .w-6, .security-page .w-8, .security-page .w-9, .security-page .w-10, .security-page .w-12, .security-page .h-3, .security-page .h-4, .security-page .h-5, .security-page .h-6, .security-page .h-8, .security-page .h-9, .security-page .h-10, .security-page .h-12, [data-section="about"] [class*="w-"][class*="h-"], [data-section="journey"] [class*="w-"][class*="h-"], [data-section="our-journey"] [class*="w-"][class*="h-"], [data-section="blog"] [class*="w-"][class*="h-"], [data-section="security"] [class*="w-"][class*="h-"], .about-us [class*="w-"][class*="h-"], .our-journey [class*="w-"][class*="h-"], .crypto-blog [class*="w-"][class*="h-"], .crypto-blog-page [class*="w-"][class*="h-"], .security-page [class*="w-"][class*="h-"], .security-page-compressed [class*="w-"][class*="h-"] {
  color: #00d084 !important;
  stroke: #00d084 !important;
}

[data-section="about"] [data-lucide], [data-section="journey"] [data-lucide], [data-section="our-journey"] [data-lucide], [data-section="blog"] [data-lucide], [data-section="security"] [data-lucide], .about-us [data-lucide], .our-journey [data-lucide], .crypto-blog [data-lucide], .crypto-blog-page [data-lucide], .security-page [data-lucide], .security-page-compressed [data-lucide] {
  color: #00d084 !important;
  stroke: #00d084 !important;
  fill: none !important;
}

[data-section="about"] .text-primary, [data-section="journey"] .text-primary, [data-section="our-journey"] .text-primary, [data-section="blog"] .text-primary, [data-section="security"] .text-primary, [data-section="about"] .text-accent, [data-section="journey"] .text-accent, [data-section="our-journey"] .text-accent, [data-section="blog"] .text-accent, [data-section="security"] .text-accent {
  color: #00d084 !important;
}

[data-section="about"] .w-3.h-3, [data-section="journey"] .w-3.h-3, [data-section="our-journey"] .w-3.h-3, [data-section="blog"] .w-3.h-3, [data-section="security"] .w-3.h-3, [data-section="about"] .w-4.h-4, [data-section="journey"] .w-4.h-4, [data-section="our-journey"] .w-4.h-4, [data-section="blog"] .w-4.h-4, [data-section="security"] .w-4.h-4, [data-section="about"] .w-5.h-5, [data-section="journey"] .w-5.h-5, [data-section="our-journey"] .w-5.h-5, [data-section="blog"] .w-5.h-5, [data-section="security"] .w-5.h-5 {
  color: #00d084 !important;
  stroke: #00d084 !important;
}

.platform-benefits-icon-container, .platform-benefits-icon-container .platform-benefits-icon, div[class*="w-16"][class*="h-16"][class*="bg-gradient-to-br"] svg, div[class*="w-16"][class*="h-16"][class*="from-green-500"] svg, div[class*="bg-gradient-to-br from-green-500 to-green-600"] svg, .device-features svg {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  stroke-width: 2.5px !important;
  display: block !important;
}

.platform-benefits-icon-container {
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
  display: flex !important;
  position: relative !important;
  overflow: visible !important;
}

.platform-benefits-icon-container svg, .platform-benefits-icon-container .lucide, .platform-benefits-icon-container .platform-benefits-icon {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin: 0 !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.platform-benefits-icon-container div[class*="absolute inset-0"] {
  justify-content: center !important;
  align-items: center !important;
  display: flex !important;
  position: absolute !important;
  inset: 0 !important;
}

.platform-benefits-icon-container div[class*="absolute inset-0"] span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  font-weight: 900 !important;
}

.w-16.h-16.bg-gradient-to-br.from-green-500.to-green-600 {
  justify-content: center !important;
  align-items: center !important;
  display: flex !important;
  position: relative !important;
}

.w-16.h-16.bg-gradient-to-br.from-green-500.to-green-600 svg, .w-16.h-16.bg-gradient-to-br.from-green-500.to-green-600 .lucide {
  color: #fff !important;
  stroke: #fff !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.platform-benefits-icon-container {
  position: relative !important;
  overflow: visible !important;
}

.platform-benefits-icon {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  stroke-width: 2.5px !important;
  filter: drop-shadow(0 1px 2px #0003) !important;
  -webkit-text-fill-color: #fff !important;
  z-index: 10 !important;
  width: 2rem !important;
  height: 2rem !important;
  display: block !important;
  position: relative !important;
}

.platform-stats-icon-container, div[class*="w-12"][class*="h-12"][class*="bg-gradient"] {
  position: relative !important;
  overflow: visible !important;
}

.platform-stats-icon, div[class*="w-12"][class*="h-12"][class*="bg-gradient"] svg, div[class*="w-12"][class*="h-12"][class*="bg-gradient"] .lucide {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  stroke-width: 2.5px !important;
  filter: drop-shadow(0 1px 2px #0003) !important;
  -webkit-text-fill-color: #fff !important;
  z-index: 10 !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  display: block !important;
  position: relative !important;
}

.mobile-mockup-section .w-12.h-12 svg, .mobile-mockup-section .w-12.h-12 .lucide, section .grid .w-12.h-12 svg, section .grid .w-12.h-12 .lucide {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  stroke-width: 2.5px !important;
  display: block !important;
}

div[class*="bg-gradient-to-br from-green-"], div[class*="bg-gradient-to-br from-blue-"], div[class*="bg-gradient-to-br from-purple-"], div[class*="bg-gradient-to-br from-orange-"], div[class*="bg-gradient-to-br from-red-"], div[class*="bg-gradient-to-br from-yellow-"] {
  position: relative !important;
  overflow: visible !important;
}

div[class*="bg-gradient-to-br from-green-"] svg, div[class*="bg-gradient-to-br from-blue-"] svg, div[class*="bg-gradient-to-br from-purple-"] svg, div[class*="bg-gradient-to-br from-orange-"] svg, div[class*="bg-gradient-to-br from-red-"] svg, div[class*="bg-gradient-to-br from-yellow-"] svg, div[class*="bg-gradient-to-br from-green-"] .lucide, div[class*="bg-gradient-to-br from-blue-"] .lucide, div[class*="bg-gradient-to-br from-purple-"] .lucide, div[class*="bg-gradient-to-br from-orange-"] .lucide, div[class*="bg-gradient-to-br from-red-"] .lucide, div[class*="bg-gradient-to-br from-yellow-"] .lucide {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  stroke-width: 2.5px !important;
  filter: drop-shadow(0 1px 2px #0003) !important;
  -webkit-text-fill-color: #fff !important;
  z-index: 10 !important;
  display: block !important;
  position: relative !important;
}

.lucide-trending-up, .lucide-users, .lucide-circle-dollar-sign, .lucide-check-circle, .lucide-activity, .lucide-bar-chart-3, .lucide-cpu, .lucide-target {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  stroke-width: 2.5px !important;
  display: block !important;
}

.glass-card .lucide-cpu, .glass-card .lucide-target, .glass-card .lucide-trending-up, div[class*="bg-gradient-to-br"] .lucide-cpu, div[class*="bg-gradient-to-br"] .lucide-target, div[class*="bg-gradient-to-br"] .lucide-trending-up {
  opacity: 1 !important;
  visibility: visible !important;
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  stroke-width: 2px !important;
  z-index: 10 !important;
  display: block !important;
  position: relative !important;
}

div[class*="from-green-500"][class*="to-emerald-500"] .lucide-trending-up, .text-green-400 ~ div .lucide-trending-up {
  opacity: 1 !important;
  visibility: visible !important;
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  stroke-width: 2.5px !important;
  display: block !important;
}

h3:contains("Profit Optimization") ~ div .lucide-trending-up {
  opacity: 1 !important;
  visibility: visible !important;
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  stroke-width: 2.5px !important;
  display: block !important;
}

div[class*="w-12"][class*="h-12"][class*="rounded-full"] svg, div[class*="w-12"][class*="h-12"][class*="rounded-full"] .lucide {
  opacity: 1 !important;
  visibility: visible !important;
  margin: auto !important;
  display: block !important;
}

.platform-stats-icon-container svg, .platform-benefits-icon-container svg, .platform-stats-icon-container .lucide, .platform-benefits-icon-container .lucide {
  opacity: 1 !important;
  visibility: visible !important;
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  z-index: 15 !important;
  display: block !important;
  position: relative !important;
}

.platform-benefits-icon-container .platform-benefits-icon, .platform-benefits-icon-container svg {
  opacity: 1 !important;
  visibility: visible !important;
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  display: block !important;
}

div[class*="bg-gradient-to-br from-green-500 to-green-600"] .lucide, div[class*="w-16 h-16"][class*="bg-gradient"] .lucide {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
}

.platform-benefits .w-8.h-8 {
  color: #fff !important;
  stroke: #fff !important;
  fill: #fff !important;
  opacity: 1 !important;
}

h4:contains("Platform Benefits") + * svg {
  color: #fff !important;
  stroke: #fff !important;
  fill: #fff !important;
  opacity: 1 !important;
}

h4:contains("Platform Benefits") ~ * svg {
  color: #fff !important;
  stroke: #fff !important;
  fill: #fff !important;
  opacity: 1 !important;
}

div[class*="platform-benefits"] svg, div[class*="device-features"] svg, .flex.items-start.gap-4 .w-16.h-16 svg {
  color: #fff !important;
  stroke: #fff !important;
  fill: #fff !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.lucide-shield, .lucide-zap, .lucide-monitor, .lucide-globe, .lucide-refresh-cw {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  opacity: 1 !important;
}

div[class*="bg-gradient-to-br from-green-500 to-green-600"] span[class*="text-2xl"], div[class*="bg-gradient-to-br from-green-500 to-green-600"] span[class*="font-bold"], div[class*="bg-gradient-to-br from-green-500 to-green-600"] span.text-2xl, div[class*="bg-gradient-to-br from-green-500 to-green-600"] span.font-bold {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  text-shadow: none !important;
  font-weight: 900 !important;
}

div[class*="bg-gradient-to-br from-green-500 to-green-600"] *, div[class*="bg-gradient-to-br"][class*="from-green-500"] * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  opacity: 1 !important;
}

.min-h-screen .space-y-3:has(h4:contains("Platform Benefits")) .w-16.h-16 svg {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  stroke-width: 2px !important;
}

.min-h-screen .space-y-3:has(h4:contains("Platform Benefits")) .w-16.h-16 .lucide {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  stroke-width: 2px !important;
}

.min-h-screen .space-y-3:has(h4:contains("Platform Benefits")) .w-16.h-16 span {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  stroke-width: 2px !important;
}

div[style*="background: linear-gradient"][style*="green"] svg, div[class*="bg-gradient-to-br"][class*="green"] svg, div[class*="bg-gradient-to-br from-green-500 to-green-600"] svg, div[class*="bg-gradient-to-br from-green-500 to-green-600"] .lucide, div[class*="bg-gradient-to-br from-green-500 to-green-600"] span {
  color: #fff !important;
  stroke: #fff !important;
  fill: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  text-shadow: none !important;
  filter: drop-shadow(0 1px 2px #0003) !important;
}

.device-features svg, .device-features .lucide, .device-features span[class*="text-2xl"] {
  color: #fff !important;
  stroke: #fff !important;
  fill: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

h4:contains("Platform Benefits") ~ * svg {
  color: #fff !important;
  stroke: #fff !important;
  fill: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

h4:contains("Platform Benefits") ~ * .lucide {
  color: #fff !important;
  stroke: #fff !important;
  fill: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

h4:contains("Platform Benefits") ~ * span[class*="text-2xl"] {
  color: #fff !important;
  stroke: #fff !important;
  fill: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

div[class*="w-16 h-16"][class*="bg-gradient"] svg, div[class*="w-16 h-16"][class*="bg-gradient"] .lucide, div[class*="w-16 h-16"][class*="bg-gradient"] span, .flex.items-start.gap-4 .w-16.h-16 svg, .flex.items-start.gap-4 .w-16.h-16 .lucide, .flex.items-start.gap-4 .w-16.h-16 span {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  stroke-width: 2px !important;
}

div[class*="bg-gradient-to-br from-green-500 to-green-600"] .lucide-shield, div[class*="bg-gradient-to-br from-green-500 to-green-600"] .lucide-zap, div[class*="bg-gradient-to-br from-green-500 to-green-600"] .lucide-globe, div[class*="bg-gradient-to-br from-green-500 to-green-600"] .lucide-refresh-cw, div[class*="bg-gradient-to-br from-green-500 to-green-600"] .lucide-monitor {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  opacity: 1 !important;
  stroke-width: 2px !important;
}

.device-features .w-16.h-16 svg, .device-features .w-16.h-16 .lucide, div[class*="bg-gradient-to-br"][class*="from-green-500"] svg, div[class*="bg-gradient-to-br"][class*="from-green-500"] .lucide {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  stroke-width: 2px !important;
  filter: none !important;
}

h4:contains("Platform Benefits") ~ * .w-16.h-16 svg {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  stroke-width: 2px !important;
  filter: none !important;
}

h4:contains("Platform Benefits") ~ * .w-16.h-16 .lucide {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  stroke-width: 2px !important;
  filter: none !important;
}

.lucide-globe, svg[data-lucide="globe"], div[class*="bg-gradient-to-br from-green-500 to-green-600"] .lucide-globe {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  opacity: 1 !important;
  stroke-width: 2.5px !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
}

[data-section="trading-pro"] svg, [data-section="trading-pro"] .lucide, .advanced-trading-dashboard svg, .advanced-trading-dashboard .lucide {
  opacity: 1 !important;
  filter: none !important;
}

.min-h-screen:has(h1:contains("Advanced Trading Dashboard")) svg {
  opacity: 1 !important;
  filter: none !important;
}

.min-h-screen:has(h1:contains("Advanced Trading Dashboard")) .lucide {
  opacity: 1 !important;
  filter: none !important;
}

:is(.min-h-screen:has(h1:contains("Advanced Trading Dashboard")) .w-10.h-10, [data-section="trading-pro"] .w-10.h-10, .glass-card .w-10.h-10) {
  opacity: 1 !important;
  filter: none !important;
  color: currentColor !important;
}

:is(.min-h-screen:has(h1:contains("Advanced Trading Dashboard")) .text-primary, .min-h-screen:has(h1:contains("Advanced Trading Dashboard")) .text-accent, .min-h-screen:has(h1:contains("Advanced Trading Dashboard")) .text-warning, .min-h-screen:has(h1:contains("Advanced Trading Dashboard")) .text-purple-400) {
  opacity: 1 !important;
  filter: none !important;
}

.glass-card .lucide-dollar-sign, .glass-card .lucide-bar-chart-3, .glass-card .lucide-target, .glass-card .lucide-pie-chart, .glass-card .lucide-trending-up, .glass-card .lucide-trending-down {
  opacity: 1 !important;
  stroke: currentColor !important;
  fill: none !important;
}

div:has(.text-2xl.font-bold) + .lucide, div:has(.text-2xl.font-bold) ~ .lucide, .card-content .w-10.h-10.lucide {
  opacity: 1 !important;
  color: currentColor !important;
}

:root {
  --page-icon-green: #00d084;
  --page-icon-green-hover: #00c77c;
}

.min-h-screen.bg-white:has(h1:contains("About Us")) svg {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
  fill: none !important;
}

.min-h-screen.bg-white:has(h1:contains("About Us")) .lucide, .min-h-screen.bg-white:has(h1:contains("About Us")) .w-3.h-3, .min-h-screen.bg-white:has(h1:contains("About Us")) .w-4.h-4, .min-h-screen.bg-white:has(h1:contains("About Us")) .w-5.h-5, .min-h-screen.bg-white:has(h1:contains("About Us")) .w-6.h-6, .min-h-screen.bg-white:has(h1:contains("About Us")) .w-8.h-8, .min-h-screen.bg-white:has(h1:contains("About Us")) .w-10.h-10, .min-h-screen.bg-white:has(h1:contains("About Us")) .w-12.h-12 {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
}

.min-h-screen.bg-white:has(h1:contains("About Us")) .text-green-600, .min-h-screen.bg-white:has(h1:contains("About Us")) .text-green-500, .min-h-screen.bg-white:has(h1:contains("About Us")) .text-green-400 {
  color: var(--page-icon-green) !important;
}

div:has(h1:contains("About Us")) svg {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
  fill: none !important;
}

div:has(h1:contains("About Us")) .lucide, div:has(h1:contains("About Us")) .w-3.h-3, div:has(h1:contains("About Us")) .w-4.h-4, div:has(h1:contains("About Us")) .w-5.h-5, div:has(h1:contains("About Us")) .w-6.h-6, div:has(h1:contains("About Us")) .w-8.h-8, div:has(h1:contains("About Us")) .w-10.h-10, div:has(h1:contains("About Us")) .w-12.h-12 {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
}

div:has(h1:contains("About Us")) .text-green-600, div:has(h1:contains("About Us")) .text-green-500, div:has(h1:contains("About Us")) .text-green-400 {
  color: var(--page-icon-green) !important;
}

:is([data-section="about"], [data-page="about"], .about-us, .about-us-page) svg {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
  fill: none !important;
}

:is([data-section="about"], [data-page="about"], .about-us, .about-us-page) .lucide, :is([data-section="about"], [data-page="about"], .about-us, .about-us-page) .w-3.h-3, :is([data-section="about"], [data-page="about"], .about-us, .about-us-page) .w-4.h-4, :is([data-section="about"], [data-page="about"], .about-us, .about-us-page) .w-5.h-5, :is([data-section="about"], [data-page="about"], .about-us, .about-us-page) .w-6.h-6, :is([data-section="about"], [data-page="about"], .about-us, .about-us-page) .w-8.h-8, :is([data-section="about"], [data-page="about"], .about-us, .about-us-page) .w-10.h-10, :is([data-section="about"], [data-page="about"], .about-us, .about-us-page) .w-12.h-12 {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
}

:is([data-section="about"], [data-page="about"], .about-us, .about-us-page) .text-green-600, :is([data-section="about"], [data-page="about"], .about-us, .about-us-page) .text-green-500, :is([data-section="about"], [data-page="about"], .about-us, .about-us-page) .text-green-400 {
  color: var(--page-icon-green) !important;
}

div:has(h1:contains("Our Journey")) svg {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
  fill: none !important;
}

div:has(h1:contains("Our Journey")) .lucide, div:has(h1:contains("Our Journey")) .w-3.h-3, div:has(h1:contains("Our Journey")) .w-4.h-4, div:has(h1:contains("Our Journey")) .w-5.h-5, div:has(h1:contains("Our Journey")) .w-6.h-6, div:has(h1:contains("Our Journey")) .w-8.h-8, div:has(h1:contains("Our Journey")) .w-10.h-10, div:has(h1:contains("Our Journey")) .w-12.h-12, div:has(h1:contains("Our Journey")) .w-16.h-16 {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
}

div:has(h1:contains("Our Journey")) .text-primary, div:has(h1:contains("Our Journey")) .text-accent {
  color: var(--page-icon-green) !important;
}

div:has(h1:contains("Journey")) svg {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
  fill: none !important;
}

div:has(h1:contains("Journey")) .lucide, div:has(h1:contains("Journey")) .w-3.h-3, div:has(h1:contains("Journey")) .w-4.h-4, div:has(h1:contains("Journey")) .w-5.h-5, div:has(h1:contains("Journey")) .w-6.h-6, div:has(h1:contains("Journey")) .w-8.h-8, div:has(h1:contains("Journey")) .w-10.h-10, div:has(h1:contains("Journey")) .w-12.h-12, div:has(h1:contains("Journey")) .w-16.h-16 {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
}

div:has(h1:contains("Journey")) .text-primary, div:has(h1:contains("Journey")) .text-accent {
  color: var(--page-icon-green) !important;
}

:is([data-section="journey"], [data-section="our-journey"], [data-page="journey"], [data-page="our-journey"], .our-journey, .journey-page) svg {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
  fill: none !important;
}

:is([data-section="journey"], [data-section="our-journey"], [data-page="journey"], [data-page="our-journey"], .our-journey, .journey-page) .lucide, :is([data-section="journey"], [data-section="our-journey"], [data-page="journey"], [data-page="our-journey"], .our-journey, .journey-page) .w-3.h-3, :is([data-section="journey"], [data-section="our-journey"], [data-page="journey"], [data-page="our-journey"], .our-journey, .journey-page) .w-4.h-4, :is([data-section="journey"], [data-section="our-journey"], [data-page="journey"], [data-page="our-journey"], .our-journey, .journey-page) .w-5.h-5, :is([data-section="journey"], [data-section="our-journey"], [data-page="journey"], [data-page="our-journey"], .our-journey, .journey-page) .w-6.h-6, :is([data-section="journey"], [data-section="our-journey"], [data-page="journey"], [data-page="our-journey"], .our-journey, .journey-page) .w-8.h-8, :is([data-section="journey"], [data-section="our-journey"], [data-page="journey"], [data-page="our-journey"], .our-journey, .journey-page) .w-10.h-10, :is([data-section="journey"], [data-section="our-journey"], [data-page="journey"], [data-page="our-journey"], .our-journey, .journey-page) .w-12.h-12, :is([data-section="journey"], [data-section="our-journey"], [data-page="journey"], [data-page="our-journey"], .our-journey, .journey-page) .w-16.h-16 {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
}

:is([data-section="journey"], [data-section="our-journey"], [data-page="journey"], [data-page="our-journey"], .our-journey, .journey-page) .text-primary, :is([data-section="journey"], [data-section="our-journey"], [data-page="journey"], [data-page="our-journey"], .our-journey, .journey-page) .text-accent {
  color: var(--page-icon-green) !important;
}

.min-h-screen.bg-white:has(h1:contains("Blog")) svg {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
  fill: none !important;
}

.min-h-screen.bg-white:has(h1:contains("Blog")) .lucide, .min-h-screen.bg-white:has(h1:contains("Blog")) .w-3.h-3, .min-h-screen.bg-white:has(h1:contains("Blog")) .w-4.h-4, .min-h-screen.bg-white:has(h1:contains("Blog")) .w-5.h-5, .min-h-screen.bg-white:has(h1:contains("Blog")) .w-6.h-6, .min-h-screen.bg-white:has(h1:contains("Blog")) .w-8.h-8, .min-h-screen.bg-white:has(h1:contains("Blog")) .w-10.h-10, .min-h-screen.bg-white:has(h1:contains("Blog")) .w-12.h-12, .min-h-screen.bg-white:has(h1:contains("Blog")) .lucide-search, .min-h-screen.bg-white:has(h1:contains("Blog")) .lucide-calendar, .min-h-screen.bg-white:has(h1:contains("Blog")) .lucide-clock, .min-h-screen.bg-white:has(h1:contains("Blog")) .lucide-user, .min-h-screen.bg-white:has(h1:contains("Blog")) .lucide-book-open, .min-h-screen.bg-white:has(h1:contains("Blog")) .lucide-heart, .min-h-screen.bg-white:has(h1:contains("Blog")) .lucide-message-circle, .min-h-screen.bg-white:has(h1:contains("Blog")) .lucide-star, .min-h-screen.bg-white:has(h1:contains("Blog")) .lucide-bookmark {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
}

.min-h-screen.bg-white:has(h1:contains("Knowledge Center")) svg {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
  fill: none !important;
}

.min-h-screen.bg-white:has(h1:contains("Knowledge Center")) .lucide, .min-h-screen.bg-white:has(h1:contains("Knowledge Center")) .w-3.h-3, .min-h-screen.bg-white:has(h1:contains("Knowledge Center")) .w-4.h-4, .min-h-screen.bg-white:has(h1:contains("Knowledge Center")) .w-5.h-5, .min-h-screen.bg-white:has(h1:contains("Knowledge Center")) .w-6.h-6, .min-h-screen.bg-white:has(h1:contains("Knowledge Center")) .w-8.h-8, .min-h-screen.bg-white:has(h1:contains("Knowledge Center")) .w-10.h-10, .min-h-screen.bg-white:has(h1:contains("Knowledge Center")) .w-12.h-12, .min-h-screen.bg-white:has(h1:contains("Knowledge Center")) .lucide-search, .min-h-screen.bg-white:has(h1:contains("Knowledge Center")) .lucide-calendar, .min-h-screen.bg-white:has(h1:contains("Knowledge Center")) .lucide-clock, .min-h-screen.bg-white:has(h1:contains("Knowledge Center")) .lucide-user, .min-h-screen.bg-white:has(h1:contains("Knowledge Center")) .lucide-book-open, .min-h-screen.bg-white:has(h1:contains("Knowledge Center")) .lucide-heart, .min-h-screen.bg-white:has(h1:contains("Knowledge Center")) .lucide-message-circle, .min-h-screen.bg-white:has(h1:contains("Knowledge Center")) .lucide-star, .min-h-screen.bg-white:has(h1:contains("Knowledge Center")) .lucide-bookmark {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
}

div:has(h1:contains("Crypto Knowledge Center")) svg {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
  fill: none !important;
}

div:has(h1:contains("Crypto Knowledge Center")) .lucide, div:has(h1:contains("Crypto Knowledge Center")) .w-3.h-3, div:has(h1:contains("Crypto Knowledge Center")) .w-4.h-4, div:has(h1:contains("Crypto Knowledge Center")) .w-5.h-5, div:has(h1:contains("Crypto Knowledge Center")) .w-6.h-6, div:has(h1:contains("Crypto Knowledge Center")) .w-8.h-8, div:has(h1:contains("Crypto Knowledge Center")) .w-10.h-10, div:has(h1:contains("Crypto Knowledge Center")) .w-12.h-12, div:has(h1:contains("Crypto Knowledge Center")) .lucide-search, div:has(h1:contains("Crypto Knowledge Center")) .lucide-calendar, div:has(h1:contains("Crypto Knowledge Center")) .lucide-clock, div:has(h1:contains("Crypto Knowledge Center")) .lucide-user, div:has(h1:contains("Crypto Knowledge Center")) .lucide-book-open, div:has(h1:contains("Crypto Knowledge Center")) .lucide-heart, div:has(h1:contains("Crypto Knowledge Center")) .lucide-message-circle, div:has(h1:contains("Crypto Knowledge Center")) .lucide-star, div:has(h1:contains("Crypto Knowledge Center")) .lucide-bookmark {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
}

:is([data-section="blog"], [data-page="blog"], .crypto-blog, .crypto-blog-page, .blog-page) svg {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
  fill: none !important;
}

:is([data-section="blog"], [data-page="blog"], .crypto-blog, .crypto-blog-page, .blog-page) .lucide, :is([data-section="blog"], [data-page="blog"], .crypto-blog, .crypto-blog-page, .blog-page) .w-3.h-3, :is([data-section="blog"], [data-page="blog"], .crypto-blog, .crypto-blog-page, .blog-page) .w-4.h-4, :is([data-section="blog"], [data-page="blog"], .crypto-blog, .crypto-blog-page, .blog-page) .w-5.h-5, :is([data-section="blog"], [data-page="blog"], .crypto-blog, .crypto-blog-page, .blog-page) .w-6.h-6, :is([data-section="blog"], [data-page="blog"], .crypto-blog, .crypto-blog-page, .blog-page) .w-8.h-8, :is([data-section="blog"], [data-page="blog"], .crypto-blog, .crypto-blog-page, .blog-page) .w-10.h-10, :is([data-section="blog"], [data-page="blog"], .crypto-blog, .crypto-blog-page, .blog-page) .w-12.h-12, :is([data-section="blog"], [data-page="blog"], .crypto-blog, .crypto-blog-page, .blog-page) .lucide-search, :is([data-section="blog"], [data-page="blog"], .crypto-blog, .crypto-blog-page, .blog-page) .lucide-calendar, :is([data-section="blog"], [data-page="blog"], .crypto-blog, .crypto-blog-page, .blog-page) .lucide-clock, :is([data-section="blog"], [data-page="blog"], .crypto-blog, .crypto-blog-page, .blog-page) .lucide-user, :is([data-section="blog"], [data-page="blog"], .crypto-blog, .crypto-blog-page, .blog-page) .lucide-book-open, :is([data-section="blog"], [data-page="blog"], .crypto-blog, .crypto-blog-page, .blog-page) .lucide-heart, :is([data-section="blog"], [data-page="blog"], .crypto-blog, .crypto-blog-page, .blog-page) .lucide-message-circle, :is([data-section="blog"], [data-page="blog"], .crypto-blog, .crypto-blog-page, .blog-page) .lucide-star, :is([data-section="blog"], [data-page="blog"], .crypto-blog, .crypto-blog-page, .blog-page) .lucide-bookmark {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
}

.min-h-screen.bg-white:has(h1:contains("Security")) svg {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
  fill: none !important;
}

.min-h-screen.bg-white:has(h1:contains("Security")) .lucide, .min-h-screen.bg-white:has(h1:contains("Security")) .w-3.h-3, .min-h-screen.bg-white:has(h1:contains("Security")) .w-4.h-4, .min-h-screen.bg-white:has(h1:contains("Security")) .w-5.h-5, .min-h-screen.bg-white:has(h1:contains("Security")) .w-6.h-6, .min-h-screen.bg-white:has(h1:contains("Security")) .w-8.h-8, .min-h-screen.bg-white:has(h1:contains("Security")) .w-9.h-9, .min-h-screen.bg-white:has(h1:contains("Security")) .w-10.h-10, .min-h-screen.bg-white:has(h1:contains("Security")) .w-12.h-12, .min-h-screen.bg-white:has(h1:contains("Security")) .lucide-shield, .min-h-screen.bg-white:has(h1:contains("Security")) .lucide-lock, .min-h-screen.bg-white:has(h1:contains("Security")) .lucide-key, .min-h-screen.bg-white:has(h1:contains("Security")) .lucide-eye, .min-h-screen.bg-white:has(h1:contains("Security")) .lucide-server, .min-h-screen.bg-white:has(h1:contains("Security")) .lucide-database, .min-h-screen.bg-white:has(h1:contains("Security")) .lucide-wallet, .min-h-screen.bg-white:has(h1:contains("Security")) .lucide-check-circle {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
}

div:has(h1:contains("Non-Custodial")) svg {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
  fill: none !important;
}

div:has(h1:contains("Non-Custodial")) .lucide, div:has(h1:contains("Non-Custodial")) .w-3.h-3, div:has(h1:contains("Non-Custodial")) .w-4.h-4, div:has(h1:contains("Non-Custodial")) .w-5.h-5, div:has(h1:contains("Non-Custodial")) .w-6.h-6, div:has(h1:contains("Non-Custodial")) .w-8.h-8, div:has(h1:contains("Non-Custodial")) .w-9.h-9, div:has(h1:contains("Non-Custodial")) .w-10.h-10, div:has(h1:contains("Non-Custodial")) .w-12.h-12, div:has(h1:contains("Non-Custodial")) .lucide-shield, div:has(h1:contains("Non-Custodial")) .lucide-lock, div:has(h1:contains("Non-Custodial")) .lucide-key, div:has(h1:contains("Non-Custodial")) .lucide-eye, div:has(h1:contains("Non-Custodial")) .lucide-server, div:has(h1:contains("Non-Custodial")) .lucide-database, div:has(h1:contains("Non-Custodial")) .lucide-wallet, div:has(h1:contains("Non-Custodial")) .lucide-check-circle {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
}

:is([data-section="security"], [data-page="security"], .security-page, .security-page-compressed) svg {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
  fill: none !important;
}

:is([data-section="security"], [data-page="security"], .security-page, .security-page-compressed) .lucide, :is([data-section="security"], [data-page="security"], .security-page, .security-page-compressed) .w-3.h-3, :is([data-section="security"], [data-page="security"], .security-page, .security-page-compressed) .w-4.h-4, :is([data-section="security"], [data-page="security"], .security-page, .security-page-compressed) .w-5.h-5, :is([data-section="security"], [data-page="security"], .security-page, .security-page-compressed) .w-6.h-6, :is([data-section="security"], [data-page="security"], .security-page, .security-page-compressed) .w-8.h-8, :is([data-section="security"], [data-page="security"], .security-page, .security-page-compressed) .w-9.h-9, :is([data-section="security"], [data-page="security"], .security-page, .security-page-compressed) .w-10.h-10, :is([data-section="security"], [data-page="security"], .security-page, .security-page-compressed) .w-12.h-12, :is([data-section="security"], [data-page="security"], .security-page, .security-page-compressed) .lucide-shield, :is([data-section="security"], [data-page="security"], .security-page, .security-page-compressed) .lucide-lock, :is([data-section="security"], [data-page="security"], .security-page, .security-page-compressed) .lucide-key, :is([data-section="security"], [data-page="security"], .security-page, .security-page-compressed) .lucide-eye, :is([data-section="security"], [data-page="security"], .security-page, .security-page-compressed) .lucide-server, :is([data-section="security"], [data-page="security"], .security-page, .security-page-compressed) .lucide-database, :is([data-section="security"], [data-page="security"], .security-page, .security-page-compressed) .lucide-wallet, :is([data-section="security"], [data-page="security"], .security-page, .security-page-compressed) .lucide-check-circle {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
}

[data-section="about"] .lucide-shield, [data-section="about"] .lucide-users, [data-section="about"] .lucide-clock, [data-section="about"] .lucide-check-circle, [data-section="about"] .lucide-building, [data-section="about"] .lucide-mail, [data-section="about"] .lucide-rocket, [data-section="about"] .lucide-arrow-right, [data-section="journey"] .lucide-calendar, [data-section="journey"] .lucide-sparkles, [data-section="journey"] .lucide-star, [data-section="journey"] .lucide-award, [data-section="journey"] .lucide-arrow-right, [data-section="blog"] .lucide-book-open, [data-section="blog"] .lucide-search, [data-section="blog"] .lucide-calendar, [data-section="blog"] .lucide-clock, [data-section="blog"] .lucide-user, [data-section="blog"] .lucide-heart, [data-section="blog"] .lucide-message-circle, [data-section="blog"] .lucide-star, [data-section="blog"] .lucide-bookmark, [data-section="security"] .lucide-shield, [data-section="security"] .lucide-lock, [data-section="security"] .lucide-eye, [data-section="security"] .lucide-server, [data-section="security"] .lucide-key, [data-section="security"] .lucide-database, [data-section="security"] .lucide-wallet, [data-section="security"] .lucide-check-circle, [data-section="security"] .lucide-alert-triangle {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
  fill: none !important;
}

[data-section="about"] svg:hover, [data-section="journey"] svg:hover, [data-section="blog"] svg:hover, [data-section="security"] svg:hover, [data-section="about"] .lucide:hover, [data-section="journey"] .lucide:hover, [data-section="blog"] .lucide:hover, [data-section="security"] .lucide:hover {
  color: var(--page-icon-green-hover) !important;
  stroke: var(--page-icon-green-hover) !important;
  transition: all .2s !important;
  transform: scale(1.05) !important;
}

.about-us .UsersSvg, .about-us .ShieldSvg, .about-us .ClockSvg, .about-us .CheckCircleSvg, .about-us .BuildingSvg, .about-us .MailSvg, .about-us .RocketSvg, .about-us .ArrowRightSvg, .about-us .NetworkSvg, .our-journey .CalendarSvg, .our-journey .SparklesSvg, .our-journey .StarSvg, .our-journey .AwardSvg, .crypto-blog .BookOpenSvg, .crypto-blog .SearchSvg, .crypto-blog .CalendarSvg, .crypto-blog .ClockSvg, .crypto-blog .UserSvg, .crypto-blog .HeartSvg, .crypto-blog .MessageCircleSvg, .security-page .ShieldSvg, .security-page .LockSvg, .security-page .EyeSvg, .security-page .ServerSvg, .security-page .KeySvg, .security-page .DatabaseSvg, .security-page .WalletSvg, [data-section="about"] .card svg, [data-section="about"] .glass-card svg, [data-section="about"] .card-content svg, [data-section="journey"] .card svg, [data-section="journey"] .glass-card svg, [data-section="blog"] .card svg, [data-section="blog"] .glass-card svg, [data-section="security"] .card svg, [data-section="security"] .glass-card svg {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
}

[data-section="about"] svg[stroke="white"], [data-section="about"] svg[stroke="#ffffff"], [data-section="about"] svg[stroke="currentColor"], [data-section="journey"] svg[stroke="white"], [data-section="journey"] svg[stroke="#ffffff"], [data-section="journey"] svg[stroke="currentColor"], [data-section="blog"] svg[stroke="white"], [data-section="blog"] svg[stroke="#ffffff"], [data-section="blog"] svg[stroke="currentColor"], [data-section="security"] svg[stroke="white"], [data-section="security"] svg[stroke="#ffffff"], [data-section="security"] svg[stroke="currentColor"] {
  stroke: var(--page-icon-green) !important;
  color: var(--page-icon-green) !important;
}

.min-h-screen.bg-white svg, .min-h-screen.bg-white .lucide {
  color: var(--page-icon-green) !important;
  stroke: var(--page-icon-green) !important;
}

.nav-container svg, .nav-container .lucide, .crypto-ticker-header svg, .crypto-ticker-header .lucide, footer svg, footer .lucide {
  color: initial !important;
  stroke: initial !important;
}

.text-green-600, .text-green-500, .text-green-400 {
  color: var(--page-icon-green) !important;
}

.nav-container .bg-black, .nav-container .bg-gray-900, .nav-container .bg-slate-900, .nav-container .bg-zinc-900, .nav-container [class*="bg-black"], .nav-container [class*="bg-gray-9"], .nav-container [class*="bg-slate-9"], .nav-container [class*="bg-zinc-9"], .force-fixed-header .bg-black, .force-fixed-header .bg-gray-900, .force-fixed-header .bg-slate-900, .force-fixed-header .bg-zinc-900 {
  background: none !important;
}

.nav-container motion-div, .nav-container [data-framer-motion], .nav-container [style*="transform"] {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 100 !important;
  display: block !important;
  position: relative !important;
}

.nav-container .text-2xl, .nav-container .font-black, .nav-container .tracking-tight, .nav-container .exchange-text-glow {
  visibility: visible !important;
  opacity: 1 !important;
  color: #10b981 !important;
  -webkit-text-fill-color: #10b981 !important;
  letter-spacing: -.025em !important;
  z-index: 102 !important;
  background: linear-gradient(135deg, #10b981, #34d399) text !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  display: inline-block !important;
  position: relative !important;
}

.nav-container motion-div.cursor-pointer {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  transform: none !important;
}

.nav-container motion-div .new-logo-container, .nav-container motion-div .exchange-text-glow {
  visibility: visible !important;
  opacity: 1 !important;
  display: inline-block !important;
}

.nav-container .flex.items-center.justify-between > div:first-child {
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  gap: 1rem !important;
  display: flex !important;
}

.nav-container .flex.items-center.gap-4, .nav-container .flex.items-center.gap-4 *, .nav-container motion-div, .nav-container motion-div *, .nav-container .new-logo-container, .nav-container .new-logo-container *, .nav-container .exchange-text-glow {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  position: relative !important;
}

.nav-container .text-2xl.font-black.tracking-tight.exchange-text-glow, span[class*="exchange-text-glow"] {
  visibility: visible !important;
  opacity: 1 !important;
  color: #10b981 !important;
  -webkit-text-fill-color: #10b981 !important;
  letter-spacing: -.025em !important;
  text-shadow: 0 0 15px #10b98199 !important;
  z-index: 999 !important;
  background: linear-gradient(135deg, #10b981, #34d399) text !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  display: inline-block !important;
  position: relative !important;
}

.nav-container span:contains("Changeie") {
  visibility: visible !important;
  opacity: 1 !important;
  color: #10b981 !important;
  -webkit-text-fill-color: #10b981 !important;
  letter-spacing: -.025em !important;
  text-shadow: 0 0 15px #10b98199 !important;
  z-index: 999 !important;
  background: linear-gradient(135deg, #10b981, #34d399) text !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  display: inline-block !important;
  position: relative !important;
}

@supports ((-webkit-background-clip: text)) {
  .nav-container .exchange-text-glow {
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }
}

@media (width <= 1024px) {
  .nav-container .text-xl.font-black.tracking-tight.exchange-text-glow {
    visibility: visible !important;
    opacity: 1 !important;
    color: #10b981 !important;
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    display: inline-block !important;
  }
}

.changeie-logo, [data-logo="changeie"], .nav-container [role="banner"], .nav-container .cursor-pointer.group.exchange-pro-logo {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

motion-div.cursor-pointer.group.exchange-pro-logo, .nav-container motion-div[class*="cursor-pointer"] {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  transform: none !important;
}

.nav-container .flex.items-center.gap-4 * {
  background: none !important;
}

.nav-container .group, .nav-container .relative, .nav-container .inline-block, .nav-container .cursor-pointer {
  box-shadow: none !important;
  background: none !important;
  border: none !important;
  outline: none !important;
}

.nav-container [style*="transform"], .nav-container [class*="motion"] {
  box-shadow: none !important;
  background: none !important;
}

.nav-container .w-full, .nav-container .px-4, .nav-container .px-6, .nav-container .px-8, .nav-container .container, .nav-container .max-w-screen-xl, .nav-container .flex, .nav-container .justify-between, .nav-container .items-center {
  background: none !important;
}

.nav-container, .nav-container *, .force-fixed-header, .force-fixed-header * {
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
  background-image: none !important;
  background-attachment: initial !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: auto !important;
  border: none !important;
}

.nav-container button:hover, .nav-container .nav-item:hover, .nav-container .support-dropdown-trigger:hover, .nav-container .exchange-pro-logo:hover, .nav-container .cursor-pointer:hover, .nav-container .group:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
  background: #00d084 !important;
  border: 1px solid #00c77c !important;
  border-radius: 4px !important;
  outline: none !important;
  padding: .375rem .75rem !important;
  transition: all .2s !important;
  transform: none !important;
  box-shadow: 0 2px 8px #00d08433 !important;
}

.nav-container .lg\\:hidden button:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
  background: #00d084 !important;
  border: 1px solid #00c77c !important;
  border-radius: 4px !important;
  outline: none !important;
  padding: .375rem .75rem !important;
  transition: all .2s !important;
  transform: none !important;
  box-shadow: 0 2px 8px #00d08433 !important;
}

.nav-container button:hover *, .nav-container .nav-item:hover *, .nav-container .support-dropdown-trigger:hover *, .nav-container .exchange-pro-logo:hover *, .nav-container .cursor-pointer:hover *, .nav-container .group:hover * {
  background: inherit !important;
  background-color: inherit !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border: none !important;
  transform: none !important;
}

.nav-container .lg\\:hidden button:hover * {
  background: inherit !important;
  background-color: inherit !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border: none !important;
  transform: none !important;
}

.nav-container *, .nav-container :hover, .nav-container :active, .nav-container :focus, .force-fixed-header *, .force-fixed-header :hover, .force-fixed-header :active, .force-fixed-header :focus {
  transform: none !important;
}

.nav-container .nav-item, .nav-container .nav-item:hover, .nav-container button, .nav-container button:hover, .nav-container .support-dropdown-trigger, .nav-container .support-dropdown-trigger:hover, .nav-container .exchange-pro-logo, .nav-container .exchange-pro-logo:hover, .nav-container .cursor-pointer, .nav-container .cursor-pointer:hover, .nav-container .group, .nav-container .group:hover {
  transform: translateZ(0) !important;
}

.nav-container .nav-item, .nav-container .glass-card, .nav-container .glass-effect, .nav-container .backdrop-blur, .nav-container [class*="backdrop-blur"], .nav-container [class*="bg-"], .nav-container [class*="border"] {
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  background: none !important;
  border: none !important;
}

.nav-container:hover, .nav-container :hover, .nav-container.scrolled, .nav-container.active, .nav-container.focused {
  background: var(--background) !important;
  background-color: var(--background) !important;
}

.nav-container, .nav-container.force-full-width, .nav-container.scrolled, .force-fixed-header .nav-container {
  box-shadow: none !important;
  background: #1c1c1c !important;
  border: none !important;
}

.crypto-ticker-scrollable {
  box-shadow: none !important;
  background: none !important;
  border: none !important;
}

.support-dropdown-content {
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: var(--radius) !important;
  z-index: 10001 !important;
  background: #fff !important;
  border: 1px solid #0000001a !important;
  min-width: 12rem !important;
  box-shadow: 0 10px 30px #00000026, 0 5px 15px #0000001a !important;
}

.support-dropdown-item {
  color: #374151 !important;
  border-radius: calc(var(--radius)  - 2px) !important;
  padding: .75rem 1rem !important;
  font-size: .9rem !important;
  font-weight: 500 !important;
  transition: all .2s !important;
}

.support-dropdown-item:hover {
  color: #00d084 !important;
  background: #00d0841a !important;
}

.support-dropdown-item svg {
  color: #6b7280 !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  margin-right: .75rem !important;
}

.support-dropdown-item:hover svg, .support-dropdown-item:focus svg {
  color: #00d084 !important;
}

[data-radix-dropdown-content] {
  z-index: 10001 !important;
}

.support-dropdown-trigger {
  transition: all .2s !important;
}

.support-dropdown-trigger:hover {
  background: #ffffff0d !important;
}

.support-dropdown-trigger[data-state="open"] {
  color: #00d084 !important;
  background: #00d0841a !important;
}

.support-dropdown-trigger .w-4 {
  width: 1.125rem !important;
  height: 1.125rem !important;
}

.support-dropdown-trigger .w-3 {
  width: .875rem !important;
  height: .875rem !important;
}

.support-dropdown-item div[style*="backgroundColor"] {
  transition: all .2s !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

.support-dropdown-item:hover div[style*="backgroundColor"] {
  transform: scale(1.1) !important;
  box-shadow: 0 4px 8px #00000026 !important;
}

.support-dropdown-item div[style*="backgroundColor"] span {
  transition: all .2s !important;
}

.support-dropdown-item:hover div[style*="backgroundColor"] span {
  transform: scale(1.05) !important;
}

[data-section="help"] .bg-black, [data-section="help"] .bg-gray-900, [data-section="help"] .bg-gray-800, [data-section="help"] .bg-slate-900, [data-section="help"] .bg-zinc-900, .help-center .bg-black, .help-center .bg-gray-900, .help-center .bg-gray-800, .help-center .bg-slate-900, .help-center .bg-zinc-900, button[data-button*="Report Help"], button[data-button*="Contact"] {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00d084 !important;
  border: 1px solid #00d0844d !important;
  transition: all .2s !important;
}

[data-section="help"] .bg-black:hover, [data-section="help"] .bg-gray-900:hover, [data-section="help"] .bg-gray-800:hover, [data-section="help"] .bg-slate-900:hover, [data-section="help"] .bg-zinc-900:hover, .help-center .bg-black:hover, .help-center .bg-gray-900:hover, .help-center .bg-gray-800:hover, .help-center .bg-slate-900:hover, .help-center .bg-zinc-900:hover, button[data-button*="Report Help"]:hover, button[data-button*="Contact"]:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00c77c !important;
  border-color: #00d08480 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px #00d08440 !important;
}

[data-section="support"] .bg-black, [data-section="support"] .bg-gray-900, [data-section="support"] .bg-gray-800, [data-section="support"] .bg-slate-900, [data-section="support"] .bg-zinc-900, .support-page .bg-black, .support-page .bg-gray-900, .support-page .bg-gray-800, .support-page .bg-slate-900, .support-page .bg-zinc-900 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00d084 !important;
  border: 1px solid #00d0844d !important;
  transition: all .2s !important;
}

[data-section="support"] .bg-black:hover, [data-section="support"] .bg-gray-900:hover, [data-section="support"] .bg-gray-800:hover, [data-section="support"] .bg-slate-900:hover, [data-section="support"] .bg-zinc-900:hover, .support-page .bg-black:hover, .support-page .bg-gray-900:hover, .support-page .bg-gray-800:hover, .support-page .bg-slate-900:hover, .support-page .bg-zinc-900:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00c77c !important;
  border-color: #00d08480 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px #00d08440 !important;
}

[data-section="wallets"] .bg-black, [data-section="wallets"] .bg-gray-900, [data-section="wallets"] .bg-gray-800, [data-section="wallets"] .bg-slate-900, [data-section="wallets"] .bg-zinc-900, .wallets-page .bg-black, .wallets-page .bg-gray-900, .wallets-page .bg-gray-800, .wallets-page .bg-slate-900, .wallets-page .bg-zinc-900, .portfolio-page .bg-black, .portfolio-page .bg-gray-900, .portfolio-page .bg-gray-800, .portfolio-page .bg-slate-900, .portfolio-page .bg-zinc-900, [data-section="portfolio"] .bg-black, [data-section="portfolio"] .bg-gray-900, [data-section="portfolio"] .bg-gray-800, [data-section="portfolio"] .bg-slate-900, [data-section="portfolio"] .bg-zinc-900 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00d084 !important;
  border: 1px solid #00d0844d !important;
  transition: all .2s !important;
}

[data-section="wallets"] .bg-black:hover, [data-section="wallets"] .bg-gray-900:hover, [data-section="wallets"] .bg-gray-800:hover, [data-section="wallets"] .bg-slate-900:hover, [data-section="wallets"] .bg-zinc-900:hover, .wallets-page .bg-black:hover, .wallets-page .bg-gray-900:hover, .wallets-page .bg-gray-800:hover, .wallets-page .bg-slate-900:hover, .wallets-page .bg-zinc-900:hover, .portfolio-page .bg-black:hover, .portfolio-page .bg-gray-900:hover, .portfolio-page .bg-gray-800:hover, .portfolio-page .bg-slate-900:hover, .portfolio-page .bg-zinc-900:hover, [data-section="portfolio"] .bg-black:hover, [data-section="portfolio"] .bg-gray-900:hover, [data-section="portfolio"] .bg-gray-800:hover, [data-section="portfolio"] .bg-slate-900:hover, [data-section="portfolio"] .bg-zinc-900:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00c77c !important;
  border-color: #00d08480 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px #00d08440 !important;
}

[data-button="Report Help"], [data-button="Contact Support"], [data-button="Exchange"], [data-button="Security"], [data-button="Fees"], [data-button="General"] {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00d084 !important;
  border: 1px solid #00d0844d !important;
  transition: all .2s !important;
}

button:contains("Report Help") {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00d084 !important;
  border: 1px solid #00d0844d !important;
  transition: all .2s !important;
}

button:contains("Contact Support") {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00d084 !important;
  border: 1px solid #00d0844d !important;
  transition: all .2s !important;
}

button:contains("Exchange") {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00d084 !important;
  border: 1px solid #00d0844d !important;
  transition: all .2s !important;
}

button:contains("Security") {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00d084 !important;
  border: 1px solid #00d0844d !important;
  transition: all .2s !important;
}

button:contains("Fees & Limits") {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00d084 !important;
  border: 1px solid #00d0844d !important;
  transition: all .2s !important;
}

button:contains("General") {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00d084 !important;
  border: 1px solid #00d0844d !important;
  transition: all .2s !important;
}

[data-button="Report Help"]:hover, [data-button="Contact Support"]:hover, [data-button="Exchange"]:hover, [data-button="Security"]:hover, [data-button="Fees"]:hover, [data-button="General"]:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00c77c !important;
  border-color: #00d08480 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px #00d08440 !important;
}

button:contains("Report Help"):hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00c77c !important;
  border-color: #00d08480 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px #00d08440 !important;
}

button:contains("Contact Support"):hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00c77c !important;
  border-color: #00d08480 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px #00d08440 !important;
}

button:contains("Exchange"):hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00c77c !important;
  border-color: #00d08480 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px #00d08440 !important;
}

button:contains("Security"):hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00c77c !important;
  border-color: #00d08480 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px #00d08440 !important;
}

button:contains("Fees & Limits"):hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00c77c !important;
  border-color: #00d08480 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px #00d08440 !important;
}

button:contains("General"):hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00c77c !important;
  border-color: #00d08480 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px #00d08440 !important;
}

.help-center .card.bg-black, .help-center .glass-card.bg-black, .faq-page .card.bg-black, .faq-page .glass-card.bg-black, .support-page .card.bg-black, .support-page .glass-card.bg-black, .wallets-page .card.bg-black, .wallets-page .glass-card.bg-black, .portfolio-page .card.bg-black, .portfolio-page .glass-card.bg-black {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00d084 !important;
  border: 1px solid #00d0844d !important;
}

.help-center .card.bg-black:hover, .help-center .glass-card.bg-black:hover, .faq-page .card.bg-black:hover, .faq-page .glass-card.bg-black:hover, .support-page .card.bg-black:hover, .support-page .glass-card.bg-black:hover, .wallets-page .card.bg-black:hover, .wallets-page .glass-card.bg-black:hover, .portfolio-page .card.bg-black:hover, .portfolio-page .glass-card.bg-black:hover {
  background: #00c77c !important;
  border-color: #00d08480 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px #00d08440 !important;
}

[data-section="help"] .bg-black *, [data-section="help"] .bg-gray-900 *, [data-section="faq"] .bg-black *, [data-section="faq"] .bg-gray-900 *, [data-section="support"] .bg-black *, [data-section="support"] .bg-gray-900 *, [data-section="wallets"] .bg-black *, [data-section="wallets"] .bg-gray-900 *, [data-section="portfolio"] .bg-black *, [data-section="portfolio"] .bg-gray-900 *, .help-center .bg-black *, .help-center .bg-gray-900 *, .faq-page .bg-black *, .faq-page .bg-gray-900 *, .support-page .bg-black *, .support-page .bg-gray-900 *, .wallets-page .bg-black *, .wallets-page .bg-gray-900 *, .portfolio-page .bg-black *, .portfolio-page .bg-gray-900 * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.categories .bg-black, .categories .bg-gray-900, .faq-categories .bg-black, .faq-categories .bg-gray-900, .help-categories .bg-black, .help-categories .bg-gray-900, .support-categories .bg-black, .support-categories .bg-gray-900 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #00d084 !important;
  border: 1px solid #00d0844d !important;
}

.categories .bg-black:hover, .categories .bg-gray-900:hover, .faq-categories .bg-black:hover, .faq-categories .bg-gray-900:hover, .help-categories .bg-black:hover, .help-categories .bg-gray-900:hover, .support-categories .bg-black:hover, .support-categories .bg-gray-900:hover {
  background: #00c77c !important;
  border-color: #00d08480 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px #00d08440 !important;
}

footer svg, footer .lucide, .footer svg, .footer .lucide {
  opacity: inherit !important;
  visibility: inherit !important;
  display: inherit !important;
  transition: all .3s !important;
}

footer button:hover svg, footer button:hover .lucide, footer a:hover svg, footer a:hover .lucide, .footer button:hover svg, .footer button:hover .lucide, .footer a:hover svg, .footer a:hover .lucide {
  color: #00d084 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(4px) !important;
}

footer .bg-gradient-to-r svg, footer .bg-gradient-to-r .lucide, .footer .bg-gradient-to-r svg, .footer .bg-gradient-to-r .lucide {
  color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

footer .bg-gradient-to-br svg, footer .bg-gradient-to-br .lucide, .footer .bg-gradient-to-br svg, .footer .bg-gradient-to-br .lucide {
  color: #9ca3af !important;
  opacity: 1 !important;
  visibility: visible !important;
}

footer .bg-gradient-to-br:hover svg, footer .bg-gradient-to-br:hover .lucide, .footer .bg-gradient-to-br:hover svg, .footer .bg-gradient-to-br:hover .lucide {
  color: #00d084 !important;
}

footer .text-red-500, .footer .text-red-500 {
  color: #ef4444 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

footer ul li button:hover, footer ul li a:hover, .footer ul li button:hover, .footer ul li a:hover {
  color: #00d084 !important;
  transition: all .3s !important;
  transform: translateX(6px) !important;
}

footer .group:hover svg, footer .group:hover .lucide, .footer .group:hover svg, .footer .group:hover .lucide {
  opacity: 1 !important;
  color: #00d084 !important;
  transition: all .3s !important;
  transform: translateX(4px)scale(1.1) !important;
}

footer button .opacity-0:hover, footer button:hover .opacity-0, .footer button .opacity-0:hover, .footer button:hover .opacity-0 {
  opacity: 1 !important;
  color: #00d084 !important;
  transform: translateX(4px) !important;
}

footer button:hover span, .footer button:hover span {
  transition: transform .3s !important;
  transform: translateX(4px) !important;
}

footer .group:hover {
  background: #00d0840d !important;
  border-radius: 6px !important;
  margin: -.25rem !important;
  padding: .25rem !important;
  transition: all .3s !important;
}

footer button:hover, footer button:hover span, .footer button:hover, .footer button:hover span {
  color: #00d084 !important;
}

footer .group-hover\\:text-primary {
  color: #00d084 !important;
}

.footer .group-hover\\:text-primary {
  color: #00d084 !important;
}

footer .opacity-0, .footer .opacity-0 {
  opacity: 0 !important;
  color: #6b7280 !important;
}

footer .group:hover .opacity-0, .footer .group:hover .opacity-0 {
  opacity: 1 !important;
  color: #00d084 !important;
}

footer .text-muted-foreground, .footer .text-muted-foreground {
  color: #9ca3af !important;
}

footer .text-foreground, .footer .text-foreground {
  color: #fff !important;
}

.footer .social-links a, footer .flex.items-center.gap-3 a {
  -webkit-backdrop-filter: blur(8px) !important;
  background: #2a2a2acc !important;
  border: 1px solid #ffffff26 !important;
  border-radius: 8px !important;
  transition: all .3s cubic-bezier(.4, 0, .2, 1) !important;
  box-shadow: 0 2px 8px #0000001a !important;
}

footer .flex.items-center.gap-3 a:hover {
  background: #00d08426 !important;
  border-color: #00d08466 !important;
  transform: translateY(-2px)scale(1.05) !important;
  box-shadow: 0 6px 20px #00d08440 !important;
}

footer .flex.items-center.gap-3 a:hover svg {
  color: #00d084 !important;
  filter: drop-shadow(0 2px 4px #00d0844d) !important;
}

footer .flex.items-center.gap-3 a:first-child:hover {
  background: #1877f226 !important;
  border-color: #1877f266 !important;
}

footer .flex.items-center.gap-3 a:first-child:hover svg {
  color: #1877f2 !important;
  filter: drop-shadow(0 2px 4px #1877f24d) !important;
}

footer .flex.items-center.gap-3 a:nth-child(2):hover {
  background: #1da1f226 !important;
  border-color: #1da1f266 !important;
}

footer .flex.items-center.gap-3 a:nth-child(2):hover svg {
  color: #1da1f2 !important;
  filter: drop-shadow(0 2px 4px #1da1f24d) !important;
}

footer .flex.items-center.gap-3 a:nth-child(3):hover {
  background: #0088cc26 !important;
  border-color: #08c6 !important;
}

footer .flex.items-center.gap-3 a:nth-child(3):hover svg {
  color: #08c !important;
  filter: drop-shadow(0 2px 4px #0088cc4d) !important;
}

footer .flex.items-center.gap-3 a:last-child:hover {
  background: #00d08426 !important;
  border-color: #00d08466 !important;
}

footer .flex.items-center.gap-3 a:last-child:hover svg {
  color: #00d084 !important;
  filter: drop-shadow(0 2px 4px #00d0844d) !important;
}

@keyframes socialIconPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 8px #0000001a;
  }

  50% {
    transform: scale(1.02);
    box-shadow: 0 4px 12px #00000026;
  }
}

footer .flex.items-center.gap-3 a {
  animation: 4s ease-in-out infinite socialIconPulse;
}

footer .flex.items-center.gap-3 a:nth-child(2) {
  animation-delay: .5s;
}

footer .flex.items-center.gap-3 a:nth-child(3) {
  animation-delay: 1s;
}

footer .flex.items-center.gap-3 a:last-child {
  animation-delay: 1.5s;
}

footer .flex.items-center.gap-3 {
  -webkit-backdrop-filter: blur(4px) !important;
  background: #0000000d !important;
  border: 1px solid #ffffff0d !important;
  border-radius: 12px !important;
  padding: .5rem !important;
}

footer span:contains("Follow us") {
  color: #fffc !important;
  letter-spacing: .025em !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
}

@media (width <= 768px) {
  footer .flex.items-center.gap-3 {
    gap: .5rem !important;
    padding: .375rem !important;
  }

  footer .flex.items-center.gap-3 a {
    width: 2rem !important;
    height: 2rem !important;
  }

  footer .flex.items-center.gap-3 a svg {
    width: .875rem !important;
    height: .875rem !important;
  }

  footer span:contains("Follow us") {
    font-size: .75rem !important;
  }
}

[data-section="cie-whitepaper"] .card, [data-section="cie-whitepaper"] .glass-card, [data-section="cie-whitepaper"] div[class*="bg-"], .cie-whitepaper .card, .cie-whitepaper .glass-card, .cie-whitepaper div[class*="bg-"] {
  color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
}

.min-h-screen.bg-white:has(h1:contains("CIE Token Whitepaper")) {
  color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
}

.min-h-screen.bg-white:has(span:contains("CIE TOKEN WHITEPAPER")) {
  color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
}

[data-section="cie-whitepaper"] [class*="bg-[#242424]"], [data-section="cie-whitepaper"] [class*="bg-[#141414]"], [data-section="cie-whitepaper"] [class*="bg-gray-9"], [data-section="cie-whitepaper"] [class*="bg-gray-8"], .cie-whitepaper [class*="bg-[#242424]"], .cie-whitepaper [class*="bg-[#141414]"], .cie-whitepaper [class*="bg-gray-9"], .cie-whitepaper [class*="bg-gray-8"] {
  color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
}

[data-section="cie-whitepaper"] .card:hover, [data-section="cie-whitepaper"] .glass-card:hover, .cie-whitepaper .card:hover, .cie-whitepaper .glass-card:hover {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  box-shadow: 0 4px 6px #0000001a !important;
}

[data-section="cie-whitepaper"] h1, [data-section="cie-whitepaper"] h2, [data-section="cie-whitepaper"] h3, [data-section="cie-whitepaper"] h4, [data-section="cie-whitepaper"] h5, [data-section="cie-whitepaper"] h6, .cie-whitepaper h1, .cie-whitepaper h2, .cie-whitepaper h3, .cie-whitepaper h4, .cie-whitepaper h5, .cie-whitepaper h6 {
  color: #111827 !important;
}

[data-section="cie-whitepaper"] p, [data-section="cie-whitepaper"] span:not(.text-white):not([class*="text-green"]):not([class*="text-blue"]):not([class*="text-purple"]), [data-section="cie-whitepaper"] div:not(.bg-gradient-to-r):not([class*="text-green"]):not([class*="text-blue"]):not([class*="text-purple"]), .cie-whitepaper p, .cie-whitepaper span:not(.text-white):not([class*="text-green"]):not([class*="text-blue"]):not([class*="text-purple"]), .cie-whitepaper div:not(.bg-gradient-to-r):not([class*="text-green"]):not([class*="text-blue"]):not([class*="text-purple"]) {
  color: #374151 !important;
}

[data-section="cie-whitepaper"] .sticky.top-24, .cie-whitepaper .sticky.top-24 {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 3px #0000001a !important;
}

[data-section="cie-whitepaper"] button.w-full, .cie-whitepaper button.w-full {
  color: #374151 !important;
}

[data-section="cie-whitepaper"] button.w-full:hover, .cie-whitepaper button.w-full:hover {
  color: #00d084 !important;
  background: #00d0841a !important;
}

.min-h-screen.bg-white [class*="cie-whitepaper"] .card, .min-h-screen.bg-white [data-section="cie-whitepaper"] .card {
  color: #000 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
}

[data-section="cie-whitepaper"] input[type="text"], [data-section="cie-whitepaper"] input, [data-section="cie-whitepaper"] select, .cie-whitepaper input[type="text"], .cie-whitepaper input, .cie-whitepaper select {
  color: #000 !important;
  background: #fff !important;
  border: 1px solid #d1d5db !important;
}

[data-section="cie-whitepaper"] input[type="text"]::placeholder, [data-section="cie-whitepaper"] input::placeholder, .cie-whitepaper input[type="text"]::placeholder, .cie-whitepaper input::placeholder {
  color: #6b7280 !important;
}

.cie-whitepaper-page [class*="bg-"]:not([class*="bg-gradient"]):not([class*="bg-green"]):not([class*="bg-red"]):not([class*="bg-blue"]), [data-section="cie-whitepaper"] [class*="bg-"]:not([class*="bg-gradient"]):not([class*="bg-green"]):not([class*="bg-red"]):not([class*="bg-blue"]) {
  background: #fff !important;
}

[data-section="cie-whitepaper"], .cie-whitepaper, .cie-whitepaper-page {
  --color-card: #fff !important;
  --color-background: #fff !important;
  --color-secondary: #fff !important;
  --card: #fff !important;
  --tw-bg-opacity: 1 !important;
}

[data-section="cie-whitepaper"] [class*="bg-"], [data-section="cie-whitepaper"] *, .cie-whitepaper [class*="bg-"], .cie-whitepaper *, .cie-whitepaper-page, .cie-whitepaper-page :not([class*="bg-gradient"]):not([class*="bg-green"]):not([class*="bg-red"]):not([class*="bg-blue"]):not([class*="bg-purple"]):not([class*="bg-[#00d084]"]) {
  background: #fff !important;
}

.cie-whitepaper-page .card, .cie-whitepaper-page .glass-card, [data-section="cie-whitepaper"] .card, [data-section="cie-whitepaper"] .glass-card {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 3px #0000001a !important;
}

[data-section="cie-ico"] {
  color: #000 !important;
  background: #fff !important;
}

[data-section="cie-ico"] .card, [data-section="cie-ico"] .bg-white, .cie-ico-page .card, .cie-ico-page .bg-white {
  color: #000 !important;
  background: #fff !important;
  border: 2px solid #e5e7eb !important;
  box-shadow: 0 4px 6px #0000000d !important;
}

[data-section="cie-ico"] .border-green-200, [data-section="cie-ico"] .border-green-300, .cie-ico-page .border-green-200, .cie-ico-page .border-green-300 {
  background: #fff !important;
  border-color: #16a34a !important;
}

[data-section="cie-ico"] .progress, .cie-ico-page .progress {
  background: #f3f4f6 !important;
}

[data-section="cie-ico"] .progress [data-state="loading"], .cie-ico-page .progress [data-state="loading"] {
  background: linear-gradient(90deg, #16a34a, #22c55e) !important;
}

[data-section="cie-ico"] .countdown-item, .cie-ico-page .countdown-item {
  color: #16a34a !important;
  background: #f9fafb !important;
  border: 2px solid #16a34a !important;
}

[data-section="cie-ico"] .stats-card, .cie-ico-page .stats-card {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
  border: 2px solid #16a34a !important;
}

[data-section="cie-ico"] .purchase-card, .cie-ico-page .purchase-card {
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5) !important;
  border: 3px solid #16a34a !important;
  box-shadow: 0 10px 25px #16a34a26 !important;
}

[data-section="cie-ico"] .btn-primary, [data-section="cie-ico"] button[class*="bg-green"], .cie-ico-page .btn-primary, .cie-ico-page button[class*="bg-green"] {
  color: #fff !important;
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
  border: none !important;
  font-weight: 700 !important;
}

[data-section="cie-ico"] .btn-primary:hover, [data-section="cie-ico"] button[class*="bg-green"]:hover, .cie-ico-page .btn-primary:hover, .cie-ico-page button[class*="bg-green"]:hover {
  background: linear-gradient(135deg, #15803d, #16a34a) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 15px #16a34a4d !important;
}

[data-section="cie-ico"] h1, [data-section="cie-ico"] h2, [data-section="cie-ico"] h3, [data-section="cie-ico"] h4, .cie-ico-page h1, .cie-ico-page h2, .cie-ico-page h3, .cie-ico-page h4 {
  color: #111827 !important;
}

[data-section="cie-ico"] p, [data-section="cie-ico"] span:not([class*="text-green"]):not([class*="text-white"]), .cie-ico-page p, .cie-ico-page span:not([class*="text-green"]):not([class*="text-white"]) {
  color: #374151 !important;
}

[data-section="cie-ico"] .badge, .cie-ico-page .badge {
  border-radius: 6px !important;
  font-weight: 700 !important;
}

[data-section="cie-ico"] input[type="number"], [data-section="cie-ico"] input[type="text"], .cie-ico-page input[type="number"], .cie-ico-page input[type="text"] {
  color: #000 !important;
  background: #fff !important;
  border: 2px solid #d1d5db !important;
  font-weight: 600 !important;
}

[data-section="cie-ico"] input[type="number"]:focus, [data-section="cie-ico"] input[type="text"]:focus, .cie-ico-page input[type="number"]:focus, .cie-ico-page input[type="text"]:focus {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 3px #16a34a1a !important;
}

[data-section="cie-ico"] .feature-card, .cie-ico-page .feature-card {
  background: #fff !important;
  border: 2px solid #e5e7eb !important;
  transition: all .3s !important;
}

[data-section="cie-ico"] .feature-card:hover, .cie-ico-page .feature-card:hover {
  border-color: #16a34a !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px #16a34a26 !important;
}

[data-section="cie-ico"] .feature-icon, .cie-ico-page .feature-icon {
  color: #fff !important;
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
}

[data-section="cie-ico"] .order-book-style, .cie-ico-page .order-book-style {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
}

[data-section="cie-ico"] .order-book-style thead, .cie-ico-page .order-book-style thead {
  background: #f9fafb !important;
  border-bottom: 2px solid #16a34a !important;
}

[data-section="cie-ico"] .order-book-style tbody tr:hover, .cie-ico-page .order-book-style tbody tr:hover {
  background: #f0fdf4 !important;
}

@media (width <= 768px) {
  [data-section="cie-ico"] .container, .cie-ico-page .container {
    padding: 1rem !important;
  }

  [data-section="cie-ico"] .card, .cie-ico-page .card {
    margin-bottom: 1rem !important;
    padding: 1rem !important;
  }

  [data-section="cie-ico"] .grid, .cie-ico-page .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

@keyframes icoCountdown {
  0%, 100% {
    color: #16a34a;
    transform: scale(1);
  }

  50% {
    color: #22c55e;
    transform: scale(1.05);
  }
}

@keyframes countdownPulse {
  0%, 100% {
    text-shadow: 0 0 10px #16a34a4d;
    transform: scale(1);
  }

  50% {
    text-shadow: 0 0 20px #16a34a99;
    transform: scale(1.02);
  }
}

@keyframes clickReward {
  0% {
    transform: scale(1)rotate(0);
    box-shadow: 0 0 #16a34ab3;
  }

  25% {
    transform: scale(1.1)rotate(5deg);
    box-shadow: 0 0 0 10px #16a34a4d;
  }

  50% {
    transform: scale(1.2)rotate(-5deg);
    box-shadow: 0 0 0 20px #16a34a1a;
  }

  75% {
    transform: scale(1.1)rotate(3deg);
    box-shadow: 0 0 0 15px #16a34a0d;
  }

  100% {
    transform: scale(1)rotate(0);
    box-shadow: 0 0 #16a34a00;
  }
}

@keyframes earnAnimation {
  0% {
    opacity: 0;
    transform: translateY(20px)scale(.8);
  }

  50% {
    opacity: 1;
    transform: translateY(-10px)scale(1.1);
  }

  100% {
    opacity: 0;
    transform: translateY(-30px)scale(.9);
  }
}

[data-section="cie-ico"] .countdown-number, .cie-ico-page .countdown-number {
  transition: all .3s;
  animation: 2s ease-in-out infinite countdownPulse;
}

[data-section="cie-ico"] .countdown-number:hover, .cie-ico-page .countdown-number:hover {
  text-shadow: 0 0 30px #16a34acc !important;
  transform: scale(1.1) !important;
}

.click-to-earn-button {
  position: relative;
  overflow: hidden;
}

.click-to-earn-button.clicked {
  animation: .6s ease-out clickReward;
}

.earn-popup {
  color: #16a34a;
  pointer-events: none;
  z-index: 1000;
  font-size: 1.2rem;
  font-weight: bold;
  animation: 1.5s ease-out forwards earnAnimation;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.click-progress-ring {
  stroke-dasharray: 283;
  stroke-dashoffset: 283px;
  transition: stroke-dashoffset .3s;
}

.click-progress-ring.active {
  stroke-dashoffset: calc(283 - (283 * var(--progress)) / 100);
}

@keyframes icoPulse {
  0%, 100% {
    box-shadow: 0 0 #16a34a66;
  }

  50% {
    box-shadow: 0 0 0 15px #16a34a00;
  }
}

[data-section="cie-ico"] .pulse-button, .cie-ico-page .pulse-button {
  animation: 2s infinite icoPulse;
}

[data-section="cie-ico"] .cie-icon-enhanced, .cie-ico-page .cie-icon-enhanced {
  filter: drop-shadow(0 15px 35px #16a34a66) drop-shadow(0 8px 20px #16a34a33);
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

[data-section="cie-ico"] .cie-icon-enhanced:hover, .cie-ico-page .cie-icon-enhanced:hover {
  filter: drop-shadow(0 20px 45px #16a34a99) drop-shadow(0 12px 30px #16a34a4d);
  transform: scale(1.05);
}

.cie-ico-header-icon {
  -webkit-backdrop-filter: blur(10px);
  background: radial-gradient(circle at 30% 30%, #fff3, #0000 70%);
  border-radius: 20px;
  padding: 1rem;
}

@keyframes cieLiveIndicator {
  0%, 100% {
    opacity: .7;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.cie-live-indicator {
  animation: 2s ease-in-out infinite cieLiveIndicator;
}

@keyframes cieStatusGlow {
  0%, 100% {
    box-shadow: 0 0 10px #4ade8080;
  }

  50% {
    box-shadow: 0 0 20px #4ade80cc;
  }
}

.cie-status-badge {
  animation: 3s ease-in-out infinite cieStatusGlow;
}

[data-section="cie-ico"] .header-content {
  -webkit-backdrop-filter: blur(20px);
}

[data-section="cie-ico"] .header-icon-container {
  position: relative;
  overflow: visible;
}

[data-section="cie-ico"] .header-icon-container:before {
  content: "";
  z-index: -1;
  background: conic-gradient(#0000, #16a34a33, #0000);
  border-radius: 50%;
  animation: 4s linear infinite rotate;
  position: absolute;
  inset: -10px;
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

[data-section="cie-ico"] .header-text-container {
  text-align: left;
  flex-direction: column;
  justify-content: center;
  display: flex;
}

[data-section="cie-ico"] .header-text-container h1 {
  margin: 0;
  line-height: .9;
}

[data-section="cie-ico"] .header-text-container p {
  margin: .75rem 0 .5rem;
}

.w-32.h-32[class*="CIEIcon"], [data-section="cie-ico"] .w-32.h-32 {
  filter: drop-shadow(0 20px 40px #16a34a4d) drop-shadow(0 10px 20px #16a34a33) drop-shadow(0 5px 10px #0000001a);
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
}

.w-32.h-32[class*="CIEIcon"]:hover, [data-section="cie-ico"] .w-32.h-32:hover {
  filter: drop-shadow(0 25px 50px #16a34a80) drop-shadow(0 15px 30px #16a34a4d) drop-shadow(0 8px 15px #00000026);
  transform: translateY(-2px)scale(1.02);
}

.cie-logo-container {
  display: inline-block;
  position: relative;
}

.cie-logo-container:before {
  content: "";
  z-index: -1;
  opacity: .8;
  background: conic-gradient(#0000, #04d4844d, #16a34a33, #0000);
  border-radius: 50%;
  animation: 6s linear infinite logoRotate;
  position: absolute;
  inset: -15px;
}

.cie-logo-container:after {
  content: "";
  z-index: -1;
  background: radial-gradient(circle, #04d4841a 0%, #0000 70%);
  border-radius: 50%;
  animation: 3s ease-in-out infinite logoPulse;
  position: absolute;
  inset: -8px;
}

@keyframes logoRotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes logoPulse {
  0%, 100% {
    opacity: .6;
    transform: scale(1);
  }

  50% {
    opacity: .9;
    transform: scale(1.1);
  }
}

.cie-logo-container img {
  z-index: 2;
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(145deg, #ffffff1a, #ffffff0d);
  border: 2px solid #fff3;
  border-radius: 50%;
  position: relative;
}

.cie-logo-container img:hover {
  filter: brightness(1.1) contrast(1.1) drop-shadow(0 0 30px #04d484cc);
  transform: scale(1.05)rotate(5deg);
}

.cie-logo-container .absolute {
  z-index: 3;
}

.cie-logo-container .absolute.bg-green-400 {
  background: linear-gradient(45deg, #4ade80, #22c55e);
  box-shadow: 0 0 20px #22c55e99;
}

[data-section="cie-ico"] .rounded-full.overflow-hidden {
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
  border: 2px solid #16a34a33 !important;
  box-shadow: 0 8px 25px #16a34a26 !important;
}

[data-section="cie-ico"] .rounded-full.overflow-hidden:hover {
  transform: scale(1.05);
  background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important;
  border-color: #16a34a66 !important;
  box-shadow: 0 12px 35px #16a34a40 !important;
}

[data-section="cie-ico"] .rounded-full img {
  filter: drop-shadow(0 2px 8px #0000001a);
  transition: all .3s;
}

[data-section="cie-ico"] .rounded-full img:hover {
  filter: drop-shadow(0 4px 12px #16a34a4d);
  transform: scale(1.02);
}

@media (width <= 768px) {
  [data-section="cie-ico"] .header-content {
    text-align: center;
    flex-direction: column;
    gap: 1.5rem;
  }

  [data-section="cie-ico"] .header-text-container {
    text-align: center;
  }

  [data-section="cie-ico"] .w-20.h-20.rounded-full {
    width: 4rem !important;
    height: 4rem !important;
  }

  [data-section="cie-ico"] .w-20.h-20.rounded-full img {
    width: 100% !important;
    height: 100% !important;
  }

  [data-section="cie-ico"] h1 {
    font-size: 2.5rem !important;
  }

  [data-section="cie-ico"] .text-lg {
    font-size: 1rem !important;
  }
}

@media (width >= 1024px) {
  [data-section="cie-ico"] .w-20.h-20.rounded-full {
    width: 5rem !important;
    height: 5rem !important;
  }

  [data-section="cie-ico"] .w-20.h-20.rounded-full img {
    width: 100% !important;
    height: 100% !important;
  }

  [data-section="cie-ico"] h1 {
    font-size: 3rem !important;
  }
}

@keyframes circularIconPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 25px #16a34a26;
  }

  50% {
    transform: scale(1.02);
    box-shadow: 0 12px 35px #16a34a40;
  }
}

[data-section="cie-ico"] .rounded-full.overflow-hidden {
  animation: 4s ease-in-out infinite circularIconPulse;
}

[data-section="cie-ico"] .absolute.bg-green-400 {
  background: linear-gradient(45deg, #22c55e, #16a34a) !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 15px #22c55e99 !important;
}

[data-section="cie-ico"] .relative {
  position: relative;
}

[data-section="cie-ico"] .relative:before {
  content: "";
  z-index: -1;
  opacity: .7;
  background: conic-gradient(#0000, #16a34a26, #22c55e1a, #0000);
  border-radius: 50%;
  animation: 6s linear infinite rotate;
  position: absolute;
  inset: -8px;
}

@keyframes cieLogoRotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes cieLogoPulse {
  0%, 100% {
    filter: drop-shadow(0 0 10px #16a34a4d);
    transform: scale(1);
  }

  50% {
    filter: drop-shadow(0 0 20px #16a34a99);
    transform: scale(1.05);
  }
}

@keyframes cieLogoGlow {
  0%, 100% {
    box-shadow: 0 0 20px #16a34a4d;
  }

  50% {
    box-shadow: 0 0 40px #16a34acc;
  }
}

@keyframes cieGradientShift {
  0%, 100% {
    stop-color: #16a34a;
  }

  25% {
    stop-color: #22c55e;
  }

  50% {
    stop-color: #4ade80;
  }

  75% {
    stop-color: #22c55e;
  }
}

.cie-logo-animate {
  animation: 3s ease-in-out infinite cieLogoPulse;
}

.cie-logo-premium {
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.cie-logo-premium:hover {
  filter: drop-shadow(0 0 25px #16a34acc);
  animation: 1s ease-in-out cieLogoPulse;
}

.cie-logo-glow {
  animation: 4s ease-in-out infinite cieLogoGlow;
}

.cie-logo-glow:hover {
  animation: .8s ease-in-out cieLogoPulse;
}

.crypto-icon svg {
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.crypto-icon:hover svg {
  filter: drop-shadow(0 4px 15px #16a34a66);
  transform: scale(1.05);
}

[data-section="cie-ico"] .crypto-icon svg {
  filter: drop-shadow(0 8px 25px #16a34a4d);
}

[data-section="cie-ico"] .crypto-icon:hover svg {
  filter: drop-shadow(0 12px 35px #16a34a99);
  transform: scale(1.08);
}

@media (width <= 768px) {
  .cie-logo-animate {
    animation-duration: 4s;
  }

  .crypto-icon:hover svg {
    transform: scale(1.03);
  }
}

.crypto-icon {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.crypto-icon svg {
  will-change: transform, filter;
  transform: translateZ(0);
}

@media (width <= 768px) {
  [data-section="security"] h2 + p, [data-section="security"] .text-xl, .security-subtitle, .security-page .text-xl:first-of-type {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  [data-section="security"] p:contains("Non-Custodial") {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  [data-section="security"] .security-main-text {
    font-size: .95rem !important;
    line-height: 1.4 !important;
  }
}

[data-section="home"] .crypto-news-section, .crypto-news-section {
  background: var(--background) !important;
  border-top: 1px solid #ffffff1a !important;
  border-bottom: 1px solid #ffffff1a !important;
  margin: 4rem 0 !important;
  padding: 3rem 0 !important;
}

.crypto-news-section .card, [data-component="crypto-news"] .card, div[class*="crypto-news"] .card {
  background: #242424 !important;
  border: 1px solid #ffffff1a !important;
  transition: all .3s !important;
}

.crypto-news-section .card:hover, [data-component="crypto-news"] .card:hover, div[class*="crypto-news"] .card:hover {
  background: #2a2a2a !important;
  border-color: #00d0844d !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px #00d08426 !important;
}

.crypto-news-section button[class*="bg-green"] {
  color: #000 !important;
  background: #00d084 !important;
}

.crypto-news-section button:not([class*="bg-green"]) {
  color: #fff !important;
  background: #242424 !important;
  border: 1px solid #ffffff1a !important;
}

.crypto-news-section button:not([class*="bg-green"]):hover {
  background: #00d0841a !important;
  border-color: #00d0844d !important;
}

.crypto-news-section .bg-green-500 {
  background: #00d084 !important;
  border: none !important;
  box-shadow: 0 2px 8px #00d08433 !important;
}

.crypto-news-section .bg-green-500:hover {
  background: #00c77c !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px #00d0844d !important;
}

.crypto-news-section .hover\\:bg-green-600:hover {
  background: #00c77c !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px #00d0844d !important;
}

.crypto-news-section .bg-orange-500 {
  background: #f59e0b !important;
}

.crypto-news-section .bg-purple-500 {
  background: #8b5cf6 !important;
}

.crypto-news-section .bg-blue-500 {
  background: #3b82f6 !important;
}

.crypto-news-section .bg-red-500 {
  background: #ef4444 !important;
}

.crypto-news-section svg, .crypto-news-section .lucide {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.crypto-news-section img {
  border-radius: 8px !important;
  transition: transform .5s !important;
}

.crypto-news-section .group:hover img {
  transform: scale(1.05) !important;
}

.crypto-news-section h3:hover {
  color: #00d084 !important;
  transition: color .3s !important;
}

.crypto-news-section h2 {
  text-align: center !important;
  margin-bottom: 2rem !important;
}

.crypto-news-section .text-green-500 {
  color: #00d084 !important;
}

@media (width <= 768px) {
  .crypto-news-section {
    margin: 2rem 0 !important;
    padding: 2rem 0 !important;
  }

  .crypto-news-section .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .crypto-news-section .card {
    margin: 0 1rem !important;
  }

  .crypto-news-section h2 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }

  .crypto-news-section .text-lg, .crypto-news-section .text-xl {
    font-size: 1rem !important;
  }
}

.crypto-news-ticker {
  background: #242424 !important;
  border: 1px solid #ffffff1a !important;
  border-radius: 8px !important;
  margin: 1rem 0 !important;
}

.crypto-news-ticker .bg-green-500 {
  background: #00d084 !important;
}

.crypto-news-widget .card {
  background: #242424 !important;
  border: 1px solid #ffffff1a !important;
}

.crypto-news-widget .card:hover {
  background: #2a2a2a !important;
  border-color: #00d0844d !important;
}

.crypto-news-headlines {
  -webkit-backdrop-filter: blur(8px) !important;
  background: #242424cc !important;
  border: 1px solid #ffffff1a !important;
  border-radius: 12px !important;
}

.crypto-news-sidebar {
  background: #242424 !important;
  border: 1px solid #ffffff1a !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
}

.crypto-news-sidebar .card {
  background: #2a2a2acc !important;
  border: 1px solid #ffffff0d !important;
  margin-bottom: 1rem !important;
}

@keyframes newsCardFloat {
  0%, 100% {
    transform: translateY(0);
  }

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

.crypto-news-section .group:hover {
  animation: 2s ease-in-out infinite newsCardFloat;
}

.crypto-news-gradient {
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(135deg, #00d084, #00c77c) text !important;
}

.crypto-news-divider {
  background: linear-gradient(90deg, #0000, #00d08480, #0000) !important;
  height: 1px !important;
  margin: 2rem 0 !important;
}

.crypto-news-loading {
  text-align: center !important;
  color: #9ca3af !important;
  background: #242424 !important;
  border: 1px solid #ffffff1a !important;
  border-radius: 8px !important;
  padding: 2rem !important;
}

.crypto-news-error {
  color: #fca5a5 !important;
  text-align: center !important;
  background: #ef44441a !important;
  border: 1px solid #ef44444d !important;
  border-radius: 8px !important;
  padding: 1rem !important;
}

.crypto-news-section {
  contain: layout style paint !important;
  will-change: transform !important;
  transform: translateZ(0) !important;
}

.crypto-news-section .card {
  contain: layout style !important;
  transform: translateZ(0) !important;
}

.live-chat-widget {
  z-index: 50 !important;
  transition: all .3s !important;
  position: absolute !important;
  bottom: 1.5rem !important;
  right: 1.5rem !important;
}

.live-chat-scrollable {
  will-change: transform !important;
  backface-visibility: hidden !important;
  position: absolute !important;
}

.live-chat-widget, .live-chat-scrollable {
  position: absolute !important;
}

main .live-chat-widget, main .live-chat-scrollable {
  z-index: 999 !important;
  position: absolute !important;
  bottom: 1.5rem !important;
  right: 1.5rem !important;
}

.live-chat-widget button {
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 8px 32px #0000001f, 0 4px 16px #22c55e33 !important;
}

.live-chat-widget * {
  transform: translateZ(0) !important;
}

@media (width <= 768px) {
  .live-chat-widget {
    bottom: 1rem !important;
    right: 1rem !important;
  }

  .live-chat-widget button {
    width: 3rem !important;
    height: 3rem !important;
  }
}

.live-chat-widget:hover {
  transition: transform .2s !important;
  transform: translateY(-2px) !important;
}

[data-chat] {
  position: absolute !important;
}

main > .live-chat-widget, main [class*="live-chat"] {
  z-index: 999 !important;
  position: absolute !important;
  bottom: 1.5rem !important;
  right: 1.5rem !important;
}

.live-chat-widget[style*="position: fixed"] {
  position: absolute !important;
}

@media (width <= 768px) {
  main > .live-chat-widget, main [class*="live-chat"] {
    z-index: 999 !important;
    bottom: 1rem !important;
    right: 1rem !important;
  }
}

.crypto-ticker-header {
  top: calc(var(--header-height)  + var(--ticker-spacing)) !important;
  z-index: 9997 !important;
  will-change: transform !important;
  contain: layout style paint !important;
  background: none !important;
  border: none !important;
  width: 100vw !important;
  padding: 0 2rem !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  overflow: hidden !important;
  transform: translateZ(0) !important;
}

.crypto-ticker-header .motion-div {
  animation-duration: inherit !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode: none !important;
}

.crypto-ticker-fallback {
  animation: 120s linear infinite ticker-scroll-fallback !important;
}

@keyframes ticker-scroll-fallback {
  0% {
    transform: translateX(0) !important;
  }

  100% {
    transform: translateX(-50%) !important;
  }
}

.crypto-ticker-enhanced {
  animation: 90s linear infinite ticker-enhanced-scroll !important;
}

@keyframes ticker-enhanced-scroll {
  0% {
    transform: translateX(100%) !important;
  }

  100% {
    transform: translateX(-100%) !important;
  }
}

.moving-ticker {
  will-change: transform !important;
  backface-visibility: hidden !important;
  animation: 60s linear infinite tickerMove !important;
  transform: translateZ(0) !important;
}

@keyframes tickerMove {
  from {
    transform: translateX(100%) !important;
  }

  to {
    transform: translateX(-100%) !important;
  }
}

@keyframes tickerMoveFast {
  0% {
    transform: translateX(100vw) !important;
  }

  100% {
    transform: translateX(-100vw) !important;
  }
}

.crypto-ticker-header .moving-ticker {
  align-items: center !important;
  animation: 60s linear infinite tickerMove !important;
  display: flex !important;
}

.crypto-ticker-header .moving-ticker:hover, .crypto-ticker-header .motion-div:hover {
  animation-play-state: paused !important;
}

.crypto-ticker-item {
  box-shadow: none !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  min-width: 220px !important;
  max-width: 220px !important;
  margin: 0 .5rem !important;
  padding: .5rem 1.25rem !important;
  transition: all .3s !important;
}

.crypto-ticker-item:hover {
  box-shadow: none !important;
  background: none !important;
  border: none !important;
  transform: none !important;
}

.ticker-item, .crypto-ticker-item {
  z-index: 5 !important;
  position: relative !important;
  overflow: visible !important;
}

.ticker-item * {
  z-index: 6 !important;
  position: relative !important;
}

.crypto-ticker-item .price-updated {
  animation: .6s ease-out priceUpdate;
}

.crypto-ticker-scroll {
  animation: linear infinite ticker-scroll;
}

@keyframes ticker-scroll {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes priceUpdate {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

.price-updated {
  animation: .6s ease-out priceUpdate;
}

@media (width <= 768px) {
  .crypto-ticker-header {
    top: calc(var(--header-height)  + var(--ticker-spacing)) !important;
  }

  .crypto-ticker-item {
    background: none !important;
    border: none !important;
    padding: .375rem .75rem !important;
  }

  .crypto-ticker-item:hover {
    background: none !important;
    border: none !important;
  }
}

@media (width <= 480px) {
  .crypto-ticker-header {
    display: none !important;
  }
}

@media (width <= 767px) {
  .crypto-ticker-header {
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    display: none !important;
    overflow: hidden !important;
  }

  :root {
    --ticker-height: 0rem;
    --total-header-height: var(--mobile-total-header-height);
  }

  main {
    padding-top: calc(var(--mobile-total-header-height)  + .25rem) !important;
  }

  .min-h-screen {
    padding-top: .25rem !important;
  }

  .landing-page, [data-section="home"] {
    margin-top: 0 !important;
    padding-top: .25rem !important;
  }

  :is(h1:contains("#1 Crypto Exchange"), h1:contains("Limitless Web3.0")) {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .hero-section, .landing-page .hero-section {
    margin-top: 0 !important;
    padding-top: .25rem !important;
  }

  motion-div {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .max-w-7xl, .container {
    margin-top: 0 !important;
    padding-top: .25rem !important;
  }
}

.staking-page .rating-stars svg, .wallets-page .rating-stars svg, [data-section="staking"] .rating-stars svg, [data-section="wallets"] .rating-stars svg, [data-section="portfolio"] .rating-stars svg, .staking-page .lucide-star, .wallets-page .lucide-star, [data-section="staking"] .lucide-star, [data-section="wallets"] .lucide-star, [data-section="portfolio"] .lucide-star, .text-yellow-400.fill-yellow-400 {
  color: #fbbf24 !important;
  fill: #fbbf24 !important;
  stroke: none !important;
}

.text-gray-300.fill-none {
  color: #d1d5db !important;
  fill: none !important;
  stroke: #d1d5db !important;
  stroke-width: 1.5px !important;
}

svg.lucide-star {
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
}

.rating-stars {
  align-items: center !important;
  gap: .125rem !important;
  display: flex !important;
}

.rating-stars .text-yellow-400, .rating-stars .fill-yellow-400, [class*="rating"] .text-yellow-400, [class*="rating"] .fill-yellow-400 {
  color: #fbbf24 !important;
  fill: #fbbf24 !important;
  stroke: none !important;
}

.rating-stars .text-gray-300, .rating-stars .fill-none, [class*="rating"] .text-gray-300, [class*="rating"] .fill-none {
  color: #d1d5db !important;
  fill: none !important;
  stroke: #d1d5db !important;
  stroke-width: 1.5px !important;
}

.rating-stars svg:hover {
  transition: transform .2s !important;
  transform: scale(1.1) !important;
}

.w-3.h-3.lucide-star {
  width: .75rem !important;
  height: .75rem !important;
}

.staking-platform-card .lucide-star, .wallet-card .lucide-star, .premium-wallet-card .lucide-star {
  color: #fbbf24 !important;
  fill: #fbbf24 !important;
  stroke: none !important;
}

.platform-rating {
  align-items: center !important;
  gap: .25rem !important;
  display: flex !important;
}

.platform-rating .lucide-star {
  flex-shrink: 0 !important;
  width: .75rem !important;
  height: .75rem !important;
}

.text-warning.fill-current {
  color: #fbbf24 !important;
  fill: #fbbf24 !important;
}

.glass-card .lucide-star, .card .lucide-star {
  opacity: 1 !important;
  visibility: visible !important;
}

svg[class*="lucide-star"], .lucide-star, [data-lucide="star"] {
  --star-filled-color: #fbbf24;
  --star-empty-color: #d1d5db;
}

svg[class*="lucide-star"].text-yellow-400, .lucide-star.text-yellow-400, svg[class*="lucide-star"].fill-yellow-400, .lucide-star.fill-yellow-400 {
  color: var(--star-filled-color) !important;
  fill: var(--star-filled-color) !important;
  stroke: none !important;
}

svg[class*="lucide-star"].text-gray-300, .lucide-star.text-gray-300, svg[class*="lucide-star"].fill-none, .lucide-star.fill-none {
  color: var(--star-empty-color) !important;
  fill: none !important;
  stroke: var(--star-empty-color) !important;
  stroke-width: 1.5px !important;
}

.crypto-markets {
  width: 100vw !important;
  margin-top: -4rem !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding-top: 0 !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
}

.crypto-markets .crypto-markets-content {
  width: 100% !important;
  max-width: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.crypto-markets-page, .crypto-markets .text-center {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.crypto-markets motion-div:first-child {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
}

.crypto-markets h1 {
  margin-top: 0 !important;
  margin-bottom: .75rem !important;
  line-height: 1.1 !important;
}

.crypto-markets p {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}

.crypto-markets .badge {
  margin-bottom: .5rem !important;
}

.crypto-markets .mb-8 {
  margin-bottom: .75rem !important;
}

.crypto-markets .mb-6 {
  margin-bottom: .5rem !important;
}

.crypto-markets .mb-4 {
  margin-bottom: .25rem !important;
}

.crypto-markets .mb-2 {
  margin-bottom: .125rem !important;
}

.crypto-markets .mt-8 {
  margin-top: 1rem !important;
}

.crypto-markets .mt-6 {
  margin-top: .75rem !important;
}

.crypto-markets .mt-4 {
  margin-top: .5rem !important;
}

.crypto-markets .mt-2 {
  margin-top: .25rem !important;
}

.crypto-markets .py-8 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.crypto-markets .py-6 {
  padding-top: .75rem !important;
  padding-bottom: .75rem !important;
}

.crypto-markets .py-4 {
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
}

.crypto-markets .pt-8 {
  padding-top: 1rem !important;
}

.crypto-markets .pt-6 {
  padding-top: .75rem !important;
}

.crypto-markets .pt-4 {
  padding-top: .5rem !important;
}

.crypto-markets .pt-2 {
  padding-top: .25rem !important;
}

[data-section="markets"] main {
  padding-top: calc(var(--total-header-height)  - 2rem) !important;
}

.crypto-markets .min-h-screen, .crypto-markets motion-div, .crypto-markets-page.min-h-screen, .crypto-markets-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body:has([data-section="markets"]) main {
  padding-top: var(--total-header-height) !important;
}

.crypto-ticker-header + .crypto-markets, .crypto-ticker-scrollable + .crypto-markets {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

[data-section="markets"] main {
  padding-top: calc(var(--total-header-height)  - .5rem) !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
}

.crypto-markets .card {
  box-sizing: border-box !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.crypto-markets .table {
  width: 100% !important;
  min-width: 100% !important;
}

.crypto-markets motion-div {
  width: 100% !important;
  max-width: none !important;
}

.crypto-markets {
  position: relative !important;
}

.crypto-markets:before {
  content: "" !important;
  z-index: -1 !important;
  background: #1c1c1c !important;
  width: 100vw !important;
  display: block !important;
  position: absolute !important;
  inset: 0 calc(50% - 50vw) !important;
}

@media (width >= 1024px) {
  .crypto-markets {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}

.crypto-markets-full-width {
  width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
}

.crypto-markets .crypto-markets-full-width.card {
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
}

.crypto-markets .crypto-markets-full-width .max-w-7xl {
  max-width: 80rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

@media (width <= 1024px) {
  .crypto-markets .crypto-markets-full-width .max-w-7xl {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

@media (width <= 768px) {
  .crypto-markets .crypto-markets-full-width .max-w-7xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

.crypto-markets-page.min-h-screen {
  margin-top: -3rem !important;
}

body:has([data-section="markets"]) .crypto-ticker-scrollable {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

[data-section="markets"] {
  transform: translateY(-2rem) !important;
}

.crypto-markets .max-w-7xl {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.crypto-markets .text-center {
  margin-top: 0 !important;
  margin-bottom: .5rem !important;
  padding-top: 0 !important;
}

.crypto-markets .text-center.mb-2 {
  margin-bottom: .5rem !important;
}

.crypto-markets .mb-1 {
  margin-bottom: .25rem !important;
}

.enhanced-dex-explorer {
  margin-top: -1rem !important;
  padding-top: .5rem !important;
}

.enhanced-dex-explorer .dex-explorer-content, .enhanced-dex-explorer .text-center {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.enhanced-dex-explorer h1 {
  margin-top: 0 !important;
  margin-bottom: .5rem !important;
  line-height: 1.1 !important;
}

.enhanced-dex-explorer p {
  margin-top: 0 !important;
  margin-bottom: .75rem !important;
}

.enhanced-dex-explorer .badge, .enhanced-dex-explorer .grid {
  margin-bottom: .5rem !important;
}

.enhanced-dex-explorer .space-y-4 > * + * {
  margin-top: .75rem !important;
}

.enhanced-dex-explorer .space-y-3 > * + * {
  margin-top: .5rem !important;
}

.crypto-markets .max-w-7xl, .enhanced-dex-explorer .max-w-7xl {
  padding-top: .25rem !important;
  padding-bottom: 0 !important;
}

[data-page="enhanced-dex-explorer"] main {
  padding-top: calc(var(--total-header-height)  + .25rem) !important;
}

.enhanced-dex-explorer .min-h-screen, .enhanced-dex-explorer motion-div {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.enhanced-dex-explorer .mb-8 {
  margin-bottom: 1rem !important;
}

.enhanced-dex-explorer .mb-6 {
  margin-bottom: .75rem !important;
}

.enhanced-dex-explorer .mb-4 {
  margin-bottom: .5rem !important;
}

.enhanced-dex-explorer .mb-2 {
  margin-bottom: .25rem !important;
}

.enhanced-dex-explorer .mt-8 {
  margin-top: 1rem !important;
}

.enhanced-dex-explorer .mt-6 {
  margin-top: .75rem !important;
}

.enhanced-dex-explorer .mt-4 {
  margin-top: .5rem !important;
}

.enhanced-dex-explorer .mt-2 {
  margin-top: .25rem !important;
}

.enhanced-dex-explorer .py-8 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.enhanced-dex-explorer .py-6 {
  padding-top: .75rem !important;
  padding-bottom: .75rem !important;
}

.enhanced-dex-explorer .py-4 {
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
}

.enhanced-dex-explorer .pt-8 {
  padding-top: 1rem !important;
}

.enhanced-dex-explorer .pt-6 {
  padding-top: .75rem !important;
}

.enhanced-dex-explorer .pt-4 {
  padding-top: .5rem !important;
}

.enhanced-dex-explorer .pt-2 {
  padding-top: .25rem !important;
}

.crypto-exchange-box input[placeholder*="Search currencies"], .crypto-exchange-box input[placeholder*="Search for"], [data-component="crypto-exchange-box"] input[placeholder*="Search"], [data-component="exchange-box"] input[placeholder*="Search"], .currency-dropdown input[type="text"], .currency-search-input {
  scroll-behavior: auto !important;
  -webkit-scroll-behavior: auto !important;
  -moz-scroll-behavior: auto !important;
  -ms-scroll-behavior: auto !important;
  outline-offset: 0 !important;
  will-change: auto !important;
  contain: layout !important;
  outline: none !important;
  scroll-margin-top: 0 !important;
  scroll-margin-bottom: 0 !important;
  scroll-padding-top: 0 !important;
  scroll-padding-bottom: 0 !important;
  position: relative !important;
  transform: none !important;
}

.crypto-exchange-box .absolute, .crypto-exchange-box .relative, [data-component="crypto-exchange-box"] .absolute, [data-component="crypto-exchange-box"] .relative, .currency-dropdown, .currency-dropdown-container {
  scroll-behavior: auto !important;
  -webkit-scroll-behavior: auto !important;
  contain: layout !important;
  isolation: auto !important;
  scroll-margin: 0 !important;
  scroll-padding: 0 !important;
}

.crypto-exchange-box .z-50, .crypto-exchange-box .z-40, [data-component="crypto-exchange-box"] .z-50, [data-component="crypto-exchange-box"] .z-40, .currency-dropdown-list {
  scroll-behavior: auto !important;
  will-change: auto !important;
  contain: layout style !important;
  backface-visibility: hidden !important;
  scroll-margin: 0 !important;
  scroll-padding: 0 !important;
  position: absolute !important;
  transform: translateZ(0) !important;
}

.crypto-exchange-box motion-div, [data-component="crypto-exchange-box"] motion-div, motion-div[class*="absolute"], motion-div[class*="z-50"] {
  scroll-behavior: auto !important;
  will-change: auto !important;
  contain: layout !important;
  scroll-margin: 0 !important;
  scroll-padding: 0 !important;
  transform: translateZ(0) !important;
}

body:has(.crypto-exchange-box input:focus), html:has(.crypto-exchange-box input:focus) {
  scroll-behavior: auto !important;
  -webkit-scroll-behavior: auto !important;
  overflow-anchor: none !important;
}

.crypto-exchange-box *, [data-component="crypto-exchange-box"] *, .currency-dropdown * {
  scroll-behavior: auto !important;
  -webkit-scroll-behavior: auto !important;
  -moz-scroll-behavior: auto !important;
  will-change: auto !important;
  scroll-margin: 0 !important;
  scroll-padding: 0 !important;
}

.crypto-exchange-box input:focus, [data-component="crypto-exchange-box"] input:focus, .currency-dropdown input:focus {
  caret-color: #000 !important;
  outline: none !important;
  scroll-margin-top: 0 !important;
  scroll-margin-bottom: 0 !important;
}

main:has(.crypto-exchange-box input:focus) {
  scroll-behavior: auto !important;
  overflow-anchor: none !important;
}

.crypto-exchange-widget, .crypto-exchange-box-modern-container, [data-component="CryptoExchangeBoxModern"] {
  scroll-behavior: auto !important;
  contain: layout !important;
  isolation: isolate !important;
  scroll-margin: 0 !important;
  scroll-padding: 0 !important;
}

.crypto-exchange-widget *, .crypto-exchange-box-modern-container *, [data-component="CryptoExchangeBoxModern"] * {
  scroll-behavior: auto !important;
  will-change: auto !important;
  scroll-margin: 0 !important;
  scroll-padding: 0 !important;
}

[data-framer-motion] input, motion-div input {
  scroll-behavior: auto !important;
  will-change: auto !important;
  scroll-margin: 0 !important;
}

.crypto-exchange-widget-new .search-container-fixed {
  z-index: 100 !important;
  background: #fff !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 10px !important;
  position: sticky !important;
  top: 0 !important;
  box-shadow: 0 2px 4px #0000000d !important;
}

.crypto-exchange-widget-new .search-container-fixed .relative {
  align-items: center !important;
  width: 100% !important;
  display: flex !important;
  position: relative !important;
}

.crypto-exchange-widget-new .search-container-fixed .lucide-search {
  color: #9ca3af !important;
  pointer-events: none !important;
  z-index: 30 !important;
  stroke-width: 2px !important;
  width: 16px !important;
  height: 16px !important;
  position: absolute !important;
  top: 8px !important;
  left: 10px !important;
}

.crypto-exchange-widget-new .search-container-fixed input {
  color: #000 !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  width: 100% !important;
  height: 32px !important;
  padding: 6px 12px 6px 36px !important;
  font-size: 14px !important;
  line-height: 20px !important;
  position: relative !important;
}

.crypto-exchange-widget-new .search-container-fixed input:focus {
  border-color: #10b981 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px #10b9811a !important;
}

.crypto-exchange-widget-new .search-container-fixed input:hover {
  border-color: #9ca3af !important;
}

.crypto-exchange-widget-new .search-container-fixed input:focus + .lucide-search {
  color: #10b981 !important;
}

.crypto-exchange-widget-new .search-container-fixed .relative .lucide-search {
  color: #9ca3af !important;
  pointer-events: none !important;
  z-index: 30 !important;
  stroke-width: 2px !important;
  width: 16px !important;
  height: 16px !important;
  position: absolute !important;
  top: 8px !important;
  left: 10px !important;
  transform: none !important;
}

.crypto-exchange-widget-new .search-container-fixed {
  will-change: auto !important;
  contain: layout !important;
  transform: none !important;
}

.crypto-exchange-widget-new .search-container-fixed .relative {
  will-change: auto !important;
  contain: layout !important;
  width: 100% !important;
  height: 32px !important;
  display: block !important;
  position: relative !important;
  overflow: visible !important;
  transform: none !important;
}

.crypto-exchange-widget-new .search-container-fixed .relative .lucide-search {
  color: #9ca3af !important;
  pointer-events: none !important;
  z-index: 5 !important;
  stroke-width: 2px !important;
  box-sizing: border-box !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  top: 8px !important;
  left: 10px !important;
  transform: none !important;
}

.crypto-exchange-widget-new .search-container-fixed .relative input {
  z-index: 1 !important;
  box-sizing: border-box !important;
  color: #000 !important;
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  width: 100% !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 6px 12px 6px 36px !important;
  font-size: 14px !important;
  line-height: 20px !important;
  position: relative !important;
}

.crypto-exchange-widget-new [data-radix-select-content] {
  max-height: 15rem !important;
  position: relative !important;
  overflow-y: auto !important;
}

.crypto-exchange-widget-new [data-radix-select-viewport] {
  position: relative !important;
}

.crypto-exchange-widget-new .relative:has(input[placeholder*="Search"]) {
  z-index: 100 !important;
  background: #fff !important;
  position: sticky !important;
  top: 0 !important;
  box-shadow: 0 1px 3px #0000001a !important;
}

.crypto-exchange-widget-new [data-radix-select-content] > .search-container-fixed, .crypto-exchange-widget-new [data-radix-select-viewport] > .search-container-fixed, .crypto-exchange-widget-new .crypto-dropdown-content > .search-container-fixed {
  z-index: 100 !important;
  background: #fff !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 10px !important;
  position: sticky !important;
  top: 0 !important;
  box-shadow: 0 2px 4px #0000000d !important;
}

.crypto-exchange-widget-new .search-container-fixed .lucide-search, .crypto-exchange-widget-new .search-container-fixed svg[class*="lucide-search"] {
  color: #9ca3af !important;
  pointer-events: none !important;
  z-index: 30 !important;
  stroke-width: 2px !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  top: 8px !important;
  left: 10px !important;
  transform: none !important;
}

.crypto-exchange-widget-new .search-container-fixed input[type="text"] {
  color: #000 !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  width: 100% !important;
  height: 32px !important;
  padding: 6px 12px 6px 36px !important;
  font-size: 14px !important;
  line-height: 20px !important;
  position: relative !important;
}

.crypto-exchange-widget-new .search-container-fixed input[type="text"]:focus {
  border-color: #10b981 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px #10b9811a !important;
}

.crypto-exchange-widget-new .search-container-fixed input[type="text"]:focus + .lucide-search {
  color: #10b981 !important;
}

.crypto-dropdown-content {
  flex-direction: column !important;
  max-height: 15rem !important;
  display: flex !important;
  position: relative !important;
  overflow: hidden !important;
}

.search-container-fixed {
  z-index: 100 !important;
  background: #fff !important;
  border-bottom: 1px solid #e5e7eb !important;
  flex-shrink: 0 !important;
  padding: .75rem !important;
  position: sticky !important;
  top: 0 !important;
  box-shadow: 0 2px 4px #0000000d !important;
}

.search-input-fixed {
  color: #000 !important;
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  border-radius: .375rem !important;
  width: 100% !important;
  height: 2.25rem !important;
  padding: .5rem 1rem .5rem 2.5rem !important;
  font-size: .875rem !important;
}

.search-input-fixed:focus {
  border-color: #10b981 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px #10b9811a !important;
}

.crypto-dropdown-content [data-radix-select-item] {
  z-index: 1 !important;
  position: relative !important;
}

.crypto-exchange-widget-new [data-radix-select-content] {
  position: relative !important;
  overflow: hidden !important;
}

.crypto-exchange-widget-new [data-radix-select-viewport] {
  max-height: 240px !important;
  overflow-y: auto !important;
}

.crypto-exchange-widget-new .search-container-fixed {
  z-index: 9999 !important;
  background: #fff !important;
  border-bottom: 1px solid #e5e7eb !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  box-shadow: 0 2px 4px #0000001a !important;
}

.crypto-exchange-widget-new [data-radix-select-item]:first-of-type {
  margin-top: 60px !important;
}

.crypto-dropdown-content[data-radix-select-content] {
  padding-top: 0 !important;
}

.crypto-dropdown-content[data-radix-select-content] [data-radix-select-viewport] {
  padding-top: 60px !important;
}

.crypto-dropdown-content .search-container-fixed + [data-radix-select-item] {
  margin-top: 0 !important;
}

[role="listbox"] > .search-container-fixed, [data-radix-select-content] > .search-container-fixed, [data-radix-select-viewport] .search-container-fixed {
  z-index: 99999 !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border-bottom: 2px solid #e5e7eb !important;
  width: 100% !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  box-shadow: 0 4px 6px #0000001a !important;
}

.crypto-dropdown-content {
  flex-direction: column !important;
  max-height: 15rem !important;
  display: flex !important;
  overflow: hidden !important;
}

.crypto-dropdown-content .search-container-fixed {
  z-index: 1000 !important;
  background: #fff !important;
  border-bottom: 1px solid #e5e7eb !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  top: 0 !important;
  box-shadow: 0 1px 3px #0000001a !important;
}

.crypto-dropdown-content .search-input-fixed {
  z-index: 1001 !important;
  background: #fff !important;
  position: sticky !important;
  top: 0 !important;
}

.crypto-exchange-widget-new [data-radix-select-content] {
  flex-direction: column !important;
  padding: 0 !important;
  display: flex !important;
}

.crypto-exchange-widget-new [data-radix-select-viewport] {
  flex: 1 !important;
  max-height: 12rem !important;
  overflow-y: auto !important;
}

.crypto-exchange-widget-new .relative:has(.lucide-search) {
  width: 100% !important;
  display: block !important;
  position: relative !important;
}

.crypto-exchange-widget-new .relative .lucide-search {
  z-index: 10 !important;
  color: #6b7280 !important;
  pointer-events: none !important;
  stroke-width: 2px !important;
  width: 1rem !important;
  height: 1rem !important;
  position: absolute !important;
  top: 50% !important;
  left: .75rem !important;
  transform: translateY(-50%) !important;
}

.crypto-exchange-widget-new .search-container-fixed .relative {
  box-sizing: border-box !important;
  position: relative !important;
  overflow: visible !important;
}

.crypto-exchange-widget-new .search-container-fixed .relative .lucide-search {
  z-index: 15 !important;
  color: #6b7280 !important;
  pointer-events: none !important;
  stroke-width: 2px !important;
  width: 16px !important;
  height: 16px !important;
  position: absolute !important;
  top: 18px !important;
  left: 12px !important;
  transform: translateY(-50%) !important;
}

.crypto-dropdown-content > div:last-child {
  flex: 1 !important;
  max-height: 12rem !important;
  overflow-y: auto !important;
}

.transaction-status-page .features-badges {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: .25rem !important;
  width: 100% !important;
  display: flex !important;
}

@media (width >= 769px) {
  .transaction-status-page .features-badges {
    flex-flow: wrap !important;
    gap: .5rem !important;
  }
}

@media (width <= 768px) {
  .transaction-status-page [data-cell="features"], .transaction-status-page td:nth-child(3) {
    vertical-align: top !important;
    width: auto !important;
    min-width: 130px !important;
    max-width: 150px !important;
    padding: .75rem .5rem !important;
    overflow: visible !important;
  }

  .transaction-status-page .features-badges, .transaction-status-page td:nth-child(3) > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .375rem !important;
    width: 100% !important;
    max-width: 130px !important;
    display: flex !important;
    overflow: visible !important;
  }

  .transaction-status-page .features-badges .badge, .transaction-status-page td:nth-child(3) .badge {
    text-align: center !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    border-radius: 6px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: .25rem !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: 110px !important;
    min-height: 26px !important;
    margin-bottom: .25rem !important;
    padding: .25rem .5rem !important;
    font-size: .6875rem !important;
    line-height: 1.3 !important;
    display: flex !important;
    overflow: visible !important;
  }

  .transaction-status-page .features-badges .badge svg, .transaction-status-page td:nth-child(3) .badge svg {
    flex-shrink: 0 !important;
    width: .75rem !important;
    height: .75rem !important;
  }

  .transaction-status-page .table-container {
    -webkit-overflow-scrolling: touch !important;
    overflow-x: auto !important;
  }

  .transaction-status-page table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 650px !important;
  }

  .transaction-status-page table th:first-child, .transaction-status-page table td:first-child {
    width: 30% !important;
    min-width: 140px !important;
  }

  .transaction-status-page table th:nth-child(2), .transaction-status-page table td:nth-child(2) {
    width: 15% !important;
    min-width: 70px !important;
  }

  .transaction-status-page table th:nth-child(3), .transaction-status-page table td:nth-child(3) {
    width: 35% !important;
    min-width: 140px !important;
  }

  .transaction-status-page table th:nth-child(4), .transaction-status-page table td:nth-child(4) {
    width: 20% !important;
    min-width: 100px !important;
  }

  .transaction-status-page .badge {
    letter-spacing: .025em !important;
    font-weight: 500 !important;
  }

  .transaction-status-page .badge:contains("Featured") {
    min-width: 65px !important;
  }

  .transaction-status-page .badge:contains("Stable") {
    min-width: 55px !important;
  }

  .transaction-status-page .badge:contains("Fixed Rate") {
    min-width: 80px !important;
  }

  .transaction-status-page .badge span {
    white-space: nowrap !important;
    text-overflow: unset !important;
    display: inline !important;
    overflow: visible !important;
  }
}

@media (width <= 480px) {
  .transaction-status-page .features-badges .badge {
    max-width: 95px !important;
    min-height: 20px !important;
    padding: .1875rem .25rem !important;
    font-size: .5625rem !important;
  }

  .transaction-status-page .features-badges .badge svg {
    width: .625rem !important;
    height: .625rem !important;
  }

  .transaction-status-page .table-container {
    margin: 0 -1rem !important;
    padding: 0 1rem !important;
  }

  .transaction-status-page .currency-name {
    font-size: .8125rem !important;
  }

  .transaction-status-page .currency-symbol {
    font-size: .6875rem !important;
  }
}

@media (width <= 768px) {
  .transaction-status-page .badge:active {
    transition: transform .1s !important;
    transform: scale(.95) !important;
  }

  .transaction-status-page .badge {
    touch-action: manipulation !important;
    min-height: 32px !important;
  }
}

.transaction-status-page .features-cell-content {
  flex-direction: column !important;
  gap: .375rem !important;
  width: 100% !important;
  max-width: 120px !important;
  display: flex !important;
}

.transaction-status-page .badge-container {
  flex-direction: column !important;
  gap: .25rem !important;
  width: 100% !important;
  display: flex !important;
  overflow: visible !important;
}

.transaction-status-page .badge {
  text-overflow: clip !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

:is(.transaction-status-page .badge:contains("Featured"), .transaction-status-page .badge:contains("Stable"), .transaction-status-page .badge:contains("Fixed Rate")) {
  text-overflow: unset !important;
  white-space: nowrap !important;
  width: auto !important;
  min-width: max-content !important;
  overflow: visible !important;
}

@media (width <= 768px) {
  .transaction-status-page .features-badges {
    width: 100% !important;
    overflow: visible !important;
  }

  .transaction-status-page .features-badges > * {
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
  }

  .transaction-status-page .badge span, .transaction-status-page .badge {
    text-overflow: none !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    -webkit-hyphens: none !important;
    hyphens: none !important;
    overflow: visible !important;
  }

  .transaction-status-page .badge:contains("Featured") {
    width: 75px !important;
    min-width: 75px !important;
  }

  .transaction-status-page .badge:contains("Stable") {
    width: 65px !important;
    min-width: 65px !important;
  }

  .transaction-status-page .badge:contains("Fixed Rate") {
    width: 85px !important;
    min-width: 85px !important;
  }

  .transaction-status-page [data-cell="features"] * {
    text-overflow: unset !important;
    word-wrap: normal !important;
    overflow: visible !important;
  }

  .transaction-status-page .currency-name, .transaction-status-page td:first-child .text-white.font-medium {
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 130px !important;
    font-size: .8125rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    display: block !important;
    overflow: hidden !important;
  }

  .transaction-status-page .currency-symbol, .transaction-status-page td:first-child .text-gray-400.text-sm {
    opacity: .8 !important;
    margin-top: .125rem !important;
    font-size: .6875rem !important;
    font-weight: 500 !important;
  }

  .transaction-status-page .flex.items-center.gap-3, .transaction-status-page td:first-child .flex {
    align-items: flex-start !important;
    gap: .5rem !important;
    padding-top: .25rem !important;
  }

  .transaction-status-page .crypto-icon-sm {
    flex-shrink: 0 !important;
    width: 1.5rem !important;
    min-width: 1.5rem !important;
    height: 1.5rem !important;
    min-height: 1.5rem !important;
    margin-top: .125rem !important;
  }

  .transaction-status-page .currency-name + .currency-symbol, .transaction-status-page td:first-child > div > div:last-child {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .transaction-status-page table td:first-child {
    vertical-align: top !important;
    width: 35% !important;
    min-width: 140px !important;
    max-width: 160px !important;
    padding: .75rem .5rem !important;
  }

  .transaction-status-page table th:nth-child(2), .transaction-status-page table td:nth-child(2) {
    display: none !important;
  }

  .transaction-status-page table th:nth-child(3), .transaction-status-page table td:nth-child(3) {
    width: 40% !important;
  }

  .transaction-status-page table th:nth-child(4), .transaction-status-page table td:nth-child(4) {
    width: 25% !important;
  }

  .transaction-status-page .currency-name[title] {
    cursor: help !important;
    position: relative !important;
  }

  .transaction-status-page .currency-name {
    word-break: break-word !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
    line-height: 1.2 !important;
  }

  .transaction-status-page td:first-child {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
  }

  .transaction-status-page .table-container {
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 1rem !important;
    overflow-x: auto !important;
  }

  .transaction-status-page table {
    width: 100% !important;
    min-width: 500px !important;
  }
}

@media (width <= 480px) {
  .transaction-status-page .currency-name {
    max-width: 110px !important;
    font-size: .75rem !important;
    line-height: 1.2 !important;
  }

  .transaction-status-page .currency-symbol {
    font-size: .625rem !important;
  }

  .transaction-status-page .crypto-icon-sm {
    width: 1.25rem !important;
    min-width: 1.25rem !important;
    height: 1.25rem !important;
    min-height: 1.25rem !important;
  }

  .transaction-status-page table td:first-child {
    width: 40% !important;
    max-width: 130px !important;
    padding: .5rem .375rem !important;
  }

  .transaction-status-page table th:nth-child(3), .transaction-status-page table td:nth-child(3) {
    width: 35% !important;
  }

  .transaction-status-page table th:nth-child(4), .transaction-status-page table td:nth-child(4) {
    width: 25% !important;
  }
}

.currency-name-mobile-optimized {
  -webkit-line-clamp: 2 !important;
  text-overflow: ellipsis !important;
  -webkit-box-orient: vertical !important;
  max-height: 2.4em !important;
  line-height: 1.2 !important;
  display: -webkit-box !important;
  overflow: hidden !important;
}

@media (width <= 768px) {
  :is(.transaction-status-page .currency-name:contains("Binance Smart Chain"), .transaction-status-page .currency-name:contains("(Binance Smart Chain)")) {
    word-spacing: -.1em !important;
    max-width: 120px !important;
  }

  :is(.transaction-status-page .currency-name:contains("Ethereum"), .transaction-status-page .currency-name:contains("(Ethereum)")) {
    max-width: 110px !important;
  }

  :is(.transaction-status-page .currency-name:contains("Polygon"), .transaction-status-page .currency-name:contains("(Polygon)")) {
    max-width: 105px !important;
  }

  .transaction-status-page .table-container {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px #0000001a !important;
  }

  .transaction-status-page table {
    table-layout: fixed !important;
  }

  .transaction-status-page tbody tr:nth-child(2n) {
    background: #ffffff05 !important;
  }

  .transaction-status-page tbody tr:hover {
    background: #00d0840d !important;
    border-color: #00d08433 !important;
  }

  .transaction-status-page .currency-name {
    text-shadow: 0 1px 2px #00000080 !important;
  }

  .transaction-status-page .currency-symbol {
    text-shadow: 0 1px 1px #0000004d !important;
  }

  .transaction-status-page .currency-name {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
  }

  .transaction-status-page td:first-child {
    overflow: hidden !important;
  }

  .transaction-status-page .flex.items-center {
    width: 100% !important;
    min-width: 0 !important;
  }

  .transaction-status-page .flex.items-center > div:last-child {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .transaction-status-page .table-container:after {
    content: "← Scroll to see more →";
    color: #9ca3af;
    white-space: nowrap;
    pointer-events: none;
    font-size: .75rem;
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .transaction-status-page .table-container::-webkit-scrollbar {
    background: #ffffff1a;
    border-radius: 2px;
    height: 4px;
  }

  .transaction-status-page .table-container::-webkit-scrollbar-thumb {
    background: #00d08480;
    border-radius: 2px;
  }

  .transaction-status-page .table-container::-webkit-scrollbar-thumb:hover {
    background: #00d084b3;
  }
}

.currency-name-smart {
  position: relative;
}

.currency-name-smart:before {
  content: attr(data-short-name);
}

@media (width >= 769px) {
  .currency-name-smart:before {
    content: attr(data-full-name);
  }
}

@media (width <= 768px) {
  .transaction-status-page th:first-child {
    width: 40% !important;
  }

  .transaction-status-page th:nth-child(3) {
    width: 35% !important;
  }

  .transaction-status-page th:nth-child(4) {
    width: 25% !important;
  }

  .transaction-status-page .block.sm\\:hidden .space-y-4 {
    gap: .75rem !important;
    padding: 1rem !important;
  }

  .transaction-status-page .block.sm\\:hidden .card {
    background: #242424 !important;
    border: 1px solid #ffffff1a !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    transition: all .2s !important;
  }

  .transaction-status-page .block.sm\\:hidden .card:hover {
    background: #2a2a2a !important;
    border-color: #00d08433 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px #00d0841a !important;
  }

  .transaction-status-page .card .text-white.font-semibold {
    word-break: break-word !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
    max-width: 200px !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }

  .transaction-status-page .card .badge {
    border-radius: 4px !important;
    align-items: center !important;
    gap: .25rem !important;
    padding: .1875rem .375rem !important;
    font-size: .6875rem !important;
    font-weight: 500 !important;
    display: inline-flex !important;
  }

  .transaction-status-page .card .badge svg {
    flex-shrink: 0 !important;
    width: .625rem !important;
    height: .625rem !important;
  }

  .transaction-status-page .card .flex.items-start.gap-3 {
    gap: .75rem !important;
  }

  .transaction-status-page .card .crypto-icon-sm {
    flex-shrink: 0 !important;
    width: 1.75rem !important;
    min-width: 1.75rem !important;
    height: 1.75rem !important;
    min-height: 1.75rem !important;
    margin-top: .125rem !important;
  }

  .transaction-status-page .card .flex-1.min-w-0 {
    overflow: hidden !important;
  }

  .transaction-status-page .card .flex.flex-wrap.gap-1 {
    gap: .375rem !important;
    margin-top: .5rem !important;
  }

  .transaction-status-page .card .space-y-2 {
    gap: .375rem !important;
  }

  .transaction-status-page .card .space-y-2 > div:first-child {
    margin-bottom: .25rem !important;
  }
}

@media (width <= 480px) {
  .transaction-status-page .block.sm\\:hidden .card {
    margin: 0 .5rem !important;
    padding: .75rem !important;
  }

  .transaction-status-page .card .text-white.font-semibold {
    max-width: 160px !important;
    font-size: .8125rem !important;
    line-height: 1.25 !important;
  }

  .transaction-status-page .card .badge {
    padding: .125rem .25rem !important;
    font-size: .625rem !important;
  }

  .transaction-status-page .card .badge svg {
    width: .5rem !important;
    height: .5rem !important;
  }

  .transaction-status-page .card .crypto-icon-sm {
    width: 1.5rem !important;
    min-width: 1.5rem !important;
    height: 1.5rem !important;
    min-height: 1.5rem !important;
  }

  .transaction-status-page .card .flex.items-start.gap-3 {
    gap: .5rem !important;
  }
}

@media (width >= 769px) {
  .transaction-status-page .hidden.sm\\:block table td:first-child {
    width: 35% !important;
    min-width: 200px !important;
    max-width: 280px !important;
    padding: 1rem .75rem !important;
  }

  .transaction-status-page .hidden.sm\\:block .currency-name {
    word-break: break-word !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
    max-width: 240px !important;
    font-size: .9375rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
  }

  .transaction-status-page .hidden.sm\\:block .currency-symbol {
    opacity: .8 !important;
    margin-top: .25rem !important;
    font-size: .8125rem !important;
  }

  .transaction-status-page .hidden.sm\\:block .crypto-icon-sm {
    width: 2rem !important;
    min-width: 2rem !important;
    height: 2rem !important;
    min-height: 2rem !important;
  }

  .transaction-status-page .hidden.sm\\:block tbody tr:hover {
    background: #00d08408 !important;
    border-left: 3px solid #00d08480 !important;
  }

  .transaction-status-page .hidden.sm\\:block .badge {
    padding: .25rem .5rem !important;
    font-size: .75rem !important;
  }

  .transaction-status-page .hidden.sm\\:block .badge svg {
    width: .75rem !important;
    height: .75rem !important;
  }
}

.transaction-status-page .currency-name {
  position: relative;
}

.currency-name-abbreviated {
  display: inline;
}

.currency-name-truncated {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}

@media (width <= 768px) {
  .currency-name-multiline {
    white-space: normal !important;
    word-break: break-word !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
    -webkit-line-clamp: 2 !important;
    text-overflow: ellipsis !important;
    -webkit-box-orient: vertical !important;
    max-width: 130px !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    overflow: hidden !important;
  }
}

.transaction-status-table-enhanced {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

.transaction-status-table-enhanced td, .transaction-status-table-enhanced th {
  vertical-align: top !important;
  border-bottom: 1px solid #ffffff1a !important;
  padding: .75rem !important;
}

.transaction-status-page .table-container {
  position: relative;
}

@media (width <= 768px) {
  .transaction-status-page .table-container:before {
    content: "← Scroll horizontally to see all columns →";
    color: #ffffff80;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
    font-size: .75rem;
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .transaction-status-page .table-container {
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    scrollbar-width: thin !important;
    scrollbar-color: #00d08480 #ffffff1a !important;
    overflow: auto visible !important;
  }
}

@media (width >= 1440px) {
  .transaction-status-page .hidden.sm\\:block table td:first-child {
    width: 40% !important;
    max-width: 320px !important;
  }

  .transaction-status-page .hidden.sm\\:block .currency-name {
    max-width: 280px !important;
    font-size: 1rem !important;
  }

  .transaction-status-page .hidden.sm\\:block .crypto-icon-sm {
    width: 2.25rem !important;
    min-width: 2.25rem !important;
    height: 2.25rem !important;
    min-height: 2.25rem !important;
  }
}

@media (width <= 768px) {
  .landing-page .bg-gradient-to-r button[class*="px-6"], [data-section="home"] .bg-gradient-to-r button[class*="px-6"], .min-h-screen .bg-gradient-to-r button[class*="px-6"] {
    border-radius: .5rem !important;
    height: auto !important;
    min-height: 2.5rem !important;
    padding: .625rem 1.25rem !important;
    font-size: .875rem !important;
    line-height: 1.3 !important;
    transform: none !important;
  }

  [data-page="home"] button:contains("Start Trading Now") {
    border-radius: .5rem !important;
    height: auto !important;
    min-height: 2.5rem !important;
    padding: .625rem 1.25rem !important;
    font-size: .875rem !important;
    line-height: 1.3 !important;
    transform: none !important;
  }

  .landing-page button:contains("Start Trading Now") {
    border-radius: .5rem !important;
    height: auto !important;
    min-height: 2.5rem !important;
    padding: .625rem 1.25rem !important;
    font-size: .875rem !important;
    line-height: 1.3 !important;
    transform: none !important;
  }

  .hero-section button:contains("Start Trading Now") {
    border-radius: .5rem !important;
    height: auto !important;
    min-height: 2.5rem !important;
    padding: .625rem 1.25rem !important;
    font-size: .875rem !important;
    line-height: 1.3 !important;
    transform: none !important;
  }

  button[class*="bg-gradient-to-r"][class*="from-primary"]:contains("Start Trading Now") {
    border-radius: .5rem !important;
    height: auto !important;
    min-height: 2.5rem !important;
    padding: .625rem 1.25rem !important;
    font-size: .875rem !important;
    line-height: 1.3 !important;
    transform: none !important;
  }

  [data-page="home"] button:contains("Start Trading Now"):hover {
    transition: all .2s !important;
    transform: translateY(-1px)scale(1.02) !important;
  }

  .landing-page button:contains("Start Trading Now"):hover {
    transition: all .2s !important;
    transform: translateY(-1px)scale(1.02) !important;
  }

  .hero-section button:contains("Start Trading Now"):hover {
    transition: all .2s !important;
    transform: translateY(-1px)scale(1.02) !important;
  }

  button[class*="bg-gradient-to-r"][class*="from-primary"]:contains("Start Trading Now"):hover {
    transition: all .2s !important;
    transform: translateY(-1px)scale(1.02) !important;
  }

  :is([data-page="home"] button:contains("Start Trading Now") svg, .landing-page button:contains("Start Trading Now") svg, .hero-section button:contains("Start Trading Now") svg) {
    width: .875rem !important;
    height: .875rem !important;
    margin-left: .375rem !important;
  }

  :is(.hero-section .flex.flex-col.sm\\:flex-row.gap-4, .landing-page .flex.flex-col.sm\\:flex-row.gap-4, [data-section="home"] .flex.flex-col.sm\\:flex-row.gap-4) {
    justify-content: center !important;
    align-items: center !important;
    gap: .75rem !important;
  }

  :is([data-page="home"] button:contains("Start Trading Now"), .landing-page button:contains("Start Trading Now"), .hero-section button:contains("Start Trading Now")) {
    white-space: nowrap !important;
    width: auto !important;
    max-width: 200px !important;
  }

  .hero-section .space-y-4, .landing-page .space-y-4 {
    margin-bottom: 1rem !important;
  }

  .landing-page h1.text-4xl, .hero-section h1.text-4xl {
    margin-bottom: .75rem !important;
  }

  .landing-page p.text-xl, .hero-section p.text-xl {
    margin-bottom: 1rem !important;
  }
}

@media (width <= 480px) {
  :is([data-page="home"] button:contains("Start Trading Now"), .landing-page button:contains("Start Trading Now"), .hero-section button:contains("Start Trading Now")) {
    border-radius: .375rem !important;
    max-width: 180px !important;
    min-height: 2.25rem !important;
    padding: .5rem 1rem !important;
    font-size: .8125rem !important;
  }

  :is([data-page="home"] button:contains("Start Trading Now") svg, .landing-page button:contains("Start Trading Now") svg, .hero-section button:contains("Start Trading Now") svg) {
    width: .75rem !important;
    height: .75rem !important;
    margin-left: .25rem !important;
  }

  :is(.hero-section .flex.flex-col.sm\\:flex-row.gap-4, .landing-page .flex.flex-col.sm\\:flex-row.gap-4) {
    gap: .5rem !important;
  }
}

@media (width <= 768px) {
  .bg-gradient-to-r.from-primary.to-accent[class*="px-6"][class*="py-4"], .bg-gradient-to-r.from-primary.to-accent.text-white[class*="px-6"] {
    border-radius: .5rem !important;
    min-height: 2.5rem !important;
    padding: .625rem 1.25rem !important;
    font-size: .875rem !important;
  }

  .hero-section button, .landing-page button[class*="bg-gradient-to-r"] {
    align-self: center !important;
    max-width: 185px !important;
    margin: 0 auto !important;
    padding: .5rem 1rem !important;
    font-size: .8125rem !important;
    font-weight: 600 !important;
  }

  .hero-section button svg, .landing-page button[class*="bg-gradient-to-r"] svg {
    flex-shrink: 0 !important;
    width: .75rem !important;
    height: .75rem !important;
    margin-left: .375rem !important;
  }

  :is(.hero-section .flex.flex-col.sm\\:flex-row, .landing-page .flex.flex-col.sm\\:flex-row) {
    justify-content: center !important;
    align-items: center !important;
  }
}

@media (width <= 375px) {
  :is([data-page="home"] button:contains("Start Trading Now"), .landing-page button:contains("Start Trading Now"), .hero-section button:contains("Start Trading Now")) {
    border-radius: .375rem !important;
    max-width: 160px !important;
    min-height: 2rem !important;
    padding: .4375rem .875rem !important;
    font-size: .75rem !important;
  }

  :is([data-page="home"] button:contains("Start Trading Now") svg, .landing-page button:contains("Start Trading Now") svg) {
    width: .6875rem !important;
    height: .6875rem !important;
    margin-left: .25rem !important;
  }
}

@media (width <= 768px) {
  .hero-section .space-y-4 {
    text-align: center !important;
    gap: .75rem !important;
    margin-bottom: 1.25rem !important;
  }

  .hero-section h1, .landing-page h1 {
    text-align: center !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
  }

  .hero-section .gradient-text, .landing-page .gradient-text {
    line-height: 1.1 !important;
    display: block !important;
  }

  .hero-section h1 {
    margin-bottom: .75rem !important;
    font-size: 2rem !important;
    line-height: 1.1 !important;
  }

  .hero-section p {
    max-width: 90% !important;
    margin-bottom: 1rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }

  .hero-section .mt-6 {
    margin-top: 1rem !important;
  }

  .landing-page h1.text-4xl + p + div button:contains("Start Trading Now") {
    max-width: 160px !important;
    min-height: 2.25rem !important;
    padding: .4375rem .875rem !important;
    font-size: .75rem !important;
    font-weight: 500 !important;
  }

  .hero-section h1.text-4xl + p + div button:contains("Start Trading Now") {
    max-width: 160px !important;
    min-height: 2.25rem !important;
    padding: .4375rem .875rem !important;
    font-size: .75rem !important;
    font-weight: 500 !important;
  }

  motion-div h1:contains("Limitless Web3.0") ~ * button:contains("Start Trading Now") {
    max-width: 160px !important;
    min-height: 2.25rem !important;
    padding: .4375rem .875rem !important;
    font-size: .75rem !important;
    font-weight: 500 !important;
  }

  :is(.landing-page h1.text-4xl + p + div button:contains("Start Trading Now") svg, .hero-section h1.text-4xl + p + div button:contains("Start Trading Now") svg) {
    width: .6875rem !important;
    height: .6875rem !important;
    margin-left: .25rem !important;
  }

  :is(.landing-page .flex.flex-col.sm\\:flex-row.gap-4.mt-6, .hero-section .flex.flex-col.sm\\:flex-row.gap-4.mt-6) {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: .875rem !important;
  }

  :is([data-page="home"] button:contains("Start Trading Now"), .landing-page button:contains("Start Trading Now")) {
    background: linear-gradient(135deg, #00d084e6, #00c77ce6) !important;
    border: 1px solid #00d0844d !important;
    box-shadow: 0 2px 8px #00d08440 !important;
  }

  :is([data-page="home"] button:contains("Start Trading Now"):hover, .landing-page button:contains("Start Trading Now"):hover) {
    background: linear-gradient(135deg, #00d084, #00c77c) !important;
    transform: translateY(-1px)scale(1.02) !important;
    box-shadow: 0 4px 12px #00d0844d !important;
  }
}

@media (width <= 480px) {
  :is(.landing-page h1.text-4xl + p + div button:contains("Start Trading Now"), .hero-section h1.text-4xl + p + div button:contains("Start Trading Now")) {
    border-radius: .25rem !important;
    max-width: 140px !important;
    min-height: 2rem !important;
    padding: .375rem .75rem !important;
    font-size: .6875rem !important;
  }

  :is(.landing-page h1.text-4xl + p + div button:contains("Start Trading Now") svg, .hero-section h1.text-4xl + p + div button:contains("Start Trading Now") svg) {
    width: .625rem !important;
    height: .625rem !important;
    margin-left: .1875rem !important;
  }
}

@media (width <= 768px) {
  .hero-section h1 + p + div, .landing-page h1 + p + div {
    justify-content: center !important;
    margin-top: .75rem !important;
    display: flex !important;
  }

  :is(.hero-section button:contains("Start Trading Now"), .landing-page button:contains("Start Trading Now")) {
    flex-shrink: 0 !important;
    align-self: center !important;
    margin: 0 !important;
  }

  div.space-y-4:has(h1:contains("Limitless Web3.0")) + div button {
    letter-spacing: .025em !important;
    border-radius: .375rem !important;
    max-width: 150px !important;
    min-height: 2rem !important;
    padding: .375rem .75rem !important;
    font-size: .6875rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
  }

  .flex.flex-col.sm\\:flex-row:has(button:contains("Start Trading Now")) button:contains("Start Trading Now") {
    letter-spacing: .025em !important;
    border-radius: .375rem !important;
    max-width: 150px !important;
    min-height: 2rem !important;
    padding: .375rem .75rem !important;
    font-size: .6875rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
  }

  div.space-y-4:has(h1:contains("Limitless Web3.0")) + div button svg {
    stroke-width: 2.5px !important;
    width: .625rem !important;
    height: .625rem !important;
    margin-left: .1875rem !important;
  }

  .flex.flex-col.sm\\:flex-row:has(button:contains("Start Trading Now")) button svg {
    stroke-width: 2.5px !important;
    width: .625rem !important;
    height: .625rem !important;
    margin-left: .1875rem !important;
  }

  h1:contains("Limitless Web3.0") {
    margin-bottom: .625rem !important;
  }

  h1:contains("Limitless Web3.0") + p {
    margin-bottom: .75rem !important;
  }

  h1:contains("Limitless Web3.0") ~ div.flex {
    margin-top: .625rem !important;
  }

  :is(.landing-page .flex.flex-col.sm\\:flex-row.gap-4 button:first-child, .hero-section .flex.flex-col.sm\\:flex-row.gap-4 button:first-child) {
    margin: 0 auto !important;
    display: block !important;
  }

  .mobile-trading-button, button[class*="mobile-trading-button"] {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    border: 1px solid #00d0844d !important;
    border-radius: .5rem !important;
    justify-content: center !important;
    align-self: center !important;
    align-items: center !important;
    width: auto !important;
    min-width: 160px !important;
    max-width: 180px !important;
    height: auto !important;
    min-height: 2.5rem !important;
    margin: 0 auto !important;
    padding: .5rem 1rem !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    transition: all .3s !important;
    display: flex !important;
    overflow: hidden !important;
    transform: none !important;
    box-shadow: 0 4px 12px #00d08440 !important;
  }

  [data-page="home"] button:contains("Start Trading Now") {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    border: 1px solid #00d0844d !important;
    border-radius: .5rem !important;
    justify-content: center !important;
    align-self: center !important;
    align-items: center !important;
    width: auto !important;
    min-width: 160px !important;
    max-width: 180px !important;
    height: auto !important;
    min-height: 2.5rem !important;
    margin: 0 auto !important;
    padding: .5rem 1rem !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    transition: all .3s !important;
    display: flex !important;
    overflow: hidden !important;
    transform: none !important;
    box-shadow: 0 4px 12px #00d08440 !important;
  }

  .landing-page button:contains("Start Trading Now") {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    border: 1px solid #00d0844d !important;
    border-radius: .5rem !important;
    justify-content: center !important;
    align-self: center !important;
    align-items: center !important;
    width: auto !important;
    min-width: 160px !important;
    max-width: 180px !important;
    height: auto !important;
    min-height: 2.5rem !important;
    margin: 0 auto !important;
    padding: .5rem 1rem !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    transition: all .3s !important;
    display: flex !important;
    overflow: hidden !important;
    transform: none !important;
    box-shadow: 0 4px 12px #00d08440 !important;
  }

  .mobile-trading-button:hover {
    border-color: #00d08480 !important;
    transform: translateY(-1px)scale(1.02) !important;
    box-shadow: 0 6px 16px #00d08459 !important;
  }

  [data-page="home"] button:contains("Start Trading Now"):hover {
    border-color: #00d08480 !important;
    transform: translateY(-1px)scale(1.02) !important;
    box-shadow: 0 6px 16px #00d08459 !important;
  }

  .landing-page button:contains("Start Trading Now"):hover {
    border-color: #00d08480 !important;
    transform: translateY(-1px)scale(1.02) !important;
    box-shadow: 0 6px 16px #00d08459 !important;
  }

  .mobile-trading-button:active {
    transition: all .1s !important;
    transform: translateY(0)scale(.98) !important;
  }

  [data-page="home"] button:contains("Start Trading Now"):active {
    transition: all .1s !important;
    transform: translateY(0)scale(.98) !important;
  }

  .landing-page button:contains("Start Trading Now"):active {
    transition: all .1s !important;
    transform: translateY(0)scale(.98) !important;
  }

  .mobile-trading-button svg {
    stroke-width: 2.5px !important;
    flex-shrink: 0 !important;
    width: .875rem !important;
    height: .875rem !important;
    margin-left: .375rem !important;
  }

  [data-page="home"] button:contains("Start Trading Now") svg {
    stroke-width: 2.5px !important;
    flex-shrink: 0 !important;
    width: .875rem !important;
    height: .875rem !important;
    margin-left: .375rem !important;
  }

  .landing-page button:contains("Start Trading Now") svg {
    stroke-width: 2.5px !important;
    flex-shrink: 0 !important;
    width: .875rem !important;
    height: .875rem !important;
    margin-left: .375rem !important;
  }

  .mobile-trading-button, div:has(.mobile-trading-button) {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .hero-section .flex.flex-col.sm\\:flex-row {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
  }

  [data-section="home"] .flex.flex-col.sm\\:flex-row {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .hero-section h1 + p + div, .landing-page h1 + p + div {
    justify-content: center !important;
    align-items: center !important;
    margin-top: 1rem !important;
    display: flex !important;
  }

  h1:contains("Limitless Web3.0") ~ div.flex {
    justify-content: center !important;
    align-items: center !important;
    margin-top: 1rem !important;
    display: flex !important;
  }

  h1:contains("Limitless Web3.0") {
    text-align: center !important;
    margin-bottom: .75rem !important;
  }

  h1:contains("Limitless Web3.0") + p {
    text-align: center !important;
    max-width: 90% !important;
    margin-bottom: 1rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (width <= 480px) {
  .mobile-trading-button {
    border-radius: .375rem !important;
    min-width: 140px !important;
    max-width: 160px !important;
    min-height: 2.25rem !important;
    padding: .4375rem .875rem !important;
    font-size: .8125rem !important;
  }

  [data-page="home"] button:contains("Start Trading Now") {
    border-radius: .375rem !important;
    min-width: 140px !important;
    max-width: 160px !important;
    min-height: 2.25rem !important;
    padding: .4375rem .875rem !important;
    font-size: .8125rem !important;
  }

  .landing-page button:contains("Start Trading Now") {
    border-radius: .375rem !important;
    min-width: 140px !important;
    max-width: 160px !important;
    min-height: 2.25rem !important;
    padding: .4375rem .875rem !important;
    font-size: .8125rem !important;
  }

  .mobile-trading-button svg {
    width: .75rem !important;
    height: .75rem !important;
    margin-left: .25rem !important;
  }

  [data-page="home"] button:contains("Start Trading Now") svg {
    width: .75rem !important;
    height: .75rem !important;
    margin-left: .25rem !important;
  }

  .landing-page button:contains("Start Trading Now") svg {
    width: .75rem !important;
    height: .75rem !important;
    margin-left: .25rem !important;
  }
}

@media (width <= 375px) {
  .mobile-trading-button {
    min-width: 120px !important;
    max-width: 140px !important;
    min-height: 2rem !important;
    padding: .375rem .75rem !important;
    font-size: .75rem !important;
  }

  [data-page="home"] button:contains("Start Trading Now") {
    min-width: 120px !important;
    max-width: 140px !important;
    min-height: 2rem !important;
    padding: .375rem .75rem !important;
    font-size: .75rem !important;
  }

  .landing-page button:contains("Start Trading Now") {
    min-width: 120px !important;
    max-width: 140px !important;
    min-height: 2rem !important;
    padding: .375rem .75rem !important;
    font-size: .75rem !important;
  }

  .mobile-trading-button svg {
    width: .6875rem !important;
    height: .6875rem !important;
    margin-left: .1875rem !important;
  }

  [data-page="home"] button:contains("Start Trading Now") svg {
    width: .6875rem !important;
    height: .6875rem !important;
    margin-left: .1875rem !important;
  }
}

@media (width <= 768px) {
  .mobile-trading-button {
    z-index: 10 !important;
    isolation: isolate !important;
    position: relative !important;
  }

  .hero-section, .landing-page .hero-section, [data-section="home"] {
    text-align: center !important;
  }

  .hero-section .space-y-8, .landing-page .space-y-8 {
    text-align: center !important;
    align-items: center !important;
  }

  :is(.hero-section .flex.flex-col.sm\\:flex-row, .landing-page .flex.flex-col.sm\\:flex-row) {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: .75rem !important;
    width: 100% !important;
  }
}

.support-dropdown-content {
  z-index: 10001 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  min-width: 14rem !important;
  padding: .5rem !important;
  box-shadow: 0 10px 30px #00000026, 0 5px 15px #0000001a !important;
}

.support-dropdown-item {
  cursor: pointer !important;
  color: #374151 !important;
  border-radius: 8px !important;
  align-items: center !important;
  gap: .75rem !important;
  padding: .75rem 1rem !important;
  font-size: .9375rem !important;
  font-weight: 500 !important;
  transition: all .25s !important;
  display: flex !important;
  position: relative !important;
  overflow: visible !important;
}

.support-dropdown-item:hover {
  color: #00d084 !important;
  background: #00d08414 !important;
  transform: translateX(2px) !important;
}

.support-dropdown-item:focus {
  color: #00d084 !important;
  background: #00d0841f !important;
  outline: none !important;
}

.support-dropdown-item > div:first-child {
  flex-shrink: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  display: flex !important;
  position: relative !important;
}

.support-dropdown-item svg {
  z-index: 10 !important;
  flex-shrink: 0 !important;
  margin: 0 auto !important;
  display: block !important;
  position: relative !important;
}

.support-dropdown-item div[class*="rounded"] {
  justify-content: center !important;
  align-items: center !important;
  display: flex !important;
}

@media (width <= 1024px) {
  .mobile-sidebar-solid .support-dropdown-item, [data-radix-sheet-content] .support-dropdown-item {
    border-radius: 10px !important;
    margin-bottom: .25rem !important;
    padding: .875rem 1rem !important;
  }

  .mobile-sidebar-solid .support-dropdown-item:hover, [data-radix-sheet-content] .support-dropdown-item:hover {
    background: #00d0841a !important;
    transform: translateX(3px) !important;
    box-shadow: 0 2px 8px #00d08426 !important;
  }
}

.crypto-exchange-box-modern-container span[class*="text-[9px]"], .crypto-dropdown-content span[class*="text-[9px]"], .crypto-exchange-box-modern-container .bg-yellow-200, .crypto-exchange-box-modern-container .bg-blue-200, .crypto-exchange-box-modern-container .bg-cyan-200, .crypto-exchange-box-modern-container .bg-purple-200, .crypto-exchange-box-modern-container .bg-red-200, .crypto-exchange-box-modern-container .bg-rose-200, .crypto-exchange-box-modern-container .bg-violet-200, .crypto-exchange-box-modern-container .bg-pink-200, .crypto-exchange-box-modern-container .bg-gray-200, .crypto-dropdown-content .bg-yellow-200, .crypto-dropdown-content .bg-blue-200, .crypto-dropdown-content .bg-cyan-200, .crypto-dropdown-content .bg-purple-200, .crypto-dropdown-content .bg-red-200, .crypto-dropdown-content .bg-rose-200, .crypto-dropdown-content .bg-violet-200, .crypto-dropdown-content .bg-pink-200, .crypto-dropdown-content .bg-gray-200 {
  letter-spacing: .03em !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  vertical-align: middle !important;
  border-radius: 4px !important;
  justify-content: center !important;
  align-items: center !important;
  margin-left: 6px !important;
  padding: 2px 6px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  transition: all .2s cubic-bezier(.4, 0, .2, 1) !important;
  display: inline-flex !important;
}

.crypto-exchange-box-modern-container span[class*="text-[9px]"]:hover, .crypto-dropdown-content span[class*="text-[9px]"]:hover, .crypto-exchange-box-modern-container .bg-yellow-200:hover, .crypto-exchange-box-modern-container .bg-blue-200:hover, .crypto-exchange-box-modern-container .bg-cyan-200:hover, .crypto-exchange-box-modern-container .bg-purple-200:hover, .crypto-exchange-box-modern-container .bg-red-200:hover, .crypto-exchange-box-modern-container .bg-rose-200:hover, .crypto-exchange-box-modern-container .bg-violet-200:hover, .crypto-exchange-box-modern-container .bg-pink-200:hover, .crypto-exchange-box-modern-container .bg-gray-200:hover {
  filter: brightness(1.05) !important;
  transform: scale(1.08) !important;
  box-shadow: 0 2px 6px #00000026 !important;
}

.crypto-dropdown-content .font-semibold + span, .crypto-dropdown-content .font-medium + span {
  margin-left: 6px !important;
}

.crypto-dropdown-content .font-semibold {
  color: #111827 !important;
  font-weight: 600 !important;
}

.crypto-dropdown-content .flex.flex-wrap, .crypto-dropdown-content .text-xs.leading-relaxed, .crypto-dropdown-content .text-xs, .crypto-dropdown-content div[class*="text-xs"] {
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  display: flex !important;
}

.crypto-dropdown-content .bg-yellow-200 {
  background: linear-gradient(135deg, #fde68a, #fcd34d) !important;
  box-shadow: 0 2px 4px #f59e0b4d !important;
}

.crypto-dropdown-content .bg-blue-200 {
  background: linear-gradient(135deg, #bfdbfe, #93c5fd) !important;
  box-shadow: 0 2px 4px #3b82f64d !important;
}

.crypto-dropdown-content .bg-cyan-200 {
  background: linear-gradient(135deg, #a5f3fc, #67e8f9) !important;
  box-shadow: 0 2px 4px #06b6d44d !important;
}

.crypto-dropdown-content .bg-purple-200 {
  background: linear-gradient(135deg, #e9d5ff, #d8b4fe) !important;
  box-shadow: 0 2px 4px #8b5cf64d !important;
}

.crypto-dropdown-content .bg-pink-200 {
  background: linear-gradient(135deg, #fbcfe8, #f9a8d4) !important;
  box-shadow: 0 2px 4px #ec48994d !important;
}

.crypto-dropdown-content .bg-red-200 {
  background: linear-gradient(135deg, #fecaca, #fca5a5) !important;
  box-shadow: 0 2px 4px #ef44444d !important;
}

.crypto-dropdown-content .bg-rose-200 {
  background: linear-gradient(135deg, #fecdd3, #fda4af) !important;
  box-shadow: 0 2px 4px #f43f5e4d !important;
}

.crypto-dropdown-content .bg-violet-200 {
  background: linear-gradient(135deg, #ddd6fe, #c4b5fd) !important;
  box-shadow: 0 2px 4px #7c3aed4d !important;
}

.crypto-dropdown-content .bg-gray-200 {
  background: linear-gradient(135deg, #e5e7eb, #d1d5db) !important;
  box-shadow: 0 2px 4px #6b728033 !important;
}

@media (width <= 768px) {
  .crypto-exchange-box-modern-container span[class*="text-[9px]"], .crypto-dropdown-content span[class*="text-[9px]"], .crypto-exchange-box-modern-container .bg-yellow-200, .crypto-exchange-box-modern-container .bg-blue-200, .crypto-exchange-box-modern-container .bg-cyan-200, .crypto-exchange-box-modern-container .bg-purple-200, .crypto-dropdown-content .bg-yellow-200, .crypto-dropdown-content .bg-blue-200, .crypto-dropdown-content .bg-cyan-200, .crypto-dropdown-content .bg-purple-200 {
    margin-left: 4px !important;
    padding: 2px 5px !important;
    font-size: 8px !important;
  }

  [data-section*="coin-chart"] .min-h-screen, .crypto-coin-chart .min-h-screen {
    padding: .5rem !important;
    padding-top: calc(var(--mobile-total-header-height)  + .5rem) !important;
  }

  [data-section*="coin-chart"] .max-w-7xl, .crypto-coin-chart .max-w-7xl {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 .5rem !important;
  }

  [data-section*="coin-chart"] svg, .crypto-coin-chart svg {
    width: 100% !important;
    height: auto !important;
    max-height: 300px !important;
    display: block !important;
  }

  [data-section*="coin-chart"] .flex.items-start.justify-between, .crypto-coin-chart .flex.items-start.justify-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }

  [data-section*="coin-chart"] .flex.items-center.gap-4, .crypto-coin-chart .flex.items-center.gap-4 {
    gap: .75rem !important;
  }

  [data-section*="coin-chart"] h1, .crypto-coin-chart h1 {
    margin-bottom: .5rem !important;
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }

  [data-section*="coin-chart"] .text-4xl, .crypto-coin-chart .text-4xl {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }

  [data-section*="coin-chart"] .text-xl, .crypto-coin-chart .text-xl {
    font-size: 1.125rem !important;
  }

  [data-section*="coin-chart"] .grid.grid-cols-2, .crypto-coin-chart .grid.grid-cols-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: .5rem !important;
  }

  [data-section*="coin-chart"] .grid.grid-cols-2 .text-lg, .crypto-coin-chart .grid.grid-cols-2 .text-lg {
    font-size: .9375rem !important;
  }

  [data-section*="coin-chart"] .grid.grid-cols-2 .text-xs, .crypto-coin-chart .grid.grid-cols-2 .text-xs {
    font-size: .6875rem !important;
  }

  [data-section*="coin-chart"] .flex.items-center.gap-2 button, .crypto-coin-chart .flex.items-center.gap-2 button {
    min-width: 2.5rem !important;
    padding: .375rem .625rem !important;
    font-size: .75rem !important;
  }

  :is([data-section*="coin-chart"] .grid.md\\:grid-cols-2, .crypto-coin-chart .grid.md\\:grid-cols-2) {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  [data-section*="coin-chart"] .mb-6, .crypto-coin-chart .mb-6 {
    margin-bottom: .75rem !important;
  }

  [data-section*="coin-chart"] .flex.items-center.gap-2, .crypto-coin-chart .flex.items-center.gap-2 {
    gap: .5rem !important;
  }

  [data-section*="coin-chart"] .mb-6 + motion-div, .crypto-coin-chart .mb-6 + motion-div {
    margin-bottom: .75rem !important;
  }

  [data-section*="coin-chart"] .w-full.h-full, .crypto-coin-chart .w-full.h-full {
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
  }

  [data-section*="coin-chart"] svg text, .crypto-coin-chart svg text {
    font-size: 9px !important;
  }

  [data-section*="coin-chart"] .w-10.h-10, .crypto-coin-chart .w-10.h-10 {
    width: 2rem !important;
    min-width: 2rem !important;
    height: 2rem !important;
    min-height: 2rem !important;
  }

  [data-section*="coin-chart"] .badge, .crypto-coin-chart .badge {
    padding: .25rem .5rem !important;
    font-size: .75rem !important;
  }

  [data-section*="coin-chart"] .py-8, .crypto-coin-chart .py-8 {
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
  }

  [data-section*="coin-chart"] .px-4, .crypto-coin-chart .px-4 {
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }
}

@media (width <= 480px) {
  [data-section*="coin-chart"] svg, .crypto-coin-chart svg {
    max-height: 250px !important;
  }

  [data-section*="coin-chart"] h1, .crypto-coin-chart h1 {
    font-size: 1.25rem !important;
  }

  [data-section*="coin-chart"] .text-4xl, .crypto-coin-chart .text-4xl {
    font-size: 1.5rem !important;
  }

  [data-section*="coin-chart"] .grid.grid-cols-2 .text-lg, .crypto-coin-chart .grid.grid-cols-2 .text-lg {
    font-size: .875rem !important;
  }
}

@media (width <= 768px) and (orientation: landscape) {
  [data-section*="coin-chart"] svg, .crypto-coin-chart svg {
    max-height: 220px !important;
  }
}

[data-section*="coin-chart"] svg, .crypto-coin-chart svg {
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
}

[data-section*="live-trading-signals"] .crypto-icon, [data-section*="live-trading-signals"] img[class*="crypto-icon"], .live-trading-signals-page .crypto-icon, .live-trading-signals-page img[class*="crypto-icon"] {
  object-fit: contain !important;
  border-radius: 50% !important;
  max-width: 32px !important;
  max-height: 32px !important;
}

@media (width <= 768px) {
  [data-section*="live-trading-signals"] .crypto-icon, [data-section*="live-trading-signals"] img[class*="crypto-icon"], .live-trading-signals-page .crypto-icon, .live-trading-signals-page img[class*="crypto-icon"] {
    max-width: 28px !important;
    max-height: 28px !important;
  }
}

@media (width >= 769px) {
  [data-section*="live-trading-signals"] .crypto-icon, [data-section*="live-trading-signals"] img[class*="crypto-icon"], .live-trading-signals-page .crypto-icon, .live-trading-signals-page img[class*="crypto-icon"] {
    max-width: 36px !important;
    max-height: 36px !important;
  }
}

[data-section*="live-trading-signals"] [class*="CryptoIcon"], .live-trading-signals-page [class*="CryptoIcon"] {
  justify-content: center !important;
  align-items: center !important;
  display: inline-flex !important;
}

@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;
  initial-value: rotateX(0);
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
  initial-value: rotateY(0);
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
  initial-value: rotateZ(0);
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false;
  initial-value: skewX(0);
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false;
  initial-value: skewY(0);
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-divide-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-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 ping {
  75%, 100% {
    opacity: 0;
    transform: scale(2);
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@keyframes bounce {
  0%, 100% {
    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
    transform: translateY(-25%);
  }

  50% {
    animation-timing-function: cubic-bezier(0, 0, .2, 1);
    transform: none;
  }
}

@keyframes enter {
  from {
    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));
  }
}

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

@keyframes accordion-down {
  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height, var(--bits-accordion-content-height));
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height, var(--bits-accordion-content-height));
  }

  to {
    height: 0;
  }
}