@lanrenbang/basecoat-ultra 0.1.2

package/dist/css/basecoat.css

@@ -0,0 +1,1797 @@
+/*
+  Main CSS file for Basecoat. 
+  This file has been refactored to import smaller, modular parts.
+*/
+
+/* 1. Core Styles, Variables, and Resets */
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-width: 16rem;
+  --sidebar-mobile-width: 18rem;
+  --scrollbar-track: transparent;
+  --scrollbar-thumb: rgba(0, 0, 0, 0.3);
+  --scrollbar-width: 6px;
+  --scrollbar-radius: 6px;
+  --chevron-down-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>'); /* --muted-foreground */
+  --chevron-down-icon-50: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0 / 0.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>'); /* --muted-foreground + 50% opacity */
+  --check-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>'); /* --muted-foreground */
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.269 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.371 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.439 0 0);
+  --scrollbar-thumb: rgba(255, 255, 255, 0.3);
+  --chevron-down-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.708 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>'); /* --muted-foreground */
+  --chevron-down-icon-50: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.708 0 0 / 0.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>'); /* --muted-foreground + 50% opacity */
+  --check-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.708 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>');/* --muted-foreground */
+  color-scheme: dark;
+}
+
+@import "../config.css";
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  html {
+    @apply scroll-smooth;
+  }
+  body {
+    @apply bg-background text-foreground overscroll-none antialiased;
+  }
+  .scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+
+    &::-webkit-scrollbar {
+      width: var(--scrollbar-width);
+    }
+    &::-webkit-scrollbar-track {
+      background: var(--scrollbar-track);
+    }
+    &::-webkit-scrollbar-thumb {
+      background: var(--scrollbar-thumb);
+      border-radius: var(--scrollbar-radius);
+    }
+  }
+}
+
+
+
+/* 2. Components (Matched to upstream structure) */
+/* Alert */
+@layer components {
+  .alert,
+  .alert-destructive {
+    @apply relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current;
+    
+    > h2,
+    > h3,
+    > h4,
+    > h5,
+    > h6,
+    > strong,
+    > [data-title] {
+      @apply col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight;
+    }
+    > section {
+      @apply text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed;
+
+      ul {
+        @apply list-inside list-disc text-sm;
+      }
+    }
+  }
+  .alert {
+    @apply bg-card text-card-foreground;
+  }
+  .alert-destructive {
+    @apply text-destructive bg-card [&>svg]:text-current;
+
+    > section {
+      @apply text-destructive;
+    }
+  }
+}
+
+
+/* Badge */
+@layer components {
+  .badge,
+  .badge-primary,
+  .badge-secondary,
+  .badge-destructive,
+  .badge-outline {
+    @apply inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden;
+  }
+  .badge,
+  .badge-primary {
+    @apply border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90;
+  }
+  .badge-secondary {
+    @apply border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90;
+  }
+  .badge-destructive {
+    @apply border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60;
+  }
+  .badge-outline {
+    @apply border-border bg-background text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground;
+  }
+}
+
+
+/* Button */
+@layer components {
+  .btn,
+  .btn-primary,
+  .btn-secondary,
+  .btn-outline,
+  .btn-ghost,
+  .btn-link,
+  .btn-destructive,
+  .btn-sm,
+  .btn-sm-primary,
+  .btn-sm-secondary,
+  .btn-sm-outline,
+  .btn-sm-ghost,
+  .btn-sm-link,
+  .btn-sm-destructive,
+  .btn-lg,
+  .btn-lg-primary,
+  .btn-lg-secondary,
+  .btn-lg-outline,
+  .btn-lg-ghost,
+  .btn-lg-link,
+  .btn-lg-destructive,
+  .btn-icon,
+  .btn-icon-primary,
+  .btn-icon-secondary,
+  .btn-icon-outline,
+  .btn-icon-ghost,
+  .btn-icon-link,
+  .btn-icon-destructive,
+  .btn-sm-icon,
+  .btn-sm-icon-primary,
+  .btn-sm-icon-secondary,
+  .btn-sm-icon-outline,
+  .btn-sm-icon-ghost,
+  .btn-sm-icon-link,
+  .btn-sm-icon-destructive,
+  .btn-lg-icon,
+  .btn-lg-icon-primary,
+  .btn-lg-icon-secondary,
+  .btn-lg-icon-outline,
+  .btn-lg-icon-ghost,
+  .btn-lg-icon-link,
+  .btn-lg-icon-destructive {
+    @apply inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer rounded-md;
+    
+    & svg:not([class*="size-"]) {
+      @apply size-4;
+    }
+  }
+  .btn,
+  .btn-primary,
+  .btn-secondary,
+  .btn-outline,
+  .btn-ghost,
+  .btn-link,
+  .btn-destructive {
+    @apply gap-2 h-9 px-4 py-2 has-[>svg]:px-3;
+  }
+  .btn-icon,
+  .btn-icon-primary,
+  .btn-icon-secondary,
+  .btn-icon-outline,
+  .btn-icon-ghost,
+  .btn-icon-link,
+  .btn-icon-destructive {
+    @apply size-9;
+  }
+  .btn-sm,
+  .btn-sm-primary,
+  .btn-sm-secondary,
+  .btn-sm-outline,
+  .btn-sm-ghost,
+  .btn-sm-link,
+  .btn-sm-destructive {
+    @apply gap-1.5 h-8 px-3 has-[>svg]:px-2.5;
+  }
+  .btn-sm-icon,
+  .btn-sm-icon-primary,
+  .btn-sm-icon-secondary,
+  .btn-sm-icon-outline,
+  .btn-sm-icon-ghost,
+  .btn-sm-icon-link,
+  .btn-sm-icon-destructive {
+    @apply size-8;
+  }
+  .btn-lg,
+  .btn-lg-primary,
+  .btn-lg-secondary,
+  .btn-lg-outline,
+  .btn-lg-ghost,
+  .btn-lg-link,
+  .btn-lg-destructive {
+    @apply gap-2 h-10 px-6 has-[>svg]:px-4;
+  }
+  .btn-lg-icon,
+  .btn-lg-icon-primary,
+  .btn-lg-icon-secondary,
+  .btn-lg-icon-outline,
+  .btn-lg-icon-ghost,
+  .btn-lg-icon-link,
+  .btn-lg-icon-destructive {
+    @apply size-10;
+  }
+  .btn,
+  .btn-primary,
+  .btn-sm,
+  .btn-sm-primary,
+  .btn-lg,
+  .btn-lg-primary,
+  .btn-icon,
+  .btn-icon-primary,
+  .btn-sm-icon,
+  .btn-sm-icon-primary,
+  .btn-lg-icon,
+  .btn-lg-icon-primary {
+    @apply bg-primary text-primary-foreground shadow-xs hover:bg-primary/90;
+    &[aria-pressed='true'] {
+      @apply bg-primary/90;
+    }
+  }
+  .btn-secondary,
+  .btn-sm-secondary,
+  .btn-lg-secondary,
+  .btn-icon-secondary,
+  .btn-sm-icon-secondary,
+  .btn-lg-icon-secondary {
+    @apply bg-secondary text-secondary-foreground shadow-xs;
+    &:hover,
+    &[aria-pressed='true'] {
+      @apply bg-secondary/80;
+    }
+  }
+  .btn-outline,
+  .btn-sm-outline,
+  .btn-lg-outline,
+  .btn-icon-outline,
+  .btn-sm-icon-outline,
+  .btn-lg-icon-outline {
+    @apply border bg-background text-foreground shadow-xs dark:bg-input/30 dark:border-input;
+    &:hover,
+    &[aria-pressed='true'] {
+      @apply bg-accent text-accent-foreground dark:bg-accent/50;
+    }
+  }
+  .btn-ghost,
+  .btn-sm-ghost,
+  .btn-lg-ghost,
+  .btn-icon-ghost,
+  .btn-sm-icon-ghost,
+  .btn-lg-icon-ghost {
+    @apply bg-transparent text-foreground shadow-none;
+    &:hover,
+    &[aria-pressed='true'] {
+      @apply bg-accent text-accent-foreground dark:bg-accent/50;
+    }
+  }
+  .btn-link,
+  .btn-sm-link,
+  .btn-lg-link,
+  .btn-icon-link,
+  .btn-sm-icon-link,
+  .btn-lg-icon-link {
+    @apply bg-transparent text-primary underline-offset-4 shadow-none;
+    &:hover,
+    &[aria-pressed='true'] {
+      @apply hover:underline hover:bg-transparent;
+    }
+  }
+  .btn-destructive,
+  .btn-sm-destructive,
+  .btn-lg-destructive,
+  .btn-icon-destructive,
+  .btn-sm-icon-destructive,
+  .btn-lg-icon-destructive {
+    @apply bg-destructive text-white shadow-xs focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60;
+    &:hover,
+    &[aria-pressed='true'] {
+      @apply bg-destructive/90 dark:bg-destructive/50;
+    }
+  }
+}
+
+
+/* Button Group */
+@layer components {
+  .button-group {
+    @apply inline-flex w-fit items-stretch isolate;
+    
+    > *:focus-visible,
+    > :is(.dropdown-menu, .popover, .select) > button:focus-visible {
+      @apply relative z-10;
+    }
+
+    > hr[role='separator'] {
+      @apply w-0 h-auto self-stretch border border-input shrink-0 m-0;
+    }
+
+    &:not([data-orientation='vertical']) {
+      > *:not(:first-child),
+      > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
+        @apply rounded-l-none border-l-0;
+      }
+      > *:not(:last-child),
+      > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
+        @apply rounded-r-none;
+      }
+    }  
+    &[data-orientation='vertical'] {
+      @apply flex-col;
+
+      > hr[role='separator'] {
+        @apply w-auto h-px;
+      }
+      
+      > *:not(:first-child),
+      > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
+        @apply rounded-t-none border-t-0;
+      }
+      > *:not(:last-child),
+      > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
+        @apply rounded-b-none;
+      }
+    }
+  }
+}
+
+
+/* Card */
+@layer components {
+  .card {
+    @apply bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm;
+
+    > header {
+      @apply @container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6;
+      /* TODO: CLEAN has-data-[slot=card-action] */
+
+      h2 {
+        @apply leading-none font-semibold;
+      }
+      p {
+        @apply text-muted-foreground text-sm;
+      }
+    }
+    > section {
+      @apply px-6;
+    }
+    > footer {
+      @apply flex items-center px-6 [.border-t]:pt-6;
+    }
+  }
+}
+
+
+/* Checkbox */
+@layer components {
+  :is(.form, .field) input[type='checkbox']:not([role='switch']),
+  .input[type='checkbox']:not([role='switch']) {
+    @apply appearance-none border-input dark:bg-input/30 checked:bg-primary dark:checked:bg-primary checked:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50;
+    
+    &:checked:after {
+      @apply content-[''] block size-3.5 bg-primary-foreground;
+      @apply mask-[image:var(--check-icon)] mask-size-[0.875rem] mask-no-repeat mask-center;
+    }
+  }
+}
+
+
+/* Collapsible */
+@layer components {
+  details {
+    &::details-content {
+      block-size: 0;
+      @apply block opacity-0 transition-discrete transition-all;
+    }
+    &[open]::details-content {
+      block-size: auto;
+      block-size: calc-size(auto, size);
+      @apply opacity-100;
+    }
+    summary {
+      @apply inline-flex items-center cursor-pointer;
+    }
+  }
+  details > summary::-webkit-details-marker {
+    display: none;
+  }
+}
+
+
+/* Command */
+@layer components {
+  .command-dialog {
+    @apply inset-y-0 opacity-0 transition-all transition-discrete;
+
+    &:is([open],:popover-open) {
+      @apply opacity-100;
+
+      &::backdrop {
+        @apply opacity-100;
+      }
+      > * {
+        @apply scale-100;
+      }
+
+      @starting-style {
+        @apply opacity-0;
+
+        &::backdrop {
+          @apply opacity-0;
+        }
+        > * {
+          @apply scale-95;
+        }
+      }
+    }
+    &::backdrop {
+      @apply bg-black/50 opacity-0 transition-all transition-discrete;
+    }
+    > * {
+      @apply bg-background fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%_-_2rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-lg border shadow-lg sm:max-w-lg max-h-[min(640px,calc(100%_-_2rem))];
+      @apply transition-all scale-95;
+
+      > button,
+      > form[method='dialog'] {
+        @apply absolute top-4 right-4;
+      }
+      > button,
+      > form[method='dialog'] > button {
+        @apply ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground  rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0;
+        
+        & svg:not([class*="size-"]) {
+          @apply size-4;
+        }
+      }
+    }
+
+    .command {
+      > header input {
+        @apply h-12;
+      }
+      [role='menu'] {
+        @apply px-2;
+
+        [role='menuitem'] {
+          @apply py-3 px-2 [&_svg]:size-5;
+        }
+        [role='heading'] {
+          @apply px-2 py-1.5 font-medium text-muted-foreground;
+        }
+      }
+    }
+  }
+
+  .command {
+    > header {
+      @apply flex items-center border-b px-3 gap-2;
+
+      svg {
+        @apply size-4 shrink-0 opacity-50;
+      }
+      input {
+        @apply placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50;
+      }
+    }
+    [role='menu'] {
+      @apply max-h-[300px] overflow-y-auto overflow-x-hidden p-1;
+
+      [role='menuitem'] {
+        @apply aria-hidden:hidden relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0;
+
+        & svg:not([class*="size-"]) {
+          @apply size-4;
+        }
+
+        &.active {
+          @apply bg-accent text-accent-foreground;
+        }
+      }
+      [role='heading'] {
+        @apply text-muted-foreground flex px-2 py-1.5 text-xs font-medium;
+      }
+      [role='group']:not(:has([role='menuitem']:not([aria-hidden='true']))) {
+        @apply hidden;
+      }
+      [role='separator'] {
+        @apply border-border -mx-1 my-1;
+      }
+      &:not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
+        @apply flex items-center justify-center py-6 px-3 text-sm truncate -m-1;
+      }
+      &[data-empty]:not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
+        @apply content-[attr(data-empty)];
+      }
+      &:not([data-empty]):not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
+        @apply content-['No_results_found'];
+      }
+    }
+    &:not([data-command-initialized]) [role='menuitem'] {
+      @apply hover:bg-accent hover:text-accent-foreground;
+    }
+    &:has(> header input:not(:placeholder-shown)) [role='separator'] {
+      @apply hidden;
+    }
+  }
+}
+
+
+/* Dialog */
+@layer components {
+  @keyframes dialog-spring-in {
+    0% { opacity: 0; transform: scale(0.9); }
+    50% { opacity: 1; transform: scale(1.05); }
+    100% { opacity: 1; transform: scale(1); }
+  }
+  
+  @keyframes backdrop-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  .dialog {
+    /* 
+       Base Modal Styles 
+       Position: Fixed (Native behavior uses fixed/absolute in top layer)
+       Centering: Native <dialog> uses 'margin: auto' and 'inset: 0' by default.
+       We enforce this to ensure it works even if overrides existed.
+    */
+    @apply fixed inset-0 z-50 grid w-full max-w-lg gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg opacity-0 invisible;
+    
+    margin: auto !important; 
+    height: fit-content !important;
+
+    /* Open state */
+    &[open] {
+      @apply opacity-100 visible;
+      /* 
+         UPDATED ANIMATION (User Request): 
+         Added a spring-like pop-up effect (scale 0.9 -> 1.05 -> 1.0) 
+         instead of the original simple fade/scale.
+         Duration increased to 0.3s for better visibility.
+         Defined in @keyframes dialog-spring-in above.
+      */
+      animation: dialog-spring-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
+    }
+
+    /* Backdrop */
+    &::backdrop {
+      @apply fixed inset-0 z-50 bg-black/50;
+      animation: backdrop-in 0.3s ease-out forwards;
+    }
+
+    /* Inner Layout */
+    > header {
+      @apply flex flex-col gap-2 text-center sm:text-left;
+
+      > h2 {
+        @apply text-lg leading-none font-semibold;
+      }
+      > p {
+        @apply text-muted-foreground text-sm;
+      }
+    }
+    > section {
+      @apply flex-1;
+    }
+    > footer {
+      @apply flex flex-col-reverse gap-2 sm:flex-row sm:justify-end;
+    }
+    
+    /* Close Button - positioned absolute top-right */
+    > button.close,
+    > form[method='dialog'] > button.close {
+      @apply absolute top-4 right-4 p-0 bg-transparent border-0 cursor-pointer;
+      @apply ring-offset-background focus:ring-ring text-muted-foreground hover:text-foreground rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none;
+      
+      & svg {
+        @apply size-4;
+      }
+    }
+  }
+}
+/* Dropdown Menu */
+@layer components {
+  .dropdown-menu {
+    @apply relative inline-flex;
+
+    [data-popover] {
+      @apply p-1;
+      min-width: anchor-size(width);
+
+            [role='menuitem'],
+            [role='menuitemcheckbox'],
+            [role='menuitemradio'] {
+              @apply aria-hidden:hidden [&_svg]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg]:shrink-0 aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate;
+      
+              & svg:not([class*="size-"]) {
+                @apply size-4;
+              }
+        &:not([aria-disabled='true']) {
+          @apply focus-visible:bg-accent focus-visible:text-accent-foreground;
+        }
+
+        &.active {
+          @apply bg-accent text-accent-foreground;
+        }
+      }
+      [role='menu'] [role='heading'] {
+        @apply flex px-2 py-1.5 text-sm font-medium;
+      }
+      [role='separator'] {
+        @apply border-border -mx-1 my-1;
+      }
+    }
+    &:not([data-dropdown-menu-initialized]) [data-popover] {
+      [role='menuitem'],
+      [role='menuitemcheckbox'],
+      [role='menuitemradio'] {
+        @apply hover:bg-accent hover:text-accent-foreground;
+      }
+    }
+  }
+}
+
+
+/* Field */
+@layer components {
+  .fieldset {
+    @apply flex flex-col gap-6;
+
+    > legend {
+      @apply text-base font-medium mb-3;
+    }
+  }
+  .field {
+    @apply flex flex-col w-full gap-3 data-[invalid=true]:text-destructive [&>*]:w-full [&>.sr-only]:w-auto;
+
+    h2,
+    h3 {
+      @apply flex w-fit items-center gap-2 text-sm leading-snug font-medium;
+    }
+    [role="alert"] {
+      @apply text-sm text-destructive font-normal;
+      
+      ul {
+        @apply ml-4 flex list-disc flex-col gap-1;
+      }
+    }
+    section {
+      @apply flex flex-1 flex-col gap-1.5 leading-snug;
+    }
+
+    &[data-orientation='horizontal'] {
+      @apply flex-row items-center [&>label]:flex-auto has-[>section]:items-start has-[>section]:[&>[type=checkbox],[type=radio]]:mt-px [&_p]:text-balance;
+    }
+  }
+  .fieldset legend + p,
+  .field > p,
+  .field section > p {
+    @apply text-muted-foreground text-sm leading-normal font-normal [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4;
+  }
+  .fieldset legend + p {
+    @apply -mt-1.5;
+  }
+  .field > p {
+    @apply last:mt-0 nth-last-2:-mt-1;
+  }
+}
+
+
+/* Input */
+@layer components {
+  :is(.form, .field) input[type='text']:not(:is(.select [data-popover] > header input[role='combobox'], .command > header input, .dialog > * > header input)),
+  :is(.form, .field) input[type='email'],
+  :is(.form, .field) input[type='password'],
+  :is(.form, .field) input[type='number'],
+  :is(.form, .field) input[type='file'],
+  :is(.form, .field) input[type='tel'],
+  :is(.form, .field) input[type='url'],
+  :is(.form, .field) input[type='search']:not(:is(.select [data-popover] > header input[role='combobox'], .command > header input, .dialog > * > header input)),
+  :is(.form, .field) input[type='date'],
+  :is(.form, .field) input[type='datetime-local'],
+  :is(.form, .field) input[type='month'],
+  :is(.form, .field) input[type='week'],
+  :is(.form, .field) input[type='time'],
+  .input[type='text'],
+  .input[type='email'],
+  .input[type='password'],
+  .input[type='number'],
+  .input[type='file'],
+  .input[type='tel'],
+  .input[type='url'],
+  .input[type='search'],
+  .input[type='date'],
+  .input[type='datetime-local'],
+  .input[type='month'],
+  .input[type='week'],
+  .input[type='time'] {
+    @apply appearance-none file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm;
+    @apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px];
+    @apply aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive;
+  }
+}
+
+
+/* Kbd */
+@layer components {
+  .kbd {
+    @apply bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none;
+    
+    & svg:not([class*="size-"]) {
+      @apply size-3;
+    }
+  }
+}
+
+
+
+/* Label */
+@layer components {
+  :is(.form, .field) label,
+  .label {
+    @apply flex items-center gap-2 text-sm leading-none font-medium select-none peer-disabled:pointer-events-none peer-disabled:opacity-50;
+
+     &:has(>*:disabled),
+     &:has(+*:disabled) {
+       @apply opacity-50 pointer-events-none;
+     }
+  }
+}
+
+
+/* Popover */
+@layer components {
+  [data-popover] {
+    @apply absolute bg-popover text-popover-foreground overflow-x-hidden overflow-y-auto rounded-md border shadow-md z-50 visible opacity-100 scale-100 min-w-full w-max transition-all;
+
+    &[aria-hidden='true'] {
+      @apply invisible opacity-0 scale-95;
+      
+      &:not([data-side]),
+      &[data-side='bottom'] {
+        @apply -translate-y-2;
+      }
+      &[data-side='top'] {
+        @apply translate-y-2;
+      }
+      &[data-side='left'] {
+        @apply translate-x-2;
+      }
+      &[data-side='right'] {
+        @apply -translate-x-2;
+      }
+    }
+    &:not([data-side]),
+    &[data-side='bottom'] {
+      @apply mt-1 top-full;
+    }
+    &[data-side='top'] {
+      @apply mb-1 bottom-full;
+    }
+    &[data-side='left'] {
+      @apply mr-1 right-full;
+    }
+    &[data-side='right'] {
+      @apply ml-1 left-full;
+    }
+    &:not([data-side]),
+    &[data-side='bottom'],
+    &[data-side='top'] {
+      &:not([data-align]),
+      &[data-align='start'] {
+        @apply left-0;
+      }
+      &[data-align='end'] {
+        @apply right-0;
+      }
+      &[data-align='center'] {
+        @apply left-1/2 -translate-x-1/2;
+      }
+    }
+    &[data-side='left'],
+    &[data-side='right'] {
+      &:not([data-align]),
+      &[data-align='start'] {
+        @apply top-0;
+      }
+      &[data-align='end'] {
+        @apply bottom-0;
+      }
+      &[data-align='center'] {
+        @apply top-1/2 -translate-y-1/2;
+      }
+    }
+  }
+  .popover {
+    @apply relative inline-flex;
+
+    [data-popover] {
+      @apply p-4;
+    }
+  } 
+}
+
+
+/* Radio */
+@layer components {
+  :is(.form, .field) input[type='radio'],
+  .input[type='radio'] {
+    @apply appearance-none border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 relative;
+
+    &:checked:before {
+      @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 content-[''] rounded-full size-2 bg-primary;
+    }
+  }
+}
+
+
+/* Range */
+@layer components {
+  :is(.form, .field) input[type='range'],
+  .input[type='range'],
+  .slider {
+    @apply appearance-none flex items-center p-0 outline-none;
+    --slider-value: 0%; /* Default value, updated by JS */
+
+    &:hover,
+    &:focus-visible {
+      &::-webkit-slider-thumb {
+        @apply ring-4 ring-ring/20 shadow-sm;
+      }
+      &::-moz-range-thumb {
+        @apply ring-4 ring-ring/20 shadow-sm;
+      }
+      &::-ms-thumb {
+        @apply ring-4 ring-ring/20 shadow-sm;
+      }
+    }
+
+    &::-webkit-slider-thumb {
+      @apply appearance-none block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm -mt-1.25 cursor-pointer transition-[box-shadow];
+    }
+    &::-webkit-slider-runnable-track {
+      @apply appearance-none rounded-full h-1.5 w-full cursor-pointer;
+      background: linear-gradient(to right, var(--primary) var(--slider-value), var(--muted) var(--slider-value));
+    }
+    
+    &::-moz-range-thumb {
+      @apply appearance-none block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm -mt-1.25 cursor-pointer transition-[box-shadow];
+    }
+    &::-moz-range-track {
+      @apply appearance-none rounded-full h-1.5 w-full cursor-pointer;
+      background: linear-gradient(to right, var(--primary) var(--slider-value), var(--muted) var(--slider-value));
+    }
+
+    &::-ms-thumb {
+      @apply appearance-none block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm -mt-1.25 cursor-pointer transition-[box-shadow];
+    }
+    &::-ms-track {
+      @apply appearance-none rounded-full h-1.5 w-full cursor-pointer;
+      background: transparent; 
+      border-color: transparent;
+      color: transparent;
+    }
+    &::-ms-fill-lower {
+      @apply bg-primary rounded-full;
+    }
+    &::-ms-fill-upper {
+      @apply bg-muted rounded-full;
+    }
+  }
+}
+
+
+/* Select */
+@layer components {
+  :is(.form, .field) select,
+  select.select {
+    @apply appearance-none border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent pl-3 pr-9 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-9;
+    @apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.75rem] bg-size-[1rem];
+
+    option,
+    optgroup {
+      @apply bg-popover text-popover-foreground;
+    }
+  }
+  *:not(select).select {
+    @apply relative inline-flex;
+
+    [data-popover] {
+      @apply p-1;
+
+      [role='option'] {
+        @apply aria-hidden:hidden [&_svg]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm pl-2 py-1.5 pr-7.5 text-sm outline-hidden select-none [&_svg]:shrink-0 aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate;
+        
+        & svg:not([class*="size-"]) {
+          @apply size-4;
+        }
+        
+        &[aria-selected='true'] {
+          @apply bg-[image:var(--check-icon)] bg-no-repeat bg-position-[center_right_0.5rem] bg-size-[0.875rem];
+        }
+        &.active,
+        &:focus-visible {
+          @apply bg-accent text-accent-foreground;
+        }
+      }
+      [role='listbox'] [role='heading'] {
+        @apply flex text-muted-foreground px-2 py-1.5 text-xs;
+      }
+      [role='listbox'] [role='group']:not(:has([role='option']:not([aria-hidden='true']))) {
+        @apply hidden;
+      }
+      [role='separator'] {
+        @apply border-border -mx-1 my-1;
+      }
+      > header {
+        @apply flex h-9 items-center gap-2 border-b px-3 -mx-1 -mt-1 mb-1;
+
+        svg {
+          @apply size-4 shrink-0 opacity-50;
+        }
+        input[role='combobox'] {
+          @apply placeholder:text-muted-foreground flex h-10 flex-1 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50 min-w-0;
+        }
+      }
+      [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before {
+        @apply flex items-center justify-center p-6 text-sm truncate;
+      }
+      [role='listbox'][data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before {
+        @apply content-[attr(data-empty)];
+      }
+      [role='listbox']:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before {
+        @apply content-['No_results_found'];
+      }
+    }
+    [data-popover]:has(> header input:not(:placeholder-shown)) [role='separator'] {
+      @apply hidden;
+    }
+    &:not([data-select-initialized]) [data-popover] [role='option'] {
+      @apply hover:bg-accent hover:text-accent-foreground;
+    }
+  }
+}
+
+
+/* Sidebar */
+@layer components {
+  .sidebar {
+    &:not([data-sidebar-initialized]) {
+      @apply max-md:hidden;
+    }
+    &:not([aria-hidden]),
+    &[aria-hidden=false] {
+      @apply max-md:bg-black/50 max-md:fixed max-md:inset-0 max-md:z-40;
+    }
+    nav {
+      @apply bg-sidebar text-sidebar-foreground flex flex-col w-(--sidebar-mobile-width) md:w-(--sidebar-width) fixed inset-y-0 z-50 transition-transform ease-in-out duration-300;
+    }
+    & + * {
+      @apply transition-[margin] ease-in-out duration-300;
+    }
+    &:not([data-side]),
+    &[data-side=left] {
+      nav {
+        @apply left-0 border-r;
+      }
+      & + * {
+        @apply relative md:ml-(--sidebar-width);
+      }
+      &[aria-hidden=true] {
+        nav {
+          @apply -translate-x-full;
+        }
+        & + * {
+          @apply md:ml-0;
+        }
+      }
+    }
+    &[data-side=right] {
+      nav {
+        @apply right-0 border-l;
+      }
+      & + * {
+        @apply relative md:mr-(--sidebar-width);
+      }
+      &[aria-hidden=true] {
+        nav {
+          @apply translate-x-full;
+        }
+        & + * {
+          @apply md:mr-0;
+        }
+      }
+    }
+    nav {
+      > header,
+      > footer {
+        @apply flex flex-col gap-2 p-2;
+      }
+      [role=separator] {
+        @apply border-sidebar-border mx-2 w-auto;
+      }
+      > section {
+        @apply flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto;
+
+        > [role=group] {
+          @apply relative flex w-full min-w-0 flex-col p-2;
+        }
+        h3 {
+          @apply text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0;
+        }
+        ul {
+          @apply flex w-full min-w-0 flex-col gap-1;
+
+          li {
+            @apply relative;
+
+            > a,
+            > details > summary {
+              @apply flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&[aria-current=page]]:bg-sidebar-accent [&[aria-current=page]]:font-medium [&[aria-current=page]]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0;
+
+              &:not([data-variant]),
+              &[data-variant=default] {
+                @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
+              }
+              &[data-variant=outline] {
+                @apply bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))];
+              }
+              &:not([data-size]),
+              &[data-size=default] {
+                @apply h-8 text-sm;
+              }
+              &[data-size=sm] {
+                @apply h-7 text-xs;
+              }
+              &[data-size=lg] {
+                @apply h-12 text-sm group-data-[collapsible=icon]:p-0!;
+              }
+            }
+            > details {
+              &:not([open]) {
+                > summary {
+                  &::after {
+                    @apply -rotate-90;
+                  }
+                }
+              }
+              > summary {
+                &::after {
+                  @apply content-[''] block size-3.5 bg-primary ml-auto transition-transform ease-linear;
+                  @apply mask-[image:var(--chevron-down-icon)] mask-size-[1rem] mask-no-repeat mask-center;
+                }
+              }
+              &::details-content {
+                @apply px-3.5;
+              }
+            }
+          }
+          ul {
+            @apply border-sidebar-border flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 w-full;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+/* Switch */
+@layer components {
+  :is(.form, .field) input[type='checkbox'][role='switch'],
+  .input[type='checkbox'][role='switch'] {
+    @apply appearance-none focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50;
+    @apply bg-input dark:bg-input/80 checked:bg-primary dark:checked:bg-primary;
+    @apply before:content-[''] before:pointer-events-none before:block before:size-4 before:rounded-full before:ring-0 before:transition-all;
+    @apply before:bg-background dark:before:bg-foreground;
+    @apply dark:checked:before:bg-primary-foreground checked:before:ms-3.5;
+  }
+}
+
+
+/* Tables */
+@layer components {
+  .table {
+    @apply w-full caption-bottom text-sm;
+    thead {
+      @apply [&_tr]:border-b;
+    }
+    tbody {
+      @apply [&_tr:last-child]:border-0;
+    }
+    tfoot {
+      @apply bg-muted/50 border-t font-medium [&>tr]:last:border-b-0;
+    }
+    tr {
+      @apply hover:bg-muted/50 border-b transition-colors;
+    }
+    th {
+      @apply text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px];
+    }
+    td {
+      @apply p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px];
+    }
+    caption {
+      @apply text-muted-foreground mt-4 text-sm;
+    }
+  }
+}
+
+
+/* Tabs */
+@layer components {
+  .tabs {
+    @apply flex flex-col gap-2;
+    
+    [role='tablist'] {
+      @apply bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px];
+
+      [role='tab'] {
+        @apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground dark:text-muted-foreground inline-flex h-[calc(100%_-_1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0;
+
+        & svg:not([class*="size-"]) {
+          @apply size-4;
+        }
+
+        &[aria-selected='true'] {
+          @apply bg-background dark:text-foreground dark:border-input dark:bg-input/30 shadow-sm;
+        }
+      }
+    }
+    [role='tabpanel'] {
+      @apply flex-1 outline-none;
+    }
+  }
+}
+
+
+
+/* Textarea */
+@layer components {
+  :is(.form, .field) textarea,
+  .textarea {
+    @apply border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm;
+  }
+}
+
+
+/* Toasts */
+@layer components {
+  .toaster {
+    @apply fixed bottom-0 p-4 pointer-events-none z-50 w-full sm:max-w-90 flex flex-col-reverse;
+
+    &:not([data-align]),
+    &[data-align='end'] {
+      @apply right-0;
+    }
+    &[data-align='start'] {
+      @apply left-0;
+    }
+    &[data-align='center'] {
+      @apply left-1/2 -translate-x-1/2;
+    }
+    .toast {
+      @apply pointer-events-auto w-full mt-4 animate-[toast-up_0.3s_ease-in-out] grid  grid-rows-[1fr] transition-[grid-template-rows,opacity,margin] duration-300 ease-in-out;
+      
+      .toast-content {
+        @apply text-popover-foreground text-[13px] bg-popover border shadow-lg rounded-lg overflow-hidden flex gap-2.5 p-3 items-center;
+
+        svg {
+          @apply size-4 shrink-0;
+        }
+        section {
+          h2 {
+            @apply font-medium tracking-tight;
+          }
+          p {
+            @apply text-muted-foreground break-all;
+          }
+        }
+        footer {
+          @apply ml-auto flex flex-col gap-2;
+
+          [data-toast-action],
+          [data-toast-cancel] {
+            @apply h-6 px-2.5 text-xs;
+          }
+        }
+      }
+      &[aria-hidden='true'] {
+        @apply grid-rows-[0fr] opacity-0 m-0 border-0 p-0 overflow-hidden;
+
+        .toast-content {
+          @apply border-0;
+        }
+      }
+    }
+  }
+}
+@keyframes toast-up {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
+
+/* Tooltip */
+@layer components {
+  [data-tooltip] {
+    @apply relative;
+
+    &:before {
+      @apply absolute content-[attr(data-tooltip)] bg-primary text-primary-foreground z-[60] truncate max-w-xs w-fit rounded-md px-3 py-1.5 text-xs invisible opacity-0 scale-95 transition-all pointer-events-none;
+    }
+    &:hover:before {
+      @apply visible opacity-100 scale-100;
+    }
+    &:focus-visible:not(:hover):before {
+      @apply hidden;
+    }
+    &:not([data-side]),
+    &[data-side='top'] {
+    @apply before:bottom-full before:mb-1.5 before:translate-y-2 hover:before:translate-y-0 ;
+    }
+    &[data-side='bottom'] {
+      @apply before:top-full before:mt-1.5 before:-translate-y-2 hover:before:translate-y-0 ;
+    }
+    &:not([data-side]),
+    &[data-side='top'],
+    &[data-side='bottom'] {
+      &[data-align='start'] {
+        @apply before:left-0;
+      }
+      &[data-align='end'] {
+        @apply before:right-0;
+      }
+      &:not([data-align]),
+      &[data-align='center'] {
+        @apply before:left-1/2 before:-translate-x-1/2; 
+      }
+    }
+    &[data-side='left'] {
+      @apply before:right-full before:mr-1.5 before:translate-x-2 hover:before:translate-x-0;
+    }
+    &[data-side='right'] {
+      @apply before:left-full before:ml-1.5 before:-translate-x-2 hover:before:translate-x-0;
+    }
+    &[data-side='left'],
+    &[data-side='right'] {
+      &[data-align='start'] {
+        @apply before:top-0;
+      }
+      &[data-align='end'] {
+        @apply before:bottom-0;
+      }
+      &:not([data-align]),
+      &[data-align='center'] {
+        @apply before:top-1/2 before:-translate-y-1/2;
+      }
+    }
+  }
+}
+
+
+
+/* 3. Custom Components (New additions) */
+/* Carousel */
+@layer components {
+  .carousel {
+    @apply relative w-full;
+  }
+  .carousel-content {
+    @apply flex overflow-x-auto snap-x snap-mandatory scroll-smooth;
+    scrollbar-width: none; /* Hide scrollbar for Firefox */
+    &::-webkit-scrollbar {
+      display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
+    }
+  }
+  .carousel-item {
+    @apply min-w-0 shrink-0 grow-0 basis-full snap-start;
+  }
+  .carousel-previous,
+  .carousel-next {
+    @apply absolute size-8 rounded-full z-10 flex items-center justify-center border bg-background shadow-sm transition-all hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:pointer-events-none;
+    & > svg {
+        @apply size-4;
+    }
+  }
+  .carousel-previous {
+    @apply -left-12 top-1/2 -translate-y-1/2;
+  }
+  .carousel-next {
+    @apply -right-12 top-1/2 -translate-y-1/2;
+  }
+
+  /* Vertical Carousel */
+  .carousel[data-orientation="vertical"] {
+    .carousel-content {
+      @apply flex-col overflow-x-hidden overflow-y-auto snap-y;
+      height: var(--carousel-height, 400px); /* Default height */
+    }
+    .carousel-previous {
+      @apply -top-8 left-1/2 -translate-x-1/2 rotate-90 translate-y-0;
+      top: -2rem !important; /* Force top */
+    }
+    .carousel-next {
+      @apply -bottom-8 top-auto left-1/2 -translate-x-1/2 rotate-90 translate-y-0;
+      bottom: -2rem !important; /* Force bottom */
+      top: auto !important;
+    }
+  }
+}
+
+/* Input OTP */
+@layer components {
+  .input-otp {
+    @apply flex items-center gap-2 has-[:disabled]:opacity-50;
+  }
+  .input-otp-group {
+    @apply flex items-center;
+    
+    .input {
+        @apply w-10 h-10 text-center text-lg p-0 rounded-none first:rounded-l-md last:rounded-r-md border-r-0 last:border-r focus:z-10 relative;
+    }
+  }
+}
+
+/* Sheet & Drawer */
+@layer components {
+  .sheet {
+    @apply fixed inset-0 z-50 bg-black/80;
+
+    &[aria-hidden="true"] {
+      @apply hidden;
+    }
+
+    .sheet-content {
+      @apply fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out duration-300;
+      
+      &[data-side="top"] {
+        @apply inset-x-0 top-0 border-b data-[state=closed]:-translate-y-full data-[state=open]:translate-y-0;
+      }
+      &[data-side="bottom"] {
+        @apply inset-x-0 bottom-0 border-t data-[state=closed]:translate-y-full data-[state=open]:translate-y-0;
+      }
+      &[data-side="left"] {
+        @apply inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm data-[state=closed]:-translate-x-full data-[state=open]:translate-x-0;
+      }
+      &[data-side="right"] {
+        @apply inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm data-[state=closed]:translate-x-full data-[state=open]:translate-x-0;
+      }
+    }
+  }
+
+  .drawer {
+    @apply fixed inset-0 z-50 bg-black/80 flex flex-col items-end sm:items-center justify-end;
+
+    &[aria-hidden="true"] {
+      @apply hidden;
+    }
+
+    .drawer-content {
+        @apply fixed z-50 flex flex-col bg-background border border-b-0 rounded-t-[10px] bottom-0 inset-x-0 h-auto max-h-[35vh] transition-transform ease-in-out duration-300 data-[state=closed]:translate-y-full data-[state=open]:translate-y-0;
+    }
+  }
+}
+
+/* 
+========================================
+ANIMATIONS & KEYFRAMES
+Spring effects for Drawer and Sheet
+========================================
+*/
+@layer utilities {
+    /* Spring Bezier: Starts fast, overshoots slightly (1.1), then settles */
+    .ease-spring {
+        transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.1);
+    }
+}
+
+@layer components {
+    /* Keyframes for Slide Animations (Drawer, Sheet, etc.) */
+    @keyframes spring-slide-up {
+        0% { transform: translateY(100%); }
+        70% { transform: translateY(-10%); } /* Overshoot up */
+        100% { transform: translateY(0); }
+    }
+    
+    @keyframes spring-slide-down {
+        0% { transform: translateY(-100%); }
+        70% { transform: translateY(10%); } /* Overshoot down */
+        100% { transform: translateY(0); }
+    }
+    
+    @keyframes spring-slide-from-right {
+        0% { transform: translateX(100%); }
+        70% { transform: translateX(-2%); } /* Overshoot left */
+        100% { transform: translateX(0); }
+    }
+
+    @keyframes spring-slide-from-left {
+        0% { transform: translateX(-100%); }
+        70% { transform: translateX(2%); } /* Overshoot right */
+        100% { transform: translateX(0); }
+    }
+
+    /* Drawer Animation (Bottom Sheet) */
+    .drawer:not(.no-animation)[aria-hidden="false"] .drawer-content {
+        animation: spring-slide-up 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
+    }
+
+    /* Sheet Animation (Side Panel) */
+    .sheet:not(.no-animation)[aria-hidden="false"] {
+        .sheet-content[data-side="right"] {
+            animation: spring-slide-from-right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
+        }
+        .sheet-content[data-side="left"] {
+            animation: spring-slide-from-left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
+        }
+        .sheet-content[data-side="top"] {
+            animation: spring-slide-down 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
+        }
+        .sheet-content[data-side="bottom"] {
+            animation: spring-slide-up 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
+        }
+    }
+}
+/* Toggle Group */
+@layer components {
+  .toggle-group {
+    @apply flex items-center justify-center gap-1;
+    
+    &[data-orientation="vertical"] {
+      @apply flex-col;
+    }
+    
+    /* Merged style (like button-group) */
+    &:not([data-variant="outline"]) {
+       gap: 0;
+       
+       .toggle {
+         @apply rounded-none border-l-0 first:rounded-l-md first:border-l last:rounded-r-md focus:z-10;
+       }
+       &[data-orientation="vertical"] .toggle {
+         @apply rounded-none border-t-0 first:rounded-t-md first:border-t last:rounded-b-md;
+       }
+    }
+  }
+
+  /* Toggle Button (Base Style) */
+  .toggle {
+    @apply inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground bg-transparent dark:bg-transparent h-10 px-3 min-w-10 border border-input;
+    
+    /* Enhanced Active State */
+    &[aria-pressed="true"] {
+      @apply bg-accent text-accent-foreground border-accent;
+    }
+  }
+}
+
+
+/* 4. Extensions & Overrides */
+/* 
+========================================
+BASECOAT NEUMORPHISM EXTENSION
+========================================
+Global adaptive lighting system.
+*/
+
+@layer components {
+  :root {
+      /* Global Light Coordinates (Updated by JS) */
+      --light-x: -8px;
+      --light-y: -8px;
+      
+      /* Shape Factors */
+      --neu-radius: 24px;
+      --neu-blur: 20px;
+
+      /* Color Logic - Light Mode (Default) */
+      --neu-highlight-color: color-mix(in srgb, white, transparent 10%);
+      --neu-shadow-color: rgba(0, 0, 0, 0.15);
+      
+      /* Shine Color: Light Mode uses a subtle dark sweep (via foreground) for visibility on white */
+      --neu-shine-color: color-mix(in srgb, var(--foreground), transparent 90%);
+  }
+
+  /* Dark Mode Adaptation */
+  :root.dark {
+      --neu-highlight-color: rgba(255, 255, 255, 0.12);
+      --neu-shadow-color: rgba(0, 0, 0, 0.5);
+      
+      /* Shine Color: Dark Mode uses white sweep */
+      --neu-shine-color: rgba(255, 255, 255, 0.1);
+  }
+
+  /* 
+     Panel / Container (Convex)
+     Applies an outer shadow to simulate a raised surface.
+  */
+  .neu-panel {
+      @apply bg-background text-foreground transition-colors duration-300 ease-out;
+      border-radius: var(--neu-radius);
+      border: 1px solid color-mix(in srgb, var(--foreground), transparent 97%);
+      
+      box-shadow: 
+          calc(var(--light-x) * -1) calc(var(--light-y) * -1) var(--neu-blur) var(--neu-shadow-color),
+          var(--light-x) var(--light-y) var(--neu-blur) var(--neu-highlight-color);
+  }
+
+  /* 
+     Field / Input (Concave)
+     Applies an inner shadow to simulate a recessed surface.
+  */
+  .neu-field {
+      @apply bg-background text-foreground transition-all duration-200 border-none outline-none;
+      border-radius: 12px;
+      
+      box-shadow: 
+          inset calc(var(--light-x) * -1) calc(var(--light-y) * -1) 12px var(--neu-shadow-color),
+          inset var(--light-x) var(--light-y) 12px var(--neu-highlight-color);
+
+      &:focus {
+          @apply text-primary;
+          box-shadow: 
+              inset calc(var(--light-x) * -0.5) calc(var(--light-y) * -0.5) 8px var(--neu-shadow-color),
+              inset var(--light-x) var(--light-y) 8px var(--neu-highlight-color);
+      }
+  }
+
+  /* 
+     Button (Convex + Interactive)
+     Simulates a raised button that presses down (becomes concave/flat) on active.
+  */
+  .neu-btn {
+      @apply bg-background text-foreground font-semibold cursor-pointer transition-all duration-100 border-none;
+      border-radius: 12px;
+      
+      box-shadow: 
+          calc(var(--light-x) * -1) calc(var(--light-y) * -1) 16px var(--neu-shadow-color),
+          var(--light-x) var(--light-y) 16px var(--neu-highlight-color);
+
+      &:hover {
+          @apply text-primary -translate-y-0.5;
+          box-shadow: 
+              calc(var(--light-x) * -1.2) calc(var(--light-y) * -1.2) 20px var(--neu-shadow-color),
+              calc(var(--light-x) * 1.2) calc(var(--light-y) * 1.2) 20px var(--neu-highlight-color);
+      }
+
+      &:active, &.neu-pressed {
+          @apply translate-y-0 bg-background;
+          box-shadow: 
+              inset 4px 4px 8px var(--neu-shadow-color),
+              inset -4px -4px 8px var(--neu-highlight-color);
+      }
+  }
+
+  /* Utility: Round Shape */
+  .neu-round {
+      @apply rounded-full flex items-center justify-center aspect-square;
+  }
+
+  /* 
+     Effect: Shine (流光)
+     Restored: Uses a "light beam" gradient that sweeps across.
+     Technique: Uses ::after with inset:0 and border-radius:inherit to mask the shine 
+     without requiring overflow:hidden on the parent (which breaks Tooltips).
+  */
+  .effect-shine,
+  .btn:not(.btn-link):not(:disabled):not(.no-shine),
+  .neu-btn:not(:disabled):not(.no-shine),
+  .toggle:not(:disabled):not(.no-shine),
+  [role="tab"]:not([aria-selected="true"]):not(:disabled):not(.no-shine),
+  .carousel-previous:not(:disabled):not(.no-shine),
+  .carousel-next:not(:disabled):not(.no-shine) {
+      /* Removed @apply relative to prevent overriding absolute positioning on carousel buttons */
+      
+      &::after {
+          content: '';
+          @apply absolute inset-0 z-10 pointer-events-none;
+          border-radius: inherit;
+          
+          /* 
+             The "Beam" Shine (Restored)
+             - 90deg gradient (vertical lines)
+             - Uses currentColor mix as per original
+             - Simulates the 'left' transition using background-position
+          */
+          background: linear-gradient(
+              90deg, 
+              transparent, 
+              color-mix(in srgb, currentColor, transparent 90%), 
+              transparent
+          );
+          background-size: 50% 100%; /* The beam width */
+          background-repeat: no-repeat;
+          background-position: -100% 0; /* Start off-left */
+          transition: background-position 0.5s ease-in-out;
+      }
+      
+      &:hover::after {
+          background-position: 200% 0; /* Slide to off-right */
+      }
+  }
+
+  /* 
+     Effect: Lift (上浮)
+     Excluded for Tabs as requested.
+     Excluded Carousel buttons to avoid conflict with absolute centering transform.
+  */
+  .effect-lift,
+  .btn:not(.btn-link):not(:disabled):not(.no-lift),
+  .neu-btn:not(:disabled):not(.no-lift),
+  .toggle:not(:disabled):not(.no-lift) {
+      @apply transition-transform duration-200 ease-out will-change-transform;
+      
+      &:hover {
+          @apply -translate-y-0.5;
+      }
+      
+      &:active {
+          @apply translate-y-0;
+      }
+  }
+
+  /*
+     Pattern: Floating Label Group
+     Requires: <div class="neu-floating-group"><input placeholder=" "><label>...</label></div>
+     Uses pure CSS (:placeholder-shown) to toggle label position.
+  */
+  .neu-floating-group {
+      @apply relative w-full;
+
+      input {
+          /* Increase height and padding to make room for the label */
+          @apply w-full h-14 pt-6 pb-2 px-4;
+          
+          /* Ensure placeholder is hidden (opacity 0) but present for the selector to work */
+          &::placeholder {
+              @apply text-transparent;
+          }
+      }
+
+      label {
+          @apply absolute left-4 top-1/2 -translate-y-1/2 text-muted-foreground transition-all duration-200 ease-out pointer-events-none;
+      }
+
+      /* 
+         State: Focused OR Not Placeholder Shown (Has Content) 
+         Move label to top.
+      */
+      input:focus + label,
+      input:not(:placeholder-shown) + label {
+          @apply top-4 -translate-y-1/2 text-xs font-medium;
+      }
+      
+      /* Active Highlight Color */
+      input:focus + label {
+          @apply text-primary;
+      }
+  }
+
+  /*
+     Pattern: 3D Flip (Checkbox Hack)
+     Allows a card to flip 180deg without JavaScript.
+     
+     Structure:
+     <div class="neu-flip-container [neu-flip-vertical]">
+       <input type="checkbox" class="neu-flip-toggle" id="flip-id">
+       <div class="neu-flip-inner">
+         <div class="neu-flip-face">Front Content</div>
+         <div class="neu-flip-face neu-flip-back">Back Content</div>
+       </div>
+     </div>
+  */
+  .neu-flip-container {
+      perspective: 1000px;
+  }
+
+  .neu-flip-toggle {
+      @apply hidden;
+  }
+
+  .neu-flip-inner {
+      @apply relative w-full h-full transition-transform duration-700 ease-in-out;
+      transform-style: preserve-3d;
+  }
+
+  .neu-flip-face {
+      @apply absolute inset-0 backface-hidden;
+      backface-visibility: hidden;
+      -webkit-backface-visibility: hidden;
+  }
+
+  /* Default Horizontal Flip (Rotate Y) */
+  .neu-flip-back {
+      transform: rotateY(180deg);
+  }
+  .neu-flip-toggle:checked ~ .neu-flip-inner {
+      transform: rotateY(180deg);
+  }
+
+  /* Vertical Flip Variant (Rotate X) */
+  .neu-flip-container.neu-flip-vertical {
+      .neu-flip-back {
+          transform: rotateX(180deg);
+      }
+      .neu-flip-toggle:checked ~ .neu-flip-inner {
+          transform: rotateX(180deg);
+      }
+  }
+}