aibos-design-system 1.0.0 → 1.1.0

package/style.css

@@ -8,20 +8,49 @@
     --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-amber-500: oklch(76.9% 0.188 70.08);
+    --color-amber-600: oklch(66.6% 0.179 58.318);
     --color-amber-900: oklch(41.4% 0.112 45.904);
     --color-amber-950: oklch(27.9% 0.077 45.635);
+    --color-yellow-500: oklch(79.5% 0.184 86.047);
     --color-emerald-400: oklch(76.5% 0.177 163.223);
+    --color-emerald-700: oklch(50.8% 0.118 165.612);
     --color-emerald-900: oklch(37.8% 0.077 168.94);
     --color-emerald-950: oklch(26.2% 0.051 172.552);
+    --color-blue-500: oklch(62.3% 0.214 259.815);
+    --color-blue-600: oklch(54.6% 0.245 262.881);
     --color-rose-900: oklch(41% 0.159 10.272);
     --color-rose-950: oklch(27.1% 0.105 12.094);
+    --color-slate-50: oklch(98.4% 0.003 247.858);
+    --color-slate-100: oklch(96.8% 0.007 247.896);
+    --color-slate-200: oklch(92.9% 0.013 255.508);
+    --color-slate-500: oklch(55.4% 0.046 257.417);
+    --color-slate-600: oklch(44.6% 0.043 257.281);
+    --color-slate-700: oklch(37.2% 0.044 257.287);
+    --color-slate-900: oklch(20.8% 0.042 265.755);
     --color-gray-100: oklch(96.7% 0.003 264.542);
+    --color-gray-400: oklch(70.7% 0.022 261.325);
     --color-gray-500: oklch(55.1% 0.027 264.364);
+    --color-gray-600: oklch(44.6% 0.03 256.802);
     --color-gray-900: oklch(21% 0.034 264.665);
     --color-zinc-800: oklch(27.4% 0.006 286.033);
     --color-zinc-900: oklch(21% 0.006 285.885);
     --color-black: #000;
-    --color-white: #ffffff;
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --breakpoint-lg: 64rem;
+    --container-xs: 20rem;
+    --container-sm: 24rem;
+    --container-md: 28rem;
+    --container-lg: 32rem;
+    --container-xl: 36rem;
+    --container-2xl: 42rem;
+    --container-3xl: 48rem;
+    --container-4xl: 56rem;
+    --container-5xl: 64rem;
+    --container-6xl: 72rem;
+    --container-7xl: 80rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -30,10 +59,20 @@
     --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);
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --text-6xl: 3.75rem;
+    --text-6xl--line-height: 1;
+    --text-7xl: 4.5rem;
+    --text-7xl--line-height: 1;
     --text-8xl: 6rem;
     --text-8xl--line-height: 1;
     --text-9xl: 8rem;
@@ -95,8 +134,8 @@
     --color-error: #f43f5e;
     --color-info: #3b82f6;
     --font-family-sans: "Inter", system-ui, sans-serif;
-    --font-family-serif: "Playfair Display", Georgia, serif;
-    --font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
+    --font-family-serif: "Playfair Display", georgia, serif;
+    --font-family-mono: "JetBrains Mono", ui-monospace, sfmono-regular, menlo, monaco, consolas, "Courier New", monospace;
     --font-size-xs: 0.75rem;
     --font-size-sm: 0.875rem;
     --font-size-base: 1rem;
@@ -110,7 +149,7 @@
     --font-size-7xl: 4.5rem;
     --font-size-8xl: 6rem;
     --font-size-9xl: 8rem;
-    --spacing-0: 0px;
+    --spacing-0: 0;
     --spacing-px: 1px;
     --spacing-0_5: 0.125rem;
     --spacing-1: 0.25rem;
@@ -122,6 +161,7 @@
     --spacing-4: 1rem;
     --spacing-5: 1.25rem;
     --spacing-6: 1.5rem;
+    --spacing-7: 1.75rem;
     --spacing-8: 2rem;
     --spacing-9: 2.25rem;
     --spacing-10: 2.5rem;
@@ -151,12 +191,14 @@
     --opacity-20: 0.2;
     --opacity-25: 0.25;
     --opacity-30: 0.3;
+    --opacity-40: 0.4;
     --opacity-50: 0.5;
     --opacity-60: 0.6;
     --opacity-70: 0.7;
     --opacity-75: 0.75;
     --opacity-80: 0.8;
     --opacity-90: 0.9;
+    --opacity-95: 0.95;
     --opacity-100: 1;
     --ease-linear: linear;
     --duration-75: 75ms;
@@ -184,32 +226,17 @@
     --color-muted-foreground: var(--color-clay);
     --color-card: var(--color-paper);
     --color-card-foreground: var(--color-lux);
-    --color-popover: var(--color-paper);
-    --color-popover-foreground: var(--color-lux);
     --color-border: var(--color-stroke);
-    --color-input: var(--color-stroke);
     --color-primary: var(--color-gold);
     --color-primary-foreground: var(--color-void);
     --color-secondary: var(--color-paper-2);
-    --color-secondary-foreground: var(--color-lux);
-    --color-accent: var(--color-paper-2);
-    --color-accent-foreground: var(--color-lux);
     --color-destructive: var(--color-error);
-    --color-destructive-foreground: var(--color-lux);
     --color-ring: var(--color-gold);
     --color-chart-1: #eab308;
     --color-chart-2: #10b981;
     --color-chart-3: #3b82f6;
     --color-chart-4: #f59e0b;
     --color-chart-5: #f43f5e;
-    --color-sidebar-background: var(--color-void);
-    --color-sidebar-foreground: var(--color-lux-dim);
-    --color-sidebar-primary: var(--color-lux);
-    --color-sidebar-primary-foreground: var(--color-void);
-    --color-sidebar-accent: var(--color-paper-2);
-    --color-sidebar-accent-foreground: var(--color-lux);
-    --color-sidebar-border: var(--color-stroke);
-    --color-sidebar-ring: var(--color-gold);
     --z-base: 0;
     --z-dropdown: 1000;
     --z-sticky: 1020;
@@ -284,9 +311,12 @@
     --metadata-small-weight: 400;
     --metadata-small-line-height: 1.4;
     --metadata-small-color: var(--color-clay);
+    --animate-fade-in: fade-in var(--duration-200) var(--ease-premium) both;
     --animate-slide-up: slide-up var(--duration-300) var(--ease-premium) both;
+    --animate-scale-in: scale-in var(--duration-150) var(--ease-premium) both;
     --animate-soft-pulse: soft-pulse 2.4s var(--ease-smooth) infinite;
     --animate-shimmer: shimmer 1.35s var(--ease-linear) infinite;
+    --w-search-bar: 30rem;
   }
 }
 @layer base {
@@ -451,9 +481,8 @@
   }
 }
 @layer utilities {
-  .\@container\/main {
-    container-type: inline-size;
-    container-name: main;
+  .pointer-events-none {
+    pointer-events: none;
   }
   .visible {
     visibility: visible;
@@ -487,6 +516,12 @@
   .top-4 {
     top: var(--spacing-4);
   }
+  .top-full {
+    top: 100%;
+  }
+  .left-0 {
+    left: var(--spacing-0);
+  }
   .z-0 {
     z-index: 0;
   }
@@ -526,39 +561,96 @@
       max-width: 96rem;
     }
   }
+  .m-0 {
+    margin: var(--spacing-0);
+  }
+  .m-1 {
+    margin: var(--spacing-1);
+  }
+  .m-2 {
+    margin: var(--spacing-2);
+  }
+  .m-4 {
+    margin: var(--spacing-4);
+  }
   .m-6 {
     margin: var(--spacing-6);
   }
+  .m-8 {
+    margin: var(--spacing-8);
+  }
+  .m-12 {
+    margin: var(--spacing-12);
+  }
+  .m-16 {
+    margin: var(--spacing-16);
+  }
+  .m-24 {
+    margin: var(--spacing-24);
+  }
   .m-\[\.\.\.\] {
     margin: ...;
   }
   .m-\[24px\] {
     margin: 24px;
   }
+  .m-\[30px\] {
+    margin: 30px;
+  }
+  .mx-auto {
+    margin-inline: auto;
+  }
+  .mt-1 {
+    margin-top: var(--spacing-1);
+  }
   .mt-2 {
     margin-top: var(--spacing-2);
   }
+  .mt-3 {
+    margin-top: var(--spacing-3);
+  }
   .mt-4 {
     margin-top: var(--spacing-4);
   }
   .mt-6 {
     margin-top: var(--spacing-6);
   }
+  .mt-8 {
+    margin-top: var(--spacing-8);
+  }
   .mb-2 {
     margin-bottom: var(--spacing-2);
   }
+  .mb-3 {
+    margin-bottom: var(--spacing-3);
+  }
   .mb-4 {
     margin-bottom: var(--spacing-4);
   }
+  .mb-6 {
+    margin-bottom: var(--spacing-6);
+  }
   .mb-8 {
     margin-bottom: var(--spacing-8);
   }
+  .mb-12 {
+    margin-bottom: var(--spacing-12);
+  }
+  .ml-2 {
+    margin-left: var(--spacing-2);
+  }
+  .ml-4 {
+    margin-left: var(--spacing-4);
+  }
   .ml-auto {
     margin-left: auto;
   }
   .block {
     display: block;
   }
+  .contents {
+    display: contents;
+  }
   .flex {
     display: flex;
   }
@@ -577,20 +669,68 @@
   .table {
     display: table;
   }
+  .table-row {
+    display: table-row;
+  }
   .h-8 {
     height: var(--spacing-8);
   }
   .h-full {
     height: 100%;
   }
+  .max-h-64 {
+    max-height: var(--spacing-64);
+  }
+  .min-h-screen {
+    min-height: 100vh;
+  }
   .w-8 {
     width: var(--spacing-8);
   }
   .w-full {
     width: 100%;
   }
-  .flex-1 {
-    flex: 1;
+  .max-w-2xl {
+    max-width: var(--container-2xl);
+  }
+  .max-w-3xl {
+    max-width: var(--container-3xl);
+  }
+  .max-w-4xl {
+    max-width: var(--container-4xl);
+  }
+  .max-w-5xl {
+    max-width: var(--container-5xl);
+  }
+  .max-w-6xl {
+    max-width: var(--container-6xl);
+  }
+  .max-w-7xl {
+    max-width: var(--container-7xl);
+  }
+  .max-w-\[1024px\] {
+    max-width: 1024px;
+  }
+  .max-w-\[1280px\] {
+    max-width: 1280px;
+  }
+  .max-w-lg {
+    max-width: var(--container-lg);
+  }
+  .max-w-md {
+    max-width: var(--container-md);
+  }
+  .max-w-screen-lg {
+    max-width: var(--breakpoint-lg);
+  }
+  .max-w-sm {
+    max-width: var(--container-sm);
+  }
+  .max-w-xl {
+    max-width: var(--container-xl);
+  }
+  .max-w-xs {
+    max-width: var(--container-xs);
   }
   .flex-shrink {
     flex-shrink: 1;
@@ -607,12 +747,36 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-fade-in {
+    animation: var(--animate-fade-in);
+  }
+  .animate-scale-in {
+    animation: var(--animate-scale-in);
+  }
+  .animate-shimmer {
+    animation: var(--animate-shimmer);
+  }
+  .animate-slide-up {
+    animation: var(--animate-slide-up);
+  }
+  .animate-soft-pulse {
+    animation: var(--animate-soft-pulse);
+  }
   .cursor-pointer {
     cursor: pointer;
   }
   .resize {
     resize: both;
   }
+  .list-inside {
+    list-style-position: inside;
+  }
+  .list-decimal {
+    list-style-type: decimal;
+  }
+  .list-disc {
+    list-style-type: disc;
+  }
   .list-none {
     list-style-type: none;
   }
@@ -637,6 +801,9 @@
   .gap-2 {
     gap: var(--spacing-2);
   }
+  .gap-3 {
+    gap: var(--spacing-3);
+  }
   .gap-4 {
     gap: var(--spacing-4);
   }
@@ -652,6 +819,16 @@
   .gap-\[13px\] {
     gap: 13px;
   }
+  .gap-\[20px\] {
+    gap: 20px;
+  }
+  .space-y-1 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(var(--spacing-1) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--spacing-1) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -659,15 +836,60 @@
       margin-block-end: calc(var(--spacing-2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-3 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(var(--spacing-3) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--spacing-3) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(var(--spacing-4) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-6 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(var(--spacing-6) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--spacing-6) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .overflow-hidden {
     overflow: hidden;
   }
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+  .rounded {
+    border-radius: 0.25rem;
+  }
+  .rounded-2xl {
+    border-radius: var(--radius-2xl);
+  }
+  .rounded-3xl {
+    border-radius: var(--radius-3xl);
+  }
   .rounded-\[\.\.\.\] {
     border-radius: ...;
   }
   .rounded-\[8px\] {
     border-radius: 8px;
   }
+  .rounded-\[var\(--radius\/full\,9999px\)\] {
+    border-radius: var(--radius/full,9999px);
+  }
+  .rounded-\[var\(--radius\/md\,6px\)\] {
+    border-radius: var(--radius/md,6px);
+  }
+  .rounded-\[var\(--radius\/xs\,2px\)\] {
+    border-radius: var(--radius/xs,2px);
+  }
+  .rounded-\[var\(--spacing\/2\,8px\)\] {
+    border-radius: var(--spacing/2,8px);
+  }
   .rounded-card {
     border-radius: var(--radius-card);
   }
@@ -683,12 +905,21 @@
   .rounded-md {
     border-radius: var(--radius-md);
   }
+  .rounded-none {
+    border-radius: var(--radius-none);
+  }
   .rounded-panel {
     border-radius: var(--radius-panel);
   }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
+  .rounded-xs {
+    border-radius: var(--radius-xs);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -701,9 +932,6 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
-  .border-\[var\(--color-stroke\)\] {
-    border-color: var(--color-stroke);
-  }
   .border-amber-900\/50 {
     border-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 0.5, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -725,6 +953,9 @@
       border-color: color-mix(in oklab, var(--color-rose-900) var(--opacity-50), transparent);
     }
   }
+  .border-slate-200 {
+    border-color: var(--color-slate-200);
+  }
   .border-stroke {
     border-color: var(--color-stroke);
   }
@@ -737,15 +968,9 @@
   .border-zinc-800 {
     border-color: var(--color-zinc-800);
   }
-  .bg-\[\#09090b\] {
-    background-color: #09090b;
-  }
   .bg-\[\#121214\] {
     background-color: #121214;
   }
-  .bg-\[var\(--color-gold\)\] {
-    background-color: var(--color-gold);
-  }
   .bg-\[var\(--color-paper\)\] {
     background-color: var(--color-paper);
   }
@@ -761,15 +986,12 @@
       background-color: color-mix(in oklab, var(--color-emerald-950) var(--opacity-30), transparent);
     }
   }
-  .bg-error {
-    background-color: var(--color-error);
+  .bg-gold {
+    background-color: var(--color-gold);
   }
   .bg-gray-900 {
     background-color: var(--color-gray-900);
   }
-  .bg-info {
-    background-color: var(--color-info);
-  }
   .bg-paper {
     background-color: var(--color-paper);
   }
@@ -788,18 +1010,33 @@
       background-color: color-mix(in oklab, var(--color-rose-950) var(--opacity-30), transparent);
     }
   }
-  .bg-success {
-    background-color: var(--color-success);
+  .bg-slate-50 {
+    background-color: var(--color-slate-50);
+  }
+  .bg-slate-100 {
+    background-color: var(--color-slate-100);
   }
   .bg-void {
     background-color: var(--color-void);
   }
-  .bg-warning {
-    background-color: var(--color-warning);
+  .bg-white {
+    background-color: var(--color-white);
   }
   .bg-zinc-900 {
     background-color: var(--color-zinc-900);
   }
+  .p-0 {
+    padding: var(--spacing-0);
+  }
+  .p-1 {
+    padding: var(--spacing-1);
+  }
+  .p-2 {
+    padding: var(--spacing-2);
+  }
+  .p-3 {
+    padding: var(--spacing-3);
+  }
   .p-4 {
     padding: var(--spacing-4);
   }
@@ -812,12 +1049,30 @@
   .p-8 {
     padding: var(--spacing-8);
   }
+  .p-12 {
+    padding: var(--spacing-12);
+  }
+  .p-16 {
+    padding: var(--spacing-16);
+  }
+  .p-24 {
+    padding: var(--spacing-24);
+  }
   .p-\[\.\.\.\] {
     padding: ...;
   }
   .p-\[16px\] {
     padding: 16px;
   }
+  .p-\[20px\] {
+    padding: 20px;
+  }
+  .p-\[24px\] {
+    padding: 24px;
+  }
+  .p-\[28px\] {
+    padding: 28px;
+  }
   .p-\[32px\] {
     padding: 32px;
   }
@@ -830,14 +1085,17 @@
   .px-2 {
     padding-inline: var(--spacing-2);
   }
+  .px-3 {
+    padding-inline: var(--spacing-3);
+  }
   .px-4 {
     padding-inline: var(--spacing-4);
   }
   .px-6 {
     padding-inline: var(--spacing-6);
   }
-  .px-\[var\(--spacing-6\)\] {
-    padding-inline: var(--spacing-6);
+  .px-\[10px\] {
+    padding-inline: 10px;
   }
   .py-0 {
     padding-block: var(--spacing-0);
@@ -848,21 +1106,18 @@
   .py-2 {
     padding-block: var(--spacing-2);
   }
+  .py-3 {
+    padding-block: var(--spacing-3);
+  }
   .py-4 {
     padding-block: var(--spacing-4);
   }
   .py-6 {
     padding-block: var(--spacing-6);
   }
-  .py-\[var\(--spacing-4\)\] {
-    padding-block: var(--spacing-4);
-  }
   .text-left {
     text-align: left;
   }
-  .text-right {
-    text-align: right;
-  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -880,6 +1135,22 @@
     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-5xl {
+    font-size: var(--text-5xl);
+    line-height: var(--tw-leading, var(--text-5xl--line-height));
+  }
+  .text-6xl {
+    font-size: var(--text-6xl);
+    line-height: var(--tw-leading, var(--text-6xl--line-height));
+  }
+  .text-7xl {
+    font-size: var(--text-7xl);
+    line-height: var(--tw-leading, var(--text-7xl--line-height));
+  }
   .text-8xl {
     font-size: var(--text-8xl);
     line-height: var(--tw-leading, var(--text-8xl--line-height));
@@ -900,6 +1171,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));
@@ -926,10 +1201,22 @@
     --tw-leading: 1;
     line-height: 1;
   }
+  .leading-relaxed {
+    --tw-leading: var(--leading-relaxed);
+    line-height: var(--leading-relaxed);
+  }
+  .font-black {
+    --tw-font-weight: var(--font-weight-black);
+    font-weight: var(--font-weight-black);
+  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
   }
+  .font-light {
+    --tw-font-weight: var(--font-weight-light);
+    font-weight: var(--font-weight-light);
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -942,26 +1229,32 @@
     --tw-tracking: var(--tracking-wide);
     letter-spacing: var(--tracking-wide);
   }
-  .text-\[\#f4f4f5\] {
-    color: #f4f4f5;
-  }
   .text-\[\.\.\.\] {
     color: ...;
   }
-  .text-\[var\(--color-void\)\] {
-    color: var(--color-void);
+  .text-amber-500 {
+    color: var(--color-amber-500);
+  }
+  .text-amber-600 {
+    color: var(--color-amber-600);
   }
   .text-black {
     color: var(--color-black);
   }
+  .text-blue-500 {
+    color: var(--color-blue-500);
+  }
+  .text-blue-600 {
+    color: var(--color-blue-600);
+  }
   .text-clay {
     color: var(--color-clay);
   }
   .text-emerald-400 {
     color: var(--color-emerald-400);
   }
-  .text-error {
-    color: var(--color-error);
+  .text-emerald-700 {
+    color: var(--color-emerald-700);
   }
   .text-gold {
     color: var(--color-gold);
@@ -969,11 +1262,17 @@
   .text-gray-100 {
     color: var(--color-gray-100);
   }
+  .text-gray-400 {
+    color: var(--color-gray-400);
+  }
   .text-gray-500 {
     color: var(--color-gray-500);
   }
-  .text-info {
-    color: var(--color-info);
+  .text-gray-600 {
+    color: var(--color-gray-600);
+  }
+  .text-gray-900 {
+    color: var(--color-gray-900);
   }
   .text-lux {
     color: var(--color-lux);
@@ -981,34 +1280,121 @@
   .text-lux-dim {
     color: var(--color-lux-dim);
   }
-  .text-success {
-    color: var(--color-success);
+  .text-red-500 {
+    color: var(--color-red-500);
   }
-  .text-warning {
-    color: var(--color-warning);
+  .text-slate-500 {
+    color: var(--color-slate-500);
+  }
+  .text-slate-600 {
+    color: var(--color-slate-600);
+  }
+  .text-slate-700 {
+    color: var(--color-slate-700);
+  }
+  .text-slate-900 {
+    color: var(--color-slate-900);
+  }
+  .text-transparent {
+    color: transparent;
+  }
+  .text-void {
+    color: var(--color-void);
   }
   .text-white {
     color: var(--color-white);
   }
+  .text-yellow-500 {
+    color: var(--color-yellow-500);
+  }
   .lowercase {
     text-transform: lowercase;
   }
   .uppercase {
     text-transform: uppercase;
   }
+  .italic {
+    font-style: italic;
+  }
   .tabular-nums {
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
+  .caret-slate-900 {
+    caret-color: var(--color-slate-900);
+  }
   .accent-foreground {
     accent-color: var(--color-foreground);
   }
   .opacity-0 {
     opacity: var(--opacity-0);
   }
+  .opacity-5 {
+    opacity: var(--opacity-5);
+  }
+  .opacity-10 {
+    opacity: var(--opacity-10);
+  }
+  .opacity-15 {
+    opacity: 15%;
+  }
+  .opacity-20 {
+    opacity: var(--opacity-20);
+  }
+  .opacity-25 {
+    opacity: var(--opacity-25);
+  }
+  .opacity-30 {
+    opacity: var(--opacity-30);
+  }
+  .opacity-35 {
+    opacity: 35%;
+  }
+  .opacity-40 {
+    opacity: var(--opacity-40);
+  }
+  .opacity-45 {
+    opacity: 45%;
+  }
+  .opacity-50 {
+    opacity: var(--opacity-50);
+  }
+  .opacity-55 {
+    opacity: 55%;
+  }
+  .opacity-60 {
+    opacity: var(--opacity-60);
+  }
+  .opacity-65 {
+    opacity: 65%;
+  }
+  .opacity-70 {
+    opacity: var(--opacity-70);
+  }
+  .opacity-75 {
+    opacity: var(--opacity-75);
+  }
+  .opacity-80 {
+    opacity: var(--opacity-80);
+  }
+  .opacity-85 {
+    opacity: 85%;
+  }
+  .opacity-90 {
+    opacity: var(--opacity-90);
+  }
+  .opacity-95 {
+    opacity: var(--opacity-95);
+  }
   .opacity-100 {
     opacity: var(--opacity-100);
   }
+  .opacity-\[var\(--opacity\/25\,0\.25\)\] {
+    opacity: var(--opacity/25,0.25);
+  }
+  .opacity-\[var\(--opacity\/75\,0\.75\)\] {
+    opacity: var(--opacity/75,0.75);
+  }
   .opacity-disabled {
     opacity: var(--opacity-disabled);
   }
@@ -1033,6 +1419,22 @@
     --tw-shadow: 0 1px 1px var(--tw-shadow-color, rgba(0, 0, 0, 0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0px_1px_2px_0px_rgba\(\.\.\.\)\] {
+    --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(...));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0px_4px_6px_-1px_rgba\(\.\.\.\)\] {
+    --tw-shadow: 0px 4px 6px -1px var(--tw-shadow-color, rgba(...));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-card {
+    --tw-shadow: 0 1px 2px -1px var(--tw-shadow-color, rgba(0, 0, 0, 0.5)), 0 1px 0 0 var(--tw-shadow-color, rgba(255, 255, 255, 0.03)) inset;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-deep {
+    --tw-shadow: 0 22px 60px -28px var(--tw-shadow-color, rgba(0, 0, 0, 0.8));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-gilded {
     --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(234, 179, 8, 0.15)), 0 4px 12px var(--tw-shadow-color, rgba(234, 179, 8, 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);
@@ -1053,6 +1455,10 @@
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0 4px 6px -2px var(--tw-shadow-color, rgba(0, 0, 0, 0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-lift {
+    --tw-shadow: 0 10px 30px -10px var(--tw-shadow-color, rgba(0, 0, 0, 0.5));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-md {
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0 2px 4px -1px var(--tw-shadow-color, rgba(0, 0, 0, 0.06));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1077,10 +1483,18 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .inset-shadow-2xs {
+    --tw-inset-shadow: inset 0 1px var(--tw-inset-shadow-color, rgb(0 0 0 / 0.05));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .inset-shadow-sm {
     --tw-inset-shadow: inset 0 2px 4px var(--tw-inset-shadow-color, rgb(0 0 0 / 0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .inset-shadow-xs {
+    --tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, rgb(0 0 0 / 0.05));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -1097,6 +1511,14 @@
     --tw-blur: blur(var(--blur-3xl));
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .blur-\[var\(--blur\/lg\,8px\)\] {
+    --tw-blur: blur(var(--blur/lg,8px));
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .blur-\[var\(--blur\/xs\,2px\)\] {
+    --tw-blur: blur(var(--blur/xs,2px));
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .blur-lg {
     --tw-blur: blur(var(--blur-lg));
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -1128,6 +1550,46 @@
     --tw-backdrop-blur: blur(8px);
     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-blur-2xl {
+    --tw-backdrop-blur: blur(var(--blur-2xl));
+    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-blur-3xl {
+    --tw-backdrop-blur: blur(var(--blur-3xl));
+    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-blur-\[var\(--blur\/3xl\,32px\)\] {
+    --tw-backdrop-blur: blur(var(--blur/3xl,32px));
+    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-blur-\[var\(--blur\/xs\,2px\)\] {
+    --tw-backdrop-blur: blur(var(--blur/xs,2px));
+    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-blur-lg {
+    --tw-backdrop-blur: blur(var(--blur-lg));
+    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-blur-md {
+    --tw-backdrop-blur: blur(var(--blur-md));
+    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-blur-none {
+    --tw-backdrop-blur: blur(var(--blur-none));
+    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-blur-sm {
+    --tw-backdrop-blur: blur(var(--blur-sm));
+    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-blur-xl {
+    --tw-backdrop-blur: blur(var(--blur-xl));
+    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-blur-xs {
+    --tw-backdrop-blur: blur(var(--blur-xs));
+    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 {
     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,);
   }
@@ -1210,6 +1672,11 @@
     --tw-ease: var(--ease-smooth);
     transition-timing-function: var(--ease-smooth);
   }
+  .select-all {
+    -webkit-user-select: all;
+    -moz-user-select: all;
+         user-select: all;
+  }
   .hover\:border-stroke-strong {
     &:hover {
       @media (hover: hover) {
@@ -1217,30 +1684,22 @@
       }
     }
   }
+  .hover\:bg-paper-2 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-paper-2);
+      }
+    }
+  }
   .focus\:outline-none {
     &:focus {
       --tw-outline-style: none;
       outline-style: none;
     }
   }
-  .md\:gap-6 {
-    @media (width >= 48rem) {
-      gap: var(--spacing-6);
-    }
-  }
-  .md\:py-6 {
-    @media (width >= 48rem) {
-      padding-block: var(--spacing-6);
-    }
-  }
-  .lg\:px-6 {
-    @media (width >= 64rem) {
-      padding-inline: var(--spacing-6);
-    }
-  }
 }
 @layer base {
-  html,
+  html,
   body {
     height: 100%;
   }
@@ -1261,27 +1720,27 @@
     pointer-events: none;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
   }
-  code,
+  code,
   pre {
     font-family: var(--font-family-mono);
     line-height: 1.4;
   }
   ::-moz-selection {
-    background: color-mix(in srgb, #eab308 70%, #ffffff 10%);
+    background: color-mix(in srgb, #eab308 70%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in oklab, var(--color-gold) 70%, var(--color-white) 10%);
     }
     color: var(--color-void);
   }
   ::selection {
-    background: color-mix(in srgb, #eab308 70%, #ffffff 10%);
+    background: color-mix(in srgb, #eab308 70%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in oklab, var(--color-gold) 70%, var(--color-white) 10%);
     }
     color: var(--color-void);
   }
   :focus-visible {
-    outline: 2px solid color-mix(in srgb, #eab308 75%, #ffffff 10%);
+    outline: 2px solid color-mix(in srgb, #eab308 75%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       outline: 2px solid color-mix(in oklab, var(--color-gold) 75%, var(--color-white) 10%);
     }
@@ -1520,7 +1979,7 @@
     border-width: 0px;
     padding: var(--spacing-0);
     white-space: nowrap;
-    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
   }
   .na-header-actions {
     display: flex;
@@ -1550,7 +2009,7 @@
   .na-grid-3 {
     grid-template-columns: repeat(3, 1fr);
   }
-  @media (max-width: 1024px) {
+  @media (width <= 1024px) {
     .na-grid-3 {
       grid-template-columns: 1fr;
     }
@@ -1592,7 +2051,7 @@
     grid-template-columns: 2fr 1fr;
     margin-bottom: var(--spacing-8);
   }
-  @media (max-width: 1024px) {
+  @media (width <= 1024px) {
     .na-grid-chart {
       grid-template-columns: 1fr;
     }
@@ -1724,9 +2183,6 @@
   .na-grid-2-1 {
     grid-template-columns: 2fr 1fr;
   }
-  .na-grid-chart-health {
-    grid-template-columns: 1.35fr 0.65fr;
-  }
   .na-flex {
     display: flex;
   }
@@ -1759,9 +2215,6 @@
   .na-mb-1 {
     margin-bottom: var(--spacing-1);
   }
-  .na-mb-2 {
-    margin-bottom: var(--spacing-2);
-  }
   .na-mb-4 {
     margin-bottom: var(--spacing-4);
   }
@@ -1824,7 +2277,7 @@
       color: color-mix(in oklab, var(--color-lux) 75%, var(--color-clay));
     }
   }
-  .na-list li:before {
+  .na-list li::before {
     content: "•";
     color: var(--color-clay);
     margin-right: 0.25rem;
@@ -1869,7 +2322,7 @@
     grid-template-columns: 2fr 1fr;
     margin-bottom: var(--spacing-8);
   }
-  @media (max-width: 1024px) {
+  @media (width <= 1024px) {
     .na-grid-chart-health {
       grid-template-columns: 1fr;
     }
@@ -2101,7 +2554,7 @@
     min-height: 100dvh;
     grid-template-columns: 280px 1fr;
   }
-  @media (max-width: 1024px) {
+  @media (width <= 1024px) {
     .na-shell {
       grid-template-columns: 1fr;
     }
@@ -2248,9 +2701,9 @@
   .na-search {
     position: relative;
     width: 100%;
-    max-width: 480px;
+    max-width: var(--w-search-bar);
   }
-  @media (max-width: 768px) {
+  @media (width <= 768px) {
     .na-search {
       max-width: 100%;
     }
@@ -2336,7 +2789,7 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
   .na-btn-primary:hover {
-    background-color: color-mix(in srgb, #eab308 90%, #ffffff 10%);
+    background-color: color-mix(in srgb, #eab308 90%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-primary) 90%, var(--color-white) 10%);
     }
@@ -2379,7 +2832,7 @@
     height: var(--spacing-3);
     width: var(--spacing-3);
     border-radius: var(--radius-full);
-    background: color-mix(in srgb, #f43f5e 70%, #ffffff 5%);
+    background: color-mix(in srgb, #f43f5e 70%, #fff 5%);
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in oklab, var(--color-error) 70%, var(--color-white) 5%);
     }
@@ -2403,9 +2856,9 @@
     background-color: var(--color-paper);
     padding: var(--spacing-6);
     box-shadow: var(--shadow-card);
-    transition: transform 300ms var(--ease-premium),
-      box-shadow 300ms var(--ease-premium),
-      border-color 300ms var(--ease-premium),
+    transition: transform 300ms var(--ease-premium),
+      box-shadow 300ms var(--ease-premium),
+      border-color 300ms var(--ease-premium),
       background-color 300ms var(--ease-premium);
   }
   .na-card::before {
@@ -2451,11 +2904,7 @@
     position: relative;
     z-index: var(--z-base);
     display: grid;
-    grid-template-areas: "head head head"
-      "rail main drawer"
-      "foot foot foot";
-    grid-template-columns: var(--spacing-16) 1fr 0px;
-    grid-template-rows: var(--spacing-14) 1fr var(--spacing-8);
+    grid-template: "head head head" var(--spacing-14) "rail main drawer" 1fr "foot foot foot" var(--spacing-8) / var(--spacing-16) 1fr 0;
     height: 100vh;
     width: 100vw;
     transition: grid-template-columns 0.3s cubic-bezier(0.16, 1, 0.3, 1);
@@ -2549,7 +2998,7 @@
     border-collapse: separate;
     border-spacing: 0;
   }
-  .na-table-frozen th,
+  .na-table-frozen th,
   .na-table-frozen td {
     height: 2.5rem;
     padding: 0 var(--spacing-3);
@@ -2571,7 +3020,7 @@
     text-transform: uppercase;
     font-weight: var(--font-weight-semibold);
   }
-  .na-table-frozen th:first-child,
+  .na-table-frozen th:first-child,
   .na-table-frozen td:first-child {
     position: sticky;
     left: 0;
@@ -2699,13 +3148,13 @@
     background: rgba(255, 255, 255, 0.03);
   }
   .na-trend.up {
-    color: color-mix(in srgb, #10b981 75%, #ffffff 10%);
+    color: color-mix(in srgb, #10b981 75%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-success) 75%, var(--color-white) 10%);
     }
   }
   .na-trend.down {
-    color: color-mix(in srgb, #f43f5e 75%, #ffffff 10%);
+    color: color-mix(in srgb, #f43f5e 75%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-error) 75%, var(--color-white) 10%);
     }
@@ -2757,7 +3206,7 @@
     content: "";
     position: absolute;
     inset: 0;
-    background: radial-gradient(circle at 12% 20%, rgba(212, 181, 114, 0.08), transparent 55%),
+    background: radial-gradient(circle at 12% 20%, rgba(212, 181, 114, 0.08), transparent 55%),
       repeating-linear-gradient(90deg, transparent 0, transparent 18px, rgba(255, 255, 255, 0.03) 19px);
     opacity: 0.35;
     pointer-events: none;
@@ -2855,7 +3304,7 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
     border-color: var(--color-stroke-soft);
-    transition: background-color 220ms var(--ease-smooth),
+    transition: background-color 220ms var(--ease-smooth),
       color 220ms var(--ease-smooth);
   }
   .na-tr:hover {
@@ -2940,7 +3389,7 @@
   .na-grid-metadata {
     grid-template-columns: 1fr 1fr;
   }
-  @media (max-width: 1024px) {
+  @media (width <= 1024px) {
     .na-grid-metadata {
       grid-template-columns: 1fr;
     }
@@ -3065,49 +3514,49 @@
     background: rgba(228, 228, 231, 0.25);
   }
   .na-status.ok {
-    color: color-mix(in srgb, #10b981 75%, #ffffff 10%);
+    color: color-mix(in srgb, #10b981 75%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-success) 75%, var(--color-white) 10%);
     }
   }
   .na-status.ok::before {
-    background: color-mix(in srgb, #10b981 70%, #ffffff 10%);
+    background: color-mix(in srgb, #10b981 70%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in oklab, var(--color-success) 70%, var(--color-white) 10%);
     }
   }
   .na-status.pending {
-    color: color-mix(in srgb, #f59e0b 75%, #ffffff 10%);
+    color: color-mix(in srgb, #f59e0b 75%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-warning) 75%, var(--color-white) 10%);
     }
   }
   .na-status.pending::before {
-    background: color-mix(in srgb, #f59e0b 70%, #ffffff 10%);
+    background: color-mix(in srgb, #f59e0b 70%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in oklab, var(--color-warning) 70%, var(--color-white) 10%);
     }
   }
   .na-status.bad {
-    color: color-mix(in srgb, #f43f5e 75%, #ffffff 10%);
+    color: color-mix(in srgb, #f43f5e 75%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-error) 75%, var(--color-white) 10%);
     }
   }
   .na-status.bad::before {
-    background: color-mix(in srgb, #f43f5e 70%, #ffffff 10%);
+    background: color-mix(in srgb, #f43f5e 70%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in oklab, var(--color-error) 70%, var(--color-white) 10%);
     }
   }
   .na-status.warn {
-    color: color-mix(in srgb, #f59e0b 75%, #ffffff 10%);
+    color: color-mix(in srgb, #f59e0b 75%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-warning) 75%, var(--color-white) 10%);
     }
   }
   .na-status.warn::before {
-    background: color-mix(in srgb, #f59e0b 70%, #ffffff 10%);
+    background: color-mix(in srgb, #f59e0b 70%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in oklab, var(--color-warning) 70%, var(--color-white) 10%);
     }
@@ -3155,7 +3604,7 @@
     transition: color 200ms var(--ease-smooth);
   }
   .na-footnote-link:hover {
-    color: color-mix(in srgb, #eab308 90%, #ffffff 10%);
+    color: color-mix(in srgb, #eab308 90%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-gold) 90%, var(--color-white) 10%);
     }
@@ -3198,7 +3647,7 @@
     content: "";
     position: absolute;
     inset: -30%;
-    background: radial-gradient(circle at 30% 25%, rgba(212, 181, 114, 0.22), transparent 55%),
+    background: radial-gradient(circle at 30% 25%, rgba(212, 181, 114, 0.22), transparent 55%),
       radial-gradient(circle at 70% 80%, rgba(228, 228, 231, 0.1), transparent 60%);
     transform: rotate(8deg);
     opacity: 0.9;
@@ -3294,7 +3743,7 @@
     border-width: 1px;
     border-color: var(--color-stroke-soft);
     background-color: var(--color-paper-2);
-    color: color-mix(in srgb, #eab308 70%, #ffffff 10%);
+    color: color-mix(in srgb, #eab308 70%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-gold) 70%, var(--color-white) 10%);
     }
@@ -3513,7 +3962,7 @@
     gap: var(--spacing-2);
   }
   @media (prefers-reduced-motion: reduce) {
-    .na-skeleton::before,
+    .na-skeleton::before,
     .na-skel-block::before {
       animation: none !important;
     }
@@ -3588,13 +4037,13 @@
     height: 22px;
   }
   @media (prefers-contrast: more) {
-    .na-skeleton::before,
+    .na-skeleton::before,
     .na-skel-block::before {
-      background: linear-gradient(
-        90deg,
-        rgba(255, 255, 255, 0.05),
-        rgba(255, 255, 255, 0.14),
-        rgba(255, 255, 255, 0.05)
+      background: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0.05),
+        rgba(255, 255, 255, 0.14),
+        rgba(255, 255, 255, 0.05)
       );
     }
   }
@@ -3641,7 +4090,7 @@
   .na-stateful .na-slot {
     display: none;
   }
-  .na-stateful:not([data-ui-state]):not(.is-loading):not([data-state="first-run"]) .na-slot--ready {
+  .na-stateful:not([data-ui-state], .is-loading, [data-state="first-run"]) .na-slot--ready {
     display: block;
   }
   .na-stateful[data-ui-state="ready"] .na-slot--ready {
@@ -3665,9 +4114,9 @@
   .na-stateful[data-state="first-run"] .na-slot--first-run {
     display: block;
   }
-  .na-stateful[data-ui-state="loading"],
-  .na-stateful[data-ui-state="first-run"],
-  .na-stateful.is-loading,
+  .na-stateful[data-ui-state="loading"],
+  .na-stateful[data-ui-state="first-run"],
+  .na-stateful.is-loading,
   .na-stateful[data-state="first-run"] {
     position: relative;
   }
@@ -3696,7 +4145,7 @@
     border-width: 1px;
     border-color: var(--color-stroke-soft);
     background-color: var(--color-paper);
-    color: color-mix(in srgb, #f43f5e 70%, #ffffff 10%);
+    color: color-mix(in srgb, #f43f5e 70%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-error) 70%, var(--color-white) 10%);
     }
@@ -3747,7 +4196,7 @@
     width: 7px;
     height: 7px;
     border-radius: 999px;
-    background: color-mix(in srgb, #f43f5e 70%, #ffffff 10%);
+    background: color-mix(in srgb, #f43f5e 70%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in oklab, var(--color-error) 70%, var(--color-white) 10%);
     }
@@ -3785,7 +4234,7 @@
       border-color: color-mix(in oklab, var(--color-error) 35%, rgba(255, 255, 255, 0.1));
     }
     background: rgba(251, 113, 133, 0.1);
-    color: color-mix(in srgb, #f43f5e 75%, #ffffff 10%);
+    color: color-mix(in srgb, #f43f5e 75%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-error) 75%, var(--color-white) 10%);
     }
@@ -3807,7 +4256,7 @@
     width: min(420px, calc(100vw - 2rem));
     pointer-events: none;
   }
-  @media (max-width: 640px) {
+  @media (width <= 640px) {
     .na-toasts {
       left: 1rem;
       right: 1rem;
@@ -3826,8 +4275,8 @@
     box-shadow: var(--shadow-lift);
     padding: 0.9rem 0.95rem;
     animation: var(--animate-slide-up);
-    transition: transform 240ms var(--ease-premium),
-      box-shadow 240ms var(--ease-premium),
+    transition: transform 240ms var(--ease-premium),
+      box-shadow 240ms var(--ease-premium),
       border-color 240ms var(--ease-premium);
   }
   .na-toast::before {
@@ -3949,8 +4398,8 @@
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-lux) 55%, var(--color-clay));
     }
-    transition: transform 240ms var(--ease-premium),
-      border-color 240ms var(--ease-premium),
+    transition: transform 240ms var(--ease-premium),
+      border-color 240ms var(--ease-premium),
       background-color 240ms var(--ease-premium);
     flex: 0 0 auto;
   }
@@ -3964,49 +4413,49 @@
     transform: translateY(1px);
   }
   .na-toast--success .na-toast-icon {
-    color: color-mix(in srgb, #10b981 75%, #ffffff 10%);
+    color: color-mix(in srgb, #10b981 75%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-success) 75%, var(--color-white) 10%);
     }
   }
   .na-toast--success .na-toast-icon::after {
-    background: color-mix(in srgb, #10b981 70%, #ffffff 10%);
+    background: color-mix(in srgb, #10b981 70%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in oklab, var(--color-success) 70%, var(--color-white) 10%);
     }
   }
   .na-toast--warning .na-toast-icon {
-    color: color-mix(in srgb, #f59e0b 75%, #ffffff 10%);
+    color: color-mix(in srgb, #f59e0b 75%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-warning) 75%, var(--color-white) 10%);
     }
   }
   .na-toast--warning .na-toast-icon::after {
-    background: color-mix(in srgb, #f59e0b 70%, #ffffff 10%);
+    background: color-mix(in srgb, #f59e0b 70%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in oklab, var(--color-warning) 70%, var(--color-white) 10%);
     }
   }
   .na-toast--error .na-toast-icon {
-    color: color-mix(in srgb, #f43f5e 75%, #ffffff 10%);
+    color: color-mix(in srgb, #f43f5e 75%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-error) 75%, var(--color-white) 10%);
     }
   }
   .na-toast--error .na-toast-icon::after {
-    background: color-mix(in srgb, #f43f5e 70%, #ffffff 10%);
+    background: color-mix(in srgb, #f43f5e 70%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in oklab, var(--color-error) 70%, var(--color-white) 10%);
     }
   }
   .na-toast--info .na-toast-icon {
-    color: color-mix(in srgb, #3b82f6 75%, #ffffff 10%);
+    color: color-mix(in srgb, #3b82f6 75%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-info) 75%, var(--color-white) 10%);
     }
   }
   .na-toast--info .na-toast-icon::after {
-    background: color-mix(in srgb, #3b82f6 70%, #ffffff 10%);
+    background: color-mix(in srgb, #3b82f6 70%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in oklab, var(--color-info) 70%, var(--color-white) 10%);
     }
@@ -4047,8 +4496,8 @@
   .na-control {
     position: relative;
   }
-  .na-input,
-  .na-select,
+  .na-input,
+  .na-select,
   .na-textarea {
     width: 100%;
     border-radius: var(--radius-control);
@@ -4063,8 +4512,8 @@
     line-height: var(--leading-snug);
     --tw-outline-style: none;
     outline-style: none;
-    transition: border-color 240ms var(--ease-premium),
-      box-shadow 240ms var(--ease-premium),
+    transition: border-color 240ms var(--ease-premium),
+      box-shadow 240ms var(--ease-premium),
       background-color 240ms var(--ease-premium);
     color: var(--color-lux);
   }
@@ -4080,17 +4529,17 @@
       color: color-mix(in oklab, var(--color-lux) 42%, var(--color-clay));
     }
   }
-  .na-input::placeholder,
+  .na-input::placeholder,
   .na-textarea::placeholder {
     color: color-mix(in srgb, #f4f4f5 42%, #71717a);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-lux) 42%, var(--color-clay));
     }
   }
-  .na-input:focus,
-  .na-select:focus,
+  .na-input:focus,
+  .na-select:focus,
   .na-textarea:focus {
-    border-color: color-mix(in srgb, #eab308 60%, #ffffff 5%);
+    border-color: color-mix(in srgb, #eab308 60%, #fff 5%);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-gold) 60%, var(--color-white) 5%);
     }
@@ -4148,11 +4597,11 @@
       color: color-mix(in oklab, var(--color-lux) 62%, var(--color-clay));
     }
   }
-  .na-field[data-state="error"] .na-input,
-  .na-field[data-state="error"] .na-select,
-  .na-field[data-state="error"] .na-textarea,
-  .na-input[aria-invalid="true"],
-  .na-select[aria-invalid="true"],
+  .na-field[data-state="error"] .na-input,
+  .na-field[data-state="error"] .na-select,
+  .na-field[data-state="error"] .na-textarea,
+  .na-input[aria-invalid="true"],
+  .na-select[aria-invalid="true"],
   .na-textarea[aria-invalid="true"] {
     border-color: color-mix(in srgb, #f43f5e 40%, rgba(255, 255, 255, 0.1));
     @supports (color: color-mix(in lab, red, red)) {
@@ -4168,13 +4617,13 @@
     background: rgba(251, 113, 133, 0.08);
   }
   .na-field[data-state="error"] .na-inline-icon {
-    color: color-mix(in srgb, #f43f5e 75%, #ffffff 10%);
+    color: color-mix(in srgb, #f43f5e 75%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-error) 75%, var(--color-white) 10%);
     }
   }
-  .na-field[data-state="success"] .na-input,
-  .na-field[data-state="success"] .na-select,
+  .na-field[data-state="success"] .na-input,
+  .na-field[data-state="success"] .na-select,
   .na-field[data-state="success"] .na-textarea {
     border-color: color-mix(in srgb, #10b981 35%, rgba(255, 255, 255, 0.1));
     @supports (color: color-mix(in lab, red, red)) {
@@ -4190,7 +4639,7 @@
     background: rgba(52, 211, 153, 0.08);
   }
   .na-field[data-state="success"] .na-inline-icon {
-    color: color-mix(in srgb, #10b981 75%, #ffffff 10%);
+    color: color-mix(in srgb, #10b981 75%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-success) 75%, var(--color-white) 10%);
     }
@@ -4203,7 +4652,7 @@
     background: rgba(96, 165, 250, 0.08);
   }
   .na-field[data-state="info"] .na-inline-icon {
-    color: color-mix(in srgb, #3b82f6 75%, #ffffff 10%);
+    color: color-mix(in srgb, #3b82f6 75%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-info) 75%, var(--color-white) 10%);
     }
@@ -4236,8 +4685,8 @@
     overflow: hidden;
     transform: translateY(10px) scale(0.985);
     opacity: 0;
-    transition: transform 240ms var(--ease-premium),
-      opacity 240ms var(--ease-premium),
+    transition: transform 240ms var(--ease-premium),
+      opacity 240ms var(--ease-premium),
       border-color 240ms var(--ease-premium);
   }
   .na-modal__panel::before {
@@ -4254,6 +4703,7 @@
   .na-modal:target {
     opacity: 1;
     pointer-events: auto;
+    z-index: 80;
   }
   .na-modal:target .na-modal__panel {
     transform: translateY(0) scale(1);
@@ -4262,6 +4712,8 @@
   }
   body:has(.na-modal:target) {
     overflow: hidden;
+    overscroll-behavior: contain;
+    touch-action: none;
   }
   .na-modal__header {
     display: grid;
@@ -4285,7 +4737,7 @@
     align-items: center;
     justify-content: center;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
-    color: color-mix(in srgb, #eab308 72%, #ffffff 10%);
+    color: color-mix(in srgb, #eab308 72%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-gold) 72%, var(--color-white) 10%);
     }
@@ -4339,8 +4791,8 @@
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-lux) 55%, var(--color-clay));
     }
-    transition: transform 240ms var(--ease-premium),
-      border-color 240ms var(--ease-premium),
+    transition: transform 240ms var(--ease-premium),
+      border-color 240ms var(--ease-premium),
       background-color 240ms var(--ease-premium);
   }
   .na-modal__close:hover {
@@ -4368,31 +4820,31 @@
     }
   }
   .na-modal--danger .na-modal__icon {
-    color: color-mix(in srgb, #f43f5e 78%, #ffffff 10%);
+    color: color-mix(in srgb, #f43f5e 78%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-error) 78%, var(--color-white) 10%);
     }
   }
   .na-modal--danger .na-modal__icon::after {
-    background: color-mix(in srgb, #f43f5e 70%, #ffffff 10%);
+    background: color-mix(in srgb, #f43f5e 70%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in oklab, var(--color-error) 70%, var(--color-white) 10%);
     }
   }
   .na-modal--success .na-modal__icon {
-    color: color-mix(in srgb, #10b981 78%, #ffffff 10%);
+    color: color-mix(in srgb, #10b981 78%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-success) 78%, var(--color-white) 10%);
     }
   }
   .na-modal--success .na-modal__icon::after {
-    background: color-mix(in srgb, #10b981 70%, #ffffff 10%);
+    background: color-mix(in srgb, #10b981 70%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in oklab, var(--color-success) 70%, var(--color-white) 10%);
     }
   }
   @media (prefers-reduced-motion: reduce) {
-    .na-modal,
+    .na-modal,
     .na-modal__panel {
       transition: none !important;
     }
@@ -4403,22 +4855,15 @@
   body:has(.na-modal:target) .na-modal:target {
     pointer-events: auto;
   }
-  .na-modal:target {
-    z-index: 80;
-  }
   body:has(.na-modal:target) .na-toasts {
     opacity: 0.35;
     filter: saturate(0.9);
     pointer-events: none;
   }
-  body:has(.na-modal:target) {
-    overscroll-behavior: contain;
-    touch-action: none;
-  }
   body:has(.na-modal:target) .na-modal__panel {
     touch-action: auto;
   }
-  @media (max-width: 640px) {
+  @media (width <= 640px) {
     .na-modal {
       place-items: end center;
       padding: 0.75rem;
@@ -4465,7 +4910,7 @@
       pointer-events: none;
     }
   }
-  @media (max-width: 640px) {
+  @media (width <= 640px) {
     .na-modal--center {
       place-items: center;
     }
@@ -4486,8 +4931,8 @@
   }
   :where(.na-btn, .na-input, .na-select, .na-textarea, .na-modal__close, .na-toast-close):focus-visible {
     outline: none;
-    box-shadow: 0 0 0 3px rgba(212, 181, 114, 0.18),
-      0 0 0 1px rgba(212, 181, 114, 0.35),
+    box-shadow: 0 0 0 3px rgba(212, 181, 114, 0.18),
+      0 0 0 1px rgba(212, 181, 114, 0.35),
       var(--shadow-card);
     border-color: color-mix(in srgb, #eab308 60%, rgba(255, 255, 255, 0.1));
     @supports (color: color-mix(in lab, red, red)) {
@@ -4495,13 +4940,13 @@
     }
   }
   .na-btn-primary:focus-visible {
-    box-shadow: 0 0 0 3px rgba(212, 181, 114, 0.22),
-      0 0 0 1px rgba(212, 181, 114, 0.45),
+    box-shadow: 0 0 0 3px rgba(212, 181, 114, 0.22),
+      0 0 0 1px rgba(212, 181, 114, 0.45),
       var(--shadow-deep);
   }
   .na-btn-danger:focus-visible {
-    box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.16),
-      0 0 0 1px rgba(251, 113, 133, 0.32),
+    box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.16),
+      0 0 0 1px rgba(251, 113, 133, 0.32),
       var(--shadow-card);
     border-color: color-mix(in srgb, #f43f5e 45%, rgba(255, 255, 255, 0.1));
     @supports (color: color-mix(in lab, red, red)) {
@@ -4509,8 +4954,8 @@
     }
   }
   .na-modal__close:focus-visible {
-    box-shadow: 0 0 0 3px rgba(212, 181, 114, 0.16),
-      0 0 0 1px rgba(212, 181, 114, 0.3),
+    box-shadow: 0 0 0 3px rgba(212, 181, 114, 0.16),
+      0 0 0 1px rgba(212, 181, 114, 0.3),
       var(--shadow-card);
   }
   .na-confirm-input {
@@ -4534,7 +4979,7 @@
   .na-modal__panel:has(.na-confirm-input:valid) .na-confirm-fake {
     display: none;
   }
-  .na-confirm-inline,
+  .na-confirm-inline,
   .na-confirm-ok {
     display: none;
   }
@@ -4553,6 +4998,7 @@
       border-color: color-mix(in oklab, var(--color-success) 35%, rgba(255, 255, 255, 0.1));
     }
     box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1);
+    animation: na-inkpulse 420ms var(--ease-premium);
   }
   @keyframes na-shake {
     0% {
@@ -4597,14 +5043,11 @@
   .na-modal__panel:has(.na-confirm-input:not(:placeholder-shown):invalid) .na-field {
     border-radius: var(--radius-card);
   }
-  .na-modal__panel:has(.na-confirm-input:valid) .na-confirm-input {
-    animation: na-inkpulse 420ms var(--ease-premium);
-  }
   @media (prefers-reduced-motion: reduce) {
     .na-modal__panel:has(.na-confirm-input:not(:-moz-placeholder):invalid) .na-confirm-input {
       animation: none !important;
     }
-    .na-modal__panel:has(.na-confirm-input:not(:placeholder-shown):invalid) .na-confirm-input,
+    .na-modal__panel:has(.na-confirm-input:not(:placeholder-shown):invalid) .na-confirm-input,
     .na-modal__panel:has(.na-confirm-input:valid) .na-confirm-input {
       animation: none !important;
     }
@@ -4640,7 +5083,7 @@
       background: color-mix(in oklab, var(--color-paper) 92%, var(--color-void));
     }
     border-bottom: 1px solid var(--color-stroke-soft);
-    transition: background-color 240ms var(--ease-premium),
+    transition: background-color 240ms var(--ease-premium),
       border-color 240ms var(--ease-premium);
   }
   .na-summary:hover {
@@ -4704,9 +5147,9 @@
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-lux) 55%, var(--color-clay));
     }
-    transition: transform 260ms var(--ease-premium),
-      border-color 240ms var(--ease-premium),
-      background-color 240ms var(--ease-premium),
+    transition: transform 260ms var(--ease-premium),
+      border-color 240ms var(--ease-premium),
+      background-color 240ms var(--ease-premium),
       color 240ms var(--ease-premium);
   }
   .na-summary-chevron::before {
@@ -4741,7 +5184,7 @@
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-paper-2) var(--opacity-60), transparent);
     }
-    padding: 0.85rem 0.85rem;
+    padding: 0.85rem;
   }
   .na-details-section + .na-details-section {
     margin-top: 0.75rem;
@@ -4787,8 +5230,8 @@
     outline: none;
   }
   .na-details > summary:focus-visible {
-    box-shadow: 0 0 0 3px rgba(212, 181, 114, 0.16),
-      0 0 0 1px rgba(212, 181, 114, 0.3),
+    box-shadow: 0 0 0 3px rgba(212, 181, 114, 0.16),
+      0 0 0 1px rgba(212, 181, 114, 0.3),
       var(--shadow-card);
   }
   @media (prefers-reduced-motion: reduce) {
@@ -4850,7 +5293,7 @@
     background: rgba(255, 255, 255, 0.04);
   }
   .na-summary-count:not([data-count="0"])::after {
-    background: color-mix(in srgb, #eab308 65%, #ffffff 10%);
+    background: color-mix(in srgb, #eab308 65%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in oklab, var(--color-gold) 65%, var(--color-white) 10%);
     }
@@ -4860,7 +5303,7 @@
     padding-right: 0.55rem;
     font-size: 10.5px;
   }
-  .na-summary-flag,
+  .na-summary-flag,
   .na-summary-risk {
     display: inline-flex;
     align-items: center;
@@ -4883,7 +5326,7 @@
     white-space: nowrap;
     position: relative;
   }
-  .na-summary-flag::after,
+  .na-summary-flag::after,
   .na-summary-risk::after {
     content: "";
     width: 7px;
@@ -4906,9 +5349,10 @@
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-lux) 70%, var(--color-clay));
     }
+    animation: na-softpulse 1400ms var(--ease-premium) infinite;
   }
   .na-summary-flag[data-flag="dirty"]::after {
-    background: color-mix(in srgb, #f59e0b 72%, #ffffff 10%);
+    background: color-mix(in srgb, #f59e0b 72%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in oklab, var(--color-warning) 72%, var(--color-white) 10%);
     }
@@ -4924,14 +5368,11 @@
       box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
     }
   }
-  .na-summary-flag[data-flag="dirty"] {
-    animation: na-softpulse 1400ms var(--ease-premium) infinite;
-  }
   .na-summary-flag[data-flag="saved"]::before {
     content: "Saved";
   }
   .na-summary-flag[data-flag="saved"]::after {
-    background: color-mix(in srgb, #10b981 70%, #ffffff 10%);
+    background: color-mix(in srgb, #10b981 70%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in oklab, var(--color-success) 70%, var(--color-white) 10%);
     }
@@ -4953,7 +5394,7 @@
     background: rgba(52, 211, 153, 0.08);
   }
   .na-summary-risk[data-risk="low"]::after {
-    background: color-mix(in srgb, #10b981 70%, #ffffff 10%);
+    background: color-mix(in srgb, #10b981 70%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in oklab, var(--color-success) 70%, var(--color-white) 10%);
     }
@@ -4966,7 +5407,7 @@
     background: rgba(245, 158, 11, 0.08);
   }
   .na-summary-risk[data-risk="med"]::after {
-    background: color-mix(in srgb, #f59e0b 70%, #ffffff 10%);
+    background: color-mix(in srgb, #f59e0b 70%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in oklab, var(--color-warning) 70%, var(--color-white) 10%);
     }
@@ -4979,12 +5420,12 @@
     background: rgba(251, 113, 133, 0.08);
   }
   .na-summary-risk[data-risk="high"]::after {
-    background: color-mix(in srgb, #f43f5e 70%, #ffffff 10%);
+    background: color-mix(in srgb, #f43f5e 70%, #fff 10%);
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in oklab, var(--color-error) 70%, var(--color-white) 10%);
     }
   }
-  .na-details-body .na-details .na-summary-flag,
+  .na-details-body .na-details .na-summary-flag,
   .na-details-body .na-details .na-summary-risk {
     padding-left: 0.55rem;
     padding-right: 0.55rem;
@@ -5011,41 +5452,32 @@
   }
   .na-summary-right :where(.na-summary-risk) {
     border-color: var(--color-stroke);
+    order: 10;
   }
   .na-summary-right :where(.na-summary-flag[data-flag="dirty"]) {
     border-color: color-mix(in srgb, #f59e0b 30%, rgba(255, 255, 255, 0.1));
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-warning) 30%, rgba(255, 255, 255, 0.1));
     }
+    order: 20;
   }
   .na-summary-right :where(.na-summary-count) {
     opacity: 0.92;
-  }
-  .na-summary-right {
-    display: flex;
-  }
-  .na-summary-right :where(.na-summary-risk) {
-    order: 10;
+    order: 30;
   }
   .na-summary-right :where(.na-summary-flag) {
     order: 20;
   }
-  .na-summary-right :where(.na-summary-count) {
-    order: 30;
-  }
   .na-summary-right :where(.na-summary-chevron) {
     order: 99;
   }
   .na-summary-right :where(.na-summary-flag[data-flag="saved"]) {
     order: 21;
   }
-  .na-summary-right :where(.na-summary-flag[data-flag="dirty"]) {
-    order: 20;
-  }
   .na-details-body .na-details .na-summary-right {
     gap: 0.4rem;
   }
-  @media (max-width: 420px) {
+  @media (width <= 420px) {
     .na-summary-right {
       flex-wrap: wrap;
       justify-content: flex-end;
@@ -5325,6 +5757,14 @@
   inherits: false;
   initial-value: 0;
 }
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 @keyframes slide-up {
   from {
     transform: translateY(10px);
@@ -5335,8 +5775,18 @@
     opacity: 1;
   }
 }
+@keyframes scale-in {
+  from {
+    transform: scale(0.985);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
 @keyframes soft-pulse {
-  0%,
+  0%,
     100% {
     opacity: 0.85;
   }
@@ -5417,4 +5867,4 @@
       --tw-translate-z: 0;
     }
   }
-}
+}