@tenerife.music/ui 1.2.1 → 2.0.1

package/dist/styles.css

@@ -430,6 +430,12 @@ body {
 .visible {
   visibility: visible;
 }
+.invisible {
+  visibility: hidden;
+}
+.collapse {
+  visibility: collapse;
+}
 .static {
   position: static;
 }
@@ -482,6 +488,9 @@ body {
 .left-\[50\%\] {
   left: 50%;
 }
+.left-full {
+  left: 100%;
+}
 .left-md {
   left: 1rem;
 }
@@ -515,6 +524,9 @@ body {
 .top-3xl {
   top: 4rem;
 }
+.top-4 {
+  top: 1rem;
+}
 .top-\[50\%\] {
   top: 50%;
 }
@@ -542,6 +554,9 @@ body {
 .z-10 {
   z-index: 10;
 }
+.z-30 {
+  z-index: 30;
+}
 .z-40 {
   z-index: 40;
 }
@@ -554,6 +569,15 @@ body {
 .z-\[1\] {
   z-index: 1;
 }
+.order-1 {
+  order: 1;
+}
+.order-2 {
+  order: 2;
+}
+.order-3 {
+  order: 3;
+}
 .order-first {
   order: -9999;
 }
@@ -582,6 +606,10 @@ body {
   margin-left: auto;
   margin-right: auto;
 }
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
 .my-sm {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -617,6 +645,9 @@ body {
 .ml-1 {
   margin-left: 0.25rem;
 }
+.ml-1\.5 {
+  margin-left: 0.375rem;
+}
 .ml-auto {
   margin-left: auto;
 }
@@ -647,6 +678,12 @@ body {
 .mt-2 {
   margin-top: 0.5rem;
 }
+.mt-4 {
+  margin-top: 1rem;
+}
+.mt-8 {
+  margin-top: 2rem;
+}
 .mt-lg {
   margin-top: 1.5rem;
 }
@@ -704,6 +741,9 @@ body {
 .hidden {
   display: none;
 }
+.aspect-square {
+  aspect-ratio: 1 / 1;
+}
 .aspect-video {
   aspect-ratio: 16 / 9;
 }
@@ -711,6 +751,10 @@ body {
   width: 0.375rem;
   height: 0.375rem;
 }
+.size-10 {
+  width: 2.5rem;
+  height: 2.5rem;
+}
 .size-12 {
   width: 3rem;
   height: 3rem;
@@ -747,9 +791,16 @@ body {
   width: 2rem;
   height: 2rem;
 }
+.size-full {
+  width: 100%;
+  height: 100%;
+}
 .h-0\.5 {
   height: 0.125rem;
 }
+.h-1 {
+  height: 0.25rem;
+}
 .h-1\.5 {
   height: 0.375rem;
 }
@@ -762,6 +813,9 @@ body {
 .h-12 {
   height: 3rem;
 }
+.h-14 {
+  height: 3.5rem;
+}
 .h-16 {
   height: 4rem;
 }
@@ -786,6 +840,9 @@ body {
 .h-4 {
   height: 1rem;
 }
+.h-40 {
+  height: 10rem;
+}
 .h-48 {
   height: 12rem;
 }
@@ -816,9 +873,18 @@ body {
 .h-\[150px\] {
   height: 150px;
 }
+.h-\[1px\] {
+  height: 1px;
+}
 .h-\[200px\] {
   height: 200px;
 }
+.h-\[250px\] {
+  height: 250px;
+}
+.h-\[2px\] {
+  height: 2px;
+}
 .h-\[300px\] {
   height: 300px;
 }
@@ -828,6 +894,9 @@ body {
 .h-\[40rem\] {
   height: 40rem;
 }
+.h-\[50px\] {
+  height: 50px;
+}
 .h-\[calc\(\.\.\.\)\] {
   height: calc(...);
 }
@@ -867,30 +936,45 @@ body {
 .max-h-\[100vh\] {
   max-height: 100vh;
 }
-.max-h-\[384px\] {
-  max-height: 384px;
+.max-h-\[300px\] {
+  max-height: 300px;
 }
 .max-h-\[400px\] {
   max-height: 400px;
 }
+.max-h-\[60vh\] {
+  max-height: 60vh;
+}
 .max-h-\[90vh\] {
   max-height: 90vh;
 }
 .max-h-\[calc\(100vh-2rem\)\] {
   max-height: calc(100vh - 2rem);
 }
-.max-h-full {
-  max-height: 100%;
-}
 .max-h-screen {
   max-height: 100vh;
 }
+.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;
 }
@@ -900,9 +984,18 @@ body {
 .w-0\.5 {
   width: 0.125rem;
 }
+.w-1 {
+  width: 0.25rem;
+}
+.w-1\.5 {
+  width: 0.375rem;
+}
 .w-1\/2 {
   width: 50%;
 }
+.w-1\/3 {
+  width: 33.333333%;
+}
 .w-10 {
   width: 2.5rem;
 }
@@ -984,6 +1077,9 @@ body {
 .w-96 {
   width: 24rem;
 }
+.w-\[100px\] {
+  width: 100px;
+}
 .w-\[123px\] {
   width: 123px;
 }
@@ -1033,8 +1129,11 @@ body {
 .min-w-56 {
   min-width: 14rem;
 }
-.min-w-\[128px\] {
-  min-width: 128px;
+.min-w-\[120px\] {
+  min-width: 120px;
+}
+.min-w-\[200px\] {
+  min-width: 200px;
 }
 .min-w-\[8rem\] {
   min-width: 8rem;
@@ -1073,6 +1172,9 @@ body {
 .max-w-xl {
   max-width: 36rem;
 }
+.max-w-xs {
+  max-width: 20rem;
+}
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1134,40 +1236,127 @@ 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%);
     animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
   }
   50% {
-    transform: translateY(0);
+    transform: none;
     animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
   }
 }
 .animate-bounce {
-  animation: bounce 1s linear infinite;
+  animation: bounce 1s infinite;
+}
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.animate-fade-in {
+  animation: fade-in 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.animate-fade-out {
+  animation: fade-out 150ms cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+@keyframes fade-scale-in {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+.animate-fade-scale-in {
+  animation: fade-scale-in 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
 }
-@keyframes fadeIn {
+@keyframes fade-slide-down-in {
   from {
+    transform: translateY(-100%);
     opacity: 0;
   }
   to {
+    transform: translateY(0);
     opacity: 1;
   }
 }
-.animate-fadeIn {
-  animation: fadeIn 300ms cubic-bezier(0, 0, 0.2, 1);
+.animate-fade-slide-down-in {
+  animation: fade-slide-down-in 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
 }
-@keyframes fadeOut {
+@keyframes fade-slide-left-in {
   from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
     opacity: 1;
   }
+}
+.animate-fade-slide-left-in {
+  animation: fade-slide-left-in 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+@keyframes fade-slide-right-in {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
   to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+.animate-fade-slide-right-in {
+  animation: fade-slide-right-in 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+@keyframes fade-slide-up-in {
+  from {
+    transform: translateY(100%);
     opacity: 0;
   }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
-.animate-fadeOut {
-  animation: fadeOut 150ms cubic-bezier(0.4, 0, 1, 1);
+.animate-fade-slide-up-in {
+  animation: fade-slide-up-in 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
 }
 .animate-none {
   animation: none;
@@ -1179,20 +1368,17 @@ body {
   }
 }
 .animate-ping {
-  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) cubic-bezier(0, 0, 0.2, 1) infinite;
+  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
 }
 @keyframes pulse {
   50% {
-    opacity: 0.5;
-  }
-  0%, 100% {
-    opacity: 1;
+    opacity: .5;
   }
 }
 .animate-pulse {
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
-@keyframes scaleIn {
+@keyframes scale-in {
   from {
     transform: scale(0.95);
     opacity: 0;
@@ -1202,10 +1388,10 @@ body {
     opacity: 1;
   }
 }
-.animate-scaleIn {
-  animation: scaleIn 300ms cubic-bezier(0, 0, 0.2, 1);
+.animate-scale-in {
+  animation: scale-in 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
 }
-@keyframes scaleOut {
+@keyframes scale-out {
   from {
     transform: scale(1);
     opacity: 1;
@@ -1215,24 +1401,10 @@ body {
     opacity: 0;
   }
 }
-.animate-scaleOut {
-  animation: scaleOut 150ms cubic-bezier(0.4, 0, 1, 1);
+.animate-scale-out {
+  animation: scale-out 150ms cubic-bezier(0.4, 0, 0.2, 1) both;
 }
-@keyframes shake {
-  0%, 100% {
-    transform: translateX(0);
-  }
-  10%, 30%, 50%, 70%, 90% {
-    transform: translateX(-4px);
-  }
-  20%, 40%, 60%, 80% {
-    transform: translateX(4px);
-  }
-}
-.animate-shake {
-  animation: shake 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-}
-@keyframes slideInDown {
+@keyframes slide-down-in {
   from {
     transform: translateY(-100%);
     opacity: 0;
@@ -1242,12 +1414,12 @@ body {
     opacity: 1;
   }
 }
-.animate-slideInDown {
-  animation: slideInDown 300ms cubic-bezier(0, 0, 0.2, 1);
+.animate-slide-down-in {
+  animation: slide-down-in 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
 }
-@keyframes slideInLeft {
+@keyframes slide-left-in {
   from {
-    transform: translateX(-100%);
+    transform: translateX(100%);
     opacity: 0;
   }
   to {
@@ -1255,12 +1427,12 @@ body {
     opacity: 1;
   }
 }
-.animate-slideInLeft {
-  animation: slideInLeft 300ms cubic-bezier(0, 0, 0.2, 1);
+.animate-slide-left-in {
+  animation: slide-left-in 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
 }
-@keyframes slideInRight {
+@keyframes slide-right-in {
   from {
-    transform: translateX(100%);
+    transform: translateX(-100%);
     opacity: 0;
   }
   to {
@@ -1268,10 +1440,10 @@ body {
     opacity: 1;
   }
 }
-.animate-slideInRight {
-  animation: slideInRight 300ms cubic-bezier(0, 0, 0.2, 1);
+.animate-slide-right-in {
+  animation: slide-right-in 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
 }
-@keyframes slideInUp {
+@keyframes slide-up-in {
   from {
     transform: translateY(100%);
     opacity: 0;
@@ -1281,20 +1453,63 @@ body {
     opacity: 1;
   }
 }
-.animate-slideInUp {
-  animation: slideInUp 300ms cubic-bezier(0, 0, 0.2, 1);
+.animate-slide-up-in {
+  animation: slide-up-in 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
 }
 @keyframes spin {
   to {
     transform: rotate(360deg);
   }
-  from {
-    transform: rotate(0deg);
-  }
 }
 .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;
 }
@@ -1307,6 +1522,9 @@ body {
 .cursor-pointer {
   cursor: pointer;
 }
+.touch-none {
+  touch-action: none;
+}
 .select-none {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -1356,6 +1574,15 @@ body {
 .grid-cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+.grid-cols-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
 .grid-cols-7 {
   grid-template-columns: repeat(7, minmax(0, 1fr));
 }
@@ -1422,15 +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;
 }
@@ -1455,6 +1703,21 @@ body {
 .gap-xs {
   gap: 0.25rem;
 }
+.-space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+.-space-x-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(-0.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(-0.75rem * calc(1 - var(--tw-space-x-reverse)));
+}
+.-space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(-1rem * var(--tw-space-x-reverse));
+  margin-left: calc(-1rem * calc(1 - var(--tw-space-x-reverse)));
+}
 .space-x-sm > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -1465,11 +1728,21 @@ body {
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
   margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
+.space-y-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
 .space-y-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-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)));
@@ -1505,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)));
@@ -1557,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;
@@ -1620,6 +1901,9 @@ body {
 .border-t {
   border-top-width: 1px;
 }
+.border-solid {
+  border-style: solid;
+}
 .border-dashed {
   border-style: dashed;
 }
@@ -1635,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));
 }
@@ -1692,6 +1982,9 @@ body {
 .border-destructive\/20 {
   border-color: hsl(var(--destructive) / 0.2);
 }
+.border-destructive\/30 {
+  border-color: hsl(var(--destructive) / 0.3);
+}
 .border-destructive\/50 {
   border-color: hsl(var(--destructive) / 0.5);
 }
@@ -1710,9 +2003,18 @@ body {
 .border-destructive\/95 {
   border-color: hsl(var(--destructive) / 0.95);
 }
+.border-error\/20 {
+  border-color: hsl(var(--semantic-error) / 0.2);
+}
+.border-error\/30 {
+  border-color: hsl(var(--semantic-error) / 0.3);
+}
 .border-info\/20 {
   border-color: hsl(var(--semantic-info) / 0.2);
 }
+.border-info\/30 {
+  border-color: hsl(var(--semantic-info) / 0.3);
+}
 .border-input {
   border-color: hsl(var(--input));
 }
@@ -1722,9 +2024,15 @@ body {
 .border-primary {
   border-color: hsl(var(--tm-primary));
 }
+.border-primary-600 {
+  border-color: hsl(var(--primary-600));
+}
 .border-primary\/20 {
   border-color: hsl(var(--tm-primary) / 0.2);
 }
+.border-primary\/30 {
+  border-color: hsl(var(--tm-primary) / 0.3);
+}
 .border-primary\/50 {
   border-color: hsl(var(--tm-primary) / 0.5);
 }
@@ -1746,6 +2054,9 @@ body {
 .border-secondary {
   border-color: hsl(var(--tm-secondary));
 }
+.border-secondary-600 {
+  border-color: hsl(var(--secondary-600));
+}
 .border-secondary\/20 {
   border-color: hsl(var(--tm-secondary) / 0.2);
 }
@@ -1770,15 +2081,24 @@ body {
 .border-success\/20 {
   border-color: hsl(var(--semantic-success) / 0.2);
 }
+.border-success\/30 {
+  border-color: hsl(var(--semantic-success) / 0.3);
+}
 .border-transparent {
   border-color: transparent;
 }
 .border-warning\/20 {
   border-color: hsl(var(--semantic-warning) / 0.2);
 }
+.border-warning\/30 {
+  border-color: hsl(var(--semantic-warning) / 0.3);
+}
 .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));
 }
@@ -1863,6 +2183,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);
 }
@@ -1888,6 +2211,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);
 }
@@ -1906,8 +2232,11 @@ body {
 .bg-destructive\/95 {
   background-color: hsl(var(--destructive) / 0.95);
 }
-.bg-green-500\/10 {
-  background-color: rgb(34 197 94 / 0.1);
+.bg-error\/10 {
+  background-color: hsl(var(--semantic-error) / 0.1);
+}
+.bg-error\/5 {
+  background-color: hsl(var(--semantic-error) / 0.05);
 }
 .bg-info {
   background-color: hsl(var(--semantic-info));
@@ -1915,6 +2244,9 @@ body {
 .bg-info\/10 {
   background-color: hsl(var(--semantic-info) / 0.1);
 }
+.bg-info\/5 {
+  background-color: hsl(var(--semantic-info) / 0.05);
+}
 .bg-muted {
   background-color: hsl(var(--muted));
 }
@@ -1930,9 +2262,18 @@ body {
 .bg-primary {
   background-color: hsl(var(--tm-primary));
 }
+.bg-primary-200 {
+  background-color: hsl(var(--primary-200));
+}
+.bg-primary-600 {
+  background-color: hsl(var(--primary-600));
+}
 .bg-primary\/10 {
   background-color: hsl(var(--tm-primary) / 0.1);
 }
+.bg-primary\/20 {
+  background-color: hsl(var(--tm-primary) / 0.2);
+}
 .bg-primary\/50 {
   background-color: hsl(var(--tm-primary) / 0.5);
 }
@@ -1951,6 +2292,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));
@@ -1958,6 +2303,12 @@ body {
 .bg-secondary {
   background-color: hsl(var(--tm-secondary));
 }
+.bg-secondary-200 {
+  background-color: hsl(var(--secondary-200));
+}
+.bg-secondary-600 {
+  background-color: hsl(var(--secondary-600));
+}
 .bg-secondary\/10 {
   background-color: hsl(var(--tm-secondary) / 0.1);
 }
@@ -1988,6 +2339,12 @@ body {
 .bg-success\/10 {
   background-color: hsl(var(--semantic-success) / 0.1);
 }
+.bg-success\/20 {
+  background-color: hsl(var(--semantic-success) / 0.2);
+}
+.bg-success\/5 {
+  background-color: hsl(var(--semantic-success) / 0.05);
+}
 .bg-transparent {
   background-color: transparent;
 }
@@ -2000,6 +2357,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));
 }
@@ -2009,31 +2376,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:
@@ -2041,21 +2606,105 @@ 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);
 }
+.to-primary {
+  --tw-gradient-to: hsl(var(--tm-primary)) var(--tw-gradient-to-position);
+}
 .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;
@@ -2072,19 +2721,33 @@ body {
 .stroke-\[1px\] {
   stroke-width: 1px;
 }
+.object-contain {
+  -o-object-fit: contain;
+  object-fit: contain;
+}
 .object-cover {
   -o-object-fit: cover;
   object-fit: cover;
 }
+.object-fill {
+  -o-object-fit: fill;
+  object-fit: fill;
+}
 .p-0 {
   padding: 0;
 }
 .p-0\.5 {
   padding: 0.125rem;
 }
+.p-1 {
+  padding: 0.25rem;
+}
 .p-2 {
   padding: 0.5rem;
 }
+.p-3 {
+  padding: 0.75rem;
+}
 .p-4 {
   padding: 1rem;
 }
@@ -2117,6 +2780,10 @@ body {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -2149,6 +2816,10 @@ body {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -2185,6 +2856,9 @@ body {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+.pb-4 {
+  padding-bottom: 1rem;
+}
 .pb-8 {
   padding-bottom: 2rem;
 }
@@ -2206,9 +2880,15 @@ body {
 .pr-sm {
   padding-right: 0.5rem;
 }
+.pt-0 {
+  padding-top: 0;
+}
 .pt-8 {
   padding-top: 2rem;
 }
+.pt-lg {
+  padding-top: 1.5rem;
+}
 .pt-sm {
   padding-top: 0.5rem;
 }
@@ -2329,6 +3009,9 @@ body {
 .font-semibold {
   font-weight: 600;
 }
+.uppercase {
+  text-transform: uppercase;
+}
 .capitalize {
   text-transform: capitalize;
 }
@@ -2374,6 +3057,9 @@ body {
 .text-\[hsl\(var\(--accent-foreground\)\)\] {
   color: hsl(var(--accent-foreground));
 }
+.text-\[hsl\(var\(--card-foreground\)\)\] {
+  color: hsl(var(--card-foreground));
+}
 .text-\[hsl\(var\(--destructive\)\)\] {
   color: hsl(var(--destructive));
 }
@@ -2383,6 +3069,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));
 }
@@ -2398,6 +3087,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));
 }
@@ -2447,6 +3139,9 @@ body {
 .text-foreground\/50 {
   color: hsl(var(--foreground) / 0.5);
 }
+.text-foreground\/60 {
+  color: hsl(var(--foreground) / 0.6);
+}
 .text-foreground\/70 {
   color: hsl(var(--foreground) / 0.7);
 }
@@ -2465,9 +3160,9 @@ body {
 .text-foreground\/95 {
   color: hsl(var(--foreground) / 0.95);
 }
-.text-green-700 {
+.text-gray-600 {
   --tw-text-opacity: 1;
-  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
 }
 .text-info {
   color: hsl(var(--semantic-info));
@@ -2551,6 +3246,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));
@@ -2681,6 +3379,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));
 }
@@ -2774,50 +3475,26 @@ body {
 .duration-200 {
   transition-duration: 200ms;
 }
-.duration-250 {
-  transition-duration: 250ms;
-}
 .duration-300 {
   transition-duration: 300ms;
 }
-.duration-400 {
-  transition-duration: 400ms;
-}
 .duration-500 {
   transition-duration: 500ms;
 }
-.duration-600 {
-  transition-duration: 600ms;
-}
 .duration-700 {
   transition-duration: 700ms;
 }
 .duration-75 {
   transition-duration: 75ms;
 }
-.duration-800 {
-  transition-duration: 800ms;
-}
 .duration-fast {
   transition-duration: 150ms;
 }
 .duration-normal {
-  transition-duration: 300ms;
+  transition-duration: 250ms;
 }
 .duration-slow {
-  transition-duration: 500ms;
-}
-.duration-slower {
-  transition-duration: 700ms;
-}
-.duration-slowest {
-  transition-duration: 1000ms;
-}
-.ease-bounce {
-  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
-.ease-elastic {
-  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition-duration: 350ms;
 }
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
@@ -2831,6 +3508,78 @@ body {
 .ease-out {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
+.tm-motion-fade-in {
+  animation: fade-in var(--motion-duration-normal) var(--motion-easing-standard) both;
+}
+.tm-motion-fade-out {
+  animation: fade-out var(--motion-duration-fast) var(--motion-easing-standard) both;
+}
+.tm-motion-scale-in {
+  animation: scale-in var(--motion-duration-normal) var(--motion-easing-standard) both;
+}
+.tm-motion-scale-out {
+  animation: scale-out var(--motion-duration-fast) var(--motion-easing-standard) both;
+}
+.tm-motion-slide-up {
+  animation: slide-up-in var(--motion-duration-normal) var(--motion-easing-standard) both;
+}
+.tm-motion-slide-down {
+  animation: slide-down-in var(--motion-duration-normal) var(--motion-easing-standard) both;
+}
+.tm-motion-slide-left {
+  animation: slide-left-in var(--motion-duration-normal) var(--motion-easing-standard) both;
+}
+.tm-motion-slide-right {
+  animation: slide-right-in var(--motion-duration-normal) var(--motion-easing-standard) both;
+}
+.tm-motion-fade-scale {
+  animation: fade-scale-in var(--motion-duration-normal) var(--motion-easing-standard) both;
+}
+.tm-motion-fade-slide-up {
+  animation: fade-slide-up-in var(--motion-duration-normal) var(--motion-easing-standard) both;
+}
+.tm-motion-fade-slide-down {
+  animation: fade-slide-down-in var(--motion-duration-normal) var(--motion-easing-standard) both;
+}
+.tm-motion-fade-slide-left {
+  animation: fade-slide-left-in var(--motion-duration-normal) var(--motion-easing-standard) both;
+}
+.tm-motion-fade-slide-right {
+  animation: fade-slide-right-in var(--motion-duration-normal) var(--motion-easing-standard) both;
+}
+.tm-motion-fade-scale-out {
+  animation: fade-scale-out var(--motion-duration-fast) var(--motion-easing-standard) both;
+}
+.tm-motion-fade-slide-up-out {
+  animation: fade-slide-up-out var(--motion-duration-fast) var(--motion-easing-standard) both;
+}
+.tm-motion-fade-slide-down-out {
+  animation: fade-slide-down-out var(--motion-duration-fast) var(--motion-easing-standard) both;
+}
+.tm-motion-fade-slide-left-out {
+  animation: fade-slide-left-out var(--motion-duration-fast) var(--motion-easing-standard) both;
+}
+.tm-motion-fade-slide-right-out {
+  animation: fade-slide-right-out var(--motion-duration-fast) var(--motion-easing-standard) both;
+}
+.tm-motion-hover-lift {
+  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
+}
+.tm-motion-hover-lift:hover {
+  transform: scale(1.05) translateY(-0.3125rem);
+}
+.tm-motion-hover-scale {
+  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
+}
+.tm-motion-hover-scale:hover {
+  transform: scale(1.05);
+}
+.tm-motion-tap-scale {
+  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
+}
+.tm-motion-tap-scale:active {
+  transform: scale(0.95);
+}
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
@@ -2951,18 +3700,30 @@ 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);
 }
 .hover\:bg-accent\/80:hover {
   background-color: hsl(var(--tm-accent) / 0.8);
 }
+.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);
 }
@@ -3025,6 +3786,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);
@@ -3088,6 +3852,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);
@@ -3116,6 +3888,12 @@ body {
 .focus-visible\:ring-ring:focus-visible {
   --tw-ring-color: hsl(var(--ring));
 }
+.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;
 }
@@ -3266,6 +4044,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;
 }
@@ -3275,21 +4075,42 @@ body {
 .data-\[orientation\=vertical\]\:flex-col[data-orientation=vertical] {
   flex-direction: column;
 }
+.data-\[state\=open\]\:border-ring[data-state=open] {
+  border-color: hsl(var(--ring));
+}
 .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));
 }
 .data-\[state\=open\]\:bg-accent\/50[data-state=open] {
   background-color: hsl(var(--tm-accent) / 0.5);
 }
+.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));
 }
 .data-\[disabled\]\:opacity-50[data-disabled] {
   opacity: 0.5;
 }
+.data-\[placeholder\]\:opacity-70[data-placeholder] {
+  opacity: 0.7;
+}
 .data-\[swipe\=move\]\:transition-none[data-swipe=move] {
   transition-property: none;
 }
@@ -3302,9 +4123,34 @@ 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));
 }
-.dark\:text-green-400:is([data-mode=night] *) {
-  --tw-text-opacity: 1;
-  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
+@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));
+}
+.dark\:border-secondary-500:is([data-mode=night] *) {
+  border-color: hsl(var(--secondary-500));
+}
+.dark\:bg-primary-500:is([data-mode=night] *) {
+  background-color: hsl(var(--primary-500));
+}
+.dark\:bg-primary-800:is([data-mode=night] *) {
+  background-color: hsl(var(--primary-800));
+}
+.dark\:bg-secondary-500:is([data-mode=night] *) {
+  background-color: hsl(var(--secondary-500));
+}
+.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));
 }
 @media (min-width: 640px) {
   .sm\:grid-cols-2 {
@@ -3367,8 +4213,8 @@ body {
   .lg\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
-  .lg\:grid-cols-5 {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
+  .lg\:grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
   }
   .lg\:gap-xl {
     gap: 2rem;