@aggc/ui 0.5.1 → 0.7.0

package/dist/ui.css

@@ -8,14 +8,17 @@ html {
 
 body {
   margin: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
 }
 
 .aggc-spin {
-  animation: aggc-spin 800ms linear infinite;
+  animation: aggc-spin 700ms linear infinite;
 }
 
 [data-ui-loading-pulse] {
-  animation: loadingPulse 1.2s ease-out infinite;
+  animation: loadingPulse 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
 }
 
 [data-ui-skeleton]::before {
@@ -29,25 +32,57 @@ body {
 
 @keyframes loadingPulse {
   0% {
-    transform: scale(0.96);
-    box-shadow: 0 0 0 0 rgba(49, 94, 255, 0.35);
+    transform: scale(0.92);
+    box-shadow: 0 0 0 0 var(--colors-text-accent, rgba(49, 94, 255, 0.3));
   }
-  70% {
+  50% {
     transform: scale(1);
-    box-shadow: 0 0 0 10px rgba(49, 94, 255, 0);
+  }
+  70% {
+    box-shadow: 0 0 0 8px var(--colors-text-accent, rgba(49, 94, 255, 0));
   }
   100% {
-    transform: scale(0.96);
-    box-shadow: 0 0 0 0 rgba(49, 94, 255, 0);
+    transform: scale(0.92);
+    box-shadow: 0 0 0 0 var(--colors-text-accent, rgba(49, 94, 255, 0));
   }
 }
 
 @keyframes aggc-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
   100% {
     transform: translateX(100%);
   }
 }
 
+@keyframes aggc-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes aggc-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes aggc-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .aggc-spin,
   [data-ui-loading-pulse] {
@@ -57,7 +92,7 @@ body {
   [data-ui-skeleton]::before {
     animation: none !important;
     transform: translateX(0);
-    opacity: 0.45;
+    opacity: 0.4;
   }
 }
 
@@ -275,10 +310,14 @@ body {
 }
 
   ::selection {
-    background: rgba(49, 94, 255, 0.24);
+    background: rgba(49, 94, 255, 0.2);
     color: inherit;
 }
 
+  h1,h2,h3 {
+    text-wrap: balance;
+}
+
   *,::before,::after,::backdrop {
     --blur: /*-*/ /*-*/;
     --brightness: /*-*/ /*-*/;
@@ -741,16 +780,19 @@ body {
     --radii-2xl: 1rem;
     --radii-3xl: 1.5rem;
     --radii-full: 9999px;
+    --radii-2xs: 0.125rem;
+    --radii-3xs: 0.0625rem;
     --radii-4xl: 2rem;
+    --radii-5xl: 2.5rem;
     --durations-fastest: 50ms;
     --durations-faster: 100ms;
-    --durations-fast: 150ms;
     --durations-normal: 200ms;
-    --durations-slow: 300ms;
     --durations-slower: 400ms;
     --durations-slowest: 500ms;
+    --durations-fast: 100ms;
     --durations-moderate: 160ms;
     --durations-emphasized: 240ms;
+    --durations-slow: 320ms;
     --breakpoints-sm: 640px;
     --breakpoints-md: 768px;
     --breakpoints-lg: 1024px;
@@ -776,11 +818,13 @@ body {
     --colors-bg-menu: rgba(255, 255, 255, 0.9);
     --colors-bg-accent-soft: rgba(49, 94, 255, 0.1);
     --colors-bg-accent-strong: rgba(49, 94, 255, 0.86);
+    --colors-bg-danger-soft: rgba(217, 45, 32, 0.06);
     --colors-border-soft: rgba(148, 163, 184, 0.14);
     --colors-border-subtle: rgba(125, 146, 182, 0.2);
     --colors-border-default: rgba(109, 130, 164, 0.28);
     --colors-border-strong: rgba(80, 98, 127, 0.42);
     --colors-border-accent: rgba(82, 121, 255, 0.5);
+    --colors-border-danger: rgba(217, 45, 32, 0.35);
     --colors-badge-success-bg: rgba(19, 163, 74, 0.12);
     --colors-badge-success-text: #136c45;
     --colors-badge-success-border: rgba(21, 128, 61, 0.22);
@@ -793,6 +837,9 @@ body {
     --colors-badge-neutral-bg: rgba(99, 115, 148, 0.08);
     --colors-badge-neutral-text: #4b5d7a;
     --colors-badge-neutral-border: rgba(109, 130, 164, 0.18);
+    --colors-badge-danger-bg: rgba(217, 45, 32, 0.12);
+    --colors-badge-danger-text: #b42318;
+    --colors-badge-danger-border: rgba(217, 45, 32, 0.22);
     --colors-result-ok-bg: rgba(48, 113, 255, 0.1);
     --colors-result-ok-border: rgba(49, 94, 255, 0.18);
     --colors-result-fail-bg: rgba(217, 45, 32, 0.08);
@@ -835,11 +882,13 @@ body {
     --colors-bg-menu: rgba(9, 12, 18, 0.99);
     --colors-bg-accent-soft: rgba(138, 180, 255, 0.18);
     --colors-bg-accent-strong: rgba(122, 170, 255, 0.82);
+    --colors-bg-danger-soft: rgba(255, 142, 127, 0.08);
     --colors-border-soft: rgba(255, 255, 255, 0.035);
     --colors-border-subtle: rgba(255, 255, 255, 0.09);
     --colors-border-default: rgba(255, 255, 255, 0.14);
     --colors-border-strong: rgba(255, 255, 255, 0.22);
     --colors-border-accent: rgba(125, 171, 255, 0.44);
+    --colors-border-danger: rgba(255, 142, 127, 0.35);
     --colors-badge-success-bg: rgba(19, 80, 58, 0.7);
     --colors-badge-success-text: #7ff2c7;
     --colors-badge-success-border: rgba(127, 242, 199, 0.32);
@@ -852,6 +901,9 @@ body {
     --colors-badge-neutral-bg: rgba(21, 26, 35, 0.92);
     --colors-badge-neutral-text: #d0d7e4;
     --colors-badge-neutral-border: rgba(183, 195, 215, 0.22);
+    --colors-badge-danger-bg: rgba(255, 142, 127, 0.15);
+    --colors-badge-danger-text: #ff8e7f;
+    --colors-badge-danger-border: rgba(255, 142, 127, 0.3);
     --colors-result-ok-bg: rgba(17, 43, 86, 0.88);
     --colors-result-ok-border: rgba(138, 180, 255, 0.24);
     --colors-result-fail-bg: rgba(77, 17, 11, 0.86);
@@ -943,6 +995,10 @@ body {
     background: var(--colors-badge-neutral-bg);
 }
 
+  .bg_badge\.dangerBg {
+    background: var(--colors-badge-danger-bg);
+}
+
   .inset_0 {
     inset: var(--spacing-0);
 }
@@ -967,8 +1023,8 @@ body {
     background: var(--colors-text-accent);
 }
 
-  .anim_loadingPulse_1\.2s_ease-out_infinite {
-    animation: loadingPulse 1.2s ease-out infinite;
+  .anim_loadingPulse_1\.4s_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)_infinite {
+    animation: loadingPulse 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
 }
 
   .p_1 {
@@ -983,12 +1039,8 @@ body {
     background: var(--colors-bg-card-strong);
 }
 
-  .bg_rgba\(127\,_146\,_184\,_0\.14\) {
-    background: rgba(127, 146, 184, 0.14);
-}
-
-  .bg_rgba\(117\,_138\,_178\,_0\.16\) {
-    background: rgba(117, 138, 178, 0.16);
+  .bg_bg\.cardAlt {
+    background: var(--colors-bg-card-alt);
 }
 
   .p_4 {
@@ -1011,12 +1063,8 @@ body {
     border: 0;
 }
 
-  .bg_bg\.cardAlt {
-    background: var(--colors-bg-card-alt);
-}
-
-  .bg_linear-gradient\(135deg\,_rgba\(31\,67\,182\,0\.96\)_0\%\,_rgba\(49\,94\,255\,0\.92\)_100\%\) {
-    background: linear-gradient(135deg, rgba(31,67,182,0.96) 0%, rgba(49,94,255,0.92) 100%);
+  .bg_text\.error {
+    background: var(--colors-text-error);
 }
 
   .p_3 {
@@ -1027,10 +1075,6 @@ body {
     background: var(--colors-bg-menu);
 }
 
-  .p_2 {
-    padding: var(--spacing-2);
-}
-
   .p_1\.5 {
     padding: var(--spacing-1\.5);
 }
@@ -1067,12 +1111,12 @@ body {
     overscroll-behavior: contain;
 }
 
-  .px_3 {
-    padding-inline: var(--spacing-3);
+  .px_2\.5 {
+    padding-inline: var(--spacing-2\.5);
 }
 
-  .py_1\.5 {
-    padding-block: var(--spacing-1\.5);
+  .py_1 {
+    padding-block: var(--spacing-1);
 }
 
   .bd-c_badge\.successBorder {
@@ -1091,6 +1135,10 @@ body {
     border-color: var(--colors-badge-neutral-border);
 }
 
+  .bd-c_badge\.dangerBorder {
+    border-color: var(--colors-badge-danger-border);
+}
+
   .gap_2 {
     gap: var(--spacing-2);
 }
@@ -1103,16 +1151,16 @@ body {
     padding-block: var(--spacing-3);
 }
 
-  .bdr_2xl {
-    border-radius: var(--radii-2xl);
+  .bdr_xl {
+    border-radius: var(--radii-xl);
 }
 
   .py_3\.5 {
     padding-block: var(--spacing-3\.5);
 }
 
-  .trs_all_160ms_ease {
-    transition: all 160ms ease;
+  .trs_border-color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_background-color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_box-shadow_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\) {
+    transition: border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), background-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
 }
 
   .bd-c_border\.accent {
@@ -1127,6 +1175,14 @@ body {
     border-radius: var(--radii-md);
 }
 
+  .bd-w_1\.5px {
+    border-width: 1.5px;
+}
+
+  .trs_border-color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_background-color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_transform_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\) {
+    transition: border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), background-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
   .gap_1 {
     gap: var(--spacing-1);
 }
@@ -1143,6 +1199,10 @@ body {
     padding-block: var(--spacing-2);
 }
 
+  .trs_background-color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_border-color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_box-shadow_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\) {
+    transition: background-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
   .bd-c_transparent {
     border-color: var(--colors-transparent);
 }
@@ -1155,24 +1215,24 @@ body {
     border-radius: var(--radii-lg);
 }
 
-  .py_2\.5 {
-    padding-block: var(--spacing-2\.5);
+  .px_3 {
+    padding-inline: var(--spacing-3);
 }
 
-  .bdr_xl {
-    border-radius: var(--radii-xl);
+  .py_2\.5 {
+    padding-block: var(--spacing-2\.5);
 }
 
-  .trs_transform_160ms_ease {
-    transition: transform 160ms ease;
+  .trs_transform_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\) {
+    transition: transform 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
 }
 
-  .trs_all_140ms_ease {
-    transition: all 140ms ease;
+  .trs_border-color_140ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_background-color_140ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_color_140ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\) {
+    transition: border-color 140ms cubic-bezier(0.25, 0.1, 0.25, 1), background-color 140ms cubic-bezier(0.25, 0.1, 0.25, 1), color 140ms cubic-bezier(0.25, 0.1, 0.25, 1);
 }
 
-  .trs_opacity_140ms_ease {
-    transition: opacity 140ms ease;
+  .trs_opacity_140ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\) {
+    transition: opacity 140ms cubic-bezier(0.25, 0.1, 0.25, 1);
 }
 
   .flex_1 {
@@ -1191,6 +1251,10 @@ body {
     border-color: var(--colors-border-subtle);
 }
 
+  .bdr_2xl {
+    border-radius: var(--radii-2xl);
+}
+
   .bdr_3xl {
     border-radius: var(--radii-3xl);
 }
@@ -1199,28 +1263,52 @@ body {
     outline: 2px solid var(--colors-text-accent);
 }
 
-  .trs_border-color_160ms_ease\,_background_160ms_ease\,_transform_160ms_ease {
-    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
+  .trs_border-color_160ms_ease\,_background-color_160ms_ease\,_box-shadow_160ms_ease {
+    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
 }
 
-  .trs_border-color_160ms_ease\,_background_160ms_ease {
-    transition: border-color 160ms ease, background 160ms ease;
+  .trs_border-color_160ms_ease\,_background-color_160ms_ease {
+    transition: border-color 160ms ease, background-color 160ms ease;
 }
 
   .py_4 {
     padding-block: var(--spacing-4);
 }
 
+  .trs_border-color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_box-shadow_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\) {
+    transition: border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
   .bd-c_border\.soft {
     border-color: var(--colors-border-soft);
 }
 
-  .px_2\.5 {
-    padding-inline: var(--spacing-2\.5);
+  .trs_border-color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\) {
+    transition: border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+  .tw_balance {
+    text-wrap: balance;
+}
+
+  .py_1\.5 {
+    padding-block: var(--spacing-1\.5);
+}
+
+  .trs_background-color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_border-color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_box-shadow_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_opacity_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_transform_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\) {
+    transition: background-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 160ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity 160ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
 }
 
-  .bd-c_rgba\(255\,255\,255\,0\.18\) {
-    border-color: rgba(255,255,255,0.18);
+  .px_5 {
+    padding-inline: var(--spacing-5);
+}
+
+  .bd-c_border\.danger {
+    border-color: var(--colors-border-danger);
+}
+
+  .trs_border-color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_background-color_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_box-shadow_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)\,_transform_160ms_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\) {
+    transition: border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), background-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 160ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
 }
 
   .d_flex {
@@ -1235,6 +1323,10 @@ body {
     justify-content: center;
 }
 
+  .flex-sh_0 {
+    flex-shrink: 0;
+}
+
   .c_text\.accent {
     color: var(--colors-text-accent);
 }
@@ -1299,6 +1391,10 @@ body {
     color: var(--colors-text-primary);
 }
 
+  .lh_1\.3 {
+    line-height: 1.3;
+}
+
   .grid-tr_auto_minmax\(0\,_1fr\) {
     grid-template-rows: auto minmax(0, 1fr);
 }
@@ -1331,17 +1427,16 @@ body {
     text-transform: uppercase;
 }
 
-  .ls_0\.1em {
-    letter-spacing: 0.1em;
+  .ls_0\.06em {
+    letter-spacing: 0.06em;
 }
 
-  .bkdp_blur\(16px\)_saturate\(140\%\) {
-    backdrop-filter: blur(16px) saturate(140%);
-    -webkit-backdrop-filter: blur(16px) saturate(140%);
+  .lh_1 {
+    line-height: 1;
 }
 
-  .bx-sh_inset_0_1px_0_rgba\(255\,255\,255\,0\.16\) {
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
+  .white-space_nowrap {
+    white-space: nowrap;
 }
 
   .c_badge\.successText {
@@ -1356,6 +1451,10 @@ body {
     color: var(--colors-badge-neutral-text);
 }
 
+  .c_badge\.dangerText {
+    color: var(--colors-badge-danger-text);
+}
+
   .vis_hidden {
     visibility: hidden;
 }
@@ -1372,46 +1471,30 @@ body {
     text-align: left;
 }
 
-  .bx-sh_0_18px_40px_-30px_rgba\(49\,94\,255\,0\.56\) {
-    box-shadow: 0 18px 40px -30px rgba(49,94,255,0.56);
-}
-
-  .bx-sh_0_14px_32px_-30px_rgba\(15\,23\,42\,0\.42\) {
-    box-shadow: 0 14px 32px -30px rgba(15,23,42,0.42);
-}
-
   .cursor_not-allowed {
     cursor: not-allowed;
 }
 
-  .op_0\.5 {
-    opacity: 0.5;
+  .op_0\.45 {
+    opacity: 0.45;
 }
 
   .cursor_pointer {
     cursor: pointer;
 }
 
-  .flex-sh_0 {
-    flex-shrink: 0;
-}
-
   .c_text\.inverse {
     color: var(--colors-text-inverse);
 }
 
-  .bx-sh_0_12px_24px_-16px_rgba\(49\,94\,255\,0\.7\) {
-    box-shadow: 0 12px 24px -16px rgba(49,94,255,0.7);
+  .trf_scale\(1\) {
+    transform: scale(1);
 }
 
   .c_transparent {
     color: var(--colors-transparent);
 }
 
-  .bx-sh_inset_0_1px_0_rgba\(255\,255\,255\,0\.32\) {
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.32);
-}
-
   .lh_1\.45 {
     line-height: 1.45;
 }
@@ -1420,29 +1503,16 @@ body {
     line-height: 1.55;
 }
 
-  .lh_1\.5 {
-    line-height: 1.5;
-}
-
-  .bx-sh_0_0_0_0_rgba\(49\,94\,255\,0\.35\) {
-    box-shadow: 0 0 0 0 rgba(49,94,255,0.35);
-}
-
-  .bkdp_blur\(18px\)_saturate\(140\%\) {
-    backdrop-filter: blur(18px) saturate(140%);
-    -webkit-backdrop-filter: blur(18px) saturate(140%);
-}
-
-  .bx-sh_inset_0_1px_0_rgba\(255\,255\,255\,0\.18\) {
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
-}
-
   .fw_600 {
     font-weight: 600;
 }
 
-  .bx-sh_0_14px_26px_-16px_rgba\(49\,94\,255\,0\.68\) {
-    box-shadow: 0 14px 26px -16px rgba(49,94,255,0.68);
+  .lh_1\.5 {
+    line-height: 1.5;
+}
+
+  .bx-sh_0_0_0_0_var\(--colors-bg-accentSoft\,_rgba\(49\,_94\,_255\,_0\.3\)\) {
+    box-shadow: 0 0 0 0 var(--colors-bg-accentSoft, rgba(49, 94, 255, 0.3));
 }
 
   .bx-sh_none {
@@ -1453,27 +1523,10 @@ body {
     z-index: 30;
 }
 
-  .bkdp_blur\(24px\)_saturate\(145\%\) {
-    backdrop-filter: blur(24px) saturate(145%);
-    -webkit-backdrop-filter: blur(24px) saturate(145%);
-}
-
-  .bx-sh_0_18px_42px_-28px_rgba\(49\,94\,255\,0\.42\) {
-    box-shadow: 0 18px 42px -28px rgba(49,94,255,0.42);
-}
-
-  .bx-sh_inset_0_1px_0_rgba\(255\,255\,255\,0\.22\) {
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
-}
-
   .c_text\.muted {
     color: var(--colors-text-muted);
 }
 
-  .op_0\.55 {
-    opacity: 0.55;
-}
-
   .trf_rotate\(180deg\) {
     transform: rotate(180deg);
 }
@@ -1498,10 +1551,6 @@ body {
     text-overflow: ellipsis;
 }
 
-  .white-space_nowrap {
-    white-space: nowrap;
-}
-
   .ov-wrap_anywhere {
     overflow-wrap: anywhere;
 }
@@ -1565,6 +1614,14 @@ body {
     justify-content: flex-end;
 }
 
+  .scr-bar-w_thin {
+    scrollbar-width: thin;
+}
+
+  .scr-bar-c_rgba\(148\,_163\,_184\,_0\.3\)_transparent {
+    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
+}
+
   .ai_start {
     align-items: start;
 }
@@ -1585,47 +1642,16 @@ body {
     outline-offset: 2px;
 }
 
-  .bkdp_blur\(22px\)_saturate\(145\%\) {
-    backdrop-filter: blur(22px) saturate(145%);
-    -webkit-backdrop-filter: blur(22px) saturate(145%);
-}
-
-  .bx-sh_inset_0_1px_0_rgba\(255\,255\,255\,0\.24\)\,_0_14px_28px_-28px_rgba\(15\,23\,42\,0\.42\) {
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 14px 28px -28px rgba(15,23,42,0.42);
-}
-
-  .bkdp_blur\(20px\)_saturate\(145\%\) {
-    backdrop-filter: blur(20px) saturate(145%);
-    -webkit-backdrop-filter: blur(20px) saturate(145%);
-}
-
-  .bx-sh_inset_0_1px_0_rgba\(255\,255\,255\,0\.2\) {
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
-}
-
   .ff_mono {
     font-family: var(--fonts-mono);
 }
 
-  .bx-sh_inset_0_1px_0_rgba\(255\,255\,255\,0\.24\)\,_0_18px_36px_-32px_rgba\(15\,23\,42\,0\.42\) {
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 18px 36px -32px rgba(15,23,42,0.42);
+  .bx-sh_0_1px_2px_0_rgba\(15\,23\,42\,0\.04\)\,_0_1px_3px_0_rgba\(15\,23\,42\,0\.06\) {
+    box-shadow: 0 1px 2px 0 rgba(15,23,42,0.04), 0 1px 3px 0 rgba(15,23,42,0.06);
 }
 
-  .bkdp_blur\(28px\)_saturate\(155\%\) {
-    backdrop-filter: blur(28px) saturate(155%);
-    -webkit-backdrop-filter: blur(28px) saturate(155%);
-}
-
-  .bx-sh_0_25px_30px_-35px_rgba\(15\,23\,42\,0\.42\) {
-    box-shadow: 0 25px 30px -35px rgba(15,23,42,0.42);
-}
-
-  .bx-sh_0_16px_32px_-28px_rgba\(15\,23\,42\,0\.42\) {
-    box-shadow: 0 16px 32px -28px rgba(15,23,42,0.42);
-}
-
-  .ls_0\.12em {
-    letter-spacing: 0.12em;
+  .bx-sh_0_1px_2px_0_rgba\(15\,23\,42\,0\.04\)\,_0_4px_12px_-4px_rgba\(15\,23\,42\,0\.1\) {
+    box-shadow: 0 1px 2px 0 rgba(15,23,42,0.04), 0 4px 12px -4px rgba(15,23,42,0.1);
 }
 
   .ff_heading {
@@ -1636,10 +1662,6 @@ body {
     font-size: var(--font-sizes-2xl);
 }
 
-  .lh_1 {
-    line-height: 1;
-}
-
   .lh_1\.1 {
     line-height: 1.1;
 }
@@ -1648,13 +1670,8 @@ body {
     white-space: pre-wrap;
 }
 
-  .ls_0\.01em {
-    letter-spacing: 0.01em;
-}
-
-  .bkdp_blur\(22px\)_saturate\(140\%\) {
-    backdrop-filter: blur(22px) saturate(140%);
-    -webkit-backdrop-filter: blur(22px) saturate(140%);
+  .ls_0\.005em {
+    letter-spacing: 0.005em;
 }
 
   .us_none {
@@ -1662,29 +1679,24 @@ body {
     user-select: none;
 }
 
-  .bx-sh_0_22px_36px_-24px_rgba\(49\,94\,255\,0\.78\)\,_inset_0_1px_0_rgba\(255\,255\,255\,0\.24\) {
-    box-shadow: 0 22px 36px -24px rgba(49,94,255,0.78), inset 0 1px 0 rgba(255,255,255,0.24);
-}
-
-  .bkdp_blur\(34px\)_saturate\(165\%\) {
-    backdrop-filter: blur(34px) saturate(165%);
-    -webkit-backdrop-filter: blur(34px) saturate(165%);
+  .fs_md {
+    font-size: var(--font-sizes-md);
 }
 
-  .bx-sh_0_32px_70px_-40px_rgba\(15\,23\,42\,0\.5\) {
-    box-shadow: 0 32px 70px -40px rgba(15,23,42,0.5);
+  .bx-sh_0_4px_16px_-4px_rgba\(15\,23\,42\,0\.1\)\,_0_8px_24px_-8px_rgba\(15\,23\,42\,0\.08\)\,_0_1px_2px_0_rgba\(15\,23\,42\,0\.04\) {
+    box-shadow: 0 4px 16px -4px rgba(15,23,42,0.1), 0 8px 24px -8px rgba(15,23,42,0.08), 0 1px 2px 0 rgba(15,23,42,0.04);
 }
 
   .pos_fixed {
     position: fixed;
 }
 
-  .w_10 {
-    width: var(--sizes-10);
+  .w_9 {
+    width: var(--sizes-9);
 }
 
-  .h_10 {
-    height: var(--sizes-10);
+  .h_9 {
+    height: var(--sizes-9);
 }
 
   .mb_3 {
@@ -1711,8 +1723,8 @@ body {
     min-height: var(--sizes-0);
 }
 
-  .mb_5 {
-    margin-bottom: var(--spacing-5);
+  .mb_4 {
+    margin-bottom: var(--spacing-4);
 }
 
   .max-w_2xl {
@@ -1835,8 +1847,8 @@ body {
     min-height: 420px;
 }
 
-  .top_calc\(100\%_\+_10px\) {
-    top: calc(100% + 10px);
+  .top_calc\(100\%_\+_6px\) {
+    top: calc(100% + 6px);
 }
 
   .left_0 {
@@ -1847,36 +1859,48 @@ body {
     right: var(--spacing-0);
 }
 
+  [data-theme="dark"] .dark\:bg_rgba\(138\,_180\,_255\,_0\.2\) {
+    background: rgba(138, 180, 255, 0.2);
+}
+
+  [data-theme="dark"] .dark\:bg_bg\.input {
+    background: var(--colors-bg-input);
+}
+
   .before\:inset_0::before {
     inset: var(--spacing-0);
 }
 
-  .before\:bg_linear-gradient\(90deg\,_rgba\(255\,255\,255\,0\)_0\%\,_rgba\(255\,255\,255\,0\.62\)_50\%\,_rgba\(255\,255\,255\,0\)_100\%\)::before {
-    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.62) 50%, rgba(255,255,255,0) 100%);
+  .before\:bg_linear-gradient\(90deg\,_transparent_0\%\,_var\(--colors-bg-overlay\,_rgba\(255\,255\,255\,0\.36\)\)_50\%\,_transparent_100\%\)::before {
+    background: linear-gradient(90deg, transparent 0%, var(--colors-bg-overlay, rgba(255,255,255,0.36)) 50%, transparent 100%);
 }
 
-  .before\:anim_aggc-shimmer_1\.45s_ease-in-out_infinite::before {
-    animation: aggc-shimmer 1.45s ease-in-out infinite;
+  .before\:anim_aggc-shimmer_1\.6s_cubic-bezier\(0\.25\,_0\.1\,_0\.25\,_1\)_infinite::before {
+    animation: aggc-shimmer 1.6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
 }
 
-  [data-theme="dark"] .dark\:bg_rgba\(210\,_220\,_240\,_0\.09\) {
-    background: rgba(210, 220, 240, 0.09);
+  [data-theme="dark"] .dark\:bg_rgba\(255\,_255\,_255\,_0\.04\) {
+    background: rgba(255, 255, 255, 0.04);
 }
 
-  [data-theme="dark"] .dark\:bg_rgba\(210\,_220\,_240\,_0\.11\) {
-    background: rgba(210, 220, 240, 0.11);
+  [data-theme="dark"] .dark\:bd-c_border\.default {
+    border-color: var(--colors-border-default);
+}
+
+  [data-theme="dark"] .dark\:bd-c_border\.strong {
+    border-color: var(--colors-border-strong);
 }
 
-  .before\:bg_linear-gradient\(180deg\,_rgba\(255\,255\,255\,0\.28\)_0\%\,_rgba\(255\,255\,255\,0\.04\)_18\%\,_rgba\(255\,255\,255\,0\)_100\%\)::before {
-    background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.04) 18%, rgba(255,255,255,0) 100%);
+  [data-theme="dark"] .dark\:bd-c_border\.accent {
+    border-color: var(--colors-border-accent);
 }
 
-  [data-theme="dark"] .dark\:bd-c_rgba\(255\,255\,255\,0\.06\) {
-    border-color: rgba(255,255,255,0.06);
+  [data-theme="dark"] .dark\:bd-c_border\.subtle {
+    border-color: var(--colors-border-subtle);
 }
 
-  [data-theme="dark"] .dark\:bx-sh_inset_0_1px_0_rgba\(255\,255\,255\,0\.04\) {
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
+  [data-theme="dark"] .dark\:c_text\.accent {
+    color: var(--colors-text-accent);
 }
 
   .before\:content_\"\"::before {
@@ -1891,50 +1915,64 @@ body {
     transform: translateX(-100%);
 }
 
+  [data-theme="dark"] .dark\:scr-bar-c_rgba\(255\,_255\,_255\,_0\.12\)_transparent {
+    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
+}
+
   .placeholder\:c_text\.muted::placeholder,.placeholder\:c_text\.muted[data-placeholder] {
     color: var(--colors-text-muted);
 }
 
-  [data-theme="dark"] .dark\:bx-sh_inset_0_1px_0_rgba\(255\,255\,255\,0\.03\) {
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
+  [data-theme="dark"] .dark\:bx-sh_0_1px_2px_0_rgba\(0\,0\,0\,0\.2\)\,_0_1px_3px_0_rgba\(0\,0\,0\,0\.24\) {
+    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 0 1px 3px 0 rgba(0,0,0,0.24);
 }
 
-  .before\:pointer-events_none::before {
-    pointer-events: none;
+  [data-theme="dark"] .dark\:bx-sh_0_1px_2px_0_rgba\(0\,0\,0\,0\.24\)\,_0_4px_12px_-4px_rgba\(0\,0\,0\,0\.4\) {
+    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.24), 0 4px 12px -4px rgba(0,0,0,0.4);
 }
 
-  [data-theme="dark"] .dark\:bkdp_blur\(12px\)_saturate\(110\%\) {
-    backdrop-filter: blur(12px) saturate(110%);
-    -webkit-backdrop-filter: blur(12px) saturate(110%);
+  [data-theme="dark"] .dark\:c_text\.inverse {
+    color: var(--colors-text-inverse);
 }
 
-  [data-theme="dark"] .dark\:bx-sh_0_16px_34px_-28px_rgba\(0\,0\,0\,0\.92\) {
-    box-shadow: 0 16px 34px -28px rgba(0,0,0,0.92);
+  [data-theme="dark"] .dark\:bx-sh_0_4px_16px_-4px_rgba\(0\,0\,0\,0\.32\)\,_0_8px_24px_-8px_rgba\(0\,0\,0\,0\.24\)\,_0_1px_2px_0_rgba\(0\,0\,0\,0\.16\) {
+    box-shadow: 0 4px 16px -4px rgba(0,0,0,0.32), 0 8px 24px -8px rgba(0,0,0,0.24), 0 1px 2px 0 rgba(0,0,0,0.16);
 }
 
-  [data-theme="dark"] .dark\:bkdp_blur\(10px\)_saturate\(105\%\) {
-    backdrop-filter: blur(10px) saturate(105%);
-    -webkit-backdrop-filter: blur(10px) saturate(105%);
+  .focusVisible\:ring_2px_solid:is(:focus-visible, [data-focus-visible]) {
+    outline: 2px solid;
 }
 
-  [data-theme="dark"] .dark\:c_\#f7f9fd {
-    color: #f7f9fd;
+  .focusVisible\:ring_none:is(:focus-visible, [data-focus-visible]) {
+    outline: var(--borders-none);
 }
 
-  [data-theme="dark"] .dark\:bx-sh_0_22px_40px_-24px_rgba\(71\,121\,255\,0\.55\)\,_inset_0_1px_0_rgba\(255\,255\,255\,0\.18\) {
-    box-shadow: 0 22px 40px -24px rgba(71,121,255,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
+  .focusVisible\:bd-c_border\.accent:is(:focus-visible, [data-focus-visible]) {
+    border-color: var(--colors-border-accent);
 }
 
-  .focusVisible\:ring_2px_solid:is(:focus-visible, [data-focus-visible]) {
-    outline: 2px solid;
+  .focusVisible\:ring-c_text\.accent:is(:focus-visible, [data-focus-visible]) {
+    outline-color: var(--colors-text-accent);
+}
+
+  .focusVisible\:ring-o_2px:is(:focus-visible, [data-focus-visible]) {
+    outline-offset: 2px;
+}
+
+  .focusVisible\:ring-o_-2px:is(:focus-visible, [data-focus-visible]) {
+    outline-offset: -2px;
 }
 
   .focusVisible\:ring-c_border\.accent:is(:focus-visible, [data-focus-visible]) {
     outline-color: var(--colors-border-accent);
 }
 
-  .focusVisible\:ring-o_2px:is(:focus-visible, [data-focus-visible]) {
-    outline-offset: 2px;
+  .focusVisible\:bx-sh_0_0_0_3px_rgba\(82\,_121\,_255\,_0\.18\):is(:focus-visible, [data-focus-visible]) {
+    box-shadow: 0 0 0 3px rgba(82, 121, 255, 0.18);
+}
+
+  .focusVisible\:bx-sh_0_0_0_3px_var\(--colors-bg-accentSoft\,_rgba\(49\,_94\,_255\,_0\.12\)\):is(:focus-visible, [data-focus-visible]) {
+    box-shadow: 0 0 0 3px var(--colors-bg-accentSoft, rgba(49, 94, 255, 0.12));
 }
 
   .hover\:bg_bg\.accentStrong:is(:hover, [data-hover]) {
@@ -1953,6 +1991,18 @@ body {
     background: var(--colors-bg-selected);
 }
 
+  .hover\:bg_text\.accent:is(:hover, [data-hover]) {
+    background: var(--colors-text-accent);
+}
+
+  .hover\:bg_text\.error:is(:hover, [data-hover]) {
+    background: var(--colors-text-error);
+}
+
+  .hover\:bg_badge\.dangerBg:is(:hover, [data-hover]) {
+    background: var(--colors-badge-danger-bg);
+}
+
   .hover\:bg_bg\.card:is(:hover, [data-hover]) {
     background: var(--colors-bg-card);
 }
@@ -1965,24 +2015,52 @@ body {
     border-color: var(--colors-border-strong);
 }
 
-  .hover\:trf_translateY\(-1px\):is(:hover, [data-hover]) {
-    transform: translateY(-1px);
+  .hover\:bd-c_text\.error:is(:hover, [data-hover]) {
+    border-color: var(--colors-text-error);
 }
 
   .hover\:c_text\.primary:is(:hover, [data-hover]) {
     color: var(--colors-text-primary);
 }
 
-  .hover\:bx-sh_0_24px_42px_-24px_rgba\(49\,94\,255\,0\.82\)\,_inset_0_1px_0_rgba\(255\,255\,255\,0\.28\):is(:hover, [data-hover]) {
-    box-shadow: 0 24px 42px -24px rgba(49,94,255,0.82), inset 0 1px 0 rgba(255,255,255,0.28);
+  .hover\:bx-sh_0_2px_8px_-2px_rgba\(49\,_94\,_255\,_0\.4\):is(:hover, [data-hover]) {
+    box-shadow: 0 2px 8px -2px rgba(49, 94, 255, 0.4);
+}
+
+  .hover\:bx-sh_0_2px_8px_-2px_rgba\(217\,_45\,_32\,_0\.4\):is(:hover, [data-hover]) {
+    box-shadow: 0 2px 8px -2px rgba(217, 45, 32, 0.4);
+}
+
+  .hover\:c_text\.error:is(:hover, [data-hover]) {
+    color: var(--colors-text-error);
+}
+
+  [data-theme="dark"] .dark\:before\:bg_linear-gradient\(90deg\,_transparent_0\%\,_rgba\(186\,_204\,_236\,_0\.1\)_50\%\,_transparent_100\%\)::before {
+    background: linear-gradient(90deg, transparent 0%, rgba(186, 204, 236, 0.1) 50%, transparent 100%);
+}
+
+  [data-theme="dark"] .dark\:hover\:bd-c_border\.accent:is(:hover, [data-hover]) {
+    border-color: var(--colors-border-accent);
+}
+
+  [data-theme="dark"] .dark\:focusVisible\:bx-sh_0_0_0_3px_var\(--colors-bg-accentSoft\,_rgba\(138\,_180\,_255\,_0\.14\)\):is(:focus-visible, [data-focus-visible]) {
+    box-shadow: 0 0 0 3px var(--colors-bg-accentSoft, rgba(138, 180, 255, 0.14));
+}
+
+  [data-theme="dark"] .hover\:dark\:bg_bg\.input:is(:hover, [data-hover]) {
+    background: var(--colors-bg-input);
+}
+
+  [data-theme="dark"] .hover\:dark\:bg_rgba\(255\,_255\,_255\,_0\.06\):is(:hover, [data-hover]) {
+    background: rgba(255, 255, 255, 0.06);
 }
 
-  [data-theme="dark"] .dark\:before\:bg_linear-gradient\(90deg\,_rgba\(255\,255\,255\,0\)_0\%\,_rgba\(186\,204\,236\,0\.22\)_50\%\,_rgba\(255\,255\,255\,0\)_100\%\)::before {
-    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(186,204,236,0.22) 50%, rgba(255,255,255,0) 100%);
+  [data-theme="dark"] .hover\:dark\:bx-sh_0_2px_8px_-2px_rgba\(138\,_180\,_255\,_0\.3\):is(:hover, [data-hover]) {
+    box-shadow: 0 2px 8px -2px rgba(138, 180, 255, 0.3);
 }
 
-  [data-theme="dark"] .dark\:before\:bg_none::before {
-    background: none;
+  [data-theme="dark"] .hover\:dark\:bx-sh_0_2px_8px_-2px_rgba\(255\,_142\,_127\,_0\.3\):is(:hover, [data-hover]) {
+    box-shadow: 0 2px 8px -2px rgba(255, 142, 127, 0.3);
 }
 
   @media screen and (min-width: 48rem) {