@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap";
/* [project]/src/app/globals.css [app-client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: rgba(0, 0, 0, 0);
      --tw-gradient-via: rgba(0, 0, 0, 0);
      --tw-gradient-to: rgba(0, 0, 0, 0);
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-tracking: initial;
      --tw-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-content: "";
    }

    ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: rgba(0, 0, 0, 0);
      --tw-gradient-via: rgba(0, 0, 0, 0);
      --tw-gradient-to: rgba(0, 0, 0, 0);
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-tracking: initial;
      --tw-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-content: "";
    }
  }
}

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

.collapse {
  visibility: collapse;
}

.visible {
  visibility: visible;
}

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

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.fixed\! {
  position: fixed !important;
}

.relative {
  position: relative;
}

.static {
  position: static;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
}

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

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

.top-full {
  top: 100%;
}

.right-\[-10\%\] {
  right: -10%;
}

.bottom-\[20\%\] {
  bottom: 20%;
}

.bottom-full {
  bottom: 100%;
}

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

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

.isolate {
  isolation: isolate;
}

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

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

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

.float-left {
  float: left;
}

.container {
  width: 100%;
}

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

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

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

.block {
  display: block;
}

.contents {
  display: contents;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.inline {
  display: inline;
}

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

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

.list-item {
  display: list-item;
}

.table {
  display: table;
}

.h-\[30\%\] {
  height: 30%;
}

.h-\[40\%\] {
  height: 40%;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

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

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

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

.w-full {
  width: 100%;
}

.flex-1 {
  flex: 1;
}

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

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

.shrink {
  flex-shrink: 1;
}

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

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

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

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

.transform {
  transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
}

.cursor-default {
  cursor: default;
}

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

.cursor-pointer {
  cursor: pointer;
}

.resize {
  resize: both;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.overflow-hidden {
  overflow: hidden;
}

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

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

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

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

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

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

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

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

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

.rounded-r-full {
  border-top-right-radius: 3.40282e38px;
  border-bottom-right-radius: 3.40282e38px;
  border-top-right-radius: var(--radius-full);
  border-bottom-right-radius: var(--radius-full);
}

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

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

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

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

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

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

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

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

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

.border-error\/20 {
  border-color: rgba(255, 113, 108, .2);
}

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

.border-outline-variant\/10 {
  border-color: rgba(72, 72, 72, .1);
}

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

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

.border-primary\/20 {
  border-color: rgba(164, 255, 185, .2);
}

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

.border-primary\/50 {
  border-color: rgba(164, 255, 185, .5);
}

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

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

.border-secondary\/50 {
  border-color: rgba(0, 210, 253, .5);
}

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

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

.border-transparent {
  border-color: rgba(0, 0, 0, 0);
}

.bg-\[\#0e0e0e\]\/80 {
  background-color: rgba(14, 14, 14, .8);
  background-color: color(display-p3 .0549019 .054902 .054902 / .8);
  background-color: lab(3.96677% -.00000745058 0 / .8);
}

.bg-\[\#1f2020\]\/60 {
  background-color: rgba(31, 32, 32, .6);
  background-color: color(display-p3 .122274 .125362 .125424 / .6);
  background-color: lab(12.142% -.484452 -.172144 / .6);
}

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

.bg-error\/10 {
  background-color: rgba(255, 113, 108, .1);
}

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

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

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

.bg-outline-variant\/50 {
  background-color: rgba(72, 72, 72, .5);
}

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

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

.bg-primary\/5 {
  background-color: rgba(164, 255, 185, .05);
}

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

.bg-primary\/10 {
  background-color: rgba(164, 255, 185, .1);
}

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

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

.bg-secondary\/5 {
  background-color: rgba(0, 210, 253, .05);
}

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

.bg-secondary\/10 {
  background-color: rgba(0, 210, 253, .1);
}

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

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

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

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

.bg-transparent {
  background-color: rgba(0, 0, 0, 0);
}

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

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

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

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

.from-\[\#00C5B8\] {
  --tw-gradient-from: #00c5b8;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-primary {
  --tw-gradient-from: var(--color-primary);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.from-surface-container-low {
  --tw-gradient-from: var(--color-surface-container-low);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.via-tertiary {
  --tw-gradient-via: var(--color-tertiary);
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-via-stops);
}

.to-\[\#00A99D\] {
  --tw-gradient-to: #00a99d;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-primary-container {
  --tw-gradient-to: var(--color-primary-container);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-surface {
  --tw-gradient-to: var(--color-surface);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

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

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

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

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

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

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

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

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

.text-\[\#acabaa\] {
  color: #acabaa;
}

.text-error {
  color: var(--color-error);
}

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

.text-on-surface {
  color: var(--color-on-surface);
}

.text-on-surface-variant {
  color: var(--color-on-surface-variant);
}

.text-on-surface-variant\/40 {
  color: rgba(172, 171, 170, .4);
}

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

.text-on-surface-variant\/60 {
  color: rgba(172, 171, 170, .6);
}

@supports (color: color-mix(in lab, red, red)) {
  .text-on-surface-variant\/60 {
    color: color-mix(in oklab, var(--color-on-surface-variant) 60%, transparent);
  }
}

.text-outline-variant {
  color: var(--color-outline-variant);
}

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

.text-primary\/20 {
  color: rgba(164, 255, 185, .2);
}

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

.text-tertiary {
  color: var(--color-tertiary);
}

.capitalize {
  text-transform: capitalize;
}

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.line-through {
  -webkit-text-decoration-line: line-through;
  text-decoration-line: line-through;
}

.overline {
  -webkit-text-decoration-line: overline;
  text-decoration-line: overline;
}

.underline {
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
}

.opacity-0 {
  opacity: 0;
}

.opacity-25 {
  opacity: .25;
}

.opacity-50 {
  opacity: .5;
}

.opacity-60 {
  opacity: .6;
}

.opacity-75 {
  opacity: .75;
}

.shadow-\[0_-8px_32px_rgba\(0\,0\,0\,0\.5\)\] {
  --tw-shadow: 0 -8px 32px var(--tw-shadow-color, rgba(0, 0, 0, .5));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-\[0_0_10px_rgba\(0\,255\,136\,0\.4\)\] {
  --tw-shadow: 0 0 10px var(--tw-shadow-color, rgba(0, 255, 136, .4));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-\[0_0_10px_rgba\(164\,255\,185\,0\.3\)\] {
  --tw-shadow: 0 0 10px var(--tw-shadow-color, rgba(164, 255, 185, .3));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-\[0_0_15px_rgba\(0\,255\,136\,0\.1\)\] {
  --tw-shadow: 0 0 15px var(--tw-shadow-color, rgba(0, 255, 136, .1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-\[0_0_25px_rgba\(0\,255\,136\,0\.4\)\] {
  --tw-shadow: 0 0 25px var(--tw-shadow-color, rgba(0, 255, 136, .4));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-\[0_12px_32px_rgba\(0\,255\,136\,0\.3\)\] {
  --tw-shadow: 0 12px 32px var(--tw-shadow-color, rgba(0, 255, 136, .3));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

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

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

.blur-\[100px\] {
  --tw-blur: blur(100px);
  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-\[120px\] {
  --tw-blur: blur(120px);
  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_8px_rgba\(0\,255\,136\,0\.5\)\] {
  --tw-drop-shadow-size: drop-shadow(0 0 8px var(--tw-drop-shadow-color, rgba(0, 255, 136, .5)));
  --tw-drop-shadow: var(--tw-drop-shadow-size);
  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-\[20px\] {
  --tw-backdrop-blur: blur(20px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
}

.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
}

.transition {
  transition-property: color, background-color, border-color, outline-color, -webkit-text-decoration-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}

.transition\! {
  transition-property: color, background-color, border-color, outline-color, -webkit-text-decoration-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events !important;
  transition-timing-function: var(--tw-ease, ease) !important;
  transition-duration: var(--tw-duration, 0s) !important;
}

.transition-all {
  transition-property: all;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}

.transition-colors {
  transition-property: color, background-color, border-color, outline-color, -webkit-text-decoration-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}

.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}

.transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}

.duration-150 {
  --tw-duration: .15s;
  transition-duration: .15s;
}

.duration-200 {
  --tw-duration: .2s;
  transition-duration: .2s;
}

.duration-300 {
  --tw-duration: .3s;
  transition-duration: .3s;
}

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

.group-focus-within\:text-primary:is(:where(.group):focus-within *) {
  color: var(--color-primary);
}

@media (hover: hover) {
  .group-hover\:opacity-100:is(:where(.group):hover *) {
    opacity: 1;
  }
}

.peer-focus\:outline-none:is(:where(.peer):focus ~ *) {
  --tw-outline-style: none;
  outline-style: none;
}

.placeholder\:text-on-surface-variant::placeholder {
  color: var(--color-on-surface-variant);
}

.placeholder\:text-on-surface-variant\/50::-moz-placeholder {
  color: rgba(172, 171, 170, .5);
}

@supports (color: color-mix(in lab, red, red)) {
  .placeholder\:text-on-surface-variant\/50::-moz-placeholder {
    color: color-mix(in oklab, var(--color-on-surface-variant) 50%, transparent);
  }
}

.placeholder\:text-on-surface-variant\/50::placeholder {
  color: rgba(172, 171, 170, .5);
}

@supports (color: color-mix(in lab, red, red)) {
  .placeholder\:text-on-surface-variant\/50::placeholder {
    color: color-mix(in oklab, var(--color-on-surface-variant) 50%, transparent);
  }
}

.after\:absolute:after {
  content: var(--tw-content);
  position: absolute;
}

.after\:top-\[2px\]:after {
  content: var(--tw-content);
  top: 2px;
}

.after\:left-\[2px\]:after {
  content: var(--tw-content);
  left: 2px;
}

.after\:rounded-full:after {
  content: var(--tw-content);
  border-radius: 3.40282e38px;
}

.after\:rounded-full:after {
  content: var(--tw-content);
  border-radius: var(--radius-full);
}

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

.after\:transition-all:after {
  content: var(--tw-content);
  transition-property: all;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}

.after\:content-\[\'\'\]:after {
  --tw-content: "";
  content: var(--tw-content);
}

.peer-checked\:after\:translate-x-full:is(:where(.peer):checked ~ *):after {
  content: var(--tw-content);
  --tw-translate-x: 100%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

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

@media (hover: hover) {
  .hover\:scale-105:hover {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
}

@media (hover: hover) {
  .hover\:scale-110:hover {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
}

@media (hover: hover) {
  .hover\:bg-error\/20:hover {
    background-color: rgba(255, 113, 108, .2);
  }

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

@media (hover: hover) {
  .hover\:bg-surface-container-highest:hover {
    background-color: var(--color-surface-container-highest);
  }
}

@media (hover: hover) {
  .hover\:bg-surface-container-low:hover {
    background-color: var(--color-surface-container-low);
  }
}

@media (hover: hover) {
  .hover\:text-primary:hover {
    color: var(--color-primary);
  }
}

.focus\:ring-1:focus {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

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

.focus\:ring-primary\/30:focus {
  --tw-ring-color: rgba(164, 255, 185, .3);
}

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

.focus\:ring-primary\/50:focus {
  --tw-ring-color: rgba(164, 255, 185, .5);
}

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

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}

.focus\:outline-none:focus {
  --tw-outline-style: none;
  outline-style: none;
}

.active\:scale-90:active {
  --tw-scale-x: 90%;
  --tw-scale-y: 90%;
  --tw-scale-z: 90%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}

.active\:scale-95:active {
  --tw-scale-x: 95%;
  --tw-scale-y: 95%;
  --tw-scale-z: 95%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}

.active\:scale-\[0\.97\]:active {
  scale: .97;
}

.active\:scale-\[0\.98\]:active {
  scale: .98;
}

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

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

@media (prefers-color-scheme: dark) {
  .dark\:bg-primary\/20 {
    background-color: rgba(164, 255, 185, .2);
  }

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

@media (prefers-color-scheme: dark) {
  .dark\:text-primary {
    color: var(--color-primary);
  }
}

:root, :host {
  --color-primary: #a4ffb9;
  --color-primary-container: #00fd87;
  --color-on-primary: #004621;
  --color-secondary: #00d2fd;
  --color-tertiary: #7ee6ff;
  --color-error: #ff716c;
  --color-surface: #0e0e0e;
  --color-surface-container-low: #131313;
  --color-surface-container-high: #1f2020;
  --color-surface-container-highest: #252626;
  --color-background: #0e0e0e;
  --color-on-surface: #fff;
  --color-on-surface-variant: #acabaa;
  --color-outline: #767575;
  --color-outline-variant: #484848;
  --radius-sm: .125rem;
  --radius-md: .25rem;
  --radius-lg: .5rem;
  --radius-xl: .75rem;
  --radius-2xl: 1rem;
  --radius-full: .75rem;
}

body {
  color: #fff;
  background-color: #0e0e0e;
  min-height: max(884px, 100dvh);
  font-family: Inter, sans-serif;
}

h1, h2, h3 {
  font-family: Space Grotesk, sans-serif;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 1.5rem;
}

.material-symbols-outlined.small {
  font-size: 1.25rem;
}

.material-symbols-outlined.large {
  font-size: 2rem;
}

.neon-glow-primary {
  box-shadow: 0 0 20px rgba(0, 255, 136, .15);
}

.neon-glow-button {
  box-shadow: 0 0 15px rgba(0, 255, 136, .4);
}

.glass-panel {
  -webkit-backdrop-filter: blur(20px);
  background: rgba(31, 32, 32, .6);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

::selection {
  background-color: rgba(164, 255, 185, .3);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .2);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .3);
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(0, 0, 0, 0);
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(0, 0, 0, 0);
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(0, 0, 0, 0);
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 rgba(0, 0, 0, 0);
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 rgba(0, 0, 0, 0);
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 rgba(0, 0, 0, 0);
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 rgba(0, 0, 0, 0);
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 rgba(0, 0, 0, 0);
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}

/* [project]/src/styles/modern-design-system.css [app-client] (css) */
:root {
  --brand-blue: #00a99d;
  --brand-blue-hover: #008b82;
  --brand-blue-light: rgba(0, 169, 157, .1);
  --brand-primary: #00c5b8;
  --success-green: #10b981;
  --success-green-light: rgba(16, 185, 129, .1);
  --warning-amber: #f59e0b;
  --warning-amber-light: rgba(245, 158, 11, .1);
  --error-red: #ef4444;
  --error-red-light: rgba(239, 68, 68, .1);
  --bg-light: #f3f4f6;
  --surface: #fff;
  --sidebar-bg: #fff;
  --border-light: #e5e7eb;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --bg-dark: #0d1117;
  --surface-dark: #161b22;
  --sidebar-dark: #161b22;
  --border-dark: #21262d;
  --text-primary-dark: #e5e7eb;
  --text-secondary-dark: #8d96a0;
  --hover-bg-light: #f9fafb;
  --hover-bg-dark: rgba(48, 54, 61, .36);
  --focus-ring: rgba(0, 169, 157, .2);
  --icon-blue-light: #3b82f6;
  --icon-blue-dark: #60a5fa;
  --icon-purple-light: #8b5cf6;
  --icon-purple-dark: #a78bfa;
  --icon-indigo-light: #6366f1;
  --icon-indigo-dark: #818cf8;
  --icon-bg-blue-light: rgba(59, 130, 246, .1);
  --icon-bg-blue-dark: rgba(59, 130, 246, .4);
  --icon-bg-purple-light: rgba(139, 92, 246, .1);
  --icon-bg-purple-dark: rgba(139, 92, 246, .4);
  --icon-bg-indigo-light: rgba(99, 102, 241, .1);
  --icon-bg-indigo-dark: rgba(99, 102, 241, .4);
  --status-available-light: rgba(16, 185, 129, .1);
  --status-available-dark: rgba(16, 185, 129, .2);
  --status-coming-soon-light: rgba(107, 114, 128, .1);
  --status-coming-soon-dark: rgba(107, 114, 128, .5);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);
  --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
  --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
  --shadow-large: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
  --shadow-card-dark: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1), inset 0px 1px 0px 0px rgba(255, 255, 255, .05);
  --shadow-button-dark: 0 10px 15px -3px rgba(0, 197, 184, .1), 0 4px 6px -4px rgba(0, 197, 184, .1);
  --spacing-xs: .25rem;
  --spacing-sm: .5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --radius-sm: .375rem;
  --radius-md: .5rem;
  --radius-lg: .75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --font-size-xs: .75rem;
  --font-size-sm: .875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --sidebar-width: 16rem;
  --header-height: 4rem;
  --background-light: #f3f4f6;
  --background-dark: #0d1117;
  --card-light: #fff;
  --card-dark: #161b22;
  --text-light: #1f2937;
  --text-dark: #e5e7eb;
  --text-light-secondary: #6b7280;
  --text-dark-secondary: #8d96a0;
  --primary: #00a99d;
  --primary-light: #e0f2f1;
  --primary-gradient: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-blue) 100%);
}

[data-theme="dark"] {
  --bg-light: #1f2937;
  --surface: #1f2937;
  --sidebar-bg: #1f2937;
  --border-light: #374151;
  --text-primary: #f9fafb;
  --text-secondary: #9ca3af;
  --text-tertiary: #6b7280;
  --hover-bg: #374151;
  --focus-ring: rgba(79, 70, 229, .3);
  --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, .3), 0 2px 4px -2px rgba(0, 0, 0, .2);
  --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -2px rgba(0, 0, 0, .3);
  --shadow-large: 0 20px 25px -5px rgba(0, 0, 0, .5), 0 10px 10px -5px rgba(0, 0, 0, .4);
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 1.5rem;
  transition: all .2s;
}

.material-symbols-outlined.active {
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.material-symbols-outlined.small {
  font-size: 1.25rem;
}

.material-symbols-outlined.large {
  font-size: 2rem;
}

.status-completed {
  color: var(--success-green);
  background-color: var(--success-green-light);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: .25rem .75rem;
}

.status-in-progress {
  color: var(--warning-amber);
  background-color: var(--warning-amber-light);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: .25rem .75rem;
}

.status-pending {
  color: var(--text-secondary);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  background-color: rgba(107, 114, 128, .1);
  padding: .25rem .75rem;
}

.priority-high {
  color: var(--priority-high);
}

.priority-medium {
  color: var(--priority-medium);
}

.priority-low {
  color: var(--priority-low);
}

.btn-primary {
  background-color: var(--brand-blue);
  color: #fff;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  border: none;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1.25rem;
  transition: all .2s;
  display: inline-flex;
}

.btn-primary:hover {
  background-color: var(--brand-blue-hover);
  box-shadow: var(--shadow-medium);
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  align-items: center;
  gap: .5rem;
  padding: .625rem 1.25rem;
  transition: all .2s;
  display: inline-flex;
}

.btn-secondary:hover {
  background-color: var(--hover-bg);
  border-color: var(--border-light);
  box-shadow: var(--shadow-medium);
  transform: translateY(-1px);
}

.input-field {
  background-color: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  width: 100%;
  padding: .5rem 1rem;
  transition: all .2s;
}

.input-field:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}

.input-field::placeholder {
  color: var(--text-tertiary);
}

.card {
  background-color: var(--surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: all .3s;
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-2px);
}

.card-header {
  padding: var(--spacing-xl);
  border-bottom: 1px solid var(--border-light);
}

.card-content {
  padding: var(--spacing-xl);
}

.table-container {
  background-color: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.table {
  border-collapse: collapse;
  width: 100%;
}

.table th {
  text-align: left;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
  background-color: var(--bg-light);
  padding: .75rem;
}

.table td {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
  padding: 1rem .75rem;
}

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

.table tr:last-child td {
  border-bottom: none;
}

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

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

.text-tertiary {
  color: var(--text-tertiary);
}

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

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

.shadow-soft {
  box-shadow: var(--shadow-soft);
}

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

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

.transition-all {
  transition: all .2s;
}

.priority-dot {
  border-radius: 50%;
  flex-shrink: 0;
  width: .75rem;
  height: .75rem;
}

.priority-dot.high {
  background-color: var(--error-red);
}

.priority-dot.medium {
  background-color: var(--warning-amber);
}

.priority-dot.low {
  background-color: var(--text-secondary);
}

.priority-dot.completed {
  background-color: var(--success-green);
}

.status-badge {
  border-radius: var(--radius-lg);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .05em;
  align-items: center;
  padding: .25rem .75rem;
  display: inline-flex;
}

.status-badge-available {
  color: var(--success-green);
  background-color: rgba(16, 185, 129, .1);
}

.status-badge-coming-soon {
  color: var(--text-secondary);
  background-color: rgba(107, 114, 128, .1);
}

.icon-container {
  border-radius: var(--radius-lg);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
}

.icon-container-primary {
  color: var(--brand-blue);
  background-color: rgba(0, 169, 157, .1);
}

.icon-container-blue {
  color: #3b82f6;
  background-color: rgba(59, 130, 246, .1);
}

.icon-container-purple {
  color: #8b5cf6;
  background-color: rgba(139, 92, 246, .1);
}

.icon-container-indigo {
  color: #6366f1;
  background-color: rgba(99, 102, 241, .1);
}

.list-item {
  border-radius: var(--radius-xl);
  background-color: var(--surface);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  transition: all .3s;
  display: flex;
}

.list-item:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-2px);
}

.section {
  margin-bottom: var(--spacing-2xl);
}

.section-header {
  margin-bottom: var(--spacing-lg);
}

.section-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin: 0 0 .5rem;
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* [project]/src/styles/teamhub-theme-variables.css [app-client] (css) */
:root {
  --primary: #a4ffb9;
  --primary-dim: #00ed7e;
  --primary-fixed: #00fd87;
  --primary-fixed-dim: #00ed7e;
  --primary-container: #00fd87;
  --on-primary: #004621;
  --on-primary-fixed: #004621;
  --on-primary-fixed-variant: #006632;
  --on-primary-container: #005b2c;
  --inverse-primary: #006e37;
  --secondary: #00d2fd;
  --secondary-dim: #00c3eb;
  --secondary-fixed: #79dfff;
  --secondary-fixed-dim: #1cd5ff;
  --on-secondary: #004352;
  --on-secondary-fixed: #003a47;
  --on-secondary-fixed-variant: #00586c;
  --secondary-container: #00677e;
  --on-secondary-container: #eefaff;
  --tertiary: #7ee6ff;
  --tertiary-dim: #00cdee;
  --tertiary-fixed: #00dcff;
  --tertiary-fixed-dim: #00cdee;
  --on-tertiary: #005361;
  --on-tertiary-fixed: #00333d;
  --on-tertiary-fixed-variant: #005361;
  --tertiary-container: #00dcff;
  --on-tertiary-container: #004956;
  --error: #ff716c;
  --error-dim: #d7383b;
  --error-container: #9f0519;
  --on-error: #490006;
  --on-error-container: #ffa8a3;
  --surface: #0e0e0e;
  --surface-dim: #0e0e0e;
  --surface-bright: #2c2c2c;
  --surface-container-lowest: #000;
  --surface-container-low: #131313;
  --surface-container: #191a1a;
  --surface-container-high: #1f2020;
  --surface-container-highest: #252626;
  --surface-variant: #252626;
  --surface-tint: #a4ffb9;
  --background: #0e0e0e;
  --on-background: #fff;
  --on-surface: #fff;
  --on-surface-variant: #acabaa;
  --inverse-surface: #fcf9f8;
  --inverse-on-surface: #555;
  --outline: #767575;
  --outline-variant: #484848;
  --hub-text: #fff;
  --hub-text-secondary: rgba(255, 255, 255, .5);
  --hub-toggle-bg: rgba(255, 255, 255, .05);
  --hub-toggle-text: rgba(255, 255, 255, .5);
  --hub-toggle-hover: rgba(255, 255, 255, .08);
  --modal-bg: #1e1e1e;
  --modal-bg-gradient: linear-gradient(rgba(255, 255, 255, .02), rgba(255, 255, 255, .02));
  --modal-border: rgba(255, 255, 255, .1);
  --modal-text: #fff;
  --modal-text-secondary: rgba(255, 255, 255, .7);
  --modal-text-muted: rgba(255, 255, 255, .5);
  --modal-text-faint: rgba(255, 255, 255, .3);
  --modal-input-bg: rgba(255, 255, 255, .03);
  --modal-input-border: rgba(255, 255, 255, .1);
  --modal-input-border-hover: rgba(255, 255, 255, .2);
  --modal-chip-bg: rgba(255, 255, 255, .05);
  --modal-chip-bg-hover: rgba(255, 255, 255, .1);
  --modal-menu-bg: #2a2a2a;
  --modal-divider: rgba(255, 255, 255, .08);
  --modal-button-outline-color: rgba(255, 255, 255, .7);
  --modal-button-outline-border: rgba(255, 255, 255, .2);
  --filter-text: #fff;
  --filter-text-secondary: rgba(255, 255, 255, .7);
  --filter-text-muted: rgba(255, 255, 255, .4);
  --filter-border: rgba(255, 255, 255, .1);
  --filter-border-hover: rgba(255, 255, 255, .2);
  --filter-input-bg: rgba(255, 255, 255, .05);
  --filter-hover-bg: rgba(255, 255, 255, .05);
  --filter-menu-bg: rgba(30, 30, 35, .95);
  --filter-menu-shadow: 0 8px 32px rgba(0, 0, 0, .4);
  --panel-bg: rgba(20, 20, 25, .95);
  --panel-border: rgba(255, 255, 255, .1);
  --panel-text: #fff;
  --panel-text-secondary: rgba(255, 255, 255, .6);
  --panel-text-muted: rgba(255, 255, 255, .4);
  --panel-text-faint: rgba(255, 255, 255, .3);
  --panel-divider: rgba(255, 255, 255, .1);
  --panel-header-bg: rgba(255, 255, 255, .03);
  --panel-input-bg: rgba(255, 255, 255, .05);
  --panel-hover-bg: rgba(255, 255, 255, .1);
  --panel-menu-bg: #1e1e1e;
  --panel-chip-bg: rgba(255, 255, 255, .1);
  --panel-progress-bg: rgba(255, 255, 255, .1);
}

.light {
  --hub-text: #1f2937;
  --hub-text-secondary: #6b7280;
  --hub-toggle-bg: rgba(0, 0, 0, .05);
  --hub-toggle-text: #4b5563;
  --hub-toggle-hover: rgba(0, 0, 0, .08);
  --modal-bg: #fff;
  --modal-bg-gradient: linear-gradient(rgba(0, 0, 0, .01), rgba(0, 0, 0, .01));
  --modal-border: #e5e7eb;
  --modal-text: #1f2937;
  --modal-text-secondary: #4b5563;
  --modal-text-muted: #6b7280;
  --modal-text-faint: #9ca3af;
  --modal-input-bg: #f9fafb;
  --modal-input-border: #e5e7eb;
  --modal-input-border-hover: #d1d5db;
  --modal-chip-bg: #f3f4f6;
  --modal-chip-bg-hover: #e5e7eb;
  --modal-menu-bg: #fff;
  --modal-divider: #e5e7eb;
  --modal-button-outline-color: #4b5563;
  --modal-button-outline-border: #d1d5db;
  --filter-text: #1f2937;
  --filter-text-secondary: #4b5563;
  --filter-text-muted: #9ca3af;
  --filter-border: #e5e7eb;
  --filter-border-hover: #d1d5db;
  --filter-input-bg: #f9fafb;
  --filter-hover-bg: rgba(0, 0, 0, .04);
  --filter-menu-bg: #fff;
  --filter-menu-shadow: 0 8px 32px rgba(0, 0, 0, .15);
  --panel-bg: #fff;
  --panel-border: #e5e7eb;
  --panel-text: #1f2937;
  --panel-text-secondary: #4b5563;
  --panel-text-muted: #6b7280;
  --panel-text-faint: #9ca3af;
  --panel-divider: #e5e7eb;
  --panel-header-bg: #f9fafb;
  --panel-input-bg: #f9fafb;
  --panel-hover-bg: rgba(0, 0, 0, .08);
  --panel-menu-bg: #fff;
  --panel-chip-bg: #f3f4f6;
  --panel-progress-bg: #e5e7eb;
}

/*# sourceMappingURL=src_ceb8c501._.css.map*/