@owodesign/owoui 0.1.2 → 0.1.3

package/dist/storybook-static/app.css

@@ -1,4 +1,5 @@
 /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -13,7 +14,6 @@
     --container-md: 28rem;
     --container-lg: 32rem;
     --container-2xl: 42rem;
-    --container-4xl: 56rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -22,11 +22,24 @@
     --text-base--line-height: calc(1.5 / 1);
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
     --text-2xl: 1.5rem;
     --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    --tracking-tighter: -0.05em;
+    --tracking-tight: -0.025em;
     --tracking-wider: 0.05em;
+    --tracking-widest: 0.1em;
+    --leading-tight: 1.25;
+    --leading-snug: 1.375;
     --leading-relaxed: 1.625;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
@@ -44,10 +57,9 @@
     --color-n600: #71717a;
     --color-n500: #a1a1aa;
     --color-n400: #d4d4d8;
-    --color-n300: #e4e4e7;
-    --color-brand-primary: #9f1239;
-    --color-brand-primary-hover: #be123c;
-    --color-surface-canvas: #fafafa;
+    --color-brand-primary: #1a1a1a;
+    --color-brand-primary-hover: #000000;
+    --color-surface-canvas: #ffffff;
     --color-surface-base: #ffffff;
     --color-surface-subtle: #fafaf9;
     --color-surface-raised: #ffffff;
@@ -277,6 +289,15 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-1\/2 {
+    top: calc(1 / 2 * 100%);
+  }
+  .top-16 {
+    top: calc(var(--spacing) * 16);
+  }
+  .top-full {
+    top: 100%;
+  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
@@ -289,12 +310,21 @@
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
+  .left-2\.5 {
+    left: calc(var(--spacing) * 2.5);
+  }
+  .left-4 {
+    left: calc(var(--spacing) * 4);
+  }
   .z-10 {
     z-index: 10;
   }
   .z-20 {
     z-index: 20;
   }
+  .z-40 {
+    z-index: 40;
+  }
   .z-50 {
     z-index: 50;
   }
@@ -337,8 +367,8 @@
   .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
-  .mt-4 {
-    margin-top: calc(var(--spacing) * 4);
+  .mt-auto {
+    margin-top: auto;
   }
   .-mr-1 {
     margin-right: calc(var(--spacing) * -1);
@@ -349,20 +379,29 @@
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
-  .mb-1\.5 {
-    margin-bottom: calc(var(--spacing) * 1.5);
-  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
   .mb-3 {
     margin-bottom: calc(var(--spacing) * 3);
   }
-  .mb-5 {
-    margin-bottom: calc(var(--spacing) * 5);
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
   }
-  .mb-8 {
-    margin-bottom: calc(var(--spacing) * 8);
+  .ml-64 {
+    margin-left: calc(var(--spacing) * 64);
+  }
+  .ml-auto {
+    margin-left: auto;
+  }
+  .line-clamp-2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
   }
   .block {
     display: block;
@@ -382,6 +421,12 @@
   .inline-flex {
     display: inline-flex;
   }
+  .table {
+    display: table;
+  }
+  .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
   .h-3 {
     height: calc(var(--spacing) * 3);
   }
@@ -412,18 +457,33 @@
   .h-14 {
     height: calc(var(--spacing) * 14);
   }
+  .h-16 {
+    height: calc(var(--spacing) * 16);
+  }
+  .h-24 {
+    height: calc(var(--spacing) * 24);
+  }
+  .h-28 {
+    height: calc(var(--spacing) * 28);
+  }
+  .h-48 {
+    height: calc(var(--spacing) * 48);
+  }
   .h-\[20rem\] {
     height: 20rem;
   }
   .h-\[26rem\] {
     height: 26rem;
   }
-  .h-dvh {
-    height: 100dvh;
+  .h-\[500px\] {
+    height: 500px;
   }
   .h-full {
     height: 100%;
   }
+  .max-h-52 {
+    max-height: calc(var(--spacing) * 52);
+  }
   .max-h-60 {
     max-height: calc(var(--spacing) * 60);
   }
@@ -445,12 +505,24 @@
   .min-h-dvh {
     min-height: 100dvh;
   }
+  .min-h-screen {
+    min-height: 100vh;
+  }
+  .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
+  .w-2\/5 {
+    width: calc(2 / 5 * 100%);
+  }
   .w-3\.5 {
     width: calc(var(--spacing) * 3.5);
   }
   .w-3\/4 {
     width: calc(3 / 4 * 100%);
   }
+  .w-3\/5 {
+    width: calc(3 / 5 * 100%);
+  }
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
@@ -481,6 +553,9 @@
   .w-14 {
     width: calc(var(--spacing) * 14);
   }
+  .w-16 {
+    width: calc(var(--spacing) * 16);
+  }
   .w-20 {
     width: calc(var(--spacing) * 20);
   }
@@ -490,15 +565,18 @@
   .w-32 {
     width: calc(var(--spacing) * 32);
   }
+  .w-36 {
+    width: calc(var(--spacing) * 36);
+  }
+  .w-44 {
+    width: calc(var(--spacing) * 44);
+  }
   .w-48 {
     width: calc(var(--spacing) * 48);
   }
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
-  .w-72 {
-    width: calc(var(--spacing) * 72);
-  }
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
@@ -508,9 +586,6 @@
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
-  .max-w-4xl {
-    max-width: var(--container-4xl);
-  }
   .max-w-\[26rem\] {
     max-width: 26rem;
   }
@@ -520,6 +595,9 @@
   .max-w-\[200px\] {
     max-width: 200px;
   }
+  .max-w-\[1400px\] {
+    max-width: 1400px;
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -538,8 +616,8 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
-  .min-w-\[120px\] {
-    min-width: 120px;
+  .min-w-\[3ch\] {
+    min-width: 3ch;
   }
   .flex-1 {
     flex: 1;
@@ -547,6 +625,9 @@
   .shrink-0 {
     flex-shrink: 0;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .-translate-x-full {
     --tw-translate-x: -100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -571,6 +652,10 @@
     --tw-translate-x: 100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .rotate-180 {
     rotate: 180deg;
   }
@@ -586,6 +671,9 @@
   .animate-\[tooltip-in_0\.15s_var\(--ease-standard\)\] {
     animation: tooltip-in 0.15s var(--ease-standard);
   }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
   .cursor-default {
     cursor: default;
   }
@@ -601,6 +689,12 @@
   .resize {
     resize: both;
   }
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .grid-cols-\[auto_minmax\(0\,1fr\)\] {
     grid-template-columns: auto minmax(0,1fr);
   }
@@ -613,6 +707,9 @@
   .flex-wrap {
     flex-wrap: wrap;
   }
+  .items-baseline {
+    align-items: baseline;
+  }
   .items-center {
     align-items: center;
   }
@@ -649,12 +746,22 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .gap-5 {
+    gap: calc(var(--spacing) * 5);
+  }
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
+  .space-y-1 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -676,6 +783,20 @@
       margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-5 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-6 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-8 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -683,6 +804,27 @@
       margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-12 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .divide-y {
+    :where(& > :not(:last-child)) {
+      --tw-divide-y-reverse: 0;
+      border-bottom-style: var(--tw-border-style);
+      border-top-style: var(--tw-border-style);
+      border-top-width: calc(1px * var(--tw-divide-y-reverse));
+      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+    }
+  }
+  .divide-\[var\(--ui-surface-border\)\] {
+    :where(& > :not(:last-child)) {
+      border-color: var(--ui-surface-border);
+    }
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -694,18 +836,12 @@
   .overflow-hidden {
     overflow: hidden;
   }
-  .overflow-visible {
-    overflow: visible;
-  }
   .overflow-x-auto {
     overflow-x: auto;
   }
   .overflow-y-auto {
     overflow-y: auto;
   }
-  .overscroll-contain {
-    overscroll-behavior: contain;
-  }
   .rounded {
     border-radius: 0.25rem;
   }
@@ -721,18 +857,14 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
-  .rounded-t-lg {
-    border-top-left-radius: var(--radius-lg);
-    border-top-right-radius: var(--radius-lg);
+  .rounded-t {
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
   }
   .rounded-t-md {
     border-top-left-radius: var(--radius-md);
     border-top-right-radius: var(--radius-md);
   }
-  .rounded-b-lg {
-    border-bottom-right-radius: var(--radius-lg);
-    border-bottom-left-radius: var(--radius-lg);
-  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -773,21 +905,18 @@
   .border-\[var\(--ui-surface-border\)\] {
     border-color: var(--ui-surface-border);
   }
+  .border-\[var\(--ui-surface-border-muted\)\] {
+    border-color: var(--ui-surface-border-muted);
+  }
+  .border-\[var\(--ui-text-primary\)\] {
+    border-color: var(--ui-text-primary);
+  }
   .border-transparent {
     border-color: transparent;
   }
-  .bg-\[color-mix\(in_srgb\,var\(--ui-accent-bg\)_10\%\,transparent\)\] {
-    background-color: var(--ui-accent-bg);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in srgb,var(--ui-accent-bg) 10%,transparent);
-    }
-  }
   .bg-\[var\(--color-code-block-bg\)\] {
     background-color: var(--color-code-block-bg);
   }
-  .bg-\[var\(--color-n300\)\] {
-    background-color: var(--color-n300);
-  }
   .bg-\[var\(--color-overlay-strong\)\] {
     background-color: var(--color-overlay-strong);
   }
@@ -800,12 +929,15 @@
   .bg-\[var\(--color-surface-subtle\)\] {
     background-color: var(--color-surface-subtle);
   }
-  .bg-\[var\(--ui-accent-bg\)\] {
-    background-color: var(--ui-accent-bg);
+  .bg-\[var\(--ui-canvas-bg\)\] {
+    background-color: var(--ui-canvas-bg);
   }
   .bg-\[var\(--ui-surface-bg\)\] {
     background-color: var(--ui-surface-bg);
   }
+  .bg-\[var\(--ui-surface-bg-inset\)\] {
+    background-color: var(--ui-surface-bg-inset);
+  }
   .bg-\[var\(--ui-surface-bg-subtle\)\] {
     background-color: var(--ui-surface-bg-subtle);
   }
@@ -836,6 +968,15 @@
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
+  .p-8 {
+    padding: calc(var(--spacing) * 8);
+  }
+  .p-10 {
+    padding: calc(var(--spacing) * 10);
+  }
+  .p-12 {
+    padding: calc(var(--spacing) * 12);
+  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
@@ -881,12 +1022,18 @@
   .py-5 {
     padding-block: calc(var(--spacing) * 5);
   }
+  .py-6 {
+    padding-block: calc(var(--spacing) * 6);
+  }
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
+  .py-20 {
+    padding-block: calc(var(--spacing) * 20);
+  }
   .pt-1 {
     padding-top: calc(var(--spacing) * 1);
   }
@@ -902,15 +1049,36 @@
   .pt-5 {
     padding-top: calc(var(--spacing) * 5);
   }
+  .pt-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
+  .pt-16 {
+    padding-top: calc(var(--spacing) * 16);
+  }
+  .pt-20 {
+    padding-top: calc(var(--spacing) * 20);
+  }
   .pb-1 {
     padding-bottom: calc(var(--spacing) * 1);
   }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
+  .pb-3 {
+    padding-bottom: calc(var(--spacing) * 3);
+  }
+  .pb-4 {
+    padding-bottom: calc(var(--spacing) * 4);
+  }
   .pb-5 {
     padding-bottom: calc(var(--spacing) * 5);
   }
+  .pb-6 {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
+  .pb-10 {
+    padding-bottom: calc(var(--spacing) * 10);
+  }
   .pb-28 {
     padding-bottom: calc(var(--spacing) * 28);
   }
@@ -923,14 +1091,17 @@
   .pb-48 {
     padding-bottom: calc(var(--spacing) * 48);
   }
+  .pl-8 {
+    padding-left: calc(var(--spacing) * 8);
+  }
   .text-center {
     text-align: center;
   }
   .text-left {
     text-align: left;
   }
-  .text-right {
-    text-align: right;
+  .font-\[family-name\:var\(--font-headline\)\] {
+    font-family: var(--font-headline);
   }
   .font-mono {
     font-family: var(--font-mono);
@@ -939,6 +1110,14 @@
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
   }
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
+  .text-4xl {
+    font-size: var(--text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height));
+  }
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -951,6 +1130,10 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
   .text-xs {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
@@ -965,6 +1148,22 @@
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
   }
+  .leading-snug {
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+  }
+  .leading-tight {
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .font-extrabold {
+    --tw-font-weight: var(--font-weight-extrabold);
+    font-weight: var(--font-weight-extrabold);
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -973,23 +1172,25 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
-  .tracking-\[0\.14em\] {
-    --tw-tracking: 0.14em;
-    letter-spacing: 0.14em;
+  .tracking-\[0\.2em\] {
+    --tw-tracking: 0.2em;
+    letter-spacing: 0.2em;
+  }
+  .tracking-tight {
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
   }
-  .tracking-\[0\.16em\] {
-    --tw-tracking: 0.16em;
-    letter-spacing: 0.16em;
+  .tracking-tighter {
+    --tw-tracking: var(--tracking-tighter);
+    letter-spacing: var(--tracking-tighter);
   }
   .tracking-wider {
     --tw-tracking: var(--tracking-wider);
     letter-spacing: var(--tracking-wider);
   }
-  .text-balance {
-    text-wrap: balance;
-  }
-  .text-pretty {
-    text-wrap: pretty;
+  .tracking-widest {
+    --tw-tracking: var(--tracking-widest);
+    letter-spacing: var(--tracking-widest);
   }
   .whitespace-pre-wrap {
     white-space: pre-wrap;
@@ -997,9 +1198,6 @@
   .text-\[var\(--badge-text\)\] {
     color: var(--badge-text);
   }
-  .text-\[var\(--color-n400\)\] {
-    color: var(--color-n400);
-  }
   .text-\[var\(--color-n500\)\] {
     color: var(--color-n500);
   }
@@ -1012,9 +1210,6 @@
   .text-\[var\(--color-n800\)\] {
     color: var(--color-n800);
   }
-  .text-\[var\(--color-n900\)\] {
-    color: var(--color-n900);
-  }
   .text-\[var\(--ui-accent-bg\)\] {
     color: var(--ui-accent-bg);
   }
@@ -1042,9 +1237,15 @@
   .uppercase {
     text-transform: uppercase;
   }
+  .italic {
+    font-style: italic;
+  }
   .opacity-50 {
     opacity: 50%;
   }
+  .opacity-60 {
+    opacity: 60%;
+  }
   .opacity-80 {
     opacity: 80%;
   }
@@ -1052,6 +1253,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-sm {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1081,6 +1286,11 @@
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-colors {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1113,12 +1323,6 @@
       color: var(--field-placeholder);
     }
   }
-  .last\:border-b-0 {
-    &:last-child {
-      border-bottom-style: var(--tw-border-style);
-      border-bottom-width: 0px;
-    }
-  }
   .hover\:bg-\[var\(--ui-surface-bg-inset\)\] {
     &:hover {
       @media (hover: hover) {
@@ -1126,6 +1330,20 @@
       }
     }
   }
+  .hover\:bg-\[var\(--ui-surface-bg-subtle\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--ui-surface-bg-subtle);
+      }
+    }
+  }
+  .hover\:bg-\[var\(--ui-surface-container-highest\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--ui-surface-container-highest);
+      }
+    }
+  }
   .hover\:text-\[var\(--ui-text-primary\)\] {
     &:hover {
       @media (hover: hover) {
@@ -1133,10 +1351,10 @@
       }
     }
   }
-  .hover\:text-\[var\(--ui-text-secondary\)\] {
+  .hover\:opacity-80 {
     &:hover {
       @media (hover: hover) {
-        color: var(--ui-text-secondary);
+        opacity: 80%;
       }
     }
   }
@@ -1207,11 +1425,6 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .focus\:ring-\[var\(--ui-accent-bg\)\] {
-    &:focus {
-      --tw-ring-color: var(--ui-accent-bg);
-    }
-  }
   .focus\:outline-none {
     &:focus {
       --tw-outline-style: none;
@@ -1256,9 +1469,9 @@
       opacity: var(--button-disabled-opacity);
     }
   }
-  .motion-safe\:animate-spin {
-    @media (prefers-reduced-motion: no-preference) {
-      animation: var(--animate-spin);
+  .sm\:block {
+    @media (width >= 40rem) {
+      display: block;
     }
   }
   .sm\:grid-cols-3 {
@@ -1266,9 +1479,24 @@
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
-  .lg\:inline {
-    @media (width >= 64rem) {
-      display: inline;
+  .md\:flex {
+    @media (width >= 48rem) {
+      display: flex;
+    }
+  }
+  .md\:flex-row {
+    @media (width >= 48rem) {
+      flex-direction: row;
+    }
+  }
+  .md\:items-center {
+    @media (width >= 48rem) {
+      align-items: center;
+    }
+  }
+  .md\:justify-between {
+    @media (width >= 48rem) {
+      justify-content: space-between;
     }
   }
   .lg\:grid-cols-3 {
@@ -1276,49 +1504,28 @@
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
-}
-:root {
-  --theme-surface-canvas: var(--color-surface-canvas);
-  --theme-surface-base: var(--color-surface-base);
-  --theme-surface-subtle: var(--color-surface-subtle);
-  --theme-surface-raised: var(--color-surface-raised);
-  --theme-surface-inset: var(--color-surface-inset);
-  --theme-surface-border: var(--color-surface-border);
-  --theme-surface-border-muted: rgba(0, 0, 0, 0.06);
-  --theme-surface-border-strong: var(--color-surface-ring);
-  --theme-canvas-bg-subtle: #f5f5f4;
-  --theme-surface-container: #f4f4f5;
-  --theme-surface-container-high: #ececed;
-  --theme-surface-container-highest: #e4e4e7;
-  --theme-text-primary: var(--color-n800);
-  --theme-text-secondary: var(--color-n600);
-  --theme-text-muted: var(--color-n500);
-  --theme-text-on-accent: var(--color-text-on-brand);
-  --theme-accent-bg: var(--color-brand-primary);
-  --theme-accent-bg-hover: var(--color-brand-primary-hover);
-  --theme-accent-bg-muted: color-mix(in srgb, #9f1239 10%, #ffffff);
-  @supports (color: color-mix(in lab, red, red)) {
-    --theme-accent-bg-muted: color-mix(in srgb, var(--color-brand-primary) 10%, var(--color-surface-base));
+  .lg\:grid-cols-4 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
   }
-  --theme-accent-border: color-mix(in srgb, #9f1239 40%, transparent);
-  @supports (color: color-mix(in lab, red, red)) {
-    --theme-accent-border: color-mix(in srgb, var(--color-brand-primary) 40%, transparent);
+  .xl\:col-span-2 {
+    @media (width >= 80rem) {
+      grid-column: span 2 / span 2;
+    }
   }
-  --theme-success-bg: var(--color-admin-success-bg);
-  --theme-success-border: var(--color-admin-success-border);
-  --theme-success-text: var(--color-admin-success-text);
-  --theme-warning-bg: var(--color-admin-warning-bg);
-  --theme-warning-border: var(--color-admin-warning-border);
-  --theme-warning-text: var(--color-admin-warning-text);
-  --theme-danger-bg: var(--color-admin-danger-bg);
-  --theme-danger-bg-emphasis: rgba(239, 68, 68, 0.18);
-  --theme-danger-border: var(--color-admin-danger-border);
-  --theme-danger-text: var(--color-admin-danger-text);
-  --theme-info-bg: var(--color-admin-info-bg);
-  --theme-info-border: var(--color-admin-info-border);
-  --theme-info-text: var(--color-admin-info-text);
-  --theme-control-focus-ring: var(--color-surface-ring);
-  --theme-control-focus-ring-offset: var(--color-surface-base);
+  .xl\:grid-cols-3 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  .xl\:grid-cols-4 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+}
+:root {
   --preset-surface-bg: var(--theme-surface-base);
   --preset-surface-bg-subtle: var(--theme-surface-subtle);
   --preset-surface-bg-raised: var(--theme-surface-raised);
@@ -1494,7 +1701,7 @@
   @supports (color: color-mix(in lab, red, red)) {
     --workspace-transition-stale-bg: color-mix(in srgb, var(--color-overlay-soft) 72%, transparent);
   }
-  --tooltip-shadow: var(--ui-surface-shadow);
+  --tooltip-shadow: var(--ui-surface-shadow-strong);
   --select-dropdown-shadow: var(--ui-surface-shadow-strong);
   --theme-picker-shadow: var(--ui-surface-shadow-strong);
   --drawer-panel-shadow: var(--ui-surface-shadow-strong);
@@ -1779,36 +1986,6 @@
   border: 0;
   background: var(--drawer-backdrop);
 }
-.ui-empty-state {
-  --empty-state-bg: var(--ui-surface-bg-raised);
-  --empty-state-border: var(--ui-surface-border);
-  --empty-state-title: var(--ui-text-primary);
-  --empty-state-text: var(--ui-text-muted);
-  --empty-state-icon: var(--ui-text-muted);
-  background: var(--empty-state-bg);
-  border-color: var(--empty-state-border);
-  color: var(--empty-state-text);
-}
-.ui-empty-state__icon {
-  color: var(--empty-state-icon);
-}
-.ui-empty-state__title {
-  color: var(--empty-state-title);
-}
-.ui-empty-state[data-tone="notice"] {
-  --empty-state-bg: var(--ui-info-bg);
-  --empty-state-border: var(--ui-info-border);
-  --empty-state-title: var(--ui-info-text);
-  --empty-state-text: var(--ui-info-text);
-  --empty-state-icon: var(--ui-info-text);
-}
-.ui-empty-state[data-tone="warning"] {
-  --empty-state-bg: var(--ui-warning-bg);
-  --empty-state-border: var(--ui-warning-border);
-  --empty-state-title: var(--ui-warning-text);
-  --empty-state-text: var(--ui-warning-text);
-  --empty-state-icon: var(--ui-warning-text);
-}
 .ui-field {
   --field-label: var(--ui-text-secondary);
   --field-help: var(--ui-text-muted);
@@ -1845,8 +2022,8 @@
   --icon-button-text: var(--ui-text-primary);
 }
 .ui-input {
-  --field-bg: var(--ui-surface-bg-inset);
-  --field-border: transparent;
+  --field-bg: var(--ui-surface-bg);
+  --field-border: var(--ui-surface-border);
   --field-text: var(--ui-text-primary);
   --field-placeholder: var(--ui-text-muted);
   --field-ring: var(--ui-control-focus-ring);
@@ -1903,17 +2080,17 @@
   --tw-ring-color: var(--segmented-ring);
 }
 .ui-select__trigger {
-  --select-bg: var(--ui-surface-bg-inset);
-  --select-border: transparent;
+  --select-bg: var(--ui-surface-bg);
+  --select-border: var(--ui-surface-border);
   --select-text: var(--ui-text-primary);
   --select-ring: var(--ui-control-focus-ring);
   background: var(--select-bg);
-  border: 1px solid var(--select-border);
+  border: 0.5px solid var(--select-border);
   color: var(--select-text);
   --tw-ring-color: var(--select-ring);
 }
 .ui-select__trigger:hover:not(:disabled) {
-  --select-bg: var(--ui-surface-bg-subtle);
+  --select-border: var(--ui-surface-border-strong);
 }
 .ui-select__trigger[data-open] {
   --select-border: var(--ui-surface-border-strong);
@@ -2038,6 +2215,12 @@
 .ui-status-notice__icon {
   color: var(--status-notice-icon);
 }
+.ui-status-notice__title {
+  color: var(--ui-text-primary);
+}
+.ui-status-notice[data-layout="vertical"] .ui-status-notice__title {
+  color: var(--status-notice-text);
+}
 .ui-status-notice[data-tone="info"] {
   --status-notice-bg: var(--feedback-info-bg);
   --status-notice-border: var(--feedback-info-border);
@@ -2172,11 +2355,18 @@
   background: var(--tooltip-bg);
   color: var(--tooltip-text);
   border: 1px solid var(--tooltip-border);
-  box-shadow: var(--tooltip-shadow);
+  box-shadow: 0 0 0 1px var(--tooltip-border), var(--tooltip-shadow);
+  @supports (color: color-mix(in lab, red, red)) {
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tooltip-border) 55%, transparent), var(--tooltip-shadow);
+  }
+  backdrop-filter: blur(10px);
 }
 .ui-tooltip__arrow {
   color: var(--tooltip-arrow-color);
-  filter: drop-shadow(0 1px 0 var(--tooltip-border));
+  filter: drop-shadow(0 1px 0 var(--tooltip-border)) drop-shadow(0 0 0.5px var(--tooltip-border));
+  @supports (color: color-mix(in lab, red, red)) {
+    filter: drop-shadow(0 1px 0 var(--tooltip-border)) drop-shadow(0 0 0.5px color-mix(in srgb, var(--tooltip-border) 55%, transparent));
+  }
 }
 @keyframes tooltip-in {
   from {
@@ -2189,47 +2379,6 @@
   }
 }
 :root {
-  --theme-surface-canvas: var(--color-surface-canvas);
-  --theme-surface-base: var(--color-surface-base);
-  --theme-surface-subtle: var(--color-surface-subtle);
-  --theme-surface-raised: var(--color-surface-raised);
-  --theme-surface-inset: var(--color-surface-inset);
-  --theme-surface-border: var(--color-surface-border);
-  --theme-surface-border-muted: rgba(0, 0, 0, 0.06);
-  --theme-surface-border-strong: var(--color-surface-ring);
-  --theme-canvas-bg-subtle: #f5f5f4;
-  --theme-surface-container: #f4f4f5;
-  --theme-surface-container-high: #ececed;
-  --theme-surface-container-highest: #e4e4e7;
-  --theme-text-primary: var(--color-n800);
-  --theme-text-secondary: var(--color-n600);
-  --theme-text-muted: var(--color-n500);
-  --theme-text-on-accent: var(--color-text-on-brand);
-  --theme-accent-bg: var(--color-brand-primary);
-  --theme-accent-bg-hover: var(--color-brand-primary-hover);
-  --theme-accent-bg-muted: color-mix(in srgb, #9f1239 10%, #ffffff);
-  @supports (color: color-mix(in lab, red, red)) {
-    --theme-accent-bg-muted: color-mix(in srgb, var(--color-brand-primary) 10%, var(--color-surface-base));
-  }
-  --theme-accent-border: color-mix(in srgb, #9f1239 40%, transparent);
-  @supports (color: color-mix(in lab, red, red)) {
-    --theme-accent-border: color-mix(in srgb, var(--color-brand-primary) 40%, transparent);
-  }
-  --theme-success-bg: var(--color-admin-success-bg);
-  --theme-success-border: var(--color-admin-success-border);
-  --theme-success-text: var(--color-admin-success-text);
-  --theme-warning-bg: var(--color-admin-warning-bg);
-  --theme-warning-border: var(--color-admin-warning-border);
-  --theme-warning-text: var(--color-admin-warning-text);
-  --theme-danger-bg: var(--color-admin-danger-bg);
-  --theme-danger-bg-emphasis: rgba(239, 68, 68, 0.18);
-  --theme-danger-border: var(--color-admin-danger-border);
-  --theme-danger-text: var(--color-admin-danger-text);
-  --theme-info-bg: var(--color-admin-info-bg);
-  --theme-info-border: var(--color-admin-info-border);
-  --theme-info-text: var(--color-admin-info-text);
-  --theme-control-focus-ring: var(--color-surface-ring);
-  --theme-control-focus-ring-offset: var(--color-surface-base);
   --preset-surface-bg: var(--theme-surface-base);
   --preset-surface-bg-subtle: var(--theme-surface-subtle);
   --preset-surface-bg-raised: var(--theme-surface-raised);
@@ -2405,12 +2554,51 @@
   @supports (color: color-mix(in lab, red, red)) {
     --workspace-transition-stale-bg: color-mix(in srgb, var(--color-overlay-soft) 72%, transparent);
   }
-  --tooltip-shadow: var(--ui-surface-shadow);
+  --tooltip-shadow: var(--ui-surface-shadow-strong);
   --select-dropdown-shadow: var(--ui-surface-shadow-strong);
   --theme-picker-shadow: var(--ui-surface-shadow-strong);
   --drawer-panel-shadow: var(--ui-surface-shadow-strong);
 }
-:root[data-theme="light"], .owoui-theme-light {
+:root, :root[data-theme="light"], .owoui-theme-light {
+  --color-n900: #1a1a1a;
+  --color-n800: #2d2d2d;
+  --color-n700: #4a4a4a;
+  --color-n600: #71717a;
+  --color-n500: #a1a1aa;
+  --color-n400: #d4d4d8;
+  --color-n300: #e4e4e7;
+  --color-brand-primary: #1a1a1a;
+  --color-brand-primary-hover: #000000;
+  --color-brand-accent: #4a4a4a;
+  --color-surface-canvas: #ffffff;
+  --color-surface-base: #ffffff;
+  --color-surface-subtle: #fafaf9;
+  --color-surface-raised: #ffffff;
+  --color-surface-inset: #f5f5f4;
+  --color-surface-border: #e5e7eb;
+  --color-surface-ring: #d6d3d1;
+  --color-surface-overlay: rgba(0, 0, 0, 0.4);
+  --color-overlay-soft: rgba(244, 238, 230, 0.56);
+  --color-overlay-strong: rgba(15, 23, 42, 0.18);
+  --color-highlight-soft: rgba(255, 255, 255, 0.56);
+  --color-highlight-sheen: rgba(255, 255, 255, 0.34);
+  --color-text-on-brand: #ffffff;
+  --color-code-block-bg: #f4f4f5;
+  --color-code-block-border: #e4e4e7;
+  --color-code-block-divider: #ececed;
+  --color-code-inline-bg: #f4f4f5;
+  --color-admin-success-bg: rgba(16, 185, 129, 0.10);
+  --color-admin-success-border: rgba(16, 185, 129, 0.20);
+  --color-admin-success-text: #047857;
+  --color-admin-warning-bg: rgba(245, 158, 11, 0.10);
+  --color-admin-warning-border: rgba(245, 158, 11, 0.20);
+  --color-admin-warning-text: #b45309;
+  --color-admin-danger-bg: rgba(239, 68, 68, 0.10);
+  --color-admin-danger-border: rgba(239, 68, 68, 0.20);
+  --color-admin-danger-text: #b91c1c;
+  --color-admin-info-bg: rgba(14, 165, 233, 0.10);
+  --color-admin-info-border: rgba(14, 165, 233, 0.20);
+  --color-admin-info-text: #0369a1;
   --theme-surface-canvas: var(--color-surface-canvas);
   --theme-surface-base: var(--color-surface-base);
   --theme-surface-subtle: var(--color-surface-subtle);
@@ -2429,11 +2617,11 @@
   --theme-text-on-accent: var(--color-text-on-brand);
   --theme-accent-bg: var(--color-brand-primary);
   --theme-accent-bg-hover: var(--color-brand-primary-hover);
-  --theme-accent-bg-muted: color-mix(in srgb, #9f1239 10%, #ffffff);
+  --theme-accent-bg-muted: color-mix(in srgb, #1a1a1a 10%, #ffffff);
   @supports (color: color-mix(in lab, red, red)) {
     --theme-accent-bg-muted: color-mix(in srgb, var(--color-brand-primary) 10%, var(--color-surface-base));
   }
-  --theme-accent-border: color-mix(in srgb, #9f1239 40%, transparent);
+  --theme-accent-border: color-mix(in srgb, #1a1a1a 40%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
     --theme-accent-border: color-mix(in srgb, var(--color-brand-primary) 40%, transparent);
   }
@@ -2454,47 +2642,6 @@
   --theme-control-focus-ring-offset: var(--color-surface-base);
 }
 :root {
-  --theme-surface-canvas: var(--color-surface-canvas);
-  --theme-surface-base: var(--color-surface-base);
-  --theme-surface-subtle: var(--color-surface-subtle);
-  --theme-surface-raised: var(--color-surface-raised);
-  --theme-surface-inset: var(--color-surface-inset);
-  --theme-surface-border: var(--color-surface-border);
-  --theme-surface-border-muted: rgba(0, 0, 0, 0.06);
-  --theme-surface-border-strong: var(--color-surface-ring);
-  --theme-canvas-bg-subtle: #f5f5f4;
-  --theme-surface-container: #f4f4f5;
-  --theme-surface-container-high: #ececed;
-  --theme-surface-container-highest: #e4e4e7;
-  --theme-text-primary: var(--color-n800);
-  --theme-text-secondary: var(--color-n600);
-  --theme-text-muted: var(--color-n500);
-  --theme-text-on-accent: var(--color-text-on-brand);
-  --theme-accent-bg: var(--color-brand-primary);
-  --theme-accent-bg-hover: var(--color-brand-primary-hover);
-  --theme-accent-bg-muted: color-mix(in srgb, #9f1239 10%, #ffffff);
-  @supports (color: color-mix(in lab, red, red)) {
-    --theme-accent-bg-muted: color-mix(in srgb, var(--color-brand-primary) 10%, var(--color-surface-base));
-  }
-  --theme-accent-border: color-mix(in srgb, #9f1239 40%, transparent);
-  @supports (color: color-mix(in lab, red, red)) {
-    --theme-accent-border: color-mix(in srgb, var(--color-brand-primary) 40%, transparent);
-  }
-  --theme-success-bg: var(--color-admin-success-bg);
-  --theme-success-border: var(--color-admin-success-border);
-  --theme-success-text: var(--color-admin-success-text);
-  --theme-warning-bg: var(--color-admin-warning-bg);
-  --theme-warning-border: var(--color-admin-warning-border);
-  --theme-warning-text: var(--color-admin-warning-text);
-  --theme-danger-bg: var(--color-admin-danger-bg);
-  --theme-danger-bg-emphasis: rgba(239, 68, 68, 0.18);
-  --theme-danger-border: var(--color-admin-danger-border);
-  --theme-danger-text: var(--color-admin-danger-text);
-  --theme-info-bg: var(--color-admin-info-bg);
-  --theme-info-border: var(--color-admin-info-border);
-  --theme-info-text: var(--color-admin-info-text);
-  --theme-control-focus-ring: var(--color-surface-ring);
-  --theme-control-focus-ring-offset: var(--color-surface-base);
   --preset-surface-bg: var(--theme-surface-base);
   --preset-surface-bg-subtle: var(--theme-surface-subtle);
   --preset-surface-bg-raised: var(--theme-surface-raised);
@@ -2670,7 +2817,7 @@
   @supports (color: color-mix(in lab, red, red)) {
     --workspace-transition-stale-bg: color-mix(in srgb, var(--color-overlay-soft) 72%, transparent);
   }
-  --tooltip-shadow: var(--ui-surface-shadow);
+  --tooltip-shadow: var(--ui-surface-shadow-strong);
   --select-dropdown-shadow: var(--ui-surface-shadow-strong);
   --theme-picker-shadow: var(--ui-surface-shadow-strong);
   --drawer-panel-shadow: var(--ui-surface-shadow-strong);
@@ -2683,10 +2830,10 @@
   --color-n500: #71717a;
   --color-n400: #3f3f46;
   --color-n300: #27272a;
-  --color-brand-primary: #e11d48;
-  --color-brand-primary-hover: #f43f5e;
-  --color-brand-accent: #fb7185;
-  --color-surface-canvas: #09090b;
+  --color-brand-primary: #c6c6c7;
+  --color-brand-primary-hover: #d4d4d8;
+  --color-brand-accent: #a1a1aa;
+  --color-surface-canvas: #0e0e0e;
   --color-surface-base: #18181b;
   --color-surface-subtle: #1c1c1f;
   --color-surface-raised: #27272a;
@@ -2698,7 +2845,7 @@
   --color-overlay-strong: rgba(0, 0, 0, 0.56);
   --color-highlight-soft: rgba(255, 255, 255, 0.06);
   --color-highlight-sheen: rgba(255, 255, 255, 0.08);
-  --color-text-on-brand: #ffffff;
+  --color-text-on-brand: #1a1a1a;
   --color-code-block-bg: #1e1e22;
   --color-code-block-border: #2d2d32;
   --color-code-block-divider: #27272c;
@@ -2733,11 +2880,11 @@
   --theme-text-on-accent: var(--color-text-on-brand);
   --theme-accent-bg: var(--color-brand-primary);
   --theme-accent-bg-hover: var(--color-brand-primary-hover);
-  --theme-accent-bg-muted: color-mix(in srgb, #9f1239 14%, #ffffff);
+  --theme-accent-bg-muted: color-mix(in srgb, #1a1a1a 14%, #ffffff);
   @supports (color: color-mix(in lab, red, red)) {
     --theme-accent-bg-muted: color-mix(in srgb, var(--color-brand-primary) 14%, var(--color-surface-base));
   }
-  --theme-accent-border: color-mix(in srgb, #9f1239 50%, transparent);
+  --theme-accent-border: color-mix(in srgb, #1a1a1a 50%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
     --theme-accent-border: color-mix(in srgb, var(--color-brand-primary) 50%, transparent);
   }
@@ -2758,47 +2905,6 @@
   --theme-control-focus-ring-offset: var(--color-surface-base);
 }
 :root {
-  --theme-surface-canvas: var(--color-surface-canvas);
-  --theme-surface-base: var(--color-surface-base);
-  --theme-surface-subtle: var(--color-surface-subtle);
-  --theme-surface-raised: var(--color-surface-raised);
-  --theme-surface-inset: var(--color-surface-inset);
-  --theme-surface-border: var(--color-surface-border);
-  --theme-surface-border-muted: rgba(0, 0, 0, 0.06);
-  --theme-surface-border-strong: var(--color-surface-ring);
-  --theme-canvas-bg-subtle: #f5f5f4;
-  --theme-surface-container: #f4f4f5;
-  --theme-surface-container-high: #ececed;
-  --theme-surface-container-highest: #e4e4e7;
-  --theme-text-primary: var(--color-n800);
-  --theme-text-secondary: var(--color-n600);
-  --theme-text-muted: var(--color-n500);
-  --theme-text-on-accent: var(--color-text-on-brand);
-  --theme-accent-bg: var(--color-brand-primary);
-  --theme-accent-bg-hover: var(--color-brand-primary-hover);
-  --theme-accent-bg-muted: color-mix(in srgb, #9f1239 10%, #ffffff);
-  @supports (color: color-mix(in lab, red, red)) {
-    --theme-accent-bg-muted: color-mix(in srgb, var(--color-brand-primary) 10%, var(--color-surface-base));
-  }
-  --theme-accent-border: color-mix(in srgb, #9f1239 40%, transparent);
-  @supports (color: color-mix(in lab, red, red)) {
-    --theme-accent-border: color-mix(in srgb, var(--color-brand-primary) 40%, transparent);
-  }
-  --theme-success-bg: var(--color-admin-success-bg);
-  --theme-success-border: var(--color-admin-success-border);
-  --theme-success-text: var(--color-admin-success-text);
-  --theme-warning-bg: var(--color-admin-warning-bg);
-  --theme-warning-border: var(--color-admin-warning-border);
-  --theme-warning-text: var(--color-admin-warning-text);
-  --theme-danger-bg: var(--color-admin-danger-bg);
-  --theme-danger-bg-emphasis: rgba(239, 68, 68, 0.18);
-  --theme-danger-border: var(--color-admin-danger-border);
-  --theme-danger-text: var(--color-admin-danger-text);
-  --theme-info-bg: var(--color-admin-info-bg);
-  --theme-info-border: var(--color-admin-info-border);
-  --theme-info-text: var(--color-admin-info-text);
-  --theme-control-focus-ring: var(--color-surface-ring);
-  --theme-control-focus-ring-offset: var(--color-surface-base);
   --preset-surface-bg: var(--theme-surface-base);
   --preset-surface-bg-subtle: var(--theme-surface-subtle);
   --preset-surface-bg-raised: var(--theme-surface-raised);
@@ -2974,7 +3080,7 @@
   @supports (color: color-mix(in lab, red, red)) {
     --workspace-transition-stale-bg: color-mix(in srgb, var(--color-overlay-soft) 72%, transparent);
   }
-  --tooltip-shadow: var(--ui-surface-shadow);
+  --tooltip-shadow: var(--ui-surface-shadow-strong);
   --select-dropdown-shadow: var(--ui-surface-shadow-strong);
   --theme-picker-shadow: var(--ui-surface-shadow-strong);
   --drawer-panel-shadow: var(--ui-surface-shadow-strong);
@@ -3003,47 +3109,6 @@
   --preset-control-border-width: 1px;
 }
 :root {
-  --theme-surface-canvas: var(--color-surface-canvas);
-  --theme-surface-base: var(--color-surface-base);
-  --theme-surface-subtle: var(--color-surface-subtle);
-  --theme-surface-raised: var(--color-surface-raised);
-  --theme-surface-inset: var(--color-surface-inset);
-  --theme-surface-border: var(--color-surface-border);
-  --theme-surface-border-muted: rgba(0, 0, 0, 0.06);
-  --theme-surface-border-strong: var(--color-surface-ring);
-  --theme-canvas-bg-subtle: #f5f5f4;
-  --theme-surface-container: #f4f4f5;
-  --theme-surface-container-high: #ececed;
-  --theme-surface-container-highest: #e4e4e7;
-  --theme-text-primary: var(--color-n800);
-  --theme-text-secondary: var(--color-n600);
-  --theme-text-muted: var(--color-n500);
-  --theme-text-on-accent: var(--color-text-on-brand);
-  --theme-accent-bg: var(--color-brand-primary);
-  --theme-accent-bg-hover: var(--color-brand-primary-hover);
-  --theme-accent-bg-muted: color-mix(in srgb, #9f1239 10%, #ffffff);
-  @supports (color: color-mix(in lab, red, red)) {
-    --theme-accent-bg-muted: color-mix(in srgb, var(--color-brand-primary) 10%, var(--color-surface-base));
-  }
-  --theme-accent-border: color-mix(in srgb, #9f1239 40%, transparent);
-  @supports (color: color-mix(in lab, red, red)) {
-    --theme-accent-border: color-mix(in srgb, var(--color-brand-primary) 40%, transparent);
-  }
-  --theme-success-bg: var(--color-admin-success-bg);
-  --theme-success-border: var(--color-admin-success-border);
-  --theme-success-text: var(--color-admin-success-text);
-  --theme-warning-bg: var(--color-admin-warning-bg);
-  --theme-warning-border: var(--color-admin-warning-border);
-  --theme-warning-text: var(--color-admin-warning-text);
-  --theme-danger-bg: var(--color-admin-danger-bg);
-  --theme-danger-bg-emphasis: rgba(239, 68, 68, 0.18);
-  --theme-danger-border: var(--color-admin-danger-border);
-  --theme-danger-text: var(--color-admin-danger-text);
-  --theme-info-bg: var(--color-admin-info-bg);
-  --theme-info-border: var(--color-admin-info-border);
-  --theme-info-text: var(--color-admin-info-text);
-  --theme-control-focus-ring: var(--color-surface-ring);
-  --theme-control-focus-ring-offset: var(--color-surface-base);
   --preset-surface-bg: var(--theme-surface-base);
   --preset-surface-bg-subtle: var(--theme-surface-subtle);
   --preset-surface-bg-raised: var(--theme-surface-raised);
@@ -3219,7 +3284,7 @@
   @supports (color: color-mix(in lab, red, red)) {
     --workspace-transition-stale-bg: color-mix(in srgb, var(--color-overlay-soft) 72%, transparent);
   }
-  --tooltip-shadow: var(--ui-surface-shadow);
+  --tooltip-shadow: var(--ui-surface-shadow-strong);
   --select-dropdown-shadow: var(--ui-surface-shadow-strong);
   --theme-picker-shadow: var(--ui-surface-shadow-strong);
   --drawer-panel-shadow: var(--ui-surface-shadow-strong);
@@ -3248,47 +3313,6 @@
   --preset-control-border-width: 1px;
 }
 :root {
-  --theme-surface-canvas: var(--color-surface-canvas);
-  --theme-surface-base: var(--color-surface-base);
-  --theme-surface-subtle: var(--color-surface-subtle);
-  --theme-surface-raised: var(--color-surface-raised);
-  --theme-surface-inset: var(--color-surface-inset);
-  --theme-surface-border: var(--color-surface-border);
-  --theme-surface-border-muted: rgba(0, 0, 0, 0.06);
-  --theme-surface-border-strong: var(--color-surface-ring);
-  --theme-canvas-bg-subtle: #f5f5f4;
-  --theme-surface-container: #f4f4f5;
-  --theme-surface-container-high: #ececed;
-  --theme-surface-container-highest: #e4e4e7;
-  --theme-text-primary: var(--color-n800);
-  --theme-text-secondary: var(--color-n600);
-  --theme-text-muted: var(--color-n500);
-  --theme-text-on-accent: var(--color-text-on-brand);
-  --theme-accent-bg: var(--color-brand-primary);
-  --theme-accent-bg-hover: var(--color-brand-primary-hover);
-  --theme-accent-bg-muted: color-mix(in srgb, #9f1239 10%, #ffffff);
-  @supports (color: color-mix(in lab, red, red)) {
-    --theme-accent-bg-muted: color-mix(in srgb, var(--color-brand-primary) 10%, var(--color-surface-base));
-  }
-  --theme-accent-border: color-mix(in srgb, #9f1239 40%, transparent);
-  @supports (color: color-mix(in lab, red, red)) {
-    --theme-accent-border: color-mix(in srgb, var(--color-brand-primary) 40%, transparent);
-  }
-  --theme-success-bg: var(--color-admin-success-bg);
-  --theme-success-border: var(--color-admin-success-border);
-  --theme-success-text: var(--color-admin-success-text);
-  --theme-warning-bg: var(--color-admin-warning-bg);
-  --theme-warning-border: var(--color-admin-warning-border);
-  --theme-warning-text: var(--color-admin-warning-text);
-  --theme-danger-bg: var(--color-admin-danger-bg);
-  --theme-danger-bg-emphasis: rgba(239, 68, 68, 0.18);
-  --theme-danger-border: var(--color-admin-danger-border);
-  --theme-danger-text: var(--color-admin-danger-text);
-  --theme-info-bg: var(--color-admin-info-bg);
-  --theme-info-border: var(--color-admin-info-border);
-  --theme-info-text: var(--color-admin-info-text);
-  --theme-control-focus-ring: var(--color-surface-ring);
-  --theme-control-focus-ring-offset: var(--color-surface-base);
   --preset-surface-bg: var(--theme-surface-base);
   --preset-surface-bg-subtle: var(--theme-surface-subtle);
   --preset-surface-bg-raised: var(--theme-surface-raised);
@@ -3464,7 +3488,7 @@
   @supports (color: color-mix(in lab, red, red)) {
     --workspace-transition-stale-bg: color-mix(in srgb, var(--color-overlay-soft) 72%, transparent);
   }
-  --tooltip-shadow: var(--ui-surface-shadow);
+  --tooltip-shadow: var(--ui-surface-shadow-strong);
   --select-dropdown-shadow: var(--ui-surface-shadow-strong);
   --theme-picker-shadow: var(--ui-surface-shadow-strong);
   --drawer-panel-shadow: var(--ui-surface-shadow-strong);
@@ -3514,47 +3538,6 @@
   --preset-control-border-width: 1px;
 }
 :root {
-  --theme-surface-canvas: var(--color-surface-canvas);
-  --theme-surface-base: var(--color-surface-base);
-  --theme-surface-subtle: var(--color-surface-subtle);
-  --theme-surface-raised: var(--color-surface-raised);
-  --theme-surface-inset: var(--color-surface-inset);
-  --theme-surface-border: var(--color-surface-border);
-  --theme-surface-border-muted: rgba(0, 0, 0, 0.06);
-  --theme-surface-border-strong: var(--color-surface-ring);
-  --theme-canvas-bg-subtle: #f5f5f4;
-  --theme-surface-container: #f4f4f5;
-  --theme-surface-container-high: #ececed;
-  --theme-surface-container-highest: #e4e4e7;
-  --theme-text-primary: var(--color-n800);
-  --theme-text-secondary: var(--color-n600);
-  --theme-text-muted: var(--color-n500);
-  --theme-text-on-accent: var(--color-text-on-brand);
-  --theme-accent-bg: var(--color-brand-primary);
-  --theme-accent-bg-hover: var(--color-brand-primary-hover);
-  --theme-accent-bg-muted: color-mix(in srgb, #9f1239 10%, #ffffff);
-  @supports (color: color-mix(in lab, red, red)) {
-    --theme-accent-bg-muted: color-mix(in srgb, var(--color-brand-primary) 10%, var(--color-surface-base));
-  }
-  --theme-accent-border: color-mix(in srgb, #9f1239 40%, transparent);
-  @supports (color: color-mix(in lab, red, red)) {
-    --theme-accent-border: color-mix(in srgb, var(--color-brand-primary) 40%, transparent);
-  }
-  --theme-success-bg: var(--color-admin-success-bg);
-  --theme-success-border: var(--color-admin-success-border);
-  --theme-success-text: var(--color-admin-success-text);
-  --theme-warning-bg: var(--color-admin-warning-bg);
-  --theme-warning-border: var(--color-admin-warning-border);
-  --theme-warning-text: var(--color-admin-warning-text);
-  --theme-danger-bg: var(--color-admin-danger-bg);
-  --theme-danger-bg-emphasis: rgba(239, 68, 68, 0.18);
-  --theme-danger-border: var(--color-admin-danger-border);
-  --theme-danger-text: var(--color-admin-danger-text);
-  --theme-info-bg: var(--color-admin-info-bg);
-  --theme-info-border: var(--color-admin-info-border);
-  --theme-info-text: var(--color-admin-info-text);
-  --theme-control-focus-ring: var(--color-surface-ring);
-  --theme-control-focus-ring-offset: var(--color-surface-base);
   --preset-surface-bg: var(--theme-surface-base);
   --preset-surface-bg-subtle: var(--theme-surface-subtle);
   --preset-surface-bg-raised: var(--theme-surface-raised);
@@ -3730,7 +3713,7 @@
   @supports (color: color-mix(in lab, red, red)) {
     --workspace-transition-stale-bg: color-mix(in srgb, var(--color-overlay-soft) 72%, transparent);
   }
-  --tooltip-shadow: var(--ui-surface-shadow);
+  --tooltip-shadow: var(--ui-surface-shadow-strong);
   --select-dropdown-shadow: var(--ui-surface-shadow-strong);
   --theme-picker-shadow: var(--ui-surface-shadow-strong);
   --drawer-panel-shadow: var(--ui-surface-shadow-strong);
@@ -3788,6 +3771,10 @@
   --preset-control-radius-2xl: 2.25rem;
   --preset-control-border-width: 1px;
 }
+:root {
+  --font-inter: 'Inter', sans-serif;
+  --font-headline: 'Manrope', sans-serif;
+}
 @layer base {
   html,
   body,
@@ -3810,6 +3797,85 @@
     text-decoration: none;
   }
 }
+.sb-dot-grid {
+  background-image: radial-gradient(
+    circle at 1px 1px,
+    var(--ui-surface-border) 0.5px,
+    transparent 0
+  );
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image: radial-gradient(
+    circle at 1px 1px,
+    color-mix(in srgb, var(--ui-surface-border) 50%, transparent) 0.5px,
+    transparent 0
+  );
+  }
+  background-size: 20px 20px;
+}
+.sb-glass-btn.ui-icon-button {
+  border-radius: var(--ui-control-radius-sm);
+  border: 1px solid var(--ui-surface-border);
+  background: var(--ui-surface-bg);
+  @supports (color: color-mix(in lab, red, red)) {
+    background: color-mix(in srgb, var(--ui-surface-bg) 80%, transparent);
+  }
+  backdrop-filter: blur(12px);
+  color: var(--ui-text-muted);
+}
+.sb-glass-btn.ui-icon-button:hover:not(:disabled) {
+  color: var(--ui-text-primary);
+  background: var(--ui-surface-bg);
+}
+.sb-sidebar::-webkit-scrollbar {
+  width: 4px;
+}
+.sb-sidebar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.sb-sidebar::-webkit-scrollbar-thumb {
+  background: var(--ui-surface-border);
+  border-radius: 10px;
+}
+.sb-controls .ui-select__trigger {
+  min-height: unset;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.sb-theme-toggle.ui-icon-button {
+  border-radius: 0.5rem;
+  border: 1px solid var(--ui-surface-border);
+}
+.sb-sidebar-select .ui-select__trigger {
+  min-height: unset;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+.sb-copy-btn.ui-button {
+  min-height: 2.5rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+.sb-search-input.ui-input {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+.sb-code-toggle.ui-button {
+  font-size: 0.6875rem;
+  min-height: unset;
+  padding: 0.25rem 0.625rem;
+}
+#sb-main::-webkit-scrollbar {
+  width: 6px;
+}
+#sb-main::-webkit-scrollbar-track {
+  background: transparent;
+}
+#sb-main::-webkit-scrollbar-thumb {
+  background: var(--ui-surface-border);
+  border-radius: 10px;
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -3850,6 +3916,11 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-divide-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -4051,6 +4122,7 @@
       --tw-skew-x: initial;
       --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
+      --tw-divide-y-reverse: 0;
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;
@@ -4097,4 +4169,3 @@
     }
   }
 }
-