czero 0.1.0 → 0.2.5

package/dist/components.css

@@ -1,336 +1,2158 @@
-/**
- * CZero Component Styles
- * Pure CSS using --cz-* design tokens
- */
-
-/* ===== UTILITIES ===== */
-
-/* Display */
-.cz-inline-flex { display: inline-flex; }
-.cz-flex { display: flex; }
-.cz-flex-col { flex-direction: column; }
-.cz-items-center { align-items: center; }
-.cz-justify-center { justify-content: center; }
-.cz-flex-wrap { flex-wrap: wrap; }
-
-/* Gap */
-.cz-gap-1 { gap: 0.25rem; }
-.cz-gap-1\.5 { gap: 0.375rem; }
-.cz-gap-2 { gap: 0.5rem; }
-
-/* Width */
-.cz-w-full { width: 100%; }
-
-/* Whitespace */
-.cz-whitespace-nowrap { white-space: nowrap; }
-
-/* Opacity */
-.cz-opacity-25 { opacity: 0.25; }
-.cz-opacity-50 { opacity: 0.5; }
-.cz-opacity-75 { opacity: 0.75; }
-
-/* Animation */
-@keyframes cz-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-.cz-animate-spin { animation: cz-spin 1s linear infinite; }
-
-/* Sizing */
-.cz-h-4 { height: 1rem; }
-.cz-w-4 { width: 1rem; }
-.cz-h-8 { height: 2rem; }
-.cz-h-10 { height: 2.5rem; }
-.cz-h-12 { height: 3rem; }
-
-/* Padding */
-.cz-px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
-.cz-px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
-.cz-px-4 { padding-left: 1rem; padding-right: 1rem; }
-.cz-px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
-.cz-py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
-.cz-p-lg { padding: var(--cz-spacing-lg); }
-.cz-pb-md { padding-bottom: var(--cz-spacing-md); }
-.cz-pt-md { padding-top: var(--cz-spacing-md); }
-.cz-px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
-
-/* Margin */
-.cz-mb-md { margin-bottom: var(--cz-spacing-md); }
-.cz-mt-md { margin-top: var(--cz-spacing-md); }
-
-/* Typography */
-.cz-text-xs { font-size: var(--cz-font-size-xs); }
-.cz-text-sm { font-size: var(--cz-font-size-sm); }
-.cz-text-md { font-size: var(--cz-font-size-md); }
-.cz-text-lg { font-size: var(--cz-font-size-lg); }
-.cz-font-medium { font-weight: var(--cz-font-weight-medium); }
-.cz-font-semibold { font-weight: var(--cz-font-weight-semibold); }
-.cz-leading-tight { line-height: var(--cz-font-lineHeight-tight); }
-
-/* Colors - Background */
-.cz-bg-bg { background-color: hsl(var(--cz-color-bg)); }
-.cz-bg-primary { background-color: hsl(var(--cz-color-primary)); }
-.cz-bg-secondary { background-color: hsl(var(--cz-color-secondary)); }
-.cz-bg-muted { background-color: hsl(var(--cz-color-muted)); }
-.cz-bg-danger { background-color: hsl(var(--cz-color-danger)); }
-.cz-bg-success { background-color: hsl(var(--cz-color-success)); }
-.cz-bg-warning { background-color: hsl(var(--cz-color-warning)); }
-.cz-bg-transparent { background-color: transparent; }
-
-/* Colors - Text */
-.cz-text-fg { color: hsl(var(--cz-color-fg)); }
-.cz-text-primary-fg { color: hsl(var(--cz-color-primaryFg)); }
-.cz-text-secondary-fg { color: hsl(var(--cz-color-secondaryFg)); }
-.cz-text-muted-fg { color: hsl(var(--cz-color-mutedFg)); }
-.cz-text-danger { color: hsl(var(--cz-color-danger)); }
-.cz-text-danger-fg { color: hsl(var(--cz-color-dangerFg)); }
-.cz-text-success-fg { color: hsl(var(--cz-color-successFg)); }
-.cz-text-warning-fg { color: hsl(var(--cz-color-warningFg)); }
-
-/* Border */
-.cz-border { border-width: 1px; border-style: solid; }
-.cz-border-b { border-bottom-width: 1px; border-bottom-style: solid; }
-.cz-border-t { border-top-width: 1px; border-top-style: solid; }
-.cz-border-border { border-color: hsl(var(--cz-color-border)); }
-.cz-border-danger { border-color: hsl(var(--cz-color-danger)); }
-
-/* Border Radius */
-.cz-rounded-sm { border-radius: var(--cz-radius-sm); }
-.cz-rounded-md { border-radius: var(--cz-radius-md); }
-.cz-rounded-lg { border-radius: var(--cz-radius-lg); }
-.cz-rounded-full { border-radius: var(--cz-radius-full); }
-
-/* Shadow */
-.cz-shadow-sm { box-shadow: var(--cz-shadow-sm); }
-
-/* Transitions */
-.cz-transition { transition: all var(--cz-transition-fast); }
-
-/* States */
-.cz-disabled {
-  pointer-events: none;
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Focus */
-.cz-focus-ring:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px hsl(var(--cz-color-bg)), 0 0 0 4px hsl(var(--cz-color-ring));
-}
-
-.cz-focus-ring:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px hsl(var(--cz-color-bg)), 0 0 0 4px hsl(var(--cz-color-ring));
-}
-
-/* Hover states */
-.cz-hover-opacity:hover { opacity: 0.9; }
-.cz-hover-muted:hover { background-color: hsl(var(--cz-color-muted)); }
-
-/* ===== BUTTON ===== */
-
-.cz-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  border-radius: var(--cz-radius-md);
-  font-weight: var(--cz-font-weight-medium);
-  transition: all var(--cz-transition-fast);
-  cursor: pointer;
-  border: none;
-}
-
-.cz-btn:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px hsl(var(--cz-color-bg)), 0 0 0 4px hsl(var(--cz-color-ring));
-}
-
-.cz-btn:disabled {
-  pointer-events: none;
-  opacity: 0.5;
-}
-
-/* Button Sizes */
-.cz-btn-sm { height: 2rem; padding: 0 0.75rem; font-size: var(--cz-font-size-sm); }
-.cz-btn-md { height: 2.5rem; padding: 0 1rem; font-size: var(--cz-font-size-md); }
-.cz-btn-lg { height: 3rem; padding: 0 1.5rem; font-size: var(--cz-font-size-lg); }
-
-/* Button Variants */
-.cz-btn-primary {
-  background-color: hsl(var(--cz-color-primary));
-  color: hsl(var(--cz-color-primaryFg));
-}
-.cz-btn-primary:hover { opacity: 0.9; }
-
-.cz-btn-secondary {
-  background-color: hsl(var(--cz-color-secondary));
-  color: hsl(var(--cz-color-secondaryFg));
-}
-.cz-btn-secondary:hover { opacity: 0.8; }
-
-.cz-btn-outline {
-  background-color: transparent;
-  border: 1px solid hsl(var(--cz-color-border));
-  color: hsl(var(--cz-color-fg));
-}
-.cz-btn-outline:hover { background-color: hsl(var(--cz-color-muted)); }
-
-.cz-btn-ghost {
-  background-color: transparent;
-  color: hsl(var(--cz-color-fg));
-}
-.cz-btn-ghost:hover { background-color: hsl(var(--cz-color-muted)); }
-
-.cz-btn-danger {
-  background-color: hsl(var(--cz-color-danger));
-  color: hsl(var(--cz-color-dangerFg));
-}
-.cz-btn-danger:hover { opacity: 0.9; }
-
-/* ===== INPUT ===== */
-
-.cz-input {
-  width: 100%;
-  border-radius: var(--cz-radius-md);
-  border: 1px solid hsl(var(--cz-color-border));
-  background-color: hsl(var(--cz-color-bg));
-  color: hsl(var(--cz-color-fg));
-  transition: all var(--cz-transition-fast);
-}
-
-.cz-input::placeholder {
-  color: hsl(var(--cz-color-mutedFg));
-}
-
-.cz-input:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px hsl(var(--cz-color-ring));
-}
-
-.cz-input:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.cz-input-error {
-  border-color: hsl(var(--cz-color-danger));
-}
-.cz-input-error:focus {
-  box-shadow: 0 0 0 2px hsl(var(--cz-color-danger));
-}
-
-/* Input Sizes */
-.cz-input-sm { height: 2rem; padding: 0 0.5rem; font-size: var(--cz-font-size-sm); }
-.cz-input-md { height: 2.5rem; padding: 0 0.75rem; font-size: var(--cz-font-size-md); }
-.cz-input-lg { height: 3rem; padding: 0 1rem; font-size: var(--cz-font-size-lg); }
-
-/* ===== CARD ===== */
-
-.cz-card {
-  border-radius: var(--cz-radius-lg);
-  border: 1px solid hsl(var(--cz-color-border));
-  background-color: hsl(var(--cz-color-bg));
-  box-shadow: var(--cz-shadow-sm);
-  padding: var(--cz-spacing-lg);
-}
-
-.cz-card-no-padding {
-  padding: 0;
-}
-
-.cz-card-header {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  padding-bottom: var(--cz-spacing-md);
-  border-bottom: 1px solid hsl(var(--cz-color-border));
-  margin-bottom: var(--cz-spacing-md);
-}
-
-.cz-card-title {
-  font-size: var(--cz-font-size-lg);
-  font-weight: var(--cz-font-weight-semibold);
-  color: hsl(var(--cz-color-fg));
-  line-height: var(--cz-font-lineHeight-tight);
-}
-
-.cz-card-description {
-  font-size: var(--cz-font-size-sm);
-  color: hsl(var(--cz-color-mutedFg));
-}
-
-.cz-card-body {
-  color: hsl(var(--cz-color-fg));
-}
-
-.cz-card-footer {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding-top: var(--cz-spacing-md);
-  margin-top: var(--cz-spacing-md);
-  border-top: 1px solid hsl(var(--cz-color-border));
-}
-
-/* ===== BADGE ===== */
-
-.cz-badge {
-  display: inline-flex;
-  align-items: center;
-  border-radius: var(--cz-radius-full);
-  font-weight: var(--cz-font-weight-medium);
-  white-space: nowrap;
-}
-
-/* Badge Sizes */
-.cz-badge-sm { padding: 0.125rem 0.375rem; font-size: 0.7rem; }
-.cz-badge-md { padding: 0.125rem 0.5rem; font-size: var(--cz-font-size-xs); }
-
-/* Badge Variants */
-.cz-badge-default {
-  background-color: hsl(var(--cz-color-secondary));
-  color: hsl(var(--cz-color-secondaryFg));
-}
-
-.cz-badge-primary {
-  background-color: hsl(var(--cz-color-primary));
-  color: hsl(var(--cz-color-primaryFg));
-}
-
-.cz-badge-success {
-  background-color: hsl(var(--cz-color-success));
-  color: hsl(var(--cz-color-successFg));
-}
-
-.cz-badge-danger {
-  background-color: hsl(var(--cz-color-danger));
-  color: hsl(var(--cz-color-dangerFg));
-}
-
-.cz-badge-warning {
-  background-color: hsl(var(--cz-color-warning));
-  color: hsl(var(--cz-color-warningFg));
-}
-
-.cz-badge-outline {
-  background-color: transparent;
-  border: 1px solid hsl(var(--cz-color-border));
-  color: hsl(var(--cz-color-fg));
-}
-
-/* ===== LABEL ===== */
-
-.cz-label {
-  font-size: var(--cz-font-size-sm);
-  font-weight: var(--cz-font-weight-medium);
-  color: hsl(var(--cz-color-fg));
-}
-
-/* ===== ERROR TEXT ===== */
-
-.cz-error {
-  font-size: var(--cz-font-size-sm);
-  color: hsl(var(--cz-color-danger));
-}
+/**
+ * CZero Component Styles
+ * Pure CSS using --cz-* design tokens
+ */
+
+/* ===== UTILITIES ===== */
+
+/* Display */
+.cz-inline-flex { display: inline-flex; }
+.cz-flex { display: flex; }
+.cz-flex-col { flex-direction: column; }
+.cz-items-center { align-items: center; }
+.cz-justify-center { justify-content: center; }
+.cz-flex-wrap { flex-wrap: wrap; }
+
+/* Gap */
+.cz-gap-1 { gap: 0.25rem; }
+.cz-gap-1\.5 { gap: 0.375rem; }
+.cz-gap-2 { gap: 0.5rem; }
+
+/* Width */
+.cz-w-full { width: 100%; }
+
+/* Whitespace */
+.cz-whitespace-nowrap { white-space: nowrap; }
+
+/* Opacity */
+.cz-opacity-25 { opacity: 0.25; }
+.cz-opacity-50 { opacity: 0.5; }
+.cz-opacity-75 { opacity: 0.75; }
+
+/* Animation */
+@keyframes cz-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+.cz-animate-spin { animation: cz-spin 1s linear infinite; }
+
+/* Sizing */
+.cz-h-4 { height: 1rem; }
+.cz-w-4 { width: 1rem; }
+.cz-h-8 { height: 2rem; }
+.cz-h-10 { height: 2.5rem; }
+.cz-h-12 { height: 3rem; }
+
+/* Padding */
+.cz-px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
+.cz-px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
+.cz-px-4 { padding-left: 1rem; padding-right: 1rem; }
+.cz-px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
+.cz-py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
+.cz-p-lg { padding: var(--cz-spacing-lg); }
+.cz-pb-md { padding-bottom: var(--cz-spacing-md); }
+.cz-pt-md { padding-top: var(--cz-spacing-md); }
+.cz-px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
+
+/* Margin */
+.cz-mb-md { margin-bottom: var(--cz-spacing-md); }
+.cz-mt-md { margin-top: var(--cz-spacing-md); }
+
+/* Typography */
+.cz-text-xs { font-size: var(--cz-font-size-xs); }
+.cz-text-sm { font-size: var(--cz-font-size-sm); }
+.cz-text-md { font-size: var(--cz-font-size-md); }
+.cz-text-lg { font-size: var(--cz-font-size-lg); }
+.cz-font-medium { font-weight: var(--cz-font-weight-medium); }
+.cz-font-semibold { font-weight: var(--cz-font-weight-semibold); }
+.cz-leading-tight { line-height: var(--cz-font-lineHeight-tight); }
+
+/* Colors - Background */
+.cz-bg-bg { background-color: hsl(var(--cz-color-bg)); }
+.cz-bg-primary { background-color: hsl(var(--cz-color-primary)); }
+.cz-bg-secondary { background-color: hsl(var(--cz-color-secondary)); }
+.cz-bg-muted { background-color: hsl(var(--cz-color-muted)); }
+.cz-bg-danger { background-color: hsl(var(--cz-color-danger)); }
+.cz-bg-success { background-color: hsl(var(--cz-color-success)); }
+.cz-bg-warning { background-color: hsl(var(--cz-color-warning)); }
+.cz-bg-transparent { background-color: transparent; }
+
+/* Colors - Text */
+.cz-text-fg { color: hsl(var(--cz-color-fg)); }
+.cz-text-primary-fg { color: hsl(var(--cz-color-primaryFg)); }
+.cz-text-secondary-fg { color: hsl(var(--cz-color-secondaryFg)); }
+.cz-text-muted-fg { color: hsl(var(--cz-color-mutedFg)); }
+.cz-text-danger { color: hsl(var(--cz-color-danger)); }
+.cz-text-danger-fg { color: hsl(var(--cz-color-dangerFg)); }
+.cz-text-success-fg { color: hsl(var(--cz-color-successFg)); }
+.cz-text-warning-fg { color: hsl(var(--cz-color-warningFg)); }
+
+/* Border */
+.cz-border { border-width: 1px; border-style: solid; }
+.cz-border-b { border-bottom-width: 1px; border-bottom-style: solid; }
+.cz-border-t { border-top-width: 1px; border-top-style: solid; }
+.cz-border-border { border-color: hsl(var(--cz-color-border)); }
+.cz-border-danger { border-color: hsl(var(--cz-color-danger)); }
+
+/* Border Radius */
+.cz-rounded-sm { border-radius: var(--cz-radius-sm); }
+.cz-rounded-md { border-radius: var(--cz-radius-md); }
+.cz-rounded-lg { border-radius: var(--cz-radius-lg); }
+.cz-rounded-full { border-radius: var(--cz-radius-full); }
+
+/* Shadow */
+.cz-shadow-sm { box-shadow: var(--cz-shadow-sm); }
+
+/* Transitions */
+.cz-transition { transition: all var(--cz-transition-fast); }
+
+/* States */
+.cz-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Focus */
+.cz-focus-ring:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-bg)), 0 0 0 4px hsl(var(--cz-color-ring));
+}
+
+.cz-focus-ring:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-bg)), 0 0 0 4px hsl(var(--cz-color-ring));
+}
+
+/* Hover states */
+.cz-hover-opacity:hover { opacity: 0.9; }
+.cz-hover-muted:hover { background-color: hsl(var(--cz-color-muted)); }
+
+/* ===== BUTTON ===== */
+
+.cz-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: var(--cz-radius-md);
+  font-weight: var(--cz-font-weight-medium);
+  transition: all var(--cz-transition-fast);
+  cursor: pointer;
+  border: none;
+}
+
+.cz-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-bg)), 0 0 0 4px hsl(var(--cz-color-ring));
+}
+
+.cz-btn:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* Button Sizes */
+.cz-btn-sm { height: 2rem; padding: 0 0.75rem; font-size: var(--cz-font-size-sm); }
+.cz-btn-md { height: 2.5rem; padding: 0 1rem; font-size: var(--cz-font-size-md); }
+.cz-btn-lg { height: 3rem; padding: 0 1.5rem; font-size: var(--cz-font-size-lg); }
+
+/* Button Variants */
+.cz-btn-primary {
+  background-color: hsl(var(--cz-color-primary));
+  color: hsl(var(--cz-color-primaryFg));
+}
+.cz-btn-primary:hover { opacity: 0.9; }
+
+.cz-btn-secondary {
+  background-color: hsl(var(--cz-color-secondary));
+  color: hsl(var(--cz-color-secondaryFg));
+}
+.cz-btn-secondary:hover { opacity: 0.8; }
+
+.cz-btn-outline {
+  background-color: transparent;
+  border: 1px solid hsl(var(--cz-color-border));
+  color: hsl(var(--cz-color-fg));
+}
+.cz-btn-outline:hover { background-color: hsl(var(--cz-color-muted)); }
+
+.cz-btn-ghost {
+  background-color: transparent;
+  color: hsl(var(--cz-color-fg));
+}
+.cz-btn-ghost:hover { background-color: hsl(var(--cz-color-muted)); }
+
+.cz-btn-danger {
+  background-color: hsl(var(--cz-color-danger));
+  color: hsl(var(--cz-color-dangerFg));
+}
+.cz-btn-danger:hover { opacity: 0.9; }
+
+.cz-btn-link {
+  background-color: transparent;
+  color: hsl(var(--cz-color-primary));
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+.cz-btn-link:hover { text-decoration-thickness: 2px; }
+
+/* Button Icon Size */
+.cz-btn-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+}
+.cz-btn-icon.cz-btn-sm { width: 2rem; height: 2rem; }
+.cz-btn-icon.cz-btn-lg { width: 3rem; height: 3rem; }
+
+/* Button Loading State */
+.cz-btn-loading { position: relative; }
+.cz-btn-spinner {
+  width: 1rem;
+  height: 1rem;
+  animation: cz-spin 0.75s linear infinite;
+  flex-shrink: 0;
+}
+.cz-btn-content { opacity: 1; }
+
+/* ===== INPUT ===== */
+
+.cz-input-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.cz-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  --cz-input-icon-spacing-current: 2.5rem;
+  --cz-input-icon-size-current: 1rem;
+  --cz-input-clear-icon-size-current: var(--cz-input-icon-size-current);
+}
+
+.cz-input-wrapper-sm {
+  --cz-input-icon-spacing-current: 2rem;
+  --cz-input-icon-size-current: 0.875rem;
+  --cz-input-clear-icon-size-current: var(--cz-input-icon-size-current);
+}
+
+.cz-input-wrapper-md {
+  --cz-input-icon-spacing-current: 2.5rem;
+  --cz-input-icon-size-current: 1rem;
+  --cz-input-clear-icon-size-current: var(--cz-input-icon-size-current);
+}
+
+.cz-input-wrapper-lg {
+  --cz-input-icon-spacing-current: 3rem;
+  --cz-input-icon-size-current: 1.125rem;
+  --cz-input-clear-icon-size-current: var(--cz-input-icon-size-current);
+}
+
+.cz-input {
+  width: 100%;
+  border-radius: var(--cz-radius-md);
+  border: 1px solid hsl(var(--cz-color-border));
+  background-color: hsl(var(--cz-color-bg));
+  color: hsl(var(--cz-color-fg));
+  transition: all var(--cz-transition-fast);
+}
+
+.cz-input::placeholder {
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-input:focus {
+  outline: none;
+  border-color: hsl(var(--cz-color-ring));
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-ring) / 0.2);
+}
+
+.cz-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  background-color: hsl(var(--cz-color-muted));
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-input:read-only {
+  cursor: default;
+  background-color: hsl(var(--cz-color-muted));
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-input-error {
+  border-color: hsl(var(--cz-color-danger));
+}
+.cz-input-error:focus {
+  border-color: hsl(var(--cz-color-danger));
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-danger) / 0.2);
+}
+
+/* Input with Icons */
+.cz-input-has-left-icon .cz-input { padding-left: var(--cz-input-icon-spacing-current); }
+.cz-input-has-right-icon .cz-input { padding-right: var(--cz-input-icon-spacing-current); }
+
+.cz-input-icon {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cz-input-icon-spacing-current);
+  height: 100%;
+  color: hsl(var(--cz-color-mutedFg));
+  pointer-events: none;
+  transition: color var(--cz-transition-fast);
+}
+.cz-input-icon svg {
+  width: var(--cz-input-icon-size-current);
+  height: var(--cz-input-icon-size-current);
+}
+.cz-input-icon-left { left: 0; }
+.cz-input-icon-right { right: 0; }
+
+.cz-input-wrapper:focus-within .cz-input-icon {
+  color: hsl(var(--cz-color-primary));
+}
+
+.cz-input-wrapper-error .cz-input-icon {
+  color: hsl(var(--cz-color-danger));
+}
+
+/* Input Clear Button */
+.cz-input-clear {
+  position: absolute;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cz-input-icon-spacing-current);
+  height: 100%;
+  color: hsl(var(--cz-color-mutedFg));
+  background: transparent;
+  border: none;
+  border-radius: var(--cz-radius-sm);
+  cursor: pointer;
+  transition: color var(--cz-transition-fast), background-color var(--cz-transition-fast);
+}
+.cz-input-clear:hover {
+  color: hsl(var(--cz-color-danger));
+  background-color: hsl(var(--cz-color-muted));
+}
+.cz-input-clear svg {
+  width: var(--cz-input-clear-icon-size-current);
+  height: var(--cz-input-clear-icon-size-current);
+}
+
+/* Input Password Toggle */
+.cz-input-password-toggle {
+  position: absolute;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cz-input-icon-spacing-current);
+  height: 100%;
+  color: hsl(var(--cz-color-mutedFg));
+  background: transparent;
+  border: none;
+  border-radius: var(--cz-radius-sm);
+  cursor: pointer;
+  transition: color var(--cz-transition-fast), background-color var(--cz-transition-fast);
+}
+
+.cz-input-password-toggle:hover {
+  color: hsl(var(--cz-color-primary));
+  background-color: hsl(var(--cz-color-muted));
+}
+
+.cz-input-password-toggle svg {
+  width: var(--cz-input-clear-icon-size-current);
+  height: var(--cz-input-clear-icon-size-current);
+}
+
+/* Input Description */
+.cz-input-description {
+  font-size: var(--cz-font-size-xs);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+/* Input Sizes */
+.cz-input-sm { height: 2rem; padding: 0 0.5rem; font-size: var(--cz-font-size-sm); }
+.cz-input-md { height: 2.5rem; padding: 0 0.75rem; font-size: var(--cz-font-size-md); }
+.cz-input-lg { height: 3rem; padding: 0 1rem; font-size: var(--cz-font-size-lg); }
+
+
+/* ===== CARD ===== */
+
+.cz-card {
+  border-radius: var(--cz-radius-lg);
+  border: 1px solid hsl(var(--cz-color-border));
+  background-color: hsl(var(--cz-color-bg));
+  box-shadow: var(--cz-shadow-sm);
+  padding: var(--cz-spacing-lg);
+}
+
+.cz-card-no-padding {
+  padding: 0;
+}
+
+.cz-card-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  padding-bottom: var(--cz-spacing-md);
+  border-bottom: 1px solid hsl(var(--cz-color-border));
+  margin-bottom: var(--cz-spacing-md);
+}
+
+.cz-card-title {
+  font-size: var(--cz-font-size-lg);
+  font-weight: var(--cz-font-weight-semibold);
+  color: hsl(var(--cz-color-fg));
+  line-height: var(--cz-font-lineHeight-tight);
+}
+
+.cz-card-description {
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-card-body {
+  color: hsl(var(--cz-color-fg));
+}
+
+.cz-card-footer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-top: var(--cz-spacing-md);
+  margin-top: var(--cz-spacing-md);
+  border-top: 1px solid hsl(var(--cz-color-border));
+}
+
+/* ===== BADGE ===== */
+
+.cz-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--cz-radius-full);
+  font-weight: var(--cz-font-weight-medium);
+  white-space: nowrap;
+}
+
+/* Badge Sizes */
+.cz-badge-sm { padding: 0.125rem 0.375rem; font-size: 0.7rem; }
+.cz-badge-md { padding: 0.125rem 0.5rem; font-size: var(--cz-font-size-xs); }
+
+/* Badge Variants */
+.cz-badge-default {
+  background-color: hsl(var(--cz-color-secondary));
+  color: hsl(var(--cz-color-secondaryFg));
+}
+
+.cz-badge-primary {
+  background-color: hsl(var(--cz-color-primary));
+  color: hsl(var(--cz-color-primaryFg));
+}
+
+.cz-badge-success {
+  background-color: hsl(var(--cz-color-success));
+  color: hsl(var(--cz-color-successFg));
+}
+
+.cz-badge-danger {
+  background-color: hsl(var(--cz-color-danger));
+  color: hsl(var(--cz-color-dangerFg));
+}
+
+.cz-badge-warning {
+  background-color: hsl(var(--cz-color-warning));
+  color: hsl(var(--cz-color-warningFg));
+}
+
+.cz-badge-outline {
+  background-color: transparent;
+  border: 1px solid hsl(var(--cz-color-border));
+  color: hsl(var(--cz-color-fg));
+}
+
+/* ===== LABEL ===== */
+
+.cz-label {
+  font-size: var(--cz-font-size-sm);
+  font-weight: var(--cz-font-weight-medium);
+  color: hsl(var(--cz-color-fg));
+}
+
+/* ===== ERROR TEXT ===== */
+
+.cz-error {
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-danger));
+}
+
+/* ===== TEXTAREA ===== */
+
+.cz-textarea-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.cz-textarea {
+  width: 100%;
+  min-height: 5rem;
+  border-radius: var(--cz-radius-md);
+  border: 1px solid hsl(var(--cz-color-border));
+  background-color: hsl(var(--cz-color-bg));
+  color: hsl(var(--cz-color-fg));
+  transition: all var(--cz-transition-fast);
+  resize: vertical;
+  font-family: inherit;
+}
+
+.cz-textarea::placeholder {
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-textarea:focus {
+  outline: none;
+  border-color: hsl(var(--cz-color-ring));
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-ring) / 0.2);
+}
+
+.cz-textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.cz-textarea-error {
+  border-color: hsl(var(--cz-color-danger));
+}
+.cz-textarea-error:focus {
+  border-color: hsl(var(--cz-color-danger));
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-danger) / 0.2);
+}
+
+.cz-textarea-auto-resize {
+  overflow: hidden;
+  resize: none;
+}
+
+.cz-textarea-description {
+  font-size: var(--cz-font-size-xs);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+/* Textarea Sizes */
+.cz-textarea-sm { padding: 0.375rem 0.5rem; font-size: var(--cz-font-size-sm); }
+.cz-textarea-md { padding: 0.5rem 0.75rem; font-size: var(--cz-font-size-md); }
+.cz-textarea-lg { padding: 0.75rem 1rem; font-size: var(--cz-font-size-lg); }
+
+/* ===== SWITCH ===== */
+
+.cz-switch {
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  width: 2.75rem;
+  height: 1.5rem;
+  border-radius: var(--cz-radius-full);
+  background-color: hsl(var(--cz-color-muted));
+  transition: all var(--cz-transition-fast);
+  cursor: pointer;
+}
+
+.cz-switch:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-bg)), 0 0 0 4px hsl(var(--cz-color-ring));
+}
+
+.cz-switch[data-state="checked"] {
+  background-color: hsl(var(--cz-color-primary));
+}
+
+.cz-switch.cz-switch-checked {
+  background-color: hsl(var(--cz-color-primary));
+}
+
+.cz-switch.cz-disabled,
+.cz-switch:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cz-switch-thumb {
+  display: block;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--cz-radius-full);
+  background-color: hsl(var(--cz-color-bg));
+  box-shadow: var(--cz-shadow-sm);
+  transition: transform var(--cz-transition-fast);
+  transform: translateX(0.125rem);
+}
+
+.cz-switch[data-state="checked"] .cz-switch-thumb,
+.cz-switch.cz-switch-checked .cz-switch-thumb {
+  transform: translateX(calc(2.75rem - 1.25rem - 0.125rem));
+}
+
+/* Switch Sizes */
+.cz-switch-sm { width: 2rem; height: 1.125rem; }
+.cz-switch-sm .cz-switch-thumb { width: 0.875rem; height: 0.875rem; transform: translateX(0.125rem); }
+.cz-switch-sm[data-state="checked"] .cz-switch-thumb,
+.cz-switch-sm.cz-switch-checked .cz-switch-thumb { transform: translateX(calc(2rem - 0.875rem - 0.125rem)); }
+
+.cz-switch-md { width: 2.75rem; height: 1.5rem; }
+.cz-switch-md .cz-switch-thumb { width: 1.25rem; height: 1.25rem; transform: translateX(0.125rem); }
+.cz-switch-md[data-state="checked"] .cz-switch-thumb,
+.cz-switch-md.cz-switch-checked .cz-switch-thumb { transform: translateX(calc(2.75rem - 1.25rem - 0.125rem)); }
+
+.cz-switch-lg { width: 3.5rem; height: 1.875rem; }
+.cz-switch-lg .cz-switch-thumb { width: 1.625rem; height: 1.625rem; transform: translateX(0.125rem); }
+.cz-switch-lg[data-state="checked"] .cz-switch-thumb,
+.cz-switch-lg.cz-switch-checked .cz-switch-thumb { transform: translateX(calc(3.5rem - 1.625rem - 0.125rem)); }
+
+/* Switch with Label */
+.cz-switch-container {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  cursor: pointer;
+}
+.cz-switch-container.cz-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cz-switch-label-left { flex-direction: row-reverse; }
+.cz-switch-label-right { flex-direction: row; }
+
+.cz-switch-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.cz-switch-label {
+  font-size: var(--cz-font-size-sm);
+  font-weight: var(--cz-font-weight-medium);
+  color: hsl(var(--cz-color-fg));
+  line-height: 1.5;
+}
+
+.cz-switch-description {
+  font-size: var(--cz-font-size-xs);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+/* ===== AVATAR ===== */
+
+.cz-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--cz-radius-full);
+  background-color: hsl(var(--cz-color-muted));
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.cz-avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cz-avatar-fallback {
+  font-weight: var(--cz-font-weight-medium);
+  color: hsl(var(--cz-color-mutedFg));
+  text-transform: uppercase;
+}
+
+/* Avatar Sizes */
+.cz-avatar-sm { width: 2rem; height: 2rem; font-size: var(--cz-font-size-xs); }
+.cz-avatar-md { width: 2.5rem; height: 2.5rem; font-size: var(--cz-font-size-sm); }
+.cz-avatar-lg { width: 3.5rem; height: 3.5rem; font-size: var(--cz-font-size-md); }
+
+/* ===== SEPARATOR ===== */
+
+.cz-separator {
+  background-color: hsl(var(--cz-color-border));
+  flex-shrink: 0;
+}
+
+.cz-separator-horizontal {
+  height: 1px;
+  width: 100%;
+}
+
+.cz-separator-vertical {
+  width: 1px;
+  height: 100%;
+  align-self: stretch;
+}
+
+/* ===== ALERT ===== */
+
+.cz-alert {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: var(--cz-spacing-md) var(--cz-spacing-lg);
+  border-radius: var(--cz-radius-md);
+  border: 1px solid transparent;
+}
+
+.cz-alert-title {
+  font-weight: var(--cz-font-weight-semibold);
+  font-size: var(--cz-font-size-sm);
+}
+
+.cz-alert-content {
+  font-size: var(--cz-font-size-sm);
+}
+
+/* Alert Variants */
+.cz-alert-info {
+  background-color: hsl(var(--cz-color-primary) / 0.1);
+  border-color: hsl(var(--cz-color-primary) / 0.3);
+  color: hsl(var(--cz-color-primary));
+}
+
+.cz-alert-success {
+  background-color: hsl(var(--cz-color-success) / 0.1);
+  border-color: hsl(var(--cz-color-success) / 0.3);
+  color: hsl(var(--cz-color-success));
+}
+
+.cz-alert-warning {
+  background-color: hsl(var(--cz-color-warning) / 0.1);
+  border-color: hsl(var(--cz-color-warning) / 0.3);
+  color: hsl(var(--cz-color-warning));
+}
+
+.cz-alert-danger {
+  background-color: hsl(var(--cz-color-danger) / 0.1);
+  border-color: hsl(var(--cz-color-danger) / 0.3);
+  color: hsl(var(--cz-color-danger));
+}
+
+/* ===== CHECKBOX ===== */
+
+.cz-checkbox-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.cz-checkbox-wrapper.cz-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.cz-checkbox {
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--cz-radius-sm);
+  border: 2px solid hsl(var(--cz-color-border));
+  background-color: hsl(var(--cz-color-bg));
+  transition: all var(--cz-transition-fast);
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.cz-checkbox:hover {
+  border-color: hsl(var(--cz-color-primary));
+}
+
+.cz-checkbox:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-bg)), 0 0 0 4px hsl(var(--cz-color-ring));
+}
+
+.cz-checkbox:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.cz-checkbox[data-state="checked"],
+.cz-checkbox[data-state="indeterminate"] {
+  background-color: hsl(var(--cz-color-primary));
+  border-color: hsl(var(--cz-color-primary));
+}
+
+.cz-checkbox-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: hsl(var(--cz-color-primaryFg));
+  width: 100%;
+  height: 100%;
+}
+
+.cz-checkbox-indicator svg {
+  width: 12px;
+  height: 12px;
+}
+
+.cz-checkbox-label {
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-fg));
+}
+
+/* Checkbox Sizes */
+.cz-checkbox-sm { width: 1rem; height: 1rem; }
+.cz-checkbox-sm .cz-checkbox-indicator svg { width: 10px; height: 10px; }
+
+.cz-checkbox-md { width: 1.25rem; height: 1.25rem; }
+.cz-checkbox-md .cz-checkbox-indicator svg { width: 12px; height: 12px; }
+
+.cz-checkbox-lg { width: 1.5rem; height: 1.5rem; }
+.cz-checkbox-lg .cz-checkbox-indicator svg { width: 14px; height: 14px; }
+
+/* Checkbox with Description */
+.cz-checkbox-wrapper-with-description {
+  align-items: flex-start;
+}
+.cz-checkbox-wrapper-with-description .cz-checkbox {
+  margin-top: 0.125rem;
+}
+
+.cz-checkbox-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.cz-checkbox-description {
+  font-size: var(--cz-font-size-xs);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+/* ===== RADIO GROUP ===== */
+
+.cz-radio-group {
+  display: flex;
+  gap: 0.5rem;
+}
+.cz-radio-group-vertical { flex-direction: column; }
+.cz-radio-group-horizontal { flex-direction: row; flex-wrap: wrap; }
+
+.cz-radio-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.cz-radio-wrapper.cz-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.cz-radio-wrapper-with-description {
+  align-items: flex-start;
+}
+.cz-radio-wrapper-with-description .cz-radio {
+  margin-top: 0.125rem;
+}
+
+.cz-radio {
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--cz-radius-full);
+  border: 2px solid hsl(var(--cz-color-border));
+  background-color: hsl(var(--cz-color-bg));
+  transition: all var(--cz-transition-fast);
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.cz-radio:hover {
+  border-color: hsl(var(--cz-color-primary));
+}
+
+.cz-radio:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-bg)), 0 0 0 4px hsl(var(--cz-color-ring));
+}
+
+.cz-radio:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.cz-radio[data-state="checked"] {
+  border-color: hsl(var(--cz-color-primary));
+}
+
+.cz-radio-indicator {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: var(--cz-radius-full);
+  background-color: hsl(var(--cz-color-primary));
+  transform: scale(0);
+  transition: transform var(--cz-transition-fast);
+}
+
+.cz-radio[data-state="checked"] .cz-radio-indicator {
+  transform: scale(1);
+}
+
+.cz-radio-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.cz-radio-label {
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-fg));
+}
+
+.cz-radio-description {
+  font-size: var(--cz-font-size-xs);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+/* ===== TOOLTIP ===== */
+
+.cz-tooltip-wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.cz-tooltip {
+  position: absolute;
+  z-index: 50;
+  padding: 0.375rem 0.75rem;
+  font-size: var(--cz-font-size-sm);
+  background-color: hsl(var(--cz-color-fg));
+  color: hsl(var(--cz-color-bg));
+  border-radius: var(--cz-radius-md);
+  white-space: nowrap;
+  pointer-events: none;
+  box-shadow: var(--cz-shadow-md);
+}
+
+.cz-tooltip-top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 0.5rem;
+}
+
+.cz-tooltip-bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 0.5rem;
+}
+
+.cz-tooltip-left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: 0.5rem;
+}
+
+.cz-tooltip-right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 0.5rem;
+}
+
+/* ===== PROGRESS ===== */
+
+.cz-progress {
+  width: 100%;
+  background-color: hsl(var(--cz-color-muted));
+  border-radius: var(--cz-radius-full);
+  overflow: hidden;
+}
+
+.cz-progress-bar {
+  height: 100%;
+  width: 100%;
+  border-radius: var(--cz-radius-full);
+  transition: transform var(--cz-transition-normal);
+}
+
+/* Progress Sizes */
+.cz-progress-sm { height: 0.375rem; }
+.cz-progress-md { height: 0.5rem; }
+.cz-progress-lg { height: 0.75rem; }
+
+/* Progress Variants */
+.cz-progress-default { background-color: hsl(var(--cz-color-primary)); }
+.cz-progress-success { background-color: hsl(var(--cz-color-success)); }
+.cz-progress-warning { background-color: hsl(var(--cz-color-warning)); }
+.cz-progress-danger { background-color: hsl(var(--cz-color-danger)); }
+
+/* ===== SKELETON ===== */
+
+@keyframes cz-skeleton-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.cz-skeleton {
+  background-color: hsl(var(--cz-color-muted));
+  animation: cz-skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+.cz-skeleton-text {
+  height: 1rem;
+  width: 100%;
+  border-radius: var(--cz-radius-sm);
+}
+
+.cz-skeleton-circular {
+  border-radius: var(--cz-radius-full);
+}
+
+.cz-skeleton-rectangular {
+  border-radius: var(--cz-radius-md);
+}
+
+/* ===== TABS ===== */
+
+.cz-tabs {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.cz-tabs-list {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-bottom: 1px solid hsl(var(--cz-color-border));
+  padding-bottom: 0;
+}
+
+.cz-tabs-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  font-size: var(--cz-font-size-sm);
+  font-weight: var(--cz-font-weight-medium);
+  color: hsl(var(--cz-color-mutedFg));
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  cursor: pointer;
+  transition: all var(--cz-transition-fast);
+}
+
+.cz-tabs-trigger:hover {
+  color: hsl(var(--cz-color-fg));
+}
+
+.cz-tabs-trigger-active {
+  color: hsl(var(--cz-color-primary));
+  border-bottom-color: hsl(var(--cz-color-primary));
+}
+
+.cz-tabs-trigger:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-ring));
+  border-radius: var(--cz-radius-sm);
+}
+
+.cz-tabs-content {
+  padding-top: var(--cz-spacing-lg);
+}
+
+/* ===== DIALOG ===== */
+
+.cz-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.cz-dialog-content {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 51;
+  background-color: hsl(var(--cz-color-bg));
+  border-radius: var(--cz-radius-lg);
+  box-shadow: var(--cz-shadow-lg);
+  max-width: 32rem;
+  width: calc(100% - 2rem);
+  max-height: calc(100vh - 4rem);
+  overflow-y: auto;
+  padding: var(--cz-spacing-lg);
+}
+
+.cz-dialog-close {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  border-radius: var(--cz-radius-sm);
+  font-size: 1.25rem;
+  color: hsl(var(--cz-color-mutedFg));
+  cursor: pointer;
+  transition: all var(--cz-transition-fast);
+}
+
+.cz-dialog-close:hover {
+  background-color: hsl(var(--cz-color-muted));
+  color: hsl(var(--cz-color-fg));
+}
+
+.cz-dialog-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding-bottom: var(--cz-spacing-md);
+}
+
+.cz-dialog-title {
+  font-size: var(--cz-font-size-lg);
+  font-weight: var(--cz-font-weight-semibold);
+  color: hsl(var(--cz-color-fg));
+  margin: 0;
+}
+
+.cz-dialog-description {
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-mutedFg));
+  margin: 0;
+}
+
+.cz-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding-top: var(--cz-spacing-lg);
+}
+
+/* ===== MODAL ===== */
+
+.cz-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  background-color: var(--cz-modal-overlay-bg, var(--color-bg-modal-overlay, rgba(15, 23, 42, 0.55)));
+  backdrop-filter: blur(2px);
+  animation: cz-modal-overlay-show 150ms ease;
+}
+
+.cz-modal-content {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 61;
+  background-color: var(--cz-modal-content-bg, var(--color-bg-primary, hsl(var(--cz-color-bg))));
+  border-radius: var(--cz-modal-content-border-radius, var(--radius-modal, var(--cz-radius-lg)));
+  border: 1px solid var(--cz-modal-content-border-color, hsl(var(--cz-color-border)));
+  box-shadow: var(--cz-modal-content-shadow, var(--shadow-modal, var(--cz-shadow-lg)));
+  width: min(36rem, calc(100% - 2rem));
+  max-width: calc(100% - 2rem);
+  max-height: calc(100vh - 2rem);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: cz-modal-content-show 180ms ease;
+}
+
+.cz-modal-size-sm { width: min(28rem, calc(100% - 2rem)); }
+.cz-modal-size-md { width: min(36rem, calc(100% - 2rem)); }
+.cz-modal-size-lg { width: min(48rem, calc(100% - 2rem)); }
+.cz-modal-size-xl { width: min(64rem, calc(100% - 2rem)); }
+.cz-modal-size-full { width: min(96vw, 96rem); }
+
+.cz-modal-full-height {
+  height: calc(100vh - 2rem);
+}
+
+.cz-modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--cz-spacing-md);
+  padding: var(--cz-modal-header-padding, var(--cz-spacing-lg) var(--cz-spacing-lg) var(--cz-spacing-md));
+  border-bottom: 1px solid hsl(var(--cz-color-border));
+  flex-shrink: 0;
+}
+
+.cz-modal-header-text {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.cz-modal-title {
+  margin: 0;
+  font-size: var(--cz-font-size-xl);
+  font-weight: var(--cz-font-weight-semibold);
+  color: var(--color-primary, hsl(var(--cz-color-primary)));
+  line-height: var(--cz-font-lineHeight-tight);
+}
+
+.cz-modal-description {
+  margin: 0;
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-modal-close-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cz-modal-close-icon-size, 2rem);
+  height: var(--cz-modal-close-icon-size, 2rem);
+  padding: var(--cz-modal-close-icon-padding, 0.5rem);
+  flex-shrink: 0;
+  border: 0;
+  border-radius: var(--cz-modal-close-icon-radius, var(--radius-button, var(--cz-radius-md)));
+  background: var(--cz-modal-close-icon-bg, transparent);
+  color: var(--cz-modal-close-icon-color, var(--color-text-muted, hsl(var(--cz-color-mutedFg))));
+  cursor: pointer;
+  transition: all var(--cz-modal-close-icon-transition, 200ms ease);
+}
+
+.cz-modal-close-icon:hover {
+  background: var(--cz-modal-close-icon-hover-bg, var(--color-primary-bg, var(--color-bg-tertiary, hsl(var(--cz-color-muted)))));
+  color: var(--cz-modal-close-icon-hover-color, var(--color-primary, hsl(var(--cz-color-primary))));
+}
+
+.cz-modal-close-icon:focus,
+.cz-modal-close-icon:focus-visible {
+  outline: none;
+  box-shadow: var(--cz-modal-close-icon-focus-ring, none);
+}
+
+.cz-modal-close-btn {
+  flex-shrink: 0;
+}
+
+.cz-modal-tab-btn:focus,
+.cz-modal-tab-btn:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.cz-modal-body {
+  padding: var(--cz-modal-body-padding, var(--cz-spacing-md) var(--cz-spacing-lg) var(--cz-spacing-lg));
+  overflow-y: auto;
+  flex: 1;
+}
+
+.cz-modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--cz-modal-footer-gap, var(--cz-spacing-md, 0.75rem));
+  padding: var(--cz-modal-footer-padding, var(--cz-spacing-md) var(--cz-spacing-lg));
+  border-top: 1px solid hsl(var(--cz-color-border));
+  flex-shrink: 0;
+}
+
+@supports not (gap: 0.75rem) {
+  .cz-modal-footer > * + * {
+    margin-left: var(--cz-modal-footer-gap, var(--cz-spacing-md, 0.75rem));
+  }
+}
+
+@keyframes cz-modal-overlay-show {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes cz-modal-content-show {
+  from { opacity: 0; transform: translate(-50%, -48%) scale(0.97); }
+  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+}
+
+/* ===== DATA TABLE ===== */
+
+.cz-data-table-page-btn {
+  transition: all var(--transition-fast, var(--cz-transition-fast));
+}
+
+.cz-data-table-page-btn:hover:not(:disabled) {
+  background: var(--cz-data-table-pagination-button-hover-bg, transparent);
+  border-color: var(--cz-data-table-pagination-button-border-color, transparent);
+}
+
+.cz-data-table-shimmer {
+  background-size: 200% 100%;
+  animation: cz-data-table-shimmer 1.5s infinite;
+}
+
+@keyframes cz-data-table-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* ===== SELECT ===== */
+
+.cz-select {
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 2.5rem;
+  padding: 0 0.75rem;
+  border-radius: var(--cz-radius-md);
+  border: 1px solid hsl(var(--cz-color-border));
+  background-color: hsl(var(--cz-color-bg));
+  color: hsl(var(--cz-color-fg));
+  font-size: var(--cz-font-size-md);
+  transition: all var(--cz-transition-fast);
+  cursor: pointer;
+}
+
+.cz-select:hover {
+  border-color: hsl(var(--cz-color-primary));
+}
+
+.cz-select:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-ring));
+}
+
+.cz-select:disabled,
+.cz-select[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.cz-select[data-placeholder] {
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-select-icon {
+  color: hsl(var(--cz-color-mutedFg));
+  margin-left: 0.5rem;
+  flex-shrink: 0;
+}
+
+/* Select Sizes */
+.cz-select-sm { height: 2rem; padding: 0 0.5rem; font-size: var(--cz-font-size-sm); }
+.cz-select-md { height: 2.5rem; padding: 0 0.75rem; font-size: var(--cz-font-size-md); }
+.cz-select-lg { height: 3rem; padding: 0 1rem; font-size: var(--cz-font-size-lg); }
+
+/* Select Content (Dropdown) */
+.cz-select-content {
+  z-index: 50;
+  min-width: 8rem;
+  max-height: 15rem;
+  overflow: hidden;
+  background-color: hsl(var(--cz-color-bg));
+  border: 1px solid hsl(var(--cz-color-border));
+  border-radius: var(--cz-radius-md);
+  box-shadow: var(--cz-shadow-lg);
+}
+
+.cz-select-viewport {
+  padding: 0.25rem;
+}
+
+.cz-select-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-fg));
+  border-radius: var(--cz-radius-sm);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+}
+
+.cz-select-item:hover,
+.cz-select-item[data-highlighted] {
+  background-color: hsl(var(--cz-color-muted));
+}
+
+.cz-select-item[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cz-select-item-indicator {
+  width: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: hsl(var(--cz-color-primary));
+}
+
+.cz-select-separator {
+  height: 1px;
+  background-color: hsl(var(--cz-color-border));
+  margin: 0.25rem 0;
+}
+
+.cz-select-label {
+  padding: 0.375rem 0.75rem;
+  font-size: var(--cz-font-size-xs);
+  font-weight: var(--cz-font-weight-semibold);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+/* ===== RADIO GROUP ===== */
+
+.cz-radio-group {
+  display: flex;
+}
+
+.cz-radio-group-vertical {
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.cz-radio-group-horizontal {
+  flex-direction: row;
+  gap: 1rem;
+}
+
+.cz-radio-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.cz-radio-wrapper.cz-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.cz-radio {
+  all: unset;
+  box-sizing: border-box;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--cz-radius-full);
+  border: 2px solid hsl(var(--cz-color-border));
+  background-color: hsl(var(--cz-color-bg));
+  transition: all var(--cz-transition-fast);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.cz-radio:hover {
+  border-color: hsl(var(--cz-color-primary));
+}
+
+.cz-radio:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-bg)), 0 0 0 4px hsl(var(--cz-color-ring));
+}
+
+.cz-radio:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.cz-radio[data-state="checked"] {
+  border-color: hsl(var(--cz-color-primary));
+}
+
+.cz-radio-indicator {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: var(--cz-radius-full);
+  background-color: hsl(var(--cz-color-primary));
+}
+
+.cz-radio-label {
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-fg));
+}
+
+/* ===== TABLE ===== */
+
+:root {
+  --cz-table-border-radius: var(--cz-radius-md);
+  --cz-table-border-width: 1px;
+  --cz-table-cell-padding: 0.75rem 1rem;
+}
+
+.cz-table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  border-radius: var(--cz-table-border-radius);
+}
+
+.cz-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--cz-font-size-sm);
+}
+
+.cz-table-header {
+  background-color: hsl(var(--cz-color-muted));
+}
+
+.cz-table-row {
+  border-bottom: 1px solid hsl(var(--cz-color-border));
+  transition: background-color var(--cz-transition-fast);
+}
+
+.cz-table-body .cz-table-row:hover {
+  background-color: hsl(var(--cz-color-muted) / 0.5);
+}
+
+.cz-table-head {
+  padding: var(--cz-table-cell-padding);
+  text-align: left;
+  font-weight: var(--cz-font-weight-semibold);
+  color: hsl(var(--cz-color-fg));
+  white-space: nowrap;
+  border-bottom: var(--cz-table-border-width) solid hsl(var(--cz-color-border));
+}
+
+.cz-table-cell {
+  padding: var(--cz-table-cell-padding);
+  color: hsl(var(--cz-color-fg));
+  border-bottom: var(--cz-table-border-width) solid hsl(var(--cz-color-border));
+}
+
+/* ===== ACCORDION ===== */
+
+.cz-accordion {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.cz-accordion-item {
+  border-bottom: 1px solid hsl(var(--cz-color-border));
+}
+
+.cz-accordion-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 1rem 0;
+  font-size: var(--cz-font-size-md);
+  font-weight: var(--cz-font-weight-medium);
+  color: hsl(var(--cz-color-fg));
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  transition: all var(--cz-transition-fast);
+}
+
+.cz-accordion-trigger:hover {
+  color: hsl(var(--cz-color-primary));
+}
+
+.cz-accordion-icon {
+  transition: transform var(--cz-transition-fast);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-accordion-icon-expanded,
+.cz-accordion-trigger[data-state="open"] .cz-accordion-icon {
+  transform: rotate(180deg);
+}
+
+.cz-accordion-content {
+  overflow: hidden;
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-accordion-content[data-state="open"] {
+  animation: cz-accordion-down var(--cz-transition-fast) ease-out;
+}
+
+.cz-accordion-content[data-state="closed"] {
+  animation: cz-accordion-up var(--cz-transition-fast) ease-out;
+}
+
+.cz-accordion-content-inner {
+  padding-bottom: 1rem;
+}
+
+@keyframes cz-accordion-down {
+  from { height: 0; }
+  to { height: var(--radix-accordion-content-height); }
+}
+
+@keyframes cz-accordion-up {
+  from { height: var(--radix-accordion-content-height); }
+  to { height: 0; }
+}
+
+/* ===== STACK ===== */
+
+.cz-stack {
+  display: flex;
+}
+
+.cz-stack-row { flex-direction: row; }
+.cz-stack-column { flex-direction: column; }
+
+.cz-stack-gap-xs { gap: var(--cz-spacing-xs); }
+.cz-stack-gap-sm { gap: var(--cz-spacing-sm); }
+.cz-stack-gap-md { gap: var(--cz-spacing-md); }
+.cz-stack-gap-lg { gap: var(--cz-spacing-lg); }
+.cz-stack-gap-xl { gap: var(--cz-spacing-xl); }
+
+.cz-stack-align-start { align-items: flex-start; }
+.cz-stack-align-center { align-items: center; }
+.cz-stack-align-end { align-items: flex-end; }
+.cz-stack-align-stretch { align-items: stretch; }
+
+.cz-stack-justify-start { justify-content: flex-start; }
+.cz-stack-justify-center { justify-content: center; }
+.cz-stack-justify-end { justify-content: flex-end; }
+.cz-stack-justify-between { justify-content: space-between; }
+.cz-stack-justify-around { justify-content: space-around; }
+
+.cz-stack-wrap { flex-wrap: wrap; }
+
+/* ===== SPINNER ===== */
+
+.cz-spinner {
+  display: inline-flex;
+  animation: cz-spin 1s linear infinite;
+}
+
+.cz-spinner-svg {
+  width: 100%;
+  height: 100%;
+}
+
+.cz-spinner-track {
+  opacity: 0.2;
+}
+
+.cz-spinner-indicator {
+  opacity: 1;
+}
+
+/* Spinner Sizes */
+.cz-spinner-sm { width: 1rem; height: 1rem; }
+.cz-spinner-md { width: 1.5rem; height: 1.5rem; }
+.cz-spinner-lg { width: 2rem; height: 2rem; }
+
+/* Spinner Variants */
+.cz-spinner-default { color: hsl(var(--cz-color-fg)); }
+.cz-spinner-primary { color: hsl(var(--cz-color-primary)); }
+
+/* ===== ASPECT RATIO ===== */
+
+.cz-aspect-ratio {
+  position: relative;
+  width: 100%;
+}
+
+.cz-aspect-ratio-content {
+  position: absolute;
+  inset: 0;
+}
+
+.cz-aspect-ratio-content > * {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* ===== BREADCRUMB ===== */
+
+.cz-breadcrumb {
+  display: flex;
+  align-items: center;
+}
+
+.cz-breadcrumb-list {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.cz-breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.cz-breadcrumb-link {
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-mutedFg));
+  text-decoration: none;
+  transition: color var(--cz-transition-fast);
+}
+
+.cz-breadcrumb-link:hover {
+  color: hsl(var(--cz-color-fg));
+}
+
+.cz-breadcrumb-separator {
+  color: hsl(var(--cz-color-mutedFg));
+  display: inline-flex;
+}
+
+.cz-breadcrumb-page {
+  font-size: var(--cz-font-size-sm);
+  font-weight: var(--cz-font-weight-medium);
+  color: hsl(var(--cz-color-fg));
+}
+
+/* ===== LABEL (extended) ===== */
+
+.cz-label-required {
+  color: hsl(var(--cz-color-danger));
+  margin-left: 0.125rem;
+}
+
+/* ===== VISUALLY HIDDEN ===== */
+
+.cz-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ===== CONTAINER ===== */
+
+.cz-container {
+  width: 100%;
+  padding-left: var(--cz-spacing-lg);
+  padding-right: var(--cz-spacing-lg);
+}
+
+.cz-container-centered {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.cz-container-sm { max-width: 640px; }
+.cz-container-md { max-width: 768px; }
+.cz-container-lg { max-width: 1024px; }
+.cz-container-xl { max-width: 1280px; }
+.cz-container-full { max-width: 100%; }
+
+/* ===== GRID ===== */
+
+.cz-grid {
+  display: grid;
+}
+
+.cz-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
+.cz-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+.cz-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+.cz-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+.cz-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
+.cz-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
+.cz-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
+
+.cz-grid-gap-xs { gap: var(--cz-spacing-xs); }
+.cz-grid-gap-sm { gap: var(--cz-spacing-sm); }
+.cz-grid-gap-md { gap: var(--cz-spacing-md); }
+.cz-grid-gap-lg { gap: var(--cz-spacing-lg); }
+.cz-grid-gap-xl { gap: var(--cz-spacing-xl); }
+
+/* ===== KBD ===== */
+
+.cz-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.125rem 0.375rem;
+  font-size: var(--cz-font-size-xs);
+  font-family: var(--cz-font-mono, ui-monospace, monospace);
+  font-weight: var(--cz-font-weight-medium);
+  background-color: hsl(var(--cz-color-muted));
+  color: hsl(var(--cz-color-fg));
+  border: 1px solid hsl(var(--cz-color-border));
+  border-radius: var(--cz-radius-sm);
+  box-shadow: 0 1px 0 hsl(var(--cz-color-border));
+}
+
+/* ===== CODE ===== */
+
+.cz-code {
+  display: inline;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.875em;
+  font-family: var(--cz-font-mono, ui-monospace, monospace);
+  background-color: hsl(var(--cz-color-muted));
+  color: hsl(var(--cz-color-fg));
+  border-radius: var(--cz-radius-sm);
+}
+
+/* ===== SCROLL AREA ===== */
+
+.cz-scroll-area {
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--cz-color-border)) transparent;
+}
+
+.cz-scroll-area::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.cz-scroll-area::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.cz-scroll-area::-webkit-scrollbar-thumb {
+  background-color: hsl(var(--cz-color-border));
+  border-radius: var(--cz-radius-full);
+}
+
+.cz-scroll-area::-webkit-scrollbar-thumb:hover {
+  background-color: hsl(var(--cz-color-mutedFg));
+}
+
+/* ===== DROPDOWN MENU ===== */
+
+.cz-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.cz-dropdown-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.cz-dropdown-content {
+  position: absolute;
+  top: 100%;
+  margin-top: 0.25rem;
+  z-index: 50;
+  min-width: 10rem;
+  background-color: hsl(var(--cz-color-bg));
+  border: 1px solid hsl(var(--cz-color-border));
+  border-radius: var(--cz-radius-md);
+  box-shadow: var(--cz-shadow-lg);
+  padding: 0.25rem;
+  animation: cz-fade-in 0.15s ease-out;
+}
+
+.cz-dropdown-align-start { left: 0; }
+.cz-dropdown-align-center { left: 50%; transform: translateX(-50%); }
+.cz-dropdown-align-end { right: 0; }
+
+.cz-dropdown-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-fg));
+  background: transparent;
+  border: none;
+  border-radius: var(--cz-radius-sm);
+  cursor: pointer;
+  text-align: left;
+  transition: all var(--cz-transition-fast);
+}
+
+.cz-dropdown-item:hover {
+  background-color: hsl(var(--cz-color-muted));
+}
+
+.cz-dropdown-item:focus {
+  outline: none;
+  background-color: hsl(var(--cz-color-muted));
+}
+
+.cz-dropdown-separator {
+  height: 1px;
+  background-color: hsl(var(--cz-color-border));
+  margin: 0.25rem 0;
+}
+
+.cz-dropdown-label {
+  padding: 0.5rem 0.75rem;
+  font-size: var(--cz-font-size-xs);
+  font-weight: var(--cz-font-weight-semibold);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+/* ===== TOAST ===== */
+
+.cz-toaster {
+  position: fixed;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  max-width: 24rem;
+  width: 100%;
+  pointer-events: none;
+}
+
+.cz-toaster-top-left { top: 0; left: 0; }
+.cz-toaster-top-center { top: 0; left: 50%; transform: translateX(-50%); }
+.cz-toaster-top-right { top: 0; right: 0; }
+.cz-toaster-bottom-left { bottom: 0; left: 0; }
+.cz-toaster-bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); }
+.cz-toaster-bottom-right { bottom: 0; right: 0; }
+
+.cz-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  background-color: hsl(var(--cz-color-bg));
+  border: 1px solid hsl(var(--cz-color-border));
+  border-radius: var(--cz-radius-lg);
+  box-shadow: var(--cz-shadow-lg);
+  pointer-events: auto;
+  animation: cz-slide-in 0.3s ease-out;
+}
+
+@keyframes cz-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.cz-toast-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.cz-toast-title {
+  font-size: var(--cz-font-size-sm);
+  font-weight: var(--cz-font-weight-semibold);
+  color: hsl(var(--cz-color-fg));
+}
+
+.cz-toast-description {
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-mutedFg));
+  margin-top: 0.125rem;
+}
+
+.cz-toast-close {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: hsl(var(--cz-color-mutedFg));
+  cursor: pointer;
+  border-radius: var(--cz-radius-sm);
+  font-size: 1rem;
+  transition: all var(--cz-transition-fast);
+}
+
+.cz-toast-close:hover {
+  background-color: hsl(var(--cz-color-muted));
+  color: hsl(var(--cz-color-fg));
+}
+
+/* Toast Variants */
+.cz-toast-success {
+  border-left: 4px solid hsl(var(--cz-color-success));
+}
+
+.cz-toast-warning {
+  border-left: 4px solid hsl(var(--cz-color-warning));
+}
+
+.cz-toast-danger {
+  border-left: 4px solid hsl(var(--cz-color-danger));
+}
+
+/* ===== TAG ===== */
+
+.cz-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: var(--cz-radius-full);
+  font-weight: var(--cz-font-weight-medium);
+  transition: all var(--cz-transition-fast);
+}
+
+.cz-tag-content {
+  display: inline-flex;
+  align-items: center;
+}
+
+.cz-tag-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  color: inherit;
+  opacity: 0.6;
+  transition: opacity var(--cz-transition-fast);
+  border-radius: var(--cz-radius-full);
+}
+
+.cz-tag-remove:hover {
+  opacity: 1;
+}
+
+/* Tag Sizes */
+.cz-tag-sm { padding: 0.125rem 0.5rem; font-size: var(--cz-font-size-xs); }
+.cz-tag-md { padding: 0.25rem 0.625rem; font-size: var(--cz-font-size-sm); }
+.cz-tag-lg { padding: 0.375rem 0.75rem; font-size: var(--cz-font-size-md); }
+
+/* Tag Variants */
+.cz-tag-default {
+  background-color: hsl(var(--cz-color-muted));
+  color: hsl(var(--cz-color-fg));
+}
+
+.cz-tag-primary {
+  background-color: hsl(var(--cz-color-primary));
+  color: hsl(var(--cz-color-primaryFg));
+}
+
+.cz-tag-secondary {
+  background-color: hsl(var(--cz-color-secondary));
+  color: hsl(var(--cz-color-secondaryFg));
+}
+
+.cz-tag-success {
+  background-color: hsl(142 76% 36%);
+  color: white;
+}
+
+.cz-tag-warning {
+  background-color: hsl(38 92% 50%);
+  color: white;
+}
+
+.cz-tag-danger {
+  background-color: hsl(var(--cz-color-danger));
+  color: white;
+}
+
+/* ===== SCROLL AREA ===== */
+
+.cz-scroll-area {
+  overflow: hidden;
+}
+
+.cz-scroll-area-viewport {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+
+.cz-scroll-area-scrollbar {
+  display: flex;
+  touch-action: none;
+  user-select: none;
+  padding: 2px;
+  background-color: transparent;
+  transition: background-color var(--cz-transition-fast);
+}
+
+.cz-scroll-area-scrollbar:hover {
+  background-color: hsl(var(--cz-color-muted) / 0.5);
+}
+
+.cz-scroll-area-scrollbar-vertical {
+  width: 10px;
+}
+
+.cz-scroll-area-scrollbar-horizontal {
+  flex-direction: column;
+  height: 10px;
+}
+
+.cz-scroll-area-thumb {
+  flex: 1;
+  background-color: hsl(var(--cz-color-border));
+  border-radius: var(--cz-radius-full);
+  position: relative;
+  transition: background-color var(--cz-transition-fast);
+}
+
+.cz-scroll-area-thumb::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  min-width: 44px;
+  min-height: 44px;
+}
+
+.cz-scroll-area-thumb:hover {
+  background-color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-scroll-area-corner {
+  background-color: hsl(var(--cz-color-muted));
+}