@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

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

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

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

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

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

:root {
    --background: 270 50% 5%;
    --foreground: 180 100% 95%;

    --card: 270 40% 8%;
    --card-foreground: 180 100% 92%;

    --popover: 270 40% 8%;
    --popover-foreground: 180 100% 92%;

    --primary: 180 100% 50%;
    --primary-foreground: 270 50% 5%;

    --secondary: 270 100% 60%;
    --secondary-foreground: 0 0% 100%;

    --muted: 270 30% 15%;
    --muted-foreground: 180 50% 70%;

    --accent: 280 100% 70%;
    --accent-foreground: 270 50% 5%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 180 80% 40%;
    --input: 270 40% 15%;
    --ring: 180 100% 50%;

    /* Achievements — "Diamond Vault" tier palette (raw OKLCH L C H).
       Additive tokens for the Achievements tab inside ProfileDrawer;
       existing neon biome tokens above are untouched. */
    --ach-common: 0.88 0.22 150; /* COMMON green #4DFF7B */
    --ach-rare: 0.67 0.18 255; /* RARE blue #4D9BFF */
    --ach-legendary: 0.58 0.35 310; /* LEGENDARY purple #BF00FF */
    --ach-mythic: 0.6 0.27 18; /* MYTHIC red #FF2E4D */
    --ach-gold: 0.84 0.16 85; /* gold accent #FFD700 */
    --ach-done: 0.87 0.25 150; /* green DONE badge #00FF41 */

    /* Font tokens — existing system fonts (Orbitron display, JetBrains Mono
       body/mono) exposed as CSS vars for Tailwind font-display/body/mono. */
    --font-display: "Orbitron", sans-serif;
    --font-body: "JetBrains Mono", monospace;
    --font-mono: "JetBrains Mono", monospace;

    --radius: 0.5rem;

    /* QR code — Parallel-level restyle tokens (CubeVisualization offscreen
       2D canvas). The QR is drawn with literal hex on the canvas (CSS vars
       cannot resolve inside WebGL/2D drawing), but these tokens document the
       canonical palette for the frontend and preview. Dark backing replaces
       the old #ffffff; modules use a 45° diagonal 3-color gradient
       (top-left → bottom-right): biome accent → cyan → purple, deep
       saturated tones with no overexposure. */
    --qr-backing: #0d0d14;
    --qr-cyan: #80eeec;
    --qr-purple: #9933ff;
    --qr-gradient: linear-gradient(
      135deg,
      var(--biome-color, #00ffff) 0%,
      #80eeec 50%,
      #9933ff 100%
    );
  }

.dark {
    --background: 270 50% 5%;
    --foreground: 180 100% 95%;

    --card: 270 40% 8%;
    --card-foreground: 180 100% 92%;

    --popover: 270 40% 8%;
    --popover-foreground: 180 100% 92%;

    --primary: 180 100% 50%;
    --primary-foreground: 270 50% 5%;

    --secondary: 270 100% 60%;
    --secondary-foreground: 0 0% 100%;

    --muted: 270 30% 15%;
    --muted-foreground: 180 50% 70%;

    --accent: 280 100% 70%;
    --accent-foreground: 270 50% 5%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 180 80% 40%;
    --input: 270 40% 15%;
    --ring: 180 100% 50%;
  }

*{
  border-color: oklch(var(--border));
}

body{
  background-color: oklch(var(--background));
  color: oklch(var(--foreground));
    font-family: "JetBrains Mono", monospace;
    background: #010103;
}

h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Orbitron", sans-serif;
    color: oklch(0.95 0.15 180);
  }

p,
  span,
  div {
    color: oklch(0.92 0.08 180);
  }

.\!container{
  width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 2rem !important;
  padding-left: 2rem !important;
}

.container{
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}

@media (min-width: 1400px){

  .\!container{
    max-width: 1400px !important;
  }

  .container{
    max-width: 1400px;
  }
}

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

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

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

.\!visible{
  visibility: visible !important;
}

.visible{
  visibility: visible;
}

.invisible{
  visibility: hidden;
}

.collapse{
  visibility: collapse;
}

.static{
  position: static;
}

.fixed{
  position: fixed;
}

.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

.sticky{
  position: sticky;
}

.inset-0{
  inset: 0px;
}

.inset-2{
  inset: 0.5rem;
}

.inset-4{
  inset: 1rem;
}

.inset-x-0{
  left: 0px;
  right: 0px;
}

.inset-y-0{
  top: 0px;
  bottom: 0px;
}

.-bottom-12{
  bottom: -3rem;
}

.-bottom-\[0\.5px\]{
  bottom: -0.5px;
}

.-left-12{
  left: -3rem;
}

.-left-\[14px\]{
  left: -14px;
}

.-right-1{
  right: -0.25rem;
}

.-right-1\.5{
  right: -0.375rem;
}

.-right-12{
  right: -3rem;
}

.-right-\[14px\]{
  right: -14px;
}

.-top-1{
  top: -0.25rem;
}

.-top-1\.5{
  top: -0.375rem;
}

.-top-12{
  top: -3rem;
}

.bottom-0{
  bottom: 0px;
}

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

.bottom-16{
  bottom: 4rem;
}

.bottom-2{
  bottom: 0.5rem;
}

.bottom-20{
  bottom: 5rem;
}

.bottom-4{
  bottom: 1rem;
}

.left-0{
  left: 0px;
}

.left-1{
  left: 0.25rem;
}

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

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

.left-2{
  left: 0.5rem;
}

.left-4{
  left: 1rem;
}

.left-\[50\%\]{
  left: 50%;
}

.right-0{
  right: 0px;
}

.right-1{
  right: 0.25rem;
}

.right-1\.5{
  right: 0.375rem;
}

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

.right-16{
  right: 4rem;
}

.right-2{
  right: 0.5rem;
}

.right-3{
  right: 0.75rem;
}

.right-4{
  right: 1rem;
}

.top-0{
  top: 0px;
}

.top-1{
  top: 0.25rem;
}

.top-1\.5{
  top: 0.375rem;
}

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

.top-10{
  top: 2.5rem;
}

.top-2{
  top: 0.5rem;
}

.top-3{
  top: 0.75rem;
}

.top-3\.5{
  top: 0.875rem;
}

.top-4{
  top: 1rem;
}

.top-\[1px\]{
  top: 1px;
}

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

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

.top-full{
  top: 100%;
}

.isolate{
  isolation: isolate;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.col-span-full{
  grid-column: 1 / -1;
}

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

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

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

.m-0{
  margin: 0px;
}

.-mx-1{
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

.-mx-6{
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

.-my-6{
  margin-top: -1.5rem;
  margin-bottom: -1.5rem;
}

.mx-0\.5{
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}

.mx-2{
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-3{
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.mx-3\.5{
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}

.mx-4{
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-5{
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}

.mx-6{
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.my-0\.5{
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}

.my-1{
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.-ml-4{
  margin-left: -1rem;
}

.-mr-1{
  margin-right: -0.25rem;
}

.-mt-4{
  margin-top: -1rem;
}

.mb-0\.5{
  margin-bottom: 0.125rem;
}

.mb-1{
  margin-bottom: 0.25rem;
}

.mb-1\.5{
  margin-bottom: 0.375rem;
}

.mb-2{
  margin-bottom: 0.5rem;
}

.mb-2\.5{
  margin-bottom: 0.625rem;
}

.mb-3{
  margin-bottom: 0.75rem;
}

.mb-4{
  margin-bottom: 1rem;
}

.mb-5{
  margin-bottom: 1.25rem;
}

.mb-6{
  margin-bottom: 1.5rem;
}

.mb-7{
  margin-bottom: 1.75rem;
}

.mb-8{
  margin-bottom: 2rem;
}

.ml-0\.5{
  margin-left: 0.125rem;
}

.ml-1{
  margin-left: 0.25rem;
}

.ml-1\.5{
  margin-left: 0.375rem;
}

.ml-2{
  margin-left: 0.5rem;
}

.ml-3{
  margin-left: 0.75rem;
}

.ml-3\.5{
  margin-left: 0.875rem;
}

.ml-4{
  margin-left: 1rem;
}

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

.mr-1{
  margin-right: 0.25rem;
}

.mr-1\.5{
  margin-right: 0.375rem;
}

.mr-2{
  margin-right: 0.5rem;
}

.mt-0\.5{
  margin-top: 0.125rem;
}

.mt-1{
  margin-top: 0.25rem;
}

.mt-1\.5{
  margin-top: 0.375rem;
}

.mt-2{
  margin-top: 0.5rem;
}

.mt-2\.5{
  margin-top: 0.625rem;
}

.mt-3{
  margin-top: 0.75rem;
}

.mt-4{
  margin-top: 1rem;
}

.mt-5{
  margin-top: 1.25rem;
}

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

.line-clamp-1{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.block{
  display: block;
}

.inline-block{
  display: inline-block;
}

.inline{
  display: inline;
}

.flex{
  display: flex;
}

.inline-flex{
  display: inline-flex;
}

.table{
  display: table;
}

.table-caption{
  display: table-caption;
}

.table-cell{
  display: table-cell;
}

.table-row{
  display: table-row;
}

.grid{
  display: grid;
}

.contents{
  display: contents;
}

.hidden{
  display: none;
}

.aspect-square{
  aspect-ratio: 1 / 1;
}

.aspect-video{
  aspect-ratio: 16 / 9;
}

.size-14{
  width: 3.5rem;
  height: 3.5rem;
}

.size-2{
  width: 0.5rem;
  height: 0.5rem;
}

.size-2\.5{
  width: 0.625rem;
  height: 0.625rem;
}

.size-3{
  width: 0.75rem;
  height: 0.75rem;
}

.size-3\.5{
  width: 0.875rem;
  height: 0.875rem;
}

.size-4{
  width: 1rem;
  height: 1rem;
}

.size-7{
  width: 1.75rem;
  height: 1.75rem;
}

.size-8{
  width: 2rem;
  height: 2rem;
}

.size-9{
  width: 2.25rem;
  height: 2.25rem;
}

.size-auto{
  width: auto;
  height: auto;
}

.size-full{
  width: 100%;
  height: 100%;
}

.h-0\.5{
  height: 0.125rem;
}

.h-1{
  height: 0.25rem;
}

.h-1\.5{
  height: 0.375rem;
}

.h-10{
  height: 2.5rem;
}

.h-11{
  height: 2.75rem;
}

.h-12{
  height: 3rem;
}

.h-14{
  height: 3.5rem;
}

.h-16{
  height: 4rem;
}

.h-2{
  height: 0.5rem;
}

.h-2\.5{
  height: 0.625rem;
}

.h-20{
  height: 5rem;
}

.h-24{
  height: 6rem;
}

.h-28{
  height: 7rem;
}

.h-3{
  height: 0.75rem;
}

.h-3\.5{
  height: 0.875rem;
}

.h-32{
  height: 8rem;
}

.h-4{
  height: 1rem;
}

.h-5{
  height: 1.25rem;
}

.h-6{
  height: 1.5rem;
}

.h-7{
  height: 1.75rem;
}

.h-8{
  height: 2rem;
}

.h-9{
  height: 2.25rem;
}

.h-\[1\.15rem\]{
  height: 1.15rem;
}

.h-\[100dvh\]{
  height: 100dvh;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.h-\[88dvh\]{
  height: 88dvh;
}

.h-\[92dvh\]{
  height: 92dvh;
}

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

.h-\[var\(--radix-navigation-menu-viewport-height\)\]{
  height: var(--radix-navigation-menu-viewport-height);
}

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

.h-auto{
  height: auto;
}

.h-full{
  height: 100%;
}

.h-px{
  height: 1px;
}

.h-svh{
  height: 100svh;
}

.max-h-64{
  max-height: 16rem;
}

.max-h-72{
  max-height: 18rem;
}

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

.max-h-\[92dvh\]{
  max-height: 92dvh;
}

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

.min-h-0{
  min-height: 0px;
}

.min-h-16{
  min-height: 4rem;
}

.min-h-4{
  min-height: 1rem;
}

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

.min-h-\[2rem\]{
  min-height: 2rem;
}

.min-h-\[3rem\]{
  min-height: 3rem;
}

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

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

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

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

.min-h-svh{
  min-height: 100svh;
}

.w-0{
  width: 0px;
}

.w-0\.5{
  width: 0.125rem;
}

.w-1{
  width: 0.25rem;
}

.w-1\.5{
  width: 0.375rem;
}

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

.w-10{
  width: 2.5rem;
}

.w-11{
  width: 2.75rem;
}

.w-12{
  width: 3rem;
}

.w-14{
  width: 3.5rem;
}

.w-16{
  width: 4rem;
}

.w-2{
  width: 0.5rem;
}

.w-2\.5{
  width: 0.625rem;
}

.w-20{
  width: 5rem;
}

.w-24{
  width: 6rem;
}

.w-28{
  width: 7rem;
}

.w-3{
  width: 0.75rem;
}

.w-3\.5{
  width: 0.875rem;
}

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

.w-32{
  width: 8rem;
}

.w-4{
  width: 1rem;
}

.w-40{
  width: 10rem;
}

.w-48{
  width: 12rem;
}

.w-5{
  width: 1.25rem;
}

.w-6{
  width: 1.5rem;
}

.w-64{
  width: 16rem;
}

.w-7{
  width: 1.75rem;
}

.w-72{
  width: 18rem;
}

.w-8{
  width: 2rem;
}

.w-9{
  width: 2.25rem;
}

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

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

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

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

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

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

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

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

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

.w-\[88\%\]{
  width: 88%;
}

.w-\[95vw\]{
  width: 95vw;
}

.w-\[min\(720px\2c 85vw\)\]{
  width: min(720px, 85vw);
}

.w-auto{
  width: auto;
}

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

.w-full{
  width: 100%;
}

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

.w-px{
  width: 1px;
}

.min-w-0{
  min-width: 0px;
}

.min-w-10{
  min-width: 2.5rem;
}

.min-w-5{
  min-width: 1.25rem;
}

.min-w-8{
  min-width: 2rem;
}

.min-w-9{
  min-width: 2.25rem;
}

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

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

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

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

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

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

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

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

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

.max-w-2xl{
  max-width: 42rem;
}

.max-w-3xl{
  max-width: 48rem;
}

.max-w-5xl{
  max-width: 64rem;
}

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

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

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

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

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

.max-w-\[85\%\]{
  max-width: 85%;
}

.max-w-\[calc\(100\%-2rem\)\]{
  max-width: calc(100% - 2rem);
}

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

.max-w-lg{
  max-width: 32rem;
}

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

.max-w-md{
  max-width: 28rem;
}

.max-w-sm{
  max-width: 24rem;
}

.max-w-xs{
  max-width: 20rem;
}

.flex-1{
  flex: 1 1 0%;
}

.flex-\[4\]{
  flex: 4;
}

.flex-\[6\]{
  flex: 6;
}

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

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

.shrink{
  flex-shrink: 1;
}

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

.grow{
  flex-grow: 1;
}

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

.basis-0{
  flex-basis: 0px;
}

.basis-full{
  flex-basis: 100%;
}

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

.border-collapse{
  border-collapse: collapse;
}

.-translate-x-1\/2{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-px{
  --tw-translate-x: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-1\/2{
  --tw-translate-x: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-\[-50\%\]{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-\[1px\]{
  --tw-translate-x: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-px{
  --tw-translate-x: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0\.5{
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-\[-50\%\]{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-\[1px\]{
  --tw-translate-y: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-\[calc\(-50\%_-_2px\)\]{
  --tw-translate-y: calc(-50% - 2px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-rotate-90{
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-45{
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-90{
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes pulse{

  50%{
    opacity: .5;
  }
}

.animate-pulse{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin{

  to{
    transform: rotate(360deg);
  }
}

.animate-spin{
  animation: spin 1s linear infinite;
}

.cursor-default{
  cursor: default;
}

.cursor-grab{
  cursor: grab;
}

.cursor-not-allowed{
  cursor: not-allowed;
}

.cursor-pointer{
  cursor: pointer;
}

.touch-none{
  touch-action: none;
}

.touch-manipulation{
  touch-action: manipulation;
}

.select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize-none{
  resize: none;
}

.resize{
  resize: both;
}

.scroll-my-1{
  scroll-margin-top: 0.25rem;
  scroll-margin-bottom: 0.25rem;
}

.scroll-py-1{
  scroll-padding-top: 0.25rem;
  scroll-padding-bottom: 0.25rem;
}

.list-none{
  list-style-type: none;
}

.appearance-none{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.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-\[0_1fr\]{
  grid-template-columns: 0 1fr;
}

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

.flex-row{
  flex-direction: row;
}

.flex-row-reverse{
  flex-direction: row-reverse;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.gap-0{
  gap: 0px;
}

.gap-0\.5{
  gap: 0.125rem;
}

.gap-1{
  gap: 0.25rem;
}

.gap-1\.5{
  gap: 0.375rem;
}

.gap-2{
  gap: 0.5rem;
}

.gap-2\.5{
  gap: 0.625rem;
}

.gap-3{
  gap: 0.75rem;
}

.gap-3\.5{
  gap: 0.875rem;
}

.gap-4{
  gap: 1rem;
}

.gap-5{
  gap: 1.25rem;
}

.gap-6{
  gap: 1.5rem;
}

.gap-y-0\.5{
  row-gap: 0.125rem;
}

.space-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-2\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

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

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

.self-stretch{
  align-self: stretch;
}

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

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

.overflow-auto{
  overflow: auto;
}

.overflow-hidden{
  overflow: hidden;
}

.overflow-visible{
  overflow: visible;
}

.overflow-x-auto{
  overflow-x: auto;
}

.overflow-y-auto{
  overflow-y: auto;
}

.overflow-x-hidden{
  overflow-x: hidden;
}

.overscroll-contain{
  overscroll-behavior: contain;
}

.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap{
  white-space: nowrap;
}

.whitespace-pre-wrap{
  white-space: pre-wrap;
}

.text-balance{
  text-wrap: balance;
}

.break-words{
  overflow-wrap: break-word;
}

.break-all{
  word-break: break-all;
}

.rounded{
  border-radius: 0.25rem;
}

.rounded-2xl{
  border-radius: 1rem;
}

.rounded-3xl{
  border-radius: 1.5rem;
}

.rounded-\[20px\]{
  border-radius: 20px;
}

.rounded-\[2px\]{
  border-radius: 2px;
}

.rounded-\[4px\]{
  border-radius: 4px;
}

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

.rounded-full{
  border-radius: 9999px;
}

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

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

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

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

.rounded-xl{
  border-radius: 0.75rem;
}

.rounded-b-xl{
  border-bottom-right-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}

.rounded-l-lg{
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

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

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

.rounded-t-2xl{
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

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

.rounded-bl-none{
  border-bottom-left-radius: 0px;
}

.rounded-br-none{
  border-bottom-right-radius: 0px;
}

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

.border{
  border-width: 1px;
}

.border-0{
  border-width: 0px;
}

.border-2{
  border-width: 2px;
}

.border-4{
  border-width: 4px;
}

.border-\[1\.5px\]{
  border-width: 1.5px;
}

.border-y{
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.border-b{
  border-bottom-width: 1px;
}

.border-b-2{
  border-bottom-width: 2px;
}

.border-l{
  border-left-width: 1px;
}

.border-r{
  border-right-width: 1px;
}

.border-t{
  border-top-width: 1px;
}

.border-t-2{
  border-top-width: 2px;
}

.border-dashed{
  border-style: dashed;
}

.border-\[\#00d4ff\]\/30{
  border-color: rgb(0 212 255 / 0.3);
}

.border-\[\#00f0ff\]\/50{
  border-color: rgb(0 240 255 / 0.5);
}

.border-\[\#00ff41\]{
  --tw-border-opacity: 1;
  border-color: rgb(0 255 65 / var(--tw-border-opacity, 1));
}

.border-\[\#00ff41\]\/50{
  border-color: rgb(0 255 65 / 0.5);
}

.border-\[\#00ff88\]\/30{
  border-color: rgb(0 255 136 / 0.3);
}

.border-\[\#00ffff\]{
  --tw-border-opacity: 1;
  border-color: rgb(0 255 255 / var(--tw-border-opacity, 1));
}

.border-\[\#00ffff\]\/20{
  border-color: rgb(0 255 255 / 0.2);
}

.border-\[\#00ffff\]\/30{
  border-color: rgb(0 255 255 / 0.3);
}

.border-\[\#00ffff\]\/40{
  border-color: rgb(0 255 255 / 0.4);
}

.border-\[\#00ffff\]\/50{
  border-color: rgb(0 255 255 / 0.5);
}

.border-\[\#0e0f14\]{
  --tw-border-opacity: 1;
  border-color: rgb(14 15 20 / var(--tw-border-opacity, 1));
}

.border-\[\#60baff\]{
  --tw-border-opacity: 1;
  border-color: rgb(96 186 255 / var(--tw-border-opacity, 1));
}

.border-\[\#9933ff\]\/30{
  border-color: rgb(153 51 255 / 0.3);
}

.border-\[\#9933ff\]\/40{
  border-color: rgb(153 51 255 / 0.4);
}

.border-\[\#bb55ff\]{
  --tw-border-opacity: 1;
  border-color: rgb(187 85 255 / var(--tw-border-opacity, 1));
}

.border-\[\#bf00ff\]\/30{
  border-color: rgb(191 0 255 / 0.3);
}

.border-\[\#f59e0b\]\/50{
  border-color: rgb(245 158 11 / 0.5);
}

.border-\[\#ff3344\]\/50{
  border-color: rgb(255 51 68 / 0.5);
}

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

.border-amber-400\/30{
  border-color: rgb(251 191 36 / 0.3);
}

.border-blue-400\/30{
  border-color: rgb(96 165 250 / 0.3);
}

.border-blue-400\/50{
  border-color: rgb(96 165 250 / 0.5);
}

.border-cyan-400{
  --tw-border-opacity: 1;
  border-color: rgb(34 211 238 / var(--tw-border-opacity, 1));
}

.border-cyan-400\/30{
  border-color: rgb(34 211 238 / 0.3);
}

.border-cyan-500\/30{
  border-color: rgb(6 182 212 / 0.3);
}

.border-emerald-400\/30{
  border-color: rgb(52 211 153 / 0.3);
}

.border-fuchsia-400\/30{
  border-color: rgb(232 121 249 / 0.3);
}

.border-gray-400\/50{
  border-color: rgb(156 163 175 / 0.5);
}

.border-green-400\/30{
  border-color: rgb(74 222 128 / 0.3);
}

.border-green-400\/50{
  border-color: rgb(74 222 128 / 0.5);
}

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

.border-orange-600\/50{
  border-color: rgb(234 88 12 / 0.5);
}

.border-pink-500{
  --tw-border-opacity: 1;
  border-color: rgb(236 72 153 / var(--tw-border-opacity, 1));
}

.border-primary{
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}

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

.border-purple-400\/30{
  border-color: rgb(192 132 252 / 0.3);
}

.border-purple-400\/50{
  border-color: rgb(192 132 252 / 0.5);
}

.border-red-400\/30{
  border-color: rgb(248 113 113 / 0.3);
}

.border-red-400\/50{
  border-color: rgb(248 113 113 / 0.5);
}

.border-red-500{
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.border-red-500\/30{
  border-color: rgb(239 68 68 / 0.3);
}

.border-red-500\/40{
  border-color: rgb(239 68 68 / 0.4);
}

.border-red-500\/50{
  border-color: rgb(239 68 68 / 0.5);
}

.border-red-500\/60{
  border-color: rgb(239 68 68 / 0.6);
}

.border-rose-500\/60{
  border-color: rgb(244 63 94 / 0.6);
}

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

.border-sky-400\/30{
  border-color: rgb(56 189 248 / 0.3);
}

.border-teal-400\/30{
  border-color: rgb(45 212 191 / 0.3);
}

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

.border-violet-400\/30{
  border-color: rgb(167 139 250 / 0.3);
}

.border-white\/10{
  border-color: rgb(255 255 255 / 0.1);
}

.border-white\/15{
  border-color: rgb(255 255 255 / 0.15);
}

.border-white\/20{
  border-color: rgb(255 255 255 / 0.2);
}

.border-white\/30{
  border-color: rgb(255 255 255 / 0.3);
}

.border-yellow-400\/30{
  border-color: rgb(250 204 21 / 0.3);
}

.border-yellow-500\/50{
  border-color: rgb(234 179 8 / 0.5);
}

.border-b-transparent{
  border-bottom-color: transparent;
}

.border-l-transparent{
  border-left-color: transparent;
}

.border-t-cyan-300{
  --tw-border-opacity: 1;
  border-top-color: rgb(103 232 249 / var(--tw-border-opacity, 1));
}

.border-t-cyan-400{
  --tw-border-opacity: 1;
  border-top-color: rgb(34 211 238 / var(--tw-border-opacity, 1));
}

.border-t-purple-400{
  --tw-border-opacity: 1;
  border-top-color: rgb(192 132 252 / var(--tw-border-opacity, 1));
}

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

.border-t-yellow-400{
  --tw-border-opacity: 1;
  border-top-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
}

.bg-\[\#00ff41\]\/15{
  background-color: rgb(0 255 65 / 0.15);
}

.bg-\[\#00ff66\]{
  --tw-bg-opacity: 1;
  background-color: rgb(0 255 102 / var(--tw-bg-opacity, 1));
}

.bg-\[\#00ff88\]\/10{
  background-color: rgb(0 255 136 / 0.1);
}

.bg-\[\#00ffff\]\/10{
  background-color: rgb(0 255 255 / 0.1);
}

.bg-\[\#010103\]{
  --tw-bg-opacity: 1;
  background-color: rgb(1 1 3 / var(--tw-bg-opacity, 1));
}

.bg-\[\#080b11\]{
  --tw-bg-opacity: 1;
  background-color: rgb(8 11 17 / var(--tw-bg-opacity, 1));
}

.bg-\[\#0a0d14\]\/80{
  background-color: rgb(10 13 20 / 0.8);
}

.bg-\[\#0a0d14\]\/95{
  background-color: rgb(10 13 20 / 0.95);
}

.bg-\[\#9933ff\]\/15{
  background-color: rgb(153 51 255 / 0.15);
}

.bg-\[\#9933ff\]\/20{
  background-color: rgb(153 51 255 / 0.2);
}

.bg-\[\#f59e0b\]\/15{
  background-color: rgb(245 158 11 / 0.15);
}

.bg-\[\#ff3344\]\/15{
  background-color: rgb(255 51 68 / 0.15);
}

.bg-\[\#ff3344\]\/20{
  background-color: rgb(255 51 68 / 0.2);
}

.bg-accent{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.bg-amber-400\/10{
  background-color: rgb(251 191 36 / 0.1);
}

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

.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-black\/20{
  background-color: rgb(0 0 0 / 0.2);
}

.bg-black\/40{
  background-color: rgb(0 0 0 / 0.4);
}

.bg-black\/50{
  background-color: rgb(0 0 0 / 0.5);
}

.bg-black\/60{
  background-color: rgb(0 0 0 / 0.6);
}

.bg-black\/70{
  background-color: rgb(0 0 0 / 0.7);
}

.bg-black\/75{
  background-color: rgb(0 0 0 / 0.75);
}

.bg-blue-400\/10{
  background-color: rgb(96 165 250 / 0.1);
}

.bg-blue-400\/15{
  background-color: rgb(96 165 250 / 0.15);
}

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

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

.bg-cyan-400\/10{
  background-color: rgb(34 211 238 / 0.1);
}

.bg-destructive{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--destructive) / var(--tw-bg-opacity, 1));
}

.bg-emerald-400\/10{
  background-color: rgb(52 211 153 / 0.1);
}

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

.bg-green-400\/10{
  background-color: rgb(74 222 128 / 0.1);
}

.bg-green-400\/15{
  background-color: rgb(74 222 128 / 0.15);
}

.bg-muted{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}

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

.bg-pink-500{
  --tw-bg-opacity: 1;
  background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
}

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

.bg-primary{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.bg-primary\/20{
  background-color: oklch(var(--primary) / 0.2);
}

.bg-purple-400\/10{
  background-color: rgb(192 132 252 / 0.1);
}

.bg-purple-400\/15{
  background-color: rgb(192 132 252 / 0.15);
}

.bg-red-500\/10{
  background-color: rgb(239 68 68 / 0.1);
}

.bg-red-600{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.bg-secondary{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}

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

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

.bg-slate-900\/90{
  background-color: rgb(15 23 42 / 0.9);
}

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

.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/10{
  background-color: rgb(255 255 255 / 0.1);
}

.bg-white\/5{
  background-color: rgb(255 255 255 / 0.05);
}

.bg-white\/\[0\.08\]{
  background-color: rgb(255 255 255 / 0.08);
}

.bg-zinc-700{
  --tw-bg-opacity: 1;
  background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1));
}

.bg-zinc-800{
  --tw-bg-opacity: 1;
  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
}

.bg-gradient-to-br{
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r{
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-\[\#00ff41\]{
  --tw-gradient-from: #00ff41 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 255 65 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#00ffff\]{
  --tw-gradient-from: #00ffff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#3b82f6\]{
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#9933ff\]{
  --tw-gradient-from: #9933ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(153 51 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gray-900{
  --tw-gradient-from: #111827 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-red-500\/20{
  --tw-gradient-from: rgb(239 68 68 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-red-900\/20{
  --tw-gradient-to: rgb(127 29 29 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(127 29 29 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-\[\#00e5ff\]{
  --tw-gradient-to: #00e5ff var(--tw-gradient-to-position);
}

.to-\[\#00ffff\]{
  --tw-gradient-to: #00ffff var(--tw-gradient-to-position);
}

.to-\[\#39ff14\]{
  --tw-gradient-to: #39ff14 var(--tw-gradient-to-position);
}

.to-\[\#60baff\]{
  --tw-gradient-to: #60baff var(--tw-gradient-to-position);
}

.to-\[\#cc55ff\]{
  --tw-gradient-to: #cc55ff var(--tw-gradient-to-position);
}

.to-black{
  --tw-gradient-to: #000 var(--tw-gradient-to-position);
}

.to-pink-500\/20{
  --tw-gradient-to: rgb(236 72 153 / 0.2) var(--tw-gradient-to-position);
}

.fill-current{
  fill: currentColor;
}

.fill-primary{
  fill: oklch(var(--primary) / 1);
}

.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}

.p-0{
  padding: 0px;
}

.p-0\.5{
  padding: 0.125rem;
}

.p-1{
  padding: 0.25rem;
}

.p-2{
  padding: 0.5rem;
}

.p-2\.5{
  padding: 0.625rem;
}

.p-3{
  padding: 0.75rem;
}

.p-4{
  padding: 1rem;
}

.p-5{
  padding: 1.25rem;
}

.p-6{
  padding: 1.5rem;
}

.p-8{
  padding: 2rem;
}

.p-\[3px\]{
  padding: 3px;
}

.p-px{
  padding: 1px;
}

.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-10{
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-3\.5{
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-20{
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-24{
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-\[2px\]{
  padding-top: 2px;
  padding-bottom: 2px;
}

.pb-0{
  padding-bottom: 0px;
}

.pb-0\.5{
  padding-bottom: 0.125rem;
}

.pb-1{
  padding-bottom: 0.25rem;
}

.pb-1\.5{
  padding-bottom: 0.375rem;
}

.pb-10{
  padding-bottom: 2.5rem;
}

.pb-2{
  padding-bottom: 0.5rem;
}

.pb-3{
  padding-bottom: 0.75rem;
}

.pb-4{
  padding-bottom: 1rem;
}

.pb-5{
  padding-bottom: 1.25rem;
}

.pb-8{
  padding-bottom: 2rem;
}

.pl-1{
  padding-left: 0.25rem;
}

.pl-2{
  padding-left: 0.5rem;
}

.pl-3{
  padding-left: 0.75rem;
}

.pl-4{
  padding-left: 1rem;
}

.pl-8{
  padding-left: 2rem;
}

.pr-0{
  padding-right: 0px;
}

.pr-1{
  padding-right: 0.25rem;
}

.pr-10{
  padding-right: 2.5rem;
}

.pr-12{
  padding-right: 3rem;
}

.pr-2{
  padding-right: 0.5rem;
}

.pr-2\.5{
  padding-right: 0.625rem;
}

.pr-3{
  padding-right: 0.75rem;
}

.pr-7{
  padding-right: 1.75rem;
}

.pr-8{
  padding-right: 2rem;
}

.pt-0{
  padding-top: 0px;
}

.pt-0\.5{
  padding-top: 0.125rem;
}

.pt-1{
  padding-top: 0.25rem;
}

.pt-1\.5{
  padding-top: 0.375rem;
}

.pt-12{
  padding-top: 3rem;
}

.pt-2{
  padding-top: 0.5rem;
}

.pt-3{
  padding-top: 0.75rem;
}

.pt-4{
  padding-top: 1rem;
}

.pt-5{
  padding-top: 1.25rem;
}

.pt-6{
  padding-top: 1.5rem;
}

.pt-8{
  padding-top: 2rem;
}

.text-left{
  text-align: left;
}

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

.text-right{
  text-align: right;
}

.align-middle{
  vertical-align: middle;
}

.font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-sans{
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl{
  font-size: 3rem;
  line-height: 1;
}

.text-6xl{
  font-size: 3.75rem;
  line-height: 1;
}

.text-\[0\.85em\]{
  font-size: 0.85em;
}

.text-\[0\.8rem\]{
  font-size: 0.8rem;
}

.text-\[0\.95rem\]{
  font-size: 0.95rem;
}

.text-\[10px\]{
  font-size: 10px;
}

.text-\[11px\]{
  font-size: 11px;
}

.text-\[12px\]{
  font-size: 12px;
}

.text-\[13px\]{
  font-size: 13px;
}

.text-\[14px\]{
  font-size: 14px;
}

.text-\[16px\]{
  font-size: 16px;
}

.text-\[7px\]{
  font-size: 7px;
}

.text-\[8px\]{
  font-size: 8px;
}

.text-\[9px\]{
  font-size: 9px;
}

.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-black{
  font-weight: 900;
}

.font-bold{
  font-weight: 700;
}

.font-extrabold{
  font-weight: 800;
}

.font-medium{
  font-weight: 500;
}

.font-normal{
  font-weight: 400;
}

.font-semibold{
  font-weight: 600;
}

.uppercase{
  text-transform: uppercase;
}

.normal-case{
  text-transform: none;
}

.italic{
  font-style: italic;
}

.tabular-nums{
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-\[22px\]{
  line-height: 22px;
}

.leading-none{
  line-height: 1;
}

.leading-relaxed{
  line-height: 1.625;
}

.leading-snug{
  line-height: 1.375;
}

.leading-tight{
  line-height: 1.25;
}

.tracking-\[0\.05em\]{
  letter-spacing: 0.05em;
}

.tracking-\[0\.08em\]{
  letter-spacing: 0.08em;
}

.tracking-\[0\.12em\]{
  letter-spacing: 0.12em;
}

.tracking-\[0\.18em\]{
  letter-spacing: 0.18em;
}

.tracking-\[0\.25em\]{
  letter-spacing: 0.25em;
}

.tracking-\[0\.28em\]{
  letter-spacing: 0.28em;
}

.tracking-\[0\.2em\]{
  letter-spacing: 0.2em;
}

.tracking-\[0\.35em\]{
  letter-spacing: 0.35em;
}

.tracking-\[0\.3em\]{
  letter-spacing: 0.3em;
}

.tracking-\[1\.5px\]{
  letter-spacing: 1.5px;
}

.tracking-\[1px\]{
  letter-spacing: 1px;
}

.tracking-normal{
  letter-spacing: 0em;
}

.tracking-tight{
  letter-spacing: -0.025em;
}

.tracking-wide{
  letter-spacing: 0.025em;
}

.tracking-wider{
  letter-spacing: 0.05em;
}

.tracking-widest{
  letter-spacing: 0.1em;
}

.text-\[\#00d4ff\]{
  --tw-text-opacity: 1;
  color: rgb(0 212 255 / var(--tw-text-opacity, 1));
}

.text-\[\#00f0ff\]{
  --tw-text-opacity: 1;
  color: rgb(0 240 255 / var(--tw-text-opacity, 1));
}

.text-\[\#00f0ff\]\/60{
  color: rgb(0 240 255 / 0.6);
}

.text-\[\#00f0ff\]\/70{
  color: rgb(0 240 255 / 0.7);
}

.text-\[\#00ff41\]{
  --tw-text-opacity: 1;
  color: rgb(0 255 65 / var(--tw-text-opacity, 1));
}

.text-\[\#00ff88\]\/60{
  color: rgb(0 255 136 / 0.6);
}

.text-\[\#00ffff\]{
  --tw-text-opacity: 1;
  color: rgb(0 255 255 / var(--tw-text-opacity, 1));
}

.text-\[\#00ffff\]\/50{
  color: rgb(0 255 255 / 0.5);
}

.text-\[\#00ffff\]\/70{
  color: rgb(0 255 255 / 0.7);
}

.text-\[\#888\]{
  --tw-text-opacity: 1;
  color: rgb(136 136 136 / var(--tw-text-opacity, 1));
}

.text-\[\#8A8A9E\]{
  --tw-text-opacity: 1;
  color: rgb(138 138 158 / var(--tw-text-opacity, 1));
}

.text-\[\#8aa0a8\]{
  --tw-text-opacity: 1;
  color: rgb(138 160 168 / var(--tw-text-opacity, 1));
}

.text-\[\#9933ff\]{
  --tw-text-opacity: 1;
  color: rgb(153 51 255 / var(--tw-text-opacity, 1));
}

.text-\[\#9933ff\]\/60{
  color: rgb(153 51 255 / 0.6);
}

.text-\[\#9933ff\]\/70{
  color: rgb(153 51 255 / 0.7);
}

.text-\[\#9df7ff\]{
  --tw-text-opacity: 1;
  color: rgb(157 247 255 / var(--tw-text-opacity, 1));
}

.text-\[\#FAD26A\]{
  --tw-text-opacity: 1;
  color: rgb(250 210 106 / var(--tw-text-opacity, 1));
}

.text-\[\#FFD700\]{
  --tw-text-opacity: 1;
  color: rgb(255 215 0 / var(--tw-text-opacity, 1));
}

.text-\[\#bf00ff\]{
  --tw-text-opacity: 1;
  color: rgb(191 0 255 / var(--tw-text-opacity, 1));
}

.text-\[\#f59e0b\]{
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}

.text-\[\#ff2e4d\]\/80{
  color: rgb(255 46 77 / 0.8);
}

.text-\[\#ff3344\]{
  --tw-text-opacity: 1;
  color: rgb(255 51 68 / var(--tw-text-opacity, 1));
}

.text-\[\#ff4655\]{
  --tw-text-opacity: 1;
  color: rgb(255 70 85 / var(--tw-text-opacity, 1));
}

.text-\[var\(--accent\)\]{
  color: var(--accent);
}

.text-accent-foreground{
  color: oklch(var(--accent-foreground));
}

.text-amber-300{
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}

.text-amber-400{
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.text-amber-400\/70{
  color: rgb(251 191 36 / 0.7);
}

.text-black{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.text-blue-400{
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.text-card-foreground{
  color: oklch(var(--card-foreground));
}

.text-current{
  color: currentColor;
}

.text-cyan-300{
  --tw-text-opacity: 1;
  color: rgb(103 232 249 / var(--tw-text-opacity, 1));
}

.text-cyan-300\/80{
  color: rgb(103 232 249 / 0.8);
}

.text-cyan-400{
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}

.text-cyan-700{
  --tw-text-opacity: 1;
  color: rgb(14 116 144 / var(--tw-text-opacity, 1));
}

.text-destructive{
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.text-destructive-foreground{
  color: oklch(var(--destructive-foreground));
}

.text-emerald-400{
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}

.text-foreground{
  color: oklch(var(--foreground));
}

.text-fuchsia-400{
  --tw-text-opacity: 1;
  color: rgb(232 121 249 / var(--tw-text-opacity, 1));
}

.text-gray-400{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-green-400{
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.text-muted-foreground{
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.text-popover-foreground{
  color: oklch(var(--popover-foreground));
}

.text-primary{
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}

.text-primary-foreground{
  color: oklch(var(--primary-foreground));
}

.text-purple-300{
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}

.text-purple-400{
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}

.text-red-200{
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}

.text-red-200\/90{
  color: rgb(254 202 202 / 0.9);
}

.text-red-300{
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.text-red-400{
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.text-red-400\/80{
  color: rgb(248 113 113 / 0.8);
}

.text-red-500{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-secondary-foreground{
  color: oklch(var(--secondary-foreground));
}

.text-sidebar-foreground{
  color: oklch(var(--sidebar-foreground));
}

.text-sky-400{
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}

.text-slate-100{
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}

.text-slate-300{
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.text-slate-400{
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.text-slate-500{
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.text-slate-600{
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.text-teal-400{
  --tw-text-opacity: 1;
  color: rgb(45 212 191 / var(--tw-text-opacity, 1));
}

.text-violet-400{
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity, 1));
}

.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/20{
  color: rgb(255 255 255 / 0.2);
}

.text-white\/25{
  color: rgb(255 255 255 / 0.25);
}

.text-white\/30{
  color: rgb(255 255 255 / 0.3);
}

.text-white\/35{
  color: rgb(255 255 255 / 0.35);
}

.text-white\/40{
  color: rgb(255 255 255 / 0.4);
}

.text-white\/45{
  color: rgb(255 255 255 / 0.45);
}

.text-white\/50{
  color: rgb(255 255 255 / 0.5);
}

.text-white\/55{
  color: rgb(255 255 255 / 0.55);
}

.text-white\/60{
  color: rgb(255 255 255 / 0.6);
}

.text-white\/70{
  color: rgb(255 255 255 / 0.7);
}

.text-white\/80{
  color: rgb(255 255 255 / 0.8);
}

.text-yellow-300{
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}

.text-yellow-400{
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

.text-zinc-300{
  --tw-text-opacity: 1;
  color: rgb(212 212 216 / var(--tw-text-opacity, 1));
}

.text-zinc-400{
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}

.text-zinc-500{
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}

.text-zinc-600{
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}

.underline-offset-4{
  text-underline-offset: 4px;
}

.placeholder-white\/20::-moz-placeholder{
  color: rgb(255 255 255 / 0.2);
}

.placeholder-white\/20::placeholder{
  color: rgb(255 255 255 / 0.2);
}

.placeholder-white\/25::-moz-placeholder{
  color: rgb(255 255 255 / 0.25);
}

.placeholder-white\/25::placeholder{
  color: rgb(255 255 255 / 0.25);
}

.opacity-0{
  opacity: 0;
}

.opacity-100{
  opacity: 1;
}

.opacity-40{
  opacity: 0.4;
}

.opacity-50{
  opacity: 0.5;
}

.opacity-60{
  opacity: 0.6;
}

.opacity-70{
  opacity: 0.7;
}

.opacity-80{
  opacity: 0.8;
}

.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\]{
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_10px_rgba\(156\2c 163\2c 175\2c 0\.2\)\]{
  --tw-shadow: 0 0 10px rgba(156,163,175,0.2);
  --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_10px_rgba\(234\2c 88\2c 12\2c 0\.2\)\]{
  --tw-shadow: 0 0 10px rgba(234,88,12,0.2);
  --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_14px_rgba\(0\2c 255\2c 65\2c 0\.6\)\]{
  --tw-shadow: 0 0 14px rgba(0,255,65,0.6);
  --tw-shadow-colored: 0 0 14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_15px_rgba\(0\2c 212\2c 255\2c 0\.3\)\]{
  --tw-shadow: 0 0 15px rgba(0,212,255,0.3);
  --tw-shadow-colored: 0 0 15px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_15px_rgba\(191\2c 0\2c 255\2c 0\.25\)\]{
  --tw-shadow: 0 0 15px rgba(191,0,255,0.25);
  --tw-shadow-colored: 0 0 15px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_15px_rgba\(234\2c 179\2c 8\2c 0\.3\)\]{
  --tw-shadow: 0 0 15px rgba(234,179,8,0.3);
  --tw-shadow-colored: 0 0 15px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_16px_rgba\(236\2c 72\2c 153\2c 0\.7\)\]{
  --tw-shadow: 0 0 16px rgba(236,72,153,0.7);
  --tw-shadow-colored: 0 0 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_18px_rgba\(0\2c 255\2c 255\2c 0\.7\)\]{
  --tw-shadow: 0 0 18px rgba(0,255,255,0.7);
  --tw-shadow-colored: 0 0 18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_18px_rgba\(59\2c 130\2c 246\2c 0\.8\)\]{
  --tw-shadow: 0 0 18px rgba(59,130,246,0.8);
  --tw-shadow-colored: 0 0 18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_20px_rgba\(153\2c 51\2c 255\2c 0\.85\)\]{
  --tw-shadow: 0 0 20px rgba(153,51,255,0.85);
  --tw-shadow-colored: 0 0 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_8px_40px_rgba\(255\2c 0\2c 0\2c 0\.3\)\]{
  --tw-shadow: 0 8px 40px rgba(255,0,0,0.3);
  --tw-shadow-colored: 0 8px 40px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-none{
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xs{
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[\#00ff41\]\/20{
  --tw-shadow-color: rgb(0 255 65 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-\[\#ff3344\]\/20{
  --tw-shadow-color: rgb(255 51 68 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline{
  outline-style: solid;
}

.ring{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-0{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-pink-500{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(236 72 153 / var(--tw-ring-opacity, 1));
}

.ring-ring\/50{
  --tw-ring-color: oklch(var(--ring) / 0.5);
}

.ring-sidebar-ring{
  --tw-ring-color: oklch(var(--sidebar-ring));
}

.ring-offset-background{
  --tw-ring-offset-color: oklch(var(--background));
}

.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(40px);
  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(64px);
  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: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  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-\[0_0_10px_rgba\(0\2c 255\2c 255\2c 0\.8\)\]{
  --tw-drop-shadow: drop-shadow(0 0 10px rgba(0,255,255,0.8));
  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-\[0_0_10px_rgba\(239\2c 68\2c 68\2c 0\.8\)\]{
  --tw-drop-shadow: drop-shadow(0 0 10px rgba(239,68,68,0.8));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.grayscale{
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert{
  --tw-invert: invert(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);
}

.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{
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-md{
  --tw-backdrop-blur: blur(12px);
  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-sm{
  --tw-backdrop-blur: blur(4px);
  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{
  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, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[color\2c box-shadow\]{
  transition-property: color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[filter\]{
  transition-property: filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[left\2c right\2c width\]{
  transition-property: left,right,width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[margin\2c opacity\]{
  transition-property: margin,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[text-shadow\]{
  transition-property: text-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[transform\2c opacity\]{
  transition-property: transform,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[width\2c height\2c padding\]{
  transition-property: width,height,padding;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[width\]{
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-none{
  transition-property: none;
}

.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-shadow{
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-100{
  transition-duration: 100ms;
}

.duration-1000{
  transition-duration: 1000ms;
}

.duration-150{
  transition-duration: 150ms;
}

.duration-200{
  transition-duration: 200ms;
}

.duration-300{
  transition-duration: 300ms;
}

.duration-500{
  transition-duration: 500ms;
}

.duration-700{
  transition-duration: 700ms;
}

.ease-in{
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear{
  transition-timing-function: linear;
}

.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.will-change-transform{
  will-change: transform;
}

.\@container\/card-header{
  container-type: inline-size;
  container-name: card-header;
}

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

.animate-in{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.fade-in{
  --tw-enter-opacity: 0;
}

.fade-in-0{
  --tw-enter-opacity: 0;
}

.fade-out{
  --tw-exit-opacity: 0;
}

.zoom-in{
  --tw-enter-scale: 0;
}

.zoom-in-95{
  --tw-enter-scale: .95;
}

.slide-in-from-bottom{
  --tw-enter-translate-y: 100%;
}

.duration-100{
  animation-duration: 100ms;
}

.duration-1000{
  animation-duration: 1000ms;
}

.duration-150{
  animation-duration: 150ms;
}

.duration-200{
  animation-duration: 200ms;
}

.duration-300{
  animation-duration: 300ms;
}

.duration-500{
  animation-duration: 500ms;
}

.duration-700{
  animation-duration: 700ms;
}

.ease-in{
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out{
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear{
  animation-timing-function: linear;
}

.ease-out{
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.running{
  animation-play-state: running;
}

.\!paused{
  animation-play-state: paused !important;
}

.paused{
  animation-play-state: paused;
}

.\[--cell-size\:--spacing\(8\)\]{
  --cell-size: var(--spacing(8));
}

/* Force light text colors for maximum readability on dark backgrounds */

* {
  color: inherit;
}

/* Collection modal name spans — force WHITE so the global `p, span, div { color: oklch(0.92 0.08 180) }`
   rule (lines 89-93) does not bleed cyan/lime into the mod-name and keeper-name
   spans that wrap {modifier.name} / {keeper.name} inside the h3 tags in
   Collection.tsx. The h3 inline color:#fff is correct but the inner <span>
   matches the global p/span/div selector with higher specificity than
   `* { color: inherit }`, overriding the white. These scoped classes target
   ONLY the name spans — the (i) InactiveInfoButton is a <button> (not a span)
   and keeps its own RARITY_NEON tier colors untouched. No textShadow/glow
   added here (user said no glow on names). */

.mod-name-text,
.keeper-name-text {
  color: #ffffff;
}

.font-orbitron {
  font-family: "Orbitron", sans-serif;
}

.font-jetbrains {
  font-family: "JetBrains Mono", monospace;
}

/* Enhanced Glassmorphism effect with purple-black tint.
   NOTE: backdrop-filter is intentionally NOT used here. A global blur on this
   reusable surface smeared the top of the screen in installed iOS PWA mode.
   The tinted gradient, thin neon border and glow shadow are preserved. */

.glassmorphism {
  background: linear-gradient(
    135deg,
    rgba(10, 0, 30, 0.7) 0%,
    rgba(30, 0, 60, 0.5) 100%
  );
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(0, 255, 255, 0.15), inset 0 1px 0 0
    rgba(255, 255, 255, 0.1);
}

/* Neon glow effects */

.text-glow-cyan {
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 255, 255, 0.6),
    0 0 30px rgba(0, 255, 255, 0.4), 0 0 40px rgba(0, 255, 255, 0.2);
}

.text-glow-green {
  text-shadow: 0 0 10px rgba(0, 255, 65, 0.8), 0 0 20px rgba(0, 255, 65, 0.6), 0
    0 30px rgba(0, 255, 65, 0.4), 0 0 40px rgba(0, 255, 65, 0.2);
}

.text-glow-purple {
  text-shadow: 0 0 10px rgba(153, 51, 255, 0.8), 0 0 20px
    rgba(153, 51, 255, 0.6), 0 0 30px rgba(153, 51, 255, 0.4), 0 0 40px
    rgba(153, 51, 255, 0.2);
}

.text-glow-yellow {
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.6),
    0 0 30px rgba(255, 215, 0, 0.4);
}

.box-glow-cyan {
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.4), 0 0 40px rgba(0, 255, 255, 0.2),
    0 0 60px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.05);
  border-color: rgba(0, 255, 255, 0.5);
}

.box-glow-green {
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.4), 0 0 40px rgba(0, 255, 65, 0.2), 0
    0 60px rgba(0, 255, 65, 0.1), inset 0 0 20px rgba(0, 255, 65, 0.05);
  border-color: rgba(0, 255, 65, 0.5);
}

.box-glow-purple {
  box-shadow: 0 0 20px rgba(153, 51, 255, 0.4), 0 0 40px rgba(153, 51, 255, 0.2),
    0 0 60px rgba(153, 51, 255, 0.1), inset 0 0 20px rgba(153, 51, 255, 0.05);
  border-color: rgba(153, 51, 255, 0.5);
}

.box-glow-gold {
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4), 0 0 40px rgba(255, 215, 0, 0.2),
    0 0 60px rgba(255, 215, 0, 0.1), inset 0 0 20px rgba(255, 215, 0, 0.05);
  border-color: rgba(255, 215, 0, 0.5);
}

/* Gradient button styles */

.btn-gradient-cyan {
  background: linear-gradient(135deg, #00ffff 0%, #0099ff 100%);
  border: 2px solid rgba(0, 255, 255, 0.5);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.4), inset 0 1px 0
    rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.btn-gradient-cyan:hover {
  background: linear-gradient(135deg, #00ffff 0%, #00ccff 100%);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.6), 0 0 60px rgba(0, 255, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.btn-gradient-purple {
  background: linear-gradient(135deg, #9933ff 0%, #6600cc 100%);
  border: 2px solid rgba(153, 51, 255, 0.5);
  box-shadow: 0 0 20px rgba(153, 51, 255, 0.4), inset 0 1px 0
    rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.btn-gradient-purple:hover {
  background: linear-gradient(135deg, #aa44ff 0%, #7700dd 100%);
  box-shadow: 0 0 30px rgba(153, 51, 255, 0.6), 0 0 60px rgba(153, 51, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.btn-gradient-green {
  background: linear-gradient(135deg, #00ff41 0%, #00cc33 100%);
  border: 2px solid rgba(0, 255, 65, 0.5);
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.4), inset 0 1px 0
    rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.btn-gradient-green:hover {
  background: linear-gradient(135deg, #00ff41 0%, #00dd38 100%);
  box-shadow: 0 0 30px rgba(0, 255, 65, 0.6), 0 0 60px rgba(0, 255, 65, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

/* Animation keyframes */

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4), 0 0 40px rgba(0, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.6), 0 0 60px rgba(0, 255, 255, 0.3),
      0 0 90px rgba(0, 255, 255, 0.1);
  }
}

@keyframes pulse-glow-purple {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(153, 51, 255, 0.4), 0 0 40px
      rgba(153, 51, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(153, 51, 255, 0.6), 0 0 60px
      rgba(153, 51, 255, 0.3), 0 0 90px rgba(153, 51, 255, 0.1);
  }
}

@keyframes slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-down {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

.animate-pulse-glow-purple {
  animation: pulse-glow-purple 2s ease-in-out infinite;
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out;
}

.animate-slide-down {
  animation: slide-down 0.3s ease-out;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Premium smooth scroll */

html {
  scroll-behavior: smooth;
  /* iOS standalone PWA: kill the top rubber-band elasticity so the compositor
     never reveals a grey bounce tile above the app. */
  overscroll-behavior-y: none !important;
  background-color: #010103 !important;
}

body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  background-color: #010103 !important;
}

/* Root paint layer. iOS standalone rubber-band can expose the root canvas
   before body paints; force the deepest obsidian so no grey square shows. */

:root {
  background-color: #010103 !important;
}

/* App mount element. WebKit recalculates the viewport when the mobile keyboard
   opens; without an explicit background on #root the compositor can expose the
   default white canvas for a single frame. Paint the same fixed obsidian here
   and let it cover the viewport so no flash shows during the resize. */

#root {
  background-color: #010103;
  min-height: 100%;
}

/* =========================================================================
   iOS INSTALLED-PWA SAFE-AREA SYSTEM
   index.html sets viewport-fit=cover + apple-mobile-web-app-status-bar-style
   black-translucent, so in an installed iOS PWA the layout viewport starts at
   the physical top of the screen, UNDER the status bar (time + battery).

   A top offset is applied to app content so the top site buttons and the map
   Exit button sit BELOW the status bar, exactly as they do in the browser.
   --safe-top is the single source of truth; components consume it instead
   of hardcoding env() so the value stays consistent everywhere. */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Top offset for app content in installed PWA mode. Applied to the dashboard
   shell and the land viewer page so their top controls clear the status bar.
   In the browser --safe-top is 0px, so this is a no-op there. */

.safe-top-offset {
  padding-top: var(--safe-top);
}

/* Slim cyberpunk scrollbar */

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00ffff 0%, #9933ff 100%);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(0, 255, 255, 0.4);
  -webkit-transition: background 0.3s ease, box-shadow 0.3s ease;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #00ffff 0%, #cc55ff 100%);
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.7), 0 0 20px rgba(153, 51, 255, 0.4);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #9933ff transparent;
}

/* Themed chat scrollbar. Inside the chat sheet the biome's --accent drives the
   scrollbar thumb so it matches the selected theme instead of the global
   cyan/purple gradient. Scoped to the sheet so the rest of the app is
   unaffected. */

.chat-themed-sheet ::-webkit-scrollbar-thumb {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-soft);
}

.chat-themed-sheet ::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-soft);
}

.chat-themed-sheet * {
  scrollbar-color: var(--accent) transparent;
}

/* Themed input capsule focus ring — follows the active biome accent. */

.chat-input-capsule:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft);
}

/* Input dock GPU layer. The capsule is promoted to its own compositing layer
   so the reply/edit banner's slide and the dock's own paint never trigger a
   layout recalculation or repaint of the message feed behind it. `will-change`
   is scoped to transform/opacity only — the capsule's size, padding and
   structural width are untouched. */

.chat-input-capsule {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Reply/Edit preview banner GPU layer. Each banner renders inside a fixed-height
   reserved slot in the composer; promoting it to its own compositing layer keeps
   its slide/fade (translateX + opacity) entirely on the GPU compositor so the
   dock's paint never reflows the feed behind it. The slot's fixed height and the
   banner's structural width are untouched. */

.chat-banner-layer {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Hide scrollbar utility — global so it works on every page (e.g. Public Lands),
   not only where Marketplace.tsx injects its own <style> tag. */

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Cosmic background overlay */

.cosmic-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      ellipse at center,
      rgba(153, 51, 255, 0.1) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse at top left,
      rgba(0, 255, 255, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at bottom right,
      rgba(0, 255, 65, 0.1) 0%,
      transparent 50%
    );
  pointer-events: none;
  z-index: 1;
}

/* Neon border effect */

.neon-border {
  position: relative;
  border: 2px solid transparent;
  background: linear-gradient(
      135deg,
      rgba(10, 0, 30, 0.7),
      rgba(30, 0, 60, 0.5)
    )
    padding-box, linear-gradient(135deg, #00ffff, #9933ff, #00ff41) border-box;
}

/* Holographic effect */

.holographic {
  background: linear-gradient(
    135deg,
    rgba(0, 255, 255, 0.1) 0%,
    rgba(153, 51, 255, 0.1) 25%,
    rgba(0, 255, 65, 0.1) 50%,
    rgba(153, 51, 255, 0.1) 75%,
    rgba(0, 255, 255, 0.1) 100%
  );
  background-size: 200% 200%;
  animation: holographic-shift 3s ease infinite;
}

@keyframes holographic-shift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* ✅ FIX 1: 3D Cube Scene Container - ENFORCED min-height: 65vh, height: 100%, width: 100% */

.cube-container {
  min-height: 65vh !important;
  height: 100% !important;
  width: 100% !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  touch-action: auto !important;
  pointer-events: auto !important;
}

/* ✅ FIX 1: Canvas wrapper with explicit sizing - ENFORCED min-height: 65vh */

.cybercube-canvas {
  min-height: 65vh !important;
  height: 100% !important;
  width: 100% !important;
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  touch-action: auto !important;
  pointer-events: auto !important;
}

/* ✅ FIX 1: Canvas element explicit sizing - CRITICAL for preventing collapse */

.cube-container canvas,
.cybercube-canvas canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  touch-action: auto !important;
}

/* ✅ FIX 1: Parent wrappers for Dashboard layout - ENFORCED position: relative, display: flex */

.cube-container,
.cybercube-canvas,
.cube-container > div,
.cybercube-canvas > div {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Governance card entrance animation */

@keyframes govCardIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Land smoke pulse animation */

@keyframes landSmoke {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

/* Forge grid pulse animation — very subtle */

@keyframes forge-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.92;
  }
}

.animate-forge-pulse {
  animation: forge-pulse 3s ease-in-out infinite;
}

/* Mini popup entrance — scale + fade in 150ms */

@keyframes mini-popup-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.mini-popup-enter {
  animation: mini-popup-in 150ms ease-out both;
}

/* Public Lands viewer modal entrance — scale + fade, mirrors Collection.tsx ModifierCard pattern */

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.animate-fade-in-scale {
  animation: fadeInScale 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Public Lands card grid entrance — staggered fade-up */

@keyframes publicLandCardIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-public-land-card {
  animation: publicLandCardIn 280ms ease-out both;
}

/* prefers-reduced-motion guard for the PublicLandViewer heart animations.
   The falling heart and header heart pop are driven by motion/react inline
   transitions; this guard is a CSS safety net that neutralizes any
   transform/opacity animation on heart elements when the user requests
   reduced motion. Motion/react also honors prefers-reduced-motion via its
   own useReducedMotion hook, so this is belt-and-suspenders. */

@media (prefers-reduced-motion: reduce) {
  [data-ocid="public_land.viewer.like_button"] *,
  [aria-hidden="true"] svg:not(.chat-copy-confirm) path {
    animation: none !important;
    transition: none !important;
  }
}

/* Open on Map button — neon biome pulse glow.
   The button sets --biome-color to a biome color with alpha (e.g. `${biomeColor}55`),
   so the glow adapts to whichever biome the land belongs to. Pulses box-shadow
   and text-shadow together for a cohesive neon accent that matches the existing
   cyan/purple/green biome aesthetic.

   Soft slow beacon pulse: opacity breathes between 0.55 (floor) and 1.0 so the
   glow never fully disappears — gentle and smooth like a beacon, not a sharp
   flickering lamp. The box-shadow/text-shadow intensities stay constant; only
   opacity animates, which keeps the glow color/shape stable while the
   brightness softly rises and falls. 6s duration with a soft cubic-bezier ease
   for a slow breathing curve. */

@keyframes pulse-glow-biome {
  0%,
  100% {
    opacity: 0.55;
    box-shadow: 0 0 10px var(--biome-color), 0 0 20px var(--biome-color), inset
      0 0 7px var(--biome-color);
    text-shadow: 0 0 5px var(--biome-color);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 13px var(--biome-color), 0 0 26px var(--biome-color), 0 0
      38px var(--biome-color), inset 0 0 9px var(--biome-color);
    text-shadow: 0 0 7px var(--biome-color), 0 0 12px var(--biome-color);
  }
}

.open-on-map-btn {
  animation: pulse-glow-biome 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* LandCard "Open on map" button — biome-colored soft pulse driven by the
   --biome-color CSS custom property set inline on the button element.
   Mirrors the pulse-glow-biome pattern above: a slow breathing beacon that
   reads var(--biome-color) so each land card's map button glows in its own
   biome accent. The button sets --biome-color to a biome-color-with-alpha
   value so the glow reads as a soft biome accent. 2.4s ease-in-out keeps it
   a gentle, slightly faster beacon than the 6s viewer buttons. */

@keyframes landCardMapPulse {
  0%,
  100% {
    box-shadow: 0 0 10px var(--biome-color);
  }
  50% {
    box-shadow: 0 0 18px var(--biome-color), 0 0 26px var(--biome-color);
  }
}

/* Inspect All Mods button — reuses the SAME pulse-glow-biome keyframe and
   timing/easing/duration as the Open on Map button so the two action buttons
   in the PublicLandViewer body share one cohesive slow soft beacon pulse.
   The button sets --biome-color to a cyan-with-alpha value so the glow reads
   as a cyan accent (matching the magnifier icon color) while keeping the
   identical animation curve and opacity floor. */

.inspect-mods-btn {
  animation: pulse-glow-biome 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .open-on-map-btn,
  .inspect-mods-btn {
    animation: none;
  }
}

/* Profile drawer — built-in round SheetContent close button.
   The custom duplicate purple square close button was removed from
   ProfileDrawer.tsx; only the built-in round close button remains (it
   cannot be removed — no hideCloseButton prop exists on SheetContent).
   This rule styles the X ICON ONLY (the SVG glyph inside the built-in
   close button) with cyan neon color + glow, leaving the round button
   background at its default appearance.
   Selector: the built-in close button is a direct child <button> of
   SheetContent (rendered after {children}) and contains an sr-only
   "Close" span, so :has(span.sr-only) reliably matches it without
   touching nested action buttons inside the drawer body. */

.profile-drawer-content > button:has(span.sr-only) svg {
  color: #00ffff;
  filter: drop-shadow(0 0 4px rgba(0, 255, 255, 0.9))
    drop-shadow(0 0 8px rgba(0, 255, 255, 0.5));
}

/* Reduced motion — keep the cyan color but drop the glow animation pulse
   (the glow is static, but we keep this guard for consistency with the
   rest of the neon system). */

@media (prefers-reduced-motion: reduce) {
  .profile-drawer-content > button:has(span.sr-only) svg {
    filter: drop-shadow(0 0 3px rgba(0, 255, 255, 0.7));
  }
}

/* Leaderboard "me" star — custom gold star sized to match the old icon
   (~32px). Size is controlled purely by CSS (the SVG width/height attributes
   were removed); the star is absolutely positioned inside a relative button
   in a vertical stack, so no parent shrinks it. */

.leaderboardStar {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  display: block;
  overflow: visible;
  flex-shrink: 0;
  filter: drop-shadow(0 0 2px rgba(255, 196, 35, 0.5));
}

/* ============================================================
   TWITTER NEWS FEED — slide-out menu (Collection section)
   Extends the neon biome system. Reuses existing tokens
   (--primary cyan, --secondary purple, --accent magenta),
   .glassmorphism, .box-glow-cyan/purple, Orbitron + JetBrains Mono.
   Feed-specific utilities below are additive — they do NOT
   override any existing class. All sizes are tuned to the
   w-[min(720px,85vw)] slide-out menu width.
   ============================================================ */

/* Feed slide-out panel — replicates FilterDrawer.tsx pattern but wider.
   Used on the SheetContent element (Radix Dialog side='left'). */

.feed-panel {
  background: linear-gradient(
    135deg,
    rgba(8, 0, 28, 0.97) 0%,
    rgba(20, 0, 50, 0.95) 100%
  );
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.6), 0 0 100px rgba(153, 51, 255, 0.08);
}

/* Feed header — Orbitron tracking-widest, mirrors FilterDrawer header.
   Apply to the header row inside the feed panel. */

.feed-header {
  border-bottom: 1px solid rgba(0, 255, 255, 0.18);
  background: linear-gradient(
    180deg,
    rgba(0, 255, 255, 0.04) 0%,
    transparent 100%
  );
}

/* Feed scroll body — slim cyan→purple scrollbar is inherited globally,
   but we add momentum scroll + hide default scrollbar for the panel. */

.feed-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

/* Feed post card — glassmorphism tuned for the feed width.
   Rounded-2xl, subtle cyan/purple glow, hover intensifies.
   Sits on a thin gradient divider (feed-divider) between posts. */

.feed-post-card {
  background: linear-gradient(
    135deg,
    rgba(10, 0, 30, 0.55) 0%,
    rgba(24, 0, 48, 0.45) 100%
  );
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(0, 255, 255, 0.18);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 0
    rgba(255, 255, 255, 0.06);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s
    ease;
}

.feed-post-card:hover {
  border-color: rgba(0, 255, 255, 0.45);
  box-shadow: 0 0 24px rgba(0, 255, 255, 0.28), 0 0 48px rgba(0, 255, 255, 0.12),
    0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

/* Variant for purple-rarity projects — same shape, purple glow on hover. */

.feed-post-card.is-purple {
  border-color: rgba(153, 51, 255, 0.22);
}

.feed-post-card.is-purple:hover {
  border-color: rgba(153, 51, 255, 0.5);
  box-shadow: 0 0 24px rgba(153, 51, 255, 0.28), 0 0 48px
    rgba(153, 51, 255, 0.12), 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 0
    rgba(255, 255, 255, 0.1);
}

/* Variant for magenta-rarity projects. */

.feed-post-card.is-magenta {
  border-color: rgba(255, 0, 255, 0.22);
}

.feed-post-card.is-magenta:hover {
  border-color: rgba(255, 0, 255, 0.5);
  box-shadow: 0 0 24px rgba(255, 0, 255, 0.26), 0 0 48px rgba(255, 0, 255, 0.12),
    0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

/* Variant for green-rarity projects. */

.feed-post-card.is-green {
  border-color: rgba(0, 255, 65, 0.22);
}

.feed-post-card.is-green:hover {
  border-color: rgba(0, 255, 65, 0.5);
  box-shadow: 0 0 24px rgba(0, 255, 65, 0.26), 0 0 48px rgba(0, 255, 65, 0.12),
    0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

/* Divider between posts — thin cyan→purple gradient line. */

.feed-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 255, 255, 0.25) 30%,
    rgba(153, 51, 255, 0.25) 70%,
    transparent 100%
  );
  margin: 0 auto;
  width: 92%;
}

/* Project avatar — round with neon rarity-colored ring.
   Set --feed-ring-color inline to the rarity color (e.g. #00ffff,
   #9933ff, #ff00ff, #00ff41). Default ring is cyan. */

.feed-avatar {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 2px solid var(--feed-ring-color, #00ffff);
  box-shadow: 0 0 10px var(--feed-ring-color, rgba(0, 255, 255, 0.6)), 0 0 18px
    var(--feed-ring-color, rgba(0, 255, 255, 0.3));
  -o-object-fit: cover;
     object-fit: cover;
  background: rgba(10, 0, 30, 0.6);
  flex-shrink: 0;
}

/* Project name — Orbitron, slightly tracked, white with faint cyan tint. */

.feed-project-name {
  font-family: "Orbitron", sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(240, 255, 255, 0.95);
}

/* Tweet body — JetBrains Mono, readable light cyan, comfortable line-height. */

.feed-tweet-text {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(180, 230, 240, 0.92);
  word-break: break-word;
}

/* Tweet time — muted cyan, small. */

.feed-time {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  color: rgba(0, 220, 220, 0.55);
  letter-spacing: 0.02em;
}

/* Tweet media preview — 16:9, rounded, lazy-load shimmer placeholder.
   Use with <img loading="lazy" />; the shimmer shows until image loads. */

.feed-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 255, 255, 0.15);
  background: linear-gradient(
    110deg,
    rgba(10, 0, 30, 0.6) 0%,
    rgba(24, 0, 48, 0.7) 40%,
    rgba(10, 0, 30, 0.6) 80%
  );
  background-size: 200% 100%;
  animation: feed-shimmer 1.6s ease-in-out infinite;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.feed-media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}

.feed-media.is-loaded {
  animation: none;
  background: transparent;
}

.feed-media:hover {
  border-color: rgba(0, 255, 255, 0.4);
  box-shadow: 0 0 18px rgba(0, 255, 255, 0.22);
}

/* Original-link chip — small cyan link to the tweet on x.com. */

.feed-link-chip {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  color: rgba(0, 255, 255, 0.85);
  border: 1px solid rgba(0, 255, 255, 0.25);
  border-radius: 9999px;
  padding: 2px 10px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.feed-link-chip:hover {
  color: rgba(0, 255, 255, 1);
  border-color: rgba(0, 255, 255, 0.55);
  background: rgba(0, 255, 255, 0.08);
}

/* Mini spinner — Loader2 cyan animate-spin pattern from LandDashboard.
   Apply to the lucide Loader2 svg element. */

.feed-spinner {
  color: #00ffff;
  filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.8));
  animation: feed-spin 0.7s linear infinite;
}

/* Empty state stub — centered icon + text, glassmorphism panel. */

.feed-empty {
  background: linear-gradient(
    135deg,
    rgba(10, 0, 30, 0.5) 0%,
    rgba(20, 0, 50, 0.4) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px dashed rgba(0, 255, 255, 0.25);
  border-radius: 16px;
}

/* Error state stub — same shape, magenta-tinted border for warning. */

.feed-error {
  background: linear-gradient(
    135deg,
    rgba(30, 0, 10, 0.5) 0%,
    rgba(40, 0, 20, 0.4) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px dashed rgba(255, 0, 100, 0.35);
  border-radius: 16px;
}

/* Retry button — small cyan outline button for the error state. */

.feed-retry-btn {
  font-family: "Orbitron", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(0, 255, 255, 0.95);
  border: 1px solid rgba(0, 255, 255, 0.45);
  border-radius: 9999px;
  padding: 6px 16px;
  background: rgba(0, 255, 255, 0.06);
  transition: all 0.2s ease;
}

.feed-retry-btn:hover {
  background: rgba(0, 255, 255, 0.14);
  border-color: rgba(0, 255, 255, 0.7);
  box-shadow: 0 0 14px rgba(0, 255, 255, 0.35);
}

/* Feed open button — sits in the Collection header Card.
   Reuses btn-gradient-cyan shape but smaller, with Twitter icon. */

.feed-open-btn {
  font-family: "Orbitron", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(240, 255, 255, 0.95);
  background: linear-gradient(
    135deg,
    rgba(0, 255, 255, 0.16),
    rgba(153, 51, 255, 0.16)
  );
  border: 1px solid rgba(0, 255, 255, 0.4);
  border-radius: 12px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
}

.feed-open-btn:hover {
  border-color: rgba(0, 255, 255, 0.7);
  box-shadow: 0 0 18px rgba(0, 255, 255, 0.3), 0 0 30px rgba(153, 51, 255, 0.15);
  transform: translateY(-1px);
}

/* Feed shimmer keyframe — used by .feed-media placeholder. */

@keyframes feed-shimmer {
  0%,
  100% {
    background-position: 200% 0;
  }
  50% {
    background-position: 0 0;
  }
}

/* Feed spinner keyframe — fast linear spin, 0.7s. */

@keyframes feed-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Feed card entrance — staggered fade-up for lazy-loaded posts. */

@keyframes feed-post-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feed-post-enter {
  animation: feed-post-in 240ms ease-out both;
}

/* Reduced motion — disable feed shimmer + spin + entrance for accessibility. */

@media (prefers-reduced-motion: reduce) {
  .feed-media,
  .feed-spinner,
  .feed-post-enter {
    animation: none !important;
  }
}

/* =========================================================================
   Notification + logout UI — Apple-style premium, subtle neon outlines.
   Appended per build contract; do NOT modify existing CSS above.
   ========================================================================= */

/* --- NeonMagnifierIcon — neon loupe hover/active states.
    The icon is an inline <svg> (NOT a button) consumed by the parent
    <button> wrappers in Marketplace (desktop ~line 1343, mobile ~line 1377)
    and PublicLands (line 852). Because the svg sits inside those parent
    buttons, `svg:hover` / `svg:active` fire when the parent button is
    hovered/pressed — no JS state needed. The base glow filter is set inline
    on the svg element (NeonMagnifierIcon.tsx); these rules override stroke
    color, filter, and transform on interaction, matching the user's
    ready-made `.cyber-search` variant:
      hover  → stroke #7df5ff, stronger glow, scale(1.08)
      active → scale(0.94)
      transition all .18s ease
    `transform-box: fill-box` + `transform-origin: center` keep the scale
    anchored to the icon's own bounding box (not the parent button). */

.neon-magnifier-icon {
  transition: stroke 0.18s ease, filter 0.18s ease, transform 0.18s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.neon-magnifier-icon:hover {
  stroke: #7df5ff;
  filter: drop-shadow(0 0 3px rgba(53, 234, 255, 1))
    drop-shadow(0 0 10px rgba(53, 234, 255, 0.7));
  transform: scale(1.08);
}

.neon-magnifier-icon:active {
  transform: scale(0.94);
}

@media (prefers-reduced-motion: reduce) {
  .neon-magnifier-icon {
    transition: none !important;
  }
  .neon-magnifier-icon:hover,
  .neon-magnifier-icon:active {
    transform: none !important;
  }
}

/* --- Description slider (Variant A: covers tier plate + ID/PWR/Network grid,
    does NOT cover name + (i); rarity bar untouched; Back/Close inside slider) --- */

.desc-slider {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 65%;
  max-width: 480px;
  background: rgba(10, 10, 20, 0.95);
  backdrop-filter: blur(18px);
  border-left: 1px solid #9933ff55;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.45);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  max-height: 100%;
  padding: 8px 18px 24px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.desc-slider.open {
  transform: translateX(0);
}

.desc-slider::-webkit-scrollbar {
  width: 6px;
}

.desc-slider::-webkit-scrollbar-thumb {
  background: #9933ff44;
  border-radius: 3px;
}

.desc-slider::-webkit-scrollbar-track {
  background: transparent;
}

/* Back / Close button inside the slider — apple-style, neon purple outline. */

.desc-slider-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #9933ff99;
  background: #9933ff1a;
  color: #e8e6ff;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), background 180ms
    ease-out, box-shadow 180ms ease-out;
  box-shadow: 0 0 10px #9933ff33;
}

.desc-slider-back:hover {
  transform: scale(1.04);
  background: #9933ff33;
  box-shadow: 0 0 14px #9933ff66;
}

.desc-slider-back:active {
  transform: scale(0.98);
}

/* --- Bell button (ProfileDrawer header, left of close X) — matches
   SceneOverlayIcons 22x22 rounded-square neon purple style. --- */

.bell-button {
  position: relative;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid #9933ff99;
  background: #9933ff26;
  color: #d9d4ff;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms
    ease-out, background 180ms ease-out;
  box-shadow: 0 0 10px #9933ff55;
}

.bell-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 14px #9933ff88;
  background: #9933ff40;
}

.bell-button:active {
  transform: scale(0.96);
}

.bell-button svg {
  width: 13px;
  height: 13px;
}

/* Red unread badge — top-right of the bell button. */

.bell-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff3344;
  color: #ffffff;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 6px rgba(255, 51, 68, 0.7);
  border: 1px solid rgba(10, 10, 20, 0.9);
  pointer-events: none;
}

/* --- Notifications popup (absolute, anchored under the bell) --- */

.notifications-popup {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 24px);
  max-height: 400px;
  overflow-y: auto;
  background: rgba(10, 10, 20, 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid #9933ff55;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 24px #9933ff33;
  z-index: 60;
  padding: 6px;
  animation: notif-pop-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.notifications-popup::-webkit-scrollbar {
  width: 6px;
}

.notifications-popup::-webkit-scrollbar-thumb {
  background: #9933ff44;
  border-radius: 3px;
}

.notifications-popup::-webkit-scrollbar-track {
  background: transparent;
}

@keyframes notif-pop-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Single notification row inside the popup. */

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px;
  border-bottom: 1px solid #9933ff22;
  transition: background 160ms ease-out;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item:hover {
  background: #9933ff14;
}

.notification-item.unread {
  background: #9933ff10;
}

.notification-item .notif-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #9933ff26;
  border: 1px solid #9933ff66;
  color: #d9d4ff;
}

.notification-item .notif-icon svg {
  width: 28px;
  height: 28px;
}

.notification-item .notif-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notification-item .notif-title {
  font-family: "Orbitron", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #e8e6ff;
  letter-spacing: 0.01em;
}

.notification-item .notif-sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: #8a86a8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-item .notif-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #ff3344;
  box-shadow: 0 0 6px rgba(255, 51, 68, 0.7);
  margin-top: 6px;
}

.notifications-empty {
  padding: 28px 16px;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: #6a6680;
  letter-spacing: 0.02em;
}

/* --- Bell tab badge (ProfileDrawer tab row) — red unread-count circle
   anchored to the top-right of the bell TabsTrigger. Adapts the existing
   .bell-badge pattern for the tab context (slightly larger to read over the
   enlarged bell icon). --- */

.bell-tab-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff3344;
  color: #ffffff;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 6px rgba(255, 51, 68, 0.7);
  border: 1px solid rgba(10, 10, 20, 0.9);
  pointer-events: none;
  z-index: 2;
}

/* --- Notifications tab list (ProfileDrawer 4th tab) — reuses the
   .notification-item row styling from the popup but adapts the container
   for the in-tab scroll region (no absolute popup, no max-height; the tab's
   own scroll container handles overflow). --- */

.notifications-tab-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.notifications-tab-empty {
  padding: 36px 16px;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: #6a6680;
  letter-spacing: 0.02em;
}

.notifications-tab-loading {
  padding: 36px 16px;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: #9933ff99;
  letter-spacing: 0.02em;
}

/* Inline liker-principal row inside a notification item — monospace, muted,
   with a borderless gray copy button (inspector 7x7 style). */

.notif-liker-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
}

.notif-liker-inline .notif-liker-principal {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

/* --- Floating logout button (over drawer) — matches SceneOverlayIcons
   22x22 rounded-square neon purple style, with a door icon. --- */

.logout-fab {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid #9933ff99;
  background: #9933ff26;
  color: #d9d4ff;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms
    ease-out, background 180ms ease-out, border-color 180ms ease-out;
  box-shadow: 0 0 10px #9933ff55;
}

.logout-fab:hover {
  transform: scale(1.05);
  box-shadow: 0 0 14px #9933ff88;
  background: #9933ff40;
}

.logout-fab:active {
  transform: scale(0.96);
}

.logout-fab svg {
  width: 13px;
  height: 13px;
}

/* --- Floating logout button (ProfileDrawer) — 44x44 neon door-icon FAB.
    Mirrors .logout-fab styling but doubled in size (22x22 → 44x44) for a
    comfortable mobile hit target (44px minimum). Anchored absolute to the
    drawer content bottom-right corner. The icon scales proportionally
    (13px → 22px). Existing .logout-fab above is intentionally kept untouched. */

.logout-fab-drawer {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid #9933ff99;
  background: #9933ff26;
  color: #d9d4ff;
  cursor: pointer;
  z-index: 70;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms
    ease-out, background 180ms ease-out, border-color 180ms ease-out;
  box-shadow: 0 0 12px #9933ff55;
}

.logout-fab-drawer:hover {
  transform: scale(1.05);
  box-shadow: 0 0 18px #9933ff88;
  background: #9933ff40;
}

.logout-fab-drawer:active {
  transform: scale(0.96);
}

.logout-fab-drawer svg {
  width: 22px;
  height: 22px;
}

/* --- Logout confirm popup (apple-style modal) --- */

.confirm-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: confirm-fade-in 200ms ease-out both;
  pointer-events: auto !important;
}

@keyframes confirm-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.confirm-popup {
  background: rgba(20, 20, 30, 0.98);
  backdrop-filter: blur(24px);
  border: 1px solid #9933ff55;
  border-radius: 16px;
  padding: 24px 22px 20px;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 30px #9933ff33;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: confirm-pop-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes confirm-pop-in {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.confirm-popup-title {
  font-family: "Orbitron", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #f0eeff;
  letter-spacing: 0.01em;
  text-align: center;
}

.confirm-popup-msg {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  line-height: 1.5;
  color: #a8a4c0;
  text-align: center;
}

.confirm-popup-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.confirm-popup-btn {
  flex: 1;
  padding: 11px 14px;
  border-radius: 12px;
  font-family: "Orbitron", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), background 160ms
    ease-out, box-shadow 160ms ease-out;
  border: 1px solid transparent;
  pointer-events: auto !important;
}

.confirm-popup-btn:active {
  transform: scale(0.97);
}

.confirm-popup-btn.confirm {
  background: #9933ff;
  color: #ffffff;
  border-color: #9933ff;
  box-shadow: 0 0 14px #9933ff66;
}

.confirm-popup-btn.confirm:hover {
  box-shadow: 0 0 20px #9933ff99;
  transform: scale(1.02);
}

.confirm-popup-btn.cancel {
  background: rgba(255, 255, 255, 0.04);
  color: #c8c4e0;
  border-color: rgba(255, 255, 255, 0.12);
}

.confirm-popup-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* --- Responsive tweaks --- */

@media (max-width: 480px) {
  .desc-slider {
    width: 100%;
    max-width: none;
  }
  .notifications-popup {
    width: 280px;
    right: -4px;
  }
  .confirm-popup {
    padding: 20px 18px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .desc-slider,
  .bell-button,
  .logout-fab,
  .logout-fab-drawer,
  .confirm-popup-btn,
  .notifications-popup,
  .confirm-popup,
  .confirm-popup-overlay,
  .desc-slider-back {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================================
   NFT CARD SCREENSHOT COMPOSITION — browser-composited land NFT card.
   Extends the established neon biome system (Orbitron + JetBrains Mono,
   cyan/purple/green biome colors). The card wraps a captured 3D scene
   (top ~80%, mobile rectangular canvas view) + an info panel (bottom ~20%)
   inside a neon biome border. Set --biome-color inline to the land's biome
   color so the border, name, dividers, and site link all adapt. Appended per
   build contract; do NOT modify existing CSS above.
   ========================================================================= */

/* Card frame — neon border in biome color. */

.nft-card {
  --biome-color: #00ffff;
  position: relative;
  width: 100%;
  background: linear-gradient(
    160deg,
    rgba(6, 0, 24, 0.97) 0%,
    rgba(16, 0, 42, 0.95) 100%
  );
  border: 2px solid var(--biome-color);
  border-radius: 18px;
  box-shadow: 0 0 22px var(--biome-color), 0 0 46px var(--biome-color), inset 0
    0 22px var(--biome-color);
  overflow: hidden;
  font-family: "JetBrains Mono", monospace;
}

/* Logo — stylized C, neon purple/teal on black, small top-left ~44px. */

.nft-logo {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 44px;
  height: 44px;
  z-index: 10;
  border-radius: 10px;
  -o-object-fit: contain;
     object-fit: contain;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 14px rgba(153, 51, 255, 0.5);
}

/* Scene area — top ~80%, mobile rectangular canvas view (not raw full-volume). */

.nft-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.15;
  overflow: hidden;
  background: #010103;
}

.nft-scene img,
.nft-scene canvas,
.nft-scene video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* Info panel — bottom ~20%, sections divided by divider stripes. */

.nft-info {
  position: relative;
  padding: 14px 16px 16px;
  background: linear-gradient(
    180deg,
    rgba(10, 0, 30, 0.92) 0%,
    rgba(20, 0, 50, 0.96) 100%
  );
  border-top: 1px solid var(--biome-color);
  display: flex;
  flex-direction: column;
}

/* Divider stripe — separates info sections (user preference). */

.nft-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--biome-color) 30%,
    rgba(153, 51, 255, 0.9) 70%,
    transparent 100%
  );
  margin: 10px 0;
  opacity: 0.7;
}

/* Info rows. */

.nft-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Biome name — biome color, NO emoji (user preference). */

.nft-biome-name {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 15px;
  color: var(--biome-color);
  text-shadow: 0 0 8px var(--biome-color);
}

/* Land ID — white. */

.nft-land-id {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #ffffff;
  opacity: 0.9;
}

/* PWR — purple neon lightning emoji + purple value. */

.nft-pwr {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  color: #b26bff;
  text-shadow: 0 0 8px rgba(153, 51, 255, 0.6);
}

/* Owner — icon from canvas (no frames) + truncated address. */

.nft-owner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: rgba(220, 235, 245, 0.85);
}

.nft-owner-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

.nft-owner-addr {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

/* Mods 0/49 — custom project icon or none. */

.nft-mods {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: rgba(180, 230, 240, 0.9);
}

.nft-mods-icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

/* Site link + QR. */

.nft-site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.nft-site-link {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--biome-color);
  word-break: break-all;
}

.nft-qr {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: #ffffff;
  padding: 3px;
  flex-shrink: 0;
}

/* QR gradient surface — the 45° diagonal 3-color gradient (biome accent →
   cyan → purple) that the offscreen canvas applies to the QR modules. Kept as
   a reusable utility so the preview and any DOM-based QR mirror the canvas
   palette. Deep saturated tones, no overexposure. */

.qr-gradient {
  background: var(--qr-gradient);
  background-size: 100% 100%;
}

/* Dark QR backing — replaces the legacy white #ffffff pad. */

.qr-backing {
  background: var(--qr-backing);
}

@media (prefers-reduced-motion: reduce) {
  .nft-card {
    box-shadow: 0 0 22px var(--biome-color);
  }
}

/* =========================================================================
   NFT PREVIEW MODAL — NftPreviewModal
   Opened by the 'Фотик' camera button on the 3D scene. Matches the land
   information inspector modal conventions exactly: fixed inset-0 z-[200],
   dark backdrop rgba(0,0,0,0.82) + backdropFilter blur(8px), portal to
   document.body, Escape/backdrop close, body scroll-lock. Inside: a circular
   neon cyberpunk spinner (frame + glow) under the current biome color, then
   the rendered NFT card image, then Save + Cancel buttons in the neon biome
   style. Set --biome-color inline to the land's biome color so the frame,
   spinner, and buttons all adapt. Appended per build contract; do NOT modify
   existing CSS above.
   ========================================================================= */

/* Overlay — exact InspectorModal convention: z-[200], rgba(0,0,0,0.82),
   blur(8px), centered flex, scroll-lock via overflow hidden on body handled
   by the component. */

.nft-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: nft-preview-fade-in 200ms ease-out both;
}

@keyframes nft-preview-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal panel — centered card with neon biome frame + glow. */

.nft-preview-modal {
  --biome-color: #00ffff;
  position: relative;
  width: min(92vw, 520px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
  background: linear-gradient(
    160deg,
    rgba(6, 0, 24, 0.97) 0%,
    rgba(16, 0, 42, 0.95) 100%
  );
  border: 2px solid var(--biome-color);
  border-radius: 18px;
  box-shadow: 0 0 12px var(--biome-color), 0 0 24px var(--biome-color), inset 0
    0 12px var(--biome-color);
  animation: nft-preview-pop-in 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
  font-family: "JetBrains Mono", monospace;
}

@keyframes nft-preview-pop-in {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Modal header — Orbitron, biome-colored title with soft glow. */

.nft-preview-title {
  font-family: "Orbitron", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--biome-color);
  text-shadow: 0 0 8px var(--biome-color);
  text-align: center;
}

/* Preview stage — holds the spinner while rendering, then the card image. */

.nft-preview-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1080 / 1400;
  border-radius: 12px;
  overflow: hidden;
  background: #010103;
  border: 1px solid var(--biome-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Rendered NFT card image — fills the stage once ready. */

.nft-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

/* ============================================================
   CIRCULAR NEON SPINNER — frame + glow under the current biome
   color (reads --biome-color set inline). A rotating outer ring
   with a bright leading arc and a soft pulsing glow, matching the
   Marketplace neon spinner. Rendered while the high-res card
   (~2048x2660px) is being composed.
   ============================================================ */

.nft-preview-spinner {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 9999px;
  border: 3px solid rgba(255, 255, 255, 0.08);
  border-top-color: var(--biome-color);
  border-right-color: var(--biome-color);
  box-shadow: 0 0 14px var(--biome-color), inset 0 0 12px var(--biome-color);
  animation: nft-preview-spin 0.9s linear infinite;
}

/* Soft pulsing glow ring behind the spinner — biome-colored halo. */

.nft-preview-spinner::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 9999px;
  border: 2px solid var(--biome-color);
  opacity: 0.55;
  animation: nft-preview-halo 1.8s ease-in-out infinite;
}

@keyframes nft-preview-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes nft-preview-halo {
  0%,
  100% {
    opacity: 0.35;
    box-shadow: 0 0 8px var(--biome-color);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 20px var(--biome-color), 0 0 32px var(--biome-color);
  }
}

/* Spinner caption — small monospace status line under the ring. */

.nft-preview-status {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--biome-color);
  opacity: 0.85;
  animation: nft-preview-blink 1.2s ease-in-out infinite;
}

@keyframes nft-preview-blink {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.95;
  }
}

/* ============================================================
   ACTION ROW — Save + Cancel buttons in neon biome style.
   ============================================================ */

.nft-preview-actions {
  display: flex;
  gap: 12px;
}

.nft-preview-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 12px;
  font-family: "Orbitron", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms
    ease-out, background 180ms ease-out, border-color 180ms ease-out;
}

.nft-preview-btn:active {
  transform: scale(0.97);
}

/* Save — filled biome gradient, strong glow (primary action). */

.nft-preview-btn-save {
  background: linear-gradient(
    135deg,
    var(--biome-color) 0%,
    rgba(153, 51, 255, 0.85) 100%
  );
  border-color: var(--biome-color);
  color: #010103;
  box-shadow: 0 0 16px var(--biome-color), inset 0 1px 0
    rgba(255, 255, 255, 0.35);
}

.nft-preview-btn-save:hover {
  box-shadow: 0 0 24px var(--biome-color), 0 0 40px var(--biome-color), inset 0
    1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

/* Cancel — ghost outline in biome color (secondary action). */

.nft-preview-btn-cancel {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--biome-color);
  color: var(--biome-color);
  text-shadow: 0 0 6px var(--biome-color);
}

.nft-preview-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 14px var(--biome-color);
}

@media (prefers-reduced-motion: reduce) {
  .nft-preview-overlay,
  .nft-preview-modal {
    animation: none;
  }
  .nft-preview-spinner,
  .nft-preview-spinner::before,
  .nft-preview-status {
    animation: none;
  }
  .nft-preview-modal {
    box-shadow: 0 0 12px var(--biome-color);
  }
}

/* =========================================================================
   ACHIEVEMENTS — "Diamond Vault" (ProfileDrawer Achievements tab)
   Additive visual layer on top of the neon biome system. Horizon Zero Dawn
   style diamond-art framing: layered diamond plates (outer tier frame +
   inner mat + faceted art), diamond studs at the vertices (gold on MYTHIC),
   grayscale locked state with 0/N progress chip, tier-colored neon checkmark on earned tiles, 4-page
   swipeable pager with dot rail, and a tier-framed info modal (name +
   description, English). Set tier via .tier-common/.tier-rare/
   .tier-legendary/.tier-mythic on the page/tile/modal root — the classes
   read --ach-tier-color / --ach-tier-glow / --ach-tier-gold.
   Appended per build contract; do NOT modify existing CSS above.
   ========================================================================= */

/* --- Tier color classes (set the CSS vars consumed by pages/tiles/modal) --- */

.tier-common {
  --ach-tier-color: oklch(var(--ach-common));
  --ach-tier-glow: oklch(var(--ach-common) / 0.45);
  --ach-tier-color-soft: oklch(var(--ach-common) / 0.3);
}

.tier-rare {
  --ach-tier-color: oklch(var(--ach-rare));
  --ach-tier-glow: oklch(var(--ach-rare) / 0.45);
  --ach-tier-color-soft: oklch(var(--ach-rare) / 0.3);
}

.tier-legendary {
  --ach-tier-color: oklch(var(--ach-legendary));
  --ach-tier-glow: oklch(var(--ach-legendary) / 0.45);
  --ach-tier-color-soft: oklch(var(--ach-legendary) / 0.3);
}

.tier-mythic {
  --ach-tier-color: oklch(var(--ach-mythic));
  --ach-tier-glow: oklch(var(--ach-mythic) / 0.45);
  --ach-tier-color-soft: oklch(var(--ach-mythic) / 0.3);
  --ach-tier-gold: oklch(var(--ach-gold));
}

/* --- Swipeable pager (4 pages: COMMON / RARE / LEGENDARY / MYTHIC) --- */

.ach-pager {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}

.ach-pager-track {
  display: flex;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ach-pager-page {
  flex: 0 0 100%;
  min-width: 100%;
  padding: 4px 2px 0;
}

.ach-page-label {
  font-family: "Orbitron", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ach-tier-color, #00ffff);
  text-shadow: 0 0 8px var(--ach-tier-glow, rgba(0, 255, 255, 0.6));
  margin-bottom: 10px;
}

/* --- Dot indicator rail --- */

.ach-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 12px 0 2px;
}

.ach-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  padding: 0;
  border: 1px solid rgba(0, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition: width 220ms cubic-bezier(0.22, 1, 0.36, 1), background 220ms
    ease-out, box-shadow 220ms ease-out, border-color 220ms ease-out;
}

.ach-dot.active {
  width: 22px;
  background: var(--ach-tier-color, #00ffff);
  border-color: var(--ach-tier-color, #00ffff);
  box-shadow: 0 0 8px var(--ach-tier-glow, rgba(0, 255, 255, 0.8));
}

/* --- 3x3 diamond grid (no vertical scroll — 9 tiles per page) --- */

.ach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* --- Achievement tile (invisible rectangular frame, art shown fully) --- */

.ach-tile {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Outer plate — invisible rectangular frame that centers the full art.
   No clip-path, no visible border, no frame glow: the transparent portrait
   art is shown completely, centered, pasted directly like the frameless
   cache photos. The tier-colored glow pulse lives on a separate element
   (.ach-tile-glow) behind the art, only for earned tiles. */

.ach-tile-plate {
  position: absolute;
  inset: 0;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Tier-colored glow pulse behind the art — mirrors the cache-pulse-glow
   animation used behind the frameless cache photos. Only rendered for
   earned (unlocked) tiles; locked tiles get no glow. */

.ach-tile-glow {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: radial-gradient(circle, var(--ach-tier-glow) 0%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  animation: ach-cache-pulse-glow 2.4s ease-in-out infinite;
}

/* Faceted art — full portrait, centered, no diamond cropping */

.ach-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  transition: filter 250ms ease-out, opacity 250ms ease-out;
}

/* Diamond studs were part of the old diamond-art frame; with invisible
   rectangular frames they no longer apply, so hide them. */

.ach-stud {
  display: none;
}

/* --- Locked state — grayscale art, muted frame, 0/N progress chip keeps its
   tier color --- */

.ach-tile.is-locked {
  cursor: default;
}

.ach-tile.is-locked .ach-tile-img {
  filter: grayscale(1) brightness(0.5) contrast(0.92);
  opacity: 0.7;
}

.ach-tile.is-locked .ach-tile-plate {
  box-shadow: none;
}

.ach-tile.is-locked .ach-tile-glow {
  display: none;
}

/* Progress counter — rounded chip in the tier color (0/N) */

.ach-progress {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 30px;
  height: 22px;
  padding: 0 7px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(8, 0, 28, 0.96);
  border: 1px solid var(--ach-tier-color);
  box-shadow: 0 0 8px var(--ach-tier-glow);
}

.ach-progress-text {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 600;
  color: var(--ach-tier-color);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* --- Earned state — compact tier-colored neon checkmark (top-right over the
   art). One SVG for all 4 tiers: identical geometry (viewBox 220x170, paths
   check-glow/check-main/check-core/tip-left/tip-right), only the tier class
   (.common/.rare/.legendary/.mythic) and its palette change. No borders,
   boxes, backgrounds, circles, or animations on the checkmark itself. --- */

.achievement-check {
  position: absolute;
  top: 1px;
  right: 5px;
  z-index: 4;
  display: inline-flex;
  width: 34px;
  height: 26px;
  pointer-events: none;
}

.achievement-check svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Tier palettes — exact hex values (glow / main / core / left tip / right tip) */

.achievement-check.common {
  --ach-check-glow: #4dff7b;
  --ach-check-main: #4dff7b;
  --ach-check-core: #9affb5;
  --ach-check-tip-left: #4dff7b;
  --ach-check-tip-right: #72ff98;
}

.achievement-check.rare {
  --ach-check-glow: #4d9bff;
  --ach-check-main: #4d9bff;
  --ach-check-core: #8cc4ff;
  --ach-check-tip-left: #63acff;
  --ach-check-tip-right: #78b8ff;
}

.achievement-check.legendary {
  --ach-check-glow: #bf00ff;
  --ach-check-main: #bf00ff;
  --ach-check-core: #e875ff;
  --ach-check-tip-left: #d52bff;
  --ach-check-tip-right: #e04dff;
}

.achievement-check.mythic {
  --ach-check-glow: #ff2e4d;
  --ach-check-main: #ff2e4d;
  --ach-check-core: #ff8297;
  --ach-check-tip-left: #ff4662;
  --ach-check-tip-right: #ff6078;
}

/* Glow layer — same structure for every tier: stroke-width 22, opacity 0.28,
   blur 7px, round caps/joins. */

.achievement-check .check-glow {
  fill: none;
  stroke: var(--ach-check-glow);
  stroke-width: 22;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.28;
  filter: blur(7px);
}

/* Main stroke — stroke-width 15, round caps/joins, subtle tier drop-shadow. */

.achievement-check .check-main {
  fill: none;
  stroke: var(--ach-check-main);
  stroke-width: 15;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px var(--ach-check-main));
}

/* Core highlight — stroke-width 5, round caps/joins. */

.achievement-check .check-core {
  fill: none;
  stroke: var(--ach-check-core);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* End tips — same stroke structure as the main stroke, tier tip colors. */

.achievement-check .tip-left,
.achievement-check .tip-right {
  fill: none;
  stroke-width: 15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.achievement-check .tip-left {
  stroke: var(--ach-check-tip-left);
}

.achievement-check .tip-right {
  stroke: var(--ach-check-tip-right);
}

/* Modal variant — in-flow inside the status row, slightly larger. */

.achievement-check.is-modal {
  position: static;
  width: 46px;
  height: 36px;
}

/* --- Tile interactions --- */

.ach-tile:not(.is-locked):hover .ach-tile-plate {
  transform: scale(1.045);
}

.ach-tile:not(.is-locked):active .ach-tile-plate {
  transform: scale(0.96);
}

/* --- Achievement info modal (name + description, English) --- */

.ach-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: ach-overlay-in 180ms ease-out both;
  /* Beat Radix DismissableLayer's inline pointer-events:none on body siblings
     while the profile drawer (Sheet) is open — matches .confirm-popup-overlay. */
  pointer-events: auto !important;
  touch-action: none;
}

.ach-modal-overlay * {
  pointer-events: auto !important;
}

.ach-modal {
  position: relative;
  width: min(92vw, 340px);
  padding: 22px 20px 18px;
  text-align: center;
  background: linear-gradient(
    165deg,
    var(--ach-tier-color-soft) 0%,
    var(--ach-tier-color-soft) 35%,
    rgba(8, 0, 28, 0.98) 70%,
    rgba(18, 0, 44, 0.96) 100%
  );
  border: 1px solid var(--ach-tier-color);
  border-radius: 18px;
  box-shadow: 0 0 28px var(--ach-tier-glow), 0 20px 60px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: ach-modal-in 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ach-modal-art {
  width: 100px;
  height: 156px;
  margin: 0 auto 14px;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
  background: transparent;
}

.ach-modal-tier {
  display: inline-flex;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid var(--ach-tier-color);
  font-family: "Orbitron", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ach-tier-color);
  text-shadow: 0 0 6px var(--ach-tier-glow);
}

.ach-modal-title {
  margin-top: 12px;
  font-family: "Orbitron", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f0eeff;
}

.ach-modal-desc {
  margin-top: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(190, 220, 235, 0.85);
}

.ach-modal-status {
  display: inline-flex;
  margin-top: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: "Orbitron", sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Earned status — the DONE text is replaced by the tier-colored neon
   checkmark (.achievement-check.is-modal); no pill, no green styling. */

.ach-modal-status.is-done {
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.ach-modal-status.is-locked {
  color: rgba(180, 230, 240, 0.75);
  border: 1px solid rgba(150, 160, 180, 0.4);
}

.ach-modal-close {
  margin-top: 16px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--ach-tier-color);
  background: linear-gradient(
    135deg,
    var(--ach-tier-color) 0%,
    rgba(153, 51, 255, 0.85) 100%
  );
  color: #010103;
  font-family: "Orbitron", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 14px var(--ach-tier-glow);
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms
    ease-out;
}

.ach-modal-close:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 22px var(--ach-tier-glow);
}

.ach-modal-close:active {
  transform: scale(0.97);
}

/* --- Keyframes --- */

@keyframes ach-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ach-modal-in {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Tier-colored glow pulse behind earned achievement art — mirrors the
   cache-pulse-glow animation used behind the frameless cache photos in the
   discovery / cash-purchase modal. */

@keyframes ach-cache-pulse-glow {
  0% {
    opacity: 0.45;
    transform: scale(0.85);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.05);
  }
  100% {
    opacity: 0.45;
    transform: scale(0.85);
  }
}

/* --- Reduced motion — static frames, no pop/glow animation --- */

@media (prefers-reduced-motion: reduce) {
  .ach-pager-track,
  .ach-dot,
  .ach-tile-plate,
  .ach-tile-img,
  .ach-modal-close {
    transition: none !important;
  }
  .ach-modal-overlay,
  .ach-modal {
    animation: none !important;
  }
  .ach-tile-glow {
    animation: none !important;
    opacity: 0.55;
  }
}

/* =========================================================================
   CHAT ACHIEVEMENTS GRID — tier-color scheme
   The Sovereign Profile achievements grid uses the SAME tier-specific color
   scheme (Common / Rare / Legendary / Mythic) as the personal-profile
   AchievementsTab, driven by the shared .tier-* classes and the base .ach-*
   rules above. It deliberately does NOT use the chat biome theme and does NOT
   hardcode cyan, so rarity header titles, progress chips, pagination dots and
   the modal frame all read in their tier color. The only chat-scoped rule left
   is the biome dot rail used by the CHAT THEME section.
   ========================================================================= */

/* Biome dot rail — reuses the .ach-dots / .ach-dot / .ach-dot.active visual
   language for the CHAT THEME section's 7-item biome indicator. The active
   pill takes the selected biome's accent via --biome-accent (set inline by
   ChatNavDrawer), falling back to the chat cyan. */

.chat-biome-dots .ach-dot {
  border-color: var(--biome-accent-soft, rgba(0, 240, 255, 0.3));
}

.chat-biome-dots .ach-dot.active {
  background: var(--biome-accent, #00f0ff);
  border-color: var(--biome-accent, #00f0ff);
  box-shadow: 0 0 8px var(--biome-accent-glow, rgba(0, 240, 255, 0.45));
}

/* --- Floating balance menu: user's exact neon action buttons ---
   Side buttons (WALLET / CHAT) are ~16% larger than the original 51x51 frame
   (≈59x59, radius ≈15px) so they fill the vertical air inside the row. The
   center GET KEY button scales ~11% larger again (≈65x65) to read as primary.
   The three buttons sit in one row at the bottom of the balance menu. */

.ld-neon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 59px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 15px;
  background: linear-gradient(
    to bottom,
    rgba(26, 21, 62, 0.7),
    rgba(13, 25, 53, 0.7)
  );
  border: 1px solid rgba(121, 92, 255, 0.25);
  box-shadow: inset 0 0 22px rgba(88, 66, 190, 0.07), inset 0 1px 0
    rgba(255, 255, 255, 0.035);
  cursor: pointer;
  transition: transform 0.16s, border-color 0.25s, box-shadow 0.3s;
}

.ld-neon-btn:hover:not(:disabled) {
  border-color: rgba(84, 247, 255, 0.48);
  box-shadow: inset 0 0 25px rgba(88, 66, 190, 0.12), 0 0 28px
    rgba(84, 247, 255, 0.07);
  transform: translateY(-1px);
}

.ld-neon-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.ld-neon-btn:focus-visible {
  outline: 2px solid rgba(84, 247, 255, 0.9);
  outline-offset: 2px;
}

.ld-neon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Icon sizing — scaled up with the side buttons */

.ld-neon-icon {
  width: 50px;
  height: 50px;
  display: block;
  position: relative;
  z-index: 2;
  overflow: visible;
  transition: transform 0.16s;
}

/* Frame outline SVG (Get Key) — absolutely positioned behind the icon */

.ld-neon-frame {
  position: absolute;
  width: 52px;
  height: 52px;
  pointer-events: none;
}

/* --- GET KEY: primary action, ~11% larger than the side buttons --- */

.getkey-btn {
  max-width: 65px;
  border-radius: 16px;
}

.getkey-btn .ld-neon-icon {
  width: 56px;
  height: 56px;
}

.getkey-btn .ld-neon-frame {
  width: 58px;
  height: 58px;
}

/* --- WALLET --- */

.wallet-btn.active {
  border-color: rgba(84, 247, 255, 0.55);
  box-shadow: inset 0 0 25px rgba(88, 66, 255, 0.13), 0 0 22px
    rgba(84, 247, 255, 0.09);
}

.wallet-btn.active .wallet-icon {
  transform: scale(1.025);
}

.wallet-btn.active .frame-svg {
  filter: drop-shadow(0 0 3px rgba(84, 247, 255, 0.18));
}

.wallet-btn.active .core-glow {
  filter: drop-shadow(0 0 3px rgba(84, 247, 255, 1))
    drop-shadow(0 0 7px rgba(84, 247, 255, 0.8))
    drop-shadow(0 0 12px rgba(121, 92, 255, 0.45));
}

.wallet-glow {
  opacity: 0;
}

.wallet-btn.active .wallet-glow {
  opacity: 1;
  filter: drop-shadow(0 0 2px rgba(84, 247, 255, 1))
    drop-shadow(0 0 5px rgba(84, 247, 255, 0.95))
    drop-shadow(0 0 10px rgba(84, 247, 255, 0.65))
    drop-shadow(0 0 16px rgba(121, 92, 255, 0.42));
}

/* --- GET KEY --- */

.cyber-btn.active {
  border-color: rgba(84, 247, 255, 0.45);
  box-shadow: inset 0 0 25px rgba(88, 66, 190, 0.1);
}

.cyber-btn.active .key-icon {
  transform: scale(1.025);
}

.key-glow {
  opacity: 0;
}

.cyber-btn.active .key-glow {
  opacity: 1;
  filter: drop-shadow(0 0 2px rgba(84, 247, 255, 1))
    drop-shadow(0 0 5px rgba(84, 247, 255, 0.95))
    drop-shadow(0 0 10px rgba(84, 247, 255, 0.65))
    drop-shadow(0 0 16px rgba(121, 92, 255, 0.42));
}

/* --- CHAT --- */

.chat-btn.active {
  border-color: rgba(84, 247, 255, 0.45);
  box-shadow: inset 0 0 25px rgba(88, 66, 190, 0.1);
}

.chat-btn.active .chat-icon {
  transform: scale(1.025);
}

.chat-glow {
  opacity: 0;
}

.chat-btn.active .chat-glow {
  opacity: 1;
  filter: drop-shadow(0 0 2px rgba(84, 247, 255, 1))
    drop-shadow(0 0 5px rgba(84, 247, 255, 0.95))
    drop-shadow(0 0 10px rgba(84, 247, 255, 0.65))
    drop-shadow(0 0 16px rgba(121, 92, 255, 0.42));
}

.chat-btn.active .message-glow {
  filter: drop-shadow(0 0 3px rgba(84, 247, 255, 0.9))
    drop-shadow(0 0 6px rgba(84, 247, 255, 0.55));
}

.chat-btn.active .core-glow {
  filter: drop-shadow(0 0 3px rgba(84, 247, 255, 1))
    drop-shadow(0 0 7px rgba(84, 247, 255, 0.8))
    drop-shadow(0 0 12px rgba(121, 92, 255, 0.45));
}

/* --- Unread indicator on the CHAT button ---
   A neon red/cyan numeric dot pinned to the top-right of the button. It is
   raised when the chat poll sees new messages while the drawer is closed and
   cleared when the drawer opens. */

@keyframes chat-unread-pulse {
  0%,
  100% {
    box-shadow: 0 0 6px rgba(255, 45, 85, 0.85), 0 0 12px rgba(0, 240, 255, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 10px rgba(255, 45, 85, 1), 0 0 20px rgba(0, 240, 255, 0.8);
    transform: scale(1.08);
  }
}

.chat-unread-dot {
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 240, 255, 0.85);
  background: linear-gradient(135deg, #ff2d55, #d52bff);
  color: #ffffff;
  font-family: "Orbitron", sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  animation: chat-unread-pulse 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .chat-unread-dot {
    animation: none;
  }
}

/* --- In-place copy confirmation inside the chat action pill ---
   The copy icon swaps to an emerald check that pulses for 1.5s before the
   menu closes itself. */

@keyframes chat-copy-confirm {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(1.15);
  }
}

.chat-copy-confirm {
  animation: chat-copy-confirm 0.75s ease-in-out infinite;
}

/* The copy confirmation is a functional success signal, not decoration, so it
   intentionally keeps its pulse even under prefers-reduced-motion. The global
   reduced-motion guard above is scoped with :not(.chat-copy-confirm) on the
   SVG element (where the class actually lives) so it cannot neutralize this
   animation. Scoping the :not() on the inner <path> would NOT work: lucide
   icons put the class on the <svg>, so the path would still match and the
   guard would kill the pulse. */

/* --- Delicate in-bubble delivery ticks ---
   The double-check mark is intentionally smaller than the surrounding meta
   text so it reads as a fine accent. `scale-85` is not a default Tailwind
   step, so it is defined here as a transform-only utility (no layout shift). */

.scale-85 {
  transform: scale(0.85);
}

/* --- Delete-undo countdown ring ---
   The ring drains smoothly from full to empty over the 5s undo window. The
   circle's circumference is 2πr = 2π·10 ≈ 62.83, so the dashoffset animates
   from 0 (full ring) to 62.83 (empty ring) on a linear 5s timeline. */

@keyframes chat-undo-ring-drain {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 62.83;
  }
}

.chat-undo-ring {
  animation: chat-undo-ring-drain 5s linear forwards;
}

@media (prefers-reduced-motion: reduce) {
  .chat-undo-ring {
    animation: none;
  }
}

/* --- Focal long-press overlay ---
   The pressed message is cloned into a fixed-position overlay above the chat.
   The clone is the REAL React message component (never a DOM cloneNode), so it
   keeps its bubble tail, reaction pills, timestamp and checkmarks. It starts at
   the message's exact on-screen rect and springs up slightly to signal focus.
   The backdrop is a dense semi-transparent dim with NO backdrop-blur: blurring
   over the 3D WebGL canvas tanks mobile FPS.

   Every motion is transform/opacity only (translate3d + scale) so it stays on
   the GPU compositor and never animates top, left, width or height.

   Opening: the clone springs up with a bouncy spring
   (cubic-bezier(0.34, 1.56, 0.64, 1)) over 0.22s while the backdrop fades in
   over 0.2s ease-out and the action bar scales/fades in with a soft overshoot.
   Closing: the clone returns to rest over 0.15s with the SAME
   cubic-bezier(0.34, 1.56, 0.64, 1) curve while the backdrop fades out over the
   same 0.15s. The closing duration MUST match the 150ms unmount timer in
   ChatMessageList so the overlay is removed exactly when the exit transition
   finishes. The dim and the bubble therefore finish together, with no residual
   dim left over the restored bubble. */

.chat-focal-clone {
  /* Transform-only transition: the clone's resting position AND its focus
     lift/scale are both carried by `transform`, so the whole open/close
     lifecycle animates on the GPU compositor and never touches a layout
     property (no `top`, `left`, `width` or `height` transition). */
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Promote the clone to its own independent compositor layer for the whole
     lifecycle, so its motion never triggers a layout recalculation or repaint
     of the chat feed, the 3D canvas or the particle background behind it. */
  will-change: transform;
  backface-visibility: hidden;
  /* Stable scale origin: the clone scales outward from its horizontal center
     and its BOTTOM edge. A multi-line or long bubble therefore grows up and
     out symmetrically instead of shifting its visual weight, and the bottom
     baseline (where the tail and the timestamp row sit) stays pinned — no
     vertical jitter. The origin is a constant, so it never changes mid-press
     and the scale reads as one uniform expansion. */
  transform-origin: 50% 100%;
  /* The clone is absolutely positioned at a fixed floating coordinate computed
     from the pressed row's rect. `contain: layout style` isolates its layout so
     expanding a message clipped at the top edge of the viewport never reflows
     the feed behind it, and `overflow: visible` keeps the bubble tail and the
     action bar (which sits above the clone) fully rendered. */
  contain: layout style;
  overflow: visible;
  /* Isolated stacking context for the whole long-press lifecycle. The clone is
     portaled to document.body, but its own subtree still needs its own stacking
     context so the outgoing bubble's gradient fill and the glass sheen can never
     be composited against the feed's clipped layers underneath. `isolation:
     isolate` guarantees the bubble's background paints opaquely even when the
     source row was partially clipped by the scroll container's overflow. */
  isolation: isolate;
}

/* While the overlay is dismissing, the clone uses the SAME bouncy spring curve
   as the entry so centering and un-centering read as one continuous motion with
   no abruptness. */

.chat-focal-clone.is-closing {
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Backdrop dim — fades in over 0.2s, out over 0.15s, both on the SAME
   bouncy spring cubic-bezier(0.34, 1.56, 0.64, 1) curve as the clone so the dim
   and the bubble read as one continuous motion. */

.chat-focal-backdrop {
  transition: opacity 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: opacity;
}

.chat-focal-backdrop.is-closing {
  transition: opacity 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Action bar — scales/fades in on open, out on close, on the SAME
   bouncy spring cubic-bezier(0.34, 1.56, 0.64, 1) curve as the clone, so the
   menu scales up elastically with a soft overshoot instead of snapping. */

.chat-focal-action-bar {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s
    cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, opacity;
}

.chat-focal-action-bar.is-closing {
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.12s
    cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Centered reaction bar — anchored strictly to the horizontal CENTER of the
   active message bubble. The clone's width is the pressed avatar + bubble
   group, so `left: 50%` resolves to the group's midpoint; the translateX(-50%)
   then centers the bar's own box on that midpoint. The `--focal-bar-shift`
   custom property carries the viewport boundary clamp computed in
   ChatMessageList (half the bar's measured width folded against the screen
   edges), so a long or short message can never push the bar past the left or
   right edge. The clamp lives in the SAME translateX as the centering, so the
   scale animation never drifts the bar off-center. A side-anchored bar keeps
   its right-0 / left-0 alignment and never receives this class. */

.chat-focal-action-bar--centered {
  left: 50%;
  transform: translateX(calc(-50% + var(--focal-bar-shift, 0px)));
}

/* The focal clone's outgoing bubble must NOT cross-fade its fill. The base
   .chat-bubble-outgoing rule carries a 0.3s background/box-shadow transition
   (for biome changes in the feed); on the freshly-mounted clone that transition
   can paint a one-frame brightness flash as the gradient resolves. Disabling it
   on the clone keeps the bubble's fill rock-steady through the whole
   open/close lifecycle, so the dim overlay and the bubble finish together with
   no flicker. */

.chat-focal-clone .chat-bubble-outgoing {
  transition: none !important;
}

/* Outgoing bubble fill + layering under the long-press scale.
   The clone is portaled to document.body and lifted out of the feed's clipped
   scroll container, but its bubble must still paint its biome gradient at full
   opacity even when the SOURCE row was partially clipped at the scroll edge.
   The clone root already establishes an isolated stacking context
   (`isolation: isolate`), and the bubble layer below gets its own stacking
   context plus an opaque dark base so the gradient composites against a solid
   backing rather than a transparent/partially-clipped ancestor. The gradient
   itself (per-biome rules below) is unchanged and still paints on top. */

.chat-focal-clone .chat-bubble-layer {
  isolation: isolate;
}

/* The clone's OUTGOING bubble paints a 100% solid, non-transparent backing
   directly on the bubble element during the active scaled long-press state.
   The per-biome gradient rules below use the `background` SHORTHAND with
   `!important`, which resets `background-color` to transparent — so without
   this the semi-transparent gradient would composite against whatever sits
   behind the portaled clone and the bubble would read as see-through when it
   overlaps other messages or touches a viewport edge. This selector
   out-specifies the biome rules (0,4,0 > 0,3,0) so the opaque base always wins,
   while the gradient still paints on top and the theme tint, glass sheen,
   border and text styling stay visually unchanged. Incoming bubbles keep their
   inline fill untouched. */

.chat-focal-clone .chat-bubble-layer.chat-bubble-outgoing.chat-bubble-surface {
  background-color: #14161e !important;
}

/* The clone's bubble surface keeps its exact feed fill and never fades its
   background while scaled. `background-clip: padding-box` keeps the gradient
   inside the rounded border so the scaled bubble's corners stay clean. */

.chat-focal-clone .chat-bubble-surface {
  background-clip: padding-box;
}

/* Suppress the native text-selection and callout popups on the clone while the
   overlay is open, so a long press never raises the OS selection menu. */

.chat-focal-clone,
.chat-focal-clone * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

/* Scroll lock for the open focal overlay. The overlay is portaled to
   document.body, OUTSIDE the chat sheet's own `.chat-modal-overlay` lock, so it
   must carry its own `touch-action: none`. Without it, a touch drag that starts
   on the overlay (the backdrop, the clone, or the action bar) chains to the
   feed underneath and the browser can natively scroll the message list while the
   reaction menu is up — the popup then appears to jump back into the scroll
   container's edge. `touch-action: none` stops the browser from claiming any
   pan/zoom gesture on the overlay, and `overscroll-behavior: none` blocks the
   iOS rubber-band chain to the page behind. Taps and clicks still fire normally
   (touch-action only governs scroll/zoom gestures), so the backdrop dismiss and
   every action-bar button keep working. The overlay root is targeted by its
   stable data-ocid marker so no component markup changes are needed. */

[data-ocid="chat.focal_overlay"] {
  touch-action: none;
  overscroll-behavior: none;
}

/* The lifted focal clone keeps the EXACT bubble styling of the feed row: the
   biome gradient fill, the glass sheen, the inline border and the tail all
   carry over unchanged. There is deliberately NO opaque fill, backdrop blur or
   brightness filter on the lifted popup — the clone is the same bubble, only
   translated and scaled, so its fill never turns dark, transparent or broken
   while the reaction menu is up. The only emphasis in the lifted state is the
   clean glowing border/accent highlight used for single taps
   (.chat-message-highlight), which is applied to the clone when it is the
   scroll-to-original target. */

@media (prefers-reduced-motion: reduce) {
  .chat-focal-clone,
  .chat-focal-clone.is-closing,
  .chat-focal-backdrop,
  .chat-focal-backdrop.is-closing,
  .chat-focal-action-bar,
  .chat-focal-action-bar.is-closing {
    transition: none;
  }
}

/* --- Chat motion polish ---
   GPU-accelerated entry/exit motion for the chat feed. Every animation is
   transform/opacity only (translate3d + scale) so it stays on the compositor
   and never animates top/left/width/height. */

/* New message bubble: rises and scales in as it mounts. Transform and opacity
   are animated as SEPARATE animations so each can carry its own duration and
   easing — transform 0.18s with a gentle overshoot, opacity 0.15s ease-out.
   The entry is a pure @keyframes animation (never a CSS transition), because a
   transition cannot fire on DOM insertion. */

@keyframes chat-message-in {
  from {
    transform: translate3d(0, 18px, 0) scale(0.96);
  }
  to {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes chat-message-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.chat-message-in {
  animation: chat-message-in 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.15)
    forwards, chat-message-fade-in 0.15s ease-out forwards;
  will-change: transform, opacity;
}

/* Feed row motion wrapper. Delete and restore animate ONLY opacity and
   transform (translateY) — never height — so a removed or restored row never
   reflows the rows around it and the container's scrollHeight is stable across
   the whole transition. `will-change` promotes the row to its own compositor
   layer for the duration of the fade so the motion never repaints the feed. */

.chat-row-motion {
  will-change: transform, opacity;
}

/* Delivery status icon: the Clock -> Double Ticks swap is INSTANT. There is
   deliberately no entry animation, fade, cross-fade or transition on the icon,
   so the moment the optimistic row is replaced in place by the confirmed row
   the double checkmarks appear with zero delay. The fixed-width
   .chat-status-slot below still reserves the same space for both icons, so the
   hard swap causes no horizontal shift and no bubble reflow. */

.chat-status-icon {
  animation: none;
  transition: none;
}

/* Fixed-width status slot shared by the confirmed row (time + double ticks) and
   the pending row (time + clock). Both rows reserve the SAME width so the
   Clock -> DoubleCheck swap causes zero horizontal shift and no bubble reflow.
   The width fits the widest case: "HH:MM" + edited pencil + double ticks. */

.chat-status-slot {
  width: 5.25rem;
  justify-content: flex-end;
}

/* Chat messages scroll viewport. `overscroll-behavior-y: contain` stops the
   scroll chain from reaching the page behind the drawer (no rubber-band bleed
   onto the 3D scene), and `-webkit-overflow-scrolling: touch` keeps iOS
   momentum scrolling smooth. The viewport resizes with the visual viewport
   without re-mounting its rows. This is the ONLY element inside the chat
   drawer that scrolls: the root modal overlay is locked with overflow hidden
   and touch-action none. */

.chat-messages-viewport {
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  /* Block WebKit's native scroll anchoring on the feed. During the iOS keyboard
     appearance/collapse the visual viewport resizes and the browser would
     otherwise pick an anchor node and shift the messages vertically to keep it
     in place — the source of the bubble jump. With anchoring off, the feed's
     scroll offset is owned entirely by the app's own scroll logic. */
  overflow-anchor: none;
  /* Opaque dark backing so iOS never composites a grey tile behind the feed
     during momentum scroll. */
  background-color: #010103;
  /* Promote the feed to its own compositing layer and contain its paint so a
     keyboard-driven viewport resize repaints only the message list instead of
     reflowing the whole modal layout. */
  will-change: transform, scroll-position;
  backface-visibility: hidden;
  transform: translateZ(0);
  contain: layout style;
}

/* Chat top bar surface. Themed via the --chat-header CSS var (set inline by
   ChatHeader.tsx). Raise it above the scrolling feed and give it an opaque
   dark backing so no grey compositor tile shows beneath it while scrolling. */

.chat-themed-sheet [style*="--chat-header"] {
  position: relative;
  z-index: 20;
  background-color: #010103;
}

/* Close-glide placeholder. Shown for the duration of the sheet's downward glide
   after the heavy message feed has been swapped out, so the frame that starts
   the transform has almost nothing to paint and the WebGL render loop underneath
   is never blocked by React's DOM teardown. It is a static surface: no rows, no
   avatars, no reaction pills, no hooks. */

.chat-close-placeholder {
  background-color: #010103;
  contain: strict;
  pointer-events: none;
}

/* Root bottom-sheet modal overlay. Strictly non-scrolling: `overflow: hidden`
   clips any overflow and `touch-action: none` stops iOS from offsetting the
   visualViewport during a touch drag, so the page and 3D scene behind the
   drawer never drift. Only the internal `.chat-messages-viewport` scrolls. */

.chat-modal-overlay {
  overflow: hidden;
  touch-action: none;
}

/* Selected / focused message highlight — the outer border and ambient glow
   that mark the scroll-to-original target. Both are driven by the active biome
   theme: the border uses the biome primary (--accent) and the ambient glow uses
   the biome glow token (--accent-soft), so the highlight follows whichever
   biome the user selected. Applied to the feed bubble and to the focal clone
   bubble so the focused message reads identically in both surfaces. */

.chat-message-highlight {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent), 0 0 16px var(--accent-soft), 0 0 28px
    var(--accent-soft);
}

/* Date separator: subtle fade-in as it mounts in the feed. */

@keyframes chat-date-divider-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.chat-date-divider {
  animation: chat-date-divider-in 0.15s ease-out both;
  will-change: opacity;
}

/* Floating Reply/Edit bar above the composer: slides in from the right on
   mount, slides back out to the right + fades out on unmount before removal
   from the DOM. The exit duration (0.14s) matches the banner's motion/react
   exit transition so the bar is not removed mid-animation. */

@keyframes chat-bar-in {
  from {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes chat-bar-out {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
}

.chat-bar-in {
  animation: chat-bar-in 0.18s ease-out both;
  will-change: transform, opacity;
}

.chat-bar-out {
  animation: chat-bar-out 0.14s ease-in both;
  will-change: transform, opacity;
}

/* --- Banner height + bubble dissolve motion ---
   The Edit banner and the Reply banner each render inside a FIXED-height
   reserved slot in the composer (BANNER_SLOT_PX in ChatInput.tsx), so the
   dock's total height is constant while a mode is active and the banner and
   the input bar move as one rigid unit with zero gap fluctuation. Only the
   banner's inner content animates (translateX + opacity, GPU-only) — no layout
   property is ever animated, so no residual height or ghost text can remain.
   The delete-undo banner animates its own height 0 -> auto on open and
   collapses back to height 0 on close (0.18s easeOut enter / 0.15s easeIn
   exit), with the inner label fading out over 0.08s so no ghost text lingers
   over the input field. A deleted message row fades out (opacity 1 -> 0 +
   translateY) and a restored row fades in (opacity 0 -> 1 + translateY) — both
   GPU-only, never a height animation — so the feed never reflows and the bottom
   baseline stays locked to the input bar. All of this motion is driven by
   motion/react, which reads the user's prefers-reduced-motion setting and
   collapses the durations to 0. */

.chat-message-dissolve {
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .chat-message-in,
  .chat-status-icon,
  .chat-date-divider,
  .chat-bar-in,
  .chat-bar-out {
    animation: none;
  }
}

/* --- Sovereign Profile push/pop navigation ---
   The chat feed and the in-chat Sovereign Profile are stacked in one
   overflow-hidden, position:relative container. Opening the profile slides it
   in from the right (translate3d(0,0,0), opacity 1) while the chat slides left
   (translate3d(-100%,0,0), opacity 0); returning reverses both (profile
   translate3d(100%,0,0), opacity 0). Every motion is transform/opacity only so
   it stays on the GPU compositor and never animates top/left/width/height. The
   0.22s cubic-bezier(0.16,1,0.3,1) curve matches PROFILE_SLIDE_MS in
   ChatDrawer so the profile unmounts exactly when the reverse slide finishes. */

.chat-view {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s
    cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.chat-view.is-active {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.chat-view.is-pushed-left {
  transform: translate3d(-100%, 0, 0);
  opacity: 0;
  pointer-events: none;
}

.chat-view.is-pushed-right {
  transform: translate3d(100%, 0, 0);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .chat-view {
    transition: none;
  }
}

/* Sovereign Profile header X (Twitter) link. Dimmed and inactive until a
   backend handle exists; the transition is opacity-only so it stays on the GPU
   compositor. */

.sovereign-x-link {
  transition: opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .sovereign-x-link {
    transition: none;
  }
}

/* Sovereign Profile PWR metric. The multiplier values use the signature neon
   purple (#C084FC / #BD00FF glow) instead of the chat cyan so the metric reads
   purple, not cyan. Scoped to the in-chat profile panel only. */

.sovereign-pwr {
  color: #c084fc;
  text-shadow: 0 0 8px rgba(189, 0, 255, 0.6);
}

/* --- Captions: UPPERCASE WALLET / GET KEY / CHAT --- */

.ld-neon-caption {
  font-family: "Orbitron", sans-serif;
  font-size: 0.71rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 0 8px rgba(84, 247, 255, 0.45);
  transition: color 0.18s ease, text-shadow 0.18s ease;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 640px) {
  .ld-neon-caption {
    font-size: 0.82rem;
  }
}

/* Caption glow intensifies while its button is hovered, focused, or pressed */

.ld-neon-btn:hover + .ld-neon-caption,
.ld-neon-btn:focus-visible + .ld-neon-caption,
.ld-neon-btn:active + .ld-neon-caption {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(84, 247, 255, 0.95), 0 0 22px
    rgba(84, 247, 255, 0.7), 0 0 34px rgba(121, 92, 255, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .ld-neon-btn,
  .ld-neon-icon {
    transition: none !important;
  }
}

/* ───────────────────────── Daily key system (key-*) ───────────────────────── */

/* Pulsing amber glow for cooldown countdown text (#FF9900) */

@keyframes key-cooldown-pulse {
  0%,
  100% {
    text-shadow: 0 0 6px rgba(255, 153, 0, 0.45), 0 0 14px
      rgba(255, 153, 0, 0.25);
    opacity: 0.92;
  }
  50% {
    text-shadow: 0 0 10px rgba(255, 153, 0, 0.95), 0 0 24px
      rgba(255, 153, 0, 0.6), 0 0 38px rgba(255, 153, 0, 0.3);
    opacity: 1;
  }
}

.key-cooldown-text {
  color: #ff9900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  animation: key-cooldown-pulse 2.2s ease-in-out infinite;
}

/* Cyan neon caption for the active GET KEY state */

@keyframes key-caption-neon {
  0%,
  100% {
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.55), 0 0 14px
      rgba(0, 229, 255, 0.3);
  }
  50% {
    text-shadow: 0 0 10px rgba(0, 229, 255, 1), 0 0 24px rgba(0, 229, 255, 0.7),
      0 0 40px rgba(0, 229, 255, 0.4);
  }
}

.key-caption-active {
  color: #00e5ff;
  letter-spacing: 0.12em;
  animation: key-caption-neon 1.8s ease-in-out infinite;
}

/* Carousel item glow — set --key-glow / --key-glow-soft inline per key type */

@keyframes key-item-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 8px var(--key-glow-soft, rgba(0, 229, 255, 0.22)));
  }
  50% {
    filter: drop-shadow(0 0 18px var(--key-glow, rgba(0, 229, 255, 0.55)));
  }
}

.key-carousel-item {
  transition: transform 0.25s ease, opacity 0.25s ease;
  will-change: transform;
}

.key-carousel-item[data-active="true"] {
  animation: key-item-glow 2.4s ease-in-out infinite;
}

/* Reward card entrance */

@keyframes key-reward-enter {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.86);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.key-reward-card {
  animation: key-reward-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  box-shadow: 0 0 28px var(--key-glow-soft, rgba(0, 229, 255, 0.22)), inset 0 0
    0 1px var(--key-glow, rgba(0, 229, 255, 0.55));
}

@media (prefers-reduced-motion: reduce) {
  .key-cooldown-text,
  .key-caption-active,
  .key-carousel-item[data-active="true"],
  .key-reward-card {
    animation: none !important;
  }
  .key-carousel-item {
    transition: none !important;
  }
}

/* =========================================================================
   CHAT NAV DRAWER — left navigation overlay (88% width, 12% backdrop strip).
   GPU transform only: the panel slides with translate3d(-100%,0,0) ->
   translate3d(0,0,0) and will-change: transform; no left/width animation.
   The 12% strip is a dark graphite backdrop with a light blur(4px).
   ========================================================================= */

.chat-nav-panel {
  transform: translate3d(-100%, 0, 0);
  will-change: transform;
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  /* Top corner rounding mirrors the main Chat window header curvature. The
     thick cyan top accent is drawn as an inset box-shadow so it follows the
     rounded corner instead of cutting across it like a straight border. */
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  /* Top accent follows the active biome primary (--accent is set inline on the
     panel root by ChatNavDrawer), falling back to the chat cyan. */
  box-shadow: inset 0 3px 0 0 var(--accent, #00f0ff), 8px 0 40px -12px
    rgba(0, 0, 0, 0.9);
}

.chat-nav-panel.is-open {
  transform: translate3d(0, 0, 0);
}

.chat-nav-backdrop {
  background: rgba(12, 14, 18, 0.75);
  backdrop-filter: blur(4px);
}

@media (prefers-reduced-motion: reduce) {
  .chat-nav-panel {
    transition: none !important;
  }
}

/* --- Chat nav drawer: Channels <-> Settings slide ---
   The channel list and the Settings form are stacked in one overflow-hidden
   region below the fixed profile header. Tapping Settings slides the channel
   list left (translate3d(-100%,0,0), opacity 0) while the Settings form slides
   in from the right (translate3d(0,0,0), opacity 1); the back arrow reverses
   both. Transform/opacity only, so it stays on the GPU compositor. */

.chat-nav-view {
  transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.26s
    cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform, opacity;
}

.chat-nav-view.is-active {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.chat-nav-view.is-pushed-left {
  transform: translate3d(-100%, 0, 0);
  opacity: 0;
  pointer-events: none;
}

.chat-nav-view.is-pushed-right {
  transform: translate3d(100%, 0, 0);
  opacity: 0;
  pointer-events: none;
}

/* Save button "SAVING..." state — a soft opacity pulse while the backend call
   is in flight. */

@keyframes chat-save-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

.chat-save-pulse {
  animation: chat-save-pulse 1s ease-in-out infinite;
}

/* SAVE CHANGES hover/active — the resting background, border and glow are set
   inline from the active biome primary; these rules brighten the glow and
   deepen the gradient on interaction, reading --accent / --accent-soft which
   ChatNavDrawer sets inline on the button. */

.chat-save-button:hover:not(:disabled) {
  box-shadow: 0 0 18px var(--accent-soft, rgba(0, 240, 255, 0.3)), 0 0 30px
    var(--accent-soft, rgba(0, 240, 255, 0.3));
  filter: brightness(1.08);
}

.chat-save-button:active:not(:disabled) {
  filter: brightness(0.94);
}

@media (prefers-reduced-motion: reduce) {
  .chat-nav-view {
    transition: none !important;
  }
  .chat-save-pulse {
    animation: none !important;
  }
  /* The SAVE CHANGES spring press is a transform transition; disable it for
     users who prefer reduced motion. */
  .chat-save-button {
    transition: none !important;
  }
}

/* =========================================================================
   CYBER-SHEEN — subtle glass glare overlay on chat bubbles.
   Purely additive: the overlay is a dedicated transparent <div
   className="bubble-sheen ..."> inserted as the FIRST child of the bubble
   div (feed row + focal clone). It never touches the base bubble's
   background, border, or box-shadow, and it uses no ::before/::after, so it
   cannot collide with existing pseudo-elements. The bubble div is already
   `relative`, so `inset: 0` contains the overlay; the overlay carries its own
   border-radius (via Tailwind rounded-2xl + the clipped corner) so it follows
   the bubble shape without needing overflow-hidden on the parent.

   Variants are keyed off the modifier class the overlay itself carries:
     .bubble-sheen--own      → outgoing: top-left specular white glare
     .bubble-sheen--incoming → incoming: subtle bio-tinted rim reflection
   Incoming/system bubbles stay clean dark obsidian — the incoming variant is
   only a faint tinted edge, never the outgoing white specular.
   ========================================================================= */

/* Base overlay — transparent, non-interactive, inherits the bubble's radius. */

.bubble-sheen {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* Typed custom property for the live scroll offset published by
   ChatMessageList's handleScroll (inside requestAnimationFrame). Registering it
   as a <length> lets the glare transform interpolate numerically instead of
   being treated as an opaque token. */

@property --chat-scroll {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

/* Outgoing — scroll-driven diagonal glass glare (Cyber-Sheen). A narrow 135deg
   beam glides from the top-left toward the center as the user scrolls, then
   fully dissolves into transparency before the bottom-right so the bottom/time
   area is never touched. The beam is localized to the upper portion of the
   bubble and translated by the live `--chat-scroll` offset (published on the
   scroll viewport and inherited down to each bubble). translate3d + will-change
   keep the movement GPU-accelerated; mix-blend-mode: overlay lets the glare
   read as a glass sheen over the existing bubble gradient without replacing it.
   Incoming bubbles are untouched — this rule only targets --own. */

.bubble-sheen--own {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.22) 18%,
    rgba(255, 255, 255, 0.06) 38%,
    transparent 62%
  );
  mix-blend-mode: overlay;
  pointer-events: none;
  transform: translate3d(
    calc(var(--chat-scroll, 0px) * -0.2),
    calc(var(--chat-scroll, 0px) * -0.35),
    0
  );
  will-change: transform;
}

/* Incoming — subtle bio-tinted specular edge glare. Uses the existing chat
   accent/tint palette (--accent, the active biome primary) rather than a new
   variable; falls back to the chat cyan when --accent is unset. Kept faint so
   the incoming bubble remains clean dark obsidian. */

.bubble-sheen--incoming {
  background: linear-gradient(
    135deg,
    rgba(0, 255, 200, 0.12) 0%,
    rgba(255, 255, 255, 0.01) 40%,
    transparent 100%
  );
  opacity: 0.8;
}

/* =========================================================================
   OUTGOING BUBBLE THEME FILLS — .chat-bubble-outgoing
   -------------------------------------------------------------------------
   The outgoing bubble carries the .chat-bubble-outgoing class (added by the
   chat message components) instead of an inline background, so its fill is
   owned entirely by CSS. Each of the seven biomes gets its own diagonal
   gradient plus a 1px inner glass edge (inset box-shadow).

   Theme scoping: the active biome is published as inline CSS custom
   properties on the themed sheet (.chat-themed-sheet, ChatDrawer) and
   re-declared on the portaled focal overlay root
   ([data-ocid="chat.focal_overlay"], ChatMessageList). There is NO data-theme
   attribute anywhere, so each rule keys off the biome's unique --accent hex
   in that inline style attribute — the existing theme mechanism, not a new
   one. Every biome accent hex is distinct, so the substring match is exact.

   The base tint stays dark obsidian (18-32% biome color over a near-opaque
   dark stop). Incoming bubbles, the bubble tail, and text styling are
   untouched; the .bubble-sheen overlays and @property --chat-scroll above are
   unchanged.
   ========================================================================= */

/* Base: positioning context for the additive .bubble-sheen--own overlay and a
   cross-fade when the active biome changes. The neutral obsidian fallback
   keeps the bubble opaque if a theme key below does not match. */

.chat-bubble-outgoing {
  position: relative;
  transition: background 0.3s ease, background-color 0.15s ease, border-color
    0.15s ease !important;
}

/* Message bubble surface — the shared paint-only transition for the tap /
   highlight state. The bubble's base layout dimensions (padding, margins, font
   metrics, border width) are identical across hover, active and highlight
   states, so the only thing that ever changes is paint: background-color and
   border-color cross-fade over 0.15s ease. The box-shadow glow of the
   highlight is applied instantly (paint-only, no transition) so no layout is
   ever touched and no micro-flash appears. The swipe transform transition is
   owned inline by the row so it can be disabled mid-drag. */

.chat-bubble-surface {
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* --- Avatar layer isolation ---
   The avatar container is a flex sibling of the bubble column. Its layout box
   must stay entirely static and non-reactive: a fixed flex-shrink of 0 plus a
   fixed 36px square (the SenderAvatar default size) so no bubble expansion,
   reaction-menu open/close, or row re-measure can ever resize it or trigger a
   flex/grid baseline recalculation that micro-bounces the avatar. The hover
   scale is a transform on the button itself and never affects layout. */

.chat-avatar-slot {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  contain: layout style;
}

/* --- Bubble GPU layer ---
   The bubble is promoted to its own compositing layer so its visual expansion
   (the focal clone's scale/lift, and the swipe transform) floats over the row
   without reflowing the adjacent avatar. `contain: layout style` isolates the
   bubble's layout from its siblings, so expanding a bubble never recalculates
   the flex baseline of the avatar beside it. `overflow: visible` keeps the
   bubble tail and the reaction pills fully rendered. */

.chat-bubble-layer {
  contain: layout style;
  overflow: visible;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Desert Dune — Warm Amber & Gold. */

:is(.chat-themed-sheet, [data-ocid="chat.focal_overlay"])[style*="#ffaa00"]
  .chat-bubble-outgoing {
  background: linear-gradient(
    135deg,
    rgba(217, 119, 6, 0.36) 0%,
    rgba(180, 83, 9, 0.24) 55%,
    rgba(69, 36, 12, 0.3) 100%
  ) !important;
  box-shadow: inset 1px 1px 0px rgba(253, 230, 138, 0.28) !important;
}

/* Forest Valley — Deep Noble Emerald. */

:is(.chat-themed-sheet, [data-ocid="chat.focal_overlay"])[style*="#00ff44"]
  .chat-bubble-outgoing {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.34) 0%,
    rgba(5, 150, 105, 0.22) 55%,
    rgba(12, 58, 41, 0.28) 100%
  ) !important;
  box-shadow: inset 1px 1px 0px rgba(110, 231, 183, 0.25) !important;
}

/* Snow Peak — Arctic Crisp Blue. */

:is(.chat-themed-sheet, [data-ocid="chat.focal_overlay"])[style*="#88ddff"]
  .chat-bubble-outgoing {
  background: linear-gradient(
    135deg,
    rgba(56, 189, 248, 0.36) 0%,
    rgba(14, 165, 233, 0.22) 55%,
    rgba(12, 45, 66, 0.3) 100%
  ) !important;
  box-shadow: inset 1px 1px 0px rgba(186, 230, 253, 0.3) !important;
}

/* Mythic Void — Royal Amethyst Violet. */

:is(.chat-themed-sheet, [data-ocid="chat.focal_overlay"])[style*="#cc00ff"]
  .chat-bubble-outgoing {
  background: linear-gradient(
    135deg,
    rgba(168, 85, 247, 0.34) 0%,
    rgba(126, 34, 206, 0.22) 55%,
    rgba(53, 21, 79, 0.28) 100%
  ) !important;
  box-shadow: inset 1px 1px 0px rgba(233, 213, 255, 0.26) !important;
}

/* Volcanic Crag — Rich Rubium Crimson. */

:is(.chat-themed-sheet, [data-ocid="chat.focal_overlay"])[style*="#ff2200"]
  .chat-bubble-outgoing {
  background: linear-gradient(
    135deg,
    rgba(225, 29, 72, 0.34) 0%,
    rgba(185, 28, 28, 0.22) 55%,
    rgba(69, 18, 18, 0.28) 100%
  ) !important;
  box-shadow: inset 1px 1px 0px rgba(254, 202, 202, 0.26) !important;
}

/* Mythic Aether — Deep Cosmic Cobalt & Sapphire. */

:is(.chat-themed-sheet, [data-ocid="chat.focal_overlay"])[style*="#0088ff"]
  .chat-bubble-outgoing {
  background: linear-gradient(
    135deg,
    rgba(2, 132, 199, 0.38) 0%,
    rgba(30, 58, 138, 0.26) 55%,
    rgba(15, 23, 42, 0.32) 100%
  ) !important;
  box-shadow: inset 1px 1px 0px rgba(186, 230, 253, 0.28) !important;
}

/* Island Archipelago — Lagoon Ocean Teal. */

:is(.chat-themed-sheet, [data-ocid="chat.focal_overlay"])[style*="#54f7ff"]
  .chat-bubble-outgoing {
  background: linear-gradient(
    135deg,
    rgba(20, 184, 166, 0.36) 0%,
    rgba(15, 118, 110, 0.24) 55%,
    rgba(15, 52, 50, 0.3) 100%
  ) !important;
  box-shadow: inset 1px 1px 0px rgba(153, 246, 228, 0.28) !important;
}

.selection\:bg-primary *::-moz-selection{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:bg-primary *::selection{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:text-primary-foreground *::-moz-selection{
  color: oklch(var(--primary-foreground));
}

.selection\:text-primary-foreground *::selection{
  color: oklch(var(--primary-foreground));
}

.selection\:bg-primary::-moz-selection{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:bg-primary::selection{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:text-primary-foreground::-moz-selection{
  color: oklch(var(--primary-foreground));
}

.selection\:text-primary-foreground::selection{
  color: oklch(var(--primary-foreground));
}

.file\:inline-flex::file-selector-button{
  display: inline-flex;
}

.file\:h-7::file-selector-button{
  height: 1.75rem;
}

.file\:border-0::file-selector-button{
  border-width: 0px;
}

.file\:bg-transparent::file-selector-button{
  background-color: transparent;
}

.file\:text-sm::file-selector-button{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:font-medium::file-selector-button{
  font-weight: 500;
}

.file\:text-foreground::file-selector-button{
  color: oklch(var(--foreground));
}

.placeholder\:text-muted-foreground::-moz-placeholder{
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.placeholder\:text-muted-foreground::placeholder{
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.placeholder\:text-white\/20::-moz-placeholder{
  color: rgb(255 255 255 / 0.2);
}

.placeholder\:text-white\/20::placeholder{
  color: rgb(255 255 255 / 0.2);
}

.placeholder\:text-white\/25::-moz-placeholder{
  color: rgb(255 255 255 / 0.25);
}

.placeholder\:text-white\/25::placeholder{
  color: rgb(255 255 255 / 0.25);
}

.placeholder\:text-white\/30::-moz-placeholder{
  color: rgb(255 255 255 / 0.3);
}

.placeholder\:text-white\/30::placeholder{
  color: rgb(255 255 255 / 0.3);
}

.placeholder\:text-white\/40::-moz-placeholder{
  color: rgb(255 255 255 / 0.4);
}

.placeholder\:text-white\/40::placeholder{
  color: rgb(255 255 255 / 0.4);
}

.placeholder\:text-zinc-500::-moz-placeholder{
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}

.placeholder\:text-zinc-500::placeholder{
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}

.after\:absolute::after{
  content: var(--tw-content);
  position: absolute;
}

.after\:-inset-2::after{
  content: var(--tw-content);
  inset: -0.5rem;
}

.after\:inset-y-0::after{
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}

.after\:left-1\/2::after{
  content: var(--tw-content);
  left: 50%;
}

.after\:w-1::after{
  content: var(--tw-content);
  width: 0.25rem;
}

.after\:w-\[2px\]::after{
  content: var(--tw-content);
  width: 2px;
}

.after\:-translate-x-1\/2::after{
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.first\:rounded-l-md:first-child{
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.first\:border-l:first-child{
  border-left-width: 1px;
}

.last\:rounded-r-md:last-child{
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.last\:border-b-0:last-child{
  border-bottom-width: 0px;
}

.read-only\:cursor-default:-moz-read-only{
  cursor: default;
}

.read-only\:cursor-default:read-only{
  cursor: default;
}

.hover\:-translate-y-0\.5:hover{
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-105:hover{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-110:hover{
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-125:hover{
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-\[1\.005\]:hover{
  --tw-scale-x: 1.005;
  --tw-scale-y: 1.005;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-\[1\.015\]:hover{
  --tw-scale-x: 1.015;
  --tw-scale-y: 1.015;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-\[1\.02\]:hover{
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-\[1\.03\]:hover{
  --tw-scale-x: 1.03;
  --tw-scale-y: 1.03;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-\[1\.04\]:hover{
  --tw-scale-x: 1.04;
  --tw-scale-y: 1.04;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-\[\#00ff41\]\/80:hover{
  border-color: rgb(0 255 65 / 0.8);
}

.hover\:border-\[\#00ffff\]\/50:hover{
  border-color: rgb(0 255 255 / 0.5);
}

.hover\:border-\[\#00ffff\]\/80:hover{
  border-color: rgb(0 255 255 / 0.8);
}

.hover\:border-\[\#9933ff\]\/60:hover{
  border-color: rgb(153 51 255 / 0.6);
}

.hover\:border-\[\#ff3344\]\/80:hover{
  border-color: rgb(255 51 68 / 0.8);
}

.hover\:border-blue-400\/80:hover{
  border-color: rgb(96 165 250 / 0.8);
}

.hover\:border-green-400\/80:hover{
  border-color: rgb(74 222 128 / 0.8);
}

.hover\:border-purple-400\/80:hover{
  border-color: rgb(192 132 252 / 0.8);
}

.hover\:border-red-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}

.hover\:bg-\[\#00d4ff\]\/10:hover{
  background-color: rgb(0 212 255 / 0.1);
}

.hover\:bg-\[\#00f0ff\]\/10:hover{
  background-color: rgb(0 240 255 / 0.1);
}

.hover\:bg-\[\#00ff41\]\/25:hover{
  background-color: rgb(0 255 65 / 0.25);
}

.hover\:bg-\[\#00ffff\]\/10:hover{
  background-color: rgb(0 255 255 / 0.1);
}

.hover\:bg-\[\#00ffff\]\/25:hover{
  background-color: rgb(0 255 255 / 0.25);
}

.hover\:bg-\[\#ff3344\]\/25:hover{
  background-color: rgb(255 51 68 / 0.25);
}

.hover\:bg-\[\#ff3344\]\/30:hover{
  background-color: rgb(255 51 68 / 0.3);
}

.hover\:bg-\[\#ff4655\]\/15:hover{
  background-color: rgb(255 70 85 / 0.15);
}

.hover\:bg-\[rgba\(0\2c 240\2c 255\2c 0\.06\)\]:hover{
  background-color: rgba(0,240,255,0.06);
}

.hover\:bg-accent:hover{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.hover\:bg-black\/60:hover{
  background-color: rgb(0 0 0 / 0.6);
}

.hover\:bg-blue-400\/25:hover{
  background-color: rgb(96 165 250 / 0.25);
}

.hover\:bg-destructive\/90:hover{
  background-color: oklch(var(--destructive) / 0.9);
}

.hover\:bg-green-400\/25:hover{
  background-color: rgb(74 222 128 / 0.25);
}

.hover\:bg-muted:hover{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}

.hover\:bg-muted\/50:hover{
  background-color: oklch(var(--muted) / 0.5);
}

.hover\:bg-primary\/90:hover{
  background-color: oklch(var(--primary) / 0.9);
}

.hover\:bg-purple-400\/25:hover{
  background-color: rgb(192 132 252 / 0.25);
}

.hover\:bg-red-500\/20:hover{
  background-color: rgb(239 68 68 / 0.2);
}

.hover\:bg-red-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

.hover\:bg-secondary\/80:hover{
  background-color: oklch(var(--secondary) / 0.8);
}

.hover\:bg-sidebar-accent:hover{
  background-color: oklch(var(--sidebar-accent));
}

.hover\:bg-white\/10:hover{
  background-color: rgb(255 255 255 / 0.1);
}

.hover\:bg-white\/15:hover{
  background-color: rgb(255 255 255 / 0.15);
}

.hover\:bg-white\/5:hover{
  background-color: rgb(255 255 255 / 0.05);
}

.hover\:text-\[\#00ffff\]:hover{
  --tw-text-opacity: 1;
  color: rgb(0 255 255 / var(--tw-text-opacity, 1));
}

.hover\:text-\[\#9df7ff\]:hover{
  --tw-text-opacity: 1;
  color: rgb(157 247 255 / var(--tw-text-opacity, 1));
}

.hover\:text-\[\#ff7a85\]:hover{
  --tw-text-opacity: 1;
  color: rgb(255 122 133 / var(--tw-text-opacity, 1));
}

.hover\:text-accent-foreground:hover{
  color: oklch(var(--accent-foreground));
}

.hover\:text-cyan-500:hover{
  --tw-text-opacity: 1;
  color: rgb(6 182 212 / var(--tw-text-opacity, 1));
}

.hover\:text-foreground:hover{
  color: oklch(var(--foreground));
}

.hover\:text-muted-foreground:hover{
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.hover\:text-red-200:hover{
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}

.hover\:text-sidebar-accent-foreground:hover{
  color: oklch(var(--sidebar-accent-foreground));
}

.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:text-white\/60:hover{
  color: rgb(255 255 255 / 0.6);
}

.hover\:text-white\/70:hover{
  color: rgb(255 255 255 / 0.7);
}

.hover\:text-white\/80:hover{
  color: rgb(255 255 255 / 0.8);
}

.hover\:text-zinc-100:hover{
  --tw-text-opacity: 1;
  color: rgb(244 244 245 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover{
  text-decoration-line: underline;
}

.hover\:opacity-100:hover{
  opacity: 1;
}

.hover\:opacity-80:hover{
  opacity: 0.8;
}

.hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover{
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_0_10px_rgba\(0\2c 255\2c 255\2c 0\.5\)\]:hover{
  --tw-shadow: 0 0 10px rgba(0,255,255,0.5);
  --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_0_10px_rgba\(168\2c 85\2c 247\2c 0\.5\)\]:hover{
  --tw-shadow: 0 0 10px rgba(168,85,247,0.5);
  --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_0_10px_rgba\(74\2c 222\2c 128\2c 0\.5\)\]:hover{
  --tw-shadow: 0 0 10px rgba(74,222,128,0.5);
  --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_0_10px_rgba\(96\2c 165\2c 250\2c 0\.5\)\]:hover{
  --tw-shadow: 0 0 10px rgba(96,165,250,0.5);
  --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_0_12px_rgba\(0\2c 255\2c 65\2c 0\.5\)\]:hover{
  --tw-shadow: 0 0 12px rgba(0,255,65,0.5);
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_0_12px_rgba\(0\2c 255\2c 65\2c 0\.55\)\]:hover{
  --tw-shadow: 0 0 12px rgba(0,255,65,0.55);
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_0_12px_rgba\(168\2c 85\2c 247\2c 0\.4\)\]:hover{
  --tw-shadow: 0 0 12px rgba(168,85,247,0.4);
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_0_12px_rgba\(255\2c 51\2c 68\2c 0\.5\)\]:hover{
  --tw-shadow: 0 0 12px rgba(255,51,68,0.5);
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_0_12px_rgba\(255\2c 51\2c 68\2c 0\.55\)\]:hover{
  --tw-shadow: 0 0 12px rgba(255,51,68,0.55);
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_0_12px_rgba\(74\2c 222\2c 128\2c 0\.4\)\]:hover{
  --tw-shadow: 0 0 12px rgba(74,222,128,0.4);
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_0_12px_rgba\(96\2c 165\2c 250\2c 0\.4\)\]:hover{
  --tw-shadow: 0 0 12px rgba(96,165,250,0.4);
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_0_20px_rgba\(255\2c 0\2c 0\2c 0\.5\)\]:hover{
  --tw-shadow: 0 0 20px rgba(255,0,0,0.5);
  --tw-shadow-colored: 0 0 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_0_22px_rgba\(0\2c 255\2c 65\2c 0\.9\)\]:hover{
  --tw-shadow: 0 0 22px rgba(0,255,65,0.9);
  --tw-shadow-colored: 0 0 22px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_0_28px_rgba\(0\2c 255\2c 255\2c 1\)\]:hover{
  --tw-shadow: 0 0 28px rgba(0,255,255,1);
  --tw-shadow-colored: 0 0 28px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_0_28px_rgba\(96\2c 186\2c 255\2c 1\)\]:hover{
  --tw-shadow: 0 0 28px rgba(96,186,255,1);
  --tw-shadow-colored: 0 0 28px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_0_32px_rgba\(204\2c 85\2c 255\2c 1\)\]:hover{
  --tw-shadow: 0 0 32px rgba(204,85,255,1);
  --tw-shadow-colored: 0 0 32px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_0_8px_rgba\(153\2c 51\2c 255\2c 0\.2\)\]:hover{
  --tw-shadow: 0 0 8px rgba(153,51,255,0.2);
  --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:ring-4:hover{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.hover\:brightness-110:hover{
  --tw-brightness: brightness(1.1);
  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);
}

.hover\:brightness-125:hover{
  --tw-brightness: brightness(1.25);
  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);
}

.hover\:after\:bg-sidebar-border:hover::after{
  content: var(--tw-content);
  background-color: oklch(var(--sidebar-border));
}

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

.focus\:border-\[var\(--accent\)\]:focus{
  border-color: var(--accent);
}

.focus\:border-red-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.focus\:border-rose-500\/60:focus{
  border-color: rgb(244 63 94 / 0.6);
}

.focus\:border-white\/30:focus{
  border-color: rgb(255 255 255 / 0.3);
}

.focus\:bg-accent:focus{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.focus\:text-accent-foreground:focus{
  color: oklch(var(--accent-foreground));
}

.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-ring:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}

.focus\:ring-offset-2:focus{
  --tw-ring-offset-width: 2px;
}

.focus-visible\:z-10:focus-visible{
  z-index: 10;
}

.focus-visible\:border-ring:focus-visible{
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}

.focus-visible\:bg-\[rgba\(0\2c 240\2c 255\2c 0\.10\)\]:focus-visible{
  background-color: rgba(0,240,255,0.10);
}

.focus-visible\:outline-none:focus-visible{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:outline-1:focus-visible{
  outline-width: 1px;
}

.focus-visible\:outline-2:focus-visible{
  outline-width: 2px;
}

.focus-visible\:outline-offset-2:focus-visible{
  outline-offset: 2px;
}

.focus-visible\:outline-ring:focus-visible{
  outline-color: oklch(var(--ring) / 1);
}

.focus-visible\:ring-1:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-2:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-4:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-\[3px\]:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-\[\#00f0ff\]\/60:focus-visible{
  --tw-ring-color: rgb(0 240 255 / 0.6);
}

.focus-visible\:ring-destructive\/20:focus-visible{
  --tw-ring-color: oklch(var(--destructive) / 0.2);
}

.focus-visible\:ring-red-400\/70:focus-visible{
  --tw-ring-color: rgb(248 113 113 / 0.7);
}

.focus-visible\:ring-ring:focus-visible{
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-ring\/50:focus-visible{
  --tw-ring-color: oklch(var(--ring) / 0.5);
}

.focus-visible\:ring-offset-1:focus-visible{
  --tw-ring-offset-width: 1px;
}

.focus-visible\:ring-offset-2:focus-visible{
  --tw-ring-offset-width: 2px;
}

.focus-visible\:ring-offset-\[\#010103\]:focus-visible{
  --tw-ring-offset-color: #010103;
}

.active\:scale-110:active{
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-95:active{
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-\[0\.94\]:active{
  --tw-scale-x: 0.94;
  --tw-scale-y: 0.94;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-\[0\.98\]:active{
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:cursor-grabbing:active{
  cursor: grabbing;
}

.active\:bg-sidebar-accent:active{
  background-color: oklch(var(--sidebar-accent));
}

.active\:text-sidebar-accent-foreground:active{
  color: oklch(var(--sidebar-accent-foreground));
}

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

.disabled\:cursor-not-allowed:disabled{
  cursor: not-allowed;
}

.disabled\:opacity-30:disabled{
  opacity: 0.3;
}

.disabled\:opacity-40:disabled{
  opacity: 0.4;
}

.disabled\:opacity-50:disabled{
  opacity: 0.5;
}

.disabled\:opacity-60:disabled{
  opacity: 0.6;
}

.disabled\:hover\:scale-100:hover:disabled{
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100{
  opacity: 1;
}

.group:hover .group-hover\:scale-110{
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:text-white\/90{
  color: rgb(255 255 255 / 0.9);
}

.group\/menu-item:hover .group-hover\/menu-item\:opacity-100{
  opacity: 1;
}

.group:hover .group-hover\:opacity-100{
  opacity: 1;
}

.group:hover .group-hover\:opacity-80{
  opacity: 0.8;
}

.group:hover .group-hover\:opacity-90{
  opacity: 0.9;
}

.peer\/menu-button:hover ~ .peer-hover\/menu-button\:text-sidebar-accent-foreground{
  color: oklch(var(--sidebar-accent-foreground));
}

.peer:disabled ~ .peer-disabled\:cursor-not-allowed{
  cursor: not-allowed;
}

.peer:disabled ~ .peer-disabled\:opacity-50{
  opacity: 0.5;
}

.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){
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.has-\[\>svg\]\:px-2\.5:has(>svg){
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.has-\[\>svg\]\:px-3:has(>svg){
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.has-\[\>svg\]\:px-4:has(>svg){
  padding-left: 1rem;
  padding-right: 1rem;
}

.aria-disabled\:pointer-events-none[aria-disabled="true"]{
  pointer-events: none;
}

.aria-disabled\:opacity-50[aria-disabled="true"]{
  opacity: 0.5;
}

.aria-selected\:text-muted-foreground[aria-selected="true"]{
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"]{
  pointer-events: none;
}

.data-\[disabled\]\:pointer-events-none[data-disabled]{
  pointer-events: none;
}

.data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction="bottom"]{
  left: 0px;
  right: 0px;
}

.data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction="left"]{
  top: 0px;
  bottom: 0px;
}

.data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction="right"]{
  top: 0px;
  bottom: 0px;
}

.data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction="top"]{
  left: 0px;
  right: 0px;
}

.data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction="bottom"]{
  bottom: 0px;
}

.data-\[vaul-drawer-direction\=left\]\:left-0[data-vaul-drawer-direction="left"]{
  left: 0px;
}

.data-\[vaul-drawer-direction\=right\]\:right-0[data-vaul-drawer-direction="right"]{
  right: 0px;
}

.data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction="top"]{
  top: 0px;
}

.data-\[active\=true\]\:z-10[data-active="true"]{
  z-index: 10;
}

.data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction="bottom"]{
  margin-top: 6rem;
}

.data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction="top"]{
  margin-bottom: 6rem;
}

.data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"]{
  height: 0.375rem;
}

.data-\[orientation\=horizontal\]\:h-full[data-orientation="horizontal"]{
  height: 100%;
}

.data-\[orientation\=horizontal\]\:h-px[data-orientation="horizontal"]{
  height: 1px;
}

.data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"]{
  height: 100%;
}

.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"]{
  height: 1px;
}

.data-\[size\=default\]\:h-9[data-size="default"]{
  height: 2.25rem;
}

.data-\[size\=sm\]\:h-8[data-size="sm"]{
  height: 2rem;
}

.data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction="bottom"]{
  max-height: 80vh;
}

.data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction="top"]{
  max-height: 80vh;
}

.data-\[orientation\=vertical\]\:min-h-44[data-orientation="vertical"]{
  min-height: 11rem;
}

.data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"]{
  width: 100%;
}

.data-\[orientation\=vertical\]\:w-1\.5[data-orientation="vertical"]{
  width: 0.375rem;
}

.data-\[orientation\=vertical\]\:w-auto[data-orientation="vertical"]{
  width: auto;
}

.data-\[orientation\=vertical\]\:w-full[data-orientation="vertical"]{
  width: 100%;
}

.data-\[orientation\=vertical\]\:w-px[data-orientation="vertical"]{
  width: 1px;
}

.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"]{
  width: 100%;
}

.data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction="left"]{
  width: 75%;
}

.data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction="right"]{
  width: 75%;
}

.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"]{
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=left\]\:-translate-x-1[data-side="left"]{
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=right\]\:translate-x-1[data-side="right"]{
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=top\]\:-translate-y-1[data-side="top"]{
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state="checked"]{
  --tw-translate-x: calc(100% - 2px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"]{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes accordion-up{

  from{
    height: var(--radix-accordion-content-height);
  }

  to{
    height: 0;
  }
}

.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"]{
  animation: accordion-up 0.2s ease-out;
}

@keyframes accordion-down{

  from{
    height: 0;
  }

  to{
    height: var(--radix-accordion-content-height);
  }
}

.data-\[state\=open\]\:animate-accordion-down[data-state="open"]{
  animation: accordion-down 0.2s ease-out;
}

.data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"]{
  flex-direction: column;
}

.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"]{
  flex-direction: column;
}

.data-\[range-end\=true\]\:rounded-md[data-range-end="true"]{
  border-radius: calc(var(--radius) - 2px);
}

.data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"]{
  border-radius: 0px;
}

.data-\[range-start\=true\]\:rounded-md[data-range-start="true"]{
  border-radius: calc(var(--radius) - 2px);
}

.data-\[selected\=true\]\:rounded-none[data-selected="true"]{
  border-radius: 0px;
}

.data-\[range-end\=true\]\:rounded-r-md[data-range-end="true"]{
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.data-\[range-start\=true\]\:rounded-l-md[data-range-start="true"]{
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction="bottom"]{
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction="top"]{
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.data-\[variant\=outline\]\:border-l-0[data-variant="outline"]{
  border-left-width: 0px;
}

.data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction="bottom"]{
  border-top-width: 1px;
}

.data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction="left"]{
  border-right-width: 1px;
}

.data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction="right"]{
  border-left-width: 1px;
}

.data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction="top"]{
  border-bottom-width: 1px;
}

.data-\[active\=true\]\:border-ring[data-active="true"]{
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}

.data-\[state\=active\]\:border-\[\#cc44ff\][data-state="active"]{
  --tw-border-opacity: 1;
  border-color: rgb(204 68 255 / var(--tw-border-opacity, 1));
}

.data-\[state\=checked\]\:border-primary[data-state="checked"]{
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}

.data-\[state\=inactive\]\:border-\[\#9933ff\]\/30[data-state="inactive"]{
  border-color: rgb(153 51 255 / 0.3);
}

.data-\[active\=true\]\:bg-accent\/50[data-active="true"]{
  background-color: oklch(var(--accent) / 0.5);
}

.data-\[active\=true\]\:bg-sidebar-accent[data-active="true"]{
  background-color: oklch(var(--sidebar-accent));
}

.data-\[range-end\=true\]\:bg-primary[data-range-end="true"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[range-middle\=true\]\:bg-accent[data-range-middle="true"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[range-start\=true\]\:bg-primary[data-range-start="true"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[selected\=true\]\:bg-accent[data-selected="true"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=active\]\:bg-\[\#cc44ff\]\/15[data-state="active"]{
  background-color: rgb(204 68 255 / 0.15);
}

.data-\[state\=active\]\:bg-background[data-state="active"]{
  background-color: oklch(var(--background));
}

.data-\[state\=checked\]\:bg-primary[data-state="checked"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[state\=checked\]\:bg-transparent[data-state="checked"]{
  background-color: transparent;
}

.data-\[state\=on\]\:bg-accent[data-state="on"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:bg-accent[data-state="open"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:bg-accent\/50[data-state="open"]{
  background-color: oklch(var(--accent) / 0.5);
}

.data-\[state\=open\]\:bg-secondary[data-state="open"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}

.data-\[state\=selected\]\:bg-muted[data-state="selected"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}

.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"]{
  background-color: oklch(var(--input));
}

.data-\[inset\]\:pl-8[data-inset]{
  padding-left: 2rem;
}

.data-\[active\=true\]\:font-medium[data-active="true"]{
  font-weight: 500;
}

.data-\[active\=true\]\:text-accent-foreground[data-active="true"]{
  color: oklch(var(--accent-foreground));
}

.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"]{
  color: oklch(var(--sidebar-accent-foreground));
}

.data-\[error\=true\]\:text-destructive[data-error="true"]{
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.data-\[placeholder\]\:text-muted-foreground[data-placeholder]{
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.data-\[range-end\=true\]\:text-primary-foreground[data-range-end="true"]{
  color: oklch(var(--primary-foreground));
}

.data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle="true"]{
  color: oklch(var(--accent-foreground));
}

.data-\[range-start\=true\]\:text-primary-foreground[data-range-start="true"]{
  color: oklch(var(--primary-foreground));
}

.data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single="true"]{
  color: oklch(var(--primary-foreground));
}

.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"]{
  color: oklch(var(--accent-foreground));
}

.data-\[state\=active\]\:text-\[\#cc44ff\][data-state="active"]{
  --tw-text-opacity: 1;
  color: rgb(204 68 255 / var(--tw-text-opacity, 1));
}

.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"]{
  color: oklch(var(--primary-foreground));
}

.data-\[state\=inactive\]\:text-white[data-state="inactive"]{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.data-\[state\=on\]\:text-accent-foreground[data-state="on"]{
  color: oklch(var(--accent-foreground));
}

.data-\[state\=open\]\:text-accent-foreground[data-state="open"]{
  color: oklch(var(--accent-foreground));
}

.data-\[state\=open\]\:text-muted-foreground[data-state="open"]{
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"]{
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.data-\[disabled\=true\]\:opacity-50[data-disabled="true"]{
  opacity: 0.5;
}

.data-\[disabled\]\:opacity-50[data-disabled]{
  opacity: 0.5;
}

.data-\[state\=open\]\:opacity-100[data-state="open"]{
  opacity: 1;
}

.data-\[state\=active\]\:shadow-\[0_0_12px_rgba\(204\2c 68\2c 255\2c 0\.45\)\][data-state="active"]{
  --tw-shadow: 0 0 12px rgba(204,68,255,0.45);
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.data-\[state\=active\]\:shadow-sm[data-state="active"]{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.data-\[variant\=outline\]\:shadow-xs[data-variant="outline"]{
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.data-\[active\=true\]\:ring-\[3px\][data-active="true"]{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.data-\[active\=true\]\:ring-ring\/50[data-active="true"]{
  --tw-ring-color: oklch(var(--ring) / 0.5);
}

.data-\[state\=closed\]\:duration-300[data-state="closed"]{
  transition-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"]{
  transition-duration: 500ms;
}

.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"]{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=open\]\:animate-in[data-state="open"]{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=visible\]\:animate-in[data-state="visible"]{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"]{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=closed\]\:animate-out[data-state="closed"]{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=hidden\]\:animate-out[data-state="hidden"]{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"]{
  --tw-enter-opacity: 0;
}

.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"]{
  --tw-exit-opacity: 0;
}

.data-\[state\=closed\]\:fade-out-0[data-state="closed"]{
  --tw-exit-opacity: 0;
}

.data-\[state\=hidden\]\:fade-out[data-state="hidden"]{
  --tw-exit-opacity: 0;
}

.data-\[state\=open\]\:fade-in-0[data-state="open"]{
  --tw-enter-opacity: 0;
}

.data-\[state\=visible\]\:fade-in[data-state="visible"]{
  --tw-enter-opacity: 0;
}

.data-\[state\=closed\]\:zoom-out-95[data-state="closed"]{
  --tw-exit-scale: .95;
}

.data-\[state\=open\]\:zoom-in-90[data-state="open"]{
  --tw-enter-scale: .9;
}

.data-\[state\=open\]\:zoom-in-95[data-state="open"]{
  --tw-enter-scale: .95;
}

.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"]{
  --tw-enter-translate-x: 13rem;
}

.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"]{
  --tw-enter-translate-x: -13rem;
}

.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"]{
  --tw-exit-translate-x: 13rem;
}

.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"]{
  --tw-exit-translate-x: -13rem;
}

.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"]{
  --tw-enter-translate-y: -0.5rem;
}

.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"]{
  --tw-enter-translate-x: 0.5rem;
}

.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"]{
  --tw-enter-translate-x: -0.5rem;
}

.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"]{
  --tw-enter-translate-y: 0.5rem;
}

.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\=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\=closed\]\:duration-300[data-state="closed"]{
  animation-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"]{
  animation-duration: 500ms;
}

.data-\[state\=inactive\]\:\[text-shadow\:0_0_6px_rgba\(255\2c 255\2c 255\2c 0\.55\)\][data-state="inactive"]{
  text-shadow: 0 0 6px rgba(255,255,255,0.55);
}

.data-\[state\=active\]\:\[text-shadow\:0_0_8px_rgba\(204\2c 68\2c 255\2c 0\.6\)\][data-state="active"]{
  text-shadow: 0 0 8px rgba(204,68,255,0.6);
}

.\*\:data-\[slot\=select-value\]\:line-clamp-1[data-slot="select-value"] > *{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.\*\:data-\[slot\=select-value\]\:flex[data-slot="select-value"] > *{
  display: flex;
}

.\*\:data-\[slot\=select-value\]\:items-center[data-slot="select-value"] > *{
  align-items: center;
}

.\*\:data-\[slot\=select-value\]\:gap-2[data-slot="select-value"] > *{
  gap: 0.5rem;
}

.\*\:data-\[slot\=alert-description\]\:text-destructive\/90[data-slot="alert-description"] > *{
  color: oklch(var(--destructive) / 0.9);
}

.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after{
  content: var(--tw-content);
  left: 0px;
}

.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after{
  content: var(--tw-content);
  height: 0.25rem;
}

.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after{
  content: var(--tw-content);
  width: 100%;
}

.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after{
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after{
  content: var(--tw-content);
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[variant\=outline\]\:first\:border-l:first-child[data-variant="outline"]{
  border-left-width: 1px;
}

.data-\[active\=true\]\:hover\:bg-accent:hover[data-active="true"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state="open"]{
  background-color: oklch(var(--sidebar-accent));
}

.data-\[state\=inactive\]\:hover\:text-white:hover[data-state="inactive"]{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.data-\[state\=open\]\:hover\:text-sidebar-accent-foreground:hover[data-state="open"]{
  color: oklch(var(--sidebar-accent-foreground));
}

.data-\[active\=true\]\:focus\:bg-accent:focus[data-active="true"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"]{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[variant\=destructive\]\:focus\:bg-destructive\/10:focus[data-variant="destructive"]{
  background-color: oklch(var(--destructive) / 0.1);
}

.data-\[variant\=destructive\]\:focus\:text-destructive:focus[data-variant="destructive"]{
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.group[data-disabled="true"] .group-data-\[disabled\=true\]\:pointer-events-none{
  pointer-events: none;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:relative{
  position: relative;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]{
  left: calc(var(--sidebar-width) * -1);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]{
  right: calc(var(--sidebar-width) * -1);
}

.group[data-side="left"] .group-data-\[side\=left\]\:-right-4{
  right: -1rem;
}

.group[data-side="right"] .group-data-\[side\=right\]\:left-0{
  left: 0px;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:top-full{
  top: 100%;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:z-10{
  z-index: 10;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:-mt-8{
  margin-top: -2rem;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:mt-1\.5{
  margin-top: 0.375rem;
}

.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block{
  display: block;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:hidden{
  display: none;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\)\]{
  width: calc(var(--sidebar-width-icon) + (--spacing(4)));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\]{
  width: calc(var(--sidebar-width-icon) + (--spacing(4)) + 2px);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0{
  width: 0px;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:translate-x-0{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-side="right"] .group-data-\[side\=right\]\:rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-state="open"] .group-data-\[state\=open\]\:rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:overflow-hidden{
  overflow: hidden;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:overflow-hidden{
  overflow: hidden;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:rounded-lg{
  border-radius: var(--radius);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:rounded-md{
  border-radius: calc(var(--radius) - 2px);
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border{
  border-width: 1px;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:border{
  border-width: 1px;
}

.group[data-side="left"] .group-data-\[side\=left\]\:border-r{
  border-right-width: 1px;
}

.group[data-side="right"] .group-data-\[side\=right\]\:border-l{
  border-left-width: 1px;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:border-ring{
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border-sidebar-border{
  border-color: oklch(var(--sidebar-border));
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:bg-popover{
  background-color: oklch(var(--popover));
}

.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center{
  text-align: center;
}

.group\/drawer-content[data-vaul-drawer-direction="top"] .group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center{
  text-align: center;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground{
  color: oklch(var(--popover-foreground));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:opacity-0{
  opacity: 0;
}

.group[data-disabled="true"] .group-data-\[disabled\=true\]\:opacity-50{
  opacity: 0.5;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-\[3px\]{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-ring\/50{
  --tw-ring-color: oklch(var(--ring) / 0.5);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:duration-200{
  transition-duration: 200ms;
  animation-duration: 200ms;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:after\:left-full::after{
  content: var(--tw-content);
  left: 100%;
}

.group[data-collapsible="offcanvas"] .hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar:hover{
  background-color: oklch(var(--sidebar));
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:animate-in[data-state="open"]{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:animate-out[data-state="closed"]{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:fade-out-0[data-state="closed"]{
  --tw-exit-opacity: 0;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:fade-in-0[data-state="open"]{
  --tw-enter-opacity: 0;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:zoom-out-95[data-state="closed"]{
  --tw-exit-scale: .95;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:zoom-in-95[data-state="open"]{
  --tw-enter-scale: .95;
}

.peer\/menu-button[data-size="default"] ~ .peer-data-\[size\=default\]\/menu-button\:top-1\.5{
  top: 0.375rem;
}

.peer\/menu-button[data-size="lg"] ~ .peer-data-\[size\=lg\]\/menu-button\:top-2\.5{
  top: 0.625rem;
}

.peer\/menu-button[data-size="sm"] ~ .peer-data-\[size\=sm\]\/menu-button\:top-1{
  top: 0.25rem;
}

.peer\/menu-button[data-active="true"] ~ .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground{
  color: oklch(var(--sidebar-accent-foreground));
}

@media (prefers-reduced-motion: reduce){

  .motion-reduce\:animate-none{
    animation: none;
  }
}

.dark\:border-input:is(.dark *){
  border-color: oklch(var(--input));
}

.dark\:bg-destructive\/60:is(.dark *){
  background-color: oklch(var(--destructive) / 0.6);
}

.dark\:text-muted-foreground:is(.dark *){
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.dark\:hover\:bg-accent\/50:hover:is(.dark *){
  background-color: oklch(var(--accent) / 0.5);
}

.dark\:hover\:text-accent-foreground:hover:is(.dark *){
  color: oklch(var(--accent-foreground));
}

.dark\:focus-visible\:ring-destructive\/40:focus-visible:is(.dark *){
  --tw-ring-color: oklch(var(--destructive) / 0.4);
}

.dark\:data-\[state\=active\]\:border-input[data-state="active"]:is(.dark *){
  border-color: oklch(var(--input));
}

.dark\:data-\[state\=checked\]\:bg-primary[data-state="checked"]:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.dark\:data-\[state\=checked\]\:bg-primary-foreground[data-state="checked"]:is(.dark *){
  background-color: oklch(var(--primary-foreground));
}

.dark\:data-\[state\=unchecked\]\:bg-foreground[data-state="unchecked"]:is(.dark *){
  background-color: oklch(var(--foreground));
}

.dark\:data-\[state\=active\]\:text-foreground[data-state="active"]:is(.dark *){
  color: oklch(var(--foreground));
}

.dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:focus[data-variant="destructive"]:is(.dark *){
  background-color: oklch(var(--destructive) / 0.2);
}

@media (min-width: 640px){

  .sm\:mx-6{
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .sm\:block{
    display: block;
  }

  .sm\:inline{
    display: inline;
  }

  .sm\:flex{
    display: flex;
  }

  .sm\:hidden{
    display: none;
  }

  .sm\:h-3{
    height: 0.75rem;
  }

  .sm\:h-8{
    height: 2rem;
  }

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

  .sm\:w-3{
    width: 0.75rem;
  }

  .sm\:w-36{
    width: 9rem;
  }

  .sm\:w-8{
    width: 2rem;
  }

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

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

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

  .sm\:max-w-lg{
    max-width: 32rem;
  }

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

  .sm\:max-w-sm{
    max-width: 24rem;
  }

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

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

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

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

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

  .sm\:flex-row{
    flex-direction: row;
  }

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

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

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

  .sm\:gap-2{
    gap: 0.5rem;
  }

  .sm\:gap-2\.5{
    gap: 0.625rem;
  }

  .sm\:gap-3{
    gap: 0.75rem;
  }

  .sm\:gap-4{
    gap: 1rem;
  }

  .sm\:break-normal{
    overflow-wrap: normal;
    word-break: normal;
  }

  .sm\:p-4{
    padding: 1rem;
  }

  .sm\:p-5{
    padding: 1.25rem;
  }

  .sm\:px-2{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .sm\:px-3{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .sm\:px-3\.5{
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  .sm\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:pl-2\.5{
    padding-left: 0.625rem;
  }

  .sm\:pr-2\.5{
    padding-right: 0.625rem;
  }

  .sm\:text-left{
    text-align: left;
  }

  .sm\:text-2xl{
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-4xl{
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-5xl{
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-\[10px\]{
    font-size: 10px;
  }

  .sm\:text-\[11px\]{
    font-size: 11px;
  }

  .sm\:text-\[1em\]{
    font-size: 1em;
  }

  .sm\:text-base{
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-lg{
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-xl{
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .sm\:text-xs{
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .sm\:tracking-normal{
    letter-spacing: 0em;
  }

  .data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction="left"]{
    max-width: 24rem;
  }

  .data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction="right"]{
    max-width: 24rem;
  }
}

@media (min-width: 768px){

  .md\:absolute{
    position: absolute;
  }

  .md\:mx-auto{
    margin-left: auto;
    margin-right: auto;
  }

  .md\:mb-2{
    margin-bottom: 0.5rem;
  }

  .md\:mb-3{
    margin-bottom: 0.75rem;
  }

  .md\:block{
    display: block;
  }

  .md\:flex{
    display: flex;
  }

  .md\:hidden{
    display: none;
  }

  .md\:h-\[90dvh\]{
    height: 90dvh;
  }

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

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

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

  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\]{
    width: var(--radix-navigation-menu-viewport-width);
  }

  .md\:w-auto{
    width: auto;
  }

  .md\:max-w-6xl{
    max-width: 72rem;
  }

  .md\:max-w-7xl{
    max-width: 80rem;
  }

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

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

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

  .md\:flex-1{
    flex: 1 1 0%;
  }

  .md\:flex-shrink-0{
    flex-shrink: 0;
  }

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

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

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

  .md\:flex-row{
    flex-direction: row;
  }

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

  .md\:items-stretch{
    align-items: stretch;
  }

  .md\:gap-1{
    gap: 0.25rem;
  }

  .md\:gap-1\.5{
    gap: 0.375rem;
  }

  .md\:gap-2{
    gap: 0.5rem;
  }

  .md\:gap-3{
    gap: 0.75rem;
  }

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

  .md\:self-stretch{
    align-self: stretch;
  }

  .md\:p-2{
    padding: 0.5rem;
  }

  .md\:p-3{
    padding: 0.75rem;
  }

  .md\:p-4{
    padding: 1rem;
  }

  .md\:px-2{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .md\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .md\:py-1\.5{
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }

  .md\:pt-0{
    padding-top: 0px;
  }

  .md\:pt-8{
    padding-top: 2rem;
  }

  .md\:text-left{
    text-align: left;
  }

  .md\:text-2xl{
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-3xl{
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-6xl{
    font-size: 3.75rem;
    line-height: 1;
  }

  .md\:text-\[9px\]{
    font-size: 9px;
  }

  .md\:text-lg{
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .md\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:text-xl{
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .md\:opacity-0{
    opacity: 0;
  }

  .md\:after\:hidden::after{
    content: var(--tw-content);
    display: none;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:m-2{
    margin: 0.5rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:ml-0{
    margin-left: 0px;
  }

  .peer[data-variant="inset"][data-state="collapsed"] ~ .md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ml-2{
    margin-left: 0.5rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:rounded-xl{
    border-radius: 0.75rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:shadow-sm{
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

@media (min-width: 1024px){

  .lg\:col-span-2{
    grid-column: span 2 / span 2;
  }

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

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

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

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

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

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

  .lg\:flex-row{
    flex-direction: row;
  }

  .lg\:p-6{
    padding: 1.5rem;
  }

  .lg\:pt-0{
    padding-top: 0px;
  }

  .lg\:text-7xl{
    font-size: 4.5rem;
    line-height: 1;
  }
}

@media (min-width: 1280px){

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

@media (orientation: portrait){

  @media not all and (min-width: 768px){

    .portrait\:max-md\:hidden{
      display: none;
    }
  }
}

.\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button{
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){
  padding-right: 0px;
}

.\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button{
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox]{
  --tw-translate-y: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\>button\]\:hidden>button{
  display: none;
}

.\[\&\>span\:last-child\]\:truncate>span:last-child{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.\[\&\>span\]\:text-xs>span{
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&\>span\]\:opacity-70>span{
  opacity: 0.7;
}

.\[\&\>svg\]\:pointer-events-none>svg{
  pointer-events: none;
}

.\[\&\>svg\]\:size-3>svg{
  width: 0.75rem;
  height: 0.75rem;
}

.\[\&\>svg\]\:size-3\.5>svg{
  width: 0.875rem;
  height: 0.875rem;
}

.\[\&\>svg\]\:size-4>svg{
  width: 1rem;
  height: 1rem;
}

.\[\&\>svg\]\:h-2\.5>svg{
  height: 0.625rem;
}

.\[\&\>svg\]\:h-3>svg{
  height: 0.75rem;
}

.\[\&\>svg\]\:w-2\.5>svg{
  width: 0.625rem;
}

.\[\&\>svg\]\:w-3>svg{
  width: 0.75rem;
}

.\[\&\>svg\]\:shrink-0>svg{
  flex-shrink: 0;
}

.\[\&\>svg\]\:translate-y-0\.5>svg{
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\>svg\]\:text-current>svg{
  color: currentColor;
}

.\[\&\>svg\]\:text-muted-foreground>svg{
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.\[\&\>svg\]\:text-sidebar-accent-foreground>svg{
  color: oklch(var(--sidebar-accent-foreground));
}

.\[\&\>tr\]\:last\:border-b-0:last-child>tr{
  border-bottom-width: 0px;
}

.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div{
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text{
  fill: oklch(var(--muted-foreground) / 1);
}

.\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor{
  stroke: oklch(var(--border));
}

.\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke='#fff']{
  stroke: transparent;
}

.\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke='#ccc']{
  stroke: oklch(var(--border));
}

.\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector{
  fill: oklch(var(--muted) / 1);
}

.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor{
  fill: oklch(var(--muted) / 1);
}

.\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke='#ccc']{
  stroke: oklch(var(--border));
}

.\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke='#fff']{
  stroke: transparent;
}

.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading]{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading]{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading]{
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading]{
  font-weight: 500;
}

.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading]{
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group]{
  padding-top: 0px;
}

.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group]{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg{
  height: 1.25rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg{
  width: 1.25rem;
}

.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input]{
  height: 3rem;
}

.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item]{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item]{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg{
  height: 1.25rem;
}

.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg{
  width: 1.25rem;
}

.\[\&_\[role\=slider\]\]\:border-yellow-400 [role=slider]{
  --tw-border-opacity: 1;
  border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
}

.\[\&_\[role\=slider\]\]\:bg-yellow-400 [role=slider]{
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}

.\[\&_p\]\:leading-relaxed p{
  line-height: 1.625;
}

.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']){
  width: 1rem;
  height: 1rem;
}

.\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*='text-']){
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.\[\&_svg\]\:pointer-events-none svg{
  pointer-events: none;
}

.\[\&_svg\]\:shrink-0 svg{
  flex-shrink: 0;
}

.\[\&_tr\:last-child\]\:border-0 tr:last-child{
  border-width: 0px;
}

.\[\&_tr\]\:border-b tr{
  border-bottom-width: 1px;
}

[data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2{
  right: -0.5rem;
}

[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize{
  cursor: e-resize;
}

[data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2{
  left: -0.5rem;
}

[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize{
  cursor: w-resize;
}

[data-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent{
  background-color: transparent;
}

[data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent{
  background-color: transparent;
}

a.\[a\&\]\:hover\:bg-accent:hover{
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

a.\[a\&\]\:hover\:bg-destructive\/90:hover{
  background-color: oklch(var(--destructive) / 0.9);
}

a.\[a\&\]\:hover\:bg-primary\/90:hover{
  background-color: oklch(var(--primary) / 0.9);
}

a.\[a\&\]\:hover\:bg-secondary\/90:hover{
  background-color: oklch(var(--secondary) / 0.9);
}

a.\[a\&\]\:hover\:text-accent-foreground:hover{
  color: oklch(var(--accent-foreground));
}