*, ::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: var(--font-mono), 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;
}
  * {
    box-sizing: border-box;
  }

  html {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
      "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
      "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
  }

  #root {
    min-height: 100vh;
  }
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
  }
.backdrop-blur-md {
    backdrop-filter: blur(12px);
  }
/* Space-themed background gradient */
.bg-space-gradient {
    background: linear-gradient(
      135deg,
      #0f0f23 0%,
      #1a1a3e 25%,
      #2d1b69 50%,
      #1a1a3e 75%,
      #0f0f23 100%
    );
  }
/* Parallax layers */
.parallax-layer-1,
  .parallax-layer-2,
  .parallax-layer-3 {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
.parallax-layer-1 {
    z-index: 1;
  }
.parallax-layer-2 {
    z-index: 2;
  }
.parallax-layer-3 {
    z-index: 3;
  }
/* Enhanced animated stars layers with twinkling effect */
.stars-layer-1,
  .stars-layer-2,
  .stars-layer-3 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: repeat;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
.stars-layer-1 {
    background-image: radial-gradient(2px 2px at 20px 30px, #eee, transparent),
      radial-gradient(
        2px 2px at 40px 70px,
        rgba(255, 255, 255, 0.8),
        transparent
      ), radial-gradient(1px 1px at 90px 40px, #fff, transparent),
      radial-gradient(
        1px 1px at 130px 80px,
        rgba(255, 255, 255, 0.6),
        transparent
      ), radial-gradient(2px 2px at 160px 30px, #fff, transparent),
      radial-gradient(
        1px 1px at 200px 60px,
        rgba(255, 255, 255, 0.9),
        transparent
      ), radial-gradient(1px 1px at 250px 20px, #fff, transparent);
    background-size: 300px 150px;
    animation: stars-move-1 120s linear infinite, stars-twinkle-1 3s ease-in-out
      infinite alternate;
  }
.stars-layer-2 {
    background-image: radial-gradient(1px 1px at 40px 60px, #fff, transparent),
      radial-gradient(
        1px 1px at 120px 10px,
        rgba(255, 255, 255, 0.7),
        transparent
      ), radial-gradient(1px 1px at 170px 50px, #fff, transparent),
      radial-gradient(
        2px 2px at 200px 80px,
        rgba(255, 255, 255, 0.9),
        transparent
      ),
      radial-gradient(
        1px 1px at 280px 40px,
        rgba(255, 255, 255, 0.6),
        transparent
      ), radial-gradient(1px 1px at 320px 90px, #fff, transparent);
    background-size: 350px 180px;
    animation: stars-move-2 180s linear infinite, stars-twinkle-2 4s ease-in-out
      infinite alternate;
  }
.stars-layer-3 {
    background-image: radial-gradient(
        1px 1px at 60px 20px,
        rgba(255, 255, 255, 0.5),
        transparent
      ), radial-gradient(1px 1px at 100px 90px, #fff, transparent),
      radial-gradient(
        1px 1px at 180px 40px,
        rgba(255, 255, 255, 0.8),
        transparent
      ),
      radial-gradient(
        1px 1px at 240px 70px,
        rgba(255, 255, 255, 0.7),
        transparent
      ), radial-gradient(1px 1px at 300px 30px, #fff, transparent),
      radial-gradient(
        1px 1px at 360px 100px,
        rgba(255, 255, 255, 0.6),
        transparent
      );
    background-size: 400px 200px;
    animation: stars-move-3 240s linear infinite, stars-twinkle-3 5s ease-in-out
      infinite alternate;
  }
@keyframes stars-move-1 {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-300px);
    }
  }
@keyframes stars-move-2 {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-350px);
    }
  }
@keyframes stars-move-3 {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-400px);
    }
  }
/* Enhanced twinkling animations for stars */
@keyframes stars-twinkle-1 {
    0% {
      opacity: 0.7;
    }
    25% {
      opacity: 1;
    }
    50% {
      opacity: 0.8;
    }
    75% {
      opacity: 0.9;
    }
    100% {
      opacity: 0.8;
    }
  }
@keyframes stars-twinkle-2 {
    0% {
      opacity: 0.6;
    }
    33% {
      opacity: 0.9;
    }
    66% {
      opacity: 0.7;
    }
    100% {
      opacity: 0.8;
    }
  }
@keyframes stars-twinkle-3 {
    0% {
      opacity: 0.5;
    }
    20% {
      opacity: 0.8;
    }
    40% {
      opacity: 0.6;
    }
    60% {
      opacity: 0.9;
    }
    80% {
      opacity: 0.7;
    }
    100% {
      opacity: 0.6;
    }
  }
/* Enhanced planets with more dynamic movement and interactive effects */
.planet {
    position: absolute;
    border-radius: 50%;
    opacity: 0.6;
    animation: planet-float 20s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
    transition: all 0.3s ease;
  }
.planet:hover {
    opacity: 0.8;
    transform: scale(1.1);
  }
.planet-1 {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at 30% 30%, #ff6b6b, #d63031);
    top: 15%;
    right: 10%;
    animation: planet-float-1 25s ease-in-out infinite, planet-glow-1 8s
      ease-in-out infinite alternate;
  }
.planet-2 {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at 30% 30%, #74b9ff, #0984e3);
    bottom: 20%;
    left: 8%;
    animation: planet-float-2 30s ease-in-out infinite, planet-glow-2 6s
      ease-in-out infinite alternate;
  }
.planet-3 {
    width: 40px;
    height: 40px;
    background: radial-gradient(circle at 30% 30%, #fdcb6e, #e17055);
    top: 60%;
    right: 15%;
    animation: planet-float-3 35s ease-in-out infinite, planet-glow-3 10s
      ease-in-out infinite alternate;
  }
@keyframes planet-float-1 {
    0%,
    100% {
      transform: translateY(0px) translateX(0px) rotate(0deg);
    }
    25% {
      transform: translateY(-15px) translateX(5px) rotate(90deg);
    }
    50% {
      transform: translateY(-5px) translateX(10px) rotate(180deg);
    }
    75% {
      transform: translateY(10px) translateX(5px) rotate(270deg);
    }
  }
@keyframes planet-float-2 {
    0%,
    100% {
      transform: translateY(0px) translateX(0px) rotate(0deg);
    }
    25% {
      transform: translateY(12px) translateX(-8px) rotate(90deg);
    }
    50% {
      transform: translateY(0px) translateX(-15px) rotate(180deg);
    }
    75% {
      transform: translateY(-8px) translateX(-8px) rotate(270deg);
    }
  }
@keyframes planet-float-3 {
    0%,
    100% {
      transform: translateY(0px) translateX(0px) rotate(0deg);
    }
    25% {
      transform: translateY(-8px) translateX(-5px) rotate(90deg);
    }
    50% {
      transform: translateY(5px) translateX(-10px) rotate(180deg);
    }
    75% {
      transform: translateY(12px) translateX(-3px) rotate(270deg);
    }
  }
/* Enhanced glow animations for planets */
@keyframes planet-glow-1 {
    0% {
      filter: drop-shadow(0 0 10px rgba(255, 107, 107, 0.3));
    }
    100% {
      filter: drop-shadow(0 0 25px rgba(255, 107, 107, 0.7));
    }
  }
@keyframes planet-glow-2 {
    0% {
      filter: drop-shadow(0 0 8px rgba(116, 185, 255, 0.3));
    }
    100% {
      filter: drop-shadow(0 0 20px rgba(116, 185, 255, 0.7));
    }
  }
@keyframes planet-glow-3 {
    0% {
      filter: drop-shadow(0 0 6px rgba(253, 203, 110, 0.3));
    }
    100% {
      filter: drop-shadow(0 0 15px rgba(253, 203, 110, 0.7));
    }
  }
/* Enhanced shooting stars with more realistic trails and variety */
.shooting-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 4px #fff;
  }
.shooting-star::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0.4),
      transparent
    );
    transform: translateX(-120px);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
  }
.shooting-star-1 {
    top: 20%;
    right: 20%;
    animation: shooting-1 12s linear infinite;
  }
.shooting-star-2 {
    top: 70%;
    right: 60%;
    animation: shooting-2 16s linear infinite;
    animation-delay: -8s;
  }
.shooting-star-3 {
    top: 40%;
    right: 80%;
    animation: shooting-3 14s linear infinite;
    animation-delay: -4s;
  }
@keyframes shooting-1 {
    0% {
      opacity: 0;
      transform: translateX(0) translateY(0) scale(0.5);
    }
    5% {
      opacity: 1;
      transform: translateX(-20px) translateY(20px) scale(1);
    }
    15% {
      opacity: 1;
      transform: translateX(-100px) translateY(100px) scale(1);
    }
    20% {
      opacity: 0;
      transform: translateX(-200px) translateY(200px) scale(0.8);
    }
    100% {
      opacity: 0;
      transform: translateX(-400px) translateY(400px) scale(0.3);
    }
  }
@keyframes shooting-2 {
    0% {
      opacity: 0;
      transform: translateX(0) translateY(0) scale(0.5);
    }
    8% {
      opacity: 1;
      transform: translateX(-30px) translateY(30px) scale(1);
    }
    18% {
      opacity: 1;
      transform: translateX(-120px) translateY(120px) scale(1);
    }
    25% {
      opacity: 0;
      transform: translateX(-250px) translateY(250px) scale(0.8);
    }
    100% {
      opacity: 0;
      transform: translateX(-500px) translateY(500px) scale(0.3);
    }
  }
@keyframes shooting-3 {
    0% {
      opacity: 0;
      transform: translateX(0) translateY(0) scale(0.6);
    }
    6% {
      opacity: 1;
      transform: translateX(-25px) translateY(25px) scale(1);
    }
    16% {
      opacity: 1;
      transform: translateX(-110px) translateY(110px) scale(1);
    }
    22% {
      opacity: 0;
      transform: translateX(-220px) translateY(220px) scale(0.7);
    }
    100% {
      opacity: 0;
      transform: translateX(-450px) translateY(450px) scale(0.2);
    }
  }
/* Enhanced pulsing nebula effects with more variety */
.nebula-1,
  .nebula-2 {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    pointer-events: none;
  }
.nebula-1 {
    width: 250px;
    height: 250px;
    background: radial-gradient(
      circle,
      rgba(147, 51, 234, 0.4),
      rgba(147, 51, 234, 0.2),
      transparent
    );
    top: 30%;
    left: 20%;
    animation: nebula-pulse-1 15s ease-in-out infinite alternate;
  }
.nebula-2 {
    width: 180px;
    height: 180px;
    background: radial-gradient(
      circle,
      rgba(59, 130, 246, 0.3),
      rgba(59, 130, 246, 0.1),
      transparent
    );
    bottom: 40%;
    right: 25%;
    animation: nebula-pulse-2 20s ease-in-out infinite alternate;
  }
@keyframes nebula-pulse-1 {
    0% {
      opacity: 0.05;
      transform: scale(1) rotate(0deg);
    }
    50% {
      opacity: 0.12;
      transform: scale(1.1) rotate(180deg);
    }
    100% {
      opacity: 0.18;
      transform: scale(1.3) rotate(360deg);
    }
  }
@keyframes nebula-pulse-2 {
    0% {
      opacity: 0.03;
      transform: scale(1) rotate(0deg);
    }
    50% {
      opacity: 0.08;
      transform: scale(1.2) rotate(-180deg);
    }
    100% {
      opacity: 0.15;
      transform: scale(1.4) rotate(-360deg);
    }
  }
/* New floating particles for enhanced interactivity */
.floating-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: particle-float 20s linear infinite;
  }
.particle-1 {
    top: 10%;
    left: 10%;
    animation: particle-float-1 25s linear infinite;
    animation-delay: 0s;
  }
.particle-2 {
    top: 30%;
    left: 70%;
    animation: particle-float-2 30s linear infinite;
    animation-delay: -5s;
  }
.particle-3 {
    top: 60%;
    left: 20%;
    animation: particle-float-3 35s linear infinite;
    animation-delay: -10s;
  }
.particle-4 {
    top: 80%;
    left: 80%;
    animation: particle-float-4 28s linear infinite;
    animation-delay: -15s;
  }
.particle-5 {
    top: 50%;
    left: 50%;
    animation: particle-float-5 32s linear infinite;
    animation-delay: -20s;
  }
@keyframes particle-float-1 {
    0% {
      transform: translateY(0px) translateX(0px);
      opacity: 0.6;
    }
    25% {
      transform: translateY(-50px) translateX(20px);
      opacity: 1;
    }
    50% {
      transform: translateY(-30px) translateX(40px);
      opacity: 0.8;
    }
    75% {
      transform: translateY(-70px) translateX(10px);
      opacity: 0.9;
    }
    100% {
      transform: translateY(-100px) translateX(30px);
      opacity: 0.4;
    }
  }
@keyframes particle-float-2 {
    0% {
      transform: translateY(0px) translateX(0px);
      opacity: 0.5;
    }
    33% {
      transform: translateY(40px) translateX(-30px);
      opacity: 0.9;
    }
    66% {
      transform: translateY(20px) translateX(-60px);
      opacity: 0.7;
    }
    100% {
      transform: translateY(60px) translateX(-90px);
      opacity: 0.3;
    }
  }
@keyframes particle-float-3 {
    0% {
      transform: translateY(0px) translateX(0px);
      opacity: 0.7;
    }
    20% {
      transform: translateY(-20px) translateX(15px);
      opacity: 1;
    }
    40% {
      transform: translateY(-40px) translateX(30px);
      opacity: 0.8;
    }
    60% {
      transform: translateY(-60px) translateX(45px);
      opacity: 0.9;
    }
    80% {
      transform: translateY(-80px) translateX(60px);
      opacity: 0.6;
    }
    100% {
      transform: translateY(-100px) translateX(75px);
      opacity: 0.2;
    }
  }
@keyframes particle-float-4 {
    0% {
      transform: translateY(0px) translateX(0px);
      opacity: 0.4;
    }
    30% {
      transform: translateY(30px) translateX(-20px);
      opacity: 0.8;
    }
    60% {
      transform: translateY(10px) translateX(-40px);
      opacity: 1;
    }
    100% {
      transform: translateY(50px) translateX(-60px);
      opacity: 0.3;
    }
  }
@keyframes particle-float-5 {
    0% {
      transform: translateY(0px) translateX(0px) rotate(0deg);
      opacity: 0.6;
    }
    25% {
      transform: translateY(-30px) translateX(-15px) rotate(90deg);
      opacity: 0.9;
    }
    50% {
      transform: translateY(-60px) translateX(0px) rotate(180deg);
      opacity: 1;
    }
    75% {
      transform: translateY(-90px) translateX(15px) rotate(270deg);
      opacity: 0.7;
    }
    100% {
      transform: translateY(-120px) translateX(0px) rotate(360deg);
      opacity: 0.2;
    }
  }
.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;
}
.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-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-12 {
  bottom: -3rem;
}
.-bottom-2 {
  bottom: -0.5rem;
}
.-left-12 {
  left: -3rem;
}
.-right-12 {
  right: -3rem;
}
.-right-2 {
  right: -0.5rem;
}
.-top-12 {
  top: -3rem;
}
.-top-2 {
  top: -0.5rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-1 {
  bottom: 0.25rem;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-\[50\%\] {
  left: 50%;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-2 {
  top: 0.5rem;
}
.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-50 {
  z-index: 50;
}
.z-\[1\] {
  z-index: 1;
}
.order-first {
  order: -9999;
}
.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-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-3\.5 {
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.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;
}
.-mt-4 {
  margin-top: -1rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.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-10 {
  margin-top: 2.5rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.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;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.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;
}
.hidden {
  display: none;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.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-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.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-36 {
  height: 9rem;
}
.h-4 {
  height: 1rem;
}
.h-44 {
  height: 11rem;
}
.h-48 {
  height: 12rem;
}
.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-\[calc\(100\%-1px\)\] {
  height: calc(100% - 1px);
}
.h-\[calc\(100vh-280px\)\] {
  height: calc(100vh - 280px);
}
.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-60 {
  max-height: 15rem;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.max-h-none {
  max-height: none;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-16 {
  min-height: 4rem;
}
.min-h-4 {
  min-height: 1rem;
}
.min-h-\[120px\] {
  min-height: 120px;
}
.min-h-\[140px\] {
  min-height: 140px;
}
.min-h-\[200px\] {
  min-height: 200px;
}
.min-h-\[300px\] {
  min-height: 300px;
}
.min-h-\[400px\] {
  min-height: 400px;
}
.min-h-\[5\.5rem\] {
  min-height: 5.5rem;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.min-h-\[80vh\] {
  min-height: 80vh;
}
.min-h-screen {
  min-height: 100vh;
}
.min-h-svh {
  min-height: 100svh;
}
.w-0 {
  width: 0px;
}
.w-1 {
  width: 0.25rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-10 {
  width: 2.5rem;
}
.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-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-56 {
  width: 14rem;
}
.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-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-\[8rem\] {
  min-width: 8rem;
}
.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-4xl {
  max-width: 56rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-\[200px\] {
  max-width: 200px;
}
.max-w-\[520px\] {
  max-width: 520px;
}
.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-none {
  max-width: none;
}
.flex-1 {
  flex: 1 1 0%;
}
.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-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-\[-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-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-\[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-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 bounce {

  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
.animate-bounce {
  animation: bounce 1s infinite;
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-glow {

  0%, 100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}
.animate-pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-y {
  resize: vertical;
}
.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;
}
.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-7 {
  grid-template-columns: repeat(7, 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;
}
.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\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-px {
  gap: 1px;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1\.5 {
  row-gap: 0.375rem;
}
.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-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-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * 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));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.self-start {
  align-self: flex-start;
}
.justify-self-end {
  justify-self: end;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.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;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: calc(var(--radius) + 4px);
}
.rounded-md {
  border-radius: calc(var(--radius) + 2px);
}
.rounded-none {
  border-radius: 0px;
}
.rounded-sm {
  border-radius: calc(var(--radius));
}
.rounded-xl {
  border-radius: 0.75rem;
}
.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-bl-md {
  border-bottom-left-radius: calc(var(--radius) + 2px);
}
.rounded-br-md {
  border-bottom-right-radius: calc(var(--radius) + 2px);
}
.rounded-tl-sm {
  border-top-left-radius: calc(var(--radius));
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-\[1\.5px\] {
  border-width: 1.5px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-amber-400\/30 {
  border-color: rgb(251 191 36 / 0.3);
}
.border-amber-500\/20 {
  border-color: rgb(245 158 11 / 0.2);
}
.border-amber-500\/30 {
  border-color: rgb(245 158 11 / 0.3);
}
.border-amber-500\/40 {
  border-color: rgb(245 158 11 / 0.4);
}
.border-blue-500\/30 {
  border-color: rgb(59 130 246 / 0.3);
}
.border-border {
  --tw-border-opacity: 1;
  border-color: hsl(var(--border) / var(--tw-border-opacity, 1));
}
.border-border\/50 {
  border-color: hsl(var(--border) / 0.5);
}
.border-destructive\/40 {
  border-color: hsl(var(--destructive) / 0.4);
}
.border-emerald-500\/30 {
  border-color: rgb(16 185 129 / 0.3);
}
.border-green-400\/30 {
  border-color: rgb(74 222 128 / 0.3);
}
.border-green-500\/30 {
  border-color: rgb(34 197 94 / 0.3);
}
.border-indigo-400\/30 {
  border-color: rgb(129 140 248 / 0.3);
}
.border-indigo-500\/10 {
  border-color: rgb(99 102 241 / 0.1);
}
.border-indigo-500\/20 {
  border-color: rgb(99 102 241 / 0.2);
}
.border-indigo-500\/30 {
  border-color: rgb(99 102 241 / 0.3);
}
.border-indigo-500\/40 {
  border-color: rgb(99 102 241 / 0.4);
}
.border-input {
  --tw-border-opacity: 1;
  border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: hsl(var(--primary) / var(--tw-border-opacity, 1));
}
.border-primary\/40 {
  border-color: hsl(var(--primary) / 0.4);
}
.border-purple-400\/15 {
  border-color: rgb(192 132 252 / 0.15);
}
.border-purple-400\/20 {
  border-color: rgb(192 132 252 / 0.2);
}
.border-purple-400\/30 {
  border-color: rgb(192 132 252 / 0.3);
}
.border-purple-400\/40 {
  border-color: rgb(192 132 252 / 0.4);
}
.border-purple-500 {
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}
.border-purple-500\/20 {
  border-color: rgb(168 85 247 / 0.2);
}
.border-purple-500\/30 {
  border-color: rgb(168 85 247 / 0.3);
}
.border-purple-500\/40 {
  border-color: rgb(168 85 247 / 0.4);
}
.border-purple-500\/60 {
  border-color: rgb(168 85 247 / 0.6);
}
.border-red-400\/30 {
  border-color: rgb(248 113 113 / 0.3);
}
.border-red-500\/20 {
  border-color: rgb(239 68 68 / 0.2);
}
.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-rose-400\/30 {
  border-color: rgb(251 113 133 / 0.3);
}
.border-rose-500\/30 {
  border-color: rgb(244 63 94 / 0.3);
}
.border-slate-500\/30 {
  border-color: rgb(100 116 139 / 0.3);
}
.border-slate-600\/30 {
  border-color: rgb(71 85 105 / 0.3);
}
.border-slate-600\/40 {
  border-color: rgb(71 85 105 / 0.4);
}
.border-slate-600\/50 {
  border-color: rgb(71 85 105 / 0.5);
}
.border-slate-800 {
  --tw-border-opacity: 1;
  border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}
.border-transparent {
  border-color: transparent;
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-purple-300 {
  --tw-border-opacity: 1;
  border-top-color: rgb(216 180 254 / var(--tw-border-opacity, 1));
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-\[hsl\(var\(--cal-cell-border\)\)\] {
  background-color: hsl(var(--cal-cell-border));
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}
.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-amber-500\/10 {
  background-color: rgb(245 158 11 / 0.1);
}
.bg-amber-500\/15 {
  background-color: rgb(245 158 11 / 0.15);
}
.bg-amber-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-amber-900\/20 {
  background-color: rgb(120 53 15 / 0.2);
}
.bg-amber-900\/30 {
  background-color: rgb(120 53 15 / 0.3);
}
.bg-background {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
}
.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-border {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--border) / var(--tw-bg-opacity, 1));
}
.bg-card {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--card) / var(--tw-bg-opacity, 1));
}
.bg-destructive {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--destructive) / var(--tw-bg-opacity, 1));
}
.bg-destructive\/10 {
  background-color: hsl(var(--destructive) / 0.1);
}
.bg-emerald-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-emerald-900\/20 {
  background-color: rgb(6 78 59 / 0.2);
}
.bg-foreground {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--foreground) / var(--tw-bg-opacity, 1));
}
.bg-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}
.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-500\/15 {
  background-color: rgb(34 197 94 / 0.15);
}
.bg-green-500\/20 {
  background-color: rgb(34 197 94 / 0.2);
}
.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-indigo-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(129 140 248 / var(--tw-bg-opacity, 1));
}
.bg-indigo-500\/20 {
  background-color: rgb(99 102 241 / 0.2);
}
.bg-indigo-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.bg-indigo-600\/20 {
  background-color: rgb(79 70 229 / 0.2);
}
.bg-indigo-600\/30 {
  background-color: rgb(79 70 229 / 0.3);
}
.bg-indigo-600\/90 {
  background-color: rgb(79 70 229 / 0.9);
}
.bg-indigo-900\/20 {
  background-color: rgb(49 46 129 / 0.2);
}
.bg-indigo-900\/30 {
  background-color: rgb(49 46 129 / 0.3);
}
.bg-muted {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
}
.bg-muted\/50 {
  background-color: hsl(var(--muted) / 0.5);
}
.bg-popover {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--popover) / var(--tw-bg-opacity, 1));
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}
.bg-primary\/10 {
  background-color: hsl(var(--primary) / 0.1);
}
.bg-primary\/20 {
  background-color: hsl(var(--primary) / 0.2);
}
.bg-purple-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(192 132 252 / var(--tw-bg-opacity, 1));
}
.bg-purple-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.bg-purple-500\/10 {
  background-color: rgb(168 85 247 / 0.1);
}
.bg-purple-500\/20 {
  background-color: rgb(168 85 247 / 0.2);
}
.bg-purple-500\/5 {
  background-color: rgb(168 85 247 / 0.05);
}
.bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}
.bg-purple-600\/10 {
  background-color: rgb(147 51 234 / 0.1);
}
.bg-purple-600\/20 {
  background-color: rgb(147 51 234 / 0.2);
}
.bg-purple-600\/30 {
  background-color: rgb(147 51 234 / 0.3);
}
.bg-purple-900\/20 {
  background-color: rgb(88 28 135 / 0.2);
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1);
}
.bg-red-500\/20 {
  background-color: rgb(239 68 68 / 0.2);
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-red-900\/20 {
  background-color: rgb(127 29 29 / 0.2);
}
.bg-red-900\/30 {
  background-color: rgb(127 29 29 / 0.3);
}
.bg-red-900\/40 {
  background-color: rgb(127 29 29 / 0.4);
}
.bg-rose-500\/10 {
  background-color: rgb(244 63 94 / 0.1);
}
.bg-rose-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
}
.bg-rose-900\/20 {
  background-color: rgb(136 19 55 / 0.2);
}
.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--secondary) / var(--tw-bg-opacity, 1));
}
.bg-slate-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}
.bg-slate-600\/30 {
  background-color: rgb(71 85 105 / 0.3);
}
.bg-slate-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.bg-slate-700\/40 {
  background-color: rgb(51 65 85 / 0.4);
}
.bg-slate-700\/50 {
  background-color: rgb(51 65 85 / 0.5);
}
.bg-slate-700\/60 {
  background-color: rgb(51 65 85 / 0.6);
}
.bg-slate-700\/80 {
  background-color: rgb(51 65 85 / 0.8);
}
.bg-slate-800\/30 {
  background-color: rgb(30 41 59 / 0.3);
}
.bg-slate-800\/40 {
  background-color: rgb(30 41 59 / 0.4);
}
.bg-slate-800\/50 {
  background-color: rgb(30 41 59 / 0.5);
}
.bg-slate-800\/60 {
  background-color: rgb(30 41 59 / 0.6);
}
.bg-slate-800\/70 {
  background-color: rgb(30 41 59 / 0.7);
}
.bg-slate-800\/90 {
  background-color: rgb(30 41 59 / 0.9);
}
.bg-slate-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.bg-slate-900\/40 {
  background-color: rgb(15 23 42 / 0.4);
}
.bg-slate-900\/70 {
  background-color: rgb(15 23 42 / 0.7);
}
.bg-transparent {
  background-color: transparent;
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-yellow-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-blue-800\/30 {
  --tw-gradient-from: rgb(30 64 175 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 64 175 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-800\/30 {
  --tw-gradient-from: rgb(22 101 52 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(22 101 52 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-600 {
  --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-800\/30 {
  --tw-gradient-from: rgb(107 33 168 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(107 33 168 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-900\/40 {
  --tw-gradient-from: rgb(88 28 135 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-600\/20 {
  --tw-gradient-from: rgb(220 38 38 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-800\/40 {
  --tw-gradient-from: rgb(153 27 27 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(153 27 27 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-900\/20 {
  --tw-gradient-from: rgb(127 29 29 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(127 29 29 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-900\/40 {
  --tw-gradient-from: rgb(127 29 29 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(127 29 29 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-800\/50 {
  --tw-gradient-from: rgb(30 41 59 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-800\/90 {
  --tw-gradient-from: rgb(30 41 59 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-amber-300\/60 {
  --tw-gradient-to: rgb(252 211 77 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(252 211 77 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-blue-800\/30 {
  --tw-gradient-to: rgb(30 64 175 / 0.3) var(--tw-gradient-to-position);
}
.to-indigo-800\/30 {
  --tw-gradient-to: rgb(55 48 163 / 0.3) var(--tw-gradient-to-position);
}
.to-indigo-900\/40 {
  --tw-gradient-to: rgb(49 46 129 / 0.4) var(--tw-gradient-to-position);
}
.to-purple-600 {
  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
}
.to-purple-600\/20 {
  --tw-gradient-to: rgb(147 51 234 / 0.2) var(--tw-gradient-to-position);
}
.to-purple-800\/30 {
  --tw-gradient-to: rgb(107 33 168 / 0.3) var(--tw-gradient-to-position);
}
.to-purple-800\/40 {
  --tw-gradient-to: rgb(107 33 168 / 0.4) var(--tw-gradient-to-position);
}
.to-purple-900\/20 {
  --tw-gradient-to: rgb(88 28 135 / 0.2) var(--tw-gradient-to-position);
}
.to-purple-900\/40 {
  --tw-gradient-to: rgb(88 28 135 / 0.4) var(--tw-gradient-to-position);
}
.to-red-800\/30 {
  --tw-gradient-to: rgb(153 27 27 / 0.3) var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.fill-current {
  fill: currentColor;
}
.fill-primary {
  fill: hsl(var(--primary) / 1);
}
.fill-transparent {
  fill: transparent;
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.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-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-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-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-\[4\.5rem\] {
  padding-left: 4.5rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-11 {
  padding-right: 2.75rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pr-9 {
  padding-right: 2.25rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.align-middle {
  vertical-align: middle;
}
.font-display {
  font-family: var(--font-display), sans-serif;
}
.font-mono {
  font-family: var(--font-mono), monospace;
}
.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-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.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-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.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-accent-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
}
.text-amber-100 {
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}
.text-amber-200 {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.text-amber-200\/90 {
  color: rgb(253 230 138 / 0.9);
}
.text-amber-300 {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.text-amber-300\/90 {
  color: rgb(252 211 77 / 0.9);
}
.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-blue-100 {
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}
.text-blue-200 {
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}
.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-current {
  color: currentColor;
}
.text-cyan-400 {
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.text-destructive {
  --tw-text-opacity: 1;
  color: hsl(var(--destructive) / var(--tw-text-opacity, 1));
}
.text-destructive-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--destructive-foreground) / var(--tw-text-opacity, 1));
}
.text-emerald-300 {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.text-emerald-400 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.text-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}
.text-green-100 {
  --tw-text-opacity: 1;
  color: rgb(220 252 231 / var(--tw-text-opacity, 1));
}
.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-indigo-100 {
  --tw-text-opacity: 1;
  color: rgb(224 231 255 / var(--tw-text-opacity, 1));
}
.text-indigo-100\/90 {
  color: rgb(224 231 255 / 0.9);
}
.text-indigo-200 {
  --tw-text-opacity: 1;
  color: rgb(199 210 254 / var(--tw-text-opacity, 1));
}
.text-indigo-200\/70 {
  color: rgb(199 210 254 / 0.7);
}
.text-indigo-200\/75 {
  color: rgb(199 210 254 / 0.75);
}
.text-indigo-200\/80 {
  color: rgb(199 210 254 / 0.8);
}
.text-indigo-300 {
  --tw-text-opacity: 1;
  color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}
.text-indigo-300\/60 {
  color: rgb(165 180 252 / 0.6);
}
.text-indigo-300\/70 {
  color: rgb(165 180 252 / 0.7);
}
.text-indigo-400 {
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.text-muted-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.text-primary {
  --tw-text-opacity: 1;
  color: hsl(var(--primary) / var(--tw-text-opacity, 1));
}
.text-primary-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}
.text-primary\/90 {
  color: hsl(var(--primary) / 0.9);
}
.text-purple-100 {
  --tw-text-opacity: 1;
  color: rgb(243 232 255 / var(--tw-text-opacity, 1));
}
.text-purple-100\/80 {
  color: rgb(243 232 255 / 0.8);
}
.text-purple-100\/90 {
  color: rgb(243 232 255 / 0.9);
}
.text-purple-200 {
  --tw-text-opacity: 1;
  color: rgb(233 213 255 / var(--tw-text-opacity, 1));
}
.text-purple-200\/60 {
  color: rgb(233 213 255 / 0.6);
}
.text-purple-200\/70 {
  color: rgb(233 213 255 / 0.7);
}
.text-purple-200\/80 {
  color: rgb(233 213 255 / 0.8);
}
.text-purple-300 {
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}
.text-purple-300\/70 {
  color: rgb(216 180 254 / 0.7);
}
.text-purple-300\/80 {
  color: rgb(216 180 254 / 0.8);
}
.text-purple-400 {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.text-purple-400\/60 {
  color: rgb(192 132 252 / 0.6);
}
.text-purple-50 {
  --tw-text-opacity: 1;
  color: rgb(250 245 255 / var(--tw-text-opacity, 1));
}
.text-red-100\/90 {
  color: rgb(254 226 226 / 0.9);
}
.text-red-200 {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}
.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-rose-100 {
  --tw-text-opacity: 1;
  color: rgb(255 228 230 / var(--tw-text-opacity, 1));
}
.text-rose-200\/70 {
  color: rgb(254 205 211 / 0.7);
}
.text-rose-300 {
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.text-secondary-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--secondary-foreground) / var(--tw-text-opacity, 1));
}
.text-slate-100 {
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.text-slate-200 {
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / 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-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.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-yellow-500 {
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.placeholder-purple-300::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(216 180 254 / var(--tw-placeholder-opacity, 1));
}
.placeholder-purple-300::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(216 180 254 / var(--tw-placeholder-opacity, 1));
}
.placeholder-slate-500::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(100 116 139 / var(--tw-placeholder-opacity, 1));
}
.placeholder-slate-500::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(100 116 139 / var(--tw-placeholder-opacity, 1));
}
.opacity-0 {
  opacity: 0;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-75 {
  opacity: 0.75;
}
.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-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-news-card {
  --tw-shadow: 0 0.25rem 0.75rem oklch(0.1 0.01 270 / 0.4);
  --tw-shadow-colored: 0 0.25rem 0.75rem 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-news-issue {
  --tw-shadow: 0 0.5rem 1.5rem oklch(0.1 0.01 270 / 0.5);
  --tw-shadow-colored: 0 0.5rem 1.5rem 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-black\/50 {
  --tw-shadow-color: rgb(0 0 0 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-indigo-500\/30 {
  --tw-shadow-color: rgb(99 102 241 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-purple-500\/10 {
  --tw-shadow-color: rgb(168 85 247 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-purple-500\/20 {
  --tw-shadow-color: rgb(168 85 247 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-purple-500\/30 {
  --tw-shadow-color: rgb(168 85 247 / 0.3);
  --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-ring\/50 {
  --tw-ring-color: hsl(var(--ring) / 0.5);
}
.ring-offset-background {
  --tw-ring-offset-color: hsl(var(--background) / 1);
}
.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);
}
.drop-shadow-\[0_0_12px_rgba\(147\2c 51\2c 234\2c 0\.5\)\] {
  --tw-drop-shadow: drop-shadow(0 0 12px rgba(147,51,234,0.5));
  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_20px_rgba\(147\2c 51\2c 234\2c 0\.5\)\] {
  --tw-drop-shadow: drop-shadow(0 0 20px rgba(147,51,234,0.5));
  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-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);
}
.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-\[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-\[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-1000 {
  transition-duration: 1000ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  transition-timing-function: linear;
}
/* Astro AI mobile bottom tab bar — horizontally scrollable with a visible
     thin scrollbar so users can see there are more tabs to scroll to.
     The scrollbar sits below the tab buttons (overscroll-behavior: contain
     keeps scroll from bleeding into the page) and uses the indigo accent to
     match the active-tab color. */
.astroai-tab-scroll {
    scrollbar-width: thin;
    scrollbar-color: oklch(0.65 0.22 295 / 0.6) transparent;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
  }
.astroai-tab-scroll::-webkit-scrollbar {
    height: 3px;
  }
.astroai-tab-scroll::-webkit-scrollbar-track {
    background: transparent;
  }
.astroai-tab-scroll::-webkit-scrollbar-thumb {
    background: oklch(0.65 0.22 295 / 0.6);
    border-radius: 9999px;
  }
.astroai-tab-scroll::-webkit-scrollbar-thumb:hover {
    background: oklch(0.65 0.22 295 / 0.85);
  }
/* Star Map chart utilities */
.chart-sky {
    background: hsl(var(--chart-sky));
    color: hsl(var(--chart-sky-foreground));
  }
.chart-grid-line {
    stroke: hsl(var(--chart-grid));
    fill: none;
  }
.chart-zenith-marker {
    fill: hsl(var(--chart-zenith));
  }
.chart-cardinal-label {
    fill: hsl(var(--chart-cardinal));
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.12em;
  }
.chart-constellation-line {
    stroke: hsl(var(--chart-constellation-line));
    stroke-width: 0.5;
    fill: none;
  }
.chart-star-label {
    fill: hsl(var(--chart-label));
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.02em;
  }
.chart-ring {
    stroke: hsl(var(--chart-ring));
    stroke-width: 1.5;
    fill: none;
  }
/* Observation Log utilities */
.log-input {
    background: #241a33;
    border: 1px solid hsl(var(--log-input-border));
    color: #f3f0f7;
    /* Force dark color scheme so native controls (date picker, time picker,
       calendar icon, autofill) render against the dark input background and
       the entered text stays visible. Without this, browsers fall back to a
       light UA color scheme, producing white-on-white or black-on-white text
       inside the input. */
    color-scheme: dark;
    /* Ensure the text color applies to the native input elements themselves,
       not just inherited — some UAs ignore inherited color on form controls.
       Hardcoded hex literals are used here (not hsl(var(--*))) because the
       variable chain was not resolving in some UAs, leaving values invisible. */
    -webkit-text-fill-color: #f3f0f7;
    /* Keep autofill from overriding the theme with a white background. */
    -webkit-box-shadow: inset 0 0 0 1000px #241a33;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: border-color 150ms, box-shadow 150ms;
  }
/* Autofill state: browsers paint a white background and UA-chosen text color
     on :-webkit-autofill, ignoring the base .log-input background/color. Force
     the dark theme background and foreground text color in all autofill
     sub-states so the entered value stays visible against the dark input. */
.log-input:-webkit-autofill,
  .log-input:-webkit-autofill:hover,
  .log-input:-webkit-autofill:focus,
  .log-input:-webkit-autofill:active {
    -webkit-text-fill-color: #f3f0f7;
    -webkit-box-shadow: inset 0 0 0 1000px #241a33;
    caret-color: #f3f0f7;
    -webkit-transition: background-color 9999s ease-in-out 0s;
    transition: background-color 9999s ease-in-out 0s;
  }
.log-input::-moz-placeholder {
    color: #9a8fae;
    -webkit-text-fill-color: #9a8fae;
  }
.log-input::placeholder {
    color: #9a8fae;
    -webkit-text-fill-color: #9a8fae;
  }
.log-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
.log-input:focus {
    border-color: #a872d4;
    box-shadow: 0 0 0 2px rgba(168, 114, 212, 0.3);
    outline: none;
  }
/* Native date/time inputs: ensure the calendar indicator icon is visible
     against the dark background and the picked value uses the theme color.
     Hardcoded hex literals (not hsl(var(--*))) so UA styles cannot override
     the variable chain and render values invisible. */
input[type="date"].log-input,
  input[type="time"].log-input,
  input[type="datetime-local"].log-input,
  input[type="text"].log-input,
  textarea.log-input {
    color: #f3f0f7;
    -webkit-text-fill-color: #f3f0f7;
    background: #241a33;
    -webkit-box-shadow: inset 0 0 0 1000px #241a33;
  }
input[type="date"].log-input::-webkit-calendar-picker-indicator,
  input[type="time"].log-input::-webkit-calendar-picker-indicator,
  input[type="datetime-local"].log-input::-webkit-calendar-picker-indicator {
    filter: brightness(0) invert(1);
    cursor: pointer;
  }
.rating-star-active {
    color: hsl(var(--log-rating-active));
  }
.rating-star-idle {
    color: hsl(var(--log-rating-idle));
  }
/* Astronomy Calendar utilities — month grid + event badges.
     Hardcoded hex literals are used for the dark navy backgrounds and light
     text colors (instead of hsl(var(--cal-*))) because the variable chain was
     not resolving on some native UA surfaces (select dropdowns, option lists,
     autofill), leaving text invisible (white-on-white). color-scheme: dark on
     the grid forces all native controls inside to render dark. */
.cal-grid {
    background: #14121f;
    border: 1px solid #2a2540;
    border-radius: 0.75rem;
    overflow: hidden;
    /* Force dark color scheme so every native control inside the grid
       (selects, option lists, scrollbars) renders against a dark palette
       instead of the browser's light UA default. */
    color-scheme: dark;
    color: #f3f0f7;
  }
/* In-grid Astro AI mascot wrapper + img. The mascot PNG has an opaque
     background that would otherwise show as a white box against the dark
     grid. Setting an explicit dark background (#14121f, matching .cal-grid)
     on BOTH the wrapper and the img masks the image's own opaque surface
     so it blends with the dark theme. Hardcoded hex (not hsl(var())) is
     used because the variable chain does not resolve reliably in
     html-to-image PNG/PDF exports; mix-blend-mode is avoided for the same
     reason. The drop-shadow is kept via the inline utility class on the img. */
.cal-mascot {
    background: #14121f;
  }
.cal-mascot-img {
    background: #14121f;
  }
.cal-cell {
    background: #1a1530;
    border: 1px solid #2a2540;
    color: #f3f0f7;
    box-shadow: var(--tw-shadow-cal-cell, 0 1px 3px oklch(0 0 0 / 0.2));
    transition: background-color 150ms ease, border-color 150ms ease;
  }
.cal-cell:hover {
    background: #241a33;
  }
.cal-cell-today {
    background: #2a1d3d;
    box-shadow: var(
      --tw-shadow-cal-today,
      0 0 0 2px oklch(0.65 0.22 295 / 0.6),
      0 0 16px oklch(0.65 0.22 295 / 0.25)
    );
  }
.cal-event-badge {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.12rem 0.4rem;
    border-radius: 0.375rem;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    line-height: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    /* Light text on a dark navy/indigo badge base — strong contrast so event
       names are clearly readable on every event type. Per-type modifiers
       override background + color but keep the light-on-dark guarantee. */
    color: #f3f0f7;
    background: #241a33;
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Allow long event names (e.g. "Delta Aquariid Meteor Shower") to wrap
       onto a second line instead of being clipped by truncate/max-w. */
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    text-overflow: clip;
    animation: cal-badge-glow 3.5s ease-in-out infinite;
  }
.cal-event-badge > svg {
    flex-shrink: 0;
    margin-top: 0.05rem;
  }
.cal-event-name {
    /* Show the full event name — wrap onto a second line for long names like
       "Delta Aquariid Meteor Shower" instead of clipping with an ellipsis. */
    min-width: 0;
    flex: 1 1 auto;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 0.95rem;
  }
/* Full-width variant for calendar cells: stretches the badge to fill the
     cell width so wrapped event names are fully visible and aligned. */
.cal-event-badge-full {
    display: flex;
    width: 100%;
  }
/* Subtle pulsing glow for calendar event badges. Uses the per-event-type
     --badge-glow token (set by .cal-event-* modifiers) for the box-shadow
     color so each event category glows in its own hue. */
@keyframes cal-badge-glow {
    0%,
    100% {
      box-shadow: 0 0 0 0 hsl(var(--badge-glow, 0.65 0.22 295) / 0);
    }
    50% {
      box-shadow: 0 0 0.5rem 0.125rem
        hsl(var(--badge-glow, 0.65 0.22 295) / 0.45);
    }
  }
.cal-event-moon {
    --badge-glow: 0.82 0.04 240;
    --badge-soft: 0.3 0.03 240;
    --badge-fg: 0.82 0.04 240;
    background: #1c2436;
    border-color: rgba(170, 200, 240, 0.35);
    color: #e8eef9;
  }
.cal-event-meteor {
    --badge-glow: 0.82 0.16 75;
    --badge-soft: 0.3 0.06 75;
    --badge-fg: 0.82 0.16 75;
    background: #2e2616;
    border-color: rgba(245, 220, 130, 0.4);
    color: #fbe9a8;
  }
.cal-event-eclipse {
    --badge-glow: 0.62 0.2 25;
    --badge-soft: 0.28 0.08 25;
    --badge-fg: 0.62 0.2 25;
    background: #2e1a18;
    border-color: rgba(240, 160, 130, 0.4);
    color: #fbd4c4;
  }
.cal-event-opposition {
    --badge-glow: 0.78 0.14 200;
    --badge-soft: 0.28 0.05 200;
    --badge-fg: 0.78 0.14 200;
    background: #16242c;
    border-color: rgba(150, 210, 230, 0.4);
    color: #c4e8f2;
  }
.cal-event-conjunction {
    --badge-glow: 0.78 0.12 295;
    --badge-soft: 0.3 0.05 295;
    --badge-fg: 0.78 0.12 295;
    background: #241a33;
    border-color: rgba(200, 160, 240, 0.4);
    color: #e8d4f8;
  }
.cal-event-season {
    --badge-glow: 0.75 0.15 165;
    --badge-soft: 0.28 0.06 165;
    --badge-fg: 0.75 0.15 165;
    background: #162a26;
    border-color: rgba(150, 230, 200, 0.4);
    color: #c4f0e0;
  }
.cal-legend {
    background: #1a1530;
    border: 1px solid #2a2540;
    border-radius: 0.5rem;
    color-scheme: dark;
  }
.cal-legend-label {
    color: #d8d0e8;
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
  }
.cal-header {
    background: #1f1a30;
    border-bottom: 1px solid #2a2540;
    color: #f3f0f7;
  }
.cal-weekday {
    color: #b8a8d4;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
.cal-date {
    color: #f3f0f7;
    font-family: var(--font-body);
    font-weight: 600;
  }
.cal-date-muted {
    color: #6a5f80;
    font-family: var(--font-body);
    font-weight: 500;
  }
/* Month/year navigation controls + native <select> date pickers.
     Mirrors the .log-input dark-theme fix (color-scheme: dark,
     -webkit-text-fill-color, inset box-shadow) so the <select> trigger AND
     its native <option> dropdown list render dark with light text — no more
     white-on-white. A contrasting purple accent border + subtle accent
     background make the date picker visually distinct from the rest of the
     calendar grid, with a brighter hover/focus state. */
.cal-nav-btn {
    background: #241a33;
    border: 1px solid oklch(0.65 0.22 295 / 0.55);
    color: #f3f0f7;
    /* Force dark color scheme so native <select> dropdowns, option lists,
       and the dropdown arrow render against a dark palette. */
    color-scheme: dark;
    /* Hardcoded hex so the UA cannot override inherited color on the
       <select> trigger, leaving the selected value invisible. */
    -webkit-text-fill-color: #f3f0f7;
    /* Paint a dark navy background behind the native <select> surface so
       autofill / UA styles cannot bleed a white background through. */
    -webkit-box-shadow: inset 0 0 0 1000px #241a33;
    border-radius: 0.5rem;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow
      150ms ease;
  }
.cal-nav-btn:hover {
    background: #2e2247;
    border-color: oklch(0.65 0.22 295 / 0.85);
  }
.cal-nav-btn:focus-visible {
    outline: none;
    border-color: oklch(0.7 0.22 295);
    box-shadow: 0 0 0 2px oklch(0.65 0.22 295 / 0.35);
  }
/* Native <option> list: browsers render <option> with the OS/UA palette,
     ignoring inherited color/background. Force a dark navy background with
     light text so options are readable in the open dropdown. */
select.cal-nav-btn option {
    background: #1a1530;
    color: #f3f0f7;
  }
select.cal-nav-btn option:checked,
  select.cal-nav-btn option:hover,
  select.cal-nav-btn option:focus {
    background: #2e2247;
    color: #f3f0f7;
  }
/* Astro AI Chat utilities — opaque dark navy surfaces for the Chat tab.
     Mirrors the .cal-* / .log-input pattern: hardcoded hex backgrounds
     (#14121f, #1a1530, #241a33) instead of semi-transparent bg-card/40 and
     bg-card/60, which washed out over the bright .bg-space-gradient root.
     color-scheme: dark on the chat container forces native scrollbars and
     any native controls inside to render dark. The chat input field uses
     -webkit-text-fill-color + inset box-shadow to block autofill white flash,
     mirroring .log-input / .cal-nav-btn. */
.chat-shell {
    background: #14121f;
    border: 1px solid #2a2540;
    border-radius: 0.75rem;
    /* Force dark color scheme so native scrollbars + any native controls
       inside the chat area render against a dark palette. */
    color-scheme: dark;
    color: #f3f0f7;
  }
.chat-header {
    background: #1a1530;
    border-bottom: 1px solid #2a2540;
    color: #f3f0f7;
  }
.chat-input-bar {
    background: #1a1530;
    border-top: 1px solid #2a2540;
    color: #f3f0f7;
  }
/* Chat text input field. Mirrors .log-input: opaque #241a33 background,
     color-scheme: dark, -webkit-text-fill-color + inset box-shadow to block
     autofill white flash, and a purple focus ring matching the app accent. */
.chat-input {
    background: #241a33;
    border: 1px solid #3a2f55;
    color: #f3f0f7;
    color-scheme: dark;
    -webkit-text-fill-color: #f3f0f7;
    -webkit-box-shadow: inset 0 0 0 1000px #241a33;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: border-color 150ms, box-shadow 150ms;
  }
.chat-input::-moz-placeholder {
    color: #9a8fae;
    -webkit-text-fill-color: #9a8fae;
  }
.chat-input::placeholder {
    color: #9a8fae;
    -webkit-text-fill-color: #9a8fae;
  }
.chat-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
.chat-input:focus {
    border-color: #a872d4;
    box-shadow: 0 0 0 2px rgba(168, 114, 212, 0.3);
    outline: none;
  }
/* Autofill state: browsers paint a white background and UA-chosen text color
     on :-webkit-autofill. Force the dark theme background + foreground text
     color in all autofill sub-states so the entered value stays visible. */
.chat-input:-webkit-autofill,
  .chat-input:-webkit-autofill:hover,
  .chat-input:-webkit-autofill:focus,
  .chat-input:-webkit-autofill:active {
    -webkit-text-fill-color: #f3f0f7;
    -webkit-box-shadow: inset 0 0 0 1000px #241a33;
    caret-color: #f3f0f7;
    -webkit-transition: background-color 9999s ease-in-out 0s;
    transition: background-color 9999s ease-in-out 0s;
  }
/* Conversation sidebar surfaces — opaque dark navy to match the chat shell.
     Replaces bg-card/60 on the aside + header which washed out over the
     space-gradient background. */
.chat-sidebar {
    background: #14121f;
    border: 1px solid #2a2540;
    border-radius: 0.75rem;
    color-scheme: dark;
    color: #f3f0f7;
  }
.chat-sidebar-header {
    background: #1a1530;
    border-bottom: 1px solid #2a2540;
    color: #f3f0f7;
  }
/* Newsletter utilities — issue cards, archive, subscribe, sources.
     Mirrors the chat and cal opaque dark navy palette; the week label reuses
     the cal-event-meteor amber-gold so weekly issues read like a meteor-shower
     entry on the calendar. The accent bar carries the app's purple 295 accent.
     .news-input mirrors .log-input and .chat-input: opaque dark background,
     color-scheme: dark, -webkit-text-fill-color + inset box-shadow to block
     autofill white flash, purple focus ring. */
.news-card {
    background: oklch(var(--news-card));
    border: 1px solid oklch(0.3 0.02 270 / 0.4);
    border-radius: 0.75rem;
    padding: 1.25rem;
  }
.news-card-hover {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
.news-card-hover:hover {
    border-color: oklch(0.5 0.1 295 / 0.6);
    box-shadow: 0 0 1.25rem oklch(0.4 0.15 295 / 0.2);
  }
.news-week-label {
    font-family: "Geist Mono", monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(var(--news-week-label));
  }
.news-issue-detail {
    background: oklch(var(--news-issue-detail));
    border: 1px solid oklch(0.3 0.02 270 / 0.4);
    border-radius: 1rem;
    padding: 1.75rem;
  }
.news-input {
    background: #14121f;
    border: 1px solid oklch(0.35 0.03 270 / 0.5);
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    color: oklch(0.95 0.01 270);
    color-scheme: dark;
    -webkit-text-fill-color: oklch(0.95 0.01 270);
    box-shadow: inset 0 0.125rem 0.25rem oklch(0.1 0.01 270 / 0.5);
  }
.news-input:focus {
    outline: none;
    border-color: oklch(0.55 0.15 295 / 0.7);
    box-shadow: inset 0 0.125rem 0.25rem oklch(0.1 0.01 270 / 0.5), 0 0 0 3px
      oklch(0.4 0.12 295 / 0.25);
  }
.news-source-link {
    color: oklch(var(--news-source-link));
    text-decoration: none;
    transition: color 0.15s ease;
  }
.news-source-link:hover {
    color: oklch(0.8 0.14 200);
    text-decoration: underline;
  }
.news-accent-bar {
    border-left: 3px solid oklch(var(--news-accent-bar));
  }
.news-empty {
    background: oklch(var(--news-empty));
    border: 1px dashed oklch(0.35 0.02 270 / 0.5);
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    color: oklch(0.7 0.02 270);
  }
/* Chat attach button — sits next to the text input in the .chat-input-bar.
     Mirrors the .chat-input surface (#241a33 bg, #3a2f55 border, #f3f0f7 text)
     and the purple #a872d4 accent on hover/focus so it reads as part of the
     input row, not a foreign control. Sized to match the input's 0.75rem
     vertical padding and 0.875rem font. color-scheme: dark keeps any native
     file-picker affordances dark. */
/* Hide the native file input; the button label/icon is the visible affordance. */
/* Chat attach thumbnail chip — preview of a selected/queued image shown in a
     row above the input. Opaque #241a33 surface with #3a2f55 border matching
     the input; the remove control uses the purple accent on hover so the
     destructive action is clearly the app's primary accent. */
/* Chat upload progress — slim bar shown over a thumbnail while an image is
     uploading. Track is the input surface color; the fill uses the purple
     accent so progress reads as the app's primary action color. */
/* Stargazing Passport utilities — checklist cards, achievements, profile,
     certificate, and photo upload. Mirrors the opaque dark navy palette
     (#14121f / #1a1530 / #241a33) used by chat/cal/log so surfaces survive
     the bright .bg-space-gradient root. color-scheme: dark on containers
     forces native controls/scrollbars dark. The accent bar carries the app's
     purple 295 accent; completed states reuse the amber-gold 85° rating hue. */
/* Checklist card — one row per celestial object. Completed cards get a
     purple glow border + amber-gold object icon; not-spotted cards stay flat
     with a dashed status pill. */
.pass-card {
    background: oklch(var(--pass-card));
    border: 1px solid oklch(var(--pass-card-border));
    border-left: 3px solid oklch(var(--pass-accent-bar));
    border-radius: 0.75rem;
    color-scheme: dark;
    color: #f3f0f7;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s
      ease;
  }
.pass-card-done {
    background: oklch(var(--pass-card-done));
    border: 1px solid oklch(var(--pass-card-border-done));
    border-left: 3px solid oklch(var(--pass-accent-bar));
    box-shadow: var(--tw-shadow-pass-card-done);
  }
.pass-card-hover:hover {
    border-color: oklch(0.5 0.12 295 / 0.6);
    box-shadow: 0 0 1.25rem oklch(0.4 0.15 295 / 0.2);
  }
.pass-object-icon {
    color: oklch(var(--pass-object-icon));
  }
.pass-object-icon-done {
    color: oklch(var(--pass-object-icon-done));
  }
.pass-category-label {
    color: oklch(var(--pass-category-label));
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
.pass-status-done {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: oklch(var(--pass-status-done));
    background: oklch(var(--pass-status-done-bg));
    border: 1px solid oklch(0.82 0.18 85 / 0.4);
  }
.pass-status-idle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    color: oklch(var(--pass-status-idle));
    background: oklch(var(--pass-status-idle-bg));
    border: 1px dashed oklch(var(--pass-status-idle-border));
  }
.pass-add-input {
    background: oklch(var(--pass-add-input));
    border: 1px solid oklch(var(--pass-add-input-border));
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    color: #f3f0f7;
    color-scheme: dark;
    -webkit-text-fill-color: #f3f0f7;
    box-shadow: inset 0 0 0 1000px oklch(var(--pass-add-input));
    transition: border-color 150ms, box-shadow 150ms;
  }
.pass-add-input::-moz-placeholder {
    color: #9a8fae;
    -webkit-text-fill-color: #9a8fae;
  }
.pass-add-input::placeholder {
    color: #9a8fae;
    -webkit-text-fill-color: #9a8fae;
  }
.pass-add-input:focus {
    outline: none;
    border-color: oklch(0.65 0.22 295);
    box-shadow: 0 0 0 2px oklch(0.65 0.22 295 / 0.3);
  }
/* Achievement badge — circular medal. Earned badges glow in their own hue
     (set via --badge-glow on the modifier) with a shimmering ring; locked
     badges are desaturated with a dashed ring and a lock overlay. */
.ach-badge {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
.ach-medal {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 9999px;
    color-scheme: dark;
  }
.ach-earned {
    background: oklch(0.24 0.05 295);
    border: 2px solid oklch(var(--ach-earned-ring));
    color: oklch(var(--ach-earned-fg));
    box-shadow: var(--tw-shadow-ach-earned);
    animation: ach-shimmer 3s ease-in-out infinite;
  }
.ach-locked {
    background: oklch(var(--ach-locked-bg));
    border: 2px dashed oklch(var(--ach-locked-ring));
    color: oklch(var(--ach-locked-fg));
    box-shadow: var(--tw-shadow-ach-locked);
    opacity: 0.7;
  }
.ach-locked::after {
    /* lock overlay — small lock glyph in the bottom-right of the medal */
    content: "";
    position: absolute;
    bottom: 0.25rem;
    right: 0.25rem;
    width: 1rem;
    height: 1rem;
    background: oklch(0.18 0.015 270);
    border: 1px solid oklch(0.4 0.02 270);
    border-radius: 9999px;
    /* simple lock body via radial mask not reliable cross-browser; frontend
       renders an SVG lock icon inside .ach-medal instead. This keeps the
       dashed-ring + dim treatment as the visual lock signal. */
  }
.ach-name {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    color: oklch(var(--ach-name));
    letter-spacing: 0.02em;
  }
.ach-name-locked {
    color: oklch(var(--ach-name-locked));
  }
.ach-desc {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    text-align: center;
    color: oklch(var(--ach-desc));
    max-width: 7rem;
  }
/* Observer profile card — set-once name + telescope default. */
.profile-card {
    background: oklch(var(--profile-card));
    border: 1px solid oklch(var(--profile-card-border));
    border-left: 3px solid oklch(var(--profile-accent-bar));
    border-radius: 0.75rem;
    color-scheme: dark;
    color: #f3f0f7;
  }
.profile-name {
    color: oklch(var(--profile-name));
    font-family: var(--font-display);
    font-weight: 600;
  }
.profile-meta {
    color: oklch(var(--profile-meta));
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
  }
.profile-input {
    background: oklch(var(--profile-input));
    border: 1px solid oklch(var(--profile-input-border));
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    color: #f3f0f7;
    color-scheme: dark;
    -webkit-text-fill-color: #f3f0f7;
    box-shadow: inset 0 0 0 1000px oklch(var(--profile-input));
    transition: border-color 150ms, box-shadow 150ms;
  }
.profile-input::-moz-placeholder {
    color: #9a8fae;
    -webkit-text-fill-color: #9a8fae;
  }
.profile-input::placeholder {
    color: #9a8fae;
    -webkit-text-fill-color: #9a8fae;
  }
.profile-input:focus {
    outline: none;
    border-color: oklch(0.65 0.22 295);
    box-shadow: 0 0 0 2px oklch(0.65 0.22 295 / 0.3);
  }
/* Certificate — formal "Verified by Stargazing Tips" document. Deep navy
     body, double border (outer amber-gold, inner purple), embossed seal with
     a telescope/star motif, amber-gold certificate number. Designed to
     survive html2canvas PDF/PNG export — opaque hex backgrounds, no
     mix-blend-mode, no semi-transparent bg-card layers. */
.cert-frame {
    position: relative;
    background: oklch(var(--cert-bg));
    border: 1px solid oklch(var(--cert-border-outer));
    border-radius: 0.5rem;
    padding: 0.5rem;
    color-scheme: dark;
    color: #f3f0f7;
    box-shadow: var(--tw-shadow-cert-frame);
    overflow: hidden;
  }
.cert-inner {
    background: oklch(var(--cert-bg-inner));
    border: 1px solid oklch(var(--cert-border-inner));
    border-radius: 0.25rem;
    padding: clamp(1rem, 3vw, 1.75rem);
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
  }
.cert-header {
    color: oklch(var(--cert-header));
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    overflow-wrap: break-word;
    word-break: break-word;
  }
.cert-body {
    color: oklch(var(--cert-body));
    font-family: var(--font-body);
    overflow-wrap: break-word;
    word-break: break-word;
  }
.cert-label {
    color: oklch(var(--cert-label));
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
.cert-number {
    color: oklch(var(--cert-number));
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.06em;
  }
.cert-seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    max-width: 3.5rem;
    max-height: 3.5rem;
    flex: 0 0 auto;
    border-radius: 9999px;
    background: oklch(var(--cert-bg));
    color: oklch(var(--cert-seal));
    box-shadow: var(--tw-shadow-cert-seal);
    animation: cert-seal-pulse 4s ease-in-out infinite;
  }
.cert-verified {
    color: oklch(var(--cert-verified));
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.04em;
  }
.cert-photo-frame {
    background: oklch(var(--cert-photo-frame));
    border: 1px solid oklch(var(--cert-border-inner));
    border-radius: 0.25rem;
    overflow: hidden;
    max-width: 100%;
    max-height: 40vh;
    box-sizing: border-box;
  }
.cert-photo-frame img {
    width: 100%;
    height: 100%;
    max-height: 40vh;
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
  }
.cert-qr-frame {
    background: oklch(var(--cert-qr-frame));
    border-radius: 0.25rem;
    padding: 0.25rem;
    display: inline-block;
    max-width: 100%;
    max-height: 7rem;
    box-sizing: border-box;
  }
/* Photo upload / preview UI — drop zone, thumbnail, progress bar.
     Mirrors the chat-attach pattern; purple accent for the active drag state. */
.photo-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    background: oklch(var(--photo-dropzone));
    border: 2px dashed oklch(var(--photo-dropzone-border));
    border-radius: 0.75rem;
    color: oklch(0.7 0.02 270);
    color-scheme: dark;
    cursor: pointer;
    transition: border-color 150ms, background 150ms, color 150ms;
  }
.photo-dropzone:hover {
    border-color: oklch(0.5 0.12 295 / 0.7);
    color: oklch(0.85 0.01 270);
  }
.photo-dropzone-active {
    background: oklch(var(--photo-dropzone-active));
    border-color: oklch(var(--photo-dropzone-active-border));
    color: #f3f0f7;
    animation: photo-drop-pulse 1.8s ease-in-out infinite;
  }
.photo-thumb {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: 5rem;
    height: 5rem;
    background: oklch(var(--photo-thumb));
    border: 1px solid oklch(var(--photo-thumb-border));
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: var(--tw-shadow-photo-thumb);
    color-scheme: dark;
  }
.photo-thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
.photo-thumb-remove {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    background: rgba(20, 18, 31, 0.85);
    border: 1px solid oklch(var(--photo-thumb-border));
    border-radius: 9999px;
    color: #f3f0f7;
    cursor: pointer;
    transition: border-color 150ms, color 150ms, background 150ms;
  }
.photo-thumb-remove:hover {
    background: oklch(0.65 0.22 295);
    border-color: oklch(0.65 0.22 295);
    color: oklch(0.14 0.018 270);
  }
.photo-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.25rem;
    background: oklch(var(--photo-progress-track));
    overflow: hidden;
  }
.photo-progress::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--photo-upload-progress, 0%);
    background: oklch(var(--photo-progress-fill));
    transition: width 200ms ease-out;
  }
.\[--cell-size\:--spacing\(8\)\] {
  --cell-size: var(--spacing(8));
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/SpaceGrotesk.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/DMSans.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMono.woff2") format("woff2");
  font-display: swap;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgb(30 41 59 / 0.5);
}

::-webkit-scrollbar-thumb {
  background: rgb(147 51 234 / 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(147 51 234 / 0.7);
}

/* Focus styles for accessibility */
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid rgb(147 51 234);
  outline-offset: 2px;
}

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

:root {
  --background: 0.14 0.018 270;
  --foreground: 0.94 0.015 270;
  --card: 0.18 0.02 270;
  --popover: 0.18 0.02 270;
  --primary: 275 85% 60%;
  --primary-foreground: 270 30% 98%;
  --secondary: 270 25% 18%;
  --secondary-foreground: 270 30% 96%;
  --muted: 0.28 0.018 270;
  --muted-foreground: 0.58 0.01 270;
  --accent: 0.72 0.2 285;
  --accent-foreground: 0.14 0.018 270;
  --destructive: 0.56 0.21 25;
  --destructive-foreground: 0.95 0.015 25;
  --success: 0.65 0.18 145;
  --warning: 0.75 0.15 85;
  --border: 0.32 0.02 270;
  --input: 0.32 0.02 270;
  --ring: 0.72 0.2 285;
  --font-display: "Space Grotesk";
  --font-body: "DM Sans";
  --font-mono: "Geist Mono";

  /* Star Map chart tokens — circular sky chart */
  --chart-sky: 0.1 0.025 270;
  --chart-sky-foreground: 0.96 0.012 270;
  --chart-grid: 0.4 0.03 285;
  --chart-zenith: 0.72 0.2 285;
  --chart-cardinal: 0.92 0.04 60;
  --chart-constellation: 0.7 0.12 200;
  --chart-constellation-line: 0.5 0.08 200;
  --chart-star-bright: 0.98 0.015 60;
  --chart-star-mid: 0.85 0.04 270;
  --chart-star-dim: 0.55 0.02 270;
  --chart-label: 0.78 0.03 285;
  --chart-ring: 0.45 0.04 285;

  /* Observation Log tokens — entry cards, rating, forms */
  --log-card: 0.2 0.025 270;
  --log-card-hover: 0.24 0.03 285;
  --log-entry-border: 0.35 0.025 285;
  --log-rating-active: 0.82 0.18 85;
  --log-rating-idle: 0.4 0.02 270;
  --log-input: 0.16 0.02 270;
  --log-input-border: 0.38 0.03 285;
  --log-detail: 0.22 0.028 270;
  --log-meta: 0.6 0.015 270;
  --log-accent-bar: 0.65 0.22 295;

  /* Astronomy Calendar tokens — month grid + event badges */
  --cal-grid-bg: 0.16 0.02 270;
  --cal-cell: 0.18 0.022 270;
  --cal-cell-hover: 0.22 0.028 285;
  --cal-cell-border: 0.3 0.025 285;
  --cal-cell-today-ring: 0.65 0.22 295;
  --cal-cell-today-bg: 0.24 0.05 295;
  --cal-header-bg: 0.2 0.025 270;
  --cal-header-border: 0.35 0.03 285;
  --cal-weekday: 0.62 0.02 270;
  --cal-date: 0.9 0.012 270;
  --cal-date-muted: 0.42 0.015 270;
  --cal-nav-btn: 0.25 0.02 270;
  --cal-nav-btn-hover: 0.32 0.04 295;
  --cal-nav-btn-border: 0.38 0.03 285;
  --cal-legend-bg: 0.2 0.025 270;
  --cal-legend-border: 0.35 0.025 285;
  --cal-legend-label: 0.78 0.015 270;

  /* Event-type badge tokens — each tuned for AA contrast on cal-cell (L≈0.18) */
  --cal-event-moon: 0.82 0.04 240;
  --cal-event-moon-soft: 0.3 0.03 240;
  --cal-event-meteor: 0.82 0.16 75;
  --cal-event-meteor-soft: 0.3 0.06 75;
  --cal-event-eclipse: 0.62 0.2 25;
  --cal-event-eclipse-soft: 0.28 0.08 25;
  --cal-event-opposition: 0.78 0.14 200;
  --cal-event-opposition-soft: 0.28 0.05 200;
  --cal-event-conjunction: 0.78 0.12 295;
  --cal-event-conjunction-soft: 0.3 0.05 295;
  --cal-event-season: 0.75 0.15 165;
  --cal-event-season-soft: 0.28 0.06 165;

  /* Newsletter tokens — issue cards, archive, subscribe, sources.
     Surfaces echo the chat and cal opaque dark navy palette; the week label
     reuses the cal-event-meteor amber-gold (0.82 0.16 75) so weekly issues
     feel like a meteor-shower entry on the calendar. The accent bar carries
     the app's purple 295 accent. */
  --news-card: 0.2 0.025 270;
  --news-archive-card: 0.18 0.022 270;
  --news-issue-detail: 0.22 0.028 270;
  --news-week-label: 0.82 0.16 75;
  --news-subscribe-input: 0.16 0.02 270;
  --news-source-link: 0.7 0.12 200;
  --news-accent-bar: 0.65 0.22 295;
  --news-empty: 0.28 0.018 270;

  /* Stargazing Passport tokens — checklist cards, achievements, profile.
     Surfaces echo the opaque dark navy palette (#14121f / #1a1530 / #241a33)
     used by chat/cal/log so they survive the bright .bg-space-gradient root.
     Completed states reuse the amber-gold 85° rating hue so a spotted object
     reads like a 5-star observation; locked/empty states stay muted grey-purple.
     The accent bar carries the app's purple 295 accent. */
  --pass-card: 0.2 0.025 270;
  --pass-card-done: 0.22 0.04 295;
  --pass-card-border: 0.35 0.025 285;
  --pass-card-border-done: 0.5 0.12 295;
  --pass-accent-bar: 0.65 0.22 295;
  --pass-object-icon: 0.72 0.2 285;
  --pass-object-icon-done: 0.82 0.18 85;
  --pass-category-label: 0.6 0.015 270;
  --pass-status-done: 0.82 0.18 85;
  --pass-status-done-bg: 0.3 0.06 85;
  --pass-status-idle: 0.55 0.02 270;
  --pass-status-idle-bg: 0.24 0.02 270;
  --pass-status-idle-border: 0.4 0.02 270;
  --pass-add-input: 0.16 0.02 270;
  --pass-add-input-border: 0.38 0.03 285;

  /* Achievement badge tokens — earned vs locked medals.
     Earned badges glow in their own hue (set per-tier via --badge-glow);
     locked badges are desaturated with a dashed ring. */
  --ach-earned-ring: 0.72 0.2 285;
  --ach-earned-glow: 0.65 0.22 295;
  --ach-earned-fg: 0.96 0.012 270;
  --ach-locked-ring: 0.38 0.02 270;
  --ach-locked-fg: 0.5 0.015 270;
  --ach-locked-bg: 0.18 0.015 270;
  --ach-name: 0.88 0.01 270;
  --ach-name-locked: 0.5 0.015 270;
  --ach-desc: 0.62 0.015 270;

  /* Certificate tokens — formal "Verified by Stargazing Tips" document.
     Deep navy body, double border (outer amber-gold, inner purple), embossed
     seal, amber-gold certificate number. Mirrors the certificate's official
     collectible-award feel. */
  --cert-bg: 0.14 0.018 270;
  --cert-bg-inner: 0.17 0.022 270;
  --cert-border-outer: 0.82 0.16 85;
  --cert-border-inner: 0.65 0.22 295;
  --cert-header: 0.94 0.012 270;
  --cert-body: 0.86 0.01 270;
  --cert-label: 0.6 0.015 270;
  --cert-number: 0.82 0.18 85;
  --cert-seal: 0.82 0.16 85;
  --cert-seal-ring: 0.65 0.22 295;
  --cert-verified: 0.82 0.16 85;
  --cert-photo-frame: 0.24 0.03 285;
  --cert-qr-frame: 0.96 0.012 270;

  /* Observer profile card — set-once name + telescope default.
     Mirrors the passport card surface with a purple accent bar. */
  --profile-card: 0.2 0.025 270;
  --profile-card-border: 0.35 0.025 285;
  --profile-accent-bar: 0.65 0.22 295;
  --profile-name: 0.94 0.012 270;
  --profile-meta: 0.6 0.015 270;
  --profile-input: 0.16 0.02 270;
  --profile-input-border: 0.38 0.03 285;

  /* Photo upload / preview UI — reuses the chat-attach pattern.
     Drop zone, thumbnail, progress bar; purple accent for the active state. */
  --photo-dropzone: 0.18 0.02 270;
  --photo-dropzone-border: 0.38 0.03 285;
  --photo-dropzone-active: 0.24 0.05 295;
  --photo-dropzone-active-border: 0.65 0.22 295;
  --photo-thumb: 0.24 0.03 285;
  --photo-thumb-border: 0.4 0.04 295;
  --photo-progress-track: 0.32 0.02 270;
  --photo-progress-fill: 0.65 0.22 295;
}

.selection\:bg-primary *::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:bg-primary *::selection {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:text-primary-foreground *::-moz-selection {
  --tw-text-opacity: 1;
  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}

.selection\:text-primary-foreground *::selection {
  --tw-text-opacity: 1;
  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}

.selection\:bg-primary::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}

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

.selection\:text-primary-foreground::-moz-selection {
  --tw-text-opacity: 1;
  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}

.selection\:text-primary-foreground::selection {
  --tw-text-opacity: 1;
  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}

.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 {
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}

.placeholder\:text-muted-foreground::-moz-placeholder {
  --tw-text-opacity: 1;
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

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

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

.placeholder\:text-slate-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / 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;
}

.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\:border-indigo-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(129 140 248 / var(--tw-border-opacity, 1));
}

.hover\:border-indigo-500\/40:hover {
  border-color: rgb(99 102 241 / 0.4);
}

.hover\:border-indigo-500\/50:hover {
  border-color: rgb(99 102 241 / 0.5);
}

.hover\:border-purple-400\/40:hover {
  border-color: rgb(192 132 252 / 0.4);
}

.hover\:border-purple-500\/30:hover {
  border-color: rgb(168 85 247 / 0.3);
}

.hover\:border-purple-500\/40:hover {
  border-color: rgb(168 85 247 / 0.4);
}

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

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

.hover\:bg-amber-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}

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

.hover\:bg-destructive\/90:hover {
  background-color: hsl(var(--destructive) / 0.9);
}

.hover\:bg-emerald-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}

.hover\:bg-indigo-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}

.hover\:bg-indigo-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1));
}

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

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

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

.hover\:bg-primary\/90:hover {
  background-color: hsl(var(--primary) / 0.9);
}

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

.hover\:bg-purple-500\/20:hover {
  background-color: rgb(168 85 247 / 0.2);
}

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

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

.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-red-800\/60:hover {
  background-color: rgb(153 27 27 / 0.6);
}

.hover\:bg-red-900\/30:hover {
  background-color: rgb(127 29 29 / 0.3);
}

.hover\:bg-rose-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
}

.hover\:bg-rose-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(190 18 60 / var(--tw-bg-opacity, 1));
}

.hover\:bg-secondary\/80:hover {
  background-color: hsl(var(--secondary) / 0.8);
}

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

.hover\:bg-slate-600\/50:hover {
  background-color: rgb(71 85 105 / 0.5);
}

.hover\:bg-slate-600\/60:hover {
  background-color: rgb(71 85 105 / 0.6);
}

.hover\:bg-slate-700\/30:hover {
  background-color: rgb(51 65 85 / 0.3);
}

.hover\:bg-slate-700\/40:hover {
  background-color: rgb(51 65 85 / 0.4);
}

.hover\:bg-slate-700\/50:hover {
  background-color: rgb(51 65 85 / 0.5);
}

.hover\:bg-slate-700\/60:hover {
  background-color: rgb(51 65 85 / 0.6);
}

.hover\:bg-slate-700\/80:hover {
  background-color: rgb(51 65 85 / 0.8);
}

.hover\:bg-slate-800\/70:hover {
  background-color: rgb(30 41 59 / 0.7);
}

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

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

.hover\:text-accent-foreground:hover {
  --tw-text-opacity: 1;
  color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
}

.hover\:text-amber-100:hover {
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}

.hover\:text-foreground:hover {
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}

.hover\:text-indigo-200:hover {
  --tw-text-opacity: 1;
  color: rgb(199 210 254 / var(--tw-text-opacity, 1));
}

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

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

.hover\:text-purple-200:hover {
  --tw-text-opacity: 1;
  color: rgb(233 213 255 / var(--tw-text-opacity, 1));
}

.hover\:text-purple-300:hover {
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / 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-red-300:hover {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

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

.hover\:text-slate-200:hover {
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}

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

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

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.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-lg:hover {
  --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);
}

.hover\:shadow-xl:hover {
  --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);
}

.hover\:shadow-purple-500\/10:hover {
  --tw-shadow-color: rgb(168 85 247 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}

.hover\:ring-1: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(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);
}

.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\:ring-purple-500\/40:hover {
  --tw-ring-color: rgb(168 85 247 / 0.4);
}

.hover\:drop-shadow-\[0_0_30px_rgba\(147\2c 51\2c 234\2c 0\.7\)\]:hover {
  --tw-drop-shadow: drop-shadow(0 0 30px rgba(147,51,234,0.7));
  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);
}

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

.focus\:border-indigo-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(129 140 248 / var(--tw-border-opacity, 1));
}

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

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

.focus\:text-accent-foreground:focus {
  --tw-text-opacity: 1;
  color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
}

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

.focus\:ring-1: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(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\: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-indigo-400\/50:focus {
  --tw-ring-color: rgb(129 140 248 / 0.5);
}

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

.focus\:ring-purple-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity, 1));
}

.focus\:ring-ring:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: hsl(var(--ring) / var(--tw-ring-opacity, 1));
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.focus\:ring-offset-slate-900:focus {
  --tw-ring-offset-color: #0f172a;
}

.focus-visible\:z-10:focus-visible {
  z-index: 10;
}

.focus-visible\:border-ring:focus-visible {
  --tw-border-opacity: 1;
  border-color: hsl(var(--ring) / var(--tw-border-opacity, 1));
}

.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-primary:focus-visible {
  outline-color: hsl(var(--primary) / 1);
}

.focus-visible\:outline-purple-400:focus-visible {
  outline-color: #c084fc;
}

.focus-visible\:outline-red-400:focus-visible {
  outline-color: #f87171;
}

.focus-visible\:outline-ring:focus-visible {
  outline-color: hsl(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-destructive\/20:focus-visible {
  --tw-ring-color: hsl(var(--destructive) / 0.2);
}

.focus-visible\:ring-ring:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: hsl(var(--ring) / var(--tw-ring-opacity, 1));
}

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

.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}

.active\:bg-purple-600:active {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}

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

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

.disabled\:bg-slate-700:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

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

.disabled\:opacity-30:disabled {
  opacity: 0.3;
}

.disabled\:opacity-40:disabled {
  opacity: 0.4;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:bg-indigo-600\/30 {
  background-color: rgb(79 70 229 / 0.3);
}

.group:hover .group-hover\:text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

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

.group\/menu-item:hover .group-hover\/menu-item\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

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

.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: calc(var(--radius) + 4px);
  border-top-right-radius: calc(var(--radius) + 4px);
}

.data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction="top"] {
  border-bottom-right-radius: calc(var(--radius) + 4px);
  border-bottom-left-radius: calc(var(--radius) + 4px);
}

.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: hsl(var(--ring) / var(--tw-border-opacity, 1));
}

.data-\[state\=checked\]\:border-primary[data-state="checked"] {
  --tw-border-opacity: 1;
  border-color: hsl(var(--primary) / var(--tw-border-opacity, 1));
}

.data-\[active\=true\]\:bg-accent\/50[data-active="true"] {
  background-color: hsl(var(--accent) / 0.5);
}

.data-\[range-end\=true\]\:bg-primary[data-range-end="true"] {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[range-middle\=true\]\:bg-accent[data-range-middle="true"] {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[range-start\=true\]\:bg-primary[data-range-start="true"] {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"] {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[selected\=true\]\:bg-accent[data-selected="true"] {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=active\]\:bg-background[data-state="active"] {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
}

.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[state\=on\]\:bg-accent[data-state="on"] {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:bg-accent[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
  background-color: hsl(var(--accent) / 0.5);
}

.data-\[state\=open\]\:bg-secondary[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--secondary) / var(--tw-bg-opacity, 1));
}

.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
}

.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--input) / var(--tw-bg-opacity, 1));
}

.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"] {
  --tw-text-opacity: 1;
  color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
}

.data-\[error\=true\]\:text-destructive[data-error="true"] {
  --tw-text-opacity: 1;
  color: hsl(var(--destructive) / var(--tw-text-opacity, 1));
}

.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  --tw-text-opacity: 1;
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.data-\[range-end\=true\]\:text-primary-foreground[data-range-end="true"] {
  --tw-text-opacity: 1;
  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}

.data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle="true"] {
  --tw-text-opacity: 1;
  color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
}

.data-\[range-start\=true\]\:text-primary-foreground[data-range-start="true"] {
  --tw-text-opacity: 1;
  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}

.data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single="true"] {
  --tw-text-opacity: 1;
  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}

.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
  --tw-text-opacity: 1;
  color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
}

.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  --tw-text-opacity: 1;
  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}

.data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
  --tw-text-opacity: 1;
  color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
}

.data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
  --tw-text-opacity: 1;
  color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
}

.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  --tw-text-opacity: 1;
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: hsl(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-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-\[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: hsl(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-\[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: hsl(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: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[active\=true\]\:focus\:bg-accent:focus[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[variant\=destructive\]\:focus\:bg-destructive\/10:focus[data-variant="destructive"] {
  background-color: hsl(var(--destructive) / 0.1);
}

.data-\[variant\=destructive\]\:focus\:text-destructive:focus[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: hsl(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: calc(var(--radius) + 4px);
}

.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: hsl(var(--ring) / var(--tw-border-opacity, 1));
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:bg-popover {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--popover) / var(--tw-bg-opacity, 1));
}

.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[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: hsl(var(--ring) / 0.5);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:duration-200 {
  transition-duration: 200ms;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:after\:left-full::after {
  content: var(--tw-content);
  left: 100%;
}

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

.dark\:border-input:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
}

.dark\:bg-destructive\/60:is(.dark *) {
  background-color: hsl(var(--destructive) / 0.6);
}

.dark\:bg-input\/30:is(.dark *) {
  background-color: hsl(var(--input) / 0.3);
}

.dark\:text-muted-foreground:is(.dark *) {
  --tw-text-opacity: 1;
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.dark\:hover\:bg-accent\/50:hover:is(.dark *) {
  background-color: hsl(var(--accent) / 0.5);
}

.dark\:hover\:bg-input\/50:hover:is(.dark *) {
  background-color: hsl(var(--input) / 0.5);
}

.dark\:hover\:text-accent-foreground:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
}

.dark\:focus-visible\:ring-destructive\/40:focus-visible:is(.dark *) {
  --tw-ring-color: hsl(var(--destructive) / 0.4);
}

.dark\:data-\[state\=active\]\:border-input[data-state="active"]:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
}

.dark\:data-\[state\=active\]\:bg-input\/30[data-state="active"]:is(.dark *) {
  background-color: hsl(var(--input) / 0.3);
}

.dark\:data-\[state\=checked\]\:bg-primary[data-state="checked"]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}

.dark\:data-\[state\=checked\]\:bg-primary-foreground[data-state="checked"]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary-foreground) / var(--tw-bg-opacity, 1));
}

.dark\:data-\[state\=unchecked\]\:bg-foreground[data-state="unchecked"]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--foreground) / var(--tw-bg-opacity, 1));
}

.dark\:data-\[state\=unchecked\]\:bg-input\/80[data-state="unchecked"]:is(.dark *) {
  background-color: hsl(var(--input) / 0.8);
}

.dark\:data-\[state\=active\]\:text-foreground[data-state="active"]:is(.dark *) {
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}

.dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:focus[data-variant="destructive"]:is(.dark *) {
  background-color: hsl(var(--destructive) / 0.2);
}

@media (min-width: 640px) {

  .sm\:order-none {
    order: 0;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:h-20 {
    height: 5rem;
  }

  .sm\:h-32 {
    height: 8rem;
  }

  .sm\:h-40 {
    height: 10rem;
  }

  .sm\:h-56 {
    height: 14rem;
  }

  .sm\:h-64 {
    height: 16rem;
  }

  .sm\:h-\[calc\(100vh-240px\)\] {
    height: calc(100vh - 240px);
  }

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

  .sm\:w-20 {
    width: 5rem;
  }

  .sm\:w-40 {
    width: 10rem;
  }

  .sm\:w-56 {
    width: 14rem;
  }

  .sm\:w-64 {
    width: 16rem;
  }

  .sm\:w-72 {
    width: 18rem;
  }

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

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

  .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\:flex-row {
    flex-direction: row;
  }

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

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

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

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

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

  .sm\:gap-6 {
    gap: 1.5rem;
  }

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

  .sm\:p-4 {
    padding: 1rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

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

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

  .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-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

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

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

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

  .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\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:h-40 {
    height: 10rem;
  }

  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
    width: var(--radix-navigation-menu-viewport-width);
  }

  .md\:w-auto {
    width: auto;
  }

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

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

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

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

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

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

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

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

.\[\&\: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: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.\[\&\>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: hsl(var(--muted-foreground) / 1);
}

.\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke='#ccc'] {
  stroke: hsl(var(--border) / 0.5);
}

.\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor {
  stroke: hsl(var(--border) / 1);
}

.\[\&_\.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: hsl(var(--border) / 1);
}

.\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector {
  fill: hsl(var(--muted) / 1);
}

.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
  fill: hsl(var(--muted) / 1);
}

.\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke='#ccc'] {
  stroke: hsl(var(--border) / 1);
}

.\[\&_\.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: hsl(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;
}

.\[\&_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: hsl(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: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}

a.\[a\&\]\:hover\:bg-destructive\/90:hover {
  background-color: hsl(var(--destructive) / 0.9);
}

a.\[a\&\]\:hover\:bg-primary\/90:hover {
  background-color: hsl(var(--primary) / 0.9);
}

a.\[a\&\]\:hover\:bg-secondary\/90:hover {
  background-color: hsl(var(--secondary) / 0.9);
}

a.\[a\&\]\:hover\:text-accent-foreground:hover {
  --tw-text-opacity: 1;
  color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
}