@tenerife.music/ui 2.0.0 → 2.0.3

package/dist/styles.css

@@ -430,6 +430,9 @@ body {
 .visible {
   visibility: visible;
 }
+.invisible {
+  visibility: hidden;
+}
 .collapse {
   visibility: collapse;
 }
@@ -748,6 +751,10 @@ body {
   width: 0.375rem;
   height: 0.375rem;
 }
+.size-10 {
+  width: 2.5rem;
+  height: 2.5rem;
+}
 .size-12 {
   width: 3rem;
   height: 3rem;
@@ -776,10 +783,18 @@ body {
   width: 1rem;
   height: 1rem;
 }
+.size-5 {
+  width: 1.25rem;
+  height: 1.25rem;
+}
 .size-8 {
   width: 2rem;
   height: 2rem;
 }
+.size-full {
+  width: 100%;
+  height: 100%;
+}
 .h-0\.5 {
   height: 0.125rem;
 }
@@ -825,6 +840,9 @@ body {
 .h-4 {
   height: 1rem;
 }
+.h-40 {
+  height: 10rem;
+}
 .h-48 {
   height: 12rem;
 }
@@ -918,6 +936,9 @@ body {
 .max-h-\[100vh\] {
   max-height: 100vh;
 }
+.max-h-\[300px\] {
+  max-height: 300px;
+}
 .max-h-\[400px\] {
   max-height: 400px;
 }
@@ -936,12 +957,27 @@ body {
 .min-h-20 {
   min-height: 5rem;
 }
+.min-h-\[120px\] {
+  min-height: 120px;
+}
+.min-h-\[150px\] {
+  min-height: 150px;
+}
 .min-h-\[200px\] {
   min-height: 200px;
 }
+.min-h-\[300px\] {
+  min-height: 300px;
+}
 .min-h-\[3rem\] {
   min-height: 3rem;
 }
+.min-h-\[400px\] {
+  min-height: 400px;
+}
+.min-h-\[80px\] {
+  min-height: 80px;
+}
 .min-h-screen {
   min-height: 100vh;
 }
@@ -957,6 +993,9 @@ body {
 .w-1\/2 {
   width: 50%;
 }
+.w-1\/3 {
+  width: 33.333333%;
+}
 .w-10 {
   width: 2.5rem;
 }
@@ -1090,6 +1129,9 @@ body {
 .min-w-56 {
   min-width: 14rem;
 }
+.min-w-\[120px\] {
+  min-width: 120px;
+}
 .min-w-\[200px\] {
   min-width: 200px;
 }
@@ -1194,6 +1236,28 @@ body {
 .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 accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+.animate-accordion-down {
+  animation: accordion-down 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+.animate-accordion-up {
+  animation: accordion-up 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
 @keyframes bounce {
   0%, 100% {
     transform: translateY(-25%);
@@ -1400,6 +1464,52 @@ body {
 .animate-spin {
   animation: spin 1s linear infinite;
 }
+@keyframes spinner-bars {
+  0%, 40%, 100% {
+    transform: scaleY(0.4);
+  }
+  20% {
+    transform: scaleY(1.0);
+  }
+}
+.animate-spinner-bars {
+  animation: spinner-bars 1.2s ease-in-out infinite;
+}
+@keyframes spinner-linear {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(200%);
+  }
+}
+.animate-spinner-linear {
+  animation: spinner-linear 1.5s ease-in-out infinite;
+}
+@keyframes spinner-ripple {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+.animate-spinner-ripple {
+  animation: spinner-ripple 1.4s ease-out infinite;
+}
+@keyframes spinner-wave {
+  0%, 40%, 100% {
+    transform: translateY(0);
+  }
+  20% {
+    transform: translateY(-10px);
+  }
+}
+.animate-spinner-wave {
+  animation: spinner-wave 1.2s ease-in-out infinite;
+}
 .cursor-default {
   cursor: default;
 }
@@ -1539,18 +1649,36 @@ body {
 .justify-evenly {
   justify-content: space-evenly;
 }
+.gap-0\.5 {
+  gap: 0.125rem;
+}
 .gap-1 {
   gap: 0.25rem;
 }
+.gap-1\.5 {
+  gap: 0.375rem;
+}
 .gap-2 {
   gap: 0.5rem;
 }
+.gap-2\.5 {
+  gap: 0.625rem;
+}
+.gap-2xl {
+  gap: 3rem;
+}
 .gap-3 {
   gap: 0.75rem;
 }
+.gap-3xl {
+  gap: 4rem;
+}
 .gap-4 {
   gap: 1rem;
 }
+.gap-5 {
+  gap: 1.25rem;
+}
 .gap-6 {
   gap: 1.5rem;
 }
@@ -1610,6 +1738,11 @@ body {
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.space-y-2xl > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(3rem * 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)));
@@ -1645,6 +1778,11 @@ body {
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.space-y-xl > :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));
+}
 .space-y-xs > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1697,6 +1835,9 @@ body {
 .rounded-xl {
   border-radius: 0.75rem;
 }
+.rounded-xs {
+  border-radius: 0.125rem;
+}
 .rounded-l-lg {
   border-top-left-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
@@ -1760,6 +1901,9 @@ body {
 .border-t {
   border-top-width: 1px;
 }
+.border-solid {
+  border-style: solid;
+}
 .border-dashed {
   border-style: dashed;
 }
@@ -1775,6 +1919,12 @@ body {
 .border-\[hsl\(var\(--input\)\)\] {
   border-color: hsl(var(--input));
 }
+.border-\[hsl\(var\(--muted\)\)\] {
+  border-color: hsl(var(--muted));
+}
+.border-\[hsl\(var\(--muted-foreground\)\)\] {
+  border-color: hsl(var(--muted-foreground));
+}
 .border-\[hsl\(var\(--primary\)\)\] {
   border-color: hsl(var(--primary));
 }
@@ -1946,6 +2096,9 @@ body {
 .border-white\/20 {
   border-color: rgb(255 255 255 / 0.2);
 }
+.border-t-transparent {
+  border-top-color: transparent;
+}
 .bg-\[hsl\(var\(--accent\)\)\] {
   background-color: hsl(var(--accent));
 }
@@ -1988,6 +2141,12 @@ body {
 .bg-\[hsl\(var\(--primary\)\)\] {
   background-color: hsl(var(--primary));
 }
+.bg-\[hsl\(var\(--tm-disabled\)\)\] {
+  background-color: hsl(var(--tm-disabled));
+}
+.bg-\[hsl\(var\(--tm-disabled-foreground\)\)\] {
+  background-color: hsl(var(--tm-disabled-foreground));
+}
 .bg-\[hsl\(var\(--tm-primary\)\)\] {
   background-color: hsl(var(--tm-primary));
 }
@@ -2030,6 +2189,9 @@ body {
 .bg-background {
   background-color: hsl(var(--background));
 }
+.bg-background\/80 {
+  background-color: hsl(var(--background) / 0.8);
+}
 .bg-black\/50 {
   background-color: rgb(0 0 0 / 0.5);
 }
@@ -2055,6 +2217,9 @@ body {
 .bg-destructive\/20 {
   background-color: hsl(var(--destructive) / 0.2);
 }
+.bg-destructive\/5 {
+  background-color: hsl(var(--destructive) / 0.05);
+}
 .bg-destructive\/50 {
   background-color: hsl(var(--destructive) / 0.5);
 }
@@ -2133,6 +2298,10 @@ body {
 .bg-primary\/95 {
   background-color: hsl(var(--tm-primary) / 0.95);
 }
+.bg-purple-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
+}
 .bg-red-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
@@ -2194,6 +2363,16 @@ body {
 .bg-white\/10 {
   background-color: rgb(255 255 255 / 0.1);
 }
+.bg-\[radial-gradient\(ellipse_at_center\,_transparent_0\%\,_rgba\(0\,0\,0\,0\.4\)_100\%\)\] {
+  background-image:
+    radial-gradient(
+      ellipse at center,
+      transparent 0%,
+      rgba(0, 0, 0, 0.4) 100%);
+}
+.bg-gradient-to-b {
+  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
+}
 .bg-gradient-to-br {
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -2203,36 +2382,229 @@ body {
 .bg-gradient-to-t {
   background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
+.from-\[hsl\(var\(--muted-foreground\)\)\] {
+  --tw-gradient-from: hsl(var(--muted-foreground)) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--muted-foreground) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-\[hsl\(var\(--surface-glass\)\)\] {
+  --tw-gradient-from: hsl(var(--surface-glass)) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--surface-glass) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-\[hsl\(var\(--tm-primary\)\)\] {
+  --tw-gradient-from: hsl(var(--tm-primary)) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--tm-primary) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .from-accent {
   --tw-gradient-from: hsl(var(--tm-accent)) var(--tw-gradient-from-position);
   --tw-gradient-to: hsl(var(--tm-accent) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.from-accent-400 {
+  --tw-gradient-from: hsl(var(--accent-400)) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--accent-400) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .from-accent-500 {
   --tw-gradient-from: hsl(var(--accent-500)) var(--tw-gradient-from-position);
   --tw-gradient-to: hsl(var(--accent-500) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.from-black\/10 {
+  --tw-gradient-from: rgb(0 0 0 / 0.1) 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);
+}
+.from-black\/30 {
+  --tw-gradient-from: rgb(0 0 0 / 0.3) 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);
+}
 .from-black\/60 {
   --tw-gradient-from: rgb(0 0 0 / 0.6) 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);
 }
+.from-error {
+  --tw-gradient-from: hsl(var(--semantic-error)) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--semantic-error) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-gray-900 {
+  --tw-gradient-from: #111827 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-info {
+  --tw-gradient-from: hsl(var(--semantic-info)) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--semantic-info) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .from-muted {
   --tw-gradient-from: hsl(var(--muted)) var(--tw-gradient-from-position);
   --tw-gradient-to: hsl(var(--muted) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.from-muted-foreground {
+  --tw-gradient-from: hsl(var(--muted-foreground)) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--muted-foreground) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-muted-foreground\/30 {
+  --tw-gradient-from: hsl(var(--muted-foreground) / 0.3) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--muted-foreground) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-muted-foreground\/40 {
+  --tw-gradient-from: hsl(var(--muted-foreground) / 0.4) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--muted-foreground) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-muted-foreground\/50 {
+  --tw-gradient-from: hsl(var(--muted-foreground) / 0.5) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--muted-foreground) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .from-primary {
   --tw-gradient-from: hsl(var(--tm-primary)) var(--tw-gradient-from-position);
   --tw-gradient-to: hsl(var(--tm-primary) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.from-primary-600 {
+  --tw-gradient-from: hsl(var(--primary-600)) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--primary-600) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-primary\/10 {
+  --tw-gradient-from: hsl(var(--tm-primary) / 0.1) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--tm-primary) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-primary\/20 {
+  --tw-gradient-from: hsl(var(--tm-primary) / 0.2) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--tm-primary) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-primary\/30 {
+  --tw-gradient-from: hsl(var(--tm-primary) / 0.3) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--tm-primary) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-primary\/40 {
+  --tw-gradient-from: hsl(var(--tm-primary) / 0.4) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--tm-primary) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-ring\/20 {
+  --tw-gradient-from: hsl(var(--ring) / 0.2) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--ring) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-ring\/40 {
+  --tw-gradient-from: hsl(var(--ring) / 0.4) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--ring) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-success {
+  --tw-gradient-from: hsl(var(--semantic-success)) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--semantic-success) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .from-surface-elevated1 {
   --tw-gradient-from: hsl(var(--surface-elevated1)) var(--tw-gradient-from-position);
   --tw-gradient-to: hsl(var(--surface-elevated1) / 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);
+}
+.from-warning {
+  --tw-gradient-from: hsl(var(--semantic-warning)) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--semantic-warning) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-white\/10 {
+  --tw-gradient-from: rgb(255 255 255 / 0.1) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-white\/30 {
+  --tw-gradient-from: rgb(255 255 255 / 0.3) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-white\/60 {
+  --tw-gradient-from: rgb(255 255 255 / 0.6) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.via-\[hsl\(var\(--muted-foreground\)\)\] {
+  --tw-gradient-to: hsl(var(--muted-foreground) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops:
+    var(--tw-gradient-from),
+    hsl(var(--muted-foreground)) var(--tw-gradient-via-position),
+    var(--tw-gradient-to);
+}
+.via-\[hsl\(var\(--tm-primary\)\)\] {
+  --tw-gradient-to: hsl(var(--tm-primary) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops:
+    var(--tw-gradient-from),
+    hsl(var(--tm-primary)) var(--tw-gradient-via-position),
+    var(--tw-gradient-to);
+}
+.via-accent {
+  --tw-gradient-to: hsl(var(--tm-accent) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops:
+    var(--tw-gradient-from),
+    hsl(var(--tm-accent)) var(--tw-gradient-via-position),
+    var(--tw-gradient-to);
+}
+.via-accent-500 {
+  --tw-gradient-to: hsl(var(--accent-500) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops:
+    var(--tw-gradient-from),
+    hsl(var(--accent-500)) var(--tw-gradient-via-position),
+    var(--tw-gradient-to);
+}
+.via-gray-800 {
+  --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops:
+    var(--tw-gradient-from),
+    #1f2937 var(--tw-gradient-via-position),
+    var(--tw-gradient-to);
+}
+.via-muted-foreground\/30 {
+  --tw-gradient-to: hsl(var(--muted-foreground) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops:
+    var(--tw-gradient-from),
+    hsl(var(--muted-foreground) / 0.3) var(--tw-gradient-via-position),
+    var(--tw-gradient-to);
+}
+.via-muted\/50 {
+  --tw-gradient-to: hsl(var(--muted) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops:
+    var(--tw-gradient-from),
+    hsl(var(--muted) / 0.5) var(--tw-gradient-via-position),
+    var(--tw-gradient-to);
+}
+.via-primary-500 {
+  --tw-gradient-to: hsl(var(--primary-500) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops:
+    var(--tw-gradient-from),
+    hsl(var(--primary-500)) var(--tw-gradient-via-position),
+    var(--tw-gradient-to);
+}
+.via-surface-elevated2 {
+  --tw-gradient-to: hsl(var(--surface-elevated2) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops:
+    var(--tw-gradient-from),
+    hsl(var(--surface-elevated2)) var(--tw-gradient-via-position),
+    var(--tw-gradient-to);
+}
 .via-transparent {
   --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops:
@@ -2240,9 +2612,63 @@ body {
     transparent var(--tw-gradient-via-position),
     var(--tw-gradient-to);
 }
+.to-\[hsl\(var\(--surface-glass\)\)\] {
+  --tw-gradient-to: hsl(var(--surface-glass)) var(--tw-gradient-to-position);
+}
 .to-accent {
   --tw-gradient-to: hsl(var(--tm-accent)) var(--tw-gradient-to-position);
 }
+.to-accent-600 {
+  --tw-gradient-to: hsl(var(--accent-600)) var(--tw-gradient-to-position);
+}
+.to-accent\/10 {
+  --tw-gradient-to: hsl(var(--tm-accent) / 0.1) var(--tw-gradient-to-position);
+}
+.to-accent\/20 {
+  --tw-gradient-to: hsl(var(--tm-accent) / 0.2) var(--tw-gradient-to-position);
+}
+.to-accent\/30 {
+  --tw-gradient-to: hsl(var(--tm-accent) / 0.3) var(--tw-gradient-to-position);
+}
+.to-accent\/40 {
+  --tw-gradient-to: hsl(var(--tm-accent) / 0.4) var(--tw-gradient-to-position);
+}
+.to-black\/20 {
+  --tw-gradient-to: rgb(0 0 0 / 0.2) var(--tw-gradient-to-position);
+}
+.to-black\/5 {
+  --tw-gradient-to: rgb(0 0 0 / 0.05) var(--tw-gradient-to-position);
+}
+.to-black\/60 {
+  --tw-gradient-to: rgb(0 0 0 / 0.6) var(--tw-gradient-to-position);
+}
+.to-error\/80 {
+  --tw-gradient-to: hsl(var(--semantic-error) / 0.8) var(--tw-gradient-to-position);
+}
+.to-gray-900 {
+  --tw-gradient-to: #111827 var(--tw-gradient-to-position);
+}
+.to-info\/80 {
+  --tw-gradient-to: hsl(var(--semantic-info) / 0.8) var(--tw-gradient-to-position);
+}
+.to-muted {
+  --tw-gradient-to: hsl(var(--muted)) var(--tw-gradient-to-position);
+}
+.to-muted-foreground\/20 {
+  --tw-gradient-to: hsl(var(--muted-foreground) / 0.2) var(--tw-gradient-to-position);
+}
+.to-muted-foreground\/30 {
+  --tw-gradient-to: hsl(var(--muted-foreground) / 0.3) var(--tw-gradient-to-position);
+}
+.to-muted-foreground\/40 {
+  --tw-gradient-to: hsl(var(--muted-foreground) / 0.4) var(--tw-gradient-to-position);
+}
+.to-muted-foreground\/50 {
+  --tw-gradient-to: hsl(var(--muted-foreground) / 0.5) var(--tw-gradient-to-position);
+}
+.to-muted-foreground\/70 {
+  --tw-gradient-to: hsl(var(--muted-foreground) / 0.7) var(--tw-gradient-to-position);
+}
 .to-muted\/50 {
   --tw-gradient-to: hsl(var(--muted) / 0.5) var(--tw-gradient-to-position);
 }
@@ -2252,12 +2678,39 @@ body {
 .to-primary-600 {
   --tw-gradient-to: hsl(var(--primary-600)) var(--tw-gradient-to-position);
 }
+.to-ring\/10 {
+  --tw-gradient-to: hsl(var(--ring) / 0.1) var(--tw-gradient-to-position);
+}
+.to-ring\/30 {
+  --tw-gradient-to: hsl(var(--ring) / 0.3) var(--tw-gradient-to-position);
+}
+.to-secondary {
+  --tw-gradient-to: hsl(var(--tm-secondary)) var(--tw-gradient-to-position);
+}
+.to-secondary-400 {
+  --tw-gradient-to: hsl(var(--secondary-400)) var(--tw-gradient-to-position);
+}
+.to-success\/80 {
+  --tw-gradient-to: hsl(var(--semantic-success) / 0.8) var(--tw-gradient-to-position);
+}
+.to-surface-elevated1 {
+  --tw-gradient-to: hsl(var(--surface-elevated1)) var(--tw-gradient-to-position);
+}
 .to-surface-elevated2 {
   --tw-gradient-to: hsl(var(--surface-elevated2)) var(--tw-gradient-to-position);
 }
 .to-transparent {
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
+.to-warning\/80 {
+  --tw-gradient-to: hsl(var(--semantic-warning) / 0.8) var(--tw-gradient-to-position);
+}
+.to-white\/20 {
+  --tw-gradient-to: rgb(255 255 255 / 0.2) var(--tw-gradient-to-position);
+}
+.to-white\/5 {
+  --tw-gradient-to: rgb(255 255 255 / 0.05) var(--tw-gradient-to-position);
+}
 .bg-clip-text {
   -webkit-background-clip: text;
   background-clip: text;
@@ -2409,6 +2862,9 @@ body {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+.pb-4 {
+  padding-bottom: 1rem;
+}
 .pb-8 {
   padding-bottom: 2rem;
 }
@@ -2430,6 +2886,9 @@ body {
 .pr-sm {
   padding-right: 0.5rem;
 }
+.pt-0 {
+  padding-top: 0;
+}
 .pt-8 {
   padding-top: 2rem;
 }
@@ -2616,6 +3075,9 @@ body {
 .text-\[hsl\(var\(--foreground\)\)\] {
   color: hsl(var(--foreground));
 }
+.text-\[hsl\(var\(--muted\)\)\] {
+  color: hsl(var(--muted));
+}
 .text-\[hsl\(var\(--muted-foreground\)\)\] {
   color: hsl(var(--muted-foreground));
 }
@@ -2631,6 +3093,9 @@ body {
 .text-\[hsl\(var\(--semantic-success\)\)\] {
   color: hsl(var(--semantic-success));
 }
+.text-\[hsl\(var\(--tm-primary\)\)\] {
+  color: hsl(var(--tm-primary));
+}
 .text-\[hsl\(var\(--tm-primary-foreground\)\)\] {
   color: hsl(var(--tm-primary-foreground));
 }
@@ -2787,6 +3252,9 @@ body {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
+.text-white\/90 {
+  color: rgb(255 255 255 / 0.9);
+}
 .text-yellow-500 {
   --tw-text-opacity: 1;
   color: rgb(234 179 8 / var(--tw-text-opacity, 1));
@@ -2917,6 +3385,9 @@ body {
 .ring-ring {
   --tw-ring-color: hsl(var(--ring));
 }
+.ring-offset-2 {
+  --tw-ring-offset-width: 2px;
+}
 .ring-offset-background {
   --tw-ring-offset-color: hsl(var(--background));
 }
@@ -3235,6 +3706,9 @@ body {
 .hover\:bg-accent\/10:hover {
   background-color: hsl(var(--tm-accent) / 0.1);
 }
+.hover\:bg-accent\/5:hover {
+  background-color: hsl(var(--tm-accent) / 0.05);
+}
 .hover\:bg-accent\/50:hover {
   background-color: hsl(var(--tm-accent) / 0.5);
 }
@@ -3244,12 +3718,18 @@ body {
 .hover\:bg-background\/50:hover {
   background-color: hsl(var(--background) / 0.5);
 }
+.hover\:bg-black\/10:hover {
+  background-color: rgb(0 0 0 / 0.1);
+}
 .hover\:bg-card\/95:hover {
   background-color: hsl(var(--card) / 0.95);
 }
 .hover\:bg-destructive\/80:hover {
   background-color: hsl(var(--destructive) / 0.8);
 }
+.hover\:bg-muted:hover {
+  background-color: hsl(var(--muted));
+}
 .hover\:bg-muted\/50:hover {
   background-color: hsl(var(--muted) / 0.5);
 }
@@ -3312,6 +3792,9 @@ body {
 .hover\:opacity-100:hover {
   opacity: 1;
 }
+.hover\:opacity-70:hover {
+  opacity: 0.7;
+}
 .hover\:shadow-md:hover {
   --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);
@@ -3375,6 +3858,14 @@ body {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.focus-visible\:ring-0: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(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);
+}
 .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);
@@ -3406,6 +3897,9 @@ body {
 .focus-visible\:ring-secondary-600:focus-visible {
   --tw-ring-color: hsl(var(--secondary-600));
 }
+.focus-visible\:ring-offset-0:focus-visible {
+  --tw-ring-offset-width: 0px;
+}
 .focus-visible\:ring-offset-2:focus-visible {
   --tw-ring-offset-width: 2px;
 }
@@ -3490,6 +3984,9 @@ body {
 .disabled\:text-\[hsl\(var\(--button-secondary-disabled-text\)\)\]:disabled {
   color: hsl(var(--button-secondary-disabled-text));
 }
+.disabled\:text-\[hsl\(var\(--tm-disabled-foreground\)\)\]:disabled {
+  color: hsl(var(--tm-disabled-foreground));
+}
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }
@@ -3502,6 +3999,9 @@ body {
 .peer:disabled ~ .peer-disabled\:cursor-not-allowed {
   cursor: not-allowed;
 }
+.peer:disabled ~ .peer-disabled\:text-disabled-foreground {
+  color: hsl(var(--tm-disabled-foreground));
+}
 .peer:disabled ~ .peer-disabled\:opacity-70 {
   opacity: 0.7;
 }
@@ -3556,6 +4056,28 @@ body {
   --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));
 }
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+.data-\[state\=closed\]\:animate-accordion-up[data-state=closed] {
+  animation: accordion-up 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+.data-\[state\=open\]\:animate-accordion-down[data-state=open] {
+  animation: accordion-down 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
 .data-\[disabled\]\:cursor-not-allowed[data-disabled] {
   cursor: not-allowed;
 }
@@ -3571,6 +4093,12 @@ body {
 .data-\[active\]\:bg-accent\/50[data-active] {
   background-color: hsl(var(--tm-accent) / 0.5);
 }
+.data-\[state\=open\]\:bg-\[hsl\(var\(--accent\)\)\][data-state=open] {
+  background-color: hsl(var(--accent));
+}
+.data-\[state\=open\]\:bg-\[hsl\(var\(--muted\)\)\][data-state=open] {
+  background-color: hsl(var(--muted));
+}
 .data-\[state\=open\]\:bg-accent[data-state=open] {
   background-color: hsl(var(--tm-accent));
 }
@@ -3580,6 +4108,12 @@ body {
 .data-\[placeholder\]\:text-foreground[data-placeholder] {
   color: hsl(var(--foreground));
 }
+.data-\[state\=open\]\:text-\[hsl\(var\(--accent-foreground\)\)\][data-state=open] {
+  color: hsl(var(--accent-foreground));
+}
+.data-\[state\=open\]\:text-\[hsl\(var\(--foreground\)\)\][data-state=open] {
+  color: hsl(var(--foreground));
+}
 .data-\[state\=open\]\:text-muted-foreground[data-state=open] {
   color: hsl(var(--muted-foreground));
 }
@@ -3601,6 +4135,11 @@ body {
   --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));
 }
+@media (prefers-reduced-motion: reduce) {
+  .motion-reduce\:animate-none {
+    animation: none;
+  }
+}
 .dark\:border-primary-500:is([data-mode=night] *) {
   border-color: hsl(var(--primary-500));
 }
@@ -3619,6 +4158,9 @@ body {
 .dark\:bg-secondary-800:is([data-mode=night] *) {
   background-color: hsl(var(--secondary-800));
 }
+.dark\:hover\:bg-white\/10:hover:is([data-mode=night] *) {
+  background-color: rgb(255 255 255 / 0.1);
+}
 .dark\:focus-visible\:ring-secondary-500:focus-visible:is([data-mode=night] *) {
   --tw-ring-color: hsl(var(--secondary-500));
 }
@@ -3689,6 +4231,14 @@ body {
   .lg\:gap-xl {
     gap: 2rem;
   }
+  .lg\:px-xl {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+  .lg\:py-2xl {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
 }
 @media (min-width: 1280px) {
   .xl\:grid-cols-4 {